@storybook/components

@storybook/components

Version 6.5.16
Published 19 hours ago
6.1 MB
8 dependencies
MIT license

Install

npm i @storybook/components

yarn add @storybook/components

pnpm add @storybook/components

Overview

Core Storybook Components

Index

Variables

variable A

const A: any;

variable ActionBar

const ActionBar: FunctionComponent<ActionBarProps>;

variable ArgsTable

const ArgsTable: FC<ArgsTableProps>;

Display the props for a component as a props table. Each row is a collection of ArgDefs, usually derived from docgen info for the component.

variable argsTableLoadingData

const argsTableLoadingData: ArgsTableDataProps;

variable Badge

const Badge: FunctionComponent<BadgeProps>;

variable Bar

const Bar: any;

variable Blockquote

const Blockquote: any;

variable BooleanControl

const BooleanControl: FC<BooleanProps>;

variable Button

const Button: FunctionComponent<ComponentProps<any>>;

variable ButtonWrapper

const ButtonWrapper: any;

variable ColorItem

const ColorItem: FunctionComponent<ColorItemProps>;

A single color row your styleguide showing title, subtitle and one or more colors, used as a child of ColorPalette.

variable ColorPalette

const ColorPalette: FunctionComponent;

Styleguide documentation for colors, including names, captions, and color swatches, all specified as ColorItem children of this wrapper component.

variable components

const components: {
    h1: (props: any) => JSX.Element;
    h2: (props: any) => JSX.Element;
    h3: (props: any) => JSX.Element;
    h4: (props: any) => JSX.Element;
    h5: (props: any) => JSX.Element;
    h6: (props: any) => JSX.Element;
    pre: (props: any) => JSX.Element;
    a: (props: any) => JSX.Element;
    hr: (props: any) => JSX.Element;
    dl: (props: any) => JSX.Element;
    blockquote: (props: any) => JSX.Element;
    table: (props: any) => JSX.Element;
    img: (props: any) => JSX.Element;
    div: (props: any) => JSX.Element;
    span: (props: any) => JSX.Element;
    li: (props: any) => JSX.Element;
    ul: (props: any) => JSX.Element;
    ol: (props: any) => JSX.Element;
    p: (props: any) => JSX.Element;
    code: (props: any) => JSX.Element;
    tt: (props: any) => JSX.Element;
    resetwrapper: (props: any) => JSX.Element;
};

variable DateControl

const DateControl: FC<DateProps>;

variable DefaultCodeBlock

const DefaultCodeBlock: any;

variable Description

const Description: FunctionComponent<DescriptionProps>;

A markdown description for a component, typically used to show the components docgen docs.

variable Div

const Div: any;

variable DL

const DL: any;

variable DocsContent

const DocsContent: any;

variable DocsPageWrapper

const DocsPageWrapper: FC;

variable DocsWrapper

const DocsWrapper: any;

variable DocumentWrapper

const DocumentWrapper: any;

variable FilesControl

const FilesControl: FunctionComponent<FilesControlProps>;

variable FlexBar

const FlexBar: FunctionComponent<FlexBarProps>;

variable Form

const Form: any;

variable H1

const H1: any;

variable H2

const H2: any;

variable H3

const H3: any;

variable H4

const H4: any;

variable H5

const H5: any;

variable H6

const H6: any;

variable HR

const HR: any;

variable IconButton

const IconButton: any;

variable IconGallery

const IconGallery: FunctionComponent;

Show a grid of icons, as specified by IconItem.

variable IconItem

const IconItem: FunctionComponent<IconItemProps>;

An individual icon with a caption and an example (passed as children).

variable icons

