Full Code of hupe1980/gatsby-plugin-material-ui for AI

Repository: hupe1980/gatsby-plugin-material-ui
Branch: master
Commit: 6eda811c6ad0
Files: 60
Total size: 32.7 KB

Directory structure:
gitextract_pe22uw6c/

├── .babelrc
├── .circleci/
│   └── config.yml
├── .eslintignore
├── .eslintrc.js
├── .github/
│   └── stale.yml
├── .gitignore
├── .prettierrc.js
├── LICENSE
├── README.md
├── e2e-tests/
│   ├── development-runtime/
│   │   ├── .gitignore
│   │   ├── README.md
│   │   ├── cypress/
│   │   │   ├── fixtures/
│   │   │   │   └── example.json
│   │   │   ├── integration/
│   │   │   │   └── navigation.js
│   │   │   ├── plugins/
│   │   │   │   └── index.js
│   │   │   └── support/
│   │   │       ├── commands.js
│   │   │       └── index.js
│   │   ├── cypress.json
│   │   ├── gatsby-config.js
│   │   ├── package.json
│   │   ├── plugins/
│   │   │   └── gatsby-plugin-top-layout/
│   │   │       ├── gatsby-browser.js
│   │   │       ├── gatsby-ssr.js
│   │   │       ├── package.json
│   │   │       └── top-layout.js
│   │   └── src/
│   │       ├── components/
│   │       │   ├── link.js
│   │       │   └── pro-tip.js
│   │       ├── pages/
│   │       │   ├── about.js
│   │       │   └── index.js
│   │       └── theme.js
│   └── production-runtime/
│       ├── .gitignore
│       ├── README.md
│       ├── cypress/
│       │   ├── fixtures/
│       │   │   └── example.json
│       │   ├── integration/
│       │   │   └── navigation.js
│       │   ├── plugins/
│       │   │   └── index.js
│       │   └── support/
│       │       ├── commands.js
│       │       └── index.js
│       ├── cypress.json
│       ├── gatsby-config.js
│       ├── package.json
│       ├── plugins/
│       │   └── gatsby-plugin-top-layout/
│       │       ├── gatsby-browser.js
│       │       ├── gatsby-ssr.js
│       │       ├── package.json
│       │       └── top-layout.js
│       └── src/
│           ├── components/
│           │   ├── link.js
│           │   └── pro-tip.js
│           ├── emotion-cache-props.js
│           ├── pages/
│           │   ├── about.js
│           │   └── index.js
│           └── theme.js
├── gatsby-plugin-material-ui/
│   ├── .babelrc
│   ├── .gitignore
│   ├── LICENSE
│   ├── README.md
│   ├── index.js
│   ├── package.json
│   └── src/
│       ├── gatsby-browser.js
│       ├── gatsby-node.js
│       ├── gatsby-ssr.js
│       └── get-emotion-cache.js
├── lerna.json
└── package.json

================================================
FILE CONTENTS
================================================

================================================
FILE: .babelrc
================================================
{
  "presets": [
    [
      "babel-preset-gatsby-package",
      {
        "browser": true
      }
    ]
  ]
}


================================================
FILE: .circleci/config.yml
================================================
version: 2.1

aliases:
  node-executor: &node-executor
    docker:
      - image: circleci/node:14

  e2e-executor: &e2e-executor
    docker:
      - image: cypress/browsers:node14.15.0-chrome86-ff82

  restore_cache: &restore_cache
    restore_cache:
      name: Restore node_modules cache
      keys:
        - yarn-cypress-cache-{{ checksum "yarn.lock" }}

  install_node_modules: &install_node_modules
    run:
      name: Install node modules
      command: yarn --frozen-lockfile

  persist_cache: &persist_cache
    save_cache:
      name: Save node modules cache
      key: yarn-cypress-cache-{{ checksum "yarn.lock" }}
      paths:
        - ~/.cache

  attach_to_bootstrap: &attach_to_bootstrap
    attach_workspace:
      at: gatsby-plugin-material-ui

  e2e-test-workflow: &e2e-test-workflow
    filters:
      branches:
        ignore:
          - master
    requires:
      - bootstrap

