@dust-tt/sparkle 0.2.182 → 0.2.184

package/src/stories/ColorPicker.stories.tsx

@@ -0,0 +1,177 @@
+import type { Meta } from "@storybook/react";
+import React from "react";
+
+import { ColorPicker } from "../index_with_tw_base";
+
+const meta = {
+  title: "Components/ColorPicker",
+  component: ColorPicker,
+} satisfies Meta<typeof ColorPicker>;
+
+export default meta;
+
+const colors = [
+  "bg-amber-100",
+  "bg-amber-200",
+  "bg-amber-300",
+  "bg-amber-400",
+  "bg-amber-500",
+  "bg-amber-600",
+  "bg-amber-700",
+  "bg-amber-800",
+  "bg-blue-100",
+  "bg-blue-200",
+  "bg-blue-300",
+  "bg-blue-400",
+  "bg-blue-500",
+  "bg-blue-600",
+  "bg-blue-700",
+  "bg-blue-800",
+  "bg-cyan-100",
+  "bg-cyan-200",
+  "bg-cyan-300",
+  "bg-cyan-400",
+  "bg-cyan-500",
+  "bg-cyan-600",
+  "bg-cyan-700",
+  "bg-cyan-800",
+  "bg-emerald-100",
+  "bg-emerald-200",
+  "bg-emerald-300",
+  "bg-emerald-400",
+  "bg-emerald-500",
+  "bg-emerald-600",
+  "bg-emerald-700",
+  "bg-emerald-800",
+  "bg-fuchsia-100",
+  "bg-fuchsia-200",
+  "bg-fuchsia-300",
+  "bg-fuchsia-400",
+  "bg-fuchsia-500",
+  "bg-fuchsia-600",
+  "bg-fuchsia-700",
+  "bg-fuchsia-800",
+  "bg-gray-100",
+  "bg-gray-200",
+  "bg-gray-300",
+  "bg-gray-400",
+  "bg-gray-500",
+  "bg-gray-600",
+  "bg-gray-700",
+  "bg-gray-800",
+  "bg-green-100",
+  "bg-green-200",
+  "bg-green-300",
+  "bg-green-400",
+  "bg-green-500",
+  "bg-green-600",
+  "bg-green-700",
+  "bg-green-800",
+  "bg-indigo-100",
+  "bg-indigo-200",
+  "bg-indigo-300",
+  "bg-indigo-400",
+  "bg-indigo-500",
+  "bg-indigo-600",
+  "bg-indigo-700",
+  "bg-indigo-800",
+  "bg-lime-100",
+  "bg-lime-200",
+  "bg-lime-300",
+  "bg-lime-400",
+  "bg-lime-500",
+  "bg-lime-600",
+  "bg-lime-700",
+  "bg-lime-800",
+  "bg-orange-100",
+  "bg-orange-200",
+  "bg-orange-300",
+  "bg-orange-400",
+  "bg-orange-500",
+  "bg-orange-600",
+  "bg-orange-700",
+  "bg-orange-800",
+  "bg-pink-100",
+  "bg-pink-200",
+  "bg-pink-300",
+  "bg-pink-400",
+  "bg-pink-500",
+  "bg-pink-600",
+  "bg-pink-700",
+  "bg-pink-800",
+  "bg-purple-100",
+  "bg-purple-200",
+  "bg-purple-300",
+  "bg-purple-400",
+  "bg-purple-500",
+  "bg-purple-600",
+  "bg-purple-700",
+  "bg-purple-800",
+  "bg-red-100",
+  "bg-red-200",
+  "bg-red-300",
+  "bg-red-400",
+  "bg-red-500",
+  "bg-red-600",
+  "bg-red-700",
+  "bg-red-800",
+  "bg-rose-100",
+  "bg-rose-200",
+  "bg-rose-300",
+  "bg-rose-400",
+  "bg-rose-500",
+  "bg-rose-600",
+  "bg-rose-700",
+  "bg-rose-800",
+  "bg-sky-100",
+  "bg-sky-200",
+  "bg-sky-300",
+  "bg-sky-400",
+  "bg-sky-500",
+  "bg-sky-600",
+  "bg-sky-700",
+  "bg-sky-800",
+  "bg-stone-100",
+  "bg-stone-200",
+  "bg-stone-300",
+  "bg-stone-400",
+  "bg-stone-500",
+  "bg-stone-600",
+  "bg-stone-700",
+  "bg-stone-800",
+  "bg-teal-100",
+  "bg-teal-200",
+  "bg-teal-300",
+  "bg-teal-400",
+  "bg-teal-500",
+  "bg-teal-600",
+  "bg-teal-700",
+  "bg-teal-800",
+  "bg-violet-100",
+  "bg-violet-200",
+  "bg-violet-300",
+  "bg-violet-400",
+  "bg-violet-500",
+  "bg-violet-600",
+  "bg-violet-700",
+  "bg-violet-800",
+  "bg-yellow-100",
+  "bg-yellow-200",
+  "bg-yellow-300",
+  "bg-yellow-400",
+  "bg-yellow-500",
+  "bg-yellow-600",
+  "bg-yellow-700",
+  "bg-yellow-800",
+];
+
+export const ColorPickerExample = () => (
+  <div className="s-mt-14 s-flex s-flex-col s-items-center s-gap-6">
+    <ColorPicker
+      colors={colors}
+      onColorSelect={(color) => {
+        console.log(">> colorSelected:", color);
+      }}
+    />
+  </div>
+);

