@seed-design/lynx-react 0.2.0-alpha.2 → 0.2.0

package/src/components/BottomSheet/__tests__/BottomSheet.test.tsx

@@ -1,119 +0,0 @@
-import { fireEvent, render } from "@lynx-js/react/testing-library";
-import { beforeEach, describe, expect, it, vi } from "vitest";
-
-const sheetMocks = vi.hoisted(() => ({
-  contentProps: [] as Array<Record<string, unknown>>,
-  rootRef: {
-    open: vi.fn(),
-  },
-}));
-
-vi.mock("@lynx-js/lynx-ui-sheet", async () => {
-  const React = await vi.importActual<typeof import("@lynx-js/react")>("@lynx-js/react");
-
-  const SheetRoot = React.forwardRef<unknown, { children?: React.ReactNode }>((props, ref) => {
-    React.useImperativeHandle(ref, () => sheetMocks.rootRef);
-    return <>{props.children}</>;
-  });
-  SheetRoot.displayName = "MockSheetRoot";
-
-  const SheetView = React.forwardRef<unknown, { children?: React.ReactNode }>((props) => {
-    return <>{props.children}</>;
-  });
-  SheetView.displayName = "MockSheetView";
-
-  const SheetContent = React.forwardRef<unknown, Record<string, unknown>>((props) => {
-    sheetMocks.contentProps.push(props);
-    return <>{props.children as React.ReactNode}</>;
-  });
-  SheetContent.displayName = "MockSheetContent";
-
-  const passthrough = (displayName: string) => {
-    const Component = React.forwardRef<unknown, { children?: React.ReactNode }>((props) => {
-      return <>{props.children}</>;
-    });
-    Component.displayName = displayName;
-    return Component;
-  };
-
-  return {
-    SheetBackdrop: passthrough("MockSheetBackdrop"),
-    SheetContent,
-    SheetHandle: passthrough("MockSheetHandle"),
-    SheetRoot,
-    SheetView,
-  };
-});
-
-import * as BottomSheet from "../BottomSheet.namespace";
-
-describe("BottomSheet", () => {
-  beforeEach(() => {
-    sheetMocks.contentProps = [];
-    sheetMocks.rootRef.open.mockClear();
-  });
-
-  it("skips motion-engine animations when Root has skipAnimation", () => {
-    render(
-      <BottomSheet.Root skipAnimation>
-        <BottomSheet.Content />
-      </BottomSheet.Root>,
-    );
-
-    expect(sheetMocks.contentProps.at(-1)).toMatchObject({
-      snapAnimation: { type: "tween", duration: 0 },
-      enterAnimation: { type: "tween", duration: 0 },
-      exitAnimation: { type: "tween", duration: 0 },
-    });
-  });
-
-  it("preserves user-provided animations when Root has skipAnimation", () => {
-    const snapAnimation = { type: "tween", duration: 120 };
-    const enterAnimation = { type: "tween", duration: 140 };
-    const exitAnimation = { type: "tween", duration: 90 };
-
-    render(
-      <BottomSheet.Root skipAnimation>
-        <BottomSheet.Content
-          snapAnimation={snapAnimation}
-          enterAnimation={enterAnimation}
-          exitAnimation={exitAnimation}
-        />
-      </BottomSheet.Root>,
-    );
-
-    expect(sheetMocks.contentProps.at(-1)).toMatchObject({
-      snapAnimation,
-      enterAnimation,
-      exitAnimation,
-    });
-  });
-
-  it("opens with default animation when Root does not skip animation", () => {
-    const { getByText } = render(
-      <BottomSheet.Root>
-        <BottomSheet.Trigger>
-          <text>Open sheet</text>
-        </BottomSheet.Trigger>
-      </BottomSheet.Root>,
-    );
-
-    fireEvent.tap(getByText("Open sheet").parentElement!);
-
-    expect(sheetMocks.rootRef.open).toHaveBeenCalledWith();
-  });
-
-  it("opens without animation when Trigger is tapped inside a skipping Root", () => {
-    const { getByText } = render(
-      <BottomSheet.Root skipAnimation>
-        <BottomSheet.Trigger>
-          <text>Open sheet</text>
-        </BottomSheet.Trigger>
-      </BottomSheet.Root>,
-    );
-
-    fireEvent.tap(getByText("Open sheet").parentElement!);
-
-    expect(sheetMocks.rootRef.open).toHaveBeenCalledWith({ animate: false });
-  });
-});

