@storybook/components

@storybook/components

Version 8.0.9
Published 2 days ago
2.96 MB
9 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: _storybook_theming.StyledComponent<any, {}, {}>;

variable afterMain

const afterMain: string;

variable afterRead

const afterRead: string;

variable afterWrite

const afterWrite: string;

variable Bar

const Bar: _storybook_theming.StyledComponent<
    UnstyledBarProps & { theme?: _storybook_theming.Theme } & BarProps,
    {},
    {}
>;

variable beforeMain

const beforeMain: string;

variable beforeRead

const beforeRead: string;

variable beforeWrite

const beforeWrite: string;

variable Blockquote

const Blockquote: _storybook_theming.StyledComponent<
    {
        theme?: _storybook_theming.Theme;
        as?: react.ElementType<any, string | number | symbol>;
    },
    react.DetailedHTMLProps<
        react.BlockquoteHTMLAttributes<HTMLQuoteElement>,
        HTMLQuoteElement
    >,
    {}
>;

variable bottom

const bottom: string;

variable Button

const Button: react__default.ForwardRefExoticComponent<any>;

variable codeCommon

const codeCommon: FunctionInterpolation;

variable components

const components: {
    h1: (
        props: react.DetailedHTMLProps<
            react.HTMLAttributes<HTMLHeadingElement>,
            HTMLHeadingElement
        >
    ) => react.JSX.Element;
    h2: (
        props: react.DetailedHTMLProps<
            react.HTMLAttributes<HTMLHeadingElement>,
            HTMLHeadingElement
        >
    ) => react.JSX.Element;
    h3: (
        props: react.DetailedHTMLProps<
            react.HTMLAttributes<HTMLHeadingElement>,
            HTMLHeadingElement
        >
    ) => react.JSX.Element;
    h4: (
        props: react.DetailedHTMLProps<
            react.HTMLAttributes<HTMLHeadingElement>,
            HTMLHeadingElement
        >
    ) => react.JSX.Element;
    h5: (
        props: react.DetailedHTMLProps<
            react.HTMLAttributes<HTMLHeadingElement>,
            HTMLHeadingElement
        >
    ) => react.JSX.Element;
    h6: (
        props: react.DetailedHTMLProps<
            react.HTMLAttributes<HTMLHeadingElement>,
            HTMLHeadingElement
        >
    ) => react.JSX.Element;
    pre: (
        props: react.DetailedHTMLProps<
            react.HTMLAttributes<HTMLPreElement>,
            HTMLPreElement
        >
    ) => react.JSX.Element;
    a: (
        props: react.DetailedHTMLProps<
            react.AnchorHTMLAttributes<HTMLAnchorElement>,
            HTMLAnchorElement
        >
    ) => react.JSX.Element;
    hr: (
        props: react.DetailedHTMLProps<
            react.HTMLAttributes<HTMLHRElement>,
            HTMLHRElement
        >
    ) => react.JSX.Element;
    dl: (
        props: react.DetailedHTMLProps<
            react.HTMLAttributes<HTMLDListElement>,
            HTMLDListElement
        >
    ) => react.JSX.Element;
    blockquote: (
        props: react.DetailedHTMLProps<
            react.BlockquoteHTMLAttributes<HTMLElement>,
            HTMLElement
        >
    ) => react.JSX.Element;
    table: (
        props: react.DetailedHTMLProps<
            react.TableHTMLAttributes<HTMLTableElement>,
            HTMLTableElement
        >
    ) => react.JSX.Element;
    img: (
        props: react.DetailedHTMLProps<
            react.ImgHTMLAttributes<HTMLImageElement>,
            HTMLImageElement
        >
    ) => react.JSX.Element;
    div: (
        props: react.DetailedHTMLProps<
            react.HTMLAttributes<HTMLDivElement>,
            HTMLDivElement
        >
    ) => react.JSX.Element;
    span: (
        props: react.DetailedHTMLProps<
            react.HTMLAttributes<HTMLSpanElement>,
            HTMLSpanElement
        >
    ) => react.JSX.Element;
    li: (
        props: react.DetailedHTMLProps<
            react.LiHTMLAttributes<HTMLLIElement>,
            HTMLLIElement
        >
    ) => react.JSX.Element;
    ul: (
        props: react.DetailedHTMLProps<
            react.HTMLAttributes<HTMLUListElement>,
            HTMLUListElement
        >
    ) => react.JSX.Element;
    ol: (
        props: react.DetailedHTMLProps<
            react.OlHTMLAttributes<HTMLOListElement>,
            HTMLOListElement
        >
    ) => react.JSX.Element;
    p: (
        props: react.DetailedHTMLProps<
            react.HTMLAttributes<HTMLParagraphElement>,
            HTMLParagraphElement
        >
    ) => react.JSX.Element;
    code: (
        props: react.DetailedHTMLProps<
            react.HTMLAttributes<HTMLElement>,
            HTMLElement
        >
    ) => react.JSX.Element;
    tt: (
        props: react.DetailedHTMLProps<
            react.HTMLAttributes<HTMLTitleElement>,
            HTMLTitleElement
        >
    ) => react.JSX.Element;
    resetwrapper: (
        props: react.DetailedHTMLProps<
            react.HTMLAttributes<HTMLDivElement>,
            HTMLDivElement
        >
    ) => react.JSX.Element;
};

