This is a work in progress originally generated by AI. Many patterns are to be replaced with patterns from v9. e.g. focus management. This is not a sample of best practice. Just a learning playground.
^^^ don't miss the above note. The rest of this is AI generated.
A comprehensive demo application showcasing FluentUI v9 input controls with modern React patterns, TypeScript enums, and centralized message management.
The application uses a custom MessageManager component that provides:
- Centralized State Management: Single source of truth for all user feedback messages
- Context Provider: Wraps the entire application with message context
- Integrated Footer: Renders message display footer with auto-scroll functionality
- Type-Safe Messages: Uses TypeScript enums for consistent message types
MessageManager
├── Message Context Provider (state management)
├── Children (main application content)
└── Message Footer (display with color-coded message types)
- Modern React Patterns: Hooks, context, compound components
- TypeScript Enums: Type-safe constants replacing string literal unions
- Theme System: Choose from 5 FluentUI themes with localStorage persistence
- Comprehensive Logging: All user interactions logged with contextual feedback
- Auto-scrolling Messages: Latest messages automatically visible
- Color-coded Message Types: Visual distinction between Info, Success, Warning, Error
- Advanced Focus Management: Proper focus restoration and accessibility
- Four Control Categories:
- Basic Inputs: Text input, email, password, number, textarea, submit button, and dialog trigger
- Date & Time: Date picker, time picker, datetime-local, month, week
- Selection Controls: Combobox, dropdown, radio buttons, checkboxes, switch
- Advanced Controls: Slider, spin button, range inputs, progress bar, color picker, file input
Wraps your application to provide message management:
<MessageManager>
<YourApp />
</MessageManager>Access core message functionality:
const { addMessage, clearMessages, messages } = useMessages();
addMessage('Hello', MessageType.Info);Convenience methods for common scenarios:
const {
logInfo, logSuccess, logWarning, logError,
logInteraction, logFormSubmission
} = useMessageLogger();
// Simple logging
logSuccess('Form submitted successfully!');
logError('Validation failed');
// Interaction logging
logInteraction('Text Input', 'focused');
logInteraction('Slider', 'changed', '75');
// Form submission logging
logFormSubmission('Contact Form', true, 'Email sent');Type-safe constants for consistent values:
import { MessageType, ButtonAppearance, ComponentSize } from './types/enums';
// Message types
MessageType.Info | Success | Warning | Error
// Button appearances
ButtonAppearance.Primary | Secondary | Outline | Subtle | Transparent
// Component sizes
ComponentSize.Small | Medium | Large- Node.js (v14 or higher)
- npm
- Clone or download this project
- Navigate to the project directory
- Install dependencies:
npm install
Start the development server:
npm startThe application will open in your browser at http://localhost:3000.
Build the project for production:
npm run buildFor detailed build instructions and troubleshooting, see BUILD.md.
src/
├── index.tsx # Application entry point
├── App.tsx # Main application component with tab navigation
└── components/
├── BasicInputsTab.tsx # Basic input controls
├── DateTimeTab.tsx # Date and time controls
├── SelectionTab.tsx # Selection and choice controls
└── AdvancedTab.tsx # Advanced input controls
- React 18 - UI library
- TypeScript - Type-safe JavaScript
- FluentUI v9 - Microsoft's design system
- Webpack - Module bundler
- Layout & Navigation: Tab, TabList, Field, Label
- Form Controls: Input, Textarea, Combobox, Dropdown, Radio, RadioGroup, Checkbox, Switch, Button, Slider, SpinButton, ProgressBar
- Containers: Card, CardHeader, Dialog, DialogSurface, DialogTitle, DialogContent, DialogActions, DialogBody
- Theming: FluentProvider with multiple theme support (webLightTheme, webDarkTheme, teamsLightTheme, teamsDarkTheme, teamsHighContrastTheme)
- Styling: makeStyles for CSS-in-JS styling
Each tab includes an interactive message area that displays:
- Focus and blur events
- Value changes
- Selection events
- User actions
- Dialog open/close events
- Focus management notifications
- Tab Focus Restoration: When switching between tabs, focus returns to the last focused element in that tab
- Dialog Focus Control: When opening the contact dialog, focus automatically moves to the first input field
- Focus Restoration: When closing the dialog, focus returns to the element that triggered it
The Basic Inputs tab includes a "Open Contact Dialog" button that demonstrates:
- Modal dialog with form inputs
- Automatic focus management
- Form validation
- Proper dialog dismissal
- Focus restoration to the triggering element
This helps demonstrate the responsive nature of the FluentUI v9 components and provides immediate feedback for testing and learning purposes.
The application supports dynamic theme switching with 5 built-in FluentUI v9 themes:
- Web Light: Default light theme optimized for web applications
- Web Dark: Dark theme variant for web applications
- Teams Light: Microsoft Teams light theme styling
- Teams Dark: Microsoft Teams dark theme styling
- High Contrast: Accessible high-contrast theme for better visibility
- Real-time switching: Themes change immediately when selected
- Persistent selection: Your theme choice is saved in browser localStorage
- Responsive design: Theme selector adapts to mobile layouts
- Accessibility: High contrast theme provides enhanced visibility
- Consistent styling: All components automatically adapt to the selected theme
The theme selector is positioned to the right of the tab navigation on desktop and below the tabs on mobile devices.