tessl/npm-storybook--components

Core Storybook Components (Deprecated - re-exports from storybook/internal/components)

—

Pending

Overview

Eval results

Files

Layout and Navigation

Name: tessl/npm-storybook--components
Author: tessl

Bar components, separators, tabs, and navigation utilities for building complex interfaces with consistent layout patterns.

Capabilities

Bar Components

Container components for organizing actions and content in horizontal bars.

/**
 * Generic bar container component for organizing content horizontally
 */
const Bar: React.ComponentType<{
  /** Bar content */
  children: React.ReactNode;
  /** Additional styling and configuration */
  [key: string]: any;
}>;

/**
 * Flexible bar container with advanced layout options
 * Provides better control over item spacing and alignment
 */
const FlexBar: React.ComponentType<{
  /** Bar content */
  children: React.ReactNode;
  /** Flex layout configuration */
  [key: string]: any;
}>;

Separator Components

Visual separators for organizing content and creating visual hierarchy.

/**
 * Visual separator component for dividing content
 */
const Separator: React.ComponentType<{
  /** Separator styling options */
  [key: string]: any;
}>;

/**
 * Utility function to add separators between array items
 * Inserts separator elements between each item in an array
 */
function interleaveSeparators<T>(items: T[]): (T | React.ReactElement)[];

Tab Components

Complete tab system for organizing content into switchable panels.

/**
 * Main tab container component that manages tab state and content
 */
const Tabs: React.ComponentType<{
  /** Currently active tab */
  active?: string;
  /** Tab change handler */
  onSelect?: (id: string) => void;
  /** Tab configuration and content */
  children: React.ReactNode;
  /** Additional tab options */
  [key: string]: any;
}>;

/**
 * Tab state management component for controlled tab behavior
 */
const TabsState: React.ComponentType<{
  /** Initial active tab */
  initial?: string;
  /** Tab state change handler */
  children: (state: { active: string; onSelect: (id: string) => void }) => React.ReactNode;
}>;

/**
 * Tab bar component that displays tab headers/buttons
 */
const TabBar: React.ComponentType<{
  /** Tab items to display */
  children: React.ReactNode;
  /** Bar styling options */
  [key: string]: any;
}>;

/**
 * Individual tab wrapper component
 */
const TabWrapper: React.ComponentType<{
  /** Tab content */
  children: React.ReactNode;
  /** Tab identifier */
  id: string;
  /** Tab title */
  title: string;
  /** Tab configuration */
  [key: string]: any;
}>;

/**
 * Empty state component for tab content when no content is available
 */
const EmptyTabContent: React.ComponentType<{
  /** Empty state message */
  children?: React.ReactNode;
  /** Styling options */
  [key: string]: any;
}>;

Button Components for Bars

Specialized button components optimized for use in bars and toolbars.

/**
 * Loading skeleton for icon buttons in bars
 */
const IconButtonSkeleton: React.ComponentType<{
  /** Skeleton configuration */
  [key: string]: any;
}>;

/**
 * Tab button component for tab navigation
 */
const TabButton: React.ComponentType<{
  /** Button content */
  children: React.ReactNode;
  /** Active state */
  active?: boolean;
  /** Click handler */
  onClick?: () => void;
  /** Button configuration */
  [key: string]: any;
}>;

Addon Panel

Container component for Storybook addon panels.

/**
 * Addon panel container component for displaying addon content
 */
const AddonPanel: React.ComponentType<{
  /** Panel content */
  children: React.ReactNode;
  /** Panel configuration */
  [key: string]: any;
}>;

Usage Examples

Basic Bar Components:

import { Bar, FlexBar, Button, IconButton } from "@storybook/components";

// Basic bar with actions
<Bar>
  <Button variant="outline">Cancel</Button>
  <Button variant="solid">Save</Button>
</Bar>

// Flexible bar with space distribution
<FlexBar>
  <div>Left content</div>
  <div style={{ marginLeft: 'auto' }}>Right content</div>
</FlexBar>

Separators:

import { Separator, interleaveSeparators, Button } from "@storybook/components";

// Manual separator
<div>
  <Button>Action 1</Button>
  <Separator />
  <Button>Action 2</Button>
  <Separator />
  <Button>Action 3</Button>
</div>

// Automatic separators using utility
const actions = [
  <Button key="1">Action 1</Button>,
  <Button key="2">Action 2</Button>,
  <Button key="3">Action 3</Button>
];

<div>
  {interleaveSeparators(actions)}
</div>

Tab System:

import { 
  Tabs, 
  TabsState, 
  TabBar, 
  TabWrapper, 
  TabButton,
  EmptyTabContent 
} from "@storybook/components";