variable DefaultCodeBlock

const DefaultCodeBlock: _storybook_theming.StyledComponent<
    {
        theme?: _storybook_theming.Theme;
        as?: react__default.ElementType<any, string | number | symbol>;
    },
    react__default.DetailedHTMLProps<
        react__default.HTMLAttributes<HTMLElement>,
        HTMLElement
    >,
    {}
>;

variable Div

const Div: _storybook_theming.StyledComponent<
    {
        theme?: _storybook_theming.Theme;
        as?: react.ElementType<any, string | number | symbol>;
    },
    react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>,
    {}
>;

variable DL

const DL: _storybook_theming.StyledComponent<
    {
        theme?: _storybook_theming.Theme;
        as?: react.ElementType<any, string | number | symbol>;
    },
    react.DetailedHTMLProps<
        react.HTMLAttributes<HTMLDListElement>,
        HTMLDListElement
    >,
    {}
>;

variable DocumentWrapper

const DocumentWrapper: _storybook_theming.StyledComponent<
    {
        theme?: _storybook_theming.Theme;
        as?: react.ElementType<any, string | number | symbol>;
    },
    react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>,
    {}
>;

variable FlexBar

const FlexBar: {
    ({
        children,
        backgroundColor,
        className,
        ...rest
    }: FlexBarProps): react__default.JSX.Element;
    displayName: string;
};

variable Form

const Form: any;

variable H1

const H1: _storybook_theming.StyledComponent<
    {
        theme?: _storybook_theming.Theme;
        as?: react.ElementType<any, string | number | symbol>;
    },
    react.DetailedHTMLProps<
        react.HTMLAttributes<HTMLHeadingElement>,
        HTMLHeadingElement
    >,
    {}
>;

variable H2

const H2: _storybook_theming.StyledComponent<
    {
        theme?: _storybook_theming.Theme;
        as?: react.ElementType<any, string | number | symbol>;
    },
    react.DetailedHTMLProps<
        react.HTMLAttributes<HTMLHeadingElement>,
        HTMLHeadingElement
    >,
    {}
>;

variable H3

const H3: _storybook_theming.StyledComponent<
    {
        theme?: _storybook_theming.Theme;
        as?: react.ElementType<any, string | number | symbol>;
    },
    react.DetailedHTMLProps<
        react.HTMLAttributes<HTMLHeadingElement>,
        HTMLHeadingElement
    >,
    {}
>;

variable H4

const H4: _storybook_theming.StyledComponent<
    {
        theme?: _storybook_theming.Theme;
        as?: react.ElementType<any, string | number | symbol>;
    },
    react.DetailedHTMLProps<
        react.HTMLAttributes<HTMLHeadingElement>,
        HTMLHeadingElement
    >,
    {}
>;

variable H5

const H5: _storybook_theming.StyledComponent<
    {
        theme?: _storybook_theming.Theme;
        as?: react.ElementType<any, string | number | symbol>;
    },
    react.DetailedHTMLProps<
        react.HTMLAttributes<HTMLHeadingElement>,
        HTMLHeadingElement
    >,
    {}
>;

variable H6

const H6: _storybook_theming.StyledComponent<
    {
        theme?: _storybook_theming.Theme;
        as?: react.ElementType<any, string | number | symbol>;
    },
    react.DetailedHTMLProps<
        react.HTMLAttributes<HTMLHeadingElement>,
        HTMLHeadingElement
    >,
    {}
>;

variable HR

