Merge pull request #4971 from Nemvts/4955-storysource-flow-parser

Feat: Add support for Flow to @addons/storysource

__mocks__/inject-decorator.flow-stories.txt

@@ -0,0 +1,35 @@
+// @flow
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { withInfo } from '@storybook/addon-info';
+
+import TableComponent from '../components/TableComponent';
+
+import type { JssClasses } from '../types';
+
+type State = {
+  value: any,
+};
+
+type Props = {
+  classes: JssClasses,
+  name: string,
+};
+
+class Table extends React.Component<Props, State> {
+  constructor(props) {
+    super(props);
+    this.state = {
+      value: undefined,
+    };
+  }
+
+  state: State;
+
+  render() {
+    return <TableComponent />;
+  }
+}
+
+const stories = storiesOf('Table', module);
+stories.add('Flow Class', withInfo('Lorum Ipsum Nem')(() => <Table />));

addons/storysource/README.md

@@ -46,6 +46,7 @@ The parser that will be parsing your code to AST (based on [prettier](https://gi
 Alowed values:
 * `javascript` - default
 * `typescript`
+* `flow`
 
 Usage:
 

addons/storysource/src/loader/__snapshots__/inject-decorator.test.js.snap

@@ -19,6 +19,45 @@ storiesOf('Custom|ng-content', module).add('Default', () => ({
 "
 `;
 
+exports[`inject-decorator injectDecorator option is false - flow does not inject stories decorator after the all "storiesOf" functions 1`] = `
+"// @flow
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { withInfo } from '@storybook/addon-info';
+
+import TableComponent from '../components/TableComponent';
+
+import type { JssClasses } from '../types';
+
+type State = {
+  value: any,
+};
+
+type Props = {
+  classes: JssClasses,
+  name: string,
+};
+
+class Table extends React.Component<Props, State> {
+  constructor(props) {
+    super(props);
+    this.state = {
+      value: undefined,
+    };
+  }
+
+  state: State;
+
+  render() {
+    return <TableComponent />;
+  }
+}
+
+const stories = storiesOf('Table', module);
+stories.add('Flow Class', withInfo('Lorum Ipsum Nem')(() => <Table />));
+"
+`;
+
 exports[`inject-decorator injectDecorator option is false - ts does not inject stories decorator after the all "storiesOf" functions 1`] = `
 "import { Component } from '@angular/core';
 import { Store, StoreModule } from '@ngrx/store';
@@ -245,6 +284,60 @@ storiesOf('Custom|ng-content', module).addDecorator(withStorySource(__STORY__, _
 "
 `;
 
+exports[`inject-decorator positive - flow calculates "adds" map 1`] = `
+Object {
+  "@Flow Class": Object {
+    "endLoc": Object {
+      "col": 70,
+      "line": 35,
+    },
+    "startLoc": Object {
+      "col": 12,
+      "line": 35,
+    },
+  },
+}
+`;
+
+exports[`inject-decorator positive - flow injects stories decorator after the all "storiesOf" functions 1`] = `
+"// @flow
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { withInfo } from '@storybook/addon-info';
+
+import TableComponent from '../components/TableComponent';
+
+import type { JssClasses } from '../types';
+
+type State = {
+  value: any,
+};
+
+type Props = {
+  classes: JssClasses,
+  name: string,
+};
+
+class Table extends React.Component<Props, State> {
+  constructor(props) {
+    super(props);
+    this.state = {
+      value: undefined,
+    };
+  }
+
+  state: State;
+
+  render() {
+    return <TableComponent />;
+  }
+}
+
+const stories = storiesOf('Table', module).addDecorator(withStorySource(__STORY__, __ADDS_MAP__));
+stories.add('Flow Class', withInfo('Lorum Ipsum Nem')(() => <Table />));
+"
+`;
+
 exports[`inject-decorator positive - ts calculates "adds" map 1`] = `
 Object {
   "ngrx|Store@With component": Object {

addons/storysource/src/loader/inject-decorator.test.js

@@ -51,6 +51,29 @@ describe('inject-decorator', () => {
     });
   });
 
+  describe('positive - flow', () => {
+    const mockFilePath = './__mocks__/inject-decorator.flow-stories.txt';
+    const source = fs.readFileSync(mockFilePath, 'utf-8');
+    const result = injectDecorator(
+      source,
+      ADD_DECORATOR_STATEMENT,
+      path.resolve(__dirname, mockFilePath),
+      { parser: 'flow' }
+    );
+
+    it('returns "changed" flag', () => {
+      expect(result.changed).toBeTruthy();
+    });
+
+    it('injects stories decorator after the all "storiesOf" functions', () => {
+      expect(result.source).toMatchSnapshot();
+    });
+
+    it('calculates "adds" map', () => {
+      expect(result.addsMap).toMatchSnapshot();
+    });
+  });
+
   describe('positive - ts', () => {
     const mockFilePath = './__mocks__/inject-decorator.ts.txt';
     const source = fs.readFileSync(mockFilePath, 'utf-8');
@@ -155,6 +178,24 @@ describe('inject-decorator', () => {
     });
   });
 
+  describe('injectDecorator option is false - flow', () => {
+    const mockFilePath = './__mocks__/inject-decorator.flow-stories.txt';
+    const source = fs.readFileSync(mockFilePath, 'utf-8');
+    const result = injectDecorator(
+      source,
+      ADD_DECORATOR_STATEMENT,
+      path.resolve(__dirname, mockFilePath),
+      {
+        injectDecorator: false,
+        parser: 'flow',
+      }
+    );
+
+    it('does not inject stories decorator after the all "storiesOf" functions', () => {
+      expect(result.source).toMatchSnapshot();
+    });
+  });
+
   describe('injectDecorator option is false - ts', () => {
     const mockFilePath = './__mocks__/inject-decorator.ts.txt';
     const source = fs.readFileSync(mockFilePath, 'utf-8');

addons/storysource/src/loader/parsers/index.js

@@ -9,6 +9,11 @@ function getParser(type) {
     return require('./parser-ts').default;
   }
 
+  if (type === 'flow') {
+    // eslint-disable-next-line global-require
+    return require('./parser-flow').default;
+  }
+
   throw new Error(`Parser of type "${type}" is not supported`);
 }
 

addons/storysource/src/loader/parsers/parser-flow.js

@@ -0,0 +1,9 @@
+import parseFlow from 'prettier/parser-flow';
+
+function parse(source) {
+  return parseFlow.parsers.flow.parse(source);
+}
+
+export default {
+  parse,
+};