File input

import { FileInput, type FileUploadContext, type FileUploadResult } from "@bosunkit/components/file-input";
import type { ReactElement } from "react";

export const description: string =
  "A PDF up to 100 MB, sent as it is added by an action that reports its progress; this one stores nothing.";

/** An upload that reports its progress over a second and a half and stores nothing. */
function pretendUpload(_file: File, context: FileUploadContext): Promise<FileUploadResult> {
  return new Promise<FileUploadResult>((resolve: (result: FileUploadResult) => void): void => {
    let sent: number = 0;
    const timer: ReturnType<typeof setInterval> = setInterval((): void => {
      sent += 0.2;
      context.onProgress(sent);
      if (sent >= 1) {
        clearInterval(timer);
        resolve({ status: "uploaded" });
      }
    }, 300);
    context.signal.addEventListener("abort", (): void => {
      clearInterval(timer);
    });
  });
}

export default function Showcase(): ReactElement {
  return (
    <div style={{ maxInlineSize: "32rem" }}>
      <FileInput
        appearance="outlined"
        label="Insurance certificate"
        accept={["application/pdf"]}
        acceptLabel="a PDF"
        maxBytes={100 * 1024 * 1024}
        uploadAction={pretendUpload}
        hint="The certificate the insurer sent, as a PDF."
      />
    </div>
  );
}

import { FileInput } from "@bosunkit/components/file-input";
import type { ReactElement } from "react";

export const description: string =
  "Up to five photos of a repair, with a button that opens a phone's rear camera; images show as thumbnails.";

export default function Photos(): ReactElement {
  return (
    <div style={{ maxInlineSize: "32rem" }}>
      <FileInput
        appearance="outlined"
        label="Photos of the repair"
        accept={["image/*"]}
        acceptLabel="a photo"
        multiple
        maxFiles={5}
        maxBytes={100 * 1024 * 1024}
        capture="environment"
      />
    </div>
  );
}

import { FileInput } from "@bosunkit/components/file-input";
import type { ReactElement } from "react";

export const description: string = "The button variant, for a dialog with little room: no area to drop on.";

export default function ButtonOnly(): ReactElement {
  return (
    <div style={{ maxInlineSize: "32rem" }}>
      <FileInput appearance="outlined" label="Receipt" variant="button" accept={["image/*", "application/pdf"]} />
    </div>
  );
}

import { FileInput } from "@bosunkit/components/file-input";
import type { ReactElement } from "react";

export const description: string =
  "A file bosund refused, kept in the list with its reason, beside one that uploaded and opens from its name.";

export default function Refused(): ReactElement {
  return (
    <div style={{ maxInlineSize: "32rem" }}>
      <FileInput
        appearance="outlined"
        label="Manuals"
        multiple
        defaultValue={[
          {
            id: "1",
            name: "volvo-penta-d2-40.pdf",
            size: 4_718_592,
            type: "application/pdf",
            status: "uploaded",
            url: "#",
          },
          {
            id: "2",
            name: "windlass.pdf",
            size: 146_800_640,
            type: "application/pdf",
            status: "rejected",
            error: "windlass.pdf is 140 MB, larger than the 100 MB this field takes. Choose a smaller file.",
          },
        ]}
      />
    </div>
  );
}

import { FileInput } from "@bosunkit/components/file-input";
import { FormField } from "@bosunkit/components/form-field";
import type { ReactElement } from "react";

export const description: string = "Plain, inside a form field that names it; the file goes with the form.";

export default function Plain(): ReactElement {
  return (
    <div style={{ maxInlineSize: "32rem" }}>
      <FormField label="Crew photo" hint="A passport-style photo for the crew list.">
        <FileInput accept={["image/jpeg", "image/png"]} acceptLabel="a JPEG or a PNG" name="photo" />
      </FormField>
    </div>
  );
}

import { FileInput } from "@bosunkit/components/file-input";
import type { ReactElement } from "react";

export const description: string = "Read-only: the stored files, each opening from its name, with nothing to change.";

export default function ReadOnly(): ReactElement {
  return (
    <div style={{ maxInlineSize: "32rem" }}>
      <FileInput
        appearance="outlined"
        label="Certificates"
        readOnly
        defaultValue={[
          { id: "1", name: "stcw-basic-safety.pdf", size: 812_000, type: "application/pdf", status: "uploaded", url: "#" },
          { id: "2", name: "vhf-src.pdf", size: 455_000, type: "application/pdf", status: "uploaded", url: "#" },
        ]}
      />
    </div>
  );
}