react-fretboard/src/components/Fretboard/Fretboard.stories.tsx

import React from 'react'
import Fretboard, { Props } from './Fretboard'

export default {
  title: 'Welcome',
}

// By passing optional props to this story, you can control the props of the component when
// you consume the story in a test.
export const Default = (props?: Partial<Props>) => <Fretboard {...props} />

export const ReducedFrets = (props?: Partial<Props>) => <Fretboard {...props} landmarks frets={18} />

export const Fretted = (props?: Partial<Props>) => <Fretboard {...props} landmarks fretted={[0, 0, 1, 2, 2, 0]} />

export const FrettedWithNames = (props?: Partial<Props>) => <Fretboard {...props} landmarks fretted={[0, 0, 1, 2, 2, 0]} frettedNames={['E', 'B', 'G#', 'E', 'B', 'E']} />

export const Mirror = (props?: Partial<Props>) => <Fretboard {...props} landmarks
  mirror
/>

export const MirrorFrettedWithNames = (props?: Partial<Props>) => <Fretboard {...props} mirror
  landmarks fretted={[0, 0, 1, 2, 2, 0]} frettedNames={['E', 'B', 'G#', 'E', 'B', 'E']} />

export const Bass = (props?: Partial<Props>) => <Fretboard {...props} landmarks strings={4} />

export const ExtendedGuitar = (props?: Partial<Props>) => <Fretboard {...props} landmarks strings={8} />

export const WithCapo = (props?: Partial<Props>) => <Fretboard {...props} landmarks capoFret={8} />