@akinon/akifilter 0.3.0 → 0.4.0

package/dist/cjs/constants/index.js

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defaultBreakpoints = exports.Breakpoint = exports.defaultRowKey = exports.sampleDate = exports.dateManipulationKeys = exports.omsDashboardStorageKeyName = exports.allowedHtmlTypes = exports.allowedImageTypes = exports.allowedFileTypesAndXlsx = exports.allowedFileTypes = exports.contextChannel = exports.platformLanguage = exports.readResponseMessageKey = exports.permissionSlugSuffix = exports.googleMapApiKey = exports.tokenStorageKey = exports.tokenHeaderKEY = exports.dateTimeFormat = exports.defaultDateTimeFormatWithTimeZone = exports.defaultDateTimeFormatIntl = exports.defaultDateTimeFormat = exports.defaultDateTimeValueFormat = exports.fullDateTimeWithZoneFormat = exports.dateTimeLocalSecondsFormat = exports.overallDateFormat = exports.dateWithMonthNameAndYear = exports.dateWithMonthName = exports.timeFormatWithDateAndTime = exports.timeFormatWithTimeZone = exports.defaultTimeFormatWithTimeZone = exports.defaultTimeFormatWithSeconds = exports.defaultTimeFormat = exports.defaultDateValueFormat = exports.defaultDateFormat = void 0;
+exports.defaultDateFormat = 'DD/MM/YYYY';
+exports.defaultDateValueFormat = 'YYYY-MM-DD';
+exports.defaultTimeFormat = 'HH:mm';
+exports.defaultTimeFormatWithSeconds = 'HH:mm:ss';
+exports.defaultTimeFormatWithTimeZone = 'HH:mm:ssZZ';
+exports.timeFormatWithTimeZone = 'HH:mmZ';
+exports.timeFormatWithDateAndTime = 'LLL';
+exports.dateWithMonthName = 'DD MMMM';
+exports.dateWithMonthNameAndYear = 'DD MMMM YYYY';
+exports.overallDateFormat = 'DD-MM-YYYY HH:mm:ss';
+exports.dateTimeLocalSecondsFormat = 'YYYY-MM-DDTHH:mm:ss.SSS';
+exports.fullDateTimeWithZoneFormat = 'YYYY-MM-DDTHH:mm:ss.SSS\\Z';
+exports.defaultDateTimeValueFormat = `${exports.defaultDateValueFormat} ${exports.defaultTimeFormatWithSeconds}`;
+exports.defaultDateTimeFormat = `${exports.defaultDateFormat} ${exports.defaultTimeFormat}`;
+exports.defaultDateTimeFormatIntl = {
+    year: 'numeric',
+    month: 'numeric',
+    day: 'numeric',
+    hour: 'numeric',
+    minute: 'numeric',
+    hour12: false
+};
+exports.defaultDateTimeFormatWithTimeZone = `${exports.defaultDateValueFormat} ${exports.timeFormatWithTimeZone}`;
+exports.dateTimeFormat = `${exports.defaultDateValueFormat} ${exports.defaultTimeFormat}`;
+exports.tokenHeaderKEY = 'Bearer';
+exports.tokenStorageKey = 'tkn';
+exports.googleMapApiKey = 'AIzaSyB7GLs4svXGax91fiW-gH1wInjmde7cEHk';
+exports.permissionSlugSuffix = '-v2';
+exports.readResponseMessageKey = 'readResponseMessages';
+exports.platformLanguage = 'platform_language';
+exports.contextChannel = 'contextChannel';
+exports.allowedFileTypes = '.xls, .csv';
+exports.allowedFileTypesAndXlsx = exports.allowedFileTypes + ', .xlsx';
+exports.allowedImageTypes = '.png,.jpeg,.jpg,.bmp';
+exports.allowedHtmlTypes = '.html';
+exports.omsDashboardStorageKeyName = 'oms_dashboardFilters';
+exports.dateManipulationKeys = {
+    END_OF: 'endOf',
+    SUBTRACT: 'subtract',
+    ADD: 'add'
+};
+exports.sampleDate = '2022-01-01';
+exports.defaultRowKey = 'id';
+exports.Breakpoint = {
+    MOBILE: 'MOBILE',
+    TABLET: 'TABLET',
+    DESKTOP: 'DESKTOP',
+    LARGE_DESKTOP: 'LARGE_DESKTOP'
+};
+exports.defaultBreakpoints = {
+    MOBILE: 576,
+    TABLET: 768,
+    DESKTOP: 992,
+    LARGE_DESKTOP: 1200
+};

