@pushwoosh/dumb-components 2.7.2 → 2.8.1

package/PushStoriesPreview/PushStoriesPreview.d.ts

@@ -0,0 +1,5 @@
+import { type ReactElement } from 'react';
+import type { PushStoriesPreviewProps } from './types';
+/** Expanded iOS push story as `PushwooshStoriesViewController` draws it: 2:3 page, progress, scrim, button.
+ * Fills its container's width, so it fits a form column as well as the phone of a push preview. */
+export declare function PushStoriesPreview(props: PushStoriesPreviewProps): ReactElement;

package/PushStoriesPreview/PushStoriesPreview.js

@@ -0,0 +1,71 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { ImageIcon } from '@pushwoosh/kit-icons';
+import { PushStoriesPage } from './components/PushStoriesPage';
+import { PushStoriesProgress } from './components/PushStoriesProgress';
+import { clampStoryIndex, normalizeStoryDuration } from './helpers';
+import { Lang, useLang } from './polyglot';
+import { EmptyState, StoriesCanvas, StoriesFrame, TapZone } from './styles';
+/** Expanded iOS push story as `PushwooshStoriesViewController` draws it: 2:3 page, progress, scrim, button.
+ * Fills its container's width, so it fits a form column as well as the phone of a push preview. */
+export function PushStoriesPreview(props) {
+  const {
+    pages,
+    activeIndex,
+    defaultActiveIndex = 0,
+    onActiveIndexChange,
+    autoplay = false,
+    interactive = true,
+    width
+  } = props;
+  const lang = useLang();
+  const [ownIndex, setOwnIndex] = useState(defaultActiveIndex);
+  const [cycle, setCycle] = useState(0);
+  if (pages.length === 0) {
+    return _jsx(StoriesFrame, {
+      "$width": width,
+      children: _jsx(StoriesCanvas, {
+        children: _jsxs(EmptyState, {
+          children: [_jsx(ImageIcon, {
+            size: "medium",
+            view: "lined"
+          }), _jsx(Lang, {
+            message: "DUMB.PUSH_STORIES_PREVIEW.EMPTY"
+          })]
+        })
+      })
+    });
+  }
+  const index = clampStoryIndex(activeIndex ?? ownIndex, pages.length);
+  const goNext = () => {
+    const next = (index + 1) % pages.length;
+    setCycle(value => value + 1);
+    if (activeIndex === undefined) {
+      setOwnIndex(next);
+    }
+    if (next !== index) {
+      onActiveIndexChange?.(next);
+    }
+  };
+  return _jsx(StoriesFrame, {
+    "$width": width,
+    children: _jsxs(StoriesCanvas, {
+      children: [_jsx(PushStoriesPage, {
+        page: pages[index]
+      }), _jsx(PushStoriesProgress, {
+        count: pages.length,
+        activeIndex: index,
+        playing: autoplay,
+        duration: normalizeStoryDuration(pages[index].duration),
+        cycle: cycle,
+        onComplete: goNext
+      }), interactive && _jsx(TapZone, {
+        "aria-label": lang({
+          message: 'DUMB.PUSH_STORIES_PREVIEW.NEXT_PAGE'
+        }),
+        type: "button",
+        onClick: goNext
+      })]
+    })
+  });
+}

package/PushStoriesPreview/__tests__/PushStoriesPreview.test.d.ts

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

package/PushStoriesPreview/__tests__/PushStoriesPreview.test.js

