@contentful/field-editor-shared 1.2.0 → 1.3.1

package/dist/esm/FieldConnector.test.js

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { createFakeFieldAPI } from '@contentful/field-editor-test-utils';
+import { render } from '@testing-library/react';
+import noop from 'lodash/noop';
+import { FieldConnector } from './FieldConnector';
+it('does not rerender with outdated value after calling setValue', ()=>{
+    function getChild() {
+        return props.children.mock.calls[props.children.mock.calls.length - 1][0];
+    }
+    const onSchemaErrorsChanged = jest.fn();
+    const [field] = createFakeFieldAPI((field)=>{
+        return {
+            ...field,
+            setValue: ()=>new Promise(noop),
+            onSchemaErrorsChanged
+        };
+    }, 'initial value');
+    const props = {
+        isInitiallyDisabled: false,
+        children: jest.fn().mockImplementation(()=>null),
+        field,
+        throttle: 0
+    };
+    render(React.createElement(FieldConnector, props));
+    let child = getChild();
+    expect(child.value).toBe('initial value');
+    const initialRenderCount = props.children.mock.calls.length;
+    child.setValue('new value');
+    onSchemaErrorsChanged.mock.calls.forEach(([cb])=>cb([]));
+    child = getChild();
+    expect(child.value).toBe('new value');
+    expect(props.children.mock.calls.length).toBeGreaterThan(initialRenderCount);
+});

package/dist/esm/ModalDialogLauncher.js

@@ -0,0 +1,67 @@
+import * as React from 'react';
+import ReactDOM from 'react-dom';
+import { Modal, ModalHeader } from '@contentful/f36-components';
+import isNumber from 'lodash/isNumber';
+export function open(componentRenderer) {
+    let rootDom = null;
+    const getRoot = ()=>{
+        if (rootDom === null) {
+            rootDom = document.createElement('div');
+            rootDom.setAttribute('id', 'field-editor-modal-root');
+            document.body.appendChild(rootDom);
+        }
+        return rootDom;
+    };
+    return new Promise((resolve)=>{
+        let currentConfig = {
+            onClose,
+            isShown: true
+        };
+        function render({ onClose , isShown  }) {
+            ReactDOM.render(componentRenderer({
+                onClose,
+                isShown
+            }), getRoot());
+        }
+        function onClose(...args) {
+            currentConfig = {
+                ...currentConfig,
+                isShown: false
+            };
+            render(currentConfig);
+            resolve(...args);
+            getRoot().remove();
+        }
+        render(currentConfig);
+    });
+}
+export function openDialog(options, Component) {
+    const key = Date.now();
+    const size = isNumber(options.width) ? `${options.width}px` : options.width;
+    return open(({ isShown , onClose  })=>{
+        const onCloseHandler = ()=>onClose();
+        return React.createElement(Modal, {
+            key: key,
+            shouldCloseOnOverlayClick: options.shouldCloseOnOverlayClick || false,
+            shouldCloseOnEscapePress: options.shouldCloseOnEscapePress || false,
+            allowHeightOverflow: options.allowHeightOverflow || false,
+            position: options.position || 'center',
+            isShown: isShown,
+            onClose: onCloseHandler,
+            size: size || '700px'
+        }, ()=>React.createElement(React.Fragment, null, options.title && React.createElement(ModalHeader, {
+                testId: "dialog-title",
+                title: options.title,
+                onClose: onCloseHandler
+            }), React.createElement("div", {
+                style: {
+                    minHeight: options.minHeight || 'auto'
+                }
+            }, React.createElement(Component, {
+                onClose: onClose
+            }))));
+    });
+}
+export default {
+    openDialog
+};

package/dist/esm/PredefinedValuesError.js

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { Note } from '@contentful/f36-note';
+export function PredefinedValuesError() {
+    return React.createElement(Note, {
+        variant: "warning",
+        testId: "predefined-values-warning"
+    }, "The widget failed to initialize. You can fix the problem by providing predefined values under the validations tab in the field settings.");
+}

package/dist/esm/index.js

