Moving things around and isolating build process

Author: bevacqua

.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/app/component.js renamed to build/generator-kui/app/component.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?',