@noya-app/noya-designsystem 0.1.63 → 0.1.65

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-3 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

@@ -1,3 +1,5 @@
+"use client";
+
 import * as kiwi from "kiwi.js";
 import * as React from "react";
 
@@ -13,11 +15,13 @@ export const LabeledElementView = React.memo(function LabeledElementView({
   const elementIds: string[] = React.Children.toArray(children)
     .flatMap((child) =>
       React.isValidElement(child) && child.type === React.Fragment
-        ? (child.props.children as React.ReactNode[])
+        ? ((child as any).props.children as React.ReactNode[])
         : [child]
     )
     .map((child) =>
-      React.isValidElement(child) && "id" in child.props ? child.props.id : null
+      React.isValidElement(child) && "id" in (child as any).props
+        ? (child as any).props.id
+        : null
     )
     .filter((id) => !!id);
   const serializedIds = elementIds.join(",");
@@ -148,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

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { memo, useMemo } from "react";
 import { useIndent } from "../hooks/useIndent";
 import {
@@ -13,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 = {
@@ -94,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" && (
@@ -104,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}
@@ -114,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

@@ -1,9 +1,18 @@
+"use client";
+
 import {
   forwardRefGeneric,
   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";
 import { updateSelection } from "../utils/selection";
@@ -13,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 = {
@@ -32,6 +42,7 @@ export const List = memoGeneric(
       items,
       getId,
       getName,
+      getHref,
       expandable,
       getExpanded,
       getRenamable,
@@ -43,7 +54,10 @@ export const List = memoGeneric(
       renderThumbnail,
       renderAction,
       renderDetail,
+      renderRight,
       onSelectionChange,
+      itemStyle: itemStyleProp,
+      itemClassName: itemClassNameProp,
       itemRoleDescription = "clickable item",
       detailPosition = "end",
       size = "medium",
@@ -63,9 +77,11 @@ export const List = memoGeneric(
       getDropTargetParentIndex,
       getPlaceholder,
       onClickItem,
+      onClick,
       dragIndicatorStyle,
       sortableId,
       sharedDragProps,
+      virtualized,
     } = props;
 
     const [internalHoveredId, setHoveredId] = useState<string>();
@@ -73,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;
@@ -101,8 +127,9 @@ export const List = memoGeneric(
     };
 
     const ViewComponent = expandable ? TreeView : ListView;
+    const LinkComponent = useLinkComponent();
 
-    const fileDropTargetRef = useRef<HTMLDivElement>(null);
+    const fileDropTargetRef = useRef<HTMLDivElement | null>(null);
     const { isDropTargetActive, dropTargetProps } = useFileDropTarget(
       fileDropTargetRef,
       onFilesDrop
@@ -119,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"
@@ -137,6 +165,8 @@ export const List = memoGeneric(
         getDropTargetParentIndex={getDropTargetParentIndex}
         sharedDragProps={sharedDragProps}
         sortableId={sortableId}
+        onPress={onClick}
+        itemHeight={itemHeightMap[size]}
         {...dropTargetProps}
         renderItem={(
           item: T,
@@ -144,6 +174,7 @@ export const List = memoGeneric(
           { isDragOverlay }: ListViewItemInfo
         ) => {
           const id = getId(item);
+          const href = getHref?.(item);
           const isDropdownOpen = dropdownOpenId === id;
           const isHovered =
             (hoveredId === id || isDropdownOpen) && !isDragOverlay;
@@ -192,11 +223,13 @@ 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}
+              href={href}
               id={id}
               key={id}
               role="option"
@@ -204,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}
@@ -220,6 +253,7 @@ export const List = memoGeneric(
               onPress={(e: ListView.ClickInfo) => {
                 handleSelect(id, e);
                 onClickItem?.(id);
+                e.stopPropagation();
               }}
               onDoubleClick={() => {
                 onDoubleClickItem?.(id);
@@ -247,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)}
@@ -283,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}
@@ -302,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>
                 )}
@@ -323,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}
@@ -332,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-3",
-  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" />
+  );
+}