@akemona-org/strapi-plugin-upload 3.7.0

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

@@ -0,0 +1,114 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Checkbox } from '@buffetjs/core';
+import { get, pick } from 'lodash';
+import { prefixFileUrlWithBackendUrl } from 'strapi-helper-plugin';
+import { getTrad, getType } from '../../utils';
+import Card from '../Card';
+import CardControlsWrapper from '../CardControlsWrapper';
+import ListWrapper from '../ListWrapper';
+import IntlText from '../IntlText';
+import ListCell from './ListCell';
+import ListRow from './ListRow';
+
+const List = ({
+  allowedTypes,
+  data,
+  onChange,
+  onCardClick,
+  selectedItems,
+  smallCards,
+  canSelect,
+  renderCardControl,
+  showCheckbox,
+}) => {
+  const selectedAssets = selectedItems.length;
+
+  const handleCheckboxClick = e => {
+    e.stopPropagation();
+  };
+
+  return (
+    <ListWrapper>
+      {!smallCards && selectedAssets > 0 && (
+        <IntlText
+          id={getTrad(`list.assets.selected.${selectedAssets > 1 ? 'plural' : 'singular'}`)}
+          values={{ number: selectedAssets }}
+          lineHeight="18px"
+        />
+      )}
+      <ListRow>
+        {data.map(item => {
+          const { id } = item;
+          const thumbnail = get(item, ['formats', 'small'], item);
+          const isAllowed =
+            allowedTypes.length > 0 ? allowedTypes.includes(getType(item.mime)) : true;
+          const checked = selectedItems.findIndex(file => file.id === id) !== -1;
+
+          const fileUrl = prefixFileUrlWithBackendUrl(thumbnail.url);
+
+          const cardOptions = {
+            ...pick(item, ['ext', 'name', 'mime', 'height', 'width', 'size', 'previewUrl', 'id']),
+            isDisabled: !isAllowed,
+            checked,
+            url: fileUrl,
+            onClick: onCardClick,
+            small: smallCards,
+          };
+
+          return (
+            <ListCell key={id}>
+              <Card options={cardOptions}>
+                {(checked || canSelect) && (
+                  <>
+                    {(checked || isAllowed) && showCheckbox && (
+                      <CardControlsWrapper leftAlign className="card-control-wrapper">
+                        <Checkbox
+                          name={`${id}`}
+                          onChange={onChange}
+                          onClick={handleCheckboxClick}
+                          value={checked}
+                        />
+                      </CardControlsWrapper>
+                    )}
+                    {renderCardControl && (
+                      <CardControlsWrapper className="card-control-wrapper card-control-wrapper-hidden">
+                        {renderCardControl(id)}
+                      </CardControlsWrapper>
+                    )}
+                  </>
+                )}
+              </Card>
+            </ListCell>
+          );
+        })}
+      </ListRow>
+    </ListWrapper>
+  );
+};
+
+List.defaultProps = {
+  allowedTypes: [],
+  canSelect: true,
+  data: [],
+  onChange: () => {},
+  onCardClick: () => {},
+  renderCardControl: null,
+  selectedItems: [],
+  smallCards: false,
+  showCheckbox: true,
+};
+
+List.propTypes = {
+  allowedTypes: PropTypes.array,
+  canSelect: PropTypes.bool,
+  data: PropTypes.array,
+  onChange: PropTypes.func,
+  onCardClick: PropTypes.func,
+  renderCardControl: PropTypes.func,
+  selectedItems: PropTypes.array,
+  smallCards: PropTypes.bool,
+  showCheckbox: PropTypes.bool,
+};
+
+export default List;

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