package/src/stories/ConfettiBackground.stories.tsx

@@ -0,0 +1,28 @@
+import type { Meta } from "@storybook/react";
+import React, { useRef } from "react";
+
+import { ConfettiBackground } from "@sparkle/index";
+
+const meta = {
+  title: "Components/ConfettiBackground",
+  component: ConfettiBackground,
+} satisfies Meta<typeof ConfettiBackground>;
+
+export default meta;
+
+export const ConfettiExample = () => {
+  const referentRef = useRef<HTMLDivElement>(null);
+  return (
+    <div className="s-h-[100vh] s-w-full" ref={referentRef}>
+      <ConfettiBackground variant="confetti" referentSize={referentRef} />
+    </div>
+  );
+};
+export const SnowExample = () => {
+  const referentRef = useRef<HTMLDivElement>(null);
+  return (
+    <div className="s-h-[100vh] s-w-full" ref={referentRef}>
+      <ConfettiBackground variant="snow" referentSize={referentRef} />
+    </div>
+  );
+};

package/src/stories/ContentMessage.stories.tsx

@@ -0,0 +1,58 @@
+import type { Meta } from "@storybook/react";
+import React from "react";
+
+import { ContentMessage } from "../index_with_tw_base";
+
+const meta = {
+  title: "Components/ContentMessage",
+  component: ContentMessage,
+} satisfies Meta<typeof ContentMessage>;
+
+export default meta;
+
+export const ContentExample = () => (
+  <div className="s-flex s-flex-col s-gap-4">
+    <h2>Size "md"</h2>
+    <ContentMessage title="This is a title">
+      This is a message. It can be multiple lines long.
+    </ContentMessage>
+    <ContentMessage title="This is a title" variant="pink">
+      This is a message. It can be multiple lines long.
+    </ContentMessage>
+    <ContentMessage title="This is a title" variant="emerald">
+      This is a message. It can be multiple lines long.
+    </ContentMessage>
+    <h2>Size "sm"</h2>
+    <ContentMessage title="This is a title" size="sm">
+      This is a message. It can be multiple lines long.
+    </ContentMessage>
+    <ContentMessage title="This is a title" variant="pink" size="sm">
+      This is a message. It can be multiple lines long.
+    </ContentMessage>
+    <ContentMessage title="This is a title" variant="emerald" size="sm">
+      This is a message. It can be multiple lines long.
+    </ContentMessage>
+  </div>
+);
+
+export const ContentExampleMultiLine = () => (
+  <div className="s-flex s-flex-col s-gap-4">
+    <ContentMessage title="This is a title">
+      <div className="s-flex s-flex-col s-gap-y-3">
+        <div>This is a message. It can be multiple lines long.</div>
+        <div>
+          Another paragraph in the content message with al long line and some{" "}
+          <strong>strong text</strong>.
+        </div>
+      </div>
+    </ContentMessage>
+  </div>
+);
+
+export const ContentExamplePink = () => (
+  <div className="s-flex s-flex-col s-gap-4">
+    <ContentMessage title="This is a title" variant="pink">
+      This is a message. It can be multiple lines long.
+    </ContentMessage>
+  </div>
+);

