@g4rcez/components 0.0.1 → 0.0.2

package/src/components/form/file-upload.tsx

@@ -1,129 +0,0 @@
-import { FileIcon, Trash2Icon, UploadIcon } from "lucide-react";
-import prettyBytes from "pretty-bytes";
-import React, { Fragment, useEffect, useState } from "react";
-import { DropzoneProps, useDropzone } from "react-dropzone";
-import { Override } from "sidekicker";
-import { Button } from "~/components/core/button";
-
-type Props = Override<React.ComponentProps<"input">, DropzoneProps> & {
-    onDeleteFile?: (file: File) => void;
-    files?: File[];
-    idle?: React.ReactElement;
-    onDrop?: (file: File[]) => void;
-};
-
-const mime = {
-    isImage: (file: File) => file.type.includes("image"),
-};
-
-const FileViewer = (props: { file: File; onDeleteFile?: (file: File) => void }) => {
-    const [info, setInfo] = useState({ url: "", type: "", size: "" });
-    useEffect(() => {
-        if (mime.isImage(props.file)) {
-            const url = URL.createObjectURL(props.file);
-            setInfo({ url, type: "img", size: prettyBytes(props.file.size) });
-            return () => {
-                URL.revokeObjectURL(url);
-            };
-        }
-        setInfo({ url: "", type: props.file.type, size: prettyBytes(props.file.size) });
-    }, [props.file]);
-
-    if (info.type === "img") {
-        return (
-            <div className="flex flex-row gap-jade-200 items-center justify-between w-full">
-                <header className="flex flex-row gap-jade-200 items-center">
-                    <img src={info.url} className="size-jade-500 rounded-jade-xsmall" alt={`Miniatura do arquivo ${props.file.name}`} />
-                    <div className="flex flex-col">
-                        <span>{props.file.name}</span>
-                        <span>{info.size}</span>
-                    </div>
-                </header>
-                <Button
-                    className="isolate"
-                    type="button"
-                    theme="raw"
-                    onClick={(e) => {
-                        e.stopPropagation();
-                        props.onDeleteFile?.(props.file);
-                    }}
-                >
-                    <Trash2Icon />
-                </Button>
-            </div>
-        );
-    }
-    return (
-        <div className="flex flex-row gap-jade-200 items-center justify-between w-full">
-            <header className="flex flex-row gap-4 items-center">
-                <FileIcon size={48} />
-                <div className="flex flex-col text-left justify-start items-start">
-                    <span>{props.file.name}</span>
-                    <span>{info.size}</span>
-                </div>
-            </header>
-            <Button
-                className="isolate"
-                type="button"
-                theme="raw"
-                onClick={(e) => {
-                    e.stopPropagation();
-                    props.onDeleteFile?.(props.file);
-                }}
-            >
-                <Trash2Icon className="text-danger" />
-            </Button>
-        </div>
-    );
-};
-
-const DefaultViewer = (props: { files: File[]; onDeleteFile?: (file: File) => void }) => {
-    return (
-        <ul className="w-full space-y-jade-200">
-            {props.files.map((file) => {
-                return <FileViewer onDeleteFile={props.onDeleteFile} key={file.name} file={file} />;
-            })}
-        </ul>
-    );
-};
-
-const InteractiveArea = (props: { isDragActive: boolean; idle: React.ReactElement; files: File[]; onDeleteFile?: (file: File) => void }) => {
-    if (props.isDragActive) {
-        return <p>Solte os arquivos selecionados</p>;
-    }
-    if (props.files.length > 0) {
-        return <DefaultViewer onDeleteFile={props.onDeleteFile} files={props.files} />;
-    }
-    return <Fragment>{props.idle}</Fragment>;
-};
-
-const DefaultIdle = (
-    <div className="flex flex-col gap-4 justify-center items-center">
-        <UploadIcon size={64} />
-        <p>
-            You can drag your files or{" "}
-            <button className="text-primary underline" type="button">
-                drag to here
-            </button>
-        </p>
-    </div>
-);
-
-export const FileUpload = ({ idle = DefaultIdle, onDeleteFile, onDrop, ...props }: Props) => {
-    const [files, setFiles] = useState<File[]>([]);
-    const drop = (x: File[]) => {
-        onDrop?.(x);
-        setFiles(x);
-    };
-    const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop: drop });
-    return (
-        <div
-            {...getRootProps()}
-            data-active={props.files?.length ? props.files.length > 0 : false}
-            className="flex text-foreground flex-col items-center justify-center border-2 rounded-lg p-6 border-card-border data-[active=true]:bg-card-background data-[active=true]:border-solid data-[active=false]:border-dashed"
-        >
-            <input {...getInputProps(props as any)} name={props.name} id={props.name} />
-            <InteractiveArea onDeleteFile={onDeleteFile} isDragActive={isDragActive} idle={idle} files={props.files ?? files} />
-        </div>
-    );
-};

