@eml-payments/ui-kit 1.8.1 → 1.8.2

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

@@ -0,0 +1,235 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Filters } from './Filters';
+import { dayjs } from '../../utils/dayjs';
+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' },
+];
+export const Default = {
+    args: {
+        filters: [
+            {
+                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',
+            },
+        ],
+    },
+    render: (args) => {
+        const [values, setValues] = useState({});
+        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 DateRangeOnly = {
+    args: {
+        filters: [
+            {
+                type: 'dateRange',
+                name: 'dateRange',
+                rangeDateFormat: 'D MMM YY',
+                placeholder: `${dayjs().subtract(1, 'month').format('D MMM YY')} - Today`,
+            },
+        ],
+    },
+    render: (args) => {
+        const [values, setValues] = useState({});
+        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 Dates:" }), _jsx("pre", { className: "mt-2 text-xs", children: JSON.stringify(values, null, 2) })] })] }));
+    },
+};
+export const SelectOnly = {
+    args: {
+        filters: [
+            {
+                type: 'select',
+                name: 'status',
+                label: 'Filter by Status',
+                options: statusOptions,
+                placeholder: 'Choose a status...',
+            },
+        ],
+    },
+    render: (args) => {
+        const [values, setValues] = useState({});
+        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 Value:" }), _jsx("pre", { className: "mt-2 text-xs", children: JSON.stringify(values, null, 2) })] })] }));
+    },
+};
+export const CheckboxOnly = {
+    args: {
+        filters: [
+            {
+                type: 'checkbox',
+                name: 'verified',
+                label: 'Verified Only',
+            },
+            {
+                type: 'checkbox',
+                name: 'archived',
+                label: 'Show Archived',
+            },
+        ],
+    },
+    render: (args) => {
+        const [values, setValues] = useState({});
+        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: "Checked Items:" }), _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...',
+            },
+        ],
+    },
+    render: (args) => {
+        const [values, setValues] = useState({});
+        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',
+            },
+        ],
+    },
+    render: (args) => {
+        const [values, setValues] = useState({});
+        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 default meta;

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

@@ -0,0 +1,27 @@
+import type { DatePickerProps } from '../DatePicker';
+import type { CheckboxProps } from '../Checkbox';
+import type { FilterSelectProps } from './FilterSelect';
+export declare const DATE_RANGE_TYPE = "dateRange";
+export declare const SELECT_TYPE = "select";
+export declare const CHECKBOX_TYPE = "checkbox";
+export type FilterType = typeof DATE_RANGE_TYPE | typeof SELECT_TYPE | typeof CHECKBOX_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;
+};
+export type FilterConfigType = DateRangeFilterOption | SelectFilterOption | CheckboxFilterOption;
+export type FiltersProps = {
+    filters: FilterConfigType[];
+    defaultValues?: Record<string, unknown>;
+    onChange: (values: Record<string, unknown>) => void;
+};
+export {};

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

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

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

