@g4rcez/components 0.0.1

package/src/components/table/filter.tsx

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

package/src/components/table/group.tsx

@@ -0,0 +1,123 @@
+"use client";
+import { LayoutGroup, Reorder, useDragControls, useMotionValue } from "framer-motion";
+import Linq from "linq-arrays";
+import { GripVerticalIcon, GroupIcon, Trash2Icon } from "lucide-react";
+import React, { Fragment, useState } from "react";
+import { keys } from "sidekicker";
+import { Button } from "~/components/core/button";
+import { Dropdown } from "~/components/floating/dropdown";
+import { Select } from "~/components/form/select";
+import { uuid } from "~/lib/fns";
+import { Col, createOptionCols, TableConfiguration } from "./table-lib";
+
+export type GroupItem<T extends {}> = Col<T> & {
+    rows: T[];
+    index: number;
+    groupId: string;
+    groupName: string;
+    groupKey: keyof T;
+};
+
+type Props<T extends {}> = TableConfiguration<
+    T,
+    {
+        rows: T[];
+        groups: GroupItem<T>[];
+        setGroups: React.Dispatch<React.SetStateAction<GroupItem<T>[]>>;
+    }
+>;
+
+const Item = ({ item, onPointerDown }: { item: GroupItem<any>; onPointerDown: any }) => {
+    const y = useMotionValue(0);
+    return (
+        <Reorder.Item
+            onPointerDown={onPointerDown}
+            id={item.groupId}
+            className="flex flex-row items-center gap-2"
+            key={item.groupId}
+            value={item}
+            style={{ y }}
+        >
+            <button className="cursor-grab">
+                <GripVerticalIcon size={14} />
+            </button>
+            <span>{item.groupName}</span>
+        </Reorder.Item>
+    );
+};
+
+export const Group = <T extends {}>(props: Props<T>) => {
+    const options = createOptionCols(props.cols);
+    const controls = useDragControls();
+    const [group, setGroup] = useState((props.groups[0]?.thead as string) || "");
+
+    const onChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+        const select = e.target;
+        const key = select.value as keyof T;
+        const index = select.options.selectedIndex;
+        const label = select.options.item(index)?.label || "";
+        setGroup(label);
+        const groupBy = new Linq(props.rows).GroupBy(key);
+        const col = props.cols.find((x) => x.id === key)!;
+        props.setGroups(
+            keys(groupBy).map((groupName, index): GroupItem<T> => {
+                const rows = groupBy[groupName];
+                return { ...col, groupId: uuid(), groupKey: key, index, rows, groupName: groupName as string };
+            })
+        );
+    };
+
+    const onDelete = (e: React.MouseEvent<HTMLButtonElement>) => props.setGroups([]);
+
+    return (
+        <Fragment>
+            <Dropdown
+                arrow={false}
+                title="Groups"
+                trigger={
+                    <span className="flex items-center gap-1 proportional-nums">
+                        <GroupIcon size={14} />
+                        Groups{props.groups.length > 0 ? ` - ${group}(${props.groups.length})` : ""}
+                    </span>
+                }
+            >
+                <div className="flex flex-nowrap items-center">
+                    <Select value={group} title="Tipo de agrupamento" onChange={onChange} options={options} placeholder="Agrupar por..." />
+                    <Button className="mt-4" onClick={onDelete} theme="raw" data-id={group}>
+                        <Trash2Icon size={16} className="text-danger" />
+                    </Button>
+                </div>
+                {props.groups.length > 0 ? (
+                    <section className="my-4">
+                        <header>
+                            <h2 className="text-xl font-medium">Ordenar grupos</h2>
+                        </header>
+                        <LayoutGroup>
+                            <Reorder.Group
+                                axis="y"
+                                className="relative space-y-2"
+                                dragListener={false}
+                                dragControls={controls}
+                                drag
+                                layoutScroll
+                                onReorder={props.setGroups}
+                                values={props.groups}
+                            >
+                                {props.groups.map((item) => (
+                                    <Item
+                                        key={item.groupId}
+                                        item={item as any}
+                                        onPointerDown={(e: any) => {
+                                            controls.start(e);
+                                            props.setGroups([...props.groups]);
+                                        }}
+                                    />
+                                ))}
+                            </Reorder.Group>
+                        </LayoutGroup>
+                    </section>
+                ) : null}
+            </Dropdown>
+        </Fragment>
+    );
+};

package/src/components/table/index.tsx

