@licklist/design 0.68.1-dev.0 → 0.68.1

package/src/table/TableHelperComponent.tsx

@@ -1,36 +1,36 @@
 /* eslint-disable @typescript-eslint/ban-types */
-import { SetStateAction, useEffect, useState } from 'react'
-import { Col, Row, Table } from 'react-bootstrap'
-import { useLocation } from 'react-router-dom'
-import { isEqual } from 'lodash'
-import useQuery from '@licklist/plugins/dist/hooks/Query/useQuery'
-import RouteService from '@licklist/plugins/dist/services/Route/RouteService'
-import TableService from '@licklist/plugins/dist/services/Table/TableService'
-import ILengthAwarePaginator from '@licklist/plugins/dist/types/services/Table/ILengthAwarePaginator'
-import ITableHeader from '@licklist/plugins/dist/types/services/Table/ITableHeader'
-import { ITableProps } from '@licklist/plugins/dist/types/services/Table/ITableProps'
-import { LoaderIndicator } from '../static/loader/LoaderIndicator'
-import { FilterHelperComponent } from './FilterHelperComponent'
-import { PaginationHelperComponent } from './PaginationHelperComponent'
-import { PerPageHelperComponent } from './PerPageHelperComponent'
-import { getFilterOptionsValue } from './utils'
-import { ExtendedTableOptions } from './types'
+import { SetStateAction, useEffect, useState } from "react";
+import { Col, Row, Table } from "react-bootstrap";
+import { useLocation } from "react-router-dom";
+import { isEqual } from "lodash";
+import useQuery from "@licklist/plugins/dist/hooks/Query/useQuery";
+import RouteService from "@licklist/plugins/dist/services/Route/RouteService";
+import TableService from "@licklist/plugins/dist/services/Table/TableService";
+import ILengthAwarePaginator from "@licklist/plugins/dist/types/services/Table/ILengthAwarePaginator";
+import ITableHeader from "@licklist/plugins/dist/types/services/Table/ITableHeader";
+import { ITableProps } from "@licklist/plugins/dist/types/services/Table/ITableProps";
+import { LoaderIndicator } from "../static/loader/LoaderIndicator";
+import { FilterHelperComponent } from "./FilterHelperComponent";
+import { PaginationHelperComponent } from "./PaginationHelperComponent";
+import { PerPageHelperComponent } from "./PerPageHelperComponent";
+import { getFilterOptionsValue } from "./utils";
+import { ExtendedTableOptions } from "./types";
 
 export interface TableHelperComponentProps {
-  headers: ITableHeader[]
-  renderItemFn: Function
-  paginator?: ILengthAwarePaginator<any>
-  onRefreshFn?: Function
-  isLoading?: boolean
-  refreshAt?: number
-  striped?: boolean
-  bordered?: boolean
-  displaySearchBar?: boolean
-  displayPerPageSelect?: boolean
-  displayShowingSection?: boolean
-  externalFilters?: { [key: string]: any }
-  initialOptions?: Partial<ITableProps>
-  filteredOrdersOptions?: (value: SetStateAction<ITableProps>) => void
+  headers: ITableHeader[];
+  renderItemFn: Function;
+  paginator?: ILengthAwarePaginator<any>;
+  onRefreshFn?: Function;
+  isLoading?: boolean;
+  refreshAt?: number;
+  striped?: boolean;
+  bordered?: boolean;
+  displaySearchBar?: boolean;
+  displayPerPageSelect?: boolean;
+  displayShowingSection?: boolean;
+  externalFilters?: { [key: string]: any };
+  initialOptions?: Partial<ITableProps>;
+  filteredOrdersOptions?: (value: SetStateAction<ITableProps>) => void;
 }
 
 // @TODO Refactor? component to get less complexity
@@ -64,36 +64,36 @@ function TableHelperComponent(props: TableHelperComponentProps) {
     externalFilters = {},
     initialOptions = {},
     filteredOrdersOptions,
-  } = props
+  } = props;
 
-  const query = useQuery()
-  const { pathname } = useLocation()
+  const query = useQuery();
+  const { pathname } = useLocation();
 
