First Upload sigpro ui
This commit is contained in:
109
Readme.md
Normal file
109
Readme.md
Normal file
@@ -0,0 +1,109 @@
|
|||||||
|
# SigPro UI
|
||||||
|
|
||||||
|
**SigPro UI** is a lightweight, ultra-fast, and reactive component library built for the **SigPro** reactivity core. It provides a set of high-quality, accessible, and themeable UI components leveraging the power of **Tailwind CSS v4** and **daisyUI v5**.
|
||||||
|
|
||||||
|
Unlike heavy frameworks, SigPro UI focuses on a **"Zero-Build"** or **"Zero-Import"** philosophy, allowing you to build complex reactive interfaces with a functional, declarative syntax that feels like JSX but runs natively in the browser.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Features
|
||||||
|
|
||||||
|
* **Signals-Based Reactivity**: Powered by SigPro for granular DOM updates.
|
||||||
|
* **DaisyUI v5 Integration**: Beautiful, semantic components out of the box.
|
||||||
|
* **No Compilation Needed**: Write standard JavaScript; no Babel or TSC required.
|
||||||
|
* **Lightweight**: Minimal footprint with a focus on performance.
|
||||||
|
* **Fully Extensible**: Easy to wrap and create custom reactive components.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Prerequisites
|
||||||
|
|
||||||
|
To use SigPro UI, your project must include the following dependencies:
|
||||||
|
|
||||||
|
### 1. SigPro Core
|
||||||
|
The underlying reactivity engine. SigPro UI depends on `$`, `$watch`, `$html`, `$if`, and `$for` being available in the global scope or imported.
|
||||||
|
|
||||||
|
### 2. Tailwind CSS v4
|
||||||
|
Used for utility-first styling and the engine behind the component layouts.
|
||||||
|
|
||||||
|
### 3. daisyUI v5
|
||||||
|
The component plugin for Tailwind that provides the visual styles (buttons, modals, cards, etc.).
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Installation & Setup
|
||||||
|
|
||||||
|
### 1. Configure Tailwind & daisyUI
|
||||||
|
Ensure your `tailwind.config.js` (or CSS entry point in v4) is set up to include daisyUI v5.
|
||||||
|
|
||||||
|
```css
|
||||||
|
/* In your main CSS file (Tailwind v4 style) */
|
||||||
|
@import "tailwindcss";
|
||||||
|
@plugin "daisyui";
|
||||||
|
```
|
||||||
|
|
||||||
|
### 2. Include SigPro & SigPro UI
|
||||||
|
You can import the modules directly into your application:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
import { UI } from "./sigpro-ui.js";
|
||||||
|
|
||||||
|
// Initialize the UI library (sets global helpers like Div, Button, Table...)
|
||||||
|
// Supports 'en' or 'es' for internal i18n
|
||||||
|
UI("en");
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Basic Usage
|
||||||
|
|
||||||
|
SigPro UI turns standard HTML tags into PascalCase helpers and provides complex components like `Table`, `Modal`, and `Datepicker`.
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
import { $, $mount } from "sigpro";
|
||||||
|
|
||||||
|
const App = () => {
|
||||||
|
const count = $(0);
|
||||||
|
const showModal = $(false);
|
||||||
|
|
||||||
|
return Div({ class: "p-10 flex flex-col gap-4" }, [
|
||||||
|
H1({ class: "text-2xl font-bold" }, "Welcome to SigPro UI"),
|
||||||
|
|
||||||
|
Button({
|
||||||
|
class: "btn-primary",
|
||||||
|
onclick: () => count(c => c + 1)
|
||||||
|
}, () => `Clicks: ${count()}`),
|
||||||
|
|
||||||
|
Button({
|
||||||
|
class: "btn-outline",
|
||||||
|
onclick: () => showModal(true)
|
||||||
|
}, "Open Modal"),
|
||||||
|
|
||||||
|
Modal({
|
||||||
|
open: showModal,
|
||||||
|
title: "Hello!"
|
||||||
|
}, "This is a reactive modal powered by SigPro.")
|
||||||
|
]);
|
||||||
|
};
|
||||||
|
|
||||||
|
$mount(App, "#app");
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Components Included
|
||||||
|
|
||||||
|
| Category | Components |
|
||||||
|
| :--- | :--- |
|
||||||
|
| **Form** | `Input`, `Select`, `Checkbox`, `Radio`, `Range`, `Datepicker`, `Colorpicker`, `Autocomplete` |
|
||||||
|
| **Data** | `Table`, `List`, `Stat`, `Badge`, `Indicator`, `Timeline` |
|
||||||
|
| **Layout** | `Navbar`, `Menu`, `Drawer`, `Fieldset`, `Stack`, `Tabs`, `Accordion` |
|
||||||
|
| **Feedback** | `Alert`, `Modal`, `Toast`, `Loading`, `Tooltip`, `Rating` |
|
||||||
|
| **Interaction** | `Button`, `Dropdown`, `Swap`, `Fab` |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## License
|
||||||
|
|
||||||
|
MIT © 2026 **SigPro Team**.
|
||||||
|
*Engineered for speed, designed for clarity, built for the modern web.*
|
||||||
0
docs/.nojekyll
Normal file
0
docs/.nojekyll
Normal file
116
docs/README.md
Normal file
116
docs/README.md
Normal file
@@ -0,0 +1,116 @@
|
|||||||
|
<div class="w-full -mt-10">
|
||||||
|
<section class="relative py-20 overflow-hidden border-b border-base-200/30 text-center flex flex-col items-center">
|
||||||
|
<div class="relative z-10 max-w-5xl mx-auto px-6 flex flex-col items-center">
|
||||||
|
<div class="flex justify-center mb-10 text-secondary">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" class="w-48 h-48 md:w-64 md:h-64 drop-shadow-2xl" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="0.8">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M21 7.5l-9-5.25L3 7.5m18 0l-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-5.25v9" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h1 class="text-7xl md:text-9xl font-black tracking-tighter mb-4 bg-clip-text text-transparent bg-linear-to-r from-secondary via-accent to-primary !text-center w-full">SigPro UI</h1>
|
||||||
|
<div class="text-2xl md:text-3xl font-bold text-base-content/90 mb-4 !text-center w-full">Reactive Design System</div>
|
||||||
|
<div class="text-xl text-base-content/60 max-w-3xl mx-auto mb-10 leading-relaxed italic text-balance font-light !text-center w-full">"Atomic components for high-performance interfaces. Zero-boilerplate, pure Tailwind v4 elegance."</div>
|
||||||
|
<div class="flex flex-wrap justify-center gap-4 w-full">
|
||||||
|
<a href="#/docs" class="btn btn-secondary btn-lg shadow-xl shadow-secondary/20 group px-10 border-none text-secondary-content">View Components <span class="group-hover:translate-x-1 transition-transform inline-block">→</span></a>
|
||||||
|
<button onclick="window.open('https://github.com/natxocc/sigpro-ui')" class="btn btn-outline btn-lg border-base-300 hover:bg-base-300 hover:text-base-content">GitHub</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="absolute top-0 left-1/2 -translate-x-1/2 w-full h-full -z-0 opacity-10 pointer-events-none">
|
||||||
|
<div class="absolute top-10 right-1/4 w-96 h-96 bg-secondary filter blur-3xl rounded-full animate-pulse"></div>
|
||||||
|
<div class="absolute bottom-10 left-1/4 w-96 h-96 bg-primary filter blur-3xl rounded-full animate-pulse" style="animation-delay: 2s"></div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<section class="max-w-6xl mx-auto px-6 py-16">
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 items-stretch">
|
||||||
|
<div class="card bg-base-200/30 border border-base-300 hover:border-secondary/40 transition-all p-1">
|
||||||
|
<div class="card-body p-6">
|
||||||
|
<h3 class="card-title text-xl font-black text-secondary italic">TAILWIND V4</h3>
|
||||||
|
<p class="text-sm opacity-70">Built on the latest CSS engine. Lightning fast styles with zero legacy overhead.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card bg-base-200/30 border border-base-300 hover:border-accent/40 transition-all p-1">
|
||||||
|
<div class="card-body p-6">
|
||||||
|
<h3 class="card-title text-xl font-black text-accent italic">DAISYUI V5</h3>
|
||||||
|
<p class="text-sm opacity-70">Semantic, beautiful and accessible. Professional components out of the box.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card bg-base-200/30 border border-base-300 hover:border-primary/40 transition-all p-1">
|
||||||
|
<div class="card-body p-6">
|
||||||
|
<h3 class="card-title text-xl font-black text-primary italic">NATIVE REACTION</h3>
|
||||||
|
<p class="text-sm opacity-70">Direct integration with SigPro signals. No wrappers, no context, just speed.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card bg-base-200/30 border border-base-300 hover:border-base-content/20 transition-all p-1">
|
||||||
|
<div class="card-body p-6">
|
||||||
|
<h3 class="card-title text-xl font-black italic text-base-content">READY-TO-GO</h3>
|
||||||
|
<p class="text-sm opacity-70">Import and build. Designed for developers who hate configuration files.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
## The UI Powerhouse
|
||||||
|
|
||||||
|
SigPro-UI isn't just a library; it's a **Functional Design System**.
|
||||||
|
|
||||||
|
It eliminates the gap between your data (Signals) and your layout (DaisyUI). Each component is a high-order function optimized for the SigPro core, ensuring that your UI only updates where it matters.
|
||||||
|
|
||||||
|
| Requirement | Value | Why? |
|
||||||
|
| :--- | :--- | :--- |
|
||||||
|
| **Engine** | **SigPro** | Atomic reactivity without V-DOM. |
|
||||||
|
| **Styling** | **Tailwind CSS v4** | Pure CSS performance. |
|
||||||
|
| **Components** | **daisyUI v5** | Semantic and clean layouts. |
|
||||||
|
| **Learning Curve** | **Zero** | If you know JS and HTML, you know SigPro-UI. |
|
||||||
|
|
||||||
|
### Semantic Functionalism
|
||||||
|
Stop writing endless HTML strings. Use semantic JavaScript constructors that return live, reactive DOM nodes.
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
// Pure SigPro-UI: Clean, Reactive, Type-Safe
|
||||||
|
Modal({
|
||||||
|
open: isVisible,
|
||||||
|
title: "Precision Engineering"
|
||||||
|
}, () =>
|
||||||
|
Div({ class: "space-y-4" }, [
|
||||||
|
P("SigPro-UI leverages Tailwind v4 for instant styling."),
|
||||||
|
Button({
|
||||||
|
class: "btn-primary",
|
||||||
|
onclick: () => isVisible(false)
|
||||||
|
}, "Confirm")
|
||||||
|
])
|
||||||
|
)
|
||||||
|
````
|
||||||
|
|
||||||
|
-----
|
||||||
|
|
||||||
|
## Technical Stack Requirements
|
||||||
|
|
||||||
|
To achieve the performance promised by SigPro-UI, your environment must be equipped with:
|
||||||
|
|
||||||
|
### 1\. SigPro Core
|
||||||
|
|
||||||
|
The atomic heart. SigPro-UI requires the SigPro runtime (`$`, `$watch`, `$html`, etc.) to be present in the global scope or provided as a module.
|
||||||
|
|
||||||
|
### 2\. Tailwind CSS v4 Engine
|
||||||
|
|
||||||
|
SigPro-UI uses the modern `@theme` and utility engine of Tailwind v4. It is designed to work with the ultra-fast compiler of the new generation.
|
||||||
|
|
||||||
|
### 3\. daisyUI v5
|
||||||
|
|
||||||
|
The visual DNA. All components are mapped to daisyUI v5 semantic classes, providing access to dozens of themes and accessible UI patterns without writing a single line of custom CSS.
|
||||||
|
|
||||||
|
-----
|
||||||
|
|
||||||
|
\<div class="bg-base-200/50 rounded-3xl p-10 my-16 border border-base-300 shadow-inner"\>
|
||||||
|
\<div class="grid grid-cols-1 lg:grid-cols-3 gap-8 items-center"\>
|
||||||
|
\<div class="lg:col-span-2"\>
|
||||||
|
\<h2 class="text-4xl font-black mb-4 mt-0 tracking-tight italic text-secondary"\>Design at Runtime.\</h2\>
|
||||||
|
\<p class="text-xl opacity-80 leading-relaxed"\>Combine the best of three worlds: \<strong\>SigPro\</strong\> for logic, \<strong\>Tailwind v4\</strong\> for speed, and \<strong\>daisyUI v5\</strong\> for beauty. Build interfaces that feel as fast as they look.\</p\>
|
||||||
|
\</div\>
|
||||||
|
\</div\>
|
||||||
|
\</div\>
|
||||||
|
|
||||||
|
\<div class="text-center py-10 opacity-30 font-mono text-xs tracking-widest uppercase"\>
|
||||||
|
Atomic UI System — Built for SigPro — NatxoCC
|
||||||
|
\</div\>
|
||||||
21
docs/_sidebar.md
Normal file
21
docs/_sidebar.md
Normal file
@@ -0,0 +1,21 @@
|
|||||||
|
* [**Home**](README.md)
|
||||||
|
|
||||||
|
* **Introduction**
|
||||||
|
* [Installation](install.md)
|
||||||
|
* [Examples](examples.md)
|
||||||
|
* [Vite Plugin](vite/plugin.md)
|
||||||
|
|
||||||
|
* **API Reference**
|
||||||
|
* [Quick Start](api/quick.md)
|
||||||
|
* [$ signals](api/signal.md)
|
||||||
|
* [$watch](api/watch.md)
|
||||||
|
* [$if](api/if.md)
|
||||||
|
* [$for](api/for.md)
|
||||||
|
* [$router](api/router.md)
|
||||||
|
* [$mount](api/mount.md)
|
||||||
|
* [$html](api/html.md)
|
||||||
|
* [Tags](api/tags.md)
|
||||||
|
* [Global Store](api/global.md)
|
||||||
|
|
||||||
|
* **UI Components**
|
||||||
|
* [Quick Start](ui/quick.md)
|
||||||
42
docs/index.html
Normal file
42
docs/index.html
Normal file
@@ -0,0 +1,42 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="es">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>SigPro-UI Docs</title>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/lib/themes/vue.css">
|
||||||
|
|
||||||
|
<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css" />
|
||||||
|
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app"></div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
window.$docsify = {
|
||||||
|
name: 'SigPro-UI',
|
||||||
|
repo: '',
|
||||||
|
loadSidebar: true,
|
||||||
|
subMaxLevel: 3,
|
||||||
|
sidebarDisplayLevel: 1,
|
||||||
|
executeScript: true,
|
||||||
|
copyCode: {
|
||||||
|
buttonText: '<svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>',
|
||||||
|
errorText: 'Error',
|
||||||
|
successText: '<svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><polyline points="20 6 9 17 4 12"></polyline></svg>'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script type="module">
|
||||||
|
import * as sigpro from 'https://cdn.jsdelivr.net/npm/sigpro@latest/+esm';
|
||||||
|
import * as sigproui from 'https://cdn.jsdelivr.net/npm/sigpro-ui@latest/+esm';
|
||||||
|
window.sigpro = sigpro;
|
||||||
|
window.sigproui = sigproui;
|
||||||
|
</script>
|
||||||
|
<script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
|
||||||
|
<script src="//cdn.jsdelivr.net/npm/docsify-copy-code/dist/docsify-copy-code.min.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
2
index.js
Normal file
2
index.js
Normal file
@@ -0,0 +1,2 @@
|
|||||||
|
// /plugins/index.js
|
||||||
|
export * from './sigpro-ui/sigpro-ui.js';
|
||||||
41
package.json
Normal file
41
package.json
Normal file
@@ -0,0 +1,41 @@
|
|||||||
|
{
|
||||||
|
"name": "sigpro-ui",
|
||||||
|
"version": "1.1.0",
|
||||||
|
"type": "module",
|
||||||
|
"license": "MIT",
|
||||||
|
"main": "./index.js",
|
||||||
|
"module": "./index.js",
|
||||||
|
"exports": {
|
||||||
|
".": "./index.js"
|
||||||
|
},
|
||||||
|
"files": [
|
||||||
|
"index.js",
|
||||||
|
"sigpro-ui",
|
||||||
|
"vite",
|
||||||
|
"README.md",
|
||||||
|
"LICENSE"
|
||||||
|
],
|
||||||
|
"homepage": "https://natxocc.github.io/sigpro-ui/",
|
||||||
|
"repository": {
|
||||||
|
"type": "git",
|
||||||
|
"url": "https://github.com/natxocc/sigpro-ui.git"
|
||||||
|
},
|
||||||
|
"bugs": {
|
||||||
|
"url": "https://github.com/natxocc/sigpro-ui/issues"
|
||||||
|
},
|
||||||
|
"scripts": {
|
||||||
|
"docs": "bun x serve docs"
|
||||||
|
},
|
||||||
|
"keywords": [
|
||||||
|
"signals",
|
||||||
|
"reactive",
|
||||||
|
"sigpro",
|
||||||
|
"sigpro components",
|
||||||
|
"UI",
|
||||||
|
"web-components",
|
||||||
|
"vanilla-js",
|
||||||
|
"reactive-programming",
|
||||||
|
"signals-library",
|
||||||
|
"fine-grained-reactivity"
|
||||||
|
]
|
||||||
|
}
|
||||||
1130
sigpro-ui/sigpro-ui.js
Normal file
1130
sigpro-ui/sigpro-ui.js
Normal file
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user