@dust-tt/sparkle 0.2.183 → 0.2.184

package/src/stories/Item.stories.tsx

@@ -0,0 +1,199 @@
+import type { Meta } from "@storybook/react";
+import React from "react";
+
+import {
+  ArrowRightIcon,
+  DropdownMenu,
+  Item,
+  LightbulbIcon,
+  PlusIcon,
+} from "../index_with_tw_base";
+import { Cog6ToothIcon } from "../index_with_tw_base";
+
+const meta = {
+  title: "Primitives/Item",
+  component: Item,
+} satisfies Meta<typeof Item>;
+
+export default meta;
+
+export const ListItemExample = () => (
+  <div className="s-grid s-grid-cols-3 s-gap-8">
+    <div>
+      Entry example:
+      <div className="s-w-70 s-flex s-justify-start s-bg-structure-50 s-p-8 dark:s-bg-structure-50-dark">
+        <Item.List className="s-w-full">
+          <Item.SectionHeader label="Section Header" />
+          <Item.Entry
+            label="Deploying a new Sparkle Icon set and GitHub action"
+            selected
+          />
+          <Item.Entry label="Item 2" />
+          <Item.Entry label="Adding custom colors and color schemes to Tailwind" />
+          <Item.SectionHeader label="Section Header" />
+          <Item.Entry label="Deploying a new Sparkle Icon set and GitHub action" />
+          <Item.Entry label="Item 2" />
+          <Item.Entry label="Adding custom colors and color schemes to Tailwind" />
+        </Item.List>
+      </div>
+    </div>
+    <div>
+      Navigation example:
+      <Item.List className="s-w-40">
+        <Item.SectionHeader label="Section Header" variant="secondary" />
+        <Item.Navigation label="Item 1" icon={Cog6ToothIcon} selected />
+        <Item.Navigation label="Item 2" icon={Cog6ToothIcon} />
+        <Item.Navigation label="Item 3" icon={Cog6ToothIcon} disabled />
+        <Item.SectionHeader label="Section Header" variant="secondary" />
+        <Item.Navigation
+          label="Item 1"
+          icon={Cog6ToothIcon}
+          description="Desciption of the item"
+        />
+        <Item.Navigation
+          label="Item 2"
+          icon={Cog6ToothIcon}
+          description="Desciption of the item"
+        />
+        <Item.Navigation
+          label="Item 3"
+          icon={Cog6ToothIcon}
+          description="Desciption of the item"
+          disabled
+        />
+        <Item.Navigation
+          label="Item 4"
+          icon={Cog6ToothIcon}
+          description="Custom action icon"
+          action={PlusIcon}
+        />
+
+        <Item.Navigation
+          label="Item 5"
+          icon={Cog6ToothIcon}
+          description="No action icon (so no chevron)"
+          hasAction={false}
+        />
+      </Item.List>
+    </div>
+    <div className="s-flex s-flex-col s-gap-8">
+      Dropdown example:
+      <div>
+        <DropdownMenu>
+          <DropdownMenu.Button label="Dust" />
+          <DropdownMenu.Items>
+            <DropdownMenu.Item label="item 1" href="#" />
+            <DropdownMenu.Item label="item 2" href="#" />
+          </DropdownMenu.Items>
+        </DropdownMenu>
+      </div>
+      <div>
+        <DropdownMenu>
+          <DropdownMenu.Button label="Dust" />
+          <DropdownMenu.Items>
+            <DropdownMenu.Item label="item 1" href="#" icon={Cog6ToothIcon} />
+            <DropdownMenu.Item label="item 2" href="#" icon={Cog6ToothIcon} />
+          </DropdownMenu.Items>
+        </DropdownMenu>
+      </div>
+      <div>
+        <DropdownMenu>
+          <DropdownMenu.Button label="Dust" />
+          <DropdownMenu.Items>
+            <DropdownMenu.Item
+              label="item 1"
+              href="#"
+              icon={Cog6ToothIcon}
+              description="Desciption of the item"
+            />
+            <DropdownMenu.Item
+              label="item 2"
+              href="#"
+              icon={Cog6ToothIcon}
+              description="Desciption of the item"
+            />
+          </DropdownMenu.Items>
+        </DropdownMenu>
+      </div>
+    </div>
+
+    <div>
+      Avatar example:
+      <Item.List className="s-w-40">
+        <Item.Avatar
+          label="@handle"
+          description="description of the avatar"
+          visual="https://dust.tt/static/droidavatar/Droid_Black_2.jpg"
+        />
+        <Item.Avatar
+          label="@handle"
+          description="description of the avatar"
+          visual="https://dust.tt/static/droidavatar/Droid_Pink_2.jpg"
+        />
+        <Item.Avatar
+          label="@handle"
+          description="description of the avatar"
+          visual="https://dust.tt/static/droidavatar/Droid_Orange_2.jpg"
+        />
+        <Item.Avatar
+          label="@handle"
+          description="description of the avatar"
+          visual="https://dust.tt/static/droidavatar/Droid_Red_2.jpg"
+        />
+        <Item.Avatar
+          label="@handle"
+          description="description of the avatar"
+          visual="https://dust.tt/static/droidavatar/Droid_Lime_2.jpg"
+        />
+        <Item.Avatar
+          label="@handle"
+          description="description of the avatar"
+          visual="https://dust.tt/static/droidavatar/Droid_Teal_2.jpg"
+          disabled
+        />
+      </Item.List>
+    </div>
+
+    <div>
+      Avatar example:
+      <Item.List className="s-w-40">
+        <Item.Avatar
+          label="@handle"
+          visual="https://dust.tt/static/droidavatar/Droid_Black_2.jpg"
+        />
+        <Item.Avatar
+          label="@handle"
+          visual="https://dust.tt/static/droidavatar/Droid_Pink_2.jpg"
+        />
+        <Item.Avatar
+          label="@handle"
+          visual="https://dust.tt/static/droidavatar/Droid_Orange_2.jpg"
+        />
+        <Item.Avatar
+          label="@handle"
+          visual="https://dust.tt/static/droidavatar/Droid_Red_2.jpg"
+        />
+        <Item.Avatar
+          label="@handle"
+          visual="https://dust.tt/static/droidavatar/Droid_Lime_2.jpg"
+        />
+        <Item.Avatar
+          label="@handle"
+          visual="https://dust.tt/static/droidavatar/Droid_Teal_2.jpg"
+          disabled
+        />
+      </Item.List>
+    </div>
+    <div>
+      Link example:
+      <Item.List className="s-w-40">
+        <Item.Link label="Quick start guide" icon={LightbulbIcon} />
+        <Item.Link
+          label="Building an assistanty"
+          description="description of the avatar"
+          icon={ArrowRightIcon}
+        />
+      </Item.List>
+    </div>
+  </div>
+);

