@akemona-org/strapi-plugin-content-type-builder 3.7.0

package/admin/src/containers/FormModal/attributes/baseForm.js

@@ -0,0 +1,322 @@
+import React, { Fragment } from 'react';
+import { FormattedMessage } from 'react-intl';
+import getTrad from '../../../utils/getTrad';
+import { componentField, componentForm } from '../component';
+import { nameField } from './nameField';
+import uiHelpers from './uiHelpers';
+
+const baseForm = {
+  component: (data, step) => {
+    if (step === '1') {
+      const itemsToConcat =
+        data.createComponent === true
+          ? [[uiHelpers.spacer]].concat(componentForm.base('componentToCreate.'))
+          : [[uiHelpers.spacer]];
+
+      return {
+        items: [[componentField], ...itemsToConcat],
+      };
+    }
+
+    return {
+      items: [
+        [
+          nameField,
+          {
+            name: 'component',
+            type: 'componentSelect',
+            label: {
+              id: getTrad('modalForm.attributes.select-component'),
+            },
+            isMultiple: false,
+          },
+        ],
+        [
+          {
+            label: {
+              id: getTrad('modalForm.attribute.text.type-selection'),
+            },
+            name: 'repeatable',
+            type: 'booleanBox',
+            size: 12,
+            options: [
+              {
+                headerId: getTrad('form.attribute.component.option.repeatable'),
+                descriptionId: getTrad('form.attribute.component.option.repeatable.description'),
+                value: true,
+              },
+              {
+                headerId: getTrad('form.attribute.component.option.single'),
+                descriptionId: getTrad('form.attribute.component.option.single.description'),
+                value: false,
+              },
+            ],
+            validations: {},
+          },
+        ],
+        [uiHelpers.spacer],
+      ],
+    };
+  },
+  date: () => {
+    return {
+      items: [
+        [
+          nameField,
+          {
+            label: {
+              id: getTrad('modalForm.attribute.text.type-selection'),
+            },
+            name: 'type',
+            type: 'select',
+            options: [
+              { id: 'components.InputSelect.option.placeholder', value: '' },
+              {
+                id: 'form.attribute.item.date.type.date',
+                value: 'date',
+              },
+              {
+                id: 'form.attribute.item.date.type.datetime',
+                value: 'datetime',
+              },
+              // Not sure the ctm supports that one
+              // {
+              //   id: 'form.attribute.item.date.type.timestamp',
+              //   value: 'timestamp',
+              // },
+              { id: 'form.attribute.item.date.type.time', value: 'time' },
+            ].map(({ id, value }, index) => {
+              const disabled = index === 0;
+              const tradId = index === 0 ? id : getTrad(id);
+
+              return (
+                <FormattedMessage id={tradId} key={id}>
+                  {msg => (
+                    <option disabled={disabled} hidden={disabled} value={value}>
+                      {msg}
+                    </option>
+                  )}
+                </FormattedMessage>
+              );
+            }),
+            validations: {
+              required: true,
+            },
+          },
+        ],
+      ],
+    };
+  },
+  enumeration: () => {
+    return {
+      items: [
+        [nameField],
+        [
+          {
+            autoFocus: false,
+            name: 'enum',
+            type: 'textarea',
+            size: 8,
+            label: {
+              id: getTrad('form.attribute.item.enumeration.rules'),
+            },
+            placeholder: {
+              id: getTrad('form.attribute.item.enumeration.placeholder'),
+            },
+            validations: {
+              required: true,
+            },
+          },
+        ],
+      ],
+    };
+  },
+  media: () => {
+    return {
+      items: [
+        [nameField],
+        [
+          {
+            label: { id: getTrad('modalForm.attribute.text.type-selection') },
+            name: 'multiple',
+            size: 12,
+            type: 'booleanBox',
+            options: [
+              {
+                headerId: getTrad('form.attribute.media.option.multiple'),
+                descriptionId: getTrad('form.attribute.media.option.multiple.description'),
+                value: true,
+              },
+              {
+                headerId: getTrad('form.attribute.media.option.single'),
+                descriptionId: getTrad('form.attribute.media.option.single.description'),
+                value: false,
+              },
+            ],
+            validations: {},
+          },
+        ],
+        [uiHelpers.spacerMedium],
+      ],
+    };
+  },
+  number: () => {
+    return {
+      items: [
+        [
+          nameField,
+          {
+            label: {
+              id: getTrad('form.attribute.item.number.type'),
+            },
+            name: 'type',
+            type: 'select',
+            options: [
+              { id: 'components.InputSelect.option.placeholder', value: '' },
+              {
+                id: 'form.attribute.item.number.type.integer',
+                value: 'integer',
+              },
+              {
+                id: 'form.attribute.item.number.type.biginteger',
+                value: 'biginteger',
+              },
+              {
+                id: 'form.attribute.item.number.type.decimal',
+                value: 'decimal',
+              },
+              { id: 'form.attribute.item.number.type.float', value: 'float' },
+            ].map(({ id, value }, index) => {
+              const disabled = index === 0;
+              const tradId = index === 0 ? id : getTrad(id);
+
+              return (
+                <FormattedMessage id={tradId} key={id}>
+                  {msg => (
+                    <option disabled={disabled} hidden={disabled} value={value}>
+                      {msg}
+                    </option>
+                  )}
+                </FormattedMessage>
+              );
+            }),
+            validations: {
+              required: true,
+            },
+          },
+        ],
+      ],
+    };
+  },
+  relation: () => {
+    return {
+      items: [
+        [
+          {
+            type: 'relation',
+          },
+        ],
+      ],
+    };
+  },
+  string: () => {
+    return {
+      items: [
+        [nameField],
+        [
+          {
+            label: { id: getTrad('modalForm.attribute.text.type-selection') },
+            name: 'type',
+            size: 12,
+            type: 'booleanBox',
+            options: [
+              {
+                headerId: getTrad('form.attribute.text.option.short-text'),
+                descriptionId: getTrad('form.attribute.text.option.short-text.description'),
+                value: 'string',
+              },
+              {
+                headerId: getTrad('form.attribute.text.option.long-text'),
+                descriptionId: getTrad('form.attribute.text.option.long-text.description'),
+                value: 'text',
+              },
+            ],
+            validations: {},
+          },
+        ],
+        [uiHelpers.spacerMedium],
+      ],
+    };
+  },
+  text: () => {
+    return {
+      items: [
+        [nameField],
+        [
+          {
+            label: { id: getTrad('modalForm.attribute.text.type-selection') },
+            name: 'type',
+            size: 12,
+            type: 'booleanBox',
+            options: [
+              {
+                headerId: getTrad('form.attribute.text.option.short-text'),
+                descriptionId: getTrad('form.attribute.text.option.short-text.description'),
+                value: 'string',
+              },
+              {
+                headerId: getTrad('form.attribute.text.option.long-text'),
+                descriptionId: getTrad('form.attribute.text.option.long-text.description'),
+                value: 'text',
+              },
+            ],
+            validations: {},
+          },
+        ],
+        [uiHelpers.spacerMedium],
+      ],
+    };
+  },
+  uid: (data, step, attributes) => {
+    const options = Object.keys(attributes)
+      .filter(key => ['string', 'text'].includes(attributes[key].type))
+      .map(key => ({ id: key, value: key }));
+
+    return {
+      items: [
+        [
+          {
+            ...nameField,
+            placeholder: {
+              id: getTrad('modalForm.attribute.form.base.name.placeholder'),
+            },
+          },
+          {
+            label: {
+              id: getTrad('modalForm.attribute.target-field'),
+            },
+            name: 'targetField',
+            type: 'select',
+            options: [{ id: getTrad('none'), value: '' }, ...options].map((option, index) => (
+              // eslint-disable-next-line react/no-array-index-key
+              <Fragment key={index}>
+                {index === 0 ? (
+                  <FormattedMessage id={option.id}>
+                    {msg => <option value={option.value}>{msg}</option>}
+                  </FormattedMessage>
+                ) : (
+                  <option value={option.value}>{option.value}</option>
+                )}
+              </Fragment>
+            )),
+            validations: {
+              required: true,
+            },
+          },
+        ],
+      ],
+    };
+  },
+};
+
+export default baseForm;

