@strapi/content-manager 0.0.0-experimental.bffd3c1819cd08304e7d270e88b4973e9fcbc183 → 0.0.0-experimental.c23f51fc41b3ef5de081f427d07e87af93cdcb2c

package/dist/admin/components/ConfigurationForm/Form.js

@@ -0,0 +1,253 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var strapiAdmin = require('@strapi/admin/strapi-admin');
+var designSystem = require('@strapi/design-system');
+var fractionalIndexing = require('fractional-indexing');
+var pipe = require('lodash/fp/pipe');
+var reactIntl = require('react-intl');
+var attributes = require('../../constants/attributes.js');
+var strings = require('../../utils/strings.js');
+var translations = require('../../utils/translations.js');
+var Fields = require('./Fields.js');
+
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+const ConfigurationForm = ({ attributes: attributes$1, fieldSizes, layout: editLayout, onSubmit })=>{
+    const { components, settings, layout, metadatas } = editLayout;
+    const { formatMessage } = reactIntl.useIntl();
+    const initialValues = React__namespace.useMemo(()=>{
+        const transformations = pipe(flattenPanels, replaceMainFieldWithNameOnly, extractMetadata, addTmpSpaceToLayout, addTmpKeysToLayout);
+        return {
+            layout: transformations(layout),
+            settings
+        };
+    }, [
+        layout,
+        settings
+    ]);
+    return /*#__PURE__*/ jsxRuntime.jsx(strapiAdmin.Layouts.Root, {
+        children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Main, {
+            children: /*#__PURE__*/ jsxRuntime.jsxs(strapiAdmin.Form, {
+                initialValues: initialValues,
+                onSubmit: onSubmit,
+                method: "PUT",
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsx(Header, {
+                        name: settings.displayName ?? ''
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx(strapiAdmin.Layouts.Content, {
+                        children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                            alignItems: "stretch",
+                            background: "neutral0",
+                            direction: "column",
+                            gap: 6,
+                            hasRadius: true,
+                            shadow: "tableShadow",
+                            paddingTop: 6,
+                            paddingBottom: 6,
+                            paddingLeft: 7,
+                            paddingRight: 7,
+                            children: [
+                                /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                                    variant: "delta",
+                                    tag: "h2",
+                                    children: formatMessage({
+                                        id: translations.getTranslation('containers.SettingPage.settings'),
+                                        defaultMessage: 'Settings'
+                                    })
+                                }),
+                                /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Grid.Root, {
+                                    children: [
+                                        /*#__PURE__*/ jsxRuntime.jsx(designSystem.Grid.Item, {
+                                            col: 6,
+                                            s: 12,
+                                            direction: "column",
+                                            alignItems: "stretch",
+                                            children: /*#__PURE__*/ jsxRuntime.jsx(strapiAdmin.InputRenderer, {
+                                                type: "enumeration",
+                                                label: formatMessage({
+                                                    id: translations.getTranslation('containers.SettingPage.editSettings.entry.title'),
+                                                    defaultMessage: 'Entry title'
+                                                }),
+                                                hint: formatMessage({
+                                                    id: translations.getTranslation('containers.SettingPage.editSettings.entry.title.description'),
+                                                    defaultMessage: 'Set the display field of your entry'
+                                                }),
+                                                name: "settings.mainField",
+                                                options: Object.entries(attributes$1).reduce((acc, [key, attribute])=>{
+                                                    if (!attribute) {
+                                                        return acc;
+                                                    }
+                                                    /**
+                       * Create the list of attributes from the schema as to which can
+                       * be our `mainField` and dictate the display name of the schema
+                       * we're editing.
+                       */ if (!attributes.ATTRIBUTE_TYPES_THAT_CANNOT_BE_MAIN_FIELD.includes(attribute.type)) {
+                                                        acc.push({
+                                                            label: key,
+                                                            value: key
+                                                        });
+                                                    }
+                                                    return acc;
+                                                }, [])
+                                            })
+                                        }),
+                                        /*#__PURE__*/ jsxRuntime.jsx(designSystem.Grid.Item, {
+                                            paddingTop: 6,
+                                            paddingBottom: 6,
+                                            col: 12,
+                                            s: 12,
+                                            direction: "column",
+                                            alignItems: "stretch",
+                                            children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Divider, {})
+                                        }),
+                                        /*#__PURE__*/ jsxRuntime.jsx(designSystem.Grid.Item, {
+                                            col: 12,
+                                            s: 12,
+                                            direction: "column",
+                                            alignItems: "stretch",
+                                            children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                                                variant: "delta",
+                                                tag: "h3",
+                                                children: formatMessage({
+                                                    id: translations.getTranslation('containers.SettingPage.view'),
+                                                    defaultMessage: 'View'
+                                                })
+                                            })
+                                        }),
+                                        /*#__PURE__*/ jsxRuntime.jsx(designSystem.Grid.Item, {
+                                            col: 12,
+                                            s: 12,
+                                            direction: "column",
+                                            alignItems: "stretch",
+                                            children: /*#__PURE__*/ jsxRuntime.jsx(Fields.Fields, {
+                                                attributes: attributes$1,
+                                                components: components,
+                                                fieldSizes: fieldSizes,
+                                                metadatas: metadatas
+                                            })
+                                        })
+                                    ]
+                                })
+                            ]
+                        })
+                    })
+                ]
+            })
+        })
+    });
+};
+/**
+ * @internal
+ * @description Panels don't exist in the layout, so we flatten by one.
+ */ const flattenPanels = (layout)=>layout.flat(1);
+/**
+ * @internal
+ * @description We don't need the mainField object in the layout, we only need the name.
+ */ const replaceMainFieldWithNameOnly = (layout)=>layout.map((row)=>row.map((field)=>({
+                ...field,
+                mainField: field.mainField?.name
+            })));
+/**
+ * @internal
+ * @description We extract the metadata values from the field layout, because these are editable by the user.
+ */ const extractMetadata = (layout)=>{
+    return layout.map((row)=>row.map(({ label, disabled, hint, placeholder, size, name, mainField })=>({
+                label,
+                editable: !disabled,
+                description: hint,
+                mainField,
+                placeholder,
+                size,
+                name,
+                __temp_key__: ''
+            })));
+};
+/**
+ * @internal
+ * @description Each row of the layout has a max size of 12 (based on bootstrap grid system)
+ * So in order to offer a better drop zone we add the _TEMP_ div to complete the remaining substract (12 - existing)
+ */ const addTmpSpaceToLayout = (layout)=>[
+        ...layout.map((row)=>{
+            const totalSpaceTaken = row.reduce((acc, field)=>acc + field.size, 0);
+            if (totalSpaceTaken < 12) {
+                return [
+                    ...row,
+                    {
+                        name: Fields.TEMP_FIELD_NAME,
+                        size: 12 - totalSpaceTaken,
+                        __temp_key__: ''
+                    }
+                ];
+            }
+            return row;
+        })
+    ];
+/**
+ * @internal
+ * @description At this point of the transformations we have Field[][], but each row for the form should have a __temp_key__
+ * applied. This means we need to change it so `Field` is nested under the children property.
+ */ const addTmpKeysToLayout = (layout)=>{
+    const keys = fractionalIndexing.generateNKeysBetween(undefined, undefined, layout.length);
+    return layout.map((row, rowIndex)=>{
+        const fieldKeys = fractionalIndexing.generateNKeysBetween(undefined, undefined, row.length);
+        return {
+            __temp_key__: keys[rowIndex],
+            children: row.map((field, fieldIndex)=>{
+                return {
+                    ...field,
+                    __temp_key__: fieldKeys[fieldIndex]
+                };
+            })
+        };
+    });
+};
+const Header = ({ name })=>{
+    const { formatMessage } = reactIntl.useIntl();
+    const modified = strapiAdmin.useForm('Header', (state)=>state.modified);
+    const isSubmitting = strapiAdmin.useForm('Header', (state)=>state.isSubmitting);
+    return /*#__PURE__*/ jsxRuntime.jsx(strapiAdmin.Layouts.Header, {
+        title: formatMessage({
+            id: translations.getTranslation('components.SettingsViewWrapper.pluginHeader.title'),
+            defaultMessage: `Configure the view - {name}`
+        }, {
+            name: strings.capitalise(name)
+        }),
+        subtitle: formatMessage({
+            id: translations.getTranslation('components.SettingsViewWrapper.pluginHeader.description.edit-settings'),
+            defaultMessage: 'Customize how the edit view will look like.'
+        }),
+        navigationAction: /*#__PURE__*/ jsxRuntime.jsx(strapiAdmin.BackButton, {}),
+        primaryAction: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Button, {
+            disabled: !modified,
+            loading: isSubmitting,
+            type: "submit",
+            children: formatMessage({
+                id: 'global.save',
+                defaultMessage: 'Save'
+            })
+        })
+    });
+};
+
+exports.ConfigurationForm = ConfigurationForm;
+//# sourceMappingURL=Form.js.map

