@contentful/default-field-editors 1.3.3 → 1.4.0

package/dist/cjs/Field.js

@@ -0,0 +1,204 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Field", {
+    enumerable: true,
+    get: function() {
+        return Field;
+    }
+});
+const _react = _interop_require_wildcard(require("react"));
+const _fieldeditorboolean = require("@contentful/field-editor-boolean");
+const _fieldeditorcheckbox = require("@contentful/field-editor-checkbox");
+const _fieldeditordate = require("@contentful/field-editor-date");
+const _fieldeditordropdown = require("@contentful/field-editor-dropdown");
+const _fieldeditorjson = require("@contentful/field-editor-json");
+const _fieldeditorlist = require("@contentful/field-editor-list");
+const _fieldeditorlocation = require("@contentful/field-editor-location");
+const _fieldeditormarkdown = require("@contentful/field-editor-markdown");
+const _fieldeditormultipleline = require("@contentful/field-editor-multiple-line");
+const _fieldeditornumber = require("@contentful/field-editor-number");
+const _fieldeditorradio = require("@contentful/field-editor-radio");
+const _fieldeditorrating = require("@contentful/field-editor-rating");
+const _fieldeditorreference = require("@contentful/field-editor-reference");
+const _fieldeditorrichtext = require("@contentful/field-editor-rich-text");
+const _fieldeditorsingleline = require("@contentful/field-editor-single-line");
+const _fieldeditorslug = require("@contentful/field-editor-slug");
+const _fieldeditortags = require("@contentful/field-editor-tags");
+const _fieldeditorurl = require("@contentful/field-editor-url");
+const _getDefaultWidgetId = require("./getDefaultWidgetId");
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {};
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+const widgetComponents = {
+    multipleLine: [
+        _fieldeditormultipleline.MultipleLineEditor
+    ],
+    boolean: [
+        _fieldeditorboolean.BooleanEditor
+    ],
+    objectEditor: [
+        _fieldeditorjson.JsonEditor
+    ],
+    datePicker: [
+        _fieldeditordate.DateEditor
+    ],
+    locationEditor: [
+        _fieldeditorlocation.LocationEditor
+    ],
+    checkbox: [
+        _fieldeditorcheckbox.CheckboxEditor
+    ],
+    listInput: [
+        _fieldeditorlist.ListEditor
+    ],
+    rating: [
+        _fieldeditorrating.RatingEditor
+    ],
+    radio: [
+        _fieldeditorradio.RadioEditor
+    ],
+    tagEditor: [
+        _fieldeditortags.TagsEditor
+    ],
+    numberEditor: [
+        _fieldeditornumber.NumberEditor
+    ],
+    urlEditor: [
+        _fieldeditorurl.UrlEditor
+    ],
+    slugEditor: [
+        _fieldeditorslug.SlugEditor
+    ],
+    singleLine: [
+        _fieldeditorsingleline.SingleLineEditor
+    ],
+    dropdown: [
+        _fieldeditordropdown.DropdownEditor
+    ],
+    entryLinkEditor: [
+        _fieldeditorreference.SingleEntryReferenceEditor,
+        {
+            viewType: 'link',
+            hasCardEditActions: true
+        }
+    ],
+    entryCardEditor: [
+        _fieldeditorreference.SingleEntryReferenceEditor,
+        {
+            viewType: 'card',
+            hasCardEditActions: true
+        }
+    ],
+    entryLinksEditor: [
+        _fieldeditorreference.MultipleEntryReferenceEditor,
+        {
+            viewType: 'link',
+            hasCardEditActions: true
+        }
+    ],
+    entryCardsEditor: [
+        _fieldeditorreference.MultipleEntryReferenceEditor,
+        {
+            viewType: 'card',
+            hasCardEditActions: true
+        }
+    ],
+    assetLinkEditor: [
+        _fieldeditorreference.SingleMediaEditor,
+        {
+            viewType: 'link'
+        }
+    ],
+    assetLinksEditor: [
+        _fieldeditorreference.MultipleMediaEditor,
+        {
+            viewType: 'link'
+        }
+    ],
+    assetGalleryEditor: [
+        _fieldeditorreference.MultipleMediaEditor,
+        {
+            viewType: 'card'
+        }
+    ],
+    richTextEditor: [
+        _fieldeditorrichtext.RichTextEditor
+    ],
+    markdown: [
+        _fieldeditormarkdown.MarkdownEditor
+    ]
+};
+const Field = (props)=>{
+    const { sdk , widgetId: possiblyUndefinedWidgetId , isInitiallyDisabled =false , renderFieldEditor , getOptions  } = props;
+    const field = sdk.field;
+    const locales = sdk.locales;
+    const widgetId = possiblyUndefinedWidgetId ?? (0, _getDefaultWidgetId.getDefaultWidgetId)(sdk);
+    if (renderFieldEditor) {
+        const customEditor = renderFieldEditor(widgetId, sdk, isInitiallyDisabled);
+        if (customEditor) {
+            return customEditor;
+        }
+    }
+    const options = getOptions ? getOptions(widgetId, sdk) : {};
+    const referenceEditorParams = sdk.parameters && 'instance' in sdk.parameters ? sdk.parameters : {
+        instance: {
+            showCreateEntityAction: true,
+            showLinkEntityAction: true
+        }
+    };
+    if (!widgetComponents[widgetId]) return null;
+    const [WidgetComponent, widgetStaticProps] = widgetComponents[widgetId];
+    const widgetComponentProps = {
+        sdk,
+        field,
+        locales,
+        isInitiallyDisabled,
+        parameters: referenceEditorParams,
+        ...widgetStaticProps,
+        ...options[widgetId]
+    };
+    const baseSdk = widgetId === 'slugEditor' ? sdk : undefined;
+    return _react.createElement(WidgetComponent, {
+        key: sdk.field.locale,
+        ...widgetComponentProps,
+        baseSdk: baseSdk
+    });
+};

