igloo-d2c-components 1.0.6

package/README.md

@@ -0,0 +1,332 @@
+# D2C Component Library
+Reusable React component library with tenant-aware theming for B2C applications.
+
+## 📦 Installation
+
+### For Local Development (npm link)
+
+```bash
+# In d2c-component-library directory
+yarn install
+yarn build
+yarn link
+
+# In b2c-web-demo directory
+yarn link "igloo-d2c-components"
+```
+
+### For Production (npm package)
+
+```bash
+yarn add igloo-d2c-components
+# or
+npm install igloo-d2c-components
+```
+
+## 🚀 Quick Start
+
+### 1. Wrap your app with TenantThemeProvider
+
+```tsx
+import { TenantThemeProvider } from 'igloo-d2c-components'
+
+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
+
+```tsx
+import { Button, Card, Banner } from 'igloo-d2c-components'
+
+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.
+
+```tsx
+import { Button } from 'igloo-d2c-components'
+
+<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.
+
+```tsx
+import { Card } from 'igloo-d2c-components'
+
+<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.
+
+```tsx
+import { Banner } from 'igloo-d2c-components'
+
+<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.
+
+```tsx
+import { useTenantTheme } from 'igloo-d2c-components'
+
+function MyComponent() {
+ const { theme, tenantId } = useTenantTheme()
+ const primaryColor = theme.palette.primary?.main
+
+ return <div style={{ color: primaryColor }}>...</div>
+}
+```
+
+### useTenantId
+
+Get current tenant ID.
+
+```tsx
+import { useTenantId } from 'igloo-d2c-components'
+
+function MyComponent() {
+ const tenantId = useTenantId()
+ return <div>Current tenant: {tenantId}</div>
+}
+```
+
+### useIsTenant
+
+Check if current tenant matches a specific ID.
+
+```tsx
+import { useIsTenant } from 'igloo-d2c-components'
+
+function MyComponent() {
+ const isCIMB = useIsTenant('cimb')
+
+ if (isCIMB) {
+  return <CIMBSpecificFeature />
+ }
+
+ return <DefaultFeature />
+}
+```
+
+### getThemeColor
+
+Utility to get color from theme palette.
+
+```tsx
+import { getThemeColor } from 'igloo-d2c-components'
+
+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.
+
+```tsx
+import type { ButtonProps, CardProps, TenantThemeConfig } from 'igloo-d2c-components'
+```
+
+## 🔧 Development
+
+### Build the library
+
+```bash
+# Development mode (watch)
+yarn dev
+
+# Production build
+yarn build
+```
+
+### Lint code
+
+```bash
+yarn lint
+```
+
+### Type check
+
+```bash
+yarn type-check
+```
+
+## 📝 Usage in b2c-web-demo
+
+### Integration Example
+
+```tsx
+// In b2c-web-demo/src/layouts/index.tsx
+import { TenantThemeProvider } from 'igloo-d2c-components'
+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
+
+```tsx
+// In any component
+import { Button, Card, Banner } from 'igloo-d2c-components'
+
+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

package/dist/cjs/index.js