package/dist/admin/components/ConfigurationForm/Form.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Form.js","sources":["../../../../admin/src/components/ConfigurationForm/Form.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n  Form,\n  FormProps,\n  useForm,\n  InputRenderer,\n  BackButton,\n  Layouts,\n} from '@strapi/admin/strapi-admin';\nimport { Button, Divider, Flex, Grid, Main, Typography } from '@strapi/design-system';\nimport { generateNKeysBetween } from 'fractional-indexing';\nimport pipe from 'lodash/fp/pipe';\nimport { useIntl } from 'react-intl';\n\nimport { ATTRIBUTE_TYPES_THAT_CANNOT_BE_MAIN_FIELD } from '../../constants/attributes';\nimport { capitalise } from '../../utils/strings';\nimport { getTranslation } from '../../utils/translations';\n\nimport { Fields, FieldsProps, TEMP_FIELD_NAME } from './Fields';\n\nimport type { EditFieldLayout, EditLayout } from '../../hooks/useDocumentLayout';\n\n/* -------------------------------------------------------------------------------------------------\n * ConfigurationForm\n * -----------------------------------------------------------------------------------------------*/\n\ninterface ConfigurationFormProps extends Pick<FieldsProps, 'attributes' | 'fieldSizes'> {\n  layout: EditLayout;\n  onSubmit: FormProps<ConfigurationFormData>['onSubmit'];\n}\n\n/**\n * Every key in EditFieldLayout is turned to optional never and then we overwrite the ones we are using.\n */\n\ntype EditFieldSpacerLayout = {\n  [key in keyof Omit<EditFieldLayout, 'name' | 'size'>]?: never;\n} & {\n  description?: never;\n  editable?: never;\n  name: '_TEMP_';\n  size: number;\n  __temp_key__: string;\n};\n\ninterface ConfigurationFormData extends Pick<EditLayout, 'settings'> {\n  layout: Array<{\n    __temp_key__: string;\n    children: Array<\n      | (Pick<EditFieldLayout, 'label' | 'size' | 'name' | 'placeholder' | 'mainField'> & {\n          description: EditFieldLayout['hint'];\n          editable: EditFieldLayout['disabled'];\n          __temp_key__: string;\n        })\n      | EditFieldSpacerLayout\n    >;\n  }>;\n}\n\nconst ConfigurationForm = ({\n  attributes,\n  fieldSizes,\n  layout: editLayout,\n  onSubmit,\n}: ConfigurationFormProps) => {\n  const { components, settings, layout, metadatas } = editLayout;\n\n  const { formatMessage } = useIntl();\n\n  const initialValues: ConfigurationFormData = React.useMemo(() => {\n    const transformations = pipe(\n      flattenPanels,\n      replaceMainFieldWithNameOnly,\n      extractMetadata,\n      addTmpSpaceToLayout,\n      addTmpKeysToLayout\n    );\n\n    return {\n      layout: transformations(layout),\n      settings,\n    };\n  }, [layout, settings]);\n\n  return (\n    <Layouts.Root>\n      <Main>\n        <Form initialValues={initialValues} onSubmit={onSubmit} method=\"PUT\">\n          <Header name={settings.displayName ?? ''} />\n          <Layouts.Content>\n            <Flex\n              alignItems=\"stretch\"\n              background=\"neutral0\"\n              direction=\"column\"\n              gap={6}\n              hasRadius\n              shadow=\"tableShadow\"\n              paddingTop={6}\n              paddingBottom={6}\n              paddingLeft={7}\n              paddingRight={7}\n            >\n              <Typography variant=\"delta\" tag=\"h2\">\n                {formatMessage({\n                  id: getTranslation('containers.SettingPage.settings'),\n                  defaultMessage: 'Settings',\n                })}\n              </Typography>\n              <Grid.Root>\n                <Grid.Item col={6} s={12} direction=\"column\" alignItems=\"stretch\">\n                  <InputRenderer\n                    type=\"enumeration\"\n                    label={formatMessage({\n                      id: getTranslation('containers.SettingPage.editSettings.entry.title'),\n                      defaultMessage: 'Entry title',\n                    })}\n                    hint={formatMessage({\n                      id: getTranslation(\n                        'containers.SettingPage.editSettings.entry.title.description'\n                      ),\n                      defaultMessage: 'Set the display field of your entry',\n                    })}\n                    name=\"settings.mainField\"\n                    options={Object.entries(attributes).reduce<\n                      Array<{ label: string; value: string }>\n                    >((acc, [key, attribute]) => {\n                      if (!attribute) {\n                        return acc;\n                      }\n\n                      /**\n                       * Create the list of attributes from the schema as to which can\n                       * be our `mainField` and dictate the display name of the schema\n                       * we're editing.\n                       */\n                      if (!ATTRIBUTE_TYPES_THAT_CANNOT_BE_MAIN_FIELD.includes(attribute.type)) {\n                        acc.push({\n                          label: key,\n                          value: key,\n                        });\n                      }\n\n                      return acc;\n                    }, [])}\n                  />\n                </Grid.Item>\n                <Grid.Item\n                  paddingTop={6}\n                  paddingBottom={6}\n                  col={12}\n                  s={12}\n                  direction=\"column\"\n                  alignItems=\"stretch\"\n                >\n                  <Divider />\n                </Grid.Item>\n                <Grid.Item col={12} s={12} direction=\"column\" alignItems=\"stretch\">\n                  <Typography variant=\"delta\" tag=\"h3\">\n                    {formatMessage({\n                      id: getTranslation('containers.SettingPage.view'),\n                      defaultMessage: 'View',\n                    })}\n                  </Typography>\n                </Grid.Item>\n                <Grid.Item col={12} s={12} direction=\"column\" alignItems=\"stretch\">\n                  <Fields\n                    attributes={attributes}\n                    components={components}\n                    fieldSizes={fieldSizes}\n                    metadatas={metadatas}\n                  />\n                </Grid.Item>\n              </Grid.Root>\n            </Flex>\n          </Layouts.Content>\n        </Form>\n      </Main>\n    </Layouts.Root>\n  );\n};\n\n/**\n * @internal\n * @description Panels don't exist in the layout, so we flatten by one.\n */\nconst flattenPanels = (layout: EditLayout['layout']): EditLayout['layout'][number] =>\n  layout.flat(1);\n\n/**\n * @internal\n * @description We don't need the mainField object in the layout, we only need the name.\n */\nconst replaceMainFieldWithNameOnly = (layout: EditLayout['layout'][number]) =>\n  layout.map((row) =>\n    row.map((field) => ({\n      ...field,\n      mainField: field.mainField?.name,\n    }))\n  );\n\n/**\n * @internal\n * @description We extract the metadata values from the field layout, because these are editable by the user.\n */\nconst extractMetadata = (\n  layout: EditLayout['layout'][number]\n): Array<Exclude<ConfigurationFormData['layout'], { name: '_TEMP_' }>[number]['children']> => {\n  return layout.map((row) =>\n    row.map(({ label, disabled, hint, placeholder, size, name, mainField }) => ({\n      label,\n      editable: !disabled,\n      description: hint,\n      mainField,\n      placeholder,\n      size,\n      name,\n      __temp_key__: '',\n    }))\n  );\n};\n\n/**\n * @internal\n * @description Each row of the layout has a max size of 12 (based on bootstrap grid system)\n * So in order to offer a better drop zone we add the _TEMP_ div to complete the remaining substract (12 - existing)\n */\nconst addTmpSpaceToLayout = (\n  layout: ReturnType<typeof extractMetadata>\n): Array<ConfigurationFormData['layout'][number]['children']> => [\n  ...layout.map((row) => {\n    const totalSpaceTaken = row.reduce((acc, field) => acc + field.size, 0);\n\n    if (totalSpaceTaken < 12) {\n      return [\n        ...row,\n        {\n          name: TEMP_FIELD_NAME,\n          size: 12 - totalSpaceTaken,\n          __temp_key__: '',\n        } satisfies EditFieldSpacerLayout,\n      ];\n    }\n\n    return row;\n  }),\n];\n\n/**\n * @internal\n * @description At this point of the transformations we have Field[][], but each row for the form should have a __temp_key__\n * applied. This means we need to change it so `Field` is nested under the children property.\n */\nconst addTmpKeysToLayout = (\n  layout: ReturnType<typeof addTmpSpaceToLayout>\n): ConfigurationFormData['layout'] => {\n  const keys = generateNKeysBetween(undefined, undefined, layout.length);\n\n  return layout.map((row, rowIndex) => {\n    const fieldKeys = generateNKeysBetween(undefined, undefined, row.length);\n\n    return {\n      __temp_key__: keys[rowIndex],\n      children: row.map((field, fieldIndex) => {\n        return {\n          ...field,\n          __temp_key__: fieldKeys[fieldIndex],\n        };\n      }),\n    };\n  });\n};\n\n/* -------------------------------------------------------------------------------------------------\n * Header\n * -----------------------------------------------------------------------------------------------*/\n\ninterface HeaderProps {\n  name: string;\n}\n\nconst Header = ({ name }: HeaderProps) => {\n  const { formatMessage } = useIntl();\n  const modified = useForm('Header', (state) => state.modified);\n  const isSubmitting = useForm('Header', (state) => state.isSubmitting);\n\n  return (\n    <Layouts.Header\n      title={formatMessage(\n        {\n          id: getTranslation('components.SettingsViewWrapper.pluginHeader.title'),\n          defaultMessage: `Configure the view - {name}`,\n        },\n        { name: capitalise(name) }\n      )}\n      subtitle={formatMessage({\n        id: getTranslation('components.SettingsViewWrapper.pluginHeader.description.edit-settings'),\n        defaultMessage: 'Customize how the edit view will look like.',\n      })}\n      navigationAction={<BackButton />}\n      primaryAction={\n        <Button disabled={!modified} loading={isSubmitting} type=\"submit\">\n          {formatMessage({ id: 'global.save', defaultMessage: 'Save' })}\n        </Button>\n      }\n    />\n  );\n};\n\nexport { ConfigurationForm };\nexport type { ConfigurationFormProps, ConfigurationFormData, EditFieldSpacerLayout };\n"],"names":["ConfigurationForm","attributes","fieldSizes","layout","editLayout","onSubmit","components","settings","metadatas","formatMessage","useIntl","initialValues","React","useMemo","transformations","pipe","flattenPanels","replaceMainFieldWithNameOnly","extractMetadata","addTmpSpaceToLayout","addTmpKeysToLayout","_jsx","Layouts","Root","Main","_jsxs","Form","method","Header","name","displayName","Content","Flex","alignItems","background","direction","gap","hasRadius","shadow","paddingTop","paddingBottom","paddingLeft","paddingRight","Typography","variant","tag","id","getTranslation","defaultMessage","Grid","Item","col","s","InputRenderer","type","label","hint","options","Object","entries","reduce","acc","key","attribute","ATTRIBUTE_TYPES_THAT_CANNOT_BE_MAIN_FIELD","includes","push","value","Divider","Fields","flat","map","row","field","mainField","disabled","placeholder","size","editable","description","__temp_key__","totalSpaceTaken","TEMP_FIELD_NAME","keys","generateNKeysBetween","undefined","length","rowIndex","fieldKeys","children","fieldIndex","modified","useForm","state","isSubmitting","title","capitalise","subtitle","navigationAction","BackButton","primaryAction","Button","loading"],"mappings":"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"}

