AIDAPT Tailwind UI

Questa repository contiene la libreria di componenti React di AIDAPT utilizzata per le sue web-app, usando Tailwind CSS

Struttura

I componenti sono locati all'interno della cartella components. Per ogni componente saranno disponibili le relative stories all'interno della cartella stories, utilizzabili tramite storybook per sperimentare con il componente. Eventuali librerie di supporto saranno locate all'interno della cartella lib.

Utilizzo

Installazione librerie:

npm i

Per avviare Storybook:

npm run storybook

Per eseguire il build della libreria:

npm run build

Per eseguire il formatting della libreria (tramite Prettier):

npm run format

Per eseguire il linting:

npm run lint

Uso della libreria all'interno di un'applicazione.

Per utilizzare la libreria all'interno di un applicazione, ricordarsi di:

• Per aggiungere la libreria all'interno dell'applicazione: npm install @aidapt/tailwind-ui
• Aggiungere la cartella della libreria all'interno della proprietà content del file tailwind.config.js per evitare il pruning delle relative classi CSS:

content: [
    './node_modules/@aidapt/tailwind-ui/dist/**/*.{js,jsx,ts,tsx}',
],

• Definire, all'interno della file tailwind.config.js del proprio progetto, i colori primary e transparent.
• Definire un file index.css dove sono definiti i font, colori nella light e dark theme e altro (e.g. scrollbar e scrollbar nella aitable). Per esempio:

@tailwind base;
@tailwind components;
@tailwind utilities;

* {
    font-family: 'Inter', sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings: 'slnt' 0;
}

:root {
    --color-primary-200: #d4e4f7;
    --color-primary-400: #93bcec;
    --color-primary-600: #3d80ce;
    --color-primary-800: #1b5598;
    --color-primary-900: #0f3057;

    --color-gray-100: #f8f9fa;
    --color-gray-200: #f1f3f5;
    --color-gray-300: #eaecef;
    --color-gray-400: #dfe2e6;
    --color-gray-500: #cfd4d9;
    --color-gray-600: #878e95;
    --color-gray-800: #4a5056;
    --color-gray-900: #22252a;

    --color-white: #ffffff;
    --color-black: #000000;

    --color-danger-200: #fecaca;
    --color-danger-400: #f79191;
    --color-danger-600: #ca3a31;
    --color-danger-800: #900a00;

    --color-warning-200: #ffe9ae;
    --color-warning-400: #f7d477;
    --color-warning-600: #e2b53e;
    --color-warning-800: #a87b03;

    --color-success-200: #c9f5cd;
    --color-success-400: #8ce795;
    --color-success-600: #51aa59;
    --color-success-800: #0b7515;
}

.dark {
    --color-primary-200: #233a5f;
    --color-primary-400: #588dca;
    --color-primary-600: #93bcec;
    --color-primary-800: #b3d1f4;
    --color-primary-900: #d4e4f7;

    --color-gray-100: #22252a;
    --color-gray-200: #2a2d32;
    --color-gray-300: #3e4349;
    --color-gray-400: #484d53;
    --color-gray-500: #52575d;
    --color-gray-600: #6c7177;
    --color-gray-800: #d6dce2;
    --color-gray-900: #d9dcdf;

    --color-white: #000000;
    --color-black: #ffffff;

    --color-danger-200: #900a00;
    --color-danger-400: #ca3a31;
    --color-danger-600: #f79191;
    --color-danger-800: #fecaca;

    --color-warning-200: #a87b03;
    --color-warning-400: #e2b53e;
    --color-warning-600: #f7d477;
    --color-warning-800: #ffe9ae;

    --color-success-200: #0b7515;
    --color-success-400: #51aa59;
    --color-success-600: #8ce795;
    --color-success-800: #c9f5cd;
}

::-webkit-scrollbar {
    width: 3px;
}

::-webkit-scrollbar-thumb {
    @apply bg-primary-800 rounded-xl;
}

.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

/* For IE, Edge and Firefox */
.scrollbar-hide {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}

.aitable::-webkit-scrollbar {
    width: 0px;
    height: 6px;
}

.aitable::-webkit-scrollbar-track {
    margin-top: 4px;
    margin-bottom: 4px;
}

.aitable::-webkit-scrollbar-thumb {
    @apply bg-gray-500 rounded-xl;
}