@pushwoosh/dumb-components 1.1.163 → 1.1.165

package/NativeRichMediaPreview/helpers.js

@@ -1,9 +1,4 @@
-export const PT = {
-  W: 393,
-  H: 852,
-  SAFE_TOP: 59,
-  SAFE_BOTTOM: 34
-};
+export const EDGE_INSET = 24;
 export const SEG_FALLBACK = ['#5856D6', '#FF2D55', '#30B0C7', '#FF9500', '#AF52DE', '#34C759'];
 export const SECONDARY_LABEL = 'rgba(60,60,67,0.6)';
 export const TERTIARY_LABEL = 'rgba(60,60,67,0.3)';
@@ -73,9 +68,53 @@ export function surfaceBackground(background, fallbackHex) {
 export function asText(value) {
   return typeof value === 'string' ? value : '';
 }
+export function asTextValue(value) {
+  if (value && typeof value === 'object' && 'text' in value) {
+    const {
+      text,
+      color
+    } = value;
+    return {
+      text: asText(text),
+      color: typeof color === 'string' ? color : undefined
+    };
+  }
+  return {
+    text: ''
+  };
+}
+export function asButtonValue(value) {
+  if (!value || typeof value !== 'object') {
+    return null;
+  }
+  const raw = value;
+  const text = asTextValue(raw.text);
+  const border = raw.border;
+  if (!text.text || !text.color || typeof raw.background !== 'string' || !border || typeof border.color !== 'string' || typeof border.radius !== 'number') {
+    return null;
+  }
+  return {
+    text: {
+      text: text.text,
+      color: text.color
+    },
+    background: raw.background,
+    border: {
+      color: border.color,
+      radius: border.radius
+    },
+    action: raw.action
+  };
+}
+export function asButtonList(value) {
+  return Array.isArray(value) ? value.map(asButtonValue).filter(button => button !== null) : [];
+}
 export function surfaceBaseHex(background) {
   if (Array.isArray(background)) {
     return background[0];
   }
   return background || null;
+}
+export function clampIndex(index, length) {
+  return Math.max(0, Math.min(index, length - 1));
 }

package/NativeRichMediaPreview/icons/MutedIcon.svg

@@ -1,4 +1,4 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none">
   <path d="M4 9v6h4l5 4V5L8 9H4z" fill="#fff"/>
   <path d="M16 9l6 6M22 9l-6 6" stroke="#fff" stroke-width="2" stroke-linecap="round"/>
-</svg>
+</svg>

package/NativeRichMediaPreview/icons/SoundIcon.svg

@@ -1,4 +1,4 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none">
   <path d="M4 9v6h4l5 4V5L8 9H4z" fill="#fff"/>
   <path d="M16.5 8.5a5 5 0 010 7M19 6a8.5 8.5 0 010 12" stroke="#fff" stroke-width="2" stroke-linecap="round"/>
-</svg>
+</svg>

package/NativeRichMediaPreview/index.d.ts

@@ -1,4 +1,4 @@
-export type { NativeRichMediaConfig, NativeRichMediaDisplayType, NativeRichMediaText, NativeRichMediaAction, NativeRichMediaButton, NativeRichMediaReward, NativeRichMediaModalBlock, NativeRichMediaSheetBlock, NativeRichMediaCarouselBlock, NativeRichMediaCarouselItem, NativeRichMediaStoriesBlock, NativeRichMediaStoryItem, NativeRichMediaBannerBlock, NativeRichMediaFullscreenBlock, NativeRichMediaVideoBlock, NativeRichMediaPipBlock, NativeRichMediaScratchcardBlock, NativeRichMediaScratchcardCover, NativeRichMediaSpinwheelBlock, NativeRichMediaSpinwheelSegment, NativeRichMediaPreviewProps, } from './types';
+export type { NativeRichMediaConfig, NativeRichMediaDisplayType, NativeRichMediaText, NativeRichMediaBorder, NativeRichMediaCover, NativeRichMediaAction, NativeRichMediaButton, NativeRichMediaReward, NativeRichMediaModalBlock, NativeRichMediaSheetBlock, NativeRichMediaCarouselBlock, NativeRichMediaStoriesBlock, NativeRichMediaBannerBlock, NativeRichMediaFullscreenBlock, NativeRichMediaVideoBlock, NativeRichMediaPipBlock, NativeRichMediaScratchcardBlock, NativeRichMediaSpinwheelBlock, NativeRichMediaPreviewProps, } from './types';
 export { NATIVE_RICH_MEDIA_DISPLAY_TYPES } from './types';
 export { parseNativeRichMediaConfig } from './parseNativeRichMediaConfig';
 export { NativeRichMediaPreview } from './NativeRichMediaPreview';

package/NativeRichMediaPreview/parseNativeRichMediaConfig.d.ts

@@ -1,6 +1,8 @@
 import { type NativeRichMediaConfig } from './types';
 /**
  * Parses and validates a native rich media config from an object or a JSON
- * string; returns `null` when the input is not a well-formed config.
+ * string; returns `null` when the input is not a well-formed config — unknown
+ * `displayType`, missing block, empty `items`/`segments`, or any required
+ * field of the block contract absent or malformed.
  */
 export declare function parseNativeRichMediaConfig(content: string | NativeRichMediaConfig): NativeRichMediaConfig | null;

package/NativeRichMediaPreview/parseNativeRichMediaConfig.js

@@ -1,10 +1,76 @@
 import { NATIVE_RICH_MEDIA_DISPLAY_TYPES } from './types';
-function isObjectArray(value) {
-  return Array.isArray(value) && value.every(item => typeof item === 'object' && item !== null);
+function isObject(value) {
+  return typeof value === 'object' && value !== null && !Array.isArray(value);
 }
+function isNonEmptyString(value) {
+  return typeof value === 'string' && value.length > 0;
+}
+function isFiniteNumber(value) {
+  return typeof value === 'number' && Number.isFinite(value);
+}
+function isText(value) {
+  return isObject(value) && isNonEmptyString(value.text) && isNonEmptyString(value.color);
+}
+function isOptionalText(value) {
+  return value === undefined || isText(value);
+}
+function isAction(value) {
+  if (!isObject(value)) {
+    return false;
+  }
+  if (value.type === 'close') {
+    return true;
+  }
+  return value.type === 'url' && isNonEmptyString(value.url);
+}
+function isOptionalAction(value) {
+  return value === undefined || isAction(value);
+}
+function isBorder(value) {
+  return isObject(value) && isNonEmptyString(value.color) && isFiniteNumber(value.radius);
+}
+function isActionlessButton(value) {
+  return isObject(value) && isText(value.text) && isNonEmptyString(value.background) && isBorder(value.border);
+}
+function isButton(value) {
+  return isActionlessButton(value) && isAction(value.action);
+}
+function isButtonArray(value) {
+  return Array.isArray(value) && value.every(isButton);
+}
+function isCover(value) {
+  return isObject(value) && isNonEmptyString(value.background);
+}
+function isReward(value) {
+  if (!isObject(value)) {
+    return false;
+  }
+  const hasIdentity = isText(value.title) || isNonEmptyString(value.code);
+  return hasIdentity && isOptionalText(value.title) && isOptionalText(value.message) && (value.button === undefined || isButton(value.button));
+}
+function isOptionalReward(value) {
+  return value === undefined || isReward(value);
+}
+function isBackground(value) {
+  return isNonEmptyString(value) || Array.isArray(value) && value.length > 0 && value.every(isNonEmptyString);
+}
+const BLOCK_VALIDATORS = {
+  banner: block => typeof block.showClose === 'boolean' && (block.position === 'top' || block.position === 'bottom') && isNonEmptyString(block.background) && isOptionalText(block.title) && isOptionalText(block.message) && isAction(block.action),
+  carousel: block => typeof block.showClose === 'boolean' && Array.isArray(block.items) && block.items.length > 0 && block.items.every(item => isObject(item) && isOptionalText(item.title) && isOptionalText(item.message) && isOptionalAction(item.action)),
+  fullscreen: block => typeof block.showClose === 'boolean' && isCover(block.cover) && isOptionalText(block.title) && isOptionalText(block.message) && isButtonArray(block.buttons),
+  modal: block => typeof block.showClose === 'boolean' && typeof block.dimBackground === 'boolean' && isNonEmptyString(block.background) && isOptionalText(block.title) && isOptionalText(block.message) && isButtonArray(block.buttons),
+  pip: block => typeof block.showClose === 'boolean' && ['bottom-right', 'bottom-left', 'top-right', 'top-left'].includes(block.position) && typeof block.loop === 'boolean' && typeof block.muted === 'boolean' && isNonEmptyString(block.url) && isFiniteNumber(block.width) && isFiniteNumber(block.aspectRatio) && isOptionalAction(block.action),
+  scratchcard: block => typeof block.showClose === 'boolean' && isBackground(block.background) && isFiniteNumber(block.revealThreshold) && isCover(block.cover) && (block.revealButton === undefined || isActionlessButton(block.revealButton)) && isOptionalText(block.title) && isOptionalText(block.message) && isReward(block.reward),
+  sheet: block => typeof block.showClose === 'boolean' && typeof block.dimBackground === 'boolean' && isNonEmptyString(block.background) && isOptionalText(block.title) && isOptionalText(block.message) && isButtonArray(block.buttons),
+  spinwheel: block => typeof block.showClose === 'boolean' && isBackground(block.background) && isFiniteNumber(block.winIndex) && isActionlessButton(block.spinButton) && isOptionalText(block.title) && isOptionalText(block.message) && isReward(block.reward) && isOptionalText(block.loseTitle) && Array.isArray(block.segments) && block.segments.length > 0 && block.segments.every(segment => isObject(segment) && isText(segment.message) && isFiniteNumber(segment.weight) && isOptionalReward(segment.reward)),
+  stories: block => typeof block.showClose === 'boolean' && typeof block.loop === 'boolean' && Array.isArray(block.items) && block.items.length > 0 && block.items.every(item => isObject(item) && isOptionalText(item.title) && isOptionalText(item.message) && isButtonArray(item.buttons) && isFiniteNumber(item.duration)),
+  video: block => typeof block.showClose === 'boolean' && typeof block.loop === 'boolean' && typeof block.muted === 'boolean' && isNonEmptyString(block.url) && isOptionalText(block.title) && isOptionalText(block.message) && isButtonArray(block.buttons)
+};
 /**
  * Parses and validates a native rich media config from an object or a JSON
- * string; returns `null` when the input is not a well-formed config.
+ * string; returns `null` when the input is not a well-formed config — unknown
+ * `displayType`, missing block, empty `items`/`segments`, or any required
+ * field of the block contract absent or malformed.
  */
 export function parseNativeRichMediaConfig(content) {
   let raw = content;
@@ -15,26 +81,16 @@ export function parseNativeRichMediaConfig(content) {
       return null;
     }
   }
-  if (typeof raw !== 'object' || raw === null) {
+  if (!isObject(raw)) {
     return null;
   }
-  const candidate = raw;
-  const displayType = candidate.displayType;
+  const displayType = raw.displayType;
   if (!NATIVE_RICH_MEDIA_DISPLAY_TYPES.includes(displayType)) {
     return null;
   }
-  if (typeof candidate[displayType] !== 'object' || candidate[displayType] === null) {
-    return null;
-  }
-  const block = candidate[displayType];
-  if ((displayType === 'carousel' || displayType === 'stories') && !isObjectArray(block.items)) {
-    return null;
-  }
-  if (displayType === 'spinwheel' && !isObjectArray(block.segments)) {
-    return null;
-  }
-  if (block.buttons !== undefined && !isObjectArray(block.buttons)) {
+  const block = raw[displayType];
+  if (!isObject(block) || !BLOCK_VALIDATORS[displayType](block)) {
     return null;
   }
-  return candidate;
+  return raw;
 }

package/NativeRichMediaPreview/styles.d.ts

@@ -1,19 +1,19 @@
-export declare const TemplateLayer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export type NativeRichMediaJustify = 'flex-start' | 'flex-end' | 'center' | 'space-between';
 export declare const ButtonRow: import("styled-components").StyledComponent<"div", any, {
     $borderRadius: number;
     $background?: string;
     $color: string;
     $marginTop?: number;
-    $boxShadow?: string;
     $border?: string;
 }, never>;
-export declare const ScaledCanvasHost: import("styled-components").StyledComponent<"div", any, {
+export declare const PreviewHost: import("styled-components").StyledComponent<"div", any, {
     width: string | number;
     height: string | number;
     $withBackground: boolean;
 }, never>;
-export declare const CanvasWrapper: import("styled-components").StyledComponent<"div", any, {
-    $canvasWidth: number;
-    $canvasHeight: number;
-    $scale: number;
+export declare const BackdropLayer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ScrollLayer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ContentFlow: import("styled-components").StyledComponent<"div", any, {
+    $justify: NativeRichMediaJustify;
 }, never>;
+export declare const SpinnerLayer: import("styled-components").StyledComponent<"div", any, {}, never>;

package/NativeRichMediaPreview/styles.js

@@ -1,14 +1,10 @@
 import styled from 'styled-components';
-import { Color, ShapeRadius } from '@pushwoosh/kit-constants';
+import { Color, FontFamily, FontSize, FontWeight, ShapeRadius } from '@pushwoosh/kit-constants';
 import { toCssValue } from '@pushwoosh/kit-helpers';
-export const TemplateLayer = styled.div.withConfig({
-  displayName: "TemplateLayer",
-  componentId: "sc-mc9ykd-0"
-})(["position:absolute;inset:0;z-index:10;"]);
 export const ButtonRow = styled.div.withConfig({
   displayName: "ButtonRow",
-  componentId: "sc-mc9ykd-1"
-})(["display:flex;align-items:center;justify-content:center;height:52px;font-size:16px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 12px;border-radius:", "px;color:", ";", " ", " ", " ", ""], ({
+  componentId: "sc-mc9ykd-0"
+})(["display:flex;align-items:center;justify-content:center;height:44px;font-size:", ";font-weight:", ";white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 12px;user-select:none;cursor:pointer;border-radius:", "px;color:", ";", " ", " ", ""], FontSize.REGULAR, FontWeight.MEDIUM, ({
   $borderRadius
 }) => $borderRadius, ({
   $color
@@ -17,14 +13,12 @@ export const ButtonRow = styled.div.withConfig({
 }) => $background !== undefined ? `background: ${$background};` : '', ({
   $marginTop
 }) => $marginTop !== undefined ? `margin-top: ${$marginTop}px;` : '', ({
-  $boxShadow
-}) => $boxShadow !== undefined ? `box-shadow: ${$boxShadow};` : '', ({
   $border
 }) => $border !== undefined ? `border: ${$border};` : '');
-export const ScaledCanvasHost = styled.div.withConfig({
-  displayName: "ScaledCanvasHost",
-  componentId: "sc-mc9ykd-2"
-})(["position:relative;border:", ";border-radius:", ";background-color:", ";width:", ";height:", ";margin:0 auto;overflow:hidden;"], ({
+export const PreviewHost = styled.div.withConfig({
+  displayName: "PreviewHost",
+  componentId: "sc-mc9ykd-1"
+})(["position:relative;border:", ";border-radius:", ";background-color:", ";width:", ";height:", ";margin:0 auto;overflow:hidden;font-family:", ";-webkit-font-smoothing:antialiased;*{box-sizing:border-box;}"], ({
   $withBackground
 }) => $withBackground ? `1px solid ${Color.DIVIDER}` : 'none', ShapeRadius.SECTION, ({
   $withBackground
@@ -32,14 +26,22 @@ export const ScaledCanvasHost = styled.div.withConfig({
   width
 }) => toCssValue(width), ({
   height
-}) => toCssValue(height));
-export const CanvasWrapper = styled.div.withConfig({
-  displayName: "CanvasWrapper",
+}) => toCssValue(height), FontFamily.MAIN);
+export const BackdropLayer = styled.div.withConfig({
+  displayName: "BackdropLayer",
+  componentId: "sc-mc9ykd-2"
+})(["position:absolute;inset:0;"]);
+export const ScrollLayer = styled.div.withConfig({
+  displayName: "ScrollLayer",
   componentId: "sc-mc9ykd-3"
-})(["position:absolute;left:50%;top:50%;width:", "px;height:", "px;display:flex;align-items:center;justify-content:center;transform:translate(-50%,-50%) scale(", ");transform-origin:center center;"], ({
-  $canvasWidth
-}) => $canvasWidth, ({
-  $canvasHeight
-}) => $canvasHeight, ({
-  $scale
-}) => $scale);
+})(["position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;"]);
+export const ContentFlow = styled.div.withConfig({
+  displayName: "ContentFlow",
+  componentId: "sc-mc9ykd-4"
+})(["position:relative;min-height:100%;width:100%;display:flex;flex-direction:column;justify-content:", ";"], ({
+  $justify
+}) => $justify);
+export const SpinnerLayer = styled.div.withConfig({
+  displayName: "SpinnerLayer",
+  componentId: "sc-mc9ykd-5"
+})(["position:absolute;inset:0;display:flex;align-items:center;justify-content:center;"]);