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

package/admin/src/content-manager/components/ComponentIcon/ComponentIcon.js

@@ -1,49 +1,39 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import styled from 'styled-components';
 
-import { Flex } from '@strapi/design-system';
+import { Flex, Icon } from '@strapi/design-system';
+import { COMPONENT_ICONS } from './constants';
 
-const WIDTH_S = 5;
-const WIDTH_M = 8;
-
-const Wrapper = styled(Flex)`
-  border-radius: ${({ showBackground }) => (showBackground ? `50%` : 0)};
-  color: ${({ theme }) => theme.colors.neutral600};
-  height: ${({ theme, size }) => theme.spaces[size === 'S' ? WIDTH_S : WIDTH_M]};
-  width: ${({ theme, size }) => theme.spaces[size === 'S' ? WIDTH_S : WIDTH_M]};
-
-  svg {
-    height: ${({ theme, size }) => theme.spaces[size === 'S' ? WIDTH_S - 2 : WIDTH_M - 3]};
-    width: ${({ theme, size }) => theme.spaces[size === 'S' ? WIDTH_S - 2 : WIDTH_M - 3]};
-  }
-`;
-
-export function ComponentIcon({ showBackground = true, size = 'M' }) {
+export function ComponentIcon({ showBackground = true, size = 'M', icon }) {
   return (
-    <Wrapper
+    <Flex
       alignItems="center"
       background={showBackground ? 'neutral200' : null}
       justifyContent="center"
       size={size}
       showBackground={showBackground}
+      height={size === 'S' ? 5 : 8}
+      width={size === 'S' ? 5 : 8}
+      color="neutral600"
+      borderRadius={showBackground ? '50%' : 0}
     >
-      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
-        <path
-          d="M216.3 2c4.8-2.6 10.5-2.6 15.3 0L422.3 106c5.1 2.8 8.3 8.2 8.3 14s-3.2 11.2-8.3 14L231.7 238c-4.8 2.6-10.5 2.6-15.3 0L25.7 134c-5.1-2.8-8.3-8.2-8.3-14s3.2-11.2 8.3-14L216.3 2zM23.7 170l176 96c5.1 2.8 8.3 8.2 8.3 14V496c0 5.6-3 10.9-7.8 13.8s-10.9 3-15.8 .3L8.3 414C3.2 411.2 0 405.9 0 400V184c0-5.6 3-10.9 7.8-13.8s10.9-3 15.8-.3zm400.7 0c5-2.7 11-2.6 15.8 .3s7.8 8.1 7.8 13.8V400c0 5.9-3.2 11.2-8.3 14l-176 96c-5 2.7-11 2.6-15.8-.3s-7.8-8.1-7.8-13.8V280c0-5.9 3.2-11.2 8.3-14l176-96z"
-          fill="currentColor"
-        />
-      </svg>
-    </Wrapper>
+      <Icon
+        as={COMPONENT_ICONS[icon] || COMPONENT_ICONS.cube}
+        height={size === 'S' ? 3 : 5}
+        width={size === 'S' ? 3 : 5}
+      />
+    </Flex>
   );
 }
 
 ComponentIcon.defaultProps = {
   showBackground: true,
   size: 'M',
+  icon: 'Cube',
 };
 
 ComponentIcon.propTypes = {
   showBackground: PropTypes.bool,
   size: PropTypes.string,
+  icon: PropTypes.string,
 };

package/admin/src/content-manager/components/ComponentIcon/constants.js

@@ -0,0 +1,133 @@
+import * as Icons from '@strapi/icons';
+
+const COMPONENT_ICONS = {
+  alien: Icons.Alien,
+  apps: Icons.Apps,
+  archive: Icons.Archive,
+  arrowDown: Icons.ArrowDown,
+  arrowLeft: Icons.ArrowLeft,
+  arrowRight: Icons.ArrowRight,
+  arrowUp: Icons.ArrowUp,
+  attachment: Icons.Attachment,
+  bell: Icons.Bell,
+  bold: Icons.Bold,
+  book: Icons.Book,
+  briefcase: Icons.Briefcase,
+  brush: Icons.Brush,
+  bulletList: Icons.BulletList,
+  calendar: Icons.Calendar,
+  car: Icons.Car,
+  cast: Icons.Cast,
+  chartBubble: Icons.ChartBubble,
+  chartCircle: Icons.ChartCircle,
+  chartPie: Icons.ChartPie,
+  check: Icons.Check,
+  clock: Icons.Clock,
+  cloud: Icons.Cloud,
+  code: Icons.Code,
+  cog: Icons.Cog,
+  collapse: Icons.Collapse,
+  command: Icons.Command,
+  connector: Icons.Connector,
+  crop: Icons.Crop,
+  crown: Icons.Crown,
+  cube: Icons.Cube,
+  cup: Icons.Cup,
+  cursor: Icons.Cursor,
+  dashboard: Icons.Dashboard,
+  database: Icons.Database,
+  discuss: Icons.Discuss,
+  doctor: Icons.Doctor,
+  earth: Icons.Earth,
+  emotionHappy: Icons.EmotionHappy,
+  emotionUnhappy: Icons.EmotionUnhappy,
+  envelop: Icons.Envelop,
+  exit: Icons.Exit,
+  expand: Icons.Expand,
+  eye: Icons.Eye,
+  feather: Icons.Feather,
+  file: Icons.File,
+  fileError: Icons.FileError,
+  filePdf: Icons.FilePdf,
+  filter: Icons.Filter,
+  folder: Icons.Folder,
+  gate: Icons.Gate,
+  gift: Icons.Gift,
+  globe: Icons.Globe,
+  grid: Icons.Grid,
+  handHeart: Icons.HandHeart,
+  hashtag: Icons.Hashtag,
+  headphone: Icons.Headphone,
+  heart: Icons.Heart,
+  house: Icons.House,
+  information: Icons.Information,
+  italic: Icons.Italic,
+  key: Icons.Key,
+  landscape: Icons.Landscape,
+  layer: Icons.Layer,
+  layout: Icons.Layout,
+  lightbulb: Icons.Lightbulb,
+  link: Icons.Link,
+  lock: Icons.Lock,
+  magic: Icons.Magic,
+  manyToMany: Icons.ManyToMany,
+  manyToOne: Icons.ManyToOne,
+  manyWays: Icons.ManyWays,
+  medium: Icons.Medium,
+  message: Icons.Message,
+  microphone: Icons.Microphone,
+  monitor: Icons.Monitor,
+  moon: Icons.Moon,
+  music: Icons.Music,
+  oneToMany: Icons.OneToMany,
+  oneToOne: Icons.OneToOne,
+  oneWay: Icons.OneWay,
+  paint: Icons.Paint,
+  paintBrush: Icons.PaintBrush,
+  paperPlane: Icons.PaperPlane,
+  pencil: Icons.Pencil,
+  phone: Icons.Phone,
+  picture: Icons.Picture,
+  pin: Icons.Pin,
+  pinMap: Icons.PinMap,
+  plane: Icons.Plane,
+  play: Icons.Play,
+  plus: Icons.Plus,
+  priceTag: Icons.PriceTag,
+  puzzle: Icons.Puzzle,
+  question: Icons.Question,
+  quote: Icons.Quote,
+  refresh: Icons.Refresh,
+  repeat: Icons.Repeat,
+  restaurant: Icons.Restaurant,
+  rocket: Icons.Rocket,
+  rotate: Icons.Rotate,
+  scissors: Icons.Scissors,
+  search: Icons.Search,
+  seed: Icons.Seed,
+  server: Icons.Server,
+  shield: Icons.Shield,
+  shirt: Icons.Shirt,
+  shoppingCart: Icons.ShoppingCart,
+  slideshow: Icons.Slideshow,
+  stack: Icons.Stack,
+  star: Icons.Star,
+  store: Icons.Store,
+  strikeThrough: Icons.StrikeThrough,
+  sun: Icons.Sun,
+  television: Icons.Television,
+  thumbDown: Icons.ThumbDown,
+  thumbUp: Icons.ThumbUp,
+  train: Icons.Train,
+  twitter: Icons.Twitter,
+  typhoon: Icons.Typhoon,
+  underline: Icons.Underline,
+  user: Icons.User,
+  volumeMute: Icons.VolumeMute,
+  volumeUp: Icons.VolumeUp,
+  walk: Icons.Walk,
+  wheelchair: Icons.Wheelchair,
+  write: Icons.Write,
+};
+
+export { COMPONENT_ICONS };

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;