@@ -0,0 +1,234 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { fireEvent, render, screen } from '@testing-library/react';
+import { hasStoryButton, normalizeStoryDuration } from '../helpers';
+import { PushStoriesPreview } from '../PushStoriesPreview';
+const pages = [{
+  image: 'https://example.com/1.jpg',
+  title: 'Welcome',
+  subtitle: 'Swipe to explore',
+  buttonTitle: 'Get started',
+  link: 'app://one'
+}, {
+  image: 'https://example.com/2.jpg',
+  title: 'Stay in the loop',
+  duration: 4
+}, {
+  image: 'https://example.com/3.jpg',
+  title: 'You are all set',
+  buttonTitle: 'Open app',
+  link: 'app://three'
+}];
+const next = () => {
+  fireEvent.click(screen.getByLabelText('Next page'));
+};
+const progressFill = index => screen.getByTestId('push-stories-progress').children[index].firstElementChild;
+describe('normalizeStoryDuration', () => {
+  it('plays a missing, zero, negative or non-finite duration for 5 seconds', () => {
+    expect(normalizeStoryDuration(undefined)).toBe(5);
+    expect(normalizeStoryDuration(0)).toBe(5);
+    expect(normalizeStoryDuration(-3)).toBe(5);
+    expect(normalizeStoryDuration(Number.NaN)).toBe(5);
+    expect(normalizeStoryDuration(Number.POSITIVE_INFINITY)).toBe(5);
+  });
+  it('keeps a valid duration and caps it at 30 seconds', () => {
+    expect(normalizeStoryDuration(1.5)).toBe(1.5);
+    expect(normalizeStoryDuration(45)).toBe(30);
+  });
+});
+describe('hasStoryButton', () => {
+  it('needs both a title and a link with a scheme, as the SDK does', () => {
+    expect(hasStoryButton({
+      buttonTitle: 'Go',
+      link: 'app://x'
+    })).toBe(true);
+    expect(hasStoryButton({
+      buttonTitle: 'Go',
+      link: 'https://example.com'
+    })).toBe(true);
+    expect(hasStoryButton({
+      buttonTitle: 'Go',
+      link: 'example.com/promo'
+    })).toBe(false);
+    expect(hasStoryButton({
+      buttonTitle: 'Go'
+    })).toBe(false);
+    expect(hasStoryButton({
+      buttonTitle: '  ',
+      link: 'app://x'
+    })).toBe(false);
+    expect(hasStoryButton({
+      link: 'app://x'
+    })).toBe(false);
+  });
+});
+describe('PushStoriesPreview', () => {
+  it('draws the empty state without pages', () => {
+    render(_jsx(PushStoriesPreview, {
+      pages: []
+    }));
+    expect(screen.getByText('Add a page to see the story preview')).toBeInTheDocument();
+    expect(screen.queryByTestId('push-stories-progress')).not.toBeInTheDocument();
+  });
+  it('draws one progress segment per page and the first page text', () => {
+    render(_jsx(PushStoriesPreview, {
+      pages: pages
+    }));
+    expect(screen.getByTestId('push-stories-progress').children).toHaveLength(3);
+    expect(screen.getByText('Welcome')).toBeInTheDocument();
+    expect(screen.getByText('Swipe to explore')).toBeInTheDocument();
+    expect(screen.getByText('Get started')).toBeInTheDocument();
+  });
+  it('keeps one segment per page and one image on screen through clicks and page list changes', () => {
+    const {
+      container,
+      rerender
+    } = render(_jsx(PushStoriesPreview, {
+      pages: pages
+    }));
+    const expectShape = count => {
+      expect(screen.getByTestId('push-stories-progress').children).toHaveLength(count);
+      expect(container.querySelectorAll('img')).toHaveLength(1);
+    };
+    for (let click = 0; click < 7; click += 1) {
+      expectShape(3);
+      next();
+    }
+    rerender(_jsx(PushStoriesPreview, {
+      pages: [...pages, {
+        image: 'https://example.com/4.jpg',
+        title: 'Fourth'
+      }]
+    }));
+    expectShape(4);
+    rerender(_jsx(PushStoriesPreview, {
+      pages: pages.slice(0, 2)
+    }));
+    expectShape(2);
+  });
+  it('hides the button of a page without a link', () => {
+    render(_jsx(PushStoriesPreview, {
+      pages: [{
+        ...pages[0],
+        link: ''
+      }]
+    }));
+    expect(screen.queryByText('Get started')).not.toBeInTheDocument();
+  });
+  it('shows the next page on every click and goes round after the last one', () => {
+    render(_jsx(PushStoriesPreview, {
+      pages: pages
+    }));
+    next();
+    expect(screen.getByText('Stay in the loop')).toBeInTheDocument();
+    expect(progressFill(0)).not.toBeNull();
+    next();
+    expect(screen.getByText('You are all set')).toBeInTheDocument();
+    next();
+    expect(screen.getByText('Welcome')).toBeInTheDocument();
+    expect(progressFill(1)).toBeNull();
+    next();
+    expect(screen.getByText('Stay in the loop')).toBeInTheDocument();
+  });
+  it('has a single click target over the whole story', () => {
+    render(_jsx(PushStoriesPreview, {
+      pages: pages
+    }));
+    expect(screen.getAllByRole('button')).toHaveLength(1);
+  });
+  it('follows the activeIndex prop and reports clicks instead of moving itself', () => {
+    const onActiveIndexChange = jest.fn();
+    const {
+      rerender
+    } = render(_jsx(PushStoriesPreview, {
+      pages: pages,
+      activeIndex: 1,
+      onActiveIndexChange: onActiveIndexChange
+    }));
+    expect(screen.getByText('Stay in the loop')).toBeInTheDocument();
+    next();
+    expect(onActiveIndexChange).toHaveBeenCalledWith(2);
+    expect(screen.getByText('Stay in the loop')).toBeInTheDocument();
+    rerender(_jsx(PushStoriesPreview, {
+      pages: pages,
+      activeIndex: 2,
+      onActiveIndexChange: onActiveIndexChange
+    }));
+    expect(screen.getByText('You are all set')).toBeInTheDocument();
+  });
+  it('clamps an activeIndex past the last page', () => {
+    render(_jsx(PushStoriesPreview, {
+      pages: pages,
+      activeIndex: 9
+    }));
+    expect(screen.getByText('You are all set')).toBeInTheDocument();
+  });
+  it('advances when the autoplay segment finishes and goes round after the last page', () => {
+    render(_jsx(PushStoriesPreview, {
+      pages: pages.slice(0, 2),
+      autoplay: true
+    }));
+    fireEvent.animationEnd(progressFill(0));
+    expect(screen.getByText('Stay in the loop')).toBeInTheDocument();
+    fireEvent.animationEnd(progressFill(1));
+    expect(screen.getByText('Welcome')).toBeInTheDocument();
+    expect(progressFill(1)).toBeNull();
+  });
+  it('fills segments up to and including the current page without autoplay', () => {
+    const {
+      container
+    } = render(_jsx(PushStoriesPreview, {
+      pages: pages
+    }));
+    const filled = () => [...screen.getByTestId('push-stories-progress').children].filter(track => track.firstElementChild).length;
+    expect(filled()).toBe(1);
+    next();
+    expect(filled()).toBe(2);
+    next();
+    expect(filled()).toBe(3);
+    next();
+    expect(filled()).toBe(1);
+    expect(container.querySelectorAll('img')).toHaveLength(1);
+  });
+  it('starts the next segment from zero when a click interrupts autoplay', () => {
+    render(_jsx(PushStoriesPreview, {
+      pages: pages,
+      autoplay: true
+    }));
+    const interrupted = progressFill(0);
+    next();
+    expect(screen.getByText('Stay in the loop')).toBeInTheDocument();
+    expect(progressFill(0)).not.toBe(interrupted);
+    expect(progressFill(1)).not.toBeNull();
+  });
+  it('replays a single page instead of moving anywhere', () => {
+    render(_jsx(PushStoriesPreview, {
+      pages: pages.slice(0, 1),
+      autoplay: true
+    }));
+    const run = progressFill(0);
+    next();
+    expect(screen.getByTestId('push-stories-progress').children).toHaveLength(1);
+    expect(screen.getByText('Welcome')).toBeInTheDocument();
+    expect(progressFill(0)).not.toBe(run);
+  });
+  it('draws a placeholder for a missing or broken image', () => {
+    const {
+      container
+    } = render(_jsx(PushStoriesPreview, {
+      pages: [{
+        title: 'No image'
+      }, pages[1]]
+    }));
+    expect(screen.getByTestId('push-stories-image-placeholder')).toBeInTheDocument();
+    next();
+    fireEvent.error(container.querySelector('img'));
+    expect(screen.getByTestId('push-stories-image-placeholder')).toBeInTheDocument();
+  });
+  it('drops the click target when not interactive', () => {
+    render(_jsx(PushStoriesPreview, {
+      pages: pages,
+      interactive: false
+    }));
+    expect(screen.queryByLabelText('Next page')).not.toBeInTheDocument();
+  });
+});