package/dist/admin/components/ConfigurationForm/Form.mjs

@@ -0,0 +1,232 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import * as React from 'react';
+import { Layouts, Form, InputRenderer, useForm, BackButton } from '@strapi/admin/strapi-admin';
+import { Main, Flex, Typography, Grid, Divider, Button } from '@strapi/design-system';
+import { generateNKeysBetween } from 'fractional-indexing';
+import pipe from 'lodash/fp/pipe';
+import { useIntl } from 'react-intl';
+import { ATTRIBUTE_TYPES_THAT_CANNOT_BE_MAIN_FIELD } from '../../constants/attributes.mjs';
+import { capitalise } from '../../utils/strings.mjs';
+import { getTranslation } from '../../utils/translations.mjs';
+import { Fields, TEMP_FIELD_NAME } from './Fields.mjs';
+
+const ConfigurationForm = ({ attributes, fieldSizes, layout: editLayout, onSubmit })=>{
+    const { components, settings, layout, metadatas } = editLayout;
+    const { formatMessage } = useIntl();
+    const initialValues = React.useMemo(()=>{
+        const transformations = pipe(flattenPanels, replaceMainFieldWithNameOnly, extractMetadata, addTmpSpaceToLayout, addTmpKeysToLayout);
+        return {
+            layout: transformations(layout),
+            settings
+        };
+    }, [
+        layout,
+        settings
+    ]);
+    return /*#__PURE__*/ jsx(Layouts.Root, {
+        children: /*#__PURE__*/ jsx(Main, {
+            children: /*#__PURE__*/ jsxs(Form, {
+                initialValues: initialValues,
+                onSubmit: onSubmit,
+                method: "PUT",
+                children: [
+                    /*#__PURE__*/ jsx(Header, {
+                        name: settings.displayName ?? ''
+                    }),
+                    /*#__PURE__*/ jsx(Layouts.Content, {
+                        children: /*#__PURE__*/ jsxs(Flex, {
+                            alignItems: "stretch",
+                            background: "neutral0",
+                            direction: "column",
+                            gap: 6,
+                            hasRadius: true,
+                            shadow: "tableShadow",
+                            paddingTop: 6,
+                            paddingBottom: 6,
+                            paddingLeft: 7,
+                            paddingRight: 7,
+                            children: [
+                                /*#__PURE__*/ jsx(Typography, {
+                                    variant: "delta",
+                                    tag: "h2",
+                                    children: formatMessage({
+                                        id: getTranslation('containers.SettingPage.settings'),
+                                        defaultMessage: 'Settings'
+                                    })
+                                }),
+                                /*#__PURE__*/ jsxs(Grid.Root, {
+                                    children: [
+                                        /*#__PURE__*/ jsx(Grid.Item, {
+                                            col: 6,
+                                            s: 12,
+                                            direction: "column",
+                                            alignItems: "stretch",
+                                            children: /*#__PURE__*/ jsx(InputRenderer, {
+                                                type: "enumeration",
+                                                label: formatMessage({
+                                                    id: getTranslation('containers.SettingPage.editSettings.entry.title'),
+                                                    defaultMessage: 'Entry title'
+                                                }),
+                                                hint: formatMessage({
+                                                    id: getTranslation('containers.SettingPage.editSettings.entry.title.description'),
+                                                    defaultMessage: 'Set the display field of your entry'
+                                                }),
+                                                name: "settings.mainField",
+                                                options: Object.entries(attributes).reduce((acc, [key, attribute])=>{
+                                                    if (!attribute) {
+                                                        return acc;
+                                                    }
+                                                    /**
+                       * Create the list of attributes from the schema as to which can
+                       * be our `mainField` and dictate the display name of the schema
+                       * we're editing.
+                       */ if (!ATTRIBUTE_TYPES_THAT_CANNOT_BE_MAIN_FIELD.includes(attribute.type)) {
+                                                        acc.push({
+                                                            label: key,
+                                                            value: key
+                                                        });
+                                                    }
+                                                    return acc;
+                                                }, [])
+                                            })
+                                        }),
+                                        /*#__PURE__*/ jsx(Grid.Item, {
+                                            paddingTop: 6,
+                                            paddingBottom: 6,
+                                            col: 12,
+                                            s: 12,
+                                            direction: "column",
+                                            alignItems: "stretch",
+                                            children: /*#__PURE__*/ jsx(Divider, {})
+                                        }),
+                                        /*#__PURE__*/ jsx(Grid.Item, {
+                                            col: 12,
+                                            s: 12,
+                                            direction: "column",
+                                            alignItems: "stretch",
+                                            children: /*#__PURE__*/ jsx(Typography, {
+                                                variant: "delta",
+                                                tag: "h3",
+                                                children: formatMessage({
+                                                    id: getTranslation('containers.SettingPage.view'),
+                                                    defaultMessage: 'View'
+                                                })
+                                            })
+                                        }),
+                                        /*#__PURE__*/ jsx(Grid.Item, {
+                                            col: 12,
+                                            s: 12,
+                                            direction: "column",
+                                            alignItems: "stretch",
+                                            children: /*#__PURE__*/ jsx(Fields, {
+                                                attributes: attributes,
+                                                components: components,
+                                                fieldSizes: fieldSizes,
+                                                metadatas: metadatas
+                                            })
+                                        })
+                                    ]
+                                })
+                            ]
+                        })
+                    })
+                ]
+            })
+        })
+    });
+};
+/**
+ * @internal
+ * @description Panels don't exist in the layout, so we flatten by one.
+ */ const flattenPanels = (layout)=>layout.flat(1);
+/**
+ * @internal
+ * @description We don't need the mainField object in the layout, we only need the name.
+ */ const replaceMainFieldWithNameOnly = (layout)=>layout.map((row)=>row.map((field)=>({
+                ...field,
+                mainField: field.mainField?.name
+            })));
+/**
+ * @internal
+ * @description We extract the metadata values from the field layout, because these are editable by the user.
+ */ const extractMetadata = (layout)=>{
+    return layout.map((row)=>row.map(({ label, disabled, hint, placeholder, size, name, mainField })=>({
+                label,
+                editable: !disabled,
+                description: hint,
+                mainField,
+                placeholder,
+                size,
+                name,
+                __temp_key__: ''
+            })));
+};
+/**
+ * @internal
+ * @description Each row of the layout has a max size of 12 (based on bootstrap grid system)
+ * So in order to offer a better drop zone we add the _TEMP_ div to complete the remaining substract (12 - existing)
+ */ const addTmpSpaceToLayout = (layout)=>[
+        ...layout.map((row)=>{
+            const totalSpaceTaken = row.reduce((acc, field)=>acc + field.size, 0);
+            if (totalSpaceTaken < 12) {
+                return [
+                    ...row,
+                    {
+                        name: TEMP_FIELD_NAME,
+                        size: 12 - totalSpaceTaken,
+                        __temp_key__: ''
+                    }
+                ];
+            }
+            return row;
+        })
+    ];
+/**
+ * @internal
+ * @description At this point of the transformations we have Field[][], but each row for the form should have a __temp_key__
+ * applied. This means we need to change it so `Field` is nested under the children property.
+ */ const addTmpKeysToLayout = (layout)=>{
+    const keys = generateNKeysBetween(undefined, undefined, layout.length);
+    return layout.map((row, rowIndex)=>{
+        const fieldKeys = generateNKeysBetween(undefined, undefined, row.length);
+        return {
+            __temp_key__: keys[rowIndex],
+            children: row.map((field, fieldIndex)=>{
+                return {
+                    ...field,
+                    __temp_key__: fieldKeys[fieldIndex]
+                };
+            })
+        };
+    });
+};
+const Header = ({ name })=>{
+    const { formatMessage } = useIntl();
+    const modified = useForm('Header', (state)=>state.modified);
+    const isSubmitting = useForm('Header', (state)=>state.isSubmitting);
+    return /*#__PURE__*/ jsx(Layouts.Header, {
+        title: formatMessage({
+            id: getTranslation('components.SettingsViewWrapper.pluginHeader.title'),
+            defaultMessage: `Configure the view - {name}`
+        }, {
+            name: capitalise(name)
+        }),
+        subtitle: formatMessage({
+            id: getTranslation('components.SettingsViewWrapper.pluginHeader.description.edit-settings'),
+            defaultMessage: 'Customize how the edit view will look like.'
+        }),
+        navigationAction: /*#__PURE__*/ jsx(BackButton, {}),
+        primaryAction: /*#__PURE__*/ jsx(Button, {
+            disabled: !modified,
+            loading: isSubmitting,
+            type: "submit",
+            children: formatMessage({
+                id: 'global.save',
+                defaultMessage: 'Save'
+            })
+        })
+    });
+};
+
+export { ConfigurationForm };
+//# sourceMappingURL=Form.mjs.map

