@adityabheke/renderer-package 1.0.0 โ 1.0.2
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 +112 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,112 @@
|
|
|
1
|
+
# ๐ฆ @adityabheke/renderer-package
|
|
2
|
+
|
|
3
|
+
A production-ready React page renderer that converts JSON schema into fully responsive UI using Tailwind CSS v4 and runtime CSS variables.
|
|
4
|
+
|
|
5
|
+
Built for dynamic website/page builder systems.
|
|
6
|
+
|
|
7
|
+
---
|
|
8
|
+
|
|
9
|
+
## ๐ Features
|
|
10
|
+
|
|
11
|
+
* โก Schema-driven rendering
|
|
12
|
+
* ๐จ Tailwind CSS v4 (precompiled โ no setup required in consumer app)
|
|
13
|
+
* ๐ฑ Fully responsive (container query variants supported)
|
|
14
|
+
* ๐ Built-in animation support (`tailwindcss-animate`)
|
|
15
|
+
* ๐งฉ Plug-and-play integration
|
|
16
|
+
* ๐ฆ ESM + CJS support
|
|
17
|
+
* ๐ง TypeScript definitions included
|
|
18
|
+
* ๐ No Tailwind configuration required in the user project
|
|
19
|
+
|
|
20
|
+
---
|
|
21
|
+
|
|
22
|
+
## ๐ฅ Installation
|
|
23
|
+
|
|
24
|
+
```bash
|
|
25
|
+
npm install @adityabheke/renderer-package
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
---
|
|
29
|
+
|
|
30
|
+
## โ ๏ธ Peer Dependencies
|
|
31
|
+
|
|
32
|
+
Make sure your project has the following installed:
|
|
33
|
+
|
|
34
|
+
```bash
|
|
35
|
+
npm install react react-dom react-router-dom lucide-react
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
Required versions:
|
|
39
|
+
|
|
40
|
+
* react >= 18
|
|
41
|
+
* react-dom >= 18
|
|
42
|
+
* react-router-dom >= 6
|
|
43
|
+
* lucide-react >= 0.300.0
|
|
44
|
+
|
|
45
|
+
---
|
|
46
|
+
|
|
47
|
+
## ๐ Usage
|
|
48
|
+
|
|
49
|
+
### 1๏ธโฃ Import Styles (Required Once)
|
|
50
|
+
|
|
51
|
+
```tsx
|
|
52
|
+
import "@adityabheke/renderer-package/styles.css";
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
### 2๏ธโฃ Use the Renderer
|
|
56
|
+
|
|
57
|
+
```tsx
|
|
58
|
+
import { PageRenderer } from "@adityabheke/renderer-package";
|
|
59
|
+
|
|
60
|
+
function App() {
|
|
61
|
+
return (
|
|
62
|
+
<BrowserRouter>
|
|
63
|
+
<Routes>
|
|
64
|
+
<Route path='*' element={<PageRenderer url={CLIENT_URL} />} />
|
|
65
|
+
</Routes>
|
|
66
|
+
</BrowserRouter>
|
|
67
|
+
)
|
|
68
|
+
}
|
|
69
|
+
```
|
|
70
|
+
CLIENT_URL = will be provided by admin
|
|
71
|
+
---
|
|
72
|
+
|
|
73
|
+
## ๐ง How It Works
|
|
74
|
+
|
|
75
|
+
* Parses JSON schema
|
|
76
|
+
* Resolves components using internal `ComponentRegistry`
|
|
77
|
+
* Applies dynamic CSS variables
|
|
78
|
+
* Uses precompiled Tailwind CSS
|
|
79
|
+
* Supports responsive container-based variants
|
|
80
|
+
* Supports animation classes like:
|
|
81
|
+
|
|
82
|
+
* `animate-in`
|
|
83
|
+
* `slide-in-from-*`
|
|
84
|
+
|
|
85
|
+
---
|
|
86
|
+
|
|
87
|
+
## ๐ Package Output Structure
|
|
88
|
+
|
|
89
|
+
```
|
|
90
|
+
dist/
|
|
91
|
+
index.js
|
|
92
|
+
index.cjs
|
|
93
|
+
index.d.ts
|
|
94
|
+
styles.css
|
|
95
|
+
```
|
|
96
|
+
|
|
97
|
+
---
|
|
98
|
+
|
|
99
|
+
## ๐งช Tested With
|
|
100
|
+
|
|
101
|
+
* Vite
|
|
102
|
+
* React 18+
|
|
103
|
+
|
|
104
|
+
---
|
|
105
|
+
|
|
106
|
+
## ๐ Versioning
|
|
107
|
+
|
|
108
|
+
This package follows semantic versioning:
|
|
109
|
+
|
|
110
|
+
* 1.x โ Stable renderer core
|
|
111
|
+
* 2.x โ Breaking schema or architecture changes
|
|
112
|
+
|