@kilivi/payloadcms-theme-management 1.1.2 → 2.1.0

package/dist/fields/PaletteGeneratorField.js

@@ -0,0 +1,327 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useForm, useFormFields } from '@payloadcms/ui';
+import { ImageUp, Sparkles, Wand2 } from 'lucide-react';
+import { useCallback, useEffect, useId, useRef, useState } from 'react';
+import { HexColorInput, HexColorPicker } from 'react-colorful';
+import { createBulkWriter, getAppearanceSession, useAppearanceSession } from '../hooks/useAppearanceSession.js';
+import { useThemeTranslations } from '../hooks/useThemeTranslations.js';
+import { extractDominantColors, generatePaletteFromColor } from '../utils/generatePalette.js';
+/**
+ * Admin tool that generates a full light + dark palette from a single brand
+ * colour (or a colour extracted from an uploaded logo/image) and writes it
+ * straight into the colour-mode fields.
+ */ export default function PaletteGeneratorField() {
+    const formFields = useFormFields(([state])=>state);
+    const { dispatchFields, setModified } = useForm();
+    const t = useThemeTranslations().paletteGenerator;
+    const fileInputRef = useRef(null);
+    const currentPrimary = (()=>{
+        const v = formFields?.['themeConfiguration.lightMode.primary']?.value;
+        return typeof v === 'string' && v.trim() ? v : '#3b82f6';
+    })();
+    const [seed, setSeed] = useState(currentPrimary);
+    const [swatches, setSwatches] = useState([]);
+    const [open, setOpen] = useState(false);
+    const [imageError, setImageError] = useState(false);
+    const seedTouchedRef = useRef(false);
+    // Follow the form's primary colour (e.g. after a preset is applied) until the
+    // editor picks a seed of their own.
+    useEffect(()=>{
+        if (!seedTouchedRef.current) setSeed(currentPrimary);
+    }, [
+        currentPrimary
+    ]);
+    const chooseSeed = useCallback((color)=>{
+        seedTouchedRef.current = true;
+        setSeed(color);
+    }, []);
+    const { locks } = useAppearanceSession();
+    const appearanceT = useThemeTranslations().appearance;
+    const colorsLocked = locks.colors;
+    const lockNoteId = useId();
+    const applyPalette = useCallback(()=>{
+        if (getAppearanceSession().locks.colors) return;
+        const palette = generatePaletteFromColor(seed);
+        const writer = createBulkWriter(formFields, dispatchFields);
+        [
+            'lightMode',
+            'darkMode'
+        ].forEach((mode)=>{
+            const colors = palette[mode];
+            Object.keys(colors).forEach((key)=>{
+                writer.write(`themeConfiguration.${mode}.${key}`, colors[key]);
+            });
+        });
+        // `dispatchFields` alone does not flip the form's dirty flag, so Payload
+        // would keep the Save button disabled after generating a palette.
+        setModified(true);
+        writer.commit('palette', `${appearanceT.generatedPalette} ${seed}`);
+    }, [
+        seed,
+        formFields,
+        dispatchFields,
+        setModified,
+        appearanceT.generatedPalette
+    ]);
+    const handleFile = useCallback((event)=>{
+        const file = event.target.files?.[0];
+        if (!file) return;
+        setImageError(false);
+        const url = URL.createObjectURL(file);
+        const img = new Image();
+        img.onload = ()=>{
+            const colors = extractDominantColors(img, 6);
+            setSwatches(colors);
+            if (colors[0]) chooseSeed(colors[0]);
+            URL.revokeObjectURL(url);
+        };
+        img.onerror = ()=>{
+            setImageError(true);
+            URL.revokeObjectURL(url);
+        };
+        img.src = url;
+        // Allow re-selecting the same file after an error.
+        event.target.value = '';
+    }, [
+        chooseSeed
+    ]);
+    return /*#__PURE__*/ _jsxs("div", {
+        style: {
+            padding: '16px',
+            borderRadius: '12px',
+            border: '1px solid var(--theme-elevation-200)',
+            backgroundColor: 'var(--theme-elevation-25)'
+        },
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                style: {
+                    display: 'inline-flex',
+                    alignItems: 'center',
+                    gap: '6px',
+                    fontSize: '13px',
+                    fontWeight: 600,
+                    color: 'var(--theme-elevation-800)'
+                },
+                children: [
+                    /*#__PURE__*/ _jsx(Sparkles, {
+                        size: 14,
+                        "aria-hidden": true
+                    }),
+                    t.title
+                ]
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                style: {
+                    fontSize: '12px',
+                    color: 'var(--theme-elevation-600)',
+                    marginBottom: '12px'
+                },
+                children: t.subtitle
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                style: {
+                    display: 'flex',
+                    flexWrap: 'wrap',
+                    alignItems: 'flex-start',
+                    gap: '16px'
+                },
+                children: [
+                    /*#__PURE__*/ _jsxs("div", {
+                        style: {
+                            display: 'grid',
+                            gap: '8px'
+                        },
+                        children: [
+                            /*#__PURE__*/ _jsxs("button", {
+                                type: "button",
+                                onClick: ()=>setOpen((o)=>!o),
+                                "aria-label": `${t.seedLabel}: ${seed}`,
+                                "aria-expanded": open,
+                                style: {
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    gap: '8px',
+                                    padding: '4px 8px 4px 4px',
+                                    borderRadius: '8px',
+                                    border: '1px solid var(--theme-elevation-200)',
+                                    background: 'var(--theme-elevation-50)',
+                                    cursor: 'pointer'
+                                },
+                                children: [
+                                    /*#__PURE__*/ _jsx("span", {
+                                        style: {
+                                            width: '28px',
+                                            height: '28px',
+                                            borderRadius: '6px',
+                                            background: seed,
+                                            border: '1px solid rgba(0,0,0,0.1)'
+                                        }
+                                    }),
+                                    /*#__PURE__*/ _jsx("span", {
+                                        style: {
+                                            fontFamily: 'monospace',
+                                            fontSize: '12px',
+                                            color: 'var(--theme-elevation-700)'
+                                        },
+                                        children: seed
+                                    })
+                                ]
+                            }),
+                            open ? /*#__PURE__*/ _jsxs("div", {
+                                style: {
+                                    display: 'grid',
+                                    gap: '8px'
+                                },
+                                children: [
+                                    /*#__PURE__*/ _jsx(HexColorPicker, {
+                                        color: seed,
+                                        onChange: chooseSeed
+                                    }),
+                                    /*#__PURE__*/ _jsx(HexColorInput, {
+                                        color: seed,
+                                        onChange: chooseSeed,
+                                        prefixed: true,
+                                        style: {
+                                            width: '160px',
+                                            padding: '6px 8px',
+                                            borderRadius: '6px',
+                                            border: '1px solid var(--theme-elevation-200)',
+                                            fontFamily: 'monospace',
+                                            fontSize: '12px'
+                                        }
+                                    })
+                                ]
+                            }) : null
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsxs("div", {
+                        style: {
+                            display: 'grid',
+                            gap: '8px'
+                        },
+                        children: [
+                            /*#__PURE__*/ _jsxs("button", {
+                                type: "button",
+                                onClick: applyPalette,
+                                disabled: colorsLocked,
+                                "aria-describedby": colorsLocked ? lockNoteId : undefined,
+                                style: {
+                                    display: 'inline-flex',
+                                    alignItems: 'center',
+                                    gap: '6px',
+                                    padding: '8px 14px',
+                                    borderRadius: '8px',
+                                    border: 'none',
+                                    cursor: colorsLocked ? 'not-allowed' : 'pointer',
+                                    background: 'var(--theme-elevation-800)',
+                                    color: 'var(--theme-elevation-0)',
+                                    opacity: colorsLocked ? 0.5 : 1,
+                                    fontWeight: 600,
+                                    fontSize: '12px'
+                                },
+                                children: [
+                                    /*#__PURE__*/ _jsx(Wand2, {
+                                        size: 14,
+                                        "aria-hidden": true
+                                    }),
+                                    t.generate
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsxs("button", {
+                                type: "button",
+                                onClick: ()=>fileInputRef.current?.click(),
+                                style: {
+                                    display: 'inline-flex',
+                                    alignItems: 'center',
+                                    gap: '6px',
+                                    padding: '8px 14px',
+                                    borderRadius: '8px',
+                                    border: '1px solid var(--theme-elevation-200)',
+                                    cursor: 'pointer',
+                                    background: 'transparent',
+                                    color: 'var(--theme-elevation-700)',
+                                    fontWeight: 600,
+                                    fontSize: '12px'
+                                },
+                                children: [
+                                    /*#__PURE__*/ _jsx(ImageUp, {
+                                        size: 14,
+                                        "aria-hidden": true
+                                    }),
+                                    t.fromImage
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsx("input", {
+                                ref: fileInputRef,
+                                type: "file",
+                                accept: "image/*",
+                                onChange: handleFile,
+                                style: {
+                                    display: 'none'
+                                }
+                            }),
+                            /*#__PURE__*/ _jsx("div", {
+                                id: lockNoteId,
+                                style: {
+                                    fontSize: '12px',
+                                    color: 'var(--theme-elevation-600)',
+                                    maxWidth: '200px'
+                                },
+                                children: colorsLocked ? appearanceT.colorsLocked : t.hint
+                            })
+                        ]
+                    })
+                ]
+            }),
+            imageError ? /*#__PURE__*/ _jsx("div", {
+                role: "alert",
+                style: {
+                    marginTop: '12px',
+                    fontSize: '12px',
+                    color: 'var(--theme-error-600)'
+                },
+                children: t.imageError
+            }) : null,
+            swatches.length > 0 ? /*#__PURE__*/ _jsxs("div", {
+                style: {
+                    marginTop: '12px'
+                },
+                children: [
+                    /*#__PURE__*/ _jsx("div", {
+                        style: {
+                            fontSize: '12px',
+                            color: 'var(--theme-elevation-600)',
+                            marginBottom: '6px'
+                        },
+                        children: t.pick
+                    }),
+                    /*#__PURE__*/ _jsx("div", {
+                        style: {
+                            display: 'flex',
+                            gap: '6px',
+                            flexWrap: 'wrap'
+                        },
+                        children: swatches.map((color)=>/*#__PURE__*/ _jsx("button", {
+                                type: "button",
+                                onClick: ()=>chooseSeed(color),
+                                title: color,
+                                "aria-label": `${t.useColor} ${color}`,
+                                "aria-pressed": color === seed,
+                                style: {
+                                    width: '30px',
+                                    height: '30px',
+                                    borderRadius: '6px',
+                                    background: color,
+                                    cursor: 'pointer',
+                                    border: color === seed ? '2px solid var(--theme-elevation-800)' : '1px solid rgba(0,0,0,0.12)'
+                                }
+                            }, color))
+                    })
+                ]
+            }) : null
+        ]
+    });
+}
+
+//# sourceMappingURL=PaletteGeneratorField.js.map

package/dist/fields/PaletteGeneratorField.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/fields/PaletteGeneratorField.tsx"],"sourcesContent":["'use client'\n\nimport { useForm, useFormFields } from '@payloadcms/ui'\nimport { ImageUp, Sparkles, Wand2 } from 'lucide-react'\nimport { useCallback, useEffect, useId, useRef, useState } from 'react'\nimport { HexColorInput, HexColorPicker } from 'react-colorful'\nimport {\n  createBulkWriter,\n  getAppearanceSession,\n  useAppearanceSession,\n} from '../hooks/useAppearanceSession.js'\nimport { useThemeTranslations } from '../hooks/useThemeTranslations.js'\nimport {\n  extractDominantColors,\n  generatePaletteFromColor,\n  type GeneratedColorMode,\n} from '../utils/generatePalette.js'\n\n/**\n * Admin tool that generates a full light + dark palette from a single brand\n * colour (or a colour extracted from an uploaded logo/image) and writes it\n * straight into the colour-mode fields.\n */\nexport default function PaletteGeneratorField() {\n  const formFields = useFormFields(([state]) => state) as Record<\n    string,\n    { value?: unknown } | undefined\n  >\n  const { dispatchFields, setModified } = useForm()\n  const t = useThemeTranslations().paletteGenerator\n  const fileInputRef = useRef<HTMLInputElement | null>(null)\n\n  const currentPrimary = (() => {\n    const v = formFields?.['themeConfiguration.lightMode.primary']?.value\n    return typeof v === 'string' && v.trim() ? v : '#3b82f6'\n  })()\n\n  const [seed, setSeed] = useState<string>(currentPrimary)\n  const [swatches, setSwatches] = useState<string[]>([])\n  const [open, setOpen] = useState(false)\n  const [imageError, setImageError] = useState(false)\n  const seedTouchedRef = useRef(false)\n\n  // Follow the form's primary colour (e.g. after a preset is applied) until the\n  // editor picks a seed of their own.\n  useEffect(() => {\n    if (!seedTouchedRef.current) setSeed(currentPrimary)\n  }, [currentPrimary])\n\n  const chooseSeed = useCallback((color: string) => {\n    seedTouchedRef.current = true\n    setSeed(color)\n  }, [])\n\n  const { locks } = useAppearanceSession()\n  const appearanceT = useThemeTranslations().appearance\n  const colorsLocked = locks.colors\n  const lockNoteId = useId()\n\n  const applyPalette = useCallback(() => {\n    if (getAppearanceSession().locks.colors) return\n    const palette = generatePaletteFromColor(seed)\n    const writer = createBulkWriter(formFields, dispatchFields)\n    ;(['lightMode', 'darkMode'] as const).forEach((mode) => {\n      const colors = palette[mode]\n      ;(Object.keys(colors) as Array<keyof GeneratedColorMode>).forEach((key) => {\n        writer.write(`themeConfiguration.${mode}.${key}`, colors[key])\n      })\n    })\n    // `dispatchFields` alone does not flip the form's dirty flag, so Payload\n    // would keep the Save button disabled after generating a palette.\n    setModified(true)\n    writer.commit('palette', `${appearanceT.generatedPalette} ${seed}`)\n  }, [seed, formFields, dispatchFields, setModified, appearanceT.generatedPalette])\n\n  const handleFile = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {\n    const file = event.target.files?.[0]\n    if (!file) return\n    setImageError(false)\n    const url = URL.createObjectURL(file)\n    const img = new Image()\n    img.onload = () => {\n      const colors = extractDominantColors(img, 6)\n      setSwatches(colors)\n      if (colors[0]) chooseSeed(colors[0])\n      URL.revokeObjectURL(url)\n    }\n    img.onerror = () => {\n      setImageError(true)\n      URL.revokeObjectURL(url)\n    }\n    img.src = url\n    // Allow re-selecting the same file after an error.\n    event.target.value = ''\n  }, [chooseSeed])\n\n  return (\n    <div\n      style={{\n        padding: '16px',\n        borderRadius: '12px',\n        border: '1px solid var(--theme-elevation-200)',\n        backgroundColor: 'var(--theme-elevation-25)',\n      }}\n    >\n      <div\n        style={{\n          display: 'inline-flex',\n          alignItems: 'center',\n          gap: '6px',\n          fontSize: '13px',\n          fontWeight: 600,\n          color: 'var(--theme-elevation-800)',\n        }}\n      >\n        <Sparkles size={14} aria-hidden />\n        {t.title}\n      </div>\n      <div style={{ fontSize: '12px', color: 'var(--theme-elevation-600)', marginBottom: '12px' }}>\n        {t.subtitle}\n      </div>\n\n      <div style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'flex-start', gap: '16px' }}>\n        {/* Seed colour */}\n        <div style={{ display: 'grid', gap: '8px' }}>\n          <button\n            type=\"button\"\n            onClick={() => setOpen((o) => !o)}\n            aria-label={`${t.seedLabel}: ${seed}`}\n            aria-expanded={open}\n            style={{\n              display: 'flex',\n              alignItems: 'center',\n              gap: '8px',\n              padding: '4px 8px 4px 4px',\n              borderRadius: '8px',\n              border: '1px solid var(--theme-elevation-200)',\n              background: 'var(--theme-elevation-50)',\n              cursor: 'pointer',\n            }}\n          >\n            <span\n              style={{\n                width: '28px',\n                height: '28px',\n                borderRadius: '6px',\n                background: seed,\n                border: '1px solid rgba(0,0,0,0.1)',\n              }}\n            />\n            <span style={{ fontFamily: 'monospace', fontSize: '12px', color: 'var(--theme-elevation-700)' }}>\n              {seed}\n            </span>\n          </button>\n          {open ? (\n            <div style={{ display: 'grid', gap: '8px' }}>\n              <HexColorPicker color={seed} onChange={chooseSeed} />\n              <HexColorInput\n                color={seed}\n                onChange={chooseSeed}\n                prefixed\n                style={{\n                  width: '160px',\n                  padding: '6px 8px',\n                  borderRadius: '6px',\n                  border: '1px solid var(--theme-elevation-200)',\n                  fontFamily: 'monospace',\n                  fontSize: '12px',\n                }}\n              />\n            </div>\n          ) : null}\n        </div>\n\n        {/* Actions */}\n        <div style={{ display: 'grid', gap: '8px' }}>\n          <button\n            type=\"button\"\n            onClick={applyPalette}\n            disabled={colorsLocked}\n            aria-describedby={colorsLocked ? lockNoteId : undefined}\n            style={{\n              display: 'inline-flex',\n              alignItems: 'center',\n              gap: '6px',\n              padding: '8px 14px',\n              borderRadius: '8px',\n              border: 'none',\n              cursor: colorsLocked ? 'not-allowed' : 'pointer',\n              background: 'var(--theme-elevation-800)',\n              color: 'var(--theme-elevation-0)',\n              opacity: colorsLocked ? 0.5 : 1,\n              fontWeight: 600,\n              fontSize: '12px',\n            }}\n          >\n            <Wand2 size={14} aria-hidden />\n            {t.generate}\n          </button>\n          <button\n            type=\"button\"\n            onClick={() => fileInputRef.current?.click()}\n            style={{\n              display: 'inline-flex',\n              alignItems: 'center',\n              gap: '6px',\n              padding: '8px 14px',\n              borderRadius: '8px',\n              border: '1px solid var(--theme-elevation-200)',\n              cursor: 'pointer',\n              background: 'transparent',\n              color: 'var(--theme-elevation-700)',\n              fontWeight: 600,\n              fontSize: '12px',\n            }}\n          >\n            <ImageUp size={14} aria-hidden />\n            {t.fromImage}\n          </button>\n          <input\n            ref={fileInputRef}\n            type=\"file\"\n            accept=\"image/*\"\n            onChange={handleFile}\n            style={{ display: 'none' }}\n          />\n          <div\n            id={lockNoteId}\n            style={{ fontSize: '12px', color: 'var(--theme-elevation-600)', maxWidth: '200px' }}\n          >\n            {colorsLocked ? appearanceT.colorsLocked : t.hint}\n          </div>\n        </div>\n      </div>\n\n      {imageError ? (\n        <div role=\"alert\" style={{ marginTop: '12px', fontSize: '12px', color: 'var(--theme-error-600)' }}>\n          {t.imageError}\n        </div>\n      ) : null}\n\n      {/* Extracted swatches */}\n      {swatches.length > 0 ? (\n        <div style={{ marginTop: '12px' }}>\n          <div style={{ fontSize: '12px', color: 'var(--theme-elevation-600)', marginBottom: '6px' }}>\n            {t.pick}\n          </div>\n          <div style={{ display: 'flex', gap: '6px', flexWrap: 'wrap' }}>\n            {swatches.map((color) => (\n              <button\n                key={color}\n                type=\"button\"\n                onClick={() => chooseSeed(color)}\n                title={color}\n                aria-label={`${t.useColor} ${color}`}\n                aria-pressed={color === seed}\n                style={{\n                  width: '30px',\n                  height: '30px',\n                  borderRadius: '6px',\n                  background: color,\n                  cursor: 'pointer',\n                  border:\n                    color === seed\n                      ? '2px solid var(--theme-elevation-800)'\n                      : '1px solid rgba(0,0,0,0.12)',\n                }}\n              />\n            ))}\n          </div>\n        </div>\n      ) : null}\n    </div>\n  )\n}\n"],"names":["useForm","useFormFields","ImageUp","Sparkles","Wand2","useCallback","useEffect","useId","useRef","useState","HexColorInput","HexColorPicker","createBulkWriter","getAppearanceSession","useAppearanceSession","useThemeTranslations","extractDominantColors","generatePaletteFromColor","PaletteGeneratorField","formFields","state","dispatchFields","setModified","t","paletteGenerator","fileInputRef","currentPrimary","v","value","trim","seed","setSeed","swatches","setSwatches","open","setOpen","imageError","setImageError","seedTouchedRef","current","chooseSeed","color","locks","appearanceT","appearance","colorsLocked","colors","lockNoteId","applyPalette","palette","writer","forEach","mode","Object","keys","key","write","commit","generatedPalette","handleFile","event","file","target","files","url","URL","createObjectURL","img","Image","onload","revokeObjectURL","onerror","src","div","style","padding","borderRadius","border","backgroundColor","display","alignItems","gap","fontSize","fontWeight","size","aria-hidden","title","marginBottom","subtitle","flexWrap","button","type","onClick","o","aria-label","seedLabel","aria-expanded","background","cursor","span","width","height","fontFamily","onChange","prefixed","disabled","aria-describedby","undefined","opacity","generate","click","fromImage","input","ref","accept","id","maxWidth","hint","role","marginTop","length","pick","map","useColor","aria-pressed"],"mappings":"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"}

package/dist/fields/StylePresetField.d.ts

@@ -0,0 +1,3 @@
+import type { TextFieldClientProps } from 'payload';
+export default function StylePresetField(props: TextFieldClientProps): import("react").JSX.Element;
+//# sourceMappingURL=StylePresetField.d.ts.map

package/dist/fields/StylePresetField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StylePresetField.d.ts","sourceRoot":"","sources":["../../src/fields/StylePresetField.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAA;AA+HnD,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,KAAK,EAAE,oBAAoB,+BAgZnE"}