@akinon/akifilter 0.5.3 → 1.0.0

package/README.md

@@ -0,0 +1,44 @@
+# akifilter
+
+## Legacy Functionality Snapshot (`@akinon/ui/akifilter-old`)
+- **Schema-driven forms**: Builds the main filter UI from `filterSchema` using `FormBuilderWatch`, applying `labelRightAligned` props and reflecting initial values from `useAppliedFilters[0]` or persisted storage.
+- **Context-managed state**: `FilterContextProvider` derives `mainPath` from the router (or `customMainPath`), stores `appliedFilters`, `applicableFilters`, and `shownFilters` via `useImmerReducer`, and exposes actions for updates.
+- **Local storage persistence**: Reads/writes `appliedFilters-{mainPath}` and `shownFilters-{mainPath}` so filter selections survive reloads; defaults to the first eight filters when no history exists.
+- **Parent synchronization**: Propagates every applied-filter change back through `useAppliedFilters[1]`, allowing host apps to react or override initial state.
+- **Applied filter chips**: Renders active filters with labels sourced from placeholders, formats values (dates via akidate utilities, arrays, booleans) for display, and supports removing individual filters or clearing all.
+- **Dynamic filter visibility**: `SelectShownFilters` opens a modal with searchable, paginated checkboxes for every applicable filter; selections update `shownFilters` and trigger form recreation to avoid stale state.
+- **Conditional filters**: Optional `conditionalFiltersSchema` renders a secondary form whose values merge into `appliedFilters` without local storage persistence, rebuilding whenever the schema changes.
+- **Utility helpers**: Provides path parsing (`getPathFragments`) to scope state per route and a tree search helper (`getTreeNodeByValue`) for nested option lookups.
+- **Internationalization scaffolding**: Loads static i18n bundles (EN/TR) through `Akilocale` for component copy such as the panel title.
+
+## Implementation Plan (User Experience Focus)
+1. **Filter Workspace Shell**
+   - Recreate the legacy layout with updated styling hooks, keeping the header title, filter-selection trigger, applied filter strip, and main filter grid so existing users feel familiar while allowing future visual tweaks.
+   - Integrate `akilocale` for default copy (`title`, modal labels) and expose translation keys for host apps.
+
+2. **Schema Intake & Form Rendering**
+   - Accept an external `filterSchema` (and optional `conditionalFiltersSchema`) and translate each field into `akiform` widgets, honoring component-specific props, labels, and placeholders.
+   - Default-render only “primary” filters on first load (configurable count), but respect any persisted selections on subsequent visits.
+
+3. **User Input & Applied State**
+   - Mirror user edits into an internal state model while emitting JSON payloads to the host via the provided `useAppliedFilters` tuple so parent apps receive canonical data.
+   - Display currently applied filters as removable chips; value formatting should transparently handle primitives, arrays, booleans, and date-like objects.
+
+4. **Filter Visibility Management**
+   - Provide a modal (using `@akinon/ui-modal`, `@akinon/ui-input`, `@akinon/ui-pagination`) that lists all available filters with search, pagination, and checkbox toggles to control visibility.
+   - Persist visibility selections and main-form order to local storage, ensuring a stable experience across sessions.
+
+5. **Persistence Strategy**
+   - Derive unique local-storage keys using a caller-supplied prefix plus a deterministic suffix (e.g., hash of schema or route) so multiple filter instances cannot collide.
+   - Support optional overrides (custom key + custom main path) while always appending our uniqueness salt.
+
+6. **Conditional Filter Surface**
+   - Render an auxiliary `akiform` section beneath the main filters when `conditionalFiltersSchema` exists, reset its form state whenever the schema changes, and merge its values into the emitted applied-filter JSON without persisting to storage.
+
+7. **Bulk Actions & Import Filters**
+   - Retain the “clear all” action for quick resets, updating UI state, storage, and parent callbacks consistently.
+   - Plan dedicated affordances for CSV/XLS import: display buttons in the options toolbar, accept uploads via `@akinon/ui-upload`, and parse/normalize records into applied filters (details to be implemented in later stages).
+
+8. **Testing & Quality Targets**
+   - Cover all interactive flows (form entry, chip removal, modal toggles, persistence, conditional schema changes, CSV/XLS hooks) with Vitest and Testing Library, targeting ≥90% coverage without regressing existing suites.
+   - Document sample integration snippets so partner apps can verify behavior during development.

package/dist/cjs/akifilter.d.ts

