D2C Component Library

Reusable React component library with tenant-aware theming for B2C applications.

📦 Installation

For Local Development (npm link)

# In d2c-component-library directory
yarn install
yarn build
yarn link

# In b2c-web-demo directory
yarn link "d2ccomplib"

For Production (npm package)

yarn add d2ccomplib
# or
npm install d2ccomplib

🚀 Quick Start

1. Wrap your app with TenantThemeProvider

import { TenantThemeProvider } from 'd2ccomplib'

const tenantTheme = {
 palette: {
  primary: {
   main: '#5656F6',
   dark: '#1300A9',
   light: '#8183FF',
  },
  secondary: {
   main: '#FF7D7D',
   light: '#FFB3B1',
  },
 },
 typography: {
  fontFamily: '"Manrope", "Roboto", sans-serif',
 },
}

function App() {
 return (
  <TenantThemeProvider tenantId="igloo" theme={tenantTheme}>
   <YourApp />
  </TenantThemeProvider>
 )
}

2. Use Components

import { Button, Card, Banner } from 'd2ccomplib'

function MyPage() {
 return (
  <div>
   {/* Tenant-themed button */}
   <Button tenantColored>Click Me</Button>

   {/* Tenant-themed card */}
   <Card
    title="My Card"
    content="Card content"
    tenantAccent
   />

   {/* Tenant-themed banner */}
   <Banner
    title="Welcome"
    description="Get started today"
    gradient
   />
  </div>
 )
}

📚 Available Components

Button

Tenant-aware button component based on MUI Button.

import { Button } from 'd2ccomplib'

<Button tenantColored variant="contained">
 Tenant Colored Button
</Button>

<Button color="primary">
 Default MUI Button
</Button>

Props:

• tenantColored?: boolean - Use tenant primary color
• variant?: 'text' | 'outlined' | 'contained' - Button variant
• All MUI ButtonProps

Card

Tenant-aware card component based on MUI Card.

import { Card } from 'd2ccomplib'

<Card
 title="Card Title"
 content="Card content goes here"
 actions={<Button>Action</Button>}
 tenantAccent
/>

Props:

• title?: React.ReactNode - Card title
• content?: React.ReactNode - Card content
• actions?: React.ReactNode - Card actions
• tenantAccent?: boolean - Add tenant-colored top border
• All MUI CardProps

Banner

Promotional banner with tenant theming.

import { Banner } from 'd2ccomplib'

<Banner
 title="Special Offer"
 description="Limited time only"
 action={<Button>Learn More</Button>}
 gradient
/>

Props:

• title: string - Banner title
• description?: string - Banner description
• action?: React.ReactNode - Action button/element
• gradient?: boolean - Use gradient background
• All MUI BoxProps

🎨 Hooks & Utilities

useTenantTheme

Access tenant theme configuration.

import { useTenantTheme } from 'd2ccomplib'

function MyComponent() {
 const { theme, tenantId } = useTenantTheme()
 const primaryColor = theme.palette.primary?.main

 return <div style={{ color: primaryColor }}>...</div>
}

useTenantId

Get current tenant ID.

import { useTenantId } from 'd2ccomplib'

function MyComponent() {
 const tenantId = useTenantId()
 return <div>Current tenant: {tenantId}</div>
}

useIsTenant

Check if current tenant matches a specific ID.

import { useIsTenant } from 'd2ccomplib'

function MyComponent() {
 const isCIMB = useIsTenant('cimb')

 if (isCIMB) {
  return <CIMBSpecificFeature />
 }

 return <DefaultFeature />
}

getThemeColor

Utility to get color from theme palette.

import { getThemeColor } from 'd2ccomplib'

const primaryColor = getThemeColor(theme, 'primary.main', '#000000')

🏗️ Tech Stack

• React 17 - UI library
• TypeScript 4.9+ - Type safety
• MUI 5 - Material-UI components
• Emotion - CSS-in-JS
• Rollup - Build tooling

📖 TypeScript Support

Full TypeScript support with type definitions included.

import type { ButtonProps, CardProps, TenantThemeConfig } from 'd2ccomplib'

🔧 Development

Build the library

# Development mode (watch)
yarn dev

# Production build
yarn build

Lint code

yarn lint

Type check

yarn type-check

📝 Usage in b2c-web-demo

Integration Example

// In b2c-web-demo/src/layouts/index.tsx
import { TenantThemeProvider } from 'd2ccomplib'
import { getCurrentTenantConfig } from '@/config/tenants'

function Layout({ children }) {
 const tenantConfig = getCurrentTenantConfig()

 return (
  <TenantThemeProvider
   tenantId={tenantConfig.id}
   theme={{
    palette: tenantConfig.theme.palette,
    typography: tenantConfig.theme.typography,
   }}
  >
   <ThemeProvider theme={muiTheme}>
    {children}
   </ThemeProvider>
  </TenantThemeProvider>
 )
}

Using Components

// In any component
import { Button, Card, Banner } from 'd2ccomplib'

function MyPage() {
 return (
  <>
   <Banner
    title="Welcome to Insurance"
    description="Find the best deals"
    action={<Button tenantColored>Get Quote</Button>}
    gradient
   />

   <Card
    title="Popular Plans"
    content="View our most popular insurance plans"
    tenantAccent
   />
  </>
 )
}

🎯 Best Practices

1. Always wrap with TenantThemeProvider - Required for tenant theming to work
2. Use tenantColored prop - For components that should follow tenant branding
3. Maintain type safety - Use TypeScript types provided by the library
4. Extend cautiously - Extend components via composition, not modification

📄 License

MIT

🤝 Contributing

1. Create feature branch
2. Make changes
3. Run yarn build and yarn lint
4. Test in b2c-web-demo using yarn link
5. Submit PR

Version: 1.0.0 Author: Igloo Team