mgv-backoffice 1.30.0 → 1.32.0

package/src/utils/httpColors.test.ts

@@ -60,3 +60,41 @@ describe('statusBadgeTinted', () => {
     expect(statusBadgeTinted(undefined, false)).toBe('bg-green-100 text-green-800')
   })
 })
+
+import { methodBadgeTinted, statusBadgeSoft } from './httpColors'
+
+describe('methodBadgeTinted', () => {
+  it('gives each method its own hue (dark)', () => {
+    expect(methodBadgeTinted('GET', true)).toBe('bg-blue-500/15 text-blue-400')
+    expect(methodBadgeTinted('POST', true)).toBe('bg-emerald-500/15 text-emerald-400')
+    expect(methodBadgeTinted('PUT', true)).toBe('bg-amber-500/15 text-amber-400')
+    expect(methodBadgeTinted('DELETE', true)).toBe('bg-red-500/15 text-red-400')
+    expect(methodBadgeTinted('PATCH', true)).toBe('bg-purple-500/15 text-purple-400')
+    expect(methodBadgeTinted('HEAD', true)).toBe('bg-sky-500/15 text-sky-400')
+  })
+  it('uses the light palette when isDark is false', () => {
+    expect(methodBadgeTinted('GET', false)).toBe('bg-blue-100 text-blue-700')
+  })
+  it('is case-insensitive and falls back to gray for unknown/ANY/missing', () => {
+    expect(methodBadgeTinted('get', true)).toBe('bg-blue-500/15 text-blue-400')
+    expect(methodBadgeTinted(undefined, false)).toBe('bg-gray-100 text-gray-600')
+    expect(methodBadgeTinted('OPTIONS', false)).toBe('bg-gray-100 text-gray-600')
+  })
+})
+
+describe('statusBadgeSoft', () => {
+  it('buckets by status class (light)', () => {
+    expect(statusBadgeSoft(201, false)).toBe('bg-emerald-100 text-emerald-700')
+    expect(statusBadgeSoft(302, false)).toBe('bg-sky-100 text-sky-700')
+    expect(statusBadgeSoft(404, false)).toBe('bg-amber-100 text-amber-700')
+    expect(statusBadgeSoft(503, false)).toBe('bg-red-100 text-red-700')
+  })
+  it('uses tinted surfaces in dark mode', () => {
+    expect(statusBadgeSoft(200, true)).toBe('bg-emerald-500/15 text-emerald-300')
+  })
+  it('defaults undefined to 200 and gray for out-of-range codes', () => {
+    expect(statusBadgeSoft(undefined, false)).toBe('bg-emerald-100 text-emerald-700')
+    expect(statusBadgeSoft(999, false)).toBe('bg-gray-100 text-gray-600')
+    expect(statusBadgeSoft(100, true)).toBe('bg-gray-800 text-gray-400')
+  })
+})

package/src/utils/httpColors.ts

@@ -52,6 +52,37 @@ export function statusBadgeSolid(status?: number): string {
   return 'bg-gray-600'
 }
 
