Merge pull request #5277 from strapi/features/media-lib-upload-compo-improvements

Features/media lib upload compo improvements

packages/strapi-admin/admin/src/themes/colors.js

@@ -1,5 +1,5 @@
 const colors = {
-  black: '#000000',
+  black: '#3b3b3b',
   white: '#ffffff',
   red: '#ff203c',
   orange: '#ff5d00',
@@ -14,6 +14,10 @@ const colors = {
   'gray-light': '#636c72',
   'gray-lighter': '#eceeef',
   'gray-lightest': '#f7f7f9',
+  brightGrey: '#f0f3f8',
+  lightGrey: '#fafafa',
+  grey: '#9ea7b8',
+  greyDark: '#292b2c',
 
   content: {
     background: '#fafafb',

packages/strapi-admin/admin/src/themes/fontSizes.js

@@ -0,0 +1,8 @@
+const fontSizes = {
+  xs: '11px',
+  sm: '12px',
+  md: '13px',
+  lg: '18px',
+};
+
+export default fontSizes;

packages/strapi-admin/admin/src/themes/fontWeights.js

@@ -0,0 +1,8 @@
+const fontWeights = {
+  regular: 400,
+  semiBold: 500,
+  bold: 600,
+  black: 900,
+};
+
+export default fontWeights;

packages/strapi-admin/admin/src/themes/index.js

@@ -1,9 +1,13 @@
 import colors from './colors';
+import fontSizes from './fontSizes';
+import fontWeights from './fontWeights';
 import sizes from './sizes';
 
 const theme = {
   main: {
     colors,
+    fontSizes,
+    fontWeights,
     sizes,
   },
 };

packages/strapi-admin/admin/src/themes/sizes.js

@@ -6,6 +6,14 @@ const sizes = {
     height: '6rem',
     width: '24rem',
   },
+  margins: {
+    // TODO:
+    sm: '10px',
+  },
+  padding: {
+    // TODO
+    md: '30px',
+  },
 };
 
 export default sizes;

packages/strapi-helper-plugin/lib/src/commonPropTypes/index.js

@@ -1,5 +1,4 @@
 import routerPropTypes from './router';
+import themeShape from './themeShape';
 
-export {
-  routerPropTypes,
-};
+export { routerPropTypes, themeShape };

packages/strapi-helper-plugin/lib/src/commonPropTypes/themeShape.js

@@ -0,0 +1,14 @@
+import PropTypes from 'prop-types';
+
+const themeShape = {
+  theme: PropTypes.shape({
+    main: PropTypes.shape({
+      colors: PropTypes.object,
+      fontSizes: PropTypes.object,
+      fontWeights: PropTypes.object,
+      sizes: PropTypes.object,
+    }),
+  }),
+};
+
+export default themeShape;

packages/strapi-helper-plugin/lib/src/components/HeaderNavWrapper/index.js

@@ -1,32 +0,0 @@
-import styled from 'styled-components';
-import colors from '../../assets/styles/colors';
-import sizes from '../../assets/styles/sizes';
-
-const HeaderNavWrapper = styled.section`
-  display: flex;
-  padding: 0 ${sizes.margin * 3}px;
-  position: relative;
-  justify-content: space-between;
-  height: 65px;
-  font-size: 1.8rem;
-  > hr {
-    position: absolute;
-    left: ${sizes.margin * 3}px;
-    bottom: 0;
-    width: calc(100% - ${sizes.margin * 6}px);
-    height: 1px;
-    background: ${colors.brightGrey};
-    border: 0;
-    margin: 0;
-  }
-  span {
-    padding-top: 16px;
-  }
-  .settings-tabs {
-    position: absolute;
-    right: ${sizes.margin * 3}px;
-    bottom: -${sizes.margin * 0.1}px;
-  }
-`;
-
-export default HeaderNavWrapper;

packages/strapi-helper-plugin/lib/src/index.js

@@ -4,7 +4,7 @@ export { default as sizes } from './assets/styles/sizes';
 
 // CommonPropTypes
 export { default as routerPropTypes } from './commonPropTypes/router';
-
+export { default as themePropTypes } from './commonPropTypes/themeShape';
 // Components
 export { default as BackHeader } from './components/BackHeader';
 export { default as BlockerComponent } from './components/BlockerComponent';
@@ -17,7 +17,6 @@ export { default as ErrorBoundary } from './components/ErrorBoundary';
 export { default as ExtendComponent } from './components/ExtendComponent';
 export { default as GlobalPagination } from './components/GlobalPagination';
 export { default as HeaderNav } from './components/HeaderNav';
-export { default as HeaderNavWrapper } from './components/HeaderNavWrapper';
 export { default as HeaderModal } from './components/HeaderModal';
 export { default as HeaderModalTitle } from './components/HeaderModalTitle';
 export { default as HeaderSearch } from './components/HeaderSearch';

packages/strapi-plugin-upload/admin/src/components/ContainerFluid/index.js

@@ -0,0 +1,12 @@
+import styled from 'styled-components';
+import { Container } from 'reactstrap';
+
+const ContainerFluid = styled(Container)`
+  padding: 0;
+`;
+
+ContainerFluid.defaultProps = {
+  fluid: true,
+};
+
+export default ContainerFluid;

packages/strapi-plugin-upload/admin/src/components/Flex/index.js

@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+
+const Flex = styled.div`
+  display: flex;
+`;
+
+export default Flex;

packages/strapi-plugin-upload/admin/src/components/InputFile/Label.js

@@ -3,8 +3,10 @@ import PropTypes from 'prop-types';
 
 const Label = styled.label`
   position: relative;
-  height: 204px;
+  height: 203px;
   width: 100%;
+  margin-top: 36px;
+  margin-bottom: 18px;
   padding-top: 46px;
   border: 2px dashed #e3e9f3;
   border-radius: 2px;

packages/strapi-plugin-upload/admin/src/components/ModalHeader/Wrapper.js

@@ -0,0 +1,24 @@
+/*
+ * NOTE:
+ * This component should be put in the strapi-helper-plugin
+ * at some point so the other packages can benefits from the updates
+ *
+ *
+ */
+
+import styled from 'styled-components';
+
+import { themePropTypes } from 'strapi-helper-plugin';
+
+const Wrapper = styled.div`
+  height: 59px;
+  line-height: 59px;
+  background-color: ${({ theme }) => theme.main.colors.lightGrey};
+  color: ${({ theme }) => theme.main.colors.black};
+  font-size: ${({ theme }) => theme.main.fontSizes.md};
+  font-weight: ${({ theme }) => theme.main.fontWeights.bold};
+`;
+
+Wrapper.propTypes = themePropTypes;
+
+export default Wrapper;

packages/strapi-plugin-upload/admin/src/components/ModalHeader/index.js

@@ -0,0 +1,37 @@
+/*
+ * NOTE:
+ * This component should be put in the strapi-helper-plugin
+ * at some point so the other packages can benefits from the updates
+ *
+ *
+ */
+
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import { HeaderModalTitle } from 'strapi-helper-plugin';
+import ModalSection from '../ModalSection';
+import Wrapper from './Wrapper';
+
+const ModalHeader = ({ headers }) => {
+  return (
+    <Wrapper>
+      <ModalSection>
+        <HeaderModalTitle>
+          {headers.map(({ key, element }) => {
+            return <Fragment key={key}>{element}</Fragment>;
+          })}
+        </HeaderModalTitle>
+      </ModalSection>
+    </Wrapper>
+  );
+};
+
+ModalHeader.defaultProps = {
+  headers: [],
+};
+
+ModalHeader.propTypes = {
+  headers: PropTypes.array,
+};
+
+export default ModalHeader;

packages/strapi-plugin-upload/admin/src/components/ModalNav/index.js

@@ -1,24 +0,0 @@
-/**
- *
- * ModalNav
- *
- */
-
-import styled from 'styled-components';
-
-const ModalNav = styled.div`
-  display: flex;
-  height: 3.8rem;
-  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 ModalNav;

packages/strapi-plugin-upload/admin/src/components/ModalNavWrapper/Hr.js

@@ -0,0 +1,14 @@
+import styled from 'styled-components';
+import { themePropTypes } from 'strapi-helper-plugin';
+
+const Hr = styled.hr`
+  margin: 0px;
+  width: 100%;
+  height: 1px;
+  border: 0;
+  background: ${({ theme }) => theme.main.colors.brightGrey};
+`;
+
+Hr.propTypes = themePropTypes;
+
+export default Hr;

packages/strapi-plugin-upload/admin/src/components/ModalNavWrapper/index.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Flex from '../Flex';
+import ModalSection from '../ModalSection';
+import ModalTab from '../ModalTab';
+import Hr from './Hr';
+
+const ModalNavWrapper = ({ children, links, onClickGoTo, to }) => {
+  return (
+    <>
+      <ModalSection justifyContent="space-between">
+        <Flex>
+          {links.map(link => {
+            const isActive = link.to === to;
+
+            return (
+              <ModalTab
+                key={link.to}
+                label={link.label}
+                to={link.to}
+                isActive={isActive}
+                isDisabled={link.isDisabled}
+                onClick={onClickGoTo}
+              />
+            );
+          })}
+        </Flex>
+        {children}
+      </ModalSection>
+      <ModalSection>
+        <Hr />
+      </ModalSection>
+    </>
+  );
+};
+
+ModalNavWrapper.defaultProps = {
+  children: null,
+  links: [],
+  onClickGoTo: () => {},
+  to: '',
+};
+
+ModalNavWrapper.propTypes = {
+  children: PropTypes.node,
+  links: PropTypes.array,
+  onClickGoTo: PropTypes.func,
+  to: PropTypes.string,
+};
+
+export default ModalNavWrapper;

packages/strapi-plugin-upload/admin/src/components/ModalSection/index.js

@@ -0,0 +1,20 @@
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+import { themePropTypes } from 'strapi-helper-plugin';
+
+const ModalSection = styled.section`
+  display: flex;
+  justify-content: ${({ justifyContent }) => justifyContent};
+  padding: 0 ${({ theme }) => theme.main.sizes.padding.md};
+`;
+
+ModalSection.defaultProps = {
+  justifyContent: 'initial',
+};
+
+ModalSection.propTypes = {
+  ...themePropTypes,
+  justifyContent: PropTypes.string,
+};
+
+export default ModalSection;

packages/strapi-plugin-upload/admin/src/components/ModalTab/Wrapper.js

@@ -1,23 +1,30 @@
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
 
-const Wrapper = styled.div(({ isActive, isDisabled }) => {
+const Wrapper = styled.div(({ isActive, isDisabled, theme }) => {
   const cursor = isDisabled ? 'not-allowed' : 'pointer';
+  const baseStyle = {
+    color: '#9ea7b8',
+    cursor,
+    fontSize: theme.main.fontSizes.sm,
+    fontWeight: theme.main.fontWeights.bold,
+    letterSpacing: '0.7px',
+    marginTop: '34px',
+    marginRight: '30px',
+    textTransform: 'uppercase',
+  };
 
   if (isActive) {
     return {
+      ...baseStyle,
       height: '3rem',
-      cursor,
       color: '#007eff',
-      fontWeight: 600,
       borderBottom: '2px solid #007eff',
       zIndex: 99,
     };
   }
 
-  return {
-    cursor,
-  };
+  return baseStyle;
 });
 
 Wrapper.defaultProps = {

packages/strapi-plugin-upload/admin/src/components/ModalTab/index.js

@@ -1,6 +1,6 @@
 /**
  *
- * HeaderNavLink
+ * ModalTab
  *
  */
 
@@ -10,7 +10,7 @@ import { FormattedMessage } from 'react-intl';
 import getTrad from '../../utils/getTrad';
 import Wrapper from './Wrapper';
 
-const HeaderNavLink = ({ isDisabled, to, isActive, onClick }) => {
+const ModalTab = ({ isDisabled, label, to, isActive, onClick }) => {
   const handleClick = e => {
     if (isDisabled) {
       e.preventDefault();
@@ -23,22 +23,23 @@ const HeaderNavLink = ({ isDisabled, to, isActive, onClick }) => {
 
   return (
     <Wrapper isActive={isActive} isDisabled={isDisabled} onClick={handleClick}>
-      <FormattedMessage id={getTrad(`modal.nav.${to}`)} />
+      <FormattedMessage id={getTrad(`modal.nav.${label}`)} />
     </Wrapper>
   );
 };
 
-HeaderNavLink.defaultProps = {
+ModalTab.defaultProps = {
   isActive: false,
   isDisabled: false,
   onClick: () => {},
 };
 
-HeaderNavLink.propTypes = {
+ModalTab.propTypes = {
   to: PropTypes.string.isRequired,
   isActive: PropTypes.bool,
   isDisabled: PropTypes.bool,
+  label: PropTypes.string.isRequired,
   onClick: PropTypes.func,
 };
 
-export default HeaderNavLink;
+export default ModalTab;

packages/strapi-plugin-upload/admin/src/components/Text/index.js

@@ -0,0 +1,17 @@
+import styled from 'styled-components';
+
+const Text = styled.p`
+  margin: 0;
+  line-height: 18px;
+  color: ${({ theme, color }) => theme.main.colors[color]};
+  font-size: ${({ theme, fontSize }) => theme.main.fontSizes[fontSize]};
+  font-weight: ${({ theme, fontWeight }) => theme.main.fontWeights[fontWeight]};
+`;
+
+Text.defaultProps = {
+  color: 'greyDark',
+  fontSize: 'md',
+  fontWeight: 'regular',
+};
+
+export default Text;

packages/strapi-plugin-upload/admin/src/components/UploadForm/index.js

@@ -1,18 +1,20 @@
 import React, { useReducer } from 'react';
 import PropTypes from 'prop-types';
-import { HeaderNavWrapper, ModalBody, ModalForm } from 'strapi-helper-plugin';
-import ModalNav from '../ModalNav';
-import NavLink from '../NavLink';
 import InputFile from '../InputFile';
+import ModalNavWrapper from '../ModalNavWrapper';
+import ModalSection from '../ModalSection';
 import init from './init';
 import reducer, { initialState } from './reducer';
 
 const UploadForm = ({ addFilesToUpload }) => {
   const [reducerState, dispatch] = useReducer(reducer, initialState, init);
   const { to } = reducerState.toJS();
-  const links = ['computer', 'url'];
+  const links = [
+    { to: 'computer', label: 'computer', isDisabled: false },
+    { to: 'url', label: 'url', isDisabled: true },
+  ];
 
-  const handleGoTo = to => {
+  const handleClickGoTo = to => {
     dispatch({
       type: 'SET_TAB',
       to,
@@ -21,38 +23,11 @@ const UploadForm = ({ addFilesToUpload }) => {
 
   return (
     <>
-      <HeaderNavWrapper>
-        <div className="settings-tabs" style={{ left: 30 }}>
-          <ModalNav>
-            {links.map(link => {
-              const isActive = link === to;
-
-              return (
-                <NavLink
-                  key={link}
-                  to={link}
-                  isActive={isActive}
-                  isDisabled={link === 'url'}
-                  onClick={handleGoTo}
-                />
-              );
-            })}
-          </ModalNav>
-        </div>
-        <hr />
-      </HeaderNavWrapper>
-      <ModalForm>
-        <ModalBody style={{ paddingTop: 35, paddingBottom: 18 }}>
-          <div className="container-fluid">
-            <div className="row">
-              <div className="col-12">
+      <ModalNavWrapper links={links} to={to} onClickGoTo={handleClickGoTo} />
+      <ModalSection>
         {to === 'computer' && <InputFile onChange={addFilesToUpload} />}
         {to === 'url' && <div>COMING SOON</div>}
-              </div>
-            </div>
-          </div>
-        </ModalBody>
-      </ModalForm>
+      </ModalSection>
     </>
   );
 };

packages/strapi-plugin-upload/admin/src/components/UploadList/ButtonWrapper.js

@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+
+const ButtonWrapper = styled.div`
+  padding-top: 28px;
+`;
+
+export default ButtonWrapper;

packages/strapi-plugin-upload/admin/src/components/UploadList/HeaderWrapper.js

@@ -1,17 +0,0 @@
-import styled from 'styled-components';
-import { HeaderNavWrapper } from 'strapi-helper-plugin';
-
-const Wrapper = styled(HeaderNavWrapper)`
-  padding-top: 27px;
-  font-size: 12px;
-
-  .assets-selected {
-    padding-top: 7px;
-    line-height: 18px;
-  }
-  .infos {
-    color: #9ea7b8;
-  }
-`;
-
-export default Wrapper;

packages/strapi-plugin-upload/admin/src/components/UploadList/ListWrapper.js

@@ -0,0 +1,10 @@
+import styled from 'styled-components';
+
+const ListWrapper = styled.div`
+  margin-bottom: 4px;
+  padding-top: 14px;
+  max-height: 350px;
+  overflow: auto;
+`;
+
+export default ListWrapper;

packages/strapi-plugin-upload/admin/src/components/UploadList/TextWrapper.js

@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+
+const TextWrapper = styled.div`
+  padding-top: 34px;
+`;
+
+export default TextWrapper;

packages/strapi-plugin-upload/admin/src/components/UploadList/index.js

@@ -1,13 +1,16 @@
-/* eslint-disable react/no-array-index-key */
 import React from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
-import { ModalBody } from 'strapi-helper-plugin';
 import { Button } from '@buffetjs/core';
 import createMatrix from '../../utils/createMatrix';
 import getTrad from '../../utils/getTrad';
-import HeaderWrapper from './HeaderWrapper';
+import ContainerFluid from '../ContainerFluid';
+import ModalSection from '../ModalSection';
+import Text from '../Text';
+import ButtonWrapper from './ButtonWrapper';
+import TextWrapper from './TextWrapper';
 import RowItem from './RowItem';
+import ListWrapper from './ListWrapper';
 
 const UploadList = ({
   filesToUpload,
@@ -22,22 +25,23 @@ const UploadList = ({
 
   return (
     <>
-      <HeaderWrapper>
-        <div>
-          <div className="assets-selected">
+      <ModalSection justifyContent="space-between">
+        <TextWrapper>
+          <Text fontSize="md" fontWeight="bold">
             <FormattedMessage
               id={getTrad(titleId)}
               values={{ number: filesToUploadLength }}
             />
-          </div>
-          <div className="infos">
+          </Text>
+
+          <Text fontSize="sm" color="grey">
             <FormattedMessage
               id={getTrad('modal.upload-list.sub-header-subtitle')}
               values={{ number: filesToUploadLength }}
             />
-          </div>
-        </div>
-        <div>
+          </Text>
+        </TextWrapper>
+        <ButtonWrapper>
           <FormattedMessage id={getTrad('modal.upload-list.sub-header.button')}>
             {label => (
               <Button
@@ -48,18 +52,12 @@ const UploadList = ({
               />
             )}
           </FormattedMessage>
-        </div>
-      </HeaderWrapper>
-      <ModalBody>
-        <div
-          className="container"
-          style={{
-            marginTop: -4,
-            marginBottom: 4,
-            overflow: 'auto',
-            maxHeight: 350,
-          }}
-        >
+        </ButtonWrapper>
+      </ModalSection>
+
+      <ModalSection>
+        <ContainerFluid>
+          <ListWrapper>
             {matrix.map(({ key, rowContent }) => {
               return (
                 <div className="row" key={key}>
@@ -73,8 +71,9 @@ const UploadList = ({
                 </div>
               );
             })}
-        </div>
-      </ModalBody>
+          </ListWrapper>
+        </ContainerFluid>
+      </ModalSection>
     </>
   );
 };

packages/strapi-plugin-upload/admin/src/containers/ModalStepper/index.js

@@ -2,8 +2,6 @@ import React, { useEffect, useReducer, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { get } from 'lodash';
 import {
-  HeaderModal,
-  HeaderModalTitle,
   Modal,
   ModalFooter,
   useGlobalContext,
@@ -12,6 +10,7 @@ import {
 import { Button } from '@buffetjs/core';
 import { FormattedMessage } from 'react-intl';
 import pluginId from '../../pluginId';
+import ModalHeader from '../../components/ModalHeader';
 import stepper from './utils/stepper';
 import init from './init';
 import reducer, { initialState } from './reducer';
@@ -141,13 +140,14 @@ const ModalStepper = ({ isOpen, onToggle }) => {
   return (
     <Modal isOpen={isOpen} onToggle={onToggle} onClosed={handleClosed}>
       {/* header title */}
-      <HeaderModal>
-        <section>
-          <HeaderModalTitle>
-            <FormattedMessage id={headerTradId} />
-          </HeaderModalTitle>
-        </section>
-      </HeaderModal>
+      <ModalHeader
+        headers={[
+          {
+            key: headerTradId,
+            element: <FormattedMessage id={headerTradId} />,
+          },
+        ]}
+      />
       {/* body of the modal */}
       {Component && (
         <Component