@g4rcez/components 3.0.0-0 → 3.0.1

package/dist/components/table/sort.jsx

@@ -1,105 +0,0 @@
-"use client";
-import { ArrowDown01Icon, ArrowUp01Icon, ArrowUpDownIcon, PlusIcon, Trash2Icon } from "lucide-react";
-import React, { Fragment, useEffect, useState } from "react";
-import { useTranslations } from "../../hooks/use-translations";
-import { uuid } from "../../lib/fns";
-import { Dropdown } from "../floating/dropdown";
-import { Select } from "../form/select";
-import { getLabel } from "./table-lib";
-var Order;
-(function (Order) {
-    Order["Asc"] = "asc";
-    Order["Desc"] = "desc";
-    Order["Undefined"] = "undefined";
-})(Order || (Order = {}));
-const createSorterFn = (fields) => (a, b) => fields.reduce((acc, x) => {
-    const reverse = x.type === "desc" ? -1 : 1;
-    const property = x.value;
-    const p = a[property] > b[property] ? reverse : a[property] < b[property] ? -reverse : 0;
-    return acc !== 0 ? acc : p;
-}, 0);
-export const multiSort = (array, fields) => array.toSorted(createSorterFn(fields));
-const createSorter = (col, label, order) => ({
-    label,
-    id: uuid(),
-    type: order,
-    value: col.id,
-});
-export const Sort = (props) => {
-    const translation = useTranslations();
-    const orders = {
-        asc: { label: translation.tableSortAsc, value: Order.Asc },
-        desc: { label: translation.tableSortDesc, value: Order.Desc },
-    };
-    const orderOptions = [orders.asc, orders.desc];
-    const onAddSorter = () => {
-        const col = props.cols[0];
-        if (col)
-            props.set((prev) => [...prev, createSorter(col, orders.asc.label, orders.asc.value)]);
-    };
-    const onSetSorter = (id) => (e) => {
-        const value = e.target.value;
-        props.set((prev) => prev.map((x) => (x.id === id ? { ...x, value: value } : x)));
-    };
-    const onSortOrderType = (id) => (e) => {
-        const type = e.target.value;
-        props.set((prev) => prev.map((x) => (x.id === id ? { ...x, type: type } : x)));
-    };
-    const onDelete = (e) => {
-        const id = e.currentTarget.dataset.id || "";
-        props.set((prev) => prev.filter((x) => x.id !== id));
-    };
-    return (<Fragment>
-            <Dropdown title={translation.tableSortDropdownTitle} trigger={<span className="flex items-center gap-1 proportional-nums">
-                        <ArrowUpDownIcon size={14}/>
-                        {translation.tableSortOrderByLabel} {props.sorters.length === 0 ? "" : ` (${props.sorters.length})`}
-                    </span>}>
-                <ul className="mt-4 space-y-2">
-                    {props.sorters.map((sorter) => {
-            return (<li key={`sorter-select-${sorter.id}`} className="flex flex-nowrap gap-3">
-                                <Select options={props.options} value={sorter.value} onChange={onSetSorter(sorter.id)} title={translation.tableSortOrderInputTitle} placeholder={translation.tableSortOrderInputPlaceholder}/>
-                                <Select onChange={onSortOrderType(sorter.id)} value={sorter.type} options={orderOptions} title={translation.tableSortTypeInputTitle} placeholder={translation.tableSortTypeInputPlaceholder}/>
-                                <button className="mt-4" data-id={sorter.id} onClick={onDelete}>
-                                    <Trash2Icon className="text-danger" size={14}/>
-                                </button>
-                            </li>);
-        })}
-                    <li>
-                        <button type="button" onClick={onAddSorter} className="text-primary flex items-center gap-1">
-                            <PlusIcon size={14}/> {translation.tableSortAddButton}
-                        </button>
-                    </li>
-                </ul>
-            </Dropdown>
-        </Fragment>);
-};
-export const SorterHead = (props) => {
-    const translations = useTranslations();
-    const [status, setStatus] = useState(() => {
-        const sorter = props.sorters.find((sort) => sort.value === props.col.id);
-        return sorter ? sorter.type : Order.Undefined;
-    });
-    const onClick = () => setStatus((prev) => (prev === Order.Undefined ? Order.Asc : prev === Order.Asc ? Order.Desc : Order.Undefined));
-    useEffect(() => {
-        props.setSorters((prev) => {
-            if (status === Order.Undefined)
-                return prev.filter((x) => x.value !== props.col.id);
-            const findIndex = prev.findIndex((p) => p.value === props.col.id);
-            const sorter = createSorter(props.col, status, status);
-            if (findIndex === -1)
-                return [...prev, sorter];
-            prev[findIndex] = sorter;
-            return [...prev];
-        });
-    }, [status, props.col]);
-    const labelId = `${props.col.id}-sorter-id`;
-    const label = getLabel(props.col);
-    return (<button aria-labelledby={labelId} className="isolate flex items-center" onClick={onClick} type="button">
-            <span id={labelId} className="sr-only">
-                {translations.tableSortDropdownTitle} {label}
-            </span>
-            {status === Order.Asc ? <ArrowUp01Icon size={14}/> : null}
-            {status === Order.Desc ? <ArrowDown01Icon size={14}/> : null}
-            {status === Order.Undefined ? <ArrowUpDownIcon size={14}/> : null}
-        </button>);
-};

