fragment-headless-sdk 1.0.1 → 1.0.3

package/dist/components/Announcement/AnnouncementButton.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import { IAnnouncementContent } from "../../types";
+export default function AnnouncementButton({ content, }: {
+    content: IAnnouncementContent;
+}): React.JSX.Element;

package/dist/components/{Banner/BannerButton.js → Announcement/AnnouncementButton.js}

@@ -1,7 +1,7 @@
 import React from "react";
 import { ButtonType } from "../../constants";
-export default function BannerButton({ content }) {
-    return (React.createElement("a", { href: content.buttonLink || "#", className: "whitespace-nowrap rounded-md px-3 py-2 font-medium text-base no-underline text-white hover:cursor-pointer hover:opacity-70", style: {
+export default function AnnouncementButton({ content, }) {
+    return (React.createElement("a", { href: content.buttonLink || "#", className: "whitespace-nowrap rounded-md px-3 py-2 font-semibold text-sm no-underline text-white hover:cursor-pointer hover:opacity-70 py-2", style: {
             ...(content.buttonType === ButtonType.Text
                 ? {
                     textDecoration: "underline",

package/dist/components/Announcement/AnnouncementStyles.d.ts

@@ -0,0 +1,3 @@
+export declare function AnnouncementStyles({ seconds }: {
+    seconds?: number;
+}): null;

package/dist/components/{Banner/BannerStyles.js → Announcement/AnnouncementStyles.js}

@@ -1,9 +1,9 @@
 "use client";
 import { useEffect } from "react";
-export function BannerStyles({ seconds = 15 }) {
+export function AnnouncementStyles({ seconds = 15 }) {
     useEffect(() => {
         const style = document.createElement("style");
-        style.id = "banner-styles"; // Ensure unique ID to avoid duplicates
+        style.id = "announcement-styles"; // Ensure unique ID to avoid duplicates
         style.textContent = `
       @keyframes marquee {
         0% {
@@ -22,11 +22,11 @@ export function BannerStyles({ seconds = 15 }) {
         padding-bottom: 4rem !important;
       }
     `;
-        if (!document.getElementById("banner-styles")) {
+        if (!document.getElementById("announcement-styles")) {
             document.head.appendChild(style);
         }
         return () => {
-            document.getElementById("banner-styles")?.remove();
+            document.getElementById("announcement-styles")?.remove();
         };
     }, [seconds]);
     return null;

package/dist/components/{Banner → Announcement}/CountdownTimer.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { IBannerContent } from "../../types";
+import { IAnnouncementContent } from "../../types";
 export default function CountdownTimer({ content, }: {
-    content: IBannerContent;
+    content: IAnnouncementContent;
 }): React.JSX.Element;

package/dist/components/{Banner → Announcement}/CountdownTimer.js

@@ -26,12 +26,12 @@ export default function CountdownTimer({ content, }) {
         return () => clearInterval(interval);
     }, [content.counterEndDate]);
     const renderBlock = (value, label) => (React.createElement("div", { className: "flex flex-col items-center" },
-        React.createElement("div", { className: "flex gap-1" }, value.split("").map((digit, i) => (React.createElement("span", { key: i, className: "w-6 h-7 rounded bg-black text-white text-xl font-bold flex items-center justify-center", style: {
+        React.createElement("div", { className: "flex gap-1" }, value.split("").map((digit, i) => (React.createElement("span", { key: i, className: "w-5 h-6 rounded bg-black text-white text-base font-bold flex items-center justify-center", style: {
                 backgroundColor: content.counterBgColor || "#000000",
                 color: content.counterDigitColor || "#FFFFFF",
             } }, digit)))),
-        React.createElement("span", { className: "mt-0.5 text-xs" }, label)));
-    return (React.createElement("div", { className: "flex items-center gap-1 bg-gray-100 rounded" },
+        React.createElement("span", { className: "mt-0.5 text-[10px]" }, label)));
+    return (React.createElement("div", { className: "flex items-center justify-center gap-1 p-2" },
         renderBlock(timeLeft.days, "Days"),
         React.createElement("span", { className: "text-xl font-semibold -mt-4" }, ":"),
         renderBlock(timeLeft.hours, "Hours"),

package/dist/components/Announcement/index.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { AnnouncementType } from "../../constants";
+import { IAnnouncementContent } from "../../types";
+export default function ({ content, type, handleClose, }: {
+    content: IAnnouncementContent;
+    type: AnnouncementType;
+    handleClose: () => void;
+}): React.JSX.Element;

package/dist/components/{Banner → Announcement}/index.js

@@ -1,26 +1,28 @@
 import React from "react";
-import { BannerType, ButtonType } from "../../constants";
-import BannerButton from "./BannerButton";
-import { BannerStyles } from "./BannerStyles";
+import { AnnouncementType, ButtonType } from "../../constants";
+import AnnouncementButton from "./AnnouncementButton";
+import { AnnouncementStyles } from "./AnnouncementStyles";
 import CountdownTimer from "./CountdownTimer";
 export default function ({ content, type, handleClose, }) {
     return (React.createElement("div", { className: "relative w-full", style: {
             backgroundColor: content.bgColor,
             color: content.textColor,
         } },
-        React.createElement(BannerStyles, null),
-        React.createElement("div", { className: "relative mx-auto flex max-w-screen-xl flex-col md:flex-row items-center justify-center gap-4 px-4 py-3 text-center md:text-left" },
-            type === BannerType.Marquee ? (React.createElement("div", { className: "flex w-full flex-col md:flex-row items-center justify-between gap-2 md:gap-4 overflow-hidden md:pr-8" },
+        React.createElement(AnnouncementStyles, null),
+        React.createElement("div", { className: "relative mx-auto flex max-w-screen-xl flex-col md:flex-row items-center justify-center gap-4 px-10 md:px-4 py-2 md:py-0 text-center md:text-left min-h-[50px]" },
+            type === AnnouncementType.Marquee ? (React.createElement("div", { className: "flex w-full flex-col md:flex-row items-center justify-between gap-2 md:gap-4 overflow-hidden md:pr-8" },
                 React.createElement("div", { className: "w-full md:flex-1 overflow-hidden" },
                     React.createElement("div", { className: "whitespace-nowrap animate-marquee" },
                         React.createElement("div", { className: "inline-block max-w-none text-base", dangerouslySetInnerHTML: {
-                                __html: content.bannerHtml || "",
+                                __html: content.announcementHtml || "",
                             } }))),
-                content.buttonText && content.buttonType !== ButtonType.None && (React.createElement(BannerButton, { content: content })))) : (React.createElement("div", { className: "flex flex-col md:flex-row items-center justify-center gap-2 md:gap-4 w-full" },
+                content.buttonText && content.buttonType !== ButtonType.None && (React.createElement(AnnouncementButton, { content: content })))) : (React.createElement("div", { className: "flex flex-col md:flex-row items-center justify-center gap-2 md:gap-4 w-full" },
                 React.createElement("div", { className: "max-w-none text-base font-semibold" },
-                    React.createElement("div", { dangerouslySetInnerHTML: { __html: content.bannerHtml || "" } })),
-                type === BannerType.Countdown ? (React.createElement(CountdownTimer, { content: content })) : (content.buttonText &&
-                    content.buttonType !== ButtonType.None && (React.createElement(BannerButton, { content: content }))))),
+                    React.createElement("div", { dangerouslySetInnerHTML: {
+                            __html: content.announcementHtml || "",
+                        } })),
+                type === AnnouncementType.Countdown ? (React.createElement(CountdownTimer, { content: content })) : (content.buttonText &&
+                    content.buttonType !== ButtonType.None && (React.createElement(AnnouncementButton, { content: content }))))),
             React.createElement("div", { onClick: handleClose, className: "absolute right-4 top-1/2 -translate-y-1/2 text-3xl leading-none cursor-pointer", style: {
                     color: content.textColor || "#000",
                 } }, "\u00D7"))));

package/dist/components/index.d.ts

@@ -1,2 +1,2 @@
-export { default as Banner } from "./Banner";
+export { default as Announcement } from "./Announcement";
 export { default as Hero } from "./Hero";

package/dist/components/index.js

@@ -1,2 +1,2 @@
-export { default as Banner } from "./Banner";
+export { default as Announcement } from "./Announcement";
 export { default as Hero } from "./Hero";

package/dist/constants/{banner.d.ts → announcement.d.ts}

@@ -1,13 +1,13 @@
-export declare enum BannerType {
+export declare enum AnnouncementType {
     Countdown = "countdown",
-    Announcement = "announcement",
+    Static = "static",
     Marquee = "marquee"
 }
-export declare const bannerTypes: {
+export declare const announcementTypes: {
     label: string;
-    value: BannerType;
+    value: AnnouncementType;
 }[];
-export declare enum BannerStatus {
+export declare enum AnnouncementStatus {
     Enabled = "enabled",
     Disabled = "disabled"
 }

package/dist/constants/announcement.js

@@ -0,0 +1,22 @@
+export var AnnouncementType;
+(function (AnnouncementType) {
+    AnnouncementType["Countdown"] = "countdown";
+    AnnouncementType["Static"] = "static";
+    AnnouncementType["Marquee"] = "marquee";
+})(AnnouncementType || (AnnouncementType = {}));
+export const announcementTypes = [
+    { label: "Static", value: AnnouncementType.Static },
+    { label: "Countdown Timer", value: AnnouncementType.Countdown },
+    { label: "Scrolling Text / Marquee", value: AnnouncementType.Marquee },
+];
+export var AnnouncementStatus;
+(function (AnnouncementStatus) {
+    AnnouncementStatus["Enabled"] = "enabled";
+    AnnouncementStatus["Disabled"] = "disabled";
+})(AnnouncementStatus || (AnnouncementStatus = {}));
+export var ButtonType;
+(function (ButtonType) {
+    ButtonType["None"] = "none";
+    ButtonType["Default"] = "default";
+    ButtonType["Text"] = "text";
+})(ButtonType || (ButtonType = {}));

package/dist/constants/index.d.ts

@@ -1,2 +1,2 @@
-export * from "./banner";
+export * from "./announcement";
 export * from "./hero";

package/dist/constants/index.js

@@ -1,2 +1,2 @@
-export * from "./banner";
+export * from "./announcement";
 export * from "./hero";

package/dist/types/{banner.d.ts → announcement.d.ts}

@@ -1,14 +1,14 @@
-import { BannerStatus, BannerType, ButtonType } from "../constants";
+import { AnnouncementStatus, AnnouncementType, ButtonType } from "../constants";
 export declare const buttonTypes: {
     label: string;
     value: ButtonType;
 }[];
-export interface IBannerContent {
+export interface IAnnouncementContent {
     buttonType: ButtonType;
     buttonText: string;
     buttonLink: string;
     bgColor: string;
-    bannerHtml: string;
+    announcementHtml: string;
     buttonColor: string;
     buttonTextColor: string;
     textColor: string;
@@ -16,13 +16,13 @@ export interface IBannerContent {
     counterBgColor?: string;
     counterDigitColor?: string;
 }
-export interface IBanner {
+export interface IAnnouncement {
     id: string;
     shop: string;
-    type: BannerType;
+    type: AnnouncementType;
     name: string;
-    status: BannerStatus;
-    content: IBannerContent | null;
+    status: AnnouncementStatus;
+    content: IAnnouncementContent | null;
     created_at: string;
     updated_at: string;
 }

package/dist/types/index.d.ts

@@ -1,2 +1,2 @@
-export * from "./banner";
+export * from "./announcement";
 export * from "./hero";

package/dist/types/index.js

@@ -1,2 +1,2 @@
-export * from "./banner";
+export * from "./announcement";
 export * from "./hero";

package/dist/utils/fetch-resource.d.ts

@@ -1,6 +1,6 @@
 export declare enum ResourceType {
-    HeroSections = "hero-sections",
-    Banners = "banners"
+    HeroBanners = "hero-banners",
+    Announcements = "announcements"
 }
 type FetchResourceParams = {
     baseUrl: string;

package/dist/utils/fetch-resource.js

@@ -1,7 +1,7 @@
 export var ResourceType;
 (function (ResourceType) {
-    ResourceType["HeroSections"] = "hero-sections";
-    ResourceType["Banners"] = "banners";
+    ResourceType["HeroBanners"] = "hero-banners";
+    ResourceType["Announcements"] = "announcements";
 })(ResourceType || (ResourceType = {}));
 export async function fetchResource({ baseUrl, apiKey, type, }) {
     if (!baseUrl || !apiKey) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fragment-headless-sdk",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/readme.md

@@ -21,10 +21,10 @@ Fragment-Shopify App (CMS) → API Endpoint → fragment-shopify-sdk (Consumer)
 ## 🔧 Features
 
 - ✅ **Data Fetching**: Built-in utilities to fetch sections from fragment-shopify API
-- ✅ **React Components**: Pre-built Hero and Banner components with responsive design
+- ✅ **React Components**: Pre-built Hero and Announcement components with responsive design
 - ✅ **TypeScript Support**: Full type definitions for all components and data structures
 - ✅ **Tailwind Integration**: Styled with Tailwind CSS for easy customization
-- ✅ **Multiple Banner Types**: Standard, marquee, and countdown banner variants
+- ✅ **Multiple Announcement Types**: Standard, marquee, and countdown announcement variants
 - ✅ **Hero Sections**: Desktop/mobile responsive hero components with video support
 
 ---
@@ -62,7 +62,10 @@ module.exports = {
     "./app/**/*.{js,ts,jsx,tsx,mdx}",
     "./pages/**/*.{js,ts,jsx,tsx,mdx}",
     "./components/**/*.{js,ts,jsx,tsx,mdx}",
-    path.join(__dirname, "node_modules/fragment-headless-sdk/dist/**/*.{js,ts,jsx,tsx}"),
+    path.join(
+      __dirname,
+      "node_modules/fragment-headless-sdk/dist/**/*.{js,ts,jsx,tsx}"
+    ),
   ],
   theme: {
     extend: {},
@@ -92,40 +95,40 @@ module.exports = {
 import { fetchResource, ResourceType } from "fragment-headless-sdk";
 
 // Fetch hero sections
-const heroes = await fetchResource({
+const heroBanners = await fetchResource({
   baseUrl: process.env.EXTERNAL_API_URL, // Your fragment-shopify app URL
   apiKey: process.env.FRAGMENT_API_KEY, // API key from fragment-shopify (format: "keyId:secret")
-  type: ResourceType.HeroSections,
+  type: ResourceType.HeroBanners,
 });
 
-// Fetch banners
-const banners = await fetchResource({
+// Fetch announcements
+const announcements = await fetchResource({
   baseUrl: process.env.EXTERNAL_API_URL,
   apiKey: process.env.FRAGMENT_API_KEY,
-  type: ResourceType.Banners,
+  type: ResourceType.Announcements,
 });
 ```
 
 ### 2. Render Components
 
 ```tsx
-import { Banner, Hero } from "fragment-headless-sdk";
-import { BannerType } from "fragment-headless-sdk";
+import { Announcement, Hero } from "fragment-headless-sdk";
+import { AnnouncementType } from "fragment-headless-sdk";
 
 export default function Page() {
-  const [showBanner, setShowBanner] = useState(true);
+  const [showAnnouncement, setShowAnnouncement] = useState(true);
 
   return (
     <>
       {/* Hero Section */}
-      <Hero content={heroes[0]?.content} />
-
-      {/* Banner */}
-      {showBanner && banners[0] && (
-        <Banner
-          content={banners[0].content}
-          type={banners[0].type as BannerType}
-          handleClose={() => setShowBanner(false)}
+      <Hero content={heroBanners[0]?.content} />
+
+      {/* Announcement */}
+      {showAnnouncement && announcements[0] && (
+        <Announcement
+          content={announcements[0].content}
+          type={announcements[0].type as AnnouncementType}
+          handleClose={() => setShowAnnouncement(false)}
         />
       )}
     </>
@@ -149,8 +152,8 @@ Fetches sections from your fragment-shopify app.
 
 **ResourceType Options:**
 
-- `ResourceType.HeroSections` - Fetch hero sections
-- `ResourceType.Banners` - Fetch banner sections
+- `ResourceType.HeroBanners` - Fetch hero banners
+- `ResourceType.Announcements` - Fetch announcement sections
 
 **Returns:** `Promise<T[]>` - Array of fetched resources
 
@@ -216,37 +219,37 @@ interface IHeroContent {
 }
 ```
 
-### Banner Component
+### Announcement Component
 
-Flexible banner component with multiple display types and countdown functionality.
+Flexible announcement component with multiple display types and countdown functionality.
 
 ```tsx
-import { Banner, BannerType } from "fragment-headless-sdk";
+import { Announcement, AnnouncementType } from "fragment-headless-sdk";
 
-<Banner
-  content={bannerContent}
-  type={BannerType.Standard}
-  handleClose={() => setBannerVisible(false)}
+<Announcement
+  content={announcementContent}
+  type={AnnouncementType.Announcement}
+  handleClose={() => setAnnouncementVisible(false)}
 />;
 ```
 
 **Props:**
 
-- `content: IBannerContent` - Banner configuration object
-- `type: BannerType` - Display type (Standard, Marquee, Countdown)
-- `handleClose: () => void` - Function called when banner is closed
+- `content: IAnnouncementContent` - Announcement configuration object
+- `type: AnnouncementType` - Display type (Announcement, Marquee, Countdown)
+- `handleClose: () => void` - Function called when announcement is closed
 
-**Banner Types:**
+**Announcement Types:**
 
-- `BannerType.Standard` - Regular banner with text and button
-- `BannerType.Marquee` - Scrolling marquee banner
-- `BannerType.Countdown` - Banner with countdown timer
+- `AnnouncementType.Announcement` - Regular announcement with text and button
+- `AnnouncementType.Marquee` - Scrolling marquee announcement
+- `AnnouncementType.Countdown` - Announcement with countdown timer
 
-**IBannerContent Interface:**
+**IAnnouncementContent Interface:**
 
 ```typescript
-interface IBannerContent {
-  bannerHtml: string;
+interface IAnnouncementContent {
+  announcementHtml: string;
   bgColor: string;
   textColor: string;
   buttonType: ButtonType;
@@ -323,7 +326,7 @@ Components use Tailwind utility classes. You can customize styling by:
 - Background image/video support
 - Customizable button styles through content props
 
-**Banner Component:**
+**Announcement Component:**
 
 - Dynamic background and text colors via `content.bgColor` and `content.textColor`
 - Marquee animation with `animate-marquee` class
@@ -338,14 +341,14 @@ graph TD
     A[Fragment-Shopify App] --> B[API Endpoint]
     B --> C[fetchResource()]
     C --> D[Your React App]
-    D --> E[Hero/Banner Components]
+    D --> E[Hero/Announcement Components]
     E --> F[Rendered UI]
 ```
 
 1. **Content Creation**: Editors create sections in fragment-shopify app
 2. **Publishing**: Sections are published and available via API
 3. **Data Fetching**: Your app calls `fetchResource()` to get section data
-4. **Component Rendering**: Pass data to Hero/Banner components
+4. **Component Rendering**: Pass data to Hero/Announcement components
 5. **UI Display**: Components render responsive, styled sections
 
 ---
@@ -378,7 +381,7 @@ const sections = await fetchResource({...});
 fragment-headless-sdk/
 ├── src/
 │   ├── components/          # React components
-│   │   ├── Banner/         # Banner component variants
+│   │   ├── Announcement/   # Announcement component variants
 │   │   └── Hero/           # Hero component variants
 │   ├── constants/          # Enums and constants
 │   ├── types/              # TypeScript interfaces

package/dist/components/Banner/BannerButton.d.ts

@@ -1,5 +0,0 @@
-import React from "react";
-import { IBannerContent } from "../../types";
-export default function BannerButton({ content }: {
-    content: IBannerContent;
-}): React.JSX.Element;

package/dist/components/Banner/BannerStyles.d.ts

@@ -1,3 +0,0 @@
-export declare function BannerStyles({ seconds }: {
-    seconds?: number;
-}): null;

package/dist/components/Banner/index.d.ts

@@ -1,8 +0,0 @@
-import React from "react";
-import { BannerType } from "../../constants";
-import { IBannerContent } from "../../types";
-export default function ({ content, type, handleClose, }: {
-    content: IBannerContent;
-    type: BannerType;
-    handleClose: () => void;
-}): React.JSX.Element;

package/dist/constants/banner.js

@@ -1,22 +0,0 @@
-export var BannerType;
-(function (BannerType) {
-    BannerType["Countdown"] = "countdown";
-    BannerType["Announcement"] = "announcement";
-    BannerType["Marquee"] = "marquee";
-})(BannerType || (BannerType = {}));
-export const bannerTypes = [
-    { label: "Announcement Banner", value: BannerType.Announcement },
-    { label: "Countdown Timer", value: BannerType.Countdown },
-    { label: "Scrolling Text / Marquee", value: BannerType.Marquee },
-];
-export var BannerStatus;
-(function (BannerStatus) {
-    BannerStatus["Enabled"] = "enabled";
-    BannerStatus["Disabled"] = "disabled";
-})(BannerStatus || (BannerStatus = {}));
-export var ButtonType;
-(function (ButtonType) {
-    ButtonType["None"] = "none";
-    ButtonType["Default"] = "default";
-    ButtonType["Text"] = "text";
-})(ButtonType || (ButtonType = {}));