package/dist/cjs/i18n/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/i18n/index.tsx"],"names":[],"mappings":"AAKA,eAAO,MAAM,IAAI;;;CAOf,CAAC"}

package/dist/cjs/i18n/index.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.i18n = void 0;
+const akilocale_1 = require("@akinon/akilocale");
+const en_1 = require("./translations/en");
+const tr_1 = require("./translations/tr");
+exports.i18n = akilocale_1.Akilocale.createInstance({
+    debug: true,
+    fallbackLng: 'en',
+    translations: {
+        en: en_1.default,
+        tr: tr_1.default
+    }
+});

package/dist/cjs/i18n/translations/en.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"en.d.ts","sourceRoot":"","sources":["../../../../src/i18n/translations/en.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,MAAM;;CAEF,CAAC;AAEX,eAAe,MAAM,CAAC"}

package/dist/cjs/i18n/translations/en.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const filter = {
+    title: 'Filters'
+};
+exports.default = filter;

package/dist/cjs/i18n/translations/tr.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tr.d.ts","sourceRoot":"","sources":["../../../../src/i18n/translations/tr.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,MAAM;;CAEF,CAAC;AAEX,eAAe,MAAM,CAAC"}

package/dist/cjs/i18n/translations/tr.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const filter = {
+    title: 'Filtreler'
+};
+exports.default = filter;

package/dist/cjs/index.css

@@ -0,0 +1,67 @@
+.akinon-filter {
+  background-color: var(--color-ebonyClay-400);
+  padding: 1.25rem 1.5rem 1.5rem;
+  border-radius: 10px;
+}
+
+.akinon-filter .akinon-filter__title {
+  margin: 0;
+  font-weight: 500 !important;
+}
+
+.akinon-filter .akinon-filter__top {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1rem;
+}
+
+.akinon-filter .akinon-filter__header {
+  color: var(--color-gray-500);
+  margin: 1.25rem 0 0.5rem !important;
+}
+
+/* Overriding this here is questionable? */
+.akinon-filter .akinon-form {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr 1fr;
+  gap: 0.5rem 0.75rem;
+}
+
+.akinon-filter .akinon-checkbox-wrapper {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 3px 10px;
+  font-size: 14px;
+  list-style: none;
+  position: relative;
+  width: 100%;
+  min-width: 0;
+  background-color: #2b344c;
+  background-image: none;
+  border-width: 2px;
+  border-style: solid;
+  border-color: #262e47;
+  border-radius: 6px;
+  span {
+    color: var(--color-gray-500) !important;
+  }
+}
+
+.akinon-filter .akinon-picker {
+  background-color: var(--color-ebonyClay-475);
+}
+
+.akinon-filter .akinon-picker,
+.akinon-filter .akinon-input-number,
+[class^='antd-item'] {
+  width: 100%;
+}
+
+.akinon-filter .akinon-form-item-control-input-content > * {
+  align-items: center;
+}
+
+.akinon-filter .shown-filters * {
+  font-weight: 700 !important;
+}

package/dist/{index.d.ts → cjs/index.d.ts}

@@ -1,3 +1,4 @@
+import './index.css';
 import type { FormField } from '@akinon/akiform-builder';
 import React from 'react';
 import type { FilterState } from './components/FilterContext';

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAC;AAErB,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAWzD,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAY9D,MAAM,MAAM,WAAW,GAAG;IAExB,YAAY,EAAE,SAAS,EAAE,CAAC;IAG1B,iBAAiB,EAAE;QACjB,WAAW,CAAC,gBAAgB,CAAC;QAC7B,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,gBAAgB,CAAC,CAAC,CAAC;KACpE,CAAC;IAEF,wBAAwB,CAAC,EAAE,SAAS,EAAE,CAAC;IAEvC,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF,eAAO,MAAM,SAAS,kFAKnB,WAAW,sBAqBb,CAAC"}