package/dist/admin/components/ConfigurationForm/Form.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Form.mjs","sources":["../../../../admin/src/components/ConfigurationForm/Form.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n  Form,\n  FormProps,\n  useForm,\n  InputRenderer,\n  BackButton,\n  Layouts,\n} from '@strapi/admin/strapi-admin';\nimport { Button, Divider, Flex, Grid, Main, Typography } from '@strapi/design-system';\nimport { generateNKeysBetween } from 'fractional-indexing';\nimport pipe from 'lodash/fp/pipe';\nimport { useIntl } from 'react-intl';\n\nimport { ATTRIBUTE_TYPES_THAT_CANNOT_BE_MAIN_FIELD } from '../../constants/attributes';\nimport { capitalise } from '../../utils/strings';\nimport { getTranslation } from '../../utils/translations';\n\nimport { Fields, FieldsProps, TEMP_FIELD_NAME } from './Fields';\n\nimport type { EditFieldLayout, EditLayout } from '../../hooks/useDocumentLayout';\n\n/* -------------------------------------------------------------------------------------------------\n * ConfigurationForm\n * -----------------------------------------------------------------------------------------------*/\n\ninterface ConfigurationFormProps extends Pick<FieldsProps, 'attributes' | 'fieldSizes'> {\n  layout: EditLayout;\n  onSubmit: FormProps<ConfigurationFormData>['onSubmit'];\n}\n\n/**\n * Every key in EditFieldLayout is turned to optional never and then we overwrite the ones we are using.\n */\n\ntype EditFieldSpacerLayout = {\n  [key in keyof Omit<EditFieldLayout, 'name' | 'size'>]?: never;\n} & {\n  description?: never;\n  editable?: never;\n  name: '_TEMP_';\n  size: number;\n  __temp_key__: string;\n};\n\ninterface ConfigurationFormData extends Pick<EditLayout, 'settings'> {\n  layout: Array<{\n    __temp_key__: string;\n    children: Array<\n      | (Pick<EditFieldLayout, 'label' | 'size' | 'name' | 'placeholder' | 'mainField'> & {\n          description: EditFieldLayout['hint'];\n          editable: EditFieldLayout['disabled'];\n          __temp_key__: string;\n        })\n      | EditFieldSpacerLayout\n    >;\n  }>;\n}\n\nconst ConfigurationForm = ({\n  attributes,\n  fieldSizes,\n  layout: editLayout,\n  onSubmit,\n}: ConfigurationFormProps) => {\n  const { components, settings, layout, metadatas } = editLayout;\n\n  const { formatMessage } = useIntl();\n\n  const initialValues: ConfigurationFormData = React.useMemo(() => {\n    const transformations = pipe(\n      flattenPanels,\n      replaceMainFieldWithNameOnly,\n      extractMetadata,\n      addTmpSpaceToLayout,\n      addTmpKeysToLayout\n    );\n\n    return {\n      layout: transformations(layout),\n      settings,\n    };\n  }, [layout, settings]);\n\n  return (\n    <Layouts.Root>\n      <Main>\n        <Form initialValues={initialValues} onSubmit={onSubmit} method=\"PUT\">\n          <Header name={settings.displayName ?? ''} />\n          <Layouts.Content>\n            <Flex\n              alignItems=\"stretch\"\n              background=\"neutral0\"\n              direction=\"column\"\n              gap={6}\n              hasRadius\n              shadow=\"tableShadow\"\n              paddingTop={6}\n              paddingBottom={6}\n              paddingLeft={7}\n              paddingRight={7}\n            >\n              <Typography variant=\"delta\" tag=\"h2\">\n                {formatMessage({\n                  id: getTranslation('containers.SettingPage.settings'),\n                  defaultMessage: 'Settings',\n                })}\n              </Typography>\n              <Grid.Root>\n                <Grid.Item col={6} s={12} direction=\"column\" alignItems=\"stretch\">\n                  <InputRenderer\n                    type=\"enumeration\"\n                    label={formatMessage({\n                      id: getTranslation('containers.SettingPage.editSettings.entry.title'),\n                      defaultMessage: 'Entry title',\n                    })}\n                    hint={formatMessage({\n                      id: getTranslation(\n                        'containers.SettingPage.editSettings.entry.title.description'\n                      ),\n                      defaultMessage: 'Set the display field of your entry',\n                    })}\n                    name=\"settings.mainField\"\n                    options={Object.entries(attributes).reduce<\n                      Array<{ label: string; value: string }>\n                    >((acc, [key, attribute]) => {\n                      if (!attribute) {\n                        return acc;\n                      }\n\n                      /**\n                       * Create the list of attributes from the schema as to which can\n                       * be our `mainField` and dictate the display name of the schema\n                       * we're editing.\n                       */\n                      if (!ATTRIBUTE_TYPES_THAT_CANNOT_BE_MAIN_FIELD.includes(attribute.type)) {\n                        acc.push({\n                          label: key,\n                          value: key,\n                        });\n                      }\n\n                      return acc;\n                    }, [])}\n                  />\n                </Grid.Item>\n                <Grid.Item\n                  paddingTop={6}\n                  paddingBottom={6}\n                  col={12}\n                  s={12}\n                  direction=\"column\"\n                  alignItems=\"stretch\"\n                >\n                  <Divider />\n                </Grid.Item>\n                <Grid.Item col={12} s={12} direction=\"column\" alignItems=\"stretch\">\n                  <Typography variant=\"delta\" tag=\"h3\">\n                    {formatMessage({\n                      id: getTranslation('containers.SettingPage.view'),\n                      defaultMessage: 'View',\n                    })}\n                  </Typography>\n                </Grid.Item>\n                <Grid.Item col={12} s={12} direction=\"column\" alignItems=\"stretch\">\n                  <Fields\n                    attributes={attributes}\n                    components={components}\n                    fieldSizes={fieldSizes}\n                    metadatas={metadatas}\n                  />\n                </Grid.Item>\n              </Grid.Root>\n            </Flex>\n          </Layouts.Content>\n        </Form>\n      </Main>\n    </Layouts.Root>\n  );\n};\n\n/**\n * @internal\n * @description Panels don't exist in the layout, so we flatten by one.\n */\nconst flattenPanels = (layout: EditLayout['layout']): EditLayout['layout'][number] =>\n  layout.flat(1);\n\n/**\n * @internal\n * @description We don't need the mainField object in the layout, we only need the name.\n */\nconst replaceMainFieldWithNameOnly = (layout: EditLayout['layout'][number]) =>\n  layout.map((row) =>\n    row.map((field) => ({\n      ...field,\n      mainField: field.mainField?.name,\n    }))\n  );\n\n/**\n * @internal\n * @description We extract the metadata values from the field layout, because these are editable by the user.\n */\nconst extractMetadata = (\n  layout: EditLayout['layout'][number]\n): Array<Exclude<ConfigurationFormData['layout'], { name: '_TEMP_' }>[number]['children']> => {\n  return layout.map((row) =>\n    row.map(({ label, disabled, hint, placeholder, size, name, mainField }) => ({\n      label,\n      editable: !disabled,\n      description: hint,\n      mainField,\n      placeholder,\n      size,\n      name,\n      __temp_key__: '',\n    }))\n  );\n};\n\n/**\n * @internal\n * @description Each row of the layout has a max size of 12 (based on bootstrap grid system)\n * So in order to offer a better drop zone we add the _TEMP_ div to complete the remaining substract (12 - existing)\n */\nconst addTmpSpaceToLayout = (\n  layout: ReturnType<typeof extractMetadata>\n): Array<ConfigurationFormData['layout'][number]['children']> => [\n  ...layout.map((row) => {\n    const totalSpaceTaken = row.reduce((acc, field) => acc + field.size, 0);\n\n    if (totalSpaceTaken < 12) {\n      return [\n        ...row,\n        {\n          name: TEMP_FIELD_NAME,\n          size: 12 - totalSpaceTaken,\n          __temp_key__: '',\n        } satisfies EditFieldSpacerLayout,\n      ];\n    }\n\n    return row;\n  }),\n];\n\n/**\n * @internal\n * @description At this point of the transformations we have Field[][], but each row for the form should have a __temp_key__\n * applied. This means we need to change it so `Field` is nested under the children property.\n */\nconst addTmpKeysToLayout = (\n  layout: ReturnType<typeof addTmpSpaceToLayout>\n): ConfigurationFormData['layout'] => {\n  const keys = generateNKeysBetween(undefined, undefined, layout.length);\n\n  return layout.map((row, rowIndex) => {\n    const fieldKeys = generateNKeysBetween(undefined, undefined, row.length);\n\n    return {\n      __temp_key__: keys[rowIndex],\n      children: row.map((field, fieldIndex) => {\n        return {\n          ...field,\n          __temp_key__: fieldKeys[fieldIndex],\n        };\n      }),\n    };\n  });\n};\n\n/* -------------------------------------------------------------------------------------------------\n * Header\n * -----------------------------------------------------------------------------------------------*/\n\ninterface HeaderProps {\n  name: string;\n}\n\nconst Header = ({ name }: HeaderProps) => {\n  const { formatMessage } = useIntl();\n  const modified = useForm('Header', (state) => state.modified);\n  const isSubmitting = useForm('Header', (state) => state.isSubmitting);\n\n  return (\n    <Layouts.Header\n      title={formatMessage(\n        {\n          id: getTranslation('components.SettingsViewWrapper.pluginHeader.title'),\n          defaultMessage: `Configure the view - {name}`,\n        },\n        { name: capitalise(name) }\n      )}\n      subtitle={formatMessage({\n        id: getTranslation('components.SettingsViewWrapper.pluginHeader.description.edit-settings'),\n        defaultMessage: 'Customize how the edit view will look like.',\n      })}\n      navigationAction={<BackButton />}\n      primaryAction={\n        <Button disabled={!modified} loading={isSubmitting} type=\"submit\">\n          {formatMessage({ id: 'global.save', defaultMessage: 'Save' })}\n        </Button>\n      }\n    />\n  );\n};\n\nexport { ConfigurationForm };\nexport type { ConfigurationFormProps, ConfigurationFormData, EditFieldSpacerLayout };\n"],"names":["ConfigurationForm","attributes","fieldSizes","layout","editLayout","onSubmit","components","settings","metadatas","formatMessage","useIntl","initialValues","React","useMemo","transformations","pipe","flattenPanels","replaceMainFieldWithNameOnly","extractMetadata","addTmpSpaceToLayout","addTmpKeysToLayout","_jsx","Layouts","Root","Main","_jsxs","Form","method","Header","name","displayName","Content","Flex","alignItems","background","direction","gap","hasRadius","shadow","paddingTop","paddingBottom","paddingLeft","paddingRight","Typography","variant","tag","id","getTranslation","defaultMessage","Grid","Item","col","s","InputRenderer","type","label","hint","options","Object","entries","reduce","acc","key","attribute","ATTRIBUTE_TYPES_THAT_CANNOT_BE_MAIN_FIELD","includes","push","value","Divider","Fields","flat","map","row","field","mainField","disabled","placeholder","size","editable","description","__temp_key__","totalSpaceTaken","TEMP_FIELD_NAME","keys","generateNKeysBetween","undefined","length","rowIndex","fieldKeys","children","fieldIndex","modified","useForm","state","isSubmitting","title","capitalise","subtitle","navigationAction","BackButton","primaryAction","Button","loading"],"mappings":"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"}

