Palette UI

A component library that utilize antd

Getting Started

Ensure that node version is <= v18. Do not use versions higher than v18.

Start by cloning the repo, then run npm install for the necessary node modules.

Usage In Development Mode

To see the package being utilized in an actual project without updating the version on NPM, you can do it in a development way by running

In the package that you are developing:

npm run build

This should create a palette-design-0.0.xx.tgz file in the root directory of this project (xx represents the version)

Copy the file and place it at the root of the test project.

In test project:

1. Add palette-design to the project

In the test project, make sure the package.json is updated as

"dependencies": {
    ...,
    "palette-design": "file:./palette-design-0.0.xx.tgz"
}

where the name of this file is the same as the file you pasted inside.

Ensure that you run npm i to update the package in node_modules.

4. Further updates of package

Copy the generated palette-design-0.0.xx.tgz file to the test project, then run npm update palette-design which will update the package being used to the new version.

NOTE: Occasionally, you may not be able to import new components despite the updates. To fix this, first press F1, then type 'Reload Window' to force an update on the VSCode Window. The import will be fixed.

Style Guidist

Style Guidist is a quick way of looking through the components that you have created, along with its UI and props. To start the style guidist server, run

npm run styleguide

This will run a local server of the documentation of the components at localhost:6060