@webority/support-react 0.88.1 → 0.90.0

package/dist/guidance.json

@@ -0,0 +1,62 @@
+{
+  "format": "webority-guidance/1",
+  "package": {
+    "name": "@webority/support-react",
+    "version": "0.90.0"
+  },
+  "components": [
+    {
+      "name": "ReportIssue",
+      "usage": {
+        "when": [
+          "The person should be able to report a problem from any page, with the page address, browser and product version attached.",
+          "A screenshot of the page can help, and the person chooses whether to add one."
+        ],
+        "whenNot": [],
+        "do": [],
+        "dont": [],
+        "a11y": [
+          "The button opens a modal dialog and says so through aria-haspopup.",
+          "In compact mode the label is the button's accessible name and its tooltip.",
+          "The screenshot progress and the created ticket are announced as status messages."
+        ]
+      }
+    },
+    {
+      "name": "SupportCenter",
+      "usage": {
+        "when": [
+          "The customer needs one page for their own support tickets.",
+          "They open a ticket to read its conversation and reply.",
+          "They start a new ticket from the same page."
+        ],
+        "whenNot": [],
+        "do": [],
+        "dont": [],
+        "a11y": [
+          "The page is a section labelled by its Your tickets heading.",
+          "New ticket is a native button and stays disabled until the support settings have loaded.",
+          "A failure to load the support settings shows a warning alert with a Try again button."
+        ]
+      }
+    },
+    {
+      "name": "SupportContact",
+      "usage": {
+        "when": [
+          "A page or footer shows how to reach support.",
+          "It lists the email address with a copy button, the phone number as a call link and the opening hours.",
+          "A field the product has not set is left out, and nothing renders when none is set."
+        ],
+        "whenNot": [],
+        "do": [],
+        "dont": [],
+        "a11y": [
+          "The section is labelled Contact followed by the support name, or Contact support when no name is set.",
+          "The email address is a mailto link and the phone number a call link.",
+          "The copy button for the email address is labelled Copy email."
+        ]
+      }
+    }
+  ]
+}

package/dist/types/ReportIssue.d.ts

@@ -6,21 +6,16 @@
  * product version.
  *
  * @param {object} props
- * @param {string} [props.label="Report an issue"] The button text.
- * @param {boolean} [props.floating=false] Pin the button to the bottom corner of the screen.
- * @param {boolean} [props.compact=false] Icon only: a 40px circle with the label as its tooltip and
- *   accessible name. With `floating` it sits in the shared floating corner container
- *   (`useFloatingStack` from `@webority/ui-react`), above the compact chat launcher, so the two
- *   never overlap and neither needs an offset; `className` and `style` then land on the item inside
- *   that container, which is not itself fixed.
- * @param {string} [props.defaultCategory="Bug report"] Preselected when the config lists it.
- * @param {string} [props.appVersion] The product build, recorded on the ticket.
+ * @param {string} [props.label]
+ * @param {boolean} [props.floating]
+ * @param {boolean} [props.compact]
+ * @param {string} [props.defaultCategory]
+ * @param {string} [props.appVersion]
  * @param {(id: string) => string} [props.getTicketHref] Where the new ticket can be opened; shows a View ticket link.
  * @param {(ticket: any) => void} [props.onOpenTicket] Called by the View ticket button when there is no href.
  * @param {(ticket: any) => void} [props.onCreated] Called once the ticket is raised.
