179 lines
4.8 KiB
Markdown
179 lines
4.8 KiB
Markdown
# Installation Guide
|
|
|
|
Follow these steps to integrate **SigPro-UI** into your project.
|
|
|
|
---
|
|
|
|
|
|
!> **📘 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://natxocc.github.io/sigpro/#/) reactive core. To learn how to create signals, manage reactivity, and structure your application logic, check out the [SigPro documentation](https://natxocc.github.io/sigpro/#/). It covers everything you need to build reactive applications with signals, computed values, and effects.
|
|
---
|
|
|
|
## 1. Install the package
|
|
|
|
Choose your preferred package manager:
|
|
|
|
```bash
|
|
npm install sigpro-ui
|
|
```
|
|
|
|
## 2. Import and use in your app
|
|
|
|
### ESM / Module usage
|
|
|
|
```javascript
|
|
// Import everything from sigpro-ui (includes sigpro core)
|
|
import { $, $mount, Button, Alert, Input, tt } from "sigpro-ui";
|
|
import "sigpro-ui/css";
|
|
|
|
// Create your app
|
|
const App = () => {
|
|
const count = $(0);
|
|
|
|
return $html('div', { class: 'p-8 max-w-md mx-auto' }, [
|
|
$html('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({
|
|
type: 'success',
|
|
message: () => `Welcome to SigProUI!`
|
|
})
|
|
]);
|
|
};
|
|
|
|
// Mount your app
|
|
$mount(App, "#app");
|
|
```
|
|
|
|
### CDN Usage (no build step)
|
|
|
|
Simply add the script tag and start using SigProUI:
|
|
|
|
```html
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<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/css/sigpro-ui.min.css" rel="stylesheet">
|
|
<style>
|
|
body { padding: 2rem; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="app"></div>
|
|
|
|
<script>
|
|
// All functions are available directly in window
|
|
// No need to import anything!
|
|
|
|
const { $, $mount, Button, Input, Alert } = window;
|
|
|
|
const App = () => {
|
|
const name = $('');
|
|
const count = $(0);
|
|
|
|
return $html('div', { class: 'max-w-md mx-auto p-4' }, [
|
|
$html('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({
|
|
type: 'success',
|
|
message: () => name() ? `Hello ${name()}!` : 'Welcome to SigProUI!'
|
|
})
|
|
]);
|
|
};
|
|
|
|
$mount(App, '#app');
|
|
</script>
|
|
</body>
|
|
</html>
|
|
```
|
|
|
|
## What's included?
|
|
|
|
When you install SigProUI, you get:
|
|
|
|
### SigPro Core Functions
|
|
- `$()` - Reactive signals
|
|
- `$watch()` - Watch reactive dependencies
|
|
- `$html()` - Create HTML elements with reactivity
|
|
- `$if()` - Conditional rendering
|
|
- `$for()` - List rendering
|
|
- `$router()` - Hash-based routing
|
|
- `$mount()` - Mount components to DOM
|
|
|
|
>For more information about SigPro Core visit official Docs [SigPro Docs](https://natxocc.github.io/sigpro/#/)
|
|
|
|
### 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
|
|
- And 30+ more components!
|
|
|
|
### Utilities
|
|
- `tt()` - i18n translation function
|
|
|
|
## Language Support
|
|
|
|
SigProUI includes built-in i18n with Spanish and English:
|
|
|
|
```javascript
|
|
import { tt, Locale } from 'sigpro-ui';
|
|
|
|
// Change locale (default is 'es')
|
|
Locale('en');
|
|
|
|
// Use translations
|
|
const closeButton = Button({}, tt('close')());
|
|
const searchPlaceholder = Input({ placeholder: tt('search')() });
|
|
```
|
|
|
|
## TypeScript Support
|
|
|
|
SigProUI includes TypeScript definitions. Import types as needed:
|
|
|
|
```typescript
|
|
import { Button, Input, type ButtonProps, type InputProps } from 'sigpro-ui';
|
|
|
|
const MyButton: React.FC<ButtonProps> = (props) => {
|
|
return Button(props, 'Click me');
|
|
};
|
|
```
|
|
|
|
## Troubleshooting
|
|
|
|
| Problem | Solution |
|
|
| :--- | :--- |
|
|
| Components don't look styled | Make sure you're loading css 'sigpro.css' (either via import or CDN)|
|
|
| `$ is not defined` | SigProUI includes sigpro core - no need to install separately. Make sure you're importing from 'sigpro-ui' |
|
|
| `Button is not defined` | In CDN mode, all components are in window. Use `window.Button` or destructure from window |
|
|
| Build errors | Ensure you're using a modern bundler that supports ESM |
|
|
| CDN components not working | The CDN version exposes everything globally. Use `const { $, Button } = window;` or call directly |
|
|
| Locale not working | Set locale with `Locale('en')` before using translations |
|
|
|
|
**Happy coding!** 🎉
|