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

package/src/modules/communityTools/ui/TagPicker.tsx

@@ -0,0 +1,118 @@
+import type { Resource } from '@igstack/app-catalog-backend-core'
+import type { CommunityTag } from '@igstack/app-catalog-shared-core'
+import { TAG_VALUE_MAX, normalizeTopic } from '@igstack/app-catalog-shared-core'
+import { AppWindow, Hash } from 'lucide-react'
+import { SuggestInput } from './OwnerPicker'
+import { tagKey } from './TagRow'
+
+const MAX_TAGS = 8
+const MAX_SUGGESTIONS = 6
+
+/**
+ * App tags, picked from the catalog's own apps so they always resolve, and
+ * topic words, suggested from the tags already in use so they converge. One
+ * box offers both. Enter adds the typed text as a topic, unless it is exactly
+ * an app's name or abbreviation, or an arrow chose a suggestion.
+ */
+export function TagPicker({
+  id,
+  apps,
+  knownTopics,
+  value,
+  onChange,
+  onTooLong,
+  describedBy,
+  disabled,
+}: {
+  id: string
+  /** The official apps (no sub-resources). */
+  apps: Resource[]
+  /** Every topic some tool already carries. */
+  knownTopics: string[]
+  value: CommunityTag[]
+  onChange: (tags: CommunityTag[]) => void
+  /** A typed topic over the length cap; the form says so next to the field. */
+  onTooLong: () => void
+  describedBy?: string
+  disabled?: boolean
+}) {
+  const appName = (slug: string) =>
+    apps.find((a) => a.slug === slug)?.displayName ?? slug
+  const has = (tag: CommunityTag) =>
+    value.some((t) => tagKey(t) === tagKey(tag))
+  const add = (tag: CommunityTag) => {
+    if (!has(tag)) onChange([...value, tag])
+  }
+
+  return (
+    <SuggestInput
+      id={id}
+      chips={value.map((tag) => ({
+        key: tagKey(tag),
+        label: tag.kind === 'app' ? appName(tag.value) : tag.value,
+        icon:
+          tag.kind === 'app' ? (
+            <AppWindow aria-hidden="true" className="ml-1 size-3.5" />
+          ) : (
+            <Hash aria-hidden="true" className="ml-1 size-3.5" />
+          ),
+      }))}
+      onRemove={(key) => onChange(value.filter((t) => tagKey(t) !== key))}
+      placeholder={
+        value.length >= MAX_TAGS
+          ? 'Eight tags at most'
+          : 'An app it is for, or a topic word'
+      }
+      atLimit={value.length >= MAX_TAGS}
+      disabled={disabled}
+      describedBy={describedBy}
+      textFirst
+      suggest={(query) => {
+        const q = query.toLowerCase()
+        const topic = normalizeTopic(query)
+        const appOptions = apps
+          .filter(
+            (a) =>
+              a.displayName.toLowerCase().includes(q) ||
+              a.abbreviation?.toLowerCase().includes(q),
+          )
+          .filter((a) => !has({ kind: 'app', value: a.slug }))
+          .slice(0, MAX_SUGGESTIONS)
+          .map((a) => ({
+            key: `app:${a.slug}`,
+            label: a.displayName,
+            sub: a.abbreviation ? `App · ${a.abbreviation}` : 'App',
+            icon: <AppWindow aria-hidden="true" className="size-4" />,
+            exact:
+              a.displayName.toLowerCase() === q ||
+              a.abbreviation?.toLowerCase() === q,
+          }))
+        const topicOptions = knownTopics
+          .filter((t) => t.includes(topic))
+          .filter((t) => !has({ kind: 'topic', value: t }))
+          .slice(0, MAX_SUGGESTIONS)
+          .map((t) => ({
+            key: `topic:${t}`,
+            label: t,
+            sub: 'Topic in use',
+            icon: <Hash aria-hidden="true" className="size-4" />,
+          }))
+        return [...appOptions, ...topicOptions]
+      }}
+      onPick={(key) => {
+        const [kind, ...rest] = key.split(':')
+        add({ kind: kind as CommunityTag['kind'], value: rest.join(':') })
+      }}
+      onEnterText={(text) => {
+        const topic = normalizeTopic(text)
+        if (!topic) return false
+        if (topic.length > TAG_VALUE_MAX) {
+          onTooLong()
+          return false
+        }
+        add({ kind: 'topic', value: topic })
+        return true
+      }}
+    />
+  )
+}

