@pragma-dev-kit/pragma-ds-react

⚛️ Librería de componentes React para Pragma Design System

📦 Instalación

npm install @pragma-dev-kit/pragma-ds-react

O con yarn:

yarn add @pragma-dev-kit/pragma-ds-react

⚙️ Configuración

1. Importar estilos y definir elementos personalizados

Configura los estilos globales y elementos personalizados en tu archivo main.jsx o main.tsx:

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.jsx';

// 🎨 Importar estilos globales
import '@pragma-dev-kit/pragma-ds/dist/pragma-ds/pragma-ds.css';

// 🔧 Definir elementos personalizados
import { defineCustomElements } from '@pragma-dev-kit/pragma-ds-react';

// Inicializar componentes web
defineCustomElements();

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
);

🚀 Uso de componentes

Ejemplo básico

import React from 'react';
import { PdsButton, PdsInput, PdsCheckbox } from '@pragma-dev-kit/pragma-ds-react';

function App() {
  return (
    <div className="app-container">
      <h1>Mi aplicación con Pragma DS</h1>

      <PdsInput label="Nombre" placeholder="Ingresa tu nombre" />

      <PdsCheckbox label="Acepto términos y condiciones" />

      <PdsButton variant="primary">Enviar</PdsButton>
    </div>
  );
}

export default App;

Ejemplo con estado y eventos

import React, { useState } from 'react';
import { PdsButton, PdsInput, PdsToast } from '@pragma-dev-kit/pragma-ds-react';

function FormExample() {
  const [name, setName] = useState('');
  const [showToast, setShowToast] = useState(false);

  const handleSubmit = () => {
    setShowToast(true);
  };

  return (
    <div>
      <PdsInput
        label="Nombre"
        value={name}
        onInput={(e) => setName(e.target.value)}
      />

      <PdsButton variant="primary" onClick={handleSubmit}>
        Enviar
      </PdsButton>

      {showToast && <PdsToast message="Formulario enviado con éxito" />}
    </div>
  );
}

📋 Componentes disponibles

• PdsButton - Botones con diferentes variantes (primary, secondary, tertiary)
• PdsInput - Campos de entrada de texto
• PdsTextarea - Áreas de texto multilínea
• PdsCheckbox - Casillas de verificación
• PdsRadio - Botones de radio
• PdsToggle - Interruptores de encendido/apagado
• PdsDropdown - Menús desplegables
• PdsAvatar - Avatares de usuario
• PdsCard - Tarjetas de contenido
• PdsBreadcrumb - Navegación de migas de pan
• PdsPagination - Paginación de contenido
• PdsToast - Notificaciones toast
• PdsTooltip - Tooltips informativos
• PdsIcon - Iconos del sistema
• PdsIconButton - Botones con iconos
• PdsAccordion - Acordeones expandibles
• PdsTab - Pestañas de navegación
• PdsTables - Tablas de datos
• PdsTags - Etiquetas
• PdsLoading - Indicadores de carga
• PdsStepper - Pasos de proceso
• PdsSearch - Barra de búsqueda
• PdsFilter - Filtros
• PdsCalendar - Calendario

💡 Tips y mejores prácticas

✅ Recomendaciones

• Usa componentes funcionales: Los hooks de React funcionan perfectamente con Pragma DS
• Maneja el estado correctamente: Usa useState y useEffect para controlar el estado
• Implementa validación: Crea hooks personalizados para validación de formularios
• Optimiza renders: Usa React.memo para componentes que no cambian frecuentemente

⚠️ Consideraciones

• Compatibilidad: Requiere React 18 o superior
• Elementos personalizados: Asegúrate de llamar defineCustomElements() antes de usar los componentes
• Estilos globales: Los estilos CSS deben importarse una sola vez en el punto de entrada

📚 Documentación

Para ver ejemplos interactivos y documentación completa de cada componente, visita nuestro Storybook.

🔗 Enlaces útiles

• Documentación de React
• Guía de hooks
• NPM Package
• Repositorio GitHub

🐛 Reportar problemas

Si encuentras algún problema o tienes sugerencias, por favor abre un issue en nuestro repositorio de GitHub.

📄 Licencia

ISC