package/dist/cjs/Field.spec.js

@@ -0,0 +1,124 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _react = _interop_require_wildcard(require("react"));
+const _fieldeditorreference = require("@contentful/field-editor-reference");
+const _fieldeditortestutils = require("@contentful/field-editor-test-utils");
+require("@testing-library/jest-dom/extend-expect");
+const _react1 = require("@testing-library/react");
+const _Field = require("./Field");
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {};
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+(0, _react1.configure)({
+    testIdAttribute: 'data-test-id'
+});
+jest.mock('@contentful/field-editor-reference', ()=>({
+        SingleEntryReferenceEditor: jest.fn(()=>_react.createElement("div", null, "mock"))
+    }));
+const getSdk = (customize, initialValue)=>{
+    const [field] = (0, _fieldeditortestutils.createFakeFieldAPI)(customize, initialValue);
+    const sdk = {
+        field,
+        locales: (0, _fieldeditortestutils.createFakeLocalesAPI)((locales)=>{
+            locales.available.push('de');
+            return locales;
+        })
+    };
+    return sdk;
+};
+describe('Field', ()=>{
+    afterEach(_react1.cleanup);
+    it('renders custom field editor specified by renderFieldEditor', ()=>{
+        const sdk = getSdk();
+        const { queryByTestId  } = (0, _react1.render)(_react.createElement(_Field.Field, {
+            sdk: sdk,
+            isInitiallyDisabled: false,
+            widgetId: "customEditor",
+            renderFieldEditor: ()=>{
+                return _react.createElement("div", {
+                    "data-test-id": "customEditor"
+                }, "custom editor");
+            }
+        }));
+        expect(queryByTestId('customEditor')).toBeInTheDocument();
+    });
+    it('renders with specified options', ()=>{
+        const sdk = getSdk();
+        const options = {
+            entryLinkEditor: {
+                onAction: jest.fn(),
+                renderCustomCard: jest.fn()
+            }
+        };
+        (0, _react1.render)(_react.createElement(_Field.Field, {
+            sdk: sdk,
+            isInitiallyDisabled: false,
+            widgetId: "entryLinkEditor",
+            getOptions: ()=>options
+        }));
+        expect(_fieldeditorreference.SingleEntryReferenceEditor.mock.calls[0][0]).toMatchObject({
+            onAction: options.entryLinkEditor.onAction,
+            renderCustomCard: options.entryLinkEditor.renderCustomCard
+        });
+    });
+    it('re-renders single field editor when locale changes', ()=>{
+        const props = {
+            isInitiallyDisabled: false,
+            widgetId: 'singleLine'
+        };
+        const { container , rerender  } = (0, _react1.render)(_react.createElement(_Field.Field, {
+            ...props,
+            sdk: getSdk((field)=>{
+                field.locale = 'en-US';
+                return field;
+            }, 'english value')
+        }));
+        expect(container.querySelector('input')?.value).toBe('english value');
+        rerender(_react.createElement(_Field.Field, {
+            ...props,
+            sdk: getSdk((field)=>{
+                field.locale = 'de';
+                return field;
+            }, 'german value')
+        }));
+        expect(container.querySelector('input')?.value).toBe('german value');
+    });
+});