@@ -0,0 +1,14 @@
+export { AccessAPI, AppConfigAPI, BaseExtensionSDK, ContentType, DialogsAPI, EntryAPI, EntryFieldAPI, FieldAPI, FieldExtensionSDK, IdsAPI, LocalesAPI, LocationAPI, NavigatorAPI, NotifierAPI, OpenCustomWidgetOptions, ParametersAPI, SpaceAPI, WindowAPI } from '@contentful/app-sdk';
+export { CharCounter } from './CharCounter';
+export { CharValidation } from './CharValidation';
+export { FieldConnector } from './FieldConnector';
+export { PredefinedValuesError } from './PredefinedValuesError';
+export { Asset, Entry, File } from './typesEntity';
+export { isValidImage } from './utils/isValidImage';
+export { shortenStorageUnit, toLocaleString } from './utils/shortenStorageUnit';
+export { ModalDialogLauncher };
+export { entityHelpers };
+export { ConstraintsUtils };
+import * as ModalDialogLauncher from './ModalDialogLauncher';
+import * as ConstraintsUtils from './utils/constraints';
+import * as entityHelpers from './utils/entityHelpers';

package/dist/esm/types.js

@@ -0,0 +1 @@
+export { };

package/dist/esm/typesEntity.js

@@ -0,0 +1 @@
+export { BaseExtensionSDK, ContentType, ContentTypeField, Link, Entry, Asset } from '@contentful/app-sdk';

package/dist/esm/utils/constraints.js

@@ -0,0 +1,40 @@
+import isNumber from 'lodash/isNumber';
+export function fromFieldValidations(validations = [], fieldType) {
+    const sizeValidation = validations.find((v)=>'size' in v);
+    const size = sizeValidation && sizeValidation.size || {};
+    const min = size.min;
+    const max = size.max;
+    if (isNumber(min) && isNumber(max)) {
+        return {
+            type: 'min-max',
+            min,
+            max
+        };
+    } else if (isNumber(min)) {
+        return {
+            type: 'min',
+            min
+        };
+    } else if (isNumber(max)) {
+        return {
+            type: 'max',
+            max
+        };
+    } else {
+        return {
+            type: 'max',
+            max: fieldType === 'Symbol' ? 256 : 50000
+        };
+    }
+}
+export function makeChecker(constraint) {
+    return function checkConstraint(length) {
+        if (constraint.type === 'max') {
+            return length <= constraint.max;
+        } else if (constraint.type === 'min') {
+            return length >= constraint.min;
+        } else {
+            return length >= constraint.min && length <= constraint.max;
+        }
+    };
+}

package/dist/esm/utils/entityHelpers.js

