Skip to main content

Full-Featured Configuration

A comprehensive configuration demonstrating all available options.

// src/eai.config/tenants/full-featured.config.ts
import type { EAIConfig } from '../types';

export const fullFeaturedConfig: EAIConfig = {
  tenantId: 'full-featured',
  displayName: 'Full-Featured Application',

  // ============================================
  // STORE SLICES
  // All state management definitions
  // ============================================
  store: {
    // User authentication and profile
    user: {
      initialState: {
        name: null,
        email: null,
        role: 'guest',
        isAuthenticated: false,
        preferences: {
          theme: 'light',
          notifications: true,
          language: 'en',
        },
      },
      persist: true, // Survives page refresh
    },

    // Workflow state
    workflow: {
      initialState: {
        currentStep: 'start',
        completedSteps: [],
        data: {},
        validationErrors: [],
      },
      persist: true,
    },

    // Application data
    projects: {
      initialState: {
        list: [],
        selected: null,
        filters: {
          status: 'all',
          sortBy: 'created',
        },
        pagination: {
          page: 1,
          pageSize: 10,
          total: 0,
        },
      },
      persist: true,
    },

    // Chat/AI state
    chat: {
      initialState: {
        messages: [],
        isLoading: false,
        error: null,
        sessionId: null,
      },
      persist: false, // Reset on refresh
    },

    // UI state
    ui: {
      initialState: {
        sidebarOpen: true,
        modalVisible: false,
        activeTab: 'overview',
        toasts: [],
      },
      persist: false,
    },
  },

  // ============================================
  // LAYOUT
  // Component placement in slots
  // ============================================
  layout: {
    // --------------------------------------------
    // HEADER
    // Top navigation bar
    // --------------------------------------------
    header: [
      {
        component: 'Header',
        priority: 1,
        props: {
          logo: '/logo.svg',
          title: 'Full-Featured App',
          showUserMenu: true,
          showNotifications: true,
          navItems: [
            { label: 'Dashboard', href: '/dashboard' },
            { label: 'Projects', href: '/projects' },
            { label: 'Settings', href: '/settings' },
          ],
        },
        storeBindings: [
          { prop: 'userName', storePath: 'user.name' },
          { prop: 'userRole', storePath: 'user.role' },
          { prop: 'isAuthenticated', storePath: 'user.isAuthenticated' },
        ],
      },
    ],

    // --------------------------------------------
    // LEFT PANE
    // Sidebar navigation and filters
    // --------------------------------------------
    leftPane: [
      // Collapsible sidebar
      {
        component: 'Sidebar',
        priority: 1,
        props: {
          collapsible: true,
          defaultOpen: true,
        },
        storeBindings: [
          { prop: 'isOpen', storePath: 'ui.sidebarOpen' },
        ],
      },

      // Workflow progress (when authenticated)
      {
        component: 'StepProgress',
        priority: 2,
        props: {
          steps: ['Start', 'Details', 'Review', 'Complete'],
        },
        storeBindings: [
          { prop: 'currentStep', storePath: 'workflow.currentStep' },
          { prop: 'completedSteps', storePath: 'workflow.completedSteps' },
        ],
        showWhen: (state) => state.user?.isAuthenticated,
      },

      // Quick filters for projects
      {
        component: 'ProjectFilters',
        priority: 3,
        storeBindings: [
          { prop: 'filters', storePath: 'projects.filters' },
        ],
        showWhen: (state) =>
          state.user?.isAuthenticated &&
          state.projects?.list?.length > 0,
      },
    ],

    // --------------------------------------------
    // MIDDLE PANE
    // Main content area
    // --------------------------------------------
    middlePane: [
      // Welcome card for unauthenticated users
      {
        component: 'WelcomeCard',
        priority: 1,
        props: {
          title: 'Welcome to Full-Featured App',
          message: 'Sign in to access all features.',
          ctaText: 'Sign In',
          ctaHref: '/api/auth/signin',
        },
        showWhen: (state) => !state.user?.isAuthenticated,
      },

      // Dashboard for authenticated users
      {
        component: 'Dashboard',
        priority: 2,
        props: {
          showStats: true,
          showRecentActivity: true,
        },
        storeBindings: [
          { prop: 'userName', storePath: 'user.name' },
          { prop: 'projects', storePath: 'projects.list' },
        ],
        showWhen: (state) =>
          state.user?.isAuthenticated &&
          state.workflow?.currentStep === 'start',
      },

      // Workflow steps
      {
        component: 'WorkflowStep',
        priority: 3,
        storeBindings: [
          { prop: 'step', storePath: 'workflow.currentStep' },
          { prop: 'data', storePath: 'workflow.data' },
          { prop: 'errors', storePath: 'workflow.validationErrors' },
        ],
        showWhen: (state) =>
          state.user?.isAuthenticated &&
          ['details', 'review'].includes(state.workflow?.currentStep),
      },

      // Completion message
      {
        component: 'CompletionCard',
        priority: 4,
        props: {
          title: 'All Done!',
          message: 'Your workflow is complete.',
        },
        showWhen: (state) => state.workflow?.currentStep === 'complete',
      },

      // Error display
      {
        component: 'ErrorBanner',
        priority: 0, // Show first when there are errors
        storeBindings: [
          { prop: 'errors', storePath: 'workflow.validationErrors' },
        ],
        showWhen: (state) => state.workflow?.validationErrors?.length > 0,
      },
    ],

    // --------------------------------------------
    // RIGHT PANE
    // Context panels and help
    // --------------------------------------------
    rightPane: [
      // Chat widget
      {
        component: 'ChatWidget',
        priority: 1,
        props: {
          title: 'AI Assistant',
          placeholder: 'Ask me anything...',
        },
        storeBindings: [
          { prop: 'messages', storePath: 'chat.messages' },
          { prop: 'isLoading', storePath: 'chat.isLoading' },
        ],
        showWhen: (state) => state.user?.isAuthenticated,
      },

      // Context help
      {
        component: 'HelpPanel',
        priority: 2,
        props: {
          contextual: true,
        },
        storeBindings: [
          { prop: 'currentStep', storePath: 'workflow.currentStep' },
        ],
      },

      // Selected project details
      {
        component: 'ProjectDetails',
        priority: 3,
        storeBindings: [
          { prop: 'project', storePath: 'projects.selected' },
        ],
        showWhen: (state) => state.projects?.selected !== null,
      },
    ],
  },

  // ============================================
  // THEME (optional)
  // ============================================
  theme: {
    primaryColor: '#6366f1',
    secondaryColor: '#f1f5f9',
    logo: '/logos/full-featured.svg',
  },

  // ============================================
  // FEATURES (optional)
  // ============================================
  features: {
    chat: true,
    aiAssistant: true,
    analytics: true,
    experimentalFeatures: false,
  },
};

Registration​

// src/eai.config/index.ts
import { fullFeaturedConfig } from './tenants/full-featured.config';

const configs: Record<string, EAIConfig> = {
  // ... existing configs
  'full-featured': fullFeaturedConfig,
};

Features Demonstrated​

FeatureImplementation
Multi-slice store5 slices with different persistence
Store bindingsProps injected from store
Conditional renderingshowWhen conditions
Priority orderingComponents ordered within slots
Static propsHardcoded configuration
Nested stateDeep object paths
Feature flagsTheme and features sections

Key Patterns​

1. Authentication-Based UI​

showWhen: (state) => state.user?.isAuthenticated

2. Step-Based Workflow​

showWhen: (state) => state.workflow?.currentStep === 'review'

3. Data-Dependent Display​

showWhen: (state) => state.projects?.list?.length > 0

4. Error Handling​

{
  component: 'ErrorBanner',
  priority: 0, // Show first
  showWhen: (state) => state.workflow?.validationErrors?.length > 0,
}