jobs:
  bootstrap:
    <<: *node-executor
    steps:
      - checkout
      - <<: *restore_cache
      - <<: *install_node_modules
      - <<: *persist_cache
      - persist_to_workspace:
          root: gatsby-plugin-material-ui
          paths:
            - "*"

  lint:
    <<: *node-executor
    steps:
      - checkout
      - <<: *restore_cache
      - <<: *install_node_modules
      - <<: *persist_cache
      - run: yarn lint

  e2e_tests_development_runtime:
    <<: *e2e-executor
    steps:
      - checkout
      - <<: *restore_cache
      - <<: *install_node_modules
      - <<: *persist_cache
      - <<: *attach_to_bootstrap
      - run: yarn test:development-runtime

  e2e_tests_production_runtime:
    <<: *e2e-executor
    steps:
      - checkout
      - <<: *restore_cache
      - <<: *install_node_modules
      - <<: *persist_cache
      - <<: *attach_to_bootstrap
      - run: yarn test:production-runtime

workflows:
  version: 2
  build-test:
    jobs:
      - bootstrap
      - lint
      - e2e_tests_development_runtime:
          <<: *e2e-test-workflow
      - e2e_tests_production_runtime:
          <<: *e2e-test-workflow


================================================
FILE: .eslintignore
================================================
/.git
/coverage
/e2e-tests/**/public/

/gatsby-plugin-material-ui/**/*.js
!/gatsby-plugin-material-ui/src/**/*.js

node_modules

================================================
FILE: .eslintrc.js
================================================
module.exports = {
  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: {
    quotes: [`error`, `backtick`],
  },
  overrides: [
    {
      files: [`**/cypress/integration/**/*`, `**/cypress/support/**/*`],
      globals: {
        cy: false,
        Cypress: false,
      },
    },
  ],
};


================================================
FILE: .github/stale.yml
================================================
# Number of days of inactivity before an issue becomes stale
daysUntilStale: 30
# Number of days of inactivity before a stale issue is closed
daysUntilClose: 7
# Issues with these labels will never be considered stale
exemptLabels:
  - pinned
  - security
  - feature-request
# Label to use when marking an issue as stale
staleLabel: pending-close-response-required
# Comment to post when marking an issue as stale. Set to `false` to disable
markComment: >
  This issue has been automatically marked as stale because it has not had
  recent activity. It will be closed if no further activity occurs. Thank you
  for your contributions.
# Comment to post when closing a stale issue. Set to `false` to disable
closeComment: >
  This issue has been automatically closed because of inactivity.
  Please open a new issue if are still encountering problems.

================================================
FILE: .gitignore
================================================
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# Runtime data
pids
*.pid
*.seed
*.pid.lock

# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov

# Coverage directory used by tools like istanbul
coverage

# nyc test coverage
.nyc_output

# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
.grunt

# Bower dependency directory (https://bower.io/)
bower_components

# node-waf configuration
.lock-wscript

# Compiled binary addons (https://nodejs.org/api/addons.html)
build/Release

# Dependency directories
node_modules/
jspm_packages/

# TypeScript v1 declaration files
typings/

# Optional npm cache directory
.npm

# Optional eslint cache
.eslintcache

# Optional REPL history
.node_repl_history

# Output of 'npm pack'
*.tgz

# Yarn Integrity file
.yarn-integrity

# dotenv environment variables file
.env

# next.js build output
.next

# Lib folder
lib

.DS_Store



================================================
FILE: .prettierrc.js
================================================
module.exports = {
  semi: true,
  singleQuote: false,
  tabWidth: 2,
  trailingComma: `all`,
};


================================================
FILE: LICENSE
================================================
MIT License

Copyright (c) 2018 

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.


================================================
FILE: README.md
================================================
# gatsby-plugin-material-ui

> 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 v5 (emotion). The plugin for v4 can be found [here](https://github.com/hupe1980/gatsby-plugin-material-ui/tree/v3.0.1).

## Documentation

[Read the documentation](/gatsby-plugin-material-ui/README.md).


================================================
FILE: e2e-tests/development-runtime/.gitignore
================================================
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# Runtime data
pids
*.pid
*.seed
*.pid.lock

# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov

# Coverage directory used by tools like istanbul
coverage

# nyc test coverage
.nyc_output

# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
.grunt

# Bower dependency directory (https://bower.io/)
bower_components

# node-waf configuration
.lock-wscript

# Compiled binary addons (http://nodejs.org/api/addons.html)
build/Release

# Dependency directories
node_modules/
jspm_packages/

# Typescript v1 declaration files
typings/

# Optional npm cache directory
.npm

# Optional eslint cache
.eslintcache

# Optional REPL history
.node_repl_history

# Output of 'npm pack'
*.tgz

# dotenv environment variables file
.env

# gatsby files
.cache/
public

# Mac files
.DS_Store

# Yarn
yarn-error.log
.pnp/
.pnp.js
# Yarn Integrity file
.yarn-integrity


================================================
FILE: e2e-tests/development-runtime/README.md
================================================
# gatsby-plugin-material-ui


================================================
FILE: e2e-tests/development-runtime/cypress/fixtures/example.json
================================================
{
  "name": "Using fixtures to represent data",
  "email": "hello@cypress.io",
  "body": "Fixtures are a great way to mock data for responses to routes"
}

================================================
FILE: e2e-tests/development-runtime/cypress/integration/navigation.js
================================================
describe(`navigation`, () => {
  beforeEach(() => {
    cy.visit(`/`).waitForRouteChange();
  });

  it(`displays content from other pages`, () => {
    cy.visit(`/about`).waitForRouteChange();

    cy.getTestElement(`about-message`)
      .invoke(`text`)
      .should(`equal`, `Gatsby example`);
  });
});


================================================
FILE: e2e-tests/development-runtime/cypress/plugins/index.js
================================================
// ***********************************************************
// This example plugins/index.js can be used to load plugins
//
// You can change the location of this file or turn off loading
// the plugins file with the 'pluginsFile' configuration option.
//
// You can read more here:
// https://on.cypress.io/plugins-guide
// ***********************************************************

// 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
};


