@akemona-org/strapi-plugin-content-manager 3.7.0

package/admin/src/components/DynamicZone/Picker/Category/Banner/Wrapper.js

@@ -0,0 +1,78 @@
+import styled from 'styled-components';
+
+/* eslint-disable */
+
+const BannerWrapper = styled.button`
+  display: flex;
+  height: 36px;
+  width: 100%;
+  padding: 0 15px;
+  border-bottom: 0;
+  border: 1px solid rgba(227, 233, 243, 0.75);
+  background-color: ${({ theme }) => theme.main.colors.white};
+  font-size: ${({ theme }) => theme.main.sizes.fonts.md};
+  font-weight: ${({ theme }) => theme.main.fontWeights.semiBold};
+  cursor: pointer;
+
+  &:focus {
+    outline: 0;
+  }
+
+  .img-wrapper {
+    width: 19px;
+    height: 19px;
+    margin-right: 19px;
+    border-radius: 50%;
+    background-color: ${({ theme }) => theme.main.colors.mediumGrey};
+    text-align: center;
+  }
+  .label {
+    text-transform: capitalize;
+  }
+
+  svg {
+    path {
+      fill: ${({ theme }) => theme.main.colors.leftMenu['link-color']} !important;
+    }
+  }
+
+  -webkit-font-smoothing: antialiased;
+
+  > div {
+    align-self: center;
+    margin-top: -2px;
+  }
+
+  ${({ isFirst, theme }) => {
+    if (isFirst) {
+      return `
+        border-top-right-radius: ${theme.main.sizes.borderRadius};
+        border-top-left-radius: ${theme.main.sizes.borderRadius};
+      `;
+    }
+  }}
+
+  ${({ isOpen, theme }) => {
+    if (isOpen) {
+      return `
+        border: 1px solid ${theme.main.colors.darkBlue};
+        background-color: ${theme.main.colors.lightBlue};
+        color: ${theme.main.colors.mediumBlue};
+        font-weight: ${theme.main.fontWeights.bold};
+
+        .img-wrapper {
+          background-color: ${theme.main.colors.darkBlue};
+          transform: rotate(180deg);
+        }
+
+        svg {
+        path {
+            fill: ${theme.main.colors.mediumBlue} !important;
+          }
+        }
+      `;
+    }
+  }}
+`;
+
+export default BannerWrapper;

package/admin/src/components/DynamicZone/Picker/Category/Banner/index.js

@@ -0,0 +1,33 @@
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Carret } from '@buffetjs/icons';
+import Wrapper from './Wrapper';
+
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+
+const Banner = ({ category, isOpen, onToggle, isFirst }) => {
+  const handleClick = () => {
+    onToggle(category);
+  };
+
+  return (
+    <Wrapper type="button" isFirst={isFirst} isOpen={isOpen} onClick={handleClick}>
+      <div className="img-wrapper">
+        <Carret />
+      </div>
+      <div className="label">{category}</div>
+    </Wrapper>
+  );
+};
+
+Banner.propTypes = {
+  category: PropTypes.string.isRequired,
+  isFirst: PropTypes.bool.isRequired,
+  isOpen: PropTypes.bool.isRequired,
+  onToggle: PropTypes.func.isRequired,
+};
+
+Banner.displayName = 'Banner';
+
+export default Banner;

package/admin/src/components/DynamicZone/Picker/Category/index.js

