@pushwoosh/dumb-components 1.0.40 → 1.0.42

package/FieldBox/styles.d.ts

@@ -4,15 +4,54 @@ export declare const TitleBox: import("styled-components").StyledComponent<"div"
     $alignContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
     $alignItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
     $bgColor?: string | undefined;
-    $border?: string | undefined;
-    $borderRadius?: string | number | 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;
+    $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;
+    $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;

package/Modal/components/ModalContent/styles.d.ts

@@ -3,15 +3,54 @@ export declare const ModalBodyGroup: import("styled-components").StyledComponent
     $alignContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
     $alignItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
     $bgColor?: string | undefined;
-    $border?: string | undefined;
-    $borderRadius?: string | number | 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;
+    $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;
+    $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;

package/PushPreview/PushPreview.js

@@ -1,34 +1,47 @@
 import React from 'react';
-import { Columns } from '@pushwoosh/kit-helpers';
-import { Spinner } from '../Spinner';
+import { Vertical } from '@pushwoosh/kit-helpers';
+import { NoPushPreview } from './components/NoPushPreview';
+import { SilentPushPreview } from './components/SilentPushPreview';
 import { PREVIEW_ICON_URL } from './constants';
 import { getLocalizedContent } from './helpers';
-import { LoadingBox, PushBox, AppIcon, PushContent, PushTitleBox, PushTitleText, PushDate, PushDescription } from './styles';
+import { PushBox, PushIcon, PushTitle, PushDescription } from './styles';
 export function PushPreview(props) {
   const {
     pushPreset,
     language,
-    isLoading,
-    appTitle,
-    appIcon,
+    view = 'compact',
+    appTitle = '',
+    appIcon = PREVIEW_ICON_URL,
+    isLoading = false,
     width
   } = props;
   const title = getLocalizedContent(pushPreset === null || pushPreset === void 0 ? void 0 : pushPreset.title, language) || appTitle;
-  const subTitle = getLocalizedContent(pushPreset === null || pushPreset === void 0 ? void 0 : pushPreset.subTitle, language);
   const content = getLocalizedContent(pushPreset === null || pushPreset === void 0 ? void 0 : pushPreset.content, language);
-  const renderIcon = content ? (pushPreset === null || pushPreset === void 0 ? void 0 : pushPreset.icon) || appIcon || PREVIEW_ICON_URL : PREVIEW_ICON_URL;
+  const icon = content ? (pushPreset === null || pushPreset === void 0 ? void 0 : pushPreset.icon) || appIcon : PREVIEW_ICON_URL;
+  const isLocked = !pushPreset || !content || view === 'silent';
+  if (isLoading) {
+    return React.createElement(PushBox, {
+      view: view,
+      "$loading": true
+    });
+  }
+  if (view === 'silent') {
+    return React.createElement(SilentPushPreview, null);
+  }
+  if (!pushPreset && !isLoading) {
+    return React.createElement(NoPushPreview, null);
+  }
   return React.createElement(PushBox, {
-    "$width": width
-  }, isLoading && React.createElement(LoadingBox, null, React.createElement(Spinner, {
-    size: "medium"
-  })), !isLoading && React.createElement(Columns, {
-    "$sizes": "30px 1fr",
-    "$alignItems": "center",
-    "$gap": 10
-  }, React.createElement(AppIcon, {
-    alt: appTitle,
-    src: renderIcon
-  }), React.createElement(PushContent, null, React.createElement(PushTitleBox, null, React.createElement(PushTitleText, null, title), React.createElement(PushDate, null, "5m\u00A0ago")), subTitle && React.createElement(PushTitleText, null, subTitle), React.createElement(PushDescription, {
-    "$isLocked": !content
-  }, content || 'Please, create or select push content'))));
+    view: view,
+    "$width": width,
+    "$loading": isLoading
+  }, React.createElement(PushIcon, {
+    alt: title,
+    src: icon
+  }), React.createElement(Vertical, null, React.createElement(PushTitle, {
+    locked: isLocked
+  }, title), React.createElement(PushDescription, {
+    view: view,
+    locked: !content
+  }, !content ? 'Message is empty…' : content)));
 }

package/PushPreview/components/NoPushPreview/NoPushPreview.js

