@panneau/core 4.0.8 → 4.0.14

package/dist/hooks.d.ts

@@ -0,0 +1,362 @@
+import { Dayjs } from 'dayjs';
+import { ReactNode, SubmitEvent, RefObject } from 'react';
+
+interface UseAnimationFrameOptions {
+    disabled?: boolean;
+}
+declare function useAnimationFrame(onFrame: (progress: number) => void, { disabled }?: UseAnimationFrameOptions): void;
+
+interface UseFormattedDateOptions {
+    format?: Intl.DateTimeFormatOptions | null;
+    showToday?: boolean;
+}
+interface UseFormattedTimeOptions {
+    format?: Intl.DateTimeFormatOptions | null;
+    showNow?: boolean;
+    timeGap?: number;
+}
+declare const useFormattedDate: ({ format, showToday, }?: UseFormattedDateOptions) => ((date: string | Date | Dayjs) => string);
+declare const useFormattedTime: ({ format, showNow, timeGap, }?: UseFormattedTimeOptions) => ((date: string | Date | Dayjs) => string);
+
+declare const useDocumentEvent: (event: string, callback: (...args: unknown[]) => void, enabled?: boolean) => void;
+
+/**
+ * Form Types
+ * TypeScript interfaces for form-related components
+ */
+
+/**
+ * Field definition
+ */
+interface Field$1 {
+    name?: string;
+    type?: string;
+    component?: string;
+    label?: ReactNode;
+}
+
+/**
+ * Resource Types
+ * TypeScript interfaces for resources, items, users, media, and other entities
+ */
+
+interface ResourceIntlValues {
+    a_singular?: string;
+    a_plural?: string;
+    [key: string]: unknown;
+}
+/**
+ * Internationalization configuration
+ */
+interface ResourceIntl {
+    messages?: Record<string, string>;
+    values?: ResourceIntlValues;
+}
+/**
+ * Resource definition
+ */
+interface Resource {
+    id: string;
+    name: string;
+    intl?: ResourceIntl;
+    fields?: Field$1[];
+    forms?: Record<string, unknown>;
+    shows_in_navbar?: boolean;
+    settings?: Record<string, unknown>;
+}
+
+type FieldInput = string | Field$1;
+interface FieldErrors {
+    [key: string]: string[] | FieldErrors;
+}
+interface FieldValue {
+    [key: string]: unknown;
+}
+interface ProcessedField extends Field$1 {
+    name: string | null;
+    component: string | null;
+    value: unknown;
+    errors: string[] | null;
+    onChange: (fieldValue: unknown) => void;
+    fields?: ProcessedField[] | null;
+}
+interface RequestState {
+    success: boolean;
+    loading: boolean;
+    error: boolean;
+}
+interface UseFormOptions {
+    fields?: FieldInput[];
+    action?: string | null;
+    postForm?: ((action: string, data: Record<string, unknown>) => Promise<unknown>) | null;
+    initialErrors?: FieldErrors | null;
+    errors?: FieldErrors | null;
+    setErrors?: ((errors: FieldErrors | null) => void) | null;
+    initialGeneralError?: string | null;
+    generalError?: string | null;
+    setGeneralError?: ((error: string | null) => void) | null;
+    initialValue?: FieldValue | null;
+    value?: FieldValue | null;
+    setValue?: ((value: FieldValue) => void) | null;
+    withoutDefault?: boolean;
+    withoutPropagation?: boolean;
+    onComplete?: ((response: unknown) => void) | null;
+    onError?: ((error: Error) => void) | null;
+    locales?: string[];
+}
+interface UseFormReturn extends RequestState {
+    value: FieldValue | null;
+    setValue: (value: FieldValue) => void;
+    csrfToken: string | null;
+    submit: (submitValue?: FieldValue | null) => void;
+    onSubmit: (e: SubmitEvent) => void;
+    status: 'loading' | 'success' | 'error' | null;
+    response: unknown;
+    fields: ProcessedField[];
+    errors: FieldErrors | null;
+    generalError: string | null;
+}
+declare const useForm: (opts?: UseFormOptions) => UseFormReturn;
+
+interface UseIsVisibleOptions {
+    rootMargin?: string;
+    threshold?: number;
+    persist?: boolean;
+}
+interface UseIsVisibleResult {
+    ref: RefObject<HTMLElement>;
+    visible: boolean;
+}
+declare function useIsVisible({ rootMargin, threshold, persist, }?: UseIsVisibleOptions): UseIsVisibleResult;
+
+declare const KEYCODES: {
+    ARROW_LEFT: number;
+    ARROW_UP: number;
+    ARROW_RIGHT: number;
+    ARROW_DOWN: number;
+    ESCAPE: number;
+    SPACE: number;
+};
+interface UseKeyboardKeysOptions {
+    eventName?: string;
+}
+declare function useKeyboardKeys(keys?: Record<number, (e: KeyboardEvent) => void>, { eventName }?: UseKeyboardKeysOptions): void;
+
+interface FontConfig {
+    type?: 'google' | 'custom' | 'system';
+    name: string;
+}
+declare const useLoadedFonts: (fonts: (string | FontConfig)[]) => {
+    loaded: boolean;
+};
+
+interface UseMediaApiOptions {
+    url?: string | null;
+    initialMuted?: boolean;
+    onTimeUpdate?: ((time: number) => void) | null;
+    onProgressStep?: ((step: number) => void) | null;
+    onDurationChanged?: ((duration: number) => void) | null;
+    onVolumeChanged?: ((muted: boolean, volume: number) => void) | null;
+    onPlay?: ((opts: {
+        initial: boolean;
+    }) => void) | null;
+    onPause?: ((opts: {
+        midway: boolean;
+    }) => void) | null;
+    onEnded?: (() => void) | null;
+    onSeeked?: ((time: number) => void) | null;
+    onLoadStart?: (() => void) | null;
+    onCanPlayThough?: (() => void) | null;
+}
+interface UseMediaApiReturn {
+    ref: RefObject<HTMLMediaElement>;
+    play: () => void;
+    pause: () => void;
+    togglePlay: () => void;
+    stop: () => void;
+    seek: (time: number) => void;
+    mute: () => void;
+    unMute: () => void;
+    toggleMute: () => void;
+    muted: boolean;
+    currentTime: number | null;
+    duration: number | null;
+    playing: boolean;
+    paused: boolean;
+    ready: boolean;
+}
+declare const useMediaApi: ({ url, initialMuted, onTimeUpdate, onProgressStep, onDurationChanged, onVolumeChanged, onPlay, onPause, onEnded, onSeeked, onLoadStart, onCanPlayThough, }?: UseMediaApiOptions) => UseMediaApiReturn;
+
+interface Manager {
+    getDefinition: (type: string) => Record<string, unknown> | null;
+}
+interface MediasParserOptions {
+    fieldsManager: Manager;
+    screensManager: Manager;
+}
+interface Media$1 {
+    id?: string | null;
+    [key: string]: unknown;
+}
+interface Field {
+    id?: string | null;
+    name?: string | null;
+    type?: string | null;
+    media?: boolean;
+    fields?: Field[];
+    itemsField?: Field | null;
+    settings?: Field[];
+    [key: string]: unknown;
+}
+interface Screen$1 {
+    type: string;
+    [key: string]: unknown;
+}
+interface Story {
+    theme?: Story | null;
+    components?: Screen$1[];
+    medias?: Record<string, Media$1> | null;
+    [key: string]: unknown;
+}
+declare class MediasParser {
+    fieldsManager: Manager;
+    screensManager: Manager;
+    constructor({ fieldsManager, screensManager }: MediasParserOptions);
+    toPath(story: Story | null): Story | null;
+    fromPath(story: Story | null, defaultMedias?: Record<string, Media$1> | null): Story | null;
+    getMediaFieldsPattern(fields: Field[], namePrefix?: string | null): RegExp[];
+    static fieldIsMedia({ media }: Field): boolean;
+    static fieldIsFontFamily({ id }: Field): boolean;
+    static replacePathsWithMedias(data: unknown, medias: Record<string, Media$1>, patterns: RegExp[], keyPrefix?: string | null): unknown;
+    static getMediaPath({ id }: Media$1): string | null;
+    static replaceMediasWithPaths(data: unknown, patterns: RegExp[], medias?: Record<string, Media$1> | null, keyPrefix?: string | null): {
+        data: unknown;
+        medias: Record<string, Media$1> | null;
+    };
+}
+
+interface UseMediasParserReturn {
+    toPath: (story: unknown) => string;
+    fromPath: (story: unknown) => unknown;
+    parser: MediasParser;
+}
+declare const useMediasParser: () => UseMediasParserReturn;
+
+type ObserverConstructor<T> = (new (callback: (entries: T[]) => void, options?: Record<string, unknown>) => {
+    observe: (element: Element) => void;
+    unobserve?: (element: Element) => void;
+    disconnect: () => void;
+}) | null;
+interface ObserverWrapper<T> {
+    subscribe: (element: Element, callback: (entry: T) => void) => void;
+    unsubscribe: (element: Element, callback?: ((entry: T) => void) | null) => void;
+    observer: ReturnType<NonNullable<ObserverConstructor<T>>>;
+}
+interface ObserverOptions {
+    root?: Element | null;
+    rootMargin?: string | null;
+    threshold?: number | number[] | null;
+    disabled?: boolean;
+}
+declare const getObserver: <T>(Observer: ObserverConstructor<T>, options?: ObserverOptions) => ObserverWrapper<T>;
+interface UseObserverReturn<T> {
+    ref: RefObject<Element>;
+    entry: T;
+}
+declare const useObserver: <T>(Observer: ObserverConstructor<T>, opts?: ObserverOptions, initialEntry?: T) => UseObserverReturn<T>;
+interface IntersectionObserverEntry {
+    target: Element | null;
+    time: number | null;
+    isVisible: boolean;
+    isIntersecting: boolean;
+    intersectionRatio: number;
+    intersectionRect: DOMRectReadOnly | null;
+    boundingClientRect: DOMRectReadOnly | null;
+    rootBounds: DOMRectReadOnly | null;
+}
+interface UseIntersectionObserverOptions {
+    root?: Element | null;
+    rootMargin?: string;
+    threshold?: number | number[];
+    disabled?: boolean;
+}
+declare const useIntersectionObserver: ({ root, rootMargin, threshold, disabled, }?: UseIntersectionObserverOptions) => UseObserverReturn<IntersectionObserverEntry>;
+/**
+ * Resize Observer
+ */
+interface ResizeObserverEntry {
+    target: Element | null;
+    contentRect: DOMRectReadOnly | null;
+    contentBoxSize: ReadonlyArray<ResizeObserverSize> | null;
+    borderBoxSize: ReadonlyArray<ResizeObserverSize> | null;
+}
+interface UseResizeObserverOptions {
+    disabled?: boolean;
+}
+declare const useResizeObserver: ({ disabled, }?: UseResizeObserverOptions) => UseObserverReturn<ResizeObserverEntry>;
+
+interface ResourceType {
+    id?: string | null;
+    name?: string | null;
+}
+interface ResourceWithTypes extends Resource {
+    types?: ResourceType[];
+    settings?: {
+        hideTypeNames?: boolean;
+    };
+}
+declare const useResourceTypeName: (resource: ResourceWithTypes | null, type?: string | null) => string | null;
+
+type ResourceUrlGenerator = (routeResourceId: string | Resource, routeName?: string | Record<string, unknown> | null, params?: Record<string, unknown> | null) => string | null;
+declare const useResourceUrlGenerator: (resourceId?: string | Resource | null) => ResourceUrlGenerator;
+
+interface QueryParams {
+    page?: number;
+    count?: number;
+    [key: string]: unknown;
+}
+interface UseQueryReturn {
+    query: QueryParams | null;
+    onPageChange: (newPage: number) => void;
+    onQueryChange: (newQuery: QueryParams | null) => void;
+    onQueryReset: () => void;
+}
+declare const useQuery: (initialBaseQuery?: QueryParams | null, paginated?: boolean) => UseQueryReturn;
+
+interface Screen {
+    name: string;
+    mediaQuery?: string | null;
+}
+interface Media {
+    type: string;
+    width: string;
+    height: string;
+}
+interface UseScreenSizeOptions {
+    width?: number | null;
+    height?: number | null;
+    landscape?: boolean;
+    screens?: Screen[];
+    mediaType?: string;
+    media?: Media | null;
+}
+interface ScreenSize {
+    screen: string | null;
+    screens: string[];
+    width: number | null;
+    height: number | null;
+    landscape: boolean;
+}
+interface UseScreenSizeFromElementOptions extends Omit<UseScreenSizeOptions, 'landscape'> {
+    withoutMaxSize?: boolean;
+}
+interface UseScreenSizeFromElementReturn {
+    ref: RefObject<Element>;
+    screenSize: ScreenSize;
+}
+declare const useScreenSizeFromElement: ({ width, height, ...opts }?: UseScreenSizeFromElementOptions) => UseScreenSizeFromElementReturn;
+declare const useScreenSizeFromWindow: (opts?: UseScreenSizeOptions) => ScreenSize;
+
+declare const useWindowEvent: (event: string, callback: (...args: unknown[]) => void, enabled?: boolean) => void;
+
+export { KEYCODES, getObserver, useAnimationFrame, useDocumentEvent, useForm, useFormattedDate, useFormattedTime, useIntersectionObserver, useIsVisible, useKeyboardKeys, useLoadedFonts, useMediaApi, useMediasParser, useObserver, useQuery, useResizeObserver, useResourceTypeName, useResourceUrlGenerator, useScreenSizeFromElement, useScreenSizeFromWindow, useWindowEvent };

