@noya-app/noya-designsystem 0.1.30 → 0.1.31

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noya-app/noya-designsystem",
-  "version": "0.1.30",
+  "version": "0.1.31",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -15,7 +15,7 @@
     "@dnd-kit/sortable": "4.0.0",
     "@noya-app/noya-colorpicker": "0.1.11",
     "@noya-app/noya-utils": "0.1.2",
-    "@noya-app/noya-geometry": "0.1.4",
+    "@noya-app/noya-geometry": "0.1.5",
     "@noya-app/noya-icons": "0.1.4",
     "@noya-app/noya-keymap": "0.1.2",
     "@radix-ui/primitive": "^1.0.0",
@@ -46,8 +46,9 @@
     "@types/react-dom": "*",
     "@types/react-virtualized": "^9.21.21",
     "@types/react-window": "^1.8.5",
+    "esbuild-plugin-react-virtualized": "1.0.4",
     "react-virtualized": "9.22.5",
-    "esbuild-plugin-react-virtualized": "1.0.4"
+    "tailwindcss": "^3.4.14"
   },
   "peerDependencies": {
     "react": "*",

package/src/components/Button.tsx

@@ -19,7 +19,7 @@ type ButtonVariant =
   | "floating"
   | "none";
 
-type ButtonSize = "normal" | "large";
+type ButtonSize = "small" | "normal" | "large";
 
 /* ----------------------------------------------------------------------------
  * Element
@@ -135,8 +135,8 @@ export const ButtonElement = styled.button<{
       background: "white",
       color: theme.colors.text,
       boxShadow: "0 1px 2px rgba(0, 0, 0, 0.1)",
-      fontSize: "12px",
-      padding: "0px 4px",
+      fontSize: $size === "small" ? "10px" : "12px",
+      padding: $size === "small" ? "0px 2px" : "0px 4px",
       "&:hover": {
         opacity: 0.8,
       },
@@ -184,7 +184,9 @@ export interface ButtonRootProps {
   children: ReactNode;
   active?: boolean;
   disabled?: boolean;
+  /** @default normal */
   variant?: ButtonVariant;
+  /** @default normal */
   size?: ButtonSize;
   tooltip?: ReactNode;
   onClick?: (event: React.MouseEvent) => void;

package/src/components/InputField.tsx

@@ -32,8 +32,8 @@ export type InputFieldSize = "small" | "medium" | "large";
 
 type InputFieldContextValue = {
   labelPosition: LabelPosition;
-  labelSize: number;
-  hasLabel: boolean;
+  labelSize?: number;
+  buttonSize?: number;
   hasDropdown: boolean;
   /** @default medium */
   size: InputFieldSize;
@@ -42,12 +42,13 @@ type InputFieldContextValue = {
   inputRef?: ForwardedRef<HTMLInputElement>;
   setInputRef?: (ref: ForwardedRef<HTMLInputElement>) => void;
   setLabelWidth?: (width: number) => void;
+  setButtonWidth?: (width: number) => void;
 };
 
 const InputFieldContext = createContext<InputFieldContextValue>({
   labelPosition: "end",
-  labelSize: 6,
-  hasLabel: false,
+  labelSize: undefined,
+  buttonSize: undefined,
   hasDropdown: false,
   size: "medium",
   isFocused: false,
@@ -62,26 +63,31 @@ const LabelContainer = styled.label<{
   pointerEvents: Property.PointerEvents;
   $labelPosition: LabelPosition;
   $hasDropdown: boolean;
-}>(({ theme, $labelPosition, $hasDropdown, pointerEvents }) => ({
-  ...theme.textStyles.label,
-  fontWeight: "bold",
-  color: theme.colors.textDisabled,
-  position: "absolute",
-  top: 0,
-  right: $labelPosition === "end" ? 0 : undefined,
-  bottom: 0,
-  left: $labelPosition === "start" ? 0 : undefined,
-  display: "flex",
-  alignItems: "center",
-  pointerEvents,
-  userSelect: "none",
-  ...($labelPosition === "start"
-    ? { justifyContent: "flex-start", paddingLeft: "6px" }
-    : {
-        justifyContent: "flex-end",
-        paddingRight: $hasDropdown ? "16px" : "6px",
-      }),
-}));
+  $size: InputFieldSize;
+}>(({ theme, $labelPosition, $hasDropdown, pointerEvents, $size }) => {
+  const offsetRelativeToSize =
+    $size === "large" ? 6 : $size === "medium" ? 2 : 0;
+  return {
+    ...theme.textStyles.label,
+    fontWeight: "bold",
+    color: theme.colors.textDisabled,
+    position: "absolute",
+    top: 0,
+    bottom: 0,
+    right: $labelPosition === "end" ? offsetRelativeToSize : undefined,
+    left: $labelPosition === "start" ? offsetRelativeToSize : undefined,
+    display: "flex",
+    alignItems: "center",
+    pointerEvents,
+    userSelect: "none",
+    ...($labelPosition === "start"
+      ? { justifyContent: "flex-start", paddingLeft: "6px" }
+      : {
+          justifyContent: "flex-end",
+          paddingRight: $hasDropdown ? "16px" : "6px",
+        }),
+  };
+});
 
 interface InputFieldLabelProps {
   children?: ReactNode;
@@ -89,12 +95,13 @@ interface InputFieldLabelProps {
   style?: React.CSSProperties;
 }
 
+/** Inserts a Label at the start or end of the input given a `labelPosition`on InputField.Root. Should not be used with an InputField.Button */
 const InputFieldLabel = memo(
   forwardRef(function InputFieldLabel(
     { children = false, pointerEvents = "none", style }: InputFieldLabelProps,
     forwardedRef: ForwardedRef<HTMLLabelElement>
   ) {
-    const { labelPosition, hasDropdown, setLabelWidth } =
+    const { labelPosition, hasDropdown, setLabelWidth, size } =
       useContext(InputFieldContext);
 
     const ref = useRef<HTMLLabelElement | null>(null);
@@ -111,6 +118,7 @@ const InputFieldLabel = memo(
 
     return (
       <LabelContainer
+        $size={size}
         ref={(element) => {
           ref.current = element;
           assignRef(forwardedRef, element);
@@ -180,51 +188,74 @@ const ButtonContainer = styled.span<{ $size: InputFieldSize }>(
   ({ theme, $size }) => ({
     position: "absolute",
     right: $size === "large" ? "9px" : $size === "medium" ? "4px" : "2px",
-    top: $size === "large" ? "8px" : $size === "medium" ? "4px" : "2px",
+    top: $size === "large" ? "10px" : $size === "medium" ? "4px" : "2px",
   })
 );
 
-const InputFieldButton = memo(function InputFieldButton({
-  children,
-  onClick,
-}: {
-  children?: ReactNode;
-  onClick?: () => void;
-}) {
-  const { size, inputRef } = useContext(InputFieldContext);
-
-  const defaultHandleClick = useCallback(
-    (event: React.MouseEvent) => {
-      if (inputRef && typeof inputRef !== "function") {
-        inputRef.current?.focus();
-        // Select all text
-        inputRef.current?.setSelectionRange(0, inputRef.current.value.length);
-      }
+/** Inserts a Button at the end of the input. Should not be used with an InputField.Label */
+const InputFieldButton = memo(
+  forwardRef(function InputFieldButton(
+    {
+      children,
+      onClick,
+    }: {
+      children?: ReactNode;
+      onClick?: () => void;
+    },
+    forwardedRef: ForwardedRef<HTMLButtonElement>
+  ) {
+    const { size, inputRef, setButtonWidth } = useContext(InputFieldContext);
+
+    const ref = useRef<HTMLButtonElement | null>(null);
+
+    useLayoutEffect(() => {
+      if (!setButtonWidth) return;
+
+      const width = ref.current?.getBoundingClientRect().width;
+
+      if (!width) return;
 
+      setButtonWidth(width);
+    }, [setButtonWidth]);
+
+    const defaultHandleClick = useCallback(
+      (event: React.MouseEvent) => {
+        if (inputRef && typeof inputRef !== "function") {
+          inputRef.current?.focus();
+          // Select all text
+          inputRef.current?.setSelectionRange(0, inputRef.current.value.length);
+        }
+
+        event.preventDefault();
+        event.stopPropagation();
+      },
+      [inputRef]
+    );
+
+    const handlePointerDown = useCallback((event: React.PointerEvent) => {
       event.preventDefault();
       event.stopPropagation();
-    },
-    [inputRef]
-  );
-
-  const handlePointerDown = useCallback((event: React.PointerEvent) => {
-    event.preventDefault();
-    event.stopPropagation();
-  }, []);
+    }, []);
 
-  return (
-    <ButtonContainer $size={size}>
-      <Button
-        variant="floating"
-        onClick={onClick ?? defaultHandleClick}
-        onPointerDown={handlePointerDown}
-        tabIndex={-1}
-      >
-        {children}
-      </Button>
-    </ButtonContainer>
-  );
-});
+    return (
+      <ButtonContainer $size={size}>
+        <Button
+          ref={(element) => {
+            ref.current = element;
+            assignRef(forwardedRef, element);
+          }}
+          variant="floating"
+          onClick={onClick ?? defaultHandleClick}
+          onPointerDown={handlePointerDown}
+          tabIndex={-1}
+          size={size === "medium" ? "normal" : size}
+        >
+          {children}
+        </Button>
+      </ButtonContainer>
+    );
+  })
+);
 
 /* ----------------------------------------------------------------------------
  * Input
@@ -243,8 +274,7 @@ export const InputElement = styled(TextInput)<{
   disabled?: boolean;
   readOnly?: boolean;
   $labelPosition: LabelPosition;
-  $labelSize: number;
-  $hasLabel: boolean;
+  $labelSize?: number;
   $hasDropdown: boolean;
   $textAlign?: Property.TextAlign;
   $variant?: InputFieldVariant;
@@ -256,7 +286,6 @@ export const InputElement = styled(TextInput)<{
   $hasDropdown,
   $textAlign,
   disabled,
-  $hasLabel,
   readOnly,
   $variant = "normal",
   $size,
@@ -289,11 +318,11 @@ export const InputElement = styled(TextInput)<{
       $size === "large" ? "10px" : $size === "medium" ? "4px" : "1px",
     paddingLeft:
       ($size === "large" ? 10 : $size === "medium" ? 6 : 4) +
-      ($hasLabel && $labelPosition === "start" ? 6 + $labelSize : 0) +
+      ($labelSize && $labelPosition === "start" ? 6 + $labelSize : 0) +
       "px",
     paddingRight:
       ($size === "large" ? 10 : $size === "medium" ? 6 : 4) +
-      ($hasLabel && $labelPosition === "end" ? 6 + $labelSize : 0) +
+      ($labelSize && $labelPosition === "end" ? 6 + $labelSize : 0) +
       ($hasDropdown ? 11 : 0) +
       "px",
     background: theme.colors.inputBackground,
@@ -322,6 +351,7 @@ export const InputElement = styled(TextInput)<{
   };
 });
 
+/** Should always be wrapped in InputField.Root */
 const InputFieldInput = forwardRef(function InputFieldInput(
   // onFocusChange should only be passed from the root, never directly
   {
@@ -338,7 +368,7 @@ const InputFieldInput = forwardRef(function InputFieldInput(
     labelPosition,
     labelSize,
     hasDropdown,
-    hasLabel,
+    buttonSize,
     size,
     onFocusChange,
     setInputRef,
@@ -359,8 +389,7 @@ const InputFieldInput = forwardRef(function InputFieldInput(
     <InputElement
       ref={forwardedRef}
       $labelPosition={labelPosition}
-      $labelSize={labelSize}
-      $hasLabel={hasLabel}
+      $labelSize={labelSize || buttonSize}
       $hasDropdown={hasDropdown}
       $size={size}
       $variant={variant}
@@ -376,7 +405,6 @@ const InputFieldTypeahead = (props: { prefix: string; value: string }) => {
     labelPosition,
     labelSize,
     hasDropdown,
-    hasLabel,
     size,
     // onFocusChange,
   } = useContext(InputFieldContext);
@@ -386,7 +414,6 @@ const InputFieldTypeahead = (props: { prefix: string; value: string }) => {
       as="span"
       $labelPosition={labelPosition}
       $labelSize={labelSize}
-      $hasLabel={hasLabel}
       $hasDropdown={hasDropdown}
       $size={size}
       // onFocusChange={onFocusChange}
@@ -529,15 +556,16 @@ function InputFieldNumberInput(props: InputFieldNumberInputProps) {
  * Root
  * ------------------------------------------------------------------------- */
 
-const RootContainer = styled.div<{ $width?: number; $flex?: string }>(
-  ({ theme, $flex, $width }) => ({
-    flex: $flex ?? "1",
-    display: "flex",
-    flexDirection: "row",
-    position: "relative",
-    maxWidth: typeof $width === "number" ? `${$width}px` : undefined,
-  })
-);
+const RootContainer = styled.div<{
+  $width?: number;
+  $flex?: string;
+}>(({ theme, $flex, $width }) => ({
+  flex: $flex ?? "1",
+  display: "flex",
+  flexDirection: "row",
+  position: "relative",
+  maxWidth: typeof $width === "number" ? `${$width}px` : undefined,
+}));
 
 interface InputFieldRootProps {
   id?: string;
@@ -574,13 +602,11 @@ function InputFieldRoot({
   const hasDropdown = childrenArray.some(
     (child) => isValidElement(child) && child.type === InputFieldDropdownMenu
   );
-  const hasLabel = childrenArray.some(
-    (child) => isValidElement(child) && child.type === InputFieldLabel
-  );
 
   const [isFocused, setIsFocused] = React.useState(false);
 
   const [measuredLabelSize, setMeasuredLabelSize] = React.useState<number>();
+  const [measuredButtonSize, setMeasuredButtonSize] = React.useState<number>();
   const [measuredWidth, setMeasuredWidth] = React.useState<number>();
 
   const handleFocusChange = useCallback(
@@ -606,22 +632,23 @@ function InputFieldRoot({
   const contextValue = useMemo(
     (): InputFieldContextValue => ({
       labelPosition,
-      labelSize: measuredLabelSize ?? labelSize ?? 6,
+      labelSize: measuredLabelSize ?? labelSize,
+      buttonSize: measuredButtonSize,
       hasDropdown,
-      hasLabel,
       size,
       isFocused,
       onFocusChange: handleFocusChange,
       inputRef,
       setInputRef,
       setLabelWidth: setMeasuredLabelSize,
+      setButtonWidth: setMeasuredButtonSize,
     }),
     [
       labelPosition,
       measuredLabelSize,
       labelSize,
+      measuredButtonSize,
       hasDropdown,
-      hasLabel,
       size,
       isFocused,
       handleFocusChange,

package/src/components/SelectMenu.tsx

@@ -1,11 +1,13 @@
 import { DropdownChevronIcon } from "@noya-app/noya-icons";
 import * as Select from "@radix-ui/react-select";
-import React, { CSSProperties, memo } from "react";
+import { type SelectProps } from "@radix-ui/react-select";
+import React, { CSSProperties, memo, useMemo } from "react";
 import { styled } from "styled-components";
 import { Button } from "./Button";
 import { renderIcon } from "./Icons";
 import { Spacer } from "./Spacer";
 import { MenuItem, RegularMenuItem, styles } from "./internal/Menu";
+import { Stack } from "./Stack";
 
 type Props<T extends string> = {
   id?: string;
@@ -17,7 +19,8 @@ type Props<T extends string> = {
   placeholder?: string;
   disabled?: boolean;
   readOnly?: boolean;
-};
+  label?: React.ReactNode;
+} & Pick<SelectProps, "open">;
 
 const readOnlyStyle: CSSProperties = {
   justifyContent: "flex-start",
@@ -28,6 +31,25 @@ const flexStyle: CSSProperties = {
   flex: 1,
 };
 
+const textStyle: CSSProperties = {
+  fontSize: "0.85rem",
+};
+
+const SelectLabel = styled.label(({ theme }) => ({
+  ...theme.textStyles.label,
+  color: theme.colors.textDisabled,
+  lineHeight: "19px",
+  position: "absolute",
+  inset: "0",
+  fontWeight: "bold",
+  fontSize: "60%",
+  pointerEvents: "none",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "end",
+  paddingRight: "24px",
+}));
+
 export const SelectMenu = memo(function SelectMenu<T extends string = string>({
   id,
   style,
@@ -38,6 +60,8 @@ export const SelectMenu = memo(function SelectMenu<T extends string = string>({
   placeholder,
   disabled,
   readOnly,
+  label,
+  open,
 }: Props<T>) {
   const selectedItem = menuItems.find(
     (item): item is RegularMenuItem<T> =>
@@ -45,11 +69,11 @@ export const SelectMenu = memo(function SelectMenu<T extends string = string>({
   );
   const icon = selectedItem?.icon;
 
-  if (readOnly) {
-    return (
+  const readOnlyButton = useMemo(
+    () => (
       <Button
         id={id}
-        style={style}
+        style={{ ...style, ...flexStyle }}
         contentStyle={readOnlyStyle}
         className={className}
         disabled={disabled}
@@ -60,15 +84,23 @@ export const SelectMenu = memo(function SelectMenu<T extends string = string>({
             <Spacer.Horizontal inline size={6} />
           </>
         )}
-        <span style={flexStyle}>{selectedItem?.title ?? value}</span>
+        <span style={{ ...flexStyle, ...textStyle }}>
+          {selectedItem?.title ?? value}
+        </span>
       </Button>
-    );
-  }
+    ),
+    [icon, id, style, className, disabled, value, selectedItem]
+  );
 
-  return (
-    <Select.Root value={value} onValueChange={onSelect}>
+  const trigger = useMemo(
+    () => (
       <Select.SelectTrigger asChild>
-        <Button id={id} style={style} className={className} disabled={disabled}>
+        <Button
+          id={id}
+          style={{ ...textStyle, ...style, ...flexStyle }}
+          className={className}
+          disabled={disabled}
+        >
           {icon && (
             <>
               {renderIcon(icon)}
@@ -82,6 +114,31 @@ export const SelectMenu = memo(function SelectMenu<T extends string = string>({
           <DropdownChevronIcon />
         </Button>
       </Select.SelectTrigger>
+    ),
+    [icon, id, style, className, disabled, placeholder]
+  );
+
+  if (readOnly) {
+    return label ? (
+      <Stack.V position="relative">
+        {readOnlyButton}
+        <SelectLabel htmlFor={id}>{label}</SelectLabel>
+      </Stack.V>
+    ) : (
+      readOnlyButton
+    );
+  }
+
+  return (
+    <Select.Root value={value} onValueChange={onSelect} open={open}>
+      {label ? (
+        <Stack.V position="relative" style={flexStyle}>
+          {trigger}
+          <SelectLabel htmlFor={id}>{label}</SelectLabel>
+        </Stack.V>
+      ) : (
+        trigger
+      )}
       <Select.Portal>
         <SelectContent>
           <SelectViewport>
@@ -126,7 +183,7 @@ const SelectItem = React.forwardRef(
             <Spacer.Horizontal size={8} />
           </>
         )}
-        <Select.ItemText>{children}</Select.ItemText>
+        <Select.ItemText style={textStyle}>{children}</Select.ItemText>
       </StyledItem>
     );
   }

package/src/components/Stack.tsx

@@ -12,7 +12,7 @@ import { BreakpointCollection, mergeBreakpoints } from "../utils/breakpoints";
 import withSeparatorElements from "../utils/withSeparatorElements";
 
 interface StyleProps {
-  display?: "flex" | "inline-flex" | "none" | "block";
+  display?: CSSProperties["display"];
   visibility?: CSSProperties["visibility"];
   position?: CSSProperties["position"];
   zIndex?: CSSProperties["zIndex"];
@@ -78,6 +78,7 @@ interface Props extends StyleProps {
   breakpoints?: StackBreakpointList | null | false;
   href?: string; // Shouldn't be here, ideally
   tabIndex?: number;
+  style?: StyleProps;
 }
 
 const Element = styled.div<{
@@ -98,6 +99,10 @@ const StackBase = forwardRef(function StackBase(
     breakpoints,
     tabIndex,
     href,
+    paddingHorizontal,
+    paddingVertical,
+    padding,
+    style,
     ...rest
   }: Props,
   forwardedRef: ForwardedRef<HTMLElement>
@@ -110,7 +115,11 @@ const StackBase = forwardRef(function StackBase(
     display: "flex",
     position: "relative",
     alignItems: "stretch",
+    padding:
+      padding ||
+      `${paddingVertical ?? 0} ${paddingHorizontal ?? 0} ${paddingVertical ?? 0} ${paddingHorizontal ?? 0}`,
     ...rest,
+    ...style,
   };
 
   return (

package/src/components/WorkspaceLayout.tsx

@@ -3,7 +3,13 @@ import {
   useDesignSystemTheme,
 } from "@noya-app/noya-designsystem";
 import { useKeyboardShortcuts } from "@noya-app/noya-keymap";
-import React, { forwardRef, useImperativeHandle, useRef } from "react";
+import React, {
+  forwardRef,
+  useCallback,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from "react";
 import {
   ImperativePanelGroupHandle,
   ImperativePanelHandle,
@@ -98,7 +104,17 @@ const WorkspaceLayoutWithTheme = forwardRef(function WorkspaceLayoutWithTheme(
   const leftSidebarRef = useRef<ImperativePanelHandle>(null);
   const rightSidebarRef = useRef<ImperativePanelHandle>(null);
 
-  usePreservePanelSize(panelGroupRef, onChangeLayoutState);
+  const [internalLayoutState, setInternalLayoutState] =
+    useState<PanelLayoutState | null>(null);
+  const handleChangeLayoutState = useCallback(
+    (state: PanelLayoutState) => {
+      setInternalLayoutState(state);
+      onChangeLayoutState?.(state);
+    },
+    [onChangeLayoutState]
+  );
+
+  usePreservePanelSize(panelGroupRef, handleChangeLayoutState);
 
   const theme = useDesignSystemTheme();
 
@@ -207,7 +223,9 @@ const WorkspaceLayoutWithTheme = forwardRef(function WorkspaceLayoutWithTheme(
                 position: "relative",
               }}
             >
-              {leftPanelContent}
+              {internalLayoutState?.leftSidebarCollapsed
+                ? null
+                : leftPanelContent}
             </Panel>
             <PanelResizeHandle
               style={{
@@ -255,7 +273,9 @@ const WorkspaceLayoutWithTheme = forwardRef(function WorkspaceLayoutWithTheme(
                 position: "relative",
               }}
             >
-              {rightPanelContent}
+              {internalLayoutState?.rightSidebarCollapsed
+                ? null
+                : rightPanelContent}
             </Panel>
           </>
         )}

package/src/index.tsx

@@ -41,7 +41,6 @@ export * from "./components/Popover";
 export * from "./components/Progress";
 export * from "./components/RadioGroup";
 export * from "./components/ScrollArea";
-export * from "./components/Select";
 export * from "./components/SelectMenu";
 export * from "./components/Slider";
 export * from "./components/Sortable";
@@ -76,6 +75,7 @@ export * as darkTheme from "./theme/dark";
 export * as lightTheme from "./theme/light";
 export * from "./utils/createSectionedMenu";
 export * from "./utils/getGradientBackground";
+export * from "./hooks/usePreservePanelSize";
 // Utils
 export * from "./utils/completions";
 export * from "./utils/fuzzyScorer";