@noya-app/noya-designsystem 0.1.41 → 0.1.43

package/src/components/SelectMenu.tsx

@@ -6,7 +6,12 @@ import {
 import { memoGeneric } from "@noya-app/react-utils";
 import * as Select from "@radix-ui/react-select";
 import { type SelectProps } from "@radix-ui/react-select";
-import React, { CSSProperties, FocusEventHandler, useMemo } from "react";
+import React, {
+  CSSProperties,
+  FocusEventHandler,
+  useMemo,
+  useState,
+} from "react";
 import { cx } from "../utils/classNames";
 import { Button } from "./Button";
 import { renderIcon } from "./Icons";
@@ -26,14 +31,15 @@ type Props<T extends string> = {
   label?: React.ReactNode;
   onFocus?: FocusEventHandler;
   onBlur?: FocusEventHandler;
-} & Pick<SelectProps, "open">;
+} & Pick<SelectProps, "open" | "onOpenChange">;
 
 const readOnlyStyle: CSSProperties = {
   justifyContent: "flex-start",
   textAlign: "left",
 };
 
-const labelStyles = `font-sans text-label uppercase text-text-disabled leading-[19px] font-bold text-[60%] pointer-events-none flex items-center absolute top-0 bottom-0 right-[1.3rem] z-label`;
+export const labelTextStyles = `font-sans text-label uppercase text-text-disabled leading-[19px] font-bold text-[60%]`;
+const labelStyles = `pointer-events-none flex items-center absolute top-0 bottom-0 right-[1.3rem] z-label`;
 
 const scrollButtonStyles = `
   flex 
@@ -61,12 +67,21 @@ export const SelectMenu = memoGeneric(function SelectMenu<
   open,
   onFocus,
   onBlur,
+  onOpenChange,
 }: Props<T>) {
   const selectedItem = menuItems.find(
     (item): item is RegularMenuItem<T> =>
       typeof item !== "string" && item.value === value
   );
   const icon = selectedItem?.icon;
+  const [internalOpen, setInternalOpen] = useState(open);
+
+  const handleOpenChange = (open: boolean) => {
+    if (onOpenChange) {
+      onOpenChange(open);
+    }
+    setInternalOpen(open);
+  };
 
   const readOnlyButton = useMemo(
     () => (
@@ -95,7 +110,11 @@ export const SelectMenu = memoGeneric(function SelectMenu<
         <Button
           id={id}
           style={style}
-          className={`${className ?? "w-full"} flex-1 focus:z-interactable relative`}
+          className={cx(
+            className ?? "w-full",
+            "flex-1 focus:z-interactable relative",
+            internalOpen && "ring-2 ring-primary"
+          )}
           disabled={disabled}
         >
           {icon && (
@@ -108,15 +127,31 @@ export const SelectMenu = memoGeneric(function SelectMenu<
             <Select.Value placeholder={placeholder} />
           </span>
           {label && (
-            <label htmlFor={id} className={labelStyles}>
+            <label htmlFor={id} className={cx(labelStyles, labelTextStyles)}>
               {label}
             </label>
           )}
-          <DropdownChevronIcon />
+          <DropdownChevronIcon
+            className={cx(
+              "transition-transform duration-100",
+              internalOpen ? "rotate-180" : "rotate-0"
+            )}
+          />
         </Button>
       </Select.SelectTrigger>
     ),
-    [onFocus, onBlur, id, style, className, disabled, icon, placeholder, label]
+    [
+      onFocus,
+      onBlur,
+      id,
+      style,
+      className,
+      disabled,
+      icon,
+      placeholder,
+      label,
+      internalOpen,
+    ]
   );
 
   if (readOnly) {
@@ -133,12 +168,28 @@ export const SelectMenu = memoGeneric(function SelectMenu<
   }
 
   return (
-    <Select.Root value={value} onValueChange={onSelect} open={open}>
+    <Select.Root
+      value={value}
+      onValueChange={onSelect}
+      open={open}
+      onOpenChange={handleOpenChange}
+    >
       {trigger}
       <Select.Portal>
-        <Select.Content className={styles.contentStyle}>
+        <Select.Content
+          className={styles.contentStyle}
+          position="popper"
+          sideOffset={6}
+          collisionPadding={8}
+          align="end"
+          style={{
+            width: "var(--radix-select-trigger-width)",
+          }}
+        >
           <Select.ScrollUpButton className={scrollButtonStyles}>
-            <ChevronUpIcon />
+            <ChevronUpIcon
+              className={cx("transition-transform duration-100")}
+            />
           </Select.ScrollUpButton>
           <Select.Viewport>
             {menuItems.map((menuItem) => {

package/src/components/Slider.tsx

@@ -17,6 +17,7 @@ interface Props {
   label?: React.ReactNode;
   onFocus?: FocusEventHandler;
   onBlur?: FocusEventHandler;
+  readOnly?: boolean;
 }
 
 const labelStyles = `font-sans text-label uppercase text-text-disabled leading-[19px] font-bold text-[60%] pointer-events-none flex items-center z-label`;
@@ -40,6 +41,7 @@ export const Slider = memo(function Slider({
   label,
   onFocus,
   onBlur,
+  readOnly = false,
 }: Props) {
   const arrayValue = useMemo(
     () => [Math.min(Math.max(value, min), max)],
@@ -88,12 +90,13 @@ export const Slider = memo(function Slider({
       value={arrayValue}
       onValueChange={handleValueChange}
       className={cx(
-        "flex relative items-center select-none touch-none h-[27px] rounded overflow-hidden",
+        "flex relative items-center select-none touch-none h-[27px] rounded overflow-hidden w-full",
         className
       )}
       style={style}
       onFocus={onFocus}
       onBlur={onBlur}
+      disabled={readOnly}
     >
       <RadixSlider.Track className="relative flex-grow h-full rounded overflow-hidden bg-input-background">
         {label && (
@@ -117,7 +120,7 @@ export const Slider = memo(function Slider({
       <RadixSlider.Thumb
         style={thumbStyle}
         className={cx(
-          "block h-[27px] rounded border border-solid bg-slider-thumb-background focus:outline-none cursor-ew-resize",
+          "block h-[27px] rounded border border-solid bg-slider-thumb-background transition-colors focus:border-primary focus:border-2 outline-none",
           colorScheme === undefined && "border-slider-border",
           colorScheme === "primary" && "border-primary",
           colorScheme === "secondary" && "border-secondary"

package/src/components/Sortable.tsx

@@ -16,17 +16,7 @@ import {
   verticalListSortingStrategy,
 } from "@dnd-kit/sortable";
 import { memoGeneric } from "@noya-app/react-utils";
-import React, {
-  createContext,
-  ReactNode,
-  Ref,
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
+import * as React from "react";
 import { createPortal } from "react-dom";
 
 export type RelativeDropPosition = "above" | "below" | "inside";
@@ -60,7 +50,7 @@ const defaultAcceptsDrop: DropValidator = (
   return true;
 };
 
-const SortableItemContext = createContext<{
+const SortableItemContext = React.createContext<{
   keys: string[];
   position: Translate;
   acceptsDrop: DropValidator;
@@ -119,7 +109,7 @@ interface ItemProps<T> {
   disabled?: boolean;
   children: (
     props: {
-      ref: Ref<T>;
+      ref: React.Ref<T>;
       relativeDropPosition?: RelativeDropPosition;
       [key: string]: any;
     } & UseSortableReturnType["attributes"]
@@ -132,7 +122,7 @@ function SortableItem<T extends HTMLElement>({
   children,
 }: ItemProps<T>) {
   const { keys, position, acceptsDrop, setActivatorEvent, axis } =
-    useContext(SortableItemContext);
+    React.useContext(SortableItemContext);
   const sortable = useSortable({ id, disabled });
 
   const {
@@ -156,7 +146,7 @@ function SortableItem<T extends HTMLElement>({
   const offsetLeft = eventX + position.x;
   const offsetTop = eventY + position.y;
 
-  const ref = useCallback((node: T) => setNodeRef(node), [setNodeRef]);
+  const ref = React.useCallback((node: T) => setNodeRef(node), [setNodeRef]);
 
   return children({
     ref,
@@ -183,8 +173,8 @@ function SortableItem<T extends HTMLElement>({
 
 interface RootProps {
   keys: string[];
-  children: ReactNode;
-  renderOverlay?: (index: number) => ReactNode;
+  children: React.ReactNode;
+  renderOverlay?: (index: number) => React.ReactNode;
   onMoveItem?: (
     sourceIndex: number,
     destinationIndex: number,
@@ -210,27 +200,27 @@ function SortableRoot({
     })
   );
 
-  const [activeIndex, setActiveIndex] = useState<number | undefined>();
-  const activatorEvent = useRef<PointerEvent | null>(null);
+  const [activeIndex, setActiveIndex] = React.useState<number | undefined>();
+  const activatorEvent = React.useRef<PointerEvent | null>(null);
 
-  const setActivatorEvent = useCallback((event: PointerEvent) => {
+  const setActivatorEvent = React.useCallback((event: PointerEvent) => {
     activatorEvent.current = event;
   }, []);
 
-  const [position, setPosition] = useState<Translate>({ x: 0, y: 0 });
+  const [position, setPosition] = React.useState<Translate>({ x: 0, y: 0 });
 
-  const handleDragStart = useCallback(
+  const handleDragStart = React.useCallback(
     (event: DragStartEvent) => {
       setActiveIndex(keys.indexOf(event.active.id));
     },
     [keys]
   );
 
-  const handleDragMove = useCallback((event: DragMoveEvent) => {
+  const handleDragMove = React.useCallback((event: DragMoveEvent) => {
     setPosition({ ...event.delta });
   }, []);
 
-  const handleDragEnd = useCallback(
+  const handleDragEnd = React.useCallback(
     (event: DragEndEvent) => {
       const { active, over } = event;
 
@@ -263,15 +253,15 @@ function SortableRoot({
     [acceptsDrop, axis, keys, onMoveItem, position.x, position.y]
   );
 
-  const [mounted, setMounted] = useState(false);
+  const [mounted, setMounted] = React.useState(false);
 
-  useEffect(() => {
+  React.useEffect(() => {
     setMounted(true);
   }, []);
 
   return (
     <SortableItemContext.Provider
-      value={useMemo(
+      value={React.useMemo(
         () => ({
           keys,
           acceptsDrop,

package/src/components/Spacer.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable react/jsx-pascal-case */
-import React, { ForwardedRef, forwardRef } from "react";
+import type { ForwardedRef } from "react";
+import * as React from "react";
 
 interface Props {
   size?: number | string;
@@ -10,12 +11,21 @@ interface Props {
  * Vertical
  * ------------------------------------------------------------------------- */
 
-const SpacerVertical = forwardRef<HTMLSpanElement, Props>(
+const SpacerVertical = React.forwardRef<HTMLSpanElement, Props>(
   ({ size, inline, ...props }, ref: ForwardedRef<HTMLSpanElement>) => {
     return (
-      <span className={`${inline ? "inline-block" : "block"} ${size === undefined ? "flex flex-1" : ""}`} style={size ? {
-        minHeight: `${size}px`,
-      } : undefined} {...props} ref={ref} />
+      <span
+        className={`${inline ? "inline-block" : "block"} ${size === undefined ? "flex flex-1" : ""}`}
+        style={
+          size
+            ? {
+                minHeight: `${size}px`,
+              }
+            : undefined
+        }
+        {...props}
+        ref={ref}
+      />
     );
   }
 );
@@ -24,12 +34,21 @@ const SpacerVertical = forwardRef<HTMLSpanElement, Props>(
  * Horizontal
  * ------------------------------------------------------------------------- */
 
-const SpacerHorizontal = forwardRef<HTMLSpanElement, Props>(
+const SpacerHorizontal = React.forwardRef<HTMLSpanElement, Props>(
   ({ size, inline, ...props }, ref: ForwardedRef<HTMLSpanElement>) => {
     return (
-      <span className={`${inline ? "inline-block" : "block"} ${size === undefined ? "flex flex-1" : ""}`} style={size ? {
-        minWidth: `${size}px`,
-      } : undefined} {...props} ref={ref} />
+      <span
+        className={`${inline ? "inline-block" : "block"} ${size === undefined ? "flex flex-1" : ""}`}
+        style={
+          size
+            ? {
+                minWidth: `${size}px`,
+              }
+            : undefined
+        }
+        {...props}
+        ref={ref}
+      />
     );
   }
 );

package/src/components/Switch.tsx

@@ -1,8 +1,8 @@
 import * as SwitchPrimitive from "@radix-ui/react-switch";
-import React, { CSSProperties, FocusEventHandler } from "react";
+import * as React from "react";
 import { cx } from "../utils/classNames";
 
-type SwitchColorScheme = "normal" | "primary" | "secondary";
+type SwitchColorScheme = "primary" | "secondary";
 
 interface Props {
   id?: string;
@@ -11,17 +11,17 @@ interface Props {
   /** @default normal */
   colorScheme?: SwitchColorScheme;
   disabled?: boolean;
-  onFocus?: FocusEventHandler;
-  onBlur?: FocusEventHandler;
+  onFocus?: React.FocusEventHandler;
+  onBlur?: React.FocusEventHandler;
   className?: string;
-  style?: CSSProperties;
+  style?: React.CSSProperties;
 }
 
 export const Switch = function Switch({
   id,
   value,
   onChange,
-  colorScheme = "normal",
+  colorScheme = "primary",
   disabled,
   onFocus,
   onBlur,
@@ -38,7 +38,7 @@ export const Switch = function Switch({
         onChange(newValue);
       }}
       className={cx(
-        "all-unset w-8 h-[19px] bg-active-background rounded-full relative cursor-pointer [webkit-tap-highlight-color:rgba(0,0,0,0)] focus:ring-2 focus:ring-primary focus:ring-offset-[1px] outline-none data-[state=checked]:bg-primary",
+        "all-unset w-8 h-[19px] bg-active-background rounded-full relative cursor-pointer [webkit-tap-highlight-color:rgba(0,0,0,0)] focus:ring-2 focus:ring-primary focus:ring-offset-[1px] outline-none data-[state=checked]:bg-primary transition-all",
         colorScheme === "secondary" && "data-[state=checked]:bg-secondary",
         "focus:z-interactable",
         className
@@ -46,7 +46,7 @@ export const Switch = function Switch({
       onFocus={onFocus}
       onBlur={onBlur}
     >
-      <SwitchPrimitive.Thumb className="block w-[15px] h-[15px] bg-white rounded-full transition-transform translate-x-[2px] data-[state=checked]:translate-x-[15px]" />
+      <SwitchPrimitive.Thumb className="block w-[15px] h-[15px] bg-background rounded-full transition-transform translate-x-[2px] data-[state=checked]:translate-x-[15px]" />
     </SwitchPrimitive.Root>
   );
 };

package/src/components/TextArea.tsx

@@ -1,11 +1,19 @@
 import { assignRef } from "@noya-app/react-utils";
-import React, { forwardRef, memo, useCallback, useEffect, useRef } from "react";
+import React, {
+  ComponentProps,
+  forwardRef,
+  memo,
+  useCallback,
+  useEffect,
+  useRef,
+} from "react";
 import { cx } from "../utils/classNames";
 
-export const useAutoResize = (value: string) => {
+export const useAutoResize = (value: string | undefined) => {
   const textareaRef = useRef<HTMLTextAreaElement | null>(null);
 
   useEffect(() => {
+    if (value === undefined) return;
     if (!textareaRef.current) return;
 
     textareaRef.current.style.height = "auto"; // Reset the height
@@ -15,39 +23,48 @@ export const useAutoResize = (value: string) => {
   return textareaRef;
 };
 
-export const AutoResizingTextArea = memo(
-  forwardRef(function AutoResizingTextArea(
+export const TextArea = memo(
+  forwardRef(function TextArea(
     {
       value,
       onChangeText,
       className,
+      onChange,
+      autoResize = false,
       ...rest
     }: {
-      onChangeText: (value: string) => void;
+      onChangeText?: (value: string) => void;
       value?: string;
+      autoResize?: boolean;
     } & React.TextareaHTMLAttributes<HTMLTextAreaElement>,
     forwardedRef: React.ForwardedRef<HTMLTextAreaElement>
   ) {
-    const ref = useAutoResize(value || rest.placeholder || "");
+    const autoResizeRef = useAutoResize(
+      autoResize ? value || rest.placeholder || "" : undefined
+    );
 
     const handleChange = useCallback(
-      (event: React.ChangeEvent<HTMLTextAreaElement>) =>
-        onChangeText(event.target.value),
-      [onChangeText]
+      (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+        onChangeText?.(event.target.value);
+        onChange?.(event);
+      },
+      [onChangeText, onChange]
     );
 
     const handleRef = useCallback(
       (value: HTMLTextAreaElement | null) => {
-        ref.current = value;
+        if (autoResize) {
+          autoResizeRef.current = value;
+        }
         assignRef(forwardedRef, value);
       },
-      [ref, forwardedRef]
+      [autoResize, autoResizeRef, forwardedRef]
     );
 
     return (
       <textarea
         className={cx(
-          `font-sans text-heading5 font-normal text-text bg-input-background w-0 flex-1 py-1 px-1.5 border-none outline-none h-[100px] rounded-4 resize-none placeholder:text-text-disabled focus:ring-2 focus:ring-primary read-only:text-text-disabled focus:z-interactable `,
+          `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}
@@ -58,3 +75,33 @@ export const AutoResizingTextArea = memo(
     );
   })
 );
