@refraktor/core 0.0.2 → 0.0.4

package/src/components/file-input/file-input.test.tsx

@@ -0,0 +1,134 @@
+import { describe, expect, it, vi } from "vitest";
+import { render, screen, userEvent } from "../../vitest";
+import FileInput from "./file-input";
+
+const createFile = (name: string, type: string, size: number) =>
+    new File([new Uint8Array(size)], name, { type });
+
+describe("@refraktor/core/FileInput", () => {
+    it("supports input wrapper props", async () => {
+        await render(
+            <FileInput
+                label="Documents"
+                description="Upload PDF files"
+                error="At least one file is required"
+            />
+        );
+
+        const input = screen.getByLabelText("Documents");
+
+        expect(input).toHaveAttribute("type", "file");
+        expect(input).toHaveAttribute("aria-invalid", "true");
+        expect(screen.getByText("Upload PDF files")).toBeInTheDocument();
+        expect(
+            screen.getByText("At least one file is required")
+        ).toBeInTheDocument();
+    });
+
+    it("handles single file selection", async () => {
+        const user = userEvent.setup();
+        const onChange = vi.fn();
+
+        await render(<FileInput label="Upload" onChange={onChange} />);
+
+        const input = screen.getByLabelText("Upload") as HTMLInputElement;
+        const file = new File(["hello"], "hello.txt", { type: "text/plain" });
+
+        await user.upload(input, file);
+
+        expect(onChange).toHaveBeenLastCalledWith([file]);
+        expect(screen.getByText("hello.txt")).toBeInTheDocument();
+    });
+
+    it("enforces max files in multiple mode", async () => {
+        const user = userEvent.setup({ applyAccept: false });
+        const onChange = vi.fn();
+        const onReject = vi.fn();
+
+        await render(
+            <FileInput
+                label="Attachments"
+                multiple
+                maxFiles={2}
+                onChange={onChange}
+                onReject={onReject}
+            />
+        );
+
+        const input = screen.getByLabelText("Attachments") as HTMLInputElement;
+        const first = createFile("first.txt", "text/plain", 2);
+        const second = createFile("second.txt", "text/plain", 3);
+        const third = createFile("third.txt", "text/plain", 4);
+
+        await user.upload(input, [first, second, third]);
+
+        expect(onChange).toHaveBeenLastCalledWith([first, second]);
+        expect(onReject).toHaveBeenCalledWith(
+            expect.arrayContaining([
+                expect.objectContaining({
+                    file: third,
+                    code: "too-many-files"
+                })
+            ])
+        );
+    });
+
+    it("rejects invalid type and invalid size files", async () => {
+        const user = userEvent.setup();
+        const onChange = vi.fn();
+        const onReject = vi.fn();
+
+        await render(
+            <FileInput
+                label="Media"
+                multiple
+                accept="image/*,.pdf"
+                minSize={2}
+                maxSize={4}
+                onChange={onChange}
+                onReject={onReject}
+            />
+        );
+
+        const input = screen.getByLabelText("Media") as HTMLInputElement;
+        const valid = createFile("photo.png", "image/png", 3);
+        const invalidType = createFile("script.js", "application/javascript", 3);
+        const tooSmall = createFile("tiny.png", "image/png", 1);
+        const tooLarge = createFile("large.pdf", "application/pdf", 6);
+
+        await user.upload(input, [valid, invalidType, tooSmall, tooLarge]);
+
+        expect(onChange).toHaveBeenLastCalledWith([valid]);
+
+        const rejectionPayload =
+            onReject.mock.calls[onReject.mock.calls.length - 1]?.[0] ?? [];
+        const rejectionCodes = rejectionPayload.map(
+            (item: { code: string }) => item.code
+        );
+
+        expect(rejectionCodes).toEqual(
+            expect.arrayContaining([
+                "file-too-small",
+                "file-too-large"
+            ])
+        );
+    });
+
+    it("clears selected files", async () => {
+        const user = userEvent.setup();
+        const onChange = vi.fn();
+
+        await render(<FileInput label="Receipt" onChange={onChange} />);
+
+        const input = screen.getByLabelText("Receipt") as HTMLInputElement;
+        const file = createFile("receipt.pdf", "application/pdf", 3);
+
+        await user.upload(input, file);
+
+        const clearButton = screen.getByRole("button", { name: "Clear file" });
+        await user.click(clearButton);
+
+        expect(onChange).toHaveBeenLastCalledWith([]);
+        expect(screen.getByText("Select file")).toBeInTheDocument();
+    });
+});

