create-hhmi-example 1.0.0

package/template/hhmiexample.client/src/components/AppFrame/Theme.tsx

@@ -0,0 +1,98 @@
+import { createDarkTheme, createLightTheme, type BrandVariants, type Theme } from "@fluentui/react-components";
+
+const colorNeutralForegroundDisabledLight = '#888';
+const colorNeutralForegroundDisabledDark = '#999';
+
+const brandThemeDev: BrandVariants = {
+    10: "#0A0102",
+    20: "#1A0408",
+    30: "#2A070E",
+    40: "#3A0A14",
+    50: "#4A0D1A",
+    60: "#5A1020",
+    70: "#6A1326",
+    80: "#7A162C",
+    90: "#8A1932",
+    100: "#9A1C38",
+    110: "#AA1F3E",
+    120: "#BA2244",
+    130: "#CA254A",
+    140: "#DA2850",
+    150: "#EA2B56",
+    160: "#FA2E5C"
+};
+
+export const lightThemeDev: Theme = {
+    ...createLightTheme(brandThemeDev),
+    colorNeutralForegroundDisabled: colorNeutralForegroundDisabledLight
+};
+
+export const darkThemeDev: Theme = {
+    ...createDarkTheme(brandThemeDev),
+    colorNeutralForegroundDisabled: colorNeutralForegroundDisabledDark
+};
+
+const brandThemeTest: BrandVariants = {
+    10: "#000C1A",
+    20: "#001A33",
+    30: "#00284D",
+    40: "#003666",
+    50: "#004480",
+    60: "#005299",
+    70: "#0060B3",
+    80: "#006ECC",
+    90: "#007CE6",
+    100: "#004EFF",
+    110: "#004EFF",
+    120: "#1A66FF",
+    130: "#337EFF",
+    140: "#4D96FF",
+    150: "#66AEFF",
+    160: "#80C6FF"
+};
+
+export const lightThemeTest: Theme = {
+    ...createLightTheme(brandThemeTest),
+    colorBrandBackground: brandThemeTest[110],
+    colorBrandBackground2: brandThemeTest[120],
+    colorNeutralForegroundDisabled: colorNeutralForegroundDisabledLight
+};
+
+export const darkThemeTest: Theme = {
+    ...createDarkTheme(brandThemeTest),
+    colorBrandBackground: brandThemeTest[110],
+    colorBrandBackground2: brandThemeTest[120],
+    colorNeutralForegroundDisabled: colorNeutralForegroundDisabledDark
+};
+
+const brandTheme: BrandVariants = {
+    10: "#020404",
+    20: "#0F1B1C",
+    30: "#142D2F",
+    40: "#163A3D",
+    50: "#17484C",
+    60: "#17565B",
+    70: "#16656B",
+    80: "#13747B",
+    90: "#358187",
+    100: "#4E8E93",
+    110: "#659BA0",
+    120: "#7AA9AD",
+    130: "#90B6B9",
+    140: "#A5C4C6",
+    150: "#BAD2D4",
+    160: "#CFE0E1"
+};
+
+export const lightTheme: Theme = {
+    ...createLightTheme(brandTheme),
+    colorNeutralForegroundDisabled: colorNeutralForegroundDisabledLight,
+    colorBrandBackgroundInvertedHover: brandTheme[100],
+    colorBrandBackground2: brandTheme[60]
+};
+
+export const darkTheme: Theme = {
+    ...createDarkTheme(brandTheme),
+    colorNeutralForegroundDisabled: colorNeutralForegroundDisabledDark,
+    colorBrandBackground2: brandTheme[60]
+};

package/template/hhmiexample.client/src/components/AppFrame/UserSettingPage.tsx

