Feature/add typescript support

README.md

@@ -9,7 +9,7 @@
 </div>
 
 <p>
-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.
 </p>
 
 ## ✨ 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<FileItem[]>([
+    {
+      name: "Documents",
+      isDirectory: true, // Folder
+      path: "/Documents", // Located in Root directory
+      updatedAt: "2024-09-09T10:30:00Z", // Last updated time
+    },
+    {
+      name: "Pictures",
+      isDirectory: true,
+      path: "/Pictures", // Located in Root directory as well
+      updatedAt: "2024-09-09T11:00:00Z",
+    },
+    {
+      name: "Pic.png",
+      isDirectory: false, // File
+      path: "/Pictures/Pic.png", // Located inside the "Pictures" folder
+      updatedAt: "2024-09-08T16:45:00Z",
+      size: 2048, // File size in bytes (example: 2 KB)
+    },
+  ]);
+
+  return (
+    <>
+      <FileManager files={files} />
+    </>
+  );
+}
+
+export default App;
+``` 
+
+**JavaScript:** Here’s a basic example of how to use the File Manager Component in your React application:
 
 ```jsx
 import { useState } from "react";
@@ -83,6 +123,8 @@ function App() {
 export default App;
 ```
 
+More detailed samples can be found in the [samples folder](tree/main/frontend).
+
 ## 📂 File Structure
 
 The `files` prop accepts an array of objects, where each object represents a file or folder. You can

frontend/.eslintrc.cjs

@@ -6,11 +6,17 @@ module.exports = {
     'plugin:react/recommended',
     'plugin:react/jsx-runtime',
     'plugin:react-hooks/recommended',
+    'plugin:@typescript-eslint/recommended',
   ],
   ignorePatterns: ['dist', '.eslintrc.cjs'],
-  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
+  parser: '@typescript-eslint/parser',
+  parserOptions: { 
+    ecmaVersion: 'latest', 
+    sourceType: 'module',
+    project: './tsconfig.json' 
+  },
   settings: { react: { version: '18.2' } },
-  plugins: ['react-refresh'],
+  plugins: ['react-refresh', "@typescript-eslint"],
   rules: {
     'react/jsx-no-target-blank': 'off',
     'react-refresh/only-export-components': [