@akemona-org/strapi-plugin-upload 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-upload
+
+---
+
+## 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-upload`.
+
+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-upload` 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/upload) and with the following name on NPM: `@strapi/plugin-upload`.
+
+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/assets/images/logo.svg

@@ -0,0 +1 @@
+<svg width="30" height="22" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><text font-family="AppleColorEmoji, Apple Color Emoji" font-size="30" fill="#D3E5FF" transform="translate(0 -4)"><tspan x="0" y="30.6">☁️</tspan></text><text font-family="HiraMinProN-W3, Hiragino Mincho ProN" font-size="12" font-weight="300" fill="#768491" transform="translate(0 -4)"><tspan x="9" y="24">⬆︎</tspan></text></g></svg>

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

@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  width: 100%;
+  padding-top: 0.6rem;
+`;
+
+export default Wrapper;

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

@@ -0,0 +1,182 @@
+import React from 'react';
+import { isEmpty } from 'lodash';
+import { PageFooter } from 'strapi-helper-plugin';
+import { Flex, Padded } from '@buffetjs/core';
+
+import { generatePageFromStart, generateStartFromPage } from '../../utils';
+import Filters from '../Filters';
+import List from '../List';
+import ListEmpty from '../ListEmpty';
+import SelectAll from '../SelectAll';
+import SortPicker from '../SortPicker';
+import useModalContext from '../../hooks/useModalContext';
+import Wrapper from './Wrapper';
+import CardControl from '../CardControl';
+
+const BrowseAssets = () => {
+  const {
+    allowedActions,
+    allowedTypes,
+    count,
+    files,
+    goTo,
+    handleAllFilesSelection,
+    handleFileSelection,
+    handleGoToEditFile,
+    multiple,
+    noNavigation,
+    params,
+    removeFilter,
+    selectedFiles,
+    setParam,
+  } = useModalContext();
+
+  const handleChangeParams = ({ target: { name, value } }) => {
+    setParam({ name, value });
+  };
+
+  const handleChangeListParams = ({ target: { name, value } }) => {
+    if (name.includes('_page')) {
+      handleChangeParams({
+        target: { name: '_start', value: generateStartFromPage(value, params._limit) },
+      });
+    } else {
+      handleChangeParams({ target: { name: '_limit', value } });
+    }
+  };
+
+  const handleDeleteFilter = index => {
+    removeFilter(index);
+  };
+
+  const handleGoToUpload = () => {
+    goTo('browse');
+  };
+
+  const limit = parseInt(params._limit, 10) || 10;
+  const start = parseInt(params._start, 10) || 0;
+  const canSelectFile = multiple === true || (selectedFiles.length < 1 && !multiple);
+
+  const handleCheckboxChange = ({ target: { name } }) => {
+    handleListCardClick(name);
+  };
+
+  const handleListCardClick = id => {
+    if (!canSelectFile && id !== selectedFiles[0].id) {
+      handleFileSelection({
+        target: {
+          name: selectedFiles[0].id,
+        },
+      });
+    }
+
+    handleFileSelection({
+      target: {
+        name: id,
+      },
+    });
+  };
+
+  /* eslint-disable indent */
+  /* eslint-disable react/jsx-indent */
+  const renderCardControl = noNavigation
+    ? null
+    : id => {
+        if (!allowedActions.canUpdate) {
+          return null;
+        }
+
+        return (
+          <CardControl
+            small
+            title="edit"
+            color="#9EA7B8"
+            type="pencil"
+            onClick={e => {
+              e.stopPropagation();
+              handleGoToEditFile(id);
+            }}
+          />
+        );
+      };
+
+  /* eslint-enable indent */
+  /* eslint-enable react/jsx-indent */
+
+  const paginationParams = {
+    _limit: parseInt(params._limit, 10) || 10,
+    _page: generatePageFromStart(start, limit),
+  };
+
+  const hasSomeCheckboxSelected = files.some(file =>
+    selectedFiles.find(selectedFile => file.id === selectedFile.id)
+  );
+  const areAllCheckboxesSelected =
+    files.every(file => selectedFiles.find(selectedFile => file.id === selectedFile.id)) &&
+    hasSomeCheckboxSelected;
+
+  const hasFilters = !isEmpty(params.filters.filter(filter => !filter.isDisabled));
+  const hasSearch = !isEmpty(params._q);
+  const areResultsEmptyWithSearchOrFilters = isEmpty(files) && (hasSearch || hasFilters);
+
+  return (
+    <>
+      <Wrapper>
+        <Padded top>
+          {allowedActions.canRead && (
+            <Flex flexWrap="wrap">
+              {multiple && (
+                <Padded right size="sm">
+                  <SelectAll
+                    checked={areAllCheckboxesSelected}
+                    onChange={handleAllFilesSelection}
+                    someChecked={hasSomeCheckboxSelected && !areAllCheckboxesSelected}
+                  />
+                </Padded>
+              )}
+              <SortPicker onChange={handleChangeParams} value={params._sort} />
+              <Padded left size="sm" />
+              <Filters
+                filters={params.filters}
+                onChange={handleChangeParams}
+                onClick={handleDeleteFilter}
+              />
+            </Flex>
+          )}
+        </Padded>
+        {!files || files.length === 0 ? (
+          <ListEmpty
+            canCreate={allowedActions.canCreate}
+            numberOfRows={2}
+            onClick={handleGoToUpload}
+            hasSearchApplied={areResultsEmptyWithSearchOrFilters}
+          />
+        ) : (
+          <>
+            <List
+              data={files}
+              onChange={handleCheckboxChange}
+              selectedItems={selectedFiles}
+              onCardClick={handleListCardClick}
+              allowedTypes={allowedTypes}
+              smallCards
+              renderCardControl={renderCardControl}
+            />
+            <Padded left right>
+              <Padded left right size="xs">
+                <PageFooter
+                  context={{ emitEvent: () => {} }}
+                  count={count}
+                  onChangeParams={handleChangeListParams}
+                  params={paginationParams}
+                />
+              </Padded>
+            </Padded>
+          </>
+        )}
+      </Wrapper>
+    </>
+  );
+};
+
+export default BrowseAssets;

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

