tao-react-components/lib/stories/index.js

react components crafted with love by Tao

'use strict';

var _Button = require('../components/Button');

var _Button2 = _interopRequireDefault(_Button);

var _HeaderBarButton = require('../components/HeaderBarButton');

var _HeaderBarButton2 = _interopRequireDefault(_HeaderBarButton);

var _ContentEditable = require('../components/ContentEditable');

var _ContentEditable2 = _interopRequireDefault(_ContentEditable);

var _HeaderBar = require('../components/FingerFormDashboard/HeaderBar');

var _HeaderBar2 = _interopRequireDefault(_HeaderBar);

var _AddFormButton = require('../components/FingerFormDashboard/AddFormButton');

var _AddFormButton2 = _interopRequireDefault(_AddFormButton);

var _Modal = require('../components/Modal');

var _Modal2 = _interopRequireDefault(_Modal);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _TestComponent = require('../components/TestComponent');

var _TestComponent2 = _interopRequireDefault(_TestComponent);

var _DataGrid = require('../components/DataGrid');

var _DataGrid2 = _interopRequireDefault(_DataGrid);

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

require('./style.css');

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

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

/*storiesOf('AddFormButton', module)
    .add('with text', () => (
      <div style={{backgroundColor: "#f1f1f1", height: "100vh", width: "100vw"}}>
        <AddFormButton
          className="AddFormButton"
         />
      </div>
    ))*/

(0, _storybook.storiesOf)('HeaderBar', module).add('with text', function () {
  return _react2.default.createElement(
    'div',
    { style: { backgroundColor: "#f1f1f1", height: "100vh", width: "100vw" } },
    _react2.default.createElement(_HeaderBar2.default, {
      className: 'HeaderBar'
    })
  );
});

// storiesOf('Button', module)
//   .add('with text', () => (
//     <Button />
//   ))

(0, _storybook.storiesOf)('HeaderBarButton', module).add('theme button', function () {
  return _react2.default.createElement(_HeaderBarButton2.default, {
    className: 'HeaderBarButton-Button',
    buttonType: 'theme',
    buttonTitle: 'Theme',
    buttonColor: 'HeaderBarButton-Red' });
}).add('share button', function () {
  return _react2.default.createElement(_HeaderBarButton2.default, {
    className: 'HeaderBarButton-Button',
    buttonType: 'share',
    buttonTitle: 'Share',
    buttonColor: 'HeaderBarButton-Yellow' });
}).add('view button', function () {
  return _react2.default.createElement(_HeaderBarButton2.default, {
    className: 'HeaderBarButton-Button',
    buttonType: 'view',
    buttonTitle: 'View',
    buttonColor: 'HeaderBarButton-Green' });
}).add('save button', function () {
  return _react2.default.createElement(_HeaderBarButton2.default, {
    className: 'HeaderBarButton-Button',
    buttonType: 'save',
    buttonTitle: 'Save',
    buttonColor: 'HeaderBarButton-Blue' });
});

(0, _storybook.storiesOf)('ContentEditable', module).addDecorator(function (story) {
  return _react2.default.createElement(
    'div',
    { style: { backgroundColor: '#f1f1f1', width: '100%', height: '100vh', display: 'flex', justifyContent: 'center', alignItems: 'center' } },
    story()
  );
}).add('ContentEditable', function () {
  return _react2.default.createElement(_ContentEditable2.default, {
    SavedEditorState: {},
    placeholder: 'Write your title here...',
    className: 'Story-ContentEditable' });
});

(0, _storybook.storiesOf)('DataGrid', module).add('Basic Data Grid', function () {
  return _react2.default.createElement(_DataGrid2.default, null);
});

(0, _storybook.storiesOf)('Modal', module).addDecorator(function (story) {
  return _react2.default.createElement(
    'div',
    { style: { backgroundColor: '#f1f1f1', width: '100%', height: '100vh', display: 'flex', justifyContent: 'center', alignItems: 'center' } },
    story()
  );
}).add('Modal-Default', function () {
  return _react2.default.createElement(
    _Modal2.default,
    {
      showModal: true,
      hideModal: function hideModal() {
        return alert('hide modal!');
      },
      ModalName: 'Form Name',
      action1: 'CLOSE',
      action2: 'SUBMIT',
      onAction2Clicked: function onAction2Clicked() {
        return alert('action2 clicked!');
      },
      onAction1Clicked: function onAction1Clicked() {
        return alert('action1 clicked!');
      }
    },
    _react2.default.createElement(
      'div',
      { style: { "textAlign": "center" } },
      'Please give a name to your form'
    ),
    _react2.default.createElement(
      'div',
      { style: { "display": "flex", "justify-content": "center" } },
      _react2.default.createElement('input', { style: _defineProperty({ 'width': '96%', "margin-top": "10px", "height": "30px", "border-radius": "5px", "padding": "0px 0px 0px 5px", "border": "none" }, 'border', "solid 1px #d9d9d9"), placeholder: 'name' })
    )
  );
}).add('Modal-Test', function () {
  return _react2.default.createElement(_TestComponent2.default, null);
});