leopham-test-web-ui v0.1.0

Brankas Web UI

brankas-web-ui is VueJs-based UI library that implements our own design system.

All of our internal and external UIs should be composed of these components. You can view the latest collection on our Brankas Storybook.

Tooling

There are several tools and frameworks we use to ensure quality and consistency for our components:

Vuejs

Our components are built with VueJs and follow the recommended VueJs style guide - https://vuejs.org/v2/style-guide/. They can be found in the ./src folder

We use Vue CLI for easier local development and for consolidating our bundler configurations. It comes out the box with linting (via ESLint and testing (TODO)Jest)

Note: If you use VSCode, there is a recommended extension - https://marketplace.visualstudio.com/items?itemName=octref.vetur

Typescript

We write our VueJs components with Typescript. This brings with it extra linting with Typescript's ESLint extension

TailwindCSS

Our styling is implemented using TailwindCSS, a utility CSS framework. Please read their documentation and view their videos on how to build quality components.

Note: If you use VSCode, there is a recommended extension - https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss

Note: TailwindCSS relies heavily on running our CSS through PurgeCSS to maintain a reasonable CSS file size.

Prettier & ESLint

For formatting and linting our code, there are two primary tools we use:

• Prettier which will automatically format our code. Please enable your editor to format on save!
• ESLint which will lint and suggest fixes to our code. It is used with a Typescript extension

There is some overlap in the functionality of ESLint and Prettier. See .eslintrc.js and prettier.config.js for more.

StorybookJs

In order to showcase our components and make it easier for the design team to make sure they are implemented as expected, we host our component library with StorybookJs. Config files are found in ./storybook

Note: If you are new to writing Stories, a useful tutorial for VueJs is found here - https://www.learnstorybook.com/intro-to-storybook/vue/en/get-started/

You can find the hosted version at https://storybook.brank.as/

Building and Running

The easiest way to get started after cloning the repo is with Yarn (or NPM - just change the command)

yarn install
yarn storybook:serve

This will serve Storybook locally, at http://localhost:6006/. If you want to build the static version of Storybook, run

yarn storybook:build

From here you will need to serve the output at ./storybook-static. Our main.go service can do this:

go run .

Which will serve the static build at http://localhost/

Linting

You can can quickly lint our files using ESLint and quickfix issues in your files

yarn lint

If you just want to see lint issues without autofixing (this is what our Drone lint build step does), run

yarn lint --no-fix