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

wix-style-react

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

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; };

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _CodeExample = require('wix-storybook-utils/CodeExample');

var _CodeExample2 = _interopRequireDefault(_CodeExample);

var _LiveCodeExample = require('../utils/Components/LiveCodeExample');

var _LiveCodeExample2 = _interopRequireDefault(_LiveCodeExample);

var _MultiSelect = require('../../src/MultiSelect');

var _MultiSelect2 = _interopRequireDefault(_MultiSelect);

var _Sections = require('wix-storybook-utils/Sections');

var _UXStoryTemplate = require('../UXStoryTemplate');

var _READMEAPI = require('../../src/MultiSelect/README.API.md');

var _READMEAPI2 = _interopRequireDefault(_READMEAPI);

var _MultiSelectPlaygroundConfig = require('../components/MultiSelect/MultiSelectPlaygroundConfig');

var _MultiSelectPlaygroundConfig2 = _interopRequireDefault(_MultiSelectPlaygroundConfig);

var _ExampleSelectSimple = require('!raw-loader!./ExampleSelectSimple');

var _ExampleSelectSimple2 = _interopRequireDefault(_ExampleSelectSimple);

var _ExampleSelectAutocomplete = require('!raw-loader!./ExampleSelectAutocomplete');

var _ExampleSelectAutocomplete2 = _interopRequireDefault(_ExampleSelectAutocomplete);

var _ExampleSuggestions = require('!raw-loader!./ExampleSuggestions');

var _ExampleSuggestions2 = _interopRequireDefault(_ExampleSuggestions);

var _ExampleTagInput = require('!raw-loader!./ExampleTagInput');

var _ExampleTagInput2 = _interopRequireDefault(_ExampleTagInput);

var _ExampleTagInputSelection = require('!raw-loader!./ExampleTagInputSelection');

var _ExampleTagInputSelection2 = _interopRequireDefault(_ExampleTagInputSelection);

var _ExampleReorderable = require('!raw-loader!./ExampleReorderable');

var _ExampleReorderable2 = _interopRequireDefault(_ExampleReorderable);

var _ExampleThumbVariations = require('./ExampleThumbVariations');

var _ExampleThumbVariations2 = _interopRequireDefault(_ExampleThumbVariations);

var _ExampleThumbVariations3 = require('!raw-loader!./ExampleThumbVariations');

var _ExampleThumbVariations4 = _interopRequireDefault(_ExampleThumbVariations3);

var _storySettings = require('./storySettings');

var _styles = require('./styles.scss');

var _styles2 = _interopRequireDefault(_styles);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

/**
 * 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: _styles2.default.livePreview
  }
};

var examples = _react2.default.createElement(
  'div',
  null,
  _react2.default.createElement(
    _UXStoryTemplate.Title,
    null,
    'Examples'
  ),
  _react2.default.createElement(_LiveCodeExample2.default, _extends({}, defaultLiveCodeProps, {
    title: 'Select',
    initialCode: processLive(_ExampleSelectSimple2.default, 'CountrySelection', 'Select Countries')
  })),
  _react2.default.createElement(_LiveCodeExample2.default, _extends({}, defaultLiveCodeProps, {
    title: 'Select + Autocomplete',
    initialCode: processLive(_ExampleSelectAutocomplete2.default, 'CountrySelection', 'Select Countries')
  })),
  _react2.default.createElement(_LiveCodeExample2.default, _extends({}, defaultLiveCodeProps, {
    title: 'Tag Input',
    initialCode: processLive(_ExampleTagInput2.default, 'ExampleTagInput', 'Enter Any Tag')
  })),
  _react2.default.createElement(_LiveCodeExample2.default, _extends({}, defaultLiveCodeProps, {
    compact: true,
    title: 'Tag Input + Suggestions',
    initialCode: processLive(_ExampleSuggestions2.default, 'ContactsInput', 'Enter Contact Emails')
  })),
  _react2.default.createElement(_LiveCodeExample2.default, _extends({}, defaultLiveCodeProps, {
    title: 'Tag Input + Selection',
    initialCode: processLive(_ExampleTagInputSelection2.default, 'CountryInput', 'Enter Or Select Countries')
  })),
  _react2.default.createElement(_LiveCodeExample2.default, _extends({}, defaultLiveCodeProps, {
    title: 'Reorderable',
    initialCode: processLive(_ExampleReorderable2.default, 'ExampleReorderable', 'Reorderable Numbers')
  })),
  _react2.default.createElement(
    _CodeExample2.default,
    { title: 'ThumbVariations', code: _ExampleThumbVariations4.default },
    _react2.default.createElement(
      'div',
      { className: _styles2.default.exampleContainer },
      _react2.default.createElement(_ExampleThumbVariations2.default, null)
    )
  )
);

exports.default = _extends({
  category: _storySettings.storySettings.category,
  storyName: _storySettings.storySettings.storyName,
  component: _MultiSelect2.default,

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