@@ -0,0 +1,2 @@
+"use strict";var e=require("react/jsx-runtime"),t=require("react"),r=require("@mui/material");const n=t.createContext(void 0);function a(){const e=t.useContext(n);if(void 0===e)throw new Error("useTenantTheme must be used within a TenantThemeProvider");return e}exports.Banner=function({title:t,description:n,action:o,gradient:i=!0,sx:p,...s}){const{theme:c}=a(),l=i?`linear-gradient(135deg, ${c.palette.primary?.main} 0%, ${c.palette.primary?.light||c.palette.primary?.main} 100%)`:c.palette.primary?.main;return e.jsxs(r.Box,{sx:{background:l,color:"white",padding:"32px",borderRadius:"12px",textAlign:"center",...p},...s,children:[e.jsx(r.Typography,{variant:"h4",component:"h2",gutterBottom:!0,fontWeight:"bold",children:t}),n&&e.jsx(r.Typography,{variant:"body1",sx:{opacity:.95,mb:o?2:0},children:n}),o&&e.jsx(r.Box,{sx:{mt:2},children:o})]})},exports.Button=function({tenantColored:t=!1,variant:n="contained",sx:o,color:i,...p}){const{theme:s}=a(),c=t?{backgroundColor:s.palette.primary?.main,color:"#fff","&:hover":{backgroundColor:s.palette.primary?.dark||s.palette.primary?.main},...o}:o;return e.jsx(r.Button,{variant:n,color:t?void 0:i,sx:c,...p})},exports.Card=function({title:t,headerAction:n,content:o,actions:i,tenantAccent:p=!1,sx:s,children:c,...l}){const{theme:d}=a(),m=p?{borderTop:`4px solid ${d.palette.primary?.main}`,...s}:s;return e.jsxs(r.Card,{sx:m,...l,children:[t&&e.jsx(r.CardHeader,{title:t,action:n}),(o||c)&&e.jsx(r.CardContent,{children:o||c}),i&&e.jsx(r.CardActions,{children:i})]})},exports.TenantThemeProvider=function({children:r,tenantId:a,theme:o}){const i=t.useMemo(()=>({tenantId:a,theme:o}),[a,o]);return e.jsx(n.Provider,{value:i,children:r})},exports.createThemeCSSVariables=function(e,t="--tenant"){const r={};return e.palette.primary&&Object.entries(e.palette.primary).forEach(([e,n])=>{"string"==typeof n&&(r[`${t}-primary-${e}`]=n)}),e.palette.secondary&&Object.entries(e.palette.secondary).forEach(([e,n])=>{"string"==typeof n&&(r[`${t}-secondary-${e}`]=n)}),e.typography?.fontFamily&&(r[`${t}-font-family`]=e.typography.fontFamily),r},exports.getThemeColor=function(e,t,r="#000000"){const n=t.split(".");let a=e.palette;for(const e of n){if(!a||"object"!=typeof a||!(e in a))return r;a=a[e]}return"string"==typeof a?a:r},exports.mergeTenantTheme=function(e,t){return{...e,palette:{...e.palette,...t.palette,primary:{...e.palette?.primary||{},...t.palette.primary||{}},secondary:{...e.palette?.secondary||{},...t.palette.secondary||{}}},typography:{...e.typography,...t.typography}}},exports.useIsTenant=function(e){const{tenantId:t}=a();return t===e},exports.useTenantId=function(){const{tenantId:e}=a();return e},exports.useTenantTheme=a;
+//# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../src/context/TenantThemeContext.tsx","../../src/components/Banner/Banner.tsx","../../src/components/Button/Button.tsx","../../src/components/Card/Card.tsx","../../src/utils/theme.ts"],"sourcesContent":[null,null,null,null,null],"names":["TenantThemeContext","createContext","undefined","useTenantTheme","context","useContext","Error","title","description","action","gradient","sx","props","theme","background","palette","primary","main","light","_jsxs","jsxs","Box","color","padding","borderRadius","textAlign","children","_jsx","jsx","Typography","variant","component","gutterBottom","fontWeight","opacity","mb","mt","tenantColored","buttonSx","backgroundColor","dark","MuiButton","Button","headerAction","content","actions","tenantAccent","cardSx","borderTop","MuiCard","CardHeader","CardContent","CardActions","tenantId","value","useMemo","Provider","prefix","variables","Object","entries","forEach","key","secondary","typography","fontFamily","path","defaultColor","keys","split","baseTheme","tenantTheme","checkTenantId"],"mappings":"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"}

package/dist/esm/index.js