const icons: {
    mobile: string;
    watch: string;
    tablet: string;
    browser: string;
    sidebar: string;
    sidebaralt: string;
    bottombar: string;
    useralt: string;
    user: string;
    useradd: string;
    users: string;
    profile: string;
    bookmark: string;
    bookmarkhollow: string;
    book: string;
    repository: string;
    star: string;
    starhollow: string;
    circle: string;
    circlehollow: string;
    heart: string;
    hearthollow: string;
    facehappy: string;
    facesad: string;
    faceneutral: string;
    lock: string;
    unlock: string;
    key: string;
    arrowleftalt: string;
    arrowrightalt: string;
    sync: string;
    reply: string;
    undo: string;
    transfer: string;
    redirect: string;
    expand: string;
    expandalt: string;
    collapse: string;
    grow: string;
    arrowleft: string;
    arrowup: string;
    arrowdown: string;
    arrowright: string;
    chevrondown: string;
    back: string;
    download: string;
    upload: string;
    proceed: string;
    info: string;
    question: string;
    support: string;
    alert: string;
    bell: string;
    rss: string;
    edit: string;
    paintbrush: string;
    close: string;
    closeAlt: string;
    trash: string;
    cross: string;
    delete: string;
    add: string;
    subtract: string;
    plus: string;
    document: string;
    folder: string;
    component: string;
    calendar: string;
    graphline: string;
    docchart: string;
    doclist: string;
    category: string;
    grid: string;
    copy: string;
    certificate: string;
    print: string;
    listunordered: string;
    graphbar: string;
    menu: string;
    filter: string;
    ellipsis: string;
    cog: string;
    wrench: string;
    nut: string;
    camera: string;
    eye: string;
    eyeclose: string;
    photo: string;
    video: string;
    speaker: string;
    phone: string;
    flag: string;
    pin: string;
    compass: string;
    globe: string;
    location: string;
    search: string;
    zoom: string;
    zoomout: string;
    zoomreset: string;
    timer: string;
    time: string;
    lightning: string;
    lightningoff: string;
    dashboard: string;
    hourglass: string;
    play: string;
    playnext: string;
    playback: string;
    stop: string;
    stopalt: string;
    rewind: string;
    fastforward: string;
    email: string;
    link: string;
    paperclip: string;
    box: string;
    structure: string;
    cpu: string;
    memory: string;
    database: string;
    power: string;
    outbox: string;
    share: string;
    button: string;
    form: string;
    check: string;
    batchaccept: string;
    batchdeny: string;
    home: string;
    admin: string;
    paragraph: string;
    basket: string;
    credit: string;
    shield: string;
    beaker: string;
    thumbsup: string;
    mirror: string;
    switchalt: string;
    commit: string;
    branch: string;
    merge: string;
    pullrequest: string;
    chromatic: string;
    twitter: string;
    google: string;
    gdrive: string;
    youtube: string;
    facebook: string;
    medium: string;
    graphql: string;
    redux: string;
    github: string;
    bitbucket: string;
    gitlab: string;
    azuredevops: string;
    discord: string;
    contrast: string;
    unfold: string;
    sharealt: string;
    accessibility: string;
    accessibilityalt: string;
    markup: string;
    outline: string;
    verified: string;
    comment: string;
    commentadd: string;
    requestchange: string;
    comments: string;
    ruler: string;
};

variable Icons

const Icons: React.NamedExoticComponent<IconsProps>;

variable Img

const Img: any;

variable Item

const Item: any;

variable LazyColorControl

const LazyColorControl: React.LazyExoticComponent<React.FC<ColorControlProps>>;

variable LazySyntaxHighlighter

const LazySyntaxHighlighter: React.LazyExoticComponent<
    React.FunctionComponent<SyntaxHighlighterProps>
>;

variable LazyWithTooltip

const LazyWithTooltip: React.LazyExoticComponent<
    React.FunctionComponent<WithTooltipPureProps & { startOpen?: boolean }>
>;

variable LazyWithTooltipPure

const LazyWithTooltipPure: React.LazyExoticComponent<
    React.FunctionComponent<WithTooltipPureProps>
>;

variable LI

const LI: any;

variable Link

const Link: FunctionComponent<any>;

variable Loader

const Loader: FunctionComponent<ComponentProps<FunctionComponent<any>>>;

variable NumberControl

const NumberControl: FC<NumberProps>;

variable ObjectControl

const ObjectControl: FC<ObjectProps>;

variable OL

const OL: any;

variable OptionsControl

const OptionsControl: FC<OptionsProps>;

