@refraktor/core 0.0.3 → 0.0.4

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);
+    });
+});

package/src/components/for/for.tsx

@@ -0,0 +1,53 @@
+import { Fragment } from "react";
+import type { JSX } from "react";
+import type { ForProps } from "./for.types";
+
+const normalize = <T,>(collection?: ForProps<T>["each"]): T[] => {
+    if (!collection) {
+        return [];
+    }
+
+    if (Array.isArray(collection)) {
+        return collection.slice();
+    }
+
+    return Array.from(collection as Iterable<T> | ArrayLike<T>);
+};
+
+const For = <T,>({
+    each,
+    children,
+    fallback = null,
+    keyExtractor
+}: ForProps<T>): JSX.Element | null => {
+    const items = normalize(each);
+
+    if (items.length === 0) {
+        return fallback === null ? null : <>{fallback}</>;
+    }
+
+    const lastIndex = items.length - 1;
+
+    return (
+        <>
+            {items.map((item, index) => {
+                const meta = {
+                    index,
+                    length: items.length,
+                    isFirst: index === 0,
+                    isLast: index === lastIndex,
+                    previous: index > 0 ? items[index - 1] : undefined,
+                    next: index < lastIndex ? items[index + 1] : undefined
+                };
+
+                const key = keyExtractor?.(item, index) ?? index;
+
+                return <Fragment key={key}>{children(item, meta)}</Fragment>;
+            })}
+        </>
+    );
+};
+
+For.displayName = "@refraktor/core/For";
+
+export default For;

package/src/components/for/for.types.ts

@@ -0,0 +1,40 @@
+import { Key, ReactNode } from "react";
+
+/**
+ * Supported collections for the For component. Accepts arrays, array-likes and iterables.
+ */
+export type ForList<T> = readonly T[] | Iterable<T> | ArrayLike<T>;
+
+/**
+ * Metadata passed to the render function for each item in the collection.
+ */
+export type ForRenderMeta<T> = {
+    /** Index of the current item in the collection. */
+    index: number;
+
+    /** Total number of items in the collection. */
+    length: number;
+
+    /** Indicates whether the current item is the first in the collection. */
+    isFirst: boolean;
+
+    /** Indicates whether the current item is the last in the collection. */
+    isLast: boolean;
+
+    /** Previous item in the collection if it exists. */
+    previous?: T;
+
+    /** Next item in the collection if it exists. */
+    next?: T;
+};
+
+export type ForProps<T> = {
+    /** Collection that should be iterated. */
+    each?: ForList<T> | null;
+    /** Render function that receives the current item and helpful metadata. */
+    children: (item: T, meta: ForRenderMeta<T>) => ReactNode;
+    /** Node rendered when the collection is empty. */
+    fallback?: ReactNode;
+    /** Optional function to derive a stable React key for each item. */
+    keyExtractor?: (item: T, index: number) => Key;
+};

package/src/components/for/index.ts

@@ -0,0 +1,2 @@
+export { default as For } from "./for";
+export type { ForList, ForProps, ForRenderMeta } from "./for.types";

package/src/components/index.ts

@@ -4,19 +4,25 @@ export * from "./badge";
 export * from "./breadcrumbs";
 export * from "./button";
 export * from "./checkbox";
+export * from "./chip";
 export * from "./color-swatch";
 export * from "./drawer";
+export * from "./file-input";
+export * from "./for";
 export * from "./input";
 export * from "./loader";
 export * from "./modal";
 export * from "./menu";
 export * from "./number-input";
+export * from "./password-input";
+export * from "./pin-input";
 export * from "./pagination";
 export * from "./popover";
 export * from "./portal";
 export * from "./progress";
 export * from "./progress-circle";
 export * from "./radio";
+export * from "./scroll-area";
 export * from "./select";
 export * from "./segmented-control";
 export * from "./slider";