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

package/LICENSE

@@ -0,0 +1,22 @@
+Copyright (c) 2015-present Strapi Solutions SAS
+
+Portions of the Strapi software are licensed as follows:
+
+* All software that resides under an "ee/" directory (the “EE Software”), if that directory exists, is licensed under the license defined in "ee/LICENSE".
+
+* All software outside of the above-mentioned directories or restrictions above is available under the "MIT Expat" license as set forth below.
+
+MIT Expat License
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,19 @@
+# Strapi plugin
+
+---
+
+## Deprecation Warning :warning:
+
+Hello! We have some news to share,
+
+We’ve decided it’ll soon be time to end the support for `strapi-plugin-content-type-builder`.
+
+After years of iterations, Strapi is going to V4 and we won’t maintain V3 packages when it’ll reach its end-of-support milestone (~end of Q3 2022).
+
+If you’ve been using `strapi-plugin-content-type-builder` and have migrated to V4 (or if you want to), you can find the equivalent and updated version of this package at this [URL](https://github.com/strapi/strapi/tree/master/packages/core/content-type-builder) and with the following name on NPM: `@strapi/plugin-content-type-builder`.
+
+If you’ve contributed to the development of this package, thank you again for that! We hope to see you on the V4 soon.
+
+The Akemona team
+
+---

package/admin/src/InjectedComponents/ContentManager/EditSettingViewButton.js

@@ -0,0 +1,76 @@
+/**
+ *
+ * EditViewButton
+ *
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useGlobalContext, CheckPermissions } from 'strapi-helper-plugin';
+import { get } from 'lodash';
+import { Button } from '@buffetjs/core';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import getTrad from '../../utils/getTrad';
+import pluginPermissions from '../../permissions';
+
+// Create link from content-type-builder to content-manager
+function EditViewButton(props) {
+  const { currentEnvironment, emitEvent, formatMessage } = useGlobalContext();
+  // Retrieve URL from props
+  const { modifiedData, componentSlug, type } = get(
+    props,
+    ['viewProps', '0'],
+
+    {
+      componentSlug: '',
+    }
+  );
+
+  const baseUrl = `/plugins/content-type-builder/${
+    type === 'content-types' ? type : 'component-categories'
+  }`;
+  const category = get(modifiedData, 'category', '');
+
+  const suffixUrl =
+    type === 'content-types' ? props.getModelName() : `${category}/${componentSlug}`;
+
+  const handleClick = () => {
+    emitEvent('willEditEditLayout');
+    props.push(`${baseUrl}/${suffixUrl}`);
+  };
+
+  if (currentEnvironment !== 'development') {
+    return null;
+  }
+
+  if (props.getModelName() === 'strapi::administrator') {
+    return null;
+  }
+
+  return (
+    <CheckPermissions permissions={pluginPermissions.main}>
+      <Button
+        {...props}
+        onClick={handleClick}
+        icon={<FontAwesomeIcon icon="cog" style={{ fontSize: 13 }} />}
+        label={formatMessage({
+          id: getTrad(`injected-components.content-manager.edit-settings-view.link.${type}`),
+        })}
+        style={{
+          paddingLeft: 15,
+          paddingRight: 15,
+          outline: 0,
+          fontWeight: 600,
+        }}
+      />
+    </CheckPermissions>
+  );
+}
+
+EditViewButton.propTypes = {
+  currentEnvironment: PropTypes.string.isRequired,
+  getModelName: PropTypes.func.isRequired,
+  push: PropTypes.func.isRequired,
+};
+
+export default EditViewButton;

package/admin/src/InjectedComponents/ContentManager/EditViewLink.js

@@ -0,0 +1,44 @@
+/**
+ *
+ * EditViewLink
+ *
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { LiLink, useGlobalContext, CheckPermissions } from 'strapi-helper-plugin';
+import pluginPermissions from '../../permissions';
+
+// Create link from content-type-builder to content-manager
+function EditViewLink(props) {
+  const { currentEnvironment, emitEvent } = useGlobalContext();
+  // Retrieve URL from props
+  const url = `/plugins/content-type-builder/content-types/${props.getModelName()}`;
+
+  if (currentEnvironment !== 'development') {
+    return null;
+  }
+
+  if (props.getModelName() === 'strapi::administrator') {
+    return null;
+  }
+
+  return (
+    <CheckPermissions permissions={pluginPermissions.main}>
+      <LiLink
+        {...props}
+        url={url}
+        onClick={() => {
+          emitEvent('willEditEditLayout');
+        }}
+      />
+    </CheckPermissions>
+  );
+}
+
+EditViewLink.propTypes = {
+  currentEnvironment: PropTypes.string.isRequired,
+  getModelName: PropTypes.func.isRequired,
+};
+
+export default EditViewLink;

package/admin/src/assets/images/logo.svg

@@ -0,0 +1 @@
+<svg width="30" height="30" xmlns="http://www.w3.org/2000/svg"><text transform="translate(-19 -4)" fill="#4B515A" fill-rule="evenodd" font-size="30" font-family="AppleColorEmoji, Apple Color Emoji"><tspan x="19" y="32">🏭</tspan></text></svg>

package/admin/src/components/AllowedTypesSelect/MenuList.js

@@ -0,0 +1,115 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { components } from 'react-select';
+import { useGlobalContext } from 'strapi-helper-plugin';
+import { CheckboxWrapper, Label } from '@buffetjs/styles';
+import getTrad from '../../utils/getTrad';
+import SelectCheckbox from '../SelectCheckbox';
+import SubUl from '../SelectMenuSubUl';
+import UpperFirst from '../UpperFirst';
+import Ul from '../SelectMenuUl';
+import Text from './Text';
+
+const MenuList = ({ selectProps: { changeMediaAllowedTypes, value }, ...rest }) => {
+  const { formatMessage } = useGlobalContext();
+  const Component = components.MenuList;
+  const areAllAllowedTypesSelected = value.value && value.value.length === 3;
+  const someChecked = value.value && !areAllAllowedTypesSelected && value.value.length > 0;
+  const options = [
+    {
+      name: 'images',
+      infos: '(JPEG, PNG, GIF, SVG, TIFF, ICO, DVU)',
+    },
+    {
+      name: 'videos',
+      infos: '(MPEG, MP4, Quicktime, WMV, AVI, FLV)',
+    },
+
+    {
+      name: 'files',
+      infos: '(CSV, ZIP, MP3, PDF, Excel, JSON, ...)',
+    },
+  ];
+
+  return (
+    <Component {...rest}>
+      <Ul>
+        <li className="li-multi-menu">
+          <div style={{ marginTop: 3 }}>
+            <CheckboxWrapper>
+              <Label
+                htmlFor="overrideReactSelectBehavior"
+                onClick={() => {
+                  changeMediaAllowedTypes({
+                    target: { name: 'all', value: !areAllAllowedTypesSelected },
+                  });
+                }}
+              >
+                <SelectCheckbox
+                  id="checkAll"
+                  checked={areAllAllowedTypesSelected}
+                  someChecked={someChecked}
+                  name="all"
+                  onChange={() => {}}
+                />
+                <UpperFirst content="All" />
+              </Label>
+            </CheckboxWrapper>
+          </div>
+          <SubUl tad="ul" isOpen>
+            {options.map(({ name, infos }) => {
+              const isChecked = value.value && value.value.includes(name);
+              const target = { name, value: !isChecked };
+
+              return (
+                <li key={name}>
+                  <CheckboxWrapper>
+                    <Label
+                      htmlFor={name}
+                      onClick={() => {
+                        changeMediaAllowedTypes({ target });
+                      }}
+                    >
+                      <SelectCheckbox
+                        id="check"
+                        name={name}
+                        // Remove the handler
+                        onChange={() => {}}
+                        checked={isChecked}
+                      />
+                      <Text>
+                        <UpperFirst
+                          content={formatMessage({
+                            id: getTrad(`form.attribute.media.allowed-types.option-${name}`),
+                          })}
+                        />
+                      </Text>
+                      <Text fontSize="sm" color="#B3B5B9" textTransform="italic">
+                        &nbsp;{infos}
+                      </Text>
+                    </Label>
+                  </CheckboxWrapper>
+                </li>
+              );
+            })}
+          </SubUl>
+        </li>
+      </Ul>
+    </Component>
+  );
+};
+
+MenuList.defaultProps = {
+  selectProps: {
+    value: {},
+  },
+};
+
+MenuList.propTypes = {
+  selectProps: PropTypes.shape({
+    changeMediaAllowedTypes: PropTypes.func.isRequired,
+    value: PropTypes.object,
+  }),
+};
+
+export default MenuList;

package/admin/src/components/AllowedTypesSelect/Text.js

@@ -0,0 +1,26 @@
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+
+const Text = styled.p`
+  display: contents;
+  color: ${({ theme, color }) => theme.main.colors[color] || color};
+  font-size: ${({ theme, fontSize }) => theme.main.sizes.fonts[fontSize]};
+  font-weight: ${({ theme, fontWeight }) => theme.main.fontWeights[fontWeight]};
+  text-transform: ${({ textTransform }) => textTransform};
+`;
+
+Text.defaultProps = {
+  color: 'black',
+  fontSize: 'md',
+  fontWeight: 'regular',
+  textTransform: 'none',
+};
+
+Text.propTypes = {
+  color: PropTypes.string,
+  fontSize: PropTypes.string,
+  fontWeight: PropTypes.string,
+  textTransform: PropTypes.string,
+};
+
+export default Text;

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

@@ -0,0 +1,55 @@
+import React, { useRef } from 'react';
+import PropTypes from 'prop-types';
+import Select from 'react-select';
+import { useGlobalContext } from 'strapi-helper-plugin';
+import { upperFirst } from 'lodash';
+import MenuList from './MenuList';
+import getTrad from '../../utils/getTrad';
+
+const AllowedTypesSelect = ({ name, changeMediaAllowedTypes, styles, value }) => {
+  const { formatMessage } = useGlobalContext();
+  // Create a ref in order to access the StateManager
+  // So we can close the menu after clicking on a menu item
+  // This allows us to get rid of the menuIsOpen state management
+  // So we let the custom components taking care of it
+  const ref = useRef();
+
+  /* eslint-disable indent */
+
+  const displayedValue =
+    value === null || value.length === 0
+      ? formatMessage({ id: getTrad('form.attribute.media.allowed-types.none') })
+      : value
+          .sort()
+          .map(v => upperFirst(v))
+          .join(', ');
+
+  /* eslint-enable indent */
+
+  return (
+    <Select
+      components={{ MenuList }}
+      isClearable={false}
+      isSearchable={false}
+      name={name}
+      changeMediaAllowedTypes={changeMediaAllowedTypes}
+      ref={ref}
+      refState={ref}
+      styles={styles}
+      value={{ label: displayedValue, value: value || '' }}
+    />
+  );
+};
+
+AllowedTypesSelect.defaultProps = {
+  value: null,
+};
+
+AllowedTypesSelect.propTypes = {
+  changeMediaAllowedTypes: PropTypes.func.isRequired,
+  name: PropTypes.string.isRequired,
+  styles: PropTypes.object.isRequired,
+  value: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+};
+
+export default AllowedTypesSelect;

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