package/dist/cjs/index.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Akifilter = void 0;
+require("./index.css");
+const ui_typography_1 = require("@akinon/ui-typography");
+const dayjs_1 = require("dayjs");
+const advancedFormat_1 = require("dayjs/plugin/advancedFormat");
+const customParseFormat_1 = require("dayjs/plugin/customParseFormat");
+const localeData_1 = require("dayjs/plugin/localeData");
+const weekday_1 = require("dayjs/plugin/weekday");
+const weekOfYear_1 = require("dayjs/plugin/weekOfYear");
+const weekYear_1 = require("dayjs/plugin/weekYear");
+const react_1 = require("react");
+const components_1 = require("./components");
+const i18n_1 = require("./i18n");
+// TODO: Whats this dayjs block doing here?
+// extend dayjs with plugins so datepicker value can be set outside
+dayjs_1.default.extend(customParseFormat_1.default);
+dayjs_1.default.extend(advancedFormat_1.default);
+dayjs_1.default.extend(weekday_1.default);
+dayjs_1.default.extend(localeData_1.default);
+dayjs_1.default.extend(weekOfYear_1.default);
+dayjs_1.default.extend(weekYear_1.default);
+const Akifilter = ({ filterSchema, useAppliedFilters, customMainPath, conditionalFiltersSchema }) => {
+    return (react_1.default.createElement("div", { className: "akinon-filter" },
+        react_1.default.createElement(components_1.FilterContextProvider, { filterSchema: filterSchema, customMainPath: customMainPath, useAppliedFilters: useAppliedFilters, conditionalFiltersSchema: conditionalFiltersSchema },
+            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('title')),
+                react_1.default.createElement(components_1.SelectShownFilters, null)),
+            react_1.default.createElement(components_1.AppliedFilters, null),
+            react_1.default.createElement(components_1.ShownFilters, null),
+            react_1.default.createElement(components_1.ConditionalFilters, null))));
+};
+exports.Akifilter = Akifilter;

package/dist/cjs/utils/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utils/index.tsx"],"names":[],"mappings":"AAEA,UAAU,QAAQ;IAChB,KAAK,EAAE,GAAG,CAAC;IACX,QAAQ,CAAC,EAAE,QAAQ,EAAE,CAAC;CACvB;AAED,UAAU,MAAM;IACd,IAAI,EAAE,QAAQ,EAAE,CAAC;IACjB,SAAS,EAAE,GAAG,CAAC;CAChB;AAED,wBAAgB,kBAAkB,CAAC,EACjC,IAAI,EACJ,SAAS,EACV,EAAE,MAAM,GAAG,QAAQ,GAAG,IAAI,CAiB1B;AAED;;;;;;GAMG;AACH,eAAO,MAAM,gBAAgB,SAAU,GAAG;;;;;;CAUzC,CAAC"}

package/dist/cjs/utils/index.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getPathFragments = exports.getTreeNodeByValue = void 0;
+const lodash_1 = require("lodash");
+function getTreeNodeByValue({ tree, nodeValue }) {
+    if ((0, lodash_1.isEmpty)(tree) || (0, lodash_1.isEmpty)(nodeValue)) {
+        return null;
+    }
+    for (const node of tree) {
+        if (node.value === nodeValue) {
+            return node;
+        }
+        if (node.children) {
+            const childNode = getTreeNodeByValue({ tree: node.children, nodeValue });
+            if (childNode) {
+                return childNode;
+            }
+        }
+    }
+    return null;
+}
+exports.getTreeNodeByValue = getTreeNodeByValue;
+/**
+ * To understand this fragmentation, you need to know that the path is built as follows:
+ *
+ * `appPath = /{appLanguage}/{apiLanguage}/{rootPath}/{subPath}`
+ *
+ * `mainPath = rootPath + subPath`
+ */
+const getPathFragments = (path) => {
+    const pathSlices = path.split('/');
+    return {
+        appLanguage: pathSlices[1],
+        apiLanguage: pathSlices[2],
+        rootPath: `/${pathSlices[3]}`,
+        subPath: `/${pathSlices.slice(4).join('/')}`,
+        mainPath: `/${pathSlices.slice(3).join('/')}`
+    };
+};
+exports.getPathFragments = getPathFragments;

