medika-ui-components v1.0.47

Project README

Overview

This repository contains the source code for the project, utilizing a stack of modern technologies including React, TypeScript, Tailwind CSS, Rollup, Storybook, and Chromatic. Follow the guidelines below to understand the project structure, run it locally, and make contributions.

Project Structure

Branches

1. dev: Development branch where ongoing work takes place.
2. release: Branch representing the latest code deployed to production.
3. master: Branch containing the last stable release.
4. Feature branches: Create branches for new features and merge them into the dev branch.

Running the Project Locally

Follow these steps to set up and run the project locally:

1. Clone the repository:

   git clone https://bitbucket.org/medikabazaar/uicomponents/src/master/

2. Install dependencies using pnpm:

   pnpm install

3. Run Storybook locally:

   pnpm run storybook

   Visit Storybook Installation Guide for more details.

Chromatic - Visual Testing & Review

Chromatic is a powerful visual testing & review tool that scans every possible UI state across browsers to catch visual and functional bugs. Follow the link to learn more about its features and capabilities.

To create a build and publish to Chromatic, use the following command:

pnpm chromatic

Release Process

1. Merge the current release to the master branch.
2. Merge the current development (to be released) to the release branch.
3. Update the package version.
4. Publish to npm.

CI/CD Pipeline

Consider setting up a CI/CD pipeline to automate the steps mentioned above. This will streamline the development and release process, ensuring consistency and reliability.

How to Use in Your Project

1. Install the @medikabazaar/ui-components package:

   pnpm install @medikabazaar/ui-components@latest

2. Wrap the theme provider over your root component:

   import { ThemeProvider } from '@medikabazaar/ui-components';
   
   const yourCustomTheme = {}; // Define your custom theme here
   
   const App = () => (
     <ThemeProvider customTheme={yourCustomTheme}>
       <App />
     </ThemeProvider>
   );

3. Explore available components in the Storybook to integrate them into your project.

Feel free to explore, contribute, and enhance the project!