Merge branch 'dev' into feedback-widget

wackerow · web-flow · commit 06dea547e6ac · 2023-12-01T05:42:38.000-08:00
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -1,5 +1,5 @@
 {
-  "extends": ["next/core-web-vitals", "prettier"],
+  "extends": ["next/core-web-vitals", "prettier", "plugin:storybook/recommended"],
   "env": { "es6": true },
   "plugins": ["simple-import-sort"],
   "rules": {
diff --git a/.storybook/i18next.ts b/.storybook/i18next.ts
@@ -0,0 +1,61 @@
+import i18n, { Resource } from "i18next"
+import { initReactI18next } from "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",
+  "glossary",
+  "page-about",
+  "page-index",
+  "page-learn",
+  "page-upgrades",
+  "page-developers-index",
+]
+const supportedLngs = Object.keys(baseLocales)
+
+/**
+ * Taking the ns array and generating those files for each language available.
+ */
+const resources: Resource = ns.reduce((acc, n) => {
+  supportedLngs.forEach((lng) => {
+    if (!acc[lng]) acc[lng] = {}
+
+    try {
+      acc[lng] = {
+        ...acc[lng],
+        [n]: {
+          ...acc[lng][n],
+          ...require(`../src/intl/${lng}/${n}.json`),
+        },
+      }
+    } catch {
+      acc[lng] = {
+        ...acc[lng],
+        [n]: {
+          ...acc[lng][n],
+          ...require(`../src/intl/en/${n}.json`),
+        },
+      }
+    }
+  })
+
+  return acc
+}, {})
+
+i18n.use(initReactI18next).init({
+  debug: true,
+  fallbackLng: "en",
+  interpolation: { escapeValue: false },
+  react: { useSuspense: false },
+  supportedLngs,
+  resources,
+})
+
+export default i18n
diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -0,0 +1,76 @@
+import path from "path"
+
+import type { StorybookConfig } from "@storybook/nextjs"
+import { propNames } from "@chakra-ui/react"
+
+/**
+ * Note regarding package.json settings related to Storybook:
+ *
+ * There is a resolutions option set for the package `jackspeak`. This is related to a
+ * workaround provided to make sure storybook ( as of v7.5.2) works correctly with
+ * Yarn v1
+ *
+ * Reference: https://github.com/storybookjs/storybook/issues/22431#issuecomment-1630086092
+ *
+ * The primary recommendation is to upgrade to Yarn 3 if possible
+ */
+
+/**
+ * Temporary list of allowed stories during migration to NextJS
+ */
+const tempStoryList = ["../src/components/Buttons/**/*.stories.@(ts|tsx)"]
+
+const config: StorybookConfig = {
+  stories: tempStoryList,
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-onboarding",
+    "@storybook/addon-interactions",
+    "@chakra-ui/storybook-addon",
+    "storybook-react-i18next"
+  ],
+  staticDirs: ["../public"],
+  framework: {
+    name: "@storybook/nextjs",
+    options: {},
+  },
+  docs: {
+    autodocs: "tag",
+  },
+  refs: {
+    "@chakra-ui/react": {
+      disable: true,
+    },
+  },
+  webpackFinal: async (config: any) => {
+    // Add path aliases
+    config.resolve.alias["@"] = path.resolve(__dirname, "../src")
+    config.resolve.alias["@/public"] = path.resolve(__dirname, "../public")
+
+    return config
+  },
+  typescript: {
+    reactDocgenTypescriptOptions: {
+      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)
+      },
+    },
+  },
+}
+export default config
diff --git a/.storybook/manager.ts b/.storybook/manager.ts
@@ -0,0 +1,14 @@
+import { addons } from "@storybook/manager-api"
+import theme from "./theme"
+// @ts-ignore
+import favicon from "../public/favicon.png"
+
+addons.setConfig({
+  theme,
+})
+
+// In order to override the default favicon, and inject a data hash link to the png
+const link = document.createElement("link")
+link.setAttribute("rel", "shortcut icon")
+link.setAttribute("href", favicon)
+document.head.appendChild(link)
diff --git a/.storybook/preview-logo.svg b/.storybook/preview-logo.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="420 404.67 1080.03 270.63">
+  <path fill="#8891b1"
+    d="M724.9 561.1c0 1.9-1.7 3.6-3.6 3.6h-66.4c1.7 15.8 14 31.2 31.4 31.2 11.9 0 20.7-4.6 27.4-14.2.7-1 1.7-1.7 2.9-1.7 1.9 0 3.3 1.4 3.3 3.3 0 .7-.2 1.2-.5 1.7-6.7 11.7-20 17.4-33.1 17.4-22.4 0-38.3-20-38.3-41.4s15.9-41.3 38.3-41.3 38.6 20 38.6 41.4zm-7.2-3.2c-1.4-16.9-14-31.4-31.4-31.4s-29.8 14.5-31.4 31.4zm87.9-37.1c1.9 0 3.3 1.7 3.3 3.4 0 1.9-1.4 3.4-3.3 3.4h-17.8v70.2c0 1.7-1.5 3.3-3.4 3.3s-3.4-1.7-3.4-3.3v-70.2h-17.1c-1.9 0-3.3-1.5-3.3-3.4 0-1.7 1.4-3.4 3.3-3.4H781v-25.4c0-1.9 1.5-3.3 3.4-3.3s3.4 1.4 3.4 3.3v25.4zm108.2 34.1v42.4c0 1.9-1.1 3.3-2.8 3.3-1.9 0-2.8-1.4-2.8-3.3v-42.4c0-14.3-8.3-28.6-24.3-28.6-20.5 0-29.6 17.9-28.5 36.2 0 .5-.1 2.6-.1 2.9v31.9c0 1.9-.9 3.3-2.8 3.3s-2.8-1.4-2.8-3.3V458c0-1.7.9-3.3 2.8-3.3s2.8 1.7 2.8 3.3v78.8c6.8-10.2 15.9-17.1 27.8-17.1 19.5 0 30.7 17.1 30.7 35.2zm119.8 6.2c0 1.9-1.7 3.6-3.6 3.6h-66.4c1.7 15.8 14 31.2 31.4 31.2 11.9 0 20.7-4.6 27.4-14.2.7-1 1.7-1.7 2.9-1.7 1.9 0 3.3 1.4 3.3 3.3 0 .7-.2 1.2-.5 1.7-6.7 11.7-20 17.4-33.1 17.4-22.4 0-38.3-20-38.3-41.4s15.9-41.3 38.3-41.3 38.6 20 38.6 41.4zm-7.1-3.2c-1.4-16.9-14-31.4-31.4-31.4s-29.8 14.5-31.4 31.4zm88.8-33.7c0 2.1-1.2 3.3-3.2 3.6-19.5 2.9-28.4 18.8-28.4 37.4V597c0 1.9-1.5 3.3-3.4 3.3s-3.4-1.4-3.4-3.3v-72.6c0-1.9 1.5-3.3 3.4-3.3s3.4 1.4 3.4 3.3v14.8c5.6-9.3 16.5-18.1 27.9-18.1 1.7 0 3.7 1.2 3.7 3.1zm109.2 36.9c0 1.9-1.7 3.6-3.6 3.6h-66.4c1.7 15.8 14 31.2 31.4 31.2 11.9 0 20.7-4.6 27.4-14.2.7-1 1.7-1.7 2.9-1.7 1.9 0 3.3 1.4 3.3 3.3 0 .7-.2 1.2-.5 1.7-6.7 11.7-20 17.4-33.1 17.4-22.4 0-38.3-20-38.3-41.4s15.9-41.3 38.3-41.3c22.4-.1 38.6 20 38.6 41.4zm-7.1-3.2c-1.4-16.9-14-31.4-31.4-31.4s-29.8 14.5-31.4 31.4zm115-33v72.8c0 1.9-1.7 3.3-3.4 3.3-1.9 0-3.4-1.4-3.4-3.3V584c-5.6 10.9-15.3 18.8-27.7 18.8-19.8 0-30.8-17.1-30.8-35.2V525c0-1.7 1.5-3.3 3.4-3.3s3.4 1.7 3.4 3.3v42.6c0 14.3 8.1 28.6 24.1 28.6 22.4 0 27.7-20.9 27.7-44v-27.1c0-1.7 1.5-3.3 3.4-3.3 1.6-.2 3.3 1.5 3.3 3.1zm167.6 29.8v42.6c0 1.9-1.7 3.3-3.4 3.3-1.9 0-3.4-1.4-3.4-3.3v-42.6c0-14.3-8.1-28.3-24.1-28.3-20 0-27.7 21.4-27.7 38.1v32.8c0 1.9-1.7 3.3-3.4 3.3-1.9 0-3.4-1.4-3.4-3.3v-42.6c0-14.3-7.9-28.3-23.8-28.3-20.2 0-28.6 15.9-27.9 37.1v33.8c0 1.9-1.5 3.3-3.4 3.3s-3.4-1.4-3.4-3.3v-72.8c0-1.9 1.5-3.3 3.4-3.3s3.4 1.4 3.4 3.3v12.1c5.6-10.2 16.1-16.9 28-16.9 13.6 0 24.1 8.6 28.4 21.2 5.5-12.4 16.2-21.2 30-21.2 19.6 0 30.7 16.9 30.7 35zm-997-150-83 137.8 83-37.7z">
+  </path>
+  <path fill="#63688e" d="m503 504.8-83 37.7 83 49.1zm83.2 37.7-83.1-137.8v100.1z"></path>
+  <path fill="#464a75" d="m503 591.6 83.1-49.1-83.1-37.7z"></path>
+  <path fill="#8891b1" d="m420 558.3 83 117v-68z"></path>
+  <path fill="#63688e" d="M503 607.3v68l83.1-117z"></path>
+</svg>
diff --git a/.storybook/preview.ts b/.storybook/preview.ts
@@ -0,0 +1,66 @@
+import { extendBaseTheme } from "@chakra-ui/react"
+import type { Preview } from "@storybook/react"
+
+import theme from "../src/@chakra-ui/theme"
+
+import i18n, { baseLocales } from "./i18next"
+
+const extendedTheme = extendBaseTheme(theme)
+
+const chakraBreakpointArray = Object.entries(extendedTheme.breakpoints)
+
+const preview: Preview = {
+  globals: {
+    locale: 'en',
+    locales: baseLocales,
+  },
+  parameters: {
+    i18n,
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+    backgrounds: {
+      disable: true,
+    },
+    chakra: {
+      theme: extendedTheme,
+    },
+    layout: "centered",
+    // Modify viewport selection to match Chakra breakpoints (or custom breakpoints)
+    viewport: {
+      viewports: chakraBreakpointArray.reduce((prevVal, currVal) => {
+        const [token, key] = currVal
+
+        // Replace base value
+        if (token === "base")
+          return {
+            ...prevVal,
+            base: {
+              name: "base",
+              styles: {
+                width: "375px", // A popular minimum mobile width
+                height: "600px",
+              },
+            },
+          }
+
+        return {
+          ...prevVal,
+          [token]: {
+            name: token,
+            styles: {
+              width: key,
+              height: "600px",
+            },
+          },
+        }
+      }, {}),
+    },
+  },
+}
+
+export default preview
diff --git a/.storybook/theme.ts b/.storybook/theme.ts
@@ -0,0 +1,28 @@
+import { create } from "@storybook/theming"
+
+// @ts-ignore
+import brandImage from "./preview-logo.svg"
+
+export default create({
+  base: "dark",
+
+  appBg: "#222222",
+  appBorderColor: "white",
+  appBorderRadius: 4,
+
+  brandTitle: "Ethereum.org",
+  brandImage,
+  brandUrl: "https://www.ethereum.org",
+
+  barSelectedColor: "#ff7324",
+
+  colorSecondary: "#ff7324",
+
+  fontBase: "Inter, sans-serif",
+
+  textColor: "#f2f2f2",
+  textMutedColor: "#b2b2b2",
+
+  inputBorder: "#F7F7F7",
+  inputBorderRadius: 4,
+})
diff --git a/package.json b/package.json
@@ -9,7 +9,9 @@
     "lint": "next lint",
     "lint:fix": "next lint --fix",
     "preversion": "bash ./src/scripts/updatePublishDate.sh",
