react-credly-badges 0.0.0-stage → 1.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Ahamed Safnaj
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,92 @@
-# Temporary Holding Version
+# react-credly-badges
 
-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.
+A lightweight React + TypeScript component for displaying public Credly badges.
+Supports React 17, 18.2, and 19, with horizontal or vertical layouts and optional
+grouping by issuer. Badge images link to their Credly verification pages.
+
+## Setup
+
+Install the library in your React application:
+
+```sh
+npm install react-credly-badges
+```
+
+Import the component and pass your Credly profile username:
+
+```tsx
+import { CredlyBadges } from "react-credly-badges";
+
+export default function App() {
+  return <CredlyBadges username='ahamed-safnaj' />;
+}
+```
+
+No API key or application backend is required. Only public badges are available.
+In frameworks with server components, render this component inside a client
+component.
+
+### Options
+
+| Prop        | Description                                              | Default                  |
+| ----------- | -------------------------------------------------------- | ------------------------ |
+| `username`  | Credly profile username (required).                      | -                        |
+| `direction` | `"horizontal"` or `"vertical"`.                          | `"horizontal"`           |
+| `groupBy`   | Set to `"issuer"` to group badges under issuer headings. | No grouping              |
+| `endpoint`  | URL of a compatible proxy, if self-hosting.              | Hosted Cloudflare Worker |
+| `className` | CSS class for the outer container.                       | -                        |
+| `style`     | Inline styles for the outer container.                   | -                        |
+
+```tsx
+<CredlyBadges username='ahamed-safnaj' direction='vertical' groupBy='issuer' />
+```
+
+Without grouping, badges retain the endpoint's order. Issuer groups follow their
+first appearance in the response; badges within each group are sorted newest
+first, with undated badges last. Missing issuers appear under "Unknown issuer".
+
+## How the proxy works
+
+The component sends the username to a hosted Cloudflare Worker. The Worker
+fetches public badge data from Credly, validates and normalizes it, and returns
+JSON with CORS headers so the browser can read it. Images load directly from
+their source URLs; the Worker does not proxy image bytes.
+
+Cloudflare Workers provides a serverless endpoint and edge caching without
+requiring every application to run its own backend. Responses are
+cached for six hours, with a stale copy available for up to seven days when
+Credly is unavailable.
+
+The proxy source is in [worker/worker.js](worker/worker.js) and is deployed
+separately from the npm package. To self-host, deploy it as a Cloudflare Worker
+and pass its URL through `endpoint`.
+
+## Development
+
+Use Node.js 24 and npm.
+
+```sh
+npm ci
+npm run typecheck
+npm run lint
+npm run build
+```
+
+Use [Conventional Commits](https://www.conventionalcommits.org/), such as
+`feat: group badges by issuer`, `fix: handle empty responses`, or
+`docs: update setup instructions`. Commit messages and PR titles are checked
+in CI.
+
+## Releases
+
+After CI passes on `main`, semantic-release publishes release-worthy changes
+to npm and creates a GitHub release. Versions are determined from Conventional
+Commits; no manual version bump is needed.
+
+## License and disclaimer
+
+This package is `UNLICENSED`; no open-source license or permission to reuse the
+code is granted.
+
+This is an unofficial integration, not affiliated with or endorsed by Credly.
+Your username is sent to the configured proxy to retrieve public badges.

package/dist/client/index.cjs

@@ -0,0 +1,208 @@
+"use client";
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  CredlyBadges: () => CredlyBadges
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/components/CredlyBadges.tsx
+var import_react = __toESM(require("react"), 1);
+
+// src/shared/badges.ts
+function groupBadgesByIssuer(badges) {
+  const groups = /* @__PURE__ */ new Map();
+  for (const badge of badges) {
+    const issuer = badge.issuerName ?? "Unknown issuer";
+    const group = groups.get(issuer);
+    if (group) {
+      group.badges.push(badge);
+    } else {
+      groups.set(issuer, { issuer, badges: [badge] });
+    }
+  }
+  return Array.from(groups.values(), (group) => ({
+    ...group,
+    badges: group.badges.map((badge, index) => ({ badge, index })).sort((a, b) => {
+      const aDate = a.badge.issuedAt ? Date.parse(a.badge.issuedAt) : null;
+      const bDate = b.badge.issuedAt ? Date.parse(b.badge.issuedAt) : null;
+      if (aDate === null && bDate === null) return a.index - b.index;
+      if (aDate === null) return 1;
+      if (bDate === null) return -1;
+      return bDate - aDate || a.index - b.index;
+    }).map(({ badge }) => badge)
+  }));
+}
+function isRecord(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function isNonEmptyString(value) {
+  return typeof value === "string" && value.trim().length > 0;
+}
+function isHttpsUrl(value) {
+  if (!isNonEmptyString(value)) return false;
+  try {
+    return new URL(value).protocol === "https:";
+  } catch {
+    return false;
+  }
+}
+function parseBadges(value) {
+  const isWorkerResponse = isRecord(value);
+  const badges = isWorkerResponse ? value.badges : value;
+  if (!Array.isArray(badges)) {
+    throw new Error("The badges endpoint must return a JSON array or an object with a badges array.");
+  }
+  return badges.map((badge) => {
+    const url = isRecord(badge) ? isWorkerResponse ? badge.badgeUrl : badge.url : void 0;
+    if (!isRecord(badge) || !isNonEmptyString(badge.id) || !isNonEmptyString(badge.name) || !isHttpsUrl(badge.imageUrl) || !isHttpsUrl(url)) {
+      throw new Error("The badges endpoint returned an invalid badge.");
+    }
+    return {
+      id: badge.id,
+      name: badge.name,
+      imageUrl: badge.imageUrl,
+      url,
+      issuerName: isNonEmptyString(badge.issuerName) ? badge.issuerName.trim() : null,
+      issuedAt: isNonEmptyString(badge.issuedAt) && !Number.isNaN(Date.parse(badge.issuedAt)) ? badge.issuedAt : null
+    };
+  });
+}
+
+// src/components/BadgeItem.tsx
+var React = __toESM(require("react"), 1);
+function BadgeItem({ badge }) {
+  return /* @__PURE__ */ React.createElement("li", null, /* @__PURE__ */ React.createElement("a", { href: badge.url, target: "_blank", rel: "noopener noreferrer" }, /* @__PURE__ */ React.createElement(
+    "img",
+    {
+      src: badge.imageUrl,
+      alt: badge.name,
+      width: 120,
+      height: 120,
+      loading: "lazy",
+      style: { objectFit: "contain" }
+    }
+  )));
+}
+
+// src/components/CredlyBadges.tsx
+function CredlyBadges({
+  username,
+  direction = "horizontal",
+  groupBy,
+  endpoint = "https://react-credly-badges.safnaj99.workers.dev/",
+  className,
+  style
+}) {
+  const key = JSON.stringify([username, endpoint]);
+  const [state, setState] = import_react.default.useState({
+    key,
+    status: "loading"
+  });
+  (0, import_react.useEffect)(() => {
+    const controller = new AbortController();
+    let active = true;
+    setState({ key, status: "loading" });
+    async function loadBadges() {
+      try {
+        if (!username.trim()) {
+          throw new Error("A Credly username is required.");
+        }
+        const url = new URL(endpoint, window.location.href);
+        url.searchParams.set("username", username.trim());
+        const response = await fetch(url, {
+          headers: { Accept: "application/json" },
+          signal: controller.signal
+        });
+        if (!response.ok) {
+          throw new Error(
+            `Unable to load Credly badges (HTTP ${response.status}).`
+          );
+        }
+        const payload = await response.json();
+        const badges = parseBadges(payload);
+        if (active) setState({ key, status: "success", badges });
+      } catch (error) {
+        if (active) {
+          setState({
+            key,
+            status: "error",
+            message: error instanceof Error ? error.message : "Unable to load Credly badges."
+          });
+        }
+      }
+    }
+    void loadBadges();
+    return () => {
+      active = false;
+      controller.abort();
+    };
+  }, [username, endpoint, key]);
+  const current = state.key === key ? state : { key, status: "loading" };
+  const groupedBadges = current.status === "success" && groupBy === "issuer" ? groupBadgesByIssuer(current.badges) : [];
+  return /* @__PURE__ */ import_react.default.createElement("div", { className, style }, current.status === "loading" && /* @__PURE__ */ import_react.default.createElement("p", { role: "status" }, "Loading Credly badges..."), current.status === "error" && /* @__PURE__ */ import_react.default.createElement("p", { role: "alert" }, current.message), current.status === "success" && (current.badges.length === 0 ? /* @__PURE__ */ import_react.default.createElement("p", { role: "status" }, "No public Credly badges found.") : /* @__PURE__ */ import_react.default.createElement(
+    "ul",
+    {
+      "aria-label": `Credly badges for ${username}`,
+      style: {
+        display: "flex",
+        flexDirection: direction === "vertical" ? "column" : "row",
+        flexWrap: direction === "vertical" ? "nowrap" : "wrap",
+        gap: "1rem",
+        listStyle: "none",
+        margin: 0,
+        padding: 0
+      }
+    },
+    groupBy === "issuer" ? groupedBadges.map(({ issuer, badges }) => /* @__PURE__ */ import_react.default.createElement("li", { key: issuer }, /* @__PURE__ */ import_react.default.createElement("h2", null, issuer), /* @__PURE__ */ import_react.default.createElement(
+      "ul",
+      {
+        "aria-label": `Credly badges from ${issuer}`,
+        style: {
+          display: "flex",
+          flexDirection: direction === "vertical" ? "column" : "row",
+          flexWrap: direction === "vertical" ? "nowrap" : "wrap",
+          gap: "1rem",
+          listStyle: "none",
+          margin: 0,
+          padding: 0
+        }
+      },
+      badges.map((badge) => /* @__PURE__ */ import_react.default.createElement(BadgeItem, { key: badge.id, badge }))
+    ))) : current.badges.map((badge) => /* @__PURE__ */ import_react.default.createElement(BadgeItem, { key: badge.id, badge }))
+  )));
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CredlyBadges
+});
+//# sourceMappingURL=index.cjs.map

package/dist/client/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/index.ts","../../src/components/CredlyBadges.tsx","../../src/shared/badges.ts","../../src/components/BadgeItem.tsx"],"sourcesContent":["export { CredlyBadges } from './components/CredlyBadges';\nexport type { CredlyBadgesProps } from './components/CredlyBadges';\nexport type { CredlyBadge } from './shared/badges';\n","import React, { useEffect } from \"react\";\nimport type { CSSProperties } from \"react\";\nimport { groupBadgesByIssuer, parseBadges } from \"../shared/badges\";\nimport type { CredlyBadge } from \"../shared/badges\";\nimport { BadgeItem } from \"./BadgeItem\";\n\nexport interface CredlyBadgesProps {\n  username: string;\n  direction?: \"horizontal\" | \"vertical\";\n  groupBy?: \"issuer\";\n  endpoint?: string;\n  className?: string;\n  style?: CSSProperties;\n}\n\ntype BadgeState =\n  | { key: string; status: \"loading\" }\n  | { key: string; status: \"success\"; badges: CredlyBadge[] }\n  | { key: string; status: \"error\"; message: string };\n\nexport function CredlyBadges({\n  username,\n  direction = \"horizontal\",\n  groupBy,\n  endpoint = \"https://react-credly-badges.safnaj99.workers.dev/\",\n  className,\n  style,\n}: CredlyBadgesProps) {\n  const key = JSON.stringify([username, endpoint]);\n  const [state, setState] = React.useState<BadgeState>({\n    key,\n    status: \"loading\",\n  });\n\n  useEffect(() => {\n    const controller = new AbortController();\n    let active = true;\n    setState({ key, status: \"loading\" });\n\n    async function loadBadges() {\n      try {\n        if (!username.trim()) {\n          throw new Error(\"A Credly username is required.\");\n        }\n\n        const url = new URL(endpoint, window.location.href);\n        url.searchParams.set(\"username\", username.trim());\n        const response = await fetch(url, {\n          headers: { Accept: \"application/json\" },\n          signal: controller.signal,\n        });\n\n        if (!response.ok) {\n          throw new Error(\n            `Unable to load Credly badges (HTTP ${response.status}).`,\n          );\n        }\n\n        const payload: unknown = await response.json();\n        const badges = parseBadges(payload);\n        if (active) setState({ key, status: \"success\", badges });\n      } catch (error: unknown) {\n        if (active) {\n          setState({\n            key,\n            status: \"error\",\n            message:\n              error instanceof Error\n                ? error.message\n                : \"Unable to load Credly badges.\",\n          });\n        }\n      }\n    }\n\n    void loadBadges();\n\n    return () => {\n      active = false;\n      controller.abort();\n    };\n  }, [username, endpoint, key]);\n\n  // Hide results from the previous profile before the next effect runs.\n  const current: BadgeState =\n    state.key === key ? state : { key, status: \"loading\" };\n  const groupedBadges =\n    current.status === \"success\" && groupBy === \"issuer\"\n      ? groupBadgesByIssuer(current.badges)\n      : [];\n\n  return (\n    <div className={className} style={style}>\n      {current.status === \"loading\" && (\n        <p role='status'>Loading Credly badges...</p>\n      )}\n      {current.status === \"error\" && <p role='alert'>{current.message}</p>}\n      {current.status === \"success\" &&\n        (current.badges.length === 0 ? (\n          <p role='status'>No public Credly badges found.</p>\n        ) : (\n          <ul\n            aria-label={`Credly badges for ${username}`}\n            style={{\n              display: \"flex\",\n              flexDirection: direction === \"vertical\" ? \"column\" : \"row\",\n              flexWrap: direction === \"vertical\" ? \"nowrap\" : \"wrap\",\n              gap: \"1rem\",\n              listStyle: \"none\",\n              margin: 0,\n              padding: 0,\n            }}\n          >\n            {groupBy === \"issuer\"\n              ? groupedBadges.map(({ issuer, badges }) => (\n                  <li key={issuer}>\n                    <h2>{issuer}</h2>\n                    <ul\n                      aria-label={`Credly badges from ${issuer}`}\n                      style={{\n                        display: \"flex\",\n                        flexDirection:\n                          direction === \"vertical\" ? \"column\" : \"row\",\n                        flexWrap: direction === \"vertical\" ? \"nowrap\" : \"wrap\",\n                        gap: \"1rem\",\n                        listStyle: \"none\",\n                        margin: 0,\n                        padding: 0,\n                      }}\n                    >\n                      {badges.map((badge) => (\n                        <BadgeItem key={badge.id} badge={badge} />\n                      ))}\n                    </ul>\n                  </li>\n                ))\n              : current.badges.map((badge) => (\n                  <BadgeItem key={badge.id} badge={badge} />\n                ))}\n          </ul>\n        ))}\n    </div>\n  );\n}\n","export interface CredlyBadge {\n  id: string;\n  name: string;\n  imageUrl: string;\n  url: string;\n  issuerName?: string | null;\n  issuedAt?: string | null;\n}\n\nexport function groupBadgesByIssuer(badges: CredlyBadge[]) {\n  const groups = new Map<string, { issuer: string; badges: CredlyBadge[] }>();\n\n  for (const badge of badges) {\n    const issuer = badge.issuerName ?? 'Unknown issuer';\n    const group = groups.get(issuer);\n    if (group) {\n      group.badges.push(badge);\n    } else {\n      groups.set(issuer, { issuer, badges: [badge] });\n    }\n  }\n\n  return Array.from(groups.values(), (group) => ({\n    ...group,\n    badges: group.badges\n      .map((badge, index) => ({ badge, index }))\n      .sort((a, b) => {\n        const aDate = a.badge.issuedAt ? Date.parse(a.badge.issuedAt) : null;\n        const bDate = b.badge.issuedAt ? Date.parse(b.badge.issuedAt) : null;\n\n        if (aDate === null && bDate === null) return a.index - b.index;\n        if (aDate === null) return 1;\n        if (bDate === null) return -1;\n        return bDate - aDate || a.index - b.index;\n      })\n      .map(({ badge }) => badge),\n  }));\n}\n\nexport function isRecord(value: unknown): value is Record<string, unknown> {\n  return typeof value === 'object' && value !== null && !Array.isArray(value);\n}\n\nexport function isNonEmptyString(value: unknown): value is string {\n  return typeof value === 'string' && value.trim().length > 0;\n}\n\nexport function isHttpsUrl(value: unknown): value is string {\n  if (!isNonEmptyString(value)) return false;\n\n  try {\n    return new URL(value).protocol === 'https:';\n  } catch {\n    return false;\n  }\n}\n\nexport function parseBadges(value: unknown): CredlyBadge[] {\n  const isWorkerResponse = isRecord(value);\n  const badges: unknown = isWorkerResponse ? value.badges : value;\n\n  if (!Array.isArray(badges)) {\n    throw new Error('The badges endpoint must return a JSON array or an object with a badges array.');\n  }\n\n  return badges.map((badge: unknown) => {\n    const url = isRecord(badge)\n      ? (isWorkerResponse ? badge.badgeUrl : badge.url)\n      : undefined;\n\n    if (\n      !isRecord(badge) ||\n      !isNonEmptyString(badge.id) ||\n      !isNonEmptyString(badge.name) ||\n      !isHttpsUrl(badge.imageUrl) ||\n      !isHttpsUrl(url)\n    ) {\n      throw new Error('The badges endpoint returned an invalid badge.');\n    }\n\n    return {\n      id: badge.id,\n      name: badge.name,\n      imageUrl: badge.imageUrl,\n      url,\n      issuerName: isNonEmptyString(badge.issuerName)\n        ? badge.issuerName.trim()\n        : null,\n      issuedAt:\n        isNonEmptyString(badge.issuedAt) &&\n        !Number.isNaN(Date.parse(badge.issuedAt))\n          ? badge.issuedAt\n          : null,\n    };\n  });\n}\n","import * as React from \"react\";\nimport type { CredlyBadge } from \"../shared/badges\";\n\ninterface BadgeItemProps {\n  badge: CredlyBadge;\n}\n\nexport function BadgeItem({ badge }: BadgeItemProps) {\n  return (\n    <li>\n      <a href={badge.url} target='_blank' rel='noopener noreferrer'>\n        <img\n          src={badge.imageUrl}\n          alt={badge.name}\n          width={120}\n          height={120}\n          loading='lazy'\n          style={{ objectFit: \"contain\" }}\n        />\n      </a>\n    </li>\n  );\n}\n"],"mappings":"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","names":["React"]}