package/dist/admin/components/DragLayer.js

@@ -0,0 +1,50 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+require('react');
+var designSystem = require('@strapi/design-system');
+var reactDnd = require('react-dnd');
+
+function getStyle(initialOffset, currentOffset, mouseOffset) {
+    if (!initialOffset || !currentOffset || !mouseOffset) {
+        return {
+            display: 'none'
+        };
+    }
+    const { x, y } = mouseOffset;
+    return {
+        transform: `translate(${x}px, ${y}px)`
+    };
+}
+const DragLayer = ({ renderItem })=>{
+    const { itemType, isDragging, item, initialOffset, currentOffset, mouseOffset } = reactDnd.useDragLayer((monitor)=>({
+            item: monitor.getItem(),
+            itemType: monitor.getItemType(),
+            initialOffset: monitor.getInitialSourceClientOffset(),
+            currentOffset: monitor.getSourceClientOffset(),
+            isDragging: monitor.isDragging(),
+            mouseOffset: monitor.getClientOffset()
+        }));
+    if (!isDragging) {
+        return null;
+    }
+    return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+        height: "100%",
+        left: 0,
+        position: "fixed",
+        pointerEvents: "none",
+        top: 0,
+        zIndex: 100,
+        width: "100%",
+        children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+            style: getStyle(initialOffset, currentOffset, mouseOffset),
+            children: renderItem({
+                type: itemType,
+                item
+            })
+        })
+    });
+};
+
+exports.DragLayer = DragLayer;
+//# sourceMappingURL=DragLayer.js.map

