@noya-app/noya-designsystem 0.1.39 → 0.1.41

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noya-app/noya-designsystem",
-  "version": "0.1.39",
+  "version": "0.1.41",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -23,9 +23,9 @@
     "@dnd-kit/core": "3.1.1",
     "@dnd-kit/modifiers": "3.0.0",
     "@dnd-kit/sortable": "4.0.0",
-    "@noya-app/noya-colorpicker": "0.1.13",
-    "@noya-app/noya-utils": "0.1.2",
-    "@noya-app/noya-geometry": "0.1.5",
+    "@noya-app/noya-colorpicker": "0.1.14",
+    "@noya-app/noya-utils": "0.1.3",
+    "@noya-app/noya-geometry": "0.1.6",
     "@noya-app/noya-icons": "0.1.4",
     "@noya-app/noya-keymap": "0.1.2",
     "@radix-ui/primitive": "^1.0.0",
@@ -38,7 +38,7 @@
     "@radix-ui/react-progress": "^1.0.1",
     "@radix-ui/react-radio-group": "^1.1.0",
     "@radix-ui/react-scroll-area": "^1.0.2",
-    "@radix-ui/react-slider": "^1.1.0",
+    "@radix-ui/react-slider": "^1.2.2",
     "@radix-ui/react-switch": "^1.0.1",
     "@radix-ui/react-toast": "^1.1.4",
     "@radix-ui/react-toggle-group": "^1.0.1",

package/src/components/ActivityIndicator.tsx

