@kilivi/payloadcms-theme-management 0.2.10 → 0.2.12

package/dist/providers/font-loader.js

@@ -0,0 +1,212 @@
+/**
+ * Next.js Font Loader Utilities
+ *
+ * This file provides utilities for loading Google Fonts in Next.js applications
+ * based on theme configuration from the CMS.
+ *
+ * ## Usage Guide
+ *
+ * ### 1. Static Font Loading (Recommended)
+ *
+ * In your Next.js app's root layout:
+ *
+ * ```tsx
+ * // app/layout.tsx
+ * import { Inter, Playfair_Display } from 'next/font/google'
+ *
+ * const inter = Inter({
+ *   subsets: ['latin'],
+ *   variable: '--font-body',
+ *   display: 'swap',
+ * })
+ *
+ * const playfair = Playfair_Display({
+ *   subsets: ['latin'],
+ *   variable: '--font-heading',
+ *   display: 'swap',
+ * })
+ *
+ * export default function RootLayout({ children }: { children: React.ReactNode }) {
+ *   return (
+ *     <html lang="en" className={`${inter.variable} ${playfair.variable}`}>
+ *       <body>{children}</body>
+ *     </html>
+ *   )
+ * }
+ * ```
+ *
+ * ### 2. CSS Variables Usage
+ *
+ * In your global CSS:
+ *
+ * ```css
+ * :root {
+ *   --font-body: var(--font-inter), system-ui, sans-serif;
+ *   --font-heading: var(--font-playfair), Georgia, serif;
+ * }
+ *
+ * body {
+ *   font-family: var(--font-body);
+ * }
+ *
+ * h1, h2, h3, h4, h5, h6 {
+ *   font-family: var(--font-heading);
+ * }
+ * ```
+ *
+ * ### 3. Dynamic Font Loading
+ *
+ * Use the helper functions below to generate font loader code:
+ *
+ * ```tsx
+ * import { getFontLoaderCode } from '@kilivi/payloadcms-theme-management/providers/font-loader'
+ *
+ * const themeConfig = await getThemeConfig()
+ * const fontCode = getFontLoaderCode(themeConfig)
+ * console.log(fontCode) // Copy this to your layout.tsx
+ * ```
+ */ import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Font mapping for next/font/google imports
+ * Maps theme font values to Next.js font imports
+ */ export const FONT_IMPORT_MAP = {
+    Inter: {
+        import: `import { Inter } from 'next/font/google'\nconst inter = Inter({ subsets: ['latin'], variable: '--font-body' })`,
+        variable: 'inter.variable'
+    },
+    Roboto: {
+        import: `import { Roboto } from 'next/font/google'\nconst roboto = Roboto({ weight: ['400', '500', '700'], subsets: ['latin'], variable: '--font-body' })`,
+        variable: 'roboto.variable'
+    },
+    'Open Sans': {
+        import: `import { Open_Sans } from 'next/font/google'\nconst openSans = Open_Sans({ subsets: ['latin'], variable: '--font-body' })`,
+        variable: 'openSans.variable'
+    },
+    Lato: {
+        import: `import { Lato } from 'next/font/google'\nconst lato = Lato({ weight: ['400', '700'], subsets: ['latin'], variable: '--font-body' })`,
+        variable: 'lato.variable'
+    },
+    Montserrat: {
+        import: `import { Montserrat } from 'next/font/google'\nconst montserrat = Montserrat({ subsets: ['latin'], variable: '--font-body' })`,
+        variable: 'montserrat.variable'
+    },
+    Poppins: {
+        import: `import { Poppins } from 'next/font/google'\nconst poppins = Poppins({ weight: ['400', '500', '600', '700'], subsets: ['latin'], variable: '--font-body' })`,
+        variable: 'poppins.variable'
+    },
+    'Playfair Display': {
+        import: `import { Playfair_Display } from 'next/font/google'\nconst playfair = Playfair_Display({ subsets: ['latin'], variable: '--font-heading' })`,
+        variable: 'playfair.variable'
+    },
+    Merriweather: {
+        import: `import { Merriweather } from 'next/font/google'\nconst merriweather = Merriweather({ weight: ['400', '700'], subsets: ['latin'], variable: '--font-heading' })`,
+        variable: 'merriweather.variable'
+    },
+    Lora: {
+        import: `import { Lora } from 'next/font/google'\nconst lora = Lora({ subsets: ['latin'], variable: '--font-heading' })`,
+        variable: 'lora.variable'
+    },
+    'Crimson Text': {
+        import: `import { Crimson_Text } from 'next/font/google'\nconst crimsonText = Crimson_Text({ weight: ['400', '600', '700'], subsets: ['latin'], variable: '--font-heading' })`,
+        variable: 'crimsonText.variable'
+    }
+};
+/**
+ * Generate Next.js font loader code for your layout
+ *
+ * @param config - Theme configuration from CMS
+ * @returns String with complete Next.js font loading code
+ *
+ * @example
+ * ```tsx
+ * const code = getFontLoaderCode({ bodyFont: 'Inter', headingFont: 'Playfair Display' })
+ * console.log(code)
+ * // Copy the output to your app/layout.tsx file
+ * ```
+ */ export function getFontLoaderCode(config) {
+    const imports = [];
+    const variables = [];
+    if (config.bodyFont && config.bodyFont !== 'preset' && config.bodyFont !== 'custom') {
+        const fontConfig = FONT_IMPORT_MAP[config.bodyFont];
+        if (fontConfig) {
+            imports.push(fontConfig.import);
+            variables.push(fontConfig.variable);
+        }
+    }
+    if (config.headingFont && config.headingFont !== 'preset' && config.headingFont !== 'custom') {
+        const fontConfig = FONT_IMPORT_MAP[config.headingFont];
+        if (fontConfig) {
+            imports.push(fontConfig.import);
+            variables.push(fontConfig.variable);
+        }
+    }
+    return `// app/layout.tsx
+${imports.join('\n\n')}
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en" className={\`${variables.join(' ')}\`}>
+      <body>{children}</body>
+    </html>
+  )
+}
+`;
+}
+/**
+ * Get font family CSS strings for inline styles
+ *
+ * @param config - Theme configuration
+ * @returns Object with bodyFont and headingFont CSS font-family strings
+ */ export function getThemeFontFamilies(config) {
+    const result = {};
+    // Body font
+    if (config.bodyFont === 'custom' && config.bodyFontCustom) {
+        result.bodyFont = config.bodyFontCustom;
+    } else if (config.bodyFont && config.bodyFont !== 'preset') {
+        result.bodyFont = `var(--font-body), ${config.bodyFont}, sans-serif`;
+    }
+    // Heading font
+    if (config.headingFont === 'custom' && config.headingFontCustom) {
+        result.headingFont = config.headingFontCustom;
+    } else if (config.headingFont && config.headingFont !== 'preset') {
+        result.headingFont = `var(--font-heading), ${config.headingFont}, serif`;
+    }
+    return result;
+}
+/**
+ * React component wrapper for font variables
+ * Use this to inject font CSS variables into your app
+ */ export function ThemeFontProvider({ children, bodyFont, headingFont, bodyFontCustom, headingFontCustom }) {
+    const fonts = getThemeFontFamilies({
+        bodyFont,
+        headingFont,
+        bodyFontCustom,
+        headingFontCustom
+    });
+    return /*#__PURE__*/ _jsx("div", {
+        style: {
+            '--font-body': fonts.bodyFont,
+            '--font-heading': fonts.headingFont
+        },
+        children: children
+    });
+}
+/**
+ * Client-side hook for accessing theme fonts
+ * Use this in client components to read font CSS variables
+ */ export function useThemeFonts() {
+    if (typeof window === 'undefined') {
+        return {
+            bodyFont: undefined,
+            headingFont: undefined
+        };
+    }
+    const bodyFont = getComputedStyle(document.documentElement).getPropertyValue('--font-body');
+    const headingFont = getComputedStyle(document.documentElement).getPropertyValue('--font-heading');
+    return {
+        bodyFont: bodyFont || undefined,
+        headingFont: headingFont || undefined
+    };
+}
+
+//# sourceMappingURL=font-loader.js.map

