Installazione

npm install test-lib190402 react-icons

CSS

Assicurati di importare i file CSS per gli stili predefiniti:

import 'test-lib190402/dist/styles.css'

Table

Utilizzo Table

import React from 'react';
import Table from './components/Table/Table';

const data = [
  { id: 1, nome: 'Mario Rossi', email: '[email protected]', età: 30 },
  { id: 2, nome: 'Luigi Verdi', email: '[email protected]', età: 25 },
  { id: 3, nome: 'Anna Bianchi', email: '[email protected]', età: 28 }
];

function App() {
  return (
    <Table 
      tableData={data}
      searchColumn="nome"
      sortColumn="età"
    />
  );
}

Props

Props Principali

| Prop | Tipo | Default | Descrizione | |------|------|---------|-------------| | tableData | Record<string, any>[] | Richiesto | Array di oggetti contenente i dati da visualizzare | | searchColumn | string | undefined | Colonna specifica per la ricerca (se non specificata, cerca in tutte) | | sortColumn | string | undefined | Colonna da utilizzare per l'ordinamento | | defaultSortDirection | 'ascending' \| 'descending' | undefined | Direzione di ordinamento predefinita | | rowsPerPageOptions | number[] | [5, 10, 20, 50] | Opzioni per il numero di righe per pagina |

Props per le Azioni

| Prop | Tipo | Default | Descrizione | |------|------|---------|-------------| | canView | BaseAction | { enabled: false, isOutside: false } | Configurazione per l'azione "visualizza" | | canEdit | BaseAction | { enabled: false, isOutside: false } | Configurazione per l'azione "modifica" | | canDelete | BaseAction | { enabled: false, isOutside: false } | Configurazione per l'azione "elimina" | | customActions | CustomAction[] | [] | Array di azioni personalizzate | | onAction | (action: string, item: Record<string, any>) => void | () => {} | Callback per gestire le azioni | | customButton | ButtonProps | {} | Props per un pulsante personalizzato nella toolbar |

Props per lo Stile

| Prop | Tipo | Default | Descrizione | |------|------|---------|-------------| | background | 'main' \| 'transparent' | 'transparent' | Stile di sfondo della tabella | | tableStyle | CSSProperties | {} | Stili CSS per la tabella | | headerStyle | CSSProperties | {} | Stili CSS per l'header | | rowStyle | CSSProperties | {} | Stili CSS per le righe | | cellStyle | CSSProperties | {} | Stili CSS per le celle |

Button Component

Utilizzo Button

import React from 'react';
import Button from './components/Button/Button';
import { MdAdd, MdArrowForward } from 'react-icons/md';

function App() {
  const handleClick = (event) => {
    console.log('Button clicked!', event);
  };

  return (
    <div>
      {/* Button base */}
      <Button 
        label="Click Me" 
        onClick={handleClick} 
      />

      {/* Button con icone */}
      <Button 
        label="Aggiungi"
        background="main"
        startContent={<MdAdd />}
        onClick={handleClick}
      />

      {/* Button outlined con icona finale */}
      <Button 
        label="Continua"
        background="outlined"
        labelColor="dark"
        endContent={<MdArrowForward />}
        onClick={handleClick}
      />
    </div>
  );
}

Props Button

| Prop | Tipo | Default | Descrizione | |------|------|---------|-------------| | background | 'main' \| 'outlined' \| 'transparent' | 'main' | Stile di sfondo del pulsante | | label | string | 'Button Text' | Testo da visualizzare nel pulsante | | labelColor | 'dark' \| 'light' | 'dark' | Colore del testo | | onClick | (event: MouseEvent<HTMLButtonElement>) => void | undefined | Funzione da eseguire al click | | startContent | ReactNode | null | Contenuto (icona) prima del testo | | endContent | ReactNode | null | Contenuto (icona) dopo il testo |

Card Component

Utilizzo Card

import React from 'react';
import Card from './components/Card/Card';

function App() {
  const cardButton = {
    label: "Visualizza Dettagli",
    background: "main",
    onClick: () => console.log('Card button clicked!')
  };

  return (
    <Card 
      image="https://example.com/wine-bottle.jpg"
      background="main"
      button={cardButton}
    />
  );
}

Props Card

