@noya-app/noya-designsystem 0.0.7 → 0.0.9

package/package.json

@@ -1,9 +1,12 @@
 {
   "name": "@noya-app/noya-designsystem",
-  "version": "0.0.7",
+  "version": "0.0.9",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
+  "exports": {
+    ".": "./src/index.tsx"
+  },
   "scripts": {
     "build": "tsup src/index.tsx --format cjs,esm --dts --sourcemap",
     "dev": "npm run build -- --watch"
@@ -12,9 +15,11 @@
     "@dnd-kit/core": "3.1.1",
     "@dnd-kit/modifiers": "3.0.0",
     "@dnd-kit/sortable": "4.0.0",
-    "@noya-app/noya-colorpicker": "0.0.3",
-    "@noya-app/noya-utils": "0.0.7",
-    "@noya-app/noya-geometry": "0.0.7",
+    "@noya-app/noya-colorpicker": "workspace:*",
+    "@noya-app/noya-utils": "workspace:*",
+    "@noya-app/noya-geometry": "workspace:*",
+    "@noya-app/noya-icons": "workspace:*",
+    "@noya-app/noya-keymap": "workspace:*",
     "@radix-ui/primitive": "^1.0.0",
     "@radix-ui/react-avatar": "^1.0.1",
     "@radix-ui/react-compose-refs": "^1.0.0",

package/src/components/ArrayController.tsx

@@ -0,0 +1,168 @@
+import { range } from "@noya-app/noya-utils";
+import React, { ReactNode, memo, useCallback, useMemo } from "react";
+import styled, { useTheme } from "styled-components";
+import withSeparatorElements from "../utils/withSeparatorElements";
+import { Button } from "./Button";
+import { IconButton } from "./IconButton";
+import * as InspectorPrimitives from "./InspectorPrimitives";
+import { ListView } from "./ListView";
+import { RelativeDropPosition, Sortable } from "./Sortable";
+import { Spacer } from "./Spacer";
+import { Stack } from "./Stack";
+
+const ElementRow = styled.div({
+  flex: "0 0 auto",
+  display: "flex",
+  flexDirection: "row",
+  alignItems: "center",
+});
+
+const ItemContainer = styled.div({
+  position: "relative",
+});
+
+export interface ArrayControllerProps<Item> {
+  id: string;
+  items: Item[];
+  title: ReactNode;
+  sortable?: boolean;
+  reversed?: boolean;
+  expanded?: boolean;
+  getKey?: (item: Item) => string;
+  onMoveItem?: (sourceIndex: number, destinationIndex: number) => void;
+  onClickPlus?: () => void;
+  onClickTrash?: () => void;
+  onClickExpand?: () => void;
+  renderItem: (props: { item: Item; index: number }) => ReactNode;
+  renderExpandedContent?: () => ReactNode;
+  padding?: number;
+}
+
+export const ArrayController = memo(function ArrayController<Item>({
+  id,
+  items,
+  title,
+  sortable = false,
+  reversed = true,
+  expanded = false,
+  getKey,
+  onMoveItem,
+  onClickPlus,
+  onClickTrash,
+  onClickExpand,
+  renderItem,
+  renderExpandedContent,
+  padding = 10,
+}: ArrayControllerProps<Item>) {
+  const iconColor = useTheme().colors.icon;
+  const primaryLightColor = useTheme().colors.primaryLight;
+
+  const keys = useMemo(
+    () => items.map((item, index) => getKey?.(item) ?? index.toString()),
+    [getKey, items]
+  );
+
+  const indexes = reversed
+    ? range(0, items.length).reverse()
+    : range(0, items.length);
+
+  const handleMoveItem = useCallback(
+    (
+      sourceIndex: number,
+      destinationIndex: number,
+      position: RelativeDropPosition
+    ) => {
+      if (reversed) {
+        if (position === "above") {
+          position = "below";
+        } else if (position === "below") {
+          position = "above";
+        }
+      }
+
+      onMoveItem?.(
+        sourceIndex,
+        position === "below" ? destinationIndex + 1 : destinationIndex
+      );
+    },
+    [onMoveItem, reversed]
+  );
+
+  const renderRow = (index: number) => {
+    return (
+      <ElementRow key={keys[index]}>
+        {renderItem({ item: items[index], index: index })}
+      </ElementRow>
+    );
+  };
+
+  return (
+    <InspectorPrimitives.Section id={id} padding={padding} gap="2px">
+      <InspectorPrimitives.SectionHeader>
+        <Button variant="none" onClick={onClickPlus}>
+          <InspectorPrimitives.Title>{title}</InspectorPrimitives.Title>
+        </Button>
+        <Spacer.Horizontal />
+        {withSeparatorElements(
+          [
+            onClickTrash && (
+              <IconButton
+                id={`${id}-trash`}
+                iconName="TrashIcon"
+                color={iconColor}
+                onClick={onClickTrash}
+              />
+            ),
+            onClickExpand && (
+              <IconButton
+                id={`${id}-gear`}
+                iconName="GearIcon"
+                color={expanded ? primaryLightColor : iconColor}
+                onClick={onClickExpand}
+              />
+            ),
+            onClickPlus && (
+              <IconButton
+                id={`${id}-add`}
+                iconName="PlusIcon"
+                color={iconColor}
+                onClick={onClickPlus}
+              />
+            ),
+          ],
+          <Spacer.Horizontal size={8} />
+        )}
+      </InspectorPrimitives.SectionHeader>
+      <Stack.V gap="4px">
+        {sortable ? (
+          <Sortable.Root
+            keys={keys}
+            renderOverlay={renderRow}
+            onMoveItem={handleMoveItem}
+          >
+            {indexes.map((index) => (
+              <Sortable.Item<HTMLDivElement> id={keys[index]} key={keys[index]}>
+                {({ relativeDropPosition, ...sortableProps }) => (
+                  <ItemContainer {...sortableProps}>
+                    {renderRow(index)}
+                    {relativeDropPosition && (
+                      <ListView.DragIndicator
+                        gap={0}
+                        colorScheme="primary"
+                        relativeDropPosition={relativeDropPosition}
+                        offsetLeft={0}
+                      />
+                    )}
+                  </ItemContainer>
+                )}
+              </Sortable.Item>
+            ))}
+          </Sortable.Root>
+        ) : (
+          indexes.map(renderRow)
+        )}
+      </Stack.V>
+      {expanded && renderExpandedContent?.()}
+    </InspectorPrimitives.Section>
+  );
+});

package/src/components/DimensionInput.tsx

@@ -0,0 +1,66 @@
+import { round } from "@noya-app/noya-utils";
+import React, { memo, useCallback } from "react";
+import { InputField } from "./InputField";
+
+export type SetNumberMode = "replace" | "adjust";
+
+export function getNewValue(
+  value: number,
+  mode: SetNumberMode,
+  delta?: number
+) {
+  return delta === undefined
+    ? value
+    : mode === "replace"
+      ? delta
+      : value + delta;
+}
+
+export type DimensionValue = number | undefined;
+
+interface Props {
+  id?: string;
+  value: DimensionValue;
+  onSetValue: (value: number, mode: SetNumberMode) => void;
+  label?: string;
+  size?: number;
+  placeholder?: string;
+  disabled?: boolean;
+  trigger?: "change" | "submit";
+}
+
+export const DimensionInput = memo(function DimensionInput({
+  id,
+  value,
+  onSetValue,
+  label,
+  size,
+  placeholder = "multi",
+  disabled,
+  trigger = "submit",
+}: Props) {
+  const handleNudgeValue = useCallback(
+    (value: number) => onSetValue(value, "adjust"),
+    [onSetValue]
+  );
+
+  const handleSetValue = useCallback(
+    (value: number) => onSetValue(value, "replace"),
+    [onSetValue]
+  );
+
+  return (
+    <InputField.Root id={id} width={size}>
+      <InputField.NumberInput
+        value={value === undefined ? value : round(value, 2)}
+        placeholder={value === undefined ? placeholder : undefined}
+        onNudge={handleNudgeValue}
+        disabled={disabled}
+        {...(trigger === "change"
+          ? { onChange: handleSetValue }
+          : { onSubmit: handleSetValue })}
+      />
+      {label && <InputField.Label>{label}</InputField.Label>}
+    </InputField.Root>
+  );
+});

package/src/components/InputFieldWithCompletions.tsx

@@ -144,7 +144,7 @@ export const CompletionMenu = memo(
   })
 );
 
