mui V5 support (#78)

* feat: Add V5 (emotion) Support * chore: Linter setup * fix: Dependency handling (#72) * feat: Add emotion cache props (#73) * fix: Dependency handling * feat: Add emotion cache props * fix: Add gatsby-node in files * v4.0.1 * fix: Avoid transitive dependency (#74) * v4.0.2 * chore: Apply mui rebranding (#77) Co-authored-by: Olivier Tassinari <olivier.tassinari@gmail.com>
hupe1980 · Sep 19, 2021 · e787e20 · e787e20
1 parent 7a8305b
commit e787e20
Show file tree

Hide file tree

Showing 51 changed files with 4,989 additions and 8,283 deletions.
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,10 @@
+{
+  "presets": [
+    [
+      "babel-preset-gatsby-package",
+      {
+        "browser": true
+      }
+    ]
+  ]
+}
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -38,15 +38,6 @@ aliases:
           - master
     requires:
       - bootstrap
-
-  test_template: &test_template
-    steps:
-      - checkout
-      - <<: *restore_cache
-      - <<: *install_node_modules
-      - <<: *persist_cache
-      - <<: *attach_to_bootstrap
-      - run: yarn jest
 
 jobs:
   bootstrap:
@@ -68,11 +59,7 @@ jobs:
       - <<: *restore_cache
       - <<: *install_node_modules
       - <<: *persist_cache
-      - run: yarn lint:ci
-
-  unit_tests:
-    <<: *node-executor
-    <<: *test_template  
+      - run: yarn lint
 
   e2e_tests_development_runtime:
     <<: *e2e-executor
@@ -100,9 +87,6 @@ workflows:
     jobs:
       - bootstrap
       - lint
-      - unit_tests:
-          requires:
-            - bootstrap
       - e2e_tests_development_runtime:
           <<: *e2e-test-workflow
       - e2e_tests_production_runtime:

diff --git a/.eslintrc.js b/.eslintrc.js
@@ -1,14 +1,33 @@
 module.exports = {
-  parser: "babel-eslint",
-  extends: ["react-app", "prettier"],
-  plugins: ["prettier"],
+  parser: `@babel/eslint-parser`,
+  extends: [`eslint:recommended`, `plugin:react/recommended`],
+  parserOptions: {
+    ecmaVersion: 2016,
+    sourceType: `module`,
+    ecmaFeatures: {
+      jsx: true,
+    },
+    babelOptions: {
+      configFile: `./gatsby-plugin-material-ui/.babelrc`,
+    },
+  },
+  env: {
+    browser: true,
+    es6: true,
+    node: true,
+    jest: true,
+  },
+  settings: {
+    react: {
+      version: `detect`,
+    },
+  },
   rules: {
-    "prettier/prettier": "error",
-    quotes: ["error", "backtick"],
+    quotes: [`error`, `backtick`],
   },
   overrides: [
     {
-      files: ["**/cypress/integration/**/*", "**/cypress/support/**/*"],
+      files: [`**/cypress/integration/**/*`, `**/cypress/support/**/*`],
       globals: {
         cy: false,
         Cypress: false,

diff --git a/.prettierrc.js b/.prettierrc.js
@@ -2,5 +2,5 @@ module.exports = {
   semi: true,
   singleQuote: false,
   tabWidth: 2,
-  trailingComma: "all",
+  trailingComma: `all`,
 };
diff --git a/README.md b/README.md
@@ -1,8 +1,8 @@
 # gatsby-plugin-material-ui
 
-> A [Gatsby](https://github.com/gatsbyjs/gatsby) plugin for [@material-ui/styles](https://github.com/mui-org/material-ui) with built-in server-side rendering support.
+> A [Gatsby](https://github.com/gatsbyjs/gatsby) plugin for [@material-ui](https://github.com/mui-org/material-ui) with built-in server-side rendering support.
 
-This is the plugin for Material-UI v4. The plugin for v3 can be found [here](https://github.com/hupe1980/gatsby-plugin-material-ui/tree/v1.2.5).
+This is the plugin for Material-UI v5 (emotion). The plugin for v4 can be found [here](https://github.com/hupe1980/gatsby-plugin-material-ui/tree/v3.0.1).
 
 ## Documentation
 

diff --git a/e2e-tests/development-runtime/cypress/integration/navigation.js b/e2e-tests/development-runtime/cypress/integration/navigation.js
@@ -8,6 +8,6 @@ describe(`navigation`, () => {
 
     cy.getTestElement(`about-message`)
       .invoke(`text`)
-      .should(`equal`, `Gatsby v4-beta example`);
+      .should(`equal`, `Gatsby example`);
   });
 });
diff --git a/e2e-tests/development-runtime/cypress/plugins/index.js b/e2e-tests/development-runtime/cypress/plugins/index.js
@@ -11,6 +11,7 @@
 // This function is called when a project is opened or re-opened (e.g. due to
 // the project's config changing)
 
+// eslint-disable-next-line no-unused-vars
 module.exports = (on, config) => {
   // `on` is used to hook into various events Cypress emits
   // `config` is the resolved Cypress config

diff --git a/e2e-tests/development-runtime/cypress/support/commands.js b/e2e-tests/development-runtime/cypress/support/commands.js
@@ -1,12 +1,12 @@
 import "@testing-library/cypress/add-commands";
 
-Cypress.Commands.add(`lifecycleCallCount`, action =>
+Cypress.Commands.add(`lifecycleCallCount`, (action) =>
   cy
     .window()
     .then(
-      win =>
+      (win) =>
         win.___PageComponentLifecycleCallsLog.filter(
-          entry => entry.action === action,
+          (entry) => entry.action === action,
         ).length,
     ),
 );
diff --git a/e2e-tests/development-runtime/gatsby-config.js b/e2e-tests/development-runtime/gatsby-config.js
@@ -1,13 +1,8 @@
 module.exports = {
   plugins: [
     `gatsby-plugin-top-layout`,
-    {
-      resolve: `gatsby-plugin-material-ui`,
-      options: {
-        pathToStylesProvider: `src/styles-provider-props`,
-      },
-    },
     `gatsby-plugin-react-helmet`,
+    `gatsby-plugin-material-ui`,
   ],
   siteMetadata: {
     title: `My page`,

diff --git a/e2e-tests/development-runtime/package.json b/e2e-tests/development-runtime/package.json
@@ -1,10 +1,11 @@
 {
   "name": "development-runtime",
   "private": true,
-  "version": "3.0.0",
+  "version": "4.0.1",
   "dependencies": {
-    "@material-ui/core": "latest",
-    "@material-ui/styles": "latest",
+    "@emotion/react": "latest",
+    "@emotion/styled": "latest",
+    "@mui/material": "latest",
     "gatsby": "latest",
     "gatsby-plugin-react-helmet": "latest",
     "react": "latest",
@@ -24,10 +25,10 @@
     "test": "cross-env CYPRESS_SUPPORT=y yarn start-server-and-test "
   },
   "devDependencies": {
-    "@testing-library/cypress": "^4.0.5",
-    "cross-env": "^5.2.0",
-    "cypress": "^3.4.1",
-    "gatsby-cypress": "^0.2.3",
+    "@testing-library/cypress": "^8.0.0",
+    "cross-env": "^7.0.3",
+    "cypress": "^8.2.0",
+    "gatsby-cypress": "^1.11.0",
     "start-server-and-test": "^1.9.1"
   }
 }
diff --git a/e2e-tests/development-runtime/plugins/gatsby-plugin-top-layout/top-layout.js b/e2e-tests/development-runtime/plugins/gatsby-plugin-top-layout/top-layout.js
@@ -1,8 +1,8 @@
 import React from "react";
 import PropTypes from "prop-types";
 import { Helmet } from "react-helmet";
-import CssBaseline from "@material-ui/core/CssBaseline";
-import { ThemeProvider } from "@material-ui/styles";
+import CssBaseline from "@mui/material/CssBaseline";
+import { ThemeProvider } from "@mui/material/styles";
 import theme from "../../src/theme";
 
 export default function TopLayout(props) {

diff --git a/e2e-tests/development-runtime/src/components/link.js b/e2e-tests/development-runtime/src/components/link.js
@@ -1,9 +1,9 @@
-import React from "react";
-import MuiLink from "@material-ui/core/Link";
-import { Link as GastsbyLink } from "gatsby";
+import * as React from "react";
+import MuiLink from "@mui/material/Link";
+import { Link as GatsbyLink } from "gatsby";
 
-function Link(props) {
-  return <MuiLink component={GastsbyLink} {...props} />;
-}
+const Link = React.forwardRef(function Link(props, ref) {
+  return <MuiLink component={GatsbyLink} ref={ref} {...props} />;
+});
 
 export default Link;
diff --git a/e2e-tests/development-runtime/src/components/pro-tip.js b/e2e-tests/development-runtime/src/components/pro-tip.js
@@ -1,8 +1,7 @@
-import React from "react";
-import { makeStyles } from "@material-ui/core/styles";
-import Link from "@material-ui/core/Link";
-import SvgIcon from "@material-ui/core/SvgIcon";
-import Typography from "@material-ui/core/Typography";
+import * as React from "react";
+import Link from "@mui/material/Link";
+import SvgIcon from "@mui/material/SvgIcon";
+import Typography from "@mui/material/Typography";
 
 function LightBulbIcon(props) {
   return (
@@ -12,24 +11,13 @@ function LightBulbIcon(props) {
   );
 }
 
-const useStyles = makeStyles(theme => ({
-  root: {
-    margin: theme.spacing(6, 0, 3),
-  },
-  lightBulb: {
-    verticalAlign: `middle`,
-    marginRight: theme.spacing(1),
-  },
-}));
-
 export default function ProTip() {
-  const classes = useStyles();
   return (
-    <Typography className={classes.root} color="textSecondary">
-      <LightBulbIcon className={classes.lightBulb} />
+    <Typography sx={{ mt: 6, mb: 3 }} color="text.secondary">
+      <LightBulbIcon sx={{ mr: 1, verticalAlign: `middle` }} />
       Pro tip: See more{` `}
-      <Link href="https://next.material-ui.com/getting-started/page-layout-examples/">
-        page layout examples
+      <Link href="https://material-ui.com/getting-started/templates/">
+        templates
       </Link>
       {` `}
       on the Material-UI documentation.

diff --git a/e2e-tests/development-runtime/src/pages/about.js b/e2e-tests/development-runtime/src/pages/about.js
@@ -1,8 +1,8 @@
 import React from "react";
-import Container from "@material-ui/core/Container";
-import Typography from "@material-ui/core/Typography";
-import Box from "@material-ui/core/Box";
-import MuiLink from "@material-ui/core/Link";
+import Container from "@mui/material/Container";
+import Typography from "@mui/material/Typography";
+import Box from "@mui/material/Box";
+import MuiLink from "@mui/material/Link";
 
 import ProTip from "../components/pro-tip";
 import Link from "../components/link";
@@ -29,7 +29,7 @@ export default function App() {
           component="h1"
           gutterBottom
         >
-          Gatsby v4-beta example
+          Gatsby example
         </Typography>
         <Link to="/">Go to the main page</Link>
         <ProTip />

diff --git a/e2e-tests/development-runtime/src/pages/index.js b/e2e-tests/development-runtime/src/pages/index.js
@@ -1,8 +1,8 @@
 import React from "react";
-import Container from "@material-ui/core/Container";
-import Typography from "@material-ui/core/Typography";
-import Box from "@material-ui/core/Box";
-import MuiLink from "@material-ui/core/Link";
+import Container from "@mui/material/Container";
+import Typography from "@mui/material/Typography";
+import Box from "@mui/material/Box";
+import MuiLink from "@mui/material/Link";
 
 import ProTip from "../components/pro-tip";
 import Link from "../components/link";
@@ -24,7 +24,7 @@ export default function App() {
     <Container maxWidth="sm">
       <Box my={4}>
         <Typography variant="h4" component="h1" gutterBottom>
-          Gatsby v4-beta example
+          Gatsby example
         </Typography>
         <Link to="/about" color="secondary">
           Go to the about page

diff --git a/e2e-tests/development-runtime/src/styles-provider-props.js b/e2e-tests/development-runtime/src/styles-provider-props.js
diff --git a/e2e-tests/development-runtime/src/theme.js b/e2e-tests/development-runtime/src/theme.js
@@ -1,8 +1,8 @@
-import red from "@material-ui/core/colors/red";
-import { createMuiTheme } from "@material-ui/core/styles";
+import red from "@mui/material/colors/red";
+import { createTheme } from "@mui/material/styles";
 
 // A custom theme for this app
-const theme = createMuiTheme({
+const theme = createTheme({
   palette: {
     primary: {
       main: `#556cd6`,

diff --git a/e2e-tests/production-runtime/cypress/integration/navigation.js b/e2e-tests/production-runtime/cypress/integration/navigation.js
@@ -8,6 +8,6 @@ describe(`navigation`, () => {
 
     cy.getTestElement(`about-message`)
       .invoke(`text`)
-      .should(`equal`, `Gatsby v4-beta example`);
+      .should(`equal`, `Gatsby example`);
   });
 });
diff --git a/e2e-tests/production-runtime/cypress/integration/server-side-injected-css.js b/e2e-tests/production-runtime/cypress/integration/server-side-injected-css.js
diff --git a/e2e-tests/production-runtime/cypress/plugins/index.js b/e2e-tests/production-runtime/cypress/plugins/index.js
@@ -11,6 +11,7 @@
 // This function is called when a project is opened or re-opened (e.g. due to
 // the project's config changing)
 
+// eslint-disable-next-line no-unused-vars
 module.exports = (on, config) => {
   // `on` is used to hook into various events Cypress emits
   // `config` is the resolved Cypress config

diff --git a/e2e-tests/production-runtime/cypress/support/commands.js b/e2e-tests/production-runtime/cypress/support/commands.js
@@ -1,12 +1,12 @@
 import "@testing-library/cypress/add-commands";
 
-Cypress.Commands.add(`lifecycleCallCount`, action =>
+Cypress.Commands.add(`lifecycleCallCount`, (action) =>
   cy
     .window()
     .then(
-      win =>
+      (win) =>
         win.___PageComponentLifecycleCallsLog.filter(
-          entry => entry.action === action,
+          (entry) => entry.action === action,
         ).length,
     ),
 );
diff --git a/e2e-tests/production-runtime/gatsby-config.js b/e2e-tests/production-runtime/gatsby-config.js
@@ -1,13 +1,13 @@
 module.exports = {
   plugins: [
     `gatsby-plugin-top-layout`,
+    `gatsby-plugin-react-helmet`,
     {
       resolve: `gatsby-plugin-material-ui`,
       options: {
-        pathToStylesProvider: `src/styles-provider-props`,
+        pathToEmotionCacheProps: `src/emotion-cache-props`,
       },
     },
-    `gatsby-plugin-react-helmet`,
   ],
   siteMetadata: {
     title: `My page`,