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

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