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!
• 🔧 Babel - JavaScript transpilation for maximum browser compatibility
• ⚡ 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

• dev: Starts Storybook in development mode on port 6006.
• build: Removes the dist folder, compiles TypeScript, builds the library using Vite, and transpiles with Babel for maximum browser compatibility.
• build:storybook: Builds the static Storybook project.
• deploy: Deploys the project using the specified Makefile configuration.
• lint: Runs ESLint to lint and fix issues in files with .js, .jsx, .ts, and .tsx extensions.
• prettier: Formats files in the src folder with extensions .ts, .tsx, .js, and .mdx using Prettier.
• test: Runs tests using Vitest.
• test:cov: Executes tests and generates a coverage report using Vitest.
• prepare: Prepares the repository by installing Husky for Git hooks.
• pre-commit: Installs Husky and sets up Git hooks for pre-commit validation.
• build-storybook: Builds the static Storybook project.

🌐 Browser Compatibility

Este proyecto utiliza Babel para transpilar el código JavaScript/TypeScript, garantizando compatibilidad con:

• Navegadores modernos: Chrome, Firefox, Safari, Edge (últimas 2 versiones)
• Navegadores legacy: Internet Explorer 11+
• Dispositivos móviles: iOS Safari, Chrome Mobile, Samsung Internet
• Cobertura global: >0.25% de usuarios, excluyendo navegadores obsoletos

La configuración de Babel incluye:

• @babel/preset-env para transpilación automática según el target
• @babel/preset-react para sintaxis JSX
• @babel/preset-typescript para TypeScript
• Plugins adicionales para características modernas de JavaScript

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.