[storybook] Storybook recipes... #react #frontend #JavaScript

storybook.js

// https://storybook.js.org/basics/guide-react/#write-your-stories
// https://storybook.js.org/basics/writing-stories/

// "Component Story Format"
// https://storybook.js.org/docs/react/api/csf

import { Story, Meta } from '@storybook/react'

import HelloWorld, { HelloWorldProps } from '.'

////////////////////////////////////////////////////////////////////////////////////

export default {
	title: 'HelloWorld', // nesting possible here
	component: HelloWorld,
	argTypes: {
		//backgroundColor: { control: 'color' },
	},
} as Meta

////////////////////////////////////////////////////////////////////////////////////

const StoryTemplate: Story<HelloWorldProps> = (args) => <HelloWorld {...args} />;

////////////////////////////////////////////////////////////////////////////////////

export const Default = StoryTemplate.bind({})
Default.args = {
}

export const Custom = StoryTemplate.bind({})
Custom.args = {
	who: 'you'
}




// XXX Deprecated "storiesOf"
import React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from "@storybook/addon-actions";
import { Button } from '@storybook/react/demo';

storiesOf('Button', module)
  .addDecorator(story => <div style={{ textAlign: 'center' }}>{story()}</div>)
  .add('with text', () => <Button>Hello Button</Button>)
  .add('with some emoji', () => (
    <Button>
      <span role="img" aria-label="so cool">
        😀 😎 👍 💯
      </span>
    </Button>
  ));


// nesting
storiesOf('My App/Buttons/Simple', module).add('with text', () => (
  <Button onClick={action('clicked')}>Hello Button</Button>
));

storiesOf('My App/Buttons/Emoji', module).add('with some emoji', () => (
  <Button onClick={action('clicked')}>
    <span role="img" aria-label="so cool">
      😀 😎 👍 💯
    </span>
  </Button>
));