ng-core-ui

Libreria UI condivisa per le applicazioni GPA. Fornisce layout, componenti, gestione token/ambiente, routing pre-configurati, temi Angular Material 3 e utility Tailwind CSS v4.

• Pacchetto: @gpa-gruppo-progetti-avanzati-srl/ng-core-ui
• Versione: 0.1.0
• Angular: 22.x · Material: 22.x · Tailwind: 4.x · TypeScript: 6.x
• Documentazione completa: github.com/GPA-Gruppo-Progetti-Avanzati-SRL/ng-core-ui/wiki

Installazione rapida

ng new my-app --routing --style=scss
cd my-app
ng add @gpa-gruppo-progetti-avanzati-srl/ng-core-ui

Lo schematic configura automaticamente Angular Material, Tailwind, routing, layout, font e tutto il necessario.

→ Guida completa: Getting Started

Dichiarazione rotte

// src/app/app.routes.config.ts
export const APP_ROUTES: CoreRoute[] = [
  {
    id: 'cap:my-app:ui:home',
    path: '',
    description: 'Home',
    icon: 'home',
    menu: true,
    order: 0,
    loadComponent: () => import('./pages/home/home.component').then(m => m.HomeComponent),
  },
];

→ Routing e permessi

Layout disponibili

| Componente | Layout | Documentazione | |-----------|--------|----------------| | FullLayoutComponent | Sidenav sinistra + toolbar + app-switcher destra | Layout Full | | RightLayoutComponent | Toolbar + app-switcher destra (senza sidenav) | Layout Right | | SimpleLayoutComponent | Solo toolbar minimale | Layout Simple |

Seleziona il layout in toRoutes():

// app.config.ts
provideRouter(toRoutes(APP_ROUTES))               // default: 'full'
provideRouter(toRoutes(APP_ROUTES, { layout: 'right' }))
provideRouter(toRoutes(APP_ROUTES, { layout: 'simple' }))

Componenti disponibili

| Componente | Selettore | Documentazione | |-----------|-----------|----------------| | CardComponent | core-card | Card | | TopbarComponent | core-topbar | Topbar | | PageHeaderComponent | core-page-header | Page Header | | ToastComponent | core-toast | Toast | | LoadingOverlayComponent | core-loading-overlay | Loading Overlay | | DatatableComponent | core-datatable | DataTable | | ConfirmComponent | core-confirm | Confirm | | AlertComponent | core-alert | Alert |

core-toast, core-confirm e core-alert sono già inclusi in FullLayoutComponent e RightLayoutComponent.

Claude Code Skills

Per lavorare su questa libreria con Claude Code è disponibile una skill dedicata che fornisce contesto su FormShell, DataTable, bootstrap, theming e schematics.

Prerequisiti (se non già installati):

npx skills add angular/skills
npx skills add smithery.ai

Skill ng-core-ui:

npx skills add GPA-Gruppo-Progetti-Avanzati-SRL/ng-core-skills

La skill viene caricata automaticamente in ogni sessione Claude Code all'interno di questo workspace.

Pubblicazione (maintainer)

# 1. Aggiorna la versione in projects/ng-core-ui/package.json
# 2. Committa e tagga
git tag 0.1.0
git push origin 0.1.0

La pubblicazione su npm avviene automaticamente via GitHub Actions al push del tag.

# Build locale
npm run build:lib

Sviluppato da GPA — Gruppo Progetti Avanzati s.r.l.