================================================
FILE: e2e-tests/development-runtime/cypress/support/commands.js
================================================
import "@testing-library/cypress/add-commands";

Cypress.Commands.add(`lifecycleCallCount`, (action) =>
  cy
    .window()
    .then(
      (win) =>
        win.___PageComponentLifecycleCallsLog.filter(
          (entry) => entry.action === action,
        ).length,
    ),
);


================================================
FILE: e2e-tests/development-runtime/cypress/support/index.js
================================================
import "gatsby-cypress";
import "./commands";


================================================
FILE: e2e-tests/development-runtime/cypress.json
================================================
{
  "baseUrl": "http://localhost:8000",
  "failOnStatusCode": false,
  "video": false
}


================================================
FILE: e2e-tests/development-runtime/gatsby-config.js
================================================
module.exports = {
  plugins: [
    `gatsby-plugin-top-layout`,
    `gatsby-plugin-react-helmet`,
    `gatsby-plugin-material-ui`,
  ],
  siteMetadata: {
    title: `My page`,
  },
};


================================================
FILE: e2e-tests/development-runtime/package.json
================================================
{
  "name": "development-runtime",
  "private": true,
  "version": "4.1.0",
  "dependencies": {
    "@emotion/react": "latest",
    "@emotion/styled": "latest",
    "@mui/material": "latest",
    "gatsby": "latest",
    "gatsby-plugin-react-helmet": "latest",
    "react": "latest",
    "react-dom": "latest",
    "react-helmet": "latest"
  },
  "license": "MIT",
  "scripts": {
    "build": "gatsby build",
    "develop": "gatsby develop",
    "format": "prettier --write src/**/*.{js,jsx}",
    "start": "yarn develop",
    "serve": "gatsby serve",
    "cy:open": "cypress open",
    "cy:run": "cypress run --browser chrome",
    "start-server-and-test": "start-server-and-test develop http://localhost:8000 cy:run",
    "test": "cross-env CYPRESS_SUPPORT=y yarn start-server-and-test "
  },
  "devDependencies": {
    "@testing-library/cypress": "^8.0.0",
    "cross-env": "^7.0.3",
    "cypress": "^9.0.0",
    "gatsby-cypress": "^2.2.0",
    "start-server-and-test": "^1.9.1"
  }
}


================================================
FILE: e2e-tests/development-runtime/plugins/gatsby-plugin-top-layout/gatsby-browser.js
================================================
import React from "react";
import TopLayout from "./top-layout";

export const onClientEntry = () => {
  const head = document.head;
  const injectFirstNode = document.createComment(`mui-inject-first`);
  head.insertBefore(injectFirstNode, head.firstChild);
};

export const wrapRootElement = ({ element }) => {
  return <TopLayout>{element}</TopLayout>;
};


================================================
FILE: e2e-tests/development-runtime/plugins/gatsby-plugin-top-layout/gatsby-ssr.js
================================================
import React from "react";
import TopLayout from "./top-layout";

export const wrapRootElement = ({ element }) => {
  return <TopLayout>{element}</TopLayout>;
};


================================================
FILE: e2e-tests/development-runtime/plugins/gatsby-plugin-top-layout/package.json
================================================
{
  "name": "gatsby-plugin-top-layout"
}


================================================
FILE: e2e-tests/development-runtime/plugins/gatsby-plugin-top-layout/top-layout.js
================================================
import React from "react";
import PropTypes from "prop-types";
import { Helmet } from "react-helmet";
import CssBaseline from "@mui/material/CssBaseline";
import { ThemeProvider } from "@mui/material/styles";
import theme from "../../src/theme";