- * @param {string} [props.className] Added to the button's wrapper, both floating and inline, to place it.
- * @param {import('react').CSSProperties} [props.style] Merged over the wrapper's own style. With
- *   `floating`, an inset such as `{ bottom: "5rem" }` moves the button clear of other fixed controls.
+ * @param {string} [props.className]
+ * @param {import('react').CSSProperties} [props.style]
  */
 export default function ReportIssue({ label, floating, compact, defaultCategory, appVersion, getTicketHref, onOpenTicket, onCreated, className, style, }: {
     label?: string;

package/dist/types/ReportIssue.meta.d.ts

@@ -0,0 +1,54 @@
+export declare const meta: {
+    readonly name: "ReportIssue";
+    readonly marker: any;
+    readonly platforms: readonly ["web"];
+    readonly acceptsChildren: false;
+    readonly props: {
+        readonly label: {
+            readonly type: "string";
+            readonly default: "Report an issue";
+            readonly description: "The button text.";
+        };
+        readonly floating: {
+            readonly type: "boolean";
+            readonly default: false;
+            readonly description: "Pins the button to the bottom corner of the screen.";
+        };
+        readonly compact: {
+            readonly type: "boolean";
+            readonly default: false;
+            readonly description: "Shows an icon only: a 40px circle with the label as its tooltip and accessible name. With floating it sits in the shared floating corner container, above the compact chat launcher, so the two never overlap and neither needs an offset.";
+        };
+        readonly defaultCategory: {
+            readonly type: "string";
+            readonly default: "Bug report";
+            readonly description: "The category preselected when the support config lists it.";
+        };
+        readonly appVersion: {
+            readonly type: "string";
+            readonly description: "The product build, recorded on the ticket.";
+        };
+        readonly className: {
+            readonly type: "string";
+            readonly description: "Added to the button's wrapper, both floating and inline, to place it.";
+        };
+        readonly style: {
+            readonly type: "object";
+            readonly description: "Merged over the wrapper's own style. With floating, an inset such as bottom 5rem moves the button clear of other fixed controls.";
+        };
+    };
+    readonly examples: readonly [{
+        readonly id: "ReportIssue";
+        readonly title: "Default";
+        readonly props: {
+            readonly appVersion: "9.1.0";
+        };
+    }];
+    readonly usage: {
+        readonly when: readonly ["The person should be able to report a problem from any page, with the page address, browser and product version attached.", "A screenshot of the page can help, and the person chooses whether to add one."];
+        readonly whenNot: readonly [];
+        readonly do: readonly [];
+        readonly dont: readonly [];
+        readonly a11y: readonly ["The button opens a modal dialog and says so through aria-haspopup.", "In compact mode the label is the button's accessible name and its tooltip.", "The screenshot progress and the created ticket are announced as status messages."];
+    };
+};

package/dist/types/SupportCenter.d.ts

@@ -5,9 +5,9 @@
  * The list is filtered, searched and paged on the server; the status tabs show the server's counts.
  *
  * @param {object} props
- * @param {string} [props.initialTicketId] Open this ticket first. Wins over the address.
- * @param {string} [props.defaultCategory] Preselected in the New ticket form when the config lists it.
- * @param {string} [props.appVersion] The product build, recorded on new tickets.
+ * @param {string} [props.initialTicketId]
+ * @param {string} [props.defaultCategory]
+ * @param {string} [props.appVersion]
  */
 export default function SupportCenter({ initialTicketId, defaultCategory, appVersion }: {
     initialTicketId?: string;

package/dist/types/SupportCenter.meta.d.ts

@@ -0,0 +1,46 @@
+export declare const meta: {
+    readonly name: "SupportCenter";
+    readonly marker: any;
+    readonly platforms: readonly ["web"];
+    readonly acceptsChildren: false;
+    readonly props: {
+        readonly initialTicketId: {
+            readonly type: "string";
+            readonly description: "Open this ticket first. It wins over the ticket named in the address.";
+        };
+        readonly defaultCategory: {
+            readonly type: "string";
+            readonly description: "Preselected in the New ticket form when the support settings list it.";
+        };
+        readonly appVersion: {
+            readonly type: "string";
+            readonly description: "The product build, recorded on new tickets.";
+        };
+    };
+    readonly omit: readonly [];
+    readonly examples: readonly [{
+        readonly id: "SupportCenter";
+        readonly title: "Default";
+        readonly props: {};
+    }, {
+        readonly id: "SupportCenter.initialTicket";
+        readonly title: "Open ticket";
+        readonly props: {
+            readonly initialTicketId: "t-2";
+        };
+    }, {
+        readonly id: "SupportCenter.newTicket";
+        readonly title: "Preselected category";
+        readonly props: {
+            readonly defaultCategory: "Billing";
+            readonly appVersion: "4.2.0";
+        };
+    }];
+    readonly usage: {
+        readonly when: readonly ["The customer needs one page for their own support tickets.", "They open a ticket to read its conversation and reply.", "They start a new ticket from the same page."];
+        readonly whenNot: readonly [];
+        readonly do: readonly [];
+        readonly dont: readonly [];
+        readonly a11y: readonly ["The page is a section labelled by its Your tickets heading.", "New ticket is a native button and stays disabled until the support settings have loaded.", "A failure to load the support settings shows a warning alert with a Try again button."];
+    };
+};

package/dist/types/SupportContact.meta.d.ts

@@ -0,0 +1,25 @@
+export declare const meta: {
+    readonly name: "SupportContact";
+    readonly marker: any;
+    readonly platforms: readonly ["web"];
+    readonly acceptsChildren: false;
+    readonly props: {
+        readonly className: {
+            readonly type: "string";
+            readonly description: "Extra classes on the contact section.";
+        };
+    };
+    readonly omit: readonly [];
+    readonly examples: readonly [{
+        readonly id: "SupportContact";
+        readonly title: "Default";
+        readonly props: {};
+    }];
+    readonly usage: {
+        readonly when: readonly ["A page or footer shows how to reach support.", "It lists the email address with a copy button, the phone number as a call link and the opening hours.", "A field the product has not set is left out, and nothing renders when none is set."];
+        readonly whenNot: readonly [];
+        readonly do: readonly [];
+        readonly dont: readonly [];
+        readonly a11y: readonly ["The section is labelled Contact followed by the support name, or Contact support when no name is set.", "The email address is a mailto link and the phone number a call link.", "The copy button for the email address is labelled Copy email."];
+    };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/support-react",
-  "version": "0.88.1",
+  "version": "0.90.0",
   "description": "Webority customer support for React portals: ticket centre, report-an-issue with an optional page screenshot, and support contact details, built on @webority/ui-react.",
   "license": "SEE LICENSE IN LICENSE",
   "type": "module",
@@ -22,7 +22,8 @@
       "types": "./dist/types/index.d.ts",
       "default": "./dist/support-react.js"
     },
-    "./package.json": "./package.json"
+    "./package.json": "./package.json",
+    "./guidance.json": "./dist/guidance.json"
   },
   "sideEffects": false,
   "peerDependencies": {
@@ -30,7 +31,7 @@
     "react": "^19.0.0",
     "react-bootstrap": "^2.10.0",
     "react-dom": "^19.0.0",
-    "@webority/ui-react": "0.88.1"
+    "@webority/ui-react": "0.90.0"
   },
   "devDependencies": {
     "@testing-library/dom": "10.4.2",
@@ -48,13 +49,14 @@
     "typescript": "^7.0.2",
     "vite": "^8.0.12",
     "vitest": "5.0.1",
-    "@webority/ui-react": "0.88.1"
+    "@webority/canvas-kit": "0.90.0",
+    "@webority/ui-react": "0.90.0"
   },
   "dependencies": {
     "html-to-image": "^1.11.13"
   },
   "scripts": {
-    "build": "vite build && tsc -p tsconfig.json",
+    "build": "vite build && tsc -p tsconfig.json && node ../canvas-kit/dist/cli.js guidance --config canvas-kit.json --out dist/guidance.json",
     "test": "vitest run",
     "test:watch": "vitest",
     "test:coverage": "vitest run --coverage"