[@kbn/ui-framework] move ui-framework to a package (elastic#17085)

* [@kbn/ui-framework] move ui-framework to a package

* [@kbn/ui-framework] restore doc_site index.html and fix build task names

* [jest] always ignore modules in target dirs

.eslintignore

@@ -9,7 +9,6 @@
 /src/core_plugins/console/public/tests/webpackShims
 /src/ui/public/utils/decode_geo_hash.js
 /src/core_plugins/timelion/public/webpackShims/jquery.flot.*
-/ui_framework/doc_site/build
 /tasks/vendor
 /packages/*/node_modules
 /packages/*/target
@@ -18,4 +17,7 @@
 /packages/kbn-pm/dist
 /packages/kbn-pm/vendor
 /packages/kbn-plugin-generator/sao_template/template
+/packages/kbn-ui-framework/dist
+/packages/kbn-ui-framework/doc_site/build
+/packages/kbn-ui-framework/generator-kui/*/templates/
 !/.eslintrc.js

.eslintrc.js

@@ -41,5 +41,44 @@ module.exports = {
         'prefer-object-spread/prefer-object-spread': 'off',
       },
     },
+
+    // files that are not allowed to use devDepenedncies
+    {
+      files: ['packages/kbn-ui-framework/**/*'],
+      excludedFiles: [
+        'packages/kbn-ui-framework/**/*.test.js',
+        'packages/kbn-ui-framework/doc_site/**/*',
+        'packages/kbn-ui-framework/generator-kui/**/*',
+        'packages/kbn-ui-framework/Gruntfile.js',
+      ],
+      rules: {
+        'import/no-extraneous-dependencies': [
+          'error',
+          {
+            devDependencies: false,
+            peerDependencies: true,
+          },
+        ],
+      },
+    },
+
+    // files that are allowed to use devDepenedncies
+    {
+      files: [
+        'packages/kbn-ui-framework/**/*.test.js',
+        'packages/kbn-ui-framework/doc_site/**/*',
+        'packages/kbn-ui-framework/generator-kui/**/*',
+        'packages/kbn-ui-framework/Gruntfile.js',
+      ],
+      rules: {
+        'import/no-extraneous-dependencies': [
+          'error',
+          {
+            devDependencies: true,
+            peerDependencies: true,
+          },
+        ],
+      },
+    },
   ],
 };

.gitignore

@@ -33,8 +33,8 @@ selenium
 *.swp
 *.swo
 *.out