@@ -0,0 +1,207 @@
+import { AnimatePresence, motion } from "framer-motion";
+import Linq from "linq-arrays";
+import React, { Fragment, HTMLAttributes, useMemo } from "react";
+import { TableBodyProps, TableVirtuoso } from "react-virtuoso";
+import { Is } from "sidekicker";
+import { useReducer } from "use-typed-reducer";
+import { OptionProps } from "~/components/form/select";
+import { path } from "~/lib/fns";
+import { FilterConfig } from "./filter";
+import { GroupItem } from "./group";
+import { Metadata } from "./metadata";
+import { multiSort, Sorter } from "./sort";
+import { CellPropsElement, Col, ColMatrix, createOptionCols, TableOperationProps } from "./table-lib";
+import { TableHeader } from "./thead";
+
+type InnerTableProps<T extends {}> = HTMLAttributes<HTMLTableElement> &
+    TableOperationProps<T> & {
+        loading?: boolean;
+        group?: GroupItem<T>;
+        groups?: GroupItem<T>[];
+        optionCols: OptionProps[];
+        index: number;
+        rows: T[];
+        cols: Col<T>[];
+        sorters?: Sorter<T>[];
+        showMetadata?: boolean;
+        filters?: FilterConfig<T>[];
+        setGroups: React.Dispatch<React.SetStateAction<GroupItem<T>[]>>;
+    };
+
+const TableBody = React.forwardRef((props: TableBodyProps, ref: any) => (
+    <tbody {...props} className={`divide-y divide-table-row ${props.className ?? ""}`} ref={ref}>
+        <AnimatePresence>{props.children}</AnimatePresence>
+    </tbody>
+));
+
+const VirtualTable = React.forwardRef((props: any, ref) => (
+    <table {...props} ref={ref as any} className={`table min-w-full divide-y divide-table-border table-auto text-left ${props.className ?? ""}`} />
+));
+
+const Thead = React.forwardRef((props: any, ref: any) => <thead {...props} className="bg-content-bg shadow-xs group:sticky top-0" ref={ref} />);
+
+const TRow = React.forwardRef((props: any, ref: any) => <tr {...props} ref={ref} className={`table-row ${props.className ?? ""}`} />);
+
+const components = {
+    TableHead: Thead as any,
+    Table: VirtualTable as any,
+    TableBody: TableBody as any,
+    TableRow: TRow as any,
+};
+
+const loadingArray = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
+
+const InnerTable = <T extends {}>({ filters, setCols, setFilters, sorters, cols, setSorters, ...props }: InnerTableProps<T>) => {
+    const rows = useMemo(() => {
+        if (props.loading) return loadingArray as any as T[];
+        const linq = new Linq(props.rows);
+        if (filters.length > 0) {
+            filters.forEach((x) => (x.value === "" || Number.isNaN(x.value) ? undefined : linq.Where(x.name, x.operation.symbol, x.value)));
+        }
+        if (sorters.length === 0) return linq.Select();
+        return multiSort(linq.Select(), sorters);
+    }, [props.rows, filters, sorters, props.loading]);
+
+    return (
+        <div className="group border border-table-border rounded-lg px-1 min-w-full">
+            <TableVirtuoso
+                data={rows}
+                totalCount={rows.length}
+                useWindowScroll
+                components={components}
+                fixedHeaderContent={() => (
+                    <TableHeader<T>
+                        sorters={sorters}
+                        setSorters={setSorters}
+                        filters={filters}
+                        setFilters={setFilters}
+                        headers={cols}
+                        setCols={setCols}
+                    />
+                )}
+                itemContent={(index, row) =>
+                    cols.map((col, colIndex) => {
+                        const matrix: ColMatrix = `${colIndex},${index}`;
+                        const value: any = path(row, col.id as any);
+                        const Component: React.FC<CellPropsElement<T, any>> = col.Element as any;
+                        return (
+                            <td
+                                {...col.cellProps}
+                                data-matrix={matrix}
+                                key={`accessor-${index}-${colIndex}`}
+                                className="px-2 h-14 border-none first:table-cell hidden md:table-cell"
+                            >
+                                {props.loading ? (
+                                    <div className="animate-pulse h-2 bg-table-border rounded" />
+                                ) : Component ? (
+                                    <Component row={row} matrix={matrix} col={col} rowIndex={index} value={value} />
+                                ) : (
+                                    <Fragment>{Is.nil(value) ? "" : value}</Fragment>
+                                )}
+                            </td>
+                        );
+                    })
+                }
+            />
+        </div>
+    );
+};
+
+export type TableProps<T extends {}> = Pick<InnerTableProps<T>, "cols" | "rows"> & {
+    name: string;
+} & Partial<TableOperationProps<T> & { reference: keyof T; loading: boolean }>;
+
+const dispatcherFun = <Prev extends any, T extends Prev | ((prev: Prev) => Prev)>(prev: Prev, setter: T) =>
+    typeof setter === "function" ? setter(prev) : setter;
+
+type DispatcherFun<T extends any> = T | ((prev: T) => T);
+
+export const Table = <T extends {}>(props: TableProps<T>) => {
+    const optionCols = useMemo(() => createOptionCols(props.cols), [props.cols]);
+    const [state, dispatch] = useReducer(
+        {
+            cols: props.cols as Col<T>[],
+            filters: (props.filters ?? []) as FilterConfig<T>[],
+            groups: (props.groups ?? []) as GroupItem<T>[],
+            sorters: (props.sorters ?? []) as Sorter<T>[],
+        },
+        (get) => {
+            const create =
+                <T extends any>(key: string) =>
+                (arg: T) => {
+                    const state = get.state();
+                    return { ...state, [key]: dispatcherFun(state[key as keyof typeof state], arg as any) };
+                };
+            return {
+                cols: create<DispatcherFun<Col<T>[]>>("cols"),
+                filters: create<DispatcherFun<FilterConfig<T>[]>>("filters"),
+                groups: create<DispatcherFun<GroupItem<T>[]>>("groups"),
+                sorters: create<DispatcherFun<Sorter<T>[]>>("sorters"),
+            };
+        },
+        {
+            interceptor: [
+                (state) => {
+                    props.set?.(state as any);
+                    return state;
+                },
+            ],
+        }
+    );
+
+    return (
+        <div className="relative min-w-full">
+            <Metadata
+                setCols={dispatch.cols}
+                rows={props.rows}
+                cols={state.cols}
+                filters={state.filters}
+                groups={state.groups}
+                options={optionCols}
+                setFilters={dispatch.filters}
+                setGroups={dispatch.groups}
+                setSorters={dispatch.sorters}
+                sorters={state.sorters}
+            />
+            {state.groups.length === 0 ? (
+                <InnerTable
+                    {...props}
+                    cols={state.cols}
+                    filters={state.filters}
+                    groups={state.groups}
+                    index={0}
+                    optionCols={optionCols}
+                    options={optionCols}
+                    setCols={dispatch.cols}
+                    setFilters={dispatch.filters}
+                    setGroups={dispatch.groups}
+                    setSorters={dispatch.sorters}
+                    sorters={state.sorters}
+                />
+            ) : (
+                <div className="flex flex-wrap gap-4">
+                    {state.groups.map((group, index) => (
+                        <motion.div className="min-w-full" key={`group-${group.groupId}`}>
+                            <InnerTable
+                                {...props}
+                                cols={state.cols}
+                                filters={state.filters}
+                                group={group}
+                                groups={state.groups}
+                                index={index}
+                                optionCols={optionCols}
+                                options={optionCols}
+                                rows={group.rows}
+                                setCols={dispatch.cols}
+                                setFilters={dispatch.filters}
+                                setGroups={dispatch.groups}
+                                setSorters={dispatch.sorters}
+                                sorters={state.sorters}
+                            />
+                        </motion.div>
+                    ))}
+                </div>
+            )}
+        </div>
+    );
+};