@@ -0,0 +1,15 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  position: relative;
+  margin-top: 19px;
+  padding: 0;
+  .btn-wrapper {
+    position: absolute;
+    top: 109px;
+    width: 100%;
+    text-align: center;
+  }
+`;
+
+export default Wrapper;

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

@@ -0,0 +1,70 @@
+import React from 'react';
+import { Button } from '@buffetjs/core';
+import { FormattedMessage } from 'react-intl';
+import PropTypes from 'prop-types';
+
+import { getTrad } from '../../utils';
+import generateRows from './utils/generateRows';
+
+import CardEmpty from '../CardEmpty';
+import Wrapper from './Wrapper';
+import IntlText from '../IntlText';
+
+const ListEmpty = ({ canCreate, hasSearchApplied, onClick, numberOfRows }) => {
+  const rows = generateRows(numberOfRows);
+  const titleId = hasSearchApplied
+    ? 'list.assets-empty.title-withSearch'
+    : 'list.assets-empty.title';
+  const subtitleId = 'list.assets-empty.subtitle';
+  const prefixedTitleId = getTrad(titleId);
+  const prefixedSubtitleId = getTrad(subtitleId);
+
+  return (
+    <Wrapper className="container-fluid">
+      {rows.map(row => {
+        return (
+          <div className="row" key={row.key}>
+            {row.rows.map(key => {
+              return (
+                <div className="col-xs-12 col-md-6 col-xl-3" key={key}>
+                  <CardEmpty />
+                </div>
+              );
+            })}
+          </div>
+        );
+      })}
+      {canCreate && (
+        <div className="btn-wrapper">
+          <IntlText id={prefixedTitleId} fontSize="lg" fontWeight="semiBold" />
+
+          {!hasSearchApplied && (
+            <>
+              <IntlText id={prefixedSubtitleId} fontSize="md" lineHeight="19px" />
+              <div style={{ paddingBottom: '1.1rem' }} />
+              <Button color="primary" onClick={onClick} type="button">
+                <FormattedMessage id={getTrad('header.actions.upload-assets')} />
+              </Button>
+            </>
+          )}
+        </div>
+      )}
+    </Wrapper>
+  );
+};
+
+ListEmpty.defaultProps = {
+  canCreate: true,
+  hasSearchApplied: false,
+  onClick: () => {},
+  numberOfRows: 3,
+};
+
+ListEmpty.propTypes = {
+  canCreate: PropTypes.bool,
+  hasSearchApplied: PropTypes.bool,
+  onClick: PropTypes.func,
+  numberOfRows: PropTypes.number,
+};
+
+export default ListEmpty;

package/admin/src/components/ListEmpty/utils/generateRows.js

@@ -0,0 +1,12 @@
+const generateRows = numberOfRows => {
+  const rows = Array.from({ length: numberOfRows }, (_, i) => {
+    return {
+      key: i,
+      rows: Array.from({ length: i === numberOfRows - 1 ? 3 : 4 }, (_, i) => i),
+    };
+  });
+
+  return rows;
+};
+
+export default generateRows;

package/admin/src/components/ListModal/BaselineAlignmentWrapper.js

@@ -0,0 +1,12 @@
+import styled from 'styled-components';
+
+// You can see in the index.js file that I used the design system to do the UI integration but
+// sometimes, we need to create some "temporary" custom style to fix the baseline alignment.
+// -----
+// TODO : remove this component. I think that this kind components should not exist in Strapi.
+// I create it to temporary fix the baseline alignment until we have the design system.
+const BaselineAlignmentWrapper = styled.div`
+  margin-top: -0.7rem;
+`;
+
+export default BaselineAlignmentWrapper;

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

@@ -0,0 +1,66 @@
+import React from 'react';
+import { Button } from '@buffetjs/core';
+import { CheckPermissions } from 'strapi-helper-plugin';
+import useModalContext from '../../hooks/useModalContext';
+import { getTrad } from '../../utils';
+import pluginPermissions from '../../permissions';
+import BrowseAssets from '../BrowseAssets';
+import ModalNavWrapper from '../ModalNavWrapper';
+import ModalSection from '../ModalSection';
+import SelectedAssets from '../SelectedAssets';
+import IntlText from '../IntlText';
+import BaselineAlignmentWrapper from './BaselineAlignmentWrapper';
+
+const ListModal = () => {
+  const { currentTab, goTo, handleModalTabChange, selectedFiles } = useModalContext();
+
+  const handleClick = to => {
+    handleModalTabChange(to);
+  };
+
+  const handleGoToUpload = () => {
+    goTo('browse');
+  };
+
+  const renderUploadModalButton = () => (
+    <BaselineAlignmentWrapper>
+      <CheckPermissions permissions={pluginPermissions.create}>
+        <Button type="button" color="primary" onClick={handleGoToUpload}>
+          <IntlText
+            id={getTrad('modal.upload-list.sub-header.button')}
+            fontWeight="bold"
+            color="white"
+          />
+        </Button>
+      </CheckPermissions>
+    </BaselineAlignmentWrapper>
+  );
+
+  const links = [
+    { to: 'browse', label: 'browse', isDisabled: false, onClick: handleClick },
+    {
+      to: 'selected',
+      label: 'selected',
+      count: selectedFiles.length,
+      isDisabled: false,
+      onClick: handleClick,
+    },
+  ];
+
+  return (
+    <ModalNavWrapper
+      initialTab={currentTab}
+      links={links}
+      renderRightContent={renderUploadModalButton}
+    >
+      {to => (
+        <ModalSection>
+          {to === 'browse' && <BrowseAssets />}
+          {to === 'selected' && <SelectedAssets />}
+        </ModalSection>
+      )}
+    </ModalNavWrapper>
+  );
+};
+
+export default ListModal;

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

@@ -0,0 +1,16 @@
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+
+const ListWrapper = styled.div`
+  margin-top: ${({ small }) => (small ? '2px' : '7px')};
+`;
+
+ListWrapper.defaultProps = {
+  small: false,
+};
+
+ListWrapper.propTypes = {
+  small: PropTypes.bool,
+};
+
+export default ListWrapper;

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

@@ -0,0 +1,44 @@
+import styled, { keyframes } from 'styled-components';
+
+const loading = keyframes`
+from {
+  left: -100px;
+    width: 30%;
+}
+50% {
+  width: 30%;
+}
+70% {
+  width: 70%;
+}
+80% {
+  left: 50%;
+}
+95% {
+  left: 120%;
+}
+to {
+  left: 100%;
+}
+`;
+
+const LoadingIndicator = styled.div`
+  position: relative;
+  width: 44%;
+  height: 4px;
+  overflow: hidden;
+  background-color: #515764;
+  border-radius: 2px;
+  &:before {
+    content: '';
+    display: block;
+    position: absolute;
+    left: -100px;
+    width: 100px;
+    height: 4px;
+    background-color: #b3b5b9;
+    animation: ${loading} 2s linear infinite;
+  }
+`;
+
+export default LoadingIndicator;

package/admin/src/components/ModalHeader/BackButton.js

@@ -0,0 +1,33 @@
+/*
+ *
+ *
+ * BackButton
+ *
+ */
+import styled from 'styled-components';
+
+const BackButton = styled.button`
+  height: 5.9rem;
+  width: 6.5rem;
+  margin-right: 20px;
+  margin-left: -30px;
+  line-height: 6rem;
+  text-align: center;
+  color: #81848a;
+  border-right: 1px solid #f3f4f4;
+  &:before {
+    line-height: normal;
+    content: '\f053';
+    font-family: 'FontAwesome';
+    font-size: ${({ theme }) => theme.main.sizes.fonts.lg};
+    font-weight: ${({ theme }) => theme.main.fontWeights.bold};
+  }
+  &:hover {
+    background-color: #f3f4f4;
+  }
+  &:focus {
+    outline: none;
+  }
+`;
+
+export default BackButton;

package/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.sizes.fonts.md};
+  font-weight: ${({ theme }) => theme.main.fontWeights.bold};
+`;
+
+Wrapper.propTypes = themePropTypes;
+
+export default Wrapper;

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

