71f194cc4d
Add Loading & Error UI components for web application
...
Implemented comprehensive loading and error handling components for the
WellNuo web application with full test coverage.
Components added:
- LoadingSpinner: Configurable spinner with sizes, colors, and variants
* LoadingOverlay: Full-screen loading with backdrop options
* InlineLoader: Small inline spinner for buttons
* PageLoader: Full-page centered loading state
- ErrorMessage: Inline error messages with severity levels
* FullScreenError: Full-page error states with retry/back actions
* FieldError: Form field validation errors
* ErrorBoundaryFallback: Error boundary fallback component
* EmptyState: Empty data state component
- Skeleton: Animated loading skeletons
* SkeletonAvatar: Circular avatar skeleton
* SkeletonText: Multi-line text skeleton
* SkeletonCard: Card-style skeleton
* SkeletonList: List of skeleton cards
* SkeletonTable: Table skeleton with rows/columns
* SkeletonDashboard: Dashboard-style skeleton layout
* SkeletonForm: Form skeleton with fields
Technical details:
- Tailwind CSS styling with cn() utility function
- Full accessibility support (ARIA labels, roles)
- Comprehensive test coverage (57 tests, all passing)
- TypeScript strict mode compliance
- Added clsx and tailwind-merge dependencies
Files:
- web/components/ui/LoadingSpinner.tsx
- web/components/ui/ErrorMessage.tsx
- web/components/ui/Skeleton.tsx
- web/components/ui/index.ts
- web/lib/utils.ts
- web/components/ui/__tests__/*.test.tsx
🤖 Generated with [Claude Code](https://claude.com/claude-code )
Co-Authored-By: Claude <noreply@anthropic.com>
2026-01-31 18:26:28 -08:00
72661f6f06
Initialize Next.js web application with Tailwind CSS
...
- Set up Next.js 16 with TypeScript and App Router
- Configure Tailwind CSS for styling
- Add ESLint and Prettier for code quality
- Set up Jest and React Testing Library
- Create basic project structure (app/, components/, lib/)
- Add initial home page with WellNuo branding
- Configure TypeScript with strict mode
- All tests passing and linting clean
🤖 Generated with [Claude Code](https://claude.com/claude-code )
Co-Authored-By: Claude <noreply@anthropic.com>
2026-01-31 17:05:04 -08:00
