@dust-tt/sparkle 0.2.183 → 0.2.184

package/src/stories/Hover3D.stories.tsx

@@ -0,0 +1,112 @@
+import type { Meta } from "@storybook/react";
+import React from "react";
+
+import { LogoSquareColor } from "@sparkle/logo/dust";
+
+import { Div3D, GithubLogo, Hover3D, Icon } from "../index_with_tw_base";
+
+const meta = {
+  title: "Components/Hover3D",
+  component: Hover3D,
+} satisfies Meta<typeof Hover3D>;
+
+export default meta;
+
+export const Hover3DExample = () => (
+  <div className="s-flex s-flex-col s-gap-4">
+    <div className="s-flex s-gap-4">
+      <div>
+        <Hover3D
+          className="s-rounded-[30px] s-bg-gradient-to-r s-from-cyan-500 s-to-blue-500 s-p-10 s-shadow-xl"
+          depth={-30}
+        >
+          <Div3D depth={20}>Coucou</Div3D>
+          <Div3D depth={10}>Coucou</Div3D>
+          <Div3D depth={40}>Coucou</Div3D>
+        </Hover3D>
+      </div>
+      <div>
+        <Hover3D
+          className="s-rounded-2xl s-bg-slate-200 s-p-3 s-shadow-xl"
+          depth={-20}
+        >
+          <Div3D depth={50}>
+            <Icon visual={GithubLogo} size="xl" />
+          </Div3D>
+        </Hover3D>
+      </div>
+      <div>
+        <Hover3D className="s-rounded-[24px] s-bg-slate-800 s-p-8">
+          <Div3D depth={60}>
+            <Icon visual={LogoSquareColor} size="2xl" />
+          </Div3D>
+        </Hover3D>
+      </div>
+      <div>
+        <Hover3D
+          className="s-relative s-h-44 s-w-44 s-rounded-[32px] s-bg-gradient-to-t s-from-stone-400 s-to-stone-300 s-p-2"
+          depth={-10}
+        >
+          <Div3D depth={25} className="s-absolute s-h-40 s-w-40">
+            <img src="http://test.edouardwautier.com/layer2.png" />
+          </Div3D>
+          <Div3D depth={50} className="s-absolute s-h-40 s-w-40">
+            <img src="http://test.edouardwautier.com/layer3.png" />
+          </Div3D>
+        </Hover3D>
+      </div>
+    </div>
+
+    <div className="s-flex s-gap-4">
+      <div>
+        <Hover3D
+          className="s-rounded-[30px] s-bg-gradient-to-r s-from-cyan-500 s-to-blue-500 s-p-10 s-shadow-xl"
+          perspective={1000}
+          fullscreenSensible
+        >
+          <Div3D depth={20}>Coucou</Div3D>
+          <Div3D depth={10}>Coucou</Div3D>
+          <Div3D depth={40}>Coucou</Div3D>
+        </Hover3D>
+      </div>
+      <div>
+        <Hover3D
+          className="s-rounded-2xl s-bg-slate-200 s-p-3 s-shadow-xl"
+          depth={-20}
+          perspective={1000}
+          fullscreenSensible
+        >
+          <Div3D depth={50}>
+            <Icon visual={GithubLogo} size="xl" />
+          </Div3D>
+        </Hover3D>
+      </div>
+      <div>
+        <Hover3D
+          className="s-rounded-[24px] s-bg-slate-800 s-p-8"
+          perspective={1000}
+          fullscreenSensible
+        >
+          <Div3D depth={60}>
+            <Icon visual={LogoSquareColor} size="2xl" />
+          </Div3D>
+        </Hover3D>
+      </div>
+      <div>
+        <Hover3D
+          className="s-relative s-h-44 s-w-44 s-rounded-[32px] s-bg-gradient-to-t s-from-stone-400 s-to-stone-300 s-p-2"
+          depth={-10}
+          perspective={1000}
+          fullscreenSensible
+        >
+          <Div3D depth={25} className="s-absolute s-h-40 s-w-40">
+            <img src="http://test.edouardwautier.com/layer2.png" />
+          </Div3D>
+          <Div3D depth={50} className="s-absolute s-h-40 s-w-40">
+            <img src="http://test.edouardwautier.com/layer3.png" />
+          </Div3D>
+        </Hover3D>
+      </div>
+    </div>
+  </div>
+);

package/src/stories/Hoverable.stories.tsx

