@seed-design/react 2.6.0 → 3.0.0

package/src/components/ExtendedActionSheet/ExtendedActionSheet.tsx

@@ -1,220 +0,0 @@
-import { Dialog as DialogPrimitive, useDialogContext } from "@seed-design/react-dialog";
-import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
-import {
-  extendedActionSheet,
-  type ExtendedActionSheetVariantProps,
-} from "@seed-design/css/recipes/extended-action-sheet";
-import {
-  extendedActionSheetItem,
-  type ExtendedActionSheetItemVariantProps,
-} from "@seed-design/css/recipes/extended-action-sheet-item";
-import type * as React from "react";
-import { createRecipeContext } from "../../utils/createRecipeContext";
-import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
-import { createWithStateProps } from "../../utils/createWithStateProps";
-
-const { withRootProvider, withContext } = createSlotRecipeContext(extendedActionSheet);
-const { withContext: withItemContext } = createRecipeContext(extendedActionSheetItem);
-const withStateProps = createWithStateProps([useDialogContext]);
-
-////////////////////////////////////////////////////////////////////////////////////
-
-/**
- * @deprecated Use `SwipeableMenuSheet` instead.
- */
-export interface ExtendedActionSheetRootProps
-  extends ExtendedActionSheetVariantProps,
-    DialogPrimitive.RootProps {
-  /**
-   * @default true
-   */
-  lazyMount?: DialogPrimitive.RootProps["lazyMount"];
-  /**
-   * @default true
-   */
-  unmountOnExit?: DialogPrimitive.RootProps["unmountOnExit"];
-}
-
-/**
- * @deprecated Use `SwipeableMenuSheet` instead.
- */
-export const ExtendedActionSheetRoot = withRootProvider<ExtendedActionSheetRootProps>(
-  DialogPrimitive.Root,
-  {
-    defaultProps: {
-      lazyMount: true,
-      unmountOnExit: true,
-    },
-  },
-);
-
-////////////////////////////////////////////////////////////////////////////////////
-
-/**
- * @deprecated Use `SwipeableMenuSheet` instead.
- */
-export interface ExtendedActionSheetTriggerProps extends DialogPrimitive.TriggerProps {}
-
-/**
- * @deprecated Use `SwipeableMenuSheet` instead.
- */
-export const ExtendedActionSheetTrigger = DialogPrimitive.Trigger;
-
-////////////////////////////////////////////////////////////////////////////////////
-
-/**
- * @deprecated Use `SwipeableMenuSheet` instead.
- */
-export interface ExtendedActionSheetPositionerProps extends DialogPrimitive.PositionerProps {}
-
-/**
- * @deprecated Use `SwipeableMenuSheet` instead.
- */
-export const ExtendedActionSheetPositioner = withContext<
-  HTMLDivElement,
-  ExtendedActionSheetPositionerProps
->(DialogPrimitive.Positioner, "positioner");
-
-////////////////////////////////////////////////////////////////////////////////////
-
-/**
- * @deprecated Use `SwipeableMenuSheet` instead.
- */
-export interface ExtendedActionSheetBackdropProps extends DialogPrimitive.BackdropProps {}
-
-/**
- * @deprecated Use `SwipeableMenuSheet` instead.
- */
-export const ExtendedActionSheetBackdrop = withContext<
-  HTMLDivElement,
-  ExtendedActionSheetBackdropProps
->(DialogPrimitive.Backdrop, "backdrop");
-
-////////////////////////////////////////////////////////////////////////////////////
-
-/**
- * @deprecated Use `SwipeableMenuSheet` instead.
- */
-export interface ExtendedActionSheetContentProps extends DialogPrimitive.ContentProps {}
-
-/**
- * @deprecated Use `SwipeableMenuSheet` instead.
- */
-export const ExtendedActionSheetContent = withContext<
-  HTMLDivElement,
-  ExtendedActionSheetContentProps
->(DialogPrimitive.Content, "content");
-
-////////////////////////////////////////////////////////////////////////////////////
-
-/**
- * @deprecated Use `SwipeableMenuSheet` instead.
- */
-export interface ExtendedActionSheetHeaderProps
-  extends PrimitiveProps,
-    React.HTMLAttributes<HTMLDivElement> {}
-
-/**
- * @deprecated Use `SwipeableMenuSheet` instead.
- */
-export const ExtendedActionSheetHeader = withContext<
-  HTMLDivElement,
-  ExtendedActionSheetHeaderProps
->(withStateProps(Primitive.div), "header");
-
-////////////////////////////////////////////////////////////////////////////////////
-
-/**
- * @deprecated Use `SwipeableMenuSheet` instead.
- */
-export interface ExtendedActionSheetTitleProps extends DialogPrimitive.TitleProps {}
-
-/**
- * @deprecated Use `SwipeableMenuSheet` instead.
- */
-export const ExtendedActionSheetTitle = withContext<
-  HTMLHeadingElement,
-  ExtendedActionSheetTitleProps
->(withStateProps(Primitive.h2), "title");
-
-////////////////////////////////////////////////////////////////////////////////////
-
-/**
- * @deprecated Use `SwipeableMenuSheet` instead.
- */
-export interface ExtendedActionSheetListProps
-  extends PrimitiveProps,
-    React.HTMLAttributes<HTMLDivElement> {}
-
-/**
- * @deprecated Use `SwipeableMenuSheet` instead.
- */
-export const ExtendedActionSheetList = withContext<HTMLDivElement, ExtendedActionSheetListProps>(
-  withStateProps(Primitive.div),
-  "list",
-);
-
-////////////////////////////////////////////////////////////////////////////////////
-
-/**
- * @deprecated Use `SwipeableMenuSheet` instead.
- */
-export interface ExtendedActionSheetGroupProps extends React.HTMLAttributes<HTMLDivElement> {}
-
-/**
- * @deprecated Use `SwipeableMenuSheet` instead.
- */
-export const ExtendedActionSheetGroup = withContext<HTMLDivElement, ExtendedActionSheetGroupProps>(
-  withStateProps(Primitive.div),
-  "group",
-);
-
-////////////////////////////////////////////////////////////////////////////////////
-
-/**
- * @deprecated Use `SwipeableMenuSheet` instead.
- */
-export interface ExtendedActionSheetItemProps
-  extends PrimitiveProps,
-    ExtendedActionSheetItemVariantProps,
-    React.HTMLAttributes<HTMLButtonElement> {}
-
-/**
- * @deprecated Use `SwipeableMenuSheet` instead.
- */
-export const ExtendedActionSheetItem = withItemContext<
-  HTMLButtonElement,
-  ExtendedActionSheetItemProps
->(withStateProps(Primitive.button));
-
-////////////////////////////////////////////////////////////////////////////////////
-
-/**
- * @deprecated Use `SwipeableMenuSheet` instead.
- */
-export interface ExtendedActionSheetFooterProps
-  extends PrimitiveProps,
-    React.HTMLAttributes<HTMLDivElement> {}
-
-/**
- * @deprecated Use `SwipeableMenuSheet` instead.
- */
-export const ExtendedActionSheetFooter = withContext<
-  HTMLDivElement,
-  ExtendedActionSheetFooterProps
->(withStateProps(Primitive.div), "footer");
-
-////////////////////////////////////////////////////////////////////////////////////
-
-/**
- * @deprecated Use `SwipeableMenuSheet` instead.
- */
-export interface ExtendedActionSheetCloseButtonProps extends DialogPrimitive.CloseButtonProps {}
-
-/**
- * @deprecated Use `SwipeableMenuSheet` instead.
- */
-export const ExtendedActionSheetCloseButton = withContext<
-  HTMLDivElement,
-  ExtendedActionSheetCloseButtonProps
->(DialogPrimitive.CloseButton, "closeButton");

