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

Update docs
All checks were successful
Deploy Docs to Synology / deploy (push) Successful in 5s
Details

Browse Source
This commit is contained in:
Natxo
2026-04-27 20:44:55 +02:00
parent 0b6e4fdad8
commit aa0764ad55
2 changed files with 38 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/README.md
View File

@@ -61,7 +61,7 @@ It eliminates the gap between your data (Signals) and your UI components. Each c
| **Engine** | **SigPro** | Atomic reactivity without V-DOM. | | **Engine** | **SigPro** | Atomic reactivity without V-DOM. |
| **Components** | **SigPro-UI** | 60+ semantic, reactive components. | | **Components** | **SigPro-UI** | 60+ semantic, reactive components. |
| **Styling** | **daisyUI v5** | Beautiful, accessible, themeable. | | **Styling** | **daisyUI v5** | Beautiful, accessible, themeable. |
| **Learning Curve** | **Zero** | whenyou know JS and HTML, you know SigPro-UI. | | **Learning Curve** | **Zero** | when you know JS and HTML, you know SigPro-UI. |
### Semantic Functionalism ### Semantic Functionalism
Stop writing endless HTML strings. Use semantic JavaScript constructors that return live, reactive DOM nodes. Stop writing endless HTML strings. Use semantic JavaScript constructors that return live, reactive DOM nodes.

85
docs/install.md
View File

