@dust-tt/sparkle 0.2.183 → 0.2.184

package/src/components/Item.tsx

@@ -0,0 +1,327 @@
+import React, { ComponentType, MouseEvent, ReactNode } from "react";
+
+import {
+  noHrefLink,
+  SparkleContext,
+  SparkleContextLinkType,
+} from "@sparkle/context";
+import { ChevronRightIcon } from "@sparkle/icons/solid";
+import { classNames } from "@sparkle/lib/utils";
+
+import { Avatar } from "./Avatar";
+import { Icon } from "./Icon";
+
+const labelStyleClasses = {
+  item: "s-font-normal",
+  action: "s-font-semibold",
+  link: "s-font-semibold",
+  warning: "s-font-semibold",
+};
+
+const labelColorClasses = {
+  item: "s-text-element-600 dark:s-text-element-500-dark group-hover:s-text-action-500 group-active:s-text-action-700 dark:group-hover:s-text-action-600-dark dark:group-active:s-text-action-400-dark",
+  action:
+    "s-text-element-800 dark:s-text-element-800-dark group-hover:s-text-action-500 group-active:s-text-action-700 dark:group-hover:s-text-action-600-dark dark:group-active:s-text-action-400-dark",
+  link: "s-text-element-800 dark:s-text-element-800-dark group-hover:s-text-action-500 group-active:s-text-action-700 dark:group-hover:s-text-action-600-dark dark:group-active:s-text-action-400-dark",
+  warning:
+    "s-text-warning-500 dark:s-text-warning-400-dark group-hover:s-text-warning-400 group-active:s-text-warning-700 dark:group-hover:s-text-warning-600-dark dark:group-active:s-text-warning-400-dark",
+};
+
+const spacingClasses = {
+  sm: "s-py-2 s-gap-x-2",
+  md: "s-py-2.5 s-gap-x-3",
+  lg: "s-py-3 s-gap-x-3",
+};
+
+const iconClasses = {
+  item: "s-text-element-600 group-hover:s-text-action-400 group-active:s-text-action-700 dark:group-hover:s-text-action-600-dark dark:group-active:s-text-action-400-dark",
+  action:
+    "s-text-element-600 group-hover:s-text-action-400 group-active:s-text-action-700 dark:group-hover:s-text-action-600-dark dark:group-active:s-text-action-400-dark",
+  link: "s-text-brand group-hover:s-text-action-400 group-active:s-text-action-700 dark:group-hover:s-text-action-600-dark dark:group-active:s-text-action-400-dark",
+  warning:
+    "s-text-warning-400 group-hover:s-text-warning-300 group-active:s-text-warning-700 dark:group-hover:s-text-warning-600-dark dark:group-active:s-text-warning-400-dark",
+};
+
+type ItemProps = {
+  onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
+  style: "action" | "warning" | "item" | "link";
+  spacing?: "sm" | "md" | "lg";
+  selectable?: boolean;
+  selected?: boolean;
+  disabled?: boolean;
+  label: string;
+  description?: string;
+  visual?: string | React.ReactNode;
+  icon?: ComponentType;
+  action?: ComponentType;
+  hasAction?: boolean | "hover";
+  className?: string;
+  href?: string;
+  target?: string;
+};
+
+export function Item({
+  label,
+  description,
+  visual,
+  icon,
+  style = "action",
+  spacing = "sm",
+  action = ChevronRightIcon,
+  hasAction = true,
+  onClick,
+  selected = false,
+  disabled = false,
+  className = "",
+  href,
+  target,
+}: ItemProps) {
+  const { components } = React.useContext(SparkleContext);
+
+  const Link: SparkleContextLinkType = href ? components.link : noHrefLink;
+
+  let visualElement: React.ReactNode;
+
+  if (visual) {
+    visualElement = (
+      <Avatar
+        size={description ? "sm" : "xs"}
+        visual={visual}
+        disabled={disabled}
+        clickable
+      />
+    );
+  } else if (icon) {
+    visualElement = (
+      <Icon
+        visual={icon}
+        className={classNames(
+          "s-transition-colors s-duration-200 s-ease-out",
+          disabled
+            ? "s-text-element-500 dark:s-text-element-500-dark"
+            : selected
+              ? "s-text-action-400 dark:s-text-action-600-dark"
+              : iconClasses[style]
+        )}
+      />
+    );
+  }
+
+  const targetProps = target ? { target } : {};
+
+  return (
+    <Link
+      className={classNames(
+        "s-duration-400 s-group s-box-border s-flex s-select-none s-text-sm s-transition-colors s-ease-out",
+        spacingClasses[spacing],
+        disabled ? "" : "s-cursor-pointer",
+        className
+      )}
+      onClick={selected || disabled ? undefined : onClick}
+      aria-label={label}
+      href={href || "#"}
+      {...targetProps}
+    >
+      {visualElement}
+      <div
+        className={classNames(
+          "s-flex s-grow s-flex-col s-gap-0 s-overflow-hidden"
+        )}
+      >
+        <div
+          className={classNames(
+            "s-transition-colors s-duration-200 s-ease-out",
+            "s-grow s-truncate s-text-sm",
+            labelStyleClasses[style],
+            disabled
+              ? "s-text-element-600 dark:s-text-element-500-dark"
+              : selected
+                ? "s-text-action-500 dark:s-text-action-600-dark"
+                : labelColorClasses[style]
+          )}
+        >
+          {label}
+        </div>
+        <div
+          className={classNames(
+            "s-grow s-truncate s-text-xs",
+            disabled
+              ? "s-text-element-600 dark:s-text-element-500-dark"
+              : "s-text-element-700 dark:s-text-element-600-dark"
+          )}
+        >
+          {description}
+        </div>
+      </div>
+
+      <Icon
+        visual={action}
+        className={
+          hasAction
+            ? classNames(
+                "s-shrink-0 s-transition-all s-duration-200 s-ease-out",
+                hasAction === "hover"
+                  ? "s-opacity-0 group-hover:s-opacity-100"
+                  : "",
+                disabled
+                  ? "s-text-element-500 dark:s-text-element-500-dark"
+                  : selected
+                    ? "s-text-action-400 s-opacity-100 dark:s-text-action-600-dark"
+                    : classNames(
+                        "s-text-element-600 group-hover:s-text-action-400 group-active:s-text-action-700 dark:group-hover:s-text-action-600-dark dark:group-active:s-text-action-400-dark",
+                        hasAction ? "group-hover:s-opacity-100" : ""
+                      )
+              )
+            : "s-hidden"
+        }
+        size="sm"
+      />
+    </Link>
+  );
+}
+
+interface EntryItemProps {
+  onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
+  disabled?: boolean;
+  selected?: boolean;
+  label: string;
+  icon?: ComponentType;
+  className?: string;
+  href?: string;
+}
+
+Item.Entry = function (props: EntryItemProps) {
+  return <Item {...props} spacing="sm" style="item" hasAction={"hover"} />;
+};
+
+interface AvatarItemProps {
+  onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
+  disabled?: boolean;
+  label: string;
+  description?: string;
+  visual?: string | React.ReactNode;
+  className?: string;
+  hasAction?: boolean | "hover";
+  href?: string;
+}
+
+Item.Avatar = function ({
+  description,
+  hasAction = false,
+  ...otherProps
+}: AvatarItemProps) {
+  return (
+    <Item
+      {...otherProps}
+      style="action"
+      spacing={description ? "md" : "sm"}
+      description={description}
+      hasAction={hasAction}
+    />
+  );
+};
+
+interface NavigationListItemProps {
+  onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
+  selected?: boolean;
+  disabled?: boolean;
+  label: string;
+  description?: string;
+  icon?: ComponentType;
+  className?: string;
+  href?: string;
+  hasAction?: boolean | "hover";
+  action?: ComponentType;
+}
+
+Item.Navigation = function (props: NavigationListItemProps) {
+  return <Item {...props} style="action" spacing="md" />;
+};
+
+interface LinkItemProps {
+  onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
+  label: string;
+  description?: string;
+  visual?: string | React.ReactNode;
+  icon?: ComponentType;
+  className?: string;
+  href?: string;
+  target?: string;
+}
+
+Item.Link = function ({ ...props }: LinkItemProps) {
+  return (
+    <Item
+      {...props}
+      // Pass down additional props as needed
+      style="link"
+      hasAction={false}
+      spacing="lg"
+      // Add any conditions or logic for additional props
+    />
+  );
+};
+
+interface DropdownListItemProps {
+  style?: "default" | "warning";
+  onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
+  selected?: boolean;
+  disabled?: boolean;
+  label: string;
+  description?: string;
+  visual?: string | React.ReactNode;
+  icon?: ComponentType;
+  className?: string;
+  href?: string;
+}
+
+Item.Dropdown = function ({ style, ...props }: DropdownListItemProps) {
+  return (
+    <Item
+      {...props}
+      // Pass down additional props as needed
+      style={style === "default" ? "action" : "warning"}
+      hasAction={false}
+      // Add any conditions or logic for additional props
+    />
+  );
+};
+
+interface ListItemProps {
+  children: ReactNode;
+  className?: string;
+}
+
+interface ItemSectionHeaderProps {
+  label: string;
+  className?: string;
+  variant?: "primary" | "secondary";
+}
+
+Item.SectionHeader = function ({
+  label,
+  variant = "primary",
+  className = "",
+}: ItemSectionHeaderProps) {
+  return (
+    <div
+      className={classNames(
+        className,
+        variant === "primary"
+          ? "s-text-element-800 dark:s-text-element-800-dark"
+          : "s-text-element-600 dark:s-text-element-600-dark",
+        "s-pb-2 s-pt-6 s-text-xs s-font-medium s-uppercase"
+      )}
+    >
+      {label}
+    </div>
+  );
+};
+
+Item.List = function ({ children, className }: ListItemProps) {
+  return (
+    <div className={classNames(className ? className : "", "s-flex")}>
+      <div className={"s-flex s-w-full s-flex-col"}>{children}</div>
+    </div>
+  );
+};

