@refraktor/core 0.0.4 → 0.0.5

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

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

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

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

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

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

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

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

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