package/dist/esm/components/AppliedFilters/AppliedFilterItem.d.ts

@@ -0,0 +1,12 @@
+import './styles.css';
+import React from 'react';
+import type { FilterState } from '../FilterContext';
+type AppliedFilterItemProps = {
+    filterKeyValue: [
+        string,
+        (FilterState['appliedFilters'][string] | FilterState['appliedFilters'][string][])
+    ];
+};
+export declare const AppliedFilterItem: ({ filterKeyValue }: AppliedFilterItemProps) => React.JSX.Element | null;
+export {};
+//# sourceMappingURL=AppliedFilterItem.d.ts.map

package/dist/esm/components/AppliedFilters/AppliedFilterItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppliedFilterItem.d.ts","sourceRoot":"","sources":["../../../../src/components/AppliedFilters/AppliedFilterItem.tsx"],"names":[],"mappings":"AAAA,OAAO,cAAc,CAAC;AAKtB,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAMpD,KAAK,sBAAsB,GAAG;IAC5B,cAAc,EAAE;QACd,MAAM;QACN,CACI,WAAW,CAAC,gBAAgB,CAAC,CAAC,MAAM,CAAC,GACrC,WAAW,CAAC,gBAAgB,CAAC,CAAC,MAAM,CAAC,EAAE,CAC1C;KACF,CAAC;CACH,CAAC;AAEF,eAAO,MAAM,iBAAiB,uBAE3B,sBAAsB,6BA8FxB,CAAC"}

package/dist/esm/components/AppliedFilters/AppliedFilterItem.js

@@ -0,0 +1,49 @@
+import './styles.css';
+import { Icon } from '@akinon/icons';
+import { Space } from '@akinon/ui-space';
+import { Text } from '@akinon/ui-typography';
+import React from 'react';
+import { useFilterContext } from '../FilterContext';
+import { isArray, isBoolean } from 'lodash';
+export const AppliedFilterItem = ({ filterKeyValue }) => {
+    const [filterKey, filterValue] = filterKeyValue;
+    const { state: { applicableFilters, appliedFilters }, dispatch, conditionalFiltersSchema } = useFilterContext();
+    // find filterItem for placeholder, etc from filterKey
+    const filterItem = [
+        ...applicableFilters,
+        ...(conditionalFiltersSchema || [])
+    ].find(i => i.key === filterKey);
+    if (!filterItem) {
+        console.warn(`filterItem with key ${filterKey} not found`);
+        return null;
+    }
+    // TODO getModifiedFilterValue doesn't need filterValue. It can obtain it from filterItem
+    // TODO explain why you need to modify the filter value
+    // const modifiedFilterValue = getModifiedFilterValue({
+    //   filterItem,
+    //   filterValue
+    // });
+    // const shouldShowActiveFilter =
+    //   !isEmpty(filterItem) && !isEmpty(modifiedFilterValue);
+    const handleRemoveFilter = (removedFilterKey) => {
+        // TODO write test for below comment
+        // you should mark the key as undefined instead of deleting it for antd form item to pick up the change
+        const newFilters = Object.assign(Object.assign({}, appliedFilters), { [removedFilterKey]: undefined });
+        dispatch({
+            type: 'SET_APPLIED_FILTERS',
+            payload: { appliedFilters: newFilters }
+        });
+    };
+    const inputField = filterItem;
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Space, { key: filterKey, align: "center", className: "active-filter-item" },
+            React.createElement(Text, { className: "active-filter-item__label" }, inputField === null || inputField === void 0 ? void 0 :
+                inputField.placeholder,
+                ":"),
+            React.createElement(Text, { className: "active-filter-item__value" }, isBoolean(filterValue)
+                ? filterValue.toString()
+                : isArray(filterValue)
+                    ? filterValue.join(', ')
+                    : filterValue),
+            React.createElement(Icon, { icon: "close", size: 20, className: "active-filter-item__remove-filter-icon", onClick: () => handleRemoveFilter(filterKey) }))));
+};