package/dist/cjs/FieldWrapper.js

@@ -0,0 +1,92 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "FieldWrapper", {
+    enumerable: true,
+    get: function() {
+        return FieldWrapper;
+    }
+});
+const _react = _interop_require_wildcard(require("react"));
+const _f36components = require("@contentful/f36-components");
+const _fieldeditorvalidationerrors = require("@contentful/field-editor-validation-errors");
+const _emotion = require("emotion");
+const _FieldWrapperstyles = require("./FieldWrapper.styles");
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {};
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+const FieldWrapper = function(props) {
+    const { ids  } = props.sdk;
+    const defaultGetEntryUrl = (entry)=>`/spaces/${ids.space}/environments/${ids.environmentAlias || ids.environment}/entries/${entry.sys.id}`;
+    const { name , sdk , className , children , renderHeading , renderHelpText , showFocusBar =true , getEntryURL =defaultGetEntryUrl  } = props;
+    const { field  } = sdk;
+    const helpText = (sdk.parameters?.instance)?.helpText ?? '';
+    const [hasErrors, setHasErrors] = _react.useState(false);
+    _react.useEffect(()=>{
+        return field.onSchemaErrorsChanged((errors)=>{
+            setHasErrors((errors || []).length > 0);
+        });
+    }, [
+        field
+    ]);
+    const fieldControlId = [
+        field.id,
+        field.locale,
+        sdk.contentType?.sys?.id
+    ].filter((item)=>item).join('-');
+    return _react.createElement(_f36components.FormControl, {
+        id: fieldControlId,
+        testId: "entity-field-controls",
+        "data-test-id": "entity-field-controls",
+        className: (0, _emotion.cx)(showFocusBar && _FieldWrapperstyles.styles.withFocusBar, className),
+        "aria-invalid": hasErrors,
+        isRequired: field.required
+    }, renderHeading ? renderHeading(name) : _react.createElement(_f36components.FormControl.Label, {
+        className: _FieldWrapperstyles.styles.label
+    }, name), children, _react.createElement(_fieldeditorvalidationerrors.ValidationErrors, {
+        field: field,
+        space: sdk.space,
+        locales: sdk.locales,
+        getEntryURL: getEntryURL || defaultGetEntryUrl
+    }), renderHelpText ? renderHelpText(helpText) : _react.createElement(_f36components.FormControl.HelpText, {
+        testId: "field-hint",
+        className: _FieldWrapperstyles.styles.helpText
+    }, helpText));
+};

package/dist/cjs/FieldWrapper.spec.js

