@strapi/admin 4.3.6 → 4.4.0-alpha.0

package/admin/src/StrapiApp.js

@@ -8,7 +8,7 @@ import invariant from 'invariant';
 import { Helmet } from 'react-helmet';
 import { basename, createHook } from './core/utils';
 import configureStore from './core/store/configureStore';
-import { Plugin } from './core/apis';
+import { customFields, Plugin } from './core/apis';
 import App from './pages/App';
 import AuthLogo from './assets/images/logo_strapi_auth_v4.png';
 import MenuLogo from './assets/images/logo_strapi_menu.png';
@@ -47,6 +47,7 @@ class StrapiApp {
     this.admin = {
       injectionZones,
     };
+    this.customFields = customFields;
 
     this.menu = [];
     this.settings = {
@@ -280,17 +281,7 @@ class StrapiApp {
 
   async initialize() {
     Object.keys(this.appPlugins).forEach((plugin) => {
-      this.appPlugins[plugin].register({
-        addComponents: this.addComponents,
-        addCorePluginMenuLink: this.addCorePluginMenuLink,
-        addFields: this.addFields,
-        addMenuLink: this.addMenuLink,
-        addMiddlewares: this.addMiddlewares,
-        addReducers: this.addReducers,
-        createHook: this.createHook,
-        createSettingSection: this.createSettingSection,
-        registerPlugin: this.registerPlugin,
-      });
+      this.appPlugins[plugin].register(this);
     });
   }
 
@@ -430,6 +421,7 @@ class StrapiApp {
         authLogo={this.configurations.authLogo}
         components={components}
         fields={fields}
+        customFields={this.customFields}
         localeNames={localeNames}
         getAdminInjectedComponents={this.getAdminInjectedComponents}
         getPlugin={this.getPlugin}

package/admin/src/components/Providers/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { QueryClientProvider, QueryClient } from 'react-query';
-import { LibraryProvider, StrapiAppProvider } from '@strapi/helper-plugin';
+import { LibraryProvider, CustomFieldsProvider, StrapiAppProvider } from '@strapi/helper-plugin';
 import { Provider } from 'react-redux';
 import { AdminContext } from '../../contexts';
 import ConfigurationsProvider from '../ConfigurationsProvider';
@@ -25,6 +25,7 @@ const Providers = ({
   authLogo,
   children,
   components,
+  customFields,
   fields,
   getAdminInjectedComponents,
   getPlugin,
@@ -64,15 +65,17 @@ const Providers = ({
                   settings={settings}
                 >
                   <LibraryProvider components={components} fields={fields}>
-                    <LanguageProvider messages={messages} localeNames={localeNames}>
-                      <AutoReloadOverlayBlockerProvider>
-                        <OverlayBlocker>
-                          <GuidedTour>
-                            <Notifications>{children}</Notifications>
-                          </GuidedTour>
-                        </OverlayBlocker>
-                      </AutoReloadOverlayBlockerProvider>
-                    </LanguageProvider>
+                    <CustomFieldsProvider customFields={customFields}>
+                      <LanguageProvider messages={messages} localeNames={localeNames}>
+                        <AutoReloadOverlayBlockerProvider>
+                          <OverlayBlocker>
+                            <GuidedTour>
+                              <Notifications>{children}</Notifications>
+                            </GuidedTour>
+                          </OverlayBlocker>
+                        </AutoReloadOverlayBlockerProvider>
+                      </LanguageProvider>
+                    </CustomFieldsProvider>
                   </LibraryProvider>
                 </StrapiAppProvider>
               </ConfigurationsProvider>
@@ -88,6 +91,7 @@ Providers.propTypes = {
   authLogo: PropTypes.oneOfType([PropTypes.string, PropTypes.any]).isRequired,
   children: PropTypes.element.isRequired,
   components: PropTypes.object.isRequired,
+  customFields: PropTypes.object.isRequired,
   fields: PropTypes.object.isRequired,
   getAdminInjectedComponents: PropTypes.func.isRequired,
   getPlugin: PropTypes.func.isRequired,

package/admin/src/content-manager/components/FieldTypeIcon/index.js

@@ -1,5 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { Box } from '@strapi/design-system/Box';
+import { useCustomFields } from '@strapi/helper-plugin';
 import Date from '@strapi/icons/Date';
 import Boolean from '@strapi/icons/Boolean';
 import Email from '@strapi/icons/Email';
@@ -40,10 +42,38 @@ const iconByTypes = {
   dynamiczone: <DynamicZone />,
 };
 
-const FieldTypeIcon = ({ type }) => iconByTypes[type] || null;
+const FieldTypeIcon = ({ type, customFieldUid }) => {
+  const customFieldsRegistry = useCustomFields();
+
+  let Compo = iconByTypes[type];
+
+  if (customFieldUid) {
+    const customField = customFieldsRegistry.get(customFieldUid);
+    const CustomFieldIcon = customField.icon;
+
+    if (CustomFieldIcon) {
+      Compo = (
+        <Box marginRight={3} width={7} height={6}>
+          <CustomFieldIcon />
+        </Box>
+      );
+    }
+  }
+
+  if (!iconByTypes[type]) {
+    return null;
+  }
+
+  return Compo;
+};
+
+FieldTypeIcon.defaultProps = {
+  customFieldUid: null,
+};
 
 FieldTypeIcon.propTypes = {
   type: PropTypes.string.isRequired,
+  customFieldUid: PropTypes.string,
 };
 
 export default FieldTypeIcon;

package/admin/src/content-manager/components/Inputs/index.js

@@ -5,7 +5,7 @@ import get from 'lodash/get';
 import omit from 'lodash/omit';
 import take from 'lodash/take';
 import isEqual from 'react-fast-compare';
-import { GenericInput, NotAllowedInput, useLibrary } from '@strapi/helper-plugin';
+import { GenericInput, NotAllowedInput, useLibrary, useCustomFields } from '@strapi/helper-plugin';
 import { useContentTypeLayout } from '../../hooks';
 import { getFieldName } from '../../utils';
 import Wysiwyg from '../Wysiwyg';
@@ -39,9 +39,10 @@ function Inputs({
   const { fields } = useLibrary();
   const { formatMessage } = useIntl();
   const { contentType: currentContentTypeLayout } = useContentTypeLayout();
+  const customFieldsRegistry = useCustomFields();
 
   const disabled = useMemo(() => !get(metadatas, 'editable', true), [metadatas]);
-  const type = fieldSchema.type;
+  const { type, customField: customFieldUid } = fieldSchema;
   const error = get(formErrors, [keys], null);
 
   const fieldName = useMemo(() => {
@@ -191,6 +192,19 @@ function Inputs({
     return minutes % metadatas.step === 0 ? metadatas.step : step;
   }, [inputType, inputValue, metadatas.step, step]);
 
+  // Memoize the component to avoid remounting it and losing state
+  const CustomFieldInput = useMemo(() => {
+    if (customFieldUid) {
+      const customField = customFieldsRegistry.get(customFieldUid);
+      const CustomFieldInput = React.lazy(customField.components.Input);
+
+      return CustomFieldInput;
+    }
+
+    // Not a custom field, component won't be used
+    return null;
+  }, [customFieldUid, customFieldsRegistry]);
+
   if (visible === false) {
     return null;
   }
@@ -244,6 +258,18 @@ function Inputs({
     );
   }
 
+  const customInputs = {
+    json: InputJSON,
+    uid: InputUID,
+    media: fields.media,
+    wysiwyg: Wysiwyg,
+    ...fields,
+  };
+
+  if (customFieldUid) {
+    customInputs[customFieldUid] = CustomFieldInput;
+  }
+
   return (
     <GenericInput
       attribute={fieldSchema}
@@ -256,13 +282,7 @@ function Inputs({
       error={error}
       labelAction={labelAction}
       contentTypeUID={currentContentTypeLayout.uid}
-      customInputs={{
-        json: InputJSON,
-        uid: InputUID,
-        media: fields.media,
-        wysiwyg: Wysiwyg,
-        ...fields,
-      }}
+      customInputs={customInputs}
       multiple={fieldSchema.multiple || false}
       name={keys}
       onChange={onChange}
@@ -270,7 +290,7 @@ function Inputs({
       placeholder={placeholder ? { id: placeholder, defaultMessage: placeholder } : null}
       required={fieldSchema.required || false}
       step={inputStep}
-      type={inputType}
+      type={customFieldUid || inputType}
       // validations={validations}
       value={inputValue}
       withDefaultValue={false}

package/admin/src/content-manager/pages/EditSettingsView/components/FormModal.js

@@ -26,7 +26,7 @@ const HeaderContainer = styled(Flex)`
   }
 `;
 
-const FormModal = ({ onToggle, onMetaChange, onSizeChange, onSubmit, type }) => {
+const FormModal = ({ onToggle, onMetaChange, onSizeChange, onSubmit, type, customFieldUid }) => {
   const { selectedField } = useLayoutDnd();
   const { formatMessage } = useIntl();
 
@@ -47,7 +47,7 @@ const FormModal = ({ onToggle, onMetaChange, onSizeChange, onSubmit, type }) =>
       <form onSubmit={onSubmit}>
         <ModalHeader>
           <HeaderContainer>
-            <FieldTypeIcon type={getAttrType(type)} />
+            <FieldTypeIcon type={getAttrType()} customFieldUid={customFieldUid} />
             <Typography fontWeight="bold" textColor="neutral800" as="h2" id="title">
               {formatMessage(
                 {
@@ -81,7 +81,12 @@ const FormModal = ({ onToggle, onMetaChange, onSizeChange, onSubmit, type }) =>
   );
 };
 
+FormModal.defaultProps = {
+  customFieldUid: null,
+};
+
 FormModal.propTypes = {
+  customFieldUid: PropTypes.string,
   onSubmit: PropTypes.func.isRequired,
   onToggle: PropTypes.func.isRequired,
   onMetaChange: PropTypes.func.isRequired,

package/admin/src/content-manager/pages/EditSettingsView/index.js

@@ -371,9 +371,10 @@ const EditSettingsView = ({ mainLayout, components, isContentTypeView, slug, upd
           <ModalForm
             onSubmit={handleMetaSubmit}
             onToggle={handleToggleModal}
-            type={get(attributes, [metaToEdit, 'type'], '')}
             onMetaChange={handleMetaChange}
             onSizeChange={handleSizeChange}
+            type={get(attributes, [metaToEdit, 'type'], '')}
+            customFieldUid={get(attributes, [metaToEdit, 'customField'], '')}
           />
         )}
       </Main>

package/admin/src/content-manager/pages/EditView/index.js

@@ -1,7 +1,12 @@
-import React, { memo, useCallback, useMemo } from 'react';
+import React, { Suspense, memo, useCallback, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import get from 'lodash/get';
-import { CheckPermissions, useTracking, LinkButton } from '@strapi/helper-plugin';
+import {
+  CheckPermissions,
+  LoadingIndicatorPage,
+  useTracking,
+  LinkButton,
+} from '@strapi/helper-plugin';
 import { useIntl } from 'react-intl';
 import { ContentLayout } from '@strapi/design-system/Layout';
 import { Box } from '@strapi/design-system/Box';
@@ -131,99 +136,101 @@ const EditView = ({
               <ContentLayout>
                 <Grid gap={4}>
                   <GridItem col={9} s={12}>
-                    <Stack spacing={6}>
-                      {formattedContentTypeLayout.map((row, index) => {
-                        if (isDynamicZone(row)) {
-                          const {
-                            0: {
-                              0: { name, fieldSchema, metadatas, labelAction },
-                            },
-                          } = row;
+                    <Suspense fallback={<LoadingIndicatorPage />}>
+                      <Stack spacing={6}>
+                        {formattedContentTypeLayout.map((row, index) => {
+                          if (isDynamicZone(row)) {
+                            const {
+                              0: {
+                                0: { name, fieldSchema, metadatas, labelAction },
+                              },
+                            } = row;
+
+                            return (
+                              <Box key={index}>
+                                <Grid gap={4}>
+                                  <GridItem col={12} s={12} xs={12}>
+                                    <DynamicZone
+                                      name={name}
+                                      fieldSchema={fieldSchema}
+                                      labelAction={labelAction}
+                                      metadatas={metadatas}
+                                    />
+                                  </GridItem>
+                                </Grid>
+                              </Box>
+                            );
+                          }
 
                           return (
-                            <Box key={index}>
-                              <Grid gap={4}>
-                                <GridItem col={12} s={12} xs={12}>
-                                  <DynamicZone
-                                    name={name}
-                                    fieldSchema={fieldSchema}
-                                    labelAction={labelAction}
-                                    metadatas={metadatas}
-                                  />
-                                </GridItem>
-                              </Grid>
-                            </Box>
-                          );
-                        }
+                            <Box
+                              key={index}
+                              hasRadius
+                              background="neutral0"
+                              shadow="tableShadow"
+                              paddingLeft={6}
+                              paddingRight={6}
+                              paddingTop={6}
+                              paddingBottom={6}
+                              borderColor="neutral150"
+                            >
+                              <Stack spacing={6}>
+                                {row.map((grid, gridIndex) => {
+                                  return (
+                                    <Grid gap={4} key={gridIndex}>
+                                      {grid.map(
+                                        ({ fieldSchema, labelAction, metadatas, name, size }) => {
+                                          const isComponent = fieldSchema.type === 'component';
 
-                        return (
-                          <Box
-                            key={index}
-                            hasRadius
-                            background="neutral0"
-                            shadow="tableShadow"
-                            paddingLeft={6}
-                            paddingRight={6}
-                            paddingTop={6}
-                            paddingBottom={6}
-                            borderColor="neutral150"
-                          >
-                            <Stack spacing={6}>
-                              {row.map((grid, gridIndex) => {
-                                return (
-                                  <Grid gap={4} key={gridIndex}>
-                                    {grid.map(
-                                      ({ fieldSchema, labelAction, metadatas, name, size }) => {
-                                        const isComponent = fieldSchema.type === 'component';
+                                          if (isComponent) {
+                                            const {
+                                              component,
+                                              max,
+                                              min,
+                                              repeatable = false,
+                                              required = false,
+                                            } = fieldSchema;
 
-                                        if (isComponent) {
-                                          const {
-                                            component,
-                                            max,
-                                            min,
-                                            repeatable = false,
-                                            required = false,
-                                          } = fieldSchema;
+                                            return (
+                                              <GridItem col={size} s={12} xs={12} key={component}>
+                                                <FieldComponent
+                                                  componentUid={component}
+                                                  labelAction={labelAction}
+                                                  isRepeatable={repeatable}
+                                                  intlLabel={{
+                                                    id: metadatas.label,
+                                                    defaultMessage: metadatas.label,
+                                                  }}
+                                                  max={max}
+                                                  min={min}
+                                                  name={name}
+                                                  required={required}
+                                                />
+                                              </GridItem>
+                                            );
+                                          }
 
                                           return (
-                                            <GridItem col={size} s={12} xs={12} key={component}>
-                                              <FieldComponent
-                                                componentUid={component}
+                                            <GridItem col={size} key={name} s={12} xs={12}>
+                                              <Inputs
+                                                fieldSchema={fieldSchema}
+                                                keys={name}
                                                 labelAction={labelAction}
-                                                isRepeatable={repeatable}
-                                                intlLabel={{
-                                                  id: metadatas.label,
-                                                  defaultMessage: metadatas.label,
-                                                }}
-                                                max={max}
-                                                min={min}
-                                                name={name}
-                                                required={required}
+                                                metadatas={metadatas}
                                               />
                                             </GridItem>
                                           );
                                         }
-
-                                        return (
-                                          <GridItem col={size} key={name} s={12} xs={12}>
-                                            <Inputs
-                                              fieldSchema={fieldSchema}
-                                              keys={name}
-                                              labelAction={labelAction}
-                                              metadatas={metadatas}
-                                            />
-                                          </GridItem>
-                                        );
-                                      }
-                                    )}
-                                  </Grid>
-                                );
-                              })}
-                            </Stack>
-                          </Box>
-                        );
-                      })}
-                    </Stack>
+                                      )}
+                                    </Grid>
+                                  );
+                                })}
+                              </Stack>
+                            </Box>
+                          );
+                        })}
+                      </Stack>
+                    </Suspense>
                   </GridItem>
                   <GridItem col={3} s={12}>
                     <Stack spacing={2}>

package/admin/src/core/apis/CustomFields.js

@@ -0,0 +1,80 @@
+import invariant from 'invariant';
+
+const ALLOWED_TYPES = [
+  'biginteger',
+  'boolean',
+  'date',
+  'datetime',
+  'decimal',
+  'email',
+  'enumeration',
+  'float',
+  'integer',
+  'json',
+  'password',
+  'richtext',
+  'string',
+  'text',
+  'time',
+  'timestamp',
+  'uid',
+];
+
+class CustomFields {
+  constructor() {
+    this.customFields = {};
+  }
+
+  register(customFields) {
+    if (Array.isArray(customFields)) {
+      // If several custom fields are passed, register them one by one
+      customFields.forEach(customField => {
+        this.register(customField);
+      });
+    } else {
+      // Handle individual custom field
+      const { name, pluginId, type, intlLabel, intlDescription, components } = customFields;
+
+      // Ensure required attributes are provided
+      invariant(name, 'A name must be provided');
+      invariant(type, 'A type must be provided');
+      invariant(intlLabel, 'An intlLabel must be provided');
+      invariant(intlDescription, 'An intlDescription must be provided');
+      invariant(components, 'A components object must be provided');
+      invariant(components.Input, 'An Input component must be provided');
+
+      // Ensure the type is valid
+      invariant(
+        ALLOWED_TYPES.includes(type),
+        `Custom field type: '${type}' is not a valid Strapi type or it can't be used with a Custom Field`
+      );
+
+      // Ensure name has no special characters
+      const isValidObjectKey = /^(?![0-9])[a-zA-Z0-9$_-]+$/g;
+      invariant(
+        isValidObjectKey.test(name),
+        `Custom field name: '${name}' is not a valid object key`
+      );
+
+      // When no plugin is specified, default to the global namespace
+      const uid = pluginId ? `plugin::${pluginId}.${name}` : `global::${name}`;
+
+      // Ensure the uid is unique
+      const uidAlreadyUsed = Object.prototype.hasOwnProperty.call(this.customFields, uid);
+      invariant(!uidAlreadyUsed, `Custom field: '${uid}' has already been registered`);
+
+      this.customFields[uid] = customFields;
+    }
+  }
+
+  getAll() {
+    return this.customFields;
+  }
+
+  get(uid) {
+    return this.customFields[uid];
+  }
+}
+
+// Export an instance since it's a singleton
+export default new CustomFields();

package/admin/src/core/apis/index.js

@@ -3,3 +3,4 @@ export { default as Components } from './Components';
 export { default as Middlewares } from './Middlewares';
 export { default as Plugin } from './Plugin';
 export { default as Reducers } from './Reducers';
+export { default as customFields } from './CustomFields';