igniteui-cli 15.2.2 → 15.3.0

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

@@ -0,0 +1,81 @@
+import { useState, useEffect } from 'react';
+import { Outlet, useNavigate, useLocation } from 'react-router-dom';
+import {
+  IgrNavDrawer,
+  IgrNavDrawerItem,
+  IgrIcon,
+  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')
+);
+
+const navRoutes = routes.filter((r) => r.text);
+
+export default function App() {
+  const [drawerOpen, setDrawerOpen] = useState(true);
+  const navigate = useNavigate();
+  const location = useLocation();
+
+  useEffect(() => {
+    const mq = window.matchMedia('(min-width: 1025px)');
+    const update = () => setDrawerOpen(mq.matches);
+    update();
+    mq.addEventListener('change', update);
+    return () => mq.removeEventListener('change', update);
+  }, []);
+
+  return (
+    <div className="app">
+      <header className="app__navbar">
+        <button
+          className="app__menu-button"
+          type="button"
+          aria-label="Toggle navigation"
+          onClick={() => setDrawerOpen(o => !o)}
+        >
+          <IgrIcon name="menu" collection="material" />
+        </button>
+        <h1 className="app__title">$(name)</h1>
+      </header>
+      <div className={!drawerOpen ? 'app__body app--mini' : 'app__body'}>
+        <IgrNavDrawer className="app__drawer" open position="relative">
+          {navRoutes.map((route) => (
+            <IgrNavDrawerItem
+              key={route.path}
+              active={location.pathname === route.path}
+              onClick={() => navigate(route.path)}
+            >
+              <IgrIcon
+                slot="icon"
+                name={route.icon || 'apps'}
+                collection="material"
+                style={location.pathname === route.path ? { color: '#0075D2' } : undefined}
+              />
+              <span slot="content">{route.text}</span>
+            </IgrNavDrawerItem>
+          ))}
+        </IgrNavDrawer>
+        <div className="app__content">
+          <Outlet />
+        </div>
+      </div>
+    </div>
+  );
+}

package/templates/react/igr-ts/projects/side-nav-mini/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-mini/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/side-nav-mini/index.d.ts

@@ -0,0 +1,15 @@
+import { ProjectTemplate } from "@igniteui/cli-core";
+import { BaseWithHomeIgrTsProject } from "../_base_with_home";
+export declare class SideNavMiniIgrTsProject extends BaseWithHomeIgrTsProject implements ProjectTemplate {
+    id: string;
+    name: string;
+    description: string;
+    dependencies: string[];
+    framework: string;
+    projectType: string;
+    hasExtraConfiguration: boolean;
+    isHidden: boolean;
+    get templatePaths(): string[];
+}
+declare const _default: SideNavMiniIgrTsProject;
+export default _default;

package/templates/react/igr-ts/projects/side-nav-mini/index.js

@@ -0,0 +1,46 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SideNavMiniIgrTsProject = void 0;
+const path = __importStar(require("path"));
+const _base_with_home_1 = require("../_base_with_home");
+class SideNavMiniIgrTsProject extends _base_with_home_1.BaseWithHomeIgrTsProject {
+    constructor() {
+        super(...arguments);
+        this.id = "side-nav-mini";
+        this.name = "Side navigation + collapsible mini nav";
+        this.description = "Side navigation with a collapsible mini (icons-only) variant and responsive breakpoints";
+        this.dependencies = [];
+        this.framework = "react";
+        this.projectType = "igr-ts";
+        this.hasExtraConfiguration = false;
+        this.isHidden = false;
+    }
+    get templatePaths() {
+        return [...super.templatePaths, path.join(__dirname, "files")];
+    }
+}
+exports.SideNavMiniIgrTsProject = SideNavMiniIgrTsProject;
+exports.default = new SideNavMiniIgrTsProject();

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

@@ -0,0 +1,106 @@
+.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__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__title {
+  margin: 0 0 0 16px;
+  color: #000;
+  font-size: 1.25rem;
+  font-weight: 600;
+  line-height: 1;
+}
+
+.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[active]::part(base) {
+  background: #e0f2ff;
+  color: #0075d2;
+}
+
+igc-nav-drawer-item[active] igc-icon {
+  color: #0075d2;
+}
+
+.app--mini .app__drawer {
+  --menu-full-width: 68px;
+}
+
+igc-nav-drawer.app__drawer::part(base) {
+  transition: width 0.3s ease-out;
+  overflow: hidden;
+}
+
+.app--mini igc-nav-drawer-item::part(base) {
+  justify-content: center;
+  width: 40px;
+  min-height: 40px;
+  padding: 0;
+  margin: 4px auto;
+  border-radius: 8px;
+}
+
+.app--mini igc-nav-drawer-item::part(content) {
+  display: none;
+}
+
+.app__content {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: auto;
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+}
+
+@media (max-width: 1024px) {
+  .app__menu-button {
+    display: none;
+  }
+}

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

