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

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

@@ -0,0 +1,71 @@
+/**
+ *
+ * CustomCheckbox
+ *
+ */
+
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { isEmpty, isNumber } from 'lodash';
+import { Inputs } from '@buffetjs/custom';
+import { Checkbox } from '@buffetjs/core';
+import StyledCustomCheckbox from './StyledCustomCheckbox';
+
+const CustomCheckbox = ({ label, modifiedData, name, onChange, value, ...rest }) => {
+  const [checked, setChecked] = useState(isNumber(value) || !isEmpty(value));
+  const type = modifiedData.type === 'biginteger' ? 'text' : 'number';
+  const step = ['decimal', 'float'].includes(modifiedData.type) ? 'any' : '1';
+  const disabled = !modifiedData.type;
+
+  return (
+    <StyledCustomCheckbox>
+      <Checkbox
+        message={label}
+        name={name}
+        type="checkbox"
+        value={checked}
+        onChange={() => {
+          if (checked) {
+            onChange({
+              target: {
+                name,
+                value: null,
+              },
+            });
+          }
+          setChecked(prev => !prev);
+        }}
+      />
+      {checked && (
+        <div className="no-label col-6">
+          <Inputs
+            {...rest}
+            name={name}
+            onChange={onChange}
+            step={step}
+            disabled={disabled}
+            value={value}
+            type={type}
+          />
+        </div>
+      )}
+    </StyledCustomCheckbox>
+  );
+};
+
+CustomCheckbox.defaultProps = {
+  label: null,
+  modifiedData: {},
+  name: '',
+  value: null,
+};
+
+CustomCheckbox.propTypes = {
+  label: PropTypes.string,
+  modifiedData: PropTypes.object,
+  name: PropTypes.string,
+  onChange: PropTypes.func.isRequired,
+  value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+};
+
+export default CustomCheckbox;

package/admin/src/components/CustomLink/P.js

@@ -0,0 +1,17 @@
+import styled from 'styled-components';
+import { colors } from 'strapi-helper-plugin';
+
+const P = styled.p`
+  color: ${colors.blue};
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 18px;
+  text-align: left;
+  > svg {
+    margin-right: 7px;
+    vertical-align: initial;
+    -webkit-font-smoothing: subpixel-antialiased;
+  }
+`;
+
+export default P;

package/admin/src/components/CustomLink/StyledCustomLink.js

@@ -0,0 +1,20 @@
+/**
+ *
+ * StyledCustomLink
+ *
+ */
+
+import styled from 'styled-components';
+
+const StyledCustomLink = styled.div`
+  padding-left: 15px;
+  padding-top: 6px;
+  margin-left: -3px;
+  button {
+    cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
+    padding: 0;
+    line-height: 16px;
+  }
+`;
+
+export default StyledCustomLink;

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

@@ -0,0 +1,31 @@
+import React, { memo } from 'react';
+import { FormattedMessage } from 'react-intl';
+import PropTypes from 'prop-types';
+import { Plus } from '@buffetjs/icons';
+import P from './P';
+import StyledCustomLink from './StyledCustomLink';
+
+const CustomLink = ({ disabled, id, onClick }) => (
+  <StyledCustomLink disabled={disabled}>
+    <button onClick={onClick} disabled={disabled} type="button">
+      <P>
+        <Plus fill="#007EFF" width="11px" height="11px" />
+        {id && <FormattedMessage id={id} />}
+      </P>
+    </button>
+  </StyledCustomLink>
+);
+
+CustomLink.defaultProps = {
+  disabled: false,
+  id: null,
+};
+
+CustomLink.propTypes = {
+  disabled: PropTypes.bool,
+  id: PropTypes.string,
+  onClick: PropTypes.func.isRequired,
+};
+
+export default memo(CustomLink);
+export { CustomLink };

package/admin/src/components/DynamicZoneList/ComponentButton.js

@@ -0,0 +1,39 @@
+/**
+ *
+ * ComponentButton
+ *
+ */
+
+import styled from 'styled-components';
+
+const ComponentButton = styled.button`
+  width: 139px;
+  height: 90px;
+  padding-top: 7px;
+  &:focus {
+    outline: 0;
+  }
+
+  div {
+    width: 35px;
+    height: 35px;
+    border-radius: 18px;
+    background-color: #2c3138;
+    display: flex;
+    margin: auto;
+    svg {
+      margin: auto;
+      width: 11px;
+      height: 11px;
+    }
+  }
+  p {
+    margin-top: 5px;
+    font-size: 13px;
+    font-weight: bold;
+    color: #2c3138;
+    line-height: normal;
+  }
+`;
+
+export default ComponentButton;

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

