@inappstory/react-sdk 0.2.4 → 0.3.0

package/dist/types/appearance-manager/appearanceCommon.d.ts

@@ -1,21 +1,23 @@
-export type CloseButtonPosition = "left" | "right"
+export declare enum CloseButtonPosition {
+    LEFT = "left",
+    RIGHT = "right"
+}
 
-export type AppearanceCommonOptions = {
-    hasFavorite?: boolean;
-    hasLike?: boolean;
-    hasShare?: boolean;
-    closeButtonPosition?: CloseButtonPosition;
-    loader?: {
+export type AppearanceCommonOptions = RecursivePartial<{
+    hasFavorite: boolean;
+    hasLike: boolean;
+    hasShare: boolean;
+    closeButtonPosition: CloseButtonPosition | "left" | "right";
+    loader: {
         default: {
-            color: Optional<string>;
-            accentColor: Optional<string>;
+            color: string;
+            accentColor: string;
         };
-        custom: Optional<string>;
+        custom: string;
     };
-    closeButton?: {
+    closeButton: {
         svgSrc: {
             baseState: string;
         };
     };
-    forceDesktopMode?: boolean;
-};
+}>;

package/dist/types/appearance-manager/gameReader.d.ts

@@ -0,0 +1,30 @@
+
+import { CloseButtonPosition } from "./appearanceCommon";
+
+export type GameReaderOptions = RecursivePartial<{
+    loader: {
+        default: {
+            color: string;
+            accentColor: string;
+        };
+        custom: string;
+    };
+
+    closeButtonPosition: CloseButtonPosition | "left" | "right";
+
+    closeButton: {
+        svgSrc: {
+            baseState: string;
+        };
+    };
+
+    backdropColor: string;
+
+    game: {
+        backdropColor: string;
+    };
+}>;
+
+export type OpenGameOptions = Partial<{
+    demoMode: boolean;
+}>;

package/dist/types/appearance-manager/goodsWidget.d.ts

@@ -0,0 +1,43 @@
+export type Goods = Partial<{
+    imgSrc: string;
+    title: string;
+    subTitle: string;
+    price: string;
+    oldPrice: string;
+    sku: string;
+    rawData: any;
+}>;
+
+export type GoodsWidgetOptions = RecursivePartial<{
+    goodsList: GoodsListOptions;
+    goodsCard: GoodsCardOptions;
+    loader: {
+        default: {
+            color: string;
+            accentColor: string;
+        };
+        custom: string;
+    };
+    openGoodsWidgetHandler: (goodsList: Goods[]) => Promise<Goods[]>;
+    getCardHtml?: (goods: Goods, index: number) => string;
+    itemClickHandler?: (goods: Goods) => void;
+}>;
+
+export type GoodsCardOptions = Partial<{
+    mainTextColor: string;
+    oldPriceTextColor: string;
+    imageBackgroundColor: string;
+    imageCornerRadius: number;
+    titleFont: string;
+    subtitleFont: string;
+    priceFont: string;
+    oldPriceFont: string;
+}>;
+
+export type GoodsListOptions = Partial<{
+    closeBackgroundColor: string;
+    closeImage: string;
+    substrateHeight: number;
+    substrateColor: string;
+    dimColor: string;
+}>;

package/dist/types/appearance-manager/index.d.ts

@@ -1,8 +1,5 @@
 export * from "./appearanceCommon"
-export * from "./AppearanceManager"
-export * from "./AppearanceManager.h"
 export * from "./gameReader"
 export * from "./goodsWidget"
 export * from "./storiesList"
-export * from "./storyFavoriteReader"
 export * from "./storyReader"

package/dist/types/appearance-manager/overrideByMediaQuery.d.ts

@@ -0,0 +1,18 @@
+import { AppearanceCommonOptions } from "./appearanceCommon";
+export { GameReaderOptions } from "./gameReader";
+export { GoodsWidgetOptions } from "./goodsWidget";
+export { StoriesListOptions } from "./storiesList";
+export { StoryReaderOptions } from "./storyReader";
+
+export type OverrideByMediaQuery<
+    Options extends
+        | AppearanceCommonOptions
+        | StoriesListOptions
+        | StoryReaderOptions
+        | GoodsWidgetOptions
+        | GameReaderOptions = any
+> = Partial<{
+    viewportMinSize: number | "sm" | "md" | "lg" | "xl";
+    mediaQuery: null | string;
+    options: Options;
+}>;

package/dist/types/appearance-manager/storiesList.d.ts

@@ -1,128 +1,146 @@
-/// <reference path="./utils.d.ts" />
+export declare enum StoriesListSliderAlign {
+    CENTER = "center",
+    LEFT = "left",
+    RIGHT = "right"
+}
 
-export type StoriesListSliderAlign = "center" | "left" | "right"
+export declare enum StoriesListCardViewVariant {
+    CIRCLE = "circle",
+    QUAD = "quad",
+    RECTANGLE = "rectangle"
+}
 
-export type StoriesListOptions = Partial<{
-    direction: "horizontal" | "vertical";
+export declare enum StoriesListCardTitleTextAlign {
+    LEFT = "left",
+    CENTER = "center",
+    RIGHT = "right"
+}
+
+export declare enum StoriesListCardTitlePosition {
+    CARD_INSIDE_BOTTOM = "cardInsideBottom",
+    CARD_OUTSIDE_TOP = "cardOutsideTop",
+    CARD_OUTSIDE_BOTTOM = "cardOutsideBottom"
+}
+
+export declare enum StoriesListCardCoverQuality {
+    Medium = "medium",
+    High = "high"
+}
+
+export declare enum StoriesListDirection {
+    COLUMN = "vertical",
+    ROW = "horizontal"
+}
+
+export type StoriesListOptions = RecursivePartial<{
+    direction: StoriesListDirection | "vertical" | "horizontal";
     card: StoriesListCardOptions;
     favoriteCard: StoriesListFavoriteCardOptions;
-    layout: Partial<{
+    layout: {
         height: number | string;
         backgroundColor: string;
-        sliderAlign: StoriesListSliderAlign;
-    }>;
+        sliderAlign: StoriesListSliderAlign | "left" | "center" | "right";
+    };
     sidePadding: number;
     topPadding: number;
     bottomPadding: number;
     bottomMargin: number;
-    navigation: Partial<{
+    navigation: {
         speed: number;
         showControls: boolean;
         controlsSize: number;
         controlsBackgroundColor: string;
         controlsColor: string;
-    }>;
-    handleStoryLinkClick: (payload: StoriesListClickEvent) => void;
-    handleStartLoad: (loaderContainer: HTMLElement) => void;
-    handleStopLoad: (loaderContainer: HTMLElement) => void;
+    };
     ugcCard: StoriesListUgcCardOptions;
 }>;
-export type StoriesListCardViewVariant = "circle" | "quad" | "rectangle"
-
-export type StoriesListCardTitleTextAlign = "left" | "center" | "right"
 
-export type StoriesListCardTitlePosition = "cardInsideBottom" | "cardOutsideTop" | "cardOutsideBottom"
-
-export type StoriesListCardCoverQuality = "medium" | "high"
-
-export type StoriesListCardOptions = Partial<{
-    title: Partial<{
+export type StoriesListCardOptions = RecursivePartial<{
+    title: {
         color: string;
         padding: string | number;
         font: string;
         display: boolean;
-        textAlign: StoriesListCardTitleTextAlign;
-        position: StoriesListCardTitlePosition;
+        textAlign: StoriesListCardTitleTextAlign | "left" | "center" | "right";
+        position: StoriesListCardTitlePosition | "cardInsideBottom" | "cardOutsideTop" | "cardOutsideBottom";
         lineClamp: number;
-    }>;
+    };
     gap: number;
     height: number;
-    aspectRatio: Optional<number>;
-    coverQuality: StoriesListCardCoverQuality;
+    aspectRatio: number;
+    coverQuality: StoriesListCardCoverQuality | "medium" | "high";
     coverLazyLoading: boolean;
-    variant: StoriesListCardViewVariant;
-    border: Partial<{
+    variant: StoriesListCardViewVariant | "circle" | "quad" | "rectangle";
+    border: {
         radius: number;
         color: string;
         width: number;
         gap: number;
-        gradient: Optional<string>;
-    }>;
-    boxShadow: Optional<string>;
-    dropShadow: Optional<string>;
-    opacity: Optional<number>;
-    mask: Partial<{
-        color: Optional<string>;
-        linearGradient?: Optional<{
+        gradient: string;
+    };
+    boxShadow: string;
+    dropShadow: string;
+    opacity: number;
+    mask: {
+        color: string;
+        linearGradient: {
             direction: string;
             points: Array<string>;
-        }>;
-    }>;
-    svgMask: Partial<Optional<{
-        cardMask: Optional<string>;
+        };
+    };
+    svgMask: {
+        cardMask: string;
         overlayMask: Array<{
-            mask: Optional<string>;
-            background: Optional<string>;
-        }>;
-    }>>;
-    opened: Partial<{
-        border: Partial<{
-            radius: Optional<number>;
-            color: Optional<string>;
-            width: Optional<number>;
-            gap: Optional<number>;
-            gradient: Optional<string>;
+            mask: string;
+            background: string;
         }>;
-        boxShadow: Optional<string>;
-        dropShadow: Optional<string>;
-        opacity: Optional<number>;
+    };
+    opened: {
+        border: {
+            radius: number;
+            color: string;
+            width: number;
+            gap: number;
+            gradient: string;
+        };
+        boxShadow: string;
+        dropShadow: string;
+        opacity: number;
         mask: {
-            color: Optional<string>;
-            linearGradient: Optional<{
+            color: string;
+            linearGradient: {
                 direction: string;
                 points: Array<string>;
+            };
+        };
+        svgMask: {
+            cardMask: string;
+            overlayMask: Array<{
+                mask: string;
+                background: string;
             }>;
         };
-        svgMask: Optional<{
-            cardMask: Optional<string>;
-            overlayMask: Optional<Array<{
-                mask: Optional<string>;
-                background: Optional<string>;
-            }>>;
-        }>;
-    }>;
-}>;
-export type StoriesListFavoriteCardOptions = Partial<StoriesListCardOptions & {
-    title: StoriesListCardOptions["title"] & {
-        content: string;
     };
 }>;
 
-export type StoriesListUgcCardOptions = Partial<Omit<StoriesListCardOptions, "opened"> & {
-    title: Partial<StoriesListCardOptions["title"]> & {
-        content?: Option<string>;
-    };
-    image: {
-        svgSrc: {
-            baseState: string;
+export type StoriesListFavoriteCardOptions = RecursivePartial<
+    StoriesListCardOptions & {
+        title: StoriesListCardOptions["title"] & {
+            content: string;
         };
-    };
-    backgroundColor: string;
-}>;
-export type StoriesListClickEvent = {
-    id: number;
-    index: number;
-    isDeeplink: boolean;
-    url: string | undefined;
-};
-export type StoriesListEvents = "startLoad" | "endLoad"
+    }
+>;
+
+export type StoriesListUgcCardOptions = RecursivePartial<
+    Omit<StoriesListCardOptions, "opened"> & {
+        title: StoriesListCardOptions["title"] & {
+            content: Option<string>;
+        };
+        image: {
+            svgSrc: {
+                baseState: string;
+            };
+        };
+        backgroundColor: string;
+    }
+>;

package/dist/types/appearance-manager/storyReader.ts

@@ -1,84 +1,92 @@
 import { CloseButtonPosition } from "./appearanceCommon";
 import { GameReaderOptions } from "./gameReader";
-/// <reference path="../global.d.ts" />
 
-export type StoryReaderSwipeStyle =  "flat" | "cover" | "cube"
+export declare enum StoryReaderSwipeStyle {
+    FLAT = "flat",
+    COVER = "cover",
+    CUBE = "cube"
+}
 
-export type SharePanelTargets = "vk" | "ok" | "facebook" | "twitter" | "linkedin" | "telegram" 
+export declare enum SharePanelTargets {
+    VK = "vk",
+    OK = "ok",
+    FACEBOOK = "facebook",
+    X = "twitter",
+    LINKEDIN = "linkedin",
+    TELEGRAM = "telegram"
+}
 
-export type StoryReaderOptions = {
-    gameReaderOptions: GameReaderOptions,
-    closeButtonPosition?: CloseButtonPosition,
-    scrollStyle: StoryReaderSwipeStyle,
-    timelineBlockTopOffset: Nullable<number>,
-    actionPanelBottomOffset: Nullable<number>,
-    borderRadius: Optional<number>
-    loader?: {
+export type StoryReaderOptions = RecursivePartial<{
+    gameReaderOptions: GameReaderOptions;
+    closeButtonPosition: CloseButtonPosition | "left" | "right";
+    scrollStyle: StoryReaderSwipeStyle | "flat" | "cover" | "cube";
+    timelineBlockTopOffset: Nullable<number>;
+    actionPanelBottomOffset: Nullable<number>;
+    borderRadius: number;
+    loader: {
         default: {
-            color: Optional<string>,
-            accentColor: Optional<string>,
-        },
-        custom: Optional<string>
-    },
-    recycleStoriesList?: boolean,
-    closeOnLastSlideByTimer?: boolean,
+            color: string;
+            accentColor: string;
+        };
+        custom: string;
+    };
+    recycleStoriesList: boolean;
+    closeOnLastSlideByTimer: boolean;
     sharePanel: {
-        targets: Array<SharePanelTargets>
-        copyButton?: {
+        targets: SharePanelTargets[] | Array<"vk" | "ok" | "facebook" | "twitter" | "linkedin" | "telegram">;
+        copyButton: {
             svgSrc: {
-                baseState: string,
-            }
-        },
-        downloadButton?: {
+                baseState: string;
+            };
+        };
+        downloadButton: {
             svgSrc: {
-                baseState: string,
-            }
-        }
-    },
-    commonBackdrop?: {
-        color: Option<string>, // colorValue
-        backdropFilter: Option<string> // null or blur(3px)
-    },
-    slideBackdrop?: {
-        opacity: number, // .56
-        blur: number, // 30
-        linearGradientOverlay: Array<string> // ["rgba(0, 0, 0, 0.1) 0%", "rgba(0, 0, 0, 0.9) 100%"]
-    },
-    faviconApiUrl: string,
-    closeButton?: {
+                baseState: string;
+            };
+        };
+    };
+    commonBackdrop: {
+        color: string;
+        backdropFilter: string;
+    };
+    slideBackdrop: {
+        opacity: number;
+        blur: number;
+        linearGradientOverlay: string[];
+    };
+    faviconApiUrl: string;
+    closeButton: {
         svgSrc: {
-            baseState: string
-        }
-    },
+            baseState: string;
+        };
+    };
     likeButton: {
         svgSrc: {
-            baseState: string,
-            activeState: string,
-        }
-    },
+            baseState: string;
+            activeState: string;
+        };
+    };
     dislikeButton: {
         svgSrc: {
-            baseState: string,
-            activeState: string,
-        }
-    },
+            baseState: string;
+            activeState: string;
+        };
+    };
     favoriteButton: {
         svgSrc: {
-            baseState: string,
-            activeState: string,
-        }
-    },
+            baseState: string;
+            activeState: string;
+        };
+    };
     muteButton: {
         svgSrc: {
-            baseState: string,
-            activeState: string,
-        }
-    },
+            baseState: string;
+            activeState: string;
+        };
+    };
     shareButton: {
         svgSrc: {
-            baseState: string,
-        }
-    }
-
-
-};
+            baseState: string;
+        };
+    };
+}>;

