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

Update Readme.md

Browse Source
This commit is contained in:
Natxo
2026-03-31 12:50:00 +02:00
committed by GitHub
parent 25054d4817
commit b04ed259da
1 changed files with 61 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

111
Readme.md
View File

@@ -1,8 +1,8 @@
# SigPro UI (WIP)
# SigPro UI (W.I.P.)
**SigPro UI** is a lightweight, ultra-fast, and reactive component library built for the **SigPro** reactivity core. It provides a set of high-quality, accessible, and themeable UI components leveraging the power of **Tailwind CSS v4** and **daisyUI v5**.
Unlike heavy frameworks, SigPro UI focuses on a **"Zero-Build"** or **"Zero-Import"** philosophy, allowing you to build complex reactive interfaces with a functional, declarative syntax that feels like JSX but runs natively in the browser.
Unlike heavy frameworks, SigPro UI focuses on a **"Zero-Build"** philosophy, allowing you to build complex reactive interfaces with a functional, declarative syntax that runs natively in the browser.
---
@@ -10,83 +10,94 @@ Unlike heavy frameworks, SigPro UI focuses on a **"Zero-Build"** or **"Zero-Impo
* **Signals-Based Reactivity**: Powered by SigPro for granular DOM updates.
* **DaisyUI v5 Integration**: Beautiful, semantic components out of the box.
* **No Compilation Needed**: Write standard JavaScript; no Babel or TSC required.
* **Tree Shaking Ready**: Import only what you need.
* **Zero-Import Option**: Inject all components into the global scope with one command.
* **Lightweight**: Minimal footprint with a focus on performance.
* **Fully Extensible**: Easy to wrap and create custom reactive components.
---
## Prerequisites
To use SigPro UI, your project must include the following dependencies:
To use SigPro UI, your project must include:
### 1. SigPro Core
The underlying reactivity engine. SigPro UI depends on `$`, `$watch`, `$html`, `$if`, and `$for` being available in the global scope or imported.
### 2. Tailwind CSS v4
Used for utility-first styling and the engine behind the component layouts.
### 3. daisyUI v5
The component plugin for Tailwind that provides the visual styles (buttons, modals, cards, etc.).
1. **SigPro Core**: `npm install sigpro` (or via CDN).
2. **Tailwind CSS v4**: For utility-first styling.
3. **daisyUI v5**: The component engine for Tailwind.
---
## Installation & Setup
## Installation
### 1. Configure Tailwind & daisyUI
Ensure your `tailwind.config.js` (or CSS entry point in v4) is set up to include daisyUI v5.
```css
/* In your main CSS file (Tailwind v4 style) */
@import "tailwindcss";
@plugin "daisyui";
### Via Bun or NPM
```bash
bun add sigpro-ui
# or
npm install sigpro-ui
```
### 2. Include SigPro & SigPro UI
You can import the modules directly into your application:
```javascript
import { UI } from "./sigpro-ui.js";
// Initialize the UI library (sets global helpers like Div, Button, Table...)
// Supports 'en' or 'es' for internal i18n
UI("en");
### Via CDN (Browser)
```html
<script src="https://unpkg.com/sigpro"></script>
<script src="https://unpkg.com/sigpro-ui"></script>
```
---
## Basic Usage
## Setup & Usage
SigPro UI turns standard HTML tags into PascalCase helpers and provides complex components like `Table`, `Modal`, and `Datepicker`.
You can use SigPro UI in two ways: **Modular** (Recommended for production) or **Global** (Fastest for prototyping).
### 1. Modular Approach (Tree Shaking)
Import only the components you need. This keeps your bundle small.
```javascript
import { $, $mount } from "sigpro";
import { Button, Modal, Table } from "sigpro-ui";
const App = () => {
const show = $(false);
return Button({ onclick: () => show(true) }, "Open Modal");
};
$mount(App, "#app");
```
### 2. Global Approach (Zero-Import)
Inject all components and utilities into the `window` object. This makes all components available everywhere without manual imports.
```javascript
import SigproUI from "sigpro-ui";
// Injects Button, Table, Input, Icons, Utils, etc. into window
SigproUI.install();
// Now you can use them directly anywhere:
const myApp = () => Table({ items: [], columns: [] });
```
---
## Basic Example
```javascript
import { $ } from "sigpro";
import { Button, Toast, Div, H1 } from "sigpro-ui";
const App = () => {
const count = $(0);
const showModal = $(false);
return Div({ class: "p-10 flex flex-col gap-4" }, [
H1({ class: "text-2xl font-bold" }, "Welcome to SigPro UI"),
Button({
class: "btn-primary",
onclick: () => count(c => c + 1)
}, () => `Clicks: ${count()}`),
Button({
class: "btn-outline",
onclick: () => showModal(true)
}, "Open Modal"),
Modal({
open: showModal,
title: "Hello!"
}, "This is a reactive modal powered by SigPro.")
onclick: () => {
count(c => c + 1);
Toast(`Count is now ${count()}`, "alert-success");
}
}, () => `Clicks: ${count()}`)
]);
};
$mount(App, "#app");
```
---
@@ -95,10 +106,10 @@ $mount(App, "#app");
| Category | Components |
| :--- | :--- |
| **Form** | `Input`, `Select`, `Checkbox`, `Radio`, `Range`, `Datepicker`, `Colorpicker`, `Autocomplete` |
| **Data** | `Table`, `List`, `Stat`, `Badge`, `Indicator`, `Timeline` |
| **Form** | `Input`, `Select`, `Checkbox`, `Radio`, `Range`, `Datepicker`, `Colorpicker`, `Autocomplete`, `Rating` |
| **Data** | `Table`, `List`, `Stat`, `Timeline`, `Badge`, `Indicator` |
| **Layout** | `Navbar`, `Menu`, `Drawer`, `Fieldset`, `Stack`, `Tabs`, `Accordion` |
| **Feedback** | `Alert`, `Modal`, `Toast`, `Loading`, `Tooltip`, `Rating` |
| **Feedback** | `Alert`, `Modal`, `Toast`, `Loading`, `Tooltip` |
| **Interaction** | `Button`, `Dropdown`, `Swap`, `Fab` |
---