Type Alias: StoryHelpers
StoryHelpers =
CommonHelpers&object
Defined in: packages/core/src/passages/story/helpers.ts:81
Toolbox handed to the content callback of defineStory.
Every helper builds a plain Component object, so helper calls and hand-written component literals can be mixed freely in the same array.
Type Declaration
actions()
actions: (
content,options?) =>ActionsComponent
Creates a group of action buttons. Falsy entries are dropped.
Parameters
content
ReadonlyArray<Conditional<ActionType>>
options?
Returns
Example
h.actions([
{ content: 'Go north', action: h.jump('north-room') },
player.hasKey && { content: 'Unlock', action: h.jump('vault') }
], { direction: 'vertical' })
conversation()
conversation: (
content,options?) =>ConversationComponent
Creates a conversation component. Falsy bubbles are dropped.
Parameters
content
ReadonlyArray<Conditional<ConversationBubble>>
options?
Returns
Example
h.conversation([
{ content: 'Hello!', who: { name: 'NPC' }, side: 'left' },
{ content: 'Hi there!', side: 'right' }
], { appearance: 'byClick', variant: 'messenger' })
header()
header: (
content,options?) =>HeaderComponent
Creates a header component.
Parameters
content
string
options?
Returns
Example
h.header('Chapter 1', { level: 1, className: 'text-center' })
image()
image: (
content,options?) =>ImageComponent
Creates an image component.
Parameters
content
string
options?
Returns
Example
h.image('/scene.jpg', { alt: 'A dark forest', disableModal: true })
include()
include: (
storyId,options?) =>AnotherStoryComponent
Embeds another registered story passage.
Parameters
storyId
string
options?
Returns
Example
h.include('common-intro')
text()
text: (
content,options?) =>TextComponent
Creates a text component.
Parameters
content
ReactNode
options?
Returns
Example
h.text('Once upon a time...', { className: 'text-lg' })
h.text('<strong>Bold</strong>', { isHTML: true })
video()
video: (
content,options?) =>VideoComponent
Creates a video component.
Parameters
content
string
options?
Returns
Example
h.video('/cutscene.mp4', { controls: true, loop: false })
Remarks
Each helper takes the component's content first and a single flat options
bag second. Fields that live under props in the raw component type are
hoisted into that bag, so there is only ever one level to fill in.