@noya-app/noya-designsystem 0.1.63 → 0.1.65

package/src/components/StackNavigator.tsx

@@ -0,0 +1,378 @@
+"use client";
+
+import { Size } from "@noya-app/noya-geometry";
+import { isDeepEqual } from "@noya-app/noya-utils";
+import { useSize } from "@noya-app/react-utils";
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { cx } from "../utils/classNames";
+import {
+  AnimatePresence,
+  AnimatePresenceChildState,
+  AnimatePresenceProps,
+} from "./AnimatePresence";
+import { BaseToolbar } from "./BaseToolbar";
+import { Button } from "./Button";
+import { Body } from "./Text";
+
+type StackRenderContextValue = Record<string, () => React.ReactNode>;
+
+const StackRenderContext = React.createContext<StackRenderContextValue>({});
+
+export type StackItem = {
+  key: string;
+  title?: React.ReactNode;
+  right?: React.ReactNode;
+  renderContent: () => React.ReactNode;
+  /** Force hide/show back button for this item */
+  showBackButton?: boolean;
+  renderHeader?: StackNavigatorRenderHeader;
+};
+
+export type StackNavigatorHeaderProps = {
+  onBack?: () => void;
+  showBackButton: boolean;
+  showDivider: boolean;
+  right?: React.ReactNode;
+  title?: React.ReactNode;
+};
+
+export type StackNavigatorRenderHeader =
+  | React.ReactNode
+  | ((props: StackNavigatorHeaderProps) => React.ReactNode);
+
+export type StackNavigatorProps = {
+  /** Items ordered from root to top. The last item is shown. */
+  items: StackItem[];
+  /** Called when the back button is pressed */
+  onBack?: () => void;
+  className?: string;
+  style?: React.CSSProperties;
+  contentClassName?: string;
+  /** Whether to show the header. @default true */
+  showHeader?: boolean;
+  showDivider?: boolean;
+  cardStyle?: React.CSSProperties;
+  cardClassName?: string;
+  renderHeader?: StackNavigatorRenderHeader;
+};
+
+export function StackNavigator({
+  items,
+  onBack,
+  className,
+  style,
+  contentClassName,
+  cardStyle,
+  cardClassName,
+  showDivider = true,
+  showHeader = true,
+  renderHeader,
+}: StackNavigatorProps) {
+  const top = items.at(-1);
+
+  const previousLengthRef = useRef<number>(items.length);
+  const direction = useMemo<"forward" | "back">(() => {
+    const previous = previousLengthRef.current;
+    previousLengthRef.current = items.length;
+    return items.length >= previous ? "forward" : "back";
+  }, [items.length]);
+
+  const [cardSizes, setCardSizes] = useState<Record<string, Size>>({});
+  const [containerSize, setContainerSize] = useState<Size | undefined>();
+
+  const handleSizeChange = useCallback((key: string, size: Size) => {
+    setCardSizes((prev) => {
+      if (isDeepEqual(prev[key], size)) {
+        return prev;
+      }
+
+      return { ...prev, [key]: size };
+    });
+  }, []);
+
+  useEffect(() => {
+    if (!top) {
+      setContainerSize(undefined);
+      return;
+    }
+
+    const measuredSize = cardSizes[top.key];
+
+    if (!measuredSize) return;
+
+    setContainerSize((prev) => {
+      if (prev && isDeepEqual(prev, measuredSize)) {
+        return prev;
+      }
+
+      return measuredSize;
+    });
+  }, [cardSizes, top]);
+
+  useEffect(() => {
+    setCardSizes((prev) => {
+      const next: Record<string, Size> = {};
+      let changed = false;
+
+      for (const item of items) {
+        const size = prev[item.key];
+        if (size) {
+          next[item.key] = size;
+        } else {
+          changed = true;
+        }
+      }
+
+      if (Object.keys(prev).length !== Object.keys(next).length) {
+        changed = true;
+      }
+
+      return changed ? next : prev;
+    });
+  }, [items]);
+
+  const animationStyles =
+    useMemo((): AnimatePresenceProps["animationStyles"] => {
+      return {
+        entering: {
+          opacity: 0,
+          transform:
+            direction === "forward" ? `translateX(20px)` : `translateX(-20px)`,
+          transition: `opacity 200ms ease, transform 200ms ease`,
+        },
+        entered: {
+          opacity: 1,
+          transform: "translateX(0px)",
+          transition: `opacity 200ms ease, transform 200ms ease`,
+        },
+        exiting: {
+          opacity: 0,
+          transform:
+            direction === "forward" ? `translateX(-20px)` : `translateX(20px)`,
+          transition: `opacity 200ms ease, transform 200ms ease`,
+        },
+      };
+    }, [direction]);
+
+  const shouldAnimateSize = containerSize !== undefined;
+
+  const contentStyle = useMemo(() => {
+    if (!containerSize) return undefined;
+
+    const style: React.CSSProperties = {
+      // width: containerSize.width,
+      height: containerSize.height,
+    };
+
+    if (shouldAnimateSize) {
+      style.transition = `height 200ms ease, width 200ms ease`;
+    } else {
+      style.transition = "none";
+    }
+
+    return style;
+  }, [containerSize, shouldAnimateSize]);
+
+  const [animationStates, setAnimationStates] = useState<
+    Record<string, AnimatePresenceChildState>
+  >({});
+
+  const [renderContentCache, setRenderContentCache] =
+    useState<StackRenderContextValue>(() =>
+      Object.fromEntries(items.map((item) => [item.key, item.renderContent]))
+    );
+
+  useEffect(() => {
+    setRenderContentCache((prev) => {
+      let changed = false;
+      const next: StackRenderContextValue = { ...prev };
+
+      for (const item of items) {
+        const state = animationStates[item.key];
+        const isFrozen = state && state !== "entered";
+        const existing = next[item.key];
+
+        if (
+          existing === undefined ||
+          (!isFrozen && existing !== item.renderContent)
+        ) {
+          next[item.key] = item.renderContent;
+          if (existing !== item.renderContent) {
+            changed = true;
+          }
+        }
+      }
+
+      return changed ? next : prev;
+    });
+  }, [animationStates, items]);
+
+  const handleChildStateChange = useCallback(
+    (key: string, state: AnimatePresenceChildState) => {
+      if (!key) return;
+
+      setAnimationStates((prev) => {
+        if (state === "exited") {
+          if (!(key in prev)) return prev;
+          const { [key]: _removed, ...rest } = prev;
+          return rest;
+        }
+
+        if (prev[key] === state) return prev;
+        return { ...prev, [key]: state };
+      });
+
+      if (state === "exited") {
+        setRenderContentCache((prev) => {
+          if (!(key in prev)) return prev;
+          const next = { ...prev } as StackRenderContextValue;
+          delete next[key];
+          return next;
+        });
+      }
+    },
+    []
+  );
+
+  if (!top) return null;
+
+  const canGoBack = items.length > 1;
+  const showBackButton = (top.showBackButton ?? true) && canGoBack;
+
+  const headerRenderer = top.renderHeader ?? renderHeader;
+
+  const renderHeaderContent = () => {
+    const headerProps: StackNavigatorHeaderProps = {
+      onBack,
+      showBackButton,
+      showDivider,
+      right: top.right,
+      title: top.title,
+    };
+
+    if (headerRenderer !== undefined) {
+      if (typeof headerRenderer === "function") {
+        return headerRenderer(headerProps);
+      }
+
+      return headerRenderer;
+    }
+
+    return defaultRenderHeader(headerProps);
+  };
+
+  return (
+    <div
+      className={cx("n-flex n-flex-col", className)}
+      style={style}
+      onClick={(e) => {
+        e.stopPropagation();
+        // e.preventDefault();
+      }}
+      onMouseDown={(e) => {
+        e.stopPropagation();
+        // e.preventDefault();
+      }}
+      onPointerDown={(e) => {
+        e.stopPropagation();
+        // e.preventDefault();
+      }}
+    >
+      {showHeader && renderHeaderContent()}
+      <div
+        className={cx("n-relative n-overflow-hidden", contentClassName)}
+        style={contentStyle}
+      >
+        {/* Cache renderContent so we can keep showing the last frame while cards animate */}
+        <StackRenderContext.Provider value={renderContentCache}>
+          <AnimatePresence
+            duration={200}
+            animationStyles={animationStyles}
+            skipInitialAnimation
+            mode="wait"
+            onChildStateChange={handleChildStateChange}
+          >
+            <StackNavigatorCard
+              key={top.key}
+              item={top}
+              onSizeChange={handleSizeChange}
+              style={cardStyle}
+              className={cardClassName}
+            />
+          </AnimatePresence>
+        </StackRenderContext.Provider>
+      </div>
+    </div>
+  );
+}
+
+type StackNavigatorCardProps = {
+  item: StackItem;
+  onSizeChange: (key: string, size: Size) => void;
+  style?: React.CSSProperties;
+  className?: string;
+};
+
+const StackNavigatorCard = ({
+  item,
+  onSizeChange,
+  style,
+  className,
+}: StackNavigatorCardProps) => {
+  const ref = React.useRef<HTMLDivElement | null>(null);
+  const size = useSize(ref);
+
+  const renderContext = React.useContext(StackRenderContext);
+  const renderContent = renderContext?.[item.key] ?? item.renderContent;
+
+  React.useEffect(() => {
+    if (!size || size.width === 0 || size.height === 0) return;
+
+    onSizeChange(item.key, size);
+  }, [item.key, onSizeChange, size]);
+
+  return (
+    <div ref={ref} className={cx("n-flex n-flex-col", className)} style={style}>
+      {renderContent?.()}
+    </div>
+  );
+};
+
+function defaultRenderHeader({
+  showDivider,
+  showBackButton,
+  onBack,
+  right,
+  title,
+}: StackNavigatorHeaderProps) {
+  return (
+    <BaseToolbar
+      innerClassName="n-px-1"
+      showDivider={showDivider}
+      enableAbsoluteBreakpoint={false}
+      left={
+        showBackButton && (
+          <Button
+            className="-n-mx-2"
+            icon="ArrowLeftIcon"
+            onClick={onBack}
+            aria-label="Back"
+          />
+        )
+      }
+      right={right}
+    >
+      {typeof title === "string" || typeof title === "number" ? (
+        <Body>{title}</Body>
+      ) : (
+        title
+      )}
+    </BaseToolbar>
+  );
+}

