@dust-tt/sparkle 0.2.254-rc-1 → 0.2.254

package/src/components/index.ts

@@ -43,12 +43,6 @@ export { SliderToggle } from "./SliderToggle";
 export { default as Spinner } from "./Spinner";
 export { Tab } from "./Tab";
 export { TextArea } from "./TextArea";
-export {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipRoot,
-  TooltipTrigger,
-} from "./Tooltip";
+export { Tooltip } from "./Tooltip";
 export { Tree } from "./Tree";
 export { ZoomableImageCitationWrapper } from "./ZoomableImageCitationWrapper";

package/src/stories/Button.stories.tsx

@@ -1,15 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import React from "react";
 
-import {
-  Button,
-  Cog6ToothIcon,
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipRoot,
-  TooltipTrigger,
-} from "../index_with_tw_base";
+import { Button, Cog6ToothIcon } from "../index_with_tw_base";
 
 const meta = {
   title: "Primitives/Button",
@@ -572,41 +564,6 @@ export const ButtonSelectExamples = () => (
   </div>
 );
 
-export const ButtonWithTooltipManualInstantiation = () => {
-  return (
-    <TooltipProvider>
-      <TooltipRoot>
-        <TooltipTrigger>
-          <Button
-            labelVisible={true}
-            label="New conversation"
-            icon={Cog6ToothIcon}
-            hasMagnifying={false}
-          />
-        </TooltipTrigger>
-        <TooltipContent>
-          <p>Hello</p>
-        </TooltipContent>
-      </TooltipRoot>
-  </TooltipProvider>
-)}
-
-export const ButtonWithTooltip = () => {
-  return (
-    <Tooltip
-      trigger={
-        <Button
-          labelVisible={true}
-          label="New conversation"
-          icon={Cog6ToothIcon}
-          hasMagnifying={false}
-        />
-      }
-      label={"Hello"}
-    />
-  )
-}
-
 export const Primary: Story = {
   args: {
     variant: "primary",
@@ -665,7 +622,7 @@ export const IconOnlyPlusTooltip: Story = {
     labelVisible: false,
     icon: Cog6ToothIcon,
     disabled: false,
-    tooltipPosition: "bottom",
+    tooltipPosition: "below",
   },
 };
 
@@ -677,7 +634,7 @@ export const IconOnlyNoTooltip: Story = {
     labelVisible: false,
     icon: Cog6ToothIcon,
     disabled: false,
-    tooltipPosition: "bottom",
+    tooltipPosition: "below",
     disabledTooltip: true,
   },
 };

package/src/stories/Citation.stories.tsx

@@ -133,7 +133,7 @@ export const CitationsExample = () => (
         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. Write a 120 character description of the citation here to be displayed in the citation list. Write a 120 character description of the citation here to be displayed in the citation list."
+        description="Write a 120 character description of the citation here to be displayed in the citation list."
         isBlinking={true}
       />
       <Citation

package/src/stories/DataTable.stories.tsx

@@ -161,9 +161,7 @@ const columns: ColumnDef<Data>[] = [
       width: "100px",
     },
     cell: (info) => (
-      <DataTable.CellContentWithCopy>
-        {info.row.original.addedBy}
-      </DataTable.CellContentWithCopy>
+      <DataTable.CellContentWithCopy>{info.row.original.addedBy}</DataTable.CellContentWithCopy>
     ),
   },
   {

package/src/stories/Dialog.stories.tsx

@@ -26,7 +26,6 @@ export const DialogExample = () => {
           cancelLabel="Cancel"
           onValidate={() => setisOpen1(false)}
           onCancel={() => setisOpen1(false)}
-          validateVariant="primary"
         >
           <div>I'm the modal content</div>
         </Dialog>

package/src/stories/DropdownMenu.stories.tsx

@@ -48,10 +48,7 @@ export const DropdownExample = () => {
       <div className="s-flex s-gap-6">
         <div className="s-text-sm">Action</div>
         <DropdownMenu>
-          <DropdownMenu.Button
-            label="Action"
-            onClick={() => console.log("CLICK")}
-          />
+          <DropdownMenu.Button label="Action" onClick={() => console.log("CLICK")}/>
           <DropdownMenu.Items width={220}>
             <DropdownMenu.SectionHeader label="Edition" />
             <DropdownMenu.Item
@@ -314,7 +311,7 @@ export const DropdownExample = () => {
           <DropdownMenu.Button
             icon={ChatBubbleBottomCenterTextIcon}
             tooltip="Moonlab"
-            tooltipPosition="bottom"
+            tooltipPosition="below"
           />
           <DropdownMenu.Items origin="topLeft" width={120}>
             <DropdownMenu.Item label="item 1 is longish" link={{ href: "#" }} />
@@ -358,7 +355,7 @@ export const DropdownExample = () => {
           <DropdownMenu.Button
             icon={ChatBubbleBottomCenterTextIcon}
             tooltip="Moonlab"
-            tooltipPosition="bottom"
+            tooltipPosition="below"
           />
           <DropdownMenu.Items origin="topLeft">
             <DropdownMenu.Item label="item 1" link={{ href: "#" }} />

package/src/stories/IconButton.stories.tsx

@@ -22,7 +22,7 @@ export const IconButtonWithTooltip: Story = {
   args: {
     variant: "primary",
     tooltip: "Your settings",
-    tooltipPosition: "bottom",
+    tooltipPosition: "below",
     icon: Cog6ToothIcon,
   },
 };
@@ -31,7 +31,7 @@ export const IconButtonSecondary: Story = {
   args: {
     variant: "secondary",
     tooltip: "This a secondary IconButton",
-    tooltipPosition: "bottom",
+    tooltipPosition: "below",
     icon: Cog6ToothIcon,
   },
 };
@@ -40,7 +40,7 @@ export const IconButtonTertiary: Story = {
   args: {
     variant: "tertiary",
     tooltip: "This a tertiary IconButton",
-    tooltipPosition: "bottom",
+    tooltipPosition: "below",
     icon: Cog6ToothIcon,
   },
 };

package/src/stories/Modal.stories.tsx

@@ -21,6 +21,8 @@ export const ModalExample = () => {
   const [inputValue, setInputValue] = useState("initial value");
   const [isRightSideWideModalOpen, setIsRightSideWideModalOpen] =
     useState(false);
+  const [isAlertModalOpen, setIsAlertModalOpen] = useState(false);
+
   return (
     <Page.Layout gap="md">
       <Modal
@@ -121,6 +123,20 @@ export const ModalExample = () => {
           I'm the modal content
         </div>
       </Modal>
+      <Modal
+        isOpen={isAlertModalOpen}
+        onClose={() => {}}
+        onSave={() => {}}
+        isSaving={false}
+        hasChanged={false}
+        variant="side-sm"
+        title="Alert modal"
+        alertModal
+        action={undefined}
+      >
+        This is an alert modal.
+        <Button label="Ok" onClick={() => setIsAlertModalOpen(false)} />
+      </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
@@ -140,6 +156,7 @@ export const ModalExample = () => {
           label="Modal right side wide"
           onClick={() => setIsRightSideWideModalOpen(true)}
         />
+        <Button label="Alert modal" onClick={() => setIsAlertModalOpen(true)} />
       </div>
     </Page.Layout>
   );

package/src/stories/TextArea.stories.tsx

@@ -23,13 +23,8 @@ export const TextAreaExample = () => {
         <TextArea
           placeholder="placeholder"
           onChange={(e) => {
-            console.log(e.target.value);
-            setTextValues([
-              e.target.value,
-              textValues[1],
-              textValues[2],
-              textValues[3],
-            ]);
+            console.log(e.target.value)
+            setTextValues([e.target.value, textValues[1], textValues[2], textValues[3]])
           }}
           minRows={2}
           defaultValue={textValues[0]}
@@ -39,12 +34,7 @@ export const TextAreaExample = () => {
           defaultValue={textValues[1]}
           error={"errored because blah"}
           onChange={(e) =>
-            setTextValues([
-              textValues[0],
-              e.target.value,
-              textValues[2],
-              textValues[3],
-            ])
+            setTextValues([textValues[0], e.target.value, textValues[2], textValues[3]])
           }
           showErrorLabel
         />
@@ -52,12 +42,7 @@ export const TextAreaExample = () => {
           placeholder="placeholder"
           defaultValue={textValues[2]}
           onChange={(e) =>
-            setTextValues([
-              textValues[0],
-              textValues[1],
-              e.target.value,
-              textValues[3],
-            ])
+            setTextValues([textValues[0], textValues[1], e.target.value, textValues[3]])
           }
           error={"errored because blah"}
         />

package/src/stories/Tooltip.stories.tsx

@@ -1,43 +1,62 @@
-import type { Meta } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react";
 import React from "react";
 
-import {
-  Icon,
-  RobotIcon,
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipRoot,
-  TooltipTrigger,
-} from "../index_with_tw_base";
+import { Tooltip } from "../index_with_tw_base";
 
 const meta = {
   title: "Primitives/Tooltip",
-  component: TooltipProvider,
-} satisfies Meta<typeof TooltipProvider>;
+  component: Tooltip,
+} satisfies Meta<typeof Tooltip>;
 
 export default meta;
+type Story = StoryObj<typeof meta>;
 
-export const TooltipExample = () => (
-  <Tooltip trigger={<div>Hover</div>} label={<p>Add to library</p>} />
+export const TooltipAbove: Story = {
+  args: {
+    label: "This is a tooltip",
+    children: "Hover me",
+    position: "above",
+  },
+};
+
+export const TooltipBelow: Story = {
+  args: {
+    label: "This is a tooltip",
+    children: "Hover me",
+    position: "below",
+  },
+};
+
+export const ToolTipWithContent = () => (
+  <div className="s-pl-32">
+    <Tooltip
+      contentChildren={
+        <div className="s-w-64">
+          <div className="s-flex s-flex-col s-gap-y-2 s-break-words">
+            <div className="s-flex s-font-semibold">
+              This is a more complex tooltip:
+            </div>
+            <div className="s-flex s-flex-wrap s-break-words">
+              It has some content that is long here and describes something
+              about the content associated with this.
+            </div>
+          </div>
+        </div>
+      }
+      position="below"
+    >
+      Hover me
+    </Tooltip>
+  </div>
 );
 
-export const TooltipWithManual = () => (
-  <TooltipProvider delayDuration={800} skipDelayDuration={500}>
-    <TooltipRoot
-      onOpenChange={(open: boolean) => {
-        console.log(`Is open: ${open}`);
-      }}
+export const TooltipLongLabel = () => (
+  <div className="s-pl-64">
+    <Tooltip
+      label="This is a tooltip with a very long label that should wrap onto multiple lines. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor."
+      position="below"
     >
-      <TooltipTrigger>
-        <Icon visual={RobotIcon} size="xs" />
-      </TooltipTrigger>
-      <TooltipContent side="right" sideOffset={50}>
-        This is a tooltip with a very long label that should wrap onto multiple
-        lines. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non
-        risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec,
-        ultricies sed, dolor.
-      </TooltipContent>
-    </TooltipRoot>
-  </TooltipProvider>
+      Hover me
+    </Tooltip>
+  </div>
 );

package/src/stories/Tree.stories.tsx

@@ -89,7 +89,7 @@ export const TreeExample = () => {
                     visual={FolderIcon}
                     collapsed={false}
                   >
-                    <Tree.Empty label="No documents" />
+                    <Tree.Empty label="No documents"/>
                   </Tree.Item>
                 </Tree>
               </Tree.Item>