@noya-app/noya-designsystem 0.0.2

package/src/components/internal/TextInput.tsx

@@ -0,0 +1,296 @@
+import { composeRefs } from "@radix-ui/react-compose-refs";
+import React, {
+  AriaRole,
+  FocusEventHandler,
+  ForwardedRef,
+  forwardRef,
+  InputHTMLAttributes,
+  KeyboardEventHandler,
+  MouseEventHandler,
+  PointerEventHandler,
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from "react";
+import { useGlobalInputBlurListener } from "../../contexts/GlobalInputBlurContext";
+
+type Props = {
+  id?: string;
+  style?: any;
+  className?: string;
+  type?: "text" | "search";
+  disabled?: boolean;
+  value: string;
+  placeholder?: string;
+  role?: AriaRole;
+  name?: HTMLInputElement["name"];
+  onKeyDown?: KeyboardEventHandler;
+  onClick?: MouseEventHandler;
+  onDoubleClick?: MouseEventHandler;
+  onPointerDown?: PointerEventHandler;
+  onFocusCapture?: FocusEventHandler;
+  onFocusChange?: (isFocused: boolean) => void;
+  onBlur?: FocusEventHandler;
+} & Pick<
+  InputHTMLAttributes<HTMLInputElement>,
+  "autoComplete" | "autoCapitalize" | "autoCorrect" | "spellCheck" | "autoFocus"
+>;
+
+type ReadOnlyProps = Props & {
+  readOnly: true;
+};
+
+const ReadOnlyTextInput = forwardRef(function ReadOnlyTextInput(
+  { onKeyDown, onFocusChange, value, ...rest }: ReadOnlyProps,
+  forwardedRef: ForwardedRef<HTMLInputElement>
+) {
+  return (
+    <input
+      ref={forwardedRef}
+      {...rest}
+      value={value}
+      onKeyDown={onKeyDown}
+      readOnly
+    />
+  );
+});
+
+type ControlledProps = Props & {
+  onChange: (value: string) => void;
+};
+
+const ControlledTextInput = forwardRef(function ControlledTextInput(
+  {
+    onKeyDown,
+    value,
+    onChange,
+    onFocusChange,
+    onBlur,
+    onFocusCapture,
+    ...rest
+  }: ControlledProps,
+  forwardedRef: ForwardedRef<HTMLInputElement>
+) {
+  const handleBlur = useCallback(
+    (event: React.FocusEvent<HTMLInputElement>) => {
+      onBlur?.(event);
+
+      onFocusChange?.(false);
+    },
+    [onBlur, onFocusChange]
+  );
+
+  const handleFocusCapture = useCallback(
+    (event: React.FocusEvent<HTMLInputElement>) => {
+      onFocusCapture?.(event);
+
+      onFocusChange?.(true);
+    },
+    [onFocusCapture, onFocusChange]
+  );
+
+  return (
+    <input
+      ref={forwardedRef}
+      {...rest}
+      value={value}
+      onKeyDown={onKeyDown}
+      onChange={useCallback(
+        (event: React.ChangeEvent<HTMLInputElement>) =>
+          onChange(event.target.value),
+        [onChange]
+      )}
+      onBlur={handleBlur}
+      onFocusCapture={handleFocusCapture}
+    />
+  );
+});
+
+type SubmittableProps = Props & {
+  onSubmit: (value: string) => void;
+  allowSubmittingWithSameValue?: boolean;
+  submitAutomaticallyAfterDelay?: number;
+};
+
+const SubmittableTextInput = forwardRef(function SubmittableTextInput(
+  {
+    onKeyDown,
+    value,
+    onSubmit,
+    onBlur,
+    onFocusChange,
+    onFocusCapture,
+    allowSubmittingWithSameValue = false,
+    submitAutomaticallyAfterDelay,
+    ...rest
+  }: SubmittableProps,
+  forwardedRef: ForwardedRef<HTMLInputElement>
+) {
+  const ref = React.useRef<HTMLInputElement>(null);
+
+  const latestValue = useRef(value);
+  latestValue.current = value;
+
+  // Track whether the user has edited the input since the last submission.
+  // We use this to support automatically submitting the input after a delay.
+  const userDidEdit = useRef(false);
+
+  const isSubmitTriggeredByEscapeKey = useRef(false);
+
+  const [internalValue, setInternalValue] = useState("");
+
+  useLayoutEffect(() => {
+    setInternalValue(value);
+  }, [value]);
+
+  const handleSubmit = useCallback(() => {
+    // If this submission was triggered with Escape, we attempt to submit the original value.
+    // This will only actually call `onSubmit` if `allowSubmittingWithSameValue` is also true.
+    const submissionValue = isSubmitTriggeredByEscapeKey.current
+      ? value
+      : internalValue;
+
+    isSubmitTriggeredByEscapeKey.current = false;
+
+    if (submissionValue === value && !allowSubmittingWithSameValue) return;
+
+    onSubmit(submissionValue);
+
+    userDidEdit.current = false;
+
+    setInternalValue(latestValue.current);
+  }, [allowSubmittingWithSameValue, value, internalValue, onSubmit]);
+
+  useGlobalInputBlurListener(
+    useCallback(() => {
+      if (ref.current !== document.activeElement) return;
+
+      handleSubmit();
+    }, [handleSubmit])
+  );
+
+  const handleKeyDown = useCallback(
+    (event: React.KeyboardEvent<HTMLInputElement>) => {
+      if (event.key === "Enter") {
+        handleSubmit();
+
+        event.preventDefault();
+        event.stopPropagation();
+      } else if (event.key === "Escape") {
+        isSubmitTriggeredByEscapeKey.current = true;
+
+        ref.current?.blur();
+      } else {
+        onKeyDown?.(event);
+      }
+    },
+    [onKeyDown, handleSubmit]
+  );
+
+  const handleChange = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      userDidEdit.current = true;
+
+      setInternalValue(event.target.value);
+    },
+    []
+  );
+
+  const handleBlur = useCallback(
+    (event: React.FocusEvent<HTMLInputElement>) => {
+      onBlur?.(event);
+
+      onFocusChange?.(false);
+
+      handleSubmit();
+    },
+    [onBlur, onFocusChange, handleSubmit]
+  );
+
+  const handleFocusCapture = useCallback(
+    (event: React.FocusEvent<HTMLInputElement>) => {
+      onFocusCapture?.(event);
+
+      onFocusChange?.(true);
+    },
+    [onFocusCapture, onFocusChange]
+  );
+
+  const autoSubmitTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(
+    null
+  );
+  const latestHandleSubmit = useRef(handleSubmit);
+  latestHandleSubmit.current = handleSubmit;
+
+  useEffect(() => {
+    if (submitAutomaticallyAfterDelay) {
+      if (autoSubmitTimeoutRef.current) {
+        clearTimeout(autoSubmitTimeoutRef.current);
+      }
+
+      autoSubmitTimeoutRef.current = setTimeout(() => {
+        if (userDidEdit.current === false) return;
+
+        latestHandleSubmit.current();
+      }, submitAutomaticallyAfterDelay);
+    }
+
+    // Clear the timeout when the component is unmounted or if the value changes
+    return () => {
+      if (autoSubmitTimeoutRef.current) {
+        clearTimeout(autoSubmitTimeoutRef.current);
+      }
+    };
+    // Track `internalValue` to explicitly reset the timer
+  }, [internalValue, submitAutomaticallyAfterDelay]);
+
+  return (
+    <input
+      ref={composeRefs(ref, forwardedRef)}
+      {...rest}
+      value={internalValue}
+      onKeyDown={handleKeyDown}
+      onChange={handleChange}
+      onBlur={handleBlur}
+      onFocusCapture={handleFocusCapture}
+    />
+  );
+});
+
+export type TextInputProps = ReadOnlyProps | ControlledProps | SubmittableProps;
+
+/**
+ * This component shouldn't be used directly. Instead use the InputField components.
+ */
+export default forwardRef(function TextInput(
+  props: TextInputProps,
+  forwardedRef: ForwardedRef<HTMLInputElement>
+) {
+  const commonProps: TextInputProps = {
+    onPointerDown: useCallback(
+      (event: React.PointerEvent) => event.stopPropagation(),
+      []
+    ),
+    onClick: useCallback(
+      (event: React.MouseEvent) => event.stopPropagation(),
+      []
+    ),
+    autoComplete: "off",
+    autoCapitalize: "off",
+    autoCorrect: "off",
+    spellCheck: false,
+    type: "text",
+    disabled: false,
+    ...props,
+  };
+
+  if ("readOnly" in commonProps) {
+    return <ReadOnlyTextInput ref={forwardedRef} {...commonProps} readOnly />;
+  } else if ("onChange" in commonProps) {
+    return <ControlledTextInput ref={forwardedRef} {...commonProps} />;
+  } else {
+    return <SubmittableTextInput ref={forwardedRef} {...commonProps} />;
+  }
+});

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

