@synertech/ui 0.39.0

package/LICENSE

@@ -0,0 +1,37 @@
+Synertech UI License
+
+Copyright (c) 2026 Kevin Tremblay. All rights reserved.
+
+Permission is granted, free of charge, to any person or organisation obtaining a
+copy of this software and its associated files (the "Software") to install and
+use the Software, and to distribute it as an incorporated part of an
+application, subject to the conditions below.
+
+1. Use. The Software may be installed and used free of charge as a dependency of
+   any application, commercial or not, and may be bundled into that application's
+   build output.
+
+2. No redistribution. The Software may not be redistributed, republished,
+   sublicensed, rented or sold on its own, in source or compiled form, whether
+   modified or not. Publishing it, in whole or in substantial part, to any
+   package registry or public repository is not permitted.
+
+3. No derivative works. The Software may not be modified, adapted, translated,
+   decompiled or reverse engineered in order to create a competing or derivative
+   component library. Inspecting and debugging the Software as needed to operate
+   an application that depends on it is permitted.
+
+4. Notices. This notice must be preserved in every copy of the Software.
+
+5. Termination. This licence terminates automatically if these conditions are
+   breached.
+
+The name "Synertech", the Synertech logo and any other Synertech trademarks are
+not covered by this licence.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHOR BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF
+CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,343 @@
+# @synertech/ui
+
+A TypeScript/React UI component library using Tailwind CSS classes. Published on the public npm registry.
+
+📖 **[View Storybook](https://ui.synertechweb.com/)** — Interactive component documentation
+
+## Installation
+
+### 1. Install the package
+
+```bash
+pnpm add @synertech/ui
+```
+
+No registry configuration, no token: the package is published on the public npm registry.
+
+### 2. Import the styles
+
+Import the compiled CSS in your app's entry point (e.g., `layout.tsx`, `_app.tsx`, or `main.tsx`):
+
+```tsx
+import "@synertech/ui/styles.css";
+```
+
+That's it! Components are now fully styled and ready to use. 🎉
+
+<details>
+<summary><strong>Advanced: Using your own Tailwind configuration (optional)</strong></summary>
+
+If you want to customize the library's Tailwind classes or optimize bundle size, you can skip the CSS import and configure Tailwind to scan the library:
+
+```js
+// tailwind.config.js
+module.exports = {
+  content: [
+    "./src/**/*.{js,ts,jsx,tsx}",
+    "./node_modules/@synertech/ui/dist/**/*.{js,mjs}"
+  ],
+  safelist: [
+    "w-4", "h-4", "w-5", "h-5", "w-6", "h-6",
+    "bg-blue-600", "bg-green-600", "bg-purple-600", "bg-orange-600",
+  ],
+}
+```
+
+</details>
+
+### 3. Optional: Markdown editing
+
+`<HelpButton markdown editable>` uses [MDXEditor](https://mdxeditor.dev/), which is an
+**optional** peer dependency — it pulls in a large dependency tree, so it is not
+installed with the library. Every other component works without it.
+
+```bash
+pnpm add @mdxeditor/editor
+```
+
+```tsx
+import "@mdxeditor/editor/style.css";
+```
+
+Without the package, the edit mode renders an explanatory message instead of the editor.
+
+
+## Usage
+
+### Button
+
+```tsx
+import { Button } from "@synertech/ui";
+
+<Button variant="primary" onClick={() => console.log("clicked")}>
+  Click me
+</Button>
+
+<Button variant="outline" disabled>
+  Disabled
+</Button>
+```
+
+### Input
+
+```tsx
+import { Input } from "@synertech/ui";
+
+<Input
+  label="Email"
+  type="email"
+  name="email"
+  value={email}
+  onChange={(e) => setEmail(e.target.value)}
+/>
+
+<Input label="Name" inline />
+```
+
+### Layout (Header & Footer)
+
+```tsx
+import { Header, Footer } from "@synertech/ui";
+
+<Header
+  logo={<span className="font-bold">MyApp</span>}
+  navItems={[
+    { label: "Home", href: "/" },
+    { label: "About", href: "/about" },
+  ]}
+/>
+
+<Footer copyright="© 2026 MyApp" />
+```
+
+### Modal
+
+```tsx
+import { Modal } from "@synertech/ui";
+
+<Modal
+  isOpen={isOpen}
+  onClose={() => setIsOpen(false)}
+  title="Confirm Action"
+  buttonLabel="Confirm"
+  onButtonClick={handleConfirm}
+>
+  <p>Are you sure you want to proceed?</p>
+</Modal>
+```
+
+`Modal`, `Drawer` and the mobile `Sidebar` are real modal dialogs: `role="dialog"` + `aria-modal`,
+accessible name from the title, focus moved in on open and returned to the
+trigger on close, Tab/Shift+Tab contained, Escape to close, inert background and
+nested dialog support. The same behaviour is available for custom dialogs
+through the exported `useDialogA11y` hook.
+
+### Translating built-in labels
+
+```tsx
+import { UILabelsProvider, frenchUILabels } from "@synertech/ui";
+
+<UILabelsProvider labels={frenchUILabels}>
+  <App />
+</UILabelsProvider>;
+
+// or per instance
+<Modal closeLabel="Fermer la fenêtre" ... />
+<Drawer closeLabel="Fermer le panneau" ... />
+<Sidebar closeLabel="Fermer le menu" ... />
+```
+
+### Table
+
+```tsx
+import {
+  Table,
+  TableHeader,
+  TableHeaderCell,
+  TableBody,
+  TableRow,
+  TableCell,
+} from "@synertech/ui";
+
+<Table>
+  <TableHeader>
+    <TableHeaderCell>Name</TableHeaderCell>
+    <TableHeaderCell>Email</TableHeaderCell>
+  </TableHeader>
+  <TableBody>
+    <TableRow onClick={() => console.log("row clicked")}>
+      <TableCell>John Doe</TableCell>
+      <TableCell>john@example.com</TableCell>
+    </TableRow>
+  </TableBody>
+</Table>
+```
+
+## Available Components
+
+| Category | Components                                                                      |
+| -------- | ------------------------------------------------------------------------------- |
+| Button   | `Button`                                                                        |
+| Form     | `Input`                                                                         |
+| Layout   | `Header`, `Footer`                                                              |
+| Modal    | `Modal`                                                                         |
+| Table    | `Table`, `TableHeader`, `TableHeaderCell`, `TableBody`, `TableRow`, `TableCell` |
+
+## Contributing
+
+### Adding a new component
+
+1. Create the component in the appropriate category: `src/components/<category>/<Component>.tsx`
+2. Add `"use client"` directive if using React hooks
+3. Export the component and its props type
+4. Add export in `src/components/<category>/index.ts`
+5. Verify: `pnpm typecheck && pnpm build`
+6. Create a changeset: `pnpm changeset` (see [Releasing](#releasing))
+7. Commit and push to `main`
+
+### Guidelines
+
+- **No MUI** – HTML + Tailwind only
+- **No compiled CSS** – Tailwind classes are applied, not compiled
+- **React as peer dependency** – Don't bundle React
+- **Next.js compatible** – Proper ESM/CJS exports
+- **Use `"use client"`** – Only for components using hooks
+- **Accept `className`** – All components should allow style overrides
+- **Export types** – Each component exports its props type
+
+## Development
+
+```bash
+pnpm build        # Build to dist/
+pnpm dev          # Build in watch mode
+pnpm typecheck    # TypeScript check
+pnpm lint         # ESLint check
+pnpm lint:fix     # ESLint auto-fix
+pnpm format       # Prettier format
+pnpm format:check # Prettier check
+pnpm storybook    # Run Storybook locally (port 6006)
+pnpm build-storybook # Build static Storybook
+```
+
+## Storybook
+
+Interactive component documentation is available via Storybook.
+
+### Run locally
+
+```bash
+pnpm storybook
+```
+
+Then open [http://localhost:6006](http://localhost:6006).
+
+### Hosted version
+
+Storybook is automatically deployed to GitLab Pages on every push to `main`:
+
+👉 **https://ui.synertechweb.com/**
+
+## Releasing
+
+This project uses [Changesets](https://github.com/changesets/changesets) for version management and changelog generation.
+
+### Workflow
+
+1. **Create a changeset** after making changes:
+   ```bash
+   pnpm changeset
+   ```
+   This will prompt you to select the version bump type (patch/minor/major) and write a summary.
+
+2. **Commit the changeset file** (`.changeset/*.md`) along with your changes.
+
+3. **When ready to release**, apply the version bump:
+   ```bash
+   pnpm version-packages
+   ```
+   This consumes all changesets, bumps `package.json` version, and updates `CHANGELOG.md`.
+
+4. **Commit and push** to `main`:
+   ```bash
+   git add -A && git commit -m "chore: release vX.Y.Z" && git push
+   ```
+
+5. **CI publishes automatically** to the public npm registry.
+
+> **Note**: npm versions are immutable. Once published, a version cannot be overwritten. Changesets prevents accidental duplicate publishes.
+
+## Conventions
+
+### `"use client"` directive
+
+Only add `"use client"` to components that use React hooks (`useState`, `useEffect`, etc.). Currently:
+- ✅ `Header` – uses `useState` for mobile menu
+- ✅ `Modal` / `Drawer` / `Sidebar` – use `useId` / `forwardRef` and `useDialogA11y`
+- ✅ `UILabelsProvider` – uses React context
+- ❌ All other components – no hooks, no directive needed
+
+### `className` prop
+
+All components accept a `className` prop for style customization. Classes are merged using the internal `cn()` utility.
+
+### Styles CSS
+
+The library ships with pre-compiled CSS. Simply import it once:
+
+```tsx
+import "@synertech/ui/styles.css";
+```
+
+For advanced customization, see the [installation section](#2-import-the-styles).
+
+
+## Table Suite
+
+The Table components are designed to be composed together for flexibility:
+
+```
+Table
+├── TableHeader
+│   └── TableHeaderCell (multiple)
+└── TableBody
+    └── TableRow (multiple)
+        └── TableCell (multiple)
+```
+
+### Component Props
+
+| Component         | Key Props                           | HTML Element |
+| ----------------- | ----------------------------------- | ------------ |
+| `Table`           | `className`                         | `<table>`    |
+| `TableHeader`     | `className`                         | `<thead>`    |
+| `TableHeaderCell` | `sortable`, `onClick`, `className`  | `<th>`       |
+| `TableBody`       | `className`                         | `<tbody>`    |
+| `TableRow`        | `clickable`, `onClick`, `className` | `<tr>`       |
+| `TableCell`       | `className`                         | `<td>`       |
+
+### Example with sortable headers
+
+```tsx
+<Table>
+  <TableHeader>
+    <TableHeaderCell sortable onClick={() => sort("name")}>
+      Name ↕
+    </TableHeaderCell>
+    <TableHeaderCell>Email</TableHeaderCell>
+  </TableHeader>
+  <TableBody>
+    {users.map((user) => (
+      <TableRow key={user.id} onClick={() => selectUser(user)}>
+        <TableCell>{user.name}</TableCell>
+        <TableCell>{user.email}</TableCell>
+      </TableRow>
+    ))}
+  </TableBody>
+</Table>
+```
+
+## License
+
+Free to install and use in your applications, including commercial ones.
+Redistribution and derivative component libraries are not permitted.
+See [LICENSE](LICENSE).

package/bin/setup-claude-skill.mjs

@@ -0,0 +1,61 @@
+#!/usr/bin/env node
+
+import { cpSync, existsSync, mkdirSync, readFileSync } from "node:fs";
+import { dirname, join, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const packageRoot = resolve(__dirname, "..");
+const skillSource = join(packageRoot, ".claude", "skills", "use-synertech-ui");
+const projectRoot = process.cwd();
+const skillDest = join(projectRoot, ".claude", "skills", "use-synertech-ui");
+
+// Read package version
+let version = "unknown";
+try {
+  const pkg = JSON.parse(
+    readFileSync(join(packageRoot, "package.json"), "utf-8")
+  );
+  version = pkg.version;
+} catch {
+  // ignore
+}
+
+// Verify source exists
+if (!existsSync(skillSource)) {
+  console.error(
+    "Error: Claude skill source not found in @synertech/ui package."
+  );
+  console.error("Expected at:", skillSource);
+  process.exit(1);
+}
+
+// Check if already installed and up to date
+if (existsSync(skillDest)) {
+  const args = process.argv.slice(2);
+  if (!args.includes("--force")) {
+    console.log("Claude skill 'use-synertech-ui' is already installed.");
+    console.log("Use --force to overwrite with the latest version.");
+    process.exit(0);
+  }
+  console.log("Overwriting existing skill...");
+}
+
+// Create destination directory and copy
+mkdirSync(dirname(skillDest), { recursive: true });
+cpSync(skillSource, skillDest, { recursive: true });
+
+console.log("");
+console.log(`  @synertech/ui v${version} — Claude skill installed`);
+console.log("");
+console.log(`  Copied to: .claude/skills/use-synertech-ui/`);
+console.log("");
+console.log("  Usage in Claude Code:");
+console.log("    /use-synertech-ui Button");
+console.log("    /use-synertech-ui Select");
+console.log('    /use-synertech-ui comment faire un formulaire');
+console.log("    /use-synertech-ui setup");
+console.log("");
+console.log("  Tip: Add .claude/skills/use-synertech-ui/ to .gitignore");
+console.log("  if you don't want to commit it to your repo.");
+console.log("");