@pushwoosh/dumb-components 2.8.0 → 2.8.2

package/InboxPreview/InboxPreview.d.ts

@@ -7,6 +7,8 @@ import type { InboxPreviewProps } from './types';
  * a carousel shows at most five valid slides. Content without a single filled
  * field renders the dashed placeholder of the requested layout.
  *
+ * @deprecated Use `InboxCellPreview` from `@pushwoosh/websdk-common/inbox`, the renderer the WebSDK widget shares.
+ *
  * @example
  * <InboxPreview platform="ios" localizedContent={preset.localizedContent} language="en" />
  */

package/InboxPreview/InboxPreview.js

@@ -21,6 +21,8 @@ const CELL_BY_PLATFORM = {
  * a carousel shows at most five valid slides. Content without a single filled
  * field renders the dashed placeholder of the requested layout.
  *
+ * @deprecated Use `InboxCellPreview` from `@pushwoosh/websdk-common/inbox`, the renderer the WebSDK widget shares.
+ *
  * @example
  * <InboxPreview platform="ios" localizedContent={preset.localizedContent} language="en" />
  */

package/InboxPreview/constants.d.ts

@@ -1,5 +1,8 @@
 import type { InboxAvatarShape, InboxLayoutType, InboxPreviewPlatform } from './types';
-/** The SDK renders at most this many carousel slides and silently drops the rest. */
+/**
+ * The SDK renders at most this many carousel slides and silently drops the rest.
+ * @deprecated Use `INBOX_MAX_CAROUSEL_SLIDES` from `@pushwoosh/websdk-common/inbox`.
+ */
 export declare const MAX_CAROUSEL_SLIDES = 5;
 /** Layouts the SDK knows; anything else falls back to the heuristic. */
 export declare const KNOWN_LAYOUTS: readonly InboxLayoutType[];

package/InboxPreview/constants.js

@@ -1,5 +1,8 @@
 import { ShapeRadius } from '@pushwoosh/kit-constants';
-/** The SDK renders at most this many carousel slides and silently drops the rest. */
+/**
+ * The SDK renders at most this many carousel slides and silently drops the rest.
+ * @deprecated Use `INBOX_MAX_CAROUSEL_SLIDES` from `@pushwoosh/websdk-common/inbox`.
+ */
 export const MAX_CAROUSEL_SLIDES = 5;
 /** Layouts the SDK knows; anything else falls back to the heuristic. */
 export const KNOWN_LAYOUTS = ['classic', 'captioned', 'banner', 'carousel'];

package/InboxPreview/helpers.d.ts

@@ -11,6 +11,7 @@ export declare const getHeroUrl: (content: InboxPreviewContent) => string;
 /**
  * Resolves the layout the SDK would actually draw: the requested one when it can render,
  * the SDK heuristic for unknown/absent layouts, and the classic degradation otherwise.
+ * @deprecated Use `resolveInboxLayout` from `@pushwoosh/websdk-common/inbox`.
  */
 export declare const resolveInboxLayout: (content: InboxPreviewContent) => InboxLayoutType;
 /** True when the content has nothing to render yet, so the preview shows the layout placeholder. */

package/InboxPreview/helpers.js

@@ -22,6 +22,7 @@ export const getHeroUrl = content => content.bannerUrl || content.iconUrl || '';
 /**
  * Resolves the layout the SDK would actually draw: the requested one when it can render,
  * the SDK heuristic for unknown/absent layouts, and the classic degradation otherwise.
+ * @deprecated Use `resolveInboxLayout` from `@pushwoosh/websdk-common/inbox`.
  */
 export const resolveInboxLayout = content => {
   const hasTitle = !!content.title;

package/InboxPreview/types.d.ts

@@ -1,15 +1,24 @@
 import type { ReactNode } from 'react';
 import type { TypographyVariant } from '@pushwoosh/kit-typography';
-/** Cell layout of an Inbox message. */
+/**
+ * Cell layout of an Inbox message.
+ * @deprecated Use `InboxLayout` from `@pushwoosh/websdk-common/inbox`.
+ */
 export type InboxLayoutType = 'classic' | 'captioned' | 'banner' | 'carousel';
-/** One carousel slide of an Inbox message. */
+/**
+ * One carousel slide of an Inbox message.
+ * @deprecated Use `InboxSlide` from `@pushwoosh/websdk-common/inbox`.
+ */
 export interface InboxPreviewSlide {
     /** Slide image URL; a slide without it is dropped, like in the SDK. */
     imageUrl?: string;
     /** Caption overlaid at the bottom of the slide. */
     caption?: string;
 }
-/** One localized Inbox content (mirrors the rpc-v2 `AppInboxPresetLocale` shape). */
+/**
+ * One localized Inbox content (mirrors the rpc-v2 `AppInboxPresetLocale` shape).
+ * @deprecated Use `InboxCellContent` from `@pushwoosh/websdk-common/inbox`.
+ */
 export interface InboxPreviewContent {
     /** Cell title. */
     title?: string;
@@ -24,7 +33,10 @@ export interface InboxPreviewContent {
     /** Carousel slides; only the first five valid ones are rendered. */
     carousel?: InboxPreviewSlide[];
 }
-/** Platform skin of {@link InboxPreview}: each OS draws the inbox cell differently. */
+/**
+ * Platform skin of {@link InboxPreview}: each OS draws the inbox cell differently.
+ * @deprecated Use `InboxCellPlatform` from `@pushwoosh/websdk-common/inbox`.
+ */
 export type InboxPreviewPlatform = 'ios' | 'android' | 'web';
 /** Inbox icon geometry of one platform. */
 export interface InboxAvatarShape {
@@ -49,7 +61,10 @@ export interface InboxCellProps {
     /** Draw the unread dot. */
     unread: boolean;
 }
-/** Props of {@link InboxPreview}. */
+/**
+ * Props of {@link InboxPreview}.
+ * @deprecated Use `InboxCellPreviewProps` from `@pushwoosh/websdk-common/inbox`.
+ */
 export interface InboxPreviewProps {
     /** Platform skin to render (default `ios`); the editor switches it with platform chips. */
     platform?: InboxPreviewPlatform;

package/PushStoriesPreview/components/PushStoriesPage/styles.js

@@ -1,6 +1,7 @@
 import styled from 'styled-components';
+import { Color } from '@pushwoosh/kit-constants';
 import { PLACEHOLDER_BACKGROUND } from '../../constants';
-import { scaled } from '../../helpers';
+import { placeholderOutline, scaled } from '../../helpers';
 export const PageImage = styled.img.withConfig({
   displayName: "PageImage",
   componentId: "sc-1q2ujdq-0"
@@ -8,11 +9,11 @@ export const PageImage = styled.img.withConfig({
 export const ImagePlaceholder = styled.div.withConfig({
   displayName: "ImagePlaceholder",
   componentId: "sc-1q2ujdq-1"
-})(["position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:", ";color:rgba(255,255,255,0.45);"], PLACEHOLDER_BACKGROUND);
+})(["position:absolute;inset:0;display:flex;align-items:center;justify-content:center;", " background:", ";color:", ";> div{transform:scale(1.5);}"], placeholderOutline, PLACEHOLDER_BACKGROUND, Color.PHANTOM);
 export const BottomArea = styled.div.withConfig({
   displayName: "BottomArea",
   componentId: "sc-1q2ujdq-2"
-})(["position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;flex-direction:column;padding:", " ", " ", ";background:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,0.75) 100%);pointer-events:none;"], scaled(44), scaled(24), scaled(24));
+})(["position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;flex-direction:column;padding:", " ", " ", ";background:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,0.75) 100%);pointer-events:none;", " ~ &:empty{background:none;}"], scaled(44), scaled(24), scaled(24), ImagePlaceholder);
 export const PageTitle = styled.div.withConfig({
   displayName: "PageTitle",
   componentId: "sc-1q2ujdq-3"

package/PushStoriesPreview/components/PushStoriesProgress/styles.js

@@ -1,5 +1,7 @@
 import styled, { css, keyframes } from 'styled-components';
+import { Color } from '@pushwoosh/kit-constants';
 import { scaled } from '../../helpers';
+import { ImagePlaceholder } from '../PushStoriesPage/styles';
 const grow = keyframes(["from{width:0;}to{width:100%;}"]);
 export const ProgressRow = styled.div.withConfig({
   displayName: "ProgressRow",
@@ -8,10 +10,10 @@ export const ProgressRow = styled.div.withConfig({
 export const ProgressTrack = styled.div.withConfig({
   displayName: "ProgressTrack",
   componentId: "sc-1p5nb36-1"
-})(["flex:1;height:max(2px,", ");border-radius:", ";background:rgba(255,255,255,0.3);overflow:hidden;"], scaled(3), scaled(1.5));
+})(["flex:1;height:max(2px,", ");border-radius:", ";background:rgba(255,255,255,0.3);overflow:hidden;", " ~ ", " &{background:", ";}"], scaled(3), scaled(1.5), ImagePlaceholder, ProgressRow, Color.FORM);
 export const ProgressFill = styled.div.withConfig({
   displayName: "ProgressFill",
   componentId: "sc-1p5nb36-2"
-})(["width:100%;height:100%;background:#FFF;", ""], ({
+})(["width:100%;height:100%;background:#FFF;", " ~ ", " &{background:", ";}", ""], ImagePlaceholder, ProgressRow, Color.LOCKED, ({
   $duration
 }) => $duration !== undefined && css(["animation:", " ", "s linear both;"], grow, $duration));

package/PushStoriesPreview/constants.d.ts

@@ -5,4 +5,4 @@ export declare const PUSH_STORIES_DEFAULT_DURATION = 5;
 /** Longest page duration in seconds the iOS SDK honours. */
 export declare const PUSH_STORIES_MAX_DURATION = 30;
 export declare const REFERENCE_WIDTH = 375;
-export declare const PLACEHOLDER_BACKGROUND = "linear-gradient(160deg, #3A3A3C 0%, #1C1C1E 100%)";
+export declare const PLACEHOLDER_BACKGROUND = "linear-gradient(160deg, var(--pw-color-divider, #EBF0F5) 0%, var(--pw-color-frozen, #F7F9FA) 100%)";

package/PushStoriesPreview/constants.js

@@ -1,3 +1,4 @@
+import { Color } from '@pushwoosh/kit-constants';
 /** Height ÷ width of the stories area, the iOS SDK's default `storyAspectRatio`. */
 export const PUSH_STORIES_ASPECT_RATIO = 1.5;
 /** Seconds a page stays on screen when its duration is missing or invalid. */
@@ -5,4 +6,4 @@ export const PUSH_STORIES_DEFAULT_DURATION = 5;
 /** Longest page duration in seconds the iOS SDK honours. */
 export const PUSH_STORIES_MAX_DURATION = 30;
 export const REFERENCE_WIDTH = 375;
-export const PLACEHOLDER_BACKGROUND = 'linear-gradient(160deg, #3A3A3C 0%, #1C1C1E 100%)';
+export const PLACEHOLDER_BACKGROUND = `linear-gradient(160deg, ${Color.DIVIDER} 0%, ${Color.FROZEN} 100%)`;

package/PushStoriesPreview/helpers.d.ts

@@ -5,3 +5,5 @@ export declare function normalizeStoryDuration(duration?: number): number;
 export declare function hasStoryButton(page: PushStoriesPreviewPage): boolean;
 export declare function clampStoryIndex(index: number, length: number): number;
 export declare function scaled(points: number): string;
+/** Hairline outline that keeps a light placeholder visible on a white card. */
+export declare const placeholderOutline: import("styled-components").FlattenSimpleInterpolation;

package/PushStoriesPreview/helpers.js

@@ -1,3 +1,5 @@
+import { css } from 'styled-components';
+import { Color } from '@pushwoosh/kit-constants';
 import { PUSH_STORIES_DEFAULT_DURATION, PUSH_STORIES_MAX_DURATION, REFERENCE_WIDTH } from './constants';
 const URL_SCHEME = /^[a-z][a-z\d+.-]*:/i;
 /** Page duration in seconds as the iOS SDK plays it. */
@@ -16,4 +18,6 @@ export function clampStoryIndex(index, length) {
 }
 export function scaled(points) {
   return `calc(${points} * 100cqw / ${REFERENCE_WIDTH})`;
-}
+}
+/** Hairline outline that keeps a light placeholder visible on a white card. */
+export const placeholderOutline = css(["border-radius:inherit;box-shadow:inset 0 0 0 1px ", ";"], Color.DIVIDER);

package/PushStoriesPreview/styles.js

@@ -1,8 +1,8 @@
 import styled from 'styled-components';
-import { FontFamily } from '@pushwoosh/kit-constants';
+import { Color, FontFamily } from '@pushwoosh/kit-constants';
 import { toCssValue } from '@pushwoosh/kit-helpers';
 import { PLACEHOLDER_BACKGROUND, PUSH_STORIES_ASPECT_RATIO } from './constants';
-import { scaled } from './helpers';
+import { placeholderOutline, scaled } from './helpers';
 export const StoriesFrame = styled.div.withConfig({
   displayName: "StoriesFrame",
   componentId: "sc-udrlhm-0"
@@ -20,4 +20,4 @@ export const TapZone = styled.button.withConfig({
 export const EmptyState = styled.div.withConfig({
   displayName: "EmptyState",
   componentId: "sc-udrlhm-3"
-})(["position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:", ";padding:0 ", ";background:", ";color:rgba(255,255,255,0.7);font-size:", ";line-height:1.35;text-align:center;"], scaled(12), scaled(32), PLACEHOLDER_BACKGROUND, scaled(15));
+})(["position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:", ";padding:0 ", ";", " background:", ";color:", ";font-size:", ";line-height:1.35;text-align:center;> div{margin:", " 0;transform:scale(1.5);}"], scaled(12), scaled(32), placeholderOutline, PLACEHOLDER_BACKGROUND, Color.LOCKED, scaled(15), scaled(6));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushwoosh/dumb-components",
-  "version": "2.8.0",
+  "version": "2.8.2",
   "description": "React components to build Pushwoosh products",
   "main": "index.js",
   "module": "index.js",