@pushwoosh/dumb-components 1.1.161 → 1.1.163

package/NativeRichMediaPreview/views/NativeRichMediaStoriesView/NativeRichMediaStoriesView.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { GradientOverlay, ProgressFill, ProgressRow, ProgressTrack, SubtitleText, TextBlock, TitleText } from './styles';
+import { NativeRichMediaCloseChip } from '../../components/NativeRichMediaCloseChip';
+import { NativeRichMediaCoverImg } from '../../components/NativeRichMediaCoverImg';
+import { PT, asText } from '../../helpers';
+import { ButtonRow, TemplateLayer } from '../../styles';
+export function NativeRichMediaStoriesView(props) {
+  const {
+    block,
+    activeIndex,
+    onNavigate
+  } = props;
+  const items = block.items;
+  const idx = Math.max(0, Math.min(activeIndex, items.length - 1));
+  const item = items[idx] || {};
+  return _jsxs(TemplateLayer, {
+    children: [_jsx(NativeRichMediaCoverImg, {
+      url: item.image,
+      position: "absolute",
+      inset: true,
+      backgroundColor: "#000"
+    }), _jsx(GradientOverlay, {}), _jsx(ProgressRow, {
+      "$top": PT.SAFE_TOP + 14,
+      children: items.map((_, i) => _jsxs(ProgressTrack
+      // eslint-disable-next-line react/no-array-index-key
+      , {
+        onClick: () => onNavigate(i),
+        children: [i < idx && _jsx(ProgressFill, {
+          "$full": true
+        }), i === idx && _jsx(ProgressFill, {})]
+      }, `stories-bar-${i}`))
+    }), block.showClose !== false && _jsx(NativeRichMediaCloseChip, {
+      top: PT.SAFE_TOP + 14 + 3 + 10,
+      right: 16
+    }), _jsxs(TextBlock, {
+      "$bottom": PT.SAFE_BOTTOM + 24,
+      children: [item.title && _jsx(TitleText, {
+        children: asText(item.title)
+      }), item.subtitle && _jsx(SubtitleText, {
+        children: asText(item.subtitle)
+      }), item.button && item.url && _jsx(ButtonRow, {
+        "$marginTop": 16,
+        "$borderRadius": 26,
+        "$background": "#FFF",
+        "$color": "#0F0F0F",
+        "$boxShadow": "0 6px 14px rgba(0,0,0,0.28)",
+        children: asText(item.button)
+      })]
+    })]
+  });
+}

package/NativeRichMediaPreview/views/NativeRichMediaStoriesView/index.d.ts

@@ -0,0 +1 @@
+export { NativeRichMediaStoriesView } from './NativeRichMediaStoriesView';

package/NativeRichMediaPreview/views/NativeRichMediaStoriesView/index.js

@@ -0,0 +1 @@
+export { NativeRichMediaStoriesView } from './NativeRichMediaStoriesView';

package/NativeRichMediaPreview/views/NativeRichMediaStoriesView/styles.d.ts

@@ -0,0 +1,11 @@
+export { TextBlock } from '../shared/styles';
+export declare const GradientOverlay: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ProgressRow: import("styled-components").StyledComponent<"div", any, {
+    $top: number;
+}, never>;
+export declare const ProgressTrack: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ProgressFill: import("styled-components").StyledComponent<"div", any, {
+    $full?: boolean;
+}, never>;
+export declare const TitleText: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SubtitleText: import("styled-components").StyledComponent<"div", any, {}, never>;

package/NativeRichMediaPreview/views/NativeRichMediaStoriesView/styles.js

@@ -0,0 +1,30 @@
+import styled from 'styled-components';
+export { TextBlock } from '../shared/styles';
+export const GradientOverlay = styled.div.withConfig({
+  displayName: "GradientOverlay",
+  componentId: "sc-qgnxqx-0"
+})(["position:absolute;left:0;right:0;bottom:0;top:55%;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,0.75));"]);
+export const ProgressRow = styled.div.withConfig({
+  displayName: "ProgressRow",
+  componentId: "sc-qgnxqx-1"
+})(["position:absolute;left:12px;right:12px;display:flex;gap:4px;top:", "px;"], ({
+  $top
+}) => $top);
+export const ProgressTrack = styled.div.withConfig({
+  displayName: "ProgressTrack",
+  componentId: "sc-qgnxqx-2"
+})(["flex:1;height:3px;border-radius:1.5px;background:rgba(255,255,255,0.3);overflow:hidden;cursor:pointer;"]);
+export const ProgressFill = styled.div.withConfig({
+  displayName: "ProgressFill",
+  componentId: "sc-qgnxqx-3"
+})(["height:100%;background:#FFF;width:", ";"], ({
+  $full
+}) => $full ? '100%' : '45%');
+export const TitleText = styled.div.withConfig({
+  displayName: "TitleText",
+  componentId: "sc-qgnxqx-4"
+})(["font-size:23px;font-weight:700;color:#FFF;line-height:1.25;"]);
+export const SubtitleText = styled.div.withConfig({
+  displayName: "SubtitleText",
+  componentId: "sc-qgnxqx-5"
+})(["font-size:14px;color:rgba(255,255,255,0.85);margin-top:6px;"]);