package/dist/esm/components/AppliedFilters/common.d.ts

@@ -0,0 +1,6 @@
+export declare const isFileObject: (value: any) => boolean;
+export declare const getModifiedFilterValue: ({ filterItem, filterValue }: {
+    filterItem: any;
+    filterValue: any['value'];
+}) => any;
+//# sourceMappingURL=common.d.ts.map

package/dist/esm/components/AppliedFilters/common.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../../../src/components/AppliedFilters/common.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,YAAY,UAAW,GAAG,YAAuC,CAAC;AAE/E,eAAO,MAAM,sBAAsB;gBAIrB,GAAG;iBACF,GAAG,CAAC,OAAO,CAAC;SA+B1B,CAAC"}

package/dist/esm/components/AppliedFilters/common.js

@@ -0,0 +1,28 @@
+import { TreeSelect } from '@akinon/ui-tree-select';
+import { overallDateFormat } from '../../constants';
+import { getTreeNodeByValue } from '../../utils';
+export const isFileObject = (value) => (value === null || value === void 0 ? void 0 : value.originFileObj) !== undefined;
+export const getModifiedFilterValue = ({ filterItem, filterValue }) => {
+    var _a, _b, _c;
+    switch (filterItem === null || filterItem === void 0 ? void 0 : filterItem.widget) {
+        case 'select':
+            if (((_a = filterItem === null || filterItem === void 0 ? void 0 : filterItem.widgetProps) === null || _a === void 0 ? void 0 : _a.mode) === 'multiple') {
+                return filterValue === null || filterValue === void 0 ? void 0 : filterValue.map((value) => {
+                    const optionObject = filterItem.options.find((option) => option.value === value);
+                    return (optionObject === null || optionObject === void 0 ? void 0 : optionObject.label) || value;
+                }).join(', ');
+            }
+            const optionObject = filterItem.options.find((option) => option.value === filterValue);
+            return (optionObject === null || optionObject === void 0 ? void 0 : optionObject.label) || filterValue;
+        case 'date-picker':
+            return filterValue === null || filterValue === void 0 ? void 0 : filterValue.format(overallDateFormat);
+        case 'checkbox-group':
+            return filterValue === null || filterValue === void 0 ? void 0 : filterValue.map(() => 'Yes').join(', ');
+        case TreeSelect:
+            const tree = (_b = filterItem === null || filterItem === void 0 ? void 0 : filterItem.widgetProps) === null || _b === void 0 ? void 0 : _b.treeData;
+            const label = (_c = getTreeNodeByValue({ tree, nodeValue: filterValue })) === null || _c === void 0 ? void 0 : _c.value;
+            return label || filterValue;
+        default:
+            return filterValue;
+    }
+};

package/dist/esm/components/AppliedFilters/index.d.ts

@@ -0,0 +1,4 @@
+import './styles.css';
+import React from 'react';
+export declare const AppliedFilters: () => React.JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/components/AppliedFilters/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/AppliedFilters/index.tsx"],"names":[],"mappings":"AAAA,OAAO,cAAc,CAAC;AAMtB,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,eAAO,MAAM,cAAc,yBAyC1B,CAAC"}

package/dist/esm/components/AppliedFilters/index.js

@@ -0,0 +1,22 @@
+import './styles.css';
+import { Icon } from '@akinon/icons';
+import { Col, Row } from '@akinon/ui-layout';
+import { Space } from '@akinon/ui-space';
+import { Text } from '@akinon/ui-typography';
+import React from 'react';
+import { useFilterContext } from '../FilterContext';
+import { AppliedFilterItem } from './AppliedFilterItem';
+export const AppliedFilters = () => {
+    var _a;
+    const { state: { appliedFilters }, dispatch } = useFilterContext();
+    const handleOnResetFilters = () => {
+        dispatch({ type: 'SET_APPLIED_FILTERS', payload: { appliedFilters: {} } });
+    };
+    return (React.createElement(Row, { align: "middle", className: "applied_filters" },
+        React.createElement(Col, { className: "applied_filters__list" },
+            React.createElement(Space, null,
+                React.createElement(Text, { className: "applied_filters__label" }, "Active filters:"),
+                React.createElement(Space, { className: "applied_filters__items", "data-testid": "appliedFilters" }, (_a = Object.entries(appliedFilters)) === null || _a === void 0 ? void 0 : _a.map(([filterKey, filterValue], i) => filterValue !== undefined && (React.createElement(AppliedFilterItem, { filterKeyValue: [filterKey, filterValue], key: i })))))),
+        React.createElement(Col, { className: "applied_filters__clear-filters" },
+            React.createElement(Icon, { icon: "bin", size: 35, className: "applied_filters__reset-filters-icon", onClick: handleOnResetFilters }))));
+};

