@flamingo-stack/openframe-frontend-core 0.0.347-snapshot.20260630182958 → 0.0.347

package/src/stories/AnnouncementBar.stories.tsx

@@ -40,7 +40,8 @@ const baseAnnouncement: Announcement = {
   title: 'New Feature Released',
   description: 'Check out our latest updates and improvements to the platform.',
   background_color: '#FFD951',
-  icon_name: 'rocket',
+  icon_type: 'svg',
+  icon_svg_name: 'rocket',
   platform_id: 'openframe',
   is_active: true,
   created_at: now,
@@ -94,12 +95,12 @@ export const WithCTA: Story = {
         title: 'OpenFrame v2.0 is here!',
         description: 'Explore the new dashboard, improved device management, and more.',
         background_color: '#FFD951',
-        icon_name: 'star',
+        icon_svg_name: 'star',
         cta_enabled: true,
         cta_text: 'Learn More',
         cta_url: 'https://example.com',
         cta_target: '_blank',
-        cta_icon_name: 'rocket',
+        cta_icon: 'rocket',
         cta_show_icon: true,
         cta_button_background_color: '#1A1A1A',
         cta_button_text_color: '#FFFFFF',
@@ -121,7 +122,7 @@ export const WithCTASameTab: Story = {
         title: 'Scheduled Maintenance',
         description: 'We will perform maintenance on Saturday from 2:00 AM to 4:00 AM UTC.',
         background_color: '#FFE082',
-        icon_name: 'info',
+        icon_svg_name: 'info',
         cta_enabled: true,
         cta_text: 'View Status',
         cta_url: '/status',
@@ -144,7 +145,7 @@ export const BlueBackground: Story = {
         title: 'Join our Community',
         description: 'Connect with other MSPs and share best practices.',
         background_color: '#60A5FA',
-        icon_name: 'megaphone',
+        icon_svg_name: 'megaphone',
       })
       return <Story />
     },
@@ -163,7 +164,7 @@ export const GreenBackground: Story = {
         title: 'All Systems Operational',
         description: 'Everything is running smoothly. No issues detected.',
         background_color: '#86EFAC',
-        icon_name: 'bell',
+        icon_svg_name: 'bell',
       })
       return <Story />
     },
@@ -182,7 +183,7 @@ export const WithOpenFrameLogo: Story = {
         title: 'Welcome to OpenFrame',
         description: 'Your open-source IT infrastructure management platform.',
         background_color: '#FFD951',
-        icon_name: 'openframe-logo',
+        icon_svg_name: 'openframe-logo',
         cta_enabled: true,
         cta_text: 'Get Started',
         cta_url: '/getting-started',
@@ -207,7 +208,8 @@ export const WithPNGIcon: Story = {
         title: 'Partner Program Launch',
         description: 'Become an OpenFrame certified partner and grow your business.',
         background_color: '#C4B5FD',
-        icon_url: 'https://placehold.co/32x32/1a1a1a/white?text=OF',
+        icon_type: 'png',
+        icon_png_url: 'https://placehold.co/32x32/1a1a1a/white?text=OF',
       })
       return <Story />
     },