@@ -0,0 +1,146 @@
+import React, { memo, useState } from 'react';
+import PropTypes from 'prop-types';
+import { Flex } from '@buffetjs/core';
+import { Tooltip } from '@buffetjs/styles';
+import { getFileExtension, useGlobalContext } from 'strapi-helper-plugin';
+import { formatBytes, getType, getTrad } from '../../utils';
+
+import Border from '../CardBorder';
+import CardImgWrapper from '../CardImgWrapper';
+import CardPreview from '../CardPreview';
+import ErrorMessage from '../CardErrorMessage';
+import FileInfos from '../FileInfos';
+import Title from '../CardTitle';
+import Tag from '../Tag';
+import Wrapper from '../CardWrapper';
+
+const Card = ({
+  children,
+  options: {
+    checked,
+    errorMessage,
+    ext,
+    hasError,
+    height,
+    id,
+    isDisabled,
+    mime,
+    name,
+    onClick,
+    previewUrl,
+    small,
+    size = 0,
+    type,
+    url,
+    width,
+    withFileCaching = true,
+    withoutFileInfo,
+  },
+}) => {
+  const { formatMessage } = useGlobalContext();
+  const [tooltipIsDisplayed, setDisplayTooltip] = useState(false);
+  const fileSize = formatBytes(size, 0);
+  const fileType = mime || type;
+  const generatedExtension =
+    !ext && name.lastIndexOf('.') !== -1
+      ? name.substr(name.lastIndexOf('.') + 1, name.length)
+      : getFileExtension(ext);
+
+  const handleClick = () => {
+    if (!isDisabled || checked) {
+      onClick(id);
+    }
+  };
+
+  const handleTooltipToggle = () => {
+    setDisplayTooltip(prev => !prev);
+  };
+
+  return (
+    <Wrapper
+      title={isDisabled ? formatMessage({ id: getTrad('list.assets.type-not-allowed') }) : null}
+      onClick={handleClick}
+    >
+      <CardImgWrapper checked={checked} small={small}>
+        <CardPreview
+          extension={generatedExtension}
+          hasError={hasError}
+          previewUrl={previewUrl}
+          url={url}
+          type={fileType}
+          withFileCaching={withFileCaching}
+        />
+        <Border color={hasError ? 'orange' : 'mediumBlue'} shown={checked || hasError} />
+        {children}
+      </CardImgWrapper>
+      {!withoutFileInfo && (
+        <>
+          <Flex>
+            <Title
+              onMouseEnter={handleTooltipToggle}
+              onMouseLeave={handleTooltipToggle}
+              data-for={`${id}`}
+              data-tip={name}
+            >
+              {name}
+            </Title>
+            {tooltipIsDisplayed && <Tooltip id={`${id}`} />}
+            <Tag label={getType(fileType)} />
+          </Flex>
+          <FileInfos extension={generatedExtension} size={fileSize} width={width} height={height} />
+        </>
+      )}
+      {hasError && <ErrorMessage title={errorMessage}>{errorMessage}</ErrorMessage>}
+    </Wrapper>
+  );
+};
+
+Card.defaultProps = {
+  children: null,
+  options: {
+    checked: false,
+    errorMessage: null,
+    ext: null,
+    id: null,
+    isDisabled: false,
+    hasError: false,
+    height: null,
+    mime: null,
+    name: null,
+    onClick: () => {},
+    previewUrl: null,
+    size: 0,
+    small: false,
+    type: null,
+    url: null,
+    width: null,
+    withFileCaching: true,
+    withoutFileInfo: false,
+  },
+};
+
+Card.propTypes = {
+  children: PropTypes.node,
+  options: PropTypes.exact({
+    errorMessage: PropTypes.string,
+    ext: PropTypes.string,
+    hasError: PropTypes.bool,
+    height: PropTypes.number,
+    mime: PropTypes.string,
+    name: PropTypes.string,
+    onClick: PropTypes.func,
+    previewUrl: PropTypes.string,
+    size: PropTypes.number,
+    small: PropTypes.bool,
+    type: PropTypes.string,
+    url: PropTypes.string,
+    width: PropTypes.number,
+    withFileCaching: PropTypes.bool,
+    withoutFileInfo: PropTypes.bool,
+    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    isDisabled: PropTypes.bool,
+    checked: PropTypes.bool,
+  }),
+};
+
+export default memo(Card);

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

