@pushwoosh/dumb-components 1.0.4 → 1.0.6

package/Table/hooks/useDataTableContext.js

@@ -0,0 +1,23 @@
+import { useLayoutEffect, useMemo } from 'react';
+import { useAsyncFn, usePersistentFunction } from '@pushwoosh/kit-helpers';
+export function useDataTableContext({
+  getItems,
+  params,
+  onChangeParams
+}) {
+  const getItemsPersistent = usePersistentFunction(getItems);
+  const [listAsync, reload] = useAsyncFn(() => getItemsPersistent(params), [params], {
+    loading: true
+  });
+  useLayoutEffect(() => {
+    reload({
+      reset: true
+    });
+  }, [reload]);
+  return useMemo(() => ({
+    data: listAsync,
+    reload,
+    params,
+    onChangeParams: onChangeParams
+  }), [reload, params, listAsync, onChangeParams]);
+}

package/Table/hooks/useDataTableParams.d.ts

@@ -0,0 +1,10 @@
+import type { DataTableParams } from '../types';
+type UseDataTableParamsParams<P extends DataTableParams> = {
+    defaultOrder: string;
+    defaultDirection?: 'asc' | 'desc';
+    defaultPerPage?: number;
+    extend?: (obj: Record<string, string>, params: DataTableParams) => P;
+};
+type UseDataTableParamsReturn<P> = readonly [P, (params: P) => void];
+export declare function useDataTableParams<P extends DataTableParams>({ defaultOrder, defaultDirection, defaultPerPage, extend, }: UseDataTableParamsParams<P>): UseDataTableParamsReturn<P>;
+export {};

package/Table/hooks/useDataTableParams.js

@@ -0,0 +1,39 @@
+import { useMemo, useRef } from 'react';
+import { useNavigate, useLocation } from 'react-router-dom';
+import { usePersistentFunction } from '@pushwoosh/kit-helpers';
+function pickBy(obj) {
+  return Object.fromEntries(Object.entries(obj).filter(([, value]) => !!value));
+}
+export function useDataTableParams({
+  defaultOrder,
+  defaultDirection = 'asc',
+  defaultPerPage = 10,
+  extend
+}) {
+  const navigate = useNavigate();
+  const {
+    search: locationSearch
+  } = useLocation();
+  const extendRef = useRef(extend);
+  extendRef.current = extend;
+  const dataTableParams = useMemo(() => {
+    const searchParams = new URLSearchParams(locationSearch);
+    const obj = Object.fromEntries(searchParams);
+    // eslint-disable-next-line no-nested-ternary
+    const realOrderDirection = !obj.direction ? defaultDirection : obj.direction === 'asc' ? 'asc' : 'desc';
+    const params = {
+      search: obj.search ?? '',
+      order: obj.order || defaultOrder,
+      direction: realOrderDirection,
+      page: +obj.page || 1,
+      perPage: +obj.perPage || defaultPerPage
+    };
+    return extendRef.current ? extendRef.current(obj, params) : params;
+  }, [locationSearch, defaultDirection, defaultOrder, defaultPerPage]);
+  const changeDataTableParams = usePersistentFunction(params => {
+    navigate({
+      search: new URLSearchParams(pickBy(params)).toString()
+    });
+  });
+  return [dataTableParams, changeDataTableParams];
+}

package/Table/index.d.ts

@@ -0,0 +1,13 @@
+export { ClearableInput } from './components/ClearableInput';
+export { DataTable } from './components/DataTable';
+export { DataTableList } from './components/DataTableList';
+export { DataTableGetContext } from './components/DataTableGetContext';
+export { DataTablePagination } from './components/DataTablePagination';
+export { DataTableSearchInput } from './components/DataTableSearchInput';
+export { DataTableSortableCell } from './components/DataTableSortableCell';
+export { Loading } from './components/Loading';
+export { TableList } from './components/TableList';
+export { TablePagination } from './components/TablePagination';
+export { useDataTableContext, useDataTableParams } from './hooks';
+export { Table, Td, Tr, Th, ElementHover, ItemDetailLink, ItemName, LockedText, Description, } from './styles';
+export type { DataTableParams, DataTableData, DataTableContextType } from './types';

package/Table/index.js

