Global Context

System that manages shared configuration and state — the "command center" that coordinates all of schepta.

---

Provider Pattern centralizes configurations that all components need to share:

🔧 What It Does:

Configuration	Scope	Benefit	Example
Component Registry	Global	Standardized components	MUI as default
Middleware Stack	Global	Consistent behavior	Uniform validation
Theme Configuration	Global	Visual identity	Colors and fonts
Context Providers	Global	Shared state	User, permissions, locale

📊 Configuration Hierarchy:

Provider Hierarchy:

scheptaProvider (App Level)
    ├── Global Component Registry
    ├── Global Middleware  
    ├── Theme Provider
    └── Context Providers
        └── FormFactory/MenuFactory (Local)
            ├── Local Component Overrides
            └── Local Middleware Overrides

Quick Example:

<scheptaProvider
  components={{ InputText: MUITextField, Button: MUIButton }}
  middleware={{ withValidation, withAnalytics }}
  theme={{ primary: '#007ACC' }}
>
  <App />
</scheptaProvider>

💡 Result: Configure once → Available throughout the application.

---

🚀 Provider Types

Each provider manages a specific aspect of the system:

🎨 scheptaProvider - Master Provider:

Configuration	Purpose	Default	Override Level
components	Global component registry	Built-in components	Local factory props
middleware	Global middleware stack	Basic middleware	Local factory props
theme	Visual theme configuration	Default theme	CSS/styled-components
debug	Debug panel configuration	Auto (dev mode)	Environment variables
cache	Caching strategy	React Query defaults	Provider props

🎛️ Component Registry Provider:

Registration Type	Scope	Priority	Use Case
Default Registry	System-wide	Lowest	Built-in components
Global Registry	Application-wide	Medium	Consistent UI library
Local Registry	Factory-specific	Highest	Component overrides
Dynamic Registry	Runtime	Variable	A/B testing, themes

🔧 Middleware Provider:

Middleware Type	Scope	Execution	Purpose
Core Middleware	System	Always executed	Essential functionality
Global Middleware	Application	Configurable	Consistent behavior
Local Middleware	Factory	Override/extend	Specific functionality
Conditional Middleware	Context-based	Conditional	Role/tenant specific

🎨 Theme Provider:

Theme Aspect	Configuration	Inheritance	Override
Colors	Primary, secondary, etc.	CSS variables	Component props
Typography	Fonts, sizes, weights	CSS cascade	Inline styles
Spacing	Margins, padding, grid	CSS classes	Component styles
Components	Default component styles	Theme object	Component overrides

---

⚙️ Provider Architecture

How the provider system works:

📋 Provider Initialization:

Phase	Process	Result	Dependencies
1. Provider Setup	Initialize provider context	Context available	None
2. Registry Registration	Register global components	Global registry populated	Component definitions
3. Middleware Registration	Register global middleware	Middleware stack ready	Middleware functions
4. Theme Initialization	Setup theme context	Theme available	Theme configuration
5. Context Propagation	Propagate to child components	Providers active	React/Vue context

🎯 Context Propagation:

React Context Usage:

// Provider contexts
const scheptaContext = createContext<scheptaConfig>();
const ComponentRegistryContext = createContext<ComponentRegistry>();
const MiddlewareContext = createContext<MiddlewareStack>();
const ThemeContext = createContext<ThemeConfig>();

// Hook access
const useschepta = () => useContext(scheptaContext);
const useComponentRegistry = () => useContext(ComponentRegistryContext);
const useMiddleware = () => useContext(MiddlewareContext);
const usescheptaTheme = () => useContext(ThemeContext);

Configuration Inheritance:

const mergedConfig = {
  // Default configuration
  ...defaultscheptaConfig,
  
  // Provider configuration  
  ...providerConfig,
  
  // Runtime overrides
  ...runtimeConfig
};

---

📊 Configuration Patterns

Common provider configuration patterns:

🎯 Application-Level Patterns:

Pattern	Use Case	Configuration	Benefits
Single Theme	Consistent app	One theme config	Visual consistency
Multi-Theme	White-label app	Theme per tenant	Brand flexibility
Component Library	Design system	Consistent components	Development speed
Micro-frontends	Distributed app	Scoped configurations	Team independence

🔧 Component Library Integration:

Material-UI Integration:

<scheptaProvider
  components={{
    InputText: MuiTextField,
    Button: MuiButton,
    Select: MuiSelect,
    Checkbox: MuiCheckbox
  }}
  theme={{
    palette: {
      primary: { main: '#1976d2' },
      secondary: { main: '#dc004e' }
    }
  }}
>
  <App />
</scheptaProvider>

Ant Design Integration:

<scheptaProvider
  components={{
    InputText: AntInput,
    Button: AntButton,
    Select: AntSelect,
    Checkbox: AntCheckbox
  }}
  theme={{
    token: {
      colorPrimary: '#1890ff',
      colorSuccess: '#52c41a'
    }
  }}
>
  <App />
</scheptaProvider>

🎨 Multi-Tenant Configuration:

Tenant-Specific Providers:

const TenantProvider = ({ tenant, children }) => {
  const tenantConfig = getTenantConfig(tenant);
  
  return (
    <scheptaProvider
      components={tenantConfig.components}
      theme={tenantConfig.theme}
      middleware={tenantConfig.middleware}
    >
      {children}
    </scheptaProvider>
  );
};

---

💡 Related Concepts

Provider Pattern manages configuration for all other concepts:

• 01. Factories: Factories use Provider configuration
• 04. Schema Resolution: Resolution uses Provider context
• 05. Renderer: Renderers resolved via Provider registry
• 06. Middleware: Middleware registered in Provider
• 07. Debug System: Debug configured via Provider