diff --git a/package-lock.json b/package-lock.json index b289b87..dac3b73 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17,6 +17,10 @@ "@reduxjs/toolkit": "^1.8.1", "@remirror/pm": "^1.0.16", "@remirror/react": "^1.0.34", + "@rpldy/upload-button": "^1.0.1", + "@rpldy/upload-drop-zone": "^1.0.1", + "@rpldy/upload-preview": "^1.0.1", + "@rpldy/uploady": "^1.0.1", "@shopify/react-web-worker": "^5.0.1", "@szhsin/react-menu": "^3.0.2", "@testing-library/jest-dom": "^5.16.4", @@ -6937,6 +6941,156 @@ "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.39.tgz", "integrity": "sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==" }, + "node_modules/@rpldy/life-events": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@rpldy/life-events/-/life-events-1.0.1.tgz", + "integrity": "sha512-z9b8Yi1jq4/Um0BQJVsKwwBps8jB+X6UMJXU3dG7Q4rHe7rIiAQw4fCjN5W3L4b9JF9jTs9yX+X7ouWvBLkPVw==", + "dependencies": { + "@rpldy/shared": "^1.0.1" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/react-uploady" + } + }, + "node_modules/@rpldy/sender": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@rpldy/sender/-/sender-1.0.1.tgz", + "integrity": "sha512-5lGB2uPP22xESYhXdqzKKqZTtS03e0Gi9xx+1mu3XLEpUH7uu55dUMa8CT1cOzLM94JWwaS3fEQG+yB3n9Q7HQ==", + "dependencies": { + "@rpldy/shared": "^1.0.1" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/react-uploady" + } + }, + "node_modules/@rpldy/shared": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@rpldy/shared/-/shared-1.0.1.tgz", + "integrity": "sha512-22R1ZI+J4vvD6JhHlevxYwn6PxSZ2eXmP1mHxkW/7MHgTWgcKD2xBhl2khfjub64rqnhhiU1KDumhAWEO3GoAw==", + "dependencies": { + "invariant": "^2.2.4", + "just-throttle": "^1.1.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/react-uploady" + } + }, + "node_modules/@rpldy/shared-ui": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@rpldy/shared-ui/-/shared-ui-1.0.1.tgz", + "integrity": "sha512-pEKKifp4srk8vWyV7TAmpMRz5Dx66YcjOggP40ZZ7TV+CQfjY+b8TY1zx48ptakHqdpbG6Qzz0+OaA+VrOd3mA==", + "dependencies": { + "@rpldy/shared": "^1.0.1", + "@rpldy/uploader": "^1.0.1" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/react-uploady" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, + "node_modules/@rpldy/simple-state": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@rpldy/simple-state/-/simple-state-1.0.1.tgz", + "integrity": "sha512-ku/WBl2RFCqMORGEL9/qklMTVN92mqaLbQAY7JtS+IhpG3hfIzwMEXh1eVAs8bpSU2nrsp2SeR1ykyxU8aFWiw==", + "dependencies": { + "@rpldy/shared": "^1.0.1" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/react-uploady" + } + }, + "node_modules/@rpldy/upload-button": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@rpldy/upload-button/-/upload-button-1.0.1.tgz", + "integrity": "sha512-HuJuWlI9xljD7rQAmL5kEf40sOLZs8KF4VQCaj0y8+ErnEblmvjh/pSuRp+QgXVPT5NYrCq2YXSqOK9UYTBdsA==", + "dependencies": { + "@rpldy/shared-ui": "^1.0.1" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/react-uploady" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, + "node_modules/@rpldy/upload-drop-zone": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@rpldy/upload-drop-zone/-/upload-drop-zone-1.0.1.tgz", + "integrity": "sha512-B6fhOuIrzCQhHKal+hoGkiubEVxjzFPja9RoYd5dOtaZ7aMwmTX5dtFgVyaL1hjit7H0npHkD6v27b4K6snCXw==", + "dependencies": { + "@rpldy/shared-ui": "^1.0.1", + "html-dir-content": "^0.3.2" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/react-uploady" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, + "node_modules/@rpldy/upload-preview": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@rpldy/upload-preview/-/upload-preview-1.0.1.tgz", + "integrity": "sha512-Cq4+9fdgV2VRG4MsD9gnQ6AdRC4hMgPM4o88Iq7ifS5cDKNZa3hPVauSN39VpcoOZca1rDrdVslp9eStqmDTBg==", + "dependencies": { + "@rpldy/shared": "^1.0.1", + "@rpldy/shared-ui": "^1.0.1" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/react-uploady" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, + "node_modules/@rpldy/uploader": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@rpldy/uploader/-/uploader-1.0.1.tgz", + "integrity": "sha512-QuFvKu/xdCtiQU8Szx/pH/3MIJvnTMtDlmN5P62GuHrgUJw9SypZCCv4hCLuq1LuHs7ZENplToPjvj3pscYFdA==", + "dependencies": { + "@rpldy/life-events": "^1.0.1", + "@rpldy/sender": "^1.0.1", + "@rpldy/shared": "^1.0.1", + "@rpldy/simple-state": "^1.0.1" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/react-uploady" + } + }, + "node_modules/@rpldy/uploady": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@rpldy/uploady/-/uploady-1.0.1.tgz", + "integrity": "sha512-dwyNdYVy/wtioFfMUDsuAuHKKMi2/zMzKaiuOFGgPpx+3a9cVnbORNW/RcAMO6fVYLQgS4VxnqNSdnjS2m6buw==", + "dependencies": { + "@rpldy/life-events": "^1.0.1", + "@rpldy/shared": "^1.0.1", + "@rpldy/shared-ui": "^1.0.1", + "@rpldy/uploader": "^1.0.1" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/react-uploady" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, "node_modules/@rushstack/eslint-patch": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.1.3.tgz", @@ -27165,6 +27319,11 @@ "safe-buffer": "~5.1.0" } }, + "node_modules/html-dir-content": { + "version": "0.3.2", + "resolved": "https://registry.npmjs.org/html-dir-content/-/html-dir-content-0.3.2.tgz", + "integrity": "sha512-a1EJZbvBGmmFwk9VxFhEgaHkyXUXKTkw0jr0FCvXKCqgzO1H0wbFQbbzRA6FhR3twxAyjqVc80bzGHEmKrYsSw==" + }, "node_modules/html-encoding-sniffer": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-2.0.1.tgz", @@ -27779,7 +27938,6 @@ "version": "2.2.4", "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz", "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==", - "dev": true, "dependencies": { "loose-envify": "^1.0.0" } @@ -30938,6 +31096,11 @@ "node": ">=8" } }, + "node_modules/just-throttle": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/just-throttle/-/just-throttle-1.1.0.tgz", + "integrity": "sha512-iePC/13XYX1Tyn9C6jY+DG3UEejkDvrKsw5xxgGhtGUwYWmoJm4CoKexscBKELOu3FTyCDzjr21ZJ67AXnz+bg==" + }, "node_modules/jwa": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/jwa/-/jwa-1.4.1.tgz", @@ -75915,6 +76078,96 @@ } } }, + "@rpldy/life-events": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@rpldy/life-events/-/life-events-1.0.1.tgz", + "integrity": "sha512-z9b8Yi1jq4/Um0BQJVsKwwBps8jB+X6UMJXU3dG7Q4rHe7rIiAQw4fCjN5W3L4b9JF9jTs9yX+X7ouWvBLkPVw==", + "requires": { + "@rpldy/shared": "^1.0.1" + } + }, + "@rpldy/sender": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@rpldy/sender/-/sender-1.0.1.tgz", + "integrity": "sha512-5lGB2uPP22xESYhXdqzKKqZTtS03e0Gi9xx+1mu3XLEpUH7uu55dUMa8CT1cOzLM94JWwaS3fEQG+yB3n9Q7HQ==", + "requires": { + "@rpldy/shared": "^1.0.1" + } + }, + "@rpldy/shared": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@rpldy/shared/-/shared-1.0.1.tgz", + "integrity": "sha512-22R1ZI+J4vvD6JhHlevxYwn6PxSZ2eXmP1mHxkW/7MHgTWgcKD2xBhl2khfjub64rqnhhiU1KDumhAWEO3GoAw==", + "requires": { + "invariant": "^2.2.4", + "just-throttle": "^1.1.0" + } + }, + "@rpldy/shared-ui": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@rpldy/shared-ui/-/shared-ui-1.0.1.tgz", + "integrity": "sha512-pEKKifp4srk8vWyV7TAmpMRz5Dx66YcjOggP40ZZ7TV+CQfjY+b8TY1zx48ptakHqdpbG6Qzz0+OaA+VrOd3mA==", + "requires": { + "@rpldy/shared": "^1.0.1", + "@rpldy/uploader": "^1.0.1" + } + }, + "@rpldy/simple-state": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@rpldy/simple-state/-/simple-state-1.0.1.tgz", + "integrity": "sha512-ku/WBl2RFCqMORGEL9/qklMTVN92mqaLbQAY7JtS+IhpG3hfIzwMEXh1eVAs8bpSU2nrsp2SeR1ykyxU8aFWiw==", + "requires": { + "@rpldy/shared": "^1.0.1" + } + }, + "@rpldy/upload-button": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@rpldy/upload-button/-/upload-button-1.0.1.tgz", + "integrity": "sha512-HuJuWlI9xljD7rQAmL5kEf40sOLZs8KF4VQCaj0y8+ErnEblmvjh/pSuRp+QgXVPT5NYrCq2YXSqOK9UYTBdsA==", + "requires": { + "@rpldy/shared-ui": "^1.0.1" + } + }, + "@rpldy/upload-drop-zone": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@rpldy/upload-drop-zone/-/upload-drop-zone-1.0.1.tgz", + "integrity": "sha512-B6fhOuIrzCQhHKal+hoGkiubEVxjzFPja9RoYd5dOtaZ7aMwmTX5dtFgVyaL1hjit7H0npHkD6v27b4K6snCXw==", + "requires": { + "@rpldy/shared-ui": "^1.0.1", + "html-dir-content": "^0.3.2" + } + }, + "@rpldy/upload-preview": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@rpldy/upload-preview/-/upload-preview-1.0.1.tgz", + "integrity": "sha512-Cq4+9fdgV2VRG4MsD9gnQ6AdRC4hMgPM4o88Iq7ifS5cDKNZa3hPVauSN39VpcoOZca1rDrdVslp9eStqmDTBg==", + "requires": { + "@rpldy/shared": "^1.0.1", + "@rpldy/shared-ui": "^1.0.1" + } + }, + "@rpldy/uploader": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@rpldy/uploader/-/uploader-1.0.1.tgz", + "integrity": "sha512-QuFvKu/xdCtiQU8Szx/pH/3MIJvnTMtDlmN5P62GuHrgUJw9SypZCCv4hCLuq1LuHs7ZENplToPjvj3pscYFdA==", + "requires": { + "@rpldy/life-events": "^1.0.1", + "@rpldy/sender": "^1.0.1", + "@rpldy/shared": "^1.0.1", + "@rpldy/simple-state": "^1.0.1" + } + }, + "@rpldy/uploady": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@rpldy/uploady/-/uploady-1.0.1.tgz", + "integrity": "sha512-dwyNdYVy/wtioFfMUDsuAuHKKMi2/zMzKaiuOFGgPpx+3a9cVnbORNW/RcAMO6fVYLQgS4VxnqNSdnjS2m6buw==", + "requires": { + "@rpldy/life-events": "^1.0.1", + "@rpldy/shared": "^1.0.1", + "@rpldy/shared-ui": "^1.0.1", + "@rpldy/uploader": "^1.0.1" + } + }, "@rushstack/eslint-patch": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.1.3.tgz", @@ -91882,6 +92135,11 @@ } } }, + "html-dir-content": { + "version": "0.3.2", + "resolved": "https://registry.npmjs.org/html-dir-content/-/html-dir-content-0.3.2.tgz", + "integrity": "sha512-a1EJZbvBGmmFwk9VxFhEgaHkyXUXKTkw0jr0FCvXKCqgzO1H0wbFQbbzRA6FhR3twxAyjqVc80bzGHEmKrYsSw==" + }, "html-encoding-sniffer": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-2.0.1.tgz", @@ -92331,7 +92589,6 @@ "version": "2.2.4", "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz", "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==", - "dev": true, "requires": { "loose-envify": "^1.0.0" } @@ -94625,6 +94882,11 @@ "integrity": "sha512-pBxcB3LFc8QVgdggvZWyeys+hnrNWg4OcZIU/1X59k5jQdLBlCsYGRQaz234SqoRLTCgMH00fY0xRJH+F9METQ==", "dev": true }, + "just-throttle": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/just-throttle/-/just-throttle-1.1.0.tgz", + "integrity": "sha512-iePC/13XYX1Tyn9C6jY+DG3UEejkDvrKsw5xxgGhtGUwYWmoJm4CoKexscBKELOu3FTyCDzjr21ZJ67AXnz+bg==" + }, "jwa": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/jwa/-/jwa-1.4.1.tgz", diff --git a/package.json b/package.json index 5bb2074..3292acf 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,10 @@ "@reduxjs/toolkit": "^1.8.1", "@remirror/pm": "^1.0.16", "@remirror/react": "^1.0.34", + "@rpldy/upload-button": "^1.0.1", + "@rpldy/upload-drop-zone": "^1.0.1", + "@rpldy/upload-preview": "^1.0.1", + "@rpldy/uploady": "^1.0.1", "@shopify/react-web-worker": "^5.0.1", "@szhsin/react-menu": "^3.0.2", "@testing-library/jest-dom": "^5.16.4", diff --git a/src/Components/Inputs/FileUploadInput/FileUploadInput.stories.tsx b/src/Components/Inputs/FileUploadInput/FileUploadInput.stories.tsx new file mode 100644 index 0000000..ba0cf5f --- /dev/null +++ b/src/Components/Inputs/FileUploadInput/FileUploadInput.stories.tsx @@ -0,0 +1,16 @@ +import React from 'react' +import { ComponentStory, ComponentMeta } from '@storybook/react'; +import FileUploadInput from './FileUploadInput'; + +export default { + title: 'Shared/Inputs/File Upload Input', + component: FileUploadInput, + +} as ComponentMeta; + +const Template: ComponentStory = (args) => + + +export const DefaultButton = Template.bind({}); +DefaultButton.args = { +} \ No newline at end of file diff --git a/src/Components/Inputs/FileUploadInput/FileUploadInput.tsx b/src/Components/Inputs/FileUploadInput/FileUploadInput.tsx new file mode 100644 index 0000000..be68418 --- /dev/null +++ b/src/Components/Inputs/FileUploadInput/FileUploadInput.tsx @@ -0,0 +1,142 @@ +import Uploady, { useUploady, useRequestPreSend, UPLOADER_EVENTS } from "@rpldy/uploady"; +import { asUploadButton } from "@rpldy/upload-button"; +import Button from "src/Components/Button/Button"; +import { fetchUploadUrl } from "./fetch-upload-img-url"; +import ImagePreviews from "./ImagePreviews"; +import { FaImage } from "react-icons/fa"; +import UploadDropZone from "@rpldy/upload-drop-zone"; +import { forwardRef, useCallback } from "react"; +import styles from './styles.module.scss' +import { MdFileUpload } from "react-icons/md"; +import { AiOutlineCloudUpload } from "react-icons/ai"; +import { motion } from "framer-motion"; + +interface Props { + url: string; +} + +const UploadBtn = asUploadButton((props: any) => { + + useRequestPreSend(async (data) => { + + const filename = data.items?.[0].file.name ?? '' + + const url = await fetchUploadUrl({ filename }); + return { + options: { + destination: { + url + } + } + } + }) + + // const handleClick = async () => { + // // Make a request to get the url + // try { + // var bodyFormData = new FormData(); + // bodyFormData.append('requireSignedURLs', "false"); + // const res = await axios({ + // url: 'https://cors-anywhere.herokuapp.com/https://api.cloudflare.com/client/v4/accounts/783da4f06e5fdb9012c0632959a6f5b3/images/v2/direct_upload', + // method: 'POST', + // data: bodyFormData, + // headers: { + // "Authorization": "Bearer Xx2-CdsTliYkq6Ayz-1GX4CZubdQVxMwOSDbajP0", + // } + // }) + // uploady.upload(res.data.result.uploadUrl, { + // destination: res.data.result.uploadUrl + // }) + // } catch (error) { + // console.log(error); + + // } + + + // // make the request with the files + // // uploady.upload() + // } + + return +}); + + +const DropZone = forwardRef((props, ref) => { + const { onClick, ...buttonProps } = props; + + + useRequestPreSend(async (data) => { + + const filename = data.items?.[0].file.name ?? '' + + const url = await fetchUploadUrl({ filename }); + return { + options: { + destination: { + url + } + } + } + }) + + const onZoneClick = useCallback( + (e: any) => { + if (onClick) { + onClick(e); + } + }, + [onClick] + ); + + return +
+ Drop your files here or +
+ + + Drop it to upload + + +}) + +const DropZoneButton = asUploadButton(DropZone); + + +export default function FileUploadInput(props: Props) { + return ( + { + const { id, filename, variants } = item?.uploadResponse?.data?.result ?? {} + if (id) { + console.log(id, filename, variants); + } + } + }} + > + + {/* */} + + + ) +} diff --git a/src/Components/Inputs/FileUploadInput/ImagePreviews.tsx b/src/Components/Inputs/FileUploadInput/ImagePreviews.tsx new file mode 100644 index 0000000..e28b375 --- /dev/null +++ b/src/Components/Inputs/FileUploadInput/ImagePreviews.tsx @@ -0,0 +1,92 @@ +import UploadPreview, { PreviewComponentProps, PreviewMethods } from '@rpldy/upload-preview' +import { useAbortItem, useItemAbortListener, useItemCancelListener, useItemErrorListener, useItemProgressListener } from '@rpldy/uploady'; +import React, { useState } from 'react' +import { RotatingLines } from 'react-loader-spinner'; + +export default function ImagePreviews() { + return ( +
+ +
+ ) +} + +function CustomImagePreview({ id, url }: PreviewComponentProps) { + + const [progress, setProgress] = useState(0); + const [itemState, setItemState] = useState(STATES.PROGRESS); + + + useItemProgressListener(item => { + if (item.completed > progress) { + setProgress(() => item.completed); + + if (item.completed === 100) { + setItemState(STATES.DONE) + } else { + setItemState(STATES.PROGRESS) + } + } + }, id); + + + + useItemAbortListener(item => { + setItemState(STATES.CANCELLED); + }, id); + + + useItemCancelListener(item => { + setItemState(STATES.CANCELLED); + }, id); + + useItemErrorListener(item => { + setItemState(STATES.ERROR); + }, id); + + return
+ +
+
+ {itemState === STATES.PROGRESS && +
+ +
} + {itemState === STATES.ERROR && +
+ Failed... +
} + {itemState === STATES.CANCELLED && +
+ Cancelled +
} +
; +}; + +const STATES = { + PROGRESS: "PROGRESS", + DONE: "DONE", + CANCELLED: "CANCELLED", + ERROR: "ERROR" +}; + +const STATE_COLORS = { + [STATES.PROGRESS]: "#f4e4a4", + [STATES.DONE]: "#a5f7b3", + [STATES.CANCELLED]: "#f7cdcd", + [STATES.ERROR]: "#ee4c4c" +}; \ No newline at end of file diff --git a/src/Components/Inputs/FileUploadInput/fetch-upload-img-url.tsx b/src/Components/Inputs/FileUploadInput/fetch-upload-img-url.tsx new file mode 100644 index 0000000..081677d --- /dev/null +++ b/src/Components/Inputs/FileUploadInput/fetch-upload-img-url.tsx @@ -0,0 +1,25 @@ +import axios from "axios"; +import { NotificationsService } from "src/services"; + +export async function fetchUploadUrl(options?: Partial<{ filename: string }>) { + + const { filename } = options ?? {} + + try { + const bodyFormData = new FormData(); + bodyFormData.append('requireSignedURLs', "false"); + const res = await axios({ + url: 'https://cors-anywhere.herokuapp.com/https://api.cloudflare.com/client/v4/accounts/783da4f06e5fdb9012c0632959a6f5b3/images/v2/direct_upload', + method: 'POST', + data: bodyFormData, + headers: { + "Authorization": "Bearer Xx2-CdsTliYkq6Ayz-1GX4CZubdQVxMwOSDbajP0", + } + }) + return res.data.result.uploadURL as string; + } catch (error) { + console.log(error); + NotificationsService.error("A network error happened.") + return "couldnt fetch upload url"; + } +} \ No newline at end of file diff --git a/src/Components/Inputs/FileUploadInput/styles.module.scss b/src/Components/Inputs/FileUploadInput/styles.module.scss new file mode 100644 index 0000000..217ca39 --- /dev/null +++ b/src/Components/Inputs/FileUploadInput/styles.module.scss @@ -0,0 +1,25 @@ +.zone { + background-color: #f2f4f7; + border-color: #e4e7ec; + + .active_content { + display: none; + } + + .idle_content { + display: block; + } + + &.active { + background-color: #b3a0ff; + border-color: #9e88ff; + + .active_content { + display: block; + } + + .idle_content { + display: none; + } + } +} diff --git a/src/utils/storybook/decorators.tsx b/src/utils/storybook/decorators.tsx index 4170b69..87f8df8 100644 --- a/src/utils/storybook/decorators.tsx +++ b/src/utils/storybook/decorators.tsx @@ -18,6 +18,8 @@ import { ApolloProvider } from '@apollo/client'; import { apolloClient } from '../apollo'; import { FormProvider, useForm, UseFormProps } from 'react-hook-form'; import ModalsContainer from 'src/Components/Modals/ModalsContainer/ModalsContainer'; +import { ToastContainer } from 'react-toastify'; +import { NotificationsService } from 'src/services'; // Enable the Mocks Service Worker @@ -63,6 +65,11 @@ export const WrapperDecorator: DecoratorFn = (Story, options) => { effect='solid' delayShow={1000} /> + ); }