@@ -0,0 +1,53 @@
+import './styles.css';
+import { FieldValues, Path } from '@akinon/akiform';
+import React from 'react';
+import type { AkifilterSchema } from './types';
+type AkifilterFieldValues = FieldValues;
+export type AkifilterProps<TFieldValues extends AkifilterFieldValues = AkifilterFieldValues> = {
+    /**
+     * Declarative description of the filter fields.
+     */
+    filterSchema?: AkifilterSchema<TFieldValues>;
+    /**
+     * Optional namespace for local storage persistence.
+     */
+    storageNamespace?: string;
+    /**
+     * Default values supplied by the host application.
+     */
+    defaultValues?: Partial<TFieldValues>;
+    /**
+     * Notified on every value change with the normalised payload.
+     */
+    onValuesChange?: (values: Partial<TFieldValues>) => void;
+    /**
+     * Notified whenever visible field keys change.
+     */
+    onVisibleFieldsChange?: (keys: Array<Path<TFieldValues>>) => void;
+    /**
+     * Triggered when user opts to import filters via CSV.
+     */
+    onImportCsv?: () => void;
+    /**
+     * Triggered when user opts to import filters via XLS/XLSX.
+     */
+    onImportXls?: () => void;
+    /**
+     * Triggered when user requests clearing all filters.
+     */
+    onClearAll?: () => void;
+    /**
+     * Shows the CSV import button in the toolbar. Hidden by default.
+     */
+    enableImportCsv?: boolean;
+    /**
+     * Shows the XLS/XLSX import button in the toolbar. Hidden by default.
+     */
+    enableImportXls?: boolean;
+};
+export declare const Akifilter: {
+    <TFieldValues extends AkifilterFieldValues = FieldValues>(props: AkifilterProps<TFieldValues>): React.JSX.Element;
+    displayName: string;
+};
+export {};
+//# sourceMappingURL=akifilter.d.ts.map

package/dist/cjs/akifilter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"akifilter.d.ts","sourceRoot":"","sources":["../../src/akifilter.tsx"],"names":[],"mappings":"AAAA,OAAO,cAAc,CAAC;AAGtB,OAAO,EAIL,WAAW,EAEX,IAAI,EAGL,MAAM,iBAAiB,CAAC;AAUzB,OAAO,KAAK,MAAM,OAAO,CAAC;AAsB1B,OAAO,KAAK,EAAkB,eAAe,EAAE,MAAM,SAAS,CAAC;AAU/D,KAAK,oBAAoB,GAAG,WAAW,CAAC;AAExC,MAAM,MAAM,cAAc,CACxB,YAAY,SAAS,oBAAoB,GAAG,oBAAoB,IAC9D;IACF;;OAEG;IACH,YAAY,CAAC,EAAE,eAAe,CAAC,YAAY,CAAC,CAAC;IAC7C;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IACtC;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC,YAAY,CAAC,KAAK,IAAI,CAAC;IACzD;;OAEG;IACH,qBAAqB,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,KAAK,IAAI,CAAC;IAClE;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B,CAAC;AAohBF,eAAO,MAAM,SAAS;KACpB,YAAY,SAAS,oBAAoB,uBAElC,cAAc,CAAC,YAAY,CAAC;;CAmBpC,CAAC"}

package/dist/cjs/akifilter.js

