@inappstory/react-sdk 0.0.1

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

@@ -0,0 +1,38 @@
+/// <reference types="node" />
+import { EventEmitter } from "events";
+import { AppearanceCommonOptions } from "./appearanceCommon";
+import { StoriesListOptions } from "./storiesList";
+import { StoryReaderOptions } from "./storyReader";
+import { StoryFavoriteReaderOptions } from "./storyFavoriteReader";
+import { GoodsWidgetOptions } from "./goodsWidget";
+import { GameReaderOptions } from "./gameReader";
+import { OverrideByMediaQuery } from "./AppearanceManager.h";
+
+export declare class AppearanceManager extends EventEmitter {
+    constructor();
+    private _commonOptions;
+    setCommonOptions(options: AppearanceCommonOptions, withUpdateEvent?: boolean): AppearanceManager;
+    get commonOptions(): AppearanceCommonOptions;
+    private _storiesListOptions;
+    setStoriesListOptions(options: Partial<StoriesListOptions>, withUpdateEvent?: boolean): AppearanceManager;
+    get storiesListOptions(): StoriesListOptions;
+    private _storyReaderOptions;
+    setStoryReaderOptions(options: Partial<StoryReaderOptions>, withUpdateEvent?: boolean): AppearanceManager;
+    get storyReaderOptions(): StoryReaderOptions;
+    private _storyFavoriteReaderOptions;
+    setStoryFavoriteReaderOptions(options: Partial<StoryFavoriteReaderOptions>, withUpdateEvent?: boolean): AppearanceManager;
+    get storyFavoriteReaderOptions(): StoryFavoriteReaderOptions;
+    private _goodsWidgetOptions;
+    setGoodsWidgetOptions(options: Partial<GoodsWidgetOptions>, withUpdateEvent?: boolean): AppearanceManager;
+    get goodsWidgetOptions(): GoodsWidgetOptions;
+    private _gameReaderOptions;
+    setGameReaderOptions(options: GameReaderOptions, withUpdateEvent?: boolean): AppearanceManager;
+    get gameReaderOptions(): GameReaderOptions;
+    setOptionsOverrideByMediaQuery(overrideByMediaQueries: OverrideByMediaQuery[]): AppearanceManager;
+    private _mqls;
+    initMediaQueries(overrideByMediaQueries: OverrideByMediaQuery[]): void;
+    private _composeMqlCondition;
+    private _composeOptionsOverrideByMediaQuery;
+    private removeMediaQueryEventListeners;
+    destroy(): void;
+}

package/dist/types/appearance-manager/AppearanceManager.h.d.ts

@@ -0,0 +1,26 @@
+import { StoryReaderOptions } from "./storyReader";
+import { GameReaderOptions } from "./gameReader";
+import { AppearanceCommonOptions } from "./appearanceCommon";
+import { StoriesListOptions } from "./storiesList";
+import { StoryFavoriteReaderOptions } from "./storyFavoriteReader";
+import { GoodsWidgetOptions } from "./goodsWidget";
+
+export type AppearanceManagerEvents = "updatedCommonOptions" | "updatedStoriesListOptions" | "updatedStoryReaderOptions" | "updatedFavoriteReaderOptions" | "updatedGameReaderOptions" | "updatedGoodsWidgetOptions"; 
+
+export type StoryReaderUpdateComposedOptions = {
+    storyReaderOptions: StoryReaderOptions;
+    gameReaderOptions: GameReaderOptions;
+    appearanceCommon: AppearanceCommonOptions;
+};
+export type AppearanceManagerOptionGroups = {
+    commonOptions: AppearanceCommonOptions;
+    storiesListOptions: StoriesListOptions;
+    storyReaderOptions: StoryReaderOptions;
+    storyFavoriteReaderOptions: StoryFavoriteReaderOptions;
+    goodsWidgetOptions: GoodsWidgetOptions;
+    gameReaderOptions: GameReaderOptions;
+};
+export type OverrideByMediaQuery = Partial<{
+    viewportMinSize: number | "sm" | "md" | "lg" | "xl";
+    mediaQuery: null | string;
+}> & Partial<AppearanceManagerOptionGroups>;

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

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

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

