feat(dropzone): remove

package-lock.json

@@ -3178,11 +3178,6 @@
       "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
       "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg=="
     },
-    "attr-accept": {
-      "version": "2.2.2",
-      "resolved": "https://registry.npmjs.org/attr-accept/-/attr-accept-2.2.2.tgz",
-      "integrity": "sha512-7prDjvt9HmqiZ0cl5CRjtS84sEyhsHP2coDkaZKRKVfCDo9s7iw7ChVmar78Gu9pC4SoR/28wFu/G5JJhTnqEg=="
-    },
     "autoprefixer": {
       "version": "9.8.6",
       "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.8.6.tgz",
@@ -7885,21 +7880,6 @@
         }
       }
     },
-    "file-selector": {
-      "version": "0.2.4",
-      "resolved": "https://registry.npmjs.org/file-selector/-/file-selector-0.2.4.tgz",
-      "integrity": "sha512-ZDsQNbrv6qRi1YTDOEWzf5J2KjZ9KMI1Q2SGeTkCJmNNW25Jg4TW4UMcmoqcg4WrAyKRcpBXdbWRxkfrOzVRbA==",
-      "requires": {
-        "tslib": "^2.0.3"
-      },
-      "dependencies": {
-        "tslib": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.1.0.tgz",
-          "integrity": "sha512-hcVC3wYEziELGGmEEXue7D75zbwIIVUMWAVbHItGPx0ziyXxrOMQx4rQEVEV45Ut/1IotuEvwqPopzIOkDMf0A=="
-        }
-      }
-    },
     "file-type": {
       "version": "12.4.2",
       "resolved": "https://registry.npmjs.org/file-type/-/file-type-12.4.2.tgz",
@@ -15494,16 +15474,6 @@
         "scheduler": "^0.20.1"
       }
     },
-    "react-dropzone": {
-      "version": "11.2.4",
-      "resolved": "https://registry.npmjs.org/react-dropzone/-/react-dropzone-11.2.4.tgz",
-      "integrity": "sha512-EGSvK2CxFTuc28WxwuJCICyuYFX8b+sRumwU6Bs6sTbElV2HtQkT0d6C+HEee6XfbjiLIZ+Th9uji27rvo2wGw==",
-      "requires": {
-        "attr-accept": "^2.2.1",
-        "file-selector": "^0.2.2",
-        "prop-types": "^15.7.2"
-      }
-    },
     "react-error-overlay": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-3.0.0.tgz",

package.json

@@ -34,7 +34,6 @@
     "jszip": "^3.5.0",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
-    "react-dropzone": "^11.2.4",
     "react-helmet": "^6.1.0",
     "react-slick": "^0.27.13",
     "slick-carousel": "^1.8.1"

src/components/custom-dropzone.js

@@ -1,96 +0,0 @@
-import React, { useCallback, useState } from "react";
-import { useDropzone } from "react-dropzone";
-import JSZip from "jszip";
-import styled from "@emotion/styled";
-import { Text } from ".";
-
-const Container = styled.div`
-  border: 1px solid var(--color-dark);
-  margin-bottom: var(--spacing-y-sm);
-  padding: var(--spacing-y-sm) var(--spacing-x-sm) 0;
-
-  &:focus {
-    outline: 0;
-    box-shadow: 0 0 0 2px var(--color-dark);
-  }
-
-  &:focus:not(:focus-visible) {
-    box-shadow: none;
-  }
-`;
-
-const Message = styled.div`
-  border: 3px dashed var(--color-mid-grey);
-  padding: var(--spacing-y-md) var(--spacing-x-sm);
-  margin-bottom: var(--spacing-y-sm);
-  text-align: center;
-`;
-
-const Files = styled.div`
-  margin-bottom: var(--spacing-y-sm);
-`;
-
-const List = styled.ul`
-  margin: 0 0 var(--spacing-y-sm);
-  list-style: circle;
-`;
-
-export default function CustomDropzone({ name, files, setFiles, ...other }) {
-  const [fileList, setFileList] = useState([]);
-  const onDrop = useCallback(acceptedFiles => {
-    setFileList(acceptedFiles.map(file => file.path));
-    if (acceptedFiles.length > 1) {
-      const zip = new JSZip();
-      acceptedFiles.forEach(file => zip.file(file.name, file));
-      zip.generateAsync({ type: "blob" }).then(blob => {
-        const zippedFiles = new File([blob], "files.zip", {
-          lastModified: Date.now(),
-          type: "application/zip"
-        });
-        setFiles(zippedFiles);
-      });
-    } else {
-      setFiles(acceptedFiles[0]);
-    }
-  }, []);
-  const { getRootProps, getInputProps, isDragActive } = useDropzone({
-    accept: "image/jpeg, image/png",
-    maxFiles: 5,
-    onDrop
-  });
-  return (
-    <Container {...getRootProps()} {...other}>
-      <input name={name} {...getInputProps()} />
-      <Message>
-        {isDragActive ? (
-          <Text noMargin>Drop the images here</Text>
-        ) : (
-          <>
-            <Text noMargin>
-              Drop your images here, or click to select the files
-            </Text>
-            <Text size="xs" textStyle="italic" noMargin>
-              (5 files maximum, *.jpg and *.png only)
-            </Text>
-          </>
-        )}
-      </Message>
-      {fileList.length > 0 && (
-        <Files>
-          <Text size="sm" noMargin>
-            Files added:
-          </Text>
-          <List>
-            {fileList.map(file => (
-              <li key={file}>
-                <Text size="sm" noMargin>
-                  {file}
-                </Text>
-              </li>
-            ))}
-          </List>
-        </Files>
-      )}
-    </Container>
-  );
-}

src/components/index.js

@@ -1,7 +1,6 @@
 export { default as Button } from "./button";
 export { default as Card } from "./card";
 export { default as Content } from "./content";
-export { default as CustomDropzone } from "./custom-dropzone";
 export { default as CustomGallery } from "./custom-gallery";
 export { default as CustomSlick } from "./custom-slick";
 export { default as Footer } from "./footer";