React UI Components

This is a library of reusable UI components built with React, TypeScript, and TailwindCSS. It uses Vite for development and build processes, and includes Storybook for component documentation and visual testing.

Table of Contents

• Installation
• Starting your own Component Library
• Development
• Build
• Linting and Formatting
• Testing
• Storybook Component Library View
• Creating a New Component
• Modifying the Component Templates
• Using the library in another project
• Pre-commit Hook using Husky
• Contributing
• License

Cloning the Repository

To clone the repository, run:

1git clone https://github.com/anokhimg/dataverse-ui-components.git
2cd dataverse-ui-components
3

Installation

To install the dependencies, run:

1npm install

Starting your own Component Library

If you want to start your own component library based on this template:

1. Clone the repository as mentioned above.

2. Change the package name in package.json to your own package name.

3. Remove the existing Git origin:

1git remote remove origin

4. Create a new repository as you normally would do, on GitHub or any other Git hosting service.

5. Add the new repository as the origin:

1git remote add origin <your-repository-url>

6. Push the code to the new repository:

1git push -u origin main

Development

To start the development server with Vite:

1npm run dev

Build

To build the library for production:

1npm run build

This will compile TypeScript and bundle the project using Vite.

Linting and Formatting

To lint the project using ESLint:

1npm run lint

To format the project using Prettier:

1npm run format

Linting and formatting are also automatically run on staged files before each commit using Husky and lint-staged.

Testing

To run the tests once:

1npm run test

To run the tests in watch mode:

1npm run test-watch

To run the UI test interface with Vitest:

1npm run test:ui

Storybook

To start Storybook server:

1npm run storybook

To build the Storybook static site:

1npm run build-storybook

Creating a New Component

To create a new component, use the following command:

1npm run create-component <ComponentName>

This will create a new component in the src/components directory, along with a test file and a story file.

Modifying the Component Template

To modify the template files used when creating a new component, navigate to the scripts/templates directory and modify the files as needed. These templates are used by the create-component script to generate new component files.

Using the library in another project

To use the library locally in your other React projects, refer to this blog here

Pre-commit Hook

This project uses Husky to run a pre-commit hook that ensures code quality by running lint-staged on staged files. The pre-commit hook is defined as follows:

1#!/bin/sh
2. "$(dirname "$0")/_/husky.sh"
3
4npx lint-staged

This script ensures that all staged files are linted and formatted and tests are run, before they are committed.

Contributing

Contributions are welcome! Please follow these guidelines when contributing:

1. Fork the repository
2. Create a new branch (git checkout -b feature/your-feature).
3. Commit your changes (git commit -m 'Add some feature').
4. Push to the branch (git push origin feature/your-feature).
5. Open a pull request.

License

This project is licensed under the MIT License.

Feel free to use the components in this library in your own projects!