@eml-payments/ui-kit 1.8.1 → 1.8.3

package/dist/src/components/Filters/Filters.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useImperativeHandle, forwardRef } from 'react';
+import { useForm, Controller, useWatch } from 'react-hook-form';
+import { DatePicker } from '../DatePicker';
+import { FilterSelect } from './FilterSelect';
+import { Checkbox } from '../Checkbox';
+import { BUTTON_GROUP_TYPE, CHECKBOX_TYPE, DATE_RANGE_TYPE, SELECT_TYPE, } from './Filters.types';
+import { cn } from '../../lib/utils';
+import { ButtonGroup } from '../ButtonGroup';
+import { Button } from '../Button';
+export const Filters = forwardRef(({ filters, defaultValues, onChange, onReset, onResetField, showResetButton = true, resetButtonText = 'Reset', resetButtonProps, }, ref) => {
+    const { control, reset, setValue } = useForm({
+        defaultValues,
+    });
+    const values = useWatch({ control });
+    useImperativeHandle(ref, () => ({
+        reset: () => {
+            reset();
+            onReset === null || onReset === void 0 ? void 0 : onReset();
+        },
+        resetField: (fieldName) => {
+            var _a;
+            setValue(fieldName, (_a = defaultValues === null || defaultValues === void 0 ? void 0 : defaultValues[fieldName]) !== null && _a !== void 0 ? _a : undefined);
+            onResetField === null || onResetField === void 0 ? void 0 : onResetField(fieldName);
+        },
+    }));
+    useEffect(() => {
+        onChange === null || onChange === void 0 ? void 0 : onChange(values);
+    }, [values, onChange]);
+    const renderFilterComponent = (filterConfig, field) => {
+        const { type, ...filterProps } = filterConfig;
+        switch (type) {
+            case DATE_RANGE_TYPE: {
+                const dateProps = filterProps;
+                return (_jsx(DatePicker, { ...dateProps, mode: "range", currentDate: field.value, onChangeDate: field.onChange, onBlur: field.onBlur, className: cn('min-w-[200px]', dateProps.className) }));
+            }
+            case SELECT_TYPE: {
+                const selectProps = filterProps;
+                return (_jsx(FilterSelect, { ...selectProps, value: field.value, onChange: field.onChange, onBlur: field.onBlur, className: cn('min-w-[200px]', selectProps.className) }));
+            }
+            case CHECKBOX_TYPE: {
+                const checkboxProps = filterProps;
+                return (_jsx(Checkbox, { ...checkboxProps, checked: field.value, onCheckedChange: field.onChange, labelPosition: "right", className: cn('border-(--uikit-inputEnabledBorder)', checkboxProps.className) }));
+            }
+            case BUTTON_GROUP_TYPE: {
+                const buttonGroupProps = filterProps;
+                return (_jsx(ButtonGroup, { ...buttonGroupProps, onValueChange: field.onChange, value: field.value, defaultValue: defaultValues === null || defaultValues === void 0 ? void 0 : defaultValues[filterConfig.name], className: cn('h-full', buttonGroupProps.className), buttonClassName: cn('h-full min-w-[50px]', buttonGroupProps.buttonClassName) }));
+            }
+            default:
+                throw new Error(`Unknown filter type: ${type}`);
+        }
+    };
+    const handleResetFilters = () => {
+        reset();
+        onReset === null || onReset === void 0 ? void 0 : onReset();
+    };
+    const isResetDisabled = !Object.keys(values).some((key) => {
+        const defaultValue = defaultValues === null || defaultValues === void 0 ? void 0 : defaultValues[key];
+        const currentValue = values[key];
+        return JSON.stringify(defaultValue) !== JSON.stringify(currentValue);
+    });
+    return (_jsxs("div", { className: "flex items-center gap-3 h-15 w-full", children: [filters.map((filterConfig) => (_jsx("div", { className: "flex items-center mb-3 h-10", children: _jsx(Controller, { name: filterConfig.name, control: control, render: ({ field }) => renderFilterComponent(filterConfig, field) }) }, filterConfig.name))), showResetButton && (_jsx("div", { className: "flex items-center mb-3 h-10 ml-3", children: _jsx(Button, { ...resetButtonProps, variant: "secondaryOutlined", className: cn('min-w-[80px]', resetButtonProps === null || resetButtonProps === void 0 ? void 0 : resetButtonProps.className), onClick: handleResetFilters, disabled: isResetDisabled, children: resetButtonText }) }))] }));
+});
+Filters.displayName = 'Filters';