@@ -0,0 +1,299 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Akifilter = void 0;
+require("./styles.css");
+const akidate_1 = require("@akinon/akidate");
+const akiform_1 = require("@akinon/akiform");
+const ui_button_1 = require("@akinon/ui-button");
+const ui_card_1 = require("@akinon/ui-card");
+const ui_checkbox_1 = require("@akinon/ui-checkbox");
+const ui_date_picker_1 = require("@akinon/ui-date-picker");
+const ui_input_1 = require("@akinon/ui-input");
+const ui_input_number_1 = require("@akinon/ui-input-number");
+const ui_select_1 = require("@akinon/ui-select");
+const ui_typography_1 = require("@akinon/ui-typography");
+const antd_1 = require("antd");
+const react_1 = require("react");
+const react_error_boundary_1 = require("react-error-boundary");
+const storage_1 = require("./common/storage");
+const theme_overrides_1 = require("./common/theme-overrides");
+const applied_filters_1 = require("./components/applied-filters");
+const filter_toolbar_1 = require("./components/filter-toolbar");
+const visibility_modal_1 = require("./components/visibility-modal");
+const constants_1 = require("./constants");
+const use_debounced_value_1 = require("./hooks/use-debounced-value");
+const i18n_1 = require("./i18n");
+const schema_1 = require("./utils/schema");
+const values_1 = require("./utils/values");
+const AkifilterContent = ({ filterSchema, storageNamespace, defaultValues, onValuesChange, onVisibleFieldsChange, onImportCsv, onImportXls, onClearAll, enableImportCsv, enableImportXls }) => {
+    const storageKey = react_1.default.useMemo(() => (0, storage_1.buildStorageKey)(filterSchema, storageNamespace), [filterSchema, storageNamespace]);
+    const schemaDefaults = react_1.default.useMemo(() => (0, schema_1.normaliseValuesBySchema)(filterSchema, (0, schema_1.extractDefaultValues)(filterSchema)), [filterSchema]);
+    const externalDefaults = react_1.default.useMemo(() => (0, schema_1.normaliseValuesBySchema)(filterSchema, defaultValues), [filterSchema, defaultValues]);
+    const baseDefaultValues = react_1.default.useMemo(() => (Object.assign(Object.assign({}, schemaDefaults), externalDefaults)), [schemaDefaults, externalDefaults]);
+    const persistedDefaults = react_1.default.useMemo(() => {
+        var _a;
+        return (0, schema_1.normaliseValuesBySchema)(filterSchema, (_a = (0, storage_1.readStoredValues)(filterSchema, storageKey)) !== null && _a !== void 0 ? _a : undefined);
+    }, [filterSchema, storageKey]);
+    const mergedDefaultValues = react_1.default.useMemo(() => (Object.assign(Object.assign({}, baseDefaultValues), persistedDefaults)), [baseDefaultValues, persistedDefaults]);
+    const formMethods = (0, akiform_1.useForm)({
+        defaultValues: mergedDefaultValues
+    });
+    const formValues = (0, akiform_1.useWatch)({ control: formMethods.control });
+    const [isModalOpen, setIsModalOpen] = react_1.default.useState(false);
+    const [searchTerm, setSearchTerm] = react_1.default.useState('');
+    const [modalPage, setModalPage] = react_1.default.useState(1);
+    const [modalPageSize, setModalPageSize] = react_1.default.useState(constants_1.DEFAULT_MODAL_PAGE_SIZE);
+    const appliedFilters = react_1.default.useMemo(() => {
+        if (!formValues) {
+            return [];
+        }
+        return filterSchema.reduce((acc, field) => {
+            const key = String(field.key);
+            const currentValue = formValues[key];
+            if (currentValue === undefined || currentValue === null) {
+                return acc;
+            }
+            if (typeof currentValue === 'string' && currentValue.trim() === '') {
+                return acc;
+            }
+            if (Array.isArray(currentValue) && currentValue.length === 0) {
+                return acc;
+            }
+            if (field.type === 'checkbox' && currentValue !== true) {
+                return acc;
+            }
+            const label = field.placeholder || field.label || key;
+            const resolveSelectLabel = () => {
+                var _a;
+                if (!('options' in field) || !field.options) {
+                    return String(currentValue);
+                }
+                const match = field.options.find(option => option.value === currentValue);
+                return String((_a = match === null || match === void 0 ? void 0 : match.label) !== null && _a !== void 0 ? _a : currentValue);
+            };
+            const resolveValue = () => {
+                if (field.type === 'select') {
+                    return resolveSelectLabel();
+                }
+                if (field.type === 'date') {
+                    const iso = akidate_1.akidate.toIsoDate(currentValue);
+                    if (iso) {
+                        return akidate_1.akidate.formatIsoDate(iso, 'YYYY-MM-DD');
+                    }
+                }
+                if (Array.isArray(currentValue)) {
+                    return currentValue.map((value) => String(value)).join(', ');
+                }
+                if (typeof currentValue === 'boolean') {
+                    return currentValue ? 'true' : 'false';
+                }
+                if (typeof currentValue === 'string' ||
+                    typeof currentValue === 'number') {
+                    return String(currentValue);
+                }
+                const iso = akidate_1.akidate.toIsoDate(currentValue);
+                if (iso) {
+                    return akidate_1.akidate.formatIsoDate(iso, 'YYYY-MM-DD');
+                }
+                return String(currentValue);
+            };
+            acc.push({ key, label, value: resolveValue() });
+            return acc;
+        }, []);
+    }, [filterSchema, formValues]);
+    const resolveInitialVisibleKeys = react_1.default.useCallback(() => {
+        const storedKeys = (0, storage_1.readVisibleKeys)(filterSchema, storageKey);
+        if (storedKeys && storedKeys.length > 0) {
+            return (0, schema_1.ensureSchemaOrder)(filterSchema, storedKeys);
+        }
+        return (0, schema_1.deriveDefaultVisibleKeys)(filterSchema);
+    }, [filterSchema, storageKey]);
+    const [visibleKeys, setVisibleKeys] = react_1.default.useState(resolveInitialVisibleKeys);
+    react_1.default.useEffect(() => {
+        setVisibleKeys(previous => {
+            const ordered = (0, schema_1.ensureSchemaOrder)(filterSchema, previous);
+            if (ordered.length) {
+                return ordered;
+            }
+            return resolveInitialVisibleKeys();
+        });
+    }, [filterSchema, resolveInitialVisibleKeys]);
+    react_1.default.useEffect(() => {
+        (0, storage_1.writeVisibleKeys)(storageKey, visibleKeys);
+        onVisibleFieldsChange === null || onVisibleFieldsChange === void 0 ? void 0 : onVisibleFieldsChange(visibleKeys);
+    }, [visibleKeys, onVisibleFieldsChange, storageKey]);
+    react_1.default.useEffect(() => {
+        formMethods.reset(mergedDefaultValues);
+    }, [formMethods, mergedDefaultValues]);
+    const normalisedValues = react_1.default.useMemo(() => (0, values_1.normaliseOutputValues)(filterSchema, formValues), [filterSchema, formValues]);
+    const initialOutputValues = react_1.default.useMemo(() => (0, values_1.normaliseOutputValues)(filterSchema, mergedDefaultValues), [filterSchema, mergedDefaultValues]);
+    const hasInitialValues = react_1.default.useMemo(() => Object.keys(initialOutputValues).length > 0, [initialOutputValues]);
+    const serialisedValues = react_1.default.useMemo(() => JSON.stringify(normalisedValues), [normalisedValues]);
+    const debouncedSerialisedValues = (0, use_debounced_value_1.useDebouncedValue)(serialisedValues, constants_1.FILTER_DEBOUNCE_DELAY);
+    const lastPersistedValuesRef = react_1.default.useRef(null);
+    const hasEmittedValuesRef = react_1.default.useRef(false);
+    react_1.default.useEffect(() => {
+        if (debouncedSerialisedValues == null) {
+            return;
+        }
+        if (hasEmittedValuesRef.current &&
+            lastPersistedValuesRef.current === debouncedSerialisedValues) {
+            return;
+        }
+        const parsedValues = JSON.parse(debouncedSerialisedValues);
+        const isEmpty = Object.keys(parsedValues).length === 0;
+        if (!hasEmittedValuesRef.current && isEmpty && !hasInitialValues) {
+            hasEmittedValuesRef.current = true;
+            lastPersistedValuesRef.current = debouncedSerialisedValues;
+            (0, storage_1.clearStoredValues)(storageKey);
+            return;
+        }
+        hasEmittedValuesRef.current = true;
+        lastPersistedValuesRef.current = debouncedSerialisedValues;
+        onValuesChange === null || onValuesChange === void 0 ? void 0 : onValuesChange(parsedValues);
+        if (isEmpty) {
+            (0, storage_1.clearStoredValues)(storageKey);
+        }
+        else {
+            (0, storage_1.writeStoredValues)(storageKey, parsedValues);
+        }
+    }, [debouncedSerialisedValues, hasInitialValues, onValuesChange, storageKey]);
+    react_1.default.useEffect(() => {
+        lastPersistedValuesRef.current = null;
+    }, [storageKey]);
+    const handleClearAll = react_1.default.useCallback(() => {
+        formMethods.reset(baseDefaultValues);
+        onClearAll === null || onClearAll === void 0 ? void 0 : onClearAll();
+        (0, storage_1.clearStoredValues)(storageKey);
+    }, [baseDefaultValues, formMethods, onClearAll, storageKey]);
+    const handleOpenModal = react_1.default.useCallback(() => {
+        setIsModalOpen(true);
+        setSearchTerm('');
+        setModalPage(1);
+    }, []);
+    const handleCloseModal = react_1.default.useCallback(() => {
+        setIsModalOpen(false);
+    }, []);
+    const handleToggleVisibility = react_1.default.useCallback((key) => {
+        setVisibleKeys(prev => {
+            const exists = prev.includes(key);
+            if (exists && prev.length === 1) {
+                return prev;
+            }
+            const nextKeys = exists
+                ? prev.filter(item => item !== key)
+                : [...prev, key];
+            return (0, schema_1.ensureSchemaOrder)(filterSchema, nextKeys);
+        });
+    }, [filterSchema]);
+    const handleRemoveFilter = react_1.default.useCallback((key) => {
+        const schemaField = filterSchema.find(field => String(field.key) === key);
+        if (!schemaField) {
+            return;
+        }
+        const defaultValue = baseDefaultValues[String(schemaField.key)];
+        formMethods.resetField(schemaField.key, {
+            defaultValue
+        });
+    }, [baseDefaultValues, filterSchema, formMethods]);
+    const filteredFields = react_1.default.useMemo(() => {
+        const normalisedTerm = searchTerm.trim().toLowerCase();
+        if (!normalisedTerm) {
+            return filterSchema;
+        }
+        return filterSchema.filter(field => {
+            const searchable = [field.label, field.placeholder, String(field.key)]
+                .filter(Boolean)
+                .map(value => String(value).toLowerCase());
+            return searchable.some(text => text.includes(normalisedTerm));
+        });
+    }, [filterSchema, searchTerm]);
+    const paginatedFields = react_1.default.useMemo(() => {
+        const start = (modalPage - 1) * modalPageSize;
+        return filteredFields.slice(start, start + modalPageSize);
+    }, [filteredFields, modalPage, modalPageSize]);
+    const visibleFields = react_1.default.useMemo(() => filterSchema.filter(field => visibleKeys.includes(String(field.key))), [filterSchema, visibleKeys]);
+    const renderFieldComponent = (field) => {
+        const ariaLabel = (0, schema_1.getFieldAriaLabel)(field);
+        switch (field.type) {
+            case 'text':
+                return (react_1.default.createElement(ui_input_1.Input, { placeholder: field.placeholder, size: "large", allowClear: true, "aria-label": ariaLabel }));
+            case 'number':
+                return (react_1.default.createElement(ui_input_number_1.InputNumber, { placeholder: field.placeholder, size: "large", className: "akinon-filter__field--number", "aria-label": ariaLabel }));
+            case 'select':
+                return (react_1.default.createElement(ui_select_1.Select, { placeholder: field.placeholder, size: "large", options: field.options, showSearch: true, optionFilterProp: "label", "aria-label": ariaLabel }));
+            case 'checkbox':
+                return react_1.default.createElement(ui_checkbox_1.Checkbox, null, field.label);
+            case 'date':
+                return (react_1.default.createElement(ui_date_picker_1.DatePicker, { placeholder: field.placeholder, size: "large", showTime: field.showTime, suffixIcon: "calendar", suffixIconSize: "16px", "aria-label": ariaLabel }));
+            case 'textarea':
+                return (react_1.default.createElement(ui_input_1.InputTextArea, { placeholder: field.placeholder, autoSize: { minRows: 3, maxRows: 6 }, "aria-label": ariaLabel }));
+            case 'custom':
+                if (typeof field.render === 'function') {
+                    return field.render({
+                        field,
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                        control: formMethods.control,
+                        formValues: formMethods.getValues(),
+                        formState: formMethods.formState
+                    });
+                }
+                return (react_1.default.createElement(ui_typography_1.Text, { type: "secondary", className: "akinon-filter__unsupported" }, i18n_1.i18n.t('form.unsupportedField', { field: String(field.type) })));
+            default:
+                return (react_1.default.createElement(ui_typography_1.Text, { type: "secondary", className: "akinon-filter__unsupported" }, i18n_1.i18n.t('form.unsupportedField', { field: String(field.type) })));
+        }
+    };
+    return (react_1.default.createElement(ui_card_1.Card, { size: "small", className: "akinon-filter shadow", "data-testid": "akifilter-root" },
+        react_1.default.createElement(antd_1.ConfigProvider, { theme: theme_overrides_1.themeOverrides },
+            react_1.default.createElement(filter_toolbar_1.FilterToolbar, { onOpenModal: handleOpenModal, enableImportCsv: enableImportCsv, enableImportXls: enableImportXls, onImportCsv: onImportCsv, onImportXls: onImportXls }),
+            react_1.default.createElement(applied_filters_1.AppliedFilters, { filters: appliedFilters, onRemove: handleRemoveFilter, onClearAll: handleClearAll }),
+            react_1.default.createElement("div", { className: "akinon-filter__body" },
+                react_1.default.createElement(akiform_1.Akiform, { layout: "vertical", className: "akinon-filter__form" },
+                    react_1.default.createElement("div", { className: "akinon-filter__form-grid", "data-testid": "akifilter-form-grid" },
+                        visibleFields.map(field => (react_1.default.createElement(akiform_1.FormItem, { key: String(field.key), control: formMethods.control, name: field.key, tooltip: field.tooltip, help: field.help, labelDescription: field.labelDescription, required: Boolean(field.validation), valuePropName: field.type === 'checkbox' ? 'checked' : undefined }, renderFieldComponent(field)))),
+                        visibleFields.length === 0 ? (react_1.default.createElement("div", { className: "akinon-filter__empty" }, i18n_1.i18n.t('form.noVisibleFields'))) : null))),
+            react_1.default.createElement(visibility_modal_1.VisibilityModal, { open: isModalOpen, onClose: handleCloseModal, searchTerm: searchTerm, paginatedFields: paginatedFields, filteredCount: filteredFields.length, visibleKeys: visibleKeys, onSearchTermChange: value => {
+                    setSearchTerm(value);
+                    setModalPage(1);
+                }, onToggleVisibility: handleToggleVisibility, onPaginationChange: (page, pageSize) => {
+                    setModalPage(page);
+                    if (pageSize !== modalPageSize) {
+                        setModalPageSize(pageSize);
+                    }
+                }, page: modalPage, pageSize: modalPageSize }))));
+};
+const AkifilterEmptyState = () => {
+    const { t } = i18n_1.i18n;
+    return (react_1.default.createElement(ui_card_1.Card, { size: "small", className: "akinon-filter shadow", "data-testid": "akifilter-empty" },
+        react_1.default.createElement(antd_1.ConfigProvider, { theme: theme_overrides_1.themeOverrides },
+            react_1.default.createElement("div", { className: "akinon-filter__empty-state" },
+                react_1.default.createElement(ui_typography_1.Text, null, t('emptyState.message'))))));
+};
+const renderErrorFallback = ({ resetErrorBoundary }) => {
+    const { t } = i18n_1.i18n;
+    return (react_1.default.createElement(ui_card_1.Card, { size: "small", className: "akinon-filter shadow", "data-testid": "akifilter-error" },
+        react_1.default.createElement(antd_1.ConfigProvider, { theme: theme_overrides_1.themeOverrides },
+            react_1.default.createElement("div", { className: "akinon-filter__error-state" },
+                react_1.default.createElement(ui_typography_1.Title, { level: 5, className: "akinon-filter__error-title" }, t('errors.title')),
+                react_1.default.createElement(ui_typography_1.Text, { type: "secondary", className: "akinon-filter__error-description" }, t('errors.description')),
+                react_1.default.createElement(ui_button_1.Button, { type: "primary", onClick: resetErrorBoundary, size: "small" }, t('errors.retry'))))));
+};
+const Akifilter = (props) => {
+    const { filterSchema } = props, restProps = __rest(props, ["filterSchema"]);
+    const resolvedSchema = (filterSchema !== null && filterSchema !== void 0 ? filterSchema : []);
+    const hasSchema = resolvedSchema.length > 0;
+    return (react_1.default.createElement(react_error_boundary_1.ErrorBoundary, { fallbackRender: renderErrorFallback }, hasSchema ? (react_1.default.createElement(AkifilterContent, Object.assign({}, restProps, { filterSchema: resolvedSchema }))) : (react_1.default.createElement(AkifilterEmptyState, null))));
+};
+exports.Akifilter = Akifilter;
+exports.Akifilter.displayName = 'Akifilter';

