Restruct-Corporate-Advantage/Uploader
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fixed compile errors, added publish scripts

Browse Source
This commit is contained in:
mohiit1502
2024-10-05 23:09:28 +05:30
parent 36fc820ebe
commit 4fd0a9de09
11 changed files with 13355 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13172
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

33
package.json
View File

@@ -1,17 +1,28 @@
{
"name": "@armco/uploader",
"private": true,
"version": "0.0.0",
"version": "0.0.3",
"type": "module",
"main": "build/cjs/index.js",
"module": "build/es/index.js",
"types": "build/types/index.d.ts",
"scripts": {
"build": "tsc && vite build",
"test": "vitest",
"build": "rm -rf build && tsc && vite build",
"format": "prettier --write .",
"lint": "eslint ."
"lint": "eslint .",
"publish:sh": "./publish.sh",
"publish:local": "./publish-local.sh"
},
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
"@armco/avatar": "^0.0.4",
"@armco/configs": "^0.0.7",
"@armco/icon": "^0.0.5",
"@armco/shared-components": "^0.0.53",
"@armco/types": "^0.0.11",
"@armco/utils": "^0.0.17",
"react": ">16.8.0",
"react-dnd-html5-backend": "^16.0.1",
"react-dom": ">16.8.0",
"uuid": "^10.0.0"
},
"devDependencies": {
"@testing-library/dom": "^9.2.0",
@@ -21,16 +32,21 @@
"@types/react": "^18.0.15",
"@types/react-dom": "^18.0.6",
"@types/testing-library__jest-dom": "^5.14.5",
"@vitejs/plugin-react": "^4.0.0",
"@types/uuid": "^10.0.0",
"@vitejs/plugin-react": "^4.3.1",
"eslint": "^8.0.0",
"eslint-config-react-app": "^7.0.1",
"eslint-plugin-prettier": "^4.2.1",
"glob": "^11.0.0",
"jsdom": "^21.1.0",
"prettier": "^2.7.1",
"prettier-config-nick": "^1.0.2",
"sass": "^1.63.4",
"typescript": "^5.0.2",
"vite": "^4.0.0",
"vite-plugin-css-injected-by-js": "^3.5.1",
"vite-plugin-dts": "^4.2.2",
"vite-plugin-externalize-deps": "^0.8.0",
"vitest": "^0.30.1"
},
"peerDependencies": {
@@ -51,7 +67,6 @@
}
},
"prettier": "prettier-config-nick",
"main": "index.tsx",
"repository": {
"type": "git",
"url": "git+https://github.com/ReStruct-Corporate-Advantage/uploader.git"

16
publish-local.sh Executable file
View File

@@ -0,0 +1,16 @@
#!/bin/sh
semver=${1:-patch}
set -e
npm run build
cp package.json build/
sed -i '' -E 's/"build"/"*"/' build/package.json
sed -i '' 's#"build/cjs/index.js"#"cjs/index.js"#' build/package.json
sed -i '' 's#"build/es/index.js"#"es/index.js"#' build/package.json
sed -i '' 's#"build/types/index.d.ts"#"types/index.d.ts"#' build/package.json
cd build
npm pack --pack-destination ~/__Projects__/Common

16
publish.sh Executable file
View File

@@ -0,0 +1,16 @@
#!/bin/sh
semver=${1:-patch}
set -e
npm --no-git-tag-version version ${semver}
npm run build
cp package.json build/
sed -i '' -E 's/"build"/"*"/' build/package.json
sed -i '' 's#"build/cjs/index.js"#"cjs/index.js"#' build/package.json
sed -i '' 's#"build/es/index.js"#"es/index.js"#' build/package.json
sed -i '' 's#"build/types/index.d.ts"#"types/index.d.ts"#' build/package.json
cd build
npm publish --access public --loglevel verbose

157
src/Uploader.tsx
View File

@@ -21,21 +21,18 @@ import {
UploadResult,
UploadResults,
} from "@armco/types"
import {
useAppDispatch,
useUpload,
notify,
Droppable,
Helper,
Button,
Text,
LoadableIcon,
ProgressIndicator,
Tooltip,
Avatar,
Network,
API_CONFIG,
} from "../.."
import useUpload from "./useUpload"
import { useNotification } from "@armco/utils/hooks"
import { convertToBytes } from "@armco/utils/helper"
import { put } from "@armco/utils/network"
import Droppable from "@armco/shared-components/Droppable"
import Button from "@armco/shared-components/Button"
import Text from "@armco/shared-components/Text"
import ProgressIndicator from "@armco/shared-components/ProgressIndicator"
import Tooltip from "@armco/shared-components/Tooltip"
import { API_CONFIG } from "@armco/configs/endpoints"
import Avatar from "@armco/avatar"
import Icon from "@armco/icon"
import "./Uploader.component.scss"
const UploadedEntry = ({
@@ -65,15 +62,22 @@ const UploadedEntry = ({
slot={ArPopoverSlots.ANCHOR}
rightEndContent={
(hovered || result.status === ArProgress.FAILED) && (
<LoadableIcon
classes={disabled ? "" : "cursor-pointer"}
color={result.status === ArProgress.FAILED ? "#ff4d4f" : "grey"}
<Icon
icon="ri.RiDeleteBin6Fill"
onClick={() => {
if (!disabled) {
display(false)
setTimeout(clear, 300)
}
attributes={{
colors: {
fillColor:
result.status === ArProgress.FAILED ? "#ff4d4f" : "grey",
},
classes: disabled ? "" : "cursor-pointer",
}}
events={{
onClick: () => {
if (!disabled) {
display(false)
setTimeout(clear, 300)
}
},
}}
/>
)
@@ -152,6 +156,7 @@ const Uploader = memo(
uploadingButtonText = "Uploading...",
} = props
const inputRef = useRef<HTMLInputElement>(null)
const { notify } = useNotification()
const [localResults, setLocalResults] = useState<UploadResults>()
const [localAllowMultiple, setLocalAllowMultiple] = useState<boolean>()
const [localAcceptedFileTypes, setLocalAcceptedFileTypes] = useState<
@@ -172,7 +177,6 @@ const Uploader = memo(
uploadSequential,
externalFiles,
)
const dispatch = useAppDispatch()
const isAvatar = variant === "image-circle" || variant === "image-rect"
useEffect(() => {
@@ -212,7 +216,7 @@ const Uploader = memo(
}, [isAvatar])
const checkAndUpload = (files: Array<File>) => {
const sizeLimit = Helper.convertToBytes(fileSizeLimit)
const sizeLimit = convertToBytes(fileSizeLimit)
let maxFileCount
try {
maxFileCount =
@@ -231,13 +235,11 @@ const Uploader = memo(
files.length + Object.keys(localResults || {}).length > maxFileCount
) {
setErrorMessage("Exceeded allowed number of files.")
dispatch(
notify({
message: "You've selected more then allowed number of files",
type: ArAlertType.WARNING,
uid: uuid(),
}),
)
notify({
message: "You've selected more then allowed number of files",
type: ArAlertType.WARNING,
uid: uuid(),
})
} else if (files.findIndex((file) => file.size > sizeLimit) > -1) {
const message = `${
localAllowMultiple
@@ -245,13 +247,11 @@ const Uploader = memo(
: "Selected file exceeds "
}specified size limit of ${fileSizeLimit}`
setErrorMessage(message)
dispatch(
notify({
message,
type: ArAlertType.WARNING,
uid: uuid(),
}),
)
notify({
message,
type: ArAlertType.WARNING,
uid: uuid(),
})
} else if (files && files.length > 0) {
upload(files, afterUpload, localAllowMultiple)
onFileSelected && onFileSelected(files)
@@ -318,33 +318,27 @@ const Uploader = memo(
? ""
: API_CONFIG.STATIC_HOST[environment as keyof object]
url = host + url
Network.put(url, resultClone).then((res) => {
put(url, resultClone).then((res) => {
if (res.status === 200) {
dispatch(
notify({
message: "Image updaetd successfully!",
type: ArAlertType.SUCCESS,
uid: uuid(),
}),
)
notify({
message: "Image updaetd successfully!",
type: ArAlertType.SUCCESS,
uid: uuid(),
})
} else {
dispatch(
notify({
message: "Failed to update image!",
type: ArAlertType.ERROR,
uid: uuid(),
}),
)
notify({
message: "Failed to update image!",
type: ArAlertType.ERROR,
uid: uuid(),
})
}
})
} else {
dispatch(
notify({
message: "Missing image update URL",
type: ArAlertType.WARNING,
uid: uuid(),
}),
)
notify({
message: "Missing image update URL",
type: ArAlertType.WARNING,
uid: uuid(),
})
}
}
}
@@ -438,19 +432,25 @@ const Uploader = memo(
/>
)}
{
<LoadableIcon
classes={`ms-2 ${
disabled ? "" : "cursor-pointer"
}`}
color="red"
<Icon
icon="io5.IoClose"
onClick={() => {
if (disabled) {
clear()
if (inputRef.current) {
inputRef.current.value = ""
attributes={{
colors: {
fillColor: "red",
},
classes: `ms-2 ${
disabled ? "" : "cursor-pointer"
}`,
}}
events={{
onClick: () => {
if (disabled) {
clear()
if (inputRef.current) {
inputRef.current.value = ""
}
}
}
},
}}
/>
}
@@ -459,11 +459,15 @@ const Uploader = memo(
</>
) : (
<>
<LoadableIcon
classes={variant === "large" ? "mb-2" : "me-3"}
<Icon
icon="io5.IoFileTrayOutline"
size={variant === "large" ? "3rem" : "1rem"}
color="#1677ff"
attributes={{
colors: {
fillColor: "#1677ff",
},
classes: variant === "large" ? "mb-2" : "me-3",
size: variant === "large" ? "3rem" : "1rem",
}}
/>
<span
className={`ar-Uploader__upload-prompt-text${
@@ -515,6 +519,7 @@ const Uploader = memo(
type="file"
onChange={handleFileChange}
ref={inputRef}
title="file-uploader"
accept={
Array.isArray(localAcceptedFileTypes)
? localAcceptedFileTypes.join(",")

2
src/index.ts Normal file
View File

@@ -0,0 +1,2 @@
export { default as useUpload } from "./useUpload"
export { default as Uploader } from "./Uploader"

5
src/setupTests.ts
View File

@@ -1,5 +0,0 @@
// jest-dom adds custom jest matchers for asserting on DOM nodes.
// allows you to do things like:
// expect(element).toHaveTextContent(/react/i)
// learn more: https://github.com/testing-library/jest-dom
import "@testing-library/jest-dom"

13
src/useUpload.ts
View File

@@ -6,7 +6,8 @@ import {
UploadHandler,
UploadResults,
} from "@armco/types"
import { Helper, Network } from "../utils"
import { generateFileKey } from "@armco/utils/helper"
import { upload as httpUpload } from "@armco/utils/network"
const SUCCESS_RESULT = {
status: ArProgress.COMPLETED,
@@ -31,11 +32,11 @@ const useUpload = (
if (files) {
const results: UploadResults = {}
files?.forEach((file) => {
results[Helper.generateFileKey(file)] = {
results[generateFileKey(file)] = {
...file,
progress: 100,
status: ArProgress.COMPLETED,
file: typeof file === "object" ? file : { name: file.name },
file: typeof file === "object" ? file : { name: (file as File).name },
}
})
setResults(results)
@@ -73,7 +74,7 @@ const useUpload = (
const uploadFile = async (file: File) => {
const isHandler = typeof endpointOrHandler === "function"
const handler = isHandler ? (endpointOrHandler as UploadHandler) : null
const fileKey = Helper.generateFileKey(file)
const fileKey = generateFileKey(file)
intervalRef.current[fileKey] = setInterval(() => {
setResults((prevResult) => {
const prevResultObj = prevResult && prevResult[fileKey as string]
@@ -128,7 +129,7 @@ const useUpload = (
}
})
} else {
return await Network.upload(endpointOrHandler as string, file)
return await httpUpload(endpointOrHandler as string, file)
.then((response) => {
if (!clearActionRef.current[fileKey]) {
if (!response.body) {
@@ -186,7 +187,7 @@ const useUpload = (
) => {
const newResults: UploadResults = {}
newFiles.forEach((file) => {
const fileKey = Helper.generateFileKey(file)
const fileKey = generateFileKey(file)
newResults[fileKey] = {
file,
status: ArProgress.IN_PROGRESS,

1
src/vite-env.d.ts vendored
View File

@@ -1 +0,0 @@
/// <reference types="vite/client" />

1
tsconfig.json
View File

@@ -6,6 +6,7 @@
"dom.iterable",
"esnext"
],
"outDir": "build",
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,

47
vite.config.ts
View File

@@ -1,20 +1,45 @@
import { resolve } from "path"
import { defineConfig } from "vitest/config"
import react from "@vitejs/plugin-react"
import dts from "vite-plugin-dts"
import cssInjectedByJsPlugin from "vite-plugin-css-injected-by-js"
import { externalizeDeps } from "vite-plugin-externalize-deps"
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
server: {
open: true,
},
plugins: [
react(),
dts({ outDir: "build/types" }),
cssInjectedByJsPlugin({
jsAssetsFilterFunction: (chunk) => chunk.fileName.includes("Uploader"),
}),
externalizeDeps(),
],
build: {
outDir: "build",
sourcemap: true,
},
test: {
globals: true,
environment: "jsdom",
setupFiles: "src/setupTests",
mockReset: true,
lib: {
entry: [
resolve(__dirname, "src/Uploader.tsx"),
resolve(__dirname, "src/useUpload.ts"),
resolve(__dirname, "src/index.ts"),
],
},
rollupOptions: {
treeshake: true,
output: [
{
format: "es",
dir: "build/es",
entryFileNames: "[name].js",
chunkFileNames: "[name]-chunk.js",
},
{
format: "cjs",
dir: "build/cjs",
entryFileNames: "[name].js",
chunkFileNames: "[name]-chunk.js",
},
],
},
},
})