@pushwoosh/smart-components-kit 1.0.53 → 1.0.55

package/Table/components/DataTable/DataTable.js

@@ -13,11 +13,14 @@ export function DataTable(props) {
   const {
     columns,
     width,
+    bgColor,
     isBordered = true,
     paginationPadding,
     context,
+    allLimits,
     renderTableTop,
     renderAfter,
+    onClearRequest,
     hidePagination,
     hidePageSizeSelector
   } = props;
@@ -26,16 +29,27 @@ export function DataTable(props) {
     params
   } = context;
   const isFiltered = ((_data$value = data.value) === null || _data$value === void 0 ? void 0 : _data$value.isFiltered) || params.search;
+  const onClearRequestDefault = () => {
+    const keys = ['perPage', 'order', 'direction'];
+    context.onChangeParams(keys.reduce((acc, key) => ({
+      ...acc,
+      [key]: context.params[key]
+    }), {
+      page: 1,
+      search: ''
+    }));
+  };
   return React.createElement(DataTableContext.Provider, {
     value: context
   }, React.createElement(Table, {
     columns: columns,
     width: width,
-    isBordered: isBordered
+    isBordered: isBordered,
+    "$bgColor": bgColor
   }, renderTableTop === null || renderTableTop === void 0 ? void 0 : renderTableTop(context), 'renderHead' in props && props.renderHead(), 'renderList' in props ? props.renderList(context) : React.createElement(DataTableList, {
     renderItem: props.renderItem
   }), !hidePagination && React.createElement(DataTablePagination, {
-    allLimits: [10, 20, 50, 100],
+    allLimits: allLimits ?? [10, 20, 50, 100],
     padding: paginationPadding,
     hidePageSizeSelector: hidePageSizeSelector
   }, data.loading && React.createElement(Horizontal, {
@@ -58,23 +72,14 @@ export function DataTable(props) {
     "$gap": 4
   }, "Result:", React.createElement(LockedText, null, `${(_data$value3 = data.value) === null || _data$value3 === void 0 ? void 0 : _data$value3.total} item${(((_data$value4 = data.value) === null || _data$value4 === void 0 ? void 0 : _data$value4.total) ?? 0) > 1 ? 's' : ''}`)), !data.loading && !data.error && (((_data$value5 = data.value) === null || _data$value5 === void 0 ? void 0 : _data$value5.total) ?? 0) === 0 && !isFiltered && React.createElement(Horizontal, {
     "$placeItems": "center"
-  }, React.createElement(LockedText, null, "No items yet")), !data.loading && (((_data$value6 = data.value) === null || _data$value6 === void 0 || (_data$value6 = _data$value6.items) === null || _data$value6 === void 0 ? void 0 : _data$value6.length) ?? 0) === 0 && isFiltered && React.createElement(Horizontal, {
+  }, React.createElement(LockedText, null, "No items yet")), !data.loading && isFiltered && React.createElement(Horizontal, {
     "$gap": 16
-  }, !data.error && React.createElement(Horizontal, {
+  }, !data.error && (((_data$value6 = data.value) === null || _data$value6 === void 0 || (_data$value6 = _data$value6.items) === null || _data$value6 === void 0 ? void 0 : _data$value6.length) ?? 0) === 0 && React.createElement(Horizontal, {
     "$placeItems": "center",
     "$gap": 4
   }, "Result:", React.createElement(LockedText, null, "No match found")), React.createElement(Button, {
     color: "primary",
     view: "ghost",
-    onClick: () => {
-      const keys = ['perPage', 'order', 'direction'];
-      context.onChangeParams(keys.reduce((acc, key) => ({
-        ...acc,
-        [key]: context.params[key]
-      }), {
-        page: 1,
-        search: ''
-      }));
-    }
+    onClick: onClearRequest ?? onClearRequestDefault
   }, "Clear request")))), renderAfter === null || renderAfter === void 0 ? void 0 : renderAfter(context));
 }

package/Table/components/DataTable/types.d.ts

@@ -4,25 +4,31 @@ export type DataTableListProps<I, P extends DataTableParams> = {
     columns: string;
     width?: string | number;
     isBordered?: boolean;
+    bgColor?: string;
     context: DataTableContextType<I, P>;
     hidePagination?: boolean;
     hidePageSizeSelector?: boolean;
     paginationPadding?: string;
+    allLimits?: number[];
     renderTableTop?: (ctxValue: DataTableContextType<I, P>) => ReactNode;
     renderList: (ctxValue: DataTableContextType<I, P>) => ReactNode;
     renderAfter?: (ctxValue: DataTableContextType<I, P>) => ReactNode;
+    onClearRequest?: () => void;
 };
 export type DataTableItemProps<I, P extends DataTableParams> = {
     columns: string;
     width?: string | number;
     isBordered?: boolean;
+    bgColor?: string;
     context: DataTableContextType<I, P>;
     hidePagination?: boolean;
     hidePageSizeSelector?: boolean;
     paginationPadding?: string;
+    allLimits?: number[];
     renderTableTop?: (ctxValue: DataTableContextType<I, P>) => ReactNode;
     renderHead: () => ReactNode;
     renderItem: (item: I) => ReactNode;
     renderAfter?: (ctxValue: DataTableContextType<I, P>) => ReactNode;
+    onClearRequest?: () => void;
 };
 export type DataTableProps<I, P extends DataTableParams> = DataTableListProps<I, P> | DataTableItemProps<I, P>;

package/Table/hooks/useDataTableGetParams.js

@@ -39,7 +39,7 @@ export function useDataTableGetParams({
     const searchParams = new URLSearchParams(locationSearch);
     const paramsWithPrefix = mapKeys(params, key => `${prefix}${key}`);
     for (const [key, value] of Object.entries(paramsWithPrefix)) {
-      if (value === undefined || value === null || value === '') {
+      if (value === undefined || value === null || value === '' || Array.isArray(value) && value.length === 0) {
         searchParams.delete(key);
       } else {
         searchParams.set(key, String(value));

package/Table/styles.d.ts

@@ -3,6 +3,7 @@ export type TableProps = {
     columns: string;
     width?: string | number;
     isBordered?: boolean;
+    $bgColor?: string;
 };
 export declare const Table: import("styled-components").StyledComponent<"div", any, {
     $alignContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;

package/Table/styles.js

@@ -8,7 +8,9 @@ export const Table = styled(Vertical).withConfig({
   columns
 }) => columns, ({
   isBordered
-}) => isBordered ? `1px solid ${Color.DIVIDER}` : 'none', ShapeRadius.SECTION, Color.CLEAR, ({
+}) => isBordered ? `1px solid ${Color.DIVIDER}` : 'none', ShapeRadius.SECTION, ({
+  $bgColor
+}) => $bgColor ?? Color.CLEAR, ({
   width
 }) => width ? `width: ${toCssValue(width)};` : '', Color.DIVIDER);
 export const Td = styled(GridContainer).attrs({

package/context/UniversalKeyValueStore.d.ts

@@ -0,0 +1,32 @@
+export type ChangeType = 'init' | 'set' | 'remove';
+export interface KeyValueChange<K extends IDBValidKey = IDBValidKey, V = unknown> {
+    key: K;
+    value: V | undefined;
+    inMemory: boolean;
+    type: ChangeType;
+}
+export interface UniversalKeyValueStoreOptions<K extends IDBValidKey = IDBValidKey> {
+    memoryKeys?: K[];
+}
+export declare class UniversalKeyValueStore<K extends IDBValidKey = IDBValidKey, V = unknown> {
+    private readonly store;
+    private readonly memoryKeySet;
+    private readonly memory;
+    private readonly emitter;
+    private constructor();
+    static initialize<K extends IDBValidKey = IDBValidKey, V = unknown>(dbName: string, tableName: string, options: UniversalKeyValueStoreOptions<K>): Promise<UniversalKeyValueStore<K, V>>;
+    private init;
+    static makeEventName(key: IDBValidKey): string;
+    private toStorageKey;
+    private isMemoryKey;
+    private emitEvent;
+    get(key: K): Promise<V | undefined>;
+    getMemory(key: K): V | undefined;
+    set(key: K, value: V): Promise<void>;
+    remove(key: K): Promise<void>;
+    getAll(): Promise<Record<string, V>>;
+    getAllMemory(): Record<string, V>;
+    subscribe(key: K, listener: (change: KeyValueChange<K, V>) => void, options?: {
+        callImmediately?: boolean;
+    }): () => void;
+}

package/context/UniversalKeyValueStore.js

@@ -0,0 +1,140 @@
+import { createStore, get as idbGet, set as idbSet, del as idbDel, entries as idbEntries } from 'idb-keyval';
+import { SimpleEventEmitter } from './SimpleEventEmitter';
+export class UniversalKeyValueStore {
+  store;
+  memoryKeySet;
+  memory;
+  emitter;
+  constructor(dbName, tableName, options) {
+    const {
+      memoryKeys = []
+    } = options;
+    this.store = createStore(dbName, tableName);
+    this.memoryKeySet = new Set(memoryKeys);
+    this.memory = new Map();
+    this.emitter = new SimpleEventEmitter();
+  }
+  static async initialize(dbName, tableName, options) {
+    const instance = new UniversalKeyValueStore(dbName, tableName, options);
+    await instance.init();
+    return instance;
+  }
+  async init() {
+    if (this.memoryKeySet.size > 0) {
+      for (const key of this.memoryKeySet) {
+        try {
+          const value = await idbGet(this.toStorageKey(key), this.store);
+          if (value !== undefined) {
+            this.memory.set(key, value);
+          }
+        } catch (e) {
+          console.error('Failed to init memory key from IndexedDB', {
+            key,
+            error: e
+          });
+        }
+      }
+    }
+  }
+  static makeEventName(key) {
+    return `key:${String(key)}`;
+  }
+  toStorageKey(key) {
+    return key;
+  }
+  isMemoryKey(key) {
+    return this.memoryKeySet.has(key);
+  }
+  emitEvent(eventName, payload) {
+    try {
+      this.emitter.emit(eventName, payload);
+    } catch (e) {
+      console.error('Failed to emit event', {
+        eventName,
+        payload,
+        error: e
+      });
+    }
+  }
+  async get(key) {
+    if (this.isMemoryKey(key) && this.memory.has(key)) {
+      return this.memory.get(key);
+    }
+    const value = await idbGet(this.toStorageKey(key), this.store);
+    if (this.isMemoryKey(key) && value !== undefined) {
+      this.memory.set(key, value);
+    }
+    return value;
+  }
+  getMemory(key) {
+    if (this.isMemoryKey(key)) {
+      return this.memory.get(key);
+    }
+    return undefined;
+  }
+  async set(key, value) {
+    const inMemory = this.isMemoryKey(key);
+    if (inMemory) {
+      this.memory.set(key, value);
+    }
+    const payload = {
+      key,
+      value,
+      inMemory,
+      type: 'set'
+    };
+    this.emitEvent(UniversalKeyValueStore.makeEventName(key), payload);
+    await idbSet(this.toStorageKey(key), value, this.store);
+  }
+  async remove(key) {
+    const inMemory = this.isMemoryKey(key);
+    if (inMemory) {
+      this.memory.delete(key);
+    }
+    const payload = {
+      key,
+      value: undefined,
+      inMemory,
+      type: 'remove'
+    };
+    this.emitEvent(UniversalKeyValueStore.makeEventName(key), payload);
+    await idbDel(this.toStorageKey(key), this.store);
+  }
+  async getAll() {
+    const persistentRaw = await idbEntries(this.store);
+    const persistent = {};
+    for (const [storageKey, value] of Object.entries(persistentRaw)) {
+      persistent[storageKey] = value;
+    }
+    const result = {
+      ...persistent
+    };
+    for (const [key, value] of this.memory.entries()) {
+      result[String(key)] = value;
+    }
+    return result;
+  }
+  getAllMemory() {
+    return Array.from(this.memory.entries()).reduce((acc, [key, value]) => {
+      acc[String(key)] = value;
+      return acc;
+    }, {});
+  }
+  subscribe(key, listener, options) {
+    const eventName = UniversalKeyValueStore.makeEventName(key);
+    const unsubscribe = this.emitter.on(eventName, listener, false);
+    if (options !== null && options !== void 0 && options.callImmediately) {
+      this.get(key).then(value => {
+        if (value !== undefined) {
+          listener({
+            key,
+            value,
+            inMemory: this.isMemoryKey(key),
+            type: 'init'
+          });
+        }
+      });
+    }
+    return unsubscribe;
+  }
+}

package/context/index.d.ts

@@ -1,6 +1,7 @@
 import { SimpleEventEmitter } from './SimpleEventEmitter';
 import type { SPAContextType } from './types';
+import { UniversalKeyValueStore } from './UniversalKeyValueStore';
 import { useSPAContext } from './useSPAContext';
 export type { SPAContextType };
-export { useSPAContext, SimpleEventEmitter };
+export { useSPAContext, SimpleEventEmitter, UniversalKeyValueStore };
 export declare const SPAContextProvider: import("react").Provider<SPAContextType | undefined>;

package/context/index.js

@@ -1,5 +1,6 @@
 import { SPAContext } from './context';
 import { SimpleEventEmitter } from './SimpleEventEmitter';
+import { UniversalKeyValueStore } from './UniversalKeyValueStore';
 import { useSPAContext } from './useSPAContext';
-export { useSPAContext, SimpleEventEmitter };
+export { useSPAContext, SimpleEventEmitter, UniversalKeyValueStore };
 export const SPAContextProvider = SPAContext.Provider;

package/context/types.d.ts

@@ -5,6 +5,7 @@ import type { API as RpcGatewayPaymentAPI } from '@pushwoosh/rpc-gateway-payment
 import type { API as RpcGatewayAPI } from '@pushwoosh/rpc-v2-http-api-data';
 import type { SessionStore } from '@pushwoosh/session-store';
 import type { SimpleEventEmitter } from './SimpleEventEmitter';
+import type { UniversalKeyValueStore } from './UniversalKeyValueStore';
 export type Environment = {
     isPWI: boolean;
     isPushwoosh: boolean;
@@ -32,5 +33,6 @@ export type SPAContextType = {
     };
     readonly eventBus: SimpleEventEmitter;
     readonly environment: Environment;
+    readonly keyValueStorage: UniversalKeyValueStore;
     readonly __smartComponentsCache: Record<string, any>;
 };

package/package.json

@@ -26,6 +26,7 @@
     "@pushwoosh/kit-helpers": "^4.8.1",
     "@pushwoosh/kit-icons": "^2.1.6",
     "@pushwoosh/kit-typography": "^1.7.3",
+    "idb-keyval": "^6.2.2",
     "react-router-dom": "^5.3.4"
   },
   "devDependencies": {
@@ -51,5 +52,5 @@
     "react": "^16.14.0 || ^18.0.0",
     "react-dom": "^16.14.0 || ^18.0.0"
   },
-  "version": "1.0.53"
+  "version": "1.0.55"
 }