@pushwoosh/dumb-components 1.0.5 → 1.0.7

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

@@ -16,6 +16,7 @@ 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';
@@ -25,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

@@ -16,6 +16,7 @@ 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';
@@ -25,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.5",
+  "version": "1.0.7",
   "description": "React components to build Pushwoosh products",
   "main": "index.js",
   "module": "index.js",
@@ -15,8 +15,12 @@
     "check:types": "echo \"Run check:types\" && pushwoosh-engine lib:check-types"
   },
   "pre-commit": "check",
+  "engines": {
+    "node": ">= 18",
+    "npm": ">= 7"
+  },
   "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",
@@ -24,21 +28,12 @@
     "@types/react-dom": "^18.2.22",
     "@types/react-transition-group": "^4.4.12",
     "@types/styled-components": "^5.1.34",
+    "@types/react-router-dom": "^5.3.3",
     "pre-commit": "^1.2.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.22.3",
     "styled-components": "^5.3.11"
   },
-  "peerDependencies": {
-    "@pushwoosh/kit-constants": "^1.6.0",
-    "react": ">= 16.14.0",
-    "styled-components": "^5.3.3 || ^6.0.0"
-  },
-  "engines": {
-    "node": ">= 18",
-    "npm": ">= 7"
-  },
   "dependencies": {
     "@pushwoosh/kit-helpers": "^4.6.2",
     "@pushwoosh/kit-icons": "^2.1.1",
@@ -47,6 +42,13 @@
     "liquidjs": "^10.18.0",
     "lodash": "^4.17.21",
     "polished": "^4.3.1",
+    "react-select": "^5.10.0",
     "react-transition-group": "^4.4.5"
+  },
+  "peerDependencies": {
+    "@pushwoosh/kit-constants": "^1.6.0",
+    "react": ">= 16.14.0",
+    "react-router-dom": "^5.3.4",
+    "styled-components": "^5.3.3 || ^6.0.0"
   }
 }