@pushwoosh/dumb-components 0.0.8 → 0.0.10

package/PushPreview/PushPreview.d.ts

@@ -0,0 +1,3 @@
+import { type ReactElement } from 'react';
+import type { PushBasicData, PushPreviewProps } from './types';
+export declare function PushPreview<T extends PushBasicData>(props: PushPreviewProps<T>): ReactElement;

package/PushPreview/PushPreview.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Columns } from '@pushwoosh/kit-helpers';
+import { Spinner } from '@pushwoosh/kit-spinner';
+import { PREVIEW_ICON_URL } from './constants/urls';
+import { getLocalizedContent } from './helpers/helpers';
+import { LoadingBox, PushBox, AppIcon, PushContent, PushTitleBox, PushTitleText, PushDate, PushDescription } from './styled';
+export function PushPreview(props) {
+  const {
+    pushPreset,
+    language,
+    isLoading,
+    appTitle,
+    appIcon,
+    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;
+  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'))));
+}

package/PushPreview/constants/urls.d.ts

@@ -0,0 +1,2 @@
+export declare const PUSHWOOSH_DOCS_URL = "https://www.pushwoosh.com/platform-docs";
+export declare const PREVIEW_ICON_URL = "/img/tmp.icon.png";

package/PushPreview/constants/urls.js

@@ -0,0 +1,2 @@
+export const PUSHWOOSH_DOCS_URL = 'https://www.pushwoosh.com/platform-docs';
+export const PREVIEW_ICON_URL = '/img/tmp.icon.png';

package/PushPreview/helpers/helpers.d.ts

@@ -0,0 +1,2 @@
+export declare const getDefaultLanguage: (properties: Record<string, any>) => string;
+export declare const getLocalizedContent: (value: Record<string, string> | undefined, language?: string) => string;

package/PushPreview/helpers/helpers.js

@@ -0,0 +1,10 @@
+export const getDefaultLanguage = properties => {
+  if (properties.default) {
+    return 'default';
+  }
+  if (properties.en) {
+    return 'en';
+  }
+  return Object.keys(properties)[0];
+};
+export const getLocalizedContent = (value, language) => (value === null || value === void 0 ? void 0 : value[language || getDefaultLanguage(value)]) || '';

package/PushPreview/index.d.ts

@@ -0,0 +1 @@
+export * from './PushPreview';

package/PushPreview/index.js

@@ -0,0 +1 @@
+export * from './PushPreview';

package/PushPreview/styled.d.ts

@@ -0,0 +1,24 @@
+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;
+    $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;
+}, "$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>;
+export declare const PushDescription: import("styled-components").StyledComponent<"div", any, {
+    $isLocked: boolean;
+}, never>;
+export declare const LoadingBox: import("styled-components").StyledComponent<"div", any, {}, never>;

package/PushPreview/styled.js

@@ -0,0 +1,39 @@
+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({
+  displayName: "PushBox",
+  componentId: "sc-13jvrn7-0"
+})(["display:grid;width:", ";min-height:50px;padding:10px;background:", ";box-shadow:", ";border-radius:10px;"], ({
+  $width
+}) => $width || '100%', Color.CLEAR, Shadow.LARGE);
+export const AppIcon = styled.img.withConfig({
+  displayName: "AppIcon",
+  componentId: "sc-13jvrn7-1"
+})(["width:30px;height:30px;border-radius:", ";"], ShapeRadius.CONTROL);
+export const PushContent = styled(Vertical).withConfig({
+  displayName: "PushContent",
+  componentId: "sc-13jvrn7-2"
+})(["max-width:240px;"]);
+export const PushTitleBox = styled.span.withConfig({
+  displayName: "PushTitleBox",
+  componentId: "sc-13jvrn7-3"
+})(["display:grid;grid-template-columns:1fr min-content;grid-gap:", ";"], Spacing.S3);
+export const PushTitleText = styled.span.withConfig({
+  displayName: "PushTitleText",
+  componentId: "sc-13jvrn7-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-13jvrn7-5"
+})(["color:#555;font-weight:", ";font-size:", ";letter-spacing:0;"], FontWeight.REGULAR, FontSize.SMALL);
+export const PushDescription = styled.div.withConfig({
+  displayName: "PushDescription",
+  componentId: "sc-13jvrn7-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-13jvrn7-7"
+})(["display:flex;align-items:center;justify-content:center;flex:1;"]);

