@codellyson/framely 0.1.0 → 0.1.1

package/src/templates/mockData.ts

@@ -0,0 +1,271 @@
+import type { Template } from './types';
+
+/**
+ * Mock templates for development
+ * In production, these would come from a remote API
+ */
+export const MOCK_TEMPLATES: Template[] = [
+  {
+    id: 'social-intro-1',
+    name: 'Modern Social Intro',
+    description:
+      'Clean, modern intro animation perfect for social media videos. Features smooth text reveals and gradient backgrounds.',
+    category: 'intro-outro',
+    tags: ['intro', 'social', 'modern', 'minimal', 'gradient'],
+    preview: {
+      thumbnail: 'https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?w=400&h=225&fit=crop',
+      preview: undefined,
+    },
+    author: {
+      id: 'framely',
+      name: 'Framely Team',
+      verified: true,
+    },
+    bundleUrl: 'https://cdn.framely.dev/templates/social-intro-1/bundle.js',
+    version: '1.0.0',
+    width: 1080,
+    height: 1920,
+    fps: 30,
+    durationInFrames: 90,
+    defaultProps: {
+      title: 'Your Title Here',
+      subtitle: 'Subtitle text',
+      accentColor: '#6366f1',
+    },
+    downloads: 1250,
+    rating: 4.8,
+    featured: true,
+    createdAt: '2024-01-15T00:00:00Z',
+    updatedAt: '2024-01-20T00:00:00Z',
+  },
+  {
+    id: 'youtube-subscribe',
+    name: 'Subscribe Animation',
+    description:
+      'Eye-catching subscribe button animation with bell notification. Perfect for YouTube outros and CTAs.',
+    category: 'social-media',
+    tags: ['youtube', 'subscribe', 'animation', 'cta', 'bell'],
+    preview: {
+      thumbnail: 'https://images.unsplash.com/photo-1611162616475-46b635cb6868?w=400&h=225&fit=crop',
+    },
+    author: {
+      id: 'framely',
+      name: 'Framely Team',
+      verified: true,
+    },
+    bundleUrl: 'https://cdn.framely.dev/templates/youtube-subscribe/bundle.js',
+    version: '1.0.0',
+    width: 1920,
+    height: 1080,
+    fps: 30,
+    durationInFrames: 120,
+    defaultProps: {
+      channelName: 'Your Channel',
+      buttonColor: '#FF0000',
+      showBell: true,
+    },
+    downloads: 2340,
+    rating: 4.9,
+    featured: true,
+    createdAt: '2024-01-10T00:00:00Z',
+    updatedAt: '2024-01-18T00:00:00Z',
+  },
+  {
+    id: 'lower-third-1',
+    name: 'Clean Lower Third',
+    description:
+      'Professional lower third with smooth slide-in animation. Includes name, title, and optional social handle.',
+    category: 'lower-thirds',
+    tags: ['lower-third', 'professional', 'news', 'interview', 'name'],
+    preview: {
+      thumbnail: 'https://images.unsplash.com/photo-1478737270239-2f02b77fc618?w=400&h=225&fit=crop',
+    },
+    author: {
+      id: 'motion-pro',
+      name: 'Motion Pro',
+      verified: true,
+    },
+    bundleUrl: 'https://cdn.framely.dev/templates/lower-third-1/bundle.js',
+    version: '1.2.0',
+    width: 1920,
+    height: 1080,
+    fps: 30,
+    durationInFrames: 150,
+    defaultProps: {
+      name: 'John Doe',
+      title: 'CEO & Founder',
+      social: '@johndoe',
+      accentColor: '#3b82f6',
+    },
+    downloads: 890,
+    rating: 4.6,
+    featured: false,
+    createdAt: '2024-01-08T00:00:00Z',
+    updatedAt: '2024-01-15T00:00:00Z',
+  },
+  {
+    id: 'text-reveal-1',
+    name: 'Kinetic Text Reveal',
+    description:
+      'Dynamic text reveal with character-by-character animation. Great for quotes, titles, and impact statements.',
+    category: 'text-animations',
+    tags: ['text', 'kinetic', 'reveal', 'typography', 'motion'],
+    preview: {
+      thumbnail: 'https://images.unsplash.com/photo-1455390582262-044cdead277a?w=400&h=225&fit=crop',
+    },
+    author: {
+      id: 'type-master',
+      name: 'Type Master',
+      verified: false,
+    },
+    bundleUrl: 'https://cdn.framely.dev/templates/text-reveal-1/bundle.js',
+    version: '1.0.0',
+    width: 1920,
+    height: 1080,
+    fps: 60,
+    durationInFrames: 180,
+    defaultProps: {
+      text: 'Your text here',
+      fontSize: 120,
+      fontWeight: 700,
+      color: '#ffffff',
+      backgroundColor: '#000000',
+    },
+    downloads: 1567,
+    rating: 4.7,
+    featured: false,
+    createdAt: '2024-01-05T00:00:00Z',
+    updatedAt: '2024-01-12T00:00:00Z',
+  },
+  {
+    id: 'gradient-bg-1',
+    name: 'Animated Gradient',
+    description:
+      'Mesmerizing animated gradient background with smooth color transitions. Use as background for any content.',
+    category: 'backgrounds',
+    tags: ['background', 'gradient', 'animated', 'loop', 'colorful'],
+    preview: {
+      thumbnail: 'https://images.unsplash.com/photo-1557682250-33bd709cbe85?w=400&h=225&fit=crop',
+    },
+    author: {
+      id: 'framely',
+      name: 'Framely Team',
+      verified: true,
+    },
+    bundleUrl: 'https://cdn.framely.dev/templates/gradient-bg-1/bundle.js',
+    version: '1.0.0',
+    width: 1920,
+    height: 1080,
+    fps: 30,
+    durationInFrames: 300,
+    defaultProps: {
+      colors: ['#6366f1', '#8b5cf6', '#d946ef'],
+      speed: 1,
+      angle: 45,
+    },
+    downloads: 3210,
+    rating: 4.5,
+    featured: false,
+    createdAt: '2024-01-03T00:00:00Z',
+    updatedAt: '2024-01-10T00:00:00Z',
+  },
+  {
+    id: 'promo-slide-1',
+    name: 'Product Showcase',
+    description:
+      'Professional product showcase template with dynamic transitions. Perfect for e-commerce and marketing.',
+    category: 'marketing',
+    tags: ['product', 'showcase', 'promo', 'ecommerce', 'marketing'],
+    preview: {
+      thumbnail: 'https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=400&h=225&fit=crop',
+    },
+    author: {
+      id: 'ad-studio',
+      name: 'Ad Studio',
+      verified: true,
+    },
+    bundleUrl: 'https://cdn.framely.dev/templates/promo-slide-1/bundle.js',
+    version: '2.0.0',
+    width: 1080,
+    height: 1080,
+    fps: 30,
+    durationInFrames: 180,
+    defaultProps: {
+      productName: 'Product Name',
+      tagline: 'Your tagline here',
+      price: '$99.99',
+      ctaText: 'Shop Now',
+      brandColor: '#10b981',
+    },
+    downloads: 756,
+    rating: 4.4,
+    featured: true,
+    createdAt: '2024-01-01T00:00:00Z',
+    updatedAt: '2024-01-08T00:00:00Z',
+  },
+  {
+    id: 'presentation-1',
+    name: 'Slide Transition Pack',
+    description:
+      'Collection of smooth slide transitions for presentations. Includes fade, slide, zoom, and flip variations.',
+    category: 'presentation',
+    tags: ['presentation', 'slides', 'transition', 'corporate', 'business'],
+    preview: {
+      thumbnail: 'https://images.unsplash.com/photo-1531538606174-0f90ff5dce83?w=400&h=225&fit=crop',
+    },
+    author: {
+      id: 'slide-pro',
+      name: 'Slide Pro',
+      verified: false,
+    },
+    bundleUrl: 'https://cdn.framely.dev/templates/presentation-1/bundle.js',
+    version: '1.1.0',
+    width: 1920,
+    height: 1080,
+    fps: 30,
+    durationInFrames: 60,
+    defaultProps: {
+      transitionType: 'slide',
+      direction: 'left',
+      duration: 0.5,
+    },
+    downloads: 445,
+    rating: 4.3,
+    featured: false,
+    createdAt: '2023-12-28T00:00:00Z',
+    updatedAt: '2024-01-05T00:00:00Z',
+  },
+  {
+    id: 'instagram-story',
+    name: 'Story Template',
+    description:
+      'Trendy Instagram story template with animated stickers and text effects. Perfect for social media content.',
+    category: 'social-media',
+    tags: ['instagram', 'story', 'social', 'trendy', 'vertical'],
+    preview: {
+      thumbnail: 'https://images.unsplash.com/photo-1611262588024-d12430b98920?w=400&h=225&fit=crop',
+    },
+    author: {
+      id: 'social-creator',
+      name: 'Social Creator',
+      verified: true,
+    },
+    bundleUrl: 'https://cdn.framely.dev/templates/instagram-story/bundle.js',
+    version: '1.0.0',
+    width: 1080,
+    height: 1920,
+    fps: 30,
+    durationInFrames: 150,
+    defaultProps: {
+      headline: 'New Post!',
+      description: 'Check out our latest update',
+      backgroundColor: '#f472b6',
+      textColor: '#ffffff',
+    },
+    downloads: 1890,
+    rating: 4.6,
+    featured: false,
+    createdAt: '2023-12-25T00:00:00Z',
+    updatedAt: '2024-01-02T00:00:00Z',
+  },
+];

