@nebula.js/cli-create 2.0.0-beta.1

package/CHANGELOG.md

@@ -0,0 +1,76 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+# [2.0.0-beta.1](https://github.com/qlik-oss/nebula.js/compare/v1.7.0...v2.0.0-beta.1) (2021-09-21)
+
+**Note:** Version bump only for package @nebula.js/cli-create
+
+# [1.7.0](https://github.com/qlik-oss/nebula.js/compare/v1.6.0...v1.7.0) (2021-08-24)
+
+### Features
+
+- adjust generation of ext and meta files on creating template ([#656](https://github.com/qlik-oss/nebula.js/issues/656)) ([c940d8b](https://github.com/qlik-oss/nebula.js/commit/c940d8b4b8a0ff0eda63c53ecfbeb0e7cf87f85e))
+
+# [1.6.0](https://github.com/qlik-oss/nebula.js/compare/v1.5.0...v1.6.0) (2021-08-16)
+
+### Bug Fixes
+
+- update mashup dependencies ([#652](https://github.com/qlik-oss/nebula.js/issues/652)) ([876f529](https://github.com/qlik-oss/nebula.js/commit/876f529c2ef14c5837e16c9e88b1444f89ad3b06))
+
+# [1.4.0](https://github.com/qlik-oss/nebula.js/compare/v1.3.0...v1.4.0) (2021-06-28)
+
+### Bug Fixes
+
+- **deps:** update dependency fs-extra to v10 ([#616](https://github.com/qlik-oss/nebula.js/issues/616)) ([73bf35f](https://github.com/qlik-oss/nebula.js/commit/73bf35f53f1882f89207a1215c35fc3c59f9c35a))
+
+# [1.2.0](https://github.com/qlik-oss/nebula.js/compare/v1.1.1...v1.2.0) (2021-05-12)
+
+**Note:** Version bump only for package @nebula.js/cli-create
+
+## [1.1.1](https://github.com/qlik-oss/nebula.js/compare/v1.1.0...v1.1.1) (2021-04-19)
+
+### Bug Fixes
+
+- **deps:** update dependency inquirer to v8 ([#585](https://github.com/qlik-oss/nebula.js/issues/585)) ([153b319](https://github.com/qlik-oss/nebula.js/commit/153b31964d4f3e587f8a6e9e5b09085df8d506a6))
+
+# [1.1.0](https://github.com/qlik-oss/nebula.js/compare/v1.1.0-alpha0...v1.1.0) (2021-02-01)
+
+**Note:** Version bump only for package @nebula.js/cli-create
+
+# [1.1.0-alpha0](https://github.com/qlik-oss/nebula.js/compare/v1.0.2-alpha.1...v1.1.0-alpha0) (2021-01-21)
+
+**Note:** Version bump only for package @nebula.js/cli-create
+
+## [1.0.2-alpha.1](https://github.com/qlik-oss/nebula.js/compare/v1.0.2-alpha.0...v1.0.2-alpha.1) (2020-12-04)
+
+### Bug Fixes
+
+- **cli-create:** add missing / in template ([#522](https://github.com/qlik-oss/nebula.js/issues/522)) ([f0575f3](https://github.com/qlik-oss/nebula.js/commit/f0575f3))
+
+# [1.0.0](https://github.com/qlik-oss/nebula.js/compare/v1.0.0-alpha.0...v1.0.0) (2020-06-09)
+
+**Note:** Version bump only for package @nebula.js/cli-create
+
+# [1.0.0-alpha.0](https://github.com/qlik-oss/nebula.js/compare/v0.6.1...v1.0.0-alpha.0) (2020-06-09)
+
+### Code Refactoring
+
+- rename public classnames ([#446](https://github.com/qlik-oss/nebula.js/issues/446)) ([c02a7ab](https://github.com/qlik-oss/nebula.js/commit/c02a7ab))
+
+### BREAKING CHANGES
+
+- rename nebulajs-cell to njs-cell and nebulajs-sn to njs-viz
+
+# [0.5.0](https://github.com/qlik-oss/nebula.js/compare/v0.4.0...v0.5.0) (2020-04-20)
+
+**Note:** Version bump only for package @nebula.js/cli-create
+
+# [0.4.0](https://github.com/qlik-oss/nebula.js/compare/v0.3.0...v0.4.0) (2020-04-02)
+
+**Note:** Version bump only for package @nebula.js/cli-create
+
+# [0.3.0](https://github.com/qlik-oss/nebula.js/compare/v0.2.1...v0.3.0) (2020-03-30)
+
+**Note:** Version bump only for package @nebula.js/cli-create

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License
+
+Copyright (c) 2019-present QlikTech International AB
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/README.md

@@ -0,0 +1,105 @@
+# @nebula.js/cli-create
+
+Scaffold a nebula visualization or mashup.
+
+## Install
+
+```sh
+npm install -g @nebula.js/cli
+```
+
+## Usage
+
+### CLI
+
+```sh
+nebula create <name>
+
+Create a visualization
+
+Commands:
+  nebula create mashup <name>  Create a mashup
+
+Positionals:
+  name  name of the project                                  [string] [required]
+
+Options:
+  --version   Show version number                                      [boolean]
+  --install   Run package installation step            [boolean] [default: true]
+  --pkgm      Package manager                  [string] [choices: "npm", "yarn"]
+  --picasso   Picasso template [string] [choices: "none", "minimal", "barchart"]
+  --author    Package author                                            [string]
+  -h, --help  Show help                                                [boolean]
+```
+
+```sh
+nebula create mashup <name>
+
+Create a mashup
+
+Positionals:
+  name  name of the project                                  [string] [required]
+
+Options:
+      --version  Show version number                                   [boolean]
+      --install  Run package installation step         [boolean] [default: true]
+      --pkgm     Package manager               [string] [choices: "npm", "yarn"]
+      --picasso  Picasso template
+                               [string] [choices: "none", "minimal", "barchart"]
+      --author   Package author                                         [string]
+  -h, --help     Show help                                             [boolean]
+```
+
+### Example
+
+#### Create a visualization
+
+```sh
+nebula create hello-sunshine
+```
+
+Running nebula create without --picasso prompts a selection of the available
+options.
+
+- none: without the picasso.js template
+- minimal: a basic setup of picasso.js is ready
+- barchart: a bar chart component created by picasso.js is ready
+
+You can find the [tutorial](https://qlik.dev/tutorials/build-a-helloworld-extension-using-nebulajs) to build a basic nebula visualization using nebula.js.
+
+#### Create a mashup
+
+```sh
+nebula create mashup hello-mashie
+```
+
+You can find the [tutorial](https://qlik.dev/tutorials/build-a-simple-mashup-using-nebulajs) to build a basic mashup using nebula.js.
+
+#### Package manager
+
+Create a nebula visualization project called `sn-table` with the npm package manager
+instead of yarn
+
+```sh
+nebula create sn-table --pkgm npm
+```
+
+Create a mashup called `table-mashup` with the npm package manager instead of yarn
+
+```sh
+nebula create mashup table-mashup --pkgm npm
+```
+
+#### Package installation step
+
+Create a nebula visualization project and do not install any dependencies yet
+
+```sh
+nebula create sn-table --install false
+```
+
+Create a mashup and do not install any dependencies yet
+
+```sh
+nebula create mashup table-mashup --install false
+```

package/command.js

@@ -0,0 +1,50 @@
+const create = require('./lib/create');
+
+const mashup = {
+  command: 'mashup <name>',
+  desc: 'Create a mashup',
+  builder(yargs) {
+    yargs.positional('name', {
+      type: 'string',
+      description: 'name of the project',
+    });
+  },
+  handler(argv) {
+    create(argv);
+  },
+};
+
+module.exports = {
+  command: 'create <name>',
+  desc: 'Create a visualization',
+  builder(yargs) {
+    yargs.command(mashup);
+
+    yargs.positional('name', {
+      type: 'string',
+      description: 'name of the project',
+    });
+    yargs.option('install', {
+      type: 'boolean',
+      default: true,
+      description: 'Run package installation step',
+    });
+    yargs.option('pkgm', {
+      type: 'string',
+      choices: ['npm', 'yarn'],
+      description: 'Package manager',
+    });
+    yargs.option('picasso', {
+      type: 'string',
+      choices: ['none', 'minimal', 'barchart'],
+      description: 'Picasso template',
+    });
+    yargs.option('author', {
+      type: 'string',
+      description: 'Package author',
+    });
+  },
+  handler(argv) {
+    create(argv);
+  },
+};

package/lib/create.js

@@ -0,0 +1,193 @@
+const chalk = require('chalk');
+const path = require('path');
+const fs = require('fs');
+const fse = require('fs-extra');
+const ejs = require('ejs');
+const inquirer = require('inquirer');
+
+const { execSync } = require('child_process');
+
+const pkg = require('../package.json');
+
+const hasYarn = () => {
+  try {
+    execSync('yarnpkg --version', { stdio: 'ignore' });
+    return true;
+  } catch (e) {
+    return false;
+  }
+};
+
+const author = async (cwd) => {
+  try {
+    const email = execSync('git config --get user.email', { cwd }).toString().trim();
+    const name = execSync('git config --get user.name', { cwd }).toString().trim();
+    return {
+      email,
+      name,
+    };
+  } catch (e) {
+    return {
+      email: '',
+      name: '',
+    };
+  }
+};
+
+const parseAuthor = (str = '') => {
+  const m = str.match(/([^<(]+)?(<([^\s]+)>)?/);
+  return {
+    name: m && m[1] ? m[1].trim() : '',
+    email: m && m[3] ? m[3].trim() : '',
+  };
+};
+
+function copyFactory(root, destination) {
+  return (source, target, data) => {
+    if (data) {
+      const content = fs.readFileSync(path.resolve(root, ...source.split('/')), { encoding: 'utf8' });
+      const rendered = ejs.render(content, data);
+      fs.writeFileSync(path.resolve(destination, ...target.split('/')), rendered);
+    } else {
+      fse.copyFileSync(path.resolve(root, ...source.split('/')), path.resolve(destination, ...target.split('/')));
+    }
+  };
+}
+
+const create = async (argv) => {
+  const { name } = argv;
+
+  const isMashup = argv._.includes('mashup');
+
+  const projectFolder = name;
+  const packageName = name.split('/').slice(-1)[0];
+
+  const cwd = process.cwd();
+  const templatesRoot = path.resolve(__dirname, '..', 'templates');
+  const destination = path.resolve(cwd, projectFolder);
+
+  let options = {
+    install: true,
+    ...argv,
+    pkgm: argv.pkgm || ((await hasYarn()) ? 'yarn' : 'npm'),
+    author: argv.author ? parseAuthor(argv.author) : await author(),
+  };
+
+  const results = {};
+
+  if (await fse.exists(destination)) {
+    console.error(chalk.red(`Oopsie, looks like '${projectFolder}' already exists. Try a different name.`));
+    process.exit(1);
+  }
+
+  const prompt = async () => {
+    const answers = await inquirer.prompt([
+      {
+        type: 'list',
+        name: 'picasso',
+        message: 'Pick a picasso template',
+        default: 'none',
+        choices: ['none', 'minimal', 'barchart'],
+        when: !isMashup && !argv.picasso,
+      },
+    ]);
+
+    options = { ...options, ...answers };
+  };
+
+  const write = async () => {
+    console.log('\n');
+    console.log('> Generating files...');
+    const { picasso } = options;
+    fse.ensureDirSync(destination);
+
+    const copy = copyFactory(templatesRoot, destination);
+
+    // ==== template files ====
+    const folders = ['common'];
+    if (isMashup) {
+      folders.push('mashup');
+    } else {
+      folders.push('sn/common');
+      if (picasso !== 'none') {
+        folders.push('sn/picasso/common');
+        folders.push(`sn/picasso/${picasso}`);
+      } else {
+        folders.push('sn/none');
+      }
+    }
+
+    const data = {
+      name: packageName,
+      description: '',
+      user: options.author.name,
+      email: options.author.email,
+      nebulaVersion: pkg.version,
+    };
+
+    const traverse = (sourceFolder, targetFolder = '') => {
+      const files = fs.readdirSync(path.resolve(templatesRoot, sourceFolder));
+
+      files.forEach((file) => {
+        const p = `${sourceFolder}/${file}`;
+        const stats = fs.lstatSync(path.resolve(templatesRoot, p));
+        const next = `${targetFolder}/${file}`.replace(/^\//, '');
+        if (stats.isDirectory()) {
+          fse.ensureDirSync(path.resolve(destination, next));
+          traverse(p, next);
+        } else if (file[0] === '_') {
+          const newFileName = file === '_package.json' ? 'package.json' : `.${file.substr(1)}`;
+          copy(`${sourceFolder}/${file}`, `${targetFolder}/${newFileName}`.replace(/^\//, ''), data);
+        } else {
+          copy(`${sourceFolder}/${file}`, next, data);
+        }
+      });
+    };
+
+    folders.forEach((folder) => {
+      traverse(folder);
+    });
+  };
+
+  const install = async () => {
+    if (options.install !== false) {
+      console.log('> Installing dependencies...');
+      console.log('\n');
+      const command = `${options.pkgm} install`;
+      try {
+        execSync(command, {
+          cwd: destination,
+          stdio: 'inherit',
+        });
+        console.log('\n');
+      } catch (e) {
+        console.log('\n');
+        console.log(`> Something went wrong when running ${chalk.yellow(command)}, try running the command yourself.`);
+        results.fail = true;
+        results.failedInstall = true;
+      }
+    }
+  };
+
+  const end = async () => {
+    const p = options.pkgm;
+    if (!results.fail) {
+      console.log(`> Successfully created project ${chalk.yellow(options.name)}`);
+    }
+    console.log('> Get started with the following commands:');
+    console.log('\n');
+    console.log(chalk.cyan(`   cd ${projectFolder}`));
+    if (options.install === false || results.failedInstall) {
+      console.log(chalk.cyan(`   ${p} install`));
+    }
+    console.log(chalk.cyan(`   ${p} run start`));
+    console.log('\n');
+  };
+
+  await prompt();
+  await write();
+  await install();
+  await end();
+};
+
+module.exports = create;

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@nebula.js/cli-create",
+  "version": "2.0.0-beta.1",
+  "description": "",
+  "license": "MIT",
+  "author": "QlikTech International AB",
+  "keywords": [],
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "lib/create.js",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/qlik-oss/nebula.js.git"
+  },
+  "files": [
+    "command.js",
+    "templates",
+    "lib"
+  ],
+  "scripts": {
+    "generate": "yo ./generator/index.js"
+  },
+  "dependencies": {
+    "chalk": "4.1.2",
+    "ejs": "3.1.6",
+    "fs-extra": "10.0.0",
+    "inquirer": "8.1.2"
+  },
+  "gitHead": "851bf623f70a49f07615fe3b7e37b8b44fad534f"
+}

package/templates/common/_editorconfig

@@ -0,0 +1,15 @@
+# http://editorconfig.org
+
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+insert_final_newline = false
+trim_trailing_whitespace = false

package/templates/common/_gitignore

@@ -0,0 +1,11 @@
+*.log
+*.log
+.cache
+.DS_Store
+.idea
+.vscode
+.npmrc
+
+node_modules
+coverage
+dist/

package/templates/mashup/_package.json

@@ -0,0 +1,19 @@
+{
+  "name": "<%= name %>",
+  "version": "0.0.1",
+  "author": {
+    "name": "<%= user %>",
+    "email": "<%= email %>"
+  },
+  "keywords": ["qlik", "nebula"],
+  "scripts": {
+    "start": "parcel src/index.html --open",
+    "build": "parcel build src/index.html --dist-dir ./dist"
+  },
+  "dependencies": {
+    "@nebula.js/stardust": "<%= nebulaVersion %>",
+    "@nebula.js/sn-bar-chart": "^0.8.24",
+    "enigma.js": "^2.6.3",
+    "parcel": "^2.0.0-rc.0"
+  }
+}

package/templates/mashup/src/configure.js

@@ -0,0 +1,18 @@
+import { embed } from '@nebula.js/stardust';
+
+import barchart from '@nebula.js/sn-bar-chart';
+
+const n = embed.createConfiguration({
+  context: {
+    theme: 'light',
+    language: 'en-US',
+  },
+  types: [
+    {
+      name: 'barchart',
+      load: () => Promise.resolve(barchart),
+    },
+  ],
+});
+
+export default n;

package/templates/mashup/src/connect.js

@@ -0,0 +1,44 @@
+import enigma from 'enigma.js';
+import schema from 'enigma.js/schemas/12.170.2.json';
+
+async function getQCSHeaders({ webIntegrationId, url }) {
+  const response = await fetch(`${url}/api/v1/csrf-token`, {
+    credentials: 'include',
+    headers: { 'qlik-web-integration-id': webIntegrationId },
+  });
+  if (response.status === 401) {
+    const loginUrl = new URL(`${url}/login`);
+    loginUrl.searchParams.append('returnto', window.location.href);
+    loginUrl.searchParams.append('qlik-web-integration-id', webIntegrationId);
+    window.location.href = loginUrl;
+    return undefined;
+  }
+  const csrfToken = new Map(response.headers).get('qlik-csrf-token');
+  return {
+    'qlik-web-integration-id': webIntegrationId,
+    'qlik-csrf-token': csrfToken,
+  };
+}
+
+async function getEnigmaApp({ host, appId, headers }) {
+  const params = Object.keys(headers)
+    .map((key) => `${key}=${headers[key]}`)
+    .join('&');
+
+  const enigmaGlobal = await enigma
+    .create({
+      schema,
+      url: `wss://${host}/app/${appId}?${params}`,
+    })
+    .open();
+
+  return enigmaGlobal.openDoc(appId);
+}
+
+async function connect({ url, webIntegrationId, appId }) {
+  const host = url.replace(/^https?:\/\//, '').replace(/\/?/, '');
+  const headers = await getQCSHeaders({ url, webIntegrationId });
+  return getEnigmaApp({ host, headers, appId });
+}
+
+export default connect;

package/templates/mashup/src/index.html

@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Nebula mashup</title>
+
+    <style>
+      body {
+        background: #eee;
+      }
+
+      .content {
+        margin: 0 auto;
+        width: 80%;
+        max-width: 800px;
+      }
+
+      .object {
+        position: relative;
+        height: 600px;
+      }
+
+      .toolbar {
+        margin: 12px 0px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="content">
+      <div class="toolbar"></div>
+      <div class="object"></div>
+    </div>
+
+    <script src="./index.js" type="module"></script>
+  </body>
+</html>

package/templates/mashup/src/index.js

@@ -0,0 +1,19 @@
+/* eslint-disable */
+import embed from './configure';
+import connect from './connect';
+
+async function run() {
+  const app = await connect({
+    url: '<URL>',
+    webIntegrationId: '<Qlik web integration id>',
+    appId: '<App id>',
+  });
+
+  const n = embed(app);
+
+  (await n.selections()).mount(document.querySelector('.toolbar'));
+
+  // n.render({});
+}
+
+run();

package/templates/sn/common/README.md

@@ -0,0 +1,7 @@
+# <%= name %>
+
+## Usage
+
+```js
+npm install <%= name %>
+```

package/templates/sn/common/_eslintignore

@@ -0,0 +1,3 @@
+dist
+coverage
+node_modules

package/templates/sn/common/_eslintrc.json

@@ -0,0 +1,38 @@
+{
+  "root": true,
+  "env": {
+    "browser": true
+  },
+  "parserOptions": {
+    "sourceType": "module"
+  },
+  "extends": ["airbnb-base"],
+  "rules": {
+    "max-len": 0,
+    "no-plusplus": 0,
+    "no-bitwise": 0,
+    "no-unused-expressions": 0,
+    "import/no-extraneous-dependencies": [2, { "devDependencies": true }]
+  },
+  "overrides": [
+    {
+      "files": ["**/*.spec.js"],
+      "env": {
+        "browser": false,
+        "node": true,
+        "mocha": true
+      },
+      "globals": {
+        "chai": false,
+        "expect": false,
+        "sinon": false,
+        "aw": false,
+        "page": false
+      },
+      "plugins": ["mocha"],
+      "rules": {
+        "mocha/no-exclusive-tests": "error"
+      }
+    }
+  ]
+}

package/templates/sn/none/_package.json

@@ -0,0 +1,38 @@
+{
+  "name": "<%= name %>",
+  "version": "0.1.0",
+  "description": "<%= description %>",
+  "license": "MIT",
+  "author": {
+    "name": "<%= user %>",
+    "email": "<%= email %>"
+  },
+  "keywords": ["qlik", "nebula", "stardust"],
+  "files": ["dist"],
+  "engines": {
+    "node": ">=8"
+  },
+  "main": "dist/<%= name %>.js",
+  "module": "dist/<%= name %>.esm.js",
+  "scripts": {
+    "build": "nebula build",
+    "lint": "eslint src",
+    "start": "nebula serve",
+    "sense": "nebula sense --ext src/ext.js --meta src/meta.json",
+    "test:integration": "aw puppet --testExt '*.int.js' --glob 'test/integration/**/*.int.js'"
+  },
+  "devDependencies": {
+    "@after-work.js/aw": "6.0.10",
+    "@nebula.js/cli": "<%= nebulaVersion %>",
+    "@nebula.js/cli-build": "<%= nebulaVersion %>",
+    "@nebula.js/cli-serve": "<%= nebulaVersion %>",
+    "@nebula.js/cli-sense": "<%= nebulaVersion %>",
+    "eslint": "7.27.0",
+    "eslint-config-airbnb-base": "14.2.1",
+    "eslint-plugin-import": "2.23.4",
+    "eslint-plugin-mocha": "9.0.0"
+  },
+  "peerDependencies": {
+    "@nebula.js/stardust": "^1.x"
+  }
+}

package/templates/sn/none/src/data.js

@@ -0,0 +1,3 @@
+export default {
+  targets: [],
+};

package/templates/sn/none/src/ext.js

@@ -0,0 +1,9 @@
+export default {
+  support: {
+    snapshot: false,
+    export: true,
+    sharing: false,
+    exportData: true,
+    viewData: true,
+  },
+};

package/templates/sn/none/src/index.js

@@ -0,0 +1,16 @@
+import { useElement } from '@nebula.js/stardust';
+import properties from './object-properties';
+import data from './data';
+
+export default function supernova() {
+  return {
+    qae: {
+      properties,
+      data,
+    },
+    component() {
+      const element = useElement();
+      element.innerHTML = '<div>Hello!</div>'; // eslint-disable-line
+    },
+  };
+}

package/templates/sn/none/src/meta.json

@@ -0,0 +1,5 @@
+{
+  "name": "<%= name %>",
+  "icon": "extension",
+  "preview": ""
+}

package/templates/sn/none/src/object-properties.js

@@ -0,0 +1,8 @@
+const properties = {
+  showTitles: true,
+  title: '',
+  subtitle: '',
+  footnote: '',
+};
+
+export default properties;

package/templates/sn/none/test/integration/hello.int.js

@@ -0,0 +1,10 @@
+describe('sn', () => {
+  const content = '.njs-viz[data-render-count="1"]';
+  it('should say hello', async () => {
+    const app = encodeURIComponent(process.env.APP_ID || '/apps/ctrl00.qvf');
+    await page.goto(`${process.env.BASE_URL}/render/?app=${app}`);
+    await page.waitForSelector(content, { visible: true });
+    const text = await page.$eval(content, (el) => el.textContent);
+    expect(text).to.equal('Hello!');
+  });
+});

package/templates/sn/none/test/integration/setup.int.js

@@ -0,0 +1,28 @@
+const serve = require('@nebula.js/cli-serve'); // eslint-disable-line
+
+page.on('pageerror', (e) => {
+  console.error('Web: ', e.message);
+});
+
+page.on('console', (msg) => {
+  for (let i = 0; i < msg.args().length; ++i) {
+    console.log(`console ${msg.text()}`);
+  }
+});
+
+if (!process.env.BASE_URL) {
+  let s;
+
+  before(async function setup() {
+    this.timeout(15000);
+    s = await serve({
+      open: false,
+    });
+
+    process.env.BASE_URL = s.url;
+  });
+
+  after(() => {
+    s.close();
+  });
+}

package/templates/sn/picasso/barchart/src/data.js

@@ -0,0 +1,15 @@
+export default {
+  targets: [
+    {
+      path: '/qHyperCubeDef',
+      dimensions: {
+        min: 1,
+        max: 1,
+      },
+      measures: {
+        min: 1,
+        max: 1,
+      },
+    },
+  ],
+};

package/templates/sn/picasso/barchart/src/ext.js

@@ -0,0 +1,9 @@
+export default {
+  support: {
+    snapshot: false,
+    export: true,
+    sharing: false,
+    exportData: true,
+    viewData: true,
+  },
+};

package/templates/sn/picasso/barchart/src/meta.json

@@ -0,0 +1,5 @@
+{
+  "name": "<%= name %>",
+  "icon": "extension",
+  "preview": ""
+}

package/templates/sn/picasso/barchart/src/object-properties.js

@@ -0,0 +1,15 @@
+const properties = {
+  qHyperCubeDef: {
+    qDimensions: [],
+    qMeasures: [],
+    qInitialDataFetch: [{ qWidth: 2, qHeight: 5000 }],
+    qSuppressZero: false,
+    qSuppressMissing: true,
+  },
+  showTitles: true,
+  title: '',
+  subtitle: '',
+  footnote: '',
+};
+
+export default properties;

package/templates/sn/picasso/barchart/src/pic-definition.js

@@ -0,0 +1,68 @@
+export default function picassoDefinition({ layout, constraints }) {
+  if (!layout.qHyperCube) {
+    throw new Error('Layout is missing a hypercube');
+  }
+  return {
+    scales: {
+      x: { data: { extract: { field: 'qDimensionInfo/0' } } },
+      y: {
+        data: { field: 'qMeasureInfo/0' },
+        expand: 0.2,
+        include: [0],
+        invert: true,
+      },
+    },
+    components: [
+      {
+        type: 'axis',
+        dock: 'left',
+        scale: 'y',
+      },
+      {
+        type: 'axis',
+        dock: 'bottom',
+        scale: 'x',
+      },
+      {
+        type: 'box',
+        data: {
+          extract: {
+            field: 'qDimensionInfo/0',
+            props: {
+              start: 0,
+              end: { field: 'qMeasureInfo/0' },
+            },
+          },
+        },
+        settings: {
+          major: { scale: 'x' },
+          minor: { scale: 'y' },
+          box: {
+            width: 0.7,
+          },
+        },
+        brush:
+          !constraints.active && !constraints.select
+            ? {
+                trigger: [
+                  {
+                    contexts: ['selection'],
+                  },
+                ],
+                consume: [
+                  {
+                    context: 'selection',
+                    data: ['', 'end'],
+                    style: {
+                      inactive: {
+                        opacity: 0.3,
+                      },
+                    },
+                  },
+                ],
+              }
+            : {},
+      },
+    ],
+  };
+}

package/templates/sn/picasso/barchart/test/integration/interaction.int.js

@@ -0,0 +1,19 @@
+describe('interaction', () => {
+  const content = '.njs-viz[data-render-count="1"]';
+  it('should select two bars', async () => {
+    const app = encodeURIComponent(process.env.APP_ID || '/apps/ctrl00.qvf');
+    await page.goto(`${process.env.BASE_URL}/render/?app=${app}&cols=Alpha,=5+avg(Expression1)`);
+    await page.waitForSelector(content, { visible: true });
+
+    await page.click('rect[data-label="K"]');
+    await page.click('rect[data-label="S"]');
+
+    await page.waitForSelector('button[title="Confirm selection"]:not([disabled])', { visible: true });
+    await page.click('button[title="Confirm selection"]');
+
+    await page.waitForFunction((selector) => document.querySelectorAll(selector).length === 2, {}, 'rect[data-label]');
+
+    const rects = await page.$$eval('rect[data-label]', (sel) => sel.map((r) => r.getAttribute('data-label')));
+    expect(rects).to.eql(['K', 'S']);
+  });
+});

package/templates/sn/picasso/common/_package.json

@@ -0,0 +1,40 @@
+{
+  "name": "<%= name %>",
+  "version": "0.1.0",
+  "description": "<%= description %>",
+  "license": "MIT",
+  "author": {
+    "name": "<%= user %>",
+    "email": "<%= email %>"
+  },
+  "keywords": ["qlik", "nebula", "stardust"],
+  "files": ["dist"],
+  "engines": {
+    "node": ">=8"
+  },
+  "main": "dist/<%= name %>.js",
+  "module": "dist/<%= name %>.esm.js",
+  "scripts": {
+    "build": "nebula build",
+    "lint": "eslint src",
+    "start": "nebula serve",
+    "sense": "nebula sense",
+    "test:integration": "aw puppet --testExt '*.int.js' --glob 'test/integration/**/*.int.js'"
+  },
+  "devDependencies": {
+    "@after-work.js/aw": "6.0.14",
+    "@nebula.js/cli": "<%= nebulaVersion %>",
+    "@nebula.js/cli-build": "<%= nebulaVersion %>",
+    "@nebula.js/cli-serve": "<%= nebulaVersion %>",
+    "@nebula.js/cli-sense": "<%= nebulaVersion %>",
+    "eslint": "7.27.0",
+    "eslint-config-airbnb-base": "14.2.1",
+    "eslint-plugin-import": "2.23.4",
+    "eslint-plugin-mocha": "9.0.0",
+    "picasso.js": "1.2.1",
+    "picasso-plugin-q": "1.2.1"
+  },
+  "peerDependencies": {
+    "@nebula.js/stardust": "^1.x"
+  }
+}

package/templates/sn/picasso/common/src/index.js

@@ -0,0 +1,81 @@
+import {
+  useElement,
+  useState,
+  useStaleLayout,
+  useSelections,
+  useRect,
+  useEffect,
+  useConstraints,
+} from '@nebula.js/stardust';
+import picassojs from 'picasso.js';
+import picassoQ from 'picasso-plugin-q';
+
+import properties from './object-properties';
+import data from './data';
+import picSelections from './pic-selections';
+import definition from './pic-definition';
+
+export default function supernova(/* env */) {
+  const picasso = picassojs();
+  picasso.use(picassoQ);
+
+  return {
+    qae: {
+      properties,
+      data,
+    },
+    component() {
+      const element = useElement();
+      const selections = useSelections();
+      const layout = useStaleLayout();
+      const rect = useRect();
+      const constraints = useConstraints();
+
+      const [instance, setInstance] = useState();
+
+      useEffect(() => {
+        const p = picasso.chart({
+          element,
+          data: [],
+          settings: {},
+        });
+
+        const s = picSelections({
+          selections,
+          brush: p.brush('selection'),
+          picassoQ,
+        });
+
+        setInstance(p);
+
+        return () => {
+          s.release();
+          p.destroy();
+        };
+      }, []);
+
+      useEffect(() => {
+        if (!instance) {
+          return;
+        }
+        instance.update({
+          data: [
+            {
+              type: 'q',
+              key: 'qHyperCube',
+              data: layout.qHyperCube,
+            },
+          ],
+          settings: definition({ layout, constraints }),
+        });
+      }, [layout, instance]);
+
+      useEffect(() => {
+        if (!instance) {
+          return;
+        }
+        instance.update();
+      }, [rect.width, rect.height, instance]);
+    },
+  };
+}

package/templates/sn/picasso/common/src/pic-selections.js

@@ -0,0 +1,132 @@
+/* eslint no-param-reassign: 0 */
+
+// --- enable keyboard accessibility ---
+// pressing enter (escape) key should confirm (cancel) selections
+const KEYS = {
+  ENTER: 'Enter',
+  ESCAPE: 'Escape',
+  IE11_ESC: 'Esc',
+  SHIFT: 'Shift',
+};
+
+const instances = [];
+let expando = 0;
+const confirmOrCancelSelection = (e) => {
+  const active = instances.filter((a) => a.selections && a.selections.isActive());
+  if (!active.length) {
+    return;
+  }
+  if (e.key === KEYS.ENTER) {
+    active.forEach((a) => a.selections.confirm());
+  } else if (e.key === KEYS.ESCAPE || e.key === KEYS.IE11_ESC) {
+    active.forEach((a) => a.selections.cancel());
+  }
+};
+
+const setup = () => {
+  document.addEventListener('keyup', confirmOrCancelSelection);
+};
+
+const teardown = () => {
+  document.removeEventListener('keyup', confirmOrCancelSelection);
+};
+// ------------------------------------------------------
+
+const addListeners = (emitter, listeners) => {
+  Object.keys(listeners).forEach((type) => {
+    emitter.on(type, listeners[type]);
+  });
+};
+
+const removeListeners = (emitter, listeners) => {
+  Object.keys(listeners).forEach((type) => {
+    emitter.removeListener(type, listeners[type]);
+  });
+};
+
+export default function ({ selections, brush, picassoQ } = {}, { path = '/qHyperCubeDef' } = {}) {
+  if (!selections) {
+    return {
+      layout: () => {},
+      release: () => {},
+    };
+  }
+  const key = ++expando;
+
+  let layout = null;
+
+  // interceptors primary job is to ensure selections only occur on either values OR ranges
+  const valueInterceptor = (added) => {
+    const brushes = brush.brushes();
+    brushes.forEach((b) => {
+      if (b.type === 'range') {
+        // has range selections
+        brush.clear([]);
+      } else if (added[0] && added[0].key !== b.id) {
+        // has selections in another dimension
+        brush.clear([]);
+      }
+    });
+    return added.filter((t) => t.value !== -2); // do not allow selection on null value
+  };
+
+  const rangeInterceptor = (a) => {
+    const v = brush.brushes().filter((b) => b.type === 'value');
+    if (v.length) {
+      // has dimension values selected
+      brush.clear([]);
+      return a;
+    }
+    return a;
+  };
+
+  brush.intercept('set-ranges', rangeInterceptor);
+  brush.intercept('toggle-ranges', rangeInterceptor);
+
+  brush.intercept('toggle-values', valueInterceptor);
+  brush.intercept('set-values', valueInterceptor);
+  brush.intercept('add-values', valueInterceptor);
+
+  brush.on('start', () => selections.begin(path));
+
+  const selectionListeners = {
+    activate: () => {
+      // TODO - check if we can select in the current chart,
+    },
+    deactivated: () => brush.end(),
+    cleared: () => brush.clear(),
+    canceled: () => brush.end(),
+  };
+  addListeners(selections, selectionListeners);
+
+  brush.on('update', () => {
+    const generated = picassoQ.selections(brush, {}, layout);
+    generated.forEach((s) => selections.select(s));
+  });
+
+  if (instances.length === 0) {
+    setup();
+  }
+
+  instances.push({
+    key,
+    selections,
+  });
+
+  return {
+    layout: (lt) => {
+      layout = lt;
+    },
+    release: () => {
+      layout = null;
+      const idx = instances.indexOf(instances.filter((i) => i.key === key)[0]);
+      if (idx !== -1) {
+        instances.splice(idx, 1);
+      }
+      if (!instances.length) {
+        teardown();
+      }
+      removeListeners(selections, selectionListeners);
+    },
+  };
+}

package/templates/sn/picasso/common/test/integration/setup.int.js

@@ -0,0 +1,28 @@
+const serve = require('@nebula.js/cli-serve'); // eslint-disable-line
+
+page.on('pageerror', (e) => {
+  console.error('Web: ', e.message);
+});
+
+page.on('console', (msg) => {
+  for (let i = 0; i < msg.args().length; ++i) {
+    console.log(`console ${msg.text()}`);
+  }
+});
+
+if (!process.env.BASE_URL) {
+  let s;
+
+  before(async function setup() {
+    this.timeout(15000); // to allow time for the server to start
+    s = await serve({
+      build: false,
+    });
+
+    process.env.BASE_URL = s.url;
+  });
+
+  after(() => {
+    s.close();
+  });
+}

package/templates/sn/picasso/minimal/src/data.js

@@ -0,0 +1,13 @@
+export default {
+  targets: [
+    {
+      path: '/qHyperCubeDef',
+      dimensions: {
+        min: 1,
+      },
+      measures: {
+        min: 1,
+      },
+    },
+  ],
+};

package/templates/sn/picasso/minimal/src/ext.js

@@ -0,0 +1,9 @@
+export default {
+  support: {
+    snapshot: false,
+    export: true,
+    sharing: false,
+    exportData: true,
+    viewData: true,
+  },
+};

package/templates/sn/picasso/minimal/src/meta.json

@@ -0,0 +1,5 @@
+{
+  "name": "<%= name %>",
+  "icon": "extension",
+  "preview": ""
+}

package/templates/sn/picasso/minimal/src/object-properties.js

@@ -0,0 +1,15 @@
+const properties = {
+  qHyperCubeDef: {
+    qDimensions: [],
+    qMeasures: [],
+    qInitialDataFetch: [{ qWidth: 10, qHeight: 500 }],
+    qSuppressZero: false,
+    qSuppressMissing: true,
+  },
+  showTitles: true,
+  title: '',
+  subtitle: '',
+  footnote: '',
+};
+
+export default properties;

package/templates/sn/picasso/minimal/src/pic-definition.js

@@ -0,0 +1,9 @@
+export default function ({
+  layout, // eslint-disable-line no-unused-vars
+  context, // eslint-disable-line no-unused-vars
+}) {
+  return {
+    scales: {},
+    components: [],
+  };
+}