Tradera Frontend Blueprint

• Components — Shared React components
• Theme — Tradera Bootstrap-based styles, plus fonts & icons
• Utils — Shared Javascript code

• Frontend guildelines — Things to keep in mind for frontend developers
• Storybook — Display & testing of components & their states
• Visual language — Theme presentation and guidelines

How to use

import { Component } from '@tradera/blueprint/components/component'

import '@tradera/blueprint/components/component.css'

import { util } from '@tradera/blueprint/utils'

import '@tradera/blueprint/theme'

Contributing

master is protected and contains merged commits, with tag releases to npmjs.com.

Create a feature-branch when developing a new feature. When ready, create MR and await approval. Merged branches will be published on Firebase and NPM automatically.

How to develop and test locally

yarn install:all installs all dependencies.

How to link local Blueprint to other projects (like Touchweb)

1. pnpm link --global in the blueprint root

   this will link your local BP to the global pnpm store (a symlink).

2. yarn build:theme in the blueprint root

   if you want to test the theme (which is most common). You can of course also use a watch command here like yarn start:theme

3. pnpm link @tradera/blueprint --global in the project root you want to test in (like Touchweb)

   this will link the global BP to the local project (a symlink). You can see this in the node_modules/@tradera/blueprint folder of the project (TouchWeb).

• After testing is done, run pnpm rm @tradera/blueprint -g in the project (TouchWeb).
• Then undo the changes in the package.json file of the project (TouchWeb).
• Finally run pnpm install in the project (TouchWeb) to get the previous version. (check node_modules/@tradera/blueprint and there should be no symlink any more). If there are issues you might have to run pnpm install --force.

How to develop components

• Every component, its sub components and related files go in their own folder: components/src/[component-name].

• yarn start:components watches and compiles changes.

• Test the component by adding it to Storybook. Test it in another project by linking your local Blueprint.

How to develop the theme

• SASS files are grouped by function in theme/scss. When adding a new file, import it in theme/scss/main.scss.

• yarn start:theme watches and compiles changes.

• Test the theme by running the Visual Language and adding new articles if necessary. Test it in another project by linking your local Blueprint.

How to develop utils

• Utilities are placed in utils/src. Collect related functions in separate files. Tests are placed alongside the file they test for; utils/src/[util-name].spec.js.

• Re-export functions from utils/index.js.

• yarn start:utils watches and compiles changes.

• Test it in another project by linking your local Blueprint.

How to release new versions

1. In Slack channel #release-and-deploy, write jag kör :firebase: blueprint
2. Update the Blueprint version in the Merge Request
   1. git checkout <your-branch>
   2. git fetch && git rebase origin/master to ensure branch is rebased on latest master branch
   3. npm version <major|minor|patch> to bump the version (we use SemVer for versioning.)
   4. git push -u origin --follow-tags
3. Merge approved Merge Request once pipeline has finished
4. Await the new pipeline on the master branch to build, it will await your confirmation in the Deploy to npm stage which will then automatically publish the npm-package and deploy Firebase to https://blueprint.tradera.com/
5. Write klar in the Slack channel #release-and-deploy
6. If needed, upgrade Blueprint where need, such as in Touchweb, with yarn upgrade @tradera/blueprint --latest and deploy that change

• documentation is a special branch, this is for adding documentation only. Outside of the semver flow, it represents how our Style guidelines are interpreted at Tradera. This branch tracks master and can be merged in at any time

How to publish beta versions

Read this: Publishing a beta or alpha version to NPM

Publish a beta manually by:

1. yarn build
2. npm publish --tag beta --otp=<2FA code>