Skip to content

Commit

Permalink
chore(examples): updated examples to latest dependencies
Browse files Browse the repository at this point in the history
  • Loading branch information
@mlaursen
mlaursen committed Aug 13, 2021
1 parent 958f34f commit f2eb07a
Show file tree
Hide file tree
Showing 40 changed files with 182 additions and 163 deletions.
2 changes: 1 addition & 1 deletion examples/create-react-app-typescript/README.md
View file
Expand Up @@ -8,7 +8,7 @@ This example will setup an example Create React App + ReactMD app that has the f

- [tsconfig.json](./tsconfig.json) to allow absolute imports instead of relative imports from the `"src"` directory
- `import MyComponent from "components/MyComponent"` instead of `import MyComponent from "../../components/MyComponent"`
- [\_variables.scss](./src/_variables.scss) to override the default `react-md` theme and feature toggles
- [\_everything.scss](./src/_everything.scss) to override the default `react-md` theme and feature toggles
- a reusable [Layout.tsx](./src/components/Layout/Layout.tsx) that:
- updates all the icons to use `SVGIcon`s instead of `FontIcon`s
- initializes the `Layout` component from `react-md` with navigation items
Expand Down
16 changes: 8 additions & 8 deletions examples/create-react-app-typescript/package.json
View file
Expand Up @@ -10,21 +10,21 @@
},
"dependencies": {
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"@types/jest": "^26.0.15",
"@types/node": "^12.0.0",
"@types/react": "^16.9.53",
"@types/react-dom": "^16.9.8",
"@testing-library/react": "^12.0.0",
"@testing-library/user-event": "^13.2.1",
"@types/jest": "^27.0.1",
"@types/node": "^16.6.1",
"@types/react": "^17.0.17",
"@types/react-dom": "^17.0.9",
"@types/react-router-dom": "^5.1.5",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-md": "latest",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.0",
"react-scripts": "4.0.3",
"sass": "^1.36.0",
"typescript": "^4.0.3",
"web-vitals": "^0.2.4"
"web-vitals": "^2.1.0"
},
"eslintConfig": {
"extends": [
Expand Down
10 changes: 10 additions & 0 deletions examples/create-react-app-typescript/src/_everything.scss
View file
@@ -0,0 +1,10 @@
@use '@react-md/theme/dist/color-palette' as *;
@forward 'react-md' with (
// update these variables as needed for your app
$rmd-theme-primary: $rmd-purple-500,
$rmd-theme-secondary: $rmd-pink-a-200,
$rmd-theme-light: true,

$rmd-theme-dark-elevation: 'prefers-color-scheme',
$rmd-utils-auto-dense: false,
);
9 changes: 0 additions & 9 deletions examples/create-react-app-typescript/src/_variables.scss
View file

This file was deleted.

18 changes: 10 additions & 8 deletions examples/create-react-app-typescript/src/components/Layout/Layout.tsx
View file
@@ -1,37 +1,39 @@
import React, { ReactElement, ReactNode } from "react";
import { Link, useLocation } from "react-router-dom";
import {
Layout as RMDLayout,
Configuration,
ConfigurableIcons,
useLayoutNavigation,
ArrowDropDownSVGIcon,
ArrowUpwardSVGIcon,
CheckBoxSVGIcon,
CheckSVGIcon,
ConfigurableIcons,
Configuration,
ErrorOutlineSVGIcon,
FileDownloadSVGIcon,
KeyboardArrowDownSVGIcon,
KeyboardArrowLeftSVGIcon,
KeyboardArrowRightSVGIcon,
Layout as RMDLayout,
MenuSVGIcon,
NotificationsSVGIcon,
RadioButtonCheckedSVGIcon,
RemoveRedEyeSVGIcon,
ArrowUpwardSVGIcon,
CheckSVGIcon,
useLayoutNavigation,
} from "react-md";

import navItems from "./navItems";

const icons: ConfigurableIcons = {
back: <KeyboardArrowLeftSVGIcon />,
checkbox: <CheckBoxSVGIcon />,
dropdown: <ArrowDropDownSVGIcon />,
download: <FileDownloadSVGIcon />,
dropdown: <ArrowDropDownSVGIcon />,
error: <ErrorOutlineSVGIcon />,
expander: <KeyboardArrowDownSVGIcon />,
forward: <KeyboardArrowRightSVGIcon />,
menu: <MenuSVGIcon />,
notification: <NotificationsSVGIcon />,
radio: <RadioButtonCheckedSVGIcon />,
password: <RemoveRedEyeSVGIcon />,
radio: <RadioButtonCheckedSVGIcon />,
selected: <CheckSVGIcon />,
sort: <ArrowUpwardSVGIcon />,
};
Expand Down
5 changes: 2 additions & 3 deletions examples/create-react-app-typescript/src/index.scss
View file
@@ -1,8 +1,7 @@
// import react-md variable overrides
@import './variables';
@use './everything' as *;

// generate all react-md styles with the custom theme
@import 'react-md/dist/styles';
@include react-md-utils;

@media (prefers-color-scheme: dark) {
:root {
Expand Down
2 changes: 1 addition & 1 deletion examples/create-react-app-typescript/tsconfig.json
View file
Expand Up @@ -20,7 +20,7 @@
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react"
"jsx": "react-jsx"
},
"include": [
"src"
Expand Down
2 changes: 1 addition & 1 deletion examples/create-react-app/README.md
View file
Expand Up @@ -8,7 +8,7 @@ This example will setup an example Create React App + ReactMD app that has the f

- [jsconfig.json](./jsconfig.json) to allow absolute imports instead of relative imports from the `"src"` directory
- `import MyComponent from "components/MyComponent"` instead of `import MyComponent from "../../components/MyComponent"`
- [\_variables.scss](./src/_variables.scss) to override the default `react-md` theme and feature toggles
- [\_everything.scss](./src/_everything.scss) to override the default `react-md` theme and feature toggles
- a reusable [Layout.jsx](./src/components/Layout/Layout.jsx) that:
- updates all the icons to use `SVGIcon`s instead of `FontIcon`s
- initializes the `Layout` component from `react-md` with navigation items
Expand Down
10 changes: 5 additions & 5 deletions examples/create-react-app/package.json
View file
Expand Up @@ -10,15 +10,15 @@
},
"dependencies": {
"@testing-library/jest-dom": "^5.11.6",
"@testing-library/react": "^11.1.2",
"@testing-library/user-event": "^12.2.2",
"@testing-library/react": "^12.0.0",
"@testing-library/user-event": "^13.2.1",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-md": "latest",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.0",
"sass": "^1.36.0",
"web-vitals": "^0.2.4"
"react-scripts": "4.0.3",
"sass": "^1.37.5",
"web-vitals": "^2.1.0"
},
"eslintConfig": {
"extends": [
Expand Down
10 changes: 10 additions & 0 deletions examples/create-react-app/src/_everything.scss
View file
@@ -0,0 +1,10 @@
@use '@react-md/theme/dist/color-palette' as *;
@forward 'react-md' with (
// update these variables as needed for your app
$rmd-theme-primary: $rmd-purple-500,
$rmd-theme-secondary: $rmd-pink-a-200,
$rmd-theme-light: true,

$rmd-theme-dark-elevation: 'prefers-color-scheme',
$rmd-utils-auto-dense: false,
);
9 changes: 0 additions & 9 deletions examples/create-react-app/src/_variables.scss
View file

This file was deleted.

16 changes: 9 additions & 7 deletions examples/create-react-app/src/components/Layout/Layout.jsx
View file
@@ -1,36 +1,38 @@
import React from 'react';
import { Link, useLocation } from 'react-router-dom';
import {
Layout as RMDLayout,
Configuration,
useLayoutNavigation,
ArrowDropDownSVGIcon,
ArrowUpwardSVGIcon,
CheckBoxSVGIcon,
CheckSVGIcon,
Configuration,
ErrorOutlineSVGIcon,
FileDownloadSVGIcon,
KeyboardArrowDownSVGIcon,
KeyboardArrowLeftSVGIcon,
KeyboardArrowRightSVGIcon,
Layout as RMDLayout,
MenuSVGIcon,
NotificationsSVGIcon,
RadioButtonCheckedSVGIcon,
RemoveRedEyeSVGIcon,
ArrowUpwardSVGIcon,
CheckSVGIcon,
useLayoutNavigation,
} from 'react-md';

import navItems from './navItems';

const icons = {
back: <KeyboardArrowLeftSVGIcon />,
checkbox: <CheckBoxSVGIcon />,
dropdown: <ArrowDropDownSVGIcon />,
download: <FileDownloadSVGIcon />,
dropdown: <ArrowDropDownSVGIcon />,
error: <ErrorOutlineSVGIcon />,
expander: <KeyboardArrowDownSVGIcon />,
forward: <KeyboardArrowRightSVGIcon />,
menu: <MenuSVGIcon />,
notification: <NotificationsSVGIcon />,
radio: <RadioButtonCheckedSVGIcon />,
password: <RemoveRedEyeSVGIcon />,
radio: <RadioButtonCheckedSVGIcon />,
selected: <CheckSVGIcon />,
sort: <ArrowUpwardSVGIcon />,
};
Expand Down
5 changes: 2 additions & 3 deletions examples/create-react-app/src/index.scss
View file
@@ -1,8 +1,7 @@
// import react-md variable overrides
@import './variables';
@use './everything' as *;

// generate all react-md styles with the custom theme
@import 'react-md/dist/styles';
@include react-md-utils;

@media (prefers-color-scheme: dark) {
:root {
Expand Down
2 changes: 1 addition & 1 deletion examples/gatsby-typescript/README.md
View file
Expand Up @@ -8,7 +8,7 @@ This is a [Gatsby](https://www.gatsbyjs.org/) project using
This example will setup an example Gatsby + ReactMD app that has the following
features:

- [\_variables.scss](./src/styles/_variables.scss) to override the default
- [\_everything.scss](./src/styles/_everything.scss) to override the default
`react-md` theme and feature toggles
- [gatsby-browser.js](./gatsby-browser.js) to import global `react-md` styles
and the Roboto font
Expand Down
16 changes: 8 additions & 8 deletions examples/gatsby-typescript/package.json
View file
Expand Up @@ -12,17 +12,17 @@
"test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
},
"dependencies": {
"gatsby": "^2.23.12",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"gatsby": "^3.11.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-md": "latest",
"typeface-roboto": "^0.0.75"
"typeface-roboto": "^1.1.13"
},
"devDependencies": {
"gatsby-plugin-layout": "^1.3.10",
"gatsby-plugin-sass": "^2.3.12",
"gatsby-plugin-typescript": "^2.4.16",
"prettier": "2.0.5",
"gatsby-plugin-layout": "^2.11.0",
"gatsby-plugin-sass": "^4.11.0",
"gatsby-plugin-typescript": "^3.11.0",
"prettier": "2.3.2",
"sass": "^1.36.0"
}
}
16 changes: 9 additions & 7 deletions examples/gatsby-typescript/src/components/Layout/Layout.jsx
View file
@@ -1,20 +1,21 @@
import React from "react"
import {
Layout as RMDLayout,
Configuration,
useLayoutNavigation,
ArrowDropDownSVGIcon,
ArrowUpwardSVGIcon,
CheckBoxSVGIcon,
CheckSVGIcon,
Configuration,
ErrorOutlineSVGIcon,
FileDownloadSVGIcon,
KeyboardArrowDownSVGIcon,
KeyboardArrowLeftSVGIcon,
KeyboardArrowRightSVGIcon,
Layout as RMDLayout,
MenuSVGIcon,
NotificationsSVGIcon,
RadioButtonCheckedSVGIcon,
RemoveRedEyeSVGIcon,
ArrowUpwardSVGIcon,
CheckSVGIcon,
useLayoutNavigation,
} from "react-md"

import LinkUnstyled from "../LinkUnstyled"
Expand All @@ -23,14 +24,15 @@ import navItems from "./navItems"
const icons = {
back: <KeyboardArrowLeftSVGIcon />,
checkbox: <CheckBoxSVGIcon />,
dropdown: <ArrowDropDownSVGIcon />,
download: <FileDownloadSVGIcon />,
dropdown: <ArrowDropDownSVGIcon />,
error: <ErrorOutlineSVGIcon />,
expander: <KeyboardArrowDownSVGIcon />,
forward: <KeyboardArrowRightSVGIcon />,
menu: <MenuSVGIcon />,
notification: <NotificationsSVGIcon />,
radio: <RadioButtonCheckedSVGIcon />,
password: <RemoveRedEyeSVGIcon />,
radio: <RadioButtonCheckedSVGIcon />,
selected: <CheckSVGIcon />,
sort: <ArrowUpwardSVGIcon />,
}
Expand Down
10 changes: 10 additions & 0 deletions examples/gatsby-typescript/src/styles/_everything.scss
View file
@@ -0,0 +1,10 @@
@use '@react-md/theme/dist/color-palette' as *;
@forward 'react-md' with (
// update these variables as needed for your app
$rmd-theme-primary: $rmd-purple-500,
$rmd-theme-secondary: $rmd-pink-a-200,
$rmd-theme-light: true,

$rmd-theme-dark-elevation: 'prefers-color-scheme',
$rmd-utils-auto-dense: false,
);
9 changes: 0 additions & 9 deletions examples/gatsby-typescript/src/styles/_variables.scss
View file

This file was deleted.

5 changes: 2 additions & 3 deletions examples/gatsby-typescript/src/styles/global.scss
View file
@@ -1,8 +1,7 @@
// import react-md variable overrides
@import "./variables";
@use './everything' as *;

// generate all react-md styles with the custom theme
@import "react-md/dist/styles";
@include react-md-utils;

@media (prefers-color-scheme: dark) {
:root {
Expand Down
2 changes: 1 addition & 1 deletion examples/gatsby/README.md
View file
Expand Up @@ -8,7 +8,7 @@ This is a [Gatsby](https://www.gatsbyjs.org/) project using
This example will setup an example Gatsby + ReactMD app that has the following
features:

- [\_variables.scss](./src/styles/_variables.scss) to override the default
- [\_everything.scss](./src/styles/_everything.scss) to override the default
`react-md` theme and feature toggles
- [gatsby-browser.js](./gatsby-browser.js) to import global `react-md` styles
and the Roboto font
Expand Down
14 changes: 7 additions & 7 deletions examples/gatsby/package.json
View file
Expand Up @@ -12,16 +12,16 @@
"test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
},
"dependencies": {
"gatsby": "^2.23.12",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"gatsby": "^3.11.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-md": "latest",
"typeface-roboto": "^0.0.75"
"typeface-roboto": "^1.1.13"
},
"devDependencies": {
"gatsby-plugin-layout": "^1.3.10",
"gatsby-plugin-sass": "^2.3.12",
"prettier": "2.0.5",
"gatsby-plugin-layout": "^2.11.0",
"gatsby-plugin-sass": "^4.11.0",
"prettier": "2.3.2",
"sass": "^1.36.0"
}
}

0 comments on commit f2eb07a

Please sign in to comment.