feat: upgrade to chakra v3

Author: BLuEScioN

.storybook/preview.tsx

@@ -1,8 +1,9 @@
 import { ChakraProvider } from '@chakra-ui/react';
+import { withThemeByClassName } from '@storybook/addon-themes';
 import type { Preview } from '@storybook/react';
 import React from 'react';
 
-import { theme } from '../src/ui/theme/theme';
+import { system } from '../src/ui/theme/theme';
 
 const preview: Preview = {
   parameters: {
@@ -16,10 +17,14 @@ const preview: Preview = {
   },
   decorators: [
     Story => (
-      <ChakraProvider theme={theme}>
+      <ChakraProvider value={system}>
         <Story />
       </ChakraProvider>
     ),
+    withThemeByClassName({
+      defaultTheme: 'light',
+      themes: { light: '', dark: 'dark' },
+    }),
   ],
 };
 

Dockerfile

@@ -15,6 +15,7 @@ COPY . .
 
 RUN npm install -g [email protected]
 RUN pnpm i
+RUN pnpm chakra typegen src/ui/theme/theme.ts
 RUN pnpm build
 
 # This stage creates the final Docker image that will be used in production. It only contains the necessary runtime environment and the built application files from the first stage.

jest.config.js

@@ -21,6 +21,13 @@ const customJestConfig = {
   coveragePathIgnorePatterns: ['<rootDir>/node_modules/', '<rootDir>/.next/'],
   testPathIgnorePatterns: ['<rootDir>/e2e/', '<rootDir>/node_modules/', '<rootDir>/.next/'],
   setupFiles: ['<rootDir>/setup-jest.js'],
+  // transformIgnorePatterns: [
+  //   // Change the default pattern to transform react-leaflet
+  //   '/node_modules/(?!(react-leaflet|@react-leaflet|leaflet)/)'
+  // ],
+  // transform: {
+  //   '^.+\\.(ts|tsx)$': 'ts-jest',
+  // },
 };
 
 // createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async

jest.setup.js

@@ -1 +1,4 @@
 import '@testing-library/jest-dom';
+import structuredClone from '@ungap/structured-clone';
+
+global.structuredClone = structuredClone;

next.config.js

@@ -27,6 +27,12 @@ const nextConfig = {
       },
     ];
   },
+  experimental: {
+    optimizePackageImports: ['@chakra-ui/react'],
+  },
+  images: {
+    domains: ['assets.hiro.so'],
+  },
 };
 
 module.exports = withSentryConfig(withBundleAnalyzer(nextConfig), {

package.json

@@ -3,7 +3,7 @@
   "description": "The source code for the Stacks Blockchain explorer.",
   "scripts": {
     "preinstall": "npx only-allow pnpm",
-    "build": "next build",
+    "build": "pnpm chakra-types && next build",
     "build:analyze": "next telemetry disable && ANALYZE=true next build",
     "dev": "next dev",
     "lint": "pnpm run lint:eslint && pnpm run lint:prettier",
@@ -20,24 +20,24 @@
     "test:unit": "jest --forceExit ./src",
     "prepare": "husky install",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "build-storybook": "storybook build",
+    "chakra-types": "pnpm chakra typegen ./src/ui/theme/theme.ts"
   },
   "version": "1.0.0",
   "author": "Hiro Systems PBC (formerly Blockstack PBC)",
   "dependencies": {
-    "@chakra-ui/anatomy": "2.2.2",
-    "@chakra-ui/next-js": "2.2.0",
-    "@chakra-ui/react": "2.8.2",
+    "@chakra-ui/anatomy": "2.3.4",
+    "@chakra-ui/react": "3.3.1",
     "@chakra-ui/theme-tools": "2.1.2",
     "@contentful/rich-text-react-renderer": "15.21.2",
     "@contentful/rich-text-types": "16.5.2",
     "@date-fns/utc": "1.2.0",
     "@emotion/cache": "11.11.0",
     "@emotion/core": "11.0.0",
     "@emotion/css": "11.11.2",
-    "@emotion/react": "11.11.1",
+    "@emotion/react": "11.13.3",
     "@emotion/server": "11.11.0",
-    "@emotion/styled": "11.11.0",
+    "@emotion/styled": "11.13.0",
     "@hirosystems/token-metadata-api-client": "1.2.0",
     "@monaco-editor/react": "4.5.2",
     "@next/bundle-analyzer": "14.2.0",
@@ -56,6 +56,7 @@
     "@stacks/connect-ui": "6.4.1",
     "@stacks/network": "6.13.0",
     "@stacks/transactions": "6.15.1-pr.0bcf867e.0+0bcf867e",
+    "@storybook/addon-themes": "^8.4.7",
     "@tanstack/react-query": "5.8.4",
     "@tippyjs/react": "4.2.6",
     "@types/cookie": "0.5.2",
@@ -66,11 +67,11 @@
     "c32check": "2.0.0",
     "contentful": "10.12.0",
     "cookie": "0.5.0",
+    "cookies-next": "^4.3.0",
     "dayjs": "1.11.9",
     "eslint-plugin-import": "2.29.0",
     "express": "4.19.2",
     "formik": "2.4.3",
-    "framer-motion": "10.16.4",
     "http-status-codes": "2.3.0",
     "husky": "8.0.3",
     "ioredis": "5.3.2",
@@ -83,6 +84,7 @@
     "monacode": "0.3.1",
     "morgan": "1.10.0",
     "next": "14.2.13",
+    "next-themes": "0.4.4",
     "nookies": "2.5.2",
     "onigasm": "2.2.5",
     "openapi-fetch": "0.13.0",
@@ -99,6 +101,7 @@
     "react-dom": "18.2.0",
     "react-error-boundary": "4.0.11",
     "react-hot-toast": "2.4.1",
+    "react-icons": "^5.3.0",
     "react-leaflet": "4.2.1",
     "react-loading-skeleton": "3.3.1",
     "react-redux": "8.1.2",
@@ -116,6 +119,7 @@
     "yup": "1.2.0"
   },
   "devDependencies": {
+    "@chakra-ui/cli": "3.1.0",
     "@chromatic-com/storybook": "1.9.0",
     "@commitlint/config-conventional": "12.1.4",
     "@next/eslint-plugin-next": "14.0.3",
@@ -151,6 +155,7 @@
     "@types/styled-system__theme-get": "5.0.1",
     "@types/testing-library__jest-dom": "5.14.8",
     "@types/valid-url": "1.0.3",
+    "@ungap/structured-clone": "^1.2.1",
     "commitlint": "12.1.4",
     "eslint": "8.54.0",
     "eslint-config-next": "14.0.3",