@inappstory/react-sdk 1.7.3 → 1.7.5

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/storyReader.d.ts

@@ -0,0 +1,260 @@
+import { CloseButtonPosition } from "./appearanceCommon";
+import { SharePanel } from "./sharePanel";
+import { Nullable, RecursivePartial } from "../global";
+
+/**
+ * Defines the swipe animation style used when navigating between stories.
+ *
+ * This affects the visual transition effect when the user swipes to the next or previous story.
+ */
+export declare enum StoryReaderSwipeStyle {
+    /**
+     * Flat swipe with no 3D or overlay effects.
+     * Simple, fast, and performance-optimized.
+     */
+    FLAT = "flat",
+
+    /**
+     * Cover swipe where the next story over the current one.
+     * Offers a layered visual effect.
+     */
+    COVER = "cover",
+
+    /**
+     * 3D cube rotation effect between stories.
+     * Visually rich but more performance-intensive.
+     */
+    CUBE = "cube"
+}
+/**
+ * Enum representing story reader layout variants
+ *
+ * @property {string} Classic - Classic display variant (default)
+ * @property {string} Modern - Modern experimental display variant
+ */
+export declare enum StoryReaderLayout {
+    /** Classic display variant (default) */
+    Classic = "classic",
+
+    /** Modern experimental display variant */
+    Modern = "modern"
+}
+
+/**
+ * Appearance options for Story Reader.
+ */
+export type StoryReaderOptions = RecursivePartial<{
+    /**
+     * Position of the close button.
+     *
+     * @default CloseButtonPosition.END
+     */
+    closeButtonPosition: CloseButtonPosition | "left" | "right";
+
+    /**
+     * Swipe animation style for switching between stories.
+     *
+     * @default StoryReaderSwipeStyle.FLAT
+     */
+    scrollStyle: StoryReaderSwipeStyle | "flat" | "cover" | "cube";
+
+    /**
+     * Vertical offset for the timeline block (in pixels).
+     * @default 8
+     */
+    timelineBlockTopOffset: Nullable<number>;
+
+    /**
+     * Vertical offset for the bottom action panel (in pixels).
+     * @default 0
+     */
+    actionPanelBottomOffset: Nullable<number>;
+
+    /**
+     * Border radius applied to the story container (in pixels).
+     *
+     * @default 12
+     */
+    borderRadius: number;
+
+    /**
+     * Enables the experimental modern layout variant.
+     *
+     * @default false
+     * @deprecated Use `layout` property instead
+     */
+    useExperimentalModernVariant: boolean;
+
+    /**
+     * Layout style for rendering stories.
+     * Can be `'classic'` or `'modern'`.
+     *
+     * @default StoryReaderLayout.Classic
+     */
+    layout: StoryReaderLayout;
+
+    /**
+     * Loader configuration, supports default and custom options.
+     */
+    loader: {
+        default: {
+            /**
+             * Primary loader color.
+             * @default #FFF
+             */
+            color: string;
+            /**
+             * Accent loader color.
+             * @default transparent
+             */
+            accentColor: string;
+        };
+    };
+
+    /**
+     * Whether the story list should loop back to the beginning after the last story.
+     *
+     * @default false
+     */
+    recycleStoriesList: boolean;
+
+    /**
+     * Automatically closes the viewer after the last slide, using a timer.
+     *
+     * @default false
+     */
+    closeOnLastSlideByTimer: boolean;
+
+    /**
+     * Configuration for the share panel.
+     * @see https://docs.inappstory.com/sdk-guides/react-sdk/share-panel.html
+     */
+    sharePanel: SharePanel<string>;
+
+    /**
+     * Global backdrop settings for all slides.
+     */
+    commonBackdrop: {
+        /**
+         * Background color.
+         * @default
+         * rgba(51, 51, 51, 1)
+         */
+        color: string;
+        /**
+         * CSS backdrop filter (e.g., `blur(10px)`).
+         * @default null
+         */
+        backdropFilter: string;
+    };
+
+    /**
+     * Slide-specific backdrop settings.
+     */
+    slideBackdrop: {
+        /**
+         * Opacity of the backdrop layer.
+         * @default 0.56
+         */
+        opacity: number;
+        /**
+         * Blur intensity applied to the backdrop.
+         * @default 30
+         */
+        blur: number;
+        /**
+         * Array of CSS linear-gradient strings used as overlays.
+         * @default
+         * ["rgba(0, 0, 0, 0.1) 0%", "rgba(0, 0, 0, 0.9) 100%"]
+         */
+        linearGradientOverlay: string[];
+    };
+
+    /**
+     * Close button configuration.
+     */
+    closeButton: {
+        svgSrc: {
+            /**
+             * Base (default) SVG icon for the close button.
+             */
+            baseState: string;
+        };
+    };
+
+    /**
+     * Like button configuration.
+     */
+    likeButton: {
+        svgSrc: {
+            /**
+             * SVG icon for the default (inactive) state.
+             */
+            baseState: string;
+            /**
+             * SVG icon for the active (liked) state.
+             */
+            activeState: string;
+        };
+    };
+
+    /**
+     * Dislike button configuration.
+     */
+    dislikeButton: {
+        svgSrc: {
+            /**
+             * SVG icon for the default (inactive) state.
+             */
+            baseState: string;
+            /**
+             * SVG icon for the active (disliked) state.
+             */
+            activeState: string;
+        };
+    };
+
+    /**
+     * Favorite button configuration.
+     */
+    favoriteButton: {
+        svgSrc: {
+            /**
+             * SVG icon for the default (not-favorited) state.
+             */
+            baseState: string;
+            /**
+             * SVG icon for the active (favorited) state.
+             */
+            activeState: string;
+        };
+    };
+
+    /**
+     * Mute button configuration.
+     */
+    muteButton: {
+        svgSrc: {
+            /**
+             * SVG icon for the unmuted state.
+             */
+            baseState: string;
+            /**
+             * SVG icon for the muted state.
+             */
+            activeState: string;
+        };
+    };
+
+    /**
+     * Share button configuration.
+     */
+    shareButton: {
+        svgSrc: {
+            /**
+             * SVG icon for the share button.
+             */
+            baseState: string;
+        };
+    };
+}>;