package/dist/types/global.d.ts

@@ -0,0 +1,11 @@
+declare type RecursivePartial<T> = {
+    [P in keyof T]?: T[P] extends object ? RecursivePartial<T[P]> | null : T[P] | null;
+};
+
+declare type Nullable<T> = T | null;
+declare type Optional<T> = T | null;
+declare type Option<T> = T | null;
+
+declare type Dict<K extends string | number | symbol = string, T = any> = Record<K, T>
+
+declare type Brand<T, B extends string> = T & { readonly __brand: B }

package/dist/types/ias-container/IasContainer.d.ts

@@ -0,0 +1,10 @@
+import { StoryManager, StoryManagerConfig } from "..";
+import { StoryManagerEventsProps } from "./storyManagerEventsProps";
+import { AppearanceOptionsProps } from "./appearanceOptionsProps";
+
+interface IASContainerProps extends StoryManagerEventsProps, AppearanceOptionsProps {
+    config: StoryManagerConfig;
+    children?: React.ReactNode;
+}
+
+export declare const IASContainer: (props: IASContainerProps) => JSX.Element;

package/dist/types/ias-container/appearanceOptionsProps.d.ts

@@ -0,0 +1,17 @@
+import {
+    AppearanceCommonOptions,
+    GameReaderOptions,
+    GoodsWidgetOptions,
+    StoryReaderOptions
+} from "../appearance-manager";
+
+export interface AppearanceOptionsProps {
+    commonOptions?: AppearanceCommonOptions;
+    storyReaderOptions?: StoryReaderOptions;
+    gameReaderOptions?: GameReaderOptions;
+    goodsWidgetOptions?: GoodsWidgetOptions;
+    commonOptionsOverrideByMediaQuery?: OverrideByMediaQuery<AppearanceCommonOptions>[];
+    storyReaderOptionsOverrideByMediaQuery?: OverrideByMediaQuery<StoryReaderOptions>[];
+    gameReaderOptionsOverrideByMediaQuery?: OverrideByMediaQuery<GameReaderOptions>[];
+    goodsWidgetOptionsOverrideByMediaQuery?: OverrideByMediaQuery<GoodsWidgetOptions>[];
+}

