@noya-app/noya-designsystem 0.1.24 → 0.1.26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noya-app/noya-designsystem",
-  "version": "0.1.24",
+  "version": "0.1.26",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -13,7 +13,7 @@
     "@dnd-kit/core": "3.1.1",
     "@dnd-kit/modifiers": "3.0.0",
     "@dnd-kit/sortable": "4.0.0",
-    "@noya-app/noya-colorpicker": "0.1.10",
+    "@noya-app/noya-colorpicker": "0.1.11",
     "@noya-app/noya-utils": "0.1.2",
     "@noya-app/noya-geometry": "0.1.4",
     "@noya-app/noya-icons": "0.1.4",

package/src/components/Button.tsx

@@ -137,6 +137,12 @@ export const ButtonElement = styled.button<{
       boxShadow: "0 1px 2px rgba(0, 0, 0, 0.1)",
       fontSize: "12px",
       padding: "0px 4px",
+      "&:hover": {
+        opacity: 0.8,
+      },
+      "&:active": {
+        opacity: 0.9,
+      },
     }),
     display: "flex",
     alignItems: "center",
@@ -186,6 +192,7 @@ export interface ButtonRootProps {
   contentStyle?: CSSProperties;
   defaultBackground?: string;
   as?: React.ElementType;
+  htmlFor?: string;
   href?: string;
   target?: string;
   rel?: string;

package/src/components/Chip.tsx

@@ -5,7 +5,7 @@ import { useDesignSystemTheme } from "../contexts/DesignSystemConfiguration";
 import { useHover } from "../hooks/useHover";
 
 type ChipColorScheme = "primary" | "secondary" | "error";
-type ChipSize = "small" | "medium";
+type ChipSize = "small" | "medium" | "large";
 type ChipVariant = "solid" | "outlined" | "ghost";
 
 const ChipElement = styled.span<{
@@ -24,9 +24,9 @@ const ChipElement = styled.span<{
 
   const backgroundColor =
     $colorScheme === "primary"
-      ? "rgb(238, 229, 255)"
+      ? theme.colors.primaryPastel
       : $colorScheme === "secondary"
-        ? "rgb(205, 238, 231)"
+        ? theme.colors.secondaryPastel
         : $colorScheme === "error"
           ? "rgb(255, 219, 219)"
           : theme.colors.inputBackground;
@@ -49,15 +49,20 @@ const ChipElement = styled.span<{
     // lineHeight: "1.4",
     lineHeight: "15px",
     whiteSpace: "pre",
-    ...($size === "medium"
+    ...($size === "large"
       ? {
           fontSize: "11px",
           padding: "4px 8px",
         }
-      : {
-          fontSize: "9px",
-          padding: "0px 4px",
-        }),
+      : $size === "medium"
+        ? {
+            fontSize: "10px",
+            padding: "2px 6px",
+          }
+        : {
+            fontSize: "9px",
+            padding: "0px 4px",
+          }),
     ...($monospace && {
       fontFamily: theme.fonts.monospace,
     }),
@@ -96,7 +101,7 @@ const DeleteElement = styled(Cross1Icon)<{
   cursor: "pointer",
   opacity: 0.5,
 
-  ...(size === "medium"
+  ...(size === "large"
     ? {
         marginLeft: "2px",
         // top: '-1px',
@@ -124,7 +129,7 @@ const AddElement = styled(PlusIcon).withConfig({
   cursor: "pointer",
   opacity: 0.5,
 
-  ...(size === "medium"
+  ...(size === "large"
     ? {
         marginRight: "2px",
         top: "-1px",
@@ -168,7 +173,7 @@ export const Chip = memo(
       addable,
       clickable,
       style,
-      size = "medium",
+      size = "large",
       variant = "solid",
       monospace = false,
       tabIndex,

package/src/components/InputField.tsx

@@ -370,40 +370,46 @@ const InputFieldInput = forwardRef(function InputFieldInput(
   );
 });
 
-const InputFieldTypeahead = (props: { value: string }) => {
+const InputFieldTypeahead = (props: { prefix: string; value: string }) => {
   const {
     labelPosition,
     labelSize,
     hasDropdown,
     hasLabel,
     size,
-    onFocusChange,
+    // onFocusChange,
   } = useContext(InputFieldContext);
 
   return (
     <InputElement
+      as="span"
       $labelPosition={labelPosition}
       $labelSize={labelSize}
       $hasLabel={hasLabel}
       $hasDropdown={hasDropdown}
       $size={size}
-      onFocusChange={onFocusChange}
-      readOnly
-      placeholder={props.value}
+      // onFocusChange={onFocusChange}
+      // readOnly
+      // placeholder={props.value}
       value=""
       style={{
         position: "absolute",
-        top: -1,
+        top: 0,
         left: 0,
         right: 0,
-        bottom: -1,
+        bottom: 0,
         width: "100%",
         height: "100%",
         pointerEvents: "none",
         background: "transparent",
         boxShadow: "none",
       }}
-    />
+    >
+      <span style={{ opacity: 0 }}>{props.prefix}</span>
+      <span style={{ opacity: 0.5 }}>
+        {props.value.slice(props.prefix.length)}
+      </span>
+    </InputElement>
   );
 };
 
@@ -662,6 +668,39 @@ function InputFieldRoot({
   );
 }
 
+const PrimitiveInputField = styled.input(({ theme, readOnly, disabled }) => {
+  return {
+    // placeholder
+    "&::placeholder": {
+      color: theme.colors.textDisabled,
+    },
+    ...theme.textStyles.small,
+    color: readOnly
+      ? theme.colors.textMuted
+      : disabled
+        ? theme.colors.textDisabled
+        : theme.colors.text,
+    width: "0px", // Reset intrinsic width
+    flex: "1 1 0px",
+    position: "relative",
+    border: "0",
+    outline: "none",
+    minWidth: "0",
+    alignSelf: "stretch",
+    borderRadius: "4px",
+    paddingTop: "4px",
+    paddingBottom: "4px",
+    paddingLeft: "6px",
+    paddingRight: "6px",
+    background: theme.colors.inputBackground,
+    "&:focus": {
+      boxShadow: `0 0 0 2px ${theme.colors.primary}`,
+    },
+    userSelect: "all",
+    pointerEvents: "all",
+  };
+});
+
 export namespace InputField {
   export const Root = memo(InputFieldRoot);
   export const Input = memo(InputFieldInput);
@@ -670,4 +709,5 @@ export namespace InputField {
   export const DropdownMenu = InputFieldDropdownMenu;
   export const Button = InputFieldButton;
   export const Label = InputFieldLabel;
+  export const PrimitiveElement = PrimitiveInputField;
 }

package/src/components/InputFieldWithCompletions.tsx

@@ -468,9 +468,11 @@ export const InputFieldWithCompletions = memo(
           aria-expanded={isFocused && display !== "none"}
           aria-controls="component-listbox"
         />
-        {filter && typeaheadValue && typeaheadValue.startsWith(filter) && (
-          <InputField.Typeahead value={typeaheadValue} />
-        )}
+        {filter &&
+          typeaheadValue &&
+          typeaheadValue.toLowerCase().startsWith(filter.toLowerCase()) && (
+            <InputField.Typeahead value={typeaheadValue} prefix={filter} />
+          )}
         {(!isFocused || !hideChildrenWhenFocused) && children}
         {loading && isFocused && (
           <InputField.Label>

package/src/components/InspectorPrimitives.tsx

@@ -31,7 +31,7 @@ export const Title = styled.div<{
       }
     : {
         ...theme.textStyles.label,
-        color: theme.colors.textSubtle,
+        color: theme.colors.textMuted,
         fontWeight: "bold",
       }),
 }));

package/src/components/ListView.tsx

@@ -66,14 +66,15 @@ type ListRowContextValue = {
 // The dragged item isn't passed a context value (doing so causes an infinite loop),
 // so we pass this separately. Rows need the indentation to look correct when dragging,
 // and the dragged row doesn't have a ListRowContextValue.
-type DraggingContextValue = {
+type ListViewDraggingContextValue = {
   indentation: number;
   isDragging?: boolean;
 };
 
-const DraggingContext = createContext<DraggingContextValue>({
+const ListViewDraggingContext = createContext<ListViewDraggingContextValue>({
   indentation: 12,
 });
+(ListViewDraggingContext as any).displayName = "ListViewDraggingContext";
 
 const ListRowContext = createContext<ListRowContextValue>({
   marginType: "none",
@@ -88,6 +89,7 @@ const ListRowContext = createContext<ListRowContextValue>({
   isSectionHeader: false,
   colorScheme: "primary",
 });
+(ListRowContext as any).displayName = "ListRowContext";
 
 /* ----------------------------------------------------------------------------
  * RowTitle
@@ -333,6 +335,7 @@ interface ListViewRowProps<MenuItemType extends string = string> {
   onMenuOpenChange?: (isOpen: boolean) => void;
   onKeyDown?: (event: React.KeyboardEvent) => void;
   style?: CSSProperties;
+  className?: string;
   dragIndicatorStyle?:
     | CSSProperties
     | ((props: {
@@ -367,6 +370,7 @@ const ListViewRow = forwardRef(function ListViewRow<
     onKeyDown,
     style,
     dragIndicatorStyle,
+    className,
   }: ListViewRowProps<MenuItemType>,
   forwardedRef: ForwardedRef<HTMLElement>
 ) {
@@ -386,7 +390,7 @@ const ListViewRow = forwardRef(function ListViewRow<
   const { hoverProps } = useHover({
     onHoverChange,
   });
-  const { indentation, isDragging } = useContext(DraggingContext);
+  const { indentation, isDragging } = useContext(ListViewDraggingContext);
 
   const handlePress = useCallback(
     (event: React.MouseEvent) => {
@@ -463,6 +467,7 @@ const ListViewRow = forwardRef(function ListViewRow<
           { [pressEventName]: handlePress }
         )}
         tabIndex={tabIndex}
+        className={className}
       >
         {relativeDropPosition && (
           <ListViewDragIndicatorElement
@@ -524,6 +529,7 @@ const ListViewRow = forwardRef(function ListViewRow<
 const RenderItemContext = createContext<(index: number) => ReactNode>(
   () => null
 );
+(RenderItemContext as any).displayName = "RenderItemContext";
 
 const VirtualizedListRow = memo(function VirtualizedListRow({
   index,
@@ -761,8 +767,29 @@ const ListViewRootInner = forwardRef(function ListViewRootInner<T>(
     [data, renderItem]
   );
 
+  // TODO: Do we still use section header properties anywhere?
+  const defaultContextValue = useMemo(
+    (): ListRowContextValue => ({
+      colorScheme,
+      marginType: "none",
+      selectedPosition: "only",
+      sortable,
+      expandable,
+      divider,
+      pressEventName,
+      variant,
+      gap,
+      sectionHeaderVariant: "normal",
+      isSectionHeader: false,
+    }),
+    [colorScheme, sortable, expandable, divider, pressEventName, variant, gap]
+  );
+
   const getItemContextValue = useCallback(
     (i: number): ListRowContextValue | undefined => {
+      if (variant === "bare" || variant === "normal")
+        return defaultContextValue;
+
       const current = renderChild(i);
 
       if (!isValidElement(current)) return;
@@ -827,6 +854,8 @@ const ListViewRootInner = forwardRef(function ListViewRootInner<T>(
       };
     },
     [
+      variant,
+      defaultContextValue,
       renderChild,
       data.length,
       colorScheme,
@@ -834,7 +863,6 @@ const ListViewRootInner = forwardRef(function ListViewRootInner<T>(
       expandable,
       divider,
       pressEventName,
-      variant,
       sectionHeaderVariant,
       gap,
     ]
@@ -848,9 +876,9 @@ const ListViewRootInner = forwardRef(function ListViewRootInner<T>(
   const renderOverlay = useCallback(
     (index: number) => (
       <div style={{ opacity: 0.25 }}>
-        <DraggingContext.Provider value={draggingContextOverlayValue}>
+        <ListViewDraggingContext.Provider value={draggingContextOverlayValue}>
           {renderItem(data[index], index, { isDragging: true })}
-        </DraggingContext.Provider>
+        </ListViewDraggingContext.Provider>
       </div>
     ),
     [draggingContextOverlayValue, renderItem, data]
@@ -916,7 +944,7 @@ const ListViewRootInner = forwardRef(function ListViewRootInner<T>(
   const draggingContextValue = useMemo(() => ({ indentation }), [indentation]);
 
   return (
-    <DraggingContext.Provider value={draggingContextValue}>
+    <ListViewDraggingContext.Provider value={draggingContextValue}>
       <RootContainer
         id={id}
         className={className}
@@ -945,7 +973,7 @@ const ListViewRootInner = forwardRef(function ListViewRootInner<T>(
           )
         )}
       </RootContainer>
-    </DraggingContext.Provider>
+    </ListViewDraggingContext.Provider>
   );
 });
 

package/src/components/SelectMenu.tsx

@@ -1,6 +1,6 @@
 import { DropdownChevronIcon } from "@noya-app/noya-icons";
 import * as Select from "@radix-ui/react-select";
-import React, { memo } from "react";
+import React, { CSSProperties, memo } from "react";
 import { styled } from "styled-components";
 import { Button } from "./Button";
 import { renderIcon } from "./Icons";
@@ -15,6 +15,17 @@ type Props<T extends string> = {
   value: T;
   onSelect?: (value: T) => void;
   placeholder?: string;
+  disabled?: boolean;
+  readOnly?: boolean;
+};
+
+const readOnlyStyle: CSSProperties = {
+  justifyContent: "flex-start",
+  textAlign: "left",
+};
+
+const flexStyle: CSSProperties = {
+  flex: 1,
 };
 
 export const SelectMenu = memo(function SelectMenu<T extends string = string>({
@@ -25,6 +36,8 @@ export const SelectMenu = memo(function SelectMenu<T extends string = string>({
   value,
   onSelect,
   placeholder,
+  disabled,
+  readOnly,
 }: Props<T>) {
   const selectedItem = menuItems.find(
     (item): item is RegularMenuItem<T> =>
@@ -32,18 +45,40 @@ export const SelectMenu = memo(function SelectMenu<T extends string = string>({
   );
   const icon = selectedItem?.icon;
 
+  if (readOnly) {
+    return (
+      <Button
+        id={id}
+        style={style}
+        contentStyle={readOnlyStyle}
+        className={className}
+        disabled={disabled}
+      >
+        {icon && (
+          <>
+            {renderIcon(icon)}
+            <Spacer.Horizontal inline size={6} />
+          </>
+        )}
+        <span style={flexStyle}>{selectedItem?.title ?? value}</span>
+      </Button>
+    );
+  }
+
   return (
     <Select.Root value={value} onValueChange={onSelect}>
       <Select.SelectTrigger asChild>
-        <Button id={id} style={style} className={className}>
+        <Button id={id} style={style} className={className} disabled={disabled}>
           {icon && (
             <>
               {renderIcon(icon)}
-              <Spacer.Horizontal size={8} />
+              <Spacer.Horizontal inline size={6} />
             </>
           )}
-          <Select.Value placeholder={placeholder} />
-          <Spacer.Horizontal />
+          <span style={flexStyle}>
+            <Select.Value placeholder={placeholder} />
+          </span>
+          <Spacer.Horizontal inline size={6} />
           <DropdownChevronIcon />
         </Button>
       </Select.SelectTrigger>

package/src/components/Switch.tsx

@@ -45,17 +45,20 @@ interface Props {
   value: boolean;
   onChange: (value: boolean) => void;
   colorScheme?: SwitchColorScheme;
+  disabled?: boolean;
 }
 
 export const Switch = function Switch({
   value,
   onChange,
   colorScheme = "normal",
+  disabled,
 }: Props) {
   return (
     <SwitchRoot
       $colorScheme={colorScheme}
       checked={value}
+      disabled={disabled}
       onCheckedChange={(newValue) => {
         onChange(newValue);
       }}

package/src/components/Text.tsx

@@ -55,6 +55,7 @@ interface Props extends StyleProps {
   as?: keyof ReactHTML;
   href?: string;
   className?: string;
+  style?: React.CSSProperties;
   variant: keyof Theme["textStyles"];
   breakpoints?: BreakpointCollection<StyleProps> | null | false;
   color?: ThemeColorName;
@@ -89,6 +90,7 @@ export const Text = forwardRef(function Text(
     tabIndex,
     onClick,
     onKeyDown,
+    style,
     ...rest
   }: Props,
   forwardedRef: ForwardedRef<HTMLElement>
@@ -100,6 +102,7 @@ export const Text = forwardRef(function Text(
       ref={forwardedRef}
       as={element}
       className={className}
+      style={style}
       tabIndex={tabIndex}
       $variant={variant}
       $breakpoints={breakpoints}

package/src/components/TextArea.tsx

@@ -0,0 +1,82 @@
+import { assignRef } from "@noya-app/react-utils";
+import React, { forwardRef, memo, useCallback, useEffect, useRef } from "react";
+import styled from "styled-components";
+
+const TextAreaElement = styled.textarea(({ theme }) => ({
+  ...theme.textStyles.small,
+  color: theme.colors.text,
+  background: theme.colors.inputBackground,
+  width: "0px",
+  flex: "1 1 auto",
+  padding: "4px 6px",
+  border: "none",
+  outline: "none",
+  height: 100,
+  borderRadius: "4px",
+  "&::placeholder": {
+    color: theme.colors.textDisabled,
+  },
+  "&:focus": {
+    boxShadow: `0 0 0 2px ${theme.colors.primary}`,
+  },
+  // readonly
+  "&:read-only": {
+    color: theme.colors.textDisabled,
+  },
+  resize: "none",
+}));
+
+export const useAutoResize = (value: string) => {
+  const textareaRef = useRef<HTMLTextAreaElement | null>(null);
+
+  useEffect(() => {
+    if (!textareaRef.current) return;
+
+    textareaRef.current.style.height = "auto"; // Reset the height
+    textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;
+  }, [value]);
+
+  return textareaRef;
+};
+
+export const AutoResizingTextArea = memo(
+  forwardRef(function AutoResizingTextArea(
+    {
+      value,
+      onChangeText,
+      ...rest
+    }: Omit<
+      React.ComponentProps<typeof TextAreaElement>,
+      "onChange" | "value"
+    > & {
+      onChangeText: (value: string) => void;
+      value?: string;
+    },
+    forwardedRef: React.ForwardedRef<HTMLTextAreaElement>
+  ) {
+    const ref = useAutoResize(value || rest.placeholder || "");
+
+    const handleChange = useCallback(
+      (event: React.ChangeEvent<HTMLTextAreaElement>) =>
+        onChangeText(event.target.value),
+      [onChangeText]
+    );
+
+    const handleRef = useCallback(
+      (value: HTMLTextAreaElement | null) => {
+        ref.current = value;
+        assignRef(forwardedRef, value);
+      },
+      [ref, forwardedRef]
+    );
+
+    return (
+      <TextAreaElement
+        ref={handleRef}
+        {...rest}
+        onChange={handleChange}
+        value={value}
+      />
+    );
+  })
+);

package/src/index.tsx

@@ -49,6 +49,7 @@ export * from "./components/Spacer";
 export * from "./components/Stack";
 export * from "./components/Switch";
 export * from "./components/Text";
+export * from "./components/TextArea";
 export * from "./components/Toast";
 export * from "./components/Tooltip";
 export * from "./components/TreeView";