MyCrypto UI

The shared UI component library used across all MyCrypto products.

Implemented with React components following Atomic Design.

Installation

Requires a bundler with ES module support.

yarn add @mycrypto/ui styled-components

Wrap your app in a ThemeProvider to use the included light and dark themes.

import { Button, light } from '@mycrypto/ui';
import React from 'react';
import { ThemeProvider } from 'styled-components';

<ThemeProvider theme={light}>
  <Button>Button</Button>
</ThemeProvider>;

Typeface

Our designs use the Lato and Roboto Mono typefaces, which you will probably need to install in your app or site. There are several options depending on your requirements and build tooling:

• Use typeface-lato and typeface-roboto-mono to self-host your typefaces when using npm/yarn with Webpack or any other build tool with CSS and font loaders (instructions)
• Use Google Fonts to load the fonts from a CDN (over the Internet) without any configuration (note that Google collects some usage data)
• Download Lato and Roboto Mono directly if you need more control over font loading or if you only plan on using the fonts locally

Development

You can launch the storybook simply by running yarn start

Deployment

The npm package is automatically updated by Travis whenever a new tag is pushed to the remote. To facilitate version management we use yarn version. To release a new version you just need to run:

  yarn version --major|--minor|--patch

This command will bump the version in the package.json file AND create an associated tag. After this, you must simply push the code and the tag to Github.

  git push && git push --tags