Barramundi (web component library)

The barramundi (Lates calcarifer) or Asian sea bass, is a species of catadromous fish in the family Latidae of the order Perciformes. The species is widely distributed in the Indo-West Pacific region from Southeast Asia to Papua New Guinea and Northern Australia.

Prized by anglers for their good fighting ability barramundi are reputed to be good at avoiding fixed nets and are best caught on lines and with fishing lures. In Australia, the barramundi is used to stock freshwater reservoirs for recreational fishing.

Before you start

We use a number of packages in private repositories. To support these you'll need to add two environment variables to your shell config (e.g. .bashrc, .zshrc, .bash_profile):

# Fishbrain package registry tokens
export FISHBRAIN_PACKAGE_REGISTRY_TOKEN=XXXXX
export FONT_AWESOME_PACKAGE_REGISTRY_TOKEN=XXXXX

For FISHBRAIN_PACKAGE_REGISTRY_TOKEN the token can be generated by creating a personal access token in your Github account. Make sure to provide repo, write:packages and read:packages scopes for your token. Copy your token and Enable SSO. The token can now be used as the value for FISHBRAIN_PACKAGE_REGISTRY_TOKEN.

For FONT_AWESOME_PACKAGE_REGISTRY_TOKEN the token can be found in 1Password.

Getting started

Runs yarn start to run the app in the development mode. This will start a Storybook instance at http://localhost:9001 which you can user for development.

Run tests with yarn test and linting with yarn lint.

There is a live version of Barramundi Storybook (develop branch) available at http://barramundi.surge.sh/.

Frontend Guidelines

The Frontend Guidelines can be viewed here.

Adding a new components

Components should be exported via src/index.ts. Every component should have a Storybook entry, and ideally some form of unit test.

Developing alongside another JS app

If you want to do parallel development of Barramundi and an app using it (e.g. Mykiss, Ornatus), you can do the following:

• Run yarn run build:watch
• Run yarn link - this will set the local build of Barramundi as the package to resolve to.
• In the other project directory run yarn link "barramundi".

Don't forget to unlink once you're finished.

Releasing

Run yarn release to go through the release process. If sucessful, this will result in a new version of Barramundi being published to NPM. Make sure to use semantic versioning when selecting the release version.

You will need to create a file .env.deploy and add a GITHUB_TOKEN to allow the release script to run. The token can be generated by creating a personal access token in your Github account. The token will need to have "repo" access; no "admin" or other scopes.

Usage

You'll need to wrap your app in the exported theme provider to be able to use any components:

import { DefaultTheme, ThemeProvider, Text } from 'barramundi';

const App = () =>
  <ThemeProvider theme={DefaultTheme}>
    <Text>Hello Barramundi</Text>
  </ThemeProvider>

You can override or replace DefaultTheme with your own theme.