@strapi/admin 4.11.0-beta.0 → 4.11.0-exp.0

package/admin/src/content-manager/components/DynamicZone/components/ComponentPicker.js

@@ -1,40 +1,24 @@
-import React, { useEffect, useMemo, useState } from 'react';
-import groupBy from 'lodash/groupBy';
+import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import { KeyboardNavigable, Box, Flex, Typography } from '@strapi/design-system';
 
 import { getTrad } from '../../../utils';
-import { useContentTypeLayout } from '../../../hooks';
 
-import ComponentCategory from './ComponentCategory';
+import { ComponentCategory } from './ComponentCategory';
 
-const ComponentPicker = ({ components, isOpen, onClickAddComponent }) => {
+export const ComponentPicker = ({ dynamicComponentsByCategory, isOpen, onClickAddComponent }) => {
   const { formatMessage } = useIntl();
-  const { getComponentLayout } = useContentTypeLayout();
-  const [categoryToOpen, setCategoryToOpen] = useState('');
-
-  const dynamicComponentCategories = useMemo(() => {
-    const componentsWithInfo = components.map((componentUid) => {
-      const { category, info } = getComponentLayout(componentUid);
-
-      return { componentUid, category, info };
-    });
-
-    const categories = groupBy(componentsWithInfo, 'category');
 
-    return Object.keys(categories).reduce((acc, current) => {
-      acc.push({ category: current, components: categories[current] });
-
-      return acc;
-    }, []);
-  }, [components, getComponentLayout]);
+  const [categoryToOpen, setCategoryToOpen] = useState('');
 
   useEffect(() => {
-    if (isOpen && dynamicComponentCategories.length > 0) {
-      setCategoryToOpen(dynamicComponentCategories[0].category);
+    const categoryKeys = Object.keys(dynamicComponentsByCategory);
+
+    if (isOpen && categoryKeys.length > 0) {
+      setCategoryToOpen(categoryKeys[0]);
     }
-  }, [isOpen, dynamicComponentCategories]);
+  }, [isOpen, dynamicComponentsByCategory]);
 
   const handleAddComponentToDz = (componentUid) => () => {
     onClickAddComponent(componentUid);
@@ -53,54 +37,57 @@ const ComponentPicker = ({ components, isOpen, onClickAddComponent }) => {
   }
 
   return (
-    <Box paddingBottom={6}>
-      <Box
-        paddingTop={6}
-        paddingBottom={6}
-        paddingLeft={5}
-        paddingRight={5}
-        background="neutral0"
-        shadow="tableShadow"
-        borderColor="neutral150"
-        hasRadius
-      >
-        <Flex justifyContent="center">
-          <Typography fontWeight="bold" textColor="neutral600">
-            {formatMessage({
-              id: getTrad('components.DynamicZone.ComponentPicker-label'),
-              defaultMessage: 'Pick one component',
-            })}
-          </Typography>
-        </Flex>
-        <Box paddingTop={2}>
-          <KeyboardNavigable attributeName="data-strapi-accordion-toggle">
-            {dynamicComponentCategories.map(({ category, components }, index) => (
-              <ComponentCategory
-                key={category}
-                category={category}
-                components={components}
-                onAddComponent={handleAddComponentToDz}
-                isOpen={category === categoryToOpen}
-                onToggle={handleClickToggle}
-                variant={index % 2 === 1 ? 'primary' : 'secondary'}
-              />
-            ))}
-          </KeyboardNavigable>
-        </Box>
+    <Box
+      paddingTop={6}
+      paddingBottom={6}
+      paddingLeft={5}
+      paddingRight={5}
+      background="neutral0"
+      shadow="tableShadow"
+      borderColor="neutral150"
+      hasRadius
+    >
+      <Flex justifyContent="center">
+        <Typography fontWeight="bold" textColor="neutral600">
+          {formatMessage({
+            id: getTrad('components.DynamicZone.ComponentPicker-label'),
+            defaultMessage: 'Pick one component',
+          })}
+        </Typography>
+      </Flex>
+      <Box paddingTop={2}>
+        <KeyboardNavigable attributeName="data-strapi-accordion-toggle">
+          {Object.entries(dynamicComponentsByCategory).map(([category, components], index) => (
+            <ComponentCategory
+              key={category}
+              category={category}
+              components={components}
+              onAddComponent={handleAddComponentToDz}
+              isOpen={category === categoryToOpen}
+              onToggle={handleClickToggle}
+              variant={index % 2 === 1 ? 'primary' : 'secondary'}
+            />
+          ))}
+        </KeyboardNavigable>
       </Box>
     </Box>
   );
 };
 
 ComponentPicker.defaultProps = {
-  components: [],
+  dynamicComponentsByCategory: {},
   isOpen: false,
 };
 
 ComponentPicker.propTypes = {
-  components: PropTypes.array,
+  dynamicComponentsByCategory: PropTypes.shape({
+    components: PropTypes.arrayOf(
+      PropTypes.shape({
+        componentUid: PropTypes.string.isRequired,
+        info: PropTypes.object,
+      })
+    ),
+  }),
   isOpen: PropTypes.bool,
   onClickAddComponent: PropTypes.func.isRequired,
 };
-
-export default ComponentPicker;

package/admin/src/content-manager/components/DynamicZone/components/DynamicComponent.js

@@ -12,67 +12,19 @@ import {
   IconButton,
   Box,
   Flex,
+  VisuallyHidden,
 } from '@strapi/design-system';
+import { Menu, MenuItem } from '@strapi/design-system/v2';
 import { useCMEditViewDataManager } from '@strapi/helper-plugin';
-import { Trash, Drag } from '@strapi/icons';
+import { Trash, Drag, More } from '@strapi/icons';
 
 import { useContentTypeLayout, useDragAndDrop } from '../../../hooks';
 import { composeRefs, getTrad, ItemTypes } from '../../../utils';
 
 import FieldComponent from '../../FieldComponent';
+import { ComponentIcon } from '../../ComponentIcon';
 
-const ActionsFlex = styled(Flex)`
-  /* 
-    we need to remove the background from the button but we can't 
-    wrap the element in styled because it breaks the forwardedAs which
-    we need for drag handler to work on firefox
-  */
-  div[role='button'] {
-    background: transparent;
-  }
-`;
-
-const IconButtonCustom = styled(IconButton)`
-  background-color: transparent;
-
-  svg path {
-    fill: ${({ theme, expanded }) =>
-      expanded ? theme.colors.primary600 : theme.colors.neutral600};
-  }
-`;
-
-// TODO: Delete once https://github.com/strapi/design-system/pull/858
-// is merged and released.
-const StyledBox = styled(Box)`
-  > div:first-child {
-    box-shadow: ${({ theme }) => theme.shadows.tableShadow};
-  }
-`;
-
-const AccordionContentRadius = styled(Box)`
-  border-radius: 0 0 ${({ theme }) => theme.spaces[1]} ${({ theme }) => theme.spaces[1]};
-`;
-
-const Rectangle = styled(Box)`
-  width: ${({ theme }) => theme.spaces[2]};
-  height: ${({ theme }) => theme.spaces[4]};
-`;
-
-const Preview = styled.span`
-  display: block;
-  background-color: ${({ theme }) => theme.colors.primary100};
-  outline: 1px dashed ${({ theme }) => theme.colors.primary500};
-  outline-offset: -1px;
-  padding: ${({ theme }) => theme.spaces[6]};
-`;
-
-const ComponentContainer = styled(Box)`
-  list-style: none;
-  padding: 0;
-  margin: 0;
-`;
-
-const DynamicZoneComponent = ({
+export const DynamicComponent = ({
   componentUid,
   formErrors,
   index,
@@ -83,6 +35,8 @@ const DynamicZoneComponent = ({
   onGrabItem,
   onDropItem,
   onCancel,
+  dynamicComponentsByCategory,
+  onAddComponent,
 }) => {
   const [isOpen, setIsOpen] = useState(true);
   const { formatMessage } = useIntl();
@@ -180,11 +134,70 @@ const DynamicZoneComponent = ({
       >
         <Drag />
       </IconButton>
+      <Menu.Root>
+        <Menu.Trigger size="S" endIcon={undefined} paddingLeft={2} paddingRight={2}>
+          <More aria-hidden focusable={false} />
+          <VisuallyHidden as="span">
+            {formatMessage({
+              id: getTrad('components.DynamicZone.more-actions'),
+              defaultMessage: 'More actions',
+            })}
+          </VisuallyHidden>
+        </Menu.Trigger>
+        <Menu.Content>
+          <Menu.SubRoot>
+            <Menu.SubTrigger>
+              {formatMessage({
+                id: getTrad('components.DynamicZone.add-item-above'),
+                defaultMessage: 'Add component above',
+              })}
+            </Menu.SubTrigger>
+            <Menu.SubContent>
+              {Object.entries(dynamicComponentsByCategory).map(([category, components]) => (
+                <React.Fragment key={category}>
+                  <Menu.Label>{category}</Menu.Label>
+                  {components.map(({ componentUid, info: { displayName } }) => (
+                    <MenuItem
+                      key={componentUid}
+                      onSelect={() => onAddComponent(componentUid, index)}
+                    >
+                      {displayName}
+                    </MenuItem>
+                  ))}
+                </React.Fragment>
+              ))}
+            </Menu.SubContent>
+          </Menu.SubRoot>
+          <Menu.SubRoot>
+            <Menu.SubTrigger>
+              {formatMessage({
+                id: getTrad('components.DynamicZone.add-item-below'),
+                defaultMessage: 'Add component below',
+              })}
+            </Menu.SubTrigger>
+            <Menu.SubContent>
+              {Object.entries(dynamicComponentsByCategory).map(([category, components]) => (
+                <React.Fragment key={category}>
+                  <Menu.Label>{category}</Menu.Label>
+                  {components.map(({ componentUid, info: { displayName } }) => (
+                    <MenuItem
+                      key={componentUid}
+                      onSelect={() => onAddComponent(componentUid, index + 1)}
+                    >
+                      {displayName}
+                    </MenuItem>
+                  ))}
+                </React.Fragment>
+              ))}
+            </Menu.SubContent>
+          </Menu.SubRoot>
+        </Menu.Content>
+      </Menu.Root>
     </ActionsFlex>
   );
 
   return (
-    <ComponentContainer as="li">
+    <ComponentContainer as="li" width="100%">
       <Flex justifyContent="center">
         <Rectangle background="neutral200" />
       </Flex>
@@ -194,6 +207,7 @@ const DynamicZoneComponent = ({
         ) : (
           <Accordion expanded={isOpen} onToggle={handleToggle} size="S" error={errorMessage}>
             <AccordionToggle
+              startIcon={<ComponentIcon icon={icon} showBackground={false} size="S" />}
               action={accordionActions}
               title={`${friendlyName}${mainValue}`}
               togglePosition="left"
@@ -215,26 +229,86 @@ const DynamicZoneComponent = ({
   );
 };
 
-DynamicZoneComponent.defaultProps = {
+const ActionsFlex = styled(Flex)`
+  /* 
+    we need to remove the background from the button but we can't 
+    wrap the element in styled because it breaks the forwardedAs which
+    we need for drag handler to work on firefox
+  */
+  div[role='button'] {
+    background: transparent;
+  }
+`;
+
+const IconButtonCustom = styled(IconButton)`
+  background-color: transparent;
+
+  svg path {
+    fill: ${({ theme, expanded }) =>
+      expanded ? theme.colors.primary600 : theme.colors.neutral600};
+  }
+`;
+
+// TODO: Delete once https://github.com/strapi/design-system/pull/858
+// is merged and released.
+const StyledBox = styled(Box)`
+  > div:first-child {
+    box-shadow: ${({ theme }) => theme.shadows.tableShadow};
+  }
+`;
+
+const AccordionContentRadius = styled(Box)`
+  border-radius: 0 0 ${({ theme }) => theme.spaces[1]} ${({ theme }) => theme.spaces[1]};
+`;
+
+const Rectangle = styled(Box)`
+  width: ${({ theme }) => theme.spaces[2]};
+  height: ${({ theme }) => theme.spaces[4]};
+`;
+
+const Preview = styled.span`
+  display: block;
+  background-color: ${({ theme }) => theme.colors.primary100};
+  outline: 1px dashed ${({ theme }) => theme.colors.primary500};
+  outline-offset: -1px;
+  padding: ${({ theme }) => theme.spaces[6]};
+`;
+
+const ComponentContainer = styled(Box)`
+  list-style: none;
+  padding: 0;
+  margin: 0;
+`;
+
+DynamicComponent.defaultProps = {
+  dynamicComponentsByCategory: {},
   formErrors: {},
   index: 0,
   isFieldAllowed: true,
+  onAddComponent: undefined,
   onGrabItem: undefined,
   onDropItem: undefined,
   onCancel: undefined,
 };
 
-DynamicZoneComponent.propTypes = {
+DynamicComponent.propTypes = {
   componentUid: PropTypes.string.isRequired,
+  dynamicComponentsByCategory: PropTypes.shape({
+    components: PropTypes.arrayOf(
+      PropTypes.shape({
+        componentUid: PropTypes.string.isRequired,
+        info: PropTypes.object,
+      })
+    ),
+  }),
   formErrors: PropTypes.object,
   index: PropTypes.number,
   isFieldAllowed: PropTypes.bool,
   name: PropTypes.string.isRequired,
+  onAddComponent: PropTypes.func,
   onGrabItem: PropTypes.func,
   onDropItem: PropTypes.func,
   onCancel: PropTypes.func,
   onMoveComponent: PropTypes.func.isRequired,
   onRemoveComponentClick: PropTypes.func.isRequired,
 };
-
-export default DynamicZoneComponent;

package/admin/src/content-manager/components/DynamicZone/components/DynamicZoneLabel.js

@@ -7,15 +7,10 @@
 import React from 'react';
 import { useIntl } from 'react-intl';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
 import { pxToRem } from '@strapi/helper-plugin';
 import { Box, Flex, Typography } from '@strapi/design-system';
 
-const StyledBox = styled(Box)`
-  border-radius: ${pxToRem(26)};
-`;
-
-const DynamicZoneLabel = ({
+export const DynamicZoneLabel = ({
   label,
   labelAction,
   name,
@@ -28,36 +23,35 @@ const DynamicZoneLabel = ({
 
   return (
     <Flex justifyContent="center">
-      <Box>
-        <StyledBox
-          paddingTop={3}
-          paddingBottom={3}
-          paddingRight={4}
-          paddingLeft={4}
-          background="neutral0"
-          shadow="filterShadow"
-          color="neutral500"
-        >
-          <Flex direction="column" justifyContent="center">
-            <Flex maxWidth={pxToRem(356)}>
-              <Typography variant="pi" textColor="neutral600" fontWeight="bold" ellipsis>
-                {intlLabel}&nbsp;
-              </Typography>
-              <Typography variant="pi" textColor="neutral600" fontWeight="bold">
-                ({numberOfComponents})
-              </Typography>
-              {required && <Typography textColor="danger600">*</Typography>}
-              {labelAction && <Box paddingLeft={1}>{labelAction}</Box>}
-            </Flex>
-            {intlDescription && (
-              <Box paddingTop={1} maxWidth={pxToRem(356)}>
-                <Typography variant="pi" textColor="neutral600" ellipsis>
-                  {formatMessage(intlDescription)}
-                </Typography>
-              </Box>
-            )}
+      <Box
+        paddingTop={3}
+        paddingBottom={3}
+        paddingRight={4}
+        paddingLeft={4}
+        borderRadius={26}
+        background="neutral0"
+        shadow="filterShadow"
+        color="neutral500"
+      >
+        <Flex direction="column" justifyContent="center">
+          <Flex maxWidth={pxToRem(356)}>
+            <Typography variant="pi" textColor="neutral600" fontWeight="bold" ellipsis>
+              {intlLabel}&nbsp;
+            </Typography>
+            <Typography variant="pi" textColor="neutral600" fontWeight="bold">
+              ({numberOfComponents})
+            </Typography>
+            {required && <Typography textColor="danger600">*</Typography>}
+            {labelAction && <Box paddingLeft={1}>{labelAction}</Box>}
           </Flex>
-        </StyledBox>
+          {intlDescription && (
+            <Box paddingTop={1} maxWidth={pxToRem(356)}>
+              <Typography variant="pi" textColor="neutral600" ellipsis>
+                {formatMessage(intlDescription)}
+              </Typography>
+            </Box>
+          )}
+        </Flex>
       </Box>
     </Flex>
   );
@@ -82,5 +76,3 @@ DynamicZoneLabel.propTypes = {
   numberOfComponents: PropTypes.number,
   required: PropTypes.bool,
 };
-
-export default DynamicZoneLabel;