@webiny/app-headless-cms 0.0.0-mt-1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) Webiny
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,18 @@
+# @webiny/app-headless-cms
+
+[![](https://img.shields.io/npm/dw/@webiny/app-headless-cms.svg)](https://www.npmjs.com/package/@webiny/app-headless-cms)
+[![](https://img.shields.io/npm/v/@webiny/app-headless-cms.svg)](https://www.npmjs.com/package/@webiny/app-headless-cms)
+[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
+[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
+
+## Install
+
+```
+npm install --save @webiny/app-headless-cms
+```
+
+Or if you prefer yarn:
+
+```
+yarn add @webiny/app-headless-cms
+```

package/admin/components/ContentEntryForm/ContentEntryForm.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { FormAPI } from "@webiny/form/types";
+import { UseContentEntryFormParams } from "./useContentEntryForm";
+interface ContentEntryFormProps extends UseContentEntryFormParams {
+    onForm?: (form: FormAPI) => void;
+}
+export declare const ContentEntryForm: ({ onForm, ...props }: ContentEntryFormProps) => JSX.Element;
+export {};

package/admin/components/ContentEntryForm/ContentEntryForm.js

@@ -0,0 +1,68 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["onForm"];
+import React, { useCallback, useEffect, useRef } from "react";
+import styled from "@emotion/styled";
+import { Form } from "@webiny/form";
+import { plugins } from "@webiny/plugins";
+import { CircularProgress } from "@webiny/ui/Progress";
+import RenderFieldElement from "./RenderFieldElement";
+import { useContentEntryForm } from "./useContentEntryForm";
+import { Fields } from "./Fields";
+var FormWrapper = /*#__PURE__*/styled("div", {
+  target: "ejw5gwy0",
+  label: "FormWrapper"
+})({
+  height: "calc(100vh - 260px)",
+  overflow: "auto"
+});
+export var ContentEntryForm = function ContentEntryForm(_ref) {
+  var onForm = _ref.onForm,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var contentModel = props.contentModel;
+
+  var _useContentEntryForm = useContentEntryForm(props),
+      loading = _useContentEntryForm.loading,
+      data = _useContentEntryForm.data,
+      onChange = _useContentEntryForm.onChange,
+      onSubmit = _useContentEntryForm.onSubmit,
+      invalidFields = _useContentEntryForm.invalidFields;
+
+  var ref = useRef(null);
+  useEffect(function () {
+    typeof onForm === "function" && onForm(ref.current);
+  }, []);
+  var formRenderer = plugins.byType("cms-content-form-renderer").find(function (pl) {
+    return pl.modelId === contentModel.modelId;
+  });
+  var renderCustomLayout = useCallback(function (formRenderProps) {
+    var fields = contentModel.fields.reduce(function (acc, field) {
+      acc[field.fieldId] = /*#__PURE__*/React.createElement(RenderFieldElement, {
+        field: field,
+        Bind: formRenderProps.Bind,
+        contentModel: contentModel
+      });
+      return acc;
+    }, {});
+    return formRenderer.render(_objectSpread(_objectSpread({}, formRenderProps), {}, {
+      contentModel: contentModel,
+      fields: fields
+    }));
+  }, [formRenderer]);
+  return /*#__PURE__*/React.createElement(Form, {
+    onChange: onChange,
+    onSubmit: onSubmit,
+    data: data,
+    ref: ref,
+    invalidFields: invalidFields
+  }, function (formProps) {
+    return /*#__PURE__*/React.createElement(FormWrapper, {
+      "data-testid": "cms-content-form"
+    }, loading && /*#__PURE__*/React.createElement(CircularProgress, null), formRenderer ? renderCustomLayout(formProps) : /*#__PURE__*/React.createElement(Fields, Object.assign({
+      contentModel: contentModel,
+      fields: contentModel.fields,
+      layout: contentModel.layout
+    }, formProps)));
+  });
+};

package/admin/components/ContentEntryForm/ContentEntryFormPreview.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { CmsEditorContentModel } from "../../../types";
+interface Props {
+    contentModel: CmsEditorContentModel;
+}
+export declare const ContentEntryFormPreview: (props: Props) => JSX.Element;
+export {};

package/admin/components/ContentEntryForm/ContentEntryFormPreview.js

@@ -0,0 +1,43 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import React, { useCallback } from "react";
+import styled from "@emotion/styled";
+import { Form } from "@webiny/form";
+import { plugins } from "@webiny/plugins";
+import RenderFieldElement from "./RenderFieldElement";
+import { Fields } from "./Fields";
+var FormWrapper = /*#__PURE__*/styled("div", {
+  target: "eh1hbib0",
+  label: "FormWrapper"
+})({
+  height: "calc(100vh - 260px)",
+  overflow: "auto"
+});
+export var ContentEntryFormPreview = function ContentEntryFormPreview(props) {
+  var contentModel = props.contentModel;
+  var formRenderer = plugins.byType("cms-content-form-renderer").find(function (pl) {
+    return pl.modelId === contentModel.modelId;
+  });
+  var renderCustomLayout = useCallback(function (formRenderProps) {
+    var fields = contentModel.fields.reduce(function (acc, field) {
+      acc[field.fieldId] = /*#__PURE__*/React.createElement(RenderFieldElement, {
+        field: field,
+        Bind: formRenderProps.Bind,
+        contentModel: contentModel
+      });
+      return acc;
+    }, {});
+    return formRenderer.render(_objectSpread(_objectSpread({}, formRenderProps), {}, {
+      contentModel: contentModel,
+      fields: fields
+    }));
+  }, [formRenderer, contentModel.fields]);
+  return /*#__PURE__*/React.createElement(Form, null, function (formProps) {
+    return /*#__PURE__*/React.createElement(FormWrapper, {
+      "data-testid": "cms-content-form"
+    }, formRenderer ? renderCustomLayout(formProps) : /*#__PURE__*/React.createElement(Fields, Object.assign({
+      contentModel: contentModel,
+      fields: contentModel.fields,
+      layout: contentModel.layout
+    }, formProps)));
+  });
+};

package/admin/components/ContentEntryForm/Fields.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { BindComponent } from "@webiny/form";
+import { CmsEditorContentModel, CmsEditorField, CmsEditorFieldsLayout } from "../../../types";
+interface Props {
+    Bind: BindComponent;
+    contentModel: CmsEditorContentModel;
+    fields: CmsEditorField[];
+    layout: CmsEditorFieldsLayout;
+    gridClassName?: string;
+}
+export declare const Fields: ({ Bind, fields, layout, contentModel, gridClassName }: Props) => JSX.Element;
+export {};

package/admin/components/ContentEntryForm/Fields.js

@@ -0,0 +1,33 @@
+import React from "react";
+import { Cell, Grid } from "@webiny/ui/Grid";
+import RenderFieldElement from "./RenderFieldElement";
+
+var getFieldById = function getFieldById(fields, id) {
+  return fields.find(function (field) {
+    return field.id === id;
+  });
+};
+
+export var Fields = function Fields(_ref) {
+  var Bind = _ref.Bind,
+      fields = _ref.fields,
+      layout = _ref.layout,
+      contentModel = _ref.contentModel,
+      gridClassName = _ref.gridClassName;
+  return /*#__PURE__*/React.createElement(Grid, {
+    className: gridClassName
+  }, layout.map(function (row, rowIndex) {
+    return /*#__PURE__*/React.createElement(React.Fragment, {
+      key: rowIndex
+    }, row.map(function (fieldId) {
+      return /*#__PURE__*/React.createElement(Cell, {
+        span: Math.floor(12 / row.length),
+        key: fieldId
+      }, /*#__PURE__*/React.createElement(RenderFieldElement, {
+        field: getFieldById(fields, fieldId),
+        Bind: Bind,
+        contentModel: contentModel
+      }));
+    }));
+  }));
+};

package/admin/components/ContentEntryForm/Label.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+declare const Label: ({ children }: {
+    children: any;
+}) => JSX.Element;
+export default Label;

package/admin/components/ContentEntryForm/Label.js

@@ -0,0 +1,20 @@
+import React from "react";
+import { css } from "emotion";
+import classNames from "classnames";
+import { Typography } from "@webiny/ui/Typography";
+var style = {
+  label: /*#__PURE__*/css({
+    marginBottom: "5px !important"
+  }, "label:label;")
+};
+
+var Label = function Label(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames("mdc-text-field-helper-text mdc-text-field-helper-text--persistent", style.label)
+  }, /*#__PURE__*/React.createElement(Typography, {
+    use: "subtitle2"
+  }, children));
+};
+
+export default Label;

package/admin/components/ContentEntryForm/RenderFieldElement.d.ts

@@ -0,0 +1,8 @@
+import { CmsEditorField, CmsEditorContentModel } from "../../../types";
+import { BindComponent } from "@webiny/form";
+declare const RenderFieldElement: (props: {
+    field: CmsEditorField;
+    Bind: BindComponent;
+    contentModel: CmsEditorContentModel;
+}) => any;
+export default RenderFieldElement;

package/admin/components/ContentEntryForm/RenderFieldElement.js

@@ -0,0 +1,40 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject;
+
+import React from "react";
+import get from "lodash/get";
+import { i18n } from "@webiny/app/i18n";
+import Label from "./Label";
+import { useBind } from "./useBind";
+import { useRenderPlugins } from "./useRenderPlugins";
+var t = i18n.ns("app-headless-cms/admin/components/content-form");
+
+var RenderFieldElement = function RenderFieldElement(props) {
+  var renderPlugins = useRenderPlugins();
+  var field = props.field,
+      Bind = props.Bind,
+      contentModel = props.contentModel;
+  var getBind = useBind({
+    Bind: Bind,
+    field: field
+  });
+  var renderPlugin = renderPlugins.find(function (plugin) {
+    return plugin.renderer.rendererName === get(field, "renderer.name");
+  });
+
+  if (!renderPlugin) {
+    return t(_templateObject || (_templateObject = _taggedTemplateLiteral(["Cannot render \"{fieldName}\" field - field renderer missing."])))({
+      fieldName: /*#__PURE__*/React.createElement("strong", null, field.fieldId)
+    });
+  }
+
+  return renderPlugin.renderer.render({
+    field: field,
+    getBind: getBind,
+    Label: Label,
+    contentModel: contentModel
+  });
+};
+
+export default RenderFieldElement;

package/admin/components/ContentEntryForm/functions/createValidators.d.ts

@@ -0,0 +1 @@
+export declare const createValidators: (validation: any) => any;

package/admin/components/ContentEntryForm/functions/createValidators.js

@@ -0,0 +1,58 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import { plugins } from "@webiny/plugins";
+export var createValidators = function createValidators(validation) {
+  var validatorPlugins = plugins.byType("cms-model-field-validator");
+  return validation.map(function (item) {
+    var validatorPlugin = validatorPlugins.find(function (plugin) {
+      return plugin.validator.name === item.name;
+    });
+
+    if (!validatorPlugin || typeof validatorPlugin.validator.validate !== "function") {
+      return;
+    }
+
+    return /*#__PURE__*/function () {
+      var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(value) {
+        var isInvalid, result;
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                _context.prev = 0;
+                _context.next = 3;
+                return validatorPlugin.validator.validate(value, item);
+
+              case 3:
+                result = _context.sent;
+                isInvalid = result === false;
+                _context.next = 10;
+                break;
+
+              case 7:
+                _context.prev = 7;
+                _context.t0 = _context["catch"](0);
+                isInvalid = true;
+
+              case 10:
+                if (!isInvalid) {
+                  _context.next = 12;
+                  break;
+                }
+
+                throw new Error(item.message || "Invalid value.");
+
+              case 12:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee, null, [[0, 7]]);
+      }));
+
+      return function (_x) {
+        return _ref.apply(this, arguments);
+      };
+    }();
+  }).filter(Boolean);
+};

package/admin/components/ContentEntryForm/functions/getValue.d.ts

@@ -0,0 +1,5 @@
+export declare const getValue: ({ bind, field, index }: {
+    bind: any;
+    field: any;
+    index: any;
+}) => any;

package/admin/components/ContentEntryForm/functions/getValue.js

@@ -0,0 +1,20 @@
+export var getValue = function getValue(_ref) {
+  var bind = _ref.bind,
+      field = _ref.field,
+      index = _ref.index;
+  var value = bind.value || null;
+
+  if (field.multipleValues) {
+    if (!Array.isArray(value)) {
+      value = [];
+    }
+
+    if (index >= 0) {
+      return value[index] || null;
+    }
+
+    return value;
+  }
+
+  return value;
+};

package/admin/components/ContentEntryForm/functions/setValue.d.ts

@@ -0,0 +1,6 @@
+export declare const setValue: ({ value, bind, field, index }: {
+    value: any;
+    bind: any;
+    field: any;
+    index: any;
+}) => void;

package/admin/components/ContentEntryForm/functions/setValue.js

@@ -0,0 +1,20 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+export var setValue = function setValue(_ref) {
+  var value = _ref.value,
+      bind = _ref.bind,
+      field = _ref.field,
+      index = _ref.index;
+  var newValue = field.multipleValues ? _toConsumableArray(bind.value || []) : bind.value;
+
+  if (field.multipleValues) {
+    if (index >= 0) {
+      newValue[index] = value;
+    } else {
+      newValue = value;
+    }
+  } else {
+    newValue = value;
+  }
+
+  bind.onChange(newValue);
+};

package/admin/components/ContentEntryForm/useBind.d.ts

@@ -0,0 +1,10 @@
+import { BindComponent } from "@webiny/form";
+import { CmsEditorField } from "../../../types";
+interface UseBindProps {
+    field: CmsEditorField;
+    Bind: BindComponent & {
+        parentName?: string;
+    };
+}
+export declare function useBind({ Bind: ParentBind, field }: UseBindProps): (index?: any) => any;
+export {};

package/admin/components/ContentEntryForm/useBind.js

@@ -0,0 +1,76 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import React, { useRef, useCallback, cloneElement } from "react";
+import { createValidators } from "./functions/createValidators";
+export function useBind(_ref) {
+  var ParentBind = _ref.Bind,
+      field = _ref.field;
+  var memoizedBindComponents = useRef({});
+  return useCallback(function () {
+    var index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : -1;
+    var parentName = ParentBind.parentName; // If there's a parent name assigned to the given Bind component, we need to include it in the new field "name".
+    // This allows us to have nested fields (like "object" field with nested properties)
+
+    var name = [parentName, field.fieldId, index >= 0 ? index : undefined].filter(function (v) {
+      return v !== undefined;
+    }).join(".");
+
+    if (memoizedBindComponents.current[name]) {
+      return memoizedBindComponents.current[name];
+    }
+
+    var validators = createValidators(field.validation || []);
+    var listValidators = createValidators(field.listValidation || []);
+    var defaultValue = field.multipleValues ? [] : undefined;
+    var isMultipleValues = index === -1 && field.multipleValues;
+    var inputValidators = isMultipleValues ? listValidators : validators;
+
+    memoizedBindComponents.current[name] = function UseBind(_ref2) {
+      var childName = _ref2.name,
+          childValidators = _ref2.validators,
+          children = _ref2.children;
+      return /*#__PURE__*/React.createElement(ParentBind, {
+        name: childName || name,
+        validators: childValidators || inputValidators,
+        defaultValue: index === -1 ? defaultValue : null
+      }, function (bind) {
+        // Multiple-values functions below.
+        var props = _objectSpread({}, bind);
+
+        if (field.multipleValues && index === -1) {
+          props.appendValue = function (newValue) {
+            bind.onChange([].concat(_toConsumableArray(bind.value), [newValue]));
+          };
+
+          props.prependValue = function (newValue) {
+            bind.onChange([newValue].concat(_toConsumableArray(bind.value)));
+          };
+
+          props.appendValues = function (newValues) {
+            bind.onChange([].concat(_toConsumableArray(bind.value), _toConsumableArray(newValues)));
+          };
+
+          props.removeValue = function (index) {
+            if (index >= 0) {
+              var _value = bind.value;
+              _value = [].concat(_toConsumableArray(_value.slice(0, index)), _toConsumableArray(_value.slice(index + 1)));
+              bind.onChange(_value); // To make sure the field is still valid, we must trigger validation.
+
+              bind.form.validateInput(field.fieldId);
+            }
+          };
+        }
+
+        if (typeof children === "function") {
+          return children(props);
+        }
+
+        return /*#__PURE__*/cloneElement(children, props);
+      });
+    }; // We need to keep track of current field name, to support nested fields.
+
+
+    memoizedBindComponents.current[name].parentName = name;
+    return memoizedBindComponents.current[name];
+  }, [field.fieldId]);
+}

package/admin/components/ContentEntryForm/useContentEntryForm.d.ts

@@ -0,0 +1,22 @@
+import { Dispatch, SetStateAction } from "react";
+import { FormOnSubmit } from "@webiny/form";
+import { CmsEditorContentModel, CmsEditorFieldRendererPlugin } from "../../../types";
+interface UseContentEntryForm {
+    data: Record<string, any>;
+    loading: boolean;
+    setLoading: Dispatch<SetStateAction<boolean>>;
+    onChange: FormOnSubmit;
+    onSubmit: (data: Record<string, any>) => void;
+    invalidFields: Record<string, string>;
+    renderPlugins: CmsEditorFieldRendererPlugin[];
+}
+export interface UseContentEntryFormParams {
+    contentModel: CmsEditorContentModel;
+    entry?: {
+        [key: string]: any;
+    };
+    onChange?: FormOnSubmit;
+    onSubmit?: FormOnSubmit;
+}
+export declare function useContentEntryForm(params: UseContentEntryFormParams): UseContentEntryForm;
+export {};