-  const page = Number(getFilterOptionsValue(query, initialOptions, 'page'))
+  const page = Number(getFilterOptionsValue(query, initialOptions, "page"));
   const perPage = Number(
-    getFilterOptionsValue(query, initialOptions, 'perPage'),
-  )
+    getFilterOptionsValue(query, initialOptions, "perPage"),
+  );
   const sortKey = String(
-    getFilterOptionsValue(query, initialOptions, 'sortKey'),
-  )
+    getFilterOptionsValue(query, initialOptions, "sortKey"),
+  );
   const sortDirection = String(
-    getFilterOptionsValue(query, initialOptions, 'sortDirection'),
-  )
+    getFilterOptionsValue(query, initialOptions, "sortDirection"),
+  );
 
-  const filter = String(getFilterOptionsValue(query, initialOptions, 'filter'))
+  const filter = String(getFilterOptionsValue(query, initialOptions, "filter"));
 
-  const [optionsCache, setOptionsCache] = useState<ExtendedTableOptions>()
+  const [optionsCache, setOptionsCache] = useState<ExtendedTableOptions>();
   const [options, setOptions] = useState<ExtendedTableOptions>({
     page,
     perPage,
     sortKey,
     sortDirection,
     filter,
-  })
-  const [refreshedAt, setRefreshedAt] = useState<number>(0)
+  });
+  const [refreshedAt, setRefreshedAt] = useState<number>(0);
   const [cachedExtFilters, setCachedExtFilters] = useState<{
-    [key: string]: any
-  }>(externalFilters)
+    [key: string]: any;
+  }>(externalFilters);
 
   // Redirect to the URL with a new parameters
   // ONLY: if any option or external filters has changed
@@ -104,13 +104,13 @@ function TableHelperComponent(props: TableHelperComponentProps) {
           isEqual(cachedExtFilters, externalFilters)) ||
         !!filteredOrdersOptions
       )
-        return
+        return;
 
-      setOptionsCache(options)
-      setCachedExtFilters(externalFilters)
+      setOptionsCache(options);
+      setCachedExtFilters(externalFilters);
 
       if (onRefreshFn) {
-        onRefreshFn(options)
+        onRefreshFn(options);
       }
 
       RouteService.redirectTo(
@@ -123,139 +123,139 @@ function TableHelperComponent(props: TableHelperComponentProps) {
             `sortDirection=${escape(options.sortDirection!)}`,
             `filter=${escape(options.filter!)}`,
             new URLSearchParams(externalFilters).toString(),
-          ].join('&'),
-        ].join('?'),
-      )
+          ].join("&"),
+        ].join("?"),
+      );
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [pathname, options, onRefreshFn, filteredOrdersOptions, externalFilters],
-  )
+  );
 
   // Refresh table's content on manual trigger
   useEffect(() => {
     if (refreshedAt === refreshAt || !!filteredOrdersOptions) {
-      return
+      return;
     }
 
-    setRefreshedAt((prevRefreshedAt) => refreshAt ?? prevRefreshedAt)
+    setRefreshedAt((prevRefreshedAt) => refreshAt ?? prevRefreshedAt);
 
     if (onRefreshFn) {
-      onRefreshFn(options)
+      onRefreshFn(options);
     }
-  }, [onRefreshFn, options, refreshAt, filteredOrdersOptions, refreshedAt])
+  }, [onRefreshFn, options, refreshAt, filteredOrdersOptions, refreshedAt]);
 
   const onSort = (key: string) => {
-    let nextDirection = TableService.DEFAULT_SORT_DIRECTION
+    let nextDirection = TableService.DEFAULT_SORT_DIRECTION;
     if (sortKey === key) {
       if (filteredOrdersOptions) {
         filteredOrdersOptions((prevOptions) => {
           nextDirection = TableService.getSortDirection(
             prevOptions.sortDirection,
             nextDirection,
-          )
+          );
 
           return {
             ...prevOptions,
             sortKey: key,
             sortDirection: nextDirection,
-          }
-        })
+          };
+        });
       } else {
         setOptions((prevOptions) => {
           nextDirection = TableService.getSortDirection(
             prevOptions.sortDirection,
             nextDirection,
-          )
+          );
 
           return {
             ...prevOptions,
             sortKey: key,
             sortDirection: nextDirection,
-          }
-        })
+          };
+        });
       }
     } else if (filteredOrdersOptions) {
       filteredOrdersOptions((prevOptions) => ({
         ...prevOptions,
         sortKey: key,
         sortDirection: nextDirection,
-      }))
+      }));
     } else {
       setOptions((prevOptions) => ({
         ...prevOptions,
         sortKey: key,
         sortDirection: nextDirection,
-      }))
+      }));
     }