variable P

const P: any;

variable Placeholder

const Placeholder: FunctionComponent;

variable Pre

const Pre: any;

variable Preview

const Preview: FunctionComponent<PreviewProps>;

A preview component for showing one or more component Story items. The preview also shows the source for the component as a drop-down.

variable ProgressWrapper

const ProgressWrapper: any;

variable PureLoader

const PureLoader: FunctionComponent<any>;

variable RangeControl

const RangeControl: FC<RangeProps>;

variable resetComponents

const resetComponents: Record<string, ElementType>;

variable ScrollArea

const ScrollArea: FunctionComponent<ScrollAreaProps>;

variable Separator

const Separator: any;

variable Source

const Source: FunctionComponent<SourceProps>;

Syntax-highlighted source code for a component (or anything!)

variable Spaced

const Spaced: FunctionComponent<SpacedProps>;

variable Span

const Span: any;

variable Story

const Story: FunctionComponent<
    StoryProps & { inline?: boolean; error?: StoryError }
>;

A story element, either rendered inline or in an iframe, with configurable height.

variable StorybookIcon

const StorybookIcon: FunctionComponent<{}>;

variable StorybookLogo

const StorybookLogo: FunctionComponent<StorybookLogoProps>;

variable StyledSyntaxHighlighter

const StyledSyntaxHighlighter: any;

variable Subtitle

const Subtitle: any;

variable Svg

const Svg: any;

variable Symbols

const Symbols: React.NamedExoticComponent<SymbolsProps>;

variable TabBar

const TabBar: any;

variable TabbedArgsTable

const TabbedArgsTable: FC<TabbedArgsTableProps>;

variable TabButton

const TabButton: any;

variable Table

const Table: any;

variable TableWrapper

const TableWrapper: any;

variable Tabs

const Tabs: FunctionComponent<TabsProps>;

variable TabWrapper

const TabWrapper: FunctionComponent<TabWrapperProps>;

variable TextControl

const TextControl: FC<TextProps>;

variable Title

const Title: any;

variable TooltipLinkList

const TooltipLinkList: FunctionComponent<TooltipLinkListProps>;

variable TooltipMessage

const TooltipMessage: FunctionComponent<TooltipMessageProps>;

variable TooltipNote

const TooltipNote: FunctionComponent<TooltipNoteProps>;

variable TT

const TT: any;

variable Typeset

const Typeset: FunctionComponent<TypesetProps>;

Convenient styleguide documentation showing examples of type with different sizes and weights and configurable sample text.

variable UL

const UL: any;

variable Zoom

const Zoom: { Element: typeof ZoomElement; IFrame: typeof ZoomIFrame };

Functions

function AddonPanel

AddonPanel: ({ active, children }: AddonPanelProps) => JSX.Element;

function Code

Code: ({ className, children, ...props }: ComponentProps<any>) => JSX.Element;

function ColorControl

ColorControl: (
    props: ComponentProps<React.LazyExoticComponent<React.FC<ColorControlProps>>>
) => JSX.Element;

function format

format: (value: NumberValue) => string;

function formatDate

formatDate: (value: Date | number) => string;

function formatTime

formatTime: (value: Date | number) => string;

function getStoryHref

getStoryHref: (
    baseUrl: string,
    storyId: string,
    additionalParams?: Record<string, string>
) => string;

function interleaveSeparators

interleaveSeparators: (list: any[]) => any;

function nameSpaceClassNames

nameSpaceClassNames: (
    { ...props }: { [x: string]: any },
    key: string
) => { [x: string]: any };

function NoControlsWarning

NoControlsWarning: () => JSX.Element;

function parse

parse: (value: string) => number;

function parseDate

parseDate: (value: string) => Date;

function parseTime

parseTime: (value: string) => Date;

function PreviewSkeleton

PreviewSkeleton: () => JSX.Element;

function StorySkeleton

StorySkeleton: () => JSX.Element;

function SyntaxHighlighter

SyntaxHighlighter: (
    props: ComponentProps<
        React.LazyExoticComponent<React.FunctionComponent<SyntaxHighlighterProps>>
    >
) => JSX.Element;

