@saas-maker/progress 0.1.0

package/README.md

@@ -0,0 +1,33 @@
+# @saas-maker/progress
+
+Embeddable public progress widget for SaaS Maker projects.
+
+It combines:
+
+- published changelog entries
+- public roadmap items grouped as In Progress, Planned, and Shipped
+
+## Install
+
+```bash
+npm install @saas-maker/progress
+```
+
+## Usage
+
+```tsx
+import { ProgressWidget } from '@saas-maker/progress';
+import '@saas-maker/progress/dist/index.css';
+
+<ProgressWidget slug="my-project" />
+```
+
+## Props
+
+| Prop | Type | Default |
+|---|---|---|
+| `slug` | `string` | required |
+| `apiBaseUrl` | `string` | `https://api.sassmaker.com` |
+| `theme` | `light \| dark \| auto` | `auto` |
+| `maxChangelogItems` | `number` | API default |
+| `showEmptyStates` | `boolean` | `true` |

package/dist/index.css

@@ -0,0 +1,210 @@
+/* src/styles/progress.css */
+[data-saasmaker-progress] {
+  --smp-bg: #ffffff;
+  --smp-card: #f8fafc;
+  --smp-border: #e2e8f0;
+  --smp-text: #0f172a;
+  --smp-muted: #64748b;
+  --smp-subtle: #94a3b8;
+  --smp-accent: #4f46e5;
+  --smp-green: #16a34a;
+  --smp-amber: #d97706;
+  --smp-blue: #2563eb;
+  color: var(--smp-text);
+  font-family:
+    Inter,
+    ui-sans-serif,
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    sans-serif;
+}
+[data-saasmaker-progress].smp--dark {
+  --smp-bg: #020617;
+  --smp-card: #0f172a;
+  --smp-border: #1e293b;
+  --smp-text: #f8fafc;
+  --smp-muted: #94a3b8;
+  --smp-subtle: #64748b;
+  --smp-accent: #818cf8;
+  --smp-green: #4ade80;
+  --smp-amber: #fbbf24;
+  --smp-blue: #60a5fa;
+}
+@media (prefers-color-scheme: dark) {
+  [data-saasmaker-progress].smp--auto {
+    --smp-bg: #020617;
+    --smp-card: #0f172a;
+    --smp-border: #1e293b;
+    --smp-text: #f8fafc;
+    --smp-muted: #94a3b8;
+    --smp-subtle: #64748b;
+    --smp-accent: #818cf8;
+    --smp-green: #4ade80;
+    --smp-amber: #fbbf24;
+    --smp-blue: #60a5fa;
+  }
+}
+[data-saasmaker-progress] .smp-header {
+  margin-bottom: 1rem;
+}
+[data-saasmaker-progress] .smp-header p,
+[data-saasmaker-progress] .smp-section-header h3 {
+  margin: 0;
+}
+[data-saasmaker-progress] .smp-header p {
+  color: var(--smp-muted);
+  font-size: 0.75rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+[data-saasmaker-progress] .smp-header h3 {
+  margin: 0.25rem 0 0;
+  font-size: 1.375rem;
+  line-height: 1.2;
+}
+[data-saasmaker-progress] .smp-layout {
+  display: grid;
+  gap: 1rem;
+}
+[data-saasmaker-progress] .smp-section {
+  background: var(--smp-bg);
+  border: 1px solid var(--smp-border);
+  border-radius: 0.75rem;
+  padding: 1rem;
+}
+[data-saasmaker-progress] .smp-section-header {
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 0.875rem;
+}
+[data-saasmaker-progress] .smp-section-header h3 {
+  font-size: 0.95rem;
+  font-weight: 700;
+}
+[data-saasmaker-progress] .smp-roadmap {
+  display: grid;
+  gap: 0.75rem;
+}
+@media (min-width: 720px) {
+  [data-saasmaker-progress] .smp-roadmap {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+[data-saasmaker-progress] .smp-roadmap-column {
+  background: var(--smp-card);
+  border: 1px solid var(--smp-border);
+  border-radius: 0.5rem;
+  padding: 0.75rem;
+}
+[data-saasmaker-progress] .smp-column-header {
+  align-items: center;
+  display: flex;
+  gap: 0.5rem;
+  justify-content: space-between;
+  margin-bottom: 0.625rem;
+}
+[data-saasmaker-progress] .smp-column-header h4 {
+  font-size: 0.8rem;
+  margin: 0;
+}
+[data-saasmaker-progress] .smp-column-header span {
+  color: var(--smp-muted);
+  font-size: 0.75rem;
+  font-variant-numeric: tabular-nums;
+}
+[data-saasmaker-progress] .smp-roadmap-items {
+  display: grid;
+  gap: 0.5rem;
+}
+[data-saasmaker-progress] .smp-roadmap-item {
+  align-items: start;
+  background: var(--smp-bg);
+  border: 1px solid var(--smp-border);
+  border-radius: 0.5rem;
+  display: flex;
+  gap: 0.75rem;
+  justify-content: space-between;
+  padding: 0.625rem;
+}
+[data-saasmaker-progress] .smp-roadmap-item h5,
+[data-saasmaker-progress] .smp-changelog-item h4 {
+  font-size: 0.875rem;
+  line-height: 1.3;
+  margin: 0;
+}
+[data-saasmaker-progress] .smp-roadmap-item p,
+[data-saasmaker-progress] .smp-changelog-item p {
+  color: var(--smp-muted);
+  font-size: 0.8rem;
+  line-height: 1.45;
+  margin: 0.25rem 0 0;
+}
+[data-saasmaker-progress] .smp-votes {
+  color: var(--smp-accent);
+  font-size: 0.75rem;
+  font-weight: 700;
+}
+[data-saasmaker-progress] .smp-changelog {
+  border-left: 1px solid var(--smp-border);
+  display: grid;
+  gap: 1rem;
+  list-style: none;
+  margin: 0;
+  padding: 0 0 0 1rem;
+}
+[data-saasmaker-progress] .smp-changelog-item {
+  position: relative;
+}
+[data-saasmaker-progress] .smp-changelog-item::before {
+  background: var(--smp-accent);
+  border: 2px solid var(--smp-bg);
+  border-radius: 999px;
+  content: "";
+  height: 0.55rem;
+  left: -1.3rem;
+  position: absolute;
+  top: 0.35rem;
+  width: 0.55rem;
+}
+[data-saasmaker-progress] .smp-changelog-meta {
+  align-items: center;
+  color: var(--smp-subtle);
+  display: flex;
+  flex-wrap: wrap;
+  font-size: 0.72rem;
+  gap: 0.4rem;
+  margin-bottom: 0.25rem;
+}
+[data-saasmaker-progress] .smp-badge,
+[data-saasmaker-progress] .smp-version {
+  border: 1px solid var(--smp-border);
+  border-radius: 999px;
+  font-size: 0.68rem;
+  font-weight: 700;
+  padding: 0.125rem 0.4rem;
+  text-transform: capitalize;
+}
+[data-saasmaker-progress] .smp-badge--feature {
+  color: var(--smp-green);
+}
+[data-saasmaker-progress] .smp-badge--improvement {
+  color: var(--smp-blue);
+}
+[data-saasmaker-progress] .smp-badge--fix {
+  color: var(--smp-amber);
+}
+[data-saasmaker-progress] .smp-badge--breaking {
+  color: #ef4444;
+}
+[data-saasmaker-progress] .smp-empty {
+  color: var(--smp-muted);
+  font-size: 0.875rem;
+  margin: 0;
+}
+[data-saasmaker-progress] .smp-empty--compact {
+  font-size: 0.78rem;
+}

package/dist/index.js

@@ -0,0 +1,165 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  ProgressWidget: () => ProgressWidget
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/ProgressWidget.tsx
+var import_react = require("react");
+
+// src/api.ts
+var DEFAULT_API_BASE = "https://api.sassmaker.com";
+function createApiClient(apiBaseUrl) {
+  const base = (apiBaseUrl || DEFAULT_API_BASE).replace(/\/$/, "");
+  return {
+    async getPublicProgress(slug, changelogLimit) {
+      const params = new URLSearchParams();
+      if (changelogLimit)
+        params.set("changelog_limit", String(changelogLimit));
+      const qs = params.toString();
+      const res = await fetch(`${base}/v1/progress/public/${encodeURIComponent(slug)}${qs ? `?${qs}` : ""}`);
+      if (!res.ok)
+        return null;
+      return res.json();
+    }
+  };
+}
+
+// src/ProgressWidget.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var ROADMAP_COLUMNS = ["in_progress", "planned", "done"];
+var COLUMN_LABELS = {
+  in_progress: "In Progress",
+  planned: "Planned",
+  done: "Shipped"
+};
+function formatDate(dateStr) {
+  if (!dateStr)
+    return "";
+  const date = new Date(dateStr);
+  return date.toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" });
+}
+function getColumnItems(items, column) {
+  return items.filter((item) => item.column === column).sort((a, b) => a.position - b.position || b.upvote_count - a.upvote_count);
+}
+function ChangelogList({ entries, showEmptyStates }) {
+  if (entries.length === 0) {
+    return showEmptyStates ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "smp-empty", children: "No shipped updates yet." }) : null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ol", { className: "smp-changelog", children: entries.map((entry) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("li", { className: "smp-changelog-item", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "smp-changelog-meta", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: formatDate(entry.published_at || entry.created_at) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: `smp-badge smp-badge--${entry.type}`, children: entry.type }),
+      entry.version && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "smp-version", children: [
+        "v",
+        entry.version
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h4", { children: entry.title }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: entry.content })
+  ] }, entry.id)) });
+}
+function RoadmapColumn({
+  label,
+  items,
+  showEmptyStates
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { className: "smp-roadmap-column", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "smp-column-header", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h4", { children: label }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: items.length })
+    ] }),
+    items.length === 0 && showEmptyStates ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "smp-empty smp-empty--compact", children: "Nothing here yet." }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "smp-roadmap-items", children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("article", { className: "smp-roadmap-item", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h5", { children: item.title }),
+        item.description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: item.description })
+      ] }),
+      item.upvote_count > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "smp-votes", children: item.upvote_count })
+    ] }, item.id)) })
+  ] });
+}
+function ProgressWidget({
+  slug,
+  apiBaseUrl,
+  theme = "auto",
+  maxChangelogItems,
+  showEmptyStates = true
+}) {
+  const [data, setData] = (0, import_react.useState)(null);
+  const [loading, setLoading] = (0, import_react.useState)(true);
+  const api = (0, import_react.useMemo)(() => createApiClient(apiBaseUrl), [apiBaseUrl]);
+  const themeClass = theme === "light" ? "smp--light" : theme === "dark" ? "smp--dark" : "smp--auto";
+  (0, import_react.useEffect)(() => {
+    let cancelled = false;
+    setLoading(true);
+    api.getPublicProgress(slug, maxChangelogItems).then((result) => {
+      if (!cancelled && result) {
+        setData({
+          projectName: result.project.name,
+          changelog: result.changelog,
+          roadmap: result.roadmap
+        });
+      }
+    }).catch(() => {
+    }).finally(() => {
+      if (!cancelled)
+        setLoading(false);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [api, maxChangelogItems, slug]);
+  if (loading)
+    return null;
+  if (!data) {
+    return showEmptyStates ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { "data-saasmaker-progress": "", className: themeClass, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "smp-empty", children: "Progress is not available." }) }) : null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { "data-saasmaker-progress": "", className: themeClass, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("header", { className: "smp-header", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: "Progress" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { children: data.projectName })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "smp-layout", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { className: "smp-section", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "smp-section-header", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { children: "Now and Next" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "smp-roadmap", children: ROADMAP_COLUMNS.map((column) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          RoadmapColumn,
+          {
+            label: COLUMN_LABELS[column],
+            items: getColumnItems(data.roadmap, column),
+            showEmptyStates
+          },
+          column
+        )) })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { className: "smp-section", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "smp-section-header", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { children: "Shipped" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChangelogList, { entries: data.changelog, showEmptyStates })
+      ] })
+    ] })
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ProgressWidget
+});

