@dust-tt/sparkle 0.2.183 → 0.2.184

package/src/components/ContextItem.tsx

@@ -0,0 +1,166 @@
+import React, { ComponentType, ReactNode } from "react";
+
+import { classNames } from "@sparkle/lib/utils";
+
+import { Icon } from "./Icon";
+
+type ContextItemProps = {
+  action?: ReactNode;
+  children?: ReactNode;
+  hasSeparator?: boolean;
+  hasSeparatorIfLast?: boolean;
+  subElement?: ReactNode;
+  title: ReactNode;
+  visual: ReactNode;
+  onClick?: () => void;
+};
+
+export function ContextItem({
+  action,
+  children,
+  hasSeparator = true,
+  hasSeparatorIfLast = false,
+  subElement,
+  title,
+  visual,
+  onClick,
+}: ContextItemProps) {
+  return (
+    <div
+      className={classNames(
+        hasSeparator ? "s-border-b s-border-structure-200" : "",
+        "s-flex s-w-full s-flex-col",
+        hasSeparatorIfLast ? "" : "last:s-border-none"
+      )}
+    >
+      <div
+        className={classNames(
+          "s-flex s-flex-row s-items-start s-gap-3 s-px-4 s-py-3",
+          onClick
+            ? "s-cursor-pointer s-transition s-duration-200 hover:s-bg-structure-50 active:s-bg-structure-100"
+            : ""
+        )}
+        onClick={onClick}
+      >
+        <div className="s-flex">{visual}</div>
+        <div className="s-mb-0.5 s-flex s-grow s-flex-col s-gap-0">
+          <div className="s-flex s-grow s-flex-row s-gap-3">
+            <div className="s-flex s-flex-col s-justify-center s-text-base s-font-semibold">
+              {title}
+            </div>
+            <div className="s-flex s-items-center s-gap-1 s-text-sm s-text-element-600">
+              {subElement}
+            </div>
+          </div>
+          <div>{children}</div>
+        </div>
+        <div>{action}</div>
+      </div>
+    </div>
+  );
+}
+
+interface ContextItemListProps {
+  children: ReactNode;
+  className?: string;
+  hasBorder?: boolean;
+}
+
+ContextItem.List = function ({
+  children,
+  className,
+  hasBorder,
+}: ContextItemListProps) {
+  // Ensure all children are of type ContextItem or ContextItem.SectionHeader
+  React.Children.forEach(children, (child) => {
+    if (child === null || child === undefined) {
+      return;
+    }
+    if (
+      !React.isValidElement(child) ||
+      (child.type !== ContextItem &&
+        child.type !== ContextItem.SectionHeader &&
+        // all children of child must be of type ContextItem or ContextItem.SectionHeader
+        React.Children.toArray(child.props.children).some(
+          (c) =>
+            !React.isValidElement(c) ||
+            (c.type !== ContextItem && c.type !== ContextItem.SectionHeader)
+        ))
+    ) {
+      throw new Error(
+        "All children of ContextItem.List must be of type ContextItem or ContextItem.SectionHeader"
+      );
+    }
+  });
+
+  return (
+    <div
+      className={classNames(
+        className ? className : "",
+        hasBorder ? "s-border-b s-border-t s-border-structure-200" : "",
+        "s-flex s-flex-col"
+      )}
+    >
+      {children}
+    </div>
+  );
+};
+
+interface ContextItemDescriptionProps {
+  children?: ReactNode;
+  description?: string;
+}
+
+ContextItem.Description = function ({
+  children,
+  description,
+}: ContextItemDescriptionProps) {
+  return (
+    <>
+      {description && (
+        <div className="s-text-sm s-font-normal s-text-element-700">
+          {description}
+        </div>
+      )}
+      {children && <>{children}</>}
+    </>
+  );
+};
+
+interface ContextItemVisualProps {
+  visual?: ComponentType<{ className?: string }>;
+}
+
+ContextItem.Visual = function ({ visual }: ContextItemVisualProps) {
+  return <Icon size="md" visual={visual} />;
+};
+
+interface ItemSectionHeaderProps {
+  title: string;
+  description?: string;
+  hasBorder?: boolean;
+}
+
+ContextItem.SectionHeader = function ({
+  title,
+  description,
+  hasBorder = true,
+}: ItemSectionHeaderProps) {
+  return (
+    <div
+      className={classNames(
+        "s-flex s-flex-col s-gap-0 s-pb-3 s-pt-7",
+        hasBorder ? "s-border-b s-border-structure-200" : ""
+      )}
+    >
+      <div className="s-text-xl s-font-medium s-text-element-900 dark:s-text-element-900-dark">
+        {title}
+      </div>
+      {description && (
+        <div className="s-text-sm s-font-normal s-text-element-700 dark:s-text-element-700-dark">
+          {description}
+        </div>
+      )}
+    </div>
+  );
+};

