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

package/admin/src/components/DraggedFieldWithPreview/DynamicComponent.js

@@ -0,0 +1,70 @@
+import React, { useEffect, useState } from 'react';
+import { useHistory } from 'react-router-dom';
+import PropTypes from 'prop-types';
+import { hasPermissions, useUser } from 'strapi-helper-plugin';
+import pluginId from '../../pluginId';
+import pluginPermissions from '../../permissions';
+import DynamicComponentCard from '../DynamicComponentCard';
+import Tooltip from './Tooltip';
+
+const DynamicComponent = ({ componentUid, friendlyName, icon, setIsOverDynamicZone }) => {
+  const [isOver, setIsOver] = useState(false);
+  const [{ isLoading, canAccess }, setState] = useState({ isLoading: true, canAccess: false });
+  const { push } = useHistory();
+  const { userPermissions } = useUser();
+
+  useEffect(() => {
+    const checkPermission = async () => {
+      try {
+        const canAccess = await hasPermissions(
+          userPermissions,
+          pluginPermissions.componentsConfigurations
+        );
+
+        setState({ isLoading: false, canAccess });
+      } catch (err) {
+        setState({ isLoading: false });
+      }
+    };
+
+    checkPermission();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const handleMouseEvent = () => {
+    setIsOverDynamicZone(v => !v);
+    setIsOver(v => !v);
+  };
+
+  return (
+    <DynamicComponentCard
+      componentUid={componentUid}
+      friendlyName={friendlyName}
+      icon={icon}
+      isOver={isOver}
+      onClick={() => {
+        if (!isLoading && canAccess) {
+          push(`/plugins/${pluginId}/components/${componentUid}/configurations/edit`);
+        }
+      }}
+      onMouseEvent={handleMouseEvent}
+      tradId="components.DraggableAttr.edit"
+    >
+      <Tooltip isOver={isOver}>{componentUid}</Tooltip>
+    </DynamicComponentCard>
+  );
+};
+
+DynamicComponent.defaultProps = {
+  friendlyName: '',
+  icon: 'smile',
+};
+
+DynamicComponent.propTypes = {
+  componentUid: PropTypes.string.isRequired,
+  friendlyName: PropTypes.string,
+  icon: PropTypes.string,
+  setIsOverDynamicZone: PropTypes.func.isRequired,
+};
+
+export default DynamicComponent;

package/admin/src/components/DraggedFieldWithPreview/DynamicZoneWrapper.js

@@ -0,0 +1,10 @@
+import styled from 'styled-components';
+
+const DynamicZoneWrapper = styled.div`
+  display: flex;
+  margin: 5px 0 0px 0;
+  overflow: auto;
+  height: 119px;
+`;
+
+export default DynamicZoneWrapper;

package/admin/src/components/DraggedFieldWithPreview/Tooltip.js

@@ -0,0 +1,19 @@
+import styled from 'styled-components';
+
+const Tooltip = styled.div`
+  position: absolute;
+  bottom: -10px;
+  left: 105px;
+  visibility: ${({ isOver }) => (isOver ? 'visible' : 'hidden')};
+  line-height: 20px;
+  height: 20px;
+  padding: 0 10px;
+  background-color: #000000;
+  font-size: 12px;
+  color: #fff;
+  opacity: 0.5;
+  border: 1px solid #e3e9f3;
+  z-index: 99;
+`;
+
+export default Tooltip;

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

@@ -0,0 +1,24 @@
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+
+const Wrapper = styled.div`
+  display: flex;
+  position: relative;
+  min-height: ${({ withLongerHeight }) =>
+    withLongerHeight ? '102px' : '30px'};
+
+  .sub {
+    width: 100%;
+    padding: 0 5px;
+  }
+`;
+
+Wrapper.defaultProps = {
+  withLongerHeight: false,
+};
+
+Wrapper.propTypes = {
+  withLongerHeight: PropTypes.bool,
+};
+
+export default Wrapper;

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

@@ -0,0 +1,194 @@
+import React, { forwardRef, useState } from 'react';
+import { get } from 'lodash';
+import PropTypes from 'prop-types';
+import DraggedField from '../DraggedField';
+import PreviewCarret from '../PreviewCarret';
+import Carret from './Carret';
+import DynamicZoneWrapper from './DynamicZoneWrapper';
+import Wrapper from './Wrapper';
+import DynamicComponent from './DynamicComponent';
+
+/* eslint-disable react/no-array-index-key */
+
+const DraggedFieldWithPreview = forwardRef(
+  (
+    {
+      goTo,
+      componentUid,
+      componentLayouts,
+      dynamicZoneComponents,
+      isDragging,
+      label,
+      name,
+      onClickEdit,
+      onClickRemove,
+      selectedItem,
+      showLeftCarret,
+      showRightCarret,
+      size,
+      style,
+      type,
+    },
+    refs
+  ) => {
+    const isHidden = name === '_TEMP_';
+    const [dragStart, setDragStart] = useState(false);
+    const [isOverDynamicZone, setIsOverDynamicZone] = useState(false);
+    const opacity = isDragging ? 0.2 : 1;
+    const isFullSize = size === 12;
+    const display = isFullSize && dragStart ? 'none' : '';
+    const width = isFullSize && dragStart ? 0 : '100%';
+    const higherFields = ['json', 'text', 'file', 'media', 'component', 'richtext', 'dynamiczone'];
+    const withLongerHeight = higherFields.includes(type) && !dragStart;
+    const getCompoInfos = uid => get(componentLayouts, [uid, 'info'], { name: '', icon: '' });
+
+    const componentData = get(componentLayouts, [componentUid], {});
+    const componentLayout = get(componentData, ['layouts', 'edit'], []);
+    const getWrapperWitdh = colNum => `${(1 / 12) * colNum * 100}%`;
+
+    return (
+      <div
+        style={{ width: getWrapperWitdh(size) }}
+        onDrag={() => {
+          if (isFullSize && !dragStart) {
+            setDragStart(true);
+          }
+        }}
+        onDragEnd={() => {
+          if (isFullSize) {
+            setDragStart(false);
+          }
+        }}
+      >
+        <Wrapper ref={refs.dropRef} withLongerHeight={withLongerHeight} style={style}>
+          {dragStart && isFullSize && <PreviewCarret style={{ marginRight: '-10px' }} />}
+          <>
+            {showLeftCarret && <Carret />}
+
+            <div className="sub" style={{ width, opacity }}>
+              <DraggedField
+                goTo={goTo}
+                componentUid={componentUid}
+                isHidden={isHidden}
+                isOverDynamicZone={isOverDynamicZone}
+                label={label}
+                name={name}
+                onClick={onClickEdit}
+                onRemove={onClickRemove}
+                ref={refs.dragRef}
+                selectedItem={selectedItem}
+                style={{ display, marginRight: 0, paddingRight: 0 }}
+                type={type}
+                withLongerHeight={withLongerHeight}
+              >
+                {type === 'component' &&
+                  componentLayout.map((row, i) => {
+                    const marginBottom = i === componentLayout.length - 1 ? '29px' : '';
+                    const marginTop = i === 0 ? '5px' : '';
+
+                    return (
+                      <div
+                        style={{
+                          display: 'flex',
+                          marginBottom,
+                          marginTop,
+                        }}
+                        key={i}
+                      >
+                        {row.map(field => {
+                          const fieldType = get(
+                            componentData,
+                            ['attributes', field.name, 'type'],
+                            ''
+                          );
+                          const label = get(
+                            componentData,
+                            ['metadatas', field.name, 'edit', 'label'],
+                            ''
+                          );
+
+                          return (
+                            <div
+                              key={field.name}
+                              style={{
+                                width: getWrapperWitdh(field.size),
+                                marginBottom: '6px',
+                              }}
+                            >
+                              <DraggedField
+                                label={label}
+                                name={field.name}
+                                isSub
+                                withLongerHeight={higherFields.includes(fieldType)}
+                              />
+                            </div>
+                          );
+                        })}
+                      </div>
+                    );
+                  })}
+                {type === 'dynamiczone' && (
+                  <DynamicZoneWrapper>
+                    {dynamicZoneComponents.map(compo => {
+                      const { name, icon } = getCompoInfos(compo);
+
+                      return (
+                        <DynamicComponent
+                          key={compo}
+                          componentUid={compo}
+                          friendlyName={name}
+                          icon={icon}
+                          setIsOverDynamicZone={setIsOverDynamicZone}
+                        />
+                      );
+                    })}
+                  </DynamicZoneWrapper>
+                )}
+              </DraggedField>
+            </div>
+            {showRightCarret && <Carret right />}
+          </>
+        </Wrapper>
+      </div>
+    );
+  }
+);
+
+DraggedFieldWithPreview.defaultProps = {
+  goTo: () => {},
+  componentLayouts: {},
+  componentUid: null,
+  dynamicZoneComponents: [],
+  isDragging: false,
+  label: '',
+  onClickEdit: () => {},
+  onClickRemove: () => {},
+  selectedItem: '',
+  showLeftCarret: false,
+  showRightCarret: false,
+  size: 1,
+  style: {},
+  type: 'string',
+};
+
+DraggedFieldWithPreview.propTypes = {
+  goTo: PropTypes.func,
+  componentLayouts: PropTypes.object,
+  componentUid: PropTypes.string,
+  dynamicZoneComponents: PropTypes.array,
+  isDragging: PropTypes.bool,
+  label: PropTypes.string,
+  name: PropTypes.string.isRequired,
+  onClickEdit: PropTypes.func,
+  onClickRemove: PropTypes.func,
+  selectedItem: PropTypes.string,
+  showLeftCarret: PropTypes.bool,
+  showRightCarret: PropTypes.bool,
+  size: PropTypes.number,
+  style: PropTypes.object,
+  type: PropTypes.string,
+};
+
+DraggedFieldWithPreview.displayName = 'DraggedFieldWithPreview';
+
+export default DraggedFieldWithPreview;

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

@@ -0,0 +1,63 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  position: relative;
+  height: 90px;
+  width: 139px !important;
+  margin: 0 10px 10px 0;
+  padding: 18px 10px;
+  background-color: #ffffff;
+  color: #919bae;
+  text-align: center;
+  border-radius: 2px;
+  cursor: pointer;
+  border: 1px solid #ffffff;
+
+  button {
+    outline: 0;
+  }
+
+  .component-uid {
+    width: 119px;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    color: #919bae;
+    font-weight: 500;
+    font-size: 13px;
+    line-height: normal;
+  }
+
+  .component-icon {
+    width: 35px;
+    height: 35px;
+    margin-bottom: 5px;
+    line-height: 35px;
+    align-self: center;
+    border-radius: 50%;
+    background-color: #e9eaeb;
+    color: #b4b6ba;
+    padding: 0;
+    i,
+    svg {
+      margin: auto;
+      display: block;
+    }
+  }
+
+  &:hover {
+    background-color: #e6f0fb;
+    color: #007eff;
+    border: 1px solid #aed4fb;
+
+    .component-icon {
+      background-color: #aed4fb;
+      color: #007eff;
+    }
+    .component-uid {
+      color: #007eff;
+    }
+  }
+`;
+
+export default Wrapper;

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

@@ -0,0 +1,49 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import Wrapper from './Wrapper';
+
+const DynamicComponentCard = ({
+  children,
+  componentUid,
+  friendlyName,
+  icon,
+  onClick,
+}) => {
+  return (
+    <Wrapper
+      onClick={e => {
+        e.preventDefault();
+        e.stopPropagation();
+
+        onClick(componentUid);
+      }}
+    >
+      <button className="component-icon" type="button">
+        <FontAwesomeIcon icon={icon} />
+      </button>
+
+      <div className="component-uid">
+        <span>{friendlyName}</span>
+      </div>
+      {children}
+    </Wrapper>
+  );
+};
+
+DynamicComponentCard.defaultProps = {
+  children: null,
+  friendlyName: '',
+  onClick: () => {},
+  icon: 'smile',
+};
+
+DynamicComponentCard.propTypes = {
+  children: PropTypes.node,
+  componentUid: PropTypes.string.isRequired,
+  friendlyName: PropTypes.string,
+  icon: PropTypes.string,
+  onClick: PropTypes.func,
+};
+
+export default DynamicComponentCard;

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

@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+
+const BaselineAlignement = styled.div`
+  padding-top: ${({ top }) => top};
+`;
+
+BaselineAlignement.defaultProps = {
+  top: '1px',
+};
+
+export default BaselineAlignement;

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

@@ -0,0 +1,31 @@
+import styled from 'styled-components';
+import PlusButton from '../PlusButton';
+
+/* eslint-disable indent */
+const Button = styled(PlusButton)`
+  transform: rotate(-90deg);
+  transition: background-color 0.1s linear;
+  transition: transform 0.1s ease-in-out;
+  &:hover {
+    background-color: #aed4fb;
+    :before,
+    :after {
+      background-color: #007eff;
+    }
+  }
+
+  ${({ hasError }) =>
+    hasError &&
+    `
+    background-color: #FAA684;
+    :before, :after {
+      background-color: #F64D0A;
+    }
+  `}
+
+  &.isOpen {
+    transform: rotate(-45deg);
+  }
+`;
+
+export default Button;

package/admin/src/components/DynamicZone/Component/RoundCTA.js

@@ -0,0 +1,45 @@
+import styled from 'styled-components';
+
+const RoundCTA = styled.div`
+  height: 31px;
+  width: 31px;
+  border-radius: 50%;
+  background-color: #f2f3f4;
+  border: 2px solid #ffffff;
+  cursor: pointer;
+  display: flex;
+  z-index: 9;
+  svg {
+    font-size: 10px;
+    line-height: 29px;
+    margin: auto;
+  }
+  &:not(.arrow-btn) {
+    position: absolute;
+    top: -16px;
+    right: 10px;
+    transition: all 200ms ease-in;
+    &:hover {
+      background-color: #faa684;
+      color: #f64d0a;
+    }
+  }
+  &.arrow-btn {
+    height: 22px;
+    width: 22px;
+    background-color: #ffffff;
+    border: 2px solid #ffffff;
+    svg {
+      font-size: 10px;
+      line-height: 22px;
+    }
+    &:hover {
+      background-color: #f2f3f4;
+    }
+    &.arrow-down {
+      transform: rotate(180deg);
+    }
+  }
+`;
+
+export default RoundCTA;

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

@@ -0,0 +1,79 @@
+import React, { memo, useMemo } from 'react';
+import { Arrow } from '@buffetjs/icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import PropTypes from 'prop-types';
+import isEqual from 'react-fast-compare';
+import { useContentTypeLayout } from '../../../hooks';
+import FieldComponent from '../../FieldComponent';
+import RoundCTA from './RoundCTA';
+
+const Component = ({
+  componentUid,
+  index,
+  isFieldAllowed,
+  moveComponentDown,
+  moveComponentUp,
+  name,
+  removeComponentFromDynamicZone,
+  showDownIcon,
+  showUpIcon,
+}) => {
+  const { getComponentLayout } = useContentTypeLayout();
+  const { icon, friendlyName } = useMemo(() => {
+    const {
+      info: { icon, name },
+    } = getComponentLayout(componentUid);
+
+    return { friendlyName: name, icon };
+  }, [componentUid, getComponentLayout]);
+
+  const handleMoveComponentDown = () => moveComponentDown(name, index);
+
+  const handleMoveComponentUp = () => moveComponentUp(name, index);
+
+  const handleRemove = () => removeComponentFromDynamicZone(name, index);
+
+  return (
+    <div>
+      <div className="arrow-icons">
+        {showDownIcon && (
+          <RoundCTA className="arrow-btn arrow-down" onClick={handleMoveComponentDown}>
+            <Arrow />
+          </RoundCTA>
+        )}
+        {showUpIcon && (
+          <RoundCTA className="arrow-btn arrow-up" onClick={handleMoveComponentUp}>
+            <Arrow />
+          </RoundCTA>
+        )}
+      </div>
+      {isFieldAllowed && (
+        <RoundCTA onClick={handleRemove}>
+          <FontAwesomeIcon icon="trash-alt" />
+        </RoundCTA>
+      )}
+      <FieldComponent
+        componentUid={componentUid}
+        componentFriendlyName={friendlyName}
+        icon={icon}
+        label=""
+        name={`${name}.${index}`}
+        isFromDynamicZone
+      />
+    </div>
+  );
+};
+
+Component.propTypes = {
+  componentUid: PropTypes.string.isRequired,
+  index: PropTypes.number.isRequired,
+  isFieldAllowed: PropTypes.bool.isRequired,
+  moveComponentDown: PropTypes.func.isRequired,
+  moveComponentUp: PropTypes.func.isRequired,
+  name: PropTypes.string.isRequired,
+  removeComponentFromDynamicZone: PropTypes.func.isRequired,
+  showDownIcon: PropTypes.bool.isRequired,
+  showUpIcon: PropTypes.bool.isRequired,
+};
+
+export default memo(Component, isEqual);

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

@@ -0,0 +1,44 @@
+import styled from 'styled-components';
+
+const ComponentWrapper = styled.div`
+  position: relative;
+  > div {
+    position: relative;
+    box-shadow: 0 2px 4px #e3e9f3;
+    border-radius: 2px;
+    .arrow-icons {
+      position: absolute;
+      top: -12px;
+      right: 49px;
+      z-index: 9;
+      .arrow-btn {
+        display: inline-flex;
+        svg {
+          margin-left: 5px;
+          margin-top: 5px;
+        }
+      }
+    }
+    &:not(:first-of-type) {
+      margin-top: 32px;
+      &:before {
+        content: '&';
+        position: absolute;
+        top: -30px;
+        left: 24.5px;
+        height: 100%;
+        width: 2px;
+        background-color: #e6f0fb;
+        color: transparent;
+      }
+    }
+    > div:last-of-type {
+      padding-top: 6px;
+      padding-bottom: 5px;
+      margin-bottom: 22px;
+      border-radius: 2px;
+    }
+  }
+`;
+
+export default ComponentWrapper;

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

@@ -0,0 +1,12 @@
+import styled from 'styled-components';
+
+const DynamicZoneWrapper = styled.div`
+  position: relative;
+  padding-top: 10px;
+  margin-bottom: 15px;
+  & + & {
+    padding-top: 13px;
+  }
+`;
+
+export default DynamicZoneWrapper;

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

@@ -0,0 +1,42 @@
+import styled from 'styled-components';
+
+const Label = styled.div`
+  padding: 9px 20px;
+  font-size: 13px;
+  font-weight: 600;
+  position: relative;
+  min-height: 64px;
+  &:after {
+    content: '•';
+    position: absolute;
+    top: 15px;
+    left: 21.5px;
+    font-size: 15px;
+    width: 8px;
+    height: 8px;
+    background-color: #aed4fb;
+    color: transparent;
+    border-radius: 4px;
+    border: 1px solid white;
+  }
+  &:before {
+    content: '&';
+    position: absolute;
+    top: 22px;
+    left: 24.5px;
+    height: 100%;
+    width: 2px;
+    background-color: #e6f0fb;
+    color: transparent;
+  }
+  p {
+    padding-left: 18px;
+    margin-bottom: 0;
+  }
+  p:last-of-type:not(:first-of-type) {
+    color: #9ea7b8;
+    font-weight: 400;
+  }
+`;
+
+export default Label;