@inappstory/js-sdk 3.6.2 → 3.7.0-rc.0

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

@@ -1,34 +1,110 @@
 import { CloseButtonPosition } from "./appearanceCommon";
 import { RecursivePartial } from "../global";
 
+import { CloseButtonPosition } from "./appearanceCommon";
+import { RecursivePartial } from "../global";
+
+/**
+ * Appearance options for Game Reader.
+ */
 export type GameReaderOptions = RecursivePartial<{
-    borderRadius?: number;
-    loader?: {
+    /**
+     * Loader colors and custom loader string.
+     */
+    loader: {
+        /**
+         * Default loader colors.
+         */
         default: {
-            color: Optional<string>;
-            accentColor: Optional<string>;
+            /**
+             * Main color of the loader.
+             * @default "white"
+             */
+            color: string;
+
+            /**
+             * Accent color of the loader.
+             * @default "transparent"
+             */
+            accentColor: string;
         };
-        custom: Optional<string>;
+
+        /**
+         * Custom loader SVG or component as a string.
+         * @default null
+         */
+        custom: string | null;
     };
-    closeButtonPosition?: CloseButtonPosition | "left" | "right" | "start" | "end";
-    closeButton?: {
+
+    /**
+     * Position of the close button.
+     * Allowed values: enum CloseButtonPosition or string literals.
+     * @default CloseButtonPosition.END (or "end")
+     * @deprecated `left`, `right`
+     */
+    closeButtonPosition: CloseButtonPosition | "left" | "right";
+
+    /**
+     * Close button SVG icon configuration.
+     */
+    closeButton: {
         svgSrc: {
+            /**
+             * Base state SVG icon string for the close button.
+             */
             baseState: string;
         };
     };
 
-    /** @deprecated Use the `backdrop` instead. */
-    backdropColor?: string;
-    backdrop?: {
-        opacity?: number; // .56
-        blur?: number; // 30
-        background?: string;
-    };
-    game?: {
+    /**
+     * Background color for the game container inside the reader.
+     * @default "rgb(51, 51, 51)"
+     */
+    game: {
         backdropColor: string;
     };
+
+    /**
+     * Border radius of the main container (e.g. rounded corners).
+     * @default 5
+     */
+    borderRadius: number;
+
+    /**
+     * Backdrop options while game loading.
+     */
+    backdrop: {
+        /**
+         * Opacity of the backdrop background.
+         * @default 1
+         */
+        opacity: number;
+
+        /**
+         * Background color of the backdrop.
+         * @default "#1a1a1a"
+         */
+        background: string;
+    };
+
+    /**
+     * Forces desktop mode if true.
+     */
+    forceDesktopMode?: boolean;
+
+    /**
+     * Forces orientation check if true.
+     * @default true
+     */
+    forceCheckOrientation?: boolean;
 }>;
 
+/**
+ * Options for opening a game.
+ */
 export type OpenGameOptions = Partial<{
+    /**
+     * Enables demo mode.
+     */
     demoMode: boolean;
 }>;

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

@@ -1,53 +1,134 @@
 import { RecursivePartial } from "../global";
-
+/**
+ * Represents a single good/item.
+ */
 export type Goods = Partial<{
-    imgSrc: string;
+    /** SKU identifier */
+    sku: string;
+
+    /** Image source URL */
+    imgSrc?: string;
+
+    /** Main title */
     title: string;
-    subTitle: string;
+
+    /** Subtitle or secondary title */
+    subTitle?: string;
+
+    /** Current price */
     price: string;
-    oldPrice: string;
-    sku: string;
-    rawData: any;
-}>;
 
-export interface GoodsRenderItemProps<T extends Goods = Goods> {
-    goods: T;
-    index: number;
-    onClick: (goods: T) => void;
-}
+    /** Old price, if applicable */
+    oldPrice?: string;
 
-export type GoodsWidgetOptions<T extends Goods = Goods> = RecursivePartial<{
+    /** Raw additional data */
+    rawData?: any;
+}>;
+
+/**
+ * Appearance options for configuring the Goods Widget V1.
+ */
+export type GoodsWidgetOptions = RecursivePartial<{
+    /** Configuration for the goods list container */
     goodsList: GoodsListOptions;
+
+    /** Configuration for individual goods cards */
     goodsCard: GoodsCardOptions;
+
+    /** Loader appearance settings */
     loader: {
+        /**
+         * Default loader colors.
+         * @default { color: "gray", accentColor: "transparent" }
+         */
         default: {
             color: string;
             accentColor: string;
         };
+
+        /** Custom loader markup or component as a string */
         custom: string;
     };
-    openGoodsWidgetHandler: (goodsList: T[]) => Promise<T[]>;
+
+    /**
+     * Handler to open goods widget and optionally modify or fetch goods.
+     * @default goods => Promise.resolve(goods)
+     */
+    openGoodsWidgetHandler: <T extends Goods = Goods>(goodsList: T[]) => Promise<T[]>;
+
+    /** Indicates if the widget is in loading state */
     isLoading?: boolean;
-    renderItem?: (props: GoodsRenderItemProps<T>) => React.ReactNode;
-    getCardHtml?: (goods: T, index: number) => string;
-    itemClickHandler?: (goods: T) => void;
+
+    /**
+     * Custom renderer function for goods items.
+     * @param props.goods The good item.
+     * @param props.index Index of the item.
+     * @param props.onClick Click handler for the item.
+     */
+    renderItem?: <T extends Goods = Goods>(props: {
+        goods: T;
+        index: number;
+        onClick: (goods: T) => void;
+    }) => React.ReactNode;
+
+    /**
+     * Function to get HTML string for a goods card.
+     * @param goods The good item.
+     * @param index Index of the item.
+     */
+    getCardHtml?: <T extends Goods = Goods>(goods: T, index: number) => string;
+
+    /**
+     * Handler called when a goods item is clicked.
+     */
+    itemClickHandler?: <T extends Goods = Goods>(goods: T) => void;
 }>;
 
+/**
+ * Configuration options for a goods card.
+ */
 export type GoodsCardOptions = Partial<{
+    /** Color of the main text */
     mainTextColor: string;
+
+    /** Color of the old price text */
     oldPriceTextColor: string;
+
+    /** Background color for the image area */
     imageBackgroundColor: string;
+
+    /** Corner radius of the image */
     imageCornerRadius: number;
+
+    /** Font for the title text */
     titleFont: string;
+
+    /** Font for the subtitle text */
     subtitleFont: string;
+
+    /** Font for the price text */
     priceFont: string;
+
+    /** Font for the old price text */
     oldPriceFont: string;
 }>;
 
+/**
+ * Configuration options for the goods list container.
+ */
 export type GoodsListOptions = Partial<{
+    /** Background color behind the close button */
     closeBackgroundColor: string;
+
+    /** Close button image URL */
     closeImage: string;
+
+    /** Height of the substrate container */
     substrateHeight: number;
+
+    /** Color of the substrate */
     substrateColor: string;
+
+    /** Color for the dim overlay */
     dimColor: string;
 }>;

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

@@ -1,44 +1,171 @@
+/**
+ * Built-in social platforms supported by default for sharing.
+ *
+ * @example
+ * const target: BaseShareTarget = "telegram";
+ */
 type BaseShareTarget = "vk" | "ok" | "facebook" | "x" | "linkedin" | "telegram" | "twitter";
+
+/**
+ * Type representing either a built-in share target or a custom one.
+ *
+ * You can extend the list by providing your own custom string union.
+ *
+ * @template CustomTargets - Union of custom platform names (e.g., "your-platform-1" | "your-platform-2").
+ *
+ * @example
+ * type MyTargets = ShareTarget<"your-platform-1" | "your-platform-2">;
+ */
 export type ShareTarget<CustomTargets extends string = never> = BaseShareTarget | CustomTargets;
 
+/**
+ * Parameters used to configure individual share targets.
+ */
 export type ShareTargetParams = {
+    /**
+     * Optional human-readable label shown for the share target.
+     */
     label?: string;
+
+    /**
+     * Optional icon settings for the share target.
+     */
     icon?: {
         svgSrc: {
+            /**
+             * Base SVG icon used to represent the share target.
+             */
             baseState: string;
         };
     };
+
+    /**
+     * Optional function to dynamically generate a sharing URL.
+     *
+     * @param config.url - The page URL being shared.
+     * @param config.text - Associated share message or title.
+     * @returns Generated share URL.
+     */
     getUrl?: (config: { url: string; text: string }) => string;
 };
 
+/**
+ * Configuration for the Share Panel component.
+ *
+ * Supports visual customization, target management, and optional download/copy actions.
+ *
+ * @template CustomTargets - Extendable string union for additional custom share platforms.
+ * @see https://docs.inappstory.com/sdk-guides/react-sdk/share-panel.html
+ */
 export type SharePanel<CustomTargets extends string = never> = Partial<{
+    /**
+     * Background style of the share panel.
+     */
     background: string;
+
+    /**
+     * Border radius applied to the share panel container.
+     */
     borderRadius: number;
+
+    /**
+     * Divider styling between panel sections or items.
+     */
     divider: {
+        /**
+         * Background style of the divider line.
+         */
         background: string;
     };
+
+    /**
+     * Text appearance settings for share panel content.
+     */
     text: {
-        color: string;
+        /**
+         * Text color used in the panel.
+         */
+        color: string
+
+        /**
+         * Font family, size, and style.
+         */
         font: string;
     };
+
+    /**
+     * List of enabled share targets (default or custom).
+     *
+     * @example
+     * targets: ["vk", "telegram", "reddit"]
+     */
     targets: ShareTarget<CustomTargets>[];
+
+    /**
+     * Parameters for each share target, keyed by platform name.
+     */
     targetParams: Partial<Record<ShareTarget<CustomTargets>, ShareTargetParams>>;
+
+    /**
+     * Copy-to-clipboard button settings.
+     */
     copyButton: {
+        /**
+         * Button label text (e.g., "Copy link").
+         */
         label: string;
+
+        /**
+         * SVG icons for base and success (copied) states.
+         */
         svgSrc: {
+            /**
+             * Default icon before copying.
+             */
             baseState: string;
+
+            /**
+             * Icon shown after successful copy.
+             */
+            doneState: string;
         };
     };
+
+    /**
+     * Optional download button settings.
+     */
     downloadButton: {
         svgSrc: {
+            /**
+             * Icon used for the download button.
+             */
             baseState: string;
         };
     };
+
+    /**
+     * Configuration for the share panel title section.
+     */
     title: {
         favicon: {
+            /**
+             * Background behind the favicon icon.
+             */
             background: string;
+
+            /**
+             * Whether the favicon is displayed.
+             */
             display: boolean;
         };
+
+        /**
+         * Function to generate a dynamic title based on the shared content.
+         *
+         * @param config.url - The URL being shared.
+         * @param config.text - Accompanying message or headline.
+         * @returns Title string.
+         */
         getValue: (config: { url: string; text: string }) => string;
     };
-}>;
+}>;