package/dist/admin/components/DragLayer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DragLayer.js","sources":["../../../admin/src/components/DragLayer.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box } from '@strapi/design-system';\nimport { DragLayerMonitor, XYCoord, useDragLayer } from 'react-dnd';\n\nfunction getStyle(\n  initialOffset: XYCoord | null,\n  currentOffset: XYCoord | null,\n  mouseOffset: XYCoord | null\n) {\n  if (!initialOffset || !currentOffset || !mouseOffset) {\n    return { display: 'none' };\n  }\n\n  const { x, y } = mouseOffset;\n\n  return {\n    transform: `translate(${x}px, ${y}px)`,\n  };\n}\n\nexport interface DragLayerProps {\n  renderItem: (item: {\n    /**\n     * TODO: it'd be great if we could make this a union where the type infers the item.\n     */\n    item: any;\n    type: ReturnType<DragLayerMonitor['getItemType']>;\n  }) => React.ReactNode;\n}\n\nconst DragLayer = ({ renderItem }: DragLayerProps) => {\n  const { itemType, isDragging, item, initialOffset, currentOffset, mouseOffset } = useDragLayer(\n    (monitor) => ({\n      item: monitor.getItem(),\n      itemType: monitor.getItemType(),\n      initialOffset: monitor.getInitialSourceClientOffset(),\n      currentOffset: monitor.getSourceClientOffset(),\n      isDragging: monitor.isDragging(),\n      mouseOffset: monitor.getClientOffset(),\n    })\n  );\n\n  if (!isDragging) {\n    return null;\n  }\n\n  return (\n    <Box\n      height=\"100%\"\n      left={0}\n      position=\"fixed\"\n      pointerEvents=\"none\"\n      top={0}\n      zIndex={100}\n      width=\"100%\"\n    >\n      <Box style={getStyle(initialOffset, currentOffset, mouseOffset)}>\n        {renderItem({ type: itemType, item })}\n      </Box>\n    </Box>\n  );\n};\n\nexport { DragLayer };\n"],"names":["getStyle","initialOffset","currentOffset","mouseOffset","display","x","y","transform","DragLayer","renderItem","itemType","isDragging","item","useDragLayer","monitor","getItem","getItemType","getInitialSourceClientOffset","getSourceClientOffset","getClientOffset","_jsx","Box","height","left","position","pointerEvents","top","zIndex","width","style","type"],"mappings":";;;;;;;AAKA,SAASA,QACPC,CAAAA,aAA6B,EAC7BC,aAA6B,EAC7BC,WAA2B,EAAA;AAE3B,IAAA,IAAI,CAACF,aAAAA,IAAiB,CAACC,aAAAA,IAAiB,CAACC,WAAa,EAAA;QACpD,OAAO;YAAEC,OAAS,EAAA;AAAO,SAAA;AAC3B;AAEA,IAAA,MAAM,EAAEC,CAAC,EAAEC,CAAC,EAAE,GAAGH,WAAAA;IAEjB,OAAO;QACLI,SAAW,EAAA,CAAC,UAAU,EAAEF,CAAAA,CAAE,IAAI,EAAEC,CAAAA,CAAE,GAAG;AACvC,KAAA;AACF;AAYA,MAAME,SAAY,GAAA,CAAC,EAAEC,UAAU,EAAkB,GAAA;AAC/C,IAAA,MAAM,EAAEC,QAAQ,EAAEC,UAAU,EAAEC,IAAI,EAAEX,aAAa,EAAEC,aAAa,EAAEC,WAAW,EAAE,GAAGU,qBAChF,CAAA,CAACC,WAAa;AACZF,YAAAA,IAAAA,EAAME,QAAQC,OAAO,EAAA;AACrBL,YAAAA,QAAAA,EAAUI,QAAQE,WAAW,EAAA;AAC7Bf,YAAAA,aAAAA,EAAea,QAAQG,4BAA4B,EAAA;AACnDf,YAAAA,aAAAA,EAAeY,QAAQI,qBAAqB,EAAA;AAC5CP,YAAAA,UAAAA,EAAYG,QAAQH,UAAU,EAAA;AAC9BR,YAAAA,WAAAA,EAAaW,QAAQK,eAAe;SACtC,CAAA,CAAA;AAGF,IAAA,IAAI,CAACR,UAAY,EAAA;QACf,OAAO,IAAA;AACT;AAEA,IAAA,qBACES,cAACC,CAAAA,gBAAAA,EAAAA;QACCC,MAAO,EAAA,MAAA;QACPC,IAAM,EAAA,CAAA;QACNC,QAAS,EAAA,OAAA;QACTC,aAAc,EAAA,MAAA;QACdC,GAAK,EAAA,CAAA;QACLC,MAAQ,EAAA,GAAA;QACRC,KAAM,EAAA,MAAA;AAEN,QAAA,QAAA,gBAAAR,cAACC,CAAAA,gBAAAA,EAAAA;YAAIQ,KAAO7B,EAAAA,QAAAA,CAASC,eAAeC,aAAeC,EAAAA,WAAAA,CAAAA;sBAChDM,UAAW,CAAA;gBAAEqB,IAAMpB,EAAAA,QAAAA;AAAUE,gBAAAA;AAAK,aAAA;;;AAI3C;;;;"}