@dust-tt/sparkle 0.2.183 → 0.2.184

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.2.183",
+  "version": "0.2.184",
   "scripts": {
     "copy": "copyfiles -u 1 src/**/*.css src/**/*.svg src/**/*.png src/**/*.json dist",
     "tailwind": "tailwindcss -i ./src/styles/tailwind.css -o dist/sparkle.css",
@@ -14,7 +14,8 @@
   "types": "dist/index.d.ts",
   "module": "dist/index.js",
   "files": [
-    "dist/"
+    "dist/",
+    "src/"
   ],
   "devDependencies": {
     "@babel/core": "^7.22.9",

package/src/components/AssistantPreview.tsx

@@ -0,0 +1,231 @@
+import React, { useState } from "react";
+
+import { Avatar } from "@sparkle/components/Avatar";
+import { Button } from "@sparkle/components/Button";
+import { CardButton } from "@sparkle/components/CardButton";
+import { MoreIcon } from "@sparkle/icons/solid";
+import { classNames } from "@sparkle/lib/utils";
+
+type AssistantPreviewVariant = "list" | "minimal";
+
+interface BaseAssistantPreviewProps {
+  variant: AssistantPreviewVariant;
+  description: string;
+  title: string;
+  pictureUrl: string;
+  subtitle?: string;
+  onClick?: () => void;
+}
+
+type ListVariantAssistantPreviewProps = BaseAssistantPreviewProps & {
+  variant: "list";
+};
+
+type MinimalVariantAssistantPreviewProps = BaseAssistantPreviewProps & {
+  variant: "minimal";
+  hasAction?: boolean;
+  href?: string;
+  onClick?: () => void;
+  onActionClick?: () => void;
+};
+
+type AssistantPreviewProps =
+  | ListVariantAssistantPreviewProps
+  | MinimalVariantAssistantPreviewProps;
+
+const isBrowser = typeof window !== "undefined";
+
+const breakpoints = {
+  sm: 640, // Tailwind's default for `sm`
+  md: 768, // Tailwind's default for `md`
+  lg: 1024, // Tailwind's default for `lg`
+  xl: 1280, // Tailwind's default for `xl`
+  xxl: 1536, // Tailwind's default for `2xl`
+};
+
+const getWindowWidth = () => (isBrowser ? window.innerWidth : 0);
+
+const titleClassNames = {
+  base: "s-truncate s-font-medium s-text-element-900 s-w-full",
+  list: "s-text-base",
+  minimal: `s-overflow-hidden s-whitespace-nowrap ${
+    getWindowWidth() <= breakpoints.sm
+      ? "s-text-sm"
+      : getWindowWidth() <= breakpoints.md
+        ? "s-text-base"
+        : ""
+  }`,
+};
+
+const subtitleClassNames = {
+  base: "s-font-normal s-text-element-700 s-truncate s-w-full",
+  list: "s-text-sm",
+  minimal: `s-overflow-hidden s-whitespace-nowrap ${
+    getWindowWidth() <= breakpoints.sm
+      ? "s-text-xs"
+      : getWindowWidth() <= breakpoints.md
+        ? "s-text-xs"
+        : "s-text-sm"
+  }`,
+};
+
+const descriptionClassNames = {
+  base: "s-font-normal s-mb-1",
+  list: "s-text-base s-text-element-800 s-line-clamp-3",
+};
+
+function renderVariantContent(
+  props: AssistantPreviewProps & { isHovered: boolean }
+) {
+  switch (props.variant) {
+    case "list":
+      return <ListVariantContent {...props} />;
+    case "minimal":
+      return <MinimalVariantContent {...props} />;
+    default:
+      return <></>;
+  }
+}
+
+const ListVariantContent = ({
+  description,
+  title,
+  pictureUrl,
+  subtitle,
+}: ListVariantAssistantPreviewProps) => {
+  return (
+    <div className="s-flex s-gap-2">
+      <Avatar name={`Avatar of ${title}`} visual={pictureUrl} size="lg" />
+      <div className="s-flex s-w-full s-min-w-0 s-flex-col s-items-start s-gap-2">
+        <div className="s-flex s-w-full s-min-w-0 s-flex-row s-gap-3">
+          <div className="s-flex s-w-full s-min-w-0 s-flex-col s-items-start s-gap-0">
+            <div
+              className={classNames(
+                titleClassNames["base"],
+                titleClassNames.list
+              )}
+            >
+              @{title}
+            </div>
+
+            {subtitle && (
+              <div
+                className={classNames(
+                  subtitleClassNames["base"],
+                  subtitleClassNames.list
+                )}
+              >
+                By: {subtitle}
+              </div>
+            )}
+          </div>
+        </div>
+        <div
+          className={classNames(
+            descriptionClassNames["base"],
+            descriptionClassNames.list
+          )}
+        >
+          {description}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const MinimalVariantContent = ({
+  title,
+  pictureUrl,
+  subtitle,
+  hasAction = true,
+  description,
+  onClick,
+  onActionClick,
+}: MinimalVariantAssistantPreviewProps) => {
+  const actionButton = (
+    <Button
+      label=""
+      icon={MoreIcon}
+      variant="tertiary"
+      size="sm"
+      labelVisible={false}
+      hasMagnifying={false}
+      disabledTooltip={true}
+      onClick={(e) => {
+        e.stopPropagation();
+        onActionClick?.();
+      }}
+    />
+  );
+
+  return (
+    <>
+      <div
+        id="assistant-container"
+        className="s-flex s-grow s-flex-col s-justify-start s-gap-2 s-overflow-hidden s-py-1"
+        onClick={onClick}
+      >
+        <div className="s-flex s-flex-row s-justify-between s-gap-2 s-overflow-hidden">
+          <div
+            id="preview"
+            className="s-flex s-w-full s-min-w-0 s-flex-row s-items-center s-gap-2"
+          >
+            <div id="avatar-column" className="s-w-fit">
+              <Avatar
+                name={`Avatar of ${title}`}
+                visual={pictureUrl}
+                size="md"
+              />
+            </div>
+            <div
+              id="details-column"
+              className="s-flex s-w-full s-min-w-0 s-flex-col s-items-start s-gap-0 s-overflow-hidden"
+            >
+              <div
+                className={classNames(
+                  titleClassNames["base"],
+                  titleClassNames.minimal
+                )}
+              >
+                @{title}
+              </div>
+              <div
+                className={classNames(
+                  subtitleClassNames["base"],
+                  subtitleClassNames.minimal
+                )}
+              >
+                By: {subtitle}
+              </div>
+            </div>
+          </div>
+          <div id="actions-column" className="s-flex s-w-fit s-shrink-0">
+            {hasAction && actionButton}
+          </div>
+        </div>
+        <div className="s-line-clamp-2 s-text-sm s-text-element-700">
+          {description}
+        </div>
+      </div>
+    </>
+  );
+};
+
+export function AssistantPreview(props: AssistantPreviewProps) {
+  const { onClick, variant } = props;
+  // State to manage the visibility of the play button
+  const [isHovered, setIsHovered] = useState(false);
+
+  return (
+    <CardButton
+      variant={variant === "minimal" ? "secondary" : "tertiary"}
+      className={classNames("s-flex s-flex-col s-gap-2 s-border")}
+      size={variant === "minimal" ? "sm" : "lg"}
+      onClick={onClick}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+    >
+      {renderVariantContent({ ...props, isHovered })}
+    </CardButton>
+  );
+}

package/src/components/Avatar.tsx

@@ -0,0 +1,317 @@
+import React, { useState } from "react";
+
+import { UserIcon } from "@sparkle/icons/solid";
+import { getEmojiAndBackgroundFromUrl } from "@sparkle/lib/avatar/utils";
+import { classNames } from "@sparkle/lib/utils";
+
+type AvatarProps = {
+  size?: "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | "auto";
+  name?: string;
+  emoji?: string;
+  visual?: string | React.ReactNode;
+  clickable?: boolean;
+  onClick?: () => void;
+  busy?: boolean;
+  isRounded?: boolean;
+  backgroundColor?: string;
+  className?: string;
+  disabled?: boolean;
+};
+
+const colors = [
+  "s-bg-red-300",
+  "s-bg-orange-300",
+  "s-bg-amber-300",
+  "s-bg-yellow-300",
+  "s-bg-lime-300",
+  "s-bg-green-300",
+  "s-bg-emerald-300",
+  "s-bg-teal-300",
+  "s-bg-cyan-300",
+  "s-bg-sky-300",
+  "s-bg-blue-300",
+  "s-bg-indigo-300",
+  "s-bg-violet-300",
+  "s-bg-purple-300",
+  "s-bg-fuchsia-300",
+  "s-bg-rose-300",
+];
+
+const txtColors = [
+  "s-text-red-700",
+  "s-text-orange-700",
+  "s-text-amber-700",
+  "s-text-yellow-700",
+  "s-text-lime-700",
+  "s-text-green-700",
+  "s-text-emerald-700",
+  "s-text-teal-700",
+  "s-text-cyan-700",
+  "s-text-sky-700",
+  "s-text-blue-700",
+  "s-text-indigo-700",
+  "s-text-violet-700",
+  "s-text-purple-700",
+  "s-text-fuchsia-700",
+  "s-text-rose-700",
+];
+
+const sizeClasses = {
+  xs: "s-h-6 s-w-6",
+  sm: "s-h-8 s-w-8",
+  md: "s-h-10 s-w-10",
+  lg: "s-h-16 s-w-16",
+  xl: "s-h-20 s-w-20",
+  xxl: "s-h-36 s-w-36",
+  auto: "s-w-full s-relative",
+};
+
+const roundedClasses = {
+  xs: "s-rounded-lg",
+  sm: "s-rounded-xl",
+  md: "s-rounded-2xl",
+  lg: "s-rounded-3xl",
+  xl: "s-rounded-[28px]",
+  xxl: "s-rounded-[38px]",
+  auto: "s-rounded-[30%]",
+};
+
+const textSize = {
+  xs: "s-text-xs",
+  sm: "s-text-sm",
+  md: "s-text-base",
+  lg: "s-text-3xl",
+  xl: "s-text-5xl",
+  xxl: "s-text-7xl",
+  auto: "s-text-xl",
+};
+
+export function Avatar({
+  size = "md",
+  name,
+  emoji,
+  visual,
+  onClick,
+  clickable = false,
+  busy = false,
+  isRounded = false,
+  backgroundColor,
+  disabled = false,
+  className = "",
+}: AvatarProps) {
+  // Check if visual is a string and attempt to extract emoji and background color information from the url.
+  const emojiInfos =
+    typeof visual === "string" && getEmojiAndBackgroundFromUrl(visual);
+
+  const backgroundColorToUse = emojiInfos
+    ? emojiInfos.backgroundColor
+    : backgroundColor;
+  const emojiToUse = emojiInfos ? emojiInfos.skinEmoji : emoji;
+  const visualToUse = emojiInfos ? null : visual;
+
+  const getColor = (name: string) => {
+    if (/\+/.test(name)) {
+      //find if there is a plus
+      return "s-bg-slate-300";
+    }
+    let hash = 0;
+    for (let i = 0; i < name.length; i++) {
+      hash = name.charCodeAt(i) + ((hash << 5) - hash);
+    }
+    return colors[Math.abs(hash) % colors.length];
+  };
+
+  const getTextVariant = (name: string) => {
+    if (/\+/.test(name)) {
+      return "s-text-slate-700";
+    }
+    let hash = 0;
+    for (let i = 0; i < name.length; i++) {
+      hash = name.charCodeAt(i) + ((hash << 5) - hash);
+    }
+    return txtColors[Math.abs(hash) % txtColors.length];
+  };
+
+  const clickableStyles =
+    (onClick || clickable) && !busy
+      ? "s-cursor-pointer hover:s-filter group-hover:s-filter  group-hover:s-brightness-110 hover:s-brightness-110 group-active:s-brightness-90 active:s-brightness-90 s-transition s-duration-200 s-ease-out"
+      : "";
+
+  const busyStyles = busy ? "s-animate-breathing s-cursor-default" : "";
+
+  const avatarClass = classNames(
+    sizeClasses[size],
+    isRounded ? "s-rounded-full" : roundedClasses[size],
+    backgroundColorToUse
+      ? backgroundColorToUse
+      : name
+        ? getColor(name)
+        : "s-bg-slate-200",
+    visualToUse ? "" : "s-border s-border-slate-950/10",
+    "s-flex s-flex-shrink-0 s-items-center s-justify-center s-overflow-hidden",
+    clickableStyles,
+    busyStyles
+  );
+
+  return (
+    <div
+      className={classNames(
+        avatarClass,
+        disabled ? "s-opacity-50" : "",
+        className
+      )}
+    >
+      {size === "auto" && <div style={{ paddingBottom: "100%" }} />}
+      {typeof visualToUse === "string" ? (
+        <img
+          src={visualToUse}
+          alt={name}
+          className={classNames(
+            sizeClasses[size],
+            "s-h-full s-w-full s-object-cover s-object-center"
+          )}
+        />
+      ) : visualToUse ? (
+        visualToUse
+      ) : emojiToUse ? (
+        <span
+          className={classNames(textSize[size], "s-select-none s-font-medium")}
+        >
+          {emojiToUse}
+        </span>
+      ) : name ? (
+        <span
+          className={classNames(
+            getTextVariant(name),
+            textSize[size],
+            "s-select-none s-font-medium"
+          )}
+        >
+          {/\+/.test(name) ? name : name[0].toUpperCase()}
+        </span>
+      ) : (
+        <UserIcon className="s-h-1/2 s-w-1/2 s-opacity-20" />
+      )}
+    </div>
+  );
+}
+
+interface AvatarStackProps {
+  children: React.ReactElement<AvatarProps> | React.ReactElement<AvatarProps>[];
+  nbMoreItems?: number;
+  size?: "xs" | "sm" | "md";
+  isRounded?: boolean;
+  hasMagnifier?: boolean;
+}
+
+const sizeClassesPx = {
+  xs: 24,
+  sm: 32,
+  md: 40,
+};
+
+Avatar.Stack = function ({
+  children,
+  nbMoreItems,
+  size = "sm",
+  isRounded = false,
+  hasMagnifier = true,
+}: AvatarStackProps) {
+  const [isHovered, setIsHovered] = useState(false);
+  const childrenArray = React.Children.toArray(children);
+
+  const handleMouseEnter = () => {
+    if (childrenArray.length > 1) {
+      setIsHovered(true);
+    }
+  };
+
+  const handleMouseLeave = () => {
+    if (childrenArray.length > 1) {
+      setIsHovered(false);
+    }
+  };
+
+  const sizeSetting = {
+    marginLeft: 0,
+    widthHovered: sizeClassesPx[size] * 0.6,
+    width: sizeClassesPx[size] * 0.25,
+  };
+
+  const collapsedWidth =
+    sizeSetting.width * (childrenArray.length + Number(Boolean(nbMoreItems))) +
+    (sizeClassesPx[size] - sizeSetting.width);
+
+  const openedWidth =
+    sizeSetting.widthHovered *
+      (childrenArray.length + Number(Boolean(nbMoreItems))) +
+    (sizeClassesPx[size] - sizeSetting.widthHovered);
+
+  const transitionSettings = "width 200ms ease-out";
+
+  return (
+    <div
+      className="s-flex s-flex-row"
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+      style={{
+        width: `${isHovered ? openedWidth : collapsedWidth}px`,
+        transition: transitionSettings,
+      }}
+    >
+      {childrenArray.map((child, i) => {
+        if (React.isValidElement<AvatarProps>(child)) {
+          return (
+            <div
+              key={i}
+              className="s-cursor-pointer s-drop-shadow-md"
+              style={{
+                width: isHovered ? sizeSetting.widthHovered : sizeSetting.width,
+                transition: transitionSettings,
+              }}
+            >
+              {hasMagnifier ? (
+                <div
+                  style={{
+                    transform: `scale(${
+                      1 - (childrenArray.length - i) * 0.06
+                    })`,
+                  }}
+                >
+                  {React.cloneElement(child, {
+                    size: size,
+                    isRounded: isRounded,
+                  })}
+                </div>
+              ) : (
+                <>
+                  {React.cloneElement(child, {
+                    size: size,
+                    isRounded: isRounded,
+                  })}
+                </>
+              )}
+            </div>
+          );
+        }
+        return null;
+      })}
+      {Boolean(nbMoreItems) && (
+        <div
+          className="s-cursor-pointer s-drop-shadow-md"
+          style={{
+            width: isHovered ? sizeSetting.widthHovered : sizeSetting.width,
+            transition: transitionSettings,
+          }}
+        >
+          <Avatar
+            size={size}
+            name={"+" + String(Number(nbMoreItems) < 10 ? nbMoreItems : "")}
+            isRounded={isRounded}
+            clickable
+          />
+        </div>
+      )}
+    </div>
+  );
+};

package/src/components/Banner.tsx

@@ -0,0 +1,65 @@
+import React, { useEffect, useState } from "react";
+
+import { IconButton } from "@sparkle/components/IconButton";
+import { XMarkIcon } from "@sparkle/icons/solid";
+import { classNames } from "@sparkle/lib/utils";
+
+interface BannerProps {
+  variant?: "info" | "incident" | "error";
+  allowDismiss?: boolean;
+  className?: string;
+  hidden?: boolean;
+  onDismiss?: () => void;
+  children?: React.ReactNode;
+}
+
+const variantClasses = {
+  info: "s-bg-indigo-300 s-text-indigo-950",
+  incident: "s-bg-amber-300 s-text-amber-950",
+  error: "s-bg-red-300 s-text-red-950",
+};
+
+export function Banner({
+  variant = "info",
+  allowDismiss = true,
+  className = "",
+  hidden = false,
+  onDismiss,
+  children,
+}: BannerProps) {
+  const [isDismissed, setIsDismissed] = useState(true);
+
+  useEffect(() => {
+    setIsDismissed(hidden);
+  }, [hidden]);
+
+  return isDismissed ? (
+    <></>
+  ) : (
+    <div
+      className={classNames(
+        variantClasses[variant],
+        "sm:s-before:flex-1 s-flex s-min-h-16 s-items-center s-px-6 s-py-4 s-text-sm sm:s-px-3.5",
+        className
+      )}
+    >
+      {children}
+      {allowDismiss && (
+        <div className="s-flex s-flex-1 s-items-center s-justify-end">
+          <span className="s-sr-only">Dismiss</span>
+          <IconButton
+            icon={XMarkIcon}
+            size="sm"
+            variant="secondary"
+            onClick={() => {
+              setIsDismissed(true);
+              if (onDismiss) {
+                onDismiss();
+              }
+            }}
+          />
+        </div>
+      )}
+    </div>
+  );
+}