BIFROST-UI

BIFROST UI is a library for creating user interfaces based on the constraints from BIFROST.

Install

npm install --save bifrost-ui

Usage

import React from 'react'
import { Button } from 'bifrost-ui'

// You need to ensure to include bifrost-ui styles in your main App!
import 'bifrost-ui/dist/index.css'

const MyAwesomeComponent: React.FC = () => (
  <div>
    <Button variant="primary">
      My Button
    </Button>
  </div>
);

Development

Local development is broken into two parts (ideally using two tabs).

First, run rollup to watch your src/ module and automatically recompile it into dist/ whenever you make changes.

npm start # runs rollup with watch flag

The second part will be running the example/ create-react-app that's linked to the local version of your module.

# (in another tab)
cd example
npm start # runs create-react-app dev server

Now, anytime you make a change to your library in src/ or to the example app's example/src, create-react-app will live-reload your local dev server so you can iterate on your component in real-time.

Icons / SVG

Icons / SVGs must be added to src/assets/icons. With npm run svgr the icons will be parsed to tsx files. You have to add the new file to the iconMap.ts.