Chore: UI Framework Package

package.json

@@ -61,11 +61,7 @@
     "lintroller": "grunt eslint:fixSource",
     "makelogs": "echo 'use `node scripts/makelogs`' && false",
     "mocha": "echo 'use `node scripts/mocha`' && false",
-    "sterilize": "grunt sterilize",
-    "uiFramework:start": "grunt uiFramework:start",
-    "uiFramework:build": "grunt uiFramework:build",
-    "uiFramework:createComponent": "yo ./ui_framework/generator-kui/app/component.js",
-    "uiFramework:documentComponent": "yo ./ui_framework/generator-kui/app/documentation.js"
+    "sterilize": "grunt sterilize"
   },
   "repository": {
     "type": "git",

packages/ui_framework/.gitignore

@@ -0,0 +1,2 @@
+build/
+doc_site/build/

ui_framework/README.md → packages/ui_framework/README.md

@@ -25,10 +25,10 @@ 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 `doc_site`.
 
 You can do this using Yeoman (the easy way), or you can do it manually (the hard way).
 
@@ -77,21 +77,21 @@ 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.
 
 #### 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.
 
@@ -107,11 +107,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 `doc_site/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 `doc_site/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.
 

ui_framework/doc_site/src/views/app_view.js → packages/ui_framework/doc_site/src/views/app_view.js

@@ -13,7 +13,7 @@ import {
 } from '../components';
 
 // Inject version into header.
-const pkg = require('../../../../package.json');
+const pkg = require('../../../package.json');
 
 export class AppView extends Component {
   constructor(props) {

ui_framework/doc_site/src/views/home/home_view.js → packages/ui_framework/doc_site/src/views/home/home_view.js

@@ -28,7 +28,7 @@ export const HomeView = () => (
 
       <p className="guideText">
         You can find the source for the UI Framework
-        at the <a href="https://github.com/elastic/kibana/tree/master/ui_framework" className="guideLink">Kibana repo</a>.
+        at the <a href="https://github.com/elastic/kibana/tree/master/packages/ui_framework" className="guideLink">Kibana repo</a>.
       </p>
 
       <p className="guideText">

ui_framework/generator-kui/component/index.js → packages/ui_framework/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?',

ui_framework/generator-kui/documentation/index.js → packages/ui_framework/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 = 'doc_site/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 doc_site/src/views). Use snake_case, please.`,
         name: 'folderName',
         type: 'input',
         store: true,

packages/ui_framework/index.js

@@ -0,0 +1,2 @@
+import './src/index.scss';
+import './src/components';

packages/ui_framework/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "ui_framework",
+  "version": "1.0.0",
+  "main": "index.js",
+  "license": "MIT",
+  "scripts": {
+    "build": "webpack -p --config=webpack.doc_site.js",
+    "start": "webpack-dev-server --config=webpack.doc_site.js --hot --inline --content-base=doc_site/build --host=0.0.0.0 --port=8020",
+    "createComponent": "yo ./generator-kui/app/component.js",
+    "documentComponent": "yo ./generator-kui/app/documentation.js",
+    "dist": "rimraf build && webpack -p --config=webpack.build.js"
+  },
+  "dependencies": {
+    "classnames": "~2.2.5",
+    "jquery": "~2.2.4",
+    "prop-types": "~15.5.10",
+    "react": "~15.6.1",
+    "react-color": "~2.11.7",
+    "react-dom": "~15.6.1",
+    "react-redux": "~4.4.5",
+    "react-router": "~2.0.0",
+    "react-router-redux": "~4.0.4",
+    "redux": "~3.1.0",
+    "redux-thunk": "~0.1.0"
+  },
+  "devDependencies": {
+    "babel-core": "~6.21.0",
+    "babel-loader": "~6.2.10",
+    "babel-plugin-add-module-exports": "~0.2.1",
+    "babel-plugin-transform-async-generator-functions": "~6.24.1",
+    "babel-plugin-transform-class-properties": "~6.24.1",
+    "babel-plugin-transform-object-rest-spread": "~6.23.0",
+    "babel-preset-env": "~1.4.0",
+    "babel-preset-react": "~6.22.0",
+    "css-loader": "~0.28.1",
+    "enzyme": "~2.9.1",
+    "expose-loader": "~0.7.0",
+    "extract-text-webpack-plugin": "~0.8.2",
+    "file-loader": "~0.8.4",
+    "highlight.js": "~9.0.0",
+    "html": "~1.0.0",
+    "html-loader": "~0.4.3",
+    "json-loader": "~0.5.3",
+    "keymirror": "~0.1.1",
+    "node-sass": "~3.8.0",
+    "postcss-loader": "~1.3.3",
+    "raw-loader": "~0.5.1",
+    "react-addons-test-utils": "~15.6.0",
+    "react-test-renderer": "~15.6.1",
+    "rimraf": "^2.6.1",
+    "sass-loader": "~4.0.0",
+    "sinon": "~3.2.1",
+    "style-loader": "~0.12.3",
+    "webpack": "~1.12.15",
+    "webpack-dev-server": "~1.14.1",
+    "webpack-merge": "^4.1.0",
+    "yeoman-generator": "~1.1.1",
+    "yo": "~2.0.0"
+  }
+}