@akemona-org/strapi-plugin-content-type-builder 3.7.0

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

@@ -0,0 +1,40 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Checkbox, Text } from '@buffetjs/core';
+import Wrapper from './Wrapper';
+
+const CheckboxWithDescription = ({ description, error, label, value, ...rest }) => {
+  return (
+    <>
+      <Wrapper>
+        <Checkbox {...rest} message={label} label={label} type="checkbox" value={value} />
+        {description && (
+          <Text color="grey" title={description} fontSize="sm" ellipsis>
+            {description}
+          </Text>
+        )}
+        {error && (
+          <Text color="lightOrange" lineHeight="18px">
+            {error}
+          </Text>
+        )}
+      </Wrapper>
+    </>
+  );
+};
+
+CheckboxWithDescription.defaultProps = {
+  description: null,
+  error: null,
+  label: null,
+  value: false,
+};
+
+CheckboxWithDescription.propTypes = {
+  description: PropTypes.string,
+  error: PropTypes.string,
+  label: PropTypes.string,
+  value: PropTypes.bool,
+};
+
+export default CheckboxWithDescription;

package/admin/src/components/ComponentCard/Close.js

@@ -0,0 +1,12 @@
+import styled from 'styled-components';
+import { Remove } from '@buffetjs/icons';
+
+const Close = styled(Remove)`
+  > g {
+    > path {
+      fill: #007eff;
+    }
+  }
+`;
+
+export default Close;

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

@@ -0,0 +1,84 @@
+/**
+ *
+ * Wrapper
+ *
+ */
+
+import styled from 'styled-components';
+
+const Wrapper = styled.button`
+  width: 139px;
+  height: 90px;
+  position: relative;
+  padding: 0;
+  padding-top: 5px;
+  border-radius: 2px;
+  text-align: center;
+  border: solid 1px #fafafb;
+  background-color: #fafafb;
+
+  &:focus {
+    outline: 0;
+  }
+
+  div:first-of-type {
+    display: flex;
+    width: 35px;
+    height: 35px;
+    margin: auto;
+    border-radius: 18px;
+    background-color: #e9eaeb;
+    color: #919bae;
+    font-size: 12px;
+
+    svg {
+      margin: auto;
+    }
+  }
+
+  div:last-of-type {
+    position: absolute;
+    padding: 0 7px;
+    top: 0;
+    right: 0;
+    display: none;
+  }
+
+  p {
+    margin-top: 5px;
+    padding-left: 5px;
+    padding-right: 5px;
+    line-height: normal;
+    font-size: 13px;
+    font-weight: bold;
+    color: #919bae;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &.active {
+    cursor: initial;
+  }
+
+  &:hover,
+  &.active {
+    border-color: #aed4fb;
+    background-color: #e6f0fb;
+
+    div:first-of-type {
+      background-color: #aed4fb;
+      color: #007eff;
+    }
+
+    div:last-of-type {
+      display: block;
+    }
+
+    p {
+      color: #007eff;
+    }
+  }
+`;
+
+export default Wrapper;

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

@@ -0,0 +1,62 @@
+/**
+ *
+ * ComponentCard
+ *
+ */
+
+import React from 'react';
+import { get } from 'lodash';
+import PropTypes from 'prop-types';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+import useDataManager from '../../hooks/useDataManager';
+import Wrapper from './Wrapper';
+import Close from './Close';
+
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+
+function ComponentCard({ component, dzName, index, isActive, isInDevelopmentMode, onClick }) {
+  const { modifiedData, removeComponentFromDynamicZone } = useDataManager();
+  const {
+    schema: { icon, name },
+  } = get(modifiedData, ['components', component], {
+    schema: { icon: null },
+  });
+
+  return (
+    <Wrapper onClick={onClick} className={isActive ? 'active' : ''}>
+      <div>
+        <FontAwesomeIcon icon={icon} />
+      </div>
+      <p>{name}</p>
+      <div
+        className="close-btn"
+        onClick={e => {
+          e.stopPropagation();
+          removeComponentFromDynamicZone(dzName, index);
+        }}
+      >
+        {isInDevelopmentMode && <Close width="7px" height="7px" />}
+      </div>
+    </Wrapper>
+  );
+}
+
+ComponentCard.defaultProps = {
+  component: null,
+  isActive: false,
+  isInDevelopmentMode: false,
+  onClick: () => {},
+};
+
+ComponentCard.propTypes = {
+  component: PropTypes.string,
+  dzName: PropTypes.string.isRequired,
+  index: PropTypes.number.isRequired,
+  isActive: PropTypes.bool,
+  isInDevelopmentMode: PropTypes.bool,
+  onClick: PropTypes.func,
+};
+
+export default ComponentCard;

