Questa repository contiene la libreria di componenti React di AIDAPT utilizzata per le sue web-app, usando Tailwind CSS
npm install @aidapt/tailwind-uiQuesta repository contiene la libreria di componenti React di AIDAPT utilizzata per le sue web-app, usando Tailwind CSS
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.
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
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.index.css
- Definire un file dove sono definiti i font, colori nella light e dark theme e altro (e.g. scrollbar e scrollbar nella aitable). Per esempio:
`css
@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;
}
``