@noya-app/noya-designsystem 0.1.44 → 0.1.46

package/src/components/TextArea.tsx

@@ -7,6 +7,7 @@ import React, {
   useEffect,
   useRef,
 } from "react";
+import { useLabel } from "../hooks/useLabel";
 import { cx } from "../utils/classNames";
 
 export const useAutoResize = (value: string | undefined) => {
@@ -39,6 +40,7 @@ export const TextArea = memo(
     } & React.TextareaHTMLAttributes<HTMLTextAreaElement>,
     forwardedRef: React.ForwardedRef<HTMLTextAreaElement>
   ) {
+    const { fieldId: id } = useLabel({ fieldId: rest.id });
     const autoResizeRef = useAutoResize(
       autoResize ? value || rest.placeholder || "" : undefined
     );
@@ -67,8 +69,9 @@ export const TextArea = memo(
           `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`,
           className
         )}
-        ref={handleRef}
         {...rest}
+        id={id}
+        ref={handleRef}
         onChange={handleChange}
         value={value}
       />

package/src/components/Toolbar.tsx

@@ -1,12 +1,16 @@
 import { DropdownChevronIcon } from "@noya-app/noya-icons";
 import { useKeyboardShortcuts } from "@noya-app/noya-keymap";
 import React from "react";
+
 import { BaseToolbar } from "./BaseToolbar";
 import { Button } from "./Button";
 import { DropdownMenu } from "./DropdownMenu";
 import { renderIcon } from "./Icons";