@@ -0,0 +1,12 @@
+export { ClearableInput } from './components/ClearableInput';
+export { DataTable } from './components/DataTable';
+export { DataTableList } from './components/DataTableList';
+export { DataTableGetContext } from './components/DataTableGetContext';
+export { DataTablePagination } from './components/DataTablePagination';
+export { DataTableSearchInput } from './components/DataTableSearchInput';
+export { DataTableSortableCell } from './components/DataTableSortableCell';
+export { Loading } from './components/Loading';
+export { TableList } from './components/TableList';
+export { TablePagination } from './components/TablePagination';
+export { useDataTableContext, useDataTableParams } from './hooks';
+export { Table, Td, Tr, Th, ElementHover, ItemDetailLink, ItemName, LockedText, Description } from './styles';

package/Table/styles.d.ts

@@ -0,0 +1,73 @@
+import { FontSize, FontWeight } from '@pushwoosh/kit-constants';
+export declare const Table: import("styled-components").StyledComponent<"div", any, {
+    $alignContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
+    $alignItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
+    $gap?: string | number | undefined;
+    $gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
+    $justifyContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
+    $justifyItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
+    $margin?: string | number | undefined;
+    $padding?: string | number | undefined;
+    $placeItems?: "end" | "start" | "center" | "stretch" | undefined;
+} & {
+    $gridAutoFlow: string;
+} & {
+    columns: string;
+    width?: string | number;
+}, "$gridAutoFlow">;
+export declare const Td: import("styled-components").StyledComponent<"div", any, {
+    $alignContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
+    $alignItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
+    $gap?: string | number | undefined;
+    $gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
+    $justifyContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
+    $justifyItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
+    $margin?: string | number | undefined;
+    $padding?: string | number | undefined;
+    $placeItems?: "end" | "start" | "center" | "stretch" | undefined;
+} & {
+    $padding: number;
+} & {
+    $color?: string;
+}, "$padding">;
+export declare const ElementHover: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Tr: import("styled-components").StyledComponent<"div", any, {
+    $alignContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
+    $alignItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
+    $gap?: string | number | undefined;
+    $gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
+    $justifyContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
+    $justifyItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
+    $margin?: string | number | undefined;
+    $padding?: string | number | undefined;
+    $placeItems?: "end" | "start" | "center" | "stretch" | undefined;
+} & {
+    $gridAutoFlow: string;
+} & {
+    $padding: string;
+}, "$gridAutoFlow" | "$padding">;
+export declare const Th: import("styled-components").StyledComponent<"div", any, {
+    $alignContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
+    $alignItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
+    $gap?: string | number | undefined;
+    $gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
+    $justifyContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
+    $justifyItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
+    $margin?: string | number | undefined;
+    $padding?: string | number | undefined;
+    $placeItems?: "end" | "start" | "center" | "stretch" | undefined;
+} & {
+    $padding: number;
+} & {
+    $color?: string;
+}, "$padding">;
+export declare const ItemDetailLink: import("styled-components").StyledComponent<"a", any, {}, never>;
+export declare const ItemName: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Description: import("styled-components").StyledComponent<"div", any, {
+    $maxLines?: number;
+}, never>;
+export declare const LockedText: import("styled-components").StyledComponent<"div", any, {
+    $fontSize?: FontSize;
+    $fontWeight?: FontWeight;
+    $maxWidth?: string;
+}, never>;

package/Table/styles.js

