@noya-app/noya-designsystem 0.1.63 → 0.1.65

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

@@ -1,3 +1,5 @@
+"use client";
+
 import { isDeepEqual } from "@noya-app/noya-utils";
 import React, {
   Children,
@@ -9,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
@@ -33,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"
@@ -54,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`,
   },
 };
 
@@ -74,24 +81,28 @@ const PresenceChild = ({
   onExitComplete,
   skipInitialAnimation,
   className,
+  childKey,
+  onStateChange,
 }: PresenceChildProps) => {
-  const [animationState, setAnimationState] = useState<AnimationState>(() =>
-    skipInitialAnimation && isPresent
-      ? "entered"
-      : isPresent
-        ? "entering"
-        : "exited"
-  );
-  const timeoutRef = useRef<number>();
+  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;
@@ -130,6 +141,11 @@ const PresenceChild = ({
     skipInitialAnimation,
   ]);
 
+  useEffect(() => {
+    if (!childKey) return;
+    onStateChange?.(childKey, animationState);
+  }, [animationState, childKey, onStateChange]);
+
   if (animationState === "exited" && !isPresent) {
     return null;
   }
@@ -142,28 +158,29 @@ const PresenceChild = ({
 };
 
 type MountedChild = {
-  child: React.ReactElement;
+  child: React.ReactElement<any>;
   isPresent: boolean;
   skipInitialAnimation?: boolean;
 };
 
 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[]>([]);
+  const previousChildrenRef = useRef<React.ReactElement<any>[]>([]);
   const removingChildrenRef = useRef<Set<string>>(new Set());
   const waitingToEnterRef = useRef<MountedChild[]>([]);
 
   useEffect(() => {
     const newChildren = Children.toArray(children).filter(
       isValidElement
-    ) as React.ReactElement[];
+    ) as React.ReactElement<any>[];
 
     setMountedChildren((prev) => {
       if (!prev.length && skipInitialAnimation) {
@@ -253,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>
@@ -266,5 +285,3 @@ export const AnimatePresence = ({
     </>
   );
 };
-
-export type { AnimatePresenceProps };

package/src/components/Avatar.tsx

@@ -1,13 +1,16 @@
-import * as AvatarPrimitive from "@radix-ui/react-avatar";
+"use client";
+
+import { Avatar as AvatarPrimitive } from "radix-ui";
 import React, { forwardRef, useMemo } from "react";
 import { cx } from "../utils/classNames";
 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,
@@ -18,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">
 >(
@@ -49,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}
@@ -60,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) => {
@@ -68,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)}
@@ -82,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">
 >(
@@ -100,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}
@@ -123,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;
@@ -137,7 +140,7 @@ export const Avatar = React.memo(
       name,
       userId,
       size = 21,
-      backgroundColor,
+      backgroundColor: backgroundColorProp,
       variant = "normal",
       children,
       className,
@@ -145,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}
@@ -161,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}
           >
@@ -194,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.
@@ -207,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, { size }))
+      .map((child) =>
+        React.cloneElement(child as React.ReactElement<any>, { size })
+      )
+      .reverse()
       .slice(0, max);
 
     if (avatarCount > max) {
@@ -220,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>
   );
 }