Register custom fields in admin core

examples/getstarted/src/plugins/mycustomfields/admin/src/index.js

@@ -1,28 +1,29 @@
 import { prefixPluginTranslations } from '@strapi/helper-plugin';
 import pluginId from './pluginId';
-// TODO: Uncomment for EXPANSION-235
-//import ColorPickerIcon from './components/ColorPicker/ColorPickerIcon';
+import ColorPickerIcon from './components/ColorPicker/ColorPickerIcon';
 
 export default {
   register(app) {
-    // TODO: Uncomment for EXPANSION-235
-    // app.customFields.register({
-    //   name: 'color',
-    //   pluginId: 'mycustomfields',
-    //   type: 'text',
-    //   icon: ColorPickerIcon,
-    //   intlLabel: {
-    //     id: 'mycustomfields.color.label',
-    //     defaultMessage: 'Color',
-    //   },
-    //   intlDescription: {
-    //     id: 'mycustomfields.color.description',
-    //     defaultMessage: 'Select any color',
-    //   },
-    //   components: {
-    //     Input: async () => import(/* webpackChunkName: "input-component" */ './components/ColorPicker/ColorPickerInput'),
-    //   },
-    // });
+    app.customFields.register({
+      name: 'color',
+      pluginId: 'mycustomfields',
+      type: 'text',
+      icon: ColorPickerIcon,
+      intlLabel: {
+        id: 'mycustomfields.color.label',
+        defaultMessage: 'Color',
+      },
+      intlDescription: {
+        id: 'mycustomfields.color.description',
+        defaultMessage: 'Select any color',
+      },
+      components: {
+        Input: async () =>
+          import(
+            /* webpackChunkName: "input-component" */ './components/ColorPicker/ColorPickerInput'
+          ),
+      },
+    });
   },
   bootstrap(app) {},
   async registerTrads({ locales }) {

packages/core/admin/admin/src/StrapiApp.js

@@ -24,7 +24,7 @@ import injectionZones from './injectionZones';
 import favicon from './favicon.ico';
 
 class StrapiApp {
-  constructor({ adminConfig, appPlugins, library, middlewares, reducers }) {
+  constructor({ adminConfig, appPlugins, library, middlewares, reducers, customFields }) {
     this.customConfigurations = adminConfig.config;
     this.customBootstrapConfiguration = adminConfig.bootstrap;
     this.configurations = {
@@ -47,6 +47,7 @@ class StrapiApp {
     this.admin = {
       injectionZones,
     };
+    this.customFields = customFields;
 
     this.menu = [];
     this.settings = {
@@ -290,6 +291,7 @@ class StrapiApp {
         createHook: this.createHook,
         createSettingSection: this.createSettingSection,
         registerPlugin: this.registerPlugin,
+        customFields: this.customFields,
       });
     });
   }
@@ -424,12 +426,14 @@ class StrapiApp {
       components: { components },
       fields: { fields },
     } = this.library;
+    const { customFields } = this.customFields;
 
     return (
       <Providers
         authLogo={this.configurations.authLogo}
         components={components}
         fields={fields}
+        customFields={customFields}
         localeNames={localeNames}
         getAdminInjectedComponents={this.getAdminInjectedComponents}
         getPlugin={this.getPlugin}
@@ -467,5 +471,5 @@ class StrapiApp {
   }
 }
 
-export default ({ adminConfig = {}, appPlugins, library, middlewares, reducers }) =>
-  new StrapiApp({ adminConfig, appPlugins, library, middlewares, reducers });
+export default ({ adminConfig = {}, appPlugins, library, middlewares, reducers, customFields }) =>
+  new StrapiApp({ adminConfig, appPlugins, library, middlewares, reducers, customFields });

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

@@ -0,0 +1,25 @@
+import invariant from 'invariant';
+
+class CustomFields {
+  constructor() {
+    this.customFields = {};
+  }
+
+  register(customField) {
+    const { name, pluginId, type, intlLabel, intlDescription, components } = customField;
+
+    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');
+
+    // When no plugin is specified, default to the global namespace
+    const namespace = pluginId ? `plugin::${pluginId}.${name}` : `global::global.${name}`;
+
+    this.customFields[namespace] = customField;
+  }
+}
+
+export default () => new CustomFields();

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

@@ -1,4 +1,5 @@
 export { default as Fields } from './Fields';
+export { default as CustomFields } from './CustomFields';
 export { default as Components } from './Components';
 export { default as Middlewares } from './Middlewares';
 export { default as Plugin } from './Plugin';

packages/core/admin/admin/src/index.js

@@ -1,5 +1,5 @@
 import ReactDOM from 'react-dom';
-import { Components, Fields, Middlewares, Reducers } from './core/apis';
+import { Components, CustomFields, Fields, Middlewares, Reducers } from './core/apis';
 import { axiosInstance } from './core/utils';
 import appCustomisations from './app';
 // eslint-disable-next-line import/extensions
@@ -23,6 +23,7 @@ const library = {
 };
 const middlewares = Middlewares();
 const reducers = Reducers({ appReducers });
+const customFields = CustomFields();
 
 const MOUNT_NODE = document.getElementById('app');
 
@@ -57,6 +58,7 @@ const run = async () => {
     bootstrap: customConfig,
     middlewares,
     reducers,
+    customFields,
   });
 
   await app.bootstrapAdmin();