-  }
+  };
 
   const onPerPageChange = (nextPerPage: number) => {
     if (filteredOrdersOptions) {
       filteredOrdersOptions((prevOptions) => ({
         ...prevOptions,
         page: nextPerPage,
-      }))
-      return
+      }));
+      return;
     }
     setOptions((prevOptions) => ({
       ...prevOptions,
       perPage: nextPerPage,
-    }))
-  }
+    }));
+  };
 
   const onPageChange = (nextPage: number) => {
     if (filteredOrdersOptions) {
       filteredOrdersOptions((prevOptions) => ({
         ...prevOptions,
         page: nextPage,
-      }))
-      return
+      }));
+      return;
     }
     setOptions((prevOptions) => ({
       ...prevOptions,
       page: nextPage,
-    }))
-  }
+    }));
+  };
 
   const onFilterChange = (nextFilter: string) => {
     if (filteredOrdersOptions) {
       filteredOrdersOptions(({ page: prevPage, ...prevOptions }) => {
-        let nextPage = prevPage
+        let nextPage = prevPage;
 
         if (
           (!nextFilter && prevOptions.filter) ||
           (nextFilter && !prevOptions.filter)
         ) {
-          nextPage = 1
+          nextPage = 1;
         }
 
         return {
           ...prevOptions,
           page: nextPage,
           filter: nextFilter,
-        }
-      })
+        };
+      });
     }
     setOptions(({ page: prevPage, ...prevOptions }) => {
-      let nextPage = prevPage
+      let nextPage = prevPage;
 
       if (
         (!nextFilter && prevOptions.filter) ||
         (nextFilter && !prevOptions.filter)
       ) {
-        nextPage = 1
+        nextPage = 1;
       }
 
       return {
         ...prevOptions,
         page: nextPage,
         filter: nextFilter,
-      }
-    })
-  }
+      };
+    });
+  };
 
   const formatHeader = (header: ITableHeader) => {
-    if (typeof header === 'string') {
+    if (typeof header === "string") {
       return (
         <th
           key={header.toLowerCase()}
@@ -267,13 +267,13 @@ function TableHelperComponent(props: TableHelperComponentProps) {
         >
           {header}
         </th>
-      )
+      );
     }
 
-    if (typeof header === 'object') {
+    if (typeof header === "object") {
       const styles = {
-        width: header.width ?? 'auto',
-      }
+        width: header.width ?? "auto",
+      };
 
       return (
         <th
@@ -288,14 +288,14 @@ function TableHelperComponent(props: TableHelperComponentProps) {
         >
           {header.title}
         </th>
-      )
+      );
     }
 
-    return null
-  }
+    return null;
+  };
 
   return (
-    <div className={['table-helper', isLoading ? 'py-5' : 'py-1'].join(' ')}>
+    <div className={["table-helper", isLoading ? "py-5" : "py-1"].join(" ")}>
       <LoaderIndicator isLoaded={!isLoading}>
         <Row>
           <Col>
@@ -312,7 +312,7 @@ function TableHelperComponent(props: TableHelperComponentProps) {
             {displaySearchBar && (
               <FilterHelperComponent
                 onClickFn={onFilterChange}
-                defaultValue={options.filter ?? ''}
+                defaultValue={options.filter ?? ""}
               />
             )}
           </Col>
@@ -348,7 +348,7 @@ function TableHelperComponent(props: TableHelperComponentProps) {
         />
       </LoaderIndicator>
     </div>
-  )
+  );
 }
 
