Temp ML A Components

Una biblioteca de componentes React moderna y ligera, diseñada para crear interfaces de usuario atractivas y funcionales.

Características

• 🎨 Componentes estilizados con SCSS
• 📦 Zero dependencies (excepto React)
• 🎯 TypeScript support
• 📚 Documentación con Storybook
• 🌐 Disponible en CDN (unpkg)
• 📱 Responsive design
• 🎭 Temas personalizables

Instalación

npm install temp-ml-a-components

Uso

Importación en React

import { Button, Card } from 'temp-ml-a-components';

function App() {
  return (
    <div>
      <Button variant="primary">Click me</Button>
      <Card 
        title="Mi Tarjeta"
        description="Esta es una descripción de la tarjeta"
        image="https://example.com/image.jpg"
      >
        Contenido adicional
      </Card>
    </div>
  );
}

Uso directo en HTML

<!-- Incluir React y ReactDOM -->
<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>

<!-- Incluir Temp ML A Components -->
<script src="https://unpkg.com/temp-ml-a-components/dist/temp-components.umd.js"></script>

<div id="app"></div>
<script>
  const { Button, Card } = TempComponents;
  
  ReactDOM.render(
    React.createElement('div', null, [
      React.createElement(Button, { 
        variant: 'primary',
        children: 'Click me'
      }),
      React.createElement(Card, {
        title: 'Mi Tarjeta',
        description: 'Esta es una descripción de la tarjeta',
        image: 'https://example.com/image.jpg',
        children: 'Contenido adicional'
      })
    ]),
    document.getElementById('app')
  );
</script>

Componentes

Button

Un botón personalizable con diferentes variantes y tamaños.

<Button 
  variant="primary" // 'default' | 'primary' | 'secondary'
  size="medium"     // 'small' | 'medium' | 'large'
  disabled={false}
  onClick={() => {}}
>
  Click me
</Button>

Props

| Prop | Tipo | Default | Descripción | |------|------|---------|-------------| | variant | string | 'default' | Estilo del botón | | size | string | 'medium' | Tamaño del botón | | disabled | boolean | false | Estado deshabilitado | | onClick | function | - | Manejador de click |

Card

Una tarjeta flexible con soporte para imagen, título y descripción.

<Card
  variant="default"    // 'default' | 'primary' | 'secondary'
  image="url"          // URL de la imagen (opcional)
  title="Título"       // Título de la tarjeta
  description="Descripción" // Descripción de la tarjeta
  elevation="medium"   // 'low' | 'medium' | 'high'
  padding="medium"     // 'small' | 'medium' | 'large'
>
  Contenido adicional
</Card>

Props

| Prop | Tipo | Default | Descripción | |------|------|---------|-------------| | variant | string | 'default' | Estilo de la tarjeta | | image | string | - | URL de la imagen | | title | string | - | Título de la tarjeta | | description | string | - | Descripción de la tarjeta | | elevation | string | 'medium' | Nivel de elevación | | padding | string | 'medium' | Tamaño del padding |

Desarrollo

# Instalar dependencias
npm install

# Iniciar Storybook
npm run storybook

# Construir
npm run build

Contribuir

Las contribuciones son bienvenidas. Por favor, lee nuestras guías de contribución antes de enviar un pull request.

Licencia

MIT