@@ -1,14 +1,13 @@
 import React from 'react';
+import { Color } from '@pushwoosh/kit-constants';
 import { Vertical } from '@pushwoosh/kit-helpers';
-import { Container, IconMock } from './styles';
-import { LockedText, LockedTitle } from '../../../common';
+import { CloseIcon } from '@pushwoosh/kit-icons';
+import { PushBox, IconContainer, PushTitle, PushDescription } from '../../styles';
 export function NoPushPreview() {
-  return React.createElement(Container, {
-    "$gap": "10px",
-    "$padding": "10px",
-    "$alignItems": "center",
-    "$justifyContent": "start"
-  }, React.createElement(IconMock, null), React.createElement(Vertical, null, React.createElement(LockedTitle, null, "Content missed..."), React.createElement(LockedText, {
-    "$small": true
-  }, "Might be old data or deleted presets")));
+  return React.createElement(PushBox, {
+    view: "compact"
+  }, React.createElement(IconContainer, null, React.createElement(CloseIcon, {
+    size: "small",
+    color: Color.CLEAR
+  })), React.createElement(Vertical, null, React.createElement(PushTitle, null, "Content missed"), React.createElement(PushDescription, null, "Might be old data or deleted presets")));
 }

package/PushPreview/components/SilentPushPreview/SilentPushPreview.js

@@ -1,20 +1,19 @@
 import React from 'react';
+import { Color } from '@pushwoosh/kit-constants';
 import { Vertical } from '@pushwoosh/kit-helpers';
 import { NotificationIcon } from '@pushwoosh/kit-icons';
-import { Container, IconContainer } from './styles';
-import { LockedText, LockedTitle } from '../../../common';
+import { PushBox, IconContainer, PushTitle, PushDescription } from '../../styles';
 export function SilentPushPreview() {
-  return React.createElement(Container, {
-    "$gap": "10px",
-    "$padding": "10px",
-    "$alignItems": "center",
-    "$justifyContent": "start"
+  return React.createElement(PushBox, {
+    view: "silent"
   }, React.createElement(IconContainer, null, React.createElement(NotificationIcon, {
-    size: "medium",
-    type: "disabled",
+    size: "small",
     view: "lined",
-    color: "#FFD600"
-  })), React.createElement(Vertical, null, React.createElement(LockedTitle, null, "Silent push"), React.createElement(LockedText, {
-    "$small": true
+    type: "disabled",
+    color: Color.CLEAR
+  })), React.createElement(Vertical, null, React.createElement(PushTitle, {
+    locked: true
+  }, "Silent push notification"), React.createElement(PushDescription, {
+    locked: true
   }, "There is no content to preview")));
 }

package/PushPreview/constants.d.ts

@@ -1 +1 @@
-export declare const PREVIEW_ICON_URL = "/img/tmp.icon.png";
+export declare const PREVIEW_ICON_URL = "https://app.pushwoosh.com/img/tmp.icon.png";

package/PushPreview/constants.js

@@ -1 +1 @@
-export const PREVIEW_ICON_URL = '/img/tmp.icon.png';
+export const PREVIEW_ICON_URL = 'https://app.pushwoosh.com/img/tmp.icon.png';

package/PushPreview/index.d.ts

@@ -1,3 +1 @@
 export { PushPreview } from './PushPreview';
-export { NoPushPreview } from './components/NoPushPreview';
-export { SilentPushPreview } from './components/SilentPushPreview';

package/PushPreview/index.js

@@ -1,3 +1 @@
-export { PushPreview } from './PushPreview';
-export { NoPushPreview } from './components/NoPushPreview';
-export { SilentPushPreview } from './components/SilentPushPreview';
+export { PushPreview } from './PushPreview';

package/PushPreview/styles.d.ts

@@ -1,28 +1,75 @@
+import type { PushPreviewView } from './types';
 export declare const PushBox: import("styled-components").StyledComponent<"div", any, {
-    $width?: string;
-}, never>;
-export declare const AppIcon: import("styled-components").StyledComponent<"img", any, {}, never>;
-export declare const PushContent: 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 | undefined;
-    $borderRadius?: string | number | 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;
+    $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;
+    $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;
-}, "$gridAutoFlow">;
-export declare const PushTitleBox: import("styled-components").StyledComponent<"span", any, {}, never>;
-export declare const PushTitleText: import("styled-components").StyledComponent<"span", any, {}, never>;
-export declare const PushDate: import("styled-components").StyledComponent<"span", any, {}, never>;
+} & {
+    $alignItems: string;
+    $justifyContent: string;
+    $padding: number;
+    $gap: number;
+} & {
+    view: PushPreviewView;
+    $width?: string | number;
+    $loading?: boolean;
+}, "$gridAutoFlow" | "$alignItems" | "$gap" | "$justifyContent" | "$padding">;
+export declare const IconContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const PushIcon: import("styled-components").StyledComponent<"img", any, {}, never>;
+export declare const PushTitle: import("styled-components").StyledComponent<"div", any, {
+    locked?: boolean;
+}, never>;
 export declare const PushDescription: import("styled-components").StyledComponent<"div", any, {
-    $isLocked: boolean;
+    view?: PushPreviewView;
+    locked?: boolean;
 }, never>;