-export { TableHelperComponent }
+export { TableHelperComponent };

package/src/table/hooks/useTableQueryOptions.ts

@@ -1,38 +1,38 @@
-import { useState } from 'react'
-import useQuery from '@licklist/plugins/dist/hooks/Query/useQuery'
-import { getFilterOptionsValue } from '../utils'
-import { TableComponentProps, ExtendedTableOptions } from '../types'
+import { useState } from "react";
+import useQuery from "@licklist/plugins/dist/hooks/Query/useQuery";
+import { getFilterOptionsValue } from "../utils";
+import { TableComponentProps, ExtendedTableOptions } from "../types";
 
 export const useTableQueryOptions = <T extends object>({
   initialOptions = {},
   externalFilters = {},
-}: Pick<TableComponentProps<T>, 'initialOptions' | 'externalFilters'>) => {
-  const query = useQuery()
+}: Pick<TableComponentProps<T>, "initialOptions" | "externalFilters">) => {
+  const query = useQuery();
 
-  const page = Number(getFilterOptionsValue(query, initialOptions, 'page'))
+  const page = Number(getFilterOptionsValue(query, initialOptions, "page"));
   const perPage = Number(
-    getFilterOptionsValue(query, initialOptions, 'perPage'),
-  )
+    getFilterOptionsValue(query, initialOptions, "perPage"),
+  );
   const sortKey = String(
-    getFilterOptionsValue(query, initialOptions, 'sortKey'),
-  )
+    getFilterOptionsValue(query, initialOptions, "sortKey"),
+  );
   const sortDirection = String(
-    getFilterOptionsValue(query, initialOptions, 'sortDirection'),
-  )
+    getFilterOptionsValue(query, initialOptions, "sortDirection"),
+  );
 
-  const filter = String(getFilterOptionsValue(query, initialOptions, 'filter'))
+  const filter = String(getFilterOptionsValue(query, initialOptions, "filter"));
 
-  const [optionsCache, setOptionsCache] = useState<ExtendedTableOptions>()
+  const [optionsCache, setOptionsCache] = useState<ExtendedTableOptions>();
   const [options, setOptions] = useState<ExtendedTableOptions>({
     page,
     perPage,
     sortKey,
     sortDirection,
     filter,
-  })
+  });
   const [cachedExternalFilters, setCachedExternalFilters] = useState<{
-    [key: string]: any
-  }>(externalFilters)
+    [key: string]: any;
+  }>(externalFilters);
 
   return {
     page,
@@ -46,5 +46,5 @@ export const useTableQueryOptions = <T extends object>({
     setOptions,
     cachedExternalFilters,
     setCachedExternalFilters,
-  }
-}
+  };
+};

package/src/table/index.ts

@@ -1,7 +1,7 @@
-export * from './FilterHelperComponent'
-export * from './PaginationHelperComponent'
-export * from './PerPageHelperComponent'
-export * from './StaticTable'
-export * from './TableHelperComponent'
-export * from './MenuButton'
-export * from './ReactTableHelperComponent'
+export * from "./FilterHelperComponent";
+export * from "./PaginationHelperComponent";
+export * from "./PerPageHelperComponent";
+export * from "./StaticTable";
+export * from "./TableHelperComponent";
+export * from "./MenuButton";
+export * from "./ReactTableHelperComponent";

package/src/table/types.ts

@@ -1,43 +1,47 @@
-import { ReactNode, CSSProperties } from 'react'
-import { TableOptions, ColumnDef, Row as TableRow } from '@tanstack/react-table'
-import ILengthAwarePaginator from '@licklist/plugins/dist/types/services/Table/ILengthAwarePaginator'
-import ITableHeader from '@licklist/plugins/dist/types/services/Table/ITableHeader'
-import { ITableProps } from '@licklist/plugins/dist/types/services/Table/ITableProps'
+import { ReactNode, CSSProperties } from "react";
+import {
+  TableOptions,
+  ColumnDef,
+  Row as TableRow,
+} from "@tanstack/react-table";
+import ILengthAwarePaginator from "@licklist/plugins/dist/types/services/Table/ILengthAwarePaginator";
+import ITableHeader from "@licklist/plugins/dist/types/services/Table/ITableHeader";
+import { ITableProps } from "@licklist/plugins/dist/types/services/Table/ITableProps";
 
