@noya-app/noya-designsystem 0.0.8 → 0.0.9

package/package.json

@@ -1,9 +1,12 @@
 {
   "name": "@noya-app/noya-designsystem",
-  "version": "0.0.8",
+  "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,11 +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.4",
-    "@noya-app/noya-utils": "0.0.7",
-    "@noya-app/noya-geometry": "0.0.7",
-    "@noya-app/noya-icons": "0.0.1",
-    "@noya-app/noya-keymap": "0.0.3",
+    "@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/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/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/index.tsx

@@ -79,4 +79,5 @@ export { default as withSeparatorElements } from "./utils/withSeparatorElements"
 
 // Avoid dependency cycles
 export * as InspectorPrimitives from "./components/InspectorPrimitives";
-export * from "./components/ArrayController";
+export * from "./components/ArrayController";
+export * from "./components/DimensionInput";