[UI Framework] [K7] Cherry-pick generator and doc site improvements (#…

…13479)

* Rename tasks to createComponent and documentComponent.

* Reference correct src paths in README.

* Add children and className to templates' propTypes.

* Add default folder name for page demo.

* Add suffix to sandbox routes.

* Specify testPathIgnorePatterns more clearly.

* Rename component.test.js to test.js so that Jenkins won't try to run it.

* Update npm scripts to depend on local yo dependency, not global.

* Add ui_framework/src to copy task.

* Simplify npm scripts and remove requirement for installing Yeoman from README.

* Mock out static files when running in Jest (#13315)

* Add services to moduleNameMapper in jest config.

package.json

@@ -64,8 +64,8 @@
     "sterilize": "grunt sterilize",
     "uiFramework:start": "grunt uiFramework:start",
     "uiFramework:build": "grunt uiFramework:build",
-    "uiFramework:create": "yo ./ui_framework/generator-kui/app/component.js",
-    "uiFramework:document": "yo ./ui_framework/generator-kui/app/documentation.js"
+    "uiFramework:createComponent": "yo ./ui_framework/generator-kui/app/component.js",
+    "uiFramework:documentComponent": "yo ./ui_framework/generator-kui/app/documentation.js"
   },
   "repository": {
     "type": "git",
@@ -280,7 +280,8 @@
     "svg-sprite-loader": "3.0.6",
     "tree-kill": "1.1.0",
     "webpack-dev-server": "1.14.1",
-    "yeoman-generator": "1.1.1"
+    "yeoman-generator": "1.1.1",
+    "yo": "2.0.0"
   },
   "engines": {
     "node": "6.11.1",

src/jest/config.json

@@ -4,16 +4,18 @@
     "<rootDir>/ui_framework/"
   ],
   "collectCoverageFrom": [
-    "ui_framework/src/services/**/*.js",
-    "!ui_framework/src/services/index.js",
-    "!ui_framework/src/services/**/*/index.js",
     "ui_framework/src/components/**/*.js",
     "!ui_framework/src/components/index.js",
-    "!ui_framework/src/components/**/*/index.js"
+    "!ui_framework/src/components/**/*/index.js",
+    "ui_framework/src/services/**/*.js",
+    "!ui_framework/src/services/index.js",
+    "!ui_framework/src/services/**/*/index.js"
   ],
   "moduleNameMapper": {
     "^ui_framework/components": "<rootDir>/ui_framework/components",
-    "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/ui_framework/src/test/file_mock.js"
+    "^ui_framework/services": "<rootDir>/ui_framework/services",
+    "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/src/jest/file_mock.js",
+    "\\.(css|less|scss)$": "<rootDir>/src/jest/style_mock.js"
   },
   "coverageDirectory": "<rootDir>/target/jest-coverage",
   "coverageReporters": [
@@ -27,7 +29,9 @@
     "**/*.test.js"
   ],
   "testPathIgnorePatterns": [
-    "<rootDir>[/\\\\]ui_framework[/\\\\](dist|doc_site|generator-kui)[/\\\\]"
+    "<rootDir>/ui_framework/dist/",
+    "<rootDir>/ui_framework/doc_site/",
+    "<rootDir>/ui_framework/generator-kui/"
   ],
   "transform": {
     "^.+\\.js$": "<rootDir>/src/jest/babelTransform.js"

src/jest/file_mock.js

@@ -0,0 +1 @@
+module.exports = 'test-file-stub';

src/jest/style_mock.js

@@ -0,0 +1 @@
+module.exports = {};

tasks/config/copy.js

@@ -18,6 +18,7 @@ module.exports = function () {
         'ui_framework/components/**',
         'ui_framework/services/**',
         'ui_framework/dist/**',
+        'ui_framework/src/**',
         'webpackShims/**',
         'config/kibana.yml',
       ],

ui_framework/README.md

@@ -25,7 +25,7 @@ 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/components`.
+1. Create the SCSS for the component in `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`.
@@ -34,15 +34,9 @@ You can do this using Yeoman (the easy way), or you can do it manually (the hard
 
 ### Using Yeoman
 
-#### Install Yeoman
-
-```bash
-npm install -g yo
-```
-
 #### Create a new component
 
-From the command line, run `npm run uiFramework:create`.
+From the command line, run `npm run uiFramework:createComponent`.
 
 First, you'll be prompted for what kind of component to create:
 
@@ -83,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/components`.
+1. Create a directory for your component in `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/components/index.scss`.
+5. Import the `_index.scss` file into `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/components/index.js`.
+3. Re-export these components from `ui_framework/src/components/index.js`.
 
 This makes your React component available for import into Kibana.
 
@@ -133,7 +127,7 @@ content.
 
 You can use the same Yeoman generator referenced above to create documentation.
 
-From the command line, run `npm run uiFramework:document`.
+From the command line, run `npm run uiFramework:documentComponent`.
 
 First, you'll be prompted for what kind of documentation to create:
 

ui_framework/generator-kui/component/index.js

@@ -78,7 +78,7 @@ module.exports = class extends Generator {
 
       // Create component test file.
       this.fs.copyTpl(
-        this.templatePath('component.test.js'),
+        this.templatePath('test.js'),
         this.destinationPath(testPath),
         vars
       );

ui_framework/generator-kui/component/templates/component.js

@@ -1,10 +1,15 @@
 import React, {
   Component,
-  PropTypes,
 } from 'react';
+import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
 export class <%= componentName %> extends Component {
+  static propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+  }
+
   constructor(props) {
     super(props);
   }
@@ -28,6 +33,3 @@ export class <%= componentName %> extends Component {
     );
   }
 }
-
-<%= componentName %>.propTypes = {
-};

ui_framework/generator-kui/component/templates/stateless_function.js

@@ -1,6 +1,5 @@
-import React, {
-  PropTypes,
-} from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
 export const <%= componentName %> = ({ children, className, ...rest }) => {
@@ -17,4 +16,6 @@ export const <%= componentName %> = ({ children, className, ...rest }) => {
 };
 
 <%= componentName %>.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
 };

ui_framework/generator-kui/documentation/index.js

@@ -25,6 +25,7 @@ module.exports = class extends Generator {
         name: 'folderName',
         type: 'input',
         store: true,
+        default: answers => answers.name,
       });
 
       prompts.push({
@@ -171,7 +172,7 @@ module.exports = class extends Generator {
       );
     };
 
-    const showImportRouteSnippet = suffix => {
+    const showImportRouteSnippet = (suffix, appendToRoute) => {
       const {
         componentExampleName,
         fileName,
@@ -186,7 +187,7 @@ module.exports = class extends Generator {
       this.log(chalk.white('\n// Import route definition into routes.js.'));
       this.log(
         `{\n` +
-        `  name: ${chalk.cyan(`'${componentExampleName}'`)},\n` +
+        `  name: ${chalk.cyan(`'${componentExampleName}${appendToRoute ? suffix : ''}'`)},\n` +
         `  component: ${componentExampleName}${suffix},\n` +
         `  hasReact: ${chalk.magenta('true')},\n` +
         `}`
@@ -206,7 +207,7 @@ module.exports = class extends Generator {
         break;
 
       case 'sandbox':
-        showImportRouteSnippet('Sandbox');
+        showImportRouteSnippet('Sandbox', true);
         break;
     }
     this.log('------------------------------------------------');