Attachment Field

import "@seed-design/lynx-css/base.css";

import type { NativeFile } from "@seed-design/lynx-react";
import { AttachmentField, AttachmentInput } from "@/components/ui/attachment-field";
import { VStack, useSeedClassName } from "@seed-design/lynx-react";

// 문서 고정 fixture입니다. 실제 앱에서는 호스트가 제공하는 파일 선택 adapter를 전달하세요.
const FIXTURE_FILES: NativeFile[] = [
  {
    uri: "fixture://attachment-field/document.pdf",
    name: "document.pdf",
    type: "application/pdf",
    size: 5,
  },
];

export default function AttachmentFieldPreview() {
  const seedClassName = useSeedClassName({ colorMode: "system" });

  return (
    <view className={seedClassName}>
      <VStack gap="x4" p="x6" width="100%">
        <AttachmentField
          maxFiles={3}
          label="파일 업로드"
          description="최대 3개까지 업로드할 수 있습니다"
          onSelectFiles={() => FIXTURE_FILES}
        >
          <AttachmentInput />
        </AttachmentField>
      </VStack>
    </view>
  );
}

import "@seed-design/lynx-css/base.css";

import type { AttachmentFileEntry, NativeFile } from "@seed-design/lynx-react";
import { AttachmentField, AttachmentInput } from "@/components/ui/attachment-field";
import { VStack, useSeedClassName } from "@seed-design/lynx-react";

const DEFAULT_FILES: AttachmentFileEntry[] = [
  {
    id: "document",
    file: {
      uri: "fixture://attachment-field/document.pdf",
      name: "document.pdf",
      type: "application/pdf",
      size: 5,
    },
    status: "success",
  },
];
const PICKED_FILES: NativeFile[] = [
  {
    uri: "fixture://attachment-field/photo.png",
    name: "photo.png",
    type: "image/png",
    size: 8,
    previewUrl: "https://picsum.photos/seed/attachment-trigger/200/200",
  },
];

export default function AttachmentFieldTrigger() {
  const seedClassName = useSeedClassName({ colorMode: "system" });
  return (
    <view className={seedClassName}>
      <VStack gap="x4" p="x6" width="100%">
        <AttachmentField
          maxFiles={3}
          label="파일 업로드"
          defaultAcceptedFileEntries={DEFAULT_FILES}
          onSelectFiles={() => PICKED_FILES}
        >
          <AttachmentInput />
        </AttachmentField>
      </VStack>
    </view>
  );
}

import "@seed-design/lynx-css/base.css";

import { useState } from "@lynx-js/react";
import type { NativeFile } from "@seed-design/lynx-react";
import {
  AttachmentField,
  AttachmentInput,
  AttachmentInputItem,
} from "@/components/ui/attachment-field";
import { Text, VStack, useSeedClassName } from "@seed-design/lynx-react";

const PICKED_FILES: NativeFile[] = [
  {
    uri: "fixture://attachment-field/value-changes.txt",
    name: "value-changes.txt",
    type: "text/plain",
    size: 12,
  },
];

