@datlv-trustshop/shopify-inapp-components 0.1.9

package/README.md

@@ -0,0 +1,141 @@
+# @trustshop/shopify-inapp-components
+
+React TypeScript components for Shopify in-app dashboard content management.
+
+## Installation
+
+```bash
+npm install @trustshop/shopify-inapp-components
+```
+
+## Quick Start
+
+```tsx
+import {
+  DashboardProvider,
+  TopBanner,
+  useTopBanner,
+} from "@trustshop/shopify-inapp-components";
+
+function App() {
+  return (
+    <DashboardProvider
+      config={{
+        apiUrl: "https://your-api.com/dashboard",
+        cacheTime: 300000, // 5 minutes
+      }}
+    >
+      <YourDashboard />
+    </DashboardProvider>
+  );
+}
+
+function YourDashboard() {
+  const topBanner = useTopBanner();
+
+  return (
+    <TopBanner
+      renderBanner={(banner, handlers) => (
+        <Banner onDismiss={handlers.onClose}>
+          <h2>{banner.title}</h2>
+          <p>{banner.description}</p>
+          <button onClick={handlers.onAction}>{banner.linkText}</button>
+        </Banner>
+      )}
+    />
+  );
+}
+```
+
+## Features
+
+- 🎯 **Singleton Pattern**: Efficient data management with single instance
+- 🔄 **Smart Caching**: Automatic cache management with TTL
+- 🎨 **Flexible UI**: Render prop pattern for custom component styling
+- 🔒 **Type Safe**: Full TypeScript support
+- ⚛️ **React 18+**: Support for StrictMode and SSR
+- 🚀 **Performance**: Optimized for production use
+
+## Components
+
+### DashboardProvider
+
+Main provider component that manages dashboard state.
+
+### Banner Components
+
+- `TopBanner` - Top notification banner
+- `PopupBanner` - Modal/popup banner
+- `FooterBanner` - Footer sticky banner
+
+### Content Components
+
+- `AppList` - Display apps by category
+- `ArticleList` - Display articles/blog posts
+- `WhatsNewList` - Product updates
+
+## Hooks
+
+- `useDashboard()` - Access full dashboard context
+- `useTopBanner()` - Get top banner data
+- `usePopupBanner()` - Get popup banner data
+- `useFooterBanner()` - Get footer banner data
+- `useApps()` - Access apps data
+- `useArticles()` - Access articles data
+- `useWhatsNew()` - Access product updates
+
+## Configuration
+
+```typescript
+interface DashboardConfig {
+  apiUrl: string;
+  cacheTime?: number; // Cache TTL in ms (default: 5 minutes)
+  retryAttempts?: number; // Retry attempts on failure (default: 3)
+  retryDelay?: number; // Delay between retries in ms (default: 1000)
+  headers?: Record<string, string>;
+}
+```
+
+## API Response Adapter
+
+The SDK automatically adapts various API response formats to a consistent internal structure, supporting flexible field names and nested data.
+
+## Development
+
+### Local Testing
+
+For UI testing and development, use the `sdk-test-app` folder:
+
+```bash
+cd sdk-test-app
+npm install
+npm run dev
+```
+
+This will start a development server at `http://localhost:3002` with:
+
+- Real API integration (proxied to avoid CORS)
+- Production-ready WhatsNew component
+- Clean UI identical to deployment environment
+
+### Project Structure
+
+```
+shopify-inapp-components/
+├── src/              # Component source code
+├── dist/             # Built package
+├── sdk-test-app/     # Development testing environment
+└── examples/         # Usage examples
+```
+
+## License
+
+MIT
+
+## Author
+
+Your Name
+
+## Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.

package/dist/components/AppList.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import { AppItem, AppGroup } from "../types";
+export interface AppListProps {
+    group?: AppGroup;
+    className?: string;
+    onAppClick?: (app: AppItem) => void;
+    showRating?: boolean;
+    showInstalls?: boolean;
+    showPrice?: boolean;
+    limit?: number;
+    gridColumns?: number;
+}
+export declare const AppList: React.FC<AppListProps>;