package/src/components/DataTable.tsx

@@ -0,0 +1,108 @@
+import React, { ReactNode } from "react";
+
+import { Page } from "@sparkle/index";
+import { ClipboardCheckIcon, ClipboardIcon, IconButton } from "@sparkle/index";
+import { useCopyToClipboard } from "@sparkle/lib/utils";
+
+type SupportedRowType = string | number;
+
+export interface DataTableProps {
+  name?: string;
+  columns: string[];
+  rows: SupportedRowType[][];
+  enableCopy?: boolean;
+  showLimit?: number;
+  downloadButton?: ReactNode;
+}
+
+export const DataTable = React.forwardRef<HTMLTableElement, DataTableProps>(
+  (
+    {
+      name,
+      columns,
+      rows,
+      enableCopy,
+      showLimit,
+      downloadButton,
+    }: DataTableProps,
+    ref
+  ) => {
+    const [isCopied, copyToClipboard] = useCopyToClipboard();
+
+    const handleCopyTable = async () => {
+      const columnHeaders = columns.join(",");
+      const data = rows.map((row) => row.join(",")).join("\n");
+      const clipboardText = `${columnHeaders}\n${data}`;
+
+      if (copyToClipboard) {
+        await copyToClipboard(
+          new ClipboardItem({
+            "text/plain": new Blob([clipboardText], {
+              type: "text/plain",
+            }),
+          })
+        );
+      }
+    };
+
+    const maxRows = showLimit ?? -1;
+
+    return (
+      <div className="s-mt-2 s-flex s-flex-col s-gap-2">
+        <div className="s-flex s-w-full s-items-center s-justify-between s-gap-1">
+          {name && <Page.H variant="h6">{name}</Page.H>}
+          {downloadButton}
+        </div>
+        <div className="s-relative">
+          <div className="relative overflow-x-auto s-dark:border-structure-200-dark s-w-auto s-rounded-lg s-border s-border-structure-200">
+            <table
+              ref={ref}
+              className="s-w-full s-table-auto s-divide-y s-divide-structure-200"
+            >
+              <thead className="s-dark:bg-structure-50-dark s-bg-structure-50 s-px-2 s-py-2">
+                <tr>
+                  <th className="s-px-4"></th>
+                  {columns.map((column, index) => (
+                    <th
+                      className="s-dark:text-element-700-dark s-whitespace-nowrap s-px-6 s-py-2 s-text-left s-text-xs s-font-semibold s-uppercase s-tracking-wider s-text-element-700"
+                      key={index}
+                    >
+                      {column}
+                    </th>
+                  ))}
+                </tr>
+              </thead>
+              <tbody className="s-dark:divide-structure-600 s-divide-y s-divide-structure-100 s-bg-white">
+                {rows.slice(0, maxRows).map((row, index) => (
+                  <tr key={index}>
+                    <td className="s-dark:text-element-800-dark s-px-4 s-text-sm s-text-element-600">
+                      {index + 1}
+                    </td>
+                    {row.map((cell, cellIndex) => (
+                      <td
+                        className="s-dark:text-element-800-dark s-px-6 s-py-3 s-text-sm s-text-element-800"
+                        key={cellIndex}
+                      >
+                        {cell}
+                      </td>
+                    ))}
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+            {enableCopy && (
+              <div className="s-absolute s-right-2 s-top-2 s-mx-2 s-rounded-xl s-bg-structure-50">
+                <IconButton
+                  variant="tertiary"
+                  size="xs"
+                  icon={isCopied ? ClipboardCheckIcon : ClipboardIcon}
+                  onClick={handleCopyTable}
+                />
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    );
+  }
+);

package/src/components/Dialog.tsx

@@ -0,0 +1,110 @@
+import { Dialog as HeadlessDialog, Transition } from "@headlessui/react";
+import React, { Fragment, useRef } from "react";
+
+import { ConfettiBackground, Spinner } from "@sparkle/index";
+import { classNames } from "@sparkle/lib/utils";
+
+import { Button } from "./Button";
+
+export type ModalProps = {
+  title: string;
+  children: React.ReactNode;
+  isOpen: boolean;
+  onCancel: () => void;
+  onValidate: () => void;
+  cancelLabel?: string;
+  validateLabel?: string;
+  validateVariant?: "primary" | "primaryWarning";
+  isSaving?: boolean;
+  backgroundType?: "confetti" | "snow" | "none";
+};
+
+export function Dialog({
+  isOpen,
+  children,
+  onCancel,
+  onValidate,
+  cancelLabel = "Cancel",
+  validateLabel = "Ok",
+  validateVariant = "primary",
+  title,
+  isSaving,
+  backgroundType = "none",
+}: ModalProps) {
+  const referentRef = useRef<HTMLDivElement>(null);
+
+  return (
+    <Transition show={isOpen} as={Fragment} appear={true}>
+      <HeadlessDialog as="div" className="s-relative s-z-50" onClose={onCancel}>
+        <Transition.Child
+          as={Fragment}
+          enter="s-ease-out s-duration-150"
+          enterFrom="s-opacity-0"
+          enterTo="s-opacity-100"
+          leave="s-ease-in s-duration-150"
+          leaveFrom="s-opacity-100"
+          leaveTo="s-opacity-0"
+        >
+          <div className="s-fixed s-inset-0 s-bg-structure-50/80 s-backdrop-blur-sm s-transition-opacity" />
+        </Transition.Child>
+
+        <div className="s-fixed s-inset-0 s-z-50">
+          <div className="s-flex s-min-h-full s-items-center s-justify-center">
+            <Transition.Child
+              as={Fragment}
+              enter="s-ease-out s-duration-300"
+              enterFrom="s-opacity-0 s-translate-y-4 s-scale-95"
+              enterTo="s-opacity-100 s-translate-y-0 s-scale-100"
+              leave="s-ease-in s-duration-200"
+              leaveFrom="s-opacity-100 s-translate-y-0 s-scale-100"
+              leaveTo="s-opacity-0 s-translate-y-4 s-scale-95"
+            >
+              <HeadlessDialog.Panel
+                className={classNames(
+                  "s-relative s-rounded-xl s-border s-border-structure-100 s-bg-structure-0 s-p-4 s-shadow-xl s-transition-all",
+                  "s-w-full sm:s-w-[448px]",
+                  "s-flex s-flex-col s-gap-6"
+                )}
+                ref={referentRef}
+              >
+                <HeadlessDialog.Title className="s-text-element-950 s-truncate s-text-lg s-font-medium">
+                  {title}
+                </HeadlessDialog.Title>
+                <div className="s-z-10 s-text-base s-text-element-700">
+                  {children}
+                </div>
+                <div className="s-z-10 s-flex s-w-full s-justify-end">
+                  <Button.List>
+                    {!isSaving && (
+                      <>
+                        <Button
+                          label={cancelLabel}
+                          variant="tertiary"
+                          onClick={onCancel}
+                        />
+                        <Button
+                          label={validateLabel}
+                          variant={validateVariant}
+                          onClick={onValidate}
+                        />
+                      </>
+                    )}
+                    {isSaving && <Spinner variant="color" />}
+                  </Button.List>
+                </div>
+                {backgroundType !== "none" && (
+                  <div className="s-absolute s-bottom-0 s-left-0 s-right-0 s-top-0 s-z-0">
+                    <ConfettiBackground
+                      variant={backgroundType}
+                      referentSize={referentRef}
+                    />
+                  </div>
+                )}
+              </HeadlessDialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </HeadlessDialog>
+    </Transition>
+  );
+}