export default function AttachmentFieldValueChanges() {
  const seedClassName = useSeedClassName({ colorMode: "system" });
  const [logs, setLogs] = useState<string[]>([]);
  const addLog = (message: string) => setLogs((previous) => [...previous, message]);

  return (
    <view className={seedClassName}>
      <VStack gap="x4" width="100%" align="center">
        <VStack gap="x1">
          {logs.length === 0 ? (
            <Text color="fg.neutralMuted">파일을 추가하거나 삭제하면 로그가 표시됩니다.</Text>
          ) : (
            logs.map((log, index) => (
              <Text key={index} fontSize="fontSize.caption1">
                {log}
              </Text>
            ))
          )}
        </VStack>
        <AttachmentField
          maxFiles={3}
          label="파일 업로드"
          description="콜백 호출 로그를 확인하세요"
          onSelectFiles={() => PICKED_FILES}
          onFileAccept={(entries, { updateFileEntryStatus }) => {
            addLog(`onFileAccept: ${entries.map((entry) => entry.file.name).join(", ")}`);
            for (const entry of entries) {
              updateFileEntryStatus(entry.id, { status: "uploading", progress: 0 });
              setTimeout(
                () => updateFileEntryStatus(entry.id, { status: "uploading", progress: 50 }),
                250,
              );
              setTimeout(() => updateFileEntryStatus(entry.id, { status: "success" }), 500);
            }
          }}
          onAcceptedFileEntriesChange={(entries) =>
            addLog(
              `onAcceptedFileEntriesChange: ${entries.map((entry) => `${entry.file.name} (${entry.status})`).join(", ")}`,
            )
          }
          onFileReject={(files) =>
            addLog(
              `onFileReject: ${files.map((file) => `${file.file.name} (${file.errors.join(", ")})`).join(", ")}`,
            )
          }
        >
          <AttachmentInput>
            {({ acceptedFileEntries }) =>
              acceptedFileEntries.map((fileEntry) => (
                <AttachmentInputItem key={fileEntry.id} fileEntry={fileEntry} />
              ))
            }
          </AttachmentInput>
        </AttachmentField>
      </VStack>
    </view>
  );
}

import "@seed-design/lynx-css/base.css";

import type { AttachmentFileEntry, NativeFile } from "@seed-design/lynx-react";
import { AttachmentField, AttachmentInput } from "@/components/ui/attachment-field";
import { VStack, useSeedClassName } from "@seed-design/lynx-react";

const DEFAULT_FILES: AttachmentFileEntry[] = [
  {
    id: "document",
    file: {
      uri: "fixture://attachment-field/document.pdf",
      name: "document.pdf",
      type: "application/pdf",
      size: 5,
    },
    status: "success",
  },
];
const PICKED_FILES: NativeFile[] = [
  { uri: "fixture://attachment-field/one.txt", name: "one.txt", type: "text/plain", size: 1 },
  { uri: "fixture://attachment-field/two.txt", name: "two.txt", type: "text/plain", size: 1 },
  { uri: "fixture://attachment-field/three.txt", name: "three.txt", type: "text/plain", size: 1 },
];

export default function AttachmentFieldMaxFiles() {
  const seedClassName = useSeedClassName({ colorMode: "system" });
  return (
    <view className={seedClassName}>
      <VStack gap="x4" p="x6" width="100%">
        <AttachmentField
          maxFiles={3}
          label="파일 업로드"
          description="최대 3개까지 업로드할 수 있습니다"
          defaultAcceptedFileEntries={DEFAULT_FILES}
          onSelectFiles={() => PICKED_FILES}
        >
          <AttachmentInput />
        </AttachmentField>
      </VStack>
    </view>
  );
}

import "@seed-design/lynx-css/base.css";

import { useRef, useState } from "@lynx-js/react";
import type { NativeFile } from "@seed-design/lynx-react";
import { AttachmentField, AttachmentInput } from "@/components/ui/attachment-field";
import { VStack, useSeedClassName } from "@seed-design/lynx-react";

const INVALID_FILE: NativeFile = {
  uri: "fixture://attachment-field/document.pdf",
  name: "document.pdf",
  type: "application/pdf",
  size: 5,
};
const VALID_FILE: NativeFile = {
  uri: "fixture://attachment-field/photo.jpg",
  name: "photo.jpg",
  type: "image/jpeg",
  size: 8,
  previewUrl: "https://picsum.photos/seed/attachment-invalid/200/200",
};