package/src/modules/communityTools/ui/TagRow.tsx

@@ -0,0 +1,118 @@
+import type {
+  CommunityTag,
+  CommunityTool,
+} from '@igstack/app-catalog-shared-core'
+import { X } from 'lucide-react'
+import { cn } from '~/lib/utils'
+
+/** A tag as it travels in `?tag=`: `topic:sandbox`, `app:order-service`. */
+export function tagKey(tag: CommunityTag): string {
+  return `${tag.kind}:${tag.value}`
+}
+
+/** An app tag reads as the app's name; a topic tag as its word. */
+export function tagLabel(
+  tag: CommunityTag,
+  appNames: Record<string, string>,
+): string {
+  return tag.kind === 'app' ? (appNames[tag.value] ?? tag.value) : tag.value
+}
+
+const TOP_TAGS = 8
+
+export function TagChip({
+  label,
+  active = false,
+  count,
+  onClick,
+}: {
+  label: string
+  active?: boolean
+  count?: number
+  onClick: () => void
+}) {
+  return (
+    <button
+      type="button"
+      data-testid="tool-tag"
+      aria-pressed={active}
+      onClick={(e) => {
+        e.stopPropagation()
+        onClick()
+      }}
+      className={cn(
+        'relative z-10 inline-flex h-6 items-center gap-1 rounded-full border px-2.5 text-xs font-semibold transition-colors',
+        'focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-ring',
+        active
+          ? 'border-primary/40 bg-accent text-accent-foreground'
+          : 'border-border bg-card text-muted-foreground hover:border-primary/40 hover:text-foreground',
+      )}
+    >
+      {label}
+      {count !== undefined && (
+        <span className="font-bold text-muted-foreground/70">{count}</span>
+      )}
+      {active && <X aria-hidden="true" className="size-3" />}
+    </button>
+  )
+}
+
+/**
+ * The most-used tags above the feed, as a way in for someone who does not know
+ * what to search for. The chosen tag stays in the row even when it is not a top
+ * one, so the filter can always be cleared where it is shown.
+ */
+export function TagRow({
+  tools,
+  activeTag,
+  appNames,
+  onChoose,
+}: {
+  tools: CommunityTool[]
+  activeTag: string | undefined
+  appNames: Record<string, string>
+  onChoose: (tag: string | undefined) => void
+}) {
+  const counts = new Map<string, { tag: CommunityTag; count: number }>()
+  for (const tool of tools) {
+    for (const tag of tool.tags) {
+      const key = tagKey(tag)
+      const entry = counts.get(key) ?? { tag, count: 0 }
+      entry.count += 1
+      counts.set(key, entry)
+    }
+  }
+  const ranked = [...counts.values()].sort(
+    (a, b) =>
+      b.count - a.count ||
+      tagLabel(a.tag, appNames).localeCompare(tagLabel(b.tag, appNames)),
+  )
+  const shown = ranked.slice(0, TOP_TAGS)
+  const active = activeTag ? counts.get(activeTag) : undefined
+  if (active && !shown.includes(active)) shown.push(active)
+
+  if (shown.length === 0) return null
+
+  return (
+    <div
+      data-testid="tag-row"
+      aria-label="Popular tags"
+      role="group"
+      className="mb-3 flex flex-wrap items-center gap-1.5"
+    >
+      {shown.map(({ tag, count }) => {
+        const key = tagKey(tag)
+        const on = key === activeTag
+        return (
+          <TagChip
+            key={key}
+            label={tagLabel(tag, appNames)}
+            count={count}
+            active={on}
+            onClick={() => onChoose(on ? undefined : key)}
+          />
+        )
+      })}
+    </div>
+  )
+}