package/src/components/__tests__/ProgressCircle.test.ts

@@ -1,33 +0,0 @@
-import { describe, expect, it } from "vitest";
-import { readFileSync } from "node:fs";
-import { dirname, join } from "node:path";
-import { fileURLToPath } from "node:url";
-
-const currentDir = dirname(fileURLToPath(import.meta.url));
-const progressCircleSource = readFileSync(
-  join(currentDir, "..", "ProgressCircle", "ProgressCircle.tsx"),
-  "utf8",
-);
-
-function readEffectDependencies(marker: string): string {
-  const markerIndex = progressCircleSource.indexOf(marker);
-  expect(markerIndex).toBeGreaterThanOrEqual(0);
-
-  const dependencyStart = progressCircleSource.indexOf("}, [", markerIndex);
-  expect(dependencyStart).toBeGreaterThanOrEqual(0);
-
-  const dependencyEnd = progressCircleSource.indexOf("]);", dependencyStart);
-  expect(dependencyEnd).toBeGreaterThanOrEqual(0);
-
-  return progressCircleSource.slice(dependencyStart, dependencyEnd);
-}
-
-describe("ProgressCircle", () => {
-  it("restarts indeterminate animation when size changes", () => {
-    expect(readEffectDependencies("runOnMainThread(startLoop)")).toContain("numSize");
-  });
-
-  it("restarts determinate transition when size changes", () => {
-    expect(readEffectDependencies("runOnMainThread(startAnimation)")).toContain("numSize");
-  });
-});

package/src/components/__tests__/exports.test.ts

@@ -1,38 +0,0 @@
-import { describe, expect, it } from "vitest";
-import { readFileSync } from "node:fs";
-import { dirname, join } from "node:path";
-import { fileURLToPath } from "node:url";
-
-const currentDir = dirname(fileURLToPath(import.meta.url));
-const componentsDir = join(currentDir, "..");
-
-function readComponentFile(componentName: string, fileName: string): string {
-  return readFileSync(join(componentsDir, componentName, fileName), "utf8");
-}
-
-describe("components public exports", () => {
-  it("exposes compound components through namespace exports", () => {
-    for (const componentName of ["Switch", "Checkbox", "RadioGroup", "TagGroup"]) {
-      expect(readComponentFile(componentName, "index.ts")).toContain(
-        `export * as ${componentName} from "./${componentName}.namespace";`,
-      );
-      expect(readComponentFile(componentName, `${componentName}.namespace.ts`)).toContain(
-        " as Root",
-      );
-    }
-  });
-
-  it("keeps ProgressCircle namespace usage while exposing flat slots", () => {
-    const index = readComponentFile("ProgressCircle", "index.ts");
-    const implementation = readComponentFile("ProgressCircle", "ProgressCircle.tsx");
-    const namespace = readComponentFile("ProgressCircle", "ProgressCircle.namespace.ts");
-
-    expect(index).toContain('export * as ProgressCircle from "./ProgressCircle.namespace";');
-    expect(index).toContain("ProgressCircleRoot");
-    expect(index).toContain("ProgressCircleRange");
-    expect(namespace).toContain("ProgressCircleRoot as Root");
-    expect(namespace).toContain("ProgressCircleRange as Range");
-    expect(implementation).toContain("export const ProgressCircleRoot");
-    expect(implementation).toContain("export const ProgressCircleRange");
-  });
-});

package/src/components/__tests__/switch.test.ts

