Merge branch 'dev' into gatsby-v5

Author: pettinarip

.all-contributorsrc

@@ -9828,6 +9828,33 @@
       "contributions": [
         "content"
       ]
+    },
+    {
+      "login": "danceratopz",
+      "name": "Dan",
+      "avatar_url": "https://avatars.githubusercontent.com/u/91727015?v=4",
+      "profile": "https://github.com/danceratopz",
+      "contributions": [
+        "content"
+      ]
+    },
+    {
+      "login": "Dev-Liz",
+      "name": "Elizabeth Bassey",
+      "avatar_url": "https://avatars.githubusercontent.com/u/40176275?v=4",
+      "profile": "https://dribbble.com/Liz-B",
+      "contributions": [
+        "content"
+      ]
+    },
+    {
+      "login": "mihaic01",
+      "name": "mihaic01",
+      "avatar_url": "https://avatars.githubusercontent.com/u/108999659?v=4",
+      "profile": "https://github.com/mihaic01",
+      "contributions": [
+        "content"
+      ]
     }
   ],
   "contributorsPerLine": 7,

.storybook/main.js

@@ -0,0 +1,75 @@
+const { propNames } = require("@chakra-ui/react")
+
+module.exports = {
+  stories: [
+    {
+      directory: "../src/components",
+      titlePrefix: "Components",
+      files: "**/*.stories.tsx",
+    },
+  ],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+    // https://storybook.js.org/addons/@storybook/addon-a11y/
+    "@storybook/addon-a11y",
+    "@chakra-ui/storybook-addon",
+  ],
+  framework: "@storybook/react",
+  refs: {
+    "@chakra-ui/react": {
+      disable: true,
+    },
+  },
+  core: {
+    builder: "webpack5",
+  },
+  features: {
+    storyStoreV7: true,
+    emotionAlias: false,
+  },
+  webpackFinal: async (config) => {
+    // Transpile Gatsby module because Gatsby includes un-transpiled ES6 code.
+    config.module.rules[0].exclude = [
+      /node_modules\/(?!(gatsby|gatsby-script)\/)/,
+    ]
+    // Remove core-js to prevent issues with Storybook
+    config.module.rules[0].exclude = [/core-js/]
+    // Use babel-plugin-remove-graphql-queries to remove static queries from components when rendering in storybook
+    config.module.rules[0].use[0].options.plugins.push(
+      require.resolve("babel-plugin-remove-graphql-queries")
+    )
+    config.resolve.mainFields = ["browser", "module", "main"]
+    return config
+  },
+  typescript: {
+    check: false,
+    checkOptions: {},
+    reactDocgen: "react-docgen-typescript",
+    reactDocgenTypescriptOptions: {
+      compilerOptions: {
+        allowSyntheticDefaultImports: false,
+        esModuleInterop: false,
+      },
+      shouldExtractLiteralValuesFromEnum: true,
+      /**
+       * For handling bloated controls table of Chakra Props
+       *
+       * https://github.com/chakra-ui/chakra-ui/issues/2009#issuecomment-852793946
+       */
+      propFilter: (prop) => {
+        const excludedPropNames = propNames.concat([
+          "as",
+          "apply",
+          "sx",
+          "__css",
+        ])
+        const isStyledSystemProp = excludedPropNames.includes(prop.name)
+        const isHTMLElementProp =
+          prop.parent?.fileName.includes("node_modules") ?? false
+        return !(isStyledSystemProp || isHTMLElementProp)
+      },
+    },
+  },
+}

.storybook/preview.js

@@ -0,0 +1,57 @@
+import { action } from "@storybook/addon-actions"
+import theme from "../src/@chakra-ui/gatsby-plugin/theme"
+import { theme as DefaultChakraTheme } from "@chakra-ui/react"
+
+const chakraBreakpointArray = Object.entries(DefaultChakraTheme.breakpoints)
+
+// 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 errors.
+global.___loader = {
+  enqueue: () => {},
+  hovering: () => {},
+}
+// This global variable prevents the "__BASE_PATH__ is not defined" error inside Storybook.
+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. Check out the actions addon docs for more info: https://storybook.js.org/docs/react/essentials/actions
+
+// @ts-ignore
+window.___navigate = (pathname) => {
+  action("NavigateTo:")(pathname)
+}
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+  chakra: {
+    theme,
+  },
+  // Modify viewport selection to match Chakra breakpoints (or custom breakpoints)
+  viewport: {
+    viewports: chakraBreakpointArray.reduce((prevVal, currVal) => {
+      const [token, key] = currVal
+
+      // Unnecessary breakpoint
+      if (token === "base") return { ...prevVal }
+
+      return {
+        ...prevVal,
+        [token]: {
+          name: token,
+          styles: {
+            width: key,
+            height: "600px",
+          },
+        },
+      }
+    }, {}),
+  },
+}