-interface Props {
+type Props = {
   loading?: boolean;
   initialValue?: string;
   placeholder?: string;
@@ -160,7 +160,7 @@ interface Props {
   children?: React.ReactNode;
   hideChildrenWhenFocused?: boolean;
   hideMenuWhenEmptyValue?: boolean;
-}
+};
 
 export const InputFieldWithCompletions = memo(
   forwardRef(function InputFieldWithCompletions(

package/src/components/InspectorPrimitives.tsx

@@ -0,0 +1,139 @@
+import React, { CSSProperties, memo, ReactNode } from "react";
+import styled, { useTheme } from "styled-components";
+import { Spacer } from "./Spacer";
+
+export const Section = styled.div<{
+  padding?: CSSProperties["padding"];
+  gap?: CSSProperties["gap"];
+}>(({ theme, padding = "10px", gap }) => ({
+  flex: "0 0 auto",
+  display: "flex",
+  flexDirection: "column",
+  padding,
+  gap,
+}));
+
+export const SectionHeader = styled.div(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+}));
+
+export const Title = styled.div<{
+  textStyle?: "small" | "heading5" | "heading4" | "heading3";
+}>(({ theme, textStyle }) => ({
+  display: "flex",
+  flexDirection: "row",
+  userSelect: "none",
+  ...(textStyle
+    ? {
+        ...theme.textStyles[textStyle],
+        color: theme.colors.text,
+      }
+    : {
+        ...theme.textStyles.label,
+        color: theme.colors.textSubtle,
+        fontWeight: "bold",
+      }),
+}));
+
+export const Row = styled.div<{ gap?: CSSProperties["gap"] }>(
+  ({ theme, gap }) => ({
+    flex: "1",
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    gap,
+  })
+);
+
+export const Column = styled.div(({ theme }) => ({
+  flex: "1",
+  display: "flex",
+  flexDirection: "column",
+  gap: "2px",
+}));
+
+export const Checkbox = styled.input(({ theme }) => ({
+  margin: 0,
+}));
+
+export const Text = styled.span(({ theme }) => ({
+  ...theme.textStyles.small,
+}));
+
+export const VerticalSeparator = () => (
+  <Spacer.Vertical size={useTheme().sizes.inspector.verticalSeparator} />
+);
+
+export const HorizontalSeparator = () => (
+  <Spacer.Horizontal size={useTheme().sizes.inspector.horizontalSeparator} />
+);
+
+const SliderRowLabel = styled.span(({ theme }) => ({
+  ...theme.textStyles.small,
+  color: theme.colors.textMuted,
+  marginBottom: "-6px",
+}));
+
+export const RowLabel = styled.span<{
+  textStyle?: "small" | "heading5" | "heading4" | "heading3";
+}>(({ theme, textStyle }) => ({
+  // marginBottom: '6px',
+  display: "flex",
+  ...(textStyle
+    ? {
+        ...theme.textStyles[textStyle],
+      }
+    : {
+        ...theme.textStyles.label,
+        color: theme.colors.textSubtle,
+        fontWeight: "bold",
+      }),
+  lineHeight: "19px", // Button height
+}));
+
+export const LabeledRow = memo(function LabeledRow({
+  id,
+  children,
+  label,
+  labelTextStyle,
+  gap,
+  right,
+}: {
+  id?: string;
+  children: ReactNode;
+  label: string;
+  labelTextStyle?: "small" | "heading5" | "heading4" | "heading3";
+  gap?: CSSProperties["gap"];
+  right?: ReactNode;
+}) {
+  return (
+    <Row id={id}>
+      <Column>
+        <RowLabel textStyle={labelTextStyle}>
+          {label}
+          {right && <Spacer.Horizontal />}
+          {right}
+        </RowLabel>
+        <Row gap={gap}>{children}</Row>
+      </Column>
+    </Row>
+  );
+});
+
+export const LabeledSliderRow = memo(function LabeledRow({
+  children,
+  label,
+}: {
+  children: ReactNode;
+  label: string;
+}) {
+  return (
+    <Row>
+      <Column>
+        <SliderRowLabel>{label}</SliderRowLabel>
+        <Row>{children}</Row>
+      </Column>
+    </Row>
+  );
+});

package/src/components/internal/__tests__/TextInput.test.tsx

@@ -1,143 +1,144 @@
-import { fireEvent, render } from '@testing-library/react';
-import React from 'react';
-import TextInput from '../TextInput';
-
-describe('submittable text input', () => {
-  test('change and blur', () => {
-    let text = '';
+import { fireEvent, render } from "@testing-library/react";
+import { describe, expect, mock, test } from "bun:test";
+import React from "react";
+import TextInput from "../TextInput";
+
+describe("submittable text input", () => {
+  test("change and blur", () => {
+    let text = "";
     const handleSubmit = (value: string) => {
       text = value;
     };
 
     const { container, rerender } = render(
-      <TextInput value={text} onSubmit={handleSubmit} />,
+      <TextInput value={text} onSubmit={handleSubmit} />
     );
 
-    const input = container.querySelector('input')!;
-    fireEvent.change(input, { target: { value: 'abc' } });
+    const input = container.querySelector("input")!;
+    fireEvent.change(input, { target: { value: "abc" } });
     fireEvent.blur(input);
 
-    expect(text).toEqual('abc');
-    expect(input.value).toEqual('');
+    expect(text).toEqual("abc");
+    expect(input.value).toEqual("");
 
     rerender(<TextInput value={text} onSubmit={handleSubmit} />);
 
-    expect(input.value).toEqual('abc');
+    expect(input.value).toEqual("abc");
   });
 
-  test('change and blur, reset', () => {
+  test("change and blur, reset", () => {
     const handleSubmit = (value: string) => {};
 
     const { container, rerender } = render(
-      <TextInput value="" onSubmit={handleSubmit} />,
+      <TextInput value="" onSubmit={handleSubmit} />
     );
 
-    const input = container.querySelector('input')!;
-    fireEvent.change(input, { target: { value: 'abc' } });
+    const input = container.querySelector("input")!;
+    fireEvent.change(input, { target: { value: "abc" } });
     fireEvent.blur(input);
 
-    expect(input.value).toEqual('');
+    expect(input.value).toEqual("");
 
     rerender(<TextInput value="def" onSubmit={handleSubmit} />);
 
-    expect(input.value).toEqual('def');
+    expect(input.value).toEqual("def");
   });
 
-  test('submit without changing', () => {
-    const handleSubmit = jest.fn();
+  test("submit without changing", () => {
+    const handleSubmit = mock(() => {});
 
     const { container } = render(
-      <TextInput value="" onSubmit={handleSubmit} />,
+      <TextInput value="" onSubmit={handleSubmit} />
     );
 
-    const input = container.querySelector('input')!;
-    fireEvent.keyDown(input, { key: 'Enter', code: 'Enter' });
+    const input = container.querySelector("input")!;
+    fireEvent.keyDown(input, { key: "Enter", code: "Enter" });
 
     expect(handleSubmit).not.toBeCalled();
   });
 
-  test('change and submit', () => {
-    let text = '';
+  test("change and submit", () => {
+    let text = "";
     const handleSubmit = (value: string) => {
       text = value;
     };
 
     const { container, rerender } = render(
-      <TextInput value={text} onSubmit={handleSubmit} />,
+      <TextInput value={text} onSubmit={handleSubmit} />
     );
 
-    const input = container.querySelector('input')!;
-    fireEvent.change(input, { target: { value: 'abc' } });
-    fireEvent.keyDown(input, { key: 'Enter', code: 'Enter' });
+    const input = container.querySelector("input")!;
+    fireEvent.change(input, { target: { value: "abc" } });
+    fireEvent.keyDown(input, { key: "Enter", code: "Enter" });
 
-    expect(text).toEqual('abc');
-    expect(input.value).toEqual('');
+    expect(text).toEqual("abc");
+    expect(input.value).toEqual("");
 
     rerender(<TextInput value={text} onSubmit={handleSubmit} />);
 
-    expect(input.value).toEqual('abc');
+    expect(input.value).toEqual("abc");
 
-    fireEvent.change(input, { target: { value: 'abcdef' } });
-    fireEvent.keyDown(input, { key: 'Enter', code: 'Enter' });
+    fireEvent.change(input, { target: { value: "abcdef" } });
+    fireEvent.keyDown(input, { key: "Enter", code: "Enter" });
 
-    expect(text).toEqual('abcdef');
-    expect(input.value).toEqual('abc');
+    expect(text).toEqual("abcdef");
+    expect(input.value).toEqual("abc");
 
     rerender(<TextInput value={text} onSubmit={handleSubmit} />);
 
-    expect(input.value).toEqual('abcdef');
+    expect(input.value).toEqual("abcdef");
   });
 
-  test('change and submit, reset', () => {
+  test("change and submit, reset", () => {
     const handleSubmit = (value: string) => {};
 
     const { container, rerender } = render(
-      <TextInput value="" onSubmit={handleSubmit} />,
+      <TextInput value="" onSubmit={handleSubmit} />
     );
 
-    const input = container.querySelector('input')!;
-    fireEvent.change(input, { target: { value: 'abc' } });
-    fireEvent.keyDown(input, { key: 'Enter', code: 'Enter' });
+    const input = container.querySelector("input")!;
+    fireEvent.change(input, { target: { value: "abc" } });
+    fireEvent.keyDown(input, { key: "Enter", code: "Enter" });
 
-    expect(input.value).toEqual('');
+    expect(input.value).toEqual("");
 
     rerender(<TextInput value="" onSubmit={handleSubmit} />);
 
-    expect(input.value).toEqual('');
+    expect(input.value).toEqual("");
   });
 
-  test('submit only once', () => {
-    const handleSubmit = jest.fn();
+  test("submit only once", () => {
+    const handleSubmit = mock(() => {});
 
     const { container } = render(
-      <TextInput value="" onSubmit={handleSubmit} />,
+      <TextInput value="" onSubmit={handleSubmit} />
     );
 
-    const input = container.querySelector('input')!;
-    fireEvent.change(input, { target: { value: 'abc' } });
-    fireEvent.keyDown(input, { key: 'Enter', code: 'Enter' });
-    fireEvent.keyDown(input, { key: 'Enter', code: 'Enter' });
-    fireEvent.keyDown(input, { key: 'Enter', code: 'Enter' });
+    const input = container.querySelector("input")!;
+    fireEvent.change(input, { target: { value: "abc" } });
+    fireEvent.keyDown(input, { key: "Enter", code: "Enter" });
+    fireEvent.keyDown(input, { key: "Enter", code: "Enter" });
+    fireEvent.keyDown(input, { key: "Enter", code: "Enter" });
 
     expect(handleSubmit).toBeCalledTimes(1);
   });
 
-  test('submit multiple times', () => {
-    const handleSubmit = jest.fn();
+  test("submit multiple times", () => {
+    const handleSubmit = mock(() => {});
 
     const { container } = render(
       <TextInput
         value=""
         onSubmit={handleSubmit}
         allowSubmittingWithSameValue
-      />,
+      />
     );
 
-    const input = container.querySelector('input')!;
-    fireEvent.change(input, { target: { value: 'abc' } });
-    fireEvent.keyDown(input, { key: 'Enter', code: 'Enter' });
-    fireEvent.keyDown(input, { key: 'Enter', code: 'Enter' });
-    fireEvent.keyDown(input, { key: 'Enter', code: 'Enter' });
+    const input = container.querySelector("input")!;
+    fireEvent.change(input, { target: { value: "abc" } });
+    fireEvent.keyDown(input, { key: "Enter", code: "Enter" });
+    fireEvent.keyDown(input, { key: "Enter", code: "Enter" });
+    fireEvent.keyDown(input, { key: "Enter", code: "Enter" });
 
     expect(handleSubmit).toBeCalledTimes(3);
   });

package/src/hooks/__tests__/mergeEventHandlers.test.ts

@@ -1,9 +1,10 @@
-import { ReactEventHandlers } from 'react-use-gesture/dist/types';
-import { mergeEventHandlers } from '../..';
+import { expect, test } from "bun:test";
+import { ReactEventHandlers } from "react-use-gesture/dist/types";
+import { mergeEventHandlers } from "../..";
 
 const event = { defaultPrevented: false };
 
-test('merges handlers', () => {
+test("merges handlers", () => {
   const out: [number, any][] = [];
 
   const a: ReactEventHandlers = { onClick: (e) => out.push([1, e]) };
@@ -15,8 +16,8 @@ test('merges handlers', () => {
 
   result.onClick?.(event as any);
 
-  expect(Object.keys(result)).toEqual(['onClick']);
-  expect(typeof result.onClick).toEqual('function');
+  expect(Object.keys(result)).toEqual(["onClick"]);
+  expect(typeof result.onClick).toEqual("function");
   expect(out).toEqual([
     [1, event],
     [2, event],
@@ -26,7 +27,7 @@ test('merges handlers', () => {
 
 const noop = () => {};
 
-test('merges multiple handlers', () => {
+test("merges multiple handlers", () => {
   const a: ReactEventHandlers = {
     onMouseDown: noop,
     onMouseMove: noop,
@@ -40,8 +41,8 @@ test('merges multiple handlers', () => {
   const result = mergeEventHandlers(a, b);
 
   expect(Object.keys(result)).toEqual([
-    'onMouseDown',
-    'onMouseMove',
-    'onMouseUp',
+    "onMouseDown",
+    "onMouseMove",
+    "onMouseUp",
   ]);
 });

package/src/index.tsx

@@ -76,3 +76,8 @@ export * from "./utils/fuzzyScorer";
 export * from "./utils/sketchColor";
 export * from "./utils/sketchPattern";
 export { default as withSeparatorElements } from "./utils/withSeparatorElements";
+
+// Avoid dependency cycles
+export * as InspectorPrimitives from "./components/InspectorPrimitives";
+export * from "./components/ArrayController";
+export * from "./components/DimensionInput";