@storybook/addon-knobs#withKnobs JavaScript Examples

The following examples show how to use @storybook/addon-knobs#withKnobs. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: Text.stories.js    From kafka-java-vertx-starter with Apache License 2.0 6 votes vote down vote up 
storiesOf('Elements/Text', module)
  .addDecorator(withKnobs)
  .addDecorator(withInfo)
  .addParameters({
    readme: {
      sidebar: TextReadme,
    },
  })
  .add(
    'Text component (default props)',
    renderHelper(Text, 'Text component with no properties provided', true)
  )
  .add(
    'Text component',
    renderHelper(Text, 'Text component with properties', true)
  )
  .add('Heading component', renderHelper(Heading, 'Heading component'))
  .add('Subheading component', renderHelper(Subheading, 'Subheading component'))
  .add('Body component', renderHelper(Body, 'Body component'))
  .add('Code component', renderHelper(Code, 'Code component'))
  .add('Label component', renderHelper(Label, 'Label component'));
Example #2
Source File: Counter.stories.js    From kafka-java-vertx-starter with Apache License 2.0 6 votes vote down vote up 
storiesOf('Groups/Counter', module)
  .addDecorator(withKnobs)
  .addDecorator(withInfo)
  .addParameters({
    readme: {
      sidebar: CounterReadme,
    },
  })
  .add('Counter component (default props)', renderHelper(Counter))
  .add(
    'Counter component',
    renderHelper(
      Counter,
      'Messages produced',
      'to topic: test',
      0,
      9999,
      'my-class'
    )
  );
Example #3
Source File: Messages.stories.js    From kafka-java-vertx-starter with Apache License 2.0 6 votes vote down vote up 
storiesOf('Groups/Messages', module)
  .addDecorator(withKnobs)
  .addDecorator(withInfo)
  .addParameters({
    readme: {
      sidebar: MessagesReadme,
    },
  })
  .add(
    'ConsumerMessage component (default props)',
    renderHelper(ConsumerMessages, ConsumerMessage)
  )
  .add(
    'ProducerMessage component (default props)',
    renderHelper(ProducerMessages, ProducerMessage)
  )
  .add(
    'ConsumerMessage component with empty messages list',
    renderHelper(ConsumerMessages, ConsumerMessage, [])
  )
  .add(
    'ProducerMessage component with empty messages list',
    renderHelper(ProducerMessages, ProducerMessage, [])
  );
Example #4
Source File: Consumer.stories.js    From kafka-java-vertx-starter with Apache License 2.0 6 votes vote down vote up 
storiesOf('Panels/Consumer', module)
  .addDecorator(withKnobs)
  .addDecorator(withInfo)
  .addParameters({
    readme: {
      sidebar: ConsumerReadme,
    },
  })
  .add('Consumer component', renderHelper());
Example #5
Source File: Producer.stories.js    From kafka-java-vertx-starter with Apache License 2.0 6 votes vote down vote up 
storiesOf('Panels/Producer', module)
  .addDecorator(withKnobs)
  .addDecorator(withInfo)
  .addParameters({
    readme: {
      sidebar: ProducerReadme,
    },
  })
  .add('Producer component', renderHelper());
Example #6
Source File: Message.stories.js    From kafka-java-vertx-starter with Apache License 2.0 6 votes vote down vote up 
storiesOf('Elements/Message', module)
  .addDecorator(withKnobs)
  .addDecorator(withInfo)
  .addParameters({
    readme: {
      sidebar: MessageReadme,
    },
  })
  .add(
    'ConsumerMessage component (default props)',
    renderHelper(ConsumerMessage)
  )
  .add(
    'ProducerMessage component (default props)',
    renderHelper(ProducerMessage)
  )
  .add(
    'ConsumerMessage component with first message',
    renderHelper(ConsumerMessage, undefined, true)
  )
  .add(
    'ProducerMessage component with first message',
    renderHelper(ProducerMessage, undefined, true)
  )
  .add(
    'ConsumerMessage component with error',
    renderHelper(ConsumerMessage, 'An error occurred with a consumed message')
  )
  .add(
    'ProducerMessage component with error',
    renderHelper(ProducerMessage, 'An error occurred with a produced message')
  );
