create-hhmi-example 1.0.0

package/template/hhmiexample.client/src/components/Global/HHMIControls.tsx

@@ -0,0 +1,567 @@
+/* eslint-disable react-refresh/only-export-components */
+import React, { type ChangeEvent, type ReactElement, type ReactNode } from 'react';
+import {
+	Button,
+	Dialog,
+	DialogBody,
+	DialogContent,
+	type DialogOpenChangeEvent,
+	DialogTitle,
+	MessageBar,
+	DataGrid,
+	DataGridBody,
+	DataGridRow,
+	DataGridHeader,
+	DataGridHeaderCell,
+	DataGridCell,
+	Popover,
+	PopoverTrigger,
+	PopoverSurface,
+	type PopoverProps,
+	OverlayDrawer,
+	DrawerHeader,
+	DrawerHeaderTitle,
+	DrawerBody,
+	DrawerFooter,
+	Label,
+	Checkbox,
+	type CheckboxOnChangeData,
+	DialogActions,
+	DialogSurface,
+	Field,
+	makeStyles,
+	Input,
+	type GriffelStyle,
+	Textarea,
+	MessageBarGroup,
+	type ComboboxProps,
+	Combobox,
+	Persona,
+	Accordion,
+	AccordionItem,
+	AccordionHeader,
+	AccordionPanel,
+	tokens,
+	shorthands,
+	type FieldProps,
+	type TextareaProps,
+	type InputProps,
+	type DataGridProps,
+	type ButtonProps,
+	type LabelProps,
+	type MessageBarGroupProps,
+	type MessageBarProps,
+	Dropdown,
+	Option,
+	Spinner,
+	Switch,
+	type SwitchOnChangeData,
+	type SelectionEvents,
+	type OptionOnSelectData,
+	type OpenPopoverEvents,
+	type OnOpenChangeData,
+	useId
+} from '@fluentui/react-components';
+import { Dismiss24Regular } from '@fluentui/react-icons'
+import { searchUserByEmailWDHCM, type IUserQueryResult } from '../../services/AppService';
+import { DataGridBody as DataGridBodyVirtualized } from '@fluentui-contrib/react-data-grid-react-window';
+
+export interface IHHMIHomeIcon {
+	key: string;
+	text: string;
+	icon: ReactNode;
+	onClick: () => void;
+}
+
+export const MessageBarTypeOptions = {
+	info: 'info',
+	success: 'success',
+	warning: 'warning',
+	error: 'error'
+}
+
+export const HHMIPeoplePickerLocations = {
+	Janelia: 'janelia.hhmi.org'
+}
+
+export function _removeDuplicates(personas: IUserQueryResult[], possibleDupes: IUserQueryResult[]) {
+	return personas.filter(persona => !_listContainsPersona(persona, possibleDupes));
+}
+
+function _listContainsPersona(persona: IUserQueryResult, personas: IUserQueryResult[]) {
+	if (!personas || !personas.length || personas.length === 0) {
+		return false;
+	}
+	return personas.filter(item => {
+		if (item.id && persona.id) {
+			return item.id.toLowerCase() === persona.id.toLowerCase();
+		}
+		return item.displayName === persona.displayName;
+	}).length > 0;
+}
+
+interface IHHMIPeoplePickerProps extends ComboboxProps {
+	selectedUsers: IUserQueryResult[];
+	onSelectUser: (selectedOptions: IUserQueryResult[]) => void;
+	location?: string | undefined;
+	ariaLabel?: string | undefined;
+	ariaLabelledBy?: string | undefined;
+	containerClassName?: string | undefined;
+	clearValueAfterSelect?: boolean;
+	customValue?: string;
+	customOnChange?: (value: string) => void;
+}
+
+export function HHMIPeoplePicker(props: IHHMIPeoplePickerProps) {
+	const [matchingOptions, setMatchingOptions] = React.useState<IUserQueryResult[]>([]);
+	const [peoplePickerValue, setPeoplePickerValue] = React.useState<string>('');
+
+	const selectedOptions: string[] =
+		(props.selectedUsers && props.selectedUsers.length > 0)
+			? [...props.selectedUsers.map((option: IUserQueryResult) => { return option.id; })]
+			: [];
+
+	const onSearchPeoplePicker: ComboboxProps["onChange"] = (event) => {
+		setPeoplePickerValue(event.target.value);
+		if (props.customOnChange) {
+			props.customOnChange(event.target.value);
+		}
+		const value = event.target.value.trim();
+		if (value.length > 2) {
+			let matches: IUserQueryResult[] = [];
+			searchUserByEmailWDHCM(value).then((searchResults: IUserQueryResult[]) => {
+				if (searchResults) {
+					matches = _removeDuplicates(searchResults, props.selectedUsers ? props.selectedUsers : []);
+					if (props.location !== null && props.location !== undefined) {
+						const location = props.location !== undefined ? props.location : '';
+						matches = matches.filter((user: IUserQueryResult) => {
+							if (user.mail && user.mail.indexOf(location) > -1) return true;
+							if (user.id && user.id.indexOf(location) > -1) return true;
+							if (user.officeLocation && user.officeLocation.indexOf(location) > -1) return true;
+							return false;
+						});
+					}
+				}
+				setMatchingOptions(matches);
+			});
+		} else {
+			setMatchingOptions([]);
+		}
+	};
+
+	return (
+		<div className={props.containerClassName}>
+			<Combobox
+				{...props}
+				aria-label={props.ariaLabel}
+				aria-labelledby={props.ariaLabelledBy}
+				freeform={true}
+				value={props.customValue ?? peoplePickerValue}
+				onChange={onSearchPeoplePicker}
+				selectedOptions={selectedOptions}
+				onOptionSelect={(_e, selectedData) => {
+					if (selectedData && selectedData.optionValue && selectedData.optionText) {
+						const selectedOptions: IUserQueryResult[] = matchingOptions ? matchingOptions.filter((option: IUserQueryResult) => { return option.id === selectedData.optionValue }) : [];
+						props.onSelectUser(selectedOptions);
+						if (props.clearValueAfterSelect) {
+							setPeoplePickerValue('');
+						} else {
+							setPeoplePickerValue(selectedData.optionText);
+						}
+					}
+				}}
+			>
+				{matchingOptions.length > 0 && matchingOptions.map((option: IUserQueryResult) => (
+					<Option key={option.id} value={option.id} text={option.displayName}>
+						<Persona
+							size={'small'}
+							avatar={{ color: "colorful", image: { src: option.photoURL } }}
+							name={option.displayName}
+							secondaryText={null}
+							textAlignment={'center'}
+						/>
+					</Option>
+				))}
+				{matchingOptions.length === 0 && <Option key="no-results" text="">No results found</Option>}
+			</Combobox>
+		</div>
+	)
+}
+
+export interface INavLinkStyles {
+	accordionHeader: GriffelStyle;
+	accordionPanel: GriffelStyle;
+	accordionButton: GriffelStyle;
+	iconDiv: GriffelStyle;
+	accordionButtonSelected: GriffelStyle;
+	accordionButtonText: GriffelStyle;
+}
+
+export interface INavLinkKeyUrl { key: string; url: string; }
+
+export interface INavLink {
+	key: string;
+	name: string;
+	url: string;
+	icon: ReactElement;
+	onClick: () => void;
+}
+
+export interface INavLinkGroup {
+	name: string;
+	collapseByDefault: boolean;
+	expandAriaLabel: string;
+	collapseAriaLabel: string;
+	links: INavLink[];
+};
+
+export interface IHHMILeftNavProps {
+	linkGroups: INavLinkGroup[];
+	onLinkClick: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>, link: INavLink) => void;
+	styles: INavLinkStyles;
+	selectedLink: string;
+	defaultOpenSection?: string;
+}
+
+export function HHMILeftNav(props: IHHMILeftNavProps) {
+	const useStyles = makeStyles({ ...props.styles });
+	const styles = useStyles();
+	return (
+		<Accordion multiple={true} collapsible={true} defaultOpenItems={props.defaultOpenSection}>
+			{props.linkGroups.map((group: INavLinkGroup, i: number) => (
+				<AccordionItem key={i} value={i.toString()} style={{ marginTop: tokens.spacingVerticalSNudge }}>
+					<AccordionHeader className={styles.accordionHeader}>{group.name as string}</AccordionHeader>
+					{group.links.map((link: INavLink) => (
+						<AccordionPanel key={link.key} className={styles.accordionPanel}>
+							<button className={`${styles.accordionButton} ` + (props.selectedLink === link.key ? styles.accordionButtonSelected : '')} onClick={(e) => { props.onLinkClick(e, link); }}>
+								<div className={styles.iconDiv}>{link.icon}</div>
+								<div className={styles.accordionButtonText}>{link.name}</div>
+							</button>
+						</AccordionPanel>
+					))}
+				</AccordionItem>
+			))}
+		</Accordion>
+	)
+}
+
+type IHHMIButtonProps = ButtonProps & { ariaLabel?: string | undefined; text?: string | undefined; }
+
+export function HHMIButtonDefault(props: IHHMIButtonProps) {
+	return <Button {...props}>{props.text}</Button>;
+}
+
+export function HHMIButtonPrimary(props: IHHMIButtonProps) {
+	return <Button {...props} appearance={'primary'}>{props.text}</Button>;
+}
+
+export interface IHHMICheckBoxProps {
+	ariaLabel?: string;
+	checked?: boolean;
+	className?: string;
+	disabled?: boolean;
+	label?: string;
+	onChange?: ((ev: ChangeEvent<HTMLInputElement>, data: CheckboxOnChangeData) => void);
+	required?: boolean;
+	style?: React.CSSProperties;
+	size?: "medium" | "large";
+}
+
+export function HHMICheckBox(props: IHHMICheckBoxProps) {
+	return <Checkbox {...props} />;
+}
+
+export interface IHHMIDropDownProps {
+	onOptionSelect: (event: SelectionEvents, data: OptionOnSelectData) => void;
+	multiselect: boolean;
+	selectedOptions: string[];
+	options: React.ReactElement[];
+	value?: string;
+	placeholder?: string;
+	style?: React.CSSProperties;
+	disabled?: boolean;
+	className?: string | undefined;
+	display?: string;
+	id?: string;
+}
+
+export function HHMIDropDown(props: IHHMIDropDownProps) {
+	return (
+		<div style={{ display: props.display ? props.display : 'block' }}>
+			<Dropdown {...props} disabled={props.disabled ? true : false} placeholder={props.placeholder ? props.placeholder : ''} style={props.style} onOptionSelect={props.onOptionSelect} multiselect={props.multiselect} selectedOptions={props.selectedOptions} id={props.id ? props.id : undefined}>{props.options}</Dropdown>
+		</div>
+	)
+}
+
+interface IHHMILabelProps extends LabelProps { children: React.ReactNode | string; }
+
+export function HHMILabel(props: IHHMILabelProps) {
+	return <Label {...props}>{props.children}</Label>;
+}
+
+interface IHHMIPopoverProps extends PopoverProps {
+	content: React.ReactNode;
+	children: React.ReactElement;
+	setIsOpen: (isOpen: boolean) => void;
+	style?: React.CSSProperties;
+}
+
+export function HHMIPopover(props: IHHMIPopoverProps) {
+	return (
+		<Popover {...props} onOpenChange={(_: OpenPopoverEvents, data: OnOpenChangeData) => { props.setIsOpen(data.open); }}>
+			<PopoverTrigger disableButtonEnhancement>{props.children}</PopoverTrigger>
+			<PopoverSurface>{props.content}</PopoverSurface>
+		</Popover>
+	)
+}
+
+interface IHHMIMessageBarProps {
+	isVisible: boolean;
+	group?: MessageBarGroupProps;
+	messageBar: MessageBarProps;
+	children: React.ReactNode | string;
+	style?: React.CSSProperties;
+}
+
+export function HHMIMessageBar(props: IHHMIMessageBarProps) {
+	return (
+		<MessageBarGroup animate={props.group?.animate ? props.group?.animate : 'both'}>
+			{!props.isVisible ? <></> : <MessageBar {...props.messageBar}>{props.children}</MessageBar>}
+		</MessageBarGroup>
+	);
+}
+
+export interface IHHMITextFieldProps {
+	fieldProps?: Partial<FieldProps>;
+	textAreaProps?: Partial<TextareaProps>;
+	inputProps?: Partial<InputProps>;
+	ariaLabel?: string;
+	multiline?: boolean;
+	styles?: GriffelStyle;
+	contentAfter?: React.ReactNode;
+	className?: string;
+}
+
+export function HHMITextField(props: IHHMITextFieldProps) {
+	const useStyles = makeStyles({ textField: { ...props.styles } });
+	const HHMITextFieldStyles = useStyles().textField;
+	const contentAfter = <>{props.contentAfter ? props.contentAfter : ''}</>;
+	return (
+		<Field {...props.fieldProps} className={props.className + ' ' + HHMITextFieldStyles} aria-label={props.ariaLabel}>
+			{props.multiline && <Textarea {...props.textAreaProps} />}
+			{!props.multiline && <Input {...props.inputProps} contentAfter={contentAfter} />}
+		</Field>
+	);
+}
+
+interface IHHMIToggleProps {
+	label?: string;
+	labelPosition?: "before" | "after" | "above";
+	checked?: boolean;
+	className?: string;
+	disabled?: boolean;
+	id?: string;
+	onChange?: ((event: ChangeEvent<HTMLInputElement>, data: SwitchOnChangeData) => void);
+	onText?: string;
+	offText?: string;
+}
+
+export function HHMIToggle(props: IHHMIToggleProps) {
+	return <Switch {...props} />;
+}
+
+export const defaultDateAnchor = new Date('January 1, 2000 00:00:00');
+
+interface IHHMIDialogProps {
+	dialogTitle?: string | JSX.Element;
+	dialogContent: React.ReactNode | string;
+	dialogActions: React.ReactNode | string;
+	hidden?: boolean;
+	onDismiss?: ((ev?: DialogOpenChangeEvent | undefined) => void);
+	type?: 'alert' | 'modal' | 'non-modal';
+}
+
+export function HHMIDialog(props: IHHMIDialogProps) {
+	return (
+		<Dialog modalType={props.type ? props.type : 'alert'} open={props.hidden ? !props.hidden : true} defaultOpen={false} onOpenChange={props.onDismiss ? props.onDismiss : () => { }}>
+			<DialogSurface>
+				<DialogBody>
+					<DialogTitle>{props.dialogTitle}</DialogTitle>
+					<DialogContent>{props.dialogContent}</DialogContent>
+					<DialogActions>{props.dialogActions}</DialogActions>
+				</DialogBody>
+			</DialogSurface>
+		</Dialog>
+	)
+}
+
+interface IHHMIDrawerProps {
+	title: string;
+	content: React.ReactNode;
+	footer: React.ReactNode;
+	open: boolean;
+	onOpenChange: () => void;
+	closeDrawer: () => void;
+	position: 'start' | 'end';
+	size?: "small" | "medium" | "large" | "full";
+}
+
+export function HHMIDrawer(props: IHHMIDrawerProps) {
+	return (
+		<div>
+			<OverlayDrawer open={props.open} onOpenChange={props.onOpenChange} position={props.position} size={props.size ? props.size : 'small'}>
+				<DrawerHeader>
+					<DrawerHeaderTitle action={<Button appearance="subtle" aria-label="Close" icon={<Dismiss24Regular />} onClick={props.closeDrawer} />}>{props.title}</DrawerHeaderTitle>
+				</DrawerHeader>
+				<DrawerBody>{props.content}</DrawerBody>
+				<DrawerFooter>{props.footer}</DrawerFooter>
+			</OverlayDrawer>
+		</div>
+	);
+}
+
+type IHHMIDataGridProps = DataGridProps & { dataLoaded: boolean; }
+
+export function HHMIDataGrid(props: IHHMIDataGridProps) {
+	const dataGrid = makeStyles({ dataGridRowSelected: { color: tokens.colorBrandBackgroundInverted } });
+	const dataGridRowStyles = dataGrid().dataGridRowSelected;
+	const selectedItemId: number | undefined = props.selectedItems ? Array.from(props.selectedItems)[0] as number : undefined;
+	return (
+		<div style={{ maxWidth: '99%' }}>
+			<DataGrid {...props}>
+				<DataGridHeader>
+					<DataGridRow selectionCell={{ "aria-label": "Select all rows" }}>
+						{({ renderHeaderCell }) => <DataGridHeaderCell>{renderHeaderCell()}</DataGridHeaderCell>}
+					</DataGridRow>
+				</DataGridHeader>
+				<div style={{ maxHeight: '66vh', overflowY: 'auto', overflowX: 'hidden' }}>
+					{!props.dataLoaded ? <Spinner style={{ padding: '20px' }} /> : (
+						<DataGridBody>
+							{({ item, rowId }) => (
+								<DataGridRow className={selectedItemId === rowId ? dataGridRowStyles : ''} key={rowId} selectionCell={{ "aria-label": "Select row" }}>
+									{({ renderCell }) => <DataGridCell>{renderCell(item)}</DataGridCell>}
+								</DataGridRow>
+							)}
+						</DataGridBody>
+					)}
+				</div>
+			</DataGrid>
+		</div>
+	);
+}
+
+type IHHMIDataGridVirtualizedProps = DataGridProps & {
+	dataLoaded: boolean;
+	height?: string;
+	itemSize?: number;
+	customGridParentWidth?: string;
+}
+
+export function HHMIDataGridVirtualized(props: IHHMIDataGridVirtualizedProps) {
+	const dataGrid = makeStyles({ dataGridRowSelected: { color: tokens.colorBrandBackgroundInverted } });
+	const dataGridRowStyles = dataGrid().dataGridRowSelected;
+	const selectedItemId: number | undefined = props.selectedItems ? Array.from(props.selectedItems)[0] as number : undefined;
+	const parseHeight = (heightStr?: string): number => {
+		if (!heightStr) return 500;
+		if (heightStr.endsWith('px')) return parseInt(heightStr, 10);
+		if (heightStr.endsWith('vh')) return Math.floor((window.innerHeight * parseFloat(heightStr)) / 100);
+		return 500;
+	};
+	const containerHeight = parseHeight(props.height);
+	const rowHeight = props.itemSize || 44;
+	return (
+		<div style={{ width: 'fit-content' }}>
+			<DataGrid {...props} style={{ overflow: 'visible', width: props.customGridParentWidth }}>
+				<DataGridHeader>
+					<DataGridRow {...(props.selectionMode !== undefined ? { selectionCell: { "aria-label": "Select all rows" } } : {})}>
+						{({ renderHeaderCell }) => <DataGridHeaderCell>{renderHeaderCell()}</DataGridHeaderCell>}
+					</DataGridRow>
+				</DataGridHeader>
+				{!props.dataLoaded ? (
+					<div style={{ height: containerHeight, display: 'flex', alignItems: 'center', justifyContent: 'center' }}><Spinner /></div>
+				) : (
+					<DataGridBodyVirtualized height={containerHeight} itemSize={rowHeight} width="100%">
+						{(row, style, index) => {
+							const rowId = index;
+							const isSelected = selectedItemId === rowId;
+							const item = (row as { item: unknown }).item;
+							return (
+								<div style={style}>
+									<DataGridRow className={isSelected ? dataGridRowStyles : ''} key={rowId} {...(props.selectionMode !== undefined ? { selectionCell: { "aria-label": "Select row" } } : {})}>
+										{({ renderCell }) => <DataGridCell>{renderCell(item)}</DataGridCell>}
+									</DataGridRow>
+								</div>
+							);
+						}}
+					</DataGridBodyVirtualized>
+				)}
+			</DataGrid>
+		</div>
+	);
+}
+
+interface IHHMIHomeIconProps { icons: IHHMIHomeIcon[]; }
+
+export function HHMIHomeIcons(props: IHHMIHomeIconProps) {
+	const iconStyles = makeStyles({
+		icon: {
+			width: '175px',
+			height: '175px',
+			backgroundColor: tokens.colorBrandBackground,
+			display: 'flex',
+			flexDirection: 'column',
+			alignItems: 'center',
+			justifyContent: 'center',
+			...shorthands.borderRadius('20px'),
+			cursor: 'pointer',
+			...shorthands.margin('0', '20px'),
+			'&:hover': { backgroundColor: tokens.colorBrandBackgroundHover }
+		},
+		text: {
+			color: "#fff",
+			fontSize: tokens.fontSizeBase500,
+			textAlign: 'center',
+			lineHeight: '1.2',
+			...shorthands.margin('6px', '0', '0', '0'),
+			...shorthands.padding('0', '5px')
+		}
+	});
+	const styles = iconStyles();
+	return (
+		<div style={{ display: 'flex', justifyContent: 'center', marginTop: '50px' }}>
+			{props.icons.map((icon: IHHMIHomeIcon) => (
+				<div key={icon.key} className={styles.icon} onClick={icon.onClick}>
+					<div style={{ color: "#fff", fontSize: tokens.fontSizeHero1000 }}>{icon.icon}</div>
+					<div className={styles.text}>{icon.text}</div>
+				</div>
+			))}
+		</div>
+	);
+}
+
+export function HHMITypeAhead(props: {
+	options: { text: string; value: string; }[];
+	allowMultiple: boolean;
+	initialSelectedValue: string;
+	onOptionSelect: ((event: SelectionEvents, data: OptionOnSelectData) => void);
+	placeholder?: string;
+}) {
+	const comboId = useId();
+	const [matchingOptions, setMatchingOptions] = React.useState([...props.options]);
+	const [customSearch, setCustomSearch] = React.useState<string>(props.initialSelectedValue);
+	const onChange: ComboboxProps["onChange"] = (event) => {
+		const value = event.target.value.trim();
+		setMatchingOptions(value.trim().length === 0 ? [...props.options] : props.options.filter((o) => o.text.toLowerCase().includes(value.toLowerCase())));
+		setCustomSearch(value);
+	};
+	const onOptionSelect: ComboboxProps["onOptionSelect"] = (_event, data) => {
+		if (data && data.optionText) setCustomSearch(data.optionText);
+		props.onOptionSelect(_event, data);
+	};
+	return (
+		<Combobox aria-labelledby={comboId} freeform placeholder={props.placeholder ? props.placeholder : 'Start typing to search ...'} onChange={onChange} onOptionSelect={onOptionSelect} value={customSearch}>
+			{customSearch ? <Option key="freeform" text={customSearch} disabled>Searching for "{customSearch}"</Option> : null}
+			{matchingOptions.map((option) => <Option key={option.value} value={option.value} text={option.text}>{option.text}</Option>)}
+		</Combobox>
+	);
+}

