refactor(ui): upgrade storybook, panda

leather-io · Sep 24, 2024 · 747ad76 · 747ad76
1 parent a63474b
commit 747ad76
Show file tree

Hide file tree

Showing 6 changed files with 974 additions and 1,913 deletions.
diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -44,14 +44,14 @@
     "@rnx-kit/metro-config": "1.3.14",
     "@rnx-kit/metro-resolver-symlinks": "0.1.35",
     "@shopify/restyle": "2.4.2",
-    "@storybook/react": "7.6.15",
     "expo": "51.0.26",
     "expo-asset": "10.0.6",
     "expo-blur": "13.0.2",
     "expo-constants": "16.0.2",
     "expo-font": "12.0.5",
     "expo-linear-gradient": "13.0.2",
     "expo-splash-screen": "0.27.4",
+    "framer-motion": "11.5.5",
     "metro-cache": "0.80.5",
     "metro-config": "0.80.5",
     "metro-resolver": "0.80.5",
@@ -68,23 +68,25 @@
     "@leather.io/eslint-config": "workspace:*",
     "@leather.io/panda-preset": "workspace:*",
     "@microsoft/api-extractor": "7.47.6",
-    "@pandacss/dev": "0.40.1",
+    "@pandacss/dev": "0.46.0",
     "@react-native-async-storage/async-storage": "1.23.1",
-    "@storybook/addon-actions": "7.6.17",
-    "@storybook/addon-docs": "7.6.15",
-    "@storybook/addon-essentials": "7.6.15",
-    "@storybook/addon-interactions": "7.6.15",
-    "@storybook/addon-links": "7.6.15",
-    "@storybook/addon-onboarding": "1.0.10",
-    "@storybook/addon-ondevice-actions": "7.6.15",
-    "@storybook/addon-ondevice-controls": "7.6.15",
-    "@storybook/addon-styling-webpack": "0.0.5",
-    "@storybook/blocks": "7.6.15",
-    "@storybook/manager-api": "7.6.17",
-    "@storybook/react-native": "7.6.15",
-    "@storybook/react-webpack5": "7.6.15",
-    "@storybook/test": "7.6.15",
-    "@storybook/theming": "7.6.17",
+    "@storybook/addon-actions": "^8.3.2",
+    "@storybook/addon-docs": "^8.3.2",
+    "@storybook/addon-essentials": "^8.3.2",
+    "@storybook/addon-interactions": "^8.3.2",
+    "@storybook/addon-links": "^8.3.2",
+    "@storybook/addon-onboarding": "^8.3.2",
+    "@storybook/addon-ondevice-actions": "7.6.20",
+    "@storybook/addon-ondevice-controls": "7.6.20",
+    "@storybook/addon-styling-webpack": "1.0.0",
+    "@storybook/addon-webpack5-compiler-swc": "1.0.5",
+    "@storybook/blocks": "^8.3.2",
+    "@storybook/manager-api": "^8.3.2",
+    "@storybook/react": "^8.3.2",
+    "@storybook/react-native": "7.6.20",
+    "@storybook/react-webpack5": "^8.3.2",
+    "@storybook/test": "^8.3.2",
+    "@storybook/theming": "^8.3.2",
     "@svgr/webpack": "8.1.0",
     "@types/react": "18.2.79",
     "@types/react-dom": "18.2.25",
@@ -98,7 +100,7 @@
     "postcss-loader": "8.1.1",
     "postcss-preset-env": "9.4.0",
     "react-native-svg-transformer": "1.3.0",
-    "storybook": "7.6.15",
+    "storybook": "^8.3.2",
     "style-loader": "3.3.4",
     "tsconfig-paths-webpack-plugin": "4.1.0",
     "tslib": "2.6.2",

diff --git a/packages/ui/panda.config.ts b/packages/ui/panda.config.ts
@@ -3,15 +3,15 @@ import { defineConfig } from '@pandacss/dev';
 export default defineConfig({
   preflight: true,
 
-  include: ['./**/*.web.{js,jsx,ts,tsx}'],
+  include: ['./**/*.web.{ts,tsx}', './**/*.web.stories.{ts,tsx}', './**/*.shared.{ts,tsx}'],
 
   exclude: [],
 
   prefix: 'leather',
 
   presets: ['@leather.io/panda-preset'],
 
-  studio: { logo: '💼' },
+  studio: { logo: '🖤' },
 
   jsxFramework: 'react',
 

diff --git a/packages/ui/postcss.config.cjs b/packages/ui/postcss.config.cjs
@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: {
+    '@pandacss/dev/postcss': {},
+  },
+};
diff --git a/packages/ui/src/.storybook-web/index.css b/packages/ui/src/.storybook-web/index.css
@@ -1 +1 @@
-@layer reset, base, tokens, recipes, utilities;
+@layer reset, base, tokens, recipes, utilities;
diff --git a/packages/ui/src/.storybook-web/main.ts b/packages/ui/src/.storybook-web/main.ts
@@ -1,12 +1,14 @@
 import type { StorybookConfig } from '@storybook/react-webpack5';
+import { dirname, join } from 'path';
 import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin';
 
 const config: StorybookConfig = {
   addons: [
-    '@storybook/addon-links',
-    '@storybook/addon-essentials',
-    '@storybook/addon-onboarding',
-    '@storybook/addon-interactions',
+    getAbsolutePath('@storybook/addon-links'),
+    getAbsolutePath('@storybook/addon-essentials'),
+    getAbsolutePath('@storybook/addon-onboarding'),
+    getAbsolutePath('@storybook/addon-interactions'),
+    '@storybook/addon-webpack5-compiler-swc',
     {
       name: '@storybook/addon-docs',
       options: {
@@ -38,15 +40,11 @@ const config: StorybookConfig = {
       },
     },
   ],
-  docs: {
-    autodocs: 'tag',
-  },
+  docs: {},
   framework: {
-    name: '@storybook/react-webpack5',
+    name: getAbsolutePath('@storybook/react-webpack5'),
     options: {
-      builder: {
-        useSWC: true,
-      },
+      builder: {},
     },
   },
   staticDirs: ['../assets', '../assets-web'],
@@ -111,3 +109,7 @@ const config: StorybookConfig = {
 };
 
 export default config;
+
+function getAbsolutePath(value: string): any {
+  return dirname(require.resolve(join(value, 'package.json')));
+}