igniteui-cli 15.2.2 → 15.3.1-beta.1

package/templates/react/igr-ts/projects/ai-config/files/skills/igniteui-react-generate-from-image-design/reference/component-mapping.md

@@ -11,17 +11,19 @@
 - [Package Requirements](#package-requirements)
 - [Import Patterns](#import-patterns)
 
+> **For component API details** (props, events, slots, examples), call `get_doc` with `'react'` and the doc name from `list_components` results. Use `search_api` for specific property lookup.
+
 ## Dashboard & Layout Components
 
-| UI Pattern | Ignite UI Component | Key Properties |
-|---|---|---|
-| Top navigation bar | `IgrNavbar` | children plus named action/content slots |
-| Side navigation | `IgrNavDrawer` | `open`, drawer items, `icon` and `content` slots |
-| Content cards/panels | `IgrCard` | `IgrCardHeader`, `IgrCardContent`, `IgrCardActions` |
-| Tabbed content | `IgrTabs` + `IgrTab` | `label`, `slot="label"` |
-| Accordion sections | `IgrAccordion` | `IgrExpansionPanel` children |
-| Split layouts | `IgrSplitter` | resizable panes when splitter chrome is visible |
-| Tile dashboard | `IgrTileManager` | drag/resize tiles |
+| UI Pattern | Ignite UI Component |
+|---|---|
+| Top navigation bar | `IgrNavbar` |
+| Side navigation | `IgrNavDrawer` |
+| Content cards/panels | `IgrCard` |
+| Tabbed content | `IgrTabs` + `IgrTab` |
+| Accordion sections | `IgrAccordion` |
+| Split layouts | `IgrSplitter` |
+| Tile dashboard | `IgrTileManager` |
 
 Decision rule:
 
@@ -29,33 +31,17 @@ Decision rule:
 - Use `IgrNavDrawer` for a sidebar or side-navigation panel when drawer structure and behavior match the screenshot. Configure open and mini behavior according to whether the design shows fixed, collapsible, or icon-only navigation. Use a plain `<aside>` when a static custom sidebar matches the screenshot better.
 - Use `IgrTabs` for a horizontal tab strip when the screenshot clearly shows tabbed state switching. Use label-only tabs for routed navigation and inline tab content for local view switching.
 
-Component decision matrix (by visual pattern, domain-neutral):
-
-| Visual Pattern | Recommended Component | Notes |
-|---|---|---|
-| Repeated rows with icon/text/action | `IgrList` | Use when the row anatomy and interaction model match. Compose the row content with React children and the documented slots. Use native `<ul>/<li>` or custom containers when that is a closer visual fit |
-| Spreadsheet-like editable or sortable table | `IgrGridLite` or `IgrGrid` | Use only when content is truly tabular. Prefer `IgrGridLite` for lightweight MIT cases and `IgrGrid` when advanced grid features are required |
-| Hierarchical or tree-structured table | `IgrTreeGrid` or `IgrTree` | Use `IgrTreeGrid` for hierarchical tables and `IgrTree` for tree-style navigation or nested lists |
-| Content blocks / summary cards | `IgrCard` | Use when card chrome helps match the panel shape and structure. Use `IgrCardHeader`, `IgrCardContent`, and `IgrCardActions`, or plain `<div>` containers for flat or highly custom tiles |
-| Any text input field | `IgrInput` | Use when the input anatomy matches the screenshot, including search fields and inline editors. Apply CSS to match the screenshot's border/radius style |
-| Dropdown or select | `IgrSelect` | Use when the screenshot clearly shows select/dropdown behavior |
-| Form fields with labels and inputs | `IgrInput`, `IgrSelect`, `IgrCombo`, `IgrDatePicker`, `IgrDateTimeInput` | Cover text, select, combo, and date/time inputs |
-| Multi-step form / wizard | `IgrStepper` | Use when a sequence of steps is visually present |
-| Filter chips / tag inputs | `IgrChip` | Use when chip anatomy matches status badges, filter tags, or removable labels in the screenshot |
-| Calendar or date picker as a primary view element | `IgrCalendar`, `IgrDatePicker`, `IgrDateRangePicker` | Use when scheduling or date selection is the core UI |
-| Top icon/action bar | `IgrNavbar` with `IgrButton` / `IgrIconButton` | Use when a navbar structure matches the screenshot; use plain icon buttons or custom containers when that is a closer fit |
-
 ## Chart Components
 
-| UI Pattern | Ignite UI Component | Key Properties |
-|---|---|---|
-| Area chart | `IgrCategoryChart` | `chartType`, `markerTypes`, `areaFillOpacity` |
-| Line chart | `IgrCategoryChart` | `chartType`, `markerTypes` |
-| Column chart | `IgrCategoryChart` | `chartType`, `markerTypes`, `includedProperties` |
-| Sparkline (mini chart) | `IgrSparkline` or `IgrDataChart` | `displayType`, `valueMemberPath`, sized container |
-| Pie/donut chart | `IgrPieChart` | `valueMemberPath`, `labelMemberPath` |
-| Financial chart | `IgrFinancialChart` | OHLC/candlestick data |
-| Complex multi-series | `IgrDataChart` | multiple series + axes plus module registration |
+| UI Pattern | Ignite UI Component |
+|---|---|
+| Area chart | `IgrCategoryChart` |
+| Line chart | `IgrCategoryChart` |
+| Column chart | `IgrCategoryChart` |
+| Sparkline (mini chart) | `IgrSparkline` or `IgrDataChart` |
+| Pie/donut chart | `IgrPieChart` |
+| Financial chart | `IgrFinancialChart` |
+| Complex multi-series | `IgrDataChart` |
 
 Decision rule:
 
@@ -65,17 +51,17 @@ Decision rule:
 
 ## Data Display Components
 
-| UI Pattern | Ignite UI Component | Key Properties |
-|---|---|---|
-| Item list | `IgrList` | slot-based row content, selection, and dense list styling |
-| User avatar | `IgrAvatar` | `initials`, `shape`, `src` |
-| Status badge | `IgrBadge` | value/children plus token-based styling |
-| Icons | `IgrIcon` | icon name, collection, styling |
-| Progress bar | `IgrLinearProgress` | `value`, `max` |
-| Circular progress | `IgrCircularProgress` | `value`, `max` |
-| Flat data grid | `IgrGridLite` or `IgrGrid` | choose by feature level and package availability |
-| Hierarchical/tree data grid | `IgrTreeGrid` | parent-child data |
-| Filter/tag chips | `IgrChip` | selected state, removable UI, token-based styling |
+| UI Pattern | Ignite UI Component |
+|---|---|
+| Item list | `IgrList` |
+| User avatar | `IgrAvatar` |
+| Status badge | `IgrBadge` |
+| Icons | `IgrIcon` |
+| Progress bar | `IgrLinearProgress` |
+| Circular progress | `IgrCircularProgress` |
+| Flat data grid | `IgrGridLite` or `IgrGrid` |
+| Hierarchical/tree data grid | `IgrTreeGrid` |
+| Filter/tag chips | `IgrChip` |
 
 Decision rule:
 
@@ -86,44 +72,44 @@ Decision rule:
 
 ## Form & Input Components
 
-| UI Pattern | Ignite UI Component | Key Properties |
-|---|---|---|
-| Text input | `IgrInput` | `label`, `placeholder`, `type` |
-| Dropdown select | `IgrSelect` | option children, label, value |
-| Searchable multi-select | `IgrCombo` | `data`, `displayKey`, `valueKey` |
-| Date picker | `IgrDatePicker` | value and label props |
-| Date/time input | `IgrDateTimeInput` | value, format options |
-| Toggle switch | `IgrSwitch` | checked state, change events |
-| Checkbox | `IgrCheckbox` | checked state, `indeterminate` |
-| Radio button group | `IgrRadioGroup` + `IgrRadio` | `name`, selected value |
-| Slider | `IgrSlider` | `min`, `max`, `value` |
-| Multi-step wizard | `IgrStepper` | orientation, step composition |
-| Chip filter bar | `IgrChip` collection in a flex wrapper | compose removable/filter chips manually |
+| UI Pattern | Ignite UI Component |
+|---|---|
+| Text input | `IgrInput` |
+| Dropdown select | `IgrSelect` |
+| Searchable multi-select | `IgrCombo` |
+| Date picker | `IgrDatePicker` |
+| Date/time input | `IgrDateTimeInput` |
+| Toggle switch | `IgrSwitch` |
+| Checkbox | `IgrCheckbox` |
+| Radio button group | `IgrRadioGroup` + `IgrRadio` |
+| Slider | `IgrSlider` |
+| Multi-step wizard | `IgrStepper` |
+| Chip filter bar | `IgrChip` collection in a flex wrapper |
 
 ## Calendar & Scheduling Components
 
-| UI Pattern | Ignite UI Component | Key Properties |
-|---|---|---|
-| Calendar view | `IgrCalendar` | selection mode, `value`, change events |
-| Date range picker | `IgrDateRangePicker` | range value, change events |
-| Month/year picker | `IgrCalendar` | month/year view settings per docs |
+| UI Pattern | Ignite UI Component |
+|---|---|
+| Calendar view | `IgrCalendar` |
+| Date range picker | `IgrDateRangePicker` |
+| Month/year picker | `IgrCalendar` |
 
 ## Map Components
 
-| UI Pattern | Ignite UI Component | Key Properties |
-|---|---|---|
-| World map | `IgrGeographicMap` | `zoomable`, `backgroundContent` |
-| Map markers | `IgrGeographicSymbolSeries` | `latitudeMemberPath`, `longitudeMemberPath`, `markerType`, `markerBrush` |
-| Bubble overlay | `IgrGeographicProportionalSymbolSeries` | sized markers |
-| Shape regions | `IgrGeographicShapeSeries` | polygon rendering |
+| UI Pattern | Ignite UI Component |
+|---|---|
+| World map | `IgrGeographicMap` |
+| Map markers | `IgrGeographicSymbolSeries` |
+| Bubble overlay | `IgrGeographicProportionalSymbolSeries` |
+| Shape regions | `IgrGeographicShapeSeries` |
 
 ## Gauge Components
 
-| UI Pattern | Ignite UI Component | Key Properties |
-|---|---|---|
-| Linear gauge | `IgrLinearGauge` | `value`, `minimumValue`, `maximumValue`, `needleBrush` |
-| Radial gauge | `IgrRadialGauge` | `value`, `minimumValue`, `maximumValue` |
-| Bullet graph | `IgrBulletGraph` | performance vs target |
+| UI Pattern | Ignite UI Component |
+|---|---|
+| Linear gauge | `IgrLinearGauge` |
+| Radial gauge | `IgrRadialGauge` |
+| Bullet graph | `IgrBulletGraph` |
 
 ## Package Requirements
 

package/templates/react/igr-ts/projects/ai-config/files/skills/igniteui-react-generate-from-image-design/reference/gotchas.md

@@ -139,8 +139,8 @@ For core UI component theming, prefer `create_component_theme` and apply the ret
 Override the drawer width using the nav drawer CSS custom properties measured from the design image:
 ```css
 igc-nav-drawer {
-  --ig-nav-drawer-size: <extracted-sidebar-width>;
-  --ig-nav-drawer-size--mini: <extracted-mini-drawer-width>;
+  --menu-full-width: <extracted-sidebar-width>;
+  --menu-mini-width: <extracted-mini-drawer-width>;
 }
 ```
 

package/templates/react/igr-ts/projects/empty/index.js

@@ -30,8 +30,8 @@ class EmptyIgrTsProject extends _base_with_home_1.BaseWithHomeIgrTsProject {
     constructor() {
         super(...arguments);
         this.id = "empty";
-        this.name = "Empty project";
-        this.description = "Empty project structure with home page and routing";
+        this.name = "Empty Project";
+        this.description = "Starter project with routing and a home page";
         this.dependencies = [];
         this.framework = "react";
         this.projectType = "igr-ts";

package/templates/react/igr-ts/projects/side-nav/files/src/app/app-routes.tsx

@@ -0,0 +1,5 @@
+import Home from './home/home';
+
+export const routes = [
+  { path: '/', element: <Home />, text: 'Home', icon: 'home' }
+];

package/templates/react/igr-ts/projects/side-nav/files/src/app/app.css

@@ -0,0 +1,82 @@
+.app {
+  display: flex;
+  flex-flow: column nowrap;
+  height: 100%;
+  overflow: hidden;
+}
+
+.app__navbar {
+  display: flex;
+  align-items: center;
+  flex: 0 0 auto;
+  height: 56px;
+  padding: 0 16px;
+  background: #239ef0;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, .24);
+  box-sizing: border-box;
+}
+
+.app__title {
+  margin: 0 0 0 16px;
+  font-size: 1.25rem;
+  font-weight: 600;
+  line-height: 1;
+  color: #000;
+}
+
+.app__menu-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  padding: 0;
+  color: #000;
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+}
+
+.app__menu-button igc-icon {
+  font-size: 24px;
+}
+
+.app__body {
+  display: flex;
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
+.app__drawer {
+  flex: 0 0 auto;
+  height: 100%;
+  --menu-full-width: 280px;
+}
+
+igc-nav-drawer-item::part(base) {
+  min-height: 48px;
+  color: #2d2d2d;
+}
+
+igc-nav-drawer-item[active]::part(base) {
+  background: #e0f2ff;
+  color: #0075d2;
+}
+
+igc-nav-drawer-item[active] igc-icon {
+  color: #0075d2;
+}
+
+igc-nav-drawer-item:not([active]) igc-icon {
+  color: #2d2d2d;
+}
+
+.app__content {
+  flex: 1 1 auto;
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: center;
+  align-items: stretch;
+  min-width: 0;
+  overflow: auto;
+}

package/templates/react/igr-ts/projects/side-nav/files/src/app/app.tsx

@@ -0,0 +1,104 @@
+import { useEffect, useMemo, useState } from "react";
+import { Outlet, useLocation, useNavigate } from "react-router-dom";
+import {
+  IgrIcon,
+  IgrNavDrawer,
+  IgrNavDrawerItem,
+  registerIcon,
+} from "igniteui-react";
+import { configureTheme } from "igniteui-webcomponents";
+import { routes } from "./app-routes";
+import "igniteui-webcomponents/themes/light/material.css";
+import "./app.css";
+
+configureTheme('material', 'light');
+
+const materialIcons = [
+  ['home', 'action/svg/production/ic_home_24px.svg'],
+  ['menu', 'navigation/svg/production/ic_menu_24px.svg'],
+  ['apps', 'navigation/svg/production/ic_apps_24px.svg'],
+  ['code', 'action/svg/production/ic_code_24px.svg'],
+  ['build', 'action/svg/production/ic_build_24px.svg'],
+  ['palette', 'image/svg/production/ic_palette_24px.svg'],
+] as const;
+
+materialIcons.forEach(([name, path]) =>
+  registerIcon(name, `https://unpkg.com/material-design-icons@3.0.1/${path}`, "material")
+);
+
+export default function App() {
+  const name = "$(name)";
+  const location = useLocation();
+  const navigate = useNavigate();
+  const [drawerOpen, setDrawerOpen] = useState(true);
+  const [drawerPosition, setDrawerPosition] = useState<"relative" | "start">("relative");
+
+  const visibleRoutes = useMemo(() => {
+    return routes.filter((route) => route.path && route.text);
+  }, []);
+
+  useEffect(() => {
+    const mediaQuery = window.matchMedia("(min-width: 1025px)");
+    const updateDrawerState = () => {
+      setDrawerOpen(mediaQuery.matches);
+      setDrawerPosition(mediaQuery.matches ? "relative" : "start");
+    };
+
+    updateDrawerState();
+    mediaQuery.addEventListener("change", updateDrawerState);
+
+    return () => mediaQuery.removeEventListener("change", updateDrawerState);
+  }, []);
+
+  const handleRouteClick = (path: string) => {
+    navigate(path);
+
+    if (window.matchMedia("(max-width: 1024px)").matches) {
+      setDrawerOpen(false);
+    }
+  };
+
+  return (
+    <div className="app">
+      <header className="app__navbar">
+        <button
+          className="app__menu-button"
+          type="button"
+          aria-label="Toggle navigation"
+          onClick={() => setDrawerOpen((open) => !open)}
+        >
+          <IgrIcon name="menu" collection="material" />
+        </button>
+        <h1 className="app__title">{name}</h1>
+      </header>
+      <div className="app__body">
+        <IgrNavDrawer
+          className="app__drawer"
+          open={drawerOpen}
+          position={drawerPosition}
+        >
+          {visibleRoutes.map((route) => (
+            <IgrNavDrawerItem
+              key={route.path}
+              active={location.pathname === route.path}
+              onClick={() => handleRouteClick(route.path)}
+            >
+              <IgrIcon
+                slot="icon"
+                name={route.icon || "home"}
+                collection="material"
+                style={{
+                  color: location.pathname === route.path ? "#0075D2" : undefined,
+                }}
+              />
+              <span slot="content">{route.text}</span>
+            </IgrNavDrawerItem>
+          ))}
+        </IgrNavDrawer>
+        <main className="app__content">
+          <Outlet />
+        </main>
+      </div>
+    </div>
+  );
+}

package/templates/react/igr-ts/projects/side-nav/files/src/app/home/home.tsx

@@ -0,0 +1,69 @@
+import logo from "/logo.svg";
+import { IgrIcon } from "igniteui-react";
+import styles from "./style.module.css";
+
+export default function App() {
+  return (
+    <main className={styles.home}>
+      <div className={styles.intro}>
+        <h1 className={styles.header}>Welcome to Ignite UI for React!</h1>
+        <p className={styles.description}>
+          A routed application shell with a responsive side navigation drawer and curated Ignite UI resources.
+        </p>
+      </div>
+
+      <img src={logo} className={styles.logo} alt="Ignite UI for React" />
+
+      <div className={styles.resources} role="navigation" aria-label="Ignite UI resources">
+        <a
+          className={styles.resource}
+          target="_blank"
+          rel="noopener noreferrer"
+          href="https://www.infragistics.com/products/ignite-ui-react"
+        >
+          <IgrIcon className={styles.resourceIcon} name="apps" collection="material" />
+          <span>
+            <strong>Component Demos</strong>
+            <small>Browse React components and examples</small>
+          </span>
+        </a>
+        <a
+          className={styles.resource}
+          target="_blank"
+          rel="noopener noreferrer"
+          href="https://github.com/IgniteUI/igniteui-react"
+        >
+          <IgrIcon className={styles.resourceIcon} name="code" collection="material" />
+          <span>
+            <strong>React Repository</strong>
+            <small>Explore Ignite UI for React on GitHub</small>
+          </span>
+        </a>
+        <a
+          className={styles.resource}
+          target="_blank"
+          rel="noopener noreferrer"
+          href="https://github.com/IgniteUI/igniteui-cli"
+        >
+          <IgrIcon className={styles.resourceIcon} name="build" collection="material" />
+          <span>
+            <strong>Ignite UI CLI</strong>
+            <small>Review the CLI source and project tooling</small>
+          </span>
+        </a>
+        <a
+          className={styles.resource}
+          target="_blank"
+          rel="noopener noreferrer"
+          href="https://www.figma.com/@infragistics"
+        >
+          <IgrIcon className={styles.resourceIcon} name="palette" collection="material" />
+          <span>
+            <strong>Figma UI Kit</strong>
+            <small>Open Infragistics design resources</small>
+          </span>
+        </a>
+      </div>
+    </main>
+  );
+}

package/templates/react/igr-ts/projects/side-nav/files/src/app/home/style.module.css

@@ -0,0 +1,105 @@
+:local(.home) {
+  width: 100%;
+  max-width: 920px;
+  margin: auto;
+  padding: 48px 24px;
+  box-sizing: border-box;
+  font-family: "Titillium Web", "Segoe UI", Arial, sans-serif;
+}
+
+:local(.intro) {
+  max-width: 720px;
+  margin: 0 auto 24px;
+  text-align: center;
+}
+
+:local(.header) {
+  margin: 0 0 12px;
+  color: #09f;
+  font-size: 3rem;
+  font-weight: 600;
+  line-height: 1.2;
+}
+
+:local(.description) {
+  margin: 0;
+  color: #000;
+  font-size: 1.125rem;
+  line-height: 1.5;
+}
+
+:local(.logo) {
+  display: block;
+  width: 500px;
+  height: 350px;
+  margin: 0 auto 28px;
+  max-width: 100%;
+  object-fit: contain;
+}
+
+:local(.resources) {
+  display: grid;
+  grid-template-columns: repeat(2, 300px);
+  justify-content: center;
+  margin: 0 auto;
+  gap: 4px 64px;
+}
+
+:local(.resource) {
+  display: flex;
+  align-items: center;
+  min-height: 64px;
+  padding: 6px 0;
+  color: rgba(0, 0, 0, .74);
+  text-align: left;
+  text-decoration: none;
+}
+
+:local(.resource):hover strong {
+  text-decoration: underline;
+}
+
+:local(.resourceIcon) {
+  flex: 0 0 28px;
+  margin-right: 16px;
+  color: #09f;
+  font-size: 28px;
+}
+
+:local(.resource) strong,
+:local(.resource) small {
+  display: block;
+}
+
+:local(.resource) strong {
+  margin-bottom: 2px;
+  color: #731963;
+  font-size: 1rem;
+}
+
+:local(.resource) small {
+  color: #000;
+  font-size: 0.875rem;
+  line-height: 1.4;
+}
+
+@media (max-width: 768px) {
+  :local(.home) {
+    padding: 32px 16px;
+  }
+
+  :local(.header) {
+    font-size: 2.25rem;
+  }
+
+  :local(.logo) {
+    width: 100%;
+    height: 240px;
+  }
+
+  :local(.resources) {
+    grid-template-columns: minmax(0, 300px);
+    justify-content: center;
+    gap: 4px;
+  }
+}

package/templates/react/igr-ts/projects/{top-nav → side-nav}/index.d.ts

@@ -1,6 +1,6 @@
 import { ProjectTemplate } from "@igniteui/cli-core";
 import { BaseWithHomeIgrTsProject } from "../_base_with_home";
-export declare class TopNavIgrTsProject extends BaseWithHomeIgrTsProject implements ProjectTemplate {
+export declare class SideNavIgrTsProject extends BaseWithHomeIgrTsProject implements ProjectTemplate {
     id: string;
     name: string;
     description: string;
@@ -11,5 +11,5 @@ export declare class TopNavIgrTsProject extends BaseWithHomeIgrTsProject impleme
     isHidden: boolean;
     get templatePaths(): string[];
 }
-declare const _default: TopNavIgrTsProject;
+declare const _default: SideNavIgrTsProject;
 export default _default;

package/templates/react/igr-ts/projects/{top-nav → side-nav}/index.js

@@ -23,15 +23,15 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TopNavIgrTsProject = void 0;
+exports.SideNavIgrTsProject = void 0;
 const path = __importStar(require("path"));
 const _base_with_home_1 = require("../_base_with_home");
-class TopNavIgrTsProject extends _base_with_home_1.BaseWithHomeIgrTsProject {
+class SideNavIgrTsProject extends _base_with_home_1.BaseWithHomeIgrTsProject {
     constructor() {
         super(...arguments);
-        this.id = "top-nav";
-        this.name = "Default top navigation";
-        this.description = "Project structure with top navigation menu";
+        this.id = "side-nav";
+        this.name = "Side navigation default";
+        this.description = "Project structure with side navigation drawer";
         this.dependencies = [];
         this.framework = "react";
         this.projectType = "igr-ts";
@@ -42,5 +42,5 @@ class TopNavIgrTsProject extends _base_with_home_1.BaseWithHomeIgrTsProject {
         return [...super.templatePaths, path.join(__dirname, "files")];
     }
 }
-exports.TopNavIgrTsProject = TopNavIgrTsProject;
-exports.default = new TopNavIgrTsProject();
+exports.SideNavIgrTsProject = SideNavIgrTsProject;
+exports.default = new SideNavIgrTsProject();

package/templates/react/igr-ts/projects/side-nav-auth/files/index.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Ignite UI for React</title>
+    <link href="https://fonts.googleapis.com/css?family=Titillium+Web:300,400,600,700" rel="stylesheet">
+    <link rel="stylesheet" href="./styles.css">
+    <!-- Facebook JS SDK — required only when facebook is configured in external-auth-config.ts.
+         Remove this script if you are not using Facebook login. -->
+    <script async defer crossorigin="anonymous"
+      src="https://connect.facebook.net/en_US/sdk.js"></script>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+  <script type="module" src="/src/main.tsx"></script>
+</html>

package/templates/react/igr-ts/projects/side-nav-auth/files/src/app/app-routes.tsx

@@ -0,0 +1,24 @@
+import Home from './home/home';
+import Profile from './authentication/pages/Profile';
+import RedirectGoogle from './authentication/pages/RedirectGoogle';
+import RedirectMicrosoft from './authentication/pages/RedirectMicrosoft';
+import RedirectFacebook from './authentication/pages/RedirectFacebook';
+import { AuthGuard } from './authentication/AuthGuard';
+
+export const routes = [
+  { path: '/', element: <Home />, text: 'Home', icon: 'home' },
+  {
+    path: '/auth/profile',
+    element: (
+      <AuthGuard>
+        <Profile />
+      </AuthGuard>
+    ),
+    text: 'Profile',
+    icon: 'account_circle',
+    requiresAuth: true
+  },
+  { path: '/auth/redirect-google', element: <RedirectGoogle /> },
+  { path: '/auth/redirect-microsoft', element: <RedirectMicrosoft /> },
+  { path: '/auth/redirect-facebook', element: <RedirectFacebook /> },
+];