Rewind-UI - Contributing

Contributing

Learn how to contribute to the project

Contributing guidelines

Thank you for considering contributing to this project! We appreciate your time and effort in making this project better.

Tech stack

Rewind-UI is built as a monorepo using Turborepo on top of the following amazing projects:

Basic animations are implemented using the Web Animations API. For more complex animations we use Framer Motion.

Before you get started, please take a moment to review the following guidelines.

Ways to contribute

There are many ways to contribute to this project! Here are some ideas:

Submit bugs and feature requests
Review source code changes
Review the documentation and make pull requests for anything from typos to new content
Review open issues
Contribute to the codebase

If you encounter a bug, have a feature request, or need assistance, please submit an issue using the issue tracker. Before submitting an issue, please check if a similar issue already exists. Include as much detail as possible to help us understand and address the problem.

Contribution workflow

Fork the repository
Create a new branch for your changes
Make your changes
Commit your changes
Push your changes to your fork
Submit a pull request
Wait for your pull request to be reviewed
Make changes to your pull request if the reviewer requests them
Celebrate your success after your pull request is merged!

Local development

After cloning the repository, you can run the following commands:

Install pnpm globally: npm install -g pnpm
Install repository dependencies: pnpm install

Having installed the dependencies, you need to start the dev servers for each package/app:

@rewind-ui/core

Open the rewindui/packages/core directory and run pnpm dev to start the development server on the core package.

Storybook

Open the rewindui/apps/storybook directory and run pnpm dev to start the Storybook server. Storybook is used to develop and test components in isolation.

Testing

Component tests leverage React Testing Library and are co-located with component implementations. New components should include functional tests that cover how a user would interact with them.

To run the test suite once, run pnpm run test.

To run the test suite in watch mode, run pnpm run test:watch.

Documentation

Open the rewindui/apps/docs directory and run pnpm dev to start the documentation server.

Project structure

The structure of each component should be as follows:

@rewind-ui/core

Each component should be in its own directory inside rewindui/packages/core/src/components. The Button component can be used as an example.

The component directory should contain the following files:

index.ts - exports the component and its types
Component.tsx - contains the component logic
Component.types.ts - contains the component types
Component.tests.tsx - contains the component tests

The CVA file of each component should be placed in rewindui/packages/core/src/theme/styles/Component.styles.ts and should also be exported from rewindui/packages/core/src/theme/styles/index.ts. The theme.context.tsx file will need to be adjusted to include the new component.

Each component should be exported from rewindui/packages/core/src/index.ts as well.

Storybook

To add a new component to Storybook, add a new story file in rewindui/apps/storybook/stories and import the component from @rewind-ui/core.