@@ -0,0 +1,101 @@
+import { useState, useEffect, useMemo } from 'react';
+import { Outlet, useNavigate, useLocation } from 'react-router-dom';
+import {
+  IgrNavDrawer,
+  IgrNavDrawerItem,
+  IgrIcon,
+  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 [drawerOpen, setDrawerOpen] = useState(true);
+  const navigate = useNavigate();
+  const location = useLocation();
+  const { currentUser } = useAuth();
+
+  const navRoutes = useMemo(() => routes.filter((r) => {
+    if (!r.text) return false;
+    if ((r as any).requiresAuth && !currentUser) return false;
+    return true;
+  }), [currentUser]);
+
+  useEffect(() => {
+    const mq = window.matchMedia('(min-width: 1025px)');
+    const update = () => setDrawerOpen(mq.matches);
+    update();
+    mq.addEventListener('change', update);
+    return () => mq.removeEventListener('change', update);
+  }, []);
+
+  return (
+    <div className="app">
+      <header className="app__navbar">
+        <button
+          className="app__menu-button"
+          type="button"
+          aria-label="Toggle navigation"
+          onClick={() => setDrawerOpen(o => !o)}
+        >
+          <IgrIcon name="menu" collection="material" />
+        </button>
+        <h1 className="app__title">$(name)</h1>
+        <div className="app__navbar-spacer" />
+        <LoginBar />
+      </header>
+      <div className={!drawerOpen ? 'app__body app--mini' : 'app__body'}>
+        <IgrNavDrawer className="app__drawer" open position="relative">
+          {navRoutes.map((route) => (
+            <IgrNavDrawerItem
+              key={route.path}
+              active={location.pathname === route.path}
+              onClick={() => navigate(route.path)}
+            >
+              <IgrIcon
+                slot="icon"
+                name={route.icon || 'apps'}
+                collection="material"
+                style={location.pathname === route.path ? { color: '#0075D2' } : undefined}
+              />
+              <span slot="content">{route.text}</span>
+            </IgrNavDrawerItem>
+          ))}
+        </IgrNavDrawer>
+        <div className="app__content">
+          <Outlet />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default function App() {
+  return (
+    <AuthProvider>
+      <AppContent />
+    </AuthProvider>
+  );
+}

package/templates/react/igr-ts/projects/side-nav-mini-auth/index.d.ts

@@ -0,0 +1,15 @@
+import { ProjectTemplate } from "@igniteui/cli-core";
+import { SideNavMiniIgrTsProject } from "../side-nav-mini";
+export declare class SideNavMiniAuthIgrTsProject extends SideNavMiniIgrTsProject implements ProjectTemplate {
+    id: string;
+    name: string;
+    description: string;
+    dependencies: string[];
+    framework: string;
+    projectType: string;
+    hasExtraConfiguration: boolean;
+    isHidden: boolean;
+    get templatePaths(): string[];
+}
+declare const _default: SideNavMiniAuthIgrTsProject;
+export default _default;

package/templates/react/igr-ts/projects/side-nav-mini-auth/index.js

@@ -0,0 +1,50 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SideNavMiniAuthIgrTsProject = void 0;
+const path = __importStar(require("path"));
+const side_nav_mini_1 = require("../side-nav-mini");
+class SideNavMiniAuthIgrTsProject extends side_nav_mini_1.SideNavMiniIgrTsProject {
+    constructor() {
+        super(...arguments);
+        this.id = "side-nav-mini-auth";
+        this.name = "Side navigation (mini) + login";
+        this.description = "Collapsible mini side navigation extended with user authentication module";
+        this.dependencies = [];
+        this.framework = "react";
+        this.projectType = "igr-ts";
+        this.hasExtraConfiguration = false;
+        this.isHidden = true;
+    }
+    get templatePaths() {
+        return [
+            ...super.templatePaths,
+            path.join(__dirname, "../side-nav-auth/files"),
+            path.join(__dirname, "files")
+        ];
+    }
+}
+exports.SideNavMiniAuthIgrTsProject = SideNavMiniAuthIgrTsProject;
+exports.default = new SideNavMiniAuthIgrTsProject();

package/templates/webcomponents/igc-ts/projects/_base/files/src/app/app.ts

@@ -6,6 +6,11 @@ import { routes } from './app-routing.js';
 @customElement('app-root')
 export default class App extends LitElement {
   static styles = css`
+    :host {
+      display: block;
+      min-height: 100vh;
+    }
+
     router-outlet {
       width: 100%;
     }
@@ -13,7 +18,7 @@ export default class App extends LitElement {
     .outer-wrapper {
       display: flex;
       justify-content: center;
-      height: 100%;
+      min-height: 100vh;
     }
   `;
 

package/templates/webcomponents/igc-ts/projects/_base/files/styles.css

@@ -2,6 +2,7 @@ body {
   background: var(--ig-surface-500, 0 0% 100%);
   color: var(--ig-surface-500-contrast, black);
   font-family: var(--ig-font-family);
+  font-weight: 400;
 }
 
 html,

package/templates/webcomponents/igc-ts/projects/_base_with_home/files/index.html

@@ -4,7 +4,9 @@
 <head>
   <meta charset="utf-8">
   <base href="/">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Ignite UI for Web Components</title>
+  <link rel="icon" type="image/png" href="./src/assets/wc.png">
   <link rel="stylesheet" href="./node_modules/igniteui-webcomponents/themes/light/bootstrap.css">
   <link rel="stylesheet" href="./styles.css">
 </head>