export default function AttachmentFieldInvalidFileType() {
  const seedClassName = useSeedClassName({ colorMode: "system" });
  const pickCount = useRef(0);
  const [errorMessage, setErrorMessage] = useState<string>();
  return (
    <view className={seedClassName}>
      <VStack gap="x4" p="x6" width="100%">
        <AttachmentField
          accept={["image/png", "image/jpeg"]}
          maxFiles={3}
          invalid={!!errorMessage}
          errorMessage={errorMessage}
          label="이미지 업로드"
          description="PNG, JPEG 파일만 업로드할 수 있습니다"
          onSelectFiles={() => [pickCount.current++ === 0 ? INVALID_FILE : VALID_FILE]}
          onAcceptedFileEntriesChange={() => setErrorMessage(undefined)}
          onFileReject={(files) =>
            setErrorMessage(
              files
                .map(
                  ({ file, errors }) =>
                    `"${file.name}": ${errors.includes("INVALID_TYPE") ? "지원하지 않는 파일 형식입니다" : "업로드에 실패했습니다"}`,
                )
                .join("\n"),
            )
          }
        >
          <AttachmentInput />
        </AttachmentField>
      </VStack>
    </view>
  );
}

import "@seed-design/lynx-css/base.css";

import { useRef, useState } from "@lynx-js/react";
import type { NativeFile } from "@seed-design/lynx-react";
import { AttachmentField, AttachmentInput } from "@/components/ui/attachment-field";
import { VStack, useSeedClassName } from "@seed-design/lynx-react";

const MIN_FILE_SIZE = 1024;
const MAX_FILE_SIZE = 10 * 1024;
const SMALL_FILE: NativeFile = {
  uri: "fixture://attachment-field/small.txt",
  name: "small.txt",
  type: "text/plain",
  size: 1,
};
const VALID_FILE: NativeFile = {
  uri: "fixture://attachment-field/valid.txt",
  name: "valid.txt",
  type: "text/plain",
  size: 2048,
};

export default function AttachmentFieldValidation() {
  const seedClassName = useSeedClassName({ colorMode: "system" });
  const pickCount = useRef(0);
  const [errorMessage, setErrorMessage] = useState<string>();
  return (
    <view className={seedClassName}>
      <VStack gap="x4" p="x6" width="100%">
        <AttachmentField
          maxFiles={3}
          minFileSize={MIN_FILE_SIZE}
          maxFileSize={MAX_FILE_SIZE}
          invalid={!!errorMessage}
          errorMessage={errorMessage}
          label="파일 업로드"
          description="1KB ~ 10KB 크기의 파일만 업로드할 수 있습니다"
          onSelectFiles={() => [pickCount.current++ === 0 ? SMALL_FILE : VALID_FILE]}
          onAcceptedFileEntriesChange={() => setErrorMessage(undefined)}
          onFileReject={(files) =>
            setErrorMessage(
              files
                .map(
                  ({ file, errors }) =>
                    `"${file.name}": ${errors.includes("FILE_TOO_SMALL") ? "크기가 1KB 미만입니다" : errors.includes("FILE_TOO_LARGE") ? "크기가 10KB를 초과합니다" : "업로드에 실패했습니다"}`,
                )
                .join("\n"),
            )
          }
        >
          <AttachmentInput />
        </AttachmentField>
      </VStack>
    </view>
  );
}

import "@seed-design/lynx-css/base.css";

import { useRef, useState } from "@lynx-js/react";
import type { NativeFile } from "@seed-design/lynx-react";
import { AttachmentField, AttachmentInput } from "@/components/ui/attachment-field";
import { VStack, useSeedClassName } from "@seed-design/lynx-react";

const LONG_NAME_FILE: NativeFile = {
  uri: "fixture://attachment-field/filename-too-long.txt",
  name: "filename-too-long.txt",
  type: "text/plain",
  size: 5,
};
const VALID_FILE: NativeFile = {
  uri: "fixture://attachment-field/short.txt",
  name: "short.txt",
  type: "text/plain",
  size: 5,
};

