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):
- Enable keyboard as a mouse via system preferences.
- 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(ornpm 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