Moving things around and isolating build process

.editorconfig

@@ -0,0 +1,13 @@
+# editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

.gitignore

@@ -0,0 +1,4 @@
+node_modules/
+dist/
+docs/build/
+.DS_Store

.node-version

@@ -0,0 +1 @@
+8.x

.npmignore

@@ -0,0 +1,5 @@
+node_modules/
+docs/
+build/
+dist/
+.DS_Store

Gruntfile.js

@@ -0,0 +1,3 @@
+module.exports = function (grunt) {
+  grunt.task.loadTasks('build/tasks');
+};

README.md

@@ -1,16 +1,15 @@
-# Kibana UI Framework
+# Elastic UI Framework
 
-> The Kibana UI Framework is a collection of React UI components for quickly building user interfaces
-> for Kibana. Not using React? No problem! You can still use the CSS behind each component.
+> The Elastic UI Framework is a collection of React UI components for quickly building user interfaces
+> for Elastic. Not using React? No problem! You can still use the CSS behind each component.
 
 ## Using the Framework
 
 ### Documentation
 
-Compile the CSS with `./node_modules/grunt/bin/grunt uiFramework:compileCss` (OS X) or
-`.\node_modules\grunt\bin\grunt uiFramework:compileCss` (Windows).
+Compile the CSS with `npm run compileCss`.
 