package/admin/src/components/ComponentIconPicker/Cell.js

@@ -0,0 +1,40 @@
+import styled from 'styled-components';
+
+/* eslint-disable indent */
+const Cell = styled.div`
+  width: 54px;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  cursor: pointer;
+
+  ${({ isSelected }) => {
+    if (isSelected) {
+      return `
+        &::after {
+          content: '';
+          position: absolute;
+          top: 4px;
+          left: 6px;
+          border-radius: 50%;
+          width: 40px;
+          height: 40px;
+          background-color: #AED4FB;
+          z-index: 1;
+        }
+      `;
+    }
+
+    return '';
+  }}
+
+  > svg {
+    z-index: 9;
+    font-size: 18px;
+    color: ${({ isSelected }) => (isSelected ? '#007EFF' : '#b4b6ba')};
+  }
+`;
+
+export default Cell;

package/admin/src/components/ComponentIconPicker/CellRenderer.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import Cell from './Cell';
+
+const CellRenderer = ({ icon, name, onChange, style, value }) => {
+  const isSelected = icon === value;
+  const handleClick = () => {
+    onChange({ target: { name, value: icon } });
+  };
+
+  return (
+    <Cell
+      className="cell"
+      style={style}
+      isSelected={isSelected}
+      onClick={handleClick}
+    >
+      <FontAwesomeIcon icon={icon} />
+    </Cell>
+  );
+};
+
+CellRenderer.defaultProps = {
+  value: '',
+};
+
+CellRenderer.propTypes = {
+  icon: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired,
+  style: PropTypes.object.isRequired,
+  value: PropTypes.string,
+};
+
+export default CellRenderer;

package/admin/src/components/ComponentIconPicker/Search.js

@@ -0,0 +1,12 @@
+import styled from 'styled-components';
+
+import { colors } from 'strapi-helper-plugin';
+
+const Search = styled.input`
+  width: 100%;
+  padding: 0 21px;
+  outline: 0;
+  color: ${colors.leftMenu.black};
+`;
+
+export default Search;

package/admin/src/components/ComponentIconPicker/SearchWrapper.js

@@ -0,0 +1,34 @@
+import styled from 'styled-components';
+import { colors } from 'strapi-helper-plugin';
+
+const SearchWrapper = styled.div`
+  position: relative;
+  margin-top: -2px;
+  &::after {
+    display: block;
+    content: '';
+    height: 2px;
+    width: calc(100% - 20px);
+    background: ${colors.leftMenu.lightGrey};
+  }
+  > svg {
+    position: absolute;
+    bottom: 15px;
+    left: 0;
+    font-size: 11px;
+  }
+  button {
+    position: absolute;
+    top: 1px;
+    right: 0;
+    padding: 5px 0 0px 5px;
+    line-height: 11px;
+    outline: 0;
+    i,
+    svg {
+      font-size: 11px;
+    }
+  }
+`;
+
+export default SearchWrapper;

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

