UI Design System

This repository contains a library of reusable UI components developed in React. The goal is to provide a scalable and efficient solution for creating consistent interfaces across different projects. This library can be imported from npm and simplifies the integration of a well-defined Design System.

Prerequisites

Before you start, make sure you have the following dependencies installed in your project:

• Node.js (version >= 20.x)
• npm or yarn
• React (version >= 18.4.0)
• Storybook for local component testing

Dependencies

This is a Node.js application. The recommended Node.js version to run it is 20.11.1 LTS.

Installation

To install all dependencies just run:

    npm install

Or if you prefer using yarn:

    yarn add @your-username/design-system-ui

Available Scripts

| Script | Description | |-|-| | build | Generates the distribution files using TypeScript and Vite | | dev | Starts the local development environment using Vite. | | storybook | Launches the Storybook environment to visualize and test components. | | build-storybook | Builds a static version of Storybook. | | prepublish | Prepares the package for publishing by running the build script. |

Local Testing with Storybook

To visualize and test the components locally, you can use Storybook. This facilitates exploring components in isolation and allows collaboration with other designers and developers.

Start Storybook with the following command:

    npm run storybook

This will open an interactive interface in your browser where you can explore and test each component.

Contributing

This project follows a collaborative approach, so if you want to contribute with improvements or new components, follow these steps:

• Create a branch with the name of your feature or fix: git checkout -b feature/new-feature.

• Commit your changes: git commit -m 'Add new feature'.

• Push your branch: git push origin feature/new-feature.

• Open a Pull Request.

Code Conventions

• Use TypeScript to ensure static typing.

• Follow the ESLint standards included in the project to maintain code quality.

• Ensure all components are documented and tested through Storybook.

Publishing

To publish a new version of the library to npm, make sure the build has been executed correctly with the following command:

    npm run prepublish

Once ready, you can publish the library with:

    npm publish

Make sure you have the necessary permissions to publish.

Support

If you have any questions or issues, please open an Issue in this repository or contact the maintenance team.

License

This project is licensed under the MIT License.

References

1. Software Architecture
2. UI/UX Design
3. TypeORM Models and Validation
4. Fastify User Authentication with JWT
5. RESTful Node.js Controllers with Fastify
6. Docker Dev Environment with DB, Server and Client
7. Tailwind CSS Theme Setup
8. Components Library with Vite & Storybook
9. Form Components
10. Table, Data Grid and Modal Dialog Components
11. Navigation and Dropdown Components