package/dist/types/ias-container/index.d.ts

@@ -1 +1 @@
-export { IASContainer } from './ias-container';
+export { IASContainer } from './IasContainer';

package/dist/types/ias-container/publicEvents.d.ts

@@ -0,0 +1,86 @@
+interface BaseEvent {
+    id: number;
+    title?: string;
+    tags: Array<string>;
+    slidesCount?: number;
+    feed?: string;
+    source?: string;
+    filter: Record<string, unknown>;
+    ugcPayload: Record<string, unknown>;
+    defaultListLength: number;
+    favoriteListLength: number;
+}
+
+export declare enum CloseAction {
+    closeReaderByCloseBtn = "closeReaderByCloseBtn", // closed by btn with cross icon in StoryReader
+    closeReaderByEscBtn = "closeReaderByEscBtn", // closed by ESC on keyboard (desktop only)
+    swipeDown = "swipeDown", // closed by swipe down StoryReader (mobile only)
+    swipe = "swipe", // closed by swipe on next story (mobile only)
+    lastSlideClick = "lastSlideClick", // closed by first (move backward) or last (move forward) slide in story
+    auto = "auto", // closed by auto transition (by timer) on next story
+    externalCloseReader = "externalCloseReader" // closed by public API method StoryManager.closeStoryReader
+}
+
+export interface ClickOnStoryEvent extends BaseEvent {
+    index: number;
+    isDeeplink: boolean;
+    url?: string;
+}
+
+export interface ShowStoryEvent extends BaseEvent {}
+
+export interface CloseStoryEvent extends BaseEvent {
+    action: CloseAction;
+}
+
+export interface ShowSlideEvent extends BaseEvent {
+    index: number;
+    payload: string;
+}
+
+export interface ClickOnButtonEvent extends BaseEvent {
+    index: number;
+    url: string;
+}
+
+export interface LikeStoryEvent extends BaseEvent {
+    value: boolean;
+}
+
+export interface DislikeStoryEvent extends BaseEvent {
+    value: boolean;
+}
+
+export interface FavoriteStoryEvent extends BaseEvent {
+    value: boolean;
+}
+
+export interface ShareStoryEvent extends BaseEvent {}
+
+export interface ShareStoryWithPathEvent extends BaseEvent {
+    url: string;
+}
+
+export interface ClickOnFavoriteCellEvent {
+    feed: string;
+}
+
+export interface FeedLoadEvent {
+    feed: string;
+    stories: Array<{ id: number; title: string; tags: Array<string>; slidesCount: number }>;
+}
+
+export interface FeedImpressionEvent {
+    feed: string;
+    stories: Array<{ id: number; title: string; tags: Array<string>; slidesCount: number }>;
+}
+
+export interface VisibleAreaUpdatedEvent {
+    feed: string;
+    stories: Array<{ id: number; title: string; tags: Array<string>; slidesCount: number }>;
+}
+
+export interface WidgetEvent {
+    name: string;
+    data: any;
+}