package/dist/cjs/common/storage.d.ts

@@ -0,0 +1,10 @@
+import type { FieldValues } from '@akinon/akiform';
+import type { AkifilterField } from '../types';
+export declare const buildStorageKey: <TFieldValues extends FieldValues>(schema: AkifilterField<TFieldValues>[], namespace?: string) => string;
+export declare const readVisibleKeys: <TFieldValues extends FieldValues>(schema: AkifilterField<TFieldValues>[], storageKey: string) => string[] | null;
+export declare const writeVisibleKeys: (storageKey: string, keys: string[]) => void;
+export declare const clearVisibleKeys: (storageKey: string) => void;
+export declare const readStoredValues: <TFieldValues extends FieldValues>(schema: AkifilterField<TFieldValues>[], storageKey: string) => Partial<TFieldValues> | null;
+export declare const writeStoredValues: <TFieldValues extends FieldValues>(storageKey: string, values: Partial<TFieldValues>) => void;
+export declare const clearStoredValues: (storageKey: string) => void;
+//# sourceMappingURL=storage.d.ts.map

package/dist/cjs/common/storage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"storage.d.ts","sourceRoot":"","sources":["../../../src/common/storage.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAEnD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAqB/C,eAAO,MAAM,eAAe,GAAI,YAAY,SAAS,WAAW,EAC9D,QAAQ,cAAc,CAAC,YAAY,CAAC,EAAE,EACtC,YAAY,MAAM,KACjB,MAKF,CAAC;AAIF,eAAO,MAAM,eAAe,GAAI,YAAY,SAAS,WAAW,EAC9D,QAAQ,cAAc,CAAC,YAAY,CAAC,EAAE,EACtC,YAAY,MAAM,KACjB,MAAM,EAAE,GAAG,IAuBb,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,YAAY,MAAM,EAAE,MAAM,MAAM,EAAE,KAAG,IAQrE,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,YAAY,MAAM,KAAG,IAQrD,CAAC;AAKF,eAAO,MAAM,gBAAgB,GAAI,YAAY,SAAS,WAAW,EAC/D,QAAQ,cAAc,CAAC,YAAY,CAAC,EAAE,EACtC,YAAY,MAAM,KACjB,OAAO,CAAC,YAAY,CAAC,GAAG,IA+B1B,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,YAAY,SAAS,WAAW,EAChE,YAAY,MAAM,EAClB,QAAQ,OAAO,CAAC,YAAY,CAAC,KAC5B,IAeF,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,YAAY,MAAM,KAAG,IAQtD,CAAC"}