-export type ReactTableHelperRow<T extends object> = TableRow<T>
+export type ReactTableHelperRow<T extends object> = TableRow<T>;
 
-export type ExtendedTableOptions = ITableProps & { [key: string]: any }
+export type ExtendedTableOptions = ITableProps & { [key: string]: any };
 
 export interface TableComponentProps<T extends object>
-  extends Omit<TableOptions<T>, 'columns' | 'data' | 'getCoreRowModel'> {
-  paginator?: ILengthAwarePaginator<T>
-  isLoading?: boolean
-  striped?: boolean
-  bordered?: boolean
-  displaySearchBar?: boolean
-  displayPerPageSelect?: boolean
-  displayShowingSection?: boolean
-  externalFilters?: { [key: string]: any }
-  initialOptions?: Partial<ITableProps>
-  sortableColumns?: string[]
+  extends Omit<TableOptions<T>, "columns" | "data" | "getCoreRowModel"> {
+  paginator?: ILengthAwarePaginator<T>;
+  isLoading?: boolean;
+  striped?: boolean;
+  bordered?: boolean;
+  displaySearchBar?: boolean;
+  displayPerPageSelect?: boolean;
+  displayShowingSection?: boolean;
+  externalFilters?: { [key: string]: any };
+  initialOptions?: Partial<ITableProps>;
+  sortableColumns?: string[];
 }
 
 export type TableColumnMeta = {
-  onClick?: () => void
-  className?: string
-  style?: CSSProperties
-}
+  onClick?: () => void;
+  className?: string;
+  style?: CSSProperties;
+};
 
 export type TableComponentPropsWithOldTableData<T extends object> = {
-  headers: ITableHeader[]
-  renderItemFn: (row: T, index: number) => void
-  columns?: never
-  renderRow?: never
-}
+  headers: ITableHeader[];
+  renderItemFn: (row: T, index: number) => void;
+  columns?: never;
+  renderRow?: never;
+};
 
 export type TableComponentPropsWithReactTableData<T extends object> = {
-  headers?: never
-  renderItemFn?: never
-  columns: ColumnDef<T, any>[]
-  renderRow: (row: ReactTableHelperRow<T>) => ReactNode
-}
+  headers?: never;
+  renderItemFn?: never;
+  columns: ColumnDef<T, any>[];
+  renderRow: (row: ReactTableHelperRow<T>) => ReactNode;
+};

package/src/table/utils/index.ts

@@ -1,15 +1,15 @@
-import { ITableProps } from '@licklist/plugins/dist/types/services/Table/ITableProps'
-import TableService from '@licklist/plugins/dist/services/Table/TableService'
+import { ITableProps } from "@licklist/plugins/dist/types/services/Table/ITableProps";
+import TableService from "@licklist/plugins/dist/services/Table/TableService";
 
-export { flexRender } from '@tanstack/react-table'
+export { flexRender } from "@tanstack/react-table";
 
 const DEFAULT_QUERY_VALUES: { [key in keyof ITableProps]: string | number } = {
   page: TableService.DEFAULT_PAGE,
   perPage: TableService.DEFAULT_PER_PAGE,
   sortDirection: TableService.DEFAULT_SORT_DIRECTION,
   sortKey: TableService.DEFAULT_SORT_KEY,
-  filter: '',
-}
+  filter: "",
+};
 
 export const getFilterOptionsValue = (
   query: URLSearchParams,
@@ -17,12 +17,12 @@ export const getFilterOptionsValue = (
   key: keyof ITableProps,
 ) => {
   if (query.get(key as string)) {
-    return query.get(key as string)
+    return query.get(key as string);
   }
 
   if (initialOptions[key]) {
-    return initialOptions[key]
+    return initialOptions[key];
   }
 
-  return DEFAULT_QUERY_VALUES[key as string]
-}
+  return DEFAULT_QUERY_VALUES[key as string];
+};