package/PushStoriesPreview/components/PushStoriesPage/PushStoriesPage.d.ts

@@ -0,0 +1,4 @@
+import { type ReactElement } from 'react';
+import type { PushStoriesPageProps } from './types';
+/** One story page: the image, the scrim and the title, subtitle and button laid over it. */
+export declare function PushStoriesPage(props: PushStoriesPageProps): ReactElement;

package/PushStoriesPreview/components/PushStoriesPage/PushStoriesPage.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import { ImageIcon } from '@pushwoosh/kit-icons';
+import { BottomArea, ImagePlaceholder, PageButton, PageButtonLabel, PageImage, PageSubtitle, PageTitle } from './styles';
+import { hasStoryButton } from '../../helpers';
+/** One story page: the image, the scrim and the title, subtitle and button laid over it. */
+export function PushStoriesPage(props) {
+  const {
+    page
+  } = props;
+  const [failedImage, setFailedImage] = useState();
+  const image = page.image?.trim();
+  const title = page.title?.trim();
+  const subtitle = page.subtitle?.trim();
+  return _jsxs(_Fragment, {
+    children: [image && failedImage !== image ? _jsx(PageImage, {
+      alt: "",
+      src: image,
+      onError: () => setFailedImage(image)
+    }) : _jsx(ImagePlaceholder, {
+      "data-testid": "push-stories-image-placeholder",
+      children: _jsx(ImageIcon, {
+        size: "medium",
+        view: "lined"
+      })
+    }), _jsxs(BottomArea, {
+      children: [title && _jsx(PageTitle, {
+        children: title
+      }), subtitle && _jsx(PageSubtitle, {
+        children: subtitle
+      }), hasStoryButton(page) && _jsx(PageButton, {
+        children: _jsx(PageButtonLabel, {
+          children: page.buttonTitle?.trim()
+        })
+      })]
+    })]
+  });
+}

package/PushStoriesPreview/components/PushStoriesPage/index.d.ts

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

package/PushStoriesPreview/components/PushStoriesPage/index.js

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

package/PushStoriesPreview/components/PushStoriesPage/styles.d.ts

@@ -0,0 +1,7 @@
+export declare const PageImage: import("styled-components").StyledComponent<"img", any, {}, never>;
+export declare const ImagePlaceholder: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const BottomArea: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const PageTitle: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const PageSubtitle: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const PageButton: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const PageButtonLabel: import("styled-components").StyledComponent<"span", any, {}, never>;

package/PushStoriesPreview/components/PushStoriesPage/styles.js