-ui_framework/doc_site/build
-!ui_framework/doc_site/build/index.html
+/packages/kbn-ui-framework/doc_site/build/*
+!/packages/kbn-ui-framework/doc_site/build/index.html
 package-lock.json
 .yo-rc.json
 /.vscode

package.json

@@ -66,10 +66,10 @@
     "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"
+    "uiFramework:start": "cd packages/kbn-ui-framework && yarn docSiteStart",
+    "uiFramework:build": "cd packages/kbn-ui-framework && yarn docSiteBuild",
+    "uiFramework:createComponent": "cd packages/kbn-ui-framework && yarn createComponent",
+    "uiFramework:documentComponent": "cd packages/kbn-ui-framework && yarn documentComponent"
   },
   "repository": {
     "type": "git",
@@ -84,6 +84,7 @@
     "@kbn/datemath": "link:packages/kbn-datemath",
     "@kbn/pm": "link:packages/kbn-pm",
     "@kbn/test-subj-selector": "link:packages/kbn-test-subj-selector",
+    "@kbn/ui-framework": "link:packages/kbn-ui-framework",
     "JSONStream": "1.1.1",
     "accept-language-parser": "1.2.0",
     "angular": "1.6.5",
@@ -120,11 +121,8 @@
     "encode-uri-query": "1.0.0",
     "even-better": "7.0.2",
     "expiry-js": "0.1.7",
-    "exports-loader": "0.6.4",
-    "expose-loader": "0.7.3",
     "extract-text-webpack-plugin": "3.0.1",
     "file-loader": "1.1.4",
-    "focus-trap-react": "^3.1.1",
     "font-awesome": "4.4.0",
     "glob": "5.0.13",
     "glob-all": "3.0.1",
@@ -135,7 +133,6 @@
     "hjson": "3.1.0",
     "http-proxy-agent": "1.0.0",
     "https-proxy-agent": "2.1.1",
-    "imports-loader": "0.7.1",
     "inert": "4.0.2",
     "jade": "1.11.0",
     "jade-loader": "0.8.0",
@@ -170,17 +167,14 @@
     "querystring-browser": "1.0.4",
     "raw-loader": "0.5.1",
     "react": "^16.2.0",
-    "react-ace": "^5.9.0",
     "react-anything-sortable": "^1.7.3",
     "react-color": "^2.13.8",
     "react-dom": "^16.2.0",
     "react-grid-layout": "^0.16.2",
     "react-input-range": "^1.3.0",
     "react-markdown": "^3.1.4",
     "react-redux": "^5.0.6",
-    "react-router": "^3.2.0",
     "react-router-dom": "4.2.2",
-    "react-router-redux": "^4.0.8",
     "react-select": "^1.2.0",
     "react-sizeme": "^2.3.6",
     "react-toggle": "4.0.2",
@@ -198,7 +192,6 @@
     "script-loader": "0.7.2",
     "semver": "5.1.0",
     "style-loader": "0.19.0",
-    "tabbable": "1.1.0",
     "tar": "2.2.0",
     "tinygradient": "0.3.0",
     "topojson-client": "3.0.0",
@@ -261,9 +254,6 @@
     "grunt-run": "0.7.0",
     "grunt-simple-mocha": "0.4.0",
     "gulp-sourcemaps": "1.7.3",
-    "highlight.js": "9.0.0",
-    "html": "1.0.0",
-    "html-loader": "0.5.1",
     "husky": "0.8.1",
     "image-diff": "1.6.0",
     "istanbul-instrumenter-loader": "3.0.0",
@@ -279,7 +269,6 @@
     "karma-junit-reporter": "1.2.0",
     "karma-mocha": "1.3.0",
     "karma-safari-launcher": "1.0.0",
-    "keymirror": "0.1.1",
     "leadfoot": "1.7.1",
     "license-checker": "^16.0.0",
     "load-grunt-config": "0.19.2",
@@ -290,11 +279,9 @@
     "murmurhash3js": "3.0.1",
     "ncp": "2.0.0",
     "nock": "8.0.0",
-    "node-sass": "4.5.3",
     "pixelmatch": "4.0.2",
     "prettier": "^1.11.1",
     "proxyquire": "1.7.10",
-    "sass-loader": "6.0.6",
     "simple-git": "1.37.0",
     "sinon": "1.17.2",
     "source-map": "0.5.6",
@@ -305,11 +292,8 @@
     "tree-kill": "1.1.0",
     "ts-jest": "^22.0.4",
     "typescript": "^2.7.2",
-    "webpack-dev-server": "2.9.1",
     "xml2js": "0.4.19",
-    "xmlbuilder": "9.0.4",
-    "yeoman-generator": "1.1.1",
-    "yo": "2.0.0"
+    "xmlbuilder": "9.0.4"
   },
   "engines": {
     "node": "8.9.4",

tasks/ui_framework.js → packages/kbn-ui-framework/Gruntfile.js

@@ -1,21 +1,61 @@
-import sass from 'node-sass';
-import postcss from 'postcss';
-import postcssConfig from '../src/optimize/postcss.config';
-import chokidar from 'chokidar';
-import debounce from 'lodash/function/debounce';
+const sass = require('node-sass');
+const postcss = require('postcss');
+const postcssConfig = require('../../src/optimize/postcss.config');
+const chokidar = require('chokidar');
+const debounce = require('lodash/function/debounce');
 
 const platform = require('os').platform();
 const isPlatformWindows = /^win/.test(platform);
 
 module.exports = function (grunt) {
-  grunt.registerTask('uiFramework:build', function () {
+  grunt.initConfig({
+    clean: {
+      target: ['target'],
+    },
+    copy: {
+      makeProdBuild: {
+        expand: true,
+        src: [
+          'components/**/*',
+          'dist/**/*',
+          'src/**/*',
+          'package.json',
+          '!**/*.test.js',
+          '!**/__snapshots__/**/*',
+        ],
+        dest: 'target',
+      }
+    },
+    babel: {
+      prodBuild: {
+        expand: true,
+        src: [
+          'target/components/**/*.js',
+          'target/src/**/*.js',
+        ],
+        dest: '.',
+        options: {
+          presets: [
+            require.resolve('@kbn/babel-preset/webpack')
+          ]
+        },
+      }
+    }
+  });
+
+  grunt.loadNpmTasks('grunt-babel');
+  grunt.loadNpmTasks('grunt-contrib-clean');
+  grunt.loadNpmTasks('grunt-contrib-copy');
+  grunt.registerTask('prodBuild', ['clean:target', 'copy:makeProdBuild', 'babel:prodBuild']);
+
+  grunt.registerTask('docSiteBuild', function () {
     const done = this.async();
 
     const serverCmd = {
       cmd: isPlatformWindows ? '.\\node_modules\\.bin\\webpack.cmd' : './node_modules/.bin/webpack',
       args: [
         '-p',
-        '--config=ui_framework/doc_site/webpack.config.js',
+        '--config=doc_site/webpack.config.js',
         '--devtool=null', // Prevent the source map from being generated
       ],
       opts: { stdio: 'inherit' }
@@ -40,12 +80,12 @@ module.exports = function (grunt) {
     uiFrameworkServerBuild.then(done);
   });
 
-  grunt.registerTask('uiFramework:start', function () {
+  grunt.registerTask('docSiteStart', function () {
     const done = this.async();
     Promise.all([uiFrameworkWatch(), uiFrameworkServerStart()]).then(done);
   });
 
-  grunt.registerTask('uiFramework:compileCss', function () {
+  grunt.registerTask('compileCss', function () {
     const done = this.async();
     uiFrameworkCompile().then(done);
   });
@@ -54,10 +94,10 @@ module.exports = function (grunt) {
     const serverCmd = {
       cmd: isPlatformWindows ? '.\\node_modules\\.bin\\webpack-dev-server.cmd' : './node_modules/.bin/webpack-dev-server',
       args: [
-        '--config=ui_framework/doc_site/webpack.config.js',
+        '--config=doc_site/webpack.config.js',
         '--hot',
         '--inline',
-        '--content-base=ui_framework/doc_site/build',
+        '--content-base=doc_site/build',
         '--host=0.0.0.0',
         '--port=8020',
       ],
@@ -83,8 +123,8 @@ module.exports = function (grunt) {
   }
 
   function uiFrameworkCompile() {
-    const src = 'ui_framework/src/index.scss';
-    const dest = 'ui_framework/dist/ui_framework.css';
+    const src = 'src/index.scss';
+    const dest = 'dist/ui_framework.css';
 
     return new Promise(resolve => {
       sass.render({
@@ -116,7 +156,7 @@ module.exports = function (grunt) {
       grunt.util.spawn({
         cmd: isPlatformWindows ? '.\\node_modules\\.bin\\grunt.cmd' : './node_modules/.bin/grunt',
         args: [
-          'uiFramework:compileCss',
+          'compileCss',
         ],
       }, (error, result) => {
         if (error) {
@@ -130,7 +170,7 @@ module.exports = function (grunt) {
     return new Promise(() => {
       debouncedCompile();
 
-      chokidar.watch('ui_framework/src', { ignoreInitial: true }).on('all', (event, path) => {
+      chokidar.watch('src', { ignoreInitial: true }).on('all', (event, path) => {
         grunt.log.writeln(event, path);
         debouncedCompile();
       });

ui_framework/README.md → packages/kbn-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 `packages/kbn-ui-framework/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 `packages/kbn-ui-framework/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 `packages/kbn-ui-framework/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 `packages/kbn-ui-framework/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 `packages/kbn-ui-framework/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 `packages/kbn-ui-framework/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 `packages/kbn-ui-framework/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.
 
@@ -208,4 +208,4 @@ article and the links it has at the bottom: ["Bootstrap Bankruptcy"](http://www.
 * [Salesforce Lightning Design System](https://www.lightningdesignsystem.com/)
 * [Refills](http://refills.bourbon.io/)
 * [Formstone](https://formstone.it/)
-* [Element VueJS Framework](http://element.eleme.io/#/en-US/component/dialog)
+* [Element VueJS Framework](http://element.eleme.io/#/en-US/component/dialog)

ui_framework/doc_site/src/main.scss → packages/kbn-ui-framework/doc_site/src/main.scss

@@ -1,3 +1,3 @@
-@import "../../../node_modules/@elastic/eui/src/global_styling/index";
+@import "~@elastic/eui/src/global_styling/index";
 @import "../../dist/ui_framework.css";
 @import "./components/guide_components";