@strapi/admin 4.11.0-exp.push-transfer-push-stuck → 4.11.0

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

@@ -6,14 +6,41 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { useIntl } from 'react-intl';
 import styled from 'styled-components';
 import { PlusCircle } from '@strapi/icons';
-import { BaseButton, Box, Flex, Typography } from '@strapi/design-system';
+import { BaseButton, Flex, Typography } from '@strapi/design-system';
 
-import { getTrad } from '../../../utils';
+export const AddComponentButton = ({ hasError, isDisabled, isOpen, children, onClick }) => {
+  return (
+    <StyledButton
+      type="button"
+      onClick={onClick}
+      disabled={isDisabled}
+      hasError={hasError}
+      background="neutral0"
+      paddingTop={3}
+      paddingBottom={3}
+      paddingLeft={4}
+      paddingRight={4}
+      style={{ cursor: isDisabled ? 'not-allowed' : 'pointer' }}
+    >
+      <Flex as="span" gap={2}>
+        <StyledAddIcon aria-hidden $isOpen={isOpen} $hasError={hasError && !isOpen} />
+        <Typography
+          variant="pi"
+          fontWeight="bold"
+          textColor={hasError && !isOpen ? 'danger600' : 'neutral500'}
+        >
+          {children}
+        </Typography>
+      </Flex>
+    </StyledButton>
+  );
+};
 
 const StyledAddIcon = styled(PlusCircle)`
+  height: ${({ theme }) => theme.spaces[6]};
+  width: ${({ theme }) => theme.spaces[6]};
   transform: ${({ $isOpen }) => ($isOpen ? 'rotate(45deg)' : 'rotate(0deg)')};
   > circle {
     fill: ${({ theme, $hasError }) =>
@@ -28,25 +55,11 @@ const StyledAddIcon = styled(PlusCircle)`
 const StyledButton = styled(BaseButton)`
   border-radius: 26px;
   border-color: ${({ theme }) => theme.colors.neutral150};
-  background: ${({ theme }) => theme.colors.neutral0};
-  padding-top: ${({ theme }) => theme.spaces[3]};
-  padding-right: ${({ theme }) => theme.spaces[4]};
-  padding-bottom: ${({ theme }) => theme.spaces[3]};
-  padding-left: ${({ theme }) => theme.spaces[4]};
-
   box-shadow: ${({ theme }) => theme.shadows.filterShadow};
 
-  svg {
-    height: ${({ theme }) => theme.spaces[6]};
-    width: ${({ theme }) => theme.spaces[6]};
-    > path {
-      fill: ${({ theme }) => theme.colors.neutral600};
-    }
-  }
   &:hover {
-    color: ${({ theme }) => theme.colors.primary600} !important;
     ${Typography} {
-      color: ${({ theme }) => theme.colors.primary600} !important;
+      color: ${({ theme }) => theme.colors.primary600};
     }
 
     ${StyledAddIcon} {
@@ -73,92 +86,16 @@ const StyledButton = styled(BaseButton)`
   }
 `;
 
-const BoxFullHeight = styled(Box)`
-  height: 100%;
-`;
-
-const AddComponentButton = ({
-  hasError,
-  hasMaxError,
-  hasMinError,
-  isDisabled,
-  isOpen,
-  label,
-  missingComponentNumber,
-  name,
-  onClick,
-}) => {
-  const { formatMessage } = useIntl();
-  const addLabel = formatMessage(
-    {
-      id: getTrad('components.DynamicZone.add-component'),
-      defaultMessage: 'Add a component to {componentName}',
-    },
-    { componentName: label || name }
-  );
-  const closeLabel = formatMessage({ id: 'app.utils.close-label', defaultMessage: 'Close' });
-  let buttonLabel = isOpen ? closeLabel : addLabel;
-
-  if (hasMaxError && !isOpen) {
-    buttonLabel = formatMessage({
-      id: 'components.Input.error.validation.max',
-      defaultMessage: 'The value is too high.',
-    });
-  }
-
-  if (hasMinError && !isOpen) {
-    buttonLabel = formatMessage(
-      {
-        id: getTrad(`components.DynamicZone.missing-components`),
-        defaultMessage:
-          'There {number, plural, =0 {are # missing components} one {is # missing component} other {are # missing components}}',
-      },
-      { number: missingComponentNumber }
-    );
-  }
-
-  return (
-    <Flex justifyContent="center">
-      <Box style={{ cursor: isDisabled ? 'not-allowed' : 'pointer' }}>
-        <StyledButton type="button" onClick={onClick} disabled={isDisabled} hasError={hasError}>
-          <Flex>
-            <BoxFullHeight aria-hidden paddingRight={2}>
-              <StyledAddIcon $isOpen={isOpen} $hasError={hasError && !isOpen} />
-            </BoxFullHeight>
-            <Typography
-              variant="pi"
-              fontWeight="bold"
-              textColor={hasError && !isOpen ? 'danger600' : 'neutral500'}
-            >
-              {buttonLabel}
-            </Typography>
-          </Flex>
-        </StyledButton>
-      </Box>
-    </Flex>
-  );
-};
-
 AddComponentButton.defaultProps = {
   hasError: false,
-  hasMaxError: false,
-  hasMinError: false,
   isDisabled: false,
   isOpen: false,
-  label: '',
-  missingComponentNumber: 0,
 };
 
 AddComponentButton.propTypes = {
-  label: PropTypes.string,
+  children: PropTypes.node.isRequired,
   hasError: PropTypes.bool,
-  hasMaxError: PropTypes.bool,
-  hasMinError: PropTypes.bool,
   isDisabled: PropTypes.bool,
   isOpen: PropTypes.bool,
-  missingComponentNumber: PropTypes.number,
-  name: PropTypes.string.isRequired,
   onClick: PropTypes.func.isRequired,
 };
-
-export default AddComponentButton;

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

@@ -36,15 +36,21 @@ const ComponentBox = styled(Box)`
     > div > div:first-child {
       background: ${({ theme }) => theme.colors.primary200};
       color: ${({ theme }) => theme.colors.primary600};
+
+      svg {
+        path {
+          fill: ${({ theme }) => theme.colors.primary600};
+        }
+      }
     }
   }
 `;
 
-export default function ComponentCard({ children, onClick }) {
+export default function ComponentCard({ children, onClick, icon }) {
   return (
     <ComponentBox as="button" type="button" onClick={onClick} hasRadius>
       <Flex direction="column" gap={1} alignItems="center" justifyContent="center">
-        <ComponentIcon />
+        <ComponentIcon icon={icon} />
 
         <Typography variant="pi" fontWeight="bold" textColor="neutral600">
           {children}
@@ -56,9 +62,11 @@ export default function ComponentCard({ children, onClick }) {
 
 ComponentCard.defaultProps = {
   onClick() {},
+  icon: 'Cube',
 };
 
 ComponentCard.propTypes = {
   children: PropTypes.node.isRequired,
   onClick: PropTypes.func,
+  icon: PropTypes.string,
 };

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

@@ -1,18 +1,27 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Accordion, AccordionToggle, AccordionContent, Box } from '@strapi/design-system';
+import {
+  Accordion,
+  AccordionToggle,
+  AccordionContent,
+  Box,
+  Flex,
+  Typography,
+} from '@strapi/design-system';
+import { pxToRem } from '@strapi/helper-plugin';
 import styled from 'styled-components';
 import { useIntl } from 'react-intl';
 
-import ComponentCard from './ComponentCard';
+import { ComponentIcon } from '../../ComponentIcon';
 
-const Grid = styled.div`
-  display: grid;
-  grid-template-columns: repeat(auto-fit, ${140 / 16}rem);
-  grid-gap: ${({ theme }) => theme.spaces[1]};
-`;
-
-const ComponentCategory = ({ category, components, variant, isOpen, onAddComponent, onToggle }) => {
+export const ComponentCategory = ({
+  category,
+  components,
+  variant,
+  isOpen,
+  onAddComponent,
+  onToggle,
+}) => {
   const { formatMessage } = useIntl();
 
   const handleToggle = () => {
@@ -29,10 +38,27 @@ const ComponentCategory = ({ category, components, variant, isOpen, onAddCompone
       <AccordionContent>
         <Box paddingTop={4} paddingBottom={4} paddingLeft={3} paddingRight={3}>
           <Grid>
-            {components.map(({ componentUid, info: { displayName } }) => (
-              <ComponentCard key={componentUid} onClick={onAddComponent(componentUid)}>
-                {formatMessage({ id: displayName, defaultMessage: displayName })}
-              </ComponentCard>
+            {components.map(({ componentUid, info: { displayName, icon } }) => (
+              <ComponentBox
+                key={componentUid}
+                as="button"
+                type="button"
+                background="neutral100"
+                justifyContent="center"
+                onClick={onAddComponent(componentUid)}
+                hasRadius
+                height={pxToRem(84)}
+                shrink={0}
+                borderColor="neutral200"
+              >
+                <Flex direction="column" gap={1} alignItems="center" justifyContent="center">
+                  <ComponentIcon icon={icon} />
+
+                  <Typography variant="pi" fontWeight="bold" textColor="neutral600">
+                    {formatMessage({ id: displayName, defaultMessage: displayName })}
+                  </Typography>
+                </Flex>
+              </ComponentBox>
             ))}
           </Grid>
         </Box>
@@ -41,6 +67,30 @@ const ComponentCategory = ({ category, components, variant, isOpen, onAddCompone
   );
 };
 
+const Grid = styled.div`
+  display: grid;
+  grid-template-columns: repeat(auto-fit, ${140 / 16}rem);
+  grid-gap: ${({ theme }) => theme.spaces[1]};
+`;
+
+const ComponentBox = styled(Flex)`
+  &:focus,
+  &:hover {
+    border: 1px solid ${({ theme }) => theme.colors.primary200};
+    background: ${({ theme }) => theme.colors.primary100};
+
+    ${Typography} {
+      color: ${({ theme }) => theme.colors.primary600};
+    }
+
+    /* > Flex > ComponentIcon */
+    > div > div:first-child {
+      background: ${({ theme }) => theme.colors.primary200};
+      color: ${({ theme }) => theme.colors.primary600};
+    }
+  }
+`;
+
 ComponentCategory.defaultProps = {
   components: [],
   isOpen: false,
@@ -55,5 +105,3 @@ ComponentCategory.propTypes = {
   onToggle: PropTypes.func.isRequired,
   variant: PropTypes.oneOf(['primary', 'secondary']),
 };
-
-export default ComponentCategory;

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;