package/src/components/file-input/file-input.tsx

@@ -0,0 +1,224 @@
+import { useId, useMergedRefs } from "@refraktor/utils";
+import { useMemo, useRef, useState } from "react";
+import { XIcon } from "../../icons";
+import { useTheme } from "../../theme";
+import {
+    createClassNamesConfig,
+    createComponentConfig,
+    factory,
+    useClassNames,
+    useProps
+} from "../../utils";
+import { getSize, getVariant } from "../input/input-field/input-field.styles";
+import { InputWrapper } from "../input/input-wrapper";
+import {
+    FileInputClassNames,
+    FileInputFactoryPayload,
+    FileInputProps
+} from "./file-input.types";
+import { formatFileSummary, validateFiles } from "./file-input.utils";
+
+const defaultProps = {
+    variant: "default",
+    size: "md",
+    radius: "default",
+    clearable: true
+} satisfies Partial<FileInputProps>;
+
+const FileInput = factory<FileInputFactoryPayload>((_props, ref) => {
+    const { cx, getRadius } = useTheme();
+    const {
+        id,
+        label,
+        description,
+        error,
+        required,
+        withAsterisk,
+        variant,
+        size,
+        radius,
+        multiple,
+        placeholder,
+        clearable,
+        maxSize,
+        minSize,
+        maxFiles,
+        onChange,
+        onReject,
+        className,
+        classNames,
+        disabled,
+        accept,
+        ...props
+    } = useProps("FileInput", defaultProps, _props);
+
+    const classes = useClassNames<FileInputClassNames>("FileInput", classNames);
+    const _id = useId(id);
+
+    const localRef = useRef<HTMLInputElement>(null);
+    const mergedRef = useMergedRefs(ref, localRef);
+
+    const [files, setFiles] = useState<File[]>([]);
+
+    const hasWrapper = label || description || error;
+    const hasValue = files.length > 0;
+    const describedBy = error
+        ? `${_id}-error`
+        : description
+          ? `${_id}-description`
+          : undefined;
+
+    const summary = useMemo(() => formatFileSummary(files), [files]);
+    const resolvedPlaceholder = placeholder ?? (multiple ? "Select files" : "Select file");
+
+    const openPicker = () => {
+        if (disabled) {
+            return;
+        }
+
+        localRef.current?.click();
+    };
+
+    const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        const selectedFiles = Array.from(event.currentTarget.files ?? []);
+
+        if (selectedFiles.length === 0) {
+            return;
+        }
+
+        const { accepted, rejections } = validateFiles(selectedFiles, {
+            accept,
+            minSize,
+            maxSize,
+            maxFiles,
+            multiple
+        });
+
+        setFiles(accepted);
+        onChange?.(accepted);
+
+        if (rejections.length > 0) {
+            onReject?.(rejections);
+        }
+    };
+
+    const handleTriggerKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+        if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            openPicker();
+        }
+    };
+
+    const handleClear = (event: React.MouseEvent<HTMLButtonElement>) => {
+        event.preventDefault();
+        event.stopPropagation();
+
+        if (disabled) {
+            return;
+        }
+
+        if (localRef.current) {
+            localRef.current.value = "";
+        }
+
+        setFiles([]);
+        onChange?.([]);
+    };
+
+    const field = (
+        <div className={cx("relative w-full", classes.root)}>
+            <input
+                {...props}
+                id={_id}
+                ref={mergedRef}
+                type="file"
+                accept={accept}
+                multiple={multiple}
+                disabled={disabled}
+                required={required}
+                aria-invalid={error ? true : undefined}
+                aria-describedby={describedBy}
+                className="pointer-events-none absolute h-px w-px overflow-hidden whitespace-nowrap border-0 p-0 opacity-0"
+                onClick={(event) => {
+                    event.currentTarget.value = "";
+                }}
+                onChange={handleInputChange}
+            />
+
+            <div
+                role="button"
+                tabIndex={disabled ? -1 : 0}
+                aria-disabled={disabled}
+                aria-invalid={error ? true : undefined}
+                aria-describedby={describedBy}
+                className={cx(
+                    "w-full flex items-center gap-2 transition-all",
+                    "focus-visible:border-[var(--refraktor-primary)]",
+                    "select-none",
+                    getSize(size),
+                    getVariant(variant),
+                    getRadius(radius),
+                    error && "border-[var(--refraktor-colors-red-6)]",
+                    disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer",
+                    classes.trigger,
+                    className
+                )}
+                onClick={openPicker}
+                onKeyDown={handleTriggerKeyDown}
+            >
+                <span
+                    className={cx(
+                        "min-w-0 flex-1 truncate",
+                        classes.value,
+                        hasValue
+                            ? cx("text-[var(--refraktor-text)]", classes.files)
+                            : cx(
+                                  "text-[var(--refraktor-text-tertiary)]",
+                                  classes.placeholder
+                              )
+                    )}
+                >
+                    {hasValue ? summary : resolvedPlaceholder}
+                </span>
+
+                {clearable && hasValue && !disabled && (
+                    <button
+                        type="button"
+                        className={cx(
+                            "inline-flex h-4 w-4 items-center justify-center rounded-full border-0 bg-transparent p-0",
+                            "text-[var(--refraktor-text-secondary)] transition-colors hover:text-[var(--refraktor-text)]",
+                            classes.clear
+                        )}
+                        aria-label={files.length > 1 ? "Clear files" : "Clear file"}
+                        onClick={handleClear}
+                    >
+                        <XIcon size={12} />
+                    </button>
+                )}
+            </div>
+        </div>
+    );
+
+    if (!hasWrapper) {
+        return field;
+    }
+
+    return (
+        <InputWrapper
+            label={label}
+            description={description}
+            error={error}
+            required={required}
+            withAsterisk={withAsterisk}
+            inputId={_id}
+        >
+            {field}
+        </InputWrapper>
+    );
+});
+
+FileInput.displayName = "@refraktor/core/FileInput";
+FileInput.configure = createComponentConfig<FileInputProps>();
+FileInput.classNames = createClassNamesConfig<FileInputClassNames>();
+
+export default FileInput;

