[FIX]: added missing dependencies for build

Author: JinSSJ3

build/components/dropzone/components/Dropzone/Dropzone.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import "./Dropzone.scss";
 import { DropzoneProps } from "./DropzoneProps";
 declare const Dropzone: React.FC<DropzoneProps>;

build/components/dropzone/components/DropzoneFooter.tsx/DropzoneFooter.d.ts

@@ -1,4 +1,4 @@
-import { FC } from "react";
+import * as React from "react";
 import { DropzoneFooterProps } from "./DropzoneFooterProps";
-declare const DropzoneFooter: FC<DropzoneFooterProps>;
+declare const DropzoneFooter: React.FC<DropzoneFooterProps>;
 export default DropzoneFooter;

build/components/icons/IconProps/IconProps.d.ts

@@ -1,9 +1,9 @@
-import { CSSProperties } from "react";
+import * as React from "react";
 export interface IconProps {
     size?: "micro" | "small" | "semi-medium" | "medium" | "large";
     color?: string;
     colorFill?: string;
     onClick?: Function;
-    style?: CSSProperties;
+    style?: React.CSSProperties;
     className?: string;
 }

build/components/icons/Info/Info.d.ts

@@ -1,4 +1,4 @@
-import { FC } from "react";
+import * as React from "react";
 import { InfoProps } from "./InfoProps";
-declare const Info: FC<InfoProps>;
+declare const Info: React.FC<InfoProps>;
 export default Info;

build/components/video-preview/VideoPreview.d.ts

@@ -1,5 +1,5 @@
-import { FC } from "react";
+import * as React from "react";
 import { VideoPreviewProps } from "./VideoPreviewProps";
 import "./VideoPreview.scss";
-declare const VideoPreview: FC<VideoPreviewProps>;
+declare const VideoPreview: React.FC<VideoPreviewProps>;
 export default VideoPreview;

build/index.es.js

@@ -1,6 +1,6 @@
-import { FC } from "react";
+import * as React from "react";
 interface loaderProps {
     color?: string;
 }
-declare const Loader: FC<loaderProps>;
+declare const Loader: React.FC<loaderProps>;
 export default Loader;

build/index.es.js.map

@@ -1,6 +1,6 @@
 {
   "name": "@dropzone-ui/react",
-  "version": "6.7.10",
+  "version": "6.7.12",
   "description": "The best and most complete React library for managing file uploads. Multilanguage support. Server side support. Material design styles. Code generator on webpage.",
   "main": "./build/index.js",
   "module": "./build/index.es.js",
@@ -37,7 +37,9 @@
   },
   "homepage": "https://dropzone-ui.herokuapp.com/",
   "dependencies": {
-  
+    "@dynamicss/dynamicss": "^2.2.2",
+    "@unlimited-react-components/kernel": "^1.0.2",
+    "@unlimited-react-components/material-button": "^1.2.8"
   },
   "peerDependencies": {
     "axios": "latest",
@@ -95,4 +97,4 @@
     "test": "jest",
     "test:coveralls": "jest --coverage && coveralls < coverage/lcov.info"
   }
-}
+}

build/index.js

@@ -1,5 +1,5 @@
 import { mergeProps } from "@unlimited-react-components/kernel";
