@igstack/app-catalog-frontend-core 0.0.1

package/dist/esm/modules/appCatalog/ui/components/AccessRequestSection.js

@@ -0,0 +1,257 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { ExternalLink, Check, Copy, Settings, Users, Bot } from "lucide-react";
+import { useCallback, useState, useRef, useEffect } from "react";
+import ReactMarkdown from "react-markdown";
+import { Badge } from "../../../../ui/badge.js";
+import { Button } from "../../../../ui/button.js";
+import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "../../../../ui/accordion.js";
+import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from "../../../../ui/table.js";
+const COPY_FEEDBACK_DURATION = 2e3;
+const MarkdownLink = ({
+  href,
+  children
+}) => /* @__PURE__ */ jsx(
+  "a",
+  {
+    href,
+    target: "_blank",
+    rel: "noopener noreferrer",
+    className: "text-primary hover:underline",
+    children
+  }
+);
+function getApprovalMethodIcon(type) {
+  switch (type) {
+    case "service":
+      return /* @__PURE__ */ jsx(Bot, { className: "size-5 text-primary" });
+    case "personTeam":
+      return /* @__PURE__ */ jsx(Users, { className: "size-5 text-primary" });
+    case "custom":
+      return /* @__PURE__ */ jsx(Settings, { className: "size-5 text-primary" });
+  }
+}
+function useCopyToClipboard() {
+  const [copiedId, setCopiedId] = useState(null);
+  const [error, setError] = useState(null);
+  const timeoutRef = useRef(null);
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+  const copyToClipboard = useCallback(async (text, id) => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopiedId(id);
+      setError(null);
+      timeoutRef.current = setTimeout(() => {
+        setCopiedId(null);
+      }, COPY_FEEDBACK_DURATION);
+    } catch (err) {
+      console.error("Failed to copy to clipboard:", err);
+      setError("Failed to copy");
+      timeoutRef.current = setTimeout(() => {
+        setError(null);
+      }, COPY_FEEDBACK_DURATION);
+    }
+  }, []);
+  return { copiedId, error, copyToClipboard };
+}
+function CopyButton({
+  onCopy,
+  isCopied,
+  ariaLabel,
+  className
+}) {
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      type: "button",
+      variant: "ghost",
+      size: "sm",
+      onClick: onCopy,
+      className,
+      "aria-label": ariaLabel,
+      title: isCopied ? "Copied!" : "Copy to clipboard",
+      children: isCopied ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Check, { className: "h-3.5 w-3.5 text-green-600" }),
+        /* @__PURE__ */ jsx("span", { className: "sr-only", role: "status", "aria-live": "polite", children: "Copied to clipboard" })
+      ] }) : /* @__PURE__ */ jsx(Copy, { className: "h-3.5 w-3.5" })
+    }
+  );
+}
+function AccessRequestSection({
+  app,
+  approvalMethods
+}) {
+  const { copiedId, copyToClipboard } = useCopyToClipboard();
+  const accessRequest = app.accessRequest;
+  const approvalMethod = approvalMethods.find(
+    (m) => m.slug === (accessRequest == null ? void 0 : accessRequest.approvalMethodId)
+  );
+  const handleCopyPrompt = useCallback(() => {
+    if (accessRequest == null ? void 0 : accessRequest.requestPrompt) {
+      copyToClipboard(accessRequest.requestPrompt, "prompt");
+    }
+  }, [accessRequest == null ? void 0 : accessRequest.requestPrompt, copyToClipboard]);
+  const handleCopyApproverEmail = useCallback(
+    (email, index) => {
+      copyToClipboard(email, `approver-${index}`);
+    },
+    [copyToClipboard]
+  );
+  if (!accessRequest) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "mt-6 space-y-4", children: [
+    /* @__PURE__ */ jsx("h3", { className: "text-sm font-medium", children: "Access Request" }),
+    approvalMethod && approvalMethod.type !== "custom" && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: approvalMethod.type === "service" && approvalMethod.config.url ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(
+        "a",
+        {
+          href: approvalMethod.config.url,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          className: "flex items-center gap-2 hover:text-primary transition-colors",
+          title: approvalMethod.config.url,
+          children: [
+            /* @__PURE__ */ jsx("div", { children: getApprovalMethodIcon(approvalMethod.type) }),
+            /* @__PURE__ */ jsx("div", { className: "font-medium", children: approvalMethod.displayName })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "a",
+        {
+          href: approvalMethod.config.url,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          className: "text-muted-foreground hover:text-primary",
+          title: approvalMethod.config.url,
+          children: /* @__PURE__ */ jsx(ExternalLink, { className: "size-4" })
+        }
+      )
+    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("div", { children: getApprovalMethodIcon(approvalMethod.type) }),
+      /* @__PURE__ */ jsx("div", { className: "font-medium", children: approvalMethod.displayName })
+    ] }) }),
+    accessRequest.requestPrompt && /* @__PURE__ */ jsxs("div", { className: "text-sm inline-flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx("span", { className: "whitespace-nowrap shrink-0", children: "Request Prompt:" }),
+      /* @__PURE__ */ jsx("span", { className: "prose prose-sm inline [&>*]:inline [&>*]:m-0", children: /* @__PURE__ */ jsx(ReactMarkdown, { components: { a: MarkdownLink }, children: accessRequest.requestPrompt }) }),
+      /* @__PURE__ */ jsx(
+        CopyButton,
+        {
+          onCopy: handleCopyPrompt,
+          isCopied: copiedId === "prompt",
+          ariaLabel: "Copy request prompt",
+          className: "h-6 w-6 p-0 shrink-0"
+        }
+      )
+    ] }),
+    accessRequest.comments && /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground prose prose-sm max-w-none", children: /* @__PURE__ */ jsx(ReactMarkdown, { components: { a: MarkdownLink }, children: accessRequest.comments }) }),
+    accessRequest.roles && accessRequest.roles.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("h4", { className: "mb-2 text-sm font-medium", children: "Available Roles" }),
+      /* @__PURE__ */ jsx("div", { className: "rounded-lg border", children: /* @__PURE__ */ jsxs(Table, { children: [
+        /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
+          /* @__PURE__ */ jsx(TableHead, { className: "w-[180px]", children: "Role" }),
+          /* @__PURE__ */ jsx(TableHead, { children: "Description" })
+        ] }) }),
+        /* @__PURE__ */ jsx(TableBody, { children: accessRequest.roles.map((role, idx) => /* @__PURE__ */ jsxs(TableRow, { children: [
+          /* @__PURE__ */ jsx(TableCell, { className: "font-medium", children: role.displayName }),
+          /* @__PURE__ */ jsxs(TableCell, { className: "text-sm text-muted-foreground", children: [
+            role.description || "—",
+            role.adminNotes && /* @__PURE__ */ jsxs("div", { className: "mt-1 text-xs italic text-muted-foreground/80", children: [
+              "Note: ",
+              role.adminNotes
+            ] })
+          ] })
+        ] }, `${role.displayName}-${idx}`)) })
+      ] }) })
+    ] }),
+    accessRequest.approvers && accessRequest.approvers.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("h4", { className: "mb-2 text-sm font-medium", children: "Approvers" }),
+      /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: accessRequest.approvers.map((approver, idx) => {
+        const approverId = `approver-${idx}`;
+        const isCopied = copiedId === approverId;
+        return /* @__PURE__ */ jsxs(
+          Badge,
+          {
+            variant: "outline",
+            className: "font-normal inline-flex items-center gap-1",
+            children: [
+              approver.displayName,
+              approver.contact && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsxs("span", { className: "text-xs opacity-70", children: [
+                  "(",
+                  approver.contact,
+                  ")"
+                ] }),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      handleCopyApproverEmail(approver.contact, idx);
+                    },
+                    className: "inline-flex items-center justify-center hover:bg-accent rounded p-0.5 transition-colors focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1",
+                    "aria-label": `Copy ${approver.displayName}'s email`,
+                    title: isCopied ? "Copied!" : "Copy email",
+                    children: isCopied ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                      /* @__PURE__ */ jsx(Check, { className: "h-3 w-3 text-green-600" }),
+                      /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          className: "sr-only",
+                          role: "status",
+                          "aria-live": "polite",
+                          children: "Email copied to clipboard"
+                        }
+                      )
+                    ] }) : /* @__PURE__ */ jsx(Copy, { className: "h-3 w-3 opacity-50 hover:opacity-100" })
+                  }
+                )
+              ] })
+            ]
+          },
+          `${approver.displayName}-${idx}`
+        );
+      }) })
+    ] }),
+    accessRequest.urls && accessRequest.urls.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("h4", { className: "mb-2 text-sm font-medium", children: "Documentation" }),
+      /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1.5", children: accessRequest.urls.map((urlObj, idx) => /* @__PURE__ */ jsxs(
+        "a",
+        {
+          href: urlObj.url,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          className: "text-sm text-muted-foreground hover:text-primary inline-flex items-center gap-1.5",
+          children: [
+            urlObj.label || urlObj.url,
+            /* @__PURE__ */ jsx(ExternalLink, { className: "size-3" })
+          ]
+        },
+        `${urlObj.url}-${idx}`
+      )) })
+    ] }),
+    accessRequest.postApprovalInstructions && /* @__PURE__ */ jsx(Accordion, { type: "single", collapsible: true, children: /* @__PURE__ */ jsxs(
+      AccordionItem,
+      {
+        value: "post-approval",
+        className: "border rounded-lg px-4",
+        children: [
+          /* @__PURE__ */ jsx(AccordionTrigger, { className: "text-sm hover:no-underline py-3", children: "Post-Approval Instructions" }),
+          /* @__PURE__ */ jsx(AccordionContent, { className: "pb-3", children: /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground prose prose-sm max-w-none", children: /* @__PURE__ */ jsx(ReactMarkdown, { components: { a: MarkdownLink }, children: accessRequest.postApprovalInstructions }) }) })
+        ]
+      }
+    ) })
+  ] });
+}
+export {
+  AccessRequestSection
+};
+//# sourceMappingURL=AccessRequestSection.js.map