function WithTooltip

WithTooltip: (
    props: ComponentProps<
        React.LazyExoticComponent<
            React.FunctionComponent<WithTooltipPureProps & { startOpen?: boolean }>
        >
    >
) => JSX.Element;

function WithTooltipPure

WithTooltipPure: (
    props: ComponentProps<
        React.LazyExoticComponent<React.FunctionComponent<WithTooltipPureProps>>
    >
) => JSX.Element;

function ZoomElement

ZoomElement: ({ scale, children }: ZoomProps) => JSX.Element;

Classes

class IFrame

class IFrame extends Component<IFrameProps> {}

property iframe

iframe: any;

method componentDidMount

componentDidMount: () => void;

method render

render: () => JSX.Element;

method setIframeBodyStyle

setIframeBodyStyle: (style: BodyStyle) => any;

method shouldComponentUpdate

shouldComponentUpdate: (nextProps: IFrameProps) => boolean;

class TabsState

class TabsState extends Component<TabsStateProps, TabsStateState> {}

constructor

constructor(props: TabsStateProps);

property defaultProps

static defaultProps: TabsStateProps;

property handlers

handlers: { onSelect: (id: string) => void };

method render

render: () => JSX.Element;

Interfaces

interface ActionBarProps

interface ActionBarProps {}

property actionItems

actionItems: ActionItem[];

interface ActionItem

interface ActionItem {}

property className

className?: string;

property disabled

disabled?: boolean;

property onClick

onClick: (e: MouseEvent<HTMLButtonElement>) => void;

property title

title: string | JSX.Element;

interface AddonPanelProps

interface AddonPanelProps {}

property active

active: boolean;

property children

children: ReactNode;

interface Args

interface Args {}

index signature

[key: string]: any;

interface ArgsTableDataProps

interface ArgsTableDataProps {}

property args

args?: Args;

property globals

globals?: Globals;

property rows

rows: ArgTypes;

interface ArgsTableErrorProps

interface ArgsTableErrorProps {}

property error

error: ArgsTableError;

interface ArgsTableLoadingProps

interface ArgsTableLoadingProps {}

property isLoading

isLoading: true;

interface ArgsTableOptionProps

interface ArgsTableOptionProps {}

property compact

compact?: boolean;

property inAddonPanel

inAddonPanel?: boolean;

property initialExpandedArgs

initialExpandedArgs?: boolean;

property isLoading

isLoading?: boolean;

property resetArgs

resetArgs?: (argNames?: string[]) => void;

property sort

sort?: SortType;

property updateArgs

updateArgs?: (args: Args) => void;

interface ArgType

interface ArgType {}

property defaultValue

defaultValue?: any;

property description

description?: string;

property if

if?: Conditional;

property name

name?: string;

index signature

[key: string]: any;

interface ArgTypes

interface ArgTypes {}

index signature

[key: string]: ArgType;

interface BadgeProps

interface BadgeProps {}

property status

status: 'positive' | 'negative' | 'neutral' | 'warning' | 'critical';

interface BarButtonProps

interface BarButtonProps
    extends DetailedHTMLProps<
        ButtonHTMLAttributes<HTMLButtonElement>,
        HTMLButtonElement
    > {}

property href

href?: void;

interface BarLinkProps

interface BarLinkProps
    extends DetailedHTMLProps<
        AnchorHTMLAttributes<HTMLAnchorElement>,
        HTMLAnchorElement
    > {}

property href

href: string;

interface BodyStyle

interface BodyStyle {}

property height

height: string;

property transform

transform: string;

property transformOrigin

transformOrigin: string;

property width

width: string;

interface BooleanConfig

interface BooleanConfig {}

interface ButtonProps

interface ButtonProps {}

property children

children?: ReactNode;

property containsIcon

containsIcon?: boolean;

property disabled

disabled?: boolean;

property gray

gray?: boolean;

property href

href?: string;

property inForm

inForm?: boolean;

property isLink

isLink?: boolean;

property outline

outline?: boolean;

property primary

primary?: boolean;

property secondary

secondary?: boolean;