@@ -0,0 +1,53 @@
+import React, { memo, useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import { Collapse } from 'reactstrap';
+import DynamicComponentCard from '../../../DynamicComponentCard';
+import Banner from './Banner';
+
+const Category = ({ category, components, isFirst, isOpen, onAddComponent, onToggle }) => {
+  const [showComponents, setShowComponents] = useState(false);
+
+  useEffect(() => {
+    if (isOpen) {
+      setShowComponents(true);
+    }
+  }, [isOpen]);
+
+  const handleExited = () => setShowComponents(false);
+
+  return (
+    <>
+      <Banner isFirst={isFirst} isOpen={isOpen} category={category} onToggle={onToggle} />
+      <Collapse isOpen={isOpen} onExited={handleExited}>
+        {showComponents && (
+          <div className="componentsList">
+            {components.map(({ componentUid, info: { name, icon } }) => {
+              return (
+                <DynamicComponentCard
+                  key={componentUid}
+                  componentUid={componentUid}
+                  friendlyName={name}
+                  icon={icon}
+                  onClick={() => {
+                    onAddComponent(componentUid);
+                  }}
+                />
+              );
+            })}
+          </div>
+        )}
+      </Collapse>
+    </>
+  );
+};
+
+Category.propTypes = {
+  category: PropTypes.string.isRequired,
+  components: PropTypes.array.isRequired,
+  isFirst: PropTypes.bool.isRequired,
+  isOpen: PropTypes.bool.isRequired,
+  onAddComponent: PropTypes.func.isRequired,
+  onToggle: PropTypes.func.isRequired,
+};
+
+export default memo(Category);

package/admin/src/components/DynamicZone/Picker/Wrapper.js

@@ -0,0 +1,32 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  overflow: hidden;
+
+  > div {
+    margin-top: 15px;
+    padding: 23px 18px 21px 18px;
+    background-color: #f2f3f4;
+  }
+
+  .componentPickerTitle {
+    margin-bottom: 10px;
+    color: #919bae;
+    font-weight: 600;
+    font-size: 13px;
+    line-height: normal;
+  }
+  .componentsList {
+    display: flex;
+    flex-wrap: wrap;
+    padding-top: 10px;
+    padding-left: 15px;
+    padding-right: 15px;
+  }
+
+  .categoriesList {
+    padding-bottom: 4px;
+  }
+`;
+
+export default Wrapper;

package/admin/src/components/DynamicZone/Picker/index.js

@@ -0,0 +1,88 @@
+import React, { memo, useCallback, useEffect, useMemo, useState } from 'react';
+import { groupBy } from 'lodash';
+import PropTypes from 'prop-types';
+import { Collapse } from 'reactstrap';
+import { FormattedMessage } from 'react-intl';
+import pluginId from '../../../pluginId';
+import { useContentTypeLayout } from '../../../hooks';
+import Category from './Category';
+import Wrapper from './Wrapper';
+
+const Picker = ({ components, isOpen, onClickAddComponent }) => {
+  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]);
+
+  useEffect(() => {
+    if (isOpen && dynamicComponentCategories.length) {
+      setCategoryToOpen(dynamicComponentCategories[0].category);
+    }
+  }, [isOpen, dynamicComponentCategories]);
+
+  const handleAddComponentToDz = useCallback(
+    componentUid => {
+      onClickAddComponent(componentUid);
+      setCategoryToOpen('');
+    },
+    [onClickAddComponent]
+  );
+
+  const handleClickToggle = useCallback(
+    categoryName => {
+      const nextCategoryToOpen = categoryToOpen === categoryName ? '' : categoryName;
+
+      setCategoryToOpen(nextCategoryToOpen);
+    },
+    [categoryToOpen]
+  );
+
+  return (
+    <Collapse isOpen={isOpen}>
+      <Wrapper>
+        <div>
+          <p className="componentPickerTitle">
+            <FormattedMessage id={`${pluginId}.components.DynamicZone.pick-compo`} />
+          </p>
+          <div className="categoriesList">
+            {dynamicComponentCategories.map(({ category, components }, index) => {
+              return (
+                <Category
+                  key={category}
+                  category={category}
+                  components={components}
+                  isOpen={category === categoryToOpen}
+                  isFirst={index === 0}
+                  onAddComponent={handleAddComponentToDz}
+                  onToggle={handleClickToggle}
+                />
+              );
+            })}
+          </div>
+        </div>
+      </Wrapper>
+    </Collapse>
+  );
+};
+
+Picker.propTypes = {
+  components: PropTypes.array.isRequired,
+  isOpen: PropTypes.bool.isRequired,
+  onClickAddComponent: PropTypes.func.isRequired,
+};
+
+export default memo(Picker);

package/admin/src/components/DynamicZone/Wrapper.js

@@ -0,0 +1,34 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  position: relative;
+  padding-top: 5px;
+  padding-bottom: 3px;
+  text-align: center;
+  .info {
+    position: absolute;
+    display: none;
+    top: 10px;
+    left: calc(50% + 28px);
+    > span {
+      letter-spacing: 0.5px;
+      text-transform: uppercase;
+      color: #007eff;
+      font-size: 11px;
+      font-weight: 700;
+    }
+  }
+  button {
+    &:not(.isOpen):hover + .info {
+      display: block;
+    }
+  }
+  .error-label {
+    color: #f64d0a;
+    font-size: 13px;
+    margin-top: 4px;
+    margin-bottom: -5px;
+  }
+`;
+
+export default Wrapper;

package/admin/src/components/DynamicZone/index.js

@@ -0,0 +1,238 @@
+import React, { memo, useCallback, useMemo, useState } from 'react';
+import { get } from 'lodash';
+import isEqual from 'react-fast-compare';
+import PropTypes from 'prop-types';
+import { FormattedMessage, useIntl } from 'react-intl';
+import { Flex } from '@buffetjs/core';
+import { LabelIconWrapper, NotAllowedInput } from 'strapi-helper-plugin';
+import pluginId from '../../pluginId';
+import connect from './utils/connect';
+import select from './utils/select';
+import BaselineAlignement from './BaselineAlignement';
+import Button from './Button';
+import Component from './Component';
+import ComponentWrapper from './ComponentWrapper';
+import DynamicZoneWrapper from './DynamicZoneWrapper';
+import Label from './Label';
+import Wrapper from './Wrapper';
+import Picker from './Picker';
+
+/* eslint-disable react/no-array-index-key */
+
+const DynamicZone = ({
+  name,
+  // Passed with the select function
+  addComponentToDynamicZone,
+  formErrors,
+  isCreatingEntry,
+  isFieldAllowed,
+  isFieldReadable,
+  labelIcon,
+  moveComponentUp,
+  moveComponentDown,
+  removeComponentFromDynamicZone,
+  dynamicDisplayedComponents,
+  fieldSchema,
+  metadatas,
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const { formatMessage } = useIntl();
+  // We cannot use the default props here
+  const { max = Infinity, min = -Infinity } = fieldSchema;
+  const dynamicZoneErrors = useMemo(() => {
+    return Object.keys(formErrors)
+      .filter(key => {
+        return key === name;
+      })
+      .map(key => formErrors[key]);
+  }, [formErrors, name]);
+
+  const dynamicZoneAvailableComponents = useMemo(() => fieldSchema.components || [], [fieldSchema]);
+  const dynamicDisplayedComponentsLength = dynamicDisplayedComponents.length;
+  const missingComponentNumber = min - dynamicDisplayedComponentsLength;
+  const hasError = dynamicZoneErrors.length > 0;
+  const hasMinError =
+    dynamicZoneErrors.length > 0 && get(dynamicZoneErrors, [0, 'id'], '').includes('min');
+
+  const hasRequiredError = hasError && !hasMinError;
+  const hasMaxError =
+    hasError && get(dynamicZoneErrors, [0, 'id'], '') === 'components.Input.error.validation.max';
+
+  const handleAddComponent = useCallback(
+    componentUid => {
+      setIsOpen(false);
+
+      addComponentToDynamicZone(name, componentUid, hasError);
+    },
+    [addComponentToDynamicZone, hasError, name]
+  );
+
+  const handleClickOpenPicker = () => {
+    if (dynamicDisplayedComponentsLength < max) {
+      setIsOpen(prev => !prev);
+    } else {
+      strapi.notification.info(`${pluginId}.components.notification.info.maximum-requirement`);
+    }
+  };
+
+  const formattedLabelIcon = labelIcon
+    ? { icon: labelIcon.icon, title: formatMessage(labelIcon.title) }
+    : null;
+
+  if (!isFieldAllowed && isCreatingEntry) {
+    return (
+      <BaselineAlignement>
+        <NotAllowedInput
+          label={metadatas.label}
+          spacerHeight="5px"
+          labelIcon={formattedLabelIcon}
+        />
+      </BaselineAlignement>
+    );
+  }
+
+  if (!isFieldAllowed && !isFieldReadable && !isCreatingEntry) {
+    return (
+      <BaselineAlignement>
+        <NotAllowedInput
+          label={metadatas.label}
+          spacerHeight="5px"
+          labelIcon={formattedLabelIcon}
+        />
+      </BaselineAlignement>
+    );
+  }
+
+  return (
+    <DynamicZoneWrapper>
+      {dynamicDisplayedComponentsLength > 0 && (
+        <Label>
+          <Flex>
+            <p>
+              <span>{metadatas.label}</span>
+            </p>
+            {formattedLabelIcon && (
+              <LabelIconWrapper title={formattedLabelIcon.title}>
+                {formattedLabelIcon.icon}
+              </LabelIconWrapper>
+            )}
+          </Flex>
+          <p>{metadatas.description}</p>
+        </Label>
+      )}
+
+      {/* List of displayed components */}
+      <ComponentWrapper>
+        {dynamicDisplayedComponents.map((componentUid, index) => {
+          const showDownIcon =
+            isFieldAllowed &&
+            dynamicDisplayedComponentsLength > 0 &&
+            index < dynamicDisplayedComponentsLength - 1;
+          const showUpIcon = isFieldAllowed && dynamicDisplayedComponentsLength > 0 && index > 0;
+
+          return (
+            <Component
+              componentUid={componentUid}
+              key={index}
+              index={index}
+              isFieldAllowed={isFieldAllowed}
+              moveComponentDown={moveComponentDown}
+              moveComponentUp={moveComponentUp}
+              name={name}
+              removeComponentFromDynamicZone={removeComponentFromDynamicZone}
+              showDownIcon={showDownIcon}
+              showUpIcon={showUpIcon}
+            />
+          );
+        })}
+      </ComponentWrapper>
+      {isFieldAllowed ? (
+        <Wrapper>
+          <Button
+            type="button"
+            hasError={hasError}
+            className={isOpen && 'isOpen'}
+            onClick={handleClickOpenPicker}
+          />
+          {hasRequiredError && !isOpen && !hasMaxError && (
+            <div className="error-label">
+              <FormattedMessage id={`${pluginId}.components.DynamicZone.required`} />
+            </div>
+          )}
+          {hasMaxError && !isOpen && (
+            <div className="error-label">
+              <FormattedMessage id="components.Input.error.validation.max" />
+            </div>
+          )}
+          {hasMinError && !isOpen && (
+            <div className="error-label">
+              <FormattedMessage
+                id={`${pluginId}.components.DynamicZone.missing${
+                  missingComponentNumber > 1 ? '.plural' : '.singular'
+                }`}
+                values={{ count: missingComponentNumber }}
+              />
+            </div>
+          )}
+          <div className="info">
+            <FormattedMessage
+              id={`${pluginId}.components.DynamicZone.add-compo`}
+              values={{ componentName: metadatas.label }}
+            />
+          </div>
+          <Picker
+            isOpen={isOpen}
+            components={dynamicZoneAvailableComponents}
+            onClickAddComponent={handleAddComponent}
+          />
+        </Wrapper>
+      ) : (
+        <BaselineAlignement top="9px" />
+      )}
+    </DynamicZoneWrapper>
+  );
+};
+
+DynamicZone.defaultProps = {
+  dynamicDisplayedComponents: [],
+  fieldSchema: {
+    max: Infinity,
+    min: -Infinity,
+  },
+  labelIcon: null,
+};
+
+DynamicZone.propTypes = {
+  addComponentToDynamicZone: PropTypes.func.isRequired,
+  dynamicDisplayedComponents: PropTypes.array,
+  fieldSchema: PropTypes.shape({
+    components: PropTypes.array.isRequired,
+    max: PropTypes.number,
+    min: PropTypes.number,
+  }),
+  formErrors: PropTypes.object.isRequired,
+  isCreatingEntry: PropTypes.bool.isRequired,
+  isFieldAllowed: PropTypes.bool.isRequired,
+  isFieldReadable: PropTypes.bool.isRequired,
+  labelIcon: PropTypes.shape({
+    icon: PropTypes.node.isRequired,
+    title: PropTypes.shape({
+      id: PropTypes.string.isRequired,
+      defaultMessage: PropTypes.string.isRequired,
+    }).isRequired,
+  }),
+  metadatas: PropTypes.shape({
+    description: PropTypes.string,
+    label: PropTypes.string,
+  }).isRequired,
+  moveComponentUp: PropTypes.func.isRequired,
+  moveComponentDown: PropTypes.func.isRequired,
+  name: PropTypes.string.isRequired,
+  removeComponentFromDynamicZone: PropTypes.func.isRequired,
+};
+
+const Memoized = memo(DynamicZone, isEqual);
+
+export default connect(Memoized, select);
+
+export { DynamicZone };

package/admin/src/components/DynamicZone/utils/connect.js

@@ -0,0 +1,12 @@
+import React from 'react';
+
+function connect(WrappedComponent, select) {
+  return function(props) {
+    // eslint-disable-next-line react/prop-types
+    const selectors = select(props.name);
+
+    return <WrappedComponent {...props} {...selectors} />;
+  };
+}
+
+export default connect;

package/admin/src/components/DynamicZone/utils/select.js

@@ -0,0 +1,49 @@
+import { useMemo } from 'react';
+import { get } from 'lodash';
+import { useContentManagerEditViewDataManager } from 'strapi-helper-plugin';
+
+function useSelect(name) {
+  const {
+    addComponentToDynamicZone,
+    createActionAllowedFields,
+    isCreatingEntry,
+    formErrors,
+    modifiedData,
+    moveComponentUp,
+    moveComponentDown,
+    removeComponentFromDynamicZone,
+    readActionAllowedFields,
+    updateActionAllowedFields,
+  } = useContentManagerEditViewDataManager();
+
+  const dynamicDisplayedComponents = useMemo(
+    () => get(modifiedData, [name], []).map(data => data.__component),
+    [modifiedData, name]
+  );
+
+  const isFieldAllowed = useMemo(() => {
+    const allowedFields = isCreatingEntry ? createActionAllowedFields : updateActionAllowedFields;
+
+    return allowedFields.includes(name);
+  }, [name, isCreatingEntry, createActionAllowedFields, updateActionAllowedFields]);
+
+  const isFieldReadable = useMemo(() => {
+    const allowedFields = isCreatingEntry ? [] : readActionAllowedFields;
+
+    return allowedFields.includes(name);
+  }, [name, isCreatingEntry, readActionAllowedFields]);
+
+  return {
+    addComponentToDynamicZone,
+    formErrors,
+    isCreatingEntry,
+    isFieldAllowed,
+    isFieldReadable,
+    moveComponentUp,
+    moveComponentDown,
+    removeComponentFromDynamicZone,
+    dynamicDisplayedComponents,
+  };
+}
+
+export default useSelect;

package/admin/src/components/FieldComponent/ComponentIcon.js

@@ -0,0 +1,44 @@
+import styled from 'styled-components';
+
+const ComponentIcon = styled.div`
+  position: absolute;
+  top: -16px;
+  left: 10px;
+  display: flex;
+
+  > .component_name {
+    overflow: hidden;
+    position: relative;
+    width: auto;
+    height: 31px;
+    padding: 0 11px 0 39px;
+    color: #007eff;
+    font-size: 13px;
+    font-weight: 600;
+    line-height: 26px;
+    border-radius: 31px;
+    border: 2px solid white;
+    background-color: #e6f0fb;
+
+    .component_icon {
+      z-index: 1;
+      display: flex;
+      position: absolute;
+      top: -1px;
+      left: -1px;
+      width: 29px;
+      height: 29px;
+      border-radius: 31px;
+      border: 1px solid white;
+      background-color: #e6f0fb;
+
+      svg {
+        margin: auto;
+        color: #007eff;
+        font-size: 11px;
+      }
+    }
+  }
+`;
+
+export default ComponentIcon;

package/admin/src/components/FieldComponent/EmptyComponent.js

@@ -0,0 +1,19 @@
+import styled from 'styled-components';
+
+const EmptyComponent = styled.div`
+  height: 72px;
+  border: 1px solid rgba(227, 233, 243, 0.75);
+  border-top-left-radius: 2px;
+  border-top-right-radius: 2px;
+  border-bottom: 0;
+  line-height: 73px;
+  text-align: center;
+
+  > p {
+    color: #9ea7b8;
+    font-size: 13px;
+    font-weight: 500;
+  }
+`;
+
+export default EmptyComponent;

package/admin/src/components/FieldComponent/Label.js

@@ -0,0 +1,10 @@
+import styled from 'styled-components';
+
+const Label = styled.label`
+  font-weight: 500;
+  font-size: 13px;
+  margin-bottom: 1rem;
+  display: block;
+`;
+
+export default Label;