@lyra/components/lib/textinputs/story.js

Basic UX components

'use strict';

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _storybook = require('part:@lyra/storybook');

var _default = require('part:@lyra/components/textinputs/default');

var _default2 = _interopRequireDefault(_default);

var _knobs = require('part:@lyra/storybook/addons/knobs');

var _lyra = require('part:@lyra/storybook/addons/lyra');

var _lyra2 = _interopRequireDefault(_lyra);

var _CustomStyles = require('./styles/CustomStyles.css');

var _CustomStyles2 = _interopRequireDefault(_CustomStyles);

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

const VALID_TYPES = ['color', 'date', 'email', 'month', 'password', 'search', 'tel', 'text', 'number', 'url', 'week'];

class DefaultTextInputTest extends _react2.default.PureComponent {
  constructor(...args) {
    super(...args);
    this.handleChange = this.handleChange.bind(this);
    this.state = {
      value: ''
    };
  }

  handleChange(event) {
    const value = event.currentTarget.value;
    this.setState({
      value: value
    });
  }

  render() {
    return _react2.default.createElement(_default2.default, {
      placeholder: 'This is the placeholder',
      onChange: this.handleChange,
      onFocus: (0, _storybook.action)('onFocus'),
      onKeyPress: (0, _storybook.action)('onKeyPress'),
      onBlur: (0, _storybook.action)('onBlur'),
      value: this.state.value,
      id: 'ThisIsAnUniqueId'
    });
  }
}

(0, _storybook.storiesOf)('Text inputs').addDecorator(_knobs.withKnobs).add('Default', () => {
  return _react2.default.createElement(
    _lyra2.default,
    {
      part: 'part:@lyra/components/textinputs/default',
      propTables: [_default2.default]
    },
    _react2.default.createElement(_default2.default, {
      placeholder: (0, _knobs.text)('placeholder (prop)', 'This is the placeholder'),
      value: (0, _knobs.text)('value (prop)', ''),
      type: (0, _knobs.select)('type (prop)', ['text', 'number', 'email', 'tel'], 'text'),
      isSelected: (0, _knobs.boolean)('isSelected (prop)', false),
      disabled: (0, _knobs.boolean)('disabled (prop)', false),
      onChange: (0, _storybook.action)('onChange'),
      onFocus: (0, _storybook.action)('onFocus'),
      onKeyPress: (0, _storybook.action)('onKeyPress'),
      onBlur: (0, _storybook.action)('onBlur'),
      id: 'ThisIsAnUniqueId'
    })
  );
}).add('Custom style', () => {
  return _react2.default.createElement(
    _lyra2.default,
    {
      part: 'part:@lyra/components/textinputs/default',
      propTables: [_default2.default]
    },
    _react2.default.createElement(_default2.default, {
      placeholder: (0, _knobs.text)('placeholder (prop)', 'This is the placeholder'),
      value: (0, _knobs.text)('value (prop)', false),
      type: (0, _knobs.select)('type (prop)', ['text', 'number', 'email', 'tel'], 'text'),
      selected: (0, _knobs.boolean)('selected (prop)', false),
      onChange: (0, _storybook.action)('onChange'),
      onFocus: (0, _storybook.action)('onFocus'),
      onKeyPress: (0, _storybook.action)('onKeyPress'),
      onBlur: (0, _storybook.action)('onBlur'),
      styles: (0, _knobs.object)('styles (prop)', _CustomStyles2.default),
      id: 'ThisIsAnUniqueId'
    })
  );
}).add('Default (test)', () => {
  return _react2.default.createElement(DefaultTextInputTest, {
    placeholder: (0, _knobs.text)('placeholder (prop)', 'This is the placeholder'),
    value: (0, _knobs.text)('value (prop)', ''),
    type: (0, _knobs.select)('type (prop)', VALID_TYPES, 'text'),
    hasError: (0, _knobs.boolean)('hasError (prop)', false),
    isClearable: (0, _knobs.boolean)('isClearable (prop)', false),
    isSelected: (0, _knobs.boolean)('isSelected (prop)', false),
    onChange: (0, _storybook.action)('onChange'),
    onFocus: (0, _storybook.action)('onFocus'),
    onKeyPress: (0, _storybook.action)('onKeyPress'),
    onBlur: (0, _storybook.action)('onBlur'),
    onClear: (0, _storybook.action)('onClear'),
    id: 'ThisIsAnUniqueId'
  });
});