@nzz/q-cli 1.8.0 → 1.9.0

package/skeletons/toolv2-skeleton/package.json

@@ -0,0 +1,80 @@
+{
+  "name": "[tool-name]",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "type": "module",
+  "scripts": {
+    "build": "rollup -c rollup.config.js && npm run compile-style-files",
+    "compile-style-files": "node tasks/compileStyleFiles.cjs",
+    "dev": "npm run build && node dev.js",
+    "jest": "NODE_OPTIONS='--experimental-vm-modules --experimental-specifier-resolution=node' jest --config jest.config.ts",
+    "lint": "eslint --fix --ext .svelte,.ts --config src/.eslintrc.cjs src",
+    "lint:all": "run-s -c lint ts-check svelte-check",
+    "postinstall": "scripts/postinstall.sh",
+    "prettier-format": "prettier --write src/",
+    "start": "nodemon --exec \"npm run dev\"",
+    "svelte-check": "svelte-check",
+    "test": "npm run build && npm run jest",
+    "ts-check": "tsc --noEmit"
+  },
+  "author": "",
+  "license": "MIT",
+  "dependencies": {
+    "@hapi/boom": "^9.1.3",
+    "@hapi/hapi": "^20.2.1",
+    "@hapi/inert": "^6.0.3",
+    "ajv": "^6.12.6",
+    "clone": "^2.1.2",
+    "d3-format": "^1.4.5",
+    "joi": "^17.4.2",
+    "simple-statistics": "^7.7.0",
+    "svelte": "^3.48.0",
+    "uglify-js": "^3.14.3"
+  },
+  "devDependencies": {
+    "@hapi/code": "^8.0.5",
+    "@ota-meshi/eslint-plugin-svelte": "^0.34.1",
+    "@rollup/plugin-alias": "^3.1.9",
+    "@rollup/plugin-json": "^4.1.0",
+    "@rollup/plugin-node-resolve": "^13.3.0",
+    "@rollup/plugin-typescript": "^8.3.3",
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/svelte": "^3.1.3",
+    "@tsconfig/svelte": "^3.0.0",
+    "@types/d3": "^7.4.0",
+    "@types/hapi__inert": "^5.2.3",
+    "@types/jest": "^28.1.1",
+    "@types/jsdom": "^16.2.14",
+    "@types/node": "^17.0.35",
+    "@types/uglify-js": "^3.13.2",
+    "@typescript-eslint/eslint-plugin": "^5.27.0",
+    "@typescript-eslint/parser": "^5.27.0",
+    "autoprefixer": "^9.8.8",
+    "cssnano": "^4.1.11",
+    "eslint": "^8.16.0",
+    "eslint-svelte3-preprocess": "^0.0.5",
+    "html-minifier": "^4.0.0",
+    "husky": "^8.0.1",
+    "jest": "^28.1.1",
+    "jest-environment-jsdom": "^28.1.2",
+    "jsdom": "^16.7.0",
+    "nodemon": "^2.0.16",
+    "npm-run-all": "^4.1.5",
+    "postcss": "^7.0.39",
+    "postcss-import": "^12.0.1",
+    "prettier": "^2.7.1",
+    "prettier-plugin-svelte": "^2.7.0",
+    "rollup": "^2.75.6",
+    "rollup-plugin-svelte": "^7.1.0",
+    "rollup-plugin-terser": "^7.0.2",
+    "sass": "^1.43.5",
+    "svelte-check": "^2.8.0",
+    "svelte-jester": "^2.3.2",
+    "svelte-preprocess": "^4.10.7",
+    "svelte-strip": "^1.0.1",
+    "ts-jest": "^28.0.5",
+    "ts-node": "^10.8.0",
+    "typescript": "^4.7.4"
+  }
+}

package/skeletons/toolv2-skeleton/resources/display-options-schema.json

@@ -0,0 +1,11 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "type": "object",
+  "title": "Anzeigeoptionen",
+  "properties": {
+    "hideTitle": {
+      "type": "boolean",
+      "title": "Titel ausblenden"
+    }
+  }
+}

package/skeletons/toolv2-skeleton/resources/locales/de/translation.json

@@ -0,0 +1,8 @@
+{
+    "notifications": {
+        "exampleNotification": {
+            "title": "Title",
+            "body": "body."
+        }
+    }
+}

