RT Design System

Introduction

This package is designed for RTC team to use for their project. We import Blueprintjs and Antd table and customize the styles according to RTC standard, and export every component with new styles.

Packages

There are the components libraries that we use for this package.

• – Core styles & components.
• – Components for interacting with dates and times.
• – Components for selecting items from a list.
• – Components for using antd table.

Applications

We use storybook for documentation and playground purposes. The production storybook is hosted on GitHub Pages, while UAT and internal environment is hosted on chromatic.

Chromatic manage access is base on the repo access. So if you have access to our repo, you will have access to the chromatic page.

https://rt-commercial-eng.github.io/rt-design-system/

This is the UAT environment for UAT deployment:

https://development--5fb34b7ef4bcb600219aea47.chromatic.com/

This is the internal environment for dev development:

https://internal--5fb34b7ef4bcb600219aea47.chromatic.com/

Installation

Before you start using our package, make sure you get these correct versions below:

React v16.0.0+ Node-sass v4.0.0+ Nodejs v10+

Due to the library is restricted to RTC team, you need to have your NPM account that has accessed with the library and log in via terminal like below:

npm login

Please note your NPM account need to have access to the library, if you don't please contact your supervisor.

After cloning this repo.

1. Run npm install to install all dependencies.
2. Run npm run storybook to run the storybook in dev environment.

That's all you need to run this package, all the changes you made in either core.scss or any .stories.tsx will be reflected in the storybook.

Development

There are 5 branches in total:

1. master - This is the production branch
2. development - This is the UAT branch
3. internal - This is the internal branch which used for development
4. gh-pages - This branch hosts storybook in production page
5. demo-project - This branch host the source code for the demo in app (order page)

Documentation

Much of the documentation live inside the storybook. Component with new functions/props (if there's any) is being exported and we import it it storybook in .stories.tsx. There we can view and edit component with every changes, and only useable props are being used in every story.

CI/CD

We use CircleCI to utilise CI/CD for the package. You can browse in .circleci/config.yml. It has 3 main jobs:

1. Build the package
2. Deploy the storybook in internal/UAT/Production page
3. If the storybook is deployed to Production environment, the npm package will be published with version according to package.json base on version number (Currenntly is 1.2).

If you has access to the package, you can already see the circleci platform. So feel free to change the config as you see fit to your application.

Publish NPM package

CircleCI already handles the NPM package, however you need to change to your account in package.json. You can use either your account, or a generic account from your organization to handle the publishment.

In term of version, please follow NPM guidelines: https://docs.npmjs.com/cli/v6/commands/npm-version

Testing

We use Jest and react-testing-library for unit testing against the [Figma API] (https://www.figma.com/developers/api)

Css/Scss needs to be compiled so that it can be injected into jest-dom for test run properly

  // Optionally to delete the dist folder from the root
  rm -r dist

  // Run below command to generate the bundled css
  npm run prepare

  // Run styling tests
  npm run jest

License

MIT