@veeqo/ui

Veeqo Components

Intro

The frontend component library for reusable components in Veeqo which aim to reflect the Veeqo Design System. When possible we should aim to re-use components in this library all over the frontend and reduce the amount of custom components we create to reduce bundle size.

This library has been re-written and refactored with the aims of enable tree-shaking which will allow us to reduce our bundle size and decrease page load times while also simplifying the library making it easier to work with and develop.

Icons and Integrations WILL been moved:

• Icons now live in @veeqo/icons.
• Our Integrations now live in @veeqo/integrations.

For now please use individual icons to preserve tree shaking, while downstream uses can use the old component library Glyph component if needed (not tree shakable, huge size).

Getting Started

Setup should be simple, clone the repo and use npm to install all dependencies.

Testing

With this new library we aim to improve the quality of the code, and would like good test coverage of our components covering its main behaviour.

Note:

• We use React testing library.
• Run tests with npm run test
• Watch (listen to changes/ file saves) tests with npm run test:watch optionally with a filepath.

Prettier Setup

Everything should mostly be setup already, if prettier isn't automatically formatting please check your .vscode/settings.json and adjust if needed (and remove from git).

You will need to install ESlint and Prettier VSCode Extensions, if you haven't already.

Publishing to NPM

We currently deploy to NPM, and you will need to be a member of the team to be able to publish.

Setup Steps

1. Register NPM and request package access

In order to make sure you're not a random stranger to do the publish, you need to register your amazon account (email ending with @amazon.com) on npm. And then create a ticket in this system to request you permission to access Veeqo-FE package, using the following options to create this access request ticket.

Category (C)
Veeqo

Type (T)
Access Provisioning

Item (I)
Access Requests

Ps: feel free to PM your manager about your access request too as sometimes they may miss the emails

2. Authenticate

Once you've granted the access to Veeqo-FE package, make sure you have authenticated NPM and logged in with your account on your local machine.

An easy way to do this is to run:

npm login

Publishing

Versioning will happen on the package.json version number, and is for the library as a whole instead of per component for simplicity.

When have made a change you want published, use npm run patch or npm run minor or npm run major depending on your changes:

• This create update the version number by the amount specified in the command you entered above.
• Create a git tag for that version, making the version history straightward to look back on.
• Update the changelog based on your commits.
• Push this readme change upstream

After this is done, merge your PR.

Once your PR is reviewed and merged, you can then run npm publish from master.

• This will run all unit tests and check linting.
• Then publish to NPM.