package/dist/components/table/table-lib.js

@@ -1,84 +0,0 @@
-"use client";
-import { useCallback, useRef } from "react";
-import { LocalStorage } from "storage-manager-js";
-import { useReducer } from "use-typed-reducer";
-import { useStableRef } from "../../hooks/use-stable-ref";
-import { isSsr } from "../../lib/fns";
-export const getLabel = (col) => col.headerLabel ?? col.thead ?? col.id;
-export const createOptionCols = (cols) => cols.map((opt) => ({
-    value: opt.id,
-    label: (opt.thead ?? opt.headerLabel ?? opt.id),
-}));
-export var ColType;
-(function (ColType) {
-    ColType["Boolean"] = "boolean";
-    ColType["Number"] = "number";
-    ColType["Select"] = "select";
-    ColType["Text"] = "text";
-})(ColType || (ColType = {}));
-export const valueFromType = (input) => (input.type === "number" ? input.valueAsNumber : input.value);
-;
-const cols = () => (id, thead, options) => ({ ...options, id, thead });
-export const createColumns = (callback) => {
-    let items = [];
-    const add = (id, thead, options) => items.push({ ...options, id, thead });
-    const remove = (id) => (items = items.filter((x) => x.id !== id));
-    const getAll = () => Array.from(items);
-    const filter = (c) => (items = Array.from(items.filter(c)));
-    callback({ add, remove, getAll, filter });
-    return items;
-};
-const noop = {};
-const mergeCols = (cols, saved) => {
-    if (!Array.isArray(saved))
-        return cols;
-    const savedSet = new Set(saved.map((x) => x.id));
-    if (!cols.every((x) => savedSet.has(x.id))) {
-        return cols;
-    }
-    const map = new Map(cols.map((x) => [x.id, x]));
-    return saved.map((mock, index) => {
-        const original = map.get(mock.id);
-        if (original === undefined)
-            return cols[index];
-        return original;
-    });
-};
-export const useTablePreferences = (name, cols, options = noop) => {
-    const init = isSsr() ? null : LocalStorage.get(`@components/table-${name}`) || null;
-    const [state, dispatch] = useReducer({
-        name,
-        groups: options.groups || init?.groups || [],
-        sorters: options.sorters || init?.sorters || [],
-        filters: options.filters || init?.filters || [],
-        cols: mergeCols(cols, init?.cols),
-    }, (get) => {
-        const intercept = (partial) => {
-            const prev = get.state();
-            const result = { ...prev, ...partial };
-            if (!isSsr())
-                LocalStorage.set(`@components/table-${prev.name}`, result);
-            return result;
-        };
-        intercept(get.state());
-        return {
-            set: (getters) => intercept(getters),
-        };
-    });
-    return { ...state, ...dispatch, name };
-};
-export const useWidthControl = (reorder) => {
-    const stableRef = useStableRef(reorder);
-    const ref = useRef(null);
-    const onChange = useCallback((cols) => {
-        stableRef.current(cols);
-        cols.forEach((x) => {
-            const c = ref.current.querySelector(`th[data-tableheader="${x.id}"]`);
-            if (!c)
-                return;
-            c.style.width = "auto";
-        });
-    }, [stableRef]);
-    return [ref, onChange];
-};
-export const getModalScrollerRef = () => isSsr() ? undefined : document.querySelector(`[data-component="modal-body"]`);

package/dist/components/table/table.context.jsx

@@ -1,4 +0,0 @@
-import { createContext, useContext } from "react";
-const TableContext = createContext({});
-export const TableProvider = TableContext.Provider;
-export const useTable = () => useContext(TableContext);

package/dist/components/table/thead.jsx