@@ -0,0 +1,170 @@
+import get from 'lodash/get';
+import isObject from 'lodash/isObject';
+import isString from 'lodash/isString';
+function titleOrDefault(title, defaultTitle) {
+    if (!isString(title)) {
+        return defaultTitle;
+    }
+    if (title) {
+        const trimmedTitle = title.trim();
+        if (trimmedTitle.length === 0) {
+            return defaultTitle;
+        }
+        return trimmedTitle;
+    }
+    return defaultTitle;
+}
+export function getFieldValue({ entity , fieldId , localeCode , defaultLocaleCode  }) {
+    const values = get(entity, [
+        'fields',
+        fieldId
+    ]);
+    if (!isObject(values)) {
+        return;
+    }
+    const firstLocaleCode = Object.keys(values)[0];
+    return values[localeCode] || values[defaultLocaleCode] || values[firstLocaleCode];
+}
+export function getAssetTitle({ asset , localeCode , defaultLocaleCode , defaultTitle  }) {
+    const title = getFieldValue({
+        entity: {
+            fields: {
+                title: asset.fields?.title
+            }
+        },
+        fieldId: 'title',
+        localeCode,
+        defaultLocaleCode
+    });
+    return titleOrDefault(title, defaultTitle);
+}
+export const isAssetField = (field)=>field.type === 'Link' && field.linkType === 'Asset';
+export function isDisplayField({ field , contentType  }) {
+    return field.id === contentType.displayField;
+}
+export function isDescriptionField({ field , contentType  }) {
+    const isTextField = (field)=>[
+            'Symbol',
+            'Text'
+        ].includes(field.type);
+    const isMaybeSlugField = (field)=>/\bslug\b/.test(field.name);
+    return isTextField(field) && !isDisplayField({
+        field,
+        contentType
+    }) && !isMaybeSlugField(field);
+}
+export function getEntityDescription({ entity , contentType , localeCode , defaultLocaleCode  }) {
+    if (!contentType) {
+        return '';
+    }
+    const descriptionField = contentType.fields.find((field)=>isDescriptionField({
+            field,
+            contentType
+        }));
+    if (!descriptionField) {
+        return '';
+    }
+    return getFieldValue({
+        entity,
+        fieldId: descriptionField.id,
+        localeCode,
+        defaultLocaleCode
+    }) || '';
+}
+export function getEntryTitle({ entry , contentType , localeCode , defaultLocaleCode , defaultTitle  }) {
+    let title;
+    if (!contentType) {
+        return defaultTitle;
+    }
+    const displayField = contentType.displayField;
+    if (!displayField) {
+        return defaultTitle;
+    }
+    const displayFieldInfo = contentType.fields.find((field)=>field.id === displayField);
+    if (!displayFieldInfo) {
+        return defaultTitle;
+    }
+    if (displayFieldInfo.localized) {
+        title = getFieldValue({
+            entity: entry,
+            fieldId: displayField,
+            localeCode,
+            defaultLocaleCode
+        });
+        if (!title) {
+            title = getFieldValue({
+                entity: entry,
+                fieldId: displayFieldInfo.id,
+                localeCode,
+                defaultLocaleCode
+            });
+        }
+    } else {
+        title = getFieldValue({
+            entity: entry,
+            fieldId: displayField,
+            defaultLocaleCode,
+            localeCode: ''
+        });
+        if (!title) {
+            title = getFieldValue({
+                entity: entry,
+                fieldId: displayFieldInfo.id,
+                defaultLocaleCode,
+                localeCode: ''
+            });
+        }
+    }
+    return titleOrDefault(title, defaultTitle);
+}
+export function getEntryStatus(sys) {
+    if (!sys || sys.type !== 'Entry' && sys.type !== 'Asset') {
+        throw new TypeError('Invalid entity metadata object');
+    }
+    if (sys.deletedVersion) {
+        return 'deleted';
+    } else if (sys.archivedVersion) {
+        return 'archived';
+    } else if (sys.publishedVersion) {
+        if (sys.version > sys.publishedVersion + 1) {
+            return 'changed';
+        } else {
+            return 'published';
+        }
+    } else {
+        return 'draft';
+    }
+}
+export const getEntryImage = async ({ entry , contentType , localeCode  }, getAsset)=>{
+    if (!contentType) {
+        return null;
+    }
+    const assetLink = contentType.fields.find(isAssetField);
+    if (!assetLink) {
+        return null;
+    }
+    const assetId = get(entry.fields, [
+        assetLink.id,
+        localeCode,
+        'sys',
+        'id'
+    ]);
+    if (!assetId) {
+        return null;
+    }
+    try {
+        const asset = await getAsset(assetId);
+        const file = get(asset, [
+            'fields',
+            'file',
+            localeCode
+        ]);
+        const isImage = Boolean(get(file, [
+            'details',
+            'image'
+        ], false));
+        return isImage ? file : null;
+    } catch (e) {
+        return null;
+    }
+};

package/dist/esm/utils/isValidImage.js

@@ -0,0 +1,16 @@
+export function isValidImage(file) {
+    const validMimeTypes = [
+        'image/avif',
+        'image/bmp',
+        'image/x-windows-bmp',
+        'image/gif',
+        'image/webp',
+        'image/jpg',
+        'image/jpeg',
+        'image/pjpeg',
+        'image/x-jps',
+        'image/png',
+        'image/svg+xml'
+    ];
+    return validMimeTypes.includes(file.contentType);
+}

package/dist/esm/utils/shortenStorageUnit.js

