@avament-pub/support-navbar-create 0.0.0-stage → 0.1.0

package/README.md

@@ -1,3 +1,5 @@
-# Temporary Holding Version
+# `@avament-pub/support-navbar-create`
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Lightweight support ticket create dialog for module navbars (`onSupportClick` on `@avament-pub/navbar-ui`).
+
+The Support app should use its full `CreateTicketDialog` instead. Other modules pass `getAccessToken` and `apiBaseUrl` (same auth as the host app).

package/dist/index.d.ts

@@ -0,0 +1,33 @@
+import * as React from 'react';
+
+type SupportNavbarCreateDialogLabels = {
+    title: string;
+    shortLabel: string;
+    detailsLabel: string;
+    submit: string;
+    cancel: string;
+    shortRequired: string;
+    submitError: string;
+};
+type SupportNavbarCreateDialogProps = {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    apiBaseUrl: string;
+    getAccessToken: () => string | null;
+    labels: SupportNavbarCreateDialogLabels;
+};
+declare function SupportNavbarCreateDialog({ open, onOpenChange, apiBaseUrl, getAccessToken, labels, }: SupportNavbarCreateDialogProps): React.JSX.Element | null;
+
+type UseSupportNavbarCreateTicketOptions = {
+    apiBaseUrl: string;
+    getAccessToken: () => string | null;
+    labels: SupportNavbarCreateDialogLabels;
+};
+declare function useSupportNavbarCreateTicket({ apiBaseUrl, getAccessToken, labels, }: UseSupportNavbarCreateTicketOptions): {
+    onSupportClick: () => void;
+    dialog: React.JSX.Element;
+    open: boolean;
+    setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+};
+
+export { SupportNavbarCreateDialog, type SupportNavbarCreateDialogLabels, type SupportNavbarCreateDialogProps, useSupportNavbarCreateTicket };

package/dist/index.js