@@ -0,0 +1,91 @@
+import {
+    makeStyles,
+    tokens,
+    Title2,
+    Text,
+    Avatar,
+    Switch
+} from "@fluentui/react-components";
+import type { IExampleUser } from "../../types/IExampleUser";
+
+const useStyles = makeStyles({
+    container: {
+        padding: '24px',
+        maxWidth: '600px',
+        margin: '0 auto'
+    },
+    header: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: '16px',
+        marginBottom: '32px'
+    },
+    backButton: {
+        minWidth: '40px'
+    },
+    profileSection: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: '16px',
+        marginBottom: '32px',
+        padding: '24px',
+        backgroundColor: tokens.colorNeutralBackground2,
+        borderRadius: tokens.borderRadiusLarge
+    },
+    profileInfo: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '4px'
+    },
+    settingInfo: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '4px'
+    }
+});
+
+export default function UserSettingsPage(props: { currentUser: IExampleUser; setCurrentUser: React.Dispatch<React.SetStateAction<IExampleUser | undefined>>; }) {
+    const styles = useStyles();
+
+    return (
+        <div className={styles.container}>
+            <div className={styles.header}>
+                <Title2>User Settings</Title2>
+            </div>
+
+            <div className={styles.profileSection}>
+                <Avatar
+                    name={props.currentUser.Name}
+                    size={128}
+                    color="colorful"
+                    image={{ src: props.currentUser.PhotoURL }}
+                />
+                <div className={styles.profileInfo}>
+                    <Text size={500} weight="semibold">{props.currentUser.Name}</Text>
+                    <Text size={300} style={{ color: tokens.colorNeutralForeground3 }}>
+                        {props.currentUser.UserId}
+                    </Text>
+                </div>
+            </div>
+            <div className={styles.profileSection} style={{ justifyContent: 'space-between' }}>
+                <div className={styles.settingInfo}>
+                    <Text weight="semibold">{props.currentUser.IsDarkTheme === true ? "Dark" : "Light"} Mode</Text>
+                    <Text size={200} style={{ color: tokens.colorNeutralForeground3 }}>
+                        Switch between light and dark themes
+                    </Text>
+                </div>
+                <Switch
+                    checked={props.currentUser.IsDarkTheme}
+                    aria-label="Toggle dark mode"
+                    onChange={(_ev, data) => {
+                        const updatedUser = {
+                            ...props.currentUser,
+                            IsDarkTheme: data.checked
+                        };
+                        props.setCurrentUser(updatedUser);
+                    }}
+                />
+            </div>
+        </div>
+    );
+}

package/template/hhmiexample.client/src/components/AppFrame/UserSettings.tsx

