Merge branch 'dev' into energy_consumption_june_2023

Author: corwintines

.all-contributorsrc

@@ -0,0 +1,63 @@
+name: Update Crowdin Contributors
+
+on:
+  schedule:
+    - cron: "0 0 * * SUN" # Runs every Sunday at midnight
+  workflow_dispatch:
+
+jobs:
+  create_pr:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out code
+        uses: actions/checkout@v3
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+
+      - name: Install dependencies
+        run: yarn install
+
+      - name: Install ts-node
+        run: yarn global add ts-node
+
+      - name: Set up git
+        run: |
+          git config --global user.email "actions@github.com"
+          git config --global user.name "GitHub Action"
+
+      - name: Generate timestamp and readable date
+        id: date
+        run: |
+          echo "TIMESTAMP=$(date +'%Y%m%d%H%M%S')" >> $GITHUB_ENV
+          echo "READABLE_DATE=$(date +'%B %-d')" >> $GITHUB_ENV
+
+      - name: Fetch latest dev and create new branch
+        run: |
+          git fetch origin dev
+          git checkout -b "automated-update-${{ env.TIMESTAMP }}" origin/dev
+
+      - name: Run script
+        run: npx ts-node -O '{"module":"commonjs"}' ./src/scripts/crowdin/getCrowdinContributors.ts
+        env:
+          CROWDIN_API_KEY: ${{ secrets.CROWDIN_API_KEY }}
+
+      - name: Commit and push
+        run: |
+          git add -A
+          git commit -m "Update Crowdin contributors"
+          git push origin "automated-update-${{ env.TIMESTAMP }}"
+
+      - name: Create PR body
+        run: |
+          echo "This PR was automatically created to update Crowdin contributors." > pr_body.txt
+          echo "This workflows runs every Sunday at 00:00 (UTC)." >> pr_body.txt
+          echo "" >> pr_body.txt
+          echo "Thank you to everyone contributing to translate ethereum.org ❤️" >> pr_body.txt
+
+      - name: Create Pull Request
+        run: |
+          gh auth login --with-token <<< ${{ secrets.GITHUB_TOKEN }}
+          gh pr create --base dev --head "automated-update-${{ env.TIMESTAMP }}" --title "Update translation contributors from Crowdin - ${{ env.READABLE_DATE }}" --body-file pr_body.txt

.github/workflows/get-crowdin-contributors.yml

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

.storybook/babel-storybook-config.ts

@@ -0,0 +1,60 @@
+import i18n, { Resource } from "i18next"
+import { initReactI18next } from "gatsby-plugin-react-i18next"
+import fs from "fs"
+
+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-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] = {}
+    try {
+      acc[lng] = {
+        translation: {
+          ...acc[lng].translation,
+
+          ...require(`../src/intl/${lng}/${n}.json`),
+        },
+      }
+    } catch {
+      acc[lng] = {
+        translation: {
+          ...acc[lng].translation,
+
+          ...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

.storybook/i18next.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/main.js renamed to .storybook/main.ts

@@ -1,9 +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)
 
@@ -26,39 +26,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