Components

Some of the UI elements in Hue are available as generic 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 as classic JavaScript modules for your own development needs.

Importing

There are two ways to get them:

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 make the following changes:

  1. Install gethue NPM package

    npm install --save gethue
    
  2. In package.json, remove "hue": "file:../../../.." without touching the newly added gethue dependency

  3. In src/app.js, change the import line to:

    import sqlAutocompleteParser from 'gethue/lib/parsers/hiveAutocompleteParser';
    
  4. In 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. 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:

import sqlAutocompleteParser from 'hue/desktop/core/src/desktop/js/parse/sql/hive/hiveAutocompleteParser';