@kilivi/payloadcms-theme-management 0.5.8 → 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +531 -40
- package/dist/app/api/google-fonts/route.d.ts +31 -0
- package/dist/app/api/google-fonts/route.d.ts.map +1 -0
- package/dist/app/api/google-fonts/route.js +925 -0
- package/dist/app/api/google-fonts/route.js.map +1 -0
- package/dist/fields/FontSelectField.js +1 -1
- package/dist/fields/FontSelectField.js.map +1 -1
- package/dist/fields/ThemeTokenSelectField.d.ts.map +1 -1
- package/dist/fields/ThemeTokenSelectField.js +12 -5
- package/dist/fields/ThemeTokenSelectField.js.map +1 -1
- package/dist/fields/themeConfigurationField.d.ts.map +1 -1
- package/dist/fields/themeConfigurationField.js +25 -15
- package/dist/fields/themeConfigurationField.js.map +1 -1
- package/dist/globals/ThemeSettings/FontPicker/FontPreview.d.ts +17 -0
- package/dist/globals/ThemeSettings/FontPicker/FontPreview.d.ts.map +1 -0
- package/dist/globals/ThemeSettings/FontPicker/FontPreview.js +229 -0
- package/dist/globals/ThemeSettings/FontPicker/FontPreview.js.map +1 -0
- package/dist/globals/ThemeSettings/FontPicker/PreviewContent.d.ts +20 -0
- package/dist/globals/ThemeSettings/FontPicker/PreviewContent.d.ts.map +1 -0
- package/dist/globals/ThemeSettings/FontPicker/PreviewContent.js +400 -0
- package/dist/globals/ThemeSettings/FontPicker/PreviewContent.js.map +1 -0
- package/dist/globals/ThemeSettings/FontPicker/index.d.ts +25 -0
- package/dist/globals/ThemeSettings/FontPicker/index.d.ts.map +1 -0
- package/dist/globals/ThemeSettings/FontPicker/index.js +483 -0
- package/dist/globals/ThemeSettings/FontPicker/index.js.map +1 -0
- package/dist/globals/ThemeSettings/FontPicker/styles.css +337 -0
- package/dist/globals/ThemeSettings/FontPicker/translations.d.ts +76 -0
- package/dist/globals/ThemeSettings/FontPicker/translations.d.ts.map +1 -0
- package/dist/globals/ThemeSettings/FontPicker/translations.js +147 -0
- package/dist/globals/ThemeSettings/FontPicker/translations.js.map +1 -0
- package/dist/globals/ThemeSettings/config.d.ts +10 -0
- package/dist/globals/ThemeSettings/config.d.ts.map +1 -0
- package/dist/globals/ThemeSettings/config.js +171 -0
- package/dist/globals/ThemeSettings/config.js.map +1 -0
- package/dist/globals/ThemeSettings/fields/FontLoadingGuideField.d.ts +5 -0
- package/dist/globals/ThemeSettings/fields/FontLoadingGuideField.d.ts.map +1 -0
- package/dist/globals/ThemeSettings/fields/FontLoadingGuideField.js +177 -0
- package/dist/globals/ThemeSettings/fields/FontLoadingGuideField.js.map +1 -0
- package/dist/globals/ThemeSettings/fields/TypographyInfoField.d.ts +5 -0
- package/dist/globals/ThemeSettings/fields/TypographyInfoField.d.ts.map +1 -0
- package/dist/globals/ThemeSettings/fields/TypographyInfoField.js +89 -0
- package/dist/globals/ThemeSettings/fields/TypographyInfoField.js.map +1 -0
- package/dist/globals/ThemeSettings/index.d.ts +4 -0
- package/dist/globals/ThemeSettings/index.d.ts.map +1 -0
- package/dist/globals/ThemeSettings/index.js +4 -0
- package/dist/globals/ThemeSettings/index.js.map +1 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +119 -20
- package/dist/index.js.map +1 -1
- package/dist/types.d.ts +9 -1
- package/dist/types.d.ts.map +1 -1
- package/dist/types.js.map +1 -1
- package/dist/utilities/getThemeSettings.d.ts +34 -0
- package/dist/utilities/getThemeSettings.d.ts.map +1 -0
- package/dist/utilities/getThemeSettings.js +67 -0
- package/dist/utilities/getThemeSettings.js.map +1 -0
- package/package.json +2 -2
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../../src/app/api/google-fonts/route.ts"],"sourcesContent":["import { NextRequest, NextResponse } from 'next/server'\n\n// Font category type\nexport type FontCategory = 'all' | 'sans-serif' | 'serif' | 'display' | 'handwriting' | 'monospace'\n\n// Language subset type\nexport type LanguageSubset =\n | 'all'\n | 'vietnamese'\n | 'latin'\n | 'latin-ext'\n | 'cyrillic'\n | 'cyrillic-ext'\n | 'greek'\n | 'greek-ext'\n | 'arabic'\n | 'hebrew'\n | 'thai'\n | 'japanese'\n | 'korean'\n | 'chinese'\n\n// Google Font item\nexport interface GoogleFont {\n family: string\n variants: string[]\n subsets: string[]\n category: string\n version: string\n lastModified: string\n files: Record<string, string>\n}\n\n// API Response type\nexport interface GoogleFontsResponse {\n fonts: GoogleFont[]\n total: number\n}\n\n// Memory cache\ninterface CacheEntry {\n data: GoogleFontsResponse\n timestamp: number\n}\n\nconst cache = new Map<string, CacheEntry>()\nconst CACHE_DURATION = 24 * 60 * 60 * 1000 // 24 hours\n\n// Fallback fonts (used when API key is missing or API fails)\nconst FALLBACK_FONTS: GoogleFont[] = [\n {\n family: 'Inter',\n variants: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],\n subsets: ['latin', 'latin-ext', 'cyrillic', 'cyrillic-ext', 'greek', 'greek-ext', 'vietnamese'],\n category: 'sans-serif',\n version: 'v13',\n lastModified: '2024-01-01',\n files: {\n '400':\n 'https://fonts.gstatic.com/s/inter/v13/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZ9hiA.woff2',\n },\n },\n {\n family: 'Roboto',\n variants: ['100', '300', '400', '500', '700', '900'],\n subsets: ['latin', 'latin-ext', 'cyrillic', 'cyrillic-ext', 'greek', 'greek-ext', 'vietnamese'],\n category: 'sans-serif',\n version: 'v30',\n lastModified: '2024-01-01',\n files: {\n '400': 'https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu4mxK.woff2',\n },\n },\n {\n family: 'Open Sans',\n variants: ['300', '400', '500', '600', '700', '800'],\n subsets: [\n 'latin',\n 'latin-ext',\n 'cyrillic',\n 'cyrillic-ext',\n 'greek',\n 'greek-ext',\n 'hebrew',\n 'vietnamese',\n ],\n category: 'sans-serif',\n version: 'v35',\n lastModified: '2024-01-01',\n files: {\n '400':\n 'https://fonts.gstatic.com/s/opensans/v35/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4gaVI.woff2',\n },\n },\n {\n family: 'Lato',\n variants: ['100', '300', '400', '700', '900'],\n subsets: ['latin', 'latin-ext'],\n category: 'sans-serif',\n version: 'v24',\n lastModified: '2024-01-01',\n files: {\n '400': 'https://fonts.gstatic.com/s/lato/v24/S6uyw4BMUTPHjx4wXg.woff2',\n },\n },\n {\n family: 'Montserrat',\n variants: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],\n subsets: ['latin', 'latin-ext', 'cyrillic', 'cyrillic-ext', 'vietnamese'],\n category: 'sans-serif',\n version: 'v26',\n lastModified: '2024-01-01',\n files: {\n '400':\n 'https://fonts.gstatic.com/s/montserrat/v26/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCtr6Ew-Y3tcoqK5.woff2',\n },\n },\n {\n family: 'Poppins',\n variants: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],\n subsets: ['latin', 'latin-ext'],\n category: 'sans-serif',\n version: 'v20',\n lastModified: '2024-01-01',\n files: {\n '400': 'https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJfecg.woff2',\n },\n },\n {\n family: 'Nunito',\n variants: ['200', '300', '400', '500', '600', '700', '800', '900'],\n subsets: ['latin', 'latin-ext', 'cyrillic', 'cyrillic-ext', 'vietnamese'],\n category: 'sans-serif',\n version: 'v26',\n lastModified: '2024-01-01',\n files: {\n '400':\n 'https://fonts.gstatic.com/s/nunito/v26/XRXI3I6Li01BKofiOc5wtlZ2di8HDLshdTQ3j77e.woff2',\n },\n },\n {\n family: 'Raleway',\n variants: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],\n subsets: ['latin', 'latin-ext', 'cyrillic', 'cyrillic-ext'],\n category: 'sans-serif',\n version: 'v29',\n lastModified: '2024-01-01',\n files: {\n '400':\n 'https://fonts.gstatic.com/s/raleway/v29/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCIPrU.woff2',\n },\n },\n {\n family: 'Playfair Display',\n variants: ['400', '500', '600', '700', '800', '900'],\n subsets: ['latin', 'latin-ext', 'cyrillic'],\n category: 'serif',\n version: 'v37',\n lastModified: '2024-01-01',\n files: {\n '400':\n 'https://fonts.gstatic.com/s/playfairdisplay/v37/nuFvD-vYSZviVYUb_rj3ij__anPXJzDwcbmjWBN2PKdFvUDQZNLo_U2r.woff2',\n },\n },\n {\n family: 'Merriweather',\n variants: ['300', '400', '700', '900'],\n subsets: ['latin', 'latin-ext', 'cyrillic', 'cyrillic-ext', 'vietnamese'],\n category: 'serif',\n version: 'v30',\n lastModified: '2024-01-01',\n files: {\n '400':\n 'https://fonts.gstatic.com/s/merriweather/v30/u-440qyriQwlOrhSvowK_l5-fCZMdeX3rg.woff2',\n },\n },\n {\n family: 'PT Sans',\n variants: ['400', '700'],\n subsets: ['latin', 'latin-ext', 'cyrillic', 'cyrillic-ext'],\n category: 'sans-serif',\n version: 'v17',\n lastModified: '2024-01-01',\n files: {\n '400': 'https://fonts.gstatic.com/s/ptsans/v17/jizaRExUiTo99u79D0KExcOPIDU.woff2',\n },\n },\n {\n family: 'Noto Sans',\n variants: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],\n subsets: ['latin', 'latin-ext', 'cyrillic', 'cyrillic-ext', 'greek', 'greek-ext', 'vietnamese'],\n category: 'sans-serif',\n version: 'v36',\n lastModified: '2024-01-01',\n files: {\n '400':\n 'https://fonts.gstatic.com/s/notosans/v36/o-0mIpQlx3QUlC5A4PNB6Ryti20_6n1iPHjcz6L1SoM-jCpoiyD9A-9a6Vc.woff2',\n },\n },\n {\n family: 'Ubuntu',\n variants: ['300', '400', '500', '700'],\n subsets: ['latin', 'latin-ext', 'cyrillic', 'cyrillic-ext', 'greek', 'greek-ext'],\n category: 'sans-serif',\n version: 'v20',\n lastModified: '2024-01-01',\n files: {\n '400': 'https://fonts.gstatic.com/s/ubuntu/v20/4iCs6KVjbNBYlgoKcg72j00.woff2',\n },\n },\n {\n family: 'Manrope',\n variants: ['200', '300', '400', '500', '600', '700', '800'],\n subsets: ['latin', 'latin-ext', 'cyrillic', 'cyrillic-ext', 'greek', 'vietnamese'],\n category: 'sans-serif',\n version: 'v15',\n lastModified: '2024-01-01',\n files: {\n '400':\n 'https://fonts.gstatic.com/s/manrope/v15/xn7_YHE41ni1AdIRqAuZuw1Bx9mbZk59FO_F87jxeN7B.woff2',\n },\n },\n {\n family: 'Mulish',\n variants: ['200', '300', '400', '500', '600', '700', '800', '900'],\n subsets: ['latin', 'latin-ext', 'cyrillic', 'cyrillic-ext', 'vietnamese'],\n category: 'sans-serif',\n version: 'v13',\n lastModified: '2024-01-01',\n files: {\n '400':\n 'https://fonts.gstatic.com/s/mulish/v13/1Ptyg83HX_SGhgqO0yLcmjzUAuWexZNRwaClGrw-PTY.woff2',\n },\n },\n {\n family: 'Barlow',\n variants: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],\n subsets: ['latin', 'latin-ext', 'vietnamese'],\n category: 'sans-serif',\n version: 'v12',\n lastModified: '2024-01-01',\n files: {\n '400': 'https://fonts.gstatic.com/s/barlow/v12/7cHpv4kjgoGqM7E3b8s8yn4hnCci.woff2',\n },\n },\n {\n family: 'Work Sans',\n variants: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],\n subsets: ['latin', 'latin-ext', 'vietnamese'],\n category: 'sans-serif',\n version: 'v19',\n lastModified: '2024-01-01',\n files: {\n '400':\n 'https://fonts.gstatic.com/s/worksans/v19/QGY_z_wNahGAdqQ43RhVcIgYT2Xz5u32K0nWNigDp6_cOyA.woff2',\n },\n },\n {\n family: 'Quicksand',\n variants: ['300', '400', '500', '600', '700'],\n subsets: ['latin', 'latin-ext', 'vietnamese'],\n category: 'sans-serif',\n version: 'v31',\n lastModified: '2024-01-01',\n files: {\n '400':\n 'https://fonts.gstatic.com/s/quicksand/v31/6xK-dSZaM9iE8KbpRA_LJ3z8mH9BOJvgkP8o58a-xDwxUD2GF9Zc.woff2',\n },\n },\n {\n family: 'Karla',\n variants: ['200', '300', '400', '500', '600', '700', '800'],\n subsets: ['latin', 'latin-ext'],\n category: 'sans-serif',\n version: 'v31',\n lastModified: '2024-01-01',\n files: {\n '400':\n 'https://fonts.gstatic.com/s/karla/v31/qkBIXvYC6trAT55ZBi1ueQVIjQTDeJqqFENLR7fHGw.woff2',\n },\n },\n {\n family: 'Rubik',\n variants: ['300', '400', '500', '600', '700', '800', '900'],\n subsets: ['latin', 'latin-ext', 'cyrillic', 'cyrillic-ext', 'hebrew'],\n category: 'sans-serif',\n version: 'v28',\n lastModified: '2024-01-01',\n files: {\n '400': 'https://fonts.gstatic.com/s/rubik/v28/iJWZBXyIfDnIV5PNhY1KTN7Z-Yh-B4iFV0U1.woff2',\n },\n },\n {\n family: 'DM Sans',\n variants: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],\n subsets: ['latin', 'latin-ext'],\n category: 'sans-serif',\n version: 'v15',\n lastModified: '2024-01-01',\n files: {\n '400':\n 'https://fonts.gstatic.com/s/dmsans/v15/rP2tp2ywxg089UriI5-g4vlH9VoD8CmcqZG40F9JadbnoEwAopxRR236MF0WOQ.woff2',\n },\n },\n {\n family: 'Josefin Sans',\n variants: ['100', '200', '300', '400', '500', '600', '700'],\n subsets: ['latin', 'latin-ext', 'vietnamese'],\n category: 'sans-serif',\n version: 'v32',\n lastModified: '2024-01-01',\n files: {\n '400':\n 'https://fonts.gstatic.com/s/josefinsans/v32/Qw3PZQNVED7rKGKxtqIqX5E-AVSJrOCfjY46_DjRXMFrLgTsQV0.woff2',\n },\n },\n {\n family: 'Libre Baskerville',\n variants: ['400', '700'],\n subsets: ['latin', 'latin-ext'],\n category: 'serif',\n version: 'v14',\n lastModified: '2024-01-01',\n files: {\n '400':\n 'https://fonts.gstatic.com/s/librebaskerville/v14/kmKnZrc3Hgbbcjq75U4uslyuy4kn0pNeYRI4CN2V.woff2',\n },\n },\n {\n family: 'Source Sans 3',\n variants: ['200', '300', '400', '500', '600', '700', '800', '900'],\n subsets: ['latin', 'latin-ext', 'cyrillic', 'cyrillic-ext', 'greek', 'greek-ext', 'vietnamese'],\n category: 'sans-serif',\n version: 'v15',\n lastModified: '2024-01-01',\n files: {\n '400':\n 'https://fonts.gstatic.com/s/sourcesans3/v15/nwpBtKy2OAdR1K-IwhWudF-R9QMylBJAV3Bo8Kw461EN_io6npfB.woff2',\n },\n },\n {\n family: 'Be Vietnam Pro',\n variants: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],\n subsets: ['latin', 'latin-ext', 'vietnamese'],\n category: 'sans-serif',\n version: 'v11',\n lastModified: '2024-01-01',\n files: {\n '400':\n 'https://fonts.gstatic.com/s/bevietnampro/v11/QdVMSTAyLFyeg_IDWvOJmVES_HRUBX8YYbAiah8.woff2',\n },\n },\n {\n family: 'Lexend',\n variants: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],\n subsets: ['latin', 'latin-ext', 'vietnamese'],\n category: 'sans-serif',\n version: 'v19',\n lastModified: '2024-01-01',\n files: {\n '400':\n 'https://fonts.gstatic.com/s/lexend/v19/wlptgwvFAVdoq2_F94zlCfv0bz1WCzsX_LBte6KuGEo.woff2',\n },\n },\n {\n family: 'Archivo',\n variants: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],\n subsets: ['latin', 'latin-ext', 'vietnamese'],\n category: 'sans-serif',\n version: 'v19',\n lastModified: '2024-01-01',\n files: {\n '400':\n 'https://fonts.gstatic.com/s/archivo/v19/k3kQo8UDI-1M0wlSV9XAw6lQkqWY8Q82sJaRE-NWIDdgffTTNDJp8B1oJ0vyVQ.woff2',\n },\n },\n {\n family: 'Space Grotesk',\n variants: ['300', '400', '500', '600', '700'],\n subsets: ['latin', 'latin-ext', 'vietnamese'],\n category: 'sans-serif',\n version: 'v16',\n lastModified: '2024-01-01',\n files: {\n '400':\n 'https://fonts.gstatic.com/s/spacegrotesk/v16/V8mQoQDjQSkFtoMM3T6r8E7mF71Q-gOoraIAEj7oUUsjNsFjTDJK.woff2',\n },\n },\n {\n family: 'Outfit',\n variants: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],\n subsets: ['latin', 'latin-ext'],\n category: 'sans-serif',\n version: 'v11',\n lastModified: '2024-01-01',\n files: {\n '400':\n 'https://fonts.gstatic.com/s/outfit/v11/QGYyz_MVcBeNP4NjuGObqx1XmO1I4TC1O4a0EwEpq6W1J3f6ltDB.woff2',\n },\n },\n {\n family: 'Crimson Text',\n variants: ['400', '600', '700'],\n subsets: ['latin', 'latin-ext', 'vietnamese'],\n category: 'serif',\n version: 'v19',\n lastModified: '2024-01-01',\n files: {\n '400': 'https://fonts.gstatic.com/s/crimsontext/v19/wlp2gwHKFkZgtmSR3NB0oRJvaAJSA_JN3Q.woff2',\n },\n },\n {\n family: 'Inconsolata',\n variants: ['200', '300', '400', '500', '600', '700', '800', '900'],\n subsets: ['latin', 'latin-ext', 'vietnamese'],\n category: 'monospace',\n version: 'v32',\n lastModified: '2024-01-01',\n files: {\n '400':\n 'https://fonts.gstatic.com/s/inconsolata/v32/QldgNThLqRwH-OJ1UHjlKENVzkWGVkL3GZQmAwLYxYWI2qfdm7Lpp4U8aRr8lleY2co.woff2',\n },\n },\n {\n family: 'Dancing Script',\n variants: ['400', '500', '600', '700'],\n subsets: ['latin', 'latin-ext', 'vietnamese'],\n category: 'handwriting',\n version: 'v25',\n lastModified: '2024-01-01',\n files: {\n '400':\n 'https://fonts.gstatic.com/s/dancingscript/v25/If2cXTr6YS-zF4S-kcSWSVi_sxjsohD9F50Ruu7B1i03Rep8ltA.woff2',\n },\n },\n {\n family: 'Pacifico',\n variants: ['400'],\n subsets: ['latin', 'latin-ext', 'cyrillic', 'cyrillic-ext', 'vietnamese'],\n category: 'handwriting',\n version: 'v22',\n lastModified: '2024-01-01',\n files: {\n '400': 'https://fonts.gstatic.com/s/pacifico/v22/FwZY7-Qmy14u9lezJ96A4sijpFu_.woff2',\n },\n },\n {\n family: 'Bebas Neue',\n variants: ['400'],\n subsets: ['latin', 'latin-ext'],\n category: 'display',\n version: 'v14',\n lastModified: '2024-01-01',\n files: {\n '400': 'https://fonts.gstatic.com/s/bebasneue/v14/JTUSjIg69CK48gW7PXooxW5rygbi49c.woff2',\n },\n },\n {\n family: 'Righteous',\n variants: ['400'],\n subsets: ['latin', 'latin-ext'],\n category: 'display',\n version: 'v17',\n lastModified: '2024-01-01',\n files: {\n '400': 'https://fonts.gstatic.com/s/righteous/v17/1cXxaUPXBpj2rGoU7C9mj3uEicG01A.woff2',\n },\n },\n]\n\n/**\n * Filter fonts based on search, category, and subset\n */\nfunction filterFonts(\n fonts: GoogleFont[],\n search: string,\n category: FontCategory,\n subset: LanguageSubset,\n): GoogleFont[] {\n let filtered = fonts\n\n // Filter by search\n if (search) {\n const searchLower = search.toLowerCase()\n filtered = filtered.filter((font) => font.family.toLowerCase().includes(searchLower))\n }\n\n // Filter by category\n if (category !== 'all') {\n filtered = filtered.filter((font) => font.category === category)\n }\n\n // Filter by subset\n if (subset !== 'all') {\n filtered = filtered.filter((font) => font.subsets.includes(subset))\n }\n\n return filtered\n}\n\n/**\n * GET /api/google-fonts\n *\n * Query params:\n * - search: string (optional) - Search query\n * - category: FontCategory (optional) - Font category filter\n * - subset: LanguageSubset (optional) - Language subset filter\n * - limit: number (optional, default 100) - Number of fonts to return\n * - offset: number (optional, default 0) - Pagination offset\n */\nexport async function GET(request: NextRequest) {\n try {\n const { searchParams } = new URL(request.url)\n const search = searchParams.get('search') || ''\n const category = (searchParams.get('category') || 'all') as FontCategory\n const subset = (searchParams.get('subset') || 'all') as LanguageSubset\n const limit = Math.min(Number.parseInt(searchParams.get('limit') || '100'), 200)\n const offset = Number.parseInt(searchParams.get('offset') || '0')\n\n // Generate cache key\n const cacheKey = `${search}|${category}|${subset}`\n\n // Check cache\n const cached = cache.get(cacheKey)\n if (cached && Date.now() - cached.timestamp < CACHE_DURATION) {\n const fonts = cached.data.fonts.slice(offset, offset + limit)\n return NextResponse.json({\n fonts,\n total: cached.data.total,\n })\n }\n\n // Get Google Fonts API key from environment\n const apiKey = process.env.GOOGLE_FONTS_API_KEY\n\n let allFonts: GoogleFont[] = []\n\n if (apiKey) {\n try {\n // Fetch from Google Fonts API\n const response = await fetch(\n `https://www.googleapis.com/webfonts/v1/webfonts?key=${apiKey}&sort=popularity`,\n {\n next: { revalidate: 86400 }, // Revalidate every 24 hours\n },\n )\n\n if (!response.ok) {\n throw new Error(`Google Fonts API error: ${response.statusText}`)\n }\n\n const data = await response.json()\n allFonts = data.items || []\n } catch (error) {\n console.error('Google Fonts API error:', error)\n // Fall back to fallback fonts\n allFonts = FALLBACK_FONTS\n }\n } else {\n // No API key, use fallback fonts\n console.warn('GOOGLE_FONTS_API_KEY not set, using fallback fonts')\n allFonts = FALLBACK_FONTS\n }\n\n // Filter fonts\n const filteredFonts = filterFonts(allFonts, search, category, subset)\n\n // Cache the full filtered result\n cache.set(cacheKey, {\n data: {\n fonts: filteredFonts,\n total: filteredFonts.length,\n },\n timestamp: Date.now(),\n })\n\n // Return paginated result\n const fonts = filteredFonts.slice(offset, offset + limit)\n\n return NextResponse.json({\n fonts,\n total: filteredFonts.length,\n })\n } catch (error) {\n console.error('Error in /api/google-fonts:', error)\n return NextResponse.json(\n {\n error: 'Failed to fetch Google Fonts',\n fonts: FALLBACK_FONTS.slice(0, 100),\n total: FALLBACK_FONTS.length,\n },\n { status: 500 },\n )\n }\n}\n"],"names":["NextResponse","cache","Map","CACHE_DURATION","FALLBACK_FONTS","family","variants","subsets","category","version","lastModified","files","filterFonts","fonts","search","subset","filtered","searchLower","toLowerCase","filter","font","includes","GET","request","searchParams","URL","url","get","limit","Math","min","Number","parseInt","offset","cacheKey","cached","Date","now","timestamp","data","slice","json","total","apiKey","process","env","GOOGLE_FONTS_API_KEY","allFonts","response","fetch","next","revalidate","ok","Error","statusText","items","error","console","warn","filteredFonts","set","length","status"],"mappings":"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"}
|
|
@@ -124,7 +124,7 @@ const FontSelectField = ({ field, path })=>{
|
|
|
124
124
|
type: "button",
|
|
125
125
|
onClick: ()=>handleSelect(option.value),
|
|
126
126
|
style: {
|
|
127
|
-
width: '
|
|
127
|
+
width: '250px',
|
|
128
128
|
padding: '12px 14px',
|
|
129
129
|
border: 'none',
|
|
130
130
|
backgroundColor: isSelected ? 'var(--theme-elevation-100)' : 'transparent',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/fields/FontSelectField.tsx"],"sourcesContent":["'use client'\n\nimport { useField } from '@payloadcms/ui'\nimport type { SelectFieldClientComponent } from 'payload'\nimport { useEffect, useState } from 'react'\n\ninterface FontOption {\n label: string\n value: string\n fontFamily?: string\n category?: 'sans-serif' | 'serif' | 'monospace' | 'display'\n}\n\nconst FontSelectField: SelectFieldClientComponent = ({ field, path }) => {\n const { value, setValue } = useField<string>({ path })\n const [isOpen, setIsOpen] = useState(false)\n\n const options = (field.options as FontOption[]) || []\n const selectedOption = options.find((opt) => opt.value === value)\n\n const handleSelect = (optionValue: string) => {\n setValue(optionValue)\n setIsOpen(false)\n }\n\n useEffect(() => {\n const handleClickOutside = (e: MouseEvent) => {\n const target = e.target as HTMLElement\n if (!target.closest('.font-select-container')) {\n setIsOpen(false)\n }\n }\n\n if (isOpen) {\n document.addEventListener('mousedown', handleClickOutside)\n return () => document.removeEventListener('mousedown', handleClickOutside)\n }\n }, [isOpen])\n\n const label =\n typeof field.label === 'string' ? field.label : field.label?.en || field.label?.cs || 'Font'\n\n return (\n <div className=\"font-select-container\" style={{ position: 'relative', marginBottom: '12px' }}>\n <label\n style={{\n display: 'block',\n marginBottom: '6px',\n fontSize: '13px',\n fontWeight: 600,\n color: 'var(--theme-elevation-800)',\n }}\n >\n {label}\n </label>\n\n <button\n type=\"button\"\n onClick={() => setIsOpen(!isOpen)}\n style={{\n width: '100%',\n padding: '10px 14px',\n borderRadius: '6px',\n border: '1px solid var(--theme-elevation-200)',\n backgroundColor: 'var(--theme-input-bg)',\n color: 'var(--theme-elevation-800)',\n textAlign: 'left',\n cursor: 'pointer',\n display: 'flex',\n justifyContent: 'space-between',\n alignItems: 'center',\n fontSize: '14px',\n fontFamily: selectedOption?.fontFamily || 'inherit',\n transition: 'border-color 0.2s ease',\n }}\n onMouseEnter={(e) => {\n e.currentTarget.style.borderColor = 'var(--theme-elevation-400)'\n }}\n onMouseLeave={(e) => {\n e.currentTarget.style.borderColor = 'var(--theme-elevation-200)'\n }}\n >\n <span style={{ flex: 1 }}>{selectedOption?.label || 'Select font...'}</span>\n <svg\n width=\"12\"\n height=\"12\"\n viewBox=\"0 0 12 12\"\n fill=\"none\"\n style={{\n transition: 'transform 0.2s ease',\n transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)',\n }}\n >\n <path\n d=\"M3 4.5L6 7.5L9 4.5\"\n stroke=\"currentColor\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n </button>\n\n {isOpen && (\n <div\n style={{\n position: 'absolute',\n top: '100%',\n left: 0,\n right: 0,\n marginTop: '4px',\n maxHeight: '280px',\n overflowY: 'auto',\n backgroundColor: 'var(--theme-elevation-0)',\n border: '1px solid var(--theme-elevation-200)',\n borderRadius: '8px',\n boxShadow: '0 8px 24px rgba(15, 23, 42, 0.15)',\n zIndex: 1000,\n }}\n >\n {options.map((option) => {\n const isSelected = option.value === value\n\n let fontFamily = option.fontFamily\n if (!fontFamily) {\n if (option.category === 'sans-serif') fontFamily = 'system-ui, sans-serif'\n else if (option.category === 'serif') fontFamily = 'Georgia, serif'\n else if (option.category === 'monospace') fontFamily = 'monospace'\n else fontFamily = 'inherit'\n }\n\n return (\n <button\n key={option.value}\n type=\"button\"\n onClick={() => handleSelect(option.value)}\n style={{\n width: '100%',\n padding: '12px 14px',\n border: 'none',\n backgroundColor: isSelected ? 'var(--theme-elevation-100)' : 'transparent',\n color: 'var(--theme-elevation-800)',\n textAlign: 'left',\n cursor: 'pointer',\n fontSize: '14px',\n fontFamily,\n display: 'flex',\n flexDirection: 'column',\n gap: '4px',\n transition: 'background-color 0.15s ease',\n }}\n onMouseEnter={(e) => {\n if (!isSelected) {\n e.currentTarget.style.backgroundColor = 'var(--theme-elevation-50)'\n }\n }}\n onMouseLeave={(e) => {\n if (!isSelected) {\n e.currentTarget.style.backgroundColor = 'transparent'\n }\n }}\n >\n <div\n style={{\n fontWeight: isSelected ? 600 : 500,\n display: 'flex',\n alignItems: 'center',\n gap: '8px',\n }}\n >\n {isSelected && (\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n <path\n d=\"M11.6667 3.5L5.25 9.91667L2.33334 7\"\n stroke=\"var(--theme-elevation-500)\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n )}\n {option.label}\n </div>\n <div\n style={{\n fontSize: '16px',\n color: 'var(--theme-elevation-600)',\n fontStyle:\n option.value === 'preset' || option.value === 'custom' ? 'italic' : 'normal',\n }}\n >\n {(() => {\n if (option.value === 'preset') return 'Use theme preset font'\n if (option.value === 'custom') return 'Specify custom font below'\n return 'The quick brown fox jumps over the lazy dog'\n })()}\n </div>\n </button>\n )\n })}\n </div>\n )}\n </div>\n )\n}\n\nexport default FontSelectField\n"],"names":["useField","useEffect","useState","FontSelectField","field","path","value","setValue","isOpen","setIsOpen","options","selectedOption","find","opt","handleSelect","optionValue","handleClickOutside","e","target","closest","document","addEventListener","removeEventListener","label","en","cs","div","className","style","position","marginBottom","display","fontSize","fontWeight","color","button","type","onClick","width","padding","borderRadius","border","backgroundColor","textAlign","cursor","justifyContent","alignItems","fontFamily","transition","onMouseEnter","currentTarget","borderColor","onMouseLeave","span","flex","svg","height","viewBox","fill","transform","d","stroke","strokeWidth","strokeLinecap","strokeLinejoin","top","left","right","marginTop","maxHeight","overflowY","boxShadow","zIndex","map","option","isSelected","category","flexDirection","gap","fontStyle"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../../src/fields/FontSelectField.tsx"],"sourcesContent":["'use client'\n\nimport { useField } from '@payloadcms/ui'\nimport type { SelectFieldClientComponent } from 'payload'\nimport { useEffect, useState } from 'react'\n\ninterface FontOption {\n label: string\n value: string\n fontFamily?: string\n category?: 'sans-serif' | 'serif' | 'monospace' | 'display'\n}\n\nconst FontSelectField: SelectFieldClientComponent = ({ field, path }) => {\n const { value, setValue } = useField<string>({ path })\n const [isOpen, setIsOpen] = useState(false)\n\n const options = (field.options as FontOption[]) || []\n const selectedOption = options.find((opt) => opt.value === value)\n\n const handleSelect = (optionValue: string) => {\n setValue(optionValue)\n setIsOpen(false)\n }\n\n useEffect(() => {\n const handleClickOutside = (e: MouseEvent) => {\n const target = e.target as HTMLElement\n if (!target.closest('.font-select-container')) {\n setIsOpen(false)\n }\n }\n\n if (isOpen) {\n document.addEventListener('mousedown', handleClickOutside)\n return () => document.removeEventListener('mousedown', handleClickOutside)\n }\n }, [isOpen])\n\n const label =\n typeof field.label === 'string' ? field.label : field.label?.en || field.label?.cs || 'Font'\n\n return (\n <div className=\"font-select-container\" style={{ position: 'relative', marginBottom: '12px' }}>\n <label\n style={{\n display: 'block',\n marginBottom: '6px',\n fontSize: '13px',\n fontWeight: 600,\n color: 'var(--theme-elevation-800)',\n }}\n >\n {label}\n </label>\n\n <button\n type=\"button\"\n onClick={() => setIsOpen(!isOpen)}\n style={{\n width: '100%',\n padding: '10px 14px',\n borderRadius: '6px',\n border: '1px solid var(--theme-elevation-200)',\n backgroundColor: 'var(--theme-input-bg)',\n color: 'var(--theme-elevation-800)',\n textAlign: 'left',\n cursor: 'pointer',\n display: 'flex',\n justifyContent: 'space-between',\n alignItems: 'center',\n fontSize: '14px',\n fontFamily: selectedOption?.fontFamily || 'inherit',\n transition: 'border-color 0.2s ease',\n }}\n onMouseEnter={(e) => {\n e.currentTarget.style.borderColor = 'var(--theme-elevation-400)'\n }}\n onMouseLeave={(e) => {\n e.currentTarget.style.borderColor = 'var(--theme-elevation-200)'\n }}\n >\n <span style={{ flex: 1 }}>{selectedOption?.label || 'Select font...'}</span>\n <svg\n width=\"12\"\n height=\"12\"\n viewBox=\"0 0 12 12\"\n fill=\"none\"\n style={{\n transition: 'transform 0.2s ease',\n transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)',\n }}\n >\n <path\n d=\"M3 4.5L6 7.5L9 4.5\"\n stroke=\"currentColor\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n </button>\n\n {isOpen && (\n <div\n style={{\n position: 'absolute',\n top: '100%',\n left: 0,\n right: 0,\n marginTop: '4px',\n maxHeight: '280px',\n overflowY: 'auto',\n backgroundColor: 'var(--theme-elevation-0)',\n border: '1px solid var(--theme-elevation-200)',\n borderRadius: '8px',\n boxShadow: '0 8px 24px rgba(15, 23, 42, 0.15)',\n zIndex: 1000,\n }}\n >\n {options.map((option) => {\n const isSelected = option.value === value\n\n let fontFamily = option.fontFamily\n if (!fontFamily) {\n if (option.category === 'sans-serif') fontFamily = 'system-ui, sans-serif'\n else if (option.category === 'serif') fontFamily = 'Georgia, serif'\n else if (option.category === 'monospace') fontFamily = 'monospace'\n else fontFamily = 'inherit'\n }\n\n return (\n <button\n key={option.value}\n type=\"button\"\n onClick={() => handleSelect(option.value)}\n style={{\n width: '250px',\n padding: '12px 14px',\n border: 'none',\n backgroundColor: isSelected ? 'var(--theme-elevation-100)' : 'transparent',\n color: 'var(--theme-elevation-800)',\n textAlign: 'left',\n cursor: 'pointer',\n fontSize: '14px',\n fontFamily,\n display: 'flex',\n flexDirection: 'column',\n gap: '4px',\n transition: 'background-color 0.15s ease',\n }}\n onMouseEnter={(e) => {\n if (!isSelected) {\n e.currentTarget.style.backgroundColor = 'var(--theme-elevation-50)'\n }\n }}\n onMouseLeave={(e) => {\n if (!isSelected) {\n e.currentTarget.style.backgroundColor = 'transparent'\n }\n }}\n >\n <div\n style={{\n fontWeight: isSelected ? 600 : 500,\n display: 'flex',\n alignItems: 'center',\n gap: '8px',\n }}\n >\n {isSelected && (\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n <path\n d=\"M11.6667 3.5L5.25 9.91667L2.33334 7\"\n stroke=\"var(--theme-elevation-500)\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n )}\n {option.label}\n </div>\n <div\n style={{\n fontSize: '16px',\n color: 'var(--theme-elevation-600)',\n fontStyle:\n option.value === 'preset' || option.value === 'custom' ? 'italic' : 'normal',\n }}\n >\n {(() => {\n if (option.value === 'preset') return 'Use theme preset font'\n if (option.value === 'custom') return 'Specify custom font below'\n return 'The quick brown fox jumps over the lazy dog'\n })()}\n </div>\n </button>\n )\n })}\n </div>\n )}\n </div>\n )\n}\n\nexport default FontSelectField\n"],"names":["useField","useEffect","useState","FontSelectField","field","path","value","setValue","isOpen","setIsOpen","options","selectedOption","find","opt","handleSelect","optionValue","handleClickOutside","e","target","closest","document","addEventListener","removeEventListener","label","en","cs","div","className","style","position","marginBottom","display","fontSize","fontWeight","color","button","type","onClick","width","padding","borderRadius","border","backgroundColor","textAlign","cursor","justifyContent","alignItems","fontFamily","transition","onMouseEnter","currentTarget","borderColor","onMouseLeave","span","flex","svg","height","viewBox","fill","transform","d","stroke","strokeWidth","strokeLinecap","strokeLinejoin","top","left","right","marginTop","maxHeight","overflowY","boxShadow","zIndex","map","option","isSelected","category","flexDirection","gap","fontStyle"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ThemeTokenSelectField.d.ts","sourceRoot":"","sources":["../../src/fields/ThemeTokenSelectField.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAA;
|
|
1
|
+
{"version":3,"file":"ThemeTokenSelectField.d.ts","sourceRoot":"","sources":["../../src/fields/ThemeTokenSelectField.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAA;AAsFrD,MAAM,CAAC,OAAO,UAAU,qBAAqB,CAAC,KAAK,EAAE,sBAAsB,+BAoI1E"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { useField } from '@payloadcms/ui';
|
|
4
|
-
import { useCallback, useEffect, useState } from 'react';
|
|
5
|
-
import {
|
|
4
|
+
import { useCallback, useEffect, useMemo, useState } from 'react';
|
|
5
|
+
import { allThemePresets } from '../index.js';
|
|
6
6
|
import { resolveThemeConfiguration } from '../utils/resolveThemeConfiguration.js';
|
|
7
7
|
const FALLBACK_TOKENS = [
|
|
8
8
|
{
|
|
@@ -49,12 +49,12 @@ async function fetchThemeConfiguration() {
|
|
|
49
49
|
return null;
|
|
50
50
|
}
|
|
51
51
|
}
|
|
52
|
-
function buildOptionsFromConfiguration(configuration) {
|
|
52
|
+
function buildOptionsFromConfiguration(configuration, themePresets) {
|
|
53
53
|
if (!configuration) {
|
|
54
54
|
return FALLBACK_TOKENS;
|
|
55
55
|
}
|
|
56
56
|
const resolved = resolveThemeConfiguration(configuration);
|
|
57
|
-
const lightMode = resolved.lightMode ??
|
|
57
|
+
const lightMode = resolved.lightMode ?? themePresets[0]?.lightMode ?? {};
|
|
58
58
|
const orderedKeys = [
|
|
59
59
|
'background',
|
|
60
60
|
'card',
|
|
@@ -94,11 +94,18 @@ export default function ThemeTokenSelectField(props) {
|
|
|
94
94
|
});
|
|
95
95
|
const [options, setOptions] = useState(FALLBACK_TOKENS);
|
|
96
96
|
const selectedValue = value || 'background';
|
|
97
|
+
// Get themePresets from admin.custom or use defaults
|
|
98
|
+
const themePresets = useMemo(()=>{
|
|
99
|
+
const customPresets = field.admin?.custom?.themePresets;
|
|
100
|
+
return customPresets && customPresets.length > 0 ? customPresets : allThemePresets;
|
|
101
|
+
}, [
|
|
102
|
+
field.admin?.custom
|
|
103
|
+
]);
|
|
97
104
|
useEffect(()=>{
|
|
98
105
|
let isMounted = true;
|
|
99
106
|
fetchThemeConfiguration().then((configuration)=>{
|
|
100
107
|
if (!isMounted) return;
|
|
101
|
-
setOptions(buildOptionsFromConfiguration(configuration));
|
|
108
|
+
setOptions(buildOptionsFromConfiguration(configuration, themePresets));
|
|
102
109
|
});
|
|
103
110
|
return ()=>{
|
|
104
111
|
isMounted = false;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/fields/ThemeTokenSelectField.tsx"],"sourcesContent":["'use client'\n\nimport { useField } from '@payloadcms/ui'\nimport type { SelectFieldClientProps } from 'payload'\nimport { useCallback, useEffect, useState } from 'react'\nimport { defaultThemePresets } from '../presets.js'\nimport { resolveThemeConfiguration } from '../utils/resolveThemeConfiguration.js'\n\ninterface ThemeColorOption {\n value: string\n label: string\n color: string\n description?: string\n}\n\nconst FALLBACK_TOKENS: ThemeColorOption[] = [\n { value: 'background', label: 'Theme background', color: 'var(--background)' },\n { value: 'card', label: 'Card background', color: 'var(--card)' },\n { value: 'muted', label: 'Muted surface', color: 'var(--muted)' },\n { value: 'accent', label: 'Accent surface', color: 'var(--accent)' },\n { value: 'secondary', label: 'Secondary surface', color: 'var(--secondary)' },\n { value: 'primary', label: 'Primary surface', color: 'var(--primary)' },\n]\n\nasync function fetchThemeConfiguration(): Promise<Record<string, unknown> | null> {\n try {\n const response = await fetch('/api/site-settings')\n if (!response.ok) {\n return null\n }\n const data = await response.json()\n return data?.docs?.[0]?.themeConfiguration ?? null\n } catch (error) {\n console.warn('[ThemeTokenSelectField] Failed to fetch theme configuration:', error)\n return null\n }\n}\n\nfunction buildOptionsFromConfiguration(\n configuration: Record<string, unknown> | null,\n): ThemeColorOption[] {\n if (!configuration) {\n return FALLBACK_TOKENS\n }\n\n const resolved = resolveThemeConfiguration(configuration)\n const lightMode = resolved.lightMode ?? defaultThemePresets[0]?.lightMode ?? {}\n const orderedKeys: string[] = [\n 'background',\n 'card',\n 'muted',\n 'accent',\n 'secondary',\n 'primary',\n 'popover',\n ]\n\n const typedLightMode = lightMode as Record<string, string | null | undefined>\n\n const tokens = orderedKeys\n .map((key) => {\n const value = typedLightMode?.[key]\n if (typeof value !== 'string' || value.trim().length === 0) {\n return null\n }\n\n const labelMap: Record<string, string> = {\n background: 'Theme background',\n card: 'Card background',\n muted: 'Muted surface',\n accent: 'Accent surface',\n secondary: 'Secondary surface',\n primary: 'Primary surface',\n popover: 'Popover surface',\n }\n\n return {\n value: key,\n label: labelMap[key] ?? key,\n color: value,\n }\n })\n .filter((token): token is ThemeColorOption => Boolean(token))\n\n return tokens.length > 0 ? tokens : FALLBACK_TOKENS\n}\n\nexport default function ThemeTokenSelectField(props: SelectFieldClientProps) {\n const { path, field } = props\n const { value, setValue } = useField<string>({ path })\n const [options, setOptions] = useState<ThemeColorOption[]>(FALLBACK_TOKENS)\n const selectedValue = value || 'background'\n\n useEffect(() => {\n let isMounted = true\n\n fetchThemeConfiguration().then((configuration) => {\n if (!isMounted) return\n setOptions(buildOptionsFromConfiguration(configuration))\n })\n\n return () => {\n isMounted = false\n }\n }, [])\n\n const handleSelect = useCallback(\n (nextValue: string) => {\n setValue(nextValue)\n },\n [setValue],\n )\n\n const label = typeof field.label === 'string' ? field.label : ''\n let description = ''\n if (typeof field.admin?.description === 'string') {\n description = field.admin.description\n } else if (\n field.admin?.description &&\n typeof field.admin.description === 'object' &&\n typeof field.admin.description.en === 'string'\n ) {\n description = field.admin.description.en\n }\n\n return (\n <div className=\"field-type theme-token-select\">\n {label && (\n <label\n className=\"field-label\"\n htmlFor={path}\n style={{ display: 'block', marginBottom: '8px' }}\n >\n {label}\n {field.required && <span className=\"required\">*</span>}\n </label>\n )}\n\n {description && (\n <div\n className=\"field-description\"\n style={{ marginBottom: '12px', fontSize: '13px', color: 'var(--theme-elevation-500)' }}\n >\n {description}\n </div>\n )}\n\n <div\n className=\"token-grid\"\n style={{\n display: 'grid',\n gridTemplateColumns: 'repeat(auto-fill, minmax(140px, 1fr))',\n gap: '10px',\n }}\n >\n {options.map((option) => {\n const isActive = option.value === selectedValue\n return (\n <button\n type=\"button\"\n key={option.value}\n onClick={() => handleSelect(option.value)}\n style={{\n display: 'flex',\n alignItems: 'center',\n gap: '10px',\n padding: '10px 12px',\n borderRadius: '10px',\n border: isActive\n ? '2px solid var(--theme-success-500)'\n : '1px solid var(--theme-elevation-150)',\n backgroundColor: 'var(--theme-elevation-0)',\n boxShadow: isActive\n ? '0 10px 20px -10px rgba(59, 130, 246, 0.4)'\n : '0 1px 2px rgba(15, 23, 42, 0.08)',\n cursor: 'pointer',\n transition: 'border-color 0.2s ease, box-shadow 0.2s ease',\n }}\n >\n <span\n aria-hidden\n style={{\n width: '32px',\n height: '32px',\n borderRadius: '8px',\n border: '1px solid rgba(15, 23, 42, 0.08)',\n background: option.color,\n }}\n />\n <span\n style={{ fontSize: '13px', fontWeight: 600, color: 'var(--theme-elevation-800)' }}\n >\n {option.label}\n </span>\n </button>\n )\n })}\n </div>\n\n <select\n id={path}\n value={selectedValue}\n onChange={(event) => handleSelect(event.target.value)}\n style={{ display: 'none' }}\n >\n {options.map((option) => (\n <option key={option.value} value={option.value}>\n {option.label}\n </option>\n ))}\n </select>\n </div>\n )\n}\n"],"names":["useField","useCallback","useEffect","useState","defaultThemePresets","resolveThemeConfiguration","FALLBACK_TOKENS","value","label","color","fetchThemeConfiguration","response","fetch","ok","data","json","docs","themeConfiguration","error","console","warn","buildOptionsFromConfiguration","configuration","resolved","lightMode","orderedKeys","typedLightMode","tokens","map","key","trim","length","labelMap","background","card","muted","accent","secondary","primary","popover","filter","token","Boolean","ThemeTokenSelectField","props","path","field","setValue","options","setOptions","selectedValue","isMounted","then","handleSelect","nextValue","description","admin","en","div","className","htmlFor","style","display","marginBottom","required","span","fontSize","gridTemplateColumns","gap","option","isActive","button","type","onClick","alignItems","padding","borderRadius","border","backgroundColor","boxShadow","cursor","transition","aria-hidden","width","height","fontWeight","select","id","onChange","event","target"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../../src/fields/ThemeTokenSelectField.tsx"],"sourcesContent":["'use client'\n\nimport { useField } from '@payloadcms/ui'\nimport type { SelectFieldClientProps } from 'payload'\nimport { useCallback, useEffect, useMemo, useState } from 'react'\nimport { allThemePresets } from '../index.js'\nimport type { ThemePreset } from '../presets.js'\nimport { resolveThemeConfiguration } from '../utils/resolveThemeConfiguration.js'\n\ninterface ThemeColorOption {\n value: string\n label: string\n color: string\n description?: string\n}\n\nconst FALLBACK_TOKENS: ThemeColorOption[] = [\n { value: 'background', label: 'Theme background', color: 'var(--background)' },\n { value: 'card', label: 'Card background', color: 'var(--card)' },\n { value: 'muted', label: 'Muted surface', color: 'var(--muted)' },\n { value: 'accent', label: 'Accent surface', color: 'var(--accent)' },\n { value: 'secondary', label: 'Secondary surface', color: 'var(--secondary)' },\n { value: 'primary', label: 'Primary surface', color: 'var(--primary)' },\n]\n\nasync function fetchThemeConfiguration(): Promise<Record<string, unknown> | null> {\n try {\n const response = await fetch('/api/site-settings')\n if (!response.ok) {\n return null\n }\n const data = await response.json()\n return data?.docs?.[0]?.themeConfiguration ?? null\n } catch (error) {\n console.warn('[ThemeTokenSelectField] Failed to fetch theme configuration:', error)\n return null\n }\n}\n\nfunction buildOptionsFromConfiguration(\n configuration: Record<string, unknown> | null,\n themePresets: ThemePreset[],\n): ThemeColorOption[] {\n if (!configuration) {\n return FALLBACK_TOKENS\n }\n\n const resolved = resolveThemeConfiguration(configuration)\n const lightMode = resolved.lightMode ?? themePresets[0]?.lightMode ?? {}\n const orderedKeys: string[] = [\n 'background',\n 'card',\n 'muted',\n 'accent',\n 'secondary',\n 'primary',\n 'popover',\n ]\n\n const typedLightMode = lightMode as Record<string, string | null | undefined>\n\n const tokens = orderedKeys\n .map((key) => {\n const value = typedLightMode?.[key]\n if (typeof value !== 'string' || value.trim().length === 0) {\n return null\n }\n\n const labelMap: Record<string, string> = {\n background: 'Theme background',\n card: 'Card background',\n muted: 'Muted surface',\n accent: 'Accent surface',\n secondary: 'Secondary surface',\n primary: 'Primary surface',\n popover: 'Popover surface',\n }\n\n return {\n value: key,\n label: labelMap[key] ?? key,\n color: value,\n }\n })\n .filter((token): token is ThemeColorOption => Boolean(token))\n\n return tokens.length > 0 ? tokens : FALLBACK_TOKENS\n}\n\nexport default function ThemeTokenSelectField(props: SelectFieldClientProps) {\n const { path, field } = props\n const { value, setValue } = useField<string>({ path })\n const [options, setOptions] = useState<ThemeColorOption[]>(FALLBACK_TOKENS)\n const selectedValue = value || 'background'\n\n // Get themePresets from admin.custom or use defaults\n const themePresets = useMemo(() => {\n const customPresets = (field.admin?.custom as { themePresets?: ThemePreset[] })?.themePresets\n return customPresets && customPresets.length > 0 ? customPresets : allThemePresets\n }, [field.admin?.custom])\n\n useEffect(() => {\n let isMounted = true\n\n fetchThemeConfiguration().then((configuration) => {\n if (!isMounted) return\n setOptions(buildOptionsFromConfiguration(configuration, themePresets))\n })\n\n return () => {\n isMounted = false\n }\n }, [])\n\n const handleSelect = useCallback(\n (nextValue: string) => {\n setValue(nextValue)\n },\n [setValue],\n )\n\n const label = typeof field.label === 'string' ? field.label : ''\n let description = ''\n if (typeof field.admin?.description === 'string') {\n description = field.admin.description\n } else if (\n field.admin?.description &&\n typeof field.admin.description === 'object' &&\n typeof field.admin.description.en === 'string'\n ) {\n description = field.admin.description.en\n }\n\n return (\n <div className=\"field-type theme-token-select\">\n {label && (\n <label\n className=\"field-label\"\n htmlFor={path}\n style={{ display: 'block', marginBottom: '8px' }}\n >\n {label}\n {field.required && <span className=\"required\">*</span>}\n </label>\n )}\n\n {description && (\n <div\n className=\"field-description\"\n style={{ marginBottom: '12px', fontSize: '13px', color: 'var(--theme-elevation-500)' }}\n >\n {description}\n </div>\n )}\n\n <div\n className=\"token-grid\"\n style={{\n display: 'grid',\n gridTemplateColumns: 'repeat(auto-fill, minmax(140px, 1fr))',\n gap: '10px',\n }}\n >\n {options.map((option) => {\n const isActive = option.value === selectedValue\n return (\n <button\n type=\"button\"\n key={option.value}\n onClick={() => handleSelect(option.value)}\n style={{\n display: 'flex',\n alignItems: 'center',\n gap: '10px',\n padding: '10px 12px',\n borderRadius: '10px',\n border: isActive\n ? '2px solid var(--theme-success-500)'\n : '1px solid var(--theme-elevation-150)',\n backgroundColor: 'var(--theme-elevation-0)',\n boxShadow: isActive\n ? '0 10px 20px -10px rgba(59, 130, 246, 0.4)'\n : '0 1px 2px rgba(15, 23, 42, 0.08)',\n cursor: 'pointer',\n transition: 'border-color 0.2s ease, box-shadow 0.2s ease',\n }}\n >\n <span\n aria-hidden\n style={{\n width: '32px',\n height: '32px',\n borderRadius: '8px',\n border: '1px solid rgba(15, 23, 42, 0.08)',\n background: option.color,\n }}\n />\n <span\n style={{ fontSize: '13px', fontWeight: 600, color: 'var(--theme-elevation-800)' }}\n >\n {option.label}\n </span>\n </button>\n )\n })}\n </div>\n\n <select\n id={path}\n value={selectedValue}\n onChange={(event) => handleSelect(event.target.value)}\n style={{ display: 'none' }}\n >\n {options.map((option) => (\n <option key={option.value} value={option.value}>\n {option.label}\n </option>\n ))}\n </select>\n </div>\n )\n}\n"],"names":["useField","useCallback","useEffect","useMemo","useState","allThemePresets","resolveThemeConfiguration","FALLBACK_TOKENS","value","label","color","fetchThemeConfiguration","response","fetch","ok","data","json","docs","themeConfiguration","error","console","warn","buildOptionsFromConfiguration","configuration","themePresets","resolved","lightMode","orderedKeys","typedLightMode","tokens","map","key","trim","length","labelMap","background","card","muted","accent","secondary","primary","popover","filter","token","Boolean","ThemeTokenSelectField","props","path","field","setValue","options","setOptions","selectedValue","customPresets","admin","custom","isMounted","then","handleSelect","nextValue","description","en","div","className","htmlFor","style","display","marginBottom","required","span","fontSize","gridTemplateColumns","gap","option","isActive","button","type","onClick","alignItems","padding","borderRadius","border","backgroundColor","boxShadow","cursor","transition","aria-hidden","width","height","fontWeight","select","id","onChange","event","target"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"themeConfigurationField.d.ts","sourceRoot":"","sources":["../../src/fields/themeConfigurationField.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAS,SAAS,EAAE,MAAM,SAAS,CAAA;AAO/C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AAG9C,UAAU,8BAA8B;IACtC,YAAY,EAAE,WAAW,EAAE,CAAA;IAC3B,YAAY,EAAE,MAAM,CAAA;IACpB,sBAAsB,EAAE,OAAO,CAAA;IAC/B,gBAAgB,EAAE,OAAO,CAAA;IACzB,oBAAoB,EAAE,OAAO,CAAA;IAC7B,sBAAsB,CAAC,EAAE,OAAO,CAAA;CACjC;
|
|
1
|
+
{"version":3,"file":"themeConfigurationField.d.ts","sourceRoot":"","sources":["../../src/fields/themeConfigurationField.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAS,SAAS,EAAE,MAAM,SAAS,CAAA;AAO/C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AAG9C,UAAU,8BAA8B;IACtC,YAAY,EAAE,WAAW,EAAE,CAAA;IAC3B,YAAY,EAAE,MAAM,CAAA;IACpB,sBAAsB,EAAE,OAAO,CAAA;IAC/B,gBAAgB,EAAE,OAAO,CAAA;IACzB,oBAAoB,EAAE,OAAO,CAAA;IAC7B,sBAAsB,CAAC,EAAE,OAAO,CAAA;CACjC;AAQD,MAAM,MAAM,QAAQ,GAAG,WAAW,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAA;AAE7D;;;GAGG;AACH,wBAAgB,6BAA6B,CAAC,OAAO,EAAE,8BAA8B,GAAG,QAAQ,CA6a/F"}
|
|
@@ -90,7 +90,8 @@ import { darkModeField, lightModeField } from './colorModeFields.js';
|
|
|
90
90
|
cs: 'Výchozí zaoblení rohů pro UI prvky'
|
|
91
91
|
},
|
|
92
92
|
width: '50%'
|
|
93
|
-
}
|
|
93
|
+
},
|
|
94
|
+
dbName: 'border_radius'
|
|
94
95
|
},
|
|
95
96
|
{
|
|
96
97
|
name: 'spacing',
|
|
@@ -129,7 +130,8 @@ import { darkModeField, lightModeField } from './colorModeFields.js';
|
|
|
129
130
|
cs: 'Globální rozestupy mezi prvky'
|
|
130
131
|
},
|
|
131
132
|
width: '50%'
|
|
132
|
-
}
|
|
133
|
+
},
|
|
134
|
+
dbName: 'spacing'
|
|
133
135
|
}
|
|
134
136
|
]
|
|
135
137
|
});
|
|
@@ -189,7 +191,8 @@ import { darkModeField, lightModeField } from './colorModeFields.js';
|
|
|
189
191
|
cs: 'Výchozí barevný režim pro návštěvníky'
|
|
190
192
|
},
|
|
191
193
|
width: '50%'
|
|
192
|
-
}
|
|
194
|
+
},
|
|
195
|
+
dbName: 'color_mode'
|
|
193
196
|
},
|
|
194
197
|
{
|
|
195
198
|
name: 'allowColorModeToggle',
|
|
@@ -244,14 +247,16 @@ import { darkModeField, lightModeField } from './colorModeFields.js';
|
|
|
244
247
|
cs: 'Písmo pro text'
|
|
245
248
|
},
|
|
246
249
|
defaultValue: 'preset',
|
|
247
|
-
|
|
248
|
-
|
|
250
|
+
options: [
|
|
251
|
+
...BODY_FONT_OPTIONS
|
|
252
|
+
],
|
|
249
253
|
admin: {
|
|
250
254
|
width: '50%',
|
|
251
255
|
components: {
|
|
252
256
|
Field: '@kilivi/payloadcms-theme-management/fields/FontSelectField'
|
|
253
257
|
}
|
|
254
|
-
}
|
|
258
|
+
},
|
|
259
|
+
dbName: 'body_font'
|
|
255
260
|
},
|
|
256
261
|
{
|
|
257
262
|
name: 'headingFont',
|
|
@@ -261,14 +266,16 @@ import { darkModeField, lightModeField } from './colorModeFields.js';
|
|
|
261
266
|
cs: 'Písmo pro nadpisy'
|
|
262
267
|
},
|
|
263
268
|
defaultValue: 'preset',
|
|
264
|
-
|
|
265
|
-
|
|
269
|
+
options: [
|
|
270
|
+
...HEADING_FONT_OPTIONS
|
|
271
|
+
],
|
|
266
272
|
admin: {
|
|
267
273
|
width: '50%',
|
|
268
274
|
components: {
|
|
269
275
|
Field: '@kilivi/payloadcms-theme-management/fields/FontSelectField'
|
|
270
276
|
}
|
|
271
|
-
}
|
|
277
|
+
},
|
|
278
|
+
dbName: 'heading_font'
|
|
272
279
|
}
|
|
273
280
|
]
|
|
274
281
|
},
|
|
@@ -328,7 +335,8 @@ import { darkModeField, lightModeField } from './colorModeFields.js';
|
|
|
328
335
|
})),
|
|
329
336
|
admin: {
|
|
330
337
|
width: '50%'
|
|
331
|
-
}
|
|
338
|
+
},
|
|
339
|
+
dbName: 'base_font_size'
|
|
332
340
|
},
|
|
333
341
|
{
|
|
334
342
|
name: 'lineHeight',
|
|
@@ -344,7 +352,8 @@ import { darkModeField, lightModeField } from './colorModeFields.js';
|
|
|
344
352
|
})),
|
|
345
353
|
admin: {
|
|
346
354
|
width: '50%'
|
|
347
|
-
}
|
|
355
|
+
},
|
|
356
|
+
dbName: 'line_height'
|
|
348
357
|
}
|
|
349
358
|
]
|
|
350
359
|
}
|
|
@@ -352,8 +361,7 @@ import { darkModeField, lightModeField } from './colorModeFields.js';
|
|
|
352
361
|
}
|
|
353
362
|
]
|
|
354
363
|
});
|
|
355
|
-
|
|
356
|
-
fields.push({
|
|
364
|
+
const customPresetsField = {
|
|
357
365
|
type: 'collapsible',
|
|
358
366
|
label: {
|
|
359
367
|
en: '🧩 Custom Theme Presets',
|
|
@@ -385,7 +393,8 @@ import { darkModeField, lightModeField } from './colorModeFields.js';
|
|
|
385
393
|
}
|
|
386
394
|
}
|
|
387
395
|
]
|
|
388
|
-
}
|
|
396
|
+
};
|
|
397
|
+
fields.push(customPresetsField);
|
|
389
398
|
// Advanced Settings (when using extended theme configuration)
|
|
390
399
|
if (enableAdvancedFeatures) {
|
|
391
400
|
const advancedFields = [
|
|
@@ -433,7 +442,8 @@ import { darkModeField, lightModeField } from './colorModeFields.js';
|
|
|
433
442
|
cs: 'Kontrola animací a přechodů na webu'
|
|
434
443
|
},
|
|
435
444
|
width: '50%'
|
|
436
|
-
}
|
|
445
|
+
},
|
|
446
|
+
dbName: 'animation_level'
|
|
437
447
|
}
|
|
438
448
|
];
|
|
439
449
|
if (includeCustomCSS) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/fields/themeConfigurationField.ts"],"sourcesContent":["import type { Field, TabsField } from 'payload'\nimport {\n BASE_FONT_SIZE_OPTIONS,\n BODY_FONT_OPTIONS,\n HEADING_FONT_OPTIONS,\n LINE_HEIGHT_OPTIONS,\n} from '../constants/themeFonts.js'\nimport type { ThemePreset } from '../index.js'\nimport { darkModeField, lightModeField } from './colorModeFields.js'\n\ninterface ThemeConfigurationFieldOptions {\n themePresets: ThemePreset[]\n defaultTheme: string\n includeColorModeToggle: boolean\n includeCustomCSS: boolean\n includeBrandIdentity: boolean\n enableAdvancedFeatures?: boolean\n}\n\n// Type for a single tab (not the full TabsField)\nexport type ThemeTab = NonNullable<TabsField['tabs']>[number]\n\n/**\n * Theme Configuration Field with Theme Selection as default value setter\n * Theme Selection populates lightMode/darkMode colors automatically\n */\nexport function createThemeConfigurationField(options: ThemeConfigurationFieldOptions): ThemeTab {\n const {\n themePresets,\n defaultTheme,\n includeColorModeToggle,\n includeCustomCSS,\n enableAdvancedFeatures = true,\n } = options\n\n const fields: Field[] = [\n {\n name: 'theme',\n type: 'text',\n required: true,\n defaultValue: defaultTheme,\n label: {\n en: '🎨 Theme Selection',\n cs: '🎨 Výběr tématu',\n },\n validate: (value: unknown) => {\n if (typeof value === 'string' && value.trim().length > 0) {\n return true\n }\n return 'Select a theme'\n },\n admin: {\n description: {\n en: 'Select a theme to auto-populate color values. You can customize colors after selection.',\n cs: 'Vyberte téma pro automatické předvyplnění barev. Po výběru můžete barvy upravit.',\n },\n components: {\n Field: '@kilivi/payloadcms-theme-management/fields/ThemePreviewField',\n },\n custom: {\n themePresets,\n },\n },\n },\n ]\n\n // Border Radius Configuration - Always visible\n fields.push({\n type: 'row',\n fields: [\n {\n name: 'borderRadius',\n type: 'select',\n label: {\n en: '📐 Border Radius',\n cs: '📐 Zaoblení rohů',\n },\n defaultValue: 'medium',\n options: [\n { label: { en: 'None (0px)', cs: 'Žádné (0px)' }, value: 'none' },\n { label: { en: 'Small (0.25rem)', cs: 'Malé (0.25rem)' }, value: 'small' },\n { label: { en: 'Medium (0.5rem)', cs: 'Střední (0.5rem)' }, value: 'medium' },\n { label: { en: 'Large (0.75rem)', cs: 'Velké (0.75rem)' }, value: 'large' },\n { label: { en: 'XL (1rem)', cs: 'XL (1rem)' }, value: 'xl' },\n ],\n admin: {\n description: {\n en: 'Default corner rounding for UI elements',\n cs: 'Výchozí zaoblení rohů pro UI prvky',\n },\n width: '50%',\n },\n },\n {\n name: 'spacing',\n type: 'select',\n label: {\n en: '📏 Spacing Scale',\n cs: '📏 Škála rozestupů',\n },\n defaultValue: 'medium',\n options: [\n { label: { en: 'Compact', cs: 'Kompaktní' }, value: 'compact' },\n { label: { en: 'Medium', cs: 'Střední' }, value: 'medium' },\n { label: { en: 'Comfortable', cs: 'Pohodlné' }, value: 'comfortable' },\n ],\n admin: {\n description: {\n en: 'Global spacing between elements',\n cs: 'Globální rozestupy mezi prvky',\n },\n width: '50%',\n },\n },\n ],\n })\n\n // Color Mode Settings\n if (includeColorModeToggle) {\n fields.push({\n type: 'collapsible',\n label: {\n en: '🌗 Color Mode Settings',\n cs: '🌗 Nastavení barevného režimu',\n },\n admin: {\n initCollapsed: false,\n description: {\n en: 'Configure light and dark mode colors. Changes here override theme selection.',\n cs: 'Nakonfigurujte barvy světlého a tmavého režimu. Změny zde přepíší výběr tématu.',\n },\n },\n fields: [\n {\n type: 'row',\n fields: [\n {\n name: 'colorMode',\n type: 'select',\n label: {\n en: 'Default Color Mode',\n cs: 'Výchozí barevný režim',\n },\n defaultValue: 'auto',\n options: [\n {\n label: {\n en: 'Auto (System)',\n cs: 'Automaticky (Systém)',\n },\n value: 'auto',\n },\n {\n label: { en: 'Light', cs: 'Světlý' },\n value: 'light',\n },\n {\n label: { en: 'Dark', cs: 'Tmavý' },\n value: 'dark',\n },\n ],\n admin: {\n description: {\n en: 'Default color mode for visitors',\n cs: 'Výchozí barevný režim pro návštěvníky',\n },\n width: '50%',\n },\n },\n {\n name: 'allowColorModeToggle',\n type: 'checkbox',\n label: {\n en: 'Enable Mode Toggle',\n cs: 'Povolit přepínač režimu',\n },\n defaultValue: true,\n admin: {\n description: {\n en: 'Let visitors switch modes',\n cs: 'Umožnit návštěvníkům přepínat režimy',\n },\n width: '50%',\n },\n },\n ],\n },\n lightModeField,\n darkModeField,\n ],\n })\n }\n\n // Typography - Always visible\n fields.push({\n type: 'collapsible',\n label: {\n en: '🅰️ Typography',\n cs: '🅰️ Typografie',\n },\n admin: {\n initCollapsed: true,\n description: {\n en: 'Choose font families and base typography settings. Leave fields on \"Use preset\" to inherit the theme defaults.',\n cs: 'Zvolte rodiny písem a základní typografické nastavení. Hodnota \"Použít výchozí\" zachová nastavení motivu.',\n },\n },\n fields: [\n {\n name: 'typography',\n type: 'group',\n fields: [\n {\n type: 'row',\n fields: [\n {\n name: 'bodyFont',\n type: 'select',\n label: {\n en: 'Body font',\n cs: 'Písmo pro text',\n },\n defaultValue: 'preset',\n // @ts-expect-error - Pass full objects including fontFamily for custom rendering\n options: BODY_FONT_OPTIONS,\n admin: {\n width: '50%',\n components: {\n Field: '@kilivi/payloadcms-theme-management/fields/FontSelectField',\n },\n },\n },\n {\n name: 'headingFont',\n type: 'select',\n label: {\n en: 'Heading font',\n cs: 'Písmo pro nadpisy',\n },\n defaultValue: 'preset',\n // @ts-expect-error - Pass full objects including fontFamily for custom rendering\n options: HEADING_FONT_OPTIONS,\n admin: {\n width: '50%',\n components: {\n Field: '@kilivi/payloadcms-theme-management/fields/FontSelectField',\n },\n },\n },\n ],\n },\n {\n type: 'row',\n fields: [\n {\n name: 'bodyFontCustom',\n type: 'text',\n label: {\n en: 'Custom body font stack',\n cs: 'Vlastní písmo pro text',\n },\n admin: {\n width: '50%',\n placeholder: '\"IBM Plex Sans\", sans-serif',\n description: {\n en: 'Provide full CSS font-family stack when using a custom font.',\n cs: 'Při volbě vlastního písma zadejte celý CSS zápis font-family.',\n },\n condition: (_, siblingData) => siblingData?.bodyFont === 'custom',\n },\n },\n {\n name: 'headingFontCustom',\n type: 'text',\n label: {\n en: 'Custom heading font stack',\n cs: 'Vlastní písmo pro nadpisy',\n },\n admin: {\n width: '50%',\n placeholder: '\"Cormorant Garamond\", serif',\n description: {\n en: 'Provide full CSS font-family stack when using a custom heading font.',\n cs: 'Při volbě vlastního nadpisového písma zadejte celý CSS zápis font-family.',\n },\n condition: (_, siblingData) => siblingData?.headingFont === 'custom',\n },\n },\n ],\n },\n {\n type: 'row',\n fields: [\n {\n name: 'baseFontSize',\n type: 'select',\n label: {\n en: 'Base font size',\n cs: 'Základní velikost písma',\n },\n defaultValue: 'preset',\n options: BASE_FONT_SIZE_OPTIONS.map((option) => ({\n label: option.label,\n value: option.value,\n })),\n admin: {\n width: '50%',\n },\n },\n {\n name: 'lineHeight',\n type: 'select',\n label: {\n en: 'Line height',\n cs: 'Řádkování',\n },\n defaultValue: 'preset',\n options: LINE_HEIGHT_OPTIONS.map((option) => ({\n label: option.label,\n value: option.value,\n })),\n admin: {\n width: '50%',\n },\n },\n ],\n },\n ],\n },\n ],\n })\n\n // Custom Theme Presets importer\n fields.push({\n type: 'collapsible',\n label: {\n en: '🧩 Custom Theme Presets',\n cs: '🧩 Vlastní motivy',\n },\n admin: {\n initCollapsed: true,\n description: {\n en: 'Import additional theme presets via JSON to extend or override the defaults. These presets become available instantly in the Theme Selection above.',\n cs: 'Importujte další motivy pomocí JSONu a rozšiřte nebo přepište výchozí nabídku. Motivy budou ihned k dispozici ve výběru výše.',\n },\n },\n fields: [\n {\n name: 'customThemePresets',\n type: 'json',\n label: {\n en: 'Custom Preset JSON',\n cs: 'JSON s vlastními motivy',\n },\n admin: {\n description: {\n en: 'Paste or import an array (or object map) of theme presets. Each entry should include at least a unique \"name\" and \"label\" with optional lightMode/darkMode colors.',\n cs: 'Vložte nebo importujte pole (či objekt) motivů. Každý motiv musí mít unikátní „name“ a „label“ a volitelně barvy pro světly/tmavý režim.',\n },\n components: {\n Field: '@kilivi/payloadcms-theme-management/fields/ThemePresetImportField',\n },\n },\n },\n ],\n })\n\n // Advanced Settings (when using extended theme configuration)\n if (enableAdvancedFeatures) {\n const advancedFields: Field[] = [\n {\n name: 'animationLevel',\n type: 'select',\n label: {\n en: 'Animation Level',\n cs: 'Úroveň animací',\n },\n defaultValue: 'medium',\n options: [\n { label: { en: 'None', cs: 'Žádné' }, value: 'none' },\n { label: { en: 'Reduced', cs: 'Snížené' }, value: 'reduced' },\n { label: { en: 'Medium', cs: 'Střední' }, value: 'medium' },\n { label: { en: 'High', cs: 'Vysoké' }, value: 'high' },\n ],\n admin: {\n description: {\n en: 'Control website animations and transitions',\n cs: 'Kontrola animací a přechodů na webu',\n },\n width: '50%',\n },\n },\n ]\n\n if (includeCustomCSS) {\n advancedFields.push({\n name: 'customCSS',\n type: 'code',\n label: {\n en: 'Custom CSS',\n cs: 'Vlastní CSS',\n },\n admin: {\n language: 'css',\n description: {\n en: 'Add custom CSS to override default styles',\n cs: 'Přidejte vlastní CSS pro přepsání výchozích stylů',\n },\n // placeholder:\n // ':root {\\n --primary: #your-color;\\n --border-radius: 8px;\\n --font-family: \"Your Font\";\\n}\\n\\n.custom-class {\\n /* Your custom styles */\\n}',\n // rows: 8,\n },\n })\n }\n\n fields.push({\n type: 'collapsible',\n label: {\n en: '⚙️ Advanced Settings',\n cs: '⚙️ Pokročilé nastavení',\n },\n admin: {\n initCollapsed: true,\n },\n fields: advancedFields,\n })\n }\n\n // Return as tab configuration to be injected into tabs structure\n return {\n label: {\n en: '🎨 Appearance Settings',\n cs: '🎨 Nastavení vzhledu',\n },\n fields: [\n {\n name: 'themeConfiguration',\n type: 'group',\n admin: {\n description: {\n en: 'Configure website appearance and styling',\n cs: 'Nakonfigurujte vzhled a stylování webu',\n },\n },\n fields,\n },\n ],\n }\n}\n"],"names":["BASE_FONT_SIZE_OPTIONS","BODY_FONT_OPTIONS","HEADING_FONT_OPTIONS","LINE_HEIGHT_OPTIONS","darkModeField","lightModeField","createThemeConfigurationField","options","themePresets","defaultTheme","includeColorModeToggle","includeCustomCSS","enableAdvancedFeatures","fields","name","type","required","defaultValue","label","en","cs","validate","value","trim","length","admin","description","components","Field","custom","push","width","initCollapsed","placeholder","condition","_","siblingData","bodyFont","headingFont","map","option","advancedFields","language"],"mappings":"AACA,SACEA,sBAAsB,EACtBC,iBAAiB,EACjBC,oBAAoB,EACpBC,mBAAmB,QACd,6BAA4B;AAEnC,SAASC,aAAa,EAAEC,cAAc,QAAQ,uBAAsB;AAcpE;;;CAGC,GACD,OAAO,SAASC,8BAA8BC,OAAuC;IACnF,MAAM,EACJC,YAAY,EACZC,YAAY,EACZC,sBAAsB,EACtBC,gBAAgB,EAChBC,yBAAyB,IAAI,EAC9B,GAAGL;IAEJ,MAAMM,SAAkB;QACtB;YACEC,MAAM;YACNC,MAAM;YACNC,UAAU;YACVC,cAAcR;YACdS,OAAO;gBACLC,IAAI;gBACJC,IAAI;YACN;YACAC,UAAU,CAACC;gBACT,IAAI,OAAOA,UAAU,YAAYA,MAAMC,IAAI,GAAGC,MAAM,GAAG,GAAG;oBACxD,OAAO;gBACT;gBACA,OAAO;YACT;YACAC,OAAO;gBACLC,aAAa;oBACXP,IAAI;oBACJC,IAAI;gBACN;gBACAO,YAAY;oBACVC,OAAO;gBACT;gBACAC,QAAQ;oBACNrB;gBACF;YACF;QACF;KACD;IAED,+CAA+C;IAC/CK,OAAOiB,IAAI,CAAC;QACVf,MAAM;QACNF,QAAQ;YACN;gBACEC,MAAM;gBACNC,MAAM;gBACNG,OAAO;oBACLC,IAAI;oBACJC,IAAI;gBACN;gBACAH,cAAc;gBACdV,SAAS;oBACP;wBAAEW,OAAO;4BAAEC,IAAI;4BAAcC,IAAI;wBAAc;wBAAGE,OAAO;oBAAO;oBAChE;wBAAEJ,OAAO;4BAAEC,IAAI;4BAAmBC,IAAI;wBAAiB;wBAAGE,OAAO;oBAAQ;oBACzE;wBAAEJ,OAAO;4BAAEC,IAAI;4BAAmBC,IAAI;wBAAmB;wBAAGE,OAAO;oBAAS;oBAC5E;wBAAEJ,OAAO;4BAAEC,IAAI;4BAAmBC,IAAI;wBAAkB;wBAAGE,OAAO;oBAAQ;oBAC1E;wBAAEJ,OAAO;4BAAEC,IAAI;4BAAaC,IAAI;wBAAY;wBAAGE,OAAO;oBAAK;iBAC5D;gBACDG,OAAO;oBACLC,aAAa;wBACXP,IAAI;wBACJC,IAAI;oBACN;oBACAW,OAAO;gBACT;YACF;YACA;gBACEjB,MAAM;gBACNC,MAAM;gBACNG,OAAO;oBACLC,IAAI;oBACJC,IAAI;gBACN;gBACAH,cAAc;gBACdV,SAAS;oBACP;wBAAEW,OAAO;4BAAEC,IAAI;4BAAWC,IAAI;wBAAY;wBAAGE,OAAO;oBAAU;oBAC9D;wBAAEJ,OAAO;4BAAEC,IAAI;4BAAUC,IAAI;wBAAU;wBAAGE,OAAO;oBAAS;oBAC1D;wBAAEJ,OAAO;4BAAEC,IAAI;4BAAeC,IAAI;wBAAW;wBAAGE,OAAO;oBAAc;iBACtE;gBACDG,OAAO;oBACLC,aAAa;wBACXP,IAAI;wBACJC,IAAI;oBACN;oBACAW,OAAO;gBACT;YACF;SACD;IACH;IAEA,sBAAsB;IACtB,IAAIrB,wBAAwB;QAC1BG,OAAOiB,IAAI,CAAC;YACVf,MAAM;YACNG,OAAO;gBACLC,IAAI;gBACJC,IAAI;YACN;YACAK,OAAO;gBACLO,eAAe;gBACfN,aAAa;oBACXP,IAAI;oBACJC,IAAI;gBACN;YACF;YACAP,QAAQ;gBACN;oBACEE,MAAM;oBACNF,QAAQ;wBACN;4BACEC,MAAM;4BACNC,MAAM;4BACNG,OAAO;gCACLC,IAAI;gCACJC,IAAI;4BACN;4BACAH,cAAc;4BACdV,SAAS;gCACP;oCACEW,OAAO;wCACLC,IAAI;wCACJC,IAAI;oCACN;oCACAE,OAAO;gCACT;gCACA;oCACEJ,OAAO;wCAAEC,IAAI;wCAASC,IAAI;oCAAS;oCACnCE,OAAO;gCACT;gCACA;oCACEJ,OAAO;wCAAEC,IAAI;wCAAQC,IAAI;oCAAQ;oCACjCE,OAAO;gCACT;6BACD;4BACDG,OAAO;gCACLC,aAAa;oCACXP,IAAI;oCACJC,IAAI;gCACN;gCACAW,OAAO;4BACT;wBACF;wBACA;4BACEjB,MAAM;4BACNC,MAAM;4BACNG,OAAO;gCACLC,IAAI;gCACJC,IAAI;4BACN;4BACAH,cAAc;4BACdQ,OAAO;gCACLC,aAAa;oCACXP,IAAI;oCACJC,IAAI;gCACN;gCACAW,OAAO;4BACT;wBACF;qBACD;gBACH;gBACA1B;gBACAD;aACD;QACH;IACF;IAEA,8BAA8B;IAC9BS,OAAOiB,IAAI,CAAC;QACVf,MAAM;QACNG,OAAO;YACLC,IAAI;YACJC,IAAI;QACN;QACAK,OAAO;YACLO,eAAe;YACfN,aAAa;gBACXP,IAAI;gBACJC,IAAI;YACN;QACF;QACAP,QAAQ;YACN;gBACEC,MAAM;gBACNC,MAAM;gBACNF,QAAQ;oBACN;wBACEE,MAAM;wBACNF,QAAQ;4BACN;gCACEC,MAAM;gCACNC,MAAM;gCACNG,OAAO;oCACLC,IAAI;oCACJC,IAAI;gCACN;gCACAH,cAAc;gCACd,iFAAiF;gCACjFV,SAASN;gCACTwB,OAAO;oCACLM,OAAO;oCACPJ,YAAY;wCACVC,OAAO;oCACT;gCACF;4BACF;4BACA;gCACEd,MAAM;gCACNC,MAAM;gCACNG,OAAO;oCACLC,IAAI;oCACJC,IAAI;gCACN;gCACAH,cAAc;gCACd,iFAAiF;gCACjFV,SAASL;gCACTuB,OAAO;oCACLM,OAAO;oCACPJ,YAAY;wCACVC,OAAO;oCACT;gCACF;4BACF;yBACD;oBACH;oBACA;wBACEb,MAAM;wBACNF,QAAQ;4BACN;gCACEC,MAAM;gCACNC,MAAM;gCACNG,OAAO;oCACLC,IAAI;oCACJC,IAAI;gCACN;gCACAK,OAAO;oCACLM,OAAO;oCACPE,aAAa;oCACbP,aAAa;wCACXP,IAAI;wCACJC,IAAI;oCACN;oCACAc,WAAW,CAACC,GAAGC,cAAgBA,aAAaC,aAAa;gCAC3D;4BACF;4BACA;gCACEvB,MAAM;gCACNC,MAAM;gCACNG,OAAO;oCACLC,IAAI;oCACJC,IAAI;gCACN;gCACAK,OAAO;oCACLM,OAAO;oCACPE,aAAa;oCACbP,aAAa;wCACXP,IAAI;wCACJC,IAAI;oCACN;oCACAc,WAAW,CAACC,GAAGC,cAAgBA,aAAaE,gBAAgB;gCAC9D;4BACF;yBACD;oBACH;oBACA;wBACEvB,MAAM;wBACNF,QAAQ;4BACN;gCACEC,MAAM;gCACNC,MAAM;gCACNG,OAAO;oCACLC,IAAI;oCACJC,IAAI;gCACN;gCACAH,cAAc;gCACdV,SAASP,uBAAuBuC,GAAG,CAAC,CAACC,SAAY,CAAA;wCAC/CtB,OAAOsB,OAAOtB,KAAK;wCACnBI,OAAOkB,OAAOlB,KAAK;oCACrB,CAAA;gCACAG,OAAO;oCACLM,OAAO;gCACT;4BACF;4BACA;gCACEjB,MAAM;gCACNC,MAAM;gCACNG,OAAO;oCACLC,IAAI;oCACJC,IAAI;gCACN;gCACAH,cAAc;gCACdV,SAASJ,oBAAoBoC,GAAG,CAAC,CAACC,SAAY,CAAA;wCAC5CtB,OAAOsB,OAAOtB,KAAK;wCACnBI,OAAOkB,OAAOlB,KAAK;oCACrB,CAAA;gCACAG,OAAO;oCACLM,OAAO;gCACT;4BACF;yBACD;oBACH;iBACD;YACH;SACD;IACH;IAEA,gCAAgC;IAChClB,OAAOiB,IAAI,CAAC;QACVf,MAAM;QACNG,OAAO;YACLC,IAAI;YACJC,IAAI;QACN;QACAK,OAAO;YACLO,eAAe;YACfN,aAAa;gBACXP,IAAI;gBACJC,IAAI;YACN;QACF;QACAP,QAAQ;YACN;gBACEC,MAAM;gBACNC,MAAM;gBACNG,OAAO;oBACLC,IAAI;oBACJC,IAAI;gBACN;gBACAK,OAAO;oBACLC,aAAa;wBACXP,IAAI;wBACJC,IAAI;oBACN;oBACAO,YAAY;wBACVC,OAAO;oBACT;gBACF;YACF;SACD;IACH;IAEA,8DAA8D;IAC9D,IAAIhB,wBAAwB;QAC1B,MAAM6B,iBAA0B;YAC9B;gBACE3B,MAAM;gBACNC,MAAM;gBACNG,OAAO;oBACLC,IAAI;oBACJC,IAAI;gBACN;gBACAH,cAAc;gBACdV,SAAS;oBACP;wBAAEW,OAAO;4BAAEC,IAAI;4BAAQC,IAAI;wBAAQ;wBAAGE,OAAO;oBAAO;oBACpD;wBAAEJ,OAAO;4BAAEC,IAAI;4BAAWC,IAAI;wBAAU;wBAAGE,OAAO;oBAAU;oBAC5D;wBAAEJ,OAAO;4BAAEC,IAAI;4BAAUC,IAAI;wBAAU;wBAAGE,OAAO;oBAAS;oBAC1D;wBAAEJ,OAAO;4BAAEC,IAAI;4BAAQC,IAAI;wBAAS;wBAAGE,OAAO;oBAAO;iBACtD;gBACDG,OAAO;oBACLC,aAAa;wBACXP,IAAI;wBACJC,IAAI;oBACN;oBACAW,OAAO;gBACT;YACF;SACD;QAED,IAAIpB,kBAAkB;YACpB8B,eAAeX,IAAI,CAAC;gBAClBhB,MAAM;gBACNC,MAAM;gBACNG,OAAO;oBACLC,IAAI;oBACJC,IAAI;gBACN;gBACAK,OAAO;oBACLiB,UAAU;oBACVhB,aAAa;wBACXP,IAAI;wBACJC,IAAI;oBACN;gBAIF;YACF;QACF;QAEAP,OAAOiB,IAAI,CAAC;YACVf,MAAM;YACNG,OAAO;gBACLC,IAAI;gBACJC,IAAI;YACN;YACAK,OAAO;gBACLO,eAAe;YACjB;YACAnB,QAAQ4B;QACV;IACF;IAEA,iEAAiE;IACjE,OAAO;QACLvB,OAAO;YACLC,IAAI;YACJC,IAAI;QACN;QACAP,QAAQ;YACN;gBACEC,MAAM;gBACNC,MAAM;gBACNU,OAAO;oBACLC,aAAa;wBACXP,IAAI;wBACJC,IAAI;oBACN;gBACF;gBACAP;YACF;SACD;IACH;AACF"}
|
|
1
|
+
{"version":3,"sources":["../../src/fields/themeConfigurationField.ts"],"sourcesContent":["import type { Field, TabsField } from 'payload'\nimport {\n BASE_FONT_SIZE_OPTIONS,\n BODY_FONT_OPTIONS,\n HEADING_FONT_OPTIONS,\n LINE_HEIGHT_OPTIONS,\n} from '../constants/themeFonts.js'\nimport type { ThemePreset } from '../index.js'\nimport { darkModeField, lightModeField } from './colorModeFields.js'\n\ninterface ThemeConfigurationFieldOptions {\n themePresets: ThemePreset[]\n defaultTheme: string\n includeColorModeToggle: boolean\n includeCustomCSS: boolean\n includeBrandIdentity: boolean\n enableAdvancedFeatures?: boolean\n}\n\n// Type for admin.custom property to avoid ts-expect-error\ninterface ThemeAdminCustom {\n themePresets?: ThemePreset[]\n}\n\n// Type for a single tab (not the full TabsField)\nexport type ThemeTab = NonNullable<TabsField['tabs']>[number]\n\n/**\n * Theme Configuration Field with Theme Selection as default value setter\n * Theme Selection populates lightMode/darkMode colors automatically\n */\nexport function createThemeConfigurationField(options: ThemeConfigurationFieldOptions): ThemeTab {\n const {\n themePresets,\n defaultTheme,\n includeColorModeToggle,\n includeCustomCSS,\n enableAdvancedFeatures = true,\n } = options\n\n const fields: Field[] = [\n {\n name: 'theme',\n type: 'text',\n required: true,\n defaultValue: defaultTheme,\n label: {\n en: '🎨 Theme Selection',\n cs: '🎨 Výběr tématu',\n },\n validate: (value: unknown) => {\n if (typeof value === 'string' && value.trim().length > 0) {\n return true\n }\n return 'Select a theme'\n },\n admin: {\n description: {\n en: 'Select a theme to auto-populate color values. You can customize colors after selection.',\n cs: 'Vyberte téma pro automatické předvyplnění barev. Po výběru můžete barvy upravit.',\n },\n components: {\n Field: '@kilivi/payloadcms-theme-management/fields/ThemePreviewField',\n },\n custom: {\n themePresets,\n } as ThemeAdminCustom,\n },\n },\n ]\n\n // Border Radius Configuration - Always visible\n fields.push({\n type: 'row',\n fields: [\n {\n name: 'borderRadius',\n type: 'select',\n label: {\n en: '📐 Border Radius',\n cs: '📐 Zaoblení rohů',\n },\n defaultValue: 'medium',\n options: [\n { label: { en: 'None (0px)', cs: 'Žádné (0px)' }, value: 'none' },\n { label: { en: 'Small (0.25rem)', cs: 'Malé (0.25rem)' }, value: 'small' },\n { label: { en: 'Medium (0.5rem)', cs: 'Střední (0.5rem)' }, value: 'medium' },\n { label: { en: 'Large (0.75rem)', cs: 'Velké (0.75rem)' }, value: 'large' },\n { label: { en: 'XL (1rem)', cs: 'XL (1rem)' }, value: 'xl' },\n ],\n admin: {\n description: {\n en: 'Default corner rounding for UI elements',\n cs: 'Výchozí zaoblení rohů pro UI prvky',\n },\n width: '50%',\n },\n dbName: 'border_radius',\n },\n {\n name: 'spacing',\n type: 'select',\n label: {\n en: '📏 Spacing Scale',\n cs: '📏 Škála rozestupů',\n },\n defaultValue: 'medium',\n options: [\n { label: { en: 'Compact', cs: 'Kompaktní' }, value: 'compact' },\n { label: { en: 'Medium', cs: 'Střední' }, value: 'medium' },\n { label: { en: 'Comfortable', cs: 'Pohodlné' }, value: 'comfortable' },\n ],\n admin: {\n description: {\n en: 'Global spacing between elements',\n cs: 'Globální rozestupy mezi prvky',\n },\n width: '50%',\n },\n dbName: 'spacing',\n },\n ],\n })\n\n // Color Mode Settings\n if (includeColorModeToggle) {\n fields.push({\n type: 'collapsible',\n label: {\n en: '🌗 Color Mode Settings',\n cs: '🌗 Nastavení barevného režimu',\n },\n admin: {\n initCollapsed: false,\n description: {\n en: 'Configure light and dark mode colors. Changes here override theme selection.',\n cs: 'Nakonfigurujte barvy světlého a tmavého režimu. Změny zde přepíší výběr tématu.',\n },\n },\n fields: [\n {\n type: 'row',\n fields: [\n {\n name: 'colorMode',\n type: 'select',\n label: {\n en: 'Default Color Mode',\n cs: 'Výchozí barevný režim',\n },\n defaultValue: 'auto',\n options: [\n {\n label: {\n en: 'Auto (System)',\n cs: 'Automaticky (Systém)',\n },\n value: 'auto',\n },\n {\n label: { en: 'Light', cs: 'Světlý' },\n value: 'light',\n },\n {\n label: { en: 'Dark', cs: 'Tmavý' },\n value: 'dark',\n },\n ],\n admin: {\n description: {\n en: 'Default color mode for visitors',\n cs: 'Výchozí barevný režim pro návštěvníky',\n },\n width: '50%',\n },\n dbName: 'color_mode',\n },\n {\n name: 'allowColorModeToggle',\n type: 'checkbox',\n label: {\n en: 'Enable Mode Toggle',\n cs: 'Povolit přepínač režimu',\n },\n defaultValue: true,\n admin: {\n description: {\n en: 'Let visitors switch modes',\n cs: 'Umožnit návštěvníkům přepínat režimy',\n },\n width: '50%',\n },\n },\n ],\n },\n lightModeField,\n darkModeField,\n ],\n })\n }\n\n // Typography - Always visible\n fields.push({\n type: 'collapsible',\n label: {\n en: '🅰️ Typography',\n cs: '🅰️ Typografie',\n },\n admin: {\n initCollapsed: true,\n description: {\n en: 'Choose font families and base typography settings. Leave fields on \"Use preset\" to inherit the theme defaults.',\n cs: 'Zvolte rodiny písem a základní typografické nastavení. Hodnota \"Použít výchozí\" zachová nastavení motivu.',\n },\n },\n fields: [\n {\n name: 'typography',\n type: 'group',\n fields: [\n {\n type: 'row',\n fields: [\n {\n name: 'bodyFont',\n type: 'select',\n label: {\n en: 'Body font',\n cs: 'Písmo pro text',\n },\n defaultValue: 'preset',\n options: [...BODY_FONT_OPTIONS],\n admin: {\n width: '50%',\n components: {\n Field: '@kilivi/payloadcms-theme-management/fields/FontSelectField',\n },\n },\n dbName: 'body_font',\n },\n {\n name: 'headingFont',\n type: 'select',\n label: {\n en: 'Heading font',\n cs: 'Písmo pro nadpisy',\n },\n defaultValue: 'preset',\n options: [...HEADING_FONT_OPTIONS],\n admin: {\n width: '50%',\n components: {\n Field: '@kilivi/payloadcms-theme-management/fields/FontSelectField',\n },\n },\n dbName: 'heading_font',\n },\n ],\n },\n {\n type: 'row',\n fields: [\n {\n name: 'bodyFontCustom',\n type: 'text',\n label: {\n en: 'Custom body font stack',\n cs: 'Vlastní písmo pro text',\n },\n admin: {\n width: '50%',\n placeholder: '\"IBM Plex Sans\", sans-serif',\n description: {\n en: 'Provide full CSS font-family stack when using a custom font.',\n cs: 'Při volbě vlastního písma zadejte celý CSS zápis font-family.',\n },\n condition: (_, siblingData) => siblingData?.bodyFont === 'custom',\n },\n },\n {\n name: 'headingFontCustom',\n type: 'text',\n label: {\n en: 'Custom heading font stack',\n cs: 'Vlastní písmo pro nadpisy',\n },\n admin: {\n width: '50%',\n placeholder: '\"Cormorant Garamond\", serif',\n description: {\n en: 'Provide full CSS font-family stack when using a custom heading font.',\n cs: 'Při volbě vlastního nadpisového písma zadejte celý CSS zápis font-family.',\n },\n condition: (_, siblingData) => siblingData?.headingFont === 'custom',\n },\n },\n ],\n },\n {\n type: 'row',\n fields: [\n {\n name: 'baseFontSize',\n type: 'select',\n label: {\n en: 'Base font size',\n cs: 'Základní velikost písma',\n },\n defaultValue: 'preset',\n options: BASE_FONT_SIZE_OPTIONS.map((option) => ({\n label: option.label,\n value: option.value,\n })),\n admin: {\n width: '50%',\n },\n dbName: 'base_font_size',\n },\n {\n name: 'lineHeight',\n type: 'select',\n label: {\n en: 'Line height',\n cs: 'Řádkování',\n },\n defaultValue: 'preset',\n options: LINE_HEIGHT_OPTIONS.map((option) => ({\n label: option.label,\n value: option.value,\n })),\n admin: {\n width: '50%',\n },\n dbName: 'line_height',\n },\n ],\n },\n ],\n },\n ],\n })\n\n const customPresetsField: Field = {\n type: 'collapsible',\n label: {\n en: '🧩 Custom Theme Presets',\n cs: '🧩 Vlastní motivy',\n },\n admin: {\n initCollapsed: true,\n description: {\n en: 'Import additional theme presets via JSON to extend or override the defaults. These presets become available instantly in the Theme Selection above.',\n cs: 'Importujte další motivy pomocí JSONu a rozšiřte nebo přepište výchozí nabídku. Motivy budou ihned k dispozici ve výběru výše.',\n },\n },\n fields: [\n {\n name: 'customThemePresets',\n type: 'json',\n label: {\n en: 'Custom Preset JSON',\n cs: 'JSON s vlastními motivy',\n },\n admin: {\n description: {\n en: 'Paste or import an array (or object map) of theme presets. Each entry should include at least a unique \"name\" and \"label\" with optional lightMode/darkMode colors.',\n cs: 'Vložte nebo importujte pole (či objekt) motivů. Každý motiv musí mít unikátní „name“ a „label“ a volitelně barvy pro světly/tmavý režim.',\n },\n components: {\n Field: '@kilivi/payloadcms-theme-management/fields/ThemePresetImportField',\n },\n },\n },\n ],\n }\n\n fields.push(customPresetsField)\n\n // Advanced Settings (when using extended theme configuration)\n if (enableAdvancedFeatures) {\n const advancedFields: Field[] = [\n {\n name: 'animationLevel',\n type: 'select',\n label: {\n en: 'Animation Level',\n cs: 'Úroveň animací',\n },\n defaultValue: 'medium',\n options: [\n { label: { en: 'None', cs: 'Žádné' }, value: 'none' },\n { label: { en: 'Reduced', cs: 'Snížené' }, value: 'reduced' },\n { label: { en: 'Medium', cs: 'Střední' }, value: 'medium' },\n { label: { en: 'High', cs: 'Vysoké' }, value: 'high' },\n ],\n admin: {\n description: {\n en: 'Control website animations and transitions',\n cs: 'Kontrola animací a přechodů na webu',\n },\n width: '50%',\n },\n dbName: 'animation_level',\n },\n ]\n\n if (includeCustomCSS) {\n advancedFields.push({\n name: 'customCSS',\n type: 'code',\n label: {\n en: 'Custom CSS',\n cs: 'Vlastní CSS',\n },\n admin: {\n language: 'css',\n description: {\n en: 'Add custom CSS to override default styles',\n cs: 'Přidejte vlastní CSS pro přepsání výchozích stylů',\n },\n // placeholder:\n // ':root {\\n --primary: #your-color;\\n --border-radius: 8px;\\n --font-family: \"Your Font\";\\n}\\n\\n.custom-class {\\n /* Your custom styles */\\n}',\n // rows: 8,\n },\n })\n }\n\n fields.push({\n type: 'collapsible',\n label: {\n en: '⚙️ Advanced Settings',\n cs: '⚙️ Pokročilé nastavení',\n },\n admin: {\n initCollapsed: true,\n },\n fields: advancedFields,\n })\n }\n\n // Return as tab configuration to be injected into tabs structure\n return {\n label: {\n en: '🎨 Appearance Settings',\n cs: '🎨 Nastavení vzhledu',\n },\n fields: [\n {\n name: 'themeConfiguration',\n type: 'group',\n admin: {\n description: {\n en: 'Configure website appearance and styling',\n cs: 'Nakonfigurujte vzhled a stylování webu',\n },\n },\n fields,\n },\n ],\n }\n}\n"],"names":["BASE_FONT_SIZE_OPTIONS","BODY_FONT_OPTIONS","HEADING_FONT_OPTIONS","LINE_HEIGHT_OPTIONS","darkModeField","lightModeField","createThemeConfigurationField","options","themePresets","defaultTheme","includeColorModeToggle","includeCustomCSS","enableAdvancedFeatures","fields","name","type","required","defaultValue","label","en","cs","validate","value","trim","length","admin","description","components","Field","custom","push","width","dbName","initCollapsed","placeholder","condition","_","siblingData","bodyFont","headingFont","map","option","customPresetsField","advancedFields","language"],"mappings":"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"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { GoogleFont } from '../../../app/api/google-fonts/route';
|
|
3
|
+
export type PreviewVariant = 'h1' | 'h2' | 'h3' | 'body' | 'small' | 'chars' | 'weights' | 'card' | 'row' | 'name';
|
|
4
|
+
export interface FontPreviewProps {
|
|
5
|
+
font: GoogleFont;
|
|
6
|
+
variant: PreviewVariant;
|
|
7
|
+
text?: string;
|
|
8
|
+
onLoad?: () => void;
|
|
9
|
+
}
|
|
10
|
+
/**
|
|
11
|
+
* FontPreview component with Shadow DOM isolation
|
|
12
|
+
*
|
|
13
|
+
* This component renders font previews in an isolated Shadow DOM
|
|
14
|
+
* to prevent Payload CMS admin styles from affecting the preview.
|
|
15
|
+
*/
|
|
16
|
+
export declare const FontPreview: React.FC<FontPreviewProps>;
|
|
17
|
+
//# sourceMappingURL=FontPreview.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FontPreview.d.ts","sourceRoot":"","sources":["../../../../src/globals/ThemeSettings/FontPicker/FontPreview.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA4B,MAAM,OAAO,CAAA;AAChD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,qCAAqC,CAAA;AAErE,MAAM,MAAM,cAAc,GACtB,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,MAAM,GACN,OAAO,GACP,OAAO,GACP,SAAS,GACT,MAAM,GACN,KAAK,GACL,MAAM,CAAA;AAEV,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,UAAU,CAAA;IAChB,OAAO,EAAE,cAAc,CAAA;IACvB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;CACpB;AAED;;;;;GAKG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA+OlD,CAAA"}
|