A next-generation tool to create blazing-fast documentation sites
API
created:3/5/2021
updated:3/5/2021
source lines:42
comments %:26

StorySource

@component-controls/blocks
3.6.1

Display source code of a story. If controls are used, all story arguments will be highlighted. Additional commands are made available if the repository data of the story is available.

import { StorySource } from '@component-controls/blocks';

Overview

({ name, age }) => (
<h2>{`Hello, my name is ${name}, and I am ${age} years old.`}</h2>
);

Name
Description
Default
StorySourceOwnProps (2 properties)
viewStyle

initial view mode

undefinedvaluestags
-
sourceProps

source code options

SourceProps
-
BlockContainerOwnProps (6 properties)
HTMLAttributes (42 properties)
Attributes (2 properties)
AriaAttributes (48 properties)
DOMAttributes (161 properties)
- (1 properties)
BoxOwnProps (3 properties)
SpaceProps (28 properties)
BackgroundColorProps (2 properties)
OpacityProps (1 properties)
StoryInputProps (1 properties)

Commits

Date
Author
Commit Message
10/13/2020

atanasster

fix: story description visibility
8/6/2020

atanasster

fix: linting issues
7/25/2020

atanasster

chore: remove react context api
6/2/2020

atanasster

chore: consolidate docs instead of kind
5/23/2020

atanasster

feat: initial checkin gatsby bundler
5/9/2020

atanasster

chore: make storeSourceFile false by default
5/7/2020

atanasster

chore: refactor repository into package info field
5/4/2020

atanasster

feat: enhance object controls handling, merging
5/3/2020

atanasster

feat: initial display object props in code
5/3/2020

atanasster

feat: added Tag component
31 commits

package
imports
peer
SourceProps
useStoryusePackageuseCurrentDocumentStoryInputProps
react
^17.0.1
ReactFC
*

file
imports
"../BlockContainer/story"
StoryBlockContainerStoryBlockContainerProps
"./BaseStorySource"
BaseStorySourceViewStyle

Stories

Theme

({ name, age }) => (
<h2>{`Hello, my name is ${name}, and I am ${age} years old.`}</h2>
);

Theme Selector

({ name, age }) => (
<h2>{`Hello, my name is ${name}, and I am ${age} years old.`}</h2>
);

Custom Title

Story source

() => 'hello'

Not Collapsible

story

() => 'hello'

No Margin

() => 'hello'