package/dist/components/AppList.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useApps } from "../hooks/useApps";
+export const AppList = ({ group, className = "", onAppClick, showRating = true, showInstalls = false, showPrice = false, limit, gridColumns = 3, }) => {
+    const apps = useApps(group);
+    const displayApps = limit ? apps.slice(0, limit) : apps;
+    const handleAppClick = (app) => {
+        if (app.link) {
+            window.open(app.link, "_blank");
+        }
+        onAppClick?.(app);
+    };
+    if (displayApps.length === 0) {
+        return (_jsx("div", { className: `app-list-empty ${className}`, children: _jsx("p", { style: { textAlign: "center", color: "#999" }, children: "No apps available" }) }));
+    }
+    return (_jsx("div", { className: `app-list ${className}`, style: {
+            display: "grid",
+            gridTemplateColumns: `repeat(${gridColumns}, 1fr)`,
+            gap: "20px",
+        }, children: displayApps.map((app) => (_jsxs("div", { className: "app-item", style: {
+                padding: "16px",
+                border: "1px solid #e0e0e0",
+                borderRadius: "8px",
+                cursor: "pointer",
+                transition: "box-shadow 0.2s",
+                backgroundColor: "#ffffff",
+            }, onClick: () => handleAppClick(app), onMouseEnter: (e) => {
+                e.currentTarget.style.boxShadow = "0 4px 8px rgba(0, 0, 0, 0.1)";
+            }, onMouseLeave: (e) => {
+                e.currentTarget.style.boxShadow = "none";
+            }, children: [_jsxs("div", { style: {
+                        display: "flex",
+                        alignItems: "start",
+                        marginBottom: "12px",
+                    }, children: [app.icon && (_jsx("img", { src: app.icon, alt: app.title, style: {
+                                width: "48px",
+                                height: "48px",
+                                borderRadius: "8px",
+                                marginRight: "12px",
+                            } })), _jsxs("div", { style: { flex: 1 }, children: [_jsx("h3", { style: {
+                                        margin: "0 0 4px 0",
+                                        fontSize: "16px",
+                                        fontWeight: "600",
+                                        color: "#333",
+                                    }, children: app.title }), app.featured && (_jsx("span", { style: {
+                                        display: "inline-block",
+                                        padding: "2px 6px",
+                                        backgroundColor: "#ffd700",
+                                        color: "#333",
+                                        fontSize: "10px",
+                                        fontWeight: "bold",
+                                        borderRadius: "3px",
+                                    }, children: "FEATURED" }))] })] }), _jsx("p", { style: {
+                        margin: "0 0 12px 0",
+                        fontSize: "14px",
+                        color: "#666",
+                        lineHeight: "1.4",
+                    }, children: app.description }), _jsxs("div", { style: {
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "space-between",
+                        fontSize: "12px",
+                        color: "#999",
+                    }, children: [_jsxs("div", { style: { display: "flex", alignItems: "center", gap: "12px" }, children: [showRating && app.rating && (_jsxs("div", { style: { display: "flex", alignItems: "center" }, children: [_jsx("span", { style: { color: "#ffa500", marginRight: "4px" }, children: "\u2605" }), _jsx("span", { children: app.rating.toFixed(1) })] })), showInstalls && app.installs && (_jsxs("div", { children: [app.installs.toLocaleString(), " installs"] }))] }), showPrice && (_jsx("div", { style: { fontWeight: "600", color: "#333" }, children: app.price || "Free" }))] })] }, app.id))) }));
+};

package/dist/components/ArticleList.d.ts

@@ -0,0 +1,20 @@
+import React from "react";
+import { ArticleItem } from "../types";
+export interface ArticleListProps {
+    limit?: number;
+    className?: string;
+    onArticleClick?: (article: ArticleItem) => void;
+    layout?: "slide" | "list" | "grid";
+    showThumbnail?: boolean;
+    showAuthor?: boolean;
+    showDate?: boolean;
+    currentIndex?: number;
+    showNavigation?: boolean;
+    autoPlay?: boolean;
+    autoPlayInterval?: number;
+    onSlideChange?: (index: number) => void;
+    renderButton?: (article: ArticleItem, handlers: {
+        onClick: () => void;
+    }) => React.ReactNode;
+}
+export declare const ArticleList: React.FC<ArticleListProps>;

