@telia-ace/widget-runtime-flamingo 1.0.62 → 1.1.1-rc.0

package/.eslintrc.json

@@ -0,0 +1,30 @@
+{
+  "extends": ["../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.json"],
+      "parser": "jsonc-eslint-parser",
+      "rules": {
+        "@nx/dependency-checks": [
+          "error",
+          {
+            "ignoredFiles": ["{projectRoot}/vite.config.{js,ts,mjs,mts}"]
+          }
+        ]
+      }
+    }
+  ]
+}

package/README.md

@@ -0,0 +1,11 @@
+# widget-runtime
+
+This library was generated with [Nx](https://nx.dev).
+
+## Building
+
+Run `nx build widget-runtime` to build the library.
+
+## Running unit tests
+
+Run `nx test widget-runtime` to execute the unit tests via [Jest](https://jestjs.io).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@telia-ace/widget-runtime-flamingo",
-  "version": "1.0.62",
+  "version": "1.1.1-rc.0",
   "publishConfig": {
     "registry": "https://registry.npmjs.org"
   },
@@ -12,14 +12,7 @@
     "lit": "^2.8.0",
     "@teliads/icons": "^8.4.0",
     "@telia-ace/widget-core": "^1.0.27",
-    "@webprovisions/bootstrapping": "^1.0.13",
-    "@telia-ace/widget-runtime-flamingo": "1.0.62",
-    "@telia-ace/widget-conversation-flamingo": "1.0.62",
-    "@telia-ace/knowledge-widget-bot-provider-flamingo": "1.0.62",
-    "@telia-ace/knowledge-data-client-flamingo": "1.0.62",
-    "@telia-ace/widget-components-copyright-flamingo": "1.0.62",
-    "@telia-ace/widget-components-list-flamingo": "1.0.62",
-    "@telia-ace/widget-components-widget-header-flamingo": "1.0.62"
+    "@webprovisions/bootstrapping": "^1.0.13"
   },
   "main": "./index.js",
   "module": "./index.mjs",

package/project.json

@@ -0,0 +1,48 @@
+{
+  "name": "runtime",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "libs/runtime/src",
+  "projectType": "library",
+  "targets": {
+    "build": {
+      "executor": "@nx/vite:build",
+      "outputs": ["{options.outputPath}"],
+      "options": {
+        "outputPath": "dist/libs/runtime"
+      }
+    },
+    "publish": {
+      "executor": "nx:run-commands",
+      "options": {
+        "command": "npm publish",
+        "cwd": "dist/libs/runtime"
+      }
+    },
+    "prerelease": {
+      "executor": "nx:run-commands",
+      "options": {
+        "command": "npm publish --tag=rc",
+        "cwd": "dist/libs/runtime"
+      }
+    },
+    "test": {
+      "executor": "@nx/vite:test",
+      "outputs": ["{options.reportsDirectory}"],
+      "options": {
+        "passWithNoTests": true,
+        "reportsDirectory": "../../coverage/libs/runtime"
+      }
+    },
+    "lint": {
+      "executor": "@nx/eslint:lint",
+      "outputs": ["{options.outputFile}"],
+      "options": {
+        "lintFilePatterns": [
+          "libs/runtime/**/*.ts",
+          "libs/runtime/package.json"
+        ]
+      }
+    }
+  },
+  "tags": []
+}

package/src/component-platform-factory.ts

@@ -0,0 +1,163 @@
+import {
+  ChangesetOptions,
+  ChangesetProvider,
+  ComponentNodeAttributes,
+  ComponentNodeSettings,
+  ComponentPlatform,
+  ComponentQuery,
+  ComponentQueryRule,
+  createComponentModel,
+  WidgetSettings,
+} from '@telia-ace/widget-core';
+import {
+  createStorageWriter,
+  readStorage,
+  StorageCategory,
+  StorageMedium,
+  StorageWriter,
+} from '@telia-ace/widget-services';
+import { lock } from '@telia-ace/widget-utilities';
+import { Container, Widget, WidgetState } from '@webprovisions/platform';
+
+const STORAGE_KEY = 'changesets';
+
+type ChangesetItem = {
+  rules: ComponentQueryRule[];
+  attributes: Partial<ComponentNodeAttributes>;
+  options: ChangesetOptions;
+};
+
+type ChangesetItemBag = {
+  items?: { [key: string]: ChangesetItem };
+  keys?: string[];
+};
+
+const convertSettingsToAttributes = (
+  settings: Partial<ComponentNodeSettings>
+): Partial<ComponentNodeAttributes> => {
+  const attributes: Partial<ComponentNodeAttributes> = { tags: settings.tags };
+  if (settings.context && typeof settings.context !== 'function') {
+    attributes.context = settings.context;
+  }
+  if (settings.properties && typeof settings.properties !== 'function') {
+    attributes.properties = settings.properties;
+  }
+  if (settings.layout && typeof settings.layout !== 'function') {
+    attributes.layout = settings.layout;
+  }
+
+  return attributes;
+};
+
+export class LocalStorageChangesetProvider implements ChangesetProvider {
+  constructor(
+    private container: Container,
+    private storageWriter: StorageWriter
+  ) {}
+
+  static create(container: Container): Promise<LocalStorageChangesetProvider> {
+    return createStorageWriter(
+      container,
+      STORAGE_KEY,
+      StorageCategory.Necessary,
+      {
+        medium: StorageMedium.Local,
+      }
+    ).then(
+      (storageWriter) =>
+        new LocalStorageChangesetProvider(container, storageWriter)
+    );
+  }
+
+  write(
+    key: string,
+    target: ComponentQuery,
+    attributes: Partial<ComponentNodeSettings>,
+    options: ChangesetOptions
+  ): Promise<any> {
+    return lock(this)(() => {
+      return readStorage<ChangesetItemBag>(
+        this.container,
+        STORAGE_KEY,
+        StorageMedium.Local
+      ).then((bag = {}) => {
+        const { keys = [], items = {} } = bag;
+        const existingIndex = keys.indexOf(key);
+        if (existingIndex > -1) {
+          keys.splice(existingIndex, 1);
+        }
+        keys.push(key);
+        items[key] = {
+          options,
+          attributes: convertSettingsToAttributes(attributes),
+          rules: target.rules,
+        };
+        return this.storageWriter({ keys, items });
+      });
+    });
+  }
+
+  remove(key: string): Promise<any> {
+    return lock(this)(() => {
+      return readStorage<ChangesetItemBag>(
+        this.container,
+        STORAGE_KEY,
+        StorageMedium.Local
+      ).then((bag = {}) => {
+        const { keys = [], items = {} } = bag;
+        const indexToRemove = keys.indexOf(key);
+        if (indexToRemove > -1) {
+          keys.splice(indexToRemove, 1);
+          delete items[key];
+          return this.storageWriter(bag);
+        }
+      });
+    });
+  }
+
+  load(platform: ComponentPlatform): Promise<any> {
+    return lock(this)(() => {
+      return readStorage<ChangesetItemBag>(
+        this.container,
+        STORAGE_KEY,
+        StorageMedium.Local
+      ).then((bag = {}) => {
+        const { keys = [], items = {} } = bag;
+        keys.forEach((key) => {
+          const item = items[key];
+          if (item) {
+            const { rules, attributes, options } = item;
+            platform.write({
+              attributes,
+              options,
+              target: new ComponentQuery(platform, rules),
+            });
+          }
+        });
+      });
+    });
+  }
+}
+
+export const createPlatform = (widget: Widget): Promise<ComponentPlatform> => {
+  const { container } = widget;
+  return LocalStorageChangesetProvider.create(container).then(
+    (localStorage) => {
+      const settings: WidgetSettings = container.get('$settings');
+      const providers = { localStorage };
+      const platform = new ComponentPlatform(widget, providers);
+      const destructComponentModel = createComponentModel(platform, settings);
+
+      widget.events.subscribe(
+        'widget:state-change',
+        (_event, data: { state: WidgetState }) => {
+          if (data.state === WidgetState.Deactivating) {
+            destructComponentModel();
+          }
+        }
+      );
+
+      return platform;
+    }
+  );
+};

package/src/context/children.context.ts

@@ -0,0 +1,4 @@
+import { createContext } from '@lit-labs/context';
+import { ComponentDescriptor } from '@telia-ace/widget-core';
+
+export const childrenContext = createContext<ComponentDescriptor[]>('children');

package/src/context/component-node.context.ts

@@ -0,0 +1,6 @@
+import { createContext } from '@lit-labs/context';
+import { ComponentDescriptor } from '@telia-ace/widget-core';
+
+export const descriptorContext = createContext<ComponentDescriptor | undefined>(
+  'descriptor'
+);

package/src/context/container.context.ts

@@ -0,0 +1,6 @@
+import { Container } from '@webprovisions/platform';
+import { createContext } from '@lit-labs/context';
+
+export const containerContext = createContext<Container | undefined>(
+  'container'
+);

package/src/context/context.context.ts

@@ -0,0 +1,3 @@
+import { createContext } from '@lit-labs/context';
+
+export const contextCtx = createContext<Record<string, any>>('context');

package/src/context/layout.context.ts

@@ -0,0 +1,3 @@
+import { createContext } from '@lit-labs/context';
+
+export const layoutCtx = createContext<Record<string, any>>('layout');

package/src/context/properties.context.ts

@@ -0,0 +1,3 @@
+import { createContext } from '@lit-labs/context';
+
+export const propertiesCtx = createContext<Record<string, any>>('properties');

package/src/controllers/actions-controller.ts

@@ -0,0 +1,55 @@
+import {
+  ReactiveController,
+  ReactiveControllerHost,
+  ReactiveElement,
+} from 'lit';
+import { Container } from '@webprovisions/platform';
+import {
+  ComponentDescriptor,
+  ComponentPlatform,
+  ComponentQuery,
+} from '@telia-ace/widget-core';
+import { uuid } from '@telia-ace/widget-utilities';
+
+export class ActionsController implements ReactiveController {
+  host: ReactiveControllerHost;
+
+  private _container?: Container;
+
+  private _descriptor?: ComponentDescriptor;
+
+  constructor(host: ReactiveElement) {
+    (this.host = host).addController(this);
+  }
+
+  hostConnected() {}
+  hostDisconnected() {}
+
+  setDescriptor(descriptor: ComponentDescriptor) {
+    this._descriptor = descriptor;
+  }
+
+  setContainer(container: Container) {
+    this._container = container;
+  }
+
+  async dispatch(key: string, value: Record<string, any> | string) {
+    if (!this._container || !this._descriptor) {
+      return;
+    }
+
+    const componentPlatform = await ComponentPlatform.getInstance(
+      this._container
+    );
+
+    const query = new ComponentQuery(componentPlatform).withId(
+      this._descriptor.id
+    );
+    const actions = componentPlatform.actions(
+      query,
+      this._descriptor.type || uuid()
+    );
+
+    await actions.dispatch(key, value);
+  }
+}

package/src/core/create-lit-component.ts

@@ -0,0 +1,31 @@
+import {
+  ComponentResolver,
+  extendComponent,
+  ExtendComponentHandler,
+  ExtendComponentOptions,
+} from '@telia-ace/widget-core';
+import { Container } from '@webprovisions/platform';
+
+/**
+ * Registers a Lit  component on the component platform.
+ * @param container Container to register the component on.
+ * @param type Type name to resolve the component from configuration.
+ * @param component Promise resolving to the Lit component for rendering.
+ * @param fn Handler for controlling the component.
+ */
+const createLitComponent = (
+  container: Container,
+  type: string,
+  component: any, // e.g. import('./component.ts)
+  fn?: ExtendComponentHandler,
+  options?: ExtendComponentOptions
+) => {
+  return container
+    .getAsync('componentResolver')
+    .then((componentResolver: ComponentResolver) => {
+      componentResolver.registerComponent(type, component);
+      return extendComponent(container, type, fn || (() => {}), type, options);
+    });
+};
+
+export default createLitComponent;

package/src/core/get-render-state.ts

@@ -0,0 +1,25 @@
+import { ActionResolver, WidgetRenderState } from '@telia-ace/widget-core';
+import { Container } from '@webprovisions/platform';
+
+export const getRenderState = async (container: Container) => {
+  const widget = container.get('$widget');
+
+  const renderState: WidgetRenderState = await widget.invoke('renderState');
+
+  return renderState;
+};
+
+export const subscribeToRenderState = async (
+  container: Container,
+  subscriptionFn: (origin: string, action: string) => void
+) => {
+  const widget = container.get('$widget');
+
+  const actionResolver: ActionResolver = await container.getAsync(
+    'actionResolver'
+  );
+
+  const unsubscribe = actionResolver.subscribe(widget.name, subscriptionFn);
+
+  return unsubscribe;
+};

package/src/data-provider/data-provider.ts

@@ -0,0 +1,87 @@
+import { ComponentNodeController } from '@telia-ace/widget-core';
+import { Container } from '@webprovisions/platform';
+
+type DataResource = {
+  query: (
+    input: Record<string, any>,
+    providerSettings: Record<string, any>
+  ) => Promise<any>;
+};
+
+type DataProviderSettings = Record<string, any>;
+
+export const getProvider = async (
+  component: ComponentNodeController,
+  container: Container
+) => {
+  const providerProperty: string | [string, any] | undefined =
+    component.properties().provider;
+  let providerSettings = {};
+
+  let providerKey = '';
+  if (Array.isArray(providerProperty)) {
+    providerKey = providerProperty[0];
+    providerSettings = providerProperty[1];
+  } else {
+    providerKey = providerProperty || '';
+  }
+
+  const provider: DataProvider | undefined = await container.getAsync(
+    providerKey
+  );
+
+  if (!provider) {
+    throw new Error('No provider defined in ListComponent');
+  }
+
+  provider.applyComponentNodeSettings(component.node.id, providerSettings);
+
+  return { provider, settings: providerSettings };
+};
+
+export const createDataProvider = async (
+  component: ComponentNodeController,
+  container: Container
+) => {
+  const { provider, settings = {} } = await getProvider(component, container);
+
+  return {
+    addResource: (resourceKey: string, resource: DataResource) => {
+      return provider.addResource(resourceKey, resource);
+    },
+    getData: (resourceKey: string, input: Record<string, any>) => {
+      return provider.getData(resourceKey, input, settings);
+    },
+  };
+};
+
+export class DataProvider {
+  private resources = new Map<string, DataResource>();
+  private nodeConfiguration = new Map<string, DataProviderSettings>();
+
+  constructor(public container: Container) {}
+
+  async getData(
+    resourceKey: string,
+    input: Record<string, any>,
+    providerSettings: Record<string, any>
+  ) {
+    const entityProvider = this.resources.get(resourceKey);
+
+    if (!entityProvider) {
+      throw new Error(`Unable to get EntityProvider for "${resourceKey}"`);
+    }
+
+    const response = await entityProvider.query(input, providerSettings);
+
+    return response;
+  }
+
+  addResource(resourceKey: string, resource: DataResource) {
+    this.resources.set(resourceKey, resource);
+  }
+
+  applyComponentNodeSettings(nodeId: string, value: DataProviderSettings) {
+    this.nodeConfiguration.set(nodeId, value);
+  }
+}

package/src/data-provider/providers/guide-provider.plugin.ts

@@ -0,0 +1,64 @@
+import { Container } from '@webprovisions/platform';
+import { DataProvider } from '../data-provider';
+
+type RawGuide = any;
+
+const formatGuideToItem = (rawGuide: Record<string, RawGuide>) => {
+  return {
+    title: rawGuide.Title,
+    id: rawGuide.Id.toString(),
+  };
+};
+
+class GuideProvider extends DataProvider {
+  constructor(container: Container) {
+    super(container);
+
+    this.addResource('item', {
+      query: async (input: Record<string, any>, providerSettings) => {
+        const itemId = input.itemId;
+        const client = '78aacc09-ae6f-5485-5ca3-9dacebb95825';
+        const funnel = container.get('$widget').name;
+        const projection = providerSettings.projection || '';
+
+        const response = await fetch(
+          `${projection}/guides/${itemId}?client=${client}&funnel=${funnel}&site=%2F%2Fdemo.humany.cc%2Fadmin%2Finterfaces&phrase=&connectionId=&p.LastGuideId=2857`
+        );
+
+        const data = await response.json();
+
+        return data ? formatGuideToItem(data) : null;
+      },
+    });
+
+    this.addResource('items', {
+      query: async (_input, providerSettings) => {
+        const client = '';
+        const funnel = container.get('$widget').name;
+        const projection = providerSettings.projection || '';
+        const site = '';
+        const skip = '0';
+        const take = '10';
+
+        const response = await fetch(
+          `${projection}/guides?client=${client}&funnel=${funnel}&site=${site}&phrase=&skip=${skip}&take=${take}&sorting.type=popularity&sorting.direction=descending`
+        );
+
+        const data = await response.json();
+
+        return {
+          items: (data.Matches || []).map((item: RawGuide) => {
+            return formatGuideToItem(item);
+          }),
+          totalItems: data?.TotalMatches || 0,
+        };
+      },
+    });
+  }
+}
+
+export const GuideProviderPlugin = async (container: Container) => {
+  container.registerAsync('guideProvider', () => {
+    return new GuideProvider(container);
+  });
+};

package/src/declaration.d.ts

@@ -0,0 +1,2 @@
+declare type Optional<T> = T | undefined;
+declare type Merge<M, N> = Omit<M, Extract<keyof M, keyof N>> & N;

package/{index.d.ts → src/index.ts}

@@ -1,12 +1,24 @@
+// export { default as Component } from './ui/component';
+// export { default as DetachedComponent } from './ui/detached-component';
+// export { default as NotFound } from './ui/not-found';
+// export { styling as genericComponentStyling } from './ui/styles';
 export { default as GridWidget, default as Widget } from './widget';
+
 export { childrenContext } from './context/children.context';
 export { descriptorContext } from './context/component-node.context';
 export { containerContext } from './context/container.context';
 export { contextCtx } from './context/context.context';
 export { layoutCtx } from './context/layout.context';
 export { propertiesCtx } from './context/properties.context';
+
 export { ActionsController } from './controllers/actions-controller';
-export { DataProvider, createDataProvider, } from './data-provider/data-provider';
+
+export {
+  DataProvider,
+  createDataProvider,
+} from './data-provider/data-provider';
 export { GuideProviderPlugin } from './data-provider/providers/guide-provider.plugin';
+
 export { default as createWebComponent } from './core/create-lit-component';
+
 export { WidgetComponent } from './mixins/widget-component.mixin';