@@ -0,0 +1,2 @@
+import{jsx as t,jsxs as e}from"react/jsx-runtime";import{createContext as r,useMemo as n,useContext as a}from"react";import{Button as o,Card as i,CardHeader as c,CardContent as p,CardActions as l,Box as d,Typography as m}from"@mui/material";const s=r(void 0);function y({children:e,tenantId:r,theme:a}){const o=n(()=>({tenantId:r,theme:a}),[r,a]);return t(s.Provider,{value:o,children:e})}function h(){const t=a(s);if(void 0===t)throw new Error("useTenantTheme must be used within a TenantThemeProvider");return t}function u(){const{tenantId:t}=h();return t}function f(t){const{tenantId:e}=h();return e===t}function g({tenantColored:e=!1,variant:r="contained",sx:n,color:a,...i}){const{theme:c}=h(),p=e?{backgroundColor:c.palette.primary?.main,color:"#fff","&:hover":{backgroundColor:c.palette.primary?.dark||c.palette.primary?.main},...n}:n;return t(o,{variant:r,color:e?void 0:a,sx:p,...i})}function x({title:r,headerAction:n,content:a,actions:o,tenantAccent:d=!1,sx:m,children:s,...y}){const{theme:u}=h(),f=d?{borderTop:`4px solid ${u.palette.primary?.main}`,...m}:m;return e(i,{sx:f,...y,children:[r&&t(c,{title:r,action:n}),(a||s)&&t(p,{children:a||s}),o&&t(l,{children:o})]})}function b({title:r,description:n,action:a,gradient:o=!0,sx:i,...c}){const{theme:p}=h(),l=o?`linear-gradient(135deg, ${p.palette.primary?.main} 0%, ${p.palette.primary?.light||p.palette.primary?.main} 100%)`:p.palette.primary?.main;return e(d,{sx:{background:l,color:"white",padding:"32px",borderRadius:"12px",textAlign:"center",...i},...c,children:[t(m,{variant:"h4",component:"h2",gutterBottom:!0,fontWeight:"bold",children:r}),n&&t(m,{variant:"body1",sx:{opacity:.95,mb:a?2:0},children:n}),a&&t(d,{sx:{mt:2},children:a})]})}function v(t,e,r="#000000"){const n=e.split(".");let a=t.palette;for(const t of n){if(!a||"object"!=typeof a||!(t in a))return r;a=a[t]}return"string"==typeof a?a:r}function $(t,e){return{...t,palette:{...t.palette,...e.palette,primary:{...t.palette?.primary||{},...e.palette.primary||{}},secondary:{...t.palette?.secondary||{},...e.palette.secondary||{}}},typography:{...t.typography,...e.typography}}}function T(t,e="--tenant"){const r={};return t.palette.primary&&Object.entries(t.palette.primary).forEach(([t,n])=>{"string"==typeof n&&(r[`${e}-primary-${t}`]=n)}),t.palette.secondary&&Object.entries(t.palette.secondary).forEach(([t,n])=>{"string"==typeof n&&(r[`${e}-secondary-${t}`]=n)}),t.typography?.fontFamily&&(r[`${e}-font-family`]=t.typography.fontFamily),r}export{b as Banner,g as Button,x as Card,y as TenantThemeProvider,T as createThemeCSSVariables,v as getThemeColor,$ as mergeTenantTheme,f as useIsTenant,u as useTenantId,h as useTenantTheme};
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../src/context/TenantThemeContext.tsx","../../src/components/Button/Button.tsx","../../src/components/Card/Card.tsx","../../src/components/Banner/Banner.tsx","../../src/utils/theme.ts"],"sourcesContent":[null,null,null,null,null],"names":["TenantThemeContext","createContext","undefined","TenantThemeProvider","children","tenantId","theme","value","useMemo","_jsx","Provider","useTenantTheme","context","useContext","Error","useTenantId","useIsTenant","checkTenantId","Button","tenantColored","variant","sx","color","props","buttonSx","backgroundColor","palette","primary","main","dark","MuiButton","Card","title","headerAction","content","actions","tenantAccent","cardSx","borderTop","_jsxs","MuiCard","CardHeader","action","CardContent","CardActions","Banner","description","gradient","background","light","Box","padding","borderRadius","textAlign","Typography","component","gutterBottom","fontWeight","opacity","mb","mt","getThemeColor","path","defaultColor","keys","split","key","mergeTenantTheme","baseTheme","tenantTheme","secondary","typography","createThemeCSSVariables","prefix","variables","Object","entries","forEach","fontFamily"],"mappings":"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"}

package/dist/types/components/Banner/Banner.d.ts

