fbredius/storybook

import {
  Story,
  Canvas,
  ArgsTable,
  Source,
  Description,
  ColorPalette,
  ColorItem,
  Meta,
} from '@storybook/addon-docs';
import { action } from '@storybook/addon-actions';
import { Button } from '@storybook/react/demo';
import styled from 'styled-components';
import TsButton from '../../components/TsButton';
import FlowTypeButton from '../../components/FlowTypeButton';
import { DocgenButton } from '../../components/DocgenButton';
import MdNotes from '../notes/notes.md';
import MdxNotes from '../notes/notes.mdx';

<Meta
  title="Addons/Docs/mdx"
  component={TsButton}
  id="addons-docs-mdx-id"
  decorators={[(storyFn) => <div style={{ backgroundColor: 'yellow' }}>{storyFn()}</div>]}
  parameters={{ notes: 'component notes' }}
/>

# Selected

<Story id="." />

<Source id="." />

<Canvas>
  <Story id="." />
</Canvas>

<ArgsTable of="." />

## Transclusion

### Markdown

<MdNotes />

### MDX

<MdxNotes />

## A random color ColorPalette

<ColorPalette>
  <ColorItem
    title="theme.color.greyscale"
    subtitle="Some of the greys"
    colors={['#FFFFFF', '#F8F8F8', '#F3F3F3']}
  />
  <ColorItem title="theme.color.primary" subtitle="Coral" colors={['#FF4785']} />
  <ColorItem title="theme.color.secondary" subtitle="Ocean" colors={['#1EA7FD']} />
  <ColorItem
    title="theme.color.positive"
    subtitle="Green"
    colors={[
      'rgba(102,191,60,1)',
      'rgba(102,191,60,.8)',
      'rgba(102,191,60,.6)',
      'rgba(102,191,60,.3)',
    ]}
  />
</ColorPalette>

## Getting into details

<Button>just a button, not a story</Button>

export const nonStory1 = 'foo'; // a non-story export

export const nonStory2 = () => <Button>Not a story</Button>; // another one

<Canvas>
  <Story name="hello story">
    <Button onClick={action('clicked')}>hello world</Button>
  </Story>
  <Story name="goodbye">
    <Button onClick={action('clicked')}>goodbye world</Button>
  </Story>
  <Story name="with icons">
    <Button onClick={action('clicked')}>🤘🚀💯</Button>
  </Story>
  <Story name="notes" parameters={{ notes: 'story notes' }}>
    <Button onClick={action('clicked')}>goodbye world</Button>
  </Story>
  <Story name="plaintext">Plain text</Story>
</Canvas>

<Story name="solo story">
  <Button onClick={action('clicked')}>solo</Button>
</Story>

<Story name="iframe story" inline={false} height="100px">
  <>This is an iframe!</>
</Story>

<Story
  name="decorator story"
  decorators={[(storyFn) => <div style={{ backgroundColor: 'pink' }}>{storyFn()}</div>]}
>
  <>Story decorators</>
</Story>

<Story name="theme">
  <h1 className="text-lg">Hello Hugh</h1>
</Story>

<Story name="function" height="100px">
  {() => {
    return <div>function result</div>;
  }}
</Story>

<Source name="hello story" />

<Canvas>
  <Button onClick={action('clicked')}>view source in Canvas</Button>
</Canvas>

## Configurable height

<Canvas withToolbar>
  <Story id="basics-button--all-buttons" height="400px" />
</Canvas>

export const FixedLayoutExample = styled.div(({ theme }) => ({
  '&, header, aside, main, footer': {
    position: 'fixed',
    top: 0,
    right: 0,
    bottom: 0,
    left: 0,
  },
  header: {
    height: '3rem',
    background: 'red',
  },
  'aside, main': {
    top: '3rem',
  },
  aside: {
    width: '10rem',
    background: 'coral',
  },
  main: {
    left: '10rem',
    background: 'yellow',
  },
  footer: {
    top: 'auto',
    height: '3rem',
    background: 'green',
  },
}));

Fixed layout requires custom `height` since it can't be determined.

<Canvas withToolbar>
  <Story name="fixed layout example" height="15rem">
    <FixedLayoutExample>
      <header />
      <aside />
      <main />
      <footer />
    </FixedLayoutExample>
  </Story>
</Canvas>

## Description

<Description markdown="this is _markdown_" />

<Description of={DocgenButton} />

## ArgsTable

### Docgen

<ArgsTable of={DocgenButton} />

### Flow

Flow types are not officially supported

<ArgsTable of={FlowTypeButton} />

### withSource="none"

<Canvas withSource="none">
  <h1>no source</h1>
</Canvas>

<Canvas withSource="none">
  <Story name="no source Canvas">
    <Button onClick={action('clicked')}>solo</Button>
  </Story>
</Canvas>

## Docs Disable

<Story name="docs disable" parameters={{ docs: { disable: true } }}>
  <Button>This souldn't show up in docs page</Button>
</Story>

## Story with multiple children

<Canvas>
  <Story name="story multiple children">
    <p>Hello Child #1</p>
    <p>Hello Child #2</p>
  </Story>
</Canvas>