@sqrzro/ui 4.0.0-alpha.21 → 4.0.0-alpha.22

package/dist/components/collections/ListItem/index.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { filterNull } from '@sqrzro/utility';
 import { getClassNames } from '../../../styles/classnames';
 import tw from '../../../styles/classnames/tw';
 import Link from '../../../components/utility/Link';
@@ -19,6 +20,7 @@ function ListItem({ $data, actions, classNames, classNameProps, description, hre
     const hasPrimary = Boolean(title || description || meta);
     const hasSecondary = Boolean(secondary);
     const hasTertiary = Boolean(tertiary);
-    return (_jsx("li", { className: tw('@container relative grid', componentClassNames?.root, isLoading ? 'pointer-events-none animate-pulse' : null, actions ? 'grid-cols-[1fr_auto] gap-4' : 'grid-cols-1'), children: _jsxs("article", { className: "contents", children: [_jsxs("div", { className: tw('grid gap-x-6 gap-y-4', getLayout([hasPrimary, hasSecondary, hasTertiary])), children: [_jsxs("div", { className: componentClassNames?.primary, children: [title ? (_jsx("h2", { className: componentClassNames?.title, children: href ? (_jsx(Link, { className: "hover:text-link", href: href, children: title })) : (title) })) : null, description ? (_jsx("div", { className: componentClassNames?.description, children: description })) : null, _jsx(ListItemMeta, { classNameProps: classNameProps, data: meta })] }), tertiary ? (_jsx("div", { className: componentClassNames?.tertiary, children: tertiary })) : null, _jsx(ListItemSecondary, { classNameProps: classNameProps, classNames: classNames, data: secondary?.data, variant: variant })] }), actions ? _jsx(ListItemMenu, { actions: actions, data: $data }) : null] }) }));
+    const filteredActions = filterNull(actions || []);
+    return (_jsx("li", { className: tw('@container relative grid', componentClassNames?.root, isLoading ? 'pointer-events-none animate-pulse' : null, filteredActions.length ? 'grid-cols-[1fr_auto] gap-4' : 'grid-cols-1'), children: _jsxs("article", { className: "contents", children: [_jsxs("div", { className: tw('grid gap-x-6 gap-y-4', getLayout([hasPrimary, hasSecondary, hasTertiary])), children: [_jsxs("div", { className: componentClassNames?.primary, children: [title ? (_jsx("h2", { className: componentClassNames?.title, children: href ? (_jsx(Link, { className: "hover:text-link", href: href, children: title })) : (title) })) : null, description ? (_jsx("div", { className: componentClassNames?.description, children: description })) : null, _jsx(ListItemMeta, { classNameProps: classNameProps, data: meta })] }), tertiary ? (_jsx("div", { className: componentClassNames?.tertiary, children: tertiary })) : null, _jsx(ListItemSecondary, { classNameProps: classNameProps, classNames: classNames, data: secondary?.data, variant: variant })] }), filteredActions.length ? (_jsx(ListItemMenu, { actions: filteredActions, data: $data })) : null] }) }));
 }
 export default ListItem;

package/dist/components/collections/TableRow/index.js

@@ -1,9 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { filterNull } from '@sqrzro/utility';
 import Switch from '../../../forms/components/Switch';
 import { getClassNames } from '../../../styles/classnames';
 import ListItemMenu from '../ListItemMenu';
 function TableRow({ classNameProps, classNames, columns, data, isSelected, onSelect, }) {
     const componentClassNames = getClassNames('table', { props: classNameProps, states: { isSelected } }, classNames);
-    return (_jsxs("tr", { className: componentClassNames?.row, children: [data.isSelectable ? (_jsx("td", { children: _jsx(Switch, { name: data.id, onChange: onSelect, value: isSelected }) })) : null, columns.map((column) => (_jsx("td", { className: componentClassNames?.cell, children: data.row[column.id] }, column.id))), data.actions ? (_jsx("td", { children: _jsx(ListItemMenu, { actions: data.actions, data: data.$data }) })) : null] }));
+    const filteredActions = filterNull(data.actions || []);
+    return (_jsxs("tr", { className: componentClassNames?.row, children: [data.isSelectable ? (_jsx("td", { children: _jsx(Switch, { name: data.id, onChange: onSelect, value: isSelected }) })) : null, columns.map((column) => (_jsx("td", { className: componentClassNames?.cell, children: data.row[column.id] }, column.id))), filteredActions.length ? (_jsx("td", { children: _jsx(ListItemMenu, { actions: filteredActions, data: data.$data }) })) : null] }));
 }
 export default TableRow;

package/dist/components/collections/interfaces.d.ts

@@ -7,7 +7,7 @@ export interface CollectionFunctionConfig<Filters = null> {
 export type ListFunctionConfig<Filters = null> = CollectionFunctionConfig<Filters>;
 export interface ListItemObject<Data extends object | null = null> {
     $data?: Data;
-    actions?: ActionObject<Data>[];
+    actions?: (ActionObject<Data> | null)[];
     description?: React.ReactNode;
     href?: string;
     id: string;
@@ -31,7 +31,7 @@ export interface ListItemObject<Data extends object | null = null> {
 export type TableFunctionConfig<Filters = null> = CollectionFunctionConfig<Filters>;
 export interface TableItemObject<Data extends object | null = null> {
     $data?: Data;
-    actions?: ActionObject<Data>[];
+    actions?: (ActionObject<Data> | null)[];
     id: string;
     isSelectable?: boolean;
     row: {

package/dist/components/utility/ActionList/index.js

@@ -4,6 +4,7 @@ import ActionButton from '../../../components/buttons/ActionButton';
 import { getClassNames } from '../../../styles/classnames';
 function ActionList({ actions, classNameProps, classNames, isLoading, }) {
     const componentClassNames = getClassNames('actionList', { props: classNameProps }, classNames);
-    return (_jsx("ul", { className: componentClassNames?.root, children: filterNull(actions).map((action, index) => (_jsx("li", { className: componentClassNames?.item, children: _jsx(ActionButton, { ...action, isLoading: Boolean(isLoading || action.isLoading) }) }, index))) }));
+    const filteredActions = filterNull(actions);
+    return (_jsx("ul", { className: componentClassNames?.root, children: filteredActions.map((action, index) => (_jsx("li", { className: componentClassNames?.item, children: _jsx(ActionButton, { ...action, isLoading: Boolean(isLoading || action.isLoading) }) }, index))) }));
 }
 export default ActionList;

package/dist/components/utility/Menu/index.d.ts

@@ -1,7 +1,7 @@
 import type { ActionObject } from '../../../utility/interfaces';
 import { PopoverProps } from '../Popover';
 export interface MenuProps<Data extends object | null = null> {
-    actions: ActionObject<Data>[];
+    actions: (ActionObject<Data> | null)[];
     align?: PopoverProps['align'];
     data?: Data;
     label: React.ReactNode;

package/dist/components/utility/Menu/index.js

@@ -1,5 +1,6 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { filterNull } from '@sqrzro/utility';
 import Button from '../../../components/buttons/Button';
 import useClickOutside from '../../../hooks/useClickOutside';
 import Action from '../Action';
@@ -10,6 +11,7 @@ function Menu({ actions, align, data, label, vAlign, }) {
     function toggleIsOpen() {
         setIsOpen(!isOpen);
     }
-    return (_jsxs("div", { className: "relative", ref: ref, children: [_jsx(Button, { onClick: toggleIsOpen, children: label }), _jsx(Popover, { align: align, isOpen: isOpen, vAlign: vAlign, children: _jsx("ul", { children: actions.map((item, index) => (_jsx("li", { children: _jsx(Action, { ...item, data: data, render: MenuItem }) }, index))) }) })] }));
+    const filteredActions = filterNull(actions);
+    return (_jsxs("div", { className: "relative", ref: ref, children: [_jsx(Button, { onClick: toggleIsOpen, children: label }), _jsx(Popover, { align: align, isOpen: isOpen, vAlign: vAlign, children: _jsx("ul", { children: filteredActions.map((item, index) => (_jsx("li", { children: _jsx(Action, { ...item, data: data, render: MenuItem }) }, index))) }) })] }));
 }
 export default Menu;

package/dist/forms/components/CSVInput/index.d.ts

@@ -0,0 +1,15 @@
+import { InputProps } from '../../../forms/interfaces';
+import type { ClassNameProps } from '../../../styles/classnames/interfaces';
+export interface CSVInputClassNames {
+    root: string;
+    icon: string;
+    title: string;
+    description: string;
+}
+export interface CSVInputComponentProps {
+    icon?: React.ReactNode;
+    iconSuccess?: React.ReactNode;
+}
+export type CSVInputProps = ClassNameProps<CSVInputClassNames> & InputProps<string> & CSVInputComponentProps;
+declare function CSVInput({ classNames, classNameProps, icon, iconSuccess, id, isDisabled, name, onChange, value, }: Readonly<CSVInputProps>): React.ReactElement;
+export default CSVInput;

package/dist/forms/components/CSVInput/index.js

@@ -0,0 +1,30 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { formatPlural } from '@sqrzro/utility';
+import { getClassNames } from '../../../styles/classnames';
+import tw from '../../../styles/classnames/tw';
+import formatFileSize from '../../utility/format-file-size';
+function CSVInput({ classNames, classNameProps, icon, iconSuccess, id, isDisabled, name, onChange, value, }) {
+    const componentClassNames = getClassNames('csvInput', { props: classNameProps }, classNames);
+    const [fileData, setFileData] = useState(null);
+    function handleChange(event) {
+        const { files } = event.target;
+        const reader = new FileReader();
+        reader.addEventListener('load', () => {
+            const text = reader.result?.toString() || '';
+            const lines = text.split('\n').filter((item) => item.trim() !== '').length;
+            setFileData({
+                lines,
+                name: files?.[0].name || '',
+                size: files?.[0].size || 0,
+            });
+            onChange?.({ target: { name, value: text } });
+        }, false);
+        if (files?.[0]) {
+            reader.readAsText(files[0]);
+        }
+    }
+    return (_jsxs("div", { className: tw('relative flex items-center justify-center', componentClassNames?.root), children: [_jsx("input", { name: name, type: "hidden", value: value || '' }), _jsx("input", { accept: "text/csv", className: "absolute left-0 top-0 h-full w-full cursor-pointer opacity-0", disabled: isDisabled, id: id || name, name: name, onChange: handleChange, type: "file" }), fileData ? (_jsxs("div", { className: tw('text-center', isDisabled ? 'pointer-events-none opacity-20' : null), children: [_jsx("i", { className: componentClassNames?.icon, children: iconSuccess }), _jsx("p", { className: componentClassNames?.title, children: fileData.name }), _jsxs("p", { className: componentClassNames?.description, children: [formatFileSize(fileData.size), " \u2022", ' ', formatPlural('line', fileData.lines)] })] })) : (_jsxs("div", { className: "text-center", children: [_jsx("i", { className: componentClassNames?.icon, children: icon }), _jsx("p", { className: componentClassNames?.title, children: "Click to Upload" }), _jsx("p", { className: componentClassNames?.description, children: "(or drag a CSV file over this box)" })] }))] }));
+}
+export default CSVInput;

package/dist/forms/components/FormFields/index.d.ts

@@ -1,5 +1,6 @@
 import type { FormFieldComponentProps } from '../../interfaces';
 import type { AutocompleteComponentProps } from '../Autocomplete';
+import type { CSVInputComponentProps } from '../CSVInput';
 import type { DropdownComponentProps } from '../Dropdown';
 import type { PointsInputComponentProps } from '../PointsInput';
 import type { NumberInputComponentProps } from '../NumberInput';
@@ -7,6 +8,8 @@ import type { PasswordInputComponentProps } from '../PasswordInput';
 import type { TextInputComponentProps } from '../TextInput';
 export type AutocompleteFormFieldProps<T> = FormFieldComponentProps<T | null> & AutocompleteComponentProps<T>;
 export declare function AutocompleteFormField<T>(props: Readonly<AutocompleteFormFieldProps<T>>): React.ReactElement;
+export type CSVFormFieldProps = FormFieldComponentProps<string> & CSVInputComponentProps;
+export declare function CSVFormField(props: Readonly<CSVFormFieldProps>): React.ReactElement;
 export type DropdownFormFieldProps<T> = FormFieldComponentProps<T | null> & DropdownComponentProps<T>;
 export declare function DropdownFormField<T>(props: Readonly<DropdownFormFieldProps<T>>): React.ReactElement;
 export type MoneyFormFieldProps = FormFieldComponentProps<number> & PointsInputComponentProps;

package/dist/forms/components/FormFields/index.js

@@ -2,6 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useCallback } from 'react';
 import extractInputProps from '../../utility/extract-input-props';
 import Autocomplete from '../Autocomplete';
+import CSVInput from '../CSVInput';
 import Dropdown from '../Dropdown';
 import FormField from '../FormField';
 import PointsInput from '../PointsInput';
@@ -13,6 +14,11 @@ export function AutocompleteFormField(props) {
     const renderInput = useCallback((renderProps) => (_jsx(Autocomplete, { ...renderProps, ...inputProps })), [inputProps]);
     return _jsx(FormField, { ...fieldProps, render: renderInput });
 }
+export function CSVFormField(props) {
+    const { fieldProps, inputProps } = extractInputProps(props);
+    const renderInput = useCallback((renderProps) => (_jsx(CSVInput, { ...renderProps, ...inputProps })), [inputProps]);
+    return _jsx(FormField, { ...fieldProps, render: renderInput });
+}
 export function DropdownFormField(props) {
     const { fieldProps, inputProps } = extractInputProps(props);
     const renderInput = useCallback((renderProps) => (_jsx(Dropdown, { ...renderProps, ...inputProps })), [inputProps]);

package/dist/forms/index.d.ts

@@ -1,6 +1,8 @@
 export * from './interfaces';
 export type { AutocompleteProps } from './components/Autocomplete';
 export { default as Autocomplete } from './components/Autocomplete';
+export type { CSVInputClassNames, CSVInputProps } from './components/CSVInput';
+export { default as CSVInput } from './components/CSVInput';
 export type { DropdownClassNames, DropdownProps } from './components/Dropdown';
 export { default as Dropdown } from './components/Dropdown';
 export type { EditableFormClassNames, EditableFormProps } from './components/EditableForm';
@@ -29,8 +31,8 @@ export type { TextInputClassNames, TextInputProps } from './components/TextInput
 export { default as TextInput } from './components/TextInput';
 export type { EditableDropdownFormFieldProps, EditableTextFormFieldProps, } from './components/EditableFormFields';
 export { EditableDropdownFormField, EditableTextFormField } from './components/EditableFormFields';
-export type { AutocompleteFormFieldProps, DropdownFormFieldProps, MoneyFormFieldProps, NumberFormFieldProps, PasswordFormFieldProps, TextFormFieldProps, } from './components/FormFields';
-export { AutocompleteFormField, DropdownFormField, MoneyFormField, NumberFormField, PasswordFormField, TextFormField, } from './components/FormFields';
+export type { AutocompleteFormFieldProps, CSVFormFieldProps, DropdownFormFieldProps, MoneyFormFieldProps, NumberFormFieldProps, PasswordFormFieldProps, TextFormFieldProps, } from './components/FormFields';
+export { AutocompleteFormField, CSVFormField, DropdownFormField, MoneyFormField, NumberFormField, PasswordFormField, TextFormField, } from './components/FormFields';
 export type { UseAutocompleteArgs, UseAutocompleteReturn } from './hooks/useAutocomplete';
 export { default as useAutocomplete } from './hooks/useAutocomplete';
 export type { UseDropdownArgs, UseDropdownReturn } from './hooks/useDropdown';

package/dist/forms/index.js

@@ -1,5 +1,6 @@
 export * from './interfaces';
 export { default as Autocomplete } from './components/Autocomplete';
+export { default as CSVInput } from './components/CSVInput';
 export { default as Dropdown } from './components/Dropdown';
 export { default as EditableForm } from './components/EditableForm';
 export { default as EditableFormField } from './components/EditableFormField';
@@ -14,7 +15,7 @@ export { default as PointsInput } from './components/PointsInput';
 export { default as StaticTextInput } from './components/StaticTextInput';
 export { default as TextInput } from './components/TextInput';
 export { EditableDropdownFormField, EditableTextFormField } from './components/EditableFormFields';
-export { AutocompleteFormField, DropdownFormField, MoneyFormField, NumberFormField, PasswordFormField, TextFormField, } from './components/FormFields';
+export { AutocompleteFormField, CSVFormField, DropdownFormField, MoneyFormField, NumberFormField, PasswordFormField, TextFormField, } from './components/FormFields';
 export { default as useAutocomplete } from './hooks/useAutocomplete';
 export { default as useDropdown } from './hooks/useDropdown';
 export { default as useEditableForm } from './hooks/useEditableForm';

package/dist/forms/utility/format-file-size.d.ts

@@ -0,0 +1,2 @@
+declare function formatFileSize(size: number): string;
+export default formatFileSize;

package/dist/forms/utility/format-file-size.js

@@ -0,0 +1,11 @@
+const BYTES_IN_KB = 1024;
+const DECIMAL_PLACES = 3;
+function formatFileSize(size) {
+    const units = ['B', 'KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB'];
+    const exponent = Math.min(Math.floor(Math.log(size) / Math.log(BYTES_IN_KB)), units.length - 1);
+    const approx = size / BYTES_IN_KB ** exponent;
+    return exponent === 0
+        ? `${size} bytes`
+        : `${approx.toFixed(DECIMAL_PLACES)} ${units[exponent]} (${size} bytes)`;
+}
+export default formatFileSize;

package/dist/styles/classnames/config.d.ts

@@ -20,6 +20,7 @@ import type { ToastClassNames } from '../../components/utility/Toast';
 import type { FilterBarClassNames } from '../../filters/components/FilterBar';
 import type { FilterItemClassNames } from '../../filters/components/FilterItem';
 import type { FilterPanelClassNames } from '../../filters/components/FilterPanel';
+import type { CSVInputClassNames } from '../../forms/components/CSVInput';
 import type { DropdownClassNames } from '../../forms/components/Dropdown';
 import type { EditableFormClassNames } from '../../forms/components/EditableForm';
 import type { EditableFormFieldClassNames } from '../../forms/components/EditableFormField';
@@ -38,6 +39,7 @@ export interface RegisteredClassNames {
     appNavigation?: ComponentClassNames<AppNavigationClassNames>;
     button?: ComponentClassNames<ButtonClassNames>;
     container?: ComponentClassNames<ContainerClassNames>;
+    csvInput?: ComponentClassNames<CSVInputClassNames>;
     dataTable?: ComponentClassNames<DataTableClassNames>;
     dropdown?: ComponentClassNames<DropdownClassNames>;
     editableForm?: ComponentClassNames<EditableFormClassNames>;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sqrzro/ui",
   "type": "module",
-  "version": "4.0.0-alpha.21",
+  "version": "4.0.0-alpha.22",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "license": "ISC",
@@ -48,7 +48,7 @@
     "react-dom": "^19.2.1",
     "tailwind-merge": "^3.4.0",
     "use-deep-compare-effect": "^1.8.1",
-    "@sqrzro/utility": "^4.0.0-alpha.8"
+    "@sqrzro/utility": "^4.0.0-alpha.9"
   },
   "devDependencies": {
     "@storybook/addon-a11y": "^10.1.7",