Support for Functional Components

.gitignore

@@ -43,5 +43,8 @@ jspm_packages
 ### VisualStudioCode ###
 .vscode
 
+### Webstorm ###
+.idea
+
 # App
 lib

examples/react-styleguidist-example/components/Column.tsx

@@ -1,30 +1,30 @@
 import * as React from 'react';
-import { Component } from 'react';
+import {Component} from 'react';
 
 /**
  * Column properties.
  */
-export interface IColumnProps {
-	/** prop1 description */
+export interface IColumnProps extends React.HTMLAttributes<any> {
+    /** prop1 description */
     prop1?: string;
-	/** prop2 description */
+    /** prop2 description */
     prop2: number;
-	/** 
-     * prop3 description 
+    /**
+     * prop3 description
      */
     prop3: () => void;
-	/** prop4 description */
+    /** prop4 description */
     prop4: 'option1' | 'option2' | 'option3';
 }
 
 /**
  * Form column.
  */
 export class Column extends Component<IColumnProps, {}> {
-    
+
     render() {
-        return <div>Test</div>;
-    }            
+        return <div>Column</div>;
+    }
 }
 
 export default Column;

examples/react-styleguidist-example/components/Grid.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react';
+
+/**
+ * Grid properties.
+ */
+export interface IGridProps {
+    /** prop1 description */
+    prop1?: string;
+    /** prop2 description */
+    prop2: number;
+    /**
+     * prop3 description
+     */
+    prop3: () => void;
+    /** Working grid description */
+    prop4: 'option1' | 'option2' | 'option3';
+}
+
+/**
+ * Form Grid.
+ */
+export const Grid = (props: IGridProps) => {
+    const smaller = () => {return;};
+    return <div>Grid</div>;
+};
+
+const notExported = (props: IGridProps) => {
+    return <div>not exported grid</div>
+};
+
+export default Grid;

examples/react-styleguidist-example/components/Row.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { Component } from 'react';
+
+/**
+ * Row properties.
+ */
+export interface IRowProps {
+    /** prop1 description */
+    prop1?: string;
+    /** prop2 description */
+    prop2: number;
+    /**
+     * prop3 description
+     */
+    prop3: () => void;
+    /** prop4 description */
+    prop4: 'option1' | 'option2' | 'option3';
+}
+
+/**
+ * Form Row.
+ */
+export class Row extends Component<IRowProps, {}> {
+
+    render() {
+        return <div>Row</div>;
+    }
+}
+
+export default Row;

examples/react-styleguidist-example/styleguide.config.js

@@ -1,30 +1,29 @@
-var path = require('path');
-var glob = require('glob');
+const path = require('path');
+const glob = require('glob');
 
 module.exports = {
-	title: 'React Style Guide Example',
-	components: function() {
-		return glob.sync(path.resolve(__dirname, 'components/**/*.tsx'))
-			.filter(function(module) {
-				return /\/[A-Z]\w*\.tsx$/.test(module);
-			});
-	},
-	resolver: require('react-docgen').resolver.findAllComponentDefinitions,
-
-	propsParser: require('../../lib/propTypesParser').parse,
-
-	updateWebpackConfig: function(webpackConfig, env) {
-		var dir = path.resolve(__dirname, 'lib');
-        webpackConfig.resolve.extensions.push('.ts');
-        webpackConfig.resolve.extensions.push('.tsx');
-
-        webpackConfig.module.loaders.push(           
-            { 
-                test: /\.tsx?$/,
-                include: __dirname,
-                loader: 'ts-loader'
-            }
-        );
-		return webpackConfig;
-	}
+  title: 'React Style Guide Example',
+  components: function () {
+    return glob.sync(path.resolve(__dirname, 'components/**/*.tsx'))
+      .filter(function (module) {
+        return /\/[A-Z]\w*\.tsx$/.test(module);
+      });
+  },
+  resolver: require('react-docgen').resolver.findAllComponentDefinitions,
+
+  propsParser: require('../../lib/propTypesParser').parse,
+
+  updateWebpackConfig: function (webpackConfig, env) {
+    webpackConfig.resolve.extensions.push('.ts');
+    webpackConfig.resolve.extensions.push('.tsx');
+
+    webpackConfig.module.loaders.push(
+      {
+        test: /\.tsx?$/,
+        include: __dirname,
+        loader: 'awesome-typescript-loader'
+      }
+    );
+    return webpackConfig;
+  }
 };

package.json

