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 4s
Details

Browse Source
This commit is contained in:
Natxo
2026-05-01 10:23:22 +02:00
parent 60483765c9
commit 8a07022600
2 changed files with 12 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
docs/index.html
View File

@@ -15,7 +15,6 @@
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script> <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<style> <style>
/* Personaliza los callouts si quieres */
.markdown-section .callout { .markdown-section .callout {
margin: 1.5rem 0; margin: 1.5rem 0;
} }

27
docs/install.md
View File

@@ -5,7 +5,7 @@ Follow these steps to integrate **SigPro-UI** into your project.
--- ---
!> **📘 Core Concepts** !> **📘 Core Concepts**
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` reactive core. To learn how to create signals, manage reactivity, and structure your application logic, check out the [SigPro documentation](https://sigpro.natxocc.com/#/).
--- ---
@@ -13,19 +13,18 @@ SigProUI is built on top of the [SigPro](https://sigpro.natxocc.com/#/) reactive
```bash ```bash
# ESM / Bundler (tree-shaking) # ESM / Bundler (tree-shaking)
npm install sigpro sigpro-ui npm install sigpro-ui
# Or with bun # Or with bun
bun add sigpro sigpro-ui bun add sigpro-ui
``` ```
## 2. Import and use in your app ## 2. Import and use in your app
### ESM / Module usage (tree-shaking) ### ESM / Module usage
```javascript ```javascript
import { $, watch, h, mount } from "sigpro"; import "sigpro-ui";
import { Button, Input, Alert, Toast, tt } from "sigpro-ui";
import "sigpro-ui/css"; import "sigpro-ui/css";
const App = () => { const App = () => {
@@ -110,7 +109,9 @@ mount(App, "#app");
- `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 SPA router.
- `mount()` - Mount components to DOM - `mount()` - Mount components to DOM
- `batch()` - Batch multiple reactive updates into a single flush
> 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/#/)
@@ -122,24 +123,24 @@ mount(App, "#app");
- `Table()` - Data tables - `Table()` - Data tables
- `Tabs()` - Tabbed interfaces - `Tabs()` - Tabbed interfaces
- `Toast()` - Toast notifications - `Toast()` - Toast notifications
- And 30+ more components! - And 40+ more components!
### Utilities ### Utilities
- `tt()` - i18n translation function - `t()` - i18n translation function
## Language Support ## Language Support
SigProUI includes built-in i18n with Spanish and English: SigProUI includes built-in i18n with Spanish and English:
```javascript ```javascript
import { tt, Locale } from 'sigpro-ui'; import { t, Locale } from 'sigpro-ui';
// Change locale (default is 'es') // Change locale (default is 'es')
Locale('en'); Locale('en');
// Use translations // Use translations
Button({}, tt('close')); Button({}, t('close'));
Input({ placeholder: tt('search') }); Input({ placeholder: t('search') });
``` ```
## TypeScript Support ## TypeScript Support
@@ -147,7 +148,6 @@ Input({ placeholder: tt('search') });
SigProUI includes TypeScript definitions: SigProUI includes TypeScript definitions:
```typescript ```typescript
import { $ } from 'sigpro';
import { Button, Input, Toast } from 'sigpro-ui'; import { Button, Input, Toast } from 'sigpro-ui';
import type { ButtonProps, InputProps } from 'sigpro-ui'; import type { ButtonProps, InputProps } from 'sigpro-ui';
``` ```
@@ -157,9 +157,6 @@ import type { ButtonProps, InputProps } from 'sigpro-ui';
| Problem | Solution | | Problem | Solution |
| :--- | :--- | | :--- | :--- |
| Components don't look styled | Make sure you're loading the CSS (`sigpro-ui.min.css`) | | Components don't look styled | Make sure you're loading the CSS (`sigpro-ui.min.css`) |
| `$ is not defined` | ESM: import from `sigpro`. CDN: functions are in global scope |
| `Button is not defined` | ESM: `import { Button } from 'sigpro-ui'`. CDN: available globally |
| Build errors | Install both `sigpro` and `sigpro-ui` |
| CDN functions not working | All core functions (`$`, `h`, `watch`, etc.) are available globally | | 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 |