package/dist/cjs/common/storage.js

@@ -0,0 +1,124 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.clearStoredValues = exports.writeStoredValues = exports.readStoredValues = exports.clearVisibleKeys = exports.writeVisibleKeys = exports.readVisibleKeys = exports.buildStorageKey = void 0;
+const STORAGE_PREFIX = 'akifilter:v1';
+const VALUES_SUFFIX = ':values';
+const hashString = (value) => {
+    let hash = 0;
+    for (let i = 0; i < value.length; i += 1) {
+        const chr = value.charCodeAt(i);
+        hash = (hash << 5) - hash + chr;
+        hash |= 0; // Convert to 32bit integer
+    }
+    return Math.abs(hash).toString(36);
+};
+const buildSchemaSignature = (schema) => {
+    return schema.map(field => `${String(field.key)}:${field.type}`).join('|');
+};
+const buildStorageKey = (schema, namespace) => {
+    const signature = buildSchemaSignature(schema);
+    const hashedSignature = hashString(signature);
+    const base = namespace ? namespace.trim() : 'default';
+    return `${STORAGE_PREFIX}:${base}:${hashedSignature}`;
+};
+exports.buildStorageKey = buildStorageKey;
+const isBrowser = typeof window !== 'undefined';
+const readVisibleKeys = (schema, storageKey) => {
+    if (!isBrowser)
+        return null;
+    try {
+        const rawValue = window.localStorage.getItem(storageKey);
+        if (!rawValue) {
+            return null;
+        }
+        const parsed = JSON.parse(rawValue);
+        if (!Array.isArray(parsed)) {
+            return null;
+        }
+        const schemaKeys = new Set(schema.map(field => String(field.key)));
+        return parsed.filter(key => schemaKeys.has(String(key)));
+    }
+    catch (error) {
+        console.warn('Akifilter: unable to read visibility state from storage', error);
+        return null;
+    }
+};
+exports.readVisibleKeys = readVisibleKeys;
+const writeVisibleKeys = (storageKey, keys) => {
+    if (!isBrowser)
+        return;
+    try {
+        window.localStorage.setItem(storageKey, JSON.stringify(keys));
+    }
+    catch (error) {
+        console.warn('Akifilter: unable to persist visibility state', error);
+    }
+};
+exports.writeVisibleKeys = writeVisibleKeys;
+const clearVisibleKeys = (storageKey) => {
+    if (!isBrowser)
+        return;
+    try {
+        window.localStorage.removeItem(storageKey);
+    }
+    catch (error) {
+        console.warn('Akifilter: unable to clear visibility state', error);
+    }
+};
+exports.clearVisibleKeys = clearVisibleKeys;
+const buildValuesStorageKey = (storageKey) => `${storageKey}${VALUES_SUFFIX}`;
+const readStoredValues = (schema, storageKey) => {
+    if (!isBrowser)
+        return null;
+    try {
+        const rawValue = window.localStorage.getItem(buildValuesStorageKey(storageKey));
+        if (!rawValue) {
+            return null;
+        }
+        const parsed = JSON.parse(rawValue);
+        if (!parsed || typeof parsed !== 'object') {
+            return null;
+        }
+        const schemaKeys = new Set(schema.map(field => String(field.key)));
+        return Object.entries(parsed).reduce((acc, [key, value]) => {
+            if (schemaKeys.has(String(key))) {
+                acc[key] =
+                    value;
+            }
+            return acc;
+        }, {});
+    }
+    catch (error) {
+        console.warn('Akifilter: unable to read values from storage', error);
+        return null;
+    }
+};
+exports.readStoredValues = readStoredValues;
+const writeStoredValues = (storageKey, values) => {
+    if (!isBrowser)
+        return;
+    const valuesKey = buildValuesStorageKey(storageKey);
+    const entries = Object.entries(values);
+    try {
+        if (entries.length === 0) {
+            window.localStorage.removeItem(valuesKey);
+            return;
+        }
+        window.localStorage.setItem(valuesKey, JSON.stringify(values));
+    }
+    catch (error) {
+        console.warn('Akifilter: unable to persist values', error);
+    }
+};
+exports.writeStoredValues = writeStoredValues;
+const clearStoredValues = (storageKey) => {
+    if (!isBrowser)
+        return;
+    try {
+        window.localStorage.removeItem(buildValuesStorageKey(storageKey));
+    }
+    catch (error) {
+        console.warn('Akifilter: unable to clear stored values', error);
+    }
+};
+exports.clearStoredValues = clearStoredValues;