package/src/templates/types.ts

@@ -0,0 +1,126 @@
+/**
+ * Template types for the Framely Templates Marketplace
+ */
+
+/**
+ * Template category for filtering
+ */
+export type TemplateCategory =
+  | 'social-media'
+  | 'marketing'
+  | 'presentation'
+  | 'intro-outro'
+  | 'lower-thirds'
+  | 'text-animations'
+  | 'backgrounds';
+
+/**
+ * Template author information
+ */
+export interface TemplateAuthor {
+  id: string;
+  name: string;
+  avatar?: string;
+  verified?: boolean;
+}
+
+/**
+ * Template preview assets
+ */
+export interface TemplatePreview {
+  /** Static thumbnail image URL */
+  thumbnail: string;
+  /** Animated preview GIF/WebM URL */
+  preview?: string;
+  /** Video preview URL (for modal) */
+  video?: string;
+}
+
+/**
+ * Template metadata
+ */
+export interface Template {
+  /** Unique identifier */
+  id: string;
+  /** Display name */
+  name: string;
+  /** Template description */
+  description: string;
+  /** Category for filtering */
+  category: TemplateCategory;
+  /** Tags for search */
+  tags: string[];
+  /** Preview assets */
+  preview: TemplatePreview;
+  /** Template author */
+  author: TemplateAuthor;
+  /** Remote bundle URL for the component */
+  bundleUrl: string;
+  /** Template version */
+  version: string;
+  /** Video width */
+  width: number;
+  /** Video height */
+  height: number;
+  /** Frames per second */
+  fps: number;
+  /** Total duration in frames */
+  durationInFrames: number;
+  /** Default props for the template */
+  defaultProps: Record<string, unknown>;
+  /** Downloads count */
+  downloads?: number;
+  /** Average rating (1-5) */
+  rating?: number;
+  /** Featured flag */
+  featured?: boolean;
+  /** Creation date */
+  createdAt: string;
+  /** Last update date */
+  updatedAt: string;
+}
+
+/**
+ * API response for templates list
+ */
+export interface TemplatesListResponse {
+  templates: Template[];
+  total: number;
+  page: number;
+  pageSize: number;
+  hasMore: boolean;
+}
+
+/**
+ * API request filters for templates
+ */
+export interface TemplatesFilterParams {
+  category?: TemplateCategory;
+  search?: string;
+  tags?: string[];
+  featured?: boolean;
+  sortBy?: 'newest' | 'popular' | 'rating';
+  page?: number;
+  pageSize?: number;
+}
+
+/**
+ * Category with count for filter display
+ */
+export interface CategoryCount {
+  category: TemplateCategory;
+  count: number;
+}
+
+/**
+ * Category display labels
+ */
+export const CATEGORY_LABELS: Record<TemplateCategory, string> = {
+  'social-media': 'Social Media',
+  'marketing': 'Marketing',
+  'presentation': 'Presentation',
+  'intro-outro': 'Intro/Outro',
+  'lower-thirds': 'Lower Thirds',
+  'text-animations': 'Text Animations',
+  'backgrounds': 'Backgrounds',
+};