Producteca UI Kit ⚛️⚡

📚 Documentation: apps.producteca.com/producteca-ui-kit

Features

• 🔹 Node 22
• ⚛️ React 18
• 📚 Storybook 9 - Components preview
• ⏩ Vite - Run and build the project blazingly fast!
• ⚡ Vitest - Components Unit Testing
• 📐 ESLint & Prettier - Formatting and Linting
• 🌟 Typescript
• 🐶 Husky & Lint Staged - Pre-commit Hooks
• 👷 Github Actions
• 🚀 Semantic Release para automatizar el versionado y publicación de paquetes.

Main Scripts

| Script | Command | Description | |--------|---------|-------------| | dev | storybook dev -p 6006 | Starts Storybook in development mode on port 6006 | | build | rm -rf dist && tsc && vite build | Removes the dist folder, compiles TypeScript, and builds the library using Vite | | build:storybook | storybook build | Builds the static Storybook project | | build-storybook | storybook build | Alias for build:storybook | | deploy | make deploy | Deploys the project using the specified Makefile configuration | | lint | node linterteca-lint | Runs linterteca to lint files with .js and .jsx extensions | | prettier | prettier --write "src/**/*.{ts,tsx,js,mdx}" | Formats files in the src folder using Prettier | | test | vitest | Runs tests using Vitest in watch mode | | test:cov | vitest run --coverage | Executes tests and generates a coverage report | | prepare | husky | Prepares the repository by installing Husky for Git hooks | | pre-commit | husky && husky install | Installs Husky and sets up Git hooks for pre-commit validation |

Storybook MCP

This library's Storybook exposes an MCP server so AI agents can query component docs and run interaction tests.

Use it locally

bun run dev          # serves Storybook + MCP at http://localhost:6006/mcp

Register it with your agent (project scope):

npx mcp-add --type http --url "http://localhost:6006/mcp" --scope project

Claude Code users: the repo's .mcp.json already registers it — just run bun run dev.

Use the published server (Chromatic)

Each Chromatic build publishes the MCP at the /mcp route of the published Storybook:

https://<branch>--<appId>.chromatic.com/mcp

Verify with: ask your agent to run list-all-documentation.

Consuming it from other repos

To wire this MCP into other repos that depend on the UI kit — using the Chromatic-published endpoint, user vs. project scope, OAuth, and troubleshooting — see docs/mcp-setup.md.

🌐 Browser Compatibility

El build usa Vite (esbuild) con target es2020, garantizando compatibilidad con:

• Navegadores modernos: Chrome, Firefox, Safari, Edge (últimas 2 versiones)
• Dispositivos móviles: iOS Safari, Chrome Mobile, Samsung Internet

Internet Explorer 11 ya no está soportado. Si un consumidor necesitara downleveling a ES5, debería transpilar en su propio pipeline (esbuild no baja de es2015).

Setting up @producteca/producteca-ui-kit

Follow these steps to integrate and configure the @producteca/producteca-ui-kit package in your project:

1. Install the package
   Make sure to install the latest version of the package:

   bun install @producteca/producteca-ui-kit
   

2. Import the styles
   Add the following line to your app/css/setup.js file:

   import "@producteca/producteca-ui-kit/dist/style.css";
   

3. Remove old component instances For any component that has been moved to the UI kit (like SelectField, CheckboxInput, etc.), you need to:

   • Remove the old component files from your project. For example:

     app/components/form/selectField
     app/components/form/checkboxInput
     # or any other component that has been moved to the UI kit

   • Update your imports to use the components from the UI kit:

     import { SelectField, CheckboxInput /* other components */ } from '@producteca/producteca-ui-kit'

📦 Publishing a New Version

Package publishing is now handled automatically via a GitHub Action triggered on push to the main or master branches.

You can also trigger it manually from the Actions tab using the Release workflow.

The workflow supports prerelease versions (e.g., alpha, beta) through the prereleaseTag input.

🚀 Manual Run (ONLY for prereleases)

1. Go to Actions.
2. Select the Release workflow.
3. Click Run workflow.
4. Enter the desired tag (e.g., beta) or leave as alpha (default).

🔐 The release process uses the contents of the lib/ directory generated during build.

✅ Commit Linting with Husky

This project uses Commitlint along with Husky to ensure that all commit messages follow the Conventional Commit format.

Why?

The conventional commit format allows you to:

• Automatically generate changelogs.
• Classify changes into versions (patch, minor, major).
• Maintain a clearer and more structured commit history.

🛠️ Installation and Setup

Everything is already configured in the project. If you're working locally, make sure to run the following after cloning and installing dependencies:

npm install
npx husky install

This ensures that Git hooks are properly installed.

⚙️ Relevant Files

• .husky/commit-msg: hook that runs commitlint before making a commit.
• commitlint.config.js: defines the rules that commit messages must follow.
• .husky/pre-commit: (optional) can run linters or other automated checks.

📝 Example of a valid commit message

feat: add primary button component
fix(ci): fix release configuration on test branch
chore(deps): update development dependencies

🧹 Branch Name Linter

This project uses linterteca to enforce consistent branch naming conventions across all development work.

The linter is automatically run as a pre-push Git hook using Husky. To ensure the linter works properly:

✅ Setup Instructions

1. Install all dependencies:

npm install

2. That's it! The linter will now run automatically before each push and will block invalid branch names.

📛 Branch name rules

Allowed prefixes:

• feature/
• fix/
• hotfix/
• release/
• docs/
• fix/
• refactor/
• chore/
• ci/
• test/
• perf
• style
• build/.

If your branch name does not follow the required format, the push will be blocked with a helpful error message.

🛠️ Bypass (not recommended)

To bypass the linter in exceptional cases:

git push --no-verify

Only use --no-verify if absolutely necessary and with team consensus.