From 1478a7d63d5ad46be1e8c9e77467c1f14e7d49d3 Mon Sep 17 00:00:00 2001 From: Natxo <1172351+natxocc@users.noreply.github.com> Date: Sat, 4 Apr 2026 14:33:34 +0200 Subject: [PATCH] Update Readme.md --- Readme.md | 168 ++++++++++++++++++++++++++++++++++++++---------------- 1 file changed, 120 insertions(+), 48 deletions(-) diff --git a/Readme.md b/Readme.md index 8e995da..f8cc642 100644 --- a/Readme.md +++ b/Readme.md @@ -1,6 +1,6 @@ -# SigPro UI (W.I.P.) +# 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**. +**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 with **native daisyUI styling** out of the box. Unlike heavy frameworks, SigPro UI focuses on a **"Zero-Build"** philosophy, allowing you to build complex reactive interfaces with a functional, declarative syntax that runs natively in the browser. @@ -8,37 +8,26 @@ Unlike heavy frameworks, SigPro UI focuses on a **"Zero-Build"** philosophy, all ## Features -* **Signals-Based Reactivity**: Powered by SigPro for granular DOM updates. -* **DaisyUI v5 Integration**: Beautiful, semantic components out of the box. -* **Tree Shaking Ready**: Import only what you need. -* **Zero-Import Option**: Inject all components into the global scope with one command. -* **Lightweight**: Minimal footprint with a focus on performance. +- **Signals-Based Reactivity**: Powered by SigPro for granular DOM updates +- **Native daisyUI Styling**: Beautiful, semantic components out of the box +- **CSS Framework Friendly**: Use Tailwind, UnoCSS, or any other library for grids and utilities +- **Tree Shaking Ready**: Import only what you need +- **Zero-Import Option**: Inject all components into the global scope with one command +- **Lightweight**: Minimal footprint, fully reactive --- -## Prerequisites +## Installation -To use SigPro UI, your project must include: +### Via NPM / Bun -1. **SigPro Core**: `npm install sigpro` (or via CDN). -2. **Tailwind CSS v4**: For utility-first styling. -3. **daisyUI v5**: The component engine for Tailwind. - - -## 1. Prerequisites & Installation -SigPro UI is built as an extension of the SigPro reactivity system. You need to install the core library first. - -### Step 1: Install SigPro Core - -```Bash +```bash +# Install SigPro core first bun add sigpro # or npm install sigpro -``` -### Step 2: Install SigPro UI - -```Bash +# Install SigPro UI bun add sigpro-ui # or npm install sigpro-ui @@ -49,55 +38,81 @@ npm install sigpro-ui ```html + ``` + --- -## 2. Styling Setup (Tailwind CSS v4) -SigPro UI components rely on **Tailwind CSS** and **daisyUI** for styling. You don't need a complex tailwind.config.js; simply configure your main CSS entry point. +## Styling Setup -Create or edit your global CSS file (e.g., style.css): +SigPro UI components are **pre-styled with daisyUI v5** and work immediately after adding the daisyUI CSS: -```css -/* src/style.css */ -@import "tailwindcss"; -@plugin "daisyui"; - -/* Optional: Your custom theme overrides */ -:root { - --primary: #570df8; - --secondary: #f000b8; -} +```html + + ``` ---- -## Setup & Usage -You can use SigPro UI in two ways: **Modular** (Recommended for production) or **Global** (Fastest for prototyping). +### Want additional utilities? + +You're free to add **Tailwind CSS**, **UnoCSS**, or any other CSS framework for: + +- Grid systems (`grid`, `flex`, etc.) +- Spacing utilities (`p-4`, `m-2`, `gap-4`) +- Typography helpers (`text-center`, `font-bold`) +- Custom responsive behaviors + +These will work **alongside** daisyUI without conflicts. Example: + +```html + + + + + +``` + +> **Note**: Your components will inherit daisyUI styles by default. Tailwind/ UnoCSS only add extra utilities without overriding component styles. + +--- + +## Usage + +You can use SigPro UI in two ways: **Modular** (Recommended) or **Global** (Fastest for prototyping). ### 1. Modular Approach (Tree Shaking) -Import only the components you need. This keeps your bundle small. + +Import only the components you need: ```javascript import { $, $mount } from "sigpro"; -import { Button, Modal, Table } from "sigpro-ui"; +import { Button, Modal, Input, Alert } from "sigpro-ui"; const App = () => { const show = $(false); - return Button({ onclick: () => show(true) }, "Open Modal"); + + return Button( + { + class: "btn-primary", + onclick: () => show(true) + }, + "Open Modal" + ); }; $mount(App, "#app"); ``` ### 2. Global Approach (Zero-Import) -Inject all components and utilities into the `window` object. This makes all components available everywhere without manual imports. + +Inject all components into the `window` object: ```javascript import SigproUI from "sigpro-ui"; -// Injects Button, Table, Input, Icons, Utils, etc. into window +// Injects Button, Table, Input, Alert, etc. into window SigproUI.install(); -// Now you can use them directly anywhere: +// Now use them directly anywhere: const myApp = () => Table({ items: [], columns: [] }); ``` @@ -124,6 +139,8 @@ const App = () => { }, () => `Clicks: ${count()}`) ]); }; + +$mount(App, "#app"); ``` --- @@ -132,7 +149,7 @@ const App = () => { | Category | Components | | :--- | :--- | -| **Form** | `Input`, `Select`, `Checkbox`, `Radio`, `Range`, `Datepicker`, `Colorpicker`, `Autocomplete`, `Rating` | +| **Form** | `Input`, `Select`, `Checkbox`, `Radio`, `Range`, `Datepicker`, `Colorpicker`, `Autocomplete`, `Rating`, `Fileinput` | | **Data** | `Table`, `List`, `Stat`, `Timeline`, `Badge`, `Indicator` | | **Layout** | `Navbar`, `Menu`, `Drawer`, `Fieldset`, `Stack`, `Tabs`, `Accordion` | | **Feedback** | `Alert`, `Modal`, `Toast`, `Loading`, `Tooltip` | @@ -140,7 +157,62 @@ const App = () => { --- +## Component Examples + +### Form with validation + +```javascript +import { Input, Button } from "sigpro-ui"; + +const email = $(""); + +Input({ + type: "email", + value: email, + placeholder: "your@email.com", + validate: (v) => !v.includes("@") ? "Invalid email" : null +}); +``` + +### Datepicker with range + +```javascript +import { Datepicker } from "sigpro-ui"; + +const dateRange = $(null); + +Datepicker({ + range: true, + value: dateRange, + hour: true +}); +``` + +### File upload + +```javascript +import { Fileinput } from "sigpro-ui"; + +Fileinput({ + max: 5, + accept: "image/*", + onSelect: (files) => console.log(files) +}); +``` + +### Using with Tailwind utilities + +```javascript +// daisyUI provides component styles, Tailwind adds spacing utilities +Div({ class: "grid grid-cols-2 gap-4 p-6" }, [ + Button({ class: "btn-primary col-span-1" }, "Save"), + Button({ class: "btn-ghost col-span-1" }, "Cancel") +]) +``` + +--- + ## License -MIT © 2026 **SigPro Team**. +MIT © 2026 **SigPro Team** *Engineered for speed, designed for clarity, built for the modern web.*