Migrate to Chakra V3

.eslintrc.json

@@ -1,3 +1,6 @@
 {
-  "extends": "next/core-web-vitals"
+  "extends": [
+    "next/core-web-vitals",
+    "plugin:storybook/recommended"
+  ]
 }

.gitignore

@@ -33,3 +33,5 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+*storybook.log

.storybook/main.ts

@@ -0,0 +1,28 @@
+import type { StorybookConfig } from "@storybook/nextjs";
+import * as path from "path";
+
+const config: StorybookConfig = {
+  stories: ["../src/__stories__/**/*.stories.tsx"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+    "@storybook/addon-a11y",
+  ],
+  framework: {
+    name: "@storybook/nextjs",
+    options: {},
+  },
+  staticDirs: ["../public"],
+  webpackFinal: async (config) => {
+    if (config.resolve) {
+      config.resolve.alias = {
+        ...config.resolve?.alias,
+        "@/lib": path.resolve(__dirname, "../src/lib"),
+      };
+    }
+
+    return config;
+  },
+};
+export default config;

.storybook/preview.tsx

@@ -0,0 +1,25 @@
+import type { Preview } from "@storybook/react";
+import { ChakraProvider } from "@chakra-ui/react";
+import { system } from "@/lib/theme";
+import { titilliumWeb } from "@/lib/fonts/titillium-web";
+import { mulish } from "@/lib/fonts/mullish";
+
+const preview: Preview = {
+  decorators: [
+    (Story) => (
+      <ChakraProvider value={system}>
+        <style jsx global>
+          {`
+            :root {
+              --font-tw: ${titilliumWeb.style.fontFamily};
+              --font-mulish: ${mulish.style.fontFamily};
+            }
+          `}
+        </style>
+        <Story />
+      </ChakraProvider>
+    ),
+  ],
+};
+
+export default preview;

package.json

@@ -11,32 +11,43 @@
     "lint": "next lint",
     "theme": "chakra-cli tokens src/lib/theme.ts",
     "theme:watch": "chakra-cli tokens src/lib/theme.ts --watch",
-    "prepare": "husky install"
+    "prepare": "husky install",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "dependencies": {
     "@chakra-ui/next-js": "^2.1.4",
-    "@chakra-ui/react": "^2.7.0",
-    "@emotion/react": "^11.11.1",
-    "@emotion/styled": "^11.11.0",
+    "@chakra-ui/react": "^3.0.1",
+    "@emotion/react": "^11.13.3",
     "@types/node": "20.3.0",
     "@types/react": "18.2.11",
     "@types/react-dom": "18.2.4",
     "eslint": "8.42.0",
     "eslint-config-next": "13.4.5",
-    "framer-motion": "^10.12.16",
     "i18next": "^23.3.0",
-    "next": "13.4.5",
+    "next": "13.5.5",
     "next-i18next": "^14.0.0",
     "next-seo": "^6.0.0",
+    "next-themes": "^0.3.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-i18next": "^13.0.2",
-    "react-icons": "^4.9.0",
+    "react-icons": "^5.3.0",
     "typescript": "5.1.3"
   },
   "devDependencies": {
-    "@chakra-ui/cli": "^2.4.1",
-    "@chakra-ui/styled-system": "^2.9.1",
-    "husky": "^8.0.0"
+    "@chakra-ui/cli": "^3.0.1",
+    "@chakra-ui/styled-system": "^2.12.0",
+    "@storybook/addon-a11y": "^8.3.6",
+    "@storybook/addon-essentials": "^8.3.6",
+    "@storybook/addon-interactions": "^8.3.6",
+    "@storybook/addon-links": "^8.3.6",
+    "@storybook/blocks": "^8.3.6",
+    "@storybook/nextjs": "^8.3.6",
+    "@storybook/react": "^8.3.6",
+    "@storybook/test": "^8.3.6",
+    "eslint-plugin-storybook": "^0.10.1",
+    "husky": "^8.0.0",
+    "storybook": "^8.3.6"
   }
 }