+/**
+ * Dark/light-aware tinted method badge — per-method hue on a soft
+ * `*-500/15` (dark) / `*-100` (light) surface, for card-surface chips.
+ * (Extracted from WireMate's mock/stub cards; GET is blue here, unlike
+ * the green-leaning bright family above.)
+ */
+export function methodBadgeTinted(method: string | undefined, isDark: boolean): string {
+  const m = (method || 'ANY').toUpperCase()
+  if (m === 'GET') return isDark ? 'bg-blue-500/15 text-blue-400' : 'bg-blue-100 text-blue-700'
+  if (m === 'POST') return isDark ? 'bg-emerald-500/15 text-emerald-400' : 'bg-emerald-100 text-emerald-700'
+  if (m === 'PUT') return isDark ? 'bg-amber-500/15 text-amber-400' : 'bg-amber-100 text-amber-700'
+  if (m === 'DELETE') return isDark ? 'bg-red-500/15 text-red-400' : 'bg-red-100 text-red-700'
+  if (m === 'PATCH') return isDark ? 'bg-purple-500/15 text-purple-400' : 'bg-purple-100 text-purple-700'
+  if (m === 'HEAD') return isDark ? 'bg-sky-500/15 text-sky-400' : 'bg-sky-100 text-sky-700'
+  return isDark ? 'bg-gray-500/15 text-gray-400' : 'bg-gray-100 text-gray-600'
+}
+
+/**
+ * Dark/light-aware soft status badge keyed by status class — emerald 2xx,
+ * sky 3xx, amber 4xx, red 5xx, gray otherwise. Softer companion to
+ * `statusBadgeTinted` (which uses the green/blue/yellow palette).
+ */
+export function statusBadgeSoft(status: number | undefined, isDark: boolean): string {
+  const code = status ?? 200
+  if (code >= 200 && code < 300) return isDark ? 'bg-emerald-500/15 text-emerald-300' : 'bg-emerald-100 text-emerald-700'
+  if (code >= 300 && code < 400) return isDark ? 'bg-sky-500/15 text-sky-300' : 'bg-sky-100 text-sky-700'
+  if (code >= 400 && code < 500) return isDark ? 'bg-amber-500/15 text-amber-300' : 'bg-amber-100 text-amber-700'
+  if (code >= 500 && code < 600) return isDark ? 'bg-red-500/15 text-red-300' : 'bg-red-100 text-red-700'
+  return isDark ? 'bg-gray-800 text-gray-400' : 'bg-gray-100 text-gray-600'
+}
+
 /** Dark/light-aware tinted status badge. */
 export function statusBadgeTinted(status: number | undefined, isDark: boolean): string {
   const code = status ?? 200

package/src/utils/kvRows.test.ts

@@ -0,0 +1,47 @@
+import { describe, it, expect } from 'vitest'
+import { rowKeyMissing, rowValueMissing } from './kvRows'
+
+describe('rowValueMissing', () => {
+  it('is false for a fully blank row', () => {
+    expect(rowValueMissing({ key: '', value: '' })).toBe(false)
+    expect(rowValueMissing({})).toBe(false)
+  })
+
+  it('is true when the key is filled but the value is blank', () => {
+    expect(rowValueMissing({ key: 'X-Trace', value: '' })).toBe(true)
+    expect(rowValueMissing({ key: 'X-Trace', value: '   ' })).toBe(true)
+    expect(rowValueMissing({ key: 'X-Trace' })).toBe(true)
+  })
+
+  it('is false when both sides are filled', () => {
+    expect(rowValueMissing({ key: 'X-Trace', value: 'abc' })).toBe(false)
+  })
+
+  it('exempts absent matchers — they carry no value by design', () => {
+    expect(rowValueMissing({ key: 'X-Trace', value: '', matcherType: 'absent' })).toBe(false)
+  })
+
+  it('treats whitespace-only keys as blank', () => {
+    expect(rowValueMissing({ key: '   ', value: '' })).toBe(false)
+  })
+})
+
+describe('rowKeyMissing', () => {
+  it('is false for a fully blank row', () => {
+    expect(rowKeyMissing({ key: '', value: '' })).toBe(false)
+    expect(rowKeyMissing({})).toBe(false)
+  })
+
+  it('is true when the value is filled but the key is blank', () => {
+    expect(rowKeyMissing({ key: '', value: 'abc' })).toBe(true)
+    expect(rowKeyMissing({ key: '  ', value: 'abc' })).toBe(true)
+  })
+
+  it('is false when both sides are filled', () => {
+    expect(rowKeyMissing({ key: 'X-Trace', value: 'abc' })).toBe(false)
+  })
+
+  it('exempts absent matchers', () => {
+    expect(rowKeyMissing({ key: '', value: 'abc', matcherType: 'absent' })).toBe(false)
+  })
+})

package/src/utils/kvRows.ts

@@ -0,0 +1,34 @@
+/**
+ * Validators for dynamic key/value row grids (header lists, query-param
+ * lists, metadata grids, …). A row is inconsistent when one side is
+ * filled in and the other is blank:
+ *
+ *   • key present, value blank  → rowValueMissing
+ *   • value present, key blank  → rowKeyMissing
+ *
+ * Rows whose `matcherType` is `'absent'` are exempt — an absent matcher
+ * intentionally carries no value (it asserts the key is NOT present).
+ * Rows without a matcherType (plain key/value pairs) validate normally.
+ */
+
+export interface KeyValueRowLike {
+  key?: string
+  value?: string
+  matcherType?: string
+}
+
+/** True when the row has a (non-absent) key but no value. */
+export function rowValueMissing(row: KeyValueRowLike): boolean {
+  const key = (row.key ?? '').trim()
+  if (!key) return false
+  if (row.matcherType === 'absent') return false
+  return !(row.value ?? '').trim()
+}
+
+/** True when the row has a value but no key to bind it to. */
+export function rowKeyMissing(row: KeyValueRowLike): boolean {
+  if (row.matcherType === 'absent') return false
+  const hasValue = !!(row.value ?? '').trim()
+  if (!hasValue) return false
+  return !(row.key ?? '').trim()
+}