@@ -227,7 +229,7 @@ export const LongContent: Story = {
         description:
           'This is an extremely long description that goes into great detail about the announcement. It should be truncated on the desktop view and hidden on mobile view to keep the bar compact and readable.',
         background_color: '#FCA5A5',
-        icon_name: 'info',
+        icon_svg_name: 'info',
         cta_enabled: true,
         cta_text: 'Read Full Announcement',
         cta_url: '/announcements/long',

package/src/types/announcement.ts

@@ -2,23 +2,26 @@
 import type { LegacyPlatform, PlatformFilter, PlatformRecord } from './platform';
 
 // For backward compatibility, maintain the old Platform type temporarily
+export type IconType = 'svg' | 'png';
+
 // Database Models
 export interface Announcement {
   id: string;
   title: string;
   description: string;
   background_color: string;
-  icon_name?: string;
-  icon_url?: string;
+  icon_type: IconType;
+  icon_svg_name?: string;
+  icon_png_url?: string;
   /** Extra props for the main bar/icon */
-  icon_props?: Record<string, any>;
+  icon_svg_props?: Record<string, any>;
   platform_id: string;  // Foreign key to platforms table
   platform?: PlatformRecord;  // Joined platform data
   is_active: boolean;
   // CTA (Call-To-Action) fields
   cta_enabled?: boolean;
   cta_text?: string;
-  cta_icon_name?: string;
+  cta_icon?: string;
   cta_show_icon?: boolean;
   cta_url?: string;
   cta_target?: '_self' | '_blank';
@@ -54,16 +57,17 @@ export interface CreateAnnouncementData {
   title: string;
   description: string;
   background_color: string;
-  icon_name?: string;
-  icon_url?: string;
+  icon_type: IconType;
+  icon_svg_name?: string;
+  icon_png_url?: string;
   /** Extra props for the main bar/icon */
-  icon_props?: Record<string, any>;
+  icon_svg_props?: Record<string, any>;
   platforms?: string[];  // entity_platforms set (multi-select)
   is_active?: boolean;
   // CTA (Call-To-Action) fields
   cta_enabled?: boolean;
   cta_text?: string;
-  cta_icon_name?: string;
+  cta_icon?: string;
   cta_show_icon?: boolean;
   cta_url?: string;
   cta_target?: '_self' | '_blank';
@@ -77,16 +81,17 @@ export interface UpdateAnnouncementData {
   title?: string;
   description?: string;
   background_color?: string;
-  icon_name?: string;
-  icon_url?: string;
+  icon_type?: IconType;
+  icon_svg_name?: string;
+  icon_png_url?: string;
   /** Extra props for the main bar/icon */
-  icon_props?: Record<string, any>;
+  icon_svg_props?: Record<string, any>;
   platforms?: string[];  // entity_platforms set (multi-select)
   is_active?: boolean;
   // CTA (Call-To-Action) fields
   cta_enabled?: boolean;
   cta_text?: string;
-  cta_icon_name?: string;
+  cta_icon?: string;
   cta_show_icon?: boolean;
   cta_url?: string;
   cta_target?: '_self' | '_blank';
@@ -118,14 +123,15 @@ export interface AnnouncementFormData {
   title: string;
   description: string;
   background_color: string;
-  icon_name: string;
-  icon_url?: string;
+  icon_type: IconType;
+  icon_svg_name: string;
+  icon_png_file?: File;
   platforms: string[];  // entity_platforms set (multi-select; no single platform_id)
   is_active: boolean;
   // CTA (Call-To-Action) fields
   cta_enabled: boolean;
   cta_text: string;
-  cta_icon_name: string;
+  cta_icon: string;
   cta_show_icon: boolean;
   cta_url: string;
   cta_target: '_self' | '_blank';
@@ -134,7 +140,7 @@ export interface AnnouncementFormData {
   cta_button_text_color?: string;
   cta_icon_props?: string; // JSON string in form
   /** Extra props for the main bar/icon */
-  icon_props?: string;
+  icon_svg_props?: string;
 }
 
 // API Query Parameters
@@ -191,7 +197,7 @@ export interface AnnouncementValidation {
     required: boolean;
     pattern: RegExp;
   };
-  icon_name: {
+  icon_svg_name: {
     required: boolean;
     validOptions: string[];
   };

package/src/types/supabase.ts

@@ -56,8 +56,9 @@ export type Database = {
           created_at: string | null
           created_by: string | null
           description: string
-          icon_url: string | null
-          icon_name: string | null
+          icon_png_url: string | null
+          icon_svg_name: string | null
+          icon_type: string | null
           id: string
           is_active: boolean | null
           title: string
@@ -68,8 +69,9 @@ export type Database = {
           created_at?: string | null
           created_by?: string | null
           description: string
-          icon_url?: string | null
-          icon_name?: string | null
+          icon_png_url?: string | null
+          icon_svg_name?: string | null
+          icon_type?: string | null
           id?: string
           is_active?: boolean | null
           title: string
@@ -80,8 +82,9 @@ export type Database = {
           created_at?: string | null
           created_by?: string | null
           description?: string
-          icon_url?: string | null
-          icon_name?: string | null
+          icon_png_url?: string | null
+          icon_svg_name?: string | null
+          icon_type?: string | null
           id?: string
           is_active?: boolean | null
           title?: string