package/dist/components/ArticleList.js

@@ -0,0 +1,174 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { Button, Box } from "@shopify/polaris";
+import { ExternalIcon } from "@shopify/polaris-icons";
+import { useDashboard } from "../hooks/useDashboard";
+export const ArticleList = ({ limit, className = "", onArticleClick, layout = "slide", showThumbnail = true, currentIndex: externalCurrentIndex, showNavigation = true, autoPlay = false, autoPlayInterval = 5000, onSlideChange, renderButton, }) => {
+    const { data } = useDashboard();
+    const articles = data?.articles || [];
+    const displayArticles = limit ? articles.slice(0, limit) : articles;
+    const [isMobile, setIsMobile] = useState(false);
+    const [internalCurrentIndex, setInternalCurrentIndex] = useState(0);
+    const currentIndex = externalCurrentIndex !== undefined
+        ? externalCurrentIndex
+        : internalCurrentIndex;
+    useEffect(() => {
+        const checkMobile = () => {
+            setIsMobile(window.innerWidth <= 768);
+        };
+        checkMobile();
+        window.addEventListener("resize", checkMobile);
+        return () => window.removeEventListener("resize", checkMobile);
+    }, []);
+    useEffect(() => {
+        if (!autoPlay || layout !== "slide" || displayArticles.length <= 1)
+            return;
+        const interval = setInterval(() => {
+            const newIndex = (currentIndex + 1) % displayArticles.length;
+            if (externalCurrentIndex === undefined) {
+                setInternalCurrentIndex(newIndex);
+            }
+            onSlideChange?.(newIndex);
+        }, autoPlayInterval);
+        return () => clearInterval(interval);
+    }, [
+        autoPlay,
+        layout,
+        displayArticles.length,
+        currentIndex,
+        autoPlayInterval,
+        externalCurrentIndex,
+        onSlideChange,
+    ]);
+    const handleSlideChange = (newIndex) => {
+        if (externalCurrentIndex === undefined) {
+            setInternalCurrentIndex(newIndex);
+        }
+        onSlideChange?.(newIndex);
+    };
+    const handlePrevious = () => {
+        const newIndex = currentIndex === 0 ? displayArticles.length - 1 : currentIndex - 1;
+        handleSlideChange(newIndex);
+    };
+    const handleNext = () => {
+        const newIndex = (currentIndex + 1) % displayArticles.length;
+        handleSlideChange(newIndex);
+    };
+    const handleArticleClick = (article) => {
+        if (article.link) {
+            window.open(article.link, "_blank");
+        }
+        onArticleClick?.(article);
+    };
+    if (displayArticles.length === 0) {
+        return (_jsx("div", { className: className, style: { width: "100%" }, children: _jsx("p", { style: { textAlign: "center", color: "#999" }, children: "No articles available" }) }));
+    }
+    if (layout === "slide") {
+        let slidePercentage;
+        if (isMobile) {
+            slidePercentage = currentIndex * 90;
+        }
+        else {
+            const itemWidth = 100 / displayArticles.length;
+            slidePercentage = currentIndex * itemWidth * 1.5;
+        }
+        return (_jsxs("div", { className: className, style: {
+                position: "relative",
+                overflow: "hidden",
+                width: "100%",
+            }, children: [_jsxs("div", { style: {
+                        overflow: "hidden",
+                        position: "relative",
+                    }, children: [_jsx("div", { style: {
+                                display: "flex",
+                                transition: "transform 0.5s ease-in-out",
+                                gap: "20px",
+                                willChange: "transform",
+                                transform: `translateX(-${slidePercentage}%)`,
+                            }, children: displayArticles.map((article) => (_jsx("div", { style: {
+                                    flex: "0 0 auto",
+                                    width: isMobile ? "90%" : "270px",
+                                }, children: _jsxs("div", { style: {
+                                        display: "flex",
+                                        flexDirection: "column",
+                                        gap: "4px",
+                                    }, children: [_jsxs("div", { style: {
+                                                display: "flex",
+                                                flexDirection: "column",
+                                                gap: "10px",
+                                            }, children: [showThumbnail && article.imageUrl && (_jsx("div", { style: {
+                                                        width: isMobile ? "100%" : "270px",
+                                                        height: "152px",
+                                                        overflow: "hidden",
+                                                        borderRadius: "8px",
+                                                    }, children: _jsx("img", { src: article.imageUrl ||
+                                                            "https://asset.trustshop.io/dashboard/news-review-summary.png", alt: article.title, style: {
+                                                            width: "100%",
+                                                            height: "100%",
+                                                            objectFit: "cover",
+                                                        } }) })), article.category && (_jsx("div", { style: {
+                                                        color: "var(--p-color-text-emphasis, #616161)",
+                                                    }, children: _jsx("span", { style: { fontSize: "13px" }, children: article.category }) }))] }), _jsxs("div", { style: {
+                                                display: "flex",
+                                                flexDirection: "column",
+                                                gap: "6px",
+                                            }, children: [_jsx("h3", { style: {
+                                                        margin: 0,
+                                                        fontSize: "14px",
+                                                        fontWeight: "bold",
+                                                        color: "#303030",
+                                                        lineHeight: "1.4",
+                                                    }, children: article.title }), renderButton ? (renderButton(article, {
+                                                    onClick: () => handleArticleClick(article),
+                                                })) : (_jsx(Box, { children: _jsx(Button, { icon: ExternalIcon, onClick: () => handleArticleClick(article), variant: "plain", children: article.link ? "Read article" : "Learn more" }) }))] })] }) }, article.id))) }), showNavigation && displayArticles.length > 1 && (_jsxs(_Fragment, { children: [_jsx("button", { onClick: handlePrevious, "aria-label": "Previous slide", style: {
+                                        position: "absolute",
+                                        top: "50%",
+                                        transform: "translateY(-50%)",
+                                        left: "10px",
+                                        background: "rgba(255, 255, 255, 0.9)",
+                                        border: "1px solid #e3e3e3",
+                                        borderRadius: "50%",
+                                        width: "32px",
+                                        height: "32px",
+                                        display: "flex",
+                                        alignItems: "center",
+                                        justifyContent: "center",
+                                        cursor: "pointer",
+                                        zIndex: 10,
+                                        transition: "background-color 0.2s",
+                                        padding: 0,
+                                    }, children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "#303030", children: _jsx("path", { d: "M10.5 13L5.5 8l5-5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", fill: "none" }) }) }), _jsx("button", { onClick: handleNext, "aria-label": "Next slide", style: {
+                                        position: "absolute",
+                                        top: "50%",
+                                        transform: "translateY(-50%)",
+                                        right: "10px",
+                                        background: "rgba(255, 255, 255, 0.9)",
+                                        border: "1px solid #e3e3e3",
+                                        borderRadius: "50%",
+                                        width: "32px",
+                                        height: "32px",
+                                        display: "flex",
+                                        alignItems: "center",
+                                        justifyContent: "center",
+                                        cursor: "pointer",
+                                        zIndex: 10,
+                                        transition: "background-color 0.2s",
+                                        padding: 0,
+                                    }, children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "#303030", children: _jsx("path", { d: "M5.5 13l5-5-5-5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", fill: "none" }) }) })] }))] }), showNavigation && displayArticles.length > 1 && (_jsx("div", { style: {
+                        display: "flex",
+                        justifyContent: "center",
+                        gap: "8px",
+                        marginTop: "16px",
+                    }, children: displayArticles.map((_, index) => (_jsx("button", { onClick: () => handleSlideChange(index), "aria-label": `Go to slide ${index + 1}`, style: {
+                            width: "8px",
+                            height: "8px",
+                            borderRadius: "50%",
+                            backgroundColor: index === currentIndex ? "#303030" : "#e3e3e3",
+                            cursor: "pointer",
+                            transition: "background-color 0.3s",
+                            border: "none",
+                            padding: 0,
+                        } }, index))) }))] }));
+    }
+    return null;
+};