package/src/components/ExtendedActionSheet/index.ts

@@ -1,28 +0,0 @@
-export {
-  ExtendedActionSheetBackdrop,
-  ExtendedActionSheetPositioner,
-  ExtendedActionSheetContent,
-  ExtendedActionSheetFooter,
-  ExtendedActionSheetHeader,
-  ExtendedActionSheetRoot,
-  ExtendedActionSheetTitle,
-  ExtendedActionSheetTrigger,
-  ExtendedActionSheetList,
-  ExtendedActionSheetGroup,
-  ExtendedActionSheetItem,
-  ExtendedActionSheetCloseButton,
-  type ExtendedActionSheetBackdropProps,
-  type ExtendedActionSheetPositionerProps,
-  type ExtendedActionSheetContentProps,
-  type ExtendedActionSheetFooterProps,
-  type ExtendedActionSheetHeaderProps,
-  type ExtendedActionSheetRootProps,
-  type ExtendedActionSheetTitleProps,
-  type ExtendedActionSheetTriggerProps,
-  type ExtendedActionSheetListProps,
-  type ExtendedActionSheetGroupProps,
-  type ExtendedActionSheetItemProps,
-  type ExtendedActionSheetCloseButtonProps,
-} from "./ExtendedActionSheet";
-
-export * as ExtendedActionSheet from "./ExtendedActionSheet.namespace";