package/template/hhmiexample.client/src/components/Global/Quill.tsx

@@ -0,0 +1,60 @@
+import ReactQuill from 'react-quill';
+import 'react-quill/dist/quill.snow.css';
+import StringMap from 'quill';
+import { useEffect, useRef, useCallback } from 'react';
+import { tokens } from '@fluentui/react-components';
+
+interface IReactQuillProps {
+  modules?: StringMap;
+  onChange: (content: string) => void;
+  value: string;
+  isDarkTheme: boolean;
+}
+
+const quillModules = {
+  toolbar: [
+    [{ 'header': [1, 2, false] }],
+    ['bold', 'italic', 'underline', 'strike', 'blockquote'],
+    [{ 'list': 'ordered' }, { 'list': 'bullet' }, { 'indent': '-1' }, { 'indent': '+1' }],
+    ['link', 'image'],
+    ['clean'],
+    [{ align: '' }, { align: 'center' }, { align: 'right' }, { align: 'justify' }],
+    [{ 'color': [] }, { 'background': [] }]
+  ],
+};
+
+const Quill = (props: IReactQuillProps): JSX.Element => {
+  const quillRef = useRef<ReactQuill>(null);
+  const styleId = 'quill-custom-styles';
+
+  const applyCustomStyles = useCallback(() => {
+    const customStyles = ` 
+      .ql-toolbar {
+        background-color: ${props.isDarkTheme ? tokens.colorNeutralBackgroundInverted : 'inherit'} !important;
+      }
+      .ql-container {
+        height: auto !important;
+      }`
+    ;
+
+    const styleElement = document.createElement('style');
+    styleElement.id = styleId;
+    styleElement.textContent = customStyles;
+    document.head.appendChild(styleElement);
+  }, [props.isDarkTheme, styleId]);
+
+  useEffect(() => {
+    applyCustomStyles();
+  }, [applyCustomStyles]);
+
+  return (
+    <ReactQuill
+      ref={quillRef}
+      value={props.value}
+      onChange={props.onChange}
+      modules={props.modules ? props.modules : quillModules}
+    />
+  );
+};
+
+export default Quill;