package/dist/providers/font-loader.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/providers/font-loader.tsx"],"sourcesContent":["/**\n * Next.js Font Loader Utilities\n *\n * This file provides utilities for loading Google Fonts in Next.js applications\n * based on theme configuration from the CMS.\n *\n * ## Usage Guide\n *\n * ### 1. Static Font Loading (Recommended)\n *\n * In your Next.js app's root layout:\n *\n * ```tsx\n * // app/layout.tsx\n * import { Inter, Playfair_Display } from 'next/font/google'\n *\n * const inter = Inter({\n *   subsets: ['latin'],\n *   variable: '--font-body',\n *   display: 'swap',\n * })\n *\n * const playfair = Playfair_Display({\n *   subsets: ['latin'],\n *   variable: '--font-heading',\n *   display: 'swap',\n * })\n *\n * export default function RootLayout({ children }: { children: React.ReactNode }) {\n *   return (\n *     <html lang=\"en\" className={`${inter.variable} ${playfair.variable}`}>\n *       <body>{children}</body>\n *     </html>\n *   )\n * }\n * ```\n *\n * ### 2. CSS Variables Usage\n *\n * In your global CSS:\n *\n * ```css\n * :root {\n *   --font-body: var(--font-inter), system-ui, sans-serif;\n *   --font-heading: var(--font-playfair), Georgia, serif;\n * }\n *\n * body {\n *   font-family: var(--font-body);\n * }\n *\n * h1, h2, h3, h4, h5, h6 {\n *   font-family: var(--font-heading);\n * }\n * ```\n *\n * ### 3. Dynamic Font Loading\n *\n * Use the helper functions below to generate font loader code:\n *\n * ```tsx\n * import { getFontLoaderCode } from '@kilivi/payloadcms-theme-management/providers/font-loader'\n *\n * const themeConfig = await getThemeConfig()\n * const fontCode = getFontLoaderCode(themeConfig)\n * console.log(fontCode) // Copy this to your layout.tsx\n * ```\n */\n\ninterface ThemeConfig {\n  bodyFont?: string\n  headingFont?: string\n  bodyFontCustom?: string\n  headingFontCustom?: string\n}\n\n/**\n * Font mapping for next/font/google imports\n * Maps theme font values to Next.js font imports\n */\nexport const FONT_IMPORT_MAP: Record<string, { import: string; variable: string }> = {\n  Inter: {\n    import: `import { Inter } from 'next/font/google'\\nconst inter = Inter({ subsets: ['latin'], variable: '--font-body' })`,\n    variable: 'inter.variable',\n  },\n  Roboto: {\n    import: `import { Roboto } from 'next/font/google'\\nconst roboto = Roboto({ weight: ['400', '500', '700'], subsets: ['latin'], variable: '--font-body' })`,\n    variable: 'roboto.variable',\n  },\n  'Open Sans': {\n    import: `import { Open_Sans } from 'next/font/google'\\nconst openSans = Open_Sans({ subsets: ['latin'], variable: '--font-body' })`,\n    variable: 'openSans.variable',\n  },\n  Lato: {\n    import: `import { Lato } from 'next/font/google'\\nconst lato = Lato({ weight: ['400', '700'], subsets: ['latin'], variable: '--font-body' })`,\n    variable: 'lato.variable',\n  },\n  Montserrat: {\n    import: `import { Montserrat } from 'next/font/google'\\nconst montserrat = Montserrat({ subsets: ['latin'], variable: '--font-body' })`,\n    variable: 'montserrat.variable',\n  },\n  Poppins: {\n    import: `import { Poppins } from 'next/font/google'\\nconst poppins = Poppins({ weight: ['400', '500', '600', '700'], subsets: ['latin'], variable: '--font-body' })`,\n    variable: 'poppins.variable',\n  },\n  'Playfair Display': {\n    import: `import { Playfair_Display } from 'next/font/google'\\nconst playfair = Playfair_Display({ subsets: ['latin'], variable: '--font-heading' })`,\n    variable: 'playfair.variable',\n  },\n  Merriweather: {\n    import: `import { Merriweather } from 'next/font/google'\\nconst merriweather = Merriweather({ weight: ['400', '700'], subsets: ['latin'], variable: '--font-heading' })`,\n    variable: 'merriweather.variable',\n  },\n  Lora: {\n    import: `import { Lora } from 'next/font/google'\\nconst lora = Lora({ subsets: ['latin'], variable: '--font-heading' })`,\n    variable: 'lora.variable',\n  },\n  'Crimson Text': {\n    import: `import { Crimson_Text } from 'next/font/google'\\nconst crimsonText = Crimson_Text({ weight: ['400', '600', '700'], subsets: ['latin'], variable: '--font-heading' })`,\n    variable: 'crimsonText.variable',\n  },\n}\n\n/**\n * Generate Next.js font loader code for your layout\n *\n * @param config - Theme configuration from CMS\n * @returns String with complete Next.js font loading code\n *\n * @example\n * ```tsx\n * const code = getFontLoaderCode({ bodyFont: 'Inter', headingFont: 'Playfair Display' })\n * console.log(code)\n * // Copy the output to your app/layout.tsx file\n * ```\n */\nexport function getFontLoaderCode(config: ThemeConfig): string {\n  const imports: string[] = []\n  const variables: string[] = []\n\n  if (config.bodyFont && config.bodyFont !== 'preset' && config.bodyFont !== 'custom') {\n    const fontConfig = FONT_IMPORT_MAP[config.bodyFont]\n    if (fontConfig) {\n      imports.push(fontConfig.import)\n      variables.push(fontConfig.variable)\n    }\n  }\n\n  if (config.headingFont && config.headingFont !== 'preset' && config.headingFont !== 'custom') {\n    const fontConfig = FONT_IMPORT_MAP[config.headingFont]\n    if (fontConfig) {\n      imports.push(fontConfig.import)\n      variables.push(fontConfig.variable)\n    }\n  }\n\n  return `// app/layout.tsx\n${imports.join('\\n\\n')}\n\nexport default function RootLayout({ children }: { children: React.ReactNode }) {\n  return (\n    <html lang=\"en\" className={\\`${variables.join(' ')}\\`}>\n      <body>{children}</body>\n    </html>\n  )\n}\n`\n}\n\n/**\n * Get font family CSS strings for inline styles\n *\n * @param config - Theme configuration\n * @returns Object with bodyFont and headingFont CSS font-family strings\n */\nexport function getThemeFontFamilies(config: ThemeConfig): {\n  bodyFont?: string\n  headingFont?: string\n} {\n  const result: { bodyFont?: string; headingFont?: string } = {}\n\n  // Body font\n  if (config.bodyFont === 'custom' && config.bodyFontCustom) {\n    result.bodyFont = config.bodyFontCustom\n  } else if (config.bodyFont && config.bodyFont !== 'preset') {\n    result.bodyFont = `var(--font-body), ${config.bodyFont}, sans-serif`\n  }\n\n  // Heading font\n  if (config.headingFont === 'custom' && config.headingFontCustom) {\n    result.headingFont = config.headingFontCustom\n  } else if (config.headingFont && config.headingFont !== 'preset') {\n    result.headingFont = `var(--font-heading), ${config.headingFont}, serif`\n  }\n\n  return result\n}\n\n/**\n * React component wrapper for font variables\n * Use this to inject font CSS variables into your app\n */\nexport function ThemeFontProvider({\n  children,\n  bodyFont,\n  headingFont,\n  bodyFontCustom,\n  headingFontCustom,\n}: {\n  children: React.ReactNode\n  bodyFont?: string\n  headingFont?: string\n  bodyFontCustom?: string\n  headingFontCustom?: string\n}) {\n  const fonts = getThemeFontFamilies({ bodyFont, headingFont, bodyFontCustom, headingFontCustom })\n\n  return (\n    <div\n      style={\n        {\n          '--font-body': fonts.bodyFont,\n          '--font-heading': fonts.headingFont,\n        } as React.CSSProperties\n      }\n    >\n      {children}\n    </div>\n  )\n}\n\n/**\n * Client-side hook for accessing theme fonts\n * Use this in client components to read font CSS variables\n */\nexport function useThemeFonts() {\n  if (typeof window === 'undefined') {\n    return { bodyFont: undefined, headingFont: undefined }\n  }\n\n  const bodyFont = getComputedStyle(document.documentElement).getPropertyValue('--font-body')\n  const headingFont = getComputedStyle(document.documentElement).getPropertyValue('--font-heading')\n\n  return {\n    bodyFont: bodyFont || undefined,\n    headingFont: headingFont || undefined,\n  }\n}\n"],"names":["FONT_IMPORT_MAP","Inter","import","variable","Roboto","Lato","Montserrat","Poppins","Merriweather","Lora","getFontLoaderCode","config","imports","variables","bodyFont","fontConfig","push","headingFont","join","getThemeFontFamilies","result","bodyFontCustom","headingFontCustom","ThemeFontProvider","children","fonts","div","style","useThemeFonts","window","undefined","getComputedStyle","document","documentElement","getPropertyValue"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kilivi/payloadcms-theme-management",
-  "version": "0.2.10",
+  "version": "0.2.12",
   "description": "Theme configuration plugin for Payload CMS v3",
   "type": "module",
   "main": "./dist/index.js",