package/src/components/form/form.tsx

@@ -1,28 +0,0 @@
-"use client";
-import React from "react";
-
-const inputFields = ["INPUT", "SELECT"];
-
-export const formReset = (form?: HTMLFormElement | null) => {
-    if (!form) return;
-    const elements = Array.from(form.elements);
-    elements.forEach((field) => {
-        if (!inputFields.includes(field.tagName)) return;
-        if (field.tagName === "INPUT") {
-            (field as HTMLInputElement).value = (field as HTMLInputElement).defaultValue;
-        }
-        if (field.tagName === "SELECT") {
-            (field as HTMLSelectElement).value = "";
-        }
-        field.setAttribute("data-initialized", "false");
-    });
-};
-
-export const Form = (props: React.ComponentProps<"form">) => {
-    const onSubmit = (e: React.FormEvent<HTMLFormElement>) => {
-        e.persist();
-        e.preventDefault();
-        props.onSubmit?.(e);
-    };
-    return <form {...props} onSubmit={onSubmit} />;
-};

package/src/components/form/input-field.tsx

@@ -1,105 +0,0 @@
-"use client";
-import { CheckCircle, XCircle } from "lucide-react";
-import React, { Fragment, PropsWithChildren } from "react";
-import { PolymorphicProps } from "~/components/core/polymorph";
-import { css } from "~/lib/dom";
-import { Label } from "~/types";
-
-export type FeedbackProps = React.PropsWithChildren<
-    Partial<{
-        title: string | React.ReactElement | React.ReactNode;
-        hideLeft?: boolean;
-        className?: string;
-        placeholder: string;
-        reportStatus: boolean;
-    }>
->;
-export const InputFeedback = ({ reportStatus, hideLeft = false, className, children, title }: FeedbackProps) => (
-    <div className={css("w-full justify-between", hideLeft && children === null ? "hidden" : "flex", className)}>
-        {hideLeft ? null : (
-            <span className="flex items-center gap-1 group-hover:text-primary group-focus-within:text-primary transition-colors group-error:text-danger">
-                {title}
-                {reportStatus ? (
-                    <span className="flex aspect-square h-4 w-4 items-center justify-center">
-                        <CheckCircle
-                            className="hidden aspect-square h-3 w-3 opacity-0 transition-opacity group-assert:block group-assert:text-success group-assert:opacity-100"
-                            aria-hidden="true"
-                            size={16}
-                            strokeWidth={1}
-                            absoluteStrokeWidth
-                        />
-                        <XCircle
-                            className="hidden aspect-square h-3 w-3 opacity-0 transition-opacity group-error:block group-error:opacity-100"
-                            aria-hidden="true"
-                            size={16}
-                            strokeWidth={1}
-                            absoluteStrokeWidth
-                        />
-                    </span>
-                ) : null}
-            </span>
-        )}
-        {children}
-    </div>
-);
-
-export type InputFieldProps<T extends "input" | "select"> = PolymorphicProps<
-    Partial<{
-        error?: string;
-        hideLeft: boolean;
-        container: string;
-        left: Label;
-        optionalText: string;
-        right: Label;
-        rightLabel: Label;
-        id: string;
-        name: string;
-        placeholder: string;
-    }>,
-    T
->;
-
-export const InputField = <T extends "input" | "select">({
-    optionalText = "Optional",
-    left,
-    rightLabel,
-    container,
-    right,
-    children,
-    error,
-    form,
-    id,
-    name,
-    title,
-    placeholder,
-    hideLeft,
-    required,
-}: PropsWithChildren<InputFieldProps<T>>) => {
-    const ID = id ?? name;
-    return (
-        <fieldset data-error={!!error} form={form} className={css("group inline-block w-full", container)}>
-            <label
-                form={form}
-                htmlFor={ID}
-                className="inline-flex w-full cursor-text flex-row flex-wrap justify-between gap-1 text-sm transition-colors empty:hidden group-error:text-danger group-hover:border-primary"
-            >
-                {!hideLeft && !rightLabel ? (
-                    <InputFeedback hideLeft={hideLeft} reportStatus title={title} placeholder={placeholder}>
-                        {optionalText || rightLabel ? (
-                            <Fragment>
-                                {!required ? <span className="text-opacity-70">{optionalText}</span> : null}
-                                {rightLabel ? <Fragment>{rightLabel}</Fragment> : null}
-                            </Fragment>
-                        ) : null}
-                    </InputFeedback>
-                ) : null}
-                <div className="relative group flex w-full flex-row flex-nowrap items-center gap-x-2 gap-y-1 rounded-md border border-input-border bg-transparent transition-colors group-focus-within:border-primary group-hover:border-primary group-error:border-danger">
-                    {left ? <span className="absolute left-0 flex flex-nowrap gap-1 whitespace-nowrap pl-2">{left}</span> : null}
-                    {children}
-                    {right ? <span className="absolute right-0 flex flex-nowrap gap-2 whitespace-nowrap pr-1">{right}</span> : null}
-                </div>
-            </label>
-            <p className="mt-1 text-xs group-error:block group-error:text-danger">{error}</p>
-        </fieldset>
-    );
-};

