@noya-app/noya-designsystem 0.1.63 → 0.1.65

package/src/components/Grid.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import {
   forwardRefGeneric,
   memoGeneric,
@@ -70,6 +72,7 @@ export const Grid = memoGeneric(
       items,
       getId,
       getName,
+      getHref,
       //   expandable,
       //   getExpanded,
       getRenamable,
@@ -81,10 +84,11 @@ export const Grid = memoGeneric(
       renderThumbnail,
       renderAction,
       renderDetail,
+      renderRight,
       onSelectionChange,
       selectedIds = emptyArray,
       //   itemRoleDescription = "clickable item",
-      //   detailPosition = "end",
+      detailPosition = "below",
       size = "medium",
       testHoveredId,
       testRenamingId,
@@ -156,10 +160,10 @@ export const Grid = memoGeneric(
         aria-multiselectable={true}
         minColumnWidth={minColumnWidth}
         scrollable={items.length > 0 && scrollable}
-        contentClassName={cx(items.length === 0 && "flex flex-1")}
+        contentClassName={cx(items.length === 0 && "n-flex n-flex-1")}
         gap={gap}
         className={cx(
-          isDropTargetActive && "bg-selected-list-item-background",
+          isDropTargetActive && "n-bg-selected-list-item-background",
           className
         )}
         {...dropTargetProps}
@@ -169,6 +173,7 @@ export const Grid = memoGeneric(
           <GridView.Section>
             {items.map((item) => {
               const id = getId(item);
+              const href = getHref?.(item);
               const isDropdownOpen = dropdownOpenId === id;
               const isHovered =
                 testHoveredId === id ||
@@ -206,9 +211,20 @@ export const Grid = memoGeneric(
                       />
                     ));
 
+              const subtitle = (
+                <span
+                  className={cx(isSelected && "n-text-selected-list-item-text")}
+                >
+                  {renderDetail?.(item, isSelected)}
+                </span>
+              );
+
+              const right = renderRight?.(item, isSelected);
+
               return (
                 <GridView.Item<M>
                   key={id}
+                  href={href}
                   id={id}
                   role="option"
                   aria-selected={isSelected}
@@ -219,44 +235,44 @@ export const Grid = memoGeneric(
                     setHoveredId(isHovering ? id : undefined);
                   }}
                   title={
-                    <EditableText
-                      tabIndex={isRenaming ? undefined : -1}
-                      value={getName(item)}
-                      focused={isRenaming}
-                      testFocused={isTestingRenaming}
-                      readOnly={!itemIsRenamable || !onRename}
-                      onSubmit={(value) => {
-                        onRename?.(item, value);
-                        setRenamingId(undefined);
-                      }}
-                      onBlur={() => {
-                        setRenamingId(undefined);
-                      }}
-                      // max height ensures preview text and input are one line
-                      textClassName="bg-listview-editing-background max-h-input-height"
-                    >
-                      {(props) => (
-                        <span
-                          {...props}
-                          className={cx(
-                            isSelected
-                              ? "text-selected-list-item-text"
-                              : "text-text",
-                            "truncate select-none"
-                          )}
-                        />
-                      )}
-                    </EditableText>
-                  }
-                  subtitle={
-                    <span
-                      className={cx(
-                        isSelected && "text-selected-list-item-text"
-                      )}
-                    >
-                      {renderDetail?.(item, isSelected)}
-                    </span>
+                    <div className="n-flex n-items-center n-gap-2 n-flex-row">
+                      <EditableText
+                        className={cx(
+                          (detailPosition === "end" || right) && "n-flex-1",
+                          "n-truncate n-select-none"
+                        )}
+                        tabIndex={isRenaming ? undefined : -1}
+                        value={getName(item)}
+                        focused={isRenaming}
+                        testFocused={isTestingRenaming}
+                        readOnly={!itemIsRenamable || !onRename}
+                        onSubmit={(value) => {
+                          onRename?.(item, value);
+                          setRenamingId(undefined);
+                        }}
+                        onBlur={() => {
+                          setRenamingId(undefined);
+                        }}
+                        // max height ensures preview text and input are one line
+                        textClassName="n-bg-listview-editing-background n-max-h-input-height"
+                      >
+                        {(props) => (
+                          <span
+                            {...props}
+                            className={cx(
+                              isSelected
+                                ? "n-text-selected-list-item-text"
+                                : "n-text-text",
+                              "n-truncate n-select-none"
+                            )}
+                          />
+                        )}
+                      </EditableText>
+                      {right && <div className="n-flex-none">{right}</div>}
+                      {detailPosition === "end" && subtitle}
+                    </div>
                   }
+                  subtitle={detailPosition === "below" && subtitle}
                   loading={false}
                   selected={isSelected}
                   onClick={() => {
@@ -286,8 +302,8 @@ export const Grid = memoGeneric(
                   {thumbnail && (
                     <div
                       className={cx(
-                        "rounded overflow-hidden flex-none flex w-full",
-                        isSelected && "text-selected-list-item-text"
+                        "n-rounded n-overflow-hidden n-flex-none n-flex n-w-full",
+                        isSelected && "n-text-selected-list-item-text"
                       )}
                       tabIndex={-1}
                     >

package/src/components/GridView.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { KeyModifiers } from "@noya-app/noya-keymap";
 import { forwardRefGeneric, memoGeneric } from "@noya-app/react-utils";
 import React, {
@@ -11,6 +13,7 @@ import React, {
   useContext,
   useMemo,
 } from "react";
+import { useLinkComponent } from "../contexts/LinkComponentContext";
 import { useHover } from "../hooks/useHover";
 import { cx, mergeConflictingClassNames } from "../utils/classNames";
 import withSeparatorElements from "../utils/withSeparatorElements";
@@ -31,9 +34,9 @@ const ItemTitle = ({
   return (
     <span
       className={cx(
-        "font-sans text-heading5 text-text-muted font-medium",
+        "n-font-sans n-text-heading5 n-text-text-muted n-font-medium",
         showBackground &&
-          "bg-sidebar-background border border-divider-subtle rounded-[2px] backdrop-blur-[4px] p-[2px_4px]"
+          "n-bg-sidebar-background n-n-border n-border-divider-subtle n-rounded-[2px] n-backdrop-blur-[4px] n-p-[2px_4px]"
       )}
     >
       {children}
@@ -51,9 +54,9 @@ const ItemDescription = ({
   return (
     <span
       className={cx(
-        "font-sans text-sm text-text-muted select-none truncate",
+        "n-font-sans n-text-sm n-text-text-muted n-select-none n-truncate",
         showBackground &&
-          "bg-sidebar-background border border-divider-subtle rounded-[2px] backdrop-blur-[4px] p-[2px_4px]"
+          "n-bg-sidebar-background n-n-border n-border-divider-subtle n-rounded-[2px] n-backdrop-blur-[4px] n-p-[2px_4px]"
       )}
     >
       {children}
@@ -70,7 +73,10 @@ const SectionTitle = ({
 }) => {
   return (
     <span
-      className={`font-sans text-heading3 font-medium user-select-none truncate ${last ? "text-text" : "text-text-muted"}`}
+      className={cx(
+        "n-font-sans n-text-heading3 n-font-medium n-user-select-none n-truncate",
+        last ? "n-text-text" : "n-text-text-muted"
+      )}
     >
       {children}
     </span>
@@ -79,12 +85,13 @@ const SectionTitle = ({
 
 interface ItemProps<MenuItemType extends string = string> {
   id: string;
+  href?: string;
   title?: ReactNode;
   subtitle?: ReactNode;
   loading?: boolean;
   selected?: boolean;
   onClick?: (event: React.MouseEvent) => void;
-  onSelect?: (options: KeyModifiers) => void;
+  onSelect?: (options: KeyModifiers & { stopPropagation(): void }) => void;
   onDoubleClick?: () => void;
   onHoverChange?: (isHovering: boolean) => void;
   children?: ReactNode;
@@ -105,6 +112,7 @@ const GridViewItem = forwardRefGeneric(function GridViewItem<
 >(
   {
     id,
+    href,
     title,
     subtitle,
     loading,
@@ -125,23 +133,27 @@ const GridViewItem = forwardRefGeneric(function GridViewItem<
     testShowInsideDropIndicator: showInsideDropIndicator = false,
     ...props
   }: ItemProps<MenuItemType>,
-  forwardedRef: ForwardedRef<HTMLDivElement>
+  forwardedRef: ForwardedRef<HTMLElement>
 ) {
   const { hoverProps } = useHover({
     onHoverChange,
   });
 
-  const { textPosition, bordered, disabled } = useContext(GridViewContext);
+  const { textPosition, bordered, disabled, alwaysShowSubtitles } =
+    useContext(GridViewContext);
 
   const handleClick = useCallback(
     (event: React.MouseEvent) => {
       event.stopPropagation();
-      event.preventDefault();
+
+      if (!href) {
+        event.preventDefault();
+      }
 
       onClick?.(event);
       onSelect?.(event);
     },
-    [onClick, onSelect]
+    [href, onClick, onSelect]
   );
 
   const handleKeyDown = useCallback(
@@ -159,21 +171,25 @@ const GridViewItem = forwardRefGeneric(function GridViewItem<
     [onSelect, onKeyDown]
   );
 
+  const LinkComponent = useLinkComponent();
+  const Component = typeof href === "string" ? LinkComponent : "div";
+
   let element = (
-    <div
+    <Component
       {...props}
       className={cx(
-        "flex flex-col relative rounded p-2 -m-2 text-text",
-        "cursor-pointer",
-        "active:opacity-70",
-        selected && "bg-selected-list-item-background",
-        hovered && "bg-list-view-hover-background",
-        disabled && "opacity-50",
-        showInsideDropIndicator && "ring-2 ring-primary ring-inset",
-        "focus:ring-2 focus:ring-primary focus:ring-inset focus:outline-none"
+        "n-flex n-flex-col n-relative n-rounded n-p-2 -n-m-2 n-text-text",
+        "n-cursor-pointer",
+        "active:n-opacity-70",
+        selected && "n-bg-selected-list-item-background",
+        hovered && "n-bg-list-view-hover-background",
+        disabled && "n-opacity-50",
+        showInsideDropIndicator && "n-ring-2 n-ring-primary n-ring-inset",
+        "focus:n-ring-2 focus:n-ring-primary focus:n-ring-inset focus:n-outline-none"
       )}
       id={id}
-      ref={forwardedRef}
+      href={href}
+      ref={forwardedRef as ForwardedRef<HTMLAnchorElement & HTMLDivElement>}
       {...hoverProps}
       tabIndex={disabled ? undefined : 0}
       onKeyDown={handleKeyDown}
@@ -183,8 +199,10 @@ const GridViewItem = forwardRefGeneric(function GridViewItem<
     >
       <div
         className={cx(
-          "flex items-center justify-center rounded",
-          bordered ? "border border-divider" : "border border-transparent"
+          "n-flex n-items-center n-justify-center n-rounded",
+          bordered
+            ? "n-border n-border-divider"
+            : "n-border n-border-transparent"
         )}
         style={style}
       >
@@ -194,12 +212,16 @@ const GridViewItem = forwardRefGeneric(function GridViewItem<
         <>
           <Spacer.Vertical size={8} />
           <ItemTitle>{title || " "}</ItemTitle>
-          <Spacer.Vertical size={2} />
-          <ItemDescription>{subtitle || " "}</ItemDescription>
+          {(alwaysShowSubtitles || subtitle) && (
+            <>
+              <Spacer.Vertical size={2} />
+              <ItemDescription>{subtitle || " "}</ItemDescription>
+            </>
+          )}
         </>
       )}
       {textPosition === "overlay" && hovered && (title || subtitle) && (
-        <div className="absolute inset-0 flex flex-col justify-end items-start p-1 pointer-events-none truncate gap-0.5">
+        <div className="n-absolute n-inset-0 n-flex n-flex-col n-justify-end n-items-start n-p-1 n-pointer-events-none n-truncate n-gap-0.5">
           {title && <ItemTitle showBackground>{title}</ItemTitle>}
           {subtitle && (
             <ItemDescription showBackground>{subtitle}</ItemDescription>
@@ -207,16 +229,16 @@ const GridViewItem = forwardRefGeneric(function GridViewItem<
         </div>
       )}
       {action && (
-        <div className="absolute top-[7px] right-[7px] flex flex-col justify-end items-start p-1 truncate gap-0.5">
+        <div className="n-absolute n-top-[7px] n-right-[7px] n-flex n-flex-col n-justify-end n-items-start n-p-1 n-truncate n-gap-0.5">
           {action}
         </div>
       )}
       {loading && (
-        <div className="flex flex-col justify-start items-end p-1 pointer-events-none animate-shimmer absolute inset-0 bg-gradient-to-r from-white/0 via-[rgb(226,232,240)]/50 to-white/0 bg-length:200%_100%]">
+        <div className="n-flex n-flex-col n-justify-start n-items-end n-p-1 n-pointer-events-none n-animate-shimmer n-absolute n-inset-0 n-bg-gradient-to-r n-from-white/0 n-via-[rgb(226,232,240)]/50 n-to-white/0 n-bg-[length:200%_100%]">
           <ActivityIndicator opacity={0.5} size={13} />
         </div>
       )}
-    </div>
+    </Component>
   );
 
   if (menuItems && onSelectMenuItem) {
@@ -235,7 +257,7 @@ const GridViewItem = forwardRefGeneric(function GridViewItem<
     element = (
       <Tooltip
         content={
-          <div className="flex flex-col gap-0.5">
+          <div className="n-flex n-flex-col gap-0.5">
             <ItemTitle>{title}</ItemTitle>
             <ItemDescription>{subtitle}</ItemDescription>
           </div>
@@ -255,6 +277,7 @@ type GridViewContextValue = {
   bordered: boolean;
   disabled: boolean;
   gap: number;
+  alwaysShowSubtitles: boolean;
 };
 
 const GridViewContext = createContext<GridViewContextValue>({
@@ -263,6 +286,7 @@ const GridViewContext = createContext<GridViewContextValue>({
   bordered: false,
   disabled: false,
   gap: 0,
+  alwaysShowSubtitles: false,
 });
 
 interface GridViewRootProps extends Partial<GridViewContextValue> {
@@ -277,6 +301,7 @@ interface GridViewRootProps extends Partial<GridViewContextValue> {
   role?: string;
   renderEmptyState?: () => ReactNode;
   contentClassName?: string;
+  alwaysShowSubtitles?: boolean;
 }
 
 const GridViewRoot = forwardRef(function GridViewRoot(
@@ -291,6 +316,7 @@ const GridViewRoot = forwardRef(function GridViewRoot(
     disabled = false,
     className,
     contentClassName,
+    alwaysShowSubtitles = false,
     ...props
   }: GridViewRootProps,
   forwardedRef: ForwardedRef<HTMLDivElement>
@@ -306,20 +332,21 @@ const GridViewRoot = forwardRef(function GridViewRoot(
   );
 
   const contextValue = useMemo(
-    () => ({
+    (): GridViewContextValue => ({
       minColumnWidth,
       textPosition,
       bordered,
       disabled,
       gap,
+      alwaysShowSubtitles,
     }),
-    [bordered, disabled, gap, minColumnWidth, textPosition]
+    [bordered, disabled, gap, minColumnWidth, textPosition, alwaysShowSubtitles]
   );
 
   const mergedClassName = useMemo(() => {
     const baseClassName = cx(
-      "flex flex-col -mx-3",
-      scrollable ? "basis-0 min-h-0" : "flex-none",
+      "n-flex n-flex-col n--mx-3",
+      scrollable ? "n-basis-0 n-min-h-0" : "n-flex-none",
       className
     );
 
@@ -328,7 +355,9 @@ const GridViewRoot = forwardRef(function GridViewRoot(
     });
   }, [className, scrollable]);
 
-  const content = <div className={cx("p-3", contentClassName)}>{children}</div>;
+  const content = (
+    <div className={cx("n-p-3", contentClassName)}>{children}</div>
+  );
 
   return (
     <GridViewContext.Provider value={contextValue}>
@@ -367,7 +396,7 @@ function GridViewSection({
   ) : (
     <div
       role="presentation"
-      className={cx("grid text-text", className)}
+      className={cx("n-grid n-text-text", className)}
       style={styles}
     >
       {children}
@@ -379,7 +408,7 @@ function GridViewSectionHeader({ title }: { title: string }) {
   const grouped = title.split("/");
 
   return (
-    <div className="px-5">
+    <div className="n-px-5">
       <Spacer.Vertical size={24} />
       {withSeparatorElements(
         grouped.map((title, index) => (

package/src/components/IVirtualizedList.tsx

@@ -0,0 +1,5 @@
+"use client";
+
+export interface IVirtualizedList {
+  scrollToIndex(index: number): void;
+}

package/src/components/IconButton.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import * as React from "react";
 import { cssVars } from "../theme";
 import { Button, ButtonProps } from "./Button";

package/src/components/Icons.tsx

@@ -1,18 +1,38 @@
 import * as Icons from "@noya-app/noya-icons";
+import { IconProps } from "@noya-app/noya-icons";
 import * as React from "react";
 
 export type IconName = keyof typeof Icons;
 
 export { Icons };
 
-export function renderIcon(
-  iconName: Exclude<React.ReactNode, string> | IconName
-): React.ReactNode {
+export type IconProp = Exclude<React.ReactNode, string> | IconName;
+
+export function renderIcon(iconName: IconProp): React.ReactNode {
   if (typeof iconName === "string") {
     const Icon = Icons[iconName as IconName];
 
-    return <Icon />;
+    return <Icon className="n-min-h-[15px]" />;
   }
 
   return iconName;
 }
+
+const didWarn = new Set<string>();
+
+export function Icon({
+  name,
+  ...props
+}: { name: IconName } & Omit<IconProps, "name">) {
+  const Icon = Icons[name];
+
+  if (!Icon) {
+    if (!didWarn.has(name)) {
+      console.warn(`Icon ${name} not found in @noya-app/noya-icons`);
+      didWarn.add(name);
+    }
+    return null;
+  }
+
+  return <Icon {...props} />;
+}

package/src/components/InputField.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { DropdownChevronIcon } from "@noya-app/noya-icons";
 import { memoGeneric, useMergeRefs, useSize } from "@noya-app/react-utils";
 import { Property } from "csstype";
@@ -162,7 +164,7 @@ const InputFieldButton = memo(
         size={size === "medium" ? "normal" : size}
         className={cx(
           className,
-          variant === "floating" && "bg-transparent shadow-none"
+          variant === "floating" && "n-bg-transparent n-shadow-none"
         )}
         {...rest}
       >
@@ -226,21 +228,21 @@ const InputElement = forwardRef(
     });
 
     const inputClassName = cx(
-      "flex w-0 flex-1 relative border-0 outline-none min-w-0 self-stretch rounded bg-input-background focus:ring-2 focus:ring-primary placeholder:text-text-disabled transition-all",
+      "n-flex n-w-0 n-flex-1 n-relative n-border-0 n-outline-none n-min-w-0 n-self-stretch n-rounded n-bg-input-background focus:n-ring-2 focus:n-ring-primary placeholder:n-text-text-disabled n-transition-[box-shadow]",
       readOnly
-        ? "text-text-muted"
+        ? "n-text-text-muted"
         : disabled
-          ? "text-text-disabled"
-          : "text-text",
-      "font-sans font-normal",
-      $textAlign && `text-${$textAlign}`,
+          ? "n-text-text-disabled"
+          : "n-text-text",
+      "n-font-sans n-font-normal",
+      $textAlign && `n-text-${$textAlign}`,
       size === "small"
-        ? "text-[11px] leading-[19px] py-[1px]"
+        ? "n-text-[11px] n-leading-[19px] n-py-[1px]"
         : size === "large"
-          ? "py-2.5 text-heading5"
+          ? "n-py-2.5 n-text-heading5"
           : size === "medium"
-            ? "py-1 text-heading5"
-            : $variant === "bare" && "py-1 -m-1",
+            ? "n-py-1 n-text-heading5"
+            : $variant === "bare" && "n-py-1 -n-m-1",
       className
     );
 
@@ -475,7 +477,7 @@ const RootContainer = forwardRef<
 >(({ $width, className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cx("flex flex-row relative flex-1", className)}
+    className={cx("n-flex n-flex-row n-relative n-flex-1", className)}
     style={{
       maxWidth: $width || $width === 0 ? `${$width}px` : undefined,
       ...props.style,
@@ -570,7 +572,7 @@ function InputFieldRoot({
 
   const insetLabel = useMemo(
     () => (
-      <Label htmlFor={id} className="!text-text-disabled">
+      <Label htmlFor={id} className="!n-text-text-disabled">
         {labelProp ?? label}
       </Label>
     ),
@@ -588,7 +590,7 @@ function InputFieldRoot({
       {(end || label) && (
         <span
           ref={endRef}
-          className={cx(endStyles, label && end && "gap-1.5", endClassName)}
+          className={cx(endStyles, label && end && "n-gap-1.5", endClassName)}
         >
           {labelProp
             ? insetLabel
@@ -624,7 +626,7 @@ function InputFieldRoot({
         >
           {measuredWidthObject && (
             <div
-              className="flex flex-col overflow-hidden"
+              className="n-flex n-flex-col n-overflow-hidden"
               style={measuredWidthObject}
             >
               {renderPopoverContent(measuredWidthObject)}
@@ -665,12 +667,12 @@ const PrimitiveInputField = ({
       style={memoizedStyles}
       id={id}
       className={cx(
-        "flex w-0 flex-1 relative border-none outline-none min-w-0 self-stretch rounded py-1 bg-input-background select-all pointer-events-[all] focus:ring-2 focus:ring-primary font-sans font-normal text-heading5 placeholder:text-text-disabled focus:z-interactable transition-all",
+        "n-flex n-w-0 n-flex-1 n-relative n-border-none n-outline-none n-min-w-0 n-self-stretch n-rounded n-py-1 n-bg-input-background n-select-all n-pointer-events-[all] focus:n-ring-2 focus:n-ring-primary n-font-sans n-font-normal n-text-heading5 placeholder:n-text-text-disabled focus:n-z-interactable n-transition-[box-shadow]",
         readOnly
-          ? "text-text-muted"
+          ? "n-text-text-muted"
           : disabled
-            ? "text-text-disabled"
-            : "text-text",
+            ? "n-text-text-disabled"
+            : "n-text-text",
         className
       )}
       {...props}

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>
     );