@@ -0,0 +1,146 @@
+import {
+    Avatar,
+    makeStyles,
+    Text,
+    tokens,
+    Menu,
+    MenuTrigger,
+    MenuPopover,
+    MenuList,
+    MenuItem,
+    MenuDivider
+} from "@fluentui/react-components";
+import { DarkTheme20Regular } from "@fluentui/react-icons";
+import { useNavigate } from "react-router";
+import React from "react";
+import type { IExampleUser } from "../../types/IExampleUser";
+
+interface IUserSettingsProps {
+    setCurrentUser: React.Dispatch<React.SetStateAction<IExampleUser | undefined>>;
+    currentUser: IExampleUser;
+    isProd: boolean;
+}
+
+export default function UserSettings(props: IUserSettingsProps) {
+    const useStyles = makeStyles({
+        headerRight: {
+            display: 'flex',
+            alignItems: 'center',
+            gap: '16px'
+        },
+        userName: {
+            '@media (max-width: 768px)': {
+                display: 'none'
+            },
+            color: props.isProd ? tokens.colorNeutralForeground1 : tokens.colorNeutralForegroundOnBrand,
+        },
+        userProfile: {
+            display: 'flex',
+            alignItems: 'center',
+            gap: '8px',
+            padding: '8px',
+            borderRadius: tokens.borderRadiusMedium,
+            cursor: 'pointer',
+            ':hover': {
+                backgroundColor: tokens.colorNeutralBackground1Hover
+            }
+        },
+        menuTrigger: {
+            border: 'none',
+            background: 'none',
+            padding: 0,
+            cursor: 'pointer',
+            borderRadius: tokens.borderRadiusMedium,
+            ':focus': {
+                outline: 'none'
+            }
+        },
+        userInfo: {
+            padding: '12px 16px',
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '4px'
+        },
+        userEmail: {
+            fontSize: tokens.fontSizeBase200,
+            color: tokens.colorNeutralForeground3
+        },
+        mobileUserButton: {
+            backgroundColor: 'transparent',
+            border: 'none',
+            '@media (min-width: 769px)': {
+                display: 'none'
+            }
+        },
+        desktopUserMenu: {
+            '@media (max-width: 768px)': {
+                display: 'none'
+            }
+        }
+    });
+    const styles = useStyles();
+
+    const navigate = useNavigate();
+
+    const handleMobileUserClick = () => {
+        navigate('/user-settings');
+    };
+
+    return (
+        <div className={styles.headerRight}>
+            <button
+                className={`${styles.userProfile} ${styles.mobileUserButton}`}
+                onClick={handleMobileUserClick}
+                aria-label="Go to user settings"
+            >
+                <Avatar
+                    name={props.currentUser.Name}
+                    size={32}
+                    color="colorful"
+                    image={{ src: props.currentUser.PhotoURL }}
+                />
+                <Text className={styles.userName}>{props.currentUser.Name}</Text>
+            </button>
+
+            <div className={styles.desktopUserMenu}>
+                <Menu>
+                    <MenuTrigger disableButtonEnhancement>
+                        <button className={styles.menuTrigger} aria-label="User menu">
+                            <div className={styles.userProfile}>
+                                <Avatar
+                                    name={props.currentUser.Name}
+                                    size={32}
+                                    color="colorful"
+                                    image={{ src: props.currentUser.PhotoURL }}
+                                />
+                                <Text className={styles.userName}>{props.currentUser.Name}</Text>
+                            </div>
+                        </button>
+                    </MenuTrigger>
+                    <MenuPopover>
+                        <MenuList>
+                            <div className={styles.userInfo}>
+                                <Text weight="semibold">{props.currentUser.Name}</Text>
+                                <Text className={styles.userEmail}>{props.currentUser.UserId}</Text>
+                            </div>
+                            <MenuDivider />
+                            <MenuItem
+                                icon={<DarkTheme20Regular />}
+                                onClick={() => {
+                                    const updatedUser = {
+                                        ...props.currentUser,
+                                        IsDarkTheme: !props.currentUser.IsDarkTheme
+                                    };
+                                    props.setCurrentUser(updatedUser);
+                                }}
+                            >
+                                Switch to {props.currentUser.IsDarkTheme === true ? 'Light Mode' : 'Dark Mode'}
+                            </MenuItem>
+                            <MenuDivider />
+                        </MenuList>
+                    </MenuPopover>
+                </Menu>
+            </div>
+        </div>
+    );
+}

package/template/hhmiexample.client/src/components/AppFrame/modules/ExampleConfig.tsx

