@inappstory/js-sdk 3.0.0-rc.0

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

@@ -0,0 +1,29 @@
+import { RecursivePartial } from "../global"
+
+export declare enum CloseButtonPosition {
+    /** @deprecated */
+    LEFT = "left",
+    /** @deprecated */
+    RIGHT = "right",
+    START = "start",
+    END = "end"
+}
+
+export type AppearanceCommonOptions = RecursivePartial<{
+    hasFavorite: boolean;
+    hasLike: boolean;
+    hasShare: boolean;
+    closeButtonPosition: CloseButtonPosition | "left" | "right" | "start" | "end";
+    loader: {
+        default: {
+            color: string;
+            accentColor: string;
+        };
+        custom: string;
+    };
+    closeButton: {
+        svgSrc: {
+            baseState: string;
+        };
+    };
+}>;

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

@@ -0,0 +1,34 @@
+import { AppearanceCommonOptions } from "./appearanceCommon";
+import { StoryReaderOptions } from "./storyReader";
+import { GameReaderOptions } from "./gameReader";
+import { GoodsWidgetOptions } from "./goodsWidget";
+import { StoriesListOptions } from "./storiesList";
+import { StoryFavoriteReaderOptions } from "./storyFavoriteReader";
+
+export type AppearanceManagerOptionGroups = {
+    commonOptions: AppearanceCommonOptions;
+    storiesListOptions: StoriesListOptions;
+    storyReaderOptions: StoryReaderOptions;
+    storyFavoriteReaderOptions: StoryFavoriteReaderOptions;
+    goodsWidgetOptions: GoodsWidgetOptions;
+    gameReaderOptions: GameReaderOptions;
+};
+
+export declare class AppearanceManager {
+    commonOptions: AppearanceCommonOptions;
+    storyReaderOptions: StoryReaderOptions;
+    storyFavoriteReaderOptions: StoryFavoriteReaderOptions;
+    gameReaderOptions: GameReaderOptions;
+    goodsWidgetOptions: GoodsWidgetOptions;
+    storiesListOptions: StoriesListOptions;
+
+    setCommonOptions(options: AppearanceCommonOptions, withUpdateEvent?: boolean): AppearanceManager;
+    setStoriesListOptions(options: Partial<StoriesListOptions>, withUpdateEvent?: boolean): AppearanceManager;
+    setStoryReaderOptions(options: Partial<StoryReaderOptions>, withUpdateEvent?: boolean): AppearanceManager;
+    setStoryFavoriteReaderOptions(
+        options: Partial<StoryFavoriteReaderOptions>,
+        withUpdateEvent?: boolean
+    ): AppearanceManager;
+    setGoodsWidgetOptions(options: Partial<GoodsWidgetOptions>, withUpdateEvent?: boolean): AppearanceManager;
+    setGameReaderOptions(options: GameReaderOptions, withUpdateEvent?: boolean): AppearanceManager;
+}

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

@@ -0,0 +1,34 @@
+import { CloseButtonPosition } from "./appearanceCommon";
+import { RecursivePartial } from "../global";
+
+export type GameReaderOptions = RecursivePartial<{
+    borderRadius?: number;
+    loader?: {
+        default: {
+            color: Optional<string>;
+            accentColor: Optional<string>;
+        };
+        custom: Optional<string>;
+    };
+    closeButtonPosition?: CloseButtonPosition | "left" | "right" | "start" | "end";
+    closeButton?: {
+        svgSrc: {
+            baseState: string;
+        };
+    };
+
+    /** @deprecated Use the `backdrop` instead. */
+    backdropColor?: string;
+    backdrop?: {
+        opacity?: number; // .56
+        blur?: number; // 30
+        background?: string;
+    };
+    game?: {
+        backdropColor: string;
+    };
+}>;
+
+export type OpenGameOptions = Partial<{
+    demoMode: boolean;
+}>;

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

@@ -0,0 +1,45 @@
+import { RecursivePartial } from "../global"
+
+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

@@ -0,0 +1,7 @@
+export * from "./appearanceCommon"
+export * from "./gameReader"
+export * from "./goodsWidget"
+export * from "./storiesList"
+export * from "./storyReader"
+export * from "./sharePanel"
+export * from "./appearanceManager"

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

