@noya-app/noya-designsystem 0.1.64 → 0.1.65

package/src/components/InspectorContainer.tsx

@@ -43,14 +43,14 @@ export const InspectorContainer = memo(
         {header}
         {children ? (
           <ScrollArea>
-            <div className="flex flex-col relative">
+            <div className="n-flex n-flex-col n-relative">
               {showDividers
                 ? withSeparatorElements(children, <Divider />)
                 : children}
             </div>
           </ScrollArea>
         ) : fallback ? (
-          <div className="flex flex-col relative h-full">{fallback}</div>
+          <div className="n-flex n-flex-col n-relative n-h-full">{fallback}</div>
         ) : null}
       </div>
     );

package/src/components/InspectorPrimitives.tsx

@@ -5,9 +5,9 @@ import React, {
   memo,
   ReactNode,
 } from "react";
+import { cx } from "../utils/classNames";
 import { Spacer } from "./Spacer";
 import { textStyles } from "./Text";
-import { cx } from "../utils/classNames";
 
 export const Section = forwardRef<
   HTMLDivElement,
@@ -15,7 +15,7 @@ export const Section = forwardRef<
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cx(`flex-none flex flex-col `, className)}
+    className={cx(`n-flex-none n-flex n-flex-col`, className)}
     {...props}
   />
 ));
@@ -24,7 +24,7 @@ export const SectionHeader = forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
-  <div ref={ref} className={cx(`flex items-center `, className)} {...props} />
+  <div ref={ref} className={cx(`n-flex n-items-center`, className)} {...props} />
 ));
 
 type TitleTextStyle = "small" | "heading5" | "heading4" | "heading3";
@@ -38,7 +38,11 @@ export const Title = forwardRef<
   <div
     ref={ref}
     className={cx(
-      `flex select-none ${$textStyle ? `${textStyles[$textStyle]} text-text` : "font-sans text-label uppercase text-text-muted font-bold"} `,
+      `n-flex n-select-none ${
+        $textStyle
+          ? `${textStyles[$textStyle]} n-text-text`
+          : "n-font-sans n-text-label n-text-text-muted n-font-semibold"
+      } `,
       className
     )}
     {...props}
@@ -51,7 +55,7 @@ export const Row = forwardRef<
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cx(`flex-1 flex flex-row items-center `, className)}
+    className={cx(`n-flex-1 n-flex n-flex-row n-items-center`, className)}
     {...props}
   />
 ));
@@ -62,7 +66,7 @@ export const Column = forwardRef<
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cx(`flex-1 flex flex-col gap-1 `, className)}
+    className={cx(`n-flex-1 n-flex n-flex-col n-gap-1`, className)}
     {...props}
   />
 ));
@@ -74,7 +78,7 @@ export const Checkbox = forwardRef<
   <input
     ref={ref}
     type="checkbox"
-    className={cx(`m-0 focus:z-interactable `, className)}
+    className={cx(`n-m-0 focus:n-z-interactable`, className)}
     {...props}
   />
 ));
@@ -85,7 +89,7 @@ export const Text = forwardRef<
 >(({ className, ...props }, ref) => (
   <span
     ref={ref}
-    className={cx(`font-sans text-heading5 font-normal `, className)}
+    className={cx(`n-font-sans n-text-heading5 n-font-normal`, className)}
     {...props}
   />
 ));