| Prop | Tipo | Default | Descrizione | |------|------|---------|-------------| | background | 'main' \| 'transparent' | 'transparent' | Stile di sfondo della carta | | label | string | undefined | Etichetta aggiuntiva (attualmente non utilizzata) | | labelColor | 'dark' \| 'light' | 'light' | Colore dell'etichetta | | button | ButtonProps | {} | Props per il pulsante integrato | | image | string | Richiesto | URL dell'immagine di sfondo | | cardStyle | CSSProperties | {} | Stili CSS per il contenitore principale | | titleStyle | CSSProperties | {} | Stili CSS per il titolo | | descriptionStyle | CSSProperties | {} | Stili CSS per la descrizione | | imageStyle | CSSProperties | { backgroundImage: ... } | Stili CSS per l'immagine |

Esempio

import './App.css';
import { Button, Card, Table } from 'test-lib190402'
import { MdArchive, MdStar, MdAdd } from 'react-icons/md';
import 'test-lib190402/dist/styles.css'

function App() {
  return (
    <div style={{
      minHeight: '100vh',
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      flexDirection: 'column',
      backgroundColor: '#333',
      gap: 20
    }}>
      <Button
        background='transparent'
        label='Duplica'
        labelColor='light'
        onClick={() => alert('ciao') }
      />
      <Card
        background='transparent'
        labelColor='light'
        button={{
          background: 'main',
          label: 'Duplica',
          labelColor: 'light',
          onClick: () => alert('ciao')
        }}
        image='https://storage.googleapis.com/trusty-media-bucket/products/731248be-8ab2-415c-ab19-a503398b5593/9fad56da-0be0-4f1c-a425-00b07b4a39aa.png'
        titleStyle={{
          textTransform: 'uppercase',
          fontWeight: 800,
          fontSize: 18
        }}
      />
      <div style={{ width: 1280 }}>
        <Table
          tableData={[
            { id: 1, name: 'Supernova X Smartphone', category: 'Electronics', price: 899.90 },
            { id: 2, name: 'ProBook 15 Laptop', category: 'Electronics', price: 1250.00 },
            { id: 3, name: 'SoundWave Wireless Headphones', category: 'Electronics', price: 199.50 },
            { id: 4, name: 'The Path to the Spiders\' Nests - Italo Calvino', category: 'Books', price: 12.00 },
            { id: 5, name: 'Sapiens: A Brief History of Humankind - Yuval Noah Harari', category: 'Books', price: 22.00 },
            { id: 6, name: 'Egyptian Cotton Towel Set', category: 'Home', price: 45.99 },
            { id: 7, name: '"Easy Espresso" Pod Coffee Machine', category: 'Home', price: 89.00 },
            { id: 8, name: 'Organic Cotton T-shirt', category: 'Clothing', price: 29.95 },
            { id: 9, name: 'Slim Fit Jeans', category: 'Clothing', price: 79.90 },
            { id: 10, name: '1L Extra Virgin Olive Oil', category: 'Groceries', price: 8.50 },
            { id: 11, name: '2-Slice Steel Toaster', category: 'Home', price: 39.99 },
            { id: 12, name: '40L Hiking Backpack', category: 'Sports', price: 65.00 },
            { id: 13, name: 'ActiveFit 5 Smartwatch', category: 'Electronics', price: 249.00 },
            { id: 14, name: 'NexusPad 10 Tablet', category: 'Electronics', price: 450.50 },
            { id: 15, name: '34" UltraWide Curved Monitor', category: 'Electronics', price: 620.00 },
            { id: 16, name: '"The Name of the Rose" - Umberto Eco', category: 'Books', price: 15.50 },
          ]}
          searchColumn='name'
          sortColumn='name'
          defaultSortDirection='ascending'
          rowsPerPageOptions={[4, 8, 16]}
          canView={{
            enabled: true,
            isOutside: true,
            onClick: (item) => alert(`Custom View Clicked for: ${item.name}`),
          }}
          canEdit={{
            enabled: true,
            isOutside: false,
            onClick: (item) => alert(`Custom Edit Clicked for: ${item.name}`),
          }}
          canDelete={{
            enabled: true,
            isOutside: false,
          }}
          customActions={[
            {
              label: 'Archive',
              icon: <MdArchive />,
              onClick: (item) => alert(`Archiving item: ${item.name}`),
              isOutside: true,
              disabled: false,
            },
            {
              label: 'Add to Favorites',
              icon: <MdStar />,
              onClick: (item) => alert(`Adding ${item.name} to favorites`),
              isOutside: false,
              disabled: true,
            },
          ]}
          onAction={(action, item) => alert(`General 'onAction' Fired for: '${action}' on item: ${item.name}`)}
          customButton={{
            label: 'Create',
            background: 'transparent',
            labelColor: 'light',
            onClick: () => alert('Create button clicked!'),
            startContent: <MdAdd style={{ fontSize: 18 }} />
          }}
        />
      </div>
    </div>
  );
}

export default App;