@@ -0,0 +1,124 @@
+/**
+ *
+ * DynamicZoneList
+ *
+ */
+
+/* eslint-disable import/no-cycle */
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+import { TabContent, TabPane, Nav } from 'reactstrap';
+import { Plus } from '@buffetjs/icons';
+import useDataManager from '../../hooks/useDataManager';
+import getTrad from '../../utils/getTrad';
+import ComponentList from '../ComponentList';
+import ComponentCard from '../ComponentCard';
+import Td from '../Td';
+import ComponentButton from './ComponentButton';
+
+function DynamicZoneList({
+  customRowComponent,
+  components,
+  addComponent,
+  mainTypeName,
+  name,
+  targetUid,
+}) {
+  const { isInDevelopmentMode } = useDataManager();
+  const [activeTab, setActiveTab] = useState('0');
+
+  const toggle = tab => {
+    if (activeTab !== tab) {
+      setActiveTab(tab);
+    }
+  };
+
+  const handleClickAdd = () => {
+    addComponent(name);
+  };
+
+  return (
+    <tr className="dynamiczone-row">
+      <Td colSpan={12} isFromDynamicZone>
+        <div>
+          <div className="tabs-wrapper">
+            <Nav tabs>
+              {isInDevelopmentMode && (
+                <li>
+                  <ComponentButton onClick={handleClickAdd}>
+                    <div>
+                      <Plus style={{ height: 15, width: 15 }} />
+                    </div>
+                    <p>
+                      <FormattedMessage id={getTrad('button.component.add')} />
+                    </p>
+                  </ComponentButton>
+                </li>
+              )}
+              {components.map((component, index) => {
+                return (
+                  <li key={component}>
+                    <ComponentCard
+                      dzName={name}
+                      index={index}
+                      component={component}
+                      isActive={activeTab === `${index}`}
+                      isInDevelopmentMode={isInDevelopmentMode}
+                      onClick={() => {
+                        toggle(`${index}`);
+                      }}
+                    />
+                  </li>
+                );
+              })}
+            </Nav>
+          </div>
+          <TabContent activeTab={activeTab}>
+            {components.map((component, index) => {
+              const props = {
+                customRowComponent,
+                component,
+              };
+
+              return (
+                <TabPane tabId={`${index}`} key={component}>
+                  <table>
+                    <tbody>
+                      <ComponentList
+                        {...props}
+                        isFromDynamicZone
+                        dzName={name}
+                        mainTypeName={mainTypeName}
+                        targetUid={targetUid}
+                        key={component}
+                      />
+                    </tbody>
+                  </table>
+                </TabPane>
+              );
+            })}
+          </TabContent>
+        </div>
+      </Td>
+    </tr>
+  );
+}
+
+DynamicZoneList.defaultProps = {
+  addComponent: () => {},
+  components: [],
+  customRowComponent: null,
+  name: null,
+};
+
+DynamicZoneList.propTypes = {
+  addComponent: PropTypes.func,
+  components: PropTypes.instanceOf(Array),
+  customRowComponent: PropTypes.func,
+  mainTypeName: PropTypes.string.isRequired,
+  name: PropTypes.string,
+  targetUid: PropTypes.string.isRequired,
+};
+
+export default DynamicZoneList;

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

@@ -0,0 +1,25 @@
+/**
+ *
+ * HeaderModalNavContainer
+ *
+ */
+
+import styled from 'styled-components';
+
+const HeaderModalNavContainer = styled.div`
+  display: flex;
+  height: 3.8rem;
+  margin-left: 5rem;
+  padding-top: 0.6rem;
+  color: #9ea7b8;
+  font-size: 1.2rem;
+  font-weight: 500;
+  letter-spacing: 0.7px;
+  text-transform: uppercase;
+
+  > div:last-child {
+    margin-left: 3rem;
+  }
+`;
+
+export default HeaderModalNavContainer;

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

