Merge pull request #29 from WhyThat/feat/adding-flow-support

feat: Adding flow support

Author: ndelangen

.babelrc

@@ -1,8 +1,10 @@
 {
   "presets": [
+    
     ["@babel/preset-env", {
       "shippedProposals": true, "useBuiltIns": "usage"
-    }],
-    "@babel/preset-react"
+      }],
+      "@babel/preset-react",
+      "@babel/preset-flow"
   ]
 }

.eslintrc

@@ -1,7 +1,11 @@
 {
-  extends: [ "taller/react" ],
-  globals: {
-    __DEBUG__: true,
-    location: true
+  "parser": "babel-eslint",
+  "extends": [ "taller/react", "plugin:flowtype/recommended"],
+  "plugins": [
+    "flowtype"
+  ],
+  "globals": {
+    "__DEBUG__": true,
+    "location": true
   }
 }

.flowconfig

@@ -0,0 +1,11 @@
+[ignore]
+
+[include]
+
+[libs]
+
+[lints]
+
+[options]
+
+[strict]

README.md

@@ -1,6 +1,6 @@
 # Smart knobs addon for Storybook
 
-This Storybook plugin uses `@storybook/addon-knobs` but creates the knobs automatically based on PropTypes.
+This Storybook plugin uses `@storybook/addon-knobs` but creates the knobs automatically based on PropTypes and Flow.
 
 ## Installation:
 

example/stories/SmartKnobedComponentWithFlow.js

@@ -0,0 +1,39 @@
+// @flow
+import React from 'react'
+import './SmartKnobedComponent.css'
+
+/* eslint-disable */
+type PropType = {
+  bool: boolean,
+  number: number,
+  string: string,
+  func: () => void,
+  oneOf: 'one' | 'two' | 'three',
+  object: {}
+}
+/* eslint-enable */
+
+const SmartKnobedComponent = (props: PropType) => (
+  <table className='SmartKnobedComponent'>
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>PropType</th>
+        <th>Value</th>
+        <th>typeof</th>
+      </tr>
+    </thead>
+    <tbody>
+      {Object.keys(props).map(prop => (
+        <tr key={ prop }>
+          <th>{ prop }</th>
+          <td>{ SmartKnobedComponent.__docgenInfo.props[prop].flowType.name }</td>
+          <td>{ typeof props[prop] === 'function' ? <i>function</i> : JSON.stringify(props[prop]) || '(empty)' }</td>
+          <td>{ typeof props[prop] }</td>
+        </tr>
+      ))}
+    </tbody>
+  </table>
+)
+
+export default SmartKnobedComponent

example/stories/index.js

@@ -5,22 +5,24 @@ import { withKnobs, select } from '@storybook/addon-knobs'
 
 import SmartKnobedComponent from './SmartKnobedComponent'
 import SmartKnobedComponentMissingProps from './SmartKnobedComponentMissingProps'
+import SmartKnobedComponentWithFlow from './SmartKnobedComponentWithFlow'
 
 const stub = fn => fn()
 
-storiesOf('Example of smart Knobs', module)
+storiesOf('Basic', module)
   .addDecorator(withSmartKnobs)
   .addDecorator(withKnobs)
-  .add('full example', () => <SmartKnobedComponent />)
+  .add('proptypes', () => <SmartKnobedComponent />)
+  .add('flow', () => <SmartKnobedComponentWithFlow />)
 
-storiesOf('Smart Knobs missing props', module)
+storiesOf('Missing props', module)
   .addDecorator(withSmartKnobs)
   .addDecorator(withKnobs)
   .add('example', () => (
     <SmartKnobedComponentMissingProps foo='baz' />
   ))
 
-storiesOf('Smart Knobs with manual knobs', module)
+storiesOf('Manual knobs', module)
   .addDecorator(stub)
   .addDecorator(withSmartKnobs)
   .addDecorator(withKnobs)

package.json

@@ -17,6 +17,7 @@
     "@babel/core": "^7.2.0",
     "@babel/plugin-proposal-class-properties": "^7.2.0",
     "@babel/plugin-proposal-export-default-from": "^7.2.0",
+    "@babel/preset-flow": "^7.0.0",
     "@babel/preset-react": "^7.0.0",
     "@storybook/addon-actions": "^4.1.1",
     "@storybook/addon-info": "^4.1.1",
@@ -27,6 +28,7 @@
     "babel-plugin-react-docgen": "^2.0.0",
     "css-loader": "^2.0.0",
     "eslint-config-taller": "^2.0.0",
+    "eslint-plugin-flowtype": "^3.0.0",
     "jest": "^23.6.0",
     "prop-types": "^15.6.2",
     "react": "^16.6.3",

src/index.js

@@ -1,6 +1,6 @@
 import { cloneElement } from 'react'
 import { action } from '@storybook/addon-actions'
-import { withKnobs, text, boolean, number, object, select } from '@storybook/addon-knobs'
+import { text, boolean, number, object, select } from '@storybook/addon-knobs'
 
 const knobResolvers = {}
 export const addKnobResolver = ({ name, resolver, weight = 0 }) => (knobResolvers[name] = { name, resolver, weight })
@@ -14,6 +14,11 @@ export const propTypeKnobResolver = (name, knob, ...args) =>
   (propName, propType, value, propTypes, defaultProps) =>
     propType.type.name === name ? knob(propName, value, ...args) : undefined
 
+const flowTypeKnobsMap = [
+  { name: 'signature', knob: (name, value) => value || action(name) },
+  { name: 'boolean', knob: boolean },
+]
+
 /* eslint-disable no-multi-spaces */
 // Default simple PropType based knob map.
 const propTypeKnobsMap = [
@@ -26,34 +31,42 @@ const propTypeKnobsMap = [
   { name: 'element', knob: text },
 ]
 
-propTypeKnobsMap.forEach(({ name, knob, args = [] }, weight) => addKnobResolver({
+const typeKnobsMap = [...flowTypeKnobsMap, ...propTypeKnobsMap]
+
+typeKnobsMap.forEach(({ name, knob, args = [] }, weight) => addKnobResolver({
   weight: weight * 10,
   name: `PropTypes.${name}`,
   resolver: propTypeKnobResolver(name, knob, ...args)
 }))
 
+const optionsReducer = (res, value) => ({ ...res, [value]: value })
+const withDefaultOption = (options) => ({ '': '--', ...options })
+const createSelect = (propName, elements, defaultProps) => {
+  try {
+    const options = elements
+    // Cleanup string quotes, if any.
+  .map(value => value.value.replace(/^'(.*)'$/, '$1'))
+  .reduce(optionsReducer, {})
+    return select(propName, withDefaultOption(options), defaultProps[propName])
+  }
+  catch (e) { }
+}
+
 // Register 'oneOf' PropType knob resolver.
 addKnobResolver({
   name: 'PropTypes.oneOf',
   resolver: (propName, propType, value, propTypes, defaultProps) => {
-    /* eslint-disable quotes */
     if (propType.type.name === 'enum' && propType.type.value.length) {
-      try {
-        const options = propType.type.value
-          .map(value => value.value)
-        // Cleanup string quotes, if any.
-          .map(value => value[0] === "'" && value[value.length - 1] === "'"
-            ? '"' + value.replace(/'"'/g, '\\"').slice(1, value.length - 1) + '"' : value)
-          .map(JSON.parse)
-          .reduce((res, value) => ({ ...res, [value]: value }), {})
-
-        return select(propName, { '': '--', ...options }, defaultProps[propName])
-      }
-      catch (e) { }
+      return createSelect(propName, propType.type.value, defaultProps)
+    }
+    // for flow support
+    if (propType.type.name === 'union' && propType.type.elements) {
+      return createSelect(propName, propType.type.elements, defaultProps)
     }
   }
 })
 
+const ensureType = (item) => item.flowType ? ({ ...item, type: item.flowType }) : item
 export const withSmartKnobs = (story, context) => {
   const component = story(context)
 
@@ -68,10 +81,11 @@ export const withSmartKnobs = (story, context) => {
   }
 
   const finalProps = props ? Object.keys(props).reduce((acc, n) => {
-    const item = props[n]
+    const item = ensureType(props[n])
 
     if (!item.type) {
-      console.warn(`There is a prop with defaultValue ${item.defaultValue.value} but it wasnt specified on element.propTypes. Check story: "${context.kind}".`)
+      const defaultValue = item.defaultValue ? item.defaultValue.value : 'Unkwnow'
+      console.warn(`There is a prop with defaultValue ${defaultValue} but it wasnt specified on element.propTypes. Check story: "${context.kind}".`)
       return acc
     }