@tcn/ui-scaffold

A collection of scaffolding components that provide the foundational structure for building complex user interfaces, including panels, toolbars, and dividers for organizing content in React applications.

Overview

@tcn/ui-scaffold provides essential structural components that help organize and layout complex user interfaces. These components create the foundation for building consistent, well-structured applications with proper content organization and visual hierarchy.

What's Included

Structural Components

• Panel: Container system with header, body, footer, and section components
• Toolbar: Action bar components with tool strips for organizing controls
• Divider: Visual separation components for organizing content

Panel System

• Panel Container: Main panel wrapper with flexible layout options
• Panel Header: Header section for titles and primary actions
• Panel Body: Main content area with flexible sizing
• Panel Footer: Footer section for secondary actions and information
• Panel Section: Subdivisions within panels for content organization

Layout Features

• Content Organization: Structured layout patterns for complex interfaces
• Visual Hierarchy: Clear separation and organization of content
• Flexible Sizing: Responsive components that adapt to content
• Consistent Spacing: Unified spacing using design system tokens

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 Structure: Unified layout patterns across all scaffold components

Usage

Basic Panel

import { Panel, PanelHeader, PanelBody, PanelFooter } from '@tcn/ui-scaffold';

function UserProfilePanel() {
  return (
    <Panel>
      <PanelHeader>
        <h2>User Profile</h2>
      </PanelHeader>

      <PanelBody>
        <p>User information and details go here...</p>
      </PanelBody>

      <PanelFooter>
        <button>Save Changes</button>
        <button>Cancel</button>
      </PanelFooter>
    </Panel>
  );
}

Panel with Sections

import { Panel, PanelSection } from '@tcn/ui-scaffold';

function SettingsPanel() {
  return (
    <Panel>
      <PanelHeader>
        <h2>Application Settings</h2>
      </PanelHeader>

      <PanelBody>
        <PanelSection>
          <h3>General Settings</h3>
          <p>Basic application configuration...</p>
        </PanelSection>

        <PanelSection>
          <h3>Advanced Settings</h3>
          <p>Advanced configuration options...</p>
        </PanelSection>
      </PanelBody>
    </Panel>
  );
}

Toolbar Component

import { Toolbar } from '@tcn/ui-scaffold';
import { Button } from '@tcn/ui-actions';

function DocumentToolbar() {
  return (
    <Toolbar size="md">
      <Button hierarchy="primary">New</Button>
      <Button>Open</Button>
      <Button>Save</Button>
      <Button>Print</Button>
    </Toolbar>
  );
}

Divider Components

import { Divider } from '@tcn/ui-scaffold';

function ContentWithDividers() {
  return (
    <div>
      <h2>Section 1</h2>
      <p>Content for section 1...</p>

      <Divider horizontal emphasis="strong" />

      <h2>Section 2</h2>
      <p>Content for section 2...</p>

      <Divider
        horizontal
        thickness="md"
        length="full"
        emphasis="weak"
      />

      <h2>Section 3</h2>
      <p>Content for section 3...</p>
    </div>
  );
}

Complex Layout

import { Panel, PanelHeader, PanelBody, Divider } from '@tcn/ui-scaffold';
import { HStack, VStack } from '@tcn/ui-layout';

function DashboardLayout() {
  return (
    <VStack gap="24px">
      <Panel>
        <PanelHeader>
          <h1>Dashboard</h1>
        </PanelHeader>

        <PanelBody>
          <HStack gap="16px">
            <div>Statistics Panel</div>
            <Divider vertical />
            <div>Recent Activity</div>
          </HStack>
        </PanelBody>
      </Panel>

      <Divider horizontal emphasis="normal" />

      <Panel>
        <PanelHeader>
          <h2>Quick Actions</h2>
        </PanelHeader>
        <PanelBody>
          <p>Action buttons and controls...</p>
        </PanelBody>
      </Panel>
    </VStack>
  );
}

Component Features

Panel System

• Flexible Layout: Adaptable containers for different content types
• Section Support: Subdivisions for organizing complex content
• Header/Footer: Dedicated areas for actions and information
• Responsive Design: Components that adapt to different screen sizes

Toolbar Components

• Action Organization: Structured layout for application controls
• Size Variants: Different sizes for different contexts
• Flexible Content: Support for various control types
• Consistent Spacing: Unified spacing using design system tokens

Divider Components

• Orientation Control: Horizontal and vertical dividers
• Emphasis Levels: Different visual weights for different contexts
• Size Variants: Multiple thickness and length options
• Custom Styling: Flexible appearance customization

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-scaffold when you need:

• Structured layout patterns for complex interfaces
• Consistent content organization across your application
• Visual separation and content hierarchy
• Toolbar and action bar layouts
• Components that integrate with your design system
• Accessible structural components with proper ARIA support

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
• Layout Options: Flexible arrangement and spacing controls

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
• Layout Optimization: Efficient positioning and sizing calculations

License

Apache-2.0