@@ -0,0 +1,60 @@
+import styled, { css } from 'styled-components';
+import { Color, FontSize, FontWeight, ShapeRadius } from '@pushwoosh/kit-constants';
+import { GridContainer, Horizontal, Vertical, toCssValue } from '@pushwoosh/kit-helpers';
+export const Table = styled(Vertical).withConfig({
+  displayName: "Table",
+  componentId: "sc-1kwcslm-0"
+})(["--table-columns:", ";border:1px solid ", ";border-radius:", ";background-color:", ";", " & > *:not(:last-child){border-bottom:1px solid ", ";}"], ({
+  columns
+}) => columns, Color.DIVIDER, ShapeRadius.SECTION, Color.CLEAR, ({
+  width
+}) => width ? `width: ${toCssValue(width)};` : '', Color.DIVIDER);
+export const Td = styled(GridContainer).attrs({
+  $padding: 12
+}).withConfig({
+  displayName: "Td",
+  componentId: "sc-1kwcslm-1"
+})(["", ""], ({
+  $color
+}) => $color ? `color: ${$color};` : '');
+export const ElementHover = styled.div.withConfig({
+  displayName: "ElementHover",
+  componentId: "sc-1kwcslm-2"
+})(["display:none;position:relative;& > *{position:absolute;right:0;transform:translateY(-50%);}"]);
+export const Tr = styled(Horizontal).attrs({
+  $padding: '0 12px'
+}).withConfig({
+  displayName: "Tr",
+  componentId: "sc-1kwcslm-3"
+})(["grid-template-columns:var(--table-columns);&:hover{background-color:#89A4BF0D;}&:hover ", "{display:block;}"], ElementHover);
+export const Th = styled(Td).withConfig({
+  displayName: "Th",
+  componentId: "sc-1kwcslm-4"
+})(["padding:8px 12px;color:#969ca3;font-weight:", ";font-size:", ";line-height:1;text-transform:uppercase;"], FontWeight.MEDIUM, FontSize.SMALL);
+export const ItemDetailLink = styled.a.withConfig({
+  displayName: "ItemDetailLink",
+  componentId: "sc-1kwcslm-5"
+})(["display:flex;align-items:center;text-decoration:none;font-weight:", ";color:", ";width:100%;&:hover{text-decoration:none;color:", ";}"], FontWeight.MEDIUM, Color.MAIN, Color.PRIMARY_HOVER);
+export const ItemName = styled.div.withConfig({
+  displayName: "ItemName",
+  componentId: "sc-1kwcslm-6"
+})(["overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"]);
+const overflowStyles = css(["overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:", ";"], ({
+  $maxLines
+}) => $maxLines);
+export const Description = styled.div.withConfig({
+  displayName: "Description",
+  componentId: "sc-1kwcslm-7"
+})(["color:", ";font-size:", ";font-style:normal;font-weight:", ";line-height:130%;", ""], Color.LOCKED, FontSize.SMALL, FontWeight.REGULAR, ({
+  $maxLines
+}) => $maxLines ? overflowStyles : undefined);
+export const LockedText = styled.div.withConfig({
+  displayName: "LockedText",
+  componentId: "sc-1kwcslm-8"
+})(["color:", ";font-size:", ";font-weight:", ";max-width:", ";"], Color.LOCKED, ({
+  $fontSize
+}) => $fontSize || FontSize.REGULAR, ({
+  $fontWeight
+}) => $fontWeight || FontWeight.REGULAR, ({
+  $maxWidth
+}) => $maxWidth || 'initial');

package/Table/types.d.ts

@@ -0,0 +1,20 @@
+import type { AsyncState } from '@pushwoosh/kit-helpers/hooks/useAsyncFn';
+export type DataTableParams = {
+    readonly search: string;
+    readonly order: string;
+    readonly direction: 'asc' | 'desc';
+    readonly page: number;
+    readonly perPage: number;
+};
+export type DataTableData<T> = {
+    items: T[];
+    total?: number;
+    totalPages: number;
+    isFiltered?: boolean;
+};
+export type DataTableContextType<T, P extends DataTableParams> = {
+    data: AsyncState<DataTableData<T>>;
+    reload: () => void;
+    params: P;
+    onChangeParams: (params: P) => void;
+};

package/Table/types.js

@@ -0,0 +1 @@
+export {};

package/index.d.ts

@@ -4,6 +4,7 @@ export { Banner, type BannerType } from './Banner';
 export { Button, GhostButton } from './Button';
 export { CardMetric } from './CardMetric';
 export { Checkbox } from './Checkbox';
+export { Drawer, DrawerHeader, DrawerTitle, DrawerBody, DrawerDocs, useDocs, } from './Drawer';
 export { DropdownMenu, DropdownMenuProvider, useDropdownMenuContext, DropdownMenuContainer, DropdownMenuGroup, DropdownMenuItem, DropdownMenuItemBox, DropdownMenuItemCheckbox, DropdownMenuItemPick, DropdownMenuItemRadio, DropdownMenuNested, DropdownMenuWindow, } from './DropdownMenu';
 export { EditableField } from './EditableField';
 export { InputFile } from './InputFile';
@@ -15,7 +16,9 @@ export { Radio } from './Radio';
 export { ReCaptcha, useRecaptcha, asyncScriptLoad } from './ReCaptcha';
 export { Spinner } from './Spinner';
 export { SortButton } from './SortButton';
+export { Select, SelectAsync, CreatableSelect, CLASS_NAME_PREFIX, type SelectBase, type MultiSelectOptions, } from './Select';
 export { Switch } from './Switch';
