feat: set up panda-css with Storybook

corca-ai · Jul 24, 2024 · fde43cb · fde43cb
1 parent 2011565
commit fde43cb
Show file tree

Hide file tree

Showing 10 changed files with 1,943 additions and 183 deletions.
diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -1,4 +1,5 @@
 import '../src/global.css';
+import '../src/index.css';
 import './styles.css';
 
 /** @type { import('@storybook/react').Preview } */

diff --git a/package.json b/package.json
@@ -43,7 +43,7 @@
   "sideEffects": false,
   "repository": "https://github.com/corca-ai/cds",
   "scripts": {
-    "build": "tsc --noEmit && vite build",
+    "build": "tsc --noEmit && vite build && panda cssgen --outfile dist/index.css",
     "typecheck": "tsc --noEmit",
     "lint": "eslint ./src",
     "storybook": "storybook dev -p 6006",
@@ -53,6 +53,7 @@
   },
   "dependencies": {
     "date-fns": "3.3.1",
+    "react-aria-components": "^1.3.1",
     "react-colorful": "5.6.1",
     "react-datepicker": "4.25.0",
     "react-hot-toast": "2.4.1"

diff --git a/panda.config.ts b/panda.config.ts
@@ -30,15 +30,15 @@ const cdsPreset = definePreset({
         etc: {
           white: { value: '#ffffff' },
           focus: { value: '#3b79d7' },
-          active: {
-            30: { value: '#b10e1c' },
-            20: { value: '#fc685f' },
+          error: {
             10: { value: '#ffe7e6' },
+            20: { value: '#fc685f' },
+            30: { value: '#b10e1c' },
           },
-          error: {
-            30: { value: '#037847' },
-            20: { value: '#14ba6d' },
+          active: {
             10: { value: '#ecfdf3' },
+            20: { value: '#14ba6d' },
+            30: { value: '#037847' },
           },
         },
       },
@@ -124,4 +124,5 @@ export default defineConfig({
   polyfill: true,
   // The output directory for your css system
   outdir: 'styled-system',
+  jsxFramework: 'react',
 });