package/dist/cjs/common/theme-overrides.d.ts

@@ -0,0 +1,3 @@
+import { ThemeConfig } from 'antd';
+export declare const themeOverrides: ThemeConfig;
+//# sourceMappingURL=theme-overrides.d.ts.map

package/dist/cjs/common/theme-overrides.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-overrides.d.ts","sourceRoot":"","sources":["../../../src/common/theme-overrides.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,MAAM,CAAC;AAEnC,eAAO,MAAM,cAAc,EAAE,WAsB5B,CAAC"}

package/dist/cjs/common/theme-overrides.js

@@ -0,0 +1,9 @@
+"use strict";
+var _a, _b;
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.themeOverrides = void 0;
+const ui_theme_1 = require("@akinon/ui-theme");
+exports.themeOverrides = Object.assign(Object.assign({}, ui_theme_1.theme), { algorithm: ui_theme_1.theme.algorithm, token: {
+        colorTextBase: ui_theme_1.theme.colors.ebonyClay['900'],
+        colorText: ui_theme_1.theme.colors.ebonyClay['900']
+    }, components: Object.assign(Object.assign({}, ui_theme_1.theme.components), { Typography: Object.assign(Object.assign({}, (_a = ui_theme_1.theme.components) === null || _a === void 0 ? void 0 : _a.Typography), { colorTextHeading: ui_theme_1.theme.colors.neutral['100'], colorText: ui_theme_1.theme.colors.neutral['500'], titleMarginBottom: 0 }), Modal: Object.assign(Object.assign({}, (_b = ui_theme_1.theme.components) === null || _b === void 0 ? void 0 : _b.Modal), { headerBg: ui_theme_1.theme.colors.ebonyClay['600'], contentBg: ui_theme_1.theme.colors.ebonyClay['600'], titleColor: ui_theme_1.theme.colors.neutral['200'] }) }) });

