Dependency List
Packages with their update and vulnerability state. Severity outranks staleness in the sort, because ordering by how out of date things are buries a critical advisory behind forty patch bumps.
src/components/ui/dependency-list.tsxAbout
From the component's own source, where it was written.
Package dependencies with their update and vulnerability state.
Severity outranks staleness in the sort. A list ordered by how out of date things are buries a critical advisory behind forty cosmetic patch bumps, which is precisely backwards from how anyone triages this.
The update badge distinguishes major from minor, because "12 outdated" is not actionable while "1 major, 11 patch" is — one is an afternoon and the other is a sprint.
Install
npx astralyx-ui add dependency-list
Usage
import { DependencyList } from '@/components/ui/dependency-list'
<DependencyList dependencies={deps} />Composer
Change the props and the source below follows.
- 7.5.17.6.3minorhigh
semverhigh severity · GHSA-c2qf-rxjj-qqgw
- 7.4.18.0.1major
vitedev - 4.1.04.3.3minor
tailwindcss - 1.22.01.22.4patch
shiki - 0.9.2current
oxlintdev - 19.2.8current
react
<DependencyList dependencies={deps} searchable={true} />Examples
Packages
<DependencyList dependencies={deps} />API
Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.
DependencyList
Extends ComponentProps<'div'>.
| Prop | Type | Default | Description |
|---|---|---|---|
| dependencies | Dependency[] | required | { name, current, latest?, update?, dev?, vulnerability?, homepage? }. |
| searchable | boolean | true | — |
| devLabel | ReactNode | 'dev' | Badge on a dev-only dependency. |
| currentLabel | ReactNode | 'current' | Marks a package already on its latest version. |
| filterPlaceholder | string | 'Filter packages' | — |
| filterLabel | string | 'Filter packages' | Accessible name for the filter field. |
| emptyMessage | ReactNode | 'No packages match.' | — |
| homepageLabel | (name: string) => string | DEFAULT_HOMEPAGE_LABEL | Accessible name for a package's homepage link. |
Functions
| Function | Signature | Description |
|---|---|---|
| updateKind | (current: string, latest?: string) => 'major' | 'minor' | 'patch' | null | Exported. Returns null for anything unparseable rather than guessing. |
Types
Dependency
Package dependencies with their update and vulnerability state.
| Field | Type | Description |
|---|---|---|
| name | string | — |
| current | string | — |
| latest? | string | — |
| update? | 'major' | 'minor' | 'patch' | null | Derived from the version pair when omitted. Major versus patch is the difference between a sprint and an afternoon, so "12 outdated" is not the useful number. |
| dev? | boolean | — |
| vulnerability? | { severity: 'critical' | 'high' | 'moderate' | 'low'; id?: string } | — |
| size? | number | — |
| homepage? | string | — |
Behaviour
| Topic | Detail | Description |
|---|---|---|
| sort | severity, then update size, then name | Fixed — this is a triage order, not a preference. |