Getting Started

You are viewing -> preplaced-ui <- a components library for common components of preplaced organisation

New to library?

To start development, clone this repo to your local device and run the script npm install

Scripts

use "npm run " preceding the script name build : To build a publish ready build of library to dist/ folder. Uses index.tsx as entry point. storybook : To initialize storybook to test ui components version : To increment version number in package.json.

How to?

Create your component in src/components/<componentname>/<componentname.tsx>. Styling is discussed later. Export your component as a named export. Now, if you want your component to end up in package build, import this component in src/index.tsx.

Local Testing [unstable]

To test your project locally in a repository (say preplaced-app), use these simple steps.

1. Place both the repositories preplaced-ui and preplaced-app in the same directory.
2. Run the command yarn link in preplaced-ui directory
3. Run the command yarn link preplaced-ui in preplaced-app

If you see a success message, voila!. You can now simply import components as you would from a npmjs package. This does not add the library in the package.json, rather it adds the necessary files in node_modules/ folder.

After making any changes in the preplaced-ui library, simply run npm run build in preplaced-ui library and it should directly reflect in your app after a refresh.

Run the following commands when you are done testing locally

1. Run the command yarn unlink in preplaced-ui directory.
2. Run the command yarn unlink preplaced-ui in preplaced-app directory.

Version

(!!! Only run this script for minor or major update, git workflow auto runs patch script before publishing) To increment version number in package.json, no need to do it manually, run any of the following command:

1. npm run version patch: This increments the least significant digit in the version number.
2. npm run version minor: This increments the middle digit in the version number.
3. npm run version major:This increments the most significant digit in the version number.

Tailwind

Always use prefix pui- while writing class name Eg: className = "w-full" will be written as className = "pui-w-full"

Storybook

Publish

Any time the main branch is pushed with changes, It auto publishes the package on npmjs. In most cases there is no need to manually publish anything. Just create a pull request to main, and when it is merged it will auto-publish. (refer to github workflows for the same)