natxocc/sigpro
1
1
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Update docs

Browse Source
This commit is contained in:
natxocc
2026-03-31 16:34:52 +02:00
parent 13c7b3fc27
commit b9bcddaa12
1 changed files with 33 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
docs/ui/quick.md
View File

@@ -1,28 +1,23 @@
# UI Components `(WIP)` # UI Components `(WIP)`
> **Status: Work In Progress.** > These are high-level, complex visual components designed to speed up development. They replace native HTML elements with "superpowered" versions that handle their own internal logic, reactivity, and professional styling. > **Status: Work In Progress.**
> SigPro UI is a complete component environment built with SigPro, Tailwind CSS and DaisyUI. It provides smart components that handle their own internal logic, reactivity, and professional styling.
<div class="alert alert-info shadow-md my-10 border-l-8 border-info bg-info/10 text-info-content"> <div class="alert alert-info shadow-md my-10 border-l-8 border-info bg-info/10 text-info-content">
<div class="flex flex-col md:flex-row items-start gap-4"> <div class="flex flex-col md:flex-row items-start gap-4">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-current shrink-0 w-6 h-6 mt-1"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-current shrink-0 w-6 h-6 mt-1"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
<div> <div>
<h2 class="font-black text-xl tracking-tight mb-2">⚠️ Prerequisites</h2> <h2 class="font-black text-xl tracking-tight mb-2">📢 Official Documentation</h2>
<p class="text-sm opacity-90 leading-relaxed mb-4"> <p class="text-sm opacity-90 leading-relaxed mb-2">
To ensure all components render correctly with their reactive themes and states, your project <b>must</b> have the following versions installed: All official documentation, interactive examples, and usage guides are available at:
</p> </p>
<ul class="grid grid-cols-1 sm:grid-cols-2 gap-3"> <div class="bg-base-100 p-3 rounded-lg inline-block">
<li class="flex items-center gap-2 bg-info/20 p-2 rounded-lg border border-info/20"> <a href="https://natxocc.github.io/sigpro-ui/#/" target="_blank" class="text-info font-mono text-base font-bold hover:underline">
<span class="badge badge-info badge-sm font-bold text-white">v4+</span> https://natxocc.github.io/sigpro-ui/#/
<span class="text-xs font-bold uppercase tracking-wide">Tailwind CSS</span> </a>
</li> </div>
<li class="flex items-center gap-2 bg-info/20 p-2 rounded-lg border border-info/20">
<span class="badge badge-info badge-sm font-bold text-white">v5+</span>
<span class="text-xs font-bold uppercase tracking-wide">DaisyUI</span>
</li>
</ul>
<p class="text-xs mt-4 opacity-70 italic"> <p class="text-xs mt-4 opacity-70 italic">
* Earlier versions might cause unexpected styling issues with SigPro UI components. * Documentation is actively being updated as components are released.
</p> </p>
</div> </div>
</div> </div>
@@ -37,11 +32,28 @@ Unlike **Tag Helpers** (which are just functional mirrors of HTML tags), SigPro
* **Stateful**: They manage complex internal states (like date ranges, search filtering, or API lifecycles). * **Stateful**: They manage complex internal states (like date ranges, search filtering, or API lifecycles).
* **Reactive**: Attributes prefixed with `$` are automatically tracked via `$watch`. * **Reactive**: Attributes prefixed with `$` are automatically tracked via `$watch`.
* **Self-Sane**: They automatically use `._cleanups` to destroy observers or event listeners when removed from the DOM. * **Self-Sane**: They automatically use `._cleanups` to destroy observers or event listeners when removed from the DOM.
* **Themed**: Fully compatible with the DaisyUI v5 theme system and Tailwind v4 utility classes. * **Themed**: Fully compatible with DaisyUI v5 theme system and Tailwind v4 utility classes.
--- ---
## 2. The UI Registry (Available Now) ## 2. Prerequisites
<div class="alert alert-warning shadow-md my-6 border-l-8 border-warning bg-warning/10">
<div class="flex items-start gap-3">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-current shrink-0 w-5 h-5 mt-0.5"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path></svg>
<div>
<p class="text-sm font-semibold">To ensure all components render correctly, your project must have:</p>
<ul class="flex flex-wrap gap-3 mt-2">
<li class="badge badge-warning badge-md">Tailwind CSS v4+</li>
<li class="badge badge-warning badge-md">DaisyUI v5+</li>
</ul>
</div>
</div>
</div>
---
## 3. The UI Registry (Available Now)
| Category | Components | | Category | Components |
| :--- | :--- | | :--- | :--- |
@@ -52,7 +64,7 @@ Unlike **Tag Helpers** (which are just functional mirrors of HTML tags), SigPro
--- ---
## 3. Examples with "Superpowers" ## 4. Examples with "Superpowers"
### A. The Declarative API Flow (`Request` & `Response`) ### A. The Declarative API Flow (`Request` & `Response`)
Instead of manually managing `loading` and `error` flags, use these together to handle data fetching elegantly. Instead of manually managing `loading` and `error` flags, use these together to handle data fetching elegantly.
@@ -123,7 +135,7 @@ Modal({
--- ---
## 4. Internationalization (i18n) ## 5. Internationalization (i18n)
The UI library comes with a built-in locale system. The UI library comes with a built-in locale system.
@@ -134,5 +146,3 @@ Locale("en");
// Access translated strings (Returns a signal that tracks the current locale) // Access translated strings (Returns a signal that tracks the current locale)
const t = tt("confirm"); const t = tt("confirm");
``` ```