sh-ui-cli 0.15.0 → 0.21.1

package/data/registry/react/components/file-upload/index.tsx

@@ -0,0 +1,489 @@
+"use client";
+
+import * as React from "react";
+import "./styles.css";
+
+function cx(...args: (string | false | undefined)[]) {
+  return args.filter(Boolean).join(" ");
+}
+
+function formatBytes(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  if (bytes < 1024 * 1024 * 1024) return `${(bytes / 1024 / 1024).toFixed(1)} MB`;
+  return `${(bytes / 1024 / 1024 / 1024).toFixed(1)} GB`;
+}
+
+/* ───────────── context ───────────── */
+
+interface FileUploadContextValue {
+  files: File[];
+  dragging: boolean;
+  disabled: boolean;
+  multiple: boolean;
+  accept?: string;
+  id?: string;
+  name?: string;
+  inputRef: React.RefObject<HTMLInputElement | null>;
+  setDragging: (v: boolean) => void;
+  addFiles: (incoming: FileList | File[]) => void;
+  remove: (idx: number) => void;
+  openPicker: () => void;
+}
+
+const FileUploadContext = React.createContext<FileUploadContextValue | null>(null);
+
+function useFileUpload() {
+  const ctx = React.useContext(FileUploadContext);
+  if (!ctx) {
+    throw new Error(
+      "FileUpload 하위 컴포넌트는 <FileUpload> 내부에서만 사용할 수 있습니다.",
+    );
+  }
+  return ctx;
+}
+
+/* ───────────── root ───────────── */
+
+export interface FileUploadProps {
+  /** 제어 모드 파일 배열. 지정 시 순수 제어 컴포넌트로 동작한다. */
+  value?: File[];
+  /** 비제어 모드 초기값. */
+  defaultValue?: File[];
+  /** 파일 목록 변경 콜백. 추가/제거/대체 모두 이 콜백으로 통보된다. */
+  onValueChange?: (files: File[]) => void;
+  /** `onValueChange` 별칭 (compound API 호환). 보통 `onValueChange` 사용 권장. */
+  onFiles?: (files: File[]) => void;
+  /**
+   * 다중 선택 허용. `false`면 새 파일이 기존 파일을 대체한다.
+   * @default false
+   */
+  multiple?: boolean;
+  /**
+   * 네이티브 `<input accept>`. MIME 또는 확장자.
+   * @example "image/*", ".pdf,.docx"
+   */
+  accept?: string;
+  /** 파일당 최대 바이트. 초과 시 `onError`로 알림 후 해당 파일은 거부된다. */
+  maxSize?: number;
+  /** 총 파일 개수 상한. 초과 시 `onError` 후 잘려서 보관. */
+  maxFiles?: number;
+  /** 비활성. 클릭/드롭 모두 차단. */
+  disabled?: boolean;
+  /** 검증 실패(크기·개수 초과) 시 한국어 메시지가 전달된다. 토스트 등에 연결. */
+  onError?: (message: string) => void;
+  /** 기본 dropzone 중앙 텍스트 커스터마이즈. children 미지정 시에만 적용. */
+  placeholder?: React.ReactNode;
+  /** 기본 dropzone 하단 힌트. children 미지정 시에만 적용. */
+  hint?: React.ReactNode;
+  /**
+   * 기본 레이아웃에서 파일 목록 노출 여부. children 조립 모드에서는 FileUploadList 존재 여부로 결정.
+   * @default true
+   */
+  showFileList?: boolean;
+  className?: string;
+  /** 루트 래퍼 div에 적용할 인라인 스타일. */
+  style?: React.CSSProperties;
+  /** 네이티브 input의 `id`. `<Label htmlFor>`와 연결할 때 사용. */
+  id?: string;
+  /** 네이티브 input의 `name`. form submit 시 필드명. */
+  name?: string;
+  /**
+   * compound 모드. 미지정 시 기본 dropzone+목록 레이아웃이 자동 렌더된다.
+   * 직접 조립하려면 `FileUploadDropzone`/`FileUploadTrigger`/`FileUploadList`/`FileUploadItem`을 자식으로 넘긴다.
+   */
+  children?: React.ReactNode;
+}
+
+/**
+ * 파일 선택·드래그앤드롭 업로드. children 없이 쓰면 기본 dropzone+목록 레이아웃이 자동으로 그려지고,
+ * 직접 조립하려면 FileUploadDropzone/Trigger/List/Item을 자식으로 사용한다.
+ * 파일은 컴포넌트가 보관할 뿐 실제 업로드는 호출 측에서 onValueChange로 받아 처리한다.
+ */
+export const FileUpload = React.forwardRef<HTMLInputElement, FileUploadProps>(
+  (
+    {
+      value,
+      defaultValue,
+      onValueChange,
+      onFiles,
+      multiple = false,
+      accept,
+      maxSize,
+      maxFiles,
+      disabled = false,
+      onError,
+      placeholder,
+      hint,
+      showFileList = true,
+      className,
+      style,
+      id,
+      name,
+      children,
+    },
+    ref,
+  ) => {
+    const isControlled = value !== undefined;
+    const [internal, setInternal] = React.useState<File[]>(defaultValue ?? []);
+    const files = isControlled ? value! : internal;
+
+    const inputRef = React.useRef<HTMLInputElement>(null);
+    React.useImperativeHandle(ref, () => inputRef.current as HTMLInputElement);
+    const [dragging, setDragging] = React.useState(false);
+
+    const update = React.useCallback(
+      (next: File[]) => {
+        if (!isControlled) setInternal(next);
+        onValueChange?.(next);
+        onFiles?.(next);
+      },
+      [isControlled, onValueChange, onFiles],
+    );
+
+    const addFiles = React.useCallback(
+      (incoming: FileList | File[]) => {
+        const arr = Array.from(incoming);
+        const accepted: File[] = [];
+        for (const f of arr) {
+          if (maxSize && f.size > maxSize) {
+            onError?.(
+              `${f.name}: 최대 ${formatBytes(maxSize)}까지 업로드 가능합니다.`,
+            );
+            continue;
+          }
+          accepted.push(f);
+        }
+        if (accepted.length === 0) return;
+
+        let next = multiple
+          ? [...files, ...accepted]
+          : [accepted[accepted.length - 1]];
+        if (maxFiles && next.length > maxFiles) {
+          onError?.(`최대 ${maxFiles}개까지 업로드 가능합니다.`);
+          next = next.slice(0, maxFiles);
+        }
+        update(next);
+      },
+      [files, maxSize, maxFiles, multiple, onError, update],
+    );
+
+    const remove = React.useCallback(
+      (idx: number) => {
+        update(files.filter((_, i) => i !== idx));
+      },
+      [files, update],
+    );
+
+    const openPicker = React.useCallback(() => {
+      if (disabled) return;
+      inputRef.current?.click();
+    }, [disabled]);
+
+    const ctx = React.useMemo<FileUploadContextValue>(
+      () => ({
+        files,
+        dragging,
+        disabled,
+        multiple,
+        accept,
+        id,
+        name,
+        inputRef,
+        setDragging,
+        addFiles,
+        remove,
+        openPicker,
+      }),
+      [files, dragging, disabled, multiple, accept, id, name, addFiles, remove, openPicker],
+    );
+
+    return (
+      <FileUploadContext.Provider value={ctx}>
+        <div className={cx("sh-ui-file-upload", className)} style={style}>
+          {/* 공유 네이티브 input. Trigger/Dropzone 모두 이를 통해 파일 선택을 연다. */}
+          <input
+            ref={inputRef}
+            id={id}
+            name={name}
+            type="file"
+            multiple={multiple}
+            accept={accept}
+            disabled={disabled}
+            className="sh-ui-file-upload__input"
+            onChange={(e) => {
+              if (e.target.files) addFiles(e.target.files);
+              e.target.value = ""; // 동일 파일 재선택 허용
+            }}
+          />
+          {children ?? (
+            <DefaultLayout
+              placeholder={placeholder}
+              hint={hint}
+              showFileList={showFileList}
+            />
+          )}
+        </div>
+      </FileUploadContext.Provider>
+    );
+  },
+);
+FileUpload.displayName = "FileUpload";
+
+/* ───────────── default layout (backward-compat) ───────────── */
+
+function DefaultLayout({
+  placeholder,
+  hint,
+  showFileList,
+}: {
+  placeholder?: React.ReactNode;
+  hint?: React.ReactNode;
+  showFileList: boolean;
+}) {
+  const { files } = useFileUpload();
+  return (
+    <>
+      <FileUploadDropzone>
+        <UploadIcon />
+        <div className="sh-ui-file-upload__text">
+          {placeholder ?? (
+            <>
+              <strong>파일을 드래그</strong>하거나 <strong>클릭해서 선택</strong>
+            </>
+          )}
+        </div>
+        {hint && <div className="sh-ui-file-upload__hint">{hint}</div>}
+      </FileUploadDropzone>
+      {showFileList && files.length > 0 && <FileUploadList />}
+    </>
+  );
+}
+
+/* ───────────── parts ───────────── */
+
+export interface FileUploadDropzoneProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, "onDrop" | "onDragOver" | "onDragLeave"> {
+  children?: React.ReactNode;
+}
+
+/**
+ * 파일을 드롭하거나 클릭해 파일 선택창을 여는 영역. 키보드 Enter/Space로도 동작.
+ */
+export const FileUploadDropzone = React.forwardRef<
+  HTMLDivElement,
+  FileUploadDropzoneProps
+>(function FileUploadDropzone({ className, children, onClick, ...rest }, ref) {
+  const { dragging, disabled, setDragging, addFiles, openPicker } =
+    useFileUpload();
+  return (
+    <div
+      ref={ref}
+      role="button"
+      tabIndex={disabled ? -1 : 0}
+      aria-disabled={disabled || undefined}
+      data-dragging={dragging || undefined}
+      className={cx(
+        "sh-ui-file-upload__dropzone",
+        dragging && "sh-ui-file-upload__dropzone--drag",
+        disabled && "sh-ui-file-upload__dropzone--disabled",
+        className,
+      )}
+      onClick={(e) => {
+        onClick?.(e);
+        if (!e.defaultPrevented) openPicker();
+      }}
+      onKeyDown={(e) => {
+        if (disabled) return;
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          openPicker();
+        }
+      }}
+      onDragOver={(e) => {
+        e.preventDefault();
+        if (!disabled) setDragging(true);
+      }}
+      onDragLeave={() => setDragging(false)}
+      onDrop={(e) => {
+        e.preventDefault();
+        setDragging(false);
+        if (disabled) return;
+        addFiles(e.dataTransfer.files);
+      }}
+      {...rest}
+    >
+      {children}
+    </div>
+  );
+});
+
+export interface FileUploadTriggerProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {}
+
+/** 파일 선택창을 여는 버튼. Dropzone 내부에 두면 클릭 버블링이 자동 차단된다. */
+export const FileUploadTrigger = React.forwardRef<
+  HTMLButtonElement,
+  FileUploadTriggerProps
+>(function FileUploadTrigger({ className, onClick, children, type, ...rest }, ref) {
+  const { disabled, openPicker } = useFileUpload();
+  return (
+    <button
+      ref={ref}
+      type={type ?? "button"}
+      disabled={disabled || rest.disabled}
+      className={cx("sh-ui-file-upload__trigger", className)}
+      onClick={(e) => {
+        // Dropzone 내부에 있을 때 상위 onClick이 중복 트리거되지 않도록 버블 차단
+        e.stopPropagation();
+        onClick?.(e);
+        if (!e.defaultPrevented) openPicker();
+      }}
+      {...rest}
+    >
+      {children}
+    </button>
+  );
+});
+
+export interface FileUploadListProps
+  extends Omit<React.HTMLAttributes<HTMLUListElement>, "children"> {
+  /**
+   * 직접 노드를 넘기거나, 함수를 넘기면 현재 files와 remove 함수를 받아 직접 렌더할 수 있다.
+   * 미지정 시 파일당 `FileUploadItem`이 자동 렌더된다.
+   *
+   * @example
+   * <FileUploadList>
+   *   {({ files, remove }) => files.map((f, i) => (
+   *     <li key={i}>{f.name} <button onClick={() => remove(i)}>x</button></li>
+   *   ))}
+   * </FileUploadList>
+   */
+  children?:
+    | React.ReactNode
+    | ((args: {
+        /** 현재 보관 중인 파일 목록. */
+        files: File[];
+        /** 인덱스 기반 파일 제거. */
+        remove: (idx: number) => void;
+      }) => React.ReactNode);
+}
+
+/**
+ * 선택된 파일 목록(`<ul>`). children에 함수를 넘기면 files·remove를 받아 직접 렌더할 수 있고,
+ * 생략하면 파일당 FileUploadItem이 자동 렌더된다.
+ */
+export const FileUploadList = React.forwardRef<
+  HTMLUListElement,
+  FileUploadListProps
+>(function FileUploadList({ className, children, ...rest }, ref) {
+  const { files, remove } = useFileUpload();
+  if (files.length === 0) return null;
+
+  const content =
+    typeof children === "function"
+      ? children({ files, remove })
+      : (children ??
+        files.map((f, i) => (
+          <FileUploadItem key={`${f.name}-${i}`} file={f} index={i} />
+        )));
+
+  return (
+    <ul
+      ref={ref}
+      className={cx("sh-ui-file-upload__list", className)}
+      {...rest}
+    >
+      {content}
+    </ul>
+  );
+});
+
+export interface FileUploadItemProps
+  extends Omit<React.LiHTMLAttributes<HTMLLIElement>, "children"> {
+  /** 표시할 파일 객체. */
+  file: File;
+  /** files 배열 내 index. 내부 remove 버튼이 사용한다. */
+  index: number;
+  /** 미지정 시 기본 레이아웃(아이콘 + 이름 + 크기 + 제거 버튼). */
+  children?: React.ReactNode;
+}
+
+/** 파일 목록의 한 항목. 기본 레이아웃은 아이콘 + 이름 + 크기 + 제거 버튼이다. */
+export const FileUploadItem = React.forwardRef<
+  HTMLLIElement,
+  FileUploadItemProps
+>(function FileUploadItem({ file, index, className, children, ...rest }, ref) {
+  const { disabled, remove } = useFileUpload();
+  return (
+    <li
+      ref={ref}
+      className={cx("sh-ui-file-upload__item", className)}
+      {...rest}
+    >
+      {children ?? (
+        <>
+          <FileIcon />
+          <span className="sh-ui-file-upload__name" title={file.name}>
+            {file.name}
+          </span>
+          <span className="sh-ui-file-upload__size">
+            {formatBytes(file.size)}
+          </span>
+          <button
+            type="button"
+            className="sh-ui-file-upload__remove"
+            onClick={() => remove(index)}
+            disabled={disabled}
+            aria-label={`${file.name} 제거`}
+          >
+            <XIcon />
+          </button>
+        </>
+      )}
+    </li>
+  );
+});
+
+/* ───────────── icons ───────────── */
+
+function UploadIcon() {
+  return (
+    <svg viewBox="0 0 24 24" width="28" height="28" fill="none" aria-hidden>
+      <path
+        d="M12 16V4m0 0l-4 4m4-4l4 4M4 16v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function FileIcon() {
+  return (
+    <svg viewBox="0 0 20 20" width="16" height="16" fill="none" aria-hidden>
+      <path
+        d="M5 2.5h6l4 4v9a1.5 1.5 0 0 1-1.5 1.5h-8.5A1.5 1.5 0 0 1 3.5 15.5v-11A1.5 1.5 0 0 1 5 3Z"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinejoin="round"
+      />
+      <path d="M11 2.5v4h4" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round" />
+    </svg>
+  );
+}
+
+function XIcon() {
+  return (
+    <svg viewBox="0 0 16 16" width="14" height="14" fill="none" aria-hidden>
+      <path
+        d="M4 4l8 8m0-8l-8 8"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}

package/data/registry/react/components/file-upload/styles.css

@@ -0,0 +1,170 @@
+.sh-ui-file-upload {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+}
+
+.sh-ui-file-upload__dropzone {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-2);
+  padding: var(--space-8) var(--space-6);
+  min-height: 10rem;
+  background: var(--background-subtle);
+  color: var(--foreground-muted);
+  border: 1.5px dashed var(--border);
+  border-radius: var(--radius);
+  cursor: pointer;
+  text-align: center;
+  transition: border-color var(--duration-fast), background-color var(--duration-fast), color var(--duration-fast);
+  -webkit-tap-highlight-color: transparent;
+}
+
+.sh-ui-file-upload__dropzone:hover {
+  border-color: var(--border-strong);
+  color: var(--foreground);
+}
+
+.sh-ui-file-upload__dropzone:focus-visible {
+  outline: var(--border-width-strong) solid var(--foreground);
+  outline-offset: 2px;
+  border-color: var(--foreground);
+}
+
+.sh-ui-file-upload__dropzone--drag {
+  border-color: var(--foreground);
+  background: var(--background-muted);
+  color: var(--foreground);
+}
+
+.sh-ui-file-upload__dropzone--disabled {
+  opacity: var(--opacity-disabled);
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* 네이티브 input을 시각적으로 숨기되 접근 가능하게 유지 */
+.sh-ui-file-upload__input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.sh-ui-file-upload__text {
+  font-size: var(--text-sm);
+  color: var(--foreground);
+}
+.sh-ui-file-upload__text strong {
+  font-weight: var(--weight-semibold);
+}
+
+.sh-ui-file-upload__hint {
+  font-size: var(--text-xs);
+  color: var(--foreground-muted);
+}
+
+/* Trigger 버튼 */
+.sh-ui-file-upload__trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-2);
+  padding: var(--space-2) var(--space-3);
+  font-size: var(--text-sm);
+  font-weight: var(--weight-medium);
+  color: var(--foreground);
+  background: var(--background);
+  border: 1px solid var(--border);
+  border-radius: calc(var(--radius) - 2px);
+  cursor: pointer;
+  transition: background-color var(--duration-fast), border-color var(--duration-fast);
+}
+.sh-ui-file-upload__trigger:hover:not(:disabled) {
+  background: var(--background-muted);
+  border-color: var(--border-strong);
+}
+.sh-ui-file-upload__trigger:focus-visible {
+  outline: var(--border-width-strong) solid var(--foreground);
+  outline-offset: 2px;
+}
+.sh-ui-file-upload__trigger:disabled {
+  opacity: var(--opacity-disabled);
+  cursor: not-allowed;
+}
+
+/* 파일 목록 */
+.sh-ui-file-upload__list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+}
+
+.sh-ui-file-upload__item {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  padding: var(--space-2) var(--space-3);
+  background: var(--background);
+  border: 1px solid var(--border);
+  border-radius: calc(var(--radius) - 2px);
+  font-size: var(--text-sm);
+  color: var(--foreground);
+}
+
+.sh-ui-file-upload__item > svg {
+  color: var(--foreground-muted);
+  flex-shrink: 0;
+}
+
+.sh-ui-file-upload__name {
+  flex: 1 1 auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sh-ui-file-upload__size {
+  font-size: var(--text-xs);
+  color: var(--foreground-muted);
+  flex-shrink: 0;
+}
+
+.sh-ui-file-upload__remove {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  padding: 0;
+  background: transparent;
+  border: none;
+  border-radius: calc(var(--radius) - 4px);
+  color: var(--foreground-muted);
+  cursor: pointer;
+  transition: color var(--duration-fast), background-color var(--duration-fast);
+  flex-shrink: 0;
+}
+.sh-ui-file-upload__remove:hover:not(:disabled) {
+  color: var(--foreground);
+  background: var(--background-muted);
+}
+.sh-ui-file-upload__remove:focus-visible {
+  outline: var(--border-width-strong) solid var(--foreground);
+  outline-offset: 2px;
+}
+.sh-ui-file-upload__remove:disabled {
+  opacity: var(--opacity-disabled);
+  cursor: not-allowed;
+}

package/data/registry/react/components/focus-ring/focus-ring.css

@@ -0,0 +1,23 @@
+/* sh-ui focus ring — 모든 인터랙티브 요소에 일관된 키보드 포커스 스타일.
+ *
+ * 사용 예:
+ *   .my-button:focus-visible { @apply ... }   // (Tailwind 미사용 시 직접 outline 지정)
+ *   또는 .sh-ui-focus 클래스를 컴포넌트에 부착.
+ */
+
+:root {
+  --focus-ring-color: var(--foreground);
+  --focus-ring-width: 2px;
+  --focus-ring-offset: 2px;
+}
+
+.sh-ui-focus:focus-visible,
+[data-focus-ring]:focus-visible {
+  outline: var(--focus-ring-width) solid var(--focus-ring-color);
+  outline-offset: var(--focus-ring-offset);
+}
+
+/* 음수 offset이 필요한 경우(예: 메뉴 아이템처럼 부모 안쪽으로) */
+.sh-ui-focus--inset:focus-visible {
+  outline-offset: calc(-1 * var(--focus-ring-offset));
+}