export default function TopLayout(props) {
  return (
    <>
      <Helmet>
        <meta
          name="viewport"
          content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no"
        />
        <link
          href="https://fonts.googleapis.com/css?family=Roboto:400,500,700"
          rel="stylesheet"
        />
      </Helmet>
      <ThemeProvider theme={theme}>
        {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
        <CssBaseline />
        {props.children}
      </ThemeProvider>
    </>
  );
}

TopLayout.propTypes = {
  children: PropTypes.node,
};


================================================
FILE: e2e-tests/development-runtime/src/components/link.js
================================================
import * as React from "react";
import MuiLink from "@mui/material/Link";
import { Link as GatsbyLink } from "gatsby";

const Link = React.forwardRef(function Link(props, ref) {
  return <MuiLink component={GatsbyLink} ref={ref} {...props} />;
});

export default Link;


================================================
FILE: e2e-tests/development-runtime/src/components/pro-tip.js
================================================
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 (
    <SvgIcon {...props}>
      <path d="M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7zm2.85 11.1l-.85.6V16h-4v-2.3l-.85-.6C7.8 12.16 7 10.63 7 9c0-2.76 2.24-5 5-5s5 2.24 5 5c0 1.63-.8 3.16-2.15 4.1z" />
    </SvgIcon>
  );
}

export default function ProTip() {
  return (
    <Typography sx={{ mt: 6, mb: 3 }} color="text.secondary">
      <LightBulbIcon sx={{ mr: 1, verticalAlign: `middle` }} />
      Pro tip: See more{` `}
      <Link href="https://material-ui.com/getting-started/templates/">
        templates
      </Link>
      {` `}
      on the Material-UI documentation.
    </Typography>
  );
}


================================================
FILE: e2e-tests/development-runtime/src/pages/about.js
================================================
import React from "react";
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";

function MadeWithLove() {
  return (
    <Typography variant="body2" color="textSecondary" align="center">
      {`Built with love by the `}
      <MuiLink color="inherit" href="https://material-ui.com/">
        Material-UI
      </MuiLink>
      {` team.`}
    </Typography>
  );
}

export default function App() {
  return (
    <Container maxWidth="sm">
      <Box my={4}>
        <Typography
          data-testid="about-message"
          variant="h4"
          component="h1"
          gutterBottom
        >
          Gatsby example
        </Typography>
        <Link to="/">Go to the main page</Link>
        <ProTip />
        <MadeWithLove />
      </Box>
    </Container>
  );
}


================================================
FILE: e2e-tests/development-runtime/src/pages/index.js
================================================
import React from "react";
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";

function MadeWithLove() {
  return (
    <Typography variant="body2" color="textSecondary" align="center">
      {`Built with love by the `}
      <MuiLink color="inherit" href="https://material-ui.com/">
        Material-UI
      </MuiLink>
      {` team.`}
    </Typography>
  );
}

export default function App() {
  return (
    <Container maxWidth="sm">
      <Box my={4}>
        <Typography variant="h4" component="h1" gutterBottom>
          Gatsby example
        </Typography>
        <Link to="/about" color="secondary">
          Go to the about page
        </Link>
        <ProTip />
        <MadeWithLove />
      </Box>
    </Container>
  );
}


================================================
FILE: e2e-tests/development-runtime/src/theme.js
================================================
import red from "@mui/material/colors/red";
import { createTheme } from "@mui/material/styles";

// A custom theme for this app
const theme = createTheme({
  palette: {
    primary: {
      main: `#556cd6`,
    },
    secondary: {
      main: `#19857b`,
    },
    error: {
      main: red.A400,
    },
    background: {
      default: `#fff`,
    },
  },
});

export default theme;


================================================
FILE: e2e-tests/production-runtime/.gitignore
================================================
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# Runtime data
pids
*.pid
*.seed
*.pid.lock

# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov

# Coverage directory used by tools like istanbul
coverage

# nyc test coverage
.nyc_output

# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
.grunt

# Bower dependency directory (https://bower.io/)
bower_components

# node-waf configuration
.lock-wscript

# Compiled binary addons (http://nodejs.org/api/addons.html)
build/Release

# Dependency directories
node_modules/
jspm_packages/

# Typescript v1 declaration files
typings/

# Optional npm cache directory
.npm

# Optional eslint cache
.eslintcache

# Optional REPL history
.node_repl_history

# Output of 'npm pack'
*.tgz

# dotenv environment variables file
.env

# gatsby files
.cache/
public

# Mac files
.DS_Store

