@noya-app/noya-designsystem 0.1.64 → 0.1.65

package/src/components/MediaThumbnail.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { Size } from "@noya-app/noya-geometry";
 import {
   FileIcon,
   ImageIcon,
@@ -48,6 +49,8 @@ export type MediaThumbnailProps = {
 
   fileName?: string;
   renderThumbnailIcon?: (props: RenderThumbnailIconProps) => React.ReactNode;
+  dimensions?: Size;
+  aspect?: "contain" | "cover";
 };
 
 export const getThumbnailColors = (
@@ -95,7 +98,9 @@ export const MediaThumbnail = memo(function MediaThumbnail({
   iconName,
   size = "medium",
   fileName,
+  dimensions,
   renderThumbnailIcon,
+  aspect = "contain",
 }: MediaThumbnailProps) {
   const { icon: iconColor, background: backgroundColor } = getThumbnailColors(
     colorScheme,
@@ -117,18 +122,41 @@ export const MediaThumbnail = memo(function MediaThumbnail({
       if (rendered) return rendered;
     }
 
+    if (url) {
+      // const renderUrl = new URL(`http://localhost:8080/render`);
+      const renderUrl = new URL(`https://image.noya.io/render`);
+
+      const imageDimensions = dimensions ?? {
+        width: imageSizeMap[size],
+        height: imageSizeMap[size],
+      };
+
+      if (imageDimensions.width) {
+        renderUrl.searchParams.set("w", imageDimensions.width?.toString());
+      }
+      if (imageDimensions.height) {
+        renderUrl.searchParams.set("h", imageDimensions.height?.toString());
+      }
+
+      renderUrl.searchParams.set("url", url);
+      renderUrl.searchParams.set("fit", aspect);
+      renderUrl.searchParams.set("theme", "light");
+
+      return (
+        <img
+          src={renderUrl.toString()}
+          alt=""
+          className="n-object-contain n-w-full n-h-full"
+          tabIndex={-1}
+          width={imageDimensions?.width}
+          height={imageDimensions?.height}
+        />
+      );
+    }
+
     switch (contentType) {
       case "image":
-        if (!url) return <ImageIcon color={iconColor} style={iconStyles} />;
-
-        return (
-          <img
-            src={url}
-            alt=""
-            className="object-contain w-full h-full"
-            tabIndex={-1}
-          />
-        );
+        return <ImageIcon color={iconColor} style={iconStyles} />;
       case "video":
         return <VideoIcon color={iconColor} style={iconStyles} />;
       case "audio":
@@ -151,7 +179,7 @@ export const MediaThumbnail = memo(function MediaThumbnail({
               <img
                 src={`https://api.iconify.design/catppuccin/${fileIcon}.svg?height=none&box=1`}
                 alt=""
-                className="w-4 h-4"
+                className="n-w-4 n-h-4"
               />
             );
           }
@@ -160,19 +188,22 @@ export const MediaThumbnail = memo(function MediaThumbnail({
         return <FileIcon color={iconColor} style={iconStyles} />;
     }
   }, [
-    contentType,
+    renderThumbnailIcon,
     url,
+    contentType,
+    fileName,
+    dimensions,
+    size,
+    aspect,
     iconColor,
     iconStyles,
     iconName,
-    renderThumbnailIcon,
-    fileName,
   ]);
 
   return (
     <div
       className={cx(
-        "w-full h-full justify-center flex items-center aspect-square",
+        "n-w-full n-h-full n-justify-center n-flex n-items-center n-aspect-square",
         className
       )}
       style={{ backgroundColor }}
@@ -192,6 +223,16 @@ const iconSizeMap: Record<CollectionItemSize, number | string> = {
   xl: "max(15px, 20%)",
 };
 
+const imageSizeMap: Record<CollectionItemSize, number | string> = {
+  xxs: 12 * 2,
+  xs: 18 * 2,
+  small: 24 * 2,
+  medium: 36 * 2,
+  mediumLarge: 48 * 2,
+  large: 64 * 2,
+  xl: 96 * 2,
+};
+
 function findFileIcon(fileName: string) {
   const fileIcon = fileNames[fileName];
   if (fileIcon) return fileIcon;

package/src/components/Message.tsx

@@ -36,8 +36,8 @@ export const Message = memo(
     return (
       <div
         className={cx(
-          "flex gap-2",
-          role === "user" ? "flex-row-reverse" : "flex-row"
+          "n-flex n-gap-2",
+          role === "user" ? "n-flex-row-reverse" : "n-flex-row"
         )}
       >
         {role === "assistant" ? (
@@ -59,9 +59,9 @@ export const Message = memo(
         <div
           className={cx(
             "markdown-message",
-            "flex flex-row gap-2 rounded-lg py-2 px-3 transition-all duration-200 max-w-[70%] text-sm",
-            role === "user" ? "text-white" : "text-text",
-            role === "user" ? "ml-auto" : "bg-input-background"
+            "n-flex n-flex-row n-gap-2 n-rounded-lg n-py-2 n-px-3 n-transition-all n-duration-200 n-max-w-[70%] n-text-sm",
+            role === "user" ? "n-text-white" : "n-text-text",
+            role === "user" ? "n-ml-auto" : "n-bg-input-background"
           )}
           style={styles}
           ref={ref}

package/src/components/Navigator.tsx

@@ -0,0 +1,461 @@
+"use client";
+
+import React, {
+  Children,
+  ReactNode,
+  isValidElement,
+  useCallback,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+
+import {
+  StackItem,
+  StackNavigator,
+  StackNavigatorProps,
+} from "./StackNavigator";
+
+export type NavigatorParams = Record<string, unknown>;
+
+export type NavigatorRoute<Params extends NavigatorParams | null> = {
+  key: string;
+  name: string;
+  params: Params;
+};
+
+export type NavigatorRoutesConfig<
+  RoutesConfig extends Record<string, NavigatorParams | null>,
+> = {
+  [K in keyof RoutesConfig]: NavigatorRoute<RoutesConfig[K]>;
+};
+
+export type NavigatorPushFunction<
+  Routes extends Record<string, NavigatorRoute<any>>,
+> = <K extends keyof Routes>(
+  ...args: Routes[K]["params"] extends null
+    ? [name: K]
+    : [name: K, params: Routes[K]["params"]]
+) => void;
+
+export type NavigatorReplaceFunction<
+  Routes extends Record<string, NavigatorRoute<any>>,
+> = <K extends keyof Routes>(
+  ...args: Routes[K]["params"] extends null
+    ? [name: K]
+    : [name: K, params: Routes[K]["params"]]
+) => void;
+
+export type NavigatorNavigation<
+  Routes extends Record<string, NavigatorRoute<any>>,
+> = {
+  push: NavigatorPushFunction<Routes>;
+  replace: NavigatorReplaceFunction<Routes>;
+  pop: () => void;
+  canGoBack: boolean;
+};
+
+export type NavigatorRenderContext<
+  Routes extends Record<string, NavigatorRoute<any>>,
+  Name extends keyof Routes,
+> = {
+  route: NavigatorRoute<Routes[Name]["params"]>;
+  navigation: NavigatorNavigation<Routes>;
+  stack: NavigatorStackEntry<Routes>[];
+};
+
+export type NavigatorHeaderProps<
+  Routes extends Record<string, NavigatorRoute<any>>,
+  Name extends keyof Routes,
+> = NavigatorRenderContext<Routes, Name> & {
+  title: React.ReactNode;
+  right: React.ReactNode;
+  showBackButton: boolean;
+  onBack?: () => void;
+};
+
+export type NavigatorRenderHeader<
+  Routes extends Record<string, NavigatorRoute<any>>,
+  Name extends keyof Routes,
+> =
+  | React.ReactNode
+  | ((context: NavigatorHeaderProps<Routes, Name>) => React.ReactNode);
+
+export type NavigatorScreenProps<
+  Routes extends Record<string, NavigatorRoute<any>>,
+  Name extends keyof Routes,
+> = {
+  name: Name;
+  title:
+    | React.ReactNode
+    | ((context: NavigatorRenderContext<Routes, Name>) => React.ReactNode);
+  right?:
+    | React.ReactNode
+    | ((context: NavigatorRenderContext<Routes, Name>) => React.ReactNode);
+  showBackButton?:
+    | boolean
+    | ((context: NavigatorRenderContext<Routes, Name>) => boolean);
+  renderHeader?: NavigatorRenderHeader<Routes, Name>;
+  children:
+    | React.ReactNode
+    | ((context: NavigatorRenderContext<Routes, Name>) => React.ReactNode);
+};
+
+const navigatorScreenIdentifier = Symbol("NavigatorScreen");
+
+const NavigatorScreen = Object.assign(
+  <
+    Routes extends Record<string, NavigatorRoute<any>>,
+    Name extends keyof Routes,
+  >(
+    _props: NavigatorScreenProps<Routes, Name>
+  ) => null,
+  {
+    [navigatorScreenIdentifier]: true as const,
+  }
+);
+
+type NavigatorScreenConfig<
+  Routes extends Record<string, NavigatorRoute<any>>,
+  Name extends keyof Routes,
+> = NavigatorScreenProps<Routes, Name> & {
+  name: Name;
+};
+
+export type NavigatorStackEntry<
+  Routes extends Record<string, NavigatorRoute<any>>,
+> = {
+  key: string;
+  name: keyof Routes;
+  params: Routes[keyof Routes]["params"];
+};
+
+export type NavigatorProps<
+  Routes extends Record<string, NavigatorRoute<any>>,
+  Name extends keyof Routes,
+> = {
+  initialRoute: Routes[Name]["params"] extends null
+    ? Name | { name: Name }
+    : { name: Name; params: Routes[Name]["params"] };
+  children: React.ReactNode;
+  showHeader?:
+    | boolean
+    | ((context: { stack: NavigatorStackEntry<Routes>[] }) => boolean);
+  renderHeader?: NavigatorRenderHeader<Routes, any>;
+} & Pick<
+  StackNavigatorProps,
+  "className" | "style" | "contentClassName" | "cardStyle" | "cardClassName"
+>;
+
+type NavigatorScreenContextValue<
+  Routes extends Record<string, NavigatorRoute<any>>,
+  Name extends keyof Routes,
+> = NavigatorRenderContext<Routes, Name>;
+
+const NavigatorScreenContext = React.createContext<NavigatorScreenContextValue<
+  any,
+  any
+> | null>(null);
+
+export function useNavigator<
+  Routes extends Record<string, NavigatorRoute<any>>,
+>(): NavigatorNavigation<Routes> {
+  const context = React.useContext(NavigatorScreenContext);
+
+  if (!context) {
+    throw new Error("useNavigator must be used within a Navigator screen");
+  }
+
+  return context.navigation;
+}
+
+export function useNavigatorRoute<
+  Routes extends Record<string, NavigatorRoute<any>>,
+  Name extends keyof Routes,
+>(): NavigatorRoute<Routes[Name]["params"]> {
+  const context = React.useContext(NavigatorScreenContext);
+
+  if (!context) {
+    throw new Error("useNavigatorRoute must be used within a Navigator screen");
+  }
+
+  return context.route;
+}
+
+function isNavigatorScreenElement(
+  child: ReactNode
+): child is React.ReactElement<NavigatorScreenProps<any, any>> {
+  return (
+    isValidElement(child) &&
+    Boolean(
+      (child.type as { [navigatorScreenIdentifier]?: boolean })?.[
+        navigatorScreenIdentifier
+      ]
+    )
+  );
+}
+
+function evaluateOption<T, C>(
+  option: T | ((context: C) => T) | undefined,
+  context: C
+): T | undefined {
+  if (option instanceof Function) {
+    return option(context);
+  }
+
+  return option;
+}
+
+function NavigatorImpl<
+  Routes extends Record<string, NavigatorRoute<any>>,
+  Name extends keyof Routes,
+>({
+  initialRoute,
+  children,
+  className,
+  style,
+  contentClassName,
+  cardStyle,
+  cardClassName,
+  showHeader,
+  renderHeader,
+}: NavigatorProps<Routes, Name>) {
+  const screens = useMemo<NavigatorScreenConfig<Routes, any>[]>(() => {
+    const configs: NavigatorScreenConfig<Routes, any>[] = [];
+
+    Children.forEach(children, (child) => {
+      if (!isNavigatorScreenElement(child)) return;
+
+      configs.push(child.props as NavigatorScreenConfig<Routes, any>);
+    });
+
+    return configs;
+  }, [children]);
+
+  const screenMap = useMemo(() => {
+    const map = new Map<keyof Routes, NavigatorScreenConfig<Routes, any>>();
+
+    for (const screen of screens) {
+      if (map.has(screen.name)) {
+        console.warn(
+          `Navigator: duplicate screen name "${String(screen.name)}" detected. The latter definition will be used.`
+        );
+      }
+
+      map.set(screen.name, screen);
+    }
+
+    return map;
+  }, [screens]);
+
+  const keyRef = useRef(0);
+  const createEntry = useCallback(
+    <K extends keyof Routes>(
+      name: K,
+      params: Routes[K]["params"]
+    ): NavigatorStackEntry<Routes> => ({
+      key: `${String(name)}-${keyRef.current++}`,
+      name,
+      params,
+    }),
+    []
+  );
+
+  const initialScreenName =
+    typeof initialRoute === "string"
+      ? initialRoute
+      : (initialRoute as { name: Name }).name;
+
+  if (!screenMap.has(initialScreenName)) {
+    throw new Error(
+      `Navigator: initial route "${String(initialScreenName)}" is not registered as a screen.`
+    );
+  }
+
+  const [stack, setStack] = useState<NavigatorStackEntry<Routes>[]>(() => [
+    createEntry(
+      initialScreenName,
+      (initialRoute as { params: Routes[Name]["params"] }).params
+    ),
+  ]);
+
+  const push = useCallback(
+    <K extends keyof Routes>(
+      ...args: Routes[K]["params"] extends null
+        ? [name: K]
+        : [name: K, params: Routes[K]["params"]]
+    ) => {
+      const [name, params] = args;
+
+      const screen = screenMap.get(name);
+
+      if (!screen) {
+        console.warn(
+          `Navigator: attempted to push unknown screen "${String(name)}".`
+        );
+        return;
+      }
+
+      setStack((prev) => [...prev, createEntry(name, params)]);
+    },
+    [createEntry, screenMap]
+  );
+
+  const pop = useCallback(() => {
+    setStack((prev) => {
+      if (prev.length <= 1) return prev;
+
+      const nextStack = prev.slice(0, -1);
+
+      if (nextStack.length === 0) {
+        return nextStack;
+      }
+
+      const updatedStack = [...nextStack];
+      const topEntry = updatedStack[updatedStack.length - 1];
+
+      updatedStack[updatedStack.length - 1] = createEntry(
+        topEntry.name as keyof Routes,
+        topEntry.params as Routes[keyof Routes]["params"]
+      );
+
+      return updatedStack;
+    });
+  }, [createEntry]);
+
+  const replace = useCallback(
+    <K extends keyof Routes>(
+      targetKey: string,
+      name: K,
+      params: Routes[K]["params"] | null
+    ) => {
+      const screen = screenMap.get(name);
+
+      if (!screen) {
+        console.warn(
+          `Navigator: attempted to replace with unknown screen "${String(name)}".`
+        );
+        return;
+      }
+
+      setStack((prev) => {
+        const index = prev.findIndex((entry) => entry.key === targetKey);
+
+        if (index === -1) return prev;
+
+        const next = [...prev];
+        next[index] = createEntry(name, params as Routes[K]["params"]);
+
+        if (next.length > 0) {
+          const top = next[next.length - 1];
+          next[next.length - 1] = createEntry(
+            top.name as keyof Routes,
+            top.params as Routes[keyof Routes]["params"]
+          );
+        }
+
+        return next;
+      });
+    },
+    [createEntry, screenMap]
+  );
+
+  const items = useMemo<StackItem[]>(() => {
+    return stack.flatMap((entry) => {
+      const screen = screenMap.get(entry.name);
+
+      if (!screen) return [];
+
+      const canGoBack = stack.length > 1;
+
+      const route: NavigatorRoute<Routes[keyof Routes]["params"]> = {
+        key: entry.key,
+        name: String(entry.name),
+        params: (entry.params ?? null) as Routes[keyof Routes]["params"],
+      };
+
+      const navigation: NavigatorNavigation<Routes> = {
+        push,
+        replace: (...args) => replace(entry.key, args[0], args[1]),
+        pop,
+        canGoBack,
+      };
+
+      const context: NavigatorRenderContext<Routes, any> = {
+        route,
+        navigation,
+        stack,
+      };
+
+      const title = evaluateOption(screen.title, context);
+      const right = evaluateOption(screen.right, context);
+      const showBackButton = evaluateOption(screen.showBackButton, context);
+      const headerOption = screen.renderHeader ?? renderHeader;
+
+      return {
+        key: entry.key,
+        title,
+        right,
+        showBackButton,
+        renderHeader:
+          headerOption === undefined
+            ? undefined
+            : (headerProps) =>
+                evaluateOption(headerOption, {
+                  ...context,
+                  title,
+                  right,
+                  showBackButton: headerProps.showBackButton,
+                  onBack: headerProps.onBack,
+                }),
+        renderContent: () => {
+          return (
+            <NavigatorScreenContext.Provider value={context}>
+              {evaluateOption(screen.children, context)}
+            </NavigatorScreenContext.Provider>
+          );
+        },
+      } satisfies StackItem;
+    });
+  }, [pop, replace, screenMap, stack, push, renderHeader]);
+
+  const shouldShowHeader = evaluateOption(showHeader, {
+    stack,
+  });
+
+  return (
+    <StackNavigator
+      items={items}
+      onBack={pop}
+      className={className}
+      style={style}
+      contentClassName={contentClassName}
+      cardStyle={cardStyle}
+      cardClassName={cardClassName}
+      showHeader={shouldShowHeader}
+    />
+  );
+}
+
+export const Navigator = Object.assign(NavigatorImpl, {
+  Screen: NavigatorScreen,
+});
+
+export function createNavigator<
+  RoutesConfig extends Record<string, NavigatorParams | null>,
+>() {
+  return Object.assign(
+    NavigatorImpl as <Name extends keyof RoutesConfig>(
+      props: NavigatorProps<NavigatorRoutesConfig<RoutesConfig>, Name>
+    ) => ReactNode,
+    {
+      Screen: NavigatorScreen as <Name extends keyof RoutesConfig>(
+        props: NavigatorScreenProps<NavigatorRoutesConfig<RoutesConfig>, Name>
+      ) => ReactNode,
+      useNavigator: useNavigator<NavigatorRoutesConfig<RoutesConfig>>,
+      useNavigatorRoute: useNavigatorRoute as <Name extends keyof RoutesConfig>(
+        name: Name
+      ) => NavigatorRoute<NavigatorRoutesConfig<RoutesConfig>[Name]["params"]>,
+    }
+  );
+}

package/src/components/NoyaLogo.tsx

@@ -14,7 +14,7 @@ export const Logo = forwardRef(function Logo(
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       {...props}
-      className="w-6 aspect-[24/26]"
+      className="n-w-6 n-aspect-[24/26]"
     >
       <path
         d="M6.5 3H2V12H5V6H6.5C7.32843 6 8 6.67157 8 7.5V12H11V7.5C11 5.01472 8.98528 3 6.5 3Z"

package/src/components/Popover.tsx

@@ -46,13 +46,15 @@ interface Props
   onClickClose?: () => void;
   showArrow?: boolean;
   className?: string;
+  style?: React.CSSProperties;
   portalContainer?: HTMLElement | null;
 }
 
 export const popoverStyle = {
-  base: "rounded font-[14px] bg-popover-background shadow-popover max-h-[600px] overflow-y-auto text-text-muted z-[1000]",
-  large: "w-[680px]",
-  normal: "w-[240px]",
+  base:
+    "n-rounded n-font-[14px] n-bg-popover-background n-shadow-popover n-max-h-[600px] n-overflow-y-auto n-text-text-muted n-z-[1000]",
+  large: "n-w-[680px]",
+  normal: "n-w-[240px]",
 };
 
 export function Popover({
@@ -73,6 +75,7 @@ export function Popover({
   onClickClose,
   className,
   portalContainer,
+  style,
 }: Props) {
   const defaultId = useId();
   const portalScopeId = usePortalScopeId();
@@ -103,6 +106,7 @@ export function Popover({
         <PopoverPrimitive.Content
           {...portalScopeProps(portalScopeId)}
           ref={contentRef}
+          style={style}
           className={cx(
             popoverStyle.base,
             variant === "large" && popoverStyle.large,
@@ -140,11 +144,11 @@ export function Popover({
         >
           {typeof children === "function" ? children({ close }) : children}
           {showArrow && (
-            <PopoverPrimitive.Arrow className="fill-popover-background" />
+            <PopoverPrimitive.Arrow className="n-fill-popover-background" />
           )}
           {closable && (
             <PopoverPrimitive.Close
-              className="rounded-full h-[25px] w-[25px] inline-flex items-center justify-center absolute top-[5px] right-[5px]"
+              className="n-rounded-full n-h-[25px] n-w-[25px] n-inline-flex n-items-center n-justify-center n-absolute n-top-[5px] n-right-[5px]"
               style={closeStyles}
             >
               <IconButton iconName="Cross2Icon" onClick={onClickClose} />