@@ -0,0 +1,27 @@
+import type { Meta } from "@storybook/react";
+import React from "react";
+
+import { Hoverable } from "@sparkle/components/Hoverable";
+
+const meta = {
+  title: "Primitives/Hoverable",
+  component: Hoverable,
+} satisfies Meta<typeof Hoverable>;
+
+export default meta;
+
+export const HoverableExample = () => {
+  return (
+    <div className="items-start s-flex s-flex-col s-gap-10">
+      <div>
+        <Hoverable
+          onClick={() => {
+            alert("Clicked!");
+          }}
+        >
+          You can hover me.
+        </Hoverable>
+      </div>
+    </div>
+  );
+};

package/src/stories/Icon.stories.tsx

@@ -0,0 +1,43 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { ChatBubbleBottomCenterTextIcon, Icon } from "../index_with_tw_base";
+
+const meta = {
+  title: "Primitives/Icon",
+  component: Icon,
+} satisfies Meta<typeof Icon>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const IconSM: Story = {
+  args: {
+    visual: ChatBubbleBottomCenterTextIcon,
+    className: "s-text-action-800",
+    size: "sm",
+  },
+};
+
+export const IconXS: Story = {
+  args: {
+    visual: ChatBubbleBottomCenterTextIcon,
+    className: "s-text-brand",
+    size: "xs",
+  },
+};
+
+export const IconMD: Story = {
+  args: {
+    visual: ChatBubbleBottomCenterTextIcon,
+    className: "s-text-element-800",
+    size: "md",
+  },
+};
+
+export const IconLG: Story = {
+  args: {
+    visual: ChatBubbleBottomCenterTextIcon,
+    className: "s-text-brand",
+    size: "lg",
+  },
+};

package/src/stories/IconButton.stories.tsx

@@ -0,0 +1,46 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Cog6ToothIcon, IconButton } from "../index_with_tw_base";
+
+const meta = {
+  title: "Primitives/IconButton",
+  component: IconButton,
+} satisfies Meta<typeof IconButton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const IconButtonPrimary: Story = {
+  args: {
+    variant: "primary",
+    size: "md",
+    icon: Cog6ToothIcon,
+  },
+};
+
+export const IconButtonWithTooltip: Story = {
+  args: {
+    variant: "primary",
+    tooltip: "Your settings",
+    tooltipPosition: "below",
+    icon: Cog6ToothIcon,
+  },
+};
+
+export const IconButtonSecondary: Story = {
+  args: {
+    variant: "secondary",
+    tooltip: "This a secondary IconButton",
+    tooltipPosition: "below",
+    icon: Cog6ToothIcon,
+  },
+};
+
+export const IconButtonTertiary: Story = {
+  args: {
+    variant: "tertiary",
+    tooltip: "This a tertiary IconButton",
+    tooltipPosition: "below",
+    icon: Cog6ToothIcon,
+  },
+};

package/src/stories/IconSet.stories.tsx

@@ -0,0 +1,59 @@
+import React from "react";
+
+import * as SolidIcons from "../icons/solid";
+import * as StrokeIcons from "../icons/stroke";
+import { Icon } from "../index_with_tw_base";
+
+export default {
+  title: "Assets/Icons",
+};
+
+const gridStyle = {
+  display: "grid",
+  gridTemplateColumns: "repeat(auto-fill, minmax(160px, 1fr))",
+  gap: "48px 16px",
+};
+const itemStyle = {
+  marginTop: "12px",
+  textOverflow: "ellipsis",
+  overflow: "hidden",
+  whiteSpace: "nowrap",
+  textAlign: "left",
+  width: "100%",
+};
+
+export const SolidIconSet = () => (
+  <div style={gridStyle}>
+    {Object.entries(SolidIcons).map(([iconName, IconComponent]) => {
+      const CurrentIcon = (
+        "default" in IconComponent ? IconComponent.default : IconComponent
+      ) as React.ComponentType<{ className?: string | undefined }>;
+      return (
+        <div key={iconName}>
+          <Icon visual={CurrentIcon} size="md" />
+          <div style={itemStyle as React.CSSProperties} className="s-text-sm">
+            {iconName + "Icon"}
+          </div>
+        </div>
+      );
+    })}
+  </div>
+);
+
+export const StrokeIconSet = () => (
+  <div style={gridStyle}>
+    {Object.entries(StrokeIcons).map(([iconName, IconComponent]) => {
+      const CurrentIcon = (
+        "default" in IconComponent ? IconComponent.default : IconComponent
+      ) as React.ComponentType<{ className?: string | undefined }>;
+      return (
+        <div key={iconName}>
+          <Icon visual={CurrentIcon} size="md" />
+          <div style={itemStyle as React.CSSProperties} className="s-text-sm">
+            {iconName + "Icon"}
+          </div>
+        </div>
+      );
+    })}
+  </div>
+);

package/src/stories/IconToggleButton.stories.tsx