package/src/components/file-input/file-input.types.ts

@@ -0,0 +1,78 @@
+import {
+    createClassNamesConfig,
+    createComponentConfig,
+    FactoryPayload
+} from "../../utils";
+import type { InputProps } from "../input";
+
+export type FileInputRejectCode =
+    | "invalid-type"
+    | "file-too-large"
+    | "file-too-small"
+    | "too-many-files";
+
+export interface FileInputRejection {
+    /** Rejected file */
+    file: File;
+
+    /** Rejection reason code */
+    code: FileInputRejectCode;
+
+    /** Human-readable rejection reason */
+    message: string;
+}
+
+export type FileInputClassNames = {
+    root?: string;
+    trigger?: string;
+    value?: string;
+    placeholder?: string;
+    files?: string;
+    clear?: string;
+};
+
+export interface FileInputProps
+    extends Omit<
+        InputProps,
+        | "type"
+        | "value"
+        | "defaultValue"
+        | "onChange"
+        | "leftSection"
+        | "rightSection"
+    > {
+    /** Placeholder shown when no files are selected */
+    placeholder?: string;
+
+    /** Whether to show clear button when value exists @default `true` */
+    clearable?: boolean;
+
+    /** Maximum allowed file size in bytes */
+    maxSize?: number;
+
+    /** Minimum allowed file size in bytes */
+    minSize?: number;
+
+    /** Maximum allowed number of files */
+    maxFiles?: number;
+
+    /** Callback called with accepted files */
+    onChange?: (files: File[]) => void;
+
+    /** Callback called with rejected files */
+    onReject?: (rejections: FileInputRejection[]) => void;
+
+    /** Used for styling different parts of the component */
+    classNames?: FileInputClassNames;
+}
+
+export interface FileInputFactoryPayload extends FactoryPayload {
+    props: FileInputProps;
+    ref: HTMLInputElement;
+    compound: {
+        configure: ReturnType<typeof createComponentConfig<FileInputProps>>;
+        classNames: ReturnType<
+            typeof createClassNamesConfig<FileInputClassNames>
+        >;
+    };
+}