const HR: _storybook_theming.StyledComponent<
    {
        theme?: _storybook_theming.Theme;
        as?: react.ElementType<any, string | number | symbol>;
    },
    react.DetailedHTMLProps<react.HTMLAttributes<HTMLHRElement>, HTMLHRElement>,
    {}
>;

variable IconButton

const IconButton: react__default.ForwardRefExoticComponent<any>;

variable icons

const icons: {
    readonly user: 'UserIcon';
    readonly useralt: 'UserAltIcon';
    readonly useradd: 'UserAddIcon';
    readonly users: 'UsersIcon';
    readonly profile: 'ProfileIcon';
    readonly facehappy: 'FaceHappyIcon';
    readonly faceneutral: 'FaceNeutralIcon';
    readonly facesad: 'FaceSadIcon';
    readonly accessibility: 'AccessibilityIcon';
    readonly accessibilityalt: 'AccessibilityAltIcon';
    readonly arrowup: 'ChevronUpIcon';
    readonly arrowdown: 'ChevronDownIcon';
    readonly arrowleft: 'ChevronLeftIcon';
    readonly arrowright: 'ChevronRightIcon';
    readonly arrowupalt: 'ArrowUpIcon';
    readonly arrowdownalt: 'ArrowDownIcon';
    readonly arrowleftalt: 'ArrowLeftIcon';
    readonly arrowrightalt: 'ArrowRightIcon';
    readonly expandalt: 'ExpandAltIcon';
    readonly collapse: 'CollapseIcon';
    readonly expand: 'ExpandIcon';
    readonly unfold: 'UnfoldIcon';
    readonly transfer: 'TransferIcon';
    readonly redirect: 'RedirectIcon';
    readonly undo: 'UndoIcon';
    readonly reply: 'ReplyIcon';
    readonly sync: 'SyncIcon';
    readonly upload: 'UploadIcon';
    readonly download: 'DownloadIcon';
    readonly back: 'BackIcon';
    readonly proceed: 'ProceedIcon';
    readonly refresh: 'RefreshIcon';
    readonly globe: 'GlobeIcon';
    readonly compass: 'CompassIcon';
    readonly location: 'LocationIcon';
    readonly pin: 'PinIcon';
    readonly time: 'TimeIcon';
    readonly dashboard: 'DashboardIcon';
    readonly timer: 'TimerIcon';
    readonly home: 'HomeIcon';
    readonly admin: 'AdminIcon';
    readonly info: 'InfoIcon';
    readonly question: 'QuestionIcon';
    readonly support: 'SupportIcon';
    readonly alert: 'AlertIcon';
    readonly email: 'EmailIcon';
    readonly phone: 'PhoneIcon';
    readonly link: 'LinkIcon';
    readonly unlink: 'LinkBrokenIcon';
    readonly bell: 'BellIcon';
    readonly rss: 'RSSIcon';
    readonly sharealt: 'ShareAltIcon';
    readonly share: 'ShareIcon';
    readonly circle: 'CircleIcon';
    readonly circlehollow: 'CircleHollowIcon';
    readonly bookmarkhollow: 'BookmarkHollowIcon';
    readonly bookmark: 'BookmarkIcon';
    readonly hearthollow: 'HeartHollowIcon';
    readonly heart: 'HeartIcon';
    readonly starhollow: 'StarHollowIcon';
    readonly star: 'StarIcon';
    readonly certificate: 'CertificateIcon';
    readonly verified: 'VerifiedIcon';
    readonly thumbsup: 'ThumbsUpIcon';
    readonly shield: 'ShieldIcon';
    readonly basket: 'BasketIcon';
    readonly beaker: 'BeakerIcon';
    readonly hourglass: 'HourglassIcon';
    readonly flag: 'FlagIcon';
    readonly cloudhollow: 'CloudHollowIcon';
    readonly edit: 'EditIcon';
    readonly cog: 'CogIcon';
    readonly nut: 'NutIcon';
    readonly wrench: 'WrenchIcon';
    readonly ellipsis: 'EllipsisIcon';
    readonly check: 'CheckIcon';
    readonly form: 'FormIcon';
    readonly batchdeny: 'BatchDenyIcon';
    readonly batchaccept: 'BatchAcceptIcon';
    readonly controls: 'ControlsIcon';
    readonly plus: 'PlusIcon';
    readonly closeAlt: 'CloseAltIcon';
    readonly cross: 'CrossIcon';
    readonly trash: 'TrashIcon';
    readonly pinalt: 'PinAltIcon';
    readonly unpin: 'UnpinIcon';
    readonly add: 'AddIcon';
    readonly subtract: 'SubtractIcon';
    readonly close: 'CloseIcon';
    readonly delete: 'DeleteIcon';
    readonly passed: 'PassedIcon';
    readonly changed: 'ChangedIcon';
    readonly failed: 'FailedIcon';
    readonly clear: 'ClearIcon';
    readonly comment: 'CommentIcon';
    readonly commentadd: 'CommentAddIcon';
    readonly requestchange: 'RequestChangeIcon';
    readonly comments: 'CommentsIcon';
    readonly lock: 'LockIcon';
    readonly unlock: 'UnlockIcon';
    readonly key: 'KeyIcon';
    readonly outbox: 'OutboxIcon';
    readonly credit: 'CreditIcon';
    readonly button: 'ButtonIcon';
    readonly type: 'TypeIcon';
    readonly pointerdefault: 'PointerDefaultIcon';
    readonly pointerhand: 'PointerHandIcon';
    readonly browser: 'BrowserIcon';
    readonly tablet: 'TabletIcon';
    readonly mobile: 'MobileIcon';
    readonly watch: 'WatchIcon';
    readonly sidebar: 'SidebarIcon';
    readonly sidebaralt: 'SidebarAltIcon';
    readonly sidebaralttoggle: 'SidebarAltToggleIcon';
    readonly sidebartoggle: 'SidebarToggleIcon';
    readonly bottombar: 'BottomBarIcon';
    readonly bottombartoggle: 'BottomBarToggleIcon';
    readonly cpu: 'CPUIcon';
    readonly database: 'DatabaseIcon';
    readonly memory: 'MemoryIcon';
    readonly structure: 'StructureIcon';
    readonly box: 'BoxIcon';
    readonly power: 'PowerIcon';
    readonly photo: 'PhotoIcon';
    readonly component: 'ComponentIcon';
    readonly grid: 'GridIcon';
    readonly outline: 'OutlineIcon';
    readonly photodrag: 'PhotoDragIcon';
    readonly search: 'SearchIcon';
    readonly zoom: 'ZoomIcon';
    readonly zoomout: 'ZoomOutIcon';
    readonly zoomreset: 'ZoomResetIcon';
    readonly eye: 'EyeIcon';
    readonly eyeclose: 'EyeCloseIcon';
    readonly lightning: 'LightningIcon';
    readonly lightningoff: 'LightningOffIcon';
    readonly contrast: 'ContrastIcon';
    readonly switchalt: 'SwitchAltIcon';
    readonly mirror: 'MirrorIcon';
    readonly grow: 'GrowIcon';
    readonly paintbrush: 'PaintBrushIcon';
    readonly ruler: 'RulerIcon';
    readonly stop: 'StopIcon';
    readonly camera: 'CameraIcon';
    readonly video: 'VideoIcon';
    readonly speaker: 'SpeakerIcon';
    readonly play: 'PlayIcon';
    readonly playback: 'PlayBackIcon';
    readonly playnext: 'PlayNextIcon';
    readonly rewind: 'RewindIcon';
    readonly fastforward: 'FastForwardIcon';
    readonly stopalt: 'StopAltIcon';
    readonly sidebyside: 'SideBySideIcon';
    readonly stacked: 'StackedIcon';
    readonly sun: 'SunIcon';
    readonly moon: 'MoonIcon';
    readonly book: 'BookIcon';
    readonly document: 'DocumentIcon';
    readonly copy: 'CopyIcon';
    readonly category: 'CategoryIcon';
    readonly folder: 'FolderIcon';
    readonly print: 'PrintIcon';
    readonly graphline: 'GraphLineIcon';
    readonly calendar: 'CalendarIcon';
    readonly graphbar: 'GraphBarIcon';
    readonly menu: 'MenuIcon';
    readonly menualt: 'MenuIcon';
    readonly filter: 'FilterIcon';
    readonly docchart: 'DocChartIcon';
    readonly doclist: 'DocListIcon';
    readonly markup: 'MarkupIcon';
    readonly bold: 'BoldIcon';
    readonly paperclip: 'PaperClipIcon';
    readonly listordered: 'ListOrderedIcon';
    readonly listunordered: 'ListUnorderedIcon';
    readonly paragraph: 'ParagraphIcon';
    readonly markdown: 'MarkdownIcon';
    readonly repository: 'RepoIcon';
    readonly commit: 'CommitIcon';
    readonly branch: 'BranchIcon';
    readonly pullrequest: 'PullRequestIcon';
    readonly merge: 'MergeIcon';
    readonly apple: 'AppleIcon';
    readonly linux: 'LinuxIcon';
    readonly ubuntu: 'UbuntuIcon';
    readonly windows: 'WindowsIcon';
    readonly storybook: 'StorybookIcon';
    readonly azuredevops: 'AzureDevOpsIcon';
    readonly bitbucket: 'BitbucketIcon';
    readonly chrome: 'ChromeIcon';
    readonly chromatic: 'ChromaticIcon';
    readonly componentdriven: 'ComponentDrivenIcon';
    readonly discord: 'DiscordIcon';
    readonly facebook: 'FacebookIcon';
    readonly figma: 'FigmaIcon';
    readonly gdrive: 'GDriveIcon';
    readonly github: 'GithubIcon';
    readonly gitlab: 'GitlabIcon';
    readonly google: 'GoogleIcon';
    readonly graphql: 'GraphqlIcon';
    readonly medium: 'MediumIcon';
    readonly redux: 'ReduxIcon';
    readonly twitter: 'TwitterIcon';
    readonly youtube: 'YoutubeIcon';
    readonly vscode: 'VSCodeIcon';
};

