@dust-tt/sparkle 0.2.183 → 0.2.184

package/src/components/DropdownMenu.tsx

@@ -0,0 +1,476 @@
+import { Menu, Transition } from "@headlessui/react";
+import React, {
+  ComponentType,
+  Fragment,
+  JSXElementConstructor,
+  MutableRefObject,
+  ReactElement,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+
+import {
+  ChevronDownIcon,
+  ChevronRightIcon,
+  ChevronUpDownIcon,
+} from "@sparkle/icons/solid";
+import { classNames } from "@sparkle/lib/utils";
+
+import { Icon } from "./Icon";
+import { Item as StandardItem } from "./Item";
+import { Tooltip, TooltipProps } from "./Tooltip";
+
+const ButtonRefContext =
+  React.createContext<MutableRefObject<HTMLButtonElement | null> | null>(null);
+
+const labelClasses = {
+  base: "s-text-element-900 s-inline-flex s-transition-colors s-ease-out s-duration-400 s-box-border s-gap-x-2 s-select-none",
+  hover: "group-hover:s-text-action-500",
+  active: "active:s-text-action-700",
+  dark: {
+    base: "dark:s-text-element-900-dark",
+    hover: "dark:group-hover:s-text-action-400",
+    active: "dark:active:s-text-action-600",
+    disabled: "dark:s-element-500-dark",
+  },
+  disabled: "s-opacity-50",
+};
+
+const labelSizeClasses = {
+  sm: "s-text-sm",
+  md: "s-text-base",
+};
+
+const iconClasses = {
+  base: "s-text-element-700 s-transition-colors s-ease-out s-duration-400",
+  hover: "group-hover:s-text-action-500",
+  active: "active:s-text-action-700",
+  disabled: "s-opacity-50",
+  dark: {
+    base: "dark:s-text-element-700-dark",
+    hover: "dark:group-hover:s-text-action-500-dark",
+    active: "dark:active:s-text-action-600",
+  },
+};
+
+const chevronClasses = {
+  base: "s-text-element-600 s-mt-0.5",
+  hover: "group-hover:s-text-action-400",
+  disabled: "s-element-500",
+  dark: {
+    base: "dark:s-text-element-600-dark",
+    hover: "dark:group-hover:s-text-action-500-dark",
+    disabled: "dark:s-element-500-dark",
+  },
+};
+
+export interface DropdownMenuProps {
+  className?: string;
+  children:
+    | React.ReactNode
+    | (({
+        close,
+      }: {
+        close: () => void;
+      }) => ReactElement<unknown, string | JSXElementConstructor<unknown>>);
+}
+
+export function DropdownMenu({ children, className = "" }: DropdownMenuProps) {
+  const buttonRef = useRef(null);
+  return (
+    <ButtonRefContext.Provider value={buttonRef}>
+      <Menu
+        as="div"
+        className={classNames(className, "s-relative s-inline-block")}
+      >
+        {children}
+      </Menu>
+    </ButtonRefContext.Provider>
+  );
+}
+
+export interface DropdownButtonProps {
+  label?: string;
+  type?: "menu" | "submenu" | "select";
+  size?: "sm" | "md";
+  tooltip?: string;
+  tooltipPosition?: TooltipProps["position"];
+  icon?: ComponentType;
+  className?: string;
+  disabled?: boolean;
+  children?: React.ReactNode;
+  onClick?: () => void;
+}
+
+DropdownMenu.Button = function ({
+  label,
+  type = "menu",
+  size = "sm",
+  tooltip,
+  icon,
+  children,
+  tooltipPosition = "above",
+  className = "",
+  disabled = false,
+  onClick,
+}: DropdownButtonProps) {
+  const finalLabelClasses = classNames(
+    labelClasses.base,
+    labelSizeClasses[size],
+    labelClasses.dark.base,
+    !disabled ? labelClasses.active : "",
+    !disabled ? labelClasses.dark.active : "",
+    !disabled ? labelClasses.hover : "",
+    !disabled ? labelClasses.dark.hover : "",
+    disabled ? labelClasses.disabled : ""
+  );
+
+  const finalIconClasses = classNames(
+    iconClasses.base,
+    iconClasses.dark.base,
+    !disabled ? iconClasses.hover : "",
+    !disabled ? iconClasses.dark.hover : "",
+    disabled ? iconClasses.disabled : ""
+  );
+
+  const finalChevronClasses = classNames(
+    chevronClasses.base,
+    !disabled ? chevronClasses.hover : "",
+    chevronClasses.dark.base,
+    !disabled ? chevronClasses.dark.hover : "",
+    disabled ? chevronClasses.disabled : ""
+  );
+
+  const buttonRef = useContext(ButtonRefContext);
+
+  if (children) {
+    return (
+      <Menu.Button
+        as="div"
+        disabled={disabled}
+        ref={buttonRef}
+        className={classNames(
+          disabled ? "s-cursor-default" : "s-cursor-pointer",
+          className,
+          "s-group s-flex s-justify-items-center s-text-sm s-font-medium focus:s-outline-none focus:s-ring-0",
+          label ? "s-gap-1.5" : "s-gap-0"
+        )}
+        onClick={onClick}
+      >
+        {tooltip ? (
+          <Tooltip position={tooltipPosition} label={tooltip}>
+            {children}
+          </Tooltip>
+        ) : (
+          children
+        )}
+      </Menu.Button>
+    );
+  }
+
+  const chevronIcon =
+    type === "select"
+      ? ChevronUpDownIcon
+      : type === "submenu"
+        ? ChevronRightIcon
+        : ChevronDownIcon;
+
+  return (
+    <>
+      {tooltip ? (
+        <Tooltip label={tooltip} position={tooltipPosition}>
+          <Menu.Button
+            disabled={disabled}
+            ref={buttonRef}
+            className={classNames(
+              disabled ? "s-cursor-default" : "s-cursor-pointer",
+              className,
+              "s-group s-flex s-justify-items-center s-text-sm s-font-medium focus:s-outline-none focus:s-ring-0",
+              label ? (size === "md" ? "s-gap-2" : "s-gap-1.5") : "s-gap-0.5"
+            )}
+          >
+            <Icon visual={icon} size={size} className={finalIconClasses} />
+            <Icon
+              visual={chevronIcon}
+              size={size === "sm" ? "xs" : "sm"}
+              className={finalChevronClasses}
+            />
+          </Menu.Button>
+        </Tooltip>
+      ) : (
+        <Menu.Button
+          disabled={disabled}
+          ref={buttonRef}
+          className={classNames(
+            disabled ? "s-cursor-default" : "s-cursor-pointer",
+            className,
+            "s-group s-flex s-justify-items-center s-text-sm s-font-medium focus:s-outline-none focus:s-ring-0",
+            label ? (size === "md" ? "s-gap-2" : "s-gap-1.5") : "s-gap-0.5",
+            type === "submenu" ? "s-opacity-50" : ""
+          )}
+        >
+          <Icon visual={icon} size={size} className={finalIconClasses} />
+          <span
+            className={classNames(
+              finalLabelClasses,
+              type === "submenu" ? "s-w-full" : ""
+            )}
+          >
+            {label}
+          </span>
+          <Icon
+            visual={chevronIcon}
+            size={size === "sm" ? "xs" : "sm"}
+            className={finalChevronClasses}
+          />
+        </Menu.Button>
+      )}
+    </>
+  );
+};
+
+interface DropdownItemProps {
+  variant?: "default" | "warning";
+  label: string;
+  description?: string;
+  href?: string;
+  disabled?: boolean;
+  visual?: string | React.ReactNode;
+  icon?: ComponentType;
+  onClick?: () => void;
+  selected?: boolean;
+  hasChildren?: boolean;
+  children?: React.ReactNode;
+}
+
+DropdownMenu.Item = function ({
+  variant = "default",
+  label,
+  description,
+  href,
+  disabled,
+  visual,
+  icon,
+  onClick,
+  hasChildren,
+  children,
+  selected = false,
+}: DropdownItemProps) {
+  return (
+    // need to use as="div" -- otherwise we get a "forwardRef" error in the console
+    <Menu.Item disabled={disabled} as="div">
+      {hasChildren ? (
+        <DropdownMenu className="s-w-full s-gap-x-2 s-py-2">
+          <DropdownMenu.Button
+            label={label}
+            type="submenu"
+            className="s-w-full"
+          />
+          {children}
+        </DropdownMenu>
+      ) : (
+        <StandardItem.Dropdown
+          style={variant}
+          className="s-w-full"
+          href={href}
+          onClick={onClick}
+          label={label}
+          visual={visual}
+          icon={icon}
+          description={description}
+          selected={selected}
+        />
+      )}
+    </Menu.Item>
+  );
+};
+
+interface DropdownSectionHeaderProps {
+  label: string;
+}
+
+DropdownMenu.SectionHeader = function ({ label }: DropdownSectionHeaderProps) {
+  return (
+    // need to use as="div" -- otherwise we get a "forwardRef" error in the console
+    <Menu.Item as="div">
+      <div
+        className={classNames(
+          "s-w-full",
+          "s-text-element-600 dark:s-text-element-600-dark",
+          "s-pb-3 s-pt-4 s-text-xs s-font-medium s-uppercase"
+        )}
+      >
+        {label}
+      </div>
+    </Menu.Item>
+  );
+};
+
+type ItemsVariantType = "default" | "no-padding";
+
+const classNamesForVariant = (
+  variant: ItemsVariantType,
+  hasDropdownItem: boolean
+) => {
+  switch (variant) {
+    case "no-padding":
+      return "";
+
+    case "default":
+      return `s-px-5 ${hasDropdownItem ? "s-py-1.5" : "s-py-4"}`;
+  }
+};
+
+interface DropdownItemsProps {
+  origin?: "topLeft" | "topRight" | "bottomLeft" | "bottomRight" | "auto";
+  width?: number;
+  marginLeft?: number;
+  children: React.ReactNode;
+  topBar?: React.ReactNode;
+  bottomBar?: React.ReactNode;
+  onKeyDown?: (e: React.KeyboardEvent) => void;
+  overflow?: "visible" | "auto";
+  variant?: ItemsVariantType;
+}
+
+DropdownMenu.Items = function ({
+  origin = "auto",
+  width = 160,
+  marginLeft,
+  children,
+  topBar,
+  bottomBar,
+  onKeyDown,
+  overflow = "auto",
+  variant = "default",
+}: DropdownItemsProps) {
+  const buttonRef = useContext(ButtonRefContext);
+  const [buttonHeight, setButtonHeight] = useState(0);
+
+  if (origin === "auto") {
+    origin = findOriginFromButton(buttonRef);
+  }
+  useEffect(() => {
+    if (buttonRef && buttonRef.current) {
+      setButtonHeight(buttonRef.current.offsetHeight);
+    }
+  }, []);
+
+  // Check if any child is a Dropdown.Item
+  const hasDropdownItem = React.Children.toArray(children).some(
+    (child) =>
+      React.isValidElement(child) &&
+      (child.type === DropdownMenu.Item || child.props?.hasChildren)
+  );
+
+  const getOriginClass = (origin: string) => {
+    switch (origin) {
+      case "topLeft":
+        return `s-origin-top-left s-left-0`;
+      case "topRight":
+        return `s-origin-top-right s-right-0`;
+      case "bottomLeft":
+        return "s-origin-bottom-left s-left-0 s-bottom-6";
+      case "bottomRight":
+        return "s-origin-bottom-right s-right-0 s-bottom-6";
+      default:
+        return "s-origin-top-right";
+    }
+  };
+
+  const getOriginTransClass = (origin: string) => {
+    switch (origin) {
+      case "topLeft":
+        return "s-transform s-opacity-0 s-scale-95 -s-translate-y-5";
+      case "topRight":
+        return "s-transform s-opacity-0 s-scale-95 -s-translate-y-5";
+      case "bottomLeft":
+        return "s-transform s-opacity-0 s-scale-95 s-translate-y-5";
+      case "bottomRight":
+        return "s-transform s-opacity-0 s-scale-95 s-translate-y-5";
+      default:
+        return "s-origin-top-right";
+    }
+  };
+
+  const getOverflowClass = (overflow: string) => {
+    switch (overflow) {
+      case "visible":
+        return "s-overflow-visible";
+      case "auto":
+        return "s-max-h-[344px] s-overflow-auto";
+      default:
+        return "s-max-h-[344px] s-overflow-auto";
+    }
+  };
+
+  const styleInsert = (origin: string, marginLeft?: number) => {
+    const style: { width: string; top?: string; left?: string } = {
+      width: `${width}px`,
+    };
+
+    if (marginLeft) {
+      style["left"] = `${marginLeft}px`;
+    }
+
+    if (origin === "topLeft" || origin === "topRight") {
+      style["top"] = `${buttonHeight + 8}px`;
+    }
+
+    return style;
+  };
+
+  return (
+    <Transition
+      as={Fragment}
+      enter="s-transition s-ease-out s-duration-200"
+      enterFrom={getOriginTransClass(origin)}
+      enterTo="s-transform s-opacity-100 s-scale-100 s-translate-y-0"
+      leave="s-transition s-ease-in s-duration-75"
+      leaveFrom="s-transform s-opacity-100 s-scale-100 s-translate-y-0"
+      leaveTo={getOriginTransClass(origin)}
+    >
+      <Menu.Items
+        onKeyDown={onKeyDown}
+        className={classNames(
+          "s-absolute s-z-10",
+          getOriginClass(origin),
+          "s-rounded-xl s-border s-border-structure-100 s-bg-structure-0 s-shadow-lg focus:s-outline-none dark:s-border-structure-100-dark dark:s-bg-structure-0-dark"
+        )}
+        style={styleInsert(origin, marginLeft)}
+      >
+        {topBar}
+        <div
+          className={classNames(
+            classNamesForVariant(variant, hasDropdownItem),
+            getOverflowClass(overflow)
+          )}
+        >
+          <StandardItem.List>{children}</StandardItem.List>
+        </div>
+        {bottomBar}
+      </Menu.Items>
+    </Transition>
+  );
+};
+
+function findOriginFromButton(
+  buttonRef: MutableRefObject<HTMLButtonElement | null> | null
+) {
+  if (!buttonRef) {
+    return "topRight";
+  }
+  const buttonRect = buttonRef.current?.getBoundingClientRect();
+  if (!buttonRect) {
+    return "topRight";
+  }
+  const windowHeight = window.innerHeight;
+  // Top half of screen
+  if (buttonRect.top < windowHeight / 2) {
+    return buttonRect.left < window.innerWidth / 2 ? "topLeft" : "topRight";
+  }
+  // Bottom half of screen
+  return buttonRect.left < window.innerWidth / 2 ? "bottomLeft" : "bottomRight";
+}

package/src/components/ElementDialog.tsx

@@ -0,0 +1,38 @@
+import React, { useCallback, useState } from "react";
+
+import { Dialog, ModalProps } from "./Dialog";
+
+type ElementDialogProps<T> = Omit<
+  ModalProps,
+  "isOpen" | "onValidate" | "onCancel"
+> & {
+  openOnElement: T | null;
+  onValidate: (closeDialogFn: () => void) => void;
+  onCancel: (closeDialogFn: () => void) => void;
+  closeDialogFn: () => void;
+};
+
+export function ElementDialog<T>({
+  openOnElement,
+  closeDialogFn,
+  onValidate,
+  onCancel,
+  ...props
+}: ElementDialogProps<T>) {
+  const [isClosingTransition, setIsClosingTransition] = useState(false);
+  const transitionOnClose = useCallback(() => {
+    setIsClosingTransition(true);
+    setTimeout(() => {
+      closeDialogFn();
+      setIsClosingTransition(false);
+    }, 200);
+  }, [closeDialogFn]);
+  return (
+    <Dialog
+      isOpen={openOnElement !== null && !isClosingTransition}
+      onCancel={() => onCancel(transitionOnClose)}
+      onValidate={() => onValidate(transitionOnClose)}
+      {...props}
+    />
+  );
+}

package/src/components/ElementModal.tsx

@@ -0,0 +1,32 @@
+import React, { useCallback, useState } from "react";
+
+import { Modal, ModalProps } from "./Modal";
+
+type ElementModalProps<T> = Omit<ModalProps, "isOpen" | "onSave"> & {
+  openOnElement: T | null;
+  onSave?: (closeModalFn: () => void) => void;
+};
+
+export function ElementModal<T>({
+  openOnElement,
+  onClose,
+  onSave,
+  ...props
+}: ElementModalProps<T>) {
+  const [isClosingTransition, setIsClosingTransition] = useState(false);
+  const transitionOnClose = useCallback(() => {
+    setIsClosingTransition(true);
+    setTimeout(() => {
+      onClose();
+      setIsClosingTransition(false);
+    }, 200);
+  }, [onClose]);
+  return (
+    <Modal
+      isOpen={openOnElement !== null && !isClosingTransition}
+      onClose={transitionOnClose}
+      onSave={onSave ? () => onSave(transitionOnClose) : undefined}
+      {...props}
+    />
+  );
+}

package/src/components/EmojiPicker.tsx

@@ -0,0 +1,32 @@
+import type { EmojiMartData } from "@emoji-mart/data";
+import Picker from "@emoji-mart/react";
+import React from "react";
+
+import { EmojiSkinType } from "@sparkle/lib/avatar/types";
+
+interface EmojiPickerProps {
+  data?: EmojiMartData;
+  onEmojiSelect: (emoji: EmojiSkinType) => void;
+  previewPosition?: "none";
+  theme: "dark" | "light";
+}
+
+EmojiPicker.defaults = {
+  previewPosition: "none",
+};
+
+export function EmojiPicker({
+  data,
+  onEmojiSelect,
+  previewPosition,
+  theme,
+}: EmojiPickerProps) {
+  return (
+    <Picker
+      theme={theme}
+      previewPosition={previewPosition}
+      data={data}
+      onEmojiSelect={onEmojiSelect}
+    />
+  );
+}

package/src/components/FilterChips.tsx

@@ -0,0 +1,46 @@
+import { useCallback, useState } from "react";
+import React from "react";
+
+import { Button } from "./Button";
+
+interface FilterChipsProps<T extends string> {
+  filters: T[];
+  onFilterClick: (filterName: T) => void;
+  defaultFilter?: T;
+}
+
+export function FilterChips<T extends string>({
+  filters,
+  onFilterClick,
+  defaultFilter,
+}: FilterChipsProps<T>) {
+  const [selectedFilter, setSelectedFilter] = useState<T | null>(
+    defaultFilter && filters.includes(defaultFilter) ? defaultFilter : null
+  );
+
+  const handleFilterClick = useCallback(
+    (filterName: T) => {
+      // Avoid unnecessary re-renders by only triggering event if filter has changed.
+      if (filterName !== selectedFilter) {
+        setSelectedFilter(filterName);
+        onFilterClick(filterName);
+      }
+    },
+    [onFilterClick, selectedFilter]
+  );
+
+  return (
+    <div className="s-flex s-flex-row s-flex-wrap s-gap-2">
+      {filters.map((filterName) => (
+        <Button
+          label={filterName}
+          variant={selectedFilter === filterName ? "primary" : "tertiary"}
+          key={filterName}
+          size="xs"
+          hasMagnifying={false}
+          onClick={() => handleFilterClick(filterName)}
+        />
+      ))}
+    </div>
+  );
+}