package/src/components/ExtendedFab/ExtendedFab.tsx

@@ -1,25 +0,0 @@
-import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
-import { extendedFab, type ExtendedFabVariantProps } from "@seed-design/css/recipes/extended-fab";
-import { createRecipeContext } from "../../utils/createRecipeContext";
-
-const { withContext } = createRecipeContext(extendedFab);
-
-////////////////////////////////////////////////////////////////////////////////////
-
-/**
- * @deprecated Use `ContextualFloatingButton` instead.
- */
-export interface ExtendedFabProps
-  extends ExtendedFabVariantProps,
-    PrimitiveProps,
-    React.ButtonHTMLAttributes<HTMLButtonElement> {}
-
-/**
- * @deprecated Use `ContextualFloatingButton` instead.
- */
-export const ExtendedFab = withContext<HTMLButtonElement, ExtendedFabProps>(Primitive.button, {
-  defaultProps: {
-    variant: "neutralSolid",
-    size: "medium",
-  },
-});

package/src/components/ExtendedFab/index.ts

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

package/src/components/Fab/Fab.tsx

@@ -1,21 +0,0 @@
-import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
-import { fab, type FabVariantProps } from "@seed-design/css/recipes/fab";
-import type * as React from "react";
-import { createRecipeContext } from "../../utils/createRecipeContext";
-
-const { withContext } = createRecipeContext(fab);
-
-////////////////////////////////////////////////////////////////////////////////////
-
-/**
- * @deprecated Use `ContextualFloatingButton` instead.
- */
-export interface FabProps
-  extends FabVariantProps,
-    PrimitiveProps,
-    React.ButtonHTMLAttributes<HTMLButtonElement> {}
-
-/**
- * @deprecated Use `ContextualFloatingButton` instead.
- */
-export const Fab = withContext<HTMLButtonElement, FabProps>(Primitive.button);

package/src/components/Fab/index.ts

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

package/src/components/Inline/Inline.tsx

@@ -1,25 +0,0 @@
-import * as React from "react";
-import type { DistributiveOmit } from "../../utils/styled";
-import { Box, type BoxProps } from "../Box/Box";
-
-/**
- * @deprecated Use `HStack` instead.
- */
-export type InlineProps = DistributiveOmit<BoxProps, "display" | "direction" | "flexWrap">;
-
-/**
- * @deprecated Use `HStack` instead.
- */
-export const Inline = React.forwardRef<HTMLDivElement, InlineProps>((props, ref) => {
-  return (
-    <Box
-      ref={ref}
-      display="flex"
-      flexDirection="row"
-      flexWrap="wrap"
-      alignItems="flex-start"
-      justifyContent="flex-start"
-      {...props}
-    />
-  );
-});

package/src/components/Inline/index.ts

@@ -1 +0,0 @@
-export { Inline, type InlineProps } from "./Inline";

package/src/components/InlineBanner/InlineBanner.namespace.ts