@@ -0,0 +1,21 @@
+import styled from 'styled-components';
+
+/* eslint-disable indent */
+
+const Wrapper = styled.div`
+  ${({ isActive }) => {
+    if (isActive) {
+      return `
+        height: 3rem;
+        color: #007eff;
+        font-weight: 600;
+        border-bottom: 2px solid #007eff;
+        z-index: 99;
+      `;
+    }
+
+    return '';
+  }}
+`;
+
+export default Wrapper;

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

@@ -0,0 +1,50 @@
+/**
+ *
+ * HeaderNavLink
+ *
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+import pluginId from '../../pluginId';
+import Wrapper from './Wrapper';
+
+/* istanbul ignore next */
+function HeaderNavLink({ custom, isDisabled, id, isActive, onClick }) {
+  return (
+    <Wrapper
+      isActive={isActive}
+      style={{ cursor: isDisabled ? 'not-allowed' : 'pointer' }}
+      onClick={e => {
+        if (isDisabled) {
+          e.preventDefault();
+
+          return;
+        }
+        onClick(id);
+      }}
+    >
+      <FormattedMessage
+        id={`${pluginId}.popUpForm.navContainer.${custom || id}`}
+      />
+    </Wrapper>
+  );
+}
+
+HeaderNavLink.defaultProps = {
+  custom: null,
+  id: 'base',
+  isActive: false,
+  isDisabled: false,
+};
+
+HeaderNavLink.propTypes = {
+  custom: PropTypes.string,
+  id: PropTypes.string,
+  isActive: PropTypes.bool,
+  isDisabled: PropTypes.bool,
+  onClick: PropTypes.func.isRequired,
+};
+
+export default HeaderNavLink;

package/admin/src/components/List/List.js

@@ -0,0 +1,131 @@
+/**
+ *
+ * Wrapper
+ *
+ */
+
+import styled from 'styled-components';
+import { List } from '@buffetjs/styles';
+
+const Wrapper = styled(List)`
+  table-layout: fixed;
+
+  tbody {
+    td:first-of-type:not(:last-of-type) {
+      width: 73px;
+      padding-left: 30px;
+      > svg {
+        width: auto;
+        height: 16px;
+        position: absolute;
+        left: -4px;
+        top: 16px;
+        display: none;
+      }
+    }
+    td[colspan='12'] {
+      position: relative;
+      padding: 0 0 0 50px;
+      > div {
+        box-shadow: none;
+      }
+    }
+    tr.component-row {
+      &:not(:first-of-type) {
+        &::before {
+          background-color: transparent;
+        }
+      }
+      table tr td:first-of-type:not(:last-of-type) {
+        width: 79px;
+        padding-left: 36px;
+        svg {
+          display: block;
+        }
+      }
+    }
+    table + div button {
+      position: relative;
+      background-color: transparent;
+      text-transform: initial;
+      color: #9ea7b8;
+      text-align: left;
+      padding-left: 35px;
+      border-color: transparent;
+      svg {
+        position: absolute;
+        top: 0;
+        left: 0;
+      }
+    }
+    tr.dynamiczone-row {
+      &:not(:first-of-type) {
+        &::before {
+          background-color: transparent;
+        }
+      }
+      > td[colspan='12'] {
+        padding-left: 0;
+        padding-right: 0;
+      }
+
+      .tabs-wrapper {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 100%;
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: 2;
+        padding-top: 18px;
+        padding-left: 86px;
+        padding-right: 30px;
+        .nav-tabs {
+          border-bottom: 0;
+        }
+        ul.nav {
+          width: 100%;
+          display: flex;
+          flex-wrap: nowrap;
+          overflow-x: auto;
+          overflow-y: hidden;
+          li {
+            margin-right: 9px;
+          }
+        }
+        & + .tab-content {
+          padding-top: 126px;
+          position: relative;
+          z-index: 1;
+        }
+      }
+    }
+  }
+  & + .plus-icon {
+    width: 27px;
+    height: 27px;
+    border-radius: 18px;
+    position: absolute;
+    bottom: 14px;
+    left: 34px;
+    background-color: ${({ isFromDynamicZone }) => (isFromDynamicZone ? '#AED4FB' : '#f3f4f4')};
+
+    color: transparent;
+    text-align: center;
+    line-height: 27px;
+    display: flex;
+    cursor: pointer;
+    svg {
+      margin: auto;
+      width: 11px;
+      height: 11px;
+    }
+  }
+`;
+
+Wrapper.defaultProps = {
+  isFromDynamicZone: false,
+};
+
+export default Wrapper;