@flatfile/design-system

Design system

This is the home for Flatfile's design system and component library. Please visit Installation for more detailed guidelines.

Developing locally

Using NPM:

First and foremost run npm install

To run Storybook npm run storybook

To test npm test

Building a new component

To create a new component, run npm run createComp {ComponentName}. The template folder contains a file for your component, docs, css, and tests. Don't forget to export your component from src/index.ts

Publishing to NPM

On your branch, run npm run changeset from the root of this repo and select @flatfile/design-system. Select the correct version update (major/minor/patch) and provide a message for what has changed. A changeset markdown file will be added that should be merged with your PR. Once merged, this will trigger a Github action to create a PR to update the version and publish the package.

Accessibility

Design system is built on top of React-Aria which provides accessibility and behavior according to WAI-ARIA Authoring Practice.

In order to use keyboard interactions in Mac OS (Safari and Firefox):

1. Enable keyboard as a mouse via system preferences.
2. In Safari: check Preferences > Advanced > Press tab to highlight each item on a page.

Review process

We require an approval from a member of the design team and a member of the engineering team.

Installation

npm install @flatfile/design-system

or

yarn add @flatfile/design-system

Consuming

Some components implicitly assume the existence of a global Tooltip component, make sure it exists by wrapping your app with AMPWrapper

import { Button } from '@flatfile/design-system'

Testing locally with separate project repo

If you have made changes within the design system repo and would like to test the new package locally:

• From this repo
  • npm run pack:prod (or npm run build && npm pack)
• In the consuming repo's package.json, update the design system dependency to
  • "@flatfile/design-system": "file:./path/to/flatfile-design-system-x.x.x.tgz"
• In the consuming repo
  • npm i
• Restart the application