Merge pull request #13343 from ethereum/shadcn-initial-setup

Shadcn/Tailwind - initial setup

Author: corwintines

.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,9 +22,15 @@ const config: StorybookConfig = {
   ],
   addons: [
     "@storybook/addon-links",
-    "@storybook/addon-essentials",
+    {
+      name: "@storybook/addon-essentials",
+      options: {
+        backgrounds: false
+      }
+    },
     "@storybook/addon-interactions",
     "storybook-react-i18next",
+    "@storybook/addon-themes",
     "@chromatic-com/storybook"
   ],
   staticDirs: ["../public"],

.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.ts

@@ -0,0 +1,84 @@
+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,
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    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

.storybook/preview.tsx

@@ -1,5 +1,5 @@
+import type { StyleConfig, ThemingProps } from "@chakra-ui/react"
 import type { ArgTypes } from "@storybook/react"
-import type { ThemingProps } from "@chakra-ui/react"
 
 // Type declarations below pulled directly from `@chakra-ui/storybook-addon`
 // with some alteration
@@ -49,10 +49,10 @@ export type ThemingArgTypeKey = "variant" | "size"
  * @param componentName component name to create the ArgTypes for
  */
 export function getThemingArgTypes<
-  Theme extends Record<string, any>,
+  Theme extends Record<string, unknown> & { components?: Record<string, StyleConfig> },
   ComponentName extends KeyOf<Theme["components"]>
 >(theme: Theme, componentName: ComponentName) {
-  const component = theme.components[componentName]
+  const component = theme.components?.[componentName]
   if (!component) {
     return undefined
   }

.storybook/types.ts

@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "src/styles/global.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils"
+  }
+}

components.json

@@ -32,10 +32,15 @@
     "@docsearch/react": "^3.5.2",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
-    "@radix-ui/react-navigation-menu": "^1.1.4",
+    "@hookform/resolvers": "^3.8.0",
+    "@radix-ui/react-accordion": "^1.2.0",
+    "@radix-ui/react-navigation-menu": "^1.2.0",
+    "@radix-ui/react-slot": "^1.1.0",
     "@socialgouv/matomo-next": "^1.8.0",
     "chart.js": "^4.4.2",
     "chartjs-plugin-datalabels": "^2.2.0",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.1",
     "embla-carousel-react": "^7.0.0",
     "ethereum-blockies-base64": "^1.0.2",
     "framer-motion": "^10.13.0",
@@ -45,22 +50,27 @@
     "lodash.merge": "^4.6.2",
     "lodash.shuffle": "^4.2.0",
     "lodash.union": "^4.6.0",
+    "lucide-react": "^0.400.0",
     "next": "^14.2.3",
     "next-i18next": "^14.0.3",
     "next-mdx-remote": "^3.0.8",
     "next-sitemap": "^4.2.3",
+    "next-themes": "^0.3.0",
     "prism-react-renderer": "1.1.0",
     "prismjs": "^1.27.0",
     "react": "^18.2.0",
     "react-chartjs-2": "^5.2.0",
     "react-dom": "^18.2.0",
     "react-emoji-render": "^2.0.1",
+    "react-hook-form": "^7.52.1",
     "react-i18next": "^13.3.1",
     "react-icons": "^4.10.1",
     "react-lite-youtube-embed": "^2.4.0",
     "react-select": "5.8.0",
     "reading-time": "^1.5.0",
     "remark-gfm": "^3.0.1",
+    "tailwind-merge": "^2.3.0",
+    "tailwindcss-animate": "^1.0.7",
     "yaml-loader": "^0.8.0"
   },
   "devDependencies": {
@@ -70,6 +80,7 @@
     "@storybook/addon-essentials": "8.1.10",
     "@storybook/addon-interactions": "8.1.10",
     "@storybook/addon-links": "8.1.10",
+    "@storybook/addon-themes": "8.1.10",
     "@storybook/nextjs": "^8.1.10",
     "@storybook/react": "8.1.10",
     "@storybook/test": "8.1.10",
@@ -81,11 +92,12 @@
     "@types/react-dom": "18.2.19",
     "@typescript-eslint/eslint-plugin": "^6.19.0",
     "@typescript-eslint/parser": "^6.19.0",
+    "autoprefixer": "^10.4.19",
     "chromatic": "10.9.6",
     "decompress": "^4.2.1",
     "eslint": "^8.45.0",
     "eslint-config-next": "^14.2.2",
-    "eslint-config-prettier": "^9.0.0",
+    "eslint-config-prettier": "9.1.0",
     "eslint-plugin-simple-import-sort": "^10.0.0",
     "eslint-plugin-storybook": "0.8.0",
     "eslint-plugin-unused-imports": "^3.0.0",
@@ -96,9 +108,13 @@
     "minimist": "^1.2.8",
     "plaiceholder": "^3.0.0",
     "polished": "^4.2.2",
+    "postcss": "^8.4.39",
+    "prettier": "3.3.2",
+    "prettier-plugin-tailwindcss": "^0.6.5",
     "raw-loader": "^4.0.2",
     "storybook": "8.1.10",
     "storybook-react-i18next": "3.1.1",
+    "tailwindcss": "^3.4.4",
     "ts-node": "^10.9.1",
     "tsconfig-paths-webpack-plugin": "4.1.0",
     "typescript": "^5.5.2",