Skip to main content

UI Component Library

Building secure peer-to-peer messaging apps is tough, and it's even tougher to get people to switch from what they already use. I've noticed that a great user interface and an intuitive design often matter more to people than terms like cryptography or end-to-end encryption.

That's why I've built a comprehensive UI library following atomic design principles! It provides everything needed to create modern, messaging-focused applications with React, TypeScript, and Material-UI.

Overview​

The UI component library is a collection of 45+ reusable React components built specifically for messaging applications. It follows atomic design principles, organizing components into atoms, molecules, organisms, and templates for maximum reusability and composability.

Key Features​

  • 🧱 Atomic Design Architecture - Components organized from simple atoms to complete page templates
  • ⚛️ React 18 & TypeScript - Modern React patterns with full type safety
  • 🎨 Material-UI 5 Integration - Built on top of MUI with custom enhancements
  • 🌓 Theme Support - Complete dark/light mode with customizable theming
  • 📱 Responsive Design - Mobile-first approach with full desktop support
  • ♿ Accessibility - WCAG compliant components with proper ARIA attributes
  • 📚 Storybook Integration - Interactive component documentation and testing
  • 🔌 Module Federation - Seamless integration with other microfrontends

Tech Stack​

{
  "framework": "React 18",
  "language": "TypeScript",
  "ui-library": "Material-UI 5",
  "styling": "Emotion (CSS-in-JS)",
  "documentation": "Storybook 8",
  "testing": "Jest + React Testing Library",
  "build": "Webpack 5 with Module Federation"
}

Component Architecture​

The library follows the atomic design methodology, organizing components into five distinct layers:

🔹 Atoms (Basic Building Blocks)​

The smallest, indivisible UI elements that serve as the foundation:

Core Components:

  • Button, IconButton - Action triggers with variants
  • Input - Text fields with validation and password toggle
  • Card, CardHeader, CardContent, CardActions - Container components
  • Dialog, DialogTitle, DialogContent, DialogActions - Modal dialogs
  • Avatar, AvatarGroup, AvatarWithStatus - User profile images with status indicators
  • Text, Heading, Body, Label, Caption - Typography components
  • Alert, SuccessAlert, ErrorAlert, WarningAlert - Notification components
  • Accordion, AccordionSummary, AccordionDetails - Expandable sections
  • Dropdown, DropdownMenuItem - Menu components
  • QRCode - QR code generator for connection sharing

Specialized Atoms:

  • EditorCanvas - Fabric.js-based drawing canvas
  • ToolbarButton - Icon buttons for toolbars
  • SwipeableContainer - Touch-enabled swipe actions
  • ParticleDissolveContainer - Animated particle effects
  • OnlineIndicator - Status dots for presence
  • SpeedDial - Floating action button menu

🔸 Molecules (Component Combinations)​

Functional groups combining atoms into useful UI elements:

Form & Input:

  • MessageInput - Rich message input with attachments, voice, and emoji
  • AuthForm - Complete authentication form with validation
  • FileUpload - Drag-and-drop file upload with previews
  • CommentInput - Comment input with mentions support

Display & Navigation:

  • AppBar - Application header with navigation
  • BottomNavigationBar - Mobile bottom navigation
  • ConversationItem - Chat conversation preview
  • ContactList, ContactsList - Contact directory displays
  • Message - Individual message bubble with reactions

Media & Location:

  • LocationPicker - Interactive map location selector
  • MapPreview - Static map display
  • ImageCarouselPreview - Image slideshow with thumbnails
  • ImageEditorPreview - Image preview with editing tools
  • ImageEditorToolbar - Drawing and editing controls

Interactive:

  • ConnectByQRCode - QR code scanning for P2P connections
  • AvatarSelector - Avatar selection interface
  • CryptoDemo - Encryption/decryption demonstration
  • OperationStatus - Loading and status indicators
  • TermsAgreement - Terms and conditions acceptance
  • CommentsDialog - Comment thread dialog
  • CommentSection - Complete comment system

