BrandConfig Core

A TypeScript library for managing brand configurations, themes, and multi-language content in React applications.

Installation

npm install @cars4ever/brand-config-core

Compatibility

• Node.js: 14.0.0 and above
• TypeScript: 4.9.5 and above
• React: 16.8.0 and above

This library is specifically built to support Node 14 and older environments.

Features

• 🎨 Dynamic Brand Theming - Switch between brand themes at runtime
• 🌍 Multi-language Support - Load brand data for different languages
• ⚛️ React Integration - Ready-to-use hooks and components
• 📦 TypeScript Support - Full type safety with TypeScript
• 🚀 Lightweight - Minimal dependencies
• 🔧 Easy Configuration - Initialize once, use everywhere

Quick Start

1. Initialize the package

import { initializeBrandConfig } from '@cars4ever/brand-config-core';

// Initialize with preloading specific data
await initializeBrandConfig({
  apiBaseUrl: 'https://your-brand-config-api.com',
  assetsBaseUrl: 'https://your-assets-cdn.com', // Optional, defaults to apiBaseUrl
  preload: {
    brandsConfig: true,           // Preload main brands configuration
    translations: ['en', 'dk'],   // Preload specific language translations
    order: true,                  // Preload brands order
  }
});

// Or initialize without preloading
await initializeBrandConfig({
  apiBaseUrl: 'https://your-brand-config-api.com'
});

2. Use icon utilities

import { getIconUrl, useSortedBrands, getPreloadedData, hasPreloadedData } from '@cars4ever/brand-config-core';

function MyComponent() {
  // Get icon URL directly
  const opelPublicIcon = getIconUrl('public', 'opel');
  const citroenBackofficeIcon = getIconUrl('backoffice', 'citroen');
  
  // Get brands sorted by preferred order from API (uses preloaded data if available)
  const { brands: sortedBrands, loading, error } = useSortedBrands();
  
  // Check if data is preloaded
  const hasBrandsConfig = hasPreloadedData('brandsConfig');
  const hasEnglishTranslation = hasPreloadedData('translations', 'en');
  
  // Access preloaded data directly
  const preloadedData = getPreloadedData();
  
  if (loading) return <div>Loading brands...</div>;
  if (error) return <div>Error: {error.message}</div>;
  
  return (
    <div>
      <img src={opelPublicIcon} alt="Opel" />
      <img src={citroenBackofficeIcon} alt="Citroën Backoffice" />
      
      {/* Display brands in preferred order */}
      {sortedBrands.map(brand => (
        <div key={brand.code}>{brand.name}</div>
      ))}
      
      {hasBrandsConfig && <p>Brands config is preloaded! ⚡</p>}
    </div>
  );
}

3. Use with React Provider

import { BrandProvider } from '@cars4ever/brand-config-core';

function App() {
  return (
    <BrandProvider>
      <YourApp />
    </BrandProvider>
  );
}

4. Brand switching and icons

import { BrandSwitcher, BrandIcon, useBrandContext } from '@cars4ever/brand-config-core';

function Header() {
  const { currentBrand } = useBrandContext();
  
  return (
    <header>
      <h1>Current Brand: {currentBrand}</h1>
      <BrandSwitcher />
      <BrandIcon 
        brandCode="opel" 
        type="public" 
        className="logo"
      />
    </header>
  );
}

5. Remote SVG Component

import { RemoteSvgComponent } from '@cars4ever/brand-config-core';

function Logo() {
  return (
    <RemoteSvgComponent 
      url="https://your-cdn.com/icons/brand-logo.svg"
      width={100}
      height={50}
      fill="currentColor"
    />
  );
}

API Reference

Configuration

initializeBrandConfig(options: BrandConfigOptions): Promise<void>

Initialize the package with your API and assets URLs. Now supports preloading data.

await initializeBrandConfig({
  apiBaseUrl: 'https://your-api.com',
  assetsBaseUrl: 'https://your-cdn.com', // Optional
  preload: {
    brandsConfig: true,
    translations: ['en', 'dk', 'se'],
    order: true
  }
});

getPreloadedData(): PreloadedData

Get all preloaded data.

const preloaded = getPreloadedData();
console.log(preloaded.brandsConfig); // Preloaded brands config
console.log(preloaded.translations.en); // Preloaded English translation

hasPreloadedData(type: keyof PreloadedData, language?: string): boolean

Check if specific data type is preloaded.

const hasBrands = hasPreloadedData('brandsConfig');
const hasEnglish = hasPreloadedData('translations', 'en');

getApiBaseUrl(): string

Get the configured API base URL.

getAssetsBaseUrl(): string

Get the configured assets base URL.

isBrandConfigInitialized(): boolean

Check if the package has been initialized.

Utilities

getIconUrl(type: 'public' | 'backoffice', brandCode: string): string

Get the full URL for a brand icon.

const iconUrl = getIconUrl('public', 'opel');
// Returns: 'https://your-cdn.com/assets/icons/public/opel.svg'

fetchBrandsOrder(apiBase?: string): Promise<string[]>

Fetch the preferred brands order from API.

const order = await fetchBrandsOrder('/api');
// Returns: ['peugeot', 'citroen', 'ds', 'opel', ...]

getBrandsOrder(): Promise<string[]>

Fetch brands order using initialized configuration.

sortBrandsByOrder(brands: Brand[], order: string[]): Brand[]

Sort brands according to provided order array.

const sortedBrands = sortBrandsByOrder(brands, order);

getBrandsData(): Promise<BrandConfig>

Fetch all brand data using initialized configuration.

getBrandsByLanguageData(language: SupportedLanguage): Promise<any>

Fetch language-specific brand data using initialized configuration.

Hooks

useBrands(apiBase?: string)

Fetches and manages brand configuration data.

useBrandsOrder(apiBase?: string)

Fetches the preferred brands order from API.

useSortedBrands(apiBase?: string)

Fetches brands and automatically sorts them by the preferred order from API.

useBrandTheme(initialBrand?: string, assetsBase?: string)

Manages dynamic brand theme switching.

useBrandsByLanguage(language: SupportedLanguage, apiBase?: string)

Fetches language-specific brand data.

Components

<BrandProvider>

Context provider for brand configuration.

<BrandSwitcher>

Dropdown component for switching between brands.

<BrandIcon>

Component for displaying brand icons.

<RemoteSvgComponent>

Component for loading and displaying remote SVG files as React components.

Types

All TypeScript types are exported for use in your applications:

import type { 
  Brand, 
  BrandConfig, 
  BrandConfigOptions,
  SupportedLanguage,
  BrandCode 
} from '@cars4ever/brand-config-core';

// Example usage
const iconUrl = getIconUrl('public', 'peugeot');

Development

# Install dependencies
npm install

# Build the library
npm run build

# Watch mode for development
npm run dev

# Clean build artifacts
npm run clean

License

MIT