Install our library using npm:
npm i fedspendingtransparency/data-transparency-ui#v_._._Import our components like this:
import { Table } from 'data-transparency-ui';To see our exported components, see our type definition file..
The purpose of this project is to give visibility into the patterns built into the Broker and USASpending UI and their corresponding techincal implementations. These implementations, referred to as UI Components, exist outside of the USASpending and Broker codebase.
With this visibility & independence, the following benefits arise:
- UI/UX & Development Teams can identify a one-to-one relationship between designs and their implementations in code.
- USASpending & Broker can reuse the same code.
- Integration with these components within USASpending and Broker will result in the ability to redesign or improve these components in a single place and then see those changes propagated throughout the website immediately.
Here is a current status report on USASpending and Broker Integration.
The below info-graphic displays how the UI/UX and Development Teams will iteratively work together to identify new components for this library.
We use storybook to demonstrate our library of components and their technical implementations. This open-source project has nearly 1K contributors and is constantly improving.
We use the Component Story Format to demonstrate our components. Once
Storybook supports mdx format for stories, we will migrate to that to achieve greater customization over our stories.
Currently, we are using the following Storybook features to display our current implementation:
When adding a new component to this library, please follow the below guide:
- Build storybook artifacts and Component's CSS by running
npm run build- Storybook build artifacts are compiled in
docs/and deployed using GitHub Pages once merged to the master branch - Component CSS is compiled to
dist/
- Storybook build artifacts are compiled in
- Export the new component in
index.js - Consult the storybook documentation