package/skeletons/toolv2-skeleton/resources/locales/en/translation.json

@@ -0,0 +1,10 @@
+{
+    "Title": "Title",
+    "Untertitel": "Subtitle",
+    "notifications": {
+        "exampleNotification": {
+            "title": "Title",
+            "body": "body."
+        }
+    }
+}

package/skeletons/toolv2-skeleton/resources/locales/fr/translation.json

@@ -0,0 +1,10 @@
+{
+    "Title": "Titre",
+    "Untertitel": "Sous-titre",
+    "notifications": {
+        "exampleNotification": {
+            "title": "Title",
+            "body": "body."
+        }
+    }
+}

package/skeletons/toolv2-skeleton/resources/schema.json

@@ -0,0 +1,66 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "type": "object",
+  "title": "[tool-name]",
+  "properties": {
+    "title": {
+      "title": "Titel",
+      "type": "string"
+    },
+    "subtitle": {
+      "title": "Untertitel",
+      "type": "string"
+    }
+  },
+  "options": {
+    "title": "Optionen",
+    "type": "object",
+    "properties": {
+      "showSearch": {
+        "title": "Suche anzeigen",
+        "type": "boolean",
+        "default": false,
+        "Q:options": {
+          "availabilityChecks": [
+            {
+              "type": "ToolEndpoint",
+              "config": {
+                "endpoint": "option-availability/showSearch",
+                "fields": [
+                  "options"
+                ]
+              }
+            }
+          ],
+          "notificationChecks": [
+            {
+              "type": "ToolEndpoint",
+              "config": {
+                "endpoint": "notification/exampleNotification",
+                "fields": [
+                  "options"
+                ]
+              },
+              "priority": {
+                "type": "medium",
+                "value": 2
+              }
+            }
+          ],
+          "dynamicSchema": {
+            "type": "ToolEndpoint",
+            "config": {
+              "endpoint": "dynamic-schema/exampleDynamicSchema",
+              "fields": [
+                "options"
+              ]
+            }
+          }
+        }
+      }
+    }
+  },
+  "required": [
+    "title"
+  ]
+}

package/skeletons/toolv2-skeleton/rollup.config.js

@@ -0,0 +1,48 @@
+import alias from '@rollup/plugin-alias';
+import json from '@rollup/plugin-json';
+import nodeResolve from '@rollup/plugin-node-resolve';
+import svelte from 'rollup-plugin-svelte';
+import sveltePreprocess from 'svelte-preprocess';
+import typescript from '@rollup/plugin-typescript';
+import { terser } from 'rollup-plugin-terser';
+
+const backendConfig = {
+  input: 'src/routes/routes.ts',
+  output: {
+    file: 'dist/routes.js',
+    format: 'es',
+  },
+  plugins: [typescript(), json()],
+  external: ['@hapi/boom', 'ajv', 'd3-format', 'joi', 'module', 'path', 'simple-statistics', 'svelte/internal', 'uglify-js', 'url'],
+};
+
+const frontendConfig = {
+  input: 'src/components/main.svelte',
+  output: {
+    name: 'window.[tool_name]',
+    file: 'dist/[Tool-name].js',
+    format: 'iife',
+  },
+  plugins: [
+    typescript(),
+    json(),
+    svelte({
+      preprocess: sveltePreprocess(),
+      emitCss: false,
+      compilerOptions: {},
+    }),
+    nodeResolve({ browser: true }),
+    terser(),
+
+    alias({
+      entries: [
+        // If you add a new top-level-folder besides src which you want to use, add it here.
+        { find: /^@src(\/|$)/, replacement: `${__dirname}/src/` },
+        { find: /^@cps(\/|$)/, replacement: `${__dirname}/src/components/` },
+        { find: /^@helpers(\/|$)/, replacement: `${__dirname}/src/helpers/` },
+      ],
+    }),
+  ],
+};
+
+export default [frontendConfig, backendConfig];

package/skeletons/toolv2-skeleton/scripts/postinstall.sh

@@ -0,0 +1,5 @@
+#!/bin/bash
+if ! git rev-parse --is-inside-work-tree > /dev/null 2>&1; then
+    git init;
+    husky install;
+fi