@@ -1,103 +0,0 @@
-"use client";
-import { AnimatePresence, motion, Reorder } from "motion/react";
-import { Order } from "linq-arrays";
-import { PlusIcon, SearchCheckIcon, SearchXIcon } from "lucide-react";
-import React, { Fragment, useCallback, useRef } from "react";
-import { useTranslations } from "../../hooks/use-translations";
-import { useTweaks } from "../../hooks/use-tweaks";
-import { Dropdown } from "../floating/dropdown";
-import { ColumnHeaderFilter, createFilterFromCol, useOperators } from "./filter";
-import { SorterHead } from "./sort";
-import { getLabel, useWidthControl } from "./table-lib";
-const dragConstraints = { top: 0, left: 0, right: 0, bottom: -1 };
-const HeaderChild = (props) => {
-    const tweaks = useTweaks();
-    const translation = useTranslations();
-    const ownFilters = props.filters.filter((x) => x.name === props.header.id);
-    const hasFilters = ownFilters.length > 0;
-    const defaultAllowSort = props.header.allowSort ?? tweaks.table.sorters ?? true;
-    const defaultAllowFilter = props.header.allowFilter ?? tweaks.table.filters ?? true;
-    const operators = useOperators();
-    const FilterIcon = hasFilters ? SearchCheckIcon : SearchXIcon;
-    const th = useRef(null);
-    const onDelete = (e) => {
-        const id = e.currentTarget.dataset.id || "";
-        return props.setFilters((prev) => prev.filter((x) => x.id !== id));
-    };
-    const dragRef = useCallback((dom) => {
-        if (dom === null)
-            return;
-        th.current = dom;
-        const controller = new AbortController();
-        dom.addEventListener("pointerdown", (e) => {
-            const target = e.target;
-            if (target.dataset.type === "resizer") {
-                e.stopPropagation();
-                return e.stopImmediatePropagation();
-            }
-        }, { signal: controller.signal });
-        return () => controller.abort();
-    }, []);
-    const ownSorter = props.sorters.find((x) => props.header.id === x.value);
-    const ariaSort = !ownSorter?.type ? "none" : ownSorter.type === Order.Asc ? "ascending" : "descending";
-    const label = getLabel(props.header);
-    return (<Reorder.Item {...props.header.thProps} as="th" ref={dragRef} initial={false} dragSnapToOrigin dragDirectionLock role="columnheader" aria-sort={ariaSort} value={props.header} aria-busy={props.loading} data-tableheader={props.header.id} whileDrag={{ cursor: "grabbing" }} className={`relative md:h-14 typography min-w-0 cursor-grab font-medium ${props.header.thProps?.className ?? ""}`}>
-            <span className={`flex h-full items-center justify-between bg-table-header p-(--table-cell-padding) ${props.isLast ? "rounded-tr-lg" : ""} ${props.index === 0 ? "rounded-tl-lg" : ""}`}>
-                <span className="flex gap-1 items-center">
-                    {props.inlineFilter && defaultAllowFilter ? (<Dropdown arrow trigger={<span>
-                                    <span id={`${props.header.id}-filter-dropdown-button`} className="sr-only">
-                                        {translation.tableFilterDropdownTitleUnique} {label}
-                                    </span>
-                                    <FilterIcon aria-labelledby={`${props.header.id}-filter-dropdown-button`} size={14}/>
-                                </span>} title={<span className="text-lg">
-                                    {translation.tableFilterDropdownTitleUnique} <span className="font-medium">{label}</span>
-                                </span>}>
-                            <ul className="font-medium">
-                                {ownFilters.length === 0 ? null : (<Fragment>
-                                        {ownFilters.map((filter) => (<li key={`thead-filter-${filter.id}`} className="my-1">
-                                                <ColumnHeaderFilter onDelete={onDelete} filter={filter} set={props.setFilters}/>
-                                            </li>))}
-                                    </Fragment>)}
-                                <li>
-                                    <button type="button" className="flex gap-1 items-center text-primary" onClick={() => props.setFilters((prev) => prev.concat(createFilterFromCol(props.header, operators.options, operators.operations)))}>
-                                        <PlusIcon size={14}/> {translation.tableFilterNewFilter}
-                                    </button>
-                                </li>
-                            </ul>
-                        </Dropdown>) : null}
-                    <span className="text-base pointer-events-auto text-balance">{props.header.thead}</span>
-                    {props.inlineSorter && defaultAllowSort ? (<SorterHead col={props.header} setSorters={props.setSorters} sorters={props.sorters}/>) : null}
-                </span>
-            </span>
-            {props.isLast ? null : (<motion.button drag="x" draggable dragListener dragMomentum type="button" animate={false} dragElastic={0} dragPropagation initial={false} dragSnapToOrigin dragDirectionLock data-type="resizer" title={props.header.id} dragConstraints={dragConstraints} className="block absolute top-0 h-full hover:w-1.5 active:w-1.5 -right-[0.5px] z-calendar w-px cursor-col-resize bg-transparent hover:bg-primary active:bg-primary" onClick={(e) => void e.currentTarget.focus()} onKeyDown={(e) => {
-                if (e.key === "ArrowLeft" || e.key === "ArrowRight") {
-                    if (th.current === null)
-                        return;
-                    th.current.setAttribute("data-resized", "true");
-                    const v = th.current.getBoundingClientRect().width;
-                    const move = e.shiftKey ? 50 : 10;
-                    const delta = move * (e.key === "ArrowLeft" ? -1 : 1);
-                    th.current.style.width = `${Math.abs(v + delta)}px`;
-                }
-            }} onDoubleClick={() => {
-                if (th.current === null)
-                    return;
-                th.current.style.width = "auto";
-            }} onDrag={(_, info) => {
-                if (th.current === null)
-                    return;
-                th.current.setAttribute("data-resized", "true");
-                const v = th.current.getBoundingClientRect().width;
-                const delta = info.delta.x;
-                th.current.style.width = `${Math.abs(v + delta)}px`;
-            }}/>)}
-        </Reorder.Item>);
-};
-export const TableHeader = (props) => {
-    const [ref, onChange] = useWidthControl(props.setCols);
-    return (<Reorder.Group layout as="tr" axis="x" drag="x" ref={ref} layoutRoot role="row" layoutScroll onReorder={onChange} values={props.headers}>
-            <AnimatePresence>
-                {props.headers.map((header, index) => (<HeaderChild index={index} header={header} filters={props.filters} loading={props.loading} sorters={props.sorters} setFilters={props.setFilters} setSorters={props.setSorters} inlineFilter={props.inlineFilter} inlineSorter={props.inlineSorter} isLast={index === props.headers.length - 1} key={`header-child-item-${header.id}`}/>))}
-            </AnimatePresence>
-        </Reorder.Group>);
-};

