@ecommerce-platform/shared-layout

Shared layout components for ecommerce micro-frontends. Provides Navbar, Footer, and Layout components with intelligent navigation that works in both standalone and MFE (Module Federation) modes.

Features

- Intelligent Navigation: Automatically detects standalone vs MFE mode and redirects users appropriately
- Host Fallback: In standalone mode, tries to navigate to host app first, then falls back to standalone MFE if host is unavailable
- Consistent UI: Same layout and styling across all micro-frontends
- Flexible Props: Accepts external data (basket, categories) for maximum flexibility

Installation

``bash
npm install @ecommerce-platform/shared-layout
`

Usage

$3

`tsx
import { Layout, configureNavigation } from '@ecommerce-platform/shared-layout';
import { BrowserRouter, Routes, Route } from 'react-router-dom';

// Configure navigation (optional, defaults work for most cases)
configureNavigation({
hostUrl: 'http://localhost:4200',
currentAppName: 'store', // e.g., 'store', 'checkout', 'account'
standalonePorts: {
store: 4201,
checkout: 4202,
account: 4203,
},
});

function App() {
return (


}>
} />



);
}
`

$3

`tsx
import { Layout } from '@ecommerce-platform/shared-layout';
import { useBasket } from './services/basket';

function App() {
const { items, itemCount, isLoading } = useBasket();

// Map your basket items to CartItem format
const cartItems = items.map(item => ({
id: item.productId,
name: item.productName,
price: item.price,
quantity: item.quantity,
image: item.imageFile || '',
}));

return (
appName="store"
basketCount={itemCount}
cartItems={cartItems}
isLoading={isLoading}
onRemoveCartItem={(id) => {
// Handle remove cart item
}}
>


);
}
`

$3

`tsx
import { Layout } from '@ecommerce-platform/shared-layout';
import { useCategories } from './services/categories';

function App() {
const { categories, isLoading } = useCategories();

return (
appName="store"
categories={categories.map(cat => ({
id: cat.id,
name: cat.name,
icon: cat.icon,
path: cat.path,
}))}
categoriesLoading={isLoading}
>


);
}
`

$3

The package automatically detects if it's running in standalone mode by checking:
1. If window.__MFE_HOST__ is defined (set by host when loading MFE)
2. If the current port matches a standalone MFE port

$3

- In MFE mode (loaded by host): Uses React Router navigation normally
- In standalone mode:
1. First tries to navigate to host app (e.g., http://localhost:4200/checkout)
2. If host is unavailable, falls back to standalone MFE (e.g., http://localhost:4202/checkout)

$3

`tsx
import { useNavigate } from '@ecommerce-platform/shared-layout';

function MyComponent() {
const navigate = useNavigate('store'); // Pass app name for fallback

const handleClick = () => {
// Will try host first, then fallback to standalone if needed
navigate('/checkout');
};

return Go to Checkout;
}
`

Theme Configuration

The package includes a complete Ant Design theme configuration that matches the host app:

`tsx
import { themeConfig } from '@ecommerce-platform/shared-layout';
import { ConfigProvider } from 'antd';

function App() {
return (



);
}
`

The theme includes:
- Brand colors (primary gradient: #667eea to #764ba2)
- Typography (Poppins font family)
- Spacing, shadows, and border radius
- Component-specific styles (Button, Input, Card, Layout, Typography)

API Reference

$3

Main layout component that wraps your application.

Props:
- appName?: string - Current app name for navigation fallback
- basketCount?: number - Number of items in basket
- cartItems?: CartItem[] - Cart items for preview
- isLoading?: boolean - Loading state for cart data
- onRemoveCartItem?: (id: string) => void - Callback when removing item
- categories?: Array<{id: string; name: string; icon?: string; path: string}> - Categories for dropdown
- categoriesLoading?: boolean - Loading state for categories
- hideNavbar?: boolean - Hide navbar (default: false)
- hideFooter?: boolean - Hide footer (default: false)

$3

Standalone navbar component.

Props: Same as Layout (except hideNavbar and hideFooter)

$3

Standalone footer component.

Props:
- appName?: string - Current app name for navigation fallback

$3

Configure navigation settings.

Config:
- hostUrl?: string - Host app URL (default: http://localhost:4200)
- currentAppName?: string - Current MFE app name
- standalonePorts?: Record - Map of app names to ports

$3

Custom navigation hook that handles redirects intelligently.

$3

Check if running in standalone mode.

Examples

$3

`tsx
// store/src/app.tsx
import { Layout, configureNavigation } from '@ecommerce-platform/shared-layout';

configureNavigation({
currentAppName: 'store',
});

export function App() {
return (


}>
} />



);
}
`

$3

`tsx
// checkout/src/app.tsx
import { Layout, configureNavigation } from '@ecommerce-platform/shared-layout';

configureNavigation({
currentAppName: 'checkout',
});

export function App() {
return (


}>
} />



);
}
``

License

MIT