package/dist/src/components/Filters/Filters.stories.d.ts

@@ -0,0 +1,12 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { FiltersProps } from './Filters.types';
+declare const meta: Meta<FiltersProps>;
+type Story = StoryObj<FiltersProps>;
+export declare const Default: Story;
+export declare const WithDefaultValues: Story;
+export declare const MultipleSelects: Story;
+export declare const ComplexFilters: Story;
+export declare const WithButtonGroup: Story;
+export declare const WithResetButton: Story;
+export declare const ResetSpecificFieldsFromParent: Story;
+export default meta;

package/dist/src/components/Filters/Filters.stories.js

@@ -0,0 +1,337 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef } from 'react';
+import { Filters } from './Filters';
+import { dayjs } from '../../utils/dayjs';
+import { Button } from '../Button';
+const meta = {
+    title: 'UIKit/Filters',
+    component: Filters,
+    tags: ['autodocs'],
+    args: {
+        onChange: (values) => console.log('Filters changed:', values),
+    },
+};
+// Sample data for filter options
+const selectOptions = [
+    { label: 'Active', value: 'active' },
+    { label: 'Inactive', value: 'inactive' },
+    { label: 'Pending', value: 'pending' },
+];
+const statusOptions = [
+    { label: 'Approved', value: 'approved' },
+    { label: 'Rejected', value: 'rejected' },
+    { label: 'Under Review', value: 'under-review' },
+];
+const periodOptions = [
+    { label: 'All', value: 'all' },
+    { label: 'In', value: 'in' },
+    { label: 'Out', value: 'out' },
+];
+export const Default = {
+    args: {
+        filters: [
+            {
+                type: 'buttonGroup',
+                name: 'period',
+                options: periodOptions,
+            },
+            {
+                type: 'dateRange',
+                name: 'dateRange',
+                rangeDateFormat: 'D MMM YY',
+                placeholder: `${dayjs().subtract(6, 'month').format('D MMM YY')} - Today`,
+            },
+            {
+                type: 'select',
+                name: 'status',
+                label: 'Status',
+                options: selectOptions,
+                placeholder: 'Select status...',
+            },
+            {
+                type: 'checkbox',
+                name: 'active',
+                label: 'Active Only',
+            },
+        ],
+        defaultValues: {
+            period: 'all',
+            status: '',
+            active: false,
+        },
+        showResetButton: true,
+    },
+    render: (args) => {
+        const [values, setValues] = useState(args.defaultValues || {});
+        return (_jsxs("div", { children: [_jsx(Filters, { ...args, onChange: (newValues) => {
+                        var _a;
+                        setValues(newValues);
+                        (_a = args.onChange) === null || _a === void 0 ? void 0 : _a.call(args, newValues);
+                    } }), _jsxs("div", { className: "mt-4 rounded border border-gray-200 bg-gray-50 p-4", children: [_jsx("p", { className: "text-sm font-semibold", children: "Current Values:" }), _jsx("pre", { className: "mt-2 text-xs", children: JSON.stringify(values, null, 2) })] })] }));
+    },
+};
+export const WithDefaultValues = {
+    args: {
+        filters: [
+            {
+                type: 'select',
+                name: 'category',
+                label: 'Category',
+                options: [
+                    { label: 'Electronics', value: 'electronics' },
+                    { label: 'Clothing', value: 'clothing' },
+                    { label: 'Food', value: 'food' },
+                ],
+                placeholder: 'Select category...',
+            },
+            {
+                type: 'checkbox',
+                name: 'inStock',
+                label: 'In Stock Only',
+            },
+        ],
+        defaultValues: {
+            category: 'electronics',
+            inStock: true,
+        },
+    },
+    render: (args) => {
+        const [values, setValues] = useState(args.defaultValues || {});
+        return (_jsxs("div", { children: [_jsx(Filters, { ...args, onChange: (newValues) => {
+                        var _a;
+                        setValues(newValues);
+                        (_a = args.onChange) === null || _a === void 0 ? void 0 : _a.call(args, newValues);
+                    } }), _jsxs("div", { className: "mt-4 rounded border border-gray-200 bg-gray-50 p-4", children: [_jsx("p", { className: "text-sm font-semibold", children: "Current Values:" }), _jsx("pre", { className: "mt-2 text-xs", children: JSON.stringify(values, null, 2) })] })] }));
+    },
+};
+export const MultipleSelects = {
+    args: {
+        filters: [
+            {
+                type: 'select',
+                name: 'department',
+                label: 'Department',
+                options: [
+                    { label: 'Sales', value: 'sales' },
+                    { label: 'Engineering', value: 'engineering' },
+                    { label: 'HR', value: 'hr' },
+                    { label: 'Finance', value: 'finance' },
+                ],
+                placeholder: 'Select department...',
+            },
+            {
+                type: 'select',
+                name: 'region',
+                label: 'Region',
+                options: [
+                    { label: 'North America', value: 'na' },
+                    { label: 'Europe', value: 'eu' },
+                    { label: 'Asia', value: 'asia' },
+                    { label: 'Australia', value: 'au' },
+                ],
+                placeholder: 'Select region...',
+            },
+        ],
+        showResetButton: false,
+    },
+    render: (args) => {
+        const [values, setValues] = useState(args.defaultValues || {});
+        return (_jsxs("div", { children: [_jsx(Filters, { ...args, onChange: (newValues) => {
+                        var _a;
+                        setValues(newValues);
+                        (_a = args.onChange) === null || _a === void 0 ? void 0 : _a.call(args, newValues);
+                    } }), _jsxs("div", { className: "mt-4 rounded border border-gray-200 bg-gray-50 p-4", children: [_jsx("p", { className: "text-sm font-semibold", children: "Selected Filters:" }), _jsx("pre", { className: "mt-2 text-xs", children: JSON.stringify(values, null, 2) })] })] }));
+    },
+};
+export const ComplexFilters = {
+    args: {
+        filters: [
+            {
+                type: 'dateRange',
+                name: 'createdDate',
+                rangeDateFormat: 'D MMM YY',
+                placeholder: `${dayjs().subtract(3, 'month').format('D MMM YY')} - Today`,
+            },
+            {
+                type: 'select',
+                name: 'priority',
+                label: 'Priority',
+                options: [
+                    { label: 'Low', value: 'low' },
+                    { label: 'Medium', value: 'medium' },
+                    { label: 'High', value: 'high' },
+                    { label: 'Critical', value: 'critical' },
+                ],
+                placeholder: 'Select priority...',
+            },
+            {
+                type: 'checkbox',
+                name: 'urgent',
+                label: 'Urgent Only',
+            },
+            {
+                type: 'checkbox',
+                name: 'assigned',
+                label: 'Assigned to Me',
+            },
+        ],
+        defaultValues: {
+            createdDate: [dayjs().subtract(3, 'month').toDate(), dayjs().toDate()],
+            priority: 'high',
+            urgent: true,
+            assigned: true,
+        },
+        showResetButton: true,
+    },
+    render: (args) => {
+        const [values, setValues] = useState(args.defaultValues || {});
+        return (_jsxs("div", { children: [_jsx(Filters, { ...args, onChange: (newValues) => {
+                        var _a;
+                        setValues(newValues);
+                        (_a = args.onChange) === null || _a === void 0 ? void 0 : _a.call(args, newValues);
+                    } }), _jsxs("div", { className: "mt-4 rounded border border-gray-200 bg-gray-50 p-4", children: [_jsx("p", { className: "text-sm font-semibold", children: "Applied Filters:" }), _jsx("pre", { className: "mt-2 text-xs", children: JSON.stringify(values, null, 2) })] })] }));
+    },
+};
+export const WithButtonGroup = {
+    args: {
+        filters: [
+            {
+                type: 'buttonGroup',
+                name: 'period',
+                options: periodOptions,
+            },
+            {
+                type: 'dateRange',
+                name: 'dateRange',
+                rangeDateFormat: 'D MMM YY',
+                placeholder: `${dayjs().subtract(1, 'month').format('D MMM YY')} - Today`,
+            },
+            {
+                type: 'select',
+                name: 'status',
+                label: 'Status',
+                options: selectOptions,
+                placeholder: 'Select status...',
+            },
+        ],
+        defaultValues: {
+            period: 'in',
+            dateRange: [dayjs().subtract(1, 'month').toDate(), dayjs().toDate()],
+            status: 'active',
+        },
+        showResetButton: true,
+    },
+    render: (args) => {
+        const [values, setValues] = useState(args.defaultValues || {});
+        return (_jsxs("div", { children: [_jsx(Filters, { ...args, onChange: (newValues) => {
+                        var _a;
+                        setValues(newValues);
+                        (_a = args.onChange) === null || _a === void 0 ? void 0 : _a.call(args, newValues);
+                    } }), _jsxs("div", { className: "mt-4 rounded border border-gray-200 bg-gray-50 p-4", children: [_jsx("p", { className: "text-sm font-semibold", children: "Current Values:" }), _jsx("pre", { className: "mt-2 text-xs", children: JSON.stringify(values, null, 2) })] })] }));
+    },
+};
+export const WithResetButton = {
+    args: {
+        filters: [
+            {
+                type: 'select',
+                name: 'status',
+                label: 'Status',
+                options: statusOptions,
+                placeholder: 'Select status...',
+            },
+            {
+                type: 'dateRange',
+                name: 'dateRange',
+                rangeDateFormat: 'D MMM YY',
+                placeholder: `${dayjs().subtract(1, 'month').format('D MMM YY')} - Today`,
+            },
+            {
+                type: 'checkbox',
+                name: 'verified',
+                label: 'Verified Only',
+            },
+        ],
+        defaultValues: {
+            status: 'approved',
+            verified: true,
+        },
+        showResetButton: true,
+        resetButtonText: 'Clear Filters',
+    },
+    render: (args) => {
+        const [values, setValues] = useState(args.defaultValues || {});
+        const [resetCount, setResetCount] = useState(0);
+        return (_jsxs("div", { children: [_jsx(Filters, { ...args, onChange: (newValues) => {
+                        var _a;
+                        setValues(newValues);
+                        (_a = args.onChange) === null || _a === void 0 ? void 0 : _a.call(args, newValues);
+                    }, onReset: () => {
+                        setResetCount((count) => count + 1);
+                    } }), _jsxs("div", { className: "mt-4 rounded border border-gray-200 bg-gray-50 p-4", children: [_jsx("p", { className: "text-sm font-semibold", children: "Current Values:" }), _jsx("pre", { className: "mt-2 text-xs", children: JSON.stringify(values, null, 2) }), _jsxs("p", { className: "mt-4 text-sm text-gray-600", children: ["Reset clicked: ", resetCount, " times"] })] })] }));
+    },
+};
+export const ResetSpecificFieldsFromParent = {
+    args: {
+        filters: [
+            {
+                type: 'select',
+                name: 'department',
+                label: 'Department',
+                options: [
+                    { label: 'Sales', value: 'sales' },
+                    { label: 'Engineering', value: 'engineering' },
+                    { label: 'HR', value: 'hr' },
+                ],
+                placeholder: 'Select department...',
+            },
+            {
+                type: 'select',
+                name: 'region',
+                label: 'Region',
+                options: [
+                    { label: 'North America', value: 'na' },
+                    { label: 'Europe', value: 'eu' },
+                    { label: 'Asia', value: 'asia' },
+                ],
+                placeholder: 'Select region...',
+            },
+            {
+                type: 'checkbox',
+                name: 'active',
+                label: 'Active Only',
+            },
+        ],
+        defaultValues: {
+            department: 'sales',
+            region: 'na',
+            active: true,
+        },
+        showResetButton: false,
+    },
+    render: (args) => {
+        const [values, setValues] = useState(args.defaultValues || {});
+        const [resetLog, setResetLog] = useState([]);
+        const filtersRef = useRef(null);
+        const handleResetDepartment = () => {
+            var _a;
+            (_a = filtersRef.current) === null || _a === void 0 ? void 0 : _a.resetField('department');
+        };
+        const handleResetRegion = () => {
+            var _a;
+            (_a = filtersRef.current) === null || _a === void 0 ? void 0 : _a.resetField('region');
+        };
+        const handleResetAll = () => {
+            var _a;
+            (_a = filtersRef.current) === null || _a === void 0 ? void 0 : _a.reset();
+        };
+        return (_jsxs("div", { children: [_jsxs("div", { className: "mb-4 flex gap-2", children: [_jsx(Button, { onClick: handleResetDepartment, variant: "outlined", children: "Reset Department" }), _jsx(Button, { onClick: handleResetRegion, variant: "outlined", children: "Reset Region" }), _jsx(Button, { onClick: handleResetAll, variant: "secondaryFilled", children: "Reset All" })] }), _jsx(Filters, { ref: filtersRef, ...args, onChange: (newValues) => {
+                        var _a;
+                        setValues(newValues);
+                        (_a = args.onChange) === null || _a === void 0 ? void 0 : _a.call(args, newValues);
+                    }, onResetField: (fieldName) => {
+                        setResetLog((prev) => [...prev, `${new Date().toLocaleTimeString()}: ${fieldName} reset`]);
+                    } }), _jsxs("div", { className: "mt-4 rounded border border-gray-200 bg-gray-50 p-4", children: [_jsx("p", { className: "text-sm font-semibold", children: "Current Values:" }), _jsx("pre", { className: "mt-2 text-xs", children: JSON.stringify(values, null, 2) }), _jsx("p", { className: "mt-4 text-sm font-semibold", children: "Reset Log:" }), _jsx("div", { className: "mt-2 max-h-[150px] overflow-auto bg-white rounded border text-xs", children: resetLog.length === 0 ? (_jsx("p", { className: "p-2 text-gray-400", children: "No resets yet..." })) : (resetLog.map((log, idx) => (_jsx("p", { className: "p-1 border-b last:border-b-0", children: log }, idx)))) })] })] }));
+    },
+};
+export default meta;