@@ -1,14 +0,0 @@
-export {
-  InlineBannerCloseButton as CloseButton,
-  InlineBannerContent as Content,
-  InlineBannerDescription as Description,
-  InlineBannerLink as Link,
-  InlineBannerRoot as Root,
-  InlineBannerTitle as Title,
-  type InlineBannerCloseButtonProps as CloseButtonProps,
-  type InlineBannerContentProps as ContentProps,
-  type InlineBannerDescriptionProps as DescriptionProps,
-  type InlineBannerLinkProps as LinkProps,
-  type InlineBannerRootProps as RootProps,
-  type InlineBannerTitleProps as TitleProps,
-} from "./InlineBanner";

package/src/components/InlineBanner/InlineBanner.tsx

@@ -1,103 +0,0 @@
-import type * as React from "react";
-
-import {
-  inlineBanner,
-  type InlineBannerVariantProps,
-} from "@seed-design/css/recipes/inline-banner";
-import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
-import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
-import {
-  DismissibleCloseButton,
-  DismissibleRoot,
-  type DismissibleRootProps,
-} from "../private/useDismissible";
-
-const { withContext, withProvider } = createSlotRecipeContext(inlineBanner);
-
-/**
- * @deprecated Use `PageBanner` instead.
- */
-export interface InlineBannerRootProps extends InlineBannerVariantProps, DismissibleRootProps {}
-
-/**
- * @deprecated Use `PageBanner` instead.
- */
-export const InlineBannerRoot = withProvider<HTMLDivElement, InlineBannerRootProps>(
-  DismissibleRoot,
-  "root",
-);
-
-/**
- * @deprecated Use `PageBanner` instead.
- */
-export interface InlineBannerContentProps
-  extends PrimitiveProps,
-    React.HTMLAttributes<HTMLDivElement> {}
-
-/**
- * @deprecated Use `PageBanner` instead.
- */
-export const InlineBannerContent = withContext<HTMLDivElement, InlineBannerContentProps>(
-  Primitive.div,
-  "content",
-);
-
-/**
- * @deprecated Use `PageBanner` instead.
- */
-export interface InlineBannerTitleProps
-  extends PrimitiveProps,
-    React.HTMLAttributes<HTMLSpanElement> {}
-
-/**
- * @deprecated Use `PageBanner` instead.
- */
-export const InlineBannerTitle = withContext<HTMLSpanElement, InlineBannerTitleProps>(
-  Primitive.span,
-  "title",
-);
-
-/**
- * @deprecated Use `PageBanner` instead.
- */
-export interface InlineBannerDescriptionProps
-  extends PrimitiveProps,
-    React.HTMLAttributes<HTMLSpanElement> {}
-
-/**
- * @deprecated Use `PageBanner` instead.
- */
-export const InlineBannerDescription = withContext<HTMLSpanElement, InlineBannerDescriptionProps>(
-  Primitive.span,
-  "description",
-);
-
-/**
- * @deprecated Use `PageBanner` instead.
- */
-export interface InlineBannerLinkProps
-  extends PrimitiveProps,
-    React.ButtonHTMLAttributes<HTMLButtonElement> {}
-
-/**
- * @deprecated Use `PageBanner` instead.
- */
-export const InlineBannerLink = withContext<HTMLButtonElement, InlineBannerLinkProps>(
-  Primitive.button,
-  "link",
-);
-
-/**
- * @deprecated Use `PageBanner` instead.
- */
-export interface InlineBannerCloseButtonProps
-  extends PrimitiveProps,
-    React.ButtonHTMLAttributes<HTMLButtonElement> {}
-
-/**
- * @deprecated Use `PageBanner` instead.
- */
-export const InlineBannerCloseButton = withContext<HTMLButtonElement, InlineBannerCloseButtonProps>(
-  DismissibleCloseButton,
-  "closeButton",
-);

package/src/components/InlineBanner/index.ts