@@ -0,0 +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 = '';
+    const handleSubmit = (value: string) => {
+      text = value;
+    };
+
+    const { container, rerender } = render(
+      <TextInput value={text} onSubmit={handleSubmit} />,
+    );
+
+    const input = container.querySelector('input')!;
+    fireEvent.change(input, { target: { value: 'abc' } });
+    fireEvent.blur(input);
+
+    expect(text).toEqual('abc');
+    expect(input.value).toEqual('');
+
+    rerender(<TextInput value={text} onSubmit={handleSubmit} />);
+
+    expect(input.value).toEqual('abc');
+  });
+
+  test('change and blur, reset', () => {
+    const handleSubmit = (value: string) => {};
+
+    const { container, rerender } = render(
+      <TextInput value="" onSubmit={handleSubmit} />,
+    );
+
+    const input = container.querySelector('input')!;
+    fireEvent.change(input, { target: { value: 'abc' } });
+    fireEvent.blur(input);
+
+    expect(input.value).toEqual('');
+
+    rerender(<TextInput value="def" onSubmit={handleSubmit} />);
+
+    expect(input.value).toEqual('def');
+  });
+
+  test('submit without changing', () => {
+    const handleSubmit = jest.fn();
+
+    const { container } = render(
+      <TextInput value="" onSubmit={handleSubmit} />,
+    );
+
+    const input = container.querySelector('input')!;
+    fireEvent.keyDown(input, { key: 'Enter', code: 'Enter' });
+
+    expect(handleSubmit).not.toBeCalled();
+  });
+
+  test('change and submit', () => {
+    let text = '';
+    const handleSubmit = (value: string) => {
+      text = value;
+    };
+
+    const { container, rerender } = render(
+      <TextInput value={text} onSubmit={handleSubmit} />,
+    );
+
+    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('');
+
+    rerender(<TextInput value={text} onSubmit={handleSubmit} />);
+
+    expect(input.value).toEqual('abc');
+
+    fireEvent.change(input, { target: { value: 'abcdef' } });
+    fireEvent.keyDown(input, { key: 'Enter', code: 'Enter' });
+
+    expect(text).toEqual('abcdef');
+    expect(input.value).toEqual('abc');
+
+    rerender(<TextInput value={text} onSubmit={handleSubmit} />);
+
+    expect(input.value).toEqual('abcdef');
+  });
+
+  test('change and submit, reset', () => {
+    const handleSubmit = (value: string) => {};
+
+    const { container, rerender } = render(
+      <TextInput value="" onSubmit={handleSubmit} />,
+    );
+
+    const input = container.querySelector('input')!;
+    fireEvent.change(input, { target: { value: 'abc' } });
+    fireEvent.keyDown(input, { key: 'Enter', code: 'Enter' });
+
+    expect(input.value).toEqual('');
+
+    rerender(<TextInput value="" onSubmit={handleSubmit} />);
+
+    expect(input.value).toEqual('');
+  });
+
+  test('submit only once', () => {
+    const handleSubmit = jest.fn();
+
+    const { container } = render(
+      <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' });
+
+    expect(handleSubmit).toBeCalledTimes(1);
+  });
+
+  test('submit multiple times', () => {
+    const handleSubmit = jest.fn();
+
+    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' });
+
+    expect(handleSubmit).toBeCalledTimes(3);
+  });
+});