package/dist/src/components/Filters/Filters.types.d.ts

@@ -0,0 +1,43 @@
+import type { DatePickerProps } from '../DatePicker';
+import type { CheckboxProps } from '../Checkbox';
+import type { FilterSelectProps } from './FilterSelect';
+import type { ButtonGroupProps } from '../ButtonGroup';
+import type { ButtonProps } from '../Button';
+export declare const DATE_RANGE_TYPE = "dateRange";
+export declare const SELECT_TYPE = "select";
+export declare const CHECKBOX_TYPE = "checkbox";
+export declare const BUTTON_GROUP_TYPE = "buttonGroup";
+export type FilterType = typeof DATE_RANGE_TYPE | typeof SELECT_TYPE | typeof CHECKBOX_TYPE | typeof BUTTON_GROUP_TYPE;
+type DateRangeFilterOption = Omit<DatePickerProps, 'type'> & {
+    type: typeof DATE_RANGE_TYPE;
+    name: string;
+};
+type SelectFilterOption = Omit<FilterSelectProps, 'value' | 'onValueChange'> & {
+    type: typeof SELECT_TYPE;
+    name: string;
+    label?: string;
+};
+type CheckboxFilterOption = Omit<CheckboxProps, 'type'> & {
+    type: typeof CHECKBOX_TYPE;
+    name: string;
+};
+type ButtonGroupOption = ButtonGroupProps & {
+    type: typeof BUTTON_GROUP_TYPE;
+    name: string;
+};
+export type FilterConfigType = DateRangeFilterOption | SelectFilterOption | CheckboxFilterOption | ButtonGroupOption;
+export type FiltersHandle = {
+    reset: () => void;
+    resetField: (fieldName: string) => void;
+};
+export type FiltersProps = {
+    filters: FilterConfigType[];
+    defaultValues?: Record<string, unknown>;
+    showResetButton?: boolean;
+    resetButtonText?: string;
+    resetButtonProps?: ButtonProps;
+    onReset?: () => void;
+    onResetField?: (fieldName: string) => void;
+    onChange: (values: Record<string, unknown>) => void;
+};
+export {};

