@seed-design/react 2.6.0 → 3.0.0

package/src/components/TimePicker/TimePicker.tsx

@@ -1,163 +0,0 @@
-"use client";
-
-import { timePicker } from "@seed-design/css/recipes/time-picker";
-import { useTimePicker, type UseTimePickerProps } from "@seed-design/react-time-picker";
-import clsx from "clsx";
-import * as React from "react";
-import {
-  InternalWheelPickerColumn,
-  InternalWheelPickerRoot,
-  type InternalWheelPickerRootProps,
-} from "../private/WheelPicker";
-
-const ITEM_SIZE = 44;
-const VISIBLE_ITEM_COUNT = 5;
-const DEFAULT_ARIA_LABELS = {
-  ko: {
-    root: "시간 선택",
-    period: "오전/오후",
-    hour: "시",
-    minute: "분",
-  },
-  en: {
-    root: "Select time",
-    period: "AM/PM",
-    hour: "Hour",
-    minute: "Minute",
-  },
-  ja: {
-    root: "時刻を選択",
-    period: "午前/午後",
-    hour: "時",
-    minute: "分",
-  },
-} as const;
-
-function getDefaultAriaLabels(locale: string | string[] | undefined) {
-  const [canonicalLocale = "ko-KR"] = Intl.getCanonicalLocales(locale ?? "ko-KR");
-  const language = new Intl.Locale(canonicalLocale).language;
-
-  if (language === "ko") return DEFAULT_ARIA_LABELS.ko;
-  if (language === "ja") return DEFAULT_ARIA_LABELS.ja;
-  return DEFAULT_ARIA_LABELS.en;
-}
-
-const classNames = timePicker();
-
-const columnClassNames = {
-  period: classNames.periodColumn,
-  hour: classNames.hourColumn,
-  minute: classNames.minuteColumn,
-};
-
-export interface TimePickerProps
-  extends UseTimePickerProps,
-    Omit<
-      InternalWheelPickerRootProps,
-      | keyof UseTimePickerProps
-      | "asChild"
-      | "children"
-      | "columnsClassName"
-      | "fogSize"
-      | "itemSize"
-      | "readOnly"
-      | "scrollFogClassName"
-      | "selectionIndicatorClassName"
-      | "visibleItemCount"
-    > {
-  /**
-   * 오전·오후 컬럼의 접근성 이름입니다.
-   * 지정하지 않으면 `locale`에 맞는 기본값을 사용합니다.
-   */
-  periodAriaLabel?: string;
-
-  /**
-   * 시 컬럼의 접근성 이름입니다.
-   * 지정하지 않으면 `locale`에 맞는 기본값을 사용합니다.
-   */
-  hourAriaLabel?: string;
-
-  /**
-   * 분 컬럼의 접근성 이름입니다.
-   * 지정하지 않으면 `locale`에 맞는 기본값을 사용합니다.
-   */
-  minuteAriaLabel?: string;
-}
-
-/**
- * 휠을 스크롤하여 오전·오후, 시, 분을 선택하는 12시간제 시간 선택 컴포넌트입니다.
- *
- * 값은 오전·오후를 별도 필드로 나누지 않고 24시간 형식의 `TimePickerValue`로 주고받습니다.
- */
-export const TimePicker = React.forwardRef<HTMLDivElement, TimePickerProps>(
-  (
-    {
-      value,
-      defaultValue,
-      onValueChange,
-      minuteStep,
-      locale,
-      disabled,
-      periodAriaLabel,
-      hourAriaLabel,
-      minuteAriaLabel,
-      className,
-      "aria-label": ariaLabel,
-      "aria-labelledby": ariaLabelledby,
-      ...props
-    },
-    ref,
-  ) => {
-    const api = useTimePicker({
-      value,
-      defaultValue,
-      onValueChange,
-      minuteStep,
-      locale,
-      disabled,
-    });
-    const defaultAriaLabels = getDefaultAriaLabels(locale);
-    const ariaLabels = {
-      period: periodAriaLabel ?? defaultAriaLabels.period,
-      hour: hourAriaLabel ?? defaultAriaLabels.hour,
-      minute: minuteAriaLabel ?? defaultAriaLabels.minute,
-    };
-
-    return (
-      <InternalWheelPickerRoot
-        ref={ref}
-        itemSize={ITEM_SIZE}
-        visibleItemCount={VISIBLE_ITEM_COUNT}
-        disabled={disabled}
-        aria-label={ariaLabelledby ? ariaLabel : (ariaLabel ?? defaultAriaLabels.root)}
-        aria-labelledby={ariaLabelledby}
-        className={clsx(classNames.root, className)}
-        columnsClassName={classNames.columns}
-        scrollFogClassName={classNames.scrollFog}
-        selectionIndicatorClassName={classNames.selectionIndicator}
-        {...props}
-      >
-        {api.columnOrder.map((type) => {
-          const column = api.columns[type];
-
-          return (
-            <InternalWheelPickerColumn
-              key={type}
-              aria-label={ariaLabels[type]}
-              className={columnClassNames[type]}
-              itemClassName={classNames.item}
-              options={column.options}
-              value={column.value}
-              onValueChange={column.onValueChange}
-              loop={column.loop}
-              valueChangeBehavior={type === "period" ? "smooth" : "auto"}
-            />
-          );
-        })}
-      </InternalWheelPickerRoot>
-    );
-  },
-);
-TimePicker.displayName = "TimePicker";
-
-export type { MinuteStep, TimePickerValue } from "@seed-design/react-time-picker";