# Yarn
yarn-error.log
.pnp/
.pnp.js
# Yarn Integrity file
.yarn-integrity


================================================
FILE: e2e-tests/production-runtime/README.md
================================================
# gatsby-plugin-material-ui


================================================
FILE: e2e-tests/production-runtime/cypress/fixtures/example.json
================================================
{
  "name": "Using fixtures to represent data",
  "email": "hello@cypress.io",
  "body": "Fixtures are a great way to mock data for responses to routes"
}

================================================
FILE: e2e-tests/production-runtime/cypress/integration/navigation.js
================================================
describe(`navigation`, () => {
  beforeEach(() => {
    cy.visit(`/`).waitForRouteChange();
  });

  it(`displays content from other pages`, () => {
    cy.visit(`/about`).waitForRouteChange();

    cy.getTestElement(`about-message`)
      .invoke(`text`)
      .should(`equal`, `Gatsby example`);
  });
});


================================================
FILE: e2e-tests/production-runtime/cypress/plugins/index.js
================================================
// ***********************************************************
// This example plugins/index.js can be used to load plugins
//
// You can change the location of this file or turn off loading
// the plugins file with the 'pluginsFile' configuration option.
//
// You can read more here:
// https://on.cypress.io/plugins-guide
// ***********************************************************

// 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
};


================================================
FILE: e2e-tests/production-runtime/cypress/support/commands.js
================================================
import "@testing-library/cypress/add-commands";

Cypress.Commands.add(`lifecycleCallCount`, (action) =>
  cy
    .window()
    .then(
      (win) =>
        win.___PageComponentLifecycleCallsLog.filter(
          (entry) => entry.action === action,
        ).length,
    ),
);


================================================
FILE: e2e-tests/production-runtime/cypress/support/index.js
================================================
import "gatsby-cypress";
import "./commands";


================================================
FILE: e2e-tests/production-runtime/cypress.json
================================================
{
  "baseUrl": "http://localhost:9000",
  "failOnStatusCode": false,
  "video": false
}


================================================
FILE: e2e-tests/production-runtime/gatsby-config.js
================================================
module.exports = {
  plugins: [
    `gatsby-plugin-top-layout`,
    `gatsby-plugin-react-helmet`,
    {
      resolve: `gatsby-plugin-material-ui`,
      options: {
        pathToEmotionCacheProps: `src/emotion-cache-props`,
      },
    },
  ],
  siteMetadata: {
    title: `My page`,
  },
};


================================================
FILE: e2e-tests/production-runtime/package.json
================================================
{
  "name": "production-runtime",
  "private": true,
  "version": "4.1.0",
  "dependencies": {
    "@emotion/react": "latest",
    "@emotion/styled": "latest",
    "@mui/material": "latest",
    "cross-env": "latest",
    "gatsby": "latest",
    "gatsby-plugin-react-helmet": "latest",
    "react": "latest",
    "react-dom": "latest",
    "react-helmet": "latest"
  },
  "license": "MIT",
  "scripts": {
    "build": "gatsby build",
    "develop": "gatsby develop",
    "format": "prettier --write src/**/*.{js,jsx}",
    "start": "yarn develop",
    "serve": "gatsby serve",
    "cy:open": "cypress open",
    "cy:run": "cypress run --browser chrome",
    "start-server-and-test": "start-server-and-test serve http://localhost:9000 cy:run",
    "test": "cross-env CYPRESS_SUPPORT=y yarn build && yarn start-server-and-test "
  },
  "devDependencies": {
    "@testing-library/cypress": "^8.0.0",
    "cypress": "^9.0.0",
    "gatsby-cypress": "^2.2.0",
    "start-server-and-test": "^1.9.1"
  }
}


================================================
FILE: e2e-tests/production-runtime/plugins/gatsby-plugin-top-layout/gatsby-browser.js
================================================
import React from "react";
import TopLayout from "./top-layout";

export const onClientEntry = () => {
  const head = document.head;
  const injectFirstNode = document.createComment(`mui-inject-first`);
  head.insertBefore(injectFirstNode, head.firstChild);
};

export const wrapRootElement = ({ element }) => {
  return <TopLayout>{element}</TopLayout>;
};


================================================
FILE: e2e-tests/production-runtime/plugins/gatsby-plugin-top-layout/gatsby-ssr.js
================================================
import React from "react";
import TopLayout from "./top-layout";

export const wrapRootElement = ({ element }) => {
  return <TopLayout>{element}</TopLayout>;
};


================================================
FILE: e2e-tests/production-runtime/plugins/gatsby-plugin-top-layout/package.json
================================================
{
  "name": "gatsby-plugin-top-layout"
}


