@igstack/app-catalog-frontend-core 6.10.3 → 6.11.0

package/dist/esm/modules/communityTools/ui/CardScreenshot.js

@@ -0,0 +1,112 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { Camera, ImageOff, ExternalLink, Maximize2 } from "lucide-react";
+import { useState } from "react";
+import { ScreenshotGallery } from "../../appCatalog/ui/components/ScreenshotGallery.js";
+import { cn } from "../../../lib/utils.js";
+import { screenshotUrl } from "./FeedRow.js";
+const BOX = "relative flex aspect-[16/10] max-h-[320px] w-full items-center justify-center overflow-hidden rounded-[14px] border border-border bg-muted shadow-sm";
+function formatCardDate(iso) {
+  return new Date(iso).toLocaleDateString("en-GB", {
+    day: "numeric",
+    month: "short",
+    year: "numeric"
+  });
+}
+function CardScreenshot({
+  tool,
+  capturing
+}) {
+  const [open, setOpen] = useState(false);
+  const { screenshotId, capturedAt } = tool;
+  if (!screenshotId) {
+    return /* @__PURE__ */ jsxs("figure", { "data-testid": "card-screenshot", className: "mt-[22px]", children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          "data-testid": "card-screenshot-box",
+          "data-state": capturing ? "capturing" : "missing",
+          "aria-busy": capturing || void 0,
+          className: cn(
+            BOX,
+            "flex-col gap-2.5 px-6 text-center text-sm font-semibold text-muted-foreground"
+          ),
+          children: capturing ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(Camera, { "aria-hidden": "true", className: "size-7 animate-pulse" }),
+            "Taking a screenshot of the site…"
+          ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(ImageOff, { "aria-hidden": "true", className: "size-7" }),
+            "No screenshot. The site may need a login, or it did not load."
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsx("figcaption", { className: "mt-2 text-[12.5px] font-semibold text-muted-foreground", children: capturing ? "Usually under a minute" : "Open the site to see it" })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("figure", { "data-testid": "card-screenshot", className: "mt-[22px]", children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-testid": "card-screenshot-box",
+        "data-state": "captured",
+        className: BOX,
+        children: [
+          /* @__PURE__ */ jsxs(
+            "a",
+            {
+              href: tool.url,
+              target: "_blank",
+              rel: "noopener noreferrer",
+              "aria-label": `Open ${tool.name} in a new tab`,
+              "data-testid": "card-screenshot-link",
+              className: "group/shot block size-full rounded-[14px] focus-visible:outline-2 focus-visible:-outline-offset-4 focus-visible:outline-ring",
+              children: [
+                /* @__PURE__ */ jsx(
+                  "img",
+                  {
+                    src: screenshotUrl(screenshotId, 1280),
+                    alt: `Screenshot of ${tool.name}`,
+                    className: "size-full object-cover object-left-top"
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { className: "absolute inset-0 flex items-center justify-center bg-black/0 transition-colors group-focus-visible/shot:bg-black/20 group-hover/shot:bg-black/20", children: /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5 rounded-lg bg-primary px-3.5 py-2 text-sm font-extrabold text-primary-foreground opacity-0 shadow-sm transition-opacity group-focus-visible/shot:opacity-100 group-hover/shot:opacity-100", children: [
+                  "Open site",
+                  /* @__PURE__ */ jsx(ExternalLink, { "aria-hidden": "true", className: "size-4" })
+                ] }) })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": `Enlarge screenshot of ${tool.name}`,
+              title: "Enlarge",
+              onClick: () => setOpen(true),
+              className: "absolute top-3 right-3 inline-flex size-8 items-center justify-center rounded-lg bg-black/65 text-white hover:bg-black/80 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring",
+              children: /* @__PURE__ */ jsx(Maximize2, { "aria-hidden": "true", className: "size-4" })
+            }
+          )
+        ]
+      }
+    ),
+    capturedAt && /* @__PURE__ */ jsxs("figcaption", { className: "mt-2 text-[12.5px] font-semibold text-muted-foreground", children: [
+      "Screenshot captured ",
+      formatCardDate(capturedAt)
+    ] }),
+    /* @__PURE__ */ jsx(
+      ScreenshotGallery,
+      {
+        app: { displayName: tool.name },
+        screenshotIds: [screenshotId],
+        open,
+        onOpenChange: setOpen,
+        title: `${tool.name} screenshot`
+      }
+    )
+  ] });
+}
+export {
+  CardScreenshot,
+  formatCardDate
+};
+//# sourceMappingURL=CardScreenshot.js.map

