ML Temp Components

Una colección de componentes React reutilizables con estilos incluidos.

Instalación

npm install ml-temp-components

Uso

Importación en React

import { Button, Card } from 'ml-temp-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

<script src="https://unpkg.com/ml-temp-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.

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

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>

Desarrollo

# Instalar dependencias
npm install

# Iniciar Storybook
npm run storybook

# Construir
npm run build

Licencia

MIT