@kilivi/payloadcms-theme-management 0.2.4 → 0.2.5
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.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ThemeLivePreview.d.ts","sourceRoot":"","sources":["../../src/fields/ThemeLivePreview.tsx"],"names":[],"mappings":"AAUA,OAAO,wBAAwB,CAAA;AAE/B,eAAO,MAAM,gBAAgB,
|
|
1
|
+
{"version":3,"file":"ThemeLivePreview.d.ts","sourceRoot":"","sources":["../../src/fields/ThemeLivePreview.tsx"],"names":[],"mappings":"AAUA,OAAO,wBAAwB,CAAA;AAE/B,eAAO,MAAM,gBAAgB,mCA+J5B,CAAA;AAED,eAAe,gBAAgB,CAAA"}
|
|
@@ -5,7 +5,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
5
5
|
* Real-time preview of theme configuration
|
|
6
6
|
* Inspired by Payload CMS 3 Live Preview
|
|
7
7
|
*/ import { useFormFields } from '@payloadcms/ui';
|
|
8
|
-
import {
|
|
8
|
+
import { useState } from 'react';
|
|
9
9
|
import './ThemeLivePreview.css';
|
|
10
10
|
export const ThemeLivePreview = ()=>{
|
|
11
11
|
const allFields = useFormFields(([fields])=>fields);
|
|
@@ -16,18 +16,6 @@ export const ThemeLivePreview = ()=>{
|
|
|
16
16
|
const lightMode = themeConfig?.extendedLightMode || themeConfig?.lightMode;
|
|
17
17
|
const darkMode = themeConfig?.extendedDarkMode || themeConfig?.darkMode;
|
|
18
18
|
const activeMode = previewMode === 'light' ? lightMode : darkMode;
|
|
19
|
-
// Apply theme colors to preview
|
|
20
|
-
useEffect(()=>{
|
|
21
|
-
if (!activeMode) return;
|
|
22
|
-
const root = document.documentElement;
|
|
23
|
-
Object.entries(activeMode).forEach(([key, value])=>{
|
|
24
|
-
if (typeof value === 'string') {
|
|
25
|
-
root.style.setProperty(`--preview-${key}`, value);
|
|
26
|
-
}
|
|
27
|
-
});
|
|
28
|
-
}, [
|
|
29
|
-
activeMode
|
|
30
|
-
]);
|
|
31
19
|
if (!themeConfig) {
|
|
32
20
|
return /*#__PURE__*/ _jsx("div", {
|
|
33
21
|
className: "theme-live-preview-empty",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/fields/ThemeLivePreview.tsx"],"sourcesContent":["'use client'\n\n/**\n * Theme Live Preview Component\n * Real-time preview of theme configuration\n * Inspired by Payload CMS 3 Live Preview\n */\n\nimport { useFormFields } from '@payloadcms/ui'\nimport {
|
|
1
|
+
{"version":3,"sources":["../../src/fields/ThemeLivePreview.tsx"],"sourcesContent":["'use client'\n\n/**\n * Theme Live Preview Component\n * Real-time preview of theme configuration\n * Inspired by Payload CMS 3 Live Preview\n */\n\nimport { useFormFields } from '@payloadcms/ui'\nimport { useState } from 'react'\nimport './ThemeLivePreview.css'\n\nexport const ThemeLivePreview = () => {\n const allFields = useFormFields(([fields]) => fields)\n const [previewMode, setPreviewMode] = useState<'light' | 'dark'>('light')\n\n const themeConfig = allFields?.themeConfiguration?.value as Record<string, unknown> | undefined\n\n // Extract colors from theme configuration\n // Support both basic (lightMode/darkMode) and extended (extendedLightMode/extendedDarkMode)\n const lightMode = (themeConfig?.extendedLightMode || themeConfig?.lightMode) as\n | Record<string, string>\n | undefined\n const darkMode = (themeConfig?.extendedDarkMode || themeConfig?.darkMode) as\n | Record<string, string>\n | undefined\n const activeMode = previewMode === 'light' ? lightMode : darkMode\n\n if (!themeConfig) {\n return (\n <div className=\"theme-live-preview-empty\">\n <p>Configure your theme to see live preview</p>\n </div>\n )\n }\n\n return (\n <div className=\"theme-live-preview-container\" data-mode={previewMode}>\n {/* Mode Toggle */}\n <div className=\"preview-header\">\n <h3>Live Theme Preview</h3>\n <div className=\"mode-toggle\">\n <button\n type=\"button\"\n className={previewMode === 'light' ? 'active' : ''}\n onClick={() => setPreviewMode('light')}\n >\n ☀️ Light\n </button>\n <button\n type=\"button\"\n className={previewMode === 'dark' ? 'active' : ''}\n onClick={() => setPreviewMode('dark')}\n >\n 🌙 Dark\n </button>\n </div>\n </div>\n\n {/* Preview Content */}\n <div\n className=\"preview-content\"\n style={{\n backgroundColor: activeMode?.background || '#ffffff',\n color: activeMode?.foreground || '#000000',\n }}\n >\n {/* Header Section */}\n <div className=\"preview-section\">\n <h1 style={{ color: activeMode?.foreground }}>Welcome to Your Site</h1>\n <p style={{ color: activeMode?.mutedForeground }}>\n This is a live preview of your theme configuration\n </p>\n </div>\n\n {/* Card Section */}\n <div className=\"preview-cards\">\n <div\n className=\"preview-card\"\n style={{\n backgroundColor: activeMode?.card || '#ffffff',\n color: activeMode?.cardForeground || '#000000',\n borderColor: activeMode?.border || '#e2e8f0',\n }}\n >\n <h3>Featured Content</h3>\n <p style={{ color: activeMode?.mutedForeground }}>\n Card component with theme colors\n </p>\n <button\n className=\"preview-btn-primary\"\n style={{\n backgroundColor: activeMode?.primary || '#0070f3',\n color: activeMode?.primaryForeground || '#ffffff',\n }}\n >\n Primary Action\n </button>\n </div>\n\n <div\n className=\"preview-card\"\n style={{\n backgroundColor: activeMode?.card || '#ffffff',\n color: activeMode?.cardForeground || '#000000',\n borderColor: activeMode?.border || '#e2e8f0',\n }}\n >\n <h3>Secondary Card</h3>\n <p style={{ color: activeMode?.mutedForeground }}>\n Another card to showcase your theme\n </p>\n <button\n className=\"preview-btn-secondary\"\n style={{\n backgroundColor: activeMode?.secondary || '#f1f5f9',\n color: activeMode?.secondaryForeground || '#0f172a',\n }}\n >\n Secondary\n </button>\n </div>\n </div>\n\n {/* UI Elements */}\n <div className=\"preview-ui-elements\">\n <input\n type=\"text\"\n placeholder=\"Input field\"\n className=\"preview-input\"\n style={{\n backgroundColor: activeMode?.background,\n color: activeMode?.foreground,\n borderColor: activeMode?.input || activeMode?.border,\n }}\n />\n\n <div\n className=\"preview-badge\"\n style={{\n backgroundColor: activeMode?.accent || '#f1f5f9',\n color: activeMode?.accentForeground || '#0f172a',\n }}\n >\n Accent Badge\n </div>\n\n <button\n className=\"preview-btn-destructive\"\n style={{\n backgroundColor: activeMode?.destructive || '#ef4444',\n color: activeMode?.destructiveForeground || '#ffffff',\n }}\n >\n Destructive\n </button>\n </div>\n\n {/* Muted Section */}\n <div\n className=\"preview-muted\"\n style={{\n backgroundColor: activeMode?.muted || '#f1f5f9',\n color: activeMode?.mutedForeground || '#64748b',\n }}\n >\n <p>Muted background section for less prominent content</p>\n </div>\n </div>\n </div>\n )\n}\n\nexport default ThemeLivePreview\n\n\n"],"names":["useFormFields","useState","ThemeLivePreview","allFields","fields","previewMode","setPreviewMode","themeConfig","themeConfiguration","value","lightMode","extendedLightMode","darkMode","extendedDarkMode","activeMode","div","className","p","data-mode","h3","button","type","onClick","style","backgroundColor","background","color","foreground","h1","mutedForeground","card","cardForeground","borderColor","border","primary","primaryForeground","secondary","secondaryForeground","input","placeholder","accent","accentForeground","destructive","destructiveForeground","muted"],"mappings":"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"}
|