package/src/contexts/DesignSystemConfiguration.tsx

@@ -0,0 +1,57 @@
+import { PlatformName } from '@noya-app/noya-keymap';
+import React, {
+  createContext,
+  memo,
+  ReactNode,
+  useContext,
+  useMemo,
+} from 'react';
+import { ThemeProvider, useTheme } from 'styled-components';
+import { ToastProvider } from '../components/Toast';
+import { Theme } from '../theme';
+import { DialogProvider } from './DialogContext';
+
+export type DesignSystemConfigurationContextValue = {
+  platform: PlatformName;
+};
+
+const DesignSystemConfigurationContext = createContext<
+  DesignSystemConfigurationContextValue | undefined
+>(undefined);
+
+export const DesignSystemConfigurationProvider = memo(
+  function DesignSystemConfigurationProvider({
+    children,
+    theme,
+    platform,
+  }: {
+    children: ReactNode;
+    theme: Theme;
+  } & DesignSystemConfigurationContextValue) {
+    const contextValue = useMemo(() => ({ platform }), [platform]);
+
+    return (
+      <DesignSystemConfigurationContext.Provider value={contextValue}>
+        <ThemeProvider theme={theme}>
+          <DialogProvider>
+            <ToastProvider>{children}</ToastProvider>
+          </DialogProvider>
+        </ThemeProvider>
+      </DesignSystemConfigurationContext.Provider>
+    );
+  },
+);
+
+export function useDesignSystemConfiguration(): DesignSystemConfigurationContextValue {
+  const value = useContext(DesignSystemConfigurationContext);
+
+  if (!value) {
+    throw new Error('Missing DesignSystemConfigurationProvider');
+  }
+
+  return value;
+}
+
+export function useDesignSystemTheme() {
+  return useTheme();
+}