package/dist/cjs/components/applied-filters.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+type AppliedFilter = {
+    key: string;
+    label: string;
+    value: string;
+};
+type AppliedFiltersProps = {
+    filters: AppliedFilter[];
+    onRemove: (key: string) => void;
+    onClearAll: () => void;
+};
+export declare const AppliedFilters: ({ filters, onRemove, onClearAll }: AppliedFiltersProps) => React.JSX.Element;
+export type { AppliedFilter };
+//# sourceMappingURL=applied-filters.d.ts.map

package/dist/cjs/components/applied-filters.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"applied-filters.d.ts","sourceRoot":"","sources":["../../../src/components/applied-filters.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,KAAK,aAAa,GAAG;IACnB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,KAAK,mBAAmB,GAAG;IACzB,OAAO,EAAE,aAAa,EAAE,CAAC;IACzB,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,UAAU,EAAE,MAAM,IAAI,CAAC;CACxB,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,mCAI5B,mBAAmB,sBAoDrB,CAAC;AAEF,YAAY,EAAE,aAAa,EAAE,CAAC"}

package/dist/cjs/components/applied-filters.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AppliedFilters = void 0;
+const icons_1 = require("@akinon/icons");
+const ui_button_1 = require("@akinon/ui-button");
+const ui_space_1 = require("@akinon/ui-space");
+const ui_typography_1 = require("@akinon/ui-typography");
+const react_1 = require("react");
+const i18n_1 = require("../i18n");
+const AppliedFilters = ({ filters, onRemove, onClearAll }) => {
+    const hasFilters = filters.length > 0;
+    return (react_1.default.createElement("div", { className: "akinon-filter__applied", "data-testid": "akifilter-applied" },
+        react_1.default.createElement(ui_space_1.Space, { className: "akinon-filter__applied-summary", size: 8 },
+            react_1.default.createElement(ui_typography_1.Text, { className: "akinon-filter__applied-label" }, i18n_1.i18n.t('applied.label')),
+            hasFilters ? (react_1.default.createElement(ui_space_1.Space, { className: "akinon-filter__applied-items", size: 8, wrap: true }, filters.map(item => (react_1.default.createElement("div", { key: `${item.key}-${item.value}`, className: "akinon-filter__chip" },
+                react_1.default.createElement("span", { className: "akinon-filter__chip-label" },
+                    item.label,
+                    ":"),
+                react_1.default.createElement("span", { className: "akinon-filter__chip-value" }, item.value),
+                react_1.default.createElement("button", { type: "button", "aria-label": i18n_1.i18n.t('applied.clearSingle', {
+                        field: item.label
+                    }), className: "akinon-filter__chip-button", onClick: () => onRemove(item.key) },
+                    react_1.default.createElement(icons_1.Icon, { icon: "no", size: 16 }))))))) : (react_1.default.createElement(ui_typography_1.Text, { className: "akinon-filter__applied-empty" }, i18n_1.i18n.t('applied.empty')))),
+        react_1.default.createElement(ui_button_1.Button, { className: "akinon-filter__clear", icon: "bin", iconSize: 16, onClick: onClearAll, size: "small", type: "icon", title: i18n_1.i18n.t('applied.clearAll'), "aria-label": i18n_1.i18n.t('applied.clearAll'), disabled: !hasFilters })));
+};
+exports.AppliedFilters = AppliedFilters;

