Writing stories#

An story is a file that exports some React components

The exported components will be displayed in a page where you can easily experiment with them in isolation

jsx
1
// example.vitro.jsx
2
3
import React from 'react'
4
import { Component } from './'
5
6
export const Simple = ({}) => {
7
    return <Component />
8
}
9
10
export const DifferentColor = ({}) => {
11
    return <Component flex='1' w='100%' minH='100%' bg='blue.100' />
12
}

Every exported component will be displayed as a block on the vitro ui

Changing title#

you can declare an object as default export to add story information like

• title

• component

jsx
1
// example.vitro.jsx
2
import { Button } from './'
3
4
export default {
5
    title: 'My Awesome Component!',
6
}
7
8
export const SimpleButton = () => {
9
    return <Button>Click me</Button>
10
}

Adding a wrapper component#

You can pass a wrapper key to the default export to add a component to be used as wrapper

This is useful to add necessary react providers like a ThemeProvider or redux Provider

jsx
1
// example.vitro.jsx
2
import { Button } from './'
3
4
export default {
5
    title: 'My Awesome Component!',
6
    wrapper: ({ children }) => {
7
        return (
8
            <>
9
                <div>This text comes from a wrapper</div>
10
                {children}
11
            </>
12
        )
13
    },
14
}
15
16
export const SimpleButton = () => {
17
    return <Button>Click me</Button>
18
}

Detecting dark mode and full screen status#

You can use the isDark prop to detect if the dark mode switch is active

tsx
1
export const SimpleButton = ({ isDark, isFullScreen }) => {
2
    return (
3
        <Button
4
            bg={isDark ? 'white' : 'black'}
5
            width={isFullScreen ? '200px' : '100px'}
6
        >
7
            Click me
8
        </Button>
9
    )
10
}

Adding documentation#

You can add inline documentation to your components via the docs template literals, docs blocks will be statically analyzed and replaced with jsx code

jsx
1
docs`
2
## Here are some components
3
4
In duis incididunt culpa anim sit veniam ullamco duis deserunt.
5
`
6
7
export const SimpleButton = () => {
8
    return <button>Click me</button>
9
}

Vitro just statically analyzes for the docs calls, you can import a dummy function to make your code type safe, but remember not to change the import name

ts
1
import { docs } from '@vitro/cli/docs'
2
3
// docs is just a dummy function: () => {}
4
docs`
5
# hello
6
7
# paragraph
8
`

Adding a global wrapper to all stories#

To add a global wrapper you can create a vitro-overrides.jsx to add a wrapper to all stories children of that dirname, see overrides to read more

Differences with storybook#

Don't use static properties#

Instead of using static properties like args and parameters

tsx
1
import React from 'react'
2
3
const Template = (args) => <div {...args} />
4
5
export const Primary = Template.bind({})
6
Primary.args = {
7
    name: 'world',
8
}

Just pass your args

tsx
1
import React from 'react'
2
3
const Template = (args) => <div {...args} />
4
5
export const Primary = () => (
6
    <Template
7
        {...{
8
            name: 'world',
9
        }}
10
    />
11
)

Always use the jsx and tsx extensions for code containing jsx#

Vitro will not transpile code in files with the js extension, if you use jsx you should use the jsx extension