Update Readme
This commit is contained in:
98
Readme.md
98
Readme.md
@@ -2,7 +2,7 @@
|
||||
|
||||
**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 with **zero external dependencies** - everything is included.
|
||||
|
||||
**SigPro UI** is a complete, self-contained UI library + reactive core in under **45KB gzip** (<15KB JS + <30KB CSS). 🎉
|
||||
**SigPro UI** is a complete, full self-contained UI library + reactive core in under **35KB gzip** (< 13KB JS + < 22KB CSS). 🎉
|
||||
|
||||
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.
|
||||
|
||||
@@ -13,48 +13,46 @@ Unlike heavy frameworks, SigPro UI focuses on a **"Zero-Build"** philosophy, all
|
||||
- **Signals-Based Reactivity**: Powered by SigPro for granular DOM updates
|
||||
- **Self-Contained Styling**: Full CSS included - no external frameworks needed
|
||||
- **Built on daisyUI v5**: Modern, utility-first styling out of the box
|
||||
- **Tree Shaking Ready**: Import only what you need
|
||||
- **Zero-Import Option**: Inject all components into the global scope with one command
|
||||
- **Tree Shaking Ready**: ESM imports with `sigpro` as external dependency
|
||||
- **IIFE All-in-One**: Single script tag for browser usage
|
||||
- **Lightweight**: Minimal footprint with everything bundled
|
||||
|
||||
---
|
||||
|
||||
## Installation
|
||||
|
||||
### Via NPM
|
||||
### ESM / Bundler
|
||||
|
||||
```bash
|
||||
npm install sigpro-ui
|
||||
npm install sigpro sigpro-ui
|
||||
# or
|
||||
bun add sigpro sigpro-ui
|
||||
```
|
||||
|
||||
### Via CDN (Browser)
|
||||
### CDN (Browser - All-in-One)
|
||||
|
||||
```html
|
||||
<!-- SigPro UI with styles included -->
|
||||
<script src="https://unpkg.com/sigpro-ui"></script>
|
||||
<link href="https://unpkg.com/sigpro-ui/css" rel="stylesheet">
|
||||
<script src="https://unpkg.com/sigpro-ui@latest/dist/sigpro-ui.min.js"></script>
|
||||
<link href="https://unpkg.com/sigpro-ui@latest/dist/sigpro-ui.min.css" rel="stylesheet">
|
||||
```
|
||||
|
||||
**That's it!** No additional CSS files, no configuration, no build step. SigPro core is included internally.
|
||||
**That's it!** The CDN version includes SigPro core internally - no additional scripts needed.
|
||||
|
||||
---
|
||||
|
||||
## Usage
|
||||
|
||||
You can use SigPro UI in two ways: **Modular** (Recommended) or **Global** (Fastest for prototyping).
|
||||
|
||||
### 1. Modular Approach (Tree Shaking)
|
||||
|
||||
Import only the components you need:
|
||||
### ESM / Modular (Tree Shaking)
|
||||
|
||||
```javascript
|
||||
import { $, mount, Button, Modal, Input, Alert } from "sigpro-ui";
|
||||
import { $, mount, watch, h } from "sigpro";
|
||||
import { Button, Modal, Input, Alert } from "sigpro-ui";
|
||||
import "sigpro-ui/css";
|
||||
|
||||
const App = () => {
|
||||
const show = $(false);
|
||||
|
||||
return button(
|
||||
return Button(
|
||||
{
|
||||
class: "btn-primary",
|
||||
onclick: () => show(true)
|
||||
@@ -66,61 +64,44 @@ const App = () => {
|
||||
mount(App, "#app");
|
||||
```
|
||||
|
||||
### 2. Global Approach (Zero-Import)
|
||||
### CDN / Global (All-in-One)
|
||||
|
||||
Inject all components into the `window` object:
|
||||
```html
|
||||
<script src="https://unpkg.com/sigpro-ui@latest/dist/sigpro-ui.min.js"></script>
|
||||
<script>
|
||||
const App = () => {
|
||||
const count = $(0);
|
||||
|
||||
```javascript
|
||||
import "sigpro-ui";
|
||||
import "sigpro-ui/css";
|
||||
return h('div', { class: 'p-10 flex flex-col gap-4' }, [
|
||||
h('h1', { class: 'text-2xl font-bold' }, 'Welcome to SigPro UI'),
|
||||
|
||||
// All components (Button, Table, Input, Alert, etc.) are now globally available.
|
||||
// No need to import anything else!
|
||||
Button({
|
||||
class: 'btn-primary',
|
||||
onclick: () => {
|
||||
count(count() + 1);
|
||||
Toast(`Count is now ${count()}`, 'alert-success');
|
||||
}
|
||||
}, () => `Clicks: ${count()}`)
|
||||
]);
|
||||
};
|
||||
|
||||
const myApp = () => table({ items: [], columns: [] });
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Basic Example
|
||||
|
||||
```javascript
|
||||
import { $, mount, Button, Toast, Div, H1 } from "sigpro-ui";
|
||||
import "sigpro-ui/css";
|
||||
|
||||
const App = () => {
|
||||
const count = $(0);
|
||||
|
||||
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);
|
||||
Toast(`Count is now ${count()}`, "alert-success");
|
||||
}
|
||||
}, () => `Clicks: ${count()}`)
|
||||
]);
|
||||
};
|
||||
|
||||
mount(App, "#app");
|
||||
mount(App, '#app');
|
||||
</script>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## What's Included?
|
||||
|
||||
### Core Functions (from SigPro)
|
||||
### Core Functions (SigPro)
|
||||
- `$()` - Reactive signals
|
||||
- `watch()` - watch reactive dependencies
|
||||
- `watch()` - Watch reactive dependencies
|
||||
- `h()` - Create HTML elements with reactivity
|
||||
- `when()` - Conditional rendering
|
||||
- `each()` - List rendering
|
||||
- `router()` - Hash-based routing
|
||||
- `mount()` - mount components to DOM
|
||||
- `mount()` - Mount components to DOM
|
||||
|
||||
Explore [SigPro Core Docs](https://natxocc.github.io/sigpro/#/) for more information.
|
||||
> [SigPro Core Docs](https://sigpro.natxocc.com/#/)
|
||||
|
||||
### UI Components
|
||||
- `Button`, `Input`, `Select`, `Checkbox`, `Radio`
|
||||
@@ -148,7 +129,8 @@ import { tt, Locale } from "sigpro-ui";
|
||||
Locale('en');
|
||||
|
||||
// Use translations
|
||||
const closeButton = button({}, tt('close')());
|
||||
Button({}, tt('close'));
|
||||
Input({ placeholder: tt('search') });
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
Reference in New Issue
Block a user