@panneau/core 4.0.78 → 4.1.0

package/dist/index.js

@@ -1,13 +1,12 @@
+import isObject from 'lodash-es/isObject';
 import { flattenComponents, getComponentFromName } from '@panneau/core/utils';
-import { isObject } from 'lodash';
 import isArray from 'lodash-es/isArray';
 import uniqBy from 'lodash-es/uniqBy';
 import EventEmitter from 'wolfy87-eventemitter';
-import isObject$1 from 'lodash-es/isObject';
-import uniq from 'lodash-es/uniq';
 import { Tracking as Tracking$1 } from '@folklore/tracking';
 
 class ComponentsManager {
+  // Nested components maps are flattened with their key as namespace
   constructor(components = {}) {
     this.components = flattenComponents(components);
   }
@@ -175,7 +174,7 @@ class FontsParser {
       theme = null,
       components = []
     } = story || {};
-    const fonts = uniq(components.reduce((currentFonts, screen) => {
+    const fonts = uniqBy(components.reduce((currentFonts, screen) => {
       const {
         type
       } = screen;
@@ -196,7 +195,7 @@ class FontsParser {
       return fonts.length > 0 || themeFonts.length > 0 ? {
         ...story,
         theme: newTheme,
-        fonts: uniq([...themeFonts, ...fonts], 'name')
+        fonts: uniqBy([...themeFonts, ...fonts], 'name')
       } : story;
     }
     return fonts.length > 0 ? {
@@ -244,9 +243,9 @@ class FontsParser {
       const value = data[key];
       let font = null;
       let subFonts = null;
-      if (patternMatch && isObject$1(value) && FontsParser.valueIsFont(value)) {
+      if (patternMatch && isObject(value) && FontsParser.valueIsFont(value)) {
         font = value;
-      } else if (isObject$1(value) || isArray(value)) {
+      } else if (isObject(value) || isArray(value)) {
         subFonts = FontsParser.extractFontsWithPaths(value, patterns, path);
       }
       return subFonts !== null || font !== null ? [...currentFonts, ...(subFonts || []), ...(font !== null ? [font] : [])] : currentFonts;
@@ -259,7 +258,7 @@ class FormsManager extends DefinitionsManager {}
 class MediasParser {
   constructor({
     fieldsManager,
-    screensManager
+    screensManager = null
   }) {
     this.fieldsManager = fieldsManager;
     this.screensManager = screensManager;
@@ -286,7 +285,7 @@ class MediasParser {
       } = screen;
       const {
         fields = []
-      } = this.screensManager.getDefinition(type) || {};
+      } = this.screensManager?.getDefinition(type) || {};
       const fieldsPattern = this.getMediaFieldsPattern(fields);
       const {
         data: newScreen,
@@ -346,7 +345,7 @@ class MediasParser {
       } = screen;
       const {
         fields = []
-      } = this.screensManager.getDefinition(type) || {};
+      } = this.screensManager?.getDefinition(type) || {};
       const fieldsPattern = this.getMediaFieldsPattern(fields);
       return MediasParser.replacePathsWithMedias(screen, medias, fieldsPattern);
     }) : components;
@@ -405,9 +404,9 @@ class MediasParser {
       const value = data[key];
       let newValue;
       if (patternMatch) {
-        newValue = isObject$1(value) ? value : medias[value] || null;
+        newValue = isObject(value) ? value : medias[value] || null;
       } else {
-        newValue = isObject$1(value) || isArray(value) ? MediasParser.replacePathsWithMedias(value, medias, patterns, path) : value;
+        newValue = isObject(value) || isArray(value) ? MediasParser.replacePathsWithMedias(value, medias, patterns, path) : value;
       }
       return dataIsArray ? [...newData, newValue] : {
         ...newData,
@@ -433,11 +432,11 @@ class MediasParser {
       let newValue;
       let media = null;
       let subMedias = null;
-      if (patternMatch && isObject$1(value)) {
+      if (patternMatch && isObject(value)) {
         const mediaPath = MediasParser.getMediaPath(value);
         newValue = mediaPath !== null ? mediaPath : value;
         media = mediaPath !== null ? value : null;
-      } else if (isObject$1(value) || isArray(value)) {
+      } else if (isObject(value) || isArray(value)) {
         const subReturn = MediasParser.replaceMediasWithPaths(value, patterns, medias, path);
         newValue = subReturn.data;
         subMedias = subReturn.medias;
@@ -459,7 +458,7 @@ class MediasParser {
         }
       };
     }, {
-      data: null,
+      data: dataIsArray ? [] : {},
       medias
     });
   }
@@ -467,16 +466,6 @@ class MediasParser {
 
 /* eslint-disable no-console */
 class Tracking extends Tracking$1 {
-  constructor(opts = {}) {
-    super(opts);
-    const {
-      variables = null
-    } = this.options;
-    this.variables = null;
-    if (variables !== null) {
-      this.setVariables(variables);
-    }
-  }
   setVariables(variables) {
     this.variables = variables;
     if (variables !== null) {
@@ -499,10 +488,15 @@ class Tracking extends Tracking$1 {
     };
     this.push(data);
   }
-  trackEvent(category, action, label, {
-    value = null,
-    ...opts
-  } = {}) {
+
+  // The options can also be a value, to stay compatible with the base trackEvent signature
+  trackEvent(category, action, label, options = {}) {
+    const {
+      value = null,
+      ...opts
+    } = isObject(options) ? options : {
+      value: options
+    };
     const data = {
       ...opts,
       event: 'eventInteraction',

package/dist/utils.d.ts

@@ -1,6 +1,6 @@
 export { kebabCase as dashCase, pascalCase, snakeCase } from 'change-case';
-import { ElementType, ReactNode, ReactElement, ForwardedRef } from 'react';
-import { MessageDescriptor } from 'react-intl';
+import { ElementType, ComponentProps, ReactNode, ReactElement, ForwardedRef } from 'react';
+import { FormattedMessage, MessageDescriptor } from 'react-intl';
 
 interface CheckClickableOptions {
     maxParentDistance?: number;
@@ -26,11 +26,6 @@ declare function createUseEvent(eventsManager: EventsManager | null): (event: st
 /*! clipboard-copy. MIT License. Feross Aboukhadijeh <https://feross.org/opensource> */
 declare function copyToClipboard(text: string): Promise<void>;
 
-type ComponentMap = Record<string, ElementType | Record<string, unknown>>;
-declare function flattenComponents(components: ComponentMap | null, prefix?: string | null): Record<string, ElementType> | null;
-
-declare function formatDuration(timeInSeconds: number | string): string;
-
 /**
  * Core UI Types
  */
@@ -39,10 +34,22 @@ declare function formatDuration(timeInSeconds: number | string): string;
  * Internationalization message definition
  */
 type Message = MessageDescriptor;
+/**
+ * Values that can be interpolated in an internationalization message
+ * (the `values` prop of FormattedMessage)
+ */
+type MessageValues = NonNullable<ComponentProps<typeof FormattedMessage>['values']>;
+type MessageValue = MessageValues[string];
 /**
  * Label can be either a message object or any React node
  */
 type Label = Message | ReactNode;
+/**
+ * Map of components, can be nested by namespace (ex: { fields: { text: TextField } })
+ */
+interface ComponentsMap {
+    [name: string]: ElementType | ComponentsMap;
+}
 /**
  * Form control size
  */
@@ -106,8 +113,6 @@ interface Form {
     submitButtonLabel?: Label | null;
     [key: string]: unknown;
 }
-interface FormDefinition extends Form, Definition {
-}
 
 /**
  * Resource Types
@@ -120,6 +125,7 @@ interface FormDefinition extends Form, Definition {
 type TableColumn = string | Column;
 interface Column extends Record<string, unknown> {
     id?: string | null;
+    name?: string | null;
     label?: unknown;
     path?: string;
     valueKey?: string;
@@ -145,7 +151,7 @@ type ActionDefinition = string | Action;
 interface ResourceIntlValues {
     a_singular?: string;
     a_plural?: string;
-    [key: string]: unknown;
+    [key: string]: MessageValue;
 }
 /**
  * Internationalization configuration
@@ -173,13 +179,32 @@ interface ResourcePages {
     duplicate?: PageDefinition;
     [key: string]: PageDefinition | undefined;
 }
+/**
+ * Form definition of a resource (the id is optional, the form is identified by its key)
+ */
+interface ResourceForm extends Form {
+    id?: string;
+    component?: string | ElementType;
+}
 interface ResourceForms {
-    default: FormDefinition | null;
-    create: FormDefinition | null;
-    edit: FormDefinition | null;
-    delete: FormDefinition | null;
-    modal: FormDefinition | null;
-    [key: string]: FormDefinition | null;
+    default?: ResourceForm | null;
+    create?: ResourceForm | null;
+    edit?: ResourceForm | null;
+    delete?: ResourceForm | null;
+    modal?: ResourceForm | null;
+    [key: string]: ResourceForm | null | undefined;
+}
+/**
+ * Resource type (sub-type of a resource, ex: page types)
+ */
+interface ResourceType {
+    id?: string;
+    name?: string;
+    fields?: Field[];
+    settings?: {
+        canCreate?: boolean;
+        [key: string]: unknown;
+    };
 }
 interface Resource {
     id: string;
@@ -191,6 +216,7 @@ interface Resource {
     settings?: Record<string, unknown>;
     extraRoutes?: RouteDefinition[];
     pages?: ResourcePages;
+    types?: ResourceType[];
 }
 /**
  * Filter definition
@@ -201,6 +227,10 @@ interface Filter {
     [key: string]: unknown;
 }
 
+declare function flattenComponents(components: ComponentsMap | null, prefix?: string | null): Record<string, ElementType> | null;
+
+declare function formatDuration(timeInSeconds: number | string): string;
+
 declare function getColumnsWithFields(resource: Resource, columns: TableColumn[] | null): Column[];
 
 interface ComponentResult {
@@ -239,6 +269,8 @@ interface FieldWithSubFields extends Field {
     type?: string | null;
     fields?: Field[] | null;
     field?: Field | null;
+    settings?: Field[] | null;
+    itemsField?: Field | null;
     listItems?: boolean;
 }
 declare function getFieldFromPath(path: string | string[], fields: Field[], fieldManager: FieldManager): FieldWithSubFields | null;
@@ -259,6 +291,16 @@ declare function loadPackage<T = unknown>(name: string, loader: () => Promise<T>
 
 declare function mergeRefs<T>(...refs: Array<ForwardedRef<T> | null | undefined>): (value: T | null) => void;
 
+/**
+ * Parse a date-only value as a local date, ignoring its timezone.
+ *
+ * A date stored at midnight represents a calendar day, not an instant: converting it to the
+ * browser timezone would show the previous day west of the server timezone (ex: a date saved as
+ * 2026-10-01 00:00 UTC is 2026-09-30 20:00 in Montreal). Returns null when the value has a time,
+ * so the caller can parse it as an instant.
+ */
+declare function parseDateOnly(value: string | null | undefined): Date | null;
+
 declare function toggleSelectedItem(items: Item[] | null, item: Item, { multiple: multipleSelection }?: {
     multiple?: boolean;
 }): Item[] | null;
@@ -277,4 +319,4 @@ interface FieldWithValidation extends Field {
 }
 declare function validateFields(fields: FieldWithValidation[], value: Record<string, unknown> | null): boolean;
 
-export { checkClickable, convertStyleToString, copyToClipboard, createNullableOnChange, createUseEvent, flattenComponents, formatDuration, getColumnsWithFields, getComponent, getComponentFromName, getDefinitionFromId, getDisplayName, getFieldByName, getFieldFromPath, getFileName, getPathValue, getSelectOptions, isMessage, loadPackage, mergeRefs, selectItems, setValue as setFieldValue, slug, toggleSelectedItem, unselectItems, validateFields };
+export { checkClickable, convertStyleToString, copyToClipboard, createNullableOnChange, createUseEvent, flattenComponents, formatDuration, getColumnsWithFields, getComponent, getComponentFromName, getDefinitionFromId, getDisplayName, getFieldByName, getFieldFromPath, getFileName, getPathValue, getSelectOptions, isMessage, loadPackage, mergeRefs, parseDateOnly, selectItems, setValue as setFieldValue, slug, toggleSelectedItem, unselectItems, validateFields };

package/dist/utils.js

@@ -1,10 +1,9 @@
 import isNumber from 'lodash-es/isNumber';
-import { snakeCase } from 'snake-case';
 import isObject from 'lodash-es/isObject';
 import { useEffect, isValidElement } from 'react';
 import { isValidElementType } from 'react-is';
 import isString from 'lodash-es/isString';
-import { pascalCase, kebabCase, snakeCase as snakeCase$1 } from 'change-case';
+import { pascalCase, kebabCase, snakeCase } from 'change-case';
 export { kebabCase as dashCase, pascalCase, snakeCase } from 'change-case';
 import isFunction from 'lodash-es/isFunction';
 import isArray from 'lodash-es/isArray';
@@ -44,8 +43,17 @@ function checkClickable(el, options = {}, parentDistance = 1) {
   return false;
 }
 
+// Convert a camelCase style property (ex: backgroundColor) to its CSS kebab-case
+// name (ex: background-color). Custom properties (--foo) are kept as is.
+function toCssProperty(key) {
+  if (key.startsWith('--')) {
+    return key;
+  }
+  const property = key.replace(/[A-Z]/g, match => `-${match.toLowerCase()}`);
+  return property.startsWith('ms-') ? `-${property}` : property;
+}
 function convertStyleToString(style) {
-  return style !== null ? Object.keys(style).map(key => `${snakeCase(key)}:${isNumber(style[key]) ? `${style[key]}px` : style[key]};`).join('\n') : '';
+  return style !== null ? Object.keys(style).map(key => `${toCssProperty(key)}:${isNumber(style[key]) ? `${style[key]}px` : style[key]};`).join('\n') : '';
 }
 
 function createNullableOnChange(onChange = null) {
@@ -142,12 +150,15 @@ function flattenComponents(components, prefix = null) {
   if (components === null) {
     return null;
   }
-  return Object.keys(components).reduce((newMap, key) => isValidElementType(components[key]) ? {
-    ...newMap,
-    [prefix !== null ? `${prefix}.${key}` : key]: components[key]
-  } : {
-    ...newMap,
-    ...flattenComponents(components[key], key)
+  return Object.keys(components).reduce((newMap, key) => {
+    const path = prefix !== null ? `${prefix}.${key}` : key;
+    return isValidElementType(components[key]) ? {
+      ...newMap,
+      [path]: components[key]
+    } : {
+      ...newMap,
+      ...flattenComponents(components[key], path)
+    };
   }, {});
 }
 
@@ -275,6 +286,9 @@ function getFieldByName(fields, name) {
 }
 
 function getFieldFromPath(path, fields, fieldManager) {
+  const initialField = {
+    fields
+  };
   return (isArray(path) ? path : [path]).reduce((foundField, key) => {
     if (foundField === null) {
       return null;
@@ -298,9 +312,7 @@ function getFieldFromPath(path, fields, fieldManager) {
       };
     }
     return getFieldByName([...(fieldFields || []), ...(subFields || []), ...(settings || [])], key);
-  }, {
-    fields
-  });
+  }, initialField);
 }
 
 function getFileName(url = null) {
@@ -359,24 +371,24 @@ function loadPackage(name, loader) {
         loaders[name].resource = response;
         events.emit(`loaded:${name}`, response);
         return response;
+      }, error => {
+        // Remove the failed loader so a later call can retry
+        delete loaders[name];
+        throw error;
       }),
       loaded: false,
       resource: null
     };
   }
-  return new Promise(resolve => {
-    const {
-      loaded = false,
-      resource
-    } = loaders[name] || {};
-    if (loaded === true) {
-      resolve(resource);
-    } else {
-      events.once(`loaded:${name}`, response => {
-        resolve(response);
-      });
-    }
-  });
+  const {
+    loaded = false,
+    resource = null,
+    loader: currentLoader = null
+  } = loaders[name];
+  if (loaded === true) {
+    return Promise.resolve(resource);
+  }
+  return currentLoader;
 }
 
 function mergeRefs(...refs) {
@@ -391,6 +403,30 @@ function mergeRefs(...refs) {
   };
 }
 
+// A date without time (2026-10-01), or a date at midnight with or without a timezone
+// (2026-10-01T00:00:00-04:00, 2026-10-01T00:00:00.000000Z, 2026-10-01 00:00:00)
+const DATE_ONLY_PATTERN = /^(\d{4})-(\d{2})-(\d{2})(?:[T ]00:00(?::00(?:\.0+)?)?(?:Z|[+-]\d{2}:?\d{2})?)?$/;
+
+/**
+ * Parse a date-only value as a local date, ignoring its timezone.
+ *
+ * A date stored at midnight represents a calendar day, not an instant: converting it to the
+ * browser timezone would show the previous day west of the server timezone (ex: a date saved as
+ * 2026-10-01 00:00 UTC is 2026-09-30 20:00 in Montreal). Returns null when the value has a time,
+ * so the caller can parse it as an instant.
+ */
+function parseDateOnly(value) {
+  if (typeof value !== 'string') {
+    return null;
+  }
+  const match = DATE_ONLY_PATTERN.exec(value.trim());
+  if (match === null) {
+    return null;
+  }
+  const [, year, month, day] = match;
+  return new Date(parseInt(year, 10), parseInt(month, 10) - 1, parseInt(day, 10));
+}
+
 function toggleSelectedItem(items, item, {
   multiple: multipleSelection = false
 } = {}) {
@@ -441,8 +477,18 @@ function setValue(value, keyParts, fieldValue) {
   if (value !== null || fieldValue !== null) {
     if (isArray) {
       const index = parseInt(key, 10);
-      const arrayValue = value;
-      const newArrayValue = fieldValue !== null ? [...arrayValue.slice(0, index), keyParts.length > 0 ? setValue(arrayValue !== null ? arrayValue[index] || null : null, keyParts, fieldValue) : fieldValue, ...arrayValue.slice(index + 1)] : [...arrayValue.slice(0, index), ...arrayValue.slice(index + 1)];
+      const arrayValue = Array.isArray(value) ? value : [];
+      let newArrayValue;
+      if (fieldValue !== null) {
+        newArrayValue = [...arrayValue];
+        // Pad with null so an out-of-range index lands at the right position
+        while (newArrayValue.length < index) {
+          newArrayValue.push(null);
+        }
+        newArrayValue[index] = keyParts.length > 0 ? setValue(arrayValue[index] || null, keyParts, fieldValue) : fieldValue;
+      } else {
+        newArrayValue = [...arrayValue.slice(0, index), ...arrayValue.slice(index + 1)];
+      }
       return newArrayValue.length > 0 ? newArrayValue : null;
     }
     const objectValue = value;
@@ -459,7 +505,7 @@ function slug(str, separator = null) {
   if (separator === '-') {
     toSlug = kebabCase(str);
   } else {
-    toSlug = snakeCase$1(str);
+    toSlug = snakeCase(str);
   }
   return slugify(toSlug, {
     lower: true
@@ -472,11 +518,13 @@ function validateFields(fields, value) {
       if (field.type === 'fields' && field.fields) {
         return validateFields(field.fields, value);
       }
-      const val = value && field.name && value[field.name] ? value[field.name] : false;
-      return !(field.required && !val);
+      const val = value && field.name ? value[field.name] : null;
+      // Only null, undefined and empty strings are considered missing (0 and false are valid)
+      const isMissing = val === null || typeof val === 'undefined' || val === '';
+      return !(field.required && isMissing);
     }
     return acc;
   }, true);
 }
 
-export { checkClickable, convertStyleToString, copyToClipboard, createNullableOnChange, createUseEvent, flattenComponents, formatDuration, getColumnsWithFields, getComponent, getComponentFromName, getDefinitionFromId, getDisplayName, getFieldByName, getFieldFromPath, getFileName, getPathValue, getSelectOptions, isMessage, loadPackage, mergeRefs, selectItems, setValue as setFieldValue, slug, toggleSelectedItem, unselectItems, validateFields };
+export { checkClickable, convertStyleToString, copyToClipboard, createNullableOnChange, createUseEvent, flattenComponents, formatDuration, getColumnsWithFields, getComponent, getComponentFromName, getDefinitionFromId, getDisplayName, getFieldByName, getFieldFromPath, getFileName, getPathValue, getSelectOptions, isMessage, loadPackage, mergeRefs, parseDateOnly, selectItems, setValue as setFieldValue, slug, toggleSelectedItem, unselectItems, validateFields };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@panneau/core",
-    "version": "4.0.78",
+    "version": "4.1.0",
     "description": "",
     "keywords": [
         "javascript"
@@ -75,7 +75,7 @@
         "debug": "^4.3.4",
         "flat": "^6.0.1",
         "hoist-non-react-statics": "^3.3.2",
-        "lodash": "^4.17.21",
+        "lodash-es": "^4.17.21",
         "react-intl": "^6.0.0 || ^7.0.0 || ^8.0.0 || ^10.0.0",
         "react-is": "^19.2.5",
         "slugify": "^1.5.0",
@@ -96,5 +96,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "669f20a39ca9545acbe0f2279c6d1af23e43ae6e"
+    "gitHead": "8a6accc1aab59368bf546c83b9433dfe94ccf767"
 }