package/dist/components/ArticleSlide.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import { ArticleItem } from "../types";
+export interface ArticleSlideProps {
+    limit?: number;
+    className?: string;
+    onArticleClick?: (article: ArticleItem) => void;
+    autoPlay?: boolean;
+    autoPlayInterval?: number;
+    showNavigation?: boolean;
+    renderButton?: (article: ArticleItem, handlers: {
+        onClick: () => void;
+    }) => React.ReactNode;
+}
+export declare const ArticleSlide: React.FC<ArticleSlideProps>;

package/dist/components/ArticleSlide.js

@@ -0,0 +1,151 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { useDashboard } from "../hooks/useDashboard";
+export const ArticleSlide = ({ limit, className = "", onArticleClick, autoPlay = false, autoPlayInterval = 5000, showNavigation = true, renderButton, }) => {
+    const { data } = useDashboard();
+    const articles = data?.articles || [];
+    const displayArticles = limit ? articles.slice(0, limit) : articles;
+    const [currentIndex, setCurrentIndex] = useState(0);
+    const [isMobile, setIsMobile] = useState(false);
+    useEffect(() => {
+        const checkMobile = () => {
+            setIsMobile(window.innerWidth <= 768);
+        };
+        checkMobile();
+        window.addEventListener("resize", checkMobile);
+        return () => window.removeEventListener("resize", checkMobile);
+    }, []);
+    useEffect(() => {
+        if (!autoPlay || displayArticles.length <= 1)
+            return;
+        const interval = setInterval(() => {
+            setCurrentIndex((prev) => (prev + 1) % displayArticles.length);
+        }, autoPlayInterval);
+        return () => clearInterval(interval);
+    }, [autoPlay, autoPlayInterval, displayArticles.length]);
+    const handleArticleClick = (article) => {
+        if (article.link) {
+            window.open(article.link, "_blank");
+        }
+        onArticleClick?.(article);
+    };
+    const handlePrevious = () => {
+        setCurrentIndex((prev) => prev === 0 ? displayArticles.length - 1 : prev - 1);
+    };
+    const handleNext = () => {
+        setCurrentIndex((prev) => (prev + 1) % displayArticles.length);
+    };
+    if (displayArticles.length === 0) {
+        return (_jsx("div", { className: className, style: { width: "100%" }, children: _jsx("p", { style: { textAlign: "center", color: "#999" }, children: "No articles available" }) }));
+    }
+    let slidePercentage;
+    if (isMobile) {
+        slidePercentage = currentIndex * 90;
+    }
+    else {
+        const itemWidth = 100 / displayArticles.length;
+        slidePercentage = currentIndex * itemWidth * 1.5;
+    }
+    return (_jsxs("div", { className: className, style: {
+            position: "relative",
+            overflow: "hidden",
+            width: "100%",
+        }, children: [_jsxs("div", { style: {
+                    overflow: "hidden",
+                    position: "relative",
+                }, children: [_jsx("div", { style: {
+                            display: "flex",
+                            transition: "transform 0.5s ease-in-out",
+                            gap: "20px",
+                            willChange: "transform",
+                            transform: `translateX(-${slidePercentage}%)`,
+                        }, children: displayArticles.map((article) => (_jsx("div", { style: {
+                                flex: "0 0 auto",
+                                width: isMobile ? "90%" : "270px",
+                            }, children: _jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "4px" }, children: [_jsxs("div", { style: {
+                                            display: "flex",
+                                            flexDirection: "column",
+                                            gap: "10px",
+                                        }, children: [article.thumbnail && (_jsx("div", { style: {
+                                                    width: isMobile ? "100%" : "270px",
+                                                    height: "152px",
+                                                    overflow: "hidden",
+                                                    borderRadius: "8px",
+                                                }, children: _jsx("img", { src: article.thumbnail ||
+                                                        "https://asset.trustshop.io/dashboard/news-review-summary.png", alt: article.title, style: {
+                                                        width: "100%",
+                                                        height: "100%",
+                                                        objectFit: "cover",
+                                                    } }) })), article.category && (_jsx("div", { style: { color: "var(--p-color-text-emphasis, #616161)" }, children: _jsx("span", { style: { fontSize: "13px" }, children: article.category }) }))] }), _jsxs("div", { style: {
+                                            display: "flex",
+                                            flexDirection: "column",
+                                            gap: "6px",
+                                        }, children: [_jsx("h3", { style: {
+                                                    margin: 0,
+                                                    fontSize: "14px",
+                                                    fontWeight: "bold",
+                                                    color: "#303030",
+                                                    lineHeight: "1.4",
+                                                }, children: article.title }), renderButton ? (renderButton(article, {
+                                                onClick: () => handleArticleClick(article),
+                                            })) : (_jsxs("button", { onClick: () => handleArticleClick(article), style: {
+                                                    background: "none",
+                                                    border: "none",
+                                                    color: "var(--p-color-text, #303030)",
+                                                    cursor: "pointer",
+                                                    padding: "4px 0",
+                                                    fontSize: "14px",
+                                                    textAlign: "left",
+                                                    display: "inline-flex",
+                                                    alignItems: "center",
+                                                    gap: "4px",
+                                                }, children: [article.link ? "Read article" : "Learn more", _jsxs("svg", { width: "14", height: "14", viewBox: "0 0 20 20", fill: "currentColor", children: [_jsx("path", { d: "M17 2a1 1 0 0 1 1 1v4a1 1 0 1 1-2 0V4.414l-7.293 7.293a1 1 0 0 1-1.414-1.414L14.586 3H12a1 1 0 1 1 0-2h5Z" }), _jsx("path", { d: "M3 6a1 1 0 0 1 1-1h5a1 1 0 1 1 0 2H5v10h10v-4a1 1 0 1 1 2 0v5a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V6Z" })] })] }))] })] }) }, article.id))) }), showNavigation && displayArticles.length > 1 && (_jsxs(_Fragment, { children: [_jsx("button", { onClick: handlePrevious, "aria-label": "Previous slide", style: {
+                                    position: "absolute",
+                                    top: "50%",
+                                    transform: "translateY(-50%)",
+                                    left: "10px",
+                                    background: "rgba(255, 255, 255, 0.9)",
+                                    border: "1px solid #e3e3e3",
+                                    borderRadius: "50%",
+                                    width: "32px",
+                                    height: "32px",
+                                    display: "flex",
+                                    alignItems: "center",
+                                    justifyContent: "center",
+                                    cursor: "pointer",
+                                    zIndex: 10,
+                                    transition: "background-color 0.2s",
+                                    padding: 0,
+                                }, children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "#303030", children: _jsx("path", { d: "M10.5 13L5.5 8l5-5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", fill: "none" }) }) }), _jsx("button", { onClick: handleNext, "aria-label": "Next slide", style: {
+                                    position: "absolute",
+                                    top: "50%",
+                                    transform: "translateY(-50%)",
+                                    right: "10px",
+                                    background: "rgba(255, 255, 255, 0.9)",
+                                    border: "1px solid #e3e3e3",
+                                    borderRadius: "50%",
+                                    width: "32px",
+                                    height: "32px",
+                                    display: "flex",
+                                    alignItems: "center",
+                                    justifyContent: "center",
+                                    cursor: "pointer",
+                                    zIndex: 10,
+                                    transition: "background-color 0.2s",
+                                    padding: 0,
+                                }, children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "#303030", children: _jsx("path", { d: "M5.5 13l5-5-5-5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", fill: "none" }) }) })] }))] }), showNavigation && displayArticles.length > 1 && (_jsx("div", { style: {
+                    display: "flex",
+                    justifyContent: "center",
+                    gap: "8px",
+                    marginTop: "16px",
+                }, children: displayArticles.map((_, index) => (_jsx("button", { onClick: () => setCurrentIndex(index), "aria-label": `Go to slide ${index + 1}`, style: {
+                        width: "8px",
+                        height: "8px",
+                        borderRadius: "50%",
+                        backgroundColor: index === currentIndex ? "#303030" : "#e3e3e3",
+                        cursor: "pointer",
+                        transition: "background-color 0.3s",
+                        border: "none",
+                        padding: 0,
+                    } }, index))) }))] }));
+};

package/dist/components/FooterBanner.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import { BannerItem } from "../types";
+export interface FooterBannerProps {
+    className?: string;
+    onClose?: () => void;
+    onAction?: (banner: BannerItem) => void;
+    closable?: boolean;
+    sticky?: boolean;
+}
+export declare const FooterBanner: React.FC<FooterBannerProps>;