@@ -0,0 +1,37 @@
+export function toLocaleString(number) {
+    return number.toLocaleString('en-US');
+}
+function formatFloat(value, localize) {
+    return localize ? toLocaleString(value) : value.toFixed(2).replace(/\.(0)*$|0*$/, '');
+}
+export function shortenStorageUnit(value, uom) {
+    if (value <= 0) {
+        return '0 B';
+    }
+    const units = [
+        'PB',
+        'TB',
+        'GB',
+        'MB',
+        'KB',
+        'B'
+    ];
+    const getBigger = (unit)=>units[units.indexOf(unit) - 1];
+    const getSmaller = (unit)=>units[units.indexOf(unit) + 1];
+    const isBiggestUnit = (unit)=>units.indexOf(unit) === 0;
+    const isSmallestUnit = (unit)=>units.indexOf(unit) === units.length - 1;
+    const reduce = (number, unit)=>{
+        if (number < 0.99 && !isSmallestUnit(unit)) {
+            return reduce(number * 1000, getSmaller(unit));
+        } else if (number >= 1000 && !isBiggestUnit(unit)) {
+            return reduce(number / 1000, getBigger(unit));
+        } else {
+            return {
+                number,
+                unit
+            };
+        }
+    };
+    const { number , unit  } = reduce(value, uom);
+    return `${formatFloat(number, false)} ${unit}`;
+}

package/dist/types/CharCounter.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+interface CharCounterProps {
+    value?: string;
+    checkConstraint: (n: number) => boolean;
+}
+export declare function CharCounter(props: CharCounterProps): React.JSX.Element;
+export {};

package/dist/{CharValidation.d.ts → types/CharValidation.d.ts}

@@ -1,7 +1,7 @@
-/// <reference types="react" />
-import { ValidationType } from './types';
-interface CharValidationProps {
-    constraints: ValidationType;
-}
-export declare function CharValidation(props: CharValidationProps): JSX.Element;
-export {};
+import * as React from 'react';
+import { ValidationType } from './types';
+interface CharValidationProps {
+    constraints: ValidationType;
+}
+export declare function CharValidation(props: CharValidationProps): React.JSX.Element;
+export {};

package/dist/{FieldConnector.d.ts → types/FieldConnector.d.ts}