package/src/components/form/input.tsx

@@ -1,73 +0,0 @@
-"use client";
-import React, { forwardRef, useEffect, useRef } from "react";
-import MaskInput, { TheMaskProps } from "the-mask-input";
-import { FeedbackProps, InputField, InputFieldProps } from "~/components/form/input-field";
-import { css, mergeRefs } from "~/lib/dom";
-import { Override } from "~/types";
-
-export type InputProps = Override<
-    InputFieldProps<"input">,
-    TheMaskProps &
-        FeedbackProps & {
-            next?: string;
-        }
->;
-
-export const Input: React.FC<InputProps> = forwardRef<HTMLInputElement, InputProps>(
-    ({ type = "text", container, next, rightLabel, optionalText, hideLeft = false, right, left, ...props }: InputProps, ref): any => {
-        const id = props.id ?? props.name;
-        const inputRef = useRef<HTMLInputElement>(null);
-
-        useEffect(() => {
-            if (inputRef.current === null) return;
-            const input = inputRef.current;
-            const focus = () => input.setAttribute("data-initialized", "true");
-            const goNextInputImpl = (e: Event) => {
-                const event = e as KeyboardEvent;
-                if (event.key === "Enter" && input.enterKeyHint === "next") {
-                    const focusNext = input.getAttribute("data-next");
-                    if (focusNext) {
-                        const el = document.getElementById(focusNext);
-                        if (el) {
-                            el.focus();
-                            return void event.preventDefault();
-                        }
-                    }
-                }
-            };
-            input.addEventListener("keydown", goNextInputImpl);
-            input.addEventListener("focus", focus);
-            return () => {
-                input.removeEventListener("keydown", goNextInputImpl);
-                input.removeEventListener("focus", focus);
-            };
-        }, []);
-
-        return (
-            <InputField<"input">
-                {...(props as any)}
-                right={right}
-                left={left}
-                hideLeft={hideLeft}
-                rightLabel={rightLabel}
-                optionalText={optionalText}
-                container={css("group inline-block w-full", container)}
-            >
-                <MaskInput
-                    {...props}
-                    type={type}
-                    data-next={next}
-                    ref={mergeRefs(ref, inputRef)}
-                    id={id}
-                    name={id}
-                    className={css(
-                        "input text-foreground group h-10 w-full flex-1 rounded-md bg-transparent p-2 placeholder-input-mask outline-none transition-colors group-error:text-danger group-error:placeholder-input-mask-error",
-                        !!right ? "pe-4" : "",
-                        !!left ? "ps-4" : "",
-                        props.className
-                    )}
-                />
-            </InputField>
-        );
-    }
-) as any;