================================================
FILE: e2e-tests/production-runtime/plugins/gatsby-plugin-top-layout/top-layout.js
================================================
import React from "react";
import PropTypes from "prop-types";
import { Helmet } from "react-helmet";
import CssBaseline from "@mui/material/CssBaseline";
import { ThemeProvider } from "@mui/material/styles";
import theme from "../../src/theme";

export default function TopLayout(props) {
  return (
    <>
      <Helmet>
        <meta
          name="viewport"
          content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no"
        />
        <link
          href="https://fonts.googleapis.com/css?family=Roboto:400,500,700"
          rel="stylesheet"
        />
      </Helmet>
      <ThemeProvider theme={theme}>
        {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
        <CssBaseline />
        {props.children}
      </ThemeProvider>
    </>
  );
}

TopLayout.propTypes = {
  children: PropTypes.node,
};


================================================
FILE: e2e-tests/production-runtime/src/components/link.js
================================================
import * as React from "react";
import MuiLink from "@mui/material/Link";
import { Link as GatsbyLink } from "gatsby";

const Link = React.forwardRef(function Link(props, ref) {
  return <MuiLink component={GatsbyLink} ref={ref} {...props} />;
});

export default Link;


================================================
FILE: e2e-tests/production-runtime/src/components/pro-tip.js
================================================
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 (
    <SvgIcon {...props}>
      <path d="M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7zm2.85 11.1l-.85.6V16h-4v-2.3l-.85-.6C7.8 12.16 7 10.63 7 9c0-2.76 2.24-5 5-5s5 2.24 5 5c0 1.63-.8 3.16-2.15 4.1z" />
    </SvgIcon>
  );
}

export default function ProTip() {
  return (
    <Typography sx={{ mt: 6, mb: 3 }} color="text.secondary">
      <LightBulbIcon sx={{ mr: 1, verticalAlign: `middle` }} />
      Pro tip: See more{` `}
      <Link href="https://material-ui.com/getting-started/templates/">
        templates
      </Link>
      {` `}
      on the Material-UI documentation.
    </Typography>
  );
}


================================================
FILE: e2e-tests/production-runtime/src/emotion-cache-props.js
================================================
const emotionCacheProps = {
  key: `xyz`,
  nonce: `XXXYYYZZZ`
};

export default emotionCacheProps;


================================================
FILE: e2e-tests/production-runtime/src/pages/about.js
================================================
import React from "react";
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";

function MadeWithLove() {
  return (
    <Typography variant="body2" color="textSecondary" align="center">
      {`Built with love by the `}
      <MuiLink color="inherit" href="https://material-ui.com/">
        Material-UI
      </MuiLink>
      {` team.`}
    </Typography>
  );
}

export default function App() {
  return (
    <Container maxWidth="sm">
      <Box my={4}>
        <Typography
          data-testid="about-message"
          variant="h4"
          component="h1"
          gutterBottom
        >
          Gatsby example
        </Typography>
        <Link to="/">Go to the main page</Link>
        <ProTip />
        <MadeWithLove />
      </Box>
    </Container>
  );
}


================================================
FILE: e2e-tests/production-runtime/src/pages/index.js
================================================
import React from "react";
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";

function MadeWithLove() {
  return (
    <Typography variant="body2" color="textSecondary" align="center">
      {`Built with love by the `}
      <MuiLink color="inherit" href="https://material-ui.com/">
        Material-UI
      </MuiLink>
      {` team.`}
    </Typography>
  );
}

export default function App() {
  return (
    <Container maxWidth="sm">
      <Box my={4}>
        <Typography variant="h4" component="h1" gutterBottom>
          Gatsby example
        </Typography>
        <Link to="/about" color="secondary">
          Go to the about page
        </Link>
        <ProTip />
        <MadeWithLove />
      </Box>
    </Container>
  );
}


================================================
FILE: e2e-tests/production-runtime/src/theme.js
================================================
import red from "@mui/material/colors/red";
import { createTheme } from "@mui/material/styles";

// A custom theme for this app
const theme = createTheme({
  palette: {
    primary: {
      main: `#556cd6`,
    },
    secondary: {
      main: `#19857b`,
    },
    error: {
      main: red.A400,
    },
    background: {
      default: `#fff`,
    },
  },
});

export default theme;


================================================
FILE: gatsby-plugin-material-ui/.babelrc
================================================
{
  "presets": [
    [
      "babel-preset-gatsby-package",
      {
        "browser": true
      }
    ]
  ]
}