package/src/components/file-input/file-input.utils.test.ts

@@ -0,0 +1,36 @@
+import { describe, expect, it } from "vitest";
+import { matchesAccept, validateFiles } from "./file-input.utils";
+
+const createFile = (name: string, type: string, size: number) =>
+    new File([new Uint8Array(size)], name, { type });
+
+describe("@refraktor/core/FileInput utils", () => {
+    it("matches files against accept rules", () => {
+        const image = createFile("avatar.png", "image/png", 3);
+        const pdf = createFile("sheet.pdf", "application/pdf", 3);
+
+        expect(matchesAccept(image, "image/*")).toBe(true);
+        expect(matchesAccept(pdf, "image/*")).toBe(false);
+        expect(matchesAccept(pdf, ".pdf")).toBe(true);
+    });
+
+    it("rejects invalid file types", () => {
+        const image = createFile("avatar.png", "image/png", 3);
+        const script = createFile("script.js", "application/javascript", 3);
+
+        const result = validateFiles([image, script], {
+            multiple: true,
+            accept: "image/*"
+        });
+
+        expect(result.accepted).toEqual([image]);
+        expect(result.rejections).toEqual(
+            expect.arrayContaining([
+                expect.objectContaining({
+                    file: script,
+                    code: "invalid-type"
+                })
+            ])
+        );
+    });
+});

package/src/components/file-input/file-input.utils.ts

@@ -0,0 +1,130 @@
+import {
+    FileInputRejectCode,
+    FileInputRejection,
+    FileInputProps
+} from "./file-input.types";
+
+type ValidationOptions = Pick<
+    FileInputProps,
+    "accept" | "maxFiles" | "maxSize" | "minSize" | "multiple"
+>;
+
+type ValidationResult = {
+    accepted: File[];
+    rejections: FileInputRejection[];
+};
+
+const createRejection = (
+    file: File,
+    code: FileInputRejectCode,
+    message: string
+): FileInputRejection => ({ file, code, message });
+
+export const matchesAccept = (file: File, accept?: string): boolean => {
+    if (!accept) {
+        return true;
+    }
+
+    const tokens = accept
+        .split(",")
+        .map((token) => token.trim().toLowerCase())
+        .filter(Boolean);
+
+    if (tokens.length === 0) {
+        return true;
+    }
+
+    const fileType = file.type.toLowerCase();
+    const fileName = file.name.toLowerCase();
+
+    return tokens.some((token) => {
+        if (token === "*/*") {
+            return true;
+        }
+
+        if (token.startsWith(".")) {
+            return fileName.endsWith(token);
+        }
+
+        if (token.endsWith("/*")) {
+            return fileType.startsWith(token.slice(0, -1));
+        }
+
+        return fileType === token;
+    });
+};
+
+export const validateFiles = (
+    files: File[],
+    { accept, minSize, maxSize, maxFiles, multiple }: ValidationOptions
+): ValidationResult => {
+    const accepted: File[] = [];
+    const rejections: FileInputRejection[] = [];
+
+    const isMinSizeDefined = typeof minSize === "number" && minSize >= 0;
+    const isMaxSizeDefined = typeof maxSize === "number" && maxSize >= 0;
+    const maxAllowedFiles =
+        typeof maxFiles === "number"
+            ? Math.max(0, Math.floor(maxFiles))
+            : multiple
+              ? Number.POSITIVE_INFINITY
+              : 1;
+
+    files.forEach((file, index) => {
+        if (index >= maxAllowedFiles) {
+            rejections.push(
+                createRejection(
+                    file,
+                    "too-many-files",
+                    `Only ${maxAllowedFiles} file${maxAllowedFiles === 1 ? "" : "s"} allowed`
+                )
+            );
+            return;
+        }
+
+        if (!matchesAccept(file, accept)) {
+            rejections.push(
+                createRejection(file, "invalid-type", "File type is not allowed")
+            );
+            return;
+        }
+
+        if (isMinSizeDefined && file.size < minSize) {
+            rejections.push(
+                createRejection(
+                    file,
+                    "file-too-small",
+                    `File is smaller than ${minSize} bytes`
+                )
+            );
+            return;
+        }
+
+        if (isMaxSizeDefined && file.size > maxSize) {
+            rejections.push(
+                createRejection(
+                    file,
+                    "file-too-large",
+                    `File exceeds ${maxSize} bytes`
+                )
+            );
+            return;
+        }
+
+        accepted.push(file);
+    });
+
+    return { accepted, rejections };
+};
+
+export const formatFileSummary = (files: File[]): string => {
+    if (files.length === 0) {
+        return "";
+    }
+
+    if (files.length === 1) {
+        return files[0].name;
+    }
+
+    return `${files.length} files selected`;
+};