// Basic tabs with state management
<TabsState initial="tab1">
  {({ active, onSelect }) => (
    <Tabs active={active} onSelect={onSelect}>
      <TabBar>
        <TabButton 
          active={active === 'tab1'} 
          onClick={() => onSelect('tab1')}
        >
          Tab 1
        </TabButton>
        <TabButton 
          active={active === 'tab2'} 
          onClick={() => onSelect('tab2')}
        >
          Tab 2
        </TabButton>
        <TabButton 
          active={active === 'tab3'} 
          onClick={() => onSelect('tab3')}
        >
          Tab 3
        </TabButton>
      </TabBar>
      
      <TabWrapper id="tab1" title="Tab 1">
        <div>Content for tab 1</div>
      </TabWrapper>
      
      <TabWrapper id="tab2" title="Tab 2">
        <div>Content for tab 2</div>
      </TabWrapper>
      
      <TabWrapper id="tab3" title="Tab 3">
        <EmptyTabContent>
          No content available for this tab
        </EmptyTabContent>
      </TabWrapper>
    </Tabs>
  )}
</TabsState>

Controlled Tabs:

import { Tabs, TabBar, TabWrapper, TabButton } from "@storybook/components";
import { useState } from "react";

function ControlledTabs() {
  const [activeTab, setActiveTab] = useState('overview');

  return (
    <Tabs active={activeTab} onSelect={setActiveTab}>
      <TabBar>
        <TabButton 
          active={activeTab === 'overview'} 
          onClick={() => setActiveTab('overview')}
        >
          Overview
        </TabButton>
        <TabButton 
          active={activeTab === 'details'} 
          onClick={() => setActiveTab('details')}
        >
          Details
        </TabButton>
        <TabButton 
          active={activeTab === 'settings'} 
          onClick={() => setActiveTab('settings')}
        >
          Settings
        </TabButton>
      </TabBar>
      
      <TabWrapper id="overview" title="Overview">
        <h3>Project Overview</h3>
        <p>General information about the project.</p>
      </TabWrapper>
      
      <TabWrapper id="details" title="Details">
        <h3>Project Details</h3>
        <p>Detailed information and specifications.</p>
      </TabWrapper>
      
      <TabWrapper id="settings" title="Settings">
        <h3>Project Settings</h3>
        <p>Configuration options and preferences.</p>
      </TabWrapper>
    </Tabs>
  );
}

Button Skeletons:

import { IconButtonSkeleton, Bar } from "@storybook/components";

// Loading state for toolbar
<Bar>
  <IconButtonSkeleton />
  <IconButtonSkeleton />
  <IconButtonSkeleton />
</Bar>

Complex Layout Example:

import { 
  FlexBar, 
  Separator, 
  TabsState, 
  Tabs, 
  TabBar, 
  TabButton,
  TabWrapper,
  AddonPanel,
  Button
} from "@storybook/components";

function ComplexInterface() {
  return (
    <div>
      {/* Top toolbar */}
      <FlexBar>
        <div>
          <Button variant="ghost">Menu</Button>
          <Separator />
          <Button variant="ghost">File</Button>
          <Button variant="ghost">Edit</Button>
        </div>
        <div style={{ marginLeft: 'auto' }}>
          <Button variant="outline">Settings</Button>
        </div>
      </FlexBar>

      {/* Main content with tabs */}
      <TabsState initial="content">
        {({ active, onSelect }) => (
          <Tabs active={active} onSelect={onSelect}>
            <TabBar>
              <TabButton 
                active={active === 'content'} 
                onClick={() => onSelect('content')}
              >
                Content
              </TabButton>
              <TabButton 
                active={active === 'addons'} 
                onClick={() => onSelect('addons')}
              >
                Addons
              </TabButton>
            </TabBar>
            
            <TabWrapper id="content" title="Content">
              <div>Main content area</div>
            </TabWrapper>
            
            <TabWrapper id="addons" title="Addons">
              <AddonPanel>
                <div>Addon content and controls</div>
              </AddonPanel>
            </TabWrapper>
          </Tabs>
        )}
      </TabsState>
    </div>
  );
}

Layout Patterns

Toolbar Pattern:

// Standard toolbar with actions and separators
<FlexBar>
  <div>
    <Button variant="ghost">Action 1</Button>
    <Separator />
    <Button variant="ghost">Action 2</Button>
  </div>
  <div style={{ marginLeft: 'auto' }}>
    <Button variant="outline">Settings</Button>
  </div>
</FlexBar>

Tab Navigation Pattern:

// Consistent tab navigation across interfaces
<TabsState>
  {({ active, onSelect }) => (
    <>
      <TabBar>
        {/* Tab buttons */}
      </TabBar>
      <div>
        {/* Tab content */}
      </div>
    </>
  )}
</TabsState>

Integration Notes

Layout components are designed to work seamlessly with Storybook's theming system and automatically adapt to different screen sizes and orientations. They provide consistent spacing, alignment, and visual hierarchy across different interface contexts.

The tab system includes proper accessibility features including keyboard navigation, ARIA labels, and focus management for screen readers and keyboard-only users.

Install with Tessl CLI

npx tessl i tessl/npm-storybook--components

docs

syntax-highlighting.md