@@ -0,0 +1,50 @@
+import styled from 'styled-components';
+
+const Button = styled.button`
+  display: flex;
+  width: 100% !important;
+  height: 4rem;
+  padding: 0 1rem 0 1rem;
+  margin-top: 0.6rem;
+  margin-bottom: 0.8rem;
+  align-items: center;
+  justify-content: space-between;
+  border-radius: 0.25rem;
+  border: 1px solid #e3e9f3;
+  background: #ffffff;
+  line-height: 4rem;
+  box-shadow: 1px 1px 1px rgba(104, 118, 145, 0.05);
+  cursor: pointer;
+
+  &:hover,
+  &:active,
+  &:focus {
+    background: #e6f0fb;
+    border-color: #aed4fb;
+    outline: 0;
+
+    .attributeIcon {
+      background-color: #007eff;
+
+      > svg {
+        g {
+          path {
+            fill: #007eff;
+          }
+        }
+      }
+    }
+  }
+
+  .attributeType {
+    margin-right: 1.2rem;
+    color: #323740;
+    text-transform: capitalize;
+    font-size: 1.3rem;
+    font-weight: 500;
+    font-style: normal;
+    -webkit-font-smoothing: subpixel-antialiased;
+  }
+`;
+
+export default Button;

package/admin/src/components/AttributeOption/Card.js

