uploading docs, preview

2026-03-30 15:17:47 +02:00
parent 40d3b91c16
commit f15fb36d89
5 changed files with 622 additions and 29 deletions
--- a/docs/install.md
+++ b/docs/install.md
@@ -0,0 +1,129 @@
+# Installation Guide
+
+Follow these steps to integrate **SigPro-UI** into your project.
+
+## Prerequisites
+
+Make sure your project already has:
+
+- [SigPro Core](https://www.npmjs.com/package/sigpro) installed.
+- [Tailwind CSS v4](https://tailwindcss.com/) configured.
+- [daisyUI v5](https://daisyui.com/) installed.
+
+## 1️.Install the package
+
+Choose your preferred package manager:
+
+```bash
+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`):
+
+```css
+@import "tailwindcss";
+@plugin "daisyui";
+```
+
+> This enables Tailwind CSS v4 + daisyUI v5 styles for all SigPro-UI components.
+
+## 3️.Import and initialize in your app
+
+Create or update your `main.js` (or `index.js`):
+
+```javascript
+// Import required modules
+import { $, $mount } from "sigpro";
+import { UI } from "sigpro-ui";
+
+// Import your CSS (adjust the path if needed)
+import "./app.css";
+
+// Import your main App component
+import { App } from "./App.js";
+
+// Initialize SigPro-UI (English locale)
+UI("en");
+
+// Mount your app
+$mount(App, "#app");
+```
+
+## 4️.Create your first component
+
+Example `App.js`:
+
+```javascript
+import { Div, Button, Alert } from "sigpro-ui";
+
+export const App = () => {
+  return Div({ class: "p-4" }, [
+    Button({
+      class: "btn-primary",
+      onclick: () => Alert("Hello SigPro-UI!")
+    }, "Click Me")
+  ]);
+};
+```
+
+## Optional: Use CDN (no build step)
+
+If you prefer not to use a build step, you can import directly from a CDN:
+
+```html
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <script type="importmap">
+    {
+      "imports": {
+        "sigpro": "https://esm.run/sigpro",
+        "sigpro-ui": "https://cdn.jsdelivr.net/npm/sigpro-ui@latest/+esm"
+      }
+    }
+  </script>
+  <style>
+    @import "tailwindcss";
+    @plugin "daisyui";
+  </style>
+</head>
+<body>
+  <div id="app"></div>
+  <script type="module">
+    import { $, $mount } from "sigpro";
+    import { UI, Div, Button, Alert } from "sigpro-ui";
+
+    UI("en");
+
+    const App = () => Div({ class: "p-4" }, [
+      Button({ class: "btn-primary", onclick: () => Alert("Hello!") }, "Click")
+    ]);
+
+    $mount(App, "#app");
+  </script>
+</body>
+</html>
+```
+
+## Troubleshooting
+
+| Problem | Solution |
+| :--- | :--- |
+| Components don't look styled | Check that `app.css` is imported and contains the Tailwind + daisyUI directives. |
+| `UI is not defined` | Make sure you call `UI()` **before** using any component like `Button`, `Input`, etc. |
+| Locale not working | Verify you passed a valid locale (`"es"` or `"en"`) to `UI()`. |
+| Build errors with Tailwind v4 | Ensure Tailwind CSS v4 and daisyUI v5 are correctly installed and configured. |
+
+
+**Happy coding!** 🎉
+