-import React, { useEffect, useRef, useState } from "react";
+import * as React from "react";
 import "./Dropzone.scss";
 import useDropzoneStyles from "../hooks/useDropzoneStyles";
 import {
@@ -72,9 +72,9 @@ const Dropzone: React.FC<DropzoneProps> = (props: DropzoneProps) => {
     disableScroll,
   } = mergeProps(props, DropzonePropsDefault);
   //ref for ripple
-  const dz_ui_ripple_ref = useRef<HTMLDivElement>(null);
+  const dz_ui_ripple_ref = React.useRef<HTMLDivElement>(null);
   //re-validation: for development purposes and for preventing clean fileList in web page code generator
-  useEffect(() => {
+  React.useEffect(() => {
     if (files.length > 0) {
       let fileList: FileList = files.map((x) => x.file) as unknown as FileList;
       const remainingValids: number =
@@ -99,18 +99,18 @@ const Dropzone: React.FC<DropzoneProps> = (props: DropzoneProps) => {
     ValidateErrorLocalizerSelector(localization);
 
   //ref to the hidden input tag
-  const inputRef = useRef<HTMLInputElement>(null);
+  const inputRef = React.useRef<HTMLInputElement>(null);
   // whether is draggin or not
-  const [isDragging, setIsDragging] = useState<boolean>(false);
+  const [isDragging, setIsDragging] = React.useState<boolean>(false);
   // list of files (local)
-  const [files, setFiles] = useState<FileValidated[]>([]);
+  const [files, setFiles] = React.useState<FileValidated[]>([]);
   const [localView, setLocalView] =
-    useState<FileItemContainerProps["view"]>("grid");
-  const [localMessage, setLocalMessage] = useState<string>("");
+    React.useState<FileItemContainerProps["view"]>("grid");
+  const [localMessage, setLocalMessage] = React.useState<string>("");
 
   //ClassName for dynamic style
-  const [onUploadingStart, setOnUploadingStart] = useState<boolean>(false);
-  // const [queueFiles, setQueueFiles] = useState<FileValidated[]>([]);
+  const [onUploadingStart, setOnUploadingStart] = React.useState<boolean>(false);
+  // const [queueFiles, setQueueFiles] = React.useState<FileValidated[]>([]);
   // const offset:number= header && footer? 50: (!header && footer?23:(header && !footer?22:0)) ;
 
   const classNameCreated: string = useDropzoneStyles(
@@ -125,21 +125,21 @@ const Dropzone: React.FC<DropzoneProps> = (props: DropzoneProps) => {
   }${clickable ? ` clickable` : ``}`;
 
   //number of files
-  const [numberOfValidFiles, setNumberOfValidFiles] = useState<number>(0);
-  useEffect(() => {
+  const [numberOfValidFiles, setNumberOfValidFiles] = React.useState<number>(0);
+  React.useEffect(() => {
     if (value) {
       setFiles(value);
       setNumberOfValidFiles(value.filter((x: FileValidated) => x.valid).length);
     }
   }, [value]);
-  useEffect(() => {
+  React.useEffect(() => {
     if (disableScroll) {
       setLocalView("grid");
     } else if (view) {
       setLocalView(view);
     }
   }, [view, disableScroll]);
-  useEffect(() => {
+  React.useEffect(() => {
     if (uploadingMessage) {
       setLocalMessage(uploadingMessage);
     }

build/index.js.map

@@ -1,12 +1,12 @@
-import React, { FC } from "react";
+import * as React from "react";
 import { DropzoneLocalizerSelector } from "../../../../localization";
 import {
   FunctionLabel,
   LocalLabels,
 } from "../../../../localization/localization";
 import { DropzoneFooterProps } from "./DropzoneFooterProps";
 
-const DropzoneFooter: FC<DropzoneFooterProps> = (
+const DropzoneFooter: React.FC<DropzoneFooterProps> = (
   props: DropzoneFooterProps
 ) => {
   const { accept, message, localization } = props;

build/utils/loader.d.ts

@@ -1,10 +1,10 @@
-import { CSSProperties } from "react";
+import * as React from "react";
 
 export interface IconProps {
-    size?: "micro"|"small" |"semi-medium"| "medium" | "large";
+    size?: "micro" | "small" | "semi-medium" | "medium" | "large";
     color?: string;
     colorFill?: string;
     onClick?: Function;
-    style?:CSSProperties;
-    className?:string;
+    style?: React.CSSProperties;
+    className?: string;
 }

package-lock.json

@@ -1,8 +1,8 @@
-import React,{ FC } from "react";
+import * as React from "react";
 import { InfoProps } from "./InfoProps";
 import { parseSize } from "../utils/utils";
 
-const Info: FC<InfoProps> = (props: InfoProps) => {
+const Info: React.FC<InfoProps> = (props: InfoProps) => {
   const { size, color, colorFill, onClick } = props;
   const finalSize = parseSize(size);
   return (

package.json

@@ -1,16 +1,14 @@
-import React, { FC, Fragment } from "react";
-import { useEffect } from "react";
-import { useState } from "react";
-import { useRef } from "react";
+import * as React from "react";
+
 import { Cancel } from "../icons";
 import { VideoPreviewProps } from "./VideoPreviewProps";
 import "./VideoPreview.scss";
-const VideoPreview: FC<VideoPreviewProps> = (props: VideoPreviewProps) => {
+const VideoPreview: React.FC<VideoPreviewProps> = (props: VideoPreviewProps) => {
   const { videoSrc, openVideo, onClose, autoplay, controls, style } = props;
-  const videoRef = useRef<HTMLVideoElement>(null);
-  const [source, setSource] = useState<string | undefined>(undefined);
+  const videoRef = React.useRef<HTMLVideoElement>(null);
+  const [source, setSource] = React.useState<string | undefined>(undefined);
 
-  useEffect(() => {
+  React.useEffect(() => {
     //if not undefined
     if (!videoSrc) {
       return;
@@ -31,7 +29,7 @@ const VideoPreview: FC<VideoPreviewProps> = (props: VideoPreviewProps) => {
       }
     }
   }, [videoSrc]);
-  useEffect(() => {
+  React.useEffect(() => {
     if (source && videoRef.current) {
       videoRef.current.load();
     }
@@ -89,7 +87,7 @@ const VideoPreview: FC<VideoPreviewProps> = (props: VideoPreviewProps) => {
       </div>
     );
   } else {
-    return <Fragment></Fragment>;
+    return <React.Fragment></React.Fragment>;
   }
 };
 export default VideoPreview;

src/components/dropzone/components/Dropzone/Dropzone.tsx

@@ -1,9 +1,9 @@
 import { hexColorToRGB } from "@unlimited-react-components/kernel";
-import React, { FC } from "react";
+import * as React from "react";
 interface loaderProps{
   color?:string ;
 }
-const Loader: FC<loaderProps> = (props: loaderProps) => {
+const Loader: React.FC<loaderProps> = (props: loaderProps) => {
   const {color="#8b6b10"}=props;
   return (
     <svg