@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import {
+  Cog6ToothIcon,
+  Cog6ToothStrokeIcon,
+  IconToggleButton,
+} from "../index_with_tw_base";
+
+const meta = {
+  title: "Primitives/IconToggleButton",
+  component: IconToggleButton,
+} satisfies Meta<typeof IconToggleButton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const IconToggleButtonSecondary: Story = {
+  args: {
+    variant: "secondary",
+    tooltip: "This a secondary IconButton",
+    icon: Cog6ToothStrokeIcon,
+    iconSelected: Cog6ToothIcon,
+    selected: false,
+  },
+};
+
+export const IconToggleButtonTertiary: Story = {
+  args: {
+    variant: "tertiary",
+    tooltip: "This a tertiary IconButton",
+    icon: Cog6ToothIcon,
+    selected: false,
+  },
+};

package/src/stories/Input.stories.tsx

@@ -0,0 +1,96 @@
+import type { Meta } from "@storybook/react";
+import React from "react";
+
+import { Input } from "../index_with_tw_base";
+
+const meta = {
+  title: "Primitives/Input",
+  component: Input,
+} satisfies Meta<typeof Input>;
+
+export default 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" value={null} />
+      <Input
+        placeholder="placeholder"
+        name="input"
+        value={"value"}
+        error={"errored because it's a very long message"}
+        showErrorLabel
+      />
+      <Input
+        placeholder="placeholder"
+        name="input"
+        value={"value"}
+        error={"errored"}
+      />
+      <Input
+        placeholder="placeholder"
+        name="input"
+        value={"value"}
+        error={"errored because it's a very long message"}
+        showErrorLabel
+      />
+      <Input
+        placeholder="placeholder"
+        name="input"
+        value={"disabled"}
+        showErrorLabel
+      />
+    </div>
+    <div className="s-grid s-grid-cols-3 s-gap-4">
+      <Input placeholder="placeholder" name="input" value={null} size="md" />
+      <Input
+        placeholder="placeholder"
+        name="input"
+        size="md"
+        value={"value"}
+        error={"errored because it's a very long message"}
+        showErrorLabel
+      />
+      <Input
+        placeholder="placeholder"
+        name="input"
+        size="md"
+        value={"value"}
+        error={"errored"}
+      />
+      <Input
+        placeholder="placeholder"
+        name="input"
+        size="md"
+        value={"value"}
+        error={"errored because it's a very long message"}
+        showErrorLabel
+      />
+      <Input
+        placeholder="placeholder"
+        name="input"
+        size="md"
+        value={"disabled"}
+        showErrorLabel
+      />
+    </div>
+    <div className="s-grid s-grid-cols-3 s-gap-4">
+      <Input
+        placeholder="placeholder"
+        name="input"
+        size="sm"
+        label="Firstname"
+        value=""
+        showErrorLabel
+      />
+      <Input
+        placeholder="placeholder"
+        name="input"
+        size="sm"
+        label="Lastname"
+        value=""
+        showErrorLabel
+      />
+    </div>
+  </div>
+);

package/src/stories/Introduction.mdx