variable Img

const Img: _storybook_theming.StyledComponent<
    {
        theme?: _storybook_theming.Theme;
        as?: react.ElementType<any, string | number | symbol>;
    },
    react.DetailedHTMLProps<
        react.ImgHTMLAttributes<HTMLImageElement>,
        HTMLImageElement
    >,
    {}
>;

variable Item

const Item: _storybook_theming.StyledComponent<
    {
        theme?: _storybook_theming.Theme;
        as?: react__default.ElementType<any, string | number | symbol>;
    } & ItemProps,
    react__default.DetailedHTMLProps<
        react__default.AnchorHTMLAttributes<HTMLAnchorElement>,
        HTMLAnchorElement
    >,
    {}
>;

variable LazySyntaxHighlighter

const LazySyntaxHighlighter: react__default.LazyExoticComponent<
    (
        props: SyntaxHighlighterBaseProps & SyntaxHighlighterCustomProps
    ) => react__default.JSX.Element
>;

variable LazySyntaxHighlighterWithFormatter

const LazySyntaxHighlighterWithFormatter: react__default.LazyExoticComponent<
    (
        props: SyntaxHighlighterBaseProps & SyntaxHighlighterCustomProps
    ) => react__default.JSX.Element
>;

variable LazyWithTooltip

const LazyWithTooltip: react__default.LazyExoticComponent<
    ({
        startOpen,
        onVisibleChange: onChange,
        ...rest
    }: WithTooltipStateProps) => react__default.JSX.Element
