Browse Source

HUE-8888 [docs] Refactor the component registry sections

Romain 5 years ago
parent
commit
9ffaab59cb

+ 45 - 32
docs/docs-site/content/developer/components/_index.md

@@ -4,32 +4,65 @@ draft: false
 weight: 4
 ---
 
-Some of the UI elements in Hue are available as generic [Web Components](https://developer.mozilla.org/en-US/docs/Web/Web_Components). They are library/framework agnostic, and can be used in any web project irrespective of what its built upon - React, Angular, Ember or something else. They can be [imported](#using-hue-ui-components-in-your-project) as classic JavaScript modules for your own development needs.
+Some of the UI elements in Hue are available as generic [Web Components](https://developer.mozilla.org/en-US/docs/Web/Web_Components). They are library/framework agnostic, and can be used in any web project irrespective of what its built upon - React, Angular, Ember or something else.
 
-## Component list
+They can be imported as classic JavaScript modules for your own development needs.
 
-Following are the generic components in Hue. Doc for each component must give you a sound idea on the attributes/props that the components accept, and events they generate.
+## Component list
 
 * [SQL Parsers](/developer/components/parsers)
 * [ER-diagram](/developer/components/er-diagram)
 * [SQL Scratchpad](/developer/components/scratchpad)
 
-## Importing in your project
+## Importing
 
 There are two ways to get them:
 
-- [npm registry](#npm-registry)
-- [Local dependency](#local-dependency)
+### NPM registry
+
+Published as a NPM package in https://www.npmjs.com/package/gethue. You do not need a dependency on a complete local Hue project.
+
+To run the [demo app](https://github.com/cloudera/hue/tree/master/tools/examples/api/hue_dep) make the following changes:
+
+1. Install gethue NPM package
+
+       npm install --save gethue
+
+2. In [package.json](https://github.com/cloudera/hue/blob/master/tools/examples/api/hue_dep/package.json), remove `"hue": "file:../../../.."` without touching the newly added gethue dependency
+3. In [src/app.js](https://github.com/cloudera/hue/blob/master/tools/examples/api/hue_dep/src/app.js), change the import line to:
+
+       import sqlAutocompleteParser from 'gethue/parse/sql/hive/hiveAutocompleteParser';
+
+4. In [webpack.config.js](https://github.com/cloudera/hue/blob/master/tools/examples/api/hue_dep/webpack.config.js):
+   - Change `'js'` to `'node_modules/gethue'` under `resolve.modules`
+   - Remove `exclude: /node_modules/,` from `babel-loader`
+
+### Local repository
+
+Checkout Hue and cd to the [demo app](https://github.com/cloudera/hue/tree/master/tools/examples/api/hue_dep). Steps are similar if you would like to use your own app instead of the demo app.
+
+    cd tools/examples/api/hue_dep
+
+    npm install
+    npm run webpack
+    npm run app
+
+In hue_dep `package.json` there is a dependency on Hue:
+
+    "dependencies": {
+      "hue": "file:../../.."
+    },
+
+Now let's import the Hive parser:
 
-### npm registry
+    import sqlAutocompleteParser from 'hue/desktop/core/src/desktop/js/parse/sql/hive/hiveAutocompleteParser';
 
-All the Generic Hue components are published as NPM package. Following will install the latest from https://www.npmjs.com/package/gethue.
 
-    npm install --save gethue
+## Using
 
 Here is an example on how to use the er-diagram component once installed:
 
-#### Import
+### Import
 
 er-diagram can be imported into an html file using a simple script tag as follows.
 
@@ -39,7 +72,7 @@ If you are using a bundler like webpack. They can be imported using a normal imp
 
     import 'gethue/web/er-diagram';
 
-#### Usage
+### Instantiate
 
 Once imported they can be used like a native HTML tag.
 
@@ -47,28 +80,8 @@ Once imported they can be used like a native HTML tag.
 
 Please refer these [demo apps](https://github.com/cloudera/hue/tree/master/tools/examples/components) for examples on how the components can be used. You must be able to directly pass attributes, and listen to custom and native events.
 
-#### Use as Vue Components
+### Use as a Vue Component
 
 Internally these components are created using Vue.js & TypeScript. So you can even use them as plain Vue component, and take advantage of Vue features. Vue version of the components are under `gethue/components`.
 
     import ERDiagram from 'gethue/components/er-diagram/index.vue';
-
-### Local dependency
-
-Checkout Hue and cd to the [demo app](https://github.com/cloudera/hue/tree/master/tools/examples/api/hue_dep). Steps are similar if you would like to use your own app instead of the demo app (hue_dep).
-
-    cd tools/examples/api/hue_dep
-
-    npm install
-    npm run webpack
-    npm run app
-
-In hue_dep `package.json` there is a dependency on Hue:
-
-    "dependencies": {
-      "hue": "file:../../.."
-    },
-
-Now let's import the Hive parser:
-
-    import sqlAutocompleteParser from 'hue/desktop/core/src/desktop/js/parse/sql/hive/hiveAutocompleteParser';

+ 6 - 8
docs/docs-site/content/developer/components/parsers/_index.md

@@ -3,15 +3,9 @@ title: "SQL Parsers"
 draft: false
 ---
 
-Parsers generated are JavaScript modules. This makes it easy to import a parser into your own apps (e.g. Webapp, Node.Js...). Importing a parser can be simply done via a npm package.
+## Import
 
-Here is an example on how to use the Hive parser:
-
-    npm install --save gethue
-
-Will install the latest from https://www.npmjs.com/package/gethue. Currently webpack needs to be used. An example of `webpack.config.js` can be found in the demo app [README](https://github.com/cloudera/hue/blob/master/tools/examples/api/hue_dep/README.md#gethue).
-
-Then import the parser you need with something like below and run it on an SQL statement:
+Import the parser you need with something like below and run it on an SQL statement:
 
     import sqlAutocompleteParser from 'gethue/parse/sql/hive/hiveAutocompleteParser';
 
@@ -83,3 +77,7 @@ Which then will output keywords suggestions and all the known locations:
         { value: 'USE', weight: -1 },
         { value: 'WITH', weight: -1 } ],
       definitions: [] }
+
+## Example
+
+A full example on how to use the Hive parser can be found in the demo app [README](https://github.com/cloudera/hue/blob/master/tools/examples/api/hue_dep/README.md).

+ 6 - 15
tools/examples/api/hue_dep/README.md

@@ -1,5 +1,7 @@
 
- Using Parser in [src/app.js](src/app.js) app
+## Local dependency
+
+ The Parser is imported and use in the [src/app.js](src/app.js) app.
 
     cd hue_dep
     npm install       // Install dependencies
@@ -16,22 +18,11 @@ Note that it can also be a GitHub link but takes a bit longer to do `npm install
 
     "hue": "git://github.com/cloudera/hue.git"
 
-## GetHue
-
-You need not have a dependency on the complete Hue project, the parsers are available as [gethue npm package](https://www.npmjs.com/package/gethue). To run the demo app with gethue please making the following changes:
-
-1. Install gethue NPM package
-
-       npm install --save gethue
-
-2. In [hue_dep/package.json](package.json), remove `"hue": "file:../../../.."` without touching the newly added gethue dependency.
-3. In [hue_dep/src/app.js(src/app.js), change the import line to.
+## NMP registry
 
-       import sqlAutocompleteParser from 'gethue/parse/sql/hive/hiveAutocompleteParser';
+Alternatively, instead of requiring a git clone of the repository, the Hue package can be directly pulled from a `npm registry` as detailed in the [Component documentation](/developer/components/#npm-registry).
 
-4. In [hue_dep/webpack.config.js](webpack.config.js):
-   - Change `'js'` to `'node_modules/gethue'` under `resolve.modules`.
-   - Remove `exclude: /node_modules/,` from `babel-loader`.
+    npm install --save gethue
 
 ## Output