@weing-dev/ui-kit-primitive 0.0.1 → 0.0.3

package/src/components/Thumbnail/Thumbnail.tsx

@@ -1,391 +0,0 @@
-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

@@ -1,118 +0,0 @@
-# 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

@@ -1,76 +0,0 @@
-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

@@ -1,58 +0,0 @@
-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;
-}>;