package/dist/esm/components/AppliedFilters/styles.css

@@ -0,0 +1,65 @@
+.akinon-filter .applied_filters {
+  padding: 5px 6px;
+  background-color: #2b344c;
+  border-radius: 5px;
+}
+
+.applied_filters .applied_filters__list {
+  flex: 1;
+  background-color: #1e1e2d;
+  padding: 6px 16px;
+  border-radius: 3px;
+}
+
+.applied_filters .applied_filters__label.akinon-typography {
+  color: white;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.applied_filters .applied_filters__reset-filters-icon {
+  cursor: pointer;
+  color: white;
+  font-size: 20px;
+  padding: 6px;
+  margin: 6px;
+}
+
+.applied_filters .applied_filters__items {
+  flex-wrap: wrap;
+}
+
+.akinon-filter .active-filter-item {
+  font-size: 14px;
+  background-color: white;
+  padding: 1px 4px;
+  border-radius: 3px;
+  line-height: 1rem;
+}
+
+.active-filter-item .akinon-space-item {
+  display: flex;
+  justify-content: center;
+}
+
+.active-filter-item .active-filter-item__label.akinon-typography,
+.active-filter-item .active-filter-item__value.akinon-typography {
+  color: #4a4a4a;
+}
+
+.active-filter-item .active-filter-item__label.akinon-typography {
+  font-weight: 600;
+}
+
+.active-filter-item .active-filter-item__value.akinon-typography {
+  font-weight: 500;
+}
+
+.active-filter-item .active-filter-item__remove-filter-icon {
+  cursor: pointer;
+  background-color: #4482ff;
+  color: white;
+  font-size: 5px;
+  padding: 5px;
+  border-radius: 99px;
+}

package/dist/esm/components/ConditionalFilters/index.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare const ConditionalFilters: () => React.JSX.Element | null;
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/components/ConditionalFilters/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ConditionalFilters/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,eAAO,MAAM,kBAAkB,gCAyC9B,CAAC"}

package/dist/esm/components/ConditionalFilters/index.js

@@ -0,0 +1,28 @@
+import { FormBuilderWatch } from '@akinon/akiform-builder';
+import { Paragraph } from '@akinon/ui-typography';
+import React from 'react';
+import { useFilterContext } from '../FilterContext';
+export const ConditionalFilters = () => {
+    const { dispatch, state, conditionalFiltersSchema } = useFilterContext();
+    const { appliedFilters } = state;
+    const [formResetCount, setFormResetCount] = React.useState(0);
+    // reset form state when conditionalFiltersSchema changes
+    React.useEffect(() => {
+        setFormResetCount(formResetCount + 1);
+    }, [conditionalFiltersSchema]);
+    // second form created just to reset antd form state when conditionalFiltersSchema changes.
+    const handleFormChange = (allValues) => {
+        dispatch({
+            type: 'SET_APPLIED_FILTERS',
+            payload: {
+                appliedFilters: Object.assign(Object.assign({}, appliedFilters), allValues)
+            }
+        });
+    };
+    if (!conditionalFiltersSchema)
+        return null;
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Paragraph, { className: "akinon-filter__header" }, "COMMON PARAMETER FILTERS"),
+        React.createElement("div", null,
+            React.createElement(FormBuilderWatch, { builderFields: conditionalFiltersSchema, handleChange: handleFormChange, key: formResetCount, isDebounced: true }))));
+};

