@storybook/components
- Version 6.5.16
- Published
- 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
- A
- ActionBar
- ArgsTable
- argsTableLoadingData
- Badge
- Bar
- Blockquote
- BooleanControl
- Button
- ButtonWrapper
- ColorItem
- ColorPalette
- components
- DateControl
- DefaultCodeBlock
- Description
- Div
- DL
- DocsContent
- DocsPageWrapper
- DocsWrapper
- DocumentWrapper
- FilesControl
- FlexBar
- Form
- H1
- H2
- H3
- H4
- H5
- H6
- HR
- IconButton
- IconGallery
- IconItem
- icons
- Icons
- Img
- Item
- LazyColorControl
- LazySyntaxHighlighter
- LazyWithTooltip
- LazyWithTooltipPure
- LI
- Link
- Loader
- NumberControl
- ObjectControl
- OL
- OptionsControl
- P
- Placeholder
- Pre
- Preview
- ProgressWrapper
- PureLoader
- RangeControl
- resetComponents
- ScrollArea
- Separator
- Source
- Spaced
- Span
- Story
- StorybookIcon
- StorybookLogo
- StyledSyntaxHighlighter
- Subtitle
- Svg
- Symbols
- TabBar
- TabbedArgsTable
- TabButton
- Table
- TableWrapper
- Tabs
- TabWrapper
- TextControl
- Title
- TooltipLinkList
- TooltipMessage
- TooltipNote
- TT
- Typeset
- UL
- Zoom
Functions
Classes
Interfaces
Enums
Type Aliases
- Alignments
- AProps
- ArgsTableProps
- BooleanProps
- BooleanValue
- ColorControlProps
- ColorProps
- Colors
- ColorValue
- Control
- Controls
- ControlType
- DateProps
- DateValue
- FuncChildren
- Globals
- IconKey
- IFrameStoryProps
- IZoomIFrameProps
- lineTagPropsFunction
- LinkWrapperType
- NumberProps
- NumberValue
- ObjectProps
- ObjectValue
- Options
- OptionsArray
- OptionsControlType
- OptionsMultiSelection
- OptionsObject
- OptionsProps
- OptionsSelection
- OptionsSingleSelection
- PresetColor
- PropDefaultValue
- PropType
- RangeConfig
- RangeProps
- Sizes
- SortType
- SourceProps
- StoryProps
- SyntaxHighlighterFormatTypes
- SyntaxHighlighterProps
- TextProps
- TextValue
- ValidationStates
- ZoomProps
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 {}
interface AddonPanelProps
interface AddonPanelProps {}
interface Args
interface Args {}
index signature
[key: string]: any;
interface ArgsTableDataProps
interface ArgsTableDataProps {}
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 {}
interface CommonProps
interface CommonProps {}
interface ControlProps
interface ControlProps<T> {}
interface DateConfig
interface DateConfig {}
interface DescriptionProps
interface DescriptionProps {}
property markdown
markdown: string;
interface DocsPageProps
interface DocsPageProps {}
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 {}
interface IconItemProps
interface IconItemProps {}
property name
name: string;
interface IconsProps
interface IconsProps extends ComponentProps<typeof Svg> {}
interface IFrameProps
interface IFrameProps {}
interface InlineStoryProps
interface InlineStoryProps extends CommonProps {}
property parameters
parameters: Parameters;
property storyFn
storyFn: ElementType;
interface InputStyleProps
interface InputStyleProps {}
interface JsDocParam
interface JsDocParam {}
property description
description?: string;
property name
name: string;
interface JsDocReturns
interface JsDocReturns {}
property description
description?: string;
interface JsDocTags
interface JsDocTags {}
interface Link
interface Link extends Omit<ListItemProps, 'onClick'> {}
interface LinkInnerProps
interface LinkInnerProps {}
property containsIcon
containsIcon?: boolean;
property withArrow
withArrow?: boolean;
interface LinkProps
interface LinkProps extends LinkInnerProps, LinkStylesProps {}
interface LinkStylesProps
interface LinkStylesProps {}
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 {}
interface NormalizedOptionsConfig
interface NormalizedOptionsConfig {}
property options
options: OptionsObject;
interface NumberConfig
interface NumberConfig {}
interface ObjectConfig
interface ObjectConfig {}
interface OptionsConfig
interface OptionsConfig {}
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 {}
interface PropSummaryValue
interface PropSummaryValue {}
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 {}
interface SourceErrorProps
interface SourceErrorProps {}
interface SpacedProps
interface SpacedProps {}
interface StorybookLogoProps
interface StorybookLogoProps {}
property alt
alt: string;
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 {}
interface TabButtonProps
interface TabButtonProps {}
interface TableAnnotation
interface TableAnnotation {}
property category
category?: string;
property defaultValue
defaultValue?: PropDefaultValue;
property jsDocTags
jsDocTags?: JsDocTags;
property type
type: PropType;
interface TabsProps
interface TabsProps {}
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 {}
interface TextConfig
interface TextConfig {}
interface TooltipLinkListProps
interface TooltipLinkListProps {}
property links
links: Link[];
property LinkWrapper
LinkWrapper?: LinkWrapperType;
interface TooltipMessageProps
interface TooltipMessageProps {}
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)
Dependencies (8)
Dev Dependencies (21)
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[](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 .
Package analyzed in 6225 ms. - Missing or incorrect documentation? Open an issue for this package.