@inappstory/js-sdk 3.6.4 → 3.6.6

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;
     };
-}>;
+}>;

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

@@ -1,103 +1,330 @@
 import { Option, RecursivePartial } from "../global";
 
+/**
+ * Slider alignment in the stories list.
+ */
 export declare enum StoriesListSliderAlign {
     CENTER = "center",
-    /** @deprecated */
+    /** @deprecated Use START or END instead */
     LEFT = "left",
-    /** @deprecated */
+    /** @deprecated Use START or END instead */
     RIGHT = "right",
     START = "start",
     END = "end"
 }
 
+/**
+ * Card view variants for the stories list.
+ */
 export declare enum StoriesListCardViewVariant {
     CIRCLE = "circle",
     QUAD = "quad",
     RECTANGLE = "rectangle"
 }
 
+/**
+ * Text alignment options for the card title.
+ */
 export declare enum StoriesListCardTitleTextAlign {
-    /** @deprecated */
+    /** @deprecated Use START, END, or CENTER instead */
     LEFT = "left",
-    /** @deprecated */
+    /** @deprecated Use START, END, or CENTER instead */
     RIGHT = "right",
     CENTER = "center",
     START = "start",
     END = "end"
 }
 
+/**
+ * Position options for the card title.
+ */
 export declare enum StoriesListCardTitlePosition {
     CARD_INSIDE_BOTTOM = "cardInsideBottom",
     CARD_OUTSIDE_TOP = "cardOutsideTop",
     CARD_OUTSIDE_BOTTOM = "cardOutsideBottom"
 }
 
+/**
+ * Cover quality options for the card.
+ */
 export declare enum StoriesListCardCoverQuality {
     Medium = "medium",
     High = "high"
 }
 
+/**
+ * Stories list scrolling direction.
+ */
 export declare enum StoriesListDirection {
+    /** Vertical layout */
     COLUMN = "vertical",
+    /** Horizontal layout */
     ROW = "horizontal"
 }
 
+/**
+ * Configuration options for the stories list.
+ */
 export type StoriesListOptions = RecursivePartial<{
+    /**
+     * Direction of the stories list.
+     * @default StoriesListDirection.ROW
+     */
     direction: StoriesListDirection | "vertical" | "horizontal";
+
+    /**
+     * Card options.
+     */
     card: StoriesListCardOptions;
+
+    /**
+     * Favorite card options.
+     */
     favoriteCard: StoriesListFavoriteCardOptions;
+
+    /**
+     * Layout options for the list.
+     */
     layout: {
+        /**
+         * Height of the list (number or string, e.g., "auto").
+         * @default "auto"
+         */
         height: number | string;
+
+        /**
+         * Background color of the list.
+         * @default "transparent"
+         */
         backgroundColor: string;
+
+        /**
+         * Slider alignment.
+         * @default StoriesListSliderAlign.START
+         */
         sliderAlign: StoriesListSliderAlign | "left" | "center" | "right" | "start" | "end";
     };
+
+    /**
+     * Horizontal padding (left and right).
+     * @default 20
+     */
     sidePadding: number;
+
+    /**
+     * Top padding.
+     * @default 20
+     */
     topPadding: number;
+
+    /**
+     * Bottom padding.
+     * @default 20
+     */
     bottomPadding: number;
+
+    /**
+     * Bottom margin of the entire list container.
+     * @default 17
+     */
     bottomMargin: number;
+
+    /**
+     * Navigation settings.
+     */
     navigation: {
-        speed: number;
+        /**
+         * Show navigation controls (arrows).
+         * @default false
+         */
         showControls: boolean;
+
+        /**
+         * Size of navigation controls.
+         * @default 48
+         */
         controlsSize: number;
+
+        /**
+         * Background color of navigation controls.
+         * @default "white"
+         */
         controlsBackgroundColor: string;
+
+        /**
+         * Color of navigation controls icons.
+         * @default "black"
+         */
         controlsColor: string;
     };
+
+    /**
+     * User-generated content card options.
+     */
     ugcCard: StoriesListUgcCardOptions;
+
+    /**
+     * Automatically scroll the list when a story is closed.
+     * @default true
+     */
     autoScrollOnStoryClose: boolean;
 }>;
 
