@mediquo/elements 0.3.1 → 0.3.2

package/README.md

@@ -1,22 +1,173 @@
-# @mediquo/elements
+<div align="center">
+  <img src="https://cdn.prod.website-files.com/6784cf58154b9286f2dfca2e/67f517824ab7067c273b400b_apppat.svg" alt="Mediquo" width="200" />
+  <h1>@mediquo/elements</h1>
+  <p>Framework-agnostic Lit web components for Mediquo patient experiences.</p>
+</div>
 
-Web components package built on top of `@mediquo/core` (shared queries, DI,
-utils). It owns its own theme, copy and assets, independent from
-`@mediquo/web-components`.
+---
 
-## Exports
+Lit custom elements for scheduling, video consultations, chat, and payments. Each feature ships as its own entry point — import only what you need. Components are routing-agnostic: they emit semantic events and leave navigation to the host.
 
-- `.` — registers and exports all elements.
-- `./mq-theme-provider` — theme provider (defaults to `default`).
-- `./theme` — theme tokens.
-
-## Develop
+## Installation
 
 ```bash
-npm run build -w @mediquo/elements
-npm run test -w @mediquo/elements
-npm run test:arch -w @mediquo/elements
-npm run health -w @mediquo/elements
+npm install @mediquo/elements
+```
+
+## Quick start
+
+Wrap features with the providers they need, then mount the element:
+
+```html
+<script type="module">
+  import "@mediquo/elements/mq-theme-provider";
+  import "@mediquo/elements/mq-query-client-provider";
+  import "@mediquo/elements/mq-schedule";
+</script>
+
+<mq-theme-provider theme="mediquo">
+  <mq-query-client-provider>
+    <mq-schedule
+      api-key="YOUR_API_KEY"
+      token="YOUR_ACCESS_TOKEN"
+      locale="es_ES"
+      env="production"
+    ></mq-schedule>
+  </mq-query-client-provider>
+</mq-theme-provider>
+```
+
+```ts
+const schedule = document.querySelector("mq-schedule");
+
+schedule?.addEventListener("appointment-created", (event) => {
+  const { appointmentId } = (event as CustomEvent).detail;
+  // host decides where to go next
+});
+
+schedule?.addEventListener("back", () => {
+  // user left the wizard
+});
+```
+
+## Components
+
+| Element | Import | Description |
+| --- | --- | --- |
+| `mq-schedule` | `@mediquo/elements/mq-schedule` | Multi-step appointment booking / reschedule |
+| `mq-schedule-success` | `@mediquo/elements/mq-schedule-success` | Post-booking confirmation screen |
+| `mq-my-appointments` | `@mediquo/elements/mq-my-appointments` | Upcoming and past appointments |
+| `mq-videocall` | `@mediquo/elements/mq-videocall` | Video consultation session |
+| `mq-chat-room` | `@mediquo/elements/mq-chat-room` | Chat with a professional |
+| `mq-support-chat` | `@mediquo/elements/mq-support-chat` | Support chat bubble |
+| `mq-checkout` | `@mediquo/elements/mq-checkout` | Generic payment checkout |
+| `mq-appointment-checkout` | `@mediquo/elements/mq-appointment-checkout` | Appointment payment |
+| `mq-immediate-videocall-checkout` | `@mediquo/elements/mq-immediate-videocall-checkout` | Immediate videocall payment |
+| `mq-apple-pay-checkout` | `@mediquo/elements/mq-apple-pay-checkout` | Apple Pay button |
+| `mq-google-pay-checkout` | `@mediquo/elements/mq-google-pay-checkout` | Google Pay button |
+
+Most features accept `api-key`, `token`, `locale`, and `env` when used standalone. See the [documentation](https://wc-showcase.mediquo.com) for per-component attributes and events.
+
+## Providers
+
+Mount these as ancestors of the features that need them:
+
+| Provider | Import | When |
+| --- | --- | --- |
+| `mq-theme-provider` | `@mediquo/elements/mq-theme-provider` | Always — design tokens |
+| `mq-query-client-provider` | `@mediquo/elements/mq-query-client-provider` | Data-fetching features (`mq-schedule`, `mq-chat-room`, …) |
+| `mq-socket-provider` | `@mediquo/elements/mq-socket-provider` | Realtime features (`mq-chat-room`) |
+
+```html
+<mq-theme-provider theme="mediquo">
+  <mq-query-client-provider>
+    <mq-socket-provider>
+      <!-- feature elements -->
+    </mq-socket-provider>
+  </mq-query-client-provider>
+</mq-theme-provider>
 ```
 
-Architecture standards live in [`tests/architecture/`](./tests/architecture/).
+## Theming
+
+`mq-theme-provider` ships two built-in themes: `default` and `mediquo`. Override tokens with `custom-tokens`, or build a typed theme via `@mediquo/elements/theme`:
+
+```html
+<mq-theme-provider
+  theme="custom"
+  custom-tokens="--color-primary: #0b6e4f; --color-background: #f7faf8;"
+>
+  <!-- … -->
+</mq-theme-provider>
+```
+
+```ts
+import { createTheme } from "@mediquo/elements/theme";
+
+const theme = createTheme({
+  "--color-primary": "#0b6e4f",
+});
+```
+
+## Events
+
+Components describe **what the user did**, never **where to navigate**. Listen for the actions you care about and own routing in the host.
+
+Shared contract (also exported from `@mediquo/elements/events`):
+
+| Event | Detail | Meaning |
+| --- | --- | --- |
+| `mq-back` | `{ source?: string }` | Generic back chrome |
+| `mq-home` | — | Go to home |
+| `mq-view-appointments` | `{ tab: "next" \| "history" }` | Open appointments list |
+| `mq-appointment-book` | `{ specialty?, service?, professional? }` | Start booking |
+| `mq-appointment-reschedule` | `{ appointmentId }` | Reschedule |
+| `mq-appointment-join-videocall` | `{ appointmentId }` | Join videocall |
+| `mq-appointment-view-documentation` | `{ appointmentId }` | Open documentation |
+| `mq-download-file` | `{ url, filename }` | Host should persist / download a file |
+
+Feature-specific events (e.g. `appointment-created` on `mq-schedule`) are documented per component.
+
+```ts
+import { DownloadFileEvent } from "@mediquo/elements/events";
+
+el.addEventListener(DownloadFileEvent.eventName, (event) => {
+  const { url, filename } = event.detail;
+  // save or trigger a download
+});
+```
+
+## Locale and environment
+
+Supported locales: `es_ES`, `en_US`, `pt_PT`, `de_DE`, `ca_ES`.
+
+Pass `locale` as an attribute on the feature element, or call `setLocale` from `@mediquo/elements/i18n`.
+
+For non-production backends:
+
+```ts
+import { setEnv } from "@mediquo/elements/env";
+
+setEnv("development"); // or "production"
+```
+
+You can also set `env="development"` / `env="production"` on elements that expose it.
+
+## TypeScript
+
+Entry points ship with `.d.ts` files. For modern package exports, prefer:
+
+```json
+{
+  "compilerOptions": {
+    "moduleResolution": "bundler",
+    "module": "ESNext"
+  }
+}
+```
+
+Custom elements work in any framework that can render HTML. In React / Next.js, dynamic-import the entry points in a client component and attach listeners with `addEventListener`.
+
+## License
+
+ISC

package/dist/env.js

@@ -1 +1 @@
-const E="https://mediquo-landing.s3.eu-central-1.amazonaws.com/sdk-web/elements",o="production",e="0.3.1",n={development:{MODE:"development",MQ_DEFAULT_ENV:o,MQ_ELEMENTS_VERSION:e,OPENTOK_API_KEY:"47836441",ASSETS_BASE_URL:E},production:{MODE:"production",MQ_DEFAULT_ENV:o,MQ_ELEMENTS_VERSION:e,OPENTOK_API_KEY:"46655102",ASSETS_BASE_URL:E}};let t=o;const _=new Proxy({},{get:(E,o)=>n[t??"production"][o]});function S(E){t=E}export{E as ASSETS_BASE_URL,_ as env,S as setEnv};
+const E="https://mediquo-landing.s3.eu-central-1.amazonaws.com/sdk-web/elements",o="production",e="0.3.2",n={development:{MODE:"development",MQ_DEFAULT_ENV:o,MQ_ELEMENTS_VERSION:e,OPENTOK_API_KEY:"47836441",ASSETS_BASE_URL:E},production:{MODE:"production",MQ_DEFAULT_ENV:o,MQ_ELEMENTS_VERSION:e,OPENTOK_API_KEY:"46655102",ASSETS_BASE_URL:E}};let t=o;const _=new Proxy({},{get:(E,o)=>n[t??"production"][o]});function S(E){t=E}export{E as ASSETS_BASE_URL,_ as env,S as setEnv};

package/dist/mq-my-appointments.d.ts

@@ -58,11 +58,11 @@ declare const LoginTokenResponseSchema: z.ZodObject<{
         }>;
     }, "strip", z.ZodTypeAny, {
         hash: string;
+        name: string;
         country_code: string;
         timezone: string;
         first_name: string;
         last_name: string;
-        name: string;
         birth_date: string;
         email: string;
         language_code: string;
@@ -79,11 +79,11 @@ declare const LoginTokenResponseSchema: z.ZodObject<{
         };
     }, {
         hash: string;
+        name: string;
         country_code: string;
         timezone: string;
         first_name: string;
         last_name: string;
-        name: string;
         birth_date: string;
         email: string;
         language_code: string;
@@ -100,14 +100,13 @@ declare const LoginTokenResponseSchema: z.ZodObject<{
         };
     }>;
 }, "strip", z.ZodTypeAny, {
-    access_token: string;
     patient: {
         hash: string;
+        name: string;
         country_code: string;
         timezone: string;
         first_name: string;
         last_name: string;
-        name: string;
         birth_date: string;
         email: string;
         language_code: string;
@@ -123,15 +122,15 @@ declare const LoginTokenResponseSchema: z.ZodObject<{
             organization_name: string;
         };
     };
-}, {
     access_token: string;
+}, {
     patient: {
         hash: string;
+        name: string;
         country_code: string;
         timezone: string;
         first_name: string;
         last_name: string;
-        name: string;
         birth_date: string;
         email: string;
         language_code: string;
@@ -147,6 +146,7 @@ declare const LoginTokenResponseSchema: z.ZodObject<{
             organization_name: string;
         };
     };
+    access_token: string;
 }>;
 type LoginTokenResponse = z.infer<typeof LoginTokenResponseSchema>;
 

package/dist/mq-schedule.d.ts

@@ -763,7 +763,7 @@ declare class ProfessionalsList extends LitElement {
     private getOrganizationSpecialtiesQuery;
     private getScheduleServicesQuery;
     private getProfessionalsBySpecialtyAndServiceQuery;
-    render(): lit_html.TemplateResult<1> | typeof nothing | null;
+    render(): typeof nothing | lit_html.TemplateResult<1> | null;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/mq-support-chat.d.ts

@@ -75,7 +75,7 @@ declare class MqSupportChat extends LitElement {
     private _open;
     private _onKeydown;
     private _close;
-    render(): lit_html.TemplateResult<1> | typeof nothing;
+    render(): typeof nothing | lit_html.TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mediquo/elements",
   "private": false,
-  "version": "0.3.1",
+  "version": "0.3.2",
   "type": "module",
   "description": "Mediquo elements web components",
   "license": "ISC",