Merge pull request #13463 from ethereum/dev

.all-contributorsrc

@@ -11320,7 +11320,8 @@
       "avatar_url": "https://avatars.githubusercontent.com/u/71248977?v=4",
       "profile": "https://github.com/UNOFFICIALbgd",
       "contributions": [
-        "bug"
+        "bug",
+        "doc"
       ]
     },
     {
@@ -12249,7 +12250,8 @@
       "avatar_url": "https://avatars.githubusercontent.com/u/73983677?v=4",
       "profile": "https://github.com/omahs",
       "contributions": [
-        "translation"
+        "translation",
+        "maintenance"
       ]
     },
     {
@@ -12278,6 +12280,69 @@
       "contributions": [
         "content"
       ]
+    },
+    {
+      "login": "sandeepV2",
+      "name": "Sandeep Belagavi",
+      "avatar_url": "https://avatars.githubusercontent.com/u/52043035?v=4",
+      "profile": "https://github.com/sandeepV2",
+      "contributions": [
+        "bug"
+      ]
+    },
+    {
+      "login": "codingmickey",
+      "name": "Kartik Jolapara",
+      "avatar_url": "https://avatars.githubusercontent.com/u/42518907?v=4",
+      "profile": "https://github.com/codingmickey",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "Ekam-Bitt",
+      "name": "Ekam Bitt",
+      "avatar_url": "https://avatars.githubusercontent.com/u/74407205?v=4",
+      "profile": "https://ekam-bitt.github.io",
+      "contributions": [
+        "maintenance"
+      ]
+    },
+    {
+      "login": "iankressin",
+      "name": "Ian K. Guimarães",
+      "avatar_url": "https://avatars.githubusercontent.com/u/29215044?v=4",
+      "profile": "http://iankguimaraes.com",
+      "contributions": [
+        "maintenance"
+      ]
+    },
+    {
+      "login": "jncrabb",
+      "name": "jncrabb",
+      "avatar_url": "https://avatars.githubusercontent.com/u/27811684?v=4",
+      "profile": "https://github.com/jncrabb",
+      "contributions": [
+        "content"
+      ]
+    },
+    {
+      "login": "bibo7086",
+      "name": "Saidu Sokoto",
+      "avatar_url": "https://avatars.githubusercontent.com/u/24389200?v=4",
+      "profile": "https://github.com/bibo7086",
+      "contributions": [
+        "content"
+      ]
+    },
+    {
+      "login": "krishchvn",
+      "name": "Krishnakumar Chavan",
+      "avatar_url": "https://avatars.githubusercontent.com/u/58606754?v=4",
+      "profile": "https://github.com/krishchvn",
+      "contributions": [
+        "content"
+      ]
     }
   ],
   "contributorsPerLine": 7,

.env.example

@@ -16,6 +16,9 @@
 # GOOGLE_API_KEY=
 # GOOGLE_CALENDAR_ID=
 
+# Dune Analytics API key (required for total eth staked)
+# DUNE_API_KEY=
+
 # Matomo environment (URL and site ID required for analytics)
 NEXT_PUBLIC_MATOMO_URL=
 NEXT_PUBLIC_MATOMO_SITE_ID=

.github/workflows/chromatic.yml

@@ -17,6 +17,8 @@ on:
       - "src/layouts/**/*"
       - "src/@chakra-ui/**/*"
       - ".storybook/**/*"
+      - "tailwind.config.ts"
+      - "src/styles/**/*"
 
 # List of jobs
 jobs:

.lintstagedrc.js

