Skip to content

Commit f2eb07a

Browse files
mlaursenmlaursen
committed
chore(examples): updated examples to latest dependencies
1 parent 958f34f commit f2eb07a

File tree

40 files changed

+182
-163
lines changed

40 files changed

+182
-163
lines changed

‎examples/create-react-app-typescript/README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ This example will setup an example Create React App + ReactMD app that has the f
88

99
- [tsconfig.json](./tsconfig.json) to allow absolute imports instead of relative imports from the `"src"` directory
1010
- `import MyComponent from "components/MyComponent"` instead of `import MyComponent from "../../components/MyComponent"`
11-
- [\_variables.scss](./src/_variables.scss) to override the default `react-md` theme and feature toggles
11+
- [\_everything.scss](./src/_everything.scss) to override the default `react-md` theme and feature toggles
1212
- a reusable [Layout.tsx](./src/components/Layout/Layout.tsx) that:
1313
- updates all the icons to use `SVGIcon`s instead of `FontIcon`s
1414
- initializes the `Layout` component from `react-md` with navigation items

‎examples/create-react-app-typescript/package.json‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -10,21 +10,21 @@
1010
},
1111
"dependencies": {
1212
"@testing-library/jest-dom": "^5.11.4",
13-
"@testing-library/react": "^11.1.0",
14-
"@testing-library/user-event": "^12.1.10",
15-
"@types/jest": "^26.0.15",
16-
"@types/node": "^12.0.0",
17-
"@types/react": "^16.9.53",
18-
"@types/react-dom": "^16.9.8",
13+
"@testing-library/react": "^12.0.0",
14+
"@testing-library/user-event": "^13.2.1",
15+
"@types/jest": "^27.0.1",
16+
"@types/node": "^16.6.1",
17+
"@types/react": "^17.0.17",
18+
"@types/react-dom": "^17.0.9",
1919
"@types/react-router-dom": "^5.1.5",
2020
"react": "^17.0.1",
2121
"react-dom": "^17.0.1",
2222
"react-md": "latest",
2323
"react-router-dom": "^5.2.0",
24-
"react-scripts": "4.0.0",
24+
"react-scripts": "4.0.3",
2525
"sass": "^1.36.0",
2626
"typescript": "^4.0.3",
27-
"web-vitals": "^0.2.4"
27+
"web-vitals": "^2.1.0"
2828
},
2929
"eslintConfig": {
3030
"extends": [

‎examples/create-react-app-typescript/src/_everything.scss‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
@use '@react-md/theme/dist/color-palette' as *;
2+
@forward 'react-md' with (
3+
// update these variables as needed for your app
4+
$rmd-theme-primary: $rmd-purple-500,
5+
$rmd-theme-secondary: $rmd-pink-a-200,
6+
$rmd-theme-light: true,
7+
8+
$rmd-theme-dark-elevation: 'prefers-color-scheme',
9+
$rmd-utils-auto-dense: false,
10+
);

‎examples/create-react-app-typescript/src/_variables.scss‎

Lines changed: 0 additions & 9 deletions
This file was deleted.

‎examples/create-react-app-typescript/src/components/Layout/Layout.tsx‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,39 @@
11
import React, { ReactElement, ReactNode } from "react";
22
import { Link, useLocation } from "react-router-dom";
33
import {
4-
Layout as RMDLayout,
5-
Configuration,
6-
ConfigurableIcons,
7-
useLayoutNavigation,
84
ArrowDropDownSVGIcon,
5+
ArrowUpwardSVGIcon,
96
CheckBoxSVGIcon,
7+
CheckSVGIcon,
8+
ConfigurableIcons,
9+
Configuration,
10+
ErrorOutlineSVGIcon,
1011
FileDownloadSVGIcon,
1112
KeyboardArrowDownSVGIcon,
1213
KeyboardArrowLeftSVGIcon,
1314
KeyboardArrowRightSVGIcon,
15+
Layout as RMDLayout,
1416
MenuSVGIcon,
1517
NotificationsSVGIcon,
1618
RadioButtonCheckedSVGIcon,
1719
RemoveRedEyeSVGIcon,
18-
ArrowUpwardSVGIcon,
19-
CheckSVGIcon,
20+
useLayoutNavigation,
2021
} from "react-md";
2122

2223
import navItems from "./navItems";
2324

2425
const icons: ConfigurableIcons = {
2526
back: <KeyboardArrowLeftSVGIcon />,
2627
checkbox: <CheckBoxSVGIcon />,
27-
dropdown: <ArrowDropDownSVGIcon />,
2828
download: <FileDownloadSVGIcon />,
29+
dropdown: <ArrowDropDownSVGIcon />,
30+
error: <ErrorOutlineSVGIcon />,
2931
expander: <KeyboardArrowDownSVGIcon />,
3032
forward: <KeyboardArrowRightSVGIcon />,
3133
menu: <MenuSVGIcon />,
3234
notification: <NotificationsSVGIcon />,
33-
radio: <RadioButtonCheckedSVGIcon />,
3435
password: <RemoveRedEyeSVGIcon />,
36+
radio: <RadioButtonCheckedSVGIcon />,
3537
selected: <CheckSVGIcon />,
3638
sort: <ArrowUpwardSVGIcon />,
3739
};

‎examples/create-react-app-typescript/src/index.scss‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
1-
// import react-md variable overrides
2-
@import './variables';
1+
@use './everything' as *;
32

43
// generate all react-md styles with the custom theme
5-
@import 'react-md/dist/styles';
4+
@include react-md-utils;
65

76
@media (prefers-color-scheme: dark) {
87
:root {

‎examples/create-react-app-typescript/tsconfig.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
"resolveJsonModule": true,
2121
"isolatedModules": true,
2222
"noEmit": true,
23-
"jsx": "react"
23+
"jsx": "react-jsx"
2424
},
2525
"include": [
2626
"src"

‎examples/create-react-app/README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ This example will setup an example Create React App + ReactMD app that has the f
88

99
- [jsconfig.json](./jsconfig.json) to allow absolute imports instead of relative imports from the `"src"` directory
1010
- `import MyComponent from "components/MyComponent"` instead of `import MyComponent from "../../components/MyComponent"`
11-
- [\_variables.scss](./src/_variables.scss) to override the default `react-md` theme and feature toggles
11+
- [\_everything.scss](./src/_everything.scss) to override the default `react-md` theme and feature toggles
1212
- a reusable [Layout.jsx](./src/components/Layout/Layout.jsx) that:
1313
- updates all the icons to use `SVGIcon`s instead of `FontIcon`s
1414
- initializes the `Layout` component from `react-md` with navigation items

‎examples/create-react-app/package.json‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,15 +10,15 @@
1010
},
1111
"dependencies": {
1212
"@testing-library/jest-dom": "^5.11.6",
13-
"@testing-library/react": "^11.1.2",
14-
"@testing-library/user-event": "^12.2.2",
13+
"@testing-library/react": "^12.0.0",
14+
"@testing-library/user-event": "^13.2.1",
1515
"react": "^17.0.1",
1616
"react-dom": "^17.0.1",
1717
"react-md": "latest",
1818
"react-router-dom": "^5.2.0",
19-
"react-scripts": "4.0.0",
20-
"sass": "^1.36.0",
21-
"web-vitals": "^0.2.4"
19+
"react-scripts": "4.0.3",
20+
"sass": "^1.37.5",
21+
"web-vitals": "^2.1.0"
2222
},
2323
"eslintConfig": {
2424
"extends": [

‎examples/create-react-app/src/_everything.scss‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
@use '@react-md/theme/dist/color-palette' as *;
2+
@forward 'react-md' with (
3+
// update these variables as needed for your app
4+
$rmd-theme-primary: $rmd-purple-500,
5+
$rmd-theme-secondary: $rmd-pink-a-200,
6+
$rmd-theme-light: true,
7+
8+
$rmd-theme-dark-elevation: 'prefers-color-scheme',
9+
$rmd-utils-auto-dense: false,
10+
);

0 commit comments

Comments
 (0)