property small

small?: boolean;

property tertiary

tertiary?: boolean;

interface ColorConfig

interface ColorConfig {}

property presetColors

presetColors?: PresetColor[];

property startOpen

startOpen?: boolean;

interface ColorItemProps

interface ColorItemProps {}

property colors

colors: Colors;

property subtitle

subtitle: string;

property title

title: string;

interface CommonProps

interface CommonProps {}

property height

height?: string;

property id

id: string;

property title

title?: string;

interface ControlProps

interface ControlProps<T> {}

property argType

argType?: ArgType;

property defaultValue

defaultValue?: T;

property name

name: string;

property onBlur

onBlur?: (evt: any) => void;

property onChange

onChange: (value: T) => T | void;

property onFocus

onFocus?: (evt: any) => void;

property value

value?: T;

interface DateConfig

interface DateConfig {}

interface DescriptionProps

interface DescriptionProps {}

property markdown

markdown: string;

interface DocsPageProps

interface DocsPageProps {}

property subtitle

subtitle?: string;

property title

title: string;

interface FieldProps

interface FieldProps {}

property label

label?: ReactNode;

interface FilesControlProps

interface FilesControlProps extends ControlProps<string[]> {}

property accept

accept?: string;

interface FlexBarProps

interface FlexBarProps {}

property backgroundColor

backgroundColor?: string;

property border

border?: boolean;

property children

children?: any;

interface IconButtonProps

interface IconButtonProps {}

property active

active?: boolean;

property disabled

disabled?: boolean;

interface IconItemProps

interface IconItemProps {}

property name

name: string;

interface IconsProps

interface IconsProps extends ComponentProps<typeof Svg> {}

property icon

icon?: IconKey;

property symbol

symbol?: IconKey;

interface IFrameProps

interface IFrameProps {}

property allowFullScreen

allowFullScreen: boolean;

property id

id: string;

property key

key?: string;

property scale

scale: number;

property src

src: string;

property style

style?: any;

property title

title: string;

interface InlineStoryProps

interface InlineStoryProps extends CommonProps {}

property parameters

parameters: Parameters;

property storyFn

storyFn: ElementType;

interface InputStyleProps

interface InputStyleProps {}

property align

align?: Alignments;

property height

height?: number;

property size

size?: Sizes;

property valid

valid?: ValidationStates;

interface ItemProps

interface ItemProps {}

property disabled

disabled?: boolean;

interface JsDocParam

interface JsDocParam {}

property description

description?: string;

property name

name: string;

interface JsDocReturns

interface JsDocReturns {}

property description

description?: string;

interface JsDocTags

interface JsDocTags {}

property params

params?: JsDocParam[];

property returns

returns?: JsDocReturns;

interface Link

interface Link extends Omit<ListItemProps, 'onClick'> {}

property id

id: string;

property isGatsby

isGatsby?: boolean;

property onClick

onClick?: (event: SyntheticEvent, item: ListItemProps) => void;

interface LinkInnerProps

interface LinkInnerProps {}

property containsIcon

containsIcon?: boolean;

property withArrow

withArrow?: boolean;

interface LinkProps

interface LinkProps extends LinkInnerProps, LinkStylesProps {}

property cancel

cancel?: boolean;

property className

className?: string;

property href

href?: string;

property onClick

onClick?: (e: MouseEvent) => void;

property style

style?: object;

interface LinkStylesProps

interface LinkStylesProps {}

property inverse

inverse?: boolean;

property isButton

isButton?: boolean;

property nochrome

nochrome?: boolean;

property secondary

secondary?: boolean;

property tertiary

tertiary?: boolean;

interface ListItemProps

interface ListItemProps
    extends Omit<ComponentProps<typeof Item>, 'href' | 'title'> {}

property active

active?: boolean;

property center

center?: ReactNode;

property disabled

disabled?: boolean;

property href

href?: string;

property left

left?: ReactNode;

property LinkWrapper

LinkWrapper?: LinkWrapperType;

property loading

loading?: boolean;

property right

right?: ReactNode;

property title

title?: ReactNode;

interface LoaderProps

