wix-style-react/dist/es/stories/MultiSelect/index.story.js

wix-style-react

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

import React from 'react';
import CodeExample from 'wix-storybook-utils/CodeExample';
import LiveCodeExample from '../utils/Components/LiveCodeExample';
import MultiSelect from '../../src/MultiSelect';

import { tab, importExample, description, playground, testkit } from 'wix-storybook-utils/Sections';

import { renderSection, IncludedComponents, Title } from '../UXStoryTemplate';

import readmeApi from '../../src/MultiSelect/README.API.md';
import playgroundStoryConfig from '../components/MultiSelect/MultiSelectPlaygroundConfig';

import ExampleSelectSimpleRaw from '!raw-loader!./ExampleSelectSimple';
import ExampleSelectAutocompleteRaw from '!raw-loader!./ExampleSelectAutocomplete';
import ExampleSuggestionsRaw from '!raw-loader!./ExampleSuggestions';
import ExampleTagInputRaw from '!raw-loader!./ExampleTagInput';
import ExampleTagInputSelectionRaw from '!raw-loader!./ExampleTagInputSelection';

import ExampleReorderableRaw from '!raw-loader!./ExampleReorderable';

import ExampleThumbVariations from './ExampleThumbVariations';
import ExampleThumbVariationsRaw from '!raw-loader!./ExampleThumbVariations';

import { storySettings } from './storySettings';

import styles from './styles.scss';

/**
 * Strips imports and exports
 *
 */
function processLive(code, ComponentName, label) {
  var filteredCode = code.split('\n').map(function (line) {
    if (line.startsWith('import')) {
      return '// ' + line;
    } else {
      return line;
    }
  }).filter(function (line) {
    return !line.startsWith('export') && !(line === '/* eslint-disable no-console */');
  }).join('\n');

  return filteredCode + '\n\n' + createExampleRender(ComponentName, label);
}

function createExampleRender(Component, label) {
  return '\nrender(\n  <div style={{ width: \'600px\' }}>\n    <Card>\n      <Card.Content>\n        <FormField label="' + label + '">\n          <' + Component + ' />\n        </FormField>\n      </Card.Content>\n    </Card>\n  </div>,\n);\n';
}

var defaultLiveCodeProps = {
  compact: true,
  autoRender: false,
  previewProps: {
    className: styles.livePreview
  }
};

var examples = React.createElement(
  'div',
  null,
  React.createElement(
    Title,
    null,
    'Examples'
  ),
  React.createElement(LiveCodeExample, _extends({}, defaultLiveCodeProps, {
    title: 'Select',
    initialCode: processLive(ExampleSelectSimpleRaw, 'CountrySelection', 'Select Countries')
  })),
  React.createElement(LiveCodeExample, _extends({}, defaultLiveCodeProps, {
    title: 'Select + Autocomplete',
    initialCode: processLive(ExampleSelectAutocompleteRaw, 'CountrySelection', 'Select Countries')
  })),
  React.createElement(LiveCodeExample, _extends({}, defaultLiveCodeProps, {
    title: 'Tag Input',
    initialCode: processLive(ExampleTagInputRaw, 'ExampleTagInput', 'Enter Any Tag')
  })),
  React.createElement(LiveCodeExample, _extends({}, defaultLiveCodeProps, {
    compact: true,
    title: 'Tag Input + Suggestions',
    initialCode: processLive(ExampleSuggestionsRaw, 'ContactsInput', 'Enter Contact Emails')
  })),
  React.createElement(LiveCodeExample, _extends({}, defaultLiveCodeProps, {
    title: 'Tag Input + Selection',
    initialCode: processLive(ExampleTagInputSelectionRaw, 'CountryInput', 'Enter Or Select Countries')
  })),
  React.createElement(LiveCodeExample, _extends({}, defaultLiveCodeProps, {
    title: 'Reorderable',
    initialCode: processLive(ExampleReorderableRaw, 'ExampleReorderable', 'Reorderable Numbers')
  })),
  React.createElement(
    CodeExample,
    { title: 'ThumbVariations', code: ExampleThumbVariationsRaw },
    React.createElement(
      'div',
      { className: styles.exampleContainer },
      React.createElement(ExampleThumbVariations, null)
    )
  )
);

export default _extends({
  category: storySettings.category,
  storyName: storySettings.storyName,
  component: MultiSelect,

  componentPath: '../../src/MultiSelect'
}, playgroundStoryConfig, {
  sections: [tab({
    title: 'Description',
    sections: [description({
      text: 'A component for selecting/creating multiple values, and displaying them as tags.'
    }), renderSection(React.createElement(IncludedComponents, { componentNames: ['MultiSelect', 'Tag'] })), importExample({
      source: "import MultiSelect from 'wix-style-react/MultiSelect';"
    }), renderSection(examples)]
  }), tab({
    title: 'Playground',
    sections: [playground()]
  }), tab({
    title: 'API',
    // Not using built-in api because we can not override props' description of InputWithOptions
    sections: [renderSection(readmeApi)]
  }), tab({
    title: 'Testkit',
    sections: [testkit()]
  })]
});