Modyo Docs

# Visión General Técnica

Dynamic Framework es un framework de componentes React especializado para aplicaciones financieras, construido sobre Bootstrap 5 y optimizado para arquitecturas de micro frontends.

# Arquitectura

# Estructura de Componentes

@dynamic-framework/
├── ui-react/           # Componentes React
│   ├── components/     # 30+ componentes UI
│   ├── hooks/         # Custom React hooks
│   └── utils/         # Utilidades
├── styles/            # Sistema de diseño
│   ├── theme/         # Variables y temas
│   └── components/    # Estilos por componente
└── widgets/           # Widgets standalone

# Stack Tecnológico

  • React 18+: Con Hooks, Suspense y Concurrent Features
  • TypeScript: Tipado estático completo
  • Bootstrap 5.3+: Base del sistema de diseño
  • Webpack 5: Module Federation para micro frontends
  • CSS Modules: Estilos encapsulados
  • PostCSS: Procesamiento avanzado de CSS

# Componentes Core

# Categorías de Componentes

  1. Layout Components

    • Container, Grid, Row, Col
    • Flexbox utilities
    • Spacing system

  2. Data Display

    • Tables con sorting y filtering
    • Cards con múltiples variantes
    • Lists y ListGroups

  3. Forms & Inputs

    • Input con validación integrada
    • Select, Checkbox, Radio
    • DatePicker, TimePicker
    • Form validation hooks

  4. Navigation

    • Navbar responsive
    • Sidebar con sub-menús
    • Breadcrumbs
    • Pagination

  5. Feedback

    • Alerts y Toasts
    • Modals y Dialogs
    • Progress indicators
    • Spinners y Skeletons

  6. Financial Components

    • AccountCard
    • TransactionList
    • BalanceDisplay
    • CurrencyInput

# Patrones de Implementación

# Component API Pattern

// Composición flexible
<Card>
  <Card.Header>
    <Card.Title>Título</Card.Title>
  </Card.Header>
  <Card.Body>
    Contenido
  </Card.Body>
  <Card.Footer>
    <Button>Acción</Button>
  </Card.Footer>
</Card>

# Hook Pattern

// Custom hooks para lógica reutilizable
const { 
  data, 
  loading, 
  error, 
  refetch 
} = useApiData('/api/accounts');

# Theme Provider Pattern

// Theming centralizado
<ThemeProvider theme={customTheme}>
  <App />
</ThemeProvider>

# Sistema de Diseño

# Design Tokens

// Variables CSS personalizables
:root {
  // Colores
  --df-primary: #0066ff;
  --df-secondary: #6c757d;
  
  // Espaciado
  --df-spacing-xs: 0.25rem;
  --df-spacing-sm: 0.5rem;
  --df-spacing-md: 1rem;
  
  // Tipografía
  --df-font-family: 'Inter', sans-serif;
  --df-font-size-base: 1rem;
  
  // Bordes
  --df-border-radius: 0.375rem;
  --df-border-width: 1px;
}

# Responsive Breakpoints

// Bootstrap 5 breakpoints
$breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

# Micro Frontends

# Module Federation Config

// webpack.config.js
module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'app',
      filename: 'remoteEntry.js',
      exposes: {
        './Component': './src/Component'
      },
      shared: {
        react: { singleton: true },
        'react-dom': { singleton: true },
        '@dynamic-framework/ui-react': { singleton: true }
      }
    })
  ]
};

# Lazy Loading

// Code splitting automático
const Dashboard = lazy(() => import('./Dashboard'));

function App() {
  return (
    <Suspense fallback={<Spinner />}>
      <Dashboard />
    </Suspense>
  );
}

# Performance

# Optimizaciones Incluidas

  • Tree Shaking: Solo importa lo necesario
  • Code Splitting: Carga por demanda
  • Memoization: React.memo en componentes
  • Virtual Scrolling: Para listas largas
  • Image Optimization: Lazy loading de imágenes
  • CSS-in-JS: Estilos críticos inline

# Bundle Size

@dynamic-framework/ui-react: ~150KB gzipped
├── react: 42KB
├── components: 85KB
└── styles: 23KB

# Testing

# Testing Stack

{
  "jest": "^29.0.0",
  "@testing-library/react": "^14.0.0",
  "@testing-library/jest-dom": "^6.0.0",
  "cypress": "^13.0.0"
}

# Testing Patterns

// Unit testing
describe('Button', () => {
  it('renders correctly', () => {
    render(<Button>Click me</Button>);
    expect(screen.getByText('Click me')).toBeInTheDocument();
  });
});

// Integration testing
describe('TransferForm', () => {
  it('submits transfer data', async () => {
    const onSubmit = jest.fn();
    render(<TransferForm onSubmit={onSubmit} />);
    
    // Fill form...
    fireEvent.click(screen.getByText('Submit'));
    
    await waitFor(() => {
      expect(onSubmit).toHaveBeenCalled();
    });
  });
});

# Build Tools

# Development Server

# Webpack Dev Server con HMR
npm start
# Disponible en http://localhost:8080

# Production Build

# Optimized production build
npm run build
# Output en dist/

# Análisis de Bundle

# Bundle analyzer
npm run analyze

# Integración con Modyo

# Modyo CLI

# Inicializar proyecto
npx @modyo/cli init

# Push a Modyo
npx @modyo/cli push

# Pull from Modyo
npx @modyo/cli pull

# Widget Registration

// Registro de widget en Modyo
window.registerWidget({
  name: 'MyWidget',
  component: MyWidget,
  props: {
    // Props del widget
  }
});

# Versionado

# Semantic Versioning

@dynamic-framework/ui-react@1.27.0
│                           │ │ │
│                           │ │ └─ Patch: Bug fixes
│                           │ └─── Minor: New features
│                           └───── Major: Breaking changes

# Release Cycle

  • Patch releases: Semanalmente
  • Minor releases: Mensualmente
  • Major releases: Anualmente

# Recursos Técnicos

← Inicio Rápido con Dynamic Framework →