package/skeletons/toolv2-skeleton/src/.eslintrc.cjs

@@ -0,0 +1,52 @@
+module.exports = {
+  root: true,
+  parser: '@typescript-eslint/parser',
+  extends: [
+    'eslint:recommended',
+
+    // Disables rules from eslint:recommended which are already handled by TypeScript.
+    'plugin:@typescript-eslint/eslint-recommended',
+
+    // Typescript defined rules for linter.
+    'plugin:@typescript-eslint/recommended',
+    'plugin:@typescript-eslint/recommended-requiring-type-checking',
+
+    // eslint-plugin-svelte rules.
+    'plugin:@ota-meshi/svelte/recommended',
+  ],
+  parserOptions: {
+    ecmaVersion: 2020,
+    sourceType: 'module',
+    tsconfigRootDir: __dirname + '/..',
+    project: ['tsconfig.json'],
+    extraFileExtensions: ['.svelte'],
+  },
+  env: {
+    es6: true,
+    browser: true,
+  },
+  overrides: [
+    {
+      files: ['*.svelte'],
+      parser: 'svelte-eslint-parser',
+      parserOptions: {
+        parser: '@typescript-eslint/parser',
+      },
+    },
+  ],
+  settings: {},
+  plugins: ['@ota-meshi/svelte', '@typescript-eslint'],
+  ignorePatterns: ['*.cjs', 'node_modules'],
+  rules: {
+    quotes: [2, 'single'],
+    '@typescript-eslint/no-explicit-any': 'error',
+    '@typescript-eslint/triple-slash-reference': 'off',
+    '@typescript-eslint/restrict-template-expressions': 'off',
+    '@typescript-eslint/explicit-function-return-type': [
+      'error',
+      {
+        allowExpressions: true,
+      },
+    ],
+  },
+};

package/skeletons/toolv2-skeleton/src/components/Main.spec.ts

@@ -0,0 +1,15 @@
+import Main from './Main.svelte';
+import { render } from '@testing-library/svelte';
+import { create[ToolName]SveltePropertiesFixture } from '@src/helpers/fixture-generators';
+
+describe('[Tool-name]', () => {
+  it('shows the component correctly', () => {
+    const componentProps = create[ToolName]SveltePropertiesFixture();
+
+    const { container } = render(Main, { props: { componentProps } });
+
+    const el = container.getElementsByClassName('s-q-item')[0];
+
+    expect(el).toBeInstanceOf(HTMLDivElement);
+  });
+});