package/src/stories/ContextItem.stories.tsx

@@ -0,0 +1,140 @@
+import type { Meta } from "@storybook/react";
+import React from "react";
+
+import { Drive, Github, Notion, Slack } from "@sparkle/logo/platforms";
+
+import {
+  Avatar,
+  Button,
+  Chip,
+  Cog6ToothIcon,
+  ContextItem,
+  PencilSquareIcon,
+  SliderToggle,
+  TrashIcon,
+} from "../index_with_tw_base";
+
+const meta = {
+  title: "Components/ContextItem",
+  component: ContextItem,
+} satisfies Meta<typeof ContextItem>;
+
+export default meta;
+
+export const ListItemExample = () => (
+  <div>
+    <ContextItem.List>
+      <ContextItem.SectionHeader
+        title="Connected platforms"
+        description="Platforms connected"
+      />
+      <ContextItem
+        title="Notion"
+        visual={<ContextItem.Visual visual={Notion} />}
+        onClick={() => console.log("clicked item")}
+      >
+        <ContextItem.Description description="Teamspaces “General” and “Public”, pages “Engineering”, “Team Life”, “Marketing”, “Brand”, “Getting Started at Dust”, “Brand”, “Design”, “Product Decisions”, “Hiring”, “Man" />
+      </ContextItem>
+      <ContextItem
+        title="Drive"
+        visual={<ContextItem.Visual visual={Drive} />}
+        onClick={() => console.log("clicked")}
+      >
+        <ContextItem.Description description="Hello you" />
+      </ContextItem>
+
+      <ContextItem.SectionHeader
+        title="Connected platforms"
+        description="Platforms connected"
+      />
+      <ContextItem
+        title="Slack"
+        visual={<ContextItem.Visual visual={Slack} />}
+        action={
+          <Button.List>
+            <Button
+              icon={TrashIcon}
+              variant="secondaryWarning"
+              label="Remove"
+              labelVisible={false}
+            />
+            <Button
+              variant="secondary"
+              label="Edit"
+              size="sm"
+              icon={PencilSquareIcon}
+            />
+          </Button.List>
+        }
+      >
+        <ContextItem.Description description="Hello you" />
+      </ContextItem>
+      <ContextItem
+        title="Github"
+        subElement={<>By: Stan</>}
+        action={<SliderToggle size="xs" />}
+        visual={<ContextItem.Visual visual={Github} />}
+      >
+        <>
+          <div className="s-py-2">
+            <Chip label="Syncing…" color="amber" size="sm" isBusy />
+          </div>
+          <ContextItem.Description description="Teamspaces “General” and “Public”, pages “Engineering”, “Team Life”, “Marketing”, “Brand”, “Getting Started at Dust”, “Brand”, “Design”, “Product Decisions”, “Hiring”, “Man" />
+        </>
+      </ContextItem>
+      <ContextItem
+        title="@Gpt4"
+        action={<SliderToggle size="xs" />}
+        visual={
+          <Avatar
+            visual="https://dust.tt/static/systemavatar/gpt4_avatar_full.png"
+            size="sm"
+          />
+        }
+      >
+        <ContextItem.Description description="Lats, pricing, history of contacts, contact message" />
+      </ContextItem>
+      <ContextItem
+        title="@SalesFr"
+        subElement={<>By: Edouard Wautier, Amira Hadad</>}
+        action={
+          <Button
+            variant="secondary"
+            label="Manage"
+            size="sm"
+            icon={Cog6ToothIcon}
+          />
+        }
+        visual={
+          <Avatar
+            visual="https://dust.tt/static/droidavatar/Droid_Indigo_4.jpg"
+            size="sm"
+          />
+        }
+      >
+        <ContextItem.Description description="Lats, pricing, history of contacts, contact message" />
+      </ContextItem>
+      <ContextItem
+        title="@SupportFr"
+        subElement={<>By: Edouard Wautier, Amira Hadad</>}
+        action={
+          <Button
+            variant="secondary"
+            label="Manage"
+            size="sm"
+            icon={Cog6ToothIcon}
+          />
+        }
+        visual={
+          <Avatar
+            visual="https://dust.tt/static/droidavatar/Droid_Pink_4.jpg"
+            size="sm"
+          />
+        }
+      >
+        <ContextItem.Description description="Lats, pricing, history of contacts, contact message" />
+      </ContextItem>
+      {undefined}
+    </ContextItem.List>
+  </div>
+);

