@seed-design/react 1.0.7 → 1.1.0

package/src/components/TextField/useTextFieldWithGraphemes.test.tsx

@@ -0,0 +1,301 @@
+import "@testing-library/jest-dom/vitest";
+import { cleanup, render } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import type { ReactElement } from "react";
+import React from "react";
+
+import { TextFieldRoot, TextFieldInput } from "./TextField";
+import {
+  FieldRoot,
+  FieldCharacterCount,
+  FieldLabel,
+  FieldFooter,
+  FieldHeader,
+} from "../Field/Field";
+import { useTextFieldWithGraphemes } from "./useTextFieldWithGraphemes";
+
+afterEach(cleanup);
+
+function setUp(jsx: ReactElement) {
+  return {
+    user: userEvent.setup(),
+    ...render(jsx),
+  };
+}
+
+interface TextFieldWithGraphemesProps {
+  maxGraphemeCount?: number;
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (values: {
+    value: string;
+    graphemes: string[];
+    slicedValue: string;
+    slicedGraphemes: string[];
+  }) => void;
+}
+
+const TextFieldWithGraphemes = (props: TextFieldWithGraphemesProps) => {
+  const { textFieldRootProps, counterProps } = useTextFieldWithGraphemes(props);
+
+  return (
+    <FieldRoot>
+      <FieldHeader>
+        <FieldLabel>Text Field</FieldLabel>
+      </FieldHeader>
+      <TextFieldRoot {...textFieldRootProps}>
+        <TextFieldInput data-testid="input" />
+      </TextFieldRoot>
+      <FieldFooter>
+        <FieldCharacterCount {...counterProps} data-testid="counter" />
+      </FieldFooter>
+    </FieldRoot>
+  );
+};
+
+describe("useTextFieldWithGraphemes", () => {
+  describe("basic functionality", () => {
+    it("should render with empty default value", () => {
+      const { getByTestId } = setUp(<TextFieldWithGraphemes />);
+      const input = getByTestId("input");
+
+      expect(input).toHaveValue("");
+    });
+
+    it("should render with provided default value", () => {
+      const { getByTestId } = setUp(<TextFieldWithGraphemes defaultValue="Hello" />);
+      const input = getByTestId("input");
+
+      expect(input).toHaveValue("Hello");
+    });
+
+    it("should handle typing in uncontrolled mode", async () => {
+      const { getByTestId, user } = setUp(<TextFieldWithGraphemes />);
+      const input = getByTestId("input");
+
+      await user.type(input, "test");
+      expect(input).toHaveValue("test");
+    });
+
+    it("should handle controlled mode", async () => {
+      function ControlledComponent() {
+        const [value, setValue] = React.useState("initial");
+        return (
+          <TextFieldWithGraphemes value={value} onValueChange={({ value }) => setValue(value)} />
+        );
+      }
+
+      const { getByTestId, user } = setUp(<ControlledComponent />);
+      const input = getByTestId("input");
+
+      expect(input).toHaveValue("initial");
+
+      await user.clear(input);
+      await user.type(input, "new");
+
+      expect(input).toHaveValue("new");
+    });
+
+    it("should track grapheme count with counter", async () => {
+      const { getByTestId, user } = setUp(<TextFieldWithGraphemes maxGraphemeCount={20} />);
+      const input = getByTestId("input");
+      const counter = getByTestId("counter");
+
+      expect(counter).toHaveTextContent("0/20");
+
+      await user.type(input, "Hello");
+      expect(counter).toHaveTextContent("5/20");
+
+      await user.type(input, " 👨‍👩‍👧‍👦");
+      expect(counter).toHaveTextContent("7/20");
+    });
+  });
+
+  describe("counter functionality", () => {
+    it("should show the right character count with defaultValue", () => {
+      const { getByTestId } = setUp(
+        <TextFieldWithGraphemes maxGraphemeCount={10} defaultValue="Hello" />,
+      );
+      const counter = getByTestId("counter");
+
+      expect(counter).toBeInTheDocument();
+      expect(counter).toHaveTextContent("5/10");
+    });
+
+    it("should update counter as user types", async () => {
+      const { getByTestId, user } = setUp(<TextFieldWithGraphemes maxGraphemeCount={10} />);
+      const input = getByTestId("input");
+      const counter = getByTestId("counter");
+
+      expect(counter).toHaveTextContent("0/10");
+
+      await user.type(input, "Test");
+      expect(counter).toHaveTextContent("4/10");
+
+      await user.clear(input);
+      expect(counter).toHaveTextContent("0/10");
+    });
+
+    it("should handle maxGraphemes of 0", () => {
+      const { getByTestId } = setUp(
+        <TextFieldWithGraphemes maxGraphemeCount={0} defaultValue="Test" />,
+      );
+      const counter = getByTestId("counter");
+
+      expect(counter).toHaveTextContent("4/0");
+    });
+  });
+
+  describe("onValueChange callback", () => {
+    it("should call onValueChange with correct parameters", async () => {
+      const handleValueChange = vi.fn();
+      const { getByTestId, user } = setUp(
+        <TextFieldWithGraphemes onValueChange={handleValueChange} />,
+      );
+      const input = getByTestId("input");
+
+      await user.type(input, "H");
+      expect(handleValueChange).toHaveBeenLastCalledWith({
+        value: "H",
+        graphemes: ["H"],
+        slicedValue: "H",
+        slicedGraphemes: ["H"],
+      });
+
+      await user.type(input, "i");
+      expect(handleValueChange).toHaveBeenLastCalledWith({
+        value: "Hi",
+        graphemes: ["H", "i"],
+        slicedValue: "Hi",
+        slicedGraphemes: ["H", "i"],
+      });
+    });
+
+    it("should provide sliced values when maxGraphemes is set", async () => {
+      const handleValueChange = vi.fn();
+      const { getByTestId, user } = setUp(
+        <TextFieldWithGraphemes maxGraphemeCount={3} onValueChange={handleValueChange} />,
+      );
+      const input = getByTestId("input");
+
+      await user.type(input, "Hello");
+
+      const lastCall = handleValueChange.mock.calls[handleValueChange.mock.calls.length - 1][0];
+
+      expect(lastCall.value).toBe("Hello");
+      expect(lastCall.graphemes).toEqual(["H", "e", "l", "l", "o"]);
+      expect(lastCall.slicedValue).toBe("Hel");
+      expect(lastCall.slicedGraphemes).toEqual(["H", "e", "l"]);
+    });
+
+    it("should handle empty string", async () => {
+      const handleValueChange = vi.fn();
+      const { getByTestId, user } = setUp(
+        <TextFieldWithGraphemes defaultValue="Test" onValueChange={handleValueChange} />,
+      );
+      const input = getByTestId("input");
+
+      await user.clear(input);
+
+      expect(handleValueChange).toHaveBeenLastCalledWith({
+        value: "",
+        graphemes: [],
+        slicedValue: "",
+        slicedGraphemes: [],
+      });
+    });
+
+    it("should be called in both controlled and uncontrolled modes", async () => {
+      const handleUncontrolled = vi.fn();
+      const handleControlled = vi.fn();
+
+      function TestBothModes() {
+        const [controlledValue, setControlledValue] = React.useState("controlled");
+
+        return (
+          <>
+            <TextFieldWithGraphemes
+              defaultValue="uncontrolled"
+              onValueChange={handleUncontrolled}
+            />
+            <TextFieldWithGraphemes
+              value={controlledValue}
+              onValueChange={(values) => {
+                handleControlled(values);
+                setControlledValue(values.value);
+              }}
+            />
+          </>
+        );
+      }
+
+      const { getAllByTestId, user } = setUp(<TestBothModes />);
+      const [uncontrolledInput, controlledInput] = getAllByTestId("input");
+
+      await user.type(uncontrolledInput, "!");
+      await user.type(controlledInput, "!");
+
+      expect(handleUncontrolled).toHaveBeenCalled();
+      expect(handleControlled).toHaveBeenCalled();
+    });
+  });
+
+  describe("controlled vs uncontrolled", () => {
+    it("should maintain internal state in uncontrolled mode", async () => {
+      const { getByTestId, user } = setUp(<TextFieldWithGraphemes defaultValue="initial" />);
+      const input = getByTestId("input");
+
+      expect(input).toHaveValue("initial");
+
+      await user.clear(input);
+      await user.type(input, "changed");
+      expect(input).toHaveValue("changed");
+    });
+
+    it("should not update without onValueChange in controlled mode", async () => {
+      const { getByTestId, user } = setUp(<TextFieldWithGraphemes value="fixed" />);
+      const input = getByTestId("input");
+
+      expect(input).toHaveValue("fixed");
+
+      await user.type(input, "test");
+      expect(input).toHaveValue("fixed");
+    });
+  });
+
+  describe("edge cases", () => {
+    it("should handle very long text", () => {
+      const longText = "a".repeat(1000);
+      const { getByTestId } = setUp(
+        <TextFieldWithGraphemes defaultValue={longText} maxGraphemeCount={2000} />,
+      );
+      const counter = getByTestId("counter");
+
+      expect(counter).toHaveTextContent("1000/2000");
+    });
+
+    it("should handle special unicode characters", () => {
+      const { getByTestId } = setUp(
+        <TextFieldWithGraphemes defaultValue="👫🏼é🏳️‍🌈" maxGraphemeCount={2} />,
+      );
+      const counter = getByTestId("counter");
+
+      // 3 graphemes: family emoji, rainbow flag, é
+      expect(counter).toHaveTextContent("3/2");
+    });
+
+    it("should call onValueChange even when value doesn't change in controlled mode", async () => {
+      const handleValueChange = vi.fn();
+      const { getByTestId, user } = setUp(
+        <TextFieldWithGraphemes value="fixed" onValueChange={handleValueChange} />,
+      );
+      const input = getByTestId("input");
+
+      await user.type(input, "test");
+
+      expect(handleValueChange).toHaveBeenCalled();
+      expect(input).toHaveValue("fixed");
+    });
+  });
+});