================================================
FILE: gatsby-plugin-material-ui/.gitignore
================================================
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# Runtime data
pids
*.pid
*.seed
*.pid.lock

# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov

# Coverage directory used by tools like istanbul
coverage

# nyc test coverage
.nyc_output

# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
.grunt

# Bower dependency directory (https://bower.io/)
bower_components

# node-waf configuration
.lock-wscript

# Compiled binary addons (https://nodejs.org/api/addons.html)
build/Release

# Dependency directories
node_modules/
jspm_packages/

# TypeScript v1 declaration files
typings/

# Optional npm cache directory
.npm

# Optional eslint cache
.eslintcache

# Optional REPL history
.node_repl_history

# Output of 'npm pack'
*.tgz

# Yarn Integrity file
.yarn-integrity

# dotenv environment variables file
.env

# next.js build output
.next

# Lib folder
lib

.DS_Store

/*.js
!index.js


================================================
FILE: gatsby-plugin-material-ui/LICENSE
================================================
MIT License

Copyright (c) 2018 

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.


================================================
FILE: gatsby-plugin-material-ui/README.md
================================================
# gatsby-plugin-material-ui

> 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 v5 (emotion). The plugin for v4 can be found [here](https://github.com/hupe1980/gatsby-plugin-material-ui/tree/v3.0.1).

## Install
```sh
npm install gatsby-plugin-material-ui@next @emotion/react
```

## Theme vs. Plugin
- `gatsby-plugin-material-ui` solves FOUC, auto prefixing and minification.
- `gatsby-theme-material-ui` uses the plugin under the hood, adds web fonts, meta-viewport, CSS baseline and mui theme support and has material ui styled gatsby link components

## How to use

The default options should be enough to cover the most common use cases.

```js
// gatsby-config.js

module.exports = {
  plugins: [`gatsby-plugin-material-ui`],
};
```

## Advanced

You can use the `pathToEmotionCacheProps` option for low level customization of how styles get inserted by [emotion](https://emotion.sh/docs/@emotion/cache#createcache).

```js
// gatsby-config.js

module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-material-ui`,
      options: {
        pathToEmotionCacheProps: `src/emotion-cache-props`,
      },
    },
  ],
};
```

```js
// src/emotion-cache-props.js
const emotionCacheProps = {
  key: `xyz`,
  nonce: `XXXYYYZZZ`
};

export default emotionCacheProps;
```

## Examples

You can find an official integration example of this plugin [on the Material-UI site](https://github.com/mui-org/material-ui/tree/master/examples/gatsby), then you can pick one of the [Page Layout Examples](https://material-ui.com/getting-started/page-layout-examples/).

If you want to save time with a more opinionated solution. You can start with [a premade theme](https://github.com/hupe1980/gatsby-theme-material-ui).


================================================
FILE: gatsby-plugin-material-ui/index.js
================================================
// noop


================================================
FILE: gatsby-plugin-material-ui/package.json
================================================
{
  "name": "gatsby-plugin-material-ui",
  "version": "4.1.0",
  "description": "Gatsby plugin for Material-UI with built-in server-side rendering support",
  "license": "MIT",
  "repository": {
    "type": "git",
    "url": "https://github.com/hupe1980/gatsby-plugin-material-ui"
  },
  "keywords": [
    "react",
    "gatsby",
    "gatsby-plugin",
    "material-ui",
    "emotion"
  ],
  "main": "index.js",
  "files": [
    "index.js",
    "gatsby-browser.js",
    "gatsby-node.js",
    "gatsby-ssr.js",
    "get-emotion-cache.js"
  ],
  "scripts": {
    "build": "babel src --out-dir .",
    "build:watch": "babel -w src --out-dir .",
    "prepare": "cross-env NODE_ENV=production npm run build"
  },
  "dependencies": {
    "@emotion/cache": "^11.4.0",
    "@emotion/server": "^11.4.0"
  },
  "peerDependencies": {
    "@emotion/react": "^11.4.0",
    "gatsby": "^3.0.0 || ^4.0.0"
  },
  "devDependencies": {
    "@babel/cli": "^7.12.1",
    "@babel/core": "^7.12.3",
    "@emotion/react": "^11.4.0",
    "babel-preset-gatsby-package": "^2.2.0",
    "cross-env": "^7.0.3"
  }
}


================================================
FILE: gatsby-plugin-material-ui/src/gatsby-browser.js
================================================
import React from "react";
import { CacheProvider } from "@emotion/react";

import emotionCacheProps from "material-ui-plugin-cache-endpoint";

import getEmotionCache from "./get-emotion-cache";

const cache = getEmotionCache(emotionCacheProps);

export const wrapRootElement = ({ element }) => {
  return <CacheProvider value={cache}>{element}</CacheProvider>;
};


================================================
FILE: gatsby-plugin-material-ui/src/gatsby-node.js
================================================
const fs = require(`fs`);
const path = require(`path`);
const os = require(`os`);

let didRunAlready = false;

exports.onPreInit = () => {
    if (didRunAlready) {
        throw new Error(
            `You can only have a single instance of gatsby-plugin-material-ui in your gatsby-config.js`,
        );
    }

    didRunAlready = true;
};

exports.pluginOptionsSchema = ({ Joi }) => {
    return Joi.object({
        pathToEmotionCacheProps: Joi.string()
            .default(``)
            .description(
                `The path to the emotion cache props (See https://emotion.sh/docs/@emotion/cache#createcache).`
            ),
    })
}

// Copy and past from https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-typography
exports.onPreBootstrap = ({ store, cache }, pluginOptions) => {
    const program = store.getState().program;

    let module;
    if (pluginOptions.pathToEmotionCacheProps) {
        module = `module.exports = require("${path.isAbsolute(pluginOptions.pathToEmotionCacheProps)
            ? pluginOptions.pathToEmotionCacheProps
            : path.join(program.directory, pluginOptions.pathToEmotionCacheProps)
            }")`;
        if (os.platform() === `win32`) {
            module = module.split(`\\`).join(`\\\\`);
        }
    } else {
        module = `module.exports = null`;
    }

    const dir = cache.directory;

    if (!fs.existsSync(dir)) {
        fs.mkdirSync(dir);
    }

    fs.writeFileSync(path.join(dir, `emotion-cache-props.js`), module);
};

// Copy and past from https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-typography
exports.onCreateWebpackConfig = ({ actions, cache }) => {
    const cacheFile = path.join(cache.directory, `emotion-cache-props.js`);
    const { setWebpackConfig } = actions;
    setWebpackConfig({
        resolve: {
            alias: {
                "material-ui-plugin-cache-endpoint": cacheFile,
            },
        },
    });
};

================================================
FILE: gatsby-plugin-material-ui/src/gatsby-ssr.js
================================================
import * as React from "react";
import { CacheProvider } from "@emotion/react";
import createEmotionServer from "@emotion/server/create-instance";
import { renderToString } from "react-dom/server";

import emotionCacheProps from "material-ui-plugin-cache-endpoint";

import getEmotionCache from "./get-emotion-cache";

export const replaceRenderer = ({
  bodyComponent,
  setHeadComponents,
  replaceBodyHTMLString,
}) => {
  const cache = getEmotionCache(emotionCacheProps);
  const { extractCriticalToChunks } = createEmotionServer(cache);

  const emotionStyles = extractCriticalToChunks(
    renderToString(
      <CacheProvider value={cache}>{bodyComponent}</CacheProvider>,
    ),
  );

  setHeadComponents(
    emotionStyles.styles.map((style) => (
      <style
        data-emotion={`${style.key} ${style.ids.join(` `)}`}
        key={style.key}
        dangerouslySetInnerHTML={{ __html: style.css }}
      />
    )),
  );

  // render the result from `extractCritical`
  replaceBodyHTMLString(emotionStyles.html);
};


================================================
FILE: gatsby-plugin-material-ui/src/get-emotion-cache.js
================================================
import createCache from "@emotion/cache";

export default function getEmotionCache(props) {
  return createCache(props ?? { key: `css` });
}


================================================
FILE: lerna.json
================================================
{
  "npmClient": "yarn",
  "useWorkspaces": true,
  "version": "4.1.0"
}


================================================
FILE: package.json
================================================
{
  "name": "root",
  "private": true,
  "description": "Gatsby plugin for Material-UI with built-in server-side rendering support",
  "license": "MIT",
  "repository": {
    "type": "git",
    "url": "https://github.com/hupe1980/gatsby-plugin-material-ui"
  },
  "keywords": [
    "react",
    "gatsby",
    "gatsby-plugin",
    "material-ui"
  ],
  "workspaces": [
    "e2e-tests/*",
    "gatsby-plugin-material-ui"
  ],
  "scripts": {
    "test:development-runtime": "yarn workspace development-runtime test",
    "test:production-runtime": "yarn workspace production-runtime test",
    "prepare": "lerna run prepare",
    "lint": "eslint . --report-unused-disable-directives"
  },
  "devDependencies": {
    "@babel/eslint-parser": "^7.15.0",
    "eslint": "^7.32.0",
    "eslint-plugin-react": "^7.14.3",
    "lerna": "^4.0.0"
  }
}