saravanakumardb1
a55b819533
feat(ui): @bytelyst/ui@0.2.0 — Skeleton/SkeletonGroup/LoadingDots/SearchInput
...
Wave 9.D additions to the shared UI primitive package.
──────────────────────────────────────────────────────────────────
Skeleton — `card` shape added + new <SkeletonGroup> orchestrator
──────────────────────────────────────────────────────────────────
packages/ui/src/components/Skeleton.tsx
- 4 shape variants: text / block / circle / **card**
The `card` variant uses min-h-32 + rounded-2xl + a subtle
border so a real <Card> can swap in without CLS.
- New <SkeletonGroup loading fallback>{children}</SkeletonGroup>
component handles the fade-out → content swap centrally. Use
one per loadable region rather than sprinkling <Skeleton/>
everywhere. Supports `keepContent` for re-fetch flows.
- In-source TODO #2 marker for the pending vitest setup.
──────────────────────────────────────────────────────────────────
LoadingDots — three-dot inline pulse
──────────────────────────────────────────────────────────────────
packages/ui/src/components/LoadingDots.tsx (new)
- sm / md / lg sizes
- `color` override, defaults to var(--bl-accent)
- motion-safe:animate-bounce respects prefers-reduced-motion
- role="status" + sr-only label for screen readers
- inline-flex layout — composes inside chat bubbles + buttons
──────────────────────────────────────────────────────────────────
SearchInput — themed search field with suggestions slot
──────────────────────────────────────────────────────────────────
packages/ui/src/components/SearchInput.tsx (new)
- Leading Search icon + clear-x button (visible while value !== '')
- role="searchbox", proper aria-label fallback to placeholder
- 3 size scales matching ButtonSize convention
- `suggestions` slot for typeahead lists below
- Forwards ref to <input> for imperative focus
- Consolidates the bespoke search-field pattern from notes,
fastgap, voice, jarvisjr (roadmap §2.2).
──────────────────────────────────────────────────────────────────
Package hygiene
──────────────────────────────────────────────────────────────────
- package.json: 0.1.11 → 0.2.0
- tsconfig.json: added DOM + DOM.Iterable libs to match
motion/data-viz packages (required for e.target.value typing)
- src/index.ts: exported SkeletonGroup, LoadingDots, SearchInput
──────────────────────────────────────────────────────────────────
Quality gates
──────────────────────────────────────────────────────────────────
✓ tsc --noEmit clean
✓ tsc build clean (no errors)
✓ No regression to existing ui exports
──────────────────────────────────────────────────────────────────
Roadmap tracker — 5 boxes flipped (§11)
──────────────────────────────────────────────────────────────────
9.D.1 Skeleton extended with card shape
9.D.2 SkeletonGroup orchestrator
9.D.3 EmptyState verified (already shipped in 0.1.x)
9.D.4 SearchInput added
9.D.6 LoadingDots added + LoadingSpinner verified
§11.2 counter rewrote by scripts/count-roadmap-progress.ts:
Wave 9 Data: 0/42 → 5/42 (12%)
TOTAL: 5/202 → 10/202 (5%)
Open TODOs (§11.2.A):
#2 Add vitest + happy-dom + @testing-library/react to
@bytelyst/ui devDeps; write unit tests for the new
Skeleton/SkeletonGroup/LoadingDots/SearchInput surfaces.
#4 Republish @bytelyst/ui@0.2.0 to Gitea registry once #1
(publish workflow) closes.
Showcase demos for these primitives land in the next showcase
commit (9.D.7–9.D.9).
2026-05-27 15:45:44 -07:00