interface LoaderProps {}

property error

error?: Error;

property progress

progress?: Progress;

property size

size?: number;

interface NormalizedOptionsConfig

interface NormalizedOptionsConfig {}

property options

options: OptionsObject;

interface NumberConfig

interface NumberConfig {}

property max

max?: number;

property min

min?: number;

property step

step?: number;

interface ObjectConfig

interface ObjectConfig {}

interface OptionsConfig

interface OptionsConfig {}

property labels

labels: Record<any, string>;

property options

options: Options;

property type

type: OptionsControlType;

interface PreviewProps

interface PreviewProps {}

property additionalActions

additionalActions?: ActionItem[];

property className

className?: string;

property columns

columns?: number;

property isColumn

isColumn?: boolean;

property isExpanded

isExpanded?: boolean;

property isLoading

isLoading?: true;

property withSource

withSource?: SourceProps;

property withToolbar

withToolbar?: boolean;

interface Progress

interface Progress {}

property message

message: string;

property modules

modules?: {
    complete: number;
    total: number;
};

property value

value: number;

interface PropSummaryValue

interface PropSummaryValue {}

property detail

detail?: string;

property required

required?: boolean;

property summary

summary: string;

interface ScrollAreaProps

interface ScrollAreaProps {}

property className

className?: string;

property horizontal

horizontal?: boolean;

property vertical

vertical?: boolean;

interface SeparatorProps

interface SeparatorProps {}

property force

force?: boolean;

interface SourceCodeProps

interface SourceCodeProps {}

property code

code?: string;

property dark

dark?: boolean;

property format

format?: ComponentProps<typeof SyntaxHighlighter>['format'];

property language

language?: string;

interface SourceErrorProps

interface SourceErrorProps {}

property error

error?: SourceError;

property isLoading

isLoading?: boolean;

interface SpacedProps

interface SpacedProps {}

property col

col?: number;

property outer

outer?: number | boolean;

property row

row?: number;

interface StorybookLogoProps

interface StorybookLogoProps {}

property alt

alt: string;

interface SvgProps

interface SvgProps {}

property inline

inline?: boolean;

interface SymbolsProps

interface SymbolsProps extends ComponentProps<typeof Svg> {}

property icons

icons?: IconKey[];

interface SyntaxHighlighterBaseProps

interface SyntaxHighlighterBaseProps {}

property codeTagProps

codeTagProps?: React.HTMLProps<HTMLElement>;

property customStyle

customStyle?: any;

property language

language?: string;

property lineNumberStyle

lineNumberStyle?: any;

property lineProps

lineProps?: lineTagPropsFunction | React.HTMLProps<HTMLElement>;

property showLineNumbers

showLineNumbers?: boolean;

property startingLineNumber

startingLineNumber?: number;

property style

style?: any;

property useInlineStyles

useInlineStyles?: boolean;

interface SyntaxHighlighterCustomProps

interface SyntaxHighlighterCustomProps {}

property bordered

bordered?: boolean;

property className

className?: string;

property copyable

copyable?: boolean;

property format

format?: SyntaxHighlighterFormatTypes;

property formatter

formatter?: (type: SyntaxHighlighterFormatTypes, source: string) => string;

property language

language: string;

property padded

padded?: boolean;

property renderer

renderer?: (props: SyntaxHighlighterRendererProps) => ReactNode;

interface SyntaxHighlighterRendererProps

interface SyntaxHighlighterRendererProps {}

property rows

rows: any[];

property stylesheet

stylesheet: string;

property useInlineStyles

useInlineStyles: boolean;

interface TabbedArgsTableProps

interface TabbedArgsTableProps {}

property sort

sort?: SortType;

property tabs

tabs: Record<string, ArgsTableProps>;

interface TabButtonProps

interface TabButtonProps {}

property active

active?: boolean;

property textColor

textColor?: string;

interface TableAnnotation

interface TableAnnotation {}

property category

category?: string;

property defaultValue

defaultValue?: PropDefaultValue;

property jsDocTags

jsDocTags?: JsDocTags;

property type

type: PropType;

interface TabsProps

