natxocc/sigpro-ui

Fork 0

Files

natxocc 5a77deb442 BUILD BEFORE CHANGE NEW COMPONENTS WITH UI FUNCTION

2026-04-01 20:53:41 +02:00

6.0 KiB

Raw Blame History

Installation Guide

Follow these steps to integrate SigPro-UI into your project.

Prerequisites

Tailwind CSS v4 configured.
daisyUI v5 installed.

!> 📘 Core Concepts
Note: SigPro-UI now includes SigPro core internally. You no longer need to install SigPro separately. 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. It covers everything you need to build reactive applications with signals, computed values, and effects.

1. Install the package

Choose your preferred package manager:

npm install sigpro-ui
# or
pnpm add sigpro-ui
# or
bun add sigpro-ui
# or
yarn add sigpro-ui

2. Configure CSS

Add the following to your main CSS file (e.g., app.css):

@import "tailwindcss";
@plugin "daisyui";

This enables Tailwind CSS v4 + daisyUI v5 styles for all SigPro-UI components.

3. Import and use in your app

ESM / Module usage

// Import everything from sigpro-ui (includes sigpro core)
import { $, $mount, Button, Alert, Input, tt } from "sigpro-ui";

// Import your CSS (adjust the path if needed)
import "./app.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({
      label: 'Your name',
      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");

CommonJS usage

const { $, $mount, Button, Input, Alert } = require('sigpro-ui');

const App = () => {
  const count = $(0);
  
  return $html('div', { class: 'p-8' }, [
    Button({ 
      class: 'btn-primary',
      onclick: () => count(count() + 1)
    }, () => `Clicks: ${count()}`)
  ]);
};

$mount(App, "#app");

4. CDN Usage (no build step)

Simply add the script tag and start using SigProUI:

<!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://cdn.jsdelivr.net/npm/daisyui@4/dist/full.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({
          label: 'Your name',
          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

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

Icons - SVG icon set
Utils - Helper functions (joinClass, val)
tt() - i18n translation function

Language Support

SigProUI includes built-in i18n with Spanish and English:

import { tt } from 'sigpro-ui';

// Change locale (default is 'es')
tt.setLocale('en');

// Use translations
const closeButton = Button({}, tt('close')());
const searchPlaceholder = Input({ placeholder: tt('search')() });

Available translations: close, confirm, cancel, search, loading, nodata

TypeScript Support

SigProUI includes TypeScript definitions. Import types as needed:

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	Check that you've included Tailwind + daisyUI 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 `tt.setLocale('en')` before using translations

Migration from older versions

If you were using SigProUI v1.0.x with separate SigPro installation:

Before:

import { $ } from 'sigpro';
import { Button } from 'sigpro-ui';

Now:

import { $, Button } from 'sigpro-ui';
// That's it! Everything comes from one package.

Happy coding! 🎉

6.0 KiB Raw Blame History