@@ -1,5 +1,4 @@
-import React, { memo } from "react";
-import { cn } from "../utils/tailwind";
+import React, { memo, useMemo } from "react";
 
 interface Props {
   size?: number;
@@ -14,9 +13,19 @@ export const ActivityIndicator = memo(function ActivityIndicator({
   color = "black",
   trackColor = "rgba(0, 0, 0, 0.1)",
 }: Props) {
+  const opacityStyle = useMemo(() => ({ opacity }), [opacity]);
+  const dynamicStyles = useMemo(
+    () => ({
+      border: `2px solid ${trackColor}`,
+      borderTopColor: color,
+      width: `${size}px`,
+      height: `${size}px`,
+    }),
+    [size, color, trackColor]
+  );
   return (
-    <div className={cn("flex justify-center items-center", `opacity-[${opacity}]`)}>
-      <div className={cn("animate-spin", `border-[2px_solid_${trackColor}] border-t-[2px_solid_${color}] rounded-[50%] w-[${size}px] h-[${size}px]`)} />
+    <div className="flex justify-center items-center" style={opacityStyle}>
+      <div style={dynamicStyles} className="animate-spin rounded-[50%]" />
     </div>
   );
 });

package/src/components/AnimatePresence.tsx

@@ -0,0 +1,261 @@
+import { isDeepEqual } from "@noya-app/noya-utils";
+import React, {
+  useEffect,
+  useState,
+  useRef,
+  Children,
+  isValidElement,
+  useCallback,
+  useLayoutEffect,
+} from "react";
+
+type AnimatePresenceProps = {
+  children: React.ReactNode;
+  /**
+   * Duration of enter/exit animations in milliseconds
+   * @default 200
+   */
+  duration?: number;
+  /**
+   * Custom styles to apply during animations
+   */
+  animationStyles?: {
+    entering?: React.CSSProperties;
+    entered?: React.CSSProperties;
+    exiting?: React.CSSProperties;
+  };
+  /** @default false */
+  skipInitialAnimation?: boolean;
+  /**
+   * @default "wait"
+   * "wait" - wait for the previous animation to finish before starting the next one
+   * "crossfade" - crossfade between the previous and next animation
+   */
+  mode?: "wait" | "crossfade";
+};
+
+const defaultDuration = 150;
+
+type AnimationState = "entering" | "entered" | "exiting" | "exited";
+
+type PresenceChildProps = {
+  isPresent: boolean;
+  onExitComplete: () => void;
+  waitingToEnter?: boolean;
+} & Pick<
+  AnimatePresenceProps,
+  "animationStyles" | "children" | "duration" | "skipInitialAnimation"
+>;
+
+const defaultAnimationStyles: Required<
+  AnimatePresenceProps["animationStyles"]
+> = {
+  entering: {
+    opacity: 0,
+    transition: `opacity ${defaultDuration}ms ease-in`,
+  },
+  entered: {
+    opacity: 1,
+    transition: `opacity ${defaultDuration}ms ease-in`,
+  },
+  exiting: {
+    opacity: 0,
+    transition: `opacity ${defaultDuration}ms ease-out`,
+  },
+};
+
+const PresenceChild = ({
+  children,
+  duration,
+  isPresent,
+  animationStyles,
+  onExitComplete,
+  skipInitialAnimation,
+}: PresenceChildProps) => {
+  const [animationState, setAnimationState] = useState<AnimationState>(() =>
+    skipInitialAnimation && isPresent
+      ? "entered"
+      : isPresent
+        ? "entering"
+        : "exited"
+  );
+  const timeoutRef = useRef<NodeJS.Timeout>();
+  const isInitialMount = useRef(true);
+
+  const mergedAnimationStyles = {
+    ...defaultAnimationStyles,
+    ...animationStyles,
+    exited: {},
+    willChange: "opacity",
+    backfaceVisibility: "hidden",
+  } as Record<AnimationState, React.CSSProperties>;
+
+  useLayoutEffect(() => {
+    let rafId: number;
+
+    if (isPresent && animationState !== "entered") {
+      if (isInitialMount.current && skipInitialAnimation) {
+        setAnimationState("entered");
+        isInitialMount.current = false;
+        return;
+      }
+
+      // Use RAF for better timing
+      rafId = requestAnimationFrame(() => {
+        setAnimationState("entering");
+        rafId = requestAnimationFrame(() => {
+          setAnimationState("entered");
+        });
+      });
+    } else if (!isPresent && animationState !== "exited") {
+      setAnimationState("exiting");
+      timeoutRef.current = setTimeout(() => {
+        setAnimationState("exited");
+        onExitComplete();
+      }, duration);
+    }
+
+    return () => {
+      if (rafId) cancelAnimationFrame(rafId);
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    };
+  }, [
+    isPresent,
+    duration,
+    onExitComplete,
+    animationState,
+    skipInitialAnimation,
+  ]);
+
+  if (animationState === "exited" && !isPresent) {
+    return null;
+  }
+
+  return <div style={mergedAnimationStyles[animationState]}>{children}</div>;
+};
+
+type MountedChild = {
+  child: React.ReactElement;
+  isPresent: boolean;
+  skipInitialAnimation?: boolean;
+};
+
+export const AnimatePresence = ({
+  children,
+  duration = defaultDuration,
+  animationStyles,
+  skipInitialAnimation,
+  mode = "wait",
+}: AnimatePresenceProps) => {
+  const [mountedChildren, setMountedChildren] = useState<MountedChild[]>([]);
+  const previousChildrenRef = useRef<React.ReactElement[]>([]);
+  const removingChildrenRef = useRef<Set<string>>(new Set());
+  const waitingToEnterRef = useRef<MountedChild[]>([]);
+
+  useEffect(() => {
+    const newChildren = Children.toArray(children).filter(
+      isValidElement
+    ) as React.ReactElement[];
+
+    setMountedChildren((prev) => {
+      if (!prev.length && skipInitialAnimation) {
+        return newChildren.map((child) => ({
+          child,
+          isPresent: true,
+          skipInitialAnimation: skipInitialAnimation,
+        }));
+      }
+
+      // Update presence for existing children
+      const updated = prev.map((mounted) => {
+        const isStillPresent = newChildren.some(
+          (child) =>
+            isDeepEqual(child.key, mounted.child.key) ||
+            isDeepEqual(child, mounted.child)
+        );
+
+        if (!isStillPresent) {
+          removingChildrenRef.current.add(mounted.child.key?.toString() ?? "");
+        }
+
+        return {
+          ...mounted,
+          isPresent: isStillPresent,
+          removing: !isStillPresent
+            ? true
+            : removingChildrenRef.current.has(
+                mounted.child.key?.toString() ?? ""
+              ),
+        };
+      });
+
+      // Store new children in waitingToEnterRef if we're in wait mode and have removing children
+      const newMounted = newChildren
+        .filter(
+          (child) =>
+            !prev.some(
+              (p) =>
+                isDeepEqual(p.child.key, child.key) ||
+                isDeepEqual(p.child, child)
+            )
+        )
+        .map((child) => ({
+          child,
+          isPresent: mode === "wait" ? false : true,
+        }));
+
+      previousChildrenRef.current = newChildren;
+
+      if (mode === "wait" && removingChildrenRef.current.size > 0) {
+        waitingToEnterRef.current = newMounted;
+        return updated;
+      }
+
+      return [...updated, ...newMounted];
+    });
+  }, [children, skipInitialAnimation, mode]);
+
+  const removeChild = useCallback((childKey: string) => {
+    if (!removingChildrenRef.current.has(childKey)) return;
+    removingChildrenRef.current.delete(childKey);
+
+    setMountedChildren((prev) => {
+      const filtered = prev.filter(
+        (mounted) => mounted.child.key?.toString() !== childKey
+      );
+
+      if (
+        removingChildrenRef.current.size === 0 &&
+        waitingToEnterRef.current.length > 0
+      ) {
+        const enteringChildren = waitingToEnterRef.current.map((mounted) => ({
+          ...mounted,
+          isPresent: true,
+        }));
+        waitingToEnterRef.current = [];
+        return [...filtered, ...enteringChildren];
+      }
+
+      return filtered;
+    });
+  }, []);
+
+  return (
+    <>
+      {mountedChildren.map(({ child, isPresent, skipInitialAnimation }) => (
+        <PresenceChild
+          key={child.key}
+          duration={duration}
+          animationStyles={animationStyles}
+          isPresent={isPresent}
+          skipInitialAnimation={skipInitialAnimation}
+          onExitComplete={() => removeChild(child.key?.toString() ?? "")}
+        >
+          {child}
+        </PresenceChild>
+      ))}
+    </>
+  );
+};
+
+export type { AnimatePresenceProps };

package/src/components/Avatar.tsx

@@ -1,110 +1,232 @@
-import React, { forwardRef } from "react";
 import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import React, { forwardRef, useMemo } from "react";
+import { cx } from "../utils/classNames";
+import { colorFromString } from "../utils/colorFromString";
+
+const getInnerAvatarStyles = (
+  size: number,
+  variant: "normal" | "bare"
+): React.CSSProperties => {
+  const borderSize = variant === "bare" ? 4 : size > 36 ? 8 : 6;
+  const dimension = `${size - borderSize}px`;
+  return {
+    width: dimension,
+    height: dimension,
+    minWidth: dimension,
+    minHeight: dimension,
+  };
+};
 
 const AvatarRoot = React.forwardRef<
   React.ElementRef<typeof AvatarPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root> & {
-    size: number;
-    overflow: number;
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root> &
+    Pick<AvatarProps, "size" | "variant" | "backgroundColor" | "disabled">
+>(
+  (
+    {
+      className,
+      size = 21,
+      style,
+      backgroundColor,
+      disabled,
+      variant = "normal",
+      ...props
+    },
+    ref
+  ) => {
+    const dynamicStyles = useMemo(
+      () => ({
+        width: `${size}px`,
+        height: `${size}px`,
+        backgroundColor,
+        ...style,
+      }),
+      [backgroundColor, size, style]
+    );
+
+    return (
+      <AvatarPrimitive.Root
+        ref={ref}
+        style={dynamicStyles}
+        className={cx(
+          "flex items-center justify-center align-middle overflow-hidden select-none cursor-pointer rounded-full",
+          !disabled && "hover:translate-y-[-1px]",
+          variant !== "bare" && "border border-background",
+          className
+        )}
+        {...props}
+      />
+    );
   }
->(({ className, size, overflow, ...props }, ref) => (
-  <AvatarPrimitive.Root
-    ref={ref}
-    className={`
-      inline-flex items-center justify-center
-      align-middle overflow-hidden select-none
-      w-[${size}px] h-[${size}px]
-      rounded-full bg-input-background
-      ${overflow ? `m-[-${overflow}px]` : ""}
-      hover:shadow-[0_0_0_2px_var(--sidebar-background)] hover:opacity-90
-      ${className ?? ""}
-    `}
-    {...props}
-  />
-));
+);
 
 const AvatarImage = React.forwardRef<
   React.ElementRef<typeof AvatarPrimitive.Image>,
-  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
->(({ className, ...props }, ref) => (
-  <AvatarPrimitive.Image
-    ref={ref}
-    className={`
-      w-full h-full
-      object-cover
-      rounded-inherit
-      ${className ?? ""}
-    `}
-    {...props}
-  />
-));
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image> &
+    Pick<AvatarProps, "size" | "variant">
+>(({ className, size = 21, variant = "normal", ...props }, ref) => {
+  return (
+    <AvatarPrimitive.Image
+      ref={ref}
+      className={cx(
+        "object-cover overflow-hidden rounded-full w-full h-full",
+        className
+      )}
+      style={getInnerAvatarStyles(size, variant)}
+      {...props}
+    />
+  );
+});
+
+function getMonogram(text?: string) {
+  return text?.at(0)?.toLocaleUpperCase();
+}
 
 const AvatarFallback = React.forwardRef<
   React.ElementRef<typeof AvatarPrimitive.Fallback>,
-  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback> & {
-    size: number;
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback> &
+    Pick<AvatarProps, "size" | "variant" | "backgroundColor">
+>(
+  (
+    { className, children, style, size = 21, backgroundColor, ...props },
+    ref
+  ) => {
+    return (
+      <AvatarPrimitive.Fallback
+        ref={ref}
+        style={{
+          backgroundColor,
+          fontSize: `${size * 0.5}px`,
+          lineHeight: `${size}px`, // This ensures perfect vertical centering
+          ...style,
+        }}
+        className={cx(
+          "font-medium flex items-center justify-center text-white",
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </AvatarPrimitive.Fallback>
+    );
   }
->(({ className, size, ...props }, ref) => (
-  <AvatarPrimitive.Fallback
-    ref={ref}
-    className={`
-      text-[0.8rem] font-medium
-      w-full h-full
-      flex items-center justify-center
-      text-white
-      leading-[${size}px]
-      ${className ?? ""}
-    `}
-    {...props}
-  />
-));
+);
+
+export type AvatarProps = {
+  image?: string;
+  name?: string;
+  /** string used to generate a fallback monogram. more unique strings are better. */
+  userId?: string;
+  size?: number;
+  overflow?: number;
+  style?: React.CSSProperties;
+  className?: string;
+  /** colors are generated from the fallback string or title, but you can override it here */
+  backgroundColor?: string;
+  /** @default normal */
+  variant?: "normal" | "bare";
+  disabled?: boolean;
+};
 
-export const Avatar = forwardRef(function Avatar(
-  {
-    image,
-    name,
-    fallback,
-    size = 19,
-    overflow = 0,
-    ...props
-  }: {
-    image?: string;
-    name?: string;
-    fallback?: string;
-    size?: number;
-    overflow?: number;
-    style?: React.CSSProperties;
-    className?: string;
-  },
-  forwardedRef: React.ForwardedRef<HTMLDivElement>
-) {
+export const Avatar = React.memo(
+  forwardRef(function Avatar(
+    {
+      image,
+      name,
+      userId,
+      size = 21,
+      backgroundColor,
+      variant = "normal",
+      ...props
+    }: AvatarProps,
+    forwardedRef: React.ForwardedRef<HTMLDivElement>
+  ) {
+    const getBackgroundColor =
+      backgroundColor ?? colorFromString(userId ?? name ?? "");
+
+    return (
+      <AvatarRoot
+        ref={forwardedRef}
+        size={size}
+        backgroundColor={getBackgroundColor}
+        variant={variant}
+        {...props}
+      >
+        {image ? (
+          <AvatarImage src={image} alt={name} size={size} variant={variant} />
+        ) : (
+          <AvatarFallback
+            backgroundColor={getBackgroundColor}
+            size={size}
+            variant={variant}
+          >
+            {getMonogram(name)}
+          </AvatarFallback>
+        )}
+      </AvatarRoot>
+    );
+  })
+);
+
+const OverflowAvatar = React.memo(function OverflowAvatar({
+  size = 21,
+  count,
+}: {
+  size?: number;
+  count: number;
+}) {
   return (
-    <AvatarRoot ref={forwardedRef} size={size} overflow={overflow} {...props}>
-      <AvatarImage src={image} alt={name} />
-      <AvatarFallback size={size}>{fallback}</AvatarFallback>
+    <AvatarRoot size={size} backgroundColor="var(--text-disabled)" disabled>
+      <AvatarFallback backgroundColor="var(--text-disabled)" size={size}>
+        +{count}
+      </AvatarFallback>
     </AvatarRoot>
   );
 });
 
-export function AvatarStack({
-  size = 19,
+export const AvatarStack = React.memo(function AvatarStack({
+  size = 21,
   children,
+  max = 3,
+  className,
 }: {
   size?: number;
+  /** @default 3 */
+  max?: number;
   children: React.ReactNode;
+  className?: string;
 }) {
-  const childrenArray = React.Children.toArray(children).map((child) => {
-    return React.cloneElement(child as React.ReactElement, { size });
-  });
+  const avatarCount = React.Children.count(children);
+  // can add logic later to shorten values over 2 digits, etc.
+  const overflowCount = avatarCount - max;
+
+  const childrenArray = useMemo(() => {
+    const processedChildren = React.Children.toArray(children)
+      .map((child) => React.cloneElement(child as React.ReactElement, { size }))
+      .slice(0, max);
+
+    if (avatarCount > max) {
+      return [
+        <OverflowAvatar key="overflow" size={size} count={overflowCount} />,
+        ...processedChildren,
+      ];
+    }
+
+    return processedChildren;
+  }, [children, max, size, avatarCount, overflowCount]);
 
   return (
-    <div className="flex">
+    <div
+      className={cx(
+        "flex flex-row-reverse",
+        size > 36 ? "pl-3" : "pl-1.5",
+        className
+      )}
+    >
       {childrenArray.map((child, index) => {
-        if (index === 0) return child;
-
         return (
           <div
-            className={`relative w-[${size}px] h-[${size}px] -ml-2 rounded-full overflow-hidden [clip-path:circle(50%)]`}
+            className={cx("relative", size > 36 ? "-ml-3" : "-ml-1.5")}
             key={index}
           >
             {child}
@@ -113,4 +235,4 @@ export function AvatarStack({
       })}
     </div>
   );
-}
+});

package/src/components/Button.tsx

@@ -6,6 +6,7 @@ import React, {
   useCallback,
 } from "react";
 import { Tooltip } from "./Tooltip";
+import { cx } from "../utils/classNames";
 
 type ButtonVariant =
   | "normal"
@@ -27,7 +28,7 @@ const variantStyles: Record<ButtonVariant, string> = {
     "bg-secondary text-white hover:bg-secondary-light active:bg-secondary min-w-[31px]",
   secondaryBright: "bg-[#0ab557] text-white hover:opacity-80 active:opacity-90",
   floating:
-    "bg-white text-text shadow-[0_1px_2px_rgba(0,0,0,0.1)] hover:opacity-80 active:opacity-90",
+    "bg-floating-button text-text shadow-[0_1px_2px_rgba(0,0,0,0.1)] hover:opacity-80 active:opacity-90",
   thin: "bg-transparent text-text hover:bg-input-background-light",
   none: "bg-transparent text-text hover:bg-input-background-light",
 };
@@ -85,11 +86,13 @@ export const Button = forwardRef(function Button(
     <Component
       ref={forwardedRef}
       id={id}
-      className={`no-underline leading-[1] relative border-0 outline-none select-none text-left rounded flex items-center justify-center [&>*]:pointer-events-none [-webkit-app-region:no-drag] focus:ring-2 focus:ring-primary focus:shadow-[0_0_0_1px_var(--popover-background)_inset] ${disabled ? "opacity-25" : ""} ${!className?.includes("flex") ? "flex-none" : ""} ${
+      className={cx(
+        "no-underline leading-[1] relative border-0 outline-none select-none text-left rounded flex items-center justify-center [&>*]:pointer-events-none [-webkit-app-region:no-drag] focus:ring-2 focus:ring-primary focus:shadow-[0_0_0_1px_var(--popover-background)_inset]",
+        disabled ? "opacity-25" : "",
+        !className?.includes("flex") ? "flex-none" : "",
         active
           ? "bg-primary text-white hover:bg-primary-light active:bg-primary"
-          : variantStyles[variant]
-      } ${
+          : variantStyles[variant],
         sizeStyles[
           variant === "thin"
             ? "thin"
@@ -98,8 +101,9 @@ export const Button = forwardRef(function Button(
               : variant === "none"
                 ? "none"
                 : size
-        ]
-      } ${className ?? ""}`}
+        ],
+        className
+      )}
       style={style}
       tabIndex={tabIndex}
       disabled={disabled}