@solutiondesk/changelog 0.0.0 → 1.0.0-2cf6d3e

package/dist/react.cjs

@@ -0,0 +1,539 @@
+'use strict';
+
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+
+// src/seen.ts
+function browserStorage() {
+  try {
+    const storage = globalThis.localStorage;
+    return storage ?? null;
+  } catch {
+    return null;
+  }
+}
+function createSeenTracker(workspace, storage = browserStorage(), product) {
+  const key = `sd-changelog-seen:${workspace.toLowerCase()}${product ? `:${product.toLowerCase()}` : ""}`;
+  const lastSeen = () => {
+    try {
+      return storage?.getItem(key) ?? null;
+    } catch {
+      return null;
+    }
+  };
+  return {
+    lastSeen,
+    markSeen(publishedAt) {
+      try {
+        storage?.setItem(key, publishedAt);
+      } catch {
+      }
+    },
+    unseen(entries) {
+      const seen = lastSeen();
+      if (!seen) return 0;
+      return entries.filter((entry) => entry.publishedAt > seen).length;
+    }
+  };
+}
+var CATEGORY_LABELS = {
+  en: { new: "New", improved: "Improved", fixed: "Fixed", announcement: "Announcement" },
+  de: { new: "Neu", improved: "Verbessert", fixed: "Behoben", announcement: "Ank\xFCndigung" }
+};
+function categoryLabel(category, locale = "en") {
+  return CATEGORY_LABELS[locale.toLowerCase().startsWith("de") ? "de" : "en"][category];
+}
+
+// ../sdk-core/src/http.ts
+var DEFAULT_BASE_URL = "https://api.solutiondesk.io";
+var SolutionDeskError = class extends Error {
+  constructor(message, init) {
+    super(message);
+    /** The HTTP status; `0` when no answer arrived (network error, aborted). */
+    __publicField(this, "status");
+    /** The parsed JSON body of the error answer (usually `{ error: string }`), else its text. */
+    __publicField(this, "body");
+    /** The requested URL. */
+    __publicField(this, "url");
+    /** Messages per input field on a `400` (e.g. `{ email: "Enter a valid email address." }`). */
+    __publicField(this, "fields");
+    this.name = "SolutionDeskError";
+    this.status = init.status;
+    this.body = init.body ?? null;
+    this.url = init.url;
+    this.fields = fieldsOf(init.body);
+    if (init.cause !== void 0) {
+      Object.defineProperty(this, "cause", { value: init.cause, enumerable: false });
+    }
+  }
+  /** `404`: unknown workspace, module turned off or unknown item — on purpose indistinguishable. */
+  get isNotFound() {
+    return this.status === 404;
+  }
+  /** `429`: over the rate limit; try again later. */
+  get isRateLimited() {
+    return this.status === 429;
+  }
+};
+function fieldsOf(body) {
+  if (!body || typeof body !== "object") return {};
+  const fields = body.fields;
+  if (!fields || typeof fields !== "object") return {};
+  const out = {};
+  for (const [key, value] of Object.entries(fields)) {
+    if (typeof value === "string") out[key] = value;
+  }
+  return out;
+}
+function messageOf(body, status) {
+  if (body && typeof body === "object") {
+    const { error, message, statusCode } = body;
+    if (typeof statusCode === "number" && typeof message === "string" && message) return message;
+    if (typeof error === "string" && error) return error;
+    if (typeof message === "string" && message) return message;
+    if (Array.isArray(message) && typeof message[0] === "string") return message[0];
+  }
+  if (typeof body === "string" && body.trim() && body.length <= 300) return body.trim();
+  return `SolutionDesk answered ${status}.`;
+}
+function createMemoryEtagCache(maxEntries = 500) {
+  const entries = /* @__PURE__ */ new Map();
+  return {
+    get: (key) => entries.get(key),
+    set(key, value) {
+      entries.delete(key);
+      entries.set(key, value);
+      if (entries.size > maxEntries) {
+        const oldest = entries.keys().next().value;
+        if (oldest !== void 0) entries.delete(oldest);
+      }
+    }
+  };
+}
+function queryString(query) {
+  if (!query) return "";
+  const parts = [];
+  for (const [key, value] of Object.entries(query)) {
+    if (value === void 0 || value === null || value === "") continue;
+    parts.push(`${encodeURIComponent(key)}=${encodeURIComponent(String(value))}`);
+  }
+  return parts.length ? `?${parts.join("&")}` : "";
+}
+var seg = (value) => encodeURIComponent(String(value));
+function parseBody(text) {
+  if (!text) return null;
+  try {
+    return JSON.parse(text);
+  } catch {
+    return text;
+  }
+}
+function createHttp(options = {}) {
+  const baseUrl = (options.baseUrl ?? DEFAULT_BASE_URL).replace(/\/+$/, "").replace(/\/v1$/, "");
+  const fetchImpl = options.fetch ?? globalThis.fetch;
+  const cache = options.etagCache === true ? createMemoryEtagCache() : options.etagCache ? options.etagCache : void 0;
+  const url = (path, query) => `${baseUrl}/v1${path}${queryString(query)}`;
+  async function requestWithMeta(req) {
+    if (!fetchImpl) {
+      throw new Error("No global fetch available: pass `fetch` to the client.");
+    }
+    const target = url(req.path, req.query);
+    const headers = {
+      accept: req.accept ?? "application/json",
+      ...options.headers,
+      ...req.options?.headers
+    };
+    if (req.body !== void 0) headers["content-type"] = "application/json";
+    if (req.apiKey) headers.authorization = `Bearer ${req.apiKey}`;
+    const cacheKey = req.method === "GET" && !req.apiKey ? target : void 0;
+    const cached = cacheKey && cache ? cache.get(cacheKey) : void 0;
+    if (cached && !Object.keys(headers).some((h) => h.toLowerCase() === "if-none-match")) {
+      headers["if-none-match"] = cached.etag;
+    }
+    const init = {
+      ...req.options?.fetchOptions,
+      method: req.method,
+      headers
+    };
+    if (req.body !== void 0) init.body = JSON.stringify(req.body);
+    if (req.options?.signal !== void 0) init.signal = req.options.signal;
+    let response;
+    try {
+      response = await fetchImpl(target, init);
+    } catch (cause) {
+      const reason = cause instanceof Error ? cause.message : String(cause);
+      throw new SolutionDeskError(`The request to SolutionDesk failed: ${reason}`, {
+        status: 0,
+        url: target,
+        cause
+      });
+    }
+    const finalUrl = response.url;
+    const meta = {
+      status: response.status,
+      finalUrl: typeof finalUrl === "string" && finalUrl ? finalUrl : null
+    };
+    if (response.status === 304 && cached) {
+      return { data: cached.body, ...meta };
+    }
+    const text = await response.text();
+    const body = response.ok && req.responseType === "text" ? text : parseBody(text);
+    if (!response.ok) {
+      throw new SolutionDeskError(messageOf(body, response.status), {
+        status: response.status,
+        body,
+        url: target
+      });
+    }
+    const etag = response.headers.get("etag");
+    if (cacheKey && cache && etag) cache.set(cacheKey, { etag, body });
+    return { data: body, ...meta };
+  }
+  return {
+    baseUrl,
+    url,
+    requestWithMeta,
+    request: async (req) => (await requestWithMeta(req)).data
+  };
+}
+function required(value, name) {
+  if (typeof value !== "string" || !value.trim()) {
+    throw new TypeError(`SolutionDesk: \`${name}\` is required.`);
+  }
+  return value;
+}
+
+// src/client.ts
+function createChangelogClient(options) {
+  const workspace = required(options.workspace, "workspace");
+  const product = options.product?.trim() || void 0;
+  const http = createHttp(options);
+  const root = `/changelog/${seg(workspace)}`;
+  const base = product ? `${root}/${seg(product)}` : root;
+  const list = (params = {}, requestOptions) => http.request({
+    method: "GET",
+    path: base,
+    query: { category: params.category, limit: params.limit, cursor: params.cursor },
+    options: requestOptions
+  });
+  async function* allEntries(params = {}, requestOptions) {
+    let cursor = null;
+    do {
+      const page = await list(
+        { ...params, limit: params.limit ?? 50, cursor },
+        requestOptions
+      );
+      yield* page.entries;
+      cursor = page.nextCursor;
+    } while (cursor);
+  }
+  return {
+    workspace,
+    product,
+    list,
+    allEntries,
+    getEntry: (slug, requestOptions) => http.request({
+      method: "GET",
+      path: `${base}/entries/${seg(required(slug, "slug"))}`,
+      options: requestOptions
+    }),
+    listProducts: (requestOptions) => http.request({
+      method: "GET",
+      path: `${root}/products`,
+      options: requestOptions
+    })
+  };
+}
+
+// src/react/use-changelog.ts
+function useChangelog(options) {
+  const {
+    workspace,
+    product,
+    client: given,
+    limit = 10,
+    category,
+    trackSeen = true,
+    initialData
+  } = options;
+  const { baseUrl, fetch: fetchImpl, headers, etagCache } = options;
+  const headersKey = JSON.stringify(headers ?? {});
+  const client = react.useMemo(
+    () => given ?? createChangelogClient({
+      workspace,
+      product,
+      baseUrl,
+      fetch: fetchImpl,
+      headers: JSON.parse(headersKey),
+      etagCache
+    }),
+    [given, workspace, product, baseUrl, fetchImpl, headersKey, etagCache]
+  );
+  const tracker = react.useMemo(
+    () => trackSeen ? createSeenTracker(workspace, options.storage, given?.product ?? product) : null,
+    [trackSeen, workspace, options.storage, given, product]
+  );
+  const [data, setData] = react.useState(initialData ?? null);
+  const [entries, setEntries] = react.useState(initialData?.entries ?? []);
+  const [status, setStatus] = react.useState(
+    initialData ? "ready" : "loading"
+  );
+  const [error, setError] = react.useState(null);
+  const [unseen, setUnseen] = react.useState(0);
+  const [loadingMore, setLoadingMore] = react.useState(false);
+  const generation = react.useRef(0);
+  const moreInFlight = react.useRef(false);
+  const settle = react.useCallback(
+    (page) => {
+      if (!tracker) return;
+      const newest = page.entries[0]?.publishedAt;
+      const seen = tracker.lastSeen();
+      if (!seen && newest) tracker.markSeen(newest);
+      setUnseen(tracker.unseen(page.entries));
+    },
+    [tracker]
+  );
+  const reload = react.useCallback(async () => {
+    const run = ++generation.current;
+    try {
+      const page = await client.list({ limit, category });
+      if (run !== generation.current) return;
+      setData(page);
+      setEntries(page.entries);
+      setError(null);
+      setStatus("ready");
+      settle(page);
+    } catch (caught) {
+      if (run !== generation.current) return;
+      setError(caught);
+      setStatus("error");
+    }
+  }, [client, limit, category, settle]);
+  react.useEffect(() => {
+    void reload();
+    return () => {
+      generation.current++;
+    };
+  }, [reload]);
+  const loadMore = react.useCallback(async () => {
+    if (!data?.nextCursor || moreInFlight.current) return;
+    const run = generation.current;
+    moreInFlight.current = true;
+    setLoadingMore(true);
+    try {
+      const page = await client.list({ limit, category, cursor: data.nextCursor });
+      if (run !== generation.current) return;
+      setData(page);
+      setEntries((current) => [...current, ...page.entries]);
+      setError(null);
+    } catch (caught) {
+      if (run === generation.current) setError(caught);
+    } finally {
+      moreInFlight.current = false;
+      setLoadingMore(false);
+    }
+  }, [client, limit, category, data]);
+  const markAllSeen = react.useCallback(() => {
+    const newest = entries[0]?.publishedAt;
+    if (tracker && newest) tracker.markSeen(newest);
+    setUnseen(0);
+  }, [tracker, entries]);
+  return {
+    status,
+    entries,
+    data,
+    error,
+    unseen,
+    markAllSeen,
+    hasMore: !!data?.nextCursor,
+    loadingMore,
+    loadMore,
+    reload
+  };
+}
+function formatChangelogDate(iso, locale = "en") {
+  return new Intl.DateTimeFormat(locale, { day: "numeric", month: "long", year: "numeric" }).format(
+    new Date(iso)
+  );
+}
+function ChangelogEntryBody({ html, className }) {
+  if (!html) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-sd-changelog-body": "",
+      className,
+      dangerouslySetInnerHTML: { __html: html }
+    }
+  );
+}
+function ChangelogEntryView({
+  entry,
+  locale = "en",
+  showBody = true,
+  classNames = {},
+  titleAs: Title = "h3"
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("article", { "data-sd-changelog-entry": "", "data-category": entry.category, className: classNames.entry, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-sd-changelog-meta": "", className: classNames.meta, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("time", { dateTime: entry.publishedAt, className: classNames.date, children: formatChangelogDate(entry.publishedAt, locale) }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { "data-sd-changelog-category": entry.category, className: classNames.category, children: categoryLabel(entry.category, locale) }),
+      entry.releaseVersion ? /* @__PURE__ */ jsxRuntime.jsxs("span", { "data-sd-changelog-version": "", className: classNames.version, children: [
+        "Version ",
+        entry.releaseVersion
+      ] }) : null
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(Title, { className: classNames.title, children: /* @__PURE__ */ jsxRuntime.jsx("a", { href: entry.url, children: entry.title }) }),
+    entry.summary ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: classNames.summary, children: entry.summary }) : null,
+    showBody ? /* @__PURE__ */ jsxRuntime.jsx(ChangelogEntryBody, { html: entry.html, className: classNames.body }) : null,
+    entry.downloadUrl ? /* @__PURE__ */ jsxRuntime.jsx(
+      "a",
+      {
+        href: entry.downloadUrl,
+        rel: "noopener",
+        "data-sd-changelog-download": "",
+        className: classNames.download,
+        children: locale.toLowerCase().startsWith("de") ? "Herunterladen" : "Download"
+      }
+    ) : null
+  ] });
+}
+function ChangelogFeed(props) {
+  const {
+    locale = "en",
+    showBody = true,
+    className,
+    entryClassNames,
+    renderEntry,
+    loading = null,
+    empty = null,
+    fallback = null,
+    moreLabel,
+    moreClassName,
+    ...options
+  } = props;
+  const changelog = useChangelog({ trackSeen: false, ...options });
+  const de = locale.toLowerCase().startsWith("de");
+  if (changelog.status === "loading") return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: loading });
+  if (changelog.status === "error") return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: fallback });
+  if (changelog.entries.length === 0) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: empty });
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-sd-changelog": "", className, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("ol", { "data-sd-changelog-list": "", children: changelog.entries.map((entry) => /* @__PURE__ */ jsxRuntime.jsx("li", { id: entry.slug, children: renderEntry ? renderEntry(entry) : /* @__PURE__ */ jsxRuntime.jsx(
+      ChangelogEntryView,
+      {
+        entry,
+        locale,
+        showBody,
+        classNames: entryClassNames
+      }
+    ) }, entry.slug)) }),
+    changelog.hasMore ? /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        "data-sd-changelog-more": "",
+        className: moreClassName,
+        disabled: changelog.loadingMore,
+        "aria-busy": changelog.loadingMore || void 0,
+        onClick: () => void changelog.loadMore(),
+        children: moreLabel ?? (de ? "\xC4ltere Neuigkeiten" : "Older updates")
+      }
+    ) : null
+  ] });
+}
+function WhatsNew(props) {
+  const {
+    locale = "en",
+    label,
+    title,
+    classNames = {},
+    entryClassNames,
+    renderBadge,
+    ...options
+  } = props;
+  const changelog = useChangelog(options);
+  const [open, setOpen] = react.useState(false);
+  const root = react.useRef(null);
+  const panelId = react.useId();
+  const de = locale.toLowerCase().startsWith("de");
+  const fallback = de ? "Was ist neu?" : "What's new";
+  react.useEffect(() => {
+    if (!open) return;
+    const onKey = (event) => event.key === "Escape" && setOpen(false);
+    const onClick = (event) => {
+      if (root.current && !root.current.contains(event.target)) setOpen(false);
+    };
+    document.addEventListener("keydown", onKey);
+    document.addEventListener("mousedown", onClick);
+    return () => {
+      document.removeEventListener("keydown", onKey);
+      document.removeEventListener("mousedown", onClick);
+    };
+  }, [open]);
+  if (changelog.status !== "ready" || !changelog.data) return null;
+  const { data } = changelog;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: root,
+      "data-sd-whats-new": "",
+      "data-open": open ? "" : void 0,
+      className: classNames.root,
+      style: { position: "relative" },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            type: "button",
+            "aria-expanded": open,
+            "aria-controls": panelId,
+            className: classNames.button,
+            onClick: () => {
+              if (!open) changelog.markAllSeen();
+              setOpen(!open);
+            },
+            children: [
+              label ?? (data.widget.label || fallback),
+              changelog.unseen > 0 ? renderBadge ? renderBadge(changelog.unseen) : /* @__PURE__ */ jsxRuntime.jsx("span", { "data-sd-whats-new-badge": "", className: classNames.badge, children: changelog.unseen }) : null
+            ]
+          }
+        ),
+        open ? /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            id: panelId,
+            role: "dialog",
+            "aria-label": typeof title === "string" ? title : data.title || fallback,
+            "data-sd-whats-new-panel": "",
+            className: classNames.panel,
+            style: classNames.panel ? void 0 : { position: "absolute", zIndex: 50 },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { "data-sd-whats-new-header": "", className: classNames.header, children: title ?? (data.title || fallback) }),
+              /* @__PURE__ */ jsxRuntime.jsx("ol", { "data-sd-whats-new-list": "", className: classNames.list, children: changelog.entries.map((entry) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(
+                ChangelogEntryView,
+                {
+                  entry,
+                  locale,
+                  showBody: false,
+                  classNames: entryClassNames
+                }
+              ) }, entry.slug)) }),
+              /* @__PURE__ */ jsxRuntime.jsx("a", { href: data.pageUrl, "data-sd-whats-new-all": "", className: classNames.footer, children: de ? "Alle Neuigkeiten" : "All updates" })
+            ]
+          }
+        ) : null
+      ]
+    }
+  );
+}
+
+exports.ChangelogEntryBody = ChangelogEntryBody;
+exports.ChangelogEntryView = ChangelogEntryView;
+exports.ChangelogFeed = ChangelogFeed;
+exports.WhatsNew = WhatsNew;
+exports.formatChangelogDate = formatChangelogDate;
+exports.useChangelog = useChangelog;