Develop

CHANGELOG.md

@@ -1,3 +1,6 @@
+#3.0.4
+Improve display for Flow unions (#14)
+
 #3.0.3
 - Update to latest Storybook version
 - Support Markdown into story description 

example/UserDetails.js

@@ -13,7 +13,7 @@ type Props = {
   /** Some number */
   num: number,
   /** Optional property */
-  option?: string,
+  option?: 'foo' | 'bar',
   /** Optional callback */
   func?: (value: string) => void,
   /** Optional array of users */

package.json

@@ -1,38 +1,36 @@
 {
   "name": "storybook-addon-props",
-  "version": "3.0.3",
+  "version": "3.0.4",
   "description":
     "React Storybook Addon to show component properties and stories into panels",
   "repository": {
     "type": "git",
     "url": "https://github.com/marc-rutkowski/storybook-addon-props"
   },
   "dependencies": {
-    "@storybook/addon-actions": "^3.2.10",
-    "@storybook/addon-storyshots": "^3.2.11",
-    "@storybook/addons": "^3.2.10",
-    "@storybook/react": "^3.2.11",
-    "highlight.js": "=9.6.0",
-    "immutable": "4.0.0-rc.2",
-    "jsx-to-string": "^1.1.0",
+    "@storybook/addon-actions": "^3.3.12",
+    "@storybook/addon-storyshots": "^3.3.12",
+    "@storybook/addons": "^3.3.12",
+    "@storybook/react": "^3.3.12",
+    "immutable": "4.0.0-rc.9",
+    "jsx-to-string": "^1.3.0",
     "prop-types": "^15.6.0",
-    "react": "^15.6.0",
-    "react-dom": "^15.6.0",
-    "react-remarkable": "^1.1.2",
-    "react-syntax-highlighter": "^5.7.0"
+    "react": "^16.2.0",
+    "react-dom": "^16.2.0",
+    "react-remarkable": "^1.1.3",
+    "react-syntax-highlighter": "^7.0.0"
   },
   "devDependencies": {
     "babel-cli": "^6.26.0",
-    "babel-core": "^6.17.0",
-    "babel-plugin-styled-components": "^1.2.0",
+    "babel-core": "^6.26.0",
     "babel-plugin-transform-flow-strip-types": "^6.22.0",
-    "babel-preset-env": "^1.6.0",
-    "babel-preset-react": "^6.16.0",
+    "babel-preset-env": "^1.6.1",
+    "babel-preset-react": "^6.24.1",
     "babel-preset-stage-0": "^6.24.1",
-    "flow-bin": "^0.55.0",
-    "jest": "^21.2.0",
-    "jest-cli": "^21.2.0",
-    "react-test-renderer": "^15.6.0"
+    "flow-bin": "^0.64.0",
+    "jest": "^22.1.4",
+    "jest-cli": "^22.1.4",
+    "react-test-renderer": "^16.2.0"
   },
   "peerDependencies": {
     "react": "*",

src/components/FlowTypeProp.js

@@ -15,7 +15,13 @@ const FlowTypeProp = ({ flowType }) => {
           </pre>
         </div>
       );
-      break;
+
+    case 'union':
+      return (
+        <div>
+          <pre>{flowType.raw}</pre>
+        </div>
+      );
 
     default:
       return <pre>{flowType.name}</pre>;

src/components/Story.js

@@ -3,7 +3,7 @@ import SyntaxHighlighter, {
   registerLanguage,
 } from 'react-syntax-highlighter/dist/light';
 import js from 'highlight.js/lib/languages/javascript';
-import { docco } from 'react-syntax-highlighter/dist/styles';
+import { docco } from 'react-syntax-highlighter/dist/styles/hljs';
 import Description from './Description';
 
 registerLanguage('javascript', js);