-    "crowdin-contributors": "ts-node -O '{ \"module\": \"commonjs\" }' src/scripts/crowdin/getCrowdinContributors.ts"
+    "crowdin-contributors": "ts-node -O '{ \"module\": \"commonjs\" }' src/scripts/crowdin/getCrowdinContributors.ts",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "dependencies": {
     "@chakra-ui/next-js": "^2.1.5",
@@ -18,7 +20,6 @@
     "@docsearch/react": "^3.5.2",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
-    "@storybook/react": "^7.3.2",
     "clipboard": "^2.0.11",
     "framer-motion": "^10.13.0",
     "gray-matter": "^4.0.3",
@@ -43,7 +44,15 @@
     "yaml-loader": "^0.8.0"
   },
   "devDependencies": {
+    "@chakra-ui/storybook-addon": "5.1.0",
     "@netlify/plugin-nextjs": "^4.40.2",
+    "@storybook/addon-essentials": "7.5.3",
+    "@storybook/addon-interactions": "7.5.3",
+    "@storybook/addon-links": "7.5.3",
+    "@storybook/addon-onboarding": "1.0.8",
+    "@storybook/nextjs": "7.5.3",
+    "@storybook/react": "7.5.3",
+    "@storybook/testing-library": "0.2.2",
     "@types/hast": "^3.0.0",
     "@types/luxon": "^3.3.2",
     "@types/node": "^20.4.2",
@@ -53,13 +62,19 @@
     "eslint-config-next": "^14.0.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-simple-import-sort": "^10.0.0",
+    "eslint-plugin-storybook": "^0.6.15",
     "image-size": "^1.0.2",
     "mdast-util-toc": "^7.0.0",
     "minimist": "^1.2.8",
     "polished": "^4.2.2",
+    "storybook": "7.5.3",
+    "storybook-react-i18next": "^2.0.9",
     "ts-node": "^10.9.1",
     "typescript": "^5.1.6",
     "unified": "^10.0.0",
     "unist-util-visit": "^5.0.0"
+  },
+  "resolutions": {
+    "jackspeak": "2.1.1"
   }
 }