>;

variable LazyWithTooltipPure

const LazyWithTooltipPure: react__default.LazyExoticComponent<{
    ({
        svg,
        trigger,
        closeOnOutsideClick,
        placement,
        hasChrome,
        withArrows,
        offset,
        tooltip,
        children,
        closeOnTriggerHidden,
        mutationObserverOptions,
        defaultVisible,
        delayHide,
        visible,
        interactive,
        delayShow,
        modifiers,
        strategy,
        followCursor,
        onVisibleChange,
        ...props
    }: WithTooltipPureProps): react__default.JSX.Element;
    defaultProps: {
        svg: boolean;
        trigger: string;
        closeOnOutsideClick: boolean;
        placement: string;
        modifiers: (
            | { name: string; options: { padding: number; offset?: undefined } }
            | { name: string; options: { offset: number[]; padding?: undefined } }
        )[];
        hasChrome: boolean;
        defaultVisible: boolean;
    };
}>;

variable left

const left: string;

variable LI

const LI: _storybook_theming.StyledComponent<
    {
        theme?: _storybook_theming.Theme;
        as?: react.ElementType<any, string | number | symbol>;
    },
    react.DetailedHTMLProps<react.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>,
    {}
>;

variable ListItem

const ListItem: {
    ({
        loading,
        title,
        center,
        right,
        icon,
        active,
        disabled,
        isIndented,
        href,
        onClick,
        LinkWrapper,
        ...rest
    }: ListItemProps): react__default.JSX.Element;
    defaultProps: {
        loading: boolean;
        title: react__default.JSX.Element;
        center: any;
        right: any;
        active: boolean;
        disabled: boolean;
        href: any;
        LinkWrapper: any;
        onClick: any;
    };
};