package/dist/cjs/components/filter-toolbar.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+type FilterToolbarProps = {
+    onOpenModal: () => void;
+    enableImportCsv?: boolean;
+    enableImportXls?: boolean;
+    onImportCsv?: () => void;
+    onImportXls?: () => void;
+};
+export declare const FilterToolbar: ({ onOpenModal, enableImportCsv, enableImportXls, onImportCsv, onImportXls }: FilterToolbarProps) => React.JSX.Element;
+export {};
+//# sourceMappingURL=filter-toolbar.d.ts.map

package/dist/cjs/components/filter-toolbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter-toolbar.d.ts","sourceRoot":"","sources":["../../../src/components/filter-toolbar.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,KAAK,kBAAkB,GAAG;IACxB,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;CAC1B,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,6EAM3B,kBAAkB,sBAwCpB,CAAC"}

package/dist/cjs/components/filter-toolbar.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FilterToolbar = void 0;
+const ui_button_1 = require("@akinon/ui-button");
+const ui_space_1 = require("@akinon/ui-space");
+const ui_typography_1 = require("@akinon/ui-typography");
+const react_1 = require("react");
+const i18n_1 = require("../i18n");
+const FilterToolbar = ({ onOpenModal, enableImportCsv, enableImportXls, onImportCsv, onImportXls }) => {
+    return (react_1.default.createElement("div", { className: "akinon-filter__top" },
+        react_1.default.createElement(ui_typography_1.Title, { className: "akinon-filter__title", level: 4 }, i18n_1.i18n.t('header.title')),
+        react_1.default.createElement(ui_space_1.Space, { className: "akinon-filter__toolbar", size: 6 },
+            enableImportCsv && onImportCsv ? (react_1.default.createElement(ui_button_1.Button, { className: "akinon-filter__toolbar-item", onClick: onImportCsv, type: "primary" }, i18n_1.i18n.t('header.actions.importCsv'))) : null,
+            enableImportXls && onImportXls ? (react_1.default.createElement(ui_button_1.Button, { className: "akinon-filter__toolbar-item", onClick: onImportXls, type: "primary" }, i18n_1.i18n.t('header.actions.importXls'))) : null,
+            react_1.default.createElement(ui_button_1.Button, { className: "akinon-filter__toolbar-item", icon: "filter", iconSize: 16, onClick: onOpenModal, type: "primary", title: i18n_1.i18n.t('header.actions.selectFilters'), "aria-label": i18n_1.i18n.t('header.actions.selectFilters') }))));
+};
+exports.FilterToolbar = FilterToolbar;