feat(react-storybook): use core package for preset and recipes

- use Panda CSS + PostCSS instead of static CSS Signed-off-by: Guillaume Bonnet <[email protected]>
MrSquaare · Nov 30, 2024 · 2f59684 · 2f59684
1 parent a7d6ae5
commit 2f59684
Show file tree

Hide file tree

Showing 9 changed files with 37 additions and 15 deletions.
diff --git a/packages/react-storybook/.storybook/preview.css b/packages/react-storybook/.storybook/preview.css
@@ -1,4 +1,4 @@
-@import "@sandwich-ui/react/style.css";
+@layer reset, base, tokens, recipes, utilities;
 
 body:has(#storybook-root:not([hidden])) {
   background-color: #ffffff;

diff --git a/packages/react-storybook/package.json b/packages/react-storybook/package.json
@@ -4,20 +4,23 @@
   "version": "0.1.1",
   "type": "module",
   "scripts": {
+    "predev": "panda codegen",
     "dev": "storybook dev -p 6006",
-    "prebuild": "rimraf storybook-static/",
+    "prebuild": "rimraf storybook-static/ && panda codegen",
     "build": "storybook build",
     "preview": "vite preview --outDir storybook-static/",
     "lint": "eslint .",
     "lint:fix": "eslint --fix .",
     "clean": "rimraf storybook-static/ node_modules/.cache/"
   },
   "dependencies": {
+    "@sandwich-ui/core": "workspace:*",
     "@sandwich-ui/react": "workspace:*",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
+    "@pandacss/dev": "^0.48.0",
     "@storybook/addon-essentials": "^8.4.5",
     "@storybook/addon-interactions": "^8.4.5",
     "@storybook/addon-links": "^8.4.5",
@@ -39,6 +42,7 @@
     "eslint-plugin-react-refresh": "^0.4.14",
     "eslint-plugin-storybook": "^0.11.1",
     "globals": "^15.12.0",
+    "postcss": "^8.4.49",
     "rimraf": "^6.0.1",
     "storybook": "^8.4.5",
     "typescript": "^5.7.2",

diff --git a/packages/react-storybook/panda.config.ts b/packages/react-storybook/panda.config.ts
@@ -0,0 +1,15 @@
+import { defineConfig } from "@pandacss/dev";
+import sandwichUIPreset from "@sandwich-ui/core/preset";
+
+export default defineConfig({
+  preflight: true,
+  prefix: "sw",
+  presets: ["@pandacss/dev/presets", sandwichUIPreset],
+  include: [
+    "./node_modules/@sandwich-ui/core/dist/panda.buildinfo.json",
+    "./node_modules/@sandwich-ui/react/dist/panda.buildinfo.json",
+    "./src/**/*.{js,jsx,ts,tsx}",
+  ],
+  importMap: "@sandwich-ui/core",
+  outdir: "./node_modules/@sandwich-ui/core/dist/styled-system",
+});
diff --git a/packages/react-storybook/postcss.config.js b/packages/react-storybook/postcss.config.js
@@ -0,0 +1,5 @@
+export default {
+  plugins: {
+    "@pandacss/dev/postcss": {},
+  },
+};
diff --git a/packages/react-storybook/src/components/Avatar.stories.tsx b/packages/react-storybook/src/components/Avatar.stories.tsx
@@ -1,9 +1,5 @@
-import {
-  Avatar,
-  AvatarFallback,
-  AvatarImage,
-  AvatarRecipe,
-} from "@sandwich-ui/react";
+import { AvatarRecipe } from "@sandwich-ui/core/recipes";
+import { Avatar, AvatarFallback, AvatarImage } from "@sandwich-ui/react";
 import type { Meta, StoryObj } from "@storybook/react";
 
 const meta = {

diff --git a/packages/react-storybook/src/components/Badge.stories.ts b/packages/react-storybook/src/components/Badge.stories.ts
@@ -1,4 +1,5 @@
-import { Badge, BadgeRecipe } from "@sandwich-ui/react";
+import { BadgeRecipe } from "@sandwich-ui/core/recipes";
+import { Badge } from "@sandwich-ui/react";
 import type { Meta, StoryObj } from "@storybook/react";
 
 const meta = {

diff --git a/packages/react-storybook/src/components/Button.stories.ts b/packages/react-storybook/src/components/Button.stories.ts
@@ -1,4 +1,5 @@
-import { Button, ButtonRecipe } from "@sandwich-ui/react";
+import { ButtonRecipe } from "@sandwich-ui/core/recipes";
+import { Button } from "@sandwich-ui/react";
 import type { Meta, StoryObj } from "@storybook/react";
 import { fn } from "@storybook/test";
 

diff --git a/packages/react-storybook/src/components/Menu.stories.tsx b/packages/react-storybook/src/components/Menu.stories.tsx
@@ -28,13 +28,13 @@ export const Default: Story = {
         <Button>Menu</Button>
       </MenuTrigger>
       <MenuContent>
-        <MenuItem id={"item-1"} onClick={fn()}>
+        <MenuItem onClick={fn()} value={"item-1"}>
           Item 1
         </MenuItem>
-        <MenuItem id={"item-2"} onClick={fn()}>
+        <MenuItem onClick={fn()} value={"item-2"}>
           Item 2
         </MenuItem>
-        <MenuItem id={"item-3"} onClick={fn()}>
+        <MenuItem onClick={fn()} value={"item-3"}>
           Item 3
         </MenuItem>
       </MenuContent>

diff --git a/packages/react-storybook/src/components/Navigation.stories.tsx b/packages/react-storybook/src/components/Navigation.stories.tsx
@@ -53,8 +53,8 @@ export const Default: Story = {
             </Avatar>
           </MenuTrigger>
           <MenuContent>
-            <MenuItem id={"item-1"}>Profile</MenuItem>
-            <MenuItem id={"item-2"}>Sign out</MenuItem>
+            <MenuItem value={"profile"}>Profile</MenuItem>
+            <MenuItem value={"sign-out"}>Sign out</MenuItem>
           </MenuContent>
         </Menu>
       </NavigationList>