export default function AttachmentFieldCustomValidation() {
  const seedClassName = useSeedClassName({ colorMode: "system" });
  const pickCount = useRef(0);
  const [errorMessage, setErrorMessage] = useState<string>();
  return (
    <view className={seedClassName}>
      <VStack gap="x4" p="x6" width="100%">
        <AttachmentField
          maxFiles={5}
          validate={(file) =>
            file.name.replace(/\.[^.]+$/, "").length > 8 ? ["FILENAME_TOO_LONG"] : null
          }
          invalid={!!errorMessage}
          errorMessage={errorMessage}
          label="파일 업로드"
          description="파일 이름은 확장자를 제외하고 8자 이하여야 합니다"
          onSelectFiles={() => [pickCount.current++ === 0 ? LONG_NAME_FILE : VALID_FILE]}
          onAcceptedFileEntriesChange={() => setErrorMessage(undefined)}
          onFileReject={(files) => {
            if (files.every((file) => file.errors.includes("FILENAME_TOO_LONG")))
              setErrorMessage(
                `"${files.map((file) => file.file.name).join(", ")}"은(는) 파일 이름이 8자를 초과합니다.`,
              );
          }}
        >
          <AttachmentInput />
        </AttachmentField>
      </VStack>
    </view>
  );
}

import "@seed-design/lynx-css/base.css";

import { useRef } from "@lynx-js/react";
import type { AttachmentFileStatusDetails, NativeFile } from "@seed-design/lynx-react";
import { AttachmentField, AttachmentInput } from "@/components/ui/attachment-field";
import { VStack, useSeedClassName } from "@seed-design/lynx-react";

const PICKED_FILE: NativeFile = {
  uri: "fixture://attachment-field/status.png",
  name: "status.png",
  type: "image/png",
  size: 8,
  previewUrl: "https://picsum.photos/seed/attachment-status/200/200",
};

export default function AttachmentFieldStatus() {
  const seedClassName = useSeedClassName({ colorMode: "system" });
  const attempts = useRef<Record<string, number>>({});
  const startUpload = (
    id: string,
    update: (entryId: string, details: AttachmentFileStatusDetails) => void,
  ) => {
    attempts.current[id] = (attempts.current[id] ?? 0) + 1;
    update(id, { status: "uploading", progress: 0 });
    setTimeout(() => update(id, { status: "uploading", progress: 50 }), 250);
    setTimeout(() => update(id, { status: attempts.current[id] === 1 ? "error" : "success" }), 500);
  };
  return (
    <view className={seedClassName}>
      <VStack gap="x4" p="x6" width="100%">
        <AttachmentField
          accept="image/*"
          maxFiles={5}
          label="파일 업로드"
          description="업로드 상태 시뮬레이션"
          onSelectFiles={() => [PICKED_FILE]}
          onFileAccept={(entries, { updateFileEntryStatus }) => {
            for (const entry of entries) startUpload(entry.id, updateFileEntryStatus);
          }}
        >
          <AttachmentInput
            onRetry={(entry, { updateFileEntryStatus }) =>
              startUpload(entry.id, updateFileEntryStatus)
            }
          />
        </AttachmentField>
      </VStack>
    </view>
  );
}

import "@seed-design/lynx-css/base.css";

import IconXmarkFill from "@karrotmarket/lynx-monochrome-icon/IconXmarkFill";
import type { AttachmentFileEntry, NativeFile } from "@seed-design/lynx-react";
import {
  AttachmentInput as SeedAttachmentInput,
  Icon,
  VStack,
  useSeedClassName,
} from "@seed-design/lynx-react";
import { ProgressCircle } from "@/components/ui/progress-circle";
import { AttachmentField } from "@/components/ui/attachment-field";
import {
  AttachmentInputReorderable,
  SortableAttachmentInputItem,
} from "@/components/ui/attachment-field-reorderable";

const PIXEL_SUNSET =
  "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAADElEQVR4nGN4FcEDAAN+AU+hW/ICAAAAAElFTkSuQmCC";
const PIXEL_CITY =
  "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAADElEQVR4nGOYbPwKAAMNAbHKe2UaAAAAAElFTkSuQmCC";
const PIXEL_COFFEE =
  "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAADElEQVR4nGN4tZkDAAQwAaYlKXDxAAAAAElFTkSuQmCC";
