fix: bump storybook to v7

.npmrc

@@ -1,3 +1,6 @@
 strict-peer-dependencies=false
 save-exact=true
-public-hoist-pattern[]=*prisma*
+public-hoist-pattern[]=*prisma*
+auto-install-peers=true
+legacy-peer-deps=true
+node-linker=hoisted

apps/comment-bootstrapper/package.json

@@ -14,15 +14,15 @@
     "@chirpy-dev/tsconfigs": "workspace:*",
     "@chirpy-dev/utils": "workspace:*",
     "@testing-library/react": "13.4.0",
-    "@types/jest": "29.2.3",
+    "@types/jest": "29.5.2",
     "@types/node": "16.11.45",
     "@types/react": "18.2.13",
     "@types/react-dom": "18.2.6",
     "dotenv": "16.0.3",
     "dotenv-cli": "6.0.0",
     "dotenv-expand": "9.0.0",
     "eslint": "8.43.0",
-    "jest": "29.3.1",
+    "jest": "29.5.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "typescript": "5.1.3",

apps/main/next.config.js

@@ -1,6 +1,5 @@
 const useAnalysis = process.env.ANALYZE === 'true';
 const analyticsDomain = process.env.NEXT_PUBLIC_ANALYTICS_DOMAIN;
-const isProd = process.env.NODE_ENV === 'production';
 
 const withBundleAnalyzer = require('@next/bundle-analyzer')({
   enabled: useAnalysis && process.env.NODE_ENV !== 'development',
@@ -13,9 +12,6 @@ const plugins = [withBundleAnalyzer, withAxiom];
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  ...(process.env.DOCKER && {
-    output: 'standalone',
-  }),
   productionBrowserSourceMaps: process.env.VERCEL_ENV !== 'production',
   transpilePackages: [
     '@chirpy-dev/emails',

apps/main/package.json

@@ -60,8 +60,8 @@
     "@relative-ci/agent": "4.1.5",
     "@types/cors": "2.8.13",
     "@types/github-slugger": "1.3.0",
-    "@types/jest": "29.2.3",
-    "@types/lodash": "4.14.189",
+    "@types/jest": "29.5.2",
+    "@types/lodash": "4.14.195",
     "@types/node": "16.11.45",
     "@types/react": "18.2.13",
     "@types/react-dom": "18.2.6",
@@ -71,7 +71,7 @@
     "dotenv-cli": "6.0.0",
     "dotenv-expand": "9.0.0",
     "eslint": "8.43.0",
-    "jest": "29.3.1",
+    "jest": "29.5.0",
     "postcss": "8.4.24",
     "tailwindcss": "3.3.2",
     "typescript": "5.1.3",

package.json

@@ -29,13 +29,8 @@
   "pnpm": {
     "peerDependencyRules": {
       "ignoreMissing": [
-        "@testing-library/dom",
-        "@storybook/addons",
-        "@storybook/client-api",
-        "@storybook/preview-web",
         "@geist-ui/core",
-        "seedrandom",
-        "ts-node"
+        "less"
       ],
       "allowedVersions": {
         "react": "18",

packages/configs/tailwind.js

@@ -69,6 +69,7 @@ module.exports = {
         44: '11rem',
       },
       width: {
+        fit: 'fit-content',
         '31percent': '31%',
       },
       opacity: {
@@ -107,9 +108,6 @@ module.exports = {
       scale: {
         '-1': '-1',
       },
-      width: {
-        fit: 'fit-content',
-      },
       height: {
         fit: 'fit-content',
       },

packages/eslint-config/package.json

@@ -9,9 +9,9 @@
     "@typescript-eslint/parser": "5.60.0",
     "eslint-config-next": "13.4.7",
     "eslint-config-prettier": "8.8.0",
-    "eslint-plugin-jest": "27.1.6",
+    "eslint-plugin-jest": "27.2.2",
     "eslint-plugin-prettier": "4.2.1",
-    "eslint-plugin-storybook": "0.6.7",
+    "eslint-plugin-storybook": "0.6.12",
     "eslint-plugin-unicorn": "47.0.0",
     "next": "13.4.7",
     "prettier": "2.8.8",

packages/trpc/package.json

@@ -36,7 +36,7 @@
     "zod": "3.21.4"
   },
   "devDependencies": {
-    "@types/jest": "29.2.3",
+    "@types/jest": "29.5.2",
     "@types/node": "16.11.45",
     "prisma": "4.16.1",
     "typescript": "5.1.3"

packages/ui/.storybook/main.ts

@@ -0,0 +1,18 @@
+import type { StorybookConfig } from '@storybook/nextjs';
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+  ],
+  framework: {
+    name: '@storybook/nextjs',
+    options: {},
+  },
+  docs: {
+    autodocs: 'tag',
+  },
+  staticDirs: ['../../../apps/main/public', '../public'],
+};
+export default config;

packages/ui/.storybook/preview-head.html

@@ -4,4 +4,3 @@
   as="font"
   crossorigin="anonymous"
 />
-<link rel="stylesheet" type="text/css" href="/tailwind.css" />

packages/ui/.storybook/preview.tsx

@@ -1,53 +1,52 @@
-import { LazyMotion } from 'framer-motion';
-import { initialize, mswDecorator } from 'msw-storybook-addon';
-import { SessionProvider } from 'next-auth/react';
+import { initialize, mswLoader } from 'msw-storybook-addon';
 import * as React from 'react';
 
-import { CurrentUserProvider, useThemeVariables } from '../src/contexts';
-import { loadFeatures } from '../src/pages/app';
-
-// TODO: fix tailwind not work in storybook,
-// use the tailwind CLI to build a separated css instead.
-import '../src/styles/global-styles.scss';
+import { App } from '../src/pages/app';
 
 import { sbRestHandlers } from './msw/rest-handlers';
 
+import { Preview } from '@storybook/react';
+import "tailwindcss/tailwind.css";
+
 initialize({
   onUnhandledRequest: 'bypass',
 });
 
-export const decorators = [
-  mswDecorator,
-
-  // @ts-ignore
-  (Story) => {
-    const { styles } = useThemeVariables();
-    return (
-      <SessionProvider>
-        <CurrentUserProvider>
-          <style>{styles}</style>
-          <LazyMotion features={loadFeatures}>
-            <div className="h-screen bg-bg pt-6">
-              <Story />
-            </div>
-          </LazyMotion>
-        </CurrentUserProvider>
-      </SessionProvider>
-    );
-  },
-];
-
-export const parameters = {
-  actions: { argTypesRegex: '^on[A-Z].*' },
-  controls: {
-    matchers: {
-      color: /(background|color)$/i,
-      date: /Date$/,
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: '^on.*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
     },
-  },
-  msw: {
-    handlers: {
-      common: [...sbRestHandlers],
+    msw: {
+      handlers: {
+        common: [...sbRestHandlers],
+      },
     },
   },
+  loaders: [mswLoader],
+  // decorators: [
+  //   (Story): JSX.Element => {
+  //     return (
+  //       <App
+  //         // @ts-expect-error
+  //         Component={Story}
+  //         pageProps={{
+  //           session: {
+  //             user: {
+  //               name: 'test',
+  //               email: '[email protected]',
+  //             },
+  //             expires: '2099-10-10T10:10:10.000Z',
+  //           },
+  //         }}
+  //       />
+  //     );
+  //   },
+  // ],
 };
+
+export default preview;

packages/ui/package.json

@@ -5,10 +5,8 @@
   "main": "./src/index.ts",
   "scripts": {
     "chromatic": "chromatic --exit-zero-on-changes",
-    "build:css": "NODE_ENV=production tailwindcss -o public/tailwind.css -m",
-    "build:sb": "pnpm run build:css && build-storybook",
-    "dev:css": "tailwindcss -o public/tailwind.css --watch",
-    "dev": "concurrently 'start-storybook -p 6006' 'pnpm run dev:css'",
+    "build": "storybook build",
+    "dev": "storybook dev -p 6006",
     "test": "DEBUG_PRINT_LIMIT=999999 jest --silent=false",
     "test:coverage": "DEBUG_PRINT_LIMIT=999999 jest --silent=false --coverage"
   },
@@ -52,55 +50,47 @@
     "superjson": "1.12.3"
   },
   "devDependencies": {
-    "@babel/core": "7.22.5",
     "@chirpy-dev/configs": "workspace:*",
     "@chirpy-dev/eslint-config": "workspace:*",
     "@chirpy-dev/tsconfigs": "workspace:*",
     "@chirpy-dev/types": "workspace:*",
-    "@storybook/addon-actions": "6.5.14",
-    "@storybook/addon-essentials": "6.5.14",
-    "@storybook/addon-interactions": "6.5.14",
-    "@storybook/builder-webpack5": "6.5.14",
-    "@storybook/manager-webpack5": "6.5.14",
-    "@storybook/react": "6.5.14",
-    "@storybook/testing-library": "0.0.13",
-    "@storybook/testing-react": "1.3.0",
+    "@storybook/addon-actions": "7.0.23",
+    "@storybook/addon-essentials": "7.0.23",
+    "@storybook/addon-interactions": "7.0.23",
+    "@storybook/addon-links": "^7.0.23",
+    "@storybook/blocks": "7.0.23",
+    "@storybook/nextjs": "7.0.23",
+    "@storybook/react": "7.0.23",
+    "@storybook/testing-library": "0.2.0",
+    "@testing-library/dom": "9.3.1",
     "@testing-library/jest-dom": "5.16.5",
     "@testing-library/react": "13.4.0",
     "@testing-library/user-event": "14.4.3",
+    "@trpc/server": "10.32.0",
     "@types/canvas-confetti": "1.6.0",
     "@types/debounce-promise": "3.1.6",
-    "@types/jest": "29.2.3",
+    "@types/jest": "29.5.2",
     "@types/node": "16.11.45",
     "@types/react": "18.2.13",
     "@types/react-dom": "18.2.6",
-    "@types/testing-library__jest-dom": "5.14.5",
+    "@types/testing-library__jest-dom": "5.14.6",
     "autoprefixer": "10.4.14",
-    "babel-loader": "8.2.5",
-    "chromatic": "6.11.4",
-    "concurrently": "7.5.0",
-    "css-loader": "6.8.1",
     "csstype": "3.1.2",
     "eslint": "8.43.0",
     "fake-indexeddb": "4.0.1",
-    "html-loader": "4.2.0",
     "intersection-observer": "0.12.2",
-    "jest": "29.3.1",
-    "jest-environment-jsdom": "29.3.1",
-    "msw": "0.47.4",
-    "msw-storybook-addon": "1.6.3",
+    "jest": "29.5.0",
+    "jest-environment-jsdom": "29.5.0",
+    "msw": "1.2.2",
+    "msw-storybook-addon": "1.8.0",
+    "msw-trpc": "1.3.3",
     "postcss": "8.4.24",
-    "postcss-loader": "7.3.3",
-    "require-from-string": "2.0.2",
-    "resolve-url-loader": "5.0.0",
-    "sass": "1.63.6",
-    "sass-loader": "13.3.2",
-    "storybook-addon-next": "1.7.1",
-    "style-loader": "3.3.3",
+    "postcss-flexbugs-fixes": "5.0.2",
+    "postcss-preset-env": "8.5.1",
+    "storybook": "7.0.23",
     "tailwindcss": "3.3.2",
     "type-fest": "3.12.0",
     "typescript": "5.1.3",
-    "webpack": "5.87.0",
     "whatwg-fetch": "3.6.2"
   },
   "modules": "./src/index.ts",

packages/ui/postcss.config.js

@@ -1 +1,6 @@
-module.exports = require('configs').postcssConfig;
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}