diff --git a/dashboards/tracker-web/package.json b/dashboards/tracker-web/package.json index 8093440d..e249bb64 100644 --- a/dashboards/tracker-web/package.json +++ b/dashboards/tracker-web/package.json @@ -28,9 +28,11 @@ "@bytelyst/config": "workspace:*", "@bytelyst/dashboard-components": "workspace:*", "@bytelyst/data-table": "workspace:*", + "@bytelyst/design-tokens": "workspace:*", "@bytelyst/errors": "workspace:*", "@bytelyst/telemetry-client": "workspace:*", "@bytelyst/logger": "workspace:*", + "@bytelyst/ui": "workspace:*", "clsx": "^2.1.1", "next": "16.1.6", "posthog-js": "^1.345.5", diff --git a/dashboards/tracker-web/src/__tests__/primitives-adapter.test.ts b/dashboards/tracker-web/src/__tests__/primitives-adapter.test.ts new file mode 100644 index 00000000..a4414a9c --- /dev/null +++ b/dashboards/tracker-web/src/__tests__/primitives-adapter.test.ts @@ -0,0 +1,90 @@ +/** + * Smoke test for Primitives adapter (UX-1) + * + * Verifies that the @bytelyst/ui components are properly re-exported through + * the Primitives adapter and can be imported in tracker-web. + * + * @see docs/roadmaps/UX_INTEGRATION_BYTELYST.md (UX-1, task 1.4) + */ + +import { describe, it, expect } from 'vitest'; +import { + Button, + StatusBadge, + StatusDot, + Input, + Field, + FieldLabel, + FieldError, + FieldDescription, + Modal, + ConfirmDialog, + Badge, + EmptyState, + Skeleton, + TableSkeleton, + MetricCard, + Toast, + ToastProvider, + useToast, + toast, + dismissToast, +} from '@/components/ui/Primitives'; + +describe('Primitives adapter smoke test', () => { + it('should export Button component', () => { + expect(Button).toBeDefined(); + }); + + it('should export StatusBadge component', () => { + expect(StatusBadge).toBeDefined(); + expect(StatusDot).toBeDefined(); + }); + + it('should export Input component', () => { + expect(Input).toBeDefined(); + }); + + it('should export Field components', () => { + expect(Field).toBeDefined(); + expect(FieldLabel).toBeDefined(); + expect(FieldError).toBeDefined(); + expect(FieldDescription).toBeDefined(); + }); + + it('should export Modal component', () => { + expect(Modal).toBeDefined(); + }); + + it('should export ConfirmDialog component', () => { + expect(ConfirmDialog).toBeDefined(); + }); + + it('should export Badge component', () => { + expect(Badge).toBeDefined(); + }); + + it('should export EmptyState component', () => { + expect(EmptyState).toBeDefined(); + }); + + it('should export Skeleton components', () => { + expect(Skeleton).toBeDefined(); + expect(TableSkeleton).toBeDefined(); + }); + + it('should export MetricCard component', () => { + expect(MetricCard).toBeDefined(); + }); + + it('should export Toast components and hooks', () => { + expect(Toast).toBeDefined(); + expect(ToastProvider).toBeDefined(); + expect(useToast).toBeDefined(); + expect(typeof useToast).toBe('function'); + expect(toast).toBeDefined(); + expect(typeof toast).toBe('function'); + expect(dismissToast).toBeDefined(); + expect(typeof dismissToast).toBe('function'); + }); +}); diff --git a/dashboards/tracker-web/src/app/globals.css b/dashboards/tracker-web/src/app/globals.css index fa0af52a..b207e926 100644 --- a/dashboards/tracker-web/src/app/globals.css +++ b/dashboards/tracker-web/src/app/globals.css @@ -89,6 +89,26 @@ --chart-5: oklch(0.645 0.246 16.439); } +/* Token bridge: map @bytelyst/ui --bl-* tokens to tracker's shadcn-style OKLCH vars */ +:root, .dark { + --bl-accent: var(--primary); + --bl-accent-foreground: var(--primary-foreground); + --bl-bg-canvas: var(--background); + --bl-surface-card: var(--card); + --bl-text-primary: var(--foreground); + --bl-text-secondary: var(--muted-foreground); + --bl-text-tertiary: var(--muted-foreground); + --bl-border: var(--border); + --bl-danger: var(--destructive); + --bl-radius-control: var(--radius-md); + --bl-radius-card: var(--radius-lg); + --bl-chart-1: var(--chart-1); + --bl-chart-2: var(--chart-2); + --bl-chart-3: var(--chart-3); + --bl-chart-4: var(--chart-4); + --bl-chart-5: var(--chart-5); +} + @layer base { * { @apply border-border outline-ring/50; diff --git a/dashboards/tracker-web/src/components/ui/Primitives.tsx b/dashboards/tracker-web/src/components/ui/Primitives.tsx new file mode 100644 index 00000000..9ece0065 --- /dev/null +++ b/dashboards/tracker-web/src/components/ui/Primitives.tsx @@ -0,0 +1,59 @@ +/** + * Primitives adapter for @bytelyst/ui components. + * + * This file re-exports shared UI components from @bytelyst/ui, providing a single + * import point for the tracker-web application. All app code should import from this + * adapter rather than directly from @bytelyst/ui to enable future UI-drift ratcheting. + * + * @see docs/roadmaps/UX_INTEGRATION_BYTELYST.md (UX-1) + */ + +export { Button, type ButtonProps } from '@bytelyst/ui'; + +export { Input, type InputProps } from '@bytelyst/ui'; + +export { + Field, + FieldContent, + FieldDescription, + FieldError, + FieldGroup, + FieldLabel, + FieldTitle, + type FieldContentProps, + type FieldDescriptionProps, + type FieldErrorProps, + type FieldGroupProps, + type FieldLabelProps, + type FieldProps, + type FieldTitleProps, +} from '@bytelyst/ui'; + +export { Modal, type ModalProps } from '@bytelyst/ui'; + +export { ConfirmDialog, type ConfirmDialogProps } from '@bytelyst/ui'; + +export { Badge, type BadgeProps } from '@bytelyst/ui'; + +export { StatusBadge, StatusDot, type StatusBadgeProps, type StatusTone } from '@bytelyst/ui'; + +export { EmptyState, type EmptyStateProps } from '@bytelyst/ui'; + +export { + Skeleton, + SkeletonGroup, + TableSkeleton, + type SkeletonProps, + type SkeletonGroupProps, +} from '@bytelyst/ui'; + +export { MetricCard, type MetricCardProps } from '@bytelyst/ui'; + +export { + Toast, + ToastProvider, + useToast, + toast, + dismissToast, + type ToastMessage, +} from '@bytelyst/ui'; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 8f3a6c3f..fcde6f29 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -252,6 +252,9 @@ importers: '@bytelyst/data-table': specifier: workspace:* version: link:../../packages/data-table + '@bytelyst/design-tokens': + specifier: workspace:* + version: link:../../packages/design-tokens '@bytelyst/errors': specifier: workspace:* version: link:../../packages/errors @@ -261,6 +264,9 @@ importers: '@bytelyst/telemetry-client': specifier: workspace:* version: link:../../packages/telemetry-client + '@bytelyst/ui': + specifier: workspace:* + version: link:../../packages/ui clsx: specifier: ^2.1.1 version: 2.1.1