@@ -0,0 +1,26 @@
+import styled from 'styled-components';
+
+const Card = styled.div`
+  font-size: 1.3rem;
+  display: flex;
+  align-items: center;
+  max-width: calc(100% - 18px);
+
+  > span {
+    white-space: nowrap;
+    color: #9ea7b8;
+    font-size: 1.2rem;
+    font-weight: 400;
+    -webkit-font-smoothing: antialiased;
+    margin-top: auto;
+    margin-bottom: auto;
+    line-height: normal;
+
+    &:last-child {
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
+  }
+`;
+
+export default Card;

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

@@ -0,0 +1,127 @@
+/**
+ *
+ * AttributeOption
+ *
+ */
+
+import React, { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
+import { AttributeIcon } from '@buffetjs/core';
+import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+import { useHistory } from 'react-router-dom';
+import { useGlobalContext, useQuery } from 'strapi-helper-plugin';
+import getTrad from '../../utils/getTrad';
+import makeSearch from '../../utils/makeSearch';
+import Button from './Button';
+import Card from './Card';
+
+const AttributeOption = forwardRef(({ tabIndex, type }, ref) => {
+  const buttonRef = useRef();
+  const tabRef = useRef();
+  const query = useQuery();
+  const { push } = useHistory();
+  const { emitEvent } = useGlobalContext();
+  tabRef.current = tabIndex;
+
+  useImperativeHandle(ref, () => ({
+    focus: () => {
+      buttonRef.current.focus();
+    },
+  }));
+
+  useEffect(() => {
+    if (tabRef.current === 0) {
+      buttonRef.current.focus();
+    }
+  }, []);
+
+  const handleClick = () => {
+    const forTarget = query.get('forTarget');
+    const targetUid = query.get('targetUid');
+    const header_label_1 = query.get('header_label_1');
+    const header_info_category_1 = query.get('header_info_category_1');
+    const header_info_name_1 = query.get('header_info_name_1');
+    const header_label_2 = query.get('header_label_2');
+    const header_icon_name_2 = query.get('header_icon_name_2');
+    const header_icon_isCustom_2 = query.get('header_icon_isCustom_2');
+    const header_info_category_2 = query.get('header_info_category_2');
+    const header_info_name_2 = query.get('header_info_name_2');
+    const header_label_3 = query.get('header_label_3');
+    const header_icon_name_3 = query.get('header_icon_name_3');
+    const header_icon_isCustom_3 = query.get('header_icon_isCustom_3');
+    const header_info_category_3 = query.get('header_info_category_3');
+    const header_info_name_3 = query.get('header_info_name_3');
+    const header_label_4 = query.get('header_label_4');
+    const header_icon_name_4 = query.get('header_icon_name_4');
+    const header_icon_isCustom_4 = query.get('header_icon_isCustom_4');
+    const header_info_category_4 = query.get('header_info_category_4');
+    const header_info_name_4 = query.get('header_info_name_4');
+
+    const search = makeSearch({
+      modalType: 'attribute',
+      actionType: 'create',
+      settingType: 'base',
+      forTarget,
+      targetUid,
+      attributeType: type,
+      step: type === 'component' ? '1' : null,
+
+      header_label_1,
+      header_info_name_1,
+      header_info_category_1,
+      header_label_2,
+      header_icon_name_2,
+      header_icon_isCustom_2,
+      header_info_name_2,
+      header_info_category_2,
+      header_label_3,
+      header_icon_name_3,
+      header_icon_isCustom_3,
+      header_info_name_3,
+      header_info_category_3,
+      header_label_4,
+      header_icon_name_4,
+      header_icon_isCustom_4,
+      header_info_name_4,
+      header_info_category_4,
+      header_icon_isCustom_1: false,
+      header_icon_name_1: type,
+    });
+
+    if (forTarget === 'contentType') {
+      emitEvent('didSelectContentTypeFieldType', { type });
+    }
+
+    push({
+      search,
+    });
+  };
+
+  return (
+    <div className="col-6">
+      <Button ref={buttonRef} type="button" onClick={handleClick}>
+        <Card>
+          <AttributeIcon type={type} style={{ marginRight: 10 }} className="attributeIcon" />
+          <FormattedMessage id={getTrad(`attribute.${type}`)}>
+            {message => <span className="attributeType">{message}</span>}
+          </FormattedMessage>
+          <FormattedMessage id={getTrad(`attribute.${type}.description`)} />
+        </Card>
+      </Button>
+    </div>
+  );
+});
+
+AttributeOption.displayName = 'AttributeOption';
+
+AttributeOption.defaultProps = {
+  tabIndex: 0,
+  type: 'text',
+};
+
+AttributeOption.propTypes = {
+  tabIndex: PropTypes.number,
+  type: PropTypes.string,
+};
+
+export default AttributeOption;

package/admin/src/components/BooleanBox/CT.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import CTSelected from './icons/CTSelected';
+import CTUnselected from './icons/CTUnselected';
+
+const CT = ({ selected }) =>
+  selected ? (
+    <CTSelected aria-hidden data-testid="ct-selected" />
+  ) : (
+    <CTUnselected aria-hidden data-testid="ct-unselected" />
+  );
+
+CT.defaultProps = {
+  selected: false,
+};
+
+CT.propTypes = {
+  selected: PropTypes.bool,
+};
+
+export default CT;

package/admin/src/components/BooleanBox/Enumeration.js

@@ -0,0 +1,10 @@
+import styled from 'styled-components';
+
+const Enumeration = styled.input`
+  position: absolute;
+  top: 0;
+  z-index: -1;
+  visibility: hidden;
+`;
+
+export default Enumeration;

package/admin/src/components/BooleanBox/EnumerationWrapper.js

@@ -0,0 +1,14 @@
+import styled from 'styled-components';
+import { Label } from '@buffetjs/core';
+
+const EnumerationWrapper = styled(Label)`
+  width: 415px;
+  margin-bottom: 3px;
+  min-height: 91px;
+  position: relative;
+  padding-left: 54px;
+  padding-top: 17px;
+  cursor: pointer;
+`;
+
+export default EnumerationWrapper;

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

@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+import { Label } from '@buffetjs/core';
+
+const CustomLabel = styled(Label)`
+  display: block;
+  margin-bottom: 1.3rem;
+`;
+
+export default CustomLabel;

package/admin/src/components/BooleanBox/ST.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import STSelected from './icons/STSelected';
+import STUnselected from './icons/STUnselected';
+
+const ST = ({ selected }) =>
+  selected ? (
+    <STSelected aria-hidden data-testid="st-selected" />
+  ) : (
+    <STUnselected aria-hidden data-testid="st-unselected" />
+  );
+
+ST.defaultProps = {
+  selected: false,
+};
+
+ST.propTypes = {
+  selected: PropTypes.bool,
+};
+
+export default ST;