+
+export const TextAreaRow = memo(
+  forwardRef(function TextAreaRow(
+    {
+      className,
+      textAreaClassName,
+      textAreaRef,
+      end,
+      endClassName,
+      ...rest
+    }: {
+      className?: string;
+      textAreaClassName?: string;
+      textAreaRef?: React.Ref<HTMLTextAreaElement>;
+      end?: React.ReactNode;
+      endClassName?: string;
+    } & ComponentProps<typeof TextArea>,
+    forwardedRef: React.ForwardedRef<HTMLDivElement>
+  ) {
+    return (
+      <div
+        ref={forwardedRef}
+        className={cx("relative w-full h-full", className)}
+      >
+        <TextArea className={textAreaClassName} {...rest} ref={textAreaRef} />
+        <div className={cx("absolute right-1 top-4", endClassName)}>{end}</div>
+      </div>
+    );
+  })
+);

package/src/components/Toolbar.tsx

@@ -0,0 +1,129 @@
+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 { Spacer } from "./Spacer";
+
+export interface ToolbarProps<T extends string = string> {
+  children?: React.ReactNode;
+  logo?: React.ReactNode;
+  leftMenuItems?: MenuItem<T>[];
+  rightMenuItems?: MenuItem<T>[];
+  onSelectMenuItem?: (value: T) => void;
+  /** Whether to bind keyboard shortcuts for menu items. @default true */
+  shouldBindKeyboardShortcuts?: boolean;
+}
+
+export function Toolbar<T extends string = string>({
+  children,
+  logo,
+  leftMenuItems = [],
+  rightMenuItems = [],
+  onSelectMenuItem,
+  shouldBindKeyboardShortcuts = true,
+}: ToolbarProps<T>) {
+  // Register keyboard shortcuts for all menu items
+  const allMenuItems = React.useMemo(
+    () => [...leftMenuItems, ...rightMenuItems],
+    [leftMenuItems, rightMenuItems]
+  );
+
+  useKeyboardShortcuts(
+    React.useMemo(
+      () =>
+        onSelectMenuItem && shouldBindKeyboardShortcuts
+          ? getKeyboardShortcutsForMenuItems(allMenuItems, onSelectMenuItem)
+          : {},
+      [allMenuItems, onSelectMenuItem, shouldBindKeyboardShortcuts]
+    )
+  );
+
+  return (
+    <BaseToolbar
+      logo={logo}
+      left={
+        leftMenuItems.length > 0 && (
+          <div className="flex gap-2">
+            <ToolbarMenu
+              items={leftMenuItems}
+              onSelectMenuItem={onSelectMenuItem}
+            />
+          </div>
+        )
+      }
+      right={
+        rightMenuItems.length > 0 && (
+          <div className="flex gap-2">
+            <ToolbarMenu
+              items={rightMenuItems}
+              onSelectMenuItem={onSelectMenuItem}
+            />
+          </div>
+        )
+      }
+    >
+      {children}
+    </BaseToolbar>
+  );
+}
+
+export function ToolbarMenu<T extends string>({
+  items,
+  onSelectMenuItem,
+}: {
+  items: MenuItem<T>[];
+  onSelectMenuItem?: (value: T) => void;
+}) {
+  return (
+    <>
+      {items.map((item, i) => {
+        if (typeof item === "string") return null;
+
+        if (!item.items) {
+          return (
+            <Button
+              key={i}
+              disabled={item.disabled}
+              onClick={() => {
+                if (onSelectMenuItem && item.value) {
+                  onSelectMenuItem(item.value);
+                }
+              }}
+            >
+              {item.title}
+              {item.icon && (
+                <>
+                  <Spacer.Horizontal inline size={6} />
+                  {renderIcon(item.icon)}
+                </>
+              )}
+            </Button>
+          );
+        }
+
+        return (
+          <DropdownMenu
+            key={i}
+            items={item.items}
+            onSelect={(value) => {
+              if (onSelectMenuItem && value) {
+                onSelectMenuItem(value);
+              }
+            }}
+          >
+            <Button disabled={item.disabled}>
+              {item.title}
+              <Spacer.Horizontal size={6} />
+              <DropdownChevronIcon />
+            </Button>
+          </DropdownMenu>
+        );
+      })}
+    </>
+  );
+}

