igloo-d2c-components 1.0.50 → 1.0.51

package/README.md

@@ -18,6 +18,7 @@ Reusable React component library with **centralized tenant themes** and tenant-a
 - [Hooks & Utilities](#-hooks--utilities)
 - [Asset Management](#-asset-management)
 - [Integration Guide](#-integration-guide)
+  - [Next.js Integration](#nextjs-integration)
   - [Multi-Tenant Architecture](#multi-tenant-architecture)
   - [Checkout Flow Integration](#checkout-flow-integration)
   - [Recommendations Feature](#recommendations-feature)
@@ -49,7 +50,7 @@ We've built a **multi-tenant B2C insurance platform** that enables rapid deploym
 
 ### Key Highlights
 
-- 🎨 **Centralized Themes** - All tenant themes (Igloo, CIMB, AmmetLife) in one library
+- 🎨 **Centralized Themes** - Igloo and AmMetLife tenant themes in one library
 - 🧩 **Tenant-Aware Components** - Automatically adapt to tenant branding
 - 📦 **ES2015 Compatible** - Works with older webpack configurations
 - 🔧 **Unminified Output** - Better debugging and tree-shaking
@@ -62,7 +63,6 @@ We've built a **multi-tenant B2C insurance platform** that enables rapid deploym
 | ------------- | ---- | ----------------------- |
 | **Igloo**     | 8000 | Default insurance brand |
 | **AmmetLife** | 8001 | Life insurance partner  |
-| **CIMB**      | 8002 | Banking partner         |
 
 ---
 
@@ -137,7 +137,6 @@ Package Manager:       Yarn
 | Tenant        | Theme Export     | Description             |
 | ------------- | ---------------- | ----------------------- |
 | **Igloo**     | `iglooTheme`     | Default insurance brand |
-| **CIMB**      | `cimbTheme`      | Banking partner theme   |
 | **AmmetLife** | `ammetlifeTheme` | Life insurance partner  |
 
 ### Component Categories
@@ -280,7 +279,6 @@ yarn lib:verify-registry
 import {
   TenantThemeProvider,
   iglooTheme,
-  cimbTheme,
   ammetlifeTheme
 } from 'igloo-d2c-components'
 
@@ -299,7 +297,7 @@ function App() {
 import { TenantThemeProvider, getTenantTheme } from 'igloo-d2c-components'
 
 function App({ tenantId }) {
-  const theme = getTenantTheme(tenantId) // 'igloo', 'cimb', or 'ammetlife'
+  const theme = getTenantTheme(tenantId) // 'igloo' or 'ammetlife'
 
   return (
     <TenantThemeProvider tenantId={tenantId} theme={theme}>
@@ -371,11 +369,10 @@ import { iglooTheme } from 'igloo-d2c-components'
 import {
   // Individual themes
   iglooTheme,      // Igloo brand theme
-  cimbTheme,       // CIMB bank theme
   ammetlifeTheme,  // AmmetLife insurance theme
 
   // Theme registry
-  tenantThemes,    // { igloo: iglooTheme, cimb: cimbTheme, ... }
+  tenantThemes,    // { igloo: iglooTheme, ammetlife: ammetlifeTheme }
 
   // Utility functions
   getTenantTheme,  // (tenantId: TenantId) => TenantThemeConfig
@@ -404,9 +401,6 @@ interface TenantThemeConfig {
     health: { main, light? }
     life: { main, light }
     pet: { main }
-
-    // CIMB-specific (optional)
-    paCimb?: { main, light, bright, buttonBg }
   }
   typography: {
     fontFamily: string
@@ -793,7 +787,6 @@ import { CheckoutFormButton } from 'igloo-d2c-components'
 **Tenant Theme Support:** The button automatically uses tenant-specific colors:
 
 - **AmmetLife**: Blue (#317ABC)
-- **CIMB**: Red (#D71920)
 - **Igloo**: Black (#13131B)
 
 #### HealthQuestionGroup
@@ -947,7 +940,7 @@ Get current tenant ID.
 import { useTenantId } from 'igloo-d2c-components'
 
 function MyComponent() {
-  const tenantId = useTenantId() // 'igloo' | 'cimb' | 'ammetlife'
+  const tenantId = useTenantId() // 'igloo' | 'ammetlife'
   return <div>Current tenant: {tenantId}</div>
 }
 ```
@@ -960,10 +953,10 @@ Check if current tenant matches a specific ID.
 import { useIsTenant } from 'igloo-d2c-components'
 
 function MyComponent() {
-  const isCIMB = useIsTenant('cimb')
+  const isAmmetLife = useIsTenant('ammetlife')
 
-  if (isCIMB) {
-    return <CIMBSpecificFeature />
+  if (isAmmetLife) {
+    return <AmmetLifeSpecificFeature />
   }
 
   return <DefaultFeature />
@@ -1017,7 +1010,7 @@ Get list of all available tenant IDs.
 import { getAvailableTenants } from 'igloo-d2c-components'
 
 const tenants = getAvailableTenants()
-// ['igloo', 'cimb', 'ammetlife']
+// ['igloo', 'ammetlife']
 ```
 
 #### getThemeColor()
@@ -1049,7 +1042,6 @@ d2c-component-library/src/assets/
 │   └── index.ts             # Icon path utilities
 ├── tenants/                 # Tenant-specific assets
 │   ├── igloo/logo.svg
-│   ├── cimb/logo.svg
 │   └── ammetlife/logo.svg
 └── index.ts                 # Main asset exports
 ```
@@ -1066,7 +1058,6 @@ d2c-component-library/src/assets/
 │      ├── icons/           → Common UI icons         │
 │      └── tenants/         → Tenant logos            │
 │          ├── igloo/logo.svg                         │
-│          ├── cimb/logo.svg                          │
 │          └── ammetlife/logo.svg                     │
 │                                                      │
 │  BUILD ⬇️                                            │
@@ -1128,6 +1119,42 @@ The theme paths reference `/assets/tenants/{tenant}/logo.svg` which maps to:
 
 ## 🔌 Integration Guide
 
+### Next.js Integration
+
+📘 **[Complete Next.js Integration Guide](./NEXTJS_MIGRATION.md)**
+
+The library is fully compatible with Next.js 13+ (both App Router and Pages Router).
+
+**Quick Start:**
+
+```bash
+# Install
+npm install igloo-d2c-components
+
+# Configure next.config.js
+module.exports = {
+  transpilePackages: ['igloo-d2c-components'],
+}
+
+# Copy assets
+npm run copy-assets
+```
+
+**Key Features:**
+- ✅ Server-Side Rendering (SSR) support
+- ✅ Automatic 'use client' boundaries
+- ✅ Optimized for Next.js 13+ App Router
+- ✅ Tree-shaking enabled
+- ✅ TypeScript support
+- ✅ ES2020+ modern output
+
+See [NEXTJS_MIGRATION.md](./NEXTJS_MIGRATION.md) for:
+- Detailed setup instructions
+- Asset configuration
+- Common issues & solutions
+- Performance optimization tips
+- Testing strategies
+
 ### Multi-Tenant Architecture
 
 #### Tenant Configuration Structure
@@ -1137,8 +1164,7 @@ config/tenants/
 ├── index.ts         # Tenant registry and utility functions
 ├── types.ts         # TypeScript interfaces
 ├── igloo.ts         # Igloo tenant configuration
-├── ammetlife.ts     # AmmetLife tenant configuration
-└── cimb.ts          # CIMB tenant configuration
+└── ammetlife.ts     # AmmetLife tenant configuration
 ```
 
 #### Tenant Configuration Example
@@ -1501,20 +1527,19 @@ yarn build-storybook
 
 ### Available Stories
 
-**NewHeader Stories (12 scenarios):**
+**NewHeader Stories (11 scenarios):**
 
 1. Default - Basic header with Igloo branding
 2. Authenticated User - Header with logged-in user menu
 3. Mobile View - Responsive mobile layout
-4. CIMB Tenant - CIMB branding
-5. AmMetLife Tenant - AmMetLife branding
-6. Minimal Header - Bare-bones implementation
-7. Custom Drawer Content - Advanced customization
-8. Many Menu Items - Stress test with scrolling
-9. Without Logo - Edge case testing
-10. With Internationalization - i18n integration
-11. All Tenants Comparison - Side-by-side view
-12. Responsive Demo - Interactive responsive testing
+4. AmMetLife Tenant - AmMetLife branding
+5. Minimal Header - Bare-bones implementation
+6. Custom Drawer Content - Advanced customization
+7. Many Menu Items - Stress test with scrolling
+8. Without Logo - Edge case testing
+9. With Internationalization - i18n integration
+10. All Tenants Comparison - Side-by-side view
+11. Responsive Demo - Interactive responsive testing
 
 **Other Component Stories:**
 
@@ -1605,7 +1630,79 @@ before_script:
 
 ---
 
-## 📦 Publishing
+## 📦 Versioning & Publishing
+
+### Versioning Strategy
+
+📘 **[Complete Versioning Guide](./VERSIONING_STRATEGY.md)** | **[Quick Start](./VERSIONING_QUICK_START.md)**
+
+This library uses **Semantic Versioning** (semver) with multiple release channels:
+
+| Version | Type | Example | When to Use |
+|---------|------|---------|-------------|
+| **Patch** | Bug fix | 1.0.50 → 1.0.51 | Security fixes, bug fixes |
+| **Minor** | New feature | 1.0.51 → 1.1.0 | New components, new props |
+| **Major** | Breaking | 1.1.0 → 2.0.0 | API changes, removed features |
+
+### NPM Dist-tags
+
+```bash
+# Latest stable (production)
+npm install igloo-d2c-components          # or @latest
+
+# Next version (beta features)
+npm install igloo-d2c-components@next
+
+# v2 beta (next major version)
+npm install igloo-d2c-components@v2-beta
+
+# Specific version (recommended for production)
+npm install igloo-d2c-components@1.0.51
+```
+
+### For Production Apps (@d2c-sales-portal)
+
+**📘 [Complete Setup Guide](./CONSUMING_APP_SETUP.md)** | **[Environment Versioning](./ENVIRONMENT_VERSIONING.md)**
+
+**Pin versions by environment:**
+
+```json
+// Production
+{
+  "dependencies": {
+    "igloo-d2c-components": "~1.0.51"  // Pin to production versions
+  }
+}
+
+// DEV/QA/Staging
+{
+  "dependencies": {
+    "igloo-d2c-components": "non-prod"  // Auto-get latest non-prod
+  }
+}
+```
+
+**Automatic Environment Detection:**
+- **main branch** → Publishes `1.0.51` (production)
+- **other branches** → Publishes `1.0.51-non-prod` (DEV/QA/Staging)
+
+See [VERSIONING_STRATEGY.md](./VERSIONING_STRATEGY.md) for complete version management guide.
+
+### Quick Release
+
+```bash
+# Bug fix release
+npm run release:patch
+
+# Feature release (test in staging first)
+npm run release:minor
+
+# Breaking change (needs migration guide)
+npm run release:major
+
+# Beta release (for testing)
+npm run release:beta
+```
 
 ### Prerequisites
 
@@ -1746,7 +1843,7 @@ yarn install
 Theme not found for tenant: xxx
 ```
 
-**Solution:** Use valid tenant IDs: `'igloo'`, `'cimb'`, or `'ammetlife'`.
+**Solution:** Use valid tenant IDs: `'igloo'` or `'ammetlife'`.
 
 ### TypeScript Errors with Imports
 
@@ -1895,7 +1992,6 @@ Follow [Conventional Commits](https://www.conventionalcommits.org/):
 
    export const tenantThemes: Record<TenantId, TenantThemeConfig> = {
      igloo: iglooTheme,
-     cimb: cimbTheme,
      ammetlife: ammetlifeTheme,
      newtenant: newTenantTheme, // Add here
    }
@@ -1904,7 +2000,7 @@ Follow [Conventional Commits](https://www.conventionalcommits.org/):
 2. **Update TenantId type in `src/types/tenant.ts`:**
 
    ```typescript
-   export type TenantId = 'igloo' | 'cimb' | 'ammetlife' | 'newtenant'
+   export type TenantId = 'igloo' | 'ammetlife' | 'newtenant'
    ```
 
 3. **Add logo asset to `src/assets/tenants/newtenant/`**
@@ -1960,7 +2056,7 @@ yarn add igloo-d2c-components@latest
 ### Import Themes
 
 ```typescript
-import { iglooTheme, cimbTheme, ammetlifeTheme, getTenantTheme } from 'igloo-d2c-components'
+import { iglooTheme, ammetlifeTheme, getTenantTheme } from 'igloo-d2c-components'
 ```
 
 ### Import Components
@@ -1990,7 +2086,6 @@ yarn build
 ```bash
 yarn start-igloo        # Port 8000
 yarn start-ammetlife    # Port 8001
-yarn start-cimb         # Port 8002
 ```
 
 ---