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.

Performance: 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.

In the longer term Icons and Integrations WILL be moved to their own library, but currently live in veeqo-frontend. 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).

Links ⚓️

This Library: Storybook 📋 | Playroom 🛝

Old Library: Storybook 📋 | Playroom 🛝

Getting Started

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

Start storybook with npm run storybook, and Playroom (including the storybook playroom integration) in a seperate terminal use npm run playroom:start.

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 (don't push to git).

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

Publishing to NPM

We currently deploy to NPM, which is an automated process once you merge.

Publishing

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

After you have made your changes, use npm run patch or npm run minor or npm run major according to the update size:

• 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

If you run the script more than once we will have duplicate tags, which will ruin the changelog (easy to spot) and stop us using those versions in the future. Please use npm tags:remove v<yourversion> to remove the tag.

After this is done, merge your PR and GitHub actions will do the rest! If your version hasn't deployed within a few mins (check here), please reach out on slack.