@weing-dev/ui-kit-primitive 0.0.0

package/src/components/Thumbnail/Thumbnail.tsx

@@ -0,0 +1,391 @@
+import React from "react";
+import {
+  initialState,
+  THUMBNAIL_SIZES,
+  ThumbnailContext,
+  ThumbnailProviderProps,
+  ThumbnailSize,
+} from "./Thumbnail.context";
+import cn from "classnames/bind";
+import styles from "./Thumbnail.module.scss";
+import { Icon } from "../Icon/Icon";
+
+const cx = cn.bind(styles);
+
+type RemoveButtonProps = {
+  index?: number;
+  iconSize?: number;
+} & React.JSX.IntrinsicElements["div"];
+const RemoveButton = (props: RemoveButtonProps) => {
+  const { index, iconSize, ...rest } = props;
+  const { size, variant, onRemove } = React.use(ThumbnailContext);
+
+  const getPixelSize = React.useCallback((size?: ThumbnailSize) => {
+    if (!size) return 0;
+    return typeof size === "string" ? THUMBNAIL_SIZES[size] : size;
+  }, []);
+
+  const styles = React.useMemo(() => {
+    const pixelSize = getPixelSize(size);
+
+    if (variant === "circle") {
+      return {
+        iconSize:
+          iconSize ||
+          (() => {
+            if (typeof size !== "string") return 24;
+            if (pixelSize <= 72) return 16;
+            if (pixelSize <= 96) return 20;
+            return 24;
+          })(),
+        borderWidth: pixelSize <= 72 ? 2 : 3,
+        exactSize: (() => {
+          if (pixelSize <= 72) return 24;
+          if (pixelSize <= 96) return 32;
+          if (pixelSize <= 120) return 40;
+          return 48;
+        })(),
+      };
+    }
+
+    return {
+      iconSize:
+        iconSize ||
+        (() => {
+          if (pixelSize <= 72) return 16;
+          if (pixelSize <= 96) return 20;
+          return 24;
+        })(),
+      exactSize: (() => {
+        if (pixelSize <= 96) return 24;
+        if (pixelSize <= 160) return 40;
+        return 48;
+      })(),
+    };
+  }, [variant, size, iconSize, getPixelSize]);
+
+  return (
+    <div
+      {...rest}
+      className={cx("RemoveButton", rest.className, variant)}
+      style={{
+        "--borderWidth": `${styles.borderWidth}px`,
+        "--exactSize": `${styles.exactSize}px`,
+        ...rest.style,
+      }}
+      onClick={(e) => {
+        props.onClick?.(e);
+        onRemove?.(index);
+      }}
+    >
+      <Icon name="Close" size={styles.iconSize} color="white" />
+    </div>
+  );
+};
+
+type EditButtonProps = {
+  index?: number;
+  iconName?: React.ComponentProps<typeof Icon>["name"];
+  iconSize?: number;
+} & React.JSX.IntrinsicElements["div"];
+
+const EditButton = (props: EditButtonProps) => {
+  const { index, iconName = "ModeEdit", ...rest } = props;
+  const { size, variant, onEdit } = React.use(ThumbnailContext);
+
+  const id = React.useId();
+
+  const getPixelSize = React.useCallback((size?: ThumbnailSize) => {
+    if (!size) return 0;
+    return typeof size === "string" ? THUMBNAIL_SIZES[size] : size;
+  }, []);
+
+  const styles = React.useMemo(() => {
+    const pixelSize = getPixelSize(size);
+    return {
+      iconSize:
+        props.iconSize ||
+        (() => {
+          if (typeof size !== "string") return 24;
+          if (pixelSize <= 72) return 16;
+          if (pixelSize <= 96) return 20;
+          return 24;
+        })(),
+      borderWidth: pixelSize <= 72 ? 2 : 3,
+      translate: pixelSize <= 120 ? 8 : 12,
+      exactSize: (() => {
+        if (pixelSize <= 72) return 24;
+        if (pixelSize <= 96) return 32;
+        if (pixelSize <= 120) return 40;
+        return 48;
+      })(),
+    };
+  }, [size, props.iconSize, getPixelSize]);
+
+  return (
+    <label htmlFor={id}>
+      <div
+        {...rest}
+        className={cx("EditButton", rest.className, variant)}
+        style={{
+          "--borderWidth": `${styles.borderWidth}px`,
+          "--translate": `${styles.translate}px`,
+          "--exactSize": `${styles.exactSize}px`,
+          ...rest.style,
+        }}
+      >
+        <Icon name={iconName} size={styles.iconSize} />
+      </div>
+      <input
+        className={cx("FileInput")}
+        type="file"
+        id={id}
+        onChange={(e) => {
+          props.onChange?.(e);
+          onEdit?.(e, index);
+        }}
+      />
+    </label>
+  );
+};
+
+type EmptyImageProps = {
+  iconName?: React.ComponentProps<typeof Icon>["name"];
+  iconSize?: number;
+} & React.JSX.IntrinsicElements["div"];
+const EmptyImage = (props: EmptyImageProps) => {
+  const { iconName = "AddAPhoto", ...rest } = props;
+  const { size, aspectRatio, variant } = React.use(ThumbnailContext);
+
+  const iconSize = React.useMemo(() => {
+    if (typeof size === "string") {
+      const pixelSize = THUMBNAIL_SIZES[size];
+      if (pixelSize <= 56) return 16;
+      if (pixelSize <= 72) return 20;
+      return 24;
+    }
+    return 24;
+  }, [size]);
+
+  return (
+    <div
+      {...rest}
+      className={cx("EmptyImage", rest.className, variant)}
+      style={{
+        "--aspectRatio": aspectRatio,
+        ...(typeof size === "string"
+          ? { width: THUMBNAIL_SIZES[size] }
+          : {
+              width: size,
+            }),
+        ...rest.style,
+      }}
+    >
+      <Icon name={iconName} size={props.iconSize || iconSize} />
+      <span className={cx("Text")}>사진 추가</span>
+    </div>
+  );
+};
+
+type UploadProps = React.PropsWithChildren<
+  React.JSX.IntrinsicElements["input"]
+>;
+const Upload = (props: UploadProps) => {
+  const { children, id, ...rest } = props;
+  const { onUpload } = React.use(ThumbnailContext);
+
+  return (
+    <label htmlFor={id}>
+      <input
+        {...rest}
+        type="file"
+        id={id}
+        className={cx("UploadInput")}
+        onChange={rest.onChange ?? onUpload}
+      />
+      {children}
+    </label>
+  );
+};
+
+type ImageProps = React.PropsWithChildren<
+  { index?: number } & React.JSX.IntrinsicElements["img"]
+>;
+const ImageComponent = (props: ImageProps) => {
+  const { children, index, ...rest } = props;
+  const { size, aspectRatio, variant, objectFit, isReload, onEdit, onRemove } =
+    React.use(ThumbnailContext);
+  const [isLoading, setIsLoading] = React.useState(true);
+  const [hasError, setHasError] = React.useState(false);
+
+  const [src, setSrc] = React.useState(rest.src);
+
+  // Check if EditButton or RemoveButton exists in children
+  const hasEditButton = React.Children.toArray(children).some(
+    (child) => React.isValidElement(child) && child.type === EditButton
+  );
+  const hasRemoveButton = React.Children.toArray(children).some(
+    (child) => React.isValidElement(child) && child.type === RemoveButton
+  );
+
+  const iconSize = React.useMemo(() => {
+    if (typeof size === "string") {
+      const pixelSize = THUMBNAIL_SIZES[size];
+      if (pixelSize <= 96) return 24;
+      if (pixelSize <= 160) return 32;
+      return 40;
+    }
+    return 24;
+  }, [size]);
+
+  const errorImageRefCallback = React.useCallback(() => {
+    if (src && isReload)
+      return () => {
+        setIsLoading(true);
+        setHasError(false);
+      };
+  }, [src, isReload]);
+
+  React.useEffect(() => {
+    setSrc(rest.src);
+  }, [rest.src]);
+
+  if (!src || hasError) {
+    return (
+      <div className={cx("ImageWrapper")}>
+        <div
+          ref={errorImageRefCallback}
+          className={cx("ErrorImage", rest.className, variant)}
+          style={{
+            "--aspectRatio": aspectRatio,
+            ...(typeof size === "string"
+              ? { width: THUMBNAIL_SIZES[size] }
+              : {
+                  width: size,
+                }),
+            ...rest.style,
+          }}
+        >
+          <Icon name="WarningAmber" size={iconSize} />
+          {children}
+        </div>
+        {hasEditButton || hasRemoveButton ? (
+          children
+        ) : (
+          <>
+            {onEdit && <EditButton index={index} />}
+            {onRemove && <RemoveButton index={index} />}
+          </>
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <div className={cx("ImageWrapper")}>
+      <img
+        {...rest}
+        src={src}
+        className={cx("Image", rest.className, variant, objectFit, {
+          isLoading,
+        })}
+        style={{
+          "--aspectRatio": aspectRatio,
+          ...(typeof size === "string"
+            ? { width: THUMBNAIL_SIZES[size] }
+            : {
+                width: size,
+              }),
+          ...rest.style,
+        }}
+        onLoad={() => {
+          setIsLoading(false);
+          setHasError(false);
+        }}
+        onError={() => {
+          setIsLoading(false);
+          setHasError(true);
+        }}
+      />
+      {hasEditButton || hasRemoveButton ? (
+        children
+      ) : (
+        <>
+          {onEdit && <EditButton index={index} />}
+          {onRemove && <RemoveButton index={index} />}
+        </>
+      )}
+    </div>
+  );
+};
+
+type ThumbnailRootProps = ThumbnailProviderProps &
+  React.JSX.IntrinsicElements["div"];
+const Root = (props: ThumbnailRootProps) => {
+  const {
+    children,
+    size,
+    aspectRatio,
+    variant,
+    objectFit,
+    isReload,
+    onEdit,
+    onRemove,
+    onUpload,
+    ...rest
+  } = props;
+
+  const contextValue = React.useMemo(
+    () => ({
+      ...initialState,
+      size,
+      aspectRatio,
+      variant,
+      objectFit,
+      isReload,
+      onEdit,
+      onRemove,
+      onUpload,
+    }),
+    [
+      size,
+      aspectRatio,
+      variant,
+      objectFit,
+      isReload,
+      onEdit,
+      onRemove,
+      onUpload,
+    ]
+  );
+  return (
+    <ThumbnailContext value={contextValue}>
+      <div {...rest} className={cx("Wrapper", rest.className)}>
+        {children}
+      </div>
+    </ThumbnailContext>
+  );
+};
+
+type IThumbnail = {
+  Root: typeof Root;
+  Image: typeof ImageComponent;
+  Upload: typeof Upload;
+  EmptyImage: typeof EmptyImage;
+  RemoveButton: typeof RemoveButton;
+  EditButton: typeof EditButton;
+  THUMBNAIL_SIZES: typeof THUMBNAIL_SIZES;
+};
+const Thumbnail: IThumbnail = {
+  Root,
+  Image: ImageComponent,
+  Upload,
+  EmptyImage,
+  RemoveButton,
+  EditButton,
+  THUMBNAIL_SIZES,
+};
+
+export type { ThumbnailRootProps };
+
+export default Thumbnail;

package/src/components/TimeInput/README.md

@@ -0,0 +1,118 @@
+# TimeInput UI
+
+## Contents List
+
+0. [Information](#Information)
+1. [Quick Start](#QuickStart)
+2. [Reference](#Reference)
+
+## Information
+
+- TimeInput UI는 시간 범위를 입력받기 위한 컴포넌트입니다.
+- 시작 시간과 종료 시간을 입력받을 수 있습니다.
+- 각 입력 필드는 시간(0-23)과 분(0-59)으로 제한됩니다.
+- 키보드 네비게이션을 지원합니다.
+- 시간 범위 유효성 검사를 제공합니다.
+- 다양한 스타일 변형(outlined/contained)을 지원합니다.
+
+## Quick Start
+
+```tsx
+import { TimeInput } from "@weing-dev/ui-kit-primitive";
+
+const Component = () => {
+  const handleTimeChange = (time: { start: string; end: string }) => {
+    console.log(time); // { start: "09:00", end: "18:00" }
+  };
+
+  return (
+    <TimeInput.Root onChange={handleTimeChange}>
+      <TimeInput.Label>시간</TimeInput.Label>
+      <TimeInput.InputWrapper>
+        <TimeInput.Input index={0} placeholder="00" />
+        <TimeInput.Colon />
+        <TimeInput.Input index={1} placeholder="00" />
+        <TimeInput.Separator />
+        <TimeInput.Input index={2} placeholder="00" />
+        <TimeInput.Colon />
+        <TimeInput.Input index={3} placeholder="00" />
+      </TimeInput.InputWrapper>
+      <TimeInput.HelperText />
+    </TimeInput.Root>
+  );
+};
+```
+
+## Reference
+
+### Root
+
+| Prop      |                      Type                       | Required | Default Value |
+| :-------- | :---------------------------------------------: | :------: | :-----------: |
+| value     |                     string                      |    -     |      ""       |
+| type      |              "default" \| "range"               |    -     |    "range"    |
+| size      |               "small" \| "large"                |    -     |    "small"    |
+| disabled  |                     boolean                     |    -     |     false     |
+| readOnly  |                     boolean                     |    -     |     false     |
+| status    |        "error" \| "warning" \| "success"        |    -     |       -       |
+| variant   |            "outlined" \| "contained"            |    -     |  "outlined"   |
+| direction |                "column" \| "row"                |    -     |   "column"    |
+| focused   |                     boolean                     |    -     |     false     |
+| onChange  | (value: { start: string; end: string }) => void |    -     |       -       |
+
+### Input
+
+| Prop        |  Type  | Required | Default Value |
+| :---------- | :----: | :------: | :-----------: |
+| index       | number |    ✓     |       -       |
+| placeholder | string |    ✓     |       -       |
+
+- `index`가 짝수(0,2)인 경우 시간(0-23) 입력
+- `index`가 홀수(1,3)인 경우 분(0-59) 입력
+
+### Label
+
+| Prop         |  Type  | Required | Default Value |
+| :----------- | :----: | :------: | :-----------: |
+| focusedColor | string |    -     |       -       |
+| className    | string |    -     |       -       |
+
+### InputWrapper
+
+컴포넌트들을 감싸는 wrapper입니다. variant와 size prop에 따라 스타일이 변경됩니다.
+
+### Colon
+
+시간과 분을 구분하는 콜론(:) 컴포넌트입니다.
+
+### Separator
+
+시작 시간과 종료 시간을 구분하는 구분자(-) 컴포넌트입니다.
+
+### HelperText
+
+오류 메시지를 표시하는 컴포넌트입니다. status prop에 따라 스타일이 변경됩니다.
+
+## Features
+
+### 키보드 네비게이션
+
+- `Tab` / `Shift+Tab`: 다음/이전 입력 필드로 이동
+- `Backspace`: 입력값이 비어있을 때 이전 필드로 이동
+
+### 입력 제한
+
+- 시간 필드(index 0,2): 0-23 범위로 제한
+- 분 필드(index 1,3): 0-59 범위로 제한
+- 최대값 초과 시 자동으로 최대값으로 설정
+
+### 유효성 검사
+
+- 종료 시간이 시작 시간보다 작거나 같을 경우 오류 상태로 변경
+- 오류 상태일 때 HelperText를 통해 오류 메시지 표시
+
+### 스타일 변형
+
+- `outlined`: 테두리가 있는 스타일 (기본값)
+- `contained`: 배경색이 있는 스타일
+- 각 상태(focused, disabled, error 등)에 따른 스타일 자동 적용

package/src/components/TimeInput/TimeInput.colors.tsx

@@ -0,0 +1,76 @@
+import { colorThemes as colorSet } from "../../styles/color2";
+
+const useTimeInputColors = () => {
+  const outlined = {
+    inactive: {
+      backgroundColor: "transparent",
+      color: `var(--textPrimary, ${colorSet.light.textPrimary})`,
+      placeholder: `var(--textTertiary, ${colorSet.light.textTertiary})`,
+      borderColor: `var(--componentTextfieldOutline, ${colorSet.light.componentTextfieldOutline})`,
+    },
+    focused: {
+      backgroundColor: "transparent",
+      color: `var(--textPrimary, ${colorSet.light.textPrimary})`,
+      placeholder: `var(--textTertiary, ${colorSet.light.textTertiary})`,
+      borderColor: `var(--actionAction, ${colorSet.light.actionAction})`,
+    },
+    readOnly: {
+      backgroundColor: "transparent",
+      color: `var(--textPrimary, ${colorSet.light.textPrimary})`,
+      placeholder: `var(--textTertiary, ${colorSet.light.textTertiary})`,
+      borderColor: `var(--componentTextfieldOutline, ${colorSet.light.componentTextfieldOutline})`,
+    },
+    disabled: {
+      backgroundColor: `var(--actionDisabledBackground, ${colorSet.light.actionDisabledBackground})`,
+      color: `var(--textDisabled, ${colorSet.light.textDisabled})`,
+      placeholder: `var(--textDisabled, ${colorSet.light.textDisabled})`,
+      borderColor: `var(--componentTextfieldOutline, ${colorSet.light.componentTextfieldOutline})`,
+    },
+    error: {
+      backgroundColor: "transparent",
+      color: `var(--textError, ${colorSet.light.textError})`,
+      placeholder: `var(--textError, ${colorSet.light.textError})`,
+      borderColor: `var(--componentTextfieldOutline, ${colorSet.light.componentTextfieldOutline})`,
+    },
+  };
+
+  const contained = {
+    inactive: {
+      backgroundColor: `var(--componentTextfieldFilled, ${colorSet.light.componentTextfieldFilled})`,
+      color: `var(--textPrimary, ${colorSet.light.textPrimary})`,
+      placeholder: `var(--textTertiary, ${colorSet.light.textTertiary})`,
+      borderColor: "transparent",
+    },
+    focused: {
+      backgroundColor: `var(--componentTextfieldFilled, ${colorSet.light.componentTextfieldFilled})`,
+      color: `var(--textPrimary, ${colorSet.light.textPrimary})`,
+      placeholder: `var(--textTertiary, ${colorSet.light.textTertiary})`,
+      borderColor: `var(--actionAction, ${colorSet.light.actionAction})`,
+    },
+    readOnly: {
+      backgroundColor: `var(--componentTextfieldFilled, ${colorSet.light.componentTextfieldFilled})`,
+      color: `var(--textPrimary, ${colorSet.light.textPrimary})`,
+      placeholder: `var(--textTertiary, ${colorSet.light.textTertiary})`,
+      borderColor: "transparent",
+    },
+    disabled: {
+      backgroundColor: `var(--actionDisabledBackground, ${colorSet.light.actionDisabledBackground})`,
+      color: `var(--textDisabled, ${colorSet.light.textDisabled})`,
+      placeholder: `var(--textDisabled, ${colorSet.light.textDisabled})`,
+      borderColor: "transparent",
+    },
+    error: {
+      backgroundColor: `var(--componentTextfieldFilled, ${colorSet.light.componentTextfieldFilled})`,
+      color: `var(--textError, ${colorSet.light.textError})`,
+      placeholder: `var(--textError, ${colorSet.light.textError})`,
+      borderColor: "transparent",
+    },
+  };
+
+  return {
+    outlined,
+    contained,
+  };
+};
+
+export default useTimeInputColors;

package/src/components/TimeInput/TimeInput.context.tsx

@@ -0,0 +1,58 @@
+import React from "react";
+
+export type TimeInputContextType = {
+  /** 입력값 */
+  value: string;
+  /** 크기 */
+  size?: "small" | "large";
+  /** 비활성화 여부 */
+  disabled?: boolean;
+  /** 읽기 전용 여부 */
+  readOnly?: boolean;
+  /** focused */
+  focused?: boolean;
+  /** 방향 */
+  direction?: "column" | "row";
+  /** flex basis */
+  flexBasis?: string;
+  /** 입력 요소 참조 */
+  inputRefs?: React.RefObject<HTMLInputElement[]>;
+  /** 상태 */
+  status?: "error" | "warning" | "success";
+  /** variant */
+  variant?: "outlined" | "contained";
+  /** 값 변경 핸들러 */
+  onChange?: (value: { start: string; end: string }) => void;
+  /** 입력값 변경 처리 */
+  handleChange?: (
+    e: React.ChangeEvent<HTMLInputElement>,
+    index: number
+  ) => void;
+  /** 포커스 아웃 처리 */
+  handleBlur?: (value: string, max: number, index: number) => void;
+  /** 키 입력 처리 */
+  handleKeyDown?: (
+    e: React.KeyboardEvent<HTMLInputElement>,
+    index: number
+  ) => void;
+  /** 포커스 처리 */
+  handleFocus?: () => void;
+};
+
+const initialState: TimeInputContextType = {
+  value: "",
+  variant: "outlined",
+  focused: false,
+  direction: "column",
+};
+
+export const TimeInputContext =
+  React.createContext<TimeInputContextType>(initialState);
+
+export type TimeInputProviderProps = React.PropsWithChildren<{
+  value?: string[];
+  type?: "default" | "range";
+  disabled?: boolean;
+  readOnly?: boolean;
+  onChange?: (value: { start: string; end: string }) => void;
+}>;