natxocc
97f481e22f
All checks were successful
Deploy Docs to Synology / deploy (push) Successful in 4s
164 lines
3.8 KiB
Markdown
164 lines
3.8 KiB
Markdown
# Installation Guide
|
||
|
||
Follow these steps to integrate **SigPro-UI** into your project.
|
||
|
||
---
|
||
|
||
!> **📘 Core Concepts**
|
||
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/#/).
|
||
|
||
---
|
||
|
||
## 1. Install the packages
|
||
|
||
```bash
|
||
# ESM / Bundler (tree-shaking)
|
||
npm install sigpro-ui
|
||
|
||
# Or with bun
|
||
bun add sigpro-ui
|
||
```
|
||
|
||
## 2. Import and use in your app
|
||
|
||
### ESM / Module usage
|
||
|
||
```javascript
|
||
import { $, Input, Button, Alert } from "sigpro-ui";
|
||
import "sigpro-ui/css";
|
||
|
||
const App = () => {
|
||
const count = $(0);
|
||
|
||
return h('div', { class: 'p-8 max-w-md mx-auto' }, [
|
||
h('h1', { class: 'text-2xl font-bold mb-4' }, 'SigProUI Demo'),
|
||
|
||
Input({
|
||
placeholder: 'Enter your name...'
|
||
}),
|
||
|
||
Button({
|
||
class: 'btn-primary mt-4',
|
||
onclick: () => count(count() + 1)
|
||
}, () => `Clicks: ${count()}`),
|
||
|
||
Alert({
|
||
class: 'alert-success',
|
||
message: () => `Welcome to SigProUI!`
|
||
})
|
||
]);
|
||
};
|
||
|
||
mount(App, "#app");
|
||
```
|
||
|
||
### CDN Usage
|
||
|
||
```html
|
||
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>SigProUI Demo</title>
|
||
<link href="https://unpkg.com/sigpro-ui@latest/dist/sigpro-ui.min.css" rel="stylesheet">
|
||
<style>
|
||
body { padding: 2rem; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div id="app"></div>
|
||
|
||
<script src="https://unpkg.com/sigpro-ui@latest/dist/sigpro-ui.min.js"></script>
|
||
<script>
|
||
const App = () => {
|
||
const name = $('');
|
||
const count = $(0);
|
||
|
||
return h('div', { class: 'max-w-md mx-auto p-4' }, [
|
||
h('h1', { class: 'text-2xl font-bold mb-4' }, 'SigProUI Demo'),
|
||
|
||
Input({
|
||
value: name,
|
||
placeholder: 'Enter your name...'
|
||
}),
|
||
|
||
Button({
|
||
class: 'btn-primary mt-4',
|
||
onclick: () => count(count() + 1)
|
||
}, () => `Clicks: ${count()}`),
|
||
|
||
Alert({
|
||
class: 'alert-success',
|
||
message: () => name() ? `Hello ${name()}!` : 'Welcome to SigProUI!'
|
||
})
|
||
]);
|
||
};
|
||
|
||
mount(App, '#app');
|
||
</script>
|
||
</body>
|
||
</html>
|
||
```
|
||
|
||
## What's included?
|
||
|
||
### SigPro Core Functions
|
||
- `$()` - Reactive signals
|
||
- `watch()` - Watch reactive dependencies
|
||
- `h()` - Create HTML elements with reactivity
|
||
- `when()` - Conditional rendering
|
||
- `each()` - List rendering
|
||
- `router()` - Hash‑based SPA router.
|
||
- `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/#/)
|
||
|
||
### UI Components
|
||
- `Button()` - Styled button with DaisyUI
|
||
- `Input()` - Form input with floating labels
|
||
- `Alert()` - Alert messages
|
||
- `Modal()` - Modal dialogs
|
||
- `Table()` - Data tables
|
||
- `Tabs()` - Tabbed interfaces
|
||
- `Toast()` - Toast notifications
|
||
- And 40+ more components!
|
||
|
||
### Utilities
|
||
- `t()` - i18n translation function
|
||
|
||
## Language Support
|
||
|
||
SigProUI includes built-in i18n with Spanish and English:
|
||
|
||
```javascript
|
||
import { t, Locale } from 'sigpro-ui';
|
||
|
||
// Change locale (default is 'es')
|
||
Locale('en');
|
||
|
||
// Use translations
|
||
Button({}, t('close'));
|
||
Input({ placeholder: t('search') });
|
||
```
|
||
|
||
## TypeScript Support
|
||
|
||
SigProUI includes TypeScript definitions:
|
||
|
||
```typescript
|
||
import { Button, Input, Toast } from 'sigpro-ui';
|
||
import type { ButtonProps, InputProps } from 'sigpro-ui';
|
||
```
|
||
|
||
## Troubleshooting
|
||
|
||
| Problem | Solution |
|
||
| :--- | :--- |
|
||
| Components don't look styled | Make sure you're loading the CSS (`sigpro-ui.min.css`) |
|
||
| CDN functions not working | All core functions (`$`, `h`, `watch`, etc.) are available globally |
|
||
| Locale not working | Set locale with `Locale('en')` before using translations |
|
||
|
||
**Happy coding!** 🎉
|