package/src/components/TextField/useTextFieldWithGraphemes.ts

@@ -0,0 +1,65 @@
+import { useState, useMemo, useCallback } from "react";
+import { splitGraphemes } from "unicode-segmenter/grapheme";
+import { memoize } from "./memoize";
+
+export interface UseTextFieldWithGraphemesParams {
+  maxGraphemeCount?: number;
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (values: {
+    value: string;
+    graphemes: string[];
+    slicedValue: string;
+    slicedGraphemes: string[];
+  }) => void;
+}
+
+const getGraphemes = (string: string) => Array.from(splitGraphemes(string));
+const memoizedGetGraphemes = memoize(getGraphemes);
+
+export function useTextFieldWithGraphemes({
+  maxGraphemeCount,
+  value: controlledValue,
+  defaultValue = "",
+  onValueChange,
+}: UseTextFieldWithGraphemesParams) {
+  const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+  const isControlled = controlledValue !== undefined;
+  const value = isControlled ? controlledValue : uncontrolledValue;
+
+  const graphemes = useMemo(() => memoizedGetGraphemes(value), [value]);
+
+  const handleValueChange = useCallback(
+    (newValue: string) => {
+      const newGraphemes = memoizedGetGraphemes(newValue);
+      const newSlicedGraphemes =
+        maxGraphemeCount === undefined ? newGraphemes : newGraphemes.slice(0, maxGraphemeCount);
+      const newSlicedValue = newSlicedGraphemes.join("");
+
+      // Update internal state if uncontrolled
+      if (!isControlled) {
+        setUncontrolledValue(newValue);
+      }
+
+      onValueChange?.({
+        value: newValue,
+        graphemes: newGraphemes,
+        slicedValue: newSlicedValue,
+        slicedGraphemes: newSlicedGraphemes,
+      });
+    },
+    [isControlled, maxGraphemeCount, onValueChange],
+  );
+
+  return {
+    textFieldRootProps: {
+      value,
+      onValueChange: handleValueChange,
+    },
+    counterProps: {
+      current: graphemes.length,
+      max: maxGraphemeCount ?? 0,
+    },
+    graphemes,
+  };
+}

