@eui/cli 22.0.0-alpha.21 → 22.0.0-alpha.23

package/lib/skeletons/_react/base/src/App.tsx

@@ -0,0 +1,73 @@
+import { Routes, Route, Navigate, useNavigate, useLocation } from 'react-router-dom';
+import {
+    EdsShell,
+    EdsShellToolbar,
+    EdsShellToolbarApp,
+    EdsShellMenuToggle,
+    EdsShellSidebar,
+    EdsShellSidebarNav,
+    EdsShellSidebarFooter,
+    EdsShellContent,
+    EdsShellFooter,
+    type EdsMenuItem,
+} from '@eui/eds-react/eds-shell';
+
+import { NAV_ITEMS } from './routes.js';
+import { HomePage } from './pages/home.js';
+import { AboutPage } from './pages/about.js';
+
+/**
+ * The application shell — an `EdsShell` with a toolbar, a collapsible sidebar navigation, and a
+ * routed content area. Routing is owned by the app (React Router `HashRouter`, set up in
+ * `main.tsx`): the sidebar's `onItemClick` navigates, and `<Routes>` renders the matching page.
+ * The `EdsShell` component is router-agnostic — nav items only carry a `url` and fire
+ * `onItemClick`; the app decides what to do with it.
+ */
+export function App() {
+    const navigate = useNavigate();
+    const location = useLocation();
+    const currentPath = location.pathname === '/' ? '/home' : location.pathname;
+
+    // Build the sidebar items from the shared route table, flagging the active one.
+    const navItems: EdsMenuItem[] = NAV_ITEMS.map((item) => ({
+        label: item.label,
+        icon: item.icon,
+        url: `#${item.path}`,
+        active: item.path === currentPath,
+    }));
+
+    const onNavClick = (item: EdsMenuItem): void => {
+        if (!item.url) {
+            return;
+        }
+        navigate(item.url.replace(/^#/, '') || '/');
+    };
+
+    return (
+        <EdsShell
+            toolbar={
+                <EdsShellToolbar
+                    menuToggle={<EdsShellMenuToggle />}
+                    app={<EdsShellToolbarApp appName="eUI React App" appSubTitle="@eui/eds-react" />}
+                />
+            }
+            sidebar={
+                <EdsShellSidebar
+                    collapseMode="icons"
+                    nav={<EdsShellSidebarNav items={navItems} hasIcons onItemClick={onNavClick} />}
+                    footer={<EdsShellSidebarFooter>Powered by @eui/eds-react</EdsShellSidebarFooter>}
+                />
+            }
+            footer={<EdsShellFooter copyright="© European Union" />}
+        >
+            <EdsShellContent>
+                <Routes>
+                    <Route path="/home" element={<HomePage />} />
+                    <Route path="/about" element={<AboutPage />} />
+                    <Route path="/" element={<Navigate to="/home" replace />} />
+                    <Route path="*" element={<Navigate to="/home" replace />} />
+                </Routes>
+            </EdsShellContent>
+        </EdsShell>
+    );
+}

package/lib/skeletons/_react/base/src/main.tsx

@@ -0,0 +1,30 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import { HashRouter } from 'react-router-dom';
+
+// EdsIcon resolves sprites from `${assetsBase}/eds/icons/sprites/{set}.svg`. Derive an absolute
+// base from Vite's deploy base (`import.meta.env.BASE_URL`) so sprites load regardless of the
+// page URL's trailing slash. The eds-assets Vite plugin serves the sprites under `/assets/eds`.
+(globalThis as { __EDS_ASSETS_BASE__?: string }).__EDS_ASSETS_BASE__ =
+    `${import.meta.env.BASE_URL.replace(/\/$/, '')}/assets`;
+
+// EDS design tokens + base styles (provide the --eds-* custom properties the components read)
+// and the eds-u-* layout utilities.
+import '@eui/eds-styles/dist/eds.css';
+import '@eui/eds-styles/dist/eds-utilities.css';
+// All pure-React @eui/eds-react component styles via the combined barrel. Bundle-conscious apps
+// can instead import only the per-component CSS they use (e.g. '@eui/eds-react/eds-button/eds-button.css').
+import '@eui/eds-react/styles.css';
+
+// App-specific styles.
+import './styles.css';
+
+import { App } from './App.js';
+
+createRoot(document.getElementById('root')!).render(
+    <StrictMode>
+        <HashRouter>
+            <App />
+        </HashRouter>
+    </StrictMode>,
+);

package/lib/skeletons/_react/base/src/pages/about.tsx

@@ -0,0 +1,27 @@
+import { EdsCard, EdsCardHeader, EdsCardLabel, EdsCardBody } from '@eui/eds-react/eds-card';
+
+/**
+ * A second example page, reachable from the sidebar, to demonstrate client-side routing.
+ */
+export function AboutPage() {
+    return (
+        <div className="app-page">
+            <h1 className="app-page__title">About</h1>
+            <p className="app-page__intro">
+                This page is served by React Router. Navigation between it and the home page happens
+                entirely client-side via the sidebar, with no full-page reload.
+            </p>
+
+            <EdsCard>
+                <EdsCardHeader>
+                    <EdsCardLabel>How routing works</EdsCardLabel>
+                </EdsCardHeader>
+                <EdsCardBody>
+                    The sidebar items in <code>src/App.tsx</code> carry a <code>url</code> and the
+                    shell calls <code>onItemClick</code>; the app then navigates with React Router.
+                    The <code>EdsShell</code> itself stays router-agnostic.
+                </EdsCardBody>
+            </EdsCard>
+        </div>
+    );
+}

package/lib/skeletons/_react/base/src/pages/home.tsx

@@ -0,0 +1,50 @@
+import { EdsCard, EdsCardHeader, EdsCardLabel, EdsCardBody } from '@eui/eds-react/eds-card';
+import { EdsButton } from '@eui/eds-react/eds-button';
+
+/**
+ * The default landing page. A simple example composing a couple of `@eui/eds-react` components
+ * (`EdsCard`, `EdsButton`) inside the shell content area. Replace this with your own home page.
+ */
+export function HomePage() {
+    return (
+        <div className="app-page">
+            <h1 className="app-page__title">Welcome to your eUI React app</h1>
+            <p className="app-page__intro">
+                This starter is powered by <strong>@eui/eds-react</strong> — the pure-React port of the
+                EU Design System components — with routing handled by React Router.
+            </p>
+
+            <div className="eds-u-d-flex eds-u-flex-wrap eds-u-flex-gap-l">
+                <EdsCard>
+                    <EdsCardHeader>
+                        <EdsCardLabel>Get started</EdsCardLabel>
+                    </EdsCardHeader>
+                    <EdsCardBody>
+                        Edit <code>src/pages/home.tsx</code> to build your first page, then add routes in
+                        <code> src/routes.ts</code> and <code>src/App.tsx</code>.
+                    </EdsCardBody>
+                </EdsCard>
+
+                <EdsCard>
+                    <EdsCardHeader>
+                        <EdsCardLabel>Components</EdsCardLabel>
+                    </EdsCardHeader>
+                    <EdsCardBody>
+                        Import any component from <code>@eui/eds-react</code> and its styles are already
+                        loaded via the combined <code>styles.css</code> barrel in <code>main.tsx</code>.
+                    </EdsCardBody>
+                </EdsCard>
+            </div>
+
+            <div className="eds-u-mt-l eds-u-d-flex eds-u-flex-gap-s">
+                <EdsButton
+                    type="primary"
+                    onClick={() => window.open('https://eui.ecdevops.eu', '_blank', 'noopener')}
+                >
+                    eUI documentation
+                </EdsButton>
+                <EdsButton type="secondary">Secondary action</EdsButton>
+            </div>
+        </div>
+    );
+}

package/lib/skeletons/_react/base/src/routes.ts

@@ -0,0 +1,18 @@
+/**
+ * The app's navigation routes. The sidebar (in `App.tsx`) and the routed pages both derive from
+ * this single table, so adding a page is a one-line change here plus a `<Route>` in `App.tsx`.
+ * `icon` values are EDS icon names (see the sprite catalog in `@eui/eds-styles`).
+ */
+export interface NavItem {
+    /** Router path (also the hash route). */
+    path: string;
+    /** Sidebar label. */
+    label: string;
+    /** EDS icon name shown in the sidebar. */
+    icon: string;
+}
+
+export const NAV_ITEMS: NavItem[] = [
+    { path: '/home', label: 'Home', icon: 'house' },
+    { path: '/about', label: 'About', icon: 'circle-info' },
+];

package/lib/skeletons/_react/base/src/styles.css

@@ -0,0 +1,37 @@
+/*
+ * App-specific styles. The EDS design tokens (--eds-* custom properties) come from
+ * @eui/eds-styles (loaded in main.tsx) and are available anywhere under the `eui-21` scope set
+ * on <body> in index.html. Prefer the eds-u-* utility classes for layout; use this file only
+ * for app-level chrome.
+ */
+
+html,
+body,
+#root {
+    height: 100%;
+    margin: 0;
+}
+
+.app-page {
+    padding: var(--eds-sp-l);
+    max-width: 960px;
+}
+
+.app-page__title {
+    font: var(--eds-f-heading-l);
+    color: var(--eds-c-foreground);
+    margin: 0 0 var(--eds-sp-s);
+}
+
+.app-page__intro {
+    font: var(--eds-f-paragraph-m);
+    color: var(--eds-c-foreground-subtle);
+    margin: 0 0 var(--eds-sp-l);
+}
+
+.app-page code {
+    font-family: monospace;
+    background: var(--eds-c-surface-elevation-sunken);
+    border-radius: var(--eds-br-xs);
+    padding: 0 var(--eds-sp-3xs);
+}

package/lib/skeletons/_react/base/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/lib/skeletons/_react/base/tsconfig.app.json

@@ -0,0 +1,18 @@
+{
+    "compilerOptions": {
+        "target": "ES2022",
+        "module": "ES2022",
+        "moduleResolution": "bundler",
+        "lib": ["ES2022", "DOM", "DOM.Iterable"],
+        "jsx": "react-jsx",
+        "strict": true,
+        "skipLibCheck": true,
+        "noEmit": true,
+        "isolatedModules": true,
+        "verbatimModuleSyntax": true,
+        "noUnusedLocals": true,
+        "noUnusedParameters": true,
+        "noFallthroughCasesInSwitch": true
+    },
+    "include": ["src"]
+}

package/lib/skeletons/_react/base/tsconfig.json

@@ -0,0 +1,7 @@
+{
+    "files": [],
+    "references": [
+        { "path": "./tsconfig.app.json" },
+        { "path": "./tsconfig.node.json" }
+    ]
+}

package/lib/skeletons/_react/base/tsconfig.node.json

@@ -0,0 +1,15 @@
+{
+    "compilerOptions": {
+        "target": "ES2022",
+        "module": "ES2022",
+        "moduleResolution": "bundler",
+        "lib": ["ES2022"],
+        "strict": true,
+        "skipLibCheck": true,
+        "noEmit": true,
+        "isolatedModules": true,
+        "verbatimModuleSyntax": true,
+        "types": ["node"]
+    },
+    "include": ["vite.config.ts"]
+}

package/lib/skeletons/_react/base/vite.config.ts

@@ -0,0 +1,77 @@
+import { defineConfig, type Plugin } from 'vite';
+import { fileURLToPath } from 'node:url';
+import { dirname, join, resolve } from 'node:path';
+import { cpSync, createReadStream, existsSync, statSync } from 'node:fs';
+import type { IncomingMessage, ServerResponse } from 'node:http';
+
+const here = dirname(fileURLToPath(import.meta.url));
+const outDir = resolve(here, 'dist');
+
+// EDS design assets (icon sprites, fonts, the shared eds-components.json catalog) ship inside the
+// installed `@eui/eds-styles` package. `EdsIcon` resolves sprites from
+// `${assetsBase}/eds/icons/sprites/{set}.svg`, so the package's `dist/assets` folder is exposed
+// under `/assets/eds` for both the dev server and the built output.
+const edsStylesAssets = resolve(here, 'node_modules/@eui/eds-styles/dist/assets');
+
+/**
+ * Serve + emit the EDS assets under `/assets/eds` so icon sprites resolve in dev and in the
+ * built bundle. Do NOT commit the sprite/font binaries into the app — they always come from the
+ * `@eui/eds-styles` package.
+ */
+function edsAssetsPlugin(assetsDir: string): Plugin {
+    const mime: Record<string, string> = {
+        '.svg': 'image/svg+xml',
+        '.json': 'application/json',
+        '.woff2': 'font/woff2',
+        '.woff': 'font/woff',
+    };
+    return {
+        name: 'eds-assets',
+        configureServer(server) {
+            server.middlewares.use((req: IncomingMessage, res: ServerResponse, next: () => void) => {
+                const url = (req.url ?? '').split('?')[0];
+                const prefix = '/assets/eds/';
+                if (!url.startsWith(prefix)) {
+                    return next();
+                }
+                const file = join(assetsDir, url.slice(prefix.length));
+                if (!existsSync(file) || !statSync(file).isFile()) {
+                    return next();
+                }
+                const ext = file.slice(file.lastIndexOf('.'));
+                res.setHeader('Content-Type', mime[ext] ?? 'application/octet-stream');
+                createReadStream(file).pipe(res);
+            });
+        },
+        closeBundle() {
+            if (existsSync(assetsDir)) {
+                cpSync(assetsDir, join(outDir, 'assets', 'eds'), { recursive: true });
+            }
+        },
+    };
+}
+
+// Relative asset base (`./`) so the built app works under any deploy sub-path. JSX uses Vite's
+// built-in esbuild automatic runtime (no @vitejs/plugin-react needed).
+export default defineConfig({
+    root: here,
+    base: './',
+    publicDir: resolve(here, 'public'),
+    esbuild: { jsx: 'automatic' },
+    plugins: [edsAssetsPlugin(edsStylesAssets)],
+    build: {
+        outDir,
+        emptyOutDir: true,
+    },
+    server: {
+        port: 4200,
+        open: '/',
+        // Proxy API calls to the mock json-server (started in parallel via `npm start`).
+        proxy: {
+            '/api': {
+                target: 'http://localhost:3000',
+                changeOrigin: true,
+            },
+        },
+    },
+});

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

@@ -0,0 +1,45 @@
+{
+    "name": "eui-react-app",
+    "version": "22.0.0-alpha.23",
+    "license": "EUPL-1.1",
+    "private": true,
+    "type": "module",
+    "scripts": {
+        "start-mock-server": "nodemon --watch ./mock ./mock/server.js",
+        "start-serve": "eui-cli serve-app",
+        "start": "npm-run-all --parallel start-mock-server start-serve",
+        "start-local": "eui-cli serve-app",
+        "build": "tsc -b && eui-cli build-app",
+        "preview": "vite preview",
+        "lint": "eslint src --ext .ts,.tsx",
+        "test": "vitest run"
+    },
+    "dependencies": {
+        "react": "19.3.0",
+        "react-dom": "19.3.0",
+        "react-router-dom": "7.18.4",
+        "luxon": "3.7.2",
+        "@eui/eds-styles": "22.0.0-alpha.23",
+        "@eui/eds-react": "22.0.0-alpha.23"
+    },
+    "devDependencies": {
+        "@eui/cli": "22.0.0-alpha.23",
+        "typescript": "6.0.3",
+        "@types/react": "19.3.0",
+        "@types/react-dom": "19.3.0",
+        "@types/luxon": "3.7.2",
+        "vitest": "4.1.11",
+        "@vitest/ui": "4.1.11",
+        "@vitest/coverage-v8": "4.1.11",
+        "@vitest/coverage-istanbul": "4.1.11",
+        "eslint": "9.39.1",
+        "typescript-eslint": "8.63.0",
+        "@eslint/js": "9.39.1",
+        "npm-run-all": "4.1.5",
+        "json-server": "1.0.0-beta.3",
+        "nodemon": "3.1.11",
+        "lowdb": "1.0.0",
+        "body-parser": "1.20.3",
+        "express": "4.21.2"
+    }
+}

package/lib/utils.js

@@ -9,6 +9,7 @@ module.exports.getAngularPath = (targetPath, appName, appType, artifactId) => {
   switch(appType) {
     case 'angular':
     case 'mobile':
+    case 'react':
       return targetPath;
     case 'web-maven':
       return `${targetPath}/src/main/angular`;
@@ -16,9 +17,32 @@ module.exports.getAngularPath = (targetPath, appName, appType, artifactId) => {
       return `${targetPath}/${artifactId}-web/src/main/angular`;
     case 'web-symfony':
       return `${targetPath}/client`;
+    default:
+      throw new Error(`Unknown appType: "${appType}"`);
   }
 }
 
+/**
+ * Detects the toolchain of the app in `cwd`. A generated eUI app is either an Angular app
+ * (has `angular.json`) or a standalone Vite React app (has `vite.config.ts`/`.js` and no
+ * `angular.json`). Returns `'vite'` or `'angular'` so the serve/build commands can dispatch to
+ * the right tool while keeping a single `eui-cli serve-app` / `build-app` command surface.
+ */
+module.exports.detectAppTool = (cwd = process.cwd()) => {
+  if (isFileExists(path.join(cwd, 'angular.json'))) {
+    return 'angular';
+  }
+  if (
+    isFileExists(path.join(cwd, 'vite.config.ts')) ||
+    isFileExists(path.join(cwd, 'vite.config.js')) ||
+    isFileExists(path.join(cwd, 'vite.config.mjs'))
+  ) {
+    return 'vite';
+  }
+  // Default to Angular for backward compatibility with existing generated apps.
+  return 'angular';
+};
+
 module.exports.getArgs = () => {
   const argv = {};
   const processArgs = process.env._CSDR_ARGS;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@eui/cli",
-    "version": "22.0.0-alpha.21",
+    "version": "22.0.0-alpha.23",
     "tag": "next",
     "license": "EUPL-1.1",
     "description": "eUI CLI app generator & tools",

package/sonar-project.properties

@@ -1,14 +0,0 @@
-sonar.projectKey=CSDR-EUI-CLI
-sonar.projectName=EUI-CLI
-sonar.projectVersion=375ec32
-
-
-sonar.sources=/builds/csdr/eui/eui/packages/cli
-sonar.sourceEncoding=UTF-8
-
-sonar.test.inclusions=**/*.spec.ts
-
-sonar.ts.tslint.configPath=tslint.json
-sonar.typescript.lcov.reportPaths=/builds/csdr/eui/eui/packages/cli/test/reports/coverage-lcov/lcov.info
-
-sonar.exclusions=**/*.js, **/mock/**/*, **/mocks/**/*