package/dist/client/index.d.cts

@@ -0,0 +1,23 @@
+import React, { CSSProperties } from 'react';
+
+interface CredlyBadgesProps {
+    username: string;
+    direction?: "horizontal" | "vertical";
+    groupBy?: "issuer";
+    endpoint?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+declare function CredlyBadges({ username, direction, groupBy, endpoint, className, style, }: CredlyBadgesProps): React.JSX.Element;
+
+interface CredlyBadge {
+    id: string;
+    name: string;
+    imageUrl: string;
+    url: string;
+    issuerName?: string | null;
+    issuedAt?: string | null;
+}
+
+export { CredlyBadges };
+export type { CredlyBadge, CredlyBadgesProps };

package/dist/client/index.d.ts

@@ -0,0 +1,23 @@
+import React, { CSSProperties } from 'react';
+
+interface CredlyBadgesProps {
+    username: string;
+    direction?: "horizontal" | "vertical";
+    groupBy?: "issuer";
+    endpoint?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+declare function CredlyBadges({ username, direction, groupBy, endpoint, className, style, }: CredlyBadgesProps): React.JSX.Element;
+
+interface CredlyBadge {
+    id: string;
+    name: string;
+    imageUrl: string;
+    url: string;
+    issuerName?: string | null;
+    issuedAt?: string | null;
+}
+
+export { CredlyBadges };
+export type { CredlyBadge, CredlyBadgesProps };

package/dist/client/index.js

@@ -0,0 +1,172 @@
+"use client";
+
+// src/components/CredlyBadges.tsx
+import React2, { useEffect } from "react";
+
+// src/shared/badges.ts
+function groupBadgesByIssuer(badges) {
+  const groups = /* @__PURE__ */ new Map();
+  for (const badge of badges) {
+    const issuer = badge.issuerName ?? "Unknown issuer";
+    const group = groups.get(issuer);
+    if (group) {
+      group.badges.push(badge);
+    } else {
+      groups.set(issuer, { issuer, badges: [badge] });
+    }
+  }
+  return Array.from(groups.values(), (group) => ({
+    ...group,
+    badges: group.badges.map((badge, index) => ({ badge, index })).sort((a, b) => {
+      const aDate = a.badge.issuedAt ? Date.parse(a.badge.issuedAt) : null;
+      const bDate = b.badge.issuedAt ? Date.parse(b.badge.issuedAt) : null;
+      if (aDate === null && bDate === null) return a.index - b.index;
+      if (aDate === null) return 1;
+      if (bDate === null) return -1;
+      return bDate - aDate || a.index - b.index;
+    }).map(({ badge }) => badge)
+  }));
+}
+function isRecord(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function isNonEmptyString(value) {
+  return typeof value === "string" && value.trim().length > 0;
+}
+function isHttpsUrl(value) {
+  if (!isNonEmptyString(value)) return false;
+  try {
+    return new URL(value).protocol === "https:";
+  } catch {
+    return false;
+  }
+}
+function parseBadges(value) {
+  const isWorkerResponse = isRecord(value);
+  const badges = isWorkerResponse ? value.badges : value;
+  if (!Array.isArray(badges)) {
+    throw new Error("The badges endpoint must return a JSON array or an object with a badges array.");
+  }
+  return badges.map((badge) => {
+    const url = isRecord(badge) ? isWorkerResponse ? badge.badgeUrl : badge.url : void 0;
+    if (!isRecord(badge) || !isNonEmptyString(badge.id) || !isNonEmptyString(badge.name) || !isHttpsUrl(badge.imageUrl) || !isHttpsUrl(url)) {
+      throw new Error("The badges endpoint returned an invalid badge.");
+    }
+    return {
+      id: badge.id,
+      name: badge.name,
+      imageUrl: badge.imageUrl,
+      url,
+      issuerName: isNonEmptyString(badge.issuerName) ? badge.issuerName.trim() : null,
+      issuedAt: isNonEmptyString(badge.issuedAt) && !Number.isNaN(Date.parse(badge.issuedAt)) ? badge.issuedAt : null
+    };
+  });
+}
+
+// src/components/BadgeItem.tsx
+import * as React from "react";
+function BadgeItem({ badge }) {
+  return /* @__PURE__ */ React.createElement("li", null, /* @__PURE__ */ React.createElement("a", { href: badge.url, target: "_blank", rel: "noopener noreferrer" }, /* @__PURE__ */ React.createElement(
+    "img",
+    {
+      src: badge.imageUrl,
+      alt: badge.name,
+      width: 120,
+      height: 120,
+      loading: "lazy",
+      style: { objectFit: "contain" }
+    }
+  )));
+}
+
+// src/components/CredlyBadges.tsx
+function CredlyBadges({
+  username,
+  direction = "horizontal",
+  groupBy,
+  endpoint = "https://react-credly-badges.safnaj99.workers.dev/",
+  className,
+  style
+}) {
+  const key = JSON.stringify([username, endpoint]);
+  const [state, setState] = React2.useState({
+    key,
+    status: "loading"
+  });
+  useEffect(() => {
+    const controller = new AbortController();
+    let active = true;
+    setState({ key, status: "loading" });
+    async function loadBadges() {
+      try {
+        if (!username.trim()) {
+          throw new Error("A Credly username is required.");
+        }
+        const url = new URL(endpoint, window.location.href);
+        url.searchParams.set("username", username.trim());
+        const response = await fetch(url, {
+          headers: { Accept: "application/json" },
+          signal: controller.signal
+        });
+        if (!response.ok) {
+          throw new Error(
+            `Unable to load Credly badges (HTTP ${response.status}).`
+          );
+        }
+        const payload = await response.json();
+        const badges = parseBadges(payload);
+        if (active) setState({ key, status: "success", badges });
+      } catch (error) {
+        if (active) {
+          setState({
+            key,
+            status: "error",
+            message: error instanceof Error ? error.message : "Unable to load Credly badges."
+          });
+        }
+      }
+    }
+    void loadBadges();
+    return () => {
+      active = false;
+      controller.abort();
+    };
+  }, [username, endpoint, key]);
+  const current = state.key === key ? state : { key, status: "loading" };
+  const groupedBadges = current.status === "success" && groupBy === "issuer" ? groupBadgesByIssuer(current.badges) : [];
+  return /* @__PURE__ */ React2.createElement("div", { className, style }, current.status === "loading" && /* @__PURE__ */ React2.createElement("p", { role: "status" }, "Loading Credly badges..."), current.status === "error" && /* @__PURE__ */ React2.createElement("p", { role: "alert" }, current.message), current.status === "success" && (current.badges.length === 0 ? /* @__PURE__ */ React2.createElement("p", { role: "status" }, "No public Credly badges found.") : /* @__PURE__ */ React2.createElement(
+    "ul",
+    {
+      "aria-label": `Credly badges for ${username}`,
+      style: {
+        display: "flex",
+        flexDirection: direction === "vertical" ? "column" : "row",
+        flexWrap: direction === "vertical" ? "nowrap" : "wrap",
+        gap: "1rem",
+        listStyle: "none",
+        margin: 0,
+        padding: 0
+      }
+    },
+    groupBy === "issuer" ? groupedBadges.map(({ issuer, badges }) => /* @__PURE__ */ React2.createElement("li", { key: issuer }, /* @__PURE__ */ React2.createElement("h2", null, issuer), /* @__PURE__ */ React2.createElement(
+      "ul",
+      {
+        "aria-label": `Credly badges from ${issuer}`,
+        style: {
+          display: "flex",
+          flexDirection: direction === "vertical" ? "column" : "row",
+          flexWrap: direction === "vertical" ? "nowrap" : "wrap",
+          gap: "1rem",
+          listStyle: "none",
+          margin: 0,
+          padding: 0
+        }
+      },
+      badges.map((badge) => /* @__PURE__ */ React2.createElement(BadgeItem, { key: badge.id, badge }))
+    ))) : current.badges.map((badge) => /* @__PURE__ */ React2.createElement(BadgeItem, { key: badge.id, badge }))
+  )));
+}
+export {
+  CredlyBadges
+};
+//# sourceMappingURL=index.js.map

package/dist/client/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/CredlyBadges.tsx","../../src/shared/badges.ts","../../src/components/BadgeItem.tsx"],"sourcesContent":["import React, { useEffect } from \"react\";\nimport type { CSSProperties } from \"react\";\nimport { groupBadgesByIssuer, parseBadges } from \"../shared/badges\";\nimport type { CredlyBadge } from \"../shared/badges\";\nimport { BadgeItem } from \"./BadgeItem\";\n\nexport interface CredlyBadgesProps {\n  username: string;\n  direction?: \"horizontal\" | \"vertical\";\n  groupBy?: \"issuer\";\n  endpoint?: string;\n  className?: string;\n  style?: CSSProperties;\n}\n\ntype BadgeState =\n  | { key: string; status: \"loading\" }\n  | { key: string; status: \"success\"; badges: CredlyBadge[] }\n  | { key: string; status: \"error\"; message: string };\n\nexport function CredlyBadges({\n  username,\n  direction = \"horizontal\",\n  groupBy,\n  endpoint = \"https://react-credly-badges.safnaj99.workers.dev/\",\n  className,\n  style,\n}: CredlyBadgesProps) {\n  const key = JSON.stringify([username, endpoint]);\n  const [state, setState] = React.useState<BadgeState>({\n    key,\n    status: \"loading\",\n  });\n\n  useEffect(() => {\n    const controller = new AbortController();\n    let active = true;\n    setState({ key, status: \"loading\" });\n\n    async function loadBadges() {\n      try {\n        if (!username.trim()) {\n          throw new Error(\"A Credly username is required.\");\n        }\n\n        const url = new URL(endpoint, window.location.href);\n        url.searchParams.set(\"username\", username.trim());\n        const response = await fetch(url, {\n          headers: { Accept: \"application/json\" },\n          signal: controller.signal,\n        });\n\n        if (!response.ok) {\n          throw new Error(\n            `Unable to load Credly badges (HTTP ${response.status}).`,\n          );\n        }\n\n        const payload: unknown = await response.json();\n        const badges = parseBadges(payload);\n        if (active) setState({ key, status: \"success\", badges });\n      } catch (error: unknown) {\n        if (active) {\n          setState({\n            key,\n            status: \"error\",\n            message:\n              error instanceof Error\n                ? error.message\n                : \"Unable to load Credly badges.\",\n          });\n        }\n      }\n    }\n\n    void loadBadges();\n\n    return () => {\n      active = false;\n      controller.abort();\n    };\n  }, [username, endpoint, key]);\n\n  // Hide results from the previous profile before the next effect runs.\n  const current: BadgeState =\n    state.key === key ? state : { key, status: \"loading\" };\n  const groupedBadges =\n    current.status === \"success\" && groupBy === \"issuer\"\n      ? groupBadgesByIssuer(current.badges)\n      : [];\n\n  return (\n    <div className={className} style={style}>\n      {current.status === \"loading\" && (\n        <p role='status'>Loading Credly badges...</p>\n      )}\n      {current.status === \"error\" && <p role='alert'>{current.message}</p>}\n      {current.status === \"success\" &&\n        (current.badges.length === 0 ? (\n          <p role='status'>No public Credly badges found.</p>\n        ) : (\n          <ul\n            aria-label={`Credly badges for ${username}`}\n            style={{\n              display: \"flex\",\n              flexDirection: direction === \"vertical\" ? \"column\" : \"row\",\n              flexWrap: direction === \"vertical\" ? \"nowrap\" : \"wrap\",\n              gap: \"1rem\",\n              listStyle: \"none\",\n              margin: 0,\n              padding: 0,\n            }}\n          >\n            {groupBy === \"issuer\"\n              ? groupedBadges.map(({ issuer, badges }) => (\n                  <li key={issuer}>\n                    <h2>{issuer}</h2>\n                    <ul\n                      aria-label={`Credly badges from ${issuer}`}\n                      style={{\n                        display: \"flex\",\n                        flexDirection:\n                          direction === \"vertical\" ? \"column\" : \"row\",\n                        flexWrap: direction === \"vertical\" ? \"nowrap\" : \"wrap\",\n                        gap: \"1rem\",\n                        listStyle: \"none\",\n                        margin: 0,\n                        padding: 0,\n                      }}\n                    >\n                      {badges.map((badge) => (\n                        <BadgeItem key={badge.id} badge={badge} />\n                      ))}\n                    </ul>\n                  </li>\n                ))\n              : current.badges.map((badge) => (\n                  <BadgeItem key={badge.id} badge={badge} />\n                ))}\n          </ul>\n        ))}\n    </div>\n  );\n}\n","export interface CredlyBadge {\n  id: string;\n  name: string;\n  imageUrl: string;\n  url: string;\n  issuerName?: string | null;\n  issuedAt?: string | null;\n}\n\nexport function groupBadgesByIssuer(badges: CredlyBadge[]) {\n  const groups = new Map<string, { issuer: string; badges: CredlyBadge[] }>();\n\n  for (const badge of badges) {\n    const issuer = badge.issuerName ?? 'Unknown issuer';\n    const group = groups.get(issuer);\n    if (group) {\n      group.badges.push(badge);\n    } else {\n      groups.set(issuer, { issuer, badges: [badge] });\n    }\n  }\n\n  return Array.from(groups.values(), (group) => ({\n    ...group,\n    badges: group.badges\n      .map((badge, index) => ({ badge, index }))\n      .sort((a, b) => {\n        const aDate = a.badge.issuedAt ? Date.parse(a.badge.issuedAt) : null;\n        const bDate = b.badge.issuedAt ? Date.parse(b.badge.issuedAt) : null;\n\n        if (aDate === null && bDate === null) return a.index - b.index;\n        if (aDate === null) return 1;\n        if (bDate === null) return -1;\n        return bDate - aDate || a.index - b.index;\n      })\n      .map(({ badge }) => badge),\n  }));\n}\n\nexport function isRecord(value: unknown): value is Record<string, unknown> {\n  return typeof value === 'object' && value !== null && !Array.isArray(value);\n}\n\nexport function isNonEmptyString(value: unknown): value is string {\n  return typeof value === 'string' && value.trim().length > 0;\n}\n\nexport function isHttpsUrl(value: unknown): value is string {\n  if (!isNonEmptyString(value)) return false;\n\n  try {\n    return new URL(value).protocol === 'https:';\n  } catch {\n    return false;\n  }\n}\n\nexport function parseBadges(value: unknown): CredlyBadge[] {\n  const isWorkerResponse = isRecord(value);\n  const badges: unknown = isWorkerResponse ? value.badges : value;\n\n  if (!Array.isArray(badges)) {\n    throw new Error('The badges endpoint must return a JSON array or an object with a badges array.');\n  }\n\n  return badges.map((badge: unknown) => {\n    const url = isRecord(badge)\n      ? (isWorkerResponse ? badge.badgeUrl : badge.url)\n      : undefined;\n\n    if (\n      !isRecord(badge) ||\n      !isNonEmptyString(badge.id) ||\n      !isNonEmptyString(badge.name) ||\n      !isHttpsUrl(badge.imageUrl) ||\n      !isHttpsUrl(url)\n    ) {\n      throw new Error('The badges endpoint returned an invalid badge.');\n    }\n\n    return {\n      id: badge.id,\n      name: badge.name,\n      imageUrl: badge.imageUrl,\n      url,\n      issuerName: isNonEmptyString(badge.issuerName)\n        ? badge.issuerName.trim()\n        : null,\n      issuedAt:\n        isNonEmptyString(badge.issuedAt) &&\n        !Number.isNaN(Date.parse(badge.issuedAt))\n          ? badge.issuedAt\n          : null,\n    };\n  });\n}\n","import * as React from \"react\";\nimport type { CredlyBadge } from \"../shared/badges\";\n\ninterface BadgeItemProps {\n  badge: CredlyBadge;\n}\n\nexport function BadgeItem({ badge }: BadgeItemProps) {\n  return (\n    <li>\n      <a href={badge.url} target='_blank' rel='noopener noreferrer'>\n        <img\n          src={badge.imageUrl}\n          alt={badge.name}\n          width={120}\n          height={120}\n          loading='lazy'\n          style={{ objectFit: \"contain\" }}\n        />\n      </a>\n    </li>\n  );\n}\n"],"mappings":"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","names":["React","React"]}

package/package.json

@@ -1,6 +1,76 @@
 {
   "name": "react-credly-badges",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "1.1.0",
+  "description": "A lightweight React component for displaying public Credly badges through a Cloudflare Worker.",
+  "license": "UNLICENSED",
+  "type": "module",
+  "main": "./dist/client/index.cjs",
+  "module": "./dist/client/index.js",
+  "types": "./dist/client/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/client/index.d.ts",
+        "default": "./dist/client/index.js"
+      },
+      "require": {
+        "types": "./dist/client/index.d.cts",
+        "default": "./dist/client/index.cjs"
+      }
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint .",
+    "commitlint": "commitlint",
+    "release": "semantic-release",
+    "prepare": "husky",
+    "prepack": "npm run typecheck && npm run lint && npm run build"
+  },
+  "peerDependencies": {
+    "react": "^17.0.0 || ^18.2.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@commitlint/cli": "^21.2.4",
+    "@commitlint/config-conventional": "^21.2.4",
+    "@eslint/js": "^10.0.0",
+    "@semantic-release/commit-analyzer": "^13.0.1",
+    "@semantic-release/github": "^12.0.10",
+    "@semantic-release/npm": "^13.2.0",
+    "@semantic-release/release-notes-generator": "^14.1.1",
+    "@types/react": "^19.0.0",
+    "eslint": "^10.0.0",
+    "eslint-plugin-react-hooks": "^7.0.0",
+    "globals": "^16.0.0",
+    "husky": "^9.1.7",
+    "react": "^19.0.0",
+    "semantic-release": "^25.0.9",
+    "tsup": "^9.0.0",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.0.0"
+  },
+  "keywords": [
+    "react",
+    "credly",
+    "badges",
+    "typescript"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "homepage": "https://github.com/Safnaj/react-credly-badges#readme",
+  "bugs": {
+    "url": "https://github.com/Safnaj/react-credly-badges/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Safnaj/react-credly-badges.git"
+  }
+}