@noya-app/noya-designsystem 0.1.43 → 0.1.45

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

@@ -6,7 +6,10 @@ 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,
+  SectionHeader,
+} from "./internal/Menu";
 import { Spacer } from "./Spacer";
 
 export interface ToolbarProps<T extends string = string> {
@@ -82,7 +85,8 @@ 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 <SectionHeader {...item} />;
 
         if (!item.items) {
           return (

package/src/components/TreeView.tsx

@@ -12,6 +12,7 @@ import { Spacer } from "./Spacer";
 type TreeRowBaseProps = {
   icon?: Exclude<ReactNode, string> | IconName;
   expanded?: boolean;
+  chevronClassName?: string;
   onClickChevron?: ({ altKey }: { altKey: boolean }) => void;
 };
 
@@ -23,6 +24,7 @@ const TreeRow = forwardRefGeneric(function TreeRow<MenuItemType extends string>(
     icon,
     expanded,
     onClickChevron,
+    chevronClassName,
     children,
     ...rest
   }: TreeViewRowProps<MenuItemType>,
@@ -46,6 +48,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(
@@ -72,19 +74,22 @@ export const WorkspaceLayout = forwardRef(function WorkspaceLayout(
     onChangeLayoutState,
     leftOptions: {
       initialSize: leftInitialSize = 280,
-      minSize: leftMinSize,
+      minSize: leftMinSize = 200,
+      maxSize: leftMaxSize = 500,
       resizable: leftResizable = true,
       style: leftStyle,
       className: leftClassName,
     } = {},
     rightOptions: {
       initialSize: rightInitialSize = 280,
-      minSize: rightMinSize,
+      minSize: rightMinSize = 200,
+      maxSize: rightMaxSize = 500,
       resizable: rightResizable = true,
       style: rightStyle,
       className: rightClassName,
     } = {},
-  }: Props,
+    theme,
+  }: WorkspaceLayoutProps,
   forwardedRef: React.ForwardedRef<IWorkspaceLayout>
 ) {
   const windowSize = useWindowSize();
@@ -100,6 +105,10 @@ export const WorkspaceLayout = forwardRef(function WorkspaceLayout(
     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 panelGroupRef = useRef<ImperativePanelGroupHandle>(null);
   const leftSidebarRef = useRef<ImperativePanelHandle>(null);
@@ -189,6 +198,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 +222,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 +250,7 @@ export const WorkspaceLayout = forwardRef(function WorkspaceLayout(
             minSize={10}
             className="flex relative"
           >
-            {children}
+            <PanelInner className="bg-canvas-background">{children}</PanelInner>
           </Panel>
           {right && (
             <>
@@ -243,13 +262,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 +298,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,11 +1,15 @@
 import { getShortcutDisplayParts } from "@noya-app/noya-keymap";
 import React, { memo, ReactNode } from "react";
 import { useDesignSystemConfiguration } from "../../contexts/DesignSystemConfiguration";
+import { cx } from "../../utils/classNames";
 import withSeparatorElements from "../../utils/withSeparatorElements";
 import { IconName } from "../Icons";
+import { Spacer } from "../Spacer";
 import { textStyles } from "../Text";
 
-export const SEPARATOR_ITEM = "separator";
+export type SeparatorItem = {
+  type: "separator";
+};
 
 // From electron
 export type MenuItemRole =
@@ -66,11 +70,22 @@ export type RegularMenuItem<T extends string> = {
   icon?: Exclude<ReactNode, string> | IconName;
   items?: MenuItem<T>[];
   role?: MenuItemRole;
+  type?: undefined;
+  alwaysInclude?: boolean;
+};
+
+export type SectionHeaderMenuItem = {
+  type: "sectionHeader";
+  id: string;
+  title: string;
+  maxVisibleItems?: number;
+  variant?: "normal" | "label";
 };
 
 export type MenuItem<T extends string> =
-  | typeof SEPARATOR_ITEM
-  | RegularMenuItem<T>;
+  | SeparatorItem
+  | RegularMenuItem<T>
+  | SectionHeaderMenuItem;
 
 // Extract type T of RegularMenuItem<T> within MenuItem<T>
 export type ExtractMenuItemType<T> =
@@ -80,17 +95,17 @@ 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,16 +121,16 @@ 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);
 
@@ -143,7 +158,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 +197,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,151 @@
+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) => {
+        if (item.type === "separator") {
+          return (
+            <Components.Separator
+              key={index}
+              className={styles.separatorStyle}
+            />
+          );
+        }
+
+        if (item.type === "sectionHeader") {
+          return (
+            <SectionHeader
+              isFirst={index === 0}
+              key={item.id}
+              {...item}
+              indented={hasCheckedItem}
+            />
+          );
+        }
+
+        const value = item.value ?? "";
+
+        if (
+          item.items &&
+          Components.Sub &&
+          Components.SubTrigger &&
+          Components.SubContent &&
+          Components.Portal
+        ) {
+          return (
+            <Components.Sub key={value}>
+              <Components.SubTrigger
+                className={styles.itemStyle({ disabled: item.disabled })}
+                asChild
+              >
+                <SelectItem
+                  value={value}
+                  icon={item.icon}
+                  checked={item.checked}
+                  shortcut={item.shortcut}
+                  onSelect={onSelect}
+                  Components={Components}
+                  indented={hasCheckedItem}
+                >
+                  <div className="flex items-center flex-1">
+                    {item.title ?? value}
+                  </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>
+          );
+        }
+
+        return (
+          <SelectItem
+            key={value}
+            value={value}
+            icon={item.icon}
+            checked={item.checked}
+            shortcut={item.shortcut}
+            onSelect={onSelect}
+            Components={Components}
+            indented={hasCheckedItem}
+          >
+            {item.title ?? value}
+          </SelectItem>
+        );
+      })}
+    </>
+  );
+};

package/src/components/internal/SelectItem.tsx

@@ -0,0 +1,111 @@
+import { renderIcon } from "../Icons";
+
+import { CheckIcon } from "@noya-app/noya-icons";
+import * as Select from "@radix-ui/react-select";
+import React, { useCallback } from "react";
+import { Spacer } from "../Spacer";
+import {
+  CHECKBOX_RIGHT_INSET,
+  CHECKBOX_WIDTH,
+  KeyboardShortcut,
+  styles,
+} from "./Menu";
+import { MenuComponents } from "./MenuViewport";
+
+export const SelectItem = React.forwardRef(
+  (
+    {
+      children,
+      icon,
+      disabled,
+      checked,
+      Components,
+      value,
+      onSelect,
+      shortcut,
+      indented,
+      ...props
+    }: Select.SelectItemProps & {
+      icon?: React.ReactNode;
+      checked?: boolean | "indeterminate";
+      Components: MenuComponents;
+      onSelect?: (value: any) => void;
+      shortcut?: string;
+      indented?: boolean;
+    },
+    forwardedRef: React.ForwardedRef<HTMLDivElement>
+  ) => {
+    const handleSelectItem = useCallback(() => {
+      if (!value) return;
+      onSelect?.(value);
+    }, [onSelect, value]);
+
+    if (checked && Components.CheckboxItem) {
+      return (
+        <Components.CheckboxItem
+          checked={checked}
+          disabled={disabled}
+          onSelect={handleSelectItem}
+          className={styles.itemStyle({ disabled })}
+        >
+          {Components.ItemIndicator && (
+            <Components.ItemIndicator className={styles.itemIndicatorStyle}>
+              <CheckIcon />
+            </Components.ItemIndicator>
+          )}
+          {icon && (
+            <>
+              {renderIcon(icon)}
+              <Spacer.Horizontal size={8} />
+            </>
+          )}
+          {children}
+          {shortcut && (
+            <>
+              <Spacer.Horizontal />
+              <Spacer.Horizontal size={24} />
+              <KeyboardShortcut shortcut={shortcut} />
+            </>
+          )}
+        </Components.CheckboxItem>
+      );
+    }
+
+    return (
+      <div className="px-1">
+        <Components.Item
+          className={styles.itemStyle({ disabled })}
+          disabled={disabled}
+          value={value}
+          ref={forwardedRef}
+          onSelect={handleSelectItem}
+          {...props}
+        >
+          <div className="flex flex-1 items-center">
+            {checked ? (
+              <div className={styles.itemIndicatorStyle}>
+                <CheckIcon />
+              </div>
+            ) : indented ? (
+              <Spacer.Horizontal size={CHECKBOX_WIDTH - CHECKBOX_RIGHT_INSET} />
+            ) : null}
+            {icon && (
+              <>
+                {renderIcon(icon)}
+                <Spacer.Horizontal size={8} />
+              </>
+            )}
+            <Components.ItemText>{children}</Components.ItemText>
+            {shortcut && (
+              <>
+                <Spacer.Horizontal />
+                <Spacer.Horizontal size={24} />
+                <KeyboardShortcut shortcut={shortcut} />
+              </>
+            )}
+          </div>
+        </Components.Item>
+      </div>
+    );
+  }
+);

package/src/hooks/useIndent.ts

@@ -0,0 +1,12 @@
+import React from "react";
+
+export const IndentContext = React.createContext<{
+  indentLevel: number;
+}>({
+  indentLevel: 0,
+});
+
+export const useIndent = () => {
+  const { indentLevel } = React.useContext(IndentContext);
+  return indentLevel;
+};

package/src/hooks/useLabel.ts

@@ -0,0 +1,51 @@
+import React, { ReactNode } from "react";
+import { LabelPosition } from "../components/Label";
+
+export const LabelContext = React.createContext<{
+  fieldId?: string;
+  label?: React.ReactNode;
+}>({
+  fieldId: "",
+  label: undefined,
+});
+
+type UseLabelParams = {
+  label?: ReactNode;
+  fieldId?: string;
+};
+
+export const useLabel = ({ label, fieldId }: UseLabelParams) => {
+  const { label: labelFromContext, fieldId: fieldIdFromContext } =
+    React.useContext(LabelContext);
+
+  return {
+    label: label ?? labelFromContext,
+    fieldId: fieldId ?? fieldIdFromContext,
+  };
+};
+
+export const LabelPositionContext =
+  React.createContext<LabelPositionContextValue>({
+    position: "start",
+  });
+
+export const useLabelPosition = () => {
+  const { position } = React.useContext(LabelPositionContext);
+  return position;
+};
+
+export type LabelPositionContextValue = {
+  position: LabelPosition;
+};
+
+export type LabelWidthContextValue = {
+  width: number;
+};
+export const LabelWidthContext = React.createContext<LabelWidthContextValue>({
+  width: 100,
+});
+
+export const useLabelWidth = () => {
+  const { width } = React.useContext(LabelWidthContext);
+  return width;
+};