@prokodo/ui 0.0.39 → 0.0.41
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 +17 -15
- package/dist/constants/project.js +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
|
|
19
19
|
## ✨ Features
|
|
20
20
|
|
|
21
|
-
- ✨ **Adaptive
|
|
21
|
+
- ✨ **Adaptive Island Components (AIC)**: A rendering strategy where each component loads only the JavaScript it needs — when needed.
|
|
22
22
|
- ⚡️ **Modern stack**: Vite, React 19, TypeScript, and SCSS Modules
|
|
23
23
|
- 💅 **Design consistency**: Theming via design tokens and BEM-style naming
|
|
24
24
|
- 🧩 **Component-rich**: 35+ reusable UI components
|
|
@@ -27,6 +27,19 @@
|
|
|
27
27
|
- 📦 **Ready-to-install**: Distributed via npm for non-production use under the BUSL-1.1 license
|
|
28
28
|
- 🧱 **Optimized for SSR**: Works great with Next.js and React Server Components
|
|
29
29
|
|
|
30
|
+
## ⚡ Lightweight by Design
|
|
31
|
+
|
|
32
|
+
Addaptial Island Components (AIC) are fully modular and optimized for modern frameworks (Next.js, Remix, etc.).
|
|
33
|
+
Each component is built for **lazy loading**, works seamlessly with **React Server Components (RSC)**, and can be **tree-shaken** out when unused.
|
|
34
|
+
|
|
35
|
+
**Total bundle (all components): ~195 kB gzipped**
|
|
36
|
+
- **Only 5–20 kB** are typically loaded per page
|
|
37
|
+
- **Zero-JS on initial render** for most components
|
|
38
|
+
- **Hydration is deferred** until interaction or visibility
|
|
39
|
+
- Shared styles are minimal: **only ~16.5 kB gzipped**
|
|
40
|
+
|
|
41
|
+
This makes `@prokodo/ui` ideal for modern SSR apps using Next.js or Remix, with excellent Time-to-Interactive (TTI) and Core Web Vitals.
|
|
42
|
+
|
|
30
43
|
---
|
|
31
44
|
|
|
32
45
|
## 🚀 Getting Started
|
|
@@ -117,20 +130,10 @@ export default function GalleryPage() {
|
|
|
117
130
|
|
|
118
131
|
### Compatibility of the components
|
|
119
132
|
|
|
120
|
-
✅ = Available as
|
|
121
|
-
|
|
122
|
-
\- = Currently only for RSC optimized
|
|
123
|
-
|
|
124
|
-
> If RSC and client have ✅-symbol means available as RSC (<[ComponentName] />) & extra client export (<[ComponentName]Client />)
|
|
125
|
-
|
|
126
|
-
## 📦 Available Components
|
|
127
|
-
|
|
128
|
-
### Compatibility of the components
|
|
129
|
-
|
|
130
|
-
✅ = Available as AIC (renders zero-JS RSC and self-hydrates when needed) and can also used as a client‐only entry.
|
|
131
|
-
– = RSC (AIC) only; no client‐side bundle. (Best practice: Use it only in RSC)
|
|
133
|
+
- ✅ = Available as AIC (renders zero-JS RSC and self-hydrates when needed) and can also used as a client‐only entry.
|
|
134
|
+
- \- = RSC (AIC) only; no client‐side bundle. (Useable in both, but best practice to use in RSC only)
|
|
132
135
|
|
|
133
|
-
| Component | ✅ AIC
|
|
136
|
+
| Component | ✅ AIC (RSC + optional client) | ✅ SSR-Compatible (`"use client"`) |
|
|
134
137
|
|-----------------------|:--------------------------------:|:---------------------------------:|
|
|
135
138
|
| Accordion | ✅ | ✅ |
|
|
136
139
|
| Animated | ✅ | ✅ |
|
|
@@ -227,7 +230,6 @@ export default createLazyWrapper<NavbarProps>({
|
|
|
227
230
|
|
|
228
231
|
## 🎯 Next steps
|
|
229
232
|
|
|
230
|
-
- [ ] Make all components **RSC-compatible** and **client-optimized**
|
|
231
233
|
- [ ] Add more ✨ **fancy styling**, UI polish and properties
|
|
232
234
|
- [ ] Improve **accessibility** to meet **WCAG 2.2 AAA** standards
|
|
233
235
|
- [ ] Detailed Documentation about the components
|
package/package.json
CHANGED