function createFixture(name: string, data: string): NativeFile {
  return {
    uri: `fixture://attachment-field/${name}`,
    name,
    type: "image/png",
    size: 1,
    previewUrl: `data:image/png;base64,${data}`,
  };
}
const DEFAULT_FILES: AttachmentFileEntry[] = [
  { id: "1", file: createFixture("sunset-landscape.png", PIXEL_SUNSET), status: "success" },
  { id: "2", file: createFixture("city-night.png", PIXEL_CITY), status: "success" },
  { id: "3", file: createFixture("morning-coffee.png", PIXEL_COFFEE), status: "success" },
];

function SortableImageItem({
  fileEntry,
  index,
  isCover,
}: {
  fileEntry: AttachmentFileEntry;
  index: number;
  isCover: boolean;
}) {
  return (
    <SortableAttachmentInputItem fileEntry={fileEntry} index={index}>
      {(dragging) => (
        <SeedAttachmentInput.Item fileEntry={fileEntry} dragging={dragging}>
          <SeedAttachmentInput.ItemSurface>
            <SeedAttachmentInput.ItemImage />
            {isCover ? (
              <SeedAttachmentInput.ItemBadge>대표사진</SeedAttachmentInput.ItemBadge>
            ) : null}
            <SeedAttachmentInput.ItemBackdrop status="uploading">
              {(entry) => (
                <ProgressCircle
                  size="24"
                  tone="staticWhite"
                  {...("progress" in entry ? { value: entry.progress } : {})}
                />
              )}
            </SeedAttachmentInput.ItemBackdrop>
          </SeedAttachmentInput.ItemSurface>
          <SeedAttachmentInput.ItemRemoveButton accessibility-label="파일 제거">
            <Icon icon={<IconXmarkFill />} />
          </SeedAttachmentInput.ItemRemoveButton>
        </SeedAttachmentInput.Item>
      )}
    </SortableAttachmentInputItem>
  );
}

export default function AttachmentFieldReorderable() {
  const seedClassName = useSeedClassName({ colorMode: "system" });
  return (
    <view className={seedClassName}>
      <VStack p="x6" width="100%">
        <AttachmentField
          accept="image/*"
          maxFiles={5}
          label="이미지 업로드"
          description="길게 눌러 드래그하여 순서를 변경할 수 있습니다"
          defaultAcceptedFileEntries={DEFAULT_FILES}
        >
          <AttachmentInputReorderable>
            {({ acceptedFileEntries }) =>
              acceptedFileEntries.map((fileEntry, index) => (
                <SortableImageItem
                  key={fileEntry.id}
                  fileEntry={fileEntry}
                  index={index}
                  isCover={index === 0}
                />
              ))
            }
          </AttachmentInputReorderable>
        </AttachmentField>
      </VStack>
    </view>
  );
}

import "@seed-design/lynx-css/base.css";

import { useRef, useState } from "@lynx-js/react";
import type { NativeFile } from "@seed-design/lynx-react";
import { AttachmentField, AttachmentInput } from "@/components/ui/attachment-field";
import { VStack, useSeedClassName } from "@seed-design/lynx-react";

const IMAGE_FILE: NativeFile = {
  uri: "fixture://attachment-field/photo.png",
  name: "photo.png",
  type: "image/png",
  size: 8,
  previewUrl: "https://picsum.photos/seed/attachment-image/200/200",
};
const OTHER_FILE: NativeFile = {
  uri: "fixture://attachment-field/readme.pdf",
  name: "readme.pdf",
  type: "application/pdf",
  size: 5,
};

export default function AttachmentFieldAcceptImage() {
  const seedClassName = useSeedClassName({ colorMode: "system" });
  const pickCount = useRef(0);
  const [errorMessage, setErrorMessage] = useState<string>();
  return (
    <view className={seedClassName}>
      <VStack gap="x4" p="x6" width="100%">
        <AttachmentField
          accept="image/*"
          maxFiles={5}
          label="이미지 업로드"
          description="이미지 파일만 허용됩니다"
          invalid={!!errorMessage}
          errorMessage={errorMessage}
          onSelectFiles={() => [pickCount.current++ === 0 ? IMAGE_FILE : OTHER_FILE]}
          onAcceptedFileEntriesChange={() => setErrorMessage(undefined)}
          onFileReject={() => setErrorMessage("지원하지 않는 파일 형식입니다")}
        >
          <AttachmentInput />
        </AttachmentField>
      </VStack>
    </view>
  );
}