@@ -0,0 +1,44 @@
+type BaseShareTarget = "vk" | "ok" | "facebook" | "x" | "linkedin" | "telegram" | "twitter";
+export type ShareTarget<CustomTargets extends string = never> = BaseShareTarget | CustomTargets;
+
+export type ShareTargetParams = {
+    label?: string;
+    icon?: {
+        svgSrc: {
+            baseState: string;
+        };
+    };
+    getUrl?: (config: { url: string; text: string }) => string;
+};
+
+export type SharePanel<CustomTargets extends string = never> = Partial<{
+    background: string;
+    borderRadius: number;
+    divider: {
+        background: string;
+    };
+    text: {
+        color: string;
+        font: string;
+    };
+    targets: ShareTarget<CustomTargets>[];
+    targetParams: Partial<Record<ShareTarget<CustomTargets>, ShareTargetParams>>;
+    copyButton: {
+        label: string;
+        svgSrc: {
+            baseState: string;
+        };
+    };
+    downloadButton: {
+        svgSrc: {
+            baseState: string;
+        };
+    };
+    title: {
+        favicon: {
+            background: string;
+            display: boolean;
+        };
+        getValue: (config: { url: string; text: string }) => string;
+    };
+}>;

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

@@ -0,0 +1,155 @@
+import { Option, RecursivePartial } from "../global";
+
+export declare enum StoriesListSliderAlign {
+    CENTER = "center",
+    /** @deprecated */
+    LEFT = "left",
+    /** @deprecated */
+    RIGHT = "right",
+    START = "start",
+    END = "end"
+}
+
+export declare enum StoriesListCardViewVariant {
+    CIRCLE = "circle",
+    QUAD = "quad",
+    RECTANGLE = "rectangle"
+}
+
+export declare enum StoriesListCardTitleTextAlign {
+    /** @deprecated */
+    LEFT = "left",
+    /** @deprecated */
+    RIGHT = "right",
+    CENTER = "center",
+    START = "start",
+    END = "end"
+}
+
+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: {
+        height: number | string;
+        backgroundColor: string;
+        sliderAlign: StoriesListSliderAlign | "left" | "center" | "right" | "start" | "end";
+    };
+    sidePadding: number;
+    topPadding: number;
+    bottomPadding: number;
+    bottomMargin: number;
+    navigation: {
+        speed: number;
+        showControls: boolean;
+        controlsSize: number;
+        controlsBackgroundColor: string;
+        controlsColor: string;
+    };
+    ugcCard: StoriesListUgcCardOptions;
+}>;
+
+export type StoriesListCardOptions = RecursivePartial<{
+    title: {
+        padding: string | number;
+        font: string;
+        display: boolean;
+        textAlign: StoriesListCardTitleTextAlign | "left" | "center" | "right" | "start" | "end";
+        position: StoriesListCardTitlePosition | "cardInsideBottom" | "cardOutsideTop" | "cardOutsideBottom";
+        lineClamp: number;
+    };
+    gap: number;
+    height: number;
+    aspectRatio: number;
+    coverQuality: StoriesListCardCoverQuality | "medium" | "high";
+    coverLazyLoading: boolean;
+    variant: StoriesListCardViewVariant | "circle" | "quad" | "rectangle";
+    border: {
+        radius: number;
+        color: string;
+        width: number;
+        gap: number;
+        gradient: string;
+    };
+    boxShadow: string;
+    dropShadow: string;
+    opacity: number;
+    mask: {
+        color: string;
+        linearGradient: {
+            direction: string;
+            points: Array<string>;
+        };
+    };
+    svgMask: {
+        cardMask: string;
+        overlayMask: Array<{
+            mask: string;
+            background: string;
+        }>;
+    };
+    opened: {
+        border: {
+            radius: number;
+            color: string;
+            width: number;
+            gap: number;
+            gradient: string;
+        };
+        boxShadow: string;
+        dropShadow: string;
+        opacity: number;
+        mask: {
+            color: string;
+            linearGradient: {
+                direction: string;
+                points: Array<string>;
+            };
+        };
+        svgMask: {
+            cardMask: string;
+            overlayMask: Array<{
+                mask: string;
+                background: string;
+            }>;
+        };
+    };
+}>;
+
+export type StoriesListFavoriteCardOptions = RecursivePartial<
+    StoriesListCardOptions & {
+        title: StoriesListCardOptions["title"] & {
+            content: string;
+        };
+    }
+>;
+
+export type StoriesListUgcCardOptions = RecursivePartial<
+    Omit<StoriesListCardOptions, "opened"> & {
+        title: StoriesListCardOptions["title"] & {
+            content: Option<string>;
+        };
+        image: {
+            svgSrc: {
+                baseState: string;
+            };
+        };
+        backgroundColor: string;
+    }
+>;

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