-export declare const LoadingBox: import("styled-components").StyledComponent<"div", any, {}, never>;

package/PushPreview/styles.js

@@ -1,39 +1,42 @@
 import styled from 'styled-components';
-import { Color, FontWeight, FontSize, Shadow, ShapeRadius, Spacing } from '@pushwoosh/kit-constants';
-import { Vertical } from '@pushwoosh/kit-helpers';
-export const PushBox = styled.div.withConfig({
+import { Color, FontSize, FontWeight, LineHeight, Shadow, ShapeRadius } from '@pushwoosh/kit-constants';
+import { Horizontal, toCssValue } from '@pushwoosh/kit-helpers';
+export const PushBox = styled(Horizontal).attrs({
+  $alignItems: 'center',
+  $justifyContent: 'start',
+  $padding: 12,
+  $gap: 12
+}).withConfig({
   displayName: "PushBox",
   componentId: "sc-185rvhg-0"
-})(["display:grid;width:", ";min-height:50px;padding:10px;background:", ";box-shadow:", ";border-radius:10px;"], ({
+})(["display:grid;width:", ";min-width:240px;max-width:350px;min-height:50px;padding:12px;border-radius:", ";border:", ";box-shadow:", ";background:", ";"], ({
   $width
-}) => $width || '100%', Color.CLEAR, Shadow.LARGE);
-export const AppIcon = styled.img.withConfig({
-  displayName: "AppIcon",
+}) => $width ? toCssValue($width) : '100%', ShapeRadius.SECTION, ({
+  $loading
+}) => $loading ? 'none' : `1px solid ${Color.DIVIDER}`, ({
+  view
+}) => view === 'extended' ? Shadow.LARGE : 'none', ({
+  $loading
+}) => $loading ? Color.SOFT_LIGHT : Color.CLEAR);
+export const IconContainer = styled.div.withConfig({
+  displayName: "IconContainer",
   componentId: "sc-185rvhg-1"
-})(["width:30px;height:30px;border-radius:", ";"], ShapeRadius.CONTROL);
-export const PushContent = styled(Vertical).withConfig({
-  displayName: "PushContent",
+})(["display:flex;align-items:center;justify-content:center;width:24px;height:24px;background:", ";border-radius:", ";"], Color.PHANTOM, ShapeRadius.CONTROL);
+export const PushIcon = styled.img.withConfig({
+  displayName: "PushIcon",
   componentId: "sc-185rvhg-2"
-})(["max-width:240px;"]);
-export const PushTitleBox = styled.span.withConfig({
-  displayName: "PushTitleBox",
+})(["width:24px;height:24px;background:", ";border-radius:", ";"], Color.PHANTOM, ShapeRadius.CONTROL);
+export const PushTitle = styled.div.withConfig({
+  displayName: "PushTitle",
   componentId: "sc-185rvhg-3"
-})(["display:grid;grid-template-columns:1fr min-content;grid-gap:", ";"], Spacing.S3);
-export const PushTitleText = styled.span.withConfig({
-  displayName: "PushTitleText",
-  componentId: "sc-185rvhg-4"
-})(["font-weight:", ";font-size:13px;line-height:140%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;"], FontWeight.MEDIUM);
-export const PushDate = styled.span.withConfig({
-  displayName: "PushDate",
-  componentId: "sc-185rvhg-5"
-})(["color:#555;font-weight:", ";font-size:", ";letter-spacing:0;"], FontWeight.REGULAR, FontSize.SMALL);
+})(["color:", ";font-size:", ";font-weight:", ";line-height:", ";white-space:nowrap;text-overflow:ellipsis;overflow:hidden;"], ({
+  locked
+}) => locked ? Color.LOCKED : Color.MAIN, FontSize.SMALL, FontWeight.MEDIUM, LineHeight.SMALL);
 export const PushDescription = styled.div.withConfig({
   displayName: "PushDescription",
-  componentId: "sc-185rvhg-6"
-})(["color:", ";font-weight:", ";font-size:13px;line-height:140%;"], ({
-  $isLocked
-}) => $isLocked ? Color.LOCKED : Color.MAIN, FontWeight.REGULAR);
-export const LoadingBox = styled.div.withConfig({
-  displayName: "LoadingBox",
-  componentId: "sc-185rvhg-7"
-})(["display:flex;align-items:center;justify-content:center;flex:1;"]);
+  componentId: "sc-185rvhg-4"
+})(["color:", ";font-size:", ";font-weight:", ";line-height:", ";white-space:", ";text-overflow:ellipsis;overflow:hidden;"], ({
+  locked
+}) => locked ? Color.LOCKED : Color.MAIN, FontSize.SMALL, FontWeight.REGULAR, LineHeight.SMALL, ({
+  view
+}) => view === 'extended' ? 'normal' : 'nowrap');