+/**
+ * Options for individual story cards.
+ */
 export type StoriesListCardOptions = RecursivePartial<{
     title: {
+        /**
+         * Padding around the title.
+         * @default 10.6
+         */
         padding: string | number;
+
+        /**
+         * CSS font property for the title.
+         * @default '16px system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
+         */
         font: string;
+
+        /**
+         * Whether to display the title.
+         * @default true
+         */
         display: boolean;
+
+        /**
+         * Text alignment for the title.
+         * @default StoriesListCardTitleTextAlign.START
+         */
         textAlign: StoriesListCardTitleTextAlign | "left" | "center" | "right" | "start" | "end";
+
+        /**
+         * Position of the title relative to the card.
+         * @default StoriesListCardTitlePosition.CARD_INSIDE_BOTTOM
+         */
         position: StoriesListCardTitlePosition | "cardInsideBottom" | "cardOutsideTop" | "cardOutsideBottom";
+
+        /**
+         * Maximum number of lines shown in the title.
+         * @default 4
+         */
         lineClamp: number;
     };
+
+    /**
+     * Gap between cards.
+     * @default 10
+     */
     gap: number;
+
+    /**
+     * Card height in pixels.
+     * @default 178
+     */
     height: number;
+
+    /**
+     * Aspect ratio of the card (width / height).
+     * @default null
+     */
     aspectRatio: number;
+
+    /**
+     * Quality of the card cover image.
+     * @default StoriesListCardCoverQuality.High
+     */
     coverQuality: StoriesListCardCoverQuality | "medium" | "high";
+
+    /**
+     * Enables lazy loading for the card cover image.
+     * @default false
+     */
     coverLazyLoading: boolean;
+
+    /**
+     * Visual variant of the card.
+     * @default StoriesListCardViewVariant.RECTANGLE
+     */
     variant: StoriesListCardViewVariant | "circle" | "quad" | "rectangle";
+
+    /**
+     * Card border settings.
+     */
     border: {
+        /**
+         * Border radius in pixels.
+         * @default 21
+         */
         radius: number;
+
+        /**
+         * Border color.
+         * @default "black"
+         */
         color: string;
+
+        /**
+         * Border width in pixels.
+         * @default 2
+         */
         width: number;
+
+        /**
+         * Gap between border and card content in pixels.
+         * @default 5
+         */
         gap: number;
+
+        /**
+         * Border gradient, if applicable.
+         * @default null
+         */
         gradient: string;
     };
+
+    /**
+     * CSS box-shadow property for the card.
+     * @default null
+     */
     boxShadow: string;
+
+    /**
+     * CSS drop-shadow property for the card.
+     * @default null
+     */
     dropShadow: string;
+
+    /**
+     * Opacity of the card (0 to 1).
+     * @default null
+     */
     opacity: number;
+
+    /**
+     * Mask settings for the card.
+     */
     mask: {
+        /**
+         * Mask color.
+         * @default null
+         */
         color: string;
+
+        /**
+         * Linear gradient for the mask.
+         * @default null
+         */
         linearGradient: {
             direction: string;
             points: Array<string>;
         };
     };
+
+    /**
+     * SVG masks for the card.
+     * @default null
+     */
     svgMask: {
         cardMask: string;
         overlayMask: Array<{
@@ -105,24 +332,95 @@ export type StoriesListCardOptions = RecursivePartial<{
             background: string;
         }>;
     };
+
+    /**
+     * Styles applied to the card when it is in the "opened" state.
+     */
     opened: {
+        /**
+         * Border settings for the opened card.
+         * These override the default border settings when the card is opened.
+         * All properties are optional and if null, the default card border settings are used.
+         */
         border: {
+            /**
+             * Border radius for the opened card.
+             * @default null (inherits from default card border radius)
+             */
             radius: number;
+
+            /**
+             * Border color for the opened card.
+             * @default null (inherits from default card border color)
+             */
             color: string;
+
+            /**
+             * Border width for the opened card.
+             * @default null (inherits from default card border width)
+             */
             width: number;
+
+            /**
+             * Gap between border and content for the opened card.
+             * @default null (inherits from default card border gap)
+             */
             gap: number;
+
+            /**
+             * Border gradient for the opened card.
+             * @default null (inherits from default card border gradient)
+             */
             gradient: string;
         };
+
+        /**
+         * CSS box-shadow property for the opened card.
+         * This shadow is applied instead of the default boxShadow when the card is opened.
+         * @default null (inherits from default card boxShadow)
+         */
         boxShadow: string;
+
+        /**
+         * CSS drop-shadow property for the opened card.
+         * Overrides default dropShadow when opened.
+         * @default null (inherits from default card dropShadow)
+         */
         dropShadow: string;
+
+        /**
+         * Opacity of the opened card (0 to 1).
+         * Overrides default opacity when opened.
+         * @default null (inherits from default card opacity)
+         */
         opacity: number;
+
+        /**
+         * Mask settings for the opened card.
+         * Overrides default mask when opened.
+         */
         mask: {
+            /**
+             * Mask color for the opened card.
+             * @default null (inherits from default mask color)
+             */
             color: string;
+
+            /**
+             * Linear gradient mask for the opened card.
+             * @default null (inherits from default mask linear gradient)
+             */
             linearGradient: {
                 direction: string;
                 points: Array<string>;
             };
         };
+
+        /**
+         * SVG masks for the opened card.
+         * Overrides default svgMask when opened.
+         * @default null (inherits from default svgMask)
+         */
         svgMask: {
             cardMask: string;
             overlayMask: Array<{

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

@@ -1,20 +1,54 @@
 import { RecursivePartial } from "../global";
 import { CloseButtonPosition } from "./appearanceCommon";
 
+/**
+ * Configuration options for customizing the appearance of the favorite story reader component.
+ */
 export type StoryFavoriteReaderOptions = RecursivePartial<{
+    /**
+     * Title block styling.
+     */
     title: {
+        /** Text content of the title. */
         content: string;
+
+        /** Font used for the title. */
         font: string;
+
+        /** Text color of the title. */
         color: string;
+
+        /** Background color behind the title. */
         backgroundColor: string;
     };
+
+    /**
+     * Position of the close button (e.g., top-left, top-right).
+     */
     closeButtonPosition: CloseButtonPosition;
+
+    /**
+     * Styling for the close button.
+     */
     closeButton: {
         svgSrc: {
+            /** Source URL or inline SVG for the button's default (base) state. */
             baseState: string;
         };
     };
+
+    /**
+     * Offset from the top of the header (in pixels).
+     */
     headerTopOffset: number;
+
+    /**
+     * Offset from the bottom of the screen/component (in pixels).
+     */
     bottomOffset: number;
+
+    /**
+     * Background color of the favorite story reader.
+     */
     backgroundColor: string;
 }>;