package/src/components/TimePicker/index.ts

@@ -1,6 +0,0 @@
-export {
-  TimePicker,
-  type MinuteStep,
-  type TimePickerProps,
-  type TimePickerValue,
-} from "./TimePicker";

package/src/components/private/WheelPicker.test.tsx

@@ -1,55 +0,0 @@
-import { render } from "@testing-library/react";
-import { describe, expect, it } from "bun:test";
-import { InternalWheelPickerColumn, InternalWheelPickerRoot } from "./WheelPicker";
-
-const options = [
-  { value: "a", label: "A" },
-  { value: "b", label: "B" },
-];
-
-describe("InternalWheelPicker", () => {
-  it("여러 컬럼을 하나의 ScrollFog와 Selection Indicator로 조합한다", () => {
-    const { container, getAllByRole, getByRole } = render(
-      <InternalWheelPickerRoot
-        aria-label="내부 휠 피커"
-        itemSize={40}
-        visibleItemCount={5}
-        fogSize={32}
-        className="root"
-        columnsClassName="columns"
-        scrollFogClassName="fog"
-        selectionIndicatorClassName="indicator"
-      >
-        <InternalWheelPickerColumn aria-label="첫 번째" options={options} />
-        <InternalWheelPickerColumn aria-label="두 번째" options={options} />
-      </InternalWheelPickerRoot>,
-    );
-
-    const root = getByRole("group");
-    const fogs = container.querySelectorAll("[data-wheel-picker-scroll-fog]");
-    const indicator = container.querySelector("[data-wheel-picker-indicator]");
-    const columns = container.querySelector("[data-wheel-picker-columns]");
-    const [firstColumn] = getAllByRole("spinbutton");
-
-    expect(root).toHaveClass("seed-wheel-picker__root", "root");
-    expect(root).toHaveStyle({
-      "--seed-wheel-picker-item-size": "40px",
-      "--seed-wheel-picker-visible-item-count": "5",
-      "--seed-wheel-picker-viewport-size": "200px",
-      "--seed-wheel-picker-center-offset": "80px",
-    });
-    expect(fogs).toHaveLength(1);
-    expect(fogs[0]).toHaveClass("seed-wheel-picker__scrollFog", "fog");
-    expect(fogs[0]).toHaveStyle({
-      "--scroll-fog-size-top": "32px",
-      "--scroll-fog-size-bottom": "32px",
-    });
-    expect(indicator).toHaveClass("seed-wheel-picker__selectionIndicator", "indicator");
-    expect(indicator).toHaveAttribute("aria-hidden", "true");
-    expect(columns).toHaveClass("seed-wheel-picker__columns", "columns");
-    expect(getAllByRole("spinbutton")).toHaveLength(2);
-    expect(firstColumn).toHaveClass("seed-wheel-picker__column");
-    expect(firstColumn).not.toHaveClass("seed-wheel-picker-public__column");
-    expect(firstColumn.firstElementChild).toHaveClass("seed-wheel-picker__item");
-  });
-});

package/src/components/private/WheelPicker.tsx

