@kelpie/ui 0.12.0 → 0.14.0

package/src/components/AddressesField.tsx

@@ -0,0 +1,502 @@
+import { formatAddress, primaryAddress } from '@kelpie/schemas'
+import type { PostalAddress } from '@kelpie/schemas'
+import { useEffect, useId, useMemo, useRef, useState } from 'react'
+
+import { Chip } from './Chip.tsx'
+import { CountrySearch } from './CountrySearch.tsx'
+import { SidebarField } from './SidebarField.tsx'
+
+export interface AddressesFieldProps<Kind extends string> {
+  readonly value: readonly PostalAddress<Kind>[]
+  readonly kinds: readonly Kind[]
+  readonly kindLabels: Readonly<Record<Kind, string>>
+  readonly onChange: (addresses: readonly PostalAddress<Kind>[]) => void
+}
+
+export interface AddressSidebarLinkProps {
+  readonly addresses: readonly PostalAddress[]
+  readonly onOpen: () => void
+}
+
+/**
+ * The primary address as a single sidebar link. Clicking it opens the Addresses
+ * tab; the editor itself does not live in the aside.
+ */
+export function AddressSidebarLink({
+  addresses,
+  onOpen,
+}: AddressSidebarLinkProps): React.JSX.Element {
+  const address = primaryAddress(addresses)
+  const text = address === undefined ? 'Add address…' : formatAddress(address)
+
+  return (
+    <SidebarField label="Address">
+      <button
+        type="button"
+        onClick={onOpen}
+        className="text-left text-[12px] font-medium text-accent transition hover:text-accent-hover hover:underline"
+      >
+        {text}
+      </button>
+    </SidebarField>
+  )
+}
+
+interface AddressDraft {
+  readonly line1: string
+  readonly line2: string
+  readonly city: string
+  readonly region: string
+  readonly postalCode: string
+  readonly country: string
+}
+
+function emptyDraft(): AddressDraft {
+  return { line1: '', line2: '', city: '', region: '', postalCode: '', country: '' }
+}
+
+function fromAddress(address: PostalAddress): AddressDraft {
+  return {
+    line1: address.line1 ?? '',
+    line2: address.line2 ?? '',
+    city: address.city ?? '',
+    region: address.region ?? '',
+    postalCode: address.postalCode ?? '',
+    country: address.country ?? '',
+  }
+}
+
+function blankToNull(value: string): string | null {
+  const trimmed = value.trim()
+
+  return trimmed.length === 0 ? null : trimmed
+}
+
+function partsFromDraft(draft: AddressDraft): {
+  readonly line1: string | null
+  readonly line2: string | null
+  readonly city: string | null
+  readonly region: string | null
+  readonly postalCode: string | null
+  readonly country: string | null
+} {
+  return {
+    line1: blankToNull(draft.line1),
+    line2: blankToNull(draft.line2),
+    city: blankToNull(draft.city),
+    region: blankToNull(draft.region),
+    postalCode: blankToNull(draft.postalCode),
+    country: blankToNull(draft.country),
+  }
+}
+
+function draftHasLocation(draft: AddressDraft): boolean {
+  return Object.values(partsFromDraft(draft)).some((part) => part !== null)
+}
+
+function withPrimary<Kind extends string>(
+  addresses: readonly PostalAddress<Kind>[],
+  kind: Kind,
+): readonly PostalAddress<Kind>[] {
+  return addresses.map((address) => ({ ...address, primary: address.kind === kind }))
+}
+
+function withoutKind<Kind extends string>(
+  addresses: readonly PostalAddress<Kind>[],
+  kind: Kind,
+): readonly PostalAddress<Kind>[] {
+  const next = addresses.filter((address) => address.kind !== kind)
+
+  if (next.length === 0 || next.some((address) => address.primary)) {
+    return next
+  }
+
+  return next.map((address, index) => ({ ...address, primary: index === 0 }))
+}
+
+function AddressPartInputs({
+  draft,
+  onChange,
+}: {
+  readonly draft: AddressDraft
+  readonly onChange: (draft: AddressDraft) => void
+}): React.JSX.Element {
+  const inputClass =
+    'w-full rounded-md border border-border bg-surface-raised px-2 py-1 text-[12px] outline-none focus:border-accent focus:ring-2 focus:ring-accent/20'
+
+  function set(field: keyof AddressDraft, value: string): void {
+    onChange({ ...draft, [field]: value })
+  }
+
+  return (
+    <div className="space-y-1.5">
+      <input
+        value={draft.line1}
+        onChange={(event) => {
+          set('line1', event.target.value)
+        }}
+        placeholder="Line 1"
+        className={inputClass}
+      />
+      <input
+        value={draft.line2}
+        onChange={(event) => {
+          set('line2', event.target.value)
+        }}
+        placeholder="Line 2"
+        className={inputClass}
+      />
+      <input
+        value={draft.city}
+        onChange={(event) => {
+          set('city', event.target.value)
+        }}
+        placeholder="City"
+        className={inputClass}
+      />
+      <div className="grid grid-cols-2 gap-1.5">
+        <input
+          value={draft.region}
+          onChange={(event) => {
+            set('region', event.target.value)
+          }}
+          placeholder="Region"
+          className={inputClass}
+        />
+        <input
+          value={draft.postalCode}
+          onChange={(event) => {
+            set('postalCode', event.target.value)
+          }}
+          placeholder="Postal code"
+          className={inputClass}
+        />
+      </div>
+      <CountrySearch
+        value={draft.country}
+        onChange={(country) => {
+          set('country', country)
+        }}
+      />
+    </div>
+  )
+}
+
+/**
+ * Add, edit, and remove labelled postal addresses. One entry per kind. The first
+ * added address is primary; marking another one primary clears the old mark;
+ * removing the primary promotes the first remaining entry.
+ */
+export function AddressesField<Kind extends string>({
+  value,
+  kinds,
+  kindLabels,
+  onChange,
+}: AddressesFieldProps<Kind>): React.JSX.Element {
+  const listId = useId()
+  const rootRef = useRef<HTMLDivElement>(null)
+  const [open, setOpen] = useState(false)
+  const [query, setQuery] = useState('')
+  const [highlight, setHighlight] = useState(0)
+  const [pendingKind, setPendingKind] = useState<Kind | null>(null)
+  const [pendingDraft, setPendingDraft] = useState<AddressDraft>(emptyDraft)
+  const [editingKind, setEditingKind] = useState<Kind | null>(null)
+  const [editDraft, setEditDraft] = useState<AddressDraft>(emptyDraft)
+  const [editPrimary, setEditPrimary] = useState(false)
+
+  const available = useMemo(() => {
+    const used = new Set(value.map((address) => address.kind))
+
+    return kinds.filter((kind) => !used.has(kind))
+  }, [kinds, value])
+
+  const filtered = useMemo(() => {
+    const term = query.trim().toLowerCase()
+
+    return term.length === 0
+      ? available
+      : available.filter((kind) => kindLabels[kind].toLowerCase().includes(term))
+  }, [available, kindLabels, query])
+
+  useEffect(() => {
+    if (!open) {
+      return
+    }
+
+    function onPointerDown(event: MouseEvent): void {
+      if (rootRef.current?.contains(event.target as Node) !== true) {
+        setOpen(false)
+        setQuery('')
+      }
+    }
+
+    document.addEventListener('mousedown', onPointerDown)
+
+    return () => {
+      document.removeEventListener('mousedown', onPointerDown)
+    }
+  }, [open])
+
+  useEffect(() => {
+    setHighlight(0)
+  }, [query, open])
+
+  function pickKind(kind: Kind): void {
+    setEditingKind(null)
+    setPendingKind(kind)
+    setPendingDraft(emptyDraft())
+    setOpen(false)
+    setQuery('')
+  }
+
+  function cancelPending(): void {
+    setPendingKind(null)
+    setPendingDraft(emptyDraft())
+  }
+
+  function commitPending(): void {
+    if (pendingKind === null || !draftHasLocation(pendingDraft)) {
+      return
+    }
+
+    const next: PostalAddress<Kind> = {
+      kind: pendingKind,
+      ...partsFromDraft(pendingDraft),
+      primary: value.length === 0,
+    }
+
+    onChange(value.length === 0 ? [next] : [...value.filter((address) => address.kind !== pendingKind), next])
+    cancelPending()
+  }
+
+  function cancelEdit(): void {
+    setEditingKind(null)
+    setEditDraft(emptyDraft())
+    setEditPrimary(false)
+  }
+
+  function commitEdit(): void {
+    if (editingKind === null) {
+      return
+    }
+
+    if (!draftHasLocation(editDraft)) {
+      onChange(withoutKind(value, editingKind))
+      cancelEdit()
+      return
+    }
+
+    const next = value.map((address) =>
+      address.kind === editingKind
+        ? { ...address, ...partsFromDraft(editDraft) }
+        : address,
+    )
+
+    onChange(editPrimary ? withPrimary(next, editingKind) : next)
+    cancelEdit()
+  }
+
+  return (
+    <div className="space-y-0.5">
+      <ul>
+        {value.map((address) => {
+          const label = kindLabels[address.kind]
+
+          if (editingKind === address.kind) {
+            return (
+              <li key={address.kind} className="py-1">
+                <div className="mb-1 flex items-center gap-1.5">
+                  <span className="text-[11px] font-medium text-ink-muted">{label}</span>
+                  {editPrimary && <Chip tone="accent">Primary</Chip>}
+                </div>
+                <AddressPartInputs draft={editDraft} onChange={setEditDraft} />
+                <div className="mt-1.5 flex items-center justify-end gap-1.5">
+                  {!editPrimary && (
+                    <button
+                      type="button"
+                      onClick={() => {
+                        setEditPrimary(true)
+                      }}
+                      className="mr-auto rounded-md px-2 py-1 text-[11px] font-medium text-ink-muted hover:text-ink"
+                    >
+                      Make Primary
+                    </button>
+                  )}
+                  <button
+                    type="button"
+                    onClick={cancelEdit}
+                    className="rounded-md px-2 py-1 text-[11px] font-medium text-ink-muted hover:text-ink"
+                  >
+                    Cancel
+                  </button>
+                  <button
+                    type="button"
+                    onClick={commitEdit}
+                    className="rounded-md bg-accent px-2.5 py-1 text-[11px] font-semibold text-accent-fg hover:bg-accent-hover"
+                  >
+                    Save
+                  </button>
+                </div>
+              </li>
+            )
+          }
+
+          const summary = formatAddress(address)
+
+          return (
+            <li
+              key={address.kind}
+              className="-mx-1 rounded-md px-1 py-1 hover:bg-surface"
+            >
+              <div className="flex items-start gap-1">
+                <div className="min-w-0 flex-1">
+                  <div className="flex items-center gap-1.5 text-[12px] leading-snug text-ink">
+                    <span className="font-medium">{label}</span>
+                    {address.primary && <Chip tone="accent">Primary</Chip>}
+                  </div>
+                  {summary.length > 0 && (
+                    <div className="text-[12px] leading-snug text-ink-muted">{summary}</div>
+                  )}
+                </div>
+                <div className="flex shrink-0 items-center">
+                  <button
+                    type="button"
+                    onClick={() => {
+                      cancelPending()
+                      setEditingKind(address.kind)
+                      setEditDraft(fromAddress(address))
+                      setEditPrimary(address.primary)
+                    }}
+                    className="rounded px-1.5 py-0.5 text-[11px] font-medium text-ink-faint hover:bg-surface-raised hover:text-ink"
+                  >
+                    Edit
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => {
+                      if (editingKind === address.kind) {
+                        cancelEdit()
+                      }
+
+                      onChange(withoutKind(value, address.kind))
+                    }}
+                    className="rounded px-1 py-0.5 text-[13px] leading-none text-ink-faint hover:bg-danger-soft hover:text-danger"
+                    aria-label={`Remove ${label}`}
+                  >
+                    ×
+                  </button>
+                </div>
+              </div>
+            </li>
+          )
+        })}
+      </ul>
+
+      {value.length === 0 && pendingKind === null && (
+        <p className="py-0.5 text-[12px] text-ink-faint">None yet</p>
+      )}
+
+      {pendingKind !== null ? (
+        <div className="mt-1 space-y-1.5 rounded-md border border-border bg-surface px-2 py-2">
+          <div className="text-[11px] font-medium text-ink">{kindLabels[pendingKind]}</div>
+          <AddressPartInputs draft={pendingDraft} onChange={setPendingDraft} />
+          <div className="flex justify-end gap-1.5">
+            <button
+              type="button"
+              onClick={cancelPending}
+              className="rounded-md px-2 py-1 text-[11px] font-medium text-ink-muted hover:text-ink"
+            >
+              Cancel
+            </button>
+            <button
+              type="button"
+              onClick={commitPending}
+              disabled={!draftHasLocation(pendingDraft)}
+              className="rounded-md bg-accent px-2.5 py-1 text-[11px] font-semibold text-accent-fg hover:bg-accent-hover disabled:opacity-40"
+            >
+              Add
+            </button>
+          </div>
+        </div>
+      ) : (
+        available.length > 0 && (
+          <div ref={rootRef} className="relative">
+            <button
+              type="button"
+              onClick={() => {
+                setOpen((current) => !current)
+                setQuery('')
+              }}
+              className="mt-0.5 -mx-1 rounded-md px-1 py-1 text-[12px] font-medium text-ink-muted transition hover:bg-surface hover:text-accent"
+            >
+              + Add
+            </button>
+
+            {open && (
+              <div className="absolute z-20 mt-0.5 w-full overflow-hidden rounded-md border border-border bg-surface-raised">
+                <input
+                  value={query}
+                  onChange={(event) => {
+                    setQuery(event.target.value)
+                  }}
+                  onKeyDown={(event) => {
+                    if (event.key === 'ArrowDown') {
+                      event.preventDefault()
+                      setHighlight((current) =>
+                        Math.min(current + 1, Math.max(filtered.length - 1, 0)),
+                      )
+                    } else if (event.key === 'ArrowUp') {
+                      event.preventDefault()
+                      setHighlight((current) => Math.max(current - 1, 0))
+                    } else if (event.key === 'Enter') {
+                      event.preventDefault()
+                      const hit = filtered[highlight]
+
+                      if (hit !== undefined) {
+                        pickKind(hit)
+                      }
+                    } else if (event.key === 'Escape') {
+                      setOpen(false)
+                      setQuery('')
+                    }
+                  }}
+                  placeholder="Search kinds…"
+                  role="combobox"
+                  aria-expanded={open}
+                  aria-controls={listId}
+                  aria-autocomplete="list"
+                  className="w-full border-b border-border px-2.5 py-1.5 text-[12px] outline-none focus:bg-accent-soft/30"
+                />
+                <ul id={listId} role="listbox" className="max-h-48 overflow-auto py-1">
+                  {filtered.length === 0 ? (
+                    <li className="px-3 py-2 text-[12px] text-ink-faint">No kinds match</li>
+                  ) : (
+                    filtered.map((kind, index) => (
+                      <li key={kind} role="option" aria-selected={index === highlight}>
+                        <button
+                          type="button"
+                          onMouseEnter={() => {
+                            setHighlight(index)
+                          }}
+                          onClick={() => {
+                            pickKind(kind)
+                          }}
+                          className={[
+                            'flex w-full px-3 py-1.5 text-left text-[12px] text-ink',
+                            index === highlight ? 'bg-accent-soft' : 'hover:bg-surface',
+                          ].join(' ')}
+                        >
+                          {kindLabels[kind]}
+                        </button>
+                      </li>
+                    ))
+                  )}
+                </ul>
+              </div>
+            )}
+          </div>
+        )
+      )}
+    </div>
+  )
+}

