Gattonero UI

Gattonero UI is a React-based design system that provides a set of reusable components and utilities for building modern web applications. This repository showcases how to create a lightweight design system using Vite, React, and Tailwind CSS, while ensuring code quality with Jest, maintaining thorough documentation and library previews with Storybook, and managing package versioning with Semantic Versioning (semver) through conventional commits and Commitizen.

Table of Contents

• Installation
• Storybook
• Testing
• Commit Flow
• Publishing

Installation

To get started with the project, follow these steps:

1. Clone the repository:

   git clone https://github.com/devmeireles/gattonero-ui
   cd gattonero-ui

2. Install dependencies:

   yarn

3. Start the Storybook stories preview server:

   yarn storybook

4. Open http://localhost:6006/ to view it in the browser.

Storybook

Storybook is used for interactive documentation. To start Storybook, run:

yarn storybook

Open http://localhost:6006 to view Storybook.

Testing

Jest is used for testing the components. To run the tests, use:

yarn test

The test files are located alongside the component files and ensure that the components render correctly and handle different states.

Commit Flow

This project follows a structured commit flow using Commitizen and Conventional Commits. This ensures that all commits are standardized and can be used to generate changelogs automatically.

Commitizen

To make commits easier and more standardized, we use Commitizen. Instead of using git commit, use:

yarn commit

This will prompt you to fill out the required fields for your commit message, ensuring it follows the Conventional Commits specification.

Publishing

To publish this package to npm, follow these steps:

1. Make sure you are logged in to npm:

   npm login

2. Update the version number in package.json according to Semantic Versioning. Note that this project uses GitHub Actions workflows to handle releases automatically. See the release workflow for more details.

3. Build the package:

   yarn build

4. Publish the package to npm:

   npm publish