Virutal Control Design System

This will serve as the design system of Virtual Control. The target is to create a central design which includes the theme and components that can be used across all projects. See it here.

Tools and Technologies Used and Its Usage in Our Project

• React - a JavaScript library that we used to build components and its logic
• TailwindCSS - a utility-first CSS framework that offers different classes to be used to easily build our theme and add styles to our components
• style-components - a JavaScript library that utilizes tagged template literals and CSS to be used in building custom styles for our components
• Storybook - an open source tool that we used for developing UI components in isolation

Design Reference

The design system is created by the UX Team and developed by our front-end developers. You could see the prototypes here. Please contact Sarah or Gail to request for an access if can't see it.

Creating a Component

1. Check the prototype of the component in Axure.
2. Clone this project. If the project is already existing in your local env, please get the latest version.
3. Create a folder under src/components for the new component. Use the component name as your folder name.
4. Add a file under the new folder using this convention — <component-name>.js. Write the functionality of the component here.
5. To add a story for that component, create a file under the new folder using this convention — <component-name>.stories.js.

Publishing to NPM Registry

1. Make sure you have the latest version of the master branch.
2. Update the version if there are changes by running npm version <version-number>. Please follow the standard in updating the version <major>.<minor>.<patch>:
   • Update the major if it's a major release (eg. rebranding, etc.) - 2.0.0
   • Update the minor if the team releases a new component or theme - 2.1.0
   • Update the patch if the team releases bug fixes or enhancements for a component - 2.0.1

Component Usage in a Project

1. Run npm install vc-design-system in your project.
2. Import the component like this - import Button from 'vc-design-system/Button'

Deployment

The project is deployed in AWS S3 every commit to master. We build the storybook and store the build contents in Bitbucket's artifact. This is what we deploy to S3 afterwards. You could check here to see the pipeline.