package/src/components/Stepper.tsx

@@ -0,0 +1,88 @@
+"use client";
+
+import { clamp } from "@noya-app/noya-utils";
+import React, { FocusEventHandler, memo, useCallback, useMemo } from "react";
+import { useLabel } from "../hooks/useLabel";
+import { cx } from "../utils/classNames";
+import { Button } from "./Button";
+import { InputField } from "./InputField";
+
+type ColorScheme = "primary" | "secondary";
+
+interface Props {
+  id?: string;
+  style?: React.CSSProperties;
+  className?: string;
+  value: number;
+  onValueChange: (value: number) => void;
+  min: number;
+  max: number;
+  step?: number;
+  colorScheme?: ColorScheme;
+  onFocus?: FocusEventHandler;
+  onBlur?: FocusEventHandler;
+  readOnly?: boolean;
+}
+
+export const Stepper = memo(function Stepper({
+  style,
+  className,
+  value: valueProp,
+  onValueChange,
+  min,
+  max,
+  step = 1,
+  colorScheme,
+  onFocus,
+  onBlur,
+  readOnly = false,
+  ...props
+}: Props) {
+  const { fieldId: id } = useLabel({
+    fieldId: props.id,
+  });
+
+  const value = useMemo(() => {
+    return clamp(valueProp, min, max);
+  }, [valueProp, min, max]);
+
+  const handleValueChange = useCallback(
+    (value: number) => {
+      const newValue = clamp(value, min, max);
+      onValueChange(newValue);
+    },
+    [onValueChange, min, max]
+  );
+
+  return (
+    <div
+      id={id}
+      className={cx(
+        "n-flex n-relative n-items-center n-select-none n-touch-none n-h-input-height n-rounded n-flex-grow n-max-h-input-height n-gap-1.5",
+        className
+      )}
+      style={style}
+      onFocus={onFocus}
+      onBlur={onBlur}
+    >
+      <Button
+        icon="MinusIcon"
+        disabled={readOnly}
+        onClick={() => handleValueChange(value - step)}
+      />
+      <InputField.Root className="n-flex-1">
+        <InputField.NumberInput
+          value={value}
+          onChange={handleValueChange}
+          onNudge={(amount) => handleValueChange(value + amount)}
+          readOnly={readOnly}
+        />
+      </InputField.Root>
+      <Button
+        icon="PlusIcon"
+        disabled={readOnly}
+        onClick={() => handleValueChange(value + step)}
+      />
+    </div>
+  );
+});