+export { TextSkeleton, RectangularSkeleton, CircularSkeleton } from './Skeleton';
 export { Tooltip, type TooltipPosition } from './Tooltip';
 export { Tab, TabBar, TabPanel, Tabs, type TabCode } from './Tabs';
 export { Link } from './Link';
@@ -23,6 +26,7 @@ export { StatisticCard } from './StatisticCard';
 export { EmailTemplatePreview, NoEmailTemplatePreview } from './EmailTemplatePreview';
 export { PushPreview } from './PushPreview';
 export { Toast, ToastProvider, useToast } from './Toast';
+export { ClearableInput, DataTable, DataTableList, DataTableGetContext, DataTablePagination, DataTableSearchInput, DataTableSortableCell, Loading, TableList, TablePagination, useDataTableContext, useDataTableParams, Table, Td, Tr, Th, ElementHover, ItemDetailLink, ItemName, LockedText, Description, type DataTableParams, type DataTableData, type DataTableContextType, } from './Table';
 export { AutosizeInput, PageHeader, PageHeaderEditable } from './PageHeader';
 export { ExportResult } from './ExportResult';
 export { NativeInput, NativeTextarea, NativeSelect } from './native';

package/index.js

@@ -4,6 +4,7 @@ export { Banner } from './Banner';
 export { Button, GhostButton } from './Button';
 export { CardMetric } from './CardMetric';
 export { Checkbox } from './Checkbox';
+export { Drawer, DrawerHeader, DrawerTitle, DrawerBody, DrawerDocs, useDocs } from './Drawer';
 export { DropdownMenu, DropdownMenuProvider, useDropdownMenuContext, DropdownMenuContainer, DropdownMenuGroup, DropdownMenuItem, DropdownMenuItemBox, DropdownMenuItemCheckbox, DropdownMenuItemPick, DropdownMenuItemRadio, DropdownMenuNested, DropdownMenuWindow } from './DropdownMenu';
 export { EditableField } from './EditableField';
 export { InputFile } from './InputFile';
@@ -15,7 +16,9 @@ export { Radio } from './Radio';
 export { ReCaptcha, useRecaptcha, asyncScriptLoad } from './ReCaptcha';
 export { Spinner } from './Spinner';
 export { SortButton } from './SortButton';
+export { Select, SelectAsync, CreatableSelect, CLASS_NAME_PREFIX } from './Select';
 export { Switch } from './Switch';
+export { TextSkeleton, RectangularSkeleton, CircularSkeleton } from './Skeleton';
 export { Tooltip } from './Tooltip';
 export { Tab, TabBar, TabPanel, Tabs } from './Tabs';
 export { Link } from './Link';
@@ -23,6 +26,7 @@ export { StatisticCard } from './StatisticCard';
 export { EmailTemplatePreview, NoEmailTemplatePreview } from './EmailTemplatePreview';
 export { PushPreview } from './PushPreview';
 export { Toast, ToastProvider, useToast } from './Toast';
+export { ClearableInput, DataTable, DataTableList, DataTableGetContext, DataTablePagination, DataTableSearchInput, DataTableSortableCell, Loading, TableList, TablePagination, useDataTableContext, useDataTableParams, Table, Td, Tr, Th, ElementHover, ItemDetailLink, ItemName, LockedText, Description } from './Table';
 export { AutosizeInput, PageHeader, PageHeaderEditable } from './PageHeader';
 export { ExportResult } from './ExportResult';
 export { NativeInput, NativeTextarea, NativeSelect } from './native';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushwoosh/dumb-components",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "description": "React components to build Pushwoosh products",
   "main": "index.js",
   "module": "index.js",
@@ -16,8 +16,9 @@
   },
   "pre-commit": "check",
   "devDependencies": {
-    "@pushwoosh/frontend-builder-engine": "^1.0.12",
+    "@pushwoosh/frontend-builder-engine": "^1.0.15",
     "@pushwoosh/kit-constants": "^1.6.7",
+    "@svgr/webpack": "^8.1.0",
     "@types/lodash": "^4.17.13",
     "@types/react": "^18.2.69",
     "@types/react-dom": "^18.2.22",
@@ -46,6 +47,7 @@
     "liquidjs": "^10.18.0",
     "lodash": "^4.17.21",
     "polished": "^4.3.1",
+    "react-select": "^5.10.0",
     "react-transition-group": "^4.4.5"
   }
 }