package/src/components/file-input/index.ts

@@ -0,0 +1,2 @@
+export { default as FileInput } from "./file-input";
+export * from "./file-input.types";

package/src/components/for/for.test.tsx

@@ -0,0 +1,66 @@
+import { describe, expect, it, vi } from "vitest";
+import { render, screen } from "../../vitest";
+import For from "./for";
+
+describe("@refraktor/core/For", () => {
+    it("renders fallback for empty collections", async () => {
+        const children = vi.fn(() => <span>Should not render</span>);
+
+        await render(
+            <For each={[]} fallback={<span>No items</span>}>
+                {children}
+            </For>
+        );
+
+        expect(screen.getByText("No items")).toBeInTheDocument();
+        expect(children).not.toHaveBeenCalled();
+    });
+
+    it("renders nothing when collection is empty and fallback is not set", async () => {
+        const { container } = await render(
+            <For each={[]}>{() => <span>Should not render</span>}</For>
+        );
+
+        expect(container).toBeEmptyDOMElement();
+    });
+
+    it("passes item metadata to children", async () => {
+        await render(
+            <For each={["alpha", "beta", "gamma"]}>
+                {(item, meta) => (
+                    <div data-testid={item}>
+                        {item}:{meta.index}:{meta.length}:
+                        {String(meta.isFirst)}:{String(meta.isLast)}:
+                        {meta.previous ?? "none"}:{meta.next ?? "none"}
+                    </div>
+                )}
+            </For>
+        );
+
+        expect(screen.getByTestId("alpha")).toHaveTextContent(
+            "alpha:0:3:true:false:none:beta"
+        );
+        expect(screen.getByTestId("beta")).toHaveTextContent(
+            "beta:1:3:false:false:alpha:gamma"
+        );
+        expect(screen.getByTestId("gamma")).toHaveTextContent(
+            "gamma:2:3:false:true:beta:none"
+        );
+    });
+
+    it("supports iterable collections and calls key extractor", async () => {
+        const values = new Set(["one", "two"]);
+        const keyExtractor = vi.fn((item: string) => item);
+
+        await render(
+            <For each={values} keyExtractor={keyExtractor}>
+                {(item) => <span>{item}</span>}
+            </For>
+        );
+
+        expect(screen.getByText("one")).toBeInTheDocument();
+        expect(screen.getByText("two")).toBeInTheDocument();
+        expect(keyExtractor).toHaveBeenNthCalledWith(1, "one", 0);
+        expect(keyExtractor).toHaveBeenNthCalledWith(2, "two", 1);
+    });
+});