@kilivi/payloadcms-theme-management 0.1.5 → 0.1.7

package/dist/fields/ThemeColorPickerField.js

@@ -0,0 +1,163 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useField, useFormFields } from '@payloadcms/ui';
+import { useEffect, useMemo, useState } from 'react';
+import './ThemeColorPickerField.css';
+function resolveLocalizedValue(value, fallback) {
+    if (typeof value === 'string') {
+        return value;
+    }
+    if (typeof value === 'object' && value !== null) {
+        const localized = value;
+        const resolved = localized.en ?? localized.cs ?? localized[''];
+        if (typeof resolved === 'string') {
+            return resolved;
+        }
+    }
+    return fallback;
+}
+const ThemeColorPickerField = ({ field, path })=>{
+    const { value, setValue } = useField({
+        path
+    });
+    const [localValue, setLocalValue] = useState(value || '');
+    const allFields = useFormFields(([fields])=>fields);
+    const mode = path.includes('lightMode') ? 'lightMode' : 'darkMode';
+    const modePrefix = `themeConfiguration.${mode}`;
+    useEffect(()=>{
+        setLocalValue(value || '');
+    }, [
+        value
+    ]);
+    const colorValues = useMemo(()=>{
+        if (!allFields) {
+            return {};
+        }
+        const names = [
+            'background',
+            'foreground',
+            'card',
+            'cardForeground',
+            'popover',
+            'popoverForeground',
+            'primary',
+            'primaryForeground',
+            'secondary',
+            'secondaryForeground',
+            'muted',
+            'mutedForeground',
+            'accent',
+            'accentForeground',
+            'destructive',
+            'destructiveForeground',
+            'border',
+            'input',
+            'ring'
+        ];
+        return names.reduce((accumulator, name)=>{
+            const fieldState = allFields[`${modePrefix}.${name}`];
+            const parsedValue = typeof fieldState?.value === 'string' ? fieldState.value : undefined;
+            accumulator[name] = parsedValue ?? '';
+            return accumulator;
+        }, {});
+    }, [
+        allFields,
+        modePrefix
+    ]);
+    function handleChange(nextValue) {
+        setLocalValue(nextValue);
+        setValue(nextValue);
+    }
+    const fieldName = path.split('.').pop() || '';
+    const label = resolveLocalizedValue(field.label, fieldName);
+    const description = resolveLocalizedValue(field.admin?.description, '');
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "theme-color-picker-field",
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                className: "field-header",
+                children: [
+                    /*#__PURE__*/ _jsx("label", {
+                        className: "field-label",
+                        children: label
+                    }),
+                    description && /*#__PURE__*/ _jsx("div", {
+                        className: "field-description",
+                        children: description
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                className: "color-picker-container",
+                children: [
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: "color-input-wrapper",
+                        children: [
+                            /*#__PURE__*/ _jsx("input", {
+                                type: "color",
+                                value: localValue || '#000000',
+                                onChange: (event)=>handleChange(event.target.value),
+                                className: "color-input"
+                            }),
+                            /*#__PURE__*/ _jsx("input", {
+                                type: "text",
+                                value: localValue || '',
+                                onChange: (event)=>handleChange(event.target.value),
+                                placeholder: "#000000",
+                                className: "text-input",
+                                pattern: "^#[0-9A-Fa-f]{6}$"
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx("div", {
+                        className: "color-preview",
+                        style: {
+                            backgroundColor: localValue || '#000000'
+                        },
+                        children: /*#__PURE__*/ _jsx("span", {
+                            className: "preview-label",
+                            children: localValue || 'Not set'
+                        })
+                    })
+                ]
+            }),
+            (fieldName === 'primary' || fieldName === 'background') && /*#__PURE__*/ _jsx("div", {
+                className: "mini-preview",
+                style: {
+                    backgroundColor: colorValues.background || '#ffffff',
+                    color: colorValues.foreground || '#000000',
+                    borderColor: colorValues.border || '#e2e8f0'
+                },
+                children: /*#__PURE__*/ _jsxs("div", {
+                    className: "preview-card",
+                    style: {
+                        backgroundColor: colorValues.card || '#ffffff',
+                        color: colorValues.cardForeground || '#000000',
+                        borderColor: colorValues.border || '#e2e8f0'
+                    },
+                    children: [
+                        /*#__PURE__*/ _jsx("button", {
+                            className: "preview-button",
+                            style: {
+                                backgroundColor: colorValues.primary || '#0070f3',
+                                color: colorValues.primaryForeground || '#ffffff'
+                            },
+                            children: "Primary Button"
+                        }),
+                        /*#__PURE__*/ _jsx("button", {
+                            className: "preview-button secondary",
+                            style: {
+                                backgroundColor: colorValues.secondary || '#f1f5f9',
+                                color: colorValues.secondaryForeground || '#0f172a'
+                            },
+                            children: "Secondary"
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+};
+export default ThemeColorPickerField;
+
+//# sourceMappingURL=ThemeColorPickerField.js.map

package/dist/fields/ThemeColorPickerField.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/fields/ThemeColorPickerField.tsx"],"sourcesContent":["'use client'\r\n\r\nimport { useField, useFormFields } from '@payloadcms/ui'\r\nimport type { TextFieldClientComponent } from 'payload'\r\nimport { useEffect, useMemo, useState } from 'react'\r\nimport './ThemeColorPickerField.css'\r\n\r\nfunction resolveLocalizedValue(value: unknown, fallback: string) {\r\n  if (typeof value === 'string') {\r\n    return value\r\n  }\r\n\r\n  if (typeof value === 'object' && value !== null) {\r\n    const localized = value as Record<string, unknown>\r\n    const resolved = localized.en ?? localized.cs ?? localized['']\r\n    if (typeof resolved === 'string') {\r\n      return resolved\r\n    }\r\n  }\r\n\r\n  return fallback\r\n}\r\n\r\nconst ThemeColorPickerField: TextFieldClientComponent = ({ field, path }) => {\r\n  const { value, setValue } = useField<string>({ path })\r\n  const [localValue, setLocalValue] = useState(value || '')\r\n  const allFields = useFormFields(([fields]) => fields)\r\n\r\n  const mode = path.includes('lightMode') ? 'lightMode' : 'darkMode'\r\n  const modePrefix = `themeConfiguration.${mode}`\r\n\r\n  useEffect(() => {\r\n    setLocalValue(value || '')\r\n  }, [value])\r\n\r\n  const colorValues = useMemo(() => {\r\n    if (!allFields) {\r\n      return {}\r\n    }\r\n\r\n    const names = [\r\n      'background',\r\n      'foreground',\r\n      'card',\r\n      'cardForeground',\r\n      'popover',\r\n      'popoverForeground',\r\n      'primary',\r\n      'primaryForeground',\r\n      'secondary',\r\n      'secondaryForeground',\r\n      'muted',\r\n      'mutedForeground',\r\n      'accent',\r\n      'accentForeground',\r\n      'destructive',\r\n      'destructiveForeground',\r\n      'border',\r\n      'input',\r\n      'ring',\r\n    ]\r\n\r\n    return names.reduce<Record<string, string>>((accumulator, name) => {\r\n      const fieldState = allFields[`${modePrefix}.${name}`]\r\n      const parsedValue = typeof fieldState?.value === 'string' ? fieldState.value : undefined\r\n      accumulator[name] = parsedValue ?? ''\r\n      return accumulator\r\n    }, {})\r\n  }, [allFields, modePrefix])\r\n\r\n  function handleChange(nextValue: string) {\r\n    setLocalValue(nextValue)\r\n    setValue(nextValue)\r\n  }\r\n\r\n  const fieldName = path.split('.').pop() || ''\r\n  const label = resolveLocalizedValue(field.label, fieldName)\r\n  const description = resolveLocalizedValue(field.admin?.description, '')\r\n\r\n  return (\r\n    <div className=\"theme-color-picker-field\">\r\n      <div className=\"field-header\">\r\n        <label className=\"field-label\">{label}</label>\r\n        {description && <div className=\"field-description\">{description}</div>}\r\n      </div>\r\n\r\n      <div className=\"color-picker-container\">\r\n        <div className=\"color-input-wrapper\">\r\n          <input\r\n            type=\"color\"\r\n            value={localValue || '#000000'}\r\n            onChange={(event) => handleChange(event.target.value)}\r\n            className=\"color-input\"\r\n          />\r\n          <input\r\n            type=\"text\"\r\n            value={localValue || ''}\r\n            onChange={(event) => handleChange(event.target.value)}\r\n            placeholder=\"#000000\"\r\n            className=\"text-input\"\r\n            pattern=\"^#[0-9A-Fa-f]{6}$\"\r\n          />\r\n        </div>\r\n\r\n        <div className=\"color-preview\" style={{ backgroundColor: localValue || '#000000' }}>\r\n          <span className=\"preview-label\">{localValue || 'Not set'}</span>\r\n        </div>\r\n      </div>\r\n\r\n      {(fieldName === 'primary' || fieldName === 'background') && (\r\n        <div\r\n          className=\"mini-preview\"\r\n          style={{\r\n            backgroundColor: colorValues.background || '#ffffff',\r\n            color: colorValues.foreground || '#000000',\r\n            borderColor: colorValues.border || '#e2e8f0',\r\n          }}\r\n        >\r\n          <div\r\n            className=\"preview-card\"\r\n            style={{\r\n              backgroundColor: colorValues.card || '#ffffff',\r\n              color: colorValues.cardForeground || '#000000',\r\n              borderColor: colorValues.border || '#e2e8f0',\r\n            }}\r\n          >\r\n            <button\r\n              className=\"preview-button\"\r\n              style={{\r\n                backgroundColor: colorValues.primary || '#0070f3',\r\n                color: colorValues.primaryForeground || '#ffffff',\r\n              }}\r\n            >\r\n              Primary Button\r\n            </button>\r\n            <button\r\n              className=\"preview-button secondary\"\r\n              style={{\r\n                backgroundColor: colorValues.secondary || '#f1f5f9',\r\n                color: colorValues.secondaryForeground || '#0f172a',\r\n              }}\r\n            >\r\n              Secondary\r\n            </button>\r\n          </div>\r\n        </div>\r\n      )}\r\n    </div>\r\n  )\r\n}\r\n\r\nexport default ThemeColorPickerField\r\n"],"names":["useField","useFormFields","useEffect","useMemo","useState","resolveLocalizedValue","value","fallback","localized","resolved","en","cs","ThemeColorPickerField","field","path","setValue","localValue","setLocalValue","allFields","fields","mode","includes","modePrefix","colorValues","names","reduce","accumulator","name","fieldState","parsedValue","undefined","handleChange","nextValue","fieldName","split","pop","label","description","admin","div","className","input","type","onChange","event","target","placeholder","pattern","style","backgroundColor","span","background","color","foreground","borderColor","border","card","cardForeground","button","primary","primaryForeground","secondary","secondaryForeground"],"mappings":"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"}