@strapi/admin 4.0.0-next.12 → 4.0.0-next.16

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

@@ -3,12 +3,14 @@
 
 import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
+import { Box } from '@strapi/parts/Box';
+import { Grid, GridItem } from '@strapi/parts/Grid';
+import { Stack } from '@strapi/parts/Stack';
 import { useContentTypeLayout } from '../../hooks';
-import NonRepeatableWrapper from '../NonRepeatableWrapper';
-import Inputs from '../Inputs';
 import FieldComponent from '../FieldComponent';
+import Inputs from '../Inputs';
 
-const NonRepeatableComponent = ({ componentUid, isFromDynamicZone, name }) => {
+const NonRepeatableComponent = ({ componentUid, isFromDynamicZone, isNested, name }) => {
   const { getComponentLayout } = useContentTypeLayout();
   const componentLayoutData = useMemo(() => getComponentLayout(componentUid), [
     componentUid,
@@ -17,56 +19,72 @@ const NonRepeatableComponent = ({ componentUid, isFromDynamicZone, name }) => {
   const fields = componentLayoutData.layouts.edit;
 
   return (
-    <NonRepeatableWrapper isFromDynamicZone={isFromDynamicZone}>
-      {fields.map((fieldRow, key) => {
-        return (
-          <div className="row" key={key}>
-            {fieldRow.map(({ name: fieldName, size, metadatas, fieldSchema, queryInfos }) => {
-              const isComponent = fieldSchema.type === 'component';
-              const keys = `${name}.${fieldName}`;
+    <Box
+      background={isFromDynamicZone ? 'neutral0' : 'neutral100'}
+      paddingLeft={6}
+      paddingRight={6}
+      paddingTop={6}
+      paddingBottom={6}
+      hasRadius={isNested}
+      borderColor={isNested ? 'neutral200' : ''}
+    >
+      <Stack size={6}>
+        {fields.map((fieldRow, key) => {
+          return (
+            <Grid gap={4} key={key}>
+              {fieldRow.map(({ name: fieldName, size, metadatas, fieldSchema, queryInfos }) => {
+                const isComponent = fieldSchema.type === 'component';
+                const keys = `${name}.${fieldName}`;
 
-              if (isComponent) {
-                const compoUid = fieldSchema.component;
+                if (isComponent) {
+                  const compoUid = fieldSchema.component;
+
+                  return (
+                    <GridItem col={size} s={12} xs={12} key={fieldName}>
+                      <FieldComponent
+                        componentUid={compoUid}
+                        intlLabel={{
+                          id: metadatas.label,
+                          defaultMessage: metadatas.label,
+                        }}
+                        isNested
+                        isRepeatable={fieldSchema.repeatable}
+                        max={fieldSchema.max}
+                        min={fieldSchema.min}
+                        name={keys}
+                      />
+                    </GridItem>
+                  );
+                }
 
                 return (
-                  <FieldComponent
-                    key={fieldName}
-                    componentUid={compoUid}
-                    isRepeatable={fieldSchema.repeatable}
-                    label={metadatas.label}
-                    max={fieldSchema.max}
-                    min={fieldSchema.min}
-                    name={keys}
-                  />
+                  <GridItem col={size} key={fieldName} s={12} xs={12}>
+                    <Inputs
+                      keys={keys}
+                      fieldSchema={fieldSchema}
+                      metadatas={metadatas}
+                      queryInfos={queryInfos}
+                    />
+                  </GridItem>
                 );
-              }
-
-              return (
-                <div key={fieldName} className={`col-${size}`}>
-                  <Inputs
-                    keys={keys}
-                    fieldSchema={fieldSchema}
-                    metadatas={metadatas}
-                    componentUid={componentUid}
-                    queryInfos={queryInfos}
-                  />
-                </div>
-              );
-            })}
-          </div>
-        );
-      })}
-    </NonRepeatableWrapper>
+              })}
+            </Grid>
+          );
+        })}
+      </Stack>
+    </Box>
   );
 };
 
 NonRepeatableComponent.defaultProps = {
   isFromDynamicZone: false,
+  isNested: false,
 };
 
 NonRepeatableComponent.propTypes = {
   componentUid: PropTypes.string.isRequired,
   isFromDynamicZone: PropTypes.bool,
+  isNested: PropTypes.bool,
   name: PropTypes.string.isRequired,
 };
 

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

@@ -9,7 +9,7 @@ import {
   ModalForm,
 } from '@strapi/helper-plugin';
 import { FormattedMessage } from 'react-intl';
-import { upperFirst } from 'lodash';
+import upperFirst from 'lodash/upperFirst';
 import { AttributeIcon, Button } from '@buffetjs/core';
 
 const PopupForm = ({

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

@@ -1,17 +1,17 @@
 import styled from 'styled-components';
 
-/* eslint-disable */
-
 const Wrapper = styled.div`
-  max-height: 555px;
-  min-height: 294px;
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 100%;
   overflow: auto;
-  padding: 20px 20px 0 20px;
-  font-size: 16px;
-  background-color: #fff;
-  line-height: 24px !important;
-  font-family: 'Lato';
-  cursor: text;
+  padding: ${({ theme }) => `${theme.spaces[3]} ${theme.spaces[4]}`};
+  font-size: ${14 / 16}rem;
+  background-color: ${({ theme }) => theme.colors.neutral0};
+  z-index: 2;
+  cursor: not-allowed;
+  color: ${({ theme }) => theme.colors.neutral800};
 
   h1,
   h2,
@@ -21,33 +21,36 @@ const Wrapper = styled.div`
   h6 {
     margin-block-start: 10px;
     margin-block-end: 10px;
-    font-family: 'Lato';
   }
 
   h1 {
-    font-size: 36px;
+    font-size: ${36 / 16}rem;
     font-weight: 600;
   }
 
   h2 {
-    font-size: 30px;
+    font-size: ${30 / 16}rem;
     font-weight: 500;
   }
 
   h3 {
-    font-size: 24px;
+    font-size: ${24 / 16}rem;
     font-weight: 500;
   }
 
   h4 {
-    font-size: 20px;
+    font-size: ${20 / 16}rem;
     font-weight: 500;
   }
 
+  strong {
+    font-weight: 800;
+  }
+
   blockquote {
     margin-top: 41px;
     margin-bottom: 34px;
-    font-size: 16px;
+    font-size: ${14 / 16}rem;
     font-weight: 400;
     border-left: 5px solid #eee;
     font-style: italic;
@@ -87,7 +90,6 @@ const Wrapper = styled.div`
   pre,
   code {
     font-size: 13px;
-    font-family: 'Lato';
     border-radius: 3px;
     background-color: #002b36;
   }
@@ -107,7 +109,6 @@ const Wrapper = styled.div`
     border-radius: 3px;
   }
   .tip {
-    background-color: ${props => props.theme.main.colors.darkBlue};
     padding: 30px;
     border-radius: 3px;
   }
@@ -116,18 +117,6 @@ const Wrapper = styled.div`
   .footnote-backref {
     color: #007bff;
   }
-
-  ${({ isFullscreen }) => {
-    if (isFullscreen) {
-      return `
-        max-height: calc(100% - 70px) !important;
-        margin-bottom: 0;
-        margin-top: 9px;
-        padding: 10px 20px;
-        overflow: auto;
-      `;
-    }
-  }}
 `;
 
 export default Wrapper;

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

@@ -7,17 +7,16 @@
 
 import React, { memo, useMemo } from 'react';
 import PropTypes from 'prop-types';
-import useWysiwyg from '../../hooks/useWysiwyg';
+
 import md from './utils/mdRenderer';
 import sanitizeHtml from './utils/satinizeHtml';
 import Wrapper from './Wrapper';
 
 const PreviewWysiwyg = ({ data }) => {
-  const { isFullscreen } = useWysiwyg();
   const html = useMemo(() => sanitizeHtml(md.render(data || '')), [data]);
 
   return (
-    <Wrapper isFullscreen={isFullscreen}>
+    <Wrapper>
       <div dangerouslySetInnerHTML={{ __html: html }} />
     </Wrapper>
   );

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

@@ -1,64 +1,58 @@
-import styled, { css } from 'styled-components';
-
-/* eslint-disable indent */
-const Button = styled.button`
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { useIntl } from 'react-intl';
+import { Box } from '@strapi/parts/Box';
+import { Row } from '@strapi/parts/Row';
+import { Text } from '@strapi/parts/Text';
+import AddIcon from '@strapi/icons/AddIcon';
+import { pxToRem } from '@strapi/helper-plugin';
+import { getTrad } from '../../utils';
+
+const StyledButton = styled(Box)`
   width: 100%;
-  height: 37px;
-  margin-bottom: 25px;
-  padding: 0 0 3px 0;
-  text-align: center;
-  border: 1px solid rgba(227, 233, 243, 0.75);
-  border-top: 1px solid
-    ${({ doesPreviousFieldContainErrorsAndIsClosed }) =>
-      doesPreviousFieldContainErrorsAndIsClosed ? '#FFA784' : 'rgba(227, 233, 243, 0.75)'};
-
-  border-bottom-left-radius: 2px;
-  border-bottom-right-radius: 2px;
-  ${({ withBorderRadius }) => {
-    if (withBorderRadius) {
-      return css`
-        border-radius: 2px;
-      `;
-    }
-
-    return '';
-  }}
-
-  ${({ hasMinError }) => {
-    if (hasMinError) {
-      return `
-        border-color: #FAA684;
-        border-top-color: rgba(227, 233, 243, 0.75);
-      `;
-    }
+  border-top: 1px solid ${({ theme }) => theme.colors.neutral200};
+  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
+`;
 
-    return '';
-  }}
+const StyledIcon = styled(AddIcon)`
+  width: ${pxToRem(10)};
+  height: ${pxToRem(10)};
+  margin-right: ${({ theme }) => theme.spaces[2]};
 
-  color: ${({ disabled }) => (disabled ? '#9EA7B8' : ' #007eff')};
-  font-size: 12px;
-  font-weight: 700;
-  -webkit-font-smoothing: antialiased;
-  line-height: normal;
-  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-  background-color: #fff;
-  &:focus {
-    outline: 0;
-  }
-  > i,
-  svg {
-    margin-right: 10px;
-  }
-  & + p {
-    margin-bottom: 17px;
-    margin-top: -18px;
+  > path {
+    fill: ${({ theme }) => theme.colors.primary600};
   }
 `;
 
-Button.defaultProps = {
-  disabled: false,
+const Button = ({ disabled, onClick }) => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <StyledButton
+      as="button"
+      disabled={disabled}
+      type="button"
+      paddingTop={2}
+      paddingBottom={2}
+      onClick={onClick}
+    >
+      <Row justifyContent="center">
+        <Text textColor="primary600" bold>
+          <StyledIcon />
+          {formatMessage({
+            id: getTrad('containers.EditView.add.new-entry'),
+            defaultMessage: 'Add an entry',
+          })}
+        </Text>
+      </Row>
+    </StyledButton>
+  );
+};
+
+Button.propTypes = {
+  disabled: PropTypes.bool.isRequired,
+  onClick: PropTypes.func.isRequired,
 };
 
 export default Button;

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

@@ -1,112 +1,114 @@
-/* eslint-disable jsx-a11y/click-events-have-key-events */
-import React, { forwardRef } from 'react';
-import { FormattedMessage } from 'react-intl';
-import PropTypes from 'prop-types';
-import { Carret, Grab } from '@buffetjs/icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { getTrad } from '../../utils';
-import PreviewCarret from '../PreviewCarret';
-import BannerWrapper from './BannerWrapper';
+// /* eslint-disable jsx-a11y/click-events-have-key-events */
+// import React, { forwardRef } from 'react';
+// import { FormattedMessage } from 'react-intl';
+// import PropTypes from 'prop-types';
+// import { Carret, Grab } from '@buffetjs/icons';
+// import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+// import { getTrad } from '../../utils';
+// import PreviewCarret from '../PreviewCarret';
+// // import BannerWrapper from './BannerWrapper';
 
-/* eslint-disable jsx-a11y/no-static-element-interactions */
+// const BannerWrapper = () => null;
 
-const Banner = forwardRef(
-  (
-    {
-      displayedValue,
-      doesPreviousFieldContainErrorsAndIsOpen,
-      hasErrors,
-      hasMinError,
-      isFirst,
-      isReadOnly,
-      isDragging,
-      isOpen,
-      onClickToggle,
-      onClickRemove,
-      style,
-    },
-    refs
-  ) => {
-    const display = isDragging ? 'none' : '';
+// /* eslint-disable jsx-a11y/no-static-element-interactions */
 
-    return (
-      <BannerWrapper
-        doesPreviousFieldContainErrorsAndIsOpen={doesPreviousFieldContainErrorsAndIsOpen}
-        type="button"
-        hasMinError={hasMinError}
-        hasErrors={hasErrors}
-        isFirst={isFirst}
-        isOpen={isOpen}
-        isReadOnly={isReadOnly}
-        onClick={onClickToggle}
-        ref={refs ? refs.dropRef : null}
-        style={style}
-      >
-        {isDragging && <PreviewCarret isComponent />}
-        <>
-          <div className="img-wrapper" style={{ display }}>
-            <Carret />
-          </div>
+// const Banner = forwardRef(
+//   (
+//     {
+//       displayedValue,
+//       doesPreviousFieldContainErrorsAndIsOpen,
+//       hasErrors,
+//       hasMinError,
+//       isFirst,
+//       isReadOnly,
+//       isDragging,
+//       isOpen,
+//       onClickToggle,
+//       onClickRemove,
+//       style,
+//     },
+//     refs
+//   ) => {
+//     const display = isDragging ? 'none' : '';
 
-          <FormattedMessage id={getTrad('containers.Edit.pluginHeader.title.new')}>
-            {msg => {
-              // The displayed value may be "falsey" when the main field is a number or boolean
-              return <div style={{ display }}>{displayedValue ?? msg}</div>;
-            }}
-          </FormattedMessage>
-          <div className="cta-wrapper" style={{ display }}>
-            {!isReadOnly && (
-              <>
-                <div
-                  className="trash-icon"
-                  style={{ marginRight: 10, padding: '0 5px' }}
-                  onClick={e => {
-                    e.preventDefault();
-                    e.stopPropagation();
-                    onClickRemove();
-                  }}
-                >
-                  <FontAwesomeIcon icon="trash-alt" />
-                </div>
-                <div className="grab" ref={refs ? refs.dragRef : null}>
-                  <Grab />
-                </div>
-              </>
-            )}
-          </div>
-        </>
-      </BannerWrapper>
-    );
-  }
-);
+//     return (
+//       <BannerWrapper
+//         doesPreviousFieldContainErrorsAndIsOpen={doesPreviousFieldContainErrorsAndIsOpen}
+//         type="button"
+//         hasMinError={hasMinError}
+//         hasErrors={hasErrors}
+//         isFirst={isFirst}
+//         isOpen={isOpen}
+//         isReadOnly={isReadOnly}
+//         onClick={onClickToggle}
+//         ref={refs ? refs.dropRef : null}
+//         style={style}
+//       >
+//         {isDragging && <PreviewCarret isComponent />}
+//         <>
+//           <div className="img-wrapper" style={{ display }}>
+//             <Carret />
+//           </div>
 
-Banner.defaultProps = {
-  displayedValue: null,
-  doesPreviousFieldContainErrorsAndIsOpen: false,
-  hasErrors: false,
-  hasMinError: false,
-  isDragging: false,
-  isFirst: false,
-  isOpen: false,
-  onClickRemove: () => {},
-  onClickToggle: () => {},
-  style: {},
-};
+//           <FormattedMessage id={getTrad('containers.Edit.pluginHeader.title.new')}>
+//             {msg => {
+//               // The displayed value may be "falsey" when the main field is a number or boolean
+//               return <div style={{ display }}>{displayedValue ?? msg}</div>;
+//             }}
+//           </FormattedMessage>
+//           <div className="cta-wrapper" style={{ display }}>
+//             {!isReadOnly && (
+//               <>
+//                 <div
+//                   className="trash-icon"
+//                   style={{ marginRight: 10, padding: '0 5px' }}
+//                   onClick={e => {
+//                     e.preventDefault();
+//                     e.stopPropagation();
+//                     onClickRemove();
+//                   }}
+//                 >
+//                   <FontAwesomeIcon icon="trash-alt" />
+//                 </div>
+//                 <div className="grab" ref={refs ? refs.dragRef : null}>
+//                   <Grab />
+//                 </div>
+//               </>
+//             )}
+//           </div>
+//         </>
+//       </BannerWrapper>
+//     );
+//   }
+// );
 
-Banner.propTypes = {
-  displayedValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object]),
-  doesPreviousFieldContainErrorsAndIsOpen: PropTypes.bool,
-  hasErrors: PropTypes.bool,
-  hasMinError: PropTypes.bool,
-  isDragging: PropTypes.bool,
-  isFirst: PropTypes.bool,
-  isOpen: PropTypes.bool,
-  isReadOnly: PropTypes.bool.isRequired,
-  onClickToggle: PropTypes.func,
-  onClickRemove: PropTypes.func,
-  style: PropTypes.object,
-};
+// Banner.defaultProps = {
+//   displayedValue: null,
+//   doesPreviousFieldContainErrorsAndIsOpen: false,
+//   hasErrors: false,
+//   hasMinError: false,
+//   isDragging: false,
+//   isFirst: false,
+//   isOpen: false,
+//   onClickRemove: () => {},
+//   onClickToggle: () => {},
+//   style: {},
+// };
 
-Banner.displayName = 'Banner';
+// Banner.propTypes = {
+//   displayedValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object]),
+//   doesPreviousFieldContainErrorsAndIsOpen: PropTypes.bool,
+//   hasErrors: PropTypes.bool,
+//   hasMinError: PropTypes.bool,
+//   isDragging: PropTypes.bool,
+//   isFirst: PropTypes.bool,
+//   isOpen: PropTypes.bool,
+//   isReadOnly: PropTypes.bool.isRequired,
+//   onClickToggle: PropTypes.func,
+//   onClickRemove: PropTypes.func,
+//   style: PropTypes.object,
+// };
 
-export default Banner;
+// Banner.displayName = 'Banner';
+
+// export default Banner;

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

@@ -0,0 +1,79 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { Box } from '@strapi/parts/Box';
+import { Row } from '@strapi/parts/Row';
+import { Text } from '@strapi/parts/Text';
+import { IconButton } from '@strapi/parts/IconButton';
+import DeleteIcon from '@strapi/icons/DeleteIcon';
+import DragHandle from '@strapi/icons/Drag';
+import DropdownIcon from '@strapi/icons/FilterDropdown';
+
+const DropdownIconWrapper = styled(Box)`
+  height: ${32 / 16}rem;
+  width: ${32 / 16}rem;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  svg {
+    height: ${6 / 16}rem;
+    width: ${11 / 16}rem;
+    > path {
+      fill: ${({ theme }) => theme.colors.primary600};
+    }
+  }
+`;
+
+const ToggleButton = styled.button`
+  border: none;
+  background: transparent;
+  display: block;
+  width: 100%;
+  text-align: unset;
+  padding: 0;
+`;
+
+const DragPreview = ({ displayedValue }) => {
+  return (
+    <Box
+      paddingLeft={3}
+      paddingRight={3}
+      paddingTop={3}
+      paddingBottom={3}
+      hasRadius
+      background="primary100"
+      style={{ width: '20vw' }}
+    >
+      <Row justifyContent="space-between">
+        <ToggleButton type="button">
+          <Row>
+            <DropdownIconWrapper background="primary200">
+              <DropdownIcon />
+            </DropdownIconWrapper>
+            <Box paddingLeft={6}>
+              <Text textColor="primary700" style={{ width: '9vw' }} ellipsis>
+                {displayedValue}
+              </Text>
+            </Box>
+          </Row>
+        </ToggleButton>
+        <Box paddingLeft={3}>
+          <Row>
+            <IconButton icon={<DeleteIcon />} />
+            <Box paddingLeft={2}>
+              <IconButton icon={<DragHandle />} />
+            </Box>
+          </Row>
+        </Box>
+      </Row>
+    </Box>
+  );
+};
+
+DragPreview.propTypes = {
+  displayedValue: PropTypes.string.isRequired,
+};
+
+export default DragPreview;