186 lines
4.7 KiB
Markdown
186 lines
4.7 KiB
Markdown
# GoodGo Platform - Web Client
|
|
|
|
> **EN**: Enterprise-grade web client for GoodGo microservices platform
|
|
> **VI**: Web client cấp doanh nghiệp cho nền tảng microservices GoodGo
|
|
|
|
## Features / Tính Năng
|
|
|
|
- ✅ **Brand Identity System** - Complete logo suite, favicons, and illustrations
|
|
- ✅ **Design System** - Professional design tokens with brand colors, gradients, and glassmorphism
|
|
- ✅ **UI Component Library** - Enhanced components with brand variants (Button, EmptyState, Loading States, Logo)
|
|
- ✅ **Dark/Light Theme** - Automatic theme switching with system preference
|
|
- ✅ **Internationalization** - Multi-language support (i18n ready)
|
|
- ✅ **TypeScript** - Full type safety
|
|
- ✅ **Tailwind CSS 4** - Modern utility-first styling
|
|
- ✅ **Next.js 14** - App Router with RSC
|
|
- ✅ **Accessibility** - WCAG 2.1 AA compliant
|
|
- ✅ **PWA Ready** - Progressive Web App support
|
|
|
|
## Tech Stack
|
|
|
|
- **Framework**: Next.js 14 (App Router)
|
|
- **Language**: TypeScript 5+
|
|
- **Styling**: Tailwind CSS 4 (CSS-first)
|
|
- **State Management**: Zustand
|
|
- **API Client**: `@goodgo/http-client`
|
|
- **Testing**: Vitest + Playwright
|
|
- **Component Development**: Storybook
|
|
|
|
##Development / Phát Triển
|
|
|
|
```bash
|
|
# Install dependencies / Cài đặt dependencies
|
|
pnpm install
|
|
|
|
# Start dev server / Khởi động dev server
|
|
pnpm dev
|
|
# → http://localhost:3000
|
|
|
|
# Start Storybook / Khởi động Storybook
|
|
pnpm storybook
|
|
# → http://localhost:6006
|
|
|
|
# Build for production / Build cho production
|
|
pnpm build
|
|
|
|
# Type checking / Kiểm tra kiểu
|
|
pnpm typecheck
|
|
|
|
# Lint / Kiểm tra lỗi
|
|
pnpm lint
|
|
```
|
|
|
|
## Environment Variables / Biến Môi Trường
|
|
|
|
Create `.env.local` file:
|
|
|
|
```bash
|
|
# API URL
|
|
NEXT_PUBLIC_API_URL=http://localhost/api/v1
|
|
```
|
|
|
|
## Brand Assets / Tài Sản Thương Hiệu
|
|
|
|
Brand assets are located in `/public/brand-assets/`:
|
|
|
|
- **Logos**: `/brand-assets/logo/` (full, icon, wordmark variants)
|
|
- **Icons**: `/brand-assets/icons/` (favicon)
|
|
- **Illustrations**: `/brand-assets/illustrations/` (empty state, error state)
|
|
|
|
Usage in components:
|
|
|
|
```tsx
|
|
import { BrandLogo } from '@/components/ui/brand-logo';
|
|
import { BRAND } from '@/lib/brand-constants';
|
|
|
|
// Logo component
|
|
<BrandLogo variant="full" size="lg" />
|
|
|
|
// Brand constants
|
|
const primaryColor = BRAND.colors.primary.hex; // #3B82F6
|
|
```
|
|
|
|
## UI Components / Components Giao Diện
|
|
|
|
### BrandLogo
|
|
```tsx
|
|
import { BrandLogo, BrandLogoLink } from '@/components/ui/brand-logo';
|
|
|
|
<BrandLogo variant="full" size="xl" />
|
|
<BrandLogoLink variant="icon" size="md" href="/" />
|
|
```
|
|
|
|
### Button with Brand Variants
|
|
```tsx
|
|
import { Button } from '@/components/ui/button';
|
|
|
|
<Button variant="brand">Get Started</Button>
|
|
<Button variant="glass">Learn More</Button>
|
|
```
|
|
|
|
### Empty State
|
|
```tsx
|
|
import { EmptyState, ErrorState } from '@/components/ui/empty-state';
|
|
|
|
<EmptyState
|
|
title="No items found"
|
|
description="Try adding some items"
|
|
action={{ label: 'Add Item', onClick: handleAdd }}
|
|
/>
|
|
```
|
|
|
|
### Loading States
|
|
```tsx
|
|
import {
|
|
BrandSpinner,
|
|
Skeleton,
|
|
SkeletonCard,
|
|
LoadingOverlay,
|
|
ProgressBar
|
|
} from '@/components/ui/loading-states';
|
|
|
|
<BrandSpinner size="lg" color="brand" />
|
|
<SkeletonCard />
|
|
<LoadingOverlay show={isLoading} message="Loading..." />
|
|
<ProgressBar value={progress} showLabel />
|
|
```
|
|
|
|
## Design System / Hệ Thống Thiết Kế
|
|
|
|
### Brand Colors
|
|
|
|
```css
|
|
/* Primary (Blue) - Tech & Trust */
|
|
--brand-primary: #3B82F6;
|
|
|
|
/* Secondary (Purple) - Innovation */
|
|
--brand-secondary: #8B5CF6;
|
|
|
|
/* Accent (Cyan) - Energy */
|
|
--brand-accent: #06B6D4;
|
|
```
|
|
|
|
### Tailwind Utilities
|
|
|
|
```tsx
|
|
// Brand colors
|
|
<div className="bg-brand-primary text-white" />
|
|
<div className="bg-brand-gradient" />
|
|
|
|
// Glassmorphism
|
|
<div className="bg-glass-bg backdrop-blur-glass border-glass-border" />
|
|
|
|
// Brand shadows
|
|
<div className="shadow-brand hover:shadow-brand-lg" />
|
|
```
|
|
|
|
## Project Structure / Cấu Trúc Dự Án
|
|
|
|
```
|
|
apps/web-client/
|
|
├── public/
|
|
│ └── brand-assets/ # Brand logos, icons, illustrations
|
|
├── src/
|
|
│ ├── app/ # Next.js App Router pages
|
|
│ ├── components/
|
|
│ │ └── ui/ # Reusable UI components
|
|
│ ├── lib/
|
|
│ │ └── brand-constants.ts # Brand helper functions
|
|
│ ├── styles/
|
|
│ │ └── theme.css # Design system tokens
|
|
│ ├── contexts/ # React contexts (Theme, etc.)
|
|
│ ├── hooks/ # Custom React hooks
|
|
│ ├── providers/ # Provider components
|
|
│ └── stores/ # Zustand stores
|
|
└── tailwind.config.js # Tailwind configuration
|
|
```
|
|
|
|
## Contributing / Đóng Góp
|
|
|
|
Please read [CONTRIBUTING.md](../../CONTRIBUTING.md) for details.
|
|
|
|
## License / Giấy Phép
|
|
|
|
Proprietary - GoodGo Platform
|
|
|