@tcn/ui-feedback

A comprehensive collection of feedback components that provide users with information about system status, progress, and confirmations in React applications.

Overview

@tcn/ui-feedback provides essential components for communicating with users about application state, progress, and important actions. These components help create a responsive and informative user experience by providing clear visual feedback for various system states and user interactions.

What's Included

Status Components

• Alert: Simple alert dialogs for important information and confirmations
• Confirm: Confirmation dialogs with customizable actions
• Loading: Animated loading indicators with customizable appearance

Progress Components

• ProgressBar: Visual progress indicators with percentage display
• Lazy: Lazy loading components for progressive content loading

Feedback Features

• Status Indicators: Clear visual feedback for different states
• Progress Tracking: Visual representation of operation progress
• User Confirmations: Safe confirmation flows for important actions
• Loading States: Professional loading animations and indicators

Key Features

• Accessibility First: Built with ARIA attributes and screen reader support
• Design System Integration: Seamlessly works with Blackcat UI themes and spacing
• TypeScript Support: Full type safety with excellent IntelliSense
• Responsive Design: Adapts to different screen sizes and orientations
• Customizable: Extensive styling and behavior customization options
• Performance Optimized: Efficient rendering with minimal re-renders
• Consistent Styling: Unified visual language across all feedback components

Usage

Basic Alert

import { Alert } from '@tcn/ui-feedback';

function SuccessAlert() {
  const [showAlert, setShowAlert] = useState(false);

  return (
    <>
      <button onClick={() => setShowAlert(true)}>
        Show Success Message
      </button>

      <Alert
        open={showAlert}
        title="Success!"
        description="Your action was completed successfully."
        onAccept={() => setShowAlert(false)}
      />
    </>
  );
}

Confirmation Dialog

import { Confirm } from '@tcn/ui-feedback';
import { Button } from '@tcn/ui-actions';

function DeleteConfirmation() {
  const [showConfirm, setShowConfirm] = useState(false);

  return (
    <>
      <button onClick={() => setShowConfirm(true)}>
        Delete Item
      </button>

      <Confirm
        open={showConfirm}
        title="Confirm Deletion"
        description="Are you sure you want to delete this item? This action cannot be undone."
        actions={
          <HStack gap="12px">
            <Button onClick={() => setShowConfirm(false)}>
              Cancel
            </Button>
            <Button
              hierarchy="danger"
              onClick={() => {
                // Delete logic here
                setShowConfirm(false);
              }}
            >
              Delete
            </Button>
          </HStack>
        }
      />
    </>
  );
}

Loading Indicator

import { Loading } from '@tcn/ui-feedback';

function LoadingExample() {
  return (
    <div>
      <h3>Loading...</h3>
      <Loading
        size="24px"
        color="var(--accent-color)"
        lineCount={8}
        animationDuration={1000}
      />
    </div>
  );
}

Progress Bar

import { ProgressBar } from '@tcn/ui-feedback';

function UploadProgress() {
  const [progress, setProgress] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setProgress(prev => Math.min(prev + 0.1, 1));
    }, 100);

    return () => clearInterval(interval);
  }, []);

  return (
    <ProgressBar
      message="Uploading files..."
      value={progress}
    />
  );
}

Lazy Loading

import { Lazy } from '@tcn/ui-feedback';

function LazyContent() {
  return (
    <Lazy fallback={<Loading size="32px" />}>
      <ExpensiveComponent />
    </Lazy>
  );
}

Component Features

Alert System

• Simple Alerts: Basic information and confirmation dialogs
• Customizable Actions: Flexible button configurations
• Accessibility: Proper ARIA attributes and keyboard navigation
• Responsive Design: Adapts to different screen sizes

Confirmation Dialogs

• Flexible Actions: Custom action button layouts
• Safe Defaults: Prevents accidental confirmations
• Keyboard Support: Full keyboard navigation
• Focus Management: Proper focus trapping and restoration

Loading Components

• Customizable Animation: Configurable line count and duration
• Size Control: Flexible sizing options
• Color Customization: Custom colors for different contexts
• Smooth Animations: Professional loading animations

Progress Tracking

• Visual Progress: Clear visual representation of progress
• Percentage Display: Accurate percentage calculations
• Message Support: Descriptive text for context
• Completion States: Visual feedback for completed operations

Design System Integration

All components automatically integrate with:

• Spacing Scale: Consistent margins, padding, and gaps
• Color System: Primary, secondary, and accent color schemes
• Typography: Font sizes and weights that match your design
• Scalar Support: Automatic scaling for different screen densities
• Theme Support: Light and dark theme compatibility

Accessibility Features

• ARIA Attributes: Proper labeling and state management
• Screen Reader Support: Semantic markup and descriptions
• Focus Management: Clear focus indicators and focus trapping
• Keyboard Navigation: Full keyboard support for all interactions
• High Contrast: Designed for various visual accessibility needs

When to Use

Choose @tcn/ui-feedback when you need:

• User confirmation for important actions
• Loading states and progress indicators
• Status notifications and alerts
• Consistent feedback patterns across your application
• Accessible feedback components with proper ARIA support
• Components that integrate with your design system

Customization

Components support extensive customization through:

• CSS Custom Properties: Dynamic styling changes
• CSS Modules: Scoped styling with design system integration
• Props Interface: Flexible configuration through component props
• Theme Integration: Automatic adaptation to different themes
• Animation Options: Customizable loading and progress animations

Performance

• Efficient Rendering: Minimal re-renders and optimized updates
• Bundle Optimization: Tree-shakeable components for smaller bundles
• Memory Management: Proper cleanup and event handling
• Lazy Loading: Support for on-demand component loading
• Animation Optimization: Smooth animations with minimal performance impact

License

Apache-2.0