Skip to main content

Interface: GenericContainer<T>

Generic base interface for hierarchical container structures in the configurator.

GenericContainer provides the foundational structure for organizing configuration elements into logical containers. This flexible interface serves as the base type for various container implementations throughout the system, enabling consistent hierarchical organization patterns while allowing type-safe container names that can be strings, translatable objects, or other name representations.

The generic type parameter controls the container name type, supporting both simple strings for single-language implementations and complex translatable objects for internationalized products. This flexibility is essential for systems that need to support multiple languages or dynamic naming schemes.

This interface establishes the minimal contract for any container in the system:

  • A name that can be a string or translatable object
  • A collection of contained item IDs
  • A unique string identifier for the container

Common extensions of this interface include:

  • BlockGroupContainer: Organizes block groups with translatable names
  • RawBlockGroupContainer: Internal representation with Translatable names

Examples​

// Basic string-named container (default)
const basicContainer: GenericContainer = {
  containerName: "Premium Features",
  value: ["feature-1", "feature-2", "feature-3"],
  containerId: "premium-container"
};
// Container with translatable name for internationalization
const translatableContainer: GenericContainer<Translatable<string>> = {
  containerName: {
    en: "Interior Options",
    es: "Opciones Interiores",
    fr: "Options Intérieures",
    de: "Innenausstattung"
  },
  value: ["seats-group", "dashboard-group", "console-group"],
  containerId: "interior-container"
};
// Container with dynamic name object
interface DynamicName {
  base: string;
  prefix?: string;
  suffix?: string;
  icon?: string;
}

const dynamicContainer: GenericContainer<DynamicName> = {
  containerName: {
    base: "Configuration",
    prefix: "Step 1:",
    icon: "settings"
  },
  value: ["opt-1", "opt-2"],
  containerId: "config-step-1"
};

Type Parameters​

T​

T = string

The type of the container name. Defaults to string but commonly uses Translatable<string> for multi-language support or other custom name types for specialized implementations.

Properties​

containerId​

containerId: string

Unique identifier for this container instance.

A stable, unique string that identifies this container within the system. This ID is used for programmatic access, state management, event handling, and maintaining relationships between containers and other system components.

Container IDs should follow consistent naming conventions within the system:

  • Use kebab-case or snake_case consistently
  • Include semantic meaning when possible
  • Avoid special characters that might cause issues in URLs or attributes
  • Consider prefixing with container type for clarity

Once assigned, this ID should not change as other parts of the system may maintain references to it. Changes to the ID could break saved configurations, user preferences, or analytics tracking.

Example​

"interior-options-container"
"performance_settings_container"
"cat_premium_features"
"workflow-step-1"

containerName​

containerName: T

Display name for this container.

The container's name can be a simple string or a more complex type based on the generic parameter T. This flexibility allows the same container structure to support both single-language and multi-language implementations, or even custom naming schemes with additional metadata.

Common name types include:

  • string: Simple text name for single-language implementations
  • Translatable<string>: Object with locale keys for multi-language support
  • Custom types: Objects containing name with additional display metadata

The name is typically displayed in UI elements like navigation menus, breadcrumbs, accordion headers, or tab labels. The UI implementation determines how to extract and display the appropriate name based on its type.

Template​

The type of the name (string by default)

Example​

// Simple string name
"Interior Options"

// Translatable name object
{
  en: "Performance Settings",
  es: "Configuración de Rendimiento",
  fr: "Paramètres de Performance"
}

// Custom name with metadata
{
  text: "Advanced Options",
  icon: "gear",
  description: "Fine-tune your configuration"
}

value​

value: string[]

Array of IDs for items contained within this container.

This array holds string references to the elements that belong to this container, maintaining the organizational hierarchy. The IDs reference the actual objects (groups, options, products, etc.) that are logically grouped together.

The order of IDs in this array typically determines the display order of contained items in the UI, making sequence important for user experience. Empty arrays are valid and indicate an empty container that might be populated dynamically based on rules or user permissions.

These IDs should correspond to existing entities in the system

The system uses these IDs to look up the actual objects when building the UI or processing configuration logic.

Example​

["group-seats", "group-dashboard", "group-console", "group-ambient"]