package/src/components/form/select.tsx

@@ -1,58 +0,0 @@
-"use client";
-import { ChevronDown } from "lucide-react";
-import React, { forwardRef, useEffect, useRef } from "react";
-import { InputField, InputFieldProps } from "~/components/form/input-field";
-import { css, mergeRefs } from "~/lib/dom";
-import { Override } from "~/types";
-
-export type OptionProps = Override<React.ComponentProps<"option">, { value: string }>;
-
-export type SelectProps = Override<InputFieldProps<"select">, { options: OptionProps[] }>;
-
-export const Select = forwardRef<HTMLSelectElement, SelectProps>(({ container, required = true, options, ...props }: SelectProps, ref) => {
-    const inputRef = useRef<HTMLSelectElement>(null);
-    const id = props.id ?? props.name;
-
-    useEffect(() => {
-        if (inputRef.current === null) return;
-        const input = inputRef.current;
-        const focus = () => input.setAttribute("data-initialized", "true");
-        const change = () => input.setAttribute("data-selected", "true");
-        input.addEventListener("focus", focus);
-        input.addEventListener("change", change);
-        return () => {
-            input.removeEventListener("focus", focus);
-            input.removeEventListener("change", change);
-        };
-    }, []);
-
-    return (
-        <InputField<"select">
-            {...(props as any)}
-            required={required}
-            container={css("group inline-block w-full", container)}
-            right={<ChevronDown size={20} />}
-        >
-            <select
-                {...props}
-                ref={mergeRefs(ref, inputRef)}
-                id={id}
-                name={id}
-                required={required}
-                data-selected={!!props.value || false}
-                className={css(
-                    "input bg-transparent text-foreground select group h-10 w-full flex-1 rounded-md p-2 placeholder-input-placeholder outline-none transition-colors group-error:text-danger group-error:placeholder-input-mask-error",
-                    "data-[selected=false]:text-input-placeholder",
-                    props.className
-                )}
-            >
-                <option value="" hidden disabled>
-                    {props.placeholder}
-                </option>
-                {options.map((option) => (
-                    <option key={`${id}-select-option-${option.value}`} {...option} children={option.label ?? option.value} />
-                ))}
-            </select>
-        </InputField>
-    );
-});

package/src/components/form/switch.tsx

@@ -1,40 +0,0 @@
-import React, { useId, useState } from "react";
-
-type SwitchProps = Omit<React.ComponentProps<"input">, "onChange"> & { onCheck?: (nextValue: boolean) => void };
-
-export const Switch = ({ children, ...props }: SwitchProps) => {
-    const id = useId();
-    const [innerChecked, setInnerChecked] = useState(false);
-    const checked = props.checked ?? innerChecked;
-
-    const onCheck = (e: React.MouseEvent<HTMLButtonElement>) => {
-        const button = e.target as HTMLButtonElement;
-        const checked = !(button.dataset.checked === "true");
-        setInnerChecked(checked);
-        props?.onCheck?.(checked);
-    };
-
-    return (
-        <div className="flex items-center">
-            <input {...props} hidden type="checkbox" checked={checked} onChange={(e) => setInnerChecked(e.target.checked)} />
-            <button
-                type="button"
-                role="switch"
-                onClick={onCheck}
-                aria-checked={checked}
-                data-checked={checked}
-                aria-labelledby={`${id}-label`}
-                className="relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent data-[checked=false]:bg-input-switch-bg data-[checked=true]:bg-primary transition-colors ease-in-out focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2"
-            >
-                <span
-                    aria-hidden="true"
-                    data-checked={checked}
-                    className="data-[checked=false]:bg-disabled data-[checked=true]:bg-input-switch pointer-events-none inline-block size-5 aspect-square data-[checked=false]translate-x-0 data-[checked=true]:translate-x-5 transform rounded-full shadow ring-0 transition ease-in-out"
-                />
-            </button>
-            <span className="ml-3 text-sm" id={`${id}-label`}>
-                <span className="font-medium text-foreground">{children}</span>
-            </span>
-        </div>
-    );
-};

