CCI Web Shared Library

📁 Component Structure

Components trong thư viện cci-web-app/shared đã được tổ chức lại để có thể chia sẻ an toàn giữa các MFE:

🔄 Non-Isolate Components (Có thể chia sẻ)

Các component này không ảnh hưởng đến MFE isolation và có thể dùng chung:

Base Components

• base-image/ - Component hiển thị hình ảnh với CDN support
• base-owl-carousel/ - Carousel component
• base-section/ - Section wrapper component
• base-radio-button-icon/ - Radio button với icon

UI Components

• chip/ - Chip/tag component
• radio-button-custom/ - Custom radio button
• percentage-decrease-tag/ - Tag hiển thị % giảm giá
• responsive-container/ - Container responsive

Interactive Components

• mobile-scroll-smooth/ - Smooth scroll cho mobile
• overlay/ - Overlay component

Layout Components

• safe-page/ - Safe page wrapper
• icon/cart/ - Cart icon component

Error Components

• error/page-not-found/ - 404 page component

🎯 Mục đích tổ chức:

1. Tái sử dụng: Components có thể dùng chung giữa các MFE
2. Không ảnh hưởng: Không chứa logic MFE-specific
3. Dễ bảo trì: Code được nhóm theo chức năng rõ ràng
4. Linh hoạt: Dễ dàng thêm/sửa/xóa components

📁 Cấu trúc thư mục:

cci-web/shared/src/lib/components/
├── index.ts                    # Export chính
└── non-isolate/               # Components không ảnh hưởng MFE
    ├── index.ts               # Export non-isolate components
    ├── base-image/            # Base image component
    ├── base-owl-carousel/     # Carousel component
    ├── base-section/          # Section wrapper
    ├── base-radio-button-icon/ # Radio button với icon
    ├── chip/                  # Chip component
    ├── error/                 # Error components
    ├── icon/                  # Icon components
    ├── mobile-scroll-smooth/  # Smooth scroll
    ├── overlay/               # Overlay component
    ├── percentage-decrease-tag/ # Percentage tag
    ├── radio-button-custom/   # Custom radio button
    ├── responsive-container/  # Responsive container
    └── safe-page/            # Safe page wrapper

📝 Cách sử dụng:

// Import từ cci-web/shared
import { BaseImageComponent } from "@cci-web/shared";
import { ChipComponent } from "@cci-web/shared";
import { SafePageComponent } from "@cci-web/shared";

// Hoặc import cụ thể
import { BaseImageComponent } from "@cci-web/shared/lib/components/non-isolate/base-image";

⚠️ Lưu ý:

• Các component này sử dụng ENVIRONMENT provider để lấy cấu hình
• Cần cung cấp ENVIRONMENT provider khi sử dụng
• Không chứa business logic MFE-specific
• Có thể dùng chung giữa các MFE khác nhau