@@ -0,0 +1,32 @@
+import styled from 'styled-components';
+import { Color } from '@pushwoosh/kit-constants';
+import { PLACEHOLDER_BACKGROUND } from '../../constants';
+import { placeholderOutline, scaled } from '../../helpers';
+export const PageImage = styled.img.withConfig({
+  displayName: "PageImage",
+  componentId: "sc-1q2ujdq-0"
+})(["position:absolute;inset:0;width:100%;height:100%;object-fit:cover;"]);
+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:", ";> 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;", " ~ &:empty{background:none;}"], scaled(44), scaled(24), scaled(24), ImagePlaceholder);
+export const PageTitle = styled.div.withConfig({
+  displayName: "PageTitle",
+  componentId: "sc-1q2ujdq-3"
+})(["display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;color:#FFF;font-size:", ";font-weight:700;line-height:1.2;overflow-wrap:anywhere;"], scaled(21));
+export const PageSubtitle = styled.div.withConfig({
+  displayName: "PageSubtitle",
+  componentId: "sc-1q2ujdq-4"
+})(["display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;color:rgba(255,255,255,0.85);font-size:", ";font-weight:400;line-height:1.3;overflow-wrap:anywhere;* + &{margin-top:", ";}"], scaled(14), scaled(6));
+export const PageButton = styled.div.withConfig({
+  displayName: "PageButton",
+  componentId: "sc-1q2ujdq-5"
+})(["display:flex;align-items:center;justify-content:center;height:", ";padding:0 ", ";border-radius:", ";background:#FFF;box-shadow:0 ", " ", " rgba(0,0,0,0.28);color:#0F0F0F;font-size:", ";font-weight:600;* + &{margin-top:", ";}"], scaled(52), scaled(28), scaled(26), scaled(6), scaled(28), scaled(17), scaled(16));
+export const PageButtonLabel = styled.span.withConfig({
+  displayName: "PageButtonLabel",
+  componentId: "sc-1q2ujdq-6"
+})(["overflow:hidden;white-space:nowrap;text-overflow:ellipsis;"]);

package/PushStoriesPreview/components/PushStoriesPage/types.d.ts

@@ -0,0 +1,6 @@
+import type { PushStoriesPreviewPage } from '../../types';
+/** Props of {@link PushStoriesPage}. */
+export interface PushStoriesPageProps {
+    /** Page to draw. */
+    page: PushStoriesPreviewPage;
+}

package/PushStoriesPreview/components/PushStoriesPage/types.js

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

package/PushStoriesPreview/components/PushStoriesProgress/PushStoriesProgress.d.ts

@@ -0,0 +1,4 @@
+import { type ReactElement } from 'react';
+import type { PushStoriesProgressProps } from './types';
+/** Segmented bar over the top of the story, one segment per page. */
+export declare function PushStoriesProgress(props: PushStoriesProgressProps): ReactElement;

package/PushStoriesPreview/components/PushStoriesProgress/PushStoriesProgress.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ProgressFill, ProgressRow, ProgressTrack } from './styles';
+/** Segmented bar over the top of the story, one segment per page. */
+export function PushStoriesProgress(props) {
+  const {
+    count,
+    activeIndex,
+    playing,
+    duration,
+    cycle,
+    onComplete
+  } = props;
+  return _jsx(ProgressRow, {
+    "data-testid": "push-stories-progress",
+    children: Array.from({
+      length: count
+    }, (_, index) => _jsxs(ProgressTrack, {
+      children: [(index < activeIndex || index === activeIndex && !playing) && _jsx(ProgressFill, {}), index === activeIndex && playing && _jsx(ProgressFill, {
+        "$duration": duration,
+        onAnimationEnd: onComplete
+      }, cycle)]
+    }, index))
+  });
+}

package/PushStoriesPreview/components/PushStoriesProgress/index.d.ts

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

package/PushStoriesPreview/components/PushStoriesProgress/index.js

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

package/PushStoriesPreview/components/PushStoriesProgress/styles.d.ts

@@ -0,0 +1,5 @@
+export declare const ProgressRow: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ProgressTrack: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ProgressFill: import("styled-components").StyledComponent<"div", any, {
+    $duration?: number;
+}, never>;

package/PushStoriesPreview/components/PushStoriesProgress/styles.js

@@ -0,0 +1,19 @@
+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",
+  componentId: "sc-1p5nb36-0"
+})(["position:absolute;top:", ";left:", ";right:", ";z-index:2;display:flex;gap:", ";pointer-events:none;"], scaled(23), scaled(12), scaled(12), scaled(4));
+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;", " ~ ", " &{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;", " ~ ", " &{background:", ";}", ""], ImagePlaceholder, ProgressRow, Color.LOCKED, ({
+  $duration
+}) => $duration !== undefined && css(["animation:", " ", "s linear both;"], grow, $duration));

package/PushStoriesPreview/components/PushStoriesProgress/types.d.ts

@@ -0,0 +1,15 @@
+/** Props of {@link PushStoriesProgress}. */
+export interface PushStoriesProgressProps {
+    /** Number of pages, one segment each. */
+    count: number;
+    /** Segment of the page on screen. */
+    activeIndex: number;
+    /** Fill the active segment over `duration`; otherwise it is drawn full, so page N shows N full segments. */
+    playing: boolean;
+    /** Seconds the active segment takes to fill. */
+    duration: number;
+    /** Changes whenever playback of the active page restarts, even on the same index. */
+    cycle: number;
+    /** Called when the active segment finishes filling. */
+    onComplete: () => void;
+}