🔷 Organisms (Complex Components)​

Feature-complete components combining molecules and atoms:

Chat & Messaging:

  • Chat - Complete chat interface with messages and input
  • MessageThread - Threaded conversation view
  • ChatList - List of all chat conversations
  • ConversationList, ConversationListSidebar - Conversation navigation

Contacts & Profile:

  • Contacts - Contact management interface
  • ContactManager - Full contact CRUD operations
  • ContactDetails - Detailed contact information view
  • ContactsDrawer - Side drawer with contacts
  • Profile - User profile display
  • ProfileEditor - Profile editing interface
  • GroupDetails - Group chat information

Media & Content:

  • ImageEditor - Full-featured image editor with drawing tools
  • FileExplorer - File browsing and management
  • SocialFeedList - Social media-style feed
  • CreatePostDrawer - Post creation drawer

Auth & Navigation:

  • Login - Authentication interface
  • PageContainer - Standard page layout wrapper
  • PageRouter - Client-side routing container

🔶 Templates (Complete Page Layouts)​

Production-ready page templates combining all layers:

  • AuthPage - Complete authentication page
  • ChatPage - Full chat application page with conversations
  • ConversationListPage - Chat list view
  • ContactDetailsPage - Contact information page
  • ProfilePage - User profile page
  • SocialFeedPage - Social media feed page
  • CallsListPage - Video/audio call history
  • CallPage - Active call interface
  • FilesPage - File management page
  • GroupDetailsPage - Group chat settings
  • MediaViewerPage - Full-screen media viewer
  • MainAppPage - Main application shell with navigation

Design System​

Typography System​

The library provides semantic typography components:

import { Heading, Body, Label, Caption } from 'ui';

<Heading level={1}>Main Title</Heading>
<Heading level={2}>Section Title</Heading>
<Body size="lg">Large body text</Body>
<Body>Normal body text</Body>
<Label>Form labels and names</Label>
<Caption>Supplementary information</Caption>

Theme & Styling​

Built-in Theme Support:

import { ThemeProvider, useColorMode } from 'ui';

function App() {
  return (
    <ThemeProvider>
      <YourComponents />
    </ThemeProvider>
  );
}

// In any component
function MyComponent() {
  const { mode, toggleColorMode } = useColorMode();

  return (
    <button onClick={toggleColorMode}>
      Switch to {mode === 'light' ? 'dark' : 'light'} mode
    </button>
  );
}

Custom Theme Colors:

  • Primary: Blue tones for main actions
  • Secondary: Purple tones for secondary actions
  • Success: Green for confirmations
  • Warning: Orange for cautions
  • Error: Red for errors
  • Info: Cyan for informational content

Component Enhancements​

The atomic components include enhancements over standard Material-UI:

Enhanced Dialog:

<Dialog open={open} onClose={handleClose}>
  <DialogTitle showCloseButton onClose={handleClose}>
    Title with auto close button
  </DialogTitle>
  <DialogContent>Content here</DialogContent>
  <DialogActions>Action buttons</DialogActions>
</Dialog>

Smart Avatar with Status:

<Avatar
  src={user.avatar}
  status="online"  // 'online' | 'offline' | 'away' | 'busy'
  showStatus
  size="md"
/>

Auto-Dismissible Alerts:

<SuccessAlert
  open={showSuccess}
  dismissible
  autoHideDuration={5000}
  onDismiss={() => setShowSuccess(false)}
>
  Operation completed successfully!
</SuccessAlert>

Module Federation & Microfrontends​

The UI library is designed to work seamlessly with other microfrontends through Webpack Module Federation:

// Remote modules integrated
remotes: {
  "dim": "dim@[url]/remoteEntry.js",           // Functional web components
  "cryptography": "cryptography@[url]/remoteEntry.js"  // Encryption utilities
}

This enables:

  • Runtime integration with other projects
  • Independent deployment of UI components
  • Shared dependencies to reduce bundle size
  • Version flexibility across applications