package/dist/esm/modules/appCatalog/ui/components/AccessRequestSection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccessRequestSection.js","sources":["../../../../../../src/modules/appCatalog/ui/components/AccessRequestSection.tsx"],"sourcesContent":["import type { AppApprovalMethod, AppForCatalog } from '@igstack/app-catalog-backend-core'\nimport { Bot, Check, Copy, ExternalLink, Settings, Users } from 'lucide-react'\nimport { useCallback, useEffect, useRef, useState } from 'react'\nimport ReactMarkdown from 'react-markdown'\nimport { Badge } from '~/ui/badge'\nimport { Button } from '~/ui/button'\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from '~/ui/accordion'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '~/ui/table'\n\n// Constants\nconst COPY_FEEDBACK_DURATION = 2000\n\ninterface AccessRequestSectionProps {\n  app: AppForCatalog\n  approvalMethods: Array<AppApprovalMethod>\n}\n\n// Component for rendering markdown links with security attributes\nconst MarkdownLink = ({\n  href,\n  children,\n}: {\n  href?: string\n  children?: React.ReactNode\n}) => (\n  <a\n    href={href}\n    target=\"_blank\"\n    rel=\"noopener noreferrer\"\n    className=\"text-primary hover:underline\"\n  >\n    {children}\n  </a>\n)\n\n// Helper function for approval method icons\nfunction getApprovalMethodIcon(type: 'service' | 'personTeam' | 'custom') {\n  switch (type) {\n    case 'service':\n      return <Bot className=\"size-5 text-primary\" />\n    case 'personTeam':\n      return <Users className=\"size-5 text-primary\" />\n    case 'custom':\n      return <Settings className=\"size-5 text-primary\" />\n  }\n}\n\n/**\n * Custom hook for handling copy-to-clipboard functionality with feedback\n * Includes proper cleanup to prevent memory leaks\n */\nfunction useCopyToClipboard() {\n  const [copiedId, setCopiedId] = useState<string | null>(null)\n  const [error, setError] = useState<string | null>(null)\n  const timeoutRef = useRef<NodeJS.Timeout | null>(null)\n\n  // Cleanup timeout on unmount\n  useEffect(() => {\n    return () => {\n      if (timeoutRef.current) {\n        clearTimeout(timeoutRef.current)\n      }\n    }\n  }, [])\n\n  const copyToClipboard = useCallback(async (text: string, id: string) => {\n    // Clear existing timeout\n    if (timeoutRef.current) {\n      clearTimeout(timeoutRef.current)\n    }\n\n    try {\n      await navigator.clipboard.writeText(text)\n      setCopiedId(id)\n      setError(null)\n\n      // Set new timeout with cleanup\n      timeoutRef.current = setTimeout(() => {\n        setCopiedId(null)\n      }, COPY_FEEDBACK_DURATION)\n    } catch (err) {\n      console.error('Failed to copy to clipboard:', err)\n      setError('Failed to copy')\n\n      // Clear error after duration\n      timeoutRef.current = setTimeout(() => {\n        setError(null)\n      }, COPY_FEEDBACK_DURATION)\n    }\n  }, [])\n\n  return { copiedId, error, copyToClipboard }\n}\n\n/**\n * Reusable copy button component with accessibility\n */\ninterface CopyButtonProps {\n  onCopy: () => void\n  isCopied: boolean\n  ariaLabel: string\n  className?: string\n}\n\nfunction CopyButton({\n  onCopy,\n  isCopied,\n  ariaLabel,\n  className,\n}: CopyButtonProps) {\n  return (\n    <Button\n      type=\"button\"\n      variant=\"ghost\"\n      size=\"sm\"\n      onClick={onCopy}\n      className={className}\n      aria-label={ariaLabel}\n      title={isCopied ? 'Copied!' : 'Copy to clipboard'}\n    >\n      {isCopied ? (\n        <>\n          <Check className=\"h-3.5 w-3.5 text-green-600\" />\n          <span className=\"sr-only\" role=\"status\" aria-live=\"polite\">\n            Copied to clipboard\n          </span>\n        </>\n      ) : (\n        <Copy className=\"h-3.5 w-3.5\" />\n      )}\n    </Button>\n  )\n}\n\nexport function AccessRequestSection({\n  app,\n  approvalMethods,\n}: AccessRequestSectionProps) {\n  const { copiedId, copyToClipboard } = useCopyToClipboard()\n  const accessRequest = app.accessRequest\n  const approvalMethod = approvalMethods.find(\n    (m) => m.slug === accessRequest?.approvalMethodId,\n  )\n\n  const handleCopyPrompt = useCallback(() => {\n    if (accessRequest?.requestPrompt) {\n      copyToClipboard(accessRequest.requestPrompt, 'prompt')\n    }\n  }, [accessRequest?.requestPrompt, copyToClipboard])\n\n  const handleCopyApproverEmail = useCallback(\n    (email: string, index: number) => {\n      copyToClipboard(email, `approver-${index}`)\n    },\n    [copyToClipboard],\n  )\n\n  // Early return if no access request\n  if (!accessRequest) return null\n\n  return (\n    <div className=\"mt-6 space-y-4\">\n      <h3 className=\"text-sm font-medium\">Access Request</h3>\n\n      {/* Approval Method */}\n      {approvalMethod && approvalMethod.type !== 'custom' && (\n        <div className=\"flex items-center gap-2\">\n          {approvalMethod.type === 'service' && approvalMethod.config.url ? (\n            <>\n              <a\n                href={approvalMethod.config.url}\n                target=\"_blank\"\n                rel=\"noopener noreferrer\"\n                className=\"flex items-center gap-2 hover:text-primary transition-colors\"\n                title={approvalMethod.config.url}\n              >\n                <div>{getApprovalMethodIcon(approvalMethod.type)}</div>\n                <div className=\"font-medium\">{approvalMethod.displayName}</div>\n              </a>\n              <a\n                href={approvalMethod.config.url}\n                target=\"_blank\"\n                rel=\"noopener noreferrer\"\n                className=\"text-muted-foreground hover:text-primary\"\n                title={approvalMethod.config.url}\n              >\n                <ExternalLink className=\"size-4\" />\n              </a>\n            </>\n          ) : (\n            <>\n              <div>{getApprovalMethodIcon(approvalMethod.type)}</div>\n              <div className=\"font-medium\">{approvalMethod.displayName}</div>\n            </>\n          )}\n        </div>\n      )}\n\n      {/* Request Prompt - Inline */}\n      {accessRequest.requestPrompt && (\n        <div className=\"text-sm inline-flex items-center gap-2\">\n          <span className=\"whitespace-nowrap shrink-0\">Request Prompt:</span>\n          <span className=\"prose prose-sm inline [&>*]:inline [&>*]:m-0\">\n            <ReactMarkdown components={{ a: MarkdownLink }}>\n              {accessRequest.requestPrompt}\n            </ReactMarkdown>\n          </span>\n          <CopyButton\n            onCopy={handleCopyPrompt}\n            isCopied={copiedId === 'prompt'}\n            ariaLabel=\"Copy request prompt\"\n            className=\"h-6 w-6 p-0 shrink-0\"\n          />\n        </div>\n      )}\n\n      {/* Comments */}\n      {accessRequest.comments && (\n        <div className=\"text-sm text-muted-foreground prose prose-sm max-w-none\">\n          <ReactMarkdown components={{ a: MarkdownLink }}>\n            {accessRequest.comments}\n          </ReactMarkdown>\n        </div>\n      )}\n\n      {/* Roles Table */}\n      {accessRequest.roles && accessRequest.roles.length > 0 && (\n        <div>\n          <h4 className=\"mb-2 text-sm font-medium\">Available Roles</h4>\n          <div className=\"rounded-lg border\">\n            <Table>\n              <TableHeader>\n                <TableRow>\n                  <TableHead className=\"w-[180px]\">Role</TableHead>\n                  <TableHead>Description</TableHead>\n                </TableRow>\n              </TableHeader>\n              <TableBody>\n                {accessRequest.roles.map((role, idx) => (\n                  <TableRow key={`${role.displayName}-${idx}`}>\n                    <TableCell className=\"font-medium\">\n                      {role.displayName}\n                    </TableCell>\n                    <TableCell className=\"text-sm text-muted-foreground\">\n                      {role.description || '—'}\n                      {role.adminNotes && (\n                        <div className=\"mt-1 text-xs italic text-muted-foreground/80\">\n                          Note: {role.adminNotes}\n                        </div>\n                      )}\n                    </TableCell>\n                  </TableRow>\n                ))}\n              </TableBody>\n            </Table>\n          </div>\n        </div>\n      )}\n\n      {/* Approvers */}\n      {accessRequest.approvers && accessRequest.approvers.length > 0 && (\n        <div>\n          <h4 className=\"mb-2 text-sm font-medium\">Approvers</h4>\n          <div className=\"flex flex-wrap gap-2\">\n            {accessRequest.approvers.map((approver, idx) => {\n              const approverId = `approver-${idx}`\n              const isCopied = copiedId === approverId\n\n              return (\n                <Badge\n                  key={`${approver.displayName}-${idx}`}\n                  variant=\"outline\"\n                  className=\"font-normal inline-flex items-center gap-1\"\n                >\n                  {approver.displayName}\n                  {approver.contact && (\n                    <>\n                      <span className=\"text-xs opacity-70\">\n                        ({approver.contact})\n                      </span>\n                      <button\n                        type=\"button\"\n                        onClick={(e) => {\n                          e.stopPropagation()\n                          handleCopyApproverEmail(approver.contact!, idx)\n                        }}\n                        className=\"inline-flex items-center justify-center hover:bg-accent rounded p-0.5 transition-colors focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1\"\n                        aria-label={`Copy ${approver.displayName}'s email`}\n                        title={isCopied ? 'Copied!' : 'Copy email'}\n                      >\n                        {isCopied ? (\n                          <>\n                            <Check className=\"h-3 w-3 text-green-600\" />\n                            <span\n                              className=\"sr-only\"\n                              role=\"status\"\n                              aria-live=\"polite\"\n                            >\n                              Email copied to clipboard\n                            </span>\n                          </>\n                        ) : (\n                          <Copy className=\"h-3 w-3 opacity-50 hover:opacity-100\" />\n                        )}\n                      </button>\n                    </>\n                  )}\n                </Badge>\n              )\n            })}\n          </div>\n        </div>\n      )}\n\n      {/* Documentation URLs */}\n      {accessRequest.urls && accessRequest.urls.length > 0 && (\n        <div>\n          <h4 className=\"mb-2 text-sm font-medium\">Documentation</h4>\n          <div className=\"flex flex-col gap-1.5\">\n            {accessRequest.urls.map((urlObj, idx) => (\n              <a\n                key={`${urlObj.url}-${idx}`}\n                href={urlObj.url}\n                target=\"_blank\"\n                rel=\"noopener noreferrer\"\n                className=\"text-sm text-muted-foreground hover:text-primary inline-flex items-center gap-1.5\"\n              >\n                {urlObj.label || urlObj.url}\n                <ExternalLink className=\"size-3\" />\n              </a>\n            ))}\n          </div>\n        </div>\n      )}\n\n      {/* Post-Approval Instructions - Collapsible (secondary info) */}\n      {accessRequest.postApprovalInstructions && (\n        <Accordion type=\"single\" collapsible>\n          <AccordionItem\n            value=\"post-approval\"\n            className=\"border rounded-lg px-4\"\n          >\n            <AccordionTrigger className=\"text-sm hover:no-underline py-3\">\n              Post-Approval Instructions\n            </AccordionTrigger>\n            <AccordionContent className=\"pb-3\">\n              <div className=\"text-sm text-muted-foreground prose prose-sm max-w-none\">\n                <ReactMarkdown components={{ a: MarkdownLink }}>\n                  {accessRequest.postApprovalInstructions}\n                </ReactMarkdown>\n              </div>\n            </AccordionContent>\n          </AccordionItem>\n        </Accordion>\n      )}\n    </div>\n  )\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/modules/appCatalog/ui/components/AppDetailModal.d.ts