package/src/components/index.ts

@@ -21,6 +21,8 @@ export * from "./Divider";
 export * from "./ExtendedActionSheet";
 export * from "./ExtendedFab";
 export * from "./Fab";
+export * from "./Field";
+export * from "./FieldButton";
 export * from "./Flex";
 export * from "./Float";
 export * from "./FloatingActionButton";
@@ -46,6 +48,7 @@ export * from "./ResponsivePair";
 export * from "./SegmentedControl";
 export * from "./SelectBox";
 export * from "./Skeleton";
+export * from "./Slider";
 export * from "./Snackbar";
 export * from "./Stack";
 export * from "./Switch";

package/src/primitive.ts

@@ -5,6 +5,7 @@ export * from "@seed-design/react-popover";
 export * from "@seed-design/react-progress";
 export * from "@seed-design/react-pull-to-refresh";
 export * from "@seed-design/react-radio-group";
+export * from "@seed-design/react-slider";
 export * from "@seed-design/react-snackbar";
 export * from "@seed-design/react-switch";
 export * from "@seed-design/react-tabs";

package/src/utils/createWithStateProps.tsx

@@ -2,19 +2,24 @@ import { forwardRef } from "react";
 
 type AtLeastOne<T> = [T, ...T[]];
 
-export function createWithStateProps(
-  useContexts: AtLeastOne<
-    (prop?: { strict?: boolean }) => { stateProps: React.HTMLAttributes<HTMLElement> } | null
-  >,
-  options?: { strict?: boolean },
-) {
-  const strict = options?.strict ?? true;
+type ContextHook = (prop?: {
+  strict?: boolean;
+}) => { stateProps: React.HTMLAttributes<HTMLElement> } | null;
 
+type ContextConfig = ContextHook | { useContext: ContextHook; strict?: boolean };
+
+export function createWithStateProps(useContexts: AtLeastOne<ContextConfig>) {
   return function withStateProps<P, R>(Component: React.ComponentType<P & React.RefAttributes<R>>) {
     const Node = forwardRef<R, P>((props, ref) => {
       const stateProps = {};
-      for (const useContext of useContexts) {
-        Object.assign(stateProps, useContext({ strict })?.stateProps);
+
+      for (const contextConfig of useContexts) {
+        if (typeof contextConfig === "function") {
+          Object.assign(stateProps, contextConfig({ strict: true })?.stateProps);
+        } else {
+          const { useContext, strict = false } = contextConfig;
+          Object.assign(stateProps, useContext({ strict })?.stateProps);
+        }
       }
 
       // @ts-ignore

package/lib/components/List/ListHeader.namespace.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=ListHeader.namespace.d.ts.map

package/lib/components/List/ListHeader.namespace.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ListHeader.namespace.d.ts","sourceRoot":"","sources":["../../../src/components/List/ListHeader.namespace.ts"],"names":[],"mappings":""}