package/src/components/CountrySearch.tsx

@@ -0,0 +1,71 @@
+import { COUNTRIES, countryName } from '@kelpie/schemas'
+import type { JSX } from 'react'
+
+import { EntitySearch } from './EntitySearch.tsx'
+
+export interface CountrySearchProps {
+  readonly value: string
+  readonly onChange: (country: string) => void
+  readonly disabled?: boolean | undefined
+  readonly size?: 'sm' | 'md' | undefined
+  readonly className?: string | undefined
+}
+
+function countryOptions(
+  current: string,
+): readonly { readonly id: string; readonly label: string; readonly meta?: string }[] {
+  const options = COUNTRIES.map((country) => ({
+    id: country.code,
+    label: `${country.name} (${country.code})`,
+    ...(country.aliases === undefined ? {} : { meta: country.aliases.join(', ') }),
+  }))
+
+  if (current.length === 0 || COUNTRIES.some((country) => country.code === current)) {
+    return options
+  }
+
+  const name = countryName(current) ?? current
+
+  return [{ id: current, label: `${name} (${current})` }, ...options]
+}
+
+/**
+ * Searchable ISO 3166-1 alpha-2 picker.
+ *
+ * Accepts a stored code. The list searches English names, codes, and aliases.
+ * Clearing writes an empty string so the parent can store null.
+ */
+export function CountrySearch({
+  value,
+  onChange,
+  disabled,
+  size = 'sm',
+  className = '',
+}: CountrySearchProps): JSX.Element {
+  if (disabled === true) {
+    const padding = size === 'md' ? 'px-2.5 py-1.5 text-[13px]' : 'px-2 py-1.5 text-[12px]'
+    const label =
+      value.length === 0 ? '—' : `${countryName(value) ?? value}${value.length === 2 ? ` (${value})` : ''}`
+
+    return (
+      <div
+        className={`w-full rounded-md border border-border bg-surface-raised text-ink opacity-60 ${padding} ${className}`}
+      >
+        {label}
+      </div>
+    )
+  }
+
+  return (
+    <EntitySearch
+      options={countryOptions(value)}
+      value={value}
+      onChange={onChange}
+      placeholder="Search countries…"
+      emptyMessage="No matching countries"
+      limit={20}
+      size={size}
+      className={className}
+    />
+  )
+}