@@ -0,0 +1,38 @@
+/**
+ * Tenant-Aware Banner Component
+ * Promotional banner with tenant theming
+ */
+/// <reference types="react" />
+import { BoxProps } from '@mui/material';
+export interface BannerProps extends Omit<BoxProps, 'title'> {
+    /**
+     * Banner title
+     */
+    title: string;
+    /**
+     * Banner description
+     */
+    description?: string;
+    /**
+     * Banner action button
+     */
+    action?: React.ReactNode;
+    /**
+     * Use gradient background
+     */
+    gradient?: boolean;
+}
+/**
+ * Banner component with tenant theme support
+ *
+ * @example
+ * ```tsx
+ * <Banner
+ *   title="Welcome to Our Platform"
+ *   description="Get started today"
+ *   action={<Button>Get Started</Button>}
+ *   gradient
+ * />
+ * ```
+ */
+export declare function Banner({ title, description, action, gradient, sx, ...props }: BannerProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Banner/Banner.stories.d.ts

@@ -0,0 +1,13 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { Banner } from './Banner';
+declare const _default: ComponentMeta<typeof Banner>;
+export default _default;
+export declare const Default: ComponentStory<typeof Banner>;
+export declare const WithGradient: ComponentStory<typeof Banner>;
+export declare const WithAction: ComponentStory<typeof Banner>;
+export declare const ComplexAction: ComponentStory<typeof Banner>;
+export declare const LongContent: ComponentStory<typeof Banner>;
+export declare const WithCIMBTheme: ComponentStory<typeof Banner>;
+export declare const Variants: () => import("react/jsx-runtime").JSX.Element;
+export declare const MinimalContent: ComponentStory<typeof Banner>;
+export declare const NoDescription: ComponentStory<typeof Banner>;

package/dist/types/components/Banner/index.d.ts

@@ -0,0 +1,2 @@
+export { Banner } from './Banner';
+export type { BannerProps } from './Banner';

package/dist/types/components/Button/Button.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Tenant-Aware Button Component
+ * MUI Button with tenant theming support
+ */
+import { ButtonProps as MuiButtonProps } from '@mui/material';
+export interface ButtonProps extends Omit<MuiButtonProps, 'color'> {
+    /**
+     * Button variant
+     */
+    variant?: 'text' | 'outlined' | 'contained';
+    /**
+     * Use tenant primary color
+     */
+    tenantColored?: boolean;
+    /**
+     * MUI color prop (only used if tenantColored is false)
+     */
+    color?: MuiButtonProps['color'];
+}
+/**
+ * Button component with tenant theme support
+ *
+ * @example
+ * ```tsx
+ * // Uses tenant primary color
+ * <Button tenantColored>Click Me</Button>
+ *
+ * // Uses MUI default color
+ * <Button color="primary">Click Me</Button>
+ * ```
+ */
+export declare function Button({ tenantColored, variant, sx, color, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Button/Button.stories.d.ts

@@ -0,0 +1,12 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { Button } from './Button';
+declare const _default: ComponentMeta<typeof Button>;
+export default _default;
+export declare const Default: ComponentStory<typeof Button>;
+export declare const TenantColored: ComponentStory<typeof Button>;
+export declare const Outlined: ComponentStory<typeof Button>;
+export declare const Text: ComponentStory<typeof Button>;
+export declare const Sizes: () => import("react/jsx-runtime").JSX.Element;
+export declare const Variants: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithCIMBTheme: ComponentStory<typeof Button>;
+export declare const Disabled: ComponentStory<typeof Button>;

package/dist/types/components/Button/index.d.ts

@@ -0,0 +1,2 @@
+export { Button } from './Button';
+export type { ButtonProps } from './Button';

package/dist/types/components/Card/Card.d.ts

@@ -0,0 +1,42 @@
+/**
+ * Tenant-Aware Card Component
+ * MUI Card with tenant theming support
+ */
+/// <reference types="react" />
+import { CardProps as MuiCardProps } from '@mui/material';
+export interface CardProps extends Omit<MuiCardProps, 'title' | 'content' | 'action'> {
+    /**
+     * Card title
+     */
+    title?: React.ReactNode;
+    /**
+     * Card header action
+     */
+    headerAction?: React.ReactNode;
+    /**
+     * Card content
+     */
+    content?: React.ReactNode;
+    /**
+     * Card actions
+     */
+    actions?: React.ReactNode;
+    /**
+     * Use tenant accent border
+     */
+    tenantAccent?: boolean;
+}
+/**
+ * Card component with tenant theme support
+ *
+ * @example
+ * ```tsx
+ * <Card
+ *   title="My Card"
+ *   content="Card content"
+ *   actions={<Button>Action</Button>}
+ *   tenantAccent
+ * />
+ * ```
+ */
+export declare function Card({ title, headerAction, content, actions, tenantAccent, sx, children, ...props }: CardProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Card/Card.stories.d.ts

@@ -0,0 +1,11 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { Card } from './Card';
+declare const _default: ComponentMeta<typeof Card>;
+export default _default;
+export declare const Default: ComponentStory<typeof Card>;
+export declare const WithTenantAccent: ComponentStory<typeof Card>;
+export declare const WithActions: ComponentStory<typeof Card>;
+export declare const CompleteCard: ComponentStory<typeof Card>;
+export declare const ElevationVariants: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithCIMBTheme: ComponentStory<typeof Card>;
+export declare const LongContent: ComponentStory<typeof Card>;

package/dist/types/components/Card/index.d.ts

@@ -0,0 +1,2 @@
+export { Card } from './Card';
+export type { CardProps } from './Card';

package/dist/types/context/TenantThemeContext.d.ts

@@ -0,0 +1,39 @@
+/**
+ * Tenant Theme Context
+ * Provides tenant-specific theme configuration to components
+ */
+import React from 'react';
+import { TenantContextValue, TenantThemeConfig } from '../types/tenant';
+export interface TenantThemeProviderProps {
+    children: React.ReactNode;
+    tenantId: string;
+    theme: TenantThemeConfig;
+}
+/**
+ * TenantThemeProvider
+ * Wraps components to provide tenant-specific theming
+ *
+ * @example
+ * ```tsx
+ * <TenantThemeProvider
+ *   tenantId="cimb"
+ *   theme={cimbTheme}
+ * >
+ *   <App />
+ * </TenantThemeProvider>
+ * ```
+ */
+export declare function TenantThemeProvider({ children, tenantId, theme, }: TenantThemeProviderProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Hook to access tenant theme configuration
+ * @throws Error if used outside TenantThemeProvider
+ */
+export declare function useTenantTheme(): TenantContextValue;
+/**
+ * Hook to get tenant ID
+ */
+export declare function useTenantId(): string;
+/**
+ * Hook to check if current tenant matches given tenant ID
+ */
+export declare function useIsTenant(checkTenantId: string): boolean;

package/dist/types/index.d.ts

@@ -0,0 +1,14 @@
+/**
+ * D2C Component Library
+ * Reusable components with tenant-aware theming
+ */
+export { TenantThemeProvider, useTenantTheme, useTenantId, useIsTenant, } from './context/TenantThemeContext';
+export type { TenantThemeProviderProps } from './context/TenantThemeContext';
+export type { TenantPalette, TenantTypography, TenantThemeConfig, TenantContextValue, } from './types/tenant';
+export { Button } from './components/Button';
+export type { ButtonProps } from './components/Button';
+export { Card } from './components/Card';
+export type { CardProps } from './components/Card';
+export { Banner } from './components/Banner';
+export type { BannerProps } from './components/Banner';
+export { getThemeColor, mergeTenantTheme, createThemeCSSVariables } from './utils/theme';

package/dist/types/types/tenant.d.ts

@@ -0,0 +1,40 @@
+/**
+ * Tenant Theme Configuration Types
+ * These interfaces define the structure for tenant-specific theming
+ */
+export interface TenantPalette {
+    primary?: {
+        main: string;
+        dark?: string;
+        light?: string;
+        bright?: string;
+        plain?: string;
+        border?: string;
+    };
+    secondary?: {
+        dim?: string;
+        dark?: string;
+        main: string;
+        bright?: string;
+        mediumBright?: string;
+        light?: string;
+        lighter?: string;
+    };
+    [key: string]: any;
+}
+export interface TenantTypography {
+    fontFamily?: string;
+    [key: string]: any;
+}
+export interface TenantThemeConfig {
+    palette: TenantPalette;
+    typography?: TenantTypography;
+}
+/**
+ * Tenant Context Value
+ * This is what's provided by the TenantThemeProvider
+ */
+export interface TenantContextValue {
+    tenantId: string;
+    theme: TenantThemeConfig;
+}

package/dist/types/utils/theme.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Theme Utility Functions
+ * Helper functions for working with tenant themes
+ */
+import { Theme } from '@mui/material/styles';
+import { TenantThemeConfig } from '../types/tenant';
+/**
+ * Get color value from theme palette path
+ * @param theme - Tenant theme configuration
+ * @param path - Dot-notation path to color (e.g., 'primary.main')
+ * @param defaultColor - Fallback color if path not found
+ * @returns Color string
+ */
+export declare function getThemeColor(theme: TenantThemeConfig, path: string, defaultColor?: string): string;
+/**
+ * Merge tenant theme with base MUI theme
+ * @param baseTheme - Base MUI theme
+ * @param tenantTheme - Tenant-specific theme configuration
+ * @returns Merged theme
+ */
+export declare function mergeTenantTheme(baseTheme: Partial<Theme>, tenantTheme: TenantThemeConfig): any;
+/**
+ * Create CSS variables from tenant theme
+ * Useful for using theme values in CSS
+ * @param theme - Tenant theme configuration
+ * @param prefix - Prefix for CSS variable names
+ * @returns Object with CSS variable definitions
+ */
+export declare function createThemeCSSVariables(theme: TenantThemeConfig, prefix?: string): Record<string, string>;

package/package.json

@@ -0,0 +1,90 @@
+{
+  "name": "igloo-d2c-components",
+  "version": "1.0.6",
+  "description": "Reusable component library with tenant-aware theming for B2C applications",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/types/index.d.ts",
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "yarn clean && rollup -c rollup.config.cjs && tsc --declaration --emitDeclarationOnly --outDir dist/types",
+    "dev": "rollup -c rollup.config.cjs -w",
+    "lint": "eslint src --ext .ts,.tsx",
+    "type-check": "tsc --noEmit",
+    "clean": "rimraf dist",
+    "prepare": "yarn build",
+    "prepublishOnly": "bash scripts/auto-version-bump.sh && yarn clean && yarn build",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook",
+    "release": "bash scripts/release.sh",
+    "npmPublish": "yarn prepublishOnly && npm publish"
+  },
+  "engines": {
+    "node": ">=16.20.0 <=18.x"
+  },
+  "keywords": [
+    "react",
+    "components",
+    "mui",
+    "tenant",
+    "theme",
+    "design-system"
+  ],
+  "author": "Igloo",
+  "license": "MIT",
+  "peerDependencies": {
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.5",
+    "@mui/icons-material": "^5.15.20",
+    "@mui/material": "^5.15.20",
+    "@mui/styles": "^5.15.20",
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.22.0",
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.5",
+    "@mui/icons-material": "^5.15.20",
+    "@mui/material": "^5.15.20",
+    "@mui/styles": "^5.15.20",
+    "@rollup/plugin-commonjs": "^24.0.0",
+    "@rollup/plugin-node-resolve": "^15.0.0",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-typescript": "^11.0.0",
+    "@storybook/addon-essentials": "6.5.16",
+    "@storybook/addon-interactions": "6.5.16",
+    "@storybook/addon-links": "6.5.16",
+    "@storybook/builder-vite": "0.4.2",
+    "@storybook/react": "6.5.16",
+    "@storybook/testing-library": "0.0.13",
+    "@types/minimatch": "^3.0.5",
+    "@types/react": "^17.0.0",
+    "@types/react-dom": "^17.0.0",
+    "@typescript-eslint/eslint-plugin": "^5.0.0",
+    "@typescript-eslint/parser": "^5.0.0",
+    "@vitejs/plugin-react": "^3.1.0",
+    "eslint": "^8.0.0",
+    "eslint-plugin-react": "^7.32.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0",
+    "rimraf": "^5.0.0",
+    "rollup": "^3.29.5",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "tslib": "^2.8.1",
+    "typescript": "^4.9.0",
+    "vite": "4.3.9"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "bugs": {
+    "url": "https://gitlab.iglooinsure.com/axinan/fe/d2c-component-library/-/issues"
+  },
+  "homepage": "https://gitlab.iglooinsure.com/axinan/fe/d2c-component-library#readme"
+}