start of ai-based development

2026-07-06 10:44:32 +02:00
parent 6573ec6ac1
commit e50099a0c7
10 changed files with 1203 additions and 26 deletions
@@ -0,0 +1,171 @@
+---
+name: elixforms-css-design-system
+description: >
+  Strategia CSS e design system del progetto elixForms.
+  Documenta come vengono importati i CSS remoti della piattaforma,
+  il layout a griglia elixForms, le classi CSS specifiche della piattaforma,
+  gli stili SCSS modules nella libreria common, e la struttura visiva delle pagine.
+  Attiva questa skill quando lavori sugli stili, sul layout delle pagine,
+  o devi capire come funzionano le classi CSS del design system elixForms.
+---
+
+# CSS e Design System elixForms
+
+## Strategia CSS
+
+Il progetto utilizza **tre livelli di stili**:
+
+1. **CSS remoti** — Design system dell'Università di Parma, caricati via `@import url(...)` da `console-unipr.elixforms.it`
+2. **SCSS Modules** — Stili specifici dei componenti in `common/` (es. `ElixFormsComponent.module.scss`)
+3. **CSS locali** — Stili specifici della pagina (es. `App.css`, `index.css`)
+
+## CSS Remoti (Design System UniPR/elixForms)
+
+Importati in `App.css` di ogni pagina:
+
+```css
+/* CSS principali del design system */
+@import url('https://console-unipr.elixforms.it/elixFormsCustom/css/elixForms.css');
+@import url('https://console-unipr.elixforms.it/rwe2/css/design-bs/bootstrap_adaptation.css');
+@import url('https://console-unipr.elixforms.it/rwe2/css/design-bs/bootstrap_overrides.css');
+@import url('https://console-unipr.elixforms.it/rwe2/css/design-bs/console_user.css');
+@import url('https://console-unipr.elixforms.it/rwe2/css/design-bs/designitalia_adaptation.css');
+@import url('https://console-unipr.elixforms.it/rwe2/css/design-bs/fonts.css');
+@import url('https://console-unipr.elixforms.it/rwe2/css/design-bs/isipcss_overrides.css');
+@import url('https://console-unipr.elixforms.it/rwe2/css/design-bs/iulib.css');
+@import url('https://console-unipr.elixforms.it/rwe2/css/design-bs/print.css');
+@import url('https://console-unipr.elixforms.it/rwe2/css/design-bs/responsive.css');
+@import url('https://console-unipr.elixforms.it/rwe2/css/design-bs/style-bs.css');
+@import url('https://console-unipr.elixforms.it/rwe2/css/design-bs/style.css');
+@import url('https://console-unipr.elixforms.it/rwe2/css/design-bs/util.css');
+@import url('https://console-unipr.elixforms.it/rwe2/css/plugins/modaldisplay.css');
+@import url('https://console-unipr.elixforms.it/rwe2/css/themes/blu-italia.css');
+@import url('https://console-unipr.elixforms.it/rwe2/isipcss/css/grid_fluid.css');
+```
+
+> **IMPORTANTE**: Questi CSS sono caricati a runtime dal CDN e **non vengono bundlati** nel JS.
+> La pagina deve avere connessione internet per visualizzarsi correttamente.
+
+## Layout della Pagina (Struttura HTML)
+
+Le pagine seguono un layout standard elixForms con classi CSS specifiche:
+
+```html
+<div class="container_12" id="pageBody">
+  <div class="grid_12">
+    <div id="userConsole" class="fe-behaviour">
+      
+      <!-- HEADER -->
+      <header>
+        <div class="neutral">
+          <div class="grid_12">
+            <div class="console_header">
+              <div class="leftDiv">
+                <h1>elixForms</h1>
+                <div class="logo"><!-- Logo UniPR --></div>
+              </div>
+              <div class="rightDiv">...</div>
+            </div>
+          </div>
+        </div>
+      </header>
+
+      <!-- CONTENUTO PRINCIPALE -->
+      <div class="grid_12 console_main">
+        <div class="inside">
+          <div class="fe-module-header-container">
+            <h2>Titolo Modulo</h2>
+          </div>
+          <div class="receipt">
+            <div class="container">
+              <!-- Contenuto custom della pagina -->
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- FOOTER -->
+      <footer class="it-footer">
+        <div class="it-footer-main">
+          <div class="container">
+            <div class="subfooter-top">powered by elixForms</div>
+            <div class="subfooter-bottom">versione X.XX.X</div>
+          </div>
+        </div>
+      </footer>
+
+    </div>
+  </div>
+</div>
+```
+
+## Classi CSS del Design System
+
+### Layout a Griglia
+| Classe | Scopo |
+|---|---|
+| `container_12` | Container principale a 12 colonne |
+| `grid_12` | Occupa tutte le 12 colonne |
+| `clear` | Clearfix |
+
+### Struttura Pagina
+| Classe | Scopo |
+|---|---|
+| `fe-behaviour` | Container principale della console utente |
+| `console_header` | Header della console |
+| `console_main` | Area contenuto principale |
+| `fe-module-header-container` | Header del modulo/form |
+| `receipt` | Container del contenuto del form |
+
+### Layout Campi Form (ElixFormsElement)
+| Classe | Scopo |
+|---|---|
+| `iuFieldContainer` | Container di un campo form (label + input) |
+| `attrDisplay_left` | Colonna sinistra (label) |
+| `attrDisplay_right` | Colonna destra (input) |
+| `attrDisplay_label` | Marcatore per la label |
+| `attrDisplay_input` | Marcatore per l'input |
+| `iuLabelContainer` | Container interno della label |
+| `iuInputContainer` | Container interno dell'input |
+| `iuTypeString` | Tipo di input stringa |
+| `iuClearContainer` | Clearfix interno |
+
+### Classi Input FluentUI Custom
+| Classe | Componente |
+|---|---|
+| `isiportalPartialAdminFormFieldSingleLineText` | TextField singola riga |
+| `isiportalPartialAdminFormFieldMultiLineText` | TextField multiriga |
+| `isiportalPartialAdminFormFieldRadio` | ChoiceGroup radio |
+| `isiportalPartialAdminFormFieldSelect` | Dropdown select |
+| `isiportalPartialAdminCheckboxFieldItem` | Checkbox singolo |
+
+## SCSS Modules (common/)
+
+`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.
+
+## Logo e Risorse Esterne
+
+- **Logo UniPR**: `https://console-unipr.elixforms.it/elixFormsCustom/images/logo.png`
+- Le immagini locali vanno in `src/assets/` e importate come moduli ES
+- Le immagini vengono copiate nella `dist/` durante la build
+
+## Note Importanti
+
+1. Il CSS di `index.css` nella pagina `scelta-carriera` è **attualmente tutto commentato** — si usano solo i CSS remoti
+2. Il CSS injection plugin (`vite-plugin-css-injected-by-js`) gestisce solo i CSS locali e SCSS, non gli `@import url(...)` che restano come riferimenti esterni
+3. Per funzionare correttamente, la pagina deployata deve poter raggiungere `console-unipr.elixforms.it`