@igstack/app-catalog-frontend-core 0.18.5 → 0.18.6-alpha-20260909190541

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

@@ -85,6 +85,9 @@ function PersonOrGroupBadge({ slug }) {
   if (!group) {
     return /* @__PURE__ */ jsx(Badge, { variant: "outline", className: "font-normal", title: slug, children: slug });
   }
+  if (!group.email && group.memberSlugs.length > 0) {
+    return /* @__PURE__ */ jsx("span", { className: "inline-flex flex-wrap gap-1", children: group.memberSlugs.map((memberSlug) => /* @__PURE__ */ jsx(PersonOrGroupBadge, { slug: memberSlug }, memberSlug)) });
+  }
   return /* @__PURE__ */ jsx(GroupBadge, { group });
 }
 function GroupBadge({ group }) {

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

@@ -1 +1 @@
-{"version":3,"file":"PersonBadge.js","sources":["../../../../../../src/modules/appCatalog/ui/components/PersonBadge.tsx"],"sourcesContent":["import type { Group } from '@igstack/app-catalog-backend-core'\nimport { Check, Copy, Mail, User, Users } from 'lucide-react'\nimport { useCallback, useEffect, useRef, useState } from 'react'\nimport { Badge } from '~/ui/badge'\nimport { Popover, PopoverContent, PopoverTrigger } from '~/ui/popover'\nimport { useAppCatalogContext } from '~/modules/appCatalog'\nimport {\n  getGroupBySlug,\n  getPersonBySlug,\n} from '~/modules/appCatalog/utils/resolveHelpers'\n\ninterface PersonBadgeProps {\n  slug: string\n}\n\n/**\n * Person chip. Clicking it opens a small popover exposing BOTH the full name\n * and the email, each with its own copy button — so the user picks what to copy\n * (previously a single button copied only the email). Email also links to\n * mailto:. Falls back to just the name (no popover) when no email is known.\n */\nexport function PersonBadge({ slug }: PersonBadgeProps) {\n  const { persons } = useAppCatalogContext()\n  const person = getPersonBySlug(persons, slug)\n\n  const displayName = person\n    ? `${person.firstName} ${person.lastName}`.trim() || slug\n    : slug\n  const email = person?.email\n\n  // No email → nothing to pick between; render a plain, non-interactive chip.\n  if (!email) {\n    return (\n      <Badge\n        variant=\"outline\"\n        className=\"font-normal inline-flex items-center gap-1\"\n        title={displayName}\n      >\n        <User className=\"size-3\" />\n        {displayName}\n      </Badge>\n    )\n  }\n\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <button\n          type=\"button\"\n          className=\"inline-flex\"\n          title={`${displayName} · ${email}`}\n        >\n          <Badge\n            variant=\"outline\"\n            className=\"font-normal inline-flex items-center gap-1 cursor-pointer hover:border-primary transition-colors\"\n          >\n            <User className=\"size-3\" />\n            {displayName}\n            <Copy className=\"size-3 opacity-50\" />\n          </Badge>\n        </button>\n      </PopoverTrigger>\n      <PopoverContent align=\"start\" className=\"w-64 p-2\">\n        <CopyRow\n          icon={<User className=\"size-3.5\" />}\n          label=\"Name\"\n          value={displayName}\n        />\n        <CopyRow\n          icon={<Mail className=\"size-3.5\" />}\n          label=\"Email\"\n          value={email}\n          href={`mailto:${email}`}\n        />\n      </PopoverContent>\n    </Popover>\n  )\n}\n\n/**\n * Chip for a slug that may name EITHER a Person or a Group (owner, approvers).\n * Resolves against both collections; falls back to the raw slug so an unknown\n * slug is still visible rather than silently dropped.\n */\nexport function PersonOrGroupBadge({ slug }: PersonBadgeProps) {\n  const { persons, groups } = useAppCatalogContext()\n\n  if (getPersonBySlug(persons, slug)) return <PersonBadge slug={slug} />\n\n  const group = getGroupBySlug(groups, slug)\n  if (!group) {\n    return (\n      <Badge variant=\"outline\" className=\"font-normal\" title={slug}>\n        {slug}\n      </Badge>\n    )\n  }\n  return <GroupBadge group={group} />\n}\n\n/** Group chip: name, optional email, and the member names in a popover. */\nfunction GroupBadge({ group }: { group: Group }) {\n  const { persons } = useAppCatalogContext()\n  const memberNames = group.memberSlugs.map((s) => {\n    const p = getPersonBySlug(persons, s)\n    return p ? `${p.firstName} ${p.lastName}`.trim() || s : s\n  })\n  // Many groups (e.g. aws-maintainers-*) have no real displayName set — it's\n  // just their slug. Show the member names directly instead of the opaque\n  // slug so approvers stay recognizable at a glance, without a popover click.\n  const hasRealDisplayName =\n    group.displayName && group.displayName !== group.slug\n  const displayName = hasRealDisplayName\n    ? group.displayName!\n    : memberNames.length > 0\n      ? memberNames.join(', ')\n      : group.slug\n\n  if (!group.email && memberNames.length === 0) {\n    return (\n      <Badge\n        variant=\"outline\"\n        className=\"font-normal inline-flex items-center gap-1\"\n        title={displayName}\n      >\n        <Users className=\"size-3\" />\n        {displayName}\n      </Badge>\n    )\n  }\n\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <button type=\"button\" className=\"inline-flex\" title={displayName}>\n          <Badge\n            variant=\"outline\"\n            className=\"font-normal inline-flex items-center gap-1 cursor-pointer hover:border-primary transition-colors\"\n          >\n            <Users className=\"size-3\" />\n            {displayName}\n            <Copy className=\"size-3 opacity-50\" />\n          </Badge>\n        </button>\n      </PopoverTrigger>\n      <PopoverContent align=\"start\" className=\"w-64 p-2\">\n        <CopyRow\n          icon={<Users className=\"size-3.5\" />}\n          label=\"Group\"\n          value={displayName}\n        />\n        {group.email && (\n          <CopyRow\n            icon={<Mail className=\"size-3.5\" />}\n            label=\"Email\"\n            value={group.email}\n            href={`mailto:${group.email}`}\n          />\n        )}\n        {memberNames.length > 0 && (\n          <div className=\"px-2 py-1.5\">\n            <span className=\"block text-[10px] uppercase tracking-wide text-muted-foreground\">\n              Members\n            </span>\n            <span className=\"block text-[13px]\">{memberNames.join(', ')}</span>\n          </div>\n        )}\n      </PopoverContent>\n    </Popover>\n  )\n}\n\n/** One copyable field (label + value + copy button), value optionally a link. */\nfunction CopyRow({\n  icon,\n  label,\n  value,\n  href,\n}: {\n  icon: React.ReactNode\n  label: string\n  value: string\n  href?: string\n}) {\n  const [copied, setCopied] = useState(false)\n  const timeoutRef = useRef<NodeJS.Timeout | null>(null)\n\n  useEffect(\n    () => () => {\n      if (timeoutRef.current) clearTimeout(timeoutRef.current)\n    },\n    [],\n  )\n\n  const handleCopy = useCallback(\n    (e: React.MouseEvent) => {\n      e.stopPropagation()\n      void navigator.clipboard.writeText(value)\n      setCopied(true)\n      if (timeoutRef.current) clearTimeout(timeoutRef.current)\n      timeoutRef.current = setTimeout(() => setCopied(false), 2000)\n    },\n    [value],\n  )\n\n  return (\n    <div className=\"flex items-center gap-2 rounded-md px-2 py-1.5 hover:bg-muted\">\n      <span className=\"text-muted-foreground shrink-0\">{icon}</span>\n      <span className=\"min-w-0 flex-1\">\n        <span className=\"block text-[10px] uppercase tracking-wide text-muted-foreground\">\n          {label}\n        </span>\n        {href ? (\n          <a\n            href={href}\n            className=\"block truncate text-[13px] text-primary hover:underline\"\n          >\n            {value}\n          </a>\n        ) : (\n          <span className=\"block truncate text-[13px]\">{value}</span>\n        )}\n      </span>\n      <button\n        type=\"button\"\n        onClick={handleCopy}\n        className=\"shrink-0 rounded p-1 text-muted-foreground hover:text-primary hover:bg-background transition-colors\"\n        title={copied ? 'Copied!' : `Copy ${label.toLowerCase()}`}\n        aria-label={`Copy ${label.toLowerCase()}`}\n      >\n        {copied ? (\n          <Check className=\"size-3.5 text-green-600\" />\n        ) : (\n          <Copy className=\"size-3.5\" />\n        )}\n      </button>\n    </div>\n  )\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"PersonBadge.js","sources":["../../../../../../src/modules/appCatalog/ui/components/PersonBadge.tsx"],"sourcesContent":["import type { Group } from '@igstack/app-catalog-backend-core'\nimport { Check, Copy, Mail, User, Users } from 'lucide-react'\nimport { useCallback, useEffect, useRef, useState } from 'react'\nimport { Badge } from '~/ui/badge'\nimport { Popover, PopoverContent, PopoverTrigger } from '~/ui/popover'\nimport { useAppCatalogContext } from '~/modules/appCatalog'\nimport {\n  getGroupBySlug,\n  getPersonBySlug,\n} from '~/modules/appCatalog/utils/resolveHelpers'\n\ninterface PersonBadgeProps {\n  slug: string\n}\n\n/**\n * Person chip. Clicking it opens a small popover exposing BOTH the full name\n * and the email, each with its own copy button — so the user picks what to copy\n * (previously a single button copied only the email). Email also links to\n * mailto:. Falls back to just the name (no popover) when no email is known.\n */\nexport function PersonBadge({ slug }: PersonBadgeProps) {\n  const { persons } = useAppCatalogContext()\n  const person = getPersonBySlug(persons, slug)\n\n  const displayName = person\n    ? `${person.firstName} ${person.lastName}`.trim() || slug\n    : slug\n  const email = person?.email\n\n  // No email → nothing to pick between; render a plain, non-interactive chip.\n  if (!email) {\n    return (\n      <Badge\n        variant=\"outline\"\n        className=\"font-normal inline-flex items-center gap-1\"\n        title={displayName}\n      >\n        <User className=\"size-3\" />\n        {displayName}\n      </Badge>\n    )\n  }\n\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <button\n          type=\"button\"\n          className=\"inline-flex\"\n          title={`${displayName} · ${email}`}\n        >\n          <Badge\n            variant=\"outline\"\n            className=\"font-normal inline-flex items-center gap-1 cursor-pointer hover:border-primary transition-colors\"\n          >\n            <User className=\"size-3\" />\n            {displayName}\n            <Copy className=\"size-3 opacity-50\" />\n          </Badge>\n        </button>\n      </PopoverTrigger>\n      <PopoverContent align=\"start\" className=\"w-64 p-2\">\n        <CopyRow\n          icon={<User className=\"size-3.5\" />}\n          label=\"Name\"\n          value={displayName}\n        />\n        <CopyRow\n          icon={<Mail className=\"size-3.5\" />}\n          label=\"Email\"\n          value={email}\n          href={`mailto:${email}`}\n        />\n      </PopoverContent>\n    </Popover>\n  )\n}\n\n/**\n * Chip for a slug that may name EITHER a Person or a Group (owner, approvers).\n * Resolves against both collections; falls back to the raw slug so an unknown\n * slug is still visible rather than silently dropped.\n */\nexport function PersonOrGroupBadge({ slug }: PersonBadgeProps) {\n  const { persons, groups } = useAppCatalogContext()\n\n  if (getPersonBySlug(persons, slug)) return <PersonBadge slug={slug} />\n\n  const group = getGroupBySlug(groups, slug)\n  if (!group) {\n    return (\n      <Badge variant=\"outline\" className=\"font-normal\" title={slug}>\n        {slug}\n      </Badge>\n    )\n  }\n\n  // No group email to copy → show each member as its own clickable/copyable\n  // chip instead of one opaque group chip.\n  if (!group.email && group.memberSlugs.length > 0) {\n    return (\n      <span className=\"inline-flex flex-wrap gap-1\">\n        {group.memberSlugs.map((memberSlug) => (\n          <PersonOrGroupBadge key={memberSlug} slug={memberSlug} />\n        ))}\n      </span>\n    )\n  }\n\n  return <GroupBadge group={group} />\n}\n\n/** Group chip: name, optional email, and the member names in a popover. */\nfunction GroupBadge({ group }: { group: Group }) {\n  const { persons } = useAppCatalogContext()\n  const memberNames = group.memberSlugs.map((s) => {\n    const p = getPersonBySlug(persons, s)\n    return p ? `${p.firstName} ${p.lastName}`.trim() || s : s\n  })\n  // Many groups (e.g. aws-maintainers-*) have no real displayName set — it's\n  // just their slug. Show the member names directly instead of the opaque\n  // slug so approvers stay recognizable at a glance, without a popover click.\n  const hasRealDisplayName =\n    group.displayName && group.displayName !== group.slug\n  const displayName = hasRealDisplayName\n    ? group.displayName!\n    : memberNames.length > 0\n      ? memberNames.join(', ')\n      : group.slug\n\n  if (!group.email && memberNames.length === 0) {\n    return (\n      <Badge\n        variant=\"outline\"\n        className=\"font-normal inline-flex items-center gap-1\"\n        title={displayName}\n      >\n        <Users className=\"size-3\" />\n        {displayName}\n      </Badge>\n    )\n  }\n\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <button type=\"button\" className=\"inline-flex\" title={displayName}>\n          <Badge\n            variant=\"outline\"\n            className=\"font-normal inline-flex items-center gap-1 cursor-pointer hover:border-primary transition-colors\"\n          >\n            <Users className=\"size-3\" />\n            {displayName}\n            <Copy className=\"size-3 opacity-50\" />\n          </Badge>\n        </button>\n      </PopoverTrigger>\n      <PopoverContent align=\"start\" className=\"w-64 p-2\">\n        <CopyRow\n          icon={<Users className=\"size-3.5\" />}\n          label=\"Group\"\n          value={displayName}\n        />\n        {group.email && (\n          <CopyRow\n            icon={<Mail className=\"size-3.5\" />}\n            label=\"Email\"\n            value={group.email}\n            href={`mailto:${group.email}`}\n          />\n        )}\n        {memberNames.length > 0 && (\n          <div className=\"px-2 py-1.5\">\n            <span className=\"block text-[10px] uppercase tracking-wide text-muted-foreground\">\n              Members\n            </span>\n            <span className=\"block text-[13px]\">{memberNames.join(', ')}</span>\n          </div>\n        )}\n      </PopoverContent>\n    </Popover>\n  )\n}\n\n/** One copyable field (label + value + copy button), value optionally a link. */\nfunction CopyRow({\n  icon,\n  label,\n  value,\n  href,\n}: {\n  icon: React.ReactNode\n  label: string\n  value: string\n  href?: string\n}) {\n  const [copied, setCopied] = useState(false)\n  const timeoutRef = useRef<NodeJS.Timeout | null>(null)\n\n  useEffect(\n    () => () => {\n      if (timeoutRef.current) clearTimeout(timeoutRef.current)\n    },\n    [],\n  )\n\n  const handleCopy = useCallback(\n    (e: React.MouseEvent) => {\n      e.stopPropagation()\n      void navigator.clipboard.writeText(value)\n      setCopied(true)\n      if (timeoutRef.current) clearTimeout(timeoutRef.current)\n      timeoutRef.current = setTimeout(() => setCopied(false), 2000)\n    },\n    [value],\n  )\n\n  return (\n    <div className=\"flex items-center gap-2 rounded-md px-2 py-1.5 hover:bg-muted\">\n      <span className=\"text-muted-foreground shrink-0\">{icon}</span>\n      <span className=\"min-w-0 flex-1\">\n        <span className=\"block text-[10px] uppercase tracking-wide text-muted-foreground\">\n          {label}\n        </span>\n        {href ? (\n          <a\n            href={href}\n            className=\"block truncate text-[13px] text-primary hover:underline\"\n          >\n            {value}\n          </a>\n        ) : (\n          <span className=\"block truncate text-[13px]\">{value}</span>\n        )}\n      </span>\n      <button\n        type=\"button\"\n        onClick={handleCopy}\n        className=\"shrink-0 rounded p-1 text-muted-foreground hover:text-primary hover:bg-background transition-colors\"\n        title={copied ? 'Copied!' : `Copy ${label.toLowerCase()}`}\n        aria-label={`Copy ${label.toLowerCase()}`}\n      >\n        {copied ? (\n          <Check className=\"size-3.5 text-green-600\" />\n        ) : (\n          <Copy className=\"size-3.5\" />\n        )}\n      </button>\n    </div>\n  )\n}\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@igstack/app-catalog-frontend-core",
-  "version": "0.18.5",
+  "version": "0.18.6-alpha-20260909190541",
   "description": "Frontend core library for App Catalog",
   "homepage": "https://github.com/lislon/app-catalog",
   "repository": {
@@ -132,8 +132,8 @@
     "vite-plugin-static-copy": "^3.1.4",
     "vite-plugin-svgr": "^4.2.0",
     "vitest": "^4.1.2",
-    "@igstack/app-catalog-backend-core": "0.18.5",
-    "@igstack/app-catalog-shared-core": "0.18.5"
+    "@igstack/app-catalog-backend-core": "0.18.6-alpha-20260909190541",
+    "@igstack/app-catalog-shared-core": "0.18.6-alpha-20260909190541"
   },
   "peerDependencies": {
     "react": "19.1.2",
@@ -142,7 +142,7 @@
     "vite": "^6.3.5",
     "vite-plugin-svgr": "^4.2.0"
   },
-  "gitHead": "e1052afa7d8e8d42bbda53aea6e177d830af6c36",
+  "gitHead": "ebb07ce29c2af1969b4ca2c518bacde6ae2bbfcf",
   "scripts": {
     "build": "vite build",
     "build:lenient": "vite build --mode lenient",

package/src/modules/appCatalog/ui/components/PersonBadge.tsx

@@ -95,6 +95,19 @@ export function PersonOrGroupBadge({ slug }: PersonBadgeProps) {
       </Badge>
     )
   }
+
+  // No group email to copy → show each member as its own clickable/copyable
+  // chip instead of one opaque group chip.
+  if (!group.email && group.memberSlugs.length > 0) {
+    return (
+      <span className="inline-flex flex-wrap gap-1">
+        {group.memberSlugs.map((memberSlug) => (
+          <PersonOrGroupBadge key={memberSlug} slug={memberSlug} />
+        ))}
+      </span>
+    )
+  }
+
   return <GroupBadge group={group} />
 }