{"id":35268965,"url":"https://github.com/dduraipandian/uiframe","last_synced_at":"2026-04-27T17:32:08.561Z","repository":{"id":329710213,"uuid":"1113537002","full_name":"dduraipandian/uiframe","owner":"dduraipandian","description":"A collection of lightweight, opinionated composable UI components built on Bootstrap 5.","archived":false,"fork":false,"pushed_at":"2026-01-01T17:39:24.000Z","size":321,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-01-06T02:53:55.822Z","etag":null,"topics":["bootstrap","contextmenu","dropdown","table","tree","ui"],"latest_commit_sha":null,"homepage":"https://dduraipandian.github.io/uiframe/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dduraipandian.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-12-10T05:40:50.000Z","updated_at":"2026-01-01T17:39:27.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/dduraipandian/uiframe","commit_stats":null,"previous_names":["digitul-labs/uiframe"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/dduraipandian/uiframe","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dduraipandian%2Fuiframe","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dduraipandian%2Fuiframe/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dduraipandian%2Fuiframe/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dduraipandian%2Fuiframe/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dduraipandian","download_url":"https://codeload.github.com/dduraipandian/uiframe/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dduraipandian%2Fuiframe/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32348046,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-27T17:12:42.749Z","status":"ssl_error","status_checked_at":"2026-04-27T17:12:41.658Z","response_time":128,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bootstrap","contextmenu","dropdown","table","tree","ui"],"created_at":"2025-12-30T11:49:36.501Z","updated_at":"2026-04-27T17:32:08.554Z","avatar_url":"https://github.com/dduraipandian.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# uiframe\n\n[![Tests](https://github.com/dduraipandian/uiframe/actions/workflows/ci.yml/badge.svg?branch=main)](https://github.com/dduraipandian/uiframe/actions/workflows/ci.yml)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n[![Node.js \u003e= 20](https://img.shields.io/badge/node-%3E%3D%2020-brightgreen)](https://nodejs.org/)\n\nA lightweight, opinionated composable UI framework for building professional web interfaces. Built on top of Bootstrap 5, `uiframe` provides high-performance, reusable UI components with minimal configuration and native ES Module support.\n\n## Why uiframe?\n\n`uiframe` is designed as a utility wrapper for Bootstrap 5. It provides a set of complex components (like resizable split panes, searchable dropdowns, and recursive trees) that are easy to drop into any project without the overhead of a heavy framework.\n\n## Features\n\n- **🚀 Performance Oriented**: Efficient DOM manipulation and clean lifecycle management.\n- **🎨 Modern Aesthetics**: Professional styling out of the box with Bootstrap 5 integration.\n- **📂 Component Library** (Package-based):\n  - **Table**: Feature-rich data grid with search, pagination, and JSON/CSV export.\n  - **Tree**: Dynamic, recursive tree view with lazy loading and state persistence.\n  - **ContextMenu**: Flexible right-click menus with manual positioning.\n  - **DropDown**: Compact dropdown with search, animations, and event-driven selection.\n  - **Tab**: Dynamic tab management for complex layouts.\n  - **Spinner**: Customizable loading indicators.\n  - **Split**: Draggable multi-pane layouts.\n  - **Online**: Real-time network status monitoring.\n- **🧪 Robust Testing**: Comprehensive unit test suite (40+ tests) passing across all components.\n\n## Getting Started\n\n### Prerequisites\n\n- **Node.js** (v20 or higher; tested on v20, v22, v24)\n- **Modern browser** with ES Module support (all modern browsers: Chrome 61+, Firefox 67+, Safari 11+, Edge 79+)\n\n### Installation\n\nClone locally for development:\n\n```bash\ngit clone https://github.com/dduraipandian/uiframe.git\ncd uiframe\nnpm install\n```\n\nAll components are built as browser-ready bundles and ESM/CJS packages.\n\n#### In the Browser (IIFE)\n\nLoad `core.min.js` first, followed by the components you need. All components are available under the global `uiframe` object.\n\n```html\n\u003clink\n  rel=\"stylesheet\"\n  href=\"https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css\"\n/\u003e\n\u003c!-- Load UI Frame CSS (base utilities + component styles) --\u003e\n\u003clink rel=\"stylesheet\" href=\"./packages/core/dist/base.css\" /\u003e\n\u003clink rel=\"stylesheet\" href=\"./packages/table/dist/table.css\" /\u003e\n\n\u003cscript src=\"./packages/core/dist/core.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"./packages/table/dist/table.min.js\"\u003e\u003c/script\u003e\n\n\u003cdiv id=\"app-container\"\u003e\u003c/div\u003e\n\n\u003cscript\u003e\n  // Components are automatically attached to the window.uiframe object\n  const myTable = new uiframe.Table({\n    name: \"MainTable\",\n    options: {\n      search: true,\n      pagination: true,\n    },\n  });\n\n  myTable.renderInto(\"app-container\");\n  myTable.updateData([{ id: 1, name: \"Sample Item\" }]);\n\u003c/script\u003e\n```\n\n#### Using ESM (Modern Bundlers)\n\n```javascript\nimport { Table } from \"@uiframe/table\";\nimport \"@uiframe/core/style\"; // Base utilities\nimport \"@uiframe/table/style\"; // Component styles\n\nconst myTable = new Table({ name: \"Users\" });\nmyTable.renderInto(document.body);\n```\n\n## Documentation\n\nTo run the interactive documentation and live demos locally:\n\n```bash\nnpm install\nnpm run dev\n# Visit http://localhost:8000 in your browser\n```\n\nThe docs include live demos for all components with interactive examples.\n\n## Development\n\n### Running Tests\n\nWe use Jest and JSDOM for unit testing:\n\n```bash\nnpm install  # Install dev dependencies\nnpm test     # Run full test suite\n```\n\nAll tests (38 tests across 9 suites) are passing. See [tests/](tests/) for examples.\n\n### Code Quality\n\n```bash\nnpm run lint    # Run ESLint style checker\nnpm run format  # Auto-format code with Prettier\n```\n\n### Components Structure\n\n`uiframe` follows a modular structure where each component is a separate package in the `packages/` directory.\n\n| Package        | Purpose                                                      |\n| -------------- | ------------------------------------------------------------ |\n| `core`         | Base classes (`Component`, `EmitterComponent`) and `Utility` |\n| `spinner`      | Loading indicator with custom styling                        |\n| `table`        | Data grid with search, pagination, export                    |\n| `tree`         | Recursive tree view with lazy-loading                        |\n| `tab`          | Dynamic tab management                                       |\n| `dropdown`     | Searchable dropdown component                                |\n| `contextmenu`  | Right-click context menus                                    |\n| `online`       | Network status monitoring                                    |\n| `split`        | Resizable split pane layouts                                 |\n| `notification` | Toast and modal-based notifications                          |\n\nCore source code is located in `components/`. Packages in `packages/` build these into their respective `dist/` folders using Rollup.\n\n## Contributing\n\nContributions are welcome! Here's how to get started:\n\n1. **Fork \u0026 Clone** the repository\n2. **Create a feature branch**: `git checkout -b feature/my-feature`\n3. **Make changes** and add tests if applicable\n4. **Run tests \u0026 lint**: `npm test \u0026\u0026 npm run lint`\n5. **Commit** with clear messages\n6. **Push** and open a Pull Request\n\nPlease ensure:\n\n- All tests pass (`npm test`)\n- Code is properly formatted (`npm run format`)\n- No linting errors (`npm run lint`)\n- Changes include relevant test updates\n\n## License\n\nMIT © 2025 [dduraipandian](https://github.com/dduraipandian). See [LICENSE](LICENSE) for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdduraipandian%2Fuiframe","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdduraipandian%2Fuiframe","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdduraipandian%2Fuiframe/lists"}