package/NativeRichMediaPreview/views/NativeRichMediaStoriesView/types.d.ts

@@ -0,0 +1,6 @@
+import type { NativeRichMediaStoriesBlock } from '../../types';
+export type NativeRichMediaStoriesViewProps = {
+    block: NativeRichMediaStoriesBlock;
+    activeIndex: number;
+    onNavigate: (index: number) => void;
+};

package/NativeRichMediaPreview/views/NativeRichMediaStoriesView/types.js

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

package/NativeRichMediaPreview/views/NativeRichMediaVideoView/NativeRichMediaVideoView.d.ts

@@ -0,0 +1,3 @@
+import { type ReactElement } from 'react';
+import type { NativeRichMediaVideoViewProps } from './types';
+export declare function NativeRichMediaVideoView(props: NativeRichMediaVideoViewProps): ReactElement;

package/NativeRichMediaPreview/views/NativeRichMediaVideoView/NativeRichMediaVideoView.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { GradientOverlay, TextBlock } from './styles';
+import { NativeRichMediaCloseChip } from '../../components/NativeRichMediaCloseChip';
+import { NativeRichMediaCoverImg } from '../../components/NativeRichMediaCoverImg';
+import { NativeRichMediaMuteChip } from '../../components/NativeRichMediaMuteChip';
+import { NativeRichMediaPtLabel } from '../../components/NativeRichMediaPtLabel';
+import { PT, asText } from '../../helpers';
+import { ButtonRow, TemplateLayer } from '../../styles';
+export function NativeRichMediaVideoView(props) {
+  const {
+    block
+  } = props;
+  return _jsxs(TemplateLayer, {
+    children: [_jsx(NativeRichMediaCoverImg, {
+      url: block.poster,
+      position: "absolute",
+      inset: true,
+      backgroundColor: "#000"
+    }), _jsx(GradientOverlay, {}), _jsxs(TextBlock, {
+      "$bottom": PT.SAFE_BOTTOM + 28,
+      children: [block.title && _jsx(NativeRichMediaPtLabel, {
+        value: block.title,
+        size: 28,
+        weight: 700,
+        fallbackColor: "#FFFFFF"
+      }), block.message && _jsx(NativeRichMediaPtLabel, {
+        value: block.message,
+        size: 16,
+        weight: 400,
+        fallbackColor: "rgba(255,255,255,0.85)",
+        align: "left",
+        marginTop: block.title ? 8 : undefined
+      }), block.button && block.action && _jsx(ButtonRow, {
+        "$marginTop": 20,
+        "$borderRadius": 14,
+        "$background": "#FFF",
+        "$color": "#0F0F0F",
+        children: asText(block.button)
+      })]
+    }), _jsx(NativeRichMediaMuteChip, {
+      muted: block.muted,
+      top: PT.SAFE_TOP + 12,
+      left: 16
+    }), block.showClose !== false && _jsx(NativeRichMediaCloseChip, {
+      top: PT.SAFE_TOP + 12,
+      right: 16
+    })]
+  });
+}

package/NativeRichMediaPreview/views/NativeRichMediaVideoView/index.d.ts

@@ -0,0 +1 @@
+export { NativeRichMediaVideoView } from './NativeRichMediaVideoView';

package/NativeRichMediaPreview/views/NativeRichMediaVideoView/index.js

@@ -0,0 +1 @@
+export { NativeRichMediaVideoView } from './NativeRichMediaVideoView';

package/NativeRichMediaPreview/views/NativeRichMediaVideoView/styles.d.ts

@@ -0,0 +1 @@
+export { GradientOverlay, TextBlock } from '../shared/styles';

package/NativeRichMediaPreview/views/NativeRichMediaVideoView/styles.js

@@ -0,0 +1 @@
+export { GradientOverlay, TextBlock } from '../shared/styles';

package/NativeRichMediaPreview/views/NativeRichMediaVideoView/types.d.ts

@@ -0,0 +1,4 @@
+import type { NativeRichMediaVideoBlock } from '../../types';
+export type NativeRichMediaVideoViewProps = {
+    block: NativeRichMediaVideoBlock;
+};

package/NativeRichMediaPreview/views/NativeRichMediaVideoView/types.js

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

package/NativeRichMediaPreview/views/index.d.ts

@@ -0,0 +1,11 @@
+export { NativeRichMediaBannerView } from './NativeRichMediaBannerView';
+export { NativeRichMediaCarouselView } from './NativeRichMediaCarouselView';
+export { NativeRichMediaFullscreenView } from './NativeRichMediaFullscreenView';
+export { NativeRichMediaInvalidView } from './NativeRichMediaInvalidView';
+export { NativeRichMediaModalView } from './NativeRichMediaModalView';
+export { NativeRichMediaPipView } from './NativeRichMediaPipView';
+export { NativeRichMediaScratchcardView } from './NativeRichMediaScratchcardView';
+export { NativeRichMediaSheetView } from './NativeRichMediaSheetView';
+export { NativeRichMediaSpinwheelView } from './NativeRichMediaSpinwheelView';
+export { NativeRichMediaStoriesView } from './NativeRichMediaStoriesView';
+export { NativeRichMediaVideoView } from './NativeRichMediaVideoView';

