@dust-tt/sparkle 0.2.183 → 0.2.184

package/src/stories/CardButton.stories.tsx

@@ -0,0 +1,110 @@
+import type { Meta } from "@storybook/react";
+import React, { ComponentType } from "react";
+
+import {
+  BookOpenStrokeIcon,
+  BracesStrokeIcon,
+  CardButton,
+  CommandLineStrokeIcon,
+  Icon,
+  IconButton,
+  MagnifyingGlassStrokeIcon,
+  PlanetStrokeIcon,
+  ScanStrokeIcon,
+  TableStrokeIcon,
+  XMarkIcon,
+} from "../index_with_tw_base";
+
+const meta = {
+  title: "Primitives/CardButton",
+  component: CardButton,
+} satisfies Meta<typeof CardButton>;
+
+export default meta;
+
+export const SimpleExample = () => (
+  <div className="s-flex s-flex-col s-gap-8">
+    <div className="s-flex s-gap-2">
+      <CardButton>hello</CardButton>
+      <CardButton variant="secondary">hello</CardButton>
+      <CardButton variant="tertiary">hello</CardButton>
+    </div>
+  </div>
+);
+
+interface CardData {
+  icon: ComponentType<{ className?: string }>;
+  title: string;
+  description: string;
+}
+
+const cardData: CardData[] = [
+  {
+    icon: MagnifyingGlassStrokeIcon,
+    title: "Search",
+    description: "Architecture Projects Descriptions",
+  },
+  {
+    icon: TableStrokeIcon,
+    title: "Table Query",
+    description: "Find product references",
+  },
+  {
+    icon: PlanetStrokeIcon,
+    title: "Web",
+    description: "Search & browse the web",
+  },
+  {
+    icon: BracesStrokeIcon,
+    title: "Code Interpreter",
+    description: "Write a description for it",
+  },
+  {
+    icon: CommandLineStrokeIcon,
+    title: "Dust App",
+    description: "Dust App Name",
+  },
+  {
+    icon: BookOpenStrokeIcon,
+    title: "Include",
+    description: "Description of the Data",
+  },
+  {
+    icon: ScanStrokeIcon,
+    title: "Extract Data",
+    description: "Description of the Data",
+  },
+];
+
+export const ActionCard: React.FC = () => (
+  <div className="s-grid s-grid-cols-3 s-gap-3">
+    {cardData.map((card, index) => (
+      <CardButton
+        key={index}
+        variant="secondary"
+        onClick={() => {
+          alert(`You clicked on ${card.title}`);
+        }}
+      >
+        <div className="s-flex s-w-full s-flex-col s-gap-2 s-text-sm">
+          <div className="s-flex s-w-full s-gap-1 s-font-medium s-text-element-900">
+            <Icon visual={card.icon} size="sm" className="s-text-element-900" />
+            <div className="s-w-full">{card.title}</div>
+            <IconButton
+              icon={XMarkIcon}
+              variant="tertiary"
+              size="sm"
+              onClick={(e) => {
+                alert(`You clicked on close button of ${card.title}`);
+                e.stopPropagation();
+              }}
+            />
+          </div>
+          <div className="s-w-full s-truncate s-text-base s-text-element-700">
+            {card.description}
+          </div>
+        </div>
+      </CardButton>
+    ))}
+  </div>
+);

package/src/stories/Checkbox.stories.tsx

@@ -0,0 +1,46 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Checkbox } from "../index_with_tw_base";
+
+const meta = {
+  title: "Primitives/Checkbox",
+  component: Checkbox,
+} satisfies Meta<typeof Checkbox>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Selectable: Story = {
+  args: {
+    checked: true,
+    variant: "selectable",
+  },
+};
+
+export const Checked: Story = {
+  args: {
+    checked: true,
+    variant: "checkable",
+  },
+};
+
+export const Unchecked: Story = {
+  args: {
+    checked: false,
+  },
+};
+
+export const PartialChecked: Story = {
+  args: {
+    checked: false,
+    partialChecked: true,
+    variant: "checkable",
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    checked: true,
+    disabled: true,
+  },
+};

package/src/stories/Chip.stories.tsx

