@panneau/core 4.1.1 → 5.0.0-alpha.0

package/dist/utils.js

@@ -1,557 +0,0 @@
-import isNumber from 'lodash-es/isNumber';
-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 } from 'change-case';
-export { kebabCase as dashCase, pascalCase, snakeCase } from 'change-case';
-import isFunction from 'lodash-es/isFunction';
-import isArray from 'lodash-es/isArray';
-import get from 'lodash-es/get';
-import capitalize from 'lodash-es/capitalize';
-import EventEmitter from 'wolfy87-eventemitter';
-import slugify from 'slugify';
-
-function checkClickable(el, options = {}, parentDistance = 1) {
-  const {
-    maxParentDistance = 5,
-    tags = ['BUTTON', 'A', 'INPUT', 'I', 'TEXTAREA']
-  } = options || {};
-  const {
-    tagName = null,
-    parentNode = null
-  } = el || {};
-  if (tagName === 'BODY') {
-    return false;
-  }
-
-  // Check if video is suspended
-  // if (
-  //     tagName === 'VIDEO' &&
-  //     typeof dataset.isSuspended !== 'undefined' &&
-  //     (dataset.isSuspended === 'true' || dataset.isSuspended === true)
-  // ) {
-  //     return true;
-  // }
-
-  if (tagName && tags.map(it => it.toLowerCase()).indexOf(tagName.toLowerCase()) !== -1) {
-    return true;
-  }
-  if (parentDistance < maxParentDistance) {
-    return checkClickable(parentNode, 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 => `${toCssProperty(key)}:${isNumber(style[key]) ? `${style[key]}px` : style[key]};`).join('\n') : '';
-}
-
-function createNullableOnChange(onChange = null) {
-  return function nullableOnChange(newValue) {
-    let nullableValue = newValue;
-    if (isObject(newValue)) {
-      const allNull = Object.keys(newValue).reduce((acc, key) => acc && newValue[key] === null, true);
-      if (allNull) {
-        nullableValue = null;
-      }
-    }
-    if (onChange !== null) {
-      onChange(nullableValue);
-    }
-  };
-}
-
-function createUseEvent(eventsManager) {
-  return function useEvent(event, callback, enabled = true) {
-    useEffect(() => {
-      if (enabled && eventsManager !== null) {
-        eventsManager.subscribe(event, callback);
-      }
-      return () => {
-        if (enabled && eventsManager !== null) {
-          eventsManager.unsubscribe(event, callback);
-        }
-      };
-    }, [eventsManager, event, callback, enabled]);
-  };
-}
-
-/*! clipboard-copy. MIT License. Feross Aboukhadijeh <https://feross.org/opensource> */
-
-// @note vendoring this: https://github.com/feross/clipboard-copy/blob/master/index.js
-// we might want to add that to the npm deps and just use it
-
-function makeError() {
-  return new DOMException('The request is not allowed', 'NotAllowedError');
-}
-async function copyClipboardApi(text) {
-  // Use the Async Clipboard API when available. Requires a secure browsing
-  // context (i.e. HTTPS)
-  if (!navigator.clipboard) {
-    throw makeError();
-  }
-  return navigator.clipboard.writeText(text);
-}
-async function copyExecCommand(text) {
-  // Put the text to copy into a <span>
-  const span = document.createElement('span');
-  span.textContent = text;
-
-  // Preserve consecutive spaces and newlines
-  span.style.whiteSpace = 'pre';
-  span.style.webkitUserSelect = 'auto';
-  span.style.userSelect = 'all';
-
-  // Add the <span> to the page
-  document.body.appendChild(span);
-
-  // Make a selection object representing the range of text selected by the user
-  const selection = window.getSelection();
-  const range = window.document.createRange();
-  selection?.removeAllRanges();
-  range.selectNode(span);
-  selection?.addRange(range);
-
-  // Copy text to the clipboard
-  let success = false;
-  try {
-    success = window.document.execCommand('copy');
-  } finally {
-    // Cleanup
-    selection?.removeAllRanges();
-    window.document.body.removeChild(span);
-  }
-  if (!success) throw makeError();
-}
-async function copyToClipboard(text) {
-  try {
-    await copyClipboardApi(text);
-  } catch (err) {
-    // ...Otherwise, use document.execCommand() fallback
-    try {
-      await copyExecCommand(text);
-    } catch (err2) {
-      throw err2 || err || makeError();
-    }
-  }
-}
-
-function flattenComponents(components, prefix = null) {
-  if (components === null) {
-    return null;
-  }
-  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)
-    };
-  }, {});
-}
-
-function formatDuration(timeInSeconds) {
-  const numberOfSeconds = parseInt(String(timeInSeconds), 10); // don't forget the second param
-  let hours = Math.floor(numberOfSeconds / 3600);
-  let minutes = Math.floor((numberOfSeconds - hours * 3600) / 60);
-  let seconds = numberOfSeconds - hours * 3600 - minutes * 60;
-  if (hours < 10) {
-    hours = `0${hours}`;
-  }
-  if (minutes < 10) {
-    minutes = `0${minutes}`;
-  }
-  if (seconds < 10) {
-    seconds = `0${seconds}`;
-  }
-  return `${hours}:${minutes}:${seconds}`;
-}
-
-function getComponent(component) {
-  const {
-    component: name = null,
-    ...props
-  } = isString(component) ? {
-    component
-  } : component || {};
-  return {
-    name,
-    props: Object.keys(props).length > 0 ? props : null
-  };
-}
-
-function getColumnFromField(field) {
-  if (field === null) {
-    return null;
-  }
-  const {
-    name,
-    components: {
-      display = null
-    } = {},
-    label
-  } = field;
-  const {
-    name: componentName = null,
-    props: componentProps = null
-  } = getComponent(display);
-  return {
-    ...componentProps,
-    id: name,
-    label,
-    valueKey: name,
-    component: componentName,
-    field
-  };
-}
-function getColumnsWithFields(resource, columns) {
-  const {
-    fields = []
-  } = resource;
-  const newColumns = columns !== null ? columns.map(column => {
-    const {
-      id: colId = null,
-      field: colField = null,
-      ...otherProps
-    } = isString(column) ? {
-      field: column
-    } : column;
-    const fieldName = colField || colId;
-    return {
-      ...(fieldName !== null ? getColumnFromField(fields.find(it => it.name === fieldName) || null) : null),
-      ...otherProps,
-      id: colId || (isString(column) ? column : null) || null
-    };
-  }).filter(it => it !== null) : [];
-  return newColumns;
-}
-
-function getComponentFromName(name = null, components = {}, defaultComponent = null) {
-  if (components === null || name === null) {
-    return !isString(defaultComponent) ? defaultComponent : null;
-  }
-  if (isObject(name) || isFunction(name)) {
-    return name;
-  }
-  const pascalName = pascalCase(name);
-  const pascalDefaultName = isString(defaultComponent) ? pascalCase(defaultComponent) : null;
-  const component = components[pascalName] || components[name] || (isString(pascalDefaultName) ? components[pascalDefaultName] : null) || (isString(defaultComponent) ? components[defaultComponent] : null) || defaultComponent;
-  if (!component) {
-    console.warn('Could not find component from name', name, pascalName, components);
-  }
-  return component;
-}
-
-function getDefinitionFromId(id = null, items = [], defaultObject = null) {
-  if (items === null || id === null || isArray(items) && items.length === 0) {
-    return defaultObject;
-  }
-  const pascalId = pascalCase(id);
-  return items.find(i => i.id === pascalId) || items.find(i => i.id === id) || defaultObject;
-}
-
-/**
- * Returns a message for each key of the definition that is not supported anymore,
- * with the key to use instead. Without it, these keys would be silently ignored.
- */
-function getDefinitionWarnings(definition) {
-  if (!isObject(definition)) {
-    return [];
-  }
-  const {
-    components = null,
-    intl = null,
-    theme = null,
-    resources = []
-  } = definition;
-  const {
-    values = null
-  } = intl || {};
-  return [...(components !== null ? ['`components` is not supported: give the custom components to the `components` prop of the container.'] : []), ...(values !== null ? ['`intl.values` is not supported: set the values of each resource in `resources[].intl.values`.'] : []), ...Object.keys(theme || {}).filter(key => key !== 'colorScheme').map(key => `\`theme.${key}\` is not supported: only \`theme.colorScheme\` is.`), ...(resources || []).reduce((warnings, resource) => {
-    const {
-      id,
-      components: resourceComponents = null,
-      columns = null
-    } = resource;
-    return [...warnings, ...(resourceComponents !== null ? [`\`resources[${id}].components\` is not supported: use \`index.component\`, \`forms.default.component\` and \`pages\`.`] : []), ...(columns !== null ? [`\`resources[${id}].columns\` is not supported: use \`index.columns\`.`] : [])];
-  }, [])];
-}
-
-function getDisplayName({
-  displayName = null,
-  name = null
-}) {
-  return displayName || name || 'Component';
-}
-
-function getFieldByName(fields, name) {
-  return fields.reduce((foundField, it) => {
-    if (foundField !== null) {
-      return foundField;
-    }
-    const {
-      name: fieldName = null,
-      fields: subFields = []
-    } = it;
-    if (name !== null && fieldName === name) {
-      return it;
-    }
-    return getFieldByName(subFields, name);
-  }, null);
-}
-
-function getFieldFromPath(path, fields, fieldManager) {
-  const initialField = {
-    fields
-  };
-  return (isArray(path) ? path : [path]).reduce((foundField, key) => {
-    if (foundField === null) {
-      return null;
-    }
-    const {
-      type = null,
-      fields: fieldFields = null,
-      field = null
-    } = foundField;
-    const finalType = field !== null ? field.type || type : type;
-    const {
-      fields: subFields = null,
-      settings = null,
-      itemsField = null
-    } = finalType !== null ? fieldManager.getDefinition(finalType) : foundField;
-    if (itemsField !== null && key.match(/^[0-9]+$/)) {
-      return {
-        ...itemsField,
-        name: (isArray(path) ? path : [path]).join('/'),
-        listItems: true
-      };
-    }
-    return getFieldByName([...(fieldFields || []), ...(subFields || []), ...(settings || [])], key);
-  }, initialField);
-}
-
-function getFileName(url = null) {
-  if (url === null || typeof url.match === 'undefined') {
-    return null;
-  }
-  const match = url.match(/([^/]+)(\?.*)?$/);
-  return match ? match[1] : url;
-}
-
-function getPathValue(it, path) {
-  const value = get(it, path, null);
-  return value !== null && isObject(value) ? Object.values(value).reduce((foundValue, val) => foundValue !== null ? foundValue : val, null) : value;
-}
-
-function getSelectOptions(options) {
-  return options.map(it => {
-    if (isObject(it)) {
-      const {
-        label = null,
-        value
-      } = it;
-      if (label === null) {
-        return {
-          value,
-          label: capitalize(`${value}`)
-        };
-      }
-      return {
-        value,
-        label: /*#__PURE__*/isValidElement(label) ? label : `${label}`
-      };
-    }
-    return {
-      value: it,
-      label: capitalize(`${it}`)
-    };
-  });
-}
-
-function isMessage(message) {
-  return isObject(message) && (typeof message.defaultMessage !== 'undefined' || typeof message.id !== 'undefined');
-}
-
-/**
- * Locale loader
- */
-const loaders = {};
-const events = new EventEmitter();
-function loadPackage(name, loader) {
-  if (typeof loaders[name] === 'undefined') {
-    loaders[name] = {
-      loader: loader().then(response => {
-        loaders[name].loader = null;
-        loaders[name].loaded = true;
-        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
-    };
-  }
-  const {
-    loaded = false,
-    resource = null,
-    loader: currentLoader = null
-  } = loaders[name];
-  if (loaded === true) {
-    return Promise.resolve(resource);
-  }
-  return currentLoader;
-}
-
-function mergeRefs(...refs) {
-  return value => {
-    refs.forEach(ref => {
-      if (typeof ref === 'function') {
-        ref(value);
-      } else if (ref !== null) {
-        ref.current = value;
-      }
-    });
-  };
-}
-
-// 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
-} = {}) {
-  const {
-    id: itemId = null
-  } = item || {};
-  const currentItem = (items || []).find(({
-    id
-  }) => id === itemId) || null;
-  if (currentItem !== null) {
-    return items.filter(({
-      id
-    }) => id !== itemId);
-  }
-  return multipleSelection ? [...(items || []), item] : [item];
-}
-function selectItems(items, itemsToSelect) {
-  const newItems = itemsToSelect.filter(item => {
-    const {
-      id: itemId = null
-    } = item || {};
-    const currentItem = (items || []).find(({
-      id
-    }) => id === itemId) || null;
-    return currentItem === null;
-  });
-  return newItems.length > 0 ? [...(items || []), ...newItems] : items;
-}
-function unselectItems(items, itemsToUnselect) {
-  const newItems = (items || []).filter(item => {
-    const {
-      id: itemId = null
-    } = item || {};
-    const currentItem = itemsToUnselect.find(({
-      id
-    }) => id === itemId) || null;
-    return currentItem === null;
-  });
-  return items !== null && newItems.length !== items.length ? newItems : items;
-}
-
-function setValue(value, keyParts, fieldValue) {
-  const key = keyParts.shift();
-  if (!key) {
-    return value;
-  }
-  const isArray = key.match(/^[0-9]+$/) !== null;
-  if (value !== null || fieldValue !== null) {
-    if (isArray) {
-      const index = parseInt(key, 10);
-      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;
-    return {
-      ...objectValue,
-      [key]: keyParts.length > 0 ? setValue(objectValue !== null ? objectValue[key] || null : null, keyParts, fieldValue) : fieldValue
-    };
-  }
-  return null;
-}
-
-function slug(str, separator = null) {
-  let toSlug;
-  if (separator === '-') {
-    toSlug = kebabCase(str);
-  } else {
-    toSlug = snakeCase(str);
-  }
-  return slugify(toSlug, {
-    lower: true
-  });
-}
-
-function validateFields(fields, value) {
-  return fields.reduce((acc, field) => {
-    if (acc === true) {
-      if (field.type === 'fields' && field.fields) {
-        return validateFields(field.fields, value);
-      }
-      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, getDefinitionWarnings, getDisplayName, getFieldByName, getFieldFromPath, getFileName, getPathValue, getSelectOptions, isMessage, loadPackage, mergeRefs, parseDateOnly, selectItems, setValue as setFieldValue, slug, toggleSelectedItem, unselectItems, validateFields };