@@ -0,0 +1,181 @@
+"use client";
+
+// SupportNavbarCreateDialog.tsx
+import * as React from "react";
+
+// createSupportTicket.ts
+async function createSupportTicket(apiBaseUrl, accessToken, input) {
+  const base = apiBaseUrl.replace(/\/$/, "");
+  const response = await fetch(`${base}/api/support/tickets`, {
+    method: "POST",
+    credentials: "include",
+    headers: {
+      "Content-Type": "application/json",
+      ...accessToken ? { Authorization: `Bearer ${accessToken}` } : {}
+    },
+    body: JSON.stringify({
+      shortDescription: input.shortDescription.trim(),
+      longDescriptionHtml: input.longDescriptionHtml?.trim() || null,
+      typeKey: "task",
+      priority: "medium",
+      statusKey: "open"
+    })
+  });
+  if (!response.ok) {
+    const text = await response.text().catch(() => "");
+    throw new Error(text || `Support ticket create failed (${response.status})`);
+  }
+}
+
+// SupportNavbarCreateDialog.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function SupportNavbarCreateDialog({
+  open,
+  onOpenChange,
+  apiBaseUrl,
+  getAccessToken,
+  labels
+}) {
+  const [shortText, setShortText] = React.useState("");
+  const [details, setDetails] = React.useState("");
+  const [error, setError] = React.useState(null);
+  const [submitting, setSubmitting] = React.useState(false);
+  React.useEffect(() => {
+    if (!open) {
+      setShortText("");
+      setDetails("");
+      setError(null);
+      setSubmitting(false);
+    }
+  }, [open]);
+  if (!open) return null;
+  const close = () => onOpenChange(false);
+  const handleSubmit = async (event) => {
+    event.preventDefault();
+    const trimmed = shortText.trim();
+    if (!trimmed) {
+      setError(labels.shortRequired);
+      return;
+    }
+    setError(null);
+    setSubmitting(true);
+    try {
+      await createSupportTicket(apiBaseUrl, getAccessToken(), {
+        shortDescription: trimmed,
+        longDescriptionHtml: details.trim() || void 0
+      });
+      close();
+    } catch {
+      setError(labels.submitError);
+    } finally {
+      setSubmitting(false);
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "fixed inset-0 z-[200] flex items-center justify-center bg-black/50 p-4",
+      role: "presentation",
+      onMouseDown: (event) => {
+        if (event.target === event.currentTarget) close();
+      },
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-labelledby": "support-navbar-create-title",
+          className: "w-full max-w-lg rounded-lg border border-theme bg-theme p-4 shadow-lg",
+          onMouseDown: (event) => event.stopPropagation(),
+          children: [
+            /* @__PURE__ */ jsx(
+              "h2",
+              {
+                id: "support-navbar-create-title",
+                className: "mb-3 text-lg font-semibold text-theme-primary",
+                children: labels.title
+              }
+            ),
+            /* @__PURE__ */ jsxs("form", { className: "space-y-3", onSubmit: (event) => void handleSubmit(event), children: [
+              /* @__PURE__ */ jsxs("label", { className: "block space-y-1", children: [
+                /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-theme-primary", children: labels.shortLabel }),
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    type: "text",
+                    value: shortText,
+                    onChange: (event) => setShortText(event.target.value),
+                    className: "w-full rounded-md border border-theme bg-input-theme px-3 py-2 text-sm text-theme-primary",
+                    autoFocus: true
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs("label", { className: "block space-y-1", children: [
+                /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-theme-primary", children: labels.detailsLabel }),
+                /* @__PURE__ */ jsx(
+                  "textarea",
+                  {
+                    value: details,
+                    onChange: (event) => setDetails(event.target.value),
+                    rows: 4,
+                    className: "w-full rounded-md border border-theme bg-input-theme px-3 py-2 text-sm text-theme-primary"
+                  }
+                )
+              ] }),
+              error ? /* @__PURE__ */ jsx("p", { className: "text-sm text-red-600", role: "alert", children: error }) : null,
+              /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2 pt-1", children: [
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: "rounded-md border border-theme px-3 py-1.5 text-sm text-theme-primary",
+                    onClick: close,
+                    disabled: submitting,
+                    children: labels.cancel
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "submit",
+                    className: "rounded-md bg-primary px-3 py-1.5 text-sm font-medium text-white disabled:opacity-50",
+                    disabled: submitting,
+                    children: labels.submit
+                  }
+                )
+              ] })
+            ] })
+          ]
+        }
+      )
+    }
+  );
+}
+
+// useSupportNavbarCreateTicket.tsx
+import * as React2 from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+function useSupportNavbarCreateTicket({
+  apiBaseUrl,
+  getAccessToken,
+  labels
+}) {
+  const [open, setOpen] = React2.useState(false);
+  const onSupportClick = React2.useCallback(() => setOpen(true), []);
+  const dialog = /* @__PURE__ */ jsx2(
+    SupportNavbarCreateDialog,
+    {
+      open,
+      onOpenChange: setOpen,
+      apiBaseUrl,
+      getAccessToken,
+      labels
+    }
+  );
+  return { onSupportClick, dialog, open, setOpen };
+}
+export {
+  SupportNavbarCreateDialog,
+  useSupportNavbarCreateTicket
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../SupportNavbarCreateDialog.tsx","../createSupportTicket.ts","../useSupportNavbarCreateTicket.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { createSupportTicket } from \"./createSupportTicket\";\n\nexport type SupportNavbarCreateDialogLabels = {\n  title: string;\n  shortLabel: string;\n  detailsLabel: string;\n  submit: string;\n  cancel: string;\n  shortRequired: string;\n  submitError: string;\n};\n\nexport type SupportNavbarCreateDialogProps = {\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  apiBaseUrl: string;\n  getAccessToken: () => string | null;\n  labels: SupportNavbarCreateDialogLabels;\n};\n\nexport function SupportNavbarCreateDialog({\n  open,\n  onOpenChange,\n  apiBaseUrl,\n  getAccessToken,\n  labels,\n}: SupportNavbarCreateDialogProps) {\n  const [shortText, setShortText] = React.useState(\"\");\n  const [details, setDetails] = React.useState(\"\");\n  const [error, setError] = React.useState<string | null>(null);\n  const [submitting, setSubmitting] = React.useState(false);\n\n  React.useEffect(() => {\n    if (!open) {\n      setShortText(\"\");\n      setDetails(\"\");\n      setError(null);\n      setSubmitting(false);\n    }\n  }, [open]);\n\n  if (!open) return null;\n\n  const close = () => onOpenChange(false);\n\n  const handleSubmit = async (event: React.FormEvent) => {\n    event.preventDefault();\n    const trimmed = shortText.trim();\n    if (!trimmed) {\n      setError(labels.shortRequired);\n      return;\n    }\n    setError(null);\n    setSubmitting(true);\n    try {\n      await createSupportTicket(apiBaseUrl, getAccessToken(), {\n        shortDescription: trimmed,\n        longDescriptionHtml: details.trim() || undefined,\n      });\n      close();\n    } catch {\n      setError(labels.submitError);\n    } finally {\n      setSubmitting(false);\n    }\n  };\n\n  return (\n    <div\n      className=\"fixed inset-0 z-[200] flex items-center justify-center bg-black/50 p-4\"\n      role=\"presentation\"\n      onMouseDown={(event) => {\n        if (event.target === event.currentTarget) close();\n      }}\n    >\n      <div\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby=\"support-navbar-create-title\"\n        className=\"w-full max-w-lg rounded-lg border border-theme bg-theme p-4 shadow-lg\"\n        onMouseDown={(event) => event.stopPropagation()}\n      >\n        <h2\n          id=\"support-navbar-create-title\"\n          className=\"mb-3 text-lg font-semibold text-theme-primary\"\n        >\n          {labels.title}\n        </h2>\n        <form className=\"space-y-3\" onSubmit={(event) => void handleSubmit(event)}>\n          <label className=\"block space-y-1\">\n            <span className=\"text-sm font-medium text-theme-primary\">\n              {labels.shortLabel}\n            </span>\n            <input\n              type=\"text\"\n              value={shortText}\n              onChange={(event) => setShortText(event.target.value)}\n              className=\"w-full rounded-md border border-theme bg-input-theme px-3 py-2 text-sm text-theme-primary\"\n              autoFocus\n            />\n          </label>\n          <label className=\"block space-y-1\">\n            <span className=\"text-sm font-medium text-theme-primary\">\n              {labels.detailsLabel}\n            </span>\n            <textarea\n              value={details}\n              onChange={(event) => setDetails(event.target.value)}\n              rows={4}\n              className=\"w-full rounded-md border border-theme bg-input-theme px-3 py-2 text-sm text-theme-primary\"\n            />\n          </label>\n          {error ? (\n            <p className=\"text-sm text-red-600\" role=\"alert\">{error}</p>\n          ) : null}\n          <div className=\"flex justify-end gap-2 pt-1\">\n            <button\n              type=\"button\"\n              className=\"rounded-md border border-theme px-3 py-1.5 text-sm text-theme-primary\"\n              onClick={close}\n              disabled={submitting}\n            >\n              {labels.cancel}\n            </button>\n            <button\n              type=\"submit\"\n              className=\"rounded-md bg-primary px-3 py-1.5 text-sm font-medium text-white disabled:opacity-50\"\n              disabled={submitting}\n            >\n              {labels.submit}\n            </button>\n          </div>\n        </form>\n      </div>\n    </div>\n  );\n}\n","export type CreateSupportTicketInput = {\n  shortDescription: string;\n  longDescriptionHtml?: string;\n};\n\nexport async function createSupportTicket(\n  apiBaseUrl: string,\n  accessToken: string | null,\n  input: CreateSupportTicketInput,\n): Promise<void> {\n  const base = apiBaseUrl.replace(/\\/$/, \"\");\n  const response = await fetch(`${base}/api/support/tickets`, {\n    method: \"POST\",\n    credentials: \"include\",\n    headers: {\n      \"Content-Type\": \"application/json\",\n      ...(accessToken ? { Authorization: `Bearer ${accessToken}` } : {}),\n    },\n    body: JSON.stringify({\n      shortDescription: input.shortDescription.trim(),\n      longDescriptionHtml: input.longDescriptionHtml?.trim() || null,\n      typeKey: \"task\",\n      priority: \"medium\",\n      statusKey: \"open\",\n    }),\n  });\n\n  if (!response.ok) {\n    const text = await response.text().catch(() => \"\");\n    throw new Error(text || `Support ticket create failed (${response.status})`);\n  }\n}\n","\"use client\";\n\nimport * as React from \"react\";\nimport {\n  SupportNavbarCreateDialog,\n  type SupportNavbarCreateDialogLabels,\n} from \"./SupportNavbarCreateDialog\";\n\nexport type UseSupportNavbarCreateTicketOptions = {\n  apiBaseUrl: string;\n  getAccessToken: () => string | null;\n  labels: SupportNavbarCreateDialogLabels;\n};\n\nexport function useSupportNavbarCreateTicket({\n  apiBaseUrl,\n  getAccessToken,\n  labels,\n}: UseSupportNavbarCreateTicketOptions) {\n  const [open, setOpen] = React.useState(false);\n  const onSupportClick = React.useCallback(() => setOpen(true), []);\n\n  const dialog = (\n    <SupportNavbarCreateDialog\n      open={open}\n      onOpenChange={setOpen}\n      apiBaseUrl={apiBaseUrl}\n      getAccessToken={getAccessToken}\n      labels={labels}\n    />\n  );\n\n  return { onSupportClick, dialog, open, setOpen };\n}\n"],"mappings":"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","names":["React","jsx"]}

package/package.json

@@ -1,6 +1,32 @@
 {
   "name": "@avament-pub/support-navbar-create",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0",
+  "description": "Support ticket create dialog for module navbars (headset → new report)",
+  "type": "module",
+  "sideEffects": false,
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": ["dist", "README.md"],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "prepublishOnly": "npm run build"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "license": "MIT"
+}