@@ -5,57 +5,55 @@ Follow these steps to integrate **SigPro-UI** into your project.
--- ---
!> **📘 Core Concepts** !> **📘 Core Concepts**
**Note:** SigPro-UI now includes SigPro core internally. No need to install SigPro separately. SigProUI is built on top of the [SigPro](https://sigpro.natxocc.com/#/) reactive core. To learn how to create signals, manage reactivity, and structure your application logic, check out the [SigPro documentation](https://sigpro.natxocc.com/#/).
SigProUI is built on top of the [SigPro](https://sigpro.natxocc.com/#/) reactive core. To learn how to create signals, manage reactivity, and structure your application logic, check out the [SigPro documentation](https://sigpro.natxocc.com/#/). It covers everything you need to build reactive applications with signals, computed values, and effects.
--- ---
## 1. Install the package ## 1. Install the packages
Choose your preferred package manager:
```bash ```bash
npm install sigpro-ui # ESM / Bundler (tree-shaking)
npm install sigpro sigpro-ui
# Or with bun
bun add sigpro sigpro-ui
``` ```
## 2. Import and use in your app ## 2. Import and use in your app
### ESM / Module usage ### ESM / Module usage (tree-shaking)
```javascript ```javascript
// Import everything from sigpro-ui (includes sigpro core) import { $, watch, h, mount } from "sigpro";
import { $, mount, Button, Alert, Input, tt } from "sigpro-ui"; import { Button, Input, Alert, Toast, tt } from "sigpro-ui";
import "sigpro-ui/css"; import "sigpro-ui/css";
// Create your app
const App = () => { const App = () => {
const count = $(0); const count = $(0);
return h('div', { class: 'p-8 max-w-md mx-auto' }, [ return h('div', { class: 'p-8 max-w-md mx-auto' }, [
h('h1', { class: 'text-2xl font-bold mb-4' }, 'SigProUI Demo'), h('h1', { class: 'text-2xl font-bold mb-4' }, 'SigProUI Demo'),
input({ Input({
placeholder: 'Enter your name...' placeholder: 'Enter your name...'
}), }),
button({ Button({
class: 'btn-primary mt-4', class: 'btn-primary mt-4',
onclick: () => count(count() + 1) onclick: () => count(count() + 1)
}, () => `Clicks: ${count()}`), }, () => `Clicks: ${count()}`),
Alert({ Alert({
type: 'success', class: 'alert-success',
message: () => `Welcome to SigProUI!` message: () => `Welcome to SigProUI!`
}) })
]); ]);
}; };
// mount your app
mount(App, "#app"); mount(App, "#app");
``` ```
### CDN Usage (no build step) ### CDN Usage (no build step - all-in-one)
Simply add the script tag and start using SigProUI:
```html ```html
<!DOCTYPE html> <!DOCTYPE html>
@@ -64,8 +62,7 @@ Simply add the script tag and start using SigProUI:
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SigProUI Demo</title> <title>SigProUI Demo</title>
<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">
<link href="https://unpkg.com/sigpro-ui@latest/css/sigpro-ui.min.css" rel="stylesheet">
<style> <style>
body { padding: 2rem; } body { padding: 2rem; }
</style> </style>
@@ -73,12 +70,8 @@ Simply add the script tag and start using SigProUI:
<body> <body>
<div id="app"></div> <div id="app"></div>
<script src="https://unpkg.com/sigpro-ui@latest/dist/sigpro-ui.min.js"></script>
<script> <script>
// All functions are available directly in window
// No need to import anything!
const { $, mount, Button, Input, Alert } = window;
const App = () => { const App = () => {
const name = $(''); const name = $('');
const count = $(0); const count = $(0);
@@ -86,18 +79,18 @@ Simply add the script tag and start using SigProUI:
return h('div', { class: 'max-w-md mx-auto p-4' }, [ return h('div', { class: 'max-w-md mx-auto p-4' }, [
h('h1', { class: 'text-2xl font-bold mb-4' }, 'SigProUI Demo'), h('h1', { class: 'text-2xl font-bold mb-4' }, 'SigProUI Demo'),
input({ Input({
value: name, value: name,
placeholder: 'Enter your name...' placeholder: 'Enter your name...'
}), }),
button({ Button({
class: 'btn-primary mt-4', class: 'btn-primary mt-4',
onclick: () => count(count() + 1) onclick: () => count(count() + 1)
}, () => `Clicks: ${count()}`), }, () => `Clicks: ${count()}`),
Alert({ Alert({
type: 'success', class: 'alert-success',
message: () => name() ? `Hello ${name()}!` : 'Welcome to SigProUI!' message: () => name() ? `Hello ${name()}!` : 'Welcome to SigProUI!'
}) })
]); ]);
@@ -111,26 +104,24 @@ Simply add the script tag and start using SigProUI:
## What's included? ## What's included?
When you install SigProUI, you get:
### SigPro Core Functions ### SigPro Core Functions
- `$()` - Reactive signals - `$()` - Reactive signals
- `watch()` - watch reactive dependencies - `watch()` - Watch reactive dependencies
- `h()` - Create HTML elements with reactivity - `h()` - Create HTML elements with reactivity
- `when()` - Conditional rendering - `when()` - Conditional rendering
- `each()` - List rendering - `each()` - List rendering
- `router()` - Hash-based routing - `mount()` - Mount components to DOM
- `mount()` - mount components to DOM
>For more information about SigPro Core visit official Docs [SigPro Docs](https://sigpro.natxocc.com/#/) > For more information about SigPro Core visit official Docs [SigPro Docs](https://sigpro.natxocc.com/#/)
### UI Components ### UI Components
- `button()` - Styled button with DaisyUI - `Button()` - Styled button with DaisyUI
- `input()` - Form input with floating labels - `Input()` - Form input with floating labels
- `Alert()` - Alert messages - `Alert()` - Alert messages
- `Modal()` - Modal dialogs - `Modal()` - Modal dialogs
- `Table()` - Data tables - `Table()` - Data tables
- `Tabs()` - Tabbed interfaces - `Tabs()` - Tabbed interfaces
- `Toast()` - Toast notifications
- And 30+ more components! - And 30+ more components!
### Utilities ### Utilities
@@ -147,31 +138,29 @@ import { tt, Locale } from 'sigpro-ui';
Locale('en'); Locale('en');
// Use translations // Use translations
const closeButton = button({}, tt('close')()); Button({}, tt('close'));
const searchPlaceholder = input({ placeholder: tt('search')() }); Input({ placeholder: tt('search') });
``` ```
## TypeScript Support ## TypeScript Support
SigProUI includes TypeScript definitions. Import types as needed: SigProUI includes TypeScript definitions:
```typescript ```typescript
import { Button, Input, type ButtonProps, type InputProps } from 'sigpro-ui'; import { $ } from 'sigpro';
import { Button, Input, Toast } from 'sigpro-ui';
const MyButton: React.FC<ButtonProps> = (props) => { import type { ButtonProps, InputProps } from 'sigpro-ui';
return button(props, 'Click me');
};
``` ```
## Troubleshooting ## Troubleshooting
| Problem | Solution | | Problem | Solution |
| :--- | :--- | | :--- | :--- |
| Components don't look styled | Make sure you're loading css 'sigpro.css' (either via import or CDN)| | Components don't look styled | Make sure you're loading the CSS (`sigpro-ui.min.css`) |
| `$ is not defined` | SigProUI includes sigpro core - no need to install separately. Make sure you're importing from 'sigpro-ui' | | `$ is not defined` | ESM: import from `sigpro`. CDN: functions are in global scope |
| `Button is not defined` | In CDN mode, all components are in window. Use `window.Button` or destructure from window | | `Button is not defined` | ESM: `import { Button } from 'sigpro-ui'`. CDN: available globally |
| Build errors | Ensure you're using a modern bundler that supports ESM | | Build errors | Install both `sigpro` and `sigpro-ui` |
| CDN components not working | The CDN version exposes everything globally. Use `const { $, Button } = window;` or call directly | | CDN functions not working | All core functions (`$`, `h`, `watch`, etc.) are available globally |
| Locale not working | Set locale with `Locale('en')` before using translations | | Locale not working | Set locale with `Locale('en')` before using translations |
**Happy coding!** 🎉 **Happy coding!** 🎉