package/src/components/EnvironmentBanner.tsx

@@ -1,18 +1,29 @@
 import { usePublicConfig } from '../api/resources/publicConfig.ts'
+import { environmentTone, type EnvironmentTone } from './environmentTone.ts'
 
 /**
- * A thin strip above the app that names the site.
+ * A thin strip above the app that names the site and paints it in a colour
+ * that belongs to that name.
  *
  * Renders nothing on production, whether or not a site name was set: the
- * banner exists to tell dev, demo, and any other non-production install
- * apart. Renders nothing while the metadata is loading or on error either,
- * so a slow config request never pushes the app down half a second after
- * boot.
+ * banner exists to tell dev, demo, cloud, and any other non-production
+ * install apart. Colour does the first half of that work; the label does
+ * the rest. Renders nothing while the metadata is loading or on error
+ * either, so a slow config request never pushes the app down half a
+ * second after boot.
  *
  * Mounted at the top of `KelpieApp`, above the router, so it shows on the
  * sign-in and onboarding pages as well as the main app.
  */
 
+const TONE_CLASSES: Readonly<Record<EnvironmentTone, string>> = {
+  dev: 'bg-env-dev text-env-dev-fg',
+  demo: 'bg-env-demo text-env-demo-fg',
+  staging: 'bg-env-staging text-env-staging-fg',
+  test: 'bg-env-test text-env-test-fg',
+  cloud: 'bg-env-cloud text-env-cloud-fg',
+}
+
 export function EnvironmentBanner(): React.JSX.Element | null {
   const { config } = usePublicConfig()
 
@@ -21,9 +32,15 @@ export function EnvironmentBanner(): React.JSX.Element | null {
   }
 
   const label = config.siteName ?? config.runtimeMode
+  const tone = environmentTone(label)
+
+  const className = [
+    'flex h-5 shrink-0 items-center justify-center px-2 text-[11px] font-medium tracking-wide uppercase',
+    TONE_CLASSES[tone],
+  ].join(' ')
 
   return (
-    <div className="flex h-5 shrink-0 items-center justify-center bg-accent px-2 text-[11px] font-medium tracking-wide text-accent-fg uppercase">
+    <div data-tone={tone} className={className}>
       {label}
     </div>
   )

package/src/components/InlineEdit.tsx

@@ -22,7 +22,12 @@ interface TextProps extends CommonProps {
   readonly value: string
   readonly onChange: (value: string) => void
   readonly multiline?: boolean
-  readonly type?: 'text' | 'number' | 'date' | 'url' | 'email'
+  readonly type?: 'text' | 'number' | 'date' | 'datetime-local' | 'url' | 'email'
+  /**
+   * When the value is set, hover shows Visit (opens the address) and Edit
+   * instead of making the whole value a click-to-edit control.
+   */
+  readonly visitable?: boolean
   readonly options?: never
 }
 
@@ -32,10 +37,18 @@ interface SelectProps extends CommonProps {
   readonly options: readonly { readonly value: string; readonly label: string }[]
   readonly multiline?: never
   readonly type?: never
+  readonly visitable?: never
 }
 
 export type InlineEditProps = TextProps | SelectProps
 
+const ACTION_CLASS =
+  'rounded-md px-2 py-0.5 text-[11px] font-medium text-ink-muted hover:bg-surface-sunken hover:text-ink'
+
+function hrefForVisit(value: string): string {
+  return /^https?:\/\//iu.test(value) ? value : `https://${value}`
+}
+
 export function InlineEdit(props: InlineEditProps): React.JSX.Element {
   const {
     value,
@@ -158,6 +171,27 @@ export function InlineEdit(props: InlineEditProps): React.JSX.Element {
 
   const isEmpty = value.length === 0 || value === '—'
 
+  if (props.options === undefined && props.visitable === true && !isEmpty) {
+    return (
+      <div className={`group relative inline-flex max-w-full items-baseline ${className}`.trim()}>
+        <span className={`text-[13px] leading-snug ${displayClassName}`.trim()}>{display ?? value}</span>
+        <span className="absolute left-full top-1/2 flex -translate-y-1/2 gap-0.5 pl-1 whitespace-nowrap opacity-0 transition-opacity group-hover:opacity-100 focus-within:opacity-100 [@media(hover:none)]:opacity-100">
+          <a
+            href={hrefForVisit(value)}
+            target="_blank"
+            rel="noopener noreferrer"
+            className={`${ACTION_CLASS} hover:text-accent`}
+          >
+            Visit
+          </a>
+          <button type="button" onClick={() => setEditing(true)} className={ACTION_CLASS}>
+            Edit
+          </button>
+        </span>
+      </div>
+    )
+  }
+
   return (
     <button
       type="button"