@aircall/blocks/skills/aircall-blocks/migrate-dashboard/catch-up-checklist/SKILL.md

Aircall Blocks — higher-level UI compositions built on @aircall/ds

---
name: aircall-blocks/migrate-dashboard/catch-up-checklist
description: >
  Verify that already-migrated dashboard / extension code uses the CURRENT shared
  @aircall/ds + @aircall/blocks components and props — not an earlier or interim
  pattern. Load when someone wants to double-check a codebase that is already off
  @dashboard/library against the latest components (e.g. after a DS/blocks release),
  or to confirm shared-component adoption. This is a VERIFICATION pass, NOT a
  migration — to convert @dashboard/library imports, use aircall-blocks/migrate-dashboard.
type: sub-skill
library: aircall-blocks
requires:
  - aircall-blocks/migrate-dashboard
---

# Catch-up checklist — are you using the shared component, the latest way?

This is **not** a migration skill. It is for code that is **already** on `@aircall/ds` /
`@aircall/blocks` (the extension especially). Newer releases keep adding components and
props that supersede patterns written earlier — this checklist confirms each area uses the
current shared component the intended way, and points you to the skill that does the swap.

## How to run

For each row:

1. **`grep`** the hint to find candidates in the code.
2. **Check** whether the current pattern is missing or on an older shape (the "Red flag" column).
3. **Apply** the shared component/prop; open the linked skill for the detailed swap.
4. **Verify green** — `tsc --noEmit`, tests, lint.

Skip a row cleanly if the area isn't present in the codebase — this is a spot-check list, not a required sweep.

## Keeping this list evolutive (maintenance rules)

- **Add a row** whenever a release supersedes an existing pattern — a new component *or* a new prop/capability on one you already use.
- **`Added`** is write-once: the month a row was introduced. Never bump it — it lets someone who ran the checklist last quarter jump to what's new. (This is not a version stamp on the skill; rows are keyed by pattern, not version.)
- **Retire a row** once its old pattern is effectively gone from consumers — prune, don't accumulate.
- Keep every row **one line**. Deep detail lives in the linked skill, not here. When a group gets long, split it.

## Layout & navigation

| Use (current) | Red flag to look for | Detail / skill | Added |
| --- | --- | --- | --- |
| `DashboardPageHeader` | a hand-rolled header `<div>` with title + actions, or the legacy `PageHeader` from `@dashboard/library` | `@aircall/blocks#aircall-blocks/migrate-dashboard/page-header` | 2026-07 |
| `StandalonePage` | a full-screen page not wrapped in it | `@aircall/blocks#aircall-blocks/migrate-dashboard/dashboard-page` | 2026-07 |
| `DashboardPageContent` at extension page level | an extension page that skips it, re-renders its own outer `DashboardPage`/sidebar shell, or still passes `className="h-full"` (now baked into the component) | in an extension the `DashboardPage` shell is provided by the Sandbox and (in integrate mode) by dashboard-v4, so each page returns just `<DashboardPageContent data-test="…">` + `DashboardPageHeader` + `DashboardPageMain`; `@aircall/blocks#aircall-blocks/migrate-dashboard/dashboard-page` | 2026-07 |
| `Tabs` (`@aircall/ds`) | `@aircall/tractor` Tab imports or a custom tab bar (low priority — mostly done) | `@aircall/ds#aircall-ds/migrate-tractor/tabs` | 2026-07 |

## Data display

| Use (current) | Red flag to look for | Detail / skill | Added |
| --- | --- | --- | --- |
| `Card` (`@aircall/ds`) | a custom card `<div>` with border/shadow/padding on grid pages | `@aircall/blocks#aircall-blocks/migrate-dashboard/card` | 2026-07 |
| `SettingCard` (`@aircall/blocks`) | `Paper` / `PaperForm` from `@dashboard/library`, or a settings section already migrated to raw `Card` with a hand-rolled title/description/toggle or a hand-placed save bar | use `SettingCard` (+ parts): auto level backgrounds + level-aware title, nesting auto-detected, `form.CardSaveBar` as a direct child; `@aircall/blocks#aircall-blocks/migrate-dashboard/setting-card` | 2026-07 |
| `DataTable` infinite scroll | a "Load more" button, or `DataTable` without `virtualizeRows`+`fillHeight` on a paginated table | pass `virtualizeRows fillHeight` + `onFetchMore`; `@aircall/blocks#aircall-blocks/migrate-dashboard/data-table` | 2026-07 |
| `DataTable` selection → `ActionBar` | old `enableRowSelection`/`rowSelection`, or a custom bulk-action bar | use `selectionMode`/`selectedKeys` (drives `ActionBar`); `@aircall/blocks#aircall-blocks/migrate-dashboard/data-table` | 2026-07 |
| `HoverCard` | a custom info-on-hover popup (old `InfoPopup`) | `@aircall/blocks#aircall-blocks/migrate-dashboard/info-popup` | 2026-07 |
| Re-evaluate `List`/`ListItem` | an `ItemGroup`/`Item` list that is really editable data or tabular data | **check with a designer**: could be `InlineEditMultiselect` or `Table`/`DataTable` instead — `@aircall/blocks#aircall-blocks/migrate-dashboard/data-table` | 2026-07 |