package/src/contexts/DialogContext.tsx

@@ -0,0 +1,190 @@
+import React, {
+  createContext,
+  ReactNode,
+  useCallback,
+  useContext,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import styled from "styled-components";
+import { Button } from "../components/Button";
+import { Dialog, IDialog } from "../components/Dialog";
+import { InputField } from "../components/InputField";
+import { Spacer } from "../components/Spacer";
+
+export const Row = styled.div(({ theme }) => ({
+  flex: "1",
+  display: "flex",
+  flexDirection: "row",
+  alignItems: "center",
+}));
+
+function createDeferredPromise<T>() {
+  let resolve: (value: T) => void = () => {};
+  let reject: (value: any) => void = () => {};
+
+  const promise = new Promise<T>((res, rej) => {
+    resolve = res;
+    reject = rej;
+  });
+
+  return { promise, resolve, reject };
+}
+
+export type DialogContextValue = {
+  openInputDialog(
+    title: string,
+    inputValue?: string
+  ): Promise<string | undefined>;
+
+  containsElement(element: HTMLElement): boolean;
+};
+
+const DialogContext = createContext<DialogContextValue | undefined>(undefined);
+
+export const DialogProvider = function DialogProvider({
+  children,
+}: {
+  children: ReactNode;
+}) {
+  const [contents, setContents] = useState<
+    | {
+        title: string;
+        inputValue: string;
+        resolve: (value: string | undefined) => void;
+      }
+    | undefined
+  >();
+
+  const isOpen = !!contents;
+
+  const close = useCallback(() => {
+    if (!contents) return;
+
+    contents.resolve(undefined);
+  }, [contents]);
+
+  const submit = useCallback(() => {
+    if (!contents || !contents.inputValue) return;
+
+    contents.resolve(contents.inputValue);
+    setContents(undefined);
+  }, [contents]);
+
+  const open: DialogContextValue["openInputDialog"] = useCallback(
+    (title, inputValue = "") => {
+      const { promise, resolve } = createDeferredPromise<string | undefined>();
+
+      setContents({
+        title,
+        inputValue,
+        resolve: (value) => {
+          resolve(value);
+          setContents(undefined);
+        },
+      });
+
+      return promise;
+    },
+    []
+  );
+
+  const handleKeyDown = useCallback(
+    (event: React.KeyboardEvent<HTMLInputElement>) => {
+      if (event.key !== "Enter") return;
+
+      event.stopPropagation();
+      event.preventDefault();
+
+      submit();
+    },
+    [submit]
+  );
+
+  const inputRef = useRef<HTMLInputElement>(null);
+  const dialogRef = useRef<IDialog>(null);
+
+  const containsElement = useCallback((element: HTMLElement) => {
+    if (!dialogRef.current) return false;
+
+    return dialogRef.current.containsElement(element);
+  }, []);
+
+  return (
+    <>
+      <DialogContext.Provider
+        value={useMemo(
+          () => ({ openInputDialog: open, containsElement }),
+          [containsElement, open]
+        )}
+      >
+        {children}
+      </DialogContext.Provider>
+      <Dialog
+        ref={dialogRef}
+        title={contents?.title}
+        open={isOpen}
+        onOpenChange={useCallback(
+          (isOpen: boolean) => {
+            if (!isOpen) {
+              close();
+            }
+          },
+          [close]
+        )}
+        onOpenAutoFocus={useCallback((event: Event) => {
+          event.stopPropagation();
+          event.preventDefault();
+
+          inputRef.current?.focus();
+        }, [])}
+      >
+        <InputField.Root>
+          <InputField.Input
+            ref={inputRef}
+            value={contents?.inputValue ?? ""}
+            onChange={(value) => {
+              setContents((contents) =>
+                contents
+                  ? {
+                      ...contents,
+                      inputValue: value,
+                    }
+                  : undefined
+              );
+            }}
+            onKeyDown={handleKeyDown}
+          />
+        </InputField.Root>
+        <Spacer.Vertical size={20} />
+        <Row>
+          <Spacer.Horizontal />
+          <Button onClick={close}>Cancel</Button>
+          <Spacer.Horizontal size={16} />
+          <Button disabled={!contents?.inputValue} onClick={submit}>
+            Submit
+          </Button>
+        </Row>
+      </Dialog>
+    </>
+  );
+};
+
+function useDialog(): DialogContextValue {
+  const value = useContext(DialogContext);
+
+  if (!value) {
+    throw new Error("Missing DialogProvider");
+  }
+
+  return value;
+}
+
+export function useOpenInputDialog() {
+  return useDialog().openInputDialog;
+}
+
+export function useDialogContainsElement() {
+  return useDialog().containsElement;
+}