preplaced-ui v0.0.3
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.
- Place both the repositories
preplaced-ui
andpreplaced-app
in the same directory. - Run the command
yarn link
in preplaced-ui directory - 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
- Run the command
yarn unlink
in preplaced-ui directory. - 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:
npm run version patch
: This increments the least significant digit in the version number.npm run version minor
: This increments the middle digit in the version number.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)