package/skeletons/toolv2-skeleton/src/components/Main.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+import type { [ToolName]SvelteProperties } from '@src/interfaces';
+
+// You must type it expclitly to have no lint errors.
+export let componentProps: [ToolName]SvelteProperties;
+
+// Extract const heres.
+const { config, displayOptions, id } = componentProps;
+
+// Extract dynamic using let instead of cost.
+// let { dynProp } = componentProps;
+
+function shouldShowTitle(): boolean {
+  if (typeof displayOptions.hideTitle === 'boolean') {
+    return !displayOptions.hideTitle;
+  }
+
+  return true;
+}
+</script>
+
+<div {id} class="s-q-item">
+  {#if shouldShowTitle()}
+    <h3 class="s-q-item__title">{config.title}</h3>
+  {/if}
+
+  {#if config.subtitle && config.subtitle !== ''}
+    <div class="s-q-item__subtitle">{config.subtitle}</div>
+  {/if}
+
+  Your first [Tool-name]!
+</div>

package/skeletons/toolv2-skeleton/src/enums.ts

@@ -0,0 +1,11 @@
+// Put enums here.
+
+/**
+ * Example
+ */
+export const enum LEGEND_ID {
+  SMALL = 'small',
+  MEDIAN = 'median',
+  LARGE = 'large',
+  AVERAGE = 'average',
+}

package/skeletons/toolv2-skeleton/src/helpers/fixture-generators.ts

@@ -0,0 +1,38 @@
+/**
+ * Put all fixture generators here.
+ * Or if the file gets too big split them up to your liking.
+ */
+import type { DisplayOptions, [ToolName]Config, [ToolName]ConfigOptions, [ToolName]SvelteProperties } from '@src/interfaces';
+
+export function create[ToolName]SveltePropertiesFixture(): [ToolName]SvelteProperties {
+  const displayOptions = createDisplayOptionsFixture();
+
+  return {
+    config: create[ToolName]ConfigFixture(),
+    displayOptions,
+    id: 'id',
+    noInteraction: false,
+    width: 400,
+  };
+}
+
+export function create[ToolName]ConfigFixture(): [ToolName]Config {
+  return {
+    options: create[ToolName]ConfigOptionsFixture(),
+    title: 'title',
+    subtitle: 'id',
+  };
+}
+
+export function create[ToolName]ConfigOptionsFixture(): [ToolName]ConfigOptions {
+  return {
+    showSearch: true,
+  };
+}
+
+export function createDisplayOptionsFixture(override: Partial<DisplayOptions> = {}): DisplayOptions {
+  return {
+    hideTitle: false,
+    ...override,
+  };
+}

package/skeletons/toolv2-skeleton/src/helpers/toolRuntimeConfig.ts

@@ -0,0 +1,15 @@
+import type { ToolRuntimeConfig } from '../interfaces.js';
+
+export default function getExactPixelWidth(toolRuntimeConfig: ToolRuntimeConfig): number | undefined {
+  if (!toolRuntimeConfig.size || !Array.isArray(toolRuntimeConfig.size.width)) {
+    return undefined;
+  }
+
+  for (const width of toolRuntimeConfig.size.width) {
+    if (width && width.value && width.comparison === '=' && (!width.unit || width.unit === 'px')) {
+      return width.value;
+    }
+  }
+
+  return undefined;
+}

package/skeletons/toolv2-skeleton/src/interfaces.ts

@@ -0,0 +1,82 @@
+/**
+ * These interface are the basic setup for your [Tool-name] to run.
+ */
+
+/**
+ * What is received by your [Tool-name]'s backend.
+ */
+export interface WebPayload {
+  item: [ToolName]Config;
+  itemStateInDb: boolean;
+  toolRuntimeConfig: ToolRuntimeConfig;
+}
+
+/**
+ * The total config file.
+ */
+export interface [ToolName]Config {
+  options: [ToolName]ConfigOptions;
+  title: string;
+  subtitle: string;
+}
+
+/**
+ * Specific options for this Q-item.
+ */
+export interface [ToolName]ConfigOptions {
+  showSearch: boolean;
+}
+
+export interface DisplayOptions {
+  hideTitle?: boolean;
+}
+
+/**
+ * Specific options set for this runtime.
+ */
+export interface ToolRuntimeConfig {
+  displayOptions?: DisplayOptions;
+  fileRequestBaseUrl: string;
+  toolBaseUrl: string;
+  id: string;
+  size: {
+    width: Array<{ value: number; unit: string; comparison: '=' | '>' | '<' | '>=' | '<=' }>;
+  };
+  isPure: boolean;
+  requestId: string;
+  markup?: string;
+  noInteraction?: boolean;
+}
+
+/**
+ * What is sent to the front-end.
+ */
+export interface RenderingInfo {
+  polyfills: string[];
+  stylesheets: Array<{ name: string }>;
+  scripts: Array<{ content: string }>;
+  markup: string;
+}
+
+/**
+ * Standard interface for availability checks.
+ */
+export interface AvailabilityResponseObject {
+  available: boolean;
+}
+
+/**
+ * The config that you pass into your main svelte component.
+ * This is the entry point of your interacte Q-item.
+ */
+export interface [ToolName]SvelteProperties {
+  config: [ToolName]Config;
+  displayOptions: DisplayOptions;
+  noInteraction: boolean;
+  id: string;
+  width: number | undefined;
+}
+
+export interface StyleHashMap {
+  main: string;
+}

package/skeletons/toolv2-skeleton/src/modules.d.ts

@@ -0,0 +1,8 @@
+// The references is required to register the inert extension onto hapi__hapi so that
+// the h.file line is registered correctly by typescript.
+/// <reference path="../node_modules/@types/hapi__inert/index.d.ts"/>
+
+
+// https://www.typescriptlang.org/docs/handbook/declaration-files/introduction.html
+// https://www.typescriptlang.org/docs/handbook/modules.html
+// https://www.typescriptlang.org/docs/handbook/declaration-files/templates.html

package/skeletons/toolv2-skeleton/src/routes/dynamic-schemas/exampleDynamicSchema.ts

@@ -0,0 +1,49 @@
+/**
+ * Dynamic schemas return options to a field that change depending
+ * other settings. Hence, dynamic options.
+ *
+ * You can write your logic in the handler and return whatever options
+ * are decided.
+ */
+import Joi from 'joi';
+import type { [ToolName]ConfigOptions } from '@src/interfaces';
+import type { Request, ServerRoute } from '@hapi/hapi';
+
+const route: ServerRoute = {
+  method: 'POST',
+  path: '/dynamic-schema/exampleDynamicSchema',
+  options: {
+    validate: {
+      payload: Joi.object(),
+    },
+  },
+  handler: function (request: Request): ExampleDynamicSchemeReturnPayload {
+    const payload = request.payload as Payload;
+    const options = payload.item.options;
+
+    return {
+      enum: ['one', 'two', 'three', 'four'],
+      'Q:options': {
+        enum_titles: ['1', '2', '3', '4'],
+      },
+    };
+  },
+};
+
+export default route;
+
+/**
+ * Interfaces.
+ */
+interface Payload {
+  item: {
+    options: [ToolName]ConfigOptions;
+  };
+}
+
+export interface ExampleDynamicSchemeReturnPayload {
+  enum: string[];
+  'Q:options': {
+    enum_titles: string[];
+  };
+}

package/skeletons/toolv2-skeleton/src/routes/dynamic-schemas/index.ts

@@ -0,0 +1,5 @@
+import exampleDynamicSchema from './exampleDynamicSchema.js';
+
+export default [
+  exampleDynamicSchema,
+];

package/skeletons/toolv2-skeleton/src/routes/health.ts

@@ -0,0 +1,14 @@
+import type { ServerRoute } from '@hapi/hapi';
+
+const route: ServerRoute = {
+  path: '/health',
+  method: 'GET',
+  options: {
+    tags: ['api'],
+  },
+  handler: () => {
+    return 'ok';
+  },
+};
+
+export default route;

package/skeletons/toolv2-skeleton/src/routes/locales.ts

@@ -0,0 +1,31 @@
+import Joi from 'joi';
+import { dirname } from 'path';
+import { fileURLToPath } from 'url';
+import type { Request, ServerRoute, ResponseToolkit } from '@hapi/hapi';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const localesDir = __dirname + '/../../resources/locales/';
+
+const route: ServerRoute = {
+  path: '/locales/{lng}/translation.json',
+  method: 'GET',
+  options: {
+    description: 'Returns translations for given language',
+    tags: ['api'],
+    validate: {
+      params: {
+        lng: Joi.string().required(),
+      },
+    },
+  },
+  handler: (request: Request, h: ResponseToolkit) => {
+    const params = request.params as Params;
+    return h.file(localesDir + params.lng + '/translation.json').type('application/json');
+  },
+};
+
+export default route;
+
+interface Params {
+  lng: string;
+}

package/skeletons/toolv2-skeleton/src/routes/notifications/exampleNotification.ts

@@ -0,0 +1,46 @@
+import Joi from 'joi';
+import type { Request } from '@hapi/hapi';
+import type { [ToolName]ConfigOptions } from '@src/interfaces';
+
+export default {
+  method: 'POST',
+  path: '/notification/exampleNotification',
+  options: {
+    validate: {
+      options: {
+        allowUnknown: true,
+      },
+      payload: Joi.object().required(),
+    },
+    tags: ['api'],
+  },
+  handler: function (request: Request) {
+    try {
+      const payload = request.payload as Payload;
+      const item = payload.item;
+
+      /** Response is fetched from the locales folder. */
+      return {
+        message: {
+          title: 'notifications.exampleNotification.title',
+          body: 'notifications.exampleNotification.body',
+        },
+      };
+    } catch (err) {
+      console.log('Error processing /notification/exampleNotification', err);
+    }
+
+    return null;
+  },
+};
+
+/**
+ * Payload is defined in the schema.json:
+ * showSearch -> notificationChecks -> fields
+ */
+interface Payload {
+  item: {
+    options: [ToolName]ConfigOptions;
+  };
+  roles: string[];
+}