add file browser component and widget

examples/file_browser_demo/src/main.rs

@@ -0,0 +1,87 @@
+use yew::prelude::*;
+use framework::components::{FileBrowser, FileBrowserConfig};
+
+#[function_component(FileBrowserPage)]
+fn file_browser_page() -> Html {
+    let config = FileBrowserConfig {
+        base_endpoint: "http://localhost:3001/files".to_string(),
+        max_file_size: 100 * 1024 * 1024, // 100MB
+        chunk_size: 1024 * 1024, // 1MB
+        initial_path: "".to_string(),
+        show_upload: true,
+        show_download: true,
+        show_delete: true,
+        show_create_dir: true,
+        css_classes: "container-fluid".to_string(),
+        theme: "light".to_string(),
+    };
+
+    html! {
+        <div class="app">
+            <nav class="navbar navbar-expand-lg navbar-dark bg-primary mb-4">
+                <div class="container-fluid">
+                    <span class="navbar-brand mb-0 h1">
+                        <i class="bi bi-folder2-open"></i>
+                        {" File Browser Demo"}
+                    </span>
+                    <div class="navbar-text">
+                        {"Powered by Uppy.js & TUS Protocol"}
+                    </div>
+                </div>
+            </nav>
+            
+            <main class="container-fluid">
+                <div class="row">
+                    <div class="col-12">
+                        <div class="card shadow">
+                            <div class="card-header bg-light">
+                                <h5 class="card-title mb-0">
+                                    <i class="bi bi-hdd-stack"></i>
+                                    {" File System Browser"}
+                                </h5>
+                                <small class="text-muted">
+                                    {"Browse, upload, download, and manage files with resumable uploads"}
+                                </small>
+                            </div>
+                            <div class="card-body p-0">
+                                <FileBrowser ..config />
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                
+                <footer class="mt-5 py-4 bg-light text-center text-muted">
+                    <div class="container">
+                        <p class="mb-1">
+                            {"File Browser Component Demo - Built with "}
+                            <a href="https://yew.rs" target="_blank" class="text-decoration-none">{"Yew"}</a>
+                            {", "}
+                            <a href="https://uppy.io" target="_blank" class="text-decoration-none">{"Uppy.js"}</a>
+                            {", and "}
+                            <a href="https://tus.io" target="_blank" class="text-decoration-none">{"TUS Protocol"}</a>
+                        </p>
+                        <small>{"Compiled to WebAssembly for maximum performance"}</small>
+                    </div>
+                </footer>
+            </main>
+        </div>
+    }
+}
+
+#[function_component(App)]
+fn app() -> Html {
+    html! { <FileBrowserPage /> }
+}
+
+fn main() {
+    // Set up panic hook for better error messages in development
+    #[cfg(feature = "console_error_panic_hook")]
+    console_error_panic_hook::set_once();
+
+    // Use wee_alloc as the global allocator for smaller WASM binary size
+    #[cfg(feature = "wee_alloc")]
+    #[global_allocator]
+    static ALLOC: wee_alloc::WeeAlloc = wee_alloc::WeeAlloc::INIT;
+
+    yew::Renderer::<App>::new().render();
+}