@dust-tt/sparkle 0.3.6 → 0.3.8

package/src/stories/Spinner.stories.tsx

@@ -3,103 +3,150 @@ import React from "react";
 
 import { Spinner } from "../index_with_tw_base";
 
+const SPINNER_SIZES = ["xs", "sm", "md", "lg", "xl", "2xl"] as const;
+const SPINNER_VARIANTS = ["mono", "color", "light", "dark", "rose300"] as const;
+
 const meta = {
   title: "Primitives/Spinner",
   component: Spinner,
+  tags: ["autodocs"],
+  argTypes: {
+    size: {
+      options: SPINNER_SIZES,
+      control: { type: "select" },
+      description: "Size of the spinner",
+    },
+    variant: {
+      options: SPINNER_VARIANTS,
+      control: { type: "select" },
+      description:
+        "Visual variant of the spinner (mono adapts to dark/light theme)",
+    },
+  },
 } satisfies Meta<typeof Spinner>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const SpinnerExample = () => {
-  return (
-    <div className="s-flex s-flex-col s-gap-4">
-      <div className="s-heading-base s-text-foreground dark:s-text-white">
-        Size = XS
-      </div>
-      <div className="s-flex s-gap-4">
-        <div className="s-p-20">
-          <Spinner variant="color" size="xs" />
-        </div>
-        <div className="s-p-20">
-          <Spinner variant="mono" size="xs" />
-        </div>
-        <div className="s-p-20">
-          <Spinner variant="rose300" size="xs" />
-        </div>
-      </div>
-      <div className="s-heading-base s-text-foreground dark:s-text-white">
-        Size = SM
-      </div>
-      <div className="s-flex s-gap-4">
-        <div className="s-p-20">
-          <Spinner variant="color" size="sm" />
-        </div>
-        <div className="s-p-20">
-          <Spinner variant="mono" size="sm" />
-        </div>
-        <div className="s-p-20">
-          <Spinner variant="rose300" size="sm" />
-        </div>
-      </div>
-      <div className="s-heading-base s-text-foreground dark:s-text-white">
-        Size = MD
-      </div>
-      <div className="s-flex s-gap-4">
-        <div className="s-p-20">
-          <Spinner variant="color" size="md" />
-        </div>
-        <div className="s-p-20">
-          <Spinner variant="mono" size="md" />
-        </div>
-        <div className="s-p-20">
-          <Spinner variant="rose300" size="md" />
-        </div>
-      </div>
-      <div className="s-heading-base s-text-foreground dark:s-text-white">
-        Size = LG
-      </div>
-      <div className="s-flex s-gap-4">
-        <div className="s-p-20">
-          <Spinner variant="color" size="lg" />
-        </div>
-        <div className="s-p-20">
-          <Spinner variant="mono" size="lg" />
-        </div>
-        <div className="s-p-20">
-          <Spinner variant="rose300" size="lg" />
-        </div>
-      </div>
-      <div className="s-heading-base s-text-foreground dark:s-text-white">
-        Size = XL
-      </div>
-      <div className="s-flex s-gap-4">
-        <div className="s-p-20">
-          <Spinner variant="color" size="xl" />
-        </div>
-        <div className="s-p-20">
-          <Spinner variant="mono" size="xl" />
-        </div>
-        <div className="s-p-20">
-          <Spinner variant="rose300" size="xl" />
-        </div>
-      </div>
-      <div className="s-heading-base s-text-foreground dark:s-text-white">
-        Size = XXL
-      </div>
-      <div className="s-flex s-gap-4">
-        <div className="s-p-20">
-          <Spinner variant="color" size="2xl" />
-        </div>
-        <div className="s-p-20">
-          <Spinner variant="mono" size="2xl" />
-        </div>
-        <div className="s-p-20">
-          <Spinner variant="rose300" size="2xl" />
+export const Playground: Story = {
+  args: {
+    size: "md",
+    variant: "color",
+  },
+};
+
+export const Small: Story = {
+  args: {
+    size: "sm",
+    variant: "color",
+  },
+};
+
+export const Large: Story = {
+  args: {
+    size: "lg",
+    variant: "color",
+  },
+};
+
+export const MonoVariant: Story = {
+  args: {
+    size: "md",
+    variant: "mono",
+  },
+};
+
+export const SpinnerExample: Story = {
+  render: () => {
+    return (
+      <div className="s-flex s-flex-col s-gap-4">
+        <div className="s-heading-base s-text-foreground dark:s-text-white">
+          Size = XS
+        </div>
+        <div className="s-flex s-gap-4">
+          <div className="s-p-20">
+            <Spinner variant="color" size="xs" />
+          </div>
+          <div className="s-p-20">
+            <Spinner variant="mono" size="xs" />
+          </div>
+          <div className="s-p-20">
+            <Spinner variant="rose300" size="xs" />
+          </div>
+        </div>
+        <div className="s-heading-base s-text-foreground dark:s-text-white">
+          Size = SM
+        </div>
+        <div className="s-flex s-gap-4">
+          <div className="s-p-20">
+            <Spinner variant="color" size="sm" />
+          </div>
+          <div className="s-p-20">
+            <Spinner variant="mono" size="sm" />
+          </div>
+          <div className="s-p-20">
+            <Spinner variant="rose300" size="sm" />
+          </div>
+        </div>
+        <div className="s-heading-base s-text-foreground dark:s-text-white">
+          Size = MD
+        </div>
+        <div className="s-flex s-gap-4">
+          <div className="s-p-20">
+            <Spinner variant="color" size="md" />
+          </div>
+          <div className="s-p-20">
+            <Spinner variant="mono" size="md" />
+          </div>
+          <div className="s-p-20">
+            <Spinner variant="rose300" size="md" />
+          </div>
+        </div>
+        <div className="s-heading-base s-text-foreground dark:s-text-white">
+          Size = LG
+        </div>
+        <div className="s-flex s-gap-4">
+          <div className="s-p-20">
+            <Spinner variant="color" size="lg" />
+          </div>
+          <div className="s-p-20">
+            <Spinner variant="mono" size="lg" />
+          </div>
+          <div className="s-p-20">
+            <Spinner variant="rose300" size="lg" />
+          </div>
+        </div>
+        <div className="s-heading-base s-text-foreground dark:s-text-white">
+          Size = XL
+        </div>
+        <div className="s-flex s-gap-4">
+          <div className="s-p-20">
+            <Spinner variant="color" size="xl" />
+          </div>
+          <div className="s-p-20">
+            <Spinner variant="mono" size="xl" />
+          </div>
+          <div className="s-p-20">
+            <Spinner variant="rose300" size="xl" />
+          </div>
+        </div>
+        <div className="s-heading-base s-text-foreground dark:s-text-white">
+          Size = XXL
+        </div>
+        <div className="s-flex s-gap-4">
+          <div className="s-p-20">
+            <Spinner variant="color" size="2xl" />
+          </div>
+          <div className="s-p-20">
+            <Spinner variant="mono" size="2xl" />
+          </div>
+          <div className="s-p-20">
+            <Spinner variant="rose300" size="2xl" />
+          </div>
         </div>
       </div>
-    </div>
-  );
+    );
+  },
 };
 
 export const BasicSpinner: Story = {

package/src/stories/Tabs.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react";
 import React from "react";
 
 import {
@@ -14,12 +14,15 @@ import {
 
 const meta = {
   title: "Components/Tabs",
-} satisfies Meta;
+  component: Tabs,
+  tags: ["autodocs"],
+} satisfies Meta<typeof Tabs>;
 
 export default meta;
+type Story = StoryObj<typeof meta>;
 
-export function Demo() {
-  return (
+export const Default: Story = {
+  render: () => (
     <div className="s-w-80">
       <Tabs defaultValue="account">
         <TabsList className="s-px-2">
@@ -37,11 +40,11 @@ export function Demo() {
         <TabsContent value="settings">Settings</TabsContent>
       </Tabs>
     </div>
-  );
-}
+  ),
+};
 
-export function Demo2() {
-  return (
+export const WithMultipleTabs: Story = {
+  render: () => (
     <div className="s-w-[100%]">
       <Tabs defaultValue="tab1">
         <TabsList className="s-px-2">
@@ -62,5 +65,5 @@ export function Demo2() {
         <TabsContent value="tab6">Content for Tab 6</TabsContent>
       </Tabs>
     </div>
-  );
-}
+  ),
+};