package/PushPreview/types.d.ts

@@ -1,3 +1,4 @@
+export type PushPreviewView = 'compact' | 'extended' | 'silent';
 export interface PushBasicData {
     title?: Record<string, string>;
     subTitle?: Record<string, string>;
@@ -5,10 +6,11 @@ export interface PushBasicData {
     icon?: string;
 }
 export interface PushPreviewProps<T> {
+    view?: PushPreviewView;
     pushPreset?: T | null;
     language?: string;
-    isLoading: boolean;
-    appTitle: string;
+    isLoading?: boolean;
+    appTitle?: string;
     appIcon?: string;
-    width?: string;
+    width?: string | number;
 }

package/StatisticCard/StatisticCard.js

@@ -1,9 +1,9 @@
 import React, { useMemo } from 'react';
-import { Horizontal } from '@pushwoosh/kit-helpers';
+import { Color } from '@pushwoosh/kit-constants';
+import { formatNumber, Horizontal } from '@pushwoosh/kit-helpers';
+import { Text } from '@pushwoosh/kit-typography';
 import { Spinner } from '../Spinner';
 import { Container, RightSlotContainer, StatValue, Title } from './styles';
-import { LockedText } from '../common';
-import { formatNumberWithSpaces } from './helpers';
 export function StatisticCard(props) {
   const {
     title,
@@ -28,11 +28,12 @@ export function StatisticCard(props) {
       return React.createElement(Horizontal, {
         "$alignItems": "end",
         "$gap": 8
-      }, React.createElement(StatValue, null, formatNumberWithSpaces(value)), React.createElement(LockedText, {
-        "$small": true
+      }, React.createElement(StatValue, null, formatNumber(value, 'spaced')), React.createElement(Text, {
+        "$variant": "footnote",
+        "$color": Color.LOCKED
       }, valueSubtext));
     }
-    return React.createElement(StatValue, null, formatNumberWithSpaces(value));
+    return React.createElement(StatValue, null, formatNumber(value, 'spaced'));
   }, [isLoading, value, valueSubtext]);
   return React.createElement(Container, {
     "$active": active,
@@ -42,7 +43,8 @@ export function StatisticCard(props) {
     ...rest
   }, React.createElement(Title, null, title), rightSlot && React.createElement(RightSlotContainer, {
     onClick: e => e.stopPropagation()
-  }, rightSlot), statisticValue, footer && React.createElement(LockedText, {
-    "$small": true
+  }, rightSlot), statisticValue, footer && React.createElement(Text, {
+    "$variant": "footnote",
+    "$color": Color.LOCKED
   }, footer));
 }