Merge pull request #26 from kadirahq/date-knob

Added a datetime knob

README.md

@@ -145,3 +145,13 @@ const value = select(label, options, defaultValue);
 ```
 
 > You can also provide options as an array like this: ['red', 'blue', 'yellow']
+
+### date
+
+Allow you to get date (and time) from the user.
+
+```js
+const label = 'Event Date';
+const defaultValue = new Date('Jan 20 2017');
+const value = date(label, defaultValue);
+```

dist/components/types/Date-style.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var style = "\n  .rdt {\n    position: relative;\n  }\n  .rdtPicker {\n    display: none;\n    position: absolute;\n    width: 200px;\n    padding: 4px;\n    margin-top: 1px;\n    z-index: 99999 !important;\n    background: #fff;\n    box-shadow: 0 1px 3px rgba(0,0,0,.1);\n    border: 1px solid #f9f9f9;\n  }\n  .rdtOpen .rdtPicker {\n    display: block;\n  }\n  .rdtStatic .rdtPicker {\n    box-shadow: none;\n    position: static;\n  }\n  \n  .rdtPicker .rdtTimeToggle {\n    text-align: center;\n    font-size:11px;\n  }\n  \n  .rdtPicker table {\n    width: 100%;\n    margin: 0;\n  }\n  .rdtPicker td,\n  .rdtPicker th {\n    text-align: center;\n    height: 28px;\n  }\n  .rdtPicker td {\n    cursor: pointer;\n  }\n  .rdtPicker td.rdtDay:hover,\n  .rdtPicker td.rdtHour:hover,\n  .rdtPicker td.rdtMinute:hover,\n  .rdtPicker td.rdtSecond:hover,\n  .rdtPicker .rdtTimeToggle:hover {\n    background: #eeeeee;\n    cursor: pointer;\n  }\n  .rdtPicker td.rdtOld,\n  .rdtPicker td.rdtNew {\n    color: #999999;\n  }\n  .rdtPicker td.rdtToday {\n    position: relative;\n  }\n  .rdtPicker td.rdtToday:before {\n    content: '';\n    display: inline-block;\n    border-left: 7px solid transparent;\n    border-bottom: 7px solid #428bca;\n    border-top-color: rgba(0, 0, 0, 0.2);\n    position: absolute;\n    bottom: 4px;\n    right: 4px;\n  }\n  .rdtPicker td.rdtActive,\n  .rdtPicker td.rdtActive:hover {\n    background-color: #428bca;\n    color: #fff;\n    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);\n  }\n  .rdtPicker td.rdtActive.rdtToday:before {\n    border-bottom-color: #fff;\n  }\n  .rdtPicker td.rdtDisabled,\n  .rdtPicker td.rdtDisabled:hover {\n    background: none;\n    color: #999999;\n    cursor: not-allowed;\n  }\n  \n  .rdtPicker td span.rdtOld {\n    color: #999999;\n  }\n  .rdtPicker td span.rdtDisabled,\n  .rdtPicker td span.rdtDisabled:hover {\n    background: none;\n    color: #999999;\n    cursor: not-allowed;\n  }\n  .rdtPicker th {\n    border-bottom: 1px solid #f9f9f9;\n  }\n  .rdtPicker .dow {\n    width: 14.2857%;\n    font-size: 11px;\n    border-bottom: none;\n  }\n  .rdtPicker th.rdtSwitch {\n    width: 100px;\n    font-size: 11px;\n  }\n  .rdtPicker th.rdtNext,\n  .rdtPicker th.rdtPrev {\n    font-size: 11px;\n    vertical-align: top;\n  }\n  \n  .rdtPrev span,\n  .rdtNext span {\n    display: block;\n    -webkit-touch-callout: none; /* iOS Safari */\n    -webkit-user-select: none;   /* Chrome/Safari/Opera */\n    -khtml-user-select: none;    /* Konqueror */\n    -moz-user-select: none;      /* Firefox */\n    -ms-user-select: none;       /* Internet Explorer/Edge */\n    user-select: none;\n  }\n  \n  .rdtPicker th.rdtDisabled,\n  .rdtPicker th.rdtDisabled:hover {\n    background: none;\n    color: #999999;\n    cursor: not-allowed;\n  }\n  .rdtPicker thead tr:first-child th {\n    cursor: pointer;\n  }\n  .rdtPicker thead tr:first-child th:hover {\n    background: #eeeeee;\n  }\n  \n  .rdtPicker tfoot {\n    border-top: 1px solid #f9f9f9;\n  }\n  \n  .rdtPicker button {\n    border: none;\n    background: none;\n    cursor: pointer;\n  }\n  .rdtPicker button:hover {\n    background-color: #eee;\n  }\n  \n  .rdtPicker thead button {\n    width: 100%;\n    height: 100%;\n  }\n  \n  td.rdtMonth,\n  td.rdtYear {\n    height: 50px;\n    width: 25%;\n    cursor: pointer;\n  }\n  td.rdtMonth:hover,\n  td.rdtYear:hover {\n    background: #eee;\n  }\n  \n  td.rdtDay {\n    font-size: 11px\n  }\n  \n  .rdtCounters {\n    display: inline-block;\n  }\n  \n  .rdtCounters > div {\n    float: left;\n  }\n  \n  .rdtCounter {\n    height: 100px;\n  }\n  \n  .rdtCounter {\n    width: 40px;\n  }\n  \n  .rdtCounterSeparator {\n    line-height: 100px;\n  }\n  \n  .rdtCounter .rdtBtn {\n    height: 40%;\n    line-height: 40px;\n    cursor: pointer;\n    display: block;\n    font-size: 11px;\n  \n    -webkit-touch-callout: none; /* iOS Safari */\n    -webkit-user-select: none;   /* Chrome/Safari/Opera */\n    -khtml-user-select: none;    /* Konqueror */\n    -moz-user-select: none;      /* Firefox */\n    -ms-user-select: none;       /* Internet Explorer/Edge */\n    user-select: none;\n  }\n  .rdtCounter .rdtBtn:hover {\n    background: #eee;\n  }\n  .rdtCounter .rdtCount {\n    height: 20%;\n    font-size: 11px;\n  }\n  \n  .rdtMilli {\n    vertical-align: middle;\n    padding-left: 8px;\n    width: 48px;\n  }\n  \n  .rdtMilli input {\n    width: 100%;\n    font-size: 11px;\n    margin-top: 37px;\n  }\n";
+
+exports.default = style;

dist/components/types/Date.js

@@ -0,0 +1,88 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
+
+var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
+
+var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
+
+var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
+
+var _createClass2 = require('babel-runtime/helpers/createClass');
+
+var _createClass3 = _interopRequireDefault(_createClass2);
+
+var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
+
+var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
+
+var _inherits2 = require('babel-runtime/helpers/inherits');
+
+var _inherits3 = _interopRequireDefault(_inherits2);
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _reactDatetime = require('react-datetime');
+
+var _reactDatetime2 = _interopRequireDefault(_reactDatetime);
+
+var _insertCss = require('insert-css');
+
+var _insertCss2 = _interopRequireDefault(_insertCss);
+
+var _DateStyle = require('./Date-style');
+
+var _DateStyle2 = _interopRequireDefault(_DateStyle);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+(0, _insertCss2.default)(_DateStyle2.default);
+
+var DateType = function (_React$Component) {
+  (0, _inherits3.default)(DateType, _React$Component);
+
+  function DateType() {
+    (0, _classCallCheck3.default)(this, DateType);
+    return (0, _possibleConstructorReturn3.default)(this, (DateType.__proto__ || (0, _getPrototypeOf2.default)(DateType)).apply(this, arguments));
+  }
+
+  (0, _createClass3.default)(DateType, [{
+    key: 'render',
+    value: function render() {
+      var _props = this.props;
+      var knob = _props.knob;
+      var _onChange = _props.onChange;
+
+      return _react2.default.createElement(_reactDatetime2.default, {
+        id: knob.name,
+        value: new Date(knob.value),
+        type: 'date',
+        onChange: function onChange(date) {
+          return _onChange(date.valueOf());
+        }
+      });
+    }
+  }]);
+  return DateType;
+}(_react2.default.Component);
+
+DateType.propTypes = {
+  knob: _react2.default.PropTypes.object,
+  onChange: _react2.default.PropTypes.func
+};
+
+DateType.serialize = function (value) {
+  return String(value);
+};
+
+DateType.deserialize = function (value) {
+  return parseFloat(value);
+};
+
+exports.default = DateType;

dist/components/types/index.js

@@ -24,6 +24,10 @@ var _Select = require('./Select');
 
 var _Select2 = _interopRequireDefault(_Select);
 
+var _Date = require('./Date');
+
+var _Date2 = _interopRequireDefault(_Date);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 exports.default = {
@@ -31,5 +35,6 @@ exports.default = {
   number: _Number2.default,
   boolean: _Boolean2.default,
   object: _Object2.default,
-  select: _Select2.default
+  select: _Select2.default,
+  date: _Date2.default
 };

dist/index.js

@@ -9,6 +9,7 @@ exports.boolean = boolean;
 exports.number = number;
 exports.object = object;
 exports.select = select;
+exports.date = date;
 exports.withKnobs = withKnobs;
 
 var _storybookAddons = require('@kadira/storybook-addons');
@@ -47,6 +48,11 @@ function select(name, options, value) {
   return manager.knob(name, { type: 'select', options: options, value: value });
 }
 
+function date(name, value) {
+  var timestamp = manager.knob(name, { type: 'date', value: value.getTime() });
+  return new Date(timestamp);
+}
+
 function withKnobs(storyFn, context) {
   var channel = _storybookAddons2.default.getChannel();
   return manager.wrapStory(channel, storyFn, context);

example/stories/Button.js

@@ -1,31 +0,0 @@
-import React from 'react';
-
-const buttonStyles = {
-  border: '1px solid #eee',
-  borderRadius: 3,
-  backgroundColor: '#FFFFFF',
-  cursor: 'pointer',
-  fontSize: 15,
-  padding: '3px 10px',
-};
-
-const Button = ({ onClick, style, color, width, children, disabled }) => (
-  <button
-    style={{ ...buttonStyles, ...{ color, width: `${width}px` }, ...style }}
-    onClick={onClick}
-    disabled={disabled}
-  >
-    {children}
-  </button>
-);
-
-Button.propTypes = {
-  children: React.PropTypes.string.isRequired,
-  onClick: React.PropTypes.func,
-  color: React.PropTypes.string,
-  width: React.PropTypes.number,
-  disabled: React.PropTypes.bool,
-  style: React.PropTypes.object,
-};
-
-export default Button;

example/stories/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { storiesOf } from '@kadira/storybook';
-import { action } from '@kadira/storybook-addon-actions';
+import moment from 'moment';
 import {
   withKnobs,
   number,
@@ -8,23 +8,41 @@ import {
   boolean,
   text,
   select,
+  date
 } from '../../src';
 
-import Button from './Button';
-
-storiesOf('Button', module)
+storiesOf('Example of Knobs', module)
   .addDecorator(withKnobs)
-  .add('default view', () => (
-    <Button
-      onClick={ action('button clicked') }
-      disabled={ boolean('Disabled', false) }
-      color={ select('Height', { red: 'Red', blue: 'Blue', yellow: 'Yellow' }, 'red') }
-      width={ number('Width', 100) }
-      style={ object('Style', { backgroundColor: '#FFF' }) }
-    >
-      { text('Label', 'Hello Man23') } World
-    </Button>
+  .add('simple example', () => (
+    <button>{text('Label', 'Hello Button')}</button>
   ))
-  .add('Story without any knobs', () => (
-    <Button>{text('Label', 'Hello')}</Button>
+  .add('with all knobs', () => {
+    const name = text('Name', 'Tom Cary');
+    const dob = date('DOB', new Date('January 20 1887'));
+    const bold = boolean('Bold', false);
+    const color = select('Color', {
+      red: 'Red',
+      green: 'Green',
+      black: 'Black'
+    }, 'black');
+
+    const customStyle = object('Style', {
+      fontFamily: 'Arial',
+      padding: 20,
+    });
+
+    const style = {
+      ...customStyle,
+      fontWeight: bold ? 800: 400,
+      color
+    };
+
+    return (
+      <div style={style}>
+        I'm {name} and I born on "{moment(dob).format("DD MMM YYYY")}"
+      </div>
+    );
+  })
+  .add('without any knob', () => (
+    <button>This is a button</button>
   ));

package.json

@@ -53,6 +53,9 @@
   "dependencies": {
     "babel-runtime": "^6.5.0",
     "deep-equal": "^1.0.1",
+    "insert-css": "^1.0.0",
+    "moment": "^2.15.0",
+    "react-datetime": "^2.6.0",
     "react-textarea-autosize": "^4.0.5"
   },
   "main": "dist/index.js",

src/components/PropField.js

@@ -15,7 +15,7 @@ const stylesheet = {
     paddingRight: 5,
     paddingTop: 7,
     textAlign: 'right',
-    width: 20,
+    width: 60,
     fontSize: 10,
     color: 'rgb(68, 68, 68)',
     textTransform: 'uppercase',

src/components/types/Boolean.js

@@ -5,7 +5,6 @@ const styles = {
   boxSizing: 'border-box',
   verticalAlign: 'top',
   height: 21,
-  width: '100%',
   outline: 'none',
   border: '1px solid #ececec',
   fontSize: '12px',

src/components/types/Date/index.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import Datetime from 'react-datetime';
+import insertCss from 'insert-css';
+import style from './styles';
+
+const customStyle = `
+  .rdt input {
+    outline: 0;
+    width: 300px;
+    border: 1px solid #f7f4f4;
+    borderRadius: 2px;
+    fontSize: 11px;
+    padding: 5px;
+    color: #555;
+  }
+`;
+
+insertCss(style);
+insertCss(customStyle);
+
+class DateType extends React.Component {
+  render() {
+    const { knob, onChange } = this.props;
+    return (
+      <Datetime
+        id={knob.name}
+        value={new Date(knob.value)}
+        type="date"
+        onChange={(date) => onChange(date.valueOf())}
+      />
+    );
+  }
+}
+
+DateType.propTypes = {
+  knob: React.PropTypes.object,
+  onChange: React.PropTypes.func,
+};
+
+DateType.serialize = function (value) {
+  return String(value);
+};
+
+DateType.deserialize = function (value) {
+  return parseFloat(value);
+};
+
+export default DateType;

src/components/types/Date/styles.js

@@ -0,0 +1,219 @@
+export default `
+  .rdt {
+    position: relative;
+  }
+  .rdtPicker {
+    display: none;
+    position: absolute;
+    width: 200px;
+    padding: 4px;
+    margin-top: 1px;
+    z-index: 99999 !important;
+    background: #fff;
+    box-shadow: 0 1px 3px rgba(0,0,0,.1);
+    border: 1px solid #f9f9f9;
+  }
+  .rdtOpen .rdtPicker {
+    display: block;
+  }
+  .rdtStatic .rdtPicker {
+    box-shadow: none;
+    position: static;
+  }
+
+  .rdtPicker .rdtTimeToggle {
+    text-align: center;
+    font-size:11px;
+  }
+
+  .rdtPicker table {
+    width: 100%;
+    margin: 0;
+  }
+  .rdtPicker td,
+  .rdtPicker th {
+    text-align: center;
+    height: 28px;
+  }
+  .rdtPicker td {
+    cursor: pointer;
+  }
+  .rdtPicker td.rdtDay:hover,
+  .rdtPicker td.rdtHour:hover,
+  .rdtPicker td.rdtMinute:hover,
+  .rdtPicker td.rdtSecond:hover,
+  .rdtPicker .rdtTimeToggle:hover {
+    background: #eeeeee;
+    cursor: pointer;
+  }
+  .rdtPicker td.rdtOld,
+  .rdtPicker td.rdtNew {
+    color: #999999;
+  }
+  .rdtPicker td.rdtToday {
+    position: relative;
+  }
+  .rdtPicker td.rdtToday:before {
+    content: '';
+    display: inline-block;
+    border-left: 7px solid transparent;
+    border-bottom: 7px solid #428bca;
+    border-top-color: rgba(0, 0, 0, 0.2);
+    position: absolute;
+    bottom: 4px;
+    right: 4px;
+  }
+  .rdtPicker td.rdtActive,
+  .rdtPicker td.rdtActive:hover {
+    background-color: #428bca;
+    color: #fff;
+    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+  }
+  .rdtPicker td.rdtActive.rdtToday:before {
+    border-bottom-color: #fff;
+  }
+  .rdtPicker td.rdtDisabled,
+  .rdtPicker td.rdtDisabled:hover {
+    background: none;
+    color: #999999;
+    cursor: not-allowed;
+  }
+
+  .rdtPicker td span.rdtOld {
+    color: #999999;
+  }
+  .rdtPicker td span.rdtDisabled,
+  .rdtPicker td span.rdtDisabled:hover {
+    background: none;
+    color: #999999;
+    cursor: not-allowed;
+  }
+  .rdtPicker th {
+    border-bottom: 1px solid #f9f9f9;
+  }
+  .rdtPicker .dow {
+    width: 14.2857%;
+    font-size: 11px;
+    border-bottom: none;
+  }
+  .rdtPicker th.rdtSwitch {
+    width: 100px;
+    font-size: 11px;
+  }
+  .rdtPicker th.rdtNext,
+  .rdtPicker th.rdtPrev {
+    font-size: 11px;
+    vertical-align: top;
+  }
+
+  .rdtPrev span,
+  .rdtNext span {
+    display: block;
+    -webkit-touch-callout: none; /* iOS Safari */
+    -webkit-user-select: none;   /* Chrome/Safari/Opera */
+    -khtml-user-select: none;    /* Konqueror */
+    -moz-user-select: none;      /* Firefox */
+    -ms-user-select: none;       /* Internet Explorer/Edge */
+    user-select: none;
+  }
+
+  .rdtPicker th.rdtDisabled,
+  .rdtPicker th.rdtDisabled:hover {
+    background: none;
+    color: #999999;
+    cursor: not-allowed;
+  }
+  .rdtPicker thead tr:first-child th {
+    cursor: pointer;
+  }
+  .rdtPicker thead tr:first-child th:hover {
+    background: #eeeeee;
+  }
+
+  .rdtPicker tfoot {
+    border-top: 1px solid #f9f9f9;
+  }
+
+  .rdtPicker button {
+    border: none;
+    background: none;
+    cursor: pointer;
+  }
+  .rdtPicker button:hover {
+    background-color: #eee;
+  }
+
+  .rdtPicker thead button {
+    width: 100%;
+    height: 100%;
+  }
+
+  td.rdtMonth,
+  td.rdtYear {
+    height: 50px;
+    width: 25%;
+    cursor: pointer;
+  }
+  td.rdtMonth:hover,
+  td.rdtYear:hover {
+    background: #eee;
+  }
+
+  td.rdtDay {
+    font-size: 11px
+  }
+
+  .rdtCounters {
+    display: inline-block;
+  }
+
+  .rdtCounters > div {
+    float: left;
+  }
+
+  .rdtCounter {
+    height: 100px;
+  }
+
+  .rdtCounter {
+    width: 40px;
+  }
+
+  .rdtCounterSeparator {
+    line-height: 100px;
+  }
+
+  .rdtCounter .rdtBtn {
+    height: 40%;
+    line-height: 40px;
+    cursor: pointer;
+    display: block;
+    font-size: 11px;
+
+    -webkit-touch-callout: none; /* iOS Safari */
+    -webkit-user-select: none;   /* Chrome/Safari/Opera */
+    -khtml-user-select: none;    /* Konqueror */
+    -moz-user-select: none;      /* Firefox */
+    -ms-user-select: none;       /* Internet Explorer/Edge */
+    user-select: none;
+  }
+  .rdtCounter .rdtBtn:hover {
+    background: #eee;
+  }
+  .rdtCounter .rdtCount {
+    height: 20%;
+    font-size: 11px;
+  }
+
+  .rdtMilli {
+    vertical-align: middle;
+    padding-left: 8px;
+    width: 48px;
+  }
+
+  .rdtMilli input {
+    width: 100%;
+    font-size: 11px;
+    margin-top: 37px;
+  }
+`;

src/components/types/index.js

@@ -3,6 +3,7 @@ import NumberType from './Number';
 import BooleanType from './Boolean';
 import ObjectType from './Object';
 import SelectType from './Select';
+import DateType from './Date';
 
 export default {
   text: TextType,
@@ -10,4 +11,5 @@ export default {
   boolean: BooleanType,
   object: ObjectType,
   select: SelectType,
+  date: DateType,
 };

src/index.js

@@ -27,6 +27,11 @@ export function select(name, options, value) {
   return manager.knob(name, { type: 'select', options, value });
 }
 
+export function date(name, value) {
+  const timestamp = manager.knob(name, { type: 'date', value: value.getTime() });
+  return new Date(timestamp);
+}
+
 export function withKnobs(storyFn, context) {
   const channel = addons.getChannel();
   return manager.wrapStory(channel, storyFn, context);