package/src/components/Switch.tsx

@@ -1,4 +1,6 @@
-import * as SwitchPrimitive from "@radix-ui/react-switch";
+"use client";
+
+import { Switch as SwitchPrimitive } from "radix-ui";
 import * as React from "react";
 import { cx } from "../utils/classNames";
 
@@ -38,15 +40,15 @@ export const Switch = function Switch({
         onChange(newValue);
       }}
       className={cx(
-        "all-unset w-8 h-[19px] bg-active-background rounded-full relative cursor-pointer ring-offset-background [-webkit-tap-highlight-color:rgba(0,0,0,0)] focus:ring-2 focus:ring-primary focus:ring-offset-[1px] outline-none data-[state=checked]:bg-primary transition-all",
-        colorScheme === "secondary" && "data-[state=checked]:bg-secondary",
-        "focus:z-interactable",
+        "n-all-unset n-w-8 n-h-[19px] n-bg-active-background n-rounded-full n-relative n-cursor-pointer n-ring-offset-background n-[-webkit-tap-highlight-color:rgba(0,0,0,0)] focus:n-ring-2 focus:n-ring-primary focus:n-ring-offset-[1px] n-outline-none data-[state=checked]:n-bg-primary n-transition-all",
+        colorScheme === "secondary" && "data-[state=checked]:n-bg-secondary",
+        "focus:n-z-interactable",
         className
       )}
       onFocus={onFocus}
       onBlur={onBlur}
     >