package/dist/index.mjs

@@ -0,0 +1,138 @@
+// src/ProgressWidget.tsx
+import { useEffect, useMemo, useState } from "react";
+
+// src/api.ts
+var DEFAULT_API_BASE = "https://api.sassmaker.com";
+function createApiClient(apiBaseUrl) {
+  const base = (apiBaseUrl || DEFAULT_API_BASE).replace(/\/$/, "");
+  return {
+    async getPublicProgress(slug, changelogLimit) {
+      const params = new URLSearchParams();
+      if (changelogLimit)
+        params.set("changelog_limit", String(changelogLimit));
+      const qs = params.toString();
+      const res = await fetch(`${base}/v1/progress/public/${encodeURIComponent(slug)}${qs ? `?${qs}` : ""}`);
+      if (!res.ok)
+        return null;
+      return res.json();
+    }
+  };
+}
+
+// src/ProgressWidget.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var ROADMAP_COLUMNS = ["in_progress", "planned", "done"];
+var COLUMN_LABELS = {
+  in_progress: "In Progress",
+  planned: "Planned",
+  done: "Shipped"
+};
+function formatDate(dateStr) {
+  if (!dateStr)
+    return "";
+  const date = new Date(dateStr);
+  return date.toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" });
+}
+function getColumnItems(items, column) {
+  return items.filter((item) => item.column === column).sort((a, b) => a.position - b.position || b.upvote_count - a.upvote_count);
+}
+function ChangelogList({ entries, showEmptyStates }) {
+  if (entries.length === 0) {
+    return showEmptyStates ? /* @__PURE__ */ jsx("p", { className: "smp-empty", children: "No shipped updates yet." }) : null;
+  }
+  return /* @__PURE__ */ jsx("ol", { className: "smp-changelog", children: entries.map((entry) => /* @__PURE__ */ jsxs("li", { className: "smp-changelog-item", children: [
+    /* @__PURE__ */ jsxs("div", { className: "smp-changelog-meta", children: [
+      /* @__PURE__ */ jsx("span", { children: formatDate(entry.published_at || entry.created_at) }),
+      /* @__PURE__ */ jsx("span", { className: `smp-badge smp-badge--${entry.type}`, children: entry.type }),
+      entry.version && /* @__PURE__ */ jsxs("span", { className: "smp-version", children: [
+        "v",
+        entry.version
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("h4", { children: entry.title }),
+    /* @__PURE__ */ jsx("p", { children: entry.content })
+  ] }, entry.id)) });
+}
+function RoadmapColumn({
+  label,
+  items,
+  showEmptyStates
+}) {
+  return /* @__PURE__ */ jsxs("section", { className: "smp-roadmap-column", children: [
+    /* @__PURE__ */ jsxs("div", { className: "smp-column-header", children: [
+      /* @__PURE__ */ jsx("h4", { children: label }),
+      /* @__PURE__ */ jsx("span", { children: items.length })
+    ] }),
+    items.length === 0 && showEmptyStates ? /* @__PURE__ */ jsx("p", { className: "smp-empty smp-empty--compact", children: "Nothing here yet." }) : /* @__PURE__ */ jsx("div", { className: "smp-roadmap-items", children: items.map((item) => /* @__PURE__ */ jsxs("article", { className: "smp-roadmap-item", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("h5", { children: item.title }),
+        item.description && /* @__PURE__ */ jsx("p", { children: item.description })
+      ] }),
+      item.upvote_count > 0 && /* @__PURE__ */ jsx("span", { className: "smp-votes", children: item.upvote_count })
+    ] }, item.id)) })
+  ] });
+}
+function ProgressWidget({
+  slug,
+  apiBaseUrl,
+  theme = "auto",
+  maxChangelogItems,
+  showEmptyStates = true
+}) {
+  const [data, setData] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const api = useMemo(() => createApiClient(apiBaseUrl), [apiBaseUrl]);
+  const themeClass = theme === "light" ? "smp--light" : theme === "dark" ? "smp--dark" : "smp--auto";
+  useEffect(() => {
+    let cancelled = false;
+    setLoading(true);
+    api.getPublicProgress(slug, maxChangelogItems).then((result) => {
+      if (!cancelled && result) {
+        setData({
+          projectName: result.project.name,
+          changelog: result.changelog,
+          roadmap: result.roadmap
+        });
+      }
+    }).catch(() => {
+    }).finally(() => {
+      if (!cancelled)
+        setLoading(false);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [api, maxChangelogItems, slug]);
+  if (loading)
+    return null;
+  if (!data) {
+    return showEmptyStates ? /* @__PURE__ */ jsx("div", { "data-saasmaker-progress": "", className: themeClass, children: /* @__PURE__ */ jsx("p", { className: "smp-empty", children: "Progress is not available." }) }) : null;
+  }
+  return /* @__PURE__ */ jsxs("div", { "data-saasmaker-progress": "", className: themeClass, children: [
+    /* @__PURE__ */ jsxs("header", { className: "smp-header", children: [
+      /* @__PURE__ */ jsx("p", { children: "Progress" }),
+      /* @__PURE__ */ jsx("h3", { children: data.projectName })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "smp-layout", children: [
+      /* @__PURE__ */ jsxs("section", { className: "smp-section", children: [
+        /* @__PURE__ */ jsx("div", { className: "smp-section-header", children: /* @__PURE__ */ jsx("h3", { children: "Now and Next" }) }),
+        /* @__PURE__ */ jsx("div", { className: "smp-roadmap", children: ROADMAP_COLUMNS.map((column) => /* @__PURE__ */ jsx(
+          RoadmapColumn,
+          {
+            label: COLUMN_LABELS[column],
+            items: getColumnItems(data.roadmap, column),
+            showEmptyStates
+          },
+          column
+        )) })
+      ] }),
+      /* @__PURE__ */ jsxs("section", { className: "smp-section", children: [
+        /* @__PURE__ */ jsx("div", { className: "smp-section-header", children: /* @__PURE__ */ jsx("h3", { children: "Shipped" }) }),
+        /* @__PURE__ */ jsx(ChangelogList, { entries: data.changelog, showEmptyStates })
+      ] })
+    ] })
+  ] });
+}
+export {
+  ProgressWidget
+};

package/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@saas-maker/progress",
+  "version": "0.1.0",
+  "description": "Embeddable product progress widget for SaaS Maker public projects.",
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist"
+  ],
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "tsup src/index.ts --format esm,cjs --dts --external react --external react-dom",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@saas-maker/shared-types": "workspace:*"
+  },
+  "peerDependencies": {
+    "react": "19.2.5",
+    "react-dom": "19.2.5"
+  },
+  "devDependencies": {
+    "@types/react": "19",
+    "@types/react-dom": "19",
+    "react": "19.2.5",
+    "react-dom": "19.2.5",
+    "tsup": "8.0.0",
+    "typescript": "6.0.3"
+  }
+}