@aws/nx-plugin 0.62.0 → 0.62.2

package/src/ts/react-website/app/schema.d.ts

@@ -2,8 +2,8 @@
  * Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  * SPDX-License-Identifier: Apache-2.0
  */
-import { SupportedStyles } from '@nx/react';
 import { IacProviderOption } from '../../../utils/iac';
+import { UxProviderOption } from '../../../utils/ux';
 
 export interface TsReactWebsiteGeneratorSchema {
   name: string;
@@ -11,5 +11,6 @@ export interface TsReactWebsiteGeneratorSchema {
   skipInstall?: boolean;
   enableTanstackRouter?: boolean;
   enableTailwind?: boolean;
+  uxProvider?: UxProviderOption;
   iacProvider: IacProviderOption;
 }

package/src/ts/react-website/app/schema.json

@@ -30,6 +30,28 @@
       "default": "packages",
       "x-prompt": "What directory would you like to store your application in?"
     },
+    "uxProvider": {
+      "type": "string",
+      "description": "The preferred UX provider.",
+      "enum": ["None", "Cloudscape"],
+      "x-priority": "important",
+      "default": "Cloudscape",
+      "x-prompt": {
+        "message": "Which UX provider should we scaffold for this app?",
+        "type": "list",
+        "items": [
+          {
+            "value": "None",
+            "label": "None (plain React/Vite without a UI kit)"
+          },
+          {
+            "value": "Cloudscape",
+            "label": "Cloudscape (AWS-first components with ready-made layouts)"
+          }
+        ],
+        "default": "None"
+      }
+    },
     "enableTailwind": {
       "description": "Enable TailwindCSS for utility-first styling.",
       "type": "boolean",

package/src/ts/react-website/cognito-auth/__snapshots__/generator.spec.ts.snap

@@ -1,9 +1,344 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
+exports[`cognito-auth generator (uxProvider=Cloudscape) > should update AppLayout > app-layout-with-auth 1`] = `
+"import { useAuth } from 'react-oidc-context';
+import * as React from 'react';
+import { createContext, useCallback, useEffect, useState } from 'react';
+import { NavItems } from './navitems';
+import Config from '../../config';
+
+import {
+  BreadcrumbGroup,
+  BreadcrumbGroupProps,
+  SideNavigation,
+  TopNavigation,
+} from '@cloudscape-design/components';
+
+import CloudscapeAppLayout, {
+  AppLayoutProps,
+} from '@cloudscape-design/components/app-layout';
+
+import { matchByPath, useLocation, useNavigate } from '@tanstack/react-router';
+import { Outlet } from '@tanstack/react-router';
+
+const getBreadcrumbs = (
+  pathName: string,
+  search: string,
+  defaultBreadcrumb: string,
+  availableRoutes?: string[],
+) => {
+  const segments = [
+    defaultBreadcrumb,
+    ...pathName.split('/').filter((segment) => segment !== ''),
+  ];
+
+  return segments.map((segment, i) => {
+    const href =
+      i === 0
+        ? '/'
+        : \`/\${segments
+            .slice(1, i + 1)
+            .join('/')
+            .replace('//', '/')}\`;
+
+    const matched =
+      !availableRoutes || availableRoutes.find((r) => matchByPath(r, href, {}));
+
+    return {
+      href: matched ? \`\${href}\${search}\` : '#',
+      text: segment,
+    };
+  });
+};
+
+export interface AppLayoutContext {
+  appLayoutProps: AppLayoutProps;
+  setAppLayoutProps: (props: AppLayoutProps) => void;
+  displayHelpPanel: (helpContent: React.ReactNode) => void;
+}
+
+/**
+ * Context for updating/retrieving the AppLayout.
+ */
+export const AppLayoutContext = createContext({
+  appLayoutProps: {},
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  setAppLayoutProps: (_: AppLayoutProps) => {},
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  displayHelpPanel: (_: React.ReactNode) => {},
+});
+
+/**
+ * Defines the App layout and contains logic for routing.
+ */
+const AppLayout: React.FC = () => {
+  const { user, removeUser, signoutRedirect, clearStaleState } = useAuth();
+  const navigate = useNavigate();
+  const appLayout = React.useRef<AppLayoutProps.Ref>(null);
+  const [activeBreadcrumbs, setActiveBreadcrumbs] = useState<
+    BreadcrumbGroupProps.Item[]
+  >([{ text: '/', href: '/' }]);
+  const [appLayoutProps, setAppLayoutProps] = useState<AppLayoutProps>({});
+  const { pathname, search } = useLocation();
+  const setAppLayoutPropsSafe = useCallback(
+    (props: AppLayoutProps) => {
+      JSON.stringify(appLayoutProps) !== JSON.stringify(props) &&
+        setAppLayoutProps(props);
+    },
+    [appLayoutProps],
+  );
+  useEffect(() => {
+    const breadcrumbs = getBreadcrumbs(
+      pathname,
+      Object.entries(search).reduce((p, [k, v]) => p + \`\${k}=\${v}\`, ''),
+      '/',
+    );
+    setActiveBreadcrumbs(breadcrumbs);
+  }, [pathname, search]);
+  const onNavigate = useCallback(
+    (
+      e: CustomEvent<{
+        href: string;
+        external?: boolean;
+      }>,
+    ) => {
+      if (!e.detail.external) {
+        e.preventDefault();
+        setAppLayoutPropsSafe({
+          contentType: undefined,
+        });
+        navigate({ to: e.detail.href });
+      }
+    },
+    [navigate, setAppLayoutPropsSafe],
+  );
+  return (
+    <AppLayoutContext.Provider
+      value={{
+        appLayoutProps,
+        setAppLayoutProps: setAppLayoutPropsSafe,
+        displayHelpPanel: (helpContent: React.ReactNode) => {
+          setAppLayoutPropsSafe({ tools: helpContent, toolsHide: false });
+          appLayout.current?.openTools();
+        },
+      }}
+    >
+      <TopNavigation
+        identity={{
+          href: '/',
+          title: Config.applicationName,
+          logo: {
+            src: Config.logo,
+          },
+        }}
+        utilities={[
+          {
+            type: 'menu-dropdown',
+            text: \`\${user?.profile?.['cognito:username']}\`,
+            iconName: 'user-profile-active',
+            onItemClick: (e) => {
+              if (e.detail.id === 'signout') {
+                removeUser();
+                signoutRedirect({
+                  post_logout_redirect_uri: window.location.origin,
+                  extraQueryParams: {
+                    redirect_uri: window.location.origin,
+                    response_type: 'code',
+                  },
+                });
+                clearStaleState();
+              }
+            },
+            items: [{ id: 'signout', text: 'Sign out' }],
+          },
+        ]}
+      />
+      <CloudscapeAppLayout
+        ref={appLayout}
+        breadcrumbs={
+          <BreadcrumbGroup onFollow={onNavigate} items={activeBreadcrumbs} />
+        }
+        toolsHide
+        navigation={
+          <SideNavigation
+            header={{ text: Config.applicationName, href: '/' }}
+            activeHref={pathname}
+            onFollow={onNavigate}
+            items={NavItems}
+          />
+        }
+        content={<Outlet />}
+        {...appLayoutProps}
+      />
+    </AppLayoutContext.Provider>
+  );
+};
+
+export default AppLayout;
+"
+`;
+
+exports[`cognito-auth generator (uxProvider=None) > should update AppLayout > app-layout-with-auth 1`] = `
+"import { useAuth } from 'react-oidc-context';
+import * as React from 'react';
+
+import { useEffect, useMemo, useState } from 'react';
+
+import Config from '../../config';
+import { Link, useLocation, useMatchRoute } from '@tanstack/react-router';
+
+const getBreadcrumbs = (
+  matchRoute: ReturnType<typeof useMatchRoute>,
+  pathName: string,
+  search: string,
+  defaultBreadcrumb: string,
+  availableRoutes?: string[],
+) => {
+  const segments = [
+    defaultBreadcrumb,
+    ...pathName.split('/').filter((segment) => segment !== ''),
+  ];
+
+  return segments.map((segment, i) => {
+    const href =
+      i === 0
+        ? '/'
+        : \`/\${segments
+            .slice(1, i + 1)
+            .join('/')
+            .replace('//', '/')}\`;
+
+    const matched =
+      !availableRoutes || availableRoutes.find((r) => matchRoute({ to: href }));
+
+    return {
+      href: matched ? \`\${href}\${search}\` : '#',
+      text: segment,
+    };
+  });
+};
+
+/**
+ * Defines the App layout and contains logic for routing.
+ */
+const AppLayout: React.FC<React.PropsWithChildren> = ({ children }) => {
+  const { user, removeUser, signoutRedirect, clearStaleState } = useAuth();
+  const { user, removeUser, signoutRedirect, clearStaleState } = useAuth();
+  const [activeBreadcrumbs, setActiveBreadcrumbs] = useState<
+    {
+      href: string;
+      text: string;
+    }[]
+  >([{ text: '/', href: '/' }]);
+  const matchRoute = useMatchRoute();
+  const { pathname, search } = useLocation();
+  const navItems = useMemo(() => [{ to: '/', label: 'Home' }], []);
+  useEffect(() => {
+    const breadcrumbs = getBreadcrumbs(
+      matchRoute,
+      pathname,
+      Object.entries(search).reduce((p, [k, v]) => p + \`\${k}=\${v}\`, ''),
+      'Home',
+    );
+    setActiveBreadcrumbs(breadcrumbs);
+  }, [matchRoute, pathname, search]);
+  return (
+    <div className="app-shell">
+      <header className="app-header">
+        <div className="app-header-inner">
+          <div className="brand">
+            <a href="/">
+              <img
+                src={Config.logo}
+                alt={\`\${Config.applicationName} logo\`}
+                className="brand-logo"
+              />
+              <span className="brand-name">{Config.applicationName}</span>
+            </a>
+          </div>
+
+          <nav className="app-nav">
+            {navItems.map((item) => (
+              <Link
+                key={item.to}
+                to={item.to}
+                className={pathname === item.to ? 'active' : undefined}
+              >
+                {item.label}
+              </Link>
+            ))}
+          </nav>
+          <div className="user-greeting">
+            <span>Hi, {\`\${user?.profile?.['cognito:username']}\`}</span>
+            <button
+              type="button"
+              className="signout-link"
+              onClick={() => {
+                removeUser();
+                signoutRedirect({
+                  post_logout_redirect_uri: window.location.origin,
+                  extraQueryParams: {
+                    redirect_uri: window.location.origin,
+                    response_type: 'code',
+                  },
+                });
+                clearStaleState();
+              }}
+            >
+              Sign out
+            </button>
+          </div>
+          <div className="user-greeting">
+            <span>Hi, {\`\${user?.profile?.['cognito:username']}\`}</span>
+            <button
+              type="button"
+              className="signout-link"
+              onClick={() => {
+                removeUser();
+                signoutRedirect({
+                  post_logout_redirect_uri: window.location.origin,
+                  extraQueryParams: {
+                    redirect_uri: window.location.origin,
+                    response_type: 'code',
+                  },
+                });
+                clearStaleState();
+              }}
+            >
+              Sign out
+            </button>
+          </div>
+        </div>
+      </header>
+      <main className="app-main">
+        <nav className="breadcrumbs" aria-label="Breadcrumb">
+          {activeBreadcrumbs.map((crumb, index) => (
+            <span className="breadcrumb-segment" key={crumb.href || index}>
+              {index > 0 && <span className="breadcrumb-separator">/</span>}
+              {index === activeBreadcrumbs.length - 1 ? (
+                <span className="breadcrumb-current">{crumb.text}</span>
+              ) : (
+                <Link to={crumb.href}>{crumb.text}</Link>
+              )}
+            </span>
+          ))}
+        </nav>
+
+        <section className="card">{children}</section>
+      </main>
+    </div>
+  );
+};
+
+export default AppLayout;
+"
+`;
+
 exports[`cognito-auth generator > should generate files > cognito-auth-component 1`] = `
 "import React, { PropsWithChildren, useEffect } from 'react';
 import { AuthProvider, AuthProviderProps, useAuth } from 'react-oidc-context';
-import { Alert, Spinner } from '@cloudscape-design/components';
+import { Alert } from '../alert';
+import { Spinner } from '../spinner';
 import { useRuntimeConfig } from '../../hooks/useRuntimeConfig';
 
 /**
@@ -22,7 +357,9 @@ const CognitoAuth: React.FC<PropsWithChildren> = ({ children }) => {
     }
     return (
       <Alert type="error" header="Runtime config configuration error">
-        The cognitoProps have not been configured in the runtime-config.json.
+        <p>
+          The cognitoProps have not been configured in the runtime-config.json.
+        </p>
       </Alert>
     );
   }
@@ -53,16 +390,20 @@ const CognitoAuthInternal: React.FC<PropsWithChildren> = ({ children }) => {
 
   if (auth.isAuthenticated) {
     return children;
-  } else if (auth.error) {
+  }
+
+  if (auth.error) {
     return (
       <Alert type="error" header="Configuration error">
-        Error contacting Cognito. Please check your runtime-config.json is
-        configured with the correct endpoints.
+        <p>
+          Error contacting Cognito. Please check your runtime-config.json is
+          configured with the correct endpoints.
+        </p>
       </Alert>
     );
-  } else {
-    return <Spinner />;
   }
+
+  return <Spinner />;
 };
 
 export default CognitoAuth;
@@ -264,184 +605,6 @@ export class UserIdentity extends Construct {
 
 exports[`cognito-auth generator > should not be able to run the generator multiple times 1`] = `[Error: This generator has already been run on test-project.]`;
 
-exports[`cognito-auth generator > should update AppLayout > app-layout-with-auth 1`] = `
-"import { useAuth } from 'react-oidc-context';
-import * as React from 'react';
-import { createContext, useCallback, useEffect, useState } from 'react';
-import { NavItems } from './navitems';
-import Config from '../../config';
-
-import {
-  BreadcrumbGroup,
-  BreadcrumbGroupProps,
-  SideNavigation,
-  TopNavigation,
-} from '@cloudscape-design/components';
-
-import CloudscapeAppLayout, {
-  AppLayoutProps,
-} from '@cloudscape-design/components/app-layout';
-
-import { matchByPath, useLocation, useNavigate } from '@tanstack/react-router';
-import { Outlet } from '@tanstack/react-router';
-
-const getBreadcrumbs = (
-  pathName: string,
-  search: string,
-  defaultBreadcrumb: string,
-  availableRoutes?: string[],
-) => {
-  const segments = [
-    defaultBreadcrumb,
-    ...pathName.split('/').filter((segment) => segment !== ''),
-  ];
-
-  return segments.map((segment, i) => {
-    const href =
-      i === 0
-        ? '/'
-        : \`/\${segments
-            .slice(1, i + 1)
-            .join('/')
-            .replace('//', '/')}\`;
-
-    const matched =
-      !availableRoutes || availableRoutes.find((r) => matchByPath(r, href, {}));
-
-    return {
-      href: matched ? \`\${href}\${search}\` : '#',
-      text: segment,
-    };
-  });
-};
-
-export interface AppLayoutContext {
-  appLayoutProps: AppLayoutProps;
-  setAppLayoutProps: (props: AppLayoutProps) => void;
-  displayHelpPanel: (helpContent: React.ReactNode) => void;
-}
-
-/**
- * Context for updating/retrieving the AppLayout.
- */
-export const AppLayoutContext = createContext({
-  appLayoutProps: {},
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
-  setAppLayoutProps: (_: AppLayoutProps) => {},
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
-  displayHelpPanel: (_: React.ReactNode) => {},
-});
-
-/**
- * Defines the App layout and contains logic for routing.
- */
-const AppLayout: React.FC = () => {
-  const { user, removeUser, signoutRedirect, clearStaleState } = useAuth();
-  const navigate = useNavigate();
-  const appLayout = React.useRef<AppLayoutProps.Ref>(null);
-  const [activeBreadcrumbs, setActiveBreadcrumbs] = useState<
-    BreadcrumbGroupProps.Item[]
-  >([{ text: '/', href: '/' }]);
-  const [appLayoutProps, setAppLayoutProps] = useState<AppLayoutProps>({});
-  const { pathname, search } = useLocation();
-  const setAppLayoutPropsSafe = useCallback(
-    (props: AppLayoutProps) => {
-      JSON.stringify(appLayoutProps) !== JSON.stringify(props) &&
-        setAppLayoutProps(props);
-    },
-    [appLayoutProps],
-  );
-  useEffect(() => {
-    const breadcrumbs = getBreadcrumbs(
-      pathname,
-      Object.entries(search).reduce((p, [k, v]) => p + \`\${k}=\${v}\`, ''),
-      '/',
-    );
-    setActiveBreadcrumbs(breadcrumbs);
-  }, [pathname, search]);
-  const onNavigate = useCallback(
-    (
-      e: CustomEvent<{
-        href: string;
-        external?: boolean;
-      }>,
-    ) => {
-      if (!e.detail.external) {
-        e.preventDefault();
-        setAppLayoutPropsSafe({
-          contentType: undefined,
-        });
-        navigate({ to: e.detail.href });
-      }
-    },
-    [navigate, setAppLayoutPropsSafe],
-  );
-  return (
-    <AppLayoutContext.Provider
-      value={{
-        appLayoutProps,
-        setAppLayoutProps: setAppLayoutPropsSafe,
-        displayHelpPanel: (helpContent: React.ReactNode) => {
-          setAppLayoutPropsSafe({ tools: helpContent, toolsHide: false });
-          appLayout.current?.openTools();
-        },
-      }}
-    >
-      <TopNavigation
-        identity={{
-          href: '/',
-          title: Config.applicationName,
-          logo: {
-            src: Config.logo,
-          },
-        }}
-        utilities={[
-          {
-            type: 'menu-dropdown',
-            text: \`\${user?.profile?.['cognito:username']}\`,
-            iconName: 'user-profile-active',
-            onItemClick: (e) => {
-              if (e.detail.id === 'signout') {
-                removeUser();
-                signoutRedirect({
-                  post_logout_redirect_uri: window.location.origin,
-                  extraQueryParams: {
-                    redirect_uri: window.location.origin,
-                    response_type: 'code',
-                  },
-                });
-                clearStaleState();
-              }
-            },
-            items: [{ id: 'signout', text: 'Sign out' }],
-          },
-        ]}
-      />
-      <CloudscapeAppLayout
-        ref={appLayout}
-        breadcrumbs={
-          <BreadcrumbGroup onFollow={onNavigate} items={activeBreadcrumbs} />
-        }
-        toolsHide
-        navigation={
-          <SideNavigation
-            header={{ text: Config.applicationName, href: '/' }}
-            activeHref={pathname}
-            onFollow={onNavigate}
-            items={NavItems}
-          />
-        }
-        content={<Outlet />}
-        {...appLayoutProps}
-      />
-    </AppLayoutContext.Provider>
-  );
-};
-
-export default AppLayout;
-"
-`;
-
 exports[`cognito-auth generator > should update main.tsx when RuntimeConfigProvider exists > main-tsx-with-runtime-config 1`] = `
 "import CognitoAuth from './components/CognitoAuth';
 import RuntimeConfigProvider from './components/RuntimeConfig';

package/src/ts/react-website/cognito-auth/files/app/components/CognitoAuth/index.tsx.template

@@ -1,6 +1,7 @@
 import React, { PropsWithChildren, useEffect } from 'react';
 import { AuthProvider, AuthProviderProps, useAuth } from 'react-oidc-context';
-import { Alert, Spinner } from '@cloudscape-design/components';
+import { Alert } from '../alert';
+import { Spinner } from '../spinner';
 import { useRuntimeConfig } from '../../hooks/useRuntimeConfig';
 
 /**
@@ -15,16 +16,11 @@ const CognitoAuth: React.FC<PropsWithChildren> = ({ children }) => {
   if (!cognitoProps) {
     if (import.meta.env.MODE === 'serve-local') {
       // In serve-local mode with no cognitoProps available, we skip login
-      return (
-        <AuthProvider>{children}</AuthProvider>
-      );
+      return <AuthProvider>{children}</AuthProvider>;
     }
     return (
-      <Alert
-        type="error"
-        header="Runtime config configuration error"
-      >
-        The cognitoProps have not been configured in the runtime-config.json.
+      <Alert type="error" header="Runtime config configuration error">
+        <p>The cognitoProps have not been configured in the runtime-config.json.</p>
       </Alert>
     );
   }
@@ -51,20 +47,24 @@ const CognitoAuthInternal: React.FC<PropsWithChildren> = ({ children }) => {
     if (!auth.isAuthenticated && !auth.isLoading) {
       auth.signinRedirect();
     }
-  }, [auth])
+  }, [auth]);
 
   if (auth.isAuthenticated) {
     return children;
-  } else if (auth.error) {
+  }
+
+  if (auth.error) {
     return (
       <Alert type="error" header="Configuration error">
-        Error contacting Cognito. Please check your runtime-config.json is
-        configured with the correct endpoints.
+        <p>
+          Error contacting Cognito. Please check your runtime-config.json is configured
+          with the correct endpoints.
+        </p>
       </Alert>
     );
-  } else {
-    return <Spinner />;
   }
+
+  return <Spinner />;
 };
 
 export default CognitoAuth;