package/src/components/index.ts

@@ -1,14 +0,0 @@
-export * from "./form/autocomplete";
-export * from "./form/input";
-export * from "./form/select";
-export * from "./form/file-upload";
-export * from "./form/form";
-export * from "./form/select";
-export * from "./form/switch";
-export * from "./form/input-field";
-export * from "./core/button";
-export * from "./core/polymorph";
-export * from "./display/card";
-export * from "./floating/dropdown";
-export * from "./floating/tooltip";
-export * from "./table/index";

package/src/components/table/filter.tsx

@@ -1,186 +0,0 @@
-import { Symbols } from "linq-arrays";
-import { PlusIcon, SearchIcon, Trash2Icon } from "lucide-react";
-import React, { Fragment } from "react";
-import { Dropdown } from "~/components/floating/dropdown";
-import { Input } from "~/components/form/input";
-import { OptionProps, Select } from "~/components/form/select";
-import { uuid } from "~/lib/fns";
-import { Label } from "~/types";
-import { Col, ColType, getLabel, TableConfiguration, valueFromType } from "./table-lib";
-
-const operators = {
-    contains: { value: "contains", label: "Contains", symbol: "includes" },
-    is: { value: "is", label: "Is", symbol: "is" },
-    isNot: { value: "isNot", label: "Is not", symbol: "!==" },
-    notContains: { value: "notContains", label: "Does not contains", symbol: "notIncludes" },
-    lessThan: { value: "lessThan", label: "Less Than", symbol: "<=" },
-    greaterThan: { value: "greaterThan", label: "Greater than", symbol: ">=" },
-    startsWith: { value: "startsWith", label: "Starts with", symbol: "startsWith" },
-    endsWith: { value: "endsWith", label: "Ends with", symbol: "endsWith" },
-} satisfies Record<string, OptionProps & { symbol: Symbols }>;
-
-type Operator = keyof typeof operators;
-
-type Operators = (typeof operators)[Operator];
-
-const operatorOptions: Partial<Record<ColType, OptionProps[]>> = {
-    [ColType.Text]: [operators.is, operators.isNot, operators.contains, operators.notContains, operators.startsWith, operators.endsWith],
-    [ColType.Boolean]: [operators.is, operators.isNot],
-    [ColType.Number]: [operators.is, operators.isNot, operators.greaterThan, operators.lessThan],
-};
-
-type FilterValue = string | number | string[] | boolean;
-
-export type FilterConfig<T extends {} = {}> = {
-    id: string;
-    label: Label;
-    name: keyof T;
-    type: ColType;
-    operation: Operators;
-    value: FilterValue;
-};
-
-type Props<T extends {}> = TableConfiguration<
-    T,
-    {
-        cols: Col<T>[];
-        filters: FilterConfig<T>[];
-        set: React.Dispatch<React.SetStateAction<FilterConfig<T>[]>>;
-    }
->;
-
-export const createFilterFromCol = <T extends {}>(f: Col<T>, rest: Partial<FilterConfig<T>> = {}): FilterConfig<T> => {
-    const name = f.id;
-    const type = f.type ?? ColType.Text;
-    const operatorId = operatorOptions[type]?.[0]!.value as Operator;
-    const operation = operators[operatorId];
-    return { id: uuid(), operation, label: getLabel(f), name, type, value: "", ...rest };
-};
-
-export const Filter = <T extends {}>(props: Props<T>) => {
-    const onAddFilter = () => {
-        const col = props.cols.at(0)!;
-        props.set((prev) => [...prev, createFilterFromCol(col)]);
-    };
-
-    const onSelectProperty = (e: React.ChangeEvent<HTMLSelectElement>) => {
-        const changedId = e.target.dataset.id || "";
-        const newId = e.target.value;
-        props.set((prev) =>
-            prev.map((x) => {
-                if (changedId !== x.id) return x;
-                const col = props.cols.find((x) => newId === x.id)!;
-                return createFilterFromCol(col, { value: "" });
-            })
-        );
-    };
-
-    const onSelectOperation = (e: React.ChangeEvent<HTMLSelectElement>) => {
-        const id = e.target.dataset.id || "";
-        const operator = e.target.value;
-        props.set((prev) => prev.map((x) => (x.id === id ? { ...x, operation: operators[operator as Operator] } : x)));
-    };
-
-    const onDelete = (e: React.MouseEvent<HTMLButtonElement>) => {
-        const id = e.currentTarget.dataset.id || "";
-        console.log({ id, f: props.filters });
-        props.set((prev) => prev.filter((x) => x.id !== id));
-    };
-
-    const onChangeValue = (e: React.ChangeEvent<HTMLInputElement>) => {
-        const id = e.target.dataset.id || "";
-        const value = valueFromType(e.target);
-        props.set((prev) => prev.map((x) => (x.id === id ? { ...x, value } : x)));
-    };
-
-    return (
-        <Fragment>
-            <Dropdown
-                arrow={false}
-                title="Filters"
-                trigger={
-                    <span className="flex items-center gap-1 proportional-nums">
-                        <SearchIcon size={14} />
-                        Filtros {props.filters.length === 0 ? "" : ` (${props.filters.length})`}
-                    </span>
-                }
-            >
-                <ul className="mt-4 space-y-2">
-                    {props.filters.map((filter) => {
-                        const operators = operatorOptions[filter.type]!;
-                        return (
-                            <li key={`filter-select-${filter.id}`} className="flex flex-nowrap gap-3">
-                                <Select
-                                    title="Filtro"
-                                    options={props.options}
-                                    placeholder="Seleciona um campo..."
-                                    value={filter.name as string}
-                                    data-id={filter.id}
-                                    onChange={onSelectProperty}
-                                />
-                                <Select
-                                    title="Tipo do filtro"
-                                    data-id={filter.id}
-                                    onChange={onSelectOperation}
-                                    value={filter.operation.value}
-                                    options={operators}
-                                    placeholder="Operação..."
-                                />
-                                <Input
-                                    data-id={filter.id}
-                                    onChange={onChangeValue}
-                                    placeholder="Buscar por..."
-                                    title="Valor do filtro"
-                                    type={filter.type as any}
-                                    value={filter.value as string}
-                                />
-                                <div className="flex items-center justify-center mt-5">
-                                    <button data-id={filter.id} type="button" onClick={onDelete}>
-                                        <Trash2Icon className="text-danger" size={16} />
-                                    </button>
-                                </div>
-                            </li>
-                        );
-                    })}
-                    <li>
-                        <button type="button" onClick={onAddFilter} className="text-primary flex items-center gap-1">
-                            <PlusIcon size={14} /> Adicionar novo filtro
-                        </button>
-                    </li>
-                </ul>
-            </Dropdown>
-        </Fragment>
-    );
-};
-
-type ColumnHeaderFilterProps<T extends {}> = {
-    filter: FilterConfig<T>;
-    set: React.Dispatch<React.SetStateAction<FilterConfig<T>[]>>;
-};
-
-export const ColumnHeaderFilter = <T extends {}>({ filter, set }: ColumnHeaderFilterProps<T>) => {
-    const onSelectOperation = (e: React.ChangeEvent<HTMLSelectElement>) => {
-        const operator = e.target.value;
-        const id = e.target.dataset.id || "";
-        set((prev) => prev.map((x) => (x.id === id ? { ...x, operation: operators[operator as Operator] } : x)));
-    };
-
-    const onChangeValue = (e: React.ChangeEvent<HTMLInputElement>) => {
-        const id = e.target.dataset.id || "";
-        const value = valueFromType(e.target);
-        set((prev) => prev.map((x) => (x.id === id ? { ...x, value } : x)));
-    };
-
-    return (
-        <div className="flex flex-nowrap items-center gap-4 py-2">
-            <Select onChange={onSelectOperation} value={filter.operation.value} options={operatorOptions[filter.type]!} placeholder="Operation..." />
-            <Input
-                type={filter.type as any}
-                data-id={filter.id}
-                onChange={onChangeValue}
-                placeholder="Looking for..."
-                value={filter.value as string}
-            />
-        </div>
-    );
-};