Sergei
71f194cc4d
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>
41 lines
975 B
JSON
41 lines
975 B
JSON
{
|
|
"name": "wellnuo-web",
|
|
"version": "0.1.0",
|
|
"private": true,
|
|
"scripts": {
|
|
"dev": "next dev",
|
|
"build": "next build",
|
|
"start": "next start",
|
|
"lint": "next lint",
|
|
"format": "prettier --write .",
|
|
"type-check": "tsc --noEmit",
|
|
"test": "jest",
|
|
"test:watch": "jest --watch"
|
|
},
|
|
"dependencies": {
|
|
"clsx": "^2.1.1",
|
|
"next": "^16.1.6",
|
|
"react": "^19.0.0",
|
|
"react-dom": "^19.0.0",
|
|
"tailwind-merge": "^3.4.0",
|
|
"zustand": "^5.0.2"
|
|
},
|
|
"devDependencies": {
|
|
"@testing-library/jest-dom": "^6.9.1",
|
|
"@testing-library/react": "^16.3.2",
|
|
"@types/jest": "^30.0.0",
|
|
"@types/node": "^22",
|
|
"@types/react": "^19",
|
|
"@types/react-dom": "^19",
|
|
"autoprefixer": "^10.4.20",
|
|
"eslint": "^9",
|
|
"eslint-config-next": "15.1.6",
|
|
"jest": "^30.2.0",
|
|
"jest-environment-jsdom": "^30.2.0",
|
|
"postcss": "^8.4.49",
|
|
"prettier": "^3.4.2",
|
|
"tailwindcss": "^3.4.17",
|
|
"typescript": "^5"
|
|
}
|
|
}
|