Hackerman-1.js

import React, { useState } from 'react'

// import { YourComponent } from 'your-directory'

export default {
  title: 'components/Hackerman-1',
  parameters: {
    // component: YourComponent,
    componentSubtitle:
      'The Component Subtitle appears at the top of the .stories file. I usually create a default export for "Usage" to show how the component can be used without any props. It\'s common for each story to start with a capital letter',
  },
}

export const Usage = () => <input />

export const Placeholder = () => <input placeholder="Boogy Time" />

Placeholder.parameters = {
  docs: {
    description: {
      story:
        'I usually create one "Story" per `prop` showing just how that prop is used, which is also nice when you expand the "Show code" thingy',
    },
  },
}

export const OnChange = () => {
  const [stateValue, setStateValue] = useState('')

  return (
    <input
      value={stateValue}
      onChange={(event) => setStateValue(event.target.value)}
    />
  )
}

OnChange.parameters = {
  docs: {
    description: {
      story:
        "Storybook's CSF (Component Story Format) is an ES6 function so you can pretty much do with it what you want... like React hooks",
    },
  },
}

export const SomeDiv = () => <input placeholder="I haz a parent" />

SomeDiv.parameters = {
  docs: {
    description: {
      story:
        'Decorators can wrap your story with whatever you like but... whatever you wrap them in won\'t appear in the code snippet when you exapnd the "Show code" thingy. You could even put the state in a decorator so the code snippet looks cleaner',
    },
  },
}

SomeDiv.decorators = [
  (Story) => (
    <div style={{ outline: '3px solid red' }}>
      <Story />
    </div>
  ),
]