switch to bootstrap italia through AI
This commit is contained in:
@@ -12,7 +12,7 @@ description: >
|
||||
|
||||
## Panoramica
|
||||
|
||||
La cartella `react/common/` contiene la libreria condivisa di componenti React/TypeScript usata da tutte le pagine custom. È basata su **Fluent UI React v8** e implementa un sistema di form con campi dinamici.
|
||||
La cartella `react/common/` contiene la libreria condivisa di componenti React/TypeScript usata da tutte le pagine custom. È basata su **Bootstrap Italia + HTML nativo** e implementa un sistema di form con campi dinamici.
|
||||
|
||||
## Architettura dei Componenti
|
||||
|
||||
@@ -103,7 +103,7 @@ var myElixFormsReact = new ElixForms.ElixFormsReact({
|
||||
|
||||
### Tipi di Campo Supportati
|
||||
|
||||
| Metodo Factory | Componente FluentUI | HTML Output |
|
||||
| Metodo Factory | Componente Bootstrap Italia | HTML Output |
|
||||
|---|---|---|
|
||||
| `createTextInput` | `TextField` | Text input |
|
||||
| `createTextAreaInput` | `TextField` (multiline) | Textarea |
|
||||
|
||||
@@ -50,7 +50,7 @@ npm install -D sass-embedded
|
||||
}
|
||||
```
|
||||
|
||||
> **Nota**: React, ReactDOM e FluentUI NON vanno nel package.json della pagina.
|
||||
> **Nota**: React e ReactDOM NON vanno nel package.json della pagina.
|
||||
> Sono nel `react/package.json` root e vengono risolti via hoisting di npm.
|
||||
|
||||
## Step 3: Configurare vite.config.js
|
||||
|
||||
@@ -130,7 +130,7 @@ Le pagine seguono un layout standard elixForms con classi CSS specifiche:
|
||||
| `iuTypeString` | Tipo di input stringa |
|
||||
| `iuClearContainer` | Clearfix interno |
|
||||
|
||||
### Classi Input FluentUI Custom
|
||||
### Classi Input Bootstrap Italia Custom
|
||||
| Classe | Componente |
|
||||
|---|---|
|
||||
| `isiportalPartialAdminFormFieldSingleLineText` | TextField singola riga |
|
||||
@@ -143,20 +143,13 @@ Le pagine seguono un layout standard elixForms con classi CSS specifiche:
|
||||
|
||||
`ElixFormsComponent.module.scss`:
|
||||
```scss
|
||||
@import '~@fluentui/react/dist/sass/References.scss';
|
||||
|
||||
.elixFormsComponent {
|
||||
overflow: hidden;
|
||||
padding: 1em;
|
||||
color: "[theme:bodyText, default: #323130]";
|
||||
color: var(--bodyText);
|
||||
&.teams {
|
||||
font-family: $ms-font-family-fallbacks;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
> **Nota**: Gli stili usano il **theming di FluentUI** con variabili CSS e placeholder di tema SharePoint.
|
||||
> **Nota**: Gli stili usano classi Bootstrap Italia e CSS del design system UniPR, senza dipendenze da FluentUI.
|
||||
|
||||
## Logo e Risorse Esterne
|
||||
|
||||
|
||||
@@ -118,13 +118,13 @@ I valori verranno letti da `QueryParamHelper` e pre-popoleranno i campi del form
|
||||
|
||||
```
|
||||
react/ ← npm install qui per dipendenze condivise
|
||||
├── node_modules/ ← react, react-dom, @fluentui/react
|
||||
├── node_modules/ ← react, react-dom
|
||||
├── package.json
|
||||
└── scelta-carriera/ ← npm install qui per devDependencies
|
||||
├── node_modules/ ← vite, eslint, plugin, sass-embedded
|
||||
└── package.json
|
||||
```
|
||||
|
||||
> **Nota**: Le dipendenze runtime (React, FluentUI) sono nel `package.json` root.
|
||||
> **Nota**: Le dipendenze runtime (React, ReactDOM) sono nel `package.json` root.
|
||||
> Le dipendenze di sviluppo (Vite, ESLint) sono nel `package.json` della pagina.
|
||||
> npm risolve le dipendenze risalendo la gerarchia delle cartelle (hoisting).
|
||||
|
||||
@@ -12,7 +12,7 @@ description: >
|
||||
|
||||
## Panoramica
|
||||
|
||||
Questo progetto è un **monorepo** per la creazione di pagine web React custom destinate alla piattaforma **elixForms** dell'Università di Parma (UniPR). Ogni pagina è un micro-progetto indipendente che produce un **singolo file JS bundle** contenente React, Fluent UI, CSS e il codice custom, da pubblicare su un server remoto.
|
||||
Questo progetto è un **monorepo** per la creazione di pagine web React custom destinate alla piattaforma **elixForms** dell'Università di Parma (UniPR). Ogni pagina è un micro-progetto indipendente che produce un **singolo file JS bundle** contenente React, Bootstrap Italia e il codice custom, da pubblicare su un server remoto.
|
||||
|
||||
## Struttura del Workspace
|
||||
|
||||
@@ -21,7 +21,7 @@ elixforms-custom-pages/ ← Root del workspace (VS Code)
|
||||
├── .vscode/ ← Configurazioni VS Code (launch, tasks)
|
||||
├── docs/ ← Documentazione (PDF manuali)
|
||||
└── react/ ← Root del monorepo React
|
||||
├── package.json ← Dipendenze condivise (React, ReactDOM, FluentUI)
|
||||
├── package.json ← Dipendenze condivise (React, ReactDOM)
|
||||
├── tsconfig.base.json ← Configurazione TypeScript base condivisa
|
||||
├── .gitignore
|
||||
├── common/ ← Libreria condivisa di componenti ElixForms
|
||||
@@ -58,7 +58,7 @@ Ogni pagina (es. `scelta-carriera/`) è un progetto Vite completamente autonomo
|
||||
|
||||
1. **Importa dalla libreria `common/`** tramite alias `@common` configurato in `vite.config.js`
|
||||
2. **Ha le proprie dipendenze** nel suo `package.json` (solo devDependencies e plugin Vite)
|
||||
3. **Condivide le dipendenze runtime** (React, ReactDOM, FluentUI) dal `package.json` root di `react/`
|
||||
3. **Condivide le dipendenze runtime** (React, ReactDOM) dal `package.json` root di `react/`
|
||||
4. **Produce un singolo file JS** tramite la configurazione Rollup in `vite.config.js`
|
||||
5. **Estende il tsconfig base** per avere configurazione TypeScript coerente
|
||||
|
||||
@@ -67,7 +67,6 @@ Ogni pagina (es. `scelta-carriera/`) è un progetto Vite completamente autonomo
|
||||
Le dipendenze runtime sono hoisted al livello `react/`:
|
||||
- `react` ^19.2.7
|
||||
- `react-dom` ^19.2.5
|
||||
- `@fluentui/react` ^8.125.6
|
||||
|
||||
## Configurazione TypeScript
|
||||
|
||||
@@ -121,7 +120,7 @@ server.fs.allow: [".."] // Permette import da common/
|
||||
|
||||
Le pagine caricano CSS dal server remoto elixForms tramite `@import url(...)` in `App.css`:
|
||||
- CSS da `console-unipr.elixforms.it` per il design system dell'università
|
||||
- I componenti FluentUI usano stili inline/theme nativi
|
||||
- I componenti Bootstrap Italia usano classi HTML e CSS del design system UniPR
|
||||
- SCSS modules sono usati in `common/` per stili dei componenti condivisi
|
||||
- `sass-embedded` è installato come devDependency per supporto SCSS
|
||||
|
||||
|
||||
@@ -106,9 +106,6 @@ import { IElixFormsComponentProperties } from './IElixFormsComponentProperties';
|
||||
### Import di Moduli
|
||||
|
||||
```tsx
|
||||
// Fluent UI - import tutto il namespace
|
||||
import * as FluentUI from '@fluentui/react';
|
||||
|
||||
// React - import specifici
|
||||
import { Component, type FormEvent, type JSX, useState } from 'react';
|
||||
import React from 'react';
|
||||
@@ -167,8 +164,8 @@ declare module "*.png";
|
||||
- Usare `this.setState` con spread operator per update immutabili
|
||||
- I checkbox mantengono un `Map<string, number[]>` separato
|
||||
|
||||
5. **Fluent UI**:
|
||||
- Usare Fluent UI React v8 (`@fluentui/react`)
|
||||
- Componenti: `TextField`, `Checkbox`, `ChoiceGroup`, `Dropdown`, `Label`, `Stack`
|
||||
- Le opzioni radio usano `IChoiceGroupOption[]`
|
||||
- Le opzioni dropdown usano `IDropdownOption[]`
|
||||
5. **Bootstrap Italia**:
|
||||
- Usare markup HTML nativo con classi Bootstrap Italia e del design system UniPR
|
||||
- Per i campi testuali usare `input`, `textarea`, `select` con classi `form-control`/`form-select`
|
||||
- Per i checkbox/radio usare `input type="checkbox"`/`input type="radio"` con classi `form-check-input`
|
||||
- Il layout dei campi deve rimanere compatibile con `ElixFormsElement`
|
||||
|
||||
@@ -105,7 +105,7 @@ npm run lint
|
||||
|
||||
```
|
||||
dist/
|
||||
<nome-pagina>.js ← Bundle unico (React + FluentUI + CSS + codice)
|
||||
<nome-pagina>.js ← Bundle unico (React + CSS + codice)
|
||||
<nome-pagina>.js.map ← Source map
|
||||
*.png, *.svg ← Asset referenziati nel codice
|
||||
```
|
||||
@@ -121,10 +121,10 @@ dist/
|
||||
- **Fix**: Verificare `resolve.alias` e che la cartella `common/` esista
|
||||
|
||||
### Bundle troppo grande
|
||||
- **Causa**: FluentUI include molti componenti
|
||||
- **Causa**: l'uso di componenti UI pesanti o CSS non ottimizzati
|
||||
- **Fix possibili**:
|
||||
- Tree shaking (import specifici: `import { TextField } from '@fluentui/react'`)
|
||||
- Considerare `@fluentui/react-components` (v9) per bundle più piccoli
|
||||
- Mantenere i CSS locali limitati e affidarsi ai CSS remoti del design system
|
||||
- Evitare dipendenze UI pesanti per le pagine custom
|
||||
- Esternalizzare React se la pagina host lo fornisce già
|
||||
|
||||
### CSS non applicato in produzione
|
||||
|
||||
Reference in New Issue
Block a user