@dotcms/uve 1.2.1-next.12 → 1.2.1-next.14

package/index.cjs.js

@@ -12,13 +12,11 @@ require('@dotcms/types/internal');
  * This transformation ensures consistency in the schema format sent to UVE.
  *
  * **Field Type Handling:**
- * - **Input fields**: Extracts `inputType`, `placeholder`, and `defaultValue` into config
- * - **Dropdown fields**: Normalizes options (strings become `{ label, value }` objects),
- *   extracts `placeholder` and `defaultValue` into config
+ * - **Input fields**: Extracts `inputType` and `placeholder` into config
+ * - **Dropdown fields**: Normalizes options (strings become `{ label, value }` objects)
  * - **Radio fields**: Normalizes options (preserves image properties like `imageURL`, `width`, `height`),
- *   extracts `defaultValue` into config
- * - **Checkbox group fields**: Normalizes options and derives `defaultValue` from option values
- *   (creates Record<string, boolean> mapping option keys to their boolean values)
+ *   extracts `columns` into config
+ * - **Checkbox group fields**: Normalizes options (converts to format expected by UVE)
  *
  * @experimental This method is experimental and may be subject to change.
  *
@@ -30,15 +28,16 @@ require('@dotcms/types/internal');
  * // Input field normalization
  * normalizeField({
  *   type: 'input',
+ *   id: 'font-size',
  *   label: 'Font Size',
  *   inputType: 'number',
- *   defaultValue: 16,
  *   placeholder: 'Enter size'
  * })
  * // Returns: {
  * //   type: 'input',
+ * //   id: 'font-size',
  * //   label: 'Font Size',
- * //   config: { inputType: 'number', defaultValue: 16, placeholder: 'Enter size' }
+ * //   config: { inputType: 'number', placeholder: 'Enter size' }
  * // }
  *
  * // Dropdown field with string options normalization