package/src/stories/Logo.stories.tsx

@@ -0,0 +1,113 @@
+import React from "react";
+
+import { Div3D, Hover3D, LogoSquareColorLogoLayer2 } from "..";
+import {
+  LogoHorizontalColor,
+  LogoHorizontalColorLayer1,
+  LogoHorizontalColorLayer2,
+  LogoHorizontalDark,
+  LogoHorizontalWhite,
+  LogoSquareColor,
+  LogoSquareColorLayer1,
+  LogoSquareDark,
+  LogoSquareWhite,
+} from "../logo/dust";
+
+export default {
+  title: "Assets/DustLogo",
+};
+
+const gridStyle = {
+  display: "grid",
+  gridTemplateColumns: "repeat(auto-fill, minmax(240px, 1fr))",
+  gap: "48px 16px",
+};
+const itemStyle = {
+  marginTop: "12px",
+  textOverflow: "ellipsis",
+  overflow: "hidden",
+  whiteSpace: "nowrap",
+  textAlign: "left",
+  width: "100%",
+};
+
+export const DustLogo = () => (
+  <>
+    <div style={gridStyle}>
+      <div className="s-p-6">
+        <LogoHorizontalColor className="s-h-8 s-w-32" />
+        <div style={itemStyle as React.CSSProperties} className="s-text-sm">
+          LogoHorizontalColorLogo
+        </div>
+      </div>
+      <div className="s-p-6">
+        <LogoHorizontalDark className="s-h-8 s-w-32" />
+        <div style={itemStyle as React.CSSProperties} className="s-text-sm">
+          LogoHorizontalDarkLogo
+        </div>
+      </div>
+      <div className="s-bg-slate-800 s-p-6">
+        <LogoHorizontalWhite className="s-h-8 s-w-32" />
+        <div
+          style={itemStyle as React.CSSProperties}
+          className="s-text-sm s-text-white"
+        >
+          LogoHorizontalWhiteLogo
+        </div>
+      </div>
+    </div>
+
+    <div style={gridStyle}>
+      <div className="s-p-6">
+        <LogoSquareColor className="s-h-16 s-w-16" />
+        <div style={itemStyle as React.CSSProperties} className="s-text-sm">
+          LogoHorizontalColorLogo
+        </div>
+      </div>
+      <div className="s-p-6">
+        <LogoSquareDark className="s-h-16 s-w-16" />
+        <div style={itemStyle as React.CSSProperties} className="s-text-sm">
+          LogoHorizontalDarkLogo
+        </div>
+      </div>
+      <div className="s-bg-slate-800 s-p-6">
+        <LogoSquareWhite className="s-h-16 s-w-16" />
+        <div
+          style={itemStyle as React.CSSProperties}
+          className="s-text-sm s-text-white"
+        >
+          LogoHorizontalWhiteLogo
+        </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">
+            <LogoHorizontalColorLayer1 className="s-h-8 s-w-32" />
+          </Div3D>
+          <Div3D depth={25} className="s-absolute s-top-0">
+            <LogoHorizontalColorLayer2 className="s-h-8 s-w-32" />
+          </Div3D>
+        </Hover3D>
+        <div style={itemStyle as React.CSSProperties} className="s-text-sm">
+          Horizontal Hover3D
+        </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">
+            <LogoSquareColorLayer1 className="s-h-16 s-w-16" />
+          </Div3D>
+          <Div3D depth={25} className="s-absolute s-top-0">
+            <LogoSquareColorLogoLayer2 className="s-h-16 s-w-16" />
+          </Div3D>
+        </Hover3D>
+        <div style={itemStyle as React.CSSProperties} className="s-text-sm">
+          Square Hover3D
+        </div>
+      </div>
+    </div>
+  </>
+);