@@ -0,0 +1,28 @@
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+import { themePropTypes } from 'strapi-helper-plugin';
+
+const CardBorder = styled.div`
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: none;
+  ${({ shown }) => shown && 'display: block;'}
+  border: 2px solid ${({ theme, color }) => theme.main.colors[color] || color};
+  border-radius: ${({ theme }) => theme.main.sizes.borderRadius};
+`;
+
+CardBorder.defaultProps = {
+  color: 'mediumBlue',
+  shown: false,
+};
+
+CardBorder.propTypes = {
+  color: PropTypes.string,
+  shown: PropTypes.bool,
+  ...themePropTypes,
+};
+
+export default CardBorder;

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

@@ -0,0 +1,89 @@
+/* eslint-disable indent */
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+import { themePropTypes } from 'strapi-helper-plugin';
+
+const Wrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: ${({ small }) => (small ? '25px' : '30px')};
+  height: ${({ small }) => (small ? '25px' : '30px')};
+  margin-left: 5px;
+  background-color: ${({ theme }) => theme.main.colors.white};
+  border: 1px solid ${({ theme }) => theme.main.colors.darkGrey};
+  border-radius: ${({ theme }) => theme.main.sizes.borderRadius};
+  cursor: pointer;
+  font-size: ${({ small }) => (small ? '11px' : '13px')};
+  color: ${({ color }) => color};
+
+  ${({ type }) =>
+    type === 'link' &&
+    `
+    transform: rotate(90deg)
+  `};
+
+  &:hover {
+    ${({ type, theme, color }) => {
+      if (type === 'plus') {
+        return `
+          background-color: ${theme.main.colors.darkBlue};
+          border: 1px solid  ${theme.main.colors.darkBlue};
+            > svg {
+              > g, path {
+                stroke: ${theme.main.colors.mediumBlue};
+            }
+          }
+          color: ${theme.main.colors.mediumBlue};
+        `;
+      }
+
+      if (type === 'check' || type === 'times') {
+        return `
+          background-color: ${color};
+          border: 1px solid  ${color};
+          > svg {
+            > g, path {
+              fill: ${theme.main.colors.white};
+            }
+          }
+          color: ${theme.main.colors.white};
+        `;
+      }
+
+      if (type === 'trash-alt') {
+        return `
+          background-color: #FFA784;
+          border: 1px solid #FFA784;
+          color: #F64D0A;
+        `;
+      }
+
+      return `
+          background-color: ${theme.main.colors.darkBlue};
+          border: 1px solid  ${theme.main.colors.darkBlue};
+          > svg {
+            > g, path {
+              fill: ${theme.main.colors.mediumBlue};
+            }
+          }
+          color: ${theme.main.colors.mediumBlue};
+        `;
+    }};
+  }
+`;
+
+Wrapper.defaultProps = {
+  color: '#b3b5b9',
+  type: null,
+  small: false,
+};
+
+Wrapper.propTypes = {
+  color: PropTypes.string,
+  small: PropTypes.bool,
+  type: PropTypes.string,
+  ...themePropTypes,
+};
+
+export default Wrapper;

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

@@ -0,0 +1,61 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { Pencil, Plus } from '@buffetjs/icons';
+import { Tooltip } from '@buffetjs/styles';
+import { useGlobalContext } from 'strapi-helper-plugin';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+import { getTrad } from '../../utils';
+import DownloadIcon from '../../icons/Download';
+import Wrapper from './Wrapper';
+
+const CardControl = ({ title, color, onClick, small, type, iconStyle }) => {
+  const { formatMessage } = useGlobalContext();
+  const [tooltipIsDisplayed, setTooltipIsDisplayed] = useState(false);
+
+  const handleToggleTooltip = () => {
+    setTooltipIsDisplayed(prev => !prev);
+  };
+
+  return (
+    <>
+      <Wrapper
+        onClick={onClick}
+        color={color}
+        type={type}
+        small={small}
+        onMouseEnter={handleToggleTooltip}
+        onMouseLeave={handleToggleTooltip}
+        data-for={type}
+        data-tip={formatMessage({ id: getTrad(`control-card.${title}`) })}
+      >
+        {type === 'pencil' && <Pencil fill={color} />}
+        {type === 'plus' && <Plus fill={color} />}
+        {type === 'download' && <DownloadIcon fill={color} />}
+        {!['pencil', 'clear', 'plus', 'download'].includes(type) && (
+          <FontAwesomeIcon style={iconStyle} icon={type} />
+        )}
+      </Wrapper>
+      {tooltipIsDisplayed && <Tooltip id={type} />}
+    </>
+  );
+};
+
+CardControl.defaultProps = {
+  color: '#b3b5b9',
+  iconStyle: null,
+  onClick: () => {},
+  small: false,
+  type: 'pencil',
+};
+
+CardControl.propTypes = {
+  color: PropTypes.string,
+  iconStyle: PropTypes.object,
+  onClick: PropTypes.func,
+  small: PropTypes.bool,
+  type: PropTypes.string,
+  title: PropTypes.string.isRequired,
+};
+
+export default CardControl;

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

@@ -0,0 +1,22 @@
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+
+const CardControlsWrapper = styled.div`
+  display: flex;
+  position: absolute;
+  top: 0;
+  ${({ leftAlign }) => (leftAlign ? 'left: 0' : 'right: 0')};
+  width: fit-content;
+  height: auto;
+  margin: 10px;
+`;
+
+CardControlsWrapper.defaultProps = {
+  leftAlign: false,
+};
+
+CardControlsWrapper.propTypes = {
+  leftAlign: PropTypes.bool,
+};
+
+export default CardControlsWrapper;

package/admin/src/components/CardEmpty/Bar.js

@@ -0,0 +1,19 @@
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+
+const Bar = styled.div`
+  height: 10px;
+  width: ${({ small }) => (small ? '64px' : '110px')};
+  margin-top: ${({ small }) => (small ? '15px' : '8px')};
+  background: #f6f6f6;
+`;
+
+Bar.defaultProps = {
+  small: false,
+};
+
+Bar.propTypes = {
+  small: PropTypes.bool,
+};
+
+export default Bar;

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

@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  margin-bottom: 35px;
+`;
+
+export default Wrapper;

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import CardImgWrapper from '../CardImgWrapper';
+import Bar from './Bar';
+import Wrapper from './Wrapper';
+
+const CardEmpty = () => {
+  return (
+    <Wrapper>
+      <CardImgWrapper />
+      <Bar small />
+      <Bar />
+    </Wrapper>
+  );
+};
+
+export default CardEmpty;

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Text } from '@buffetjs/core';
+
+const ErrorMessage = styled(props => <Text {...props} color="orange" fontSize="md" ellipsis />)`
+  margin-top: 3px;
+`;
+
+export default ErrorMessage;

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

@@ -0,0 +1,52 @@
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+
+const CardImgWrapper = styled.div`
+  position: relative;
+  width: 100%;
+  height: 0;
+  margin-bottom: 7px;
+  padding-top: ${({ small }) => (small ? '62.8%' : '63.8%')};
+  border-radius: 2px;
+  background-color: #f6f6f6;
+
+  @media only screen and (min-width: 1280px) {
+    padding-top: ${({ small }) => (small ? '120px' : '138px')};
+  }
+
+  .card-control-wrapper-displayed {
+    display: flex;
+    z-index: 1045;
+  }
+
+  .card-control-wrapper {
+    display: none;
+  }
+
+  &:hover {
+    .card-control-wrapper {
+      display: flex;
+      z-index: 1045;
+    }
+  }
+
+  ${({ checked }) =>
+  checked &&
+    `
+      .card-control-wrapper:not(.card-control-wrapper-hidden) {
+        display: flex;
+      }
+  `}
+`;
+
+CardImgWrapper.defaultProps = {
+  checked: false,
+  hasError: false,
+};
+
+CardImgWrapper.propTypes = {
+  checked: PropTypes.bool,
+  hasError: PropTypes.bool,
+};
+
+export default CardImgWrapper;