@@ -0,0 +1,47 @@
+/*
+ * 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 from 'react';
+import PropTypes from 'prop-types';
+import { ModalHeader as HeaderModal, useGlobalContext } from 'strapi-helper-plugin';
+
+const ModalHeader = ({ goBack, headerBreadcrumbs, withBackButton, HeaderComponent }) => {
+  const { emitEvent } = useGlobalContext();
+
+  const handleClick = () => {
+    // Emit event on backButton with hardcoded upload location
+    emitEvent('didGoBack', { location: 'upload' });
+
+    goBack('backButton');
+  };
+
+  return (
+    <HeaderModal
+      headerBreadcrumbs={headerBreadcrumbs}
+      onClickGoBack={handleClick}
+      withBackButton={withBackButton}
+      HeaderComponent={HeaderComponent}
+    />
+  );
+};
+
+ModalHeader.defaultProps = {
+  goBack: () => {},
+  headerBreadcrumbs: [],
+  withBackButton: false,
+  HeaderComponent: null,
+};
+
+ModalHeader.propTypes = {
+  goBack: PropTypes.func,
+  headerBreadcrumbs: PropTypes.array,
+  withBackButton: PropTypes.bool,
+  HeaderComponent: PropTypes.elementType,
+};
+
+export default ModalHeader;

package/admin/src/components/ModalNavWrapper/BaselineAlignment.js

@@ -0,0 +1,12 @@
+import styled from 'styled-components';
+
+// You can see in the index.js file that I used the design system to do the UI integration but
+// sometimes, we need to create some "temporary" custom style to fix the baseline alignment.
+// -----
+// TODO : remove this component. I think that this kind components should not exist in Strapi.
+// I create it to temporary fix the baseline alignment until we have the design system.
+const BaselineAlignment = styled.div`
+  padding-top: 3.4rem;
+`;
+
+export default BaselineAlignment;

package/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: 50%;
+  height: 1px;
+  border: 0;
+  background: ${({ theme }) => theme.main.colors.brightGrey};
+`;
+
+Hr.propTypes = themePropTypes;
+
+export default Hr;

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

@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  max-height: 48.3rem;
+  overflow: auto;
+`;
+
+export default Wrapper;

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

@@ -0,0 +1,70 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { Flex, Padded } from '@buffetjs/core';
+
+import ModalSection from '../ModalSection';
+import ModalTab from '../ModalTab';
+import Hr from './Hr';
+import BaselineAlignment from './BaselineAlignment';
+import Wrapper from './Wrapper';
+
+const ModalNavWrapper = ({ children, links, renderRightContent, initialTab }) => {
+  const [to, setTo] = useState(initialTab || links[0].to);
+
+  const handleGoTo = link => {
+    setTo(link.to);
+
+    if (link.onClick) {
+      link.onClick(link.to);
+    }
+  };
+
+  return (
+    <Wrapper>
+      <Padded left right size="md">
+        <BaselineAlignment />
+        <Flex justifyContent="space-between">
+          <Flex>
+            {links.map(link => {
+              const isActive = link.to === to;
+
+              return (
+                <ModalTab
+                  count={link.count}
+                  isActive={isActive}
+                  isDisabled={link.isDisabled}
+                  key={link.to}
+                  label={link.label}
+                  onClick={() => handleGoTo(link)}
+                  to={link.to}
+                />
+              );
+            })}
+          </Flex>
+          {renderRightContent && renderRightContent()}
+        </Flex>
+      </Padded>
+      <ModalSection>
+        <Hr />
+      </ModalSection>
+      {children(to)}
+    </Wrapper>
+  );
+};
+
+ModalNavWrapper.defaultProps = {
+  initialTab: null,
+  links: [],
+  renderRightContent: null,
+  to: '',
+};
+
+ModalNavWrapper.propTypes = {
+  children: PropTypes.func.isRequired,
+  initialTab: PropTypes.string,
+  links: PropTypes.array,
+  renderRightContent: PropTypes.func,
+  to: PropTypes.string,
+};
+
+export default ModalNavWrapper;

package/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.paddings.md};
+`;
+
+ModalSection.defaultProps = {
+  justifyContent: 'initial',
+};
+
+ModalSection.propTypes = {
+  ...themePropTypes,
+  justifyContent: PropTypes.string,
+};
+
+export default ModalSection;

package/admin/src/components/ModalTab/Count/Wrapper.js

@@ -0,0 +1,16 @@
+import styled from 'styled-components';
+
+import { Flex } from '@buffetjs/core';
+
+const Wrapper = styled(Flex)`
+  width: 1.4rem;
+  height: 1.4rem;
+  padding: 0 0.2rem;
+  margin-top: 0.2rem;
+  margin-left: ${({ theme }) => theme.main.sizes.paddings.xs};
+  border-radius: ${({ theme }) => theme.main.sizes.borderRadius};
+  background-color: ${({ theme, isActive }) =>
+    isActive ? theme.main.colors.lightBlue : '#e9eaeb'};
+`;
+
+export default Wrapper;

package/admin/src/components/ModalTab/Count/index.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Text } from '@buffetjs/core';
+
+import Wrapper from './Wrapper';
+
+const Count = ({ count, isActive }) => (
+  <Wrapper isActive={isActive} justifyContent="center" alignItems="center">
+    <Text
+      lineHeight="none"
+      fontWeight="bold"
+      color={isActive ? 'mediumBlue' : 'grey'}
+      fontSize="xs"
+    >
+      {count}
+    </Text>
+  </Wrapper>
+);
+
+Count.propTypes = {
+  count: PropTypes.number,
+  isActive: PropTypes.bool,
+};
+
+Count.defaultProps = {
+  count: 0,
+  isActive: false,
+};
+
+export default Count;

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

@@ -0,0 +1,37 @@
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+
+const Wrapper = styled.div(({ isActive, isDisabled, theme }) => {
+  const cursor = isDisabled ? 'not-allowed' : 'pointer';
+  const baseStyle = {
+    color: '#9ea7b8',
+    cursor,
+    fontSize: theme.main.sizes.fonts.sm,
+    fontWeight: theme.main.fontWeights.bold,
+    letterSpacing: '0.7px',
+    textTransform: 'uppercase',
+    height: '3rem',
+  };
+
+  if (isActive) {
+    return {
+      ...baseStyle,
+      borderBottom: '2px solid #007eff',
+      zIndex: 99,
+    };
+  }
+
+  return baseStyle;
+});
+
+Wrapper.defaultProps = {
+  isActive: false,
+  isDisabled: false,
+};
+
+Wrapper.propTypes = {
+  isActive: PropTypes.bool,
+  isDisabled: PropTypes.bool,
+};
+
+export default Wrapper;