Skip to main content

Introduzione UI!

Panoramica​

ITlogiX UI è una libreria di componenti UI progettata per progetti React e Next.js, costruita sopra Material UI (MUI) e MUI X.

Compatibilità​

  • Framework supportati: React 18+, Next.js 15+
  • Librerie base: Material UI (MUI v6+), MUI X (per date pickers)

Installazione​

Per installare la libreria nel tuo progetto, assicurati di configurare correttamente l'accesso al registry privato di ITlogiX.

1. Configura il file .npmrc​

Crea (o aggiorna) il file .npmrc nella root del progetto e incolla il seguente contenuto:

@itlogix:registry=https://repository.itlogix.it/api/v4/projects/54/packages/npm/
//repository.itlogix.it/api/v4/projects/54/packages/npm/:_authToken=gldt-z8Y8QycsVxEp8mW5RTyG

AUTHTOKEN va sostituito con il token personale.

2. Installa la libreria​

npm i @itlogix/itlogix-ui

Librerie incluse e peer dependencies​

Di seguito le librerie che vengono installate automaticamente con l'installazione di ITlogiX UI, queste librerie vengono installate perchè sono necessarie al funzionamento della libreria. Non serve installarle separatamente nel progetto.

  • @fortawesome/free-solid-svg-icons
  • @fortawesome/react-fontawesome
  • @mui/material
  • @mui/icons-material
  • @tailwindcss/vite
  • luxon
  • @types/luxon
  • tailwindcss

Utilizzo del ThemeProvider​

Per utilizzare correttamente i componenti della libreria, è necessario racchiudere la tua applicazione con un ThemeWrapper personalizzato. Questo wrapper include il tema MUI esteso e i ThemeProvider forniti da ITlogiX.

Esempio di ThemeWrapper​

'use client';
import { ThemeProvider, createTheme } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';
import { itIT } from '@mui/material/locale';
import { ThemeProvider as ItlogixUiThemeProvider } from "@itlogix/itlogix-ui";

const theme = createTheme({
  //Palette del tema e stile dei componenti
  palette: {
    primary: {
      main: '#5A4DB2',
    },
   ...
  },
}, itIT);

export default function ThemeWrapper({ children }: { children: React.ReactNode }) {
  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <ItlogixUiThemeProvider>
          {children}
      </ItlogixUiThemeProvider>
    </ThemeProvider>
  );
}

🔧 Il tema è compatibile con la struttura dei temi MUI ed è personalizzabile.

Risorse Utili​