src/__stories__/heading.stories.tsx

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Heading as HeadingComponent, Stack } from "@chakra-ui/react";
+
+const meta = {
+    title: "System / Heading",
+    component: HeadingComponent,
+} satisfies Meta<typeof HeadingComponent>
+
+export default meta;
+
+export const Heading: StoryObj<typeof meta> = {
+    render: () => (
+        <Stack>
+            <HeadingComponent as='h1' size="4xl">Heading 2xl</HeadingComponent>
+            <HeadingComponent as='h2' size="3xl">Heading xl</HeadingComponent>
+            <HeadingComponent as='h3' size="2xl">Heading lg</HeadingComponent>
+        </Stack>
+    )
+}

src/lib/fonts/mullish.ts

@@ -0,0 +1,6 @@
+import { Mulish } from "next/font/google";
+
+export const mulish = Mulish({
+  weight: "400",
+  subsets: ["latin"],
+});

src/lib/fonts/titillium-web.ts

@@ -0,0 +1,6 @@
+import { Titillium_Web } from "next/font/google";
+
+export const titilliumWeb = Titillium_Web({
+  weight: "700",
+  subsets: ["latin"],
+});

src/lib/oldTheme.ts

@@ -0,0 +1,127 @@
+import { extendBaseTheme, theme } from "@chakra-ui/react";
+
+export default extendBaseTheme({
+  styles: {
+    global: {
+      body: {
+        bg: "background",
+        color: "body",
+        fontSize: "md",
+        lineHeight: "1",
+      },
+      p: {
+        _notLast: {
+          mb: "text.base",
+        },
+      },
+    },
+  },
+  semanticTokens: {
+    colors: {
+      primary: {
+        base: "#297B91",
+        dark: "#1F5E6F",
+      },
+      secondary: {
+        base: "#FFB700",
+        light: "#FFD15C",
+        dark: "#C28B00",
+      },
+      background: "#182326",
+      body: "white",
+    },
+  },
+  fonts: {
+    heading: "var(--font-tw)",
+    body: "var(--font-mulish)",
+  },
+  fontSizes: {
+    sm: "1rem",
+    md: "1.33rem",
+    lg: "1.78rem",
+    xl: "2.37rem",
+    "2xl": "3.16rem",
+    "3xl": "4.21rem",
+    "4xl": "5.61rem",
+  },
+  lineHeights: {
+    "1": "2.375rem",
+    "1.5": "3.56rem",
+    "2": "4.75rem",
+    "3": "7.125rem",
+  },
+  space: {
+    text: {
+      sm: "1.188rem",
+      base: "2.375rem",
+      md: "3.563rem",
+      lg: "4.75rem",
+      xl: "5.938rem",
+      "2xl": "7.125rem",
+      "3xl": "8.313rem",
+      "4xl": "9.5rem",
+    },
+  },
+  components: {
+    Heading: {
+      baseStyle: {
+        fontFamily: "heading",
+        letterSpacing: "wide",
+        // Chrome only (In Canary v117.0.5847.0)
+        textWrap: "balance",
+      },
+      sizes: {
+        "4xl": {
+          fontSize: ["2xl", "3xl", "4xl"],
+          lineHeight: ["2", null, "3"],
+        },
+        "3xl": {
+          fontSize: ["xl", "2xl", "3xl"],
+          lineHeight: ["1.5", "2", null],
+        },
+        "2xl": {
+          fontSize: ["lg", "xl", "2xl"],
+          lineHeight: ["1", null, "2"],
+        },
+      },
+      defaultProps: {
+        size: "3xl",
+      },
+    },
+    Button: {
+      baseStyle: {
+        ...theme.components.Button.baseStyle,
+        ...theme.components.Button.sizes?.lg,
+        fontSize: "sm",
+      },
+      variants: {
+        solid: {
+          color: "background",
+          bg: "secondary.base",
+          _hover: {
+            bg: "secondary.light",
+          },
+          _active: {
+            bg: "secondary.dark",
+          },
+        },
+        outline: {
+          border: "2px",
+          borderColor: "body",
+          _hover: {
+            bg: "body",
+            color: "background",
+          },
+          _active: {
+            opacity: 0.6,
+          },
+        },
+      },
+      defaultProps: {
+        variant: "solid",
+      },
+    },
+    Tooltip: theme.components.Tooltip,
+    Tabs: theme.components.Tabs,
+  },
+});