[RFC] Update folder structure (#303)

* chore: move components and tools under src

* chore: move existing test and story files

* chore: update paths for component stories

* chore: remove redundant Staticfile for deploy

* chore: specify node and yarn version range

* chore: remove temp migrate script

* chore: update import paths for components

* chore: fix eslint violations

* chore: run prettier

* chore: revert version change for warning module

* chore: update yarn version in engines field

.gitignore

@@ -1,7 +1,7 @@
 # Ignore generated folders
 node_modules
-cjs
 es
+lib
 storybook-static
 
 # Logs

.storybook/config.js

@@ -9,7 +9,7 @@ addDecorator(story => <Container story={story} />);
 setAddon(infoAddon);
 
 function loadStories() {
-  const req = require.context('./components', true, /\.js$/);
+  const req = require.context('../src/components', true, /\-story\.js$/);
   req.keys().forEach(filename => req(filename));
 }
 

.travis.yml

@@ -1,7 +1,7 @@
 language: node_js
 
 node_js:
-  - '6'
+  - '8'
 
 cache:
   yarn: true

package.json

@@ -2,30 +2,34 @@
   "name": "carbon-components-react",
   "description": "A React wrapper for carbon-components",
   "license": "Apache-2",
-  "main": "cjs/index.js",
+  "main": "lib/index.js",
   "module": "es/index.js",
   "scripts": {
-    "ci-check": "npm run lint && npm run test && npm run test-ssr",
-    "lint": "eslint {components,internal}/**",
-    "test": "jest",
-    "test-ssr": "npm run build && node server-side-rendering-tests/*.js",
-    "prepublish": "npm run build",
     "build": "node scripts/build.js",
-    "commitmsg": "validate-commit-msg",
-    "commit": "git cz",
-    "storybook": "start-storybook -p 9000",
     "build-storybook": "build-storybook",
-    "start": "npm run storybook",
+    "ci-check": "yarn lint && yarn test && yarn test-ssr",
+    "commit": "git cz",
+    "commitmsg": "validate-commit-msg",
+    "lint": "eslint src/**",
+    "prepublish": "yarn build",
+    "prettier": "prettier --write **/*.js",
     "semantic-release": "semantic-release pre && npm publish && semantic-release post",
-    "prettier": "prettier --write **/*.js"
+    "start": "yarn storybook",
+    "storybook": "start-storybook -p 9000",
+    "test": "jest",
+    "test-ssr": "yarn build && node ssr-tests/*.js"
+  },
+  "engines": {
+    "node": "^8.8.1",
+    "yarn": "^1.3.2"
   },
   "keywords": [
     "react",
     "carbon",
     "carbon-components"
   ],
   "files": [
-    "cjs/**/*",
+    "lib/**/*",
     "es/**/*"
   ],
   "contributors": [
@@ -141,6 +145,16 @@
     "validate-commit-msg": "^2.10.1",
     "whatwg-fetch": "^2.0.3"
   },
+  "babel": {
+    "presets": [
+      "./scripts/env",
+      "react",
+      "stage-1"
+    ],
+    "plugins": [
+      "transform-object-assign"
+    ]
+  },
   "prettier": {
     "jsxBracketSameLine": true,
     "printWidth": 80,
@@ -189,7 +203,7 @@
     ],
     "testMatch": [
       "<rootDir>/**/__tests__/**/*.js?(x)",
-      "<rootDir>/**/?(*.)(spec|test).js?(x)"
+      "<rootDir>/**/?(*-)(spec|test).js?(x)"
     ],
     "testURL": "http://localhost",
     "transform": {

scripts/build.js

@@ -1,44 +1,37 @@
-const execSync = require('child_process').execSync;
-const inInstall = require('in-publish').inInstall;
+'use strict';
+
+const { execSync } = require('child_process');
+const { inInstall } = require('in-publish');
 const path = require('path');
 const rimraf = require('rimraf');
+const { promisify } = require('util');
 
-if (inInstall()) process.exit(0);
+if (inInstall()) {
+  process.exit(0);
+}
 
-let babelPath = path.resolve(__dirname, '../node_modules/.bin/babel');
-babelPath = babelPath.replace(/ /g, '\\ ');
-const dirs = ['components', 'lib', 'internal'];
 const rootDir = path.resolve(__dirname, '../');
+const babelPath = path
+  .resolve(__dirname, '../node_modules/.bin/babel')
+  .replace(/ /g, '\\ ');
+const rimrafAsync = promisify(rimraf);
 
 const exec = (command, extraEnv) =>
   execSync(command, {
     stdio: 'inherit',
     env: Object.assign({}, process.env, extraEnv),
   });
 
-const compile = (dirs, type) => {
-  dirs.forEach(dir => {
-    exec(`${babelPath} ${dir} --out-dir ${type}/${dir} --ignore __tests__`, {
-      BABEL_ENV: type,
+console.log('Deleting old build folders...');
+Promise.all([rimrafAsync(`${rootDir}/cjs`), rimrafAsync(`${rootDir}/es`)])
+  .then(() => {
+    exec(`${babelPath} src -q -d es --ignore __tests__`, {
+      BABEL_ENV: 'es',
     });
+    exec(`${babelPath} src -q -d lib --ignore __tests__`, {
+      BABEL_ENV: 'cjs',
+    });
+  })
+  .catch(error => {
+    throw error;
   });
-
-  exec(`${babelPath} index.js -d ${type}`, {
-    BABEL_ENV: type,
-  });
-};
-
-console.log('Deleting old build folders ...');
-rimraf(`${rootDir}/cjs`, err => {
-  if (err) throw err;
-
-  rimraf(`${rootDir}/es`, err => {
-    if (err) throw err;
-
-    console.log('Building CommonJS modules ...');
-    compile(dirs, 'cjs');
-
-    console.log('\nBuilding ES modules ...');
-    compile(dirs, 'es');
-  });
-});

.storybook/components/AccordionStory.js → src/components/Accordion/Accordion-story.js

@@ -1,9 +1,11 @@
+/* eslint-disable no-console */
+
 import React from 'react';
 import { storiesOf, action } from '@storybook/react';
-import Accordion from '../../components/Accordion';
-import AccordionItem from '../../components/AccordionItem';
-import Select from '../../components/Select';
-import SelectItem from '../../components/SelectItem';
+import Accordion from '../Accordion';
+import AccordionItem from '../AccordionItem';
+import Select from '../Select';
+import SelectItem from '../SelectItem';
 
 const props = {
   onHeadingClick: ({ isOpen }) => {

src/components/Accordion/index.js

@@ -0,0 +1,2 @@
+import Accordion from './Accordion';
+export default Accordion;

components/AccordionItem.js → src/components/AccordionItem/AccordionItem.js

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import classnames from 'classnames';
-import Icon from './Icon';
+import Icon from '../Icon';
 
 class AccordionItem extends Component {
   static propTypes = {

src/components/AccordionItem/index.js

@@ -0,0 +1,2 @@
+import AccordionItem from './AccordionItem';
+export default AccordionItem;

.storybook/components/BreadcrumbStory.js → src/components/Breadcrumb/Breadcrumb-story.js

@@ -1,7 +1,9 @@
+/* eslint-disable no-console */
+
 import React from 'react';
 import { storiesOf } from '@storybook/react';
-import Breadcrumb from '../../components/Breadcrumb';
-import BreadcrumbItem from '../../components/BreadcrumbItem';
+import Breadcrumb from '../Breadcrumb';
+import BreadcrumbItem from '../BreadcrumbItem';
 
 const additionalProps = {
   onClick: () => {

src/components/Breadcrumb/index.js

@@ -0,0 +1,2 @@
+import Breadcrumb from './Breadcrumb';
+export default Breadcrumb;

components/BreadcrumbItem.js → src/components/BreadcrumbItem/BreadcrumbItem.js

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import classnames from 'classnames';
-import Link from './Link';
+import Link from '../Link';
 
 const propTypes = {
   children: PropTypes.node,

src/components/BreadcrumbItem/index.js

@@ -0,0 +1,2 @@
+import BreadcrumbItem from './BreadcrumbItem';
+export default BreadcrumbItem;

.storybook/components/ButtonStory.js → src/components/Button/Button-story.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { storiesOf, action } from '@storybook/react';
-import Button from '../../components/Button';
+import Button from '../Button';
 
 const buttonEvents = {
   onClick: action('onClick'),

components/__tests__/Button-test.js → src/components/Button/Button-test.js

@@ -5,13 +5,15 @@ import { shallow, mount } from 'enzyme';
 describe('Button', () => {
   describe('Renders common props as expected', () => {
     const wrapper = shallow(
+      // eslint-disable-next-line jsx-a11y/tabindex-no-positive
       <Button tabIndex={2} className="extra-class">
         <div className="child">child</div>
         <div className="child">child</div>
       </Button>
     );
 
     const wrapperHref = shallow(
+      // eslint-disable-next-line jsx-a11y/tabindex-no-positive
       <Button tabIndex={2} className="extra-class" href="/home">
         <div className="child">child</div>
         <div className="child">child</div>
@@ -36,6 +38,7 @@ describe('Button', () => {
 
   describe('Renders <button> props as expected', () => {
     const wrapper = shallow(
+      // eslint-disable-next-line jsx-a11y/tabindex-no-positive
       <Button tabIndex={2}>
         <div className="child">child</div>
         <div className="child">child</div>
@@ -69,6 +72,7 @@ describe('Button', () => {
 
   describe('Renders <a> props as expected', () => {
     const wrapper = shallow(
+      // eslint-disable-next-line jsx-a11y/tabindex-no-positive
       <Button href="#" tabIndex={2}>
         <div className="child">child</div>
         <div className="child">child</div>

components/Button.js → src/components/Button/Button.js

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import Icon from '../components/Icon';
+import Icon from '../Icon';
 import classNames from 'classnames';
 
 const propTypes = {

src/components/Button/index.js

@@ -0,0 +1,2 @@
+import Button from './Button';
+export default Button;