@@ -0,0 +1,111 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _react = _interop_require_wildcard(require("react"));
+const _fieldeditortestutils = require("@contentful/field-editor-test-utils");
+require("@testing-library/jest-dom/extend-expect");
+const _react1 = require("@testing-library/react");
+const _FieldWrapper = require("./FieldWrapper");
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {};
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+(0, _react1.configure)({
+    testIdAttribute: 'data-test-id'
+});
+const [field, emitter] = (0, _fieldeditortestutils.createFakeFieldAPI)();
+const sdk = {
+    contentType: {
+        sys: {
+            id: 'content-type-id'
+        }
+    },
+    field,
+    locales: (0, _fieldeditortestutils.createFakeLocalesAPI)()
+};
+const getEntryURL = ()=>'';
+describe('Field', ()=>{
+    afterEach(_react1.cleanup);
+    it('renders children, label, validation errors and help text', ()=>{
+        sdk.parameters = {
+            instance: {
+                helpText: 'help'
+            }
+        };
+        const { queryByTestId  } = (0, _react1.render)(_react.createElement(_FieldWrapper.FieldWrapper, {
+            name: "field",
+            sdk: sdk,
+            getEntryURL: getEntryURL
+        }, _react.createElement("div", {
+            "data-test-id": "children"
+        }, "children")));
+        (0, _react1.act)(()=>{
+            emitter.emit('onSchemaErrorsChanged', [
+                'error'
+            ]);
+        });
+        expect(queryByTestId('entity-field-controls')).toBeInTheDocument();
+        expect(queryByTestId('cf-ui-form-label')).toBeInTheDocument();
+        expect(queryByTestId('children')).toBeInTheDocument();
+        expect(queryByTestId('validation-errors')).toBeInTheDocument();
+        expect(queryByTestId('field-hint')).toBeInTheDocument();
+    });
+    it('renders custom label', ()=>{
+        const { queryByTestId  } = (0, _react1.render)(_react.createElement(_FieldWrapper.FieldWrapper, {
+            name: "field",
+            sdk: sdk,
+            getEntryURL: getEntryURL,
+            renderHeading: ()=>_react.createElement("div", {
+                    "data-test-id": "custom-label"
+                }, "custom label")
+        }, _react.createElement("div", null, "children")));
+        expect(queryByTestId('custom-label')).toBeInTheDocument();
+    });
+    it('renders custom help text', ()=>{
+        const { queryByTestId  } = (0, _react1.render)(_react.createElement(_FieldWrapper.FieldWrapper, {
+            name: "field",
+            sdk: sdk,
+            getEntryURL: getEntryURL,
+            renderHelpText: ()=>_react.createElement("div", {
+                    "data-test-id": "custom-hint"
+                }, "custom hint")
+        }, _react.createElement("div", null, "children")));
+        expect(queryByTestId('custom-hint')).toBeInTheDocument();
+    });
+});

package/dist/cjs/FieldWrapper.styles.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "styles", {
+    enumerable: true,
+    get: function() {
+        return styles;
+    }
+});
+const _f36tokens = _interop_require_default(require("@contentful/f36-tokens"));
+const _emotion = require("emotion");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const styles = {
+    withFocusBar: (0, _emotion.css)({
+        marginLeft: _f36tokens.default.spacingL,
+        marginRight: _f36tokens.default.spacingL,
+        marginBottom: '29px',
+        marginTop: '19px',
+        paddingLeft: _f36tokens.default.spacingM,
+        borderLeft: `3px solid ${_f36tokens.default.gray300}`,
+        transition: 'border-color 0.18s linear',
+        '&:focus-within': {
+            borderColor: _f36tokens.default.colorPrimary
+        },
+        '&[aria-invalid="true"]': {
+            borderLeftColor: _f36tokens.default.red500
+        }
+    }),
+    label: (0, _emotion.css)({
+        display: 'flex',
+        width: '100%',
+        maxWidth: '800px',
+        color: _f36tokens.default.gray500,
+        fontSize: _f36tokens.default.fontSizeM,
+        fontWeight: _f36tokens.default.fontWeightNormal,
+        lineHeight: _f36tokens.default.lineHeightDefault,
+        whiteSpace: 'pre-wrap'
+    }),
+    helpText: (0, _emotion.css)({
+        margin: `${_f36tokens.default.spacingXs} 0`,
+        fontStyle: 'italic'
+    })
+};

package/dist/cjs/__mocks__/styles.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return _default;
+    }
+});
+const _default = {};

package/dist/cjs/getDefaultWidgetId.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "getDefaultWidgetId", {
+    enumerable: true,
+    get: function() {
+        return getDefaultWidgetId;
+    }
+});
+const _contentfulmanagement = require("contentful-management");
+function getDefaultWidgetId(sdk) {
+    const field = sdk.field;
+    return _contentfulmanagement.editorInterfaceDefaults.default.getDefaultControlOfField(field).widgetId;
+}

package/dist/cjs/index.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    Field: function() {
+        return _Field.Field;
+    },
+    FieldWrapper: function() {
+        return _FieldWrapper.FieldWrapper;
+    },
+    getDefaultWidgetId: function() {
+        return _getDefaultWidgetId.getDefaultWidgetId;
+    }
+});
+const _Field = require("./Field");
+const _FieldWrapper = require("./FieldWrapper");
+const _getDefaultWidgetId = require("./getDefaultWidgetId");

package/dist/cjs/types.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});