With Knobs 🎛

Usage

Import withKnobs as default from 'with-knobs' and use it to wrap an arbitrary object to get out of the box support for storybook knobs

Example

.storybook/config.ts

import { configure, addDecorator } from '@storybook/react';
import { withKnobs } from '@storybook/addon-knobs';

const requireContext = require.context('../src', true, /\.stories\.tsx$/);

function loadStories() {
  addDecorator(withKnobs);

  requireContext.keys().forEach(requireContext);
}

configure(loadStories, module);

.storybook/addons.ts

import '@storybook/addon-knobs/register';

src/App.stories.tsx

import { storiesOf } from '@storybook/react';
import React from 'react';
import withKnobs from 'with-knobs';
import App from './App';
import { personalInformation } from './mocks/personalInformation';

storiesOf('App', module).add('Default', () => {
  return <App {...withKnobs(personalInformation)} />;
});

src/App.tsx

import React from 'react';
import './App.css';
import { PersonalInformation } from './mocks/personalInformation';

export type AppProps = PersonalInformation;

const App: React.FC<AppProps> = ({
  name,
  age,
  birthday,
  employed,
  hobbies,
  languages,
  favoriteColor,
}) => {
  return (
    <form className="App">
      <label>
        Name:
        <input readOnly type="text" value={name} />
      </label>
      <label>
        Favorite Color:
        <input readOnly type="text" value={favoriteColor} />
      </label>
      <label>
        Age:
        <input readOnly type="text" value={age} />
      </label>
      <label>
        Employed:
        <input readOnly type="text" value={JSON.stringify(employed)} />
      </label>
      <label>
        Hobbies:
        <input readOnly type="text" value={hobbies} />
      </label>
      <fieldset>
        {Object.entries(languages).map(([language, level]) => (
          <label key={language}>
            {language}:
            <input readOnly value={level} />
          </label>
        ))}
      </fieldset>
      <label>
        Birthday:
        <input readOnly type="text" value={birthday.toLocaleDateString()} />
      </label>
    </form>
  );
};

export default App;

src/mocks/personalInformation.ts

export interface PersonalInformation {
  name: string;
  age: number;
  birthday: Date;
  employed: boolean;
  hobbies: string[];
  languages: { [language: string]: string };
  favoriteColor: string;
}

export const personalInformation: PersonalInformation = {
  name: 'John',
  age: 25,
  employed: true,
  favoriteColor: '#eee',
  hobbies: ['Running', 'Reading'],
  languages: {
    english: 'Mother Language',
    german: 'Proficient',
  },
  birthday: new Date('Jan 1 1994'),
};