From 98dcc1b6df1d82fd5bda6e6d2e3a6f8a5a17f45e Mon Sep 17 00:00:00 2001 From: Ryan Kes Date: Fri, 5 Jun 2020 20:49:42 +0200 Subject: [PATCH] Added emotion --- .eslintignore | 4 + .prettierignore | 4 + .storybook/config.js | 23 ---- .storybook/main.js | 44 +++++++ .storybook/preview.js | 21 ++++ .storybook/webpack.config.js | 39 ------ README.md | 4 +- gatsby-config.js | 1 + jest-preprocess.js | 1 + package.json | 15 ++- setup-test-env.js | 4 + src/{pages => __stories__}/404.stories.tsx | 2 +- src/{pages => __stories__}/index.stories.tsx | 2 +- src/{pages => __stories__}/page-2.stories.tsx | 2 +- .../using-typescript.stories.tsx | 2 +- .../__snapshots__/header.test.tsx.snap | 66 +++++++---- .../__snapshots__/image.test.tsx.snap | 111 ------------------ .../__snapshots__/layout.test.tsx.snap | 58 +++++---- .../__snapshots__/seo.test.tsx.snap | 3 - src/components/header.tsx | 60 +++++----- src/components/layout.tsx | 17 +-- src/pages/__snapshots__/404.test.tsx.snap | 58 +++++---- src/pages/__snapshots__/index.test.tsx.snap | 69 +++++++---- src/pages/__snapshots__/page-2.test.tsx.snap | 58 +++++---- .../using-typescript.test.tsx.snap | 58 +++++---- src/pages/index.tsx | 33 ++++-- yarn.lock | 31 ++++- 27 files changed, 414 insertions(+), 376 deletions(-) create mode 100644 .eslintignore create mode 100644 .prettierignore delete mode 100644 .storybook/config.js create mode 100644 .storybook/main.js create mode 100644 .storybook/preview.js delete mode 100644 .storybook/webpack.config.js create mode 100644 setup-test-env.js rename src/{pages => __stories__}/404.stories.tsx (77%) rename src/{pages => __stories__}/index.stories.tsx (80%) rename src/{pages => __stories__}/page-2.stories.tsx (77%) rename src/{pages => __stories__}/using-typescript.stories.tsx (88%) delete mode 100644 src/components/__snapshots__/image.test.tsx.snap delete mode 100644 src/components/__snapshots__/seo.test.tsx.snap diff --git a/.eslintignore b/.eslintignore new file mode 100644 index 0000000..f77aca5 --- /dev/null +++ b/.eslintignore @@ -0,0 +1,4 @@ +node_modules +public +.cache +coverage diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 0000000..19d4c20 --- /dev/null +++ b/.prettierignore @@ -0,0 +1,4 @@ +node_modules/ +public/ +.cache/ +coverage/ diff --git a/.storybook/config.js b/.storybook/config.js deleted file mode 100644 index 95bb5c8..0000000 --- a/.storybook/config.js +++ /dev/null @@ -1,23 +0,0 @@ -import { configure } from "@storybook/react" -import { action } from "@storybook/addon-actions" - -// automatically import all files ending in *.stories.js -const req = require.context("../src", true, /.stories.(js|ts|jsx|tsx)$/) -function loadStories() { - req.keys().forEach(filename => req(filename)) -} - -// Gatsby's Link overrides: -// Gatsby defines a global called ___loader to prevent its method calls from creating console errors you override it here -global.___loader = { - enqueue: () => {}, - hovering: () => {}, -} -// Gatsby internal mocking to prevent unnecessary errors in storybook testing environment -global.__PATH_PREFIX__ = "" -global.__BASE_PATH__ = "" -// This is to utilized to override the window.___navigate method Gatsby defines and uses to report what path a Link would be taking us to if it wasn't inside a storybook -window.___navigate = pathname => { - action("NavigateTo:")(pathname) -} -configure(loadStories, module) diff --git a/.storybook/main.js b/.storybook/main.js new file mode 100644 index 0000000..32e5c3e --- /dev/null +++ b/.storybook/main.js @@ -0,0 +1,44 @@ +module.exports = { + stories: ["../src/**/*.stories.js", "../src/**/*.stories.tsx"], + addons: ["@storybook/addon-actions", "@storybook/addon-links"], + + webpackFinal: async config => { + // Transpile Gatsby module because Gatsby includes un-transpiled ES6 code. + config.module.rules[0].exclude = [/node_modules\/(?!(gatsby)\/)/] + + // use installed babel-loader which is v8.0-beta (which is meant to work with @babel/core@7) + config.module.rules[0].use[0].loader = require.resolve("babel-loader") + + // use @babel/preset-react for JSX and env (instead of staged presets) + config.module.rules[0].use[0].options.presets = [ + require.resolve("@babel/preset-react"), + require.resolve("@babel/preset-env"), + ] + + config.module.rules[0].use[0].options.plugins = [ + // use @babel/plugin-proposal-class-properties for class arrow functions + require.resolve("@babel/plugin-proposal-class-properties"), + // use babel-plugin-remove-graphql-queries to remove static queries from components when rendering in storybook + require.resolve("babel-plugin-remove-graphql-queries"), + ] + + // Prefer Gatsby ES6 entrypoint (module) over commonjs (main) entrypoint + config.resolve.mainFields = ["browser", "module", "main"] + + config.module.rules.push({ + test: /\.(ts|tsx)$/, + loader: require.resolve("babel-loader"), + options: { + presets: [["react-app", { flow: false, typescript: true }]], + plugins: [ + require.resolve("@babel/plugin-proposal-class-properties"), + // use babel-plugin-remove-graphql-queries to remove static queries from components when rendering in storybook + require.resolve("babel-plugin-remove-graphql-queries"), + ], + }, + }) + config.resolve.extensions.push(".ts", ".tsx") + + return config + }, +} diff --git a/.storybook/preview.js b/.storybook/preview.js new file mode 100644 index 0000000..ce38fd5 --- /dev/null +++ b/.storybook/preview.js @@ -0,0 +1,21 @@ +import { action } from "@storybook/addon-actions" + +// Gatsby's Link overrides: +// Gatsby Link calls the `enqueue` & `hovering` methods on the global variable ___loader. +// This global object isn't set in storybook context, requiring you to override it to empty functions (no-op), +// so Gatsby Link doesn't throw any errors. +global.___loader = { + enqueue: () => {}, + hovering: () => {}, +} + +// __PATH_PREFIX__ is used inside gatsby-link an other various places. For storybook not to crash, you need to set it as well. +global.__PATH_PREFIX__ = "" +global.__BASE_PATH__ = "" + +// Navigating through a gatsby app using gatsby-link or any other gatsby component will use the `___navigate` method. +// In Storybook it makes more sense to log an action than doing an actual navigate. Checkout the actions addon docs for more info: https://github.com/storybookjs/storybook/tree/master/addons/actions. + +window.___navigate = pathname => { + action("NavigateTo:")(pathname) +} diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js deleted file mode 100644 index 75529aa..0000000 --- a/.storybook/webpack.config.js +++ /dev/null @@ -1,39 +0,0 @@ -module.exports = ({ config }) => { - // Transpile Gatsby module because Gatsby includes un-transpiled ES6 code. - config.module.rules[0].exclude = [/node_modules\/(?!(gatsby)\/)/] - - // use installed babel-loader which is v8.0-beta (which is meant to work with @babel/core@7) - config.module.rules[0].use[0].loader = require.resolve("babel-loader") - - // use @babel/preset-react for JSX and env (instead of staged presets) - config.module.rules[0].use[0].options.presets = [ - require.resolve("@babel/preset-react"), - require.resolve("@babel/preset-env"), - ] - - config.module.rules[0].use[0].options.plugins = [ - // use @babel/plugin-proposal-class-properties for class arrow functions - require.resolve("@babel/plugin-proposal-class-properties"), - // use babel-plugin-remove-graphql-queries to remove static queries from components when rendering in storybook - require.resolve("babel-plugin-remove-graphql-queries"), - ] - - // Prefer Gatsby ES6 entrypoint (module) over commonjs (main) entrypoint - config.resolve.mainFields = ["browser", "module", "main"] - - config.module.rules.push({ - test: /\.(ts|tsx)$/, - loader: require.resolve("babel-loader"), - options: { - presets: [["react-app", { flow: false, typescript: true }]], - plugins: [ - require.resolve("@babel/plugin-proposal-class-properties"), - // use babel-plugin-remove-graphql-queries to remove static queries from components when rendering in storybook - require.resolve("babel-plugin-remove-graphql-queries"), - ], - }, - }) - config.resolve.extensions.push(".ts", ".tsx") - - return config -} diff --git a/README.md b/README.md index ad7f131..c9be4ca 100644 --- a/README.md +++ b/README.md @@ -72,11 +72,11 @@ A quick look at the top-level files and directories you'll see. 4. **`/src`**: This directory will contain all of the code related to what you will see on the front-end of your site (what you see in the browser) such as your site header or a page template. `src` is a convention for “source code”. -5. **`.eslintrc.json`**: This is a [configuration file](https://eslint.org/docs/user-guide/configuring) for [ESLint](https://eslint.org/). Prettier is a tool to help keep the formatting of your code consistent. +5. **`.eslintrc.json` & `.eslintignore`**: These are [configuration files](https://eslint.org/docs/user-guide/configuring) for [ESLint](https://eslint.org/). ESLint is a tool to help keep the formatting of your code consistent. 6. **`.gitignore`**: This file tells git which files it should not track / not maintain a version history for. -7. **`.prettierrc`**: This is a configuration file for [Prettier](https://prettier.io/). Prettier is a tool to help keep the formatting of your code consistent. +7. **`.prettierrc` & `.prettierignore`**: These are configuration files for [Prettier](https://prettier.io/). Prettier is a tool to help keep the formatting of your code consistent. 8. **`gatsby-browser.js`**: This file is where Gatsby expects to find any usage of the [Gatsby browser APIs](https://www.gatsbyjs.org/docs/browser-apis/) (if any). These allow customization/extension of default Gatsby settings affecting the browser. diff --git a/gatsby-config.js b/gatsby-config.js index 0f6b01b..d7f019d 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -30,6 +30,7 @@ module.exports = { }, }, "gatsby-plugin-eslint", + "gatsby-plugin-emotion", // this (optional) plugin enables Progressive Web App + Offline functionality // To learn more, visit: https://gatsby.dev/offline // `gatsby-plugin-offline`, diff --git a/jest-preprocess.js b/jest-preprocess.js index 23896b3..2756524 100644 --- a/jest-preprocess.js +++ b/jest-preprocess.js @@ -1,5 +1,6 @@ const babelOptions = { presets: ["babel-preset-gatsby", "@babel/preset-typescript"], + plugins: ["emotion"], } // eslint-disable-next-line @typescript-eslint/no-var-requires diff --git a/package.json b/package.json index cd221ea..3c885f2 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,8 @@ "devDependencies": { "@babel/core": "^7.10.2", "@babel/preset-typescript": "^7.10.1", + "@emotion/core": "^10.0.28", + "@emotion/styled": "^10.0.27", "@storybook/addon-actions": "^5.3.19", "@storybook/addon-links": "^5.3.19", "@storybook/addons": "^5.3.19", @@ -30,7 +32,10 @@ "@types/react-test-renderer": "^16.9.2", "@typescript-eslint/eslint-plugin": "^3.1.0", "@typescript-eslint/parser": "^3.1.0", + "babel-jest": "^26.0.1", "babel-loader": "^8.1.0", + "babel-plugin-emotion": "^10.0.33", + "babel-preset-gatsby": "^0.4.8", "babel-preset-react-app": "^9.1.2", "eslint": "^7.1.0", "eslint-config-prettier": "^6.11.0", @@ -43,6 +48,7 @@ "eslint-plugin-prettier": "^3.1.3", "eslint-plugin-react": "^7.20.0", "eslint-plugin-react-hooks": "^4.0.4", + "gatsby-plugin-emotion": "^4.3.3", "gatsby-plugin-eslint": "^2.0.8", "husky": ">=4", "identity-obj-proxy": "^3.0.0", @@ -69,8 +75,8 @@ "clean": "gatsby clean", "test": "jest", "test:coverage": "jest --coverage", - "storybook": "NODE_ENV=production start-storybook -s public -p 6006", - "build-storybook": "NODE_ENV=production build-storybook -s public" + "storybook": "NODE_ENV=production start-storybook -p 6006", + "build-storybook": "NODE_ENV=production build-storybook" }, "repository": { "type": "git", @@ -90,5 +96,10 @@ "eslint --fix" ], "*.{json,md,mdx,css,yml}": "prettier --write" + }, + "jest": { + "setupFilesAfterEnv": [ + "/setup-test-env.js" + ] } } diff --git a/setup-test-env.js b/setup-test-env.js new file mode 100644 index 0000000..4761211 --- /dev/null +++ b/setup-test-env.js @@ -0,0 +1,4 @@ +import { createSerializer } from "jest-emotion" +import * as emotion from "@emotion/core" + +expect.addSnapshotSerializer(createSerializer(emotion)) diff --git a/src/pages/404.stories.tsx b/src/__stories__/404.stories.tsx similarity index 77% rename from src/pages/404.stories.tsx rename to src/__stories__/404.stories.tsx index 55fba45..65cfc31 100644 --- a/src/pages/404.stories.tsx +++ b/src/__stories__/404.stories.tsx @@ -1,5 +1,5 @@ import { storiesOf } from "@storybook/react" import React from "react" -import NotFoundPage from "./404" +import NotFoundPage from "../pages/404" storiesOf("404 page", module).add(`default`, () => ) diff --git a/src/pages/index.stories.tsx b/src/__stories__/index.stories.tsx similarity index 80% rename from src/pages/index.stories.tsx rename to src/__stories__/index.stories.tsx index 45b9c9b..8c20d4c 100644 --- a/src/pages/index.stories.tsx +++ b/src/__stories__/index.stories.tsx @@ -1,5 +1,5 @@ import { storiesOf } from "@storybook/react" import React from "react" -import IndexPage from "./index" +import IndexPage from "../pages" storiesOf("Index page", module).add(`default`, () => ) diff --git a/src/pages/page-2.stories.tsx b/src/__stories__/page-2.stories.tsx similarity index 77% rename from src/pages/page-2.stories.tsx rename to src/__stories__/page-2.stories.tsx index cf6faca..95ba884 100644 --- a/src/pages/page-2.stories.tsx +++ b/src/__stories__/page-2.stories.tsx @@ -1,5 +1,5 @@ import { storiesOf } from "@storybook/react" import React from "react" -import SecondPage from "./page-2" +import SecondPage from "../pages/page-2" storiesOf("Second page", module).add(`default`, () => ) diff --git a/src/pages/using-typescript.stories.tsx b/src/__stories__/using-typescript.stories.tsx similarity index 88% rename from src/pages/using-typescript.stories.tsx rename to src/__stories__/using-typescript.stories.tsx index 9c211f6..59f8123 100644 --- a/src/pages/using-typescript.stories.tsx +++ b/src/__stories__/using-typescript.stories.tsx @@ -1,7 +1,7 @@ import { storiesOf } from "@storybook/react" import React from "react" -import UsingTypescript from "./using-typescript" import { UsingTypescriptDataInterface } from "../@types/pages/using-typescript" +import UsingTypescript from "../pages/using-typescript" const data: UsingTypescriptDataInterface = { data: { diff --git a/src/components/__snapshots__/header.test.tsx.snap b/src/components/__snapshots__/header.test.tsx.snap index d4213da..2f4b5ad 100644 --- a/src/components/__snapshots__/header.test.tsx.snap +++ b/src/components/__snapshots__/header.test.tsx.snap @@ -1,42 +1,56 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Header renders correctly 1`] = ` -
-
, +
-

+ -

+