react-collection-helpers/lib/components/First/First.stories.js

React Collection Helpers Component

'use strict';

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _storybook = require('@kadira/storybook');

var _First = require('../First');

var _First2 = _interopRequireDefault(_First);

var _Sort = require('../Sort');

var _Sort2 = _interopRequireDefault(_Sort);

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

(0, _storybook.storiesOf)('First', module).add('default (1 item)', function () {
  return _react2.default.createElement(
    _First2.default,
    { collection: ['Apple', 'Banana', 'Carrot'] },
    function (item) {
      return _react2.default.createElement(
        'div',
        null,
        item
      );
    }
  );
}).add('first 3 of 4 items', function () {
  return _react2.default.createElement(
    _First2.default,
    { collection: ['Apple', 'Banana', 'Carrot', 'Dragonfruit'], num: 3 },
    function (item) {
      return _react2.default.createElement(
        'div',
        null,
        item
      );
    }
  );
}).add('composed with Sort', function () {
  var collection = [{ id: 'a', name: 'Apple', price: 5 }, { id: 'b', name: 'Banana', price: 10.25 }, { id: 'c', name: 'Carrot', price: 4.50 }, { id: 'd', name: 'Dragonfruit', price: 7.50 }, { id: 'e', name: 'Eggplant', price: 12.75 }];

  return _react2.default.createElement(
    _Sort2.default,
    { collection: collection, comparator: 'price' },
    _react2.default.createElement(
      _First2.default,
      { num: 2 },
      function (item) {
        return _react2.default.createElement(
          'div',
          null,
          item.name,
          ' - ',
          item.price
        );
      }
    )
  );
});