tessl/npm-storybook--components

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

—

Pending

Overview

Eval results

Files

Graphics and Icons

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

Icon components, brand elements, and visual utilities. Note that the Icons component is deprecated in favor of the @storybook/icons package.

Capabilities

Icons Component (Deprecated)

Legacy icon component maintained for backward compatibility.

interface IconsProps extends React.ComponentProps<'svg'> {
  /** Icon name/type to display */
  icon: IconType;
  /** Use symbol rendering instead of inline SVG */
  useSymbol?: boolean;
  /** Click handler */
  onClick?: () => void;
  /** Suppress deprecation warning (internal use) */
  __suppressDeprecationWarning?: boolean;
}

/**
 * Icon component (deprecated)
 * @deprecated No longer used, will be removed in Storybook 9.0
 * Please use the @storybook/icons package instead
 */
const Icons: React.ComponentType<IconsProps>;

/**
 * Available icon types from the legacy icon system
 * Maps to icon names that can be used with the Icons component
 */
type IconType = string; // Specific icon names from the legacy icon library

/**
 * Icon definitions mapping
 * Object containing all available icons in the legacy system
 */
const icons: Record<string, string>;

Symbol Component

Symbol component for rendering icon symbols.

/**
 * Symbol component for rendering icon symbols
 */
const Symbols: React.ComponentType<{
  /** Symbol configuration */
  [key: string]: any;
}>;

Brand Components

Storybook brand elements for consistent branding across interfaces.

/**
 * Storybook logo component with proper sizing and styling
 */
const StorybookLogo: React.ComponentType<{
  /** Logo size configuration */
  [key: string]: any;
}>;

/**
 * Storybook icon component (smaller brand mark)
 */
const StorybookIcon: React.ComponentType<{
  /** Icon size and styling configuration */
  [key: string]: any;
}>;

Usage Examples

Legacy Icons (Deprecated):

import { Icons } from "@storybook/components";

// Basic icon usage (shows deprecation warning)
<Icons icon="settings" />

// Icon with click handler
<Icons 
  icon="trash" 
  onClick={() => console.log('Delete clicked')}
/>

// Using symbol rendering
<Icons icon="home" useSymbol={true} />

// Suppress deprecation warning (not recommended)
<Icons 
  icon="info" 
  __suppressDeprecationWarning={true}
/>

Modern Icon Usage (Recommended):

// Instead of the deprecated Icons component, use @storybook/icons:
import { SettingsIcon, TrashIcon, HomeIcon } from "@storybook/icons";

<SettingsIcon />
<TrashIcon onClick={() => console.log('Delete clicked')} />
<HomeIcon />

Brand Components:

import { StorybookLogo, StorybookIcon } from "@storybook/components";

// Full Storybook logo
<StorybookLogo />

// Compact icon version
<StorybookIcon />

Symbol Component:

import { Symbols } from "@storybook/components";

<Symbols />

Migration from Icons Component

The Icons component is deprecated and will be removed in Storybook 9.0. Users should migrate to the @storybook/icons package:

Before (deprecated):

import { Icons } from "@storybook/components";

<Icons icon="settings" onClick={handleClick} />
<Icons icon="trash" />
<Icons icon="home" />

After (recommended):

import { SettingsIcon, TrashIcon, HomeIcon } from "@storybook/icons";

<SettingsIcon onClick={handleClick} />
<TrashIcon />
<HomeIcon />

Available Legacy Icons

The legacy icons object contains mappings for various icon names. Common icons include:

settings - Settings/configuration icon
trash - Delete/remove icon
home - Home/dashboard icon
info - Information icon
warning - Warning/alert icon
error - Error icon
success - Success/checkmark icon
edit - Edit/pencil icon
add - Add/plus icon
remove - Remove/minus icon

For a complete list of available icons, inspect the icons export:

import { icons } from "@storybook/components";
console.log(Object.keys(icons)); // All available icon names

Brand Guidelines

When using the brand components:

Use StorybookLogo for primary branding and headers
Use StorybookIcon for compact spaces like favicons or small UI elements
Maintain proper spacing and sizing according to Storybook's brand guidelines
Ensure sufficient contrast against backgrounds

Integration Notes

Graphics components integrate with Storybook's theming system and automatically adapt to light/dark themes. The deprecated Icons component includes extensive deprecation warnings to guide migration to the modern @storybook/icons package.

All graphics components are optimized for performance and accessibility, including proper ARIA labels and scalable rendering at different sizes.

Install with Tessl CLI

npx tessl i tessl/npm-storybook--components

docs

syntax-highlighting.md