@pushwoosh/smart-components-kit 1.0.41 → 1.0.43

package/Table/styles.d.ts

@@ -0,0 +1,247 @@
+import { FontSize, FontWeight } from '@pushwoosh/kit-constants';
+export type TableProps = {
+    columns: string;
+    width?: string | number;
+    isBordered?: boolean;
+};
+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;
+    $bgColor?: string | undefined;
+    $border?: string | ({
+        top?: string | undefined;
+        right?: string | undefined;
+        bottom?: string | undefined;
+        left?: string | undefined;
+    } | {
+        horizontal: string;
+        top?: string | undefined;
+        bottom?: string | undefined;
+    } | {
+        vertical: string;
+        right?: string | undefined;
+        left?: string | undefined;
+    }) | undefined;
+    $borderRadius?: (string | number) | undefined;
+    $boxShadow?: string | 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) | ({
+        top?: (string | number) | undefined;
+        right?: (string | number) | undefined;
+        bottom?: (string | number) | undefined;
+        left?: (string | number) | undefined;
+    } | {
+        horizontal: string | number;
+        top?: (string | number) | undefined;
+        bottom?: (string | number) | undefined;
+    } | {
+        vertical: string | number;
+        right?: (string | number) | undefined;
+        left?: (string | number) | undefined;
+    }) | undefined;
+    $padding?: (string | number) | ({
+        top?: (string | number) | undefined;
+        right?: (string | number) | undefined;
+        bottom?: (string | number) | undefined;
+        left?: (string | number) | undefined;
+    } | {
+        horizontal: string | number;
+        top?: (string | number) | undefined;
+        bottom?: (string | number) | undefined;
+    } | {
+        vertical: string | number;
+        right?: (string | number) | undefined;
+        left?: (string | number) | undefined;
+    }) | undefined;
+    $placeItems?: "end" | "start" | "center" | "stretch" | undefined;
+} & {
+    $gridAutoFlow: string;
+} & TableProps, "$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;
+    $bgColor?: string | undefined;
+    $border?: string | ({
+        top?: string | undefined;
+        right?: string | undefined;
+        bottom?: string | undefined;
+        left?: string | undefined;
+    } | {
+        horizontal: string;
+        top?: string | undefined;
+        bottom?: string | undefined;
+    } | {
+        vertical: string;
+        right?: string | undefined;
+        left?: string | undefined;
+    }) | undefined;
+    $borderRadius?: (string | number) | undefined;
+    $boxShadow?: string | 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) | ({
+        top?: (string | number) | undefined;
+        right?: (string | number) | undefined;
+        bottom?: (string | number) | undefined;
+        left?: (string | number) | undefined;
+    } | {
+        horizontal: string | number;
+        top?: (string | number) | undefined;
+        bottom?: (string | number) | undefined;
+    } | {
+        vertical: string | number;
+        right?: (string | number) | undefined;
+        left?: (string | number) | undefined;
+    }) | undefined;
+    $padding?: (string | number) | ({
+        top?: (string | number) | undefined;
+        right?: (string | number) | undefined;
+        bottom?: (string | number) | undefined;
+        left?: (string | number) | undefined;
+    } | {
+        horizontal: string | number;
+        top?: (string | number) | undefined;
+        bottom?: (string | number) | undefined;
+    } | {
+        vertical: string | number;
+        right?: (string | number) | undefined;
+        left?: (string | number) | undefined;
+    }) | 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;
+    $bgColor?: string | undefined;
+    $border?: string | ({
+        top?: string | undefined;
+        right?: string | undefined;
+        bottom?: string | undefined;
+        left?: string | undefined;
+    } | {
+        horizontal: string;
+        top?: string | undefined;
+        bottom?: string | undefined;
+    } | {
+        vertical: string;
+        right?: string | undefined;
+        left?: string | undefined;
+    }) | undefined;
+    $borderRadius?: (string | number) | undefined;
+    $boxShadow?: string | 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) | ({
+        top?: (string | number) | undefined;
+        right?: (string | number) | undefined;
+        bottom?: (string | number) | undefined;
+        left?: (string | number) | undefined;
+    } | {
+        horizontal: string | number;
+        top?: (string | number) | undefined;
+        bottom?: (string | number) | undefined;
+    } | {
+        vertical: string | number;
+        right?: (string | number) | undefined;
+        left?: (string | number) | undefined;
+    }) | undefined;
+    $padding?: (string | number) | ({
+        top?: (string | number) | undefined;
+        right?: (string | number) | undefined;
+        bottom?: (string | number) | undefined;
+        left?: (string | number) | undefined;
+    } | {
+        horizontal: string | number;
+        top?: (string | number) | undefined;
+        bottom?: (string | number) | undefined;
+    } | {
+        vertical: string | number;
+        right?: (string | number) | undefined;
+        left?: (string | number) | undefined;
+    }) | 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;
+    $bgColor?: string | undefined;
+    $border?: string | ({
+        top?: string | undefined;
+        right?: string | undefined;
+        bottom?: string | undefined;
+        left?: string | undefined;
+    } | {
+        horizontal: string;
+        top?: string | undefined;
+        bottom?: string | undefined;
+    } | {
+        vertical: string;
+        right?: string | undefined;
+        left?: string | undefined;
+    }) | undefined;
+    $borderRadius?: (string | number) | undefined;
+    $boxShadow?: string | 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) | ({
+        top?: (string | number) | undefined;
+        right?: (string | number) | undefined;
+        bottom?: (string | number) | undefined;
+        left?: (string | number) | undefined;
+    } | {
+        horizontal: string | number;
+        top?: (string | number) | undefined;
+        bottom?: (string | number) | undefined;
+    } | {
+        vertical: string | number;
+        right?: (string | number) | undefined;
+        left?: (string | number) | undefined;
+    }) | undefined;
+    $padding?: (string | number) | ({
+        top?: (string | number) | undefined;
+        right?: (string | number) | undefined;
+        bottom?: (string | number) | undefined;
+        left?: (string | number) | undefined;
+    } | {
+        horizontal: string | number;
+        top?: (string | number) | undefined;
+        bottom?: (string | number) | undefined;
+    } | {
+        vertical: string | number;
+        right?: (string | number) | undefined;
+        left?: (string | number) | undefined;
+    }) | 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,62 @@
+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-1vdjaze-0"
+})(["--table-columns:", ";border:", ";border-radius:", ";background-color:", ";", " & > *:not(:last-child){border-bottom:1px solid ", ";}"], ({
+  columns
+}) => columns, ({
+  isBordered
+}) => isBordered ? `1px solid ${Color.DIVIDER}` : 'none', ShapeRadius.SECTION, Color.CLEAR, ({
+  width
+}) => width ? `width: ${toCssValue(width)};` : '', Color.DIVIDER);
+export const Td = styled(GridContainer).attrs({
+  $padding: 12
+}).withConfig({
+  displayName: "Td",
+  componentId: "sc-1vdjaze-1"
+})(["", ""], ({
+  $color
+}) => $color ? `color: ${$color};` : '');
+export const ElementHover = styled.div.withConfig({
+  displayName: "ElementHover",
+  componentId: "sc-1vdjaze-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-1vdjaze-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-1vdjaze-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-1vdjaze-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-1vdjaze-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-1vdjaze-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-1vdjaze-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

@@ -1,10 +1,12 @@
-export * from './EmailTemplatePreview';
 export * from './context';
+export * from './hooks';
+export * from './CampaignsConfigurationDrawer';
 export * from './DynamicContentPicker';
 export * from './DynamicContentPickerForm';
+export * from './EmailTemplatePreview';
+export * from './ExportCSV';
 export * from './PlatformsConfigurationDrawer';
 export * from './LanguagesSelector';
 export * from './RichMessageEditorSmart';
-export * from './CampaignsConfigurationDrawer';
-export * from './ExportCSV';
+export * from './Table';
 export * from './OpenActions';

package/index.js

@@ -1,10 +1,12 @@
-export * from './EmailTemplatePreview';
 export * from './context';
+export * from './hooks';
+export * from './CampaignsConfigurationDrawer';
 export * from './DynamicContentPicker';
 export * from './DynamicContentPickerForm';
+export * from './EmailTemplatePreview';
+export * from './ExportCSV';
 export * from './PlatformsConfigurationDrawer';
 export * from './LanguagesSelector';
 export * from './RichMessageEditorSmart';
-export * from './CampaignsConfigurationDrawer';
-export * from './ExportCSV';
+export * from './Table';
 export * from './OpenActions';

package/package.json

@@ -10,32 +10,33 @@
     "build": "pushwoosh-engine lib:build",
     "playground": "`pushwoosh-engine lib:command:playground`",
     "check": "npm run check:lint && npm run check:types",
-    "check:lint": "echo \"Run check:lint\" && NODE_ENV=production eslint ./src",
+    "check:lint": "echo \"Run check:lint\" && NODE_ENV=production eslint src",
     "check:lint-fix": "echo \"Run check:lint\" && NODE_ENV=production eslint . --fix",
-    "check:types": "echo \"Run check:types\" && tsc --project tsconfig.json --skipLibCheck --emitDeclarationOnly false --noEmit"
+    "check:types": "echo \"Run check:types\" && pushwoosh-engine lib:check-types"
   },
   "pre-commit": "check",
   "dependencies": {
     "@floating-ui/react-dom": "^2.1.2",
-    "@pushwoosh/dumb-components": "^1.1.2",
+    "@pushwoosh/dumb-components": "^1.1.27",
     "@pushwoosh/kit-constants": "^1.6.9",
     "@pushwoosh/kit-helpers": "^4.8.1",
     "@pushwoosh/kit-icons": "^2.1.6",
     "@pushwoosh/kit-typography": "^1.7.3"
   },
   "devDependencies": {
-    "@pushwoosh/frontend-builder-engine": "^1.0.17",
+    "@pushwoosh/frontend-builder-engine": "^1.0.18",
     "@pushwoosh/http-client": "^2.5.0",
     "@pushwoosh/session-store": "^2.5.0",
+    "@svgr/webpack": "^8.1.0",
     "@types/react": "^18.3.5",
     "@types/react-dom": "^18.3.0",
     "@types/react-router-dom": "^5.3.3",
     "@types/styled-components": "^5.1.34",
+    "pre-commit": "^1.2.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^5.3.4",
-    "styled-components": "^5.3.11",
-    "typescript": "^5.8.2"
+    "styled-components": "^5.3.11"
   },
   "peerDependencies": {
     "@pushwoosh/http-client": "^2.5.0",
@@ -48,5 +49,5 @@
   "engines": {
     "node": ">= 18"
   },
-  "version": "1.0.41"
+  "version": "1.0.43"
 }