@grapegram/ui-kit

Private UI-kit for Grapegram ecosystem.

Tech stack

Dev instruments

Table of Contents

• Explore components in live
• How to install locally (for testing)
• How to start developing
  • Development policy
  • Recommended IDE Setup
  • Run locally
  • Release package
  • Custom project scripts

See live demos

You can access the components documentation via link grapegram.github.io/ui-kit/

Here you can check latest releases of this package: https://github.com/Grapegram/ui-kit/pkgs/npm/ui-kit

Local Installation Guide

To avoid publishing package to public npm registry, you can test builded package by linking it locally:

In the root of the ui-kit project run:

yarn build

Then run:

yarn link

After you get the message that package is linked, move to your local project where you want to test the package and run:

yarn link "@grapegram/ui-kit"

Now you can import components from the package in your local project. After you finish testing, you can unlink the package by running in your local project to avoid conflicts when you will install the package from GitHub Packages registry:

yarn unlink "@grapegram/ui-kit"

Development guide

Development policy

• All components must be documented in storybook.
• Follow the coding style used throughout the project.
• Write clear and concise commit messages according to the naming convention policy.
• Create pull request and make changes in separate branches according to the branch naming convention policy.

Recommended IDE Setup

VSCode + Volar (and disable Vetur).

If you are using VSCode, you can install the recommended extensions for development. Just search for @recommended in the extensions tab and install them.

Run locally

Clone repository on your local machine:

git clone https://github.com/Grapegram/ui-kit.git

Move into project folder:

cd ./ui-kit

Install all dependencies from package.json:

yarn

Run storybook locally for development (it is only one entry point for UI-kit development) then open http://localhost:6006 in your browser to see it live:

yarn dev storybook

When you finish you can just push changes to remote repository and create pull request with changes, in this case you will not create new version of package.

But if you want to create new version of package please follow the release package section below.

Release package

Note

This pacckage follows semantic versioning rules. Please read more about it semver info. We are using 3 digits versioning system: MAJOR.MINOR.PATCH.

When you finish your changes and want to release new version you can use scripts below to automaticly create new tag (it will increase version number depending on the type of release and current version in package.json) and commit + push it to remote repository:

• To create new MAJOR version (for breaking changes):

  yarn release:major

• To create new MINOR version (for new features, such as new components or utilities):

  yarn release:minor

• To create new PATCH version (for bug fixes or refactoring):

  yarn release:patch

Then you can check Actions tab in the repository to see the publish workflow running, it will automaticly publish new version of package to GitHub Packages registry.

Custom project scripts

Formatting project files according to the .prettierrc.json:

yarn format

Linting project files according to the eslint.config.ts:

yarn lint

Build production version of storybook:

yarn build-storybook