-import type { MenuItem } from "./internal/Menu";
-import { getKeyboardShortcutsForMenuItems } from "./internal/Menu";
+import {
+  getKeyboardShortcutsForMenuItems,
+  isSelectableMenuItem,
+  MenuItem,
+} from "./internal/Menu";
 import { Spacer } from "./Spacer";
 
 export interface ToolbarProps<T extends string = string> {
@@ -82,9 +86,10 @@ export function ToolbarMenu<T extends string>({
   return (
     <>
       {items.map((item, i) => {
-        if (typeof item === "string") return null;
+        if (item.type === "separator") return null;
+        if (item.type === "sectionHeader") return null;
 
-        if (!item.items) {
+        if (isSelectableMenuItem(item)) {
           return (
             <Button
               key={i}

package/src/components/TreeView.tsx

@@ -12,7 +12,9 @@ import { Spacer } from "./Spacer";
 type TreeRowBaseProps = {
   icon?: Exclude<ReactNode, string> | IconName;
   expanded?: boolean;
+  chevronClassName?: string;
   onClickChevron?: ({ altKey }: { altKey: boolean }) => void;
+  onDoubleClick?: () => void;
 };
 
 type TreeViewRowProps<MenuItemType extends string> =
@@ -23,6 +25,7 @@ const TreeRow = forwardRefGeneric(function TreeRow<MenuItemType extends string>(
     icon,
     expanded,
     onClickChevron,
+    chevronClassName,
     children,
     ...rest
   }: TreeViewRowProps<MenuItemType>,
@@ -46,6 +49,7 @@ const TreeRow = forwardRefGeneric(function TreeRow<MenuItemType extends string>(
             <Spacer.Horizontal size={19} />
           ) : (
             <IconButton
+              className={chevronClassName}
               iconName={expanded ? "ChevronDownIcon2" : "ChevronRightIcon2"}
               onClick={handleClickChevron}
               selected={rest.selected}

package/src/components/WorkspaceLayout.tsx

@@ -25,10 +25,11 @@ import {
 import { useWindowSize } from "../hooks/useWindowSize";
 import { cx } from "../utils/classNames";
 
-interface Props {
+export interface WorkspaceLayoutProps {
   id?: string;
   className?: string;
   style?: React.CSSProperties;
+  theme?: "light" | "dark";
   autoSavePrefix?: string;
   left?: React.ReactNode;
   leftOptions?: SideOptions;
@@ -57,6 +58,7 @@ export type SideOptions = {
    */
   initialSize?: number | string;
   minSize?: number | string;
+  maxSize?: number | string;
 };
 
 export const WorkspaceLayout = forwardRef(function WorkspaceLayout(
@@ -71,20 +73,23 @@ export const WorkspaceLayout = forwardRef(function WorkspaceLayout(
     children,
     onChangeLayoutState,
     leftOptions: {
+      minSize: leftMinSize = 200,
+      maxSize: leftMaxSize = 500,
       initialSize: leftInitialSize = 280,
-      minSize: leftMinSize,
       resizable: leftResizable = true,
       style: leftStyle,
       className: leftClassName,
     } = {},
     rightOptions: {
+      minSize: rightMinSize = 200,
+      maxSize: rightMaxSize = 500,
       initialSize: rightInitialSize = 280,
-      minSize: rightMinSize,
       resizable: rightResizable = true,
       style: rightStyle,
       className: rightClassName,
     } = {},
-  }: Props,
+    theme,
+  }: WorkspaceLayoutProps,
   forwardedRef: React.ForwardedRef<IWorkspaceLayout>
 ) {
   const windowSize = useWindowSize();
@@ -94,12 +99,40 @@ export const WorkspaceLayout = forwardRef(function WorkspaceLayout(
       : (size / windowSize.width) * 100;
   }
 
-  const leftSidebarPercentage = getPercentage(leftInitialSize);
-  const rightSidebarPercentage = getPercentage(rightInitialSize);
+  function clampPercentage(
+    value: number,
+    min: number | undefined,
+    max: number | undefined
+  ) {
+    let result = value;
+    if (min !== undefined) {
+      result = Math.max(result, min);
+    }
+    if (max !== undefined) {
+      result = Math.min(result, max);
+    }
+    return result;
+  }
+
   const leftSidebarMinPercentage =
     leftMinSize !== undefined ? getPercentage(leftMinSize) : undefined;
   const rightSidebarMinPercentage =
     rightMinSize !== undefined ? getPercentage(rightMinSize) : undefined;
+  const leftSidebarMaxPercentage =
+    leftMaxSize !== undefined ? getPercentage(leftMaxSize) : undefined;
+  const rightSidebarMaxPercentage =
+    rightMaxSize !== undefined ? getPercentage(rightMaxSize) : undefined;
+
+  const leftSidebarPercentage = clampPercentage(
+    getPercentage(leftInitialSize),
+    leftSidebarMinPercentage,
+    leftSidebarMaxPercentage
+  );
+  const rightSidebarPercentage = clampPercentage(
+    getPercentage(rightInitialSize),
+    rightSidebarMinPercentage,
+    rightSidebarMaxPercentage
+  );
 
   const panelGroupRef = useRef<ImperativePanelGroupHandle>(null);
   const leftSidebarRef = useRef<ImperativePanelHandle>(null);
@@ -189,6 +222,7 @@ export const WorkspaceLayout = forwardRef(function WorkspaceLayout(
       id={id}
       className={cx("flex flex-col bg-canvas-background", className)}
       style={style}
+      data-theme={theme}
     >
       {toolbar}
       <div className="flex flex-row flex-1">
@@ -212,11 +246,20 @@ export const WorkspaceLayout = forwardRef(function WorkspaceLayout(
                 ref={leftSidebarRef}
                 defaultSize={leftSidebarPercentage}
                 minSize={leftSidebarMinPercentage ?? leftSidebarPercentage}
-                {...(!leftResizable && { maxSize: leftSidebarPercentage })}
+                maxSize={
+                  leftSidebarMaxPercentage ??
+                  (!leftResizable ? leftSidebarPercentage : undefined)
+                }
                 collapsible
               >
                 {internalLayoutState?.leftSidebarCollapsed ? null : (
-                  <PanelInner style={leftStyle} className={leftClassName}>
+                  <PanelInner
+                    style={leftStyle}
+                    className={cx(
+                      "bg-sidebar-background flex-col",
+                      leftClassName
+                    )}
+                  >
                     {left}
                   </PanelInner>
                 )}
@@ -231,7 +274,7 @@ export const WorkspaceLayout = forwardRef(function WorkspaceLayout(
             minSize={10}
             className="flex relative"
           >
-            {children}
+            <PanelInner className="bg-canvas-background">{children}</PanelInner>
           </Panel>
           {right && (
             <>
@@ -243,13 +286,20 @@ export const WorkspaceLayout = forwardRef(function WorkspaceLayout(
                 ref={rightSidebarRef}
                 minSize={rightSidebarMinPercentage ?? rightSidebarPercentage}
                 defaultSize={rightSidebarPercentage}
-                {...(!rightResizable && {
-                  maxSize: rightSidebarPercentage,
-                })}
+                maxSize={
+                  rightSidebarMaxPercentage ??
+                  (!rightResizable ? rightSidebarPercentage : undefined)
+                }
                 collapsible
               >
                 {internalLayoutState?.rightSidebarCollapsed ? null : (
-                  <PanelInner style={rightStyle} className={rightClassName}>
+                  <PanelInner
+                    style={rightStyle}
+                    className={cx(
+                      "bg-sidebar-background flex-col",
+                      rightClassName
+                    )}
+                  >
                     {right}
                   </PanelInner>
                 )}
@@ -272,13 +322,7 @@ const PanelInner = memo(function PanelInner({
   className?: string;
 }) {
   return (
-    <div
-      style={style}
-      className={cx(
-        "absolute inset-0 flex flex-col bg-sidebar-background",
-        className
-      )}
-    >
+    <div style={style} className={cx("absolute inset-0 flex", className)}>
       {children}
     </div>
   );

package/src/components/internal/Menu.tsx

@@ -1,12 +1,13 @@
 import { getShortcutDisplayParts } from "@noya-app/noya-keymap";
 import React, { memo, ReactNode } from "react";
 import { useDesignSystemConfiguration } from "../../contexts/DesignSystemConfiguration";
+import { cx } from "../../utils/classNames";
+import { IScoredItem } from "../../utils/fuzzyScorer";
 import withSeparatorElements from "../../utils/withSeparatorElements";
 import { IconName } from "../Icons";
+import { Spacer } from "../Spacer";
 import { textStyles } from "../Text";
 
-export const SEPARATOR_ITEM = "separator";
-
 // From electron
 export type MenuItemRole =
   | "undo"
@@ -57,40 +58,95 @@ export type MenuItemRole =
   | "moveTabToNewWindow"
   | "windowMenu";
 
-export type RegularMenuItem<T extends string> = {
-  value?: T;
-  title: ReactNode;
-  shortcut?: string;
+export type SeparatorItem = {
+  type: "separator";
+};
+
+type BaseMenuItem = {
   checked?: boolean;
   disabled?: boolean;
   icon?: Exclude<ReactNode, string> | IconName;
-  items?: MenuItem<T>[];
   role?: MenuItemRole;
+  alwaysInclude?: boolean;
+  title: NonNullable<ReactNode>;
+};
+
+export type SectionHeaderMenuItem = {
+  type: "sectionHeader";
+  id: string;
+  title: ReactNode;
+  maxVisibleItems?: number;
+  variant?: "normal" | "label";
 };
 
+export type SelectableMenuItem<T extends string> = BaseMenuItem & {
+  type?: undefined;
+  shortcut?: string;
+  value: T;
+};
+
+type SubMenuItem<T extends string> = BaseMenuItem & {
+  type: "submenu";
+  items: MenuItem<T>[];
+  id: string;
+};
+
+export type NonSelectableMenuItem<T extends string> =
+  | SeparatorItem
+  | SectionHeaderMenuItem
+  | SubMenuItem<T>;
+
 export type MenuItem<T extends string> =
-  | typeof SEPARATOR_ITEM
-  | RegularMenuItem<T>;
+  | SeparatorItem
+  | SelectableMenuItem<T>
+  | SectionHeaderMenuItem
+  | SubMenuItem<T>;
+
+type ScoredSelectableMenuItem<T extends string> = SelectableMenuItem<T> &
+  IScoredItem;
+
+export type ScoredMenuItem<T extends string> =
+  | ScoredSelectableMenuItem<T>
+  | SectionHeaderMenuItem;
 
 // Extract type T of RegularMenuItem<T> within MenuItem<T>
 export type ExtractMenuItemType<T> =
-  T extends RegularMenuItem<infer U> ? U : never;
+  T extends SelectableMenuItem<infer U> ? U : never;
+
+export const isSelectableMenuItem = <T extends string>(
+  item: MenuItem<T>
+): item is SelectableMenuItem<T> => {
+  return item.type === undefined;
+};
+
+export const isNonSelectableMenuItem = <T extends string>(
+  item: MenuItem<T>
+): item is NonSelectableMenuItem<T> => !isSelectableMenuItem(item);
+
+export const isMenuItemSectionHeader = (
+  item: MenuItem<string>
+): item is SectionHeaderMenuItem => item.type === "sectionHeader";
+
+export const isSelectableMenuItemWithScore = (
+  item: MenuItem<string>
+): item is ScoredSelectableMenuItem<string> =>
+  isSelectableMenuItem(item) && "index" in item && "score" in item;
 
 export const CHECKBOX_WIDTH = 16;
 export const CHECKBOX_RIGHT_INSET = 8;
 
 export const styles = {
-  separatorStyle: "h-px bg-divider mx-[-4px] my-1",
+  separatorStyle: "h-px bg-divider mx-4 my-1",
 
   itemStyle: ({ disabled }: { disabled?: boolean }) => `
     flex-none select-none cursor-pointer rounded
-    py-1.5 px-2
+    py-1.5 px-3
     focus:outline-none focus:text-white focus:bg-primary
     focus:kbd:text-white
     active:bg-primary-light
     transition-colors
     flex items-center
-    font-sans text-button font-medium 
+    font-sans text-button font-medium
     ${disabled ? "text-text-disabled" : ""}
   `,
 
@@ -106,18 +162,18 @@ export const styles = {
     bg-popover-background
     text-text
     shadow-[0_2px_4px_rgba(0,0,0,0.2),_0_0_12px_rgba(0,0,0,0.1)]
-    p-1
-    border border-popover-divider
     z-menu
+    py-1
   `,
 };
 
 function getKeyboardShortcuts<T extends string>(
   item: MenuItem<T>
 ): [string, T][] {
-  if (item === SEPARATOR_ITEM) return [];
+  if (item.type === "separator") return [];
+  if (item.type === "sectionHeader") return [];
 
-  if (item.items) return item.items.flatMap(getKeyboardShortcuts);
+  if (item.type === "submenu") return item.items.flatMap(getKeyboardShortcuts);
 
   if (item.disabled || !item.value || !item.shortcut) return [];
 
@@ -143,7 +199,11 @@ const ShortcutElement = ({
   fixedWidth?: boolean;
 }) => (
   <kbd
-    className={`${textStyles.small} text-text-disabled ${fixedWidth && "w-[0.9rem] text-center"}`}
+    className={cx(
+      textStyles.small,
+      "text-inherit opacity-60 tabular-nums",
+      fixedWidth && "w-[0.9rem] text-center"
+    )}
   >
     {children}
   </kbd>
@@ -178,3 +238,32 @@ export const KeyboardShortcut = memo(function KeyboardShortcut({
     </>
   );
 });
+
+export const SectionHeader = memo(function SectionHeader({
+  title,
+  variant = "normal",
+  id,
+  isFirst,
+  indented,
+}: Omit<SectionHeaderMenuItem, "maxVisibleItems" | "type"> & {
+  isFirst?: boolean;
+  indented?: boolean;
+}) {
+  return (
+    <span
+      id={id}
+      className={cx(
+        variant === "label"
+          ? `text-label ${textStyles.label} !font-bold text-text-disabled`
+          : "font-sans text-heading5 font-normal",
+        "bg-listview-raised-background flex items-center py-1.5 px-4",
+        isFirst && "-mt-1"
+      )}
+    >
+      {indented && (
+        <Spacer.Horizontal size={CHECKBOX_WIDTH - CHECKBOX_RIGHT_INSET} />
+      )}
+      {title}
+    </span>
+  );
+});

package/src/components/internal/MenuViewport.tsx

@@ -0,0 +1,152 @@
+import { ChevronRightIcon } from "@noya-app/noya-icons";
+import * as RadixContextMenu from "@radix-ui/react-context-menu";
+import * as RadixDropdownMenu from "@radix-ui/react-dropdown-menu";
+import React from "react";
+import { MenuItem, SectionHeader, styles } from "./Menu";
+import { SelectItem } from "./SelectItem";
+
+type MenuSeparatorComponent = React.FC<{ className?: string }>;
+type MenuItemTextComponent = React.FC<{ children?: React.ReactNode }>;
+type MenuItemComponent = React.ForwardRefExoticComponent<
+  React.RefAttributes<HTMLDivElement> &
+    React.PropsWithoutRef<{
+      className?: string;
+      disabled?: boolean;
+      children?: React.ReactNode;
+      value: string;
+      onSelect?: (event: any) => void;
+    }>
+>;
+type MenuCheckboxItemComponent = React.FC<{
+  checked?: boolean | "indeterminate";
+  disabled?: boolean;
+  onSelect?: (event: any) => void;
+  className?: string;
+  children?: React.ReactNode;
+}>;
+
+type MenuItemIndicatorComponent = React.FC<{
+  className?: string;
+  children?: React.ReactNode;
+}>;
+
+export type MenuComponents = {
+  Separator: MenuSeparatorComponent;
+  ItemText: MenuItemTextComponent;
+  Item: MenuItemComponent;
+  CheckboxItem?: MenuCheckboxItemComponent;
+  ItemIndicator?: MenuItemIndicatorComponent;
+  Sub?: typeof RadixDropdownMenu.Sub | typeof RadixContextMenu.Sub;
+  SubTrigger?:
+    | typeof RadixDropdownMenu.SubTrigger
+    | typeof RadixContextMenu.SubTrigger;
+  SubContent?:
+    | typeof RadixDropdownMenu.SubContent
+    | typeof RadixContextMenu.SubContent;
+  Portal?: typeof RadixDropdownMenu.Portal | typeof RadixContextMenu.Portal;
+};
+
+type MenuViewportProps<T extends string> = {
+  items: MenuItem<T>[];
+  Components: MenuComponents;
+  onSelect?: (value: any) => void;
+};
+
+export const MenuViewport = <T extends string>({
+  items,
+  Components,
+  onSelect,
+}: MenuViewportProps<T>) => {
+  const hasCheckedItem = items.some(
+    (item) =>
+      item.type !== "separator" && item.type !== "sectionHeader" && item.checked
+  );
+
+  return (
+    <>
+      {items.map((item, index) => {
+        switch (item.type) {
+          case "separator":
+            return (
+              <Components.Separator
+                key={index}
+                className={styles.separatorStyle}
+              />
+            );
+
+          case "sectionHeader":
+            return (
+              <SectionHeader
+                isFirst={index === 0}
+                key={item.id}
+                {...item}
+                indented={hasCheckedItem}
+              />
+            );
+          case "submenu":
+            if (
+              item.items &&
+              Components.Sub &&
+              Components.SubTrigger &&
+              Components.SubContent &&
+              Components.Portal
+            ) {
+              return (
+                <Components.Sub key={item.id}>
+                  <Components.SubTrigger
+                    className={styles.itemStyle({ disabled: item.disabled })}
+                    asChild
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      e.preventDefault();
+                    }}
+                  >
+                    <SelectItem
+                      value={item.id}
+                      icon={item.icon}
+                      checked={item.checked}
+                      onSelect={onSelect}
+                      Components={Components}
+                      indented={hasCheckedItem}
+                    >
+                      <div className="flex items-center flex-1">
+                        {item.title}
+                      </div>
+                      <ChevronRightIcon className="-mr-1" />
+                    </SelectItem>
+                  </Components.SubTrigger>
+                  <Components.Portal>
+                    <Components.SubContent
+                      alignOffset={-5}
+                      className={styles.contentStyle}
+                    >
+                      <MenuViewport
+                        items={item.items}
+                        Components={Components}
+                        onSelect={onSelect}
+                      />
+                    </Components.SubContent>
+                  </Components.Portal>
+                </Components.Sub>
+              );
+            } else return null;
+          default:
+            return (
+              <SelectItem
+                key={item.value}
+                value={item.value}
+                icon={item.icon}
+                checked={item.checked}
+                shortcut={item.shortcut}
+                onSelect={onSelect}
+                Components={Components}
+                indented={hasCheckedItem}
+              >
+                {item.title ?? item.value}
+              </SelectItem>
+            );
+        }
+      })}
+    </>
+  );
+};