@@ -0,0 +1,2 @@
+export { Filters } from './Filters';
+export type { FilterType, FilterConfigType, 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,131 +1,132 @@
-{
-	"name": "@eml-payments/ui-kit",
-	"version": "1.8.1",
-	"private": false,
-	"description": "ARLO UIKit",
-	"homepage": "https://github.com/EML-Payments/arlo.npm.uikit#readme",
-	"bugs": {
-		"url": "https://github.com/EML-Payments/arlo.npm.uikit/issues"
-	},
-	"repository": {
-		"type": "git",
-		"url": "git+https://github.com/EML-Payments/arlo.npm.uikit.git"
-	},
-	"license": "MIT",
-	"author": "EML Payments",
-	"type": "commonjs",
-	"main": "dist/src/index.js",
-	"types": "dist/src/index.d.ts",
-	"exports": {
-		".": {
-			"import": "./dist/src/index.js",
-			"require": "./dist/src/index.js",
-			"types": "./dist/src/index.d.ts"
-		},
-		"./style.css": "./dist/index.css",
-		"./index.css": "./dist/index.css",
-		"./assets/*": "./dist/src/assets/*"
-	},
-	"directories": {
-		"doc": "docs",
-		"lib": "lib"
-	},
-	"files": [
-		"dist"
-	],
-	"scripts": {
-		"prepare": "husky install",
-		"storybook": "storybook dev -p 6006",
-		"build-storybook": "storybook build",
-		"build:assets": "copyfiles -u 2 \"src/assets/**/*\" dist/src/assets",
-		"build:css": "npx tailwindcss -i ./src/index.css -o ./dist/index.css --minify",
-		"build:intl-tel-input:flags": "copyfiles -u 4 \"node_modules/intl-tel-input/build/img/flags*.webp\" \"node_modules/intl-tel-input/build/img/flags*.png\" dist/img",
-		"build": "npm run build:assets && npm run build:css && npm run build:intl-tel-input:flags && tsc",
-		"validate:dist": "node scripts/validate-dist.js",
-		"lint": "eslint . --ext .ts,.tsx --fix",
-		"format": "prettier --list-different \"**/*.{js,jsx,ts,tsx,json,htm,html,yml,yaml}\"",
-		"format:fix": "prettier --write \"**/*.{js,jsx,ts,tsx,json,htm,html,yml,yaml}\"",
-		"task:prettier": "prettier \"./src/**/*.{ts,tsx}\" --check --log-level error",
-		"task:prettier:fix": "prettier --write \"./src/**/*.{ts,tsx}\" --check --log-level error",
-		"task:eslint": "eslint \"src/**/*.{ts,tsx}\" --cache",
-		"task:eslint:fix": "eslint \"src/**/*.{ts,tsx}\" --fix --cache",
-		"task:typecheck": "tsc",
-		"formatx": "npm run task:prettier:fix && npm run task:eslint:fix && npm run task:typecheck"
-	},
-	"dependencies": {
-		"@base-ui/react": "^1.3.0",
-		"@radix-ui/react-accordion": "^1.2.12",
-		"@radix-ui/react-avatar": "^1.1.10",
-		"@radix-ui/react-checkbox": "^1.3.2",
-		"@radix-ui/react-dialog": "^1.1.14",
-		"@radix-ui/react-dropdown-menu": "^2.1.15",
-		"@radix-ui/react-label": "^2.1.7",
-		"@radix-ui/react-popover": "^1.1.15",
-		"@radix-ui/react-radio-group": "^1.3.7",
-		"@radix-ui/react-select": "^2.2.5",
-		"@radix-ui/react-slot": "^1.2.4",
-		"@radix-ui/react-switch": "^1.2.5",
-		"@radix-ui/react-tabs": "^1.1.12",
-		"@radix-ui/react-tooltip": "^1.2.7",
-		"@tailwindcss/postcss": "^4.1.11",
-		"@tanstack/react-table": "^8.12.0",
-		"@tanstack/react-virtual": "^3.13.13",
-		"class-variance-authority": "^0.7.1",
-		"clsx": "^2.1.1",
-		"dayjs": "^1.11.19",
-		"intl-tel-input": "^26.9.1",
-		"lucide-react": "^1.8.0",
-		"prettier": "^3.6.2",
-		"react": ">=18.0.0",
-		"react-day-picker": "^9.13.0",
-		"react-dom": ">=18.0.0",
-		"react-icons": "^5.5.0",
-		"react-router-dom": "^7.9.5",
-		"tailwind-merge": "^3.4.0",
-		"tailwindcss": "^4.1.11",
-		"tailwindcss-animate": "^1.0.7",
-		"tw-animate-css": "^1.4.0"
-	},
-	"devDependencies": {
-		"@eslint/js": "^9.30.1",
-		"@storybook/addon-a11y": "^10.0.6",
-		"@storybook/addon-docs": "^10.0.2",
-		"@storybook/addon-themes": "^10.0.2",
-		"@storybook/react-vite": "^10.0.6",
-		"@tailwindcss/cli": "^4.1.12",
-		"@typescript-eslint/eslint-plugin": "^8.35.1",
-		"baseline-browser-mapping": "^2.10.0",
-		"copyfiles": "^2.4.1",
-		"eslint": "^9.31.0",
-		"eslint-config-prettier": "^10.1.5",
-		"eslint-plugin-import": "^2.32.0",
-		"eslint-plugin-jsx-a11y": "^6.10.2",
-		"eslint-plugin-prettier": "^5.5.1",
-		"eslint-plugin-react": "^7.37.5",
-		"eslint-plugin-react-hooks": "^7.0.0",
-		"eslint-plugin-react-refresh": "^0.5.0",
-		"eslint-plugin-storybook": "^10.0.6",
-		"husky": "^9.1.7",
-		"lint-staged": "^16.1.2",
-		"postcss": "^8.4.21",
-		"storybook": "^10.0.6",
-		"typescript": "^6.0.3",
-		"typescript-eslint": "^8.36.0"
-	},
-	"peerDependencies": {
-		"react": ">=18.0.0",
-		"react-dom": ">=18.0.0"
-	},
-	"eslintConfig": {
-		"extends": [
-			"plugin:storybook/recommended"
-		]
-	},
-	"lint-staged": {
-		"*.{js,ts,tsx}": [
-			"prettier --write",
-			"eslint --fix"
-		],
-		"*.{json,md,css}": "prettier --write"
-	}
-}
+{
+	"name": "@eml-payments/ui-kit",
+	"version": "1.8.2",
+	"private": false,
+	"description": "ARLO UIKit",
+	"homepage": "https://github.com/EML-Payments/arlo.npm.uikit#readme",
+	"bugs": {
+		"url": "https://github.com/EML-Payments/arlo.npm.uikit/issues"
+	},
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/EML-Payments/arlo.npm.uikit.git"
+	},
+	"license": "MIT",
+	"author": "EML Payments",
+	"type": "commonjs",
+	"main": "dist/src/index.js",
+	"types": "dist/src/index.d.ts",
+	"exports": {
+		".": {
+			"import": "./dist/src/index.js",
+			"require": "./dist/src/index.js",
+			"types": "./dist/src/index.d.ts"
+		},
+		"./style.css": "./dist/index.css",
+		"./index.css": "./dist/index.css",
+		"./assets/*": "./dist/src/assets/*"
+	},
+	"directories": {
+		"doc": "docs",
+		"lib": "lib"
+	},
+	"files": [
+		"dist"
+	],
+	"scripts": {
+		"prepare": "husky install",
+		"storybook": "storybook dev -p 6006",
+		"build-storybook": "storybook build",
+		"build:assets": "copyfiles -u 2 \"src/assets/**/*\" dist/src/assets",
+		"build:css": "npx tailwindcss -i ./src/index.css -o ./dist/index.css --minify",
+		"build:intl-tel-input:flags": "copyfiles -u 4 \"node_modules/intl-tel-input/build/img/flags*.webp\" \"node_modules/intl-tel-input/build/img/flags*.png\" dist/img",
+		"build": "npm run build:assets && npm run build:css && npm run build:intl-tel-input:flags && tsc",
+		"validate:dist": "node scripts/validate-dist.js",
+		"lint": "eslint . --ext .ts,.tsx --fix",
+		"format": "prettier --list-different \"**/*.{js,jsx,ts,tsx,json,htm,html,yml,yaml}\"",
+		"format:fix": "prettier --write \"**/*.{js,jsx,ts,tsx,json,htm,html,yml,yaml}\"",
+		"task:prettier": "prettier \"./src/**/*.{ts,tsx}\" --check --log-level error",
+		"task:prettier:fix": "prettier --write \"./src/**/*.{ts,tsx}\" --check --log-level error",
+		"task:eslint": "eslint \"src/**/*.{ts,tsx}\" --cache",
+		"task:eslint:fix": "eslint \"src/**/*.{ts,tsx}\" --fix --cache",
+		"task:typecheck": "tsc",
+		"formatx": "npm run task:prettier:fix && npm run task:eslint:fix && npm run task:typecheck"
+	},
+	"dependencies": {
+		"@base-ui/react": "^1.3.0",
+		"@radix-ui/react-accordion": "^1.2.12",
+		"@radix-ui/react-avatar": "^1.1.10",
+		"@radix-ui/react-checkbox": "^1.3.2",
+		"@radix-ui/react-dialog": "^1.1.14",
+		"@radix-ui/react-dropdown-menu": "^2.1.15",
+		"@radix-ui/react-label": "^2.1.7",
+		"@radix-ui/react-popover": "^1.1.15",
+		"@radix-ui/react-radio-group": "^1.3.7",
+		"@radix-ui/react-select": "^2.2.5",
+		"@radix-ui/react-slot": "^1.2.4",
+		"@radix-ui/react-switch": "^1.2.5",
+		"@radix-ui/react-tabs": "^1.1.12",
+		"@radix-ui/react-tooltip": "^1.2.7",
+		"@tailwindcss/postcss": "^4.1.11",
+		"@tanstack/react-table": "^8.12.0",
+		"@tanstack/react-virtual": "^3.13.13",
+		"class-variance-authority": "^0.7.1",
+		"clsx": "^2.1.1",
+		"dayjs": "^1.11.19",
+		"intl-tel-input": "^26.9.1",
+		"lucide-react": "^1.8.0",
+		"prettier": "^3.6.2",
+		"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",
+		"tailwindcss": "^4.1.11",
+		"tailwindcss-animate": "^1.0.7",
+		"tw-animate-css": "^1.4.0"
+	},
+	"devDependencies": {
+		"@eslint/js": "^9.30.1",
+		"@storybook/addon-a11y": "^10.0.6",
+		"@storybook/addon-docs": "^10.0.2",
+		"@storybook/addon-themes": "^10.0.2",
+		"@storybook/react-vite": "^10.0.6",
+		"@tailwindcss/cli": "^4.1.12",
+		"@typescript-eslint/eslint-plugin": "^8.35.1",
+		"baseline-browser-mapping": "^2.10.0",
+		"copyfiles": "^2.4.1",
+		"eslint": "^9.31.0",
+		"eslint-config-prettier": "^10.1.5",
+		"eslint-plugin-import": "^2.32.0",
+		"eslint-plugin-jsx-a11y": "^6.10.2",
+		"eslint-plugin-prettier": "^5.5.1",
+		"eslint-plugin-react": "^7.37.5",
+		"eslint-plugin-react-hooks": "^7.0.0",
+		"eslint-plugin-react-refresh": "^0.5.0",
+		"eslint-plugin-storybook": "^10.0.6",
+		"husky": "^9.1.7",
+		"lint-staged": "^16.1.2",
+		"postcss": "^8.4.21",
+		"storybook": "^10.0.6",
+		"typescript": "^6.0.3",
+		"typescript-eslint": "^8.36.0"
+	},
+	"peerDependencies": {
+		"react": ">=18.0.0",
+		"react-dom": ">=18.0.0"
+	},
+	"eslintConfig": {
+		"extends": [
+			"plugin:storybook/recommended"
+		]
+	},
+	"lint-staged": {
+		"*.{js,ts,tsx}": [
+			"prettier --write",
+			"eslint --fix"
+		],
+		"*.{json,md,css}": "prettier --write"
+	}
+}