fix: storybook unocss (#38)

0plan · Feb 15, 2024 · fc6216e · fc6216e
1 parent bef7eff
commit fc6216e
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 30 deletions.
diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -1,4 +1,5 @@
-import type { StorybookConfig } from '@storybook/react-vite';
+import type { StorybookConfig } from '@storybook/react-vite'
+import Unocss from 'unocss/vite'
 
 const config: StorybookConfig = {
   "stories": [
@@ -17,6 +18,12 @@ const config: StorybookConfig = {
   },
   "docs": {
     "autodocs": "tag"
+  },
+  viteFinal(config){
+    config.plugins?.push(Unocss())
+    // Add other configuration here depending on your use case
+    return config
   }
 };
-export default config;
+
+export default config;
diff --git a/.storybook/preview.ts b/.storybook/preview.ts
@@ -1,5 +1,6 @@
 import type { Preview } from '@storybook/react'
 import '~/index.css'
+import 'uno.css'
 
 const preview: Preview = {
   parameters: {

diff --git a/src/stories/examples/Accordian.stories.tsx b/src/stories/examples/Accordian.stories.tsx
@@ -1,9 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
+  Accordion, AccordionContent, AccordionItem, AccordionTrigger,
 } from '@components/ui/accordion.tsx';
 
 const meta = {
@@ -20,30 +17,32 @@ type Story = StoryObj<typeof meta>
 
 const AccordionTemplate: Story = {
   render: ({ ...args }) => (
-    <main className="w-full">
-      <Accordion type="single" collapsible className="w-full">
-        <AccordionItem value="item-1">
-          <AccordionTrigger>Is it accessible?</AccordionTrigger>
-          <AccordionContent>
-            Yes. It adheres to the WAI-ARIA design pattern.
-          </AccordionContent>
-        </AccordionItem>
-        <AccordionItem value="item-2">
-          <AccordionTrigger>Is it styled?</AccordionTrigger>
-          <AccordionContent>
-            Yes. It comes with default styles that matches the other
-            components' aesthetic.
-          </AccordionContent>
-        </AccordionItem>
-        <AccordionItem value="item-3">
-          <AccordionTrigger>Is it animated?</AccordionTrigger>
-          <AccordionContent>
-            Yes. It's animated by default, but you can disable it if you
-            prefer.
-          </AccordionContent>
-        </AccordionItem>
-      </Accordion>
-    </main>
+    <Accordion
+      type="single"
+      collapsible
+      className="w-[300px]"
+    >
+      <AccordionItem value="item-1">
+        <AccordionTrigger>Is it accessible?</AccordionTrigger>
+        <AccordionContent>
+          Yes. It adheres to the WAI-ARIA design pattern.
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="item-2">
+        <AccordionTrigger>Is it styled?</AccordionTrigger>
+        <AccordionContent>
+          Yes. It comes with default styles that matches the other
+          components aesthetic.
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="item-3">
+        <AccordionTrigger>Is it animated?</AccordionTrigger>
+        <AccordionContent>
+          Yes. It's animated by default, but you can disable it if you
+          prefer.
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
   ),
 };