package/NativeRichMediaPreview/views/index.js

@@ -0,0 +1,11 @@
+export { NativeRichMediaBannerView } from './NativeRichMediaBannerView';
+export { NativeRichMediaCarouselView } from './NativeRichMediaCarouselView';
+export { NativeRichMediaFullscreenView } from './NativeRichMediaFullscreenView';
+export { NativeRichMediaInvalidView } from './NativeRichMediaInvalidView';
+export { NativeRichMediaModalView } from './NativeRichMediaModalView';
+export { NativeRichMediaPipView } from './NativeRichMediaPipView';
+export { NativeRichMediaScratchcardView } from './NativeRichMediaScratchcardView';
+export { NativeRichMediaSheetView } from './NativeRichMediaSheetView';
+export { NativeRichMediaSpinwheelView } from './NativeRichMediaSpinwheelView';
+export { NativeRichMediaStoriesView } from './NativeRichMediaStoriesView';
+export { NativeRichMediaVideoView } from './NativeRichMediaVideoView';

package/NativeRichMediaPreview/views/shared/styles.d.ts

@@ -0,0 +1,8 @@
+export declare const GradientOverlay: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const TextBlock: import("styled-components").StyledComponent<"div", any, {
+    $bottom: number;
+}, never>;
+export declare const Card: import("styled-components").StyledComponent<"div", any, {
+    $background: string;
+    $padding: string;
+}, never>;

package/NativeRichMediaPreview/views/shared/styles.js

@@ -0,0 +1,19 @@
+import styled from 'styled-components';
+export const GradientOverlay = styled.div.withConfig({
+  displayName: "GradientOverlay",
+  componentId: "sc-x5bn03-0"
+})(["position:absolute;left:0;right:0;bottom:0;top:45%;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,0.75));"]);
+export const TextBlock = styled.div.withConfig({
+  displayName: "TextBlock",
+  componentId: "sc-x5bn03-1"
+})(["position:absolute;left:24px;right:24px;bottom:", "px;"], ({
+  $bottom
+}) => $bottom);
+export const Card = styled.div.withConfig({
+  displayName: "Card",
+  componentId: "sc-x5bn03-2"
+})(["position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:337px;border-radius:24px;box-shadow:0 16px 28px rgba(0,0,0,0.28);padding:", ";background:", ";"], ({
+  $padding
+}) => $padding, ({
+  $background
+}) => $background);

package/index.d.ts

@@ -43,6 +43,8 @@ export { CodeEditor } from './CodeEditor';
 export { EnhancedInput, SearchInput } from './EnhancedInput';
 export { Chip, type ChipProps, type ChipVariant } from './Chip';
 export { RichmediaPreview, useRichmediaHtml } from './RichmediaPreview';
+export { NativeRichMediaPreview, parseNativeRichMediaConfig, NATIVE_RICH_MEDIA_DISPLAY_TYPES } from './NativeRichMediaPreview';
+export type { NativeRichMediaConfig, NativeRichMediaDisplayType, NativeRichMediaText, NativeRichMediaAction, NativeRichMediaButton, NativeRichMediaReward, NativeRichMediaModalBlock, NativeRichMediaSheetBlock, NativeRichMediaCarouselBlock, NativeRichMediaCarouselItem, NativeRichMediaStoriesBlock, NativeRichMediaStoryItem, NativeRichMediaBannerBlock, NativeRichMediaFullscreenBlock, NativeRichMediaVideoBlock, NativeRichMediaPipBlock, NativeRichMediaScratchcardBlock, NativeRichMediaScratchcardCover, NativeRichMediaSpinwheelBlock, NativeRichMediaSpinwheelSegment, NativeRichMediaPreviewProps, } from './NativeRichMediaPreview';
 export { RichMessageEditor, RichMessageViewer, type DynamicContent, } from './RichMessageEditor';
 export { FrequencyCappingEdit, FrequencyCappingReadonly, FrequencyCappingInApps, type LocalCapping, type CappingInAppBase, } from './FrequencyCapping';
 export { SendRateEdit, SendRateReadonly, type SendRateBase, type SendRateEditProps, type SendRateReadonlyProps, } from './SendRate';

package/index.js

@@ -43,6 +43,7 @@ export { CodeEditor } from './CodeEditor';
 export { EnhancedInput, SearchInput } from './EnhancedInput';
 export { Chip } from './Chip';
 export { RichmediaPreview, useRichmediaHtml } from './RichmediaPreview';
+export { NativeRichMediaPreview, parseNativeRichMediaConfig, NATIVE_RICH_MEDIA_DISPLAY_TYPES } from './NativeRichMediaPreview';
 export { RichMessageEditor, RichMessageViewer } from './RichMessageEditor';
 export { FrequencyCappingEdit, FrequencyCappingReadonly, FrequencyCappingInApps } from './FrequencyCapping';
 export { SendRateEdit, SendRateReadonly } from './SendRate';

package/package.json

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