@@ -0,0 +1,87 @@
+import type { Meta } from "@storybook/react";
+import React from "react";
+
+import { Chip, UserGroupIcon } from "../index_with_tw_base";
+
+const meta = {
+  title: "Primitives/Chip",
+  component: Chip,
+} satisfies Meta<typeof Chip>;
+
+export default meta;
+
+const colors = [
+  "emerald",
+  "amber",
+  "slate",
+  "purple",
+  "warning",
+  "sky",
+  "pink",
+  "action",
+  "red",
+] as const;
+
+export const ListChipsExample = () => (
+  <div className="s-flex s-flex-col s-gap-4">
+    <Chip.List>
+      {colors.map((color) => (
+        <Chip key={`xs-${color}`} size="xs" label={color} color={color} />
+      ))}
+    </Chip.List>
+    <Chip.List>
+      {colors.map((color) => (
+        <Chip key={`sm-${color}`} size="sm" label={color} color={color} />
+      ))}
+    </Chip.List>
+    <div className="s-w-60">
+      <Chip.List isWrapping={true}>
+        {colors.map((color) => (
+          <Chip
+            key={`xs-${color}`}
+            size="xs"
+            label={color}
+            color={color}
+            icon={UserGroupIcon}
+          />
+        ))}
+      </Chip.List>
+    </div>
+    <div className="s-w-60">
+      <Chip.List isWrapping={true}>
+        {colors.map((color) => (
+          <Chip
+            key={`xs-${color}`}
+            size="sm"
+            label={color}
+            color={color}
+            icon={UserGroupIcon}
+          />
+        ))}
+      </Chip.List>
+    </div>
+    isBusy
+    <Chip.List>
+      {colors.map((color) => (
+        <Chip
+          key={`xs-${color}`}
+          size="xs"
+          label={color}
+          color={color}
+          isBusy
+        />
+      ))}
+    </Chip.List>
+    <Chip.List>
+      {colors.map((color) => (
+        <Chip
+          key={`sm-${color}`}
+          size="sm"
+          label={color}
+          color={color}
+          isBusy
+        />
+      ))}
+    </Chip.List>
+  </div>
+);

package/src/stories/Citation.stories.tsx

@@ -0,0 +1,212 @@
+import type { Meta } from "@storybook/react";
+import React from "react";
+
+import { ZoomableImageCitationWrapper } from "@sparkle/components/ZoomableImageCitationWrapper";
+
+import { Citation } from "../index_with_tw_base";
+
+const meta = {
+  title: "Components/Citation",
+  component: Citation,
+} satisfies Meta<typeof Citation>;
+
+export default meta;
+
+export const CitationsExample = () => (
+  <div className="s-flex s-flex-col s-gap-8">
+    <h2>Size XS</h2>
+    <h3>In Flex</h3>
+    <div className="s-flex s-gap-2">
+      <Citation
+        title="With close action"
+        size="xs"
+        type="document"
+        index="3"
+        onClose={() => alert("Close action clicked")}
+        isBlinking={true}
+      />
+      <Citation
+        title="With imgSrc"
+        size="xs"
+        type="document"
+        onClose={() => alert("Close action clicked")}
+        isBlinking={true}
+        avatarSrc="https://dust.tt/static/droidavatar/Droid_Black_4.jpg"
+      />
+      <Citation
+        title="With imgSrc"
+        size="xs"
+        type="image"
+        onClose={() => alert("Close action clicked")}
+        isBlinking={true}
+        imgSrc="https://dust.tt/static/droidavatar/Droid_Black_4.jpg"
+      />
+      <Citation
+        title="Loading state"
+        size="xs"
+        type="image"
+        onClose={() => alert("Close action clicked")}
+        isLoading={true}
+      />
+      <div>
+        <Citation
+          title=""
+          size="xs"
+          type="image"
+          imgSrc="https://dust.tt/static/droidavatar/Droid_Black_4.jpg"
+        />
+      </div>
+    </div>
+    <h3>In Grid</h3>
+    <div className="s-w-full">
+      <div className="s-grid s-grid-cols-2 s-items-stretch s-gap-2 md:s-grid-cols-3 lg:s-grid-cols-4">
+        <Citation
+          title="Source: Thread on #general message from @ed"
+          size="xs"
+          sizing="fluid"
+          type="slack"
+          index="1"
+          href="https://www.google.com"
+        />
+        <Citation
+          title="Title"
+          type="github"
+          size="xs"
+          sizing="fluid"
+          index="2"
+          href="https://www.google.com"
+        />
+        <Citation
+          title="Source: Thread on #general message from @ed"
+          size="xs"
+          sizing="fluid"
+          type="slack"
+          index="1"
+          href="https://www.google.com"
+        />
+        <Citation
+          title="Title"
+          type="github"
+          size="xs"
+          sizing="fluid"
+          index="2"
+          href="https://www.google.com"
+        />
+        <Citation
+          title="Source: Thread on #general message from @ed"
+          size="xs"
+          sizing="fluid"
+          type="slack"
+          index="1"
+          href="https://www.google.com"
+        />
+        <Citation
+          title="Title"
+          type="github"
+          sizing="fluid"
+          size="xs"
+          index="2"
+          href="https://www.google.com"
+        />
+      </div>
+    </div>
+    <div className="s-flex s-gap-2">
+      <Citation
+        title="Source: Thread on #general message from @ed"
+        size="xs"
+        type="slack"
+        index="1"
+        href="https://www.google.com"
+      />
+      <Citation
+        title="Title"
+        type="github"
+        size="xs"
+        index="2"
+        href="https://www.google.com"
+      />
+    </div>
+    <h2>Size SM</h2>
+    <div className="s-flex s-gap-2">
+      <Citation
+        title="Title"
+        type="google_drive"
+        index="3"
+        href="https://www.google.com"
+        description="Write a 120 character description of the citation here to be displayed in the citation list."
+        isBlinking={true}
+      />
+      <Citation
+        title="Awesome article"
+        type="intercom"
+        index="3"
+        href="https://www.google.com"
+        description="Write a 120 character description of the citation here to be displayed in the citation list."
+        isBlinking={false}
+      />
+    </div>
+    <div className="s-flex s-gap-2">
+      <Citation
+        title="With close action"
+        type="document"
+        index="3"
+        onClose={() => alert("Close action clicked")}
+        description="Write a 120 character description of the citation here to be displayed in the citation list."
+        isBlinking={true}
+      />
+
+      <Citation
+        title="With imgSrc"
+        type="document"
+        onClose={() => alert("Close action clicked")}
+        description="Write a 120 character description of the citation here to be displayed in the citation list."
+        isBlinking={true}
+        imgSrc="https://cdn.discordapp.com/attachments/995248824375316560/1143857310142316685/duncid_friendly_Scandinavian_droid_designed_by_Wes_Anderson_and_29eec588-b898-4e4a-9776-10c27790cbf9.png"
+      />
+    </div>
+    <div className="s-flex s-gap-2">
+      <Citation
+        title="Source: Thread on #general message from @ed"
+        type="slack"
+        index="1"
+        href="https://www.google.com"
+        description="Write a 120 character description of the citation here to be displayed in the citation list."
+      />
+      <Citation
+        title="Title"
+        type="github"
+        index="2"
+        href="https://www.google.com"
+        description="Write a 120 character description of the citation here to be displayed in the citation list."
+      />
+    </div>
+    <div className="s-flex s-gap-2">
+      <Citation
+        title="Title"
+        type="google_drive"
+        index="3"
+        href="https://www.google.com"
+        description="Write a 120 character description of the citation here to be displayed in the citation list."
+        isBlinking={true}
+      />
+      <Citation
+        title="Awesome article"
+        type="intercom"
+        index="3"
+        href="https://www.google.com"
+        description="Write a 120 character description of the citation here to be displayed in the citation list."
+        isBlinking={false}
+      />
+    </div>
+    <h2>With zoom effect</h2>
+    <div className="s-flex s-gap-2">
+      <ZoomableImageCitationWrapper
+        size="sm"
+        title="With imgSrc"
+        // size="xs"
+        imgSrc="https://dust.tt/static/droidavatar/Droid_Black_4.jpg"
+        alt="A nice image."
+      />
+    </div>
+  </div>
+);