@@ -123,7 +127,9 @@ export const RowLabel = forwardRef(function RowLabel(
     <label
       ref={ref}
       className={cx(
-        `font-sans text-label uppercase flex items-center leading-[19px] font-bold text-text-subtle z-label ${$textStyle && textStyles[$textStyle]} `,
+        `n-font-sans n-text-label n-uppercase n-flex n-items-center n-leading-[19px] n-font-bold n-text-text-subtle n-z-label ${
+          $textStyle && textStyles[$textStyle]
+        } `,
         className
       )}
       {...props}

package/src/components/Label.tsx

@@ -3,9 +3,10 @@ import { mergeConflictingClassNames } from "../utils/classNames";
 
 export interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {}
 
-const labelStyles = "flex items-center select-none z-label relative";
+const labelStyles =
+  "n-flex n-items-center n-select-none n-z-label n-relative";
 const labelTextStyles =
-  "font-sans text-label uppercase leading-none font-bold text-text-muted";
+  "n-font-sans n-text-label n-leading-none n-font-semibold n-text-text-muted";
 
 export const Label = memo(
   forwardRef<HTMLLabelElement, LabelProps>(function Label(
@@ -19,7 +20,7 @@ export const Label = memo(
           [
             labelStyles,
             labelTextStyles,
-            "text-left min-h-input-height",
+            "n-text-left n-min-h-input-height",
             className,
           ],
           {

package/src/components/LabeledElementView.tsx

@@ -152,9 +152,9 @@ export const LabeledElementView = React.memo(function LabeledElementView({
   }, [refs, labelElements]);
 
   return (
-    <div className="flex flex-1 flex-col relative" ref={containerRef}>
-      <div className="flex flex-1 items-center">{children}</div>
-      <div className="relative overflow-hidden select-none">
+    <div className="n-flex n-flex-1 n-flex-col n-relative" ref={containerRef}>
+      <div className="n-flex n-flex-1 n-items-center">{children}</div>
+      <div className="n-relative n-overflow-hidden n-select-none">
         {labelElements}
       </div>
     </div>

package/src/components/LabeledField.tsx

@@ -15,9 +15,9 @@ import { Label } from "./Label";
 
 export const labeledFieldStyles = (labelType?: LabelType) =>
   cx(
-    "flex flex-row flex-1 flex-wrap items-center gap-x-1.5",
-    labelType === "end" && "flex-row-reverse justify-end",
-    labelType === "above" && "flex-col items-stretch justify-start"
+    "n-flex n-flex-row n-flex-1 n-flex-wrap n-items-center n-gap-x-1.5",
+    labelType === "end" && "n-flex-row-reverse n-justify-end",
+    labelType === "above" && "n-flex-col n-items-stretch n-justify-start"
   );
 
 const labelTypeInset: LabelTypeContextValue = {
@@ -96,7 +96,7 @@ export const LabeledField = memo(function LabeledField({
           {children}
         </LabelTypeContext.Provider>
       ) : (
-        <div className={cx("flex relative flex-1", className)} style={style}>
+        <div className={cx("n-flex n-relative n-flex-1", className)} style={style}>
           {Boolean(indentLevel) && <div style={indentStyle} />}
           <div className={labeledFieldClasses}>
             {labelType !== "none" && (
@@ -106,7 +106,7 @@ export const LabeledField = memo(function LabeledField({
                 // and when start/end position with textarea it aligns label to the top of the field
                 className={
                   labelType === "start" || labelType === "end"
-                    ? "self-start"
+                    ? "n-self-start"
                     : undefined
                 }
                 style={labelStyle}
@@ -116,7 +116,7 @@ export const LabeledField = memo(function LabeledField({
               </Label>
             )}
             {labelType === "start" ? (
-              <div className="flex-auto flex" style={fieldStyle}>
+              <div className="n-flex-auto n-flex" style={fieldStyle}>
                 {children}
               </div>
             ) : (

package/src/components/List.tsx

@@ -5,7 +5,13 @@ import {
   memoGeneric,
   useFileDropTarget,
 } from "@noya-app/react-utils";
-import React, { memo, useImperativeHandle, useRef, useState } from "react";
+import React, {
+  memo,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import { useLinkComponent } from "../contexts/LinkComponentContext";
 import { cssVars } from "../theme";
 import { cx } from "../utils/classNames";
@@ -16,7 +22,8 @@ import {
   CollectionProps,
   CollectionRef,
 } from "./Collection";
-import { ListView, ListViewItemInfo } from "./ListView";
+import { ListView } from "./ListView";
+import { ListViewItemInfo } from "./listView/ListViewRoot";
 import { TreeView } from "./TreeView";
 
 const cssVarOverrides = {
@@ -47,7 +54,10 @@ export const List = memoGeneric(
       renderThumbnail,
       renderAction,
       renderDetail,
+      renderRight,
       onSelectionChange,
+      itemStyle: itemStyleProp,
+      itemClassName: itemClassNameProp,
       itemRoleDescription = "clickable item",
       detailPosition = "end",
       size = "medium",
@@ -67,9 +77,11 @@ export const List = memoGeneric(
       getDropTargetParentIndex,
       getPlaceholder,
       onClickItem,
+      onClick,
       dragIndicatorStyle,
       sortableId,
       sharedDragProps,
+      virtualized,
     } = props;
 
     const [internalHoveredId, setHoveredId] = useState<string>();
@@ -77,6 +89,16 @@ export const List = memoGeneric(
     const [dropdownOpenId, setDropdownOpenId] = useState<string>();
     const hoveredId = internalHoveredId ?? testHoveredId;
     const renamingId = testRenamingId ?? internalRenamingId;
+    const itemClassName = cx(
+      "n-cursor-pointer n-px-1",
+      pyMap[size],
+      itemClassNameProp
+    );
+
+    const itemStyle = useMemo(
+      () => ({ ...cssVarOverrides, ...itemStyleProp }),
+      [itemStyleProp]
+    );
 
     const handleSelect = (itemId: string, event?: ListView.ClickInfo) => {
       if (!onSelectionChange) return;
@@ -124,11 +146,12 @@ export const List = memoGeneric(
         variant="bare"
         className={cx(
           className,
-          isDropTargetActive && "bg-selected-list-item-background",
-          scrollable && "basis-0 min-h-0"
+          isDropTargetActive && "n-bg-selected-list-item-background",
+          scrollable && "n-basis-0 n-min-h-0"
         )}
         containerRef={fileDropTargetRef}
         scrollable={scrollable}
+        virtualized={virtualized}
         data={items}
         keyExtractor={getId}
         role="listbox"
@@ -142,6 +165,8 @@ export const List = memoGeneric(
         getDropTargetParentIndex={getDropTargetParentIndex}
         sharedDragProps={sharedDragProps}
         sortableId={sortableId}
+        onPress={onClick}
+        itemHeight={itemHeightMap[size]}
         {...dropTargetProps}
         renderItem={(
           item: T,
@@ -198,9 +223,9 @@ export const List = memoGeneric(
           const end =
             action ||
             (detailPosition === "end" && renderDetail?.(item, isSelected));
+          const right = renderRight?.(item, isSelected);
           const below =
             detailPosition === "below" && renderDetail?.(item, isSelected);
-
           return (
             <ViewComponent.Row
               as={typeof href === "string" ? LinkComponent : undefined}
@@ -212,12 +237,12 @@ export const List = memoGeneric(
               aria-roledescription={itemRoleDescription}
               aria-label={getName(item)}
               aria-selected={isSelected}
-              className={cx("cursor-pointer rounded px-1", pyMap[size])}
+              className={itemClassName}
               testRelativeDropPosition={
                 testShowDropIndicatorId === id ? "inside" : undefined
               }
-              chevronClassName={cx(expandable && "relative left-2")}
-              style={cssVarOverrides as React.CSSProperties}
+              chevronClassName={cx(expandable && "n-relative n-left-2")}
+              style={itemStyle}
               hovered={isHovered}
               selected={isSelected}
               expanded={expanded}
@@ -228,6 +253,7 @@ export const List = memoGeneric(
               onPress={(e: ListView.ClickInfo) => {
                 handleSelect(id, e);
                 onClickItem?.(id);
+                e.stopPropagation();
               }}
               onDoubleClick={() => {
                 onDoubleClickItem?.(id);
@@ -255,24 +281,24 @@ export const List = memoGeneric(
               dragIndicatorStyle={dragIndicatorStyle}
             >
               <div
-                className={cx("flex flex-1 items-center px-2", rowGapMap[size])}
+                className={cx("n-flex n-flex-1 n-items-center n-px-2", rowGapMap[size])}
               >
                 {thumbnail && (
                   <div
                     className={cx(
-                      "overflow-hidden flex-none flex items-center justify-center",
+                      "n-overflow-hidden n-flex-none n-flex n-items-center n-justify-center",
                       thumbnailSize === "auto" && thumbnailSizeMap[size],
-                      isSelected && "text-selected-list-item-text",
-                      size === "small" ? "rounded-sm" : "rounded"
+                      isSelected && "n-text-selected-list-item-text",
+                      roundedMap[size]
                     )}
                     tabIndex={-1}
                   >
                     {thumbnail}
                   </div>
                 )}
-                <div className="flex flex-col flex-1 w-0">
-                  <div className="flex items-center min-h-input-height flex-1 gap-2">
-                    <div className="flex-1 w-0 flex items-center" tabIndex={-1}>
+                <div className="n-flex n-flex-col n-flex-1 n-w-0">
+                  <div className="n-flex n-items-center n-min-h-input-height n-flex-1 n-gap-2">
+                    <div className="n-flex-1 n-w-0 n-flex n-items-center" tabIndex={-1}>
                       {isRenaming ? (
                         <ViewComponent.EditableRowTitle
                           value={getName(item)}
@@ -291,13 +317,19 @@ export const List = memoGeneric(
                         <ViewComponent.RowTitle
                           className={cx(
                             fontStyleMap[size],
-                            isSelected && "text-selected-list-item-text"
+                            isSelected && "n-text-selected-list-item-text"
                           )}
                         >
                           {getName(item)}
                         </ViewComponent.RowTitle>
                       )}
                     </div>
+                    {/* Right content should appear before end/detail when detailPosition is 'end' */}
+                    {right && detailPosition === "end" && (
+                      <DetailContainer selected={isSelected}>
+                        {right}
+                      </DetailContainer>
+                    )}
                     {end && detailPosition === "end" && (
                       <DetailContainer selected={isSelected}>
                         {end}
@@ -310,6 +342,12 @@ export const List = memoGeneric(
                     </DetailContainer>
                   )}
                 </div>
+                {/* When detail is below, right should still render on the right next to the action */}
+                {right && detailPosition === "below" && (
+                  <DetailContainer selected={isSelected}>
+                    {right}
+                  </DetailContainer>
+                )}
                 {end && detailPosition === "below" && (
                   <DetailContainer selected={isSelected}>{end}</DetailContainer>
                 )}
@@ -331,7 +369,7 @@ const DetailContainer = memo(function DetailContainer({
 }) {
   return (
     <div
-      className={cx("flex items-center gap-2", selected && "text-primary")}
+      className={cx("n-flex n-items-center n-gap-2", selected && "n-text-primary")}
       tabIndex={-1}
     >
       {children}
@@ -340,41 +378,61 @@ const DetailContainer = memo(function DetailContainer({
 });
 
 const pyMap: Record<CollectionItemSize, string> = {
-  xxs: "py-0.5",
-  xs: "py-0.5",
-  small: "py-0.5",
-  medium: "py-1",
-  mediumLarge: "py-1.5",
-  large: "py-2",
-  xl: "py-3",
+  xxs: "n-py-0.5",
+  xs: "n-py-0.5",
+  small: "n-py-1",
+  medium: "n-py-1",
+  mediumLarge: "n-py-1.5",
+  large: "n-py-2",
+  xl: "n-py-3",
 };
 
 const thumbnailSizeMap: Record<CollectionItemSize, string> = {
-  xxs: "w-5 h-5",
-  xs: "w-5 h-5",
-  small: "w-5 h-5",
-  medium: "w-8 h-8",
-  mediumLarge: "w-12 h-12",
-  large: "w-16 h-16",
-  xl: "w-24 h-24",
+  xxs: "n-w-4 n-h-4",
+  xs: "n-w-5 n-h-5",
+  small: "n-w-6 n-h-6",
+  medium: "n-w-8 n-h-8",
+  mediumLarge: "n-w-12 n-h-12",
+  large: "n-w-16 n-h-16",
+  xl: "n-w-24 n-h-24",
+};
+
+const roundedMap: Record<CollectionItemSize, string> = {
+  xxs: "n-rounded-sm",
+  xs: "n-rounded-sm",
+  small: "n-rounded",
+  medium: "n-rounded",
+  mediumLarge: "n-rounded",
+  large: "n-rounded",
+  xl: "n-rounded",
 };
 
 const rowGapMap: Record<CollectionItemSize, string> = {
-  xxs: "gap-2",
-  xs: "gap-2",
-  small: "gap-2",
-  medium: "gap-2",
-  mediumLarge: "gap-3",
-  large: "gap-3",
-  xl: "gap-4",
+  xxs: "n-gap-2",
+  xs: "n-gap-2",
+  small: "n-gap-2",
+  medium: "n-gap-2",
+  mediumLarge: "n-gap-3",
+  large: "n-gap-3",
+  xl: "n-gap-4",
 };
 
 const fontStyleMap: Record<CollectionItemSize, string> = {
-  xxs: "font-medium text-list-small",
-  xs: "font-medium text-list-small",
-  small: "font-medium text-list-small",
-  medium: "font-medium",
-  mediumLarge: "font-medium",
-  large: "font-medium",
-  xl: "font-medium text-heading4 text-text",
+  xxs: "n-font-medium n-text-list-small",
+  xs: "n-font-medium n-text-list-small",
+  small: "n-font-medium n-text-list-small",
+  medium: "n-font-medium",
+  mediumLarge: "n-font-medium",
+  large: "n-font-medium",
+  xl: "n-font-medium n-text-heading4 n-text-text",
+};
+
+const itemHeightMap: Record<CollectionItemSize, number> = {
+  xxs: 31,
+  xs: 31,
+  small: 31,
+  medium: 40,
+  mediumLarge: 60,
+  large: 80,
+  xl: 120,
 };

package/src/components/ListMenu.tsx

@@ -0,0 +1,91 @@
+"use client";
+
+import { ArrowRightIcon } from "@noya-app/noya-icons";
+import { chunkBy } from "@noya-app/noya-utils";
+import React from "react";
+import withSeparatorElements from "../utils/withSeparatorElements";
+import { CollectionProps } from "./Collection";
+import { Divider } from "./Divider";
+import { renderIcon } from "./Icons";
+import {
+  isSelectableMenuItem,
+  isSubMenuItem,
+  MenuItem,
+  SelectableMenuItem,
+  SubMenuItem,
+} from "./internal/Menu";
+import { List } from "./List";
+
+export type ListMenuProps<T extends string> = {
+  items: MenuItem<T>[];
+  selectedIds?: T[];
+  onSelect: (item: T) => void;
+  renderRight?: CollectionProps<MenuItem<T>, T>["renderRight"];
+  className?: string;
+};
+
+function getItemId<T extends string>(
+  item: SubMenuItem<T> | SelectableMenuItem<T>
+): string {
+  if (item.type === "submenu") {
+    return item.id;
+  }
+  return item.value;
+}
+
+export function ListMenu<T extends string>({
+  items,
+  selectedIds: selectedIdsProp,
+  onSelect,
+  renderRight,
+  className,
+}: ListMenuProps<T>) {
+  const selectedIds = items
+    .flatMap((item) =>
+      isSelectableMenuItem(item) && item.checked ? [item.value] : []
+    )
+    .concat(selectedIdsProp as T[]);
+
+  let chunks = chunkBy(
+    items,
+    (a, b) => a.type !== "separator" && b.type !== "separator"
+  );
+
+  chunks = chunks.map((chunk) =>
+    chunk.filter((item) => item.type !== "separator")
+  );
+
+  chunks = chunks.filter((chunk) => chunk.length > 0);
+
+  const lists = chunks.map((chunk) => {
+    const regularItems = chunk.filter(
+      (item) => isSubMenuItem(item) || isSelectableMenuItem(item)
+    );
+
+    return (
+      <List
+        key={regularItems.map(getItemId).join("-")}
+        items={regularItems}
+        size="small"
+        itemClassName="n-rounded-sm"
+        className={className}
+        getId={getItemId}
+        getName={(item) => item.title.toString()}
+        selectedIds={selectedIds}
+        renderRight={renderRight}
+        renderThumbnail={({ item }) => (
+          <div className="n-flex n-flex-1 n-items-center n-justify-center n-bg-divider-subtle n-w-full n-h-full n-rounded-sm">
+            {renderIcon(item.icon)}
+          </div>
+        )}
+        renderDetail={(item) => isSubMenuItem(item) && <ArrowRightIcon />}
+        onClickItem={(itemId) => onSelect(itemId as T)}
+      />
+    );
+  });
+
+  return withSeparatorElements(
+    lists,
+    <Divider overflow={12} className="n-my-1" />
+  );
+}

package/src/components/ListNavigator.tsx

@@ -0,0 +1,106 @@
+"use client";
+
+import React from "react";
+import { isSubMenuItem, SubMenuItem } from "./internal/Menu";
+import { ListMenu, ListMenuProps } from "./ListMenu";
+import { createNavigator, NavigatorProps } from "./Navigator";
+
+export type ListNavigatorProps<T extends string> = Pick<
+  ListMenuProps<T>,
+  "items" | "renderRight" | "selectedIds"
+> &
+  Pick<NavigatorProps<any, any>, "className" | "style"> & {
+    title?: React.ReactNode;
+    onSelect: (item: T, { popToRoot }: { popToRoot: () => void }) => void;
+    renderHeader?: ({
+      title,
+      onBack,
+    }: {
+      title?: React.ReactNode;
+      onBack?: () => void;
+    }) => React.ReactNode;
+  };
+
+const ListNavigatorInternal = createNavigator<{
+  screen: { id: string | undefined };
+}>();
+
+export function ListNavigator<T extends string>({
+  title,
+  items,
+  onSelect,
+  className,
+  style,
+  renderRight,
+  renderHeader,
+  selectedIds,
+}: ListNavigatorProps<T>) {
+  return (
+    <ListNavigatorInternal
+      initialRoute={{ name: "screen", params: { id: undefined } }}
+      renderHeader={
+        renderHeader &&
+        (({ route, onBack }) => {
+          const parentItem = items.find(
+            (item): item is SubMenuItem<T> =>
+              isSubMenuItem(item) && item.id === route.params.id
+          );
+
+          return renderHeader({
+            title: parentItem?.title ?? title,
+            onBack: parentItem ? onBack : undefined,
+          });
+        })
+      }
+      // Always show header if there is a renderHeader or title.
+      // Otherwise, show header if there is more than one item in the stack.
+      showHeader={
+        Boolean(renderHeader) ||
+        Boolean(title) ||
+        (({ stack }) => stack.length > 1)
+      }
+      cardClassName="n-py-1"
+      className={className}
+      style={style}
+    >
+      <ListNavigatorInternal.Screen
+        name="screen"
+        title={({ route }) => {
+          const nestedItem = items.find(
+            (item): item is SubMenuItem<T> =>
+              isSubMenuItem(item) && item.id === route.params.id
+          );
+
+          return nestedItem?.title ?? title ?? null;
+        }}
+      >
+        {({ route, navigation }) => {
+          const nestedItem = items.find(
+            (item): item is SubMenuItem<T> =>
+              isSubMenuItem(item) && item.id === route.params.id
+          );
+
+          return (
+            <ListMenu
+              items={nestedItem?.items ?? items}
+              selectedIds={selectedIds}
+              onSelect={(itemId) => {
+                const nestedItem = items.find(
+                  (item): item is SubMenuItem<T> =>
+                    isSubMenuItem(item) && item.id === itemId
+                );
+
+                if (nestedItem) {
+                  navigation.push("screen", { id: nestedItem.id });
+                } else {
+                  onSelect(itemId as T, { popToRoot: () => navigation.pop() });
+                }
+              }}
+              renderRight={renderRight}
+            />
+          );
+        }}
+      </ListNavigatorInternal.Screen>
+    </ListNavigatorInternal>
+  );
+}