-You can view interactive documentation by running `npm run uiFramework:start` and then visiting
+You can view interactive documentation by running `npm run start` and then visiting
 [http://localhost:8020/](http://localhost:8020/). This will also start watching the SCSS files, and will recompile the CSS
 automatically for you when you make changes.
 
@@ -25,18 +24,18 @@ See the documentation in [`scripts/jest.js`](../scripts/jest.js) for more option
 
 There are four steps to creating a new component:
 
-1. Create the SCSS for the component in `ui_framework/src/components`.
+1. Create the SCSS for the component in `src/components`.
 2. Create the React portion of the component.
 3. Write tests.
-4. Document it with examples in `ui_framework/doc_site`.
+4. Document it with examples in `docs`.
 
 You can do this using Yeoman (the easy way), or you can do it manually (the hard way).
 
 ### Using Yeoman
 
 #### Create a new component
 
-From the command line, run `npm run uiFramework:createComponent`.
+From the command line, run `npm run createComponent`.
 
 First, you'll be prompted for what kind of component to create:
 
@@ -77,23 +76,23 @@ and re-export the generated JS and SCSS files.
 
 #### Create component SCSS
 
-1. Create a directory for your component in `ui_framework/src/components`.
+1. Create a directory for your component in `src/components`.
 2. In this directory, create `_{component name}.scss`.
 3. _Optional:_ Create any other components that should be [logically-grouped](#logically-grouped-components)
 in this directory.
 4. Create an `_index.scss` file in this directory that import all of the new component SCSS files
 you created.
-5. Import the `_index.scss` file into `ui_framework/src/components/index.scss`.
+5. Import the `_index.scss` file into `src/components/index.scss`.
 
-This makes your styles available to Kibana and the UI Framework documentation.
+This makes your styles available to Elastic and the UI Framework documentation.
 
 #### Create the React component
 
 1. Create the React component(s) in the same directory as the related SCSS file(s).
 2. Export these components from an `index.js` file.
-3. Re-export these components from `ui_framework/src/components/index.js`.
+3. Re-export these components from `src/components/index.js`.
 
-This makes your React component available for import into Kibana.
+This makes your React component available for import into Elastic.
 
 #### Test the component
 
@@ -107,11 +106,11 @@ To see how well the components have been covered by tests, you can run
 
 #### Document the component with examples
 
-1. Create a directory for your example in `ui_framework/doc_site/src/views`. Name it the name of the
+1. Create a directory for your example in `docs/src/views`. Name it the name of the
 component.
 2. Create a `{component name}_example.js` file inside the directory. You'll use this file to define
 the different examples for your component.
-3. Add the route to this file in `ui_framework/doc_site/src/services/routes/Routes.js`.
+3. Add the route to this file in `docs/src/services/routes/Routes.js`.
 4. In the `{component name}_example.js` file you created, define examples which demonstrate the component and describe
 its role from a UI perspective.
 
@@ -127,7 +126,7 @@ content.
 
 You can use the same Yeoman generator referenced above to create documentation.
 
-From the command line, run `npm run uiFramework:documentComponent`.
+From the command line, run `npm run documentComponent`.
 
 First, you'll be prompted for what kind of documentation to create:
 

build/babel-webpack-preset.js

@@ -0,0 +1,33 @@
+const commonPreset = {
+  presets: [
+    require.resolve('babel-preset-react')
+  ],
+  plugins: [
+    require.resolve('babel-plugin-add-module-exports'),
+
+    // stage 3
+    require.resolve('babel-plugin-transform-async-generator-functions'),
+    require.resolve('babel-plugin-transform-object-rest-spread'),
+
+    // stage 2
+    require.resolve('babel-plugin-transform-class-properties')
+  ]
+}
+
+const babelWebpackPreset = {
+  presets: [
+    [require.resolve('babel-preset-env'), {
+      targets: {
+        browsers: [
+          'last 2 versions',
+          '> 5%',
+          'Safari 7' // for PhantomJS support
+        ]
+      },
+      useBuiltIns: true,
+    }],
+    commonPreset
+  ]
+}
+
+module.exports = babelWebpackPreset

generator-kui/component/index.js → build/generator-kui/component/index.js

@@ -18,7 +18,7 @@ module.exports = class extends Generator {
       message: `Where do you want to create this component's files?`,
       type: 'input',
       name: 'path',
-      default: 'ui_framework/src/components',
+      default: 'src/components',
       store: true,
     }, {
       message: 'Does it need its own directory?',

generator-kui/documentation/index.js → build/generator-kui/documentation/index.js

@@ -2,7 +2,7 @@ const chalk = require('chalk');
 const Generator = require('yeoman-generator');
 const utils = require('../utils');
 
-const DOCUMENTATION_PAGE_PATH = 'ui_framework/doc_site/src/views';
+const DOCUMENTATION_PAGE_PATH = 'docs/src/views';
 
 module.exports = class extends Generator {
   constructor(args, options) {
@@ -21,7 +21,7 @@ module.exports = class extends Generator {
 
     if (this.fileType === 'demo') {
       prompts.push({
-        message: `What's the name of the directory this demo should go in? (Within ui_framework/doc_site/src/views). Use snake_case, please.`,
+        message: `What's the name of the directory this demo should go in? (Within docs/src/views). Use snake_case, please.`,
         name: 'folderName',
         type: 'input',
         store: true,
@@ -116,7 +116,7 @@ module.exports = class extends Generator {
       this.log(chalk.white('\n// Import demo into example.'));
       this.log(
         `${chalk.magenta('import')} ${componentExampleName} from ${chalk.cyan(`'./${fileName}'`)};\n` +
-        `${chalk.magenta('const')} ${componentExamplePrefix}Source = require(${chalk.cyan(`'!!raw!./${fileName}'`)});\n` +
+        `${chalk.magenta('const')} ${componentExamplePrefix}Source = require(${chalk.cyan(`'!!raw-loader!./${fileName}'`)});\n` +
         `${chalk.magenta('const')} ${componentExamplePrefix}Html = renderToHtml(${componentExampleName});`
       );
 

generator-kui/documentation/templates/documentation_page.js → build/generator-kui/documentation/templates/documentation_page.js

@@ -10,10 +10,10 @@ import {
 
 import {
   KuiCode,
-} from '../../../../components';
+} from '../../../../src/components';
 
 import <%= componentExampleName %> from './<%= fileName %>';
-const <%= componentExamplePrefix %>Source = require('!!raw!./<%= fileName %>');
+const <%= componentExamplePrefix %>Source = require('!!raw-loader!./<%= fileName %>');
 const <%= componentExamplePrefix %>Html = renderToHtml(<%= componentExampleName %>);
 
 export default props => (

generator-kui/documentation/templates/documentation_page_demo.js → build/generator-kui/documentation/templates/documentation_page_demo.js

@@ -2,7 +2,7 @@ import React from 'react';
 
 import {
   <%= componentName %>,
-} from '../../../../components';
+} from '../../../../src/components';
 
 export default () => (
   <<%= componentName %>>

build/postcss.config.js

@@ -0,0 +1,11 @@
+module.exports = {
+  plugins: [
+    require('autoprefixer')({
+      browsers: [
+        'last 2 versions',
+        '> 5%',
+        'Safari 7' // for PhantomJS support
+      ]
+    })
+  ]
+};

build/tasks/build.js

@@ -0,0 +1,36 @@
+const os = require('os');
+const platform = os.platform();
+const isPlatformWindows = /^win/.test(platform);
+
+module.exports = function (grunt) {
+  grunt.registerTask('build', function () {
+    const done = this.async();
+
+    const serverCmd = {
+      cmd: isPlatformWindows ? '.\\node_modules\\.bin\\webpack.cmd' : './node_modules/.bin/webpack',
+      args: [
+        '-p',
+        '--config=docs/webpack.config.js'
+      ],
+      opts: { stdio: 'inherit' }
+    };
+
+    const uiFrameworkServerBuild = new Promise((resolve, reject) => {
+      grunt.util.spawn(serverCmd, (error, result, code) => {
+        if (error || code !== 0) {
+          const message = result.stderr || result.stdout;
+
+          grunt.log.error(message);
+
+          return reject();
+        }
+
+        grunt.log.writeln(result);
+
+        resolve();
+      });
+    });
+
+    uiFrameworkServerBuild.then(done);
+  });
+};

build/tasks/compileCss.js

@@ -0,0 +1,41 @@
+const sass = require('node-sass');
+const postcss = require('postcss');
+const postcssConfig = require('../postcss.config');
+
+module.exports = function (grunt) {
+  grunt.registerTask('compileCss', function () {
+    const done = this.async();
+    uiFrameworkCompile().then(done);
+
+    function uiFrameworkCompile() {
+      const compileTheme = name => {
+        const src = `src/${name}.scss`;
+        const dest = `dist/eui_${name}.css`;
+
+        return new Promise(resolve => {
+          sass.render({
+            file: src,
+          }, function (error, result) {
+            if (error) {
+              grunt.log.error(error);
+            }
+
+            postcss([postcssConfig])
+              .process(result.css, { from: src, to: dest })
+              .then(result => {
+                grunt.file.write(dest, result.css);
+
+                if (result.map) {
+                  grunt.file.write(`${dest}.map`, result.map);
+                }
+
+                resolve();
+              });
+          });
+        });
+      };
+
+      return Promise.all([compileTheme('theme_light'), compileTheme('theme_dark')]);
+    }
+  });
+};

build/tasks/start.js

@@ -0,0 +1,78 @@
+const os = require('os');
+const chokidar = require('chokidar');
+const { debounce } = require('lodash');
+const platform = os.platform();
+const isPlatformWindows = /^win/.test(platform);
+
+module.exports = function (grunt) {
+  grunt.registerTask('start', function () {
+    const done = this.async();
+
+    Promise
+      .all([
+        uiFrameworkWatch(),
+        uiFrameworkServerStart()
+      ])
+      .then(done);
+
+    function uiFrameworkWatch() {
+      const debouncedCompile = debounce(() => {
+        // Compile the SCSS in a separate process because node-sass throws a fatal error if it fails
+        // to compile.
+        grunt.util.spawn({
+          cmd: isPlatformWindows ? '.\\node_modules\\.bin\\grunt.cmd' : './node_modules/.bin/grunt',
+          args: [
+            'compileCss',
+          ],
+        }, (error, result) => {
+          if (error) {
+            grunt.log.error(result.stdout);
+          } else {
+            grunt.log.writeln(result);
+          }
+        });
+      }, 400, { leading: true });
+
+      return new Promise(() => {
+        debouncedCompile();
+
+        chokidar.watch('src', { ignoreInitial: true }).on('all', (event, path) => {
+          grunt.log.writeln(event, path);
+          debouncedCompile();
+        });
+      });
+    }
+
+    function uiFrameworkServerStart() {
+      const serverCmd = {
+        cmd: isPlatformWindows ? '.\\node_modules\\.bin\\webpack-dev-server.cmd' : './node_modules/.bin/webpack-dev-server',
+        args: [
+          '--config=docs/webpack.config.js',
+          '--inline',
+          '--content-base=docs/build',
+          '--host=0.0.0.0',
+          '--port=8020',
+        ],
+        opts: { stdio: 'inherit' }
+      };
+
+      return new Promise((resolve, reject) => {
+        grunt.util.spawn(serverCmd, (error, result, code) => {
+          if (error || code !== 0) {
+            const message = result.stderr || result.stdout;
+
+            grunt.log.error(message);
+
+            return reject();
+          }
+
+          grunt.log.writeln(result);
+
+          resolve();
+        });
+
+      });
+    }
+
+  });
+};

components.js

@@ -0,0 +1 @@
+export * from './src/components';