import "@seed-design/lynx-css/base.css";

import type { AttachmentFileEntry, NativeFile } from "@seed-design/lynx-react";
import { AttachmentField, AttachmentInput } from "@/components/ui/attachment-field";
import { VStack, useSeedClassName } from "@seed-design/lynx-react";

const DEFAULT_FILES: AttachmentFileEntry[] = [
  {
    id: "document",
    file: {
      uri: "fixture://attachment-field/document.pdf",
      name: "document.pdf",
      type: "application/pdf",
      size: 5,
    },
    status: "success",
  },
  {
    id: "image",
    file: {
      uri: "fixture://attachment-field/image.png",
      name: "image.png",
      type: "image/png",
      size: 8,
      previewUrl: "https://picsum.photos/seed/attachment-disabled/200/200",
    },
    status: "success",
  },
];

export default function AttachmentFieldDisabled() {
  const seedClassName = useSeedClassName({ colorMode: "system" });
  return (
    <view className={seedClassName}>
      <VStack gap="x4" p="x6" width="100%">
        <AttachmentField
          disabled
          maxFiles={5}
          defaultAcceptedFileEntries={DEFAULT_FILES}
          label="파일 업로드"
          description="비활성화된 AttachmentField"
        >
          <AttachmentInput />
        </AttachmentField>
      </VStack>
    </view>
  );
}

import "@seed-design/lynx-css/base.css";

import type { AttachmentFileEntry, NativeFile } from "@seed-design/lynx-react";
import { AttachmentField, AttachmentInput } from "@/components/ui/attachment-field";
import { VStack, useSeedClassName } from "@seed-design/lynx-react";

const DEFAULT_FILES: AttachmentFileEntry[] = [
  {
    id: "document",
    file: {
      uri: "fixture://attachment-field/document.pdf",
      name: "document.pdf",
      type: "application/pdf",
      size: 5,
    },
    status: "success",
  },
  {
    id: "image",
    file: {
      uri: "fixture://attachment-field/image.png",
      name: "image.png",
      type: "image/png",
      size: 8,
      previewUrl: "https://picsum.photos/seed/attachment-readonly/200/200",
    },
    status: "success",
  },
];

export default function AttachmentFieldReadOnly() {
  const seedClassName = useSeedClassName({ colorMode: "system" });
  return (
    <view className={seedClassName}>
      <VStack gap="x4" p="x6" width="100%">
        <AttachmentField
          readOnly
          maxFiles={5}
          defaultAcceptedFileEntries={DEFAULT_FILES}
          label="첨부 파일"
          description="읽기 전용 상태"
        >
          <AttachmentInput />
        </AttachmentField>
      </VStack>
    </view>
  );
}

import "@seed-design/lynx-css/base.css";

import { useState } from "@lynx-js/react";
import type { AttachmentFileEntry, NativeFile } from "@seed-design/lynx-react";
import { ActionButton, HStack, Text, VStack, useSeedClassName } from "@seed-design/lynx-react";
import { AttachmentField, AttachmentInput } from "@/components/ui/attachment-field";

const PICKED_FILE: NativeFile = {
  uri: "fixture://attachment-field/controlled.txt",
  name: "controlled.txt",
  type: "text/plain",
  size: 5,
};

