Skip to content

feat: add reusable VaultFilterBar and filterVaults utility#515

Open
Tboy123-emm wants to merge 2 commits into
Disciplr-Org:mainfrom
Tboy123-emm:feature/vault-filter-bar
Open

feat: add reusable VaultFilterBar and filterVaults utility#515
Tboy123-emm wants to merge 2 commits into
Disciplr-Org:mainfrom
Tboy123-emm:feature/vault-filter-bar

Conversation

@Tboy123-emm

Copy link
Copy Markdown

Summary

Closes #275

Introduces a reusable controlled VaultFilterBar component and a pure filterVaults utility to eliminate per-page re-implementation of status/search filtering.

Changes

  • src/utils/filterVaults.ts: Pure filterVaults<T extends FilterableVault>(vaults, { status, query }) utility. Filters by VaultStatus | 'all' and case-insensitive name query (trims whitespace). Fully generic so it works for both Vaults and Dashboard vault arrays.
  • src/components/VaultFilterBar.tsx: Controlled component accepting value: VaultFilters and onChange. Status options derived from VAULT_STATUS_ORDER (single source of truth). Token-styled using CSS variables. Keyboard accessible <select> and <input type="search">. Search landmark with role="search" and aria-label.
  • src/pages/Vaults.tsx: Wired VaultFilterBar above the vault list in the data state; filter state managed with useState<VaultFilters>.
  • src/utils/__tests__/filterVaults.test.ts: 12 test cases covering all/status/query filtering, case-insensitivity, whitespace trimming, empty list, generic types, and all five statuses.
  • src/components/__tests__/VaultFilterBar.test.tsx: 8 test cases covering render, all options, controlled value reflection, onChange for select and input, search landmark, and keyboard accessibility.
  • design-system/documentation/getting-started.md: Added VaultFilterBar section with usage example, props table, and accessibility notes.

Test Results

✓ src/utils/__tests__/filterVaults.test.ts    (12 tests)
✓ src/components/__tests__/VaultFilterBar.test.tsx  (8 tests)

Test Files  2 passed (2)
      Tests  20 passed (20)

The pre-existing failure in Vaults.test.tsx > shows data state when vaults exist was already present before this PR (confirmed by running the test on the base commit without these changes).

@drips-wave

drips-wave Bot commented Jun 27, 2026

Copy link
Copy Markdown

@Tboy123-emm Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits

@GBOYEE

GBOYEE commented Jun 28, 2026

Copy link
Copy Markdown

@GBOYEE has applied to work on this issue as part of the Stellar Wave Program's 6th wave.

Implement following existing patterns and conventions. Add tests, ensure CI passes, and document any new API surface.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @GBOYEE to this issue.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Build a VaultFilterBar component to share status/search filtering between Vaults and Dashboard

2 participants