@@ -0,0 +1,60 @@
+import styled from 'styled-components';
+import { colors } from '@buffetjs/styles';
+import PropTypes from 'prop-types';
+
+/* eslint-disable indent */
+
+const Wrapper = styled.div`
+  min-height: 198px;
+  .collection {
+    background-color: #fafafb;
+    ${({ error }) => {
+      if (error) {
+        return `
+          border: 1px solid ${colors.darkOrange};
+          border-radius: 2px;
+        `;
+      }
+
+      return '';
+    }}
+
+    &:focus,
+    :active {
+      outline: 0;
+    }
+  }
+
+  .noCells {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1em;
+    color: #bdbdbd;
+  }
+
+  .search {
+    display: flex;
+    color: #919bae;
+    > button {
+      margin-top: -8px;
+      font-size: 1.3rem;
+      outline: 0;
+    }
+  }
+`;
+
+Wrapper.defaultProps = {
+  error: false,
+};
+
+Wrapper.propTypes = {
+  error: PropTypes.bool,
+};
+
+export default Wrapper;

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

@@ -0,0 +1,143 @@
+import React, { useEffect, useState, useRef } from 'react';
+import { useClickAwayListener } from '@buffetjs/hooks';
+import { Label, ErrorMessage } from '@buffetjs/styles';
+import { AutoSizer, Collection } from 'react-virtualized';
+import PropTypes from 'prop-types';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import useDataManager from '../../hooks/useDataManager';
+import CellRenderer from './CellRenderer';
+import Search from './Search';
+import SearchWrapper from './SearchWrapper';
+import Wrapper from './Wrapper';
+
+/* eslint-disable jsx-a11y/control-has-associated-label */
+
+const ComponentIconPicker = ({ error, isCreating, label, name, onChange, value }) => {
+  const { allIcons, allComponentsIconAlreadyTaken } = useDataManager();
+  const [originalIcon] = useState(value);
+  const initialIcons = allIcons.filter(ico => {
+    if (isCreating) {
+      return !allComponentsIconAlreadyTaken.includes(ico);
+    }
+
+    // Edition
+    return !allComponentsIconAlreadyTaken.filter(icon => icon !== originalIcon).includes(ico);
+  });
+  const ref = useRef();
+  const searchWrapperRef = useRef();
+  const [showSearch, setShowSearch] = useState(false);
+  const [search, setSearch] = useState('');
+  const [icons, setIcons] = useState(initialIcons);
+  const toggleSearch = () => setShowSearch(prev => !prev);
+
+  useClickAwayListener(searchWrapperRef, () => {
+    setShowSearch(false);
+  });
+
+  useEffect(() => {
+    if (showSearch && ref.current) {
+      ref.current.focus();
+    }
+  }, [ref, showSearch]);
+
+  const cellCount = icons.length;
+
+  const cellSizeAndPositionGetter = ({ index }) => {
+    const columnCount = 16;
+    const columnPosition = index % (columnCount || 1);
+
+    const height = 48;
+    const width = 52;
+    let x = columnPosition * width;
+
+    if (x === 0) {
+      x = 8;
+    }
+
+    const y = parseInt(index / 16, 10) * 48;
+
+    return {
+      height,
+      width,
+      x,
+      y,
+    };
+  };
+
+  const handleChangeSearch = ({ target: { value } }) => {
+    setSearch(value);
+    setIcons(() => initialIcons.filter(icon => icon.includes(value)));
+  };
+
+  return (
+    <Wrapper error={error !== null}>
+      <div className="search">
+        <Label htmlFor={name} style={{ marginBottom: 12 }}>
+          {label}
+        </Label>
+        {!showSearch ? (
+          <button onClick={toggleSearch} type="button">
+            <FontAwesomeIcon icon="search" />
+          </button>
+        ) : (
+          <SearchWrapper ref={searchWrapperRef}>
+            <FontAwesomeIcon icon="search" />
+            <button onClick={toggleSearch} type="button" />
+            <Search ref={ref} onChange={handleChangeSearch} value={search} placeholder="Search…" />
+            <button
+              onClick={() => {
+                setSearch('');
+                setIcons(initialIcons);
+                toggleSearch();
+              }}
+              type="button"
+            >
+              <FontAwesomeIcon icon="times" />
+            </button>
+          </SearchWrapper>
+        )}
+      </div>
+      <AutoSizer disableHeight>
+        {({ width }) => {
+          return (
+            <Collection
+              cellCount={cellCount}
+              cellRenderer={({ key, index, ...rest }) => {
+                return (
+                  <CellRenderer
+                    {...rest}
+                    key={key}
+                    icon={icons[index]}
+                    name={name}
+                    value={value}
+                    onChange={onChange}
+                  />
+                );
+              }}
+              cellSizeAndPositionGetter={cellSizeAndPositionGetter}
+              className="collection"
+              height={144}
+              width={width + 4}
+            />
+          );
+        }}
+      </AutoSizer>
+      {error && <ErrorMessage style={{ marginTop: 5, marginBottom: 16 }}>{error}</ErrorMessage>}
+    </Wrapper>
+  );
+};
+
+ComponentIconPicker.defaultProps = {
+  error: null,
+};
+
+ComponentIconPicker.propTypes = {
+  error: PropTypes.string,
+  isCreating: PropTypes.bool.isRequired,
+  label: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired,
+  value: PropTypes.string.isRequired,
+};
+
+export default ComponentIconPicker;

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

