/** * ============================================================================ * MOCK FONT DATA * ============================================================================ * * Factory functions and preset mock data for fonts. * Used in Storybook stories, tests, and development. * * ## Usage * * ```ts * import { * mockGoogleFont, * mockFontshareFont, * mockUnifiedFont, * GOOGLE_FONTS, * FONTHARE_FONTS, * UNIFIED_FONTS, * } from '$entities/Font/lib/mocks'; * * // Create a mock Google Font * const roboto = mockGoogleFont({ family: 'Roboto', category: 'sans-serif' }); * * // Create a mock Fontshare font * const satoshi = mockFontshareFont({ name: 'Satoshi', slug: 'satoshi' }); * * // Create a mock UnifiedFont * const font = mockUnifiedFont({ id: 'roboto', name: 'Roboto' }); * * // Use preset fonts * import { UNIFIED_FONTS } from '$entities/Font/lib/mocks'; * ``` */ import type { FontCategory, FontProvider, FontSubset, FontVariant, } from '$entities/Font/model/types'; import type { FontFeatures, FontMetadata, FontStyleUrls, UnifiedFont, } from '$entities/Font/model/types'; // UNIFIED FONT MOCKS /** * Options for creating a mock UnifiedFont */ export interface MockUnifiedFontOptions { /** Unique identifier (default: derived from name) */ id?: string; /** Font display name (default: 'Mock Font') */ name?: string; /** Font provider (default: 'google') */ provider?: FontProvider; /** Font category (default: 'sans-serif') */ category?: FontCategory; /** Font subsets (default: ['latin']) */ subsets?: FontSubset[]; /** Font variants (default: ['regular', '700', 'italic', '700italic']) */ variants?: FontVariant[]; /** Style URLs (if not provided, mock URLs are generated) */ styles?: FontStyleUrls; /** Metadata overrides */ metadata?: Partial; /** Features overrides */ features?: Partial; } /** * Default mock UnifiedFont */ export function mockUnifiedFont(options: MockUnifiedFontOptions = {}): UnifiedFont { const { id, name = 'Mock Font', provider = 'google', category = 'sans-serif', subsets = ['latin'], variants = ['regular', '700', 'italic', '700italic'], styles, metadata, features, } = options; const fontId = id ?? name.toLowerCase().replace(/\s+/g, ''); const baseUrl = provider === 'google' ? `https://fonts.gstatic.com/s/${fontId}/v30` : `//cdn.fontshare.com/wf/${fontId}`; return { id: fontId, name, provider, category, subsets, variants: variants as FontVariant[], styles: styles ?? { regular: `${baseUrl}/regular.woff2`, bold: `${baseUrl}/bold.woff2`, italic: `${baseUrl}/italic.woff2`, boldItalic: `${baseUrl}/bolditalic.woff2`, }, metadata: { cachedAt: Date.now(), version: '1.0', lastModified: new Date().toISOString().split('T')[0], popularity: 1, ...metadata, }, features: { isVariable: false, ...features, }, }; } /** * Preset UnifiedFont mocks */ export const UNIFIED_FONTS: Record = { roboto: mockUnifiedFont({ id: 'roboto', name: 'Roboto', provider: 'google', category: 'sans-serif', subsets: ['latin', 'latin-ext'], variants: ['100', '300', '400', '500', '700', '900'], metadata: { popularity: 1 }, }), openSans: mockUnifiedFont({ id: 'open-sans', name: 'Open Sans', provider: 'google', category: 'sans-serif', subsets: ['latin', 'latin-ext'], variants: ['300', '400', '500', '600', '700', '800'], metadata: { popularity: 2 }, }), lato: mockUnifiedFont({ id: 'lato', name: 'Lato', provider: 'google', category: 'sans-serif', subsets: ['latin', 'latin-ext'], variants: ['100', '300', '400', '700', '900'], metadata: { popularity: 3 }, }), playfairDisplay: mockUnifiedFont({ id: 'playfair-display', name: 'Playfair Display', provider: 'google', category: 'serif', subsets: ['latin'], variants: ['400', '700', '900'], metadata: { popularity: 10 }, }), montserrat: mockUnifiedFont({ id: 'montserrat', name: 'Montserrat', provider: 'google', category: 'sans-serif', subsets: ['latin', 'latin-ext'], variants: ['100', '200', '300', '400', '500', '600', '700', '800', '900'], metadata: { popularity: 4 }, }), satoshi: mockUnifiedFont({ id: 'satoshi', name: 'Satoshi', provider: 'fontshare', category: 'sans-serif', subsets: ['latin'], variants: ['regular', 'bold', 'italic', 'bolditalic'] as FontVariant[], features: { isVariable: true, axes: [{ name: 'wght', property: 'wght', default: 400, min: 300, max: 700 }] }, metadata: { popularity: 15000 }, }), generalSans: mockUnifiedFont({ id: 'general-sans', name: 'General Sans', provider: 'fontshare', category: 'sans-serif', subsets: ['latin'], variants: ['regular', 'bold', 'italic', 'bolditalic'] as FontVariant[], features: { isVariable: true }, metadata: { popularity: 12000 }, }), clashDisplay: mockUnifiedFont({ id: 'clash-display', name: 'Clash Display', provider: 'fontshare', category: 'display', subsets: ['latin'], variants: ['regular', '500', '600', 'bold'] as FontVariant[], features: { tags: ['Headlines', 'Posters', 'Branding'] }, metadata: { popularity: 8000 }, }), oswald: mockUnifiedFont({ id: 'oswald', name: 'Oswald', provider: 'google', category: 'sans-serif', subsets: ['latin'], variants: ['200', '300', '400', '500', '600', '700'], metadata: { popularity: 6 }, }), raleway: mockUnifiedFont({ id: 'raleway', name: 'Raleway', provider: 'google', category: 'sans-serif', subsets: ['latin'], variants: ['100', '200', '300', '400', '500', '600', '700', '800', '900'], metadata: { popularity: 7 }, }), }; /** * Get an array of all preset UnifiedFonts */ export function getAllMockFonts(): UnifiedFont[] { return Object.values(UNIFIED_FONTS); } /** * Get fonts by provider */ export function getFontsByProvider(provider: FontProvider): UnifiedFont[] { return getAllMockFonts().filter(font => font.provider === provider); } /** * Get fonts by category */ export function getFontsByCategory(category: FontCategory): UnifiedFont[] { return getAllMockFonts().filter(font => font.category === category); } /** * Generate an array of mock fonts with sequential naming */ export function generateMockFonts(count: number, options?: Omit): UnifiedFont[] { return Array.from({ length: count }, (_, i) => mockUnifiedFont({ ...options, id: `mock-font-${i + 1}`, name: `Mock Font ${i + 1}`, })); } /** * Generate an array of mock fonts with different categories */ export function generateMixedCategoryFonts(countPerCategory: number = 2): UnifiedFont[] { const categories: FontCategory[] = ['sans-serif', 'serif', 'display', 'handwriting', 'monospace']; const fonts: UnifiedFont[] = []; categories.forEach(category => { for (let i = 0; i < countPerCategory; i++) { fonts.push( mockUnifiedFont({ id: `${category}-${i + 1}`, name: `${category.replace('-', ' ')} ${i + 1}`, category, }), ); } }); return fonts; }