interface TabsProps {}

property absolute

absolute?: boolean;

property actions

actions?: {
    onSelect: (id: string) => void;
} & Record<string, any>;

property backgroundColor

backgroundColor?: string;

property bordered

bordered?: boolean;

property id

id?: string;

property selected

selected?: string;

property tools

tools?: ReactNode;

interface TabsStateProps

interface TabsStateProps {}

property absolute

absolute: boolean;

property backgroundColor

backgroundColor: string;

property bordered

bordered: boolean;

property children

children: (ReactNode | FuncChildren)[];

property initial

initial: string;

interface TabsStateState

interface TabsStateState {}

property selected

selected: string;

interface TabWrapperProps

interface TabWrapperProps {}

property active

active: boolean;

property children

children?: ReactNode;

property render

render?: () => JSX.Element;

interface TextConfig

interface TextConfig {}

interface TooltipLinkListProps

interface TooltipLinkListProps {}

property links

links: Link[];

property LinkWrapper

LinkWrapper?: LinkWrapperType;

interface TooltipMessageProps

interface TooltipMessageProps {}

property desc

desc?: ReactNode;

property links

links?: {
    title: string;
    href?: string;
    onClick?: () => void;
}[];

property title

title?: ReactNode;

interface TooltipNoteProps

interface TooltipNoteProps {}

property note

note: string;

interface TypesetProps

interface TypesetProps {}

property fontFamily

fontFamily?: string;

property fontSizes

fontSizes: string[];

property fontWeight

fontWeight?: number;

property sampleText

sampleText?: string;

interface WithHideFn

interface WithHideFn {}

property onHide

onHide: () => void;

interface WithTooltipPureProps

interface WithTooltipPureProps {}

property children

children: ReactNode;

property closeOnClick

closeOnClick?: boolean;

property hasChrome

hasChrome?: boolean;

property modifiers

modifiers?: Array<Partial<Modifier<string, {}>>>;

property onDoubleClick

onDoubleClick?: () => void;

property onVisibilityChange

onVisibilityChange?: (visibility: boolean) => void | boolean;

property placement

placement?: Placement;

property svg

svg?: boolean;

property tooltip

tooltip: ReactNode | ((p: WithHideFn) => ReactNode);

property tooltipShown

tooltipShown?: boolean;

property trigger

trigger?: 'none' | 'hover' | 'click' | 'right-click';

Enums

enum ArgsTableError

enum ArgsTableError {
    NO_COMPONENT = 'No component found.',
    ARGS_UNSUPPORTED = 'Args unsupported. See Args documentation for your framework.',
}

member ARGS_UNSUPPORTED

ARGS_UNSUPPORTED = 'Args unsupported. See Args documentation for your framework.'

member NO_COMPONENT

NO_COMPONENT = 'No component found.'

enum SourceError

enum SourceError {
    NO_STORY = 'There\u2019s no story here.',
    SOURCE_UNAVAILABLE = 'Oh no! The source is not available.',
}

member NO_STORY

NO_STORY = 'There\u2019s no story here.'

member SOURCE_UNAVAILABLE

SOURCE_UNAVAILABLE = 'Oh no! The source is not available.'

enum StoryError

enum StoryError {
    NO_STORY = 'No component or story to display',
}

member NO_STORY

NO_STORY = 'No component or story to display'

Type Aliases

type Alignments

type Alignments = 'end' | 'center' | 'start';

type AProps

type AProps = AnchorHTMLAttributes<HTMLAnchorElement>;

type ArgsTableProps

type ArgsTableProps = ArgsTableOptionProps &
    (ArgsTableDataProps | ArgsTableErrorProps | ArgsTableLoadingProps);

type BooleanProps

type BooleanProps = ControlProps<BooleanValue> & BooleanConfig;

type BooleanValue

type BooleanValue = boolean;

type ColorControlProps

type ColorControlProps = ControlProps<ColorValue> & ColorConfig;

type ColorProps

type ColorProps = ColorControlProps;

type Colors

type Colors =
    | string[]
    | {
          [key: string]: string;
      };

type ColorValue

