How to use wix-storybook-utils - 10 common examples

withCloseButton: false,
    withBackground: false,
    onRequestClose: () => {
      console.log('on request close');
    },
  },
  dataHook: 'storybook-Modal',
  sections: [
    header(),
    tabs([
      tab({
        title: 'Usage',
        sections: [
          description(Readme),
          divider(),
          title('Examples'),

          ...[
            { title: 'Minimum height', source: examples.minHeightExample },
            { title: 'Maximum height', source: examples.maxHeightExample },
            { title: 'RTL example', source: examples.rtlExample },
            {
              title: 'Without close button',
              source: examples.withoutCloseButtonExample,
            },
            {
              title: 'Without background',
              source: examples.withoutBackgroundExample,
            },
            { title: 'In full screen', source: examples.inFullScreenExample },
          ].map(code),
        ],

withIcon: false,
  },
  dataHook: 'storybook-ShareButton',
  sections: [
    header(),
    tabs([
      tab({
        title: 'Usage',
        sections: [
          importExample({
            source: examples.importExample,
          }),

          divider(),

          title('Examples'),

          ...[
            { title: 'Icon + Text', source: examples.exampleIconAndText },
            { title: 'Icon', source: examples.exampleIcon },
            { title: 'Text', source: examples.exampleText },
          ].map(code),
        ],
      }),

      ...[
        { title: 'API', sections: [api()] },
        { title: 'TestKit', sections: [testkit()] },
        { title: 'Playground', sections: [playground()] },
        {
          title: 'Settings Panel',
          sections: [

labelPlacement: Object.values(LabelPlacement),
  },
  dataHook: 'storybook-IconToggle',
  sections: [
    header(),
    tabs([
      tab({
        title: 'Usage',
        sections: [
          importExample({
            source: `import { IconToggle } from 'wix-ui-tpa/IconToggle';`,
          }),

          divider(),

          title('Examples'),
        ],
      }),

      ...[
        { title: 'API', sections: [api()] },
        { title: 'TestKit', sections: [testkit()] },
        { title: 'Playground', sections: [playground()] },
      ].map(tab),
    ]),
  ],
  examples: ,
};

disabled: false,
    error: false,
    alignment: Object.values(DROPDOWN_ALIGNMENT),
    errorMessage: '',
    options,
    initialSelectedId: '',
    onChange: option => console.log(option),
  },
  dataHook: 'storybook-Dropdown',
  sections: [
    header(),
    tabs([
      tab({
        title: 'Usage',
        sections: [
          description(Readme),

          divider(),

          title('Examples'),

          ...[
            { title: 'Simple', source: examples.simpleExample },
            { title: 'Disabled', source: examples.disabledExample },
            { title: 'w. label', source: examples.withLabelExample },
            { title: 'Centered', source: examples.alignmentExample },
            { title: 'Error', source: examples.errorExample },
            {
              title: 'Error with message',
              source: examples.errorWithMessageExample,
            },
            {

tab({
        title: 'Usage',
        sections: [
          description(
            '**ATTENTION: The current API for this component will be deprecated on the next major version.<br>' +
              'Please use the new API using the `upgrade` prop.<br>' +
              'Refer to `` documentation for the new API.**',
          ),

          importExample({
            source: examples.importExample,
          }),

          divider(),

          title('Examples'),

          ...[
            { title: 'Strip', source: examples.strip },
            { title: 'Minimum Height', source: examples.minHeight },
            { title: 'Without Media', source: examples.stripOnlyInfo },
            { title: 'Media Not Available', source: examples.noImageLoaded },
            { title: 'Round Media', source: examples.roundMedia },
            {
              title: 'Without Side Padding',
              source: examples.withoutSidePadding,
            },
          ].map(code),
        ],
      }),

      ...[