@noya-app/noya-designsystem 0.1.64 → 0.1.65

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noya-app/noya-designsystem",
-  "version": "0.1.64",
+  "version": "0.1.65",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -22,12 +22,12 @@
   "dependencies": {
     "@dnd-kit/core": "6.3.1",
     "@dnd-kit/sortable": "10.0.0",
-    "@noya-app/noya-colorpicker": "0.1.27",
-    "@noya-app/noya-utils": "0.1.6",
-    "@noya-app/noya-geometry": "0.1.13",
-    "@noya-app/noya-icons": "0.1.12",
+    "@noya-app/noya-colorpicker": "0.1.28",
+    "@noya-app/noya-utils": "0.1.7",
+    "@noya-app/noya-geometry": "0.1.14",
+    "@noya-app/noya-icons": "0.1.13",
     "@noya-app/noya-keymap": "0.1.4",
-    "@noya-app/noya-tailwind-config": "0.1.6",
+    "@noya-app/noya-tailwind-config": "0.1.7",
     "radix-ui": "1.4.2",
     "@radix-ui/react-compose-refs": "^1.0.0",
     "@radix-ui/primitive": "^1.0.1",

package/src/components/ActivityIndicator.tsx

@@ -9,6 +9,7 @@ interface Props {
   color?: string;
   trackColor?: string;
   className?: string;
+  style?: React.CSSProperties;
 }
 
 export const ActivityIndicator = React.memo(function ActivityIndicator({
@@ -17,8 +18,12 @@ export const ActivityIndicator = React.memo(function ActivityIndicator({
   color = "black",
   trackColor = "rgba(0, 0, 0, 0.1)",
   className,
+  style,
 }: Props) {
-  const opacityStyle = React.useMemo(() => ({ opacity }), [opacity]);
+  const containerStyle = React.useMemo(
+    () => ({ opacity, ...style }),
+    [opacity, style]
+  );
   const dynamicStyles = React.useMemo(
     () => ({
       border: `2px solid ${trackColor}`,
@@ -30,10 +35,10 @@ export const ActivityIndicator = React.memo(function ActivityIndicator({
   );
   return (
     <span
-      className={cx("flex justify-center items-center", className)}
-      style={opacityStyle}
+      className={cx("n-flex n-justify-center n-items-center", className)}
+      style={containerStyle}
     >
-      <span style={dynamicStyles} className="animate-spin rounded-[50%]" />
+      <span style={dynamicStyles} className="n-animate-spin n-rounded-[50%]" />
     </span>
   );
 });

package/src/components/ActivityLog.tsx

@@ -0,0 +1,197 @@
+import React from "react";
+import { cx } from "../utils/classNames";
+import { Avatar, AvatarStack } from "./Avatar";
+import { Button } from "./Button";
+import { Divider } from "./Divider";
+import { DropdownMenu } from "./DropdownMenu";
+import { IconProp, renderIcon } from "./Icons";
+import { ExtraSmall, Small } from "./Text";
+import { MenuItem } from "./internal/Menu";
+
+export type ActivityIconSemanticColor = "add" | "remove" | "update";
+
+const IconContainer = ({
+  children,
+  semanticColor,
+}: {
+  children: React.ReactNode;
+  semanticColor?: ActivityIconSemanticColor;
+}) => {
+  return (
+    <div
+      className={cx(
+        "n-w-[23px] n-h-[23px] n-rounded-full n-flex n-items-center n-justify-center n-flex-none",
+        semanticColor === "add" && "n-bg-secondary-pastel n-text-secondary",
+        semanticColor === "remove" &&
+          "n-bg-banner-error-background n-text-banner-error-text",
+        semanticColor === "update" && "n-bg-[#d1ecfe] n-text-[#1984cc]",
+        semanticColor === undefined && "n-bg-primary-pastel n-text-primary"
+      )}
+    >
+      {children}
+    </div>
+  );
+};
+
+const ActivityLine = () => {
+  return (
+    <div className="n-w-[3px] n-flex-1 n-relative">
+      <div className="n-rounded-full n-bg-primary-150 n-absolute n-w-full n-top-1 -n-bottom-3" />
+    </div>
+  );
+};
+
+const ActivityLeft = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <div className="n-flex n-flex-none n-relative n-isolate n-flex-col n-items-center">
+      {children}
+    </div>
+  );
+};
+
+const ActivityRight = ({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) => {
+  return (
+    <div
+      className={cx(
+        "n-flex-1 n-rounded n-flex n-p-2 n-gap-2 n-bg-canvas-background n-border n-border-divider-subtle",
+        className
+      )}
+    >
+      {children}
+    </div>
+  );
+};
+
+const ActivityCard = ({ children }: { children: React.ReactNode }) => {
+  return <div className="n-flex n-gap-2">{children}</div>;
+};
+
+const ActivityEventIndicator = () => {
+  return (
+    <div className="n-w-1 n-bg-primary-300 n-rounded-full n-mx-0.5 n-flex-none" />
+  );
+};
+
+type ActivityUser = {
+  userId?: string;
+  name?: string;
+  image?: string;
+};
+
+export type ActivityLogItem<M extends string = string> = {
+  title: React.ReactNode;
+  description: React.ReactNode;
+  time?: React.ReactNode;
+  icon: IconProp;
+  iconSemanticColor?: ActivityIconSemanticColor;
+  menuItems?: MenuItem<M>[];
+  onSelectMenuItem?: (value: M) => void;
+} & ({ type: "change"; users?: ActivityUser[] } | { type: "event" });
+
+type ActivityLogProps<M extends string> = {
+  style?: React.CSSProperties;
+  className?: string;
+  items?: ActivityLogItem<M>[];
+};
+
+export function ActivityLog<M extends string = string>({
+  style,
+  className,
+  items,
+}: ActivityLogProps<M>) {
+  return (
+    <div
+      className={cx(
+        "n-flex n-flex-col n-relative n-gap-4 n-isolate",
+        className
+      )}
+      style={style}
+    >
+      {items?.map((item, index, list) => (
+        <ActivityCard key={index}>
+          <ActivityLeft>
+            <IconContainer semanticColor={item.iconSemanticColor}>
+              {renderIcon(item.icon)}
+            </IconContainer>
+            {index !== list.length - 1 && <ActivityLine />}
+          </ActivityLeft>
+          <ActivityRight>
+            {item.type === "event" && (
+              <>
+                <ActivityEventIndicator />
+                <div className="n-flex n-flex-col n-justify-center n-flex-1 n-gap-0.5">
+                  <Small className="n-leading-snug">{item.title}</Small>
+                  {item.description && (
+                    <ExtraSmall
+                      className="n-leading-snug n-break-all"
+                      color="textSubtle"
+                    >
+                      {item.description}
+                    </ExtraSmall>
+                  )}
+                </div>
+                {item.menuItems && item.onSelectMenuItem && (
+                  <DropdownMenu
+                    items={item.menuItems}
+                    onSelect={item.onSelectMenuItem}
+                  >
+                    {({ open }) => (
+                      <Button
+                        className="n-self-start"
+                        icon="DotsVerticalIcon"
+                        variant="ghost"
+                        active={open}
+                      />
+                    )}
+                  </DropdownMenu>
+                )}
+              </>
+            )}
+            {item.type === "change" && (
+              <div className="n-flex n-flex-col n-flex-1">
+                <div className="n-flex n-items-start n-flex-1 n-gap-1.5">
+                  {item.users && (
+                    <AvatarStack
+                      size={24}
+                      overlapAmount={12}
+                      className="n-flex-none n-self-start"
+                    >
+                      {item.users.map((user) => (
+                        <Avatar
+                          key={user.userId}
+                          variant="borderless"
+                          image={user.image}
+                          name={user.name}
+                          userId={user.userId}
+                        />
+                      ))}
+                    </AvatarStack>
+                  )}
+                  <Small className="n-py-[3px] n-flex-1">{item.title}</Small>
+                  <ExtraSmall
+                    color="text"
+                    className="n-flex n-items-center n-justify-center n-opacity-50 n-pt-[5px] n-whitespace-pre"
+                  >
+                    {item.time}
+                  </ExtraSmall>
+                </div>
+                {item.description && (
+                  <>
+                    <Divider overflow={8} className="n-my-1.5" />
+                    <Small>{item.description}</Small>
+                  </>
+                )}
+              </div>
+            )}
+          </ActivityRight>
+        </ActivityCard>
+      ))}
+    </div>
+  );
+}

package/src/components/AnimatePresence.tsx

@@ -11,7 +11,13 @@ import React, {
   useState,
 } from "react";
 
-type AnimatePresenceProps = {
+export type AnimatePresenceChildState =
+  | "entering"
+  | "entered"
+  | "exiting"
+  | "exited";
+
+export type AnimatePresenceProps = {
   children: React.ReactNode;
   /**
    * Duration of enter/exit animations in milliseconds
@@ -35,17 +41,16 @@ type AnimatePresenceProps = {
    */
   mode?: "wait" | "crossfade";
   className?: string;
+  onChildStateChange?: (key: string, state: AnimatePresenceChildState) => void;
 };
 
-const defaultDuration = 150;
-
-type AnimationState = "entering" | "entered" | "exiting" | "exited";
-
 type PresenceChildProps = {
   isPresent: boolean;
   onExitComplete: () => void;
   waitingToEnter?: boolean;
   className?: string;
+  childKey: string;
+  onStateChange?: (key: string, state: AnimatePresenceChildState) => void;
 } & Pick<
   AnimatePresenceProps,
   "animationStyles" | "children" | "duration" | "skipInitialAnimation"
@@ -56,15 +61,15 @@ const defaultAnimationStyles: Required<
 > = {
   entering: {
     opacity: 0,
-    transition: `opacity ${defaultDuration}ms ease-in`,
+    transition: `opacity 200ms ease-in`,
   },
   entered: {
     opacity: 1,
-    transition: `opacity ${defaultDuration}ms ease-in`,
+    transition: `opacity 200ms ease-in`,
   },
   exiting: {
     opacity: 0,
-    transition: `opacity ${defaultDuration}ms ease-out`,
+    transition: `opacity 200ms ease-out`,
   },
 };
 
@@ -76,24 +81,28 @@ const PresenceChild = ({
   onExitComplete,
   skipInitialAnimation,
   className,
+  childKey,
+  onStateChange,
 }: PresenceChildProps) => {
-  const [animationState, setAnimationState] = useState<AnimationState>(() =>
-    skipInitialAnimation && isPresent
-      ? "entered"
-      : isPresent
-        ? "entering"
-        : "exited"
-  );
+  const [animationState, setAnimationState] =
+    useState<AnimatePresenceChildState>(() =>
+      skipInitialAnimation && isPresent
+        ? "entered"
+        : isPresent
+          ? "entering"
+          : "exited"
+    );
   const timeoutRef = useRef<number>(undefined);
   const isInitialMount = useRef(true);
 
-  const mergedAnimationStyles = {
+  const mergedAnimationStyles: Record<
+    AnimatePresenceChildState,
+    React.CSSProperties
+  > = {
     ...defaultAnimationStyles,
     ...animationStyles,
     exited: {},
-    willChange: "opacity",
-    backfaceVisibility: "hidden",
-  } as Record<AnimationState, React.CSSProperties>;
+  };
 
   useLayoutEffect(() => {
     let rafId: number;
@@ -132,6 +141,11 @@ const PresenceChild = ({
     skipInitialAnimation,
   ]);
 
+  useEffect(() => {
+    if (!childKey) return;
+    onStateChange?.(childKey, animationState);
+  }, [animationState, childKey, onStateChange]);
+
   if (animationState === "exited" && !isPresent) {
     return null;
   }
@@ -151,11 +165,12 @@ type MountedChild = {
 
 export const AnimatePresence = ({
   children,
-  duration = defaultDuration,
+  duration = 200,
   animationStyles,
   skipInitialAnimation,
   mode = "wait",
   className,
+  onChildStateChange,
 }: AnimatePresenceProps) => {
   const [mountedChildren, setMountedChildren] = useState<MountedChild[]>([]);
   const previousChildrenRef = useRef<React.ReactElement<any>[]>([]);
@@ -255,12 +270,14 @@ export const AnimatePresence = ({
       {mountedChildren.map(({ child, isPresent, skipInitialAnimation }) => (
         <PresenceChild
           key={child.key}
+          childKey={child.key?.toString() ?? ""}
           duration={duration}
           animationStyles={animationStyles}
           isPresent={isPresent}
           skipInitialAnimation={skipInitialAnimation}
           onExitComplete={() => removeChild(child.key?.toString() ?? "")}
           className={className}
+          onStateChange={onChildStateChange}
         >
           {child}
         </PresenceChild>
@@ -268,5 +285,3 @@ export const AnimatePresence = ({
     </>
   );
 };
-
-export type { AnimatePresenceProps };

package/src/components/Avatar.tsx

@@ -7,9 +7,10 @@ import { colorFromString } from "../utils/colorFromString";
 
 const getInnerAvatarStyles = (
   size: number,
-  variant: "normal" | "bare"
+  variant: "normal" | "bare" | "borderless"
 ): React.CSSProperties => {
-  const borderSize = variant === "bare" ? 4 : size > 36 ? 8 : 6;
+  const borderSize =
+    variant === "bare" ? 4 : variant === "borderless" ? 0 : size > 36 ? 8 : 6;
   const dimension = `${size - borderSize}px`;
   return {
     width: dimension,
@@ -20,7 +21,7 @@ const getInnerAvatarStyles = (
 };
 
 const AvatarRoot = React.forwardRef<
-  React.ElementRef<typeof AvatarPrimitive.Root>,
+  React.ComponentRef<typeof AvatarPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root> &
     Pick<AvatarProps, "size" | "variant" | "backgroundColor" | "disabled">
 >(
@@ -51,8 +52,8 @@ const AvatarRoot = React.forwardRef<
         ref={ref}
         style={dynamicStyles}
         className={cx(
-          "flex items-center justify-center align-middle overflow-hidden select-none cursor-pointer rounded-full",
-          variant !== "bare" && "border border-background",
+          "n-flex n-items-center n-justify-center n-align-middle n-overflow-hidden n-select-none n-cursor-pointer n-rounded-full",
+          variant !== "bare" && "n-border n-border-background",
           className
         )}
         {...props}
@@ -62,7 +63,7 @@ const AvatarRoot = React.forwardRef<
 );
 
 const AvatarImage = React.forwardRef<
-  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentRef<typeof AvatarPrimitive.Image>,
   React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image> &
     Pick<AvatarProps, "size" | "variant">
 >(({ className, size = 21, variant = "normal", ...props }, ref) => {
@@ -70,7 +71,7 @@ const AvatarImage = React.forwardRef<
     <AvatarPrimitive.Image
       ref={ref}
       className={cx(
-        "object-cover overflow-hidden rounded-full w-full h-full",
+        "n-object-cover n-overflow-hidden n-rounded-full n-w-full n-h-full",
         className
       )}
       style={getInnerAvatarStyles(size, variant)}
@@ -84,7 +85,7 @@ function getMonogram(text?: string) {
 }
 
 const AvatarFallback = React.forwardRef<
-  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentRef<typeof AvatarPrimitive.Fallback>,
   React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback> &
     Pick<AvatarProps, "size" | "variant" | "backgroundColor">
 >(
@@ -102,7 +103,7 @@ const AvatarFallback = React.forwardRef<
           ...style,
         }}
         className={cx(
-          "font-medium flex items-center justify-center text-white",
+          "n-font-medium n-flex n-items-center n-justify-center n-text-white",
           className
         )}
         {...props}
@@ -125,7 +126,7 @@ export type AvatarProps = {
   /** colors are generated from the fallback string or title, but you can override it here */
   backgroundColor?: string;
   /** @default normal */
-  variant?: "normal" | "bare";
+  variant?: "normal" | "bare" | "borderless";
   disabled?: boolean;
   /** Intended to be used in place of a fallback monogram, like an icon */
   children?: React.ReactNode;
@@ -139,7 +140,7 @@ export const Avatar = React.memo(
       name,
       userId,
       size = 21,
-      backgroundColor,
+      backgroundColor: backgroundColorProp,
       variant = "normal",
       children,
       className,
@@ -147,14 +148,17 @@ export const Avatar = React.memo(
     }: AvatarProps,
     forwardedRef: React.ForwardedRef<HTMLDivElement>
   ) {
-    const getBackgroundColor =
-      backgroundColor ?? colorFromString(userId ?? name ?? "");
+    const backgroundColor =
+      backgroundColorProp ??
+      (variant === "borderless" && image
+        ? undefined
+        : colorFromString(userId ?? name ?? ""));
 
     return (
       <AvatarRoot
         ref={forwardedRef}
         size={size}
-        backgroundColor={getBackgroundColor}
+        backgroundColor={backgroundColor}
         variant={variant}
         className={className}
         {...props}
@@ -163,7 +167,7 @@ export const Avatar = React.memo(
           <AvatarImage src={image} alt={name} size={size} variant={variant} />
         ) : (
           <AvatarFallback
-            backgroundColor={getBackgroundColor}
+            backgroundColor={backgroundColor}
             size={size}
             variant={variant}
           >
@@ -196,12 +200,14 @@ export const AvatarStack = React.memo(function AvatarStack({
   children,
   max = 3,
   className,
+  overlapAmount = size > 36 ? 12 : 6,
 }: {
   size?: number;
   /** @default 3 */
   max?: number;
   children: React.ReactNode;
   className?: string;
+  overlapAmount?: number;
 }) {
   const avatarCount = React.Children.count(children);
   // can add logic later to shorten values over 2 digits, etc.
@@ -209,7 +215,10 @@ export const AvatarStack = React.memo(function AvatarStack({
 
   const childrenArray = useMemo(() => {
     const processedChildren = React.Children.toArray(children)
-      .map((child) => React.cloneElement(child as React.ReactElement<any>, { size }))
+      .map((child) =>
+        React.cloneElement(child as React.ReactElement<any>, { size })
+      )
+      .reverse()
       .slice(0, max);
 
     if (avatarCount > max) {
@@ -222,20 +231,28 @@ export const AvatarStack = React.memo(function AvatarStack({
     return processedChildren;
   }, [children, max, size, avatarCount, overflowCount]);
 
+  const containerStyle = useMemo(
+    () => ({
+      paddingLeft: overlapAmount,
+    }),
+    [overlapAmount]
+  );
+
+  const itemStyle = useMemo(
+    () => ({
+      marginLeft: -overlapAmount,
+    }),
+    [overlapAmount]
+  );
+
   return (
     <div
-      className={cx(
-        "flex flex-row-reverse",
-        size > 36 ? "pl-3" : "pl-1.5",
-        className
-      )}
+      className={cx("n-flex n-flex-row-reverse", className)}
+      style={containerStyle}
     >
       {childrenArray.map((child, index) => {
         return (
-          <div
-            className={cx("relative", size > 36 ? "-ml-3" : "-ml-1.5")}
-            key={index}
-          >
+          <div key={index} className="n-relative" style={itemStyle}>
             {child}
           </div>
         );

package/src/components/Banner.tsx

@@ -1,29 +1,75 @@
+import { ExclamationTriangleIcon, InfoCircledIcon } from "@noya-app/noya-icons";
 import React, { CSSProperties, ReactNode } from "react";
-import { cssVars } from "../theme";
-import { cx } from "../utils/classNames";
+import { cx, mergeConflictingClassNames } from "../utils/classNames";
 import { Small } from "./Text";
 
-const bannerStyles = {
-  backgroundColor: cssVars.colors.inputBackground,
-  color: cssVars.colors.textDisabled,
-};
+type BannerVariant = "muted" | "info" | "error";
 
 export type BannerProps = {
-  label?: ReactNode;
+  children?: ReactNode;
   className?: string;
   style?: CSSProperties;
+  variant?: BannerVariant;
+  labelStyle?: CSSProperties;
+  labelClassName?: string;
 };
 
-export function Banner({ label = "No items", className, style }: BannerProps) {
+export function Banner({
+  children: label = "No items",
+  className,
+  style,
+  variant = "muted",
+  labelStyle,
+  labelClassName: labelClassNameProp,
+}: BannerProps) {
+  const labelClassName = mergeConflictingClassNames(
+    [
+      "n-flex-1 n-text-center",
+      variant === "muted"
+        ? "!n-text-text-disabled"
+        : variant === "error"
+          ? "!n-text-banner-error-text"
+          : "!n-text-banner-info-text",
+      labelClassNameProp,
+    ],
+    {
+      categories: ["textAlign"],
+    }
+  );
+
   return (
     <div
       className={cx(
-        "flex p-1 items-center justify-center select-none rounded",
+        "n-flex n-py-1 n-px-1.5 n-items-center n-justify-center n-select-none n-rounded n-gap-1.5 n-min-h-input-height",
+        variant === "muted" && "n-bg-input-background",
+        variant === "info" &&
+          "n-bg-banner-info-background n-border n-border-banner-info-border",
+        variant === "error" &&
+          "n-bg-banner-error-background n-border n-border-banner-error-border",
         className
       )}
-      style={{ ...bannerStyles, ...style }}
+      style={style}
     >
-      <Small color="textDisabled">{label}</Small>
+      {(variant === "info" || variant === "error") && (
+        <Small
+          className={cx(
+            "n-flex-none n-self-start n-flex n-items-center",
+            variant === "error"
+              ? "!n-text-banner-error-text"
+              : "!n-text-banner-info-text"
+          )}
+        >
+          {`\u200B`}
+          {variant === "error" ? (
+            <ExclamationTriangleIcon className="n-text-heading5" />
+          ) : (
+            <InfoCircledIcon className="n-text-heading5" />
+          )}
+        </Small>
+      )}
+      <Small className={labelClassName} style={labelStyle}>
+        {label}
+      </Small>
     </div>
   );
 }