@dust-tt/sparkle 0.3.5 → 0.3.7

package/src/stories/Icon.stories.tsx

@@ -5,6 +5,7 @@ import { ChatBubbleBottomCenterTextIcon, Icon } from "../index_with_tw_base";
 const meta = {
   title: "Primitives/Icon",
   component: Icon,
+  tags: ["autodocs"],
 } satisfies Meta<typeof Icon>;
 
 export default meta;

package/src/stories/IconSet.stories.tsx

@@ -1,3 +1,4 @@
+import type { Meta, StoryObj } from "@storybook/react";
 import React from "react";
 
 import * as ActionIcons from "@sparkle/icons/actions";
@@ -11,9 +12,13 @@ type IconModule = {
   };
 };
 
-export default {
+const meta = {
   title: "Assets/Icons",
-};
+  tags: ["autodocs"],
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
 
 const gridStyle = {
   display: "grid",
@@ -29,56 +34,60 @@ const itemStyle = {
   width: "100%",
 };
 
-export const IconSet = () => (
-  <div style={gridStyle}>
-    {Object.entries(SolidIcons as IconModule).map(
-      ([iconName, IconComponent]) => {
-        const CurrentIcon = (
-          "default" in IconComponent ? IconComponent.default : IconComponent
-        ) as React.ComponentType<{ className?: string }>;
-        return (
-          <div key={iconName}>
-            <Icon
-              visual={CurrentIcon}
-              size="md"
-              className="s-text-foreground dark:s-text-foreground-night"
-            />
-            <div
-              style={itemStyle as React.CSSProperties}
-              className="s-text-sm s-text-foreground dark:s-text-foreground-night"
-            >
-              {iconName}
+export const IconSet: Story = {
+  render: () => (
+    <div style={gridStyle}>
+      {Object.entries(SolidIcons as IconModule).map(
+        ([iconName, IconComponent]) => {
+          const CurrentIcon = (
+            "default" in IconComponent ? IconComponent.default : IconComponent
+          ) as React.ComponentType<{ className?: string }>;
+          return (
+            <div key={iconName}>
+              <Icon
+                visual={CurrentIcon}
+                size="md"
+                className="s-text-foreground dark:s-text-foreground-night"
+              />
+              <div
+                style={itemStyle as React.CSSProperties}
+                className="s-text-sm s-text-foreground dark:s-text-foreground-night"
+              >
+                {iconName}
+              </div>
             </div>
-          </div>
-        );
-      }
-    )}
-  </div>
-);
+          );
+        }
+      )}
+    </div>
+  ),
+};
 
-export const ActionIconSet = () => (
-  <div style={gridStyle}>
-    {Object.entries(ActionIcons as IconModule).map(
-      ([iconName, IconComponent]) => {
-        const CurrentIcon = (
-          "default" in IconComponent ? IconComponent.default : IconComponent
-        ) as React.ComponentType<{ className?: string }>;
-        return (
-          <div key={iconName}>
-            <Icon
-              visual={CurrentIcon}
-              size="md"
-              className="s-text-foreground dark:s-text-foreground-night"
-            />
-            <div
-              style={itemStyle as React.CSSProperties}
-              className="s-text-sm s-text-foreground dark:s-text-foreground-night"
-            >
-              {iconName}
+export const ActionIconSet: Story = {
+  render: () => (
+    <div style={gridStyle}>
+      {Object.entries(ActionIcons as IconModule).map(
+        ([iconName, IconComponent]) => {
+          const CurrentIcon = (
+            "default" in IconComponent ? IconComponent.default : IconComponent
+          ) as React.ComponentType<{ className?: string }>;
+          return (
+            <div key={iconName}>
+              <Icon
+                visual={CurrentIcon}
+                size="md"
+                className="s-text-foreground dark:s-text-foreground-night"
+              />
+              <div
+                style={itemStyle as React.CSSProperties}
+                className="s-text-sm s-text-foreground dark:s-text-foreground-night"
+              >
+                {iconName}
+              </div>
             </div>
-          </div>
-        );
-      }
-    )}
-  </div>
-);
+          );
+        }
+      )}
+    </div>
+  ),
+};

package/src/stories/Input.stories.tsx

@@ -1,91 +1,180 @@
-import type { Meta } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react";
 import React from "react";
 
 import { Input } from "../index_with_tw_base";
 
+const MESSAGE_STATUSES = ["info", "default", "error"] as const;
+
 const meta = {
   title: "Primitives/Input",
   component: Input,
+  tags: ["autodocs"],
+  argTypes: {
+    placeholder: {
+      control: "text",
+      description: "Placeholder text for the input",
+    },
+    value: {
+      control: "text",
+      description: "Current value of the input",
+    },
+    label: {
+      control: "text",
+      description: "Optional label above the input",
+    },
+    message: {
+      control: "text",
+      description: "Helper or error message below the input",
+    },
+    messageStatus: {
+      options: MESSAGE_STATUSES,
+      control: { type: "select" },
+      description: "Status/color of the message",
+    },
+    disabled: {
+      control: "boolean",
+      description: "Whether the input is disabled",
+    },
+    isError: {
+      control: "boolean",
+      description: "Whether the input is in an error state",
+    },
+    type: {
+      control: "select",
+      options: ["text", "email", "password", "number", "tel", "url"],
+      description: "HTML input type",
+    },
+  },
 } satisfies Meta<typeof Input>;
 
 export default meta;
+type Story = StoryObj<typeof meta>;
 
-export const InputExample = () => (
-  <div className="s-flex s-flex-col s-gap-20">
-    <div className="s-grid s-grid-cols-3 s-gap-4">
-      <Input
-        placeholder="placeholder"
-        name="input"
-        message="Name must be unique"
-        messageStatus="info"
-      />
-      <Input
-        placeholder="placeholder"
-        name="input"
-        value="value"
-        message="errored because it's a very long message"
-        messageStatus="error"
-      />
-      <Input
-        placeholder="placeholder"
-        name="input"
-        value="value"
-        message="Default message"
-      />
-      <Input
-        placeholder="placeholder"
-        name="input"
-        value="value"
-        message="errored because it's a very long message"
-        messageStatus="error"
-      />
-      <Input
-        placeholder="placeholder"
-        name="input"
-        value="disabled"
-        disabled
-        messageStatus="error"
-      />
-    </div>
-    <div className="s-grid s-grid-cols-3 s-gap-4">
-      <Input placeholder="placeholder" name="input" />
-      <Input
-        placeholder="placeholder"
-        name="input"
-        value="value"
-        message="errored because it's a very long message"
-        messageStatus="error"
-      />
-      <Input
-        placeholder="placeholder"
-        name="input"
-        value="value"
-        message="Default message"
-      />
-      <Input
-        placeholder="placeholder"
-        name="input"
-        value="value"
-        message="errored because it's a very long message"
-        messageStatus="error"
-      />
-      <Input
-        placeholder="placeholder"
-        name="input"
-        value="test"
-        messageStatus="error"
-      />
-    </div>
-    <div className="s-grid s-grid-cols-3 s-gap-4">
-      <Input placeholder="placeholder" name="input" label="Firstname" isError />
-      <Input
-        placeholder="placeholder"
-        name="input"
-        label="Lastname"
-        message="Input your lastname"
-        messageStatus="info"
-        isError
-      />
+export const Playground: Story = {
+  args: {
+    placeholder: "Enter text...",
+    value: "",
+    label: "Input Label",
+    message: "This is a helper message",
+    messageStatus: "info",
+    disabled: false,
+    isError: false,
+    type: "text",
+  },
+};
+
+export const WithError: Story = {
+  args: {
+    placeholder: "Enter text...",
+    value: "Invalid value",
+    label: "Email",
+    message: "Please enter a valid email address",
+    messageStatus: "error",
+    isError: true,
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    placeholder: "Disabled input",
+    value: "Cannot edit",
+    label: "Disabled Field",
+    disabled: true,
+  },
+};
+
+export const WithInfoMessage: Story = {
+  args: {
+    placeholder: "Enter your name",
+    label: "Full Name",
+    message: "Name must be unique",
+    messageStatus: "info",
+  },
+};
+
+export const AllVariants: Story = {
+  render: () => (
+    <div className="s-flex s-flex-col s-gap-20">
+      <div className="s-grid s-grid-cols-3 s-gap-4">
+        <Input
+          placeholder="placeholder"
+          name="input"
+          message="Name must be unique"
+          messageStatus="info"
+        />
+        <Input
+          placeholder="placeholder"
+          name="input"
+          value="value"
+          message="errored because it's a very long message"
+          messageStatus="error"
+        />
+        <Input
+          placeholder="placeholder"
+          name="input"
+          value="value"
+          message="Default message"
+        />
+        <Input
+          placeholder="placeholder"
+          name="input"
+          value="value"
+          message="errored because it's a very long message"
+          messageStatus="error"
+        />
+        <Input
+          placeholder="placeholder"
+          name="input"
+          value="disabled"
+          disabled
+          messageStatus="error"
+        />
+      </div>
+      <div className="s-grid s-grid-cols-3 s-gap-4">
+        <Input placeholder="placeholder" name="input" />
+        <Input
+          placeholder="placeholder"
+          name="input"
+          value="value"
+          message="errored because it's a very long message"
+          messageStatus="error"
+        />
+        <Input
+          placeholder="placeholder"
+          name="input"
+          value="value"
+          message="Default message"
+        />
+        <Input
+          placeholder="placeholder"
+          name="input"
+          value="value"
+          message="errored because it's a very long message"
+          messageStatus="error"
+        />
+        <Input
+          placeholder="placeholder"
+          name="input"
+          value="test"
+          messageStatus="error"
+        />
+      </div>
+      <div className="s-grid s-grid-cols-3 s-gap-4">
+        <Input
+          placeholder="placeholder"
+          name="input"
+          label="Firstname"
+          isError
+        />
+        <Input
+          placeholder="placeholder"
+          name="input"
+          label="Lastname"
+          message="Input your lastname"
+          messageStatus="info"
+          isError
+        />
+      </div>
     </div>
-  </div>
-);
+  ),
+};

package/src/stories/Logo.stories.tsx

@@ -1,3 +1,4 @@
+import type { Meta, StoryObj } from "@storybook/react";
 import React from "react";
 
 import { Div3D, Hover3D } from "..";
@@ -14,9 +15,13 @@ import {
   DustLogoWhite,
 } from "../logo/dust";
 
-export default {
+const meta = {
   title: "Assets/DustLogo",
-};
+  tags: ["autodocs"],
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
 
 const gridStyle = {
   display: "grid",
@@ -32,83 +37,85 @@ const itemStyle = {
   width: "100%",
 };
 
-export const DustLogos = () => (
-  <>
-    <div style={gridStyle}>
-      <div className="s-p-6">
-        <DustLogo className="s-h-8 s-w-32" />
-        <div style={itemStyle as React.CSSProperties} className="s-text-sm">
-          DustLogo
+export const DustLogos: Story = {
+  render: () => (
+    <>
+      <div style={gridStyle}>
+        <div className="s-p-6">
+          <DustLogo className="s-h-8 s-w-32" />
+          <div style={itemStyle as React.CSSProperties} className="s-text-sm">
+            DustLogo
+          </div>
         </div>
-      </div>
-      <div className="s-p-6">
-        <DustLogoGray className="s-h-8 s-w-32" />
-        <div style={itemStyle as React.CSSProperties} className="s-text-sm">
-          DustLogoGray
+        <div className="s-p-6">
+          <DustLogoGray className="s-h-8 s-w-32" />
+          <div style={itemStyle as React.CSSProperties} className="s-text-sm">
+            DustLogoGray
+          </div>
         </div>
-      </div>
-      <div className="s-bg-primary-800 s-p-6">
-        <DustLogoWhite className="s-h-8 s-w-32" />
-        <div
-          style={itemStyle as React.CSSProperties}
-          className="s-text-sm s-text-white"
-        >
-          DustLogoWhite
+        <div className="s-bg-primary-800 s-p-6">
+          <DustLogoWhite className="s-h-8 s-w-32" />
+          <div
+            style={itemStyle as React.CSSProperties}
+            className="s-text-sm s-text-white"
+          >
+            DustLogoWhite
+          </div>
         </div>
       </div>
-    </div>
 
-    <div style={gridStyle}>
-      <div className="s-p-6">
-        <DustLogoSquare className="s-h-16 s-w-16" />
-        <div style={itemStyle as React.CSSProperties} className="s-text-sm">
-          DustLogoSquare
+      <div style={gridStyle}>
+        <div className="s-p-6">
+          <DustLogoSquare className="s-h-16 s-w-16" />
+          <div style={itemStyle as React.CSSProperties} className="s-text-sm">
+            DustLogoSquare
+          </div>
         </div>
-      </div>
-      <div className="s-p-6">
-        <DustLogoSquareGray className="s-h-16 s-w-16" />
-        <div style={itemStyle as React.CSSProperties} className="s-text-sm">
-          DustLogoSquareGray
+        <div className="s-p-6">
+          <DustLogoSquareGray className="s-h-16 s-w-16" />
+          <div style={itemStyle as React.CSSProperties} className="s-text-sm">
+            DustLogoSquareGray
+          </div>
         </div>
-      </div>
-      <div className="s-bg-primary-800 s-p-6">
-        <DustLogoSquareWhite className="s-h-16 s-w-16" />
-        <div
-          style={itemStyle as React.CSSProperties}
-          className="s-text-sm s-text-white"
-        >
-          DustLogoWhite
+        <div className="s-bg-primary-800 s-p-6">
+          <DustLogoSquareWhite className="s-h-16 s-w-16" />
+          <div
+            style={itemStyle as React.CSSProperties}
+            className="s-text-sm s-text-white"
+          >
+            DustLogoWhite
+          </div>
         </div>
       </div>
-    </div>
 
-    <div style={gridStyle}>
-      <div className="s-p-6">
-        <Hover3D className="s-relative s-h-8 s-w-32">
-          <Div3D depth={0} className="s-h-8 s-w-32">
-            <DustLogoLayer1 className="s-h-8 s-w-32" />
-          </Div3D>
-          <Div3D depth={25} className="s-absolute s-top-0">
-            <DustLogoLayer2 className="s-h-8 s-w-32" />
-          </Div3D>
-        </Hover3D>
-        <div style={itemStyle as React.CSSProperties} className="s-text-sm">
-          Horizontal Hover3D
+      <div style={gridStyle}>
+        <div className="s-p-6">
+          <Hover3D className="s-relative s-h-8 s-w-32">
+            <Div3D depth={0} className="s-h-8 s-w-32">
+              <DustLogoLayer1 className="s-h-8 s-w-32" />
+            </Div3D>
+            <Div3D depth={25} className="s-absolute s-top-0">
+              <DustLogoLayer2 className="s-h-8 s-w-32" />
+            </Div3D>
+          </Hover3D>
+          <div style={itemStyle as React.CSSProperties} className="s-text-sm">
+            Horizontal Hover3D
+          </div>
         </div>
-      </div>
-      <div className="s-p-6">
-        <Hover3D className="s-relative s-h-16 s-w-16">
-          <Div3D depth={0} className="s-h-16 s-w-16">
-            <DustLogoSquareLayer1 className="s-h-16 s-w-16" />
-          </Div3D>
-          <Div3D depth={25} className="s-absolute s-top-0">
-            <DustLogoSquareLayer2 className="s-h-16 s-w-16" />
-          </Div3D>
-        </Hover3D>
-        <div style={itemStyle as React.CSSProperties} className="s-text-sm">
-          Square Hover3D
+        <div className="s-p-6">
+          <Hover3D className="s-relative s-h-16 s-w-16">
+            <Div3D depth={0} className="s-h-16 s-w-16">
+              <DustLogoSquareLayer1 className="s-h-16 s-w-16" />
+            </Div3D>
+            <Div3D depth={25} className="s-absolute s-top-0">
+              <DustLogoSquareLayer2 className="s-h-16 s-w-16" />
+            </Div3D>
+          </Hover3D>
+          <div style={itemStyle as React.CSSProperties} className="s-text-sm">
+            Square Hover3D
+          </div>
         </div>
       </div>
-    </div>
-  </>
-);
+    </>
+  ),
+};

package/src/stories/Markdown.stories.tsx

@@ -3,9 +3,10 @@ import React from "react";
 
 import { Markdown } from "../index_with_tw_base";
 
-const meta: Meta<typeof Markdown> = {
+const meta = {
   title: "Components/Markdown",
   component: Markdown,
+  tags: ["autodocs"],
   decorators: [(Story) => <Story />],
   argTypes: {
     textColor: {
@@ -17,7 +18,7 @@ const meta: Meta<typeof Markdown> = {
       control: { type: "radio" },
     },
   },
-};
+} satisfies Meta<typeof Markdown>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;

package/src/stories/ScrollArea.stories.tsx

@@ -1,22 +1,26 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import React from "react";
 
-import { ScrollBar } from "@sparkle/components/ScrollArea";
-import { ScrollArea, Separator } from "@sparkle/index_with_tw_base";
+import { ScrollArea, ScrollBar } from "@sparkle/components/ScrollArea";
+import { Separator } from "@sparkle/components/Separator";
 
-const meta: Meta<typeof ScrollArea> = {
+const meta = {
   title: "Primitives/ScrollArea",
   component: ScrollArea,
-};
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof ScrollArea>;
 
 export default meta;
-type Story = StoryObj<typeof ScrollArea>;
+type Story = StoryObj<typeof meta>;
 
 const tags = Array.from({ length: 50 }).map(
   (_, i, a) => `v1.2.0-beta.${a.length - i}`
 );
 
-export const ScrollAreaDemo: Story = {
+export const ScrollAreaExample: Story = {
   render: () => (
     <div className="s-flex s-flex-row s-gap-6 s-bg-muted s-p-8">
       <div className="s-h-[400px]">