react-credly-badges 0.0.0-stage → 0.1.0

package/README.md

@@ -1,3 +1,132 @@
-# 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 library for displaying public Credly badges
+using a Credly username.
+
+- Horizontal and vertical layouts.
+- Badge images link to their Credly verification pages.
+- Fetches badges through a hosted Cloudflare Worker; no application backend required.
+- Supports React 17, 18.2, and 19.
+
+## Usage
+
+```sh
+npm install react-credly-badges
+```
+
+```tsx
+import { CredlyBadges } from 'react-credly-badges';
+
+<CredlyBadges username="ahamed-safnaj" direction="horizontal" />;
+```
+
+Use `direction="vertical"` for a column.
+
+## Development
+
+Use Node.js 24 and npm. The tooling also supports Node.js 22.14
+or newer on the Node.js 22 line.
+
+```sh
+npm ci
+npm run typecheck
+npm run lint
+npm run build
+npm pack --dry-run
+```
+
+There is currently no automated test suite. CI checks types, linting, the build,
+and the package contents. Only the built library and package documentation are published;
+the Cloudflare Worker is deployed separately and is not shipped in the npm package.
+`prepack` runs typechecking, linting, and the build before packing or publishing.
+
+The commitlint and release workflows select Node.js 24 directly. If you use nvm
+locally, run `nvm install 24` and `nvm use 24`.
+
+### Commit conventions
+
+`npm ci` installs the Husky `commit-msg` hook. Commitlint enforces
+[Conventional Commits](https://www.conventionalcommits.org/), for example:
+
+```text
+feat: add a badge size option
+fix: handle an empty badge response
+docs: clarify worker configuration
+feat!: change the component API
+```
+
+`fix` commits produce patch releases, `feat` commits produce minor releases, and
+breaking changes (`!` or a `BREAKING CHANGE:` footer) produce major releases.
+Other commit types do not trigger a release by default. PR commits and PR titles
+are checked in CI. Prefer squash merges and preserve the validated PR title and
+any breaking-change footer in the final commit message.
+
+To check a message manually:
+
+```sh
+printf '%s\n' 'feat: add a badge size option' | npm run commitlint
+```
+
+## Releases
+
+The [CI workflow](.github/workflows/ci.yml) runs typechecking, linting, package
+builds, and package inspection on Node.js 22 and 24 for pull requests.
+The separate [Release workflow](.github/workflows/release.yml) runs on pushes to
+`main` and calls the same reusable CI workflow before publishing. After both
+matrix CI jobs pass, semantic-release analyzes commits, selects the next version,
+publishes to npm, and creates a Git tag and GitHub release with generated release
+notes. PRs never publish. The Release workflow can also be run manually on `main`
+to retry a release; commits without a release-worthy change do not publish a new version.
+
+Versions are written into the published package during release, not committed
+back to `main`. Git tags and npm are the source of truth for released versions;
+do not manually bump the source version for subsequent releases. No release
+commits or personal GitHub access tokens are needed.
+
+### One-time maintainer setup
+
+1. Keep this GitHub repository public so npm can generate provenance. Enable
+   GitHub Actions and protect `main`, requiring both matrix CI checks and
+   `Conventional commits` before merging. Restrict direct pushes.
+2. The npm package must exist before its trusted publisher can be configured.
+   For this unpublished package, sign in with an npm account that can publish
+   `react-credly-badges`, and bootstrap the current version once:
+
+   ```sh
+   npm ci
+   npm login
+   npm publish --access public
+   git tag v0.1.0
+   git push origin v0.1.0
+   ```
+
+   Run this from a clean, committed checkout on `main`, before enabling the
+   first automated release. Tag the exact commit used to publish. If a version
+   already exists on npm, instead ensure its corresponding Git tag is present;
+   do not publish it again. The bootstrap tag tells semantic-release where
+   the existing release history starts. Without any release tags,
+   semantic-release's first release defaults to `1.0.0`.
+3. In the npm package settings, add a **GitHub Actions trusted publisher** with:
+   - Organization or user: `Safnaj`
+   - Repository: `react-credly-badges`
+   - Workflow filename: `release.yml` (the caller workflow that publishes).
+   - Environment: leave blank (the release job does not use an environment).
+4. After verifying trusted publishing, disable token-based publishing in the
+   npm package settings where available. No `NPM_TOKEN` secret is required:
+   the release job uses OIDC (`id-token: write`), and npm automatically attaches
+   provenance. GitHub releases use the built-in `GITHUB_TOKEN`, with write
+   access limited to the release job.
+5. Merge a release-worthy Conventional Commit into `main` or manually run the
+   workflow after setup. Do not run `npm run release` locally to publish;
+   trusted publishing is authorized only from the configured GitHub workflow.
+
+## License
+
+This package is currently unlicensed (`UNLICENSED`); no open-source license or
+permission to reuse the code is granted. Choose a license before distributing
+it as an open-source library.
+
+## Note
+
+This is an unofficial integration that displays public badges only.
+Your username is sent to the hosted Worker to retrieve badges.

package/dist/client/index.cjs

@@ -0,0 +1,160 @@
+"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 React = __toESM(require("react"), 1);
+
+// src/shared/badges.ts
+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
+    };
+  });
+}
+
+// src/components/CredlyBadges.tsx
+function CredlyBadges({
+  username,
+  direction = "horizontal",
+  endpoint = "https://react-credly-badges.safnaj99.workers.dev/",
+  className,
+  style
+}) {
+  const key = JSON.stringify([username, endpoint]);
+  const [state, setState] = React.useState({
+    key,
+    status: "loading"
+  });
+  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" };
+  return /* @__PURE__ */ React.createElement("div", { className, style }, current.status === "loading" && /* @__PURE__ */ React.createElement("p", { role: "status" }, "Loading Credly badges..."), current.status === "error" && /* @__PURE__ */ React.createElement("p", { role: "alert" }, current.message), current.status === "success" && (current.badges.length === 0 ? /* @__PURE__ */ React.createElement("p", { role: "status" }, "No public Credly badges found.") : /* @__PURE__ */ React.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
+      }
+    },
+    current.badges.map((badge) => /* @__PURE__ */ React.createElement("li", { key: badge.id }, /* @__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" }
+      }
+    ))))
+  )));
+}
+// 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"],"sourcesContent":["export { CredlyBadges } from './components/CredlyBadges';\nexport type { CredlyBadgesProps } from './components/CredlyBadges';\nexport type { CredlyBadge } from './shared/badges';\n","import * as React from \"react\";\nimport type { CSSProperties } from \"react\";\nimport { parseBadges } from \"../shared/badges\";\nimport type { CredlyBadge } from \"../shared/badges\";\n\nexport interface CredlyBadgesProps {\n  username: string;\n  direction?: \"horizontal\" | \"vertical\";\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  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  React.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\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            {current.badges.map((badge) => (\n              <li key={badge.id}>\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          </ul>\n        ))}\n    </div>\n  );\n}\n","export interface CredlyBadge {\n  id: string;\n  name: string;\n  imageUrl: string;\n  url: string;\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    };\n  });\n}\n"],"mappings":"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","names":[]}

package/dist/client/index.d.cts

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

package/dist/client/index.d.ts

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

package/dist/client/index.js

@@ -0,0 +1,124 @@
+"use client";
+
+// src/components/CredlyBadges.tsx
+import * as React from "react";
+
+// src/shared/badges.ts
+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
+    };
+  });
+}
+
+// src/components/CredlyBadges.tsx
+function CredlyBadges({
+  username,
+  direction = "horizontal",
+  endpoint = "https://react-credly-badges.safnaj99.workers.dev/",
+  className,
+  style
+}) {
+  const key = JSON.stringify([username, endpoint]);
+  const [state, setState] = React.useState({
+    key,
+    status: "loading"
+  });
+  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" };
+  return /* @__PURE__ */ React.createElement("div", { className, style }, current.status === "loading" && /* @__PURE__ */ React.createElement("p", { role: "status" }, "Loading Credly badges..."), current.status === "error" && /* @__PURE__ */ React.createElement("p", { role: "alert" }, current.message), current.status === "success" && (current.badges.length === 0 ? /* @__PURE__ */ React.createElement("p", { role: "status" }, "No public Credly badges found.") : /* @__PURE__ */ React.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
+      }
+    },
+    current.badges.map((badge) => /* @__PURE__ */ React.createElement("li", { key: badge.id }, /* @__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" }
+      }
+    ))))
+  )));
+}
+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"],"sourcesContent":["import * as React from \"react\";\nimport type { CSSProperties } from \"react\";\nimport { parseBadges } from \"../shared/badges\";\nimport type { CredlyBadge } from \"../shared/badges\";\n\nexport interface CredlyBadgesProps {\n  username: string;\n  direction?: \"horizontal\" | \"vertical\";\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  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  React.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\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            {current.badges.map((badge) => (\n              <li key={badge.id}>\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          </ul>\n        ))}\n    </div>\n  );\n}\n","export interface CredlyBadge {\n  id: string;\n  name: string;\n  imageUrl: string;\n  url: string;\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    };\n  });\n}\n"],"mappings":"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","names":[]}

package/package.json

@@ -1,6 +1,69 @@
 {
   "name": "react-credly-badges",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.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"
+  }
+}