@retailcrm/embed-ui 0.1.0 → 0.2.0

package/.versionrc.json

@@ -0,0 +1,12 @@
+{
+    "types": [
+        {"type": "feat", "section": "Features"},
+        {"type": "fix", "section": "Fixes"},
+        {"type": "chore", "hidden": true},
+        {"type": "docs", "hidden": true},
+        {"type": "style", "hidden": true},
+        {"type": "refactor", "hidden": true},
+        {"type": "perf", "hidden": true},
+        {"type": "test", "hidden": true}
+    ]
+}

package/CHANGELOG.md

@@ -2,6 +2,18 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [0.2.0](https://github.com/retailcrm/embed-ui/compare/v0.1.0...v0.2.0) (2024-11-02)
+
+
+### ⚠ BREAKING CHANGES
+
+* Removed all types from types/endpoint.d.ts, old ones were replaced with types from types/widget.d.ts
+* Removed previous pages API, which was replaced with reactive context API
+
+### Features
+
+* Scaffolding logic for widgets, reactive context, json metadata for creating documentation ([9ddd8f8](https://github.com/retailcrm/embed-ui/commit/9ddd8f89759fbeb964556a1401c8f23af6c51467))
+
 ## [0.1.0](https://github.com/retailcrm/embed-ui/compare/v0.0.1...v0.1.0) (2024-04-27)
 
 

package/Makefile

@@ -0,0 +1,48 @@
+TARGET_HEADER=@echo -e '===== \e[34m' $@ '\e[0m'
+YARN=docker-compose run --rm node yarn
+
+.PHONY: node_modules
+node_modules: package.json yarn.lock ## Installs dependencies
+	$(TARGET_HEADER)
+	@docker-compose run --rm node yarn install --silent
+	@touch node_modules || true
+
+.PHONY: build
+build: ## Builds the package
+	$(TARGET_HEADER)
+	$(YARN) build
+	$(YARN) generate:meta
+
+.PHONY: release
+release: ## Bumps version and creates tag
+	$(TARGET_HEADER)
+ifdef as
+	$(YARN) release:$(as)
+else
+	$(YARN) release
+endif
+
+.PHONY: tests
+tests: ## Runs autotests
+	$(TARGET_HEADER)
+ifdef cli
+	$(YARN) test $(cli) --passWithNoTests
+else
+	$(YARN) test
+endif
+
+.PHONY: help
+help: ## Calls recipes list
+	@cat $(MAKEFILE_LIST) | grep -e "^[a-zA-Z_\-]*: *.*## *" | awk '\
+	    BEGIN {FS = ":.*?## "}; {printf "\033[36m%-30s\033[0m %s\n", $$1, $$2}'
+
+# Colors
+$(call computable,CC_BLACK,$(shell tput -Txterm setaf 0 2>/dev/null))
+$(call computable,CC_RED,$(shell tput -Txterm setaf 1 2>/dev/null))
+$(call computable,CC_GREEN,$(shell tput -Txterm setaf 2 2>/dev/null))
+$(call computable,CC_YELLOW,$(shell tput -Txterm setaf 3 2>/dev/null))
+$(call computable,CC_BLUE,$(shell tput -Txterm setaf 4 2>/dev/null))
+$(call computable,CC_MAGENTA,$(shell tput -Txterm setaf 5 2>/dev/null))
+$(call computable,CC_CYAN,$(shell tput -Txterm setaf 6 2>/dev/null))
+$(call computable,CC_WHITE,$(shell tput -Txterm setaf 7 2>/dev/null))
+$(call computable,CC_END,$(shell tput -Txterm sgr0 2>/dev/null))

package/dist/index.cjs

@@ -0,0 +1,217 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const rpc = require("@remote-ui/rpc");
+const pinia = require("pinia");
+const remote = require("@omnicajs/vue-remote/remote");
+const vue = require("vue");
+const keysOf = (o) => Object.keys(o);
+const injectAccessor = (endpoint) => {
+  return (context) => {
+    context.store.endpoint = endpoint;
+  };
+};
+const defineContext = (id, schema2) => {
+  return pinia.defineStore(id, {
+    state() {
+      return {
+        ...keysOf(schema2).reduce((state, field) => ({
+          ...state,
+          [field]: schema2[field].defaults()
+        }), {})
+      };
+    },
+    getters: {
+      schema: () => schema2
+    },
+    actions: {
+      async initialize() {
+        const context = this;
+        const endpoint = this.endpoint;
+        const state = await endpoint.call.get(id, "~");
+        keysOf(schema2).forEach((field) => {
+          context[field] = state[field];
+          endpoint.call.on(id, `change:${String(field)}`, (value) => {
+            context[field] = value;
+          });
+        });
+      },
+      set(field, value) {
+        if (!(field in schema2)) {
+          throw new Error(`[crm:embed:remote] Field ${String(field)} is not present in context ${id}`);
+        }
+        if (schema2[field].readonly) {
+          throw new Error(`[crm:embed:remote] Field ${String(field)} is readonly in context ${id}`);
+        }
+        if (!schema2[field].accepts(value)) {
+          throw new Error(`[crm:embed:remote] Invalid value for field ${String(field)} in context ${id}`);
+        }
+        const context = this;
+        const endpoint = this.endpoint;
+        context[field] = value;
+        endpoint.call.set(id, field, value);
+      }
+    }
+  });
+};
+const useField = (store, field) => {
+  if (store.schema[field].readonly) {
+    return vue.computed(() => store[field]);
+  }
+  return vue.computed({
+    get: () => store[field],
+    set: (value) => {
+      store.set(field, value);
+    }
+  });
+};
+const withMeta = (predicate, type) => {
+  return Object.assign(predicate, { type });
+};
+const isNull = withMeta((value) => value === null, "null");
+const isNumber = withMeta((value) => typeof value === "number", "number");
+const isString = withMeta((value) => typeof value === "string", "string");
+const arrayOf = (predicate) => withMeta(
+  (value) => {
+    return Array.isArray(value) && value.every(predicate);
+  },
+  `Array<${predicate.type}>`
+);
+const oneOf = (...predicates) => withMeta(
+  (value) => {
+    return predicates.some((predicate) => predicate(value));
+  },
+  predicates.map((p) => p.type).join(" | ")
+);
+const schema$3 = {
+  "id": {
+    accepts: oneOf(isNumber, isNull),
+    defaults: () => null,
+    readonly: true
+  },
+  "externalId": {
+    accepts: isString,
+    defaults: () => null,
+    readonly: true
+  },
+  "email": {
+    accepts: isString,
+    defaults: () => "",
+    readonly: true
+  },
+  "phones": {
+    accepts: arrayOf(isString),
+    defaults: () => [],
+    readonly: true
+  }
+};
+const useContext$3 = defineContext("customer/card", schema$3);
+const schema$2 = {
+  value: {
+    accepts: isString,
+    defaults: () => "",
+    readonly: true
+  },
+  index: {
+    accepts: isNumber,
+    defaults: () => 0,
+    readonly: true
+  }
+};
+const useContext$2 = defineContext("customer/card:phone", schema$2);
+const schema$1 = {
+  "customer.email": {
+    accepts: oneOf(isString, isNull),
+    defaults: () => null,
+    readonly: false
+  },
+  "customer.phone": {
+    accepts: oneOf(isString, isNull),
+    defaults: () => null,
+    readonly: false
+  },
+  "delivery.address": {
+    accepts: oneOf(isString, isNull),
+    defaults: () => null,
+    readonly: false
+  }
+};
+const useContext$1 = defineContext("order/card", schema$1);
+const locales = ["en-GB", "es-ES", "ru-RU"];
+const isLocale = withMeta(
+  (value) => locales.includes(value),
+  locales.map((l) => `'${l}'`).join(" | ")
+);
+const schema = {
+  "order.templates.number.api": {
+    accepts: isString,
+    defaults: () => "",
+    readonly: true
+  },
+  "order.templates.number.crm": {
+    accepts: isString,
+    defaults: () => "",
+    readonly: true
+  },
+  "system.locale": {
+    accepts: isLocale,
+    defaults: () => "en-GB",
+    readonly: true
+  }
+};
+const useContext = defineContext("settings", schema);
+const createRoot = async (channel) => {
+  const root = remote.createRemoteRoot(channel, {
+    components: [
+      "UiButton",
+      "UiError",
+      "UiLink",
+      "UiLoader",
+      "UiMenuItem",
+      "UiMenuItemGroup",
+      "UiModalSidebar",
+      "UiModalWindow",
+      "UiModalWindowSurface",
+      "UiScrollbar",
+      "UiTag",
+      "UiTransition"
+    ]
+  });
+  await root.mount();
+  return root;
+};
+const createWidgetEndpoint = (widget, messenger) => {
+  const endpoint = rpc.createEndpoint(messenger);
+  const pinia$1 = pinia.createPinia();
+  pinia$1.use(injectAccessor(endpoint));
+  let onRelease = () => {
+  };
+  endpoint.expose({
+    async run(channel, target) {
+      rpc.retain(channel);
+      const root = await createRoot(channel);
+      await root.mount();
+      const { createApp } = remote.createRemoteRenderer(root);
+      const destroy = await widget.run(createApp, root, pinia$1, target);
+      onRelease = () => {
+        destroy();
+        rpc.release(channel);
+      };
+    },
+    release() {
+      onRelease();
+      onRelease = () => {
+      };
+    }
+  });
+  return endpoint;
+};
+exports.createWidgetEndpoint = createWidgetEndpoint;
+exports.customerCardPhoneSchema = schema$2;
+exports.customerCardSchema = schema$3;
+exports.orderCardSchema = schema$1;
+exports.settingsSchema = schema;
+exports.useCustomerCardContext = useContext$3;
+exports.useCustomerCardPhoneContext = useContext$2;
+exports.useField = useField;
+exports.useOrderCardContext = useContext$1;
+exports.useSettingsContext = useContext;

package/dist/index.d.ts

@@ -0,0 +1,75 @@
+import { ComputedRef } from 'vue';
+import { Context } from '../../../types/context/schema';
+import { Context as Context_2 } from '../../types/context/schema';
+import { ContextAccessor } from '../types/context/schema';
+import { ContextSchema } from '../../types/context/schema';
+import { Endpoint } from '@remote-ui/rpc';
+import { IsReadonly } from '../../types/context/schema';
+import { MessageEndpoint } from '@remote-ui/rpc';
+import { Schema } from '../../../types/context/customer/card';
+import { Schema as Schema_2 } from '../../../types/context/customer/card-phone';
+import { Schema as Schema_3 } from '../../../types/context/order/card';
+import { Schema as Schema_4 } from '../../types/context/settings';
+import { SchemaList } from '../types/context';
+import { Store } from 'pinia';
+import { StoreDefinition } from 'pinia';
+import { TypeOf } from '../../../types/context/schema';
+import { TypeOf as TypeOf_2 } from '../../types/context/schema';
+import { WidgetRunner } from '../types/widget';
+import { WritableComputedRef } from 'vue';
+
+declare type Computed<S extends ContextSchema, F extends keyof S> = IsReadonly<S[F]> extends true ? ComputedRef<TypeOf_2<S[F]>> : WritableComputedRef<TypeOf_2<S[F]>>;
+
+export declare const createWidgetEndpoint: (widget: WidgetRunner, messenger: MessageEndpoint) => Endpoint<ContextAccessor<SchemaList>>;
+
+export declare const customerCardPhoneSchema: Schema_2;
+
+export declare const customerCardSchema: Schema;
+
+export declare const orderCardSchema: Schema_3;
+
+export declare const settingsSchema: Schema_4;
+
+export declare const useCustomerCardContext: StoreDefinition<"customer/card", Context<Schema>, {
+schema: () => Schema;
+}, {
+initialize(): Promise<void>;
+set<F extends keyof Schema>(field: F, value: TypeOf<Schema[F]>): void;
+}>;
+
+export declare const useCustomerCardPhoneContext: StoreDefinition<"customer/card:phone", Context<Schema_2>, {
+schema: () => Schema_2;
+}, {
+initialize(): Promise<void>;
+set<F extends keyof Schema_2>(field: F, value: TypeOf<Schema_2[F]>): void;
+}>;
+
+export declare const useField: <S extends ContextSchema, F extends keyof S>(store: Store<string, Context_2<S>, {
+    schema(): S;
+}, {
+    initialize(): Promise<void>;
+    set<F_1 extends keyof S>(field: F_1, value: TypeOf_2<S[F_1]>): void;
+}>, field: F) => Computed<S, F>;
+
+export declare const useOrderCardContext: StoreDefinition<"order/card", Context<Schema_3>, {
+schema: () => Schema_3;
+}, {
+initialize(): Promise<void>;
+set<F extends keyof Schema_3>(field: F, value: TypeOf<Schema_3[F]>): void;
+}>;
+
+export declare const useSettingsContext: StoreDefinition<"settings", Context_2<Schema_4>, {
+schema: () => Schema_4;
+}, {
+initialize(): Promise<void>;
+set<F extends keyof Schema_4>(field: F, value: TypeOf_2<Schema_4[F]>): void;
+}>;
+
+export { }
+
+
+declare module 'pinia' {
+    interface PiniaCustomProperties {
+        endpoint: Endpoint<ContextAccessor>;
+    }
+}

package/dist/index.mjs

@@ -0,0 +1,217 @@
+import { createEndpoint, retain, release } from "@remote-ui/rpc";
+import { defineStore, createPinia } from "pinia";
+import { createRemoteRenderer, createRemoteRoot } from "@omnicajs/vue-remote/remote";
+import { computed } from "vue";
+const keysOf = (o) => Object.keys(o);
+const injectAccessor = (endpoint) => {
+  return (context) => {
+    context.store.endpoint = endpoint;
+  };
+};
+const defineContext = (id, schema2) => {
+  return defineStore(id, {
+    state() {
+      return {
+        ...keysOf(schema2).reduce((state, field) => ({
+          ...state,
+          [field]: schema2[field].defaults()
+        }), {})
+      };
+    },
+    getters: {
+      schema: () => schema2
+    },
+    actions: {
+      async initialize() {
+        const context = this;
+        const endpoint = this.endpoint;
+        const state = await endpoint.call.get(id, "~");
+        keysOf(schema2).forEach((field) => {
+          context[field] = state[field];
+          endpoint.call.on(id, `change:${String(field)}`, (value) => {
+            context[field] = value;
+          });
+        });
+      },
+      set(field, value) {
+        if (!(field in schema2)) {
+          throw new Error(`[crm:embed:remote] Field ${String(field)} is not present in context ${id}`);
+        }
+        if (schema2[field].readonly) {
+          throw new Error(`[crm:embed:remote] Field ${String(field)} is readonly in context ${id}`);
+        }
+        if (!schema2[field].accepts(value)) {
+          throw new Error(`[crm:embed:remote] Invalid value for field ${String(field)} in context ${id}`);
+        }
+        const context = this;
+        const endpoint = this.endpoint;
+        context[field] = value;
+        endpoint.call.set(id, field, value);
+      }
+    }
+  });
+};
+const useField = (store, field) => {
+  if (store.schema[field].readonly) {
+    return computed(() => store[field]);
+  }
+  return computed({
+    get: () => store[field],
+    set: (value) => {
+      store.set(field, value);
+    }
+  });
+};
+const withMeta = (predicate, type) => {
+  return Object.assign(predicate, { type });
+};
+const isNull = withMeta((value) => value === null, "null");
+const isNumber = withMeta((value) => typeof value === "number", "number");
+const isString = withMeta((value) => typeof value === "string", "string");
+const arrayOf = (predicate) => withMeta(
+  (value) => {
+    return Array.isArray(value) && value.every(predicate);
+  },
+  `Array<${predicate.type}>`
+);
+const oneOf = (...predicates) => withMeta(
+  (value) => {
+    return predicates.some((predicate) => predicate(value));
+  },
+  predicates.map((p) => p.type).join(" | ")
+);
+const schema$3 = {
+  "id": {
+    accepts: oneOf(isNumber, isNull),
+    defaults: () => null,
+    readonly: true
+  },
+  "externalId": {
+    accepts: isString,
+    defaults: () => null,
+    readonly: true
+  },
+  "email": {
+    accepts: isString,
+    defaults: () => "",
+    readonly: true
+  },
+  "phones": {
+    accepts: arrayOf(isString),
+    defaults: () => [],
+    readonly: true
+  }
+};
+const useContext$3 = defineContext("customer/card", schema$3);
+const schema$2 = {
+  value: {
+    accepts: isString,
+    defaults: () => "",
+    readonly: true
+  },
+  index: {
+    accepts: isNumber,
+    defaults: () => 0,
+    readonly: true
+  }
+};
+const useContext$2 = defineContext("customer/card:phone", schema$2);
+const schema$1 = {
+  "customer.email": {
+    accepts: oneOf(isString, isNull),
+    defaults: () => null,
+    readonly: false
+  },
+  "customer.phone": {
+    accepts: oneOf(isString, isNull),
+    defaults: () => null,
+    readonly: false
+  },
+  "delivery.address": {
+    accepts: oneOf(isString, isNull),
+    defaults: () => null,
+    readonly: false
+  }
+};
+const useContext$1 = defineContext("order/card", schema$1);
+const locales = ["en-GB", "es-ES", "ru-RU"];
+const isLocale = withMeta(
+  (value) => locales.includes(value),
+  locales.map((l) => `'${l}'`).join(" | ")
+);
+const schema = {
+  "order.templates.number.api": {
+    accepts: isString,
+    defaults: () => "",
+    readonly: true
+  },
+  "order.templates.number.crm": {
+    accepts: isString,
+    defaults: () => "",
+    readonly: true
+  },
+  "system.locale": {
+    accepts: isLocale,
+    defaults: () => "en-GB",
+    readonly: true
+  }
+};
+const useContext = defineContext("settings", schema);
+const createRoot = async (channel) => {
+  const root = createRemoteRoot(channel, {
+    components: [
+      "UiButton",
+      "UiError",
+      "UiLink",
+      "UiLoader",
+      "UiMenuItem",
+      "UiMenuItemGroup",
+      "UiModalSidebar",
+      "UiModalWindow",
+      "UiModalWindowSurface",
+      "UiScrollbar",
+      "UiTag",
+      "UiTransition"
+    ]
+  });
+  await root.mount();
+  return root;
+};
+const createWidgetEndpoint = (widget, messenger) => {
+  const endpoint = createEndpoint(messenger);
+  const pinia = createPinia();
+  pinia.use(injectAccessor(endpoint));
+  let onRelease = () => {
+  };
+  endpoint.expose({
+    async run(channel, target) {
+      retain(channel);
+      const root = await createRoot(channel);
+      await root.mount();
+      const { createApp } = createRemoteRenderer(root);
+      const destroy = await widget.run(createApp, root, pinia, target);
+      onRelease = () => {
+        destroy();
+        release(channel);
+      };
+    },
+    release() {
+      onRelease();
+      onRelease = () => {
+      };
+    }
+  });
+  return endpoint;
+};
+export {
+  createWidgetEndpoint,
+  schema$2 as customerCardPhoneSchema,
+  schema$3 as customerCardSchema,
+  schema$1 as orderCardSchema,
+  schema as settingsSchema,
+  useContext$3 as useCustomerCardContext,
+  useContext$2 as useCustomerCardPhoneContext,
+  useField,
+  useContext$1 as useOrderCardContext,
+  useContext as useSettingsContext
+};

package/dist/meta.json

@@ -0,0 +1,246 @@
+{
+  "contexts": {
+    "customer/card": [
+      {
+        "name": "id",
+        "type": "number | null",
+        "description": {
+          "en-GB": "Customer ID",
+          "es-ES": "",
+          "ru-RU": "ID клиента"
+        },
+        "readonly": true
+      },
+      {
+        "name": "externalId",
+        "type": "string",
+        "description": {
+          "en-GB": "Customer external ID",
+          "es-ES": "",
+          "ru-RU": "Внешний ID клиента"
+        },
+        "readonly": true
+      },
+      {
+        "name": "email",
+        "type": "string",
+        "description": {
+          "en-GB": "Customer email",
+          "es-ES": "",
+          "ru-RU": "Email клиента"
+        },
+        "readonly": true
+      },
+      {
+        "name": "phones",
+        "type": "Array<string>",
+        "description": {
+          "en-GB": "Customer phone list",
+          "es-ES": "",
+          "ru-RU": "Список телефонов клиента"
+        },
+        "readonly": true
+      }
+    ],
+    "customer/card.phone": [
+      {
+        "name": "value",
+        "type": "string",
+        "description": {
+          "en-GB": "Customer phone",
+          "es-ES": "",
+          "ru-RU": "Телефон клиента"
+        },
+        "readonly": true
+      },
+      {
+        "name": "index",
+        "type": "number",
+        "description": {
+          "en-GB": "Serial number of the phone in the list",
+          "es-ES": "",
+          "ru-RU": "Порядковый номер телефона в списке"
+        },
+        "readonly": true
+      }
+    ],
+    "order/card": [
+      {
+        "name": "customer.email",
+        "type": "string | null",
+        "description": {
+          "en-GB": "Customer email",
+          "es-ES": "",
+          "ru-RU": "Email клиента"
+        },
+        "readonly": false
+      },
+      {
+        "name": "customer.phone",
+        "type": "string | null",
+        "description": {
+          "en-GB": "Customer phone",
+          "es-ES": "",
+          "ru-RU": "Телефон клиента"
+        },
+        "readonly": false
+      },
+      {
+        "name": "delivery.address",
+        "type": "string | null",
+        "description": {
+          "en-GB": "Delivery address",
+          "es-ES": "",
+          "ru-RU": "Адрес доставки"
+        },
+        "readonly": false
+      }
+    ],
+    "settings": [
+      {
+        "name": "order.templates.number.api",
+        "type": "string",
+        "description": {
+          "en-GB": "Number template for orders created with API",
+          "es-ES": "",
+          "ru-RU": "Шаблон номера заказов, создаваемых через API"
+        },
+        "readonly": true
+      },
+      {
+        "name": "order.templates.number.crm",
+        "type": "string",
+        "description": {
+          "en-GB": "Number template for orders created with CRM's interface",
+          "es-ES": "",
+          "ru-RU": "Шаблон номера заказов, создаваемых через интерфейс CRM"
+        },
+        "readonly": true
+      },
+      {
+        "name": "system.locale",
+        "type": "'en-GB' | 'es-ES' | 'ru-RU'",
+        "description": {
+          "en-GB": "Current system's locale",
+          "es-ES": "",
+          "ru-RU": "Текущая локаль системы"
+        },
+        "readonly": true
+      }
+    ]
+  },
+  "targets": [
+    {
+      "id": "customer/card:phone",
+      "description": {
+        "en-GB": "Widget for customer phone list item",
+        "es-ES": "",
+        "ru-RU": "Виджет для элемента списка телефонов клиента"
+      },
+      "location": {
+        "en-GB": "Right after the phone number in the list",
+        "es-ES": "",
+        "ru-RU": "Сразу после номера телефона в списке"
+      },
+      "contexts": [
+        "customer/card",
+        "settings"
+      ]
+    },
+    {
+      "id": "order/card:customer.after",
+      "description": {
+        "en-GB": "Widget for section with customer data",
+        "es-ES": "",
+        "ru-RU": "Виджет для секции с данными клиента"
+      },
+      "location": {
+        "en-GB": "Right under the input fields",
+        "es-ES": "",
+        "ru-RU": "Сразу под полями ввода"
+      },
+      "contexts": [
+        "order/card",
+        "settings"
+      ]
+    },
+    {
+      "id": "order/card:customer.email",
+      "description": {
+        "en-GB": "Widget for customer email input field",
+        "es-ES": "",
+        "ru-RU": "Виджет для поля ввода email клиента"
+      },
+      "location": {
+        "en-GB": "Right after the input field",
+        "es-ES": "",
+        "ru-RU": "Сразу после поля ввода"
+      },
+      "contexts": [
+        "order/card",
+        "settings"
+      ]
+    },
+    {
+      "id": "order/card:customer.phone",
+      "description": {
+        "en-GB": "Widget for customer phone input field",
+        "es-ES": "",
+        "ru-RU": "Виджет для поля ввода телефона клиента"
+      },
+      "location": {
+        "en-GB": "Right after the input field",
+        "es-ES": "",
+        "ru-RU": "Сразу после поля ввода"
+      },
+      "contexts": [
+        "order/card",
+        "settings"
+      ]
+    },
+    {
+      "id": "order/card:delivery.address",
+      "description": {
+        "en-GB": "Widget for delivery address input field",
+        "es-ES": "",
+        "ru-RU": "Виджет для поля ввода адреса доставки"
+      },
+      "location": {
+        "en-GB": "Right under the input field",
+        "es-ES": "",
+        "ru-RU": "Под полем ввода адреса"
+      },
+      "contexts": [
+        "order/card",
+        "settings"
+      ]
+    }
+  ],
+  "pages": [
+    {
+      "id": "customer/card",
+      "description": {
+        "en-GB": "Customer page",
+        "es-ES": "",
+        "ru-RU": "Страница клиента"
+      },
+      "targets": [
+        "customer/card:phone"
+      ]
+    },
+    {
+      "id": "order/card",
+      "description": {
+        "en-GB": "Page with the order creation/editing form",
+        "es-ES": "",
+        "ru-RU": "Страница с формой создания/редактирования заказа"
+      },
+      "targets": [
+        "order/card:customer.after",
+        "order/card:customer.email",
+        "order/card:customer.phone",
+        "order/card:delivery.address"
+      ]
+    }
+  ]
+}

package/package.json

@@ -1,39 +1,64 @@
 {
   "name": "@retailcrm/embed-ui",
   "type": "module",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "API and components for creating RetailCRM UI extensions",
-  "main": "index.js",
   "repository": "git@github.com:retailcrm/embed-ui.git",
   "author": "RetailDriverLLC <integration@retailcrm.ru>",
   "license": "MIT",
   "contributors": [
     "Kirill Zaytsev <zaytsev.cmath10@gmail.com>"
   ],
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs",
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.mjs"
+    },
+    "./dist/*": "./dist/*",
+    "./types/*": "./types/*"
+  },
   "scripts": {
-    "lint": "eslint .",
-    "release": "standard-version",
-    "release:major": "standard-version --release-as major",
-    "release:minor": "standard-version --release-as minor",
-    "release:patch": "standard-version --release-as patch"
+    "build": "vite build",
+    "eslint": "eslint .",
+    "generate:meta": "yes | npx tsx scripts/generate-meta.ts",
+    "release": "yes | npx standard-version",
+    "release:major": "yes | npx standard-version --release-as major",
+    "release:minor": "yes | npx standard-version --release-as minor",
+    "release:patch": "yes | npx standard-version --release-as patch",
+    "test": "vitest --run"
   },
   "dependencies": {
-    "@omnicajs/vue-remote": "^0.1.3",
+    "@omnicajs/vue-remote": "^0.2.0",
     "@remote-ui/rpc": "^1.4.5"
   },
+  "peerDependencies": {
+    "pinia": "^2.2",
+    "vue": "^3.5"
+  },
   "devDependencies": {
     "@eslint/eslintrc": "^3.0.2",
-    "@eslint/js": "^9.1.1",
+    "@eslint/js": "^9.13.0",
     "@stylistic/eslint-plugin": "^1.7.2",
-    "eslint": "^9.1.1",
-    "eslint-config-standard-with-typescript": "^43.0.1",
-    "eslint-plugin-import": "^2.25.2",
-    "eslint-plugin-n": "^17.3.1",
-    "eslint-plugin-promise": "^6.1.1",
-    "globals": "^15.0.0",
-    "standard-version": "^9.5.0",
+    "@types/node": "^22.7.9",
+    "@vitejs/plugin-vue": "^5.1.4",
+    "@vue/test-utils": "^2.4.6",
+    "eslint": "^9.13.0",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-n": "^17.11.1",
+    "eslint-plugin-promise": "^6.6.0",
+    "eslint-plugin-vue": "^9.29.1",
+    "globals": "^15.11.0",
+    "jsdom": "^25.0.1",
+    "pinia": "^2.2.4",
+    "tsx": "^4.19.2",
     "typescript": "^5.4.5",
-    "typescript-eslint": "^7.7.1"
+    "typescript-eslint": "^8.11.0",
+    "vite": "^5.4.8",
+    "vite-plugin-dts": "^4.3.0",
+    "vitest": "^2.1.2",
+    "vue": "^3.5.12"
   },
   "publishConfig": {
     "access": "public"

package/scripts/generate-meta.ts

@@ -0,0 +1,54 @@
+import type { ContextSchema } from '~types/context/schema'
+import type { SchemaDocumentation } from '~meta'
+
+import * as fs from 'node:fs'
+
+import { fileURLToPath } from 'node:url'
+
+import {
+  dirname,
+  join,
+  resolve,
+} from 'node:path'
+
+import { keysOf } from '@/utilities'
+
+import {
+  schemaList,
+  schemaListDocumentation,
+  targetListDocumentation,
+  pageListDocumentation,
+} from '~meta'
+
+const __dirname = dirname(fileURLToPath(import.meta.url))
+
+const dist = resolve(__dirname, '../dist/')
+
+if (!fs.existsSync(dist)) {
+  fs.mkdirSync(dist)
+}
+
+fs.writeFileSync(join(dist, 'meta.json'), JSON.stringify({
+  contexts: keysOf(schemaList).reduce((meta, key) => {
+    const schema = schemaList[key] as ContextSchema
+
+    meta[key] = keysOf(schema).map(field => {
+      const accepts = schema[field].accepts
+      const documentation = schemaListDocumentation[key] as SchemaDocumentation<ContextSchema>
+
+      return {
+        name: field,
+        type: 'type' in accepts ? accepts.type : 'unknown',
+        description: documentation[field].description,
+        readonly: schema[field].readonly,
+      }
+    })
+
+    return meta
+  }, {} as Record<string, unknown>),
+  targets: keysOf(targetListDocumentation).map(target => ({
+    id: target,
+    ...targetListDocumentation[target],
+  })),
+  pages: pageListDocumentation,
+}, null, 2))

package/types/context/customer/card-phone.d.ts

@@ -0,0 +1,6 @@
+import type { ReadonlyField } from '../schema'
+
+export type Schema = {
+  'value': ReadonlyField<string>;
+  'index': ReadonlyField<number>;
+}

package/types/context/customer/card.d.ts

@@ -0,0 +1,8 @@
+import type { ReadonlyField } from '../schema'
+
+export type Schema = {
+  'id': ReadonlyField<number | null>;
+  'externalId': ReadonlyField<string | null>;
+  'email': ReadonlyField<string>;
+  'phones': ReadonlyField<string[]>;
+}

package/types/context/index.d.ts

@@ -0,0 +1,11 @@
+import type { Schema as CustomerCardSchema } from './customer/card'
+import type { Schema as CustomerCardPhoneSchema } from './customer/card-phone'
+import type { Schema as OrderCardSchema } from './order/card'
+import type { Schema as SettingsSchema } from './settings'
+
+export type SchemaList = {
+  'customer/card': CustomerCardSchema;
+  'customer/card.phone': CustomerCardPhoneSchema;
+  'order/card': OrderCardSchema;
+  'settings': SettingsSchema;
+}

package/types/context/order/card.d.ts

@@ -0,0 +1,7 @@
+import type { Field } from '../schema'
+
+export type Schema = {
+  'customer.email': Field<string | null>;
+  'customer.phone': Field<string | null>;
+  'delivery.address': Field<string | null>;
+}

package/types/context/schema.d.ts

@@ -0,0 +1,85 @@
+import type { IsTilda, If } from '../scaffolding'
+
+export type Field<Type, Readonly extends boolean = false> = {
+  accepts (value: Type): boolean;
+  defaults (): Type;
+  readonly: Readonly;
+}
+
+export type ReadonlyField<Type> = Field<Type, true>
+
+export type TypeOf<F> = F extends Field<infer T>
+  ? T
+  : F extends ReadonlyField<infer T>
+    ? T
+    : never;
+
+export type IsReadonly<F> = F extends Field<unknown, infer R>
+  ? R
+  : F extends ReadonlyField
+    ? true
+    : false;
+
+export type ContextSchema = {
+  [key: string]: Field<unknown, boolean>;
+}
+
+export type ContextSchemaMap = {
+  [key: string]: ContextSchema;
+}
+
+export type Context<S extends ContextSchema> = {
+  [F in keyof S]: TypeOf<S[F]>;
+}
+
+export type Writable<S extends ContextSchema> = {
+  [F in keyof S]: IsReadonly<S[F]> extends true ? never : S[F];
+}
+
+export type EventMap<S extends ContextSchema> = {
+  [K in keyof S as `change:${K}`]: K;
+}
+
+export type EventHandler<
+  S extends ContextSchema,
+  E extends keyof EventMap<S>
+> = (payload: TypeOf<S[EventMap<S>[E]]>) => void
+
+export type ContextAccessor<M extends ContextSchemaMap = ContextSchemaMap> = {
+  get <
+    C extends keyof M
+  >(context: C, field: '~'): Context<M[C]>;
+
+  get <
+    C extends keyof M,
+    F extends keyof M[C]
+  >(context: C, field: F): Context<M[C]>[F];
+
+  set <
+    C extends keyof M,
+    F extends keyof Writable<M[C]>
+  >(context: C, field: F, value: Context<M[C]>[F]): void;
+
+  on<
+    C extends keyof M,
+    E extends keyof EventMap<M[C]>
+  >(context: C, event: E, handler: EventHandler<M[C], E>): void;
+}
+
+export type FieldAccessor<S extends ContextSchema> = {
+  get <F extends keyof S>(field: F | '~'): If<
+    IsTilda<typeof field>,
+    Context<S>,
+    Context<S>[F]
+  >;
+
+  set <F extends keyof Writable<S>>(
+    field: F,
+    value: Context<S>[F]
+  ): void;
+
+  on<E extends keyof EventMap<S>>(
+    event: E,
+    handler: EventHandler<S, E>
+  ): void;
+}

package/types/context/settings.d.ts

@@ -0,0 +1,9 @@
+import type { ReadonlyField } from '~types/context/schema'
+
+export type Locale = 'en-GB' | 'es-ES' | 'ru-RU'
+
+export type Schema = {
+  'order.templates.number.api': ReadonlyField<string>;
+  'order.templates.number.crm': ReadonlyField<string>;
+  'system.locale': ReadonlyField<Locale>;
+}

package/types/scaffolding.d.ts

@@ -1,2 +1,8 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 export type AnyFunction = (...payload: any[]) => unknown
 export type None = Record<string, never>
+
+type IsExact<A, B> = A extends B ? (B extends A ? true : false) : false;
+type IsTilda<A> = IsExact<A, '~'>;
+
+type If<Condition, Then, Else> = Condition extends true ? Then : Else;

package/types/widget.d.ts

@@ -0,0 +1,56 @@
+import type {
+  CreateAppFunction,
+  Component,
+} from 'vue'
+
+import type { Channel } from '@omnicajs/vue-remote/dist/remote'
+
+import type { Pinia } from 'pinia'
+
+import type { RemoteRoot } from '@omnicajs/vue-remote/remote'
+
+import type { SchemaList } from './context'
+
+export interface WidgetRunner {
+  run(
+    createApp: CreateAppFunction<
+      | Component<RemoteRoot<SchemaOf<string>>>
+      | RemoteRoot<SchemaOf<string>>
+    >,
+    root: RemoteRoot<SchemaOf<string>>,
+    pinia: Pinia,
+    target: WidgetTarget
+  ): Promise<() => void>;
+}
+
+export interface WidgetEndpoint {
+  run (channel: Channel, target: WidgetTarget): Promise<void>;
+  release (): void;
+}
+
+export type WidgetTarget = keyof SchemaListByTarget
+
+export type SchemaListOf<T extends WidgetTarget> = SchemaListByTarget[T]
+export type SchemaListByTarget = {
+  'customer/card:phone': Pick<SchemaList,
+    | 'customer/card'
+    | 'customer/card.phone'
+    | 'settings'
+  >;
+  'order/card:customer.after': Pick<SchemaList,
+    | 'order/card'
+    | 'settings'
+  >;
+  'order/card:customer.email': Pick<SchemaList,
+    | 'order/card'
+    | 'settings'
+  >;
+  'order/card:customer.phone': Pick<SchemaList,
+    | 'order/card'
+    | 'settings'
+  >;
+  'order/card:delivery.address': Pick<SchemaList,
+    | 'order/card'
+    | 'settings'
+  >;
+}

package/.github/workflows/tests.yml

@@ -1,39 +0,0 @@
-name: Tests
-
-on: [push, pull_request]
-
-concurrency:
-  group: ${{ github.workflow }}-${{ github.ref }}
-  cancel-in-progress: true
-
-jobs:
-  eslint:
-    runs-on: ubuntu-latest
-
-    strategy:
-      matrix:
-        node-version: [ 18.18.x, 20.x ]
-
-    steps:
-      - name: Using branch ${{ github.ref }} for repository ${{ github.repository }}.
-        uses: actions/checkout@v4
-
-      - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v4
-        with:
-          node-version: ${{ matrix.node-version }}
-
-      - name: Cache dependencies
-        id: cache-deps
-        uses: actions/cache@v4
-        with:
-          path: .yarn
-          key: ${{ runner.OS }}-node-${{ matrix.node-version }}-yarn-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: |
-            ${{ runner.OS }}-node-${{ matrix.node-version }}-yarn-
-
-      - name: Install dependencies
-        run: yarn install
-
-      - name: Run lint
-        run: yarn lint

package/types/endpoint.d.ts

@@ -1,18 +0,0 @@
-import type {
-  AnyFunction,
-  None,
-} from './scaffolding'
-
-import type { Channel } from '@omnicajs/vue-remote/host'
-import type { Endpoint as RemoteEndpoint } from '@remote-ui/rpc'
-
-export interface EndpointApi<
-  PageApi extends Record<string, AnyFunction> = None
-> {
-  run (channel: Channel, api: PageApi): Promise<void>;
-  release (): void;
-}
-
-export type Endpoint<
-  PageApi extends Record<string, AnyFunction> = None
-> = RemoteEndpoint<EndpointApi<PageApi>>

package/types/pages/order.d.ts

@@ -1,11 +0,0 @@
-export type OrderCardMethods = {
-  getCustomerEmail: () => string | null,
-  setCustomerEmail: (value: string) => void,
-
-  getCustomerPhone: () => string | null,
-  setCustomerPhone: (value: string) => void,
-
-  getDeliveryAddress: () => string | null,
-  setDeliveryAddress: (value: string) => void,
-  parseDeliveryAddress: () => void,
-}