@@ -1,110 +0,0 @@
-"use client";
-
-import { wheelPicker } from "@seed-design/css/recipes/wheel-picker";
-import { Primitive } from "@seed-design/react-primitive";
-import { WheelPicker as WheelPickerPrimitive } from "@seed-design/react-wheel-picker";
-import clsx from "clsx";
-import * as React from "react";
-import { ScrollFog, type ScrollFogProps } from "../ScrollFog/ScrollFog";
-
-const classNames = wheelPicker();
-
-type WheelPickerCssProperties = React.CSSProperties & {
-  "--seed-wheel-picker-item-size"?: string;
-  "--seed-wheel-picker-visible-item-count"?: number;
-  "--seed-wheel-picker-viewport-size"?: string;
-  "--seed-wheel-picker-center-offset"?: string;
-};
-
-export interface InternalWheelPickerRootProps
-  extends Omit<WheelPickerPrimitive.RootProps, "asChild" | "children"> {
-  children: React.ReactNode;
-  columnsClassName?: string;
-  scrollFogClassName?: string;
-  selectionIndicatorClassName?: string;
-  fogSize?: ScrollFogProps["size"];
-}
-
-export const InternalWheelPickerRoot = React.forwardRef<
-  HTMLDivElement,
-  InternalWheelPickerRootProps
->(
-  (
-    {
-      children,
-      className,
-      columnsClassName,
-      scrollFogClassName,
-      selectionIndicatorClassName,
-      fogSize,
-      itemSize,
-      visibleItemCount,
-      style,
-      ...props
-    },
-    ref,
-  ) => {
-    const centerOffset = ((visibleItemCount - 1) / 2) * itemSize;
-    const wheelPickerStyle: WheelPickerCssProperties = {
-      ...style,
-      "--seed-wheel-picker-item-size": `${itemSize}px`,
-      "--seed-wheel-picker-visible-item-count": visibleItemCount,
-      "--seed-wheel-picker-viewport-size": `${itemSize * visibleItemCount}px`,
-      "--seed-wheel-picker-center-offset": `${centerOffset}px`,
-    };
-
-    return (
-      <WheelPickerPrimitive.Root
-        ref={ref}
-        itemSize={itemSize}
-        visibleItemCount={visibleItemCount}
-        className={clsx(classNames.root, className)}
-        style={wheelPickerStyle}
-        {...props}
-      >
-        <Primitive.div
-          aria-hidden
-          className={clsx(classNames.selectionIndicator, selectionIndicatorClassName)}
-          data-wheel-picker-indicator=""
-        />
-        <ScrollFog
-          className={clsx(classNames.scrollFog, scrollFogClassName)}
-          placement={["top", "bottom"]}
-          size={fogSize}
-          hideScrollBar
-          data-wheel-picker-scroll-fog=""
-        >
-          <Primitive.div
-            className={clsx(classNames.columns, columnsClassName)}
-            data-wheel-picker-columns=""
-          >
-            {children}
-          </Primitive.div>
-        </ScrollFog>
-      </WheelPickerPrimitive.Root>
-    );
-  },
-);
-InternalWheelPickerRoot.displayName = "InternalWheelPickerRoot";
-
-export interface InternalWheelPickerColumnProps
-  extends Omit<WheelPickerPrimitive.ColumnProps, "asChild" | "renderOption"> {
-  itemClassName?: string;
-}
-
-export const InternalWheelPickerColumn = React.forwardRef<
-  HTMLDivElement,
-  InternalWheelPickerColumnProps
->(({ className, itemClassName, ...props }, ref) => (
-  <WheelPickerPrimitive.Column
-    ref={ref}
-    className={clsx(classNames.column, className)}
-    renderOption={(option, optionProps) => (
-      <Primitive.div className={clsx(classNames.item, itemClassName)} {...optionProps}>
-        {option.label}
-      </Primitive.div>
-    )}
-    {...props}
-  />
-));
-InternalWheelPickerColumn.displayName = "InternalWheelPickerColumn";

package/src/primitive.ts

@@ -1,17 +0,0 @@
-export * from "@seed-design/react-attachment-display";
-export * from "@seed-design/react-avatar";
-export * from "@seed-design/react-checkbox";
-export * from "@seed-design/react-dialog";
-export * from "@seed-design/react-file-upload";
-export * from "@seed-design/react-middle-truncate";
-export * from "@seed-design/react-navigation-menu";
-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-side-navigation";
-export * from "@seed-design/react-slider";
-export * from "@seed-design/react-snackbar";
-export * from "@seed-design/react-switch";
-export * from "@seed-design/react-tabs";
-export * from "@seed-design/react-toggle";