@seed-design/react 0.0.0-alpha-20260324091316

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

@@ -0,0 +1,306 @@
+import { render } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, mock } from "bun:test";
+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";
+
+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", () => {
+    type ValueChangeParams = {
+      value: string;
+      graphemes: string[];
+      slicedValue: string;
+      slicedGraphemes: string[];
+    };
+
+    it("should call onValueChange with correct parameters", async () => {
+      const handleValueChange = mock<(params: ValueChangeParams) => void>(() => {});
+      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 = mock<(params: ValueChangeParams) => void>(() => {});
+      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];
+      if (!lastCall) throw new Error("Expected lastCall to be defined");
+
+      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 = mock(() => {});
+      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 = mock<(params: ValueChangeParams) => void>(() => {});
+      const handleControlled = mock<(params: ValueChangeParams) => void>(() => {});
+
+      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 = mock(() => {});
+      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/ToggleButton/ToggleButton.tsx

@@ -0,0 +1,36 @@
+import {
+  toggleButton,
+  type ToggleButtonVariantProps,
+} from "@seed-design/css/recipes/toggle-button";
+import { Toggle as TogglePrimitive } from "@seed-design/react-toggle";
+import clsx from "clsx";
+import * as React from "react";
+import {
+  PendingButtonProvider,
+  usePendingButton,
+  type UsePendingButtonProps,
+} from "../LoadingIndicator/usePendingButton";
+
+export interface ToggleButtonProps
+  extends ToggleButtonVariantProps,
+    UsePendingButtonProps,
+    TogglePrimitive.RootProps {}
+
+export const ToggleButton = React.forwardRef<HTMLButtonElement, ToggleButtonProps>(
+  ({ variant = "brandSolid", size = "small", loading = false, className, ...otherProps }, ref) => {
+    const recipeClassName = toggleButton({ variant, size });
+    const api = usePendingButton({ loading, disabled: otherProps.disabled });
+
+    return (
+      <PendingButtonProvider value={api}>
+        <TogglePrimitive.Root
+          ref={ref}
+          className={clsx(recipeClassName, className)}
+          {...api.stateProps}
+          {...otherProps}
+        />
+      </PendingButtonProvider>
+    );
+  },
+);
+ToggleButton.displayName = "ToggleButton";

package/src/components/ToggleButton/index.ts

@@ -0,0 +1,4 @@
+export {
+  ToggleButton,
+  type ToggleButtonProps,
+} from "./ToggleButton";

package/src/components/VisuallyHidden/VisuallyHidden.tsx

@@ -0,0 +1,11 @@
+import { visuallyHidden } from "@seed-design/dom-utils";
+import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
+import type * as React from "react";
+import { forwardRef } from "react";
+
+export interface VisuallyHiddenProps extends PrimitiveProps, React.HTMLAttributes<HTMLDivElement> {}
+
+export const VisuallyHidden = forwardRef<HTMLDivElement, VisuallyHiddenProps>((props, ref) => {
+  const { style, ...otherProps } = props;
+  return <Primitive.div ref={ref} style={{ ...visuallyHidden, ...style }} {...otherProps} />;
+});

package/src/components/VisuallyHidden/index.ts

@@ -0,0 +1 @@
+export { VisuallyHidden, type VisuallyHiddenProps } from "./VisuallyHidden";

package/src/components/index.ts

@@ -0,0 +1,68 @@
+export * from "./ActionButton";
+export * from "./ActionChip";
+export * from "./ActionSheet";
+export * from "./Article";
+export * from "./AspectRatio";
+export * from "./Avatar";
+export * from "./Badge";
+export * from "./BottomSheet";
+export * from "./Box";
+export * from "./Callout";
+export * from "./Celsius";
+export * from "./Checkbox";
+export * from "./Chip";
+export * from "./ChipTabs";
+export * from "./Columns";
+export * from "./ConsistentWidth";
+export * from "./ContentPlaceholder";
+export * from "./ContextualFloatingButton";
+export * from "./ControlChip";
+export * from "./Count";
+export * from "./Dialog";
+export * from "./Divider";
+export * from "./ExtendedActionSheet";
+export * from "./ExtendedFab";
+export * from "./Fab";
+export * from "./Field";
+export * from "./FieldButton";
+export * from "./Fieldset";
+export * from "./Flex";
+export * from "./Float";
+export * from "./FloatingActionButton";
+export * from "./Grid";
+export * from "./GridItem";
+export * from "./HelpBubble";
+export * from "./Icon";
+export * from "./IdentityPlaceholder";
+export * from "./ImageFrame";
+export * from "./Inline";
+export * from "./InlineBanner";
+export * from "./LinkContent";
+export * from "./List";
+export * from "./LoadingIndicator";
+export * from "./MannerTemp";
+export * from "./MannerTempBadge";
+export * from "./MenuSheet";
+export * from "./NotificationBadge";
+export * from "./PageBanner";
+export * from "./Portal";
+export * from "./ProgressCircle";
+export * from "./PullToRefresh";
+export * from "./RadioGroup";
+export * from "./RadioGroupField";
+export * from "./ReactionButton";
+export * from "./ResponsivePair";
+export * from "./ScrollFog";
+export * from "./SegmentedControl";
+export * from "./SelectBox";
+export * from "./Skeleton";
+export * from "./Slider";
+export * from "./Snackbar";
+export * from "./Stack";
+export * from "./Switch";
+export * from "./Tabs";
+export * from "./TagGroup";
+export * from "./Text";
+export * from "./TextField";
+export * from "./ToggleButton";
+export * from "./VisuallyHidden";

package/src/components/private/Icon.tsx

@@ -0,0 +1,16 @@
+import { Slot } from "@radix-ui/react-slot";
+import { forwardRef } from "react";
+
+export interface InternalIconProps {
+  svg: React.ReactNode;
+}
+
+export const InternalIcon = forwardRef<SVGSVGElement, InternalIconProps>(
+  ({ svg, ...otherProps }, ref) => {
+    return (
+      <Slot ref={ref as React.ForwardedRef<HTMLElement>} aria-hidden {...otherProps}>
+        {svg}
+      </Slot>
+    );
+  },
+);

package/src/components/private/useDismissible.tsx

@@ -0,0 +1,86 @@
+import { useControllableState } from "@radix-ui/react-use-controllable-state";
+import { buttonProps, elementProps, mergeProps } from "@seed-design/dom-utils";
+import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
+import * as React from "react";
+
+export interface UseDismissibleProps {
+  defaultOpen?: boolean;
+  open?: boolean;
+  onDismiss?: () => void;
+}
+
+export type UseDismissibleReturn = ReturnType<typeof useDismissible>;
+
+export function useDismissible(props: UseDismissibleProps) {
+  const [open = true, setOpen] = useControllableState({
+    prop: props.open,
+    defaultProp: props.defaultOpen,
+    onChange: (open) => {
+      if (!open) {
+        props.onDismiss?.();
+      }
+    },
+  });
+
+  const dismiss = React.useCallback(() => setOpen(false), [setOpen]);
+
+  return {
+    open,
+    dismiss,
+
+    rootProps: elementProps({}),
+
+    dismissButtonProps: buttonProps({
+      onClick: (e) => {
+        if (e.defaultPrevented) return;
+
+        dismiss();
+      },
+    }),
+  };
+}
+
+const DismissibleContext = React.createContext<ReturnType<typeof useDismissible> | null>(null);
+
+export const DismissibleProvider = DismissibleContext.Provider;
+
+export const useDismissibleContext = () => {
+  const context = React.useContext(DismissibleContext);
+  if (context === null) {
+    throw new Error("useDismissibleContext should be used within DismissibleProvider");
+  }
+
+  return context;
+};
+
+export interface DismissibleRootProps
+  extends PrimitiveProps,
+    UseDismissibleProps,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+export const DismissibleRoot = React.forwardRef<HTMLDivElement, DismissibleRootProps>(
+  ({ defaultOpen, open, onDismiss, ...otherProps }, ref) => {
+    const api = useDismissible({ defaultOpen, open, onDismiss });
+
+    if (!api.open) return null;
+
+    return (
+      <DismissibleProvider value={api}>
+        <Primitive.div ref={ref} {...otherProps} />
+      </DismissibleProvider>
+    );
+  },
+);
+
+export interface DismissibleCloseButtonProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLButtonElement> {}
+
+export const DismissibleCloseButton = React.forwardRef<
+  HTMLButtonElement,
+  DismissibleCloseButtonProps
+>((props, ref) => {
+  const { dismissButtonProps } = useDismissibleContext();
+
+  return <Primitive.button ref={ref} {...mergeProps(dismissButtonProps, props)} />;
+});

package/src/hooks/useBreakpoint.test.tsx

@@ -0,0 +1,94 @@
+import { act, renderHook } from "@testing-library/react";
+import { beforeEach, describe, expect, it, mock } from "bun:test";
+import type * as React from "react";
+
+import { BreakpointProvider } from "../providers/BreakpointProvider";
+import { useBreakpoint } from "./useBreakpoint";
+
+type ChangeHandler = (e: { matches: boolean }) => void;
+
+let currentWidth = 0;
+const entries = new Map<string, { minWidth: number; handlers: Set<ChangeHandler> }>();
+
+function mockMatchMedia(query: string) {
+  const match = query.match(/min-width:\s*(\d+)px/);
+  const minWidth = match ? Number(match[1]) : 0;
+  const entry = entries.get(query) ?? { minWidth, handlers: new Set<ChangeHandler>() };
+  entries.set(query, entry);
+  return {
+    get matches() {
+      return currentWidth >= entry.minWidth;
+    },
+    media: query,
+    addEventListener(_: string, handler: ChangeHandler) {
+      entry.handlers.add(handler);
+    },
+    removeEventListener(_: string, handler: ChangeHandler) {
+      entry.handlers.delete(handler);
+    },
+    onchange: null,
+    addListener: mock(),
+    removeListener: mock(),
+    dispatchEvent: () => false,
+  };
+}
+
+function setViewport(minWidthPx: number) {
+  currentWidth = minWidthPx;
+  for (const [, entry] of entries) {
+    const nowMatches = currentWidth >= entry.minWidth;
+    for (const handler of entry.handlers) {
+      handler({ matches: nowMatches });
+    }
+  }
+}
+
+beforeEach(() => {
+  currentWidth = 0;
+  entries.clear();
+  window.matchMedia = mockMatchMedia as unknown as typeof window.matchMedia;
+});
+
+describe("useBreakpoint", () => {
+  it("returns 'base' when no media query matches", () => {
+    const { result } = renderHook(() => useBreakpoint());
+    expect(result.current).toBe("base");
+  });
+
+  it("returns 'md' when viewport is 768px", () => {
+    currentWidth = 768;
+    const { result } = renderHook(() => useBreakpoint());
+    expect(result.current).toBe("md");
+  });
+
+  it("returns the largest matching breakpoint", () => {
+    currentWidth = 1440;
+    const { result } = renderHook(() => useBreakpoint());
+    expect(result.current).toBe("xl");
+  });
+
+  it("updates when viewport changes", () => {
+    const { result } = renderHook(() => useBreakpoint());
+    expect(result.current).toBe("base");
+
+    act(() => setViewport(768));
+    expect(result.current).toBe("md");
+
+    act(() => setViewport(1280));
+    expect(result.current).toBe("lg");
+  });
+
+  it("respects defaultBreakpoint option", () => {
+    const { result } = renderHook(() => useBreakpoint({ defaultBreakpoint: "lg" }));
+    expect(result.current).toBe("base");
+  });
+
+  it("uses BreakpointProvider context when wrapped", () => {
+    currentWidth = 768;
+    const wrapper = ({ children }: { children: React.ReactNode }) => (
+      <BreakpointProvider>{children}</BreakpointProvider>
+    );
+    const { result } = renderHook(() => useBreakpoint(), { wrapper });
+    expect(result.current).toBe("md");
+  });
+});