@strapi/admin 4.6.0-alpha.1 → 4.6.0-beta.1

package/admin/src/content-manager/components/CustomInputCheckbox/components.js

@@ -1,77 +0,0 @@
-import styled, { css } from 'styled-components';
-/* eslint-disable */
-
-const Label = styled.label`
-  cursor: pointer;
-  position: relative;
-  vertical-align: middle;
-  > input {
-    display: none;
-  }
-  &:before {
-    content: '';
-    position: absolute;
-    left: 15px;
-    top: calc(50% - 8px);
-    width: 14px;
-    height: 14px;
-    border: 1px solid rgba(16, 22, 34, 0.15);
-    background-color: #fdfdfd;
-    border-radius: 3px;
-  }
-
-  ${({ shouldDisplaySomeChecked }) => {
-    if (shouldDisplaySomeChecked) {
-      return css`
-        &:after {
-          content: '\f068';
-          position: absolute;
-          top: calc(50% - 8px);
-          left: 18px;
-          font-size: 10px;
-          font-family: 'FontAwesome';
-          font-weight: 100;
-          color: #1c5de7;
-        }
-      `;
-    }
-  }}
-
-  ${({ shouldDisplayAllChecked }) => {
-    if (shouldDisplayAllChecked) {
-      return css`
-        &:after {
-          content: '\f00c';
-          position: absolute;
-          top: calc(50% - 9px);
-          left: 17px;
-          font-size: 10px;
-          font-family: 'FontAwesome';
-          font-weight: 100;
-          color: #1c5de7;
-          transition: all 0.2s;
-        }
-      `;
-    }
-  }}
-
-  ${({ isChecked }) => {
-    if (isChecked) {
-      return css`
-        &:after {
-          content: '\f00c';
-          position: absolute;
-          top: calc(50% - 11px);
-          left: 17px;
-          font-size: 10px;
-          font-family: 'FontAwesome';
-          font-weight: 100;
-          color: #1c5de7;
-          transition: all 0.2s;
-        }
-      `;
-    }
-  }}
-`;
-
-export { Label };

package/admin/src/content-manager/components/CustomInputCheckbox/index.js

@@ -1,53 +0,0 @@
-/**
- *
- * CustomInputCheckbox
- */
-
-import React, { memo } from 'react';
-import PropTypes from 'prop-types';
-import { Label } from './components';
-
-function CustomInputCheckbox({ entriesToDelete, isAll, name, onChange, value }) {
-  const shouldDisplaySomeChecked = isAll && entriesToDelete.length > 0 && !value;
-
-  const shouldDisplayAllChecked = isAll && value;
-
-  return (
-    <span className="form-check" style={{ marginLeft: '-15px' }}>
-      <Label
-        className="form-check-label"
-        isAll={isAll}
-        shouldDisplaySomeChecked={shouldDisplaySomeChecked}
-        shouldDisplayAllChecked={shouldDisplayAllChecked}
-        isChecked={value && !isAll}
-        htmlFor={name}
-      >
-        <input
-          className="form-check-input"
-          checked={value}
-          id={name}
-          name={name}
-          onChange={onChange}
-          type="checkbox"
-        />
-      </Label>
-    </span>
-  );
-}
-
-CustomInputCheckbox.defaultProps = {
-  entriesToDelete: [],
-  isAll: false,
-  name: '',
-  value: false,
-};
-
-CustomInputCheckbox.propTypes = {
-  entriesToDelete: PropTypes.array,
-  isAll: PropTypes.bool,
-  name: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  onChange: PropTypes.func.isRequired,
-  value: PropTypes.bool,
-};
-
-export default memo(CustomInputCheckbox);

package/admin/src/content-manager/components/DynamicComponentCard/Wrapper.js

@@ -1,63 +0,0 @@
-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/content-manager/components/FilterOptionsCTA/index.js

