Netherworld's Pretend Minibar

    with-knobs
    TypeScript icon, indicating that this package has built-in type declarations

    0.2.3 • Public • Published

    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'),
    };

    Keywords

    none

    Install

    npm i with-knobs

    DownloadsWeekly Downloads

    133

    Version

    0.2.3

    License

    none

    Unpacked Size

    7.62 kB

    Total Files

    4

    Last publish

    Collaborators

    • mateja176