Skip to content

Contexto Global

Sistema que gerencia configurações e estado compartilhado — o "centro de comando" que coordena todo o schepta.

Provider

Provider Pattern centraliza configurações que todos os componentes precisam compartilhar:

🔧 O Que Faz:

ConfiguraçãoEscopoBenefícioExemplo
Component RegistryGlobalComponentes padronizadosMUI como padrão
Middleware StackGlobalComportamento consistenteValidação uniforme
Context ProvidersGlobalEstado compartilhadoUser, permissions, locale

📊 Hierarquia de Configuração:

Provider Hierarchy:

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

Exemplo Rápido:

jsx
<scheptaProvider
  components={{ InputText: MUITextField, Button: MUIButton }}
  middleware={{ withValidation, withAnalytics }}
>
  <App />
</scheptaProvider>

💡 Resultado: Configuração uma vez → Disponível em toda aplicação.

🚀 Tipos de Provider

Cada provider gerencia um aspecto específico do sistema:

🎨 scheptaProvider - Master Provider:

ConfigurationPurposeDefaultOverride Level
componentsGlobal component registryBuilt-in componentsLocal factory props
middlewareGlobal middleware stackBasic middlewareLocal factory props
debugDebug panel configurationAuto (dev mode)Environment variables

🎛️ Component Registry Provider:

Registration TypeScopePriorityUse Case
Default RegistrySystem-wideLowestBuilt-in components
Global RegistryApplication-wideMediumConsistent UI library
Local RegistryFactory-specificHighestComponent overrides
Dynamic RegistryRuntimeVariableA/B testing, themes

🔧 Middleware Provider:

Middleware TypeScopeExecutionPurpose
Core MiddlewareSystemAlways executedEssential functionality
Global MiddlewareApplicationConfigurableConsistent behavior
Local MiddlewareFactoryOverride/extendSpecific functionality
Conditional MiddlewareContext-basedConditionalRole/tenant specific

⚙️ Provider Architecture

Como o sistema de providers funciona:

📋 Provider Initialization:

PhaseProcessResultDependencies
1. Provider SetupInitialize provider contextContext availableNone
2. Registry RegistrationRegister global componentsGlobal registry populatedComponent definitions
3. Middleware RegistrationRegister global middlewareMiddleware stack readyMiddleware functions
4. Context PropagationPropagate to child componentsProviders activeReact/Vue context

🎯 Context Propagation:

React Context Usage:

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

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

Configuration Inheritance:

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

📊 Configuration Patterns

Padrões comuns de configuração do provider:

🎯 Application-Level Patterns:

PatternUse CaseConfigurationBenefits
Component LibraryDesign systemConsistent componentsDevelopment speed
Micro-frontendsDistributed appScoped configurationsTeam independence

🔧 Component Library Integration:

Material-UI Integration:

typescript
<scheptaProvider
  components={{
    InputText: MuiTextField,
    Button: MuiButton,
    Select: MuiSelect,
    Checkbox: MuiCheckbox
  }}
>
  <App />
</scheptaProvider>

Ant Design Integration:

typescript
<scheptaProvider
  components={{
    InputText: AntInput,
    Button: AntButton,
    Select: AntSelect,
    Checkbox: AntCheckbox
  }}
>
  <App />
</scheptaProvider>

🎨 Multi-Tenant Configuration:

Tenant-Specific Providers:

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

💡 Conceitos Relacionados

Provider Pattern gerencia configuração de todos os outros conceitos: