@dust-tt/sparkle 0.2.596 → 0.2.597

package/src/components/MultiPageDialog.tsx

@@ -2,7 +2,7 @@ import { cva } from "class-variance-authority";
 import * as React from "react";
 import { useState } from "react";
 
-import { Button, Icon, ScrollArea, Separator } from "@sparkle/components";
+import { Avatar, Button, ScrollArea, Separator } from "@sparkle/components";
 import {
   Dialog,
   DialogClose,
@@ -51,7 +51,10 @@ const MultiPageDialogFooter = ({
 }: MultiPageDialogFooterProps) => {
   const content = (
     <div
-      className={cn("s-flex s-flex-none s-flex-col s-gap-3 s-p-4", className)}
+      className={cn(
+        "s-flex s-flex-none s-flex-col s-gap-3 s-px-4 s-py-2",
+        className
+      )}
       {...props}
     >
       {children}
@@ -192,7 +195,7 @@ const MultiPageDialogContent = React.forwardRef<
             hideButton={hideCloseButton || showHeaderNavigation}
             className="s-flex-none"
           >
-            <div className="s-flex s-items-center s-justify-between s-pr-8">
+            <div className="s-flex s-items-center s-justify-between">
               <div className="s-flex s-items-center s-gap-3">
                 {showNavigation && showHeaderNavigation && (
                   <div className="s-flex s-items-center s-gap-1">
@@ -224,7 +227,7 @@ const MultiPageDialogContent = React.forwardRef<
                 )}
                 <div
                   className={cn(
-                    "s-flex s-items-center s-gap-2 s-transition-all s-duration-200 s-ease-out",
+                    "s-flex s-items-center s-gap-3 s-transition-all s-duration-200 s-ease-out",
                     {
                       "s-transform s-opacity-0": isTransitioning,
                       "s-translate-x-1":
@@ -235,15 +238,16 @@ const MultiPageDialogContent = React.forwardRef<
                     }
                   )}
                 >
-                  {currentPage.icon && (
-                    <Icon
-                      visual={currentPage.icon}
-                      size="lg"
-                      className="s-text-foreground"
-                    />
-                  )}
                   <div>
-                    <DialogTitle>{currentPage.title}</DialogTitle>
+                    <DialogTitle
+                      visual={
+                        currentPage.icon ? (
+                          <Avatar icon={currentPage.icon} size="sm" />
+                        ) : undefined
+                      }
+                    >
+                      {currentPage.title}
+                    </DialogTitle>
                     {currentPage.description && (
                       <DialogDescription>
                         {currentPage.description}
@@ -253,8 +257,13 @@ const MultiPageDialogContent = React.forwardRef<
                 </div>
               </div>
               {showNavigation && pages.length > 1 && (
-                <div className="s-text-xs s-text-muted-foreground dark:s-text-muted-foreground-night">
-                  {currentPageIndex + 1} / {pages.length}
+                <div
+                  className={cn(
+                    "s-text-xs s-font-semibold s-text-muted-foreground-night",
+                    !hideCloseButton && "s-pr-8"
+                  )}
+                >
+                  {currentPageIndex + 1}/{pages.length}
                 </div>
               )}
             </div>
@@ -286,7 +295,7 @@ const MultiPageDialogContent = React.forwardRef<
               <ScrollArea
                 className={currentPage.fixedContent ? "s-flex-1" : "s-h-full"}
               >
-                <div className="s-flex s-flex-col s-gap-2 s-px-5 s-py-4">
+                <div className="s-flex s-flex-col s-gap-2 s-px-5">
                   {currentPage.content}
                 </div>
               </ScrollArea>

package/src/components/Sheet.tsx

@@ -22,7 +22,7 @@ const SheetOverlay = React.forwardRef<
   <SheetPrimitive.Overlay
     className={cn(
       "s-fixed s-inset-0 s-z-50",
-      "s-bg-muted-foreground/75 dark:s-bg-muted-foreground-night/75",
+      "s-bg-muted-foreground/75 dark:s-bg-muted-background-night/75",
       "data-[state=open]:s-animate-in data-[state=closed]:s-animate-out",
       "data-[state=closed]:s-fade-out-0 data-[state=open]:s-fade-in-0",
       className

package/src/stories/MultiPageDialog.stories.tsx

@@ -3,13 +3,21 @@ import React, { useState } from "react";
 
 import { SearchInput } from "@sparkle/components";
 import { Button } from "@sparkle/components/Button";
+import { Checkbox } from "@sparkle/components/Checkbox";
+import { CollapsibleComponent } from "@sparkle/components/Collapsible";
 import {
   MultiPageDialog,
   MultiPageDialogContent,
   type MultiPageDialogPage,
   MultiPageDialogTrigger,
 } from "@sparkle/components/MultiPageDialog";
-import { Cog6ToothIcon, DocumentTextIcon, UserIcon } from "@sparkle/icons/app";
+import {
+  Cog6ToothIcon,
+  DocumentTextIcon,
+  ExclamationCircleIcon,
+  UserIcon,
+} from "@sparkle/icons/app";
+import { GmailLogo } from "@sparkle/logo/platforms";
 
 const meta: Meta<typeof MultiPageDialogContent> = {
   title: "Primitives/MultiPageDialog",
@@ -827,7 +835,6 @@ export const ScrollableContent: Story = {
       {
         id: "summary",
         title: "Summary",
-        description: "Review your information",
         icon: Cog6ToothIcon,
         content: (
           <div className="s-space-y-4">
@@ -888,3 +895,267 @@ export const ScrollableContent: Story = {
     );
   },
 };
+
+export const ActionValidation: Story = {
+  render: () => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [currentPageId, setCurrentPageId] = useState("0");
+    const [neverAskAgain, setNeverAskAgain] = useState(false);
+    const [errorMessage, setErrorMessage] = useState<string | null>(null);
+    const [isValidating, setIsValidating] = useState(false);
+
+    const validationPages = [
+      {
+        id: "0",
+        title: "Tool Validation Required",
+        icon: GmailLogo,
+        content: (
+          <div className="s-space-y-6 s-pt-4">
+            <div>
+              <p className="s-mb-6 s-text-sm s-text-muted-foreground">
+                Allow{" "}
+                <span className="s-font-semibold">@Marketing Assistant</span> to
+                use the tool <span className="s-font-semibold">Send Email</span>{" "}
+                from <span className="s-font-semibold">Gmail</span>?
+              </p>
+
+              <div className="s-space-y-3">
+                <CollapsibleComponent
+                  triggerChildren={
+                    <span className="s-text-sm s-font-medium s-text-muted-foreground dark:s-text-muted-foreground-night">
+                      Details
+                    </span>
+                  }
+                  contentChildren={
+                    <div className="s-mt-2 s-rounded-md s-border s-bg-muted s-p-3">
+                      <h4 className="s-mb-2 s-text-sm s-font-medium">
+                        Email Details
+                      </h4>
+                      <div className="s-space-y-2 s-text-sm">
+                        <div>
+                          <span className="s-font-medium">To:</span>{" "}
+                          john.doe@example.com
+                        </div>
+                        <div>
+                          <span className="s-font-medium">Subject:</span>{" "}
+                          Welcome to our platform!
+                        </div>
+                        <div>
+                          <span className="s-font-medium">Content:</span> Thank
+                          you for signing up...
+                        </div>
+                      </div>
+                    </div>
+                  }
+                />
+
+                {errorMessage && (
+                  <div className="s-flex s-items-center s-gap-2 s-text-sm s-font-medium s-text-warning-800">
+                    <ExclamationCircleIcon className="s-h-4 s-w-4" />
+                    {errorMessage}
+                  </div>
+                )}
+
+                <div className="s-mt-4">
+                  <label className="s-copy-xs s-flex s-w-fit s-cursor-pointer s-flex-row s-items-center s-gap-2 s-py-2 s-pr-2 s-font-normal">
+                    <Checkbox
+                      size="xs"
+                      checked={neverAskAgain}
+                      onCheckedChange={(check) => {
+                        setNeverAskAgain(!!check);
+                      }}
+                    />
+                    <span>Always allow this tool</span>
+                  </label>
+                </div>
+              </div>
+            </div>
+          </div>
+        ),
+      },
+      {
+        id: "1",
+        title: "Bulk Email Validation",
+        icon: GmailLogo,
+        content: (
+          <div className="s-space-y-6 s-pt-4">
+            <div>
+              <p className="s-mb-6 s-text-sm s-text-muted-foreground">
+                Allow{" "}
+                <span className="s-font-semibold">@Marketing Assistant</span> to
+                use the tool{" "}
+                <span className="s-font-semibold">Send Bulk Email</span> from{" "}
+                <span className="s-font-semibold">Gmail</span>?
+              </p>
+
+              <div className="s-space-y-3">
+                <CollapsibleComponent
+                  triggerChildren={
+                    <span className="s-text-sm s-font-medium s-text-muted-foreground dark:s-text-muted-foreground-night">
+                      Details
+                    </span>
+                  }
+                  contentChildren={
+                    <div className="s-mt-2 s-rounded-md s-border s-bg-muted s-p-3">
+                      <h4 className="s-mb-2 s-text-sm s-font-medium">
+                        Campaign Details
+                      </h4>
+                      <div className="s-space-y-2 s-text-sm">
+                        <div>
+                          <span className="s-font-medium">Recipients:</span>{" "}
+                          1,250 subscribers
+                        </div>
+                        <div>
+                          <span className="s-font-medium">Subject:</span>{" "}
+                          Monthly Newsletter - March 2024
+                        </div>
+                        <div>
+                          <span className="s-font-medium">Template:</span>{" "}
+                          Newsletter Template v2
+                        </div>
+                      </div>
+                    </div>
+                  }
+                />
+
+                <div className="s-rounded-md s-border s-bg-blue-50 s-p-3">
+                  <h4 className="s-mb-1 s-text-sm s-font-medium s-text-blue-900">
+                    Security Notice
+                  </h4>
+                  <p className="s-text-xs s-text-blue-700">
+                    This action will send emails to a large number of
+                    recipients. Please review the content carefully.
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        ),
+      },
+      {
+        id: "2",
+        title: "Email Template Validation",
+        icon: GmailLogo,
+        content: (
+          <div className="s-space-y-6 s-pt-4">
+            <div>
+              <p className="s-mb-6 s-text-sm s-text-muted-foreground">
+                Allow{" "}
+                <span className="s-font-semibold">@Marketing Assistant</span> to
+                use the tool{" "}
+                <span className="s-font-semibold">Create Email Template</span>{" "}
+                from <span className="s-font-semibold">Gmail</span>?
+              </p>
+
+              <div className="s-space-y-3">
+                <CollapsibleComponent
+                  triggerChildren={
+                    <span className="s-text-sm s-font-medium s-text-muted-foreground dark:s-text-muted-foreground-night">
+                      Details
+                    </span>
+                  }
+                  contentChildren={
+                    <div className="s-mt-2 s-rounded-md s-border s-bg-muted s-p-3">
+                      <h4 className="s-mb-2 s-text-sm s-font-medium">
+                        Template Details
+                      </h4>
+                      <div className="s-space-y-2 s-text-sm">
+                        <div>
+                          <span className="s-font-medium">Name:</span> Welcome
+                          Series - Day 1
+                        </div>
+                        <div>
+                          <span className="s-font-medium">Category:</span>{" "}
+                          Onboarding
+                        </div>
+                        <div>
+                          <span className="s-font-medium">Variables:</span>{" "}
+                          {"{{name}}"}, {"{{company}}"}, {"{{trial_end_date}}"}
+                        </div>
+                      </div>
+                    </div>
+                  }
+                />
+
+                <div className="s-rounded-md s-border s-bg-green-50 s-p-3">
+                  <h4 className="s-mb-1 s-text-sm s-font-medium s-text-green-900">
+                    Low Risk Action
+                  </h4>
+                  <p className="s-text-xs s-text-green-700">
+                    This action only creates a template and does not send any
+                    emails.
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        ),
+      },
+    ];
+
+    const isLastPage =
+      currentPageId === (validationPages.length - 1).toString();
+
+    const handleApprove = async () => {
+      setIsValidating(true);
+      // Simulate API call
+      await new Promise((resolve) => setTimeout(resolve, 1000));
+      setIsValidating(false);
+      if (isLastPage) {
+        setIsOpen(false);
+      } else {
+        // Move to next page
+        const nextPageIndex = parseInt(currentPageId) + 1;
+        setCurrentPageId(nextPageIndex.toString());
+      }
+    };
+
+    const handleDecline = async () => {
+      setIsValidating(true);
+      // Simulate API call
+      await new Promise((resolve) => setTimeout(resolve, 500));
+      setIsValidating(false);
+      setErrorMessage("Action was declined by user");
+      if (isLastPage) {
+        setIsOpen(false);
+      }
+    };
+
+    return (
+      <MultiPageDialog open={isOpen} onOpenChange={setIsOpen}>
+        <MultiPageDialogTrigger asChild>
+          <Button label="Open Email Validation Dialog" />
+        </MultiPageDialogTrigger>
+        <MultiPageDialogContent
+          pages={validationPages}
+          currentPageId={currentPageId}
+          onPageChange={setCurrentPageId}
+          size="md"
+          isAlertDialog
+          showNavigation={true}
+          showHeaderNavigation={false}
+          hideCloseButton={true}
+          footerContent={
+            <div className="s-flex s-flex-row s-justify-end s-gap-2">
+              <Button
+                variant="outline"
+                label={"Decline"}
+                onClick={handleDecline}
+                disabled={isValidating}
+                isLoading={isValidating}
+              />
+              <Button
+                variant="highlight"
+                label={"Allow"}
+                autoFocus
+                onClick={handleApprove}
+                disabled={isValidating}
+                isLoading={isValidating}
+              />
+            </div>
+          }
+        />
+      </MultiPageDialog>
+    );
+  },
+};