package/dist/config/context.js

@@ -1,12 +0,0 @@
-"use client";
-import { createContext } from "react";
-import { parsers } from "../styles/design-tokens";
-import { defaultTranslations } from "./default-translations";
-import { defaultTweaks } from "./default-tweaks";
-export const Context = createContext({
-    parser: parsers.hsla,
-    tweaks: defaultTweaks,
-    floatingRef: undefined,
-    map: defaultTranslations,
-    locale: undefined,
-});

package/dist/config/default-translations.jsx

@@ -1,66 +0,0 @@
-import React, { Fragment } from "react";
-export const defaultTranslations = {
-    autocompleteEmpty: "Nothing here...",
-    calendarBackMonth: "Back month",
-    calendarFromDate: "From",
-    calendarMonthLabel: "Month",
-    calendarNextMonth: "Next month",
-    calendarDatetimeTitle: "Time",
-    calendarToDate: "To",
-    calendarToday: "Today",
-    commandPaletteEmpty: "Nothing here...",
-    commandPaletteLoading: "Loading...",
-    datePickerCalendarButtonLabel: "Click to open a date picker",
-    emptyDataMessage: "No data",
-    inputCaretDown: "Click to see all options",
-    inputCloseValue: "Click to clear the value",
-    inputOptionalLabel: "Optional",
-    driverNext: "Next",
-    driverPrevious: "Previous",
-    driverFinish: "Finish",
-    driverSkip: "Skip",
-    multiSelectInnerPlaceholder: "Search...",
-    multiSelectSelectedLabel: "Selected",
-    tableColumnResizer: "Resize column",
-    tableFilterColumnPlaceholder: "Filter by",
-    tableFilterColumnTitle: "Filter by",
-    tableFilterDropdownTitle: "Filters",
-    tableFilterDropdownTitleUnique: "Filter by",
-    tableFilterLabel: "Filters",
-    tableFilterNewFilter: "New filter",
-    tableFilterOperatorPlaceholder: "Equals to...",
-    tableFilterOperatorTitle: "Operation",
-    tableFilterTypeContains: "Contains",
-    tableFilterTypeEndsWith: "Ends with",
-    tableFilterTypeGreaterThan: "Greater than",
-    tableFilterTypeIs: "Is",
-    tableFilterTypeIsNot: "Is not",
-    tableFilterTypeLessThan: "Less than",
-    tableFilterTypeNotContains: "Not contains",
-    tableFilterTypeStartsWith: "Starts with",
-    tableFilterValuePlaceholder: "Something...",
-    tableFilterValueTitle: "Value",
-    tableGroupLabel: "Group",
-    tableGroupLabelWithCount: "Group",
-    tablePaginationFooter: (pagination) => (<Fragment>
-            {pagination.current} to {pagination.pages} of {pagination.totalItems} items.{Array.isArray(pagination.sizes) ? pagination.select : null}{" "}
-            per page.
-        </Fragment>),
-    tablePaginationNext: "Next",
-    tablePaginationPrevious: "Previous",
-    tablePaginationSelectLabel: "Select the size of page",
-    tableSortAddButton: "Add sort",
-    tableSortAsc: "Ascending",
-    tableSortDesc: "Descending",
-    tableSortDropdownTitle: "Order by",
-    tableSortOrderByLabel: "Order by",
-    tableSortOrderInputPlaceholder: "Order by",
-    tableSortOrderInputTitle: "Order by",
-    tableSortTypeInputPlaceholder: "Ascending",
-    tableSortTypeInputTitle: "Sort type",
-    uploadIdle: "You can drag your files here",
-    uploadIdleButton: "Choose your files",
-    uploadDragging: (props) => `Dragging ${props.n} ${props.n > 0 ? "files" : "file"}`,
-    uploadDialogTitle: "Details of your file",
-    datepickerPlaceholder: (_) => "day/month/year"
-};

