Merge branch 'dev' into quiz-run-a-node

Author: wackerow

.storybook/babel-storybook-config.ts

@@ -1,4 +1,6 @@
-export const babelConfig = {
+import { TransformOptions } from "@babel/core"
+
+export const babelConfig: TransformOptions = {
   sourceType: "unambiguous",
   presets: [
     [

.storybook/i18next.ts

@@ -0,0 +1,41 @@
+import i18n, { Resource } from "i18next"
+import { initReactI18next } from "gatsby-plugin-react-i18next"
+
+export const baseLocales = {
+  en: { title: "English", left: "En" },
+  zh: { title: "中国人", left: "Zh" },
+  ru: { title: "Русский", left: "Ru" },
+  uk: { title: "українська", left: "Uk" },
+}
+
+// Only i18n files named in this array are being exposed to Storybook. Add filenames as necessary.
+const ns = ["common", "page-about", "page-upgrades", "page-developers-index"]
+const supportedLngs = Object.keys(baseLocales)
+
+/**
+ * Taking the ns array and combining all the ids
+ * under a single ns per language, set to the default of "translation"
+ */
+const resources: Resource = ns.reduce((acc, n) => {
+  supportedLngs.forEach((lng) => {
+    if (!acc[lng]) acc[lng] = {}
+    acc[lng] = {
+      translation: {
+        ...acc[lng].translation,
+        ...require(`../src/intl/${lng}/${n}.json`),
+      },
+    }
+  })
+  return acc
+}, {})
+
+i18n.use(initReactI18next).init({
+  debug: true,
+  fallbackLng: "en",
+  interpolation: { escapeValue: false },
+  react: { useSuspense: false },
+  supportedLngs,
+  resources,
+})
+
+export default i18n

.storybook/main.js .storybook/main.ts.storybook/main.js renamed to .storybook/main.ts

@@ -1,8 +1,8 @@
-const { propNames } = require("@chakra-ui/react")
+import { StorybookConfig } from "@storybook/react-webpack5"
+import { propNames } from "@chakra-ui/react"
+import { babelConfig } from "./babel-storybook-config"
 
-const { babelConfig } = require("./babel-storybook-config")
-
-module.exports = {
+const config: StorybookConfig = {
   stories: ["../src/components/**/*.stories.tsx"],
   addons: [
     "@storybook/addon-links",
@@ -11,9 +11,10 @@ module.exports = {
     // https://storybook.js.org/addons/@storybook/addon-a11y/
     "@storybook/addon-a11y",
     "@chakra-ui/storybook-addon",
+    "storybook-react-i18next",
   ],
   staticDirs: ["../static"],
-  babel: async (options) => ({
+  babel: async () => ({
     ...babelConfig,
   }),
   framework: {
@@ -27,30 +28,30 @@ module.exports = {
   },
   features: {},
   webpackFinal: async (config) => {
-    const isRuleExist =
-      config.module && config.module.rules && config.module.rules.length
-    if (isRuleExist) {
-      // 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/]
-    }
-
     if (
-      isRuleExist &&
-      config.module.rules[0].use &&
-      config.module.rules[0].use.length
+      config.module != undefined &&
+      config.module.rules != undefined &&
+      config.module.rules[0] !== "..."
     ) {
-      // 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.module.rules[0].exclude = [/node_modules\/(?!(gatsby)\/)/]
+      config.module.rules[0].use = [
+        {
+          loader: require.resolve("babel-loader"),
+          options: {
+            presets: [
+              // use @babel/preset-react for JSX and env (instead of staged presets)
+              require.resolve("@babel/preset-react"),
+              require.resolve("@babel/preset-env"),
+            ],
+            plugins: [
+              // 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.mainFields = ["browser", "module", "main"]
     return config
   },
   typescript: {
@@ -83,3 +84,5 @@ module.exports = {
     },
   },
 }
+
+export default config

.storybook/preview.js .storybook/preview.ts.storybook/preview.js renamed to .storybook/preview.ts

@@ -1,10 +1,9 @@
+import { Preview } from "@storybook/react"
 import { action } from "@storybook/addon-actions"
 
+import i18n, { baseLocales } from "./i18next"
 import theme from "../src/@chakra-ui/gatsby-plugin/theme"
 
-import "../static/fonts/inter-font-face.css"
-import "../static/fonts/ibm-plex-font-face.css"
-
 const chakraBreakpointArray = Object.entries(theme.breakpoints)
 
 // Gatsby's Link overrides:
@@ -26,39 +25,48 @@ window.___navigate = (pathname) => {
   action("NavigateTo:")(pathname)
 }
 
-export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
-  controls: {
-    matchers: {
-      color: /(background|color)$/i,
-      date: /Date$/,
-    },
-  },
-  backgrounds: {
-    disable: true,
+const preview: Preview = {
+  globals: {
+    locale: "en",
+    locales: baseLocales,
   },
-  chakra: {
-    theme,
-  },
-  layout: "centered",
-  // Modify viewport selection to match Chakra breakpoints (or custom breakpoints)
-  viewport: {
-    viewports: chakraBreakpointArray.reduce((prevVal, currVal) => {
-      const [token, key] = currVal
+  parameters: {
+    i18n,
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+    backgrounds: {
+      disable: true,
+    },
+    chakra: {
+      theme,
+    },
+    layout: "centered",
+    // 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 }
+        // Unnecessary breakpoint
+        if (token === "base") return { ...prevVal }
 
-      return {
-        ...prevVal,
-        [token]: {
-          name: token,
-          styles: {
-            width: key,
-            height: "600px",
+        return {
+          ...prevVal,
+          [token]: {
+            name: token,
+            styles: {
+              width: key,
+              height: "600px",
+            },
           },
-        },
-      }
-    }, {}),
+        }
+      }, {}),
+    },
   },
 }
+
+export default preview

docs/best-practices.md

@@ -102,45 +102,58 @@ export default ComponentName
 
 ## Styling
 
-- `src/theme.ts` - Declares site color themes, breakpoints and other constants (try to utilize these colors first)
-- We use [emotion](https://emotion.sh/)
+We use [Chakra UI](https://chakra-ui.com/).
 
-  - Tagged template literals are used to style custom components
+`src/@chakra-ui/gatsby-plugin/theme.ts` - Holds all the theme configuration. This is where you can find the colors, fonts, component themes, variants, etc.
 
-  ```tsx
-  // Example of styling syntax using emotion
-
-  import styled from "@emotion/styled"
-
-  const GenericButton = styled.div`
-    width: 200px;
-    height: 50px;
-  `
-  const PrimaryButton = styled(GenericButton)`
-    background: blue;
-  `
-  const SecondaryButton = styled(GenericButton)`
-    background: red;
-  `
-
-  // These are each components, capitalized by convention, and can be used within JSX code
-  // ie: <PrimaryButton>Text</PrimaryButton>
-  ```
+- Wrappers or layout divs
 
-- Values from `src/theme.ts` are automatically passed as a prop object to styled components
+Use the [native layouts components](https://chakra-ui.com/docs/components/box)
 
-  ```tsx
-  // Example of theme.ts usage
+```tsx
+<Stack direction='row'>
+```
 
-  import styled from "@emotion/styled"
+Center things using the `<Center />` component
 
-  const Container = styled.div`
-    background: ${(props) => props.theme.colors.background};
-    @media (max-width: ${(props) => props.theme.breakpoints.s}) {
-      font-size: #{(props) => props.theme.fontSized.s};
-    }
-  `
-  ```
+```tsx
+<Center h="100px">
+```
+
+- Group buttons using `<ButtonGroup />` or `<Wrap />`
+
+```tsx
+<ButtonGroup variant='outline' spacing={2}>
+  <Button>Button 1</Button>
+  <Button>Button 2</Button>
+</ButtonGroup>
+
+// or
+<Wrap spacing={2}>
+  <WrapItem><Button variant="outline">Button 1</Button></WrapItem>
+  <WrapItem><Button variant="outline">Button 2</Button></WrapItem>
+</Wrap>
+```
+
+- Breakpoints
+
+Use [the Chakra default breakpoints](https://chakra-ui.com/docs/styled-system/theme#breakpoints).
+
+```tsx
+<Container display={{ base: "block", sm: "flex" }} />
+```
+
+- Theme colors
+
+```tsx
+<Text color="primary.base" bg="background.base" />
+```
+
+> Note the dotted notation. In Chakra, the values are referred to as "semantic tokens" and the new theme applies a nested structure of like tokens for better organization. See [semanticTokens.ts](../src/%40chakra-ui/gatsby-plugin/semanticTokens.ts)
+
+> Note 2: all the previous colors defined in the old theme `src/theme.ts` were
+> ported into the new theme for compatibility reasons. Those colors will
+> transition out of the codebase as we adopt the DS colors.
 
 - [Framer Motion](https://www.framer.com/motion/) - An open source and production-ready motion library for React on the web, used for our animated designs
 - **Emojis**: We use [Twemoji](https://twemoji.twitter.com/), an open-source emoji set created by Twitter. These are hosted by us, and used to provide a consistent experience across operating systems.
@@ -154,29 +167,14 @@ import Emoji from "./Emoji"
 ```
 
 - **Icons**: We use [React Icons](https://react-icons.github.io/react-icons/)
-  - `src/components/Icon.ts` is the component used to import icons to be used
-  - If an icon you want to use is not listed you will need to add it to this file
-
-`src/components/Icon.ts`:
-
-```tsx
-// Example of how to add new icon not listed
-import { ZzIconName } from "react-icons/zz"
-
-// Then add to IconContext.Provider children:
-{
-  name === "alias" && <ZzIconName />
-}
-```
-
-From React component:
+  with [Chakra UI Icon component](https://chakra-ui.com/docs/components/icon/usage)
 
 ```tsx
-// Example of icon use
-import Icon from "./Icon"
+import { Icon } from "@chakra-ui/react"
+import { BsQuestionSquareFill } from "react-icons/bs"
 
-// Within JSX:
-;<Icon name="alias" />
+// wrap your imported icon with the `Icon` component from Chakra UI
+;<Icon as={BsQuestionSquareFill} />
 ```
 
 ## Image loading and API calls using GraphQL