package/admin/src/containers/FormModal/attributes/commonBaseForm.js

@@ -0,0 +1,7 @@
+import { nameField } from './nameField';
+
+const commonBaseForm = {
+  items: [[nameField]],
+};
+
+export default commonBaseForm;

package/admin/src/containers/FormModal/attributes/form.js

@@ -0,0 +1,9 @@
+import advancedForm from './advancedForm';
+import baseForm from './baseForm';
+
+const form = {
+  advanced: advancedForm,
+  base: baseForm,
+};
+
+export default form;

package/admin/src/containers/FormModal/attributes/index.js

@@ -0,0 +1,4 @@
+// eslint-disable-next-line import/prefer-default-export
+export { default as attributesForm } from './form';
+export { default as commonBaseForm } from './commonBaseForm';
+export { default as attributeTypes } from './types';

package/admin/src/containers/FormModal/attributes/nameField.js

@@ -0,0 +1,19 @@
+import getTrad from '../../../utils/getTrad';
+
+const nameField = {
+  autoFocus: true,
+  name: 'name',
+  type: 'text',
+  label: {
+    id: getTrad('modalForm.attribute.form.base.name'),
+  },
+  description: {
+    id: getTrad('modalForm.attribute.form.base.name.description'),
+  },
+  validations: {
+    required: true,
+  },
+};
+
+// eslint-disable-next-line import/prefer-default-export
+export { nameField };