package/src/stories/CollapseButton.stories.tsx

@@ -0,0 +1,20 @@
+import type { Meta } from "@storybook/react";
+import React from "react";
+
+import { CollapseButton } from "../index_with_tw_base";
+
+const meta = {
+  title: "Primitives/CollapseButton",
+  component: CollapseButton,
+} satisfies Meta<typeof CollapseButton>;
+
+export default meta;
+
+export const CollapseExample = () => {
+  return (
+    <div className="s-flex s-flex-col s-gap-4">
+      <CollapseButton direction="left" />
+      <CollapseButton direction="right" />
+    </div>
+  );
+};

package/src/stories/Collapsible.stories.tsx

@@ -0,0 +1,61 @@
+import type { Meta } from "@storybook/react";
+import React from "react";
+
+import { Chip, Collapsible } from "../index_with_tw_base";
+
+const meta = {
+  title: "Primitives/Collapsible",
+  component: Collapsible,
+} satisfies Meta<typeof Collapsible>;
+
+export default meta;
+
+export const CollapsibleExample = () => (
+  <div>
+    <Collapsible>
+      <Collapsible.Button label="Click me" />
+      <Collapsible.Panel>
+        <div className="s-flex s-h-16 s-w-full s-items-center s-justify-center s-bg-slate-200">
+          Hello
+        </div>
+      </Collapsible.Panel>
+    </Collapsible>
+
+    <Collapsible>
+      <Collapsible.Button label="Click me" />
+      <Collapsible.Panel>
+        <div className="s-flex s-h-16 s-w-full s-items-center s-justify-center s-bg-slate-200">
+          Hello
+        </div>
+      </Collapsible.Panel>
+    </Collapsible>
+    <Collapsible>
+      <Collapsible.Button label="Click me" />
+      <Collapsible.Panel>
+        <div className="s-flex s-h-16 s-w-full s-items-center s-justify-center s-bg-slate-200">
+          Hello
+        </div>
+      </Collapsible.Panel>
+    </Collapsible>
+    <Collapsible>
+      <Collapsible.Button>
+        <Chip>Click me custom</Chip>
+      </Collapsible.Button>
+      <Collapsible.Panel>
+        <div className="mt-1 s-flex s-h-16 s-w-full s-items-center s-justify-center s-bg-slate-200">
+          Anything goes for the Collapsible button
+        </div>
+      </Collapsible.Panel>
+    </Collapsible>
+    <Collapsible defaultOpen={true}>
+      <Collapsible.Button>
+        <Chip>Click me custom</Chip>
+      </Collapsible.Button>
+      <Collapsible.Panel>
+        <div className="mt-1 s-flex s-h-16 s-w-full s-items-center s-justify-center s-bg-slate-200">
+          This one is open by default
+        </div>
+      </Collapsible.Panel>
+    </Collapsible>
+  </div>
+);