variable main

const main: string;

variable OL

const OL: _storybook_theming.StyledComponent<
    {
        theme?: _storybook_theming.Theme;
        as?: react.ElementType<any, string | number | symbol>;
    },
    react.DetailedHTMLProps<
        react.OlHTMLAttributes<HTMLOListElement>,
        HTMLOListElement
    >,
    {}
>;

variable P

const P: _storybook_theming.StyledComponent<
    {
        theme?: _storybook_theming.Theme;
        as?: react.ElementType<any, string | number | symbol>;
    },
    react.DetailedHTMLProps<
        react.HTMLAttributes<HTMLParagraphElement>,
        HTMLParagraphElement
    >,
    {}
>;

variable Pre

const Pre: _storybook_theming.StyledComponent<
    {
        theme?: _storybook_theming.Theme;
        as?: react.ElementType<any, string | number | symbol>;
    },
    react.DetailedHTMLProps<react.HTMLAttributes<HTMLPreElement>, HTMLPreElement>,
    {}
>;

variable read

const read: string;

variable resetComponents

const resetComponents: Record<string, ElementType>;

variable ResetWrapper

const ResetWrapper: _storybook_theming.StyledComponent<
    {
        theme?: _storybook_theming.Theme;
        as?: react.ElementType<any, string | number | symbol>;
    },
    react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>,
    {}
>;

This is a "local" reset to style subtrees with Storybook styles
We can't style individual elements (e.g. h1, h2, etc.) in here because the CSS specificity is too high, so those styles can too easily override child elements that are not expecting it.

variable right

const right: string;

variable Separator

const Separator: _storybook_theming.StyledComponent<
    {
        theme?: _storybook_theming.Theme;
        as?: react__default.ElementType<any, string | number | symbol>;
    } & SeparatorProps,
    react__default.DetailedHTMLProps<
        react__default.HTMLAttributes<HTMLSpanElement>,
        HTMLSpanElement
    >,
    {}
>;

variable Span

const Span: _storybook_theming.StyledComponent<
    {
        theme?: _storybook_theming.Theme;
        as?: react.ElementType<any, string | number | symbol>;
    },
    react.DetailedHTMLProps<react.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>,
    {}
>;

variable supportedLanguages

const supportedLanguages: {
    jsextra: any;
    jsx: any;
    json: any;
    yml: any;
    md: any;
    bash: any;
    css: any;
    html: any;
    tsx: any;
    typescript: any;
    graphql: any;
};

variable Svg

const Svg: _storybook_theming.StyledComponent<
    {
        theme?: _storybook_theming.Theme;
        as?: react__default.ElementType<any, string | number | symbol>;
    },
    react__default.SVGProps<SVGSVGElement>,
    {}
>;

variable Symbols

const Symbols: react__default.NamedExoticComponent<SymbolsProps>;

Deprecated
No longer used, will be removed in Storybook 9.0 Please use the @storybook/icons package instead.

variable SyntaxHighlighter

const SyntaxHighlighter: {
    (
        props:
            | ComponentProps<typeof LazySyntaxHighlighter>
            | ComponentProps<typeof LazySyntaxHighlighterWithFormatter>
    ): react__default.JSX.Element;
    registerLanguage(name: string, func: any): void;
};

variable TabBar

const TabBar: _storybook_theming.StyledComponent<
    {
        theme?: _storybook_theming.Theme;
        as?: react__default.ElementType<any, string | number | symbol>;
    },
    react__default.DetailedHTMLProps<
        react__default.HTMLAttributes<HTMLDivElement>,
        HTMLDivElement
    >,
    {}
>;

variable TabButton

const TabButton: _storybook_theming.StyledComponent<any, {}, {}>;

variable Table

const Table: _storybook_theming.StyledComponent<
    {
        theme?: _storybook_theming.Theme;
        as?: react.ElementType<any, string | number | symbol>;
    },
    react.DetailedHTMLProps<
        react.TableHTMLAttributes<HTMLTableElement>,
        HTMLTableElement
    >,
    {}
>;

variable Tabs

const Tabs: FC<TabsProps>;

variable TabWrapper

const TabWrapper: FC<TabWrapperProps>;

variable TargetContainer