package/admin/src/containers/FormModal/attributes/types.js

@@ -0,0 +1,309 @@
+import * as yup from 'yup';
+import { translatedErrors as errorsTrads } from 'strapi-helper-plugin';
+import getTrad from '../../../utils/getTrad';
+import {
+  alreadyUsedAttributeNames,
+  createTextShape,
+  isMinSuperiorThanMax,
+  isNameAllowed,
+  validators,
+  NAME_REGEX,
+} from './validation/common';
+
+const types = {
+  date: (usedAttributeNames, reservedNames) => {
+    const shape = {
+      name: validators.name(usedAttributeNames, reservedNames),
+      type: validators.type(),
+    };
+
+    return yup.object(shape);
+  },
+  datetime: (usedAttributeNames, reservedNames) => {
+    const shape = {
+      name: validators.name(usedAttributeNames, reservedNames),
+      type: validators.type(),
+    };
+
+    return yup.object(shape);
+  },
+  time: (usedAttributeNames, reservedNames) => {
+    const shape = {
+      name: validators.name(usedAttributeNames, reservedNames),
+      type: validators.type(),
+    };
+
+    return yup.object(shape);
+  },
+  default: (usedAttributeNames, reservedNames) => {
+    const shape = {
+      name: validators.name(usedAttributeNames, reservedNames),
+      type: validators.type(),
+    };
+
+    return yup.object(shape);
+  },
+  biginteger: (usedAttributeNames, reservedNames) => {
+    const shape = {
+      name: validators.name(usedAttributeNames, reservedNames),
+      type: validators.type(),
+      default: yup
+        .string()
+        .nullable()
+        .matches(/^\d*$/),
+      unique: validators.unique(),
+      required: validators.required(),
+      max: yup
+        .string()
+        .nullable()
+        .matches(/^\d*$/, errorsTrads.regex),
+      min: yup
+        .string()
+        .nullable()
+        .test(isMinSuperiorThanMax)
+        .matches(/^\d*$/, errorsTrads.regex),
+    };
+
+    return yup.object(shape);
+  },
+  boolean: (usedAttributeNames, reservedNames) => {
+    const shape = {
+      name: validators.name(usedAttributeNames, reservedNames),
+      default: yup.boolean().nullable(),
+      required: validators.required(),
+      unique: validators.unique(),
+    };
+
+    return yup.object(shape);
+  },
+  component: (usedAttributeNames, reservedNames) => {
+    const shape = {
+      name: validators.name(usedAttributeNames, reservedNames),
+      type: validators.type(),
+      required: validators.required(),
+      max: validators.max(),
+      min: validators.min(),
+      component: yup.string().required(errorsTrads.required),
+    };
+
+    return yup.object(shape);
+  },
+  decimal: (usedAttributeNames, reservedNames) => {
+    const shape = {
+      name: validators.name(usedAttributeNames, reservedNames),
+      type: validators.type(),
+      default: yup.number(),
+      required: validators.required(),
+      max: yup.number(),
+      min: yup.number().test(isMinSuperiorThanMax),
+    };
+
+    return yup.object(shape);
+  },
+  dynamiczone: (usedAttributeNames, reservedNames) => {
+    const shape = {
+      name: validators.name(usedAttributeNames, reservedNames),
+      type: validators.type(),
+      required: validators.required(),
+      max: validators.max(),
+      min: validators.min(),
+    };
+
+    return yup.object(shape);
+  },
+  email: (usedAttributeNames, reservedNames) => {
+    const shape = {
+      name: validators.name(usedAttributeNames, reservedNames),
+      type: validators.type(),
+      default: yup
+        .string()
+        .email()
+        .nullable(),
+      unique: validators.unique(),
+      required: validators.required(),
+      maxLength: validators.maxLength(),
+      minLength: validators.minLength(),
+    };
+
+    return yup.object(shape);
+  },
+  enumeration: (usedAttributeNames, reservedNames) => {
+    const ENUM_REGEX = new RegExp('^[_A-Za-z][_0-9A-Za-z]*$');
+
+    const shape = {
+      name: yup
+        .string()
+        .test(alreadyUsedAttributeNames(usedAttributeNames))
+        .test(isNameAllowed(reservedNames))
+        .matches(ENUM_REGEX, errorsTrads.regex)
+        .required(errorsTrads.required),
+      type: validators.type(),
+      default: validators.default(),
+      unique: validators.unique(),
+      required: validators.required(),
+      enum: yup
+        .array()
+        .of(yup.string())
+        .min(1, errorsTrads.min)
+        .test({
+          name: 'areEnumValuesUnique',
+          message: getTrad('error.validation.enum-duplicate'),
+          test: values => {
+            const filtered = [...new Set(values)];
+
+            return filtered.length === values.length;
+          },
+        })
+        .test({
+          name: 'valuesMatchesRegex',
+          message: errorsTrads.regex,
+          test: values => {
+            return values.every(val => val === '' || ENUM_REGEX.test(val));
+          },
+        })
+        .test({
+          name: 'doesNotHaveEmptyValues',
+          message: getTrad('error.validation.enum-empty-string'),
+          test: values => !values.some(val => val === ''),
+        }),
+      enumName: yup.string().nullable(),
+    };
+
+    return yup.object(shape);
+  },
+  float: (usedAttributeNames, reservedNames) => {
+    const shape = {
+      name: validators.name(usedAttributeNames, reservedNames),
+      type: validators.type(),
+      required: validators.required(),
+      default: yup.number(),
+      max: yup.number(),
+      min: yup.number().test(isMinSuperiorThanMax),
+    };
+
+    return yup.object(shape);
+  },
+  integer: (usedAttributeNames, reservedNames) => {
+    const shape = {
+      name: validators.name(usedAttributeNames, reservedNames),
+      type: validators.type(),
+      default: yup.number().integer(),
+      unique: validators.unique(),
+      required: validators.required(),
+      max: validators.max(),
+      min: validators.min(),
+    };
+
+    return yup.object(shape);
+  },
+  json: (usedAttributeNames, reservedNames) => {
+    const shape = {
+      name: validators.name(usedAttributeNames, reservedNames),
+      type: validators.type(),
+      required: validators.required(),
+      unique: validators.unique(),
+    };
+
+    return yup.object(shape);
+  },
+  media: (usedAttributeNames, reservedNames) => {
+    const shape = {
+      name: validators.name(usedAttributeNames, reservedNames),
+      type: validators.type(),
+      multiple: yup.boolean(),
+      required: validators.required(),
+      allowedTypes: yup
+        .array()
+        .of(yup.string().oneOf(['images', 'videos', 'files']))
+        .min(1)
+        .nullable(),
+    };
+
+    return yup.object(shape);
+  },
+  password: (usedAttributeNames, reservedNames) => {
+    const shape = {
+      name: validators.name(usedAttributeNames, reservedNames),
+      type: validators.type(),
+      default: validators.default(),
+      unique: validators.unique(),
+      required: validators.required(),
+      maxLength: validators.maxLength(),
+      minLength: validators.minLength(),
+    };
+
+    return yup.object(shape);
+  },
+  relation: (
+    usedAttributeNames,
+    reservedNames,
+    alreadyTakenTargetAttributes,
+    { initialData, modifiedData }
+  ) => {
+    const shape = {
+      name: validators.name(usedAttributeNames, reservedNames),
+      target: yup.string().required(errorsTrads.required),
+      nature: yup.string().required(),
+      dominant: yup.boolean().nullable(),
+      unique: yup.boolean().nullable(),
+      targetAttribute: yup.lazy(() => {
+        let schema = yup.string().test(isNameAllowed(reservedNames));
+        const initialForbiddenName = [...alreadyTakenTargetAttributes, modifiedData.name];
+
+        let forbiddenTargetAttributeName = initialForbiddenName.filter(
+          val => val !== initialData.targetAttribute
+        );
+
+        if (!['oneWay', 'manyWay'].includes(modifiedData.nature)) {
+          schema = schema.matches(NAME_REGEX, errorsTrads.regex);
+        }
+
+        return schema
+          .test({
+            name: 'forbiddenTargetAttributeName',
+            message: getTrad('error.validation.relation.targetAttribute-taken'),
+            test: value => {
+              if (!value) {
+                return false;
+              }
+
+              return !forbiddenTargetAttributeName.includes(value);
+            },
+          })
+          .required(errorsTrads.required);
+      }),
+    };
+
+    return yup.object(shape);
+  },
+  richtext: (usedAttributeNames, reservedNames) => {
+    const shape = {
+      name: validators.name(usedAttributeNames, reservedNames),
+      type: validators.type(),
+      default: validators.default(),
+      unique: validators.unique(),
+      required: validators.required(),
+      maxLength: validators.maxLength(),
+      minLength: validators.minLength(),
+    };
+
+    return yup.object(shape);
+  },
+  string: (usedAttributeNames, reservedNames) => {
+    const shape = createTextShape(usedAttributeNames, reservedNames);
+
+    return yup.object(shape);
+  },
+  text: (usedAttributeNames, reservedNames) => {
+    const shape = createTextShape(usedAttributeNames, reservedNames);
+
+    return yup.object(shape);
+  },
+  uid: (usedAttributeNames, reservedNames) => {
+    const shape = createTextShape(usedAttributeNames, reservedNames);
+
+    return yup.object(shape);
+  },
+};
+
+export default types;

package/admin/src/containers/FormModal/attributes/uiHelpers.js

@@ -0,0 +1,11 @@
+const uiHelpers = {
+  divider: {
+    type: 'divider',
+  },
+  spacer: {
+    type: 'spacer',
+  },
+  spacerMedium: { type: 'spacer-medium' },
+};
+
+export default uiHelpers;