chore: export flow types (#94)

* chore: export flow type

* chore: simply flow export

* chore: add comment

* chore: use .js.flow files

* chore: rebase with master

* chore: rebase with master

* chore: remove flow from scripts

* chore: remove flowfixme

* chore: go away unpm

* chore: undo package.json changes on files and main stuff

* chore: address comments

* fix: flow error

package.json

@@ -24,7 +24,7 @@
     "build-storybook": "build-storybook -o docs",
     "precommit": "pretty-quick --staged && yarn run test",
     "build":
-      "rm -rf dist && rollup -c rollup.config.js && cp package.json dist/package.json",
+      "rm -rf dist && rollup -c rollup.config.js && node ./scripts/flow-copy-src.js && cp package.json dist/package.json",
     "unit-test": "yarn jest --coverage",
     "e2e": "node ./e2e/e2e.js",
     "build-e2e": "rollup -c rollup.config_e2e.js",
@@ -68,6 +68,7 @@
     "eslint-plugin-prettier": "^2.6.1",
     "eslint-plugin-react": "^7.10.0",
     "flow-bin": "^0.75.0",
+    "flow-copy-source": "^2.0.2",
     "geckodriver": "^1.11.0",
     "husky": "^0.14.3",
     "jest": "^23.3.0",

rollup.config.js

@@ -9,6 +9,8 @@ import commonjs from 'rollup-plugin-commonjs';
 import fs from 'fs';
 import path from 'path';
 
+import flowEntry from './scripts/rollup-plugin-flow-entry';
+
 function getComponents() {
   return fs.readdirSync('./src/components').filter(filename => {
     const {ext, name} = path.parse(filename);
@@ -70,6 +72,7 @@ function getSharedConfig({filePath, name}) {
       }),
       visualizer(),
       filesize(),
+      flowEntry(),
     ],
   };
 }

scripts/flow-copy-src.js

@@ -0,0 +1,19 @@
+// @flow
+const flowCopySource = require('flow-copy-source');
+
+async function run() {
+  await flowCopySource([`${__dirname}/../src`], `${__dirname}/../dist/src`, {
+    ignore: [
+      '**/*.test.js',
+      '**/*.setup.js',
+      '**/*stories.js',
+      'test/**/*.js',
+      '**/__mocks__/*.js',
+      '**/e2e.js',
+      'coverage/**/*.js',
+      '**/*examples.js',
+    ],
+  });
+}
+
+run();

scripts/rollup-plugin-flow-entry.js

@@ -0,0 +1,87 @@
+// @flow
+import fs from 'fs';
+import path from 'path';
+
+/*
+We can consider this as well:
+https://github.com/RichieAHB/rollup-plugin-flow-defs/blob/master/src/index.js
+This code is inspired by that npm package anyway.
+
+The reason why we don't use that is because:
+* Package depends on `mkdirp`. It's just one dependency, but it's an extra dep for such a simple thing to do.
+* We cannot override the output path for the flow entry file content
+
+Hence, it's easier to write our own so we can do full modifications as needed.
+ */
+
+function getFlowFileContent(filePath) {
+  /*
+  Since we're running this during rollup process, it will be relative to the main `src` directory.
+  We do not want that.
+  We want to make it point to the `src` directory that will be created with our scripts later in the build process
+  from `flow-copy-src.js`.
+
+  Hence, instead of `../src` and `../../src`, they will become `./src` and `../src` respectively.
+  */
+
+  // Find `../` pattern in the `filePath`
+  const regex = new RegExp(/\.\.\//, 'g');
+  // We want to know how many `../` is inside the file path
+  const matched = filePath.match(regex);
+  if (matched && matched.length > 0) {
+    // Check whether it's only one `../`
+    if (matched.length === 1) {
+      // Only 1, replace it with `./`
+      filePath = filePath.replace('../', './');
+    } else {
+      // Must be more than 1, then just remove one `../`
+      filePath = filePath.replace('../', '');
+    }
+  }
+  // Remove the `.js` extension, if any, so that it could point to `.js.flow` automatically
+  filePath = filePath.replace('.js', '');
+  return `// @flow
+export * from '${filePath}';`;
+}
+
+export default function flowEntry() {
+  let input;
+  return {
+    name: 'rollup-plugin-flow-entry',
+    // $FlowFixMe can't have annotations here since it's for rollup
+    options(opts) {
+      input = opts.input;
+    },
+    // $FlowFixMe can't have annotations here since it's for rollup
+    async generateBundle(opts) {
+      const {file = ''} = opts || {};
+
+      // Create file path if does not exist
+      await new Promise(resolve => {
+        const dirname = path.dirname(file);
+        if (!fs.existsSync(dirname)) {
+          fs.mkdirSync(dirname);
+        }
+        resolve('ok');
+      });
+
+      await new Promise((resolve, reject) => {
+        /*
+        path.dirname(input); // src/components/popover
+        path.basename(input); // index.js
+        path.dirname(file); // this is output, `dist/popover`
+         */
+        const relativePath = path.join(
+          path.relative(path.dirname(file), path.dirname(input)),
+          path.basename(input),
+        );
+        fs.writeFile(`${file}.flow`, getFlowFileContent(relativePath), err => {
+          if (err) {
+            reject(err);
+          }
+          resolve('ok');
+        });
+      });
+    },
+  };
+}

src/components/checkbox/index.js

@@ -10,3 +10,6 @@ export {
   Label as StyledLabel,
   Input as StyledInput,
 } from './styled-components';
+
+// Flow
+export * from './types';

src/components/input/index.js

@@ -13,3 +13,6 @@ export {
   Caption as StyledCaption,
 } from './styled-components';
 export {STATE_CHANGE_TYPE, ADJOINED, SIZE} from './constants';
+
+// Flow
+export * from './types';

src/components/popover/index.js

@@ -16,3 +16,6 @@ export {
   Inner as StyledInner,
   Padding as StyledPadding,
 } from './styled-components';
+
+// Flow
+export * from './types';

src/components/tooltip/index.js

@@ -15,3 +15,6 @@ export {
   Body as StyledBody,
   Inner as StyledInner,
 } from './styled-components';
+
+// Flow
+export * from './types';