package/src/components/Markdown.tsx

@@ -0,0 +1,167 @@
+import React from "react";
+import ReactMarkdown from "react-markdown";
+
+import { Button, ClipboardCheckIcon, ClipboardIcon } from "@sparkle/index";
+import { classNames } from "@sparkle/lib/utils";
+import { useCopyToClipboard } from "@sparkle/lib/utils";
+
+const textColor = "s-text-element-900";
+const paragraphSize = "s-text-base";
+const headingSize = {
+  sm: {
+    h1: "s-text-xl s-font-bold",
+    h2: "s-text-xl s-font-regular",
+    h3: "s-text-lg s-font-bold",
+  },
+  md: {
+    h1: "s-text-5xl s-font-semibold",
+    h2: "s-text-4xl s-font-semibold",
+    h3: "s-text-2xl s-font-semibold",
+  },
+};
+
+export function Markdown({
+  content,
+  size = "sm",
+  className = "",
+}: {
+  content: string;
+  size?: "sm" | "md";
+  className?: string;
+}) {
+  return (
+    <ReactMarkdown
+      components={{
+        h1: ({ children }) => (
+          <h1
+            className={classNames(
+              "s-pb-2 s-pt-4",
+              headingSize[size].h1,
+              textColor
+            )}
+          >
+            {children}
+          </h1>
+        ),
+        h2: ({ children }) => (
+          <h2
+            className={classNames(
+              "s-pb-2 s-pt-4",
+              headingSize[size].h2,
+              textColor
+            )}
+          >
+            {children}
+          </h2>
+        ),
+        h3: ({ children }) => (
+          <h3
+            className={classNames(
+              "s-pb-2 s-pt-4",
+              headingSize[size].h3,
+              textColor
+            )}
+          >
+            {children}
+          </h3>
+        ),
+        p: ({ children }) => (
+          <div
+            className={classNames(
+              "s-first:pt-0 s-last:pb-0 s-whitespace-pre-wrap s-py-2 s-text-base",
+              textColor,
+              paragraphSize
+            )}
+          >
+            {children}
+          </div>
+        ),
+        strong: ({ children }) => (
+          <strong className="s-font-semibold">{children}</strong>
+        ),
+        ul: ({ children }) => (
+          <ul
+            className={classNames(
+              "s-list-disc s-py-1 s-pl-7 first:s-pt-0 last:s-pb-0",
+              textColor,
+              paragraphSize
+            )}
+          >
+            {children}
+          </ul>
+        ),
+        ol: ({ children }) => (
+          <ol
+            className={classNames(
+              "s-list-decimal s-py-1 s-pl-6 first:s-pt-0 last:s-pb-0",
+              textColor,
+              paragraphSize
+            )}
+          >
+            {children}
+          </ol>
+        ),
+        li: ({ children }) => (
+          <li
+            className={classNames(
+              "s-py-1 s-pl-1 first:s-pt-0 last:s-pb-0",
+              textColor,
+              paragraphSize
+            )}
+          >
+            {children}
+          </li>
+        ),
+        hr: () => <div className="s-my-6 s-border-b s-border-structure-200" />,
+        blockquote: ({ children }) => {
+          const [isCopied, copyToClipboard] = useCopyToClipboard();
+
+          const childrenContent =
+            Array.isArray(children) && children[1]
+              ? children[1].props.children
+              : null;
+
+          const handleCopy = async () => {
+            void copyToClipboard(
+              new ClipboardItem({
+                "text/plain": new Blob([childrenContent ?? ""], {
+                  type: "text/plain",
+                }),
+              })
+            );
+          };
+
+          return (
+            <div className="s-my-2 s-flex s-w-auto s-flex-row s-rounded-3xl s-border s-border-structure-100 s-bg-structure-0 s-py-2 s-pl-5 s-pr-2">
+              <blockquote
+                className={classNames(
+                  "s-w-full s-italic",
+                  paragraphSize,
+                  "s-text-element-800"
+                )}
+              >
+                {children}
+              </blockquote>
+              {childrenContent && (
+                <Button
+                  size="xs"
+                  variant="tertiary"
+                  onClick={async (e) => {
+                    e.preventDefault();
+                    await handleCopy();
+                  }}
+                  label="Copy"
+                  labelVisible={false}
+                  icon={isCopied ? ClipboardCheckIcon : ClipboardIcon}
+                />
+              )}
+            </div>
+          );
+        },
+      }}
+      className={className}
+    >
+      {content}
+    </ReactMarkdown>
+  );
+}