@@ -0,0 +1,20 @@
+import { RecursivePartial } from "../global";
+import { CloseButtonPosition } from "./appearanceCommon";
+
+export type StoryFavoriteReaderOptions = RecursivePartial<{
+    title: {
+        content: string;
+        font: string;
+        color: string;
+        backgroundColor: string;
+    };
+    closeButtonPosition: CloseButtonPosition;
+    closeButton: {
+        svgSrc: {
+            baseState: string;
+        };
+    };
+    headerTopOffset: number;
+    bottomOffset: number;
+    backgroundColor: string;
+}>;

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

@@ -0,0 +1,73 @@
+import { CloseButtonPosition } from "./appearanceCommon";
+import { GameReaderOptions } from "./gameReader";
+import { SharePanel } from "./sharePanel"
+import { Nullable, RecursivePartial } from "../global"
+
+export declare enum StoryReaderSwipeStyle {
+    FLAT = "flat",
+    COVER = "cover",
+    CUBE = "cube"
+}
+
+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: string;
+            accentColor: string;
+        };
+        custom: string;
+    };
+    recycleStoriesList: boolean;
+    closeOnLastSlideByTimer: boolean;
+    sharePanel: SharePanel<string>;
+    commonBackdrop: {
+        color: string;
+        backdropFilter: string;
+    };
+    slideBackdrop: {
+        opacity: number;
+        blur: number;
+        linearGradientOverlay: string[];
+    };
+    faviconApiUrl: string;
+    closeButton: {
+        svgSrc: {
+            baseState: string;
+        };
+    };
+    likeButton: {
+        svgSrc: {
+            baseState: string;
+            activeState: string;
+        };
+    };
+    dislikeButton: {
+        svgSrc: {
+            baseState: string;
+            activeState: string;
+        };
+    };
+    favoriteButton: {
+        svgSrc: {
+            baseState: string;
+            activeState: string;
+        };
+    };
+    muteButton: {
+        svgSrc: {
+            baseState: string;
+            activeState: string;
+        };
+    };
+    shareButton: {
+        svgSrc: {
+            baseState: string;
+        };
+    };
+}>;

package/dist/types/global.d.ts

@@ -0,0 +1,23 @@
+import { AppearanceManager } from "./appearance-manager";
+import { StoryManager, StoryManagerConfig } from "./storyManager";
+
+export type RecursivePartial<T> = {
+    [P in keyof T]?: T[P] extends object ? RecursivePartial<T[P]> | null : T[P] | null;
+};
+
+export type Nullable<T> = T | null;
+export type Optional<T> = T | null;
+export type Option<T> = T | null;
+
+export type Dict<K extends string | number | symbol = string, T = any> = Record<K, T>;
+
+export type Brand<T, B extends string> = T & { readonly __brand: B };
+
+declare global {
+    interface Window {
+        IAS: {
+            StoryManager: { new (config: StoryManagerConfig): StoryManager };
+            AppearanceManager: { new (): AppearanceManager };
+        };
+    }
+}

package/dist/types/index.d.ts

@@ -0,0 +1,5 @@
+export * from "./appearance-manager";
+export * from "./story-list";
+export * from "./share-page";
+export * from "./storyManager";
+export * from "./publicEvents"

package/dist/types/publicEvents.d.ts