package/dist/config/default-tweaks.js

@@ -1,4 +0,0 @@
-export const defaultTweaks = {
-    input: { iconFeedback: true },
-    table: { operations: true, sorters: true, filters: true, sticky: undefined },
-};

package/dist/constants.js

@@ -1,2 +0,0 @@
-export const FLOATING_DELAY = 200;
-export const TYPEAHEAD_RESET_DELAY = 500;

package/dist/hooks/use-click-outside.js

@@ -1,17 +0,0 @@
-import { useEffect } from "react";
-export const useOnClickOutside = (ref, handler) => {
-    useEffect(() => {
-        const listener = (event) => {
-            if (!ref.current || ref.current.contains(event.target))
-                return;
-            handler(event);
-        };
-        const params = { passive: true };
-        document.addEventListener("mousedown", listener, params);
-        document.addEventListener("touchstart", listener, params);
-        return () => {
-            document.removeEventListener("mousedown", listener);
-            document.removeEventListener("touchstart", listener);
-        };
-    }, [ref, handler]);
-};

package/dist/hooks/use-color-parser.js

@@ -1,9 +0,0 @@
-import { useContext } from "react";
-import { Context } from "../config/context";
-import { parsers } from "../styles/design-tokens";
-export const useColorParser = () => {
-    const ctx = useContext(Context);
-    if (!ctx)
-        return parsers.hsla;
-    return ctx.parser;
-};

package/dist/hooks/use-components-provider.jsx

@@ -1,16 +0,0 @@
-"use client";
-import React, { useMemo } from "react";
-import { parsers } from "../styles/design-tokens";
-import { Context } from "../config/context";
-import { defaultTranslations } from "../config/default-translations";
-import { defaultTweaks } from "../config/default-tweaks";
-export const ComponentsProvider = (props) => {
-    const memoMap = useMemo(() => ({
-        locale: props.locale,
-        floatingRef: props.rootFloating,
-        tweaks: { ...defaultTweaks, ...props.tweaks },
-        parser: props.parser || parsers.hsla,
-        map: { ...defaultTranslations, ...props.map },
-    }), [props]);
-    return <Context.Provider value={memoMap}>{props.children}</Context.Provider>;
-};

package/dist/hooks/use-debounce.js

@@ -1,12 +0,0 @@
-import { useRef } from "react";
-export const debounce = (fn, ms = 0) => {
-    let timeoutId = undefined;
-    return function debounced(...args) {
-        clearTimeout(timeoutId);
-        timeoutId = setTimeout(() => fn(...args), ms);
-    };
-};
-export function useDebounce(fn, delay) {
-    const debouncedValue = useRef(debounce(fn, delay));
-    return debouncedValue.current;
-}

package/dist/hooks/use-floating-ref.js

@@ -1,6 +0,0 @@
-import { useContext } from "react";
-import { Context } from "../config/context";
-export const useFloatingRef = () => {
-    const ctx = useContext(Context);
-    return ctx.floatingRef ?? undefined;
-};