Using Remote Components​

// Import components from federated modules
import { useFS } from 'dim/hooks';  // File system hook from dim
import { encrypt } from 'cryptography/utils';  // Encryption from cryptography

function MyComponent() {
  const fs = useFS({ encrypt: true });

  const saveSecure = async (data) => {
    const encrypted = await encrypt(data);
    await fs.writeFile('secure.txt', encrypted);
  };
}

Usage Examples​

Basic Chat Interface​

import { ChatPage, ThemeProvider } from 'ui';

function App() {
  return (
    <ThemeProvider>
      <ChatPage
        conversations={conversations}
        currentConversation={selectedConversation}
        onSendMessage={handleSendMessage}
        onSelectConversation={handleSelectConversation}
      />
    </ThemeProvider>
  );
}

Custom Message Input​

import { MessageInput } from 'ui';

function CustomChat() {
  const handleSend = (message) => {
    console.log('Sending:', message);
  };

  return (
    <MessageInput
      onSend={handleSend}
      placeholder="Type a message..."
      enableVoice
      enableLocation
      enableAttachments
      enableEmoji
    />
  );
}

Authentication Flow​

import { AuthPage } from 'ui';

function Authentication() {
  const handleSignIn = async (credentials) => {
    // Your authentication logic
  };

  return (
    <AuthPage
      onSignIn={handleSignIn}
      onSignUp={handleSignUp}
      enableSocialAuth
      providers={['google', 'github']}
    />
  );
}

Development Workflow​

Running Storybook Locally​

cd ui
npm install
npm start  # Opens Storybook at localhost:6006

Building the Library​

npm run build
# Outputs to ./Frontend directory
# - Storybook static site
# - Webpack bundle with module federation

Testing Components​

npm test              # Run tests once
npm run test:watch    # Watch mode
npm run test:coverage # Generate coverage report

Code Quality​

npm run lint          # Run ESLint and Prettier
npm run lint:fix      # Auto-fix issues

Integration with Chat-v2​

The UI library is designed specifically for the chat-v2 project, providing all the visual components needed for:

✅ Real-time messaging with message bubbles, typing indicators, and timestamps ✅ Contact management with profile editing and status indicators ✅ Media sharing with image editor, carousel, and file uploads ✅ Location sharing with interactive map pickers ✅ Voice messages with recording and playback interfaces ✅ Authentication with social login and registration flows ✅ Dark/light themes for better user experience ✅ Mobile-responsive design that works on all devices

The components integrate with the P2P networking layer and encryption systems from other modules to create a complete, secure messaging application.

Interactive Demos​

Full Component Library​

Explore all components interactively: Open Storybook

Chat Page Template​

See the complete chat interface in action: View Chat Template

Live Application Demo​

Experience the full Glitr application: Try Glitr Demo

Repository & Resources​

Roadmap & Feedback​

This library is actively developed and evolving! Current focus areas:

  • Video/Audio Calling Components - WebRTC-based call interfaces
  • Notification System - Push notifications and badges
  • Accessibility Improvements - Enhanced keyboard navigation and screen reader support
  • Performance Optimizations - Virtualization for large lists
  • Animation Library - Micro-interactions and transitions
  • Testing Coverage - Comprehensive unit and integration tests

Your feedback matters! If you have suggestions, feature requests, or encounter issues, please open an issue on the GitHub repository or reach out through the project's communication channels.

Contributing​

Contributions are welcome! The component library follows these principles:

  1. Atomic Design - Place components in the correct layer (atom/molecule/organism/template)
  2. TypeScript First - All components must have proper type definitions
  3. Accessibility - Include proper ARIA labels and keyboard navigation
  4. Storybook Stories - Every component needs interactive stories
  5. Testing - Unit tests for all new functionality
  6. Documentation - Clear prop descriptions and usage examples

Check the repository's CONTRIBUTING.md for detailed guidelines.