@producteca/producteca-ui-kit

⚛️⚡ Node + Vite + React + Typescript

Features

• 🔹 Node 22
• ⚛️ React 18
• 📚 Storybook 8 - 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

Main Scripts

• dev: Starts Storybook in development mode on port 6006.
• build: Builds the static Storybook project.
• build:lib: Removes the dist folder, compiles TypeScript, and builds the library using Vite.
• 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.

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 SelectField instances

• Check for any existing version of selectField. If found, delete the file:

  app/components/form/selectField
  
  

• Update any old imports to:

  import { SelectField } from "@producteca/producteca-ui-kit";
  

Auto Publish

• Use the following options for the branch name

      (major | minor | patch | premajor | preminor | prepatch | prerelease)/name