@@ -1,30 +1,37 @@
 {
   "name": "react-docgen-typescript",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "",
   "main": "lib/index.js",
-  "typings": "lib/index.d.ts",
   "scripts": {
     "prepublish": "tsc -d",
     "test": "tsc && mocha ./lib/**/__tests__/**.js",
-    "example": "tsc && styleguidist server --config ./examples/react-styleguidist-example/styleguide.config.js"
+    "example": "tsc && node ./node_modules/react-styleguidist/bin/styleguidist server --config ./examples/react-styleguidist-example/styleguide.config.js"
   },
   "author": "pvasek",
   "license": "MIT",
   "dependencies": {
-    "typescript": "^1.8.10"
+    "awesome-typescript-loader": "^3.0.8",
+    "typescript": "^2.2.1"
   },
   "devDependencies": {
+    "@types/chai": "^3.4.35",
+    "@types/mocha": "^2.2.39",
+    "@types/node": "^7.0.5",
+    "@types/react": "^15.0.14",
+    "@types/react-dom": "^0.14.23",
+    "@types/react-redux": "^4.4.36",
     "babel-core": "^6.8.0",
     "babel-loader": "^6.2.4",
     "chai": "^3.5.0",
     "file-loader": "^0.8.5",
-    "mocha": "^2.4.5",
-    "react": "^15.0.2",
-    "react-dom": "^15.0.2",
+    "mocha": "^2.5.3",
+    "react": "^15.4.2",
+    "react-bluekit": "^0.4.1",
+    "react-dom": "^15.4.2",
     "react-styleguidist": "^2.2.1",
-    "ts-loader": "^0.8.2",
-    "typings": "^0.8.1"
+    "ts-node": "^2.1.0",
+    "typescript": "^2.2.1"
   },
   "files": [
     "lib",

src/__tests__/data/Column.tsx

@@ -1,30 +1,32 @@
 import * as React from 'react';
-import { Component } from 'react';
-
 /**
  * Column properties.
  */
-export interface IColumnProps {
-	/** prop1 description */
+export interface IColumnProps extends React.HTMLAttributes<any> {
+    /** prop1 description */
     prop1?: string;
-	/** prop2 description */
+    /** prop2 description */
     prop2: number;
-	/** 
-     * prop3 description 
+    /**
+     * prop3 description
      */
     prop3: () => void;
-	/** prop4 description */
+    /** prop4 description */
     prop4: 'option1' | 'option2' | "option3";
 }
 
 /**
  * Form column.
  */
-export class Column extends Component<IColumnProps, {}> {
-
+export class Column extends React.Component<IColumnProps, {}> {
+    public static defaultProps: Partial<IColumnProps> = {
+        prop1: 'prop1'
+    };
+
     render() {
-        return <div>Test</div>;
-    }            
+        const {prop1} = this.props;
+        return <div>{prop1}</div>;
+    }
 }
 
 export default Column;

src/__tests__/data/Row.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react';
+
+/**
+ * Row properties.
+ */
+export interface IRowProps {
+    /** prop1 description */
+    prop1?: string;
+    /** prop2 description */
+    prop2: number;
+    /**
+     * prop3 description
+     */
+    prop3: () => void;
+    /** prop4 description */
+    prop4: 'option1' | 'option2' | "option3";
+}
+
+/**
+ * Form row.
+ */
+export const Row = (props: IRowProps) => {
+    const innerFunc = (props: IRowProps) => {
+        return <span>Inner Func</span>
+    };
+    const innerNonExportedFunc = (props: IRowProps) => {
+        return <span>Inner Func</span>
+    };
+    return <div>Test</div>;
+};
+
+const nonExportedFunc = (props: IRowProps) => {
+    return <div>No Export</div>
+};
+
+export default Row;

src/__tests__/parser.spec.ts

@@ -0,0 +1,74 @@
+import { assert } from 'chai';
+import * as path from 'path';
+import { getDocumentation } from '../parser';
+
+describe('parser', () => {
+    it('Should parse class-based components', () => {
+        const fileName = path.join(__dirname, '../../src/__tests__/data/Column.tsx'); // it's running in ./temp
+        const result = getDocumentation(fileName);
+        assert.ok(result.classes);
+        assert.ok(result.interfaces);
+        assert.equal(1, result.classes.length);
+        assert.equal(1, result.interfaces.length);
+
+        const c = result.classes[0];
+        assert.equal('Column', c.name);
+        assert.equal('Form column.', c.comment);
+        assert.equal('Component', c.extends);
+
+        const i = result.interfaces[0];
+        assert.equal('IColumnProps', i.name);
+        assert.equal('Column properties.', i.comment);
+        assert.equal(4, i.members.length);
+        assert.equal('prop1', i.members[0].name);
+        assert.equal('prop1 description', i.members[0].comment);
+        assert.equal(false, i.members[0].isRequired);
+
+        assert.equal('prop2', i.members[1].name);
+        assert.equal('prop2 description', i.members[1].comment);
+        assert.equal(true, i.members[1].isRequired);
+
+        assert.equal('prop3', i.members[2].name);
+        assert.equal('prop3 description', i.members[2].comment);
+        assert.equal(true, i.members[2].isRequired);
+
+        assert.equal('prop4', i.members[3].name);
+        assert.equal('prop4 description', i.members[3].comment);
+        assert.equal(true, i.members[3].isRequired);
+    });
+
+    it('Should parse functional components', () => {
+        const fileName = path.join(__dirname, '../../src/__tests__/data/Row.tsx'); // it's running in ./temp
+        const result = getDocumentation(fileName);
+        assert.ok(result.classes);
+        assert.ok(result.interfaces);
+        assert.equal(1, result.classes.length);
+        assert.equal(1, result.interfaces.length);
+
+        const c = result.classes[0];
+        assert.equal('Row', c.name);
+        assert.equal('Form row.', c.comment);
+        assert.equal('StatelessComponent', c.extends);
+
+        const i = result.interfaces[0];
+        assert.equal('IRowProps', i.name);
+        assert.equal('Row properties.', i.comment);
+        assert.equal(4, i.members.length);
+        assert.equal('prop1', i.members[0].name);
+        assert.equal('prop1 description', i.members[0].comment);
+        assert.equal(false, i.members[0].isRequired);
+
+        assert.equal('prop2', i.members[1].name);
+        assert.equal('prop2 description', i.members[1].comment);
+        assert.equal(true, i.members[1].isRequired);
+
+        assert.equal('prop3', i.members[2].name);
+        assert.equal('prop3 description', i.members[2].comment);
+        assert.equal(true, i.members[2].isRequired);
+
+        assert.equal('prop4', i.members[3].name);
+        assert.equal('prop4 description', i.members[3].comment);
+        assert.equal(true, i.members[3].isRequired);
+    });
+
+});