@@ -1,14 +0,0 @@
-import styled from 'styled-components';
-
-const FilterOptionsCTA = styled.button`
-  display: flex;
-  justify-content: center;
-  height: 20px;
-  width: 20px;
-  margin: 8px 5px 0px 0px;
-  border-radius: 50%;
-  border: 1px solid #e3e9f3;
-  cursor: pointer;
-`;
-
-export default FilterOptionsCTA;

package/admin/src/content-manager/components/FormTitle/index.js

@@ -1,22 +0,0 @@
-import React, { memo } from 'react';
-import PropTypes from 'prop-types';
-import { FormattedMessage } from 'react-intl';
-
-const FormTitle = ({ description, title }) => (
-  <>
-    {!!title && <FormattedMessage id={title} />}
-    {!!description && <FormattedMessage id={description}>{(msg) => <p>{msg}</p>}</FormattedMessage>}
-  </>
-);
-
-FormTitle.propTypes = {
-  description: PropTypes.string,
-  title: PropTypes.string,
-};
-
-FormTitle.defaultProps = {
-  description: null,
-  title: null,
-};
-
-export default memo(FormTitle);

package/admin/src/content-manager/components/FormWrapper/index.js

@@ -1,20 +0,0 @@
-import styled from 'styled-components';
-
-const FormWrapper = styled.div`
-  padding: 22px 10px 0 10px;
-  background: #ffffff;
-  border-radius: 2px;
-  box-shadow: 0 2px 4px #e3e9f3;
-  margin-bottom: 17px;
-  > div {
-    margin-right: 0;
-    margin-left: 0;
-  }
-  .row {
-    &:last-of-type {
-      margin-bottom: 0;
-    }
-  }
-`;
-
-export default FormWrapper;

package/admin/src/content-manager/components/InputJSON/FieldError.js

@@ -1,38 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { useIntl } from 'react-intl';
-import { Typography } from '@strapi/design-system/Typography';
-
-export const FieldError = ({ id, error, name }) => {
-  const { formatMessage } = useIntl();
-  const errorMessage = error ? formatMessage({ id: error, defaultMessage: error }) : '';
-
-  if (!error) {
-    return null;
-  }
-
-  return (
-    <Typography
-      as="p"
-      variant="pi"
-      id={`${id || name}-error`}
-      textColor="danger600"
-      data-strapi-field-error
-    >
-      {errorMessage}
-    </Typography>
-  );
-};
-
-FieldError.defaultProps = {
-  id: undefined,
-  error: undefined,
-};
-
-FieldError.propTypes = {
-  error: PropTypes.string,
-  id: PropTypes.string,
-  name: PropTypes.string.isRequired,
-};
-
-export default FieldError;

package/admin/src/content-manager/components/LayoutTitle/index.js

@@ -1,19 +0,0 @@
-import styled from 'styled-components';
-
-const LayoutTitle = styled.div`
-  color: #333740;
-  font-size: 13px;
-  font-weight: 500;
-  line-height: 18px;
-
-  p {
-    margin-top: 2px;
-    margin-bottom: 13px;
-    color: #9ea7b8;
-    font-size: 12px;
-    font-weight: 400;
-    line-height: normal;
-  }
-`;
-
-export default LayoutTitle;

package/admin/src/content-manager/components/PlusButton/index.js

@@ -1,52 +0,0 @@
-import styled from 'styled-components';
-
-const beforeStyle = `
-  content: ' ';
-  position: absolute;
-  display: block;
-  width: 14px;
-  height: 2px;
-  left: 11px;
-  top: 17px;
-  bottom: 10px;
-  z-index: 9;
-`;
-
-const afterStyle = `
-  content: ' ';
-  position: absolute;
-  display: block;
-  height: 14px;
-  width: 2px;
-  left: 17px;
-  top: 11px;
-  right: 10px;
-  z-index: 9;
-`;
-
-const Button = styled.button`
-  position: relative;
-  height: 36px;
-  width: 36px;
-  background-color: #f3f4f4;
-  border-radius: 50%;
-  text-align: center;
-
-  :focus {
-    outline: 0;
-  }
-
-  :before {
-    ${beforeStyle}
-  }
-  :after {
-    ${afterStyle}
-  }
-
-  :before,
-  :after {
-    background-color: #b4b6ba;
-  }
-`;
-
-export default Button;

