@tcn/ui-datum

A collection of data display components including badges, chips, and bubbles for presenting information in a clear, visually appealing way in React applications.

Overview

@tcn/ui-datum provides essential components for displaying data, status information, and metadata in your user interface. These components help users quickly understand information through consistent visual patterns and clear data representation.

What's Included

Data Display Components

• Badge: Notification badges that overlay content with counts or status indicators
• Chip: Compact data chips for tags, categories, and selectable items
• Bubble: Flexible containers for highlighting and displaying information

Display Features

• Status Indicators: Visual representation of data states and values
• Information Overlays: Badges that provide context without disrupting layout
• Data Tags: Chips for categorizing and organizing information
• Flexible Containers: Bubbles for custom data presentation

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 datum components

Usage

Badge Component

import { Badge } from '@tcn/ui-datum';

function NotificationBadge() {
  return (
    <Badge value="3" backgroundColor="#ff4444" textColor="#ffffff">
      <button>Notifications</button>
    </Badge>
  );
}

function StatusBadge() {
  return (
    <Badge value="New" backgroundColor="#00cc00" textColor="#ffffff">
      <div>User Profile</div>
    </Badge>
  );
}

Chip Component

import { Chip } from '@tcn/ui-datum';

function TagChips() {
  return (
    <div>
      <Chip color="#ff6b6b">React</Chip>
      <Chip color="#4ecdc4">TypeScript</Chip>
      <Chip color="#45b7d1">CSS</Chip>
      <Chip color="#96ceb4" disabled>Deprecated</Chip>
    </div>
  );
}

function CategoryChips() {
  return (
    <div>
      <Chip color="var(--accent-color)">Technology</Chip>
      <Chip color="var(--status-info)">Business</Chip>
      <Chip color="var(--status-warning)">Design</Chip>
    </div>
  );
}

Bubble Component

import { Bubble } from '@tcn/ui-datum';

function InfoBubble() {
  return (
    <Bubble
      backgroundColor="#e3f2fd"
      textColor="#1976d2"
      size="lg"
      elevate={true}
    >
      Important Information
    </Bubble>
  );
}

function StatusBubble() {
  return (
    <Bubble
      backgroundColor="var(--status-success)"
      textColor="#ffffff"
      size="md"
    >
      Active
    </Bubble>
  );
}

Combined Usage

import { Badge, Chip, Bubble } from '@tcn/ui-datum';

function UserCard() {
  return (
    <div className="user-card">
      <div className="user-info">
        <h3>John Doe</h3>
        <Chip color="var(--accent-color)">Admin</Chip>
        <Bubble backgroundColor="#e8f5e8" textColor="#2e7d32">
          Verified
        </Bubble>
      </div>

      <Badge value="5" backgroundColor="#ff4444" textColor="#ffffff">
        <button>Messages</button>
      </Badge>
    </div>
  );
}

Component Features

Badge System

• Overlay Positioning: Badges automatically position over content
• Customizable Colors: Flexible background and text color options
• Value Display: Support for numbers, text, and custom content
• Responsive Design: Adapts to different content sizes

Chip Components

• Flexible Sizing: Automatic sizing based on content
• Color Customization: Custom colors for different categories
• Disabled States: Visual indication for inactive chips
• Layout Integration: Works seamlessly with layout components

Bubble Components

• Size Variants: Multiple size options (xs, sm, md, lg, xl)
• Elevation Support: Optional shadow and depth effects
• Color Control: Custom background and text colors
• Flexible Content: Support for any type of content

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
• High Contrast: Designed for various visual accessibility needs
• Keyboard Navigation: Full keyboard support for interactive elements
• Color Independence: Information not conveyed by color alone

When to Use

Choose @tcn/ui-datum when you need:

• Notification badges and status indicators
• Data tags and categorization chips
• Information bubbles and highlights
• Consistent data presentation patterns
• Components that integrate with your design system
• Accessible data display components

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
• Color Options: Custom colors for different contexts and states

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
• Optimized Layouts: Efficient positioning and sizing calculations

License

Apache-2.0