Example #7
Source File: button.stories.common.js    From polaris with Apache License 2.0 6 votes vote down vote up 
storiesOf('Atoms/Button', module)
  .addDecorator(storyFn => (
    <StoryPage
      title="Button component"
      url="components/atoms/button"
      storyFn={storyFn}
    >
      An example story for a button
    </StoryPage>
  ))
  .addDecorator(withKnobs)
  .add('With title', () => (
    <>
      <DocItem
        sectionTitle="With title"
        name="title"
        description="The title to be used for the buttons content"
        typeInfo="string"
        required
        example={{
          render,
          code: '<Button title="A button with a title" onPress={handleButtonPress}>'
        }}
      />
      <ThemeSwitcher />
    </>
  ))
Example #8
Source File: button.stories.native.js    From polaris with Apache License 2.0 6 votes vote down vote up 
storiesOf('Atoms/Button', module)
  .addDecorator(storyFn => (
    <StoryPage
      title="Native Button"
      url="components/atoms/button"
      storyFn={storyFn}
    >
      An example story in a <InlineCode code=".native.js" /> file. This story is
      only visible when exploring storybook on a native device
    </StoryPage>
  ))
  .addDecorator(withKnobs)
  .add('Native Only', () => (
    <DocItem
      sectionTitle="Native Only"
      name="title"
      description="The title to be used for the buttons content"
      typeInfo="string"
      required
      example={{
        render: (
          <Button
            onPress={action('Button Pressed')}
            title={text('text', 'Native Button')}
          />
        ),
        code: '<Button title="Native Button" onPress={handleButtonPress}>'
      }}
    />
  ))
Example #9
Source File: preview.js    From virtuoso-design-system with MIT License 5 votes vote down vote up 
addDecorator(withKnobs);
Example #10
Source File: preview.js    From project-s0-t1-budget with MIT License 5 votes vote down vote up 
addDecorator(withKnobs);
Example #11
Source File: config.js    From create-gatsby-web with MIT License 5 votes vote down vote up 
addDecorator(withKnobs)
Example #12
Source File: config.js    From create-gatsby-web with MIT License 5 votes vote down vote up 
addDecorator(withKnobs)
Example #13
Source File: link-button.stories.common.js    From polaris with Apache License 2.0 5 votes vote down vote up 
storiesOf('Molecules/Link Button', module)
  .addDecorator(storyFn => (
    <StoryPage
      title="Link Button"
      url="components/molecules/link-button"
      storyFn={storyFn}
      screens={[{ name: '/linked-screen' }]}
    >
      A link displayed as a button
    </StoryPage>
  ))
  .addDecorator(withKnobs)
  .add('Default', () => {
    return (
      <DocSection>
        <PropTable
          propData={[
            {
              name: 'title',
              type: 'string',
              required: true,
              description: 'The link text'
            },
            {
              name: 'path',
              type: 'string',
              required: true,
              description: 'The linked path/screen'
            }
          ]}
        />
        <DocItem
          example={{
            render: (
              <LinkButton
                title={text('text', 'Text Link')}
                path={'/linked-screen'}
              />
            ),
            code: `<LinkButton title="Text Link" path="/linked-screen" />`
          }}
        />
      </DocSection>
    )
  })
Example #14
Source File: link.stories.common.js    From polaris with Apache License 2.0 5 votes vote down vote up 
storiesOf('Atoms/Link', module)
  .addDecorator(storyFn => (
    <StoryPage
      title="Link With Text"
      url="components/atoms/link"
      storyFn={storyFn}
      screens={[{ name: '/linked-screen' }]}
    >
      An internal link to another page/screen in the app
    </StoryPage>
  ))
  .addDecorator(withKnobs)
  .add('Default', () => (
    <DocSection>
      <PropTable
        propData={[
          {
            name: 'title',
            type: 'string',
            required: true,
            description: 'The link text'
          },
          {
            name: 'path',
            type: 'string',
            required: true,
            description: 'The linked path/screen'
          }
        ]}
      />
      <DocItem
        example={{
          render: (
            <Link title={text('text', 'Text Link')} path={'/linked-screen'} />
          ),
          code: `<Link title="Text Link" path="/linked-screen" />`
        }}
      />
    </DocSection>
  ))
Example #15
Source File: preview.js    From material-ui-color with MIT License 5 votes vote down vote up 
addDecorator(withKnobs);
Example #16
Source File: preview.js    From lundium with MIT License 5 votes vote down vote up 
addDecorator(withKnobs);
Example #17
Source File: config.js    From ScrollScene with MIT License 5 votes vote down vote up 
addDecorator(
  withKnobs({
    escapeHTML: false,
  }),
)