package/src/modules/communityTools/ui/Toast.tsx

@@ -0,0 +1,105 @@
+import { AlertTriangle, Check, Star, X } from 'lucide-react'
+import { useEffect, useState } from 'react'
+import { cn } from '~/lib/utils'
+
+export interface ToastMessage {
+  /** Changes for every new toast, so the same text twice still restarts the timer. */
+  id: number
+  tone: 'info' | 'ok' | 'error'
+  text: React.ReactNode
+  action?: { label: string; run: () => void }
+}
+
+const SHOW_MS = 5000
+
+const ICONS = { info: Star, ok: Check, error: AlertTriangle } as const
+
+/**
+ * One toast at a time, bottom-centre. It leaves after 5 s unless the pointer or
+ * focus is on it. The live region is always mounted, so the first toast is
+ * announced too; an error is an alert.
+ */
+export function Toast({
+  toast,
+  onDismiss,
+}: {
+  toast: ToastMessage | null
+  onDismiss: () => void
+}) {
+  return (
+    <div
+      aria-live="polite"
+      className="pointer-events-none fixed inset-x-0 bottom-6 z-50 flex justify-center px-4"
+    >
+      {toast && (
+        <ToastBody key={toast.id} toast={toast} onDismiss={onDismiss} />
+      )}
+    </div>
+  )
+}
+
+/** Keyed by toast id, so a new toast starts un-held with a fresh timer. */
+function ToastBody({
+  toast,
+  onDismiss,
+}: {
+  toast: ToastMessage
+  onDismiss: () => void
+}) {
+  const [held, setHeld] = useState(false)
+
+  useEffect(() => {
+    if (held) return
+    const timer = setTimeout(onDismiss, SHOW_MS)
+    return () => clearTimeout(timer)
+  }, [held, onDismiss])
+
+  const Icon = ICONS[toast.tone]
+
+  return (
+    <div
+      data-testid="toast"
+      role={toast.tone === 'error' ? 'alert' : 'status'}
+      onMouseEnter={() => setHeld(true)}
+      onMouseLeave={() => setHeld(false)}
+      onFocus={() => setHeld(true)}
+      onBlur={() => setHeld(false)}
+      className={cn(
+        'pointer-events-auto inline-flex max-w-full items-center gap-2.5 rounded-xl py-2.5 pr-2.5 pl-3.5 text-sm font-semibold shadow-lg',
+        toast.tone === 'error'
+          ? 'bg-destructive text-white'
+          : 'bg-foreground text-background',
+      )}
+    >
+      <Icon
+        aria-hidden="true"
+        className={cn(
+          'size-4 shrink-0',
+          toast.tone === 'info' && 'fill-amber-400 text-amber-400',
+          toast.tone === 'ok' && 'text-green-400',
+        )}
+      />
+      <span>{toast.text}</span>
+      {toast.action && (
+        <button
+          type="button"
+          onClick={() => {
+            toast.action?.run()
+            onDismiss()
+          }}
+          className="rounded-md px-2 py-1 font-bold underline-offset-2 hover:underline focus-visible:outline-2 focus-visible:outline-current"
+        >
+          {toast.action.label}
+        </button>
+      )}
+      <button
+        type="button"
+        aria-label="Dismiss"
+        onClick={onDismiss}
+        className="rounded-md p-1 opacity-70 hover:opacity-100 focus-visible:outline-2 focus-visible:outline-current"
+      >
+        <X aria-hidden="true" className="size-4" />
+      </button>
+    </div>
+  )
+}