@@ -1,34 +0,0 @@
-import { switchmark } from "@seed-design/lynx-css/recipes/switchmark";
-import { readFileSync } from "node:fs";
-import { dirname, join } from "node:path";
-import { fileURLToPath } from "node:url";
-import { describe, expect, it } from "vitest";
-
-const currentDir = dirname(fileURLToPath(import.meta.url));
-const lynxCssRecipesDir = join(currentDir, "..", "..", "..", "..", "lynx-css", "recipes");
-const switchCss = readFileSync(join(lynxCssRecipesDir, "switch.css"), "utf8");
-const switchmarkCss = readFileSync(join(lynxCssRecipesDir, "switchmark.css"), "utf8");
-
-describe("Switch", () => {
-  it.each(["16", "24", "32"] as const)(
-    "includes selected thumb class for size %s",
-    (size) => {
-      const classNames = switchmark({
-        tone: "brand",
-        size,
-        checked: true,
-        disabled: false,
-      });
-
-      expect(classNames.thumb.split(" ")).toContain(
-        `seed-switchmark__thumb--size_${size}-checked_true`,
-      );
-    },
-  );
-
-  it("aligns Lynx switch content with flex center instead of margin compensation", () => {
-    expect(switchCss).toContain("align-items: center");
-    expect(switchCss).not.toContain("--switchmark-margin-top");
-    expect(switchmarkCss).not.toContain("--switchmark-margin-top");
-  });
-});

package/src/hooks/use-icon-color.ts

@@ -1,51 +0,0 @@
-import { runOnMainThread, useEffect, useMainThreadRef } from "@lynx-js/react";
-import type { MainThread } from "@lynx-js/types";
-import type { DependencyList, RefObject } from "react";
-
-type IconElement = MainThread.Element & {
-  getComputedStyleProperty?: (name: string) => string;
-  getComputedCssProperty?: (name: string) => string;
-};
-
-// Lynx `<image>` 의 `tint-color` attribute 는 concrete color(hex/rgb) 만 받는다. CSS
-// `color: var(--seed-color-...)` 를 slot 에 걸면 `getComputedStyleProperty("color")` 가
-// resolved hex 를 돌려주므로 main-thread 에서 한번 읽어 `tint-color` 로 mirror 한다.
-function syncTintColor(ref: RefObject<IconElement>) {
-  "main thread";
-
-  const el = ref.current;
-  if (!el) return;
-
-  let color: string | undefined;
-  if (typeof el.getComputedStyleProperty === "function") {
-    color = el.getComputedStyleProperty("color");
-  } else if (typeof el.getComputedCssProperty === "function") {
-    color = el.getComputedCssProperty("color");
-  }
-
-  if (color) {
-    el.setAttribute("tint-color", color);
-  }
-}
-
-/**
- * Lynx `<image>` 의 tint color 를 recipe 의 CSS `color` 로부터 main-thread 에서 읽어
- * `tint-color` attribute 로 mirror. `deps` 가 바뀌면 재동기화.
- *
- * ```tsx
- * const { ref } = useIconColor([variant, disabled, loading]);
- * return cloneElement(iconChild, { ref });
- * ```
- */
-export function useIconColor(deps: DependencyList): {
-  ref: RefObject<MainThread.Element>;
-} {
-  const ref = useMainThreadRef<IconElement>(null);
-
-  // deps 는 caller 가 책임.
-  useEffect(() => {
-    runOnMainThread(syncTintColor)(ref);
-  }, deps);
-
-  return { ref };
-}

package/src/utils/__tests__/create-slot-recipe-context.test.tsx