package/src/components/Modal.tsx

@@ -0,0 +1,184 @@
+import { Dialog, Transition } from "@headlessui/react";
+import React, { Fragment } from "react";
+
+import { classNames } from "@sparkle/lib/utils";
+
+import { BarHeader, BarHeaderButtonBarProps } from "./BarHeader";
+import { Button, ButtonProps } from "./Button";
+
+export enum ModalType {
+  Dialogue = "dialogue",
+  FullScreen = "full-screen",
+  Side = "side",
+}
+
+const variantToType = {
+  "full-screen": ModalType.FullScreen,
+  "side-md": ModalType.Side,
+  dialogue: ModalType.Dialogue,
+  "side-sm": ModalType.Side,
+};
+const variantSize = {
+  "full-screen": "",
+  "side-md": "sm:s-w-[50rem]",
+  dialogue: "",
+  "side-sm": "sm:s-w-[448px]",
+};
+
+const modalStyles = {
+  [ModalType.Side]: {
+    containerClasses: "s-h-full s-ml-auto",
+    panelClasses:
+      "s-h-full s-max-h-full s-shadow-xl s-border s-border-structure-100 s-w-full s-max-w-full",
+    transitionEnterFrom: "s-opacity-0 s-translate-x-16",
+    transitionEnterTo: "s-opacity-100 s-translate-x-0",
+    transitionLeaveFrom: "s-opacity-100 s-translate-x-0",
+    transitionLeaveTo: "s-opacity-0 s-translate-x-16",
+    innerContainerClasses: "s-h-full s-overflow-y-auto",
+  },
+  [ModalType.FullScreen]: {
+    containerClasses:
+      "s-flex s-items-center s-justify-center s-h-full s-p-0 s-shadow-xl",
+    panelClasses: "s-m-0 s-h-full s-max-h-full s-w-full s-max-w-full s-r-0",
+    transitionEnterFrom: "s-opacity-0 s-translate-y-4 s-scale-95 s-rounded-xl",
+    transitionEnterTo: "s-opacity-100 s-translate-y-0 s-scale-100 s-rounded-0",
+    transitionLeaveFrom:
+      "s-opacity-100 s-translate-y-0 s-scale-100 s-rounded-0",
+    transitionLeaveTo: "s-opacity-0 s-translate-y-4 s-scale-95 s-rounded-xl",
+    innerContainerClasses: "s-h-full s-overflow-y-auto",
+  },
+  [ModalType.Dialogue]: {
+    containerClasses:
+      "s-flex s-items-center s-justify-center s-min-h-full s-p-4",
+    panelClasses:
+      "s-w-full sm:s-w-[448px] overflow-hidden s-shadow-2xl s-rounded-xl s-border s-border-structure-100",
+    transitionEnterFrom: "s-opacity-0 s-translate-y-4 s-scale-95",
+    transitionEnterTo: "s-opacity-100 s-translate-y-0 s-scale-100",
+    transitionLeaveFrom: "s-opacity-100 s-translate-y-0 s-scale-100",
+    transitionLeaveTo: "s-opacity-0 s-translate-y-4 s-scale-95",
+    innerContainerClasses: "",
+  },
+};
+
+export type ModalProps = {
+  isOpen: boolean;
+  onClose: () => void;
+  action?: ButtonProps;
+  children: React.ReactNode;
+  hasChanged: boolean;
+  onSave?: () => void;
+  saveLabel?: string;
+  isSaving?: boolean;
+  savingLabel?: string;
+  title?: string;
+  variant?: "full-screen" | "side-sm" | "side-md" | "dialogue";
+  className?: string;
+};
+
+const getModalClasses = (type: ModalType) => modalStyles[type] || {};
+
+export function Modal({
+  isOpen,
+  onClose,
+  action,
+  children,
+  hasChanged,
+  onSave,
+  saveLabel = "Save",
+  isSaving,
+  savingLabel,
+  title,
+  variant = "side-sm",
+  className,
+}: ModalProps) {
+  const type = variantToType[variant];
+
+  if (variant === "dialogue") {
+    console.warn(
+      "Dialogue variant of Modal is deprecated. Please use either another variant of Modal or the Dialog component."
+    );
+  }
+
+  const buttonBarProps: BarHeaderButtonBarProps = hasChanged
+    ? {
+        variant: "validate",
+        onCancel: onClose,
+        onSave: onSave,
+        saveLabel,
+        isSaving,
+        savingLabel,
+      }
+    : {
+        variant: "close",
+        onClose: onClose,
+      };
+
+  const {
+    containerClasses,
+    transitionEnterFrom,
+    transitionLeaveFrom,
+    transitionEnterTo,
+    transitionLeaveTo,
+    panelClasses,
+    innerContainerClasses,
+  } = getModalClasses(type);
+
+  return (
+    <Transition show={isOpen} as={Fragment} appear={true}>
+      <Dialog
+        as="div"
+        className="s-fixed s-absolute s-inset-0 s-z-50 s-overflow-hidden"
+        onClose={onClose}
+      >
+        {/* Smoke screen and transition */}
+        <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>
+
+        {/* Panel and transition */}
+        <div className={classNames(containerClasses, variantSize[variant])}>
+          <Transition.Child
+            as={Fragment}
+            enter="s-ease-out s-duration-300"
+            enterFrom={transitionEnterFrom}
+            enterTo={transitionEnterTo}
+            leave="s-ease-in s-duration-200"
+            leaveFrom={transitionLeaveFrom}
+            leaveTo={transitionLeaveTo}
+          >
+            <Dialog.Panel
+              className={classNames(
+                "s-absolute s-transform s-bg-structure-0 s-px-3 s-transition-all sm:s-px-4",
+                panelClasses,
+                variantSize[variant]
+              )}
+            >
+              <BarHeader
+                title={title || ""}
+                leftActions={action ? <Button {...action} /> : undefined}
+                rightActions={<BarHeader.ButtonBar {...buttonBarProps} />}
+              />
+              <div
+                className={classNames(
+                  "s-pb-6 s-pt-16",
+                  innerContainerClasses,
+                  className ?? ""
+                )}
+              >
+                {children}
+              </div>
+            </Dialog.Panel>
+          </Transition.Child>
+        </div>
+      </Dialog>
+    </Transition>
+  );
+}