package/src/stories/Markdown.stories.tsx

@@ -0,0 +1,52 @@
+import type { Meta } from "@storybook/react";
+import React from "react";
+
+import { Button, Markdown } from "../index_with_tw_base";
+
+const meta = {
+  title: "Primitives/Markdown",
+  component: Button,
+} satisfies Meta<typeof Button>;
+
+export default meta;
+
+const example1 = `
+# Level 1 Title
+
+## Level 2 Title
+
+### Level 3 Title
+
+This is a paragraph with **bold** text and *italic* text.
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+`;
+
+const example2 = `
+# Another Level 1 Title
+
+Demo of a list, showcasing our pets of the month:
+- Soupinou
+- Shawarma
+- Anakine
+- Goose
+
+---
+
+Demo of a quote below:
+> You take the blue pill - the story ends, you wake up in your bed and believe whatever you want to believe. You take the red pill - you stay in Wonderland and I show you how deep the rabbit hole goes.
+
+> You take the blue pill - the story ends, you wake up in your bed and believe whatever you want to believe. You take the red pill - you stay in Wonderland and I show you how deep the rabbit hole goes.
+
+Another one, a short one:
+> Soupinou fait des miaou miaou.
+
+`;
+
+export const MarkdownExample = () => (
+  <div className="s-flex s-flex-col s-bg-structure-50 s-p-8">
+    <Markdown content={example1} />
+    <Markdown content={example2} />
+  </div>
+);

package/src/stories/Modal.stories.tsx