package/PushStoriesPreview/components/PushStoriesProgress/types.js

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

package/PushStoriesPreview/constants.d.ts

@@ -0,0 +1,8 @@
+/** Height ÷ width of the stories area, the iOS SDK's default `storyAspectRatio`. */
+export declare const PUSH_STORIES_ASPECT_RATIO = 1.5;
+/** Seconds a page stays on screen when its duration is missing or invalid. */
+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, var(--pw-color-divider, #EBF0F5) 0%, var(--pw-color-frozen, #F7F9FA) 100%)";

package/PushStoriesPreview/constants.js

@@ -0,0 +1,9 @@
+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. */
+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, ${Color.DIVIDER} 0%, ${Color.FROZEN} 100%)`;

package/PushStoriesPreview/helpers.d.ts

@@ -0,0 +1,9 @@
+import type { PushStoriesPreviewPage } from './types';
+/** Page duration in seconds as the iOS SDK plays it. */
+export declare function normalizeStoryDuration(duration?: number): number;
+/** Whether the iOS SDK draws the page's button: it needs a title and a link with a scheme. */
+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

@@ -0,0 +1,23 @@
+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. */
+export function normalizeStoryDuration(duration) {
+  if (typeof duration !== 'number' || !Number.isFinite(duration) || duration <= 0) {
+    return PUSH_STORIES_DEFAULT_DURATION;
+  }
+  return Math.min(duration, PUSH_STORIES_MAX_DURATION);
+}
+/** Whether the iOS SDK draws the page's button: it needs a title and a link with a scheme. */
+export function hasStoryButton(page) {
+  return !!page.buttonTitle?.trim() && URL_SCHEME.test(page.link?.trim() || '');
+}
+export function clampStoryIndex(index, length) {
+  return Math.max(0, Math.min(index, length - 1));
+}
+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/index.d.ts

@@ -0,0 +1,4 @@
+export { PushStoriesPreview } from './PushStoriesPreview';
+export { hasStoryButton, normalizeStoryDuration } from './helpers';
+export { PUSH_STORIES_ASPECT_RATIO, PUSH_STORIES_DEFAULT_DURATION, PUSH_STORIES_MAX_DURATION, } from './constants';
+export type { PushStoriesPreviewPage, PushStoriesPreviewProps } from './types';

package/PushStoriesPreview/index.js

@@ -0,0 +1,3 @@
+export { PushStoriesPreview } from './PushStoriesPreview';
+export { hasStoryButton, normalizeStoryDuration } from './helpers';
+export { PUSH_STORIES_ASPECT_RATIO, PUSH_STORIES_DEFAULT_DURATION, PUSH_STORIES_MAX_DURATION } from './constants';

package/PushStoriesPreview/polyglot/index.d.ts

@@ -0,0 +1,2 @@
+import { type PushStoriesPreviewMessages } from './types';
+export declare const Lang: import("react").FC<import("../../polyglot").LangProps<PushStoriesPreviewMessages>>, useLang: () => (props: import("../../polyglot").LangProps<PushStoriesPreviewMessages>) => string;

package/PushStoriesPreview/polyglot/index.js

@@ -0,0 +1,34 @@
+import { messages as ar } from './messages_ar';
+import { messages as bn } from './messages_bn';
+import { messages as de } from './messages_de';
+import { messages as en } from './messages_en';
+import { messages as es } from './messages_es';
+import { messages as fr } from './messages_fr';
+import { messages as he } from './messages_he';
+import { messages as hi } from './messages_hi';
+import { messages as ja } from './messages_ja';
+import { messages as ko } from './messages_ko';
+import { messages as pt } from './messages_pt';
+import { messages as ru } from './messages_ru';
+import { messages as th } from './messages_th';
+import { messages as zh } from './messages_zh';
+import { createLang } from '../../polyglot';
+export const {
+  Lang,
+  useLang
+} = createLang({
+  ar,
+  bn,
+  de,
+  en,
+  es,
+  fr,
+  he,
+  hi,
+  ja,
+  ko,
+  pt,
+  ru,
+  th,
+  zh
+});

package/PushStoriesPreview/polyglot/messages_ar.d.ts

@@ -0,0 +1,3 @@
+import { type PushStoriesPreviewMessages } from './types';
+import type { LangMessages } from '../../polyglot';
+export declare const messages: LangMessages<PushStoriesPreviewMessages>;

package/PushStoriesPreview/polyglot/messages_ar.js

@@ -0,0 +1,4 @@
+export const messages = {
+  'DUMB.PUSH_STORIES_PREVIEW.EMPTY': 'أضف صفحة لعرض معاينة القصة',
+  'DUMB.PUSH_STORIES_PREVIEW.NEXT_PAGE': 'الصفحة التالية'
+};

package/PushStoriesPreview/polyglot/messages_bn.d.ts

@@ -0,0 +1,3 @@
+import { type PushStoriesPreviewMessages } from './types';
+import type { LangMessages } from '../../polyglot';
+export declare const messages: LangMessages<PushStoriesPreviewMessages>;

package/PushStoriesPreview/polyglot/messages_bn.js

@@ -0,0 +1,4 @@
+export const messages = {
+  'DUMB.PUSH_STORIES_PREVIEW.EMPTY': 'স্টোরির প্রিভিউ দেখতে একটি পেজ যোগ করুন',
+  'DUMB.PUSH_STORIES_PREVIEW.NEXT_PAGE': 'পরের পেজ'
+};

package/PushStoriesPreview/polyglot/messages_de.d.ts

@@ -0,0 +1,3 @@
+import { type PushStoriesPreviewMessages } from './types';
+import type { LangMessages } from '../../polyglot';
+export declare const messages: LangMessages<PushStoriesPreviewMessages>;

package/PushStoriesPreview/polyglot/messages_de.js

@@ -0,0 +1,4 @@
+export const messages = {
+  'DUMB.PUSH_STORIES_PREVIEW.EMPTY': 'Fügen Sie eine Seite hinzu, um die Story-Vorschau zu sehen',
+  'DUMB.PUSH_STORIES_PREVIEW.NEXT_PAGE': 'Nächste Seite'
+};

package/PushStoriesPreview/polyglot/messages_en.d.ts

@@ -0,0 +1,3 @@
+import { type PushStoriesPreviewMessages } from './types';
+import type { LangMessages } from '../../polyglot';
+export declare const messages: LangMessages<PushStoriesPreviewMessages>;

package/PushStoriesPreview/polyglot/messages_en.js

@@ -0,0 +1,4 @@
+export const messages = {
+  'DUMB.PUSH_STORIES_PREVIEW.EMPTY': 'Add a page to see the story preview',
+  'DUMB.PUSH_STORIES_PREVIEW.NEXT_PAGE': 'Next page'
+};

package/PushStoriesPreview/polyglot/messages_es.d.ts

@@ -0,0 +1,3 @@
+import { type PushStoriesPreviewMessages } from './types';
+import type { LangMessages } from '../../polyglot';
+export declare const messages: LangMessages<PushStoriesPreviewMessages>;

package/PushStoriesPreview/polyglot/messages_es.js

@@ -0,0 +1,4 @@
+export const messages = {
+  'DUMB.PUSH_STORIES_PREVIEW.EMPTY': 'Añade una página para ver la vista previa de la historia',
+  'DUMB.PUSH_STORIES_PREVIEW.NEXT_PAGE': 'Página siguiente'
+};

package/PushStoriesPreview/polyglot/messages_fr.d.ts

@@ -0,0 +1,3 @@
+import { type PushStoriesPreviewMessages } from './types';
+import type { LangMessages } from '../../polyglot';
+export declare const messages: LangMessages<PushStoriesPreviewMessages>;

package/PushStoriesPreview/polyglot/messages_fr.js

@@ -0,0 +1,4 @@
+export const messages = {
+  'DUMB.PUSH_STORIES_PREVIEW.EMPTY': 'Ajoutez une page pour voir l’aperçu de la story',
+  'DUMB.PUSH_STORIES_PREVIEW.NEXT_PAGE': 'Page suivante'
+};

package/PushStoriesPreview/polyglot/messages_he.d.ts

@@ -0,0 +1,3 @@
+import { type PushStoriesPreviewMessages } from './types';
+import type { LangMessages } from '../../polyglot';
+export declare const messages: LangMessages<PushStoriesPreviewMessages>;

package/PushStoriesPreview/polyglot/messages_he.js

@@ -0,0 +1,4 @@
+export const messages = {
+  'DUMB.PUSH_STORIES_PREVIEW.EMPTY': 'הוסיפו עמוד כדי לראות תצוגה מקדימה של הסטורי',
+  'DUMB.PUSH_STORIES_PREVIEW.NEXT_PAGE': 'העמוד הבא'
+};

package/PushStoriesPreview/polyglot/messages_hi.d.ts

@@ -0,0 +1,3 @@
+import { type PushStoriesPreviewMessages } from './types';
+import type { LangMessages } from '../../polyglot';
+export declare const messages: LangMessages<PushStoriesPreviewMessages>;

package/PushStoriesPreview/polyglot/messages_hi.js

@@ -0,0 +1,4 @@
+export const messages = {
+  'DUMB.PUSH_STORIES_PREVIEW.EMPTY': 'स्टोरी का प्रीव्यू देखने के लिए एक पेज जोड़ें',
+  'DUMB.PUSH_STORIES_PREVIEW.NEXT_PAGE': 'अगला पेज'
+};

package/PushStoriesPreview/polyglot/messages_ja.d.ts

@@ -0,0 +1,3 @@
+import { type PushStoriesPreviewMessages } from './types';
+import type { LangMessages } from '../../polyglot';
+export declare const messages: LangMessages<PushStoriesPreviewMessages>;

package/PushStoriesPreview/polyglot/messages_ja.js

@@ -0,0 +1,4 @@
+export const messages = {
+  'DUMB.PUSH_STORIES_PREVIEW.EMPTY': 'ページを追加するとストーリーのプレビューが表示されます',
+  'DUMB.PUSH_STORIES_PREVIEW.NEXT_PAGE': '次のページ'
+};

package/PushStoriesPreview/polyglot/messages_ko.d.ts

@@ -0,0 +1,3 @@
+import { type PushStoriesPreviewMessages } from './types';
+import type { LangMessages } from '../../polyglot';
+export declare const messages: LangMessages<PushStoriesPreviewMessages>;

package/PushStoriesPreview/polyglot/messages_ko.js

@@ -0,0 +1,4 @@
+export const messages = {
+  'DUMB.PUSH_STORIES_PREVIEW.EMPTY': '페이지를 추가하면 스토리 미리보기가 표시됩니다',
+  'DUMB.PUSH_STORIES_PREVIEW.NEXT_PAGE': '다음 페이지'
+};

package/PushStoriesPreview/polyglot/messages_pt.d.ts

@@ -0,0 +1,3 @@
+import { type PushStoriesPreviewMessages } from './types';
+import type { LangMessages } from '../../polyglot';
+export declare const messages: LangMessages<PushStoriesPreviewMessages>;

package/PushStoriesPreview/polyglot/messages_pt.js

@@ -0,0 +1,4 @@
+export const messages = {
+  'DUMB.PUSH_STORIES_PREVIEW.EMPTY': 'Adicione uma página para ver a pré-visualização da história',
+  'DUMB.PUSH_STORIES_PREVIEW.NEXT_PAGE': 'Próxima página'
+};

package/PushStoriesPreview/polyglot/messages_ru.d.ts

@@ -0,0 +1,3 @@
+import { type PushStoriesPreviewMessages } from './types';
+import type { LangMessages } from '../../polyglot';
+export declare const messages: LangMessages<PushStoriesPreviewMessages>;

package/PushStoriesPreview/polyglot/messages_ru.js

@@ -0,0 +1,4 @@
+export const messages = {
+  'DUMB.PUSH_STORIES_PREVIEW.EMPTY': 'Добавьте страницу, чтобы увидеть превью сториз',
+  'DUMB.PUSH_STORIES_PREVIEW.NEXT_PAGE': 'Следующая страница'
+};

package/PushStoriesPreview/polyglot/messages_th.d.ts

@@ -0,0 +1,3 @@
+import { type PushStoriesPreviewMessages } from './types';
+import type { LangMessages } from '../../polyglot';
+export declare const messages: LangMessages<PushStoriesPreviewMessages>;

package/PushStoriesPreview/polyglot/messages_th.js

@@ -0,0 +1,4 @@
+export const messages = {
+  'DUMB.PUSH_STORIES_PREVIEW.EMPTY': 'เพิ่มหน้าเพื่อดูตัวอย่างสตอรี่',
+  'DUMB.PUSH_STORIES_PREVIEW.NEXT_PAGE': 'หน้าถัดไป'
+};

package/PushStoriesPreview/polyglot/messages_zh.d.ts

@@ -0,0 +1,3 @@
+import { type PushStoriesPreviewMessages } from './types';
+import type { LangMessages } from '../../polyglot';
+export declare const messages: LangMessages<PushStoriesPreviewMessages>;

package/PushStoriesPreview/polyglot/messages_zh.js

@@ -0,0 +1,4 @@
+export const messages = {
+  'DUMB.PUSH_STORIES_PREVIEW.EMPTY': '添加页面以查看快拍预览',
+  'DUMB.PUSH_STORIES_PREVIEW.NEXT_PAGE': '下一页'
+};

package/PushStoriesPreview/polyglot/types.d.ts

@@ -0,0 +1,5 @@
+import type { NoParams } from '../../polyglot';
+export type PushStoriesPreviewMessages = {
+    'DUMB.PUSH_STORIES_PREVIEW.EMPTY': NoParams;
+    'DUMB.PUSH_STORIES_PREVIEW.NEXT_PAGE': NoParams;
+};

package/PushStoriesPreview/polyglot/types.js

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

package/PushStoriesPreview/styles.d.ts

@@ -0,0 +1,6 @@
+export declare const StoriesFrame: import("styled-components").StyledComponent<"div", any, {
+    $width?: string | number;
+}, never>;
+export declare const StoriesCanvas: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const TapZone: import("styled-components").StyledComponent<"button", any, {}, never>;
+export declare const EmptyState: import("styled-components").StyledComponent<"div", any, {}, never>;

package/PushStoriesPreview/styles.js

@@ -0,0 +1,23 @@
+import styled from 'styled-components';
+import { Color, FontFamily } from '@pushwoosh/kit-constants';
+import { toCssValue } from '@pushwoosh/kit-helpers';
+import { PLACEHOLDER_BACKGROUND, PUSH_STORIES_ASPECT_RATIO } from './constants';
+import { placeholderOutline, scaled } from './helpers';
+export const StoriesFrame = styled.div.withConfig({
+  displayName: "StoriesFrame",
+  componentId: "sc-udrlhm-0"
+})(["position:relative;container-type:inline-size;width:", ";aspect-ratio:1 / ", ";font-family:", ";user-select:none;"], ({
+  $width
+}) => $width ? toCssValue($width) : '100%', PUSH_STORIES_ASPECT_RATIO, FontFamily.MAIN);
+export const StoriesCanvas = styled.div.withConfig({
+  displayName: "StoriesCanvas",
+  componentId: "sc-udrlhm-1"
+})(["position:absolute;inset:0;overflow:hidden;border-radius:", ";background:#000;isolation:isolate;"], scaled(24));
+export const TapZone = styled.button.withConfig({
+  displayName: "TapZone",
+  componentId: "sc-udrlhm-2"
+})(["position:absolute;inset:0;z-index:1;padding:0;border:none;background:transparent;cursor:pointer;&:focus-visible{outline:none;box-shadow:inset 0 0 0 2px rgba(255,255,255,0.6);}"]);
+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:", ";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/PushStoriesPreview/types.d.ts

@@ -0,0 +1,32 @@
+/** One full-screen page of an iOS push story, in the shape the push preset form edits. */
+export interface PushStoriesPreviewPage {
+    /** Full-bleed image URL; an empty or broken one is drawn as a placeholder. */
+    image?: string;
+    /** Seconds before the page auto-advances; clamped to 30, non-positive falls back to 5. */
+    duration?: number;
+    /** Title over the bottom of the page, two lines at most. */
+    title?: string;
+    /** Subtitle under the title, two lines at most. */
+    subtitle?: string;
+    /** Call-to-action text; the button shows only together with a `link` that has a scheme. */
+    buttonTitle?: string;
+    /** Deep link the button opens on the device. */
+    link?: string;
+}
+/** Props of {@link PushStoriesPreview}. */
+export interface PushStoriesPreviewProps {
+    /** Pages in playback order; an empty list draws the empty state. */
+    pages: PushStoriesPreviewPage[];
+    /** Page to show; pass it to control the preview, e.g. to follow the page being edited. */
+    activeIndex?: number;
+    /** Page shown first when `activeIndex` is not controlled (default 0). */
+    defaultActiveIndex?: number;
+    /** Called when a click or autoplay moves to another page. */
+    onActiveIndexChange?: (index: number) => void;
+    /** Advance pages by their `duration`, animating the progress bar, round and round (default false). */
+    autoplay?: boolean;
+    /** A click anywhere on the story shows the next page, after the last one the first (default true). */
+    interactive?: boolean;
+    /** CSS width; the height follows the device's 2:3 stories ratio (default 100%). */
+    width?: string | number;
+}

package/PushStoriesPreview/types.js

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

package/index.d.ts

@@ -34,6 +34,7 @@ export { Link, type LinkPropsWithoutAs, type LinkPropsWithAsTag, type LinkPropsW
 export { StatisticCard } from './StatisticCard';
 export { EmailTemplatePreview, NoEmailTemplatePreview, replaceLocalization, replacePlaceholders, matchClickMapItems, decorateClickMap, CLICK_MAP_BADGE_ATTRIBUTE, type EmailClickMapItem, type EmailClickMapPlacement, type EmailClickMapProps, type PreviewIframeProps, } from './EmailTemplatePreview';
 export { PushPreview } from './PushPreview';
+export { PushStoriesPreview, hasStoryButton, normalizeStoryDuration, PUSH_STORIES_ASPECT_RATIO, PUSH_STORIES_DEFAULT_DURATION, PUSH_STORIES_MAX_DURATION, type PushStoriesPreviewPage, type PushStoriesPreviewProps, } from './PushStoriesPreview';
 export { InboxPreview, resolveInboxLayout, MAX_CAROUSEL_SLIDES, type InboxLayoutType, type InboxPreviewPlatform, type InboxPreviewContent, type InboxPreviewProps, type InboxPreviewSlide, } from './InboxPreview';
 export { WhatsAppPreview } from './WhatsAppPreview';
 export type { WhatsAppAttachment, WhatsAppAttachmentKind, WhatsAppMessage, WhatsAppPreviewProps, } from './WhatsAppPreview';

package/index.js

@@ -34,6 +34,7 @@ export { Link } from './Link';
 export { StatisticCard } from './StatisticCard';
 export { EmailTemplatePreview, NoEmailTemplatePreview, replaceLocalization, replacePlaceholders, matchClickMapItems, decorateClickMap, CLICK_MAP_BADGE_ATTRIBUTE } from './EmailTemplatePreview';
 export { PushPreview } from './PushPreview';
+export { PushStoriesPreview, hasStoryButton, normalizeStoryDuration, PUSH_STORIES_ASPECT_RATIO, PUSH_STORIES_DEFAULT_DURATION, PUSH_STORIES_MAX_DURATION } from './PushStoriesPreview';
 export { InboxPreview, resolveInboxLayout, MAX_CAROUSEL_SLIDES } from './InboxPreview';
 export { WhatsAppPreview } from './WhatsAppPreview';
 export { Toast, ToastProvider, useToast } from './Toast';

package/package.json

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