package/dist/esm/modules/communityTools/ui/CardScreenshot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardScreenshot.js","sources":["../../../../../src/modules/communityTools/ui/CardScreenshot.tsx"],"sourcesContent":["import type { CommunityTool } from '@igstack/app-catalog-shared-core'\nimport { Camera, ExternalLink, ImageOff, Maximize2 } from 'lucide-react'\nimport { useState } from 'react'\nimport { ScreenshotGallery } from '~/modules/appCatalog/ui/components/ScreenshotGallery'\nimport { cn } from '~/lib/utils'\nimport { screenshotUrl } from './FeedRow'\n\n/**\n * The 16:10 box every state shares, so swapping one for another moves nothing.\n * Capped in height, so how to use it and who to ask stay above the fold; the\n * top of the page, where its title is, is what shows.\n */\nconst BOX =\n  'relative flex aspect-[16/10] max-h-[320px] w-full items-center justify-center overflow-hidden rounded-[14px] border border-border bg-muted shadow-sm'\n\nexport function formatCardDate(iso: string): string {\n  return new Date(iso).toLocaleDateString('en-GB', {\n    day: 'numeric',\n    month: 'short',\n    year: 'numeric',\n  })\n}\n\n/**\n * The tool's screenshot, full width: a click opens the site, like the title\n * block, and the corner button enlarges it in the screenshot viewer. A tool\n * with none yet shows a placeholder in the same box, not a link: \"still\n * capturing\" while its first visit is to come, otherwise \"no screenshot\".\n */\nexport function CardScreenshot({\n  tool,\n  capturing,\n}: {\n  tool: CommunityTool\n  /** A first screenshot is on its way and still worth waiting for. */\n  capturing: boolean\n}) {\n  const [open, setOpen] = useState(false)\n  const { screenshotId, capturedAt } = tool\n\n  if (!screenshotId) {\n    return (\n      <figure data-testid=\"card-screenshot\" className=\"mt-[22px]\">\n        <div\n          data-testid=\"card-screenshot-box\"\n          data-state={capturing ? 'capturing' : 'missing'}\n          aria-busy={capturing || undefined}\n          className={cn(\n            BOX,\n            'flex-col gap-2.5 px-6 text-center text-sm font-semibold text-muted-foreground',\n          )}\n        >\n          {capturing ? (\n            <>\n              <Camera aria-hidden=\"true\" className=\"size-7 animate-pulse\" />\n              Taking a screenshot of the site…\n            </>\n          ) : (\n            <>\n              <ImageOff aria-hidden=\"true\" className=\"size-7\" />\n              No screenshot. The site may need a login, or it did not load.\n            </>\n          )}\n        </div>\n        <figcaption className=\"mt-2 text-[12.5px] font-semibold text-muted-foreground\">\n          {capturing ? 'Usually under a minute' : 'Open the site to see it'}\n        </figcaption>\n      </figure>\n    )\n  }\n\n  return (\n    <figure data-testid=\"card-screenshot\" className=\"mt-[22px]\">\n      <div\n        data-testid=\"card-screenshot-box\"\n        data-state=\"captured\"\n        className={BOX}\n      >\n        <a\n          href={tool.url}\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n          aria-label={`Open ${tool.name} in a new tab`}\n          data-testid=\"card-screenshot-link\"\n          className=\"group/shot block size-full rounded-[14px] focus-visible:outline-2 focus-visible:-outline-offset-4 focus-visible:outline-ring\"\n        >\n          <img\n            src={screenshotUrl(screenshotId, 1280)}\n            alt={`Screenshot of ${tool.name}`}\n            className=\"size-full object-cover object-left-top\"\n          />\n          <span className=\"absolute inset-0 flex items-center justify-center bg-black/0 transition-colors group-focus-visible/shot:bg-black/20 group-hover/shot:bg-black/20\">\n            <span className=\"inline-flex items-center gap-1.5 rounded-lg bg-primary px-3.5 py-2 text-sm font-extrabold text-primary-foreground opacity-0 shadow-sm transition-opacity group-focus-visible/shot:opacity-100 group-hover/shot:opacity-100\">\n              Open site\n              <ExternalLink aria-hidden=\"true\" className=\"size-4\" />\n            </span>\n          </span>\n        </a>\n        {/* Beside the link, not in it: enlarging never opens the site. */}\n        <button\n          type=\"button\"\n          aria-label={`Enlarge screenshot of ${tool.name}`}\n          title=\"Enlarge\"\n          onClick={() => setOpen(true)}\n          className=\"absolute top-3 right-3 inline-flex size-8 items-center justify-center rounded-lg bg-black/65 text-white hover:bg-black/80 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring\"\n        >\n          <Maximize2 aria-hidden=\"true\" className=\"size-4\" />\n        </button>\n      </div>\n      {capturedAt && (\n        <figcaption className=\"mt-2 text-[12.5px] font-semibold text-muted-foreground\">\n          Screenshot captured {formatCardDate(capturedAt)}\n        </figcaption>\n      )}\n      <ScreenshotGallery\n        app={{ displayName: tool.name }}\n        screenshotIds={[screenshotId]}\n        open={open}\n        onOpenChange={setOpen}\n        title={`${tool.name} screenshot`}\n      />\n    </figure>\n  )\n}\n"],"names":[],"mappings":";;;;;;AAYA,MAAM,MACJ;AAEK,SAAS,eAAe,KAAqB;AAClD,SAAO,IAAI,KAAK,GAAG,EAAE,mBAAmB,SAAS;AAAA,IAC/C,KAAK;AAAA,IACL,OAAO;AAAA,IACP,MAAM;AAAA,EAAA,CACP;AACH;AAQO,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AACF,GAIG;AACD,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AACtC,QAAM,EAAE,cAAc,WAAA,IAAe;AAErC,MAAI,CAAC,cAAc;AACjB,WACE,qBAAC,UAAA,EAAO,eAAY,mBAAkB,WAAU,aAC9C,UAAA;AAAA,MAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,eAAY;AAAA,UACZ,cAAY,YAAY,cAAc;AAAA,UACtC,aAAW,aAAa;AAAA,UACxB,WAAW;AAAA,YACT;AAAA,YACA;AAAA,UAAA;AAAA,UAGD,sBACC,qBAAA,UAAA,EACE,UAAA;AAAA,YAAA,oBAAC,QAAA,EAAO,eAAY,QAAO,WAAU,wBAAuB;AAAA,YAAE;AAAA,UAAA,EAAA,CAEhE,IAEA,qBAAA,UAAA,EACE,UAAA;AAAA,YAAA,oBAAC,UAAA,EAAS,eAAY,QAAO,WAAU,UAAS;AAAA,YAAE;AAAA,UAAA,EAAA,CAEpD;AAAA,QAAA;AAAA,MAAA;AAAA,0BAGH,cAAA,EAAW,WAAU,0DACnB,UAAA,YAAY,2BAA2B,0BAAA,CAC1C;AAAA,IAAA,GACF;AAAA,EAEJ;AAEA,SACE,qBAAC,UAAA,EAAO,eAAY,mBAAkB,WAAU,aAC9C,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,eAAY;AAAA,QACZ,cAAW;AAAA,QACX,WAAW;AAAA,QAEX,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAM,KAAK;AAAA,cACX,QAAO;AAAA,cACP,KAAI;AAAA,cACJ,cAAY,QAAQ,KAAK,IAAI;AAAA,cAC7B,eAAY;AAAA,cACZ,WAAU;AAAA,cAEV,UAAA;AAAA,gBAAA;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,KAAK,cAAc,cAAc,IAAI;AAAA,oBACrC,KAAK,iBAAiB,KAAK,IAAI;AAAA,oBAC/B,WAAU;AAAA,kBAAA;AAAA,gBAAA;AAAA,oCAEX,QAAA,EAAK,WAAU,oJACd,UAAA,qBAAC,QAAA,EAAK,WAAU,8NAA6N,UAAA;AAAA,kBAAA;AAAA,kBAE3O,oBAAC,cAAA,EAAa,eAAY,QAAO,WAAU,SAAA,CAAS;AAAA,gBAAA,EAAA,CACtD,EAAA,CACF;AAAA,cAAA;AAAA,YAAA;AAAA,UAAA;AAAA,UAGF;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,cAAY,yBAAyB,KAAK,IAAI;AAAA,cAC9C,OAAM;AAAA,cACN,SAAS,MAAM,QAAQ,IAAI;AAAA,cAC3B,WAAU;AAAA,cAEV,UAAA,oBAAC,WAAA,EAAU,eAAY,QAAO,WAAU,SAAA,CAAS;AAAA,YAAA;AAAA,UAAA;AAAA,QACnD;AAAA,MAAA;AAAA,IAAA;AAAA,IAED,cACC,qBAAC,cAAA,EAAW,WAAU,0DAAyD,UAAA;AAAA,MAAA;AAAA,MACxD,eAAe,UAAU;AAAA,IAAA,GAChD;AAAA,IAEF;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAK,EAAE,aAAa,KAAK,KAAA;AAAA,QACzB,eAAe,CAAC,YAAY;AAAA,QAC5B;AAAA,QACA,cAAc;AAAA,QACd,OAAO,GAAG,KAAK,IAAI;AAAA,MAAA;AAAA,IAAA;AAAA,EACrB,GACF;AAEJ;"}

package/dist/esm/modules/communityTools/ui/CardTitleBlock.d.ts

@@ -0,0 +1,8 @@
+import { CommunityTool } from '@igstack/app-catalog-shared-core';
+/**
+ * The card's door: favicon (a globe when the site has none), name, badges and
+ * address, all one link that opens the site in a new tab.
+ */
+export declare function CardTitleBlock({ tool }: {
+    tool: CommunityTool;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/esm/modules/communityTools/ui/CardTitleBlock.js

@@ -0,0 +1,59 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Globe, ExternalLink } from "lucide-react";
+import { cn } from "../../../lib/utils.js";
+import { screenshotUrl } from "./FeedRow.js";
+import { LifecycleBadge, UnreviewedBadge } from "./LifecycleBadge.js";
+function CardTitleBlock({ tool }) {
+  const archived = tool.lifecycle.state === "archived";
+  return /* @__PURE__ */ jsxs(
+    "a",
+    {
+      href: tool.url,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      "data-testid": "card-title-block",
+      className: cn(
+        "group/door inline-flex min-w-0 items-center gap-[15px] rounded-[14px] border border-border bg-primary/[0.025] px-[17px] py-[11px] transition-colors",
+        "hover:border-primary/40 hover:bg-primary/[0.07] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring",
+        archived && "opacity-70 grayscale"
+      ),
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "inline-flex size-12 shrink-0 items-center justify-center overflow-hidden rounded-xl border border-border bg-card text-muted-foreground", children: tool.faviconId ? /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: screenshotUrl(tool.faviconId, 64),
+            alt: "",
+            className: "size-7"
+          }
+        ) : /* @__PURE__ */ jsx(Globe, { "aria-hidden": "true", className: "size-6", strokeWidth: 1.75 }) }),
+        /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-col gap-0.5", children: [
+          /* @__PURE__ */ jsxs("span", { className: "flex flex-wrap items-center gap-x-3 gap-y-1", children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                "data-testid": "card-tool-name",
+                className: "font-serif text-[26px] leading-tight font-semibold",
+                children: tool.name
+              }
+            ),
+            /* @__PURE__ */ jsx(LifecycleBadge, { lifecycle: tool.lifecycle }),
+            !tool.reviewed && /* @__PURE__ */ jsx(UnreviewedBadge, {})
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: "truncate font-mono text-[13px] text-muted-foreground", children: tool.host }),
+          /* @__PURE__ */ jsx("span", { className: "sr-only", children: "(opens in a new tab)" })
+        ] }),
+        /* @__PURE__ */ jsx(
+          ExternalLink,
+          {
+            "aria-hidden": "true",
+            className: "size-[18px] shrink-0 self-start text-muted-foreground group-hover/door:text-primary"
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  CardTitleBlock
+};
+//# sourceMappingURL=CardTitleBlock.js.map

package/dist/esm/modules/communityTools/ui/CardTitleBlock.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardTitleBlock.js","sources":["../../../../../src/modules/communityTools/ui/CardTitleBlock.tsx"],"sourcesContent":["import type { CommunityTool } from '@igstack/app-catalog-shared-core'\nimport { ExternalLink, Globe } from 'lucide-react'\nimport { cn } from '~/lib/utils'\nimport { screenshotUrl } from './FeedRow'\nimport { LifecycleBadge, UnreviewedBadge } from './LifecycleBadge'\n\n/**\n * The card's door: favicon (a globe when the site has none), name, badges and\n * address, all one link that opens the site in a new tab.\n */\nexport function CardTitleBlock({ tool }: { tool: CommunityTool }) {\n  const archived = tool.lifecycle.state === 'archived'\n  return (\n    <a\n      href={tool.url}\n      target=\"_blank\"\n      rel=\"noopener noreferrer\"\n      data-testid=\"card-title-block\"\n      className={cn(\n        'group/door inline-flex min-w-0 items-center gap-[15px] rounded-[14px] border border-border bg-primary/[0.025] px-[17px] py-[11px] transition-colors',\n        'hover:border-primary/40 hover:bg-primary/[0.07] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring',\n        archived && 'opacity-70 grayscale',\n      )}\n    >\n      <span className=\"inline-flex size-12 shrink-0 items-center justify-center overflow-hidden rounded-xl border border-border bg-card text-muted-foreground\">\n        {tool.faviconId ? (\n          <img\n            src={screenshotUrl(tool.faviconId, 64)}\n            alt=\"\"\n            className=\"size-7\"\n          />\n        ) : (\n          <Globe aria-hidden=\"true\" className=\"size-6\" strokeWidth={1.75} />\n        )}\n      </span>\n      <span className=\"flex min-w-0 flex-col gap-0.5\">\n        <span className=\"flex flex-wrap items-center gap-x-3 gap-y-1\">\n          <span\n            data-testid=\"card-tool-name\"\n            className=\"font-serif text-[26px] leading-tight font-semibold\"\n          >\n            {tool.name}\n          </span>\n          <LifecycleBadge lifecycle={tool.lifecycle} />\n          {!tool.reviewed && <UnreviewedBadge />}\n        </span>\n        <span className=\"truncate font-mono text-[13px] text-muted-foreground\">\n          {tool.host}\n        </span>\n        <span className=\"sr-only\">(opens in a new tab)</span>\n      </span>\n      <ExternalLink\n        aria-hidden=\"true\"\n        className=\"size-[18px] shrink-0 self-start text-muted-foreground group-hover/door:text-primary\"\n      />\n    </a>\n  )\n}\n"],"names":[],"mappings":";;;;;AAUO,SAAS,eAAe,EAAE,QAAiC;AAChE,QAAM,WAAW,KAAK,UAAU,UAAU;AAC1C,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAM,KAAK;AAAA,MACX,QAAO;AAAA,MACP,KAAI;AAAA,MACJ,eAAY;AAAA,MACZ,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA,YAAY;AAAA,MAAA;AAAA,MAGd,UAAA;AAAA,QAAA,oBAAC,QAAA,EAAK,WAAU,0IACb,UAAA,KAAK,YACJ;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,KAAK,cAAc,KAAK,WAAW,EAAE;AAAA,YACrC,KAAI;AAAA,YACJ,WAAU;AAAA,UAAA;AAAA,QAAA,wBAGX,OAAA,EAAM,eAAY,QAAO,WAAU,UAAS,aAAa,KAAA,CAAM,GAEpE;AAAA,QACA,qBAAC,QAAA,EAAK,WAAU,iCACd,UAAA;AAAA,UAAA,qBAAC,QAAA,EAAK,WAAU,+CACd,UAAA;AAAA,YAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,eAAY;AAAA,gBACZ,WAAU;AAAA,gBAET,UAAA,KAAK;AAAA,cAAA;AAAA,YAAA;AAAA,YAER,oBAAC,gBAAA,EAAe,WAAW,KAAK,UAAA,CAAW;AAAA,YAC1C,CAAC,KAAK,YAAY,oBAAC,iBAAA,CAAA,CAAgB;AAAA,UAAA,GACtC;AAAA,UACA,oBAAC,QAAA,EAAK,WAAU,wDACb,eAAK,MACR;AAAA,UACA,oBAAC,QAAA,EAAK,WAAU,WAAU,UAAA,uBAAA,CAAoB;AAAA,QAAA,GAChD;AAAA,QACA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,eAAY;AAAA,YACZ,WAAU;AAAA,UAAA;AAAA,QAAA;AAAA,MACZ;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/esm/modules/communityTools/ui/CommunityPage.d.ts

@@ -0,0 +1,12 @@
+import { FeedSort, SortDir } from '@igstack/app-catalog-shared-core';
+export interface CommunityPageProps {
+    /** `?tag=`: `<kind>:<value>`, or none for the whole feed. */
+    tag: string | undefined;
+    sort: FeedSort;
+    dir: SortDir;
+    onTagChange: (tag: string | undefined) => void;
+    onSortChange: (sort: FeedSort, dir: SortDir) => void;
+    /** The tool whose card is open over the page (`/community/<slug>`). */
+    cardSlug?: string;
+}
+export declare function CommunityPage({ tag, sort, dir, onTagChange, onSortChange, cardSlug, }: CommunityPageProps): import("react/jsx-runtime").JSX.Element;