diff --git a/src/components/Buttons/Button.stories.tsx b/src/components/Buttons/Button.stories.tsx
@@ -43,7 +43,6 @@ const variants: ThemingProps<"Button">["variant"][] = [
 export const StyleVariants: Story = {
   argTypes: {
     size: {
-      //@ts-expect-error
       ...getThemingArgTypes(theme, "Button")?.size,
       defaultValue: "md",
     },
@@ -130,7 +129,7 @@ export const OverrideStyles: Story = {
       </Text>
       <VStack>
         <IconButton aria-label="toggle" icon={<MdNightlight />} px="1.5" />
-        <ButtonLink to="#" borderRadius="full" px="0" py="0">
+        <ButtonLink href="#" borderRadius="full" px="0" py="0">
           <Translation id="get-involved" />
         </ButtonLink>
       </VStack>
diff --git a/src/lib/rehype/remarkInferToc.ts b/src/lib/rehype/remarkInferToc.ts
@@ -1,6 +1,6 @@
 import type { BlockContent, DefinitionContent, ListItem } from "mdast"
 import { toc } from "mdast-util-toc"
-import type { Nodes } from "mdast-util-toc/lib"
+import type { List, Nodes } from "mdast-util-toc/lib"
 import type { Plugin } from "unified"
 import { visit } from "unist-util-visit"
 
@@ -13,7 +13,7 @@ const remarkInferToc: Plugin<[IRemarkTocOptions]> = (options) => {
   }
 
   const processToC = (
-    node: BlockContent | DefinitionContent | ListItem | null,
+    node: BlockContent | DefinitionContent | ListItem | List | null,
     current: TocNodeType
   ): TocNodeType => {
     if (!node) {
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`	`1`	`{`
`2`		`- "extends": ["next/core-web-vitals", "prettier"],`
	`2`	`+ "extends": ["next/core-web-vitals", "prettier", "plugin:storybook/recommended"],`
`3`	`3`	`"env": { "es6": true },`
`4`	`4`	`"plugins": ["simple-import-sort"],`
`5`	`5`	`"rules": {`