@fmi/design-system-react

The FMI Design System is a reusable component library built with React. The goal is to make building durable UIs more productive and satisfying by providing theming and core components out of the box.

View live documentation on Storybook

Installation

To use FMI Design System components, all you need to do is install the @fmi/design-system package and its peer dependencies:

npm install @fmi/design-system styled-components

or if the project uses Yarn

yarn add @fmi/design-system styled-components

Usage

To start using the components, please follow these steps:

1. Wrap your application with the ThemeProvider component

import { ThemeProvider } from '@fmi/design-system';

// Do this at the root of your application
const App = () => (
  <ThemeProvider>
    <App>
  </ThemeProvider>
);

2. Import Roboto into the head of your document and add the font-family CSS property to the body selector of your stylesheet

<link
  href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap"
  rel="stylesheet"
/>

body {
  font-family: 'Roboto', sans-serif;
}

3. You can then start using components provided by the Design System:

import { PrimaryButton } from '@fmi/design-system';

const Example = () => <PrimaryButton>Click me</PrimaryButton>;

Publishing

To publish the library to NPM you will first need to be added to the @fmi org on NPM.

1. Increment the version number based on the semver specification

npm version major | minor | patch

This command will automatically bump the version number in package.json and add a git tag of the version number.

2. Build the module bundle

yarn build

3. Publish to NPM

npm publish

4. Push version bump and tag to git

git push && git push --tags