package/PushPreview/types.d.ts

@@ -0,0 +1,14 @@
+export interface PushBasicData {
+    title?: Record<string, string>;
+    subTitle?: Record<string, string>;
+    content?: Record<string, string>;
+    icon?: string;
+}
+export interface PushPreviewProps<T> {
+    pushPreset?: T | null;
+    language?: string;
+    isLoading: boolean;
+    appTitle: string;
+    appIcon?: string;
+    width?: string;
+}

package/PushPreview/types.js

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

package/Tabs/tab-bar/tab-bar.styles.js

@@ -3,7 +3,7 @@ import { Color, Spacing } from '@pushwoosh/kit-constants';
 export const TabBarContainer = styled.div.withConfig({
   displayName: "TabBarContainer",
   componentId: "sc-1z0lfzo-0"
-})(["position:relative;display:grid;grid-template-columns:", ";width:100%;height:40px;background:", ";border-radius:8px;padding:", ";"], ({
+})(["position:relative;display:grid;grid-template-columns:", ";width:100%;height:40px;background:", ";border-radius:8px;padding:", ";overflow:hidden;"], ({
   hasTitle
 }) => hasTitle ? 'max-content 1fr' : '1fr', Color.SOFT_LIGHT, Spacing.S1);
 export const TabBarTitleBox = styled.div.withConfig({

package/Tabs/tabs-list-slide-frame/tabs-list-slide-frame.styles.js

@@ -9,7 +9,7 @@ export const TabBarArrowContainer = styled.div.withConfig({
 export const TabBarWindow = styled.div.withConfig({
   displayName: "TabBarWindow",
   componentId: "sc-u8lb05-1"
-})(["position:relative;height:32px;width:100%;overflow:hidden;"]);
+})(["position:relative;height:32px;width:100%;"]);
 export const TabsListContentBase = styled.div.withConfig({
   displayName: "TabsListContentBase",
   componentId: "sc-u8lb05-2"

package/index.d.ts

@@ -1,3 +1,4 @@
 export { ProgressBar } from './ProgressBar';
 export * from './Tabs';
 export { EmailTemplatePreview } from './EmailTemplatePreview/EmailTemplatePreview';
+export { PushPreview } from './PushPreview';

package/index.js

@@ -1,3 +1,4 @@
 export { ProgressBar } from './ProgressBar';
 export * from './Tabs';
-export { EmailTemplatePreview } from './EmailTemplatePreview/EmailTemplatePreview';
+export { EmailTemplatePreview } from './EmailTemplatePreview/EmailTemplatePreview';
+export { PushPreview } from './PushPreview';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushwoosh/dumb-components",
-  "version": "0.0.8",
+  "version": "0.0.10",
   "description": "React components to build Pushwoosh products",
   "main": "index.js",
   "module": "index.js",
@@ -16,8 +16,8 @@
   },
   "pre-commit": "check",
   "devDependencies": {
-    "@pushwoosh/frontend-builder-engine": "^1.0.4",
-    "@pushwoosh/kit-constants": "^1.6.0",
+    "@pushwoosh/frontend-builder-engine": "^1.0.6",
+    "@pushwoosh/kit-constants": "^1.6.6",
     "@types/lodash": "^4.17.13",
     "@types/react": "^18.2.69",
     "@types/react-dom": "^18.2.22",
@@ -38,6 +38,7 @@
     "npm": ">= 7"
   },
   "dependencies": {
+    "@pushwoosh/kit-helpers": "^4.6.2",
     "@pushwoosh/kit-icons": "^2.0.25",
     "@pushwoosh/kit-spinner": "^1.5.1",
     "@pushwoosh/kit-typography": "^1.7.1",