package/template/hhmiexample.client/src/index.css

@@ -0,0 +1,11 @@
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
+  line-height: 1.6;
+  overflow: hidden;
+}

package/template/hhmiexample.client/src/main.tsx

@@ -0,0 +1,17 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import App from './App.tsx'
+import { BrowserRouter } from 'react-router';
+import './index.css'
+
+const rootElement = document.getElementById('root');
+if (rootElement !== null) {
+  const root = createRoot(rootElement);
+  root.render(
+    <StrictMode>
+      <BrowserRouter>
+        <App />
+      </BrowserRouter>
+    </StrictMode>
+  );
+}

package/template/hhmiexample.client/src/pages/Example/ExampleConfigurationPage.tsx

@@ -0,0 +1,24 @@
+import { makeStyles, Text } from "@fluentui/react-components";
+import type { IExampleUser } from "../../types/IExampleUser";
+
+const useStyles = makeStyles({
+  container: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "16px",
+    padding: "16px",
+  },
+  title: {
+    fontWeight: "600",
+  },
+});
+
+export default function ExampleConfigurationPage(_props: { currentUser: IExampleUser }) {
+  const styles = useStyles();
+  return (
+    <div className={styles.container}>
+      <Text className={styles.title} as="h1">Configuration</Text>
+      <Text>Administration and configuration placeholder. Add your own settings or user management here.</Text>
+    </div>
+  );
+}