@@ -0,0 +1,7 @@
+import { AppForCatalog } from '@igstack/app-catalog-backend-core';
+export interface AppDetailModalProps {
+    app: AppForCatalog;
+    isOpen: boolean;
+    onClose: () => void;
+}
+export declare function AppDetailModal({ app, isOpen, onClose }: AppDetailModalProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/esm/modules/appCatalog/ui/components/ApproverDisplay.d.ts

@@ -0,0 +1,30 @@
+import { AppRole } from '@igstack/app-catalog-backend-core';
+type ApproverBase = {
+    comment?: string;
+    roles?: Array<AppRole>;
+    approvalPolicy?: string;
+    postApprovalInstructions?: string;
+    seeMoreUrls?: Array<string>;
+};
+type BotApprover = ApproverBase & {
+    type: 'bot';
+    url?: string;
+    prompt?: string;
+};
+type TicketApprover = ApproverBase & {
+    type: 'ticket';
+    url?: string;
+    requestFormTemplate?: string;
+};
+type PersonApprover = ApproverBase & {
+    type: 'person';
+    email?: string;
+    url?: string;
+    description?: string;
+};
+type Approver = BotApprover | TicketApprover | PersonApprover;
+interface ApproverDisplayProps {
+    approver: Approver;
+}
+export declare function ApproverDisplay({ approver }: ApproverDisplayProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/modules/appCatalog/ui/components/GroupingColumn.d.ts

@@ -0,0 +1,11 @@
+export interface GroupingColumnProps {
+    className?: string;
+}
+export interface FilterItem {
+    displayName: string;
+    tag: string;
+}
+export declare function GroupingColumn(props: GroupingColumnProps): import("react/jsx-runtime").JSX.Element;
+export interface MiniCardProps {
+    children?: React.ReactNode;
+}

package/dist/esm/modules/appCatalog/ui/components/GroupingTabs.d.ts

@@ -0,0 +1,7 @@
+export interface GroupingTabsProps {
+    className?: string;
+}
+export declare function GroupingTabs(props: GroupingTabsProps): import("react/jsx-runtime").JSX.Element;
+export interface MiniCardProps {
+    children?: React.ReactNode;
+}

package/dist/esm/modules/appCatalog/ui/components/ScreenshotGallery.d.ts

@@ -0,0 +1,10 @@
+import { AppForCatalog } from '@igstack/app-catalog-backend-core';
+export interface ScreenshotGalleryProps {
+    app: AppForCatalog;
+    screenshotIds: Array<string>;
+    initialIndex?: number;
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    title?: string;
+}
+export declare function ScreenshotGallery({ app, screenshotIds, initialIndex, open, onOpenChange, title, }: ScreenshotGalleryProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/esm/modules/appCatalog/ui/components/ScreenshotGallery.js

@@ -0,0 +1,35 @@
+import { jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { Gallery } from "../../../gallery/Gallery.js";
+import { Dialog, DialogContent } from "../../../../ui/dialog.js";
+function ScreenshotGallery({
+  app,
+  screenshotIds,
+  initialIndex = 0,
+  open,
+  onOpenChange,
+  title
+}) {
+  const images = useMemo(
+    () => screenshotIds.map((id) => ({
+      url: `/api/screenshots/${id}`,
+      alt: `${app.displayName} screenshot`
+    })),
+    [screenshotIds, app.displayName]
+  );
+  if (screenshotIds.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsx(
+    DialogContent,
+    {
+      className: "h-[85vh] w-full max-w-[calc(100vw-2rem)] sm:max-w-[calc(100vw-3rem)] md:max-w-[calc(100vw-4rem)] p-0 overflow-hidden",
+      showCloseButton: true,
+      children: /* @__PURE__ */ jsx(Gallery, { images, initialIndex, title })
+    }
+  ) });
+}
+export {
+  ScreenshotGallery
+};
+//# sourceMappingURL=ScreenshotGallery.js.map

package/dist/esm/modules/appCatalog/ui/components/ScreenshotGallery.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScreenshotGallery.js","sources":["../../../../../../src/modules/appCatalog/ui/components/ScreenshotGallery.tsx"],"sourcesContent":["import { useMemo } from 'react'\n\nimport type { AppForCatalog } from '@igstack/app-catalog-backend-core'\n\nimport { Gallery } from '~/modules/gallery/Gallery'\nimport type { GalleryImage } from '~/modules/gallery/Gallery'\nimport { Dialog, DialogContent } from '~/ui/dialog'\n\nexport interface ScreenshotGalleryProps {\n  app: AppForCatalog\n  screenshotIds: Array<string>\n  initialIndex?: number\n  open: boolean\n  onOpenChange: (open: boolean) => void\n  title?: string\n}\n\nexport function ScreenshotGallery({\n  app,\n  screenshotIds,\n  initialIndex = 0,\n  open,\n  onOpenChange,\n  title,\n}: ScreenshotGalleryProps) {\n  // Transform screenshot IDs to full URLs\n  const images: Array<GalleryImage> = useMemo(\n    () =>\n      screenshotIds.map((id) => ({\n        url: `/api/screenshots/${id}`,\n        alt: `${app.displayName} screenshot`,\n      })),\n    [screenshotIds, app.displayName],\n  )\n\n  // Don't render if no screenshots\n  if (screenshotIds.length === 0) {\n    return null\n  }\n\n  return (\n    <Dialog open={open} onOpenChange={onOpenChange}>\n      <DialogContent\n        className=\"h-[85vh] w-full max-w-[calc(100vw-2rem)] sm:max-w-[calc(100vw-3rem)] md:max-w-[calc(100vw-4rem)] p-0 overflow-hidden\"\n        showCloseButton={true}\n      >\n        <Gallery images={images} initialIndex={initialIndex} title={title} />\n      </DialogContent>\n    </Dialog>\n  )\n}\n"],"names":[],"mappings":";;;;AAiBO,SAAS,kBAAkB;AAAA,EAChC;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA;AACF,GAA2B;AAEzB,QAAM,SAA8B;AAAA,IAClC,MACE,cAAc,IAAI,CAAC,QAAQ;AAAA,MACzB,KAAK,oBAAoB,EAAE;AAAA,MAC3B,KAAK,GAAG,IAAI,WAAW;AAAA,IAAA,EACvB;AAAA,IACJ,CAAC,eAAe,IAAI,WAAW;AAAA,EAAA;AAIjC,MAAI,cAAc,WAAW,GAAG;AAC9B,WAAO;AAAA,EACT;AAEA,SACE,oBAAC,QAAA,EAAO,MAAY,cAClB,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,iBAAiB;AAAA,MAEjB,UAAA,oBAAC,SAAA,EAAQ,QAAgB,cAA4B,MAAA,CAAc;AAAA,IAAA;AAAA,EAAA,GAEvE;AAEJ;"}

package/dist/esm/modules/appCatalog/ui/grid/AppCatalogFiltersCard.d.ts

@@ -0,0 +1,9 @@
+export type AppCatalogScopeFilter = 'apps' | 'appsAndPages';
+export type AppCatalogDisplayMode = 'card' | 'grid';
+export interface AppCatalogFiltersCardProps {
+    scopeFilter: AppCatalogScopeFilter;
+    onScopeFilterChange: (value: AppCatalogScopeFilter) => void;
+    displayMode: AppCatalogDisplayMode;
+    onDisplayModeChange: (value: AppCatalogDisplayMode) => void;
+}
+export declare function AppCatalogFiltersCard({ scopeFilter, onScopeFilterChange, displayMode, onDisplayModeChange, }: AppCatalogFiltersCardProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/modules/appCatalog/ui/grid/AppCatalogGrid.d.ts

@@ -0,0 +1,8 @@
+import { AppForCatalog, GroupingTagDefinition } from '@igstack/app-catalog-backend-core';
+export interface AppCatalogGridProps {
+    apps: Array<AppForCatalog>;
+    selectedAppSlug?: string;
+    groupingDefinition?: GroupingTagDefinition;
+    onAppClick?: (app: AppForCatalog) => void;
+}
+export declare function AppCatalogGrid({ apps, selectedAppSlug, groupingDefinition, onAppClick, }: AppCatalogGridProps): import("react/jsx-runtime").JSX.Element;