{"id":39084778,"url":"https://github.com/fedspendingtransparency/data-transparency-ui","last_synced_at":"2026-01-30T17:02:20.150Z","repository":{"id":35901395,"uuid":"220094280","full_name":"fedspendingtransparency/data-transparency-ui","owner":"fedspendingtransparency","description":"Library of UI components powering Data Transparency websites","archived":false,"fork":false,"pushed_at":"2026-01-26T16:58:13.000Z","size":121230,"stargazers_count":12,"open_issues_count":3,"forks_count":8,"subscribers_count":7,"default_branch":"master","last_synced_at":"2026-01-27T04:48:50.354Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://fedspendingtransparency.github.io/data-transparency-ui/?path=/story/introduction--page","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/fedspendingtransparency.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2019-11-06T21:32:08.000Z","updated_at":"2026-01-06T21:43:26.000Z","dependencies_parsed_at":"2023-11-30T15:29:51.699Z","dependency_job_id":"a3b81d3d-cbc2-44b0-bb33-2df55f108daf","html_url":"https://github.com/fedspendingtransparency/data-transparency-ui","commit_stats":null,"previous_names":[],"tags_count":136,"template":false,"template_full_name":null,"purl":"pkg:github/fedspendingtransparency/data-transparency-ui","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fedspendingtransparency%2Fdata-transparency-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fedspendingtransparency%2Fdata-transparency-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fedspendingtransparency%2Fdata-transparency-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fedspendingtransparency%2Fdata-transparency-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fedspendingtransparency","download_url":"https://codeload.github.com/fedspendingtransparency/data-transparency-ui/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fedspendingtransparency%2Fdata-transparency-ui/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28816571,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-27T12:25:15.069Z","status":"ssl_error","status_checked_at":"2026-01-27T12:25:05.297Z","response_time":168,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-01-17T18:36:09.237Z","updated_at":"2026-01-27T17:00:52.674Z","avatar_url":"https://github.com/fedspendingtransparency.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Data Transparency User Interface (UI) Component Library\n\n## Storybook Documentation\n[https://fedspendingtransparency.github.io/data-transparency-ui/?path=/story/introduction--page](https://fedspendingtransparency.github.io/data-transparency-ui/?path=/story/introduction--page)\n\n## Installation Instructions\nInstall our library using npm:\n\n```shell\n    npm i fedspendingtransparency/data-transparency-ui#v_._._\n```\n\nImport our components like this:\n\n```javascript\n    import { Table } from 'data-transparency-ui';\n```\n\nTo see our exported components, [see our type definition file](https://github.com/fedspendingtransparency/data-transparency-ui/blob/master/index.d.ts).\n\nThe purpose of this project is to give visibility into the patterns built into the \n[Broker](https://broker.usaspending.gov/) and [USASpending](https://usaspending.gov/) UI and their corresponding technical implementations.\nThese implementations, referred to as UI Components, exist outside the USASpending\nand Broker codebase.\n\nWith this visibility \u0026 independence, the following benefits arise:\n\n- UI/UX \u0026 Development Teams can identify a one-to-one relationship between designs and their implementations in code.\n- USASpending \u0026 Broker can reuse the same code.\n- Integration with these components within USASpending and Broker will result in the ability to redesign or improve these components\nin a single place and then see those changes propagated throughout the website immediately.\n\n[Here is a current status report on USASpending and Broker Integration](https://github.com/fedspendingtransparency/data-act-documentation/blob/data-transparency-ui/frontend_apps/component-library-integration-status.md).\n## Pre-install advisory\n- It is advised that consumers of this project add `\"preinstall\": \"npx npm-force-resolutions@0.0.3\"` to the package.json of the project that uses this library. Users must also add the appropriate `\"resolutions\"` section to their package.json as well. Doing the aforementioned steps will help resolve any security vulnerabilities from `npm audit`\n## UI/UX \u0026 Development Collaboration Process\n\nThe below infographic displays how the UI/UX and Development Teams will iteratively work together to identify new components for this library.\n\n\u003cimg src={infoGraphic} alt=\"Data Transparency USASpending.gov logo\" /\u003e\n\n## Component Library Contribution\n\nWe use [storybook](https://github.com/storybookjs/storybook) to demonstrate our library of components and their technical implementations.\nThis open-source project has nearly 1K contributors and is constantly improving.\n\n### Creating a New Story for a Component\n\nWe use the [Component Story Format](https://storybook.js.org/docs/formats/component-story-format/) to demonstrate our components. Once\nStorybook supports `mdx` format for stories, we will migrate to that to achieve greater customization over our stories.\n\nCurrently, we are using the following Storybook features to display our current implementation:\n\n- [Mobile Responsiveness](https://github.com/storybookjs/storybook/tree/master/addons/viewport)\n- [Docs](https://github.com/storybookjs/storybook/tree/master/addons/docs)\n\n### Technical Directions for Adding New Components\n\nWhen adding a new component to this library, please follow the below guide:\n- Build storybook artifacts and Component's CSS by running `npm run build`\n    - Storybook build artifacts are compiled in `docs/` and deployed using GitHub Pages once merged to the master branch\n    - Component CSS is compiled to `dist/`\n- Export the new component in `index.js`\n- Consult the storybook documentation\n\n### Integration Testing w/ your Local Environment using NPM Link or NPM pack\n\nPlease note in the directions below, the \"consumer-context\" is the application that you're using with the Data Transparency User Interface Component Library.  So if you are using this library with the USAspending application, the consumer context is usaspending.\n\nTo test components locally in the context it will be used either use `npm link`:\n\n1. Navigate to the `data-transparency-ui/` root.\n2. Change \"main\": \"dist/index.js\" in the package.json file to \"main\": \"index.js\"\n3. Run npm link path/to/your/\u003cconsumer-context\u003e/node_modules/react (example npm link ../\u003cconsumer-context\u003e/node_modules/react; to integrate with usaspending.gov use `npm link ../usaspending-website/node_modules/react`)\n4. Navigate to the consumer context directory (i.e. for usaspending.gov the consumer context directory is \"usaspending-website\")\n5. Run `npm link data-transparency-ui`\n6. If you notice the link is not working as expected you may need to clear your consumer context directory cache\n    1. Run `npm cache clean --force` in your consumer context directory\n    2. Repeat link steps above\n\n7. NOTE: After work is finished with the linked consumer context, it will be necessary to then unlink this library by doing the following:\n   1. Navigate to the consumer context directory again.\n   2. Run `npm unlink --no-save data-transparency-ui`\n   3. Navigate to the `data-transparency-ui/` root.\n   4. Run npm unlink path/to/your/\u003cconsumer-context/node-modules/react (example npm unlink ../\u003cconsumer-context\u003e/node_modules/react; to integrate with usaspending.gov use `npm unlink ../usaspending-website/node_modules/react`).\n   5. Undo the change in dtui package.json, back to \"main\" : \"dist/index.js\"\n   6. As an additional precaution, delete \u0026 reinstall the node modules in the consumer context and clear the cache to ensure a clean consumer context.\n\nOR use `npm pack`:\n\n1. Navigate to the `data-transparency-ui/` root\n2. Run npm pack (a .tgz package will be created in the root directory)\n3. Navigate to your consumer-context directory (for usaspending.gov, navigate to `usaspending-website/` root)\n4. npm install `../data-transparency-ui/\u003cnameofzippeddtuipackage.tgz`)\n\n\nNow, when you start your local development server in your consumer context, you will be using your local clone of this repository. 🙌\n\n### Node Version\n\nCurrent node version is v20\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffedspendingtransparency%2Fdata-transparency-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffedspendingtransparency%2Fdata-transparency-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffedspendingtransparency%2Fdata-transparency-ui/lists"}