const TargetContainer: _storybook_theming.StyledComponent<
    {
        theme?: _storybook_theming.Theme;
        as?: react__default.ElementType<any, string | number | symbol>;
    } & { trigger: Config['trigger'] },
    react__default.DetailedHTMLProps<
        react__default.HTMLAttributes<HTMLDivElement>,
        HTMLDivElement
    >,
    {}
>;

variable TooltipLinkList

const TooltipLinkList: {
    ({ links, LinkWrapper }: TooltipLinkListProps): react__default.JSX.Element;
    defaultProps: { LinkWrapper: any };
};

variable TooltipMessage

const TooltipMessage: {
    ({ title, desc, links }: TooltipMessageProps): react__default.JSX.Element;
    defaultProps: { title: any; desc: any; links: any };
};

variable top

const top: string;

variable TT

const TT: _storybook_theming.StyledComponent<
    {
        theme?: _storybook_theming.Theme;
        as?: react.ElementType<any, string | number | symbol>;
    },
    react.DetailedHTMLProps<
        react.HTMLAttributes<HTMLTitleElement>,
        HTMLTitleElement
    >,
    {}
>;

variable UL

const UL: _storybook_theming.StyledComponent<
    {
        theme?: _storybook_theming.Theme;
        as?: react.ElementType<any, string | number | symbol>;
    },
    react.DetailedHTMLProps<
        react.HTMLAttributes<HTMLUListElement>,
        HTMLUListElement
    >,
    {}
>;

variable withReset

const withReset: FunctionInterpolation;

variable write

const write: string;

variable Zoom

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

Functions

function ActionBar

ActionBar: ({
    actionItems,
    ...props
}: ActionBarProps) => react__default.JSX.Element;

function AddonPanel

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

function Badge

Badge: ({ ...props }: BadgeProps) => react__default.JSX.Element;

function ClipboardCode

ClipboardCode: ({
    code,
    ...props
}: ClipboardCodeProps) => react__default.JSX.Element;

function Code

Code: ({
    className,
    children,
    ...props
}: ComponentProps<
    _storybook_theming.StyledComponent<
        {
            theme?: _storybook_theming.Theme;
            as?: react__default.ElementType<any, string | number | symbol>;
        },
        react__default.DetailedHTMLProps<
            react__default.HTMLAttributes<HTMLElement>,
            HTMLElement
        >,
        {}
    >
>) => react__default.JSX.Element;

function createCopyToClipboardFunction

createCopyToClipboardFunction: () => (text: string) => Promise<void>;

function createPopper

createPopper: <TModifier extends Partial<Modifier<any, any>>>(
    reference: Element | VirtualElement,
    popper: HTMLElement,
    options?: Partial<OptionsGeneric<TModifier>>
) => Instance;

function EmptyTabContent

EmptyTabContent: ({
    title,
    description,
    footer,
}: Props) => react__default.JSX.Element;

function ErrorFormatter

ErrorFormatter: ({ error }: ErrorFormatterProps) => react__default.JSX.Element;

function getStoryHref

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

function IconButtonSkeleton

IconButtonSkeleton: () => react__default.JSX.Element;

Deprecated
This component will be removed in Storybook 9.0

function Icons

Icons: ({
    icon,
    useSymbol,
    __suppressDeprecationWarning,
    ...props
}: IconsProps) => react__default.JSX.Element;

Deprecated
No longer used, will be removed in Storybook 9.0 Please use the @storybook/icons package instead.

function interleaveSeparators

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

function Link

Link: ({
    cancel,
    children,
    onClick,
    withArrow,
    containsIcon,
    className,
    style,
    ...rest
}: LinkProps$1) => react__default.JSX.Element;

function Loader

Loader: ({
    progress,
    error,
    size,
    ...props
}: LoaderProps) => react__default.JSX.Element;

function nameSpaceClassNames

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

function Placeholder

Placeholder: ({
    children,
    ...props
}: PlaceholderProps) => react__default.JSX.Element;

function ScrollArea

ScrollArea: ({
    children,
    horizontal,
    vertical,
    offset,
    scrollbarSize,
    className,
}: ScrollAreaProps) => react__default.JSX.Element;

function Spaced

Spaced: ({
    col,
    row,
    outer,
    children,
    ...rest
}: SpacedProps) => react__default.JSX.Element;

function StorybookIcon

StorybookIcon: (
    props: react__default.SVGAttributes<SVGElement>
) => react__default.JSX.Element;