@@ -1,48 +1,48 @@
-/// <reference types="lodash" />
-import React from 'react';
-import { FieldAPI, ValidationError } from '@contentful/app-sdk';
-declare type Nullable = null | undefined;
-export interface FieldConnectorChildProps<ValueType> {
-    isLocalValueChange: boolean;
-    externalReset: number;
-    lastRemoteValue: ValueType | Nullable;
-    value: ValueType | Nullable;
-    disabled: boolean;
-    errors: ValidationError[];
-    setValue: (value: ValueType | Nullable) => Promise<unknown>;
-}
-interface FieldConnectorState<ValueType> {
-    isLocalValueChange: boolean;
-    externalReset: number;
-    lastRemoteValue: ValueType | Nullable;
-    value: ValueType | Nullable;
-    disabled: boolean;
-    errors: ValidationError[];
-}
-interface FieldConnectorProps<ValueType> {
-    field: FieldAPI;
-    isInitiallyDisabled: boolean;
-    isDisabled?: boolean;
-    children: (state: FieldConnectorChildProps<ValueType>) => React.ReactNode;
-    isEmptyValue: (value: ValueType | null) => boolean;
-    isEqualValues: (value1: ValueType | Nullable, value2: ValueType | Nullable) => boolean;
-    throttle: number;
-}
-export declare class FieldConnector<ValueType> extends React.Component<FieldConnectorProps<ValueType>, FieldConnectorState<ValueType>> {
-    static defaultProps: {
-        children: () => null;
-        isEmptyValue: (value: any | Nullable) => boolean;
-        isEqualValues: (value1: any | Nullable, value2: any | Nullable) => boolean;
-        throttle: number;
-    };
-    constructor(props: FieldConnectorProps<ValueType>);
-    unsubscribeErrors: Function | null;
-    unsubscribeDisabled: Function | null;
-    unsubscribeValue: Function | null;
-    setValue: (value: ValueType | Nullable) => Promise<void>;
-    triggerSetValueCallbacks: import("lodash").DebouncedFunc<(value: ValueType | Nullable) => Promise<unknown>>;
-    componentDidMount(): void;
-    componentWillUnmount(): void;
-    render(): React.ReactNode;
-}
-export {};
+/// <reference types="lodash" />
+import * as React from 'react';
+import { FieldAPI, ValidationError } from '@contentful/app-sdk';
+type Nullable = null | undefined;
+export interface FieldConnectorChildProps<ValueType> {
+    isLocalValueChange: boolean;
+    externalReset: number;
+    lastRemoteValue: ValueType | Nullable;
+    value: ValueType | Nullable;
+    disabled: boolean;
+    errors: ValidationError[];
+    setValue: (value: ValueType | Nullable) => Promise<unknown>;
+}
+interface FieldConnectorState<ValueType> {
+    isLocalValueChange: boolean;
+    externalReset: number;
+    lastRemoteValue: ValueType | Nullable;
+    value: ValueType | Nullable;
+    disabled: boolean;
+    errors: ValidationError[];
+}
+interface FieldConnectorProps<ValueType> {
+    field: FieldAPI;
+    isInitiallyDisabled: boolean;
+    isDisabled?: boolean;
+    children: (state: FieldConnectorChildProps<ValueType>) => React.ReactNode;
+    isEmptyValue: (value: ValueType | null) => boolean;
+    isEqualValues: (value1: ValueType | Nullable, value2: ValueType | Nullable) => boolean;
+    throttle: number;
+}
+export declare class FieldConnector<ValueType> extends React.Component<FieldConnectorProps<ValueType>, FieldConnectorState<ValueType>> {
+    static defaultProps: {
+        children: () => null;
+        isEmptyValue: (value: any | Nullable) => boolean;
+        isEqualValues: (value1: any | Nullable, value2: any | Nullable) => boolean;
+        throttle: number;
+    };
+    constructor(props: FieldConnectorProps<ValueType>);
+    unsubscribeErrors: Function | null;
+    unsubscribeDisabled: Function | null;
+    unsubscribeValue: Function | null;
+    setValue: (value: ValueType | Nullable) => Promise<void>;
+    triggerSetValueCallbacks: import("lodash").DebouncedFunc<(value: ValueType | Nullable) => Promise<unknown>>;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    render(): React.ReactNode;
+}
+export {};

package/dist/types/FieldConnector.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/{ModalDialogLauncher.d.ts → types/ModalDialogLauncher.d.ts}

@@ -1,13 +1,13 @@
-import React from 'react';
-import { OpenCustomWidgetOptions } from '@contentful/app-sdk';
-export declare function open(componentRenderer: (params: {
-    onClose: Function;
-    isShown: boolean;
-}) => any): Promise<unknown>;
-export declare function openDialog<T>(options: OpenCustomWidgetOptions, Component: React.SFC<{
-    onClose: (result: T) => void;
-}>): Promise<unknown>;
-declare const _default: {
-    openDialog: typeof openDialog;
-};
-export default _default;
+import * as React from 'react';
+import { OpenCustomWidgetOptions } from '@contentful/app-sdk';
+export declare function open(componentRenderer: (params: {
+    onClose: Function;
+    isShown: boolean;
+}) => any): Promise<unknown>;
+export declare function openDialog<T>(options: OpenCustomWidgetOptions, Component: React.SFC<{
+    onClose: (result: T) => void;
+}>): Promise<unknown>;
+declare const _default: {
+    openDialog: typeof openDialog;
+};
+export default _default;

package/dist/types/PredefinedValuesError.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare function PredefinedValuesError(): React.JSX.Element;

package/dist/{index.d.ts → types/index.d.ts}