@@ -0,0 +1,33 @@
+import {
+    AppearanceCommonOptions,
+    CloseButtonPosition
+} from "./appearanceCommon";
+
+export type GameReaderOptions = {
+    loader?: {
+        default: {
+            color: string | null,
+            accentColor: string | null,
+        },
+        custom: string | null
+    };
+
+    closeButtonPosition?: CloseButtonPosition;
+
+    closeButton?: {
+        svgSrc: {
+            baseState: string
+        }
+    };
+
+    backdropColor?: string
+    game?: {
+        backdropColor: string
+    },
+    forceDesktopMode?: AppearanceCommonOptions["forceDesktopMode"]
+    forceCheckOrientation?: boolean
+};
+
+export type OpenGameOptions = Partial<{
+    demoMode: boolean;
+}>

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

@@ -0,0 +1,39 @@
+export type Goods = {}
+
+export type GoodsWidgetRenderingType = "default" | "customCard" 
+
+export type GoodsWidgetOptions = {
+    goodsWidgetRenderingType: GoodsWidgetRenderingType; // DEPRECATED?
+    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 = {
+    mainTextColor: string;
+    oldPriceTextColor: string;
+    imageBackgroundColor: string;
+    imageCornerRadius: number;
+    titleFont?: string;
+    subtitleFont?: string;
+    priceFont?: string;
+    oldPriceFont?: string;
+}
+
+export type GoodsListOptions = {
+    renderingType: GoodsWidgetRenderingType;
+    closeBackgroundColor: string;
+    closeImage?: string;
+    substrateHeight: number;
+    substrateColor: string;
+    dimColor: string;
+}

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

@@ -0,0 +1,8 @@
+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/storiesList.d.ts

@@ -0,0 +1,129 @@
+/// <reference path="./utils.d.ts" />
+
+export type StoriesListSliderAlign = "center" | "left" | "right"
+
+export type StoriesListOptions = {
+    direction: "horizontal" | "vertical";
+    card: StoriesListCardOptions;
+    favoriteCard: StoriesListFavoriteCardOptions;
+    layout: {
+        height?: number;
+        storiesListInnerHeight?: number | null;
+        backgroundColor?: string;
+        sliderAlign?: StoriesListSliderAlign;
+    };
+    sidePadding: number;
+    topPadding: number;
+    bottomPadding: number;
+    bottomMargin: number;
+    navigation: {
+        showControls: boolean;
+        controlsSize: number;
+        controlsBackgroundColor: string;
+        controlsColor: string;
+    };
+    extraCss?: 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<{
+        color: string;
+        padding: string | number;
+        font: string;
+        display: boolean;
+        textAlign: StoriesListCardTitleTextAlign;
+        position: StoriesListCardTitlePosition;
+        lineClamp: number;
+    }>;
+    gap: number;
+    height: number;
+    aspectRatio: Optional<number>;
+    coverQuality: StoriesListCardCoverQuality;
+    coverLazyLoading: boolean;
+    variant: StoriesListCardViewVariant;
+    border: Partial<{
+        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<{
+            direction: string;
+            points: Array<string>;
+        }>;
+    }>;
+    svgMask: Partial<Optional<{
+        cardMask: Optional<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>;
+        }>;
+        boxShadow: Optional<string>;
+        dropShadow: Optional<string>;
+        opacity: Optional<number>;
+        mask: {
+            color: Optional<string>;
+            linearGradient: Optional<{
+                direction: string;
+                points: Array<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;
+        };
+    };
+    backgroundColor: string;
+}>;
+export type StoriesListClickEvent = {
+    id: number;
+    index: number;
+    isDeeplink: boolean;
+    url: string | undefined;
+};
+export type StoriesListEvents = "startLoad" | "endLoad"

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

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

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

@@ -0,0 +1,84 @@
+import { CloseButtonPosition } from "./appearanceCommon";
+import { GameReaderOptions } from "./gameReader";
+/// <reference path="../global.d.ts" />
+
+export type StoryReaderSwipeStyle =  "flat" | "cover" | "cube"
+
+export type SharePanelTargets = "vk" | "ok" | "facebook" | "twitter" | "linkedin" | "telegram" 
+
+export type StoryReaderOptions = {
+    gameReaderOptions: GameReaderOptions,
+    closeButtonPosition?: CloseButtonPosition,
+    scrollStyle: StoryReaderSwipeStyle,
+    timelineBlockTopOffset: Nullable<number>,
+    actionPanelBottomOffset: Nullable<number>,
+    borderRadius: Optional<number>
+    loader?: {
+        default: {
+            color: Optional<string>,
+            accentColor: Optional<string>,
+        },
+        custom: Optional<string>
+    },
+    recycleStoriesList?: boolean,
+    closeOnLastSlideByTimer?: boolean,
+    sharePanel: {
+        targets: Array<SharePanelTargets>
+        copyButton?: {
+            svgSrc: {
+                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?: {
+        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/appearance-manager/utils.d.ts

@@ -0,0 +1,7 @@
+type Nullable<T> = T | null;
+type Optional<T> = T | null;
+type Option<T> = T | null;
+
+type Dict<K extends string | number | symbol = string, T = any> = Record<K, T>
+
+type Brand<T, B extends string> = T & { readonly __brand: B }

package/dist/types/index.d.ts

@@ -0,0 +1,7 @@
+export * from "./appearance-manager";
+export { StoryManager } from "./story-manager/StoryManager";
+export { StoryListMain as StoryList } from "./story-list/StoryList";
+export { UGCStoryListMain as UGCStoryList } from "./story-list/UGCStoryList";
+export { StoryListViewModel } from "./story-list/storyListViewModel";
+export { StoryListLoadStatus } from "./story-list/storyListLoadStatus";
+export { StoryManagerConfig } from "./story-manager/StoryManager.h";

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

@@ -0,0 +1,16 @@
+import { AppearanceManager, StoryManager } from "..";
+import { StoryListLoadStatus } from "./storyListLoadStatus";
+import { StoryListViewModel } from "./storyListViewModel.d";
+
+interface StoryListProps {
+    storyManager: StoryManager;
+    appearanceManager: AppearanceManager;
+    feedSlug: string;
+    testKey?: string;
+    ugcCardClickHandler?: () => void;
+    useUgcCard?: boolean;
+    onLoadStart?: () => void;
+    onLoadEnd?: (storyListLoadStatus: StoryListLoadStatus) => void;
+    viewModelExporter?: (storyListViewModel: StoryListViewModel) => void;
+}
+export declare const StoryListMain: ({ storyManager, appearanceManager, feedSlug, useUgcCard, ugcCardClickHandler, viewModelExporter, onLoadStart, onLoadEnd }: StoryListProps) => JSX.Element;

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

@@ -0,0 +1,16 @@
+import { AppearanceManager, StoryManager } from "..";
+import { StoryListLoadStatus } from "./storyListLoadStatus";
+import { StoryListViewModel } from "./storyListViewModel.d";
+
+interface UGCStoryListProps {
+    storyManager: StoryManager;
+    appearanceManager: AppearanceManager;
+    testKey?: string;
+    ugcCardClickHandler?: () => void;
+    useUgcCard?: boolean;
+    filter?: Record<string, any>;
+    onLoadStart?: () => void;
+    onLoadEnd?: (storyListLoadStatus: StoryListLoadStatus) => void;
+    viewModelExporter?: (storyListViewModel: StoryListViewModel) => void;
+}
+export declare const UGCStoryListMain: ({ storyManager, appearanceManager, useUgcCard, filter, ugcCardClickHandler, viewModelExporter, onLoadStart, onLoadEnd }: UGCStoryListProps) => JSX.Element;

package/dist/types/story-list/storyListLoadStatus.ts

@@ -0,0 +1,12 @@
+export interface StoryListLoadStatus {
+    feed: string | number,
+    filter: Record<string, any> | null,
+    defaultListLength: number,
+    favoriteListLength: number,
+    success: boolean,
+    error: {
+        name: string,
+        networkStatus: number,
+        networkMessage: string
+    } | null
+}

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

@@ -0,0 +1,27 @@
+import { StoriesListOptions } from "../appearance-manager/storiesList";
+import { ViewModel } from "./viewModel";
+
+export declare class StoryListViewModel extends ViewModel {
+    stories: any[];
+    get isLoading(): boolean;
+    set modeDesktop(value: boolean);
+    get modeDesktop(): boolean;
+    set session(session: any | null);
+    get session(): any | null;
+    favoriteStoryImages: {
+        src: string | undefined;
+        color: string;
+    }[];
+    constructor();
+    get cardOptions(): any;
+    get options(): StoriesListOptions;
+    get isTitleCardInner(): boolean;
+    get isTitleCardOutsideTop(): boolean;
+    get isTitleCardOutsideBottom(): boolean;
+    get cardAspectRatio(): number;
+    onStoryClick(story: any, index: number): void;
+    destroy(): void;
+    getImageSrcByStory(story: any): string | undefined;
+    setOptions(options: StoriesListOptions): void;
+    reload(): void;
+}

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

@@ -0,0 +1,5 @@
+/// <reference types="node" />
+import { EventEmitter } from 'events';
+export declare abstract class ViewModel extends EventEmitter {
+    destroy(): void;
+}

package/dist/types/story-manager/StoryManager.d.ts

@@ -0,0 +1,45 @@
+/// <reference types="node" />
+import { EventEmitter } from "events";
+import { AppearanceManager, StoryListViewModel, StoryManagerConfig } from "..";
+
+export type IdentityFields = {
+    feedSlug: string;
+    filter?: Record<string, any>;
+};
+
+export declare class StoryManager extends EventEmitter {
+    static instance: StoryManager;
+    constructor(storyManagerConfig: StoryManagerConfig);
+    destroy(): void;
+    set storyLinkClickHandler(callback: Function);
+    set openGoodsWidgetHandler(callback: (skuList: Array<Dict>) => Promise<Array<Dict>>);
+    get openGoodsWidgetHandler(): (skuList: Array<Dict>) => Promise<Array<Dict>>;
+    static getInstance(): StoryManager | null;
+    createStoryListViewModel({ appearanceManager, ...params }: {
+        identityFields: IdentityFields;
+        appearanceManager: AppearanceManager;
+        useUgcCard: boolean;
+        ugcCardClickHandler?: () => void;
+    }): StoryListViewModel;
+    setTags(tags: Array<string>): void;
+    setUserId(userId: string | number): void;
+    setLang(lang: "ru" | "en"): void;
+    setPlaceholders(placeholders: Dict<string, string>): void;
+    setImagePlaceholders(imagePlaceholders: Dict<string, string>): void;
+    showOnboardingStories(appearanceManager: AppearanceManager, options?: {
+        feed?: Option<string>;
+        customTags?: Array<string>;
+        limit?: Option<number>;
+    }): Promise<boolean>;
+    showStory(id: number | string, appearanceManager: AppearanceManager, ref?: string): Promise<boolean>;
+    openGame(gameInstanceId: string, appearanceManager: AppearanceManager, gameOptions?: { demoMode?: boolean }): Promise<void>;
+    closeGame(): Promise<boolean>;
+    closeStoryReader(): Promise<false | undefined>;
+    closeGoodsWidget(): void;
+    onBeforeStoryReaderOpen: Option<() => void>;
+    onBeforeFavoriteReaderOpen: Option<() => void>;
+    onStoryReaderClosed: Option<() => void>;
+    onFavoriteReaderClosed: Option<() => void>;
+    get sdkVersionName(): string;
+    get sdkVersionCode(): number;
+}

package/dist/types/story-manager/StoryManager.h.d.ts

@@ -0,0 +1,21 @@
+export type StoryManagerConfig = {
+    appPackageId?: string;
+    apiKey: string;
+    userId?: Optional<string | number>;
+    tags?: Optional<Array<string>>;
+    placeholders?: Optional<Dict<string, string>>;
+    imagePlaceholders?: Optional<Dict<string, string>>;
+    lang?: Optional<"ru" | "en">;
+    nonce?: string;
+};
+
+export type UgcEditorConfig = {
+    sessionId: string;
+    apiKey: string;
+    editor: Record<any, any>;
+    sdkVersion: string;
+    appPackageId?: string;
+    deviceId: string;
+    userId?: string;
+    lang: string;
+};

package/package.json

@@ -0,0 +1,76 @@
+{
+    "name": "@inappstory/react-sdk",
+    "version": "0.0.1",
+    "description": "React SDK",
+    "main": "dist/index.js",
+    "types": "dist/types/index.d.ts",
+    "files": [
+        "dist"
+    ],
+    "license": "MIT",
+    "keywords": [
+        "stories",
+        "stories SDK",
+        "InAppStory"
+    ],
+    "author": "Inappstory",
+    "maintainers": [
+        {
+            "name": "Inappstory",
+            "email": "dev@inappstory.com"
+        }
+    ],
+    "homepage": "https://inappstory.com",
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/inappstory/react-web-sdk.git"
+    },
+    "bugs": "https://github.com/inappstory/react-web-sdk/issues",
+    "dependencies": {
+        "@emotion/cache": "^11.11.0",
+        "@emotion/react": "^11.11.1",
+        "@emotion/styled": "^11.11.0",
+        "array.prototype.find": "^2.1.1",
+        "bowser": "^2.4.0",
+        "build-url": "^1.3.3",
+        "classlist-polyfill": "^1.2.0",
+        "classnames": "^2.5.1",
+        "config": "^2.0.2",
+        "core-js": "^3.25.5",
+        "css-font-parser": "^2.0.0",
+        "effector": "^22.1.2",
+        "effector-react": "^22.0.4",
+        "element-closest-polyfill": "^1.0.2",
+        "es6-object-assign": "^1.1.0",
+        "es6-promise": "^4.2.8",
+        "lodash": "^4.17.21",
+        "lodash-es": "^4.17.14",
+        "normalize.css": "^8.0.1",
+        "parse-css-sides": "^3.0.1",
+        "regenerator-runtime": "^0.13.7",
+        "ts-node": "^10.9.2",
+        "uuid": "^8.1.0"
+    },
+    "peerDependencies": {
+        "react": ">=17.0.2",
+        "react-dom": ">=17.0.2"
+    },
+    "devDependencies": {},
+    "scripts": {
+        "build": "set NODE_OPTIONS=--openssl-legacy-provider && webpack -c config/webpack/prod.js",
+        "build:types": "tsc --project ./tsconfig.build.json && tsc-alias --debug -p ./tsconfig.build.json",
+        "analyze": "webpack --analyze -c config/webpack/analyze.js",
+        "test": "echo \"Error: no test specified\" && exit 1",
+        "prettier": "prettier src --write",
+        "prettier:check": "prettier src --check",
+        "postbuild": "cp -r ./src/types-new ./dist/types"
+    },
+    "browserslist": [
+        "Android >= 5",
+        "IOS >= 11",
+        "Safari >= 11",
+        "Chrome >= 49",
+        "Firefox >= 31",
+        "Samsung >= 5"
+    ]
+}