## Forms

| Use (current) | Red flag to look for | Detail / skill | Added |
| --- | --- | --- | --- |
| `Form*Field` family | `useState`-per-field, or bare ds `Field`/`Input` wired by hand | input/select/combobox/multi-combobox/textarea/switch/radio/slider/toggle-group/OTP/numeric; `@aircall/blocks#aircall-blocks/migrate-dashboard/form-wizard` | 2026-07 |
| `FormArrayField` | manual add/remove-row state for dynamic lists | `@aircall/blocks#aircall-blocks/migrate-dashboard/form-wizard` | 2026-07 |
| `SubmitButton` | manual `disabled`/`loading` wiring on a submit button | reads `canSubmit`/`isSubmitting` automatically; `@aircall/blocks#aircall-blocks/migrate-dashboard/form-wizard` | 2026-07 |
| Field label/description affordances | labels without the newer affordances | `orientation`/`controlPosition` inline layouts, `FieldLabelInfo` (ⓘ), `FieldLabelAside`, contextual vs instructional descriptions; `@aircall/ds#aircall-ds/migrate-tractor/form-and-field` | 2026-07 |
| `DataCombobox` | a hand-rolled async/paginated combobox, or a custom table filter | `@aircall/ds#aircall-ds/migrate-tractor/combobox` (§5c) | 2026-07 |

## Inputs

| Use (current) | Red flag to look for | Detail / skill | Added |
| --- | --- | --- | --- |
| `NumericInput` | `<Input type="number">`, a custom stepper, or the legacy `NumberInput` from `@dashboard/library`, for numeric fields | prefix/suffix + up/down controls; via `FormNumericField` in forms | 2026-07 |

## File upload

| Use (current) | Red flag to look for | Detail / skill | Added |
| --- | --- | --- | --- |
| `Dropzone` | `react-dropzone` / a custom drag-and-drop wrapper/ Dropzone from dashboard/library | `@aircall/ds#aircall-ds/migrate-tractor/dropzone` | 2026-07 |
| `Attachment` | a custom file-row/list after uploading a file via dropzone | `AttachmentGroup` + `Attachment`; `@aircall/ds#aircall-ds/adopt-attachment` | 2026-07 |

## Links & navigation

| Use (current) | Red flag to look for | Detail / skill | Added |
| --- | --- | --- | --- |
| `Anchor` or `Button variant="ghost"` | `Button variant="link"` | `Anchor` if it navigates to a page; `Button variant="ghost"` (or another variant) if it triggers an action — `@aircall/ds#aircall-ds/migrate-tractor/link` | 2026-07 |

## Audio player

| Use (current) | Red flag to look for | Detail / skill | Added |
| --- | --- | --- | --- |
| Audio primitives (`@aircall/ds`) | an old Tractor or custom audio player | refer to `@aircall/ds#aircall-ds/migrate-audio-player` and pick the pattern that best fits the current implementation; a skip button is available, and multiple players wrap in `AudioPlayerManager` | 2026-07 |

## Editable

| Use (current) | Red flag to look for | Detail / skill | Added |
| --- | --- | --- | --- |
| `InlineEdit` family | `EditableInput` / `EditableTextarea` / `EditableSelect` from `@dashboard/library`, or a custom click-to-edit control | `InlineEditInput`/`InlineEditTextarea`/`InlineEditSelect`, multi via `InlineEditMultiselect` (data-driven accessor API like `DataCombobox`) | 2026-07 |

## Business tags

| Use (current) | Red flag to look for | Detail / skill | Added |
| --- | --- | --- | --- |
| `SentimentBadge` | a custom mood/sentiment pill | `@aircall/blocks` leaf component | 2026-07 |
| `ScoreBadge` | a custom score/percentage pill | `@aircall/blocks` leaf component | 2026-07 |
| `RoleBadge` | a custom role tag | `<RoleBadge role="admin" />` (`@aircall/blocks`) | 2026-07 |
| `Badge` / `BadgeGroup` | custom tag chips or a stacked tag row | `Badge` with `legacyColor` (stored hex) or `color`+`tone`; `BadgeGroup` for a stack — `@aircall/ds#aircall-ds/migrate-tractor/badge` | 2026-07 |