@@ -0,0 +1,146 @@
+import type { Meta } from "@storybook/react";
+import React, { useState } from "react";
+
+import { Button, Input, Modal, Page } from "../index_with_tw_base";
+
+const meta = {
+  title: "Modules/Modal",
+  component: Modal,
+} satisfies Meta<typeof Modal>;
+
+export default meta;
+
+export const ModalExample = () => {
+  const [isOpenNoActionNoChange, setIsOpenNoActionNoChange] = useState(false);
+  const [isOpenWithActionAndChange, setIsOpenWithActionAndChange] =
+    useState(false);
+  const [isFullScreenModalOpen, setIsFullScreenModalOpen] = useState(false);
+  const [isFullScreenModalOverflowOpen, setIsFullScreenModalOverflowOpen] =
+    useState(false);
+  const [isRightSideModalOpen, setIsRightSideModalOpen] = useState(false);
+  const [inputValue, setInputValue] = useState("initial value");
+  const [isRightSideWideModalOpen, setIsRightSideWideModalOpen] =
+    useState(false);
+  return (
+    <Page.Layout gap="md">
+      <Modal
+        isOpen={isOpenNoActionNoChange}
+        onClose={() => setIsOpenNoActionNoChange(false)}
+        hasChanged={false}
+        title="Modal title"
+        variant="dialogue"
+      >
+        <div className="s-mt-4 s-h-72">I'm the modal content</div>
+      </Modal>
+      <Modal
+        isOpen={isRightSideModalOpen}
+        onClose={() => setIsRightSideModalOpen(false)}
+        variant="side-sm"
+        title="Modal title"
+        hasChanged={inputValue !== "initial value"}
+      >
+        <div className="s-flex s-flex-col s-gap-3">
+          <div className="s-mt-4 s-flex-none s-text-left">
+            I'm the modal content
+          </div>
+          <div className="s-w-64">
+            <Input
+              placeholder="Input placeholder"
+              className="s-mt-4"
+              value={inputValue}
+              onChange={setInputValue}
+              name="input-name"
+            />
+          </div>
+        </div>
+      </Modal>
+      <Modal
+        isOpen={isOpenWithActionAndChange}
+        onClose={() => setIsOpenWithActionAndChange(false)}
+        action={{
+          labelVisible: true,
+          label: "An action",
+          variant: "tertiary",
+          size: "xs",
+        }}
+        saveLabel="Save (custom name possible)"
+        hasChanged={true}
+        variant="dialogue"
+      >
+        <div className="s-mt-4 s-h-72 s-text-left">I'm the modal content</div>
+      </Modal>
+      <Modal
+        isOpen={isFullScreenModalOpen}
+        onClose={() => setIsFullScreenModalOpen(false)}
+        hasChanged={true}
+        variant="full-screen"
+        title="Modal title"
+      >
+        <div className="s-mt-4 s-h-72 s-text-left">I'm the modal content</div>
+      </Modal>
+      <Modal
+        isOpen={isFullScreenModalOverflowOpen}
+        onClose={() => setIsFullScreenModalOverflowOpen(false)}
+        hasChanged={true}
+        variant="full-screen"
+        title="Modal title"
+      >
+        <div className="s-mt-4 s-h-96 s-bg-red-300 s-text-left">
+          I'm the modal content
+        </div>
+        <div className="bg-red s-mt-4 s-h-96 s-bg-red-300 s-text-left">
+          I'm the modal content
+        </div>
+        <div className="bg-red s-mt-4 s-h-96 s-bg-red-300 s-text-left">
+          I'm the modal content
+        </div>
+        <div className="bg-red s-mt-4 s-h-96 s-bg-red-300 s-text-left">
+          I'm the modal content
+        </div>
+      </Modal>
+      <Modal
+        isOpen={isRightSideWideModalOpen}
+        onClose={() => setIsRightSideWideModalOpen(false)}
+        hasChanged={false}
+        variant="side-md"
+        title="Modal title"
+      >
+        <div className="s-mt-4 s-h-72 s-text-left">
+          I'm the modal content, and I am wide
+        </div>
+        <div className="s-mt-4 s-h-96 s-bg-red-300 s-text-left">
+          I'm the modal content
+        </div>
+        <div className="bg-red s-mt-4 s-h-96 s-bg-red-300 s-text-left">
+          I'm the modal content
+        </div>
+        <div className="bg-red s-mt-4 s-h-96 s-bg-red-300 s-text-left">
+          I'm the modal content
+        </div>
+        <div className="bg-red s-mt-4 s-h-96 s-bg-red-300 s-text-left">
+          I'm the modal content
+        </div>
+      </Modal>
+      <div className="s-flex s-flex-col s-items-start s-gap-3">
+        <div className="s-text-lg s-font-bold">Fullscreen</div>
+        <Button
+          label="Modal full screen"
+          onClick={() => setIsFullScreenModalOpen(true)}
+        />
+        <Button
+          label="Modal full screen with overflowing content"
+          onClick={() => setIsFullScreenModalOverflowOpen(true)}
+        />
+        <div className="s-text-lg s-font-bold">Side modal</div>
+        <Button
+          label="Modal right side"
+          onClick={() => setIsRightSideModalOpen(true)}
+        />
+        <Button
+          label="Modal right side wide"
+          onClick={() => setIsRightSideWideModalOpen(true)}
+        />
+      </div>
+    </Page.Layout>
+  );
+};

package/src/stories/Notification.stories.tsx

@@ -0,0 +1,38 @@
+import type { Meta } from "@storybook/react";
+import React from "react";
+
+import { Notification } from "../index_with_tw_base";
+
+const meta = {
+  title: "Modules/Notification",
+  component: Notification,
+} satisfies Meta<typeof Notification>;
+
+export default meta;
+
+export const NotificationExample = () => {
+  return (
+    <>
+      <div className="s-flex s-gap-6">
+        <Notification
+          title="Success"
+          description="This is a success notification"
+          variant="success"
+        />
+        <Notification
+          title="Failure"
+          description="This is a success notification"
+          variant="error"
+        />
+        <div>
+          <Notification title="Failure" variant="error" />
+        </div>
+        <Notification
+          title="Failure with a very long title clamped on one line."
+          description='Got: {"error":{"type":"invalid_request_error","message":"Invalid request body: Expecting string at name but instead got: undefined"}}'
+          variant="error"
+        />
+      </div>
+    </>
+  );
+};