@eui/cli 22.0.0-alpha.6 → 22.0.0-alpha.60

package/lib/build.js

@@ -5,11 +5,7 @@ const utils = require('./utils');
 const config = require('./config');
 
 module.exports.start = (options) => {
-    try {
-      build(options.config, options.targetPath)
-    } catch (e) {
-      throw e;
-    }
+    build(options.config, options.targetPath);
 }
 
 const build = (cliConfig, targetPath) => {
@@ -33,6 +29,14 @@ const build = (cliConfig, targetPath) => {
             copyAngular(angularPath, cliConfig, true);
       }
 
+      // BUILD REACT
+      if (appType === 'react') {
+            console.log('---building react');
+            const reactPath = utils.getAngularPath(targetPath, appName, appType, artifactId);
+            console.log(reactPath);
+            copyReact(reactPath, cliConfig);
+      }
+
       // BUILD web-maven
       if (appType === 'web-maven') {
             console.log('--building web-maven');
@@ -63,12 +67,29 @@ const copyAngular = (targetPath, cliConfig, overwrite = true) => {
         utils.copydir(config.angularBaseMobilePath, targetPath, overwrite);
       }
 
-      if (cliConfig.appOptions === 'ecl') {
+      // appOptions may be a plain string (interactive mode) or an array (automated `--config`
+      // parses `appOptions` on `_`, e.g. `ecl_something` -> ['ecl', ...]). Normalize to an array.
+      const appOptions = [].concat(cliConfig.appOptions || []);
+
+      if (appOptions.includes('ecl')) {
         console.log(`eUI ECL theme selected : ` + cliConfig.appOptionsEclTheme);
         utils.copydir(config.optionsPath[cliConfig.appOptionsEclTheme], targetPath, true);
       }
 
+      if (appOptions.includes('eds')) {
+        console.log(`eUI EDS desktop app-shell selected`);
+        utils.copydir(config.edsOptionPath, targetPath, true);
+      }
+
+      if (cliConfig.packageManager === 'pnpm') {
+        utils.copy(path.join(config.pnpmOptionPath.angular, 'package.json'), path.join(targetPath, 'package.json'));
+      }
+}
+
+const copyReact = (targetPath, cliConfig) => {
+      utils.copydir(config.reactBasePath, targetPath, true);
+
       if (cliConfig.packageManager === 'pnpm') {
-        utils.copy(path.join(config.pnpmOptionPath, 'package.json'), path.join(targetPath, 'package.json'));
+        utils.copy(path.join(config.pnpmOptionPath.react, 'package.json'), path.join(targetPath, 'package.json'));
       }
 }

package/lib/cli.js

@@ -50,9 +50,11 @@ module.exports.start = async (options) => {
 
     const appTypePrompt = new Select({
       name: 'appType',
-      message: 'Select an eUI Angular application type :',
+      message: 'Select an eUI application type :',
       choices: [
         'Desktop',
+        'Desktop EDS',
+        'React EDS',
         'Mobile Ionic',
         'eUI + Spring Boot web module - JDK + Maven required !!!',
         'eUI + Maven web module (JEE Spring maven web module) - JDK + Maven required !!!'
@@ -64,12 +66,22 @@ module.exports.start = async (options) => {
     // Map display name to value
     const appTypeMap = {
       'Desktop': 'angular',
+      'Desktop EDS': 'angular',
+      'React EDS': 'react',
       'Mobile Ionic': 'mobile',
       'eUI + Spring Boot web module - JDK + Maven required !!!': 'web-spring-boot',
       'eUI + Maven web module (JEE Spring maven web module) - JDK + Maven required !!!': 'web-maven'
     };
     answers.appType = appTypeMap[appTypeChoice];
 
+    // "Desktop EDS" is an Angular desktop app whose shell is composed with @eui/eds (eds-shell +
+    // EDS components) instead of the legacy @eui/components app-shell. It pre-selects the `eds`
+    // app-shell option, so the ECL/default app-shell prompt below is skipped for it.
+    const isEdsDesktop = appTypeChoice === 'Desktop EDS';
+    if (isEdsDesktop) {
+      answers.appOptions = 'eds';
+    }
+
     if (answers.appType === 'web-spring-boot') {
       const groupIdPrompt = new Input({
         name: 'groupId',
@@ -88,7 +100,9 @@ module.exports.start = async (options) => {
       answers.artifactId = await artifactIdPrompt.run();
     }
 
-    if (answers.appType !== 'mobile') {
+    // ECL app-shell options apply to the Angular-based types only (not mobile, not react, and
+    // not when the EDS desktop shell was already chosen up-front).
+    if (answers.appType !== 'mobile' && answers.appType !== 'react' && !isEdsDesktop) {
       const appOptionsPrompt = new Select({
         name: 'appOptions',
         message: 'Select one or more additional configuration options :',

package/lib/config.js

@@ -9,6 +9,8 @@ module.exports.skeletonsPath = skeletonsPath;
 module.exports.angularBasePath = path.join(skeletonsPath, '_angular/base');
 module.exports.angularBaseMobilePath = path.join(skeletonsPath, '_angular/base-mobile');
 
+module.exports.reactBasePath = path.join(skeletonsPath, '_react/base');
+
 module.exports.webMavenPath = path.join(skeletonsPath, 'web-maven');
 module.exports.webSpringBootPath = path.join(skeletonsPath, 'web-spring-boot');
 
@@ -19,7 +21,14 @@ module.exports.optionsPath = {
     "ecl-ec": path.join(skeletonsPath, '_angular/options/ecl-ec'),
     "ecl-eu": path.join(skeletonsPath, '_angular/options/ecl-eu'),
 };
-module.exports.pnpmOptionPath = path.join(skeletonsPath, '_angular/options/pnpm');
+// pnpm package.json overlays, keyed by the app stack (Angular vs React). The pnpm variant lists
+// all dependencies explicitly (no @eui/deps-* meta-package) since pnpm is stricter about
+// hoisting; each stack needs its own set.
+module.exports.pnpmOptionPath = {
+    angular: path.join(skeletonsPath, '_angular/options/pnpm'),
+    react: path.join(skeletonsPath, '_react/options/pnpm'),
+};
+module.exports.edsOptionPath = path.join(skeletonsPath, '_angular/options/eds');
 
 module.exports.version = version;
 

package/lib/skeletons/_angular/base/mock/app/routes/{index.js → index.cjs}

@@ -1,4 +1,4 @@
-const userRoutes = require('./user_routes');
+const userRoutes = require('./user_routes.cjs');
 
 module.exports = function (app, db) {
     userRoutes(app, db);

package/lib/skeletons/_angular/base/mock/app/routes/{user_routes.js → user_routes.cjs}

@@ -1,4 +1,4 @@
-const User = require('../models/user');
+const User = require('../models/user.cjs');
 const uuid = require('uuid');
 
 module.exports = function (app, db) {

package/lib/skeletons/_angular/base/mock/{server.js → server.cjs}

@@ -16,7 +16,7 @@ app.use(bodyParser.urlencoded({ extended: true }));
 //     credentials: true,
 // }));
 
-require('./app/routes')(app, db);
+require('./app/routes/index.cjs')(app, db);
 
 app.listen(port, () => {
     console.log('We are live on ' + port);

package/lib/skeletons/_angular/base/package.json

@@ -1,10 +1,10 @@
 {
     "name": "eui-angular-app",
-    "version": "22.0.0-alpha.6",
+    "version": "22.0.0-alpha.60",
     "license": "EUPL-1.1",
     "scripts": {
         "ng": "ng",
-        "start-mock-server": "nodemon --watch ./mock ./mock/server.js",
+        "start-mock-server": "nodemon --watch ./mock ./mock/server.cjs",
         "start-serve": "eui-cli serve-app --configuration=proxy-mock --configEnvTarget=mock",
         "start": "npm-run-all --parallel start-mock-server start-serve",
         "start-proxy": "eui-cli serve-app --configuration=proxy",
@@ -20,9 +20,10 @@
     },
     "private": true,
     "dependencies": {
-        "@eui/deps-base": "22.0.0-alpha.6"
+        "@eui/deps-base": "22.0.0-alpha.60"
     },
     "devDependencies": {
+        "@eui/deps-base-dev": "22.0.0-alpha.60",
         "npm-run-all": "4.1.5",
         "json-server": "1.0.0-beta.3",
         "nodemon": "3.1.11",

package/lib/skeletons/_angular/base-mobile/package.json

@@ -1,10 +1,10 @@
 {
     "name": "eui-angular-app",
-    "version": "22.0.0-alpha.6",
+    "version": "22.0.0-alpha.60",
     "license": "EUPL-1.1",
     "scripts": {
         "ng": "ng",
-        "start-mock-server": "nodemon --watch ./mock ./mock/server.js",
+        "start-mock-server": "nodemon --watch ./mock ./mock/server.cjs",
         "start-serve": "eui-cli serve-app --configuration=proxy-mock --configEnvTarget=mock",
         "start": "npm-run-all --parallel start-mock-server start-serve",
         "start-proxy": "eui-cli serve-app --configuration=proxy",
@@ -21,8 +21,9 @@
     "private": true,
     "dependencies": {
         "@eui/deps-base-next": "19.3.17",
-        "@eui/mobile-core": "20.0.2",
-        "@eui/mobile-styles": "20.0.2"
+        "@eui/mobile-core": "22.0.0-alpha.1",
+        "@eui/mobile-styles": "22.0.0-alpha.1",
+        "@eui/deps-base": "22.0.0-alpha.60"
     },
     "resolutions": {
         "js-yaml": ">=3.13.1",

package/lib/skeletons/_angular/options/eds/src/app/app.component.html

@@ -0,0 +1,35 @@
+<eds-shell>
+    <!-- Toolbar -->
+    <eds-shell-toolbar>
+        <eds-shell-menu-toggle (menuToggle)="onToggleSidebar()"></eds-shell-menu-toggle>
+        <eds-shell-toolbar-logo></eds-shell-toolbar-logo>
+        <eds-shell-toolbar-environment>MOCK</eds-shell-toolbar-environment>
+        <eds-shell-toolbar-app appName="appName"></eds-shell-toolbar-app>
+
+        <eds-shell-toolbar-end>
+            <button edsIconButton color="brand" icon="bell" ariaLabel="Notifications"></button>
+            <button edsIconButton color="brand" icon="gear" ariaLabel="Settings"></button>
+            <eds-user-profile
+                fullName="John Doe"
+                [isShowUserInfos]="false"
+                [isShowAvatarInitials]="true">
+                <eds-user-profile-menu>
+                    <eds-user-profile-menu-item>{{ 'eui.my-profile-informations' | translate }}</eds-user-profile-menu-item>
+                    <eds-user-profile-menu-item>{{ 'eui.sign-out' | translate }}</eds-user-profile-menu-item>
+                </eds-user-profile-menu>
+            </eds-user-profile>
+        </eds-shell-toolbar-end>
+    </eds-shell-toolbar>
+
+    <!-- Sidebar -->
+    <eds-shell-sidebar collapseMode="icons">
+        <eds-shell-sidebar-nav [items]="sidebarItems" [hasIcons]="true"></eds-shell-sidebar-nav>
+    </eds-shell-sidebar>
+
+    <!-- Main content -->
+    <eds-shell-content>
+        <router-outlet></router-outlet>
+    </eds-shell-content>
+
+    <eds-shell-footer copyright="© European Union"></eds-shell-footer>
+</eds-shell>

package/lib/skeletons/_angular/options/eds/src/app/app.component.spec.ts

@@ -0,0 +1,56 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { RouterModule } from '@angular/router';
+import { AppComponent } from './app.component';
+import { EDS_SHELL } from '@eui/eds/eds-shell';
+import { routes } from './app.routes';
+import { provideHttpClientTesting } from '@angular/common/http/testing';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
+import { AppStarterService } from './app-starter.service';
+import { CONFIG_TOKEN, I18nService, I18nState, translateConfig, UserService } from '@eui/core';
+import { EuiAppConfig } from '@eui/core';
+import { Observable, of } from 'rxjs';
+import { provideTranslateService } from '@ngx-translate/core';
+import { describe, it, beforeEach, expect, vi } from 'vitest';
+// eslint-disable-next-line
+type SpyObj<T> = { [K in keyof T]: T[K] extends (...args: any[]) => any ? ReturnType<typeof vi.fn> : T[K] };
+describe('AppComponent', () => {
+    let component: AppComponent;
+    let fixture: ComponentFixture<AppComponent>;
+    let userServiceMock: SpyObj<UserService>;
+    let i18nServiceMock: SpyObj<I18nService>;
+    let configMock: EuiAppConfig;
+    beforeEach(async () => {
+        type GetStateReturnType<T> = T extends keyof I18nState ? Observable<I18nState[T]> : Observable<I18nState>;
+        userServiceMock = { init: vi.fn() } as SpyObj<UserService>;
+        i18nServiceMock = {
+            init: vi.fn(),
+            getState: vi.fn(<K extends keyof I18nState>(key?: K): GetStateReturnType<K> => {
+                if (typeof key === 'string') {
+                    return of({ activeLang: 'en' }[key]) as GetStateReturnType<K>;
+                }
+                return of({ activeLang: 'en' }) as GetStateReturnType<K>;
+            })
+        } as SpyObj<I18nService>;
+        configMock = {global: {}, modules: {core: {base: 'localhost:3000', userDetails: 'dummy'}}};
+        await TestBed.configureTestingModule({
+            imports: [
+                RouterModule.forRoot(routes),
+                ...EDS_SHELL,
+                provideTranslateService(translateConfig),
+            ],
+            providers: [
+                provideHttpClient(withInterceptorsFromDi()),
+                provideHttpClientTesting(),
+                AppStarterService,
+                {provide: UserService, useValue: userServiceMock},
+                {provide: I18nService, useValue: i18nServiceMock},
+                {provide: CONFIG_TOKEN, useValue: configMock},
+            ],
+        }).compileComponents();
+        fixture = TestBed.createComponent(AppComponent);
+        component = fixture.componentInstance;
+    });
+    it('should create the app', () => {
+        expect(component).toBeTruthy();
+    });
+});

package/lib/skeletons/_angular/options/eds/src/app/app.component.ts

@@ -0,0 +1,44 @@
+import { Component, viewChild } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
+import { TranslatePipe } from '@ngx-translate/core';
+import { EDS_SHELL, EdsShell, EdsMenuItem } from '@eui/eds/eds-shell';
+import { EDS_ICON_BUTTON } from '@eui/eds/eds-icon-button';
+import { EDS_USER_PROFILE } from '@eui/eds/eds-user-profile';
+
+/**
+ * Desktop EDS application shell. Mirrors the default Angular desktop skeleton (same routes,
+ * features, config and interceptors) but composes the layout with the modern `@eui/eds`
+ * `eds-shell` and EDS components instead of the legacy `@eui/components` `eui-app`.
+ *
+ * The sidebar nav items carry a `url` that the `eds-menu` resolves through Angular's router
+ * (`[routerLink]`), so navigation is declarative — no manual `navigate()` call is needed.
+ */
+@Component({
+    selector: 'app-root',
+    templateUrl: './app.component.html',
+    imports: [
+        RouterOutlet,
+        TranslatePipe,
+        ...EDS_SHELL,
+        ...EDS_ICON_BUTTON,
+        ...EDS_USER_PROFILE,
+    ],
+})
+export class AppComponent {
+    private shell = viewChild.required(EdsShell);
+
+    sidebarItems: EdsMenuItem[] = [
+        { label: 'Home', url: 'screen/home', icon: 'house' },
+        {
+            label: 'Module 1', url: 'screen/module1', icon: 'stack', children: [
+                { label: 'page 1', url: 'screen/module1/page1' },
+                { label: 'page 2', url: 'screen/module1/page2' },
+            ],
+        },
+        { label: 'Module 2', url: 'screen/module2', icon: 'folder' },
+    ];
+
+    onToggleSidebar(): void {
+        this.shell().toggleSidebar();
+    }
+}

package/lib/skeletons/_angular/options/eds/src/index.html

@@ -0,0 +1,21 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Application name</title>
+  <base href="/">
+
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+</head>
+
+<!-- The `eui-21` scope class is required by EDS styling (it provides the --eds-* tokens). -->
+<body class="eui-21">
+  <app-root>
+    <div id="loader-wrapper">
+      <div id="loader"></div>
+    </div>
+  </app-root>
+</body>
+
+</html>

package/lib/skeletons/_angular/options/pnpm/package.json

@@ -1,71 +1,121 @@
 {
     "name": "eui-angular-app",
-    "version": "22.0.0-alpha.6",
+    "version": "22.0.0-alpha.60",
     "license": "EUPL-1.1",
     "scripts": {
         "ng": "ng",
-        "start-mock-server": "nodemon --watch ./mock ./mock/server.js",
-        "start-serve": "eui-cli serve-app --configuration=proxy-mock",
+        "start-mock-server": "nodemon --watch ./mock ./mock/server.cjs",
+        "start-serve": "eui-cli serve-app --configuration=proxy-mock --configEnvTarget=mock",
         "start": "npm-run-all --parallel start-mock-server start-serve",
         "start-proxy": "eui-cli serve-app --configuration=proxy",
         "start-local": "eui-cli serve-app",
         "build": "eui-cli build-app",
         "build-dev": "eui-cli build-app --configuration=development --configEnvTarget=dev",
-        "build-prod": "eui-cli build-app --configuration=production-optimized --configEnvTarget=prod --skipLint --skipTest",
-        "app:inject-config": "eui-cli inject-config-app"
+        "build-prod": "eui-cli build-app --configuration=production-optimized --configEnvTarget=prod",
+        "build-prod-skip-test": "eui-cli build-app --configuration=production-optimized --configEnvTarget=prod --skipTest",
+        "build-prod-stats": "eui-cli build-app --configuration=production-optimized --configEnvTarget=prod",
+        "app:build": "eui-cli build-app",
+        "app:inject-config": "eui-cli inject-config-app",
+        "generate-sprite": "eui-cli generate-sprite"
     },
     "private": true,
     "dependencies": {
-        "@angular/animations": "21.2.5",
-        "@angular/common": "21.2.5",
-        "@angular/compiler": "21.2.5",
-        "@angular/core": "21.2.5",
-        "@angular/forms": "21.2.5",
-        "@angular/platform-browser": "21.2.5",
-        "@angular/platform-browser-dynamic": "21.2.5",
-        "@angular/router": "21.2.5",
-        "@angular/elements": "21.2.5",
-        "@angular/language-service": "21.2.5",
-        "@angular/service-worker": "21.2.5",
-        "@angular/cdk": "21.2.3",
-        "@angular/material": "21.2.3",
-        "@angular/material-moment-adapter": "21.2.3",
-        "@angular-devkit/build-angular": "21.2.3",
+        "@angular/animations": "22.2.0",
+        "@angular/common": "22.2.0",
+        "@angular/compiler": "22.2.0",
+        "@angular/core": "22.2.0",
+        "@angular/forms": "22.2.0",
+        "@angular/platform-browser": "22.2.0",
+        "@angular/platform-browser-dynamic": "22.2.0",
+        "@angular/router": "22.2.0",
+        "@angular/elements": "22.2.0",
+        "@angular/service-worker": "22.2.0",
+        "@angular/cdk": "22.2.0",
+        "@angular/material": "22.2.0",
+        "@angular/material-moment-adapter": "22.2.0",
+        "@angular/material-luxon-adapter": "22.2.0",
+        "luxon": "3.7.2",
         "rxjs": "7.8.2",
         "tslib": "2.8.1",
-        "zone.js": "0.15.1",
-        "@types/lodash": "4.17.20",
-        "intl": "1.2.5",
-        "deepmerge-ts": "7.1.5",
-        "@ngx-translate/core": "15.0.0",
-        "@ngx-translate/http-loader": "8.0.0",
-        "reselect": "5.1.1",
-        "ngx-mask": "20.0.3",
-        "hammerjs": "2.0.8",
-        "pikaday": "1.8.2",
-        "lodash-es": "4.17.23",
+        "zone.js": "0.16.2",
+        "deepmerge-ts": "8.0.1",
+        "deepmerge": "4.3.1",
+        "reselect": "5.2.0",
+        "ngx-mask": "22.0.1",
+        "@ngx-translate/core": "18.0.0",
+        "@ngx-translate/http-loader": "18.0.0",
+        "lodash-es": "4.18.1",
         "localforage": "1.10.0",
-        "@eui/base": "22.0.0-alpha.6",
-        "@eui/core": "22.0.0-alpha.6",
-        "@eui/styles": "22.0.0-alpha.6",
-        "@eui/components": "22.0.0-alpha.6",
-        "@eui/ecl": "22.0.0-alpha.6",
-        "@eui/eds": "22.0.0-alpha.6",
-        "@eui/eds-styles": "22.0.0-alpha.6"
+        "@duetds/date-picker": "1.4.0",
+        "embla-carousel": "8.6.0",
+        "embla-carousel-reactive-utils": "8.6.0",
+        "embla-carousel-angular": "22.0.0",
+        "embla-carousel-auto-scroll": "8.6.0",
+        "moment": "2.31.0",
+        "quill": "2.0.3",
+        "quill-delta": "5.1.0",
+        "quill-better-table": "1.2.10",
+        "apexcharts": "5.16.0",
+        "marked": "18.0.5",
+        "ngx-markdown": "22.0.0",
+        "prismjs": "1.30.0",
+        "@stackblitz/sdk": "1.11.1",
+        "@eui/base": "22.0.0-alpha.60",
+        "@eui/core": "22.0.0-alpha.60",
+        "@eui/styles": "22.0.0-alpha.60",
+        "@eui/components": "22.0.0-alpha.60",
+        "@eui/showcase": "22.0.0-alpha.60",
+        "@eui/ecl": "22.0.0-alpha.60",
+        "@eui/eds": "22.0.0-alpha.60",
+        "@eui/eds-styles": "22.0.0-alpha.60",
+        "@eui/eds-wc": "22.0.0-alpha.25",
+        "@eui/eds-shared": "22.0.0-alpha.60"
     },
     "devDependencies": {
-        "@angular/compiler-cli": "21.2.5",
-        "@angular/build": "21.2.3",
-        "@angular/cli": "21.2.3",
-        "ng-packagr": "23.0.0-alpha.1",
-        "@eui/cli": "22.0.0-alpha.6",
-        "typescript": "~6.0.2",
+        "@eui/cli": "22.0.0-alpha.60",
+        "@angular/compiler-cli": "22.2.0",
+        "@angular/language-service": "22.2.0",
+        "@angular/build": "22.2.0",
+        "@angular/cli": "22.2.0",
+        "ng-packagr": "22.2.2",
+        "typescript": "6.0.3",
+        "@types/node": "24.13.3",
+        "@types/lodash-es": "4.17.12",
+        "@types/quill": "2.0.14",
+        "ts-node": "10.9.2",
+        "eslint": "10.11.0",
+        "angular-eslint": "22.5.0",
+        "@angular-eslint/builder": "22.5.0",
+        "@angular-eslint/eslint-plugin": "22.5.0",
+        "@angular-eslint/eslint-plugin-template": "22.5.0",
+        "@angular-eslint/schematics": "22.5.0",
+        "@angular-eslint/template-parser": "22.5.0",
+        "eslint-plugin-prefer-arrow": "1.2.3",
+        "eslint-plugin-jsdoc": "63.0.12",
+        "eslint-plugin-import": "2.32.0",
+        "typescript-eslint": "8.63.0",
+        "@typescript-eslint/parser": "8.63.0",
+        "@typescript-eslint/eslint-plugin": "8.63.0",
+        "@eslint/js": "9.39.1",
+        "@eslint/eslintrc": "3.3.5",
+        "vitest": "4.1.11",
+        "@vitest/ui": "4.1.11",
+        "@vitest/coverage-v8": "4.1.11",
+        "@vitest/coverage-istanbul": "4.1.11",
+        "jsdom": "30.0.1",
+        "xhr-mock": "2.5.1",
+        "@compodoc/compodoc": "2.0.0",
         "npm-run-all": "4.1.5",
         "json-server": "1.0.0-beta.3",
-        "nodemon": "3.1.10",
+        "nodemon": "3.1.11",
         "lowdb": "1.0.0",
-        "body-parser": "2.2.0",
-        "express": "5.1.0",
-        "uuid": "13.0.0"
+        "body-parser": "1.20.3",
+        "express": "4.21.2"
+    },
+    "resolutions": {
+        "semver": ">=7.5.2",
+        "dompurify": ">=3.2.4",
+        "tmp": ">0.2.4",
+        "tablesort": "5.6.0"
     }
 }

package/lib/skeletons/_react/base/README.md

@@ -0,0 +1,65 @@
+# eUI React App
+
+A React + Vite starter application built with [`@eui/eds-react`](https://eui.ecdevops.eu) — the
+pure-React port of the EU Design System (EDS) components — and React Router.
+
+## Prerequisites
+
+- Node.js `^20.19.0 || ^22.12.0 || >=24.15.0`
+- Yarn 1.x (or pnpm)
+
+## Getting started
+
+Install dependencies (done automatically by the eUI CLI when you opt in):
+
+```sh
+yarn
+```
+
+Start the dev server (opens on http://localhost:4200):
+
+```sh
+npm start
+```
+
+## Available scripts
+
+| Script | Description |
+| --- | --- |
+| `npm start` | Start the Vite dev server with HMR |
+| `npm run build` | Type-check and build the production bundle into `dist/` |
+| `npm run preview` | Preview the production build locally |
+| `npm run lint` | Lint the `src` folder with ESLint |
+| `npm run test` | Run unit tests with Vitest |
+
+## Project structure
+
+```
+├── index.html          # App entry; <body class="eui-21"> provides the EDS token scope
+├── vite.config.ts      # Vite config; serves EDS icon sprites under /assets/eds
+├── tsconfig*.json       # TypeScript project references
+├── eslint.config.mjs   # Flat ESLint config (single quotes, TS recommended)
+└── src/
+    ├── main.tsx        # Mounts <App/> in a HashRouter; loads EDS + component styles
+    ├── App.tsx         # The EdsShell (toolbar + sidebar + routed content)
+    ├── routes.ts       # Navigation table (sidebar items)
+    ├── styles.css      # App-level styles
+    └── pages/          # Route pages (home, about)
+```
+
+## Adding a page
+
+1. Create `src/pages/my-page.tsx` exporting a component.
+2. Add an entry to `NAV_ITEMS` in `src/routes.ts` (path, label, EDS icon name).
+3. Add a `<Route>` for it in `src/App.tsx`.
+
+## Styling
+
+The EDS design tokens (`--eds-*`) are provided by `@eui/eds-styles` and are available anywhere
+under the `eui-21` scope (set on `<body>`). Prefer the `eds-u-*` utility classes for layout. All
+`@eui/eds-react` component styles are loaded via the combined `@eui/eds-react/styles.css` barrel
+in `main.tsx`; to reduce bundle size you can instead import only the per-component CSS you use.
+
+## License
+
+EUPL-1.1

package/lib/skeletons/_react/base/eslint.config.mjs

@@ -0,0 +1,17 @@
+import js from '@eslint/js';
+import tseslint from 'typescript-eslint';
+
+export default tseslint.config(
+    { ignores: ['dist', 'node_modules'] },
+    {
+        files: ['src/**/*.{ts,tsx}'],
+        extends: [js.configs.recommended, ...tseslint.configs.recommended],
+        rules: {
+            quotes: ['error', 'single', { avoidEscape: true }],
+            '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
+            '@typescript-eslint/no-explicit-any': 'warn',
+            'prefer-const': 'error',
+            'no-var': 'error',
+        },
+    },
+);