package/src/components/Tooltip.tsx

@@ -1,17 +1,20 @@
-import * as TooltipPrimitive from '@radix-ui/react-tooltip';
-import React, { memo, ReactNode } from 'react';
-import { textStyles } from './Text';
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import * as React from "react";
+import { textStyles } from "./Text";
 
 // const Arrow = styled(TooltipPrimitive.Arrow)(({ theme }) => ({
 //   fill: theme.colors.popover.background,
 // }));
 
 interface Props {
-  children: ReactNode;
-  content: ReactNode;
+  children: React.ReactNode;
+  content: React.ReactNode;
 }
 
-export const Tooltip = memo(function Tooltip({ children, content }: Props) {
+export const Tooltip = React.memo(function Tooltip({
+  children,
+  content,
+}: Props) {
   return (
     <TooltipPrimitive.Provider>
       <TooltipPrimitive.Root>
@@ -22,7 +25,7 @@ export const Tooltip = memo(function Tooltip({ children, content }: Props) {
             align="center"
             sideOffset={2}
             collisionPadding={8}
-            className={`${textStyles.small} text-text rounded-[3px] py-small px-medium bg-popover-background shadow-[0_2px_4px_rgba(0,0,0,0.2)_0_0_12px_rgba(0,0,0,0.1)] border border-solid border-divider-strong`}
+            className={`${textStyles.small} text-text rounded-[3px] py-small px-medium bg-popover-background shadow-[0_2px_4px_rgba(0,0,0,0.2)_0_0_12px_rgba(0,0,0,0.1)] border border-solid border-divider-strong z-menu`}
           >
             {content}
             {/* <Arrow /> */}