diff --git a/Captura de pantalla (3946).png b/Captura de pantalla (3946).png
new file mode 100644
index 0000000000000000000000000000000000000000..e42ce40c63d0fdaaa55b7bb55d990e031b5c5670
Binary files /dev/null and b/Captura de pantalla (3946).png differ
diff --git a/README.md b/README.md
index 58beeaccd87e230076cab531b8f418f40b6d1aeb..aec5558d65dc63104d00b947feb792e66e838623 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,7 @@
-# Getting Started with Create React App
+# Files ui
+
+<p align="center">
+<img src="https://user-images.githubusercontent.com/43678736/202515913-dceafe68-d99b-42c0-b797-7057008928e0.png" width="150" height="150" alt="fui-logo"/></p>
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
diff --git a/guides.txt b/guides.txt
new file mode 100644
index 0000000000000000000000000000000000000000..07e189b4ffaa69418eb0f8fc2cdcaccf8d2c1500
--- /dev/null
+++ b/guides.txt
@@ -0,0 +1,21 @@
+We're kicking it off with the most powerful
+ Data Grid on the market..
+
+
+
+
+Production-ready
+in minutes
+
+
+Fully built
+templates for your app.
+
+
+Superiorly designed software
+
+Superiorly designed software
+
+
+
+
diff --git a/open-vs-code-here.cmd b/open-vs-code-here.cmd
new file mode 100644
index 0000000000000000000000000000000000000000..952130940b3916f4eb16f9cd32fd92dfdfc580fa
--- /dev/null
+++ b/open-vs-code-here.cmd
@@ -0,0 +1 @@
+code . && exit
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index d63a07647ceb138021e3f8f6213f450eb0696a19..e0649d8a168c0f3863e9c5a1240d7cab842d645b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,12 +8,25 @@
"name": "files-ui-webpage",
"version": "0.1.0",
"dependencies": {
+ "@dynamicss/dynamicss": "^2.2.8",
+ "@emotion/react": "^11.10.5",
+ "@emotion/styled": "^11.10.5",
+ "@mui/icons-material": "^5.10.14",
+ "@mui/material": "^5.10.14",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
+ "@types/react": "^18.0.25",
+ "axios": "^1.3.1",
+ "node-sass": "^7.0.3",
+ "rc-highlight": "^2.3.4",
"react": "^18.2.0",
"react-dom": "^18.2.0",
+ "react-router": "^6.4.3",
+ "react-router-dom": "^6.4.3",
"react-scripts": "5.0.1",
+ "sweetalert": "^2.1.2",
+ "typescript": "^4.9.3",
"web-vitals": "^2.1.4"
}
},
@@ -2132,6 +2145,176 @@
"postcss-selector-parser": "^6.0.10"
}
},
+ "node_modules/@dynamicss/dynamicss": {
+ "version": "2.2.8",
+ "resolved": "https://registry.npmjs.org/@dynamicss/dynamicss/-/dynamicss-2.2.8.tgz",
+ "integrity": "sha512-e6hrGUydr8f+c9E/9fHFSG5LoSLdq/MdZXXfbzEDWIVuzKF2hcdxZE7nHNqUNF2htw1mZ17Pyoshu3A6kFEeFA==",
+ "hasInstallScript": true
+ },
+ "node_modules/@emotion/babel-plugin": {
+ "version": "11.10.5",
+ "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.10.5.tgz",
+ "integrity": "sha512-xE7/hyLHJac7D2Ve9dKroBBZqBT7WuPQmWcq7HSGb84sUuP4mlOWoB8dvVfD9yk5DHkU1m6RW7xSoDtnQHNQeA==",
+ "dependencies": {
+ "@babel/helper-module-imports": "^7.16.7",
+ "@babel/plugin-syntax-jsx": "^7.17.12",
+ "@babel/runtime": "^7.18.3",
+ "@emotion/hash": "^0.9.0",
+ "@emotion/memoize": "^0.8.0",
+ "@emotion/serialize": "^1.1.1",
+ "babel-plugin-macros": "^3.1.0",
+ "convert-source-map": "^1.5.0",
+ "escape-string-regexp": "^4.0.0",
+ "find-root": "^1.1.0",
+ "source-map": "^0.5.7",
+ "stylis": "4.1.3"
+ },
+ "peerDependencies": {
+ "@babel/core": "^7.0.0"
+ }
+ },
+ "node_modules/@emotion/babel-plugin/node_modules/escape-string-regexp": {
+ "version": "4.0.0",
+ "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+ "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+ "engines": {
+ "node": ">=10"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/sindresorhus"
+ }
+ },
+ "node_modules/@emotion/babel-plugin/node_modules/source-map": {
+ "version": "0.5.7",
+ "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+ "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==",
+ "engines": {
+ "node": ">=0.10.0"
+ }
+ },
+ "node_modules/@emotion/cache": {
+ "version": "11.10.5",
+ "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.10.5.tgz",
+ "integrity": "sha512-dGYHWyzTdmK+f2+EnIGBpkz1lKc4Zbj2KHd4cX3Wi8/OWr5pKslNjc3yABKH4adRGCvSX4VDC0i04mrrq0aiRA==",
+ "dependencies": {
+ "@emotion/memoize": "^0.8.0",
+ "@emotion/sheet": "^1.2.1",
+ "@emotion/utils": "^1.2.0",
+ "@emotion/weak-memoize": "^0.3.0",
+ "stylis": "4.1.3"
+ }
+ },
+ "node_modules/@emotion/hash": {
+ "version": "0.9.0",
+ "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.0.tgz",
+ "integrity": "sha512-14FtKiHhy2QoPIzdTcvh//8OyBlknNs2nXRwIhG904opCby3l+9Xaf/wuPvICBF0rc1ZCNBd3nKe9cd2mecVkQ=="
+ },
+ "node_modules/@emotion/is-prop-valid": {
+ "version": "1.2.0",
+ "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.0.tgz",
+ "integrity": "sha512-3aDpDprjM0AwaxGE09bOPkNxHpBd+kA6jty3RnaEXdweX1DF1U3VQpPYb0g1IStAuK7SVQ1cy+bNBBKp4W3Fjg==",
+ "dependencies": {
+ "@emotion/memoize": "^0.8.0"
+ }
+ },
+ "node_modules/@emotion/memoize": {
+ "version": "0.8.0",
+ "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.0.tgz",
+ "integrity": "sha512-G/YwXTkv7Den9mXDO7AhLWkE3q+I92B+VqAE+dYG4NGPaHZGvt3G8Q0p9vmE+sq7rTGphUbAvmQ9YpbfMQGGlA=="
+ },
+ "node_modules/@emotion/react": {
+ "version": "11.10.5",
+ "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.10.5.tgz",
+ "integrity": "sha512-TZs6235tCJ/7iF6/rvTaOH4oxQg2gMAcdHemjwLKIjKz4rRuYe1HJ2TQJKnAcRAfOUDdU8XoDadCe1rl72iv8A==",
+ "dependencies": {
+ "@babel/runtime": "^7.18.3",
+ "@emotion/babel-plugin": "^11.10.5",
+ "@emotion/cache": "^11.10.5",
+ "@emotion/serialize": "^1.1.1",
+ "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0",
+ "@emotion/utils": "^1.2.0",
+ "@emotion/weak-memoize": "^0.3.0",
+ "hoist-non-react-statics": "^3.3.1"
+ },
+ "peerDependencies": {
+ "@babel/core": "^7.0.0",
+ "react": ">=16.8.0"
+ },
+ "peerDependenciesMeta": {
+ "@babel/core": {
+ "optional": true
+ },
+ "@types/react": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@emotion/serialize": {
+ "version": "1.1.1",
+ "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.1.1.tgz",
+ "integrity": "sha512-Zl/0LFggN7+L1liljxXdsVSVlg6E/Z/olVWpfxUTxOAmi8NU7YoeWeLfi1RmnB2TATHoaWwIBRoL+FvAJiTUQA==",
+ "dependencies": {
+ "@emotion/hash": "^0.9.0",
+ "@emotion/memoize": "^0.8.0",
+ "@emotion/unitless": "^0.8.0",
+ "@emotion/utils": "^1.2.0",
+ "csstype": "^3.0.2"
+ }
+ },
+ "node_modules/@emotion/sheet": {
+ "version": "1.2.1",
+ "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.2.1.tgz",
+ "integrity": "sha512-zxRBwl93sHMsOj4zs+OslQKg/uhF38MB+OMKoCrVuS0nyTkqnau+BM3WGEoOptg9Oz45T/aIGs1qbVAsEFo3nA=="
+ },
+ "node_modules/@emotion/styled": {
+ "version": "11.10.5",
+ "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.10.5.tgz",
+ "integrity": "sha512-8EP6dD7dMkdku2foLoruPCNkRevzdcBaY6q0l0OsbyJK+x8D9HWjX27ARiSIKNF634hY9Zdoedh8bJCiva8yZw==",
+ "dependencies": {
+ "@babel/runtime": "^7.18.3",
+ "@emotion/babel-plugin": "^11.10.5",
+ "@emotion/is-prop-valid": "^1.2.0",
+ "@emotion/serialize": "^1.1.1",
+ "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0",
+ "@emotion/utils": "^1.2.0"
+ },
+ "peerDependencies": {
+ "@babel/core": "^7.0.0",
+ "@emotion/react": "^11.0.0-rc.0",
+ "react": ">=16.8.0"
+ },
+ "peerDependenciesMeta": {
+ "@babel/core": {
+ "optional": true
+ },
+ "@types/react": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@emotion/unitless": {
+ "version": "0.8.0",
+ "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.0.tgz",
+ "integrity": "sha512-VINS5vEYAscRl2ZUDiT3uMPlrFQupiKgHz5AA4bCH1miKBg4qtwkim1qPmJj/4WG6TreYMY111rEFsjupcOKHw=="
+ },
+ "node_modules/@emotion/use-insertion-effect-with-fallbacks": {
+ "version": "1.0.0",
+ "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.0.tgz",
+ "integrity": "sha512-1eEgUGmkaljiBnRMTdksDV1W4kUnmwgp7X9G8B++9GYwl1lUdqSndSriIrTJ0N7LQaoauY9JJ2yhiOYK5+NI4A==",
+ "peerDependencies": {
+ "react": ">=16.8.0"
+ }
+ },
+ "node_modules/@emotion/utils": {
+ "version": "1.2.0",
+ "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.2.0.tgz",
+ "integrity": "sha512-sn3WH53Kzpw8oQ5mgMmIzzyAaH2ZqFEbozVVBSYp538E06OSE6ytOp7pRAjNQR+Q/orwqdQYJSe2m3hCOeznkw=="
+ },
+ "node_modules/@emotion/weak-memoize": {
+ "version": "0.3.0",
+ "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.3.0.tgz",
+ "integrity": "sha512-AHPmaAx+RYfZz0eYu6Gviiagpmiyw98ySSlQvCUhVGDRtDFe4DBS0x1bSjdF3gqUDYOczB+yYvBTtEylYSdRhg=="
+ },
"node_modules/@eslint/eslintrc": {
"version": "1.3.3",
"resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.3.3.tgz",
@@ -2195,6 +2378,11 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
+ "node_modules/@gar/promisify": {
+ "version": "1.1.3",
+ "resolved": "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.3.tgz",
+ "integrity": "sha512-k2Ty1JcVojjJFwrg/ThKi2ujJ7XNLYaFGNB/bWT9wGR+oSMJHMa5w+CUq6p/pVrKeNNgA7pCqEcjSnHVoqJQFw=="
+ },
"node_modules/@humanwhocodes/config-array": {
"version": "0.11.7",
"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.7.tgz",
@@ -2976,6 +3164,262 @@
"resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz",
"integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A=="
},
+ "node_modules/@mui/base": {
+ "version": "5.0.0-alpha.106",
+ "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.106.tgz",
+ "integrity": "sha512-xJQQtwPCPwr6hGWTBdvDwHYwExn3Bw7nPQkN8Fuz8kHpZqoMVWQvvaFS557AIkkI2AFLV3DxVIMjbCvrIntBWg==",
+ "dependencies": {
+ "@babel/runtime": "^7.20.1",
+ "@emotion/is-prop-valid": "^1.2.0",
+ "@mui/types": "^7.2.1",
+ "@mui/utils": "^5.10.14",
+ "@popperjs/core": "^2.11.6",
+ "clsx": "^1.2.1",
+ "prop-types": "^15.8.1",
+ "react-is": "^18.2.0"
+ },
+ "engines": {
+ "node": ">=12.0.0"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/mui"
+ },
+ "peerDependencies": {
+ "@types/react": "^17.0.0 || ^18.0.0",
+ "react": "^17.0.0 || ^18.0.0",
+ "react-dom": "^17.0.0 || ^18.0.0"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@mui/base/node_modules/react-is": {
+ "version": "18.2.0",
+ "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
+ "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
+ },
+ "node_modules/@mui/core-downloads-tracker": {
+ "version": "5.10.14",
+ "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.10.14.tgz",
+ "integrity": "sha512-qLgIJNOR9Dre8JiZ/neVzOf4jf88J6YtOkQqugtMrleLjbfRVUSS4LWl9CSOjNq76quYdmYWnSDgfQqOooT2cQ==",
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/mui"
+ }
+ },
+ "node_modules/@mui/icons-material": {
+ "version": "5.10.14",
+ "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.10.14.tgz",
+ "integrity": "sha512-qtH60slQa+7MZRn6kyui8rKuoGDglPqaHX+pzBKNvd8JCOlrnfY5DmGGDdToTXyXl8xJ8nhANZbrbpg7UVKq/Q==",
+ "dependencies": {
+ "@babel/runtime": "^7.20.1"
+ },
+ "engines": {
+ "node": ">=12.0.0"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/mui"
+ },
+ "peerDependencies": {
+ "@mui/material": "^5.0.0",
+ "@types/react": "^17.0.0 || ^18.0.0",
+ "react": "^17.0.0 || ^18.0.0"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@mui/material": {
+ "version": "5.10.14",
+ "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.10.14.tgz",
+ "integrity": "sha512-HWzKVAykePMx54WtxVwZyL1W4k3xlHYIqwMw0CaXAvgB3UE9yjABZuuGr8vG5Z6CSNWamzd+s1x8u7pQPFl9og==",
+ "dependencies": {
+ "@babel/runtime": "^7.20.1",
+ "@mui/base": "5.0.0-alpha.106",
+ "@mui/core-downloads-tracker": "^5.10.14",
+ "@mui/system": "^5.10.14",
+ "@mui/types": "^7.2.1",
+ "@mui/utils": "^5.10.14",
+ "@types/react-transition-group": "^4.4.5",
+ "clsx": "^1.2.1",
+ "csstype": "^3.1.1",
+ "prop-types": "^15.8.1",
+ "react-is": "^18.2.0",
+ "react-transition-group": "^4.4.5"
+ },
+ "engines": {
+ "node": ">=12.0.0"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/mui"
+ },
+ "peerDependencies": {
+ "@emotion/react": "^11.5.0",
+ "@emotion/styled": "^11.3.0",
+ "@types/react": "^17.0.0 || ^18.0.0",
+ "react": "^17.0.0 || ^18.0.0",
+ "react-dom": "^17.0.0 || ^18.0.0"
+ },
+ "peerDependenciesMeta": {
+ "@emotion/react": {
+ "optional": true
+ },
+ "@emotion/styled": {
+ "optional": true
+ },
+ "@types/react": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@mui/material/node_modules/react-is": {
+ "version": "18.2.0",
+ "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
+ "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
+ },
+ "node_modules/@mui/private-theming": {
+ "version": "5.10.14",
+ "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.10.14.tgz",
+ "integrity": "sha512-3aIBe8WK65CwAPDY8nB11hYnzE1CZMymi76UnaFrA/DdGDwl5Y8F6uB+StKrkVmsqF1po7Mp2odqVkHj320gXw==",
+ "dependencies": {
+ "@babel/runtime": "^7.20.1",
+ "@mui/utils": "^5.10.14",
+ "prop-types": "^15.8.1"
+ },
+ "engines": {
+ "node": ">=12.0.0"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/mui"
+ },
+ "peerDependencies": {
+ "@types/react": "^17.0.0 || ^18.0.0",
+ "react": "^17.0.0 || ^18.0.0"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@mui/styled-engine": {
+ "version": "5.10.14",
+ "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.10.14.tgz",
+ "integrity": "sha512-bgKdM57ExogWpIfhL/ngSlzF4FhbH00vYF+Y5VALTob4uslFqje0xzoWmbfcCn4cZt2NXxZJIwhsq4vzo5itlw==",
+ "dependencies": {
+ "@babel/runtime": "^7.20.1",
+ "@emotion/cache": "^11.10.5",
+ "csstype": "^3.1.1",
+ "prop-types": "^15.8.1"
+ },
+ "engines": {
+ "node": ">=12.0.0"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/mui"
+ },
+ "peerDependencies": {
+ "@emotion/react": "^11.4.1",
+ "@emotion/styled": "^11.3.0",
+ "react": "^17.0.0 || ^18.0.0"
+ },
+ "peerDependenciesMeta": {
+ "@emotion/react": {
+ "optional": true
+ },
+ "@emotion/styled": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@mui/system": {
+ "version": "5.10.14",
+ "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.10.14.tgz",
+ "integrity": "sha512-2de7XCjRb1j8Od0Stmo0LwFMLpOMNT4wzfINuExXI1TVSuyxXIXUxiC5FEgJW3GMvf/a7SUR8VOiMoKlKWzukw==",
+ "dependencies": {
+ "@babel/runtime": "^7.20.1",
+ "@mui/private-theming": "^5.10.14",
+ "@mui/styled-engine": "^5.10.14",
+ "@mui/types": "^7.2.1",
+ "@mui/utils": "^5.10.14",
+ "clsx": "^1.2.1",
+ "csstype": "^3.1.1",
+ "prop-types": "^15.8.1"
+ },
+ "engines": {
+ "node": ">=12.0.0"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/mui"
+ },
+ "peerDependencies": {
+ "@emotion/react": "^11.5.0",
+ "@emotion/styled": "^11.3.0",
+ "@types/react": "^17.0.0 || ^18.0.0",
+ "react": "^17.0.0 || ^18.0.0"
+ },
+ "peerDependenciesMeta": {
+ "@emotion/react": {
+ "optional": true
+ },
+ "@emotion/styled": {
+ "optional": true
+ },
+ "@types/react": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@mui/types": {
+ "version": "7.2.1",
+ "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.1.tgz",
+ "integrity": "sha512-c5mSM7ivD8EsqK6HUi9hQPr5V7TJ/IRThUQ9nWNYPdhCGriTSQV4vL6DflT99LkM+wLiIS1rVjphpEWxERep7A==",
+ "peerDependencies": {
+ "@types/react": "*"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@mui/utils": {
+ "version": "5.10.14",
+ "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.10.14.tgz",
+ "integrity": "sha512-12p59+wDZpA++XVJmKwqsZmrA1nmUQ5d0a1yQWtcDjxNyER1EDzozYN/db+FY2i5ceQh2TynPTEwGms2mXDwFg==",
+ "dependencies": {
+ "@babel/runtime": "^7.20.1",
+ "@types/prop-types": "^15.7.5",
+ "@types/react-is": "^16.7.1 || ^17.0.0",
+ "prop-types": "^15.8.1",
+ "react-is": "^18.2.0"
+ },
+ "engines": {
+ "node": ">=12.0.0"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/mui"
+ },
+ "peerDependencies": {
+ "react": "^17.0.0 || ^18.0.0"
+ }
+ },
+ "node_modules/@mui/utils/node_modules/react-is": {
+ "version": "18.2.0",
+ "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
+ "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
+ },
"node_modules/@nicolo-ribaudo/eslint-scope-5-internals": {
"version": "5.1.1-v1",
"resolved": "https://registry.npmjs.org/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz",
@@ -3036,6 +3480,39 @@
"node": ">= 8"
}
},
+ "node_modules/@npmcli/fs": {
+ "version": "1.1.1",
+ "resolved": "https://registry.npmjs.org/@npmcli/fs/-/fs-1.1.1.tgz",
+ "integrity": "sha512-8KG5RD0GVP4ydEzRn/I4BNDuxDtqVbOdm8675T49OIG/NGhaK0pjPX7ZcDlvKYbA+ulvVK3ztfcF4uBdOxuJbQ==",
+ "dependencies": {
+ "@gar/promisify": "^1.0.1",
+ "semver": "^7.3.5"
+ }
+ },
+ "node_modules/@npmcli/move-file": {
+ "version": "1.1.2",
+ "resolved": "https://registry.npmjs.org/@npmcli/move-file/-/move-file-1.1.2.tgz",
+ "integrity": "sha512-1SUf/Cg2GzGDyaf15aR9St9TWlb+XvbZXWpDx8YKs7MLzMH/BCeopv+y9vzrzgkfykCGuWOlSu3mZhj2+FQcrg==",
+ "deprecated": "This functionality has been moved to @npmcli/fs",
+ "dependencies": {
+ "mkdirp": "^1.0.4",
+ "rimraf": "^3.0.2"
+ },
+ "engines": {
+ "node": ">=10"
+ }
+ },
+ "node_modules/@npmcli/move-file/node_modules/mkdirp": {
+ "version": "1.0.4",
+ "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
+ "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
+ "bin": {
+ "mkdirp": "bin/cmd.js"
+ },
+ "engines": {
+ "node": ">=10"
+ }
+ },
"node_modules/@pmmmwh/react-refresh-webpack-plugin": {
"version": "0.5.9",
"resolved": "https://registry.npmjs.org/@pmmmwh/react-refresh-webpack-plugin/-/react-refresh-webpack-plugin-0.5.9.tgz",
@@ -3085,6 +3562,23 @@
}
}
},
+ "node_modules/@popperjs/core": {
+ "version": "2.11.6",
+ "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.6.tgz",
+ "integrity": "sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw==",
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/popperjs"
+ }
+ },
+ "node_modules/@remix-run/router": {
+ "version": "1.0.3",
+ "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.0.3.tgz",
+ "integrity": "sha512-ceuyTSs7PZ/tQqi19YZNBc5X7kj1f8p+4DIyrcIYFY9h+hd1OKm4RqtiWldR9eGEvIiJfsqwM4BsuCtRIuEw6Q==",
+ "engines": {
+ "node": ">=14"
+ }
+ },
"node_modules/@rollup/plugin-babel": {
"version": "5.3.1",
"resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -4039,11 +4533,21 @@
"resolved": "https://registry.npmjs.org/@types/mime/-/mime-3.0.1.tgz",
"integrity": "sha512-Y4XFY5VJAuw0FgAqPNd6NNoV44jbq9Bz2L7Rh/J6jLTiHBSBJa9fxqQIvkIld4GsoDOcCbvzOUAbLPsSKKg+uA=="
},
+ "node_modules/@types/minimist": {
+ "version": "1.2.2",
+ "resolved": "https://registry.npmjs.org/@types/minimist/-/minimist-1.2.2.tgz",
+ "integrity": "sha512-jhuKLIRrhvCPLqwPcx6INqmKeiA5EWrsCOPhrlFSrbrmU4ZMPjj5Ul/oLCMDO98XRUIwVm78xICz4EPCektzeQ=="
+ },
"node_modules/@types/node": {
"version": "18.11.9",
"resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.9.tgz",
"integrity": "sha512-CRpX21/kGdzjOpFsZSkcrXMGIBWMGNIHXXBVFSH+ggkftxg+XYP20TESbh+zFvFj3EQOl5byk0HTRn1IL6hbqg=="
},
+ "node_modules/@types/normalize-package-data": {
+ "version": "2.4.1",
+ "resolved": "https://registry.npmjs.org/@types/normalize-package-data/-/normalize-package-data-2.4.1.tgz",
+ "integrity": "sha512-Gj7cI7z+98M282Tqmp2K5EIsoouUEzbBJhQQzDE3jSIRk6r9gsz0oUokqIUR4u1R3dMHo0pDHM7sNOHyhulypw=="
+ },
"node_modules/@types/parse-json": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
@@ -4092,6 +4596,22 @@
"@types/react": "*"
}
},
+ "node_modules/@types/react-is": {
+ "version": "17.0.3",
+ "resolved": "https://registry.npmjs.org/@types/react-is/-/react-is-17.0.3.tgz",
+ "integrity": "sha512-aBTIWg1emtu95bLTLx0cpkxwGW3ueZv71nE2YFBpL8k/z5czEW8yYpOo8Dp+UUAFAtKwNaOsh/ioSeQnWlZcfw==",
+ "dependencies": {
+ "@types/react": "*"
+ }
+ },
+ "node_modules/@types/react-transition-group": {
+ "version": "4.4.5",
+ "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.5.tgz",
+ "integrity": "sha512-juKD/eiSM3/xZYzjuzH6ZwpP+/lejltmiS3QEzV/vmb/Q8+HfDmxu+Baga8UEMGBqV88Nbg4l2hY/K2DkyaLLA==",
+ "dependencies": {
+ "@types/react": "*"
+ }
+ },
"node_modules/@types/resolve": {
"version": "1.17.1",
"resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
@@ -4542,6 +5062,11 @@
"resolved": "https://registry.npmjs.org/abab/-/abab-2.0.6.tgz",
"integrity": "sha512-j2afSsaIENvHZN2B8GOpF566vZ5WVk5opAiMTvWgaQT8DkbOqsTfvNAvHoRGU2zzP8cPoqys+xHTRDWW8L+/BA=="
},
+ "node_modules/abbrev": {
+ "version": "1.1.1",
+ "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
+ "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q=="
+ },
"node_modules/accepts": {
"version": "1.3.8",
"resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
@@ -4661,8 +5186,41 @@
"node": ">= 6.0.0"
}
},
- "node_modules/ajv": {
- "version": "6.12.6",
+ "node_modules/agentkeepalive": {
+ "version": "4.2.1",
+ "resolved": "https://registry.npmjs.org/agentkeepalive/-/agentkeepalive-4.2.1.tgz",
+ "integrity": "sha512-Zn4cw2NEqd+9fiSVWMscnjyQ1a8Yfoc5oBajLeo5w+YBHgDUcEBY2hS4YpTz6iN5f/2zQiktcuM6tS8x1p9dpA==",
+ "dependencies": {
+ "debug": "^4.1.0",
+ "depd": "^1.1.2",
+ "humanize-ms": "^1.2.1"
+ },
+ "engines": {
+ "node": ">= 8.0.0"
+ }
+ },
+ "node_modules/agentkeepalive/node_modules/depd": {
+ "version": "1.1.2",
+ "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
+ "integrity": "sha512-7emPTl6Dpo6JRXOXjLRxck+FlLRX5847cLKEn00PLAgc3g2hTZZgr+e4c2v6QpSmLeFP3n5yUo7ft6avBK/5jQ==",
+ "engines": {
+ "node": ">= 0.6"
+ }
+ },
+ "node_modules/aggregate-error": {
+ "version": "3.1.0",
+ "resolved": "https://registry.npmjs.org/aggregate-error/-/aggregate-error-3.1.0.tgz",
+ "integrity": "sha512-4I7Td01quW/RpocfNayFdFVk1qSuoh0E7JrbRJ16nH01HhKFQ88INq9Sd+nd72zqRySlr9BmDA8xlEJ6vJMrYA==",
+ "dependencies": {
+ "clean-stack": "^2.0.0",
+ "indent-string": "^4.0.0"
+ },
+ "engines": {
+ "node": ">=8"
+ }
+ },
+ "node_modules/ajv": {
+ "version": "6.12.6",
"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
"integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
"dependencies": {
@@ -4776,6 +5334,23 @@
"node": ">= 8"
}
},
+ "node_modules/aproba": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/aproba/-/aproba-2.0.0.tgz",
+ "integrity": "sha512-lYe4Gx7QT+MKGbDsA+Z+he/Wtef0BiwDOlK/XkBrdfsh9J/jPPXbX0tE9x9cl27Tmu5gg3QUbUrQYa/y+KOHPQ=="
+ },
+ "node_modules/are-we-there-yet": {
+ "version": "3.0.1",
+ "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-3.0.1.tgz",
+ "integrity": "sha512-QZW4EDmGwlYur0Yyf/b2uGucHQMa8aFUP7eu9ddR73vvhFyt4V0Vl3QHPcTNJ8l6qYOBdxgXdnBXQrHilfRQBg==",
+ "dependencies": {
+ "delegates": "^1.0.0",
+ "readable-stream": "^3.6.0"
+ },
+ "engines": {
+ "node": "^12.13.0 || ^14.15.0 || >=16.0.0"
+ }
+ },
"node_modules/arg": {
"version": "5.0.2",
"resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
@@ -4884,11 +5459,35 @@
"url": "https://github.com/sponsors/ljharb"
}
},
+ "node_modules/arrify": {
+ "version": "1.0.1",
+ "resolved": "https://registry.npmjs.org/arrify/-/arrify-1.0.1.tgz",
+ "integrity": "sha512-3CYzex9M9FGQjCGMGyi6/31c8GJbgb0qGyrx5HWxPd0aCwh4cB2YjMb2Xf9UuoogrMrlO9cTqnB5rI5GHZTcUA==",
+ "engines": {
+ "node": ">=0.10.0"
+ }
+ },
"node_modules/asap": {
"version": "2.0.6",
"resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
"integrity": "sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA=="
},
+ "node_modules/asn1": {
+ "version": "0.2.6",
+ "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.6.tgz",
+ "integrity": "sha512-ix/FxPn0MDjeyJ7i/yoHGFt/EX6LyNbxSEhPPXODPL+KB0VPk86UYfL0lMdy+KCnv+fmvIzySwaK5COwqVbWTQ==",
+ "dependencies": {
+ "safer-buffer": "~2.1.0"
+ }
+ },
+ "node_modules/assert-plus": {
+ "version": "1.0.0",
+ "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
+ "integrity": "sha512-NfJ4UzBCcQGLDlQq7nHxH+tv3kyZ0hHQqF5BO6J7tNJeP5do1llPr8dZ8zHonfhAu0PHAdMkSo+8o0wxg9lZWw==",
+ "engines": {
+ "node": ">=0.8"
+ }
+ },
"node_modules/ast-types-flow": {
"version": "0.0.7",
"resolved": "https://registry.npmjs.org/ast-types-flow/-/ast-types-flow-0.0.7.tgz",
@@ -4899,6 +5498,14 @@
"resolved": "https://registry.npmjs.org/async/-/async-3.2.4.tgz",
"integrity": "sha512-iAB+JbDEGXhyIUavoDl9WP/Jj106Kz9DEn1DPgYw5ruDn0e3Wgi3sKFm55sASdGBNOQB8F59d9qQ7deqrHA8wQ=="
},
+ "node_modules/async-foreach": {
+ "version": "0.1.3",
+ "resolved": "https://registry.npmjs.org/async-foreach/-/async-foreach-0.1.3.tgz",
+ "integrity": "sha512-VUeSMD8nEGBWaZK4lizI1sf3yEC7pnAQ/mrI7pC2fBz2s/tq5jWWEngTwaf0Gruu/OoXRGLGg1XFqpYBiGTYJA==",
+ "engines": {
+ "node": "*"
+ }
+ },
"node_modules/asynckit": {
"version": "0.4.0",
"resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
@@ -4955,6 +5562,19 @@
"url": "https://github.com/sponsors/ljharb"
}
},
+ "node_modules/aws-sign2": {
+ "version": "0.7.0",
+ "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.7.0.tgz",
+ "integrity": "sha512-08kcGqnYf/YmjoRhfxyu+CLxBjUtHLXLXX/vUfx9l2LYzG3c1m61nrpyFUZI6zeS+Li/wWMMidD9KgrqtGq3mA==",
+ "engines": {
+ "node": "*"
+ }
+ },
+ "node_modules/aws4": {
+ "version": "1.11.0",
+ "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.11.0.tgz",
+ "integrity": "sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA=="
+ },
"node_modules/axe-core": {
"version": "4.5.2",
"resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.5.2.tgz",
@@ -4963,6 +5583,29 @@
"node": ">=4"
}
},
+ "node_modules/axios": {
+ "version": "1.3.1",
+ "resolved": "https://registry.npmjs.org/axios/-/axios-1.3.1.tgz",
+ "integrity": "sha512-78pWJsQTceInlyaeBQeYZ/QgZeWS8hGeKiIJiDKQe3hEyBb7sEMq0K4gjx+Va6WHTYO4zI/RRl8qGRzn0YMadA==",
+ "dependencies": {
+ "follow-redirects": "^1.15.0",
+ "form-data": "^4.0.0",
+ "proxy-from-env": "^1.1.0"
+ }
+ },
+ "node_modules/axios/node_modules/form-data": {
+ "version": "4.0.0",
+ "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+ "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+ "dependencies": {
+ "asynckit": "^0.4.0",
+ "combined-stream": "^1.0.8",
+ "mime-types": "^2.1.12"
+ },
+ "engines": {
+ "node": ">= 6"
+ }
+ },
"node_modules/axobject-query": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz",
@@ -5258,6 +5901,14 @@
"resolved": "https://registry.npmjs.org/batch/-/batch-0.6.1.tgz",
"integrity": "sha512-x+VAiMRL6UPkx+kudNvxTl6hB2XNNCG2r+7wixVfIYwu/2HKRXimwQyaumLjMveWvT2Hkd/cAJw+QBMfJ/EKVw=="
},
+ "node_modules/bcrypt-pbkdf": {
+ "version": "1.0.2",
+ "resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz",
+ "integrity": "sha512-qeFIXtP4MSoi6NLqO12WfqARWWuCKi2Rn/9hJLEmtB5yTNr9DqFWkJRCf2qShWzPeAMRnOgCrq0sg/KLv5ES9w==",
+ "dependencies": {
+ "tweetnacl": "^0.14.3"
+ }
+ },
"node_modules/bfj": {
"version": "7.0.2",
"resolved": "https://registry.npmjs.org/bfj/-/bfj-7.0.2.tgz",
@@ -5448,6 +6099,45 @@
"node": ">= 0.8"
}
},
+ "node_modules/cacache": {
+ "version": "15.3.0",
+ "resolved": "https://registry.npmjs.org/cacache/-/cacache-15.3.0.tgz",
+ "integrity": "sha512-VVdYzXEn+cnbXpFgWs5hTT7OScegHVmLhJIR8Ufqk3iFD6A6j5iSX1KuBTfNEv4tdJWE2PzA6IVFtcLC7fN9wQ==",
+ "dependencies": {
+ "@npmcli/fs": "^1.0.0",
+ "@npmcli/move-file": "^1.0.1",
+ "chownr": "^2.0.0",
+ "fs-minipass": "^2.0.0",
+ "glob": "^7.1.4",
+ "infer-owner": "^1.0.4",
+ "lru-cache": "^6.0.0",
+ "minipass": "^3.1.1",
+ "minipass-collect": "^1.0.2",
+ "minipass-flush": "^1.0.5",
+ "minipass-pipeline": "^1.2.2",
+ "mkdirp": "^1.0.3",
+ "p-map": "^4.0.0",
+ "promise-inflight": "^1.0.1",
+ "rimraf": "^3.0.2",
+ "ssri": "^8.0.1",
+ "tar": "^6.0.2",
+ "unique-filename": "^1.1.1"
+ },
+ "engines": {
+ "node": ">= 10"
+ }
+ },
+ "node_modules/cacache/node_modules/mkdirp": {
+ "version": "1.0.4",
+ "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
+ "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
+ "bin": {
+ "mkdirp": "bin/cmd.js"
+ },
+ "engines": {
+ "node": ">=10"
+ }
+ },
"node_modules/call-bind": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
@@ -5496,6 +6186,38 @@
"node": ">= 6"
}
},
+ "node_modules/camelcase-keys": {
+ "version": "6.2.2",
+ "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-6.2.2.tgz",
+ "integrity": "sha512-YrwaA0vEKazPBkn0ipTiMpSajYDSe+KjQfrjhcBMxJt/znbvlHd8Pw/Vamaz5EB4Wfhs3SUR3Z9mwRu/P3s3Yg==",
+ "dependencies": {
+ "camelcase": "^5.3.1",
+ "map-obj": "^4.0.0",
+ "quick-lru": "^4.0.1"
+ },
+ "engines": {
+ "node": ">=8"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/sindresorhus"
+ }
+ },
+ "node_modules/camelcase-keys/node_modules/camelcase": {
+ "version": "5.3.1",
+ "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
+ "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
+ "engines": {
+ "node": ">=6"
+ }
+ },
+ "node_modules/camelcase-keys/node_modules/quick-lru": {
+ "version": "4.0.1",
+ "resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-4.0.1.tgz",
+ "integrity": "sha512-ARhCpm70fzdcvNQfPoy49IaanKkTlRWF2JMzqhcJbhSFRZv7nPTvZJdcY7301IPmvW+/p0RgIWnQDLJxifsQ7g==",
+ "engines": {
+ "node": ">=8"
+ }
+ },
"node_modules/caniuse-api": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
@@ -5530,6 +6252,11 @@
"node": ">=4"
}
},
+ "node_modules/caseless": {
+ "version": "0.12.0",
+ "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz",
+ "integrity": "sha512-4tYFyifaFfGacoiObjJegolkwSU4xQNGbVgUiNYVUxbQ2x2lUsFvY4hVgVzGiIe6WLOPqycWXA40l+PWsxthUw=="
+ },
"node_modules/chalk": {
"version": "2.4.2",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
@@ -5593,6 +6320,14 @@
"node": ">= 6"
}
},
+ "node_modules/chownr": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/chownr/-/chownr-2.0.0.tgz",
+ "integrity": "sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==",
+ "engines": {
+ "node": ">=10"
+ }
+ },
"node_modules/chrome-trace-event": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz",
@@ -5633,6 +6368,14 @@
"node": ">=0.10.0"
}
},
+ "node_modules/clean-stack": {
+ "version": "2.2.0",
+ "resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz",
+ "integrity": "sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==",
+ "engines": {
+ "node": ">=6"
+ }
+ },
"node_modules/cliui": {
"version": "7.0.4",
"resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz",
@@ -5643,6 +6386,14 @@
"wrap-ansi": "^7.0.0"
}
},
+ "node_modules/clsx": {
+ "version": "1.2.1",
+ "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz",
+ "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==",
+ "engines": {
+ "node": ">=6"
+ }
+ },
"node_modules/co": {
"version": "4.6.0",
"resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
@@ -5683,6 +6434,14 @@
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
"integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw=="
},
+ "node_modules/color-support": {
+ "version": "1.1.3",
+ "resolved": "https://registry.npmjs.org/color-support/-/color-support-1.1.3.tgz",
+ "integrity": "sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg==",
+ "bin": {
+ "color-support": "bin.js"
+ }
+ },
"node_modules/colord": {
"version": "2.9.3",
"resolved": "https://registry.npmjs.org/colord/-/colord-2.9.3.tgz",
@@ -5794,6 +6553,11 @@
"node": ">=0.8"
}
},
+ "node_modules/console-control-strings": {
+ "version": "1.1.0",
+ "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
+ "integrity": "sha512-ty/fTekppD2fIwRvnZAVdeOiGd1c7YXEixbgJTNzqcxJWKQnjJ/V1bNEEE6hygpM3WjwHFUVK6HTjWSzV4a8sQ=="
+ },
"node_modules/content-disposition": {
"version": "0.5.4",
"resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz",
@@ -6298,6 +7062,17 @@
"resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
"integrity": "sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA=="
},
+ "node_modules/dashdash": {
+ "version": "1.14.1",
+ "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",
+ "integrity": "sha512-jRFi8UDGo6j+odZiEpjazZaWqEal3w/basFjQHQEwVtZJGDpxbH1MeYluwCS8Xq5wmLJooDlMgvVarmWfGM44g==",
+ "dependencies": {
+ "assert-plus": "^1.0.0"
+ },
+ "engines": {
+ "node": ">=0.10"
+ }
+ },
"node_modules/data-urls": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/data-urls/-/data-urls-2.0.0.tgz",
@@ -6327,6 +7102,37 @@
}
}
},
+ "node_modules/decamelize": {
+ "version": "1.2.0",
+ "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
+ "integrity": "sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==",
+ "engines": {
+ "node": ">=0.10.0"
+ }
+ },
+ "node_modules/decamelize-keys": {
+ "version": "1.1.1",
+ "resolved": "https://registry.npmjs.org/decamelize-keys/-/decamelize-keys-1.1.1.tgz",
+ "integrity": "sha512-WiPxgEirIV0/eIOMcnFBA3/IJZAZqKnwAwWyvvdi4lsr1WCN22nhdf/3db3DoZcUjTV2SqfzIwNyp6y2xs3nmg==",
+ "dependencies": {
+ "decamelize": "^1.1.0",
+ "map-obj": "^1.0.0"
+ },
+ "engines": {
+ "node": ">=0.10.0"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/sindresorhus"
+ }
+ },
+ "node_modules/decamelize-keys/node_modules/map-obj": {
+ "version": "1.0.1",
+ "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-1.0.1.tgz",
+ "integrity": "sha512-7N/q3lyZ+LVCp7PzuxrJr4KMbBE2hW7BT7YNia330OFxIf4d3r5zVpicP2650l7CPN6RM9zOJRl3NGpqSiw3Eg==",
+ "engines": {
+ "node": ">=0.10.0"
+ }
+ },
"node_modules/decimal.js": {
"version": "10.4.2",
"resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.4.2.tgz",
@@ -6430,6 +7236,11 @@
"node": ">=0.4.0"
}
},
+ "node_modules/delegates": {
+ "version": "1.0.0",
+ "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
+ "integrity": "sha512-bd2L678uiWATM6m5Z1VzNCErI3jiGzt6HGY8OVICs40JQq/HALfbyNJmp0UDakEY4pMMaN0Ly5om/B1VI/+xfQ=="
+ },
"node_modules/depd": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
@@ -6574,6 +7385,15 @@
"utila": "~0.4"
}
},
+ "node_modules/dom-helpers": {
+ "version": "5.2.1",
+ "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+ "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+ "dependencies": {
+ "@babel/runtime": "^7.8.7",
+ "csstype": "^3.0.2"
+ }
+ },
"node_modules/dom-serializer": {
"version": "1.4.1",
"resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz",
@@ -6671,6 +7491,15 @@
"resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz",
"integrity": "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg=="
},
+ "node_modules/ecc-jsbn": {
+ "version": "0.1.2",
+ "resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz",
+ "integrity": "sha512-eh9O+hwRHNbG4BLTjEl3nw044CkGm5X6LoaCf7LPp7UU8Qrt47JYNi6nPX8xjW97TKGKm1ouctg0QSpZe9qrnw==",
+ "dependencies": {
+ "jsbn": "~0.1.0",
+ "safer-buffer": "^2.1.0"
+ }
+ },
"node_modules/ee-first": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
@@ -6727,6 +7556,15 @@
"node": ">= 0.8"
}
},
+ "node_modules/encoding": {
+ "version": "0.1.13",
+ "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.13.tgz",
+ "integrity": "sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==",
+ "optional": true,
+ "dependencies": {
+ "iconv-lite": "^0.6.2"
+ }
+ },
"node_modules/enhanced-resolve": {
"version": "5.10.0",
"resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.10.0.tgz",
@@ -6747,6 +7585,19 @@
"url": "https://github.com/fb55/entities?sponsor=1"
}
},
+ "node_modules/env-paths": {
+ "version": "2.2.1",
+ "resolved": "https://registry.npmjs.org/env-paths/-/env-paths-2.2.1.tgz",
+ "integrity": "sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==",
+ "engines": {
+ "node": ">=6"
+ }
+ },
+ "node_modules/err-code": {
+ "version": "2.0.3",
+ "resolved": "https://registry.npmjs.org/err-code/-/err-code-2.0.3.tgz",
+ "integrity": "sha512-2bmlRpNKBxT/CRmPOlyISQpNj+qSeYvcym/uT0Jx2bMOlKLtSy1ZmLuVxSEKKyor/N5yhvp/ZiG1oE3DEYMSFA=="
+ },
"node_modules/error-ex": {
"version": "1.3.2",
"resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
@@ -6857,6 +7708,11 @@
"url": "https://github.com/sponsors/ljharb"
}
},
+ "node_modules/es6-object-assign": {
+ "version": "1.1.0",
+ "resolved": "https://registry.npmjs.org/es6-object-assign/-/es6-object-assign-1.1.0.tgz",
+ "integrity": "sha512-MEl9uirslVwqQU369iHNWZXsI8yaZYGg/D65aOgZkeyFJwHYSxilf7rQzXKI7DdDuBPrBXbfk3sl9hJhmd5AUw=="
+ },
"node_modules/escalade": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
@@ -7753,6 +8609,19 @@
"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
"integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
},
+ "node_modules/extend": {
+ "version": "3.0.2",
+ "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
+ "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g=="
+ },
+ "node_modules/extsprintf": {
+ "version": "1.3.0",
+ "resolved": "https://registry.npmjs.org/extsprintf/-/extsprintf-1.3.0.tgz",
+ "integrity": "sha512-11Ndz7Nv+mvAC1j0ktTa7fAb0vLyGGX+rMHNBYQviQDGU0Hw7lhctJANqbPhu9nV9/izT/IntTgZ7Im/9LJs9g==",
+ "engines": [
+ "node >=0.6.0"
+ ]
+ },
"node_modules/fast-deep-equal": {
"version": "3.1.3",
"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -7943,6 +8812,11 @@
"url": "https://github.com/avajs/find-cache-dir?sponsor=1"
}
},
+ "node_modules/find-root": {
+ "version": "1.1.0",
+ "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
+ "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng=="
+ },
"node_modules/find-up": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
@@ -8002,6 +8876,14 @@
"is-callable": "^1.1.3"
}
},
+ "node_modules/forever-agent": {
+ "version": "0.6.1",
+ "resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz",
+ "integrity": "sha512-j0KLYPhm6zeac4lz3oJ3o65qvgQCcPubiyotZrXqEaG4hNagNYO8qdlUrX5vwqv9ohqeT/Z3j6+yW067yWWdUw==",
+ "engines": {
+ "node": "*"
+ }
+ },
"node_modules/fork-ts-checker-webpack-plugin": {
"version": "6.5.2",
"resolved": "https://registry.npmjs.org/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-6.5.2.tgz",
@@ -8212,6 +9094,17 @@
"node": ">=12"
}
},
+ "node_modules/fs-minipass": {
+ "version": "2.1.0",
+ "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-2.1.0.tgz",
+ "integrity": "sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==",
+ "dependencies": {
+ "minipass": "^3.0.0"
+ },
+ "engines": {
+ "node": ">= 8"
+ }
+ },
"node_modules/fs-monkey": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/fs-monkey/-/fs-monkey-1.0.3.tgz",
@@ -8265,6 +9158,35 @@
"url": "https://github.com/sponsors/ljharb"
}
},
+ "node_modules/gauge": {
+ "version": "4.0.4",
+ "resolved": "https://registry.npmjs.org/gauge/-/gauge-4.0.4.tgz",
+ "integrity": "sha512-f9m+BEN5jkg6a0fZjleidjN51VE1X+mPFQ2DJ0uv1V39oCLCbsGe6yjbBnp7eK7z/+GAon99a3nHuqbuuthyPg==",
+ "dependencies": {
+ "aproba": "^1.0.3 || ^2.0.0",
+ "color-support": "^1.1.3",
+ "console-control-strings": "^1.1.0",
+ "has-unicode": "^2.0.1",
+ "signal-exit": "^3.0.7",
+ "string-width": "^4.2.3",
+ "strip-ansi": "^6.0.1",
+ "wide-align": "^1.1.5"
+ },
+ "engines": {
+ "node": "^12.13.0 || ^14.15.0 || >=16.0.0"
+ }
+ },
+ "node_modules/gaze": {
+ "version": "1.1.3",
+ "resolved": "https://registry.npmjs.org/gaze/-/gaze-1.1.3.tgz",
+ "integrity": "sha512-BRdNm8hbWzFzWHERTrejLqwHDfS4GibPoq5wjTPIoJHoBtKGPg3xAFfxmM+9ztbXelxcf2hwQcaz1PtmFeue8g==",
+ "dependencies": {
+ "globule": "^1.0.0"
+ },
+ "engines": {
+ "node": ">= 4.0.0"
+ }
+ },
"node_modules/gensync": {
"version": "1.0.0-beta.2",
"resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
@@ -8307,6 +9229,14 @@
"node": ">=8.0.0"
}
},
+ "node_modules/get-stdin": {
+ "version": "4.0.1",
+ "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz",
+ "integrity": "sha512-F5aQMywwJ2n85s4hJPTT9RPxGmubonuB10MNYo17/xph174n2MIR33HRguhzVag10O/npM7SPk73LMZNP+FaWw==",
+ "engines": {
+ "node": ">=0.10.0"
+ }
+ },
"node_modules/get-stream": {
"version": "6.0.1",
"resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
@@ -8333,6 +9263,14 @@
"url": "https://github.com/sponsors/ljharb"
}
},
+ "node_modules/getpass": {
+ "version": "0.1.7",
+ "resolved": "https://registry.npmjs.org/getpass/-/getpass-0.1.7.tgz",
+ "integrity": "sha512-0fzj9JxOLfJ+XGLhR8ze3unN0KZCgZwiSSDz168VERjK8Wl8kVSdcu2kspd4s4wtAa1y/qrVRiAA0WclVsu0ng==",
+ "dependencies": {
+ "assert-plus": "^1.0.0"
+ }
+ },
"node_modules/glob": {
"version": "7.2.3",
"resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
@@ -8430,33 +9368,76 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
- "node_modules/gopd": {
- "version": "1.0.1",
- "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
- "integrity": "sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==",
+ "node_modules/globule": {
+ "version": "1.3.4",
+ "resolved": "https://registry.npmjs.org/globule/-/globule-1.3.4.tgz",
+ "integrity": "sha512-OPTIfhMBh7JbBYDpa5b+Q5ptmMWKwcNcFSR/0c6t8V4f3ZAVBEsKNY37QdVqmLRYSMhOUGYrY0QhSoEpzGr/Eg==",
"dependencies": {
- "get-intrinsic": "^1.1.3"
+ "glob": "~7.1.1",
+ "lodash": "^4.17.21",
+ "minimatch": "~3.0.2"
},
- "funding": {
- "url": "https://github.com/sponsors/ljharb"
+ "engines": {
+ "node": ">= 0.10"
}
},
- "node_modules/graceful-fs": {
- "version": "4.2.10",
- "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz",
- "integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA=="
- },
- "node_modules/grapheme-splitter": {
- "version": "1.0.4",
- "resolved": "https://registry.npmjs.org/grapheme-splitter/-/grapheme-splitter-1.0.4.tgz",
- "integrity": "sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ=="
- },
- "node_modules/gzip-size": {
- "version": "6.0.0",
- "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-6.0.0.tgz",
- "integrity": "sha512-ax7ZYomf6jqPTQ4+XCpUGyXKHk5WweS+e05MBO4/y3WJ5RkmPXNKvX+bx1behVILVwr6JSQvZAku021CHPXG3Q==",
+ "node_modules/globule/node_modules/glob": {
+ "version": "7.1.7",
+ "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.7.tgz",
+ "integrity": "sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==",
"dependencies": {
- "duplexer": "^0.1.2"
+ "fs.realpath": "^1.0.0",
+ "inflight": "^1.0.4",
+ "inherits": "2",
+ "minimatch": "^3.0.4",
+ "once": "^1.3.0",
+ "path-is-absolute": "^1.0.0"
+ },
+ "engines": {
+ "node": "*"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/isaacs"
+ }
+ },
+ "node_modules/globule/node_modules/minimatch": {
+ "version": "3.0.8",
+ "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.8.tgz",
+ "integrity": "sha512-6FsRAQsxQ61mw+qP1ZzbL9Bc78x2p5OqNgNpnoAFLTrX8n5Kxph0CsnhmKKNXTWjXqU5L0pGPR7hYk+XWZr60Q==",
+ "dependencies": {
+ "brace-expansion": "^1.1.7"
+ },
+ "engines": {
+ "node": "*"
+ }
+ },
+ "node_modules/gopd": {
+ "version": "1.0.1",
+ "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
+ "integrity": "sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==",
+ "dependencies": {
+ "get-intrinsic": "^1.1.3"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/ljharb"
+ }
+ },
+ "node_modules/graceful-fs": {
+ "version": "4.2.10",
+ "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz",
+ "integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA=="
+ },
+ "node_modules/grapheme-splitter": {
+ "version": "1.0.4",
+ "resolved": "https://registry.npmjs.org/grapheme-splitter/-/grapheme-splitter-1.0.4.tgz",
+ "integrity": "sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ=="
+ },
+ "node_modules/gzip-size": {
+ "version": "6.0.0",
+ "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-6.0.0.tgz",
+ "integrity": "sha512-ax7ZYomf6jqPTQ4+XCpUGyXKHk5WweS+e05MBO4/y3WJ5RkmPXNKvX+bx1behVILVwr6JSQvZAku021CHPXG3Q==",
+ "dependencies": {
+ "duplexer": "^0.1.2"
},
"engines": {
"node": ">=10"
@@ -8470,6 +9451,35 @@
"resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-2.0.1.tgz",
"integrity": "sha512-9Qn4yBxelxoh2Ow62nP+Ka/kMnOXRi8BXnRaUwezLNhqelnN49xKz4F/dPP8OYLxLxq6JDtZb2i9XznUQbNPTg=="
},
+ "node_modules/har-schema": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/har-schema/-/har-schema-2.0.0.tgz",
+ "integrity": "sha512-Oqluz6zhGX8cyRaTQlFMPw80bSJVG2x/cFb8ZPhUILGgHka9SsokCCOQgpveePerqidZOrT14ipqfJb7ILcW5Q==",
+ "engines": {
+ "node": ">=4"
+ }
+ },
+ "node_modules/har-validator": {
+ "version": "5.1.5",
+ "resolved": "https://registry.npmjs.org/har-validator/-/har-validator-5.1.5.tgz",
+ "integrity": "sha512-nmT2T0lljbxdQZfspsno9hgrG3Uir6Ks5afism62poxqBM6sDnMEuPmzTq8XN0OEwqKLLdh1jQI3qyE66Nzb3w==",
+ "deprecated": "this library is no longer supported",
+ "dependencies": {
+ "ajv": "^6.12.3",
+ "har-schema": "^2.0.0"
+ },
+ "engines": {
+ "node": ">=6"
+ }
+ },
+ "node_modules/hard-rejection": {
+ "version": "2.1.0",
+ "resolved": "https://registry.npmjs.org/hard-rejection/-/hard-rejection-2.1.0.tgz",
+ "integrity": "sha512-VIZB+ibDhx7ObhAe7OVtoEbuP4h/MuOTHJ+J8h/eBXotJYl0fBgR72xDFCKgIh22OJZIOVNxBMWuhAr10r8HdA==",
+ "engines": {
+ "node": ">=6"
+ }
+ },
"node_modules/harmony-reflect": {
"version": "1.6.2",
"resolved": "https://registry.npmjs.org/harmony-reflect/-/harmony-reflect-1.6.2.tgz",
@@ -8538,6 +9548,11 @@
"url": "https://github.com/sponsors/ljharb"
}
},
+ "node_modules/has-unicode": {
+ "version": "2.0.1",
+ "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
+ "integrity": "sha512-8Rf9Y83NBReMnx0gFzA8JImQACstCYWUplepDa9xprwwtmgEZUF0h/i5xSA625zB/I37EtrswSST6OXxwaaIJQ=="
+ },
"node_modules/he": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
@@ -8546,6 +9561,19 @@
"he": "bin/he"
}
},
+ "node_modules/hoist-non-react-statics": {
+ "version": "3.3.2",
+ "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+ "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+ "dependencies": {
+ "react-is": "^16.7.0"
+ }
+ },
+ "node_modules/hoist-non-react-statics/node_modules/react-is": {
+ "version": "16.13.1",
+ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+ "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+ },
"node_modules/hoopy": {
"version": "0.1.4",
"resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
@@ -8554,6 +9582,17 @@
"node": ">= 6.0.0"
}
},
+ "node_modules/hosted-git-info": {
+ "version": "4.1.0",
+ "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-4.1.0.tgz",
+ "integrity": "sha512-kyCuEOWjJqZuDbRHzL8V93NzQhwIB71oFWSyzVo+KPZI+pnQPPxucdkrOZvkLRnrf5URsQM+IJ09Dw29cRALIA==",
+ "dependencies": {
+ "lru-cache": "^6.0.0"
+ },
+ "engines": {
+ "node": ">=10"
+ }
+ },
"node_modules/hpack.js": {
"version": "2.1.6",
"resolved": "https://registry.npmjs.org/hpack.js/-/hpack.js-2.1.6.tgz",
@@ -8673,6 +9712,11 @@
"entities": "^2.0.0"
}
},
+ "node_modules/http-cache-semantics": {
+ "version": "4.1.0",
+ "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.1.0.tgz",
+ "integrity": "sha512-carPklcUh7ROWRK7Cv27RPtdhYhUsela/ue5/jKzjegVvXDqM2ILE9Q2BGn9JZJh1g87cp56su/FgQSzcWS8cQ=="
+ },
"node_modules/http-deceiver": {
"version": "1.2.7",
"resolved": "https://registry.npmjs.org/http-deceiver/-/http-deceiver-1.2.7.tgz",
@@ -8747,6 +9791,20 @@
}
}
},
+ "node_modules/http-signature": {
+ "version": "1.2.0",
+ "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.2.0.tgz",
+ "integrity": "sha512-CAbnr6Rz4CYQkLYUtSNXxQPUH2gK8f3iWexVlsnMeD+GjlsQ0Xsy1cOX+mN3dtxYomRy21CiOzU8Uhw6OwncEQ==",
+ "dependencies": {
+ "assert-plus": "^1.0.0",
+ "jsprim": "^1.2.2",
+ "sshpk": "^1.7.0"
+ },
+ "engines": {
+ "node": ">=0.8",
+ "npm": ">=1.3.7"
+ }
+ },
"node_modules/https-proxy-agent": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz",
@@ -8767,6 +9825,14 @@
"node": ">=10.17.0"
}
},
+ "node_modules/humanize-ms": {
+ "version": "1.2.1",
+ "resolved": "https://registry.npmjs.org/humanize-ms/-/humanize-ms-1.2.1.tgz",
+ "integrity": "sha512-Fl70vYtsAFb/C06PTS9dZBo7ihau+Tu/DNCk/OyHhea07S+aeMWpFFkUaXRa8fI+ScZbEI8dfSxwY7gxZ9SAVQ==",
+ "dependencies": {
+ "ms": "^2.0.0"
+ }
+ },
"node_modules/iconv-lite": {
"version": "0.6.3",
"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
@@ -8879,6 +9945,11 @@
"node": ">=8"
}
},
+ "node_modules/infer-owner": {
+ "version": "1.0.4",
+ "resolved": "https://registry.npmjs.org/infer-owner/-/infer-owner-1.0.4.tgz",
+ "integrity": "sha512-IClj+Xz94+d7irH5qRyfJonOdfTzuDaifE6ZPWfx0N0+/ATZCbuTPq2prFl526urkQd90WyUKIh1DfBQ2hMz9A=="
+ },
"node_modules/inflight": {
"version": "1.0.6",
"resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
@@ -8911,6 +9982,11 @@
"node": ">= 0.4"
}
},
+ "node_modules/ip": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/ip/-/ip-2.0.0.tgz",
+ "integrity": "sha512-WKa+XuLG1A1R0UWhl2+1XQSi+fZWMsYKffMZTTYsiZaUD8k2yDAj5atimTUD2TZkyCkNEeYE5NhFZmupOGtjYQ=="
+ },
"node_modules/ipaddr.js": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-2.0.1.tgz",
@@ -9061,6 +10137,11 @@
"node": ">=0.10.0"
}
},
+ "node_modules/is-lambda": {
+ "version": "1.0.1",
+ "resolved": "https://registry.npmjs.org/is-lambda/-/is-lambda-1.0.1.tgz",
+ "integrity": "sha512-z7CMFGNrENq5iFB9Bqo64Xk6Y9sg+epq1myIcdHaGnbMTYOxvzsEtdYqQUylB7LxfkvgrrjP32T6Ywciio9UIQ=="
+ },
"node_modules/is-map": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/is-map/-/is-map-2.0.2.tgz",
@@ -9303,6 +10384,11 @@
"resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
"integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw=="
},
+ "node_modules/isstream": {
+ "version": "0.1.2",
+ "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
+ "integrity": "sha512-Yljz7ffyPbrLpLngrMtZ7NduUgVvi6wG9RJ9IUcyCd59YQ911PBJphODUcbOVbqYfxe1wuYf/LJ8PauMRwsM/g=="
+ },
"node_modules/istanbul-lib-coverage": {
"version": "3.2.0",
"resolved": "https://registry.npmjs.org/istanbul-lib-coverage/-/istanbul-lib-coverage-3.2.0.tgz",
@@ -11357,6 +12443,11 @@
"url": "https://github.com/chalk/supports-color?sponsor=1"
}
},
+ "node_modules/js-base64": {
+ "version": "2.6.4",
+ "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.6.4.tgz",
+ "integrity": "sha512-pZe//GGmwJndub7ZghVHz7vjb2LgC1m8B07Au3eYqeqv9emhESByMXxaEgkUkEqJe87oBbSniGYoQNIBklc7IQ=="
+ },
"node_modules/js-sdsl": {
"version": "4.1.5",
"resolved": "https://registry.npmjs.org/js-sdsl/-/js-sdsl-4.1.5.tgz",
@@ -11379,6 +12470,11 @@
"js-yaml": "bin/js-yaml.js"
}
},
+ "node_modules/jsbn": {
+ "version": "0.1.1",
+ "resolved": "https://registry.npmjs.org/jsbn/-/jsbn-0.1.1.tgz",
+ "integrity": "sha512-UVU9dibq2JcFWxQPA6KCqj5O42VOmAY3zQUfEKxU0KpTGXwNoCjkX1e13eHNvw/xPynt6pU0rZ1htjWTNTSXsg=="
+ },
"node_modules/jsdom": {
"version": "16.7.0",
"resolved": "https://registry.npmjs.org/jsdom/-/jsdom-16.7.0.tgz",
@@ -11455,6 +12551,11 @@
"resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
"integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw=="
},
+ "node_modules/json-stringify-safe": {
+ "version": "5.0.1",
+ "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
+ "integrity": "sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA=="
+ },
"node_modules/json5": {
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/json5/-/json5-2.2.1.tgz",
@@ -11485,6 +12586,20 @@
"node": ">=0.10.0"
}
},
+ "node_modules/jsprim": {
+ "version": "1.4.2",
+ "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.2.tgz",
+ "integrity": "sha512-P2bSOMAc/ciLz6DzgjVlGJP9+BrJWu5UDGK70C2iweC5QBIeFf0ZXRvGjEj2uYgrY2MkAAhsSWHDWlFtEroZWw==",
+ "dependencies": {
+ "assert-plus": "1.0.0",
+ "extsprintf": "1.3.0",
+ "json-schema": "0.4.0",
+ "verror": "1.10.0"
+ },
+ "engines": {
+ "node": ">=0.6.0"
+ }
+ },
"node_modules/jsx-ast-utils": {
"version": "3.3.3",
"resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.3.tgz",
@@ -11708,6 +12823,17 @@
"tmpl": "1.0.5"
}
},
+ "node_modules/map-obj": {
+ "version": "4.3.0",
+ "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-4.3.0.tgz",
+ "integrity": "sha512-hdN1wVrZbb29eBGiGjJbeP8JbKjq1urkHJ/LIP/NY48MZ1QVXUsQBV1G1zvYFHn1XE06cwjBsOI2K3Ulnj1YXQ==",
+ "engines": {
+ "node": ">=8"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/sindresorhus"
+ }
+ },
"node_modules/mdn-data": {
"version": "2.0.4",
"resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.4.tgz",
@@ -11732,6 +12858,42 @@
"node": ">= 4.0.0"
}
},
+ "node_modules/meow": {
+ "version": "9.0.0",
+ "resolved": "https://registry.npmjs.org/meow/-/meow-9.0.0.tgz",
+ "integrity": "sha512-+obSblOQmRhcyBt62furQqRAQpNyWXo8BuQ5bN7dG8wmwQ+vwHKp/rCFD4CrTP8CsDQD1sjoZ94K417XEUk8IQ==",
+ "dependencies": {
+ "@types/minimist": "^1.2.0",
+ "camelcase-keys": "^6.2.2",
+ "decamelize": "^1.2.0",
+ "decamelize-keys": "^1.1.0",
+ "hard-rejection": "^2.1.0",
+ "minimist-options": "4.1.0",
+ "normalize-package-data": "^3.0.0",
+ "read-pkg-up": "^7.0.1",
+ "redent": "^3.0.0",
+ "trim-newlines": "^3.0.0",
+ "type-fest": "^0.18.0",
+ "yargs-parser": "^20.2.3"
+ },
+ "engines": {
+ "node": ">=10"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/sindresorhus"
+ }
+ },
+ "node_modules/meow/node_modules/type-fest": {
+ "version": "0.18.1",
+ "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.18.1.tgz",
+ "integrity": "sha512-OIAYXk8+ISY+qTOwkHtKqzAuxchoMiD9Udx+FSGQDuiRR+PJKJHc2NJAXlbhkGwTt/4/nKZxELY1w3ReWOL8mw==",
+ "engines": {
+ "node": ">=10"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/sindresorhus"
+ }
+ },
"node_modules/merge-descriptors": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
@@ -11907,6 +13069,110 @@
"url": "https://github.com/sponsors/ljharb"
}
},
+ "node_modules/minimist-options": {
+ "version": "4.1.0",
+ "resolved": "https://registry.npmjs.org/minimist-options/-/minimist-options-4.1.0.tgz",
+ "integrity": "sha512-Q4r8ghd80yhO/0j1O3B2BjweX3fiHg9cdOwjJd2J76Q135c+NDxGCqdYKQ1SKBuFfgWbAUzBfvYjPUEeNgqN1A==",
+ "dependencies": {
+ "arrify": "^1.0.1",
+ "is-plain-obj": "^1.1.0",
+ "kind-of": "^6.0.3"
+ },
+ "engines": {
+ "node": ">= 6"
+ }
+ },
+ "node_modules/minimist-options/node_modules/is-plain-obj": {
+ "version": "1.1.0",
+ "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-1.1.0.tgz",
+ "integrity": "sha512-yvkRyxmFKEOQ4pNXCmJG5AEQNlXJS5LaONXo5/cLdTZdWvsZ1ioJEonLGAosKlMWE8lwUy/bJzMjcw8az73+Fg==",
+ "engines": {
+ "node": ">=0.10.0"
+ }
+ },
+ "node_modules/minipass": {
+ "version": "3.3.4",
+ "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.4.tgz",
+ "integrity": "sha512-I9WPbWHCGu8W+6k1ZiGpPu0GkoKBeorkfKNuAFBNS1HNFJvke82sxvI5bzcCNpWPorkOO5QQ+zomzzwRxejXiw==",
+ "dependencies": {
+ "yallist": "^4.0.0"
+ },
+ "engines": {
+ "node": ">=8"
+ }
+ },
+ "node_modules/minipass-collect": {
+ "version": "1.0.2",
+ "resolved": "https://registry.npmjs.org/minipass-collect/-/minipass-collect-1.0.2.tgz",
+ "integrity": "sha512-6T6lH0H8OG9kITm/Jm6tdooIbogG9e0tLgpY6mphXSm/A9u8Nq1ryBG+Qspiub9LjWlBPsPS3tWQ/Botq4FdxA==",
+ "dependencies": {
+ "minipass": "^3.0.0"
+ },
+ "engines": {
+ "node": ">= 8"
+ }
+ },
+ "node_modules/minipass-fetch": {
+ "version": "1.4.1",
+ "resolved": "https://registry.npmjs.org/minipass-fetch/-/minipass-fetch-1.4.1.tgz",
+ "integrity": "sha512-CGH1eblLq26Y15+Azk7ey4xh0J/XfJfrCox5LDJiKqI2Q2iwOLOKrlmIaODiSQS8d18jalF6y2K2ePUm0CmShw==",
+ "dependencies": {
+ "minipass": "^3.1.0",
+ "minipass-sized": "^1.0.3",
+ "minizlib": "^2.0.0"
+ },
+ "engines": {
+ "node": ">=8"
+ },
+ "optionalDependencies": {
+ "encoding": "^0.1.12"
+ }
+ },
+ "node_modules/minipass-flush": {
+ "version": "1.0.5",
+ "resolved": "https://registry.npmjs.org/minipass-flush/-/minipass-flush-1.0.5.tgz",
+ "integrity": "sha512-JmQSYYpPUqX5Jyn1mXaRwOda1uQ8HP5KAT/oDSLCzt1BYRhQU0/hDtsB1ufZfEEzMZ9aAVmsBw8+FWsIXlClWw==",
+ "dependencies": {
+ "minipass": "^3.0.0"
+ },
+ "engines": {
+ "node": ">= 8"
+ }
+ },
+ "node_modules/minipass-pipeline": {
+ "version": "1.2.4",
+ "resolved": "https://registry.npmjs.org/minipass-pipeline/-/minipass-pipeline-1.2.4.tgz",
+ "integrity": "sha512-xuIq7cIOt09RPRJ19gdi4b+RiNvDFYe5JH+ggNvBqGqpQXcru3PcRmOZuHBKWK1Txf9+cQ+HMVN4d6z46LZP7A==",
+ "dependencies": {
+ "minipass": "^3.0.0"
+ },
+ "engines": {
+ "node": ">=8"
+ }
+ },
+ "node_modules/minipass-sized": {
+ "version": "1.0.3",
+ "resolved": "https://registry.npmjs.org/minipass-sized/-/minipass-sized-1.0.3.tgz",
+ "integrity": "sha512-MbkQQ2CTiBMlA2Dm/5cY+9SWFEN8pzzOXi6rlM5Xxq0Yqbda5ZQy9sU75a673FE9ZK0Zsbr6Y5iP6u9nktfg2g==",
+ "dependencies": {
+ "minipass": "^3.0.0"
+ },
+ "engines": {
+ "node": ">=8"
+ }
+ },
+ "node_modules/minizlib": {
+ "version": "2.1.2",
+ "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-2.1.2.tgz",
+ "integrity": "sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==",
+ "dependencies": {
+ "minipass": "^3.0.0",
+ "yallist": "^4.0.0"
+ },
+ "engines": {
+ "node": ">= 8"
+ }
+ },
"node_modules/mkdirp": {
"version": "0.5.6",
"resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
@@ -11935,6 +13201,11 @@
"multicast-dns": "cli.js"
}
},
+ "node_modules/nan": {
+ "version": "2.17.0",
+ "resolved": "https://registry.npmjs.org/nan/-/nan-2.17.0.tgz",
+ "integrity": "sha512-2ZTgtl0nJsO0KQCjEpxcIr5D+Yv90plTitZt9JBfQvVJDS5seMl3FOvsh3+9CoYWXf/1l5OaZzzF6nDm4cagaQ=="
+ },
"node_modules/nanoid": {
"version": "3.3.4",
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
@@ -11986,6 +13257,55 @@
"node": ">= 6.13.0"
}
},
+ "node_modules/node-gyp": {
+ "version": "8.4.1",
+ "resolved": "https://registry.npmjs.org/node-gyp/-/node-gyp-8.4.1.tgz",
+ "integrity": "sha512-olTJRgUtAb/hOXG0E93wZDs5YiJlgbXxTwQAFHyNlRsXQnYzUaF2aGgujZbw+hR8aF4ZG/rST57bWMWD16jr9w==",
+ "dependencies": {
+ "env-paths": "^2.2.0",
+ "glob": "^7.1.4",
+ "graceful-fs": "^4.2.6",
+ "make-fetch-happen": "^9.1.0",
+ "nopt": "^5.0.0",
+ "npmlog": "^6.0.0",
+ "rimraf": "^3.0.2",
+ "semver": "^7.3.5",
+ "tar": "^6.1.2",
+ "which": "^2.0.2"
+ },
+ "bin": {
+ "node-gyp": "bin/node-gyp.js"
+ },
+ "engines": {
+ "node": ">= 10.12.0"
+ }
+ },
+ "node_modules/node-gyp/node_modules/make-fetch-happen": {
+ "version": "9.1.0",
+ "resolved": "https://registry.npmjs.org/make-fetch-happen/-/make-fetch-happen-9.1.0.tgz",
+ "integrity": "sha512-+zopwDy7DNknmwPQplem5lAZX/eCOzSvSNNcSKm5eVwTkOBzoktEfXsa9L23J/GIRhxRsaxzkPEhrJEpE2F4Gg==",
+ "dependencies": {
+ "agentkeepalive": "^4.1.3",
+ "cacache": "^15.2.0",
+ "http-cache-semantics": "^4.1.0",
+ "http-proxy-agent": "^4.0.1",
+ "https-proxy-agent": "^5.0.0",
+ "is-lambda": "^1.0.1",
+ "lru-cache": "^6.0.0",
+ "minipass": "^3.1.3",
+ "minipass-collect": "^1.0.2",
+ "minipass-fetch": "^1.3.2",
+ "minipass-flush": "^1.0.5",
+ "minipass-pipeline": "^1.2.4",
+ "negotiator": "^0.6.2",
+ "promise-retry": "^2.0.1",
+ "socks-proxy-agent": "^6.0.0",
+ "ssri": "^8.0.0"
+ },
+ "engines": {
+ "node": ">= 10"
+ }
+ },
"node_modules/node-int64": {
"version": "0.4.0",
"resolved": "https://registry.npmjs.org/node-int64/-/node-int64-0.4.0.tgz",
@@ -11996,25 +13316,188 @@
"resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.6.tgz",
"integrity": "sha512-PiVXnNuFm5+iYkLBNeq5211hvO38y63T0i2KKh2KnUs3RpzJ+JtODFjkD8yjLwnDkTYF1eKXheUwdssR+NRZdg=="
},
- "node_modules/normalize-path": {
- "version": "3.0.0",
- "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
- "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+ "node_modules/node-sass": {
+ "version": "7.0.3",
+ "resolved": "https://registry.npmjs.org/node-sass/-/node-sass-7.0.3.tgz",
+ "integrity": "sha512-8MIlsY/4dXUkJDYht9pIWBhMil3uHmE8b/AdJPjmFn1nBx9X9BASzfzmsCy0uCCb8eqI3SYYzVPDswWqSx7gjw==",
+ "hasInstallScript": true,
+ "dependencies": {
+ "async-foreach": "^0.1.3",
+ "chalk": "^4.1.2",
+ "cross-spawn": "^7.0.3",
+ "gaze": "^1.0.0",
+ "get-stdin": "^4.0.1",
+ "glob": "^7.0.3",
+ "lodash": "^4.17.15",
+ "meow": "^9.0.0",
+ "nan": "^2.13.2",
+ "node-gyp": "^8.4.1",
+ "npmlog": "^5.0.0",
+ "request": "^2.88.0",
+ "sass-graph": "^4.0.1",
+ "stdout-stream": "^1.4.0",
+ "true-case-path": "^1.0.2"
+ },
+ "bin": {
+ "node-sass": "bin/node-sass"
+ },
"engines": {
- "node": ">=0.10.0"
+ "node": ">=12"
}
},
- "node_modules/normalize-range": {
- "version": "0.1.2",
- "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
- "integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==",
+ "node_modules/node-sass/node_modules/ansi-styles": {
+ "version": "4.3.0",
+ "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+ "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+ "dependencies": {
+ "color-convert": "^2.0.1"
+ },
"engines": {
- "node": ">=0.10.0"
+ "node": ">=8"
+ },
+ "funding": {
+ "url": "https://github.com/chalk/ansi-styles?sponsor=1"
}
},
- "node_modules/normalize-url": {
- "version": "6.1.0",
- "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-6.1.0.tgz",
+ "node_modules/node-sass/node_modules/are-we-there-yet": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-2.0.0.tgz",
+ "integrity": "sha512-Ci/qENmwHnsYo9xKIcUJN5LeDKdJ6R1Z1j9V/J5wyq8nh/mYPEpIKJbBZXtZjG04HiK7zV/p6Vs9952MrMeUIw==",
+ "dependencies": {
+ "delegates": "^1.0.0",
+ "readable-stream": "^3.6.0"
+ },
+ "engines": {
+ "node": ">=10"
+ }
+ },
+ "node_modules/node-sass/node_modules/chalk": {
+ "version": "4.1.2",
+ "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+ "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+ "dependencies": {
+ "ansi-styles": "^4.1.0",
+ "supports-color": "^7.1.0"
+ },
+ "engines": {
+ "node": ">=10"
+ },
+ "funding": {
+ "url": "https://github.com/chalk/chalk?sponsor=1"
+ }
+ },
+ "node_modules/node-sass/node_modules/color-convert": {
+ "version": "2.0.1",
+ "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+ "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+ "dependencies": {
+ "color-name": "~1.1.4"
+ },
+ "engines": {
+ "node": ">=7.0.0"
+ }
+ },
+ "node_modules/node-sass/node_modules/color-name": {
+ "version": "1.1.4",
+ "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+ "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+ },
+ "node_modules/node-sass/node_modules/gauge": {
+ "version": "3.0.2",
+ "resolved": "https://registry.npmjs.org/gauge/-/gauge-3.0.2.tgz",
+ "integrity": "sha512-+5J6MS/5XksCuXq++uFRsnUd7Ovu1XenbeuIuNRJxYWjgQbPuFhT14lAvsWfqfAmnwluf1OwMjz39HjfLPci0Q==",
+ "dependencies": {
+ "aproba": "^1.0.3 || ^2.0.0",
+ "color-support": "^1.1.2",
+ "console-control-strings": "^1.0.0",
+ "has-unicode": "^2.0.1",
+ "object-assign": "^4.1.1",
+ "signal-exit": "^3.0.0",
+ "string-width": "^4.2.3",
+ "strip-ansi": "^6.0.1",
+ "wide-align": "^1.1.2"
+ },
+ "engines": {
+ "node": ">=10"
+ }
+ },
+ "node_modules/node-sass/node_modules/has-flag": {
+ "version": "4.0.0",
+ "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+ "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+ "engines": {
+ "node": ">=8"
+ }
+ },
+ "node_modules/node-sass/node_modules/npmlog": {
+ "version": "5.0.1",
+ "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-5.0.1.tgz",
+ "integrity": "sha512-AqZtDUWOMKs1G/8lwylVjrdYgqA4d9nu8hc+0gzRxlDb1I10+FHBGMXs6aiQHFdCUUlqH99MUMuLfzWDNDtfxw==",
+ "dependencies": {
+ "are-we-there-yet": "^2.0.0",
+ "console-control-strings": "^1.1.0",
+ "gauge": "^3.0.0",
+ "set-blocking": "^2.0.0"
+ }
+ },
+ "node_modules/node-sass/node_modules/supports-color": {
+ "version": "7.2.0",
+ "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+ "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+ "dependencies": {
+ "has-flag": "^4.0.0"
+ },
+ "engines": {
+ "node": ">=8"
+ }
+ },
+ "node_modules/nopt": {
+ "version": "5.0.0",
+ "resolved": "https://registry.npmjs.org/nopt/-/nopt-5.0.0.tgz",
+ "integrity": "sha512-Tbj67rffqceeLpcRXrT7vKAN8CwfPeIBgM7E6iBkmKLV7bEMwpGgYLGv0jACUsECaa/vuxP0IjEont6umdMgtQ==",
+ "dependencies": {
+ "abbrev": "1"
+ },
+ "bin": {
+ "nopt": "bin/nopt.js"
+ },
+ "engines": {
+ "node": ">=6"
+ }
+ },
+ "node_modules/normalize-package-data": {
+ "version": "3.0.3",
+ "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-3.0.3.tgz",
+ "integrity": "sha512-p2W1sgqij3zMMyRC067Dg16bfzVH+w7hyegmpIvZ4JNjqtGOVAIvLmjBx3yP7YTe9vKJgkoNOPjwQGogDoMXFA==",
+ "dependencies": {
+ "hosted-git-info": "^4.0.1",
+ "is-core-module": "^2.5.0",
+ "semver": "^7.3.4",
+ "validate-npm-package-license": "^3.0.1"
+ },
+ "engines": {
+ "node": ">=10"
+ }
+ },
+ "node_modules/normalize-path": {
+ "version": "3.0.0",
+ "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+ "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+ "engines": {
+ "node": ">=0.10.0"
+ }
+ },
+ "node_modules/normalize-range": {
+ "version": "0.1.2",
+ "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
+ "integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==",
+ "engines": {
+ "node": ">=0.10.0"
+ }
+ },
+ "node_modules/normalize-url": {
+ "version": "6.1.0",
+ "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-6.1.0.tgz",
"integrity": "sha512-DlL+XwOy3NxAQ8xuC0okPgK46iuVNAK01YN7RueYBqqFeGsBjV9XmCAzAdgt+667bCl5kPh9EqKKDwnaPG1I7A==",
"engines": {
"node": ">=10"
@@ -12034,6 +13517,20 @@
"node": ">=8"
}
},
+ "node_modules/npmlog": {
+ "version": "6.0.2",
+ "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-6.0.2.tgz",
+ "integrity": "sha512-/vBvz5Jfr9dT/aFWd0FIRf+T/Q2WBsLENygUaFUqstqsycmZAP/t5BvFJTK0viFmSUxiUKTUplWy5vt+rvKIxg==",
+ "dependencies": {
+ "are-we-there-yet": "^3.0.0",
+ "console-control-strings": "^1.1.0",
+ "gauge": "^4.0.3",
+ "set-blocking": "^2.0.0"
+ },
+ "engines": {
+ "node": "^12.13.0 || ^14.15.0 || >=16.0.0"
+ }
+ },
"node_modules/nth-check": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
@@ -12050,6 +13547,14 @@
"resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.2.tgz",
"integrity": "sha512-90yv+6538zuvUMnN+zCr8LuV6bPFdq50304114vJYJ8RDyK8D5O9Phpbd6SZWgI7PwzmmfN1upeOJlvybDSgCw=="
},
+ "node_modules/oauth-sign": {
+ "version": "0.9.0",
+ "resolved": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.9.0.tgz",
+ "integrity": "sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ==",
+ "engines": {
+ "node": "*"
+ }
+ },
"node_modules/object-assign": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
@@ -12294,6 +13799,20 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
+ "node_modules/p-map": {
+ "version": "4.0.0",
+ "resolved": "https://registry.npmjs.org/p-map/-/p-map-4.0.0.tgz",
+ "integrity": "sha512-/bjOqmgETBYB5BoEeGVea8dmvHb2m9GLy1E9W43yeyfP6QQCZGFNa+XRceJEuDB6zqr+gKpIAmlLebMpykw/MQ==",
+ "dependencies": {
+ "aggregate-error": "^3.0.0"
+ },
+ "engines": {
+ "node": ">=10"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/sindresorhus"
+ }
+ },
"node_modules/p-retry": {
"version": "4.6.2",
"resolved": "https://registry.npmjs.org/p-retry/-/p-retry-4.6.2.tgz",
@@ -13807,6 +15326,36 @@
"asap": "~2.0.6"
}
},
+ "node_modules/promise-inflight": {
+ "version": "1.0.1",
+ "resolved": "https://registry.npmjs.org/promise-inflight/-/promise-inflight-1.0.1.tgz",
+ "integrity": "sha512-6zWPyEOFaQBJYcGMHBKTKJ3u6TBsnMFOIZSa6ce1e/ZrrsOlnHRHbabMjLiBYKp+n44X9eUI6VUPaukCXHuG4g=="
+ },
+ "node_modules/promise-polyfill": {
+ "version": "6.1.0",
+ "resolved": "https://registry.npmjs.org/promise-polyfill/-/promise-polyfill-6.1.0.tgz",
+ "integrity": "sha512-g0LWaH0gFsxovsU7R5LrrhHhWAWiHRnh1GPrhXnPgYsDkIqjRYUYSZEsej/wtleDrz5xVSIDbeKfidztp2XHFQ=="
+ },
+ "node_modules/promise-retry": {
+ "version": "2.0.1",
+ "resolved": "https://registry.npmjs.org/promise-retry/-/promise-retry-2.0.1.tgz",
+ "integrity": "sha512-y+WKFlBR8BGXnsNlIHFGPZmyDf3DFMoLhaflAnyZgV6rG6xu+JwesTo2Q9R6XwYmtmwAFCkAk3e35jEdoeh/3g==",
+ "dependencies": {
+ "err-code": "^2.0.2",
+ "retry": "^0.12.0"
+ },
+ "engines": {
+ "node": ">=10"
+ }
+ },
+ "node_modules/promise-retry/node_modules/retry": {
+ "version": "0.12.0",
+ "resolved": "https://registry.npmjs.org/retry/-/retry-0.12.0.tgz",
+ "integrity": "sha512-9LkiTwjUh6rT555DtE9rTX+BKByPfrMzEAtnlEtdEwr3Nkffwiihqe2bWADg+OQRjt9gl6ICdmB/ZFDCGAtSow==",
+ "engines": {
+ "node": ">= 4"
+ }
+ },
"node_modules/prompts": {
"version": "2.4.2",
"resolved": "https://registry.npmjs.org/prompts/-/prompts-2.4.2.tgz",
@@ -13854,6 +15403,11 @@
"node": ">= 0.10"
}
},
+ "node_modules/proxy-from-env": {
+ "version": "1.1.0",
+ "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+ "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+ },
"node_modules/psl": {
"version": "1.9.0",
"resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz",
@@ -13982,6 +15536,15 @@
"node": ">=0.10.0"
}
},
+ "node_modules/rc-highlight": {
+ "version": "2.3.4",
+ "resolved": "https://registry.npmjs.org/rc-highlight/-/rc-highlight-2.3.4.tgz",
+ "integrity": "sha512-LqljqG4ZHna2/9fkdXRGJ8c0slywuA0+taGzK4byU63MgW4SpMPYtKWs8kdyFN53Ai2uGWjKIlsbD5rtKk4bDg==",
+ "peerDependencies": {
+ "react": "^17.0.0 || ^18.0.0",
+ "react-dom": "^17.0.0 || ^18.0.0"
+ }
+ },
"node_modules/react": {
"version": "18.2.0",
"resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
@@ -14156,6 +15719,36 @@
"node": ">=0.10.0"
}
},
+ "node_modules/react-router": {
+ "version": "6.4.3",
+ "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.4.3.tgz",
+ "integrity": "sha512-BT6DoGn6aV1FVP5yfODMOiieakp3z46P1Fk0RNzJMACzE7C339sFuHebfvWtnB4pzBvXXkHP2vscJzWRuUjTtA==",
+ "dependencies": {
+ "@remix-run/router": "1.0.3"
+ },
+ "engines": {
+ "node": ">=14"
+ },
+ "peerDependencies": {
+ "react": ">=16.8"
+ }
+ },
+ "node_modules/react-router-dom": {
+ "version": "6.4.3",
+ "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.4.3.tgz",
+ "integrity": "sha512-MiaYQU8CwVCaOfJdYvt84KQNjT78VF0TJrA17SIQgNHRvLnXDJO6qsFqq8F/zzB1BWZjCFIrQpu4QxcshitziQ==",
+ "dependencies": {
+ "@remix-run/router": "1.0.3",
+ "react-router": "6.4.3"
+ },
+ "engines": {
+ "node": ">=14"
+ },
+ "peerDependencies": {
+ "react": ">=16.8",
+ "react-dom": ">=16.8"
+ }
+ },
"node_modules/react-scripts": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
@@ -14228,6 +15821,21 @@
}
}
},
+ "node_modules/react-transition-group": {
+ "version": "4.4.5",
+ "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
+ "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
+ "dependencies": {
+ "@babel/runtime": "^7.5.5",
+ "dom-helpers": "^5.0.1",
+ "loose-envify": "^1.4.0",
+ "prop-types": "^15.6.2"
+ },
+ "peerDependencies": {
+ "react": ">=16.6.0",
+ "react-dom": ">=16.6.0"
+ }
+ },
"node_modules/read-cache": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -14236,6 +15844,124 @@
"pify": "^2.3.0"
}
},
+ "node_modules/read-pkg": {
+ "version": "5.2.0",
+ "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz",
+ "integrity": "sha512-Ug69mNOpfvKDAc2Q8DRpMjjzdtrnv9HcSMX+4VsZxD1aZ6ZzrIE7rlzXBtWTyhULSMKg076AW6WR5iZpD0JiOg==",
+ "dependencies": {
+ "@types/normalize-package-data": "^2.4.0",
+ "normalize-package-data": "^2.5.0",
+ "parse-json": "^5.0.0",
+ "type-fest": "^0.6.0"
+ },
+ "engines": {
+ "node": ">=8"
+ }
+ },
+ "node_modules/read-pkg-up": {
+ "version": "7.0.1",
+ "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-7.0.1.tgz",
+ "integrity": "sha512-zK0TB7Xd6JpCLmlLmufqykGE+/TlOePD6qKClNW7hHDKFh/J7/7gCWGR7joEQEW1bKq3a3yUZSObOoWLFQ4ohg==",
+ "dependencies": {
+ "find-up": "^4.1.0",
+ "read-pkg": "^5.2.0",
+ "type-fest": "^0.8.1"
+ },
+ "engines": {
+ "node": ">=8"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/sindresorhus"
+ }
+ },
+ "node_modules/read-pkg-up/node_modules/find-up": {
+ "version": "4.1.0",
+ "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
+ "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
+ "dependencies": {
+ "locate-path": "^5.0.0",
+ "path-exists": "^4.0.0"
+ },
+ "engines": {
+ "node": ">=8"
+ }
+ },
+ "node_modules/read-pkg-up/node_modules/locate-path": {
+ "version": "5.0.0",
+ "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
+ "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
+ "dependencies": {
+ "p-locate": "^4.1.0"
+ },
+ "engines": {
+ "node": ">=8"
+ }
+ },
+ "node_modules/read-pkg-up/node_modules/p-limit": {
+ "version": "2.3.0",
+ "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+ "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+ "dependencies": {
+ "p-try": "^2.0.0"
+ },
+ "engines": {
+ "node": ">=6"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/sindresorhus"
+ }
+ },
+ "node_modules/read-pkg-up/node_modules/p-locate": {
+ "version": "4.1.0",
+ "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
+ "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
+ "dependencies": {
+ "p-limit": "^2.2.0"
+ },
+ "engines": {
+ "node": ">=8"
+ }
+ },
+ "node_modules/read-pkg-up/node_modules/type-fest": {
+ "version": "0.8.1",
+ "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.8.1.tgz",
+ "integrity": "sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==",
+ "engines": {
+ "node": ">=8"
+ }
+ },
+ "node_modules/read-pkg/node_modules/hosted-git-info": {
+ "version": "2.8.9",
+ "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz",
+ "integrity": "sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw=="
+ },
+ "node_modules/read-pkg/node_modules/normalize-package-data": {
+ "version": "2.5.0",
+ "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.5.0.tgz",
+ "integrity": "sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==",
+ "dependencies": {
+ "hosted-git-info": "^2.1.4",
+ "resolve": "^1.10.0",
+ "semver": "2 || 3 || 4 || 5",
+ "validate-npm-package-license": "^3.0.1"
+ }
+ },
+ "node_modules/read-pkg/node_modules/semver": {
+ "version": "5.7.1",
+ "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
+ "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+ "bin": {
+ "semver": "bin/semver"
+ }
+ },
+ "node_modules/read-pkg/node_modules/type-fest": {
+ "version": "0.6.0",
+ "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.6.0.tgz",
+ "integrity": "sha512-q+MB8nYR1KDLrgr4G5yemftpMC7/QLqVndBmEEdqzmNj5dcFOO4Oo8qlwZE3ULT3+Zim1F8Kq4cBnikNhlCMlg==",
+ "engines": {
+ "node": ">=8"
+ }
+ },
"node_modules/readable-stream": {
"version": "3.6.0",
"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
@@ -14404,6 +16130,79 @@
"strip-ansi": "^6.0.1"
}
},
+ "node_modules/request": {
+ "version": "2.88.2",
+ "resolved": "https://registry.npmjs.org/request/-/request-2.88.2.tgz",
+ "integrity": "sha512-MsvtOrfG9ZcrOwAW+Qi+F6HbD0CWXEh9ou77uOb7FM2WPhwT7smM833PzanhJLsgXjN89Ir6V2PczXNnMpwKhw==",
+ "deprecated": "request has been deprecated, see https://github.com/request/request/issues/3142",
+ "dependencies": {
+ "aws-sign2": "~0.7.0",
+ "aws4": "^1.8.0",
+ "caseless": "~0.12.0",
+ "combined-stream": "~1.0.6",
+ "extend": "~3.0.2",
+ "forever-agent": "~0.6.1",
+ "form-data": "~2.3.2",
+ "har-validator": "~5.1.3",
+ "http-signature": "~1.2.0",
+ "is-typedarray": "~1.0.0",
+ "isstream": "~0.1.2",
+ "json-stringify-safe": "~5.0.1",
+ "mime-types": "~2.1.19",
+ "oauth-sign": "~0.9.0",
+ "performance-now": "^2.1.0",
+ "qs": "~6.5.2",
+ "safe-buffer": "^5.1.2",
+ "tough-cookie": "~2.5.0",
+ "tunnel-agent": "^0.6.0",
+ "uuid": "^3.3.2"
+ },
+ "engines": {
+ "node": ">= 6"
+ }
+ },
+ "node_modules/request/node_modules/form-data": {
+ "version": "2.3.3",
+ "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.3.3.tgz",
+ "integrity": "sha512-1lLKB2Mu3aGP1Q/2eCOx0fNbRMe7XdwktwOruhfqqd0rIJWwN4Dh+E3hrPSlDCXnSR7UtZ1N38rVXm+6+MEhJQ==",
+ "dependencies": {
+ "asynckit": "^0.4.0",
+ "combined-stream": "^1.0.6",
+ "mime-types": "^2.1.12"
+ },
+ "engines": {
+ "node": ">= 0.12"
+ }
+ },
+ "node_modules/request/node_modules/qs": {
+ "version": "6.5.3",
+ "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.3.tgz",
+ "integrity": "sha512-qxXIEh4pCGfHICj1mAJQ2/2XVZkjCDTcEgfoSQxc/fYivUZxTkk7L3bDBJSoNrEzXI17oUO5Dp07ktqE5KzczA==",
+ "engines": {
+ "node": ">=0.6"
+ }
+ },
+ "node_modules/request/node_modules/tough-cookie": {
+ "version": "2.5.0",
+ "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.5.0.tgz",
+ "integrity": "sha512-nlLsUzgm1kfLXSXfRZMc1KLAugd4hqJHDTvc2hDIwS3mZAfMEuMbc03SujMF+GEcpaX/qboeycw6iO8JwVv2+g==",
+ "dependencies": {
+ "psl": "^1.1.28",
+ "punycode": "^2.1.1"
+ },
+ "engines": {
+ "node": ">=0.8"
+ }
+ },
+ "node_modules/request/node_modules/uuid": {
+ "version": "3.4.0",
+ "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
+ "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
+ "deprecated": "Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.",
+ "bin": {
+ "uuid": "bin/uuid"
+ }
+ },
"node_modules/require-directory": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
@@ -14687,6 +16486,61 @@
"resolved": "https://registry.npmjs.org/sanitize.css/-/sanitize.css-13.0.0.tgz",
"integrity": "sha512-ZRwKbh/eQ6w9vmTjkuG0Ioi3HBwPFce0O+v//ve+aOq1oeCy7jMV2qzzAlpsNuqpqCBjjriM1lbtZbF/Q8jVyA=="
},
+ "node_modules/sass-graph": {
+ "version": "4.0.1",
+ "resolved": "https://registry.npmjs.org/sass-graph/-/sass-graph-4.0.1.tgz",
+ "integrity": "sha512-5YCfmGBmxoIRYHnKK2AKzrAkCoQ8ozO+iumT8K4tXJXRVCPf+7s1/9KxTSW3Rbvf+7Y7b4FR3mWyLnQr3PHocA==",
+ "dependencies": {
+ "glob": "^7.0.0",
+ "lodash": "^4.17.11",
+ "scss-tokenizer": "^0.4.3",
+ "yargs": "^17.2.1"
+ },
+ "bin": {
+ "sassgraph": "bin/sassgraph"
+ },
+ "engines": {
+ "node": ">=12"
+ }
+ },
+ "node_modules/sass-graph/node_modules/cliui": {
+ "version": "8.0.1",
+ "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz",
+ "integrity": "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==",
+ "dependencies": {
+ "string-width": "^4.2.0",
+ "strip-ansi": "^6.0.1",
+ "wrap-ansi": "^7.0.0"
+ },
+ "engines": {
+ "node": ">=12"
+ }
+ },
+ "node_modules/sass-graph/node_modules/yargs": {
+ "version": "17.6.2",
+ "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.6.2.tgz",
+ "integrity": "sha512-1/9UrdHjDZc0eOU0HxOHoS78C69UD3JRMvzlJ7S79S2nTaWRA/whGCTV8o9e/N/1Va9YIV7Q4sOxD8VV4pCWOw==",
+ "dependencies": {
+ "cliui": "^8.0.1",
+ "escalade": "^3.1.1",
+ "get-caller-file": "^2.0.5",
+ "require-directory": "^2.1.1",
+ "string-width": "^4.2.3",
+ "y18n": "^5.0.5",
+ "yargs-parser": "^21.1.1"
+ },
+ "engines": {
+ "node": ">=12"
+ }
+ },
+ "node_modules/sass-graph/node_modules/yargs-parser": {
+ "version": "21.1.1",
+ "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz",
+ "integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==",
+ "engines": {
+ "node": ">=12"
+ }
+ },
"node_modules/sass-loader": {
"version": "12.6.0",
"resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-12.6.0.tgz",
@@ -14765,6 +16619,15 @@
"url": "https://opencollective.com/webpack"
}
},
+ "node_modules/scss-tokenizer": {
+ "version": "0.4.3",
+ "resolved": "https://registry.npmjs.org/scss-tokenizer/-/scss-tokenizer-0.4.3.tgz",
+ "integrity": "sha512-raKLgf1LI5QMQnG+RxHz6oK0sL3x3I4FN2UDLqgLOGO8hodECNnNh5BXn7fAyBxrA8zVzdQizQ6XjNJQ+uBwMw==",
+ "dependencies": {
+ "js-base64": "^2.4.9",
+ "source-map": "^0.7.3"
+ }
+ },
"node_modules/select-hose": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
@@ -14928,6 +16791,11 @@
"node": ">= 0.8.0"
}
},
+ "node_modules/set-blocking": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
+ "integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw=="
+ },
"node_modules/setprototypeof": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
@@ -14991,6 +16859,15 @@
"node": ">=8"
}
},
+ "node_modules/smart-buffer": {
+ "version": "4.2.0",
+ "resolved": "https://registry.npmjs.org/smart-buffer/-/smart-buffer-4.2.0.tgz",
+ "integrity": "sha512-94hK0Hh8rPqQl2xXc3HsaBoOXKV20MToPkcXvwbISWLEs+64sBq5kFgn2kJDHb1Pry9yrP0dxrCI9RRci7RXKg==",
+ "engines": {
+ "node": ">= 6.0.0",
+ "npm": ">= 3.0.0"
+ }
+ },
"node_modules/sockjs": {
"version": "0.3.24",
"resolved": "https://registry.npmjs.org/sockjs/-/sockjs-0.3.24.tgz",
@@ -15001,6 +16878,32 @@
"websocket-driver": "^0.7.4"
}
},
+ "node_modules/socks": {
+ "version": "2.7.1",
+ "resolved": "https://registry.npmjs.org/socks/-/socks-2.7.1.tgz",
+ "integrity": "sha512-7maUZy1N7uo6+WVEX6psASxtNlKaNVMlGQKkG/63nEDdLOWNbiUMoLK7X4uYoLhQstau72mLgfEWcXcwsaHbYQ==",
+ "dependencies": {
+ "ip": "^2.0.0",
+ "smart-buffer": "^4.2.0"
+ },
+ "engines": {
+ "node": ">= 10.13.0",
+ "npm": ">= 3.0.0"
+ }
+ },
+ "node_modules/socks-proxy-agent": {
+ "version": "6.2.1",
+ "resolved": "https://registry.npmjs.org/socks-proxy-agent/-/socks-proxy-agent-6.2.1.tgz",
+ "integrity": "sha512-a6KW9G+6B3nWZ1yB8G7pJwL3ggLy1uTzKAgCb7ttblwqdz9fMGJUuTy3uFzEP48FAs9FLILlmzDlE2JJhVQaXQ==",
+ "dependencies": {
+ "agent-base": "^6.0.2",
+ "debug": "^4.3.3",
+ "socks": "^2.6.2"
+ },
+ "engines": {
+ "node": ">= 10"
+ }
+ },
"node_modules/source-list-map": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz",
@@ -15064,6 +16967,34 @@
"resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
"integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA=="
},
+ "node_modules/spdx-correct": {
+ "version": "3.1.1",
+ "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.1.1.tgz",
+ "integrity": "sha512-cOYcUWwhCuHCXi49RhFRCyJEK3iPj1Ziz9DpViV3tbZOwXD49QzIN3MpOLJNxh2qwq2lJJZaKMVw9qNi4jTC0w==",
+ "dependencies": {
+ "spdx-expression-parse": "^3.0.0",
+ "spdx-license-ids": "^3.0.0"
+ }
+ },
+ "node_modules/spdx-exceptions": {
+ "version": "2.3.0",
+ "resolved": "https://registry.npmjs.org/spdx-exceptions/-/spdx-exceptions-2.3.0.tgz",
+ "integrity": "sha512-/tTrYOC7PPI1nUAgx34hUpqXuyJG+DTHJTnIULG4rDygi4xu/tfgmq1e1cIRwRzwZgo4NLySi+ricLkZkw4i5A=="
+ },
+ "node_modules/spdx-expression-parse": {
+ "version": "3.0.1",
+ "resolved": "https://registry.npmjs.org/spdx-expression-parse/-/spdx-expression-parse-3.0.1.tgz",
+ "integrity": "sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==",
+ "dependencies": {
+ "spdx-exceptions": "^2.1.0",
+ "spdx-license-ids": "^3.0.0"
+ }
+ },
+ "node_modules/spdx-license-ids": {
+ "version": "3.0.12",
+ "resolved": "https://registry.npmjs.org/spdx-license-ids/-/spdx-license-ids-3.0.12.tgz",
+ "integrity": "sha512-rr+VVSXtRhO4OHbXUiAF7xW3Bo9DuuF6C5jH+q/x15j2jniycgKbxU09Hr0WqlSLUs4i4ltHGXqTe7VHclYWyA=="
+ },
"node_modules/spdy": {
"version": "4.0.2",
"resolved": "https://registry.npmjs.org/spdy/-/spdy-4.0.2.tgz",
@@ -15097,6 +17028,41 @@
"resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
"integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g=="
},
+ "node_modules/sshpk": {
+ "version": "1.17.0",
+ "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.17.0.tgz",
+ "integrity": "sha512-/9HIEs1ZXGhSPE8X6Ccm7Nam1z8KcoCqPdI7ecm1N33EzAetWahvQWVqLZtaZQ+IDKX4IyA2o0gBzqIMkAagHQ==",
+ "dependencies": {
+ "asn1": "~0.2.3",
+ "assert-plus": "^1.0.0",
+ "bcrypt-pbkdf": "^1.0.0",
+ "dashdash": "^1.12.0",
+ "ecc-jsbn": "~0.1.1",
+ "getpass": "^0.1.1",
+ "jsbn": "~0.1.0",
+ "safer-buffer": "^2.0.2",
+ "tweetnacl": "~0.14.0"
+ },
+ "bin": {
+ "sshpk-conv": "bin/sshpk-conv",
+ "sshpk-sign": "bin/sshpk-sign",
+ "sshpk-verify": "bin/sshpk-verify"
+ },
+ "engines": {
+ "node": ">=0.10.0"
+ }
+ },
+ "node_modules/ssri": {
+ "version": "8.0.1",
+ "resolved": "https://registry.npmjs.org/ssri/-/ssri-8.0.1.tgz",
+ "integrity": "sha512-97qShzy1AiyxvPNIkLWoGua7xoQzzPjQ0HAH4B0rWKo7SZ6USuPcrUiAFrws0UH8RrbWmgq3LMTObhPIHbbBeQ==",
+ "dependencies": {
+ "minipass": "^3.1.1"
+ },
+ "engines": {
+ "node": ">= 8"
+ }
+ },
"node_modules/stable": {
"version": "0.1.8",
"resolved": "https://registry.npmjs.org/stable/-/stable-0.1.8.tgz",
@@ -15135,6 +17101,41 @@
"node": ">= 0.8"
}
},
+ "node_modules/stdout-stream": {
+ "version": "1.4.1",
+ "resolved": "https://registry.npmjs.org/stdout-stream/-/stdout-stream-1.4.1.tgz",
+ "integrity": "sha512-j4emi03KXqJWcIeF8eIXkjMFN1Cmb8gUlDYGeBALLPo5qdyTfA9bOtl8m33lRoC+vFMkP3gl0WsDr6+gzxbbTA==",
+ "dependencies": {
+ "readable-stream": "^2.0.1"
+ }
+ },
+ "node_modules/stdout-stream/node_modules/readable-stream": {
+ "version": "2.3.7",
+ "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
+ "integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==",
+ "dependencies": {
+ "core-util-is": "~1.0.0",
+ "inherits": "~2.0.3",
+ "isarray": "~1.0.0",
+ "process-nextick-args": "~2.0.0",
+ "safe-buffer": "~5.1.1",
+ "string_decoder": "~1.1.1",
+ "util-deprecate": "~1.0.1"
+ }
+ },
+ "node_modules/stdout-stream/node_modules/safe-buffer": {
+ "version": "5.1.2",
+ "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+ "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+ },
+ "node_modules/stdout-stream/node_modules/string_decoder": {
+ "version": "1.1.1",
+ "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+ "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+ "dependencies": {
+ "safe-buffer": "~5.1.0"
+ }
+ },
"node_modules/string_decoder": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
@@ -15322,6 +17323,11 @@
"postcss": "^8.2.15"
}
},
+ "node_modules/stylis": {
+ "version": "4.1.3",
+ "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.1.3.tgz",
+ "integrity": "sha512-GP6WDNWf+o403jrEp9c5jibKavrtLW+/qYGhFxFrG8maXhwTBI7gLLhiBb0o7uFccWN+EOS9aMO6cGHWAO07OA=="
+ },
"node_modules/supports-color": {
"version": "5.5.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
@@ -15460,6 +17466,15 @@
"boolbase": "~1.0.0"
}
},
+ "node_modules/sweetalert": {
+ "version": "2.1.2",
+ "resolved": "https://registry.npmjs.org/sweetalert/-/sweetalert-2.1.2.tgz",
+ "integrity": "sha512-iWx7X4anRBNDa/a+AdTmvAzQtkN1+s4j/JJRWlHpYE8Qimkohs8/XnFcWeYHH2lMA8LRCa5tj2d244If3S/hzA==",
+ "dependencies": {
+ "es6-object-assign": "^1.1.0",
+ "promise-polyfill": "^6.0.2"
+ }
+ },
"node_modules/symbol-tree": {
"version": "3.2.4",
"resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
@@ -15515,7 +17530,34 @@
"resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
"integrity": "sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==",
"engines": {
- "node": ">=6"
+ "node": ">=6"
+ }
+ },
+ "node_modules/tar": {
+ "version": "6.1.12",
+ "resolved": "https://registry.npmjs.org/tar/-/tar-6.1.12.tgz",
+ "integrity": "sha512-jU4TdemS31uABHd+Lt5WEYJuzn+TJTCBLljvIAHZOz6M9Os5pJ4dD+vRFLxPa/n3T0iEFzpi+0x1UfuDZYbRMw==",
+ "dependencies": {
+ "chownr": "^2.0.0",
+ "fs-minipass": "^2.0.0",
+ "minipass": "^3.0.0",
+ "minizlib": "^2.1.1",
+ "mkdirp": "^1.0.3",
+ "yallist": "^4.0.0"
+ },
+ "engines": {
+ "node": ">=10"
+ }
+ },
+ "node_modules/tar/node_modules/mkdirp": {
+ "version": "1.0.4",
+ "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
+ "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
+ "bin": {
+ "mkdirp": "bin/cmd.js"
+ },
+ "engines": {
+ "node": ">=10"
}
},
"node_modules/temp-dir": {
@@ -15717,6 +17759,22 @@
"node": ">=8"
}
},
+ "node_modules/trim-newlines": {
+ "version": "3.0.1",
+ "resolved": "https://registry.npmjs.org/trim-newlines/-/trim-newlines-3.0.1.tgz",
+ "integrity": "sha512-c1PTsA3tYrIsLGkJkzHF+w9F2EyxfXGo4UyJc4pFL++FMjnq0HJS69T3M7d//gKrFKwy429bouPescbjecU+Zw==",
+ "engines": {
+ "node": ">=8"
+ }
+ },
+ "node_modules/true-case-path": {
+ "version": "1.0.3",
+ "resolved": "https://registry.npmjs.org/true-case-path/-/true-case-path-1.0.3.tgz",
+ "integrity": "sha512-m6s2OdQe5wgpFMC+pAJ+q9djG82O2jcHPOI6RNg1yy9rCYR+WD6Nbpl32fDpfC56nirdRy+opFa/Vk7HYhqaew==",
+ "dependencies": {
+ "glob": "^7.1.2"
+ }
+ },
"node_modules/tryer": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/tryer/-/tryer-1.0.1.tgz",
@@ -15776,6 +17834,22 @@
"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
"integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
},
+ "node_modules/tunnel-agent": {
+ "version": "0.6.0",
+ "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
+ "integrity": "sha512-McnNiV1l8RYeY8tBgEpuodCC1mLUdbSN+CYBL7kJsJNInOP8UjDDEwdk6Mw60vdLLrr5NHKZhMAOSrR2NZuQ+w==",
+ "dependencies": {
+ "safe-buffer": "^5.0.1"
+ },
+ "engines": {
+ "node": "*"
+ }
+ },
+ "node_modules/tweetnacl": {
+ "version": "0.14.5",
+ "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-0.14.5.tgz",
+ "integrity": "sha512-KXXFFdAbFXY4geFIwoyNK+f5Z1b7swfXABfL7HXCmoIWMKU3dmS26672A4EeQtDzLKy7SXmfBu51JolvEKwtGA=="
+ },
"node_modules/type-check": {
"version": "0.4.0",
"resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
@@ -15827,10 +17901,9 @@
}
},
"node_modules/typescript": {
- "version": "4.8.4",
- "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.8.4.tgz",
- "integrity": "sha512-QCh+85mCy+h0IGff8r5XWzOVSbBO+KfeYrMQh7NJ58QujwcE22u+NUSmUxqF+un70P9GXKxa2HCNiTTMJknyjQ==",
- "peer": true,
+ "version": "4.9.3",
+ "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.3.tgz",
+ "integrity": "sha512-CIfGzTelbKNEnLpLdGFgdyKhG23CKdKgQPOBc+OUNrkJ2vr+KSzsSV5kq5iWhEQbok+quxgGzrAtGWCyU7tHnA==",
"bin": {
"tsc": "bin/tsc",
"tsserver": "bin/tsserver"
@@ -15889,6 +17962,22 @@
"node": ">=4"
}
},
+ "node_modules/unique-filename": {
+ "version": "1.1.1",
+ "resolved": "https://registry.npmjs.org/unique-filename/-/unique-filename-1.1.1.tgz",
+ "integrity": "sha512-Vmp0jIp2ln35UTXuryvjzkjGdRyf9b2lTXuSYUiPmzRcl3FDtYqAwOnTJkAngD9SWhnoJzDbTKwaOrZ+STtxNQ==",
+ "dependencies": {
+ "unique-slug": "^2.0.0"
+ }
+ },
+ "node_modules/unique-slug": {
+ "version": "2.0.2",
+ "resolved": "https://registry.npmjs.org/unique-slug/-/unique-slug-2.0.2.tgz",
+ "integrity": "sha512-zoWr9ObaxALD3DOPfjPSqxt4fnZiWblxHIgeWqW8x7UqDzEtHEQLzji2cuJYQFCU6KmoJikOYAZlrTHHebjx2w==",
+ "dependencies": {
+ "imurmurhash": "^0.1.4"
+ }
+ },
"node_modules/unique-string": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/unique-string/-/unique-string-2.0.0.tgz",
@@ -16025,6 +18114,15 @@
"node": ">=10.12.0"
}
},
+ "node_modules/validate-npm-package-license": {
+ "version": "3.0.4",
+ "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",
+ "integrity": "sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==",
+ "dependencies": {
+ "spdx-correct": "^3.0.0",
+ "spdx-expression-parse": "^3.0.0"
+ }
+ },
"node_modules/vary": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
@@ -16033,6 +18131,24 @@
"node": ">= 0.8"
}
},
+ "node_modules/verror": {
+ "version": "1.10.0",
+ "resolved": "https://registry.npmjs.org/verror/-/verror-1.10.0.tgz",
+ "integrity": "sha512-ZZKSmDAEFOijERBLkmYfJ+vmk3w+7hOLYDNkRCuRuMJGEmqYNCNLyBBFwWKVMhfwaEF3WOd0Zlw86U/WC/+nYw==",
+ "engines": [
+ "node >=0.6.0"
+ ],
+ "dependencies": {
+ "assert-plus": "^1.0.0",
+ "core-util-is": "1.0.2",
+ "extsprintf": "^1.2.0"
+ }
+ },
+ "node_modules/verror/node_modules/core-util-is": {
+ "version": "1.0.2",
+ "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
+ "integrity": "sha512-3lqz5YjWTYnW6dlDa5TLaTCcShfar1e40rmcJVwCBJC6mWlFuj0eCHIElmG1g5kyuJ/GD+8Wn4FFCcz4gJPfaQ=="
+ },
"node_modules/w3c-hr-time": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz",
@@ -16527,6 +18643,14 @@
"url": "https://github.com/sponsors/ljharb"
}
},
+ "node_modules/wide-align": {
+ "version": "1.1.5",
+ "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.5.tgz",
+ "integrity": "sha512-eDMORYaPNZ4sQIuuYPDHdQvf4gyCF9rEEV/yPxGfwPkRodwEgiMUUXTx/dex+Me0wxx53S+NgUHaP7y3MGlDmg==",
+ "dependencies": {
+ "string-width": "^1.0.2 || 2 || 3 || 4"
+ }
+ },
"node_modules/word-wrap": {
"version": "1.2.3",
"resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz",
@@ -18355,6 +20479,138 @@
"integrity": "sha512-IkpVW/ehM1hWKln4fCA3NzJU8KwD+kIOvPZA4cqxoJHtE21CCzjyp+Kxbu0i5I4tBNOlXPL9mjwnWlL0VEG4Fg==",
"requires": {}
},
+ "@dynamicss/dynamicss": {
+ "version": "2.2.8",
+ "resolved": "https://registry.npmjs.org/@dynamicss/dynamicss/-/dynamicss-2.2.8.tgz",
+ "integrity": "sha512-e6hrGUydr8f+c9E/9fHFSG5LoSLdq/MdZXXfbzEDWIVuzKF2hcdxZE7nHNqUNF2htw1mZ17Pyoshu3A6kFEeFA=="
+ },
+ "@emotion/babel-plugin": {
+ "version": "11.10.5",
+ "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.10.5.tgz",
+ "integrity": "sha512-xE7/hyLHJac7D2Ve9dKroBBZqBT7WuPQmWcq7HSGb84sUuP4mlOWoB8dvVfD9yk5DHkU1m6RW7xSoDtnQHNQeA==",
+ "requires": {
+ "@babel/helper-module-imports": "^7.16.7",
+ "@babel/plugin-syntax-jsx": "^7.17.12",
+ "@babel/runtime": "^7.18.3",
+ "@emotion/hash": "^0.9.0",
+ "@emotion/memoize": "^0.8.0",
+ "@emotion/serialize": "^1.1.1",
+ "babel-plugin-macros": "^3.1.0",
+ "convert-source-map": "^1.5.0",
+ "escape-string-regexp": "^4.0.0",
+ "find-root": "^1.1.0",
+ "source-map": "^0.5.7",
+ "stylis": "4.1.3"
+ },
+ "dependencies": {
+ "escape-string-regexp": {
+ "version": "4.0.0",
+ "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+ "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA=="
+ },
+ "source-map": {
+ "version": "0.5.7",
+ "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+ "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ=="
+ }
+ }
+ },
+ "@emotion/cache": {
+ "version": "11.10.5",
+ "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.10.5.tgz",
+ "integrity": "sha512-dGYHWyzTdmK+f2+EnIGBpkz1lKc4Zbj2KHd4cX3Wi8/OWr5pKslNjc3yABKH4adRGCvSX4VDC0i04mrrq0aiRA==",
+ "requires": {
+ "@emotion/memoize": "^0.8.0",
+ "@emotion/sheet": "^1.2.1",
+ "@emotion/utils": "^1.2.0",
+ "@emotion/weak-memoize": "^0.3.0",
+ "stylis": "4.1.3"
+ }
+ },
+ "@emotion/hash": {
+ "version": "0.9.0",
+ "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.0.tgz",
+ "integrity": "sha512-14FtKiHhy2QoPIzdTcvh//8OyBlknNs2nXRwIhG904opCby3l+9Xaf/wuPvICBF0rc1ZCNBd3nKe9cd2mecVkQ=="
+ },
+ "@emotion/is-prop-valid": {
+ "version": "1.2.0",
+ "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.0.tgz",
+ "integrity": "sha512-3aDpDprjM0AwaxGE09bOPkNxHpBd+kA6jty3RnaEXdweX1DF1U3VQpPYb0g1IStAuK7SVQ1cy+bNBBKp4W3Fjg==",
+ "requires": {
+ "@emotion/memoize": "^0.8.0"
+ }
+ },
+ "@emotion/memoize": {
+ "version": "0.8.0",
+ "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.0.tgz",
+ "integrity": "sha512-G/YwXTkv7Den9mXDO7AhLWkE3q+I92B+VqAE+dYG4NGPaHZGvt3G8Q0p9vmE+sq7rTGphUbAvmQ9YpbfMQGGlA=="
+ },
+ "@emotion/react": {
+ "version": "11.10.5",
+ "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.10.5.tgz",
+ "integrity": "sha512-TZs6235tCJ/7iF6/rvTaOH4oxQg2gMAcdHemjwLKIjKz4rRuYe1HJ2TQJKnAcRAfOUDdU8XoDadCe1rl72iv8A==",
+ "requires": {
+ "@babel/runtime": "^7.18.3",
+ "@emotion/babel-plugin": "^11.10.5",
+ "@emotion/cache": "^11.10.5",
+ "@emotion/serialize": "^1.1.1",
+ "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0",
+ "@emotion/utils": "^1.2.0",
+ "@emotion/weak-memoize": "^0.3.0",
+ "hoist-non-react-statics": "^3.3.1"
+ }
+ },
+ "@emotion/serialize": {
+ "version": "1.1.1",
+ "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.1.1.tgz",
+ "integrity": "sha512-Zl/0LFggN7+L1liljxXdsVSVlg6E/Z/olVWpfxUTxOAmi8NU7YoeWeLfi1RmnB2TATHoaWwIBRoL+FvAJiTUQA==",
+ "requires": {
+ "@emotion/hash": "^0.9.0",
+ "@emotion/memoize": "^0.8.0",
+ "@emotion/unitless": "^0.8.0",
+ "@emotion/utils": "^1.2.0",
+ "csstype": "^3.0.2"
+ }
+ },
+ "@emotion/sheet": {
+ "version": "1.2.1",
+ "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.2.1.tgz",
+ "integrity": "sha512-zxRBwl93sHMsOj4zs+OslQKg/uhF38MB+OMKoCrVuS0nyTkqnau+BM3WGEoOptg9Oz45T/aIGs1qbVAsEFo3nA=="
+ },
+ "@emotion/styled": {
+ "version": "11.10.5",
+ "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.10.5.tgz",
+ "integrity": "sha512-8EP6dD7dMkdku2foLoruPCNkRevzdcBaY6q0l0OsbyJK+x8D9HWjX27ARiSIKNF634hY9Zdoedh8bJCiva8yZw==",
+ "requires": {
+ "@babel/runtime": "^7.18.3",
+ "@emotion/babel-plugin": "^11.10.5",
+ "@emotion/is-prop-valid": "^1.2.0",
+ "@emotion/serialize": "^1.1.1",
+ "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0",
+ "@emotion/utils": "^1.2.0"
+ }
+ },
+ "@emotion/unitless": {
+ "version": "0.8.0",
+ "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.0.tgz",
+ "integrity": "sha512-VINS5vEYAscRl2ZUDiT3uMPlrFQupiKgHz5AA4bCH1miKBg4qtwkim1qPmJj/4WG6TreYMY111rEFsjupcOKHw=="
+ },
+ "@emotion/use-insertion-effect-with-fallbacks": {
+ "version": "1.0.0",
+ "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.0.tgz",
+ "integrity": "sha512-1eEgUGmkaljiBnRMTdksDV1W4kUnmwgp7X9G8B++9GYwl1lUdqSndSriIrTJ0N7LQaoauY9JJ2yhiOYK5+NI4A==",
+ "requires": {}
+ },
+ "@emotion/utils": {
+ "version": "1.2.0",
+ "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.2.0.tgz",
+ "integrity": "sha512-sn3WH53Kzpw8oQ5mgMmIzzyAaH2ZqFEbozVVBSYp538E06OSE6ytOp7pRAjNQR+Q/orwqdQYJSe2m3hCOeznkw=="
+ },
+ "@emotion/weak-memoize": {
+ "version": "0.3.0",
+ "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.3.0.tgz",
+ "integrity": "sha512-AHPmaAx+RYfZz0eYu6Gviiagpmiyw98ySSlQvCUhVGDRtDFe4DBS0x1bSjdF3gqUDYOczB+yYvBTtEylYSdRhg=="
+ },
"@eslint/eslintrc": {
"version": "1.3.3",
"resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.3.3.tgz",
@@ -18399,6 +20655,11 @@
}
}
},
+ "@gar/promisify": {
+ "version": "1.1.3",
+ "resolved": "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.3.tgz",
+ "integrity": "sha512-k2Ty1JcVojjJFwrg/ThKi2ujJ7XNLYaFGNB/bWT9wGR+oSMJHMa5w+CUq6p/pVrKeNNgA7pCqEcjSnHVoqJQFw=="
+ },
"@humanwhocodes/config-array": {
"version": "0.11.7",
"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.7.tgz",
@@ -18980,6 +21241,128 @@
"resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz",
"integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A=="
},
+ "@mui/base": {
+ "version": "5.0.0-alpha.106",
+ "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.106.tgz",
+ "integrity": "sha512-xJQQtwPCPwr6hGWTBdvDwHYwExn3Bw7nPQkN8Fuz8kHpZqoMVWQvvaFS557AIkkI2AFLV3DxVIMjbCvrIntBWg==",
+ "requires": {
+ "@babel/runtime": "^7.20.1",
+ "@emotion/is-prop-valid": "^1.2.0",
+ "@mui/types": "^7.2.1",
+ "@mui/utils": "^5.10.14",
+ "@popperjs/core": "^2.11.6",
+ "clsx": "^1.2.1",
+ "prop-types": "^15.8.1",
+ "react-is": "^18.2.0"
+ },
+ "dependencies": {
+ "react-is": {
+ "version": "18.2.0",
+ "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
+ "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
+ }
+ }
+ },
+ "@mui/core-downloads-tracker": {
+ "version": "5.10.14",
+ "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.10.14.tgz",
+ "integrity": "sha512-qLgIJNOR9Dre8JiZ/neVzOf4jf88J6YtOkQqugtMrleLjbfRVUSS4LWl9CSOjNq76quYdmYWnSDgfQqOooT2cQ=="
+ },
+ "@mui/icons-material": {
+ "version": "5.10.14",
+ "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.10.14.tgz",
+ "integrity": "sha512-qtH60slQa+7MZRn6kyui8rKuoGDglPqaHX+pzBKNvd8JCOlrnfY5DmGGDdToTXyXl8xJ8nhANZbrbpg7UVKq/Q==",
+ "requires": {
+ "@babel/runtime": "^7.20.1"
+ }
+ },
+ "@mui/material": {
+ "version": "5.10.14",
+ "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.10.14.tgz",
+ "integrity": "sha512-HWzKVAykePMx54WtxVwZyL1W4k3xlHYIqwMw0CaXAvgB3UE9yjABZuuGr8vG5Z6CSNWamzd+s1x8u7pQPFl9og==",
+ "requires": {
+ "@babel/runtime": "^7.20.1",
+ "@mui/base": "5.0.0-alpha.106",
+ "@mui/core-downloads-tracker": "^5.10.14",
+ "@mui/system": "^5.10.14",
+ "@mui/types": "^7.2.1",
+ "@mui/utils": "^5.10.14",
+ "@types/react-transition-group": "^4.4.5",
+ "clsx": "^1.2.1",
+ "csstype": "^3.1.1",
+ "prop-types": "^15.8.1",
+ "react-is": "^18.2.0",
+ "react-transition-group": "^4.4.5"
+ },
+ "dependencies": {
+ "react-is": {
+ "version": "18.2.0",
+ "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
+ "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
+ }
+ }
+ },
+ "@mui/private-theming": {
+ "version": "5.10.14",
+ "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.10.14.tgz",
+ "integrity": "sha512-3aIBe8WK65CwAPDY8nB11hYnzE1CZMymi76UnaFrA/DdGDwl5Y8F6uB+StKrkVmsqF1po7Mp2odqVkHj320gXw==",
+ "requires": {
+ "@babel/runtime": "^7.20.1",
+ "@mui/utils": "^5.10.14",
+ "prop-types": "^15.8.1"
+ }
+ },
+ "@mui/styled-engine": {
+ "version": "5.10.14",
+ "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.10.14.tgz",
+ "integrity": "sha512-bgKdM57ExogWpIfhL/ngSlzF4FhbH00vYF+Y5VALTob4uslFqje0xzoWmbfcCn4cZt2NXxZJIwhsq4vzo5itlw==",
+ "requires": {
+ "@babel/runtime": "^7.20.1",
+ "@emotion/cache": "^11.10.5",
+ "csstype": "^3.1.1",
+ "prop-types": "^15.8.1"
+ }
+ },
+ "@mui/system": {
+ "version": "5.10.14",
+ "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.10.14.tgz",
+ "integrity": "sha512-2de7XCjRb1j8Od0Stmo0LwFMLpOMNT4wzfINuExXI1TVSuyxXIXUxiC5FEgJW3GMvf/a7SUR8VOiMoKlKWzukw==",
+ "requires": {
+ "@babel/runtime": "^7.20.1",
+ "@mui/private-theming": "^5.10.14",
+ "@mui/styled-engine": "^5.10.14",
+ "@mui/types": "^7.2.1",
+ "@mui/utils": "^5.10.14",
+ "clsx": "^1.2.1",
+ "csstype": "^3.1.1",
+ "prop-types": "^15.8.1"
+ }
+ },
+ "@mui/types": {
+ "version": "7.2.1",
+ "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.1.tgz",
+ "integrity": "sha512-c5mSM7ivD8EsqK6HUi9hQPr5V7TJ/IRThUQ9nWNYPdhCGriTSQV4vL6DflT99LkM+wLiIS1rVjphpEWxERep7A==",
+ "requires": {}
+ },
+ "@mui/utils": {
+ "version": "5.10.14",
+ "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.10.14.tgz",
+ "integrity": "sha512-12p59+wDZpA++XVJmKwqsZmrA1nmUQ5d0a1yQWtcDjxNyER1EDzozYN/db+FY2i5ceQh2TynPTEwGms2mXDwFg==",
+ "requires": {
+ "@babel/runtime": "^7.20.1",
+ "@types/prop-types": "^15.7.5",
+ "@types/react-is": "^16.7.1 || ^17.0.0",
+ "prop-types": "^15.8.1",
+ "react-is": "^18.2.0"
+ },
+ "dependencies": {
+ "react-is": {
+ "version": "18.2.0",
+ "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
+ "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
+ }
+ }
+ },
"@nicolo-ribaudo/eslint-scope-5-internals": {
"version": "5.1.1-v1",
"resolved": "https://registry.npmjs.org/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz",
@@ -19027,6 +21410,31 @@
"fastq": "^1.6.0"
}
},
+ "@npmcli/fs": {
+ "version": "1.1.1",
+ "resolved": "https://registry.npmjs.org/@npmcli/fs/-/fs-1.1.1.tgz",
+ "integrity": "sha512-8KG5RD0GVP4ydEzRn/I4BNDuxDtqVbOdm8675T49OIG/NGhaK0pjPX7ZcDlvKYbA+ulvVK3ztfcF4uBdOxuJbQ==",
+ "requires": {
+ "@gar/promisify": "^1.0.1",
+ "semver": "^7.3.5"
+ }
+ },
+ "@npmcli/move-file": {
+ "version": "1.1.2",
+ "resolved": "https://registry.npmjs.org/@npmcli/move-file/-/move-file-1.1.2.tgz",
+ "integrity": "sha512-1SUf/Cg2GzGDyaf15aR9St9TWlb+XvbZXWpDx8YKs7MLzMH/BCeopv+y9vzrzgkfykCGuWOlSu3mZhj2+FQcrg==",
+ "requires": {
+ "mkdirp": "^1.0.4",
+ "rimraf": "^3.0.2"
+ },
+ "dependencies": {
+ "mkdirp": {
+ "version": "1.0.4",
+ "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
+ "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw=="
+ }
+ }
+ },
"@pmmmwh/react-refresh-webpack-plugin": {
"version": "0.5.9",
"resolved": "https://registry.npmjs.org/@pmmmwh/react-refresh-webpack-plugin/-/react-refresh-webpack-plugin-0.5.9.tgz",
@@ -19043,6 +21451,16 @@
"source-map": "^0.7.3"
}
},
+ "@popperjs/core": {
+ "version": "2.11.6",
+ "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.6.tgz",
+ "integrity": "sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw=="
+ },
+ "@remix-run/router": {
+ "version": "1.0.3",
+ "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.0.3.tgz",
+ "integrity": "sha512-ceuyTSs7PZ/tQqi19YZNBc5X7kj1f8p+4DIyrcIYFY9h+hd1OKm4RqtiWldR9eGEvIiJfsqwM4BsuCtRIuEw6Q=="
+ },
"@rollup/plugin-babel": {
"version": "5.3.1",
"resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -19757,11 +22175,21 @@
"resolved": "https://registry.npmjs.org/@types/mime/-/mime-3.0.1.tgz",
"integrity": "sha512-Y4XFY5VJAuw0FgAqPNd6NNoV44jbq9Bz2L7Rh/J6jLTiHBSBJa9fxqQIvkIld4GsoDOcCbvzOUAbLPsSKKg+uA=="
},
+ "@types/minimist": {
+ "version": "1.2.2",
+ "resolved": "https://registry.npmjs.org/@types/minimist/-/minimist-1.2.2.tgz",
+ "integrity": "sha512-jhuKLIRrhvCPLqwPcx6INqmKeiA5EWrsCOPhrlFSrbrmU4ZMPjj5Ul/oLCMDO98XRUIwVm78xICz4EPCektzeQ=="
+ },
"@types/node": {
"version": "18.11.9",
"resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.9.tgz",
"integrity": "sha512-CRpX21/kGdzjOpFsZSkcrXMGIBWMGNIHXXBVFSH+ggkftxg+XYP20TESbh+zFvFj3EQOl5byk0HTRn1IL6hbqg=="
},
+ "@types/normalize-package-data": {
+ "version": "2.4.1",
+ "resolved": "https://registry.npmjs.org/@types/normalize-package-data/-/normalize-package-data-2.4.1.tgz",
+ "integrity": "sha512-Gj7cI7z+98M282Tqmp2K5EIsoouUEzbBJhQQzDE3jSIRk6r9gsz0oUokqIUR4u1R3dMHo0pDHM7sNOHyhulypw=="
+ },
"@types/parse-json": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
@@ -19810,6 +22238,22 @@
"@types/react": "*"
}
},
+ "@types/react-is": {
+ "version": "17.0.3",
+ "resolved": "https://registry.npmjs.org/@types/react-is/-/react-is-17.0.3.tgz",
+ "integrity": "sha512-aBTIWg1emtu95bLTLx0cpkxwGW3ueZv71nE2YFBpL8k/z5czEW8yYpOo8Dp+UUAFAtKwNaOsh/ioSeQnWlZcfw==",
+ "requires": {
+ "@types/react": "*"
+ }
+ },
+ "@types/react-transition-group": {
+ "version": "4.4.5",
+ "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.5.tgz",
+ "integrity": "sha512-juKD/eiSM3/xZYzjuzH6ZwpP+/lejltmiS3QEzV/vmb/Q8+HfDmxu+Baga8UEMGBqV88Nbg4l2hY/K2DkyaLLA==",
+ "requires": {
+ "@types/react": "*"
+ }
+ },
"@types/resolve": {
"version": "1.17.1",
"resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
@@ -20157,6 +22601,11 @@
"resolved": "https://registry.npmjs.org/abab/-/abab-2.0.6.tgz",
"integrity": "sha512-j2afSsaIENvHZN2B8GOpF566vZ5WVk5opAiMTvWgaQT8DkbOqsTfvNAvHoRGU2zzP8cPoqys+xHTRDWW8L+/BA=="
},
+ "abbrev": {
+ "version": "1.1.1",
+ "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
+ "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q=="
+ },
"accepts": {
"version": "1.3.8",
"resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
@@ -20243,6 +22692,32 @@
"debug": "4"
}
},
+ "agentkeepalive": {
+ "version": "4.2.1",
+ "resolved": "https://registry.npmjs.org/agentkeepalive/-/agentkeepalive-4.2.1.tgz",
+ "integrity": "sha512-Zn4cw2NEqd+9fiSVWMscnjyQ1a8Yfoc5oBajLeo5w+YBHgDUcEBY2hS4YpTz6iN5f/2zQiktcuM6tS8x1p9dpA==",
+ "requires": {
+ "debug": "^4.1.0",
+ "depd": "^1.1.2",
+ "humanize-ms": "^1.2.1"
+ },
+ "dependencies": {
+ "depd": {
+ "version": "1.1.2",
+ "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
+ "integrity": "sha512-7emPTl6Dpo6JRXOXjLRxck+FlLRX5847cLKEn00PLAgc3g2hTZZgr+e4c2v6QpSmLeFP3n5yUo7ft6avBK/5jQ=="
+ }
+ }
+ },
+ "aggregate-error": {
+ "version": "3.1.0",
+ "resolved": "https://registry.npmjs.org/aggregate-error/-/aggregate-error-3.1.0.tgz",
+ "integrity": "sha512-4I7Td01quW/RpocfNayFdFVk1qSuoh0E7JrbRJ16nH01HhKFQ88INq9Sd+nd72zqRySlr9BmDA8xlEJ6vJMrYA==",
+ "requires": {
+ "clean-stack": "^2.0.0",
+ "indent-string": "^4.0.0"
+ }
+ },
"ajv": {
"version": "6.12.6",
"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
@@ -20321,6 +22796,20 @@
"picomatch": "^2.0.4"
}
},
+ "aproba": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/aproba/-/aproba-2.0.0.tgz",
+ "integrity": "sha512-lYe4Gx7QT+MKGbDsA+Z+he/Wtef0BiwDOlK/XkBrdfsh9J/jPPXbX0tE9x9cl27Tmu5gg3QUbUrQYa/y+KOHPQ=="
+ },
+ "are-we-there-yet": {
+ "version": "3.0.1",
+ "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-3.0.1.tgz",
+ "integrity": "sha512-QZW4EDmGwlYur0Yyf/b2uGucHQMa8aFUP7eu9ddR73vvhFyt4V0Vl3QHPcTNJ8l6qYOBdxgXdnBXQrHilfRQBg==",
+ "requires": {
+ "delegates": "^1.0.0",
+ "readable-stream": "^3.6.0"
+ }
+ },
"arg": {
"version": "5.0.2",
"resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
@@ -20399,11 +22888,29 @@
"is-string": "^1.0.7"
}
},
+ "arrify": {
+ "version": "1.0.1",
+ "resolved": "https://registry.npmjs.org/arrify/-/arrify-1.0.1.tgz",
+ "integrity": "sha512-3CYzex9M9FGQjCGMGyi6/31c8GJbgb0qGyrx5HWxPd0aCwh4cB2YjMb2Xf9UuoogrMrlO9cTqnB5rI5GHZTcUA=="
+ },
"asap": {
"version": "2.0.6",
"resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
"integrity": "sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA=="
},
+ "asn1": {
+ "version": "0.2.6",
+ "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.6.tgz",
+ "integrity": "sha512-ix/FxPn0MDjeyJ7i/yoHGFt/EX6LyNbxSEhPPXODPL+KB0VPk86UYfL0lMdy+KCnv+fmvIzySwaK5COwqVbWTQ==",
+ "requires": {
+ "safer-buffer": "~2.1.0"
+ }
+ },
+ "assert-plus": {
+ "version": "1.0.0",
+ "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
+ "integrity": "sha512-NfJ4UzBCcQGLDlQq7nHxH+tv3kyZ0hHQqF5BO6J7tNJeP5do1llPr8dZ8zHonfhAu0PHAdMkSo+8o0wxg9lZWw=="
+ },
"ast-types-flow": {
"version": "0.0.7",
"resolved": "https://registry.npmjs.org/ast-types-flow/-/ast-types-flow-0.0.7.tgz",
@@ -20414,6 +22921,11 @@
"resolved": "https://registry.npmjs.org/async/-/async-3.2.4.tgz",
"integrity": "sha512-iAB+JbDEGXhyIUavoDl9WP/Jj106Kz9DEn1DPgYw5ruDn0e3Wgi3sKFm55sASdGBNOQB8F59d9qQ7deqrHA8wQ=="
},
+ "async-foreach": {
+ "version": "0.1.3",
+ "resolved": "https://registry.npmjs.org/async-foreach/-/async-foreach-0.1.3.tgz",
+ "integrity": "sha512-VUeSMD8nEGBWaZK4lizI1sf3yEC7pnAQ/mrI7pC2fBz2s/tq5jWWEngTwaf0Gruu/OoXRGLGg1XFqpYBiGTYJA=="
+ },
"asynckit": {
"version": "0.4.0",
"resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
@@ -20442,11 +22954,43 @@
"resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz",
"integrity": "sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw=="
},
+ "aws-sign2": {
+ "version": "0.7.0",
+ "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.7.0.tgz",
+ "integrity": "sha512-08kcGqnYf/YmjoRhfxyu+CLxBjUtHLXLXX/vUfx9l2LYzG3c1m61nrpyFUZI6zeS+Li/wWMMidD9KgrqtGq3mA=="
+ },
+ "aws4": {
+ "version": "1.11.0",
+ "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.11.0.tgz",
+ "integrity": "sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA=="
+ },
"axe-core": {
"version": "4.5.2",
"resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.5.2.tgz",
"integrity": "sha512-u2MVsXfew5HBvjsczCv+xlwdNnB1oQR9HlAcsejZttNjKKSkeDNVwB1vMThIUIFI9GoT57Vtk8iQLwqOfAkboA=="
},
+ "axios": {
+ "version": "1.3.1",
+ "resolved": "https://registry.npmjs.org/axios/-/axios-1.3.1.tgz",
+ "integrity": "sha512-78pWJsQTceInlyaeBQeYZ/QgZeWS8hGeKiIJiDKQe3hEyBb7sEMq0K4gjx+Va6WHTYO4zI/RRl8qGRzn0YMadA==",
+ "requires": {
+ "follow-redirects": "^1.15.0",
+ "form-data": "^4.0.0",
+ "proxy-from-env": "^1.1.0"
+ },
+ "dependencies": {
+ "form-data": {
+ "version": "4.0.0",
+ "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+ "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+ "requires": {
+ "asynckit": "^0.4.0",
+ "combined-stream": "^1.0.8",
+ "mime-types": "^2.1.12"
+ }
+ }
+ }
+ },
"axobject-query": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz",
@@ -20674,6 +23218,14 @@
"resolved": "https://registry.npmjs.org/batch/-/batch-0.6.1.tgz",
"integrity": "sha512-x+VAiMRL6UPkx+kudNvxTl6hB2XNNCG2r+7wixVfIYwu/2HKRXimwQyaumLjMveWvT2Hkd/cAJw+QBMfJ/EKVw=="
},
+ "bcrypt-pbkdf": {
+ "version": "1.0.2",
+ "resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz",
+ "integrity": "sha512-qeFIXtP4MSoi6NLqO12WfqARWWuCKi2Rn/9hJLEmtB5yTNr9DqFWkJRCf2qShWzPeAMRnOgCrq0sg/KLv5ES9w==",
+ "requires": {
+ "tweetnacl": "^0.14.3"
+ }
+ },
"bfj": {
"version": "7.0.2",
"resolved": "https://registry.npmjs.org/bfj/-/bfj-7.0.2.tgz",
@@ -20819,6 +23371,38 @@
"resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz",
"integrity": "sha512-pMhOfFDPiv9t5jjIXkHosWmkSyQbvsgEVNkz0ERHbuLh2T/7j4Mqqpz523Fe8MVY89KC6Sh/QfS2sM+SjgFDcw=="
},
+ "cacache": {
+ "version": "15.3.0",
+ "resolved": "https://registry.npmjs.org/cacache/-/cacache-15.3.0.tgz",
+ "integrity": "sha512-VVdYzXEn+cnbXpFgWs5hTT7OScegHVmLhJIR8Ufqk3iFD6A6j5iSX1KuBTfNEv4tdJWE2PzA6IVFtcLC7fN9wQ==",
+ "requires": {
+ "@npmcli/fs": "^1.0.0",
+ "@npmcli/move-file": "^1.0.1",
+ "chownr": "^2.0.0",
+ "fs-minipass": "^2.0.0",
+ "glob": "^7.1.4",
+ "infer-owner": "^1.0.4",
+ "lru-cache": "^6.0.0",
+ "minipass": "^3.1.1",
+ "minipass-collect": "^1.0.2",
+ "minipass-flush": "^1.0.5",
+ "minipass-pipeline": "^1.2.2",
+ "mkdirp": "^1.0.3",
+ "p-map": "^4.0.0",
+ "promise-inflight": "^1.0.1",
+ "rimraf": "^3.0.2",
+ "ssri": "^8.0.1",
+ "tar": "^6.0.2",
+ "unique-filename": "^1.1.1"
+ },
+ "dependencies": {
+ "mkdirp": {
+ "version": "1.0.4",
+ "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
+ "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw=="
+ }
+ }
+ },
"call-bind": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
@@ -20852,6 +23436,28 @@
"resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
"integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA=="
},
+ "camelcase-keys": {
+ "version": "6.2.2",
+ "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-6.2.2.tgz",
+ "integrity": "sha512-YrwaA0vEKazPBkn0ipTiMpSajYDSe+KjQfrjhcBMxJt/znbvlHd8Pw/Vamaz5EB4Wfhs3SUR3Z9mwRu/P3s3Yg==",
+ "requires": {
+ "camelcase": "^5.3.1",
+ "map-obj": "^4.0.0",
+ "quick-lru": "^4.0.1"
+ },
+ "dependencies": {
+ "camelcase": {
+ "version": "5.3.1",
+ "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
+ "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg=="
+ },
+ "quick-lru": {
+ "version": "4.0.1",
+ "resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-4.0.1.tgz",
+ "integrity": "sha512-ARhCpm70fzdcvNQfPoy49IaanKkTlRWF2JMzqhcJbhSFRZv7nPTvZJdcY7301IPmvW+/p0RgIWnQDLJxifsQ7g=="
+ }
+ }
+ },
"caniuse-api": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
@@ -20873,6 +23479,11 @@
"resolved": "https://registry.npmjs.org/case-sensitive-paths-webpack-plugin/-/case-sensitive-paths-webpack-plugin-2.4.0.tgz",
"integrity": "sha512-roIFONhcxog0JSSWbvVAh3OocukmSgpqOH6YpMkCvav/ySIV3JKg4Dc8vYtQjYi/UxpNE36r/9v+VqTQqgkYmw=="
},
+ "caseless": {
+ "version": "0.12.0",
+ "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz",
+ "integrity": "sha512-4tYFyifaFfGacoiObjJegolkwSU4xQNGbVgUiNYVUxbQ2x2lUsFvY4hVgVzGiIe6WLOPqycWXA40l+PWsxthUw=="
+ },
"chalk": {
"version": "2.4.2",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
@@ -20918,6 +23529,11 @@
}
}
},
+ "chownr": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/chownr/-/chownr-2.0.0.tgz",
+ "integrity": "sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ=="
+ },
"chrome-trace-event": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz",
@@ -20948,6 +23564,11 @@
}
}
},
+ "clean-stack": {
+ "version": "2.2.0",
+ "resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz",
+ "integrity": "sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A=="
+ },
"cliui": {
"version": "7.0.4",
"resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz",
@@ -20958,6 +23579,11 @@
"wrap-ansi": "^7.0.0"
}
},
+ "clsx": {
+ "version": "1.2.1",
+ "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz",
+ "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg=="
+ },
"co": {
"version": "4.6.0",
"resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
@@ -20991,6 +23617,11 @@
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
"integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw=="
},
+ "color-support": {
+ "version": "1.1.3",
+ "resolved": "https://registry.npmjs.org/color-support/-/color-support-1.1.3.tgz",
+ "integrity": "sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg=="
+ },
"colord": {
"version": "2.9.3",
"resolved": "https://registry.npmjs.org/colord/-/colord-2.9.3.tgz",
@@ -21086,6 +23717,11 @@
"resolved": "https://registry.npmjs.org/connect-history-api-fallback/-/connect-history-api-fallback-2.0.0.tgz",
"integrity": "sha512-U73+6lQFmfiNPrYbXqr6kZ1i1wiRqXnp2nhMsINseWXO8lDau0LGEffJ8kQi4EjLZympVgRdvqjAgiZ1tgzDDA=="
},
+ "console-control-strings": {
+ "version": "1.1.0",
+ "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
+ "integrity": "sha512-ty/fTekppD2fIwRvnZAVdeOiGd1c7YXEixbgJTNzqcxJWKQnjJ/V1bNEEE6hygpM3WjwHFUVK6HTjWSzV4a8sQ=="
+ },
"content-disposition": {
"version": "0.5.4",
"resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz",
@@ -21426,6 +24062,14 @@
"resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
"integrity": "sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA=="
},
+ "dashdash": {
+ "version": "1.14.1",
+ "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",
+ "integrity": "sha512-jRFi8UDGo6j+odZiEpjazZaWqEal3w/basFjQHQEwVtZJGDpxbH1MeYluwCS8Xq5wmLJooDlMgvVarmWfGM44g==",
+ "requires": {
+ "assert-plus": "^1.0.0"
+ }
+ },
"data-urls": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/data-urls/-/data-urls-2.0.0.tgz",
@@ -21444,6 +24088,27 @@
"ms": "2.1.2"
}
},
+ "decamelize": {
+ "version": "1.2.0",
+ "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
+ "integrity": "sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA=="
+ },
+ "decamelize-keys": {
+ "version": "1.1.1",
+ "resolved": "https://registry.npmjs.org/decamelize-keys/-/decamelize-keys-1.1.1.tgz",
+ "integrity": "sha512-WiPxgEirIV0/eIOMcnFBA3/IJZAZqKnwAwWyvvdi4lsr1WCN22nhdf/3db3DoZcUjTV2SqfzIwNyp6y2xs3nmg==",
+ "requires": {
+ "decamelize": "^1.1.0",
+ "map-obj": "^1.0.0"
+ },
+ "dependencies": {
+ "map-obj": {
+ "version": "1.0.1",
+ "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-1.0.1.tgz",
+ "integrity": "sha512-7N/q3lyZ+LVCp7PzuxrJr4KMbBE2hW7BT7YNia330OFxIf4d3r5zVpicP2650l7CPN6RM9zOJRl3NGpqSiw3Eg=="
+ }
+ }
+ },
"decimal.js": {
"version": "10.4.2",
"resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.4.2.tgz",
@@ -21525,6 +24190,11 @@
"resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
"integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ=="
},
+ "delegates": {
+ "version": "1.0.0",
+ "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
+ "integrity": "sha512-bd2L678uiWATM6m5Z1VzNCErI3jiGzt6HGY8OVICs40JQq/HALfbyNJmp0UDakEY4pMMaN0Ly5om/B1VI/+xfQ=="
+ },
"depd": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
@@ -21636,6 +24306,15 @@
"utila": "~0.4"
}
},
+ "dom-helpers": {
+ "version": "5.2.1",
+ "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+ "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+ "requires": {
+ "@babel/runtime": "^7.8.7",
+ "csstype": "^3.0.2"
+ }
+ },
"dom-serializer": {
"version": "1.4.1",
"resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz",
@@ -21708,6 +24387,15 @@
"resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz",
"integrity": "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg=="
},
+ "ecc-jsbn": {
+ "version": "0.1.2",
+ "resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz",
+ "integrity": "sha512-eh9O+hwRHNbG4BLTjEl3nw044CkGm5X6LoaCf7LPp7UU8Qrt47JYNi6nPX8xjW97TKGKm1ouctg0QSpZe9qrnw==",
+ "requires": {
+ "jsbn": "~0.1.0",
+ "safer-buffer": "^2.1.0"
+ }
+ },
"ee-first": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
@@ -21746,6 +24434,15 @@
"resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
"integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w=="
},
+ "encoding": {
+ "version": "0.1.13",
+ "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.13.tgz",
+ "integrity": "sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==",
+ "optional": true,
+ "requires": {
+ "iconv-lite": "^0.6.2"
+ }
+ },
"enhanced-resolve": {
"version": "5.10.0",
"resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.10.0.tgz",
@@ -21760,6 +24457,16 @@
"resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
"integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A=="
},
+ "env-paths": {
+ "version": "2.2.1",
+ "resolved": "https://registry.npmjs.org/env-paths/-/env-paths-2.2.1.tgz",
+ "integrity": "sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A=="
+ },
+ "err-code": {
+ "version": "2.0.3",
+ "resolved": "https://registry.npmjs.org/err-code/-/err-code-2.0.3.tgz",
+ "integrity": "sha512-2bmlRpNKBxT/CRmPOlyISQpNj+qSeYvcym/uT0Jx2bMOlKLtSy1ZmLuVxSEKKyor/N5yhvp/ZiG1oE3DEYMSFA=="
+ },
"error-ex": {
"version": "1.3.2",
"resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
@@ -21857,6 +24564,11 @@
"is-symbol": "^1.0.2"
}
},
+ "es6-object-assign": {
+ "version": "1.1.0",
+ "resolved": "https://registry.npmjs.org/es6-object-assign/-/es6-object-assign-1.1.0.tgz",
+ "integrity": "sha512-MEl9uirslVwqQU369iHNWZXsI8yaZYGg/D65aOgZkeyFJwHYSxilf7rQzXKI7DdDuBPrBXbfk3sl9hJhmd5AUw=="
+ },
"escalade": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
@@ -22506,6 +25218,16 @@
}
}
},
+ "extend": {
+ "version": "3.0.2",
+ "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
+ "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g=="
+ },
+ "extsprintf": {
+ "version": "1.3.0",
+ "resolved": "https://registry.npmjs.org/extsprintf/-/extsprintf-1.3.0.tgz",
+ "integrity": "sha512-11Ndz7Nv+mvAC1j0ktTa7fAb0vLyGGX+rMHNBYQviQDGU0Hw7lhctJANqbPhu9nV9/izT/IntTgZ7Im/9LJs9g=="
+ },
"fast-deep-equal": {
"version": "3.1.3",
"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -22662,6 +25384,11 @@
"pkg-dir": "^4.1.0"
}
},
+ "find-root": {
+ "version": "1.1.0",
+ "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
+ "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng=="
+ },
"find-up": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
@@ -22698,6 +25425,11 @@
"is-callable": "^1.1.3"
}
},
+ "forever-agent": {
+ "version": "0.6.1",
+ "resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz",
+ "integrity": "sha512-j0KLYPhm6zeac4lz3oJ3o65qvgQCcPubiyotZrXqEaG4hNagNYO8qdlUrX5vwqv9ohqeT/Z3j6+yW067yWWdUw=="
+ },
"fork-ts-checker-webpack-plugin": {
"version": "6.5.2",
"resolved": "https://registry.npmjs.org/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-6.5.2.tgz",
@@ -22836,6 +25568,14 @@
"universalify": "^2.0.0"
}
},
+ "fs-minipass": {
+ "version": "2.1.0",
+ "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-2.1.0.tgz",
+ "integrity": "sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==",
+ "requires": {
+ "minipass": "^3.0.0"
+ }
+ },
"fs-monkey": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/fs-monkey/-/fs-monkey-1.0.3.tgz",
@@ -22873,6 +25613,29 @@
"resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz",
"integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ=="
},
+ "gauge": {
+ "version": "4.0.4",
+ "resolved": "https://registry.npmjs.org/gauge/-/gauge-4.0.4.tgz",
+ "integrity": "sha512-f9m+BEN5jkg6a0fZjleidjN51VE1X+mPFQ2DJ0uv1V39oCLCbsGe6yjbBnp7eK7z/+GAon99a3nHuqbuuthyPg==",
+ "requires": {
+ "aproba": "^1.0.3 || ^2.0.0",
+ "color-support": "^1.1.3",
+ "console-control-strings": "^1.1.0",
+ "has-unicode": "^2.0.1",
+ "signal-exit": "^3.0.7",
+ "string-width": "^4.2.3",
+ "strip-ansi": "^6.0.1",
+ "wide-align": "^1.1.5"
+ }
+ },
+ "gaze": {
+ "version": "1.1.3",
+ "resolved": "https://registry.npmjs.org/gaze/-/gaze-1.1.3.tgz",
+ "integrity": "sha512-BRdNm8hbWzFzWHERTrejLqwHDfS4GibPoq5wjTPIoJHoBtKGPg3xAFfxmM+9ztbXelxcf2hwQcaz1PtmFeue8g==",
+ "requires": {
+ "globule": "^1.0.0"
+ }
+ },
"gensync": {
"version": "1.0.0-beta.2",
"resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
@@ -22903,6 +25666,11 @@
"resolved": "https://registry.npmjs.org/get-package-type/-/get-package-type-0.1.0.tgz",
"integrity": "sha512-pjzuKtY64GYfWizNAJ0fr9VqttZkNiK2iS430LtIHzjBEr6bX8Am2zm4sW4Ro5wjWW5cAlRL1qAMTcXbjNAO2Q=="
},
+ "get-stdin": {
+ "version": "4.0.1",
+ "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz",
+ "integrity": "sha512-F5aQMywwJ2n85s4hJPTT9RPxGmubonuB10MNYo17/xph174n2MIR33HRguhzVag10O/npM7SPk73LMZNP+FaWw=="
+ },
"get-stream": {
"version": "6.0.1",
"resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
@@ -22917,6 +25685,14 @@
"get-intrinsic": "^1.1.1"
}
},
+ "getpass": {
+ "version": "0.1.7",
+ "resolved": "https://registry.npmjs.org/getpass/-/getpass-0.1.7.tgz",
+ "integrity": "sha512-0fzj9JxOLfJ+XGLhR8ze3unN0KZCgZwiSSDz168VERjK8Wl8kVSdcu2kspd4s4wtAa1y/qrVRiAA0WclVsu0ng==",
+ "requires": {
+ "assert-plus": "^1.0.0"
+ }
+ },
"glob": {
"version": "7.2.3",
"resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
@@ -22989,6 +25765,39 @@
"slash": "^3.0.0"
}
},
+ "globule": {
+ "version": "1.3.4",
+ "resolved": "https://registry.npmjs.org/globule/-/globule-1.3.4.tgz",
+ "integrity": "sha512-OPTIfhMBh7JbBYDpa5b+Q5ptmMWKwcNcFSR/0c6t8V4f3ZAVBEsKNY37QdVqmLRYSMhOUGYrY0QhSoEpzGr/Eg==",
+ "requires": {
+ "glob": "~7.1.1",
+ "lodash": "^4.17.21",
+ "minimatch": "~3.0.2"
+ },
+ "dependencies": {
+ "glob": {
+ "version": "7.1.7",
+ "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.7.tgz",
+ "integrity": "sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==",
+ "requires": {
+ "fs.realpath": "^1.0.0",
+ "inflight": "^1.0.4",
+ "inherits": "2",
+ "minimatch": "^3.0.4",
+ "once": "^1.3.0",
+ "path-is-absolute": "^1.0.0"
+ }
+ },
+ "minimatch": {
+ "version": "3.0.8",
+ "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.8.tgz",
+ "integrity": "sha512-6FsRAQsxQ61mw+qP1ZzbL9Bc78x2p5OqNgNpnoAFLTrX8n5Kxph0CsnhmKKNXTWjXqU5L0pGPR7hYk+XWZr60Q==",
+ "requires": {
+ "brace-expansion": "^1.1.7"
+ }
+ }
+ }
+ },
"gopd": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
@@ -23020,6 +25829,25 @@
"resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-2.0.1.tgz",
"integrity": "sha512-9Qn4yBxelxoh2Ow62nP+Ka/kMnOXRi8BXnRaUwezLNhqelnN49xKz4F/dPP8OYLxLxq6JDtZb2i9XznUQbNPTg=="
},
+ "har-schema": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/har-schema/-/har-schema-2.0.0.tgz",
+ "integrity": "sha512-Oqluz6zhGX8cyRaTQlFMPw80bSJVG2x/cFb8ZPhUILGgHka9SsokCCOQgpveePerqidZOrT14ipqfJb7ILcW5Q=="
+ },
+ "har-validator": {
+ "version": "5.1.5",
+ "resolved": "https://registry.npmjs.org/har-validator/-/har-validator-5.1.5.tgz",
+ "integrity": "sha512-nmT2T0lljbxdQZfspsno9hgrG3Uir6Ks5afism62poxqBM6sDnMEuPmzTq8XN0OEwqKLLdh1jQI3qyE66Nzb3w==",
+ "requires": {
+ "ajv": "^6.12.3",
+ "har-schema": "^2.0.0"
+ }
+ },
+ "hard-rejection": {
+ "version": "2.1.0",
+ "resolved": "https://registry.npmjs.org/hard-rejection/-/hard-rejection-2.1.0.tgz",
+ "integrity": "sha512-VIZB+ibDhx7ObhAe7OVtoEbuP4h/MuOTHJ+J8h/eBXotJYl0fBgR72xDFCKgIh22OJZIOVNxBMWuhAr10r8HdA=="
+ },
"harmony-reflect": {
"version": "1.6.2",
"resolved": "https://registry.npmjs.org/harmony-reflect/-/harmony-reflect-1.6.2.tgz",
@@ -23064,16 +25892,44 @@
"has-symbols": "^1.0.2"
}
},
+ "has-unicode": {
+ "version": "2.0.1",
+ "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
+ "integrity": "sha512-8Rf9Y83NBReMnx0gFzA8JImQACstCYWUplepDa9xprwwtmgEZUF0h/i5xSA625zB/I37EtrswSST6OXxwaaIJQ=="
+ },
"he": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
"integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw=="
},
+ "hoist-non-react-statics": {
+ "version": "3.3.2",
+ "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+ "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+ "requires": {
+ "react-is": "^16.7.0"
+ },
+ "dependencies": {
+ "react-is": {
+ "version": "16.13.1",
+ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+ "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+ }
+ }
+ },
"hoopy": {
"version": "0.1.4",
"resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
"integrity": "sha512-HRcs+2mr52W0K+x8RzcLzuPPmVIKMSv97RGHy0Ea9y/mpcaK+xTrjICA04KAHi4GRzxliNqNJEFYWHghy3rSfQ=="
},
+ "hosted-git-info": {
+ "version": "4.1.0",
+ "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-4.1.0.tgz",
+ "integrity": "sha512-kyCuEOWjJqZuDbRHzL8V93NzQhwIB71oFWSyzVo+KPZI+pnQPPxucdkrOZvkLRnrf5URsQM+IJ09Dw29cRALIA==",
+ "requires": {
+ "lru-cache": "^6.0.0"
+ }
+ },
"hpack.js": {
"version": "2.1.6",
"resolved": "https://registry.npmjs.org/hpack.js/-/hpack.js-2.1.6.tgz",
@@ -23169,6 +26025,11 @@
"entities": "^2.0.0"
}
},
+ "http-cache-semantics": {
+ "version": "4.1.0",
+ "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.1.0.tgz",
+ "integrity": "sha512-carPklcUh7ROWRK7Cv27RPtdhYhUsela/ue5/jKzjegVvXDqM2ILE9Q2BGn9JZJh1g87cp56su/FgQSzcWS8cQ=="
+ },
"http-deceiver": {
"version": "1.2.7",
"resolved": "https://registry.npmjs.org/http-deceiver/-/http-deceiver-1.2.7.tgz",
@@ -23223,6 +26084,16 @@
"micromatch": "^4.0.2"
}
},
+ "http-signature": {
+ "version": "1.2.0",
+ "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.2.0.tgz",
+ "integrity": "sha512-CAbnr6Rz4CYQkLYUtSNXxQPUH2gK8f3iWexVlsnMeD+GjlsQ0Xsy1cOX+mN3dtxYomRy21CiOzU8Uhw6OwncEQ==",
+ "requires": {
+ "assert-plus": "^1.0.0",
+ "jsprim": "^1.2.2",
+ "sshpk": "^1.7.0"
+ }
+ },
"https-proxy-agent": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz",
@@ -23237,6 +26108,14 @@
"resolved": "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz",
"integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw=="
},
+ "humanize-ms": {
+ "version": "1.2.1",
+ "resolved": "https://registry.npmjs.org/humanize-ms/-/humanize-ms-1.2.1.tgz",
+ "integrity": "sha512-Fl70vYtsAFb/C06PTS9dZBo7ihau+Tu/DNCk/OyHhea07S+aeMWpFFkUaXRa8fI+ScZbEI8dfSxwY7gxZ9SAVQ==",
+ "requires": {
+ "ms": "^2.0.0"
+ }
+ },
"iconv-lite": {
"version": "0.6.3",
"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
@@ -23309,6 +26188,11 @@
"resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz",
"integrity": "sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg=="
},
+ "infer-owner": {
+ "version": "1.0.4",
+ "resolved": "https://registry.npmjs.org/infer-owner/-/infer-owner-1.0.4.tgz",
+ "integrity": "sha512-IClj+Xz94+d7irH5qRyfJonOdfTzuDaifE6ZPWfx0N0+/ATZCbuTPq2prFl526urkQd90WyUKIh1DfBQ2hMz9A=="
+ },
"inflight": {
"version": "1.0.6",
"resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
@@ -23338,6 +26222,11 @@
"side-channel": "^1.0.4"
}
},
+ "ip": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/ip/-/ip-2.0.0.tgz",
+ "integrity": "sha512-WKa+XuLG1A1R0UWhl2+1XQSi+fZWMsYKffMZTTYsiZaUD8k2yDAj5atimTUD2TZkyCkNEeYE5NhFZmupOGtjYQ=="
+ },
"ipaddr.js": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-2.0.1.tgz",
@@ -23431,6 +26320,11 @@
"is-extglob": "^2.1.1"
}
},
+ "is-lambda": {
+ "version": "1.0.1",
+ "resolved": "https://registry.npmjs.org/is-lambda/-/is-lambda-1.0.1.tgz",
+ "integrity": "sha512-z7CMFGNrENq5iFB9Bqo64Xk6Y9sg+epq1myIcdHaGnbMTYOxvzsEtdYqQUylB7LxfkvgrrjP32T6Ywciio9UIQ=="
+ },
"is-map": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/is-map/-/is-map-2.0.2.tgz",
@@ -23589,6 +26483,11 @@
"resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
"integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw=="
},
+ "isstream": {
+ "version": "0.1.2",
+ "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
+ "integrity": "sha512-Yljz7ffyPbrLpLngrMtZ7NduUgVvi6wG9RJ9IUcyCd59YQ911PBJphODUcbOVbqYfxe1wuYf/LJ8PauMRwsM/g=="
+ },
"istanbul-lib-coverage": {
"version": "3.2.0",
"resolved": "https://registry.npmjs.org/istanbul-lib-coverage/-/istanbul-lib-coverage-3.2.0.tgz",
@@ -25091,6 +27990,11 @@
}
}
},
+ "js-base64": {
+ "version": "2.6.4",
+ "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.6.4.tgz",
+ "integrity": "sha512-pZe//GGmwJndub7ZghVHz7vjb2LgC1m8B07Au3eYqeqv9emhESByMXxaEgkUkEqJe87oBbSniGYoQNIBklc7IQ=="
+ },
"js-sdsl": {
"version": "4.1.5",
"resolved": "https://registry.npmjs.org/js-sdsl/-/js-sdsl-4.1.5.tgz",
@@ -25110,6 +28014,11 @@
"esprima": "^4.0.0"
}
},
+ "jsbn": {
+ "version": "0.1.1",
+ "resolved": "https://registry.npmjs.org/jsbn/-/jsbn-0.1.1.tgz",
+ "integrity": "sha512-UVU9dibq2JcFWxQPA6KCqj5O42VOmAY3zQUfEKxU0KpTGXwNoCjkX1e13eHNvw/xPynt6pU0rZ1htjWTNTSXsg=="
+ },
"jsdom": {
"version": "16.7.0",
"resolved": "https://registry.npmjs.org/jsdom/-/jsdom-16.7.0.tgz",
@@ -25169,6 +28078,11 @@
"resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
"integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw=="
},
+ "json-stringify-safe": {
+ "version": "5.0.1",
+ "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
+ "integrity": "sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA=="
+ },
"json5": {
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/json5/-/json5-2.2.1.tgz",
@@ -25188,6 +28102,17 @@
"resolved": "https://registry.npmjs.org/jsonpointer/-/jsonpointer-5.0.1.tgz",
"integrity": "sha512-p/nXbhSEcu3pZRdkW1OfJhpsVtW1gd4Wa1fnQc9YLiTfAjn0312eMKimbdIQzuZl9aa9xUGaRlP9T/CJE/ditQ=="
},
+ "jsprim": {
+ "version": "1.4.2",
+ "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.2.tgz",
+ "integrity": "sha512-P2bSOMAc/ciLz6DzgjVlGJP9+BrJWu5UDGK70C2iweC5QBIeFf0ZXRvGjEj2uYgrY2MkAAhsSWHDWlFtEroZWw==",
+ "requires": {
+ "assert-plus": "1.0.0",
+ "extsprintf": "1.3.0",
+ "json-schema": "0.4.0",
+ "verror": "1.10.0"
+ }
+ },
"jsx-ast-utils": {
"version": "3.3.3",
"resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.3.tgz",
@@ -25362,6 +28287,11 @@
"tmpl": "1.0.5"
}
},
+ "map-obj": {
+ "version": "4.3.0",
+ "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-4.3.0.tgz",
+ "integrity": "sha512-hdN1wVrZbb29eBGiGjJbeP8JbKjq1urkHJ/LIP/NY48MZ1QVXUsQBV1G1zvYFHn1XE06cwjBsOI2K3Ulnj1YXQ=="
+ },
"mdn-data": {
"version": "2.0.4",
"resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.4.tgz",
@@ -25380,6 +28310,32 @@
"fs-monkey": "^1.0.3"
}
},
+ "meow": {
+ "version": "9.0.0",
+ "resolved": "https://registry.npmjs.org/meow/-/meow-9.0.0.tgz",
+ "integrity": "sha512-+obSblOQmRhcyBt62furQqRAQpNyWXo8BuQ5bN7dG8wmwQ+vwHKp/rCFD4CrTP8CsDQD1sjoZ94K417XEUk8IQ==",
+ "requires": {
+ "@types/minimist": "^1.2.0",
+ "camelcase-keys": "^6.2.2",
+ "decamelize": "^1.2.0",
+ "decamelize-keys": "^1.1.0",
+ "hard-rejection": "^2.1.0",
+ "minimist-options": "4.1.0",
+ "normalize-package-data": "^3.0.0",
+ "read-pkg-up": "^7.0.1",
+ "redent": "^3.0.0",
+ "trim-newlines": "^3.0.0",
+ "type-fest": "^0.18.0",
+ "yargs-parser": "^20.2.3"
+ },
+ "dependencies": {
+ "type-fest": {
+ "version": "0.18.1",
+ "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.18.1.tgz",
+ "integrity": "sha512-OIAYXk8+ISY+qTOwkHtKqzAuxchoMiD9Udx+FSGQDuiRR+PJKJHc2NJAXlbhkGwTt/4/nKZxELY1w3ReWOL8mw=="
+ }
+ }
+ },
"merge-descriptors": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
@@ -25500,6 +28456,83 @@
"resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.7.tgz",
"integrity": "sha512-bzfL1YUZsP41gmu/qjrEk0Q6i2ix/cVeAhbCbqH9u3zYutS1cLg00qhrD0M2MVdCcx4Sc0UpP2eBWo9rotpq6g=="
},
+ "minimist-options": {
+ "version": "4.1.0",
+ "resolved": "https://registry.npmjs.org/minimist-options/-/minimist-options-4.1.0.tgz",
+ "integrity": "sha512-Q4r8ghd80yhO/0j1O3B2BjweX3fiHg9cdOwjJd2J76Q135c+NDxGCqdYKQ1SKBuFfgWbAUzBfvYjPUEeNgqN1A==",
+ "requires": {
+ "arrify": "^1.0.1",
+ "is-plain-obj": "^1.1.0",
+ "kind-of": "^6.0.3"
+ },
+ "dependencies": {
+ "is-plain-obj": {
+ "version": "1.1.0",
+ "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-1.1.0.tgz",
+ "integrity": "sha512-yvkRyxmFKEOQ4pNXCmJG5AEQNlXJS5LaONXo5/cLdTZdWvsZ1ioJEonLGAosKlMWE8lwUy/bJzMjcw8az73+Fg=="
+ }
+ }
+ },
+ "minipass": {
+ "version": "3.3.4",
+ "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.4.tgz",
+ "integrity": "sha512-I9WPbWHCGu8W+6k1ZiGpPu0GkoKBeorkfKNuAFBNS1HNFJvke82sxvI5bzcCNpWPorkOO5QQ+zomzzwRxejXiw==",
+ "requires": {
+ "yallist": "^4.0.0"
+ }
+ },
+ "minipass-collect": {
+ "version": "1.0.2",
+ "resolved": "https://registry.npmjs.org/minipass-collect/-/minipass-collect-1.0.2.tgz",
+ "integrity": "sha512-6T6lH0H8OG9kITm/Jm6tdooIbogG9e0tLgpY6mphXSm/A9u8Nq1ryBG+Qspiub9LjWlBPsPS3tWQ/Botq4FdxA==",
+ "requires": {
+ "minipass": "^3.0.0"
+ }
+ },
+ "minipass-fetch": {
+ "version": "1.4.1",
+ "resolved": "https://registry.npmjs.org/minipass-fetch/-/minipass-fetch-1.4.1.tgz",
+ "integrity": "sha512-CGH1eblLq26Y15+Azk7ey4xh0J/XfJfrCox5LDJiKqI2Q2iwOLOKrlmIaODiSQS8d18jalF6y2K2ePUm0CmShw==",
+ "requires": {
+ "encoding": "^0.1.12",
+ "minipass": "^3.1.0",
+ "minipass-sized": "^1.0.3",
+ "minizlib": "^2.0.0"
+ }
+ },
+ "minipass-flush": {
+ "version": "1.0.5",
+ "resolved": "https://registry.npmjs.org/minipass-flush/-/minipass-flush-1.0.5.tgz",
+ "integrity": "sha512-JmQSYYpPUqX5Jyn1mXaRwOda1uQ8HP5KAT/oDSLCzt1BYRhQU0/hDtsB1ufZfEEzMZ9aAVmsBw8+FWsIXlClWw==",
+ "requires": {
+ "minipass": "^3.0.0"
+ }
+ },
+ "minipass-pipeline": {
+ "version": "1.2.4",
+ "resolved": "https://registry.npmjs.org/minipass-pipeline/-/minipass-pipeline-1.2.4.tgz",
+ "integrity": "sha512-xuIq7cIOt09RPRJ19gdi4b+RiNvDFYe5JH+ggNvBqGqpQXcru3PcRmOZuHBKWK1Txf9+cQ+HMVN4d6z46LZP7A==",
+ "requires": {
+ "minipass": "^3.0.0"
+ }
+ },
+ "minipass-sized": {
+ "version": "1.0.3",
+ "resolved": "https://registry.npmjs.org/minipass-sized/-/minipass-sized-1.0.3.tgz",
+ "integrity": "sha512-MbkQQ2CTiBMlA2Dm/5cY+9SWFEN8pzzOXi6rlM5Xxq0Yqbda5ZQy9sU75a673FE9ZK0Zsbr6Y5iP6u9nktfg2g==",
+ "requires": {
+ "minipass": "^3.0.0"
+ }
+ },
+ "minizlib": {
+ "version": "2.1.2",
+ "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-2.1.2.tgz",
+ "integrity": "sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==",
+ "requires": {
+ "minipass": "^3.0.0",
+ "yallist": "^4.0.0"
+ }
+ },
"mkdirp": {
"version": "0.5.6",
"resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
@@ -25522,6 +28555,11 @@
"thunky": "^1.0.2"
}
},
+ "nan": {
+ "version": "2.17.0",
+ "resolved": "https://registry.npmjs.org/nan/-/nan-2.17.0.tgz",
+ "integrity": "sha512-2ZTgtl0nJsO0KQCjEpxcIr5D+Yv90plTitZt9JBfQvVJDS5seMl3FOvsh3+9CoYWXf/1l5OaZzzF6nDm4cagaQ=="
+ },
"nanoid": {
"version": "3.3.4",
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
@@ -25547,29 +28585,193 @@
"resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz",
"integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw=="
},
- "no-case": {
- "version": "3.0.4",
- "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz",
- "integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==",
+ "no-case": {
+ "version": "3.0.4",
+ "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz",
+ "integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==",
+ "requires": {
+ "lower-case": "^2.0.2",
+ "tslib": "^2.0.3"
+ }
+ },
+ "node-forge": {
+ "version": "1.3.1",
+ "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-1.3.1.tgz",
+ "integrity": "sha512-dPEtOeMvF9VMcYV/1Wb8CPoVAXtp6MKMlcbAt4ddqmGqUJ6fQZFXkNZNkNlfevtNkGtaSoXf/vNNNSvgrdXwtA=="
+ },
+ "node-gyp": {
+ "version": "8.4.1",
+ "resolved": "https://registry.npmjs.org/node-gyp/-/node-gyp-8.4.1.tgz",
+ "integrity": "sha512-olTJRgUtAb/hOXG0E93wZDs5YiJlgbXxTwQAFHyNlRsXQnYzUaF2aGgujZbw+hR8aF4ZG/rST57bWMWD16jr9w==",
+ "requires": {
+ "env-paths": "^2.2.0",
+ "glob": "^7.1.4",
+ "graceful-fs": "^4.2.6",
+ "make-fetch-happen": "^9.1.0",
+ "nopt": "^5.0.0",
+ "npmlog": "^6.0.0",
+ "rimraf": "^3.0.2",
+ "semver": "^7.3.5",
+ "tar": "^6.1.2",
+ "which": "^2.0.2"
+ },
+ "dependencies": {
+ "make-fetch-happen": {
+ "version": "9.1.0",
+ "resolved": "https://registry.npmjs.org/make-fetch-happen/-/make-fetch-happen-9.1.0.tgz",
+ "integrity": "sha512-+zopwDy7DNknmwPQplem5lAZX/eCOzSvSNNcSKm5eVwTkOBzoktEfXsa9L23J/GIRhxRsaxzkPEhrJEpE2F4Gg==",
+ "requires": {
+ "agentkeepalive": "^4.1.3",
+ "cacache": "^15.2.0",
+ "http-cache-semantics": "^4.1.0",
+ "http-proxy-agent": "^4.0.1",
+ "https-proxy-agent": "^5.0.0",
+ "is-lambda": "^1.0.1",
+ "lru-cache": "^6.0.0",
+ "minipass": "^3.1.3",
+ "minipass-collect": "^1.0.2",
+ "minipass-fetch": "^1.3.2",
+ "minipass-flush": "^1.0.5",
+ "minipass-pipeline": "^1.2.4",
+ "negotiator": "^0.6.2",
+ "promise-retry": "^2.0.1",
+ "socks-proxy-agent": "^6.0.0",
+ "ssri": "^8.0.0"
+ }
+ }
+ }
+ },
+ "node-int64": {
+ "version": "0.4.0",
+ "resolved": "https://registry.npmjs.org/node-int64/-/node-int64-0.4.0.tgz",
+ "integrity": "sha512-O5lz91xSOeoXP6DulyHfllpq+Eg00MWitZIbtPfoSEvqIHdl5gfcY6hYzDWnj0qD5tz52PI08u9qUvSVeUBeHw=="
+ },
+ "node-releases": {
+ "version": "2.0.6",
+ "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.6.tgz",
+ "integrity": "sha512-PiVXnNuFm5+iYkLBNeq5211hvO38y63T0i2KKh2KnUs3RpzJ+JtODFjkD8yjLwnDkTYF1eKXheUwdssR+NRZdg=="
+ },
+ "node-sass": {
+ "version": "7.0.3",
+ "resolved": "https://registry.npmjs.org/node-sass/-/node-sass-7.0.3.tgz",
+ "integrity": "sha512-8MIlsY/4dXUkJDYht9pIWBhMil3uHmE8b/AdJPjmFn1nBx9X9BASzfzmsCy0uCCb8eqI3SYYzVPDswWqSx7gjw==",
+ "requires": {
+ "async-foreach": "^0.1.3",
+ "chalk": "^4.1.2",
+ "cross-spawn": "^7.0.3",
+ "gaze": "^1.0.0",
+ "get-stdin": "^4.0.1",
+ "glob": "^7.0.3",
+ "lodash": "^4.17.15",
+ "meow": "^9.0.0",
+ "nan": "^2.13.2",
+ "node-gyp": "^8.4.1",
+ "npmlog": "^5.0.0",
+ "request": "^2.88.0",
+ "sass-graph": "^4.0.1",
+ "stdout-stream": "^1.4.0",
+ "true-case-path": "^1.0.2"
+ },
+ "dependencies": {
+ "ansi-styles": {
+ "version": "4.3.0",
+ "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+ "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+ "requires": {
+ "color-convert": "^2.0.1"
+ }
+ },
+ "are-we-there-yet": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-2.0.0.tgz",
+ "integrity": "sha512-Ci/qENmwHnsYo9xKIcUJN5LeDKdJ6R1Z1j9V/J5wyq8nh/mYPEpIKJbBZXtZjG04HiK7zV/p6Vs9952MrMeUIw==",
+ "requires": {
+ "delegates": "^1.0.0",
+ "readable-stream": "^3.6.0"
+ }
+ },
+ "chalk": {
+ "version": "4.1.2",
+ "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+ "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+ "requires": {
+ "ansi-styles": "^4.1.0",
+ "supports-color": "^7.1.0"
+ }
+ },
+ "color-convert": {
+ "version": "2.0.1",
+ "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+ "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+ "requires": {
+ "color-name": "~1.1.4"
+ }
+ },
+ "color-name": {
+ "version": "1.1.4",
+ "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+ "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+ },
+ "gauge": {
+ "version": "3.0.2",
+ "resolved": "https://registry.npmjs.org/gauge/-/gauge-3.0.2.tgz",
+ "integrity": "sha512-+5J6MS/5XksCuXq++uFRsnUd7Ovu1XenbeuIuNRJxYWjgQbPuFhT14lAvsWfqfAmnwluf1OwMjz39HjfLPci0Q==",
+ "requires": {
+ "aproba": "^1.0.3 || ^2.0.0",
+ "color-support": "^1.1.2",
+ "console-control-strings": "^1.0.0",
+ "has-unicode": "^2.0.1",
+ "object-assign": "^4.1.1",
+ "signal-exit": "^3.0.0",
+ "string-width": "^4.2.3",
+ "strip-ansi": "^6.0.1",
+ "wide-align": "^1.1.2"
+ }
+ },
+ "has-flag": {
+ "version": "4.0.0",
+ "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+ "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
+ },
+ "npmlog": {
+ "version": "5.0.1",
+ "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-5.0.1.tgz",
+ "integrity": "sha512-AqZtDUWOMKs1G/8lwylVjrdYgqA4d9nu8hc+0gzRxlDb1I10+FHBGMXs6aiQHFdCUUlqH99MUMuLfzWDNDtfxw==",
+ "requires": {
+ "are-we-there-yet": "^2.0.0",
+ "console-control-strings": "^1.1.0",
+ "gauge": "^3.0.0",
+ "set-blocking": "^2.0.0"
+ }
+ },
+ "supports-color": {
+ "version": "7.2.0",
+ "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+ "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+ "requires": {
+ "has-flag": "^4.0.0"
+ }
+ }
+ }
+ },
+ "nopt": {
+ "version": "5.0.0",
+ "resolved": "https://registry.npmjs.org/nopt/-/nopt-5.0.0.tgz",
+ "integrity": "sha512-Tbj67rffqceeLpcRXrT7vKAN8CwfPeIBgM7E6iBkmKLV7bEMwpGgYLGv0jACUsECaa/vuxP0IjEont6umdMgtQ==",
"requires": {
- "lower-case": "^2.0.2",
- "tslib": "^2.0.3"
+ "abbrev": "1"
}
},
- "node-forge": {
- "version": "1.3.1",
- "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-1.3.1.tgz",
- "integrity": "sha512-dPEtOeMvF9VMcYV/1Wb8CPoVAXtp6MKMlcbAt4ddqmGqUJ6fQZFXkNZNkNlfevtNkGtaSoXf/vNNNSvgrdXwtA=="
- },
- "node-int64": {
- "version": "0.4.0",
- "resolved": "https://registry.npmjs.org/node-int64/-/node-int64-0.4.0.tgz",
- "integrity": "sha512-O5lz91xSOeoXP6DulyHfllpq+Eg00MWitZIbtPfoSEvqIHdl5gfcY6hYzDWnj0qD5tz52PI08u9qUvSVeUBeHw=="
- },
- "node-releases": {
- "version": "2.0.6",
- "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.6.tgz",
- "integrity": "sha512-PiVXnNuFm5+iYkLBNeq5211hvO38y63T0i2KKh2KnUs3RpzJ+JtODFjkD8yjLwnDkTYF1eKXheUwdssR+NRZdg=="
+ "normalize-package-data": {
+ "version": "3.0.3",
+ "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-3.0.3.tgz",
+ "integrity": "sha512-p2W1sgqij3zMMyRC067Dg16bfzVH+w7hyegmpIvZ4JNjqtGOVAIvLmjBx3yP7YTe9vKJgkoNOPjwQGogDoMXFA==",
+ "requires": {
+ "hosted-git-info": "^4.0.1",
+ "is-core-module": "^2.5.0",
+ "semver": "^7.3.4",
+ "validate-npm-package-license": "^3.0.1"
+ }
},
"normalize-path": {
"version": "3.0.0",
@@ -25594,6 +28796,17 @@
"path-key": "^3.0.0"
}
},
+ "npmlog": {
+ "version": "6.0.2",
+ "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-6.0.2.tgz",
+ "integrity": "sha512-/vBvz5Jfr9dT/aFWd0FIRf+T/Q2WBsLENygUaFUqstqsycmZAP/t5BvFJTK0viFmSUxiUKTUplWy5vt+rvKIxg==",
+ "requires": {
+ "are-we-there-yet": "^3.0.0",
+ "console-control-strings": "^1.1.0",
+ "gauge": "^4.0.3",
+ "set-blocking": "^2.0.0"
+ }
+ },
"nth-check": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
@@ -25607,6 +28820,11 @@
"resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.2.tgz",
"integrity": "sha512-90yv+6538zuvUMnN+zCr8LuV6bPFdq50304114vJYJ8RDyK8D5O9Phpbd6SZWgI7PwzmmfN1upeOJlvybDSgCw=="
},
+ "oauth-sign": {
+ "version": "0.9.0",
+ "resolved": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.9.0.tgz",
+ "integrity": "sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ=="
+ },
"object-assign": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
@@ -25770,6 +28988,14 @@
"p-limit": "^3.0.2"
}
},
+ "p-map": {
+ "version": "4.0.0",
+ "resolved": "https://registry.npmjs.org/p-map/-/p-map-4.0.0.tgz",
+ "integrity": "sha512-/bjOqmgETBYB5BoEeGVea8dmvHb2m9GLy1E9W43yeyfP6QQCZGFNa+XRceJEuDB6zqr+gKpIAmlLebMpykw/MQ==",
+ "requires": {
+ "aggregate-error": "^3.0.0"
+ }
+ },
"p-retry": {
"version": "4.6.2",
"resolved": "https://registry.npmjs.org/p-retry/-/p-retry-4.6.2.tgz",
@@ -26679,6 +29905,32 @@
"asap": "~2.0.6"
}
},
+ "promise-inflight": {
+ "version": "1.0.1",
+ "resolved": "https://registry.npmjs.org/promise-inflight/-/promise-inflight-1.0.1.tgz",
+ "integrity": "sha512-6zWPyEOFaQBJYcGMHBKTKJ3u6TBsnMFOIZSa6ce1e/ZrrsOlnHRHbabMjLiBYKp+n44X9eUI6VUPaukCXHuG4g=="
+ },
+ "promise-polyfill": {
+ "version": "6.1.0",
+ "resolved": "https://registry.npmjs.org/promise-polyfill/-/promise-polyfill-6.1.0.tgz",
+ "integrity": "sha512-g0LWaH0gFsxovsU7R5LrrhHhWAWiHRnh1GPrhXnPgYsDkIqjRYUYSZEsej/wtleDrz5xVSIDbeKfidztp2XHFQ=="
+ },
+ "promise-retry": {
+ "version": "2.0.1",
+ "resolved": "https://registry.npmjs.org/promise-retry/-/promise-retry-2.0.1.tgz",
+ "integrity": "sha512-y+WKFlBR8BGXnsNlIHFGPZmyDf3DFMoLhaflAnyZgV6rG6xu+JwesTo2Q9R6XwYmtmwAFCkAk3e35jEdoeh/3g==",
+ "requires": {
+ "err-code": "^2.0.2",
+ "retry": "^0.12.0"
+ },
+ "dependencies": {
+ "retry": {
+ "version": "0.12.0",
+ "resolved": "https://registry.npmjs.org/retry/-/retry-0.12.0.tgz",
+ "integrity": "sha512-9LkiTwjUh6rT555DtE9rTX+BKByPfrMzEAtnlEtdEwr3Nkffwiihqe2bWADg+OQRjt9gl6ICdmB/ZFDCGAtSow=="
+ }
+ }
+ },
"prompts": {
"version": "2.4.2",
"resolved": "https://registry.npmjs.org/prompts/-/prompts-2.4.2.tgz",
@@ -26721,6 +29973,11 @@
}
}
},
+ "proxy-from-env": {
+ "version": "1.1.0",
+ "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+ "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+ },
"psl": {
"version": "1.9.0",
"resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz",
@@ -26806,6 +30063,12 @@
}
}
},
+ "rc-highlight": {
+ "version": "2.3.4",
+ "resolved": "https://registry.npmjs.org/rc-highlight/-/rc-highlight-2.3.4.tgz",
+ "integrity": "sha512-LqljqG4ZHna2/9fkdXRGJ8c0slywuA0+taGzK4byU63MgW4SpMPYtKWs8kdyFN53Ai2uGWjKIlsbD5rtKk4bDg==",
+ "requires": {}
+ },
"react": {
"version": "18.2.0",
"resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
@@ -26937,6 +30200,23 @@
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
"integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A=="
},
+ "react-router": {
+ "version": "6.4.3",
+ "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.4.3.tgz",
+ "integrity": "sha512-BT6DoGn6aV1FVP5yfODMOiieakp3z46P1Fk0RNzJMACzE7C339sFuHebfvWtnB4pzBvXXkHP2vscJzWRuUjTtA==",
+ "requires": {
+ "@remix-run/router": "1.0.3"
+ }
+ },
+ "react-router-dom": {
+ "version": "6.4.3",
+ "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.4.3.tgz",
+ "integrity": "sha512-MiaYQU8CwVCaOfJdYvt84KQNjT78VF0TJrA17SIQgNHRvLnXDJO6qsFqq8F/zzB1BWZjCFIrQpu4QxcshitziQ==",
+ "requires": {
+ "@remix-run/router": "1.0.3",
+ "react-router": "6.4.3"
+ }
+ },
"react-scripts": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
@@ -26992,6 +30272,17 @@
"workbox-webpack-plugin": "^6.4.1"
}
},
+ "react-transition-group": {
+ "version": "4.4.5",
+ "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
+ "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
+ "requires": {
+ "@babel/runtime": "^7.5.5",
+ "dom-helpers": "^5.0.1",
+ "loose-envify": "^1.4.0",
+ "prop-types": "^15.6.2"
+ }
+ },
"read-cache": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -27000,6 +30291,95 @@
"pify": "^2.3.0"
}
},
+ "read-pkg": {
+ "version": "5.2.0",
+ "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz",
+ "integrity": "sha512-Ug69mNOpfvKDAc2Q8DRpMjjzdtrnv9HcSMX+4VsZxD1aZ6ZzrIE7rlzXBtWTyhULSMKg076AW6WR5iZpD0JiOg==",
+ "requires": {
+ "@types/normalize-package-data": "^2.4.0",
+ "normalize-package-data": "^2.5.0",
+ "parse-json": "^5.0.0",
+ "type-fest": "^0.6.0"
+ },
+ "dependencies": {
+ "hosted-git-info": {
+ "version": "2.8.9",
+ "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz",
+ "integrity": "sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw=="
+ },
+ "normalize-package-data": {
+ "version": "2.5.0",
+ "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.5.0.tgz",
+ "integrity": "sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==",
+ "requires": {
+ "hosted-git-info": "^2.1.4",
+ "resolve": "^1.10.0",
+ "semver": "2 || 3 || 4 || 5",
+ "validate-npm-package-license": "^3.0.1"
+ }
+ },
+ "semver": {
+ "version": "5.7.1",
+ "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
+ "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ=="
+ },
+ "type-fest": {
+ "version": "0.6.0",
+ "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.6.0.tgz",
+ "integrity": "sha512-q+MB8nYR1KDLrgr4G5yemftpMC7/QLqVndBmEEdqzmNj5dcFOO4Oo8qlwZE3ULT3+Zim1F8Kq4cBnikNhlCMlg=="
+ }
+ }
+ },
+ "read-pkg-up": {
+ "version": "7.0.1",
+ "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-7.0.1.tgz",
+ "integrity": "sha512-zK0TB7Xd6JpCLmlLmufqykGE+/TlOePD6qKClNW7hHDKFh/J7/7gCWGR7joEQEW1bKq3a3yUZSObOoWLFQ4ohg==",
+ "requires": {
+ "find-up": "^4.1.0",
+ "read-pkg": "^5.2.0",
+ "type-fest": "^0.8.1"
+ },
+ "dependencies": {
+ "find-up": {
+ "version": "4.1.0",
+ "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
+ "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
+ "requires": {
+ "locate-path": "^5.0.0",
+ "path-exists": "^4.0.0"
+ }
+ },
+ "locate-path": {
+ "version": "5.0.0",
+ "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
+ "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
+ "requires": {
+ "p-locate": "^4.1.0"
+ }
+ },
+ "p-limit": {
+ "version": "2.3.0",
+ "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+ "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+ "requires": {
+ "p-try": "^2.0.0"
+ }
+ },
+ "p-locate": {
+ "version": "4.1.0",
+ "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
+ "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
+ "requires": {
+ "p-limit": "^2.2.0"
+ }
+ },
+ "type-fest": {
+ "version": "0.8.1",
+ "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.8.1.tgz",
+ "integrity": "sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA=="
+ }
+ }
+ },
"readable-stream": {
"version": "3.6.0",
"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
@@ -27131,6 +30511,64 @@
"strip-ansi": "^6.0.1"
}
},
+ "request": {
+ "version": "2.88.2",
+ "resolved": "https://registry.npmjs.org/request/-/request-2.88.2.tgz",
+ "integrity": "sha512-MsvtOrfG9ZcrOwAW+Qi+F6HbD0CWXEh9ou77uOb7FM2WPhwT7smM833PzanhJLsgXjN89Ir6V2PczXNnMpwKhw==",
+ "requires": {
+ "aws-sign2": "~0.7.0",
+ "aws4": "^1.8.0",
+ "caseless": "~0.12.0",
+ "combined-stream": "~1.0.6",
+ "extend": "~3.0.2",
+ "forever-agent": "~0.6.1",
+ "form-data": "~2.3.2",
+ "har-validator": "~5.1.3",
+ "http-signature": "~1.2.0",
+ "is-typedarray": "~1.0.0",
+ "isstream": "~0.1.2",
+ "json-stringify-safe": "~5.0.1",
+ "mime-types": "~2.1.19",
+ "oauth-sign": "~0.9.0",
+ "performance-now": "^2.1.0",
+ "qs": "~6.5.2",
+ "safe-buffer": "^5.1.2",
+ "tough-cookie": "~2.5.0",
+ "tunnel-agent": "^0.6.0",
+ "uuid": "^3.3.2"
+ },
+ "dependencies": {
+ "form-data": {
+ "version": "2.3.3",
+ "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.3.3.tgz",
+ "integrity": "sha512-1lLKB2Mu3aGP1Q/2eCOx0fNbRMe7XdwktwOruhfqqd0rIJWwN4Dh+E3hrPSlDCXnSR7UtZ1N38rVXm+6+MEhJQ==",
+ "requires": {
+ "asynckit": "^0.4.0",
+ "combined-stream": "^1.0.6",
+ "mime-types": "^2.1.12"
+ }
+ },
+ "qs": {
+ "version": "6.5.3",
+ "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.3.tgz",
+ "integrity": "sha512-qxXIEh4pCGfHICj1mAJQ2/2XVZkjCDTcEgfoSQxc/fYivUZxTkk7L3bDBJSoNrEzXI17oUO5Dp07ktqE5KzczA=="
+ },
+ "tough-cookie": {
+ "version": "2.5.0",
+ "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.5.0.tgz",
+ "integrity": "sha512-nlLsUzgm1kfLXSXfRZMc1KLAugd4hqJHDTvc2hDIwS3mZAfMEuMbc03SujMF+GEcpaX/qboeycw6iO8JwVv2+g==",
+ "requires": {
+ "psl": "^1.1.28",
+ "punycode": "^2.1.1"
+ }
+ },
+ "uuid": {
+ "version": "3.4.0",
+ "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
+ "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A=="
+ }
+ }
+ },
"require-directory": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
@@ -27310,6 +30748,48 @@
"resolved": "https://registry.npmjs.org/sanitize.css/-/sanitize.css-13.0.0.tgz",
"integrity": "sha512-ZRwKbh/eQ6w9vmTjkuG0Ioi3HBwPFce0O+v//ve+aOq1oeCy7jMV2qzzAlpsNuqpqCBjjriM1lbtZbF/Q8jVyA=="
},
+ "sass-graph": {
+ "version": "4.0.1",
+ "resolved": "https://registry.npmjs.org/sass-graph/-/sass-graph-4.0.1.tgz",
+ "integrity": "sha512-5YCfmGBmxoIRYHnKK2AKzrAkCoQ8ozO+iumT8K4tXJXRVCPf+7s1/9KxTSW3Rbvf+7Y7b4FR3mWyLnQr3PHocA==",
+ "requires": {
+ "glob": "^7.0.0",
+ "lodash": "^4.17.11",
+ "scss-tokenizer": "^0.4.3",
+ "yargs": "^17.2.1"
+ },
+ "dependencies": {
+ "cliui": {
+ "version": "8.0.1",
+ "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz",
+ "integrity": "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==",
+ "requires": {
+ "string-width": "^4.2.0",
+ "strip-ansi": "^6.0.1",
+ "wrap-ansi": "^7.0.0"
+ }
+ },
+ "yargs": {
+ "version": "17.6.2",
+ "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.6.2.tgz",
+ "integrity": "sha512-1/9UrdHjDZc0eOU0HxOHoS78C69UD3JRMvzlJ7S79S2nTaWRA/whGCTV8o9e/N/1Va9YIV7Q4sOxD8VV4pCWOw==",
+ "requires": {
+ "cliui": "^8.0.1",
+ "escalade": "^3.1.1",
+ "get-caller-file": "^2.0.5",
+ "require-directory": "^2.1.1",
+ "string-width": "^4.2.3",
+ "y18n": "^5.0.5",
+ "yargs-parser": "^21.1.1"
+ }
+ },
+ "yargs-parser": {
+ "version": "21.1.1",
+ "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz",
+ "integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw=="
+ }
+ }
+ },
"sass-loader": {
"version": "12.6.0",
"resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-12.6.0.tgz",
@@ -27350,6 +30830,15 @@
"ajv-keywords": "^3.5.2"
}
},
+ "scss-tokenizer": {
+ "version": "0.4.3",
+ "resolved": "https://registry.npmjs.org/scss-tokenizer/-/scss-tokenizer-0.4.3.tgz",
+ "integrity": "sha512-raKLgf1LI5QMQnG+RxHz6oK0sL3x3I4FN2UDLqgLOGO8hodECNnNh5BXn7fAyBxrA8zVzdQizQ6XjNJQ+uBwMw==",
+ "requires": {
+ "js-base64": "^2.4.9",
+ "source-map": "^0.7.3"
+ }
+ },
"select-hose": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
@@ -27492,6 +30981,11 @@
"send": "0.18.0"
}
},
+ "set-blocking": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
+ "integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw=="
+ },
"setprototypeof": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
@@ -27540,6 +31034,11 @@
"resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
"integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q=="
},
+ "smart-buffer": {
+ "version": "4.2.0",
+ "resolved": "https://registry.npmjs.org/smart-buffer/-/smart-buffer-4.2.0.tgz",
+ "integrity": "sha512-94hK0Hh8rPqQl2xXc3HsaBoOXKV20MToPkcXvwbISWLEs+64sBq5kFgn2kJDHb1Pry9yrP0dxrCI9RRci7RXKg=="
+ },
"sockjs": {
"version": "0.3.24",
"resolved": "https://registry.npmjs.org/sockjs/-/sockjs-0.3.24.tgz",
@@ -27550,6 +31049,25 @@
"websocket-driver": "^0.7.4"
}
},
+ "socks": {
+ "version": "2.7.1",
+ "resolved": "https://registry.npmjs.org/socks/-/socks-2.7.1.tgz",
+ "integrity": "sha512-7maUZy1N7uo6+WVEX6psASxtNlKaNVMlGQKkG/63nEDdLOWNbiUMoLK7X4uYoLhQstau72mLgfEWcXcwsaHbYQ==",
+ "requires": {
+ "ip": "^2.0.0",
+ "smart-buffer": "^4.2.0"
+ }
+ },
+ "socks-proxy-agent": {
+ "version": "6.2.1",
+ "resolved": "https://registry.npmjs.org/socks-proxy-agent/-/socks-proxy-agent-6.2.1.tgz",
+ "integrity": "sha512-a6KW9G+6B3nWZ1yB8G7pJwL3ggLy1uTzKAgCb7ttblwqdz9fMGJUuTy3uFzEP48FAs9FLILlmzDlE2JJhVQaXQ==",
+ "requires": {
+ "agent-base": "^6.0.2",
+ "debug": "^4.3.3",
+ "socks": "^2.6.2"
+ }
+ },
"source-list-map": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz",
@@ -27596,6 +31114,34 @@
"resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
"integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA=="
},
+ "spdx-correct": {
+ "version": "3.1.1",
+ "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.1.1.tgz",
+ "integrity": "sha512-cOYcUWwhCuHCXi49RhFRCyJEK3iPj1Ziz9DpViV3tbZOwXD49QzIN3MpOLJNxh2qwq2lJJZaKMVw9qNi4jTC0w==",
+ "requires": {
+ "spdx-expression-parse": "^3.0.0",
+ "spdx-license-ids": "^3.0.0"
+ }
+ },
+ "spdx-exceptions": {
+ "version": "2.3.0",
+ "resolved": "https://registry.npmjs.org/spdx-exceptions/-/spdx-exceptions-2.3.0.tgz",
+ "integrity": "sha512-/tTrYOC7PPI1nUAgx34hUpqXuyJG+DTHJTnIULG4rDygi4xu/tfgmq1e1cIRwRzwZgo4NLySi+ricLkZkw4i5A=="
+ },
+ "spdx-expression-parse": {
+ "version": "3.0.1",
+ "resolved": "https://registry.npmjs.org/spdx-expression-parse/-/spdx-expression-parse-3.0.1.tgz",
+ "integrity": "sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==",
+ "requires": {
+ "spdx-exceptions": "^2.1.0",
+ "spdx-license-ids": "^3.0.0"
+ }
+ },
+ "spdx-license-ids": {
+ "version": "3.0.12",
+ "resolved": "https://registry.npmjs.org/spdx-license-ids/-/spdx-license-ids-3.0.12.tgz",
+ "integrity": "sha512-rr+VVSXtRhO4OHbXUiAF7xW3Bo9DuuF6C5jH+q/x15j2jniycgKbxU09Hr0WqlSLUs4i4ltHGXqTe7VHclYWyA=="
+ },
"spdy": {
"version": "4.0.2",
"resolved": "https://registry.npmjs.org/spdy/-/spdy-4.0.2.tgz",
@@ -27626,6 +31172,30 @@
"resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
"integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g=="
},
+ "sshpk": {
+ "version": "1.17.0",
+ "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.17.0.tgz",
+ "integrity": "sha512-/9HIEs1ZXGhSPE8X6Ccm7Nam1z8KcoCqPdI7ecm1N33EzAetWahvQWVqLZtaZQ+IDKX4IyA2o0gBzqIMkAagHQ==",
+ "requires": {
+ "asn1": "~0.2.3",
+ "assert-plus": "^1.0.0",
+ "bcrypt-pbkdf": "^1.0.0",
+ "dashdash": "^1.12.0",
+ "ecc-jsbn": "~0.1.1",
+ "getpass": "^0.1.1",
+ "jsbn": "~0.1.0",
+ "safer-buffer": "^2.0.2",
+ "tweetnacl": "~0.14.0"
+ }
+ },
+ "ssri": {
+ "version": "8.0.1",
+ "resolved": "https://registry.npmjs.org/ssri/-/ssri-8.0.1.tgz",
+ "integrity": "sha512-97qShzy1AiyxvPNIkLWoGua7xoQzzPjQ0HAH4B0rWKo7SZ6USuPcrUiAFrws0UH8RrbWmgq3LMTObhPIHbbBeQ==",
+ "requires": {
+ "minipass": "^3.1.1"
+ }
+ },
"stable": {
"version": "0.1.8",
"resolved": "https://registry.npmjs.org/stable/-/stable-0.1.8.tgz",
@@ -27656,6 +31226,43 @@
"resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
"integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ=="
},
+ "stdout-stream": {
+ "version": "1.4.1",
+ "resolved": "https://registry.npmjs.org/stdout-stream/-/stdout-stream-1.4.1.tgz",
+ "integrity": "sha512-j4emi03KXqJWcIeF8eIXkjMFN1Cmb8gUlDYGeBALLPo5qdyTfA9bOtl8m33lRoC+vFMkP3gl0WsDr6+gzxbbTA==",
+ "requires": {
+ "readable-stream": "^2.0.1"
+ },
+ "dependencies": {
+ "readable-stream": {
+ "version": "2.3.7",
+ "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
+ "integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==",
+ "requires": {
+ "core-util-is": "~1.0.0",
+ "inherits": "~2.0.3",
+ "isarray": "~1.0.0",
+ "process-nextick-args": "~2.0.0",
+ "safe-buffer": "~5.1.1",
+ "string_decoder": "~1.1.1",
+ "util-deprecate": "~1.0.1"
+ }
+ },
+ "safe-buffer": {
+ "version": "5.1.2",
+ "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+ "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+ },
+ "string_decoder": {
+ "version": "1.1.1",
+ "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+ "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+ "requires": {
+ "safe-buffer": "~5.1.0"
+ }
+ }
+ }
+ },
"string_decoder": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
@@ -27791,6 +31398,11 @@
"postcss-selector-parser": "^6.0.4"
}
},
+ "stylis": {
+ "version": "4.1.3",
+ "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.1.3.tgz",
+ "integrity": "sha512-GP6WDNWf+o403jrEp9c5jibKavrtLW+/qYGhFxFrG8maXhwTBI7gLLhiBb0o7uFccWN+EOS9aMO6cGHWAO07OA=="
+ },
"supports-color": {
"version": "5.5.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
@@ -27904,6 +31516,15 @@
}
}
},
+ "sweetalert": {
+ "version": "2.1.2",
+ "resolved": "https://registry.npmjs.org/sweetalert/-/sweetalert-2.1.2.tgz",
+ "integrity": "sha512-iWx7X4anRBNDa/a+AdTmvAzQtkN1+s4j/JJRWlHpYE8Qimkohs8/XnFcWeYHH2lMA8LRCa5tj2d244If3S/hzA==",
+ "requires": {
+ "es6-object-assign": "^1.1.0",
+ "promise-polyfill": "^6.0.2"
+ }
+ },
"symbol-tree": {
"version": "3.2.4",
"resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
@@ -27951,6 +31572,26 @@
"resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
"integrity": "sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ=="
},
+ "tar": {
+ "version": "6.1.12",
+ "resolved": "https://registry.npmjs.org/tar/-/tar-6.1.12.tgz",
+ "integrity": "sha512-jU4TdemS31uABHd+Lt5WEYJuzn+TJTCBLljvIAHZOz6M9Os5pJ4dD+vRFLxPa/n3T0iEFzpi+0x1UfuDZYbRMw==",
+ "requires": {
+ "chownr": "^2.0.0",
+ "fs-minipass": "^2.0.0",
+ "minipass": "^3.0.0",
+ "minizlib": "^2.1.1",
+ "mkdirp": "^1.0.3",
+ "yallist": "^4.0.0"
+ },
+ "dependencies": {
+ "mkdirp": {
+ "version": "1.0.4",
+ "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
+ "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw=="
+ }
+ }
+ },
"temp-dir": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/temp-dir/-/temp-dir-2.0.0.tgz",
@@ -28087,6 +31728,19 @@
"punycode": "^2.1.1"
}
},
+ "trim-newlines": {
+ "version": "3.0.1",
+ "resolved": "https://registry.npmjs.org/trim-newlines/-/trim-newlines-3.0.1.tgz",
+ "integrity": "sha512-c1PTsA3tYrIsLGkJkzHF+w9F2EyxfXGo4UyJc4pFL++FMjnq0HJS69T3M7d//gKrFKwy429bouPescbjecU+Zw=="
+ },
+ "true-case-path": {
+ "version": "1.0.3",
+ "resolved": "https://registry.npmjs.org/true-case-path/-/true-case-path-1.0.3.tgz",
+ "integrity": "sha512-m6s2OdQe5wgpFMC+pAJ+q9djG82O2jcHPOI6RNg1yy9rCYR+WD6Nbpl32fDpfC56nirdRy+opFa/Vk7HYhqaew==",
+ "requires": {
+ "glob": "^7.1.2"
+ }
+ },
"tryer": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/tryer/-/tryer-1.0.1.tgz",
@@ -28138,6 +31792,19 @@
}
}
},
+ "tunnel-agent": {
+ "version": "0.6.0",
+ "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
+ "integrity": "sha512-McnNiV1l8RYeY8tBgEpuodCC1mLUdbSN+CYBL7kJsJNInOP8UjDDEwdk6Mw60vdLLrr5NHKZhMAOSrR2NZuQ+w==",
+ "requires": {
+ "safe-buffer": "^5.0.1"
+ }
+ },
+ "tweetnacl": {
+ "version": "0.14.5",
+ "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-0.14.5.tgz",
+ "integrity": "sha512-KXXFFdAbFXY4geFIwoyNK+f5Z1b7swfXABfL7HXCmoIWMKU3dmS26672A4EeQtDzLKy7SXmfBu51JolvEKwtGA=="
+ },
"type-check": {
"version": "0.4.0",
"resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
@@ -28174,10 +31841,9 @@
}
},
"typescript": {
- "version": "4.8.4",
- "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.8.4.tgz",
- "integrity": "sha512-QCh+85mCy+h0IGff8r5XWzOVSbBO+KfeYrMQh7NJ58QujwcE22u+NUSmUxqF+un70P9GXKxa2HCNiTTMJknyjQ==",
- "peer": true
+ "version": "4.9.3",
+ "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.3.tgz",
+ "integrity": "sha512-CIfGzTelbKNEnLpLdGFgdyKhG23CKdKgQPOBc+OUNrkJ2vr+KSzsSV5kq5iWhEQbok+quxgGzrAtGWCyU7tHnA=="
},
"unbox-primitive": {
"version": "1.0.2",
@@ -28214,6 +31880,22 @@
"resolved": "https://registry.npmjs.org/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-2.1.0.tgz",
"integrity": "sha512-6t3foTQI9qne+OZoVQB/8x8rk2k1eVy1gRXhV3oFQ5T6R1dqQ1xtin3XqSlx3+ATBkliTaR/hHyJBm+LVPNM8w=="
},
+ "unique-filename": {
+ "version": "1.1.1",
+ "resolved": "https://registry.npmjs.org/unique-filename/-/unique-filename-1.1.1.tgz",
+ "integrity": "sha512-Vmp0jIp2ln35UTXuryvjzkjGdRyf9b2lTXuSYUiPmzRcl3FDtYqAwOnTJkAngD9SWhnoJzDbTKwaOrZ+STtxNQ==",
+ "requires": {
+ "unique-slug": "^2.0.0"
+ }
+ },
+ "unique-slug": {
+ "version": "2.0.2",
+ "resolved": "https://registry.npmjs.org/unique-slug/-/unique-slug-2.0.2.tgz",
+ "integrity": "sha512-zoWr9ObaxALD3DOPfjPSqxt4fnZiWblxHIgeWqW8x7UqDzEtHEQLzji2cuJYQFCU6KmoJikOYAZlrTHHebjx2w==",
+ "requires": {
+ "imurmurhash": "^0.1.4"
+ }
+ },
"unique-string": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/unique-string/-/unique-string-2.0.0.tgz",
@@ -28309,11 +31991,37 @@
"source-map": "^0.7.3"
}
},
+ "validate-npm-package-license": {
+ "version": "3.0.4",
+ "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",
+ "integrity": "sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==",
+ "requires": {
+ "spdx-correct": "^3.0.0",
+ "spdx-expression-parse": "^3.0.0"
+ }
+ },
"vary": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
"integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg=="
},
+ "verror": {
+ "version": "1.10.0",
+ "resolved": "https://registry.npmjs.org/verror/-/verror-1.10.0.tgz",
+ "integrity": "sha512-ZZKSmDAEFOijERBLkmYfJ+vmk3w+7hOLYDNkRCuRuMJGEmqYNCNLyBBFwWKVMhfwaEF3WOd0Zlw86U/WC/+nYw==",
+ "requires": {
+ "assert-plus": "^1.0.0",
+ "core-util-is": "1.0.2",
+ "extsprintf": "^1.2.0"
+ },
+ "dependencies": {
+ "core-util-is": {
+ "version": "1.0.2",
+ "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
+ "integrity": "sha512-3lqz5YjWTYnW6dlDa5TLaTCcShfar1e40rmcJVwCBJC6mWlFuj0eCHIElmG1g5kyuJ/GD+8Wn4FFCcz4gJPfaQ=="
+ }
+ }
+ },
"w3c-hr-time": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz",
@@ -28672,6 +32380,14 @@
"is-typed-array": "^1.1.10"
}
},
+ "wide-align": {
+ "version": "1.1.5",
+ "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.5.tgz",
+ "integrity": "sha512-eDMORYaPNZ4sQIuuYPDHdQvf4gyCF9rEEV/yPxGfwPkRodwEgiMUUXTx/dex+Me0wxx53S+NgUHaP7y3MGlDmg==",
+ "requires": {
+ "string-width": "^1.0.2 || 2 || 3 || 4"
+ }
+ },
"word-wrap": {
"version": "1.2.3",
"resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz",
diff --git a/package.json b/package.json
index 6b5a013cf27144b0e9ce0859613c9c23aaee7e58..25d78a9a96a9b312bebcbf50bb33959ebe95e409 100644
--- a/package.json
+++ b/package.json
@@ -3,12 +3,25 @@
"version": "0.1.0",
"private": true,
"dependencies": {
+ "@dynamicss/dynamicss": "^2.2.8",
+ "@emotion/react": "^11.10.5",
+ "@emotion/styled": "^11.10.5",
+ "@mui/icons-material": "^5.10.14",
+ "@mui/material": "^5.10.14",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
+ "@types/react": "^18.0.25",
+ "axios": "^1.3.1",
+ "node-sass": "^7.0.3",
+ "rc-highlight": "^2.3.4",
"react": "^18.2.0",
"react-dom": "^18.2.0",
+ "react-router": "^6.4.3",
+ "react-router-dom": "^6.4.3",
"react-scripts": "5.0.1",
+ "sweetalert": "^2.1.2",
+ "typescript": "^4.9.3",
"web-vitals": "^2.1.4"
},
"scripts": {
diff --git a/public/files-ui-ico-nb.ico b/public/files-ui-ico-nb.ico
new file mode 100644
index 0000000000000000000000000000000000000000..121610b8db5afa99b5bb76bc7e70c1474e1692fd
Binary files /dev/null and b/public/files-ui-ico-nb.ico differ
diff --git a/public/files-ui-logo-arrow.ico b/public/files-ui-logo-arrow.ico
new file mode 100644
index 0000000000000000000000000000000000000000..3ba296529f4433fbf9688c4582660d8f1afab76c
Binary files /dev/null and b/public/files-ui-logo-arrow.ico differ
diff --git a/public/files-ui-logo.ico b/public/files-ui-logo.ico
new file mode 100644
index 0000000000000000000000000000000000000000..91d0ae77492e2e82a8b1d15cfe67e185d2f761e8
Binary files /dev/null and b/public/files-ui-logo.ico differ
diff --git a/public/icons/files-ui-logo-blue-ico.ico b/public/icons/files-ui-logo-blue-ico.ico
new file mode 100644
index 0000000000000000000000000000000000000000..b4503cc680490fcff8af698f5066f822d432953c
Binary files /dev/null and b/public/icons/files-ui-logo-blue-ico.ico differ
diff --git a/public/icons/files-ui-logo-blue-wbg-ico.ico b/public/icons/files-ui-logo-blue-wbg-ico.ico
new file mode 100644
index 0000000000000000000000000000000000000000..50ec65540e5884704fe0c5e8e0fb68d4856d00c3
Binary files /dev/null and b/public/icons/files-ui-logo-blue-wbg-ico.ico differ
diff --git a/public/icons/files-ui-logo-white-bbg-ico.ico b/public/icons/files-ui-logo-white-bbg-ico.ico
new file mode 100644
index 0000000000000000000000000000000000000000..3f724a1e1df27107addc3f22b618888574e22f4d
Binary files /dev/null and b/public/icons/files-ui-logo-white-bbg-ico.ico differ
diff --git a/public/icons/files-ui-logo-white-ico.ico b/public/icons/files-ui-logo-white-ico.ico
new file mode 100644
index 0000000000000000000000000000000000000000..fc80f25948b28e59cb6bd21c9f7fa9b58ef1ea97
Binary files /dev/null and b/public/icons/files-ui-logo-white-ico.ico differ
diff --git a/public/index.html b/public/index.html
index aa069f27cbd9d53394428171c3989fd03db73c76..b7ab8aa0296be06ce2b7222bc40f75dddb27bdcc 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,43 +1,29 @@
<!DOCTYPE html>
<html lang="en">
<head>
+
+ <!-- <script defer src="https://app.embed.im/snow.js"></script>
+ -->
<meta charset="utf-8" />
- <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+ <link rel="icon" href="%PUBLIC_URL%/icons/files-ui-logo-blue-ico.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
- <meta
+ <!-- <meta
name="description"
content="Web site created using create-react-app"
- />
+ /> -->
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
- <!--
- manifest.json provides metadata used when your web app is installed on a
- user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
- -->
+
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
- <!--
- Notice the use of %PUBLIC_URL% in the tags above.
- It will be replaced with the URL of the `public` folder during the build.
- Only files inside the `public` folder can be referenced from the HTML.
- Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
- work correctly both with client-side routing and a non-root public URL.
- Learn how to configure a non-root public URL by running `npm run build`.
- -->
- <title>React App</title>
+ <title>Files-ui: File upload react library</title>
+ <meta
+ name="description"
+ content="Files UI is a library of React components for managing file uploads, previews and more. Make the file upload task easy for developers and end-users."
+ />
</head>
<body>
- <noscript>You need to enable JavaScript to run this app.</noscript>
+ <!-- <noscript>You need to enable JavaScript to run this app.</noscript> -->
<div id="root"></div>
- <!--
- This HTML file is a template.
- If you open it directly in the browser, you will see an empty page.
-
- You can add webfonts, meta tags, or analytics to this file.
- The build step will place the bundled scripts into the <body> tag.
-
- To begin the development, run `npm start` or `yarn start`.
- To create a production bundle, use `npm run build` or `yarn build`.
- -->
</body>
</html>
diff --git a/public/manifest.json b/public/manifest.json
index 080d6c77ac21bb2ef88a6992b2b73ad93daaca92..9acee82a5e663eb3500f7f68c32c3ec929421ebb 100644
--- a/public/manifest.json
+++ b/public/manifest.json
@@ -2,6 +2,11 @@
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
+ {
+ "src": "files-ui-ico-nb.ico",
+ "sizes": "256x256",
+ "type": "image/x-icon"
+ },
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
diff --git a/ref mt.png b/ref mt.png
new file mode 100644
index 0000000000000000000000000000000000000000..c53a224d58aec2f7f04299ce110a920d48564f02
Binary files /dev/null and b/ref mt.png differ
diff --git a/src/App.js b/src/App.js
index 37845757234ccb68531c10cf7a2ffc589c47e342..12d1db6f421356b8c658bfb90437b5c4fb48b139 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,13 +1,22 @@
-import logo from './logo.svg';
+//import logo from './static/files-ui-logo - arrow-samsung-2.png';
import './App.css';
function App() {
return (
<div className="App">
+ <nav className="filesui-nav">
+
+ </nav>
+ <main className="filesui-main">
+
+ </main>
+ <footer className="filesui-footer">
+
+ </footer>
<header className="App-header">
- <img src={logo} className="App-logo" alt="logo" />
- <p>
- Edit <code>src/App.js</code> and save to reload.
+ {/* <img src={logo} className="App-logo" alt="logo" />
+ */} <p>
+ Edit <code className="code">src/App.js</code> and save to reload.
</p>
<a
className="App-link"
diff --git a/src/components/DropzoneDemoBasic.jsx b/src/components/DropzoneDemoBasic.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..d5a7294deebe7319521012dd495e12d48a7a77df
--- /dev/null
+++ b/src/components/DropzoneDemoBasic.jsx
@@ -0,0 +1,10 @@
+import * as React from "react";
+
+const DropzoneDemoBasic = props =>{
+ return(
+ <div>
+ DropzoneDemoBasic
+ </div>
+ )
+}
+export default DropzoneDemoBasic;
\ No newline at end of file
diff --git a/src/components/DropzoneDemoRiple.jsx b/src/components/DropzoneDemoRiple.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..4120250279351665e2cb8c955b2bf480b0290c1e
--- /dev/null
+++ b/src/components/DropzoneDemoRiple.jsx
@@ -0,0 +1,10 @@
+import * as React from "react";
+
+const DropzoneDemoRiple = props =>{
+ return(
+ <div>
+
+ </div>
+ )
+}
+export default DropzoneDemoRiple;
\ No newline at end of file
diff --git a/src/components/DropzoneMainPage.jsx b/src/components/DropzoneMainPage.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..575b3c1d2b2f32211a0beac0a9d6fecede1b5310
--- /dev/null
+++ b/src/components/DropzoneMainPage.jsx
@@ -0,0 +1,73 @@
+import * as React from "react";
+
+import { Dropzone } from "../files-ui/components";
+import { FileMosaic } from "../files-ui/components/file-mosaic";
+import DescParagraph from "./demo-components/desc-paragraph/DescParagraph";
+import SubTitle from "./demo-components/sub-title/SubTitle";
+
+const reactFile = {
+ id: "acsacasf",
+ name: "A very very long title for files-ui.jsx",
+ type: "text/plain",
+ size: 280000,
+};
+
+const baseFiles = [reactFile];
+const DropzoneMainPage = ({ darkMode = false }) => {
+ const [files, setFiles] = React.useState(baseFiles);
+ const updateFiles = (incommingFiles) => {
+ //do something with the files
+ console.log("MainPage incommingFiles",incommingFiles);
+
+ setFiles(incommingFiles);
+ //even your own upload implementation
+ };
+ const removeFile = (id) => {
+ setFiles(files.filter((x) => x.id !== id));
+ };
+ const handleSee = (imageSource) => {
+ console.log("handleSee-imageSource");
+ };
+
+ return (
+ <React.Fragment>
+ <SubTitle content={"Try this out!"} darkMode={darkMode} />
+ <DescParagraph darkMode={darkMode}>
+ Have fun with files-ui. Just drag'n drop some files and see the magic
+ happens
+ </DescParagraph>
+ <Dropzone
+ style={{ borderRadius: "16px" }}
+ // minHeight="400px"
+ onChange={updateFiles}
+ value={files}
+ maxFileSize={28*1024}
+ maxFiles={4}
+ accept=".jpg, .png, application/json, video/*"
+ fakeUpload
+ behaviour="add"
+ //uploadConfig={{ autoUpload: true, url:"fdbd" }}
+ >
+ {files.length > 0 &&
+ files.map((file) => (
+ <FileMosaic
+ darkMode={darkMode}
+ {...file}
+ preview
+ onDelete={removeFile}
+ key={file.id}
+ info
+ alwaysActive
+ hd
+ onSee={handleSee}
+ />
+ ))}
+ </Dropzone>
+
+ <DescParagraph margin="10px 0" darkMode={darkMode}>
+ <b>Note: </b> Files are not actually uploaded, this is just a demo :D
+ </DescParagraph>
+ </React.Fragment>
+ );
+};
+export default DropzoneMainPage;
diff --git a/src/components/MainMenu/MainMenuSideBar.tsx b/src/components/MainMenu/MainMenuSideBar.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..2bedf2fe267c2ab390fc8c71a0220f3a9ff88179
--- /dev/null
+++ b/src/components/MainMenu/MainMenuSideBar.tsx
@@ -0,0 +1,262 @@
+import * as React from "react";
+import ListSubheader from "@mui/material/ListSubheader";
+import List from "@mui/material/List";
+import ListItemButton from "@mui/material/ListItemButton";
+import ListItemIcon from "@mui/material/ListItemIcon";
+import ListItemText from "@mui/material/ListItemText";
+import Collapse from "@mui/material/Collapse";
+
+import { MainMenuSideBarItems, MainMenuSideBarProps } from "./MenuSideBarProps";
+import { useNavigate } from "react-router";
+
+export default function MainMenuSideBar(props: MainMenuSideBarProps) {
+ const { /* items, */ selectedIndex, setSelectedIndex } = props;
+ const navigate = useNavigate();
+ const quickStartItems: MainMenuSideBarItems[] = [
+ {
+ label: "Getting started",
+ index: 0,
+ onClick: () => navigate("/getting-started"),
+ },
+ {
+ label: "Usage - Basic & Advanced example",
+ index: 1,
+ onClick: () => navigate("/usage"),
+ },
+ ];
+ const Regularitems: MainMenuSideBarItems[] = [
+ {
+ //Icon: <FileOpenIcon />,
+ label: "Components",
+ index: 2,
+ subMenu: [
+ {
+ label: "Dropzone",
+ index: 3,
+ onClick: () => navigate("/components/dropzone"),
+ },
+ {
+ label: "FileMosaic",
+ index: 4,
+ onClick: () => navigate("/components/filemosaic"),
+ },
+ {
+ label: "FileCard",
+ index: 5,
+ onClick: () => navigate("/components/file-card"),
+ },
+ ],
+ },
+ {
+ // Icon: <DocumentScannerIcon />,
+ label: "API documentation",
+ index: 6,
+ subMenu: [
+ {
+ label: "Dropzone",
+ index: 5,
+ onClick: () => navigate("/api/dropzone"),
+ },
+ {
+ label: "FileMosaic",
+ index: 6,
+ onClick: () => navigate("/api/filemosaic"),
+ },
+ {
+ label: "FileCard",
+ index: 7,
+ onClick: () => navigate("/api/file-card"),
+ },
+ ],
+ },
+ {
+ label: "Server side",
+ index: 7,
+ onClick: () => navigate("/server-side"),
+ },
+ {
+ label: "Code Generator",
+ index: 8,
+ onClick: () => navigate("/code-generator"),
+ },
+ { label: "Types", index: 9, onClick: () => navigate("/types") },
+
+ {
+ label: "Utilities Methods",
+ index: 10,
+ onClick: () => navigate("/utilities-methods"),
+ },
+ ];
+
+ const [open, setOpen] = React.useState(true);
+
+ const handleClick = () => {
+ setOpen(!open);
+ };
+
+ const handleCLickItem = (
+ e: React.MouseEvent<HTMLDivElement, MouseEvent>,
+ onClick: Function | undefined
+ ): void => {
+ onClick?.();
+ };
+
+ //const [selectedIndex, setSelectedIndex] = React.useState(1);
+
+ const handleListItemClick = (
+ event: React.MouseEvent<HTMLDivElement, MouseEvent>,
+ index: number,
+ onClick: Function | undefined,
+ withSubMenu?: boolean
+ ) => {
+ setSelectedIndex(index);
+ if (!withSubMenu) {
+ onClick?.();
+ }
+ };
+
+ return (
+ <React.Fragment>
+ <List
+ sx={{ width: "100%", maxWidth: 400, bgcolor: "background.paper" }}
+ component="nav"
+ aria-labelledby="nested-list-subheader"
+ subheader={
+ <ListSubheader component="div" id="nested-list-subheader">
+ Quick Start
+ </ListSubheader>
+ }
+ >
+ {quickStartItems &&
+ quickStartItems.map(
+ ({ Icon, label, onClick, index, subMenu }, indexBase) => (
+ <React.Fragment key={indexBase}>
+ <ListItemButton
+ style={{ padding: "2px 20px" }}
+ key={indexBase}
+ selected={subMenu === undefined && selectedIndex === index}
+ onClick={(event) =>
+ handleListItemClick(
+ event,
+ index,
+ onClick,
+ subMenu !== undefined
+ )
+ }
+ >
+ {Icon && (
+ <ListItemIcon
+ style={{ minWidth: "30px", marginLeft: "5px" }}
+ >
+ {Icon}
+ </ListItemIcon>
+ )}
+ <ListItemText
+ primary={label || ""}
+ primaryTypographyProps={{ fontWeight: "600" }}
+ />
+ </ListItemButton>
+
+ {subMenu && (
+ <Collapse
+ in={open}
+ timeout="auto"
+ unmountOnExit
+ key={"collapse-submenu" + indexBase}
+ >
+ <List component="div" disablePadding>
+ {subMenu.map(
+ ({ Icon, label, onClick, index }, index2) => (
+ <ListItemButton
+ sx={{ pl: 4 }}
+ selected={selectedIndex === index}
+ key={index2 + indexBase}
+ onClick={(event) =>
+ handleListItemClick(event, index, onClick)
+ }
+ >
+ {Icon && <ListItemIcon>{Icon}</ListItemIcon>}
+ <ListItemText primary={label || ""} />
+ </ListItemButton>
+ )
+ )}
+ </List>
+ </Collapse>
+ )}
+ </React.Fragment>
+ )
+ )}
+ </List>
+ <List
+ sx={{ width: "100%", maxWidth: 400, bgcolor: "background.paper" }}
+ component="nav"
+ aria-labelledby="nested-list-subheader"
+ subheader={
+ <ListSubheader component="div" id="nested-list-subheader">
+ Full documentation
+ </ListSubheader>
+ }
+ >
+ {Regularitems &&
+ Regularitems.map(
+ ({ Icon, label, onClick, index, subMenu }, indexBase) => (
+ <React.Fragment key={indexBase}>
+ <ListItemButton
+ style={{ padding: "2px 20px" }}
+ key={indexBase}
+ selected={subMenu === undefined && selectedIndex === index}
+ onClick={(event) =>
+ handleListItemClick(
+ event,
+ index,
+ onClick,
+ subMenu !== undefined
+ )
+ }
+ >
+ {Icon && (
+ <ListItemIcon
+ style={{ minWidth: "30px", marginLeft: "5px" }}
+ >
+ {Icon}
+ </ListItemIcon>
+ )}
+ <ListItemText
+ primary={label || ""}
+ primaryTypographyProps={{ fontWeight: "600" }}
+ />
+ </ListItemButton>
+
+ {subMenu && (
+ <Collapse
+ in={open}
+ timeout="auto"
+ unmountOnExit
+ key={"collapse-submenu" + indexBase}
+ >
+ <List component="div" disablePadding>
+ {subMenu.map(
+ ({ Icon, label, onClick, index }, index2) => (
+ <ListItemButton
+ sx={{ pl: 4 }}
+ selected={selectedIndex === index}
+ key={index2 + indexBase}
+ onClick={(event) =>
+ handleListItemClick(event, index, onClick)
+ }
+ >
+ {Icon && <ListItemIcon>{Icon}</ListItemIcon>}
+ <ListItemText primary={label || ""} />
+ </ListItemButton>
+ )
+ )}
+ </List>
+ </Collapse>
+ )}
+ </React.Fragment>
+ )
+ )}
+ </List>
+ </React.Fragment>
+ );
+}
diff --git a/src/components/MainMenu/MenuSideBarProps.ts b/src/components/MainMenu/MenuSideBarProps.ts
new file mode 100644
index 0000000000000000000000000000000000000000..765fa2527ea321d21065931eb85c07c181e3bd6e
--- /dev/null
+++ b/src/components/MainMenu/MenuSideBarProps.ts
@@ -0,0 +1,20 @@
+export interface MainMenuSideBarPropsIndividual {
+ label?: string,
+ Icon?: any,
+ onClick?: Function,
+ index: number
+}
+
+export type MainMenuSideBarItems = {
+ label?: string,
+ Icon?: any,
+ onClick?: Function,
+ index: number,
+ subMenu?: Array<MainMenuSideBarPropsIndividual>
+}
+
+export type MainMenuSideBarProps = {
+ items: MainMenuSideBarItems[],
+ selectedIndex:number,
+ setSelectedIndex:Function,
+}
\ No newline at end of file
diff --git a/src/components/MainPage/Badges.jsx b/src/components/MainPage/Badges.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..b0ccdf1f5f072dfed8e55e4cb3765ed923dc5950
--- /dev/null
+++ b/src/components/MainPage/Badges.jsx
@@ -0,0 +1,96 @@
+import React from "react";
+const styles = {
+ badge: { padding: "0 4px", margin:0 },
+};
+const Badges = (props) => {
+ return (
+ <div
+ style={{
+ display: "flex",
+ flexDirection: "row",
+ flexWrap: "wrap",
+ alignItems: "center",
+ justifyContent: "center",
+ margin:"10px 0"
+ }}
+ >
+ <a
+ style={styles.badge}
+ href="https://www.npmjs.com/package/@dropzone-ui/react"
+ >
+ <img
+ src="https://img.shields.io/npm/v/@dropzone-ui/react.svg?logo=npm&logoColor=fff&label=NPM+package&color=limegreen"
+ alt="npm latest package"
+ />
+ </a>
+
+ <a
+ style={styles.badge}
+ href="https://openbase.com/js/@dropzone-ui/react?utm_source=embedded&utm_medium=badge&utm_campaign=rate-badge"
+ >
+ <img
+ src="https://badges.openbase.com/js/rating/@dropzone-ui/react.svg"
+ alt="Rate on Openbase"
+ />
+ </a>
+
+ <a
+ style={styles.badge}
+ href="https://github.com/dropzone-ui/react-dropzone"
+ >
+ <img
+ src="https://github.com/dropzone-ui/react-dropzone/actions/workflows/node.js.yml/badge.svg"
+ alt="Build Status"
+ />
+ </a>
+
+ <a
+ style={styles.badge}
+ href="https://lgtm.com/projects/g/dropzone-ui/dropzone-ui/context:javascript"
+ >
+ <img
+ src="https://img.shields.io/lgtm/grade/javascript/g/dropzone-ui/dropzone-ui.svg?logo=lgtm&logoWidth=18"
+ alt="Language grade: JavaScript"
+ />
+ </a>
+
+ {/* <a
+ style={styles.badge}
+ href="https://snyk.io/test/github/dropzone-ui/react"
+ >
+ <img
+ src="https://snyk.io/test/github/dropzone-ui/react/badge.svg"
+ alt="Known Vulnerabilities"
+ />
+ </a> */}
+
+ {/* <a
+ style={styles.badge}
+ href="https://packagequality.com/#?package=dropzone-ui"
+ >
+ <img
+ src="https://packagequality.com/shield/dropzone-ui.svg"
+ alt="Package Quality"
+ />
+ </a> */}
+
+ {/* <a
+ style={styles.badge}
+ href="https://packagephobia.com/result?p=@dropzone-ui/react"
+ >
+ <img
+ src="https://packagephobia.com/badge?p=@dropzone-ui/react"
+ alt="install size"
+ />
+ </a> */}
+
+ {/* <a style={styles.badge} href="http://makeapullrequest.com">
+ <img
+ src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square"
+ alt="PRs Welcome"
+ />
+ </a> */}
+ </div>
+ );
+};
+export default Badges;
diff --git a/src/components/MainPage/DarkModeLightModeButton.jsx b/src/components/MainPage/DarkModeLightModeButton.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..9de2811ccb58257f1e892917633ab0d949e01bb3
--- /dev/null
+++ b/src/components/MainPage/DarkModeLightModeButton.jsx
@@ -0,0 +1,45 @@
+import * as React from "react";
+import DarkModeIcon from "@mui/icons-material/DarkMode";
+import LightModeIcon from "@mui/icons-material/LightMode";
+import { IconButton, Tooltip } from "@mui/material";
+
+const DarkModeLightModeButton = ({ darkModeOn, onChangeDarkMode }) => {
+ //const [darkModeOn, setDarkModeOn] = React.useState(false);
+ const handleDarkMode = () => {
+ //setDarkModeOn((darkModeOn) => {
+ onChangeDarkMode?.();
+ // return !darkModeOn;
+ //});
+ };
+ if (darkModeOn)
+ return (
+ <Tooltip title="Turn on the light">
+ <IconButton
+ style={{ borderRadius: "8px", border: "0.5px solid #eaeef3" }}
+ onClick={handleDarkMode}
+ color="secondary"
+ aria-label="upload picture"
+ component="label"
+ >
+ <DarkModeIcon /* htmlColor="white" */ />
+ </IconButton>
+ </Tooltip>
+ );
+ else {
+ return (
+ <Tooltip title="Turn off the light">
+ <IconButton
+ style={{ borderRadius: "8px", border: "0.5px solid #eaeef3" }}
+
+ onClick={handleDarkMode}
+ color="secondary"
+ aria-label="upload picture"
+ component="label"
+ >
+ <LightModeIcon />
+ </IconButton>
+ </Tooltip>
+ );
+ }
+};
+export default DarkModeLightModeButton;
diff --git a/src/components/MainPage/GettingStarted.jsx b/src/components/MainPage/GettingStarted.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..7acc55b43655d86c06b948afb590a6205ea48281
--- /dev/null
+++ b/src/components/MainPage/GettingStarted.jsx
@@ -0,0 +1,114 @@
+import * as React from "react";
+import { Button, styled } from "@mui/material";
+import ContentCopyIcon from "@mui/icons-material/ContentCopy";
+import CheckIcon from "@mui/icons-material/Check";
+import "../../styles/GettingStarted.scss";
+import ArrowForwardIosIcon from "@mui/icons-material/ArrowForwardIos";
+import { useNavigate } from "react-router";
+const CodeButton = styled(Button)({
+ display: "flex",
+ justifyContent: "space-between",
+ textTransform: "lowercase",
+ padding: "10px 20px",
+ borderRadius: "16px",
+ fontSize: "1rem",
+ //fontWeight: "700",
+ // fontFamily: '"Poppins", sans-serif',
+});
+
+const GettingStarted = ({ darkModeOn }) => {
+ const navigator = useNavigate();
+
+ const [copiedNpm, setCopiedNpm] = React.useState(false);
+ const [copiedYarn, setCopiedYarn] = React.useState(false);
+
+ const handleCopyInstallationNPM = () => {
+ setCopiedNpm(true);
+
+ setTimeout(() => {
+ setCopiedNpm(false);
+ }, 2000);
+ };
+ const handleCopyInstallationYarn = () => {
+ setCopiedYarn(true);
+
+ setTimeout(() => {
+ setCopiedYarn(false);
+ }, 2000);
+ };
+
+ const goToGettingStarted = () => {
+ navigator("/getting-started");
+ };
+ return (
+ <div className="getting-started-container">
+ {/* <h2>Getting started:</h2>
+ <p>
+ Install Files-ui using{" "}
+ <a href="https://www.npmjs.com/package/@files-ui/react" target="_blank">
+ npm{" "}
+ </a>
+ or either using{" "}
+ <a href="https://yarnpkg.com/package/@files-ui/react" target="_blank">
+ yarn
+ </a>
+ :
+ </p> */}
+ <div className="button-container">
+ <Button
+ onClick={goToGettingStarted}
+ style={{
+ padding: "10px 20px",
+ //fontFamily: '"Poppins", sans-serif',
+ flexGrow: 1,
+ //fontWeight: "700",
+ textTransform: "capitalize",
+ fontSize:"16px"
+ }}
+ variant="contained"
+ color={darkModeOn ? "secondary" : "primary"}
+ //fullWidth
+ endIcon={
+ <ArrowForwardIosIcon
+ style={{ fontSize: "0.9rem", fontWeight: "800" }}
+ />
+ }
+ >
+ {"Get Started"}
+ </Button>
+
+ <div className="code-button-flex">
+ <CodeButton
+ disableRipple
+ variant="outlined"
+ endIcon={
+ !copiedNpm ? <ContentCopyIcon /> : <CheckIcon color="success" />
+ }
+ //style={buttonCodeStyle}
+ fullWidth
+ onClick={handleCopyInstallationNPM}
+ color={copiedNpm ? "success" : darkModeOn ? "secondary" : "primary"}
+ >
+ {"npm install @files-ui/react"}
+ </CodeButton>
+ <CodeButton
+ disableRipple
+ variant="outlined"
+ endIcon={
+ !copiedYarn ? <ContentCopyIcon /> : <CheckIcon color="success" />
+ }
+ //style={buttonCodeStyle}
+ fullWidth
+ onClick={handleCopyInstallationYarn}
+ color={
+ copiedYarn ? "success" : darkModeOn ? "secondary" : "primary"
+ }
+ >
+ {"yarn add @files-ui/react"}
+ </CodeButton>
+ </div>
+ </div>
+ </div>
+ );
+};
+export default GettingStarted;
diff --git a/src/components/MainPage/MainFooter.jsx b/src/components/MainPage/MainFooter.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..173ab59b0423dee0cc2a041a44e383833b0fc42e
--- /dev/null
+++ b/src/components/MainPage/MainFooter.jsx
@@ -0,0 +1,16 @@
+import * as React from "react";
+import logo_blue from "../../static/files-ui-logo-white.png";
+const MainFooter = (props) => {
+ return (
+ <footer className="filesui-footer">
+ <div
+ className={"filesui-main-logo-container darkmode"}
+ style={{ height: "50px", width: "50px" }}
+ >
+ <img className="fui-logo-img" src={logo_blue} width="100%" />
+ </div>
+ <p>Copyright © 2023 FILES UI</p>
+ </footer>
+ );
+};
+export default MainFooter;
diff --git a/src/components/MainPage/MainNavBar.jsx b/src/components/MainPage/MainNavBar.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..7b7f65729dd105673a406ddd322e53cc552edd05
--- /dev/null
+++ b/src/components/MainPage/MainNavBar.jsx
@@ -0,0 +1,60 @@
+import * as React from "react";
+import DarkModeLightModeButton from "./DarkModeLightModeButton";
+import GitHubIcon from "@mui/icons-material/GitHub";
+import { IconButton, Tooltip, Typography } from "@mui/material";
+//import { useNavigate } from "react-router";
+
+const MainNavBar = ({ darkModeOn, logo_blue, logoLight, handleDarkMode }) => {
+ const handleGoGitRepo = () => {
+ window.open("https://github.com/files-ui", "_blank");
+ };
+
+ return (
+ <nav className="filesui-nav">
+ <div className="filesui-nav-container">
+ <div className="left-part">
+ <div
+ className={
+ darkModeOn
+ ? "filesui-nav-logo-container darkmode"
+ : "filesui-nav-logo-container"
+ }
+ >
+ <img
+ className={"filesui-nav-logo"}
+ // src={!darkModeOn ? logo_blue : logoLight}
+ src={logo_blue}
+ alt="files-ui-main-logo"
+ />
+ </div>
+
+ {/* <Typography variant="h5" noWrap component="div" color="primary">
+ Files ui
+ </Typography> */}
+ <p className="filesui-nav-text-logo">
+ <span className="gradient-span">Files UI</span>
+ </p>
+ </div>
+
+ <div className="right-part">
+ <Tooltip title="Go to Files-ui GitHub repo">
+ <IconButton
+ style={{ borderRadius: "8px", border: "0.5px solid #eaeef3" }}
+ onClick={handleGoGitRepo}
+ color="secondary"
+ aria-label="upload picture"
+ component="label"
+ >
+ <GitHubIcon /* htmlColor="white" */ />
+ </IconButton>
+ </Tooltip>
+ <DarkModeLightModeButton
+ darkModeOn={darkModeOn}
+ onChangeDarkMode={handleDarkMode}
+ />
+ </div>
+ </div>
+ </nav>
+ );
+};
+export default MainNavBar;
diff --git a/src/components/MainPage/MainRight/FileMosaicImageVideoPreviews.tsx b/src/components/MainPage/MainRight/FileMosaicImageVideoPreviews.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..8e880eadab2ebebb03d27ffcd284c63f6dae1d42
--- /dev/null
+++ b/src/components/MainPage/MainRight/FileMosaicImageVideoPreviews.tsx
@@ -0,0 +1,129 @@
+import * as React from "react";
+import SubTitle from "../../demo-components/sub-title/SubTitle";
+import MainParagraph from "../../paragraph-main/MainParagraph";
+import { Stack, Paper } from "@mui/material";
+import { FileMosaic } from "../../../files-ui/components/file-mosaic";
+import { ExtFile } from "../../../files-ui/core";
+import DescParagraph from "../../demo-components/desc-paragraph/DescParagraph";
+import { FullScreen, ImagePreview, VideoPreview } from "../../../files-ui";
+
+interface FileMosaicImageVideoPreviewsProps {
+ darkMode?: boolean;
+}
+const FileMosaicImageVideoPreviews: React.FC<
+ FileMosaicImageVideoPreviewsProps
+> = (props: FileMosaicImageVideoPreviewsProps) => {
+ const { darkMode } = props;
+ const [imageSrc, setImageSrc] = React.useState<string | undefined>(undefined);
+ const [videoSrc, setVideoSrc] = React.useState<File | string | undefined>(
+ undefined
+ );
+
+ const handleSee = (imageSource: string | undefined) => {
+ console.log("handleSee-imageSource", imageSource);
+ setImageSrc(imageSource);
+ };
+
+ const handleWatch = (videoSource: File | string | undefined) => {
+ console.log(
+ "handleWatch videoSource",
+ "https://www.w3schools.com/tags/movie.mp4"
+ );
+ //setVideoSrc(videoSource);
+ setVideoSrc("https://www.w3schools.com/tags/movie.mp4");
+ };
+
+ return (
+ <div style={{ width: "100%" }}>
+ <h3>Or check the previews!</h3>
+ <DescParagraph darkMode={darkMode}>
+ Add more interacion in your webpage with a full screen preview of images
+ or videos
+ </DescParagraph>
+ <Paper
+ variant="outlined"
+ sx={{
+ padding: "20px 0",
+ boxSizing: "border-box",
+ backgroundColor: darkMode ? "#121212" : "rgba(0, 0, 0, 0.06)",
+ }}
+ >
+ <Stack
+ direction={"row"}
+ spacing={2}
+ alignItems="center"
+ justifyContent={"space-evenly"}
+ sx={{
+ flexWrap: "wrap",
+ }}
+ >
+ {files.map((f: ExtFile, index: number) => (
+ <FileMosaic
+ key={index}
+ darkMode={darkMode}
+ {...f}
+ onSee={handleSee}
+ onWatch={handleWatch}
+ {...f.extraData}
+ alwaysActive
+ />
+ ))}
+ <FullScreen
+ open={imageSrc !== undefined}
+ onClose={() => setImageSrc(undefined)}
+ >
+ <ImagePreview src={imageSrc} />
+ </FullScreen>
+ <FullScreen
+ open={videoSrc !== undefined}
+ onClose={() => setVideoSrc(undefined)}
+ >
+ <VideoPreview videoSrc={videoSrc} autoPlay controls />
+ </FullScreen>
+ </Stack>
+ </Paper>
+ </div>
+ );
+};
+export default FileMosaicImageVideoPreviews;
+
+const files: ExtFile[] = [
+ {
+ id: 0,
+ name: "image-preview.png",
+ type: "image/png",
+ size: 282000,
+ imageUrl: "https://i.ytimg.com/vi/98FO19TuI9A/maxresdefault.jpg",
+ },
+
+ {
+ id: 2,
+ name: "video-preview.mp4",
+ type: "video/mp4",
+ size: 282000,
+
+ downloadUrl: "https://www.w3schools.com/tags/movie.mp4",
+ },
+ {
+ id: 3,
+ name: "downloadable-file.png",
+ type: "image/png",
+ size: 282000,
+ imageUrl: "/static/media/files-ui-logo-blue.e28c57506796630aebb5.png",
+ downloadUrl: "/static/media/files-ui-logo-blue.e28c57506796630aebb5.png",
+ extraData: {
+ backgroundBlurImage: false,
+ },
+ },
+ {
+ id: 1,
+ name: "image-preview.png",
+ type: "image/png",
+ size: 282000,
+ downloadUrl:
+ "https://i.pinimg.com/236x/3e/e9/46/3ee946b27fd1cc5eb0b485e4a0669534.jpg",
+
+ imageUrl:
+ "https://i.pinimg.com/236x/3e/e9/46/3ee946b27fd1cc5eb0b485e4a0669534.jpg",
+ },
+];
diff --git a/src/components/RightMenu/RightMenu.scss b/src/components/RightMenu/RightMenu.scss
new file mode 100644
index 0000000000000000000000000000000000000000..47293a472260913ead6b954f8fc60e335519d785
--- /dev/null
+++ b/src/components/RightMenu/RightMenu.scss
@@ -0,0 +1,11 @@
+.right-menu-anchor-item {
+ box-sizing: border-box;
+ text-decoration: none;
+ padding-left: 5px;
+ width: 100%;
+ &.selected,
+ &:hover {
+ border-left: 2px #b2bac2 solid;
+ color: #6f7e8c;
+ }
+}
diff --git a/src/components/RightMenu/RightMenu.tsx b/src/components/RightMenu/RightMenu.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..25381152070016ddf13ea9bf0a51f3e0fe150e5b
--- /dev/null
+++ b/src/components/RightMenu/RightMenu.tsx
@@ -0,0 +1,54 @@
+import List from "@mui/material/List/List";
+import ListSubheader from "@mui/material/ListSubheader/ListSubheader";
+import * as React from "react";
+import { RightMenuProps } from "./RightMenuProps";
+import "./RightMenu.scss";
+const RightMenu: React.FC<RightMenuProps> = (props: RightMenuProps) => {
+ const { items, width, baseUrl } = props;
+ const [selectedItem, setSelectedItem] = React.useState<number>(0);
+ const handleChangeSelectedItem = (newIndex: number) =>
+ setSelectedItem(newIndex);
+ const handleClickAnchor = (
+ e: React.MouseEvent<HTMLAnchorElement, MouseEvent>,
+ onClick: Function | undefined,
+ id: number
+ ) => {
+ onClick?.();
+ handleChangeSelectedItem(id);
+ };
+ return (
+ <List
+ sx={{ width: "100%", maxWidth: width, bgcolor: "background.paper" }}
+ component="nav"
+ aria-labelledby="nested-list-subheader"
+ subheader={
+ <ListSubheader component="div" id="nested-list-subheader">
+ Content
+ </ListSubheader>
+ }
+ >
+ <ul style={{ listStyle: "none", margin: 0 }}>
+ {items &&
+ items.map(({ isSelected, label, onClick, referTo, id }, index) => {
+ const classNameForAnchor: string =
+ selectedItem === id
+ ? "right-menu-anchor-item selected"
+ : "right-menu-anchor-item";
+ return (
+ <li key={index} style={{ listStyle: "none", margin: 0 }}>
+ <a
+ className={classNameForAnchor}
+ //href={`${baseUrl}/#${referTo}`}
+ href={`${referTo}`}
+ onClick={(e) => handleClickAnchor(e, onClick, id)}
+ >
+ {label}
+ </a>
+ </li>
+ );
+ })}
+ </ul>
+ </List>
+ );
+};
+export default RightMenu;
diff --git a/src/components/RightMenu/RightMenuProps.ts b/src/components/RightMenu/RightMenuProps.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d34faed790657f5c0c06d4e61f9f61e5e4349f91
--- /dev/null
+++ b/src/components/RightMenu/RightMenuProps.ts
@@ -0,0 +1,13 @@
+export interface RightMenuItem {
+ label?: string;
+ onClick?: Function;
+ isSelected?: boolean;
+ referTo?: string;
+ id: number;
+}
+
+export interface RightMenuProps {
+ items: RightMenuItem[];
+ width: string;
+ baseUrl: string;
+}
\ No newline at end of file
diff --git a/src/components/code-generator/InteractiveCode.jsx b/src/components/code-generator/InteractiveCode.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..b143996a652f6f2e9318c2b8787a5380cf783c44
--- /dev/null
+++ b/src/components/code-generator/InteractiveCode.jsx
@@ -0,0 +1,771 @@
+import {
+ FormControl,
+ FormControlLabel,
+ FormLabel,
+ Grid,
+ Paper,
+ Radio,
+ RadioGroup,
+ Switch,
+} from "@mui/material";
+import React, { Fragment, useEffect, useState } from "react";
+import Autocomplete from "@mui/material/Autocomplete";
+import TextField from "@mui/material/TextField";
+ import {
+ Dropzone,
+ FileItem,
+ FullScreenPreview,
+ VideoPreview,
+} from "@dropzone-ui/react";
+//import { Dropzone, FileItem, FullScreenPreview, VideoPreview,} from "../../dropzone-ui";
+import "./InteractiveCode.scss";
+import InteractiveGeneratedCode from "./InteractiveGeneratedCode";
+import ElevationSlider from "../../Pages/Components/FileItemProps/ElevationSlider";
+import FileSizeSlider from "../../Pages/Components/DropzoneProps/FileSizeSlider";
+import FileLimitSlider from "../../Pages/Components/DropzoneProps/FileLimitSlider";
+import ElevateAppBar from "../../Templates/ElevateAppBar";
+//import FakeFileItem from "../../Components/FakeFileItem/FakeFileItem";
+
+const InteractiveCode = (props) => {
+ //////////////////// DROPZONE PROPS ////////////////
+ //color
+ const [useColor, setUseColor] = useState(undefined);
+ const [color, setColor] = useState("#071e25");
+ useEffect(() => {
+ if (!useColor) {
+ setColor(undefined);
+ } else {
+ //if (!color) {
+ setColor(color);
+ //}
+ }
+ }, [useColor, color]);
+
+ const handleChangeColor = (e) => {
+ setColor(e.target.value);
+ };
+ //maxFileSise
+ const [maxFileSize, setmaxFileSize] = useState(29300000);
+ const handleChangeMaxFileSize = (v) => {
+ setmaxFileSize(v);
+ // setmaxSize(e.target.value);
+ };
+ //maxFiles
+ const [maxFiles, setMaxFiles] = useState(29300000);
+ const handleChangeMaxFiles = (v) => {
+ setMaxFiles(v);
+ // setmaxSize(e.target.value);
+ };
+ //label
+ const [label, setLabel] = useState("Drop Files here or click to browse");
+ const handleChangeLabel = (e) => {
+ if (e.target.value.lenght === 0) {
+ setLabel(undefined);
+ } else setLabel(e.target.value);
+ };
+ //display
+ const [files, setFiles] = useState([]);
+ const [imageSrc, setImageSrc] = useState(undefined);
+ const [videoSrc, setVideoSrc] = useState(undefined);
+ const [controls, setControls] = useState(true);
+ const [autoplay, setAutoPlay] = useState(true);
+ const updateFiles = (incommingFiles) => {
+ setFiles(incommingFiles);
+ };
+ const handleDelete = (id) => {
+ setFiles(files.filter((x) => x.id !== id));
+ };
+ const handleSee = (imageSource) => {
+ setImageSrc(imageSource);
+ };
+ //VIDEOOO PREVIEW
+ const handleWatch = (vidSrc) => {
+ console.log("handleWatch", vidSrc);
+ setVideoSrc(vidSrc);
+ };
+ //localization
+ const [localization, setLocalization] = useState(undefined);
+ const hadleSelect = (e, value) => {
+ //console.log(value);
+ setLocalization(value?.value);
+ };
+ //accept
+ const [accept, setAccept] = useState("image/jpeg,.ts, video/*");
+ const handleChangeAccept = (e) => {
+ if (e.target.value.lenght === 0) {
+ setAccept(undefined);
+ } else setAccept(e.target.value);
+ };
+ //minHeight
+ const [minHeight, setMinHeight] = useState("195px");
+ const handleMinHeight = (e) => {
+ if (e.target.value.lenght === 0) {
+ setMinHeight(undefined);
+ } else setMinHeight(e.target.value);
+ };
+ //maxHeight
+ const [maxHeight, setMaxHeight] = useState("500px");
+ const handleMaxHeight = (e) => {
+ if (e.target.value.lenght === 0) {
+ setMaxHeight(undefined);
+ } else setMaxHeight(e.target.value);
+ };
+ //view
+ const [viewValue, setViewValue] = React.useState("unset");
+ const handleCheckView = (e, val) => {
+ setViewValue(val);
+ };
+ const [footerDis, setFooterDis] = React.useState(false);
+ const [headerDis, setHeaderDis] = React.useState(false);
+ const [clickableDis, setClickableDis] = React.useState(false);
+ const [onClean, setOnClean] = React.useState(true);
+ const [uploadOnDrop, setUploadOnDrop] = React.useState(false);
+ //inner Upload
+
+ //const [innerUpload, setInnerUpload] = useState(false);
+ const [url, setUrl] = React.useState(undefined);
+ const handleUrl = (e) => {
+ if (e.target.value.lenght === 0) {
+ setUrl(undefined);
+ } else {
+ setUrl(e.target.value);
+ }
+ };
+ //method
+ const [method, setMethod] = React.useState(undefined);
+ const hadleSelectMethod = (e, value) => {
+ //console.log("method", value);
+ setMethod(value?.method);
+ };
+ const [fakeupload, setFakeUpload] = React.useState(undefined);
+ //const [headerDis, setHeaderDis] = React.useState(false);
+ const [behaviour, setBehaviour] = React.useState("unset");
+ const handleCheckBehaviour = (e, val) => {
+ setBehaviour(val);
+ };
+ //config
+ const defaultHeader = {
+ headers: {
+ "content-type": "multipart/form-data;",
+ },
+ };
+ const [config, setConfig] = useState(undefined);
+ const [useConfig, setUseConfig] = useState(false);
+ const handleUseConfig = (v) => {
+ if (v) {
+ setUseConfig(true);
+ setConfig(
+ `{\n\t headers: {\n\t "Authorization": "Bearer YOUR_BEARER_TOKEN_GOES_HERE",\n\t "content-type": "multipart/form-data",\n\t },\n\t}`
+ );
+ } else {
+ setUseConfig(false);
+ setConfig(undefined);
+ }
+ };
+
+ // upload message
+ /* const [uploadingMessage, setUploadingMessage] = useState(
+ "....Uploading Files, please wait..."
+ ); */
+ const [uploadingMessage, setUploadingMessage] = useState(undefined);
+ // eslint-disable-next-line
+ const handleuploadingMessage = (e) => {
+ if (e.target.value.lenght === 0) {
+ setUploadingMessage(undefined);
+ } else setUploadingMessage(e.target.value);
+ };
+ /////// NEW
+ const [disableScroll, setDisableScroll] = useState(true);
+ //// //// //// //// FILE ITEM
+ const [hd, setHd] = React.useState(false);
+ const [info, setInfo] = React.useState(true);
+ const [preview, setPreview] = React.useState(true);
+ const [alwaysActive, setAlwaysActive] = React.useState(true);
+ const [resultOnTooltip, setResultOnTooltip] = React.useState(true);
+ const [onSee, setOnSee] = React.useState(false);
+ const [onDeleteVal, setOnDelete] = React.useState(true);
+ const [elevation, setElevation] = React.useState(0);
+ return (
+ <Fragment>
+ <ElevateAppBar />
+ <div className="dui-demo-container">
+
+ <Dropzone
+ //style={{ fontFamily:`"Roboto","Helvetica","Arial",sans-serif` }}
+ label={label}
+ color={color}
+ minHeight={minHeight}
+ //maxHeight={maxHeight}
+ accept={accept}
+ view={viewValue === "unset" ? undefined : viewValue}
+ behaviour={behaviour === "unset" ? undefined : behaviour}
+ localization={localization}
+ onChange={updateFiles}
+ value={files}
+ footer={footerDis ? false : true}
+ header={headerDis ? false : true}
+ clickable={clickableDis ? false : true}
+ onClean={onClean || undefined}
+ maxFileSize={maxFileSize}
+ maxFiles={maxFiles}
+ //upload
+ uploadOnDrop={uploadOnDrop || undefined}
+ url={url}
+ fakeUploading={fakeupload}
+ config={config ? defaultHeader : undefined}
+ uploadingMessage={uploadingMessage}
+ disableScroll={disableScroll}
+ >
+ {files.length>0 && files.map((file) => (
+ <FileItem
+ {...file}
+ key={file.id}
+ onDelete={onDeleteVal ? handleDelete : undefined}
+ onSee={onSee ? handleSee : undefined}
+ localization={localization}
+ alwaysActive={alwaysActive || undefined}
+ resultOnTooltip={resultOnTooltip || undefined}
+ preview={preview ? preview : undefined}
+ //onlyImage
+ info={info ? info : undefined}
+ hd={hd ? hd : undefined}
+ elevation={elevation}
+ onWatch={handleWatch}
+ />
+ ))}
+ </Dropzone>
+ <FullScreenPreview
+ imgSource={imageSrc}
+ openImage={imageSrc}
+ onClose={(e) => handleSee(undefined)}
+ />
+ <VideoPreview
+ videoSrc={videoSrc}
+ openVideo={videoSrc}
+ onClose={(e) => handleWatch(undefined)}
+ controls={controls}
+ autoplay={autoplay}
+ />
+ {/**
+ * ///////////////////////////// CONTROLS ////////////////////////////////////
+ */}
+ <Grid container style={{ padding: "15px 0" }} spacing={1}>
+ <Grid item md={9} xs={12}>
+ <h3>{"Dropzone props"}</h3>
+ <Paper elevation={3} style={{ padding: "15px" }}>
+ <Grid container spacing={2}>
+ <Grid item md={6} xs={12}>
+ <h4 style={{ margin: "10px 5px 0 0" }}>{"Validation"}</h4>
+ <FormLabel component="legend" style={{ marginTop: "8px" }}>
+ {"Accept"}
+ </FormLabel>
+ <TextField
+ fullWidth
+ id="outlined-basic"
+ size="small"
+ //label="Outlined"
+ variant="outlined"
+ onChange={handleChangeAccept}
+ value={accept}
+ />
+ <FileSizeSlider onChange={handleChangeMaxFileSize} />
+ <FileLimitSlider onChange={handleChangeMaxFiles} />
+
+ <h4 style={{ margin: "10px 5px 0 0" }}>Upload process</h4>
+ <FormLabel component="h2" style={{ marginTop: "8px" }}>
+ {"Start upload on drop"}
+ </FormLabel>
+ <FormControlLabel
+ control={
+ <Switch
+ onChange={(e, ch) => {
+ setUploadOnDrop(ch);
+ }}
+ />
+ }
+ label="uploadOnDrop"
+ />
+ <FormLabel component="legend" style={{ marginTop: "8px" }}>
+ {"Url of server"}
+ </FormLabel>
+ <TextField
+ fullWidth
+ id="outlined-basic"
+ size="small"
+ label="url"
+ variant="outlined"
+ onChange={handleUrl}
+ value={url}
+ />
+ <FormLabel component="legend" style={{ marginTop: "8px" }}>
+ {"Method (POST by default)"}
+ </FormLabel>
+ <Autocomplete
+ //disablePortal
+ autoSelect
+ size="small"
+ //style={{ width: "80%" }}
+ //fullWidth
+ onChange={hadleSelectMethod}
+ id="combo-box-demo"
+ options={[
+ { method: "POST" },
+ { method: "PATCH" },
+ { method: "PUT" },
+ ]}
+ getOptionLabel={(option) => option.method}
+ renderInput={(params) => (
+ <TextField {...params} label="method" />
+ )}
+ />
+ <FormLabel component="legend" style={{ marginTop: "8px" }}>
+ {"Aditional configuration (e.g. headers, bearer token)"}
+ </FormLabel>
+ <FormControlLabel
+ control={
+ <Switch
+ onChange={(e, ch) => {
+ handleUseConfig(ch);
+ }}
+ />
+ }
+ label="Add config"
+ />
+ {useConfig && (
+ <TextField
+ id="outlined-multiline-flexible"
+ label="config"
+ multiline
+ fullWidth
+ minRows={3}
+ value={config}
+ disabled
+ //onChange={handleConfig}
+ />
+ )}
+ {/* <FormLabel component="legend" style={{ marginTop: "8px" }}>
+ {"Uploading Message"}
+ </FormLabel>
+ <TextField
+ fullWidth
+ id="outlined-basic"
+ size="small"
+ label="uploadingMessage"
+ variant="outlined"
+ onChange={handleuploadingMessage}
+ value={uploadingMessage}
+ /> */}
+ <h4 style={{ margin: "10px 5px 0 0" }}>
+ Fake upload (simulate upload process on development)
+ </h4>
+ <FormLabel component="legend" style={{ marginTop: "8px" }}>
+ {
+ "Enable fake uploading. It needs a fake url string prop to show the 'upload button'"
+ }
+ </FormLabel>
+ <FormControlLabel
+ control={
+ <Switch
+ checked={fakeupload}
+ onChange={(e, ch) => {
+ setFakeUpload(ch);
+ }}
+ />
+ }
+ label="enable fakeUpload"
+ />
+ </Grid>
+ <Grid item md={6} xs={12}>
+ <h4 style={{ margin: "10px 5px 0 0" }}>{"Language"}</h4>
+ <FormLabel component="legend" style={{ marginTop: "8px" }}>
+ {"Localization"}
+ </FormLabel>
+ <Autocomplete
+ //disablePortal
+ autoSelect
+ size="small"
+ //style={{ width: "80%" }}
+ //fullWidth
+ onChange={hadleSelect}
+ id="combo-box-demo"
+ options={languages}
+ getOptionLabel={(option) => option.idiom}
+ renderInput={(params) => (
+ <TextField {...params} label="Localization" />
+ )}
+ />
+ <h4 style={{ margin: "10px 5px 0 0" }}>
+ {"Behaviour on drop files"}
+ </h4>
+ <FormControl component="fieldset">
+ <FormLabel component="legend" style={{ marginTop: "8px" }}>
+ {
+ 'Add files or replace the file list ( "add" by default )'
+ }
+ </FormLabel>
+ <RadioGroup
+ row
+ aria-label="view"
+ name="row-radio-buttons-group"
+ onChange={handleCheckBehaviour}
+ value={behaviour}
+ >
+ <FormControlLabel
+ value="add"
+ control={<Radio />}
+ label="add"
+ />
+ <FormControlLabel
+ value="replace"
+ control={<Radio />}
+ label="replace"
+ />
+ <FormControlLabel
+ value={"unset"}
+ control={<Radio />}
+ label="unset"
+ />
+ </RadioGroup>
+ </FormControl>
+ <h4 style={{ margin: "10px 5px 0 0" }}>
+ {"Display settings"}
+ </h4>
+ <FormLabel component="legend" style={{ marginTop: "8px" }}>
+ {"Custom Label"}
+ </FormLabel>
+ <TextField
+ fullWidth
+ id="outlined-basic"
+ size="small"
+ //label="Outlined"
+ variant="outlined"
+ onChange={handleChangeLabel}
+ value={label}
+ />
+ <FormLabel component="legend" style={{ marginTop: "8px" }}>
+ {"minHeight"}
+ </FormLabel>
+ <TextField
+ fullWidth
+ id="outlined-basic"
+ size="small"
+ //label="Outlined"
+ variant="outlined"
+ onChange={handleMinHeight}
+ value={minHeight}
+ />
+ <FormLabel component="legend" style={{ marginTop: "8px" }}>
+ {"maxHeight"}
+ </FormLabel>
+ <TextField
+ fullWidth
+ id="outlined-basic"
+ size="small"
+ //label="Outlined"
+ variant="outlined"
+ onChange={handleMaxHeight}
+ value={maxHeight}
+ />
+ <FormControl component="fieldset">
+ <FormLabel component="legend" style={{ marginTop: "8px" }}>
+ {"View (FileItems layout)"}
+ </FormLabel>
+ <RadioGroup
+ row
+ aria-label="gender"
+ name="row-radio-buttons-group"
+ onChange={handleCheckView}
+ value={viewValue}
+ >
+ <FormControlLabel
+ disabled={disableScroll}
+ value="list"
+ control={<Radio />}
+ label="list"
+ />
+ <FormControlLabel
+ disabled={disableScroll}
+ value="grid"
+ control={<Radio />}
+ label="grid"
+ />
+ <FormControlLabel
+ disabled={disableScroll}
+ value={"unset"}
+ control={<Radio />}
+ label="unset"
+ />
+ </RadioGroup>
+ </FormControl>
+
+ <FormLabel component="legend" style={{ marginTop: "8px" }}>
+ {`Disable scrollbar: ( for optimizing display when using "resultOnTooltip prop on FileItem")`}
+ </FormLabel>
+ <a href="https://codesandbox.io/s/dropzone-ui-fileitem-resultontooltip-h6hu7">
+ <img
+ src="https://img.shields.io/badge/new-feature-green.svg"
+ alt="npm latest package"
+ />
+ </a>
+
+ <FormControlLabel
+ control={
+ <Switch
+ checked={disableScroll}
+ onChange={(e, ch) => {
+ setDisableScroll(ch);
+ }}
+ />
+ }
+ label={"disableScroll"}
+ />
+ <FormLabel component="legend" style={{ marginTop: "8px" }}>
+ {`Theme color: ( ${useColor ? color : "unset"} )`}
+ </FormLabel>
+ <FormControlLabel
+ control={
+ <Switch
+ checked={useColor}
+ onChange={(e, ch) => {
+ setUseColor(ch);
+ }}
+ />
+ }
+ label={useColor ? "disable color" : "enable color"}
+ />
+ {useColor && (
+ <div>
+ <input
+ placeholder="color"
+ onChange={handleChangeColor}
+ type="color"
+ />
+ {color}
+ </div>
+ )}
+ <FormLabel component="h2" style={{ marginTop: "8px" }}>
+ {"Clean not valid files button"}
+ </FormLabel>
+ <FormControlLabel
+ control={
+ <Switch
+ checked={onClean}
+ onChange={(e, ch) => {
+ setOnClean(ch);
+ }}
+ />
+ }
+ label="onClean"
+ />
+ <FormLabel component="h2" style={{ marginTop: "8px" }}>
+ {"Enable/disable clickable"}
+ </FormLabel>
+ <FormControlLabel
+ control={
+ <Switch
+ checked={clickableDis}
+ onChange={(e, ch) => {
+ setClickableDis(ch);
+ }}
+ />
+ }
+ label="clickable"
+ />
+ <FormLabel component="h2">
+ {"Footer and header (true by def.)"}
+ </FormLabel>
+ <FormControlLabel
+ control={
+ <Switch
+ onChange={(e, ch) => {
+ setHeaderDis(ch);
+ }}
+ />
+ }
+ label="disable header"
+ />
+ <FormControlLabel
+ control={
+ <Switch
+ onChange={(e, ch) => {
+ setFooterDis(ch);
+ }}
+ />
+ }
+ label="disable footer"
+ />
+ </Grid>
+ </Grid>
+ </Paper>
+ </Grid>
+
+ <Grid item md={3} xs={12}>
+ <h3>{"FileItem props"}</h3>
+ <Paper elevation={3} style={{ padding: "15px" }}>
+ <h4 style={{ margin: "10px 5px 0 0" }}>Display</h4>
+ <FormLabel component="h2" style={{ marginTop: "8px" }}>
+ {"Show info layer"}
+ </FormLabel>
+ <FormControlLabel
+ control={
+ <Switch
+ checked={info}
+ onChange={(e, ch) => {
+ setInfo(ch);
+ }}
+ />
+ }
+ label="info"
+ />
+ <FormLabel component="h2" style={{ marginTop: "8px" }}>
+ {
+ "Always active (show actions and buttons if true. If false, show only on hover)"
+ }
+ </FormLabel>
+ <FormControlLabel
+ control={
+ <Switch
+ checked={alwaysActive}
+ onChange={(e, ch) => {
+ setAlwaysActive(ch);
+ }}
+ />
+ }
+ label="alwaysActive"
+ />
+ <FormLabel component="h2" style={{ marginTop: "8px" }}>
+ {
+ "Display Result on layer (if true) otherwise, on tooltip on Hover"
+ }
+ </FormLabel>
+ <a href="https://codesandbox.io/s/dropzone-ui-fileitem-resultontooltip-h6hu7">
+ <img
+ src="https://img.shields.io/badge/new-feature-green.svg"
+ alt="npm latest package"
+ />
+ </a>
+ <FormControlLabel
+ control={
+ <Switch
+ checked={resultOnTooltip}
+ onChange={(e, ch) => {
+ setResultOnTooltip(ch);
+ }}
+ />
+ }
+ label="resultOnTooltip"
+ />
+ resultOnTooltip
+ <h4 style={{ margin: "10px 5px 0 0" }}>
+ {"Preview (inside FileItem)"}
+ </h4>
+ <FormLabel component="legend" style={{ marginTop: "8px" }}>
+ {"Show image preview on FleItem if valid"}
+ </FormLabel>
+ <FormControlLabel
+ control={
+ <Switch
+ checked={preview}
+ onChange={(e, ch) => {
+ setPreview(ch);
+ }}
+ />
+ }
+ label="preview"
+ />
+ <h4 style={{ margin: "10px 5px 0 0" }}>Full Screen Preview</h4>
+ <FormLabel component="legend" style={{ marginTop: "8px" }}>
+ {" Preview button and add handler"}
+ </FormLabel>
+ <FormControlLabel
+ control={
+ <Switch
+ checked={onSee}
+ onChange={(e, ch) => {
+ setOnSee(ch);
+ }}
+ />
+ }
+ label="onSee"
+ />
+ <FormLabel component="h2" style={{ marginTop: "8px" }}>
+ {"Show preview in HD"}
+ </FormLabel>
+ <FormControlLabel
+ control={
+ <Switch
+ checked={hd}
+ onChange={(e, ch) => {
+ setHd(ch);
+ }}
+ />
+ }
+ label="hd"
+ />
+ <h4 style={{ margin: "10px 5px 0 0" }}>Delete File</h4>
+ <FormLabel component="legend" style={{ marginTop: "8px" }}>
+ {'Show "delete file" button and add handler'}
+ </FormLabel>
+ <FormControlLabel
+ control={
+ <Switch
+ checked={onDeleteVal}
+ onChange={(e, ch) => {
+ setOnDelete(ch);
+ }}
+ />
+ }
+ label="onDelete"
+ />{" "}
+ <ElevationSlider onChange={(v) => setElevation(v)} />
+ </Paper>
+ </Grid>
+ </Grid>
+ <InteractiveGeneratedCode
+ {...{
+ accept,
+ maxHeight,
+ localization,
+ minHeight,
+ hd,
+ info,
+ preview,
+ alwaysActive,
+ onSee,
+ onDeleteVal,
+ viewValue,
+ footerDis,
+ headerDis,
+ elevation,
+ url,
+ method,
+ behaviour,
+ uploadingMessage,
+ config,
+ uploadOnDrop,
+ fakeupload,
+ label,
+ maxFileSize,
+ maxFiles,
+ onClean,
+ color,
+ clickableDis,
+ resultOnTooltip,
+ disableScroll,
+ }}
+ />
+ </div>
+ </Fragment>
+ );
+};
+export default InteractiveCode;
+
+const languages = [
+ { idiom: "Español: ES-es", value: "ES-es" },
+ { idiom: "English: EN-en", value: "EN-en" },
+ { idiom: "French: FR-fr", value: "FR-fr" },
+ { idiom: "Portuguese: PT-pt", value: "PT-pt" },
+ { idiom: "Russian: RU-ru", value: "RU-ru" },
+ { idiom: "Chinese(simplified): ZH-cn", value: "ZH-cn" },
+ { idiom: "Chinese(traditional): ZH-hk", value: "ZH-hk" },
+];
diff --git a/src/components/code-generator/InteractiveCode.scss b/src/components/code-generator/InteractiveCode.scss
new file mode 100644
index 0000000000000000000000000000000000000000..627e43aa82ba951a5b3098f2bcc68c43bb18b1b9
--- /dev/null
+++ b/src/components/code-generator/InteractiveCode.scss
@@ -0,0 +1,24 @@
+.dui-demo-container {
+ background-color: rgb(234, 238, 243);
+ //width: 100%;
+ margin: auto;
+ margin-top: 10px;
+ padding: 20px 30px;
+ border-radius: 10px ;
+ border: 1px solid rgb(215, 220, 225);
+ .dui-demo-paper {
+ background-color: white;
+ //width: 100%;
+ }
+ @media (max-width: 960px) {
+ width: 90%;
+ padding: 10px 20px;
+
+ }
+ @media (max-width: 600px) {
+ width: 100%;
+ padding: 5px 10px;
+
+ }
+ }
+
\ No newline at end of file
diff --git a/src/components/code-generator/InteractiveDemo.jsx b/src/components/code-generator/InteractiveDemo.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..c5b20a67a7023bf8ed2af85158e2744e4342475d
--- /dev/null
+++ b/src/components/code-generator/InteractiveDemo.jsx
@@ -0,0 +1,60 @@
+import React, { Fragment, useState } from "react";
+import { Dropzone, FileItem, FullScreenPreview } from "../../dropzone-ui";
+import "./InteractiveDemo.scss";
+const InteractiveDemo = (props) => {
+ const [files, setFiles] = useState([]);
+ const [imageSrc, setImageSrc] = useState(undefined);
+ const updateFiles = (incommingFiles) => {
+ //console.log("incomming files", incommingFiles);
+ setFiles(incommingFiles);
+ };
+ const onDelete = (id) => {
+ setFiles(files.filter((x) => x.id !== id));
+ };
+ const handleSee = (imageSource) => {
+ setImageSrc(imageSource);
+ };
+ const handleClean = (files) => {
+ //console.log("list cleaned", files);
+ };
+ return (
+ <Fragment>
+ <Dropzone
+ style={{ minWidth: "550px" }}
+ onChange={updateFiles}
+ minHeight="180px"
+ onClean={handleClean}
+ value={files}
+ maxFiles={10}
+ maxFileSize={5698000}
+ accept=".png,image/*"
+ url="http://ec2-99-99-9-9.compute-1.amazonaws.com:2800/upload-my-file"
+ //of course this url doens´t work, is only to make upload button visible
+ uploadOnDrop
+ fakeUploading
+ >
+ {files.length > 0 &&
+ files.map((file) => (
+ <FileItem
+ {...file}
+ key={file.id}
+ onDelete={onDelete}
+ onSee={handleSee}
+ preview
+ info
+ hd
+ />
+ ))}
+ </Dropzone>{" "}
+ <FullScreenPreview
+ imgSource={imageSrc}
+ openImage={imageSrc}
+ onClose={(e) => handleSee(undefined)}
+ />
+ <div className="dui-demo-container">
+ <div className="dui-demo-paper"></div>
+ </div>
+ </Fragment>
+ );
+};
+export default InteractiveDemo;
diff --git a/src/components/code-generator/InteractiveDemo.scss b/src/components/code-generator/InteractiveDemo.scss
new file mode 100644
index 0000000000000000000000000000000000000000..09028bcfdf2bed5c598f562e6f689c2b3ab416e4
--- /dev/null
+++ b/src/components/code-generator/InteractiveDemo.scss
@@ -0,0 +1,12 @@
+.dui-demo-container {
+ background-color: rgb(234, 238, 243);
+ width: 50%;
+ margin: auto;
+ padding: 4%;
+ border-radius: 10px ;
+ border: 1px solid rgb(215, 220, 225);
+ .dui-demo-paper {
+ background-color: white;
+ //width: 100%;
+ }
+}
diff --git a/src/components/code-generator/InteractiveGeneratedCode.jsx b/src/components/code-generator/InteractiveGeneratedCode.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..51de67cfc7457d27872941a82a86775aa7029ce9
--- /dev/null
+++ b/src/components/code-generator/InteractiveGeneratedCode.jsx
@@ -0,0 +1,437 @@
+
+import { Highlighter } from "rc-highlight";
+import React, { Fragment, useEffect, useState } from "react";
+//import { Highlighter } from "../../HIGHLIGHTER";
+
+const InteractiveGeneratedCode = (props) => {
+ const {
+ accept,
+ maxHeight,
+ localization,
+ minHeight,
+ hd,
+ info,
+ preview,
+ alwaysActive,
+ onSee,
+ onDeleteVal,
+ viewValue,
+ footerDis,
+ headerDis,
+ elevation,
+ url,
+ method,
+ behaviour,
+ uploadingMessage,
+ config,
+ uploadOnDrop,
+ fakeupload,
+ label,
+ maxFileSize,
+ maxFiles,
+ onClean,
+ color,
+ clickableDis,
+ resultOnTooltip,
+ disableScroll,
+ } = props;
+ const [code, setCode] = useState("");
+ const makeAccept = (accept) => {
+ if (!accept || accept.length === 0) {
+ return ``;
+ }
+ return `\n\taccept={"${accept}"}\n`;
+ };
+ const makeLocalization = (localization, item) => {
+ if (!localization || localization.length === 0) {
+ return ``;
+ }
+ if (item) {
+ return `\n\t localization={"${localization}"}\n`;
+ }
+ return `\n\tlocalization={"${localization}"}\n`;
+ };
+ const makeMinHeight = (minHeight) => {
+ if (!minHeight || minHeight.length === 0) {
+ return ``;
+ }
+ return `\n\tminHeight={"${minHeight}"}\n`;
+ };
+ const makeMaxHeight = (maxHeight) => {
+ if (!maxHeight || maxHeight.length === 0) {
+ return ``;
+ }
+ return `\n\tmaxHeight={"${maxHeight}"}\n`;
+ };
+ const makeView = (viewValue) => {
+ if (viewValue === "unset") {
+ return ``;
+ }
+ return `\n\tviewValue={"${viewValue}"}\n`;
+ };
+ const makeFooter = (footerDis) => {
+ if (!footerDis) {
+ return ``;
+ }
+ return `\n\tfooter={${!footerDis}}\n`;
+ };
+ const makeHeader = (headerDis) => {
+ if (!headerDis) {
+ return ``;
+ }
+ return `\n\theader={${!headerDis}}\n`;
+ };
+ function makeUrl(url) {
+ if (!url) {
+ return ``;
+ }
+ return `\n\turl={"${url}"}\n`;
+ }
+ function makeMethod(method) {
+ if (!method) {
+ return ``;
+ }
+ return `\n\tmethod={"${method}"}\n`;
+ }
+ function makeBehaviour(behaviour) {
+ if (behaviour === "unset") {
+ return ``;
+ }
+ return `\n\tbehaviour={"${behaviour}"}\n`;
+ }
+ function makeUploadingMessage(uploadingMessage) {
+ //console.log("upload message", uploadingMessage);
+ if (!uploadingMessage) {
+ return ``;
+ }
+ return `\n\tuploadingMessage={"${uploadingMessage}"}\n`;
+ }
+ function makeConfig(config) {
+ if (!config) {
+ return ``;
+ }
+ return `\n\tconfig={${config}}\n`;
+ }
+
+ function makeUploadOnDrop(uploadOnDrop) {
+ if (!uploadOnDrop) {
+ return ``;
+ }
+ return `\n\tuploadOnDrop\n`;
+ }
+ function makeFakeUpload(fakeupload) {
+ if (!fakeupload) {
+ return ``;
+ }
+ return `\n\tfakeupload\n`;
+ }
+ function makeLabel(label) {
+ if (!label) {
+ return ``;
+ }
+ return `\n\tlabel={"${label}"}\n`;
+ }
+ function makeMaxFileSize(maxFileSize) {
+ if (!maxFileSize) {
+ return ``;
+ }
+ return `\n\tmaxFileSize={${maxFileSize}}\n`;
+ }
+ function makeMaxFiles(maxFiles) {
+ if (!maxFiles) {
+ return ``;
+ }
+ return `\n\tmaxFiles={${maxFiles}}\n`;
+ }
+ function makeonClean(onClean) {
+ if (!onClean) {
+ return ``;
+ }
+ return `\n\tonClean\n`;
+ }
+ function makeColor(color) {
+ if (!color) {
+ return ``;
+ }
+ return `\n\tcolor={"${color}"}\n`;
+ }
+ function makeClickable(clickable) {
+ if (!clickable) {
+ return ``;
+ }
+ return `\n\tclickable={"${clickable}"}\n`;
+ }
+ function makeDisableScroll(disableScroll) {
+ if (!disableScroll) {
+ return ``;
+ }
+ return `\n\tdisableScroll\n`;
+ }
+ ////////////////// FILE ITEM
+ function makeHd(hd) {
+ if (hd) {
+ return `\n\t hd\n`;
+ } else {
+ return ``;
+ }
+ }
+ function makePreview(preview) {
+ if (preview) {
+ return `\n\t preview\n`;
+ } else {
+ return ``;
+ }
+ }
+ function makeInfo(info) {
+ if (info) {
+ return `\n\t info\n`;
+ } else {
+ return ``;
+ }
+ }
+ function makeAlwaysActive(alwaysActive) {
+ if (alwaysActive) {
+ return `\n\t alwaysActive\n`;
+ } else {
+ return ``;
+ }
+ }
+ function makeOnSee(onSee) {
+ if (onSee) {
+ return `\n\t onSee={handleSee}\n`;
+ } else {
+ return ``;
+ }
+ }
+ function makeOnDelete(onDeleteVal) {
+ if (onDeleteVal) {
+ return `\n\t onDelete={handleDelete}\n`;
+ } else {
+ return ``;
+ }
+ }
+ const makeElevation = (elevation) => {
+ if (!elevation || elevation === 0) {
+ return ``;
+ } else {
+ return `\n\t elevation={${elevation}}\n`;
+ }
+ };
+ function makeResultOnTooltip(resultOnTooltip) {
+ if (resultOnTooltip) {
+ return `\n\t resultOnTooltip\n`;
+ } else {
+ return ``;
+ }
+ }
+ //////// MAIN CODE
+ const makeCode = (
+ accept,
+ maxHeight,
+ localization,
+ minHeight,
+ hd,
+ info,
+ preview,
+ alwaysActive,
+ onSee,
+ onDeleteVal,
+ viewValue,
+ footerDis,
+ headerDis,
+ elevation,
+ url,
+ method,
+ behaviour,
+ uploadingMessage,
+ config,
+ uploadOnDrop,
+ fakeupload,
+ label,
+ maxFileSize,
+ maxFiles,
+ onClean,
+ color,
+ clickableDis,
+ resultOnTooltip,disableScroll,
+ ) => {
+ return (
+ `
+ import { Dropzone, FileItem${
+ onSee ? ", FullScreenPreview " : " "
+ }} from "@dropzone-ui/react";
+ import { useState } from "react";
+ export default function App() {
+ const [files, setFiles] = useState([]);` +
+ makeImgSrcState(onSee) +
+ `
+ const updateFiles = (incommingFiles) => {
+ console.log("incomming files", incommingFiles);
+ setFiles(incommingFiles);
+ };` +
+ makeOnDeleteHandler(onDeleteVal) +
+ makeHandleSee(onSee) +
+ `
+ return (
+ <Dropzone
+ onChange={updateFiles}
+ value={files}` +
+ makeClickable(clickableDis) +
+ makeonClean(onClean) +
+ makeAccept(accept) +
+ makeMaxFileSize(maxFileSize) +
+ makeMaxFiles(maxFiles) +
+ makeLabel(label) +
+ makeMinHeight(minHeight) +
+ makeMaxHeight(maxHeight) +
+ makeLocalization(localization) +
+ makeView(viewValue) +
+ makeFooter(footerDis) +
+ makeHeader(headerDis) +
+ makeUrl(url) +
+ makeMethod(method) +
+ makeUploadingMessage(uploadingMessage) +
+ makeBehaviour(behaviour) +
+ makeConfig(config) +
+ makeUploadOnDrop(uploadOnDrop) +
+ makeColor(color) +
+ makeFakeUpload(fakeupload) +
+ makeDisableScroll(disableScroll)+
+ `
+ >
+ {files.length>0 && files.map((file) => (
+ <FileItem
+ {...file}
+ key={file.id}` +
+ makeOnDelete(onDeleteVal) +
+ makeOnSee(onSee) +
+ makeAlwaysActive(alwaysActive) +
+ makeLocalization(localization, true) +
+ makePreview(preview) +
+ makeInfo(info) +
+ makeHd(hd) +
+ makeElevation(elevation) +
+ makeResultOnTooltip(resultOnTooltip) +
+ `
+ />
+ ))}` +
+ //makeFullScreenOnseeComponent(onSee) +
+ `
+ </Dropzone>
+ ${makeFullScreenOnseeComponent(onSee)}
+ );
+ }
+ `
+ );
+ };
+ useEffect(() => {
+ const codeGenerated = makeCode(
+ accept,
+ maxHeight,
+ localization,
+ minHeight,
+ hd,
+ info,
+ preview,
+ alwaysActive,
+ onSee,
+ onDeleteVal,
+ viewValue,
+ footerDis,
+ headerDis,
+ elevation,
+ url,
+ method,
+ behaviour,
+ uploadingMessage,
+ config,
+ uploadOnDrop,
+ fakeupload,
+ label,
+ maxFileSize,
+ maxFiles,
+ onClean,
+ color,
+ clickableDis,
+ resultOnTooltip,disableScroll,
+ );
+ setCode(codeGenerated);
+ // eslint-disable-next-line
+ }, [
+ accept,
+ maxHeight,
+ localization,
+ minHeight,
+ hd,
+ info,
+ preview,
+ alwaysActive,
+ onSee,
+ onDeleteVal,
+ viewValue,
+ footerDis,
+ headerDis,
+ elevation,
+ url,
+ method,
+ behaviour,
+ uploadingMessage,
+ config,
+ uploadOnDrop,
+ fakeupload,
+ label,
+ maxFileSize,
+ maxFiles,
+ onClean,
+ color,
+ clickableDis,
+ resultOnTooltip,disableScroll
+ ]);
+ return (
+ <Fragment>
+ <Highlighter
+ style={{ margin: "10px 0", backgroundColor: "#010409" }}
+ onCopyToClipboard={(code_) => {
+ //console.log("copied: " + code_);
+ }}
+ >
+ {code}
+ </Highlighter>
+ </Fragment>
+ );
+};
+export default InteractiveGeneratedCode;
+function makeOnDeleteHandler(onDelete) {
+ if (!onDelete) {
+ return ``;
+ }
+ return `
+ const onDelete = (id) => {
+ setFiles(files.filter((x) => x.id !== id));
+ };`;
+}
+function makeHandleSee(onSee) {
+ if (!onSee) {
+ return ``;
+ }
+ return `\n const handleSee = (imageSource) => {
+ setImageSrc(imageSource);
+ };\n`;
+}
+function makeImgSrcState(onSee) {
+ if (!onSee) {
+ return ``;
+ }
+ return `\n const [imageSrc, setImageSrc] = useState(undefined);\n`;
+}
+
+function makeFullScreenOnseeComponent(onSee) {
+ if (!onSee) {
+ return ``;
+ }
+ return `\n <FullScreenPreview
+ imgSource={imageSrc}
+ openImage={imageSrc}
+ onClose={(e) => handleSee(undefined)}
+ />\n`;
+}
diff --git a/src/components/codeHighlight/CodeHighlight.scss b/src/components/codeHighlight/CodeHighlight.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e875b170c843463ab98650c48816681030c3165f
--- /dev/null
+++ b/src/components/codeHighlight/CodeHighlight.scss
@@ -0,0 +1,12 @@
+.code-highlight {
+ color: #1a2027;
+ background-color: rgba(102, 178, 255, 0.15);
+ border-radius: 5px;
+ font-size: 0.9125rem;
+ padding: 0px 5px;
+ line-height: 1.6;
+ &.dark-mode{
+ color: #fff;
+ background-color: rgba(102, 178, 255, 0.15);
+ }
+}
diff --git a/src/components/codeHighlight/CodeHighlight.tsx b/src/components/codeHighlight/CodeHighlight.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..4b0e79ecd708b56f99a999d06cadfa73a434dcf4
--- /dev/null
+++ b/src/components/codeHighlight/CodeHighlight.tsx
@@ -0,0 +1,18 @@
+import * as React from "react";
+import "./CodeHighlight.scss";
+
+interface CodeHighlightProps {
+ children?: React.ReactNode;
+ darkMode?: boolean;
+}
+const CodeHighlight: React.FC<CodeHighlightProps> = (
+ props: CodeHighlightProps
+) => {
+ const { children, darkMode } = props;
+ return (
+ <code className={darkMode ? "code-highlight dark-mode" : "code-highlight"}>
+ {children}
+ </code>
+ );
+};
+export default CodeHighlight;
diff --git a/src/components/demo-components/demo-component/DemoComponentContainer.scss b/src/components/demo-components/demo-component/DemoComponentContainer.scss
new file mode 100644
index 0000000000000000000000000000000000000000..f7a945964c3bc694ea45e03c3dd3c63b543f392a
--- /dev/null
+++ b/src/components/demo-components/demo-component/DemoComponentContainer.scss
@@ -0,0 +1,3 @@
+.demo-component-container {
+ width: 100%;
+}
diff --git a/src/components/demo-components/demo-component/DemoComponentContainer.tsx b/src/components/demo-components/demo-component/DemoComponentContainer.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..bed5f382ff63878b02857fa1ac7793518b1a723e
--- /dev/null
+++ b/src/components/demo-components/demo-component/DemoComponentContainer.tsx
@@ -0,0 +1,11 @@
+import * as React from "react";
+import { DemoComponentContainerProps } from "./DemoComponentContainerProps";
+
+const DemoComponentContainer:React.FC<DemoComponentContainerProps> = (props:DemoComponentContainerProps) =>{
+ return(
+ <div>
+
+ </div>
+ )
+}
+export default DemoComponentContainer;
\ No newline at end of file
diff --git a/src/components/demo-components/demo-component/DemoComponentContainerProps.ts b/src/components/demo-components/demo-component/DemoComponentContainerProps.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a8c9dca424163cc16faab825cae10f2d766d44f4
--- /dev/null
+++ b/src/components/demo-components/demo-component/DemoComponentContainerProps.ts
@@ -0,0 +1,3 @@
+export interface DemoComponentContainerProps{
+
+}
\ No newline at end of file
diff --git a/src/components/demo-components/desc-paragraph/DescParagraph.tsx b/src/components/demo-components/desc-paragraph/DescParagraph.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..f65e7a6ed01739e0bf05bbd87a4ede7c8fa5693d
--- /dev/null
+++ b/src/components/demo-components/desc-paragraph/DescParagraph.tsx
@@ -0,0 +1,14 @@
+import * as React from "react";
+import { DescParagraphProps } from "./DescParagraphProps";
+import "./DescParagraphProps.scss";
+const DescParagraph: React.FC<DescParagraphProps> = (
+ props: DescParagraphProps
+) => {
+ const { content, children, margin, darkMode } = props;
+ return (
+ <div className={darkMode?"paragraph-desc dark-mode":"paragraph-desc"} style={{ margin: margin }}>
+ {children || content}
+ </div>
+ );
+};
+export default DescParagraph;
diff --git a/src/components/demo-components/desc-paragraph/DescParagraphProps.scss b/src/components/demo-components/desc-paragraph/DescParagraphProps.scss
new file mode 100644
index 0000000000000000000000000000000000000000..fc473fdf90cb127c79fcd6d6662b97d26df788b8
--- /dev/null
+++ b/src/components/demo-components/desc-paragraph/DescParagraphProps.scss
@@ -0,0 +1,23 @@
+.paragraph-desc {
+ font-size: 1rem;
+ line-height: 1.565;
+ letter-spacing: 0;
+ font-weight: 400;
+ margin-bottom: 16px;
+ margin-top: 0;
+ color: #1a2027;
+ word-break: break-word;
+ &.dark-mode{
+ color: rgba(255, 255, 255, 0.7);
+ }
+ .code {
+ background-color: rgba(102, 178, 255, 0.15);
+ color: #1a2027;
+ padding: 0 5px;
+ display: inline-block;
+ font-size: 0.89rem;
+ direction: ltr;
+ font-weight: bolder;
+ border-radius: 4px;
+ }
+}
diff --git a/src/components/demo-components/desc-paragraph/DescParagraphProps.ts b/src/components/demo-components/desc-paragraph/DescParagraphProps.ts
new file mode 100644
index 0000000000000000000000000000000000000000..7fddad83368aa407606f4b667e4fa696faabd260
--- /dev/null
+++ b/src/components/demo-components/desc-paragraph/DescParagraphProps.ts
@@ -0,0 +1,6 @@
+export type DescParagraphProps = {
+ content?:string;
+ children?:React.ReactNode;
+ margin?:string;
+ darkMode?:boolean;
+}
\ No newline at end of file
diff --git a/src/components/demo-components/dropzone-demo/AdvancedDropzoneCodeJS.jsx b/src/components/demo-components/dropzone-demo/AdvancedDropzoneCodeJS.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..39da2a60b7dbc7171cd5650bfa8e61a806c89f2a
--- /dev/null
+++ b/src/components/demo-components/dropzone-demo/AdvancedDropzoneCodeJS.jsx
@@ -0,0 +1,102 @@
+import * as React from "react";
+import ShowCode from "../../show-code/ShowCode";
+
+const AdvancedDropzoneCodeJS = (props) => {
+ return (
+ <ShowCode
+ codeCompleteJS={completeCodeJS}
+ codeCompleteTS={completeCodeTS}
+ codeSandboxJS="https://codesandbox.io/s/dropzone-ui-basic-3j01v"
+ codeSandboxTS="https://codesandbox.io/s/dropzone-ui-basic-3j01v"
+ codeSplittedJS={splittedCodeJS}
+ codeSplittedTS={splittedCodeTS}
+ />
+ );
+};
+export default AdvancedDropzoneCodeJS;
+
+const splittedCodeJS = `<Dropzone
+ style={{ minWidth: "550px" }}
+ onChange={updateFiles}
+ minHeight="195px"
+ value={files}
+ maxFiles={5}
+ maxFileSize={2998000}
+ label="Drag'n drop files here or click to browse"
+ accept=".png, image/*"
+ url="https://my-awsome-server/upload-my-file"
+ uploadOnDrop
+ fakeUploading
+>
+ {files.length > 0 &&
+ files.map((file) => (
+ <FileItem
+ {...file}
+ key={file.id}
+ onDelete={onDelete}
+ onSee={handleSee}
+ resultOnTooltip
+ preview
+ info
+ hd
+ />
+ ))}
+</Dropzone>`;
+const completeCodeJS = `import { Dropzone, FileItem, FullScreenPreview } from "@dropzone-ui/react";
+import { useState } from "react";
+export default function App() {
+ const [files, setFiles] = useState([]);
+ const [imageSrc, setImageSrc] = useState(undefined);
+ const updateFiles = (incommingFiles) => {
+ console.log("incomming files", incommingFiles);
+ setFiles(incommingFiles);
+ };
+ const onDelete = (id) => {
+ setFiles(files.filter((x) => x.id !== id));
+ };
+ const handleSee = (imageSource) => {
+ setImageSrc(imageSource);
+ };
+ const handleClean = (files) => {
+ console.log("list cleaned", files);
+ };
+ return (
+ <>
+ <Dropzone
+ style={{ minWidth: "550px" }}
+ onChange={updateFiles}
+ minHeight="195px"
+ value={files}
+ maxFiles={5}
+ maxFileSize={2998000}
+ label="Drag'n drop files here or click to browse"
+ accept=".png,image/*"
+ url="https://my-awsome-server/upload-my-file"
+ uploadOnDrop
+ fakeUploading
+ >
+ {files.length > 0 &&
+ files.map((file) => (
+ <FileItem
+ {...file}
+ key={file.id}
+ onDelete={onDelete}
+ onSee={handleSee}
+ resultOnTooltip
+ preview
+ info
+ hd
+ />
+ ))}
+ </Dropzone>
+ <FullScreenPreview
+ imgSource={imageSrc}
+ openImage={imageSrc}
+ onClose={(e) => handleSee(undefined)}
+ />
+ </>
+ );
+}`;
+
+const completeCodeTS = completeCodeJS;
+const splittedCodeTS = splittedCodeJS;
diff --git a/src/components/demo-components/dropzone-demo/AdvancedDropzoneDemo.jsx b/src/components/demo-components/dropzone-demo/AdvancedDropzoneDemo.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..93eff5d816c7e36331640e9552f4f4f24b1a7cfc
--- /dev/null
+++ b/src/components/demo-components/dropzone-demo/AdvancedDropzoneDemo.jsx
@@ -0,0 +1,99 @@
+import {
+ Dropzone,
+ FileMosaic /* FullScreenPreview */,
+} from "../../../files-ui";
+import { useEffect, useState } from "react";
+import axios from "axios";
+const REMOTE = "https://files-ui-express-static-file-storage.vercel.app/39d33dff2d41b522c1ea276c4b82507f96b9699493d2e7b3f5c864ba743d9503";
+const LOCAL = "http://localhost/39d33dff2d41b522c1ea276c4b82507f96b9699493d2e7b3f5c864ba743d9503";
+export default function AdvancedDropzoneDemo() {
+ const [extFiles, setExtFiles] = useState([]);
+
+ const [imageSrc, setImageSrc] = useState(undefined);
+
+ const updateFiles = (incommingFiles) => {
+ console.log("incomming extFiles", incommingFiles);
+ setExtFiles(incommingFiles);
+ };
+ const onDelete = (id) => {
+ setExtFiles(extFiles.filter((x) => x.id !== id));
+ };
+ const handleSee = (imageSource) => {
+ setImageSrc(imageSource);
+ };
+ const onClean = () => {
+ setExtFiles(extFiles.filter((ef) => ef.valid !== false));
+ };
+ const handleFinish = (res) => {
+ console.log("finish", res);
+ };
+ useEffect(() => {
+ checkFiles();
+ }, []);
+ async function checkFiles() {
+ try {
+ const res = await axios.get(
+ REMOTE +
+ "/file"
+ );
+ console.log("checkFiles", res);
+ } catch (error) {
+ console.log("checkFiles error", error);
+ }
+ }
+ return (
+ <>
+ <Dropzone
+ //onClean={onClean}
+ onChange={updateFiles}
+ minHeight="195px"
+ value={extFiles}
+ maxFiles={3}
+ maxFileSize={2998000*20}
+ label="Drag'n drop files here or click to browse"
+ accept=".png,image/*, video/*"
+ uploadConfig={{
+ /* autoUpload: true */
+ method: "POST",
+ url: REMOTE + "/file/28048465460",
+ //url: "http://localhost:2800/file/28048465460",
+ cleanOnUpload: true,
+ }}
+ onUploadFinish={handleFinish}
+ //fakeUpload
+ actionButtons={{
+ position: "bottom",
+ abortButton: {},
+ // cleanButton: {},
+ deleteButton: {
+ //resetStyles:true
+ },
+ uploadButton: {},
+ }}
+ //onClean={()=>alert("cleaninnng")}
+ //cleanFiles
+ //autoClean
+ >
+ {extFiles.length > 0 &&
+ extFiles.map((file) => (
+ <FileMosaic
+ {...file}
+ key={file.id}
+ onDelete={onDelete}
+ onSee={handleSee}
+ resultOnTooltip
+ alwaysActive
+ preview
+ info
+ hd
+ />
+ ))}
+ </Dropzone>
+ {/* <FullScreenPreview
+ imgSource={imageSrc}
+ openImage={imageSrc}
+ onClose={(e) => handleSee(undefined)}
+ /> */}
+ </>
+ );
+}
diff --git a/src/components/demo-components/dropzone-demo/BasicDropzoneCodeJS.jsx b/src/components/demo-components/dropzone-demo/BasicDropzoneCodeJS.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..2880aaf9065f3390e8badc4d39c1d461b61c24d2
--- /dev/null
+++ b/src/components/demo-components/dropzone-demo/BasicDropzoneCodeJS.jsx
@@ -0,0 +1,98 @@
+import { ButtonGroup, Stack, Tooltip, IconButton } from "@mui/material";
+import Button from "@mui/material/Button";
+import CodeIcon from "@mui/icons-material/Code";
+import ViewInArIcon from "@mui/icons-material/ViewInAr";
+import { Highlighter } from "rc-highlight";
+//import { Highlighter as HL } from "../../../rc-highlight";
+import * as React from "react";
+import JSIcon from "../icons/JSIcon";
+import TSIcon from "../icons/TSIcon";
+import ShowCode from "../../show-code/ShowCode";
+const BasicDropzoneCode = ({ splittedOnly = false }) => {
+ return (
+ <ShowCode
+ splittedOnly={splittedOnly}
+ codeCompleteJS={completeCodeJS}
+ codeCompleteTS={completeCodeTS}
+ codeSandboxJS="https://codesandbox.io/s/dropzone-ui-basic-3j01v"
+ codeSandboxTS="https://codesandbox.io/s/dropzone-ui-basic-3j01v"
+ codeSplittedJS={splittedCodeJS}
+ codeSplittedTS={splittedCodeTS}
+ />
+ );
+};
+export default BasicDropzoneCode;
+
+const splittedCodeJS = `<Dropzone
+ style={{ minWidth: "505px" }}
+ onChange={updateFiles}
+ value={files}
+>
+ {files.length > 0 &&
+ files.map((file) => (
+ <FileMosaic key={file.id} {...file} onDelete={removeFile} info alwaysActive/>
+ ))}
+</Dropzone>`;
+const splittedCodeTS = `<Dropzone
+ style={{ minWidth: "505px" }}
+ onChange={updateFiles}
+ value={files}
+>
+ {files.length > 0 &&
+ files.map((file: ExtFile) => (
+ <FileMosaic key={file.id} {...file} onDelete={removeFile} info={true} alwaysActive={true}/>
+ ))}
+</Dropzone>`;
+const completeCodeJS = `import { Dropzone,FileMosaic } from "@files-ui/react";
+import * as React from "react";
+
+export default function BasicDemoDropzone() {
+ const [files, setFiles] = React.useState([]);
+ const updateFiles = (incommingFiles) => {
+ //do something with the files
+ setFiles(incommingFiles);
+ //even your own upload implementation
+ };
+ const removeFile = (id) => {
+ setFiles(files.filter((x) => x.id !== id));
+ };
+ return (
+ <Dropzone
+ style={{ minWidth: "505px" }}
+ onChange={updateFiles}
+ value={files}
+ >
+ {files.length > 0 &&
+ files.map((file) => (
+ <FileMosaic key={file.id} {...file} onDelete={removeFile} info />
+ ))}
+ </Dropzone>
+ );
+}`;
+
+const completeCodeTS = `import { Dropzone, FileMosaic, ExtFile } from "@files-ui/react";
+import * as React from "react";
+
+export default function BasicDemoDropzone() {
+ const [files, setFiles] = React.useState<ExtFile[]>([]);
+ const updateFiles = (incommingFiles:ExtFile[]) => {
+ //do something with the files
+ setFiles(incommingFiles);
+ //even your own upload implementation
+ };
+ const removeFile = (id: string | number | undefined) => {
+ setFiles(files.filter((x: ExtFile) => x.id !== id));
+ };
+ return (
+ <Dropzone
+ style={{ minWidth: "505px" }}
+ onChange={updateFiles}
+ value={files}
+ >
+ {files.length > 0 &&
+ files.map((file:ExtFile) => (
+ <FileMosaic key={file.id} {...file} onDelete={removeFile} info={true} />
+ ))}
+ </Dropzone>
+ );
+}`;
diff --git a/src/components/demo-components/dropzone-demo/BasicDropzoneDemo.jsx b/src/components/demo-components/dropzone-demo/BasicDropzoneDemo.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..dc7b44ca2674e6e26f2c5d64376303f4c84b0639
--- /dev/null
+++ b/src/components/demo-components/dropzone-demo/BasicDropzoneDemo.jsx
@@ -0,0 +1,32 @@
+import { Dropzone } from "../../../files-ui";
+import { FileMosaic } from "../../../files-ui/components/file-mosaic";
+import * as React from "react";
+export default function BasicDemoDropzone() {
+ const [files, setFiles] = React.useState([]);
+ const updateFiles = (incommingFiles) => {
+ //do something with the files
+ setFiles(incommingFiles);
+ //even your own upload implementation
+ };
+ const removeFile = (id) => {
+ setFiles(files.filter((x) => x.id !== id));
+ };
+ return (
+ <Dropzone
+ //style={{ minWidth: "505px" }}
+ onChange={updateFiles}
+ value={files}
+ >
+ {files.length > 0 &&
+ files.map((file) => (
+ <FileMosaic
+ key={file.id}
+ {...file}
+ onDelete={removeFile}
+ info
+ alwaysActive
+ />
+ ))}
+ </Dropzone>
+ );
+}
diff --git a/src/components/demo-components/filemosaic-demo/BasicFileMosaicDemo.jsx b/src/components/demo-components/filemosaic-demo/BasicFileMosaicDemo.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..7f7f00f2b4951428f16e75e05607da8292ed0907
--- /dev/null
+++ b/src/components/demo-components/filemosaic-demo/BasicFileMosaicDemo.jsx
@@ -0,0 +1,38 @@
+import * as React from "react";
+import { FileMosaic } from "../../../files-ui/components/file-mosaic";
+const sampleFile = {
+ id: ":0:",
+ name: "",
+ size: 28 * 1024 * 1024,
+ type: "plain/javascript",
+ name: "fileeeeee.jsx",
+};
+const BasicFileMosaicDemo = (props) => {
+ const [value, setValue] = React.useState([]);
+ const removeFile = () => {
+ setValue([]);
+ };
+ return (
+ <>
+ <FileMosaic
+ key={sampleFile.id}
+ {...sampleFile}
+ onDelete={() => {}}
+ info
+ alwaysActive
+ />
+ {value.length>0 ? (
+ <FileMosaic
+ key={sampleFile.id + ":"}
+ {...value[0]}
+ onDelete={removeFile}
+ info
+ alwaysActive
+ />
+ ) : (
+ <div onClick={() => setValue([sampleFile])}>InputFileButton</div>
+ )}
+ </>
+ );
+};
+export default BasicFileMosaicDemo;
diff --git a/src/components/demo-components/icons/JSIcon.jsx b/src/components/demo-components/icons/JSIcon.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..4d2eaa1a68f4b3bc3e073c051bbbea11c6fa2bb2
--- /dev/null
+++ b/src/components/demo-components/icons/JSIcon.jsx
@@ -0,0 +1,17 @@
+import * as React from "react";
+
+const JSIcon = ({ size = "20px", color = "black" }) => {
+ return (
+ <svg
+ //class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1t8mnmp"
+ focusable="false"
+ aria-hidden="true"
+ viewBox="0 0 24 24"
+ height={size}
+ width={size}
+ >
+ <path d="M3,3H21V21H3V3M7.73,18.04C8.13,18.89 8.92,19.59 10.27,19.59C11.77,19.59 12.8,18.79 12.8,17.04V11.26H11.1V17C11.1,17.86 10.75,18.08 10.2,18.08C9.62,18.08 9.38,17.68 9.11,17.21L7.73,18.04M13.71,17.86C14.21,18.84 15.22,19.59 16.8,19.59C18.4,19.59 19.6,18.76 19.6,17.23C19.6,15.82 18.79,15.19 17.35,14.57L16.93,14.39C16.2,14.08 15.89,13.87 15.89,13.37C15.89,12.96 16.2,12.64 16.7,12.64C17.18,12.64 17.5,12.85 17.79,13.37L19.1,12.5C18.55,11.54 17.77,11.17 16.7,11.17C15.19,11.17 14.22,12.13 14.22,13.4C14.22,14.78 15.03,15.43 16.25,15.95L16.67,16.13C17.45,16.47 17.91,16.68 17.91,17.26C17.91,17.74 17.46,18.09 16.76,18.09C15.93,18.09 15.45,17.66 15.09,17.06L13.71,17.86Z"></path>
+ </svg>
+ );
+};
+export default JSIcon;
diff --git a/src/components/demo-components/icons/TSIcon.jsx b/src/components/demo-components/icons/TSIcon.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..9b66ec6cb8833277c3bbceacc9544084864df3f6
--- /dev/null
+++ b/src/components/demo-components/icons/TSIcon.jsx
@@ -0,0 +1,16 @@
+import * as React from "react";
+
+const TSIcon = ({ size = "20px", color = "black" }) => {
+ return (
+ <svg
+ focusable="false"
+ aria-hidden="true"
+ viewBox="0 0 24 24"
+ height={size}
+ width={size}
+ >
+ <path d="M3,3H21V21H3V3M13.71,17.86C14.21,18.84 15.22,19.59 16.8,19.59C18.4,19.59 19.6,18.76 19.6,17.23C19.6,15.82 18.79,15.19 17.35,14.57L16.93,14.39C16.2,14.08 15.89,13.87 15.89,13.37C15.89,12.96 16.2,12.64 16.7,12.64C17.18,12.64 17.5,12.85 17.79,13.37L19.1,12.5C18.55,11.54 17.77,11.17 16.7,11.17C15.19,11.17 14.22,12.13 14.22,13.4C14.22,14.78 15.03,15.43 16.25,15.95L16.67,16.13C17.45,16.47 17.91,16.68 17.91,17.26C17.91,17.74 17.46,18.09 16.76,18.09C15.93,18.09 15.45,17.66 15.09,17.06L13.71,17.86M13,11.25H8V12.75H9.5V20H11.25V12.75H13V11.25Z"></path>
+ </svg>
+ );
+};
+export default TSIcon;
diff --git a/src/components/demo-components/sub-title/SubTitle.scss b/src/components/demo-components/sub-title/SubTitle.scss
new file mode 100644
index 0000000000000000000000000000000000000000..99458b7cafcd94b17a35a2ae267f8f5a753f77b8
--- /dev/null
+++ b/src/components/demo-components/sub-title/SubTitle.scss
@@ -0,0 +1,9 @@
+.subtitle {
+ font-size: 1.5rem;
+ line-height: 1.5;
+ letter-spacing: 0.1px;
+ color: #1a2027;
+ &.dark-mode{
+ color:rgba(255, 255, 255, 0.7);
+ }
+}
diff --git a/src/components/demo-components/sub-title/SubTitle.tsx b/src/components/demo-components/sub-title/SubTitle.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..8c2bd5b71d80ce541fbc43f358accd638be1a038
--- /dev/null
+++ b/src/components/demo-components/sub-title/SubTitle.tsx
@@ -0,0 +1,8 @@
+import * as React from "react";
+import { SubTitleProps } from "./SubTitleProps";
+import "./SubTitle.scss";
+const SubTitle: React.FC<SubTitleProps> = (props: SubTitleProps) => {
+ const { content, darkMode } = props;
+ return <h2 className={darkMode?"subtitle dark-mode":"subtitle"}>{content}</h2>;
+};
+export default SubTitle;
diff --git a/src/components/demo-components/sub-title/SubTitleProps.ts b/src/components/demo-components/sub-title/SubTitleProps.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5f5ad0877da3638f1c9838c0776d4443d43d9188
--- /dev/null
+++ b/src/components/demo-components/sub-title/SubTitleProps.ts
@@ -0,0 +1,4 @@
+export type SubTitleProps = {
+ content?: string;
+ darkMode?: boolean
+}
\ No newline at end of file
diff --git a/src/components/getting-started/InstallationNPM.jsx b/src/components/getting-started/InstallationNPM.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..b9d286326d7d4ce80f8349572da1f14e0763cc33
--- /dev/null
+++ b/src/components/getting-started/InstallationNPM.jsx
@@ -0,0 +1,23 @@
+import { Clipboard } from "rc-highlight";
+import * as React from "react";
+
+const InstallationNPM = () => {
+ return (
+ <div className="clipboard-container">
+ <span style={{ color: "#60d2ff" }}>
+ <span style={{ color: "white" }}>
+ <b>{" > "}</b>
+ </span>
+ <span style={{ color: "#e2d487" }}>{"npm "} </span>
+ <span style={{ color: "white" }}>{"install "} </span>
+ <span>{"@files-ui/react"} </span>
+ </span>
+ <Clipboard
+ style={{ backgroundColor: "grey" }}
+ code="npm install @files-ui/react"
+ onCopyToClipboard={() => {}}
+ />
+ </div>
+ );
+};
+export default InstallationNPM;
diff --git a/src/components/getting-started/InstallationYarn.jsx b/src/components/getting-started/InstallationYarn.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..8236a9baeb4f03d70b6f38fde9d3264fb055ab7a
--- /dev/null
+++ b/src/components/getting-started/InstallationYarn.jsx
@@ -0,0 +1,23 @@
+import { Clipboard } from "rc-highlight";
+import * as React from "react";
+
+const InstallationYarn = () => {
+ return (
+ <div className="clipboard-container">
+ <span style={{ color: "#60d2ff" }}>
+ <span style={{ color: "white" }}>
+ <b>{" > "}</b>
+ </span>
+ <span style={{ color: "#e2d487" }}>{"yarn "} </span>
+ <span style={{ color: "white" }}>{"add "} </span>
+ <span>{"@files-ui/react"} </span>
+ </span>
+ <Clipboard
+ style={{ backgroundColor: "grey" }}
+ code="yarn add @files-ui/react"
+ onCopyToClipboard={() => {}}
+ />
+ </div>
+ );
+};
+export default InstallationYarn;
diff --git a/src/components/getting-started/Overview.tsx b/src/components/getting-started/Overview.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..2141b2009133dcf4a7c16db053b35903e124499d
--- /dev/null
+++ b/src/components/getting-started/Overview.tsx
@@ -0,0 +1,45 @@
+import { Typography } from "@mui/material";
+import * as React from "react";
+import MainParagraph from "../paragraph-main/MainParagraph";
+
+interface OverviewProps {}
+const Overview: React.FC<OverviewProps> = (props: OverviewProps) => {
+ return (
+ <React.Fragment>
+ <h2 style={{ margin: 0 }}>Overview</h2>
+ <MainParagraph>
+ Files UI is a library of UI components and utilities for making File
+ Uploads with React.
+ <br />
+ Key features:
+ </MainParagraph>
+ <ul>
+ <li>{"✅ File validation: Validate files before uploading."}</li>
+ <li>{"🎨 File Image previews: See a thumbnail preview"}</li>
+ <li>
+ {
+ "ðŸ–¼ï¸ Full screen image previews: Add more interacion with a full screen preview of images"
+ }
+ </li>
+ <li>
+ {"🎥 Full screen video previews. Play the video before uploading."}
+ </li>
+ <li>
+ {
+ "👀 status visualization: validation and upload status is shown on a Tooltip or on Info Layer"
+ }
+ </li>
+ <li>
+ {"âœˆï¸ File upload: Upload valid files to a server using Axios lib."}
+ </li>
+ <li>{"🎠Out of the box design and style."}</li>
+ <li>
+ {
+ "🰠Easy to use. Probably, this is the killer feature you are looking for in a package."
+ }
+ </li>
+ </ul>
+ </React.Fragment>
+ );
+};
+export default Overview;
diff --git a/src/components/layout-pages/MainLayoutPage.jsx b/src/components/layout-pages/MainLayoutPage.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..68bbff4883467d807b3d458b54b913775774af12
--- /dev/null
+++ b/src/components/layout-pages/MainLayoutPage.jsx
@@ -0,0 +1,45 @@
+import { Stack, Box } from "@mui/material";
+import * as React from "react";
+import NavBarTemplate from "../../templates/NavBarTemplate";
+
+const MainLayoutPage = ({ mainContent, rightMenu, children }) => {
+ return (
+ <NavBarTemplate>
+ <Stack direction={"row"} sx={{ position: "relative" }}>
+ <Box
+ sx={{
+ boxSizing: "border-box",
+ marginLeft: { xl: "240px", lg: "0px" },
+ marginRight: { lg: "240px" },
+ width: {
+ lg: `min(1000px, calc(100% - ${240}px))`,
+ },
+ }}
+ >
+ <Box
+ sx={{
+ boxSizing: "border-box",
+ width: "100%",
+ //backgroundColor:"grey"
+ }}
+ >
+ {mainContent || children}
+ </Box>
+ </Box>
+
+ <Box
+ sx={{
+ position: "fixed",
+ top: 100,
+ right: 0,
+ width: "240px",
+ display: { lg: "flex", xs: "none" },
+ }}
+ >
+ {rightMenu}
+ </Box>
+ </Stack>
+ </NavBarTemplate>
+ );
+};
+export default MainLayoutPage;
diff --git a/src/components/main-title/MainTitle.tsx b/src/components/main-title/MainTitle.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..e8467f20d2dcccc5ad010d0209163c46cd085b60
--- /dev/null
+++ b/src/components/main-title/MainTitle.tsx
@@ -0,0 +1,20 @@
+import * as React from "react";
+interface MainTitleProps {
+ children?: React.ReactNode;
+}
+const MainTitle: React.FC<MainTitleProps> = (props: MainTitleProps) => {
+ return (
+ <h1
+ style={{
+ fontSize: "2.25rem",
+ letterSpacing: "0.2px",
+ lineHeight: "1.22222",
+ color: "#0a1929",
+ wordBreak: "break-word",
+ }}
+ >
+ {props.children}
+ </h1>
+ );
+};
+export default MainTitle;
diff --git a/src/components/paragraph-main/MainParagraph.scss b/src/components/paragraph-main/MainParagraph.scss
new file mode 100644
index 0000000000000000000000000000000000000000..288709a0fbfeda2a9dfd7079cd48155072d24e36
--- /dev/null
+++ b/src/components/paragraph-main/MainParagraph.scss
@@ -0,0 +1,9 @@
+.paragraph-main {
+ font-size: 1.125rem;
+ line-height: 1.3333;
+ letter-spacing: 0;
+ font-weight: 400;
+ margin-bottom: 16px;
+ margin-top: 0;
+ color: #1A2027;
+}
diff --git a/src/components/paragraph-main/MainParagraph.tsx b/src/components/paragraph-main/MainParagraph.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..3722b44c8301dd3cedd7dbc19055e6dc994d8ff5
--- /dev/null
+++ b/src/components/paragraph-main/MainParagraph.tsx
@@ -0,0 +1,10 @@
+import * as React from "react";
+import { ParagraphMainProps } from "./MainParagraphProps";
+import "./MainParagraph.scss";
+const MainParagraph: React.FC<ParagraphMainProps> = (
+ props: ParagraphMainProps
+) => {
+ const { content, children } = props;
+ return <p className="paragraph-main">{children || content}</p>;
+};
+export default MainParagraph;
diff --git a/src/components/paragraph-main/MainParagraphProps.ts b/src/components/paragraph-main/MainParagraphProps.ts
new file mode 100644
index 0000000000000000000000000000000000000000..2ed894b374700f61681aabd1209c694167aaf574
--- /dev/null
+++ b/src/components/paragraph-main/MainParagraphProps.ts
@@ -0,0 +1,4 @@
+export type ParagraphMainProps = {
+ content?:string;
+ children?:React.ReactNode;
+}
\ No newline at end of file
diff --git a/src/components/show-code/ShowCode.tsx b/src/components/show-code/ShowCode.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..86bc8edc23adfd0785c91c86a9f72a0ec1cf161e
--- /dev/null
+++ b/src/components/show-code/ShowCode.tsx
@@ -0,0 +1,108 @@
+import { ButtonGroup, Stack, Tooltip, IconButton } from "@mui/material";
+import Button from "@mui/material/Button";
+import CodeIcon from "@mui/icons-material/Code";
+import ViewInArIcon from "@mui/icons-material/ViewInAr";
+import * as React from "react";
+import JSIcon from "../demo-components/icons/JSIcon";
+import TSIcon from "../demo-components/icons/TSIcon";
+import { Highlighter } from "rc-highlight";
+interface ShowCodeProps {
+ codeSandboxJS?: string;
+ codeSandboxTS?: string;
+ codeSplittedJS?: string;
+ codeSplittedTS?: string;
+ codeCompleteJS?: string;
+ codeCompleteTS?: string;
+ splittedOnly?:boolean;
+}
+const ShowCode: React.FC<ShowCodeProps> = (props: ShowCodeProps) => {
+ const {
+ codeSandboxJS = "https://codesandbox.io/s/dropzone-ui-basic-3j01v",
+ codeSandboxTS = "https://codesandbox.io/s/dropzone-ui-basic-3j01v",
+ codeCompleteJS,
+ codeCompleteTS,
+ codeSplittedJS,
+ codeSplittedTS,
+ splittedOnly=false
+ } = props;
+ const [showComplete, setShowComplete] = React.useState(false);
+ const [showJS, setShowJS] = React.useState(true);
+
+ const code = showComplete
+ ? showJS
+ ? codeCompleteJS
+ : codeCompleteTS
+ : showJS
+ ? codeSplittedJS
+ : codeSplittedTS;
+
+ return (
+ <React.Fragment>
+ {!splittedOnly && <Stack
+ direction={"row"}
+ justifyContent="space-between"
+ style={{ marginTop: "20px" }}
+ >
+ <Stack direction={"row"} justifyContent="flex-start">
+ <ButtonGroup variant="outlined" aria-label="outlined button group">
+ <Button
+ size="small"
+ style={showJS ? { backgroundColor: "rgba(4, 35, 84, 0.09)" } : {}}
+ //startIcon={}
+ onClick={() => setShowJS(true)}
+ >
+ <JSIcon />
+ </Button>
+ <Button
+ size="small"
+ style={
+ !showJS ? { backgroundColor: "rgba(4, 35, 84, 0.09)" } : {}
+ }
+ // endIcon={}
+ onClick={() => setShowJS(false)}
+ >
+ <TSIcon />
+ </Button>
+ </ButtonGroup>
+ </Stack>
+
+ <Stack direction={"row"} justifyContent="flex-end">
+ <Tooltip title={showComplete ? "Hide full code" : "Show full code"}>
+ <IconButton
+ style={{ borderRadius: "50%", border: "0.5px solid #eaeef3" }}
+ onClick={() => setShowComplete((showComplete) => !showComplete)}
+ //color="secondary"
+ aria-label="upload picture"
+ component="label"
+ >
+ <CodeIcon /* htmlColor="white" */ />
+ </IconButton>
+ </Tooltip>
+ <Tooltip title={"Edit in CodeSandBox"}>
+ <IconButton
+ style={{ borderRadius: "50%", border: "0.5px solid #eaeef3" }}
+ onClick={() => {
+ window?.open(showJS ? codeSandboxJS : codeSandboxTS, "_blank");
+ }}
+ //color="secondary"
+ aria-label="upload picture"
+ component="label"
+ >
+ <ViewInArIcon /* htmlColor="white" */ />
+ </IconButton>
+ </Tooltip>
+ </Stack>
+ </Stack>}
+ <Highlighter
+ onCopyToClipboard={(code_) => {
+ console.log("code copied to clipboard: ");
+ console.log(code_);
+ }}
+ style={{ margin: "20px 0" }}
+ >
+ {code}
+ </Highlighter>
+ </React.Fragment>
+ );
+};
+export default ShowCode;
diff --git a/src/components/typeHighlight/TypeHighlight.scss b/src/components/typeHighlight/TypeHighlight.scss
new file mode 100644
index 0000000000000000000000000000000000000000..fec4e49ad1aeaf35dc999ce6de11a934436f5264
--- /dev/null
+++ b/src/components/typeHighlight/TypeHighlight.scss
@@ -0,0 +1,8 @@
+.type-highlight {
+ color: rgb(147, 41, 129);
+ font-size: 0.9125rem;
+ line-height: 1.6;
+ // word-break: break-all;
+ padding: 0px 5px;
+ display: inline-block;
+}
diff --git a/src/components/typeHighlight/TypeHighlight.tsx b/src/components/typeHighlight/TypeHighlight.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..560e5a90b28607fad271d5b957c2df6ea832611b
--- /dev/null
+++ b/src/components/typeHighlight/TypeHighlight.tsx
@@ -0,0 +1,13 @@
+import * as React from "react";
+import "./TypeHighlight.scss";
+
+interface TypeHighlightProps {
+ children?: React.ReactNode;
+}
+const TypeHighlight: React.FC<TypeHighlightProps> = (
+ props: TypeHighlightProps
+) => {
+ const { children } = props;
+ return <div className="type-highlight">{children}</div>;
+};
+export default TypeHighlight;
diff --git a/src/data/FileMosaicAPIPropsRows.tsx b/src/data/FileMosaicAPIPropsRows.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..78a744b7d30e836653463666a01bbbd3f21c6629
--- /dev/null
+++ b/src/data/FileMosaicAPIPropsRows.tsx
@@ -0,0 +1,307 @@
+import CodeHighlight from "../components/codeHighlight/CodeHighlight";
+import TypeHighlight from "../components/typeHighlight/TypeHighlight";
+export const FileMosaicAPIPropsRows = [
+ {
+ id: 0,
+ name: "alwaysActive",
+ type: <TypeHighlight>boolean</TypeHighlight>,
+ default: <TypeHighlight>false</TypeHighlight>,
+ description: (
+ <>
+ Flag that makes all buttons visible. If{" "}
+ <TypeHighlight>false</TypeHighlight>, the buttons and info will be
+ visible only when user triggers the hover event.
+ </>
+ ),
+ },
+ /* {
+ id: 1,
+ name: "elevation",
+ type: (
+ <TypeHighlight>
+ <span>"1" | "2" | "3" | "4" | 1 | 2 | 3 | 4 | false</span>
+ </TypeHighlight>
+ ),
+ default: <TypeHighlight>undefined</TypeHighlight>,
+ description: <>Shadow depth for the FileItem container.</>,
+ }, */
+ {
+ id: 2,
+ name: "errors",
+ type: <TypeHighlight>{"string[]"}</TypeHighlight>,
+ default: <TypeHighlight>undefined</TypeHighlight>,
+ description: (
+ <>
+ The list of errors according to the validation criteria or the result of
+ the given custom validation function.
+ </>
+ ),
+ },
+ {
+ id: 3,
+ name: "file",
+ type: <TypeHighlight>{"File"}</TypeHighlight>,
+ default: <TypeHighlight>undefined</TypeHighlight>,
+ description: <>The file object obtained from client drop or selection</>,
+ },
+ {
+ name: "name",
+ type: <TypeHighlight>{"string"}</TypeHighlight>,
+ default: <TypeHighlight></TypeHighlight>,
+ description: <>The name of the file</>,
+ },
+ {
+ name: "type",
+ type: <TypeHighlight>{"string"}</TypeHighlight>,
+ default: <TypeHighlight></TypeHighlight>,
+ description: <>The file mime type.</>,
+ },
+ {
+ name: "size",
+ type: <TypeHighlight>{"number"}</TypeHighlight>,
+ default: <TypeHighlight></TypeHighlight>,
+ description: <>The size of the file in bytes.</>,
+ },
+ {
+ name: "valid",
+ type: <TypeHighlight>{"boolean"}</TypeHighlight>,
+ default: <TypeHighlight>undefined</TypeHighlight>,
+ description: (
+ <>
+ If present, it will show a valid or rejected message ("valid",
+ "denied"). By default valid is <CodeHighlight>undefined</CodeHighlight>.
+ </>
+ ),
+ },
+ /* {
+ id: 4,
+ name: "hd",
+ type: <TypeHighlight>{"boolean"}</TypeHighlight>,
+ default: <TypeHighlight>undefined</TypeHighlight>,
+ description: <>The actual File object instance</>,
+ }, */
+ {
+ id: 5,
+ name: "id",
+ type: <TypeHighlight>{"string | number"}</TypeHighlight>,
+ default: <TypeHighlight>undefined</TypeHighlight>,
+ description: <>The identifier of the file</>,
+ },
+ {
+ id: 6,
+ name: "info",
+ type: <TypeHighlight>{"boolean"}</TypeHighlight>,
+ default: <TypeHighlight>false</TypeHighlight>,
+ description: <>If true, the info button will be visible</>,
+ },
+ {
+ id: 7,
+ name: "imageUrl",
+ type: <TypeHighlight>{"string"}</TypeHighlight>,
+ default: <TypeHighlight>undefined</TypeHighlight>,
+ description: (
+ <>
+ A string representation or web url of the image that will be set to the
+ "src" prop of an <CodeHighlight>{"<img/>"}</CodeHighlight> tag. If
+ given, FileMosaic component will use this image source instead of
+ reading the image file.
+ </>
+ ),
+ },
+ {
+ id: 7,
+ name: "backgroundBlurImage",
+ type: <TypeHighlight>{"boolean"}</TypeHighlight>,
+ default: <TypeHighlight></TypeHighlight>,
+ description: <>If true, a background blur image will be shown</>,
+ },
+ {
+ id: 7,
+ name: "darkMode",
+ type: <TypeHighlight>{"boolean"}</TypeHighlight>,
+ default: <TypeHighlight>false</TypeHighlight>,
+ description: <>If true, dark mode colors are used in the component.</>,
+ },
+ {
+ name: "localization",
+ type: (
+ <TypeHighlight>
+ {
+ '"EN-en" | "ES-es" | "FR-fr" | "IT-it" | "PT-pt" | "RU-ru" | "ZH-cn" | "ZH-hk"'
+ }
+ </TypeHighlight>
+ ),
+ default: <TypeHighlight>{'"EN-en"'}</TypeHighlight>,
+ description: <>If true, dark mode colors are used in the component.</>,
+ },
+ {
+ name: "progress",
+ type: <TypeHighlight>number</TypeHighlight>,
+ default: <TypeHighlight></TypeHighlight>,
+ description: (
+ <>
+ The current percentage of upload progress. This value will have a higher
+ priority over the upload progress value calculated inside the component.
+ </>
+ ),
+ },
+ {
+ name: "xhr",
+ type: <TypeHighlight>XMLHttpRequest</TypeHighlight>,
+ default: <TypeHighlight></TypeHighlight>,
+ description: (
+ <>
+ A reference to the XHR object that allows the upload, progress and abort
+ events
+ </>
+ ),
+ },
+ {
+ name: "onSee",
+ type: <TypeHighlight>func</TypeHighlight>,
+ default: <TypeHighlight></TypeHighlight>,
+ description: (
+ <>
+ A function that return a file object when "see" button is pressed or
+ clicked.
+ <br />
+ <strong>Signature:</strong>
+ <br />
+ <CodeHighlight>
+ {" (imageSource: string | undefined) => void"}
+ </CodeHighlight>
+ </>
+ ),
+ },
+ {
+ name: "onWatch",
+ type: <TypeHighlight>func</TypeHighlight>,
+ default: <TypeHighlight></TypeHighlight>,
+ description: (
+ <>
+ Event that is triggered when `delete` button is clicked or pressed. If
+ present, `delete` button will be visible.
+ <br />
+ <strong>Signature:</strong>
+ <br />
+ <CodeHighlight>
+ {"(videoSource: File | undefined) => void"}
+ </CodeHighlight>
+ </>
+ ),
+ },
+ {
+ name: "onDelete",
+ type: <TypeHighlight>func</TypeHighlight>,
+ default: <TypeHighlight></TypeHighlight>,
+ description: (
+ <>
+ Event that is triggered when `delete` button is clicked or pressed. If
+ present, `delete` button will be visible.
+ <br />
+ <strong>Signature:</strong>
+ <br />
+ <CodeHighlight>
+ {"(fileId: number | string | undefined) => void"}
+ </CodeHighlight>
+ </>
+ ),
+ },
+ {
+ name: "onAbort",
+ type: <TypeHighlight>func</TypeHighlight>,
+ default: <TypeHighlight></TypeHighlight>,
+ description: (
+ <>
+ Event that is triggered when `abort` button is clicked or pressed during
+ `uploading` event. If present, `abort` button in `uploading` phase will
+ be visible.
+ <br />
+ <strong>Signature:</strong>
+ <br />
+ <CodeHighlight>
+ {"(fileId: number | string | undefined) => void"}
+ </CodeHighlight>
+ </>
+ ),
+ },
+ {
+ name: "onCancel",
+ type: <TypeHighlight>func</TypeHighlight>,
+ default: <TypeHighlight></TypeHighlight>,
+ description: (
+ <>
+ Event that is triggered when `cancel` button is clicked or pressed
+ during `preparing` event. If present, `cancel` button in `preparing`
+ phase will be visible.
+ <br />
+ <strong>Signature:</strong>
+ <br />
+ <CodeHighlight>
+ {"(fileId: number | string | undefined) => void"}
+ </CodeHighlight>
+ </>
+ ),
+ },
+ {
+ name: "onDownload",
+ type: <TypeHighlight>func</TypeHighlight>,
+ default: <TypeHighlight></TypeHighlight>,
+ description: (
+ <>
+ Event that is triggered when `download` button is clicked or pressed. If
+ present, `download` button will be visible.
+ <br />
+ <strong>Signature:</strong>
+ <br />
+ <CodeHighlight>
+ {
+ "(fileId: number | string | undefined, downloadUrl?: string) => void"
+ }
+ </CodeHighlight>
+ </>
+ ),
+ },
+ {
+ name: "onClick",
+ type: <TypeHighlight>func</TypeHighlight>,
+ default: <TypeHighlight></TypeHighlight>,
+ description: (
+ <>
+ Event that is triggered when user clicks the component
+ <br />
+ <strong>Signature:</strong>
+ <br />
+ <CodeHighlight>{"(evt: React.MouseEvent) => void"}</CodeHighlight>
+ </>
+ ),
+ },
+ {
+ name: "onDoubleClick",
+ type: <TypeHighlight>func</TypeHighlight>,
+ default: <TypeHighlight></TypeHighlight>,
+ description: (
+ <>
+ Event that is triggered when user double clicks the component
+ <br />
+ <strong>Signature:</strong>
+ <br />
+ <CodeHighlight>{"(evt: React.MouseEvent) => void"}</CodeHighlight>
+ </>
+ ),
+ },
+ {
+ name: "onRightClick",
+ type: <TypeHighlight>func</TypeHighlight>,
+ default: <TypeHighlight></TypeHighlight>,
+ description: (
+ <>
+ Event that is triggered when user right clicks the component
+ <br />
+ <strong>Signature:</strong>
+ <br />
+ <CodeHighlight>{" (evt: React.MouseEvent) => void"}</CodeHighlight>
+ </>
+ ),
+ },
+];
diff --git a/src/files-ui/components/avatar/Avatar.scss b/src/files-ui/components/avatar/Avatar.scss
new file mode 100644
index 0000000000000000000000000000000000000000..afd13e3dd8b6712de1a45ce72b887d2ef96cee3b
--- /dev/null
+++ b/src/files-ui/components/avatar/Avatar.scss
@@ -0,0 +1,52 @@
+.fui-avatar-main-container {
+ width: 200px;
+ height: 200px;
+ position: relative;
+ background-color: transparent;
+
+ .fui-avatar-image {
+ &.square {
+ border-radius: 10px;
+ }
+ overflow: hidden;
+ background-color: rgba(128, 128, 128, 0.486);
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 100%;
+ }
+ &:hover {
+ .fui-avatar-label {
+ &.hide {
+ display: flex;
+ }
+ }
+ }
+ .fui-avatar-label {
+ &.square {
+ border-radius: 10px;
+ }
+ &.hide {
+ display: none;
+ }
+ margin: 0;
+ overflow: hidden;
+ background-color: rgba(128, 128, 128, 0.486);
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 100%;
+ color: white;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+ &:hover {
+ background-color: rgba(71, 71, 71, 0.74);
+ display: flex;
+ cursor: pointer;
+ }
+ }
+}
diff --git a/src/files-ui/components/avatar/Avatar.tsx b/src/files-ui/components/avatar/Avatar.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..42b2bd64100bef4f1deee3f8d8e2d5f53fda823a
--- /dev/null
+++ b/src/files-ui/components/avatar/Avatar.tsx
@@ -0,0 +1,112 @@
+import * as React from "react";
+import { mergeProps } from "../overridable/mergeProps";
+import { AvatarProps, defaultAvatarProps } from "./AvatarProps";
+import "./Avatar.scss";
+import {
+ setAvatarClassNameContainer,
+ setAvatarClassNameLayerInfo,
+} from "./useAvatarClassName";
+import InputHidden from "../input-hidden/InputHidden";
+import { useAvatarStyle } from "./useAvatarStyle";
+import { DynamicSheet, DynamiCSS } from "@dynamicss/dynamicss";
+const Avatar: React.FC<AvatarProps> = (props: AvatarProps) => {
+ const {
+ style,
+ src,
+ onChange,
+ alt,
+ emptyLabel,
+ changeLabel,
+ readOnly,
+ variant,
+ borderRadius,
+ onError,
+ } = mergeProps(props, defaultAvatarProps);
+
+ const inputRef: React.RefObject<HTMLInputElement> =
+ React.useRef<HTMLInputElement>(null);
+
+ const isStyleInjected: boolean = useAvatarStyle(borderRadius);
+
+ const avatarClassNameContainer: string = setAvatarClassNameContainer(variant);
+ const avatarClassNameLayerInfo: string = setAvatarClassNameLayerInfo(variant);
+
+ const handleClick = () => {
+ // alert("Agregar fotooooooo");
+ inputRef.current?.click();
+ };
+
+ const handleChangeInput: React.ChangeEventHandler<HTMLInputElement> = (
+ evt: React.ChangeEvent<HTMLInputElement>
+ ): void => {
+ let fileList: FileList = evt.target.files as FileList;
+
+ let fileListOutput = [];
+ for (let i = 0, f; (f = fileList[i]); i++) {
+ fileListOutput.push(f);
+ }
+ onChange?.(fileListOutput[0]);
+ };
+
+ const handleError: React.ReactEventHandler<HTMLImageElement> = (
+ evt: React.SyntheticEvent<HTMLImageElement, Event>
+ ) => {
+ onError?.(evt);
+ };
+
+ if (isStyleInjected) {
+ return (
+ <div className="fui-avatar-main-container" style={style}>
+ {/**Layer 1 */}
+ {src ? (
+ <img
+ className="fui-avatar-image"
+ height={"100%"}
+ width={"100%"}
+ src={src}
+ alt={alt}
+ onError={handleError}
+ />
+ ) : (
+ <p className={"fui-avatar-label"}>{emptyLabel}</p>
+ )}
+ {/**Layer 2 */}
+ {!readOnly && (
+ <p className={"fui-avatar-label hide"} onClick={handleClick}>
+ {src ? changeLabel : emptyLabel}
+ <InputHidden
+ multiple={false}
+ accept={"image/*"}
+ onChange={handleChangeInput}
+ inputRef={inputRef}
+ />{" "}
+ </p>
+ )}
+ </div>
+ );
+ }
+ return <React.Fragment></React.Fragment>;
+};
+export default Avatar;
+
+/**
+ * creates a dynamic css sheet for avatar
+ * @param borderRadius the border radius
+ * @returns a dynamic css sheet
+ */
+const makeDynamicAvatarCSSRules = (
+ borderRadius: string | undefined
+): DynamicSheet => {
+ const styleSheet: DynamicSheet = DynamiCSS.makeStyleSheet({
+ id: "avatar-styles",
+ sheetRules: [
+ {
+ className: "fui-avatar-border",
+ rules: {
+ borderRadius: borderRadius,
+ },
+ },
+ ],
+ });
+ return styleSheet;
+};
diff --git a/src/files-ui/components/avatar/AvatarProps.ts b/src/files-ui/components/avatar/AvatarProps.ts
new file mode 100644
index 0000000000000000000000000000000000000000..628092378091954012d742b0de92b312c7bc9e26
--- /dev/null
+++ b/src/files-ui/components/avatar/AvatarProps.ts
@@ -0,0 +1,37 @@
+import { OverridableComponentProps } from "../overridable/OverridableComponentsProps";
+export interface AvatarFullProps extends OverridableComponentProps {
+ variant?: "square" | "circle";
+ borderRadius?: string;
+ src?: string;
+ onChange?: Function,
+ /**
+ * Alternative label when an error occurs
+ * on loading the image
+ */
+ alt?: string,
+
+ emptyLabel?: string;
+ changeLabel?: string;
+ /**
+ * if a src given, then avanatr will show the image
+ * or a file error message and will not allow
+ * the user to change the picture. Also, layer on hover will not be shown
+ */
+ readOnly?: boolean;
+
+ onError?: React.ReactEventHandler<HTMLImageElement>;
+}
+
+export declare type AvatarProps = {
+ [P in keyof AvatarFullProps]: AvatarFullProps[P];
+
+}
+
+export const defaultAvatarProps: AvatarProps =
+{
+ variant: "square",
+ alt: `avatar`,
+ emptyLabel: "Agregar foto",
+ changeLabel: "Cambiar foto",
+ readOnly: false
+}
\ No newline at end of file
diff --git a/src/files-ui/components/avatar/useAvatarClassName.ts b/src/files-ui/components/avatar/useAvatarClassName.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c726a921d18833a179b16d7a99596675b5e0d67d
--- /dev/null
+++ b/src/files-ui/components/avatar/useAvatarClassName.ts
@@ -0,0 +1,35 @@
+import * as React from "react"
+
+/* export const useAvatarClassName = (variant?: "square" | "circle"): [string, string] => {
+
+ const [avatarClassNameContainer, setAvatarClassNameContainer] = React.useState<string>("");
+ const [avatarClassNameLayerInfo, setAvatarClassNameLayerInfo] = React.useState<string>("");
+
+ React.useEffect(() => {
+ if (variant === "square") {
+ setAvatarClassNameContainer("fui-avatar-main-container-image");
+ setAvatarClassNameLayerInfo("fui-avatar-layer-info");
+ } else {
+ setAvatarClassNameContainer("fui-avatar-main-container-image square");
+ setAvatarClassNameLayerInfo("fui-avatar-layer-info square");
+ }
+
+ }, [variant]);
+
+
+ return [avatarClassNameContainer, avatarClassNameLayerInfo];
+} */
+export const setAvatarClassNameContainer = (variant?: "square" | "circle"): string => {
+ if (variant === "square") {
+ return "fui-avatar-main-container-image square fui-avatar-border";
+ } else {
+ return "fui-avatar-main-container-image fui-avatar-border";
+ }
+}
+export const setAvatarClassNameLayerInfo = (variant?: "square" | "circle"): string => {
+ if (variant === "square") {
+ return "fui-avatar-layer-info square fui-avatar-border";
+ } else {
+ return "fui-avatar-layer-info fui-avatar-border";
+ }
+}
\ No newline at end of file
diff --git a/src/files-ui/components/avatar/useAvatarStyle.ts b/src/files-ui/components/avatar/useAvatarStyle.ts
new file mode 100644
index 0000000000000000000000000000000000000000..4636b144ecae527b353dc059df2ab161677a6eda
--- /dev/null
+++ b/src/files-ui/components/avatar/useAvatarStyle.ts
@@ -0,0 +1,82 @@
+import { DynamicSheet, DynamiCSS } from "@dynamicss/dynamicss";
+import * as React from "react";
+
+export const useAvatarStyle = (borderRadius: string | undefined): boolean => {
+ const [idAvatarStyles, setIdAvatarStyles] = React.useState<string>("");
+ const [styleInjected, setStyleInjected] = React.useState<boolean>(false);
+
+ /**
+ * creates a dynamic css sheet for avatar
+ * @param borderRadius the border radius
+ * @returns a dynamic css sheet
+ */
+ const makeDynamicAvatarCSSRules = (borderRadius: string | undefined): DynamicSheet => {
+ const styleSheet: DynamicSheet = DynamiCSS.makeStyleSheet({
+ id: "avatar-styles",
+ sheetRules: [
+ {
+ className: "fui-avatar-border",
+ rules: {
+ borderRadius: `${borderRadius || "6px"} !important`,
+ }
+ },
+ ]
+ });
+ return styleSheet;
+ }
+
+ React.useEffect(() => {
+ /* if (!borderRadius) {
+ DynamiCSS.removeStyleSheet(idAvatarStyles);
+ return;
+ } */
+ let idStyle: string = "avatar-styles";
+ const styleSheet: DynamicSheet = makeDynamicAvatarCSSRules(borderRadius);
+ // check if classname was added
+ // if yes, edit css
+ // if not insert css
+ if (!styleInjected) {
+ console.log("avatar, no css, inserting");
+ idStyle = DynamiCSS.insertStyleSheet(styleSheet);
+ console.log("avatar, no css, inserted OK", idStyle);
+
+ setIdAvatarStyles(idStyle);
+
+ if (idStyle !== "") {
+ setStyleInjected(true);
+ }
+ } else {
+ console.log("avatar, catch css, modifiying", idAvatarStyles);
+ DynamiCSS.editStyleSheet(idAvatarStyles, styleSheet.sheetRules || []);
+ }
+
+ return () => {
+ console.log("avatar, deleting init", styleInjected, idAvatarStyles);
+ if (styleInjected) {
+ console.log("avatar, catch css delete");
+
+ DynamiCSS.removeStyleSheet(idAvatarStyles);
+ }
+ setIdAvatarStyles("");
+ setStyleInjected(false);
+ }
+ }, [borderRadius]);
+
+ /* React.useEffect(() => {
+
+ return () => {
+ console.log("avatar, deleting init", styleInjected, idAvatarStyles);
+ if (styleInjected) {
+ console.log("avatar, catch css delete");
+
+ DynamiCSS.removeStyleSheet(idAvatarStyles);
+ }
+ setIdAvatarStyles("");
+ setStyleInjected(false);
+ }
+ }, [idAvatarStyles, styleInjected]); */
+
+ return styleInjected;
+}
+
+
diff --git a/src/files-ui/components/download-hidden/DownloadHidden.tsx b/src/files-ui/components/download-hidden/DownloadHidden.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..3c3150e66a579084ca9983361904d39ec737bdd3
--- /dev/null
+++ b/src/files-ui/components/download-hidden/DownloadHidden.tsx
@@ -0,0 +1,25 @@
+import * as React from "react";
+export type DownloadHiddenProps = {
+ downloadUrl?: string;
+ anchorRef: React.RefObject<HTMLAnchorElement>;
+ fileName: string;
+};
+
+const DownloadHidden: React.FC<DownloadHiddenProps> = (
+ props: DownloadHiddenProps
+) => {
+ const { downloadUrl, anchorRef, fileName } = props;
+ if (downloadUrl)
+ return (
+ <a
+ ref={anchorRef}
+ href={downloadUrl}
+ download={fileName}
+ style={{ display: "none" }}
+ >
+ download_file
+ </a>
+ );
+ return <></>;
+};
+export default DownloadHidden;
diff --git a/src/files-ui/components/drop-layer/components/DropLayer.tsx b/src/files-ui/components/drop-layer/components/DropLayer.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..2967d8870db53cddfac0e4ab1f8249f08eac8f83
--- /dev/null
+++ b/src/files-ui/components/drop-layer/components/DropLayer.tsx
@@ -0,0 +1,23 @@
+import * as React from "react";
+import { DropLayerProps } from "./DropLayerProps";
+
+const DropLayer: React.FC<DropLayerProps> = (props: DropLayerProps) => {
+ const { onDrop, onDragLeave, className: classNameLayer, open, style } = props;
+ //console.log("DropLayer", classNameLayer);
+
+ const onDragEnd = (evt: React.DragEvent<HTMLDivElement>) => {
+ //console.log("Drag ended");
+ onDragLeave?.(evt);
+ };
+
+ return (
+ <div
+ className={classNameLayer}
+ onDragLeave={onDragLeave}
+ onDrop={onDrop}
+ //onDragEnd={onDragEnd}
+ style={style || { display: open ? undefined : "none" }}
+ ></div>
+ );
+};
+export default DropLayer;
diff --git a/src/files-ui/components/drop-layer/components/DropLayerProps.scss b/src/files-ui/components/drop-layer/components/DropLayerProps.scss
new file mode 100644
index 0000000000000000000000000000000000000000..ac9be0b6d9df80f2ff53e15de910c24e2afadc4e
--- /dev/null
+++ b/src/files-ui/components/drop-layer/components/DropLayerProps.scss
@@ -0,0 +1,6 @@
+.fui-drop-layer-root {
+ position: absolute;
+ left: 0;
+ top: 0;
+
+}
diff --git a/src/files-ui/components/drop-layer/components/DropLayerProps.ts b/src/files-ui/components/drop-layer/components/DropLayerProps.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c62125d3a7125817f6313fd7f67068512ced779b
--- /dev/null
+++ b/src/files-ui/components/drop-layer/components/DropLayerProps.ts
@@ -0,0 +1,11 @@
+import { OverridableComponentProps } from "../../overridable";
+import * as React from "react";
+export interface DropLayerPropsMap extends OverridableComponentProps {
+ onDragLeave?: React.DragEventHandler<HTMLDivElement>;
+ onDrop?: React.DragEventHandler<HTMLDivElement>;
+ open?: boolean;
+}
+
+export type DropLayerProps = {
+ [D in keyof DropLayerPropsMap]: DropLayerPropsMap[D]
+}
\ No newline at end of file
diff --git a/src/files-ui/components/drop-layer/hooks/useDropLayerClassName.ts b/src/files-ui/components/drop-layer/hooks/useDropLayerClassName.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d933627c6fa1469144d722126b8e2859befe8cf5
--- /dev/null
+++ b/src/files-ui/components/drop-layer/hooks/useDropLayerClassName.ts
@@ -0,0 +1,62 @@
+import { DynamicSheet, DynamiCSS } from "@dynamicss/dynamicss";
+import * as React from "react";
+import { dropLayerDynamicStyle } from "../utils/dropLayerDynamicStyle";
+
+const DROP_LAYER_STYLE_ID: string = "files-ui-styles-drop-layer";
+/**
+ *
+ * @param color
+ * @param isDragging
+ * @param makeClassName whether to make the classname or not
+ * @returns the classname for layer
+ */
+const useDropLayerClassName = (
+ color?: string,
+ isDragging?: boolean,
+ makeClassName?: boolean
+): string => {
+ const [idStyles, setIdStyles] = React.useState<string>("");
+ const [styleInjected, setStyleInjected] = React.useState<boolean>(false);
+ const [classNameCreated, setClassNameCreated] = React.useState<string>("");
+
+ React.useEffect(() => {
+ //console.log("useDropLayerClassName", color, isDragging, makeClassName);
+
+ const handleInserStyle = (
+ color: string,
+ isDragging?: boolean
+ ) => {
+ let finalClassName: string = "";
+ let styleSheet: DynamicSheet = dropLayerDynamicStyle(DROP_LAYER_STYLE_ID, color);
+ let idStyle: string = "";
+
+ if (!styleInjected) {
+ idStyle = DynamiCSS.insertStyleSheet(styleSheet);
+ setIdStyles(idStyle);
+ if (idStyle !== "") {
+ setStyleInjected(true);
+ }
+ } else {
+ //already a stylesheet associated
+ DynamiCSS.editStyleSheet(idStyles, styleSheet.sheetRules || []);
+ }
+ finalClassName += `dropzone-ui-layer`;
+
+ if (isDragging) {
+ finalClassName += ` dui-layer-drag`;
+ }
+ setClassNameCreated(finalClassName);
+ };
+
+ //console.log("=>", isDragging);
+
+ if (makeClassName) {
+ handleInserStyle(color as string, isDragging);
+ }
+
+ // eslint-disable-next-line
+ }, [color, isDragging, makeClassName]);
+
+ return classNameCreated;
+}
+export default useDropLayerClassName;
\ No newline at end of file
diff --git a/src/files-ui/components/drop-layer/utils/dropLayerDynamicStyle.ts b/src/files-ui/components/drop-layer/utils/dropLayerDynamicStyle.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b62a64666873a2603a1d1c37754554ff2fa6712c
--- /dev/null
+++ b/src/files-ui/components/drop-layer/utils/dropLayerDynamicStyle.ts
@@ -0,0 +1,36 @@
+import { asureColor, colourNameToHex, hexColorToRGB } from "../../../core";
+
+export const dropLayerDynamicStyle = (styleId:string, color: string | undefined) => {
+
+ return {
+ id: "files-ui-styles-drop-layer",
+ sheetRules: [
+ {
+ className: `dropzone-ui-layer`,
+ rules: {
+ backgroundColor: hexColorToRGB(
+ asureColor(colourNameToHex(color)),
+ 0.4
+ ),
+ position: "absolute",
+ left: 0,
+ top: 0,
+ width: "0%",
+ height: "0%",
+ border: `2px dashed ${hexColorToRGB(
+ asureColor(colourNameToHex(color)),
+ 1
+ )}`,
+ zIndex: 20,
+ },
+ },
+ {
+ className: `dui-layer-drag`,
+ rules: {
+ width: "100%",
+ height: "100%",
+ },
+ }
+ ],
+ }
+};
\ No newline at end of file
diff --git a/src/files-ui/components/dropzone/DropzoneChildren.tsx b/src/files-ui/components/dropzone/DropzoneChildren.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..48d9b2052fbd0eb1b3bad374ace2c7c9aefe015c
--- /dev/null
+++ b/src/files-ui/components/dropzone/DropzoneChildren.tsx
@@ -0,0 +1,31 @@
+import * as React from "react";
+import {
+ DropzoneLocalizerSelector,
+ Localization,
+ LocalLabels,
+} from "../../core";
+
+declare type DropzoneChildrenProps = {
+ children?: React.ReactNode | [];
+ label?: string;
+ localization?: Localization;
+};
+
+const DropzoneChildren: React.FC<DropzoneChildrenProps> = (
+ props: DropzoneChildrenProps
+) => {
+ const { children, label, localization } = props;
+ const DropzoneLocalizer: LocalLabels =
+ DropzoneLocalizerSelector(localization);
+
+ //children will be always consider as more important
+ if (children) {
+ return <React.Fragment>{children}</React.Fragment>;
+ } else
+ return (
+ <React.Fragment>
+ <label> {label || (DropzoneLocalizer.defaultLabel as string)}</label>
+ </React.Fragment>
+ );
+};
+export default DropzoneChildren;
diff --git a/src/files-ui/components/dropzone/DropzoneRipple.scss b/src/files-ui/components/dropzone/DropzoneRipple.scss
new file mode 100644
index 0000000000000000000000000000000000000000..af9b6cd6b76afd662161ec85805a0019ae5d9700
--- /dev/null
+++ b/src/files-ui/components/dropzone/DropzoneRipple.scss
@@ -0,0 +1,35 @@
+ // RIPPLE
+ .dropzone-ui-base-ripple-absolute {
+ position: absolute;
+ display: none;
+ width: 100%;
+ height: 100%;
+ top: 0;
+ left: 0;
+ box-sizing: border-box;
+ .dropzone-ui-base-ripple-relative {
+ width: 100%;
+ height: 100%;
+ position: relative;
+ overflow: hidden;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ box-sizing: border-box;
+
+ span.ripple {
+ position: absolute;
+ border-radius: 50%;
+ transform: scale(0);
+ animation: ripple 500ms linear;
+ background-color: rgba(255, 255, 255, 0.7);
+ }
+ }
+
+ @keyframes ripple {
+ to {
+ transform: scale(4);
+ opacity: 0;
+ }
+ }
+ }
\ No newline at end of file
diff --git a/src/files-ui/components/dropzone/components/DropzoneButtons/DropzoneButtons.scss b/src/files-ui/components/dropzone/components/DropzoneButtons/DropzoneButtons.scss
new file mode 100644
index 0000000000000000000000000000000000000000..4c00f2ac660f04be1b549ddafc4099a17b2858b6
--- /dev/null
+++ b/src/files-ui/components/dropzone/components/DropzoneButtons/DropzoneButtons.scss
@@ -0,0 +1,12 @@
+.files-ui-buttons-container {
+ width: 100%;
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ align-items: center;
+ justify-content: flex-end;
+ box-sizing: border-box;
+ padding: 10px 0;
+ gap: 10px;
+}
diff --git a/src/files-ui/components/dropzone/components/DropzoneButtons/DropzoneButtons.tsx b/src/files-ui/components/dropzone/components/DropzoneButtons/DropzoneButtons.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..4855ce6c80f5407dcf61151837509f16997d27ca
--- /dev/null
+++ b/src/files-ui/components/dropzone/components/DropzoneButtons/DropzoneButtons.tsx
@@ -0,0 +1,78 @@
+import * as React from "react";
+import { addClassName, Localization } from "../../../../core";
+import { MaterialButton } from "../../../material-button";
+import {
+ DropzoneActionButton,
+ DropzoneActions,
+} from "../dropzone/DropzoneProps";
+import "./DropzoneButtons.scss";
+interface DropzoneButtonsProps extends DropzoneActions {
+ localization?: Localization;
+ onAbort?: Function;
+ onDelete?: Function;
+ onUpload?: Function;
+ onClean?: Function;
+}
+
+const DropzoneButtons: React.FC<DropzoneButtonsProps> = (
+ props: DropzoneButtonsProps
+) => {
+ const {
+ cleanButton,
+ abortButton,
+ className: containerClassName,
+ style: containerStyle,
+ deleteButton,
+ uploadButton,
+ localization,
+ onAbort,
+ onClean,
+ onDelete,
+ onUpload,
+ } = props;
+
+ const actionButtonsList: DropzoneActionButton[] = [
+ cleanButton
+ ? { ...cleanButton, label: "Clean", onClick: onClean }
+ : undefined,
+ deleteButton
+ ? { ...deleteButton, label: "Delete", onClick: onDelete }
+ : undefined,
+ uploadButton
+ ? { ...uploadButton, label: "Upload", onClick: onUpload }
+ : undefined,
+ abortButton
+ ? { ...abortButton, label: "Abort", onClick: onAbort }
+ : undefined,
+ ].filter(
+ (ab: DropzoneActionButton | undefined) => ab !== undefined
+ ) as DropzoneActionButton[];
+
+ const finalClassName = addClassName(
+ "files-ui-buttons-container",
+ containerClassName
+ );
+
+ return (
+ <div className={finalClassName} style={containerStyle}>
+ {actionButtonsList.map(
+ (actionButtonProps: DropzoneActionButton, index: number) => {
+ const { children, label, resetStyles, className, style, onClick } =
+ actionButtonProps;
+ return (
+ <MaterialButton
+ key={index}
+ className={className}
+ style={style}
+ resetStyles={resetStyles}
+ onClick={() => onClick?.()}
+ >
+ {children || label}
+ </MaterialButton>
+ );
+ }
+ )}
+ </div>
+ );
+};
+export default DropzoneButtons;
diff --git a/src/files-ui/components/dropzone/components/DropzoneDisabledLayer/DropzoneDisabledLayer.scss b/src/files-ui/components/dropzone/components/DropzoneDisabledLayer/DropzoneDisabledLayer.scss
new file mode 100644
index 0000000000000000000000000000000000000000..928e3f813b1bd0733f01dba8c6597b53510b4720
--- /dev/null
+++ b/src/files-ui/components/dropzone/components/DropzoneDisabledLayer/DropzoneDisabledLayer.scss
@@ -0,0 +1,6 @@
+.dropzone-ui-disabled-root{
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(0, 0, 0, 0.38);
+}
\ No newline at end of file
diff --git a/src/files-ui/components/dropzone/components/DropzoneDisabledLayer/DropzoneDisabledLayer.tsx b/src/files-ui/components/dropzone/components/DropzoneDisabledLayer/DropzoneDisabledLayer.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..54e8b531831907f6f7b7dc92eab19a4ce16d23b4
--- /dev/null
+++ b/src/files-ui/components/dropzone/components/DropzoneDisabledLayer/DropzoneDisabledLayer.tsx
@@ -0,0 +1,34 @@
+import * as React from "react";
+import { handleClickUtil, handleDragUtil } from "../../../../core";
+import "./DropzoneDisabledLayer.scss";
+export declare type DropzoneDisabledLayerProps = {
+ open?: boolean;
+};
+const DropzoneDisabledLayer: React.FC<DropzoneDisabledLayerProps> = (
+ props: DropzoneDisabledLayerProps
+) => {
+ const { open } = props;
+ function handleClick<T extends HTMLDivElement>(
+ evt: React.MouseEvent<T, MouseEvent>
+ ): void {
+ handleClickUtil(evt);
+ }
+ const handleDrag: React.DragEventHandler<HTMLDivElement> = (
+ evt: React.DragEvent<HTMLDivElement>
+ ) => {
+ handleDragUtil(evt);
+ };
+ if (open) {
+ return (
+ <div
+ className="dropzone-ui-disabled-root"
+ onDrop={handleDrag}
+ onDrag={handleDrag}
+ onClick={handleClick}
+ ></div>
+ );
+ } else {
+ return <></>;
+ }
+};
+export default DropzoneDisabledLayer;
diff --git a/src/files-ui/components/dropzone/components/DropzoneFooter/DropzoneFooter.tsx b/src/files-ui/components/dropzone/components/DropzoneFooter/DropzoneFooter.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..a1f0dc5d732c9e2fd80536aff1e038307e901c26
--- /dev/null
+++ b/src/files-ui/components/dropzone/components/DropzoneFooter/DropzoneFooter.tsx
@@ -0,0 +1,43 @@
+import * as React from "react";
+import {
+ DropzoneLocalizerSelector,
+ FunctionLabel,
+ handleClickUtil,
+ Localization,
+ LocalLabels,
+} from "../../../../core";
+
+export interface DropzoneFooterNeoProps {
+ accept?: string;
+ message?: string;
+ localization?: Localization;
+}
+const DropzoneFooter: React.FC<DropzoneFooterNeoProps> = (
+ props: DropzoneFooterNeoProps
+) => {
+ const { accept, message, localization } = props;
+
+ const DropzoneFooterLocalizer: LocalLabels = DropzoneLocalizerSelector(
+ localization
+ ).footer as LocalLabels;
+ const accepCustomMessenger: FunctionLabel =
+ DropzoneFooterLocalizer.acceptCustom as FunctionLabel;
+
+ function handleClick<T extends HTMLDivElement>(
+ evt: React.MouseEvent<T, MouseEvent>
+ ): void {
+ handleClickUtil(evt);
+ }
+ return (
+ <div className="files-ui-footer" onClick={handleClick}>
+ <>
+ {message
+ ? message
+ : !accept
+ ? DropzoneFooterLocalizer.acceptAll
+ : accepCustomMessenger(accept)}
+ </>
+ </div>
+ );
+};
+export default DropzoneFooter;
diff --git a/src/files-ui/components/dropzone/components/DropzoneHeader/DropzoneHeader.tsx b/src/files-ui/components/dropzone/components/DropzoneHeader/DropzoneHeader.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..919b0750b56964dc630560c3e979ff4976d6e264
--- /dev/null
+++ b/src/files-ui/components/dropzone/components/DropzoneHeader/DropzoneHeader.tsx
@@ -0,0 +1,127 @@
+import * as React from "react";
+import {
+ DropzoneLocalizerSelector,
+ fileSizeFormater,
+ FunctionLabel,
+ Localization,
+ LocalLabels,
+} from "../../../../core";
+import { UploadingProcess, Clean, Cancel, Upload } from "../../../icons";
+
+export interface DropzoneHeaderProps {
+ maxFileSize?: number;
+ numberOfValidFiles?: number;
+ maxFiles?: number;
+ onReset?: Function;
+ onUploadStart?: Function;
+ urlPresent?: boolean;
+ onClean?: Function;
+ isUploading?: boolean;
+ /**
+ * language to be used
+ * for now
+ * only English and Spanish is supported
+ */
+ localization?: Localization;
+}
+
+const DropzoneHeader: React.FC<DropzoneHeaderProps> = (
+ props: DropzoneHeaderProps
+) => {
+ const {
+ maxFileSize,
+ numberOfValidFiles,
+ onReset,
+ onClean,
+ maxFiles,
+ onUploadStart,
+ isUploading,
+ urlPresent,
+ localization,
+ } = props;
+
+ const DropzoneHeaderLocalizer: LocalLabels = DropzoneLocalizerSelector(
+ localization
+ ).header as LocalLabels;
+
+ const handleClean = () => {
+ onClean?.();
+ };
+ const handleStartUploading = () => {
+ onUploadStart?.();
+ };
+ const makeHeader = (): React.ReactNode[] => {
+ let result: React.ReactNode[] = [];
+
+ if (onUploadStart && urlPresent && numberOfValidFiles) {
+ if (isUploading) {
+ result.push(<UploadingProcess spin={true} color="#646c7f" />);
+ } else {
+ result.push(
+ <React.Fragment>
+ <>{DropzoneHeaderLocalizer.uploadFilesMessage}</>
+ <Upload color="#646c7f" onClick={handleStartUploading} />
+ </React.Fragment>
+ );
+ }
+
+ result.push(<React.Fragment>{","} </React.Fragment>);
+ }
+
+ const maxFileSizeMessenger: FunctionLabel =
+ DropzoneHeaderLocalizer.maxSizeMessage as FunctionLabel;
+ if (maxFileSize) {
+ result.push(
+ maxFileSizeMessenger(fileSizeFormater(maxFileSize))
+
+ /* localization === "ES-es"
+ ? `Tam. máximo de archivo ${fileSizeFormater(maxFileSize)} | `
+ : `Max File size: ${fileSizeFormater(maxFileSize)} | `, */
+ );
+ result.push(<React.Fragment>{","} </React.Fragment>);
+ }
+ const validFileSizeMessenger: FunctionLabel =
+ DropzoneHeaderLocalizer.validFilesMessage as FunctionLabel;
+
+ if (maxFiles) {
+ result.push(
+ validFileSizeMessenger(numberOfValidFiles as number, maxFiles)
+ /* localization === "ES-es"
+ ? `Archivos ${numberOfValidFiles}/${maxFiles} | Válidos: ${numberOfValidFiles} | `
+ : `Files ${numberOfValidFiles}/${maxFiles} | Valid: ${numberOfValidFiles} | `, */
+ );
+ result.push(<React.Fragment>{","} </React.Fragment>);
+ }
+ //clean not valid files on click
+ if (onClean) {
+ result.push(
+ <Clean color="#646c7f" onClick={handleClean} size="semi-medium" />
+ );
+ }
+ if (onReset) {
+ result.push(
+ <Cancel
+ color="#646c7f"
+ onClick={() => onReset?.()}
+ // colorFill="rgba(255,255,255,0.8)"
+ />
+ );
+ }
+ return result;
+ };
+ return (
+ <div
+ className="files-ui-header"
+ onClick={(e) => {
+ e.stopPropagation();
+ }}
+ >
+ {makeHeader().map((HeaderItem, index) => (
+ <span key={index} style={{ display: "flex" }}>
+ {HeaderItem}
+ </span>
+ ))}
+ </div>
+ );
+};
+export default DropzoneHeader;
diff --git a/src/files-ui/components/dropzone/components/dropzone/Dropzone.scss b/src/files-ui/components/dropzone/components/dropzone/Dropzone.scss
new file mode 100644
index 0000000000000000000000000000000000000000..69e014cb2aa767ea544c49a26677d1b9ab90edf7
--- /dev/null
+++ b/src/files-ui/components/dropzone/components/dropzone/Dropzone.scss
@@ -0,0 +1,106 @@
+@import url(https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,900);
+
+.fui-dropzone-root {
+ min-height: 180px;
+ width: 100%;
+ min-width: 150px;
+
+ position: relative;
+
+ // DISPLAY
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: row;
+ gap: 0 8px;
+ justify-content: center;
+ align-items: center;
+ padding: 23px 0px;
+
+ /// label
+ color: #646c7f;
+ text-rendering: optimizeLegibility;
+ font-size: 1.5em;
+ font-family: inherit;
+ text-align: center;
+ font-weight: 400;
+ letter-spacing: 0.02857em;
+ box-sizing: border-box;
+
+ @media (max-width: 600px) {
+ font-size: 1.3em;
+ }
+ word-break: normal;
+
+ &.clickable {
+ cursor: pointer;
+ }
+
+ //BORDER
+ /* &.fui-dropzone-border {
+ box-sizing: border-box;
+
+ border: 1px dashed #0c2358;
+ border-radius: 10px;
+ &.fui-hide-border {
+ border: none;
+ }
+ } */
+}
+
+.files-ui-header {
+ height: 22px;
+ position: absolute;
+ cursor: text;
+ top: 0;
+ display: flex;
+ //width: calc(100% - 10px);
+ width: 100%;
+ flex-direction: row;
+ align-items: center;
+ justify-content: flex-end;
+ //font-family: "Poppins", sans-serif;
+ font-family: inherit;
+ padding-right: 10px;
+ font-size: 1rem;
+ @media (max-width: 960px) {
+ width: calc(100% - 1px);
+ padding-right: 1px;
+ font-size: 0.8rem;
+ }
+}
+
+.files-ui-footer {
+ border-bottom-left-radius: 8px;
+ border-bottom-right-radius: 8px;
+ box-sizing: border-box;
+ height: 23px;
+ position: absolute;
+ cursor: text;
+ bottom: 0;
+ left: 0;
+ // width: calc(100% - 10px);
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ justify-content: center;
+ border-top: 1px dotted grey;
+ background-color: #80808021;
+ font-family: "Poppins", sans-serif;
+ font-family: inherit;
+ padding-left: 10px;
+ font-size: 1rem;
+ ////3 dots break in 1 lines
+ //overflow: hidden;
+ text-overflow: ellipsis;
+ display: -webkit-box;
+ -webkit-line-clamp: 1; /* number of lines to show */
+ line-clamp: 1;
+ -webkit-box-orient: vertical;
+
+ @media (max-width: 960px) {
+ width: calc(100% - 1px);
+ padding-left: 1px;
+ font-size: 0.8rem;
+ }
+}
diff --git a/src/files-ui/components/dropzone/components/dropzone/Dropzone.tsx b/src/files-ui/components/dropzone/components/dropzone/Dropzone.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..ca99d18e3a7678189ea696163d92513f4435ad29
--- /dev/null
+++ b/src/files-ui/components/dropzone/components/dropzone/Dropzone.tsx
@@ -0,0 +1,741 @@
+import * as React from "react";
+import {
+ DropzoneLocalizerSelector,
+ ExtFile,
+ fileListToExtFileArray,
+ LocalLabels,
+ validateExtFileList,
+ FileValidatorProps,
+ isValidateActive,
+ handleClickInput,
+ handleDragUtil,
+ createFuiRippleFromDiv,
+ handleDropUtil,
+ UploadConfig,
+ ExtFileInstance,
+ FunctionLabel,
+ ExtFileManager,
+ sleepPreparing,
+ UploadResponse,
+ instantPreparingToUploadOne,
+ fakeFuiUpload,
+ uploadOnePromiseXHR,
+ sleepTransition,
+ toUploadableExtFileList,
+ cleanInput,
+} from "../../../../core";
+import { mergeProps } from "../../../overridable";
+import InputHidden from "../../../input-hidden/InputHidden";
+import {
+ defaultDrozoneProps,
+ DropzoneActionButton,
+ DropzoneActions,
+ DropzoneProps,
+} from "./DropzoneProps";
+import DropzoneChildren from "./../../DropzoneChildren";
+import useDropzoneClassName from "./../../useDropzoneClassName";
+import DropzoneDisabledLayer from "../DropzoneDisabledLayer/DropzoneDisabledLayer";
+
+import "./Dropzone.scss";
+import "./../../DropzoneRipple.scss";
+import useDropLayerClassName from "../../../drop-layer/hooks/useDropLayerClassName";
+import DropLayer from "../../../drop-layer/components/DropLayer";
+import useDropzoneFileListUpdater from "../../../../hooks/useDropzoneFileUpdater";
+import DropzoneHeader from "../DropzoneHeader/DropzoneHeader";
+import DropzoneFooter from "../DropzoneFooter/DropzoneFooter";
+import DropzoneButtons from "../DropzoneButtons/DropzoneButtons";
+
+import { print_manager } from "../../../../../utils";
+
+const Dropzone: React.FC<DropzoneProps> = (props: DropzoneProps) => {
+ const {
+ accept,
+ behaviour,
+ children,
+ className,
+ clickable,
+ color,
+ disabled,
+ dropOnLayer,
+ label,
+ localization,
+ maxFileSize,
+ maxFiles,
+ onChange,
+ onDragEnter,
+ onDragLeave,
+ style,
+ textColor,
+ validator,
+ value,
+ uploadConfig,
+ backgroundColor,
+ disableRipple,
+ fakeUpload,
+ footer,
+ header,
+ minHeight,
+ cleanFiles,
+ onClean,
+ autoClean,
+ onUploadStart,
+ onUploadFinish,
+ actionButtons,
+ headerConfig,
+ footerConfg,
+ //advancedConfig,
+ ...rest
+ } = mergeProps(props, defaultDrozoneProps);
+ console.log("Dropzone props", children);
+ const {
+ url,
+ method,
+ headers,
+ uploadLabel,
+ cleanOnUpload = true,
+ preparingTime = 1500,
+ autoUpload = false,
+ } = uploadConfig as UploadConfig;
+
+ const {
+ position: actionButtonsPosition,
+ abortButton,
+ deleteButton,
+ uploadButton,
+ cleanButton,
+ style: containerStyle,
+ className: containerClassName,
+ } = actionButtons as DropzoneActions;
+ //console.log("Dropzone props", dropOnLayer);
+ //localizers
+ const DropzoneLocalizer: LocalLabels =
+ DropzoneLocalizerSelector(localization);
+
+ //ref to handle ripple
+ const fuiRippleRefAbs = React.useRef<HTMLDivElement>(null);
+ const fuiRippleRefRel = React.useRef<HTMLDivElement>(null);
+ //ref to the hidden input tag
+ const inputRef = React.useRef<HTMLInputElement>(null);
+ //state for drag operation
+ const [isDragging, setIsDragging] = React.useState<boolean>(false);
+ //state for checking upload start
+ const [isUploading, setIsUploading] = React.useState<boolean>(false);
+ //state for message on footer
+ const [localMessage, setLocalMessage] = React.useState<string>("");
+ //Id for uploding through FuiFileManager
+ //const dropzoneId: string | number = useDropzoneFileListID();
+ const dropzoneId: string | number = React.useId();
+ //React.useId();
+ //Flag that determines whether to validate or not
+ const validateFilesFlag: boolean = isValidateActive(
+ accept,
+ maxFileSize,
+ maxFiles,
+ validator
+ );
+ //state for managing the number of valid files
+ //state for managing the files locally
+ const [localFiles, numberOfValidFiles, setLocalFiles]: [
+ ExtFile[],
+ number,
+ React.Dispatch<React.SetStateAction<ExtFile[]>>
+ ] = useDropzoneFileListUpdater(
+ dropzoneId,
+ value || [],
+ isUploading,
+ maxFileSize,
+ accept,
+ maxFiles,
+ validator,
+ localization,
+ validateFilesFlag
+ );
+
+ /**
+ * Uploads each file in the array of ExtFiles
+ * First, sets all the files in preparing status and awaits `preparingTime` miliseconds.
+ * If `preparingTime` is not given or its value is false or 0, there won´t be a preparing phase.
+ * Then onChange event will be called to update the files outside.
+ * If `onCancel` event ocurrs outside on any on the
+ * FileItems(e.g. by clicking the cancel button on `FileItem`),
+ * the extFileInstance will change its status from 'preparing' to undefined. If so,
+ * after the waiting time the value of status will be found as undefined and
+ * won´t perfom the upload for that file or any other that fits that condition.
+ * Then, for each file sets the file in 'uploading' status.
+ * Then onChange event will be called to update the files outside.
+ * Then uploads the file with the `xhr` instance.
+ * After that, that file recieves the new uploadStatus that can be
+ * 'success', 'error' or 'aborted'
+ * and onChange event will be called to update the files outside.
+ * @param localFiles the list of extFiles to upload
+ * @returns nothing
+ */
+ const uploadfiles = async (localFiles: ExtFile[]): Promise<void> => {
+ setIsUploading(true);
+ console.log("upload start:", localFiles, url);
+ // set flag to true
+ // recieve on the new list
+ // initialize new list of ExtFileInstances
+ let arrOfExtFilesInstances: ExtFileInstance[] = [];
+ //avoid to call upload if not allowed
+ if (isUploading || localFiles.length === 0 || !arrOfExtFilesInstances) {
+ setIsUploading(false);
+ return;
+ }
+
+ const totalNumber: number = localFiles.length;
+ console.log("upload start: totalNumber", totalNumber);
+
+ const missingUpload: number = localFiles.filter((x: ExtFile) => {
+ return (
+ (!validateFilesFlag || (validateFilesFlag && x.valid)) &&
+ x.uploadStatus !== "success"
+ );
+ }).length;
+ console.log("upload start: missingUpload", missingUpload);
+
+ let totalRejected: number = 0;
+ let currentCountUpload: number = 0;
+
+ const uploadingMessenger: FunctionLabel =
+ DropzoneLocalizer.uploadingMessage as FunctionLabel;
+
+ if (!(missingUpload > 0 && url)) {
+ console.log("upload start: noFilesMessage", missingUpload);
+
+ setLocalMessage(DropzoneLocalizer.noFilesMessage as string);
+ setIsUploading(false);
+ return;
+ }
+
+ setLocalMessage(uploadingMessenger(`${missingUpload}/${totalNumber}`));
+ // setIsUploading(true);
+ //PREPARING stage
+ //use methods to update on static class
+ //obtain a fresher dui file list
+ console.log("***** before setFileListMapPreparing");
+ console.table(localFiles);
+ arrOfExtFilesInstances =
+ ExtFileManager.setFileListMapPreparing(
+ dropzoneId,
+ localFiles,
+ validateFilesFlag as boolean,
+ cleanOnUpload as boolean
+ ) || [];
+
+ console.log("***** FileManagerLog setFileListMapPreparing");
+ console.table(arrOfExtFilesInstances);
+ const newExtFileLocal: ExtFile[] = [...arrOfExtFilesInstances].map((x) =>
+ x.toExtFile()
+ );
+
+ console.log(
+ "FileManagerLog after setFileListMapPreparing",
+ arrOfExtFilesInstances
+ );
+
+ //CHANGE (o alejo el isUploading o lo alejo para que tenga m,as tiempo antes de la respuyesta)
+ // setIsUploading(true);
+ handleFilesChange(newExtFileLocal, true);
+
+ console.log("FileManagerLog before sleep", arrOfExtFilesInstances);
+ //AWAIT when preparing time is given
+ //general sleep for all files
+ await sleepPreparing(preparingTime);
+ // workaround for preventing getting the uploadStatus as undefined
+ /* arrOfExtFilesInstances.forEach((F) => {
+ F.uploadStatus = "preparing";
+ }); */
+ //variable for storing responses
+ //console.log("uploadfiles after sleep response",response);
+ console.log("FileManagerLog after sleep", arrOfExtFilesInstances);
+
+ //return;
+ let serverResponses: Array<UploadResponse> = [];
+
+ for (let i = 0; i < arrOfExtFilesInstances.length; i++) {
+ const currentExtFileInstance: ExtFileInstance = arrOfExtFilesInstances[i];
+ console.log(
+ "FileManagerLog currentExtFileInstance " + i,
+ currentExtFileInstance
+ );
+
+ if (currentExtFileInstance.uploadStatus === "preparing") {
+ //set stage to "uploading" in one file and notify change
+ // PREPARING => UPLOADING
+ instantPreparingToUploadOne(currentExtFileInstance);
+ setLocalMessage(
+ uploadingMessenger(`${++currentCountUpload}/${missingUpload}`)
+ );
+ //CHANGE
+ handleFilesChange([...arrOfExtFilesInstances], true);
+
+ //UPLOADING => UPLOAD()
+ //upload one file and notify about change
+ const uploadResponse: UploadResponse = fakeUpload
+ ? await fakeFuiUpload(currentExtFileInstance, DropzoneLocalizer)
+ : await uploadOnePromiseXHR(
+ currentExtFileInstance,
+ url,
+ method,
+ headers,
+ uploadLabel
+ );
+
+ const { uploadedFile } = uploadResponse;
+ //update instances
+ currentExtFileInstance.uploadStatus = uploadedFile.uploadStatus;
+ currentExtFileInstance.uploadMessage = uploadedFile.uploadMessage;
+
+ //add fake progress only on fakeupload
+ if (fakeUpload) {
+ console.log("Adding fake progress", fakeUpload, uploadedFile.progress);
+ currentExtFileInstance.progress = uploadedFile.progress;
+ }
+ //CHANGE
+ if (!(currentExtFileInstance.uploadStatus === "aborted"))
+ await sleepTransition();
+
+ handleFilesChange(
+ arrOfExtFilesInstances.map((x: ExtFileInstance) => x.toExtFile()),
+ true
+ );
+
+ if (uploadedFile.uploadStatus === "error") {
+ totalRejected++;
+ }
+
+ serverResponses.push(uploadResponse);
+ }
+ }
+
+ /* arrOfExtFilesInstances.forEach(async (currentExtFileInstance) => {
+ console.log("FileManagerLog current", currentExtFileInstance);
+ if (currentExtFileInstance.uploadStatus === "preparing") {
+ //set stage to "uploading" in one file and notify change
+ // PREPARING => UPLOADING
+ await instantPreparingToUploadOne(currentExtFileInstance);
+ setLocalMessage(
+ uploadingMessenger(`${++currentCountUpload}/${missingUpload}`)
+ );
+ //CHANGE
+ handleFilesChange([...arrOfExtFilesInstances], true);
+
+ //UPLOADING => UPLOAD()
+ //upload one file and notify about change
+ const uploadResponse: UploadResponse = fakeUpload
+ ? await fakeFuiUpload(currentExtFileInstance, DropzoneLocalizer)
+ : await uploadOnePromiseXHR(
+ currentExtFileInstance,
+ url,
+ method,
+ headers,
+ uploadLabel
+ );
+
+ const { uploadedFile } = uploadResponse;
+ //update instances
+ currentExtFileInstance.uploadStatus = uploadedFile.uploadStatus;
+ currentExtFileInstance.uploadMessage = uploadedFile.uploadMessage;
+ //CHNAGE
+ if (!(currentExtFileInstance.uploadStatus === "aborted"))
+ await sleepTransition();
+ handleFilesChange(
+ arrOfExtFilesInstances.map((x: ExtFileInstance) => x.toExtFile()),
+ true
+ );
+ if (uploadedFile.uploadStatus === "error") {
+ totalRejected++;
+ }
+
+ serverResponses.push(uploadResponse);
+ }
+ }); */
+
+ /* for (let i = 0; i < arrOfExtFilesInstances.length; i++) {
+ console.log("FileManagerLog current", arrOfExtFilesInstances[i]);
+ //all missing filesalways have "preparing" as uploadStatus prop
+ if (arrOfExtFilesInstances[i].uploadStatus === "preparing") {
+ //set stage to "uploading" in one file and notify change
+ // PREPARING => UPLOADING
+ await instantPreparingToUploadOne(arrOfExtFilesInstances[i]);
+ setLocalMessage(
+ uploadingMessenger(`${++currentCountUpload}/${missingUpload}`)
+ );
+ //CHANGE
+ handleFilesChange([...arrOfExtFilesInstances], true);
+
+ //UPLOADING => UPLOAD()
+ //upload one file and notify about change
+ const uploadResponse: UploadResponse = fakeUpload
+ ? await fakeFuiUpload(arrOfExtFilesInstances[i], DropzoneLocalizer)
+ : await uploadOnePromiseXHR(
+ arrOfExtFilesInstances[i],
+ url,
+ method,
+ headers,
+ uploadLabel
+ );
+
+ const { uploadedFile } = uploadResponse;
+ //update instances
+ arrOfExtFilesInstances[i].uploadStatus = uploadedFile.uploadStatus;
+ arrOfExtFilesInstances[i].uploadMessage = uploadedFile.uploadMessage;
+ //CHNAGE
+ if (!(arrOfExtFilesInstances[i].uploadStatus === "aborted"))
+ await sleepTransition();
+ handleFilesChange(
+ arrOfExtFilesInstances.map((x: ExtFileInstance) => x.toExtFile()),
+ true
+ );
+ if (uploadedFile.uploadStatus === "error") {
+ totalRejected++;
+ }
+
+ serverResponses.push(uploadResponse);
+ }
+ } */
+ // upload group finished :D
+ onUploadFinish?.(serverResponses);
+ const finishUploadMessenger: FunctionLabel =
+ DropzoneLocalizer.uploadFinished as FunctionLabel;
+ setLocalMessage(
+ finishUploadMessenger(missingUpload - totalRejected, totalRejected)
+ );
+ setIsUploading(false);
+ };
+
+ const handleAbortUpload = () => {
+ const listExtFileLocal: ExtFileInstance[] | undefined =
+ ExtFileManager.getExtFileInstanceList(dropzoneId);
+ if (!listExtFileLocal) return;
+ listExtFileLocal.forEach((extFile) => {
+ extFile.xhr?.abort();
+ });
+ };
+ // the current number of valid files
+ // update number of valid files
+ /* const numberOfValidFiles: number = useNumberOfValidFiles(
+ localFiles,
+ validateFilesFlag
+ ); */
+
+ //the final className
+ const dropzoneClassName: string | undefined = useDropzoneClassName(
+ className,
+ isDragging,
+ header,
+ footer,
+ color,
+ backgroundColor,
+ minHeight
+ );
+
+ const dropLayerClassName: string = useDropLayerClassName(
+ color as string,
+ isDragging,
+ !onDragEnter && !onDragLeave
+ );
+
+ React.useEffect(() => {
+ const localValidator: FileValidatorProps = { maxFileSize, accept };
+
+ const validatedFuiFileList: ExtFile[] = validateExtFileList(
+ localFiles,
+ maxFiles ? maxFiles - numberOfValidFiles : Infinity,
+ localValidator,
+ validator,
+ maxFiles,
+ localization
+ );
+
+ setLocalFiles(validatedFuiFileList);
+ }, [maxFileSize, accept, maxFiles, localization]);
+
+ /**
+ * Performs the changes in the FuiFile list.
+ * Makes a new array of FuiFiles according to the "behaviour" prop.
+ * If isUploading state is not true and the behaviour props is equal to "add",
+ * the incoming extFileList is added at the end of the current list of fuiFiles.
+ * Otherwise, the complete fuiFile list replaced by the incomming fuiFileList
+ * @param extFileList the new fileList
+ * @param isUploading a flag that dscribes whther the uploading process is active or not
+ */
+ const handleFilesChange = (
+ extFileList: ExtFile[],
+ isUploading?: boolean
+ ): void => {
+ console.log(
+ "handleFilesChange",
+ extFileList.map((F) => F.uploadStatus)
+ );
+ let finalExtFileList: ExtFile[] =
+ behaviour === "add" && !isUploading
+ ? [...localFiles, ...extFileList]
+ : [...extFileList];
+ if (onChange) {
+ onChange(finalExtFileList);
+ } else {
+ setLocalFiles(finalExtFileList);
+ }
+ if (autoUpload && !isUploading) {
+ console.log("autoUpload", finalExtFileList);
+ uploadfiles(finalExtFileList);
+ }
+ };
+
+ /**
+ * Performs the action of recieving the files when user selects the files
+ * by clicking the InputButton
+ * @param evt event handler for getting files from input element target
+ */
+ const handleChangeInput: React.ChangeEventHandler<HTMLInputElement> = (
+ evt: React.ChangeEvent<HTMLInputElement>
+ ): void => {
+ //if (isUploading) return;
+ let fileList: FileList = evt.target.files as FileList;
+ let extFileListOutput: ExtFile[] = fileListToExtFileArray(fileList);
+ //validate dui files
+ if (validateFilesFlag) {
+ extFileListOutput = outerFuiValidation(extFileListOutput);
+ if (autoClean) {
+ extFileListOutput = extFileListOutput.filter((f) => f.valid);
+ }
+ }
+ //init xhr on each dui file
+ if (url) extFileListOutput = toUploadableExtFileList(extFileListOutput);
+
+ // Clean input element to trigger onChange event on input
+ cleanInput(inputRef.current);
+
+ handleFilesChange(extFileListOutput);
+ };
+
+ /**
+ * Performs the validation process for each FuiFile
+ * outside the DropzoneNeo component file declaration
+ * according to the criteria given by maxFiles and maxFileSize and accept props
+ * This function calls validateFuiFileList and sets the valid prop of FuiFile to "true" or "false"
+ * depending on the result of the individual validation.
+ * It also add the list of errors.
+ * @param fuiFileListToValidate the fuiFileList to validate
+ * @returns a list of validated FuiFile list
+ */
+ const outerFuiValidation = (fuiFileListToValidate: ExtFile[]): ExtFile[] => {
+ const localValidator: FileValidatorProps = { maxFileSize, accept };
+ console.log("validatedFuiFileList pre", fuiFileListToValidate);
+
+ let finalNumberOfValids: number = numberOfValidFiles;
+ if (behaviour === "replace") {
+ //re-start number of valids
+ finalNumberOfValids = 0;
+ }
+
+ const validatedFuiFileList: ExtFile[] = validateExtFileList(
+ fuiFileListToValidate,
+ maxFiles ? maxFiles - finalNumberOfValids : Infinity,
+ localValidator,
+ validator,
+ maxFiles,
+ localization
+ );
+ console.log("validatedFuiFileList aft", validatedFuiFileList);
+ return validatedFuiFileList;
+ };
+
+ // HANDLERS for CLICK, DRAG NAD DROP
+ function handleClick(): void {
+ //handleClickUtil(evt);
+ if (!clickable) return;
+ makeRipple();
+ handleClickInput(inputRef.current);
+ }
+ const handleDragEnter: React.DragEventHandler<HTMLDivElement> = (
+ evt: React.DragEvent<HTMLDivElement>
+ ) => {
+ handleDragUtil(evt);
+ setIsDragging(true);
+ //console.log("handleDragEnter");
+ };
+ const handleDragLeave: React.DragEventHandler<HTMLDivElement> = (
+ evt: React.DragEvent<HTMLDivElement>
+ ) => {
+ handleDragUtil(evt);
+ setIsDragging(false);
+ };
+ // RIPPLE
+ /**
+ * Creates a ripple in the middle of the main container
+ */
+ const makeRipple = (): void => {
+ createFuiRippleFromDiv(
+ fuiRippleRefAbs.current,
+ fuiRippleRefRel.current,
+ color as string
+ );
+ };
+
+ // KAMUI => RECIEVE FILES FROM DROP OR INPUT( CLICK ), VALIDATE AND CHANGE
+
+ /**
+ * Performs the action of recieving the files when user drops the files
+ * in the Dropzone container.
+ * According to the given config from props, this function could
+ * validate files and also start the uploading phase
+ * @param evt even handler for getting files from dataTransfer
+ */
+ const kamui: React.DragEventHandler<HTMLDivElement> = async (
+ evt: React.DragEvent<HTMLDivElement>
+ ): Promise<void> => {
+ handleDropUtil(evt);
+ if (!disableRipple) makeRipple();
+ setIsDragging(false);
+
+ if (isUploading) return;
+
+ let fileList: FileList = evt.dataTransfer.files;
+
+ let extFileListOutput: ExtFile[] = fileListToExtFileArray(fileList);
+
+ //validate extended files
+ if (validateFilesFlag) {
+ extFileListOutput = outerFuiValidation(extFileListOutput);
+ if (autoClean) {
+ extFileListOutput = extFileListOutput.filter((f) => f.valid);
+ }
+ }
+
+ //init xhr on each dui file
+ if (url) extFileListOutput = toUploadableExtFileList(extFileListOutput);
+
+ handleFilesChange(extFileListOutput);
+ };
+
+ /************* HEADER & FOOTER ******** */
+ /**
+ * reset the complete file list
+ */
+ const handleReset = (): void => {
+ if (onChange) {
+ onChange([]);
+ } else {
+ setLocalFiles([]);
+ }
+ };
+ const handleClean = (): void => {
+ if (onClean) {
+ onClean();
+ } else if (onChange) {
+ onChange(localFiles.filter((f) => f.valid));
+ } else {
+ setLocalFiles(localFiles.filter((f) => f.valid));
+ }
+ };
+
+ const DropzoneActionButtons = ({ visible = true }) => {
+ if (!visible) return <></>;
+ else
+ return (
+ <DropzoneButtons
+ abortButton={isUploading ? abortButton : undefined}
+ onAbort={handleAbortUpload}
+ deleteButton={deleteButton}
+ onDelete={!isUploading ? handleReset : undefined}
+ uploadButton={!isUploading && !autoUpload ? uploadButton : undefined}
+ onUpload={!autoUpload ? () => uploadfiles(localFiles) : undefined}
+ cleanButton={
+ validateFilesFlag && !isUploading && !autoClean
+ ? cleanButton
+ : undefined
+ }
+ onClean={handleClean}
+ style={containerStyle}
+ className={containerClassName}
+ />
+ );
+ };
+ if (!dropzoneClassName) return <></>;
+ return (
+ <React.Fragment>
+ <DropzoneActionButtons visible={actionButtonsPosition === "top"} />
+ <div
+ style={style}
+ className={dropzoneClassName}
+ {...rest}
+ onClick={handleClick}
+ onDragOver={handleDragEnter}
+ onDragLeave={!dropOnLayer ? handleDragLeave : undefined}
+ onDrop={!dropOnLayer ? kamui : undefined}
+ >
+ {!disableRipple && (
+ <div
+ ref={fuiRippleRefAbs}
+ className="dropzone-ui-base-ripple-absolute"
+ >
+ <div
+ ref={fuiRippleRefRel}
+ className="dropzone-ui-base-ripple-relative"
+ ></div>
+ </div>
+ )}
+
+ {header && (
+ <DropzoneHeader
+ onReset={!isUploading ? handleReset : undefined}
+ maxFileSize={maxFileSize}
+ maxFiles={maxFiles}
+ localization={localization}
+ urlPresent={url !== undefined}
+ onUploadStart={
+ !autoUpload && !uploadButton
+ ? () => uploadfiles(localFiles)
+ : undefined
+ }
+ numberOfValidFiles={numberOfValidFiles}
+ //onClean={autoClean ? undefined : cleanButton ? undefined : onClean}
+ onClean={
+ isUploading || cleanButton || autoClean
+ ? undefined
+ : (cleanFiles || onClean) && validateFilesFlag
+ ? handleClean
+ : undefined
+ }
+ />
+ )}
+
+ <DropzoneChildren label={label} localization={localization}>
+ {children}
+ </DropzoneChildren>
+
+ {footer && (
+ <DropzoneFooter
+ accept={accept}
+ message={isUploading ? localMessage : undefined}
+ localization={localization}
+ />
+ )}
+
+ {dropOnLayer && (
+ <DropLayer
+ open={isDragging}
+ className={dropLayerClassName}
+ onDragLeave={handleDragLeave}
+ onDrop={kamui}
+ />
+ )}
+
+ <InputHidden
+ multiple={maxFiles ? maxFiles > 1 : true}
+ accept={accept || ""}
+ inputRef={inputRef}
+ onChange={handleChangeInput}
+ />
+
+ <DropzoneDisabledLayer open={disabled} />
+ </div>
+
+ <DropzoneActionButtons visible={actionButtonsPosition === "bottom"} />
+ </React.Fragment>
+ );
+};
+export default Dropzone;
diff --git a/src/files-ui/components/dropzone/components/dropzone/DropzoneProps.ts b/src/files-ui/components/dropzone/components/dropzone/DropzoneProps.ts
new file mode 100644
index 0000000000000000000000000000000000000000..417b0a361895a2592004ca8512e8a31e4c804e7d
--- /dev/null
+++ b/src/files-ui/components/dropzone/components/dropzone/DropzoneProps.ts
@@ -0,0 +1,309 @@
+import { ExtFile, CustomValidateFileResponse, Localization, UploadConfig, UploadResponse } from "../../../../core";
+
+import * as React from "react";
+import { OverridableComponentProps } from "../../../overridable";
+
+
+export interface DropzoneFullProps extends OverridableComponentProps {
+ /**
+ * Probably one of the most important methods (callbacks).
+ * `onChange()` returns as first parameter an array of `ExtFile` objects,
+ * with at least the following structure:
+ *
+ * ```jsx
+ * export type ExtFile =
+ * {
+ * id: number | string | undefined;
+ * file: File;
+ * valid: boolean;
+ * errors?: string[];
+ * uploadMessage?: string;
+ * uploadStatus?: undefined | "uploading", "success", "error";
+ * }
+ * ```
+ * This event is triggered when upload starts and when upload
+ * finishes for each file in order to update the props on each ExtFile
+ */
+ onChange?: (files: ExtFile[]) => void;
+ /**
+ * Just like any other input component.
+ * The value of the input element, required for a controlled component.
+ */
+ value?: ExtFile[];
+
+ /////////////// STYLING ///////////
+ /**
+ * The background color for dropzone container,
+ * @default 'transparent'
+ */
+ backgroundColor?: string;
+ /**
+ * The min height of the container in string format
+ * If the value is given un number format "px" will be assumed
+ * @default "190px"
+ *
+ * examples:
+ * "50vh"
+ * "20%"
+ * "40em"
+ * "1rem"
+ */
+ minHeight?: string | number;
+ /////////////// DISPLAY SETTINGS ///////////
+ /**
+ * If false, hides the dropzone footer
+ * By default is true
+ */
+ footer?: boolean;
+ /**
+ * If false, hides the dropzone header
+ * By default is true
+ */
+ header?: boolean;
+ /**
+ * The label to place when no files were selected
+ */
+ label?: string;
+ /**
+ * The language to be used in Dropzone labels
+ * Currently only English, French , Portuguese, Chinnese (traditional and simplyfied), Russian and Spanish are supported
+ * @default "EN-en"
+ */
+ localization?: Localization;
+ /**
+ * If true, will show a ripple everytime
+ * the user drops files or selects files
+ */
+ disableRipple?: boolean;
+ /////////////// VALIDATION STAGE ///////////////
+ /**
+ * The max file size allowed in bytes
+ */
+ maxFileSize?: number;
+ /**
+ * The max number of files to be accepted.
+ */
+ maxFiles?: number;
+ /**
+ * The default implementation of accept
+ * checks the file's mime type or extension
+ * against this list. This is a comma
+ * separated list of mime types or file extensions.
+ * E.g.:
+ * ```js
+ * acccept="image/*, application/pdf, .psd"
+ * ```
+ */
+ accept?: string;
+ /**
+ * The custom validator to validate files that are selected or dropped in dropzone compoent.
+ * Must be a function that recieves as first parameter a File Object
+ * and must return a boolean value
+ * ```jsx
+ * export type CustomValidateFileResponse = {
+ * valid: boolean;
+ * errors?: string[] | undefined;
+ * }
+ * ```
+ */
+ validator?: (f: File) => CustomValidateFileResponse;
+ /**
+ * When given, "clean" button will be visible if validation is active.
+ * This event is triggered when "clean button is clicked"
+ * Returns as first parameter the list of files without not valid files
+ */
+ onClean?: Function;
+ /**
+ * Flag that indicates that dropzone will automatically remove non valid files.
+ * This will happen every time user drops files or selects files from file dialog.
+ * This flag will only work if validation is active.
+ */
+ autoClean?: boolean;
+ /**
+ * When given, "clean" button will be visible and
+ * every time user clicks the buttom it will trigger the default "clean operation":
+ * Remove non valid files.
+ * This flag will only work if validation is active.
+ */
+ cleanFiles?: boolean;
+ ///////// INPUT
+ /**
+ * If true, the dropzone component itself will be clickable
+ * If false, the file dialog will not be opened
+ * @default true
+ */
+ clickable?: boolean;
+ /**
+ * The behaviour when new files are selected or dropped
+ * @default 'add'
+ */
+ behaviour?: 'add' | 'replace';
+ /**
+ * If `true`, the component is disabled.
+ * @default false
+ */
+ disabled?: boolean;
+ /**
+ * If `true`, the drop operation will be performed in a layer that covers the complete component container.
+ * @default true
+ */
+ dropOnLayer?: boolean;
+ /**
+ * Method for performing specific tasks on drag enter operations
+ */
+ onDragEnter?: (evt: React.DragEvent<HTMLDivElement>) => void;
+ /**
+ * Method for performing specific tasks on drag leave operations
+ */
+ onDragLeave?: (evt: React.DragEvent<HTMLDivElement>) => void;
+
+
+ /////////////// UPLOAD STAGE ///////////////
+ /**
+ * The configuration needed for uploading the files.
+ * When "uploadConfig" is not given or uploadConfig.url is undefined
+ * the upload button will not be visible
+ * and uploadOnDrop flag will not work
+ */
+ uploadConfig?: UploadConfig;
+ /**
+ * Flag that indicates Dropzone to perform a fake upload process.
+ * If given or true, will ignore `uploadConfig` prop, will show
+ * the upload button
+ * Will respond with random upload status on every uploadable file
+ */
+ fakeUpload?: boolean;
+ /**
+ * This event is triggered when upload process starts
+ * also returns the list of files that will be uploaded,
+ * Unlike Onchange, onUploadStart will only return a list of files thta are candidates to be uploaded,
+ * in case they are valid or upload status is "error"
+ */
+ onUploadStart?: (files: ExtFile[]) => void;
+ /**
+ * This event returns as first aparameter the list of responses for each file following the structure:
+ * responses = [
+ * {id: <the file id>, serverResponse: the server response}
+ * ]
+ */
+ onUploadFinish?: (responses: UploadResponse[]) => void;
+
+
+ /**
+ * The configuration needed for uploading the files.
+ * When "uploadConfig" is not given or uploadConfig.url is undefined
+ * the upload button will not be visible
+ * and uploadOnDrop flag will not work
+ */
+ actionButtons?: DropzoneActions;
+
+ //advancedConfig?: DropzoneAdvancedConfig;
+
+ headerConfig?: HeaderConfig;
+
+ footerConfg?: FooterConfig;
+}
+export type HeaderItems = {
+ deleteFiles?: boolean;
+ cleanFiles?: boolean;
+ uploadFiles?: boolean;
+ uploading?: boolean;
+ maxFileSize?: boolean;
+ validFilesCount?: boolean;
+}
+
+
+export interface HeaderConfigMap extends OverridableComponentProps {
+ customHeader?: JSX.Element;
+}
+
+export type HeaderConfig =
+ {
+ [P in keyof HeaderConfigMap]: HeaderConfigMap[P]
+ } & {
+ [H in keyof HeaderItems]: HeaderItems[H]
+ }
+
+
+
+export interface FooterConfigMap extends OverridableComponentProps {
+ customFooter?: JSX.Element;
+}
+export type FooterItems = {
+ /**
+ * Allowed types: .png,image/*
+ */
+ allowedTypesLabel?: boolean;
+ /**
+ *
+ */
+ uploadProgressMessage?: boolean;
+ /**
+ *
+ */
+ uploadResultMessage?: boolean;
+ /**
+ *
+ */
+ noMissingFilesLabel?: boolean;
+}
+
+export type FooterConfig =
+ {
+ [P in keyof FooterConfigMap]: FooterConfigMap[P]
+ } & {
+ [H in keyof FooterItems]: FooterItems[H]
+ }
+
+
+export type DropzoneActionButton = {
+ children: React.ReactNode;
+ label: string;
+ style?: React.CSSProperties;
+ className?: string;
+ resetStyles: boolean;
+ onClick?:Function;
+}
+
+export interface DropzoneActions {
+ position?: "top" | "bottom";
+ style?: React.CSSProperties;
+ className?: string;
+ uploadButton?: DropzoneActionButton;
+ abortButton?: DropzoneActionButton;
+ deleteButton?: DropzoneActionButton;
+ cleanButton?: DropzoneActionButton;
+}
+
+
+export interface AdvancedConfigItem {
+ style?: React.CSSProperties;
+ className?: string;
+}
+
+export type DropzoneAdvancedConfig = {
+ dropzoneLayer: any;
+ dropzoneContainer: any;
+ dropzoneLabel: any;
+}
+
+export declare type DropzoneProps =
+ /* {
+ [D in keyof React.HTMLAttributes<HTMLDivElement>]: React.HTMLAttributes<HTMLDivElement>[D]
+ } & */
+ {
+ [D in keyof DropzoneFullProps]: DropzoneFullProps[D]
+ }
+
+
+export const defaultDrozoneProps: DropzoneProps =
+{
+ clickable: true,
+ behaviour: "add",
+ disabled: false,
+ dropOnLayer: true,
+ uploadConfig: {},
+ actionButtons: {},
+ header: true,
+ footer: true
+}
\ No newline at end of file
diff --git a/src/files-ui/components/dropzone/index.ts b/src/files-ui/components/dropzone/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..507134acf213a338b86c8b13e69589427eefb222
--- /dev/null
+++ b/src/files-ui/components/dropzone/index.ts
@@ -0,0 +1,2 @@
+export { default as Dropzone } from "./components/dropzone/Dropzone";
+export * from "./components/dropzone/Dropzone";
\ No newline at end of file
diff --git a/src/files-ui/components/dropzone/makeListOfActionButtons.ts b/src/files-ui/components/dropzone/makeListOfActionButtons.ts
new file mode 100644
index 0000000000000000000000000000000000000000..bb53906aab9eee7abdb2efd3a8318c101abe2d0a
--- /dev/null
+++ b/src/files-ui/components/dropzone/makeListOfActionButtons.ts
@@ -0,0 +1,41 @@
+import { DropzoneActionButton } from "./components/dropzone/DropzoneProps";
+
+/**
+ *
+ * @param uploadButton upload action button props
+ * @param abortButton abort action button props
+ * @param deleteButton delete action button props
+ * @param other array of other custom action buttons props
+ * @returns
+ */
+export const makeListOfActionButtons = (
+ uploadButton: DropzoneActionButton | undefined,
+ abortButton: DropzoneActionButton | undefined,
+ deleteButton: DropzoneActionButton | undefined,
+ cleanButton: DropzoneActionButton | undefined
+): [DropzoneActionButton[], DropzoneActionButton[]] => {
+ let listOfTopButtons: DropzoneActionButton[] = [];
+ let listOfBottomButtons: DropzoneActionButton[] = [];
+ /* if (uploadButton) {
+ uploadButton.position === "top"
+ ? listOfTopButtons.push(uploadButton)
+ : listOfBottomButtons.push(uploadButton);
+ }
+ if (abortButton) {
+ abortButton.position === "top"
+ ? listOfTopButtons.push(abortButton)
+ : listOfBottomButtons.push(abortButton);
+ }
+ if (deleteButton) {
+ deleteButton.position === "top"
+ ? listOfTopButtons.push(deleteButton)
+ : listOfBottomButtons.push(deleteButton);
+ }
+ other?.forEach((actionButton) => {
+ actionButton.position === "top"
+ ? listOfTopButtons.push(actionButton)
+ : listOfBottomButtons.push(actionButton);
+ }); */
+
+ return [listOfTopButtons, listOfBottomButtons];
+};
\ No newline at end of file
diff --git a/src/files-ui/components/dropzone/useDropzoneClassName.ts b/src/files-ui/components/dropzone/useDropzoneClassName.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9b77e90d07b72d0090e65f8d0d8265e0b05789d0
--- /dev/null
+++ b/src/files-ui/components/dropzone/useDropzoneClassName.ts
@@ -0,0 +1,103 @@
+import { DynamicSheet, DynamiCSS } from "@dynamicss/dynamicss";
+import * as React from "react";
+import { asureColor, colourNameToHex, hexColorToRGB } from "../../core";
+
+export default function useDropzoneClassName(
+ className: string | undefined,
+ isDragging: boolean,
+ header: boolean | undefined = false,
+ footer: boolean | undefined = false,
+ color: string | undefined,
+ backgroundColor: string | undefined,
+ minHeight: string | number | undefined
+): string | undefined {
+ //console.log("useDropzoneClassName", className, isDragging, header, footer, color, backgroundColor, minHeight);
+ const baseClassName: string = "fui-dropzone-root fui-dropzone-border";
+ const [idStyles, setIdStyles] = React.useState<string>("");
+ const [styleInjected, setStyleInjected] = React.useState<boolean>(false);
+ const [finalClassName, setFinalClassName] = React.useState<string | undefined>(undefined);
+
+ const [offset, setOffset] = React.useState<number>(0);
+
+ const makeClassName = (
+ className: string | undefined,
+ isDragging: boolean,
+ // offset: number,
+ color: string | undefined,
+ backgroundColor: string | undefined,
+ minHeight: string | number | undefined
+
+ ) => {
+ let finalClassName: string = baseClassName;
+
+ let styleSheet: DynamicSheet = makeDynamicDropzoneStyleSheet(
+ // offset,
+ color,
+ backgroundColor,
+ minHeight
+ );
+ let idStyle: string = "";
+ if (!styleInjected) {
+ idStyle = DynamiCSS.insertStyleSheet(styleSheet);
+ setIdStyles(idStyle);
+ if (idStyle !== "")
+ setStyleInjected(true);
+ } else {
+ //already a stylesheet associated
+ DynamiCSS.editStyleSheet(idStyles, styleSheet.sheetRules || []);
+ }
+
+ finalClassName += ` files-ui-dropzone-extra`;
+ if (className) {
+ finalClassName = `${finalClassName} ${className}`;
+ }
+ if (isDragging) {
+ finalClassName = `${finalClassName} fui-hide-border`;
+ }
+ setFinalClassName(finalClassName);
+ }
+
+ React.useEffect(() => {
+ makeClassName(className, isDragging,
+ //offset,
+ color, backgroundColor, minHeight);
+
+ }, [className, isDragging,
+ // offset,
+ color, backgroundColor, minHeight]);
+
+ React.useEffect(() => {
+ setOffset(header && footer ? 50 : !header && footer ? 23 : header && !footer ? 22 : 0);
+ }, [header, footer]);
+
+ return finalClassName;
+
+}
+
+
+
+
+const makeDynamicDropzoneStyleSheet = (
+ // offset: number,
+ color: string | undefined,
+ backgroundColor: string | undefined,
+ minHeight: string | number | undefined
+): DynamicSheet => {
+ return {
+ id: "files-dropzone-ui-style-id",
+ sheetRules: [
+ {
+ className: `files-ui-dropzone-extra`,
+ rules: {
+ border: `1px dashed ${hexColorToRGB(
+ asureColor(colourNameToHex(color)),
+ 1
+ )}`,
+ borderRadius: "8px",
+ backgroundColor: backgroundColor,
+ minHeight: typeof minHeight === "number" ? `${minHeight}px` : minHeight,
+ },
+ }
+ ],
+ }
+}
\ No newline at end of file
diff --git a/src/files-ui/components/dropzone/useNumberOfValidFiles.ts b/src/files-ui/components/dropzone/useNumberOfValidFiles.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5ee30ef2186e22f6e27946bad3b1453d7ca09db6
--- /dev/null
+++ b/src/files-ui/components/dropzone/useNumberOfValidFiles.ts
@@ -0,0 +1,25 @@
+import * as React from "react";
+import { ExtFile } from "../../core";
+
+/**
+ * Custom hook for managing
+ * @param localFiles the list of extFiles that are managed locally inside dropzone component
+ * @param validateFilesFlag if true, the number will be updated with the number of files that have valid attribute as true
+ * @returns the updated number of valid files
+ */
+export default function useNumberOfValidFiles(
+ localFiles: ExtFile[],
+ validateFilesFlag: boolean
+) {
+ const [numberOfValidFiles, setNumberOfValidFiles] = React.useState<number>(0);
+
+ React.useEffect(() => {
+ if (validateFilesFlag) {
+ setNumberOfValidFiles(localFiles.filter((x) => x.valid).length);
+ } else {
+ setNumberOfValidFiles(localFiles.length);
+ }
+ }, [localFiles, validateFilesFlag]);
+
+ return numberOfValidFiles;
+}
\ No newline at end of file
diff --git a/src/files-ui/components/file-item/components/FileCard/FileCard.scss b/src/files-ui/components/file-item/components/FileCard/FileCard.scss
new file mode 100644
index 0000000000000000000000000000000000000000..37faae4fd4c79760fa5903ab1accc098e41c085b
--- /dev/null
+++ b/src/files-ui/components/file-item/components/FileCard/FileCard.scss
@@ -0,0 +1,51 @@
+@import url(https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,900);
+.files-ui-file-card-main-container {
+ border-radius: 8px;
+ color: rgba(0, 0, 0, 0.858);
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ margin: 10px;
+ min-height: 100px;
+ box-sizing: border-box;
+ padding: 10px;
+ position: relative;
+ font-size: 15px;
+ font-weight: 400;
+ min-width: 280px;
+
+ .file-card-data {
+ line-height: 18px;
+ font-weight: 500;
+
+ word-break: break-all;
+ color: black;
+ &.dark-mode {
+ color: rgba(255, 255, 255, 0.7);
+ }
+ .file-card-size {
+ font-weight: 400;
+ font-size: 0.95rem;
+ }
+ .file-card-name {
+ //margin-top: 3px;
+ letter-spacing: 0.125em;
+ font-size: 1rem;
+ //white-space: nowrap;
+ //padding: 0.5px;
+ text-align: center;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ display: -webkit-box;
+ -webkit-line-clamp: 1; /* number of lines to show */
+ line-clamp: 1;
+ -webkit-box-orient: vertical;
+ &.not-allowed {
+ background-color: rgba(180, 16, 16, 0.7);
+ }
+ }
+ }
+ .files-ui-file-card-right {
+ min-width: 60px;
+ }
+}
diff --git a/src/files-ui/components/file-item/components/FileCard/FileCard.tsx b/src/files-ui/components/file-item/components/FileCard/FileCard.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..8765dea26dea3181b2ea6f44758058f10f7be2a8
--- /dev/null
+++ b/src/files-ui/components/file-item/components/FileCard/FileCard.tsx
@@ -0,0 +1,285 @@
+import * as React from "react";
+import { FileCardProps, FileCardPropsDefault } from "./FileCardProps";
+import "./FileCard.scss";
+import "./FileCardPaper.scss";
+import FileItemImage from "../FileItemImage/FileItemImage";
+import useFileItemInitializer from "../../hooks/useFileItemInitializer";
+import { getLocalFileItemData } from "../../utils/getLocalFileItemData";
+import { Clear } from "../../../icons";
+import { fileSizeFormater, shrinkWord } from "../../../../core";
+import { mergeProps } from "../../../overridable";
+import { showFileItemComponent } from "../../utils/showFileItemComponent";
+import useFileItemProgress from "../../hooks/useFileItemProgress";
+import MainLayerBodyNeo from "../FileItemMainLayer/MainLayerBody/MainLayerBodyNeo";
+
+const setFinalElevation = (elevation: string | number): number => {
+ // let finalElevation: number = "";
+ let finalElevation = Number(elevation);
+
+ if (!isNaN(finalElevation)) {
+ if (finalElevation > 24) {
+ return 24;
+ } else if (finalElevation < 0) {
+ return 0;
+ } else {
+ return finalElevation;
+ }
+ } else {
+ return 0;
+ }
+};
+const makeFileCardClassName = (
+ elevation: FileCardProps["elevation"],
+ darkMode: boolean,
+ className: string | undefined
+): string => {
+ console.log("FileCard makeFileCardClassName", elevation, darkMode, className);
+ let finalClassName: string = "files-ui-file-card-main-container";
+ if (elevation) {
+ finalClassName += " elevation-" + setFinalElevation(elevation);
+ }
+ if (darkMode) {
+ finalClassName += " dark-mode";
+ }
+ if (className) {
+ finalClassName += ` ${className}`;
+ }
+ console.log("FileCard finalClassName", finalClassName);
+
+ return finalClassName;
+};
+
+const FileCard: React.FC<FileCardProps> = (props: FileCardProps) => {
+ const {
+ file,
+ name: propName,
+ size: propSize,
+ type: propType,
+ onDelete,
+ onSee,
+ onWatch,
+ style,
+ preview,
+ //onlyImage,
+ info,
+ id,
+ valid,
+ uploadStatus,
+ uploadMessage,
+ hd,
+ localization,
+ errors,
+ imageUrl,
+ elevation,
+ alwaysActive,
+ resultOnTooltip,
+ downloadUrl,
+ onDownload,
+ progress,
+ onAbort,
+ xhr,
+ onCancel,
+ showProgress,
+ className,
+ onDoubleClick,
+ onRightClick,
+ backgroundBlurImage,
+ darkMode,
+ } = mergeProps(props, FileCardPropsDefault);
+
+ //ref for anchor element
+ const downloadAnchorRef = React.useRef<HTMLAnchorElement>(null);
+
+ //className created
+ const finalClassName: string = makeFileCardClassName(
+ elevation,
+ darkMode,
+ className
+ );
+
+ const showFileItem: boolean = showFileItemComponent(
+ file,
+ propName
+ // Boolean(rootClassNameCreated)
+ );
+
+ // local properties from file
+ const [localName, localType, localSize]: [
+ string,
+ string | undefined,
+ number | undefined
+ ] = getLocalFileItemData(file, propName, propType, propSize);
+
+ // handle progress
+ const localProgress = useFileItemProgress(progress, showProgress, xhr);
+
+ //Initialize File Item
+ const [isImage, isVideo, url, imageSource]: [
+ boolean,
+ boolean,
+ string,
+ string | undefined
+ ] = useFileItemInitializer(
+ file,
+ propName,
+ propType,
+ valid,
+ preview as boolean,
+ imageUrl
+ );
+
+ //The size formatted and rounded in 2 decimals
+ const sizeFormatted: string = localSize
+ ? fileSizeFormater(localSize)
+ : "0 KB";
+
+ /*************** Click ***************/
+ /**
+ * TO-DO: Add functionallity on click event
+ * @param e event object
+ */
+ function handleClick<T extends HTMLDivElement>(
+ e: React.MouseEvent<T, MouseEvent>
+ ): void {
+ //avoid children to trigger onClick ripple from parent
+ e.stopPropagation();
+ }
+
+ /***************** HANDLERS **********/
+ //delete file item
+ const handleDelete = (): void => {
+ onDelete?.(id);
+ };
+ //open info layer
+ /* const handleOpenInfo = () => {
+ setShowInfo(true);
+ }; */
+ //close info layer
+ /* const handleCloseInfo = () => {
+ setShowInfo(false);
+ }; */
+ //handle watch video
+ const handleOpenVideo = async () => {
+ if (file) onWatch?.(file);
+ };
+ //open image
+ const handleOpenImage = async () => {
+ if (imageSource) {
+ // if (hd) {
+ // const response = await readImagePromise(file);
+ // onSee?.(response || "");
+ // } else {
+ onSee?.(imageSource);
+ //}
+ }
+ };
+
+ /********** DOWNLOAD HANDLERS **********/
+ /**
+ * onDownload, form 1
+ * Trigger dowload directly performing a click on anchor element
+ */
+ const innerDownload = () => {
+ const anchorElement = downloadAnchorRef.current;
+ if (anchorElement) {
+ anchorElement.click();
+ }
+ };
+ /**
+ * onDownlad, form 2
+ * Handle the download triggering an outside event
+ */
+ const handleDownload = () => {
+ if (onDownload) {
+ onDownload?.(id, downloadUrl);
+ } else if (typeof downloadUrl == "string") {
+ innerDownload();
+ }
+ };
+ /**
+ * Perform abort event when xhr is given
+ */
+ const handleAbort = (): void => {
+ //trigger abort event
+ xhr?.abort();
+ // handle externally the abort event
+ onAbort?.(id);
+ };
+ /**
+ * Handle onCancel event
+ */
+ const handleCancel = (): void => {
+ // handle externally the cancel event
+ onCancel?.(id);
+ };
+
+ const handleDoubleClick: React.MouseEventHandler<HTMLDivElement> = (
+ evt: React.MouseEvent
+ ): void => {
+ alert("double click on file");
+ evt.preventDefault();
+
+ onDoubleClick?.(evt);
+ };
+ function handleRightClick(evt: React.MouseEvent) {
+ // alert("right click!!!!");
+ //get coordinates
+ //zindex
+ //create menu component
+ // evt.preventDefault();
+ // onRightClick?.(evt);
+ }
+ //console.log("FileItem onCancel", onCancel);
+
+ if (showFileItem) {
+ return (
+ <div
+ className={finalClassName}
+ style={style}
+ onClick={handleClick}
+ onDoubleClick={handleDoubleClick}
+ onContextMenu={handleRightClick}
+ >
+ <FileItemImage
+ imageSource={imageSource}
+ url={url}
+ fileName={localName}
+ backgroundBlurImage={backgroundBlurImage as boolean}
+ card={true}
+ />
+
+ <div
+ className={darkMode ? "file-card-data dark-mode" : "file-card-data"}
+ >
+ <div className={"file-card-name"}>{shrinkWord(localName, true)}</div>
+
+ <div className={"file-card-size"}>{sizeFormatted}</div>
+ <div className={"file-card-size"}>{shrinkWord(localType)}</div>
+ </div>
+
+ <div className="files-ui-file-card-right">
+ <Clear
+ style={{ position: "absolute", right: 0, top: 0 }}
+ className="dui-file-item-icon"
+ color="rgba(255,255,255,0.851)"
+ onClick={handleDelete}
+ size="small"
+ colorFill="transparent"
+ />
+ <MainLayerBodyNeo
+ hide={false}
+ uploadStatus={uploadStatus}
+ localization={localization}
+ progress={progress}
+ onAbort={onAbort}
+ valid={valid}
+ hovering={true}
+ onCancel={onCancel}
+ />
+ </div>
+ </div>
+ );
+ }
+ return <></>;
+};
+export default FileCard;
diff --git a/src/files-ui/components/file-item/components/FileCard/FileCardPaper.scss b/src/files-ui/components/file-item/components/FileCard/FileCardPaper.scss
new file mode 100644
index 0000000000000000000000000000000000000000..fe74cc62cfba12a8b181e0d6ee54f8288f8a9294
--- /dev/null
+++ b/src/files-ui/components/file-item/components/FileCard/FileCardPaper.scss
@@ -0,0 +1,270 @@
+.files-ui-file-card-main-container {
+ &.dark-mode {
+ color: rgba(255, 255, 255, 0.7);
+ background-color: #121212;
+ &.elevation-0 {
+ background-image: linear-gradient(
+ rgba(255, 255, 255, 0),
+ rgba(255, 255, 255, 0)
+ );
+ }
+ &.elevation-1 {
+ background-image: linear-gradient(
+ rgba(255, 255, 255, 0.05),
+ rgba(255, 255, 255, 0.05)
+ );
+ }
+ &.elevation-2 {
+ background-image: linear-gradient(
+ rgba(255, 255, 255, 0.07),
+ rgba(255, 255, 255, 0.07)
+ );
+ }
+ &.elevation-3 {
+ background-image: linear-gradient(
+ rgba(255, 255, 255, 0.08),
+ rgba(255, 255, 255, 0.08)
+ );
+ }
+ &.elevation-4 {
+ background-image: linear-gradient(
+ rgba(255, 255, 255, 0.09),
+ rgba(255, 255, 255, 0.09)
+ );
+ }
+ &.elevation-5 {
+ background-image: linear-gradient(
+ rgba(255, 255, 255, 0.1),
+ rgba(255, 255, 255, 0.1)
+ );
+ }
+ &.elevation-6 {
+ background-image: linear-gradient(
+ rgba(255, 255, 255, 0.11),
+ rgba(255, 255, 255, 0.11)
+ );
+ }
+ &.elevation-7 {
+ background-image: linear-gradient(
+ rgba(255, 255, 255, 0.11),
+ rgba(255, 255, 255, 0.11)
+ );
+ }
+ &.elevation-8 {
+ background-image: linear-gradient(
+ rgba(255, 255, 255, 0.12),
+ rgba(255, 255, 255, 0.12)
+ );
+ }
+ &.elevation-9 {
+ background-image: linear-gradient(
+ rgba(255, 255, 255, 0.12),
+ rgba(255, 255, 255, 0.12)
+ );
+ }
+ &.elevation-10 {
+ background-image: linear-gradient(
+ rgba(255, 255, 255, 0.13),
+ rgba(255, 255, 255, 0.13)
+ );
+ }
+ &.elevation-11 {
+ background-image: linear-gradient(
+ rgba(255, 255, 255, 0.13),
+ rgba(255, 255, 255, 0.13)
+ );
+ }
+ &.elevation-12 {
+ background-image: linear-gradient(
+ rgba(255, 255, 255, 0.14),
+ rgba(255, 255, 255, 0.14)
+ );
+ }
+ &.elevation-13 {
+ background-image: linear-gradient(
+ rgba(255, 255, 255, 0.14),
+ rgba(255, 255, 255, 0.14)
+ );
+ }
+ &.elevation-14 {
+ background-image: linear-gradient(
+ rgba(255, 255, 255, 0.14),
+ rgba(255, 255, 255, 0.14)
+ );
+ }
+ &.elevation-15 {
+ background-image: linear-gradient(
+ rgba(255, 255, 255, 0.14),
+ rgba(255, 255, 255, 0.14)
+ );
+ }
+ &.elevation-16 {
+ background-image: linear-gradient(
+ rgba(255, 255, 255, 0.13),
+ rgba(255, 255, 255, 0.15)
+ );
+ }
+ &.elevation-17 {
+ background-image: linear-gradient(
+ rgba(255, 255, 255, 0.13),
+ rgba(255, 255, 255, 0.15)
+ );
+ }
+ &.elevation-18 {
+ background-image: linear-gradient(
+ rgba(255, 255, 255, 0.13),
+ rgba(255, 255, 255, 0.15)
+ );
+ }
+ &.elevation-19 {
+ background-image: linear-gradient(
+ rgba(255, 255, 255, 0.15),
+ rgba(255, 255, 255, 0.15)
+ );
+ }
+ &.elevation-20 {
+ background-image: linear-gradient(
+ rgba(255, 255, 255, 0.16),
+ rgba(255, 255, 255, 0.16)
+ );
+ }
+ &.elevation-21 {
+ background-image: linear-gradient(
+ rgba(255, 255, 255, 0.16),
+ rgba(255, 255, 255, 0.16)
+ );
+ }
+ &.elevation-22 {
+ background-image: linear-gradient(
+ rgba(255, 255, 255, 0.16),
+ rgba(255, 255, 255, 0.16)
+ );
+ }
+ &.elevation-23 {
+ background-image: linear-gradient(
+ rgba(255, 255, 255, 0.16),
+ rgba(255, 255, 255, 0.16)
+ );
+ }
+ &.elevation-24 {
+ background-image: linear-gradient(
+ rgba(255, 255, 255, 0.16),
+ rgba(255, 255, 255, 0.16)
+ );
+ }
+ }
+ &.elevation-0 {
+ box-shadow: none;
+ }
+ &.elevation-1 {
+ box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2),
+ 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
+ }
+ &.elevation-2 {
+ box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
+ 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
+ }
+ &.elevation-3 {
+ box-shadow: 0px 3px 3px -2px rgba(0, 0, 0, 0.2),
+ 0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12);
+ }
+ &.elevation-4 {
+ box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2),
+ 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
+ }
+ &.elevation-5 {
+ box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),
+ 0px 5px 8px 0px rgba(0, 0, 0, 0.14), 0px 1px 14px 0px rgba(0, 0, 0, 0.12);
+ }
+ &.elevation-6 {
+ box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),
+ 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
+ }
+ &.elevation-7 {
+ box-shadow: 0px 4px 5px -2px rgba(0, 0, 0, 0.2),
+ 0px 7px 10px 1px rgba(0, 0, 0, 0.14), 0px 2px 16px 1px rgba(0, 0, 0, 0.12);
+ }
+ &.elevation-8 {
+ box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2),
+ 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
+ }
+ &.elevation-9 {
+ box-shadow: 0px 5px 6px -3px rgba(0, 0, 0, 0.2),
+ 0px 9px 12px 1px rgba(0, 0, 0, 0.14), 0px 3px 16px 2px rgba(0, 0, 0, 0.12);
+ }
+ &.elevation-10 {
+ box-shadow: 0px 6px 6px -3px rgba(0, 0, 0, 0.2),
+ 0px 10px 14px 1px rgba(0, 0, 0, 0.14),
+ 0px 4px 18px 3px rgba(0, 0, 0, 0.12);
+ }
+ &.elevation-11 {
+ box-shadow: 0px 6px 7px -4px rgba(0, 0, 0, 0.2),
+ 0px 11px 15px 1px rgba(0, 0, 0, 0.14),
+ 0px 4px 20px 3px rgba(0, 0, 0, 0.12);
+ }
+ &.elevation-12 {
+ box-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.2),
+ 0px 12px 17px 2px rgba(0, 0, 0, 0.14),
+ 0px 5px 22px 4px rgba(0, 0, 0, 0.12);
+ }
+ &.elevation-13 {
+ box-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.2),
+ 0px 13px 19px 2px rgba(0, 0, 0, 0.14),
+ 0px 5px 24px 4px rgba(0, 0, 0, 0.12);
+ }
+ &.elevation-14 {
+ box-shadow: 0px 7px 9px -4px rgba(0, 0, 0, 0.2),
+ 0px 14px 21px 2px rgba(0, 0, 0, 0.14),
+ 0px 5px 26px 4px rgba(0, 0, 0, 0.12);
+ }
+ &.elevation-15 {
+ box-shadow: 0px 8px 9px -5px rgba(0, 0, 0, 0.2),
+ 0px 15px 22px 2px rgba(0, 0, 0, 0.14),
+ 0px 6px 28px 5px rgba(0, 0, 0, 0.12);
+ }
+ &.elevation-16 {
+ box-shadow: 0px 8px 10px -5px rgba(0, 0, 0, 0.2),
+ 0px 16px 24px 2px rgba(0, 0, 0, 0.14),
+ 0px 6px 30px 5px rgba(0, 0, 0, 0.12);
+ }
+ &.elevation-17 {
+ box-shadow: 0px 8px 11px -5px rgba(0, 0, 0, 0.2),
+ 0px 17px 26px 2px rgba(0, 0, 0, 0.14),
+ 0px 6px 32px 5px rgba(0, 0, 0, 0.12);
+ }
+ &.elevation-18 {
+ box-shadow: 0px 9px 11px -5px rgba(0, 0, 0, 0.2),
+ 0px 18px 28px 2px rgba(0, 0, 0, 0.14),
+ 0px 7px 34px 6px rgba(0, 0, 0, 0.12);
+ }
+ &.elevation-19 {
+ box-shadow: 0px 9px 12px -6px rgba(0, 0, 0, 0.2),
+ 0px 19px 29px 2px rgba(0, 0, 0, 0.14),
+ 0px 7px 36px 6px rgba(0, 0, 0, 0.12);
+ }
+ &.elevation-20 {
+ box-shadow: 0px 10px 13px -6px rgba(0, 0, 0, 0.2),
+ 0px 20px 31px 3px rgba(0, 0, 0, 0.14),
+ 0px 8px 38px 7px rgba(0, 0, 0, 0.12);
+ }
+ &.elevation-21 {
+ box-shadow: 0px 10px 13px -6px rgba(0, 0, 0, 0.2),
+ 0px 21px 33px 3px rgba(0, 0, 0, 0.14),
+ 0px 8px 40px 7px rgba(0, 0, 0, 0.12);
+ }
+ &.elevation-22 {
+ box-shadow: 0px 10px 14px -6px rgba(0, 0, 0, 0.2),
+ 0px 22px 35px 3px rgba(0, 0, 0, 0.14),
+ 0px 8px 42px 7px rgba(0, 0, 0, 0.12);
+ }
+ &.elevation-23 {
+ box-shadow: 0px 11px 14px -7px rgba(0, 0, 0, 0.2),
+ 0px 23px 36px 3px rgba(0, 0, 0, 0.14),
+ 0px 9px 44px 8px rgba(0, 0, 0, 0.12);
+ }
+ &.elevation-24 {
+ box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2),
+ 0px 24px 38px 3px rgba(0, 0, 0, 0.14),
+ 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+ }
+}
diff --git a/src/files-ui/components/file-item/components/FileCard/FileCardProps.ts b/src/files-ui/components/file-item/components/FileCard/FileCardProps.ts
new file mode 100644
index 0000000000000000000000000000000000000000..2dbc3541718029f063e179ea2596a91c58bcca50
--- /dev/null
+++ b/src/files-ui/components/file-item/components/FileCard/FileCardProps.ts
@@ -0,0 +1,198 @@
+import { Localization, UPLOADSTATUS } from "../../../../core";
+import { OverridableComponentProps } from "../../../overridable";
+
+export interface FileCardPropsMap extends OverridableComponentProps {
+ /**
+ * The file object obtained from client drop or selection
+ */
+ file?: File;
+ /**
+ * The name of the file
+ */
+ name?: string;
+ /**
+ * The file mime type
+ */
+ type?: string;
+ /**
+ * the size of the file in bytes
+ */
+ size?: number;
+ /**
+ * A function of what to do when close button is pressed or clicked
+ */
+ onDelete?: (fileId: number | string | undefined) => void;
+ /**
+ * A function that return a file object when "see" button is pressed or clicked
+ */
+ onSee?: (imageUrl: string) => void;
+ /**
+ * A function that return a file object when "play" button is presssed or clicked
+ */
+ onWatch?: (videoUrl: File) => void;
+ /**
+ * Whether to see as grid or inline (horizontal list)
+ */
+ errors?: string[];
+ /**
+ * individual validator for each file
+ */
+ //validator?: FileItemValidator;
+ /**
+ * identifier for the file
+ */
+ id?: string | number;
+ /**
+ * if true, and if the file is an image,
+ * makes visible the "view" button that will get the image url
+ * Also, it will be visible only when file is valid
+ */
+ preview?: boolean;
+ /**
+ * whether to show a valid or rejected message ("ok", "rejected")
+ * by def. valid is false (if not present, it's false too)
+ * This value wil affect preview behaviour,
+ * If not valid, the preview will not be shown, nor the view button
+ */
+ valid?: boolean | null;
+ /**
+ * This feature is hidden, it is not present on the documentation
+ * because it's experimental. If you found this prop, you can test it
+ * and comment us if any issue is found. Thanks in advance.
+ *
+ * Make file name, info layer, size and "valid message"
+ * not visible
+ */
+ //onlyImage?: boolean;
+ /**
+ * whether to show the info layer or not
+ * also whether to make visible the info button or not ,
+ * Only works when given a image file
+ */
+ info?: boolean;
+ /**
+ * A string representation or web url of the image
+ * that will be set to the "src" prop of an <img/> tag
+ * <img src={`${url}`} />
+ */
+ imageUrl?: string;
+
+
+ elevation: false | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24
+ | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "17" | "18" | "19" | "20" | "21" | "22" | "23" | "24";
+
+ /**
+ * The message from server
+ */
+ uploadMessage?: string;
+ /**
+ * where to place the file name
+ * [in construction]
+ */
+ //fileName?: "bottom" | "inside";
+ /**
+ * The current upload status of the file
+ */
+ uploadStatus?: UPLOADSTATUS;
+ /**
+ * If present, preview on full screen will
+ * be presented in the real image resolution
+ */
+ hd?: boolean | undefined;
+ /**
+ * language to be used
+ * for now
+ * only English and Spanish is supported
+ */
+ localization?: Localization;
+ /**
+ * Flag that determines whether actions are visible always, or only on hover event
+ */
+ alwaysActive?: boolean;
+ /**
+ * Where to display result of validation: on InfoLayer or in Tooltip when user hovers the FileItem
+ */
+ resultOnTooltip?: boolean;
+ /**
+ * Url to perform a GET request in order to download the file.
+ * This action is triggered when download button is clicked or pressed.
+ * In case onDownload prop is given
+ */
+ downloadUrl?: string;
+ /**
+ * Event that is triggered when download button is clicked or pressed
+ */
+ onDownload?: (fileId: number | string | undefined, downloadUrl?: string) => void;
+ /**
+ * the current percentage upload progress
+ *
+ */
+ progress?: number;
+ /**
+ * Whether to show progress or not.
+ * @default true if xhr is initialized
+ * @default false if xhr is not given
+ */
+ showProgress?: boolean;
+ /**
+ * abort event
+ */
+ onAbort?: Function;
+ /**
+ * cancel when preparing event
+ */
+ onCancel?: Function;
+ /**
+ * A reference to the XHR object that allows the upload and abort event.
+ * and progress
+ */
+ xhr?: XMLHttpRequest;
+ /**
+ * Event that is triggered when user duble clicks the component
+ */
+ onDoubleClick?: (evt: React.MouseEvent) => void;
+ /**
+ * Event that is triggered when user duble clicks the component
+ */
+ onRightClick?: (evt: React.MouseEvent) => void;
+ /**
+ * Flag that indicates whether to show a background blur image or not
+ */
+ backgroundBlurImage?: boolean;
+ /**
+ * Flag that indicates whether to activates dark mode for component or not
+ */
+ darkMode: boolean;
+}
+
+
+export type FileCardProps = {
+ [F in keyof FileCardPropsMap]: FileCardPropsMap[F]
+}
+
+/**
+ * Base default props
+ */
+export const FileCardPropsDefault: FileCardProps = {
+ onDelete: undefined,
+ file: undefined,
+ color: "#071e25",
+ // validator: undefined,
+ id: undefined,
+ style: {},
+ preview: false,
+ valid: undefined,
+ info: false,
+ hd: undefined,
+ localization: "EN-en",
+ //onlyImage: false,
+ imageUrl: undefined,
+ errors: undefined,
+ elevation: 2,
+ alwaysActive: undefined,
+ progress: undefined,
+ resultOnTooltip: true,
+ backgroundBlurImage: true,
+ darkMode: false,
+ //fileName: "bottom"
+}
diff --git a/src/files-ui/components/file-item/components/FileItem/FileItem.scss b/src/files-ui/components/file-item/components/FileItem/FileItem.scss
new file mode 100644
index 0000000000000000000000000000000000000000..3d956551cd8d0cc858e838a2b181969c53c35794
--- /dev/null
+++ b/src/files-ui/components/file-item/components/FileItem/FileItem.scss
@@ -0,0 +1,272 @@
+@import url(https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,900);
+
+.file-item-full-container-container {
+ cursor: text;
+ box-sizing: border-box;
+ font-family: "Poppins", sans-serif;
+ width: 132px;
+ word-break: break-word;
+ font-size: 15px;
+ font-weight: 400;
+ //background-color: cadetblue;
+
+ &.hovering {
+ // background-color: aqua;
+ border-radius: 8px;
+ }
+
+ //outline: 1px solid rgb(20, 130, 220);
+ .file-item-icon-container {
+ position: relative;
+ height: 132px;
+ width: 132px;
+ border-radius: 8px;
+ box-sizing: border-box;
+
+ .full-info {
+ &::-webkit-scrollbar {
+ width: 9px;
+ }
+
+ &::-webkit-scrollbar-track {
+ background: transparent;
+ }
+
+ &::-webkit-scrollbar-thumb {
+ background-color: #646c7fa9;
+ border-radius: 20px;
+ border: transparent;
+ }
+
+ text-align: left;
+ position: absolute;
+ left: 0;
+ top: 0;
+
+ scrollbar-width: thin;
+ line-height: 1.5;
+ letter-spacing: 0.02857em;
+ //border: 1px solid white;
+ font-family: "Poppins", sans-serif;
+ width: inherit;
+ background-color: rgba(0, 0, 0, 0.85);
+ word-break: break-word;
+ //margin: 1% 4%;
+ // padding: 1% 1%;
+ border-radius: 7px;
+ //z-index: 100;
+ height: 100%;
+ width: 100%;
+
+ font-size: 0.8rem;
+ transition: all 0.5s ease 0s;
+ //overflow: hidden;
+ overflow: auto;
+ color: white;
+
+ .name {
+ //margin: -7px 0 0 0;
+ padding: 0 5px;
+ font-weight: 399;
+ // text-align: center;
+
+ .sub-label {
+ font-weight: 600;
+ }
+
+ &.success {
+ border: 1px dashed #2e7d32;
+ background-color: #1b5e20;
+ //margin: 0 2px;
+ font-size: 0.7rem;
+
+ border-radius: 4px;
+ }
+
+ &.error {
+ background-color: #c62828;
+ border: 1px dashed #d32f2f;
+ font-size: 0.7rem;
+
+ //margin: 0 2px;
+ border-radius: 4px;
+ }
+ }
+
+ .size {
+ // margin-top: 5px;
+ padding: 0 5px;
+ font-weight: 500;
+
+ .sub-label {
+ font-weight: 600;
+ }
+ }
+
+ .mime {
+ //display: none;
+ //text-align: left;
+
+ padding: 0 5px;
+ font-weight: 399;
+
+ .sub-label {
+ font-weight: 600;
+ }
+ }
+
+ &.hide {
+ //height: 0%;
+ display: none;
+ }
+ }
+ }
+
+ .file-item-name {
+ margin-top: 3px;
+ height: 31px;
+ text-align: center;
+ //width: 133px;
+ width: 100%;
+ color: black;
+ //font-size: 0.95rem;
+ font-size: 15px;
+ //line-height: 0.9rem;
+ line-height: 15px;
+ font-weight: 400;
+ letter-spacing: 0.07rem;
+ word-break: break-all;
+ padding: 0.5px;
+ text-align: center;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ display: -webkit-box;
+ -webkit-line-clamp: 2; /* number of lines to show */
+ line-clamp: 2;
+ -webkit-box-orient: vertical;
+ &.dark-mode {
+ color: rgba(255, 255, 255, 0.7);
+ }
+ &.not-allowed {
+ background-color: rgba(180, 16, 16, 0.7);
+ }
+ }
+}
+
+.file-item-container {
+ background-repeat: no-repeat;
+ background-size: cover;
+ background-position: center;
+}
+
+.dui-file-item-icon {
+ font-size: 0.7rem;
+ //border: 1px solid wheat;
+ //color: white;
+ min-width: 19px;
+ min-height: 19px;
+ margin: 0;
+ padding: 2px 2px;
+ border-radius: 50%;
+ background-color: rgba(32, 33, 36, 0.65);
+
+ word-break: break-word;
+
+ &:hover {
+ background-color: rgba(32, 33, 36, 0.85);
+ //outline: 0.5px solid wheat;
+ }
+}
+
+////////////////// TOOLTIP
+.dz-ui-file-item-container {
+ &.dz-ui-tooltip {
+ cursor: default;
+ position: relative;
+ display: inline-block;
+
+ // border-bottom: 1px dotted black;
+ &:hover {
+ z-index: 2;
+
+ .dropzone-ui-tooltiptext {
+ visibility: visible;
+ opacity: 1;
+ z-index: 2;
+ }
+ }
+
+ .dropzone-ui-tooltiptext {
+ font-family: "Poppins", sans-serif;
+ font-size: 0.8rem;
+ visibility: hidden;
+ width: 133px;
+ // background-color: green;
+ color: #fff;
+ text-align: center;
+ border-radius: 6px;
+ padding: 2px 2px;
+ position: absolute;
+ //z-index: 2;
+ //top: 190px;
+ top: 180px;
+ left: 66px;
+ margin-left: -60px;
+
+ /* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */
+ opacity: 0;
+ transition: opacity 1s;
+
+ &.not-valid-error {
+ background: linear-gradient(to top, #c62828, #d32f2f);
+
+ &::after {
+ border-color: transparent transparent #d32f2f transparent;
+ }
+ }
+
+ &.success {
+ //background-color: green;
+ background: linear-gradient(to top, #1b5e20, #2e7d32);
+
+ &::after {
+ border-color: transparent transparent #2e7d32 transparent;
+ }
+ }
+
+ &::after {
+ content: "";
+ position: absolute;
+ bottom: 100%;
+ left: 50%;
+ margin-left: -5px;
+ border-width: 5px;
+ border-style: solid;
+ //border-color: transparent transparent green transparent;
+ }
+ }
+ }
+
+
+
+
+ &.dz-ui-paper-elevation-1 {
+ box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2),
+ 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
+ }
+
+ .dz-ui-paper-elevation-2 {
+ box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
+ 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
+ }
+
+ .dz-ui-paper-elevation-3 {
+ box-shadow: 0px 3px 3px -2px rgba(0, 0, 0, 0.2),
+ 0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12);
+ }
+
+ .dz-ui-paper-elevation-4 {
+ box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2),
+ 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
+ }
+}
diff --git a/src/files-ui/components/file-item/components/FileItem/FileItem.tsx b/src/files-ui/components/file-item/components/FileItem/FileItem.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..fdc11721839d5576a48fa46e042766c96d0ec01e
--- /dev/null
+++ b/src/files-ui/components/file-item/components/FileItem/FileItem.tsx
@@ -0,0 +1,301 @@
+import * as React from "react";
+import { fileSizeFormater, shrinkWord } from "../../../../core";
+import DownloadHidden from "../../../download-hidden/DownloadHidden";
+import { mergeProps } from "../../../overridable";
+import { Tooltip } from "../../../tooltip";
+import useFileItemRootClassName from "../../hooks/useFileItemClassName";
+import { getLocalFileItemData } from "../../utils/getLocalFileItemData";
+import { showFileItemComponent } from "../../utils/showFileItemComponent";
+import { FileItemProps, FileItemPropsDefault } from "./FileItemProps";
+import "./FileItem.scss";
+import FileItemImage from "../FileItemImage/FileItemImage";
+import useFileItemInitializer from "../../hooks/useFileItemInitializer";
+import FileItemMainLayer from "../FileItemMainLayer/MainLayer/FileItemMainLayer";
+import useFileItemProgress from "../../hooks/useFileItemProgress";
+import FileItemFullInfoLayer from "../FileItemFullInfoLayer/FileItemFullInfoLayer";
+
+const FileItem: React.FC<FileItemProps> = (props: FileItemProps) => {
+ const {
+ style,
+ className,
+
+ file,
+ name: propName,
+ size: propSize,
+ type: propType,
+
+ id,
+ valid,
+ errors,
+ uploadStatus,
+ uploadMessage,
+ progress,
+
+ xhr,
+
+ localization,
+ preview,
+ imageUrl,
+ info,
+ backgroundBlurImage = true,
+ darkMode,
+
+ alwaysActive,
+
+ resultOnTooltip,
+
+ onDelete,
+ onCancel,
+ onAbort,
+
+ onDownload,
+ onSee,
+ onWatch,
+
+ onlyImage,
+
+ hd,
+
+ downloadUrl,
+
+ showProgress,
+
+ onDoubleClick,
+ onRightClick,
+ } = mergeProps(props, FileItemPropsDefault);
+
+ //ref for anchor element
+ const downloadAnchorRef = React.useRef<HTMLAnchorElement>(null);
+
+ /*************** HOVERING ***************/
+ const [hovering, setHOvering] = React.useState<boolean>(false);
+ const handleOnHoverEnter: React.MouseEventHandler<HTMLDivElement> = () => {
+ setHOvering(true);
+ };
+ const handleOnHoverLeave: React.MouseEventHandler<HTMLDivElement> = () => {
+ setHOvering(false);
+ };
+ //className created
+ const rootClassNameCreated: string | undefined = useFileItemRootClassName(
+ resultOnTooltip,
+ className,
+ hovering
+ );
+
+ const showFileItem: boolean = showFileItemComponent(
+ file,
+ propName
+ // Boolean(rootClassNameCreated)
+ );
+
+ // local properties from file
+ const [localName, localType, localSize]: [
+ string,
+ string | undefined,
+ number | undefined
+ ] = getLocalFileItemData(file, propName, propType, propSize);
+
+ // handle progress
+ const localProgress = useFileItemProgress(progress, showProgress, xhr);
+
+ //Initialize File Item
+ const [isImage, isVideo, url, imageSource]: [
+ boolean,
+ boolean,
+ string,
+ string | undefined
+ ] = useFileItemInitializer(
+ file,
+ propName,
+ propType,
+ valid,
+ preview as boolean,
+ imageUrl
+ );
+
+ //The size formatted and rounded in 2 decimals
+ const sizeFormatted: string = localSize
+ ? fileSizeFormater(localSize)
+ : "0 KB";
+ //alwaysActive
+ const [showInfo, setShowInfo] = React.useState<boolean>(false);
+
+ /*************** Click ***************/
+ /**
+ * TO-DO: Add functionallity on click event
+ * @param e event object
+ */
+ function handleClick<T extends HTMLDivElement>(
+ e: React.MouseEvent<T, MouseEvent>
+ ): void {
+ //avoid children to trigger onClick ripple from parent
+ e.stopPropagation();
+ }
+
+ /***************** HANDLERS **********/
+ //delete file item
+ const handleDelete = (): void => {
+ onDelete?.(id);
+ };
+ //open info layer
+ const handleOpenInfo = () => {
+ setShowInfo(true);
+ };
+ //close info layer
+ const handleCloseInfo = () => {
+ setShowInfo(false);
+ };
+ //handle watch video
+ const handleOpenVideo = async () => {
+ if (file) onWatch?.(file);
+ };
+ //open image
+ const handleOpenImage = async () => {
+ if (imageSource) {
+ // if (hd) {
+ // const response = await readImagePromise(file);
+ // onSee?.(response || "");
+ // } else {
+ onSee?.(imageSource);
+ //}
+ }
+ };
+
+ /********** DOWNLOAD HANDLERS **********/
+ /**
+ * onDownload, form 1
+ * Trigger dowload directly performing a click on anchor element
+ */
+ const innerDownload = () => {
+ const anchorElement = downloadAnchorRef.current;
+ if (anchorElement) {
+ anchorElement.click();
+ }
+ };
+ /**
+ * onDownlad, form 2
+ * Handle the download triggering an outside event
+ */
+ const handleDownload = () => {
+ if (onDownload) {
+ onDownload?.(id, downloadUrl);
+ } else if (typeof downloadUrl == "string") {
+ innerDownload();
+ }
+ };
+ /**
+ * Perform abort event when xhr is given
+ */
+ const handleAbort = (): void => {
+ //trigger abort event
+ xhr?.abort();
+ // handle externally the abort event
+ onAbort?.(id);
+ };
+ /**
+ * Handle onCancel event
+ */
+ const handleCancel = (): void => {
+ // handle externally the cancel event
+ onCancel?.(id);
+ };
+
+ const handleDoubleClick: React.MouseEventHandler<HTMLDivElement> = (
+ evt: React.MouseEvent
+ ): void => {
+ alert("double click on file");
+ evt.preventDefault();
+
+ onDoubleClick?.(evt);
+ };
+ function handleRightClick(evt: React.MouseEvent) {
+ // alert("right click!!!!");
+ //get coordinates
+ //zindex
+ //create menu component
+ // evt.preventDefault();
+ // onRightClick?.(evt);
+ }
+ //console.log("FileItem onCancel", onCancel);
+
+ if (showFileItem) {
+ return (
+ <div
+ className={rootClassNameCreated}
+ style={style}
+ onMouseEnter={handleOnHoverEnter}
+ onMouseLeave={handleOnHoverLeave}
+ onClick={handleClick}
+ onDoubleClick={handleDoubleClick}
+ onContextMenu={handleRightClick}
+ >
+ <div className={`file-item-icon-container ${showInfo ? " hide" : ""}`}>
+ <FileItemImage
+ imageSource={imageSource}
+ url={url}
+ fileName={localName}
+ backgroundBlurImage={backgroundBlurImage as boolean}
+ />
+ <FileItemMainLayer
+ showInfo={showInfo}
+ fileName={localName}
+ onDelete={onDelete ? handleDelete : undefined}
+ onOpenImage={onSee && preview ? handleOpenImage : undefined}
+ onOpenVideo={onWatch && preview ? handleOpenVideo : undefined}
+ onDownloadFile={
+ onDownload || downloadUrl ? handleDownload : undefined
+ }
+ isVideo={isVideo}
+ onOpenInfo={handleOpenInfo}
+ info={info || false}
+ valid={valid}
+ isImage={isImage}
+ sizeFormatted={sizeFormatted}
+ uploadStatus={uploadStatus}
+ localization={localization}
+ hovering={alwaysActive || hovering}
+ progress={localProgress}
+ onAbort={onAbort ? handleAbort : undefined}
+ onCancel={onCancel ? handleCancel : undefined}
+ />
+ <FileItemFullInfoLayer
+ showInfo={showInfo}
+ errors={errors}
+ fileName={localName}
+ fileSize={sizeFormatted}
+ fileType={localType}
+ valid={valid}
+ onClose={handleCloseInfo}
+ uploadStatus={uploadStatus}
+ uploadMessage={uploadMessage}
+ localization={localization}
+ resultOnTooltip={resultOnTooltip}
+ />
+ </div>
+ {!onlyImage && (
+ <div
+ className={darkMode ? "file-item-name dark-mode" : "file-item-name"}
+ >
+ {/* {shrinkWord(localName)} */}
+ {localName}
+ </div>
+ )}
+ <Tooltip
+ open={resultOnTooltip}
+ //open={true}
+ uploadStatus={uploadStatus}
+ valid={valid}
+ errors={errors}
+ uploadMessage={uploadMessage}
+ ></Tooltip>
+ <DownloadHidden
+ downloadUrl={downloadUrl}
+ anchorRef={downloadAnchorRef}
+ fileName={localName}
+ />
+ </div>
+ );
+ }
+ return <></>;
+};
+export default FileItem;
diff --git a/src/files-ui/components/file-item/components/FileItem/FileItemNeo.scss b/src/files-ui/components/file-item/components/FileItem/FileItemNeo.scss
new file mode 100644
index 0000000000000000000000000000000000000000..6a352b6f8cadf790ae4852b7321bb378d4c5acaa
--- /dev/null
+++ b/src/files-ui/components/file-item/components/FileItem/FileItemNeo.scss
@@ -0,0 +1,227 @@
+@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
+//@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200&display=swap");
+@import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,700,900");
+/* .file-item-full-list {
+ display: inline-flex;
+} */
+.file-item-full-container-container {
+ cursor: text;
+ box-sizing: border-box;
+ font-family: "Poppins", sans-serif;
+ //margin: 8px;
+ //height: 157px;
+ width: 132px;
+ word-break: break-word;
+ //outline: 1px solid rgb(20, 130, 220);
+ .file-item-icon-container {
+ position: relative;
+ height: 132px;
+ width: 132px;
+ border-radius: 8px;
+ .full-info {
+ &::-webkit-scrollbar {
+ width: 9px;
+ }
+ &::-webkit-scrollbar-track {
+ background: transparent;
+ }
+ &::-webkit-scrollbar-thumb {
+ background-color: #646c7fa9;
+ border-radius: 20px;
+ border: transparent;
+ }
+ text-align: left;
+ position: absolute;
+ left: 0;
+ top: 0;
+
+ scrollbar-width: thin;
+ line-height: 1.5;
+ letter-spacing: 0.02857em;
+ //border: 1px solid white;
+ font-family: "Poppins", sans-serif;
+ width: inherit;
+ background-color: rgba(0, 0, 0, 0.85);
+ word-break: break-word;
+ //margin: 1% 4%;
+ // padding: 1% 1%;
+ border-radius: 7px;
+ //z-index: 100;
+ height: 100%;
+ width: 100%;
+ font-size: 0.8rem;
+ transition: all 0.5s ease 0s;
+ //overflow: hidden;
+ overflow: auto;
+ color: white;
+ .name {
+ //margin: -7px 0 0 0;
+ padding: 0 5px;
+ font-weight: 399;
+ // text-align: center;
+
+ .sub-label {
+ font-weight: 600;
+ }
+ &.success {
+ border: 1px dashed #2e7d32;
+ background-color: #1b5e20;
+ //margin: 0 2px;
+ font-size: 0.7rem;
+
+ border-radius: 4px;
+ }
+ &.error {
+ background-color: #c62828;
+ border: 1px dashed #d32f2f;
+ font-size: 0.7rem;
+
+ //margin: 0 2px;
+ border-radius: 4px;
+ }
+ }
+ .size {
+ // margin-top: 5px;
+ padding: 0 5px;
+ font-weight: 500;
+ .sub-label {
+ font-weight: 600;
+ }
+ }
+ .mime {
+ //display: none;
+ //text-align: left;
+
+ padding: 0 5px;
+ font-weight: 399;
+ .sub-label {
+ font-weight: 600;
+ }
+ }
+
+ &.hide {
+ //height: 0%;
+ display: none;
+ }
+ }
+ }
+ .file-item-name {
+ margin-top: 3px;
+ height: 37px;
+ width: 133px;
+ color: black;
+ font-size: 0.95rem;
+ line-height: 0.85rem;
+ font-weight: 400;
+ letter-spacing: 0.125em;
+ word-break: break-all;
+ padding: 0.5px;
+ text-align: center;
+ &.not-allowed {
+ background-color: rgba(180, 16, 16, 0.7);
+ }
+ }
+}
+
+.file-item-container {
+ background-repeat: no-repeat;
+ background-size: cover;
+ background-position: center;
+}
+
+.dui-file-item-icon {
+ font-size: 0.7rem;
+ //border: 1px solid wheat;
+ //color: white;
+ min-width: 19px;
+ min-height: 19px;
+ margin: 0;
+ padding: 2px 2px;
+ border-radius: 50%;
+ background-color: rgba(32, 33, 36, 0.65);
+
+ word-break: break-word;
+ &:hover {
+ background-color: rgba(32, 33, 36, 0.85);
+ //outline: 0.5px solid wheat;
+ }
+}
+
+////////////////// TOOLTIP
+.dz-ui-file-item-container {
+ &.dz-ui-tooltip {
+ cursor: default;
+ position: relative;
+ display: inline-block;
+ // border-bottom: 1px dotted black;
+ &:hover {
+ z-index: 2;
+ .dropzone-ui-tooltiptext {
+ visibility: visible;
+ opacity: 1;
+ z-index: 2;
+ }
+ }
+ .dropzone-ui-tooltiptext {
+ font-family: "Poppins", sans-serif;
+ font-size: 0.8rem;
+ visibility: hidden;
+ width: 133px;
+ // background-color: green;
+ color: #fff;
+ text-align: center;
+ border-radius: 6px;
+ padding: 2px 2px;
+ position: absolute;
+ //z-index: 2;
+ //top: 190px;
+ top: 180px;
+ left: 66px;
+ margin-left: -60px;
+
+ /* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */
+ opacity: 0;
+ transition: opacity 1s;
+
+ &.not-valid-error {
+ background: linear-gradient(to top, #c62828, #d32f2f);
+ &::after {
+ border-color: transparent transparent #d32f2f transparent;
+ }
+ }
+ &.success {
+ //background-color: green;
+ background: linear-gradient(to top, #1b5e20, #2e7d32);
+ &::after {
+ border-color: transparent transparent #2e7d32 transparent;
+ }
+ }
+ &::after {
+ content: "";
+ position: absolute;
+ bottom: 100%;
+ left: 50%;
+ margin-left: -5px;
+ border-width: 5px;
+ border-style: solid;
+ //border-color: transparent transparent green transparent;
+ }
+ }
+ }
+ &.dz-ui-paper-elevation-1 {
+ box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2),
+ 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
+ }
+ .dz-ui-paper-elevation-2 {
+ box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
+ 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
+ }
+ .dz-ui-paper-elevation-3 {
+ box-shadow: 0px 3px 3px -2px rgba(0, 0, 0, 0.2),
+ 0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12);
+ }
+ .dz-ui-paper-elevation-4 {
+ box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2),
+ 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
+ }
+}
diff --git a/src/files-ui/components/file-item/components/FileItem/FileItemNeo.tsx b/src/files-ui/components/file-item/components/FileItem/FileItemNeo.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..85b823e32162fe3cf6311756a5a4f9f9cb46d4e2
--- /dev/null
+++ b/src/files-ui/components/file-item/components/FileItem/FileItemNeo.tsx
@@ -0,0 +1,247 @@
+import * as React from "react";
+import "./FileItemNeo.scss";
+
+import FileItemFullInfoLayer from "../FileItemFullInfoLayer/FileItemFullInfoLayer";
+import FileItemImage from "../FileItemImage/FileItemImage";
+import Tooltip from "../../../tooltip/components/Tooltip";
+import useFileItemNeoClassName from "../../hooks/useFileItemNeoClassName";
+import { FileItemPropsNeo, FileItemNeoPropsDefault } from "./FileItemPropsNeo";
+import useFileItemNeoInitializer from "./useFileItemNeoInitializer";
+
+import FileItemImageNeo from "../FileItemImage/FileItemImageNeo";
+import useFileItemProgress from "../../hooks/useFileItemProgress";
+import FuiSkeleton from "../../../skeleton/FuiSkeleton";
+import { fileSizeFormater, shrinkWord } from "../../../../core";
+import { mergeProps } from "../../../overridable";
+import FileItemMainLayerNeo from "../FileItemMainLayer/MainLayer/FileItemMainLayerNeo";
+
+const FileItem: React.FC<FileItemPropsNeo> = (props: FileItemPropsNeo) => {
+ const {
+ file,
+ onDelete,
+ onSee,
+ onWatch,
+ style,
+ preview,
+ onlyImage,
+ info,
+ id,
+ valid,
+ uploadStatus,
+ uploadMessage,
+ hd,
+ localization,
+ errors,
+ imageUrl,
+ elevation,
+ alwaysActive,
+ resultOnTooltip,
+ downloadUrl,
+ onDownload,
+ progress,
+ onAbort,
+ xhr,
+ onCancel,
+ showProgress,
+ } = mergeProps(props, FileItemNeoPropsDefault);
+ //ref for anchor element
+ const dui_anchor_ref = React.useRef<HTMLAnchorElement>(null);
+ //Initialize image properties for FileItem
+ const localProgress = useFileItemProgress(progress, showProgress, xhr);
+
+ const [isImage, isVideo, url, imageSource]: [
+ boolean,
+ boolean,
+ string,
+ string | undefined
+ ] = useFileItemNeoInitializer(file, valid, preview as boolean, imageUrl);
+ //console.table({isImage, isVideo, url, imageSource, localProgress} );
+ //className created
+ const classNameCreated = useFileItemNeoClassName(
+ resultOnTooltip as boolean,
+ elevation
+ );
+ //state for actionOnHover
+ const [hovering, setHOvering] = React.useState<boolean>(false);
+ const handleOnHoverEnter: React.MouseEventHandler<HTMLDivElement> = () => {
+ setHOvering(true);
+ };
+ const handleOnHoverLeave: React.MouseEventHandler<HTMLDivElement> = () => {
+ setHOvering(false);
+ };
+
+ //size
+ const sizeFormatted: string = file ? fileSizeFormater(file.size) : "0 KB";
+ //alwaysActive
+ const [showInfo, setShowInfo] = React.useState<boolean>(false);
+ //delete file item
+ const handleDelete = (): void => {
+ onDelete?.(id);
+ };
+ //open info layer
+ const handleOpenInfo = () => {
+ setShowInfo(true);
+ };
+ //close info layer
+ const handleCloseInfo = () => {
+ setShowInfo(false);
+ };
+ //handle watch video
+ const handleOpenVideo = async () => {
+ if (file) onWatch?.(file);
+ };
+ //open image
+ const handleOpenImage = async () => {
+ if (imageSource && file) {
+ // if (hd) {
+ // const response = await readImagePromise(file);
+ // onSee?.(response || "");
+ // } else {
+ onSee?.(imageSource);
+ //}
+ }
+ };
+ function handleClick<T extends HTMLDivElement>(
+ e: React.MouseEvent<T, MouseEvent>
+ ): void {
+ //avoid children to trigger onClick ripple from parent
+ e.stopPropagation();
+ }
+ /**
+ * onDownload, form 1
+ * Trigger dowload directly performing a click on anchor element
+ */
+ const innerDownload = () => {
+ const anchorElement = dui_anchor_ref.current;
+ if (anchorElement) {
+ anchorElement.click();
+ }
+ };
+ /**
+ * onDownlad, form 2
+ * Handle the download triggering an outside event
+ */
+ const handleDownload = () => {
+ if (onDownload) {
+ onDownload?.(id, downloadUrl);
+ } else if (typeof downloadUrl == "string") {
+ innerDownload();
+ }
+ };
+ /**
+ * Perform abort event when xhr is given
+ */
+ const handleAbort = (): void => {
+ //trigger abort event
+ xhr?.abort();
+ // handle externally the abort event
+ onAbort?.(id);
+ };
+ /**
+ * Handle onCancel event
+ */
+ const handleCancel = (): void => {
+ // handle externally the cancel event
+ onCancel?.(id);
+ };
+
+ const handleDoubleClick = (): void => {
+ alert("double click on file");
+ };
+ if (file && typeof file.name == "string") {
+ if (classNameCreated) {
+ return (
+ <div
+ className={classNameCreated}
+ style={style}
+ onClick={handleClick}
+ onMouseEnter={handleOnHoverEnter}
+ onMouseLeave={handleOnHoverLeave}
+ onDoubleClick={handleDoubleClick}
+ >
+ <div
+ className={`file-item-icon-container ${showInfo ? " hide" : ""}`}
+ >
+ <FileItemImageNeo
+ imageSource={imageSource}
+ url={url}
+ fileName={file.name}
+ />
+
+ <FileItemMainLayerNeo
+ showInfo={showInfo}
+ fileName={file.name}
+ onDelete={onDelete ? handleDelete : undefined}
+ onOpenImage={onSee && preview ? handleOpenImage : undefined}
+ onOpenVideo={onWatch && preview ? handleOpenVideo : undefined}
+ onDownloadFile={
+ onDownload || downloadUrl ? handleDownload : undefined
+ }
+ isVideo={isVideo}
+ onOpenInfo={handleOpenInfo}
+ info={info || false}
+ valid={valid}
+ isImage={isImage}
+ sizeFormatted={sizeFormatted}
+ uploadStatus={uploadStatus}
+ localization={localization}
+ hovering={alwaysActive || hovering}
+ progress={localProgress}
+ onAbort={onAbort ? handleAbort : undefined}
+ onCancel={onCancel ? handleCancel : undefined}
+ />
+
+ <FileItemFullInfoLayer
+ showInfo={showInfo}
+ errors={errors}
+ fileName={file.name}
+ fileSize={fileSizeFormater(file.size)}
+ fileType={file.type}
+ valid={valid}
+ onClose={handleCloseInfo}
+ uploadStatus={uploadStatus}
+ uploadMessage={uploadMessage}
+ localization={localization}
+ resultOnTooltip={resultOnTooltip}
+ />
+ </div>
+
+ {!onlyImage && (
+ <div className="file-item-name">{shrinkWord(file.name)}</div>
+ )}
+ {
+ //resultOnTooltip && (
+ <Tooltip
+ open={resultOnTooltip && hovering}
+ //open={true}
+ uploadStatus={uploadStatus}
+ valid={valid}
+ errors={errors}
+ uploadMessage={uploadMessage}
+ ></Tooltip>
+ //)
+ }
+ {downloadUrl && (
+ <a
+ hidden
+ ref={dui_anchor_ref}
+ href={downloadUrl}
+ download={file.name}
+ >
+ download_file
+ </a>
+ )}
+ </div>
+ );
+ } else {
+ return (
+ <React.Fragment>
+ <FuiSkeleton />
+ </React.Fragment>
+ );
+ }
+ } else {
+ return <React.Fragment></React.Fragment>;
+ }
+};
+export default FileItem;
diff --git a/src/files-ui/components/file-item/components/FileItem/FileItemProps.ts b/src/files-ui/components/file-item/components/FileItem/FileItemProps.ts
new file mode 100644
index 0000000000000000000000000000000000000000..7f5366bac2e083037293eb353739b605e96e66ed
--- /dev/null
+++ b/src/files-ui/components/file-item/components/FileItem/FileItemProps.ts
@@ -0,0 +1,199 @@
+import { Localization, UPLOADSTATUS } from "../../../../core";
+import { OverridableComponentProps } from "../../../overridable";
+
+export interface FileItemPropsMap extends OverridableComponentProps {
+ /**
+ * The file object obtained from client drop or selection
+ */
+ file?: File;
+ /**
+ * The name of the file
+ */
+ name?: string;
+ /**
+ * The file mime type
+ */
+ type?: string;
+ /**
+ * the size of the file in bytes
+ */
+ size?: number;
+ /**
+ * A function of what to do when close button is pressed or clicked
+ */
+ onDelete?: (fileId: number | string | undefined) => void;
+ /**
+ * A function that return a file object when "see" button is pressed or clicked
+ */
+ onSee?: (imageUrl: string) => void;
+ /**
+ * A function that return a file object when "play" button is presssed or clicked
+ */
+ onWatch?: (videoUrl: File) => void;
+ /**
+ * Whether to see as grid or inline (horizontal list)
+ */
+ errors?: string[];
+ /**
+ * individual validator for each file
+ */
+ //validator?: FileItemValidator;
+ /**
+ * identifier for the file
+ */
+ id?: string | number;
+ /**
+ * if true, and if the file is an image,
+ * makes visible the "view" button that will get the image url
+ * Also, it will be visible only when file is valid
+ */
+ preview?: boolean;
+ /**
+ * whether to show a valid or rejected message ("ok", "rejected")
+ * by def. valid is false (if not present, it's false too)
+ * This value wil affect preview behaviour,
+ * If not valid, the preview will not be shown, nor the view button
+ */
+ valid?: boolean | null;
+ /**
+ * This feature is hidden, it is not present on the documentation
+ * because it's experimental. If you found this prop, you can test it
+ * and comment us if any issue is found. Thanks in advance.
+ *
+ * Make file name, info layer, size and "valid message"
+ * not visible
+ */
+ onlyImage?: boolean;
+ /**
+ * whether to show the info layer or not
+ * and whether to make visible the info button or not.
+ * Only works when image file is given
+ */
+ info?: boolean;
+ /**
+ * A string representation or web url of the image
+ * that will be set to the "src" prop of an <img/> tag
+ * <img src={`${url}`} />
+ */
+ imageUrl?: string;
+ /**
+ * The message from server
+ */
+ uploadMessage?: string;
+ /**
+ * where to place the file name
+ * [in construction]
+ */
+ //fileName?: "bottom" | "inside";
+ /**
+ * The current upload status of the file
+ */
+ uploadStatus?: UPLOADSTATUS;
+ /**
+ * If present, preview on full screen will
+ * be presented in the real image resolution
+ */
+ hd?: boolean | undefined;
+ /**
+ * language to be used
+ * for now
+ * only English and Spanish is supported
+ */
+ localization?: Localization;
+ /**
+ * The elevation or shadow of container
+ * range of shadows is from 0 to 4,
+ * other number o values are considered as 0
+ */
+ elevation?: "1" | "2" | "3" | "4" | 1 | 2 | 3 | 4 | false;
+ /**
+ * Flag that determines whether actions are visible always, or only on hover event
+ */
+ alwaysActive?: boolean;
+ /**
+ * Where to display result of validation: on InfoLayer or in Tooltip when user hovers the FileItem
+ */
+ resultOnTooltip?: boolean;
+ /**
+ * Url to perform a GET request in order to download the file.
+ * This action is triggered when download button is clicked or pressed.
+ * In case onDownload prop is given
+ */
+ downloadUrl?: string;
+ /**
+ * Event that is triggered when download button is clicked or pressed
+ */
+ onDownload?: (fileId: number | string | undefined, downloadUrl?: string) => void;
+ /**
+ * the current percentage upload progress
+ *
+ */
+ progress?: number;
+ /**
+ * Whether to show progress or not.
+ * @default true if xhr is initialized
+ * @default false if xhr is not given
+ */
+ showProgress?: boolean;
+ /**
+ * abort event
+ */
+ onAbort?: Function;
+ /**
+ * cancel when preparing event
+ */
+ onCancel?: Function;
+ /**
+ * A reference to the XHR object that allows the upload and abort event.
+ * and progress
+ */
+ xhr?: XMLHttpRequest;
+ /**
+ * Event that is triggered when user duble clicks the component
+ */
+ onDoubleClick?: (evt: React.MouseEvent) => void;
+ /**
+ * Event that is triggered when user duble clicks the component
+ */
+ onRightClick?: (evt: React.MouseEvent) => void;
+
+ /**
+ * Flag that indicates whether to show a background blur image or not
+ */
+ backgroundBlurImage?: boolean;
+ /**
+ * Flag that indicates whether to activates dark mode for component or not
+ */
+ darkMode?: boolean;
+}
+
+export type FileItemProps = {
+ [F in keyof FileItemPropsMap]: FileItemPropsMap[F]
+}
+
+/**
+ * Base default props
+ */
+export const FileItemPropsDefault: FileItemProps = {
+ onDelete: undefined,
+ file: undefined,
+ color: "#071e25",
+ // validator: undefined,
+ id: undefined,
+ style: {},
+ preview: false,
+ valid: undefined,
+ info: false,
+ hd: undefined,
+ localization: "EN-en",
+ onlyImage: false,
+ imageUrl: undefined,
+ errors: undefined,
+ elevation: false,
+ alwaysActive: undefined,
+ progress: undefined,
+ resultOnTooltip: true,
+ backgroundBlurImage: true,
+ darkMode: false,
+ //fileName: "bottom"
+}
diff --git a/src/files-ui/components/file-item/components/FileItem/FileItemPropsNeo.ts b/src/files-ui/components/file-item/components/FileItem/FileItemPropsNeo.ts
new file mode 100644
index 0000000000000000000000000000000000000000..81fa8390ddecae3d7d79383bc23996f721524469
--- /dev/null
+++ b/src/files-ui/components/file-item/components/FileItem/FileItemPropsNeo.ts
@@ -0,0 +1,167 @@
+import { Localization, UPLOADSTATUS } from "../../../../core";
+import { OverridableComponentProps } from "../../../overridable";
+
+
+
+export interface FileItemPropsNeoMap extends OverridableComponentProps {
+ /**
+ * The file object
+ */
+ file?: File;
+ /**
+ * A function of what to do when close button is pressed or clicked
+ */
+ onDelete?: (fileId: number | string | undefined) => void;
+ /**
+ * A function that return a file object when "see" button is pressed or clicked
+ */
+ onSee?: (imageUrl: string) => void;
+ /**
+ * A function that return a file object when "play" button is presssed or clicked
+ */
+ onWatch?: (videoUrl: File) => void;
+ /**
+ * Whether to see as grid or inline (horizontal list)
+ */
+ errors?: string[];
+ /**
+ * individual validator for each file
+ */
+ //validator?: FileItemValidator;
+ /**
+ * identifier for the file
+ */
+ id?: string | number;
+ /**
+ * if true, and if the file is an image,
+ * makes visible the "view" button that will get the image url
+ * Also, it will be visible only when file is valid
+ */
+ preview?: boolean;
+ /**
+ * whether to show a valid or rejected message ("ok", "rejected")
+ * by def. valid is false (if not present, it's false too)
+ * This value wil affect preview behaviour,
+ * If not valid, the preview will not be shown, nor the view button
+ */
+ valid?: boolean | null;
+ /**
+ * This feature is hidden, it is not present on the documentation
+ * because it's experimental. If you found this prop, you can test it
+ * and comment us if any issue is found. Thanks in advance.
+ *
+ * Make file name, info layer, size and "valid message"
+ * not visible
+ */
+ onlyImage?: boolean;
+ /**
+ * whether to show the info layer or not
+ * also whether to make visible the info button or not ,
+ * Only works when given a image file
+ */
+ info?: boolean;
+ /**
+ * A string representation or web url of the image
+ * that will be set to the "src" prop of an <img/> tag
+ * <img src={`${url}`} />
+ */
+ imageUrl?: string;
+ /**
+ * The message from server
+ */
+ uploadMessage?: string;
+ /**
+ * where to place the file name
+ * [in construction]
+ */
+ //fileName?: "bottom" | "inside";
+ /**
+ * The current upload status of the file
+ */
+ uploadStatus?: UPLOADSTATUS;
+ /**
+ * If present, preview on full screen will
+ * be presented in the real image resolution
+ */
+ hd?: boolean | undefined;
+ /**
+ * language to be used
+ * for now
+ * only English and Spanish is supported
+ */
+ localization?: Localization;
+ /**
+ * The elevation or shadow of container
+ * range of shadows is from 0 to 4,
+ * other number o values are considered as 0
+ */
+ elevation?: "1" | "2" | "3" | "4" | 1 | 2 | 3 | 4 | false;
+ /**
+ * Flag that determines whether actions are visible always, or only on hover event
+ */
+ alwaysActive?: boolean;
+ /**
+ * Where to display result of validation: on InfoLayer or in Tooltip when user hovers the FileItem
+ */
+ resultOnTooltip?: boolean;
+ /**
+ * Url to perform a GET request in order to download the file.
+ * This action is triggered when download button is clicked or pressed.
+ * In case onDownload prop is given
+ */
+ downloadUrl?: string;
+ /**
+ * Event that is triggered when download button is clicked or pressed
+ */
+ onDownload?: (fileId: number | string | undefined, downloadUrl?: string) => void;
+ /**
+ * the current percentage upload progress
+ *
+ */
+ progress?: number;
+ /**
+ * Whether to show progress or not.
+ * @default true if xhr is initialized
+ */
+ showProgress?: boolean;
+ /**
+ * abort event
+ */
+ onAbort?: Function;
+ /**
+ * cancel when preparing event
+ */
+ onCancel?: Function;
+ /**
+ * A reference to the XHR object that allows the upload and abort event.
+ * and progress
+ */
+ xhr?: XMLHttpRequest;
+}
+export type FileItemPropsNeo = {
+ [F in keyof FileItemPropsNeoMap]: FileItemPropsNeoMap[F]
+}
+/**
+ * Base default props
+ */
+export const FileItemNeoPropsDefault: FileItemPropsNeo = {
+ onDelete: undefined,
+ file: undefined,
+ //color: "#071e25",
+ // validator: undefined,
+ id: undefined,
+ style: {},
+ preview: false,
+ valid: undefined,
+ info: false,
+ hd: undefined,
+ localization: "EN-en",
+ onlyImage: false,
+ imageUrl: undefined,
+ errors: undefined,
+ elevation: false,
+ alwaysActive: undefined,
+ progress: undefined,
+ showProgress: true
+ //fileName: "bottom"
+}
diff --git a/src/files-ui/components/file-item/components/FileItem/useFileItemNeoInitializer.ts b/src/files-ui/components/file-item/components/FileItem/useFileItemNeoInitializer.ts
new file mode 100644
index 0000000000000000000000000000000000000000..94e5c582a215ffafd552d17de1ef5d948369f525
--- /dev/null
+++ b/src/files-ui/components/file-item/components/FileItem/useFileItemNeoInitializer.ts
@@ -0,0 +1,90 @@
+import * as React from "react";
+import { getURLFileIco, readAsDataURL } from "../../../../core";
+
+/**
+ * Initializer hook for FileItemNeo
+ * @param file The file Object
+ * @param valid Whether the file is valid, not valid or not set
+ * @param preview Whether to show a preview on FileItem
+ * @param imageUrl The image url
+ * @param xhr the xhr object
+ * @param progress the current progress given by props
+ * @returns an array thta contains the following properties [isImage, isVideo, url, imageSource, localProgress]
+ */
+const useFileItemNeoInitializer = (
+ file: File | undefined,
+ valid: boolean | undefined | null,
+ preview: boolean,
+ imageUrl: string | undefined,
+ xhr?: XMLHttpRequest,
+
+): [boolean, boolean, string, string | undefined] => {
+
+ const [isImage, setIsImage] = React.useState<boolean>(false);
+ const [isVideo, setIsVideo] = React.useState<boolean>(false);
+ const [url, setUrl] = React.useState<string>("");
+ const [imageSource, setImageSource] = React.useState<string | undefined>(undefined);
+
+
+
+ const init = async (
+ file: File | undefined,
+ valid: boolean | undefined | null,
+ preview: boolean,
+ imageUrl: string | undefined,
+ xhr?: XMLHttpRequest,
+ progress?: number
+ ) => {
+ //////////////////////////////
+ if (!file) return;
+ const { url } = getURLFileIco(file as File);
+ //console.log("init", url);
+ setUrl(url);
+ if (imageUrl) {
+ setIsImage(true);
+ setImageSource(imageUrl);
+ return;
+ } else {
+ const headerMime: string = file.type ? file.type.split("/")[0] : "octet";
+ const tailMime: string = file.type ? file.type.split("/")[1] : "octet";
+ setIsImage(headerMime === "image");
+ setIsVideo(
+ headerMime === "video" && ["mp4", "ogg", "webm"].includes(tailMime)
+ );
+ if (
+ preview &&
+ (valid || typeof valid === "undefined" || valid === null) &&
+ headerMime === "image"
+ ) {
+ const response = await readAsDataURL(file);
+ //console.log("response image", response);
+ if (response) {
+ setImageSource(response as string);
+ //check if resize image is enabled
+ } else {
+ setImageSource(undefined);
+ }
+ }
+ }
+ /////////////// UPLOAD OBJECT ///////////////
+
+ //if (!localProgress) {
+ //handleProgress(1);
+ //}
+ };
+
+
+
+ ////// EFFECT
+ React.useEffect(() => {
+ init(file, valid, preview || false, imageUrl);
+ return () => {
+ setImageSource(undefined);
+ setIsImage(false);
+ setIsVideo(false);
+ };
+ // eslint-disable-next-line
+ }, [file, valid, preview, imageUrl,]);
+ return [isImage, isVideo, url, imageSource];
+}
+export default useFileItemNeoInitializer;
\ No newline at end of file
diff --git a/src/files-ui/components/file-item/components/FileItemContainer/FileItemContainer.scss b/src/files-ui/components/file-item/components/FileItemContainer/FileItemContainer.scss
new file mode 100644
index 0000000000000000000000000000000000000000..c6360df97f6d598e21696943e631e8503a522517
--- /dev/null
+++ b/src/files-ui/components/file-item/components/FileItemContainer/FileItemContainer.scss
@@ -0,0 +1,49 @@
+.file-item-list-container {
+ // padding: 5px;
+ //z-index: 1;
+ &::-webkit-scrollbar {
+ width: 9px;
+ }
+ &::-webkit-scrollbar-track {
+ background: transparent;
+ }
+ &::-webkit-scrollbar-thumb {
+ background-color: #646c7fa9;
+ border-radius: 20px;
+ border: transparent;
+ }
+ //margin: 25px 0;
+ //background-color: rgba(255, 255, 255, 0.596);
+ background-color: transparent;
+ color: black;
+ height: 100%;
+ //width: 100%;
+ width: 100%;
+ //margin: 100px 0;
+ //width: inherit;
+
+ // padding: 2%;
+ align-items: center;
+ scrollbar-width: thin;
+ &.file-item-list-grid {
+ overflow: auto;
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ justify-content: space-evenly;
+ }
+ &.file-item-list-no-scroll{
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ justify-content: space-evenly;
+ overflow: unset;
+ }
+ &.file-item-list-list {
+ overflow: auto;
+ //flex-wrap: wrap;
+ align-items: center;
+ //justify-content: center;
+ display: inline-flex;
+ }
+}
diff --git a/src/files-ui/components/file-item/components/FileItemContainer/FileItemContainer.tsx b/src/files-ui/components/file-item/components/FileItemContainer/FileItemContainer.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..a61211c3b26d787f6d1cbce529d0f9168664d002
--- /dev/null
+++ b/src/files-ui/components/file-item/components/FileItemContainer/FileItemContainer.tsx
@@ -0,0 +1,26 @@
+import "./FileItemContainer.scss";
+
+import React, { FC } from "react";
+import { FileItemContainerProps } from "./FileItemContainerProps";
+
+const FileItemContainer: FC<FileItemContainerProps> = (
+ props: FileItemContainerProps,
+) => {
+ const { children, view, style, disableScroll } = props;
+ const finalView = disableScroll ? "no-scroll" : view || "list";
+ /* function handleClick<T extends HTMLDivElement>(
+ e: React.MouseEvent<T, MouseEvent>
+ ): void {
+ e.preventDefault();
+ } */
+ return (
+ <div
+ className={`file-item-list-container file-item-list-${finalView}`}
+ style={style}
+ //onClick={handleClick}
+ >
+ {children}
+ </div>
+ );
+};
+export default FileItemContainer;
diff --git a/src/files-ui/components/file-item/components/FileItemContainer/FileItemContainerProps.ts b/src/files-ui/components/file-item/components/FileItemContainer/FileItemContainerProps.ts
new file mode 100644
index 0000000000000000000000000000000000000000..aa3cc9463dad11e4b2ad9eea988ab824099fbcca
--- /dev/null
+++ b/src/files-ui/components/file-item/components/FileItemContainer/FileItemContainerProps.ts
@@ -0,0 +1,15 @@
+import { OverridableComponentProps } from "../../../overridable";
+
+export interface FileItemContainerProps extends OverridableComponentProps {
+ /**
+ * `grid` will display files in a grid layout. `list` will display
+ * files in a horizontal list.
+ * Convenient for saving space in page.
+ */
+ view?: "grid" | "list";
+ /**
+ * if present or true, removes scrolls
+ * and sets the Dropzone in a grid view
+ */
+ disableScroll?: boolean;
+}
\ No newline at end of file
diff --git a/src/files-ui/components/file-item/components/FileItemFullInfoLayer/FileItemFullInfoLayer.tsx b/src/files-ui/components/file-item/components/FileItemFullInfoLayer/FileItemFullInfoLayer.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..e0d859f802e988f0f8bedcc7f791593130545305
--- /dev/null
+++ b/src/files-ui/components/file-item/components/FileItemFullInfoLayer/FileItemFullInfoLayer.tsx
@@ -0,0 +1,118 @@
+import * as React from "react";
+import {
+ FileItemLocalizerSelector,
+ Localization,
+ LocalLabels,
+ UPLOADSTATUS,
+} from "../../../../core";
+import { Cancel } from "../../../icons";
+import FileItemStatus from "../FileItemStatus/FileItemStatus";
+
+const FileItemFullInfoLayer: React.FC<FileItemFullInfoLayerProps> = (
+ props: FileItemFullInfoLayerProps
+) => {
+ const {
+ showInfo,
+ valid,
+ onClose,
+ fileName,
+ fileSize,
+ fileType,
+ uploadStatus,
+ uploadMessage,
+ localization,
+ errors,
+ resultOnTooltip,
+ } = props;
+ const FileItemFullInfoLocalizer: LocalLabels = FileItemLocalizerSelector(
+ localization as Localization
+ ).fullInfoLayer as LocalLabels;
+ const handleCloseInfo = () => {
+ onClose?.();
+ };
+ return (
+ <div className={showInfo ? "full-info" : "full-info hide"}>
+ <span
+ style={{
+ display: "flex",
+ flexWrap: "wrap",
+ alignItems: "center",
+ justifyContent: "space-between",
+ }}
+ >
+ <Cancel
+ style={{ margin: 0, right: 0, top: 0 }}
+ color="rgba(255,255,255,0.8)"
+ onClick={handleCloseInfo}
+ colorFill="black"
+ />
+ {uploadStatus && uploadStatus !== "uploading" ? (
+ <FileItemStatus
+ uploadStatus={uploadStatus}
+ localization={localization as Localization}
+ />
+ ) : (
+ <FileItemStatus
+ valid={valid}
+ localization={localization as Localization}
+ />
+ )}
+ </span>
+
+ {!resultOnTooltip && !uploadMessage && errors && errors.length > 0 && (
+ <div className={`name error`}>
+ {errors.map((error, index) => (
+ <div key={index + 1}>{`- ${error}.\n`}</div>
+ ))}
+ </div>
+ )}
+ {!resultOnTooltip && uploadMessage && (
+ <div className={`name ${uploadStatus}`}>{uploadMessage}</div>
+ )}
+ <div className="name">
+ <span className="sub-label">
+ {FileItemFullInfoLocalizer.name as string}
+ {/* localization === "ES-es" ? "Nombre: " : "Name: " */}
+ </span>
+ </div>
+ <div className="name">{fileName}</div>
+ {/** FILE SIZE */}
+ <div className="size">
+ <span className="sub-label">
+ {FileItemFullInfoLocalizer.size as string}
+ </span>
+ </div>
+ <div className="name">{fileSize}</div>
+ {/** FILE TYPE */}
+ <div className="mime">
+ <span className="sub-label">
+ {FileItemFullInfoLocalizer.type as string}
+ </span>
+ </div>
+ {fileType && <div className="mime">{fileType}</div>}
+ </div>
+ );
+};
+export default FileItemFullInfoLayer;
+
+export interface FileItemFullInfoLayerProps {
+ showInfo: boolean;
+ fileName: string;
+ fileSize: string;
+ fileType?: string;
+ valid?: boolean | null;
+ onClose: Function;
+ uploadMessage?: string;
+ uploadStatus?: UPLOADSTATUS;
+ /**
+ * language to be used
+ * for now
+ * only English and Spanish is supported
+ */
+ localization?: Localization;
+ errors?: string[];
+ /**
+ * Whether to display result of validation on InfoLayer or in tooltip on Hover FileItem
+ */
+ resultOnTooltip?: boolean;
+}
diff --git a/src/files-ui/components/file-item/components/FileItemImage/FileItemImage.scss b/src/files-ui/components/file-item/components/FileItemImage/FileItemImage.scss
new file mode 100644
index 0000000000000000000000000000000000000000..6bba9ac25397b7af26585c8110bfafe5090e0722
--- /dev/null
+++ b/src/files-ui/components/file-item/components/FileItemImage/FileItemImage.scss
@@ -0,0 +1,34 @@
+.fui-img-container {
+ &.blur {
+ img {
+ filter: blur(4px);
+ width: 200%;
+ height: 200%;
+ }
+ }
+ &.card {
+ position: relative;
+ width: 80px;
+ //height: 80px;
+ }
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: inherit;
+ height: inherit;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ overflow: hidden;
+ border-radius: 8px;
+ //z-index: -1;
+ img {
+ //filter: blur(0);
+ width: 100%;
+ //height: 100%;
+ background-repeat: no-repeat;
+ background-size: cover;
+ background-position: center;
+ }
+}
diff --git a/src/files-ui/components/file-item/components/FileItemImage/FileItemImage.tsx b/src/files-ui/components/file-item/components/FileItemImage/FileItemImage.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..a557543c96df541fd34bca5b5720560dec5b851d
--- /dev/null
+++ b/src/files-ui/components/file-item/components/FileItemImage/FileItemImage.tsx
@@ -0,0 +1,58 @@
+import * as React from "react";
+import { ImagePreview } from "../../../previews";
+import "./FileItemImage.scss";
+export interface FileItemImageProps {
+ /**
+ * The image source
+ */
+ imageSource: string | undefined;
+ /**
+ * the url file icon
+ */
+ url: string;
+ /**
+ * The name to be used as alt
+ */
+ fileName: string;
+ /**
+ * Flag that indicates whether to show a background blur image or not
+ */
+ backgroundBlurImage: boolean;
+ /**
+ *
+ */
+ card?: boolean;
+}
+
+const FileItemImage: React.FC<FileItemImageProps> = (
+ props: FileItemImageProps
+) => {
+ const { imageSource, url, fileName, backgroundBlurImage, card } = props;
+ const [source, setSource] = React.useState<string | undefined>(undefined);
+ const [error, setError] = React.useState<boolean>(false);
+ React.useEffect(() => {
+ setSource(imageSource || url);
+ }, [imageSource, url]);
+ const handleError = () => {
+ setError(true);
+ setSource(url);
+ };
+ return (
+ <React.Fragment>
+ {!card && backgroundBlurImage && imageSource && !error && (
+ <div className="fui-img-container blur">
+ <ImagePreview src={imageSource} alt={`blur ${fileName}`} />
+ </div>
+ )}
+ <div className={!card ? "fui-img-container" : "fui-img-container card"}>
+ <ImagePreview
+ onError={handleError}
+ src={source}
+ style={{ borderRadius: "0px" }}
+ alt={`preview ${fileName}`}
+ />
+ </div>
+ </React.Fragment>
+ );
+};
+export default FileItemImage;
diff --git a/src/files-ui/components/file-item/components/FileItemImage/FileItemImageNeo.scss b/src/files-ui/components/file-item/components/FileItemImage/FileItemImageNeo.scss
new file mode 100644
index 0000000000000000000000000000000000000000..2c8763f883114987478426dde35b042bd0b06e31
--- /dev/null
+++ b/src/files-ui/components/file-item/components/FileItemImage/FileItemImageNeo.scss
@@ -0,0 +1,29 @@
+.dui-img-container {
+ &.blur {
+ img {
+ filter: blur(4px);
+ width: 200%;
+ height: 200%;
+ }
+ }
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: inherit;
+ height: inherit;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ overflow: hidden;
+ border-radius: 8px;
+ //z-index: -1;
+ img {
+ //filter: blur(0);
+ width: 100%;
+ //height: 100%;
+ background-repeat: no-repeat;
+ background-size: cover;
+ background-position: center;
+ }
+ }
\ No newline at end of file
diff --git a/src/files-ui/components/file-item/components/FileItemImage/FileItemImageNeo.tsx b/src/files-ui/components/file-item/components/FileItemImage/FileItemImageNeo.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..88993471f8af008a6c406be22c8bee90735c9557
--- /dev/null
+++ b/src/files-ui/components/file-item/components/FileItemImage/FileItemImageNeo.tsx
@@ -0,0 +1,46 @@
+import * as React from "react";
+import { ImagePreview } from "../../../previews";
+import "./FileItemImageNeo.scss";
+export interface FileItemImageNeoProps {
+ /**
+ * The image source
+ */
+ imageSource: string | undefined;
+ /**
+ * the url file icon
+ */
+ url: string;
+ /**
+ * The name to be used as alt
+ */
+ fileName: string;
+}
+
+const FileItemImageNeo: React.FC<FileItemImageNeoProps> = (
+ props: FileItemImageNeoProps
+) => {
+ const { imageSource, url, fileName } = props;
+ return (
+ <React.Fragment>
+ {imageSource && (
+ <div className="dui-img-container blur">
+ <ImagePreview
+ //className="dui-img-container blur"
+
+ src={imageSource}
+ alt={`blur ${fileName}`}
+ />
+ </div>
+ )}
+ <div className="dui-img-container">
+ <ImagePreview
+ // className="dui-img-container"
+ src={imageSource || url}
+ style={{ borderRadius: "0px" }}
+ alt={`preview ${fileName}`}
+ />
+ </div>
+ </React.Fragment>
+ );
+};
+export default FileItemImageNeo;
diff --git a/src/files-ui/components/file-item/components/FileItemMainLayer/FileItemLoader/FileItemLoader.scss b/src/files-ui/components/file-item/components/FileItemMainLayer/FileItemLoader/FileItemLoader.scss
new file mode 100644
index 0000000000000000000000000000000000000000..eb1e1d29f5e7895420292eeceb47994c6fdae58a
--- /dev/null
+++ b/src/files-ui/components/file-item/components/FileItemMainLayer/FileItemLoader/FileItemLoader.scss
@@ -0,0 +1,76 @@
+.dui-loader-container {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.svg_circle_loader {
+ border-radius: 50%;
+}
+
+text.dui-text-dynamic-loader {
+ text-anchor: middle;
+ font-size: 1em;
+ fill: aliceblue;
+}
+.loader-container {
+ height: 60px;
+ width: 60px;
+ position: relative;
+ outline: 1px solid skyblue;
+}
+
+////////////////////////////////////
+
+.dui-main-loader-container {
+ position: relative;
+ min-width: 60px;
+ min-height: 60px;
+ background-color: rgba(0, 0, 0, 0.41);
+ border-radius: 50%;
+
+ &.clickable{
+ cursor: pointer;
+ }
+ &:hover {
+ background-color: rgba(0, 0, 0, 0.61);
+ }
+ .dui-abort-icon-container {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+ .dui-dynamic-preparing-loader-container {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+}
+.x-button-abort {
+ position: absolute;
+ left: 8px;
+ top: 8px;
+ width: calc(100% - 16px);
+ height: calc(100% - 16px);
+ border-radius: 50%;
+ overflow: hidden;
+ fill: rgba(255, 255, 255, 0.808);
+}
+.x-button-abort:hover {
+ fill: rgba(255, 255, 255, 0.925);
+}
+.circle_loader {
+ fill: none;
+ stroke: #14ff00;
+ stroke-width: 6px;
+ transform-origin: center;
+ transform: rotate(-90deg);
+}
diff --git a/src/files-ui/components/file-item/components/FileItemMainLayer/FileItemLoader/FileItemLoader.tsx b/src/files-ui/components/file-item/components/FileItemMainLayer/FileItemLoader/FileItemLoader.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..2645bd89361afcd0555390488a4883626b27ffd2
--- /dev/null
+++ b/src/files-ui/components/file-item/components/FileItemMainLayer/FileItemLoader/FileItemLoader.tsx
@@ -0,0 +1,142 @@
+import * as React from "react";
+import { FileItemLocalizerSelector, Localization, LocalLabels, UPLOADSTATUS } from "../../../../../core";
+import { Clear } from "../../../../icons";
+import { DynamicLoader, BasePreparingLoader } from "../../../../loader";
+import DefaultLoaderNeo from "../../../../loader/DefaultLoader/DefaultLoader";
+import FileItemStatus from "../../FileItemStatus/FileItemStatus";
+import "./FileItemLoader.scss";
+interface FileItemLoaderProps {
+ height?: number;
+ width?: number;
+ uploadStatus?: UPLOADSTATUS;
+ /**
+ * language to be used for now
+ * only English, Russian, Chinesse, French, protuguese and Spanish is supported
+ */
+ localization?: Localization;
+ /**
+ * the current percentage upload progress
+ */
+ progress?: number;
+ /**
+ * abort event
+ */
+ onAbort?: Function;
+ /**
+ * cancel event
+ */
+ onCancel?: Function;
+}
+const FileItemLoader: React.FC<FileItemLoaderProps> = (
+ props: FileItemLoaderProps
+) => {
+ const {
+ uploadStatus,
+ localization,
+ progress,
+ onAbort,
+ width,
+ //height,
+ onCancel,
+ } = props;
+ //console.log("uploadStatus cancel",uploadStatus, onCancel);
+ const FileItemStatusLocalizer: LocalLabels = FileItemLocalizerSelector(
+ localization
+ ).status as LocalLabels;
+ // console.log("Loader", progress);
+ const circleRef: React.RefObject<SVGCircleElement> =
+ React.useRef<SVGCircleElement>(null);
+
+ function setProgress(
+ percent: number,
+ myCircle: SVGCircleElement,
+ circumference: number
+ ) {
+ myCircle.style.strokeDashoffset = `${circumference * (1 - percent / 100)}`;
+ }
+
+ React.useEffect(() => {
+ const myCircle: SVGCircleElement | null = circleRef.current;
+ if (myCircle && progress) {
+ //console.log("CIRCLE", progress, progress === 0 ? 1 : progress);
+ let circumference: number = 2 * Math.PI * myCircle.r.baseVal.value;
+ myCircle.style.strokeDasharray = `${circumference} 1000`;
+ setProgress(progress === 0 ? 1 : progress, myCircle, circumference);
+ }
+ }, [progress]);
+ const handleAbort = () => {
+ onAbort?.();
+ };
+ const handleCancel = () => {
+ onCancel?.();
+ };
+ //console.log("Loader onCancel", onCancel);
+ if (!uploadStatus) {
+ return <></>;
+ }
+ return (
+ <React.Fragment>
+ {uploadStatus === "preparing" && (
+ <React.Fragment>
+ <div
+ className="dui-main-loader-container clickable"
+ onClick={handleCancel}
+ >
+ {onCancel && (
+ <div className="dui-abort-icon-container">
+ <Clear
+ color="rgba(255,255,255,0.70)"
+ size={60}
+ colorFill="transparent"
+ />
+ </div>
+ )}
+
+ <div className="dui-dynamic-preparing-loader-container">
+ <BasePreparingLoader size={width || 60} x={50} y={50} radius={46} />
+ </div>
+ </div>
+ </React.Fragment>
+ )}
+
+ {uploadStatus === "uploading" && (
+ <React.Fragment>
+ {typeof progress === "undefined" ? (
+ <DefaultLoaderNeo
+ label={FileItemStatusLocalizer.uploading as string}
+ />
+ ) : (
+ <div
+ className={`dui-main-loader-container${
+ onAbort ? " clickable" : ""
+ }`}
+ onClick={handleAbort}
+ >
+ <div className="dui-abort-icon-container">
+ {onAbort && (
+ <Clear
+ color="rgba(255,255,255,0.70)"
+ size={60}
+ colorFill="transparent"
+ />
+ )}
+ </div>
+ <div className="dui-dynamic-preparing-loader-container">
+ <DynamicLoader
+ size={width || 60}
+ x={30}
+ y={30}
+ radius={27}
+ percentage={progress}
+ width={6}
+ hidePerncentage={onAbort !== undefined}
+ />
+ </div>
+ </div>
+ )}
+ </React.Fragment>
+ )}
+ </React.Fragment>
+ );
+};
+export default FileItemLoader;
diff --git a/src/files-ui/components/file-item/components/FileItemMainLayer/FileItemSize.scss b/src/files-ui/components/file-item/components/FileItemMainLayer/FileItemSize.scss
new file mode 100644
index 0000000000000000000000000000000000000000..2ffe154f923c891c9a3143862d8600097d853b55
--- /dev/null
+++ b/src/files-ui/components/file-item/components/FileItemMainLayer/FileItemSize.scss
@@ -0,0 +1,19 @@
+.dui-file-item-size {
+ font-size: 0.7rem;
+ border: 0.5px solid wheat;
+ //outline: 0.5px solid wheat;
+ text-align: center;
+ //border: none;
+ color: rgba(255, 255, 255, 0.89);
+ //margin: 1.5px 1.5px 0% 0%;
+ padding: 2px 1.5px;
+ border-radius: 7px;
+ background-color: rgba(32, 33, 36, 0.75);
+ min-width: 45px;
+ word-break: break-word;
+ font-family: inherit;
+ &:hover {
+ background-color: rgba(32, 33, 36, 0.85);
+ color: rgba(255, 255, 255, 0.97);
+ }
+}
diff --git a/src/files-ui/components/file-item/components/FileItemMainLayer/FileItemSize.tsx b/src/files-ui/components/file-item/components/FileItemMainLayer/FileItemSize.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..4f431faaa02967d5ae1d872a560b0eb3ce717722
--- /dev/null
+++ b/src/files-ui/components/file-item/components/FileItemMainLayer/FileItemSize.tsx
@@ -0,0 +1,18 @@
+import * as React from "react";
+import "./FileItemSize.scss";
+export type FileItemSizeProps = {
+ sizeFormatted?: string;
+};
+const FileItemSize: React.FC<FileItemSizeProps> = (
+ props: FileItemSizeProps
+) => {
+ const { sizeFormatted } = props;
+ return (
+ <React.Fragment>
+ {sizeFormatted && (
+ <div className="dui-file-item-size">{sizeFormatted}</div>
+ )}
+ </React.Fragment>
+ );
+};
+export default FileItemSize;
diff --git a/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayer/FileItemMainLayer.scss b/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayer/FileItemMainLayer.scss
new file mode 100644
index 0000000000000000000000000000000000000000..b72e2de0161a506e0aa4345ce276bc3ece9028fd
--- /dev/null
+++ b/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayer/FileItemMainLayer.scss
@@ -0,0 +1,13 @@
+.dui-main-layer-container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: space-between;
+ position: relative;
+ height: inherit;
+ width: 100%;
+ border-radius: 8px;
+ &.loading{
+ background-color: rgba(0, 0, 0, 0.185);
+ }
+}
\ No newline at end of file
diff --git a/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayer/FileItemMainLayer.tsx b/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayer/FileItemMainLayer.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..716a3eda50cad83872c09e421c868bba7e87aa16
--- /dev/null
+++ b/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayer/FileItemMainLayer.tsx
@@ -0,0 +1,111 @@
+import * as React from "react";
+import "./FileItemMainLayer.scss";
+
+import MainLayerHeaderNeo from "../MainLayerHeader/MainLayerHeaderNeo";
+import MainLayerBodyNeo from "../MainLayerBody/MainLayerBodyNeo";
+import MainLayerFooterNeo from "../MainLayerFooter/MainLayerFooterNeo";
+import { Localization, UPLOADSTATUS } from "../../../../../core";
+
+export interface FileItemMainLayerProps {
+ onOpenInfo: Function;
+ onOpenImage: Function | undefined;
+ onOpenVideo: Function | undefined;
+ onDelete: Function | undefined;
+ onDownloadFile: Function | undefined;
+ //fileNamePosition: FileItemProps["fileName"];
+ fileName: string;
+ info: boolean;
+ /**
+ * whether show a valid or rejected message
+ * by def. valid is false (if not present, is false too)
+ */
+ valid?: boolean | null;
+ isImage: boolean;
+ isVideo: boolean;
+ uploadStatus?: UPLOADSTATUS;
+ sizeFormatted: string;
+ /**
+ * language to be used
+ * for now
+ * only English and Spanish is supported
+ */
+ localization?: Localization;
+ hovering?: boolean;
+ /**
+ * the current percentage upload progress
+ *
+ */
+ progress?: number;
+ /**
+ * abort event
+ */
+ onAbort?: Function;
+ onCancel?: Function;
+ showInfo: boolean;
+}
+
+const FileItemMainLayer: React.FC<FileItemMainLayerProps> = (
+ props: FileItemMainLayerProps
+) => {
+ const {
+ onDelete,
+ info,
+ valid,
+ isImage,
+ isVideo,
+ showInfo,
+ onOpenInfo,
+ onOpenImage,
+ onOpenVideo,
+ onDownloadFile,
+ sizeFormatted,
+ uploadStatus,
+ localization,
+ hovering,
+ progress,
+ onAbort,
+ onCancel,
+ } = props;
+ //console.log("MainLayer onCancel", onCancel);
+
+ return (
+ <React.Fragment>
+ <div className={"dui-main-layer-container"}>
+ <MainLayerHeaderNeo
+ hide={showInfo}
+ onDelete={onDelete}
+ uploadStatus={uploadStatus}
+ hovering={hovering}
+ />
+
+ <MainLayerBodyNeo
+ hide={showInfo}
+ uploadStatus={uploadStatus}
+ localization={localization}
+ progress={progress}
+ onAbort={onAbort}
+ valid={valid}
+ hovering={hovering}
+ onCancel={onCancel}
+ />
+ <MainLayerFooterNeo
+ hide={showInfo}
+ uploadStatus={uploadStatus}
+ // uploadComplete={uploadComplete}
+ localization={localization}
+ sizeFormatted={sizeFormatted}
+ valid={valid}
+ info={info}
+ isImage={isImage}
+ isVideo={isVideo}
+ onDownloadFile={onDownloadFile}
+ onOpenImage={onOpenImage}
+ onOpenVideo={onOpenVideo}
+ onOpenInfo={onOpenInfo}
+ hovering={hovering}
+ />
+ </div>
+ </React.Fragment>
+ );
+};
+export default FileItemMainLayer;
diff --git a/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayer/FileItemMainLayerNeo.tsx b/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayer/FileItemMainLayerNeo.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..d7963b893a699eb40538ca78810e17577447a73e
--- /dev/null
+++ b/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayer/FileItemMainLayerNeo.tsx
@@ -0,0 +1,113 @@
+import * as React from "react";
+//import { FileItemProps } from "../FileItem/FileItemProps";
+//import FileItemStatus from "../FileItemStatus/FileItemStatus";
+
+import "./FileItemMainLayer.scss";
+
+import MainLayerHeaderNeo from "../MainLayerHeader/MainLayerHeaderNeo";
+import MainLayerBodyNeo from "../MainLayerBody/MainLayerBodyNeo";
+import MainLayerFooterNeo from "../MainLayerFooter/MainLayerFooterNeo";
+import { Localization, UPLOADSTATUS } from "../../../../../core";
+//import {shrinkWord} from "./../../utils";
+export interface FileItemMainLayerNeoProps {
+ onOpenInfo: Function;
+ onOpenImage: Function | undefined;
+ onOpenVideo: Function | undefined;
+ onDelete: Function | undefined;
+ onDownloadFile: Function | undefined;
+ //fileNamePosition: FileItemProps["fileName"];
+ fileName: string;
+ info: boolean;
+ /**
+ * whether show a valid or rejected message
+ * by def. valid is false (if not present, is false too)
+ */
+ valid?: boolean | null;
+ isImage: boolean;
+ isVideo: boolean;
+ uploadStatus?: UPLOADSTATUS;
+ sizeFormatted: string;
+ /**
+ * language to be used
+ * for now
+ * only English and Spanish is supported
+ */
+ localization?: Localization;
+ hovering?: boolean;
+ /**
+ * the current percentage upload progress
+ *
+ */
+ progress?: number;
+ /**
+ * abort event
+ */
+ onAbort?: Function;
+ onCancel?: Function;
+ showInfo: boolean;
+}
+
+const FileItemMainLayerNeo: React.FC<FileItemMainLayerNeoProps> = (
+ props: FileItemMainLayerNeoProps
+) => {
+ const {
+ onDelete,
+ info,
+ valid,
+ isImage,
+ isVideo,
+ showInfo,
+ onOpenInfo,
+ onOpenImage,
+ onOpenVideo,
+ onDownloadFile,
+ sizeFormatted,
+ uploadStatus,
+ localization,
+ hovering,
+ progress,
+ onAbort,
+ onCancel,
+ } = props;
+
+ return (
+ <React.Fragment>
+ <div className={"dui-main-layer-container"}>
+ <MainLayerHeaderNeo
+ hide={showInfo}
+ onDelete={onDelete}
+ uploadStatus={uploadStatus}
+ hovering={hovering}
+ />
+
+ <MainLayerBodyNeo
+ hide={showInfo}
+ uploadStatus={uploadStatus}
+ localization={localization}
+ progress={progress}
+ onAbort={onAbort}
+ valid={valid}
+ hovering={hovering}
+ onCancel={onCancel}
+ />
+ <MainLayerFooterNeo
+ hide={showInfo}
+ uploadStatus={uploadStatus}
+ // uploadComplete={uploadComplete}
+ localization={localization}
+ sizeFormatted={sizeFormatted}
+ valid={valid}
+ info={info}
+ isImage={isImage}
+ isVideo={isVideo}
+ onDownloadFile={onDownloadFile}
+ onOpenImage={onOpenImage}
+ onOpenVideo={onOpenVideo}
+ onOpenInfo={onOpenInfo}
+ hovering={hovering}
+ />
+ </div>
+ </React.Fragment>
+ );
+};
+export default FileItemMainLayerNeo;
diff --git a/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerBody/MainLayerBody.scss b/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerBody/MainLayerBody.scss
new file mode 100644
index 0000000000000000000000000000000000000000..4f2ad701889d34ac17a9cb1ee2976124674200c3
--- /dev/null
+++ b/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerBody/MainLayerBody.scss
@@ -0,0 +1,13 @@
+.dui-file-item-main-layer-body {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ position: relative;
+ .dui-file-status-absolute-container {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ }
+}
diff --git a/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerBody/MainLayerBody.tsx b/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerBody/MainLayerBody.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..d4033b24967d4b64cf66a8a1a31e91349f802a75
--- /dev/null
+++ b/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerBody/MainLayerBody.tsx
@@ -0,0 +1,146 @@
+import * as React from "react";
+import { Localization, UPLOADSTATUS } from "../../../../../core";
+
+import FileItemStatus from "../../FileItemStatus/FileItemStatus";
+import FileItemLoader from "../FileItemLoader/FileItemLoader";
+import "./MainLayerBody.scss";
+export type MainLayerBodyProps = {
+ /**
+ * whether show a valid or rejected message
+ * by def. valid is false (if not present, is false too)
+ */
+ valid?: boolean | null;
+
+ showInfo: boolean;
+ /**
+ * This feature is hidden, it is not present on the documentation
+ * because it's experimental. If you found this prop, you can test it
+ * and comment us if any issue is found. Thanks in advance.
+ *
+ * Make file name, info layer, size and "valid message"
+ * not visible
+ */
+ onlyImage?: boolean;
+ uploadStatus?: UPLOADSTATUS;
+
+ /**
+ * language to be used
+ * for now
+ * only English and Spanish is supported
+ */
+ localization?: Localization;
+ hovering?: boolean;
+ /**
+ * the current percentage upload progress
+ *
+ */
+ progress?: number;
+ /**
+ * abort event
+ */
+ onAbort?: Function;
+ onCancel?: Function;
+ uploadComplete?: boolean;
+};
+const MainLayerBody: React.FC<MainLayerBodyProps> = (
+ props: MainLayerBodyProps
+) => {
+ const {
+ uploadStatus,
+ showInfo,
+ hovering,
+ //uploadComplete,
+ localization,
+ onAbort,
+ progress,
+ onlyImage,
+ valid,
+ onCancel,
+ } = props;
+
+ const [uploadComplete, setUploadComplete] = React.useState<boolean>(false);
+ React.useEffect(() => {
+ if (
+ uploadStatus &&
+ ["success", "error", "success", "aborted"].includes(uploadStatus)
+ ) {
+ setTimeout(() => {
+ setUploadComplete(true);
+ }, 2000);
+ }
+ return () => {
+ setUploadComplete(false);
+ };
+ }, [uploadStatus]);
+
+/* React.useEffect(() => {
+ console.log("MainLayerBody", uploadStatus, uploadComplete,progress);
+ }, [uploadStatus, uploadComplete]); */
+
+ return (
+ <div className="dui-file-item-main-layer-body">
+ {/** UPLOADING, upload isn't completed, showInfo=false and uploadStatus != undef */}
+ {(uploadStatus === "preparing" ||
+ uploadStatus === "uploading") &&
+ !showInfo &&
+ !uploadComplete ? (
+ <React.Fragment>
+ <FileItemLoader
+ uploadStatus={uploadStatus}
+ localization={localization as Localization}
+ progress={progress}
+ onAbort={onAbort}
+ height={60}
+ width={60}
+ onCancel={onCancel}
+ />
+ <div className="dui-file-status-absolute-container">
+ {!showInfo && !onlyImage && hovering && (
+ <React.Fragment>
+ {/** When always actie or hovering he file status validation must be visible
+ * valid, not valid
+ *
+ */}
+ {uploadStatus &&
+ uploadStatus !== "preparing" &&
+ uploadStatus !== "uploading" ? (
+ <FileItemStatus
+ uploadStatus={uploadStatus}
+ localization={localization as Localization}
+ />
+ ) : (
+ <FileItemStatus
+ valid={valid}
+ localization={localization as Localization}
+ />
+ )}
+ </React.Fragment>
+ )}
+ </div>
+ </React.Fragment>
+ ) : (
+ <React.Fragment>
+ {/** Upload ststus or valid status depending on the value on the corner */}
+ <div className="dui-file-status-aboslute-container">
+ {!showInfo && !onlyImage && hovering && (
+ <React.Fragment>
+ {uploadStatus ? (
+ <FileItemStatus
+ uploadStatus={uploadStatus}
+ localization={localization as Localization}
+ />
+ ) : (
+ <FileItemStatus
+ valid={valid}
+ localization={localization as Localization}
+ />
+ )}
+ </React.Fragment>
+ )}
+ </div>
+ </React.Fragment>
+ )}
+ </div>
+ );
+};
+export default MainLayerBody;
diff --git a/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerBody/MainLayerBodyNeo.tsx b/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerBody/MainLayerBodyNeo.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..a0ee09d1d76d928bb849e0a64ba897b03b0a10f9
--- /dev/null
+++ b/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerBody/MainLayerBodyNeo.tsx
@@ -0,0 +1,105 @@
+import * as React from "react";
+import { Localization, UPLOADSTATUS } from "../../../../../core";
+
+import FileItemUploadStatus from "../../FileItemStatus/FileItemUploadStatus";
+import FileItemValidStatus from "../../FileItemStatus/FileItemValidStatus";
+import FileItemLoader from "../FileItemLoader/FileItemLoader";
+import "./MainLayerBody.scss";
+
+export type MainLayerBodyNeoProps = {
+ /**
+ * whether show a valid or rejected message
+ * by def. valid is false (if not present, is false too)
+ */
+ valid?: boolean | null;
+ hide?: boolean;
+ uploadStatus?: UPLOADSTATUS;
+
+ /**
+ * language to be used
+ * for now
+ * only English and Spanish is supported
+ */
+ localization?: Localization;
+ hovering?: boolean;
+ /**
+ * the current percentage upload progress
+ *
+ */
+ progress?: number;
+ /**
+ * abort event
+ */
+ onAbort?: Function;
+ onCancel?: Function;
+ uploadComplete?: boolean;
+};
+const MainLayerBodyNeo: React.FC<MainLayerBodyNeoProps> = (
+ props: MainLayerBodyNeoProps
+) => {
+ const {
+ uploadStatus,
+ hide,
+ hovering,
+ //uploadComplete,
+ localization,
+ onAbort,
+ progress,
+
+ valid,
+ onCancel,
+ } = props;
+
+ const [uploadComplete, setUploadComplete] = React.useState<boolean>(false);
+ React.useEffect(() => {
+ if (
+ uploadStatus &&
+ ["success", "error", "aborted"].includes(uploadStatus)
+ ) {
+ setTimeout(() => {
+ setUploadComplete(true);
+ }, 2000);
+ }
+ return () => {
+ setUploadComplete(false);
+ };
+ }, [uploadStatus]);
+ //console.log("MainLayerBody onCancel", onCancel);
+ return (
+ <div className="dui-file-item-main-layer-body">
+ {/** Uploading or preparing stage? */}
+ {!hide && !uploadComplete && (
+ <React.Fragment>
+ <FileItemLoader
+ uploadStatus={uploadStatus}
+ localization={localization as Localization}
+ progress={progress}
+ onAbort={onAbort}
+ height={60}
+ width={60}
+ onCancel={onCancel}
+ />
+ <FileItemUploadStatus
+ uploadStatus={uploadStatus}
+ localization={localization}
+ />
+ </React.Fragment>
+ )}
+ <div className="dui-file-status-absolute-container">
+ {!hide && hovering && (
+ <React.Fragment>
+ {uploadComplete ? (
+ <FileItemUploadStatus
+ uploadStatus={uploadStatus}
+ localization={localization}
+ />
+ ) : (
+ <FileItemValidStatus valid={valid} localization={localization} />
+ )}
+ </React.Fragment>
+ )}
+ </div>
+ </div>
+ );
+};
+export default MainLayerBodyNeo;
diff --git a/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerBody/PrincipalState.tsx b/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerBody/PrincipalState.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..7a80e89a0a12fd053814ff034d1f5a250067435f
--- /dev/null
+++ b/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerBody/PrincipalState.tsx
@@ -0,0 +1,28 @@
+import * as React from "react";
+import { UPLOADSTATUS } from "../../../../../core";
+import DefaultLoaderNeo from "../../../../loader/DefaultLoader/DefaultLoader";
+export type PrincipalStateProps = {
+ uploadStatus?: UPLOADSTATUS;
+ valid?: boolean;
+};
+const PrincipalState: React.FC<PrincipalStateProps> = (
+ props: PrincipalStateProps
+) => {
+ const { uploadStatus, valid } = props;
+ const [isUploading, setIsUploading] = React.useState<boolean | undefined>(
+ undefined
+ );
+ const [isValid, setIsValid] = React.useState<boolean | undefined>(undefined);
+ React.useEffect(() => {
+ setIsUploading(
+ uploadStatus &&
+ ["preparing", "uploading"].includes(uploadStatus)
+ );
+ }, [uploadStatus]);
+ return (
+ <div>
+ <DefaultLoaderNeo color="green" />
+ </div>
+ );
+};
+export default PrincipalState;
diff --git a/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerBody/SecondaryState.tsx b/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerBody/SecondaryState.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..5c1e541be19ca6c69e60822849a19b859aeed398
--- /dev/null
+++ b/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerBody/SecondaryState.tsx
@@ -0,0 +1,16 @@
+import * as React from "react";
+export type SecondaryStateProps = {
+ uploadComplete?: boolean;
+};
+const SecondaryState: React.FC<SecondaryStateProps> = (
+ props: SecondaryStateProps
+) => {
+ const { uploadComplete } = props;
+ //uploa status
+ if (uploadComplete) {
+ return <div></div>;
+ }
+ //valid
+ return <div></div>;
+};
+export default SecondaryState;
diff --git a/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerFooter/MainLayerFooter.scss b/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerFooter/MainLayerFooter.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e93b6352c8f3dc173a90c165faf472ae6409bb4b
--- /dev/null
+++ b/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerFooter/MainLayerFooter.scss
@@ -0,0 +1,29 @@
+.dui-main-layer-footer-container {
+ min-height: 23px;
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ //position: relative;
+ .dui-main-layer-footer-status {
+ //height: 0px;
+ //position: relative;
+ //bottom: 0px;
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-start;
+ align-items: flex-start;
+ width: 100%;
+ }
+ .dui-main-layer-footer {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-between;
+ width: 100%;
+ // min-height: 20px;
+ }
+
+ //width: inherit;
+}
diff --git a/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerFooter/MainLayerFooter.tsx b/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerFooter/MainLayerFooter.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..16fae2819145a3c60ffb7eac3fd8f9d3fec15880
--- /dev/null
+++ b/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerFooter/MainLayerFooter.tsx
@@ -0,0 +1,166 @@
+import * as React from "react";
+import { Localization, UPLOADSTATUS } from "../../../../../core";
+import {
+ PlayIcon,
+ DownloadFile,
+ InfoDisney,
+ Visibility,
+} from "../../../../icons";
+
+import FileItemStatus from "../../FileItemStatus/FileItemStatus";
+import FileItemSize from "../FileItemSize";
+
+import "./MainLayerFooter.scss";
+export type MainLayerFooterProps = {
+ hovering?: boolean;
+ onlyImage?: boolean;
+ uploadStatus?: UPLOADSTATUS;
+ // uploadComplete?: boolean;
+ localization?: Localization;
+ showInfo?: boolean;
+ sizeFormatted?: string;
+ /**
+ * whether show a valid or rejected message
+ * by def. valid is false (if not present, is false too)
+ */
+ valid?: boolean | null;
+ isImage?: boolean;
+ isVideo?: boolean;
+ info?: boolean;
+ onOpenInfo?: Function;
+ onOpenImage?: Function | undefined;
+ onOpenVideo?: Function | undefined;
+ onDownloadFile?: Function | undefined;
+};
+const MainLayerFooter: React.FC<MainLayerFooterProps> = (
+ props: MainLayerFooterProps
+) => {
+ const {
+ onlyImage,
+ uploadStatus,
+ // uploadComplete,
+ localization,
+ showInfo,
+ sizeFormatted,
+ valid,
+ info,
+ isImage,
+ isVideo,
+ onDownloadFile,
+ onOpenImage,
+ onOpenVideo,
+ onOpenInfo,
+ hovering,
+ } = props;
+ const handleOpenInfo = () => {
+ onOpenInfo?.();
+ };
+ const handleOpenImage = () => {
+ onOpenImage?.();
+ };
+ const handleOpenVideo = () => {
+ onOpenVideo?.();
+ };
+ const handleDownloadFile = () => {
+ onDownloadFile?.();
+ };
+
+ const [uploadComplete, setUploadComplete] = React.useState<boolean>(false);
+ React.useEffect(() => {
+ if (
+ uploadStatus &&
+ ["success", "error", "success", "aborted"].includes(uploadStatus)
+ ) {
+ setTimeout(() => {
+ setUploadComplete(true);
+ }, 2000);
+ }
+ return () => {
+ setUploadComplete(false);
+ };
+ }, [uploadStatus]);
+
+/* React.useEffect(() => {
+ console.log("MainLayerFooter", uploadStatus, uploadComplete);
+ }, [uploadStatus, uploadComplete]);
+ */
+ return (
+ <React.Fragment>
+ <div className="dui-main-layer-footer-container">
+ {/** Show only when footer is not visible */}
+ <div className="dui-main-layer-footer-status">
+ {!onlyImage &&
+ uploadStatus &&
+ uploadStatus !== "uploading" &&
+ uploadComplete ? (
+ <React.Fragment>
+ {!showInfo && !hovering && (
+ <FileItemStatus
+ uploadStatus={uploadStatus}
+ localization={localization as Localization}
+ />
+ )}
+ </React.Fragment>
+ ) : (
+ <React.Fragment>
+ {!showInfo && !hovering && typeof valid !== "undefined" && (
+ <FileItemStatus
+ valid={valid}
+ localization={localization as Localization}
+ />
+ )}
+ </React.Fragment>
+ )}
+ </div>
+ {/** Action buttons and file size */}
+ <div className="dui-main-layer-footer">
+ {!showInfo && hovering && (
+ <React.Fragment>
+ {!onlyImage && <FileItemSize sizeFormatted={sizeFormatted} />}
+
+ {isImage &&
+ onOpenImage &&
+ typeof valid === "boolean" &&
+ valid && (
+ <Visibility
+ className="dui-file-item-icon"
+ color="rgba(255,255,255,0.851)"
+ onClick={handleOpenImage}
+ size="small"
+ />
+ )}
+ {isVideo &&
+ onOpenVideo &&
+ typeof valid === "boolean" &&
+ valid && (
+ <PlayIcon
+ className="dui-file-item-icon"
+ color="rgba(255,255,255,0.851)"
+ onClick={handleOpenVideo}
+ size="small"
+ />
+ )}
+ {onDownloadFile && (
+ <DownloadFile
+ className="dui-file-item-icon"
+ color="rgba(255,255,255,0.851)"
+ onClick={handleDownloadFile}
+ size="small"
+ />
+ )}
+ {!onlyImage && info && (
+ <InfoDisney
+ className="dui-file-item-icon"
+ onClick={handleOpenInfo}
+ color="rgba(255,255,255,0.851)"
+ size="micro"
+ />
+ )}
+ </React.Fragment>
+ )}
+ </div>
+ </div>
+ </React.Fragment>
+ );
+};
+export default MainLayerFooter;
diff --git a/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerFooter/MainLayerFooterNeo.tsx b/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerFooter/MainLayerFooterNeo.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..93527bb7e556f8784f8ac5cffc2bec4cb95877c9
--- /dev/null
+++ b/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerFooter/MainLayerFooterNeo.tsx
@@ -0,0 +1,159 @@
+import * as React from "react";
+import { Localization, UPLOADSTATUS } from "../../../../../core";
+import {
+ PlayIcon,
+ DownloadFile,
+ InfoDisney,
+ Visibility,
+} from "../../../../icons";
+
+import FileItemStatus from "../../FileItemStatus/FileItemStatus";
+import FileItemSize from "../FileItemSize";
+
+import "./MainLayerFooter.scss";
+export type MainLayerFooterNeoProps = {
+ hovering?: boolean;
+ uploadStatus?: UPLOADSTATUS;
+ // uploadComplete?: boolean;
+ localization?: Localization;
+ sizeFormatted?: string;
+ /**
+ * whether show a valid or rejected message
+ * by def. valid is false (if not present, is false too)
+ */
+ valid?: boolean | null;
+ isImage?: boolean;
+ isVideo?: boolean;
+ info?: boolean;
+ onOpenInfo?: Function;
+ onOpenImage?: Function | undefined;
+ onOpenVideo?: Function | undefined;
+ onDownloadFile?: Function | undefined;
+ hide: boolean;
+};
+const MainLayerFooterNeo: React.FC<MainLayerFooterNeoProps> = (
+ props: MainLayerFooterNeoProps
+) => {
+ const {
+ uploadStatus,
+ hide,
+ localization,
+ sizeFormatted,
+ valid,
+ info,
+ isImage,
+ isVideo,
+ onDownloadFile,
+ onOpenImage,
+ onOpenVideo,
+ onOpenInfo,
+ hovering,
+ } = props;
+ const handleOpenInfo = () => {
+ onOpenInfo?.();
+ };
+ const handleOpenImage = () => {
+ onOpenImage?.();
+ };
+ const handleOpenVideo = () => {
+ onOpenVideo?.();
+ };
+ const handleDownloadFile = () => {
+ onDownloadFile?.();
+ };
+
+ const [uploadComplete, setUploadComplete] = React.useState<boolean>(false);
+ React.useEffect(() => {
+ if (
+ uploadStatus &&
+ ["success", "error", "aborted"].includes(uploadStatus)
+ ) {
+ setTimeout(() => {
+ setUploadComplete(true);
+ }, 2000);
+ }
+ return () => {
+ setUploadComplete(false);
+ };
+ }, [uploadStatus]);
+
+ return (
+ <React.Fragment>
+ <div className="dui-main-layer-footer-container">
+ {/** Show only when footer is not visible */}
+ <div className="dui-main-layer-footer-status">
+ {!hide &&
+ uploadStatus &&
+ uploadStatus !== "uploading" &&
+ uploadComplete ? (
+ <React.Fragment>
+ {!hovering && (
+ <FileItemStatus
+ uploadStatus={uploadStatus}
+ localization={localization as Localization}
+ />
+ )}
+ </React.Fragment>
+ ) : (
+ <React.Fragment>
+ {!hovering && typeof valid !== "undefined" && (
+ <FileItemStatus
+ valid={valid}
+ localization={localization as Localization}
+ />
+ )}
+ </React.Fragment>
+ )}
+ </div>
+ {/** Action buttons and file size */}
+ <div className="dui-main-layer-footer">
+ {!hide && hovering && (
+ <React.Fragment>
+ {<FileItemSize sizeFormatted={sizeFormatted} />}
+
+ {isImage &&
+ onOpenImage &&
+ typeof valid === "boolean" &&
+ valid && (
+ <Visibility
+ className="dui-file-item-icon"
+ color="rgba(255,255,255,0.851)"
+ onClick={handleOpenImage}
+ size="small"
+ />
+ )}
+ {isVideo &&
+ onOpenVideo &&
+ typeof valid === "boolean" &&
+ valid && (
+ <PlayIcon
+ className="dui-file-item-icon"
+ color="rgba(255,255,255,0.851)"
+ onClick={handleOpenVideo}
+ size="small"
+ />
+ )}
+ {onDownloadFile && (
+ <DownloadFile
+ className="dui-file-item-icon"
+ color="rgba(255,255,255,0.851)"
+ onClick={handleDownloadFile}
+ size="small"
+ />
+ )}
+ {info && (
+ <InfoDisney
+ className="dui-file-item-icon"
+ onClick={handleOpenInfo}
+ color="rgba(255,255,255,0.851)"
+ size="micro"
+ />
+ )}
+ </React.Fragment>
+ )}
+ </div>
+ </div>
+ </React.Fragment>
+ );
+};
+export default MainLayerFooterNeo;
diff --git a/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerHeader/MainLayerHeader.scss b/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerHeader/MainLayerHeader.scss
new file mode 100644
index 0000000000000000000000000000000000000000..aeab8b694c95312fe59f79f5ccb27b3f65c7dea2
--- /dev/null
+++ b/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerHeader/MainLayerHeader.scss
@@ -0,0 +1,9 @@
+.dui-main-layer-header-container {
+ min-height: 22px;
+ width: 100%;
+ flex-direction: row;
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+ //width: inherit;
+}
diff --git a/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerHeader/MainLayerHeader.tsx b/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerHeader/MainLayerHeader.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..97ff284e499af299d70865f28a9b7622a7000bfb
--- /dev/null
+++ b/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerHeader/MainLayerHeader.tsx
@@ -0,0 +1,35 @@
+import * as React from "react";
+import { UPLOADSTATUS } from "../../../../../core";
+import { Clear } from "../../../../icons";
+import "./MainLayerHeader.scss";
+
+export type MainLayerHeaderProps = {
+ onDelete?: Function;
+ uploadStatus?: UPLOADSTATUS;
+ hovering?: boolean;
+ showInfo: boolean;
+};
+
+const MainLayerHeader: React.FC<MainLayerHeaderProps> = (
+ props: MainLayerHeaderProps
+) => {
+ const { uploadStatus, onDelete, hovering, showInfo } = props;
+ const handleDelete = () => {
+ onDelete?.();
+ };
+
+ return (
+ <div className="dui-main-layer-header-container">
+ {!showInfo && hovering && uploadStatus !== "uploading" && onDelete && (
+ <Clear
+ className="dui-file-item-icon"
+ color="rgba(255,255,255,0.851)"
+ onClick={handleDelete}
+ size="small"
+ colorFill="transparent"
+ />
+ )}
+ </div>
+ );
+};
+export default MainLayerHeader;
diff --git a/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerHeader/MainLayerHeaderNeo.tsx b/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerHeader/MainLayerHeaderNeo.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..f3a20534bb898659ff046a9a934d0b9050964486
--- /dev/null
+++ b/src/files-ui/components/file-item/components/FileItemMainLayer/MainLayerHeader/MainLayerHeaderNeo.tsx
@@ -0,0 +1,43 @@
+import * as React from "react";
+import { UPLOADSTATUS } from "../../../../../core";
+import { Clear } from "../../../../icons";
+import "./MainLayerHeader.scss";
+
+export type MainLayerHeaderNeoProps = {
+ onDelete?: Function;
+ uploadStatus?: UPLOADSTATUS;
+ hovering?: boolean;
+ hide?: boolean;
+};
+
+const MainLayerHeaderNeo: React.FC<MainLayerHeaderNeoProps> = (
+ props: MainLayerHeaderNeoProps
+) => {
+ const { uploadStatus, onDelete, hovering, hide } = props;
+ const handleDelete = () => {
+ onDelete?.();
+ };
+
+ return (
+ <div className="dui-main-layer-header-container">
+ {hovering &&
+ !hide &&
+ // ![
+ uploadStatus !== "preparing" &&
+ uploadStatus !== "uploading" &&
+ // undefined,
+ //null,
+ //].includes(uploadStatus)
+ onDelete && (
+ <Clear
+ className="dui-file-item-icon"
+ color="rgba(255,255,255,0.851)"
+ onClick={handleDelete}
+ size="small"
+ colorFill="transparent"
+ />
+ )}
+ </div>
+ );
+};
+export default MainLayerHeaderNeo;
diff --git a/src/files-ui/components/file-item/components/FileItemStatus/FileItemStatus.scss b/src/files-ui/components/file-item/components/FileItemStatus/FileItemStatus.scss
new file mode 100644
index 0000000000000000000000000000000000000000..d8e8c04b3c554002abe34ea837c9ff6d267c858d
--- /dev/null
+++ b/src/files-ui/components/file-item/components/FileItemStatus/FileItemStatus.scss
@@ -0,0 +1,49 @@
+.dui-file-item-status-container {
+ text-align: center;
+ font-size: 0.8rem;
+ background-color: rgba(255, 255, 255, 0.8);
+ display: flex;
+ align-items: center;
+ flex-direction: row;
+ border-radius: 4px;
+ padding: 0.5px;
+ font-weight: 400;
+ &.file-status-error {
+ color: #f44336;
+ }
+ &.file-status-ok {
+ color: #5c7a1f;
+ }
+ &.file-status-loading {
+ &.percentage{
+ padding: 7px 4px 2px 5px;
+ }
+ //
+ position: relative;
+ .abort-button {
+ position: absolute;
+ right: -2px;
+ top: -2px;
+ }
+ display: flex;
+ color: #8b6b10;
+ align-items: center;
+ justify-content: center;
+ flex-direction: column;
+ background-color: rgba(255, 255, 255, 0.7);
+
+ //background-color: transparent;
+ .uploading-text {
+ &.up {
+ margin-bottom: -22px;
+ }
+ &.down {
+ margin-top: -20px;
+ }
+
+ p.percentage {
+ font-weight: 500;
+ }
+ }
+ }
+}
diff --git a/src/files-ui/components/file-item/components/FileItemStatus/FileItemStatus.tsx b/src/files-ui/components/file-item/components/FileItemStatus/FileItemStatus.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..7aa81245195da46f5f84fe153c4a1b7f53337d6c
--- /dev/null
+++ b/src/files-ui/components/file-item/components/FileItemStatus/FileItemStatus.tsx
@@ -0,0 +1,118 @@
+import React, { FC, Fragment } from "react";
+
+import Loader from "../../../loader/DefaultLoader/loader";
+import {
+ CheckCircle,
+ CloudDone,
+ DoDisturb,
+ Remove,
+ // UploadDone,
+ UploadError,
+} from "../../../icons";
+import { FileItemStatusProps } from "./FileItemStatusProps";
+import "./FileItemStatus.scss";
+import { FileItemLocalizerSelector, LocalLabels } from "../../../../core";
+
+const FileItemStatus: FC<FileItemStatusProps> = (
+ props: FileItemStatusProps
+) => {
+ const {
+ valid,
+ uploadStatus,
+ //message,
+ localization,
+ progress,
+ onAbort,
+ } = props;
+ const FileItemStatusLocalizer: LocalLabels = FileItemLocalizerSelector(
+ localization
+ ).status as LocalLabels;
+ const handleAbort = () => {
+ onAbort?.();
+ };
+ return (
+ <Fragment>
+ {uploadStatus ? (
+ uploadStatus === "uploading" ? (
+ <div
+ className={`dui-file-item-status-container file-status-loading${
+ progress ? " percentage" : ""
+ }`}
+ >
+ {onAbort && (
+ <div className="abort-button">
+ <Remove
+ //className="dui-file-item-icon"
+ color="red"
+ onClick={handleAbort}
+ size="semi-medium"
+ colorFill="transparent"
+ />
+ </div>
+ )}
+
+ {progress && (
+ <div className="uploading-text up">
+ <p>{FileItemStatusLocalizer.uploading as string}</p>
+ </div>
+ )}
+ <Loader />
+ <div className="uploading-text down">
+ {progress ? (
+ <p className="percentage">
+ {progress.toFixed(0) + "%" || "100%"}
+ </p>
+ ) : (
+ <p>{FileItemStatusLocalizer.uploading as string}</p>
+ )}
+ </div>
+ </div>
+ ) : uploadStatus === "aborted" ? (
+ <div className="dui-file-item-status-container file-status-error">
+ <UploadError
+ color="#f44336"
+ size="semi-medium"
+ className="status-icon"
+ />
+ {FileItemStatusLocalizer.aborted as string}
+ </div>
+ ) : uploadStatus === "success" ? (
+ <div className="dui-file-item-status-container file-status-ok">
+ <CloudDone color="#4caf50" size="small" className="status-icon" />
+ {FileItemStatusLocalizer.success as string}
+ </div>
+ ) : (
+ <div className="dui-file-item-status-container file-status-error">
+ <UploadError
+ color="#f44336"
+ size="semi-medium"
+ className="status-icon"
+ />
+ {FileItemStatusLocalizer.error as string}
+ </div>
+ )
+ ) : valid !== null && typeof valid !== "undefined" ? (
+ <Fragment>
+ {valid ? (
+ <div className="dui-file-item-status-container file-status-ok">
+ <CheckCircle
+ color="#4caf50"
+ size="small"
+ className="status-icon"
+ />
+ {FileItemStatusLocalizer.valid as string}
+ </div>
+ ) : (
+ <div className="dui-file-item-status-container file-status-error">
+ <DoDisturb color="#f44336" size="small" className="status-icon" />
+ {FileItemStatusLocalizer.denied as string}
+ </div>
+ )}
+ </Fragment>
+ ) : (
+ <Fragment></Fragment>
+ )}
+ </Fragment>
+ );
+};
+export default FileItemStatus;
diff --git a/src/files-ui/components/file-item/components/FileItemStatus/FileItemStatusProps.ts b/src/files-ui/components/file-item/components/FileItemStatus/FileItemStatusProps.ts
new file mode 100644
index 0000000000000000000000000000000000000000..118623abe19ccf6e62db54a6b6c39e68baad8e9a
--- /dev/null
+++ b/src/files-ui/components/file-item/components/FileItemStatus/FileItemStatusProps.ts
@@ -0,0 +1,33 @@
+import { Localization, UPLOADSTATUS } from "../../../../core";
+
+
+export interface FileItemStatusProps {
+ /**
+ * whether show a valid or rejected message
+ * by def. valid is false (if not present, is false too)
+ */
+ valid?: boolean | null;
+ /**
+ *
+ */
+ uploadStatus?: UPLOADSTATUS;
+ /**
+ * A message for the status item
+ */
+ message?: string;
+ /**
+ * language to be used
+ * for now
+ * only English and Spanish is supported
+ */
+ localization: Localization;
+ /**
+ * the current percentage upload progress
+ *
+ */
+ progress?: number;
+ /**
+ * abort event
+ */
+ onAbort?: Function;
+}
\ No newline at end of file
diff --git a/src/files-ui/components/file-item/components/FileItemStatus/FileItemUploadStatus.scss b/src/files-ui/components/file-item/components/FileItemStatus/FileItemUploadStatus.scss
new file mode 100644
index 0000000000000000000000000000000000000000..a69fc3a52a8a6099269f17eccf678bfcbd9812e6
--- /dev/null
+++ b/src/files-ui/components/file-item/components/FileItemStatus/FileItemUploadStatus.scss
@@ -0,0 +1,17 @@
+.fui-file-item-upload-status-container {
+ text-align: center;
+ font-size: 0.8rem;
+ background-color: rgba(255, 255, 255, 0.8);
+ display: flex;
+ align-items: center;
+ flex-direction: row;
+ border-radius: 4px;
+ padding: 0.5px;
+ font-weight: 400;
+ &.file-status-error-aborted {
+ color: #f44336;
+ }
+ &.file-status-success {
+ color: #5c7a1f;
+ }
+}
diff --git a/src/files-ui/components/file-item/components/FileItemStatus/FileItemUploadStatus.tsx b/src/files-ui/components/file-item/components/FileItemStatus/FileItemUploadStatus.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..9a3207c853581a3c704a3ab7aa6c2bac08fd5530
--- /dev/null
+++ b/src/files-ui/components/file-item/components/FileItemStatus/FileItemUploadStatus.tsx
@@ -0,0 +1,71 @@
+import * as React from "react";
+import {
+ FileItemLocalizerSelector,
+ Localization,
+ LocalLabels,
+ UPLOADSTATUS,
+} from "../../../../core";
+import { CloudDone, UploadError } from "../../../icons";
+import "./FileItemUploadStatus.scss";
+export type FileItemUploadStatusProps = {
+ /**
+ * sucess
+ * error
+ * aborted
+ */
+ uploadStatus?: UPLOADSTATUS;
+ /**
+ * language to be used on labels
+ */
+ localization?: Localization;
+};
+/**
+ * Upload ststaus: "success", "aborted" and "error"
+ * @returns
+ */
+const FileItemUploadStatus: React.FC<FileItemUploadStatusProps> = (
+ props: FileItemUploadStatusProps
+) => {
+ const { uploadStatus, localization } = props;
+ const FileItemStatusLocalizer: LocalLabels = FileItemLocalizerSelector(
+ localization
+ ).status as LocalLabels;
+ if (
+ uploadStatus &&
+ ["success", "aborted", "error"].includes(
+ uploadStatus
+ )
+ ) {
+ const overloadClassName: string =
+ uploadStatus === "success"
+ ? " file-status-success"
+ : " file-status-error-aborted";
+ return (
+ <div
+ className={`fui-file-item-upload-status-container${overloadClassName}`}
+ >
+ {uploadStatus === "success" ? (
+ <>
+ <CloudDone color="#4caf50" size="small" className="status-icon" />
+ {FileItemStatusLocalizer.success as string}
+ </>
+ ) : (
+ <>
+ <UploadError
+ color="#f44336"
+ size="semi-medium"
+ className="status-icon"
+ />
+ {uploadStatus === "aborted" ? (
+ <>{FileItemStatusLocalizer.aborted as string}</>
+ ) : (
+ <> {FileItemStatusLocalizer.error as string}</>
+ )}
+ </>
+ )}
+ </div>
+ );
+ }
+ return <React.Fragment></React.Fragment>;
+};
+export default FileItemUploadStatus;
diff --git a/src/files-ui/components/file-item/components/FileItemStatus/FileItemUploadingStatus.scss b/src/files-ui/components/file-item/components/FileItemStatus/FileItemUploadingStatus.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/src/files-ui/components/file-item/components/FileItemStatus/FileItemUploadingStatus.tsx b/src/files-ui/components/file-item/components/FileItemStatus/FileItemUploadingStatus.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..b76e45d8f05e08c776938c0fb2743672e81e7987
--- /dev/null
+++ b/src/files-ui/components/file-item/components/FileItemStatus/FileItemUploadingStatus.tsx
@@ -0,0 +1,31 @@
+import * as React from "react";
+import { FileItemLocalizerSelector, Localization, LocalLabels, UPLOADSTATUS } from "../../../../core";
+import { DefaultLoader } from "../../../loader";
+
+export type FileItemUploadingStatusProps = {
+ /**
+ * sucess
+ * error
+ * aborted
+ */
+ uploadStatus?: UPLOADSTATUS;
+ /**
+ * language to be used on labels
+ */
+ localization?: Localization;
+};
+const FileItemUploadingStatus: React.FC<FileItemUploadingStatusProps> = (
+ props: FileItemUploadingStatusProps
+) => {
+ const { uploadStatus, localization } = props;
+ const FileItemStatusLocalizer: LocalLabels = FileItemLocalizerSelector(
+ localization
+ ).status as LocalLabels;
+ if (uploadStatus && uploadStatus === "uploading") {
+ return (
+ <DefaultLoader label={FileItemStatusLocalizer.uploading as string} />
+ );
+ }
+ return <React.Fragment></React.Fragment>;
+};
+export default FileItemUploadingStatus;
diff --git a/src/files-ui/components/file-item/components/FileItemStatus/FileItemValidStatus.scss b/src/files-ui/components/file-item/components/FileItemStatus/FileItemValidStatus.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e4e14ee692786b46551c5246a33cfb338acc94c4
--- /dev/null
+++ b/src/files-ui/components/file-item/components/FileItemStatus/FileItemValidStatus.scss
@@ -0,0 +1,17 @@
+.fui-file-item-valid-status-container {
+ text-align: center;
+ font-size: 0.8rem;
+ background-color: rgba(255, 255, 255, 0.8);
+ display: flex;
+ align-items: center;
+ flex-direction: row;
+ border-radius: 4px;
+ padding: 0.5px;
+ font-weight: 400;
+ &.file-status-nonvalid {
+ color: #f44336;
+ }
+ &.file-status-valid {
+ color: #5c7a1f;
+ }
+}
diff --git a/src/files-ui/components/file-item/components/FileItemStatus/FileItemValidStatus.tsx b/src/files-ui/components/file-item/components/FileItemStatus/FileItemValidStatus.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..84d0bfc6417d644cce8b1242a8f95396502d315f
--- /dev/null
+++ b/src/files-ui/components/file-item/components/FileItemStatus/FileItemValidStatus.tsx
@@ -0,0 +1,51 @@
+import * as React from "react";
+import { FileItemLocalizerSelector, Localization, LocalLabels } from "../../../../core";
+import { CheckCircle, DoDisturb } from "../../../icons";
+
+import "./FileItemValidStatus.scss";
+export type FileItemValidStatusProps = {
+ /**
+ * whether show a valid or rejected message
+ * by def. valid is false (if not present, is false too)
+ */
+ valid?: boolean | null;
+ /**
+ * language to be used
+ * for now
+ * only English and Spanish is supported
+ */
+ localization?: Localization;
+};
+const FileItemValidStatus: React.FC<FileItemValidStatusProps> = (
+ props: FileItemValidStatusProps
+) => {
+ const { valid, localization } = props;
+ const FileItemStatusLocalizer: LocalLabels = FileItemLocalizerSelector(
+ localization
+ ).status as LocalLabels;
+ if (typeof valid === "boolean") {
+ const overloadClassName: string = valid
+ ? " file-status-valid"
+ : " file-status-nonvalid";
+ return (
+ <div
+ className={`fui-file-item-valid-status-container${overloadClassName}`}
+ >
+ {valid ? (
+ <>
+ <CheckCircle color="#4caf50" size="small" className="status-icon" />
+ {FileItemStatusLocalizer.valid as string}
+ </>
+ ) : (
+ <>
+ <DoDisturb color="#f44336" size="small" className="status-icon" />
+ {FileItemStatusLocalizer.denied as string}
+ </>
+ )}
+ </div>
+ );
+ } else {
+ return <React.Fragment></React.Fragment>;
+ }
+};
+export default FileItemValidStatus;
diff --git a/src/files-ui/components/file-item/hooks/useDropzoneFileListID.ts b/src/files-ui/components/file-item/hooks/useDropzoneFileListID.ts
new file mode 100644
index 0000000000000000000000000000000000000000..4f05d381efd6bfc4b8a91e1c724adf9b626852d6
--- /dev/null
+++ b/src/files-ui/components/file-item/hooks/useDropzoneFileListID.ts
@@ -0,0 +1,22 @@
+import * as React from "react";
+import { print_manager } from "../../../../utils";
+import { ExtFileManager } from "../../../core";
+
+const useDropzoneFileListID = (
+): number => {
+ const [dropzoneId, setDuiFileID]
+ = React.useState<number | undefined>(
+ undefined
+ );
+ React.useEffect(() => {
+ print_manager(undefined, "dropzoneId " + dropzoneId + "");
+ if (!dropzoneId) {
+ const newId: number = ExtFileManager.createFileListMap();
+ setDuiFileID(newId);
+ }
+ // eslint-disable-next-line
+ }, [dropzoneId]);
+
+ return dropzoneId || 0;
+}
+export default useDropzoneFileListID;
\ No newline at end of file
diff --git a/src/files-ui/components/file-item/hooks/useFileItemClassName.ts b/src/files-ui/components/file-item/hooks/useFileItemClassName.ts
new file mode 100644
index 0000000000000000000000000000000000000000..fce4e5e5e1560a16d3379a09d68afffd1d9c0583
--- /dev/null
+++ b/src/files-ui/components/file-item/hooks/useFileItemClassName.ts
@@ -0,0 +1,31 @@
+import * as React from "react";
+
+/**
+ * Custom hook that generates the final className for the main container of FleItem
+ * @param resultOnTooltip whether to show the result on a tooltip or not
+ * @returns the fiaal classNmae
+ */
+const useFileItemRootClassName = (
+ resultOnTooltip: boolean = false,
+ className: string | undefined,
+ hovering: boolean | undefined = false
+): string => {
+ const [classNameCreated, setClassNameCreated] = React.useState<string>("file-item-full-container-container");
+
+ React.useEffect(() => {
+ let baseClassName: string = "file-item-full-container-container";
+ if (resultOnTooltip) {
+ baseClassName += " files-ui-tooltip";
+ }
+ if (hovering) {
+ baseClassName += " hovering";
+ }
+ if (className) {
+ baseClassName += ` ${className}`;
+ }
+
+ setClassNameCreated(baseClassName);
+ }, [resultOnTooltip, className, hovering]);
+ return classNameCreated;
+}
+export default useFileItemRootClassName;
\ No newline at end of file
diff --git a/src/files-ui/components/file-item/hooks/useFileItemInitializer.ts b/src/files-ui/components/file-item/hooks/useFileItemInitializer.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ded597828e78c2b6ae557e1880449a46cfc060ef
--- /dev/null
+++ b/src/files-ui/components/file-item/hooks/useFileItemInitializer.ts
@@ -0,0 +1,134 @@
+import * as React from "react";
+import { getURLFileIco, readAsDataURL } from "../../../core";
+import { getURLFileIcoFromNameAndType } from "../../../core/mime/mime";
+
+/**
+ * Initializer hook for FileItemNeo
+ * @param file The file Object
+ * @param valid Whether the file is valid, not valid or not set
+ * @param preview Whether to show a preview on FileItem
+ * @param imageUrl The image url
+ * @param xhr the xhr object
+ * @param progress the current progress given by props
+ * @returns an array thta contains the following properties [isImage, isVideo, url, imageSource, localProgress]
+ */
+const useFileItemInitializer = (
+ file: File | undefined,
+ name: string | undefined,
+ type: string | undefined,
+ valid: boolean | undefined | null,
+ preview: boolean,
+ imageUrl: string | undefined,
+ xhr?: XMLHttpRequest,
+
+): [boolean, boolean, string, string | undefined] => {
+
+ const [isImage, setIsImage] = React.useState<boolean>(false);
+ const [isVideo, setIsVideo] = React.useState<boolean>(false);
+ const [url, setUrl] = React.useState<string>("");
+ const [imageSource, setImageSource] = React.useState<string | undefined>(undefined);
+
+
+
+ const init = async (
+ file: File | undefined,
+ name: string | undefined,
+ type: string | undefined,
+ valid: boolean | undefined | null,
+ preview: boolean,
+ imageUrl: string | undefined,
+ xhr?: XMLHttpRequest,
+ progress?: number
+ ) => {
+ //////////////////////////////
+ //console.log("init", file, name, type);
+
+ if (!file && (!name && !type)) return;
+
+ const { url } = file ? getURLFileIco(file) :
+ getURLFileIcoFromNameAndType(name, type);
+
+ //console.log("init", url);
+
+ setUrl(url);
+
+ if (imageUrl) {
+ setIsImage(true);
+ setImageSource(imageUrl);
+ return;
+ } else {
+ const [headerMime, tailMime] = getHeaderAndTail(file, type);
+
+ setIsImage(headerMime === "image");
+ setIsVideo(
+ headerMime === "video" && ["mp4", "ogg", "webm"].includes(tailMime)
+ );
+ if (
+ preview &&
+ (valid || typeof valid === "undefined" || valid === null) &&
+ headerMime === "image"
+ ) {
+ //lets check for image preview from File
+ let response: string | undefined = undefined;
+ if (file) {
+ response = await readAsDataURL(file);
+ if (response) {
+ setImageSource(response as string);
+ }
+ }
+ //console.log("response image", response);
+
+ }
+ }
+ /////////////// UPLOAD OBJECT ///////////////
+
+ //if (!localProgress) {
+ //handleProgress(1);
+ //}
+ };
+
+
+
+ ////// EFFECT
+ React.useEffect(() => {
+ init(file, name, type, valid, preview || false, imageUrl);
+ return () => {
+ setImageSource(undefined);
+ setIsImage(false);
+ setIsVideo(false);
+ };
+ // eslint-disable-next-line
+ }, [file, name, type, valid, preview, imageUrl,]);
+ return [isImage, isVideo, url, imageSource];
+}
+export default useFileItemInitializer;
+
+/* export const identifyFileSource = (file: File | undefined, name: string, fileType: string) => {
+ if(!file){
+
+ }
+} */
+
+const getHeaderAndTail = (
+ file: File | undefined,
+ type: string | undefined,
+): [string, string] => {
+
+ if (file) {
+ if (file.type) {
+ const splittedType: string[] = file.type.split("/");
+ return [splittedType[0], splittedType[1]];
+ } else {
+ return ["octet", "octet"];
+ }
+ } else {
+ const splittedType: string[] | undefined = type?.split("/");
+ if (splittedType && splittedType.length > 1) {
+ return [splittedType[0], splittedType[1]];
+ } else {
+ return ["octet", "octet"];
+ }
+ }
+
+
+}
\ No newline at end of file
diff --git a/src/files-ui/components/file-item/hooks/useFileItemNeoClassName.ts b/src/files-ui/components/file-item/hooks/useFileItemNeoClassName.ts
new file mode 100644
index 0000000000000000000000000000000000000000..940cfddc34681cb09179f5ca0b812a7048b8d46f
--- /dev/null
+++ b/src/files-ui/components/file-item/hooks/useFileItemNeoClassName.ts
@@ -0,0 +1,31 @@
+import * as React from "react";
+import { FileItemPropsNeo } from "../components/FileItem/FileItemPropsNeo";
+/**
+ * Custom hook that generates the final className for main container
+ * on FleItem
+ * @param resultOnTooltip whether to show the result on tooltip or not
+ * @param elevation the shadow elevation
+ * @returns the fiaal classNmae
+ */
+const useFileItemNeoClassName = (
+ resultOnTooltip: boolean,
+ elevation: FileItemPropsNeo["elevation"]
+): string => {
+ const [classNameCreated, setClassNameCreated] =
+ React.useState<string>("");
+
+ React.useEffect(() => {
+ let baseClassName: string =
+ "file-item-full-container-container";
+
+ if (resultOnTooltip) {
+ baseClassName += " dz-ui-tooltip";
+ }
+ if (elevation && [1, 2, 3, 4, "1", "2", "3", "4"].includes(elevation)) {
+ baseClassName += ` dz-ui-paper-elevation-${elevation}`;
+ }
+ setClassNameCreated(baseClassName);
+ }, [resultOnTooltip]);
+ return classNameCreated;
+}
+export default useFileItemNeoClassName;
\ No newline at end of file
diff --git a/src/files-ui/components/file-item/hooks/useFileItemProgress.ts b/src/files-ui/components/file-item/hooks/useFileItemProgress.ts
new file mode 100644
index 0000000000000000000000000000000000000000..bd61da06d5264713c06f0b10ef26b94d029f3f5b
--- /dev/null
+++ b/src/files-ui/components/file-item/hooks/useFileItemProgress.ts
@@ -0,0 +1,41 @@
+import * as React from "react";
+
+/**
+ *
+ * @param progress
+ * @param showProgress
+ * @param xhr
+ * @returns
+ */
+const useFileItemProgress = (
+ progress: number | undefined,
+ showProgress: boolean | undefined,
+ xhr?: XMLHttpRequest,
+
+): number | undefined => {
+
+ const [localProgress, setLocalProgress] = React.useState<number | undefined>(undefined);
+ // handlers
+ const handleProgress = (currentProgress: number): void => {
+ setLocalProgress(currentProgress);
+ };
+
+ React.useEffect(() => {
+ if (progress && showProgress)
+ handleProgress(typeof progress === "undefined" || progress === 0 ? 1 : progress);
+ }, [progress, showProgress]);
+
+
+ React.useEffect(() => {
+ if (xhr && xhr !== null && showProgress && xhr.upload.onprogress === null) {
+ xhr.upload.onprogress = (event) => {
+ if (!progress)
+ handleProgress((event.loaded / event.total) * 100);
+ };
+ handleProgress(1);
+ }
+ }, [xhr, showProgress, progress]);
+
+ return localProgress;
+}
+export default useFileItemProgress;
\ No newline at end of file
diff --git a/src/files-ui/components/file-item/index.ts b/src/files-ui/components/file-item/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..84098b699e8d04173393b8e4466dcdcd59de1be2
--- /dev/null
+++ b/src/files-ui/components/file-item/index.ts
@@ -0,0 +1,6 @@
+
+export {default as FileItem} from "./components/FileItem/FileItem";
+export * from "./components/FileItem/FileItem";
+
+export {default as FileItemContainer} from "./components/FileItemContainer/FileItemContainer";
+export * from "./components/FileItemContainer/FileItemContainer";
diff --git a/src/files-ui/components/file-item/utils/getLocalFileItemData.ts b/src/files-ui/components/file-item/utils/getLocalFileItemData.ts
new file mode 100644
index 0000000000000000000000000000000000000000..0e8bd5630edda956c75f88eac5cba18f25349685
--- /dev/null
+++ b/src/files-ui/components/file-item/utils/getLocalFileItemData.ts
@@ -0,0 +1,32 @@
+/**
+ *
+ * @param file
+ * @param name
+ * @param type
+ * @param size
+ * @returns the file name, type and size
+ */
+export const getLocalFileItemData = (
+ file: File | undefined,
+ name: string | undefined,
+ type: string | undefined,
+ size: number | undefined
+): [string, string | undefined, number | undefined] => {
+
+ let localFileName: string = "";
+ let localFileType: string | undefined = undefined;
+ let localFileSize: number | undefined = undefined;
+
+ // if file object is valid, obtain metadata from it
+ // otherwise try to get file data from individual props in string format
+ if (file && typeof file.name === "string") {
+ localFileName = file.name;
+ localFileType = file.type;
+ localFileSize = file.size;
+ } else if (name && typeof name === "string") {
+ localFileName = name;
+ localFileType = type;
+ localFileSize = size;
+ }
+ return [localFileName, localFileType, localFileSize]
+}
\ No newline at end of file
diff --git a/src/files-ui/components/file-item/utils/showFileItemComponent.ts b/src/files-ui/components/file-item/utils/showFileItemComponent.ts
new file mode 100644
index 0000000000000000000000000000000000000000..8928339477d3c5b57e88090dcbd04946c631754b
--- /dev/null
+++ b/src/files-ui/components/file-item/utils/showFileItemComponent.ts
@@ -0,0 +1,26 @@
+/**
+ * Checks wheter the file objector at least the file name was given in order to show the file Item component
+ * @param file the file object
+ * @param name the file name
+ * @returns true if the file object or the file name were given and are strings
+ */
+export const showFileItemComponent = (
+ file: File | undefined,
+ name: string | undefined,
+ //classNameCreatedReady: boolean
+): boolean => {
+
+ let result = false;
+ if (file && typeof file.name === "string"
+ //&& classNameCreatedReady
+ ) {
+ result = true;
+ }
+ if (!result && name && typeof name == "string"
+ //&& classNameCreatedReady
+ ) {
+ result = true;
+ }
+ //console.log("showFileItemComponent", file, name, classNameCreatedReady, result);
+ return result;
+}
\ No newline at end of file
diff --git a/src/files-ui/components/file-mosaic/components/FIleMosaicImageLayer/FileMosaicImageLayer.tsx b/src/files-ui/components/file-mosaic/components/FIleMosaicImageLayer/FileMosaicImageLayer.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..fa11b845c5245563eab48d8d39262d232d6c3d42
--- /dev/null
+++ b/src/files-ui/components/file-mosaic/components/FIleMosaicImageLayer/FileMosaicImageLayer.tsx
@@ -0,0 +1,73 @@
+import * as React from "react";
+import { ImagePreview } from "../../../previews";
+interface FileMosaicImageLayerProps {
+ /**
+ * The image source
+ */
+ imageSource: string | undefined;
+ /**
+ * the url file icon
+ */
+ url: string;
+ /**
+ * The name to be used as alt
+ */
+ fileName: string;
+
+ /**
+ *
+ */
+ card?: boolean;
+ /**
+ *
+ */
+ isBlur?: boolean;
+}
+const FileMosaicImageLayer: React.FC<FileMosaicImageLayerProps> = (
+ props: FileMosaicImageLayerProps
+) => {
+ //console.log("FileMosaicImageLayer", props);
+ const { imageSource, url, fileName, card, isBlur } = props;
+
+ const [localSource, setSource] = React.useState<string | undefined>(
+ undefined
+ );
+ const [error, setError] = React.useState<boolean>(false);
+
+ //assign to localSource the imageSource or the url of the ile type
+ React.useEffect(() => {
+ setSource(imageSource || url);
+ }, [imageSource, url]);
+
+ /**
+ * When an error occurs when setting the source, the url will be used instead.
+ * The url always is a valid image url
+ */
+ const handleError = () => {
+ setError(true);
+ setSource(url);
+ };
+
+ //If blur is true
+ if (isBlur) {
+ return (
+ <React.Fragment>
+ {/** If it is not card, there isn't an error and there is an imageSource*/}
+ {!card && !error && imageSource && (
+ <ImagePreview src={localSource} alt={`blur ${fileName}`} />
+ )}
+ </React.Fragment>
+ );
+ }
+ return (
+ <React.Fragment>
+ <ImagePreview
+ onError={handleError}
+ src={localSource}
+ style={{ borderRadius: "0px" }}
+ alt={`preview ${fileName}`}
+ />
+ </React.Fragment>
+ );
+};
+export default FileMosaicImageLayer;
diff --git a/src/files-ui/components/file-mosaic/components/FileMosaicInfoLayer/FileMosaicInfoLayer.scss b/src/files-ui/components/file-mosaic/components/FileMosaicInfoLayer/FileMosaicInfoLayer.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/src/files-ui/components/file-mosaic/components/FileMosaicInfoLayer/FileMosaicInfoLayer.tsx b/src/files-ui/components/file-mosaic/components/FileMosaicInfoLayer/FileMosaicInfoLayer.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..3e5156647fb6c43287acf9eb17ed28c90bb0f5c3
--- /dev/null
+++ b/src/files-ui/components/file-mosaic/components/FileMosaicInfoLayer/FileMosaicInfoLayer.tsx
@@ -0,0 +1,42 @@
+import * as React from "react";
+import { Cancel } from "../../../icons";
+import FileMosaicStatus from "../FileMosaicStatus/FileMosaicStatus";
+import { FileMosaicInfoLayerProps } from "./FileMosaicInfoLayerProps";
+
+const FileMosaicInfoLayer: React.FC<FileMosaicInfoLayerProps> = (
+ props: FileMosaicInfoLayerProps
+) => {
+ const {
+ valid,
+ localization,
+ onCloseInfo,
+ uploadStatus,
+ localName,
+ sizeFormatted,
+ localType,
+ } = props;
+ return (
+ <React.Fragment>
+ <div className="files-ui-file-mosaic-info-layer-header">
+ <Cancel
+ style={{ margin: 0, right: 0, top: 0 }}
+ color="rgba(255,255,255,0.8)"
+ onClick={onCloseInfo}
+ colorFill="black"
+ />
+ <FileMosaicStatus
+ valid={valid}
+ uploadStatus={uploadStatus}
+ localization={localization}
+ />
+ </div>
+ <div className="heading">Name:</div>
+ <div className="label">{localName}</div>
+ <div className="heading">Size:</div>
+ <div className="label">{sizeFormatted}</div>
+ <div className="heading">Type:</div>
+ <div className="label">{localType}</div>
+ </React.Fragment>
+ );
+};
+export default FileMosaicInfoLayer;
diff --git a/src/files-ui/components/file-mosaic/components/FileMosaicInfoLayer/FileMosaicInfoLayerProps.ts b/src/files-ui/components/file-mosaic/components/FileMosaicInfoLayer/FileMosaicInfoLayerProps.ts
new file mode 100644
index 0000000000000000000000000000000000000000..7bb535a6f84145dcf297a2433d7bd139fd3a0fb2
--- /dev/null
+++ b/src/files-ui/components/file-mosaic/components/FileMosaicInfoLayer/FileMosaicInfoLayerProps.ts
@@ -0,0 +1,13 @@
+import { Localization, UPLOADSTATUS } from "../../../../core";
+
+export interface FileMosaicInfoLayerProps{
+ valid: boolean | null | undefined;
+ uploadStatus?: UPLOADSTATUS;
+ localization?: Localization;
+
+ onCloseInfo?:Function;
+
+ localName: string;
+ sizeFormatted: string;
+ localType?: string;
+}
\ No newline at end of file
diff --git a/src/files-ui/components/file-mosaic/components/FileMosaicMainLayer.tsx/FileMosaicMainLayer.scss b/src/files-ui/components/file-mosaic/components/FileMosaicMainLayer.tsx/FileMosaicMainLayer.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/src/files-ui/components/file-mosaic/components/FileMosaicMainLayer.tsx/FileMosaicMainLayer.tsx b/src/files-ui/components/file-mosaic/components/FileMosaicMainLayer.tsx/FileMosaicMainLayer.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..c2680da5efb6129547c371f737f4d847d106c108
--- /dev/null
+++ b/src/files-ui/components/file-mosaic/components/FileMosaicMainLayer.tsx/FileMosaicMainLayer.tsx
@@ -0,0 +1,116 @@
+import * as React from "react";
+import {
+ Clear,
+ DownloadFile,
+ InfoDisney,
+ PlayIcon,
+ Visibility,
+} from "../../../icons";
+import FileMosaicSize from "../FileMosaicSize/FileMosaicSize";
+import FileMosaicStatus from "../FileMosaicStatus/FileMosaicStatus";
+import { FileMosaicMainLayerProps } from "./FileMosaicMainLayerProps";
+
+const FileMosaicMainLayer: React.FC<FileMosaicMainLayerProps> = (
+ props: FileMosaicMainLayerProps
+) => {
+ const {
+ darkMode,deleteIcon,
+ downloadIcon,
+ imageIcon,
+ infoIcon,
+ onDelete,
+ onDownload,
+ onOpenInfo,
+ onSee,
+ onWatch,
+ sizeFormatted,
+ valid,
+ videoIcon,
+ localization,
+ uploadStatus,
+ isActive,
+ } = props;
+ return (
+ <React.Fragment>
+ <div className="file-mosaic-main-layer-header">
+ {isActive && deleteIcon && (
+ <Clear
+ className={
+ darkMode ? "files-ui-file-icon dark-mode" : "files-ui-file-icon"
+ }
+ color={darkMode ? "#121212" : "rgba(255,255,255,0.851)"}
+ onClick={onDelete}
+ size="small"
+ colorFill="transparent"
+ />
+ )}
+ </div>
+ <div className="file-mosaic-main-layer-footer">
+ <div className="file-mosaic-footer-left">
+ <FileMosaicStatus
+ valid={valid}
+ uploadStatus={uploadStatus}
+ localization={localization}
+ />
+ {isActive && <FileMosaicSize sizeFormatted={sizeFormatted} />}
+ </div>
+ <div className="file-mosaic-footer-right">
+ {isActive && (
+ <React.Fragment>
+ {imageIcon && (
+ <Visibility
+ className={
+ darkMode
+ ? "files-ui-file-icon dark-mode"
+ : "files-ui-file-icon"
+ }
+ color={darkMode ? "#121212" : "rgba(255,255,255,0.851)"}
+ onClick={onSee}
+ size="small"
+ />
+ )}
+
+ {videoIcon && (
+ <PlayIcon
+ className={
+ darkMode
+ ? "files-ui-file-icon dark-mode"
+ : "files-ui-file-icon"
+ }
+ color={darkMode ? "#121212" : "rgba(255,255,255,0.851)"}
+ onClick={onWatch}
+ size="small"
+ />
+ )}
+ {downloadIcon && (
+ <DownloadFile
+ className={
+ darkMode
+ ? "files-ui-file-icon dark-mode"
+ : "files-ui-file-icon"
+ }
+ color={darkMode ? "#121212" : "rgba(255,255,255,0.851)"}
+ onClick={onDownload}
+ size="small"
+ />
+ )}
+ {infoIcon && (
+ <InfoDisney
+ className={
+ darkMode
+ ? "files-ui-file-icon dark-mode"
+ : "files-ui-file-icon"
+ }
+ onClick={onOpenInfo}
+ color={darkMode ? "#121212" : "rgba(255,255,255,0.851)"}
+ size="micro"
+ />
+ )}
+ </React.Fragment>
+ )}
+ </div>
+ </div>
+ </React.Fragment>
+ );
+};
+export default FileMosaicMainLayer;
diff --git a/src/files-ui/components/file-mosaic/components/FileMosaicMainLayer.tsx/FileMosaicMainLayerProps.ts b/src/files-ui/components/file-mosaic/components/FileMosaicMainLayer.tsx/FileMosaicMainLayerProps.ts
new file mode 100644
index 0000000000000000000000000000000000000000..7f8fcfa000089c98d798d42fa44aae4c8770fd57
--- /dev/null
+++ b/src/files-ui/components/file-mosaic/components/FileMosaicMainLayer.tsx/FileMosaicMainLayerProps.ts
@@ -0,0 +1,28 @@
+import { Localization, UPLOADSTATUS } from "../../../../core";
+
+export interface FileMosaicMainLayerProps {
+ darkMode?: boolean;
+ deleteIcon?: boolean;
+ onDelete?: Function;
+
+
+ valid: boolean | null | undefined;
+ uploadStatus?: UPLOADSTATUS;
+ localization?: Localization;
+
+ sizeFormatted: string;
+
+ imageIcon: boolean;
+ onSee: ((imageSource: string | undefined) => void) | undefined;
+
+ videoIcon: boolean;
+ onWatch: ((videoSource: File | undefined) => void) | undefined;
+
+ downloadIcon: boolean;
+ onDownload: Function | undefined;
+
+ infoIcon: boolean;
+ onOpenInfo: Function | undefined;
+
+ isActive?: boolean;
+}
\ No newline at end of file
diff --git a/src/files-ui/components/file-mosaic/components/FileMosaicName/FileMosaicName.tsx b/src/files-ui/components/file-mosaic/components/FileMosaicName/FileMosaicName.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..67b6bbe5b608caccfdc6d99ab6c5d4c702139a2a
--- /dev/null
+++ b/src/files-ui/components/file-mosaic/components/FileMosaicName/FileMosaicName.tsx
@@ -0,0 +1,16 @@
+import * as React from "react";
+
+export type FileMosaicNameProps = {
+ fileName?: string;
+};
+
+const FileMosaicName: React.FC<FileMosaicNameProps> = (
+ props: FileMosaicNameProps
+) => {
+ const { fileName } = props;
+ if (fileName) return <span>{fileName}</span>;
+ else {
+ return <></>;
+ }
+};
+export default FileMosaicName;
diff --git a/src/files-ui/components/file-mosaic/components/FileMosaicSize/FileMosaicSize.scss b/src/files-ui/components/file-mosaic/components/FileMosaicSize/FileMosaicSize.scss
new file mode 100644
index 0000000000000000000000000000000000000000..46f865f054f7c8d8bc177a8e9099bd4c97f65ae7
--- /dev/null
+++ b/src/files-ui/components/file-mosaic/components/FileMosaicSize/FileMosaicSize.scss
@@ -0,0 +1,20 @@
+.dui-file-item-size {
+ box-sizing: border-box;
+ font-size: 0.7rem;
+ border: 0.5px solid wheat;
+ //outline: 0.5px solid wheat;
+ text-align: center;
+ //border: none;
+ color: rgba(255, 255, 255, 0.89);
+ //margin: 1.5px 1.5px 0% 0%;
+ padding: 2px 1.5px;
+ border-radius: 7px;
+ background-color: rgba(32, 33, 36, 0.75);
+ min-width: 45px;
+ word-break: break-word;
+ font-family: inherit;
+ &:hover {
+ background-color: rgba(32, 33, 36, 0.85);
+ color: rgba(255, 255, 255, 0.97);
+ }
+}
diff --git a/src/files-ui/components/file-mosaic/components/FileMosaicSize/FileMosaicSize.tsx b/src/files-ui/components/file-mosaic/components/FileMosaicSize/FileMosaicSize.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..2f7ba08c6093be8b3284f4bf230fa729d184213f
--- /dev/null
+++ b/src/files-ui/components/file-mosaic/components/FileMosaicSize/FileMosaicSize.tsx
@@ -0,0 +1,18 @@
+import * as React from "react";
+import "./FileMosaicSize.scss";
+export type FileItemSizeProps = {
+ sizeFormatted?: string;
+};
+const FileMosaicSize: React.FC<FileItemSizeProps> = (
+ props: FileItemSizeProps
+) => {
+ const { sizeFormatted } = props;
+ return (
+ <React.Fragment>
+ {sizeFormatted && (
+ <div className="dui-file-item-size">{sizeFormatted}</div>
+ )}
+ </React.Fragment>
+ );
+};
+export default FileMosaicSize;
diff --git a/src/files-ui/components/file-mosaic/components/FileMosaicStatus/FileMosaicStatus.scss b/src/files-ui/components/file-mosaic/components/FileMosaicStatus/FileMosaicStatus.scss
new file mode 100644
index 0000000000000000000000000000000000000000..653ed558be92526fd1995c69674350dc3f7d0a4a
--- /dev/null
+++ b/src/files-ui/components/file-mosaic/components/FileMosaicStatus/FileMosaicStatus.scss
@@ -0,0 +1,49 @@
+.files-ui-file-item-status-container {
+ text-align: center;
+ font-size: 0.8rem;
+ background-color: rgba(255, 255, 255, 0.8);
+ display: flex;
+ align-items: center;
+ flex-direction: row;
+ border-radius: 4px;
+ padding: 0.5px;
+ font-weight: 400;
+ &.file-status-error {
+ color: #f44336;
+ }
+ &.file-status-ok {
+ color: #5c7a1f;
+ }
+ &.file-status-loading {
+ &.percentage{
+ padding: 7px 4px 2px 5px;
+ }
+ //
+ position: relative;
+ .abort-button {
+ position: absolute;
+ right: -2px;
+ top: -2px;
+ }
+ display: flex;
+ color: #8b6b10;
+ align-items: center;
+ justify-content: center;
+ flex-direction: column;
+ background-color: rgba(255, 255, 255, 0.7);
+
+ //background-color: transparent;
+ .uploading-text {
+ &.up {
+ margin-bottom: -22px;
+ }
+ &.down {
+ margin-top: -20px;
+ }
+
+ p.percentage {
+ font-weight: 500;
+ }
+ }
+ }
+}
diff --git a/src/files-ui/components/file-mosaic/components/FileMosaicStatus/FileMosaicStatus.tsx b/src/files-ui/components/file-mosaic/components/FileMosaicStatus/FileMosaicStatus.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..4302542752cbdc8abd5b018e4628f093ff60f1d1
--- /dev/null
+++ b/src/files-ui/components/file-mosaic/components/FileMosaicStatus/FileMosaicStatus.tsx
@@ -0,0 +1,56 @@
+import * as React from "react";
+
+import { CheckCircle, CloudDone, DoDisturb, UploadError } from "../../../icons";
+import { FileMosaicStatusProps } from "./FileMosaicStatusProps";
+import "./FileMosaicStatus.scss";
+import { FileItemLocalizerSelector, LocalLabels } from "../../../../core";
+
+const FileMosaicStatus: React.FC<FileMosaicStatusProps> = (
+ props: FileMosaicStatusProps
+) => {
+ const { valid, uploadStatus, localization } = props;
+
+ const FileItemStatusLocalizer: LocalLabels = FileItemLocalizerSelector(
+ localization
+ ).status as LocalLabels;
+
+ if (uploadStatus === "success") {
+ return (
+ <div className="files-ui-file-item-status-container file-status-ok">
+ <CloudDone color="#4caf50" size="small" className="status-icon" />
+ {FileItemStatusLocalizer.success as string}
+ </div>
+ );
+ }
+ if (uploadStatus === "error") {
+ return (
+ <div className="files-ui-file-item-status-container file-status-error">
+ <UploadError
+ color="#f44336"
+ size="semi-medium"
+ className="status-icon"
+ />
+ {FileItemStatusLocalizer.error as string}
+ </div>
+ );
+ }
+ if (valid !== undefined && valid !== null) {
+ if (valid) {
+ return (
+ <div className="files-ui-file-item-status-container file-status-ok">
+ <CheckCircle color="#4caf50" size="small" className="status-icon" />
+ {FileItemStatusLocalizer.valid as string}
+ </div>
+ );
+ } else {
+ return (
+ <div className="files-ui-file-item-status-container file-status-error">
+ <DoDisturb color="#f44336" size="small" className="status-icon" />
+ {FileItemStatusLocalizer.denied as string}
+ </div>
+ );
+ }
+ }
+ return <></>;
+};
+export default FileMosaicStatus;
diff --git a/src/files-ui/components/file-mosaic/components/FileMosaicStatus/FileMosaicStatusProps.ts b/src/files-ui/components/file-mosaic/components/FileMosaicStatus/FileMosaicStatusProps.ts
new file mode 100644
index 0000000000000000000000000000000000000000..577c58a09659bca32ad33e996eebe2faaa7811ec
--- /dev/null
+++ b/src/files-ui/components/file-mosaic/components/FileMosaicStatus/FileMosaicStatusProps.ts
@@ -0,0 +1,25 @@
+import { Localization, UPLOADSTATUS } from "../../../../core";
+
+
+export interface FileMosaicStatusProps {
+ /**
+ * whether show a valid or rejected message
+ * by def. valid is false (if not present, is false too)
+ */
+ valid?: boolean | null;
+ /**
+ *
+ */
+ uploadStatus?: UPLOADSTATUS;
+ /**
+ * A message for the status item
+ */
+ message?: string;
+ /**
+ * language to be used
+ * for now
+ * only English and Spanish is supported
+ */
+ localization?: Localization;
+
+}
\ No newline at end of file
diff --git a/src/files-ui/components/file-mosaic/components/FileMosaicUploadLayer/FileMosaicUploadLayer.scss b/src/files-ui/components/file-mosaic/components/FileMosaicUploadLayer/FileMosaicUploadLayer.scss
new file mode 100644
index 0000000000000000000000000000000000000000..7c8ad35cb606e66c81f99394a1fe93af4a5ba2e0
--- /dev/null
+++ b/src/files-ui/components/file-mosaic/components/FileMosaicUploadLayer/FileMosaicUploadLayer.scss
@@ -0,0 +1,45 @@
+.files-ui-file-mosaic-upload-layer {
+ width: 100%;
+ height: 100%;
+ background-color: rgba(0, 0, 0, 0.5);
+ color: rgba(255, 255, 255, 0.8);
+ font-weight: 500;
+ font-size: 1em;
+ position: relative;
+ overflow: hidden;
+
+ .elevation-list {
+ transition: all 2s ease-in-out;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-direction: column;
+ .elevation-item {
+ width: 100%;
+ height: 132px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-direction: column;
+ padding: 0 10px;
+ box-sizing: border-box;
+
+ span {
+ text-align: center;
+ word-break: break-word;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ display: -webkit-box;
+ -webkit-line-clamp: 2; /* number of lines to show */
+ line-clamp: 2;
+ -webkit-box-orient: vertical;
+ }
+ }
+ }
+
+
+}
diff --git a/src/files-ui/components/file-mosaic/components/FileMosaicUploadLayer/FileMosaicUploadLayer.tsx b/src/files-ui/components/file-mosaic/components/FileMosaicUploadLayer/FileMosaicUploadLayer.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..e84a9125698f893ab222e8a41eab64c3e13c1ebf
--- /dev/null
+++ b/src/files-ui/components/file-mosaic/components/FileMosaicUploadLayer/FileMosaicUploadLayer.tsx
@@ -0,0 +1,165 @@
+import * as React from "react";
+import { FileMosaicUploadLayerProps } from "./FileMosaicUploadLayerProps";
+import "./FileMosaicUploadLayer.scss";
+import InfiniteLoader from "../../../loader/InfiniteLoader/InfiniteLoader";
+import {
+ FileItemLocalizerSelector,
+ LocalLabels,
+ UPLOADSTATUS,
+} from "../../../../core";
+import {
+ CheckCircle,
+ Clear,
+ //CloudDone,
+ DoDisturb,
+ //UploadError,
+} from "../../../icons";
+import { DynamicLoader } from "../../../loader";
+
+const FileMosaicUploadLayer: React.FC<FileMosaicUploadLayerProps> = (
+ props: FileMosaicUploadLayerProps
+) => {
+ const { uploadStatus, onCancel, onAbort, progress, localization } = props;
+ //console.log("FileMosaicUploadLayer CHANGE progress", progress, uploadStatus);
+ const elevationContainerRef = React.useRef<HTMLDivElement | null>(null);
+ const listContainerStoryRef = React.useRef<HTMLDivElement | null>(null);
+
+ const FileItemStatusLocalizer: LocalLabels = FileItemLocalizerSelector(
+ localization
+ ).status as LocalLabels;
+
+ const [statusHistory, setStatusHistory] = React.useState<
+ Array<UPLOADSTATUS | undefined>
+ >([undefined]);
+
+ React.useEffect(() => {
+ setStatusHistory((statusHistory: Array<UPLOADSTATUS | undefined>) => {
+ return [...statusHistory, uploadStatus];
+ });
+ }, [uploadStatus]);
+
+ const elevate = () => {
+ const currentElevationContainer = elevationContainerRef.current;
+ const currentElevationList = listContainerStoryRef.current;
+ if (currentElevationContainer === null || currentElevationList === null)
+ return;
+
+ currentElevationList.style.top =
+ 0 - (statusHistory.length - 1) * 132 + "px";
+ };
+ React.useEffect(() => {
+ if (statusHistory.length > 1) {
+ elevate();
+ }
+ }, [statusHistory.length]);
+
+ const PreparingStatus = () => {
+ return (
+ <React.Fragment>
+ <InfiniteLoader onClick={onCancel} size={65} />
+ <span>{FileItemStatusLocalizer.preparing as string}</span>
+ </React.Fragment>
+ );
+ };
+ const UploadingStatus = React.useMemo(
+ () => () =>
+ (
+ <React.Fragment>
+ {progress !== undefined ? (
+ <DynamicLoader
+ size={70}
+ x={35}
+ y={35}
+ radius={32}
+ percentage={progress}
+ width={6}
+ hidePerncentage={progress === undefined || onAbort !== undefined}
+ onClick={onAbort}
+ />
+ ) : (
+ <InfiniteLoader onClick={onAbort} size={70} />
+ )}
+ <span> {FileItemStatusLocalizer.uploading as string}</span>
+ </React.Fragment>
+ ),
+ [progress, onAbort, FileItemStatusLocalizer]
+ );
+
+ const SuccessStatus = () => {
+ return (
+ <React.Fragment>
+ <CheckCircle
+ color="#4caf50"
+ size={65}
+ //style={{ backgroundColor: "rgba(255,255,255,0.8)", borderRadius: "50%", padding: 8 }}
+ />
+ <span> {FileItemStatusLocalizer.success as string}</span>
+ </React.Fragment>
+ );
+ };
+ const ErrorStatus = () => {
+ return (
+ <React.Fragment>
+ <Clear
+ color="rgba(255,255,255,0.4)"
+ style={{
+ backgroundColor: "rgba(244, 67, 54, 0.8)",
+ borderRadius: "50%",
+ }}
+ size={65}
+ />
+ <span> {FileItemStatusLocalizer.error as string}</span>
+ </React.Fragment>
+ );
+ };
+ const AbortedStatus = () => {
+ return (
+ <React.Fragment>
+ <DoDisturb color="#f44336" size={65} />
+ <span> {FileItemStatusLocalizer.aborted as string}</span>
+ </React.Fragment>
+ );
+ };
+ const Empty = () => {
+ return (
+ <React.Fragment>
+ <div style={{ width: "100%", height: "132px" }}>
+ {/* <span> VACIOOOOO</span> */}
+ </div>
+ </React.Fragment>
+ );
+ };
+
+ const StatusSelector = (status: UPLOADSTATUS | undefined) => {
+ switch (status) {
+ case "preparing":
+ return <PreparingStatus />;
+ case "uploading":
+ return <UploadingStatus />;
+ case "error":
+ return <ErrorStatus />;
+ case "success":
+ return <SuccessStatus />;
+ case "aborted":
+ return <AbortedStatus />;
+ default:
+ return <Empty />;
+ }
+ };
+ //default phase
+
+ return (
+ <div className={"elevation-layer-container"} ref={elevationContainerRef}>
+ <div className="elevation-list" ref={listContainerStoryRef}>
+ {statusHistory.map((status, index) => {
+ return (
+ <div className="elevation-item" key={index + 1}>
+ {StatusSelector(status)}
+ </div>
+ );
+ })}
+ </div>
+ </div>
+ );
+};
+export default FileMosaicUploadLayer;
diff --git a/src/files-ui/components/file-mosaic/components/FileMosaicUploadLayer/FileMosaicUploadLayerLegacy.scss b/src/files-ui/components/file-mosaic/components/FileMosaicUploadLayer/FileMosaicUploadLayerLegacy.scss
new file mode 100644
index 0000000000000000000000000000000000000000..104debc432e3c6ad49b8957203608060b8b13a4b
--- /dev/null
+++ b/src/files-ui/components/file-mosaic/components/FileMosaicUploadLayer/FileMosaicUploadLayerLegacy.scss
@@ -0,0 +1,83 @@
+.files-ui-file-mosaic-upload-layer {
+ width: 100%;
+ height: 100%;
+ background-color: rgba(0, 0, 0, 0.5);
+ color: rgba(255, 255, 255, 0.8);
+ font-weight: 500;
+ font-size: 1em;
+ position: relative;
+ overflow: hidden;
+
+ .elevation-list {
+ transition: all 2s ease-in-out;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-direction: column;
+ .elevation-item {
+ width: 100%;
+ height: 132px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-direction: column;
+ padding: 0 10px;
+ box-sizing: border-box;
+
+ text {
+ text-align: center;
+ word-break: break-all;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ display: -webkit-box;
+ -webkit-line-clamp: 2; /* number of lines to show */
+ line-clamp: 2;
+ -webkit-box-orient: vertical;
+ }
+ }
+ }
+
+ .elevation-layer-container {
+ width: 100%;
+ height: 100%;
+ //display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-direction: column;
+ .elevate-layer {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-direction: column;
+ //transform: translateY(0px);
+ //transition: all 0.3s ease-in-out;
+ }
+ .appear-layer {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-direction: column;
+ //transform: translateY(132px);
+ //transition: all 0.3s ease-in-out;
+ }
+ &.elevate {
+ .elevate-layer {
+ transform: translateY(-132px);
+ transition: all 2s ease-in-out;
+ }
+ .appear-layer {
+ transform: translateY(-132px);
+ transition: all 2s ease-in-out;
+ }
+ }
+ }
+ }
+
\ No newline at end of file
diff --git a/src/files-ui/components/file-mosaic/components/FileMosaicUploadLayer/FileMosaicUploadLayerLegacy.tsx b/src/files-ui/components/file-mosaic/components/FileMosaicUploadLayer/FileMosaicUploadLayerLegacy.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..8ae7926c8bdfb788d65f0a1cbca2903eb2d18c3c
--- /dev/null
+++ b/src/files-ui/components/file-mosaic/components/FileMosaicUploadLayer/FileMosaicUploadLayerLegacy.tsx
@@ -0,0 +1,144 @@
+import * as React from "react";
+import { FileMosaicUploadLayerProps } from "./FileMosaicUploadLayerProps";
+import "./FileMosaicUploadLayer.scss";
+import InfiniteLoader from "../../../loader/InfiniteLoader/InfiniteLoader";
+import {
+ FileItemLocalizerSelector,
+ LocalLabels,
+ UPLOADSTATUS,
+} from "../../../../core";
+import { CheckCircle, CloudDone, UploadError } from "../../../icons";
+import { DynamicLoader } from "../../../loader";
+
+const FileMosaicUploadLayerLegacy: React.FC<FileMosaicUploadLayerProps> = (
+ props: FileMosaicUploadLayerProps
+) => {
+ const { uploadStatus, onCancel, onAbort, progress, localization } = props;
+ const FileItemStatusLocalizer: LocalLabels = FileItemLocalizerSelector(
+ localization
+ ).status as LocalLabels;
+
+ //console.log("CHANGE uploadStatus", uploadStatus);
+ console.log("FileMosaicUploadLayerLegacy CHANGE progress", progress);
+ const [lastUploadStatus, setLastUploadStatus] = React.useState<
+ UPLOADSTATUS | undefined
+ >(undefined);
+ const [elevate, setElevate] = React.useState(false);
+ // const [layers, setLayers] = React.useState();
+
+ React.useEffect(() => {
+ if (uploadStatus === lastUploadStatus) {
+ //no elevation
+ } else {
+ setLastUploadStatus(uploadStatus);
+ }
+
+ /* if(lastUploadStatus===undefined){
+ return;
+ } */
+
+ if (lastUploadStatus !== undefined && lastUploadStatus !== uploadStatus) {
+ setElevate(true);
+ }
+
+ setTimeout(() => {
+ setElevate(false);
+ setLastUploadStatus(uploadStatus);
+ }, 2000);
+ }, [uploadStatus]);
+
+ const PreparingStatus = () => {
+ return (
+ <React.Fragment>
+ <InfiniteLoader
+ onClick={() => {
+ alert("clicked");
+ }}
+ size={60}
+ />
+ <text> preparing</text>
+ </React.Fragment>
+ );
+ };
+ const UploadingStatus = () => {
+ return (
+ <React.Fragment>
+ {progress ? (
+ <DynamicLoader
+ size={60}
+ x={30}
+ y={30}
+ radius={27}
+ percentage={progress}
+ width={6}
+ hidePerncentage={onAbort !== undefined}
+ />
+ ) : (
+ <InfiniteLoader
+ onClick={() => {
+ alert("clicked");
+ }}
+ size={60}
+ />
+ )}
+ <text> {FileItemStatusLocalizer.uploading as string}</text>
+ </React.Fragment>
+ );
+ };
+ const SuccessStatus = () => {
+ return (
+ <React.Fragment>
+ <CloudDone color="#4caf50" size={60} />
+ <text> success</text>
+ </React.Fragment>
+ );
+ };
+ const ErrorStatus = () => {
+ return (
+ <React.Fragment>
+ <UploadError color="#f44336" size={60} />
+ <text> error</text>
+ </React.Fragment>
+ );
+ };
+ const Empty = () => {
+ return (
+ <React.Fragment>
+ <text> VACIOOOOO</text>
+ </React.Fragment>
+ );
+ };
+
+ const StatusSelector = (status: UPLOADSTATUS | undefined) => {
+ switch (status) {
+ case "preparing":
+ return <PreparingStatus />;
+ case "uploading":
+ return <UploadingStatus />;
+ case "error":
+ return <ErrorStatus />;
+ case "success":
+ return <SuccessStatus />;
+ default:
+ return <Empty />;
+ }
+ };
+ //default phase
+ if (lastUploadStatus === undefined && uploadStatus === undefined) {
+ return <></>;
+ }
+ return (
+ <div
+ className={
+ elevate
+ ? "elevation-layer-container elevate"
+ : "elevation-layer-container"
+ }
+ >
+ <div className="elevate-layer">{StatusSelector(lastUploadStatus)}</div>
+
+ <div className="appear-layer">{StatusSelector(uploadStatus)}</div>
+ </div>
+ );
+};
+export default FileMosaicUploadLayerLegacy;
diff --git a/src/files-ui/components/file-mosaic/components/FileMosaicUploadLayer/FileMosaicUploadLayerProps.ts b/src/files-ui/components/file-mosaic/components/FileMosaicUploadLayer/FileMosaicUploadLayerProps.ts
new file mode 100644
index 0000000000000000000000000000000000000000..69859573a3a2c89cb835e09e4ba623903d24380e
--- /dev/null
+++ b/src/files-ui/components/file-mosaic/components/FileMosaicUploadLayer/FileMosaicUploadLayerProps.ts
@@ -0,0 +1,14 @@
+import { Localization, UPLOADSTATUS } from "../../../../core";
+
+export interface FileMosaicUploadLayerPropsMap {
+ visible?: boolean;
+ uploadStatus?: UPLOADSTATUS;
+ onCancel?: Function;
+ onAbort?: Function;
+ progress?: number;
+ localization?:Localization;
+}
+
+export type FileMosaicUploadLayerProps = {
+ [T in keyof FileMosaicUploadLayerPropsMap]: FileMosaicUploadLayerPropsMap[T]
+}
\ No newline at end of file
diff --git a/src/files-ui/components/file-mosaic/components/file-mosaic-layer/Layer.scss b/src/files-ui/components/file-mosaic/components/file-mosaic-layer/Layer.scss
new file mode 100644
index 0000000000000000000000000000000000000000..2700e2f8d7fc981d75730810ccc0bf5929088ad8
--- /dev/null
+++ b/src/files-ui/components/file-mosaic/components/file-mosaic-layer/Layer.scss
@@ -0,0 +1,7 @@
+.files-ui-layer{
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 100%;
+}
\ No newline at end of file
diff --git a/src/files-ui/components/file-mosaic/components/file-mosaic-layer/Layer.tsx b/src/files-ui/components/file-mosaic/components/file-mosaic-layer/Layer.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..e42acf7d8fd25eef2a1e09d447980a36d59263d4
--- /dev/null
+++ b/src/files-ui/components/file-mosaic/components/file-mosaic-layer/Layer.tsx
@@ -0,0 +1,24 @@
+import * as React from "react";
+import { addClassName } from "../../../../core";
+import { OverridableComponentProps } from "../../../overridable";
+import "./Layer.scss";
+
+interface LayerProps extends OverridableComponentProps {
+ visible?: boolean;
+}
+
+const Layer: React.FC<LayerProps> = (props: LayerProps) => {
+ const { style, className, children, visible } = props;
+ const finalClassName: string = addClassName(
+ className || "",
+ "files-ui-layer"
+ );
+ if (visible)
+ return (
+ <div className={finalClassName} style={style}>
+ {children}
+ </div>
+ );
+ else return <></>;
+};
+export default Layer;
diff --git a/src/files-ui/components/file-mosaic/components/file-mosaic-layer/LayerContainer.scss b/src/files-ui/components/file-mosaic/components/file-mosaic-layer/LayerContainer.scss
new file mode 100644
index 0000000000000000000000000000000000000000..c62a534818dd169ec81cf7ade69c6adfe332572b
--- /dev/null
+++ b/src/files-ui/components/file-mosaic/components/file-mosaic-layer/LayerContainer.scss
@@ -0,0 +1,3 @@
+.files-ui-layer-container{
+ position: relative;
+}
\ No newline at end of file
diff --git a/src/files-ui/components/file-mosaic/components/file-mosaic-layer/LayerContainer.tsx b/src/files-ui/components/file-mosaic/components/file-mosaic-layer/LayerContainer.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..3509ae013d3d8ee422cae7b097207a001a22f9f5
--- /dev/null
+++ b/src/files-ui/components/file-mosaic/components/file-mosaic-layer/LayerContainer.tsx
@@ -0,0 +1,31 @@
+import * as React from "react";
+import { addClassName } from "../../../../core";
+import { OverridableComponentProps } from "../../../overridable";
+import "./LayerContainer.scss";
+
+interface LayerContainerPropMap extends OverridableComponentProps {}
+
+interface LayerDivProps extends React.HTMLProps<HTMLDivElement> {}
+
+export type LayerContainerProps = {
+ [F in keyof LayerDivProps]: LayerDivProps[F];
+} & {
+ [F in keyof LayerContainerPropMap]: LayerContainerPropMap[F];
+};
+
+const LayerContainer: React.FC<LayerContainerProps> = (
+ props: LayerContainerProps
+) => {
+ const { style, className, children } = props;
+ const finalClassName: string = addClassName(
+ className || "",
+ "files-ui-layer-container"
+ );
+
+ return (
+ <div className={finalClassName} style={style}>
+ {children}
+ </div>
+ );
+};
+export default LayerContainer;
diff --git a/src/files-ui/components/file-mosaic/components/file-mosaic/FileMosaic.scss b/src/files-ui/components/file-mosaic/components/file-mosaic/FileMosaic.scss
new file mode 100644
index 0000000000000000000000000000000000000000..ecea57cf1ba62368133e0ad1de69d8d313004ede
--- /dev/null
+++ b/src/files-ui/components/file-mosaic/components/file-mosaic/FileMosaic.scss
@@ -0,0 +1,253 @@
+@import url(https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,900);
+
+.files-ui-file-mosaic-main-container {
+ //min width
+ width: 132px;
+
+ box-sizing: border-box;
+ font-family: "Poppins", sans-serif;
+ font-size: 15px;
+ font-weight: 400;
+ word-break: break-word;
+
+ .files-ui-file-mosaic-icon-layer-container {
+ width: 132px;
+ height: 132px;
+ border-radius: 8px;
+ box-sizing: border-box;
+ overflow: hidden;
+
+ .files-ui-file-mosaic-image-layer {
+ position: absolute;
+ left: 0;
+ right: 0;
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ img {
+ //filter: blur(0);
+ //width: 100%;
+ //height: 100%;
+ background-repeat: no-repeat;
+ background-size: cover;
+ background-position: center;
+ }
+ &.blur {
+ img {
+ filter: blur(4px);
+ width: 200%;
+ height: 200%;
+ }
+ }
+ }
+
+ .files-ui-file-mosaic-main-layer {
+ position: absolute;
+ left: 0;
+ right: 0;
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ flex-direction: column;
+
+ .file-mosaic-main-layer-header {
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+ }
+ .file-mosaic-main-layer-footer {
+ width: 100%;
+ display: flex;
+ align-items: flex-end;
+ justify-content: space-between;
+ flex-direction: row;
+ .file-mosaic-footer-right {
+ display: flex;
+ align-items: center;
+ flex-direction: row;
+ flex-grow: 1;
+ align-items: flex-end;
+ justify-content: flex-end;
+ }
+ .file-mosaic-footer-left {
+ display: flex;
+ align-items: center;
+ flex-direction: column;
+ flex-grow: 1;
+ align-items: flex-start;
+
+ justify-content: center;
+ }
+ }
+ }
+
+ .files-ui-file-mosaic-info-layer {
+ position: absolute;
+ left: 0;
+ right: 0;
+ text-align: left;
+
+ scrollbar-width: thin;
+ line-height: 1.5;
+ letter-spacing: 0.02857em;
+ font-family: "Poppins", sans-serif;
+ width: inherit;
+ background-color: rgba(0, 0, 0, 0.85);
+ word-break: break-word;
+ height: 100%;
+ width: 100%;
+ font-size: 0.8rem;
+ transition: all 0.5s ease 0s;
+ overflow: auto;
+ color: white;
+ .files-ui-file-mosaic-info-layer-header {
+ display: flex;
+ width: 100%;
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-between;
+ }
+ .heading {
+ font-weight: 600;
+ padding: 0 5px;
+ }
+ .label {
+ padding: 0 5px;
+ font-weight: 399;
+ }
+ }
+
+ ///
+ &::-webkit-scrollbar {
+ width: 9px;
+ }
+
+ &::-webkit-scrollbar-track {
+ background: transparent;
+ }
+
+ &::-webkit-scrollbar-thumb {
+ background-color: #646c7fa9;
+ border-radius: 20px;
+ border: transparent;
+ }
+ }
+
+ .files-ui-file-mosaic-file-name {
+ margin-top: 1px;
+ height: 31px;
+ text-align: center;
+ width: 100%;
+ color: black;
+ font-size: 0.95em;
+ box-sizing: border-box;
+ line-height: 15px;
+ font-weight: 400;
+ letter-spacing: 0.07rem;
+ word-break: break-all;
+ //3 dots break in 2 lines
+ overflow: hidden;
+ text-overflow: ellipsis;
+ display: -webkit-box;
+ -webkit-line-clamp: 2; /* number of lines to show */
+ line-clamp: 2;
+ -webkit-box-orient: vertical;
+ &.dark-mode {
+ color: rgba(255, 255, 255, 0.7);
+ }
+ }
+
+/* &.files-ui-tooltip {
+ cursor: default;
+ position: relative;
+ display: inline-block;
+ box-sizing: border-box;
+ // border-bottom: 1px dotted black;
+ &:hover {
+ z-index: 2;
+
+ .files-ui-tooltip-tooltiptext {
+ visibility: visible;
+ opacity: 1;
+ z-index: 2;
+ }
+ }
+
+ .files-ui-tooltip-tooltiptext {
+ box-sizing: border-box;
+ font-family: "Poppins", sans-serif;
+ font-size: 0.8rem;
+ visibility: hidden;
+ width: 132px;
+ // background-color: green;
+ color: #fff;
+ text-align: center;
+ border-radius: 6px;
+ padding: 2px 2px;
+ position: absolute;
+ //z-index: 2;
+ //top: 190px;
+ top: 180px;
+ left: 66px;
+ margin-left: -60px;
+
+ // Fade in tooltip - takes 1 second to go from 0% to 100% opac:
+ opacity: 0;
+ transition: opacity 1s;
+
+ &.not-valid-error {
+ background: linear-gradient(to top, #c62828, #d32f2f);
+
+ &::after {
+ border-color: transparent transparent #d32f2f transparent;
+ }
+ }
+
+ &.success {
+ //background-color: green;
+ background: linear-gradient(to top, #1b5e20, #2e7d32);
+
+ &::after {
+ border-color: transparent transparent #2e7d32 transparent;
+ }
+ }
+
+ &::after {
+ content: "";
+ position: absolute;
+ bottom: 100%;
+ left: 50%;
+ margin-left: -5px;
+ border-width: 5px;
+ border-style: solid;
+ //border-color: transparent transparent green transparent;
+ }
+ }
+ } */
+}
+
+//// ICONS
+.files-ui-file-icon {
+ font-size: 0.7rem;
+ min-width: 19px;
+ min-height: 19px;
+ margin: 0;
+ padding: 2px 2px;
+ border-radius: 50%;
+ background-color: rgba(32, 33, 36, 0.65);
+ word-break: break-word;
+ &:hover {
+ background-color: rgba(32, 33, 36, 0.85);
+ }
+ &.dark-mode {
+ background-color: rgba(154, 160, 166, 0.65);
+ &:hover {
+ background-color: rgba(154, 160, 166, 0.85);
+ }
+ }
+}
diff --git a/src/files-ui/components/file-mosaic/components/file-mosaic/FileMosaic.tsx b/src/files-ui/components/file-mosaic/components/file-mosaic/FileMosaic.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..e56721000b31b7e9454d2efcaac3391d31155e25
--- /dev/null
+++ b/src/files-ui/components/file-mosaic/components/file-mosaic/FileMosaic.tsx
@@ -0,0 +1,312 @@
+import * as React from "react";
+import { addClassName, fileSizeFormater } from "../../../../core";
+import { FileMosaicProps } from "./FileMosaicProps";
+import "./FileMosaic.scss";
+import LayerContainer from "../file-mosaic-layer/LayerContainer";
+import Layer from "../file-mosaic-layer/Layer";
+import { getLocalFileItemData } from "../../../file-item/utils/getLocalFileItemData";
+import FileMosaicName from "../FileMosaicName/FileMosaicName";
+import FileMosaicUploadLayer from "../FileMosaicUploadLayer/FileMosaicUploadLayer";
+import useFileMosaicInitializer from "../../hooks/useFileMosaicInitializer";
+import FileMosaicImageLayer from "../FIleMosaicImageLayer/FileMosaicImageLayer";
+import getProgress from "../../hooks/getProgress";
+import { useIsUploading } from "../../hooks/useIsUploading";
+import { Tooltip } from "../../../tooltip";
+import FileMosaicMainLayer from "../FileMosaicMainLayer.tsx/FileMosaicMainLayer";
+import FileMosaicInfoLayer from "../FileMosaicInfoLayer/FileMosaicInfoLayer";
+import useProgress from "../../hooks/useProgress";
+
+const FileMosaic: React.FC<FileMosaicProps> = (props: FileMosaicProps) => {
+ const {
+ style,
+ className,
+
+ file,
+ name: propName,
+ size: propSize,
+ type: propType,
+
+ id,
+ valid,
+ errors,
+ uploadStatus,
+ uploadMessage,
+ progress,
+
+ xhr,
+
+ localization,
+ preview,
+ imageUrl,
+ info,
+ backgroundBlurImage = true,
+ darkMode,
+
+ alwaysActive,
+
+ resultOnTooltip,
+
+ downloadUrl,
+
+ onDelete,
+ onCancel,
+ onAbort,
+
+ onDownload,
+ onSee,
+ onWatch,
+
+ onDoubleClick,
+ onClick,
+ onRightClick,
+ } = props;
+
+ console.log("FileMosaic progress "+ id, progress);
+ //ref for anchor download element
+ const downloadRef = React.useRef<HTMLAnchorElement>(null);
+
+ const finalClassName: string = addClassName(
+ "files-ui-file-mosaic-main-container files-ui-tooltip",
+ className
+ );
+
+ const fileMosaicFileNameClassName: string = darkMode
+ ? "files-ui-file-mosaic-file-name dark-mode"
+ : "files-ui-file-mosaic-file-name";
+
+ // local properties from file
+ const [localName, localType, localSize]: [
+ string,
+ string | undefined,
+ number | undefined
+ ] = getLocalFileItemData(file, propName, propType, propSize);
+
+ // handle progress
+ /* const localProgress: number | undefined = React.useMemo(
+ () => getProgress(progress, xhr),
+ [progress, xhr]
+ ); */
+ const localProgress: number | undefined = useProgress(progress, xhr);
+
+ console.log("FileMosaic progress localProgress "+ localProgress);
+
+ //Initialize File Item
+ const [isReady, isImage, isVideo, url, imageSource]: [
+ boolean,
+ boolean,
+ boolean,
+ string,
+ string | undefined
+ ] = useFileMosaicInitializer(
+ file,
+ propName,
+ propType,
+ valid,
+ preview as boolean,
+ imageUrl
+ );
+
+ //The size formatted and rounded in 2 decimals
+ const sizeFormatted: string = localSize
+ ? fileSizeFormater(localSize)
+ : "0 KB";
+
+ //alwaysActive
+ const [showInfo, setShowInfo] = React.useState<boolean>(false);
+
+ /********* ALWAYS ACTIVE LOGIC ***************/
+ //state for actionOnHover
+ const [hovering, setHovering] = React.useState<boolean>(false);
+ const handleOnHoverEnter: React.MouseEventHandler<HTMLDivElement> = () => {
+ if (alwaysActive) return;
+ setHovering(true);
+ };
+ const handleOnHoverLeave: React.MouseEventHandler<HTMLDivElement> = () => {
+ if (alwaysActive) return;
+ setHovering(false);
+ };
+
+ /***************** HANDLERS **********/
+ //delete file item
+ const handleDelete = (): void => onDelete?.(id);
+
+ //open info layer
+ const handleOpenInfo = (): void => setShowInfo(true);
+
+ //close info layer
+ const handleCloseInfo = (): void => setShowInfo(false);
+
+ const isUploading: boolean = useIsUploading(uploadStatus);
+
+ React.useEffect(() => {
+ //console.log("Change isUploading", isUploading);
+ if (isUploading && showInfo) {
+ handleCloseInfo();
+ }
+ // eslint-disable-next-line
+ }, [isUploading]);
+
+ /*************** CLICK ***************/
+ /**
+ * TO-DO: Add functionallity on click event
+ * @param e event object
+ */
+ function handleClick<T extends HTMLDivElement>(
+ e: React.MouseEvent<T, MouseEvent>
+ ): void {
+ //avoid children to trigger onClick ripple from parent
+ e.stopPropagation();
+ onClick?.(e);
+ }
+ const handleDoubleClick: React.MouseEventHandler<HTMLDivElement> = (
+ evt: React.MouseEvent
+ ): void => {
+ alert("double click on file");
+ evt.preventDefault();
+
+ onDoubleClick?.(evt);
+ };
+ function handleRightClick(evt: React.MouseEvent) {
+ // alert("right click!!!!");
+ //get coordinates
+ //zindex
+ //create menu component
+ // evt.preventDefault();
+ onRightClick?.(evt);
+ }
+ // DOWNLOAD FILE
+ /**
+ * onDownload, form 1
+ * Trigger dowload directly performing a click on anchor element
+ */
+ const innerDownload = () => {
+ const anchorElement = downloadRef.current;
+ if (anchorElement) {
+ anchorElement.click();
+ }
+ };
+ /**
+ * onDownlad, form 2
+ * Handle the download triggering an outside event
+ */
+ const handleDownload = () => {
+ if (onDownload) {
+ onDownload?.(id, downloadUrl);
+ } else if (typeof downloadUrl == "string") {
+ innerDownload();
+ }
+ };
+
+ if (isReady)
+ return (
+ <div
+ className={finalClassName}
+ style={style}
+ onClick={handleClick}
+ onMouseEnter={handleOnHoverEnter}
+ onMouseLeave={handleOnHoverLeave}
+ onDoubleClick={handleDoubleClick}
+ onContextMenu={handleRightClick}
+ >
+ <LayerContainer
+ className="files-ui-file-mosaic-icon-layer-container"
+ style={style}
+ >
+ {/** IMAGE LAYER BLUR */}
+ <Layer
+ className="files-ui-file-mosaic-image-layer blur"
+ visible={backgroundBlurImage}
+ >
+ <FileMosaicImageLayer
+ imageSource={imageSource}
+ url={url}
+ fileName={localName}
+ isBlur={true}
+ />
+ </Layer>
+
+ {/** IMAGE LAYER NO BLUR */}
+ <Layer className="files-ui-file-mosaic-image-layer" visible={true}>
+ <FileMosaicImageLayer
+ imageSource={imageSource}
+ url={url}
+ fileName={localName}
+ isBlur={false}
+ />
+ </Layer>
+
+ {/** MAIN LAYER ICONS & VALID & UPLOAD */}
+ <Layer
+ className="files-ui-file-mosaic-main-layer"
+ visible={!isUploading && !showInfo}
+ >
+ <FileMosaicMainLayer
+ deleteIcon={onDelete !== undefined}
+ onDelete={handleDelete}
+ darkMode={darkMode}
+ valid={valid}
+ uploadStatus={uploadStatus}
+ localization={localization}
+ sizeFormatted={sizeFormatted}
+ imageIcon={isImage && onSee !== undefined}
+ onSee={() => onSee?.(imageSource)}
+ videoIcon={isVideo && onWatch !== undefined}
+ onWatch={() => onWatch?.(file)}
+ downloadIcon={
+ onDownload !== undefined || downloadUrl !== undefined
+ }
+ onDownload={handleDownload}
+ infoIcon={info !== undefined}
+ onOpenInfo={handleOpenInfo}
+ isActive={alwaysActive || hovering}
+ />
+ </Layer>
+
+ {/** INFO LAYER */}
+ <Layer className="files-ui-file-mosaic-info-layer" visible={showInfo}>
+ <FileMosaicInfoLayer
+ onCloseInfo={handleCloseInfo}
+ valid={valid}
+ localization={localization}
+ localName={localName}
+ sizeFormatted={sizeFormatted}
+ localType={localType}
+ />
+ </Layer>
+
+ {/** UPLOAD LAYER */}
+ <Layer
+ className="files-ui-file-mosaic-upload-layer"
+ visible={isUploading}
+ >
+ <FileMosaicUploadLayer
+ uploadStatus={uploadStatus}
+ progress={localProgress}
+ onCancel={onCancel}
+ onAbort={onAbort}
+ localization={localization}
+ />
+ </Layer>
+ </LayerContainer>
+
+ <div className={fileMosaicFileNameClassName}>
+ <FileMosaicName fileName={localName} />
+ </div>
+
+ <Tooltip
+ open={resultOnTooltip}
+ uploadStatus={uploadStatus}
+ valid={valid}
+ errors={errors}
+ uploadMessage={uploadMessage}
+ />
+ {downloadUrl && (
+ <a ref={downloadRef} href={downloadUrl} download={localName} hidden>
+ download_file
+ </a>
+ )}
+ </div>
+ );
+ return <></>;
+};
+export default FileMosaic;
diff --git a/src/files-ui/components/file-mosaic/components/file-mosaic/FileMosaicProps.ts b/src/files-ui/components/file-mosaic/components/file-mosaic/FileMosaicProps.ts
new file mode 100644
index 0000000000000000000000000000000000000000..cfe3fdc0ede2a9e9867e6c14794e3f1e66ee322f
--- /dev/null
+++ b/src/files-ui/components/file-mosaic/components/file-mosaic/FileMosaicProps.ts
@@ -0,0 +1,146 @@
+import { Localization, UPLOADSTATUS } from "../../../../core";
+import { OverridableComponentProps } from "../../../overridable";
+
+export interface FileMosaicPropsMap extends OverridableComponentProps {
+ /**
+ * The identifier for the file
+ */
+ id?: string | number;
+ /**
+ * The file object obtained from client drop or selection
+ */
+ file?: File;
+ /**
+ * The name of the file
+ */
+ name?: string;
+ /**
+ * The file mime type
+ */
+ type?: string;
+ /**
+ * the size of the file in bytes
+ */
+ size?: number;
+ /**
+ * whether to show a valid or rejected message ("ok", "rejected")
+ * by def. valid is false (if not present, it's false too)
+ * This value wil affect preview behaviour,
+ * If not valid, the preview will not be shown, nor the view button
+ */
+ valid?: boolean | null;
+ /**
+ * The list of errors according to the validation criteria or custom validation function given.
+ */
+ errors?: string[];
+ /**
+ * The message from server
+ */
+ uploadMessage?: string;
+ /**
+ * The current upload status of the file
+ */
+ uploadStatus?: UPLOADSTATUS;
+ /**
+ * if true, and if the file is an image,
+ * makes visible the "view" button that will get the image url
+ * Also, it will be visible only when file is valid
+ */
+ preview?: boolean;
+ /**
+ * whether to show the info layer or not
+ * also whether to make visible the info button or not ,
+ * Only works when given a image file
+ */
+ info?: boolean;
+ /**
+ * A string representation or web url of the image
+ * that will be set to the "src" prop of an <img/> tag
+ * <img src={`${url}`} />
+ */
+ imageUrl?: string;
+ /**
+ * If true, a background blur image will be shown
+ */
+ backgroundBlurImage?: boolean;
+ /**
+ * If true, dark mode colors are used in the component.
+ */
+ darkMode?: boolean;
+ /**
+ * language to be used
+ * for now
+ * only English and Spanish is supported
+ */
+ localization?: Localization;
+ /**
+ * The current percentage of upload progress.
+ * This value will have a higher priority over the upload progress value calculated inside the component.
+ * @default undefined
+ */
+ progress?: number;
+ /**
+ * A reference to the XHR object that allows the upload and abort event.
+ * and progress
+ */
+ xhr?: XMLHttpRequest;
+ /**
+ * A function that return a file object when "see" button is pressed or clicked
+ */
+ onSee?: (imageSource: string | undefined) => void;
+ /**
+ * A function that return a file object when "play" button is presssed or clicked
+ */
+ onWatch?: (videoSource: File | undefined) => void;
+ /**
+ * Event that is triggered when `delete` button is clicked or pressed.
+ * If present, `delete` button will be visible.
+ */
+ onDelete?: (fileId: number | string | undefined) => void;
+ /**
+ * Event that is triggered when `abort` button is clicked or pressed during `uploading` event
+ * If present, `abort` button in `uploading` phase will be visible.
+ */
+ onAbort?: (fileId: number | string | undefined) => void;
+ /**
+ * Event that is triggered when `cancel` button is clicked or pressed during `preparing` event
+ * If present, `cancel` button in `preparing` phase will be visible.
+ */
+ onCancel?: (fileId: number | string | undefined) => void;
+ /**
+ * Event that is triggered when `download` button is clicked or pressed.
+ * If present, `download` button will be visible.
+ */
+ onDownload?: (fileId: number | string | undefined, downloadUrl?: string) => void;
+ /**
+ * Event that is triggered when user clicks the component
+ */
+ onClick?: (evt: React.MouseEvent) => void;
+ /**
+ * Event that is triggered when user double clicks the component
+ */
+ onDoubleClick?: (evt: React.MouseEvent) => void;
+ /**
+ * Event that is triggered when user right clicks the component
+ */
+ onRightClick?: (evt: React.MouseEvent) => void;
+
+ /**
+ * Flag that determines whether actions are visible always, or only on hover event
+ */
+ alwaysActive?: boolean;
+ /**
+ * Where to display result of validation: on InfoLayer or in Tooltip when user hovers the FileItem
+ */
+ resultOnTooltip?: boolean;
+ /**
+ * Url to perform a GET request in order to download the file.
+ * This action is triggered when download button is clicked or pressed.
+ * In case onDownload prop is given
+ */
+ downloadUrl?: string;
+}
+
+export type FileMosaicProps = {
+ [F in keyof FileMosaicPropsMap]: FileMosaicPropsMap[F]
+}
diff --git a/src/files-ui/components/file-mosaic/hooks/getProgress.ts b/src/files-ui/components/file-mosaic/hooks/getProgress.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ca505f1d3551d01ef7135771267c1f5d7ce2ccb9
--- /dev/null
+++ b/src/files-ui/components/file-mosaic/hooks/getProgress.ts
@@ -0,0 +1,24 @@
+const getProgress = (
+ progress: number | undefined,
+ xhr?: XMLHttpRequest,) => {
+
+ console.log("getProgress", progress, xhr);
+ if (progress !== undefined) {
+ return progress;
+ } else {
+ if (xhr !== undefined && xhr !== null && xhr.upload.onprogress === null) {
+ // xhr was given but it was not initialized the `onprogress` event
+ xhr.upload.onprogress = (event: ProgressEvent<EventTarget>) => {
+ console.log("getProgress progress", progress, (event.loaded / event.total) * 100);
+
+
+ return (event.loaded / event.total) * 100;
+
+ };
+ //initial progress value set to 0
+ return 0;
+ }
+ //return undefined;
+ }
+}
+export default getProgress;
\ No newline at end of file
diff --git a/src/files-ui/components/file-mosaic/hooks/useFileMosaicInitializer.ts b/src/files-ui/components/file-mosaic/hooks/useFileMosaicInitializer.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e28ec9028fcc6c72c85816cbd04a642fbe72d142
--- /dev/null
+++ b/src/files-ui/components/file-mosaic/hooks/useFileMosaicInitializer.ts
@@ -0,0 +1,137 @@
+import * as React from "react";
+import { getURLFileIco, readAsDataURL } from "../../../core";
+import { getURLFileIcoFromNameAndType } from "../../../core/mime/mime";
+
+/**
+ * Initializer hook for FileItemNeo
+ * @param file The file Object
+ * @param valid Whether the file is valid, not valid or not set
+ * @param preview Whether to show a preview on FileItem
+ * @param imageUrl The image url
+ * @param xhr the xhr object
+ * @param progress the current progress given by props
+ * @returns an array thta contains the following properties [isImage, isVideo, url, imageSource, localProgress]
+ */
+const useFileMosaicInitializer = (
+ file: File | undefined,
+ name: string | undefined,
+ type: string | undefined,
+ valid: boolean | undefined | null,
+ preview: boolean,
+ imageUrl: string | undefined,
+ xhr?: XMLHttpRequest,
+
+): [boolean,boolean, boolean, string, string | undefined] => {
+
+ const [isImage, setIsImage] = React.useState<boolean>(false);
+ const [isVideo, setIsVideo] = React.useState<boolean>(false);
+ const [url, setUrl] = React.useState<string>("");
+ const [imageSource, setImageSource] = React.useState<string | undefined>(undefined);
+ const [isReady,setIsReady]=React.useState(false);
+
+
+ const init = async (
+ file: File | undefined,
+ name: string | undefined,
+ type: string | undefined,
+ valid: boolean | undefined | null,
+ preview: boolean,
+ imageUrl: string | undefined,
+ xhr?: XMLHttpRequest,
+ progress?: number
+ ) => {
+ //////////////////////////////
+ //console.log("init", file, name, type);
+
+ if (!file && (!name && !type)) return;
+
+ const { url } = file ? getURLFileIco(file) :
+ getURLFileIcoFromNameAndType(name, type);
+
+ //console.log("init", url);
+
+ setUrl(url);
+
+ if (imageUrl) {
+ setIsImage(true);
+ setImageSource(imageUrl);
+ setIsReady(true);
+ return;
+ } else {
+ const [headerMime, tailMime] = getHeaderAndTail(file, type);
+
+ setIsImage(headerMime === "image");
+ setIsVideo(
+ headerMime === "video" && ["mp4", "ogg", "webm"].includes(tailMime)
+ );
+ if (
+ preview &&
+ (valid || typeof valid === "undefined" || valid === null) &&
+ headerMime === "image"
+ ) {
+ //lets check for image preview from File
+ let response: string | undefined = undefined;
+ if (file) {
+ response = await readAsDataURL(file);
+ if (response) {
+ setImageSource(response as string);
+ }
+ }
+ //console.log("response image", response);
+
+ }
+ }
+ setIsReady(true);
+ /////////////// UPLOAD OBJECT ///////////////
+
+ //if (!localProgress) {
+ //handleProgress(1);
+ //}
+ };
+
+
+
+ ////// CLEAN UP
+ React.useEffect(() => {
+ init(file, name, type, valid, preview || false, imageUrl);
+ return () => {
+ setImageSource(undefined);
+ setIsImage(false);
+ setIsVideo(false);
+ setIsReady(false);
+ };
+ // eslint-disable-next-line
+ }, [file, name, type, valid, preview, imageUrl,]);
+ return [isReady,isImage, isVideo, url, imageSource];
+}
+export default useFileMosaicInitializer;
+
+/* export const identifyFileSource = (file: File | undefined, name: string, fileType: string) => {
+ if(!file){
+
+ }
+} */
+
+const getHeaderAndTail = (
+ file: File | undefined,
+ type: string | undefined,
+): [string, string] => {
+
+ if (file) {
+ if (file.type) {
+ const splittedType: string[] = file.type.split("/");
+ return [splittedType[0], splittedType[1]];
+ } else {
+ return ["octet", "octet"];
+ }
+ } else {
+ const splittedType: string[] | undefined = type?.split("/");
+ if (splittedType && splittedType.length > 1) {
+ return [splittedType[0], splittedType[1]];
+ } else {
+ return ["octet", "octet"];
+ }
+ }
+
+
+}
\ No newline at end of file
diff --git a/src/files-ui/components/file-mosaic/hooks/useIsUploading.ts b/src/files-ui/components/file-mosaic/hooks/useIsUploading.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ac3d956ff7faeaf9675192770645f5fdeeabc356
--- /dev/null
+++ b/src/files-ui/components/file-mosaic/hooks/useIsUploading.ts
@@ -0,0 +1,32 @@
+import { UPLOADSTATUS } from "../../../core";
+import * as React from "react";
+export const useIsUploading = (uploadStatus: UPLOADSTATUS | undefined): boolean => {
+
+ const [isUploading, setIsUploading] = React.useState<boolean>(false);
+
+ const [lastUploadStatus, setLastUploadStatus] = React.useState<
+ UPLOADSTATUS | undefined
+ >(uploadStatus);
+
+
+ React.useEffect(() => {
+ setLastUploadStatus(uploadStatus);
+ if (
+ ["uploading", "preparing"].includes(lastUploadStatus || "") &&
+ ["success", "error", "aborted"].includes(uploadStatus || "")
+ ) {
+ setTimeout(() => {
+ setIsUploading(false);
+ }, 3500);
+ return;
+ } else {
+ //base comparison
+ setIsUploading(
+ uploadStatus === "preparing" || uploadStatus === "uploading"
+ );
+ }
+ }, [uploadStatus]);
+
+
+ return isUploading;
+}
\ No newline at end of file
diff --git a/src/files-ui/components/file-mosaic/hooks/useProgress.ts b/src/files-ui/components/file-mosaic/hooks/useProgress.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ae854a89d75d0e89996f6a9f5452c03f7b00d077
--- /dev/null
+++ b/src/files-ui/components/file-mosaic/hooks/useProgress.ts
@@ -0,0 +1,37 @@
+import * as React from "react";
+
+/**
+ * @param progress the progress given as a prop to the component
+ * @param xhr the XMLHttpRequest object for AJAX operations
+ * @returns the progress to be shown in the component
+ */
+const useProgress = (
+ progress: number | undefined,
+ xhr?: XMLHttpRequest,
+
+): number | undefined => {
+ console.log("getProgress", progress, xhr);
+
+ const [localProgress, setLocalProgress] = React.useState<number | undefined>(undefined);
+
+ if (progress !== undefined) {
+ setLocalProgress(progress);
+ } else {
+ if (xhr !== undefined && xhr !== null && xhr.upload.onprogress === null) {
+ // xhr was given but it was not initialized the `onprogress` event
+ xhr.upload.onprogress = (event: ProgressEvent<EventTarget>) => {
+ console.log("getProgress progress", progress, (event.loaded / event.total) * 100);
+
+
+ setLocalProgress((event.loaded / event.total) * 100);
+
+ };
+ //initial progress value set to 0
+ setLocalProgress(0);
+ }
+ //return undefined;
+ }
+
+ return localProgress;
+}
+export default useProgress;
\ No newline at end of file
diff --git a/src/files-ui/components/file-mosaic/index.ts b/src/files-ui/components/file-mosaic/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d0cb45371f8f3ef0aa92ea17b5c2854069ac3b07
--- /dev/null
+++ b/src/files-ui/components/file-mosaic/index.ts
@@ -0,0 +1,6 @@
+
+export { default as FileMosaic } from "./components/file-mosaic/FileMosaic";
+export * from "./components/file-mosaic/FileMosaic";
+
+
+export type { FileMosaicProps } from "./components/file-mosaic/FileMosaicProps";
diff --git a/src/files-ui/components/icons/Cancel/Cancel.tsx b/src/files-ui/components/icons/Cancel/Cancel.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..8c3ea45a140be99810f8887c08d7b34725b87f22
--- /dev/null
+++ b/src/files-ui/components/icons/Cancel/Cancel.tsx
@@ -0,0 +1,30 @@
+import React, { FC } from "react";
+import { parseSize } from "../utils/utils";
+import { CancelProps } from "./CancelProps";
+
+const Cancel: FC<CancelProps> = (props: CancelProps) => {
+ const { size, color, colorFill, onClick, style, className } = props;
+ const finalSize = parseSize(size);
+ const finalStyle = style ? style : {};
+ return (
+ <svg
+ style={onClick ? { ...{ cursor: "pointer", ...finalStyle } } : finalStyle}
+ onClick={(e) => onClick?.(e)}
+ xmlns="http://www.w3.org/2000/svg"
+ height={`${finalSize}px`}
+ viewBox="0 0 24 24"
+ width={`${finalSize}px`}
+ fill={color ? color : "#000000"}
+ className={className || ""}
+ >
+ <path d="M0 0h24v24H0V0z" fill="none" opacity=".87" />
+ <path
+ d="M12 4c-4.41 0-8 3.59-8 8s3.59 8 8 8 8-3.59 8-8-3.59-8-8-8zm5 11.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"
+ fill={colorFill ? colorFill : "none"}
+ opacity=".5"
+ />
+ <path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm3.59-13L12 10.59 8.41 7 7 8.41 10.59 12 7 15.59 8.41 17 12 13.41 15.59 17 17 15.59 13.41 12 17 8.41z" />
+ </svg>
+ );
+};
+export default Cancel;
diff --git a/src/files-ui/components/icons/Cancel/CancelProps.ts b/src/files-ui/components/icons/Cancel/CancelProps.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f9c2f846850fe97c1dba4dd906893482f8c0f9b9
--- /dev/null
+++ b/src/files-ui/components/icons/Cancel/CancelProps.ts
@@ -0,0 +1,3 @@
+import { IconProps } from "../IconProps/IconProps";
+
+export interface CancelProps extends IconProps{}
\ No newline at end of file
diff --git a/src/files-ui/components/icons/CheckCircle/CheckCircle.tsx b/src/files-ui/components/icons/CheckCircle/CheckCircle.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..a540aa0b3b5a809e0d477e281688cb9d2fac3465
--- /dev/null
+++ b/src/files-ui/components/icons/CheckCircle/CheckCircle.tsx
@@ -0,0 +1,26 @@
+import React, { FC } from "react";
+import { CheckCircleProps } from "./CheckCircleProps";
+import { parseSize } from "../utils/utils";
+
+const CheckCircle: FC<CheckCircleProps> = (props: CheckCircleProps) => {
+ const { size, color, colorFill, onClick, style, className } = props;
+ const finalSize = parseSize(size);
+ const finalStyle = style ? style : {};
+
+ return (
+ <svg
+ className={className || ""}
+ style={onClick ? { ...{ cursor: "pointer", ...finalStyle } } : finalStyle}
+ onClick={() => onClick?.()}
+ xmlns="http://www.w3.org/2000/svg"
+ height={`${finalSize}px`}
+ viewBox="0 0 24 24"
+ width={`${finalSize}px`}
+ fill={color ? color : "#000000"}
+ >
+ <path d="M0 0h24v24H0z" fill={colorFill ? colorFill : "none"} />
+ <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" />
+ </svg>
+ );
+};
+export default CheckCircle;
diff --git a/src/files-ui/components/icons/CheckCircle/CheckCircleProps.ts b/src/files-ui/components/icons/CheckCircle/CheckCircleProps.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5b559a4da250b77365cc0f233f7a72ed003ecfd0
--- /dev/null
+++ b/src/files-ui/components/icons/CheckCircle/CheckCircleProps.ts
@@ -0,0 +1,4 @@
+import { IconProps } from "../IconProps/IconProps";
+
+export interface CheckCircleProps extends IconProps{
+}
\ No newline at end of file
diff --git a/src/files-ui/components/icons/Clean/Clean.tsx b/src/files-ui/components/icons/Clean/Clean.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..b9bb3b6b5af6f645ed27e85c66c057dd510ea431
--- /dev/null
+++ b/src/files-ui/components/icons/Clean/Clean.tsx
@@ -0,0 +1,43 @@
+import React, { FC } from "react";
+import { parseSize } from "../utils/utils";
+import { CleanProps } from "./CleanProps";
+
+const Clean: FC<CleanProps> = (props: CleanProps) => {
+ const {
+ size,
+ color,
+ //colorFill,
+ onClick,
+ style,
+ className,
+ } = props;
+ const finalSize = parseSize(size);
+ const finalStyle = style ? style : {};
+ return (
+ <svg
+ className={className || ""}
+ style={onClick ? { ...{ cursor: "pointer", ...finalStyle } } : finalStyle}
+ onClick={() => onClick?.()}
+ xmlns="http://www.w3.org/2000/svg"
+ enableBackground="new 0 0 24 24"
+ height={finalSize ? `${finalSize}px` : "24px"}
+ viewBox="0 0 24 24"
+ width={finalSize ? `${finalSize}px` : "24px"}
+ fill={color ? color : "#000000"}
+ >
+ <g>
+ <rect
+ fill="none"
+ height={finalSize || "24"}
+ width={finalSize || "24"}
+ />
+ </g>
+ <g>
+ <g>
+ <path d="M16,11h-1V3c0-1.1-0.9-2-2-2h-2C9.9,1,9,1.9,9,3v8H8c-2.76,0-5,2.24-5,5v7h18v-7C21,13.24,18.76,11,16,11z M11,3h2v8h-2V3 z M19,21h-2v-3c0-0.55-0.45-1-1-1s-1,0.45-1,1v3h-2v-3c0-0.55-0.45-1-1-1s-1,0.45-1,1v3H9v-3c0-0.55-0.45-1-1-1s-1,0.45-1,1v3H5 v-5c0-1.65,1.35-3,3-3h8c1.65,0,3,1.35,3,3V21z" />
+ </g>
+ </g>
+ </svg>
+ );
+};
+export default Clean;
diff --git a/src/files-ui/components/icons/Clean/CleanProps.ts b/src/files-ui/components/icons/Clean/CleanProps.ts
new file mode 100644
index 0000000000000000000000000000000000000000..2a6b42accb924afbd65f0392438be22e20335fc7
--- /dev/null
+++ b/src/files-ui/components/icons/Clean/CleanProps.ts
@@ -0,0 +1,5 @@
+import { IconProps } from "../IconProps/IconProps";
+
+export interface CleanProps extends IconProps{
+
+}
\ No newline at end of file
diff --git a/src/files-ui/components/icons/Clear/Clear.tsx b/src/files-ui/components/icons/Clear/Clear.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..2ad7d87fb47f9d03b45a9e60a030f1182677f9e1
--- /dev/null
+++ b/src/files-ui/components/icons/Clear/Clear.tsx
@@ -0,0 +1,25 @@
+import * as React from "react";
+import { parseSize } from "../utils/utils";
+import { ClearProps } from "./ClearProps";
+
+const Clear: React.FC<ClearProps> = (props: ClearProps) => {
+ const { size, color, colorFill, onClick, style, className } = props;
+ const finalSize = parseSize(size);
+ const finalStyle = style ? style : {};
+ return (
+ <svg
+ className={className || ""}
+ style={onClick ? { cursor: "pointer", ...finalStyle } : finalStyle}
+ xmlns="http://www.w3.org/2000/svg"
+ height={`${finalSize}px`}
+ viewBox="0 0 24 24"
+ width={`${finalSize}px`}
+ fill={color ? color : "#000000"}
+ onClick={(e) => onClick?.(e)}
+ >
+ <path d="M0 0h24v24H0V0z" fill={colorFill || "none"} />
+ <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z" />
+ </svg>
+ );
+};
+export default Clear;
diff --git a/src/files-ui/components/icons/Clear/ClearProps.tsx b/src/files-ui/components/icons/Clear/ClearProps.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..d2e2339f9a9a476d3ca8a0a24b3336f72aa9f1f4
--- /dev/null
+++ b/src/files-ui/components/icons/Clear/ClearProps.tsx
@@ -0,0 +1,3 @@
+import { IconProps } from "../IconProps/IconProps";
+
+export interface ClearProps extends IconProps{}
\ No newline at end of file
diff --git a/src/files-ui/components/icons/Close/Close.tsx b/src/files-ui/components/icons/Close/Close.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..e3f39714773d7b2559a26ae1b22f72bdc332f00f
--- /dev/null
+++ b/src/files-ui/components/icons/Close/Close.tsx
@@ -0,0 +1,37 @@
+import React, { FC } from "react";
+import { parseSize } from "../utils/utils";
+import { CloseProps } from "./CloseProps";
+
+const Close: FC<CloseProps> = (props: CloseProps) => {
+ const {
+ size,
+ color,
+ //colorFill,
+ onClick,
+ style,
+ className,
+ } = props;
+ const finalSize = parseSize(size);
+ const finalStyle = style ? style : {};
+
+ return (
+ <svg
+ className={className || ""}
+ style={onClick ? { ...{ cursor: "pointer", ...finalStyle } } : finalStyle}
+ onClick={() => onClick?.()}
+ xmlns="http://www.w3.org/2000/svg"
+ height={finalSize ? `${finalSize}px` : "24px"}
+ viewBox="0 0 24 24"
+ width={finalSize ? `${finalSize}px` : "24px"}
+ fill={color ? color : "#000000"}
+ >
+ <rect fill="none" height={finalSize || "24"} width={finalSize || "24"} />
+ <path
+ d="M5,5v14h14V5H5z M17,15.59L15.59,17L12,13.41L8.41,17L7,15.59L10.59,12L7,8.41L8.41,7L12,10.59L15.59,7 L17,8.41L13.41,12L17,15.59z"
+ opacity=".3"
+ />
+ <path d="M19,19H5V5h14V19z M3,3v18h18V3H3z M17,15.59L15.59,17L12,13.41L8.41,17L7,15.59L10.59,12L7,8.41L8.41,7L12,10.59L15.59,7 L17,8.41L13.41,12L17,15.59z" />
+ </svg>
+ );
+};
+export default Close;
diff --git a/src/files-ui/components/icons/Close/CloseProps.ts b/src/files-ui/components/icons/Close/CloseProps.ts
new file mode 100644
index 0000000000000000000000000000000000000000..7ce95c4380050f71664d48d06b44b30658e24f5b
--- /dev/null
+++ b/src/files-ui/components/icons/Close/CloseProps.ts
@@ -0,0 +1,3 @@
+import { IconProps } from "../IconProps/IconProps";
+
+export interface CloseProps extends IconProps { }
\ No newline at end of file
diff --git a/src/files-ui/components/icons/CloudDone/CloudDone.tsx b/src/files-ui/components/icons/CloudDone/CloudDone.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..1f79755dfe13d9d26407b430e097ec757c398513
--- /dev/null
+++ b/src/files-ui/components/icons/CloudDone/CloudDone.tsx
@@ -0,0 +1,26 @@
+import * as React from "react";
+import { parseSize } from "../utils/utils";
+import { CloudDoneProps } from "./CloudDoneProps";
+
+const CloudDone: React.FC<CloudDoneProps> = (props: CloudDoneProps) => {
+ const { size, color, colorFill, onClick, style, className } = props;
+ const finalSize = parseSize(size);
+ const finalStyle = style ? style : {};
+ return (
+ <svg
+ className={className || ""}
+ style={onClick ? { cursor: "pointer", ...finalStyle } : finalStyle}
+ enableBackground="new 0 0 24 24"
+ xmlns="http://www.w3.org/2000/svg"
+ height={`${finalSize}px`}
+ viewBox="0 0 24 24"
+ width={`${finalSize}px`}
+ fill={color || "#000000"}
+ onClick={(e) => onClick?.(e)}
+ >
+ <path d="M0 0h24v24H0V0z" fill={colorFill || "none"} />
+ <path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM19 18H6c-2.21 0-4-1.79-4-4 0-2.05 1.53-3.76 3.56-3.97l1.07-.11.5-.95C8.08 7.14 9.94 6 12 6c2.62 0 4.88 1.86 5.39 4.43l.3 1.5 1.53.11c1.56.1 2.78 1.41 2.78 2.96 0 1.65-1.35 3-3 3zm-9-3.82l-2.09-2.09L6.5 13.5 10 17l6.01-6.01-1.41-1.41z" />
+ </svg>
+ );
+};
+export default CloudDone;
diff --git a/src/files-ui/components/icons/CloudDone/CloudDoneProps.ts b/src/files-ui/components/icons/CloudDone/CloudDoneProps.ts
new file mode 100644
index 0000000000000000000000000000000000000000..14f97b8d6a9620c1f2058c5e230d0f3abfe6efa4
--- /dev/null
+++ b/src/files-ui/components/icons/CloudDone/CloudDoneProps.ts
@@ -0,0 +1,2 @@
+import { IconProps } from "../IconProps/IconProps";
+export interface CloudDoneProps extends IconProps { }
\ No newline at end of file
diff --git a/src/files-ui/components/icons/DoDisturb/DoDisturb.tsx b/src/files-ui/components/icons/DoDisturb/DoDisturb.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..3eee3c497c8df2589b965ffcec708115b7a314c0
--- /dev/null
+++ b/src/files-ui/components/icons/DoDisturb/DoDisturb.tsx
@@ -0,0 +1,38 @@
+import React, { FC } from "react";
+import { DoDisturbProps } from "./DoDisturbProps";
+import { parseSize } from "../utils/utils";
+
+const DoDisturb: FC<DoDisturbProps> = (props: DoDisturbProps) => {
+ const {
+ size,
+ color,
+ //colorFill,
+ onClick,
+ style,
+ className,
+ } = props;
+ const finalSize = parseSize(size);
+ const finalStyle = style ? style : {};
+
+ return (
+ <svg
+ className={className || ""}
+ style={onClick ? { ...{ cursor: "pointer", ...finalStyle } } : finalStyle}
+ onClick={() => onClick?.()}
+ xmlns="http://www.w3.org/2000/svg"
+ height={finalSize ? `${finalSize}px` : "24px"}
+ viewBox="0 0 24 24"
+ width={finalSize ? `${finalSize}px` : "24px"}
+ fill={color ? color : "#000000"}
+ >
+ <path d="M0 0h24v24H0V0z" fill="none" />
+ <path
+ d="M12 4c-4.41 0-8 3.59-8 8s3.59 8 8 8 8-3.59 8-8-3.59-8-8-8z"
+ opacity=".4"
+ //fill={colorFill ? colorFill : "none"}
+ />
+ <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8 0-1.85.63-3.55 1.69-4.9L16.9 18.31C15.55 19.37 13.85 20 12 20zm6.31-3.1L7.1 5.69C8.45 4.63 10.15 4 12 4c4.42 0 8 3.58 8 8 0 1.85-.63 3.55-1.69 4.9z" />
+ </svg>
+ );
+};
+export default DoDisturb;
diff --git a/src/files-ui/components/icons/DoDisturb/DoDisturbProps.ts b/src/files-ui/components/icons/DoDisturb/DoDisturbProps.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a55c10e0c496330bbbec60336817e816fd884c8c
--- /dev/null
+++ b/src/files-ui/components/icons/DoDisturb/DoDisturbProps.ts
@@ -0,0 +1,3 @@
+import { IconProps } from "../IconProps/IconProps";
+
+export interface DoDisturbProps extends IconProps { }
\ No newline at end of file
diff --git a/src/files-ui/components/icons/DownloadFile/DownloadFile.tsx b/src/files-ui/components/icons/DownloadFile/DownloadFile.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..99f2a5e997ad56a6d68ec62a0eadfe7beaf43861
--- /dev/null
+++ b/src/files-ui/components/icons/DownloadFile/DownloadFile.tsx
@@ -0,0 +1,32 @@
+import * as React from "react";
+import { parseSize } from "../utils/utils";
+import { DownloadFileProps } from "./DownloadFileProps";
+
+const DownloadFile: React.FC<DownloadFileProps> = (
+ props: DownloadFileProps
+) => {
+ const { size, color, colorFill, onClick, style, className } = props;
+ const finalSize = parseSize(size);
+ const finalStyle = style ? style : {};
+ return (
+ <svg
+ className={className || ""}
+ style={onClick ? { cursor: "pointer", ...finalStyle } : finalStyle}
+ enableBackground="new 0 0 24 24"
+ xmlns="http://www.w3.org/2000/svg"
+ height={`${finalSize}px`}
+ viewBox="0 0 24 24"
+ width={`${finalSize}px`}
+ fill={color || "#000000"}
+ onClick={(e) => onClick?.(e)}
+ >
+ <g>
+ <rect fill={colorFill || "none"} height={finalSize} width={finalSize} />
+ </g>
+ <g>
+ <path d="M18,15v3H6v-3H4v3c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2v-3H18z M17,11l-1.41-1.41L13,12.17V4h-2v8.17L8.41,9.59L7,11l5,5 L17,11z" />
+ </g>
+ </svg>
+ );
+};
+export default DownloadFile;
diff --git a/src/files-ui/components/icons/DownloadFile/DownloadFileProps.ts b/src/files-ui/components/icons/DownloadFile/DownloadFileProps.ts
new file mode 100644
index 0000000000000000000000000000000000000000..4c9f665c687d5f04078c96eac61036c7556b8f1e
--- /dev/null
+++ b/src/files-ui/components/icons/DownloadFile/DownloadFileProps.ts
@@ -0,0 +1,3 @@
+import { IconProps } from "../IconProps/IconProps";
+
+export interface DownloadFileProps extends IconProps{}
\ No newline at end of file
diff --git a/src/files-ui/components/icons/IconProps/IconProps.ts b/src/files-ui/components/icons/IconProps/IconProps.ts
new file mode 100644
index 0000000000000000000000000000000000000000..56bdb6dc878ec9b238d02215486c679bd795ddc0
--- /dev/null
+++ b/src/files-ui/components/icons/IconProps/IconProps.ts
@@ -0,0 +1,26 @@
+import { CSSProperties } from "react";
+
+export interface IconProps {
+ size?: "micro" | "small" | "semi-medium" | "medium" | "large" | number;
+ /**
+ * main color for icon
+ */
+ color?: string;
+ /**
+ * background color for icon
+ */
+ colorFill?: string;
+ /**
+ * Function that is triggered when user click the icon.
+ * If not provided, cursor wil be default
+ */
+ onClick?: Function;
+ /**
+ * style properties for icon
+ */
+ style?: CSSProperties;
+ /**
+ * A classname for stylesheet rules
+ */
+ className?: string;
+}
\ No newline at end of file
diff --git a/src/files-ui/components/icons/Info/Info.tsx b/src/files-ui/components/icons/Info/Info.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..9528d185b6463f72907f7637f2be9b69c5e83dc8
--- /dev/null
+++ b/src/files-ui/components/icons/Info/Info.tsx
@@ -0,0 +1,31 @@
+import React, { FC } from "react";
+import { InfoProps } from "./InfoProps";
+import { parseSize } from "../utils/utils";
+
+const Info: FC<InfoProps> = (props: InfoProps) => {
+ const { size, color, colorFill, onClick, className, style } = props;
+ const finalSize = parseSize(size);
+
+ const finalStyle = style ? style : {};
+ return (
+ <svg
+ className={className || ""}
+ style={onClick ? { cursor: "pointer", ...finalStyle } : finalStyle}
+ xmlns="http://www.w3.org/2000/svg"
+ height={`${finalSize}px`}
+ viewBox="0 0 24 24"
+ width={`${finalSize}px`}
+ fill={color || "#000000"}
+ onClick={() => onClick?.()}
+ >
+ <path d="M0 0h24v24H0V0z" fill={ "none"} />
+ <path
+ d="M12 4c-4.41 0-8 3.59-8 8s3.59 8 8 8 8-3.59 8-8-3.59-8-8-8zm1 13h-2v-6h2v6zm0-8h-2V7h2v2z"
+ fill={colorFill ||"none"}
+ //opacity=".7"
+ />
+ <path d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" />
+ </svg>
+ );
+};
+export default Info;
diff --git a/src/files-ui/components/icons/Info/InfoProps.ts b/src/files-ui/components/icons/Info/InfoProps.ts
new file mode 100644
index 0000000000000000000000000000000000000000..dd2d5dbc2dc939551db250c39594047e64242791
--- /dev/null
+++ b/src/files-ui/components/icons/Info/InfoProps.ts
@@ -0,0 +1,2 @@
+import { IconProps } from "../IconProps/IconProps";
+export interface InfoProps extends IconProps { }
\ No newline at end of file
diff --git a/src/files-ui/components/icons/InfoBlack/InfoBlack.tsx b/src/files-ui/components/icons/InfoBlack/InfoBlack.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..007c28e6435818a04abb030944ede746b79ff938
--- /dev/null
+++ b/src/files-ui/components/icons/InfoBlack/InfoBlack.tsx
@@ -0,0 +1,25 @@
+import * as React from "react";
+import { parseSize } from "../utils/utils";
+import { InfoBlackProps } from "./InfoBlackProps";
+
+const InfoBlack: React.FC<InfoBlackProps> = (props: InfoBlackProps) => {
+ const { size, color, colorFill, onClick, style, className } = props;
+ const finalSize = parseSize(size);
+ const finalStyle = style ? style : {};
+ return (
+ <svg
+ className={className || ""}
+ style={onClick ? { cursor: "pointer", ...finalStyle } : finalStyle}
+ xmlns="http://www.w3.org/2000/svg"
+ height={`${finalSize}px`}
+ viewBox="0 0 24 24"
+ width={`${finalSize}px`}
+ fill={color || "#000000"}
+ onClick={(e) => onClick?.(e)}
+ >
+ <path d="M0 0h24v24H0z" fill={colorFill || "none"} />
+ <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z" />
+ </svg>
+ );
+};
+export default InfoBlack;
diff --git a/src/files-ui/components/icons/InfoBlack/InfoBlackProps.ts b/src/files-ui/components/icons/InfoBlack/InfoBlackProps.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f45bb356344e92273637ef152d8e40d2ec682f7e
--- /dev/null
+++ b/src/files-ui/components/icons/InfoBlack/InfoBlackProps.ts
@@ -0,0 +1,3 @@
+import { IconProps } from "../IconProps/IconProps";
+
+export interface InfoBlackProps extends IconProps{}
\ No newline at end of file
diff --git a/src/files-ui/components/icons/InfoDisney/InfoDisney.tsx b/src/files-ui/components/icons/InfoDisney/InfoDisney.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..299058c421f1f77e0ff02c376aca11634a364b6c
--- /dev/null
+++ b/src/files-ui/components/icons/InfoDisney/InfoDisney.tsx
@@ -0,0 +1,42 @@
+import * as React from "react";
+import { parseSize } from "../utils/utils";
+import { InfoDisneyProps } from "./InfoDisneyProps";
+
+const InfoDisney: React.FC<InfoDisneyProps> = (props: InfoDisneyProps) => {
+ const {
+ size,
+ color,
+ //colorFill,
+ onClick,
+ style,
+ className,
+ } = props;
+ const finalSize: number = parseSize(size)-2;
+ const finalStyle: React.CSSProperties = style ? style : {};
+ return (
+ <svg
+ //alt=""
+ className={className || ""}
+ style={onClick ? { cursor: "pointer", ...finalStyle } : finalStyle}
+ aria-hidden="true"
+ aria-label="info"
+ fill={color || "#000000"}
+ role="img"
+ transform=""
+ version="1.1"
+ viewBox="0 0 36 36"
+ xmlns="http://www.w3.org/2000/svg"
+ height={`${finalSize}px`}
+ width={`${finalSize}px`}
+ onClick={(e) => onClick?.(e)}
+ //style="height: 32px; min-width: 32px; width: 32px; z-index: auto;"
+ //class="sc-htoDjs bUEQUS"
+ >
+ <path
+ d="M22.378 0c2.412 0 3.618 1.642 3.618 3.523 0 2.349-2.095 4.522-4.822 4.522-2.284 0-3.616-1.35-3.553-3.582 0-1.877 1.586-4.462 4.757-4.462zM14.956 36c-1.904 0-3.299-1.174-1.967-6.343l2.185-9.166c0.38-1.465 0.443-2.054 0-2.054-0.571 0-3.040 1.012-4.504 2.011l-0.95-1.584c4.63-3.935 9.956-6.241 12.242-6.241 1.903 0 2.219 2.291 1.269 5.814l-2.504 9.634c-0.443 1.701-0.254 2.288 0.191 2.288 0.571 0 2.443-0.706 4.282-2.173l1.080 1.465c-4.504 4.585-9.423 6.349-11.324 6.349z"
+ //class="sc-gzVnrw cPWggY"
+ ></path>
+ </svg>
+ );
+};
+export default InfoDisney;
diff --git a/src/files-ui/components/icons/InfoDisney/InfoDisneyProps.ts b/src/files-ui/components/icons/InfoDisney/InfoDisneyProps.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e1b6033571725ccef5a82c98acf5f905a03c2459
--- /dev/null
+++ b/src/files-ui/components/icons/InfoDisney/InfoDisneyProps.ts
@@ -0,0 +1,3 @@
+import { IconProps } from "../IconProps/IconProps";
+
+export interface InfoDisneyProps extends IconProps{}
\ No newline at end of file
diff --git a/src/files-ui/components/icons/Person/Person.tsx b/src/files-ui/components/icons/Person/Person.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..75f3b0279123c044a8d1709ff2ba9a454c5b09d0
--- /dev/null
+++ b/src/files-ui/components/icons/Person/Person.tsx
@@ -0,0 +1,29 @@
+import * as React from "react";
+import { parseSize } from "../utils/utils";
+import { PersonProps } from "./PersonProps";
+
+const Person: React.FC<PersonProps> = (props: PersonProps) => {
+ const { size, color, colorFill, onClick, style, className } = props;
+ const finalSize = parseSize(size);
+ const finalStyle = style ? style : {};
+ return (
+ <svg
+ className={className || ""}
+ style={onClick ? { cursor: "pointer", ...finalStyle } : finalStyle}
+ xmlns="http://www.w3.org/2000/svg"
+ height={`${finalSize}px`}
+ viewBox="0 0 24 24"
+ width={`${finalSize}px`}
+ fill={color ? color : "#000000"}
+ onClick={(e) => onClick?.(e)}
+ >
+ <path
+ d="M0 0h24v24H0z"
+ opacity=".9"
+ fill={colorFill ? colorFill : "none"}
+ />
+ <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" />
+ </svg>
+ );
+};
+export default Person;
diff --git a/src/files-ui/components/icons/Person/PersonProps.tsx b/src/files-ui/components/icons/Person/PersonProps.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..d6f6964ec91250f95c8420557e97e891ca6987d9
--- /dev/null
+++ b/src/files-ui/components/icons/Person/PersonProps.tsx
@@ -0,0 +1,3 @@
+import { IconProps } from "../IconProps/IconProps";
+
+export interface PersonProps extends IconProps{}
\ No newline at end of file
diff --git a/src/files-ui/components/icons/PhotoCamera/PhotoCamera.tsx b/src/files-ui/components/icons/PhotoCamera/PhotoCamera.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..7a6fa22162f5cbddc104aa2b4aadb00535679194
--- /dev/null
+++ b/src/files-ui/components/icons/PhotoCamera/PhotoCamera.tsx
@@ -0,0 +1,29 @@
+import * as React from "react";
+import { parseSize } from "../utils/utils";
+import { PhotoCameraProps } from "./PhotoCameraProps";
+
+const PhotoCamera: React.FC<PhotoCameraProps> = (props: PhotoCameraProps) => {
+ const { size, color, colorFill, onClick, style, className } = props;
+ const finalSize = parseSize(size);
+ const finalStyle = style ? style : {};
+ return (
+ <svg
+ className={className || ""}
+ style={onClick ? { cursor: "pointer", ...finalStyle } : finalStyle}
+ xmlns="http://www.w3.org/2000/svg"
+ height={`${finalSize}px`}
+ viewBox="0 0 24 24"
+ width={`${finalSize}px`}
+ fill={color ? color : "#000000"}
+ onClick={(e) => onClick?.(e)}
+ >
+ <path
+ d="M0 0h24v24H0V0z"
+ opacity=".9"
+ fill={colorFill ? colorFill : "none"}
+ />
+ <path d="M14.12 4l1.83 2H20v12H4V6h4.05l1.83-2h4.24M15 2H9L7.17 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2h-3.17L15 2zm-3 7c1.65 0 3 1.35 3 3s-1.35 3-3 3-3-1.35-3-3 1.35-3 3-3m0-2c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5z" />
+ </svg>
+ );
+};
+export default PhotoCamera;
diff --git a/src/files-ui/components/icons/PhotoCamera/PhotoCameraProps.ts b/src/files-ui/components/icons/PhotoCamera/PhotoCameraProps.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e9835eb7edbab6f21927b4269356bdfadb92e02b
--- /dev/null
+++ b/src/files-ui/components/icons/PhotoCamera/PhotoCameraProps.ts
@@ -0,0 +1,3 @@
+import { IconProps } from "../IconProps/IconProps";
+
+export interface PhotoCameraProps extends IconProps{}
\ No newline at end of file
diff --git a/src/files-ui/components/icons/Play/PlayIcon.tsx b/src/files-ui/components/icons/Play/PlayIcon.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..2698476a7e9ae6471180b4cac0450f787a07b516
--- /dev/null
+++ b/src/files-ui/components/icons/Play/PlayIcon.tsx
@@ -0,0 +1,29 @@
+import React, { FC } from "react";
+import { parseSize } from "../utils/utils";
+import { PlayIconProps } from "./PlayIconProps";
+
+const PlayIcon: FC<PlayIconProps> = (props: PlayIconProps) => {
+ const { size, color, colorFill, onClick, style, className } = props;
+ const finalSize = parseSize(size);
+ const finalStyle = style ? style : {};
+ return (
+ <svg
+ className={className || ""}
+ style={onClick ? { cursor: "pointer", ...finalStyle } : finalStyle}
+ xmlns="http://www.w3.org/2000/svg"
+ height={`${finalSize}px`}
+ viewBox="0 0 24 24"
+ width={`${finalSize}px`}
+ fill={color ? color : "#000000"}
+ onClick={(e) => onClick?.(e)}
+ >
+ <path
+ d="M0 0h24v24H0V0z"
+ opacity=".9"
+ fill={colorFill ? colorFill : "none"}
+ />
+ <path d="M8 5v14l11-7L8 5z" />
+ </svg>
+ );
+};
+export default PlayIcon;
diff --git a/src/files-ui/components/icons/Play/PlayIconProps.ts b/src/files-ui/components/icons/Play/PlayIconProps.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e63de6bd2a8c3c5522a3e8557f34bbdc1eebaa95
--- /dev/null
+++ b/src/files-ui/components/icons/Play/PlayIconProps.ts
@@ -0,0 +1,2 @@
+import { IconProps } from "../IconProps/IconProps";
+export interface PlayIconProps extends IconProps { }
\ No newline at end of file
diff --git a/src/files-ui/components/icons/Remove/Remove.tsx b/src/files-ui/components/icons/Remove/Remove.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..3a83c8c5b000002506a6f4516988151f46f4280d
--- /dev/null
+++ b/src/files-ui/components/icons/Remove/Remove.tsx
@@ -0,0 +1,30 @@
+import * as React from "react";
+import { parseSize } from "../utils/utils";
+import { RemoveProps } from "./RemoveProps";
+
+const Remove: React.FC<RemoveProps> = (props: RemoveProps) => {
+ const { size, color, colorFill, onClick, style, className } = props;
+ const finalSize: number = parseSize(size);
+ const finalStyle: React.CSSProperties = style ? style : {};
+ return (
+ <svg
+ className={className || ""}
+ style={onClick ? { cursor: "pointer", ...finalStyle } : finalStyle}
+ xmlns="http://www.w3.org/2000/svg"
+ height={`${finalSize}px`}
+ viewBox="0 0 24 24"
+ width={`${finalSize}px`}
+ fill={color ? color : "#000000"}
+ onClick={(e) => onClick?.(e)}
+ >
+ <path
+ d="M0 0h24v24H0V0z"
+ opacity=".9"
+ fill={colorFill ? colorFill : "none"}
+ //fill={"red"}
+ />
+ <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11H7v-2h10v2z" />
+ </svg>
+ );
+};
+export default Remove;
diff --git a/src/files-ui/components/icons/Remove/RemoveOutline.tsx b/src/files-ui/components/icons/Remove/RemoveOutline.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..711a057f72ebb8307b51bc3ff7f3da974fa27642
--- /dev/null
+++ b/src/files-ui/components/icons/Remove/RemoveOutline.tsx
@@ -0,0 +1,29 @@
+import * as React from "react";
+import { parseSize } from "../utils/utils";
+import { RemoveProps } from "./RemoveProps";
+
+const RemoveOutline: React.FC<RemoveProps> = (props: RemoveProps) => {
+ const { size, color, colorFill, onClick, style, className } = props;
+ const finalSize = parseSize(size);
+ const finalStyle = style ? style : {};
+ return (
+ <svg
+ className={className || ""}
+ style={onClick ? { cursor: "pointer", ...finalStyle } : finalStyle}
+ xmlns="http://www.w3.org/2000/svg"
+ height={`${finalSize}px`}
+ viewBox="0 0 24 24"
+ width={`${finalSize}px`}
+ fill={color ? color : "#000000"}
+ onClick={(e) => onClick?.(e)}
+ >
+ <path
+ d="M0 0h24v24H0V0z"
+ opacity=".9"
+ fill={colorFill ? colorFill : "none"}
+ />
+ <path d="M7 11v2h10v-2H7zm5-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" />
+ </svg>
+ );
+};
+export default RemoveOutline;
diff --git a/src/files-ui/components/icons/Remove/RemoveProps.ts b/src/files-ui/components/icons/Remove/RemoveProps.ts
new file mode 100644
index 0000000000000000000000000000000000000000..4e6e240aacd8b8e316dca23bc0b7db645f27e84a
--- /dev/null
+++ b/src/files-ui/components/icons/Remove/RemoveProps.ts
@@ -0,0 +1,3 @@
+import { IconProps } from "../IconProps/IconProps";
+
+export interface RemoveProps extends IconProps{}
\ No newline at end of file
diff --git a/src/files-ui/components/icons/Upload/Upload.tsx b/src/files-ui/components/icons/Upload/Upload.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..712982336e7c585b58cf7674c3dd04ee45b0b609
--- /dev/null
+++ b/src/files-ui/components/icons/Upload/Upload.tsx
@@ -0,0 +1,34 @@
+import React, { FC } from "react";
+import { parseSize } from "../utils/utils";
+import { UploadProps } from "./UploadProps";
+
+const Upload: FC<UploadProps> = (props: UploadProps) => {
+ const { size, color, colorFill, onClick, style, className } = props;
+ const finalSize = parseSize(size);
+ const finalStyle = style ? style : {};
+ return (
+ <svg
+ style={onClick ? { ...{ cursor: "pointer", ...finalStyle } } : finalStyle}
+ onClick={() => onClick?.()}
+ xmlns="http://www.w3.org/2000/svg"
+ enableBackground="new 0 0 24 24"
+ height={`${finalSize}px`}
+ viewBox="0 0 24 24"
+ width={`${finalSize}px`}
+ fill={color ? color : "#000000"}
+ className={className || ""}
+ >
+ <g>
+ <rect
+ fill={colorFill || "none"}
+ height={size || "24"}
+ width={size || "24"}
+ />
+ </g>
+ <g>
+ <path d="M18,15v3H6v-3H4v3c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2v-3H18z M7,9l1.41,1.41L11,7.83V16h2V7.83l2.59,2.58L17,9l-5-5L7,9z" />
+ </g>
+ </svg>
+ );
+};
+export default Upload;
diff --git a/src/files-ui/components/icons/Upload/UploadProps.ts b/src/files-ui/components/icons/Upload/UploadProps.ts
new file mode 100644
index 0000000000000000000000000000000000000000..091489f08609f217a8d7ffdadd277b3e1fdde2bf
--- /dev/null
+++ b/src/files-ui/components/icons/Upload/UploadProps.ts
@@ -0,0 +1,3 @@
+import { IconProps } from "../IconProps/IconProps";
+
+export interface UploadProps extends IconProps{}
\ No newline at end of file
diff --git a/src/files-ui/components/icons/UploadDone/UploadDone.tsx b/src/files-ui/components/icons/UploadDone/UploadDone.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..0f3511f02a082ed121b84be31cf0ef0ae92d2a94
--- /dev/null
+++ b/src/files-ui/components/icons/UploadDone/UploadDone.tsx
@@ -0,0 +1,37 @@
+import React, { FC } from "react";
+import { parseSize } from "../utils/utils";
+import { UploadDoneProps } from "./UploadDoneProps";
+
+const UploadDone: FC<UploadDoneProps> = (props: UploadDoneProps) => {
+ const { size, color, colorFill, onClick, style, className } = props;
+ const finalSize = parseSize(size);
+ const finalStyle = style ? style : {};
+ return (
+ <svg
+ className={className || ""}
+ style={onClick ? { ...{ cursor: "pointer", ...finalStyle } } : finalStyle}
+ onClick={() => onClick?.()}
+ xmlns="http://www.w3.org/2000/svg"
+ enableBackground="new 0 0 24 24"
+ height={`${finalSize}px`}
+ viewBox="0 0 24 24"
+ width={`${finalSize}px`}
+ fill={color ? color : "#000000"}
+ >
+ <g>
+ <rect
+ fill={colorFill ? colorFill : "none"}
+ height={finalSize}
+ width={finalSize}
+ />
+ </g>
+ <g>
+ <g>
+ <polygon points="20.13,5.41 18.72,4 9.53,13.19 5.28,8.95 3.87,10.36 9.53,16.02" />
+ <rect height="2" width="14" x="5" y="18" />
+ </g>
+ </g>
+ </svg>
+ );
+};
+export default UploadDone;
diff --git a/src/files-ui/components/icons/UploadDone/UploadDoneProps.ts b/src/files-ui/components/icons/UploadDone/UploadDoneProps.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f0935b55623b579407051f6e36746add0cef2fc7
--- /dev/null
+++ b/src/files-ui/components/icons/UploadDone/UploadDoneProps.ts
@@ -0,0 +1,3 @@
+import { IconProps } from "../IconProps/IconProps";
+
+export interface UploadDoneProps extends IconProps{}
\ No newline at end of file
diff --git a/src/files-ui/components/icons/UploadError/UploadError.tsx b/src/files-ui/components/icons/UploadError/UploadError.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..ac654f6afa3d89c6af5e8a90bb9dcad59605be67
--- /dev/null
+++ b/src/files-ui/components/icons/UploadError/UploadError.tsx
@@ -0,0 +1,29 @@
+import React, { FC } from "react";
+import { parseSize } from "../utils/utils";
+import { UploadErrorProps } from "./UploadErrorProps";
+
+const UploadError: FC<UploadErrorProps> = (props: UploadErrorProps) => {
+ const { size, color, colorFill, onClick, style, className } = props;
+ const finalSize = parseSize(size);
+ const finalStyle = style ? style : {};
+ return (
+ <svg
+ className={className || ""}
+ style={onClick ? { ...{ cursor: "pointer", ...finalStyle } } : finalStyle}
+ onClick={() => onClick?.()}
+ xmlns="http://www.w3.org/2000/svg"
+ height={`${finalSize}px`}
+ viewBox="0 0 24 24"
+ width={`${finalSize}px`}
+ fill={color ? color : "#000000"}
+ >
+ <rect
+ fill={colorFill ? colorFill : "none"}
+ height={finalSize}
+ width={finalSize}
+ />
+ <path d="M18,15.17V15h2v2.17L18,15.17z M15.41,12.59L17,11l-1.41-1.41L14,11.17L15.41,12.59z M13,10.17V4h-2v4.17L13,10.17z M21.19,21.19l-1.78-1.78L2.81,2.81L1.39,4.22l6.19,6.19L7,11l5,5l0.59-0.59L15.17,18H6v-3H4v3c0,1.1,0.9,2,2,2h11.17l2.61,2.61 L21.19,21.19z" />
+ </svg>
+ );
+};
+export default UploadError;
diff --git a/src/files-ui/components/icons/UploadError/UploadErrorProps.ts b/src/files-ui/components/icons/UploadError/UploadErrorProps.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c380df69d4598b083da03aa5b460c78e3134446d
--- /dev/null
+++ b/src/files-ui/components/icons/UploadError/UploadErrorProps.ts
@@ -0,0 +1,3 @@
+import { IconProps } from "../IconProps/IconProps";
+
+export interface UploadErrorProps extends IconProps{}
\ No newline at end of file
diff --git a/src/files-ui/components/icons/UploadingProcess/UploadingProcess.scss b/src/files-ui/components/icons/UploadingProcess/UploadingProcess.scss
new file mode 100644
index 0000000000000000000000000000000000000000..d67ed165fa98b84934b4183bae888bbc14c25ebf
--- /dev/null
+++ b/src/files-ui/components/icons/UploadingProcess/UploadingProcess.scss
@@ -0,0 +1,18 @@
+@keyframes dui-rotate-spin {
+ from {
+ transform: rotate(0deg);
+ }
+
+ to {
+ transform: rotate(360deg);
+ }
+}
+.dui-rotate {
+ cursor: default;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+ .dui-rotate {
+ animation: dui-rotate-spin infinite 2s linear;
+ }
+}
diff --git a/src/files-ui/components/icons/UploadingProcess/UploadingProcess.tsx b/src/files-ui/components/icons/UploadingProcess/UploadingProcess.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..e829b0b012f2cd106966df774859e182fc5246d9
--- /dev/null
+++ b/src/files-ui/components/icons/UploadingProcess/UploadingProcess.tsx
@@ -0,0 +1,37 @@
+import React, { FC } from "react";
+import { parseSize } from "../utils/utils";
+import { UploadingProcessProps } from "./UploadingProcessProps";
+import "./UploadingProcess.scss";
+const UploadingProcess: FC<UploadingProcessProps> = (
+ props: UploadingProcessProps
+) => {
+ const {
+ size,
+ color,
+ //colorFill,
+ onClick,
+ style,
+ className,
+ spin,
+ } = props;
+ const finalSize = parseSize(size);
+ const finalStyle = style ? style : {};
+ let finalClassname = className || "";
+ finalClassname += spin ? "dui-rotate" : "";
+ return (
+ <svg
+ className={finalClassname}
+ style={onClick ? { ...{ cursor: "pointer", ...finalStyle } } : finalStyle}
+ onClick={() => onClick?.()}
+ xmlns="http://www.w3.org/2000/svg"
+ height={finalSize ? `${finalSize}px` : "24px"}
+ viewBox="0 0 24 24"
+ width={finalSize ? `${finalSize}px` : "24px"}
+ fill={color ? color : "#000000"}
+ >
+ <path d="M0 0h24v24H0V0z" fill="none" />
+ <path d="M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6 0 1.01-.25 1.97-.7 2.8l1.46 1.46C19.54 15.03 20 13.57 20 12c0-4.42-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6 0-1.01.25-1.97.7-2.8L5.24 7.74C4.46 8.97 4 10.43 4 12c0 4.42 3.58 8 8 8v3l4-4-4-4v3z" />
+ </svg>
+ );
+};
+export default UploadingProcess;
diff --git a/src/files-ui/components/icons/UploadingProcess/UploadingProcessProps.ts b/src/files-ui/components/icons/UploadingProcess/UploadingProcessProps.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5d9b3d4e0e420c1fccf9330285e00289e48b7d6e
--- /dev/null
+++ b/src/files-ui/components/icons/UploadingProcess/UploadingProcessProps.ts
@@ -0,0 +1,5 @@
+import { IconProps } from "../IconProps/IconProps";
+
+export interface UploadingProcessProps extends IconProps {
+ spin?: boolean;
+}
\ No newline at end of file
diff --git a/src/files-ui/components/icons/ViewGrid/ViewGrid.tsx b/src/files-ui/components/icons/ViewGrid/ViewGrid.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..c9f91a5bb5dc5c3239008ab5f6324cdd92a1ca2b
--- /dev/null
+++ b/src/files-ui/components/icons/ViewGrid/ViewGrid.tsx
@@ -0,0 +1,32 @@
+import React, { FC } from "react";
+import { parseSize } from "../utils/utils";
+import { ViewGridProps } from "./ViewGridProps";
+
+const ViewGrid: FC<ViewGridProps> = (props: ViewGridProps) => {
+ const { size, color,
+ //colorFill,
+ onClick, style,className } = props;
+ const finalSize = parseSize(size);
+ const finalStyle = style ? style : {};
+ return (
+ <svg
+ style={onClick ? { ...{ cursor: "pointer", ...finalStyle } } : finalStyle}
+ onClick={() => onClick?.()}
+ xmlns="http://www.w3.org/2000/svg"
+ enableBackground="new 0 0 24 24"
+ height={`${finalSize}px`}
+ viewBox="0 0 24 24"
+ width={`${finalSize}px`}
+ fill={color ? color : "#000000"}
+ className={className || ""}
+ >
+ <g>
+ <path d="M0,0h24v24H0V0z" fill="none" />
+ </g>
+ <g>
+ <path d="M20,4H4C2.9,4,2,4.9,2,6v12c0,1.1,0.9,2,2,2h16c1.1,0,2-0.9,2-2V6C22,4.9,21.1,4,20,4z M8,11H4V6h4V11z M14,11h-4V6h4V11z M20,11h-4V6h4V11z M8,18H4v-5h4V18z M14,18h-4v-5h4V18z M20,18h-4v-5h4V18z" />
+ </g>
+ </svg>
+ );
+};
+export default ViewGrid;
diff --git a/src/files-ui/components/icons/ViewGrid/ViewGridProps.ts b/src/files-ui/components/icons/ViewGrid/ViewGridProps.ts
new file mode 100644
index 0000000000000000000000000000000000000000..03d78a41824527dcf0e7a09f183b462ac339b3e8
--- /dev/null
+++ b/src/files-ui/components/icons/ViewGrid/ViewGridProps.ts
@@ -0,0 +1,3 @@
+import { IconProps } from "../IconProps/IconProps";
+
+export interface ViewGridProps extends IconProps{}
\ No newline at end of file
diff --git a/src/files-ui/components/icons/ViewList/ViewList.tsx b/src/files-ui/components/icons/ViewList/ViewList.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..69e59414f72314a45fbf074b555594b7c0a8cf60
--- /dev/null
+++ b/src/files-ui/components/icons/ViewList/ViewList.tsx
@@ -0,0 +1,30 @@
+import React, { FC } from "react";
+import { parseSize } from "../utils/utils";
+import { ViewListProps } from "./ViewListProps";
+
+const ViewList: FC<ViewListProps> = (props: ViewListProps) => {
+ const { size, color, colorFill, onClick, style, className } = props;
+ const finalSize = parseSize(size);
+ const finalStyle = style ? style : {};
+ return (
+ <svg
+ style={onClick ? { ...{ cursor: "pointer", ...finalStyle } } : finalStyle}
+ onClick={() => onClick?.()}
+ xmlns="http://www.w3.org/2000/svg"
+ enableBackground="new 0 0 24 24"
+ height={`${finalSize}px`}
+ viewBox="0 0 24 24"
+ width={`${finalSize}px`}
+ fill={color ? color : "#000000"}
+ className={className || ""}
+ >
+ <rect
+ fill={colorFill || "none"}
+ height={size || "24"}
+ width={size || "24"}
+ />
+ <path d="M20,4H4C2.9,4,2,4.9,2,6v12c0,1.1,0.9,2,2,2h16c1.1,0,2-0.9,2-2V6C22,4.9,21.1,4,20,4z M8,18H4V6h4V18z M14,18h-4V6h4V18z M20,18h-4V6h4V18z" />
+ </svg>
+ );
+};
+export default ViewList;
diff --git a/src/files-ui/components/icons/ViewList/ViewListProps.ts b/src/files-ui/components/icons/ViewList/ViewListProps.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d5158b1417ccf49eef237fc127673895d5c90b63
--- /dev/null
+++ b/src/files-ui/components/icons/ViewList/ViewListProps.ts
@@ -0,0 +1,3 @@
+import { IconProps } from "../IconProps/IconProps";
+
+export interface ViewListProps extends IconProps{}
\ No newline at end of file
diff --git a/src/files-ui/components/icons/Visibility/Visibility.tsx b/src/files-ui/components/icons/Visibility/Visibility.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..bc805e91da39cd7b8844265c889d31fac57bea28
--- /dev/null
+++ b/src/files-ui/components/icons/Visibility/Visibility.tsx
@@ -0,0 +1,31 @@
+import React, { FC } from "react";
+import { parseSize } from "../utils/utils";
+import { VisibilityProps } from "./VisibilityProps";
+
+const Visibility: FC<VisibilityProps> = (props: VisibilityProps) => {
+ const { size, color, colorFill, onClick, style, className } = props;
+ const finalSize = parseSize(size);
+ const finalStyle = style ? style : {};
+
+ return (
+ <svg
+ className={className || ""}
+ style={onClick ? { cursor: "pointer", ...finalStyle } : finalStyle}
+ xmlns="http://www.w3.org/2000/svg"
+ height={`${finalSize}px`}
+ viewBox="0 0 24 24"
+ width={`${finalSize}px`}
+ fill={color ? color : "#000000"}
+ onClick={(e) => onClick?.(e)}
+ >
+ <path d="M0 0h24v24H0V0z" fill="none" />
+ <path
+ d="M12 4c-4.41 0-8 3.59-8 8s3.59 8 8 8 8-3.59 8-8-3.59-8-8-8z"
+ //opacity=".9"
+ fill={colorFill ? colorFill : "none"}
+ />
+ <path d="M12 4C7 4 2.73 7.11 1 11.5 2.73 15.89 7 19 12 19s9.27-3.11 11-7.5C21.27 7.11 17 4 12 4zm0 12.5c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z" />
+ </svg>
+ );
+};
+export default Visibility;
diff --git a/src/files-ui/components/icons/Visibility/VisibilityProps.ts b/src/files-ui/components/icons/Visibility/VisibilityProps.ts
new file mode 100644
index 0000000000000000000000000000000000000000..67038c8886ca1d4c37a6e1813ab5876a7f03f305
--- /dev/null
+++ b/src/files-ui/components/icons/Visibility/VisibilityProps.ts
@@ -0,0 +1,3 @@
+import { IconProps } from "../IconProps/IconProps";
+
+export interface VisibilityProps extends IconProps{}
\ No newline at end of file
diff --git a/src/files-ui/components/icons/index.ts b/src/files-ui/components/icons/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..fa39a96a8286a5d79a27143cfefd7986e52d057f
--- /dev/null
+++ b/src/files-ui/components/icons/index.ts
@@ -0,0 +1,68 @@
+export { default as Cancel } from "./Cancel/Cancel";
+export * from "./Cancel/Cancel";
+
+export { default as CheckCircle } from "./CheckCircle/CheckCircle";
+export * from "./CheckCircle/CheckCircle";
+
+export { default as Clean } from "./Clean/Clean";
+export * from "./Clean/Clean";
+
+export { default as Clear } from "./Clear/Clear";
+export * from "./Clear/Clear";
+
+export { default as Close } from "./Close/Close";
+export * from "./Close/Close";
+
+export { default as CloudDone } from "./CloudDone/CloudDone";
+export * from "./CloudDone/CloudDone";
+
+export { default as DoDisturb } from "./DoDisturb/DoDisturb";
+export * from "./DoDisturb/DoDisturb";
+
+export { default as DownloadFile } from "./DownloadFile/DownloadFile";
+export * from "./DownloadFile/DownloadFile";
+
+export { default as Info } from "./Info/Info";
+export * from "./Info/Info";
+
+export { default as InfoBlack } from "./InfoBlack/InfoBlack";
+export * from "./InfoBlack/InfoBlack";
+
+export { default as InfoDisney } from "./InfoDisney/InfoDisney";
+export * from "./InfoDisney/InfoDisney";
+
+export { default as Person } from "./Person/Person";
+export * from "./Person/Person";
+
+export { default as PhotoCamera } from "./PhotoCamera/PhotoCamera";
+export * from "./PhotoCamera/PhotoCamera";
+
+export { default as PlayIcon } from "./Play/PlayIcon";
+export * from "./Play/PlayIcon";
+
+export { default as Remove } from "./Remove/Remove";
+export * from "./Remove/Remove";
+
+export { default as RemoveOutline } from "./Remove/RemoveOutline";
+export * from "./Remove/RemoveOutline";
+
+export { default as Upload } from "./Upload/Upload";
+export * from "./Upload/Upload";
+
+export { default as UploadDone } from "./UploadDone/UploadDone";
+export * from "./UploadDone/UploadDone";
+
+export { default as UploadError } from "./UploadError/UploadError";
+export * from "./UploadError/UploadError";
+
+export { default as UploadingProcess } from "./UploadingProcess/UploadingProcess";
+export * from "./UploadingProcess/UploadingProcess";
+
+export { default as Visibility } from "./Visibility/Visibility"
+export * from "./Visibility/Visibility"
+
+export { default as ViewGrid } from "./ViewGrid/ViewGrid";
+export * from "./ViewGrid/ViewGrid";
+
+export { default as ViewList } from "./ViewList/ViewList";
+export * from "./ViewList/ViewList";
diff --git a/src/files-ui/components/icons/utils/utils.ts b/src/files-ui/components/icons/utils/utils.ts
new file mode 100644
index 0000000000000000000000000000000000000000..0676af4ac868683351cf37d71672f18d3864bfb1
--- /dev/null
+++ b/src/files-ui/components/icons/utils/utils.ts
@@ -0,0 +1,25 @@
+import { IconProps } from "../IconProps/IconProps";
+/**
+ * Added support for literals % and px
+ * @param sizeStr
+ * @returns
+ */
+export const parseSize = (sizeStr: IconProps["size"] | number): number => {
+ if (typeof sizeStr === "number") {
+ return sizeStr;
+ }
+ switch (sizeStr) {
+ case "micro":
+ return 8;
+ case "small":
+ return 15;
+ case "semi-medium":
+ return 18;
+ case "medium":
+ return 25;
+ case "large":
+ return 28;
+ default:
+ return 24;
+ }
+}
\ No newline at end of file
diff --git a/src/files-ui/components/index.ts b/src/files-ui/components/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..cd790fe513bbf4aa6774d11f25734451457c92dd
--- /dev/null
+++ b/src/files-ui/components/index.ts
@@ -0,0 +1,12 @@
+export { Dropzone } from "./dropzone";
+export * from "./dropzone";
+
+export { FileItem } from "./file-item";
+export * from "./file-item";
+
+
+
+// internal components
+
+export { MaterialButton } from "./material-button";
+export * from "./material-button";
\ No newline at end of file
diff --git a/src/files-ui/components/input-button/InputButton.tsx b/src/files-ui/components/input-button/InputButton.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..dcb379e4c7d7bd9291c012b91c14cbc296a6380b
--- /dev/null
+++ b/src/files-ui/components/input-button/InputButton.tsx
@@ -0,0 +1,336 @@
+import * as React from "react";
+import { print_manager } from "../../../utils";
+import {
+ cleanInput,
+ DropzoneLocalizerSelector,
+ ExtFile,
+ ExtFileInstance,
+ ExtFileManager,
+ fakeFuiUpload,
+ fileListToExtFileArray,
+ FileValidatorProps,
+ FunctionLabel,
+ handleClickInput,
+ instantPreparingToUploadOne,
+ isValidateActive,
+ LocalLabels,
+ sleepPreparing,
+ sleepTransition,
+ toUploadableExtFileList,
+ UploadConfig,
+ uploadOnePromiseXHR,
+ UploadResponse,
+ validateExtFileList,
+} from "../../core";
+import useDropzoneFileListUpdater from "../../hooks/useDropzoneFileUpdater";
+import InputHidden from "../input-hidden/InputHidden";
+import { MaterialButton } from "../material-button";
+import { InputButtonProps } from "./InputButtonProps";
+
+const InputButton: React.FC<InputButtonProps> = (props: InputButtonProps) => {
+ const {
+ accept,
+ maxFileSize,
+ maxFiles,
+ validator,
+ uploadConfig,
+ onChange,
+ behaviour,
+ value,
+ localization,
+ disabled,
+ onUploadFinish,
+ fakeUpload,
+ } = props;
+ const {
+ url,
+ method,
+ headers,
+ uploadLabel,
+ cleanOnUpload = true,
+ preparingTime = 1500,
+ autoUpload = false,
+ } = uploadConfig as UploadConfig;
+
+ //localizers
+ const DropzoneLocalizer: LocalLabels =
+ DropzoneLocalizerSelector(localization);
+
+ //ref to the hidden input tag
+ const inputRef = React.useRef<HTMLInputElement>(null);
+
+ //const dropzoneId: string | number = useDropzoneFileListID();
+ const inputButtonId: string | number = React.useId();
+ //state for checking upload start
+ const [isUploading, setIsUploading] = React.useState<boolean>(false);
+
+ //Flag that determines whether to validate or not
+ const validateFilesFlag: boolean = isValidateActive(
+ accept,
+ maxFileSize,
+ maxFiles,
+ validator
+ );
+
+ //state for managing the number of valid files
+ //state for managing the files locally
+ const [localFiles, numberOfValidFiles, setLocalFiles]: [
+ ExtFile[],
+ number,
+ React.Dispatch<React.SetStateAction<ExtFile[]>>
+ ] = useDropzoneFileListUpdater(
+ inputButtonId,
+ value || [],
+ isUploading,
+ maxFileSize,
+ accept,
+ maxFiles,
+ validator,
+ localization,
+ validateFilesFlag
+ );
+ /**
+ * Uploads each file in the array of ExtFiles
+ * First, sets all the files in preparing status and awaits `preparingTime` miliseconds.
+ * If `preparingTime` is not given or its value is false or 0, there won´t be a preparing phase.
+ * Then onChange event will be called to update the files outside.
+ * If `onCancel` event ocurrs outside on any on the
+ * FileItems(e.g. by clicking the cancel button on `FileItem`),
+ * the extFileInstance will change its status from 'preparing' to undefined. If so,
+ * after the waiting time the value of status will be found as undefined and
+ * won´t perfom the upload for that file or any other that fits that condition.
+ * Then, for each file sets the file in 'uploading' status.
+ * Then onChange event will be called to update the files outside.
+ * Then uploads the file with the `xhr` instance.
+ * After that, that file recieves the new uploadStatus that can be
+ * 'success', 'error' or 'aborted'
+ * and onChange event will be called to update the files outside.
+ * @param localFiles the list of extFiles to upload
+ * @returns nothing
+ */
+ const uploadfiles = async (localFiles: ExtFile[]): Promise<void> => {
+ if(!url) return;
+
+ setIsUploading(true);
+ print_manager(localFiles, "start");
+ // set flag to true
+ // recieve on the new list
+ // initialize new list of ExtFileInstances
+ let arrOfExtFilesInstances: ExtFileInstance[] = [];
+ //avoid to call upload if not allowed
+ if (isUploading || localFiles.length === 0 || !arrOfExtFilesInstances) {
+ return;
+ }
+
+ const totalNumber: number = localFiles.length;
+ const missingUpload: number = localFiles.filter((x: ExtFile) => {
+ return (
+ (!validateFilesFlag || (validateFilesFlag && x.valid)) &&
+ x.uploadStatus !== "success"
+ );
+ }).length;
+
+ let totalRejected: number = 0;
+ let currentCountUpload: number = 0;
+
+ // setIsUploading(true);
+ //PREPARING stage
+ //use methods to update on static class
+ //obtain a fresher dui file list
+ console.log("***** before setFileListMapPreparing");
+ console.table(localFiles);
+ arrOfExtFilesInstances =
+ ExtFileManager.setFileListMapPreparing(
+ inputButtonId,
+ localFiles,
+ validateFilesFlag as boolean,
+ cleanOnUpload as boolean
+ ) || [];
+
+ console.log("***** FileManagerLog setFileListMapPreparing");
+ console.table(arrOfExtFilesInstances);
+ const newExtFileLocal: ExtFile[] = [...arrOfExtFilesInstances].map((x) =>
+ x.toExtFile()
+ );
+
+ console.log(
+ "FileManagerLog after setFileListMapPreparing",
+ arrOfExtFilesInstances
+ );
+
+ //CHANGE (o alejo el isUploading o lo alejo para que tenga m,as tiempo antes de la respuyesta)
+ // setIsUploading(true);
+ handleFilesChange(newExtFileLocal, true);
+
+ console.log("FileManagerLog before sleep", arrOfExtFilesInstances);
+ //AWAIT when preparing time is given
+ //general sleep for all files
+ await sleepPreparing(preparingTime);
+ // workaround for preventing getting the uploadStatus as undefined
+ /* arrOfExtFilesInstances.forEach((F) => {
+ F.uploadStatus = "preparing";
+ }); */
+ //variable for storing responses
+ //console.log("uploadfiles after sleep response",response);
+ console.log("FileManagerLog after sleep", arrOfExtFilesInstances);
+
+ //return;
+ let serverResponses: Array<UploadResponse> = [];
+
+ for (let i = 0; i < arrOfExtFilesInstances.length; i++) {
+ const currentExtFileInstance: ExtFileInstance = arrOfExtFilesInstances[i];
+ console.log(
+ "FileManagerLog currentExtFileInstance " + i,
+ currentExtFileInstance
+ );
+
+ if (currentExtFileInstance.uploadStatus === "preparing") {
+ //set stage to "uploading" in one file and notify change
+ // PREPARING => UPLOADING
+ instantPreparingToUploadOne(currentExtFileInstance);
+ /* setLocalMessage(
+ uploadingMessenger(`${++currentCountUpload}/${missingUpload}`)
+ ); */
+ //CHANGE
+ handleFilesChange([...arrOfExtFilesInstances], true);
+
+ //UPLOADING => UPLOAD()
+ //upload one file and notify about change
+ const uploadResponse: UploadResponse = fakeUpload
+ ? await fakeFuiUpload(currentExtFileInstance, DropzoneLocalizer)
+ : await uploadOnePromiseXHR(
+ currentExtFileInstance,
+ url,
+ method,
+ headers,
+ uploadLabel
+ );
+
+ const { uploadedFile } = uploadResponse;
+ //update instances
+ currentExtFileInstance.uploadStatus = uploadedFile.uploadStatus;
+ currentExtFileInstance.uploadMessage = uploadedFile.uploadMessage;
+ //CHANGE
+ if (!(currentExtFileInstance.uploadStatus === "aborted"))
+ await sleepTransition();
+
+ handleFilesChange(
+ arrOfExtFilesInstances.map((x: ExtFileInstance) => x.toExtFile()),
+ true
+ );
+
+ if (uploadedFile.uploadStatus === "error") {
+ totalRejected++;
+ }
+
+ serverResponses.push(uploadResponse);
+ }
+ }
+
+ // upload group finished :D
+ onUploadFinish?.(serverResponses);
+
+ const finishUploadMessenger: FunctionLabel =
+ DropzoneLocalizer.uploadFinished as FunctionLabel;
+
+ /* setLocalMessage(
+ finishUploadMessenger(missingUpload - totalRejected, totalRejected)
+ ); */
+ setIsUploading(false);
+ };
+ /**
+ * Performs the changes in the FuiFile list.
+ * Makes a new array of FuiFiles according to the "behaviour" prop.
+ * If isUploading state is not true and the behaviour props is equal to "add",
+ * the incoming extFileList is added at the end of the current list of fuiFiles.
+ * Otherwise, the complete fuiFile list replaced by the incomming fuiFileList
+ * @param extFileList the new fileList
+ * @param isUploading a flag that dscribes whther the uploading process is active or not
+ */
+ const handleFilesChange = (
+ extFileList: ExtFile[],
+ isUploading?: boolean
+ ): void => {
+ console.log(
+ "handleFilesChange",
+ extFileList.map((F) => F.uploadStatus)
+ );
+ let finalExtFileList: ExtFile[] =
+ behaviour === "add" && !isUploading
+ ? [...localFiles, ...extFileList]
+ : [...extFileList];
+ if (onChange) {
+ onChange(finalExtFileList);
+ } else {
+ setLocalFiles(finalExtFileList);
+ }
+ if (autoUpload && !isUploading) {
+ console.log("autoUpload", finalExtFileList);
+ uploadfiles(finalExtFileList);
+ }
+ };
+
+ /**
+ * Performs the action of recieving the files when user selects the files
+ * by clicking the InputButton
+ * @param evt event handler for getting files from input element target
+ */
+ const handleChangeInput: React.ChangeEventHandler<HTMLInputElement> = (
+ evt: React.ChangeEvent<HTMLInputElement>
+ ): void => {
+ //if (isUploading) return;
+ let fileList: FileList = evt.target.files as FileList;
+ let extFileListOutput: ExtFile[] = fileListToExtFileArray(fileList);
+ //validate dui files
+ if (validateFilesFlag)
+ extFileListOutput = outerFuiValidation(extFileListOutput);
+ //init xhr on each dui file
+ if (url) extFileListOutput = toUploadableExtFileList(extFileListOutput);
+
+ // Clean input element to trigger onChange event on input
+ cleanInput(inputRef.current);
+
+ handleFilesChange(extFileListOutput);
+ };
+
+ /**
+ * Performs the validation process for each FuiFile
+ * outside the DropzoneNeo component file declaration
+ * according to the criteria given by maxFiles and maxFileSize and accept props
+ * This function calls validateFuiFileList and sets the valid prop of FuiFile to "true" or "false"
+ * depending on the result of the individual validation.
+ * It also add the list of errors.
+ * @param fuiFileListToValidate the fuiFileList to validate
+ * @returns a list of validated FuiFile list
+ */
+ const outerFuiValidation = (fuiFileListToValidate: ExtFile[]): ExtFile[] => {
+ const localValidator: FileValidatorProps = { maxFileSize, accept };
+ const validatedFuiFileList: ExtFile[] = validateExtFileList(
+ fuiFileListToValidate,
+ maxFiles ? maxFiles - numberOfValidFiles : Infinity,
+ localValidator,
+ validator,
+ maxFiles,
+ localization
+ );
+ return validatedFuiFileList;
+ };
+ // HANDLERS for CLICK
+ function handleClick(): void {
+ //handleClickUtil(evt);
+ if (disabled) return;
+
+ handleClickInput(inputRef.current);
+ }
+ return (
+ <MaterialButton onClick={handleClick}>
+ <InputHidden
+ multiple={maxFiles ? maxFiles > 1 : true}
+ accept={accept || ""}
+ inputRef={inputRef}
+ onChange={handleChangeInput}
+ />
+ </MaterialButton>
+ );
+};
+export default InputButton;
diff --git a/src/files-ui/components/input-button/InputButtonProps.ts b/src/files-ui/components/input-button/InputButtonProps.ts
new file mode 100644
index 0000000000000000000000000000000000000000..3b66faab708a6145b985bc0dc91ba09c4a04c2d0
--- /dev/null
+++ b/src/files-ui/components/input-button/InputButtonProps.ts
@@ -0,0 +1,113 @@
+import { CustomValidateFileResponse, ExtFile, Localization, UploadConfig, UploadResponse } from "../../core";
+import { MaterialButtonProps } from "../material-button/MaterialButtonProps";
+import { OverridableComponentProps } from "../overridable";
+
+interface InputButtonFullProps extends OverridableComponentProps {
+ /**
+ * Probably one of the most important methods (callbacks).
+ * `onChange()` returns as first parameter an array of `ExtFile` objects,
+ * with at least the following structure:
+ *
+ * ```jsx
+ * export type ExtFile =
+ * {
+ * id: number | string | undefined;
+ * file: File;
+ * valid: boolean;
+ * errors?: string[];
+ * uploadMessage?: string;
+ * uploadStatus?: undefined | "uploading", "success", "error";
+ * }
+ * ```
+ * This event is triggered when upload starts and when upload
+ * finishes for each file in order to update the props on each ExtFile
+ */
+ onChange?: (files: ExtFile[]) => void;
+ /**
+ * Just like any other input component.
+ * The value of the input element, required for a controlled component.
+ */
+ value?: ExtFile[];
+
+ /**
+ * The language to be used in Dropzone labels
+ * Currently only English, French , Portuguese, Chinnese (traditional and simplyfied), Russian and Spanish are supported
+ * @default "EN-en"
+ */
+ localization?: Localization;
+ /**
+ * If true, will show a ripple everytime
+ * the user drops files or selects files
+ */
+ disableRipple?: boolean;
+ /**
+ * The behaviour when new files are selected or dropped
+ * @default 'add'
+ */
+ behaviour?: 'add' | 'replace';
+ /////////////// VALIDATION STAGE ///////////////
+ /**
+ * The max file size allowed in bytes
+ */
+ maxFileSize?: number;
+ /**
+ * The max number of files to be accepted.
+ */
+ maxFiles?: number;
+ /**
+ * The default implementation of accept
+ * checks the file's mime type or extension
+ * against this list. This is a comma
+ * separated list of mime types or file extensions.
+ * E.g.:
+ * ```js
+ * acccept="image/*, application/pdf, .psd"
+ * ```
+ */
+ accept?: string;
+ /**
+ * The custom validator to validate files that are selected or dropped in dropzone compoent.
+ * Must be a function that recieves as first parameter a File Object
+ * and must return a boolean value
+ * ```jsx
+ * export type CustomValidateFileResponse = {
+ * valid: boolean;
+ * errors?: string[] | undefined;
+ * }
+ * ```
+ */
+ validator?: (f: File) => CustomValidateFileResponse;
+ /////////////// UPLOAD STAGE ///////////////
+ /**
+ * The configuration needed for uploading the files.
+ * When "uploadConfig" is not given or uploadConfig.url is undefined
+ * the upload button will not be visible
+ * and uploadOnDrop flag will not work
+ */
+ uploadConfig?: UploadConfig;
+ /**
+ * Flag that indicates Dropzone to perform a fake upload process.
+ * If given or true, will ignore `uploadConfig` prop, will show
+ * the upload button
+ * Will respond with random upload status on every uploadable file
+ */
+ fakeUpload?: boolean;
+ /**
+ * This event returns as first aparameter the list of responses for each file following the structure:
+ * responses = [
+ * {id: <the file id>, serverResponse: the server response}
+ * ]
+ */
+ onUploadFinish?: (responses: UploadResponse[]) => void;
+
+
+}
+
+
+export declare type InputButtonProps =
+
+ {
+ [D in keyof InputButtonFullProps]: InputButtonFullProps[D]
+ } & {
+ [D in keyof MaterialButtonProps]: MaterialButtonProps[D]
+ }
\ No newline at end of file
diff --git a/src/files-ui/components/input-hidden/InputHidden.tsx b/src/files-ui/components/input-hidden/InputHidden.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..5e29c150246ee6ae6bb9ee45b1e7252f397a45cc
--- /dev/null
+++ b/src/files-ui/components/input-hidden/InputHidden.tsx
@@ -0,0 +1,20 @@
+import * as React from "react";
+import { InputHiddenProps } from "./InputHiddenProps";
+
+const InputHidden: React.FC<InputHiddenProps> = (props: InputHiddenProps) => {
+ const { onChange, inputRef, accept, multiple } = props;
+ return (
+ <React.Fragment>
+ <input
+ aria-label="fui-hidden-input"
+ style={{ display: "none" }}
+ ref={inputRef}
+ onChange={onChange}
+ type="file"
+ accept={accept}
+ multiple={multiple}
+ />
+ </React.Fragment>
+ );
+};
+export default InputHidden;
diff --git a/src/files-ui/components/input-hidden/InputHiddenProps.ts b/src/files-ui/components/input-hidden/InputHiddenProps.ts
new file mode 100644
index 0000000000000000000000000000000000000000..7f7b40eaa8501a52fe756e380617cc4c2ffa40b3
--- /dev/null
+++ b/src/files-ui/components/input-hidden/InputHiddenProps.ts
@@ -0,0 +1,8 @@
+import * as React from "react";
+
+export declare type InputHiddenProps = {
+ onChange: React.ChangeEventHandler<HTMLInputElement>;
+ accept: string;
+ inputRef: React.RefObject<HTMLInputElement>;
+ multiple: boolean;
+}
\ No newline at end of file
diff --git a/src/files-ui/components/loader/BasePreparingLoader/BasePreparingLoader.tsx b/src/files-ui/components/loader/BasePreparingLoader/BasePreparingLoader.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..21ed695ef6be36a58f33951b61a7bfba1ce351c7
--- /dev/null
+++ b/src/files-ui/components/loader/BasePreparingLoader/BasePreparingLoader.tsx
@@ -0,0 +1,56 @@
+import * as React from "react";
+import { parseSize } from "../../icons/utils/utils";
+import { BasePreparingLoaderProps } from "./BasePreparingLoaderProps";
+
+const BasePreparingLoader: React.FC<BasePreparingLoaderProps> = (
+ props: BasePreparingLoaderProps
+) => {
+ const {
+ size,
+ color,
+ //colorFill,
+ //onClick,
+ style,
+ //className,
+ radius,
+ x,
+ y,
+ width,
+ } = props;
+ const finalRadius = radius || 46;
+ const finalX = x || 50;
+ const finalY = y || 50;
+ const finalSize = parseSize(size);
+ const finalStyle = style ? style : {};
+ return (
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ xmlnsXlink="http://www.w3.org/1999/xlink"
+ width={`${finalSize}px`}
+ height={`${finalSize}px`}
+ style={finalStyle}
+ viewBox="0 0 100 100"
+ preserveAspectRatio="xMidYMid"
+ >
+ <circle
+ cx={`${finalX}`}
+ cy={`${finalY}`}
+ r={`${finalRadius}`}
+ fill="none"
+ stroke={color || "#14ff00"}
+ strokeWidth={`${width || 8}px`}
+ strokeDasharray={"164.93361431346415 100.97787143782138"}
+ >
+ <animateTransform
+ attributeName="transform"
+ type="rotate"
+ repeatCount="indefinite"
+ dur="1s"
+ values={`0 ${finalX} ${finalX};360 ${finalX} ${finalX}`}
+ keyTimes="0;1"
+ ></animateTransform>
+ </circle>
+ </svg>
+ );
+};
+export default BasePreparingLoader;
diff --git a/src/files-ui/components/loader/BasePreparingLoader/BasePreparingLoaderProps.ts b/src/files-ui/components/loader/BasePreparingLoader/BasePreparingLoaderProps.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c07954cf16cc067ab9c32d80eac4c5fe25658c42
--- /dev/null
+++ b/src/files-ui/components/loader/BasePreparingLoader/BasePreparingLoaderProps.ts
@@ -0,0 +1,7 @@
+
+import { IconProps } from "../../icons/IconProps/IconProps";
+import { LoaderProps } from "../LoaderProps";
+
+export interface BasePreparingLoaderProps extends IconProps, LoaderProps {
+
+}
diff --git a/src/files-ui/components/loader/DefaultLoader/DefaultLoader.scss b/src/files-ui/components/loader/DefaultLoader/DefaultLoader.scss
new file mode 100644
index 0000000000000000000000000000000000000000..14db2b6f16ac7e78e058d626db2feb22a892e7de
--- /dev/null
+++ b/src/files-ui/components/loader/DefaultLoader/DefaultLoader.scss
@@ -0,0 +1,11 @@
+.lds-colorbar {
+ // border: 1px crimson solid;
+ background-color: rgba(255, 255, 255, 0.8);
+ border-radius: 4px;
+ .files-ui-text-default-loader {
+ font-size: 1.5rem;
+ font-weight: 400;
+ text-anchor: middle;
+ //font-size: 1em;
+ }
+}
diff --git a/src/files-ui/components/loader/DefaultLoader/DefaultLoader.tsx b/src/files-ui/components/loader/DefaultLoader/DefaultLoader.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..891190f30e43bbe475b8583fe79fa6ad2503f794
--- /dev/null
+++ b/src/files-ui/components/loader/DefaultLoader/DefaultLoader.tsx
@@ -0,0 +1,138 @@
+
+
+import * as React from "react";
+import { asureColor, colourNameToHex, hexColorToRGB } from "../../../core/color";
+import "./DefaultLoader.scss";
+interface DefaultLoaderNeoProps {
+ color?: string;
+ label?: string;
+}
+const makeDefaultLoaderNeoColor = (color?: string): string => {
+ return hexColorToRGB(asureColor(colourNameToHex(color)), 0.5);
+};
+const DefaultLoader: React.FC<DefaultLoaderNeoProps> = (
+ props: DefaultLoaderNeoProps
+) => {
+ const { color = "#8b6b10",label } = props;
+ //console.log("color label loader", color,label);
+ return (
+ <svg
+ width="80px"
+ height="60px"
+ xmlns="http://www.w3.org/2000/svg"
+ viewBox="0 0 100 100"
+ preserveAspectRatio="xMidYMid"
+ className="lds-colorbar"
+ >
+ <defs>
+ <clipPath
+ ng-attr-id="{{config.cpid}}"
+ x="0"
+ y="0"
+ width="100"
+ height="100"
+ id="lds-colorbar-cpid-9d2a9cfa91489"
+ >
+ <path d="M81.3,58.7H18.7c-4.8,0-8.7-3.9-8.7-8.7v0c0-4.8,3.9-8.7,8.7-8.7h62.7c4.8,0,8.7,3.9,8.7,8.7v0C90,54.8,86.1,58.7,81.3,58.7z"></path>
+ </clipPath>
+ </defs>
+ <path
+ fill="none"
+ ng-attr-stroke="{{config.cf}}"
+ strokeWidth="2.7928"
+ d="M82,63H18c-7.2,0-13-5.8-13-13v0c0-7.2,5.8-13,13-13h64c7.2,0,13,5.8,13,13v0C95,57.2,89.2,63,82,63z"
+ stroke="#5d5d5d"
+ ></path>
+ <g
+ ng-attr-clip-path="url(#{{config.cpid}})"
+ clipPath="url(#lds-colorbar-cpid-9d2a9cfa91489)"
+ >
+ <g transform="translate(10 0)">
+ <rect
+ x="-100"
+ y="0"
+ width="25"
+ height="100"
+ ng-attr-fill="{{config.c1}}"
+ fill={color}
+ ></rect>
+ <rect
+ x="-75"
+ y="0"
+ width="25"
+ height="100"
+ ng-attr-fill="{{config.c2}}"
+ fill={makeDefaultLoaderNeoColor(color)}
+ ></rect>
+ <rect
+ x="-50"
+ y="0"
+ width="25"
+ height="100"
+ ng-attr-fill="{{config.c3}}"
+ fill={color}
+ ></rect>
+ <rect
+ x="-25"
+ y="0"
+ width="25"
+ height="100"
+ ng-attr-fill="{{config.c4}}"
+ fill={makeDefaultLoaderNeoColor(color)}
+ ></rect>
+ <rect
+ x="0"
+ y="0"
+ width="25"
+ height="100"
+ ng-attr-fill="{{config.c1}}"
+ fill={color}
+ ></rect>
+ <rect
+ x="25"
+ y="0"
+ width="25"
+ height="100"
+ ng-attr-fill="{{config.c2}}"
+ fill={makeDefaultLoaderNeoColor(color)}
+ ></rect>
+ <rect
+ x="50"
+ y="0"
+ width="25"
+ height="100"
+ ng-attr-fill="{{config.c3}}"
+ fill={color}
+ ></rect>
+ <rect
+ x="75"
+ y="0"
+ width="25"
+ height="100"
+ ng-attr-fill="{{config.c4}}"
+ fill={makeDefaultLoaderNeoColor(color)}
+ ></rect>
+ <animateTransform
+ attributeName="transform"
+ type="translate"
+ calcMode="linear"
+ values="0;100"
+ keyTimes="0;1"
+ dur="1s"
+ begin="0s"
+ repeatCount="indefinite"
+ ></animateTransform>
+ </g>
+ </g>
+ <text
+ className="files-ui-text-default-loader"
+ x={`50`}
+ y={`90`}
+ fill={`${color}`}
+ >
+ {label ||`loading`}
+ </text>
+ </svg>
+ );
+};
+export default DefaultLoader;
diff --git a/src/files-ui/components/loader/DefaultLoader/loader.tsx b/src/files-ui/components/loader/DefaultLoader/loader.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..6a93c56ca628134df9480f75b400a7f899115ac9
--- /dev/null
+++ b/src/files-ui/components/loader/DefaultLoader/loader.tsx
@@ -0,0 +1,122 @@
+
+
+import React, { FC } from "react";
+import { hexColorToRGB } from "../../../core/color";
+interface LoaderProps {
+ color?: string;
+}
+const Loader: FC<LoaderProps> = (props: LoaderProps) => {
+ const { color = "#8b6b10" } = props;
+ return (
+ <svg
+ width="80px"
+ height="60px"
+ xmlns="http://www.w3.org/2000/svg"
+ viewBox="0 0 100 100"
+ preserveAspectRatio="xMidYMid"
+ className="lds-colorbar"
+ >
+ <defs>
+ <clipPath
+ ng-attr-id="{{config.cpid}}"
+ x="0"
+ y="0"
+ width="100"
+ height="100"
+ id="lds-colorbar-cpid-9d2a9cfa91489"
+ >
+ <path d="M81.3,58.7H18.7c-4.8,0-8.7-3.9-8.7-8.7v0c0-4.8,3.9-8.7,8.7-8.7h62.7c4.8,0,8.7,3.9,8.7,8.7v0C90,54.8,86.1,58.7,81.3,58.7z"></path>
+ </clipPath>
+ </defs>
+ <path
+ fill="none"
+ ng-attr-stroke="{{config.cf}}"
+ strokeWidth="2.7928"
+ d="M82,63H18c-7.2,0-13-5.8-13-13v0c0-7.2,5.8-13,13-13h64c7.2,0,13,5.8,13,13v0C95,57.2,89.2,63,82,63z"
+ stroke="#5d5d5d"
+ ></path>
+ <g
+ ng-attr-clip-path="url(#{{config.cpid}})"
+ clipPath="url(#lds-colorbar-cpid-9d2a9cfa91489)"
+ >
+ <g transform="translate(10 0)">
+ <rect
+ x="-100"
+ y="0"
+ width="25"
+ height="100"
+ ng-attr-fill="{{config.c1}}"
+ fill={color}
+ ></rect>
+ <rect
+ x="-75"
+ y="0"
+ width="25"
+ height="100"
+ ng-attr-fill="{{config.c2}}"
+ fill={hexColorToRGB(color, 0.5)}
+ ></rect>
+ <rect
+ x="-50"
+ y="0"
+ width="25"
+ height="100"
+ ng-attr-fill="{{config.c3}}"
+ fill={color}
+ ></rect>
+ <rect
+ x="-25"
+ y="0"
+ width="25"
+ height="100"
+ ng-attr-fill="{{config.c4}}"
+ fill={hexColorToRGB(color, 0.5)}
+ ></rect>
+ <rect
+ x="0"
+ y="0"
+ width="25"
+ height="100"
+ ng-attr-fill="{{config.c1}}"
+ fill={color}
+ ></rect>
+ <rect
+ x="25"
+ y="0"
+ width="25"
+ height="100"
+ ng-attr-fill="{{config.c2}}"
+ fill={hexColorToRGB(color, 0.5)}
+ ></rect>
+ <rect
+ x="50"
+ y="0"
+ width="25"
+ height="100"
+ ng-attr-fill="{{config.c3}}"
+ fill={color}
+ ></rect>
+ <rect
+ x="75"
+ y="0"
+ width="25"
+ height="100"
+ ng-attr-fill="{{config.c4}}"
+ fill={hexColorToRGB(color, 0.5)}
+ ></rect>
+ <animateTransform
+ attributeName="transform"
+ type="translate"
+ calcMode="linear"
+ values="0;100"
+ keyTimes="0;1"
+ dur="1s"
+ begin="0s"
+ repeatCount="indefinite"
+ ></animateTransform>
+ </g>
+ </g>
+ </svg>
+ );
+};
+export default Loader;
diff --git a/src/files-ui/components/loader/DynamicLoader/DynamicLoader.scss b/src/files-ui/components/loader/DynamicLoader/DynamicLoader.scss
new file mode 100644
index 0000000000000000000000000000000000000000..d15165a20fb49cc36f7dd7e39adf75e1803e1300
--- /dev/null
+++ b/src/files-ui/components/loader/DynamicLoader/DynamicLoader.scss
@@ -0,0 +1,26 @@
+.circle_loader {
+ fill: none;
+ stroke: #14ff00;
+ stroke-width: 8px;
+ transform-origin: center;
+ transform: rotate(-90deg);
+ /* width: 100px; */
+}
+
+.dui_svg_circle_loader {
+ /* border: 1px solid #14ff00; */
+ fill: rgba(0, 0, 0, 0.21);
+ border-radius: 50%;
+ &:hover {
+ fill: rgba(0, 0, 0, 0.61);
+ }
+}
+
+.dui-text-loader {
+ /* dominant-baseline: middle;
+ */
+ text-anchor: middle;
+ font-size: 1em;
+ //font-family: Arial;
+ //fill: aliceblue;
+}
diff --git a/src/files-ui/components/loader/DynamicLoader/DynamicLoader.tsx b/src/files-ui/components/loader/DynamicLoader/DynamicLoader.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..a5ab43714d833f2c224d0ad6476caa2808b9bbf2
--- /dev/null
+++ b/src/files-ui/components/loader/DynamicLoader/DynamicLoader.tsx
@@ -0,0 +1,137 @@
+import * as React from "react";
+import { Clear } from "../../icons";
+import { parseSize } from "../../icons/utils/utils";
+//import BasePreparingLoader from "../BasePreparingLoader/BasePreparingLoader";
+import LoaderContainer from "../LoaderContainer/LoaderContainer";
+import { DynamicLoaderProps } from "./DynamicLoaderProps";
+
+const DynamicLoader: React.FC<DynamicLoaderProps> = (
+ props: DynamicLoaderProps
+) => {
+ const {
+ size,
+ color,
+ //colorFill,
+ //onClick,
+ style,
+ //className,
+ percentage,
+ hidePerncentage,
+ radius,
+ x,
+ y,
+ width,
+ onClick,
+ } = props;
+
+ console.log("percentage", percentage);
+
+ const finalRadius = radius || 28;
+ const finalX = x || 30;
+ const finalY = y || 30;
+ const finalSize = parseSize(size);
+ const finalStyle = style ? style : {};
+
+ const circleRef: React.RefObject<SVGCircleElement> =
+ React.useRef<SVGCircleElement>(null);
+
+ function setProgress(
+ percent: number,
+ myCircle: SVGCircleElement,
+ circumference: number
+ ) {
+ myCircle.style.strokeDashoffset = `${circumference * (1 - percent / 100)}`;
+ console.log(
+ "dashOffset",
+ percent,
+ circumference,
+ circumference * (1 - percent / 100)
+ );
+ //myCircle.style.strokeDashoffset = `0`;
+ /* let pct = document.getElementById("pct");
+ pct.innerHTML = percent.toFixed(0) + "%"; */
+ }
+ React.useEffect(() => {
+ const myCircle: SVGCircleElement | null = circleRef.current;
+ console.log("percentage useEffect", percentage);
+
+ if (
+ myCircle !== null &&
+ myCircle !== undefined &&
+ percentage !== undefined
+ ) {
+ let circumference: number = 2 * Math.PI * myCircle.r.baseVal.value;
+
+ myCircle.style.strokeDasharray = `${circumference} 1000`;
+
+ setProgress(
+ percentage >= 100 ? 100 : percentage,
+ myCircle,
+ circumference
+ );
+ }
+ }, [percentage]);
+
+ if (percentage !== undefined)
+ return (
+ <LoaderContainer size={size}>
+ <svg
+ className="dui_svg_circle_loader"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlnsXlink="http://www.w3.org/1999/xlink"
+ width={`${finalSize}px`}
+ height={`${finalSize}px`}
+ style={finalStyle}
+ >
+ <circle
+ style={{
+ transform: "rotate(-90deg)",
+ transformOrigin: "center",
+ }}
+ stroke={color || "#14ff00"}
+ cx={`${finalX}`}
+ cy={`${finalY}`}
+ r={`${finalRadius}`}
+ strokeWidth={`${width || 8}px`}
+ //className="circle_loader"
+ id="circle"
+ ref={circleRef}
+ fill="none"
+ ></circle>
+
+ {!hidePerncentage && percentage !== undefined && (
+ <text
+ className="dui-text-dynamic-loader"
+ x={`${finalX}`}
+ y={`${(finalX * 7) / 6}`}
+ >
+ {`${percentage.toFixed(0)} %`}
+ </text>
+ )}
+ </svg>
+ {onClick && (
+ <div
+ style={{
+ position: "absolute",
+ width: "100%",
+ height: "100%",
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "center",
+ }}
+ >
+ <Clear
+ color={"rgba(255,255,255,0.75)"}
+ size={45}
+ onClick={onClick}
+ //colorFill="transparent"
+ />
+ </div>
+ )}
+ </LoaderContainer>
+ );
+ else {
+ return <></>;
+ }
+};
+export default DynamicLoader;
diff --git a/src/files-ui/components/loader/DynamicLoader/DynamicLoaderProps.ts b/src/files-ui/components/loader/DynamicLoader/DynamicLoaderProps.ts
new file mode 100644
index 0000000000000000000000000000000000000000..63b50c75d245aac962d8864cf6e4c9339a2ad55e
--- /dev/null
+++ b/src/files-ui/components/loader/DynamicLoader/DynamicLoaderProps.ts
@@ -0,0 +1,11 @@
+import { IconProps } from "../../icons/IconProps/IconProps";
+import { LoaderProps } from "../LoaderProps";
+
+export interface DynamicLoaderPropsMap extends IconProps, LoaderProps {
+ percentage?: number;
+ hidePerncentage?: boolean;
+}
+
+export type DynamicLoaderProps = {
+ [L in keyof DynamicLoaderPropsMap]: DynamicLoaderPropsMap[L]
+}
\ No newline at end of file
diff --git a/src/files-ui/components/loader/InfiniteLoader/InfiniteLoader.tsx b/src/files-ui/components/loader/InfiniteLoader/InfiniteLoader.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..876172fb5b421ca0ffaf6df1b8aa6652294b7729
--- /dev/null
+++ b/src/files-ui/components/loader/InfiniteLoader/InfiniteLoader.tsx
@@ -0,0 +1,40 @@
+import * as React from "react";
+import { Clear } from "../../icons";
+import BasePreparingLoader from "../BasePreparingLoader/BasePreparingLoader";
+import LoaderContainer from "../LoaderContainer/LoaderContainer";
+import { InfiniteLoaderProps } from "./InfiniteLoaderProps";
+
+const InfiniteLoader: React.FC<InfiniteLoaderProps> = (
+ props: InfiniteLoaderProps
+) => {
+ const {
+ onClick,
+ //text,
+ size,
+ } = props;
+ return (
+ <LoaderContainer onClick={onClick} size={size}>
+ <BasePreparingLoader size={size} />
+ <div
+ style={{
+ position: "absolute",
+ width: "100%",
+ height: "100%",
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "center",
+ }}
+ >
+ {onClick && (
+ <Clear
+ color={"rgba(255,255,255,0.75)"}
+ size={45}
+ onClick={onClick}
+ //colorFill="transparent"
+ />
+ )}
+ </div>
+ </LoaderContainer>
+ );
+};
+export default InfiniteLoader;
diff --git a/src/files-ui/components/loader/InfiniteLoader/InfiniteLoaderProps.ts b/src/files-ui/components/loader/InfiniteLoader/InfiniteLoaderProps.ts
new file mode 100644
index 0000000000000000000000000000000000000000..670f1753ea39d36eee05384cf1a53b6f706644f4
--- /dev/null
+++ b/src/files-ui/components/loader/InfiniteLoader/InfiniteLoaderProps.ts
@@ -0,0 +1,13 @@
+import { OverridableComponentProps } from "../../overridable";
+
+export interface InfiniteLoaderPropsMap extends OverridableComponentProps {
+ size?: "micro" | "small" | "semi-medium" | "medium" | "large" | number;
+ onClick?: Function;
+ text?:string;
+}
+
+
+export type InfiniteLoaderProps = {
+ [F in keyof InfiniteLoaderPropsMap]: InfiniteLoaderPropsMap[F]
+}
+
diff --git a/src/files-ui/components/loader/LoaderContainer/LoaderContainer.scss b/src/files-ui/components/loader/LoaderContainer/LoaderContainer.scss
new file mode 100644
index 0000000000000000000000000000000000000000..92d06bec0c81a66fe1b83c5ed471878865376993
--- /dev/null
+++ b/src/files-ui/components/loader/LoaderContainer/LoaderContainer.scss
@@ -0,0 +1,18 @@
+.files-ui-loader-container {
+ background-color: rgba(0, 0, 0, 0.41);
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ overflow: hidden;
+ position: relative;
+
+ &.clickable {
+ cursor: pointer;
+ }
+
+ &:hover {
+ background-color: rgba(0, 0, 0, 0.61);
+ }
+
+}
diff --git a/src/files-ui/components/loader/LoaderContainer/LoaderContainer.tsx b/src/files-ui/components/loader/LoaderContainer/LoaderContainer.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..ad14be960b9998c935e645ecf1b75bcc0dce1550
--- /dev/null
+++ b/src/files-ui/components/loader/LoaderContainer/LoaderContainer.tsx
@@ -0,0 +1,28 @@
+import * as React from "react";
+import { LoaderContainerProps } from "./LoaderContainerProps";
+import "./LoaderContainer.scss";
+import { parseSize } from "../../icons/utils/utils";
+const LoaderContainer: React.FC<LoaderContainerProps> = (
+ props: LoaderContainerProps
+) => {
+ const { children, className, style, size, onClick } = props;
+ const finalSize = size ? parseSize(size) : undefined;
+ //const isClickable = onClick !== undefined;
+ const finalClassName: string = onClick
+ ? "files-ui-loader-container clickable"
+ : "files-ui-loader-container";
+
+ const handleClick = () => {
+ onClick?.();
+ };
+ return (
+ <div
+ onClick={handleClick}
+ className={className ? `${finalClassName} ${className}` : finalClassName}
+ style={{ ...style, height: finalSize, width: finalSize }}
+ >
+ {children}
+ </div>
+ );
+};
+export default LoaderContainer;
diff --git a/src/files-ui/components/loader/LoaderContainer/LoaderContainerProps.ts b/src/files-ui/components/loader/LoaderContainer/LoaderContainerProps.ts
new file mode 100644
index 0000000000000000000000000000000000000000..22c71e0981df8ecba3c5db988502ebab22c4c505
--- /dev/null
+++ b/src/files-ui/components/loader/LoaderContainer/LoaderContainerProps.ts
@@ -0,0 +1,12 @@
+import { OverridableComponentProps } from "../../overridable";
+
+export interface LoaderContainerPropsMap extends OverridableComponentProps {
+ size?: "micro" | "small" | "semi-medium" | "medium" | "large" | number;
+ onClick?: Function;
+ text?:string;
+}
+
+export type LoaderContainerProps = {
+ [F in keyof LoaderContainerPropsMap]: LoaderContainerPropsMap[F]
+}
+
diff --git a/src/files-ui/components/loader/LoaderProps.ts b/src/files-ui/components/loader/LoaderProps.ts
new file mode 100644
index 0000000000000000000000000000000000000000..47df2aeea93968aaed2f5793f8cceea52da5165f
--- /dev/null
+++ b/src/files-ui/components/loader/LoaderProps.ts
@@ -0,0 +1,6 @@
+export interface LoaderProps {
+ radius?: number;
+ x?: number;
+ y?: number;
+ width?: number;
+}
\ No newline at end of file
diff --git a/src/files-ui/components/loader/index.ts b/src/files-ui/components/loader/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..0d7d0c9b11f4f01f8b6a975d7235d44a15273f16
--- /dev/null
+++ b/src/files-ui/components/loader/index.ts
@@ -0,0 +1,8 @@
+export { default as DynamicLoader } from "./DynamicLoader/DynamicLoader";
+export * from "./DynamicLoader/DynamicLoader";
+
+export { default as BasePreparingLoader } from "./BasePreparingLoader/BasePreparingLoader";
+export * from "./BasePreparingLoader/BasePreparingLoader";
+
+export { default as DefaultLoader } from "./DefaultLoader/DefaultLoader";
+export * from "./DefaultLoader/DefaultLoader";
\ No newline at end of file
diff --git a/src/files-ui/components/material-button/MaterialButton.scss b/src/files-ui/components/material-button/MaterialButton.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e7ff8b85744477ce6b8d39af52743d4d8167dfd8
--- /dev/null
+++ b/src/files-ui/components/material-button/MaterialButton.scss
@@ -0,0 +1,104 @@
+.material-button-root {
+ border: 0;
+ cursor: pointer;
+ display: inline-flex;
+ outline: 0;
+ position: relative;
+ align-items: center;
+ vertical-align: middle;
+ justify-content: center;
+ text-decoration: none;
+ text-transform: none;
+ color: white;
+}
+
+.material-button {
+ //padding: 15rem 5rem;
+ transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+ box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+ border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+
+ overflow: hidden;
+ //transition: background 400ms;
+ min-width: 64px;
+ box-sizing: border-box;
+ border-radius: 4px;
+
+ font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+ font-size: 0.875rem;
+ font-weight: 500;
+ line-height: 1.75;
+ letter-spacing: 0.02857em;
+}
+
+.material-button.uppercase {
+ text-transform: uppercase;
+}
+.material-button.lowercase {
+ text-transform: lowercase;
+}
+.material-button.capitalize {
+ text-transform: capitalize;
+}
+.material-button.contained {
+ padding: 6px 16px;
+ box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
+ 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
+}
+.material-button.outlined {
+ padding: 5px 15px;
+}
+.material-button.text {
+ padding: 5px 15px;
+}
+.material-button-root.contained:hover {
+ box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2),
+ 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
+}
+
+.material-button span.material-button-label {
+ width: 100%;
+ display: inherit;
+ align-items: inherit;
+ justify-content: inherit;
+}
+
+span.ripple {
+ position: absolute;
+ border-radius: 50%;
+ transform: scale(0);
+ animation: ripple 500ms linear;
+ background-color: rgba(255, 255, 255, 0.7);
+}
+
+@keyframes ripple {
+ to {
+ transform: scale(4);
+ opacity: 0;
+ }
+}
+
+.material-button-root.disabled {
+ box-shadow: none;
+ cursor: default;
+ pointer-events: none;
+ background-color: rgba(0, 0, 0, 0.12);
+ color: rgba(0, 0, 0, 0.26);
+ padding: 6px 16px;
+}
+
+//mobile
+@media screen and (max-width: 600px) {
+ .material-button {
+ min-width: 30px;
+ font-size: 0.78rem;
+ line-height: 1.5;
+ letter-spacing: 0.025em;
+ }
+ .material-button.contained {
+ padding: 4px 13px;
+ }
+ .material-button.outlined {
+ padding: 4px 12px;
+ }
+}
diff --git a/src/files-ui/components/material-button/MaterialButton.tsx b/src/files-ui/components/material-button/MaterialButton.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..bd00289106bb7a0d26e22e2a7144941eb693e345
--- /dev/null
+++ b/src/files-ui/components/material-button/MaterialButton.tsx
@@ -0,0 +1,63 @@
+import * as React from "react";
+import useMaterialButtonClassName from "./hooks/useMaterialButtonClassName";
+import { MaterialButtonProps } from "./MaterialButtonProps";
+import MaterialButtonStyleManager from "./utils/MaterialButtonStyleManager";
+import "./MaterialButton.scss";
+import { createRippleButton } from "../../core";
+
+
+const MaterialButton: React.FC<MaterialButtonProps> = (
+ props: MaterialButtonProps
+) => {
+ const {
+ disabled,
+ href,
+ textDecoration,
+ variant = "contained",
+ color = "#1976d2",
+ textColor ="white",
+ children,
+ className,
+ style,
+ onClick,
+ resetStyles,
+ } = props;
+
+ const idClassName = React.useId();
+
+ const materialButtonClassName: string | undefined =
+ useMaterialButtonClassName(
+ variant,
+ disabled,
+ color,
+ textColor,
+ textDecoration,
+ className,
+ idClassName.replaceAll(":",""),
+ resetStyles
+ );
+
+ function handleClick<T extends HTMLAnchorElement | HTMLButtonElement>(
+ e: React.MouseEvent<T, MouseEvent>
+ ): void {
+ e.preventDefault();
+
+
+ //ripple
+ createRippleButton(e, variant as string, color as string);
+
+ onClick?.(e as React.MouseEvent<HTMLButtonElement, MouseEvent>);
+ }
+ if (materialButtonClassName!==undefined || resetStyles)
+ return React.createElement(href ? "a" : "button", {
+ className: resetStyles && className ? className : materialButtonClassName,
+ "data-testid": href ? "dui-anchor" : "dui-button",
+ onClick: handleClick,
+ href: href,
+ style: style,
+ children: <span className="material-button-label">{children}</span>,
+ disabled: disabled,
+ });
+ else return <React.Fragment>loading styes</React.Fragment>;
+};
+export default MaterialButton;
diff --git a/src/files-ui/components/material-button/MaterialButtonProps.ts b/src/files-ui/components/material-button/MaterialButtonProps.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b54401995e8de5a1e6e59e8e6dcbc6b35270cf82
--- /dev/null
+++ b/src/files-ui/components/material-button/MaterialButtonProps.ts
@@ -0,0 +1,51 @@
+import { OverridableComponentProps } from "../overridable";
+
+interface MaterialButtonPropsInterface extends OverridableComponentProps {
+ /////// BUTTON props
+ /**
+ * The URL to link to when the button is clicked.
+ * If defined, an `<a></a>` element will be used as the root node.
+ * @default undefined
+ */
+ href?: string;
+ /**
+ * - uppercase: convert label to upper case
+ * - capitalize: convert first letter of each word on label to upper case
+ * - lowercase: convert label to lower case
+ * - none: no text decoration
+ * @default 'uppercase'
+ */
+ textDecoration?: "uppercase" | "capitalize" | "lowercase" | "none";
+ /**
+ * The type of style that will be rendered.
+ * - contained: with background color
+ * - outlined: border and transparent backgorund, on hover background color takes the color
+ * - text: no borders and no background color, on hover
+ * @default 'contained'
+ */
+ variant?: "text" | "outlined" | "contained";
+ /**
+ * The label to place when no files are selected
+ */
+ label?: string;
+ /**
+ * If `true`, the component is disabled.
+ * @default false
+ */
+ disabled?: boolean;
+
+ resetStyles?:boolean;
+
+}
+type DefButtonProps = React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
+
+export type MaterialButtonProps =
+ {
+ [F in keyof MaterialButtonPropsInterface]:
+ MaterialButtonPropsInterface[F]
+ }
+ &
+ { [K in keyof DefButtonProps]:
+ DefButtonProps[K]
+ }
+
diff --git a/src/files-ui/components/material-button/hooks/useMaterialButtonClassName.ts b/src/files-ui/components/material-button/hooks/useMaterialButtonClassName.ts
new file mode 100644
index 0000000000000000000000000000000000000000..4c6a82f578ee941b1e99b1d157b512f87d73fb4e
--- /dev/null
+++ b/src/files-ui/components/material-button/hooks/useMaterialButtonClassName.ts
@@ -0,0 +1,117 @@
+import { DynamicSheet, DynamiCSS } from "@dynamicss/dynamicss";
+import * as React from "react";
+import InputButtonStyleManager from "../utils/MaterialButtonStyleManager";
+
+const useMaterialButtonClassName = (
+ variant?: "contained" | "text" | "outlined",
+ disabled?: boolean,
+ color?: string,
+ textColor?: string,
+ textDecoration?: "uppercase" | "capitalize" | "lowercase" | "none",
+ className?: string,
+ idClassName?: number | string,
+ resetStyles?: boolean
+): string | undefined => {
+
+ const baseClassName: string = "material-button-root material-button";
+
+
+
+ const [idStyles, setIdStyles] = React.useState<string>("");
+ const [styleInjected, setStyleInjected] = React.useState<boolean>(false);
+ const [finalClassName, setFinalClassName] = React.useState<string | undefined>(undefined);
+
+
+ //const [nextClassName, setNextClassName] = React.useState<number>(0);
+
+
+
+
+ const handleInserStyle = (
+ idClassName: number | string | undefined,
+ variant?: "contained" | "text" | "outlined",
+ disabled?: boolean,
+ color?: string,
+ textDecoration?: "uppercase" | "capitalize" | "lowercase" | "none",
+ textColor?: string,
+ ) => {
+ let finalClassName: string = baseClassName;
+
+ let styleSheet: DynamicSheet = InputButtonStyleManager.makeDynamicStyle(
+ idClassName,
+ variant,
+ disabled,
+ color,
+ textColor,
+ // textDecoration
+ );
+
+ let idStyle: string = "";
+ if (!styleInjected) {
+ idStyle = DynamiCSS.insertStyleSheet(styleSheet);
+ console.log("DynamiCSS insert", idStyle);
+ setIdStyles(idStyle);
+ if (idStyle !== "")
+ setStyleInjected(true);
+ } else {
+ //already a stylesheet associated
+ DynamiCSS.editStyleSheet(idStyles, styleSheet.sheetRules || []);
+ console.log("DynamiCSS edit", idStyle);
+
+ }
+
+
+ //let finalClassName = `material-button-root material-button `;
+ if (!disabled) {
+ //finalClassName += `${variant} ${variant}-${nextClassName}`;
+ finalClassName += ` ${variant} ${variant}-${idClassName}`;
+ } else {
+ finalClassName += ` disabled`;
+ }
+ //classname to override styles in stylesheet
+ if (className && className.length > 0) {
+ finalClassName += ` ${className}`;
+ }
+ //some text in className
+ if (textDecoration) {
+ const finalTextDecoration: string =
+ textDecoration &&
+ ["uppercase", "capitalize", "lowercase", "none"].includes(textDecoration?.toLowerCase()) ? textDecoration.toLowerCase() : "uppercase";
+ finalClassName += ` ${finalTextDecoration}`;
+ }
+ setFinalClassName(finalClassName);
+ };
+
+
+
+ React.useEffect(() => {
+ if (!resetStyles)
+ handleInserStyle(idClassName, variant, disabled, color, textDecoration, textColor);
+
+ // eslint-disable-next-line
+ }, [variant, disabled, color, textDecoration, textColor, className, idClassName, resetStyles]);
+
+
+ const removeStyle = (styleInjected: boolean, idStyles: string) => {
+ //console.log("DynamiCSS removing", styleInjected, idStyles);
+ if (styleInjected) {
+ const res = DynamiCSS.removeStyleSheet(idStyles);
+ //console.log("DynamiCSS removing res", res);
+
+ setStyleInjected(false);
+ setIdStyles("");
+ }
+ };
+
+ React.useEffect(() => {
+ return () => removeStyle(styleInjected, idStyles);
+ // eslint-disable-next-line
+ }, [styleInjected, idStyles]);
+
+
+ return finalClassName;
+}
+export default useMaterialButtonClassName;
+
+
+
diff --git a/src/files-ui/components/material-button/index.ts b/src/files-ui/components/material-button/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..02c31511c38bfe3b39122a11a22ab700b63bfba3
--- /dev/null
+++ b/src/files-ui/components/material-button/index.ts
@@ -0,0 +1,3 @@
+
+export { default as MaterialButton } from "./MaterialButton";
+export * from "./MaterialButton";
\ No newline at end of file
diff --git a/src/files-ui/components/material-button/utils/MaterialButtonStyleManager.ts b/src/files-ui/components/material-button/utils/MaterialButtonStyleManager.ts
new file mode 100644
index 0000000000000000000000000000000000000000..cc2d8376780737149309726bc859923400956b92
--- /dev/null
+++ b/src/files-ui/components/material-button/utils/MaterialButtonStyleManager.ts
@@ -0,0 +1,118 @@
+import { asureColor, colourNameToHex, darkerColor, hexColorToRGB } from "../../../core";
+import { DynamicSheet, DynamicSheetRule } from "@dynamicss/dynamicss";
+
+export default class MaterialButtonStyleManager {
+ static nextButtonClassNameNumber = 0;
+ /**
+ * Increases the count and retrieves the next number
+ * @returns the next static number in styles
+ */
+ static getNextId(): number {
+ MaterialButtonStyleManager.nextButtonClassNameNumber++;
+ console.log("Id called " + MaterialButtonStyleManager.nextButtonClassNameNumber);
+ return MaterialButtonStyleManager.nextButtonClassNameNumber;
+ }
+ /**
+ *
+ * @param idClassName identifyer
+ * @param variant the variant of the button
+ * @param disabled disabled prop
+ * @param color the theme color
+ * @param textColor the text color
+ * @returns a DynamicSheet
+ */
+ static makeDynamicStyle = (
+ idClassName: number | string | undefined,
+ variant?: string,
+ disabled?: boolean,
+ color?: string,
+ textColor?: string,
+ //textDecoration?: string
+ //nextClassName?: number
+ ): DynamicSheet => {
+ //([{ variant, disabled, color, textColor, nextClassName }]);
+ let styleSheet: DynamicSheet = {
+ id: `material-button-styles-${idClassName}`,
+ // id: `dui-button-styles`,
+ sheetRules: [
+ {
+ className: `material-button.${variant}-${idClassName}`,
+ //className: `dui-button.${variant}`,
+ rules: {},
+ },
+ {
+ className: `material-button-root.${variant}-${idClassName}`,
+ // className: `dui-button-root.${variant}`,
+ rules: {},
+ }
+ ],
+ };
+ let sheetRules: DynamicSheetRule[] = styleSheet.sheetRules as DynamicSheetRule[];
+
+
+ if (!disabled) {
+ switch (variant) {
+ case "contained":
+ sheetRules[0].rules = {
+ color: asureColor(colourNameToHex(textColor)),
+ backgroundColor: hexColorToRGB(
+ asureColor(colourNameToHex(color)),
+ 1
+ ),
+ //textDecoration: finalTextDecoration
+ };
+ sheetRules[1].rules = {
+ ":hover": {
+ backgroundColor: darkerColor(
+ hexColorToRGB(
+ asureColor(colourNameToHex(color)),
+ 1
+ )
+ ),
+ },
+ };
+ break;
+ case "outlined":
+ sheetRules[0].rules = {
+ border: `1px solid ${hexColorToRGB(
+ asureColor(colourNameToHex(color)),
+ 0.5
+ )}`,
+ color: asureColor(colourNameToHex(color)),
+ backgroundColor: "transparent",
+ //textDecoration: finalTextDecoration
+ };
+ sheetRules[1].rules = {
+ ":hover": {
+ border: `1px solid ${hexColorToRGB(
+ asureColor(colourNameToHex(color)),
+ 1
+ )}`,
+ backgroundColor: hexColorToRGB(
+ asureColor(colourNameToHex(color)),
+ 0.085
+ ),
+ },
+ };
+ break;
+ case "text":
+ sheetRules[0].rules = {
+ color: asureColor(colourNameToHex(color)),
+ backgroundColor: "transparent",
+ //textDecoration: finalTextDecoration
+ };
+ sheetRules[1].rules = {
+ ":hover": {
+ backgroundColor: hexColorToRGB(
+ asureColor(colourNameToHex(color)),
+ 0.085
+ ),
+ },
+ };
+ break;
+ }
+ }
+ styleSheet.sheetRules = sheetRules;
+ return styleSheet;
+ }
+}
\ No newline at end of file
diff --git a/src/files-ui/components/overridable/OverridableComponentsProps.ts b/src/files-ui/components/overridable/OverridableComponentsProps.ts
new file mode 100644
index 0000000000000000000000000000000000000000..78149fe6e47d5d75e28bc5d0c0e9f7f61aefdca0
--- /dev/null
+++ b/src/files-ui/components/overridable/OverridableComponentsProps.ts
@@ -0,0 +1,30 @@
+/**
+ * Base props to override in all components
+ * and take advantage of the
+ * merging props characteristic
+ */
+export declare type OverridableComponentProps = {
+ /**
+ * The react node children
+ */
+ children?: React.ReactNode | string;
+ /**
+ * The in-line style object
+ */
+ style?: React.CSSProperties;
+ /**
+ * The classname to override the css styles
+ * in .css or .sass file instead of using in-line styles
+ */
+ className?: string;
+ /**
+ * the color theme
+ * in somecases is the background-color
+ * in others is the text-color
+ */
+ color?: string;
+ /**
+ * The color of the text
+ */
+ textColor?: string;
+};
\ No newline at end of file
diff --git a/src/files-ui/components/overridable/index.ts b/src/files-ui/components/overridable/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f050671f7d8217a6bf363ab26d98654e63d6d5be
--- /dev/null
+++ b/src/files-ui/components/overridable/index.ts
@@ -0,0 +1,2 @@
+export { mergeProps } from "./mergeProps";
+export type { OverridableComponentProps } from "./OverridableComponentsProps"
\ No newline at end of file
diff --git a/src/files-ui/components/overridable/mergeProps.ts b/src/files-ui/components/overridable/mergeProps.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5b94ececdec01b58fe89fdc55326ed1509b02997
--- /dev/null
+++ b/src/files-ui/components/overridable/mergeProps.ts
@@ -0,0 +1,23 @@
+import { OverridableComponentProps } from "./OverridableComponentsProps";
+
+/**
+ * Merge props that come form user and those ones that are by default
+ * if incommingProps is null this returns the default props value
+ *
+ * @param incommingProps prop that comes from props attributoo of a React Node
+ * @param defaultProps default prop defined for that React Node
+ * @returns merged props
+ */
+ export function mergeProps<T extends OverridableComponentProps>
+ (incommingProps: T | undefined,
+ defaultProps: T): T {
+
+ if (!incommingProps) {
+ return defaultProps;
+ } else {
+ return {
+ ...defaultProps, ...incommingProps
+ };
+ }
+}
+
diff --git a/src/files-ui/components/page-template/PageTemplate.tsx b/src/files-ui/components/page-template/PageTemplate.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..395de66754755dfc6796b5be4615efbce0b8194b
--- /dev/null
+++ b/src/files-ui/components/page-template/PageTemplate.tsx
@@ -0,0 +1,11 @@
+import * as React from "react";
+import { PageTemplateProps } from "./PageTemplateProps";
+
+const PageTemplate:React.FC<PageTemplateProps> = (props:PageTemplateProps) =>{
+ return(
+ <div>
+
+ </div>
+ )
+}
+export default PageTemplate;
\ No newline at end of file
diff --git a/src/files-ui/components/page-template/PageTemplateProps.ts b/src/files-ui/components/page-template/PageTemplateProps.ts
new file mode 100644
index 0000000000000000000000000000000000000000..55eb9a35ee190ed169e49cbb60d2854b91a82316
--- /dev/null
+++ b/src/files-ui/components/page-template/PageTemplateProps.ts
@@ -0,0 +1,3 @@
+export interface PageTemplateProps{
+
+}
\ No newline at end of file
diff --git a/src/files-ui/components/previews/FullScreen/FullScreen.scss b/src/files-ui/components/previews/FullScreen/FullScreen.scss
new file mode 100644
index 0000000000000000000000000000000000000000..584d77b0591deee1caf96105425a1cb4a8b41591
--- /dev/null
+++ b/src/files-ui/components/previews/FullScreen/FullScreen.scss
@@ -0,0 +1,43 @@
+.fui-fullscreen-container {
+ position: fixed;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 100%;
+ height: 100%;
+ top: 0;
+ left: 0;
+ background: rgba(0, 0, 0, 0.734);
+ transform: translate(100%);
+ transition: transform 0.2s ease-in-out;
+ margin: 0 !important;
+ &.show-fs {
+ transform: translate(0);
+ }
+ z-index: 4;
+}
+
+.fui-fullscreen-relative-container {
+ position: relative;
+ //overflow: hidden;
+ height: 80%;
+ //width: 60%;
+ width: 80%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ /* @media (max-width: 600px) {
+ width: 80%;
+ height: auto;
+ }
+ @media (max-width: 960px) {
+ width: 90%;
+ height: auto;
+ } */
+}
+
+.button-full-screen {
+ top: 0;
+ right: 0;
+ position: absolute;
+}
diff --git a/src/files-ui/components/previews/FullScreen/FullScreen.tsx b/src/files-ui/components/previews/FullScreen/FullScreen.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..67d259f18f2cac7f393639defa1cf7d4dbfd3648
--- /dev/null
+++ b/src/files-ui/components/previews/FullScreen/FullScreen.tsx
@@ -0,0 +1,45 @@
+import * as React from "react";
+import { Cancel } from "../../icons";
+import { FullScreenProps } from "./FullScreenProps";
+import "./FullScreen.scss";
+const FullScreen: React.FC<FullScreenProps> = (props: FullScreenProps) => {
+
+ const { open, onClose, children } = props;
+
+ function handleClose<T extends HTMLDivElement>(
+ e: React.MouseEvent<T, MouseEvent>
+ ): void {
+ //avoid children to trigger onClick ripple from parent
+ e.stopPropagation();
+ onClose?.();
+ }
+
+ return (
+ <div
+ className={
+ open ? "fui-fullscreen-container show-fs" : "fui-fullscreen-container"
+ }
+ onClick={handleClose}
+ >
+ {open && (
+ <div
+ className="fui-fullscreen-relative-container"
+ onClick={(evt) => {
+ evt.preventDefault();
+ }}
+ >
+ {children}
+ {onClose && (
+ <Cancel
+ color="rgba(255,255,255,0.8)"
+ onClick={handleClose}
+ colorFill="black"
+ className="button-full-screen"
+ />
+ )}
+ </div>
+ )}
+ </div>
+ );
+};
+export default FullScreen;
diff --git a/src/files-ui/components/previews/FullScreen/FullScreenProps.ts b/src/files-ui/components/previews/FullScreen/FullScreenProps.ts
new file mode 100644
index 0000000000000000000000000000000000000000..76712241f2713cc90bfaffd2e2a94d8e23136f61
--- /dev/null
+++ b/src/files-ui/components/previews/FullScreen/FullScreenProps.ts
@@ -0,0 +1,18 @@
+import { OverridableComponentProps } from "../../overridable";
+
+
+export interface FullScreenPropsMap extends OverridableComponentProps {
+ /**
+ * boolean value. Whether to open the preview or not
+ */
+ open?: boolean;
+ /**
+ * handler for on Close operation
+ */
+ onClose?: Function;
+}
+
+export type FullScreenProps =
+ {
+ [F in keyof FullScreenPropsMap]: FullScreenPropsMap[F]
+ }
\ No newline at end of file
diff --git a/src/files-ui/components/previews/ImagePreview/ImagePreview.scss b/src/files-ui/components/previews/ImagePreview/ImagePreview.scss
new file mode 100644
index 0000000000000000000000000000000000000000..99b209489bb9d2fe6aa3365e9f01c3091ba40b59
--- /dev/null
+++ b/src/files-ui/components/previews/ImagePreview/ImagePreview.scss
@@ -0,0 +1,5 @@
+.fui-image-preview {
+ position: relative;
+ border-radius: 10px;
+ //transition: transform 0.3s 0.2s;
+}
diff --git a/src/files-ui/components/previews/ImagePreview/ImagePreview.tsx b/src/files-ui/components/previews/ImagePreview/ImagePreview.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..6dd35bb141f451d23e7c7b965defa07c1565d2d5
--- /dev/null
+++ b/src/files-ui/components/previews/ImagePreview/ImagePreview.tsx
@@ -0,0 +1,84 @@
+import * as React from "react";
+import {
+ ImagePreviewDefaultProps,
+ ImagePreviewProps,
+} from "./ImagePreviewProps";
+import { mergeProps } from "../../overridable";
+import { getImageOrientation, readAsDataURL } from "../../../core";
+
+import "./ImagePreview.scss";
+
+const ImagePreview: React.FC<ImagePreviewProps> = (
+ props: ImagePreviewProps
+) => {
+ const { src, alt, className, style, width, height, onError } = mergeProps(
+ props,
+ ImagePreviewDefaultProps
+ );
+
+ //console.table({ src, alt, className, style, width, height });
+ const [source, setSource] = React.useState<string | undefined>(undefined);
+ const [orientation, setOrientation] = React.useState<
+ "landscape" | "portrait" | undefined
+ >(undefined);
+
+ const getSource = async (src: File): Promise<void> => {
+ const newImageSrc: string | undefined = await readAsDataURL(src);
+ handleSetStrSource(newImageSrc);
+ };
+ const handleSetStrSource = async (imageSource: string | undefined) => {
+ if (imageSource) {
+ const orientation: "landscape" | "portrait" = await getImageOrientation(
+ imageSource
+ );
+ setOrientation(orientation);
+ }
+ setSource(imageSource);
+ };
+ React.useEffect(() => {
+ //if not undefined
+ if (!src) {
+ return;
+ }
+ //console.log("ImagePreview There is source :D");
+
+ if (typeof src === "string") {
+ //if a url string is given, assign it directly
+ handleSetStrSource(src);
+ } else {
+ //if a File object is given, check if is a supported format and read it
+ const headerMime = src.type ? src.type.split("/")[0] : "octet";
+
+ if (headerMime === "image") {
+ //set the video source and create the uri string if is a supported video format
+ getSource(src);
+ }
+ }
+ }, [src]);
+ //console.log("ImagePreview", src, source);
+
+ const finalWidth: string | number | undefined =
+ width || (orientation === "landscape" ? "100%" : undefined);
+ const finalHeight: string | number | undefined =
+ height || (orientation === "portrait" ? "100%" : undefined);
+
+ return (
+ <React.Fragment>
+ {src && source && (
+ <img
+ style={style || {}}
+ onClick={(evt) => {
+ evt.preventDefault();
+ }}
+ width={finalWidth}
+ height={finalHeight}
+ src={source}
+ alt={alt}
+ className={className}
+ onError={onError}
+ />
+ )}
+ </React.Fragment>
+ );
+};
+export default ImagePreview;
diff --git a/src/files-ui/components/previews/ImagePreview/ImagePreviewProps.ts b/src/files-ui/components/previews/ImagePreview/ImagePreviewProps.ts
new file mode 100644
index 0000000000000000000000000000000000000000..dbcc9247e3ebb8f6300b3e4e0024955615ea7719
--- /dev/null
+++ b/src/files-ui/components/previews/ImagePreview/ImagePreviewProps.ts
@@ -0,0 +1,35 @@
+import { OverridableComponentProps } from "../../overridable";
+
+
+
+export interface ImagePreviewProps extends OverridableComponentProps {
+ /**
+ * Image source in string format (URL) or File Object (Will be read as URL)
+ */
+ src?: File | string;
+ /**
+ * Specifies an alternate text for the image, if the image for some reason cannot be displayed
+ */
+ alt?: string;
+ /**
+ * Height of the image preview.
+ * @default '100%'
+ */
+ height?: string;
+ /**
+ * Width of the image preview.
+ * @default '100%'
+ */
+ width?: string;
+ /**
+ * Fallback when the image is not loaded correctly
+ */
+ onError?: React.ReactEventHandler<HTMLImageElement> | undefined;
+
+}
+export const ImagePreviewDefaultProps: ImagePreviewProps = {
+ //width: "100%",
+ //height: "100%",
+ alt: "image-preview",
+ //className: "fui-image-preview"
+}
\ No newline at end of file
diff --git a/src/files-ui/components/previews/VideoPreview/VideoPreview.scss b/src/files-ui/components/previews/VideoPreview/VideoPreview.scss
new file mode 100644
index 0000000000000000000000000000000000000000..77ad92967d08fb10dbbd28c6a1405684db478b16
--- /dev/null
+++ b/src/files-ui/components/previews/VideoPreview/VideoPreview.scss
@@ -0,0 +1,5 @@
+.dui-video-preview {
+ position: relative;
+ border-radius: 10px;
+ transition: transform 0.3s 0.2s;
+}
diff --git a/src/files-ui/components/previews/VideoPreview/VideoPreview.tsx b/src/files-ui/components/previews/VideoPreview/VideoPreview.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..63d7dfcdb64f78f828c2085523f041d0244d29ce
--- /dev/null
+++ b/src/files-ui/components/previews/VideoPreview/VideoPreview.tsx
@@ -0,0 +1,67 @@
+import * as React from "react";
+import { VideoPreviewProps } from "./VideoPreviewProps";
+
+const VideoPreview: React.FC<VideoPreviewProps> = (
+ props: VideoPreviewProps
+) => {
+ const { videoSrc, /* autoPlay, controls, */style, className, ...others } = props;
+
+ const videoRef = React.useRef<HTMLVideoElement>(null);
+
+ const [source, setSource] = React.useState<string | undefined>(undefined);
+
+ React.useEffect(() => {
+ //if not undefined
+ if (!videoSrc) {
+ return;
+ }
+
+ if (typeof videoSrc === "string") {
+ //if a url string is given, assign it directly
+ setSource(videoSrc);
+ } else {
+ //if a File object is given, check if is a supported format
+ const headerMime = videoSrc.type ? videoSrc.type.split("/")[0] : "octet";
+ const tailMime = videoSrc.type ? videoSrc.type.split("/")[1] : "octet";
+
+ if (headerMime === "video" && ["mp4", "ogg", "webm"].includes(tailMime)) {
+ //set the video source and create the uri string if is a supported video format
+ const newVideoSrc = URL.createObjectURL(videoSrc);
+ setSource(newVideoSrc);
+ }
+ }
+ }, [videoSrc]);
+ React.useEffect(() => {
+ if (source && videoRef.current) {
+ videoRef.current.load();
+ }
+ }, [source]);
+
+ return (
+ <React.Fragment>
+ {videoSrc && source && (
+ <video
+ onClick={(evt) => {
+ evt.preventDefault();
+ }}
+ //onLoadedMetadata={handleLoaded}
+ id="files-ui-video"
+ //controls={controls}
+ ref={videoRef}
+ className={className || "dui-video-preview"}
+ //autoPlay={autoplay}
+ src={source}
+ //width={"100%"}
+ height={"100%"}
+ style={style}
+ {...others}
+ >
+ <source type="video/webm" />
+ <source type="video/ogg" />
+ <source type="video/mp4" />
+ </video>
+ )}
+ </React.Fragment>
+ );
+};
+export default VideoPreview;
diff --git a/src/files-ui/components/previews/VideoPreview/VideoPreviewProps.ts b/src/files-ui/components/previews/VideoPreview/VideoPreviewProps.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5f7ba752ef3007c137744f6307cdfa7a0a91e671
--- /dev/null
+++ b/src/files-ui/components/previews/VideoPreview/VideoPreviewProps.ts
@@ -0,0 +1,27 @@
+import { OverridableComponentProps } from "../../overridable";
+
+
+export interface VideoPreviewPropsMap extends OverridableComponentProps {
+ /**
+ * video source in string format or File object
+ * FileItemComponent returns this value in onWatch handler
+ */
+ videoSrc?: File | string;
+
+}
+
+
+type DefVideoProps = React.DetailedHTMLProps<React.VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>;
+
+
+export type VideoPreviewProps =
+ {
+ [F in keyof VideoPreviewPropsMap]:
+ VideoPreviewPropsMap[F]
+ }
+ &
+ { [K in keyof DefVideoProps]:
+ DefVideoProps[K]
+ }
+
+
diff --git a/src/files-ui/components/previews/index.ts b/src/files-ui/components/previews/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b61c885c07373328fd3a4e37e63ea0b8b973658b
--- /dev/null
+++ b/src/files-ui/components/previews/index.ts
@@ -0,0 +1,8 @@
+export { default as FullScreen } from "./FullScreen/FullScreen";
+export * from "./FullScreen/FullScreen";
+
+export { default as ImagePreview } from "./ImagePreview/ImagePreview";
+export * from "./ImagePreview/ImagePreview";
+
+export { default as VideoPreview } from "./VideoPreview/VideoPreview";
+export * from "./VideoPreview/VideoPreview";
\ No newline at end of file
diff --git a/src/files-ui/components/skeleton/FuiSkeleton.scss b/src/files-ui/components/skeleton/FuiSkeleton.scss
new file mode 100644
index 0000000000000000000000000000000000000000..804eda0c4cc98ad5befcc19e5bd358fedbfa667d
--- /dev/null
+++ b/src/files-ui/components/skeleton/FuiSkeleton.scss
@@ -0,0 +1,102 @@
+///// DUI SKELETON based on MUI SKELETON
+.fui-mui-skeleton {
+ background-color: rgba(0, 0, 0, 0.11);
+ border-radius: 6px;
+ &.circular {
+ border-radius: 50%;
+ }
+ &.wave {
+ display: block;
+ height: auto;
+ margin-top: 0px;
+ margin-bottom: 0px;
+ transform-origin: 0px 55% 0px;
+ position: relative;
+ overflow: hidden;
+ mask-image: -webkit-radial-gradient(white, black);
+ &::before {
+ content: " ";
+ }
+ &::after {
+ animation: 1.6s linear 0.5s infinite normal none running
+ fui-skeleton-wave-animation;
+ background: rgba(0, 0, 0, 0)
+ linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.04), transparent)
+ repeat scroll 0% 0%;
+ content: "";
+ position: absolute;
+ transform: translateX(-100%);
+ inset: 0px;
+ }
+ @-webkit-keyframes fui-skeleton-wave-animation {
+ 0% {
+ -webkit-transform: translateX(-100%);
+ -moz-transform: translateX(-100%);
+ -ms-transform: translateX(-100%);
+ transform: translateX(-100%);
+ }
+ 50% {
+ -webkit-transform: translateX(100%);
+ -moz-transform: translateX(100%);
+ -ms-transform: translateX(100%);
+ transform: translateX(100%);
+ }
+ 100% {
+ -webkit-transform: translateX(100%);
+ -moz-transform: translateX(100%);
+ -ms-transform: translateX(100%);
+ transform: translateX(100%);
+ }
+ }
+ @keyframes fui-skeleton-wave-animation {
+ 0% {
+ -webkit-transform: translateX(-100%);
+ -moz-transform: translateX(-100%);
+ -ms-transform: translateX(-100%);
+ transform: translateX(-100%);
+ }
+ 50% {
+ -webkit-transform: translateX(100%);
+ -moz-transform: translateX(100%);
+ -ms-transform: translateX(100%);
+ transform: translateX(100%);
+ }
+ 100% {
+ -webkit-transform: translateX(100%);
+ -moz-transform: translateX(100%);
+ -ms-transform: translateX(100%);
+ transform: translateX(100%);
+ }
+ }
+ }
+ &.pulse {
+ &::before {
+ content: " ";
+ }
+ animation: 1.5s ease-in-out 0.5s infinite normal none running
+ fui-skeleton-pulse-animation;
+ @-webkit-keyframes fui-skeleton-pulse-animation {
+ 0% {
+ opacity: 1;
+ }
+ 50% {
+ opacity: 0.4;
+ }
+ 100% {
+ opacity: 1;
+ }
+ }
+
+ @keyframes fui-skeleton-pulse-animation {
+ 0% {
+ opacity: 1;
+ }
+ 50% {
+ opacity: 0.4;
+ }
+ 100% {
+ opacity: 1;
+ }
+ }
+ }
+}
diff --git a/src/files-ui/components/skeleton/FuiSkeleton.tsx b/src/files-ui/components/skeleton/FuiSkeleton.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..c1c241a202c66284428ffcbf871c395c6dd433fe
--- /dev/null
+++ b/src/files-ui/components/skeleton/FuiSkeleton.tsx
@@ -0,0 +1,60 @@
+
+import * as React from "react";
+import { FuiSkeletonDefaultProps, FuiSkeletonProps } from "./FuiSkeletonProps";
+import "./FuiSkeleton.scss";
+import { mergeProps } from "../overridable";
+/**
+ * Fui Skeleton component inspired on Mui Skeleton component
+ *
+ * Demos:
+ *
+ * - [Skeleton Demo](https://mui.com/components/skeleton/)
+ *
+ * API:
+ *
+ * - [Skeleton API](https://mui.com/api/skeleton/)
+ */
+const DuiSkeleton: React.FC<FuiSkeletonProps> = (props: FuiSkeletonProps) => {
+ const { className, animation, variant, width, height, style } = mergeProps(
+ props,
+ FuiSkeletonDefaultProps
+ );
+ const [extendedClassName, setExtendedClassName] = React.useState<
+ string | undefined
+ >(undefined);
+
+ React.useEffect(() => {
+ let finalClassName: string = "";
+ if (animation || variant || className) {
+ finalClassName = " ";
+ }
+ // animation
+ if (animation) {
+ if (animation === "wave") {
+ finalClassName += " wave";
+ } else {
+ finalClassName += " pulse";
+ }
+ }
+
+ //variant
+ if (variant === "circular") {
+ finalClassName += " circular";
+ } else {
+ finalClassName += " rectangular";
+ }
+ if (className) {
+ finalClassName += " " + className;
+ }
+
+ setExtendedClassName(finalClassName);
+ }, [animation, variant, className]);
+
+ return (
+ <div
+ className={`fui-mui-skeleton${extendedClassName}`}
+ style={{ ...style, width: width, height: height }}
+ ></div>
+ );
+};
+export default DuiSkeleton;
diff --git a/src/files-ui/components/skeleton/FuiSkeletonProps.ts b/src/files-ui/components/skeleton/FuiSkeletonProps.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b8bed87a2943e8e7ccb842633840988f3f326271
--- /dev/null
+++ b/src/files-ui/components/skeleton/FuiSkeletonProps.ts
@@ -0,0 +1,39 @@
+import { OverridableComponentProps } from "../overridable";
+
+
+
+export interface FuiSkeletonPropsMap extends OverridableComponentProps {
+ /**
+ * The animation.
+ * If `false` the animation effect is disabled.
+ * @default 'pulse'
+ */
+ animation?: 'pulse' | 'wave' | false;
+ /**
+ * The type of content that will be rendered.
+ * @default 'rectangular'
+ */
+ variant?: 'rectangular' | 'circular';
+ /**
+ * Width of the skeleton.
+ */
+ width?: number | string;
+ /**
+ * Height of the skeleton.
+ */
+ height?: number | string;
+}
+
+export type FuiSkeletonProps = {
+ [S in keyof FuiSkeletonPropsMap]: FuiSkeletonPropsMap[S]
+}
+/**
+ * Dafult properties for Skeleton Component
+ */
+export const FuiSkeletonDefaultProps: FuiSkeletonProps = {
+ animation: "pulse",
+ variant: "rectangular",
+ width: "133px",
+ height: "133px"
+}
+
diff --git a/src/files-ui/components/tooltip/components/Tooltip.scss b/src/files-ui/components/tooltip/components/Tooltip.scss
new file mode 100644
index 0000000000000000000000000000000000000000..0b35afd6fde8c572c9f6a74493273959aae08cbe
--- /dev/null
+++ b/src/files-ui/components/tooltip/components/Tooltip.scss
@@ -0,0 +1,60 @@
+////////////////@at-root
+.files-ui-tooltip {
+ cursor: default;
+ position: relative;
+ //display: inline-block;
+ // border-bottom: 1px dotted black;
+ &:hover {
+ z-index: 2;
+ .files-ui-tooltiptext {
+ visibility: visible;
+ opacity: 1;
+ z-index: 2;
+ }
+ }
+ .files-ui-tooltiptext {
+ box-sizing: border-box;
+ font-family: "Poppins", sans-serif;
+
+ font-size: 0.8rem;
+ font-weight: 400;
+ visibility: hidden;
+ width: 132px;
+ // background-color: green;
+ color: #fff;
+ text-align: center;
+ border-radius: 6px;
+ padding: 2px 2px;
+ position: absolute;
+ z-index: 2;
+ left: 0;
+
+ // Fade in tooltip - takes 1 second to go from 0% to 100% opac:
+ opacity: 0;
+ transition: opacity 1s;
+
+ &.not-valid-error {
+ background: linear-gradient(to top, #c62828, #d32f2f);
+ &::after {
+ border-color: transparent transparent #d32f2f transparent;
+ }
+ }
+ &.success {
+ //background-color: green;
+ background: linear-gradient(to top, #1b5e20, #2e7d32);
+ &::after {
+ border-color: transparent transparent #2e7d32 transparent;
+ }
+ }
+ &::after {
+ content: "";
+ position: absolute;
+ bottom: 100%;
+ left: 50%;
+ margin-left: -5px;
+ border-width: 5px;
+ border-style: solid;
+ //border-color: transparent transparent green transparent;
+ }
+ }
+}
diff --git a/src/files-ui/components/tooltip/components/Tooltip.tsx b/src/files-ui/components/tooltip/components/Tooltip.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..5a30a3ec98613b15042b4a356e45dc063bdd7f3c
--- /dev/null
+++ b/src/files-ui/components/tooltip/components/Tooltip.tsx
@@ -0,0 +1,69 @@
+import * as React from "react";
+import { TooltipProps } from "./TooltipProps";
+import "./Tooltip.scss";
+import { UPLOADSTATUS } from "../../../core";
+const Tooltip: React.FC<TooltipProps> = (props: TooltipProps) => {
+ const {
+ //message,
+ //style,
+ //children,
+ //color,
+ uploadStatus,
+ valid,
+ errors,
+ //className,
+ uploadMessage,
+ open,
+ } = props;
+ /* console.log("ToolTip");
+ console.table(props); */
+ const [statusClassName, setSatusClassName] = React.useState<
+ string | undefined
+ >(undefined);
+
+ const [message, setMessage] = React.useState<undefined | string>(undefined);
+
+ const handleChangeStatus = (
+ uploadStatus?: UPLOADSTATUS,
+ valid?: boolean | null
+ ) => {
+ //higher priority
+ if (uploadStatus !== undefined) {
+ setMessage(uploadMessage);
+ if (uploadStatus === "success") {
+ setSatusClassName("success");
+ } else {
+ setSatusClassName("not-valid-error");
+ }
+ } else {
+ if (valid !== undefined) {
+ if (!valid) {
+ setSatusClassName("not-valid-error");
+ setMessage(
+ errors
+ ? errors.reduce((acum: string, curr: string) => {
+ acum += `${curr}. `;
+ return acum;
+ }, "")
+ : ""
+ );
+ }
+ }
+ }
+ };
+ React.useEffect(() => {
+ handleChangeStatus(uploadStatus, valid);
+ // eslint-disable-next-line
+ }, [uploadStatus, valid]);
+
+ return (
+ <React.Fragment>
+ {open && message && statusClassName && (
+ <span className={`files-ui-tooltiptext ${statusClassName}`}>
+ {message}
+ </span>
+ )}
+ </React.Fragment>
+ );
+};
+export default Tooltip;
diff --git a/src/files-ui/components/tooltip/components/TooltipProps.ts b/src/files-ui/components/tooltip/components/TooltipProps.ts
new file mode 100644
index 0000000000000000000000000000000000000000..249cad13bff1690d25697185259b3f844c4775bd
--- /dev/null
+++ b/src/files-ui/components/tooltip/components/TooltipProps.ts
@@ -0,0 +1,30 @@
+import { UPLOADSTATUS } from "../../../core";
+import { OverridableComponentProps } from "../../overridable";
+
+export interface TooltipPropsMap extends OverridableComponentProps {
+ //message?: string;
+ uploadStatus?: UPLOADSTATUS;
+ /**
+ * whether to show a valid or rejected message ("ok", "rejected")
+ * by def. valid is false (if not present, it's false too)
+ * This value wil affect preview behaviour,
+ * If not valid, the preview will not be shown, nor the view button
+ */
+ valid?: boolean | null;
+ /**
+ * Whether to see as grid or inline (horizontal list)
+ */
+ errors?: string[];
+ /**
+* The message from server
+*/
+ uploadMessage?: string;
+ /**
+ * Whether to open or not the tooltip
+ */
+ open?: boolean;
+}
+
+export type TooltipProps = {
+ [T in keyof TooltipPropsMap]: TooltipPropsMap[T]
+}
\ No newline at end of file
diff --git a/src/files-ui/components/tooltip/index.ts b/src/files-ui/components/tooltip/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9542bdc0694e23cae689632f6a999298ae49402f
--- /dev/null
+++ b/src/files-ui/components/tooltip/index.ts
@@ -0,0 +1,2 @@
+export { default as Tooltip } from "./components/Tooltip";
+export * from "./components/Tooltip";
diff --git a/src/files-ui/core/color/colors.ts b/src/files-ui/core/color/colors.ts
new file mode 100644
index 0000000000000000000000000000000000000000..738dfbaa51bfa21e3d1dca845602bcd497dfa596
--- /dev/null
+++ b/src/files-ui/core/color/colors.ts
@@ -0,0 +1,216 @@
+import { NAMED_COLORS } from "./namedColors";
+
+/**
+ * Make the color into a darker color
+ * @param colorInput
+ * @returns the darked color in
+ */
+ export const darkerColor = (colorInput: string, percentage = 25): string => {
+ let darkedColor = "";
+ const reduce = (100 - percentage) / 100;
+ let component1: number = 0;
+ let component2: number = 0;
+ let component3: number = 0;
+ if (isHexColor(colourNameToHex(colorInput))) {
+
+ component1 = hexTodec(colorInput.charAt(1)) * 16 + hexTodec(colorInput.charAt(2));
+ component2 = hexTodec(colorInput.charAt(3)) * 16 + hexTodec(colorInput.charAt(4));
+ component3 = hexTodec(colorInput.charAt(5)) * 16 + hexTodec(colorInput.charAt(6));
+
+ darkedColor = `rgb(${component1 * reduce}, ${component2 * reduce},${component3 * reduce})`;
+ } else {
+ if (colorInput.includes("rgba")) {
+ let slicer = colorInput.replace("rgba(", "");
+ let components: string[] = slicer.split(",");
+ darkedColor = `rgb(${parseInt(components[0], 10) * reduce}, ${parseInt(components[1], 10) * reduce},${parseInt(components[2], 10) * reduce})`;
+ //return darkedColor;
+ } else if (colorInput.includes("rgb")) {
+
+ let slicer = colorInput.replace("rgb(", "");
+ let components: string[] = slicer.split(",");
+ darkedColor = `rgb(${parseInt(components[0], 10) * reduce}, ${parseInt(components[1], 10) * reduce},${parseInt(components[2], 10) * reduce})`;
+ // return darkedColor;
+ }
+ }
+
+ return darkedColor;
+}
+/**
+ * Make the color into a brighted color
+ * @param colorInput
+ * @returns the brighted color
+ */
+export const brighterColor = (colorInput: string, percentage = 25): string => {
+ let brightedColor = "";
+ const increase = (100 + percentage) / 100;
+ let component1: number = 0;
+ let component2: number = 0;
+ let component3: number = 0;
+ if (isHexColor(colourNameToHex(colorInput))) {
+
+ component1 = hexTodec(colorInput.charAt(1)) * 16 + hexTodec(colorInput.charAt(2));
+ component2 = hexTodec(colorInput.charAt(3)) * 16 + hexTodec(colorInput.charAt(4));
+ component3 = hexTodec(colorInput.charAt(5)) * 16 + hexTodec(colorInput.charAt(6));
+
+ brightedColor = `rgb(${component1 * increase}, ${component2 * increase},${component3 * increase})`;
+ } else {
+ if (colorInput.includes("rgba")) {
+ let slicer = colorInput.replace("rgba(", "");
+ let components: string[] = slicer.split(",");
+ brightedColor = `rgb(${parseInt(components[0], 10) * increase}, ${parseInt(components[1], 10) * increase},${parseInt(components[2], 10) * increase})`;
+ //return darkedColor;
+ } else if (colorInput.includes("rgb")) {
+
+ let slicer = colorInput.replace("rgb(", "");
+ let components: string[] = slicer.split(",");
+ brightedColor = `rgb(${parseInt(components[0], 10) * increase}, ${parseInt(components[1], 10) * increase},${parseInt(components[2], 10) * increase})`;
+ // return darkedColor;
+ }
+ }
+
+ return brightedColor;
+}
+
+/**
+ * In order to managae rgba() we convert hex colors into rgba()
+ * If the given color is already a rgb() color, it can add the percentage to convert it into rgba()
+ *
+ *
+ * @param colorInput color in hex or in rgb
+ * @param perc percentage for RGBA() color
+ * @returns the rgba representation of a hex color
+ */
+export const hexColorToRGB = (colorInput: string | undefined, perc = 0, defaultColor?: string): string => {
+ let resultDefault: string = defaultColor ? defaultColor : "rgba(255, 255, 255, 0.6)";
+ if (!colorInput) {
+ return resultDefault;
+ }
+ //work only in uppercase
+ const color: string = colorInput.toUpperCase();
+ // is already a rgba color
+ if (color.includes("RGBA")) {
+ return color;
+ }
+
+ //return rbg => rgba
+ if (color.includes("RGB")) {
+ return color.replace('RGB', `rgba`).replace(')', `, ${perc})`);
+ }
+
+ // if is a hex color or named color
+ if (!isHexColor(colourNameToHex(color))) {
+ return resultDefault;
+ }
+ let resultOk: string = "";
+ //let strVar: string = "";
+ let component1: number = 0;
+ let component2: number = 0;
+ let component3: number = 0;
+ //If passed all validations, proceed to transform
+ component1 = hexTodec(color.charAt(1)) * 16 + hexTodec(color.charAt(2));
+ component2 = hexTodec(color.charAt(3)) * 16 + hexTodec(color.charAt(4));
+ component3 = hexTodec(color.charAt(5)) * 16 + hexTodec(color.charAt(6));
+ resultOk = `rgba(${component1}, ${component2},${component3} , ${perc})`;
+ return resultOk;
+}
+
+/**
+ * Validates wheteher the color is hexadecimal css color
+ * Example: #FF56AC
+ *
+ *
+ * @param colorInput the color inpt to test
+ * @returns true if the inputColor is a hexadecimal css color
+ */
+export const isHexColor = (colorInput: string): boolean => {
+
+ // if first element is no '#' return default background color
+ if (colorInput.charAt(0) !== '#') {
+
+ return false;
+ }
+ // if color lenght is not exactly 7 return default
+ if (colorInput.length !== 7) {
+
+
+ return false;
+ }
+ // if one of the letters is not included in hex array return default
+ for (let i = 1; i < colorInput.length; i++) {
+ if (!hexArray.includes(colorInput.charAt(i))) {
+
+
+ return false;
+ }
+ }
+
+ return true;
+}
+
+/**
+ * Converts a named color into hexadecimal color
+ * from a list of well known namd colors if found.
+ * When not given returns a ""
+ * When not found in the list, returns the same value given
+ * @param colour the named color
+ * @returns The hex representation of the color or "" or the same color
+ */
+export function colourNameToHex(colour: string | undefined): string {
+ /**
+ * When not given
+ */
+ if (!colour) {
+ return "";
+ }
+ /**
+ * when named color is found
+ */
+ if (NAMED_COLORS[colour.toLocaleLowerCase()] !== undefined) {
+ return NAMED_COLORS[colour.toLocaleLowerCase()];
+ }
+ /**
+ * When the named color was not found
+ */
+
+ return colour;
+}
+
+/**
+ * hexArray & decArray
+ *
+ * arrays of numbers used to convert hexadecimal numbers into decimal and viceversa
+ */
+const hexArray = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F'];
+const decArray = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15];
+
+/**
+ * Converts hex number in string representation to decimal number
+ *
+ *
+ * @param letter the string hex number
+ * @returns a decimal number
+ */
+export const hexTodec = (letter: string): number => {
+ if (hexArray.includes(letter)) {
+ return decArray[hexArray.indexOf(letter)];
+ } else {
+ return 0;
+ }
+}
+
+
+/**
+ * Asure a base color. When not given or when given an incorrect color format
+ * default color is this kind of grey #5d6475
+ *
+ * @param color param color given by user
+ * @returns returns the same color
+ */
+ export const asureColor = (color?: string): string => {
+ if (color !== undefined && color !== "") {
+ return color;
+ } else {
+ return "#646c7f";
+ }
+}
+
diff --git a/src/files-ui/core/color/index.ts b/src/files-ui/core/color/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e7974729faf961a211c7b8939a3da9f60c19d043
--- /dev/null
+++ b/src/files-ui/core/color/index.ts
@@ -0,0 +1,10 @@
+export { NAMED_COLORS } from "./namedColors";
+export {
+ asureColor,
+ brighterColor,
+ colourNameToHex,
+ darkerColor,
+ hexColorToRGB,
+ hexTodec,
+ isHexColor
+} from "./colors";
\ No newline at end of file
diff --git a/src/files-ui/core/color/namedColors.ts b/src/files-ui/core/color/namedColors.ts
new file mode 100644
index 0000000000000000000000000000000000000000..853d40ba9460247cf3e8df8fda32167a1694ec4b
--- /dev/null
+++ b/src/files-ui/core/color/namedColors.ts
@@ -0,0 +1,162 @@
+import { NamedColor } from "../types/NamedColor";
+
+/**
+ * The full list of named Colors provided by
+ * https://htmlcolorcodes.com/es/nombres-de-los-colores/
+ */
+export const NAMED_COLORS: NamedColor =
+{
+ //RED
+ indianred: "#CD5C5C",
+ lightcoral: "#F08080",
+ salmon: "#FA8072",
+ darksalmon: "#E9967A",
+ lightsalmon: "#FFA07A",
+ crimson: "#DC143C",
+ red: "#FF0000",
+ firebrick: "#B22222",
+ darkred: "#8B0000",
+ //PINK
+ pink: "#FFC0CB",
+ lightpink: "#FFB6C1",
+ hotpink: "#FF69B4",
+ deeppink: "#FF1493",
+ mediumvioletred: "#C71585",
+ palevioletred: "#DB7093",
+ //ORANGE
+ //"lightsalmon: "#FFA07A",
+ coral: "#FF7F50",
+ tomato: "#FF6347",
+ orangered: "#FF4500",
+ darkorange: "#FF8C00",
+ orange: "#FFA500",
+ //YELLOW
+ gold: "#FFD700",
+ yellow: "#FFFF00",
+ lightyellow: "#FFFFE0",
+ lemonchiffon: "#FFFACD",
+ lightgoldenrodyellow: "#FAFAD2",
+ papayawhip: "#FFEFD5",
+ moccasin: "#FFE4B5",
+ peachpuff: "#FFDAB9",
+ palegoldenrod: "#EEE8AA",
+ khaki: "#F0E68C",
+ darkkhaki: "#BDB76B",
+ //PURPLE
+ lavender: "#E6E6FA",
+ thistle: "#D8BFD8",
+ plum: "#DDA0DD",
+ violet: "#EE82EE",
+ orchid: "#DA70D6",
+ fuchsia: "#FF00FF",
+ magenta: "#FF00FF",
+ mediumorchid: "#BA55D3",
+ mediumpurple: "#9370DB",
+ rebeccapurple: "#663399",
+ blueviolet: "#8A2BE2",
+ darkviolet: "#9400D3",
+ darkorchid: "#9932CC",
+ darkmagenta: "#8B008B",
+ purple: "#800080",
+ indigo: "#4B0082",
+ slateblue: "#6A5ACD",
+ darkslateblue: "#483D8B",
+ mediumslateblue: "#7B68EE",
+ //GREEN
+ greenyellow: "#ADFF2F",
+ chartreuse: "#7FFF00",
+ lawngreen: "#7CFC00",
+ lime: "#00FF00",
+ limegreen: "#32CD32",
+ palegreen: "#98FB98",
+ lightgreen: "#90EE90",
+ mediumspringgreen: "#00FA9A",
+ springgreen: "#00FF7F",
+ mediumseagreen: "#3CB371",
+ seagreen: "#2E8B57",
+ forestgreen: "#228B22",
+ green: "#008000",
+ darkgreen: "#006400",
+ yellowgreen: "#9ACD32",
+ olivedrab: "#6B8E23",
+ olive: "#808000",
+ darkolivegreen: "#556B2F",
+ mediumaquamarine: "#66CDAA",
+ darkseagreen: "#8FBC8B",
+ lightseagreen: "#20B2AA",
+ darkcyan: "#008B8B",
+ teal: "#008080",
+ //BLUE
+ aqua: "#00FFFF",
+ cyan: "#00FFFF",
+ lightcyan: "#E0FFFF",
+ paleturquoise: "#AFEEEE",
+ aquamarine: "#7FFFD4",
+ turquoise: "#40E0D0",
+ mediumturquoise: "#48D1CC",
+ darkturquoise: "#00CED1",
+ cadetblue: "#5F9EA0",
+ steelblue: "#4682B4",
+ lightsteelblue: "#B0C4DE",
+ powderblue: "#B0E0E6",
+ lightblue: "#ADD8E6",
+ skyblue: "#87CEEB",
+ lightskyblue: "#87CEFA",
+ deepskyblue: "#00BFFF",
+ dodgerblue: "#1E90FF",
+ cornflowerblue: "#6495ED",
+ //"mediumslateblue: "#7B68EE",
+ royalblue: "#4169E1",
+ blue: "#0000FF",
+ mediumblue: "#0000CD",
+ darkblue: "#00008B",
+ navy: "#000080",
+ midnightblue: "#191970",
+ //BROWN
+ cornsilk: "#FFF8DC",
+ blanchedalmond: "#FFEBCD",
+ bisque: "#FFE4C4",
+ navajowhite: "#FFDEAD",
+ wheat: "#F5DEB3",
+ burlywood: "#DEB887",
+ tan: "#D2B48C",
+ rosybrown: "#BC8F8F",
+ sandybrown: "#F4A460",
+ goldenrod: "#DAA520",
+ darkgoldenrod: "#B8860B",
+ peru: "#CD853F",
+ chocolate: "#D2691E",
+ saddlebrown: "#8B4513",
+ sienna: "#A0522D",
+ brown: "#A52A2A",
+ maroon: "#800000",
+ //WHITE
+ white: "#FFFFFF",
+ snow: "#FFFAFA",
+ honeydew: "#F0FFF0",
+ mintcream: "#F5FFFA",
+ azure: "#F0FFFF",
+ aliceblue: "#F0F8FF",
+ ghostwhite: "#F8F8FF",
+ whitesmoke: "#F5F5F5",
+ seashell: "#FFF5EE",
+ beige: "#F5F5DC",
+ oldlace: "#FDF5E6",
+ floralwhite: "#FFFAF0",
+ ivory: "#FFFFF0",
+ antiquewhite: "#FAEBD7",
+ linen: "#FAF0E6",
+ lavenderblush: "#FFF0F5",
+ mistyrose: "#FFE4E1",
+ //GREY
+ gainsboro: "#DCDCDC",
+ lightgray: "#D3D3D3",
+ silver: "#C0C0C0",
+ darkgray: "#A9A9A9",
+ gray: "#808080",
+ dimgray: "#696969",
+ lightslategray: "#778899",
+ slategray: "#708090",
+ darkslategray: "#2F4F4F",
+ black: "#000000"
+}
\ No newline at end of file
diff --git a/src/files-ui/core/file-manager/index.ts b/src/files-ui/core/file-manager/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f88618e87ced064023ee4f91b8464436a3154d09
--- /dev/null
+++ b/src/files-ui/core/file-manager/index.ts
@@ -0,0 +1 @@
+export { extFileReconcilation } from "./reconcilation";
\ No newline at end of file
diff --git a/src/files-ui/core/file-manager/reconcilation.ts b/src/files-ui/core/file-manager/reconcilation.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f9d939b2ac0d04887f99a7bc17b721090350e867
--- /dev/null
+++ b/src/files-ui/core/file-manager/reconcilation.ts
@@ -0,0 +1,48 @@
+import { ExtFile, ExtFileInstance, ExtFileManager } from "../types";
+
+export const extFileReconcilation = (
+ dropzoneId: number | string | undefined,
+ extFileIncomming: ExtFile[]
+): ExtFile[] | undefined => {
+ let result: ExtFile[] = [];
+
+ let arrOfExtFiles: ExtFileInstance[] | undefined =
+ ExtFileManager.getExtFileInstanceList(dropzoneId);
+
+ // continue only if arrOfExtFiles exists
+ if (arrOfExtFiles) {
+ //different sizes means there was deleted files
+ //also can be new files to be uploaded
+ //needed an extra flag to allow add files in the middle of uploading process
+ // if new files are added, they are added to the Manager
+ // outside they were already added to the UI
+ // inside Dropzone, will be needed a .next() method for manager
+
+ // 1st allow deleted files and ignore new ones
+ // reduce the arrOfExtFileInstances array
+ // parecido a listas ligadas, iterar hasta encontrar null XD
+ let incommingTemp: ExtFile[] = [...extFileIncomming];
+ incommingTemp = incommingTemp.filter(
+ (F) => arrOfExtFiles?.findIndex(I => I.id === F.id) === -1
+ );
+
+
+
+ //different sizes not allowed
+ if (arrOfExtFiles.length !== extFileIncomming.length || extFileIncomming.length === 0) {
+ return undefined;
+ }
+ for (let i = 0; i < arrOfExtFiles.length; i++) {
+ if (
+ (extFileIncomming[i].uploadStatus === undefined)
+ &&
+ (arrOfExtFiles[i].uploadStatus === "preparing")
+ ) {
+ console.log("useDropzoneFileListUpdater onCancel i", i);
+ arrOfExtFiles[i].uploadStatus = undefined;
+ }
+ }
+ }
+
+ return result;
+}
\ No newline at end of file
diff --git a/src/files-ui/core/index.ts b/src/files-ui/core/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b4651cefbfddab2cd265e3ed356edd25854b6f42
--- /dev/null
+++ b/src/files-ui/core/index.ts
@@ -0,0 +1,162 @@
+export {
+ DropzoneEnglish,
+ DropzoneFrench,
+ DropzoneItalian,
+ DropzoneLocalizer,
+ DropzoneLocalizerSelector,
+ DropzonePortuguese,
+ DropzoneRussian,
+ DropzoneSimplifiedChinese,
+ DropzoneSpanish,
+ DropzoneTraditionalChinese,
+ FileItemEnglish,
+ FileItemFrench,
+ FileItemItalian,
+ FileItemLocalizer,
+ FileItemLocalizerSelector,
+ FileItemPortuguese,
+ FileItemRussian,
+ FileItemSimplifiedChinese,
+ FileItemSpanish,
+ FileItemTraditionalChinese,
+ ValidateErrorEnglish,
+ ValidateErrorFrench,
+ ValidateErrorItalian,
+ ValidateErrorLocalizer,
+ ValidateErrorLocalizerSelector,
+ ValidateErrorPortuguese,
+ ValidateErrorRussian,
+ ValidateErrorSimplifiedChinese,
+ ValidateErrorSpanish,
+ ValidateErrorTraditionalChinese
+} from "./localization";
+
+export {
+ readAsArrayBuffer,
+ readAsBinaryString,
+ readAsDataURL,
+ readAsText,
+ resizeImage,
+ getImageOrientation
+} from "./reader";
+
+export {
+ aac, abw, accdb, avi, azw,
+ bmp, bz, bz2, cda,
+ csh, css, csv,
+ docx, drawio,
+ eot, epub,
+ freearc, gif, gzip,
+ html, icalendar,
+ jar, java, javascript, jpeg, json, jsonld,
+ midi, mp3, mp4, mpeg, mpkg,
+ octet, odp, ods, odt, oga, ogv, ogx, opus, otf,
+ pdf, php, png, pptx, psd, python,
+ rar, react, rtf,
+ sass, sevenzip, sh, swf,
+ tar, text, tiff, ttf, typescript,
+ vsd, vue,
+ wav, weba, webm, webp, wma, wmv, woff,
+ xlsx, xml, xul,
+ zip,
+ applicationSelector,
+ audioSelector,
+ checkIsCode,
+ extensionSelector,
+ fontSelector,
+ getURLFileIco,
+ imageSelector,
+ mimeSelector,
+ textSelector,
+ videoSelector,
+} from "./mime";
+
+export type {
+ ExtFile,
+ Behaviour,
+ CustomValidateFileResponse,
+ ComponentLocalizer,
+ ExtFileListMap,
+ FileValidatorProps,
+ FunctionLabel,
+ LocalLabels,
+ Localization,
+ Method,
+ NamedColor,
+ ServerResponse,
+ UploadPromiseResponse,
+ UploadResponse,
+ UploadConfig,
+ UPLOADSTATUS
+} from "./types";
+
+export {
+ //UPLOADSTATUS,
+ ExtFileInstance, ExtFileManager, extFileMock
+} from "./types"
+
+export {
+ FilesUIUpload, uploadPromiseXHR,
+ FuiUpload,
+ completeUploadResult,
+ instantPreparingToUploadOne,
+ preparingToUploadOne,
+ sleepTransition,
+ toUploadableExtFileList,
+ unableToUploadResult,
+ unexpectedErrorUploadResult,
+ uploadOnePromiseXHR,
+} from "./upload";
+
+export {
+ FileIdGenerator,
+ fileListToExtFileArray,
+ fileListToExtFileInstanceArray,
+ fileSizeFormater,
+ getExt,
+ handleClickInput,
+ handleClickUtil,
+ handleDragUtil,
+ handleDropUtil,
+ isValidateActive,
+ shrinkWord,
+ fakeFuiUpload,
+ prepToUploadOne,
+ setPrepToUploading,
+ sleepPreparing,
+ uploadOne,
+ uploadOneExtFile,
+ cleanInput, addClassName, getRandomInt
+} from "./utils";
+
+export {
+ fileListvalidator,
+ separateAccept,
+ validateAccept,
+ validateExtFile,
+ validateExtFileList,
+ validateFile
+} from "./validation";
+
+
+export { createFuiRippleFromDiv,createRippleButton } from "./ripple";
+
+export {
+ asureColor,
+ brighterColor,
+ colourNameToHex,
+ darkerColor,
+ hexColorToRGB,
+ hexTodec,
+ isHexColor,
+ NAMED_COLORS
+} from "./color";
+
+export {
+ SyntheticFile,
+ createListOfMultiTypeFile,
+ createSyntheticFile,
+ makeSyntheticExtFile
+} from "./synthetic-file";
+
+export { extFileReconcilation } from "./file-manager";
\ No newline at end of file
diff --git a/src/files-ui/core/localization/Chinese-simplified/localization.simplifiedChinese.ts b/src/files-ui/core/localization/Chinese-simplified/localization.simplifiedChinese.ts
new file mode 100644
index 0000000000000000000000000000000000000000..92cbf82733f8c917bdd809e916acb5c9f082fbd7
--- /dev/null
+++ b/src/files-ui/core/localization/Chinese-simplified/localization.simplifiedChinese.ts
@@ -0,0 +1,54 @@
+import { LocalLabels } from "../../types";
+import { fileSizeFormater } from "../../utils/fileSizeFormatter";
+
+/**
+ * English translation for Dropzone component
+ */
+export const DropzoneSimplifiedChinese: LocalLabels = {
+ defaultLabel: "将您的文件放在这里",
+ uploadingMessage: (amountOfFiles) => { return `ä¸Šä¼ ${amountOfFiles} 个文件`; },
+ uploadFinished: (uploaded, rejected) => `ä¸Šä¼ æ–‡ä»¶ï¼š${uploaded}，拒ç»æ–‡ä»¶ï¼š${rejected}`,
+ noFilesMessage: `没有缺少è¦åŠ 载的有效文件`,
+ footer: {
+ acceptAll: `接å—所有文件类型`,
+ acceptCustom: (accept) => `å…许的类型: ${accept}`
+ },
+ header: {
+ uploadFilesMessage: "ä¸Šä¼ æ–‡ä»¶",
+ maxSizeMessage: (maxFileSize) => `最大文件大å°ï¼š${maxFileSize}`,
+ validFilesMessage: (numberOfValidFiles, maxFiles) => `文档 ${numberOfValidFiles}/${maxFiles}`
+ },
+ fakeuploadsuccess: "文件已æˆåŠŸä¸Šä¼ ",
+ fakeUploadError: "ä¸Šä¼ æ—¶å‡ºé”™",
+}
+
+/**
+ * English translation for FileItem component
+ */
+export const FileItemSimplifiedChinese: LocalLabels = {
+ fullInfoLayer: {
+ name: `文档å称: `,
+ size: "尺寸: ",
+ type: "文件类型: "
+ },
+ status: {
+ preparing:"准备",
+ uploading: "ä¸Šä¼ ",
+ success: "æˆåŠŸ",
+ valid: "接å—的文件",
+ denied: "被拒ç»çš„文件",
+ error: "错误",
+ aborted:"ä¸æ¢"
+ },
+}
+
+/**
+ * English translation for Validation Errors
+ */
+export const ValidateErrorSimplifiedChinese: LocalLabels = {
+ maxSizeError: (maxSize) =>
+ `文件太大。 å…许的最大文件大å°ä¸º ${fileSizeFormater(maxSize as number)}`,
+ acceptError: `文件类型ä¸å…许`,
+ maxFileCount: (maxFiles) =>
+ `已达到最大文件数 (${maxFiles})`
+}
\ No newline at end of file
diff --git a/src/files-ui/core/localization/Chinese-traditional/localization.traditionalChinese.ts b/src/files-ui/core/localization/Chinese-traditional/localization.traditionalChinese.ts
new file mode 100644
index 0000000000000000000000000000000000000000..05b6ebe378a3fafef18dcd20a262e5c50a5b0614
--- /dev/null
+++ b/src/files-ui/core/localization/Chinese-traditional/localization.traditionalChinese.ts
@@ -0,0 +1,55 @@
+import { fileSizeFormater } from "../../utils/fileSizeFormatter";
+import { LocalLabels } from "../../types";
+
+
+/**
+ * English translation for Dropzone component
+ */
+export const DropzoneTraditionalChinese: LocalLabels = {
+ defaultLabel: "æŠŠä½ çš„æ–‡ä»¶æ”¾åœ¨é€™è£¡ ",
+ uploadingMessage: (amountOfFiles) => { return `上傳${amountOfFiles}個文件`; },
+ uploadFinished: (uploaded, rejected) => `上傳文件: ${uploaded}, 拒絕的文件：${rejected}`,
+ noFilesMessage: `沒有缺少è¦ä¸Šå‚³çš„有效文件`,
+ footer: {
+ acceptAll: `接å—所有文件類型`,
+ acceptCustom: (accept) => `å…許的類型：${accept}`
+ },
+ header: {
+ uploadFilesMessage: "上傳文件",
+ maxSizeMessage: (maxFileSize) => `最大文件大å°ï¼š${maxFileSize}`,
+ validFilesMessage: (numberOfValidFiles, maxFiles) => ` 文件 ${numberOfValidFiles}/${maxFiles}`
+ },
+ fakeuploadsuccess: "文件已æˆåŠŸä¸Šå‚³",
+ fakeUploadError: "上傳時出錯",
+}
+
+/**
+ * English translation for FileItem component
+ */
+export const FileItemTraditionalChinese: LocalLabels = {
+ fullInfoLayer: {
+ name: `文檔å稱: `,
+ size: "文件大å°: ",
+ type: "文件類型: "
+ },
+ status: {
+ preparing: "ä¸æ¢",
+ uploading: "上傳",
+ success: "æˆåŠŸ",
+ valid: "有效文件",
+ denied: "無效文件",
+ error: "錯誤",
+ aborted: "ä¸æ¢"
+ },
+}
+
+/**
+ * English translation for Validation Errors
+ */
+export const ValidateErrorTraditionalChinese: LocalLabels = {
+ maxSizeError: (maxSize) =>
+ `文件太大。 å…許的最大文件大å°ç‚º ${fileSizeFormater(maxSize as number)}`,
+ acceptError: `文件類型ä¸å…許`,
+ maxFileCount: (maxFiles) =>
+ `å·²é”到最大文件數 (${maxFiles})`
+}
\ No newline at end of file
diff --git a/src/files-ui/core/localization/English/localization.english.ts b/src/files-ui/core/localization/English/localization.english.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e2114d27392319ceae2578df782327d6dcc96460
--- /dev/null
+++ b/src/files-ui/core/localization/English/localization.english.ts
@@ -0,0 +1,54 @@
+import { fileSizeFormater } from "../../utils/fileSizeFormatter";
+import { LocalLabels } from "../../types";
+
+/**
+ * English translation for Dropzone component
+ */
+export const DropzoneEnglish: LocalLabels = {
+ defaultLabel: "Drop your files here",
+ uploadingMessage: (amountOfFiles) => { return `Uploading ${amountOfFiles} files`; },
+ uploadFinished: (uploaded, rejected) => `Uploaded files: ${uploaded}, Rejected files: ${rejected}`,
+ noFilesMessage: `There is no missing valid file to upload`,
+ footer: {
+ acceptAll: `All file types accepted`,
+ acceptCustom: (accept) => `Allowed types: ${accept}`
+ },
+ header: {
+ uploadFilesMessage: "Upload files",
+ maxSizeMessage: (maxFileSize) => `Max file size: ${maxFileSize}`,
+ validFilesMessage: (numberOfValidFiles, maxFiles) => `Files ${numberOfValidFiles}/${maxFiles}`
+ },
+ fakeuploadsuccess: "File was successfuly uploaded",
+ fakeUploadError: "Error on uploading. Please try again later.",
+}
+
+/**
+ * English translation for FileItem component
+ */
+export const FileItemEnglish: LocalLabels = {
+ fullInfoLayer: {
+ name: `Name: `,
+ size: "Size: ",
+ type: "Type: "
+ },
+ status: {
+ preparing:"Preparing",
+ uploading: "Uploading",
+ success: "Success",
+ valid: "Valid",
+ denied: "Not valid",
+ error: "Error",
+ aborted:"Aborted"
+ },
+}
+
+/**
+ * English translation for Validation Errors
+ */
+export const ValidateErrorEnglish: LocalLabels = {
+ maxSizeError: (maxSize) =>
+ `File is too big. Max file size allowed is ${fileSizeFormater(maxSize as number)}`,
+ acceptError: `File type is not allowed`,
+ maxFileCount: (maxFiles) =>
+ `Max amount of files (${maxFiles}) has been reached`
+}
\ No newline at end of file
diff --git a/src/files-ui/core/localization/FileItem.localization.ts b/src/files-ui/core/localization/FileItem.localization.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a2dd75ca1721136959aeaa02e7e5845351153de7
--- /dev/null
+++ b/src/files-ui/core/localization/FileItem.localization.ts
@@ -0,0 +1,39 @@
+import { FileItemRussian } from "./Russian/localization.russian";
+import { ComponentLocalizer, LocalLabels, Localization } from "../types";
+import { FileItemEnglish } from "./English/localization.english";
+import { FileItemFrench } from "./French/localization.french";
+import { FileItemPortuguese } from "./Portuguese/localization.portuguese";
+import { FileItemSpanish } from "./Spanish/localization.spanish";
+import { FileItemSimplifiedChinese } from "./Chinese-simplified/localization.simplifiedChinese";
+import { FileItemTraditionalChinese } from "./Chinese-traditional/localization.traditionalChinese";
+import { FileItemItalian } from "./Italian/localization.italian";
+
+export const FileItemLocalizer: ComponentLocalizer = {
+ "ES-es": FileItemSpanish,
+ "EN-en": FileItemEnglish,
+ "FR-fr": FileItemFrench,
+ "IT-it": FileItemItalian,
+ "PT-pt": FileItemPortuguese,
+ "RU-ru": FileItemRussian,
+ "ZH-cn": FileItemSimplifiedChinese,
+ "ZH-hk": FileItemTraditionalChinese
+}
+
+/**
+ * Secure translation through a selector
+ * @param local the Localization
+ * @returns a ComponentLocalizer object that contains the translation
+ */
+export const FileItemLocalizerSelector = (local?: Localization): LocalLabels => {
+ switch (local) {
+ case "ES-es": return FileItemLocalizer["ES-es"];
+ case "EN-en": return FileItemLocalizer["EN-en"];
+ case "FR-fr": return FileItemLocalizer["FR-fr"];
+ case "IT-it": return FileItemLocalizer["IT-it"];
+ case "PT-pt": return FileItemLocalizer["PT-pt"];
+ case "RU-ru": return FileItemLocalizer["RU-ru"];
+ case "ZH-cn": return FileItemLocalizer["ZH-cn"];
+ case "ZH-hk": return FileItemLocalizer["ZH-hk"];
+ default: return FileItemLocalizer["EN-en"];
+ }
+}
\ No newline at end of file
diff --git a/src/files-ui/core/localization/French/localization.french.ts b/src/files-ui/core/localization/French/localization.french.ts
new file mode 100644
index 0000000000000000000000000000000000000000..82a8d8766e86ab4b4890b831fe6ffa26caf15eb6
--- /dev/null
+++ b/src/files-ui/core/localization/French/localization.french.ts
@@ -0,0 +1,52 @@
+import { fileSizeFormater } from "../../utils/fileSizeFormatter";
+import { LocalLabels } from "../../types";
+
+/**
+ * French translation for Dropzone component
+ */
+export const DropzoneFrench: LocalLabels = {
+ defaultLabel: "Déposez vos fichiers ici",
+
+ uploadingMessage: (amountOfFiles) => { return `Envoi de ${amountOfFiles} fichiers`; },
+ uploadFinished: (uploaded, rejected) => `Fichiers téléchargés : ${uploaded}, Fichiers rejetés: ${rejected}`,
+ noFilesMessage: `Aucun fichier valide ne manque`,
+ footer: {
+ acceptAll: `Tous types de fichiers acceptés `,
+ acceptCustom: (accept) => `Types de fichier: ${accept}`
+ },
+ header: {
+ uploadFilesMessage: "Envoyer",
+ maxSizeMessage: (maxFileSize) => `Taille maximale ${maxFileSize}`,
+ validFilesMessage: (numberOfValidFiles, maxFiles) => `Fichiers ${numberOfValidFiles}/${maxFiles}`
+ },
+ fakeuploadsuccess: "Le fichier a été téléchargé avec succès",
+ fakeUploadError: "Erreur lors du téléchargement ",
+}
+
+/**
+ * French translation for FileItem component
+ */
+export const FileItemFrench: LocalLabels = {
+ fullInfoLayer: {
+ name: `Le nom: `,
+ size: "Le taille: ",
+ type: "Le type: "
+ },
+ status: {
+ preparing:"préparer",
+ uploading: "En cours",
+ success: "Succès",
+ valid: "Valide",
+ denied: "Refusé",
+ error: "Erreur",
+ aborted:"Interrompu"
+ },
+}
+/**
+ * French translation for Validation Errors
+ */
+ export const ValidateErrorFrench: LocalLabels = {
+ maxSizeError: (maxSize) => `Le fichier est très volumineux. Le tam. le maximum est de ${fileSizeFormater(maxSize as number)}`,
+ acceptError: `Type de fichier illégal `,
+ maxFileCount: (maxFiles) => `Limite de fichiers atteinte (${maxFiles})`
+}
\ No newline at end of file
diff --git a/src/files-ui/core/localization/Italian/localization.italian.ts b/src/files-ui/core/localization/Italian/localization.italian.ts
new file mode 100644
index 0000000000000000000000000000000000000000..1a6b53da040125c94c1d8f70a86288752cb15bbf
--- /dev/null
+++ b/src/files-ui/core/localization/Italian/localization.italian.ts
@@ -0,0 +1,52 @@
+import { fileSizeFormater } from "../../utils/fileSizeFormatter";
+import { LocalLabels } from "../../types";
+
+/**
+ * Italian translation for Dropzone component
+ */
+export const DropzoneItalian: LocalLabels = {
+ defaultLabel: "Trascina qui i tuoi file",
+
+ uploadingMessage: (amountOfFiles) => { return `Caricamento di ${amountOfFiles} file`; },
+ uploadFinished: (uploaded, rejected) => `File caricati: ${uploaded}, File rifiutati: ${rejected}`,
+ noFilesMessage: `Nessun file valido in attesa di essere caricato`,
+ footer: {
+ acceptAll: `Tutti i tipi di file sono accettati`,
+ acceptCustom: (accept) => `Tipi di file consentiti: ${accept}`
+ },
+ header: {
+ uploadFilesMessage: "Caricamento",
+ maxSizeMessage: (maxFileSize) => `Dimensione massima ${maxFileSize}`,
+ validFilesMessage: (numberOfValidFiles, maxFiles) => `File ${numberOfValidFiles}/${maxFiles}`
+ },
+ fakeuploadsuccess: "Il file è stato caricato con successo ",
+ fakeUploadError: "Errore di caricamento del file",
+}
+
+/**
+ * Italian translation for FileItem component
+ */
+export const FileItemItalian: LocalLabels = {
+ fullInfoLayer: {
+ name: `Nome: `,
+ size: "Dimensione: ",
+ type: "Tipo: "
+ },
+ status: {
+ preparing:"preparazione",
+ uploading: "In corso",
+ success: "Successo",
+ valid: "Valido",
+ denied: "Non válido",
+ error: "Errore",
+ aborted:"Interrotto"
+ },
+}
+/**
+ * Italian translation for Validation Errors
+ */
+ export const ValidateErrorItalian: LocalLabels = {
+ maxSizeError: (maxSize) => `Il file è molto grande. Il tam. il massimo è ${fileSizeFormater(maxSize as number)}`,
+ acceptError: `Tipo di file illegale`,
+ maxFileCount: (maxFiles) => `Numero massimo di file (${maxFiles}) raggiunto`
+}
\ No newline at end of file
diff --git a/src/files-ui/core/localization/Portuguese/localization.portuguese.ts b/src/files-ui/core/localization/Portuguese/localization.portuguese.ts
new file mode 100644
index 0000000000000000000000000000000000000000..3a21e08d9eaccb8b927006461908ee903180ed86
--- /dev/null
+++ b/src/files-ui/core/localization/Portuguese/localization.portuguese.ts
@@ -0,0 +1,53 @@
+import { fileSizeFormater } from "../../utils/fileSizeFormatter";
+import { LocalLabels } from "../../types";
+
+/**
+ * Portuguese translation for Dropzone
+ */
+export const DropzonePortuguese: LocalLabels = {
+ defaultLabel: "Solte seus arquivos aqui ",
+
+ uploadingMessage: (amountOfFiles) => { return `Enviando ${amountOfFiles} arquivos`; },
+ uploadFinished: (uploaded, rejected) => `Arquivos enviados: ${uploaded}, Arquivos rejeitados: ${rejected}`,
+ noFilesMessage: `Nenhum arquivo válido está faltando para enviar`,
+ footer: {
+ acceptAll: `Todos os tipos de arquivo são aceitos`,
+ acceptCustom: (accept) => `Tipos permitidos: ${accept}`
+ },
+ header: {
+ uploadFilesMessage: "Enviar",
+ maxSizeMessage: (maxFileSize) => `Tamanho máximo: ${maxFileSize}`,
+ validFilesMessage: (numberOfValidFiles, maxFiles) => `Arquivos ${numberOfValidFiles}/${maxFiles}`
+ },
+ fakeuploadsuccess: "O arquivo foi enviado com sucesso",
+ fakeUploadError: "Erro ao enviar",
+}
+
+
+/**
+ * Portuguese translation for FileItem component
+ */
+export const FileItemPortuguese: LocalLabels = {
+ fullInfoLayer: {
+ name: `Nome: `,
+ size: "Tamanho: ",
+ type: "Tipo: "
+ },
+ status: {
+ preparing:"Preparando",
+ uploading: "Enviando",
+ success: "Êxito",
+ valid: "válido",
+ denied: "Negado",
+ error: "Erro",
+ aborted:"Abortado"
+ },
+}
+/**
+ * Portuguese translation for Validation Errors
+ */
+ export const ValidateErrorPortuguese: LocalLabels = {
+ maxSizeError: (maxSize) => `O arquivo é muito grande. O tamanho máximo de arquivo permitido é ${fileSizeFormater(maxSize as number)}`,
+ acceptError: `O tipo de arquivo não é permitido `,
+ maxFileCount: (maxFiles) => `Quantidade máxima de arquivos (${maxFiles}) alcançada`
+}
\ No newline at end of file
diff --git a/src/files-ui/core/localization/Russian/localization.russian.ts b/src/files-ui/core/localization/Russian/localization.russian.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b62ecdc1aeeb720d7da1db0b2cfe1ec0ce185207
--- /dev/null
+++ b/src/files-ui/core/localization/Russian/localization.russian.ts
@@ -0,0 +1,55 @@
+import { fileSizeFormater } from "../../utils/fileSizeFormatter";
+import { LocalLabels } from "../../types";
+
+/**
+ * Russian translation for Dropzone component
+ */
+export const DropzoneRussian: LocalLabels = {
+ defaultLabel: "Перетащите Ñюда Ñвои файлы.",
+ uploadingMessage: (amountOfFiles) => { return `Выгрузка ${amountOfFiles} файлов`; },
+ uploadFinished: (uploaded, rejected) => `Загружено файлов: ${uploaded}, отклоненных файлов: ${rejected}`,
+ noFilesMessage: `ДейÑтвительный файл не отÑутÑтвует Ð´Ð»Ñ Ð·Ð°Ð³Ñ€ÑƒÐ·ÐºÐ¸`,
+ footer: {
+ acceptAll: `ПринимаютÑÑ Ð²Ñе типы файлов `,
+ acceptCustom: (accept) => `ДопуÑтимые типы: ${accept}`
+ },
+ header: {
+ uploadFilesMessage: "Отправить",
+ maxSizeMessage: (maxFileSize) => `Ð¼Ð°ÐºÑ Ñ€Ð°Ð·Ð¼ÐµÑ€: ${maxFileSize}`,
+ validFilesMessage: (numberOfValidFiles, maxFiles) => `Файлы ${numberOfValidFiles}/${maxFiles}`
+ },
+ fakeuploadsuccess: "Файл был уÑпешно загружен",
+ fakeUploadError: "Ошибка при загрузке",
+}
+
+/**
+ * Russian translation for FileItem component
+ *
+ */
+export const FileItemRussian: LocalLabels = {
+ fullInfoLayer: {
+ name: `ИмÑ: `,
+ size: "Размер: ",
+ type: "Tип: "
+ },
+ status: {
+ preparing:"подготовка",
+ uploading: "Загрузка",
+ success: "уÑпех",
+ valid: "годный",
+ denied: "выкинутый",
+ error: "ошибка",
+ aborted:"прерванный"
+ },
+}
+
+/**
+ * Russian translation for Validation Errors
+ */
+export const ValidateErrorRussian: LocalLabels = {
+ maxSizeError: (maxSize) =>
+ `Файл Ñлишком большой. МакÑимально допуÑтимый размер файла - ${fileSizeFormater(maxSize as number)}`,
+ acceptError: `Тип файла не разрешен`,
+ maxFileCount: (maxFiles) =>
+ `ДоÑтигнуто макÑимальное количеÑтво файлов (${maxFiles})`
+}
\ No newline at end of file
diff --git a/src/files-ui/core/localization/Spanish/localization.spanish.ts b/src/files-ui/core/localization/Spanish/localization.spanish.ts
new file mode 100644
index 0000000000000000000000000000000000000000..113989372c144236f0b932a815dc9c60a46cd4b0
--- /dev/null
+++ b/src/files-ui/core/localization/Spanish/localization.spanish.ts
@@ -0,0 +1,52 @@
+import { fileSizeFormater } from "../../utils/fileSizeFormatter";
+import { LocalLabels } from "../../types";
+
+/**
+ * Spanish translation for Dropzone component
+ */
+export const DropzoneSpanish: LocalLabels = {
+ defaultLabel: "Suelta tus archivos aquÃ",
+
+ uploadingMessage: (amountOfFiles) => { return `Subiendo ${amountOfFiles} archivos`; },
+ uploadFinished: (uploaded, rejected) => `Archivos subidos: ${uploaded}, Archivos rechazados: ${rejected}`,
+ noFilesMessage: `No hay archivos válidos pendientes por subir`,
+ footer: {
+ acceptAll: `Todos los tipos de archivo aceptados`,
+ acceptCustom: (accept) => `Tipo(s) de archivo permitidos: ${accept}`
+ },
+ header: {
+ uploadFilesMessage: "Subir",
+ maxSizeMessage: (maxFileSize) => `Tam. máximo ${maxFileSize}`,
+ validFilesMessage: (numberOfValidFiles, maxFiles) => `Archivos ${numberOfValidFiles}/${maxFiles}`
+ },
+ fakeuploadsuccess: "El archivo se subió correctamente",
+ fakeUploadError: "Error al subir el archivo",
+}
+
+/**
+ * Spanish translation for FileItem component
+ */
+export const FileItemSpanish: LocalLabels = {
+ fullInfoLayer: {
+ name: `Nombre: `,
+ size: "Tamaño: ",
+ type: "Tipo: "
+ },
+ status: {
+ preparing:"Preparando",
+ uploading: "Subiendo",
+ success: "Éxito",
+ valid: "Válido",
+ denied: "No válido",
+ error: "Error",
+ aborted: "Anulado"
+ },
+}
+/**
+ * Spanish translation for Validation Errors
+ */
+export const ValidateErrorSpanish: LocalLabels = {
+ maxSizeError: (maxSize) => `El archivo es muy grande. El tam. máximo es ${fileSizeFormater(maxSize as number)}`,
+ acceptError: `Tipo de archivo no permitido`,
+ maxFileCount: (maxFiles) => `Cantidad máxima de archivos (${maxFiles}) alcanzada`
+}
diff --git a/src/files-ui/core/localization/dropzone.localization.ts b/src/files-ui/core/localization/dropzone.localization.ts
new file mode 100644
index 0000000000000000000000000000000000000000..0dece64946465f76c8433025427ff6a9b4cdde9b
--- /dev/null
+++ b/src/files-ui/core/localization/dropzone.localization.ts
@@ -0,0 +1,39 @@
+import { DropzoneRussian } from "./Russian/localization.russian";
+import { DropzoneEnglish } from "./English/localization.english";
+import { DropzoneFrench } from "./French/localization.french";
+import { DropzonePortuguese } from "./Portuguese/localization.portuguese";
+import { DropzoneSpanish } from "./Spanish/localization.spanish";
+import { DropzoneSimplifiedChinese } from "./Chinese-simplified/localization.simplifiedChinese";
+import { DropzoneTraditionalChinese } from "./Chinese-traditional/localization.traditionalChinese";
+import { DropzoneItalian } from "./Italian/localization.italian";
+import { ComponentLocalizer, Localization, LocalLabels } from "../types";
+
+export const DropzoneLocalizer: ComponentLocalizer = {
+ "ES-es": DropzoneSpanish,
+ "EN-en": DropzoneEnglish,
+ "FR-fr": DropzoneFrench,
+ "IT-it": DropzoneItalian,
+ "PT-pt": DropzonePortuguese,
+ "RU-ru": DropzoneRussian,
+ "ZH-cn": DropzoneSimplifiedChinese,
+ "ZH-hk": DropzoneTraditionalChinese
+
+}
+/**
+ * Secure translation through a selector
+ * @param local the Localization
+ * @returns a ComponentLocalizer object that contains the translation
+ */
+export const DropzoneLocalizerSelector = (local: Localization | undefined): LocalLabels => {
+ switch (local) {
+ case "ES-es": return DropzoneLocalizer["ES-es"];
+ case "EN-en": return DropzoneLocalizer["EN-en"];
+ case "FR-fr": return DropzoneLocalizer["FR-fr"];
+ case "IT-it": return DropzoneLocalizer["IT-it"];
+ case "PT-pt": return DropzoneLocalizer["PT-pt"];
+ case "RU-ru": return DropzoneLocalizer["RU-ru"];
+ case "ZH-cn": return DropzoneLocalizer["ZH-cn"];
+ case "ZH-hk": return DropzoneLocalizer["ZH-hk"];
+ default: return DropzoneLocalizer["EN-en"];
+ }
+}
\ No newline at end of file
diff --git a/src/files-ui/core/localization/index.ts b/src/files-ui/core/localization/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..868112b9945c1db7841af2ba81143e0e87f752a8
--- /dev/null
+++ b/src/files-ui/core/localization/index.ts
@@ -0,0 +1,15 @@
+import { FileItemItalian, DropzoneItalian, ValidateErrorItalian } from "./Italian/localization.italian";
+import { FileItemFrench, DropzoneFrench, ValidateErrorFrench } from "./French/localization.french";
+import { FileItemEnglish, DropzoneEnglish, ValidateErrorEnglish } from "./English/localization.english";
+import { FileItemSpanish, DropzoneSpanish, ValidateErrorSpanish } from "./Spanish/localization.spanish";
+import { FileItemRussian, DropzoneRussian, ValidateErrorRussian } from "./Russian/localization.russian";
+import { FileItemPortuguese, DropzonePortuguese, ValidateErrorPortuguese } from "./Portuguese/localization.portuguese";
+import { FileItemSimplifiedChinese, DropzoneSimplifiedChinese, ValidateErrorSimplifiedChinese } from "./Chinese-simplified/localization.simplifiedChinese";
+import { FileItemTraditionalChinese, DropzoneTraditionalChinese, ValidateErrorTraditionalChinese } from "./Chinese-traditional/localization.traditionalChinese";
+import { FileItemLocalizerSelector, FileItemLocalizer, } from "./FileItem.localization";
+import { DropzoneLocalizerSelector, DropzoneLocalizer } from "./dropzone.localization";
+import { ValidateErrorLocalizer, ValidateErrorLocalizerSelector } from "./validationError.localization";
+
+export { ValidateErrorLocalizerSelector, ValidateErrorLocalizer, ValidateErrorItalian, ValidateErrorFrench, ValidateErrorEnglish, ValidateErrorSpanish, ValidateErrorPortuguese, ValidateErrorRussian, ValidateErrorSimplifiedChinese, ValidateErrorTraditionalChinese };
+export { DropzoneLocalizerSelector, DropzoneLocalizer, DropzoneItalian, DropzoneFrench, DropzoneEnglish, DropzoneSpanish, DropzonePortuguese, DropzoneRussian, DropzoneSimplifiedChinese, DropzoneTraditionalChinese };
+export { FileItemLocalizerSelector, FileItemLocalizer, FileItemItalian, FileItemFrench, FileItemEnglish, FileItemSpanish, FileItemPortuguese, FileItemRussian, FileItemSimplifiedChinese, FileItemTraditionalChinese };
\ No newline at end of file
diff --git a/src/files-ui/core/localization/validationError.localization.ts b/src/files-ui/core/localization/validationError.localization.ts
new file mode 100644
index 0000000000000000000000000000000000000000..114f37113672bfd5cd3e95f86dd732f921b516ad
--- /dev/null
+++ b/src/files-ui/core/localization/validationError.localization.ts
@@ -0,0 +1,31 @@
+import { ValidateErrorRussian } from "./Russian/localization.russian";
+import { ComponentLocalizer, LocalLabels, Localization } from "./../types";
+import { ValidateErrorEnglish } from "./English/localization.english";
+import { ValidateErrorFrench } from "./French/localization.french";
+import { ValidateErrorPortuguese } from "./Portuguese/localization.portuguese";
+import { ValidateErrorSpanish } from "./Spanish/localization.spanish";
+import { ValidateErrorSimplifiedChinese } from "./Chinese-simplified/localization.simplifiedChinese";
+import { ValidateErrorTraditionalChinese } from "./Chinese-traditional/localization.traditionalChinese";
+import { ValidateErrorItalian } from "./Italian/localization.italian";
+
+export const ValidateErrorLocalizer: ComponentLocalizer = {
+ "ES-es": ValidateErrorSpanish,
+ "EN-en": ValidateErrorEnglish,
+ "FR-fr": ValidateErrorFrench,
+ "IT-it": ValidateErrorItalian,
+ "PT-pt": ValidateErrorPortuguese,
+ "RU-ru": ValidateErrorRussian,
+ "ZH-cn": ValidateErrorSimplifiedChinese,
+ "ZH-hk": ValidateErrorTraditionalChinese,
+}
+/**
+ * Secure translation through a selector
+ * @param local the Localization
+ * @returns a ComponentLocalizer object that contains the translation
+ */
+export const ValidateErrorLocalizerSelector = (local: Localization | undefined): LocalLabels => {
+ if (!local || !["ES-es", "EN-en", "FR-fr", "IT-it", "PT-pt", "RU-ru", "ZH-cn", "ZH-hk"].includes(local)) {
+ return ValidateErrorLocalizer["EN-en"];
+ }
+ return ValidateErrorLocalizer[local];
+}
\ No newline at end of file
diff --git a/src/files-ui/core/mime/icons.ts b/src/files-ui/core/mime/icons.ts
new file mode 100644
index 0000000000000000000000000000000000000000..8eabf6336007765943f67b876ca969c0dc120be6
--- /dev/null
+++ b/src/files-ui/core/mime/icons.ts
@@ -0,0 +1,89 @@
+export const sevenzip = "https://user-images.githubusercontent.com/43678736/132086517-72a51a12-e403-4675-bfd7-22c23affa730.png";
+export const aac = "https://user-images.githubusercontent.com/43678736/132086518-7026d4f1-ea16-4ed0-89fd-37c1aa8ac3ed.png";
+export const abw = "https://user-images.githubusercontent.com/43678736/132086519-863c63b4-917e-4471-94ff-7e15651cc14b.png";
+export const accdb = "https://user-images.githubusercontent.com/43678736/132086520-9bc6aa3b-51c9-4da2-9ef7-349162b86d0b.png";
+export const avi = "https://user-images.githubusercontent.com/43678736/132086521-dbd6cf0d-d4d7-4b92-bb26-17e8a51a9383.png";
+export const azw = "https://user-images.githubusercontent.com/43678736/132086522-070f48e8-78a8-4294-8dbb-aab81525e164.png";
+export const bmp = "https://user-images.githubusercontent.com/43678736/132086595-90ab7f90-f87e-4900-94d9-d0b26745df48.png";
+export const bz = "https://user-images.githubusercontent.com/43678736/132086597-e285ad5c-613a-4679-a270-493e5be4ffd9.png";
+export const bz2 = "https://user-images.githubusercontent.com/43678736/132086598-623c410a-084a-4395-a448-211b2ff61cfe.png";
+export const c = "https://user-images.githubusercontent.com/43678736/132086599-7a5cd692-b4df-45f5-80d9-384cb3e0c314.png";
+export const cda = "https://user-images.githubusercontent.com/43678736/132086600-8b70a007-512d-4252-9c66-eabd3ddd6573.png";
+export const csh = "https://user-images.githubusercontent.com/43678736/132086601-e62e5d1a-d8a2-4475-a14f-85922cec9272.png";
+export const css = "https://user-images.githubusercontent.com/43678736/132086602-4c772934-f608-4f01-8459-c4622cee8ad5.png";
+export const csv = "https://user-images.githubusercontent.com/43678736/132086604-b5b019fe-572e-477e-92c2-3769a48a1304.png";
+export const docx = "https://user-images.githubusercontent.com/43678736/132086606-715ccb66-4702-4f7d-9b09-ac93ba17b643.png";
+export const docx2 = "https://user-images.githubusercontent.com/43678736/132086607-a246b386-52c9-4fe1-a7e4-204894e6722d.png";
+export const drawio = "https://user-images.githubusercontent.com/43678736/132086608-bcae9d57-8e54-488c-90c4-4952ae530b5e.png";
+export const dw = "https://user-images.githubusercontent.com/43678736/132086616-0c7842d6-d20e-4ede-988b-3dd063a4de8d.png";
+export const eml = "https://user-images.githubusercontent.com/43678736/132086617-1e351075-ffaf-4b81-a1fe-0b7b338772a2.png";
+export const eot = "https://user-images.githubusercontent.com/43678736/132086618-397d6bd2-9fda-43ed-a135-cb40388c35af.png";
+export const eps = "https://user-images.githubusercontent.com/43678736/132086619-9daf0b61-dbb0-4d47-8a12-9fba13b88856.png";
+export const epub = "https://user-images.githubusercontent.com/43678736/132086620-2586ba40-c583-4589-b1a4-8bb5b258b44d.png";
+export const freearc = "https://user-images.githubusercontent.com/43678736/132086621-3b95fb64-2533-4ccc-abcd-bd2beba572e9.png";
+export const gif = "https://user-images.githubusercontent.com/43678736/132086622-af705a0c-2b25-4ba7-8ab6-bd69ec97f7e2.png";
+export const gzip = "https://user-images.githubusercontent.com/43678736/132086624-89141a46-64e4-4fa0-bf69-54a0eb4d48c9.png";
+export const html = "https://user-images.githubusercontent.com/43678736/132086625-1b8f2652-1de0-4475-8c12-7da4a9973ffb.png";
+export const icalendar = "https://user-images.githubusercontent.com/43678736/132086626-38699705-1e6f-4bca-984b-03167b236faa.png";
+export const ind = "https://user-images.githubusercontent.com/43678736/132086627-2f24067a-00bc-424a-af36-349a9ba14b6c.png";
+export const ini = "https://user-images.githubusercontent.com/43678736/132086649-20c9c9e6-8e63-4d87-9b8e-8fe8eba12ada.png";
+export const java = "https://user-images.githubusercontent.com/43678736/132086650-f1166246-b361-4c30-a04e-9781c555d14a.png";
+export const jar = "https://user-images.githubusercontent.com/43678736/132086650-f1166246-b361-4c30-a04e-9781c555d14a.png";
+export const javascript = "https://user-images.githubusercontent.com/43678736/132086652-4562942e-aaea-466c-968f-380fffabf3f9.png";
+export const jpeg = "https://user-images.githubusercontent.com/43678736/132086653-0487e7e2-1ee3-49e2-8cfe-3e20f1f7490a.png";
+export const jsf = "https://user-images.githubusercontent.com/43678736/132086654-c510bd8f-8de7-4afe-8c20-cc810b004b07.png";
+export const json = "https://user-images.githubusercontent.com/43678736/132086656-6e96c815-e4e2-4ffd-9d71-57e9cc2450bc.png";
+export const jsonld = "https://user-images.githubusercontent.com/43678736/132086658-5d27d3c2-394f-43fb-b512-9b414a257875.png";
+export const midi = "https://user-images.githubusercontent.com/43678736/132086659-98f3ef6e-b9f3-4b6d-b18f-469b5334ba27.png";
+export const mov = "https://user-images.githubusercontent.com/43678736/132086660-adcecedd-56b4-4286-8b0f-69417f77e961.png";
+export const mp3 = "https://user-images.githubusercontent.com/43678736/132086661-a5484553-06c7-4ffa-a8f9-96b57b1b0344.png";
+export const mp4 = "https://user-images.githubusercontent.com/43678736/132086662-05ad1597-d5e5-4efa-833e-2876e966a745.png";
+export const mpeg = "https://user-images.githubusercontent.com/43678736/132086663-90c58955-f7fb-4bdb-ac53-92667d16d4a3.png";
+export const mpkg = "https://user-images.githubusercontent.com/43678736/132086664-9a7530e7-6d78-4ef3-a176-20cf7f57b555.png";
+export const octet = "https://user-images.githubusercontent.com/43678736/132086666-ab3c505d-b2c0-4177-9a06-aed5d9c39ee4.png";
+export const odp = "https://user-images.githubusercontent.com/43678736/132086667-6c7dcbcc-8d83-41a2-8e0a-85b09e2791ae.png";
+export const ods = "https://user-images.githubusercontent.com/43678736/132086668-9f246e91-cf2e-49cf-9617-e1fbb71abbbb.png";
+export const odt = "https://user-images.githubusercontent.com/43678736/132086669-46113762-84d1-4b32-9441-b0138ce17a5d.png";
+export const oga = "https://user-images.githubusercontent.com/43678736/145835364-2054509d-3448-4d34-921f-73dd6e297fc7.png";
+export const ogv = "https://user-images.githubusercontent.com/43678736/145835367-19172bf8-cd5a-4cbe-b512-d0de1d91f269.png";
+export const ogx = "https://user-images.githubusercontent.com/43678736/145835373-a57ef0f5-3968-483b-9f55-6d67e7f1dcea.png";
+export const opus = "https://user-images.githubusercontent.com/43678736/132086670-0f96e770-cedc-4635-a5f9-cf97894c1d7a.png";
+export const otf = "https://user-images.githubusercontent.com/43678736/132086671-02ad35ef-ec3a-4a65-abd5-5bf794dfcf7b.png";
+export const pdf = "https://user-images.githubusercontent.com/43678736/132086672-3a856fda-823d-4997-b802-c7c640e6ef44.png";
+export const php = "https://user-images.githubusercontent.com/43678736/132086673-0c4409ab-754e-4619-8cfa-179d0ccf1bd9.png";
+export const png = "https://user-images.githubusercontent.com/43678736/132086674-fdb56d02-5845-49b7-8462-6357bc963464.png";
+export const pptx = "https://user-images.githubusercontent.com/43678736/132086675-c879645d-acb4-41a6-ab3c-4e6c2048badb.png";
+export const pptx2 = "https://user-images.githubusercontent.com/43678736/132086676-6de1bbd7-764f-4197-9aa4-405a60ce6734.png";
+export const proj = "https://user-images.githubusercontent.com/43678736/132086683-3dc0a8b8-72f8-4fa1-a08a-fcfd75b465e1.png";
+export const psd = "https://user-images.githubusercontent.com/43678736/132086685-4e327c4c-a409-4b83-b36a-8d88936b314b.png";
+export const pst = "https://user-images.githubusercontent.com/43678736/132086686-3888e43a-5abf-41f7-9940-4b86e436521f.png";
+export const publisher = "https://user-images.githubusercontent.com/43678736/132086687-d92b56ff-f7f7-4be7-bbf4-47b8a33f4c6f.png";
+export const python = "https://user-images.githubusercontent.com/43678736/132086688-8e82fae4-3a9b-49c0-bf99-77189525514c.png";
+export const tar = "https://user-images.githubusercontent.com/43678736/132086689-fe1fef9f-d2db-455b-8f4b-09acd095f571.png";
+export const rar = "https://user-images.githubusercontent.com/43678736/132086689-fe1fef9f-d2db-455b-8f4b-09acd095f571.png";
+export const react = "https://user-images.githubusercontent.com/43678736/132086691-d472576b-ec6a-4332-acd2-dd6a00b72952.png";
+export const richtextformat = "https://user-images.githubusercontent.com/43678736/132086692-df6e3518-2e6a-4553-883d-e21694980449.png";
+export const rtf = "https://user-images.githubusercontent.com/43678736/132086693-9d43571e-0c86-438f-b247-e2cb42e19e06.png";
+export const sass = "https://user-images.githubusercontent.com/43678736/132086694-4e661d6a-1118-441e-8bc3-c52fcb2133b6.png";
+export const settings = "https://user-images.githubusercontent.com/43678736/132086696-0dd21f83-b9fc-490c-9ed5-bd88151dc9bb.png";
+export const sh = "https://user-images.githubusercontent.com/43678736/132086697-1d82d724-35b6-4f06-847a-3c59a5deda6e.png";
+export const swf = "https://user-images.githubusercontent.com/43678736/132086698-19384230-dbd7-4e05-bc69-ef4537b6aae3.png";
+export const text = "https://user-images.githubusercontent.com/43678736/132086699-5993a482-04f4-4915-b105-9037f527cf61.png";
+export const tiff = "https://user-images.githubusercontent.com/43678736/132086700-c23461c8-6819-46e1-aecd-0a1f8d3507bb.png";
+export const ttf = "https://user-images.githubusercontent.com/43678736/132086701-c8044c09-8d95-4af1-9410-66761001d7da.png";
+export const typescript = "https://user-images.githubusercontent.com/43678736/132086702-59294337-ed99-4302-badd-316b2c1ff62f.png";
+export const url = "https://user-images.githubusercontent.com/43678736/132086703-86d97476-b76e-4949-b89a-31ecb03f3b6e.png";
+export const vsd = "https://user-images.githubusercontent.com/43678736/132086704-8fd51e7c-afa2-47a3-ab2f-d0bcd0ecae9f.png";
+export const vue = "https://user-images.githubusercontent.com/43678736/132086705-33294da1-5c0f-49f7-b890-e4857cec0a6d.png";
+export const wav = "https://user-images.githubusercontent.com/43678736/132086706-22f805d0-39d4-494b-824e-47dc75d05eb7.png";
+export const webm = "https://user-images.githubusercontent.com/43678736/132086707-e61a84de-d396-4dbf-8d1b-1d6ee19e1ac8.png";
+export const weba = "https://user-images.githubusercontent.com/43678736/132086707-e61a84de-d396-4dbf-8d1b-1d6ee19e1ac8.png";
+export const webp = "https://user-images.githubusercontent.com/43678736/132086708-21d096dd-7148-40aa-97f1-cbb099339740.png";
+export const wma = "https://user-images.githubusercontent.com/43678736/132086709-811d4e90-3cfa-4044-a956-aeda9c67fc92.png";
+export const wmv = "https://user-images.githubusercontent.com/43678736/132086710-c5479c6c-0249-4542-adad-48b0ef40b775.png";
+export const woff = "https://user-images.githubusercontent.com/43678736/132086711-1524a3e7-3e33-4822-a34f-ff3235404045.png";
+export const xlsx = "https://user-images.githubusercontent.com/43678736/132086712-17e2c491-f6e4-4586-aef6-06bcc5f4b0e5.png";
+export const xlsx2 = "https://user-images.githubusercontent.com/43678736/132086714-7ddf285d-2b83-4115-80a5-f02f510300a1.png";
+export const xml = "https://user-images.githubusercontent.com/43678736/132086715-204b5a8b-9c5a-4bac-8294-9237ebc16089.png";
+export const xul = "https://user-images.githubusercontent.com/43678736/132086716-64511d20-58cb-45a8-85df-f4d9408b469d.png";
+export const zip = "https://user-images.githubusercontent.com/43678736/132086718-a8499333-6282-4820-aa1f-4d133eb54648.png";
diff --git a/src/files-ui/core/mime/index.ts b/src/files-ui/core/mime/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..48bce3dffbe1ed57c0e852f8ff7bd5f6dbe6f003
--- /dev/null
+++ b/src/files-ui/core/mime/index.ts
@@ -0,0 +1,52 @@
+import {
+ aac, abw, accdb, avi, azw,
+ bmp, bz, bz2, cda,
+ csh, css, csv,
+ docx, drawio,
+ eot, epub,
+ freearc, gif, gzip,
+ html, icalendar,
+ jar, java, javascript, jpeg, json, jsonld,
+ midi, mp3, mp4, mpeg, mpkg,
+ octet, odp, ods, odt, oga, ogv, ogx, opus, otf,
+ pdf, php, png, pptx, psd, python,
+ rar, react, rtf,
+ sass, sevenzip, sh, swf,
+ tar, text, tiff, ttf, typescript,
+ vsd, vue,
+ wav, weba, webm, webp, wma, wmv, woff,
+ xlsx, xml, xul,
+ zip
+} from "./icons";
+export {
+ aac, abw, accdb, avi, azw,
+ bmp, bz, bz2, cda,
+ csh, css, csv,
+ docx, drawio,
+ eot, epub,
+ freearc, gif, gzip,
+ html, icalendar,
+ jar, java, javascript, jpeg, json, jsonld,
+ midi, mp3, mp4, mpeg, mpkg,
+ octet, odp, ods, odt, oga, ogv, ogx, opus, otf,
+ pdf, php, png, pptx, psd, python,
+ rar, react, rtf,
+ sass, sevenzip, sh, swf,
+ tar, text, tiff, ttf, typescript,
+ vsd, vue,
+ wav, weba, webm, webp, wma, wmv, woff,
+ xlsx, xml, xul,
+ zip
+}
+export {
+ applicationSelector,
+ audioSelector,
+ checkIsCode,
+ extensionSelector,
+ fontSelector,
+ getURLFileIco,
+ imageSelector,
+ mimeSelector,
+ textSelector,
+ videoSelector,
+} from "./mime";
\ No newline at end of file
diff --git a/src/files-ui/core/mime/mime.ts b/src/files-ui/core/mime/mime.ts
new file mode 100644
index 0000000000000000000000000000000000000000..73ac85f110b792e9a41697616a3f3589a94e8431
--- /dev/null
+++ b/src/files-ui/core/mime/mime.ts
@@ -0,0 +1,419 @@
+import {
+ aac, abw, accdb, avi, azw,
+ bmp, bz, bz2, cda,
+ csh, css, csv,
+ docx, drawio,
+ eot, epub,
+ freearc, gif, gzip,
+ html, icalendar,
+ jar, java, javascript, jpeg, json, jsonld,
+ midi, mp3, mp4, mpeg, mpkg,
+ octet, odp, ods, odt, oga, ogv, ogx, opus, otf,
+ pdf, php, png, pptx, psd, python,
+ rar, react, rtf,
+ sass, sevenzip, sh, swf,
+ tar, text, tiff, ttf, typescript,
+ vsd, vue,
+ wav, weba, webm, webp, wma, wmv, woff,
+ xlsx, xml, xul,
+ zip
+} from "./icons";
+import { getExt } from "../utils/getExt";
+
+const DEF_GEN_MIME: string = "octet";
+/**
+ *
+ * @param tailMime
+ * @returns
+ */
+export const audioSelector = (tailMime: string): string => {
+ switch (tailMime) {
+ case "aac": return "aac";
+ case "midi": return "midi";
+ case "x-midi": return "midi";
+ case "mpeg": return "mpeg";//mp3
+ case "ogg": return "oga";
+ case "opus": return "opus";
+ case "wav": return "wav";
+ case "webm": return "webm";
+ //case "3gpp": return "threegp";
+ //case "3gpp2": return "threegp";
+ //case "mp3": return "mp3";
+ case "wma": return "wma";
+ default: return DEF_GEN_MIME;
+ }
+}
+export const textSelector = (tailMime: string): string => {
+ switch (tailMime) {
+ case "css": return "css";
+ case "csv": return "csv";
+ case "html": return "html";
+ case "calendar": return "icalendar";
+ case "javascript": return "javascript";
+ case "x-javascript": return "javascript";
+ case "plain": return "text";
+ case "xml": return "xml";
+ default: return DEF_GEN_MIME;
+
+ }
+}
+export const imageSelector = (tailMime: string): string => {
+ switch (tailMime) {
+ case "bmp": return "bmp";
+ case "gif": return "gif";
+ // case "vnd.microsoft.icon": return "ico";
+ case "ico": return "ico";
+ case "jpg": return "jpeg";
+ case "jpeg": return "jpeg";
+ case "png": return "png";
+ //case "svg+xml": return "svg";
+ //case "svg": return "svg";
+ case "tiff": return "tiff";
+ case "webp": return "webp";
+ default: return DEF_GEN_MIME;
+
+ }
+}
+export const fontSelector = (tailMime: string): string => {
+ switch (tailMime) {
+ case "otf": return "otf";
+ case "ttf": return "ttf";
+ case "woff": return "woff";
+ case "woff2": return "woff";
+ default: return DEF_GEN_MIME;
+
+ }
+}
+
+export const videoSelector = (tailMime: string): string => {
+ switch (tailMime) {
+ case "x-msvideo": return "avi";
+ case "msvideo": return "avi";
+ case "avi": return "avi";
+ case "mp4": return "mp4";
+ case "mpeg": return "mpeg";
+ case "ogg": return "ogv";
+ case "mp2t": return "mp2t";
+ case "wmv": return "wmv";
+
+ case "webm": return "webm";
+ // case "3gpp": return "threegp";
+ // case "3gpp2": return "threegp2";
+
+ default: return DEF_GEN_MIME;
+ }
+}
+/**
+ *
+ * @param tailMime
+ * @returns
+ */
+export const applicationSelector = (tailMime: string): string => {
+ switch (tailMime) {
+ case "x-abiword": return "abw";
+ case "abiword": return "abw";
+ case "x-freearc": return "arc";
+ case "freearc": return "arc";
+ case "vnd.amazon.ebook": return "azw";
+ case "octet-stream": return "octet";
+ case "x-bzip": return "bz";
+ case "x-bzip2": return "bz2";
+ case "bzip": return "bz";
+ case "bzip2": return "bz2";
+ case "x-cdf": return "cda";
+ case "msaccess": return "accdb";
+ case "csh": return "csh";
+ case "x-csh": return "csh";
+ case "vnd.ms-fontobject": return "eot";
+ case "epub+zip": return "epub";
+ case "gzip": return "gzip";
+ case "java-archive": return "jar";
+ case "x-javascript": return "javascript";
+ case "json": return "json";
+ case "ld+json": return "jsonld";
+ case "vnd.apple.installer+xml": return "mpkg";
+ case "ogg": return "ogx";
+ case "vnd.rar": return "rar";
+ case "rtf": return "rtf";
+ case "x-sh": return "sh";
+ case "sh": return "sh";
+ case "x-shockwave-flash": return "swf";
+ case "x-tar": return "tar";
+ case "x-httpd-php": return "php";
+ case "vnd.visio": return "vsd";
+ case "xhtml+xml": return "xhtml";
+ case "xml": return "xml";
+ case "vnd.mozilla.xul+xml": return "xul";
+ case "vnd.openxmlformats-officedocument.wordprocessingml.document": return "docx";
+ case "msword": return "docx";
+ case "vnd.openxmlformats-officedocument.spreadsheetml.sheet": return "xlsx";
+ case "vnd.openxmlformats-officedocument.presentationml.presentation": return "pptx";
+ case "vnd.ms-powerpoint": return "pptx";
+ case "vnd.oasis.opendocument.presentation": return "odp";
+ case "vnd.oasis.opendocument.text": return "odt";
+ case "vnd.oasis.opendocument.spreadsheet": return "ods";
+ case "zip": return "zip";
+ case "x-zip-compressed": return "zip";
+ case "pdf": return "pdf";
+ default: return DEF_GEN_MIME;
+ }
+}
+/**
+ * Selects to wich mime type the mime type given belongs to
+ * @param mimeType mime type to be searched
+ * @returns the generic type,
+if not found it return "octet" that means generic binary file
+ */
+export const mimeSelector = (mimeType?: string): string => {
+ // let genericMime: string | undefined = undefined;
+ if (!mimeType || !mimeType.includes("/")) {
+ return DEF_GEN_MIME;
+ }
+ let headerMime = mimeType.split("/")[0];
+ let tailMime = mimeType.split("/")[1];
+ /**
+ * Every mimetype that
+ * starts with: "application/...."
+ */
+
+ switch (headerMime) {
+ case "application": return applicationSelector(tailMime);
+ case "audio": return audioSelector(tailMime);
+ case "video": return videoSelector(tailMime);
+ case "text": return textSelector(tailMime);
+ case "image": return imageSelector(tailMime);
+ case "font": return fontSelector(tailMime);
+
+ default: return DEF_GEN_MIME;
+ }
+}
+/**
+ * Selects to wich mapped extension
+ * the given exension belongs to
+ *
+ * @param extension
+ * @returns
+ */
+export const extensionSelector = (extension?: string): string => {
+ let genericMime: string = "octet";
+
+ if (extension && extension !== "") {
+ if (extension.includes("zip") || extension.includes("rar")) {
+ genericMime = "zip";
+ } else if (extension.includes("doc")) {
+ genericMime = "docx";
+ } else if (extension.includes("xls")) {
+ genericMime = "xlsx";
+ } else if (extension.includes("drawio")) {
+ genericMime = "drawio";
+ } else if (extension.includes("psd")) {
+ genericMime = "psd";
+ } else if (extension.includes("csv")) {
+ genericMime = "csv";
+ } else if (extension === "jsx") {
+ genericMime = "react";
+ } else if (extension === "py") {
+ genericMime = "python";
+ } else if (extension === "vue") {
+ genericMime = "vue";
+ } else if (extension === "java") {
+ genericMime = "java";
+ } else if (extension === "ts") {
+ genericMime = "ts";
+ } else if (extension === "sass" || extension === "scss") {
+ genericMime = "sass";
+ }
+ }
+ return genericMime;
+
+}
+/**
+ * Chack for extention whether the file is code os not
+ * @param extension
+ * @returns
+ */
+export const checkIsCode = (extension?: string): string => {
+ let genericMime = "text";
+ if (extension && extension !== "") {
+ if (extension === "jsx") {
+ genericMime = "react";
+ } else if (extension === "py") {
+ genericMime = "python";
+ } else if (extension === "vue") {
+ genericMime = "vue";
+ } else if (extension === "java") {
+ genericMime = "java";
+ } else if (extension === "ts" || extension === "tsx") {
+ genericMime = "typescript";
+ } else if (extension === "js") {
+ genericMime = "javascript";
+ } else if (extension === "xml") {
+ genericMime = "xml";
+ } else if (extension === "php") {
+ genericMime = "php";
+ }
+ }
+ return genericMime;
+}
+
+/**
+ * Looks for a suitable file icon
+ * @param props mime and extension from file to search
+ * @returns the result file ico, if not found, turns octet-stream url
+ */
+export const getURLFileIco = (
+ file: File | undefined
+): ResultFileIco => {
+
+ let result = "";
+ //if not file, return octet
+ if (!file) {
+ result = DEF_GEN_MIME;
+ return { url: mimeUrlList[result], mimeResume: result };
+ } else {
+ result = mimeSelector(file.type);
+ }
+ //If plain text
+ const extention: string = getExt(file.name);
+
+ if (result === "text") {
+ result = checkIsCode(extention);
+
+ }
+ //If octet stream result, second chance: file extention
+ if (result === DEF_GEN_MIME) {
+ result = extensionSelector(extention);
+ }
+
+ return { url: mimeUrlList[result], mimeResume: result };
+}
+/**
+ * Looks for a suitable file icon
+ * @param props mime and extension from file to search
+ * @returns the result file ico, if not found, turns octet-stream url
+ */
+export const getURLFileIcoFromNameAndType = (
+ name: string | undefined,
+ type: string | undefined,
+): ResultFileIco => {
+
+ let result = "";
+ //if not nam and type, return octet
+ if (!name) {
+ result = DEF_GEN_MIME;
+ return { url: mimeUrlList[result], mimeResume: result };
+ } else {
+ result = mimeSelector(type);
+ }
+ //If plain text
+ const extention: string = getExt(name);
+
+ if (result === "text") {
+ result = checkIsCode(extention);
+
+ }
+ //If octet stream result, second chance: file extention
+ if (result === DEF_GEN_MIME) {
+ result = extensionSelector(extention);
+ }
+
+ return { url: mimeUrlList[result], mimeResume: result };
+}
+interface ResultFileIco {
+ url: string;
+ mimeResume: string;
+}
+/**
+ * set of registered mimes on MDN
+ * https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types
+ *
+ */
+interface MimeSelector {
+ [mime: string]: string;
+}
+
+const mimeUrlList: MimeSelector = {
+ img: "https://ssl.gstatic.com/docs/doclist/images/mediatype/icon_1_image_x16.png",
+ video: "https://ssl.gstatic.com/docs/doclist/images/mediatype/icon_1_video_x16.png",
+ audio: "https://ssl.gstatic.com/docs/doclist/images/mediatype/icon_1_audio_x16.png",
+ aac: aac,
+ accdb: accdb,
+ abw: abw,
+ arc: freearc,
+ avi: avi,
+ azw: azw,
+ octet: octet,
+ bmp: bmp,
+ bz: bz,
+ bz2: bz2,
+ cda: cda,
+ csh: csh,
+ css: css,
+ csv: csv,
+ docx: docx,
+ drawio: drawio,
+ eot: eot,
+ epub: epub,
+ gzip: gzip,
+ gif: gif,
+ html: html,
+ //ico: ico,
+ icalendar: icalendar,
+ jar: jar,
+ jpeg: jpeg,
+ javascript: javascript,
+ json: json,
+ jsonld: jsonld,
+ midi: midi,
+ // js: js,
+ mp3: mp3,
+ mp4: mp4,
+ mpeg: mpeg,
+ mpkg: mpkg,
+ mp2t: octet,
+ odp: odp,
+ ods: ods,
+ odt: odt,
+ oga: oga,
+ ogv: ogv,
+ ogx: ogx,
+ opus: opus,
+ otf: otf,
+ png: png,
+ pdf: pdf,
+ php: php,
+ pptx: pptx,
+ psd: psd,
+ rar: rar,
+ rtf: rtf,
+ sass: sass,
+ sh: sh,
+ //svg: svg,
+ swf: swf,
+ tar: tar,
+ tiff: tiff,
+ ttf: ttf,
+ //ts: ts,
+ typescript: typescript,
+ text: text,
+ vsd: vsd,
+ wav: wav,
+ weba: weba,
+ webm: webm,
+ webp: webp,
+ woff: woff,
+ wma: wma,
+ wmv: wmv,
+ xhtml: html,
+ xlsx: xlsx,
+ xml: xml,
+ xul: xul,
+ zip: zip,
+ // threegp: threegp,
+ sevenzip: sevenzip,
+ python: python,
+ java: java,
+ react: react,
+ vue: vue,
+
+};
\ No newline at end of file
diff --git a/src/files-ui/core/reader/imageOrientation.ts b/src/files-ui/core/reader/imageOrientation.ts
new file mode 100644
index 0000000000000000000000000000000000000000..964e82124b468f764bbdeb1318d72d736a5884d6
--- /dev/null
+++ b/src/files-ui/core/reader/imageOrientation.ts
@@ -0,0 +1,38 @@
+/**
+ * Resize an image resolution given maxWidth and maxHeight
+ *
+ * Should be called with await
+ * @param base64Str a string representation of an imae file
+ * @param maxWidth the max width of he image
+ * @param maxHeight the max height of he image
+ * @returns the resized image
+ */
+export function getImageOrientation(
+ imageSource: string | undefined,
+): Promise<"landscape" | "portrait" > {
+ return new Promise((resolve, reject) => {
+ if (!imageSource || imageSource.length === 0) {
+ reject("landscape");
+ return;
+ }
+ try {
+ let img: HTMLImageElement = new Image();
+ img.src = imageSource;
+ img.onload = () => {
+ let width: number = img.width;
+ let height: number = img.height;
+ if (width > height) {
+ resolve("landscape");
+ } else {
+ resolve("portrait");
+ }
+ }
+ } catch (error) {
+ if (process.env.NODE_ENV === "development") {
+ console.error("An error ocurred when trying to get the image orientation");
+ }
+ reject("landscape");
+ }
+ });
+}
+
diff --git a/src/files-ui/core/reader/index.ts b/src/files-ui/core/reader/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f166764e80155958b50f4027e421df7e9f791036
--- /dev/null
+++ b/src/files-ui/core/reader/index.ts
@@ -0,0 +1,3 @@
+export { readAsArrayBuffer, readAsBinaryString, readAsDataURL, readAsText } from "./readers";
+export { resizeImage } from "./resizeImage";
+export { getImageOrientation } from "./imageOrientation";
\ No newline at end of file
diff --git a/src/files-ui/core/reader/readers.ts b/src/files-ui/core/reader/readers.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a2a51fe92bc17f20b223a029ddbb86ec076dbafc
--- /dev/null
+++ b/src/files-ui/core/reader/readers.ts
@@ -0,0 +1,87 @@
+/**
+ * Reads an image (or other type) file as data URL in a promise way,
+ * so you can use await.
+ * If other kind of file is sent, this function will read it anyway
+ * and will return a string that contains the URL representation
+ * @param file File or Blob object
+ * @returns data URL of the file
+ */
+export const readAsDataURL = (file: File | Blob): Promise<string | undefined> => {
+ return new Promise<string | undefined>((resolve, reject) => {
+ try {
+ const reader = new FileReader();
+ reader.onload = function () {
+ resolve(reader.result as string);
+ }
+ reader.readAsDataURL(file);
+ } catch (error) {
+ reject(undefined);
+ }
+ });
+}
+
+
+
+/**
+ * Reads a file as Text in a promise way, so you can use await.
+ * If other kind of file is sent, this function will read it anyway
+ * and will return a string that contains the URL representation
+ * @param file File or Blob object
+ * @param encoding The type of encoding such as "base64"
+ * @returns data text of the file
+ */
+export const readAsText = (file: File | Blob, encoding?: string): Promise<string | undefined> => {
+ return new Promise<string | undefined>((resolve, reject) => {
+ try {
+ const reader = new FileReader();
+ reader.onload = function () {
+ resolve(reader.result as string);
+ }
+ reader.readAsText(file, encoding ? encoding : "base64");
+ } catch (error) {
+ reject(undefined);
+ }
+ });
+}
+
+
+
+/**
+ * Reads a file and return the raw binary data from the file.
+ * @param file File or Blob object
+ * @param encoding The type of encoding such as "base64"
+ * @returns raw binary data of the file
+ */
+export const readAsBinaryString = (file: File | Blob): Promise<string | undefined> => {
+ return new Promise<string | undefined>((resolve, reject) => {
+ try {
+ const reader = new FileReader();
+ reader.onload = function () {
+ resolve(reader.result as string);
+ }
+ reader.readAsBinaryString(file);
+ } catch (error) {
+ reject(undefined);
+ }
+ });
+}
+
+/**
+ * Reads a file and returns an ArrayBuffer representing the file's data
+ * @param file File or blob object
+ * @param encoding The type of encoding such as "base64"
+ * @returns ArrayBuffer representation of the file
+ */
+export const readAsArrayBuffer = (file: File | Blob): Promise<string | undefined> => {
+ return new Promise<string | undefined>((resolve, reject) => {
+ try {
+ const reader = new FileReader();
+ reader.onload = function () {
+ resolve(reader.result as string);
+ }
+ reader.readAsArrayBuffer(file);
+ } catch (error) {
+ reject(undefined);
+ }
+ });
+}
\ No newline at end of file
diff --git a/src/files-ui/core/reader/resizeImage.ts b/src/files-ui/core/reader/resizeImage.ts
new file mode 100644
index 0000000000000000000000000000000000000000..47b15ab643d49d74d5792f56548a4cb17c2a4b8c
--- /dev/null
+++ b/src/files-ui/core/reader/resizeImage.ts
@@ -0,0 +1,62 @@
+/**
+ * Resize an image resolution given maxWidth and maxHeight
+ *
+ * Should be called with await
+ * @param base64Str a string representation of an imae file
+ * @param maxWidth the max width of he image
+ * @param maxHeight the max height of he image
+ * @returns the resized image
+ */
+export function resizeImage(
+ base64Str: string,
+ maxWidth = 135,
+ maxHeight = 120
+): Promise<string | undefined> {
+ return new Promise((resolve, reject) => {
+ try {
+ let img: HTMLImageElement = new Image();
+ img.src = base64Str;
+ img.onload = () => {
+ let canvas: HTMLCanvasElement = document.createElement('canvas');
+ const MAX_WIDTH: number = maxWidth;
+ const MAX_HEIGHT: number = maxHeight;
+ let width: number = img.width;
+ let height: number = img.height;
+
+ if (maxWidth > width && maxHeight > height) {
+ resolve(base64Str);
+ } else
+ if (width > height) {
+ if (width > MAX_WIDTH) {
+ height *= MAX_WIDTH / width;
+ width = MAX_WIDTH;
+ }
+ } else {
+ if (height > MAX_HEIGHT) {
+ width *= MAX_HEIGHT / height;
+ height = MAX_HEIGHT;
+ }
+ }
+ canvas.width = width
+ canvas.height = height
+ let ctx: CanvasRenderingContext2D | null = canvas.getContext('2d')
+ if (ctx) {
+ ctx.drawImage(img, 0, 0, width, height);
+ resolve(canvas.toDataURL());
+
+ } else {
+ if (process.env.NODE_ENV === "development") {
+ console.error("An error ocurred when trying to make a thumnail");
+ }
+ reject(undefined);
+ }
+ }
+ } catch (error) {
+ if (process.env.NODE_ENV === "development") {
+ console.error("An error ocurred when trying to make a thumnail");
+ }
+ reject(undefined);
+ }
+ });
+}
+
diff --git a/src/files-ui/core/ripple/index.ts b/src/files-ui/core/ripple/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..62b0479ebf58dffcbbed15c15c4eaed901021532
--- /dev/null
+++ b/src/files-ui/core/ripple/index.ts
@@ -0,0 +1 @@
+export { createFuiRippleFromDiv,createRippleButton } from "./ripple";
\ No newline at end of file
diff --git a/src/files-ui/core/ripple/ripple.ts b/src/files-ui/core/ripple/ripple.ts
new file mode 100644
index 0000000000000000000000000000000000000000..8e7626697b4dd67d8c789dabad0b692e5f053c78
--- /dev/null
+++ b/src/files-ui/core/ripple/ripple.ts
@@ -0,0 +1,85 @@
+import { asureColor, colourNameToHex, hexColorToRGB } from "../color";
+
+const asureRippleColor = (color: string): string => {
+ return hexColorToRGB(
+ asureColor(colourNameToHex(color)),
+ 0.4
+ );
+}
+
+
+export function createFuiRippleFromDiv
+ <T extends HTMLButtonElement | HTMLAnchorElement | HTMLDivElement>
+ (
+ fuiContainerAbs: T | null,
+ fuiContainerRel: T | null,
+ color: string
+ ) {
+ if (!fuiContainerRel || !fuiContainerAbs) return;
+
+ fuiContainerAbs.style.display = "block";
+ //removeRippleIfExist(fuiContainerRel, "dui-ripple");
+ // creating the span circle ripple
+ const circle: HTMLSpanElement = document.createElement("span");
+ //for searching
+ circle.id = "dui-ripple";
+ //for styles
+ circle.className = "ripple";
+ // calculates the diameter
+ const diameter: number = Math.max(
+ fuiContainerRel.clientWidth,
+ fuiContainerRel.clientHeight
+ );
+
+ //const rippleCircleRadius: number = diameter / 2;
+
+ //console.log("w,h", fuiContainerRel.clientWidth, fuiContainerRel.clientHeight);
+
+ circle.style.width = circle.style.height = `${diameter}px`;
+ circle.style.backgroundColor = asureRippleColor(color);
+
+ fuiContainerRel.appendChild(circle);
+ //remove trash
+ /* setTimeout(() => {
+ fuiContainerAbs.style.display = "none";
+ circle?.remove();
+ }, 501); */
+}
+
+
+export function createRippleButton<
+ T extends HTMLButtonElement | HTMLAnchorElement | HTMLDivElement
+>(event: React.MouseEvent<T, MouseEvent>, variant: string, color: string) {
+ const buttonAnchorDiv = event.currentTarget;
+
+ const circle: HTMLSpanElement = document.createElement("span");
+
+ const diameter = Math.max(
+ buttonAnchorDiv.clientWidth,
+ buttonAnchorDiv.clientHeight
+ );
+ const radius = diameter / 2;
+
+ circle.style.width = circle.style.height = `${diameter}px`;
+ /* circle.style.left = `${event.clientX - radius
+ }px`;
+ circle.style.top = `${event.clientY - radius
+ }px`; */
+
+ circle.classList.add("ripple");
+
+ if (variant !== "contained") {
+ circle.style.backgroundColor = hexColorToRGB(
+ asureColor(colourNameToHex(color)),
+ 0.4
+ );
+ } else {
+
+ circle.style.backgroundColor = hexColorToRGB("#ffffff", 0.4);
+ }
+ buttonAnchorDiv.appendChild(circle);
+
+ setTimeout(() => {
+ circle?.remove();
+ }, 501);
+}
\ No newline at end of file
diff --git a/src/files-ui/core/synthetic-file/SyntheticFile.ts b/src/files-ui/core/synthetic-file/SyntheticFile.ts
new file mode 100644
index 0000000000000000000000000000000000000000..0ff5ed1f5f070edd414a9538cf449a2e0a019be1
--- /dev/null
+++ b/src/files-ui/core/synthetic-file/SyntheticFile.ts
@@ -0,0 +1,834 @@
+
+/**
+ * A syntetic file creator.
+ * Very useful for tests
+ */
+export abstract class SyntheticFile {
+ /**
+ *
+ * @param name the file name
+ * @param size the file size
+ * @param type the file type
+ * @returns
+ */
+ static createFile = (name: string, size: number, type: string) => {
+ const file = new File([], name, { type });
+ Object.defineProperty(file, "size", {
+ get() {
+ return size;
+ },
+ });
+ return file;
+ };
+ /**
+ *
+ * @param size the file size
+ * @returns a syntetic File object instance
+ */
+ static create_aac = (size?: number): File => {
+ return SyntheticFile.createFile("acc_audio-file-with-large-name.aac", size ? size : 3516516, "audio/aac");
+ }
+ /**
+ *
+ * @param size the file size
+ * @returns a syntetic File object instance
+ */
+ static create_abw = (size?: number): File => {
+ return SyntheticFile.createFile("abiword-file-with-large-name.abw", size ? size : 3516516, "application/x-abiword");
+ }
+ /**
+ *
+ * @param size the file size
+ * @returns a syntetic File object instance
+ */
+ static create_freearc = (size?: number): File => {
+ return SyntheticFile.createFile("freearc-file-with-large-name.arc", size ? size : 3516516, "application/x-freearc");
+ }
+ /**
+ *
+ * @param size the file size
+ * @returns a syntetic File object instance
+ */
+ static create_avi = (size?: number): File => {
+ return SyntheticFile.createFile("avi-file-with-large-name.avi", size ? size : 3516516, "video/x-msvideo");
+ }
+ /**
+ *
+ * @param size the file size
+ * @returns a syntetic File object instance
+ */
+ static create_azw = (size?: number): File => {
+ return SyntheticFile.createFile("amazon_kindle_ebook-file-with-large-name.azw", size ? size : 3516516, "application/vnd.amazon.ebook");
+ }
+ /**
+ *
+ * @param size the file size
+ * @returns a syntetic File object instance
+ */
+ static create_octet = (size?: number): File => {
+ return SyntheticFile.createFile("binary_octet_stream-file-with-large-name.bin", size ? size : 3516516, "application/octet-stream");
+ }
+ /**
+ *
+ * @param size the file size
+ * @returns a syntetic File object instance
+ */
+ static create_bmp = (size?: number): File => {
+ return SyntheticFile.createFile("bit_map-file-with-large-name.bmp", size ? size : 3516516, "image/bmp");
+ }
+ /**
+ *
+ * @param size the file size
+ * @returns a syntetic File object instance
+ */
+ static create_bz = (size?: number): File => {
+ return SyntheticFile.createFile("x_bzip-file-with-large-name.bz", size ? size : 3516516, "application/x-bzip");
+ }
+ /**
+ *
+ * @param size the file size
+ * @returns a syntetic File object instance
+ */
+ static create_bz2 = (size?: number): File => {
+ return SyntheticFile.createFile("x_bzip_2-file-with-large-name.bz2", size ? size : 3516516, "application/x-bzip2");
+ }
+ /**
+ *
+ * @param size the file size
+ * @returns a syntetic File object instance
+ */
+ static create_cda = (size?: number): File => {
+ return SyntheticFile.createFile("cd_audio-file-with-large-name.cda", size ? size : 3516516, "application/x-cdf");
+ }
+ /**
+ *
+ * @param size the file size
+ * @returns a syntetic File object instance
+ */
+ static create_csh = (size?: number): File => {
+ return SyntheticFile.createFile("test-file-with-large-name.csh", size ? size : 3516516, "application/x-csh");
+ }
+ /**
+ *
+ * @param size the file size
+ * @returns a syntetic File object instance
+ */
+ static create_css = (size?: number): File => {
+ return SyntheticFile.createFile("test-file-with-large-name.css", size ? size : 3516516, "text/css");
+ }
+ /**
+ *
+ * @param size the file size
+ * @returns a syntetic File object instance
+ */
+ static create_csv = (size?: number): File => {
+ return SyntheticFile.createFile("test-file-with-large-name.csv", size ? size : 3516516, "text/csv");
+ }
+ /**
+ *
+ * @param size the file size
+ * @returns a syntetic File object instance
+ */
+ static create_doc = (size?: number): File => {
+ return SyntheticFile.createFile("test-file-with-large-name.doc", size ? size : 3516516, "application/msword");
+ }
+ /**
+ *
+ * @param size the file size
+ * @returns a syntetic File object instance
+ */
+ static create_docx = (size?: number): File => {
+ return SyntheticFile.createFile("test-file-with-large-name.docx", size ? size : 3516516, "application/vnd.openxmlformats-officedocument.wordprocessingml.document");
+ }
+ /**
+ *
+ * @param size the file size
+ * @returns a syntetic File object instance
+ */
+ static create_eot = (size?: number): File => {
+ return SyntheticFile.createFile("test-file-with-large-name.eot", size ? size : 3516516, "application/vnd.ms-fontobject");
+ }
+ /**
+ *
+ * @param size the file size
+ * @returns a syntetic File object instance
+ */
+ static create_epub = (size?: number): File => {
+ return SyntheticFile.createFile("test-file-with-large-name.epub", size ? size : 3516516, "application/epub+zip");
+ }
+ /**
+ *
+ * @param size the file size
+ * @returns a syntetic File object instance
+ */
+ static create_gzip = (size?: number): File => {
+ return SyntheticFile.createFile("test-file-with-large-name.gz", size ? size : 3516516, "application/gzip");
+ }
+ /**
+ *
+ * @param size the file size
+ * @returns a syntetic File object instance
+ */
+ static create_gif = (size?: number): File => {
+ return SyntheticFile.createFile("test-file-with-large-name.gif", size ? size : 3516516, "image/gif");
+ }
+ /**
+ *
+ * @param size the file size
+ * @returns a syntetic File object instance
+ */
+ static create_htm = (size?: number): File => {
+ return SyntheticFile.createFile("test-file-with-large-name.htm", size ? size : 3516516, "text/html");
+ }
+ /**
+ *
+ * @param size the file size
+ * @returns a syntetic File object instance
+ */
+ static create_html = (size?: number): File => {
+ return SyntheticFile.createFile("test-file-with-large-name.html", size ? size : 3516516, "text/html");
+ }
+ /**
+ *
+ * @param size the file size
+ * @returns a syntetic File object instance
+ */
+ static create_ico = (size?: number): File => {
+ return SyntheticFile.createFile("test-file-with-large-name.ico", size ? size : 3516516, "image/vnd.microsoft.icon");
+ }
+ /**
+ *
+ * @param size the file size
+ * @returns a syntetic File object instance
+ */
+ static create_icalendar = (size?: number): File => {
+ return SyntheticFile.createFile("test-file-with-large-name.ics", size ? size : 3516516, "text/calendar");
+ }
+ /**
+ *
+ * @param size the file size
+ * @returns a syntetic File object instance
+ */
+ static create_jar = (size?: number): File => {
+ return SyntheticFile.createFile("test-file-with-large-name.jar", size ? size : 3516516, "application/java-archive");
+ }
+ /**
+ *
+ * @param size the file size
+ * @returns a syntetic File object instance
+ */
+ static create_jpeg = (size?: number): File => {
+ return SyntheticFile.createFile("test-file-with-large-name.jpeg", size ? size : 3516516, "image/jpeg");
+ }
+ /**
+ *
+ * @param size the file size
+ * @returns a syntetic File object instance
+ */
+ static create_jpg = (size?: number): File => {
+ return SyntheticFile.createFile("test-file-with-large-name.jpg", size ? size : 3516516, "image/jpeg");
+ }
+ /**
+ *
+ * @param size the file size
+ * @returns a syntetic File object instance
+ */
+ static create_js = (size?: number): File => {
+ return SyntheticFile.createFile("test-file-with-large-name.js", size ? size : 3516516, "text/javascript");
+ }
+ /**
+ *
+ * @param size the file size
+ * @returns a syntetic File object instance
+ */
+ static create_json = (size?: number): File => {
+ return SyntheticFile.createFile("test-file-with-large-name.json", size ? size : 3516516, "application/json");
+ }
+ /**
+ *
+ * @param size the file size
+ * @returns a syntetic File object instance
+ */
+ static create_jsonld = (size?: number): File => {
+ return SyntheticFile.createFile("test-file-with-large-name.jsonld", size ? size : 3516516, "application/ld+json");
+ }
+ /**
+ *
+ * @param size the file size
+ * @returns a syntetic File object instance
+ */
+ static create_mid = (size?: number): File => {
+ return SyntheticFile.createFile("test-file-with-large-name.mid", size ? size : 3516516, "audio/midi");
+ }
+ /**
+ *
+ * @param size the file size
+ * @returns a syntetic File object instance
+ */
+ static create_x_mid = (size?: number): File => {
+ return SyntheticFile.createFile("test-file-with-large-name.mid", size ? size : 3516516, "audio/x-midi");
+ }
+ /**
+ *
+ * @param size the file size
+ * @returns a syntetic File object instance
+ */
+ static create_midi = (size?: number): File => {
+ return SyntheticFile.createFile("test-file-with-large-name.midi", size ? size : 3516516, "audio/x-midi");
+ }
+ /**
+ *
+ * @param size the file size
+ * @returns a syntetic File object instance
+ */
+ static create_x_midi = (size?: number): File => {
+ return SyntheticFile.createFile("test-file-with-large-name.midi", size ? size : 3516516, "audio/x-midi");
+ }
+ /**
+ *
+ * @param size the file size
+ * @returns a syntetic File object instance
+ */
+ static create_mjs = (size?: number): File => {
+ return SyntheticFile.createFile("test-file-with-large-name.mjs", size ? size : 3516516, "text/javascript");
+ }
+ /**
+ *
+ * @param size the file size
+ * @returns a syntetic File object instance
+ */
+ static create_mp3 = (size?: number): File => {
+ return SyntheticFile.createFile("test-file-with-large-name.mp3", size ? size : 3516516, "audio/mpeg");
+ }
+ /**
+ *
+ * @param size the file size
+ * @returns a syntetic File object instance
+ */
+ static create_mp4 = (size?: number): File => {
+ return SyntheticFile.createFile("test-file-with-large-name.mp4", size ? size : 3516516, "video/mp4");
+ }
+ /**
+ *
+ * @param size the file size
+ * @returns a syntetic File object instance
+ */
+ static create_mpeg = (size?: number): File => {
+ return SyntheticFile.createFile("test-file-with-large-name.mpeg", size ? size : 3516516, "video/mpeg");
+ }
+ /**
+ *
+ * @param size the file size
+ * @returns a syntetic File object instance
+ */
+ static create_mpkg = (size?: number): File => {
+ return SyntheticFile.createFile("test-file-with-large-name.mpkg", size ? size : 3516516, "application/vnd.apple.installer+xml");
+ }
+ /**
+ *
+ * @param size the file size
+ * @returns a syntetic File object instance
+ */
+ static create_odp = (size?: number): File => {
+ return SyntheticFile.createFile("test-file-with-large-name.odp", size ? size : 3516516, "application/vnd.oasis.opendocument.presentation");
+ }
+ /**
+ *
+ * @param size the file size
+ * @returns a syntetic File object instance
+ */
+ static create_ods = (size?: number): File => {
+ return SyntheticFile.createFile("test-file-with-large-name.ods", size ? size : 3516516, "application/vnd.oasis.opendocument.spreadsheet");
+ }
+ /**
+ *
+ * @param size the file size
+ * @returns a syntetic File object instance
+ */
+ static create_odt = (size?: number): File => {
+ return SyntheticFile.createFile("test-file-with-large-name.odt", size ? size : 3516516, "application/vnd.oasis.opendocument.text");
+ }
+ /**
+ *
+ * @param size the file size
+ * @returns a syntetic File object instance
+ */
+ static create_oga = (size?: number): File => {
+ return SyntheticFile.createFile("test-file-with-large-name.oga", size ? size : 3516516, "audio/ogg");
+ }
+ /**
+ *
+ * @param size the file size
+ * @returns a syntetic File object instance
+ */
+ static create_ogv = (size?: number): File => {
+ return SyntheticFile.createFile("test-file-with-large-name.ogv", size ? size : 3516516, "video/ogg");
+ }
+ /**
+ *
+ * @param size the file size
+ * @returns a syntetic File object instance
+ */
+ static create_ogx = (size?: number): File => {
+ return SyntheticFile.createFile("test-file-with-large-name.ogx", size ? size : 3516516, "application/ogg");
+ }
+ /**
+ *
+ * @param size the file size
+ * @returns a syntetic File object instance
+ */
+ static create_opus = (size?: number): File => {
+ return SyntheticFile.createFile("test-file-with-large-name.opus", size ? size : 3516516, "audio/opus");
+ }
+ /**
+ *
+ * @param size the file size
+ * @returns a syntetic File object instance
+ */
+ static create_otf = (size?: number): File => {
+ return SyntheticFile.createFile("test-file-with-large-name.otf", size ? size : 3516516, "font/otf");
+ }
+ /**
+ *
+ * @param size the file size
+ * @returns a syntetic File object instance
+ */
+ static create_png = (size?: number): File => {
+ return SyntheticFile.createFile("test-file-with-large-name.png", size ? size : 3516516, "image/png");
+ }
+ /**
+ *
+ * @param size the file size
+ * @returns a syntetic File object instance
+ */
+ static create_pdf = (size?: number): File => {
+ return SyntheticFile.createFile("test-file-with-large-name.pdf", size ? size : 3516516, "application/pdf");
+ }
+ /**
+ *
+ * @param size the file size
+ * @returns a syntetic File object instance
+ */
+ static create_php = (size?: number): File => {
+ return SyntheticFile.createFile("test-file-with-large-name.php", size ? size : 3516516, "application/x-httpd-php");
+ }
+ /**
+ *
+ * @param size the file size
+ * @returns a syntetic File object instance
+ */
+ static create_ppt = (size?: number): File => {
+ return SyntheticFile.createFile("test-file-with-large-name.ppt", size ? size : 3516516, "application/vnd.ms-powerpoint");
+ }
+ /**
+ *
+ * @param size the file size
+ * @returns a syntetic File object instance
+ */
+ static create_pptx = (size?: number): File => {
+ return SyntheticFile.createFile("test-file-with-large-name.pptx", size ? size : 3516516, "application/vnd.openxmlformats-officedocument.presentationml.presentation");
+ }
+ /**
+ *
+ * @param size the file size
+ * @returns a syntetic File object instance
+ */
+ static create_rar = (size?: number): File => {
+ return SyntheticFile.createFile("test-file-with-large-name.rar", size ? size : 3516516, "application/vnd.rar");
+ }
+ /**
+ *
+ * @param size the file size
+ * @returns a syntetic File object instance
+ */
+ static create_rtf = (size?: number): File => {
+ return SyntheticFile.createFile("test-file-with-large-name.rtf", size ? size : 3516516, "application/rtf");
+ }
+ /**
+ *
+ * @param size the file size
+ * @returns a syntetic File object instance
+ */
+ static create_sh = (size?: number): File => {
+ return SyntheticFile.createFile("test-file-with-large-name.sh", size ? size : 3516516, "application/x-sh");
+ }
+ /**
+ *
+ * @param size the file size
+ * @returns a syntetic File object instance
+ */
+ static create_svg = (size?: number): File => {
+ return SyntheticFile.createFile("test-file-with-large-name.svg", size ? size : 3516516, "image/svg+xml");
+ }
+ /**
+ *
+ * @param size the file size
+ * @returns a syntetic File object instance
+ */
+ static create_swf = (size?: number): File => {
+ return SyntheticFile.createFile("test-file-with-large-name.swf", size ? size : 3516516, "application/x-shockwave-flash");
+ }
+ /**
+ *
+ * @param size the file size
+ * @returns a syntetic File object instance
+ */
+ static create_tar = (size?: number): File => {
+ return SyntheticFile.createFile("test-file-with-large-name.tar", size ? size : 3516516, "application/x-tar");
+ }
+ /**
+ *
+ * @param size the file size
+ * @returns a syntetic File object instance
+ */
+ static create_tif = (size?: number): File => {
+ return SyntheticFile.createFile("test-file-with-large-name.tif", size ? size : 3516516, "image/tiff");
+ }
+ /**
+ *
+ * @param size the file size
+ * @returns a syntetic File object instance
+ */
+ static create_tiff = (size?: number): File => {
+ return SyntheticFile.createFile("test-file-with-large-name.tiff", size ? size : 3516516, "image/tiff");
+ }
+ /**
+ *
+ * @param size the file size
+ * @returns a syntetic File object instance
+ */
+ static create_ts = (size?: number): File => {
+ return SyntheticFile.createFile("mp2t_video-file-with-large-name.ts", size ? size : 3516516, "video/mp2t");
+ }
+ /**
+ *
+ * @param size the file size
+ * @returns a syntetic File object instance
+ */
+ static create_ttf = (size?: number): File => {
+ return SyntheticFile.createFile("test-file-with-large-name.ttf", size ? size : 3516516, "font/ttf");
+ }
+ /**
+ *
+ * @param size the file size
+ * @returns a syntetic File object instance
+ */
+ static create_text = (size?: number): File => {
+ return SyntheticFile.createFile("test-file-with-large-name.txt", size ? size : 3516516, "text/plain");
+ }
+ /**
+ *
+ * @param size the file size
+ * @returns a syntetic File object instance
+ */
+ static create_typescript = (size?: number): File => {
+ return SyntheticFile.createFile("typescript-file-with-large-name.ts", size ? size : 3516516, "text/plain");
+ }
+ /**
+ *
+ * @param size the file size
+ * @returns a syntetic File object instance
+ */
+ static create_vsd = (size?: number): File => {
+ return SyntheticFile.createFile("ms_visio-file-with-large-name.vsd", size ? size : 3516516, "application/vnd.visio");
+ }
+ /**
+ *
+ * @param size the file size
+ * @returns a syntetic File object instance
+ */
+ static create_wav = (size?: number): File => {
+ return SyntheticFile.createFile("wav_audio-file-with-large-name.wav", size ? size : 3516516, "audio/wav");
+ }
+ /**
+ *
+ * @param size the file size
+ * @returns a syntetic File object instance
+ */
+ static create_weba = (size?: number): File => {
+ return SyntheticFile.createFile("web_audio-file-with-large-name.weba", size ? size : 3516516, "audio/webm");
+ }
+ /**
+ *
+ * @param size the file size
+ * @returns a syntetic File object instance
+ */
+ static create_webm = (size?: number): File => {
+ return SyntheticFile.createFile("web_video-file-with-large-name.webm", size ? size : 3516516, "video/webm");
+ }
+ /**
+ *
+ * @param size the file size
+ * @returns a syntetic File object instance
+ */
+ static create_webp = (size?: number): File => {
+ return SyntheticFile.createFile("web_image-file-with-large-name.webp", size ? size : 3516516, "image/webp");
+ }
+ /**
+ *
+ * @param size the file size
+ * @returns a syntetic File object instance
+ */
+ static create_woff = (size?: number): File => {
+ return SyntheticFile.createFile("test-file-with-large-name.woff", size ? size : 3516516, "font/woff");
+ }
+ /**
+ *
+ * @param size the file size
+ * @returns a syntetic File object instance
+ */
+ static create_woff2 = (size?: number): File => {
+ return SyntheticFile.createFile("test-file-with-large-name.woff2", size ? size : 3516516, "font/woff2");
+ }
+ /**
+ *
+ * @param size the file size
+ * @returns a syntetic File object instance
+ */
+ static create_xhtml = (size?: number): File => {
+ return SyntheticFile.createFile("test-file-with-large-name.xhtml", size ? size : 3516516, "application/xhtml+xml");
+ }
+ /**
+ *
+ * @param size the file size
+ * @returns a syntetic File object instance
+ */
+ static create_xlsx = (size?: number): File => {
+ return SyntheticFile.createFile("test-file-with-large-name.xls", size ? size : 3516516, "application/vnd.ms-excel");
+ }
+ /**
+ *
+ * @param size the file size
+ * @returns a syntetic File object instance
+ */
+ static create_xls = (size?: number): File => {
+ return SyntheticFile.createFile("test-file-with-large-name.xlsx", size ? size : 3516516, "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet");
+ }
+ /**
+ *
+ * @param size the file size
+ * @returns a syntetic File object instance
+ */
+ static create_xml = (size?: number): File => {
+ return SyntheticFile.createFile("xml-file-with-large-name.xml", size ? size : 3516516, "application/xml");
+ }
+ /**
+ *
+ * @param size the file size
+ * @returns a syntetic File object instance
+ */
+ static create_xml_txt = (size?: number): File => {
+ return SyntheticFile.createFile("xml_plain_text-file-with-large-name.xml", size ? size : 3516516, "application/xml");
+ }
+ /**
+ *
+ * @param size the file size
+ * @returns a syntetic File object instance
+ */
+ static create_xul = (size?: number): File => {
+ return SyntheticFile.createFile("test-file-with-large-name.xul", size ? size : 3516516, "application/vnd.mozilla.xul+xml");
+ }
+ /**
+ *
+ * @param size the file size
+ * @returns a syntetic File object instance
+ */
+ static create_zip = (size?: number): File => {
+ return SyntheticFile.createFile("zip-file-with-large-name.zip", size ? size : 3516516, "application/zip");
+ }
+ /**
+ *
+ * @param size the file size
+ * @returns a syntetic File object instance
+ */
+ static create_3gp = (size?: number): File => {
+ return SyntheticFile.createFile("3gp_video-file-with-large-name.3gp", size ? size : 3516516, "video/3gpp");
+ }
+ /**
+ *
+ * @param size the file size
+ * @returns a syntetic File object instance
+ */
+ static create_3gp2 = (size?: number): File => {
+ return SyntheticFile.createFile("3gp2_video-file-with-large-name.3g2", size ? size : 3516516, "video/3gpp2");
+ }
+ /**
+ *
+ * @param size the file size
+ * @returns a syntetic File object instance
+ */
+ static create_3gp_a = (size?: number): File => {
+ return SyntheticFile.createFile("3gp_audio-file-with-large-name.3gp", size ? size : 3516516, "audio/3gpp");
+ }
+ /**
+ *
+ * @param size the file size
+ * @returns a syntetic File object instance
+ */
+ static create_3gp_v = (size?: number): File => {
+ return SyntheticFile.createFile("3gp_audio-file-with-large-name.3gp2", size ? size : 3516516, "audio/3gpp2");
+ }
+ /**
+ *
+ * @param size the file size
+ * @returns a syntetic File object instance
+ */
+ static create_7z = (size?: number): File => {
+ return SyntheticFile.createFile("seven_zip-file-with-large-name.7z", size ? size : 3516516, "application/x-7z-compressed");
+ }
+ /**
+ *
+ * @param size the file size
+ * @returns a syntetic File object instance
+ */
+ static create_python = (size?: number): File => {
+ return SyntheticFile.createFile("python-file-with-large-name.py", size ? size : 3516516, "text/plain");
+ }
+ /**
+ *
+ * @param size the file size
+ * @returns a syntetic File object instance
+ */
+ static create_java = (size?: number): File => {
+ return SyntheticFile.createFile("java-file-with-large-name.java", size ? size : 3516516, "text/plain");
+ }
+ /**
+ *
+ * @param size the file size
+ * @returns a syntetic File object instance
+ */
+ static create_react = (size?: number): File => {
+ return SyntheticFile.createFile("react_jsx-file-with-large-name.jsx", size ? size : 3516516, "text/plain");
+ }
+ /**
+ *
+ * @param size the file size
+ * @returns a syntetic File object instance
+ */
+ static create_vue = (size?: number): File => {
+ return SyntheticFile.createFile("vue-file-with-large-name.vue", size ? size : 3516516, "text/plain");
+ }
+ /**
+ * Creates an array of fake (synthetic) files
+ * @param size the file size for all synthetic files
+ * @returns an array of all file icon preview supported files
+ */
+ static createFileListMiscelanious = (size?: number): File[] => {
+
+ let listFile: File[] = [];
+
+ listFile.push(SyntheticFile.create_aac(size));
+ listFile.push(SyntheticFile.create_abw(size));
+ listFile.push(SyntheticFile.create_freearc(size));
+ listFile.push(SyntheticFile.create_avi(size));
+ listFile.push(SyntheticFile.create_azw(size));
+ listFile.push(SyntheticFile.create_octet(size));
+ listFile.push(SyntheticFile.create_bmp(size));
+ listFile.push(SyntheticFile.create_bz(size));
+ listFile.push(SyntheticFile.create_bz2(size));
+ listFile.push(SyntheticFile.create_cda(size));
+ listFile.push(SyntheticFile.create_csh(size));
+ listFile.push(SyntheticFile.create_css(size));
+ listFile.push(SyntheticFile.create_csv(size));
+ listFile.push(SyntheticFile.create_doc(size));
+ listFile.push(SyntheticFile.create_docx(size));
+ listFile.push(SyntheticFile.create_eot(size));
+ listFile.push(SyntheticFile.create_epub(size));
+ listFile.push(SyntheticFile.create_gzip(size));
+ listFile.push(SyntheticFile.create_gif(size));
+ listFile.push(SyntheticFile.create_htm(size));
+ listFile.push(SyntheticFile.create_html(size));
+ listFile.push(SyntheticFile.create_ico(size));
+ listFile.push(SyntheticFile.create_icalendar(size));
+ listFile.push(SyntheticFile.create_jar(size));
+ listFile.push(SyntheticFile.create_jpeg(size));
+ listFile.push(SyntheticFile.create_jpg(size));
+ listFile.push(SyntheticFile.create_js(size));
+ listFile.push(SyntheticFile.create_json(size));
+ listFile.push(SyntheticFile.create_jsonld(size));
+ listFile.push(SyntheticFile.create_mid(size));
+ listFile.push(SyntheticFile.create_midi(size));
+ listFile.push(SyntheticFile.create_x_mid(size));
+ listFile.push(SyntheticFile.create_x_midi(size));
+ listFile.push(SyntheticFile.create_mjs(size));
+ listFile.push(SyntheticFile.create_mp3(size));
+ listFile.push(SyntheticFile.create_mp4(size));
+ listFile.push(SyntheticFile.create_mpeg(size));
+ listFile.push(SyntheticFile.create_mpkg(size));
+ listFile.push(SyntheticFile.create_odp(size));
+ listFile.push(SyntheticFile.create_ods(size));
+ listFile.push(SyntheticFile.create_odt(size));
+ listFile.push(SyntheticFile.create_oga(size));
+ listFile.push(SyntheticFile.create_ogv(size));
+ listFile.push(SyntheticFile.create_ogx(size));
+ listFile.push(SyntheticFile.create_opus(size));
+ listFile.push(SyntheticFile.create_otf(size));
+ listFile.push(SyntheticFile.create_png(size));
+ listFile.push(SyntheticFile.create_pdf(size));
+ listFile.push(SyntheticFile.create_php(size));
+ listFile.push(SyntheticFile.create_ppt(size));
+ listFile.push(SyntheticFile.create_pptx(size));
+ listFile.push(SyntheticFile.create_rar(size));
+ listFile.push(SyntheticFile.create_rtf(size));
+ listFile.push(SyntheticFile.create_sh(size));
+ listFile.push(SyntheticFile.create_svg(size));
+ listFile.push(SyntheticFile.create_swf(size));
+ listFile.push(SyntheticFile.create_tar(size));
+ listFile.push(SyntheticFile.create_tif(size));
+ listFile.push(SyntheticFile.create_tiff(size));
+ listFile.push(SyntheticFile.create_ts(size));
+ listFile.push(SyntheticFile.create_ttf(size));
+ listFile.push(SyntheticFile.create_text(size));
+ listFile.push(SyntheticFile.create_typescript(size));
+ listFile.push(SyntheticFile.create_vsd(size));
+ listFile.push(SyntheticFile.create_wav(size));
+ listFile.push(SyntheticFile.create_weba(size));
+ listFile.push(SyntheticFile.create_webm(size));
+ listFile.push(SyntheticFile.create_webp(size));
+ listFile.push(SyntheticFile.create_woff(size));
+ listFile.push(SyntheticFile.create_woff2(size));
+ listFile.push(SyntheticFile.create_xhtml(size));
+ listFile.push(SyntheticFile.create_xlsx(size));
+ listFile.push(SyntheticFile.create_xls(size));
+ listFile.push(SyntheticFile.create_xml(size));
+ listFile.push(SyntheticFile.create_xml_txt(size));
+ listFile.push(SyntheticFile.create_xul(size));
+ listFile.push(SyntheticFile.create_zip(size));
+ //listFile.push(SyntheticFile.create_3gp(size));
+ //listFile.push(SyntheticFile.create_3gp2(size));
+ //listFile.push(SyntheticFile.create_3gp_a(size));
+ //listFile.push(SyntheticFile.create_3gp_v(size));
+ //listFile.push(SyntheticFile.create_7z(size));
+ listFile.push(SyntheticFile.create_python(size));
+ listFile.push(SyntheticFile.create_java(size));
+ listFile.push(SyntheticFile.create_react(size));
+ listFile.push(SyntheticFile.create_vue(size));
+
+ return listFile;
+ }
+}
+///////////////////// SHORTCUTS
+/**
+ * Create a list of synthetic files with different mime types
+ * @param size the file size for each synthetic file
+ * @returns a list of synthetic file
+ */
+export const createListOfMultiTypeFile = (size?: number): File[] => {
+ return SyntheticFile.createFileListMiscelanious(size);
+}
+
+/**
+ * Creates a synthetic file.
+ * By default, creates a png image file
+ * @param name the file name to show. By default is set to "png-image-file-with-large-name.png"
+ * @param size the size in bytes of the file. By default this value is set to 455555
+ * @param type the mime type of the file. By default is set to "image/png"
+ * @returns
+ */
+export const createSyntheticFile = (
+ name = "png-image-file-with-large-name.png",
+ size = 455555,
+ type = "image/png",
+): File => {
+ return SyntheticFile.createFile(name, size, type);
+}
\ No newline at end of file
diff --git a/src/files-ui/core/synthetic-file/index.ts b/src/files-ui/core/synthetic-file/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..3e508f6acfa1e1f28aa8bc1eda989abecbc4f41d
--- /dev/null
+++ b/src/files-ui/core/synthetic-file/index.ts
@@ -0,0 +1,2 @@
+export { SyntheticFile, createListOfMultiTypeFile, createSyntheticFile } from "./SyntheticFile";
+export { makeSyntheticExtFile } from "./syntheticfileGenerator";
\ No newline at end of file
diff --git a/src/files-ui/core/synthetic-file/syntheticfileGenerator.ts b/src/files-ui/core/synthetic-file/syntheticfileGenerator.ts
new file mode 100644
index 0000000000000000000000000000000000000000..3c3ea5b59c060096cd0110d8d5bf6c98d0b20079
--- /dev/null
+++ b/src/files-ui/core/synthetic-file/syntheticfileGenerator.ts
@@ -0,0 +1,55 @@
+import { ExtFile, UPLOADSTATUS } from "../types";
+import { FileIdGenerator, getRandomInt } from "../utils";
+import { listOfErrors } from "../validation";
+import { getRandomUploadStatus } from "../validation/randomStatus";
+
+/**
+ * Make a validated file that is ready to be used on FileItem component,
+ * if valid is not set, a random operation will decide whether the file is valid or not
+ * If valid is false, then the natural order is not to be uploadable and wont have upload message nor upload status
+ * If valid is true, then file can be uploaded and can have upload message if the status is succes or error
+ * @param file The file
+ * @param valid true if it is a valid file, otherwise is false
+ * @param uploadStatus the current upload status. If not given a random upload status will be set
+ * @param uploadMessage the upload message after uploading
+ * @returns a Vaidated File object
+ */
+ export const makeSyntheticExtFile = (
+ file?: File ,
+ valid = (Math.ceil(Math.random() * 28) % 2 === 0),
+ uploadStatus?: UPLOADSTATUS,
+ uploadMessage?: string
+): ExtFile => {
+ //if valid, naturally, can be uploaded
+ let errors: string[] | undefined = [];
+ let newUpoadStatus = uploadStatus || getRandomUploadStatus();
+
+ let customUploadMessage: string | undefined = uploadMessage || "";
+ if (valid) {
+ //we can decide according to upload status
+ if (!uploadMessage) {
+ switch (newUpoadStatus) {
+ case "error": customUploadMessage = "Upload failed. There was an error"; break;
+ case "success": customUploadMessage = "File was successfully upload"; break;
+ default: uploadMessage = undefined;
+ }
+ }
+ errors = undefined;
+ } else {
+ //if not valid, just show error messages
+ const randInt: number = getRandomInt(0, 3);
+ errors.push(listOfErrors[randInt]);
+ newUpoadStatus = undefined;
+ customUploadMessage = undefined;
+ }
+ //now make a File Validated instance
+ const newFileValidated: ExtFile = {
+ id: FileIdGenerator.getNextId(),
+ valid: valid,
+ file: file,
+ uploadStatus: newUpoadStatus,
+ uploadMessage: customUploadMessage,
+ errors: errors
+ };
+ return newFileValidated;
+}
diff --git a/src/files-ui/core/types/ExtFile.ts b/src/files-ui/core/types/ExtFile.ts
new file mode 100644
index 0000000000000000000000000000000000000000..782b3f6b0faca0b88a80be18b4b8606885e213ec
--- /dev/null
+++ b/src/files-ui/core/types/ExtFile.ts
@@ -0,0 +1,313 @@
+import { createSyntheticFile } from "../synthetic-file";
+import { FileIdGenerator } from "../utils/IdGenerator";
+import { listOfErrors } from "../validation";
+import { UPLOADSTATUS } from "./UploadStatus";
+import { ServerResponse } from "./uploadTypes";
+
+/**
+ * ExtFile === "Extended File".
+ * This object "extends" the File Object
+ */
+export declare type ExtFile = {
+ /**
+ * An identifier for the extFile
+ */
+ id?: number | string | undefined;
+ /**
+ * The file object. Used mostly when user selects or drops files in the client sid.
+ */
+ file?: File;
+ /**
+ * The name of the file. Used mostly for displaying file data from server.
+ */
+ name?: string;
+ /**
+ * The type of the file. Used mostly for displaying file data from server.
+ */
+ type?: string;
+ /**
+ * The size of the file. Used mostly for displaying file data from server.
+ */
+ size?: number;
+
+ imageUrl?: string;
+ /**
+ * a flag that determines whether the file is valid, not valid or it is not validated.
+ */
+ valid?: boolean;
+ /**
+ * The list of errors when the file was validated
+ */
+ errors?: string[];
+ /**
+ * A message that shows the result of the upload process
+ */
+ uploadMessage?: string;
+ /**
+ * The current upload status. (e.g. "uploading")
+ */
+ uploadStatus?: UPLOADSTATUS | undefined;
+ /**
+ * The XMLHttpRequest object for performing uploads to a server
+ */
+ xhr?: XMLHttpRequest;
+ /**
+ * The current percentage of upload progress.
+ * This value will have a higher priority over the upload progress value calculated inside the component.
+ * @default undefined
+ */
+ progress?: number;
+ /**
+ * The additional data that will be sent to the server
+ * when filesare uploaded individually
+ */
+ extraUploadData?: Record<string, any>;
+ /**
+ * Any kind of extra data that could be needed
+ *
+ */
+ extraData?: Object;
+ /**
+ * The upload response from server
+ */
+ serverResponse?: ServerResponse;
+ /**
+ * Url to perform a GET request in order to download the file.
+ * This action is triggered when download button is clicked or pressed.
+ * In case onDownload prop is given
+ */
+ downloadUrl?: string;
+}
+
+/**
+ * A class definition for ExtFile.
+ * This class has the purpose to allow the creation of instances
+ * of an ExtFile for performing complex operations that cannot be
+ * accomplished just by using the ExtFile type.
+ * For instance, it can help in changing the value of some attributes
+ * across different scopes thanks to memory reference.
+ */
+export class ExtFileInstance {
+ /**
+ * An identifier for the extFile
+ */
+ public id?: number | string;
+ /**
+ * The file object. Used mostly when user selects or drops files in the client sid.
+ */
+ public file?: File;
+ /**
+ * The name of the file. Used mostly for displaying file data from server.
+ */
+ public name?: string;
+ /**
+ * The type of the file. Used mostly for displaying file data from server.
+ */
+ public type?: string;
+ /**
+ * The size of the file. Used mostly for displaying file data from server.
+ */
+ public size?: number;
+
+ public imageUrl?: string;
+ /**
+ * A flag that determines whether the file is valid, not valid or it is not validated.
+ */
+ public valid?: boolean;
+ /**
+ * The list of errors when the file was validated
+ */
+ public errors?: string[];
+ /**
+ * A message that shows the result of the upload process
+ */
+ public uploadMessage?: string;
+ /**
+ * The current upload status. (e.g. "uploading")
+ */
+ public uploadStatus?: UPLOADSTATUS | undefined;
+ /**
+ * The current upload progress
+ */
+ public progress?: number;
+ /**
+ * The XMLHttpRequest object for performing uploads to a server
+ */
+ public xhr?: XMLHttpRequest;
+ /**
+ * The additional data that will be sent to the server
+ */
+ public extraData?: Record<string, any>;
+ /**
+ * The additional data that will be sent to the server
+ * when filesare uploaded individually
+ */
+ public extraUploadData?: Record<string, any>;
+ /**
+ * The upload response from server
+ */
+ public serverResponse?: ServerResponse;
+ /**
+ * Url to perform a GET request in order to download the file.
+ * This action is triggered when download button is clicked or pressed.
+ * In case onDownload prop is given
+ */
+ public downloadUrl?: string;
+ constructor(extFile: ExtFile) {
+ const {
+ id,
+ file,
+ name,
+ size,
+ type,
+ imageUrl,
+ valid,
+ errors,
+ uploadMessage,
+ uploadStatus,
+ progress,
+ xhr,
+ extraData,
+ extraUploadData,
+ serverResponse,
+ downloadUrl
+ } = extFile;
+
+ this.id = id;
+ this.file = file;
+ this.name = name;
+ this.size = size;
+ this.type = type;
+ this.imageUrl = imageUrl;
+
+ this.valid = valid;
+ this.errors = errors;
+ this.uploadStatus = uploadStatus;
+ this.uploadMessage = uploadMessage;
+ this.progress = progress;
+ this.xhr = xhr;
+
+ this.extraData = extraData;
+ this.extraUploadData = extraUploadData;
+ this.serverResponse = serverResponse;
+
+ this.downloadUrl = downloadUrl;
+ }
+ /**
+ * method under construction
+ */
+ private static kamuiFile() {
+
+ }
+
+ static toExtFile(extFile: ExtFileInstance): ExtFile {
+ const
+ {
+ id,
+ file,
+ name,
+ size,
+ type,
+ imageUrl,
+ valid,
+ errors,
+ uploadMessage,
+ uploadStatus,
+ progress,
+ xhr,
+ extraData,
+ extraUploadData,
+ serverResponse,
+ downloadUrl
+ } = extFile;
+ return {
+ id,
+ file,
+ name,
+ size,
+ type,
+ imageUrl,
+ valid,
+ errors,
+ uploadMessage,
+ uploadStatus,
+ progress,
+ xhr,
+ extraData,
+ extraUploadData,
+ serverResponse,
+ downloadUrl
+ };
+ }
+ toExtFile(): ExtFile {
+ const {
+ id,
+ file,
+ name,
+ size,
+ type,
+ imageUrl,
+ valid,
+ errors,
+ uploadMessage,
+ uploadStatus,
+ progress,
+ xhr,
+ extraData,
+ extraUploadData,
+ serverResponse,
+ downloadUrl
+ } = this;
+
+ const result: ExtFile = {
+ id,
+ file,
+ name,
+ size,
+ type,
+ imageUrl,
+ valid,
+ errors,
+ uploadMessage,
+ uploadStatus,
+ progress,
+ xhr,
+ extraData,
+ extraUploadData,
+ serverResponse,
+ downloadUrl
+ };
+ return result;
+ }
+
+ static mock = (): ExtFileInstance => {
+ return new ExtFileInstance(
+ extFileMock()
+ );
+ }
+}
+export const extFileMock = (): ExtFile => {
+ return {
+ id: FileIdGenerator.getNextId(),
+ name: "fileName.ext",
+ size: 28 * 1024 * 1024,
+ type: "files-ui/mock",
+ file: createSyntheticFile("fileName.ext", 28 * 1024 * 1024, "files-ui/mock"),
+ errors: listOfErrors,
+ uploadMessage: "uploaded",
+ uploadStatus: "preparing",
+ valid: false,
+ progress: 28,
+ xhr: new XMLHttpRequest(),
+ extraData: {
+ extraData1: "files-ui is the best",
+ extraData2: {
+ id: 1,
+ name: "files-ui.mock"
+ },
+ deleted: true
+ },
+ downloadUrl: "https://www.files-ui.com/mock/file-download"
+ }
+}
+
diff --git a/src/files-ui/core/types/ExtFileManager.ts b/src/files-ui/core/types/ExtFileManager.ts
new file mode 100644
index 0000000000000000000000000000000000000000..eb69160f7d48361e14e62450df53eaaed86f69df
--- /dev/null
+++ b/src/files-ui/core/types/ExtFileManager.ts
@@ -0,0 +1,231 @@
+import { ExtFileInstance, ExtFile } from "./ExtFile";
+import { UPLOADSTATUS } from "./UploadStatus";
+
+export class ExtFileManager {
+ private static nextId: number = 0;
+ static fileLists: Record<number | string, ExtFileInstance[] | undefined> = {};
+ /**
+ * Increases the id counter and returns the next id available.
+ * @returns the next integer id available
+ */
+ public static getNextId(): number {
+ ExtFileManager.nextId++;
+ return ExtFileManager.nextId;
+ }
+ /**
+ * Updates a dui file list given an id
+ * @param id id of the fileList
+ * @param extFiles list of DuiFiles forinitializing the array
+ * @returns the id of the fileList
+ */
+ public static setFileList(
+ id: number | string | undefined,
+ extFilesInstances: ExtFileInstance[]
+ ): number | string {
+ if (!id) {
+ return 0;
+ } else {
+ ExtFileManager.fileLists[id] = [...extFilesInstances];
+
+ return id;
+ }
+
+ }
+ /**
+ * Generates a new ID
+ * @returns the next Id asociated with a DuiFIle list
+ */
+ public static createFileListMap(): number {
+ const nextId: number = ExtFileManager.getNextId();
+ ExtFileManager.fileLists[nextId] = [];
+
+ return nextId;
+ }
+
+ /**
+ * Deletes a list map
+ * @returns the next Id asociated with a DuiFIle list
+ */
+ public static removeFileListMap(id?: number | string): number | string {
+ if (!id) {
+ return 0;
+ } else {
+ try {
+ ExtFileManager.fileLists[id] = undefined;
+ return id;
+ } catch (error) {
+
+ console.error("Error on remove", error);
+ return 0;
+ }
+ }
+ }
+ /**
+ *
+ * @param id the id of the dropzone
+ * @returns
+ */
+ public static getExtFileInstanceList(
+ id?: number | string
+ ): ExtFileInstance[] | undefined {
+ try {
+ if (!id) {
+ return undefined;
+ }
+ return ExtFileManager.fileLists[id];
+ } catch (error) {
+ console.error("Error on getExtFileInstanceList", error);
+ return undefined;
+ }
+ }
+ /**
+ * Updates(replaces) the extFile list on preparing stage and returns the new array.
+ * Removes the non valid files if cleanOnUpload is true and validateFiles is also true
+ * Then sets on preparing stage all files according to the following creiteria:
+ * If theuploadStatus is diferent than "sucess" AND
+ * then, update the files on preparing stage. Otherwise keep the extFile props.
+ * Finally, updates the ExtFileInstance list on ExtFileManager.
+ * @param dropzoneId the id to access the right list
+ * @param localFiles the list of extFiles
+ * @param validateFiles flag that indicates that validation is active or o¿not
+ * @param cleanOnUpload flag to determine whther to clena the list oof non valid files or not
+ * @returns a list of ExtFileInstance
+ */
+ public static setFileListMapPreparing(
+ dropzoneId: number | string,
+ localFiles: ExtFile[],
+ validateFiles: boolean,
+ cleanOnUpload: boolean
+ ): ExtFileInstance[] | undefined {
+
+ if (!(typeof dropzoneId === "number" || typeof dropzoneId === "string")) return undefined;
+
+ try {
+ let resultExtList: ExtFileInstance[] = [];
+ //remove non valids if cleanOnUpload is true and validateFiles is also true
+ let temLocalFiles: ExtFile[] = [];
+
+ if (cleanOnUpload) {
+ // clean on Upload is true, so non valid files must be removed
+ temLocalFiles = localFiles.filter(extFile => extFile.valid)
+ console.log("temLocalFiles filter", temLocalFiles);
+ }
+
+ if (validateFiles) {
+ // validation flag was set to true, so only valid=true files will be set to "preparing"
+
+ //so, only valid files was kept in the temLocalfiles array
+ //now set the preparing state only for files with uploadStatus !== "success"
+ temLocalFiles =
+ temLocalFiles
+ .map(extFile => {
+ if (extFile.uploadStatus !== "success" && extFile.valid) {
+ return { ...extFile, uploadStatus: "preparing" }
+ } else {
+ return { ...extFile }
+ }
+ });
+ } else {
+ // all files will be set to "preparing" whether the valid value
+ // except those diles with uploadStatus ==="success"
+ temLocalFiles =
+ temLocalFiles
+ .map(extFile => {
+ if (extFile.uploadStatus !== "success") {
+ return { ...extFile, uploadStatus: "preparing" }
+ } else {
+ return { ...extFile }
+ }
+ });
+ }
+
+ console.log("FileManagerLog RESULT temLocalFiles", temLocalFiles);
+
+ //sets on preparing stage all files according to the following criteria:
+ // If the uploadStatus is diferent than "sucess" AND
+ // If validateFiles is true and the file is true OR validateFiles is false
+ // then update the files on preparing stage. Otherwise keep the extFile props.
+ /* for (let i = 0; i < resultExtList.length; i++) {
+ const extFileInstance: ExtFileInstance = resultExtList[i];
+ const { valid, uploadStatus } = extFileInstance;
+ console.log("upload setFileListMapPreparing resultExtList[i]", (uploadStatus !== "success") && ((validateFiles && valid) || !validateFiles));
+
+ if ((uploadStatus !== "success") && ((validateFiles && valid) || !validateFiles))
+ resultExtList[i].uploadStatus = "preparing";
+ } */
+
+ resultExtList = temLocalFiles.map(F => new ExtFileInstance(F));
+ console.log("FileManagerLog RESULT resultExtList", resultExtList);
+
+ const resultSet = ExtFileManager.setFileList(dropzoneId, resultExtList);
+
+ return resultExtList;
+ // return ExtFileManager.fileLists[dropzoneId];
+ } catch (error) {
+ console.error("upload setFileListMapPreparing Error on get List", error);
+ return undefined;
+ }
+
+ }
+
+
+
+ /**
+ * Updates(replaces) the extFile list on preparing stage and returns the new array.
+ * Removes the non valid files if cleanOnUpload is true and validateFiles is also true
+ * Then sets on preparing stage all files according to the following creiteria:
+ * If theuploadStatus is diferent than "sucess" AND
+ * then, update the files on preparing stage. Otherwise keep the extFile props.
+ * Finally, updates the ExtFileInstance list on ExtFileManager.
+ * @param dropzoneId the id to access the right list
+ * @param localFiles the list of extFiles
+ * @param validateFiles flag that indicates that validation is active or o¿not
+ * @param cleanOnUpload flag to determine whther to clena the list oof non valid files or not
+ * @returns a list of ExtFileInstance
+ */
+ public static setFileListMapPreparing2(
+ dropzoneId: number | string,
+ localFiles: ExtFile[],
+ validateFiles: boolean,
+ cleanOnUpload: boolean
+ ): ExtFileInstance[] | undefined {
+
+ ExtFileManager.setFileList(dropzoneId, localFiles.map(F => new ExtFileInstance({ ...F, uploadStatus: "preparing" })));
+
+ return ExtFileManager.getExtFileInstanceList(dropzoneId);
+ }
+
+
+
+ /**
+ *
+ * @param dropzoneId
+ * @param index
+ * @param incommingDuiFile
+ * @returns
+ */
+ /* public static updateFileListMapPreparingById(
+ dropzoneId: number,
+ index: number,
+ incommingDuiFile: ExtFileInstance
+ ): ExtFileInstance[] | undefined {
+ if (!(typeof dropzoneId === "number") || !(typeof index === "number") || index > 0) return undefined;
+ const extFileList: ExtFileInstance[] | undefined = ExtFileManager.fileLists[dropzoneId];
+
+ if (!(extFileList && extFileList.length > 0)) return undefined;
+ extFileList[index]=
+ try {
+ ExtFileManager.setFileList(dropzoneId, [
+ ...localFiles.map(
+ (x) =>
+ new ExtFileInstance({ ...x, uploadStatus: "preparing" })
+ ),
+ ]);
+ return ExtFileManager.fileLists[dropzoneId];
+ } catch (error) {
+ console.error("Error on get List", error);
+ return undefined;
+ }
+
+ } */
+}
\ No newline at end of file
diff --git a/src/files-ui/core/types/FileListMap.ts b/src/files-ui/core/types/FileListMap.ts
new file mode 100644
index 0000000000000000000000000000000000000000..bd02c8ee8e8a2fef59fc5c0ab85f816eb300dd42
--- /dev/null
+++ b/src/files-ui/core/types/FileListMap.ts
@@ -0,0 +1,5 @@
+import { ExtFileInstance } from "./ExtFile";
+
+export declare type ExtFileListMap = {
+ [id: number | string]: ExtFileInstance[] | undefined;
+}
\ No newline at end of file
diff --git a/src/files-ui/core/types/NamedColor.ts b/src/files-ui/core/types/NamedColor.ts
new file mode 100644
index 0000000000000000000000000000000000000000..3e15aa00711ca1b6b8967aae85b3cf69891122e4
--- /dev/null
+++ b/src/files-ui/core/types/NamedColor.ts
@@ -0,0 +1,6 @@
+/**
+ * Interface to describe a named color
+ */
+ export interface NamedColor {
+ [colorName: string]: string;
+}
\ No newline at end of file
diff --git a/src/files-ui/core/types/UploadConfig.ts b/src/files-ui/core/types/UploadConfig.ts
new file mode 100644
index 0000000000000000000000000000000000000000..52953c2b2cc643c1095064ea013ec0aa04eab8fc
--- /dev/null
+++ b/src/files-ui/core/types/UploadConfig.ts
@@ -0,0 +1,68 @@
+import { Method } from "./method"
+
+export type UploadConfig = {
+ /**
+ * The url endpoint to upload the file
+ * e.g. https://www.myasomwbackend/uploads/file
+ */
+ url?: string;
+ /**
+ * upload method, can be POST | PUT | PATCH
+ * @default "POST"
+ */
+ method?: Method;
+ /**
+ * request headers for http request
+ * e.g.
+ * ```jsx
+ * headers = {
+ * "content-type": "multipart/form-data",
+ * Authorization: "Bearer YOUR_BEARER_TOKEN_GOES_HERE",
+ * }
+ * ```
+ */
+ headers?: Record<string, string>;
+ /**
+ * the label to use in request
+ * On server this must be the label to get the file
+ * @default "file"
+ */
+ uploadLabel?: string;
+ /**
+ * Flag for indicating whther to remove the non-valid files
+ * before starting the upload process.
+ * This flag is valid only if validation is enable
+ */
+ cleanOnUpload?: boolean;
+ /**
+ * The time that will last the "preparing" stage
+ * By default is 1500 miliseconds = 1.5 seconds
+ */
+ preparingTime?: number;
+ /**
+ * A message to show in the footer when the uploading process happens
+ */
+ uploadingMessage?: string;
+ /**
+ * If true, onDrop event or file selection not only will make Dropzone to return the list of files, but also
+ * it will start the upload stage for the files if at least url was set
+ * By default is false
+ */
+ autoUpload?: boolean;
+}
+
+export const createDuiUploadConfig = (
+ url?: string,
+ method?: Method,
+ headers?: Record<string, string>,
+ uploadLabel?: string,
+ cleanonUpload?: boolean
+) => {
+ return {
+ url,
+ method,
+ headers,
+ uploadLabel,
+ cleanonUpload
+ }
+}
\ No newline at end of file
diff --git a/src/files-ui/core/types/UploadStatus.ts b/src/files-ui/core/types/UploadStatus.ts
new file mode 100644
index 0000000000000000000000000000000000000000..efa7f881ec5f2174803779f9287a15ea0d72668f
--- /dev/null
+++ b/src/files-ui/core/types/UploadStatus.ts
@@ -0,0 +1,6 @@
+export type UPLOADSTATUS =
+ "preparing" |
+ "aborted" |
+ "uploading" |
+ "success" |
+ "error";
diff --git a/src/files-ui/core/types/behaviur.ts b/src/files-ui/core/types/behaviur.ts
new file mode 100644
index 0000000000000000000000000000000000000000..651a3c3d0014dda8d129311ae7036138b7dd389c
--- /dev/null
+++ b/src/files-ui/core/types/behaviur.ts
@@ -0,0 +1,4 @@
+/**
+ * View mode for File Items inside dropzone
+ */
+ export declare type Behaviour = "add" | "replace";
\ No newline at end of file
diff --git a/src/files-ui/core/types/index.ts b/src/files-ui/core/types/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..7d33e781ebaef4aba95210936e127aec55e5d0c2
--- /dev/null
+++ b/src/files-ui/core/types/index.ts
@@ -0,0 +1,23 @@
+
+export type { Behaviour } from "./behaviur";
+
+export type { ExtFile } from "./ExtFile";
+export { ExtFileInstance, extFileMock } from "./ExtFile";
+
+export { ExtFileManager } from "./ExtFileManager";
+
+export type { ExtFileListMap } from "./FileListMap";
+
+export type { Localization, FunctionLabel, ComponentLocalizer, LocalLabels } from "./localization";
+
+export type { Method } from "./method";
+
+export type { NamedColor } from "./NamedColor";
+
+export type { UPLOADSTATUS } from "./UploadStatus";
+
+export type { ServerResponse, UploadPromiseResponse, UploadResponse } from "./uploadTypes";
+
+export type { CustomValidateFileResponse, FileValidatorProps } from "./validation";
+
+export type { UploadConfig } from "./UploadConfig";
\ No newline at end of file
diff --git a/src/files-ui/core/types/localization.ts b/src/files-ui/core/types/localization.ts
new file mode 100644
index 0000000000000000000000000000000000000000..8a206f36c0d7da9cc3183cc7d31d6aa986e13cfb
--- /dev/null
+++ b/src/files-ui/core/types/localization.ts
@@ -0,0 +1,23 @@
+export type Localization =
+ "EN-en"
+ | "ES-es"
+ | "FR-fr"
+ | "IT-it"
+ | "PT-pt"
+ | "RU-ru"
+ | "ZH-cn"
+ | "ZH-hk";
+
+
+
+export type FunctionLabel = ((s1: string | number, s2?: string | number, s3?: string) => string);
+
+export interface LocalLabels {
+ [label: string]: string | FunctionLabel | LocalLabels;
+}
+//export const DropzoneLocalizer
+
+
+export type ComponentLocalizer = {
+ [language in Localization]: LocalLabels;
+};
\ No newline at end of file
diff --git a/src/files-ui/core/types/method.ts b/src/files-ui/core/types/method.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5078e9a6bb3439b3b0267f039cb93151504456f4
--- /dev/null
+++ b/src/files-ui/core/types/method.ts
@@ -0,0 +1,13 @@
+/**
+ * Method to be used for request
+ */
+export declare type Method = "POST" | "PUT" | "PATCH";
+
+/**
+ *
+ * @param method the method in string format
+ * @returns true if method is included in ["POST", "PUT", "PATCH"]
+ */
+export const idValidMethod = (method: string): boolean => {
+ return ["POST", "PUT", "PATCH"].includes(method.toLowerCase());
+}
\ No newline at end of file
diff --git a/src/files-ui/core/types/uploadTypes.ts b/src/files-ui/core/types/uploadTypes.ts
new file mode 100644
index 0000000000000000000000000000000000000000..82a709dae94e017ca9bb724be21eecd304d58870
--- /dev/null
+++ b/src/files-ui/core/types/uploadTypes.ts
@@ -0,0 +1,24 @@
+import { ExtFile } from "./ExtFile";
+
+export declare type UploadResponse_ = {
+ id: number | string | undefined;
+ uploadedFile: ExtFile;
+}
+
+export declare type UploadPromiseResponse = {
+ uploadResponse: UploadResponse;
+ uploadedFile: ExtFile;
+}
+
+/////////
+export declare type UploadResponse = {
+ id: number | string | undefined;
+ serverResponse: ServerResponse | {};
+ uploadedFile: ExtFile;
+}
+export type ServerResponse = {
+ success: boolean;
+ message: string;
+ payload: any;
+}
+
diff --git a/src/files-ui/core/types/validation.ts b/src/files-ui/core/types/validation.ts
new file mode 100644
index 0000000000000000000000000000000000000000..aff255726cc1cdbe7c43a81e2be3e2cd8fabc86a
--- /dev/null
+++ b/src/files-ui/core/types/validation.ts
@@ -0,0 +1,24 @@
+
+export declare type FileValidatorProps = {
+ /**
+ * max file size in bytes
+ */
+ maxFileSize?: number;
+ /**
+ * a comma separated list of mime types or file extensions.
+ */
+ accept?: string;
+}
+
+export declare type CustomValidateFileResponse = {
+ /**
+ * if true, that means the file is valid
+ */
+ valid: boolean,
+ /**
+ * the list of erros associated with an specific file
+ */
+ errors?: string[]
+}
+
+
diff --git a/src/files-ui/core/upload/index.ts b/src/files-ui/core/upload/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..515c08747b197779f75d88500b4c3cf9aeeae9ed
--- /dev/null
+++ b/src/files-ui/core/upload/index.ts
@@ -0,0 +1,23 @@
+export {
+ FilesUIUpload, uploadPromiseXHR,
+ FuiUpload,
+ completeUploadResult,
+ instantPreparingToUploadOne,
+ preparingToUploadOne,
+ sleepTransition,
+ toUploadableExtFileList,
+ unableToUploadResult,
+ unexpectedErrorUploadResult,
+ uploadOnePromiseXHR,
+} from "./upload";
+/* export {
+ FuiUpload,
+ completeUploadResult,
+ instantPreparingToUploadOne,
+ preparingToUploadOne,
+ sleepTransition,
+ toUploadableExtFileList,
+ unableToUploadResult,
+ unexpectedErrorUploadResult,
+ uploadOnePromiseXHR
+} from "./upload.utils"; */
\ No newline at end of file
diff --git a/src/files-ui/core/upload/upload.ts b/src/files-ui/core/upload/upload.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9d619bb35cbac14adec6ce72a635b877b7001f7a
--- /dev/null
+++ b/src/files-ui/core/upload/upload.ts
@@ -0,0 +1,632 @@
+import { ExtFile, ExtFileInstance, Method, UPLOADSTATUS } from "../types";
+import { ServerResponse, UploadResponse } from "../types/uploadTypes";
+export const makeServerResponse = (success: boolean, message: string, payload: any): ServerResponse => {
+ const result: ServerResponse = { success: success, message: message, payload: payload } as ServerResponse;
+ return result;
+}
+export function uploadFile(
+ file: File,
+ url: string,
+ method?: Method,
+ label?: string,
+ headers?: Record<string, string>
+): Promise<ServerResponse> {
+ return new Promise((resolve, reject) => {
+ let uploadResult: ServerResponse = makeServerResponse(false, "", {});
+ const finalMethod: string = method && ["POST", "PUT", "PATCH"].includes(method.toLocaleLowerCase()) ? method : "POST";
+
+ //XMLHttpRequest Object
+ const xhr: XMLHttpRequest = new XMLHttpRequest();
+ xhr.upload.onload = () => {
+ console.log("uploadFile onLoad", xhr.readyState, xhr.response);
+ };
+ xhr.upload.ontimeout = () => {
+ uploadResult = makeServerResponse(false, "Timeout error", {});
+ resolve(uploadResult);
+ };
+ xhr.upload.onabort = () => {
+ uploadResult = makeServerResponse(false, "Upload aborted", {});
+ resolve(uploadResult);
+ };
+ xhr.onreadystatechange = async (e) => {
+ console.log("uploadFile onreadystatechange", xhr.readyState, xhr.response);
+ if (xhr.readyState === 4 && xhr.response !== "") {
+ let fuiServerRes: ServerResponse;
+ try {
+ const jsonResponse = JSON.parse(xhr.response);
+ const success: boolean = jsonResponse.success;
+ const message: string = jsonResponse.message;
+ const payload: any = jsonResponse.payload;
+
+ console.log("uploadFile ====> status", success);
+ console.log("uploadFile ====> message", message);
+ console.log("uploadFile ====> payload", payload);
+
+ fuiServerRes = {
+ success: typeof success === "boolean" ? success : false,
+ message: typeof message === "string" ? message : "Error on response",
+ payload: payload || {}
+ }
+ resolve(fuiServerRes);
+ } catch (error) {
+ fuiServerRes = {
+ success: false,
+ message: "Unexpected error: " + error,
+ payload: {}
+ }
+ console.log("uploadFile ERROR", error);
+ resolve(fuiServerRes);
+ }
+ } else {
+ console.log("uploadFile Naranjas Changed: ", xhr.readyState, xhr.response);
+ }
+
+ }
+ // open request
+
+ xhr.open(finalMethod, url, true);
+
+ //headers
+ const headerKeys: string[] = Object.keys(headers || {});
+ //const headerValues: string[] = Object.values(headers);
+ for (let i = 0; i < headerKeys.length && headers; i++) {
+ console.log("uploadFile headers", headerKeys[i], headers[headerKeys[i]]);
+ xhr.setRequestHeader(
+ headerKeys[i],
+ headers[headerKeys[i]]
+ );
+ }
+
+ //start uploading
+ const formData = new FormData();
+ formData.append(label || "file", file);
+ xhr.send(formData);
+ });
+
+
+}
+export function uploadFormData(
+ file: File,
+ url: string,
+ method?: Method,
+ label?: string,
+ headers?: Record<string, string>
+): Promise<ServerResponse> {
+ return new Promise((resolve, reject) => {
+ let uploadResult: ServerResponse = { success: false, message: "", payload: {} };
+
+
+
+ resolve(uploadResult);
+ });
+}
+
+/**
+ * Uploads one formData object to a given endpoint in a promisified way
+ * @param xhr XMLHTTPrequest object
+ * @param method method for uploading
+ * @param endpoint endpoint to upload the file
+ * @param data FromData object to perform multipart form data upload
+ * @param headers the set of headers
+ * @returns a server response that consists on {status, payload, message}
+ */
+export const FilesUIUpload = (
+ xhr: XMLHttpRequest,
+ method: Method,
+ endpoint: string,
+ data: FormData,
+ headers: Record<string, string>
+) => {
+ return new Promise<ServerResponse>((resolve, reject) => {
+ console.log("uploadFile", xhr, method, endpoint, data, headers);
+
+ xhr.upload.onload = () => {
+ console.log("uploadFile onLoad", xhr.readyState, xhr.response);
+ };
+ xhr.upload.ontimeout = () => {
+ //onError("Timeout error");
+ resolve(
+ {
+ success: false,
+ message: "Timeout error",
+ payload: {}
+ }
+ );
+ };
+
+ xhr.upload.onabort = () => {
+ resolve(
+ {
+ success: false,
+ message: "Upload aborted",
+ payload: {}
+ }
+ );
+ };
+ // listen for `progress` event
+ //currently listening on FileItem component hook
+ xhr.onreadystatechange = async (e) => {
+ //console.log("Finished", xhr);
+ console.log("uploadFile onreadystatechange", xhr.readyState, xhr.response);
+ if (xhr.readyState === 4 && xhr.response !== "") {
+ let fuiServerRes: ServerResponse;
+ try {
+ const jsonResponse = JSON.parse(xhr.response);
+ const success: any = jsonResponse.success;
+ const message: string = jsonResponse.message;
+ const payload: any = jsonResponse.payload;
+ console.log("uploadFile ====> status", success);
+ console.log("uploadFile ====> message", message);
+ console.log("uploadFile ====> payload", payload);
+
+ fuiServerRes = {
+ success: typeof success === "boolean" ? success : false,
+ message: typeof message === "string" ? message : "Error on response",
+ payload: payload || {}
+ }
+ resolve(fuiServerRes);
+ } catch (error) {
+ fuiServerRes = {
+ success: false,
+ message: "Unexpected error",
+ payload: {}
+ }
+ console.log("uploadFile ERROR", error);
+ resolve(fuiServerRes);
+ }
+ } else {
+ console.log("uploadFile Naranjas Changed to " + xhr.readyState);
+ }
+ };
+ // open request
+ xhr.open(method, endpoint, true);
+ const headerKeys: string[] = Object.keys(headers);
+ //const headerValues: string[] = Object.values(headers);
+ for (let i = 0; i < headerKeys.length; i++) {
+ console.log("uploadFile FuiUpload headers", headerKeys[i], headers[headerKeys[i]]);
+ xhr.setRequestHeader(
+ headerKeys[i],
+ headers[headerKeys[i]]
+ );
+ }
+ //start uploading
+ xhr.send(data);
+ });
+
+};
+
+/**
+ *
+ * @param file the extended file to be uploaded
+ * @param url the endpoint
+ * @param method the method for uploading
+ * @param headers headers for request
+ * @returns
+ */
+export const uploadPromiseXHR = async (
+ file: ExtFile,
+ url: string,
+ method: Method,
+ headers?: Record<string, string>
+): Promise<UploadResponse> => {
+ return new Promise(async (resolve, reject) => {
+ try {
+ const uploader: XMLHttpRequest | undefined = file.xhr;
+ if (!uploader) {
+ resolve(
+ {
+ uploadedFile:
+ {
+ ...file,
+ uploadMessage: "Unable to upload. xhr object was not provided",
+ uploadStatus: "error"
+ },
+
+ id: file.id,
+ serverResponse: {}
+
+ }
+ );
+ return;
+ }
+
+ const localMethod: Method = method || "POST";
+
+ const fileToUpload: File = file.file as File;
+
+ const formData = new FormData();
+
+ formData.append("file", fileToUpload);
+ formData.append("otherValue", "HAAAAAAAAAAAAAAa");
+
+ console.log("FORMDATA", formData);
+ let responseFui: ServerResponse;
+ //stablish events
+ responseFui = await FilesUIUpload(
+ uploader,
+ localMethod,
+ url,
+ formData,
+ headers || {});
+
+
+ if (responseFui.success) {
+ // status is true
+ resolve(
+ {
+ id: file.id,
+ serverResponse: responseFui,
+ uploadedFile:
+ {
+ ...file,
+ uploadMessage: responseFui.message,
+ uploadStatus: "success"
+ },
+
+
+ }
+
+ );
+ } else {
+ // status is false
+ resolve(
+ {
+ id: file.id,
+ serverResponse: responseFui,
+ uploadedFile:
+ {
+ ...file,
+ uploadMessage: responseFui.message,
+ uploadStatus: "error"
+ },
+
+
+ }
+ );
+ }
+ } catch (error) {
+ // on error
+ console.log("uploadPromiseXHR uploadPromiseXHR ERROR", error);
+ resolve(
+ {
+ id: file.id,
+ serverResponse: {},
+ uploadedFile:
+ {
+ ...file,
+ uploadMessage: "Unexpected error",
+ uploadStatus: "error"
+ },
+
+
+
+ }
+ );
+ }
+ });
+};
+
+
+/// refactorizar, entregar solamente
+///input: file o formData, url, method, headers y label on backend
+// {payload, success, message:str}
+
+
+export const unexpectedErrorUploadResult = (extFile: ExtFile): UploadResponse => {
+ return {
+ id: extFile.id,
+ uploadedFile:
+ {
+ ...extFile,
+ uploadMessage: "Unable to upload. xhr object was not provided",
+ uploadStatus: "error"
+ },
+ serverResponse: {
+ }
+ }
+}
+export const unableToUploadResult = (
+ extFile: ExtFile
+): UploadResponse => {
+ return {
+ id: extFile.id,
+ uploadedFile: {
+ ...extFile,
+ uploadMessage: "Unable to upload. XHR was not provided",
+ uploadStatus: "error"
+ },
+ serverResponse: {
+ }
+ }
+}
+export const completeUploadResult = (
+ extFile: ExtFile,
+ serverResponse: ServerResponse,
+ result: UPLOADSTATUS
+): UploadResponse => {
+ return {
+ id: extFile.id,
+ uploadedFile: {
+ ...extFile,
+ uploadMessage: serverResponse.message,
+ uploadStatus: result
+ },
+ serverResponse: serverResponse
+ }
+}
+export const uploadOnePromiseXHR = async (
+ extFile: ExtFile,
+ url: string,
+ method?: Method,
+ headers?: Record<string, string>,
+ uploadLabel?: string,
+ extraData?: Record<string, any>
+): Promise<UploadResponse> => {
+ return new Promise(async (resolve, reject) => {
+ try {
+ const uploader: XMLHttpRequest | undefined = extFile.xhr;
+ if (!uploader) {
+ const duiUploadResponse: UploadResponse = unableToUploadResult(extFile);
+ resolve(duiUploadResponse);
+ return;
+ }
+ const localMethod: Method = (method) || "POST";
+ const fileToUpload: File = extFile.file as File;
+
+ const formData = new FormData();
+ if (typeof uploadLabel === "string" && uploadLabel.length > 0) {
+ formData.append(uploadLabel, fileToUpload
+ //, extFile.file?.name
+ );
+ //add extraData that will be obtained from req.body
+
+ } else
+ formData.append("file", fileToUpload);
+
+ const finalExtraData: Record<string, any> = { otherValue: "other valueee haaaa", param2: { tecnica: "KIKOHUUUU", friend: "Chaos", age: 25 } };
+
+ if (finalExtraData) {
+ const extraDataKeys: string[] = Object.keys(finalExtraData);
+ extraDataKeys.forEach(key => {
+ const finalValue: string = typeof finalExtraData[key] === "string" ? finalExtraData[key] : JSON.stringify(finalExtraData[key]);
+ formData.append(key, finalValue);
+
+ });
+ }
+ let serverResponse: ServerResponse;
+
+ //console.log();
+ serverResponse = await FuiUpload(uploader, localMethod, url, formData, headers || {});
+
+ if (serverResponse.success) {
+ const duiUploadResponse: UploadResponse = completeUploadResult(extFile, serverResponse, "success");
+ resolve(duiUploadResponse);
+ } else {
+ // success is false
+ const duiUploadResponse: UploadResponse = completeUploadResult(extFile, serverResponse, "error");
+ resolve(duiUploadResponse);
+ }
+ } catch (error) {
+ // on error
+ console.log("uploadOnePromiseXHR ERROR", error);
+ const duiUploadResponse: UploadResponse = unableToUploadResult(extFile);
+ resolve(duiUploadResponse);
+ }
+ });
+};
+/**
+ * Uploads one formData object to a given endpoint in a promisified way
+ * @param xhr XMLHTTPrequest object
+ * @param method method for uploading
+ * @param endpoint endpoint to upload the file
+ * @param data FromData object to perform multipart form data
+ * @param headers the set of headers
+ * @returns a dui server response that consists on {success, payload, message}
+ */
+export const FuiUpload = (
+ xhr: XMLHttpRequest,
+ method: Method,
+ endpoint: string,
+ data: FormData,
+ headers: Record<string, string>
+) => {
+ return new Promise<ServerResponse>((resolve, reject) => {
+ console.log("FuiUpload params", xhr, method, endpoint, data, headers);
+
+ xhr.upload.onload = () => {
+ console.log("FuiUpload onLoad", xhr.readyState, xhr.response);
+
+ };
+
+ xhr.upload.ontimeout = () => {
+ //onError("Timeout error");
+ resolve(
+ {
+ success: false,
+ message: "Timeout error",
+ payload: {}
+ }
+ );
+ };
+
+ xhr.upload.onabort = () => {
+ resolve(
+ {
+ success: false,
+ message: "Upload aborted",
+ payload: {}
+ }
+ );
+ };
+ // listen for `progress` event
+ //currently listening on FileItem component hook
+ xhr.onreadystatechange = async (e) => {
+ //console.log("Finished", xhr);
+ console.log("FuiUpload onreadystatechange", xhr.readyState, xhr.response, xhr);
+ let duiRes = {
+ success: false,
+ message: "Unexpected error",
+ payload: {}
+ }
+ if (xhr.readyState === 4) {
+ if (xhr.response !== "") {
+ //there is th answer
+ let duiRes: ServerResponse;
+ try {
+ const jsonResponse = JSON.parse(xhr.response);
+ const success: any = jsonResponse.success;
+ const message: string = jsonResponse.message;
+ const payload: any = jsonResponse.payload;
+
+ duiRes = {
+ success: typeof success === "boolean" ? success : false,
+ message: typeof message === "string" ? message : "Error on message response",
+ payload: payload || {}
+ }
+ resolve(duiRes);
+ } catch (error) {
+ duiRes = {
+ success: false,
+ message: "Error when parsing JSON response",
+ payload: {}
+ }
+ console.log("FuiUpload ERROR", error);
+ resolve(duiRes);
+ }
+ } else {
+ //error unexpected
+ duiRes = {
+ success: false,
+ message: "Unexpected error",
+ payload: {}
+ }
+ resolve(duiRes);
+ }
+ } else {
+ console.log("FuiUpload NOT YET" + xhr.readyState);
+ }
+
+ /* if (xhr.readyState === 4 && xhr.response !== "") {
+ let duiRes: ServerResponse;
+ try {
+ const jsonResponse = JSON.parse(xhr.response);
+ const success: any = jsonResponse.success;
+ const message: string = jsonResponse.message;
+ const payload: any = jsonResponse.payload;
+ console.log("FuiUpload ====> success", success);
+ console.log("FuiUpload ====> message", message);
+ console.log("FuiUpload====> payload", payload);
+
+ duiRes = {
+ success: typeof success === "boolean" ? success : false,
+ message: typeof message === "string" ? message : "Error on response",
+ payload: payload || {}
+ }
+ resolve(duiRes);
+ } catch (error) {
+ duiRes = {
+ success: false,
+ message: "Unexpected error",
+ payload: {}
+ }
+ console.log("FuiUpload ERROR", error);
+ resolve(duiRes);
+ }
+ } else {
+ console.log("FuiUpload Naranjas Changed to " + xhr.readyState);
+ const duiRes = {
+ success: false,
+ message: "Unexpected error",
+ payload: {}
+ }
+ resolve(duiRes);
+ } */
+ };
+ // open request
+ xhr.open(method, endpoint, true);
+ const headerKeys: string[] = Object.keys(headers);
+ //const headerValues: string[] = Object.values(headers);
+ for (let i = 0; i < headerKeys.length; i++) {
+ console.log("FuiUpload headers", headerKeys[i], headers[headerKeys[i]]);
+ xhr.setRequestHeader(
+ headerKeys[i],
+ headers[headerKeys[i]]
+ );
+ }
+ //start uploading
+ xhr.send(data);
+ });
+
+};
+/**
+ * Initializes the xhr attribute for performing uploads
+ * @param extFileList the list of extended files
+ * @returns the array of extFiles with the xhr attribute initialized
+ */
+export const toUploadableExtFileList = (
+ extFileList: ExtFile[] | ExtFileInstance[]
+): ExtFile[] => {
+ if (!extFileList) return [];
+ return extFileList.map(extFile => {
+ return { ...extFile, xhr: new XMLHttpRequest() }
+ });
+}
+
+/**
+ * Updates the uploadStatus of the given extFile
+ * from "preparing" to "uploading"
+ * @param extFile the extended file
+ * @returns the extended file with uploadStatus updated to "uploading"
+ */
+export const instantPreparingToUploadOne = (
+ extFile: ExtFileInstance | ExtFile
+): ExtFileInstance | ExtFile => {
+ if (extFile.uploadStatus === "preparing") {
+ //for ExtFile instance
+ extFile.uploadStatus = "uploading";
+ //for ExtFile type
+ return {
+ ...extFile,
+ uploadStatus: "uploading",
+ };
+ }
+ return extFile;
+};
+
+/**
+ *
+ * @param extFile the extended file
+ * @returns
+ */
+export const preparingToUploadOne = (
+ extFile: ExtFileInstance | ExtFile
+): Promise<ExtFileInstance | ExtFile> => {
+ return new Promise((resolve, reject) => {
+ setTimeout(() => {
+ if (extFile.uploadStatus === "preparing") {
+ //for ExtFile instance
+ extFile.uploadStatus = "uploading";
+ //for ExtFile type
+ resolve({
+ ...extFile,
+ uploadStatus: "uploading",
+ });
+ } else
+ resolve(extFile);
+ }, 1500);
+ });
+};
+/**
+ * Sleeps for 1200 miliseconds for showing a better transition
+ * on uploading
+ * @returns true is everything is ok
+ */
+export const sleepTransition = (
+): Promise<boolean> => {
+ return new Promise((resolve, reject) => {
+ setTimeout(() => {
+ resolve(true);
+ }, 1200);
+ });
+}
+
diff --git a/src/files-ui/core/upload/upload.utils.ts b/src/files-ui/core/upload/upload.utils.ts
new file mode 100644
index 0000000000000000000000000000000000000000..2a648065cb09f573baf9937e394054c52b5b5c91
--- /dev/null
+++ b/src/files-ui/core/upload/upload.utils.ts
@@ -0,0 +1,253 @@
+import { ExtFile, ExtFileInstance, Method, ServerResponse, UploadResponse, UPLOADSTATUS } from "../types"
+
+export const unexpectedErrorUploadResult = (extFile: ExtFile): UploadResponse => {
+ return {
+ id: extFile.id,
+ uploadedFile:
+ {
+ ...extFile,
+ uploadMessage: "Unable to upload. xhr object was not provided",
+ uploadStatus: "error"
+ },
+ serverResponse: {
+ }
+ }
+}
+export const unableToUploadResult = (
+ extFile: ExtFile
+): UploadResponse => {
+ return {
+ id: extFile.id,
+ uploadedFile: {
+ ...extFile,
+ uploadMessage: "Unable to upload. XHR was not provided",
+ uploadStatus: "error"
+ },
+ serverResponse: {
+ }
+ }
+}
+export const completeUploadResult = (
+ extFile: ExtFile,
+ serverResponse: ServerResponse,
+ result: UPLOADSTATUS
+): UploadResponse => {
+ return {
+ id: extFile.id,
+ uploadedFile: {
+ ...extFile,
+ uploadMessage: serverResponse.message,
+ uploadStatus: result
+ },
+ serverResponse: serverResponse
+ }
+}
+export const uploadOnePromiseXHR = async (
+ extFile: ExtFile,
+ url: string,
+ method?: Method,
+ headers?: Record<string, string>,
+ uploadLabel?: string
+): Promise<UploadResponse> => {
+ return new Promise(async (resolve, reject) => {
+ try {
+ const uploader: XMLHttpRequest | undefined = extFile.xhr;
+ if (!uploader) {
+ const duiUploadResponse: UploadResponse = unableToUploadResult(extFile);
+ resolve(duiUploadResponse);
+ return;
+ }
+ const localMethod: Method = (method) || "POST";
+ const fileToUpload: File = extFile.file as File;
+
+ const formData = new FormData();
+ if (typeof uploadLabel === "string" && uploadLabel.length > 0)
+ formData.append(uploadLabel, fileToUpload);
+ else
+ formData.append("file", fileToUpload);
+
+ let serverResponse: ServerResponse;
+ //stablish events
+ serverResponse = await FuiUpload(uploader, localMethod, url, formData, headers || {});
+
+ if (serverResponse.success) {
+ const duiUploadResponse: UploadResponse = completeUploadResult(extFile, serverResponse, "success");
+ resolve(duiUploadResponse);
+ } else {
+ // success is false
+ const duiUploadResponse: UploadResponse = completeUploadResult(extFile, serverResponse, "error");
+ resolve(duiUploadResponse);
+ }
+ } catch (error) {
+ // on error
+ console.log("ERROR", error);
+ const duiUploadResponse: UploadResponse = unableToUploadResult(extFile);
+ resolve(duiUploadResponse);
+ }
+ });
+};
+/**
+ * Uploads one formData object to a given endpoint in a promisified way
+ * @param xhr XMLHTTPrequest object
+ * @param method method for uploading
+ * @param endpoint endpoint to upload the file
+ * @param data FromData object to perform multipart form data
+ * @param headers the set of headers
+ * @returns a dui server response that consists on {success, payload, message}
+ */
+export const FuiUpload = (
+ xhr: XMLHttpRequest,
+ method: Method,
+ endpoint: string,
+ data: FormData,
+ headers: Record<string, string>
+) => {
+ return new Promise<ServerResponse>((resolve, reject) => {
+ console.log("DuiUpload", xhr, method, endpoint, data, headers);
+ xhr.upload.onload = () => {
+ console.log("DuiUpload onLoad", xhr.readyState, xhr.response);
+
+ };
+
+ xhr.upload.ontimeout = () => {
+ //onError("Timeout error");
+ resolve(
+ {
+ success: false,
+ message: "Timeout error",
+ payload: {}
+ }
+ );
+ };
+
+ xhr.upload.onabort = () => {
+ resolve(
+ {
+ success: false,
+ message: "Upload aborted",
+ payload: {}
+ }
+ );
+ };
+ // listen for `progress` event
+ //currently listening on FileItem component hook
+ xhr.onreadystatechange = async (e) => {
+ //console.log("Finished", xhr);
+ console.log("DuiUpload onreadystatechange", xhr.readyState, xhr.response);
+ if (xhr.readyState === 4 && xhr.response !== "") {
+ let duiRes: ServerResponse;
+ try {
+ const jsonResponse = JSON.parse(xhr.response);
+ const success: any = jsonResponse.success;
+ const message: string = jsonResponse.message;
+ const payload: any = jsonResponse.payload;
+ console.log("====> success", success);
+ console.log("====> message", message);
+ console.log("====> payload", payload);
+
+ duiRes = {
+ success: typeof success === "boolean" ? success : false,
+ message: typeof message === "string" ? message : "Error on response",
+ payload: payload || {}
+ }
+ resolve(duiRes);
+ } catch (error) {
+ duiRes = {
+ success: false,
+ message: "Unexpected error",
+ payload: {}
+ }
+ console.log("DuiUpload ERROR", error);
+ resolve(duiRes);
+ }
+ } else {
+ console.log("Naranjas Changed to " + xhr.readyState);
+ }
+ };
+ // open request
+ xhr.open(method, endpoint, true);
+ const headerKeys: string[] = Object.keys(headers);
+ //const headerValues: string[] = Object.values(headers);
+ for (let i = 0; i < headerKeys.length; i++) {
+ console.log("DuiUpload headers", headerKeys[i], headers[headerKeys[i]]);
+ xhr.setRequestHeader(
+ headerKeys[i],
+ headers[headerKeys[i]]
+ );
+ }
+ //start uploading
+ xhr.send(data);
+ });
+
+};
+/**
+ * Initializes the xhr attribute for performing uploads
+ * @param extFileList the list of extended files
+ * @returns the array of extFiles with the xhr attribute initialized
+ */
+export const toUploadableExtFileList = (
+ extFileList: ExtFile[] | ExtFileInstance[]
+ ): ExtFile[] => {
+ if (!extFileList) return [];
+ return extFileList.map(extFile => {
+ return { ...extFile, xhr: new XMLHttpRequest() }
+ });
+}
+
+/**
+ * Updates the uploadStatus of the given extFile
+ * from "preparing" to "uploading"
+ * @param extFile the extended file
+ * @returns the extended file with uploadStatus updated to "uploading"
+ */
+export const instantPreparingToUploadOne = (
+ extFile: ExtFileInstance | ExtFile
+): ExtFileInstance | ExtFile => {
+ if (extFile.uploadStatus === "preparing") {
+ //for ExtFile instance
+ extFile.uploadStatus = "uploading";
+ //for ExtFile type
+ return {
+ ...extFile,
+ uploadStatus: "uploading",
+ };
+ }
+ return extFile;
+};
+
+/**
+ *
+ * @param extFile the extended file
+ * @returns
+ */
+export const preparingToUploadOne = (
+ extFile: ExtFileInstance | ExtFile
+): Promise<ExtFileInstance | ExtFile> => {
+ return new Promise((resolve, reject) => {
+ setTimeout(() => {
+ if (extFile.uploadStatus === "preparing") {
+ //for ExtFile instance
+ extFile.uploadStatus = "uploading";
+ //for ExtFile type
+ resolve({
+ ...extFile,
+ uploadStatus: "uploading",
+ });
+ } else
+ resolve(extFile);
+ }, 1500);
+ });
+};
+/**
+ * Sleeps for 1200 miliseconds for showing a better transition
+ * on uploading
+ * @returns true is everything is ok
+ */
+export const sleepTransition = (
+): Promise<boolean> => {
+ return new Promise((resolve, reject) => {
+ setTimeout(() => {
+ resolve(true);
+ }, 1200);
+ });
+}
\ No newline at end of file
diff --git a/src/files-ui/core/utils/IdGenerator.ts b/src/files-ui/core/utils/IdGenerator.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e978079254babf0b4669e77ca1611a16090eb5fc
--- /dev/null
+++ b/src/files-ui/core/utils/IdGenerator.ts
@@ -0,0 +1,14 @@
+/**
+ * An id generator for FileItems
+ */
+ export abstract class FileIdGenerator {
+ static nextId = 0;
+ /**
+ * Increases the id counter and returns the next id available.
+ * @returns the next integer id available
+ */
+ static getNextId(): number {
+ FileIdGenerator.nextId++;
+ return FileIdGenerator.nextId;
+ }
+}
\ No newline at end of file
diff --git a/src/files-ui/core/utils/addClassName.ts b/src/files-ui/core/utils/addClassName.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9e3b35af67a686768a38a64ba2fd69955fb3a053
--- /dev/null
+++ b/src/files-ui/core/utils/addClassName.ts
@@ -0,0 +1,16 @@
+/**
+ * If className is given, adds class name in string format to a base class name
+ * @param baseClassName the base class name
+ * @param className the class name to be added
+ * @returns a new class name obtained by adding the second paramater
+ */
+export const addClassName = (
+ baseClassName: string,
+ className: string | undefined
+): string => {
+ let result: string = baseClassName;
+ if (className) {
+ result = `${result} ${className}`;
+ }
+ return result;
+}
\ No newline at end of file
diff --git a/src/files-ui/core/utils/click.utils.ts b/src/files-ui/core/utils/click.utils.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e692f35258d9d6bde0fe04f88f74759c5377e7a8
--- /dev/null
+++ b/src/files-ui/core/utils/click.utils.ts
@@ -0,0 +1,23 @@
+/**
+ * Performs stopPropagation and preventDefault functions on an click event instance
+ * @param evt click event handler object
+ */
+export function
+ handleClickUtil<T extends HTMLDivElement | HTMLButtonElement | HTMLAnchorElement>
+ (
+ evt: React.MouseEvent<T, MouseEvent>
+ ) {
+ evt.preventDefault();
+ evt.stopPropagation();
+}
+/**
+ * Click programatically an input element.
+ * If the input element is null, nothing will happend
+ * @param input the input element target to make a click
+ */
+export const handleClickInput = (
+ input: HTMLInputElement | null
+) => {
+ if (!input) return;
+ input.click();
+}
\ No newline at end of file
diff --git a/src/files-ui/core/utils/dragdrop.utils.ts b/src/files-ui/core/utils/dragdrop.utils.ts
new file mode 100644
index 0000000000000000000000000000000000000000..731bcbbcd90753871e48c15e524edfee8cc3e4b7
--- /dev/null
+++ b/src/files-ui/core/utils/dragdrop.utils.ts
@@ -0,0 +1,21 @@
+/**
+ * Performs stopPropagation and preventDefault functions on an drop event instance
+ * @param evt drag event handler object
+ */
+ export const handleDropUtil: React.DragEventHandler<HTMLDivElement> = (
+ evt: React.DragEvent<HTMLDivElement>
+ ) => {
+ evt.stopPropagation();
+ evt.preventDefault();
+ };
+ /**
+ * Performs stopPropagation and preventDefault functions on an drop event instance
+ * and also specifies that the drop effect is link
+ * @param evt drag event handler object
+ */
+ export const handleDragUtil: React.DragEventHandler<HTMLDivElement> = (
+ evt: React.DragEvent<HTMLDivElement>
+ ) => {
+ handleDropUtil(evt);
+ evt.dataTransfer.dropEffect = "link";
+ };
\ No newline at end of file
diff --git a/src/files-ui/core/utils/dropzone.utils.ts b/src/files-ui/core/utils/dropzone.utils.ts
new file mode 100644
index 0000000000000000000000000000000000000000..6ee91c87e0ddb543e61de433f58b2bd59bfa5fae
--- /dev/null
+++ b/src/files-ui/core/utils/dropzone.utils.ts
@@ -0,0 +1,14 @@
+export const isValidateActive = (
+ accept: string | undefined,
+ maxFileSize: number | undefined,
+ maxFiles: number | undefined,
+ validator: Function | undefined
+ ): boolean => {
+ return (
+ (accept !== undefined && accept !== null) ||
+ (maxFileSize !== undefined && maxFileSize !== null) ||
+ (maxFiles !== undefined && maxFiles !== null) ||
+ (validator !== undefined && validator !== null)
+ );
+ };
+
\ No newline at end of file
diff --git a/src/files-ui/core/utils/fakeupload.utils.ts b/src/files-ui/core/utils/fakeupload.utils.ts
new file mode 100644
index 0000000000000000000000000000000000000000..61f4616b21727a2aa71e7eb18af6ee72b3e533bb
--- /dev/null
+++ b/src/files-ui/core/utils/fakeupload.utils.ts
@@ -0,0 +1,146 @@
+import { DropzoneLocalizerSelector } from "../localization";
+import { ExtFile, ExtFileInstance, UploadResponse, UPLOADSTATUS } from "../types";
+
+/**
+ * Updates a extFile and sets its uploadStatus to "uploading"
+ * @param extFile the extended file object
+ * @returns the extended file with the uploadStatus attribute modified
+ */
+export const setPrepToUploading = (
+ extFile: ExtFile
+): Promise<ExtFile> => {
+ console.log("prepToUpload One", extFile);
+ return new Promise((resolve, reject) => {
+ setTimeout(() => {
+ resolve({
+ ...extFile,
+ uploadStatus: "uploading",
+ });
+ }, 1500);
+
+ });
+};
+/**
+ * Updates a extFile and sets its uploadStatus to "success"
+ * @param extFile the extended file object
+ * @returns the extended file with the uploadStatus attribute modified
+ */
+export const uploadOne = (
+ extFile: ExtFile
+): Promise<ExtFile> => {
+ console.log("upload One", extFile);
+ return new Promise((resolve, reject) => {
+ setTimeout(() => {
+ resolve({
+ ...extFile,
+ uploadStatus: "success",
+ });
+ }, 2000);
+ });
+};
+/**
+ * Awaits the given time before start uploading
+ * @param preparingTime the time in miliseconds, by default it will wait 1.5 secs
+ * @returns an empty object
+ */
+export const sleepPreparing = (
+ preparingTime: number = 5000
+): Promise<void> => {
+ console.log("uploadfiles preparingTime One", preparingTime);
+ return new Promise((resolve, reject) => {
+
+ setTimeout(() => {
+ resolve();
+ }, preparingTime);
+
+ });
+}
+
+/**
+ *
+ * @param extFileInstance
+ * @returns
+ */
+export const prepToUploadOne = (
+ extFileInstance: ExtFileInstance | ExtFile
+): Promise<ExtFileInstance | ExtFile> => {
+ //console.log("prepToUpload One", extFileInstance);
+ return new Promise((resolve, reject) => {
+ setTimeout(() => {
+ extFileInstance.uploadStatus = "uploading";
+ resolve({
+ ...extFileInstance,
+ uploadStatus: "uploading",
+ });
+ }, 1500);
+
+ });
+};
+
+/**
+ *
+ * @param extFileInstance
+ * @returns
+ */
+export const uploadOneExtFile = (
+ extFileInstance: ExtFileInstance
+): Promise<Object> => {
+ //console.log("upload One", extFileInstance);
+ return new Promise((resolve, reject) => {
+ setTimeout(() => {
+ extFileInstance.uploadStatus = "success";
+ resolve({
+ ...extFileInstance,
+ uploadStatus: "success",
+ });
+ }, 2000);
+ });
+};
+
+
+/**
+ *
+ * @param extFile the extFile to upload
+ * @param DropzoneLocalizer the localization
+ * @returns a duiUploadResponse object that describes the result
+ */
+export const fakeFuiUpload = (
+ extFile: ExtFileInstance,
+ DropzoneLocalizer = DropzoneLocalizerSelector("EN-en")
+): Promise<UploadResponse> => {
+ return new Promise((resolve, reject) => {
+ setTimeout(() => {
+ const randomNumber: number = Math.floor(Math.random() * 10);
+ if (randomNumber % 2 === 0) {
+ const status = true;
+ const message = DropzoneLocalizer.fakeuploadsuccess as string;
+ const payload = { url: "" };
+ resolve({
+ id: extFile.id,
+ serverResponse: { status, message, payload },
+ uploadedFile: {
+ ...extFile,
+ uploadStatus: "success",
+ uploadMessage: message,
+ progress: 100
+ }
+
+ });
+ } else {
+ const status = false;
+ const message = DropzoneLocalizer.fakeUploadError as string;
+ const payload = {};
+ resolve({
+ id: extFile.id,
+ serverResponse: { status, message, payload },
+ uploadedFile: {
+ ...extFile,
+ uploadStatus: "error",
+ uploadMessage: message,
+ progress: 60
+ },
+ });
+ }
+ }, 1700);
+ });
+};
\ No newline at end of file
diff --git a/src/files-ui/core/utils/fileListParser.ts b/src/files-ui/core/utils/fileListParser.ts
new file mode 100644
index 0000000000000000000000000000000000000000..3e88083c8dd081cd83ad1a7936d149aa8cf6e5bf
--- /dev/null
+++ b/src/files-ui/core/utils/fileListParser.ts
@@ -0,0 +1,28 @@
+import { ExtFile, ExtFileInstance } from "../types";
+import { FileIdGenerator } from "./IdGenerator";
+
+/**
+ * Converts the fileList into an array of separated ExtFile objects
+ * @param fileList the FileList object given by input(event.target.files) or drop operation (event.dataTransfer)
+ * @returns an array of ExtFile objects
+ */
+export const fileListToExtFileArray = (fileList: FileList): ExtFile[] => {
+ let filesValidated: ExtFile[] = [];
+ for (let i = 0, f: File; (f = fileList[i]); i++) {
+ filesValidated.push({ id: FileIdGenerator.getNextId(), file: f, name: f.name, size: f.size, type: f.type });
+ }
+ return filesValidated;
+};
+
+/**
+ * Converts the fileList into an array of separated ExtFile instances
+ * @param fileList the FileList object given by input (event.target.files) or drop operation (event.dataTransfer)
+ * @returns an array of ExtFile instances
+ */
+export const fileListToExtFileInstanceArray = (fileList: FileList): ExtFileInstance[] => {
+ let filesValidated: ExtFileInstance[] = [];
+ for (let i = 0, f: File; (f = fileList[i]); i++) {
+ filesValidated.push(new ExtFileInstance({ id: FileIdGenerator.getNextId(), file: f, name: f.name, size: f.size, type: f.type }));
+ }
+ return filesValidated;
+};
\ No newline at end of file
diff --git a/src/files-ui/core/utils/fileSizeFormatter.ts b/src/files-ui/core/utils/fileSizeFormatter.ts
new file mode 100644
index 0000000000000000000000000000000000000000..6e19ce5fa45efc43270234dab7bc07f241baac60
--- /dev/null
+++ b/src/files-ui/core/utils/fileSizeFormatter.ts
@@ -0,0 +1,25 @@
+/**
+ * Gives a XX.XX format in Bytes KB, MB, GB or TB
+ * @param fileSize file size to give format in Bytes
+ */
+ export const fileSizeFormater = (fileSize?: number): string => {
+ let result = "";
+ if (!fileSize) {
+ return 0 + " Bytes";
+ }
+ if (fileSize < 1024) {
+ result = fileSize + " Bytes"
+ } else {
+ //KB
+ if (fileSize < 1024 * 1024) {
+ result = (fileSize / 1024).toFixed(2) + " KB";
+ } else if (fileSize < 1024 * 1024 * 1024) {
+ result = ((fileSize / 1024) / 1024).toFixed(2) + " MB";
+ } else if (fileSize < 1024 * 1024 * 1024 * 1024) {
+ result = (((fileSize / 1024) / 1024) / 1024).toFixed(2) + " GB";
+ } else {
+ result = ((((fileSize / 1024) / 1024) / 1024) / 1024).toFixed(2) + " TB";
+ }
+ }
+ return result;
+}
\ No newline at end of file
diff --git a/src/files-ui/core/utils/getExt.ts b/src/files-ui/core/utils/getExt.ts
new file mode 100644
index 0000000000000000000000000000000000000000..feb5f4839a0c5a24b0a62097bc0069a068ce24f4
--- /dev/null
+++ b/src/files-ui/core/utils/getExt.ts
@@ -0,0 +1,15 @@
+/**
+ * Looks for the first file extension
+ * @param fileName file name
+ * @returns the file name extension
+ */
+ export const getExt = (fileName: string): string => {
+ const re = /(?:\.([^.]+))?$/;
+ const result = re.exec(fileName);
+ if (result) {
+ return result[1];
+ } else {
+ return "";
+ }
+
+};
\ No newline at end of file
diff --git a/src/files-ui/core/utils/index.ts b/src/files-ui/core/utils/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..01478032d4049b5f5cbc89eb9d4a6c078d0fb95e
--- /dev/null
+++ b/src/files-ui/core/utils/index.ts
@@ -0,0 +1,39 @@
+import { fileListToExtFileArray, fileListToExtFileInstanceArray } from "./fileListParser";
+
+import { fileSizeFormater } from "./fileSizeFormatter";
+
+import { getExt } from "./getExt";
+
+import { FileIdGenerator } from "./IdGenerator";
+
+export {
+ FileIdGenerator,
+ fileListToExtFileArray,
+ fileListToExtFileInstanceArray,
+ fileSizeFormater,
+ getExt,
+};
+
+export { handleDragUtil, handleDropUtil } from "./dragdrop.utils";
+
+export { handleClickInput, handleClickUtil } from "./click.utils";
+
+export { isValidateActive } from "./dropzone.utils";
+
+export { shrinkWord } from "./shrinkWord";
+
+export {
+ fakeFuiUpload,
+ prepToUploadOne,
+ setPrepToUploading,
+ sleepPreparing,
+ uploadOne,
+ uploadOneExtFile
+} from "./fakeupload.utils";
+
+export { getRandomInt } from "./randomInt";
+
+export { cleanInput } from "./input.utils";
+
+
+export { addClassName } from "./addClassName";
\ No newline at end of file
diff --git a/src/files-ui/core/utils/input.utils.ts b/src/files-ui/core/utils/input.utils.ts
new file mode 100644
index 0000000000000000000000000000000000000000..0772c706873c89c3f458abcd4a3cf7ebceffb1c7
--- /dev/null
+++ b/src/files-ui/core/utils/input.utils.ts
@@ -0,0 +1,8 @@
+/**
+ * Cleans the input.value attribute
+ * @param inputElement
+ */
+export const cleanInput = (inputElement?: HTMLInputElement | null) => {
+ if (!inputElement) return;
+ inputElement.value = "";
+}
\ No newline at end of file
diff --git a/src/files-ui/core/utils/randomInt.ts b/src/files-ui/core/utils/randomInt.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5db2ef9cb5bd0faaeae69aabad9227dc70cc4101
--- /dev/null
+++ b/src/files-ui/core/utils/randomInt.ts
@@ -0,0 +1,9 @@
+/**
+ * Random integer between min (included) and max (excluded)
+ * @param min the min number
+ * @param max the max number
+ * @returns a random number between min (included) and max (excluded)
+ */
+export function getRandomInt(min: number = 0, max: number = 0): number {
+ return Math.floor(Math.random() * (max - min)) + min;
+}
diff --git a/src/files-ui/core/utils/shrinkWord.ts b/src/files-ui/core/utils/shrinkWord.ts
new file mode 100644
index 0000000000000000000000000000000000000000..7b1ddf234dd35869afa60002d1b34adbfcd261f5
--- /dev/null
+++ b/src/files-ui/core/utils/shrinkWord.ts
@@ -0,0 +1,20 @@
+/**
+ * The max size of the word in characters
+ */
+export const DEFAULT_MAX_SIZE_WORD = 30;
+/**
+ *
+ * @param word the word to be shrinked
+ * @returns the shrinked word
+ */
+export const shrinkWord = (word = "", card = false): string => {
+ let newWord = word;
+ if (card) {
+ if (word.length >= 20) {
+ newWord = word.slice(0, 10) + "..." + word.slice(-7);
+ }
+ } else if (word.length >= DEFAULT_MAX_SIZE_WORD) {
+ newWord = word.slice(0, 13) + "..." + word.slice(-8);
+ }
+ return newWord;
+};
\ No newline at end of file
diff --git a/src/files-ui/core/validation/fakeerros.ts b/src/files-ui/core/validation/fakeerros.ts
new file mode 100644
index 0000000000000000000000000000000000000000..326ec5f5744ade6952b47c5e0fb0f7c05690dfda
--- /dev/null
+++ b/src/files-ui/core/validation/fakeerros.ts
@@ -0,0 +1,9 @@
+/**
+ * list of dumy errors in english
+ */
+export const listOfErrors: string[] =
+ [
+ "File is too big. Max file size allowed is 80mb.",
+ "File's type is not allowed.",
+ "Max amount of files (28) has been reached."
+ ];
\ No newline at end of file
diff --git a/src/files-ui/core/validation/fileValidator.ts b/src/files-ui/core/validation/fileValidator.ts
new file mode 100644
index 0000000000000000000000000000000000000000..23fff3869f21c0bf8cb7f26f3e23e1ab525c6ca7
--- /dev/null
+++ b/src/files-ui/core/validation/fileValidator.ts
@@ -0,0 +1,195 @@
+import { ValidateErrorLocalizerSelector } from "../localization";
+import { ExtFile, FunctionLabel, Localization, LocalLabels } from "../types";
+import { CustomValidateFileResponse, FileValidatorProps } from "../types/validation";
+import { FileIdGenerator } from "../utils/IdGenerator";
+import { separateAccept } from "./separateAccept";
+import { validateAccept } from "./validateAccept";
+
+/**
+ *
+ * @param preValidatedFiles FileList
+ * @param remainingValids The number of remaining valid files
+ * @param localValidator
+ * @param validator
+ * @param maxFiles
+ * @param localization
+ * @returns
+ */
+export const fileListvalidator = (
+ preValidatedFiles: FileList,
+ remainingValids: number,
+ localValidator: FileValidatorProps,
+ validator: ((f: File) => CustomValidateFileResponse) | undefined,
+ maxFiles?: number,
+ localization?: Localization
+): ExtFile[] => {
+ const output: ExtFile[] = [];
+ //set a countdown when there is a limit on files
+ let countdown: number = remainingValids;
+ // get localized labels
+ const ValidationErrorLocalizer: LocalLabels =
+ ValidateErrorLocalizerSelector(localization);
+ //Iterate the File list
+ for (let i = 0, f: File; (f = preValidatedFiles[i]); i++) {
+ // Validate the file list with
+ let validatedFile: ExtFile = validateFile(f, validator, localValidator, ValidationErrorLocalizer);
+ if (validatedFile.valid) {
+ //not valid due to file count limit
+ const valid = countdown > 0;
+ validatedFile.valid = valid;
+ //add error about amount
+ if (!valid) {
+ const maxFileErrorMessenger: FunctionLabel = ValidationErrorLocalizer.maxFileCount as FunctionLabel;
+ validatedFile.errors = validatedFile.errors
+ ? [...validatedFile.errors, maxFileErrorMessenger(maxFiles || Infinity)]
+ : [maxFileErrorMessenger(maxFiles || Infinity)];
+ }
+ countdown--;
+ }
+ output.push(validatedFile);
+ }
+ return output;
+};
+
+
+/**
+ * For each ExtFile sets the valid prop of ExtFile to "true" or "false"
+ * depending on the result of the individual validation.
+ * It also add the list of errors.
+ * @param extFileList
+ * @param remainingValids
+ * @param localValidatorProps
+ * @param validator
+ * @param maxFiles
+ * @param localization
+ * @returns a new ExtFile list with each item validated
+ */
+export const validateExtFileList = (
+ extFileList: ExtFile[],
+ remainingValids: number,
+ localValidatorProps: FileValidatorProps,
+ validator: ((f: File) => CustomValidateFileResponse) | undefined,
+ maxFiles: number | undefined,
+ localization?: Localization
+): ExtFile[] => {
+ console.log("remaning valids", remainingValids);
+ let fileListResult: ExtFile[] = [];
+ if (!remainingValids) return fileListResult;
+ let remaining: number = remainingValids;
+ const ValidationErrorLocalizer: LocalLabels =
+ ValidateErrorLocalizerSelector(localization);
+ const maxFileErrorMessenger: FunctionLabel = ValidationErrorLocalizer.maxFileCount as FunctionLabel;
+ for (let i = 0; i < extFileList.length; i++) {
+ let currentExtFile: ExtFile = extFileList[i];
+
+ currentExtFile = validateExtFile(currentExtFile, validator, localValidatorProps, ValidationErrorLocalizer);
+ //console.log("validateExtFileList after validation", currentExtFile);
+
+ if (currentExtFile.valid) {
+ //not valid due to file count limit
+ const valid = remaining > 0;
+ currentExtFile.valid = valid;
+ //add error about amount
+ if (!valid) {
+ currentExtFile.errors = currentExtFile.errors
+ ? [...currentExtFile.errors, maxFileErrorMessenger(maxFiles || Infinity)]
+ : [maxFileErrorMessenger(maxFiles || Infinity)];
+ }
+ remaining--;
+ }
+ fileListResult.push(currentExtFile);
+
+ }
+ return fileListResult;
+}
+
+/**
+ *
+ * @param extFile
+ * @param validator
+ * @param validatorProps
+ * @param localErrors
+ * @returns
+ */
+export const validateExtFile = (
+ extFile: ExtFile,
+ validator: undefined | ((f: File) => CustomValidateFileResponse),
+ validatorProps: FileValidatorProps,
+ localErrors: LocalLabels
+): ExtFile => {
+ let extFileResult: ExtFile = { ...extFile };
+ let errors: string[] = [];
+ if (!extFile.file) {
+ return { ...extFileResult }
+ }
+ if (validator) {
+ return { ...extFileResult, ...validator(extFileResult.file as File) };
+ }
+ const { maxFileSize, accept } = validatorProps;
+ console.log("Validation", maxFileSize, accept);
+ //check file size
+ const file: File = extFile.file;
+ if (maxFileSize && file.size > maxFileSize) {
+ const maxFileSizeErrorMessenger: FunctionLabel = localErrors.maxSizeError as FunctionLabel;
+
+ console.log("Size error", maxFileSizeErrorMessenger(maxFileSize));
+
+ errors.push(maxFileSizeErrorMessenger(maxFileSize));
+ }
+ //check file type
+ if (accept && !validateAccept(separateAccept(accept), file)) {
+ errors.push(localErrors.acceptError as string);
+ }
+ const isValid: boolean = errors.length === 0;
+ extFileResult = { ...extFileResult, valid: isValid, errors: !isValid ? errors : undefined };
+ console.log("validation extFileResult",extFileResult);
+ return extFileResult;
+
+}
+
+
+
+/**
+ * Function that validate whether a file is valid, or not
+ * according to the Filevalidator properties
+ * @param file a File object to be evaluated
+ * @param validatorProps the validator object
+ * @returns a FileValidated object
+ */
+export const validateFile = (
+ file: File,
+ validator: undefined | ((f: File) => CustomValidateFileResponse),
+ validatorProps: FileValidatorProps,
+ localErrors: LocalLabels
+): ExtFile => {
+
+ const idGenerated = FileIdGenerator.getNextId();
+ let errors: string[] = [];
+ if (validator) {
+ return { id: idGenerated, file, ...validator(file) };
+ }
+
+ const { maxFileSize, accept } = validatorProps;
+
+ //check file size
+ if (maxFileSize && file.size > maxFileSize) {
+ const maxFileSizeErrorMessenger: FunctionLabel = localErrors.maxSizeError as FunctionLabel;
+ errors.push(maxFileSizeErrorMessenger(maxFileSize));
+ }
+
+ //check file type
+ // const allowedTypes = accept.filter((type) => (file.type === type))
+ if (accept && !validateAccept(separateAccept(accept), file)) {
+ errors.push(localErrors.acceptError as string);
+ }
+
+
+ const fileResult: ExtFile = {
+ id: idGenerated,
+ file: file,
+ valid: errors.length === 0,
+ errors: errors
+ };
+ // logic here
+ return fileResult;
+};
\ No newline at end of file
diff --git a/src/files-ui/core/validation/index.ts b/src/files-ui/core/validation/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..75bc608611434cc5f092066afa4bdbe4b9699f8a
--- /dev/null
+++ b/src/files-ui/core/validation/index.ts
@@ -0,0 +1,15 @@
+export {
+ validateExtFileList,
+ fileListvalidator,
+ validateExtFile,
+ validateFile
+} from "./fileValidator";
+
+
+export { separateAccept } from "./separateAccept";
+
+export { validateAccept } from "./validateAccept";
+
+export {getRandomUploadStatus} from "./randomStatus";
+
+export {listOfErrors} from "./fakeerros";
\ No newline at end of file
diff --git a/src/files-ui/core/validation/randomStatus.ts b/src/files-ui/core/validation/randomStatus.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b616470d03528e5941bed21f1cc079e8d0b6e87c
--- /dev/null
+++ b/src/files-ui/core/validation/randomStatus.ts
@@ -0,0 +1,22 @@
+import { UPLOADSTATUS } from "../types";
+import { getRandomInt } from "../utils/randomInt";
+
+/**
+ * Generates a random number betwen 0 and 3
+ * where
+ * 0 => error
+ * 1 => uploading
+ * 2 => success
+ * 3 => undefined
+ * @returns a random upload status or undefined
+ */
+ export const getRandomUploadStatus = (): UPLOADSTATUS | undefined => {
+ const result: number = getRandomInt(0, 4);
+ switch (result) {
+ case 0: return "error";
+ case 1: return "uploading";
+ case 2: return "success";
+ default:
+ return undefined;
+ }
+}
\ No newline at end of file
diff --git a/src/files-ui/core/validation/separateAccept.ts b/src/files-ui/core/validation/separateAccept.ts
new file mode 100644
index 0000000000000000000000000000000000000000..db5d5876292badb5dd5a6281615bc4a1678f4795
--- /dev/null
+++ b/src/files-ui/core/validation/separateAccept.ts
@@ -0,0 +1,12 @@
+/**
+ * Separate the accept string array into an array of strings separated by commas
+ * @param accept the string accept array
+ * @returns an array of strings in wich every item
+ */
+export const separateAccept = (accept: string | undefined): string[] => {
+ if (!accept || accept.length === 0) {
+ return [];
+ }
+ const commaSeparatedAccpet: string[] = accept.split(",").map((acceptItem) => acceptItem.trim());
+ return commaSeparatedAccpet;
+}
\ No newline at end of file
diff --git a/src/files-ui/core/validation/validateAccept.ts b/src/files-ui/core/validation/validateAccept.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ea423ba90d85e0c7b113b22974110acde0ba1147
--- /dev/null
+++ b/src/files-ui/core/validation/validateAccept.ts
@@ -0,0 +1,45 @@
+import { getExt } from "../utils/getExt";
+
+/**
+ * Checks whether a file is valid or not given an array of file extentions and mime types
+ * e.g. accept = [".doc", ".docx", ".xml", "application/msword", "application/vnd.openxmlformats-officedocument.wordprocessingml.document"]
+ * @param accept the array of strings accept items
+ * @param file a File object to be evaluated
+ * @returns true if the mime type file is included in the accept param
+ */
+ export const validateAccept = (accept: string[], file: File): boolean => {
+ let valid: boolean = false;
+ const { name, type } = file;
+ //Array(5) [ ".doc", ".docx", ".xml", "application/msword", "application/vnd.openxmlformats-officedocument.wordprocessingml.document" ]
+ for (let i = 0; i < accept.length; i++) {
+ const acceptItem: string = accept[i];
+ //check is not empty
+ if (acceptItem.length !== 0) {
+ //check extention
+ if (acceptItem.charAt(0) === ".") {
+ if (acceptItem.includes(getExt(name))) {
+ return true;
+ }
+ }
+ //check mime
+ // header/tail => image/png ; image/* ; audio
+ if (type && type.length > 0 && acceptItem.includes("/") && type.includes("/")) {
+ let headerMime = acceptItem.split("/")[0];
+ let tailMime = acceptItem.split("/")[1];
+
+ let headerMimeFile = type.split("/")[0];
+ let tailMimeFile = type.split("/")[1];
+
+ if (headerMime === headerMimeFile) {
+ // image/*
+ if (tailMime === "*") {
+ return true;
+ } else if (tailMime === tailMimeFile) {
+ return true;
+ }
+ }
+ }
+ }
+ }
+ return valid;
+}
\ No newline at end of file
diff --git a/src/files-ui/hooks/index.ts b/src/files-ui/hooks/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f3cc8bea4866823871c61ccd094764fa0a9c8c6d
--- /dev/null
+++ b/src/files-ui/hooks/index.ts
@@ -0,0 +1,2 @@
+import {useDropzoneValidation} from "./useDropzoneValidation";
+export {useDropzoneValidation};
\ No newline at end of file
diff --git a/src/files-ui/hooks/useDropzoneClassName.ts b/src/files-ui/hooks/useDropzoneClassName.ts
new file mode 100644
index 0000000000000000000000000000000000000000..3497e41ed57f61ef72e68cbe2346810b6b9574cb
--- /dev/null
+++ b/src/files-ui/hooks/useDropzoneClassName.ts
@@ -0,0 +1,3 @@
+export const useDropzoneClassName=()=>{
+
+}
\ No newline at end of file
diff --git a/src/files-ui/hooks/useDropzoneFileUpdater.ts b/src/files-ui/hooks/useDropzoneFileUpdater.ts
new file mode 100644
index 0000000000000000000000000000000000000000..3c275a5ceb3dc0add4d98a4cf698559f5498d007
--- /dev/null
+++ b/src/files-ui/hooks/useDropzoneFileUpdater.ts
@@ -0,0 +1,102 @@
+import * as React from "react";
+import { CustomValidateFileResponse, ExtFile, ExtFileInstance, ExtFileManager, FileValidatorProps, Localization, UPLOADSTATUS, validateExtFileList } from "../core";
+
+/**
+ * Effect for keeping track of changes
+ * update files when value changes
+ * also updates the number of valid files
+ * When `isUploading` is true, it only updates when value and arrOfExtFiles
+ * have same lenght. Also, only updates the uploadStatus attribute
+ * from "preparing", to undefined when onCancel() method is called in
+ * FileItem component
+ * @param dropzoneId the asociated dropzoneId for the corresponding array of ExtFiles in case of multiple dropzones
+ * @param value the current value of the list of Files from props
+ * @param isUploading
+ * @returns the local list of Files
+ */
+const useDropzoneFileListUpdater = (
+ dropzoneId: number | string | undefined,
+ value: ExtFile[],
+ isUploading: boolean,
+ maxFileSize?: number,
+ accept?: string,
+ maxFiles?: number,
+ validator?: ((f: File) => CustomValidateFileResponse),
+ localization?: Localization,
+ validateFilesFlag?: boolean
+): [ExtFile[], number, React.Dispatch<React.SetStateAction<ExtFile[]>>] => {
+ //state for managing the files locally
+ const [localFiles, setLocalFiles] = React.useState<ExtFile[]>([]);
+ // the current number of valid files
+ const [numberOfValidFiles, setNumberOfValidFiles] = React.useState<number>(0);
+
+ //Detect changes in the file item props when upload started
+ //mostly for detecting
+ React.useEffect(() => {
+ let arrOfExtFiles: ExtFileInstance[] | undefined =
+ ExtFileManager.getExtFileInstanceList(dropzoneId);
+ console.log("value changed", isUploading, value.map(F => F.uploadStatus));
+ // console.log("value changed", value.map(F => F.uploadStatus));
+ if (!isUploading) {
+ setLocalFiles(value);
+ } else {
+ // when is uploading
+ if (arrOfExtFiles) {
+
+ if (arrOfExtFiles.length !== value.length || value.length === 0) {
+ return;
+ }
+ for (let i = 0; i < arrOfExtFiles.length; i++) {
+ if (
+ (value[i].uploadStatus === undefined)
+ &&
+ (arrOfExtFiles[i].uploadStatus === "preparing")
+ ) {
+ console.log("useDropzoneFileListUpdater onCancel i", i);
+ arrOfExtFiles[i].uploadStatus = undefined;
+ }
+ }
+ }
+ }
+ // eslint-disable-next-line
+ }, [dropzoneId, value,
+ // isUploading
+ ]);
+
+
+ //Detect changes in validation props for re-validating files
+ React.useEffect(() => {
+ if (!validateFilesFlag) {
+ setLocalFiles(localFiles.map(F => { return { ...F, valid: undefined } }));
+ return;
+ }
+ const localValidator: FileValidatorProps = { maxFileSize, accept };
+ const validatedExtFileList: ExtFile[] = validateExtFileList(
+ localFiles,
+ maxFiles ? maxFiles - numberOfValidFiles : Infinity,
+ localValidator,
+ validator,
+ maxFiles,
+ localization
+ );
+
+ setLocalFiles(validatedExtFileList);
+ //missing dependencie localFiles was not added by purpose
+ // eslint-disable-next-line
+ }, [validateFilesFlag, maxFileSize, accept, maxFiles, localization]);
+
+
+ // the current number of valid files
+ // update number of valid files
+ React.useEffect(() => {
+ if (validateFilesFlag) {
+ setNumberOfValidFiles(localFiles.filter((x) => x.valid).length);
+ } else {
+ setNumberOfValidFiles(localFiles.length);
+ }
+ }, [localFiles, validateFilesFlag]);
+
+
+ return [localFiles, numberOfValidFiles, setLocalFiles];
+}
+export default useDropzoneFileListUpdater;
\ No newline at end of file
diff --git a/src/files-ui/hooks/useDropzoneValidation.ts b/src/files-ui/hooks/useDropzoneValidation.ts
new file mode 100644
index 0000000000000000000000000000000000000000..3117a3a0900ab6e7bf682aa9789536d0238e7eb3
--- /dev/null
+++ b/src/files-ui/hooks/useDropzoneValidation.ts
@@ -0,0 +1,27 @@
+import * as React from "react"
+import { CustomValidateFileResponse } from "../core";
+
+export const useDropzoneValidation = (
+ accept: string | undefined,
+ maxFileSize: number | undefined,
+ maxFiles: number | undefined,
+ validator: ((f: File) => CustomValidateFileResponse) | undefined
+) => {
+ const [validateFlag, setValidateFlag] = React.useState<boolean>(false);
+ React.useEffect(() => {
+ //set the flag accordin to the props
+ if (
+ (accept && accept?.length > 0) ||
+ (maxFileSize && maxFileSize >= 0) ||
+ (maxFiles && maxFiles >= 0) ||
+ validator
+ ) {
+ setValidateFlag(true);
+ } else {
+ setValidateFlag(false);
+ }
+ }, [accept, maxFileSize, maxFiles, validator]);
+
+ return validateFlag;
+}
+
diff --git a/src/files-ui/index.ts b/src/files-ui/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..bcd99d84d18e9d4bcb262ca2f3bfab40a7d88f3f
--- /dev/null
+++ b/src/files-ui/index.ts
@@ -0,0 +1,24 @@
+export { default as Dropzone } from "./components/dropzone/components/dropzone/Dropzone";
+export * from "./components/dropzone/components/dropzone/Dropzone";
+
+export { default as Avatar } from "./components/avatar/Avatar";
+export * from "./components/avatar/Avatar";
+
+export { FileItem } from "./components";
+export * from "./components";
+
+
+export { FileMosaic } from "./components/file-mosaic";
+export * from "./components/file-mosaic";
+
+
+
+export { FullScreen } from "./components/previews";
+export * from "./components/previews";
+
+
+export { ImagePreview } from "./components/previews";
+export * from "./components/previews";
+
+export { VideoPreview } from "./components/previews";
+export * from "./components/previews";
\ No newline at end of file
diff --git a/src/index.css b/src/index.css
index ec2585e8c0bb8188184ed1e0703c4c8f2a8419b0..7a599d28313d4affd7b90ecbfb4357acd45587a5 100644
--- a/src/index.css
+++ b/src/index.css
@@ -11,3 +11,7 @@ code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}
+
+ a {
+ color: rgb(0, 121, 244);
+}
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index d563c0fb10ba0e42724b21286eb546ee4e5734fc..0c5d282ae6a644a275f16a510c6e5e17420e9ae9 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,14 +1,96 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
+import * as React from "react";
+import ReactDOM from "react-dom/client";
+import "./index.css";
+import reportWebVitals from "./reportWebVitals";
+import { createBrowserRouter, Outlet, RouterProvider } from "react-router-dom";
+import MainPage from "./pages/MainPage";
+import { ThemeProvider } from "@mui/material/styles";
+import { MUItheme } from "./theme/mainTheme";
+import GettingStartedPage from "./pages/getting-started/GettingStartedPage";
+import ErrorPage from "./pages/error-page/ErrorPage";
+import DropzoneDemoPage from "./pages/demo/DropzoneDemoPage";
+import FileMosaicDemoPage from "./pages/demo/FileMosaicDemoPage";
+import FileCardDemoPage from "./pages/demo/FileCardDemoPage";
+import ServerSidePage from "./pages/server-side/ServerSidePage";
+import CodeGeneratorPage from "./pages/code-generator/CodeGeneratorPage";
+import DropzoneApi from "./pages/api/DropzoneApi";
+import FileMosaicApi from "./pages/api/FileMosaicApi";
+import FileCardApi from "./pages/api/FileCardApi";
+import TutorialPage from "./pages/tutorials/TutorialPage";
+import UsagePage from "./pages/usage/UsagePage";
+import TypesPage from "./pages/types-page/TypesPage";
+const router = createBrowserRouter([
+ {
+ path: "/",
+ element: <MainPage />,
+ errorElement: <ErrorPage />,
+ },
+ {
+ path: "/getting-started",
+ element: <GettingStartedPage />,
+ },
+ {
+ path: "/usage",
+ element: <UsagePage />,
+ },
+ {
+ path: "/components/dropzone",
+ element: <DropzoneDemoPage />,
+ },
+ {
+ path: "/components/filemosaic",
+ element: <FileMosaicDemoPage />,
+ },
+ {
+ path: "/components/file-card",
+ element: <FileCardDemoPage />,
+ },
+ {
+ path: "/api/dropzone",
+ element: <DropzoneApi />,
+ },
+ {
+ path: "/api/filemosaic",
+ element: <FileMosaicApi />,
+ },
+ {
+ path: "/api/file-card",
+ element: <FileCardApi />,
+ },
+ {
+ path: "/types",
+ element: <TypesPage />,
+ },
+ {
+ path: "/server-side",
+ element: <ServerSidePage />,
+ },
+ {
+ path: "/code-generator",
+ element: <CodeGeneratorPage />,
+ },
+ {
+ path: "/utilities-methods/file-reader",
+ element: <CodeGeneratorPage />,
+ },
+ {
+ path: "/utilities-methods/file-uploader",
+ element: <CodeGeneratorPage />,
+ },
+]);
+
+const root = ReactDOM.createRoot(document.getElementById("root"));
+
+fetch("https://files-ui-express-static-file-storage.vercel.app").then(res=>{
+ res.json().then((jsonresponse)=>{
+ console.log("API vercel", jsonresponse);
+ })
+});
-const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
- <React.StrictMode>
- <App />
- </React.StrictMode>
+ <ThemeProvider theme={MUItheme}>
+ <RouterProvider router={router} />
+ </ThemeProvider>
);
// If you want to start measuring performance in your app, pass a function
diff --git a/src/menu/listOptions.js b/src/menu/listOptions.js
new file mode 100644
index 0000000000000000000000000000000000000000..666d5fc6564a4231243926a704fd727f5a84c225
--- /dev/null
+++ b/src/menu/listOptions.js
@@ -0,0 +1,34 @@
+export const listOptionsSideBar=[
+ {
+ label:"Getting started",
+ icon:undefined,
+ onClick:undefined
+ },
+ {
+ label:"Components",
+ icon:undefined,
+ onClick:undefined
+ },
+ {
+ label:"Documentation",
+ icon:undefined,
+ onClick:undefined,
+ subMenu:[
+ {
+ label:"Dropzone",
+ icon:undefined,
+ onClick:undefined
+ },
+ {
+ label:"FileMosaic",
+ icon:undefined,
+ onClick:undefined
+ },
+ {
+ label:"Dropzone",
+ icon:undefined,
+ onClick:undefined
+ },
+ ]
+ },
+];
\ No newline at end of file
diff --git a/src/pages/FileCardMock.tsx b/src/pages/FileCardMock.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..b8b353ad9be98b186488a946d35ee77b053cff07
--- /dev/null
+++ b/src/pages/FileCardMock.tsx
@@ -0,0 +1,50 @@
+import * as React from "react";
+import FileCard from "../files-ui/components/file-item/components/FileCard/FileCard";
+import { ExtFile } from "../files-ui/core";
+const baseFiles: ExtFile[] = [
+ {
+ id: Math.random(),
+ name: "A very very long title for files-ui.jsx",
+ type: "text/plain",
+ size: 280000,
+ valid: true,
+ },
+ {
+ id: Math.random(),
+ name: "A very very long title for files-ui.png",
+ type: "image/png",
+ size: 280000,
+ valid: true,
+ uploadStatus:"uploading",
+ imageUrl:
+ "https://super-ficcion.com/wp-content/uploads/2022/10/como-podria-regresar-iron-man-1-780x470.webp",
+ },
+];
+const FileCardMock = ({ darkMode = false, elevation = 2 }) => {
+ const [files, setFiles] = React.useState(baseFiles);
+ const removeFile = (id: string | number | undefined) => {
+ setFiles((files) => files.filter((f) => f.id !== id));
+ };
+ const handleSee = () => {};
+ return (
+ <>
+ {files.map((file, index) => (
+ <FileCard
+ key={file.id}
+ {...file}
+ preview
+ onDelete={removeFile}
+ onSee={handleSee}
+ info
+ alwaysActive
+ hd
+ elevation={2}
+ darkMode={darkMode}
+ onCancel={()=>{}}
+ progress={25}
+ />
+ ))}
+ </>
+ );
+};
+export default FileCardMock;
diff --git a/src/pages/FileItemMock.tsx b/src/pages/FileItemMock.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..d1dd261ae5684bd95ed8f4c9c4cf7f1010127cc1
--- /dev/null
+++ b/src/pages/FileItemMock.tsx
@@ -0,0 +1,176 @@
+import * as React from "react";
+import { FileItem } from "../files-ui";
+import { FileMosaic, FileMosaicProps } from "../files-ui/components/file-mosaic";
+import { BasePreparingLoader } from "../files-ui/components/loader";
+import InfiniteLoader from "../files-ui/components/loader/InfiniteLoader/InfiniteLoader";
+import LoaderContainer from "../files-ui/components/loader/LoaderContainer/LoaderContainer";
+import { ExtFile, UPLOADSTATUS } from "../files-ui/core";
+const baseFiles: ExtFile[] = [
+ {
+ id: Math.random(),
+ name: "A very very long title for files-ui.jsx",
+ type: "text/plain",
+ size: 280000,
+ //valid: true,
+ uploadMessage: "File was succesfuly upoaded to server in year 2014",
+ },
+ {
+ id: Math.random(),
+ name: "A very very long title for files-ui.png",
+ type: "image/png",
+ size: 280000,
+ valid: false,
+ errors: ["File was uploaded from Saturn", "HAAAAAAAAAA"],
+ //progress: 28,
+ //uploadStatus: "preparing",
+ // imageUrl:
+ // "https://super-ficcion.com/wp-content/uploads/2022/10/como-podria-regresar-iron-man-1-780x470.webp",
+ },
+ {
+ id: Math.random(),
+ name: "A very very long title for files-ui.png",
+ type: "image/png",
+ size: 280000,
+ valid: true,
+ uploadStatus: "preparing",
+ imageUrl:
+ "https://super-ficcion.com/wp-content/uploads/2022/10/como-podria-regresar-iron-man-1-780x470.webp",
+ },
+];
+const FileItemMock = ({ darkMode = false, mosaic = false }) => {
+ const [files, setFiles] = React.useState(baseFiles);
+
+ const [newProgress, setNewProgress] = React.useState<number>(45);
+ let completed = false;
+ //let interval: NodeJS.Timer | null = null;
+
+ const removeFile = (id: string | number | undefined) => {
+ setFiles((files) => files.filter((f) => f.id !== id));
+ };
+ const handleSee = () => {};
+
+ const changeStatus = (
+ status: UPLOADSTATUS | undefined,
+ id?: FileMosaicProps["id"]
+ ) => {
+ if (id !== undefined) {
+ setFiles(
+ files.map((f) => {
+ if (id === f.id) {
+ return {
+ ...f,
+ uploadStatus: status,
+ };
+ } else
+ return {
+ ...f,
+ };
+ })
+ );
+ } else
+ setFiles(
+ files.map((f) => {
+ return {
+ ...f,
+ uploadStatus: status,
+ uploadMessage:
+ status === "success"
+ ? "EXITOOOO HAAAAA"
+ : status === "error"
+ ? "Pinche error de los conjones"
+ : status === "aborted"
+ ? "File uplaod was aborted"
+ : undefined,
+ };
+ })
+ );
+ };
+ const cleanStatus = () => {
+ setFiles(
+ files.map((f) => {
+ return {
+ ...f,
+ uploadStatus: undefined,
+ };
+ })
+ );
+ };
+
+ const handleProgress = () => {
+ setNewProgress((newProgress) => {
+ let newProgValue = 0;
+
+ if (completed) {
+ completed = false;
+ newProgValue = 0;
+ } else if (newProgress >= 100) {
+ //clearInterval(interval as NodeJS.Timeout);
+ newProgValue = 100;
+ completed = true;
+ } else {
+ newProgValue = newProgress + 10;
+ }
+
+ return newProgValue;
+ });
+ };
+ return (
+ <div style={{ display: "flex", flexDirection: "column", gap: "10px" }}>
+ <div style={{ display: "flex", flexDirection: "row" }}>
+ <button onClick={() => changeStatus("preparing")}>preparing</button>
+ <button onClick={() => changeStatus("uploading")}>uploading</button>
+ <button onClick={() => changeStatus("success")}>sucess</button>
+ <button onClick={() => changeStatus("error")}>error</button>
+ <button onClick={() => changeStatus("aborted")}>aborted</button>
+ <button onClick={cleanStatus}>clean</button>
+ <button onClick={handleProgress}>progress</button>
+ </div>
+
+ <div style={{ display: "flex", flexDirection: "row" }}>
+ {mosaic ? (
+ <>
+ {files.map((file, index) => (
+ <FileMosaic
+ key={file.id || 1 + 1}
+ {...file}
+ localization={"ES-es"}
+ // preview
+ onDelete={removeFile}
+ //onSee={handleSee}
+ info
+ //alwaysActive
+ progress={newProgress}
+ //hd
+ //backgroundBlurImage={false}
+ resultOnTooltip
+ darkMode={darkMode}
+ onAbort={() => changeStatus("aborted", file.id)}
+ onCancel={() => changeStatus(undefined, file.id)}
+ />
+ ))}
+ </>
+ ) : (
+ <>
+ {files.map((file, index) => (
+ <FileItem
+ key={file.id || 1 + 10}
+ {...file}
+ preview
+ onDelete={removeFile}
+ onSee={handleSee}
+ info
+ alwaysActive
+ progress={25}
+ showProgress
+ hd
+ elevation={2}
+ darkMode={darkMode}
+ />
+ ))}
+ </>
+ )}
+ </div>
+ </div>
+ );
+};
+export default FileItemMock;
diff --git a/src/pages/MainPage.jsx b/src/pages/MainPage.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..604b554d95d544edfa20c4f2816fe21a1204ed17
--- /dev/null
+++ b/src/pages/MainPage.jsx
@@ -0,0 +1,97 @@
+import * as React from "react";
+import "../styles/MainPage.scss";
+import logoLight from "../static/files-ui-logo-blue-wbg.png";
+import logo_blue from "../static/files-ui-logo-blue.png";
+import DropzoneMainPage from "../components/DropzoneMainPage";
+
+import GettingStarted from "../components/MainPage/GettingStarted";
+import MainNavBar from "../components/MainPage/MainNavBar";
+import MainFooter from "../components/MainPage/MainFooter";
+import FileMosaicImageVideoPreviews from "../components/MainPage/MainRight/FileMosaicImageVideoPreviews";
+//import FileCard from "../files-ui/components/file-item/components/FileCard/FileCard";
+import { Divider } from "@mui/material";
+
+const MainPage = ({ darkMode }) => {
+ const [darkModeOn, setDarkModeOn] = React.useState(false);
+
+ const handleDarkMode = () => {
+ setDarkModeOn((darkModeOn) => !darkModeOn);
+ };
+
+ return (
+ <div className={`files-uimain-container${darkModeOn ? ` darkmode` : ""}`}>
+ <MainNavBar
+ darkModeOn={darkModeOn}
+ logo_blue={logo_blue}
+ logoLight={logoLight}
+ handleDarkMode={handleDarkMode}
+ />
+ <main className="filesui-main">
+ <div className="fui-main-left">
+ <div
+ className={
+ darkModeOn
+ ? "filesui-main-logo-container darkmode"
+ : "filesui-main-logo-container"
+ }
+ >
+ <img
+ className="fui-logo-img"
+ // src={!darkModeOn ? logo_blue : logoLight}
+ src={logo_blue}
+ />
+ </div>
+
+ {/* <Badges /> */}
+
+ <h1
+ className={!darkModeOn ? "fui-logo-text" : "fui-logo-text darkmode"}
+ >
+ File Uploads with{" "}
+ <span className="gradient-span">Superiorly designed</span>{" "}
+ components
+ </h1>
+
+ <p className="fui-description">
+ Make the file upload task easy for developers and end-users.
+ </p>
+
+ <GettingStarted darkModeOn={darkModeOn} />
+ </div>
+ <div className="fui-main-right">
+ <DropzoneMainPage darkMode={darkModeOn} />
+ <Divider sx={{ borderColor: darkMode ? "#121212" : undefined }} />
+ <FileMosaicImageVideoPreviews darkMode={darkModeOn} />
+ </div>
+ </main>
+
+ <MainFooter />
+ </div>
+ );
+};
+export default MainPage;
+
+{
+ /* return (
+ <div style={containerMainStyle}>
+ <div style={contenedorMosaicStyle}>
+ <FileItemMock mosaic />
+ </div>
+ <div style={{ ...contenedorMosaicStyle, backgroundColor: "#042354" }}>
+ <FileItemMock mosaic darkMode={true} />
+ </div>
+ <div style={contenedorMosaicStyle}>
+ <FileItemMock />
+ </div>
+ <div style={{ ...contenedorMosaicStyle, backgroundColor: "#042354" }}>
+ <FileItemMock darkMode={true} />
+ </div>
+ <div style={contenedorCardStyle}>
+ <FileCardMock />
+ </div>
+ <div style={{ ...contenedorCardStyle, backgroundColor: "#042354" }}>
+ <FileCardMock darkMode={true} />
+ </div>
+ </div>
+ );*/
+}
diff --git a/src/pages/api/DropzoneApi.jsx b/src/pages/api/DropzoneApi.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..a4363e869bf4e4b40df63f8d7bf8e0923604567d
--- /dev/null
+++ b/src/pages/api/DropzoneApi.jsx
@@ -0,0 +1,10 @@
+import * as React from "react";
+
+const DropzoneApi = props =>{
+ return(
+ <div>
+ DropzoneApi
+ </div>
+ )
+}
+export default DropzoneApi;
\ No newline at end of file
diff --git a/src/pages/api/FileCardApi.jsx b/src/pages/api/FileCardApi.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..8da994b7945e079e178ed06d15d0273b3bf783c3
--- /dev/null
+++ b/src/pages/api/FileCardApi.jsx
@@ -0,0 +1,10 @@
+import * as React from "react";
+
+const FileCardApi = props =>{
+ return(
+ <div>
+
+ </div>
+ )
+}
+export default FileCardApi;
\ No newline at end of file
diff --git a/src/pages/api/FileMosaicApi.jsx b/src/pages/api/FileMosaicApi.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..91bcadae08d4b405bd2bc92c3099dfa347e8e8eb
--- /dev/null
+++ b/src/pages/api/FileMosaicApi.jsx
@@ -0,0 +1,54 @@
+import { Alert, AlertTitle } from "@mui/material";
+import * as React from "react";
+import DescParagraph from "../../components/demo-components/desc-paragraph/DescParagraph";
+import SubTitle from "../../components/demo-components/sub-title/SubTitle";
+import MainLayoutPage from "../../components/layout-pages/MainLayoutPage";
+import MainTitle from "../../components/main-title/MainTitle";
+import RightMenu from "../../components/RightMenu/RightMenu";
+import { FileMosaicAPIPropsRows } from "../../data/FileMosaicAPIPropsRows";
+import PropsTableApi from "./PropsTableApi";
+
+const rightMenuItems = [
+ {
+ id: 0,
+ label: "Demos",
+ referTo: "/api/file-mosaic/#filemosaic-demo",
+ },
+ {
+ id: 1,
+ label: "Props",
+ referTo: "/api/file-mosaic/#filemosaic-props",
+ },
+];
+const FileMosaicApi = (props) => {
+ return (
+ <MainLayoutPage
+ rightMenu={<RightMenu width="240px" items={rightMenuItems} />}
+ >
+ <MainTitle>FileMosaic API</MainTitle>
+ <DescParagraph>
+ API reference docs for the React Filemosaic component. Learn about the
+ props and other APIs of this exported module.
+ </DescParagraph>
+ <section id="filemosaic-demo">
+ <SubTitle content="Demo" />
+ <Alert severity="info">
+ {/* <AlertTitle> Demo </AlertTitle> */}
+ For examples and details on the usage of this React component, visit
+ the component demo pages:
+ <ul>
+ <li>
+ <a href="/components/file-mosaic">FileMosaic. </a>
+ </li>
+ </ul>
+ </Alert>
+ </section>
+ <section id="filemosaic-props">
+ <SubTitle content="Props" />
+
+ <PropsTableApi rows={FileMosaicAPIPropsRows} />
+ </section>
+ </MainLayoutPage>
+ );
+};
+export default FileMosaicApi;
diff --git a/src/pages/api/PropsTableApi.jsx b/src/pages/api/PropsTableApi.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..3f478268c5516cd38f7980114193718d17dde381
--- /dev/null
+++ b/src/pages/api/PropsTableApi.jsx
@@ -0,0 +1,66 @@
+import * as React from "react";
+import { styled } from "@mui/material/styles";
+import Table from "@mui/material/Table";
+import TableBody from "@mui/material/TableBody";
+import TableCell, { tableCellClasses } from "@mui/material/TableCell";
+import TableContainer from "@mui/material/TableContainer";
+import TableHead from "@mui/material/TableHead";
+import TableRow from "@mui/material/TableRow";
+import Paper from "@mui/material/Paper";
+
+const StyledTableCell = styled(TableCell)(({ theme }) => ({
+ [`&.${tableCellClasses.head}`]: {
+ backgroundColor: "#042354",
+ color: theme.palette.common.white,
+ },
+ [`&.${tableCellClasses.body}`]: {
+ fontSize: 14,
+ },
+}));
+
+const StyledTableRow = styled(TableRow)(({ theme }) => ({
+ "&:nth-of-type(odd)": {
+ backgroundColor: theme.palette.action.hover,
+ },
+ // hide last border
+ "&:last-child td, &:last-child th": {
+ border: 0,
+ },
+}));
+
+export default function PropsTableApi({ rows = [] }) {
+ return (
+ <TableContainer component={Paper}>
+ <Table sx={{ minWidth: 300 }} aria-label="customized table">
+ <TableHead>
+ <TableRow>
+ <StyledTableCell width={"30%"}>Name</StyledTableCell>
+ <StyledTableCell align="left" width={"30%"}>Type</StyledTableCell>
+ <StyledTableCell align="left">Default</StyledTableCell>
+ <StyledTableCell align="left" width={"30%"}>
+ Description
+ </StyledTableCell>
+ </TableRow>
+ </TableHead>
+ <TableBody>
+ {rows.map((row) => (
+ <StyledTableRow key={row.name}>
+ <StyledTableCell
+ component="th"
+ scope="row"
+ style={{ wordBreak: "break-all" }}
+ >
+ {row.name}
+ </StyledTableCell>
+ <StyledTableCell align="left" style={{ wordBreak: "break-all" }}>
+ {row.type}
+ </StyledTableCell>
+ <StyledTableCell align="left">{row.default}</StyledTableCell>
+ <StyledTableCell align="left">{row.description}</StyledTableCell>
+ </StyledTableRow>
+ ))}
+ </TableBody>
+ </Table>
+ </TableContainer>
+ );
+}
diff --git a/src/pages/code-generator/CodeGeneratorPage.jsx b/src/pages/code-generator/CodeGeneratorPage.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..721a0795f0041948c43dfeb69e7d6ae2031f6230
--- /dev/null
+++ b/src/pages/code-generator/CodeGeneratorPage.jsx
@@ -0,0 +1,10 @@
+import * as React from "react";
+
+const CodeGeneratorPage = props =>{
+ return(
+ <div>
+ CodeGeneratorPage
+ </div>
+ )
+}
+export default CodeGeneratorPage;
\ No newline at end of file
diff --git a/src/pages/demo/DropzoneDemoPage.jsx b/src/pages/demo/DropzoneDemoPage.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..74292194b85161802516374d11511d48dce11db8
--- /dev/null
+++ b/src/pages/demo/DropzoneDemoPage.jsx
@@ -0,0 +1,224 @@
+import { Box, Stack, Paper, Alert, AlertTitle } from "@mui/material";
+import * as React from "react";
+import CodeHighlight from "../../components/codeHighlight/CodeHighlight";
+import DescParagraph from "../../components/demo-components/desc-paragraph/DescParagraph";
+import BasicDropzoneCodeJS from "../../components/demo-components/dropzone-demo/BasicDropzoneCodeJS";
+import BasicDemoDropzone from "../../components/demo-components/dropzone-demo/BasicDropzoneDemo";
+import SubTitle from "../../components/demo-components/sub-title/SubTitle";
+import MainLayoutPage from "../../components/layout-pages/MainLayoutPage";
+import MainTitle from "../../components/main-title/MainTitle";
+import MainParagraph from "../../components/paragraph-main/MainParagraph";
+import RightMenu from "../../components/RightMenu/RightMenu";
+import TypeHighlight from "../../components/typeHighlight/TypeHighlight";
+import NavBarTemplate from "../../templates/NavBarTemplate";
+const rightMenuItems = [
+ {
+ id: 0,
+ label: "Basic dropzone",
+ referTo: "/components/dropzone/#basic-dropzone",
+ },
+ {
+ id: 1,
+ label: "Validation",
+ referTo: "/components/dropzone/#validation",
+ },
+ {
+ id: 1,
+ label: "Custom validation",
+ referTo: "/components/dropzone/#custom-validation",
+ },
+ {
+ id: 2,
+ label: "Dropzone events",
+ referTo: "/components/dropzone/#dropzone-events",
+ },
+ {
+ id: 3,
+ label: "Uploading",
+ referTo: "/components/dropzone/#uploading",
+ },
+ {
+ id: 4,
+ label: "Styling",
+ referTo: "/components/dropzone/#styling",
+ },
+ {
+ id: 5,
+ label: "Localization",
+ referTo: "/components/dropzone/#localization",
+ },
+ {
+ id: 6,
+ label: "Dark mode",
+ referTo: "/components/dropzone/#dark-mode",
+ },
+ {
+ id: 6,
+ label: "API",
+ referTo: "/components/dropzone/#api",
+ },
+];
+const DropzoneDemoPage = (props) => {
+ return (
+ <MainLayoutPage
+ rightMenu={<RightMenu width="240px" items={rightMenuItems} />}
+ >
+ <MainTitle>Dropzone</MainTitle>
+
+ <MainParagraph>
+ The "dropzone" component is a special{" "}
+ <CodeHighlight>input</CodeHighlight> enhanced by the capability of
+ allowing users to either drag and drop files there or picking files from
+ a file dialog.
+ </MainParagraph>
+
+ <DescParagraph>
+ The widget is useful for handling one{" "}
+ <TypeHighlight>File</TypeHighlight> or a list of{" "}
+ <TypeHighlight>Files</TypeHighlight> in one or more of these scenarios:
+ <ol>
+ <li>
+ The file(s) must be chosen from a File Dialog or must be dragged and
+ dropped into the widget
+ </li>
+ <li>
+ The file(s) must be validated or not taking into account a
+ predefined set of allowed{" "}
+ <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept">
+ Common MIME Types
+ </a>
+ ; specifiying the max file size (in bytes) or max amout of files.
+ </li>
+ <li>The file(s) must be uploaded somewhere in the internet.</li>
+ <li>
+ The file(s) must be shown in the screen with a preview according to
+ the file type.
+ </li>
+ </ol>
+ </DescParagraph>
+ <DescParagraph>
+ It's meant to be an improved version of the "react-dropzone" and
+ "dropzone" packages.
+ </DescParagraph>
+
+ <section id="basic-dropzone">
+ <SubTitle content="Basic Dropzone" />
+ <DescParagraph>
+ In this demo we set dropzone with the minimun props that allows you to
+ get done fast. These props are <code className="code">onChange</code>{" "}
+ and <code className="code">value</code> props.
+ </DescParagraph>
+ <Paper variant="outlined" style={{ padding: "25px" }}>
+ <BasicDemoDropzone />
+ </Paper>
+ <BasicDropzoneCodeJS />
+ <Alert severity="info">
+ <AlertTitle> FileMosaic </AlertTitle>
+ For completeness, these examples include{" "}
+ <strong>{`<FileMosaic/>`} </strong>
+ component for showing the files selected by the user with minimun
+ props too. For further information of this component check out the{" "}
+ <a href="/components/filemosaic">FileMosaic</a> page.
+ </Alert>
+ <br />
+ <Alert severity="info">
+ <AlertTitle> ExtFile </AlertTitle>
+ {/* This is an info alert — <strong>check it out!</strong>
+ */}
+ <strong>ExtFile type </strong>
+ is explicity used in the
+ <strong> Typescript</strong> example and is implicity used in the{" "}
+ <strong>Javascript</strong> example for handling the metadata that
+ makes possible the information exchange between components. For
+ further information about this data type check out the{" "}
+ <a href="/types#ext-file">ExtFile-API. </a>
+ </Alert>
+ </section>
+
+ {/* <section id="validation">
+ <SubTitle content="Validation" />
+ <DescParagraph>
+ You can either "tell" Dropzone component to validate user files by
+ providing one or more of these criteria:
+ <ol>
+ <li>Accept specific file types.</li>
+ <li>Accept an specific number of files.</li>
+ <li>Accept an specific size (in bytes) of files.</li>
+ </ol>
+ </DescParagraph>
+
+ <Paper variant="outlined" style={{ padding: "25px" }}>
+ <BasicDemoDropzone />
+ </Paper>
+
+ <p></p>
+ <BasicDropzoneCodeJS />
+ </section>
+
+ <section id="custom-validation">
+ <SubTitle content="Custom validation" />
+ <DescParagraph>
+ You can also "override the Dropzone validation by performimg a custom
+ validation using a custom function that must fit the following
+ signature:
+ <div>... type</div>
+ </DescParagraph>
+
+ <Paper variant="outlined" style={{ padding: "25px" }}>
+ <BasicDemoDropzone />
+ </Paper>
+
+ <p></p>
+ <BasicDropzoneCodeJS />
+ </section>
+
+ <section id="dropzone-events">
+ <SubTitle content="Dropzone events" />
+ <DescParagraph>
+ You can handle the following events:
+ <ul>
+ <li>
+ Dropzone with the <code className="code">onDelete</code> prop
+ defined can delete all the files associated with the{" "}
+ <code className="code">value</code> prop.
+ </li>
+ <li>
+ {" "}
+ Dropzone with the <code className="code">onDelete</code> prop
+ defined can delete all the files associated with the{" "}
+ <code className="code">value</code> prop..
+ </li>
+ <li>Accept an specific size (in bytes) of files.</li>
+ </ul>
+ </DescParagraph>
+
+ <Paper variant="outlined" style={{ padding: "25px" }}>
+ <BasicDemoDropzone />
+ </Paper>
+
+ <p></p>
+ <BasicDropzoneCodeJS />
+ </section>
+ <section id="api">
+ <SubTitle content="API" />
+ <DescParagraph>
+ See the documentation below for a complete reference to all of the
+ props and classes available to the components mentioned here.
+ <ul>
+ <li>
+ <CodeHighlight>
+ <a href="/api/dropzone">{"<Dropzone />"}</a>
+ </CodeHighlight>
+ </li>
+ <li>
+ <CodeHighlight>
+ <a href="/api/file-mosaic">{"<FileMosaic />"}</a>
+ </CodeHighlight>
+ </li>
+ </ul>
+ </DescParagraph>
+ </section> */}
+ </MainLayoutPage>
+ );
+};
+export default DropzoneDemoPage;
diff --git a/src/pages/demo/FileCardDemoPage.jsx b/src/pages/demo/FileCardDemoPage.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..05a8e0e4e225856bcb5d18139380fc3f4f1c9d62
--- /dev/null
+++ b/src/pages/demo/FileCardDemoPage.jsx
@@ -0,0 +1,10 @@
+import * as React from "react";
+
+const FileCardDemoPage = props =>{
+ return(
+ <div>
+ FileCardDemo
+ </div>
+ )
+}
+export default FileCardDemoPage;
\ No newline at end of file
diff --git a/src/pages/demo/FileMosaicDemoPage.jsx b/src/pages/demo/FileMosaicDemoPage.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..b4d77a80adb508333d370c634036ecb3e4c662eb
--- /dev/null
+++ b/src/pages/demo/FileMosaicDemoPage.jsx
@@ -0,0 +1,173 @@
+import Alert from "@mui/material/Alert";
+import AlertTitle from "@mui/material/AlertTitle";
+import Box from "@mui/material/Box";
+import Paper from "@mui/material/Paper";
+import Stack from "@mui/material/Stack";
+import * as React from "react";
+import CodeHighlight from "../../components/codeHighlight/CodeHighlight";
+import DescParagraph from "../../components/demo-components/desc-paragraph/DescParagraph";
+import BasicFileMosaicDemo from "../../components/demo-components/filemosaic-demo/BasicFileMosaicDemo";
+import SubTitle from "../../components/demo-components/sub-title/SubTitle";
+import MainParagraph from "../../components/paragraph-main/MainParagraph";
+import RightMenu from "../../components/RightMenu/RightMenu";
+import TypeHighlight from "../../components/typeHighlight/TypeHighlight";
+import NavBarTemplate from "../../templates/NavBarTemplate";
+
+const FileMosaicDemoPage = (props) => {
+ return (
+ <NavBarTemplate>
+ <Stack direction={"row"} sx={{ position: "relative" }}>
+ <Box
+ sx={{
+ boxSizing: "border-box",
+ marginLeft: { xl: "240px", lg: "0px" },
+ marginRight: { lg: "240px" },
+ width: {
+ lg: `min(1000px, calc(100% - ${240}px))`,
+ },
+ }}
+ >
+ <Box
+ sx={{
+ boxSizing: "border-box",
+ width: "100%",
+ }}
+ >
+ <h1 style={{ fontSize: "2.25rem" }}>FileMosaic</h1>
+ <MainParagraph>
+ File mosaics are compact elements that represent a file in the UI.
+ They can be used for just showing general info of the file, or
+ either allow the user to interact with them.
+ </MainParagraph>
+ <DescParagraph>
+ This widget allow users to see information of Files and / or
+ trigger actions.
+ </DescParagraph>
+ <Alert severity="info">
+ While included here as a standalone component, the most common use
+ will be as a result of the "onChange" event of {"<Dropzone/>"} or{" "}
+ {"<InputButton/>"} components, so some of the behavior
+ demonstrated here is not shown in context.{" "}
+ </Alert>
+
+ <section id="basic-file-mosaic">
+ <SubTitle content="Basic FileMosaic" />
+ <DescParagraph>
+ The <CodeHighlight>FileMosaic</CodeHighlight> supports
+ displaying information from <TypeHighlight>File</TypeHighlight>{" "}
+ object or individual props.
+ </DescParagraph>
+
+ <Paper
+ variant="outlined"
+ style={{
+ padding: "25px",
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "center",
+ }}
+ >
+ <Stack spacing={2} direction="row" alignItems={"center"}>
+
+ <BasicFileMosaicDemo />
+ </Stack>
+ </Paper>
+ <p></p>
+ {/* <BasicDropzoneCodeJS /> */}
+ </section>
+ <section id="image-preview">
+ <SubTitle content="Image preview" />
+ <DescParagraph>
+ By setting the <CodeHighlight>preview</CodeHighlight> prop to{" "}
+ <TypeHighlight>true</TypeHighlight> the component will show a
+ image preview using the <CodeHighlight>imageUrl</CodeHighlight>
+ prop or by reading the <TypeHighlight>File</TypeHighlight>{" "}
+ object if given (file prop).
+ </DescParagraph>
+
+ <Paper variant="outlined" style={{ padding: "25px" }}>
+ {/* <BasicDemoDropzone /> */}
+ </Paper>
+ <p></p>
+ {/* <BasicDropzoneCodeJS /> */}
+ </section>
+ <section id="validation">
+ <SubTitle content="Validation" />
+ <DescParagraph>
+ The <CodeHighlight>valid</CodeHighlight> prop can be set to{" "}
+ <TypeHighlight>true</TypeHighlight>,{" "}
+ <TypeHighlight>false</TypeHighlight> or{" "}
+ <TypeHighlight>undefined</TypeHighlight>
+ </DescParagraph>
+
+ <Paper variant="outlined" style={{ padding: "25px" }}>
+ {/* <BasicDemoDropzone /> */}
+ </Paper>
+ <p></p>
+ {/* <BasicDropzoneCodeJS /> */}
+ </section>
+ </Box>
+ </Box>
+ <Box
+ sx={{
+ position: "fixed",
+ top: 100,
+ right: 0,
+ width: "240px",
+ display: { lg: "flex", xs: "none" },
+ }}
+ >
+ <RightMenu width="240px" items={rightMenuItems} />
+ </Box>
+ </Stack>
+ </NavBarTemplate>
+ );
+};
+export default FileMosaicDemoPage;
+const rightMenuItems = [
+ {
+ id: 0,
+ label: "Basic file mosaic",
+ referTo: "/components/file-mosaic/#basic-file-mosaic",
+ },
+ {
+ id: 1,
+ label: "Image Preview",
+ referTo: "/components/file-mosaic/#file-mosaic-image-preview",
+ },
+ {
+ id: 2,
+ label: "Validation",
+ referTo: "/components/file-mosaic/#file-mosaic-validation",
+ },
+ {
+ id: 3,
+ label: "Uploading",
+ referTo: "/components/file-mosaic/#file-mosaic-uploading",
+ },
+ {
+ id: 4,
+ label: "Localization",
+ referTo: "/components/file-mosaic/#file-mosaic-localization",
+ },
+ {
+ id: 5,
+ label: "Previews",
+ referTo: "/components/file-mosaic/#file-mosaic-previews",
+ },
+ {
+ id: 6,
+ label: "Actions",
+ referTo: "/components/file-mosaic/#actions",
+ },
+ {
+ id: 7,
+ label: "Default previews",
+ referTo: "/components/file-mosaic/#default-previews",
+ },
+ {
+ id: 8,
+ label: "Dark mode",
+ referTo: "/components/file-mosaic/#dark-mode",
+ },
+];
diff --git a/src/pages/error-page/ErrorPage.scss b/src/pages/error-page/ErrorPage.scss
new file mode 100644
index 0000000000000000000000000000000000000000..b851264c9ec0c420a92dbdaca3c485fe19f4589d
--- /dev/null
+++ b/src/pages/error-page/ErrorPage.scss
@@ -0,0 +1,38 @@
+/*======================
+ 404 page
+=======================*/
+
+.page_404 {
+ padding: 40px 0;
+ background: #fff;
+ // font-family: "Arvo", serif;
+}
+
+.page_404 img {
+ width: 100%;
+}
+
+.four_zero_four_bg {
+ background-image: url(https://cdn.dribbble.com/users/285475/screenshots/2083086/dribbble_1.gif);
+ height: 400px;
+ background-position: center;
+}
+
+.four_zero_four_bg h1 {
+ font-size: 80px;
+}
+
+.four_zero_four_bg h3 {
+ font-size: 80px;
+}
+
+.link_404 {
+ color: #fff !important;
+ padding: 10px 20px;
+ background: #39ac31;
+ margin: 20px 0;
+ display: inline-block;
+}
+.contant_box_404 {
+ margin-top: -50px;
+}
diff --git a/src/pages/error-page/ErrorPage.tsx b/src/pages/error-page/ErrorPage.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..d9e35e208fd85f40abd7961463bd00f4ae0a31a8
--- /dev/null
+++ b/src/pages/error-page/ErrorPage.tsx
@@ -0,0 +1,33 @@
+import * as React from "react";
+import { ErrorPageProps } from "./ErrorPageProps";
+import "./ErrorPage.scss";
+const ErrorPage: React.FC<ErrorPageProps> = (props: ErrorPageProps) => {
+ return (
+ <section className="page_404">
+ <div className="container">
+ <div className="row">
+
+ <div className="col-sm-12 ">
+
+ <div className="col-sm-10 col-sm-offset-1 text-center">
+ <div className="four_zero_four_bg">
+ <h1 className="text-center ">404</h1>
+ </div>
+
+ <div className="contant_box_404">
+ <h3 className="h2">Look like you're lost</h3>
+
+ <p>the page you are looking for not avaible!</p>
+
+ <a href="" className="link_404">
+ Go to Home
+ </a>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </section>
+ );
+};
+export default ErrorPage;
diff --git a/src/pages/error-page/ErrorPageProps.ts b/src/pages/error-page/ErrorPageProps.ts
new file mode 100644
index 0000000000000000000000000000000000000000..1985bb722bb3ab22fa9bbed235fdc1da09a2cd6f
--- /dev/null
+++ b/src/pages/error-page/ErrorPageProps.ts
@@ -0,0 +1,3 @@
+export interface ErrorPageProps{
+ darkMode?:boolean;
+}
\ No newline at end of file
diff --git a/src/pages/getting-started/ClipBoardInstall.jsx b/src/pages/getting-started/ClipBoardInstall.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..7cd3f9e0e719a22549fed396021d05082e1435e0
--- /dev/null
+++ b/src/pages/getting-started/ClipBoardInstall.jsx
@@ -0,0 +1,23 @@
+import * as React from "react";
+
+const ClipBoardInstall = (props) => {
+ return (
+ <div className="clipboard-container">
+ <span style={{ color: "#60d2ff" }}>
+ <span style={{ color: "white" }}>
+ <b>{" > "}</b>
+ </span>
+ <span style={{ color: "#e2d487" }}>{"npm "} </span>
+ <span style={{ color: "white" }}>{"install "} </span>
+ <span>{"@files-ui/react"} </span>
+ {"axios"}
+ </span>
+ <Clipboard
+ style={{ backgroundColor: "grey" }}
+ code="npm install @dropzone-ui/react axios"
+ onCopyToClipboard={() => {}}
+ />
+ </div>
+ );
+};
+export default ClipBoardInstall;
diff --git a/src/pages/getting-started/GettingStartedPage.jsx b/src/pages/getting-started/GettingStartedPage.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..cc3a8538a7673e9808310ee747bc1d804d975845
--- /dev/null
+++ b/src/pages/getting-started/GettingStartedPage.jsx
@@ -0,0 +1,177 @@
+import { Box, Stack, Typography } from "@mui/material";
+import * as React from "react";
+import Overview from "../../components/getting-started/Overview";
+import MainParagraph from "../../components/paragraph-main/MainParagraph";
+import RightMenu from "../../components/RightMenu/RightMenu";
+import NavBarTemplate from "../../templates/NavBarTemplate";
+import logoLight from "../../static/files-ui-logo-blue-wbg.png";
+import logo_blue from "../../static/files-ui-logo-blue.png";
+import "../../styles/GettingStartedPage.scss";
+import InstallationNPM from "../../components/getting-started/InstallationNPM";
+import InstallationYarn from "../../components/getting-started/InstallationYarn";
+import DescParagraph from "../../components/demo-components/desc-paragraph/DescParagraph";
+import BasicDropzoneCodeJS from "../../components/demo-components/dropzone-demo/BasicDropzoneCodeJS";
+import Paper from "@mui/material/Paper";
+import BasicDemoDropzone from "../../components/demo-components/dropzone-demo/BasicDropzoneDemo";
+import SubTitle from "../../components/demo-components/sub-title/SubTitle";
+const GettingStartedPage = ({ darkModeOn }) => {
+ return (
+ <NavBarTemplate>
+ <Stack direction={"row"} sx={{ position: "relative" }}>
+ <Box
+ sx={{
+ boxSizing: "border-box",
+ marginLeft: { xl: "240px", lg: "0px" },
+ marginRight: { lg: "240px" },
+ width: {
+ lg: `min(1000px, calc(100% - ${240}px))`,
+ },
+ }}
+ >
+ <Box
+ sx={{
+ boxSizing: "border-box",
+ width: "100%",
+ }}
+ >
+ <Stack sx={{ width: "100%", alignItems: "center" }}>
+ <img
+ className="fui-logo-img-getting-started"
+ src={!darkModeOn ? logo_blue : logoLight}
+ />
+ <h1>Files UI - Getting started!</h1>
+ </Stack>
+
+ <section id="overview">
+ <Overview />
+ </section>
+
+ <section id="installation">
+ <SubTitle content="Installation" />
+
+ <MainParagraph>
+ Run one of the following commands to add Files UI to your
+ project:
+ </MainParagraph>
+ <h3>npm:</h3>
+ <InstallationNPM />
+ <h3>yarn:</h3>
+ <InstallationYarn />
+ </section>
+
+ <section id="peer-dependency">
+ <SubTitle content="Peer dependency" />
+
+ <DescParagraph>
+ <code className="code">react </code> {">= 17.0.0 "}and{" "}
+ <code className="code">react-dom</code>
+ {" >= 17.0.0 "} are peer dependencies.
+ </DescParagraph>
+ </section>
+ {/* <section id="usage">
+ <DescParagraph>
+ <SubTitle content="Usage" />
+ The following code snippet demonstrates a simple app that uses
+ the Files UI <a href="/components/dropzone">
+ Dropzone
+ </a> and <a href="/components/file-mosaic">FileMosaic</a>{" "}
+ components:
+ <BasicDropzoneCodeJS />
+ </DescParagraph>
+ </section> */}
+ <section id="default-font">
+ <SubTitle content="Default font" />
+
+ <DescParagraph>
+ Files UI components use the Poppins font by default. However,
+ you can set your own font-family en each component.
+ </DescParagraph>
+ </section>
+
+ {/* <section id="basic-example">
+ <SubTitle content="Basic example" />
+ <DescParagraph>
+ Files UI components use the Poppins font by default. However,
+ you can set your own font-family en each component.
+ </DescParagraph>
+ <Paper variant="outlined" style={{ padding: "25px" }}>
+ <BasicDemoDropzone />
+ </Paper>
+
+ <DescParagraph>
+ <code className="code">ExtFile</code> type is explicity used in
+ the Typescript example and is implicity used in the JS example
+ for handling the metadata that makes possible information
+ exchange between the components. For further information of this
+ type check out the <a href="/types#ext-file">ExtFile-API. </a>
+ </DescParagraph>
+ <BasicDropzoneCodeJS />
+ </section>
+ <section id="advanced-example">
+ <SubTitle content="Advanced Example" />
+ <DescParagraph>
+ Files UI components use the Poppins font by default. However,
+ you can set your own font-family en each component.
+ </DescParagraph>
+ <Paper variant="outlined" style={{ padding: "25px" }}>
+ <BasicDemoDropzone />
+ </Paper>
+
+ <DescParagraph>
+ <code className="code">ExtFile</code> type is explicity used in
+ the Typescript example and is implicity used in the JS example
+ for handling the metadata that makes possible information
+ exchange between the components. For further information of this
+ type check out the <a href="/types#ext-file">ExtFile-API. </a>
+ </DescParagraph>
+ <BasicDropzoneCodeJS />
+ </section> */}
+ </Box>
+ </Box>
+
+ <Box
+ sx={{
+ position: "fixed",
+ top: 100,
+ right: 0,
+ width: "240px",
+ display: { lg: "flex", xs: "none" },
+ }}
+ >
+ <RightMenu
+ width="240px"
+ items={[
+ {
+ id: 0,
+ label: "Overview",
+ referTo: "/getting-started/#overview",
+ },
+ {
+ id: 1,
+ label: "Installation",
+ referTo: "/getting-started/#installation",
+ },
+ {
+ id: 2,
+ label: "Peer dependency",
+ referTo: "/getting-started/#peer-dependency",
+ },
+ { id: 3, label: "Usage", referTo: "/getting-started/#usage" },
+ {
+ id: 3,
+ label: "Basic example",
+ referTo: "/getting-started/#basic-example",
+ },
+ {
+ id: 3,
+ label: "Advanced examples",
+ referTo: "/getting-started/#advanced-example",
+ },
+ ]}
+ />
+ </Box>
+ </Stack>
+ </NavBarTemplate>
+ );
+};
+export default GettingStartedPage;
diff --git a/src/pages/server-side/ServerSidePage.jsx b/src/pages/server-side/ServerSidePage.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..280307d91363ddbb9f2ad2c0d3dd906203fc88a3
--- /dev/null
+++ b/src/pages/server-side/ServerSidePage.jsx
@@ -0,0 +1,10 @@
+import * as React from "react";
+
+const ServerSidePage = props =>{
+ return(
+ <div>
+ ServerSidePage
+ </div>
+ )
+}
+export default ServerSidePage;
\ No newline at end of file
diff --git a/src/pages/tutorials/TutorialPage.tsx b/src/pages/tutorials/TutorialPage.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..136cddf76dd44b91989fae8a3bb8684496815a9b
--- /dev/null
+++ b/src/pages/tutorials/TutorialPage.tsx
@@ -0,0 +1,11 @@
+import * as React from "react";
+import { TutorialPageProps } from "./TutorialPageProps";
+
+const TutorialPage:React.FC<TutorialPageProps> = (props:TutorialPageProps) =>{
+ return(
+ <div>
+ TutorialPage
+ </div>
+ )
+}
+export default TutorialPage;
\ No newline at end of file
diff --git a/src/pages/tutorials/TutorialPageProps.ts b/src/pages/tutorials/TutorialPageProps.ts
new file mode 100644
index 0000000000000000000000000000000000000000..3e4e57d37f2e795a69a20e7aa72514bc49eb859d
--- /dev/null
+++ b/src/pages/tutorials/TutorialPageProps.ts
@@ -0,0 +1 @@
+export interface TutorialPageProps{}
\ No newline at end of file
diff --git a/src/pages/types-page/TypesPage.jsx b/src/pages/types-page/TypesPage.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..7f7e0a0e560e31494baecf419e1221a3a026fbab
--- /dev/null
+++ b/src/pages/types-page/TypesPage.jsx
@@ -0,0 +1,16 @@
+import * as React from "react";
+
+const TypesPage = props =>{
+ return(
+ <div>
+ types-page
+ #ExtFile
+ For metadata exchanging
+
+
+ #...
+ For upload process
+ </div>
+ )
+}
+export default TypesPage;
\ No newline at end of file
diff --git a/src/pages/upload/UploadPage.jsx b/src/pages/upload/UploadPage.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/src/pages/usage/UsagePage.jsx b/src/pages/usage/UsagePage.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..aa2971a21cac51f28dda52802161a8c16b4d1f73
--- /dev/null
+++ b/src/pages/usage/UsagePage.jsx
@@ -0,0 +1,106 @@
+import Box from "@mui/material/Box";
+import * as React from "react";
+import DescParagraph from "../../components/demo-components/desc-paragraph/DescParagraph";
+import SubTitle from "../../components/demo-components/sub-title/SubTitle";
+import MainLayoutPage from "../../components/layout-pages/MainLayoutPage";
+import MainParagraph from "../../components/paragraph-main/MainParagraph";
+import RightMenu from "../../components/RightMenu/RightMenu";
+import NavBarTemplate from "../../templates/NavBarTemplate";
+import BasicDemoDropzone from "../../components/demo-components/dropzone-demo/BasicDropzoneDemo";
+import BasicDropzoneCodeJS from "../../components/demo-components/dropzone-demo/BasicDropzoneCodeJS";
+import Paper from "@mui/material/Paper";
+import AdvancedDropzoneDemo from "../../components/demo-components/dropzone-demo/AdvancedDropzoneDemo";
+import { Alert, AlertTitle } from "@mui/material";
+//import AdvancedDropzoneCodeJS from "../../components/demo-components/dropzone-demo/AdvancedDropzoneCodeJS";
+import CodeHighlight from "../../components/codeHighlight/CodeHighlight";
+import TypeHighlight from "../../components/typeHighlight/TypeHighlight";
+import AdvancedDropzoneCodeJS from "../../components/demo-components/dropzone-demo/AdvancedDropzoneCodeJS";
+const rightMenuItems = [
+ { id: 0, label: "Quick start", referTo: "/usage/#quick-start" },
+ {
+ id: 1,
+ label: "Advanced examples",
+ referTo: "/usage/#advanced-example",
+ },
+];
+const UsagePage = (props) => {
+ return (
+ <MainLayoutPage
+ rightMenu={<RightMenu width="240px" items={rightMenuItems} />}
+ >
+ <h1>Usage</h1>
+ <MainParagraph>
+ Learn the basics of working with Files UI components.
+ </MainParagraph>
+
+ <section id="quick-start">
+ <DescParagraph>
+ <SubTitle content="Quick start (Basic exaple)" />
+ The following code snippet demonstrates a simple app that uses the
+ Files UI <a href="/components/dropzone">Dropzone</a> and{" "}
+ <a href="/components/file-mosaic">FileMosaic</a> components:
+ </DescParagraph>
+ <DescParagraph>
+ In this demo we set dropzone with the minimun props that allows you to
+ get done fast. These props are <CodeHighlight>onChange</CodeHighlight>{" "}
+ and <CodeHighlight>value</CodeHighlight> props. This example is the
+ same as the one you will find in the{" "}
+ <a href="/components/dropzone/#basic-dropzone">Basic dropzone</a>{" "}
+ section.
+ </DescParagraph>{" "}
+ <BasicDropzoneCodeJS splittedOnly />
+ {/* <Paper variant="outlined" style={{ padding: "25px" }}>
+ <BasicDemoDropzone />
+ </Paper>{" "} */}
+ <DescParagraph>
+ You can play around with this code in the interactive Code Sandbox
+ demo below. Try changing the <CodeHighlight>label</CodeHighlight> on
+ the Dropzone to see the changes:
+ </DescParagraph>
+ {/* <iframe
+ title="codesandbox"
+ src="https://codesandbox.io/embed/dropzone-ui-basic-3j01v"
+ //src="https://codesandbox.io/embed/u9sy1h?hidenavigation=1&fontsize=14&view=preview"
+ //src="https://codesandbox.io/s/material-ui-u9sy1h"
+ style={{
+ width: "100%",
+ height: "500px",
+ border: "0px none",
+ borderRadius: "4px",
+ overflow: "hidden",
+ }}
+ allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
+ sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+ ></iframe> */}
+ </section>
+
+ <section id="advanced-example">
+ <SubTitle content="Advanced Example" />
+ <DescParagraph>
+ In this example we set dropzone with the props that allows validation
+ and upload. These props are:
+ <ul>
+ <li>
+ For validating: <CodeHighlight>accept</CodeHighlight>,{" "}
+ <CodeHighlight>maxFiles</CodeHighlight> and{" "}
+ <CodeHighlight>maxFileSize</CodeHighlight>
+ </li>
+ <li>
+ For uploading: <CodeHighlight>uploadConfig</CodeHighlight>
+ </li>
+ <li>
+ For simulating the upload process:{" "}
+ <CodeHighlight>fakeUpload</CodeHighlight>
+ </li>
+ </ul>
+ </DescParagraph>
+
+ <Paper variant="outlined" style={{ padding: "25px" }}>
+ <AdvancedDropzoneDemo />
+ </Paper>
+ <AdvancedDropzoneCodeJS />
+ </section>
+ </MainLayoutPage>
+ );
+};
+export default UsagePage;
diff --git a/src/routes/MainRouter.jsx b/src/routes/MainRouter.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..a016387045701fdbc99065682931d41ca37d2d5c
--- /dev/null
+++ b/src/routes/MainRouter.jsx
@@ -0,0 +1,10 @@
+import * as React from "react";
+
+const MainRouter = props =>{
+ return(
+ <div>
+
+ </div>
+ )
+}
+export default MainRouter;
\ No newline at end of file
diff --git a/src/static/dropzone/dz-d.png b/src/static/dropzone/dz-d.png
new file mode 100644
index 0000000000000000000000000000000000000000..0aededc93bc6840b7ece37390c55d1a77fcfb154
Binary files /dev/null and b/src/static/dropzone/dz-d.png differ
diff --git a/src/static/dropzone/dz-w.png b/src/static/dropzone/dz-w.png
new file mode 100644
index 0000000000000000000000000000000000000000..03bd60d8e8a7f70c3229b4ff7c6cb7d1df11b4cc
Binary files /dev/null and b/src/static/dropzone/dz-w.png differ
diff --git a/src/static/files-ui-logo-blue-wbg.png b/src/static/files-ui-logo-blue-wbg.png
new file mode 100644
index 0000000000000000000000000000000000000000..57ce4c6250bec94eb9c35bd60514b777108e1a4e
Binary files /dev/null and b/src/static/files-ui-logo-blue-wbg.png differ
diff --git a/src/static/files-ui-logo-blue.png b/src/static/files-ui-logo-blue.png
new file mode 100644
index 0000000000000000000000000000000000000000..f4ac6b1e98a4180dbb0ca2e342e0013c2f9b3351
Binary files /dev/null and b/src/static/files-ui-logo-blue.png differ
diff --git a/src/static/files-ui-logo-white-bbg.png b/src/static/files-ui-logo-white-bbg.png
new file mode 100644
index 0000000000000000000000000000000000000000..7e61d341b606edf80ae4c6df6f0df44f464ee79a
Binary files /dev/null and b/src/static/files-ui-logo-white-bbg.png differ
diff --git a/src/static/files-ui-logo-white.png b/src/static/files-ui-logo-white.png
new file mode 100644
index 0000000000000000000000000000000000000000..194bdf2d6249d53c9f601aa5e6da69b104d4dee5
Binary files /dev/null and b/src/static/files-ui-logo-white.png differ
diff --git a/src/styles/GettingStarted.scss b/src/styles/GettingStarted.scss
new file mode 100644
index 0000000000000000000000000000000000000000..0d26ed16aa45c9e8353debdba0476995223041d0
--- /dev/null
+++ b/src/styles/GettingStarted.scss
@@ -0,0 +1,40 @@
+.getting-started-container {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ p,
+ h2 {
+ margin: 0;
+ padding: 0;
+ }
+ h2{
+ margin-top: 10px;
+ }
+ .button-container {
+ margin: 10px 0;
+ display: flex;
+ flex-direction: row;
+ width: 100%;
+ box-sizing: border-box;
+ align-items: center;
+ gap: 10px;
+ .code-button-flex {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ box-sizing: border-box;
+ width: 60%;
+ gap :10px
+ }
+ }
+
+ @media screen and (max-width: 900px) {
+ .button-container {
+ flex-direction: column;
+ align-items: stretch;
+ .code-button-flex {
+ width: 100%;
+ }
+ }
+ }
+}
diff --git a/src/styles/GettingStartedPage.scss b/src/styles/GettingStartedPage.scss
new file mode 100644
index 0000000000000000000000000000000000000000..1c82c86302e16b4ed88454b620ca9bcf5017b613
--- /dev/null
+++ b/src/styles/GettingStartedPage.scss
@@ -0,0 +1,39 @@
+.fui-logo-img-getting-started {
+ width: 150px;
+ height: 150px;
+
+ @media screen and (max-width: 900px) {
+ width: 30vw;
+ height: auto;
+ }
+}
+.clipboard-container {
+ background-color: rgb(1, 4, 9);
+ border-radius: 8px;
+ position: relative;
+ display: flex;
+ padding: 12px 7px;
+ width: calc(100% - 20px);
+ flex-direction: row;
+ align-items: center;
+ font-size: 0.9em;
+ margin-bottom: 15px;
+ justify-content: space-between;
+ .floating-copy-button {
+ box-sizing: border-box;
+ background-color: gray;
+ padding: 6px 5px;
+ border-radius: 4px;
+ cursor: pointer;
+ display: flex;
+
+ &:hover {
+ border: 1px wheat solid;
+ padding: 5px 4px;
+ }
+ &.copied {
+ border: 1px solid greenyellow;
+ padding: 5px 4px;
+ }
+ }
+}
diff --git a/src/styles/MainPage.scss b/src/styles/MainPage.scss
new file mode 100644
index 0000000000000000000000000000000000000000..660e1549fcc64300c88fe368c8c6d0e5a7047861
--- /dev/null
+++ b/src/styles/MainPage.scss
@@ -0,0 +1,281 @@
+//@import url("https://fonts.googleapis.com/css2?family=Kalam:wght@700&display=swap");
+
+$main-color-light: #0a1929;
+$main-color-dark: #0a1929;
+
+$sec-color-light: #55b4f2;
+$sec-color-dark: #0a1929;
+
+$text-color-light: #042354;
+$text-color-dark: rgba(255, 255, 255, 0.7);
+
+$border-color-light: #0a1929;
+$border-color-dark: #0a1929;
+
+.files-uimain-container {
+ transition: all 0.4s ease-in-out;
+ min-height: 100vh;
+ font-family: "Poppins", sans-serif;
+ font-size: 16px;
+ display: flex;
+ width: 100%;
+ align-items: center;
+ flex-direction: column;
+ justify-content: center;
+
+ .filesui-nav {
+ transition: all 0.4s ease-in-out;
+ color: #042354;
+ height: 64px;
+ background-color: rgba(255, 255, 255, 0.559);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ box-shadow: rgb(234, 238, 243) 0px -1px 1px inset;
+ width: 100%;
+ font-weight: 300;
+
+ .filesui-nav-container {
+ box-sizing: border-box;
+ padding: 0 10px;
+ width: 100%;
+ // background-color: aqua;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ box-sizing: border-box;
+ max-width: 1280px;
+
+ p {
+ letter-spacing: 0em;
+ line-height: 1.334;
+ font-size: 1.6rem;
+ }
+ .filesui-nav-logo-container {
+ margin-right: 10px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ &.darkmode {
+ border-radius: 8px;
+ padding: 2px 0;
+ background-color: rgba(255, 255, 255, 0.8);
+ }
+ .filesui-nav-logo {
+ width: 45px;
+ height: 45px;
+
+ width: 45px;
+ }
+ }
+ .left-part {
+ display: flex;
+ justify-content: flex-start;
+ align-items: center;
+ .filesui-nav-text-logo {
+ font-size: 1.4rem;
+ color: $main-color-light;
+ font-weight: 300;
+ }
+ }
+ .right-part {
+ display: flex;
+ justify-content: flex-start;
+ //align-items: center;
+ //justify-content: center;
+ gap: 10px;
+ //max-height: 500px;
+ }
+ }
+ }
+ .filesui-main {
+ margin: auto;
+
+ width: 100%;
+ max-width: 1280px;
+
+ min-height: calc(100vh - 64px);
+ display: flex;
+ flex-direction: row;
+
+ align-items: flex-start;
+ gap: 30px;
+ box-sizing: border-box;
+ padding: 0 28px;
+ .fui-main-left {
+ width: 48%;
+ padding: 0 5px;
+ padding-top: 20px;
+
+ box-sizing: border-box;
+ //background-color: bisque;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ min-height: calc(100vh - 64px);
+ .filesui-main-logo-container {
+ &.darkmode {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 20px;
+ background-color: rgba(255, 255, 255, 0.8);
+ padding: 10px 0px;
+ }
+ .fui-logo-img {
+ width: 156px;
+ height: 156px;
+ }
+ }
+
+ .fui-logo-text {
+ font-size: 3.2rem;
+ font-weight: 700;
+ text-align: center;
+ letter-spacing: 1px;
+ margin: 20px 0;
+ padding: 0;
+ line-height: 3.5rem;
+ }
+ .fui-description {
+ margin: 0;
+ font-size: 1.5rem;
+ //text-align: center;
+
+ font-weight: 300;
+ }
+ }
+ .fui-main-right {
+ padding: 0 5px;
+ //padding-top: 20px;
+
+ box-sizing: border-box;
+ //background-color: bisque;
+ display: flex;
+ flex-direction: column;
+ //align-items: center;
+ justify-content: center;
+ width: 52%;
+ min-height: calc(100vh - 64px);
+ max-height: 1280px;
+ // overflow: auto;
+ }
+ }
+ .filesui-footer {
+ min-height: 64px;
+ background-color: #042354;
+ color: white;
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 10px;
+ }
+
+ .gradient-span {
+ font-weight: 700;
+ background: linear-gradient(
+ to right,
+ #042354,
+ #042354,
+ $sec-color-light,
+ #042354,
+ #042354
+ );
+ -webkit-text-fill-color: transparent;
+ -webkit-background-clip: text;
+ background-clip: text;
+ }
+ &.darkmode {
+ background-color: $main-color-dark;
+ color: $text-color-dark;
+ .filesui-nav {
+ background-color: rgba(4, 35, 84, 0.559);
+ color: $text-color-dark;
+ box-shadow: rgba(234, 238, 243, 0.161) 0px -1px 1px inset;
+ }
+
+ .gradient-span {
+ font-weight: 700;
+ background: linear-gradient(to right, $sec-color-light, $sec-color-light);
+ -webkit-text-fill-color: transparent;
+ -webkit-background-clip: text;
+ background-clip: text;
+ }
+ }
+
+ @media screen and (max-width: 900px) {
+ width: 100%;
+ .filesui-nav {
+ transition: all 0.4s ease-in-out;
+ color: #042354;
+ height: 64px;
+ background-color: rgba(255, 255, 255, 0.559);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ box-shadow: rgb(234, 238, 243) 0px -1px 1px inset;
+ width: 100%;
+ font-weight: 300;
+
+ .filesui-nav-container {
+ p {
+ letter-spacing: 0em;
+ line-height: 1.334;
+ font-size: 1rem;
+ }
+ .filesui-nav-logo-container {
+ margin-right: 7px;
+
+ .filesui-nav-logo {
+ width: 35px;
+ height: 35px;
+ }
+ }
+
+ .left-part {
+ display: flex;
+ justify-content: flex-start;
+ align-items: center;
+ p {
+ font-size: 1.1rem;
+ width: 150px;
+ }
+ }
+ }
+ }
+ .filesui-main {
+ flex-direction: column;
+ gap: 5px;
+ align-items: center;
+ width: 100%;
+ //padding: 15px;
+ .fui-main-left,
+ .fui-main-right {
+ width: 100%;
+ margin-bottom: 20px;
+ }
+ .fui-main-left {
+ //padding-top: 5vh;
+ min-height: auto;
+ .fui-logo-img {
+ width: 30vw;
+ height: auto;
+ }
+ .fui-logo-text {
+ font-size: 2.8em;
+ text-align: center;
+ }
+ .fui-description {
+ //font-size: 1.2em;
+ text-align: left;
+ }
+ }
+ }
+ .filesui-footer {
+ font-size: smaller;
+ }
+ }
+}
diff --git a/src/templates/NavBarTemplate.jsx b/src/templates/NavBarTemplate.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..c60067e327f70cb0e76661c8a509f1283680af79
--- /dev/null
+++ b/src/templates/NavBarTemplate.jsx
@@ -0,0 +1,204 @@
+import * as React from "react";
+import PropTypes from "prop-types";
+import AppBar from "@mui/material/AppBar";
+import Box from "@mui/material/Box";
+import CssBaseline from "@mui/material/CssBaseline";
+import Divider from "@mui/material/Divider";
+import Drawer from "@mui/material/Drawer";
+import InboxIcon from "@mui/icons-material/MoveToInbox";
+import List from "@mui/material/List";
+import ListItem from "@mui/material/ListItem";
+import ListItemButton from "@mui/material/ListItemButton";
+import ListItemIcon from "@mui/material/ListItemIcon";
+import ListItemText from "@mui/material/ListItemText";
+import MailIcon from "@mui/icons-material/Mail";
+import MenuIcon from "@mui/icons-material/Menu";
+import Toolbar from "@mui/material/Toolbar";
+import Typography from "@mui/material/Typography";
+import logoLight from "../static/files-ui-logo-blue-wbg.png";
+import logo_blue from "../static/files-ui-logo-blue.png";
+import { IconButton, Stack, styled, Tooltip } from "@mui/material";
+import GitHubIcon from "@mui/icons-material/GitHub";
+import DarkModeLightModeButton from "../components/MainPage/DarkModeLightModeButton";
+import MainMenuSideBar from "../components/MainMenu/MainMenuSideBar";
+import DocumentScannerIcon from "@mui/icons-material/DocumentScanner";
+import InputIcon from "@mui/icons-material/Input";
+import FileOpenIcon from "@mui/icons-material/FileOpen";
+import { useNavigate } from "react-router";
+
+const drawerWidth = 280;
+const StyledImage = styled("img")(({ theme }) => ({
+ height: "100%",
+ maxHeight: "40px",
+ marginRight: "10px",
+
+ [theme.breakpoints.up("sm")]: {
+ display: "none",
+ },
+}));
+function NavBarTemplate(props) {
+ const navigate = useNavigate();
+ const { window, children, darkModeOn, handleDarkMode } = props;
+ const [mobileOpen, setMobileOpen] = React.useState(false);
+
+ const [selectedIndex, setSelectedIndex] = React.useState(0);
+
+ const handleGoGitRepo = () => {
+ window.open("https://github.com/files-ui", "_blank");
+ };
+ const handleDrawerToggle = () => {
+ setMobileOpen(!mobileOpen);
+ };
+
+ const drawer = (
+ <div>
+ <Toolbar>
+ <Stack
+ direction={"row"}
+ alignItems="center"
+ sx={{ "&:hover": { cursor: "pointer" } }}
+ onClick={() => navigate("/")}
+ >
+ <img
+ style={{
+ height: "40px",
+ marginRight: "10px",
+ }}
+ className="filesui-nav-logo"
+ src={!darkModeOn ? logo_blue : logoLight}
+ alt="files-ui-main-logo"
+ />
+ <Typography variant="h6" noWrap component="div" color="primary">
+ Files ui
+ </Typography>
+ </Stack>
+ </Toolbar>
+
+ <Divider />
+
+ <MainMenuSideBar
+ setSelectedIndex={setSelectedIndex}
+ selectedIndex={selectedIndex}
+ //items={}
+ />
+ </div>
+ );
+
+ const container =
+ window !== undefined ? () => window().document.body : undefined;
+
+ return (
+ <Box sx={{ display: "flex" }}>
+ <CssBaseline />
+ <AppBar
+ position="fixed"
+ sx={{
+ width: { sm: `calc(100% - ${drawerWidth}px)` },
+ ml: { sm: `${drawerWidth}px` },
+ bgcolor: "rgba(255,255,255,0.7)",
+ //color: "skyblue",
+ }}
+ >
+ <Toolbar>
+ <IconButton
+ color="primary"
+ aria-label="open drawer"
+ edge="start"
+ onClick={handleDrawerToggle}
+ sx={{ mr: 2, display: { sm: "none" } }}
+ >
+ <MenuIcon />
+ </IconButton>
+
+ <StyledImage
+ src={!darkModeOn ? logo_blue : logoLight}
+ alt="files-ui-main-logo"
+ />
+
+ <Typography
+ variant="h6"
+ noWrap
+ component="div"
+ color="primary"
+ sx={{ display: { sm: "none" } }}
+ >
+ Files ui
+ </Typography>
+ <Box style={{ flexGrow: 1 }} />
+ <Stack direction="row" spacing={1}>
+ <Tooltip title="Go to Files-ui GitHub repo">
+ <IconButton
+ style={{ borderRadius: "8px", border: "0.5px solid #eaeef3" }}
+ onClick={handleGoGitRepo}
+ color="secondary"
+ aria-label="upload picture"
+ component="label"
+ >
+ <GitHubIcon /* htmlColor="white" */ />
+ </IconButton>
+ </Tooltip>
+ <DarkModeLightModeButton
+ darkModeOn={darkModeOn}
+ onChangeDarkMode={handleDarkMode}
+ />
+ </Stack>
+ </Toolbar>
+ </AppBar>
+ <Box
+ component="nav"
+ sx={{ width: { sm: drawerWidth }, flexShrink: { sm: 0 } }}
+ aria-label="mailbox folders"
+ >
+ {/* The implementation can be swapped with js to avoid SEO duplication of links. */}
+ <Drawer
+ container={container}
+ variant="temporary"
+ open={mobileOpen}
+ onClose={handleDrawerToggle}
+ ModalProps={{
+ keepMounted: true, // Better open performance on mobile.
+ }}
+ sx={{
+ display: { xs: "block", sm: "none" },
+ "& .MuiDrawer-paper": {
+ boxSizing: "border-box",
+ width: drawerWidth,
+ },
+ }}
+ >
+ {drawer}
+ </Drawer>
+ <Drawer
+ variant="permanent"
+ sx={{
+ display: { xs: "none", sm: "block" },
+ "& .MuiDrawer-paper": {
+ boxSizing: "border-box",
+ width: drawerWidth,
+ },
+ }}
+ open
+ >
+ {drawer}
+ </Drawer>
+ </Box>
+ <Box
+ component="main"
+ sx={{
+ flexGrow: 1,
+ p: {xs:1,sm:3},
+ width: {
+ sm: `calc(100% - ${drawerWidth}px)`,
+ //md: `calc(100% - ${240}px)`,
+ },
+ }}
+ >
+ <Toolbar />
+
+ {children}
+ </Box>
+ </Box>
+ );
+}
+
+export default NavBarTemplate;
diff --git a/src/theme/mainTheme.js b/src/theme/mainTheme.js
new file mode 100644
index 0000000000000000000000000000000000000000..ee432ee8e784b2ee921fd18b94cb7c742cb90c9e
--- /dev/null
+++ b/src/theme/mainTheme.js
@@ -0,0 +1,21 @@
+import { createTheme } from "@mui/material/styles";
+
+export const MUItheme = createTheme({
+ palette: {
+ primary: {
+ // light: will be calculated from palette.primary.main,
+ main: "#042354",
+ // dark: will be calculated from palette.primary.main,
+ // contrastText: will be calculated to contrast with palette.primary.main
+ },
+ secondary: {
+ light: "#0066ff",
+ main: "#55b4f2",
+ // dark: will be calculated from palette.secondary.main,
+ //contrastText: '#ffcc00',
+ },
+ },
+ typography: {
+ fontFamily: ['"Poppins", sans-serif'],
+ },
+});
diff --git a/src/utils.ts b/src/utils.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b174a3d2c11e1d22669a742facb33213e54e44e4
--- /dev/null
+++ b/src/utils.ts
@@ -0,0 +1,9 @@
+import { ExtFile, ExtFileInstance } from "./files-ui/core";
+
+export const print_manager = (extFileList: ExtFile[] | ExtFileInstance[] | undefined, message: string = ""): void => {
+ if (extFileList)
+ console.log(`FileManagerLog ${message}`, extFileList?.map(F => F.uploadStatus));
+ else
+ console.log(`FileManagerLog ${message}`);
+
+}
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000000000000000000000000000000000000..f1ef334c6e6d98983da8e8c074dd3a454b605f77
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,26 @@
+{
+ "compilerOptions": {
+ "target": "es5",
+ "lib": [
+ "dom",
+ "dom.iterable",
+ "esnext"
+ ],
+ "allowJs": true,
+ "skipLibCheck": true,
+ "esModuleInterop": true,
+ "allowSyntheticDefaultImports": true,
+ "strict": true,
+ "forceConsistentCasingInFileNames": true,
+ "noFallthroughCasesInSwitch": true,
+ "module": "esnext",
+ "moduleResolution": "node",
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "noEmit": true,
+ "jsx": "react-jsx"
+ },
+ "include": [
+ "src"
+, "tests", "jest.config.js" ]
+}