@@ -1,16 +0,0 @@
-export {
-  InlineBannerCloseButton,
-  InlineBannerContent,
-  InlineBannerDescription,
-  InlineBannerLink,
-  InlineBannerRoot,
-  InlineBannerTitle,
-  type InlineBannerCloseButtonProps,
-  type InlineBannerContentProps,
-  type InlineBannerDescriptionProps,
-  type InlineBannerLinkProps,
-  type InlineBannerRootProps,
-  type InlineBannerTitleProps,
-} from "./InlineBanner";
-
-export * as InlineBanner from "./InlineBanner.namespace";

package/src/components/LinkContent/LinkContent.tsx

@@ -1,23 +0,0 @@
-import { linkContent, type LinkContentVariantProps } from "@seed-design/css/recipes/link-content";
-import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
-import { createRecipeContext } from "../../utils/createRecipeContext";
-import type * as React from "react";
-import { withStyleProps, type StyleProps } from "../../utils/styled";
-
-const { withContext } = createRecipeContext(linkContent);
-
-/**
- * @deprecated Use `ActionButton` with variant="ghost" instead.
- */
-export interface LinkContentProps
-  extends LinkContentVariantProps,
-    PrimitiveProps,
-    Pick<StyleProps, "color">,
-    Omit<React.HTMLAttributes<HTMLSpanElement>, "color"> {}
-
-/**
- * @deprecated Use `ActionButton` with variant="ghost" instead.
- */
-export const LinkContent = withContext<HTMLButtonElement, LinkContentProps>(
-  withStyleProps(Primitive.span),
-);

package/src/components/LinkContent/index.ts

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

package/src/components/TimePicker/TimePicker.test.tsx

