diff --git a/README.md b/README.md index 80d31cb..b1f3c99 100644 --- a/README.md +++ b/README.md @@ -9,7 +9,7 @@
-An open-source React.js package for easy integration of a file manager into applications. It provides a user-friendly interface for managing files and folders, including viewing, uploading, and deleting, with full UI and backend integration. +An open-source React.js package with TypeScript suppor for easy integration of a file manager into applications. It provides a user-friendly interface for managing files and folders, including viewing, uploading, and deleting, with full UI and backend integration.
## ✨ Features @@ -43,7 +43,47 @@ npm i @cubone/react-file-manager ## 💻 Usage -Here’s a basic example of how to use the File Manager Component in your React application: +**TypeScript:** Here’s a basic example of how to use the File Manager Component in your React application: + +```tsx +import { useState } from "react"; +import { FileItem, FileManager } from "@cubone/react-file-manager"; +import "@cubone/react-file-manager/dist/style.css"; + +function App() { + const [files, setFiles] = useState{message}
; -}; - -export default ErrorTooltip; diff --git a/frontend/src/components/ErrorTooltip/ErrorTooltip.tsx b/frontend/src/components/ErrorTooltip/ErrorTooltip.tsx new file mode 100644 index 0000000..835ea6f --- /dev/null +++ b/frontend/src/components/ErrorTooltip/ErrorTooltip.tsx @@ -0,0 +1,16 @@ +import "./ErrorTooltip.scss"; + +export type ErrorTooltipXPlacement = "left" | "right"; +export type ErrorTooltipYPlacement = "top" | "bottom"; + +export interface ErrorTooltipProps { + message?: string; + xPlacement: ErrorTooltipXPlacement; + yPlacement: ErrorTooltipYPlacement; +} + +const ErrorTooltip = ({ message, xPlacement, yPlacement } : ErrorTooltipProps) => { + return{message}
; +}; + +export default ErrorTooltip; diff --git a/frontend/src/components/Loader/Loader.jsx b/frontend/src/components/Loader/Loader.tsx similarity index 64% rename from frontend/src/components/Loader/Loader.jsx rename to frontend/src/components/Loader/Loader.tsx index 1afcbf2..7bca4d4 100644 --- a/frontend/src/components/Loader/Loader.jsx +++ b/frontend/src/components/Loader/Loader.tsx @@ -1,7 +1,12 @@ import { ImSpinner2 } from "react-icons/im"; import "./Loader.scss"; -const Loader = ({ loading = false, className }) => { +interface LoaderProps { + loading?: boolean; + className?: string; +} + +const Loader = ({ loading = false, className } : LoaderProps) => { if (!loading) return null; return ( diff --git a/frontend/src/components/Modal/Modal.jsx b/frontend/src/components/Modal/Modal.tsx similarity index 67% rename from frontend/src/components/Modal/Modal.jsx rename to frontend/src/components/Modal/Modal.tsx index e612f5d..3fcb3de 100644 --- a/frontend/src/components/Modal/Modal.jsx +++ b/frontend/src/components/Modal/Modal.tsx @@ -1,21 +1,29 @@ import { MdClose } from "react-icons/md"; -import { useEffect, useRef } from "react"; +import { KeyboardEvent, ReactNode, useEffect, useRef } from "react"; import { useTranslation } from "../../contexts/TranslationProvider"; import "./Modal.scss"; +export interface ModalProps { + children: ReactNode; + show: boolean; + setShow: (show : boolean) => void; + heading: string; + dialogWidth?: string; + closeButton?: boolean; +} + const Modal = ({ children, show, setShow, heading, dialogWidth = "25%", - contentClassName = "", closeButton = true, -}) => { - const modalRef = useRef(null); +} : ModalProps) => { + const modalRef = useRef