@appforgeapps/uiforge 0.5.3 → 0.5.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +79 -0
- package/package.json +3 -2
package/README.md
CHANGED
|
@@ -20,6 +20,85 @@ A rich user interface library for ReactJS developers written by a seasoned user
|
|
|
20
20
|
- 🎯 **Developer Friendly** - Easy to use and customize
|
|
21
21
|
- 🆓 **Free & Open Source** - MIT licensed
|
|
22
22
|
|
|
23
|
+
## Component Gallery
|
|
24
|
+
|
|
25
|
+
Explore UIForge components in action. Each component is fully interactive in our example application.
|
|
26
|
+
|
|
27
|
+
### Interactive Examples
|
|
28
|
+
|
|
29
|
+
Run the development server to explore all components interactively:
|
|
30
|
+
|
|
31
|
+
```bash
|
|
32
|
+
git clone https://github.com/chriscase/UIForge.git
|
|
33
|
+
cd UIForge
|
|
34
|
+
npm install
|
|
35
|
+
npm run dev
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
Then open [http://localhost:5173](http://localhost:5173) to browse the component library.
|
|
39
|
+
|
|
40
|
+
### Component Overview
|
|
41
|
+
|
|
42
|
+
<p align="center">
|
|
43
|
+
<img src="docs/screenshots/home.png" alt="UIForge Component Library" width="800"/><br/>
|
|
44
|
+
<em>UIForge Component Library - Browse all available components</em>
|
|
45
|
+
</p>
|
|
46
|
+
|
|
47
|
+
### Core Components
|
|
48
|
+
|
|
49
|
+
<table>
|
|
50
|
+
<tr>
|
|
51
|
+
<td align="center" width="50%">
|
|
52
|
+
<img src="docs/screenshots/grid.png" alt="UIForgeGrid - Data Grid Component" width="100%"/><br/>
|
|
53
|
+
<strong>UIForgeGrid</strong><br/>
|
|
54
|
+
<em>Feature-rich data grid with selection, inline editing, search, pagination, and custom actions</em>
|
|
55
|
+
</td>
|
|
56
|
+
<td align="center" width="50%">
|
|
57
|
+
<img src="docs/screenshots/combobox.png" alt="UIForgeComboBox - Select Component" width="100%"/><br/>
|
|
58
|
+
<strong>UIForgeComboBox</strong><br/>
|
|
59
|
+
<em>Powerful select/combo box with icons, hierarchical options, and async search support</em>
|
|
60
|
+
</td>
|
|
61
|
+
</tr>
|
|
62
|
+
<tr>
|
|
63
|
+
<td align="center">
|
|
64
|
+
<img src="docs/screenshots/blocks-editor.png" alt="UIForgeBlocksEditor - Content Editor" width="100%"/><br/>
|
|
65
|
+
<strong>UIForgeBlocksEditor</strong><br/>
|
|
66
|
+
<em>Rich block-based content editor with drag-and-drop reordering and formatting</em>
|
|
67
|
+
</td>
|
|
68
|
+
<td align="center">
|
|
69
|
+
<img src="docs/screenshots/activity-stream.png" alt="UIForgeActivityStream - Activity Feed" width="100%"/><br/>
|
|
70
|
+
<strong>UIForgeActivityStream</strong><br/>
|
|
71
|
+
<em>GitHub-inspired activity feed with smart grouping and timeline visualization</em>
|
|
72
|
+
</td>
|
|
73
|
+
</tr>
|
|
74
|
+
<tr>
|
|
75
|
+
<td align="center">
|
|
76
|
+
<img src="docs/screenshots/sidebar.png" alt="UIForgeSidebar - Navigation Component" width="100%"/><br/>
|
|
77
|
+
<strong>UIForgeSidebar</strong><br/>
|
|
78
|
+
<em>Responsive sidebar with static, drawer, and bottom sheet variants</em>
|
|
79
|
+
</td>
|
|
80
|
+
<td align="center">
|
|
81
|
+
<img src="docs/screenshots/video.png" alt="UIForgeVideo - Video Player" width="100%"/><br/>
|
|
82
|
+
<strong>UIForgeVideo</strong><br/>
|
|
83
|
+
<em>Universal video embedding with support for 30+ platforms</em>
|
|
84
|
+
</td>
|
|
85
|
+
</tr>
|
|
86
|
+
<tr>
|
|
87
|
+
<td align="center">
|
|
88
|
+
<img src="docs/screenshots/button.png" alt="Button Component" width="100%"/><br/>
|
|
89
|
+
<strong>Button</strong><br/>
|
|
90
|
+
<em>Versatile button with multiple variants, sizes, and accessibility features</em>
|
|
91
|
+
</td>
|
|
92
|
+
<td align="center">
|
|
93
|
+
<img src="docs/screenshots/icon-library.png" alt="Icon Library" width="100%"/><br/>
|
|
94
|
+
<strong>Icon Library</strong><br/>
|
|
95
|
+
<em>Comprehensive collection of monochrome SVG icons</em>
|
|
96
|
+
</td>
|
|
97
|
+
</tr>
|
|
98
|
+
</table>
|
|
99
|
+
|
|
100
|
+
> 📸 Screenshots are automatically generated from the interactive examples. Run `npm run screenshots` to regenerate.
|
|
101
|
+
|
|
23
102
|
## Installation
|
|
24
103
|
|
|
25
104
|
### From NPM (Recommended)
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@appforgeapps/uiforge",
|
|
3
|
-
"version": "0.5.
|
|
3
|
+
"version": "0.5.4",
|
|
4
4
|
"description": "A rich user interface library for ReactJS developers written by a seasoned user interface developer who loves working with ReactJS.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/uiforge.cjs",
|
|
@@ -32,7 +32,8 @@
|
|
|
32
32
|
"format": "prettier --write \"src/**/*.{ts,tsx,css}\"",
|
|
33
33
|
"format:check": "prettier --check \"src/**/*.{ts,tsx,css}\"",
|
|
34
34
|
"devcontainer:set-exec": "bash scripts/set-exec-devcontainer-scripts.sh",
|
|
35
|
-
"prepublishOnly": "npm run build"
|
|
35
|
+
"prepublishOnly": "npm run build",
|
|
36
|
+
"screenshots": "npx tsx scripts/capture-screenshots.ts"
|
|
36
37
|
},
|
|
37
38
|
"keywords": [
|
|
38
39
|
"react",
|