package/admin/src/content-manager/components/PreviewCarret/components.js

@@ -1,27 +0,0 @@
-import styled from 'styled-components';
-
-/* eslint-disable indent */
-const Wrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  justify-content: space-around;
-  height: 30px;
-  width: 100%;
-  padding: 0 5px;
-
-  ${({ isComponent }) =>
-    isComponent &&
-    `
-    height: 34px;
-    padding: 0;
-  `}
-
-  border-radius: 2px;
-  > div {
-    width: 100%;
-    height: 2px;
-    background: #007eff;
-  }
-`;
-
-export default Wrapper;

package/admin/src/content-manager/components/PreviewCarret/index.js

@@ -1,22 +0,0 @@
-import React, { memo } from 'react';
-import PropTypes from 'prop-types';
-
-import Wrapper from './components';
-
-const PreviewCarret = ({ isComponent, style }) => (
-  <Wrapper isComponent={isComponent} style={style}>
-    <div />
-  </Wrapper>
-);
-
-PreviewCarret.defaultProps = {
-  isComponent: false,
-  style: {},
-};
-
-PreviewCarret.propTypes = {
-  isComponent: PropTypes.bool,
-  style: PropTypes.object,
-};
-
-export default memo(PreviewCarret);

package/admin/src/content-manager/components/RepeatableComponent/AccordionGroupCustom/index.js

@@ -1,122 +0,0 @@
-import React, { Children, cloneElement } from 'react';
-import PropTypes from 'prop-types';
-import { useIntl } from 'react-intl';
-import styled from 'styled-components';
-import { Box } from '@strapi/design-system/Box';
-import { Typography } from '@strapi/design-system/Typography';
-import { Flex } from '@strapi/design-system/Flex';
-import { KeyboardNavigable } from '@strapi/design-system/KeyboardNavigable';
-
-const AccordionFooter = styled(Box)`
-  overflow: hidden;
-  border-bottom: 1px solid ${({ theme }) => theme.colors.neutral200};
-  border-right: 1px solid ${({ theme }) => theme.colors.neutral200};
-  border-left: 1px solid ${({ theme }) => theme.colors.neutral200};
-  border-radius: 0 0 ${({ theme }) => theme.borderRadius} ${({ theme }) => theme.borderRadius};
-`;
-
-const EnhancedGroup = styled(Box)`
-  > div {
-    & > * {
-      border-radius: unset;
-      border-right: 1px solid ${({ theme }) => theme.colors.neutral200};
-      border-left: 1px solid ${({ theme }) => theme.colors.neutral200};
-      border-bottom: 1px solid ${({ theme }) => theme.colors.neutral200};
-    }
-    > div {
-      > div:first-of-type {
-        border-radius: unset;
-      }
-    }
-  }
-
-  > div:first-of-type {
-    > div {
-      border-radius: ${({ theme }) => theme.borderRadius} ${({ theme }) => theme.borderRadius} 0 0;
-      > div:first-of-type {
-        border-radius: ${({ theme }) => theme.borderRadius} ${({ theme }) => theme.borderRadius} 0 0;
-      }
-    }
-
-    > div:not([data-strapi-expanded='true']) {
-      border-top: 1px solid ${({ theme }) => theme.colors.neutral200};
-
-      &:hover {
-        border-top: 1px solid ${({ theme }) => theme.colors.primary600};
-      }
-    }
-
-    > span {
-      border-radius: ${({ theme }) => theme.borderRadius} ${({ theme }) => theme.borderRadius} 0 0;
-      border-top: 1px solid ${({ theme }) => theme.colors.neutral200};
-    }
-  }
-
-  & [data-strapi-expanded='true'] {
-    border: 1px solid ${({ theme }) => theme.colors.primary600};
-  }
-
-  ${({ theme, footer }) => `
-    &:not(${footer}) {
-      & > *:last-of-type {
-        border-radius: 0 0 ${theme.borderRadius} ${theme.borderRadius};
-      }
-    }
-  `}
-`;
-
-const LabelAction = styled(Box)`
-  svg path {
-    fill: ${({ theme }) => theme.colors.neutral500};
-  }
-`;
-
-const AccordionGroupCustom = ({ children, footer, label, labelAction, error }) => {
-  const { formatMessage } = useIntl();
-  const childrenArray = Children.toArray(children).map((child) => {
-    return cloneElement(child, { hasErrorMessage: false });
-  });
-
-  return (
-    <KeyboardNavigable attributeName="data-strapi-accordion-toggle">
-      {label && (
-        <Flex paddingBottom={1}>
-          <Typography as="label" textColor="neutral800" variant="pi" fontWeight="bold">
-            {label}
-          </Typography>
-          {labelAction && <LabelAction paddingLeft={1}>{labelAction}</LabelAction>}
-        </Flex>
-      )}
-      <EnhancedGroup footer={footer}>{childrenArray}</EnhancedGroup>
-      {footer && <AccordionFooter>{footer}</AccordionFooter>}
-      {error && (
-        <Box paddingTop={1}>
-          <Typography variant="pi" textColor="danger600">
-            {formatMessage({ id: error.id, defaultMessage: error.id }, { ...error.values })}
-          </Typography>
-        </Box>
-      )}
-    </KeyboardNavigable>
-  );
-};
-
-AccordionGroupCustom.defaultProps = {
-  error: undefined,
-  footer: null,
-  label: null,
-  labelAction: undefined,
-};
-
-AccordionGroupCustom.propTypes = {
-  children: PropTypes.node.isRequired,
-  error: PropTypes.shape({
-    id: PropTypes.string.isRequired,
-    defaultMessage: PropTypes.string.isRequired,
-    values: PropTypes.object,
-  }),
-  footer: PropTypes.node,
-  label: PropTypes.string,
-  labelAction: PropTypes.node,
-};
-
-export default AccordionGroupCustom;

package/admin/src/content-manager/components/RepeatableComponent/AddFieldButton.js

@@ -1,58 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import styled from 'styled-components';
-import { useIntl } from 'react-intl';
-import { Box } from '@strapi/design-system/Box';
-import { Flex } from '@strapi/design-system/Flex';
-import { Typography } from '@strapi/design-system/Typography';
-import Plus from '@strapi/icons/Plus';
-import { pxToRem } from '@strapi/helper-plugin';
-import { getTrad } from '../../utils';
-
-const StyledButton = styled(Box)`
-  width: 100%;
-  border-top: 1px solid ${({ theme }) => theme.colors.neutral200};
-  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
-`;
-
-const StyledIcon = styled(Plus)`
-  width: ${pxToRem(10)};
-  height: ${pxToRem(10)};
-  margin-right: ${({ theme }) => theme.spaces[2]};
-
-  > path {
-    fill: ${({ theme }) => theme.colors.primary600};
-  }
-`;
-
-const Button = ({ disabled, onClick }) => {
-  const { formatMessage } = useIntl();
-
-  return (
-    <StyledButton
-      as="button"
-      disabled={disabled}
-      type="button"
-      paddingTop={2}
-      paddingBottom={2}
-      onClick={onClick}
-    >
-      <Flex justifyContent="center">
-        <Typography fontWeight="bold" textColor="primary600">
-          <StyledIcon />
-          {formatMessage({
-            id: getTrad('containers.EditView.add.new-entry'),
-            defaultMessage: 'Add an entry',
-          })}
-        </Typography>
-      </Flex>
-    </StyledButton>
-  );
-};
-
-Button.propTypes = {
-  disabled: PropTypes.bool.isRequired,
-  onClick: PropTypes.func.isRequired,
-};
-
-export default Button;

package/admin/src/content-manager/components/RepeatableComponent/DraggedItem/DraggingSibling.js

@@ -1,72 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import PropTypes from 'prop-types';
-import { Stack } from '@strapi/design-system/Stack';
-import { Flex } from '@strapi/design-system/Flex';
-import { TextButton } from '@strapi/design-system/TextButton';
-import { Icon } from '@strapi/design-system/Icon';
-import { Typography } from '@strapi/design-system/Typography';
-import Trash from '@strapi/icons/Trash';
-import Drag from '@strapi/icons/Drag';
-import DropdownIcon from '@strapi/icons/CarretDown';
-import { CustomIconButtonSibling } from './IconButtonCustoms';
-
-const SiblingWrapper = styled.span`
-  display: flex;
-  justify-content: space-between;
-  padding-left: ${({ theme }) => theme.spaces[4]};
-  padding-right: ${({ theme }) => theme.spaces[4]};
-  background-color: ${({ theme }) => theme.colors.neutral0};
-  height: ${50 / 16}rem;
-`;
-
-const ToggleButton = styled(TextButton)`
-  text-align: left;
-
-  svg {
-    width: ${14 / 16}rem;
-    height: ${14 / 16}rem;
-
-    path {
-      fill: ${({ theme, expanded }) =>
-        expanded ? theme.colors.primary600 : theme.colors.neutral500};
-    }
-  }
-`;
-
-const DraggingSibling = ({ displayedValue }) => {
-  return (
-    <SiblingWrapper>
-      <Stack horizontal spacing={3} flex={1}>
-        <Flex
-          justifyContent="center"
-          borderRadius="50%"
-          height={`${24 / 16}rem}`}
-          width={`${24 / 16}rem}`}
-          aria-hidden
-          as="span"
-          background="neutral200"
-        >
-          <Icon as={DropdownIcon} width={`${8 / 16}rem}`} color="neutral600" />
-        </Flex>
-
-        <ToggleButton onClick={() => {}} flex={1}>
-          <Typography fontWeight="bold" textColor="neutral700">
-            {displayedValue}
-          </Typography>
-        </ToggleButton>
-      </Stack>
-
-      <Stack horizontal spacing={0}>
-        <CustomIconButtonSibling noBorder onClick={() => {}} icon={<Trash />} />
-        <CustomIconButtonSibling icon={<Drag />} noBorder />
-      </Stack>
-    </SiblingWrapper>
-  );
-};
-
-DraggingSibling.propTypes = {
-  displayedValue: PropTypes.string.isRequired,
-};
-
-export default DraggingSibling;

package/admin/src/content-manager/components/RepeatableComponent/DraggedItem/IconButtonCustoms.js

@@ -1,32 +0,0 @@
-import styled from 'styled-components';
-import { IconButton } from '@strapi/design-system/IconButton';
-
-export const CustomIconButton = styled(IconButton)`
-  background-color: transparent;
-
-  svg {
-    path {
-      fill: ${({ theme, expanded }) =>
-        expanded ? theme.colors.primary600 : theme.colors.neutral600};
-    }
-  }
-
-  &:hover {
-    svg {
-      path {
-        fill: ${({ theme }) => theme.colors.primary600};
-      }
-    }
-  }
-`;
-
-export const CustomIconButtonSibling = styled(IconButton)`
-  background-color: transparent;
-
-  svg {
-    path {
-      fill: ${({ theme, expanded }) =>
-        expanded ? theme.colors.primary600 : theme.colors.neutral600};
-    }
-  }
-`;