@@ -0,0 +1,78 @@
+/**
+ *
+ * ComponentList
+ *
+ */
+/* eslint-disable import/no-cycle */
+import React from 'react';
+import { get } from 'lodash';
+import PropTypes from 'prop-types';
+import List from '../List';
+import useDataManager from '../../hooks/useDataManager';
+import convertAttrObjToArray from '../../utils/convertAttrObjToArray';
+import Td from '../Td';
+
+function ComponentList({
+  customRowComponent,
+  component,
+  dzName,
+  mainTypeName,
+  isFromDynamicZone,
+  isNestedInDZComponent,
+  firstLoopComponentName,
+  firstLoopComponentUid,
+}) {
+  const { modifiedData } = useDataManager();
+  const {
+    schema: { name: componentName, attributes },
+  } = get(modifiedData, ['components', component], {
+    schema: { attributes: {} },
+  });
+
+  return (
+    <tr className="component-row">
+      <Td colSpan={12} isChildOfDynamicZone={isFromDynamicZone}>
+        <List
+          customRowComponent={customRowComponent}
+          dzName={dzName}
+          items={convertAttrObjToArray(attributes)}
+          targetUid={component}
+          mainTypeName={mainTypeName}
+          firstLoopComponentName={firstLoopComponentName || componentName}
+          firstLoopComponentUid={firstLoopComponentUid || component}
+          editTarget="components"
+          isFromDynamicZone={isFromDynamicZone}
+          isNestedInDZComponent={isNestedInDZComponent}
+          isSub
+          secondLoopComponentName={
+            firstLoopComponentName ? componentName : null
+          }
+          secondLoopComponentUid={firstLoopComponentUid ? component : null}
+        />
+      </Td>
+    </tr>
+  );
+}
+
+ComponentList.defaultProps = {
+  component: null,
+  customRowComponent: null,
+  dzName: null,
+  firstLoopComponentName: null,
+  firstLoopComponentUid: null,
+  isFromDynamicZone: false,
+  isNestedInDZComponent: false,
+};
+
+ComponentList.propTypes = {
+  component: PropTypes.string,
+  customRowComponent: PropTypes.func,
+  dzName: PropTypes.string,
+  firstLoopComponentName: PropTypes.string,
+  firstLoopComponentUid: PropTypes.string,
+  isFromDynamicZone: PropTypes.bool,
+  isNestedInDZComponent: PropTypes.bool,
+  mainTypeName: PropTypes.string.isRequired,
+};
+
+export default ComponentList;

package/admin/src/components/ComponentSelect/Category.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import UpperFirst from '../UpperFirst';
+import CategoryName from './CategoryName';
+
+const Category = ({ categoryName }) => (
+  <CategoryName>
+    <UpperFirst content={categoryName} />
+  </CategoryName>
+);
+
+Category.defaultProps = {
+  categoryName: '',
+};
+
+Category.propTypes = {
+  categoryName: PropTypes.string,
+};
+
+export default Category;

package/admin/src/components/ComponentSelect/CategoryName.js

@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+
+const CategoryName = styled.div`
+  margin-bottom: 2px;
+  padding-top: 10px;
+  font-size: 13px;
+  font-weight: 700;
+  color: #333740;
+`;
+
+export default CategoryName;