Carrent-ke-uikit NPM

Otto's UI-KIT 🎨

The UI-KIT is the component library for Resuable React Components for Otto's React Apps.

👷 Built With

TailwindCSS - CSS Styling
Storybook - UI Development Environment & Documentation

🏃 Getting Started

You have two ways to develop with this component library:

With Storybook

You can develop the UI-KIT using storybook's UI. To do so, run...

yarn storybook

Against Another Project

You can develop new components against another project that uses the UI-KIT. To do so, run...

COMING SOON

Documentation

What belongs and what doesn’t

This design systems should only contain pure and presentational components. These components deal with how UI appears. They respond exclusively to props, do not contain app-specific business logic, and are agnostic to how data loads. These properties are essential in allowing the component to be reusable.

Useful heuristics for developers:

If a UI pattern is used more than three times, turn it into a reusable UI component.
If a UI component is used in 3 or more projects/apps, put it in this ui-kit.

Development Process

Create your react component ( Avatars, Buttons, Input Fields, Cards, Panels) in the components folder following the guidelines above.
Write stories to showcase these components in sample work environment. You can look at this documentation and this to see what goes into writing component stories.
Open a PR once you feel the component is ready and the story is complete.

Release Process

Open a PR with your changes. A web hosted version of the storybook will be made available on chromatic and will be visible in the details section of your PR. You can send this link to someone else to review.
If PR is approved, you can set the appropriate label to determine if CI will kick of a major, minor or patch release. If nothing is selected, a patch release will be made. For our purposes, ❌Do not draft a new release, it will be done automatically.