export default function AttachmentFieldControlled() {
  const seedClassName = useSeedClassName({ colorMode: "system" });
  const [acceptedFileEntries, setAcceptedFileEntries] = useState<AttachmentFileEntry[]>([]);
  function clearFiles() {
    "background only";
    setAcceptedFileEntries([]);
  }
  return (
    <view className={seedClassName}>
      <VStack gap="x4" width="100%">
        <AttachmentField
          maxFiles={5}
          label="Controlled"
          description="최대 5개까지 업로드할 수 있습니다"
          acceptedFileEntries={acceptedFileEntries}
          onAcceptedFileEntriesChange={setAcceptedFileEntries}
          onSelectFiles={() => [PICKED_FILE]}
        >
          <AttachmentInput />
        </AttachmentField>
        <Text>
          현재 파일: {JSON.stringify(acceptedFileEntries.map((entry) => entry.file.name))}
        </Text>
        <HStack gap="x2">
          <ActionButton bindtap={clearFiles} variant="neutralWeak">
            전체 삭제
          </ActionButton>
        </HStack>
      </VStack>
    </view>
  );
}

import "@seed-design/lynx-css/base.css";

import * as React from "@lynx-js/react";
import type { NativeFile } from "@seed-design/lynx-react";
import { AttachmentField, AttachmentInput } from "@/components/ui/attachment-field";
import { TextField, TextFieldInput } from "@/components/ui/text-field";
import { VStack, useSeedClassName } from "@seed-design/lynx-react";

type AttachmentFieldStyle = NonNullable<React.ComponentProps<typeof AttachmentField>["style"]> & {
  "--seed-attachment-input-extend-x": string;
};

const INSET_STYLE: AttachmentFieldStyle = {
  "--seed-attachment-input-extend-x": "var(--seed-dimension-spacing-x-global-gutter)",
};

const MOCKED_FILES: NativeFile[] = Array.from({ length: 8 }, (_, index) => ({
  uri: `fixture://attachment-field/file${index + 1}.txt`,
  name: `file${index + 1}.txt`,
  type: "text/plain",
  size: 1,
}));

export default function AttachmentFieldCustomInset() {
  const seedClassName = useSeedClassName({ colorMode: "system" });
  return (
    <view className={seedClassName}>
      <VStack
        px="spacingX.globalGutter"
        width="400px"
        maxWidth="full"
        bg="palette.gray300"
        borderWidth={1}
        borderColor="stroke.neutralMuted"
      >
        <VStack gap="spacingY.componentDefault" bg="bg.layerDefault">
          <TextField label="이름">
            <TextFieldInput placeholder="홍길동" />
          </TextField>
          <AttachmentField
            maxFiles={8}
            label="첨부파일"
            defaultAcceptedFileEntries={MOCKED_FILES.map((file, index) => ({
              id: `${index}`,
              file,
              status: "pending",
            }))}
            style={INSET_STYLE}
            onSelectFiles={() => [MOCKED_FILES[0]]}
          >
            <AttachmentInput />
          </AttachmentField>
        </VStack>
      </VStack>
    </view>
  );
}

import "@seed-design/lynx-css/base.css";

import type { NativeFile } from "@seed-design/lynx-react";
import { AttachmentField, AttachmentInput } from "@/components/ui/attachment-field";
import { Divider, VStack, useSeedClassName } from "@seed-design/lynx-react";

const PICKED_FILE: NativeFile = {
  uri: "fixture://attachment-field/field.txt",
  name: "field.txt",
  type: "text/plain",
  size: 5,
};

export default function AttachmentFieldField() {
  const seedClassName = useSeedClassName({ colorMode: "system" });
  return (
    <view className={seedClassName}>
      <VStack gap="x8" width="100%">
        <AttachmentField
          maxFiles={3}
          label="첨부파일"
          labelWeight="bold"
          required
          showRequiredIndicator
          invalid
          errorMessage="필수 항목입니다."
        >
          <AttachmentInput />
        </AttachmentField>
        <Divider />
        <AttachmentField
          maxFiles={3}
          label="첨부파일"
          description="파일을 선택하거나 호스트 파일 선택기를 여세요."
          indicator="선택"
          onSelectFiles={() => [PICKED_FILE]}
        >
          <AttachmentInput />
        </AttachmentField>
      </VStack>
    </view>
  );
}