function StorybookLogo

StorybookLogo: ({
    alt,
    ...props
}: StorybookLogoProps) => react__default.JSX.Element;

function TooltipNote

TooltipNote: ({
    note,
    ...props
}: TooltipNoteProps) => react__default.JSX.Element;

function WithTooltip

WithTooltip: (
    props: ComponentProps<
        react__default.LazyExoticComponent<
            ({
                startOpen,
                onVisibleChange: onChange,
                ...rest
            }: WithTooltipStateProps) => react__default.JSX.Element
        >
    >
) => react__default.JSX.Element;

function WithTooltipPure

WithTooltipPure: (
    props: ComponentProps<
        react__default.LazyExoticComponent<{
            ({
                svg,
                trigger,
                closeOnOutsideClick,
                placement,
                hasChrome,
                withArrows,
                offset,
                tooltip,
                children,
                closeOnTriggerHidden,
                mutationObserverOptions,
                defaultVisible,
                delayHide,
                visible,
                interactive,
                delayShow,
                modifiers,
                strategy,
                followCursor,
                onVisibleChange,
                ...props
            }: WithTooltipPureProps): react__default.JSX.Element;
            defaultProps: {
                svg: boolean;
                trigger: string;
                closeOnOutsideClick: boolean;
                placement: string;
                modifiers: (
                    | {
                          name: string;
                          options: { padding: number; offset?: undefined };
                      }
                    | {
                          name: string;
                          options: { offset: number[]; padding?: undefined };
                      }
                )[];
                hasChrome: boolean;
                defaultVisible: boolean;
            };
        }>
    >
) => react__default.JSX.Element;

function ZoomElement

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

Classes

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: () => react__default.JSX.Element;

Interfaces

interface ActionItem

interface ActionItem {}

property className

className?: string;

property disabled

disabled?: boolean;

property onClick

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

property title

title: string | ReactElement;

interface IconsProps

interface IconsProps extends ComponentProps<typeof Svg> {}

property icon

icon: IconType;

property onClick

onClick?: () => void;

property useSymbol

useSymbol?: boolean;

interface SyntaxHighlighterRendererProps

interface SyntaxHighlighterRendererProps {}

property rows

rows: any[];

property stylesheet

stylesheet: string;

property useInlineStyles

useInlineStyles: boolean;

interface TooltipLinkListLink

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

property id

id: string;

property isGatsby

isGatsby?: boolean;

property onClick

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

Type Aliases

type SupportedLanguage

type SupportedLanguage = 'text' | keyof typeof supportedLanguages;

type SyntaxHighlighterFormatTypes

type SyntaxHighlighterFormatTypes = boolean | 'dedent' | BuiltInParserName;

type SyntaxHighlighterProps

type SyntaxHighlighterProps = SyntaxHighlighterBaseProps &
    SyntaxHighlighterCustomProps;

Package Files (1)

dist/index.d.ts

Dependencies (9)

Dev Dependencies (14)

Peer Dependencies (2)

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 2 days ago.
Package analyzed in 3546 ms.
Missing or incorrect documentation? Open an issue for this package.

@storybook/components

Install

Overview

Index

Variables

Functions

Classes

Interfaces

Type Aliases

Variables

variable A

variable afterMain

variable afterRead

variable afterWrite

variable Bar

variable beforeMain

variable beforeRead

variable beforeWrite

variable Blockquote

variable bottom

variable Button

variable codeCommon

variable components

variable DefaultCodeBlock

variable Div

variable DL

variable DocumentWrapper

variable FlexBar

variable Form

variable H1

variable H2

variable H3

variable H4

variable H5

variable H6

variable HR

variable IconButton

variable icons

variable Img

variable Item

variable LazySyntaxHighlighter

variable LazySyntaxHighlighterWithFormatter

variable LazyWithTooltip

variable LazyWithTooltipPure

variable left

variable LI

variable ListItem

variable main

variable OL

variable P

variable Pre

variable read

variable resetComponents

variable ResetWrapper

variable right

variable Separator

variable Span

variable supportedLanguages

variable Svg

variable Symbols

Deprecated

variable SyntaxHighlighter

variable TabBar

variable TabButton

variable Table

variable Tabs

variable TabWrapper

variable TargetContainer

variable TooltipLinkList

variable TooltipMessage

variable top

variable TT

variable UL

variable withReset

variable write

variable Zoom

Functions

function ActionBar

function AddonPanel

function Badge