@@ -65,7 +64,6 @@ function normalizeField(field) {
   if (field.type === 'input') {
     config.inputType = field.inputType;
     config.placeholder = field.placeholder;
-    config.defaultValue = field.defaultValue;
   }
   if (field.type === 'dropdown' || field.type === 'radio') {
     // Normalize options to consistent format
@@ -73,7 +71,6 @@ function normalizeField(field) {
       label: opt,
       value: opt
     } : opt);
-    config.defaultValue = field.defaultValue;
     // Handle radio-specific properties
     if (field.type === 'radio') {
       config.columns = field.columns;
@@ -81,16 +78,11 @@ function normalizeField(field) {
   }
   if (field.type === 'checkboxGroup') {
     // Normalize checkbox options - convert to format expected by UVE
-    // Options already have label, key, and value (boolean)
+    // Options have label and key - convert key to 'value' for UVE format
     config.options = field.options.map(opt => ({
       label: opt.label,
       value: opt.key // UVE expects 'value' to be the key identifier
     }));
-    // Derive defaultValue from options - map key to boolean value
-    config.defaultValue = field.options.reduce((acc, opt) => {
-      acc[opt.key] = opt.value;
-      return acc;
-    }, {});
   }
   return {
     ...base,
@@ -180,14 +172,14 @@ function normalizeSection(section) {
  *     {
  *       title: 'Typography',
  *       fields: [
- *         { type: 'input', label: 'Font Size', inputType: 'number', defaultValue: 16 },
- *         { type: 'dropdown', label: 'Font Family', options: ['Arial', 'Helvetica'] }
+ *         { type: 'input', id: 'font-size', label: 'Font Size', inputType: 'number' },
+ *         { type: 'dropdown', id: 'font-family', label: 'Font Family', options: ['Arial', 'Helvetica'] }
  *       ]
  *     },
  *     {
  *       title: 'Colors',
  *       fields: [
- *         { type: 'input', label: 'Primary Color', inputType: 'text', defaultValue: '#000000' }
+ *         { type: 'input', id: 'primary-color', label: 'Primary Color', inputType: 'text' }
  *       ]
  *     }
  *   ]
@@ -199,8 +191,8 @@ function normalizeSection(section) {
  * //       title: 'Typography',
  * //       fields: [
  * //         [
- * //           { type: 'input', label: 'Font Size', config: { inputType: 'number', defaultValue: 16 } },
- * //           { type: 'dropdown', label: 'Font Family', config: { options: [...] } }
+ * //           { type: 'input', id: 'font-size', label: 'Font Size', config: { inputType: 'number' } },
+ * //           { type: 'dropdown', id: 'font-family', label: 'Font Family', config: { options: [...] } }
  * //         ]
  * //       ]
  * //     },
@@ -208,7 +200,7 @@ function normalizeSection(section) {
  * //       title: 'Colors',
  * //       fields: [
  * //         [
- * //           { type: 'input', label: 'Primary Color', config: { inputType: 'text', defaultValue: '#000000' } }
+ * //           { type: 'input', id: 'primary-color', label: 'Primary Color', config: { inputType: 'text' } }
  * //         ]
  * //       ]
  * //     }
@@ -252,19 +244,19 @@ function normalizeForm(form) {
  *       title: 'Typography',
  *       fields: [
  *         styleEditorField.input({
+ *           id: 'font-size',
  *           label: 'Font Size',
- *           inputType: 'number',
- *           defaultValue: 16
+ *           inputType: 'number'
  *         }),
  *         styleEditorField.dropdown({
+ *           id: 'font-family',
  *           label: 'Font Family',
- *           options: ['Arial', 'Helvetica'],
- *           defaultValue: 'Arial'
+ *           options: ['Arial', 'Helvetica']
  *         }),
  *         styleEditorField.radio({
+ *           id: 'alignment',
  *           label: 'Alignment',
- *           options: ['Left', 'Center', 'Right'],
- *           defaultValue: 'Left'
+ *           options: ['Left', 'Center', 'Right']
  *         })
  *       ]
  *     }
@@ -274,49 +266,36 @@ function normalizeForm(form) {
  */
 const styleEditorField = {
   /**
-   * Creates an input field definition with type-safe default values.
+   * Creates an input field definition.
    *
-   * Supports both text and number input types. The `defaultValue` type is
-   * enforced based on the `inputType` using TypeScript generics:
-   * - When `inputType` is `'number'`, `defaultValue` must be a `number`
-   * - When `inputType` is `'text'`, `defaultValue` must be a `string`
-   *
-   * This provides compile-time type checking to prevent mismatched types,
-   * such as passing a string when a number is expected.
+   * Supports both text and number input types for different value types.
    *
    * @experimental This method is experimental and may be subject to change.
    *
    * @typeParam T - The input type ('text' or 'number'), inferred from `config.inputType`
    * @param config - Input field configuration
+   * @param config.id - The unique identifier for this field
    * @param config.label - The label displayed for this input field
    * @param config.inputType - The type of input ('text' or 'number')
    * @param config.placeholder - Optional placeholder text for the input
-   * @param config.defaultValue - Optional default value (type enforced based on inputType)
    * @returns A complete input field definition with type 'input'
    *
    * @example
    * ```typescript
-   * // Number input - defaultValue must be a number
+   * // Number input
    * styleEditorField.input({
+   *   id: 'font-size',
    *   label: 'Font Size',
    *   inputType: 'number',
-   *   placeholder: 'Enter font size',
-   *   defaultValue: 16 // ✓ Correct: number
+   *   placeholder: 'Enter font size'
    * })
    *
-   * // Text input - defaultValue must be a string
+   * // Text input
    * styleEditorField.input({
+   *   id: 'font-name',
    *   label: 'Font Name',
    *   inputType: 'text',
-   *   placeholder: 'Enter font name',
-   *   defaultValue: 'Arial' // ✓ Correct: string
-   * })
-   *
-   * // TypeScript error - type mismatch
-   * styleEditorField.input({
-   *   label: 'Font Size',
-   *   inputType: 'number',
-   *   defaultValue: '16' // ✗ Error: Type 'string' is not assignable to type 'number'
+   *   placeholder: 'Enter font name'
    * })
    * ```
    */
@@ -325,94 +304,62 @@ const styleEditorField = {
     ...config
   }),
   /**
-   * Creates a dropdown field definition with type-safe default values.
+   * Creates a dropdown field definition.
    *
    * Allows users to select a single value from a list of options.
    * Options can be provided as simple strings or as objects with label and value.
    *
-   * **Type Safety Tip:** For autocomplete on `defaultValue`, use `as const` when defining options:
+   * **Best Practice:** Use `as const` when defining options for better type safety:
    * ```typescript
-   * const options = [
-   *   { label: 'The one', value: 'one' },
-   *   { label: 'The two', value: 'two' }
+   * const OPTIONS = [
+   *   { label: '18', value: '18px' },
+   *   { label: '24', value: '24px' }
    * ] as const;
    *
    * styleEditorField.dropdown({
-   *   id: 'my-field',
-   *   label: 'Select option',
-   *   options,
-   *   defaultValue: 'one' // ✓ Autocomplete works! TypeScript knows 'one' | 'two'
-   *   // defaultValue: 'three' // ✗ TypeScript error: not assignable
-   * })
-   * ```
-   *
-   * Without `as const`, the function still works but won't provide autocomplete:
-   * ```typescript
-   * styleEditorField.dropdown({
-   *   id: 'my-field',
-   *   label: 'Select option',
-   *   options: [
-   *     { label: 'The one', value: 'one' },
-   *     { label: 'The two', value: 'two' }
-   *   ],
-   *   defaultValue: 'one' // Works, but no autocomplete
-   * })
+   *   id: 'size',
+   *   label: 'Size',
+   *   options: OPTIONS
+   * });
    * ```
    *
    * @experimental This method is experimental and may be subject to change.
    *
-   * @typeParam TOptions - The options array type (inferred from config, use `as const` for type safety)
    * @param config - Dropdown field configuration (without the 'type' property)
    * @param config.id - The unique identifier for this field
    * @param config.label - The label displayed for this dropdown field
-   * @param config.options - Array of options. Use `as const` for type safety and autocomplete
-   * @param config.defaultValue - Optional default selected value (type-safe when options are `as const`)
+   * @param config.options - Array of options. Can be strings or objects with label and value. Use `as const` for best type safety.
    * @returns A complete dropdown field definition with type 'dropdown'
    *
    * @example
    * ```typescript
-   * // With type safety - use 'as const' for autocomplete
-   * const options = [
-   *   { label: 'The one', value: 'one' },
-   *   { label: 'The two', value: 'two' }
-   * ] as const;
-   *
-   * styleEditorField.dropdown({
-   *   id: 'my-field',
-   *   label: 'Select option',
-   *   options,
-   *   defaultValue: 'one' // ✓ Autocomplete works!
-   * })
-   *
    * // Simple string options
    * styleEditorField.dropdown({
    *   id: 'font-family',
    *   label: 'Font Family',
-   *   options: ['Arial', 'Helvetica', 'Times New Roman'],
-   *   defaultValue: 'Arial',
-   *   placeholder: 'Select a font'
+   *   options: ['Arial', 'Helvetica', 'Times New Roman']
    * })
    *
-   * // Object options with custom labels
+   * // Object options with custom labels (recommended: use 'as const')
+   * const OPTIONS = [
+   *   { label: 'Light Theme', value: 'light' },
+   *   { label: 'Dark Theme', value: 'dark' }
+   * ] as const;
+   *
    * styleEditorField.dropdown({
    *   id: 'theme',
    *   label: 'Theme',
-   *   options: [
-   *     { label: 'Light Theme', value: 'light' },
-   *     { label: 'Dark Theme', value: 'dark' }
-   *   ],
-   *   defaultValue: 'light'
+   *   options: OPTIONS
    * })
    * ```
    */
   dropdown: config => ({
     type: 'dropdown',
     ...config,
-    options: config.options,
-    defaultValue: config.defaultValue
+    options: config.options
   }),
   /**
-   * Creates a radio button field definition with type-safe default values.
+   * Creates a radio button field definition.
    *
    * Allows users to select a single option from a list. Supports visual
    * options with background images for enhanced UI. Options can be provided
@@ -422,97 +369,66 @@ const styleEditorField = {
    * - `columns: 1` (default): Single column list layout
    * - `columns: 2`: Two-column grid layout, ideal for visual options with images
    *
-   * **Type Safety Tip:** For autocomplete on `defaultValue`, use `as const` when defining options:
+   * **Best Practice:** Use `as const` when defining options for better type safety:
    * ```typescript
-   * const options = [
-   *   { label: 'The one', value: 'one' },
-   *   { label: 'The two', value: 'two' }
+   * const RADIO_OPTIONS = [
+   *   { label: 'Left', value: 'left' },
+   *   { label: 'Right', value: 'right' }
    * ] as const;
    *
    * styleEditorField.radio({
-   *   id: 'my-field',
-   *   label: 'Select option',
-   *   options,
-   *   defaultValue: 'one' // ✓ Autocomplete works! TypeScript knows 'one' | 'two'
-   *   // defaultValue: 'three' // ✗ TypeScript error: not assignable
-   * })
-   * ```
-   *
-   * Without `as const`, the function still works but won't provide autocomplete:
-   * ```typescript
-   * styleEditorField.radio({
-   *   id: 'my-field',
-   *   label: 'Select option',
-   *   options: [
-   *     { label: 'The one', value: 'one' },
-   *     { label: 'The two', value: 'two' }
-   *   ],
-   *   defaultValue: 'one' // Works, but no autocomplete
-   * })
+   *   id: 'layout',
+   *   label: 'Layout',
+   *   options: RADIO_OPTIONS
+   * });
    * ```
    *
    * @experimental This method is experimental and may be subject to change.
    *
-   * @typeParam TOptions - The options array type (inferred from config, use `as const` for type safety)
    * @param config - Radio field configuration (without the 'type' property)
    * @param config.id - The unique identifier for this field
    * @param config.label - The label displayed for this radio group
-   * @param config.options - Array of options. Use `as const` for type safety and autocomplete
-   * @param config.defaultValue - Optional default selected value (type-safe when options are `as const`)
+   * @param config.options - Array of options. Can be strings or objects with label, value, and optional image properties. Use `as const` for best type safety.
    * @param config.columns - Optional number of columns (1 or 2). Defaults to 1 (single column)
    * @returns A complete radio field definition with type 'radio'
    *
    * @example
    * ```typescript
-   * // With type safety - use 'as const' for autocomplete
-   * const options = [
-   *   { label: 'The one', value: 'one' },
-   *   { label: 'The two', value: 'two' }
-   * ] as const;
-   *
-   * styleEditorField.radio({
-   *   id: 'my-field',
-   *   label: 'Select option',
-   *   options,
-   *   defaultValue: 'one' // ✓ Autocomplete works!
-   * })
-   *
    * // Simple string options (single column)
    * styleEditorField.radio({
    *   id: 'alignment',
    *   label: 'Alignment',
-   *   options: ['Left', 'Center', 'Right'],
-   *   defaultValue: 'Left'
+   *   options: ['Left', 'Center', 'Right']
    * })
    *
-   * // Two-column grid layout with images
+   * // Two-column grid layout with images (recommended: use 'as const')
+   * const LAYOUT_OPTIONS = [
+   *   {
+   *     label: 'Left',
+   *     value: 'left',
+   *     imageURL: 'https://example.com/layout-left.png',
+   *   },
+   *   {
+   *     label: 'Right',
+   *     value: 'right',
+   *     imageURL: 'https://example.com/layout-right.png',
+   *   },
+   *   { label: 'Center', value: 'center' },
+   *   { label: 'Overlap', value: 'overlap' }
+   * ] as const;
+   *
    * styleEditorField.radio({
    *   id: 'layout',
    *   label: 'Layout',
    *   columns: 2,
-   *   options: [
-   *     {
-   *       label: 'Left',
-   *       value: 'left',
-   *       imageURL: 'https://example.com/layout-left.png',
-   *     },
-   *     {
-   *       label: 'Right',
-   *       value: 'right',
-   *       imageURL: 'https://example.com/layout-right.png',
-   *     },
-   *     { label: 'Center', value: 'center' },
-   *     { label: 'Overlap', value: 'overlap' }
-   *   ],
-   *   defaultValue: 'right'
+   *   options: LAYOUT_OPTIONS
    * })
    * ```
    */
   radio: config => ({
     type: 'radio',
     ...config,
-    options: config.options,
-    defaultValue: config.defaultValue
+    options: config.options
   }),
   /**
    * Creates a checkbox group field definition.
@@ -523,8 +439,7 @@ const styleEditorField = {
    *
    * **Key Differences from Other Field Types:**
    * - Uses `key` instead of `value` for the identifier (to avoid confusion)
-   * - Uses `value` for the default boolean checked state (the actual value)
-   * - No separate `defaultValue` property - defaults are embedded in options
+   * - Checked state is managed by the form system, not stored in the option definition
    *
    * **Why `key` instead of `value`?**
    * In dropdown and radio fields, `value` represents the actual selected value (string).
@@ -537,7 +452,7 @@ const styleEditorField = {
    * @param config - Checkbox group field configuration (without the 'type' property)
    * @param config.id - The unique identifier for this field
    * @param config.label - The label displayed for this checkbox group
-   * @param config.options - Array of checkbox options with label, key, and value (boolean)
+   * @param config.options - Array of checkbox options with label and key
    * @returns A complete checkbox group field definition with type 'checkboxGroup'
    *
    * @example
@@ -546,11 +461,10 @@ const styleEditorField = {
    *   id: 'text-decoration',
    *   label: 'Text Decoration',
    *   options: [
-   *     { label: 'Underline', key: 'underline', value: true },
-   *     { label: 'Overline', key: 'overline', value: false },
-   *     { label: 'Line Through', key: 'line-through', value: false }
+   *     { label: 'Underline', key: 'underline' },
+   *     { label: 'Overline', key: 'overline' },
+   *     { label: 'Line Through', key: 'line-through' }
    *   ]
-   *   // No defaultValue needed - it's automatically derived from options
    * })
    *
    * // Example with type settings
@@ -558,10 +472,10 @@ const styleEditorField = {
    *   id: 'type-settings',
    *   label: 'Type settings',
    *   options: [
-   *     { label: 'Bold', key: 'bold', value: true },
-   *     { label: 'Italic', key: 'italic', value: false },
-   *     { label: 'Underline', key: 'underline', value: false },
-   *     { label: 'Strikethrough', key: 'strikethrough', value: false }
+   *     { label: 'Bold', key: 'bold' },
+   *     { label: 'Italic', key: 'italic' },
+   *     { label: 'Underline', key: 'underline' },
+   *     { label: 'Strikethrough', key: 'strikethrough' }
    *   ]
    * })
    * ```
@@ -602,14 +516,14 @@ const styleEditorField = {
  *       title: 'Typography',
  *       fields: [
  *         styleEditorField.input({
+ *           id: 'font-size',
  *           label: 'Font Size',
- *           inputType: 'number',
- *           defaultValue: 16
+ *           inputType: 'number'
  *         }),
  *         styleEditorField.dropdown({
+ *           id: 'font-family',
  *           label: 'Font Family',
- *           options: ['Arial', 'Helvetica'],
- *           defaultValue: 'Arial'
+ *           options: ['Arial', 'Helvetica']
  *         })
  *       ]
  *     },
@@ -617,14 +531,14 @@ const styleEditorField = {
  *       title: 'Colors',
  *       fields: [
  *         styleEditorField.input({
+ *           id: 'primary-color',
  *           label: 'Primary Color',
- *           inputType: 'text',
- *           defaultValue: '#000000'
+ *           inputType: 'text'
  *         }),
  *         styleEditorField.input({
+ *           id: 'secondary-color',
  *           label: 'Secondary Color',
- *           inputType: 'text',
- *           defaultValue: '#FFFFFF'
+ *           inputType: 'text'
  *         })
  *       ]
  *     }
@@ -669,9 +583,9 @@ function defineStyleEditorSchema(form) {
  *       title: 'Typography',
  *       fields: [
  *         styleEditorField.input({
+ *           id: 'font-size',
  *           label: 'Font Size',
- *           inputType: 'number',
- *           defaultValue: 16
+ *           inputType: 'number'
  *         })
  *       ]
  *     }
@@ -715,7 +629,6 @@ exports.enableBlockEditorInline = _public.enableBlockEditorInline;
 exports.getUVEState = _public.getUVEState;
 exports.initInlineEditing = _public.initInlineEditing;
 exports.initUVE = _public.initUVE;
-exports.isAnalyticsActive = _public.isAnalyticsActive;
 exports.reorderMenu = _public.reorderMenu;
 exports.sendMessageToUVE = _public.sendMessageToUVE;
 exports.updateNavigation = _public.updateNavigation;