package/dist/esm/components/FilterContext/index.d.ts

@@ -0,0 +1,45 @@
+import { FormField } from '@akinon/akiform-builder';
+import React, { Dispatch } from 'react';
+import type { FilterProps } from '../..';
+export type FilterState = {
+    mainPath: string;
+    appliedFilters: {
+        [key: string]: string | number | boolean | undefined;
+    };
+    applicableFilters: FormField[];
+    shownFilters: string[];
+    recreateShownFiltersCount: number;
+};
+export type FilterAction = {
+    type: 'SET_APPLIED_FILTERS';
+    payload: {
+        appliedFilters: FilterState['appliedFilters'];
+    };
+} | {
+    type: 'SET_APPLICABLE_FILTERS';
+    payload: {
+        applicableFilters: FilterState['applicableFilters'];
+    };
+} | {
+    type: 'SET_SHOWN_FILTERS';
+    payload: {
+        shownFilters: FilterState['shownFilters'];
+    };
+};
+export type FilterContext = {
+    state: FilterState;
+    dispatch: Dispatch<FilterAction>;
+    conditionalFiltersSchema: FilterProps['conditionalFiltersSchema'];
+};
+type FilterContextProviderProps = FilterProps & {
+    children: React.ReactNode;
+};
+/**
+ * FilterContextProvider manages both filter context and antd form state.
+ * Reason for not separating antd form state from filter context is that antd
+ * form state is tightly coupled with filter context state.
+ */
+export declare const FilterContextProvider: ({ children, filterSchema, customMainPath, useAppliedFilters, conditionalFiltersSchema }: FilterContextProviderProps) => React.JSX.Element;
+export declare function useFilterContext(): FilterContext;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/components/FilterContext/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/FilterContext/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACpD,OAAO,KAAK,EAAE,EAAiB,QAAQ,EAAyB,MAAM,OAAO,CAAC;AAI9E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAGzC,MAAM,MAAM,WAAW,GAAG;IAExB,QAAQ,EAAE,MAAM,CAAC;IAEjB,cAAc,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,CAAA;KAAE,CAAC;IAEzE,iBAAiB,EAAE,SAAS,EAAE,CAAC;IAE/B,YAAY,EAAE,MAAM,EAAE,CAAC;IAEvB,yBAAyB,EAAE,MAAM,CAAC;CACnC,CAAC;AAQF,MAAM,MAAM,YAAY,GACpB;IACE,IAAI,EAAE,qBAAqB,CAAC;IAC5B,OAAO,EAAE;QAAE,cAAc,EAAE,WAAW,CAAC,gBAAgB,CAAC,CAAA;KAAE,CAAC;CAC5D,GACD;IACE,IAAI,EAAE,wBAAwB,CAAC;IAC/B,OAAO,EAAE;QAAE,iBAAiB,EAAE,WAAW,CAAC,mBAAmB,CAAC,CAAA;KAAE,CAAC;CAClE,GACD;IACE,IAAI,EAAE,mBAAmB,CAAC;IAC1B,OAAO,EAAE;QAAE,YAAY,EAAE,WAAW,CAAC,cAAc,CAAC,CAAA;KAAE,CAAC;CACxD,CAAC;AAEN,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,EAAE,WAAW,CAAC;IACnB,QAAQ,EAAE,QAAQ,CAAC,YAAY,CAAC,CAAC;IACjC,wBAAwB,EAAE,WAAW,CAAC,0BAA0B,CAAC,CAAC;CACnE,CAAC;AAEF,KAAK,0BAA0B,GAAG,WAAW,GAAG;IAC9C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAIF;;;;GAIG;AACH,eAAO,MAAM,qBAAqB,4FAM/B,0BAA0B,sBA2F5B,CAAC;AAEF,wBAAgB,gBAAgB,kBAM/B"}

package/dist/esm/components/FilterContext/index.js