@@ -5,6 +5,8 @@ const buildEslintCommand = (filenames) =>
     .map((f) => path.relative(process.cwd(), f))
     .join(" --file ")}`
 
+const formatCommand = "prettier --write"
+
 module.exports = {
-  "*.{js,jsx,ts,tsx}": [buildEslintCommand],
+  "*.{js,jsx,ts,tsx}": [buildEslintCommand, formatCommand],
 }

.prettierrc

@@ -3,5 +3,8 @@
   "semi": false,
   "singleQuote": false,
   "tabWidth": 2,
-  "trailingComma": "es5"
-}
+  "trailingComma": "es5",
+  "plugins": [
+    "prettier-plugin-tailwindcss"
+  ]
+}

.storybook/ChakraDecorator.tsx

@@ -1,3 +1,4 @@
+import { useEffect, useMemo, useState } from "react"
 import {
   ChakraBaseProvider,
   extendBaseTheme,
@@ -6,7 +7,7 @@ import {
 import type { Decorator } from "@storybook/react"
 
 import theme from "../src/@chakra-ui/theme"
-import { useEffect, useMemo, useState } from "react"
+
 import i18n from "./i18next"
 
 type DecoratorProps = Parameters<Decorator>

.storybook/main.ts

@@ -22,10 +22,16 @@ const config: StorybookConfig = {
   ],
   addons: [
     "@storybook/addon-links",
-    "@storybook/addon-essentials",
+    {
+      name: "@storybook/addon-essentials",
+      options: {
+        backgrounds: false,
+      },
+    },
     "@storybook/addon-interactions",
     "storybook-react-i18next",
-    "@chromatic-com/storybook"
+    "@storybook/addon-themes",
+    "@chromatic-com/storybook",
   ],
   staticDirs: ["../public"],
   framework: {
@@ -73,7 +79,7 @@ const config: StorybookConfig = {
       },
     },
 
-    reactDocgen: "react-docgen-typescript"
+    reactDocgen: "react-docgen-typescript",
   },
 }
 export default config

.storybook/modes.ts

@@ -1,7 +1,7 @@
 import { baseLocales } from "./i18next"
-import { chakraBreakpointArray } from "./preview"
+import { breakpointSet } from "./preview"
 
-export const viewportModes = chakraBreakpointArray.reduce<{
+export const viewportModes = breakpointSet.reduce<{
   [mode: string]: { viewport: string }
 }>((arr, [token]) => {
   return {

.storybook/preview-head.html

@@ -1,11 +1,3 @@
-<style type="text/css">
-
-    :root {
-        --font-inter: 'Inter', sans-serif;
-        --font-mono: "IBM Plex Mono", Courier, monospace;
-    }
-
-</style>
 
 <link rel="preload" href="/fonts/inter/latin.woff2" as="font" type="font/woff2" crossorigin="anonymous" />
-<link rel="preload" href="/fonts/ibm-plex-mono/IBMPlexMono-Regular.ttf" as="font" type="font/ttf" crossorigin="anonymous" />
+<link rel="preload" href="/fonts/ibm-plex-mono/IBMPlexMono-Regular.ttf" as="font" type="font/ttf" crossorigin="anonymous" />

.storybook/preview.tsx

@@ -0,0 +1,83 @@
+import isChromatic from "chromatic/isChromatic"
+import { MotionGlobalConfig } from "framer-motion"
+import { withThemeByDataAttribute } from "@storybook/addon-themes"
+import type { Preview } from "@storybook/react"
+
+import ThemeProvider from "@/components/ThemeProvider"
+
+import i18n, { baseLocales } from "./i18next"
+
+import "../src/styles/global.css"
+import "../src/styles/fonts.css"
+
+MotionGlobalConfig.skipAnimations = isChromatic()
+
+export const breakpointSet: [token: string, value: string][] = [
+  ["base", "375px"],
+  ["sm", "640px"],
+  ["md", "768px"],
+  ["lg", "1024px"],
+  ["xl", "1280px"],
+  ["2xl", "1536px"],
+]
+
+const preview: Preview = {
+  globals: {
+    locale: "en",
+    locales: baseLocales,
+  },
+  decorators: [
+    withThemeByDataAttribute({
+      themes: {
+        light: "light",
+        dark: "dark",
+      },
+      defaultTheme: "light",
+    }),
+    (Story) => (
+      <ThemeProvider>
+        <Story />
+      </ThemeProvider>
+    ),
+  ],
+  parameters: {
+    i18n,
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+    chromatic: {
+      prefersReducedMotion: "reduce",
+    },
+    options: {
+      storySort: {
+        order: ["Atoms", "Molecules", "Organisms", "Templates", "Pages"],
+      },
+    },
+    layout: "centered",
+    // Modify viewport selection to match Chakra breakpoints (or custom breakpoints)
+    viewport: {
+      viewports: breakpointSet.reduce<{
+        [token: string]: {
+          name: string
+          styles: Record<"width" | "height", string>
+        }
+      }>((arr, [token, value]) => {
+        return {
+          ...arr,
+          [token]: {
+            name: token,
+            styles: {
+              width: value,
+              height: "800px",
+            },
+          },
+        }
+      }, {}),
+    },
+  },
+}
+
+export default preview