type ColorValue = string;

type Control

type Control =
    | BooleanConfig
    | ColorConfig
    | DateConfig
    | NumberConfig
    | ObjectConfig
    | OptionsConfig
    | RangeConfig
    | TextConfig;

type Controls

type Controls = Record<string, Control>;

type ControlType

type ControlType =
    | 'array'
    | 'boolean'
    | 'color'
    | 'date'
    | 'number'
    | 'range'
    | 'object'
    | OptionsControlType
    | 'text';

type DateProps

type DateProps = ControlProps<DateValue> & DateConfig;

type DateValue

type DateValue = Date | number;

type FuncChildren

type FuncChildren = () => void;

type Globals

type Globals = {
    [name: string]: any;
};

type IconKey

type IconKey = keyof typeof icons;

type IFrameStoryProps

type IFrameStoryProps = CommonProps;

type IZoomIFrameProps

type IZoomIFrameProps = {
    scale: number;
    children: ReactElement<HTMLIFrameElement>;
    iFrameRef: MutableRefObject<HTMLIFrameElement>;
    active?: boolean;
};

type lineTagPropsFunction

type lineTagPropsFunction = (lineNumber: number) => React.HTMLProps<HTMLElement>;

type LinkWrapperType

type LinkWrapperType = FunctionComponent<any>;

type NumberProps

type NumberProps = ControlProps<NumberValue | null> & NumberConfig;

type NumberValue

type NumberValue = number;

type ObjectProps

type ObjectProps = ControlProps<ObjectValue> &
    ObjectConfig & {
        theme: any;
    };

type ObjectValue

type ObjectValue = any;

type Options

type Options = OptionsArray | OptionsObject;

type OptionsArray

type OptionsArray = any[];

type OptionsControlType

type OptionsControlType =
    | 'radio'
    | 'inline-radio'
    | 'check'
    | 'inline-check'
    | 'select'
    | 'multi-select';

type OptionsMultiSelection

type OptionsMultiSelection = any[];

type OptionsObject

type OptionsObject = Record<string, any>;

type OptionsProps

type OptionsProps = ControlProps<OptionsSelection> & OptionsConfig;

type OptionsSelection

type OptionsSelection = OptionsSingleSelection | OptionsMultiSelection;

type OptionsSingleSelection

type OptionsSingleSelection = any;

type PresetColor

type PresetColor =
    | ColorValue
    | {
          color: ColorValue;
          title?: string;
      };

type PropDefaultValue

type PropDefaultValue = PropSummaryValue;

type PropType

type PropType = PropSummaryValue;

type RangeConfig

type RangeConfig = NumberConfig;

type RangeProps

type RangeProps = ControlProps<NumberValue | null> & RangeConfig;

type Sizes

type Sizes = '100%' | 'flex' | 'auto';

type SortType

type SortType = 'alpha' | 'requiredFirst' | 'none';

type SourceProps

type SourceProps = SourceErrorProps & SourceCodeProps;

type StoryProps

type StoryProps = InlineStoryProps | IFrameStoryProps;

type SyntaxHighlighterFormatTypes

type SyntaxHighlighterFormatTypes = boolean | 'dedent' | BuiltInParserName;

type SyntaxHighlighterProps

type SyntaxHighlighterProps = SyntaxHighlighterBaseProps &
    SyntaxHighlighterCustomProps;

type TextProps

type TextProps = ControlProps<TextValue | undefined> & TextConfig;

type TextValue

type TextValue = string;

type ValidationStates

type ValidationStates = 'valid' | 'error' | 'warn';

type ZoomProps

type ZoomProps = {
    scale: number;
    children: ReactElement | ReactElement[];
};

Package Files (1)

dist/ts3.9/index.d.ts

Peer Dependencies (2)

react
react-dom

Badge

To add a badge like this oneto your package's README, use the codes available below.

You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/@storybook/components.

Markdown

[![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/@storybook/components)

HTML

<a href="https://www.jsdocs.io/package/@storybook/components"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>

Updated just now.
Package analyzed in 6225 ms.
Missing or incorrect documentation? Open an issue for this package.