igniteui-cli 15.2.2-alpha.3 → 15.3.0

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 /> },
+];

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

@@ -0,0 +1,84 @@
+.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;
+  position: relative;
+  z-index: 10;
+}
+
+.app__navbar-spacer {
+  flex: 1 1 auto;
+}
+
+.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;
+}
+
+.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-auth/files/src/app/app.tsx

@@ -0,0 +1,124 @@
+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 { AuthProvider, useAuth } from "./authentication/AuthContext";
+import { LoginBar } from "./authentication/components/LoginBar";
+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'],
+  ['account_circle', 'action/svg/production/ic_account_circle_24px.svg'],
+  ['lock', 'action/svg/production/ic_lock_24px.svg'],
+  ['assignment_ind', 'action/svg/production/ic_assignment_ind_24px.svg'],
+] as const;
+
+materialIcons.forEach(([name, path]) =>
+  registerIcon(name, `https://unpkg.com/material-design-icons@3.0.1/${path}`, "material")
+);
+
+function AppContent() {
+  const name = "$(name)";
+  const location = useLocation();
+  const navigate = useNavigate();
+  const { currentUser } = useAuth();
+  const [drawerOpen, setDrawerOpen] = useState(true);
+  const [drawerPosition, setDrawerPosition] = useState<"relative" | "start">("relative");
+
+  const visibleRoutes = useMemo(() => {
+    return routes.filter((route) => {
+      if (!route.path || !route.text) return false;
+      if ((route as any).requiresAuth && !currentUser) return false;
+      return true;
+    });
+  }, [currentUser]);
+
+  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>
+        <div className="app__navbar-spacer" />
+        <LoginBar />
+      </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" : "#2d2d2d",
+                }}
+              />
+              <span slot="content">{route.text}</span>
+            </IgrNavDrawerItem>
+          ))}
+        </IgrNavDrawer>
+        <main className="app__content">
+          <Outlet />
+        </main>
+      </div>
+    </div>
+  );
+}
+
+export default function App() {
+  return (
+    <AuthProvider>
+      <AppContent />
+    </AuthProvider>
+  );
+}

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

@@ -0,0 +1,73 @@
+import { createContext, useContext, useState, useCallback, type ReactNode } from 'react';
+import type { User } from './models/user';
+import type { Login } from './models/login';
+import type { RegisterInfo } from './models/register-info';
+import type { ExternalLogin } from './models/external-login';
+import { Authentication } from './services/authentication';
+import { UserStore } from './services/userStore';
+import { ExternalAuth } from './services/externalAuth';
+
+interface AuthContextType {
+  currentUser: User | null;
+  initials: string | null;
+  login: (data: Login) => Promise<string | null>;
+  register: (data: RegisterInfo) => Promise<string | null>;
+  loginWith: (data: ExternalLogin) => Promise<string | null>;
+  logout: () => void;
+}
+
+const AuthContext = createContext<AuthContextType | null>(null);
+
+export function AuthProvider({ children }: { children: ReactNode }) {
+  const [currentUser, setCurrentUser] = useState<User | null>(() => UserStore.getUser());
+
+  const initials = currentUser ? UserStore.getInitials(currentUser) : null;
+
+  const login = useCallback(async (data: Login): Promise<string | null> => {
+    const result = await Authentication.login(data);
+    if (result.user) {
+      UserStore.setUser(result.user);
+      setCurrentUser(result.user);
+      return null;
+    }
+    return result.error ?? 'Login failed';
+  }, []);
+
+  const register = useCallback(async (data: RegisterInfo): Promise<string | null> => {
+    const result = await Authentication.register(data);
+    if (result.user) {
+      UserStore.setUser(result.user);
+      setCurrentUser(result.user);
+      return null;
+    }
+    return result.error ?? 'Registration failed';
+  }, []);
+
+  const loginWith = useCallback(async (data: ExternalLogin): Promise<string | null> => {
+    const result = await Authentication.loginWith(data);
+    if (result.user) {
+      UserStore.setUser(result.user);
+      setCurrentUser(result.user);
+      return null;
+    }
+    return result.error ?? 'Social login failed';
+  }, []);
+
+  const logout = useCallback(() => {
+    ExternalAuth.logout();
+    UserStore.clearUser();
+    setCurrentUser(null);
+  }, []);
+
+  return (
+    <AuthContext.Provider value={{ currentUser, initials, login, register, loginWith, logout }}>
+      {children}
+    </AuthContext.Provider>
+  );
+}
+
+export function useAuth() {
+  const ctx = useContext(AuthContext);
+  if (!ctx) throw new Error('useAuth must be used within AuthProvider');
+  return ctx;
+}

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

@@ -0,0 +1,14 @@
+import { Navigate, useLocation } from 'react-router-dom';
+import { useAuth } from './AuthContext';
+import type { ReactNode } from 'react';
+
+export function AuthGuard({ children }: { children: ReactNode }) {
+  const { currentUser } = useAuth();
+  const location = useLocation();
+
+  if (!currentUser) {
+    return <Navigate to="/" state={{ returnUrl: location.pathname }} replace />;
+  }
+
+  return <>{children}</>;
+}