package/src/stories/DataTable.stories.tsx

@@ -0,0 +1,36 @@
+import type { Meta } from "@storybook/react";
+import React from "react";
+
+import { Button, DataTable } from "../index";
+
+const meta = {
+  title: "Components/DataTable",
+  component: DataTable,
+} satisfies Meta<typeof DataTable>;
+
+export default meta;
+
+export const DataTableExample = () => {
+  const columns = ["Name", "Age", "Location", "Email"];
+  const data = [
+    ["Alice", 30, "New York", "test@test.tt"],
+    ["Bob", 25, "Los Angeles", "test@test.tt"],
+    ["Charlie", 35, "Chicago", "test@test.tt"],
+    ["Paul", 35, "London", "test@test.tt"],
+    ["Charles", 5, "Paris", "test@test.tt"],
+  ];
+  const downloadButton = (
+    <Button className="mt-4" size="sm" variant="tertiary" label="Download" />
+  );
+
+  return (
+    <DataTable
+      columns={columns}
+      rows={data}
+      name="Test table"
+      enableCopy={true}
+      showLimit={3}
+      downloadButton={downloadButton}
+    />
+  );
+};

package/src/stories/Dialog.stories.tsx

@@ -0,0 +1,65 @@
+import type { Meta } from "@storybook/react";
+import React, { useState } from "react";
+
+import { Button, Dialog } from "../index_with_tw_base";
+
+const meta = {
+  title: "Modules/Dialog",
+  component: Dialog,
+} satisfies Meta<typeof Dialog>;
+
+export default meta;
+
+export const DialogExample = () => {
+  const [isOpen1, setisOpen1] = useState(false);
+  const [isOpen2, setisOpen2] = useState(false);
+  const [isOpen3, setisOpen3] = useState(false);
+  return (
+    <div className="items-start s-flex s-flex-col s-gap-10">
+      <div>
+        <Dialog
+          isOpen={isOpen1}
+          title="Dialog title"
+          onValidate={() => setisOpen1(false)}
+          onCancel={() => setisOpen1(false)}
+        >
+          <div>I'm the modal content</div>
+        </Dialog>
+        <Button
+          label="Dialog with primary validate"
+          onClick={() => setisOpen1(true)}
+        />
+      </div>
+      <div>
+        <Dialog
+          isOpen={isOpen2}
+          title="Dialog title"
+          onValidate={() => setisOpen2(false)}
+          onCancel={() => setisOpen2(false)}
+          validateVariant="primaryWarning"
+        >
+          <div>I'm the modal content</div>
+        </Dialog>
+        <Button
+          label="Dialog with warning validate"
+          onClick={() => setisOpen2(true)}
+        />
+      </div>
+      <div>
+        <Dialog
+          isOpen={isOpen3}
+          title="Dialog title"
+          onValidate={() => setisOpen3(false)}
+          onCancel={() => setisOpen3(false)}
+          backgroundType="snow"
+        >
+          <div>I'm the modal content</div>
+        </Dialog>
+        <Button
+          label="Dialog with BACKGROUND"
+          onClick={() => setisOpen3(true)}
+        />
+      </div>
+    </div>
+  );
+};