package/dist/src/components/Filters/Filters.types.js

@@ -0,0 +1,4 @@
+export const DATE_RANGE_TYPE = 'dateRange';
+export const SELECT_TYPE = 'select';
+export const CHECKBOX_TYPE = 'checkbox';
+export const BUTTON_GROUP_TYPE = 'buttonGroup';

package/dist/src/components/Filters/index.d.ts

@@ -0,0 +1,2 @@
+export { Filters } from './Filters';
+export type { FilterType, FilterConfigType, FiltersHandle, FiltersProps } from './Filters.types';

package/dist/src/components/Filters/index.js

@@ -0,0 +1 @@
+export { Filters } from './Filters';

package/dist/src/components/index.d.ts

@@ -37,3 +37,4 @@ export * from './InputGroup';
 export * from './PhoneInput';
 export * from './ButtonGroup';
 export * from './CreditCard';
+export * from './Filters';

package/dist/src/components/index.js

@@ -37,3 +37,4 @@ export * from './InputGroup';
 export * from './PhoneInput';
 export * from './ButtonGroup';
 export * from './CreditCard';
+export * from './Filters';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@eml-payments/ui-kit",
-	"version": "1.8.1",
+	"version": "1.8.3",
 	"private": false,
 	"description": "ARLO UIKit",
 	"homepage": "https://github.com/EML-Payments/arlo.npm.uikit#readme",
@@ -79,6 +79,7 @@
 		"react": ">=18.0.0",
 		"react-day-picker": "^9.13.0",
 		"react-dom": ">=18.0.0",
+		"react-hook-form": "^7.75.0",
 		"react-icons": "^5.5.0",
 		"react-router-dom": "^7.9.5",
 		"tailwind-merge": "^3.4.0",