Added a datetime knob #26
Conversation
|
Do |
| }; | ||
|
|
||
| DateType.deserialize = function (value) { | ||
| return value; |
There was a problem hiding this comment.
Don't we need to parseFloat here.
| @@ -27,6 +27,11 @@ export function select(name, options, value) { | |||
| return manager.knob(name, { type: 'select', options, value }); | |||
| } | |||
|
|
|||
| export function date(name, value) { | |||
| const r = manager.knob(name, { type: "date", value: value.toISOString() }); | |||
There was a problem hiding this comment.
I like to use a timestamp here. It's more generic in JS and smaller.
I think you need to change several places.
| @@ -11,6 +11,8 @@ require('babel-polyfill'); | |||
| var jsdom = require('jsdom').jsdom; | |||
|
|
|||
| var exposedProperties = ['window', 'navigator', 'document']; | |||
| var fileExts = ['jpg', 'png', 'gif', 'eot', 'svg', 'ttf', 'woff', 'woff2']; | |||
There was a problem hiding this comment.
I think this is because we included css.
So, just add a single entry for just handling .css
| @@ -0,0 +1,217 @@ | |||
| .rdt { | |||
There was a problem hiding this comment.
It's pretty hard to load CSS specific to our manager's code at Storybook.
So, we need to think something else.
Here's something we can do.
See this library: https://github.com/substack/insert-css
We need to write this file as a .js file which returns a big string of CSS.
Then we can simply use above library to apply CSS.
| @@ -30,4 +30,8 @@ process.on('unhandledRejection', function (error) { | |||
| console.error(error && error.stack || error); | |||
| }); | |||
|
|
|||
| require.extensions[`.css`] = function () { | |||
There was a problem hiding this comment.
Once we added new CSS loading system. We don't need this.
| @@ -53,6 +53,8 @@ | |||
| "dependencies": { | |||
| "babel-runtime": "^6.5.0", | |||
| "deep-equal": "^1.0.1", | |||
| "moment": "^2.15.0", | |||
There was a problem hiding this comment.
This should be a devDependancy as we only use this on the example.
There was a problem hiding this comment.
moment is a peer dependency of the react component I'm using. How should I handle that?
There was a problem hiding this comment.
Okay. If so, this is good.
| @@ -0,0 +1,32 @@ | |||
| import React from 'react'; | |||
| import Datetime from 'react-datetime'; | |||
| import './Date.css'; | |||
There was a problem hiding this comment.
Import the JS string of CSS here and use insert-css NPM module to load CSS.
If I doesn't work, try to do that in DOMContentLoaded event.
There was a problem hiding this comment.
It's working properly now
Datetime knob to test react components taking Date objects or timestamps as props.
To use, import
datefromstorybook-addon-knobsand use asdate('<name>', <default value>)