@@ -1,15 +1,15 @@
-export { FieldAPI, SpaceAPI, EntryFieldAPI, EntryAPI, DialogsAPI, IdsAPI, ContentType, ParametersAPI, LocalesAPI, NavigatorAPI, NotifierAPI, WindowAPI, AccessAPI, AppConfigAPI, LocationAPI, BaseExtensionSDK, FieldExtensionSDK, OpenCustomWidgetOptions, } from '@contentful/app-sdk';
-export { FieldConnector } from './FieldConnector';
-export type { FieldConnectorChildProps } from './FieldConnector';
-export { PredefinedValuesError } from './PredefinedValuesError';
-export { CharCounter } from './CharCounter';
-export { CharValidation } from './CharValidation';
-import * as ModalDialogLauncher from './ModalDialogLauncher';
-export { ModalDialogLauncher };
-import * as entityHelpers from './utils/entityHelpers';
-export { entityHelpers };
-import * as ConstraintsUtils from './utils/constraints';
-export { ConstraintsUtils };
-export { isValidImage } from './utils/isValidImage';
-export { shortenStorageUnit, toLocaleString } from './utils/shortenStorageUnit';
-export { Entry, File, Asset } from './typesEntity';
+export { AccessAPI, AppConfigAPI, BaseExtensionSDK, ContentType, DialogsAPI, EntryAPI, EntryFieldAPI, FieldAPI, FieldExtensionSDK, IdsAPI, LocalesAPI, LocationAPI, NavigatorAPI, NotifierAPI, OpenCustomWidgetOptions, ParametersAPI, SpaceAPI, WindowAPI, } from '@contentful/app-sdk';
+export { CharCounter } from './CharCounter';
+export { CharValidation } from './CharValidation';
+export { FieldConnector } from './FieldConnector';
+export type { FieldConnectorChildProps } from './FieldConnector';
+export { PredefinedValuesError } from './PredefinedValuesError';
+export { Asset, Entry, File } from './typesEntity';
+export { isValidImage } from './utils/isValidImage';
+export { shortenStorageUnit, toLocaleString } from './utils/shortenStorageUnit';
+export { ModalDialogLauncher };
+export { entityHelpers };
+export { ConstraintsUtils };
+import * as ModalDialogLauncher from './ModalDialogLauncher';
+import * as ConstraintsUtils from './utils/constraints';
+import * as entityHelpers from './utils/entityHelpers';

package/dist/{types.d.ts → types/types.d.ts}

@@ -1,11 +1,11 @@
-export declare type ValidationType = {
-    type: 'max';
-    max: number;
-} | {
-    type: 'min';
-    min: number;
-} | {
-    type: 'min-max';
-    min: number;
-    max: number;
-};
+export type ValidationType = {
+    type: 'max';
+    max: number;
+} | {
+    type: 'min';
+    min: number;
+} | {
+    type: 'min-max';
+    min: number;
+    max: number;
+};

package/dist/{typesEntity.d.ts → types/typesEntity.d.ts}

@@ -1,9 +1,9 @@
-export { BaseExtensionSDK, ContentType, ContentTypeField, Link, Entry, Asset, } from '@contentful/app-sdk';
-export interface File {
-    fileName: string;
-    contentType: string;
-    upload?: string;
-    url?: string;
-    details?: Record<string, any>;
-    uploadFrom?: Record<string, any>;
-}
+export { BaseExtensionSDK, ContentType, ContentTypeField, Link, Entry, Asset, } from '@contentful/app-sdk';
+export interface File {
+    fileName: string;
+    contentType: string;
+    upload?: string;
+    url?: string;
+    details?: Record<string, any>;
+    uploadFrom?: Record<string, any>;
+}

package/dist/{utils → types/utils}/constraints.d.ts

@@ -1,3 +1,3 @@
-import { ValidationType } from '../types';
-export declare function fromFieldValidations(validations: Record<string, any>[] | undefined, fieldType: 'Symbol' | 'Text'): ValidationType;
-export declare function makeChecker(constraint: ValidationType): (length: number) => boolean;
+import { ValidationType } from '../types';
+export declare function fromFieldValidations(validations: Record<string, any>[] | undefined, fieldType: 'Symbol' | 'Text'): ValidationType;
+export declare function makeChecker(constraint: ValidationType): (length: number) => boolean;