import "@seed-design/lynx-css/base.css";

import IconArrowClockwiseCircularFill from "@karrotmarket/lynx-monochrome-icon/IconArrowClockwiseCircularFill";
import IconXmarkFill from "@karrotmarket/lynx-monochrome-icon/IconXmarkFill";
import {
  AttachmentInput as SeedAttachmentInput,
  Icon,
  VStack,
  useSeedClassName,
} from "@seed-design/lynx-react";
import { ProgressCircle } from "@/components/ui/progress-circle";
import type {
  AttachmentFileEntry,
  AttachmentFileStatusDetails,
  NativeFile,
} from "@seed-design/lynx-react";
import { AttachmentField, AttachmentInput } from "@/components/ui/attachment-field";

const PICKED_FILE: NativeFile = {
  uri: "fixture://attachment-field/custom.png",
  name: "custom.png",
  type: "image/png",
  size: 8,
  previewUrl: "https://picsum.photos/seed/attachment-custom/200/200",
};

function CustomImageItem({
  fileEntry,
  isCover,
  onRetry,
}: {
  fileEntry: AttachmentFileEntry;
  isCover: boolean;
  onRetry?: () => void;
}) {
  return (
    <SeedAttachmentInput.Item fileEntry={fileEntry}>
      <SeedAttachmentInput.ItemSurface>
        <SeedAttachmentInput.ItemImage />
        {isCover ? <SeedAttachmentInput.ItemBadge>대표사진</SeedAttachmentInput.ItemBadge> : null}
        <SeedAttachmentInput.ItemBackdrop status="uploading">
          {(entry) => (
            <ProgressCircle
              size="24"
              tone="staticWhite"
              {...("progress" in entry ? { value: entry.progress } : {})}
            />
          )}
        </SeedAttachmentInput.ItemBackdrop>
        {onRetry ? (
          <SeedAttachmentInput.ItemBackdrop status="error">
            <SeedAttachmentInput.ItemActionButton bindtap={onRetry}>
              <Icon icon={<IconArrowClockwiseCircularFill />} />
              재시도
            </SeedAttachmentInput.ItemActionButton>
          </SeedAttachmentInput.ItemBackdrop>
        ) : null}
      </SeedAttachmentInput.ItemSurface>
      <SeedAttachmentInput.ItemRemoveButton accessibility-label="파일 제거">
        <Icon icon={<IconXmarkFill />} />
      </SeedAttachmentInput.ItemRemoveButton>
    </SeedAttachmentInput.Item>
  );
}

export default function AttachmentFieldCustomizingItems() {
  const seedClassName = useSeedClassName({ colorMode: "system" });
  return (
    <view className={seedClassName}>
      <VStack gap="x4" p="x6" width="100%">
        <AttachmentField
          accept="image/*"
          maxFiles={10}
          label="이미지 업로드"
          description="첫 번째 이미지가 대표사진으로 설정됩니다"
          onSelectFiles={() => [PICKED_FILE]}
          onFileAccept={(entries, { updateFileEntryStatus }) => {
            for (const entry of entries) {
              updateFileEntryStatus(entry.id, { status: "uploading", progress: 0 });
              setTimeout(() => updateFileEntryStatus(entry.id, { status: "success" }), 500);
            }
          }}
        >
          <AttachmentInput>
            {({ acceptedFileEntries, updateFileEntryStatus }) =>
              acceptedFileEntries.map((fileEntry, index) => (
                <CustomImageItem
                  key={fileEntry.id}
                  fileEntry={fileEntry}
                  isCover={index === 0}
                  onRetry={() => {
                    updateFileEntryStatus(fileEntry.id, {
                      status: "uploading",
                      progress: 0,
                    } satisfies AttachmentFileStatusDetails);
                    setTimeout(
                      () => updateFileEntryStatus(fileEntry.id, { status: "success" }),
                      500,
                    );
                  }}
                />
              ))
            }
          </AttachmentInput>
        </AttachmentField>
      </VStack>
    </view>
  );
}