@@ -1,166 +0,0 @@
-import { act, fireEvent, render } from "@testing-library/react";
-import { afterAll, beforeAll, describe, expect, it, jest, mock } from "bun:test";
-import { TimePicker } from "./TimePicker";
-
-describe("TimePicker", () => {
-  const originalScrollTo = HTMLElement.prototype.scrollTo;
-  const originalMatchMedia = window.matchMedia;
-  const originalRequestAnimationFrame = window.requestAnimationFrame;
-  const originalCancelAnimationFrame = window.cancelAnimationFrame;
-
-  beforeAll(() => {
-    HTMLElement.prototype.scrollTo = function scrollTo(options) {
-      if (typeof options === "object" && options.top !== undefined) {
-        this.scrollTop = options.top;
-      }
-    };
-    window.matchMedia = mock(() => ({
-      matches: false,
-      media: "",
-      onchange: null,
-      addListener: () => {},
-      removeListener: () => {},
-      addEventListener: () => {},
-      removeEventListener: () => {},
-      dispatchEvent: () => false,
-    }));
-    window.requestAnimationFrame = (callback) => {
-      callback(0);
-      return 1;
-    };
-    window.cancelAnimationFrame = () => {};
-  });
-
-  afterAll(() => {
-    HTMLElement.prototype.scrollTo = originalScrollTo;
-    window.matchMedia = originalMatchMedia;
-    window.requestAnimationFrame = originalRequestAnimationFrame;
-    window.cancelAnimationFrame = originalCancelAnimationFrame;
-  });
-
-  it("기본 접근성 이름과 12시간제 컬럼을 제공한다", () => {
-    const { getByRole, getAllByRole } = render(
-      <TimePicker defaultValue={{ hour: 10, minute: 5 }} />,
-    );
-
-    expect(getByRole("group")).toHaveAccessibleName("시간 선택");
-    const columns = getAllByRole("spinbutton");
-    expect(columns.map((column) => column.getAttribute("aria-label"))).toEqual([
-      "오전/오후",
-      "시",
-      "분",
-    ]);
-    expect(columns.map((column) => column.getAttribute("aria-valuetext"))).toEqual([
-      "오전",
-      "10",
-      "05",
-    ]);
-  });
-
-  it("locale에 따라 컬럼 순서를 변경한다", () => {
-    const { getAllByRole, getByRole } = render(<TimePicker locale="en-US" />);
-
-    expect(getByRole("group")).toHaveAccessibleName("Select time");
-    expect(getAllByRole("spinbutton").map((column) => column.getAttribute("aria-label"))).toEqual([
-      "Hour",
-      "Minute",
-      "AM/PM",
-    ]);
-  });
-
-  it("일본어 locale에 맞는 기본 접근성 이름을 제공한다", () => {
-    const { getAllByRole, getByRole } = render(<TimePicker locale="ja-JP" />);
-
-    expect(getByRole("group")).toHaveAccessibleName("時刻を選択");
-    expect(getAllByRole("spinbutton").map((column) => column.getAttribute("aria-label"))).toEqual([
-      "午前/午後",
-      "時",
-      "分",
-    ]);
-  });
-
-  it("기본 접근성 이름을 명시적인 값으로 재정의한다", () => {
-    const { getAllByRole, getByRole } = render(
-      <TimePicker
-        locale="en-US"
-        aria-label="Appointment time"
-        periodAriaLabel="Period"
-        hourAriaLabel="Hours"
-        minuteAriaLabel="Minutes"
-      />,
-    );
-
-    expect(getByRole("group")).toHaveAccessibleName("Appointment time");
-    expect(getAllByRole("spinbutton").map((column) => column.getAttribute("aria-label"))).toEqual([
-      "Hours",
-      "Minutes",
-      "Period",
-    ]);
-  });
-
-  it("controlled minute도 가장 가까운 minuteStep으로 반올림한다", () => {
-    const { getAllByRole } = render(<TimePicker value={{ hour: 9, minute: 13 }} minuteStep={5} />);
-    const minuteColumn = getAllByRole("spinbutton")[2];
-
-    expect(minuteColumn).toHaveAttribute("aria-valuetext", "15");
-    expect(minuteColumn.querySelector('[data-wheel-picker-value="13"]')).toBeNull();
-  });
-
-  it("Wheel 정착 후 TimePickerValue를 전달한다", () => {
-    jest.useFakeTimers();
-    try {
-      const onValueChange = mock(() => {});
-      const { getAllByRole } = render(
-        <TimePicker
-          value={{ hour: 10, minute: 13 }}
-          minuteStep={10}
-          onValueChange={onValueChange}
-        />,
-      );
-      const hourColumn = getAllByRole("spinbutton")[1];
-
-      fireEvent.keyDown(hourColumn, { key: "ArrowDown" });
-      act(() => jest.advanceTimersByTime(120));
-
-      expect(onValueChange).toHaveBeenCalledWith({ hour: 11, minute: 10 });
-    } finally {
-      jest.useRealTimers();
-    }
-  });
-
-  it("Hour가 12시 경계를 지나면 Period를 부드럽게 전환한다", () => {
-    jest.useFakeTimers();
-    const previousScrollTo = HTMLElement.prototype.scrollTo;
-    const smoothScrolls: Array<{ element: HTMLElement; top: number }> = [];
-    try {
-      HTMLElement.prototype.scrollTo = function scrollTo(options) {
-        if (typeof options !== "object" || options.top === undefined) return;
-
-        this.scrollTop = options.top;
-        if (options.behavior === "smooth") {
-          smoothScrolls.push({ element: this, top: options.top });
-        }
-      };
-      const { getAllByRole } = render(<TimePicker defaultValue={{ hour: 11, minute: 0 }} />);
-      const [periodColumn, hourColumn] = getAllByRole("spinbutton");
-
-      fireEvent.keyDown(hourColumn, { key: "ArrowDown" });
-      act(() => jest.advanceTimersByTime(120));
-
-      expect(periodColumn).toHaveAttribute("aria-valuetext", "오후");
-      expect(smoothScrolls).toContainEqual({ element: periodColumn, top: 44 });
-    } finally {
-      HTMLElement.prototype.scrollTo = previousScrollTo;
-      jest.useRealTimers();
-    }
-  });
-
-  it("disabled는 컬럼을 tab 순서에서 제외한다", () => {
-    const { getAllByRole } = render(<TimePicker disabled />);
-
-    for (const column of getAllByRole("spinbutton")) {
-      expect(column).toHaveAttribute("aria-disabled", "true");
-      expect(column).toHaveAttribute("tabindex", "-1");
-    }
-  });
-});