package/src/components/table/metadata.tsx

@@ -0,0 +1,55 @@
+import { Filter } from "./filter";
+import { Group } from "./group";
+import { Sort } from "./sort";
+import { TableOperationProps, valueFromType } from "./table-lib";
+
+export const Metadata = <T extends {}>(props: TableOperationProps<T>) => (
+    <header className="min-w-full mb-1">
+        <div className="flex flex-wrap min-w-full items-center justify-between gap-x-4 gap-y-1">
+            <div className="flex w-fit items-centeend gap-4 whitespace-nowrap py-2">
+                <p>
+                    <Filter cols={props.cols} options={props.options} filters={props.filters} set={props.setFilters} />
+                </p>
+                <p>
+                    <Sort options={props.options} cols={props.cols} sorters={props.sorters} set={props.setSorters} />
+                </p>
+                <p>
+                    <Group rows={props.rows} groups={props.groups} setGroups={props.setGroups} options={props.options} cols={props.cols} />
+                </p>
+            </div>
+            <ul className="flex flex-wrap w-full flex-1 flex-grow flex-row items-center md:justify-end gap-4">
+                {props.filters.map((x) => (
+                    <li key={`filter-table-${x.id}`} className="flex gap-1 items-center rounded-xl border border-card-border px-4 py-0.5">
+                        <span>
+                            <span className="size-3 mr-2 aspect-square bg-primary inline-block rounded-full" aria-hidden="true" />
+                            {x.label} {x.operation.label.toLowerCase()}:
+                        </span>
+                        <div className="relative w-min min-w-[1ch]">
+                            <span aria-hidden="true" className="invisible whitespace-pre p-0">
+                                {x.value || " "}
+                            </span>
+                            <input
+                                type={x.type}
+                                value={x.value as string}
+                                className="absolute left-0 top-0 m-0 inline-block w-full bg-transparent p-0 placeholder-primary/70 outline-none [appearance:textfield] after:empty:text-primary/70 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+                                onChange={(e) => {
+                                    const value = valueFromType(e.target);
+                                    props.setFilters((prev) =>
+                                        prev.map((item) =>
+                                            x.id === item.id
+                                                ? {
+                                                      ...item,
+                                                      value,
+                                                  }
+                                                : item
+                                        )
+                                    );
+                                }}
+                            />
+                        </div>
+                    </li>
+                ))}
+            </ul>
+        </div>
+    </header>
+);