@dust-tt/sparkle 0.4.10 → 0.4.12-rc-1

package/src/stories/ButtonGroup.stories.tsx

@@ -6,23 +6,27 @@ import {
   BUTTON_VARIANTS,
   type ButtonVariantType,
 } from "@sparkle/components/Button";
-import type { ButtonGroupVariantType } from "@sparkle/components/ButtonGroup";
+import type {
+  ButtonGroupItem,
+  ButtonGroupVariantType,
+} from "@sparkle/components/ButtonGroup";
 
 import {
-  Button,
+  ArrowPathIcon,
   ButtonGroup,
+  ChevronDownIcon,
+  ClipboardIcon,
   PlusIcon,
   RobotIcon,
   Separator,
+  TrashIcon,
 } from "../index_with_tw_base";
 
-const DEFAULT_CHILDREN = (
-  <>
-    <Button label="First" />
-    <Button label="Second" />
-    <Button label="Third" />
-  </>
-);
+const DEFAULT_ITEMS: ButtonGroupItem[] = [
+  { type: "button", props: { label: "First" } },
+  { type: "button", props: { label: "Second" } },
+  { type: "button", props: { label: "Third" } },
+];
 
 const DISALLOWED_GROUP_VARIANTS: ButtonVariantType[] = [
   "ghost",
@@ -41,12 +45,12 @@ const meta = {
   tags: ["autodocs"],
   argTypes: {
     variant: {
-      description: "Variant applied to every child button",
+      description: "Variant applied to every button",
       control: { type: "select" },
       options: BUTTON_GROUP_VARIANTS,
     },
     size: {
-      description: "Size applied to every child button",
+      description: "Size applied to every button",
       control: { type: "select" },
       options: BUTTON_SIZES.filter((size) => size !== "mini"),
     },
@@ -63,12 +67,12 @@ const meta = {
       description: "Remove gaps and merge button borders",
       control: "boolean",
     },
-    children: {
+    items: {
       table: { disable: true },
     },
   },
   args: {
-    children: DEFAULT_CHILDREN,
+    items: DEFAULT_ITEMS,
     variant: "outline",
     size: "sm",
     orientation: "horizontal",
@@ -85,55 +89,58 @@ type Story = StoryObj<typeof meta>;
 export const Playground: Story = {};
 
 export const WithIcons: Story = {
-  render: () => (
-    <ButtonGroup variant="outline" size="sm">
-      <Button icon={PlusIcon} label="Add" />
-      <Button icon={RobotIcon} label="Agent" />
-      <Button label="More" />
-    </ButtonGroup>
-  ),
+  args: {
+    items: [
+      { type: "button", props: { icon: PlusIcon, label: "Add" } },
+      { type: "button", props: { icon: RobotIcon, label: "Agent" } },
+      { type: "button", props: { label: "More" } },
+    ],
+  },
 };
 
 export const WithCounters: Story = {
-  render: () => (
-    <ButtonGroup variant="outline" size="sm">
-      <Button label="Inbox" isCounter counterValue="5" />
-      <Button label="Sent" isCounter counterValue="12" />
-      <Button label="Drafts" isCounter counterValue="3" />
-    </ButtonGroup>
-  ),
+  args: {
+    items: [
+      {
+        type: "button",
+        props: { label: "Inbox", isCounter: true, counterValue: "5" },
+      },
+      {
+        type: "button",
+        props: { label: "Sent", isCounter: true, counterValue: "12" },
+      },
+      {
+        type: "button",
+        props: { label: "Drafts", isCounter: true, counterValue: "3" },
+      },
+    ],
+  },
 };
 
 export const Vertical: Story = {
-  render: () => (
-    <ButtonGroup variant="outline" size="sm" orientation="vertical">
-      <Button label="First" />
-      <Button label="Second" />
-      <Button label="Third" />
-    </ButtonGroup>
-  ),
+  args: {
+    orientation: "vertical",
+  },
 };
 
 export const Disabled: Story = {
-  render: () => (
-    <ButtonGroup variant="outline" size="sm" disabled>
-      <Button label="First" />
-      <Button label="Second" />
-      <Button label="Third" />
-    </ButtonGroup>
-  ),
+  args: {
+    disabled: true,
+  },
 };
 
 export const WithGaps: Story = {
-  render: () => (
-    <ButtonGroup variant="outline" size="sm" removeGaps={false}>
-      <Button label="First" />
-      <Button label="Second" />
-      <Button label="Third" />
-    </ButtonGroup>
-  ),
+  args: {
+    removeGaps: false,
+  },
 };
 
+const VARIANT_ITEMS: ButtonGroupItem[] = [
+  { type: "button", props: { label: "One" } },
+  { type: "button", props: { label: "Two" } },
+  { type: "button", props: { label: "Three" } },
+];
+
 const ButtonGroupByVariant = ({
   variant,
 }: {
@@ -143,21 +150,9 @@ const ButtonGroupByVariant = ({
     <Separator />
     <h3 className="s-text-primary dark:s-text-primary-50">{variant}</h3>
     <div className="s-flex s-items-center s-gap-4">
-      <ButtonGroup variant={variant} size="xs">
-        <Button label="One" />
-        <Button label="Two" />
-        <Button label="Three" />
-      </ButtonGroup>
-      <ButtonGroup variant={variant} size="sm">
-        <Button label="One" />
-        <Button label="Two" />
-        <Button label="Three" />
-      </ButtonGroup>
-      <ButtonGroup variant={variant} size="md">
-        <Button label="One" />
-        <Button label="Two" />
-        <Button label="Three" />
-      </ButtonGroup>
+      <ButtonGroup variant={variant} size="xs" items={VARIANT_ITEMS} />
+      <ButtonGroup variant={variant} size="sm" items={VARIANT_ITEMS} />
+      <ButtonGroup variant={variant} size="md" items={VARIANT_ITEMS} />
     </div>
   </>
 );
@@ -172,3 +167,107 @@ export const Gallery: Story = {
     </div>
   ),
 };
+
+export const WithDropdownMenu: Story = {
+  render: () => (
+    <div className="s-flex s-flex-col s-gap-4">
+      <div>
+        <h3 className="s-mb-2 s-text-sm s-font-medium">
+          Split button with dropdown
+        </h3>
+        <ButtonGroup
+          variant="outline"
+          items={[
+            {
+              type: "button",
+              props: {
+                icon: ClipboardIcon,
+                tooltip: "Copy to clipboard",
+                variant: "ghost-secondary",
+                size: "xs",
+              },
+            },
+            {
+              type: "dropdown",
+              triggerProps: {
+                variant: "ghost-secondary",
+                size: "xs",
+                icon: ChevronDownIcon,
+              },
+              dropdownProps: {
+                items: [
+                  { label: "Retry", icon: ArrowPathIcon },
+                  { label: "Delete", icon: TrashIcon, variant: "warning" },
+                ],
+              },
+            },
+          ]}
+        />
+      </div>
+
+      <div>
+        <h3 className="s-mb-2 s-text-sm s-font-medium">Multiple variations</h3>
+        <div className="s-flex s-flex-wrap s-gap-4">
+          <ButtonGroup
+            variant="outline"
+            items={[
+              { type: "button", props: { label: "Copy", size: "sm" } },
+              {
+                type: "dropdown",
+                triggerProps: { size: "sm", icon: ChevronDownIcon },
+                dropdownProps: {
+                  items: [
+                    { label: "Option 1" },
+                    { label: "Option 2" },
+                    { label: "Option 3" },
+                  ],
+                },
+              },
+            ]}
+          />
+
+          <ButtonGroup
+            variant="primary"
+            items={[
+              { type: "button", props: { label: "Save", size: "sm" } },
+              {
+                type: "dropdown",
+                triggerProps: { size: "sm", icon: ChevronDownIcon },
+                dropdownProps: {
+                  items: [
+                    { label: "Save and close" },
+                    { label: "Save as draft" },
+                  ],
+                },
+              },
+            ]}
+          />
+
+          <ButtonGroup
+            variant="outline"
+            items={[
+              {
+                type: "button",
+                props: { icon: PlusIcon, label: "Add", size: "sm" },
+              },
+              {
+                type: "button",
+                props: { icon: RobotIcon, label: "Agent", size: "sm" },
+              },
+              {
+                type: "dropdown",
+                triggerProps: { size: "sm", icon: ChevronDownIcon },
+                dropdownProps: {
+                  items: [
+                    { label: "More options", icon: PlusIcon },
+                    { label: "Settings" },
+                  ],
+                },
+              },
+            ]}
+          />
+        </div>
+      </div>
+    </div>
+  ),
+};

package/src/stories/Markdown.stories.tsx

@@ -112,10 +112,30 @@ footnote [^1]
 
 
 
-### Some lateX
+### Some LaTeX
 
 $$ \\sigma(z_i) = \\frac{e^{z_{i}}}{\\sum_{j=1}^K e^{z_{j}}} \\ \\ \\ for\\ i=1,2,\\dots,K $$
 
+### Some inline LaTeX
+
+**Example**: Linear attention is a 2-level optimization:
+- Inner level: Memory matrix $\\mathcal{M}_t = \\mathcal{M}_{t-1} + \\mathbf{v}_t \\mathbf{k}_t^\\top$ (updates every token)
+- Outer level: Projection matrices $W_k, W_v, W_q$ (updates during pre-training)
+
+Even **optimizers** are associative memories. Momentum with gradient descent is 2-level:
+- Momentum $\\mathbf{m}_t$ compresses past gradients
+- Weights $W_t$ are updated by momentum
+
+The result is $a=2+t$
+
+### Some text with dollars signs:
+
+One want to import $USER_WORKSPACE but it will cost them $3.5 or $100 $1000
+
+-> The EF for this code is 0.49059 kgCO2e per $ (2018 USD).
+-> This code is 0.54895 kgCO2e per $ (2018 USD) more.
+-> This thing is $5-$10 range.
+
 ### This is a CSV:
 
 \`\`\`csv