@@ -0,0 +1,80 @@
+import React, { createContext, useContext, useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
+import { useImmerReducer } from 'use-immer';
+import { getPathFragments } from '../../utils';
+const FilterContext = createContext(undefined);
+/**
+ * FilterContextProvider manages both filter context and antd form state.
+ * Reason for not separating antd form state from filter context is that antd
+ * form state is tightly coupled with filter context state.
+ */
+export const FilterContextProvider = ({ children, filterSchema, customMainPath, useAppliedFilters, conditionalFiltersSchema }) => {
+    const { pathname } = useLocation();
+    const mainPath = customMainPath
+        ? customMainPath
+        : getPathFragments(pathname).mainPath;
+    if (!mainPath) {
+        throw new Error('mainPath is not defined');
+    }
+    // load appliedFilters from local storage
+    const localAppliedFilters = JSON.parse(localStorage.getItem(`appliedFilters-${mainPath}`) || '{}');
+    // get applied filters from parent component
+    const parentAppliedFilters = useAppliedFilters[0];
+    // load shownFilters from local storage
+    const localShownFilters = JSON.parse(localStorage.getItem(`shownFilters-${mainPath}`) || '[]');
+    const initialState = {
+        mainPath,
+        // if parentAppliedFilters is not empty, use it. Otherwise, use localAppliedFilters. don't merge them to prevent conflicts since you want parent to have the control
+        appliedFilters: Object.keys(parentAppliedFilters).length > 0
+            ? parentAppliedFilters
+            : localAppliedFilters,
+        applicableFilters: filterSchema,
+        // if localShownFilters is not defined, only show first 8 filters
+        shownFilters: localShownFilters.length
+            ? localShownFilters
+            : filterSchema.map(filter => filter.key).slice(0, 8),
+        recreateShownFiltersCount: 0
+    };
+    const [state, dispatch] = useImmerReducer((draft, action) => {
+        switch (action.type) {
+            case 'SET_APPLIED_FILTERS':
+                // console.log('SET_APPLIED_FILTERS', action.payload.appliedFilters);
+                draft.appliedFilters = action.payload.appliedFilters;
+                return;
+            case 'SET_APPLICABLE_FILTERS':
+                // console.log('SET_APPLICABLE_FILTERS');
+                draft.applicableFilters = action.payload.applicableFilters;
+                return;
+            case 'SET_SHOWN_FILTERS':
+                // console.log('SET_SHOWN_FILTERS', action.payload.shownFilters);
+                draft.shownFilters = action.payload.shownFilters;
+                draft.recreateShownFiltersCount = draft.recreateShownFiltersCount + 1;
+                return;
+        }
+    }, initialState);
+    useEffect(() => {
+        // send applied filters to parent component
+        useAppliedFilters[1](state.appliedFilters);
+        // save current appliedFilters to local storage to persist them
+        localStorage.setItem(`appliedFilters-${mainPath}`, JSON.stringify(state.appliedFilters));
+    }, [state.appliedFilters]);
+    // save current shownFilters to local storage to persist them
+    useEffect(() => {
+        localStorage.setItem(`shownFilters-${mainPath}`, JSON.stringify(state.shownFilters));
+    }, [state.shownFilters]);
+    useEffect(() => {
+        dispatch({
+            type: 'SET_APPLICABLE_FILTERS',
+            payload: { applicableFilters: filterSchema }
+        });
+    }, [filterSchema]);
+    // console.log('form state', state);
+    return (React.createElement(FilterContext.Provider, { value: { state, dispatch, conditionalFiltersSchema } }, children));
+};
+export function useFilterContext() {
+    const context = useContext(FilterContext);
+    if (context === undefined) {
+        throw new Error('useFilterContext must be used within a FilterProvider');
+    }
+    return context;
+}

package/dist/esm/components/SelectShownFilters/index.d.ts

@@ -0,0 +1,7 @@
+import './styles.css';
+import React from 'react';
+/**
+ * Via this component, user can select which filters to show in the UI from applicableFilters.
+ */
+export declare const SelectShownFilters: () => React.JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/components/SelectShownFilters/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/SelectShownFilters/index.tsx"],"names":[],"mappings":"AAAA,OAAO,cAAc,CAAC;AActB,OAAO,KAAmB,MAAM,OAAO,CAAC;AAWxC;;GAEG;AACH,eAAO,MAAM,kBAAkB,yBA+J9B,CAAC"}