package/{es → dist}/hooks.js

@@ -1,188 +1,21 @@
-import get from 'lodash-es/get';
-import isArray from 'lodash-es/isArray';
-import { useMemo, useRef, useEffect, useCallback, useState } from 'react';
-import _objectSpread from '@babel/runtime/helpers/objectSpread2';
-import isObject from 'lodash-es/isObject';
-import isString from 'lodash-es/isString';
+import { useRef, useEffect, useCallback, useState, useMemo } from 'react';
 import { EventsManager, MediasParser } from '@panneau/core';
 import { createUseEvent, loadPackage } from '@panneau/core/utils';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { getCsrfToken, postJSON, getCSRFHeaders } from '@folklore/fetch';
+import get from 'lodash/get';
+import isArray from 'lodash/isArray';
+import isObject from 'lodash/isObject';
+import isString from 'lodash/isString';
 import { useFieldsManager, usePanneauResources, useResource, useUrlGenerator } from '@panneau/core/contexts';
 import dayjs from 'dayjs';
 import { useIntl } from 'react-intl';
 import { match } from 'css-mediaquery';
 
-function useActionProps(action, value) {
-  var labelPath = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
-  var values = useMemo(function () {
-    if (value === null) {
-      return null;
-    }
-    if (isArray(value)) {
-      return value;
-    }
-    return value || null;
-  }, [value]);
-  var ids = useMemo(function () {
-    if (value === null) {
-      return null;
-    }
-    if (isArray(value)) {
-      return value.map(function () {
-        var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-          _ref$id = _ref.id,
-          id = _ref$id === void 0 ? null : _ref$id;
-        return id;
-      }).filter(function (id) {
-        return id !== null;
-      });
-    }
-    return value !== null && typeof value.id !== 'undefined' ? [value.id] : null;
-  }, [value]);
-  var idKeys = useMemo(function () {
-    return (ids || []).map(function (id) {
-      return "".concat(id);
-    }).join('-');
-  }, [ids]);
-  var idLabels = useMemo(function () {
-    return isArray(values) ? values.map(function () {
-      var it = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
-      return "#".concat(get(it, 'id', '')).concat(labelPath !== null ? " ".concat(get(it, labelPath, '')) : '');
-    }).join(', ') : get(values, 'id', 'no-value');
-  }, [ids]);
-  var modalKey = useMemo(function () {
-    return "".concat(action, "-").concat(idKeys);
-  }, [idKeys]);
-  return {
-    ids: ids,
-    idKeys: idKeys,
-    idLabels: idLabels,
-    modalKey: modalKey
-  };
-}
-
-// For backwards compatibility with the old actions element
-
-function useActions() {
-  var item = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
-  var actions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
-  var urlGenerator = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
-  var _ref = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {},
-    _ref$iconsOnly = _ref.iconsOnly,
-    iconsOnly = _ref$iconsOnly === void 0 ? true : _ref$iconsOnly,
-    _ref$showLabel = _ref.showLabel,
-    showLabel = _ref$showLabel === void 0 ? null : _ref$showLabel,
-    _ref$editLabel = _ref.editLabel,
-    editLabel = _ref$editLabel === void 0 ? null : _ref$editLabel,
-    _ref$deleteLabel = _ref.deleteLabel,
-    deleteLabel = _ref$deleteLabel === void 0 ? null : _ref$deleteLabel,
-    _ref$onClickShow = _ref.onClickShow,
-    onClickShow = _ref$onClickShow === void 0 ? null : _ref$onClickShow,
-    _ref$onClickEdit = _ref.onClickEdit,
-    onClickEdit = _ref$onClickEdit === void 0 ? null : _ref$onClickEdit,
-    _ref$onClickDelete = _ref.onClickDelete,
-    onClickDelete = _ref$onClickDelete === void 0 ? null : _ref$onClickDelete,
-    _ref$getShowPropsFrom = _ref.getShowPropsFromItem,
-    getShowPropsFromItem = _ref$getShowPropsFrom === void 0 ? null : _ref$getShowPropsFrom,
-    _ref$getEditPropsFrom = _ref.getEditPropsFromItem,
-    getEditPropsFromItem = _ref$getEditPropsFrom === void 0 ? null : _ref$getEditPropsFrom,
-    _ref$getDeletePropsFr = _ref.getDeletePropsFromItem,
-    getDeletePropsFromItem = _ref$getDeletePropsFr === void 0 ? null : _ref$getDeletePropsFr,
-    _ref$showUrl = _ref.showUrl,
-    showUrl = _ref$showUrl === void 0 ? null : _ref$showUrl,
-    _ref$withoutItemShowU = _ref.withoutItemShowUrl,
-    withoutItemShowUrl = _ref$withoutItemShowU === void 0 ? null : _ref$withoutItemShowU,
-    _ref$preferEditModal = _ref.preferEditModal,
-    preferEditModal = _ref$preferEditModal === void 0 ? false : _ref$preferEditModal,
-    _ref$preferDeleteModa = _ref.preferDeleteModal,
-    preferDeleteModal = _ref$preferDeleteModa === void 0 ? false : _ref$preferDeleteModa,
-    _ref$hasDuplicateRout = _ref.hasDuplicateRoute,
-    hasDuplicateRoute = _ref$hasDuplicateRout === void 0 ? false : _ref$hasDuplicateRout;
-  var _ref2 = item || {},
-    id = _ref2.id,
-    _ref2$url = _ref2.url,
-    url = _ref2$url === void 0 ? null : _ref2$url;
-  var hasCustomShowUrl = showUrl !== null || url !== null;
-  return (actions || []).map(function (action) {
-    if (isString(action)) {
-      switch (action) {
-        case 'show':
-          return _objectSpread({
-            id: 'show',
-            component: 'show',
-            label: iconsOnly ? null : showLabel,
-            icon: iconsOnly ? 'eye' : null,
-            href: urlGenerator !== null && (!hasCustomShowUrl || withoutItemShowUrl) ? urlGenerator('show', {
-              id: id
-            }) || null : showUrl || url,
-            external: hasCustomShowUrl,
-            theme: 'info',
-            target: '_blank',
-            onClick: onClickShow
-          }, getShowPropsFromItem !== null ? getShowPropsFromItem(item) : null);
-        case 'edit':
-          return _objectSpread({
-            id: 'edit',
-            component: 'edit',
-            label: iconsOnly ? null : editLabel,
-            icon: iconsOnly ? 'pencil-square' : null,
-            href: urlGenerator !== null && !preferEditModal ? urlGenerator('edit', {
-              id: id
-            }) || null : null,
-            theme: 'primary',
-            onClick: onClickEdit
-          }, getEditPropsFromItem !== null ? getEditPropsFromItem(item) : null);
-        case 'duplicate':
-          return {
-            id: 'duplicate',
-            component: 'duplicate',
-            label: null,
-            href: urlGenerator !== null && hasDuplicateRoute ? urlGenerator('duplicate', {
-              id: id
-            }) || null : null
-          };
-        case 'restore':
-          return {
-            id: 'restore',
-            component: 'restore',
-            label: null
-          };
-        case 'delete':
-          return _objectSpread({
-            id: 'delete',
-            component: 'delete',
-            label: iconsOnly ? null : deleteLabel,
-            icon: iconsOnly ? 'trash3' : null,
-            href: urlGenerator !== null && !preferDeleteModal ? urlGenerator('delete', {
-              id: id
-            }) || null : null,
-            theme: 'danger',
-            onClick: onClickDelete,
-            endpoint: urlGenerator !== null && preferDeleteModal ? urlGenerator('delete', {
-              id: id
-            }) || null : null,
-            withConfirmation: preferDeleteModal
-          }, getDeletePropsFromItem !== null ? getDeletePropsFromItem(item) : null);
-      }
-    }
-    if (isObject(action)) {
-      var _ref3 = action || {},
-        _ref3$itemLinkProp = _ref3.itemLinkProp,
-        itemLinkProp = _ref3$itemLinkProp === void 0 ? null : _ref3$itemLinkProp;
-      return _objectSpread(_objectSpread({}, action), itemLinkProp !== null && isObject(item) && typeof item[itemLinkProp] !== 'undefined' ? {
-        href: item[itemLinkProp]
-      } : null);
-    }
-    return action;
-  }).filter(function (action) {
-    return action !== null;
-  });
-}
-
 function useAnimationFrame(onFrame) {
   var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
     _ref$disabled = _ref.disabled,
@@ -1310,4 +1143,4 @@ var useScreenSizeFromWindow = function useScreenSizeFromWindow() {
 var eventsManager = typeof window !== 'undefined' ? new EventsManager(window) : null;
 var useWindowEvent = createUseEvent(eventsManager);
 
-export { KEYCODES, getObserver, useActionProps, useActions, useAnimationFrame, useDocumentEvent, useForm, useFormattedDate, useFormattedTime, useIntersectionObserver, useIsVisible, useKeyboardKeys, useLoadedFonts, useMediaApi, useMediasParser, useObserver, useQuery, useResizeObserver, useResourceTypeName, useResourceUrlGenerator, useScreenSizeFromElement, useScreenSizeFromWindow, useWindowEvent };
+export { KEYCODES, getObserver, useAnimationFrame, useDocumentEvent, useForm, useFormattedDate, useFormattedTime, useIntersectionObserver, useIsVisible, useKeyboardKeys, useLoadedFonts, useMediaApi, useMediasParser, useObserver, useQuery, useResizeObserver, useResourceTypeName, useResourceUrlGenerator, useScreenSizeFromElement, useScreenSizeFromWindow, useWindowEvent };