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

83
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!** 🎉