@@ -0,0 +1,86 @@
+import { Cube20Regular, Home20Regular, Shield20Regular } from "@fluentui/react-icons";
+import type { IModuleConfig, IUserPermissions, INavItem } from "../types";
+import type { IExampleUser } from "../../../types/IExampleUser";
+
+export const ExampleNavItems = {
+    Home: "ExampleHome",
+    Admin: "ExampleAdmin",
+    AdminConfiguration: "ExampleAdminConfiguration",
+};
+
+export interface IExamplePermissions extends IUserPermissions {
+    isDeveloper: boolean;
+    isAppManager: boolean;
+    isPowerUser: boolean;
+    isSuperUser: boolean;
+    isDevOrAppManager: boolean;
+}
+
+const resolveExamplePermissions = (user: IExampleUser): IExamplePermissions => {
+    const isDeveloper = user.IsDeveloper;
+    const isAppManager = user.IsAppManager;
+    const isPowerUser = user.IsPowerUser;
+    const isSuperUser = user.IsSuperUser;
+    const isDevOrAppManager = isDeveloper || isAppManager;
+
+    return {
+        isDeveloper,
+        isAppManager,
+        isPowerUser,
+        isSuperUser,
+        isDevOrAppManager,
+    };
+};
+
+const canViewExampleAdmin = (permissions: IUserPermissions): boolean => {
+    const perms = permissions as IExamplePermissions;
+    return perms.isDevOrAppManager;
+};
+
+export const ExampleConfig: IModuleConfig = {
+    id: "Example",
+    label: "Example",
+    icon: Cube20Regular,
+    href: "/example",
+    navItems: ExampleNavItems,
+    resolvePermissions: resolveExamplePermissions,
+    canViewAdmin: canViewExampleAdmin,
+    getAdminNavItems: (activeModule: string, permissions: IUserPermissions) => {
+        const perms = permissions as IExamplePermissions;
+        const navItems: INavItem[] = [];
+        if (perms.isDevOrAppManager) {
+            const activeModuleLower = activeModule.toLowerCase();
+            navItems.push({
+                id: ExampleNavItems.AdminConfiguration,
+                label: "Configuration",
+                icon: Shield20Regular,
+                href: `/${activeModuleLower}/configuration`,
+            });
+        }
+        return navItems;
+    },
+    getRegularNavItems: (activeModule: string, _permissions: IUserPermissions) => {
+        const activeModuleLower = activeModule.toLowerCase();
+        const navItems: INavItem[] = [
+            {
+                id: ExampleNavItems.Home,
+                label: "Home",
+                icon: Home20Regular,
+                href: `/${activeModuleLower}`,
+            },
+        ];
+        return navItems;
+    },
+    getMobileAdminNavItem: (activeModule: string, canViewAdmin: boolean) => {
+        return canViewAdmin
+            ? [
+                {
+                    id: ExampleNavItems.Admin,
+                    label: "Configuration",
+                    icon: Shield20Regular,
+                    href: `/${activeModule.toLowerCase()}/configuration`,
+                },
+            ]
+            : [];
+    },
+};

package/template/hhmiexample.client/src/components/AppFrame/modules/index.ts

@@ -0,0 +1,8 @@
+import { ExampleConfig } from "./ExampleConfig";
+import type { IModuleRegistry } from "../types";
+
+export { ExampleConfig, ExampleNavItems } from "./ExampleConfig";
+
+export const moduleRegistry: IModuleRegistry = {
+    IExample: ExampleConfig,
+};

package/template/hhmiexample.client/src/components/AppFrame/types.ts

@@ -0,0 +1,48 @@
+import React from "react";
+import type { IExampleUser } from "../../types/IExampleUser";
+
+export interface INavItemBase {
+    id: string;
+}
+
+export interface INavLinkItem extends INavItemBase {
+    label: string;
+    icon: React.ElementType;
+    href: string;
+    isDivider?: false;
+}
+
+export interface INavDividerItem extends INavItemBase {
+    isDivider: true;
+}
+
+export type INavItem = INavLinkItem | INavDividerItem;
+
+export interface IModuleNavItems {
+    [key: string]: string;
+}
+
+export interface IUserPermissions {
+    [key: string]: boolean | undefined;
+}
+
+export type PermissionResolver = (user: IExampleUser) => IUserPermissions;
+
+export type CanViewAdminResolver = (permissions: IUserPermissions) => boolean;
+
+export interface IModuleConfig {
+    id: string;
+    label: string;
+    icon: React.ElementType;
+    href: string;
+    navItems: IModuleNavItems;
+    resolvePermissions: PermissionResolver;
+    canViewAdmin: CanViewAdminResolver;
+    getAdminNavItems: (activeModule: string, permissions: IUserPermissions) => INavItem[];
+    getRegularNavItems: (activeModule: string, permissions: IUserPermissions) => INavItem[];
+    getMobileAdminNavItem: (activeModule: string, canViewAdmin: boolean) => INavItem[];
+}
+
+export interface IModuleRegistry {
+    [moduleId: string]: IModuleConfig;
+}