@@ -0,0 +1,104 @@
+export type PublicEvents = {
+    сlickOnStory: ClickOnStoryEvent;
+    showStory: ShowStoryEvent;
+    closeStory: CloseStoryEvent;
+    showSlide: ShowSlideEvent;
+    clickOnButton: ClickOnButtonEvent;
+    likeStory: LikeStoryEvent;
+    dislikeStory: DislikeStoryEvent;
+    favoriteStory: FavoriteStoryEvent;
+    shareStory: ShareStoryEvent;
+    shareStoryWithPath: ShareStoryWithPathEvent;
+    feedImpression: FeedImpressionEvent;
+    visibleAreaUpdated: VisibleAreaUpdatedEvent
+    widgetEvent: WidgetEvent
+};
+
+export type PublicEventHandler<Event extends keyof PublicEvents> = (event: PublicEvents[Event]) => void;
+
+export 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 enum CloseAction {
+    closeReaderByCloseBtn = "closeReaderByCloseBtn",
+    closeReaderByEscBtn = "closeReaderByEscBtn",
+    swipeDown = "swipeDown",
+    swipe = "swipe",
+    lastSlideClick = "lastSlideClick",
+    auto = "auto",
+    externalCloseReader = "externalCloseReader"
+}
+
+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;
+}

package/dist/types/share-page/index.d.ts

@@ -0,0 +1 @@
+export { SharePage, SharePageOptions } from "./sharePage"

package/dist/types/share-page/sharePage.d.ts

@@ -0,0 +1,14 @@
+import { EventEmitter } from "events";
+import { AppearanceManager } from "../appearance-manager";
+
+export type SharePageOptions = {
+    handleStartLoad?: () => void;
+    handleStopLoad?: (result: boolean) => void;
+    handleStoryReaderClose?: () => void;
+};
+
+export declare class SharePage extends EventEmitter {
+    constructor(storyId: number | string, appearanceManager: AppearanceManager, options?: SharePageOptions);
+
+    closeStoryReader(): void;
+}

package/dist/types/story-list/StoryList.d.ts

@@ -0,0 +1,19 @@
+import { EventEmitter } from "events";
+import { AppearanceManager } from "../appearance-manager";
+import { StoriesListType } from "./storiesListType";
+
+export declare class StoriesList extends EventEmitter {
+    get type(): StoriesListType;
+    get feedSlug(): string;
+    get testKey(): string;
+    get useUgcCard(): boolean;
+
+    constructor(
+        mountSelector: string,
+        appearanceManager: AppearanceManager,
+        options: { feed?: string; testKey?: string; useUgcCard?: boolean }
+    );
+
+    reload(options?: { needLoader: boolean }): Promise<void>;
+    destroy(): void;
+}

package/dist/types/story-list/UGCStoryList.d.ts

@@ -0,0 +1,19 @@
+import { EventEmitter } from "events";
+import { AppearanceManager } from "../appearance-manager";
+import { StoriesListType } from "./storiesListType";
+
+export declare class UGCStoriesList extends EventEmitter {
+    get type(): StoriesListType;
+    get feedSlug(): string;
+    get testKey(): string;
+    get useUgcCard(): boolean;
+
+    constructor(
+        mountSelector: string,
+        appearanceManager: AppearanceManager,
+        options: { filter?: Record<string, any>; testKey?: string; useUgcCard?: boolean }
+    );
+
+    reload(options?: { needLoader: boolean }): Promise<void>;
+    destroy(): void;
+}

package/dist/types/story-list/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./StoryList";
+export * from "./storyListLoadStatus";
+export * from "./UGCStoryList";
+export * from "./storiesListType";

package/dist/types/story-list/stackedStoryList.d.ts

@@ -0,0 +1,35 @@
+import { EventEmitter } from "events";
+import { AppearanceManager } from "../appearance-manager";
+
+export interface StackedStoryListOptions {
+    feed: string;
+}
+
+export interface StoryCover {
+    feedCoverSrc?: string;
+    imageSrc?: string;
+    videoSrc?: string;
+    backgroundColor?: string;
+}
+
+export class StackFeedStory {
+    id: number;
+    title: string;
+    titleColor: string;
+    hasAudio: boolean;
+    hasSwipeUp: boolean;
+    isOpened: boolean;
+    cover: StoryCover;
+    deeplink?: string;
+    gameInstanceId?: string;
+    hideInReader: boolean;
+    hide_timeline: boolean;
+}
+
+export declare class StoriesList extends EventEmitter {
+    constructor(appearanceManager: AppearanceManager, options: StackedStoryListOptions);
+
+    destroy(): void;
+    reload(): void;
+    showStory(story: StackFeedStory): void;
+}

package/dist/types/story-list/storiesListType.d.ts

@@ -0,0 +1,4 @@
+export declare enum StoriesListType {
+    DEFAULT,
+    UGC
+}