-      <SwitchPrimitive.Thumb className="block w-[15px] h-[15px] bg-background rounded-full transition-transform translate-x-[2px] data-[state=checked]:translate-x-[15px]" />
+      <SwitchPrimitive.Thumb className="n-block n-w-[15px] n-h-[15px] n-bg-background n-rounded-full n-transition-transform n-translate-x-[2px] data-[state=checked]:n-translate-x-[15px]" />
     </SwitchPrimitive.Root>
   );
 };

package/src/components/Tabs.tsx

@@ -11,6 +11,7 @@ export type TabsProps<T extends string = string> = {
   onValueChange?: (value: T) => void;
   items: MenuItem<T>[];
   renderContent: ({ value }: { value: T }) => React.ReactNode;
+  variant?: "default" | "tabs" | "buttons";
 } & DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
 
 export function Tabs<T extends string = string>({
@@ -18,6 +19,7 @@ export function Tabs<T extends string = string>({
   onValueChange,
   items,
   renderContent,
+  variant = "tabs",
   ...props
 }: TabsProps<T>) {
   const selectableItems = items.filter(isSelectableMenuItem);
@@ -29,13 +31,13 @@ export function Tabs<T extends string = string>({
   });
 
   return (
-    <div {...props} className={cx("flex flex-col", props.className)}>
-      <div className="flex flex-row px-3">
+    <div {...props} className={cx("n-flex n-flex-col", props.className)}>
+      <div className="n-flex n-flex-row n-px-3">
         <SegmentedControl
-          className="flex-1"
+          className="n-flex-1"
           value={activeTab}
           onValueChange={setActiveTab}
-          variant="tabs"
+          variant={variant}
           items={selectableItems}
         />
       </div>

package/src/components/Text.tsx

@@ -1,4 +1,6 @@
-import React, { ForwardedRef, forwardRef, ReactHTML, ReactNode } from "react";
+"use client";
+
+import React, { ForwardedRef, forwardRef, ReactNode } from "react";
 import { ThemeColor } from "../theme";
 import { camelToKebabCase, KebabToCamelCase } from "../theme/themeUtils";
 import { cx } from "../utils/classNames";
@@ -13,11 +15,12 @@ type Variant =
   | "heading5"
   | "body"
   | "small"
+  | "xs"
   | "button"
   | "code"
   | "label";
 
-const elements: Record<Variant, keyof ReactHTML> = {
+const elements: Record<Variant, React.HTMLElementType> = {
   title: "h1",
   subtitle: "h1",
   heading1: "h1",
@@ -27,28 +30,30 @@ const elements: Record<Variant, keyof ReactHTML> = {
   heading5: "h5",
   body: "p",
   small: "span",
+  xs: "span",
   button: "span",
   code: "code",
   label: "span",
 };
 
 export const textStyles: Record<Variant, string> = {
-  title: "font-sans text-title font-bold",
-  subtitle: "font-sans text-subtitle font-medium",
-  heading1: "font-sans text-heading1 font-semibold",
-  heading2: "font-sans text-heading2 font-medium",
-  heading3: "font-sans text-heading3 font-normal",
-  heading4: "font-sans text-heading4 font-medium",
-  heading5: "font-sans text-heading5 font-medium",
-  body: "font-sans text-base font-normal",
-  small: "font-sans text-heading5 font-normal",
-  button: "font-sans text-button font-medium",
-  code: "font-mono text-code",
-  label: "font-sans text-label font-normal uppercase",
+  title: "n-font-sans n-text-title n-font-bold",
+  subtitle: "n-font-sans n-text-subtitle n-font-medium",
+  heading1: "n-font-sans n-text-heading1 n-font-semibold",
+  heading2: "n-font-sans n-text-heading2 n-font-medium",
+  heading3: "n-font-sans n-text-heading3 n-font-normal",
+  heading4: "n-font-sans n-text-heading4 n-font-medium",
+  heading5: "n-font-sans n-text-heading5 n-font-medium",
+  body: "n-font-sans n-text-body n-font-normal",
+  small: "n-font-sans n-text-heading5 n-font-normal",
+  xs: "n-font-sans n-text-xs n-font-normal",
+  button: "n-font-sans n-text-button n-font-medium",
+  code: "n-font-mono n-text-code",
+  label: "n-font-sans n-text-label n-font-normal n-uppercase",
 } as const;
 
 export type TextProps = {
-  as?: keyof ReactHTML;
+  as?: React.HTMLElementType;
   href?: string;
   className?: string;
   style?: React.CSSProperties;
@@ -78,14 +83,14 @@ export const Text = forwardRef(function Text(
   }: TextProps,
   forwardedRef: ForwardedRef<HTMLElement>
 ) {
-  const Component = as ?? elements[variant] ?? "span";
+  const Component = (as ?? elements[variant] ?? "span") as "span";
 
   return (
     <Component
-      // @ts-expect-error expected to be many semantic html elements
       ref={forwardedRef}
       className={cx(
-        `${textStyles[variant]} text-${camelToKebabCase(String(color)) ?? "text"} `,
+        textStyles[variant],
+        `n-text-${camelToKebabCase(String(color)) ?? "text"}`,
         className
       )}
       style={style}
@@ -144,6 +149,12 @@ export const Small = forwardRef(
   )
 );
 
+export const ExtraSmall = forwardRef(
+  (props: PresetProps, ref: ForwardedRef<HTMLElement>) => (
+    <Text ref={ref} {...props} variant="xs" />
+  )
+);
+
 // export const Label = forwardRef(
 //   (props: PresetProps, ref: ForwardedRef<HTMLElement>) => (
 //     <Text ref={ref} {...props} variant="label" />

package/src/components/TextArea.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { assignRef } from "@noya-app/react-utils";
 import React, {
   ComponentProps,
@@ -66,7 +68,7 @@ export const TextArea = memo(
     return (
       <textarea
         className={cx(
-          `font-sans text-heading5 font-normal text-text bg-input-background flex-1 py-1 px-1.5 border-none outline-none min-h-6 w-full rounded resize-none placeholder:text-text-disabled focus:ring-2 focus:ring-primary read-only:text-text-disabled focus:z-interactable transition-all`,
+          `n-font-sans n-text-heading5 n-font-normal n-text-text n-bg-input-background n-flex-1 n-py-1 n-px-1.5 n-border-none n-outline-none n-min-h-6 n-w-full n-rounded n-resize-none placeholder:n-text-text-disabled focus:n-ring-2 focus:n-ring-primary read-only:n-text-text-disabled focus:n-z-interactable n-transition-[box-shadow]`,
           className
         )}
         {...rest}
@@ -100,10 +102,10 @@ export const TextAreaRow = memo(
     return (
       <div
         ref={forwardedRef}
-        className={cx("relative w-full h-full", className)}
+        className={cx("n-relative n-w-full n-h-full", className)}
       >
         <TextArea className={textAreaClassName} {...rest} ref={textAreaRef} />
-        <div className={cx("absolute right-1 top-4", endClassName)}>{end}</div>
+        <div className={cx("n-absolute n-right-1 n-top-4", endClassName)}>{end}</div>
       </div>
     );
   })

package/src/components/Toast.tsx

@@ -1,4 +1,4 @@
-import * as ToastPrimitive from "@radix-ui/react-toast";
+import { Toast as ToastPrimitive } from "radix-ui";
 import React, { ReactNode } from "react";
 import { IconButton } from "./IconButton";
 import { textStyles } from "./Text";
@@ -15,18 +15,18 @@ export const Toast = ({
 }) => {
   return (
     <ToastPrimitive.Root
-      className="px-2 py-2.5 grid grid-cols-[auto_max-content] gap-x-2.5 items-center rounded text-sm bg-popover-background shadow-popover text-text-muted"
+      className="n-px-2 n-py-2.5 n-grid n-grid-cols-[auto_max-content] n-gap-x-2.5 n-items-center n-rounded n-text-sm n-bg-popover-background n-shadow-popover n-text-text-muted"
       {...props}
     >
       {title && (
         <ToastPrimitive.Title
-          className={`mb-[5px] ${textStyles.label} font-bold text-text`}
+          className={`n-mb-[5px] ${textStyles.label} n-font-bold n-text-text`}
         >
           {title}
         </ToastPrimitive.Title>
       )}
       <ToastPrimitive.Description
-        className={`${textStyles.small} text-text-muted`}
+        className={`${textStyles.small} n-text-text-muted`}
       >
         {content}
       </ToastPrimitive.Description>
@@ -45,6 +45,6 @@ export const Toast = ({
 export const ToastProvider = ({ children }: { children: React.ReactNode }) => (
   <ToastPrimitive.Provider>
     {children}
-    <ToastPrimitive.Viewport className="fixed bottom-0 right-0 flex flex-col p-5 g-2.5 min-w-[200px] max-w-[100vw] m-0 list-none z-[2147483647] outline-none" />
+    <ToastPrimitive.Viewport className="n-fixed n-bottom-0 n-right-0 n-flex n-flex-col n-p-5 n-gap-2.5 n-min-w-[200px] n-max-w-[100vw] n-m-0 n-list-none n-z-[2147483647] n-outline-none" />
   </ToastPrimitive.Provider>
 );