bytelyst/learning_ai_common_plat
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
b2e45380ec
learning_ai_common_plat/packages/ui/package.json
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

235 lines
6.9 KiB
JSON
Raw Blame History

{
"name": "@bytelyst/ui",
"version": "0.2.0",
"type": "module",
"scripts": {
"storybook": "storybook dev -p 6006",
"build-storybook": "storybook build",
"build": "tsc"
},
"exports": {
".": {
"types": "./dist/index.d.ts",
"import": "./dist/index.js"
},
"./button": {
"types": "./dist/components/Button.d.ts",
"import": "./dist/components/Button.js"
},
"./card-button": {
"types": "./dist/components/CardButton.d.ts",
"import": "./dist/components/CardButton.js"
},
"./page-header": {
"types": "./dist/components/PageHeader.d.ts",
"import": "./dist/components/PageHeader.js"
},
"./section": {
"types": "./dist/components/Section.d.ts",
"import": "./dist/components/Section.js"
},
"./toolbar": {
"types": "./dist/components/Toolbar.d.ts",
"import": "./dist/components/Toolbar.js"
},
"./filter-bar": {
"types": "./dist/components/FilterBar.d.ts",
"import": "./dist/components/FilterBar.js"
},
"./form-section": {
"types": "./dist/components/FormSection.d.ts",
"import": "./dist/components/FormSection.js"
},
"./field-grid": {
"types": "./dist/components/FieldGrid.d.ts",
"import": "./dist/components/FieldGrid.js"
},
"./alert-banner": {
"types": "./dist/components/AlertBanner.d.ts",
"import": "./dist/components/AlertBanner.js"
},
"./skeleton": {
"types": "./dist/components/Skeleton.d.ts",
"import": "./dist/components/Skeleton.js"
},
"./entity-card": {
"types": "./dist/components/EntityCard.d.ts",
"import": "./dist/components/EntityCard.js"
},
"./metric-card": {
"types": "./dist/components/MetricCard.d.ts",
"import": "./dist/components/MetricCard.js"
},
"./action-menu": {
"types": "./dist/components/ActionMenu.d.ts",
"import": "./dist/components/ActionMenu.js"
},
"./drawer": {
"types": "./dist/components/Drawer.d.ts",
"import": "./dist/components/Drawer.js"
},
"./app-shell": {
"types": "./dist/components/AppShell.d.ts",
"import": "./dist/components/AppShell.js"
},
"./icon-button": {
"types": "./dist/components/IconButton.d.ts",
"import": "./dist/components/IconButton.js"
},
"./toast": {
"types": "./dist/components/Toast.d.ts",
"import": "./dist/components/Toast.js"
},
"./modal": {
"types": "./dist/components/Modal.d.ts",
"import": "./dist/components/Modal.js"
},
"./confirm-dialog": {
"types": "./dist/components/ConfirmDialog.d.ts",
"import": "./dist/components/ConfirmDialog.js"
},
"./badge": {
"types": "./dist/components/Badge.d.ts",
"import": "./dist/components/Badge.js"
},
"./status-badge": {
"types": "./dist/components/StatusBadge.d.ts",
"import": "./dist/components/StatusBadge.js"
},
"./empty-state": {
"types": "./dist/components/EmptyState.d.ts",
"import": "./dist/components/EmptyState.js"
},
"./input": {
"types": "./dist/components/Input.d.ts",
"import": "./dist/components/Input.js"
},
"./field": {
"types": "./dist/components/Field.d.ts",
"import": "./dist/components/Field.js"
},
"./textarea": {
"types": "./dist/components/Textarea.d.ts",
"import": "./dist/components/Textarea.js"
},
"./card": {
"types": "./dist/components/Card.d.ts",
"import": "./dist/components/Card.js"
},
"./panel": {
"types": "./dist/components/Panel.d.ts",
"import": "./dist/components/Panel.js"
},
"./surface": {
"types": "./dist/components/Surface.d.ts",
"import": "./dist/components/Surface.js"
},
"./list-item-button": {
"types": "./dist/components/ListItemButton.d.ts",
"import": "./dist/components/ListItemButton.js"
},
"./timeline": {
"types": "./dist/components/Timeline.d.ts",
"import": "./dist/components/Timeline.js"
},
"./diff-card": {
"types": "./dist/components/DiffCard.d.ts",
"import": "./dist/components/DiffCard.js"
},
"./label": {
"types": "./dist/components/Label.d.ts",
"import": "./dist/components/Label.js"
},
"./select": {
"types": "./dist/components/Select.d.ts",
"import": "./dist/components/Select.js"
},
"./tabs": {
"types": "./dist/components/Tabs.d.ts",
"import": "./dist/components/Tabs.js"
},
"./segmented-control": {
"types": "./dist/components/SegmentedControl.d.ts",
"import": "./dist/components/SegmentedControl.js"
},
"./tooltip": {
"types": "./dist/components/Tooltip.d.ts",
"import": "./dist/components/Tooltip.js"
},
"./dropdown-menu": {
"types": "./dist/components/DropdownMenu.d.ts",
"import": "./dist/components/DropdownMenu.js"
},
"./checkbox": {
"types": "./dist/components/Checkbox.d.ts",
"import": "./dist/components/Checkbox.js"
},
"./radio-group": {
"types": "./dist/components/RadioGroup.d.ts",
"import": "./dist/components/RadioGroup.js"
},
"./switch": {
"types": "./dist/components/Switch.d.ts",
"import": "./dist/components/Switch.js"
},
"./data-list": {
"types": "./dist/components/DataList.d.ts",
"import": "./dist/components/DataList.js"
},
"./data-table": {
"types": "./dist/components/DataTable.d.ts",
"import": "./dist/components/DataTable.js"
},
"./separator": {
"types": "./dist/components/Separator.d.ts",
"import": "./dist/components/Separator.js"
},
"./sidebar": {
"types": "./dist/components/Sidebar.d.ts",
"import": "./dist/components/Sidebar.js"
},
"./stat-card": {
"types": "./dist/components/StatCard.d.ts",
"import": "./dist/components/StatCard.js"
},
"./loading-spinner": {
"types": "./dist/components/LoadingSpinner.d.ts",
"import": "./dist/components/LoadingSpinner.js"
}
},
"peerDependencies": {
"react": "^18.0.0 || ^19.0.0",
"react-dom": "^18.0.0 || ^19.0.0"
},
"dependencies": {
"@radix-ui/react-alert-dialog": "^1.1.0",
"@radix-ui/react-checkbox": "^1.3.0",
"@radix-ui/react-dialog": "^1.1.0",
"@radix-ui/react-dropdown-menu": "^2.1.0",
"@radix-ui/react-radio-group": "^1.3.0",
"@radix-ui/react-slot": "^1.1.0",
"@radix-ui/react-switch": "^1.2.0",
"@radix-ui/react-tabs": "^1.1.0",
"@radix-ui/react-tooltip": "^1.2.0",
"clsx": "^2.1.0",
"lucide-react": "^0.460.0"
},
"devDependencies": {
"@storybook/addon-a11y": "^8.5.0",
"@storybook/addon-essentials": "^8.5.0",
"@storybook/react": "^8.5.0",
"@storybook/react-vite": "^8.5.0",
"@types/react": "^19.0.0",
"@types/react-dom": "^19.0.0",
"storybook": "^8.5.0",
"typescript": "^5.7.0",
"vite": "^6.0.0"
},
"main": "./dist/index.js",
"types": "./dist/index.d.ts",
"files": [
"dist",
"README.md"
]
}
Reference in New Issue View Git Blame Copy Permalink