@@ -1,228 +0,0 @@
-import { forwardRef } from "@lynx-js/react";
-import { render, renderHook } from "@lynx-js/react/testing-library";
-import { describe, expect, it } from "vitest";
-
-import { createSlotRecipeContext } from "../create-slot-recipe-context";
-
-type MockVariantProps = {
-  variant?: "a" | "b";
-};
-
-type MockClassnames = {
-  root: string;
-  label: string;
-};
-
-const mockSlotRecipe = Object.assign(
-  (props?: MockVariantProps): MockClassnames => ({
-    root: `root-${props?.variant ?? "a"}`,
-    label: `label-${props?.variant ?? "a"}`,
-  }),
-  {
-    splitVariantProps: <T extends MockVariantProps>(props: T) => {
-      const { variant, ...rest } = props;
-      return [{ variant }, rest] as [MockVariantProps, Omit<T, keyof MockVariantProps>];
-    },
-  },
-);
-
-type MockReceived = { props?: Record<string, unknown>; refValue?: unknown };
-
-function createMock(name: string) {
-  const received: MockReceived = {};
-  const Mock = forwardRef<{ tag: "mock" }, Record<string, unknown>>((props, ref) => {
-    received.props = props;
-    received.refValue = ref;
-    const { children } = props as { children?: unknown };
-    return <>{children as never}</>;
-  });
-  Mock.displayName = name;
-  return { Mock, received };
-}
-
-describe("createSlotRecipeContext", () => {
-  describe("useClassNames", () => {
-    it("throws when used outside a ClassNamesProvider", () => {
-      const { useClassNames } = createSlotRecipeContext(mockSlotRecipe);
-
-      expect(() => renderHook(() => useClassNames())).toThrow(
-        /useClassNames must be used within a ClassNamesProvider/,
-      );
-    });
-
-    it("returns the provided classnames inside ClassNamesProvider", () => {
-      const { useClassNames, ClassNamesProvider } = createSlotRecipeContext(mockSlotRecipe);
-      const value: MockClassnames = { root: "custom-root", label: "custom-label" };
-
-      const { result } = renderHook(() => useClassNames(), {
-        wrapper: ({ children }) => (
-          <ClassNamesProvider value={value}>{children}</ClassNamesProvider>
-        ),
-      });
-
-      expect(result.current).toEqual(value);
-    });
-  });
-
-  describe("useProps", () => {
-    it("returns null outside of PropsProvider", () => {
-      const { useProps } = createSlotRecipeContext(mockSlotRecipe);
-      const { result } = renderHook(() => useProps());
-
-      expect(result.current).toBeNull();
-    });
-
-    it("returns the provided value inside PropsProvider", () => {
-      const { useProps, PropsProvider } = createSlotRecipeContext(mockSlotRecipe);
-      const { result } = renderHook(() => useProps(), {
-        wrapper: ({ children }) => (
-          <PropsProvider value={{ variant: "b" }}>{children}</PropsProvider>
-        ),
-      });
-
-      expect(result.current).toEqual({ variant: "b" });
-    });
-  });
-
-  describe("withRootProvider", () => {
-    it("injects classnames into context without applying className on the root element", () => {
-      const { Mock: Root, received: rootReceived } = createMock("Root");
-      const { Mock: Child, received: childReceived } = createMock("Child");
-      const { withRootProvider, withContext } = createSlotRecipeContext(mockSlotRecipe);
-
-      const StyledRoot = withRootProvider<MockVariantProps>(Root);
-      const StyledLabel = withContext<{ tag: "mock" }, Record<string, unknown>>(Child, "label");
-
-      render(
-        <StyledRoot variant="b">
-          <StyledLabel />
-        </StyledRoot>,
-      );
-
-      expect(rootReceived.props).not.toHaveProperty("className");
-      expect(childReceived.props?.className).toBe("label-b");
-    });
-  });
-
-  describe("withProvider", () => {
-    it("applies slot className to the provider element and injects context", () => {
-      const { Mock: Root, received: rootReceived } = createMock("Root");
-      const { Mock: Child, received: childReceived } = createMock("Child");
-      const { withProvider, withContext } = createSlotRecipeContext(mockSlotRecipe);
-
-      const StyledRoot = withProvider<{ tag: "mock" }, MockVariantProps>(Root, "root");
-      const StyledLabel = withContext<{ tag: "mock" }, Record<string, unknown>>(Child, "label");
-
-      render(
-        <StyledRoot variant="a">
-          <StyledLabel />
-        </StyledRoot>,
-      );
-
-      expect(rootReceived.props?.className).toBe("root-a");
-      expect(childReceived.props?.className).toBe("label-a");
-    });
-
-    it("merges user-provided className with the slot className", () => {
-      const { Mock: Root, received: rootReceived } = createMock("Root");
-      const { withProvider } = createSlotRecipeContext(mockSlotRecipe);
-      type StyledProps = MockVariantProps & { className?: string };
-      const StyledRoot = withProvider<{ tag: "mock" }, StyledProps>(Root, "root");
-
-      render(<StyledRoot variant="a" className="extra" />);
-
-      expect(rootReceived.props?.className).toBe("root-a extra");
-    });
-
-    it("forwards the ref to the provider element", () => {
-      const { Mock: Root, received } = createMock("Root");
-      const { withProvider } = createSlotRecipeContext(mockSlotRecipe);
-      const StyledRoot = withProvider<{ tag: "mock" }, MockVariantProps>(Root, "root");
-      const refFn = (node: { tag: "mock" } | null) => {
-        received.refValue = node;
-      };
-
-      render(<StyledRoot ref={refFn} variant="a" />);
-
-      expect(received.refValue).toBe(refFn);
-    });
-
-    it("prefers innerProps over PropsProvider and defaultProps", () => {
-      const { Mock: Root, received } = createMock("Root");
-      const { withProvider, PropsProvider } = createSlotRecipeContext(mockSlotRecipe);
-      const StyledRoot = withProvider<{ tag: "mock" }, MockVariantProps>(Root, "root", {
-        defaultProps: { variant: "a" },
-      });
-
-      render(
-        <PropsProvider value={{ variant: "a" }}>
-          <StyledRoot variant="b" />
-        </PropsProvider>,
-      );
-
-      expect(received.props?.className).toBe("root-b");
-    });
-  });
-
-  describe("withContext", () => {
-    it("reads slot className from ClassNamesProvider", () => {
-      const { Mock: Label, received } = createMock("Label");
-      const { ClassNamesProvider, withContext } = createSlotRecipeContext(mockSlotRecipe);
-      const StyledLabel = withContext<{ tag: "mock" }, Record<string, unknown>>(Label, "label");
-      const classNames: MockClassnames = { root: "r", label: "custom-label" };
-
-      render(
-        <ClassNamesProvider value={classNames}>
-          <StyledLabel />
-        </ClassNamesProvider>,
-      );
-
-      expect(received.props?.className).toBe("custom-label");
-    });
-
-    it("merges user-provided className with slot className", () => {
-      const { Mock: Label, received } = createMock("Label");
-      const { ClassNamesProvider, withContext } = createSlotRecipeContext(mockSlotRecipe);
-      type StyledProps = { className?: string };
-      const StyledLabel = withContext<{ tag: "mock" }, StyledProps>(Label, "label");
-
-      render(
-        <ClassNamesProvider value={{ root: "r", label: "l" }}>
-          <StyledLabel className="extra" />
-        </ClassNamesProvider>,
-      );
-
-      expect(received.props?.className).toBe("l extra");
-    });
-
-    it("passes through native props like data attributes", () => {
-      const { Mock: Label, received } = createMock("Label");
-      const { ClassNamesProvider, withContext } = createSlotRecipeContext(mockSlotRecipe);
-      type StyledProps = { "data-testid"?: string };
-      const StyledLabel = withContext<{ tag: "mock" }, StyledProps>(Label, "label");
-
-      render(
-        <ClassNamesProvider value={{ root: "r", label: "l" }}>
-          <StyledLabel data-testid="hello" />
-        </ClassNamesProvider>,
-      );
-
-      expect(received.props?.["data-testid"]).toBe("hello");
-    });
-
-    it("renders without a slot className when slot argument is omitted", () => {
-      const { Mock: Label, received } = createMock("Label");
-      const { ClassNamesProvider, withContext } = createSlotRecipeContext(mockSlotRecipe);
-      const StyledLabel = withContext<{ tag: "mock" }, Record<string, unknown>>(Label);
-
-      render(
-        <ClassNamesProvider value={{ root: "r", label: "l" }}>
-          <StyledLabel />
-        </ClassNamesProvider>,
-      );
-
-      // clsx(undefined, undefined) → ""
-      expect(received.props?.className).toBe("");
-    });
-  });
-});