@@ -0,0 +1,221 @@
+import { Meta } from "@storybook/blocks";
+import Code from "./assets/code-brackets.svg";
+import Colors from "./assets/colors.svg";
+import Comments from "./assets/comments.svg";
+import Direction from "./assets/direction.svg";
+import Flow from "./assets/flow.svg";
+import Plugin from "./assets/plugin.svg";
+import Repo from "./assets/repo.svg";
+import StackAlt from "./assets/stackalt.svg";
+
+<Meta title="Example/Introduction" />
+
+<style>
+  {`
+    .subheading {
+      --mediumdark: '#999999';
+      font-weight: 700;
+      font-size: 13px;
+      color: #999;
+      letter-spacing: 6px;
+      line-height: 24px;
+      text-transform: uppercase;
+      margin-bottom: 12px;
+      margin-top: 40px;
+    }
+
+    .link-list {
+      display: grid;
+      grid-template-columns: 1fr;
+      grid-template-rows: 1fr 1fr;
+      row-gap: 10px;
+    }
+
+    @media (min-width: 620px) {
+      .link-list {
+        row-gap: 20px;
+        column-gap: 20px;
+        grid-template-columns: 1fr 1fr;
+      }
+    }
+
+    @media all and (-ms-high-contrast:none) {
+    .link-list {
+        display: -ms-grid;
+        -ms-grid-columns: 1fr 1fr;
+        -ms-grid-rows: 1fr 1fr;
+      }
+    }
+
+    .link-item {
+      display: block;
+      padding: 20px;
+      border: 1px solid #00000010;
+      border-radius: 5px;
+      transition: background 150ms ease-out, border 150ms ease-out, transform 150ms ease-out;
+      color: #333333;
+      display: flex;
+      align-items: flex-start;
+    }
+
+    .link-item:hover {
+      border-color: #1EA7FD50;
+      transform: translate3d(0, -3px, 0);
+      box-shadow: rgba(0, 0, 0, 0.08) 0 3px 10px 0;
+    }
+
+    .link-item:active {
+      border-color: #1EA7FD;
+      transform: translate3d(0, 0, 0);
+    }
+
+    .link-item strong {
+      font-weight: 700;
+      display: block;
+      margin-bottom: 2px;
+    }
+
+    .link-item img {
+      height: 40px;
+      width: 40px;
+      margin-right: 15px;
+      flex: none;
+    }
+
+    .link-item span,
+    .link-item p {
+      margin: 0;
+      font-size: 14px;
+      line-height: 20px;
+    }
+
+    .tip {
+      display: inline-block;
+      border-radius: 1em;
+      font-size: 11px;
+      line-height: 12px;
+      font-weight: 700;
+      background: #E7FDD8;
+      color: #66BF3C;
+      padding: 4px 12px;
+      margin-right: 10px;
+      vertical-align: top;
+    }
+
+    .tip-wrapper {
+      font-size: 13px;
+      line-height: 20px;
+      margin-top: 40px;
+      margin-bottom: 40px;
+    }
+
+    .tip-wrapper code {
+      font-size: 12px;
+      display: inline-block;
+    }
+  `}
+</style>
+
+# Welcome to Storybook
+
+Storybook helps you build UI components in isolation from your app's business logic, data, and context.
+That makes it easy to develop hard-to-reach states. Save these UI states as **stories** to revisit during development, testing, or QA.
+
+Browse example stories now by navigating to them in the sidebar.
+View their code in the `stories` directory to learn how they work.
+We recommend building UIs with a [**component-driven**](https://componentdriven.org) process starting with atomic components and ending with pages.
+
+<div className="subheading">Configure</div>
+
+<div className="link-list">
+  <a
+    className="link-item"
+    href="https://storybook.js.org/docs/react/addons/addon-types"
+    target="_blank"
+  >
+    <img src={Plugin} alt="plugin" />
+    <span>
+      <strong>Presets for popular tools</strong>
+      Easy setup for TypeScript, SCSS and more.
+    </span>
+  </a>
+  <a
+    className="link-item"
+    href="https://storybook.js.org/docs/react/configure/webpack"
+    target="_blank"
+  >
+    <img src={StackAlt} alt="Build" />
+    <span>
+      <strong>Build configuration</strong>
+      How to customize webpack and Babel
+    </span>
+  </a>
+  <a
+    className="link-item"
+    href="https://storybook.js.org/docs/react/configure/styling-and-css"
+    target="_blank"
+  >
+    <img src={Colors} alt="colors" />
+    <span>
+      <strong>Styling</strong>
+      How to load and configure CSS libraries
+    </span>
+  </a>
+  <a
+    className="link-item"
+    href="https://storybook.js.org/docs/react/get-started/setup#configure-storybook-for-your-stack"
+    target="_blank"
+  >
+    <img src={Flow} alt="flow" />
+    <span>
+      <strong>Data</strong>
+      Providers and mocking for data libraries
+    </span>
+  </a>
+</div>
+
+<div className="subheading">Learn</div>
+
+<div className="link-list">
+  <a className="link-item" href="https://storybook.js.org/docs" target="_blank">
+    <img src={Repo} alt="repo" />
+    <span>
+      <strong>Storybook documentation</strong>
+      Configure, customize, and extend
+    </span>
+  </a>
+  <a
+    className="link-item"
+    href="https://storybook.js.org/tutorials/"
+    target="_blank"
+  >
+    <img src={Direction} alt="direction" />
+    <span>
+      <strong>In-depth guides</strong>
+      Best practices from leading teams
+    </span>
+  </a>
+  <a
+    className="link-item"
+    href="https://github.com/storybookjs/storybook"
+    target="_blank"
+  >
+    <img src={Code} alt="code" />
+    <span>
+      <strong>GitHub project</strong>
+      View the source and add issues
+    </span>
+  </a>
+  <a className="link-item" href="https://discord.gg/storybook" target="_blank">
+    <img src={Comments} alt="comments" />
+    <span>
+      <strong>Discord chat</strong>
+      Chat with maintainers and the community
+    </span>
+  </a>
+</div>
+
+<div className="tip-wrapper">
+  <span className="tip">Tip</span>Edit the Markdown in{" "}
+  <code>stories/Introduction.stories.mdx</code>
+</div>