@open-mercato/ui 0.6.3-develop.3876.1.d40fe4ec2d → 0.6.3-develop.3894.1.352abf4240

package/dist/backend/detail/ErrorMessage.js

@@ -2,7 +2,18 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { AlertCircle } from "lucide-react";
 import { cn } from "@open-mercato/shared/lib/utils";
+const TECHNICAL_MESSAGE_PATTERN = /^[a-z0-9]+(?:[._-][a-z0-9]+)+$/;
+function formatErrorMessageLabel(label) {
+  const trimmed = label.trim();
+  if (!TECHNICAL_MESSAGE_PATTERN.test(trimmed)) return label;
+  const parts = trimmed.split(/[._-]+/).filter(Boolean);
+  const meaningfulParts = parts.length > 2 ? parts.slice(-2) : parts;
+  const sentence = meaningfulParts.join(" ");
+  return sentence.charAt(0).toUpperCase() + sentence.slice(1);
+}
 function ErrorMessage({ label, description, action, className, iconClassName }) {
+  const displayLabel = formatErrorMessageLabel(label);
+  const displayDescription = description ? formatErrorMessageLabel(description) : void 0;
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -14,8 +25,8 @@ function ErrorMessage({ label, description, action, className, iconClassName })
       children: [
         /* @__PURE__ */ jsx(AlertCircle, { className: cn("h-4 w-4 flex-none", iconClassName), "aria-hidden": true }),
         /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
-          /* @__PURE__ */ jsx("p", { className: "leading-tight", children: label }),
-          description ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: description }) : null,
+          /* @__PURE__ */ jsx("p", { className: "leading-tight", children: displayLabel }),
+          displayDescription ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: displayDescription }) : null,
           action ? /* @__PURE__ */ jsx("div", { className: "pt-1", children: action }) : null
         ] })
       ]
@@ -23,6 +34,7 @@ function ErrorMessage({ label, description, action, className, iconClassName })
   );
 }
 export {
-  ErrorMessage
+  ErrorMessage,
+  formatErrorMessageLabel
 };
 //# sourceMappingURL=ErrorMessage.js.map

package/dist/backend/detail/ErrorMessage.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/backend/detail/ErrorMessage.tsx"],
-  "sourcesContent": ["\"use client\"\n\nimport * as React from 'react'\nimport { AlertCircle } from 'lucide-react'\nimport { cn } from '@open-mercato/shared/lib/utils'\n\ntype ErrorMessageProps = {\n  label: string\n  description?: string\n  action?: React.ReactNode\n  className?: string\n  iconClassName?: string\n}\n\nexport function ErrorMessage({ label, description, action, className, iconClassName }: ErrorMessageProps) {\n  return (\n    <div\n      className={cn(\n        'flex items-start gap-3 rounded border border-destructive/50 bg-destructive/5 px-3 py-2 text-sm text-destructive',\n        className\n      )}\n      role=\"alert\"\n    >\n      <AlertCircle className={cn('h-4 w-4 flex-none', iconClassName)} aria-hidden />\n      <div className=\"space-y-1\">\n        <p className=\"leading-tight\">{label}</p>\n        {description ? <p className=\"text-muted-foreground\">{description}</p> : null}\n        {action ? <div className=\"pt-1\">{action}</div> : null}\n      </div>\n    </div>\n  )\n}\n"],
-  "mappings": ";AAuBM,cACA,YADA;AApBN,SAAS,mBAAmB;AAC5B,SAAS,UAAU;AAUZ,SAAS,aAAa,EAAE,OAAO,aAAa,QAAQ,WAAW,cAAc,GAAsB;AACxG,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACA,MAAK;AAAA,MAEL;AAAA,4BAAC,eAAY,WAAW,GAAG,qBAAqB,aAAa,GAAG,eAAW,MAAC;AAAA,QAC5E,qBAAC,SAAI,WAAU,aACb;AAAA,8BAAC,OAAE,WAAU,iBAAiB,iBAAM;AAAA,UACnC,cAAc,oBAAC,OAAE,WAAU,yBAAyB,uBAAY,IAAO;AAAA,UACvE,SAAS,oBAAC,SAAI,WAAU,QAAQ,kBAAO,IAAS;AAAA,WACnD;AAAA;AAAA;AAAA,EACF;AAEJ;",
+  "sourcesContent": ["\"use client\"\n\nimport * as React from 'react'\nimport { AlertCircle } from 'lucide-react'\nimport { cn } from '@open-mercato/shared/lib/utils'\n\ntype ErrorMessageProps = {\n  label: string\n  description?: string\n  action?: React.ReactNode\n  className?: string\n  iconClassName?: string\n}\n\nconst TECHNICAL_MESSAGE_PATTERN = /^[a-z0-9]+(?:[._-][a-z0-9]+)+$/\n\nexport function formatErrorMessageLabel(label: string): string {\n  const trimmed = label.trim()\n  if (!TECHNICAL_MESSAGE_PATTERN.test(trimmed)) return label\n\n  const parts = trimmed.split(/[._-]+/).filter(Boolean)\n  const meaningfulParts = parts.length > 2 ? parts.slice(-2) : parts\n  const sentence = meaningfulParts.join(' ')\n  return sentence.charAt(0).toUpperCase() + sentence.slice(1)\n}\n\nexport function ErrorMessage({ label, description, action, className, iconClassName }: ErrorMessageProps) {\n  const displayLabel = formatErrorMessageLabel(label)\n  const displayDescription = description ? formatErrorMessageLabel(description) : undefined\n\n  return (\n    <div\n      className={cn(\n        'flex items-start gap-3 rounded border border-destructive/50 bg-destructive/5 px-3 py-2 text-sm text-destructive',\n        className\n      )}\n      role=\"alert\"\n    >\n      <AlertCircle className={cn('h-4 w-4 flex-none', iconClassName)} aria-hidden />\n      <div className=\"space-y-1\">\n        <p className=\"leading-tight\">{displayLabel}</p>\n        {displayDescription ? <p className=\"text-muted-foreground\">{displayDescription}</p> : null}\n        {action ? <div className=\"pt-1\">{action}</div> : null}\n      </div>\n    </div>\n  )\n}\n"],
+  "mappings": ";AAsCM,cACA,YADA;AAnCN,SAAS,mBAAmB;AAC5B,SAAS,UAAU;AAUnB,MAAM,4BAA4B;AAE3B,SAAS,wBAAwB,OAAuB;AAC7D,QAAM,UAAU,MAAM,KAAK;AAC3B,MAAI,CAAC,0BAA0B,KAAK,OAAO,EAAG,QAAO;AAErD,QAAM,QAAQ,QAAQ,MAAM,QAAQ,EAAE,OAAO,OAAO;AACpD,QAAM,kBAAkB,MAAM,SAAS,IAAI,MAAM,MAAM,EAAE,IAAI;AAC7D,QAAM,WAAW,gBAAgB,KAAK,GAAG;AACzC,SAAO,SAAS,OAAO,CAAC,EAAE,YAAY,IAAI,SAAS,MAAM,CAAC;AAC5D;AAEO,SAAS,aAAa,EAAE,OAAO,aAAa,QAAQ,WAAW,cAAc,GAAsB;AACxG,QAAM,eAAe,wBAAwB,KAAK;AAClD,QAAM,qBAAqB,cAAc,wBAAwB,WAAW,IAAI;AAEhF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACA,MAAK;AAAA,MAEL;AAAA,4BAAC,eAAY,WAAW,GAAG,qBAAqB,aAAa,GAAG,eAAW,MAAC;AAAA,QAC5E,qBAAC,SAAI,WAAU,aACb;AAAA,8BAAC,OAAE,WAAU,iBAAiB,wBAAa;AAAA,UAC1C,qBAAqB,oBAAC,OAAE,WAAU,yBAAyB,8BAAmB,IAAO;AAAA,UACrF,SAAS,oBAAC,SAAI,WAAU,QAAQ,kBAAO,IAAS;AAAA,WACnD;AAAA;AAAA;AAAA,EACF;AAEJ;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@open-mercato/ui",
-  "version": "0.6.3-develop.3876.1.d40fe4ec2d",
+  "version": "0.6.3-develop.3894.1.352abf4240",
   "type": "module",
   "main": "./dist/index.js",
   "scripts": {
@@ -141,13 +141,13 @@
     "remark-gfm": "^4.0.1"
   },
   "peerDependencies": {
-    "@open-mercato/shared": "0.6.3-develop.3876.1.d40fe4ec2d",
+    "@open-mercato/shared": "0.6.3-develop.3894.1.352abf4240",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0",
     "react-is": ">=18.0.0"
   },
   "devDependencies": {
-    "@open-mercato/shared": "0.6.3-develop.3876.1.d40fe4ec2d",
+    "@open-mercato/shared": "0.6.3-develop.3894.1.352abf4240",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.1",

package/src/backend/detail/ErrorMessage.tsx

@@ -12,7 +12,22 @@ type ErrorMessageProps = {
   iconClassName?: string
 }
 
+const TECHNICAL_MESSAGE_PATTERN = /^[a-z0-9]+(?:[._-][a-z0-9]+)+$/
+
+export function formatErrorMessageLabel(label: string): string {
+  const trimmed = label.trim()
+  if (!TECHNICAL_MESSAGE_PATTERN.test(trimmed)) return label
+
+  const parts = trimmed.split(/[._-]+/).filter(Boolean)
+  const meaningfulParts = parts.length > 2 ? parts.slice(-2) : parts
+  const sentence = meaningfulParts.join(' ')
+  return sentence.charAt(0).toUpperCase() + sentence.slice(1)
+}
+
 export function ErrorMessage({ label, description, action, className, iconClassName }: ErrorMessageProps) {
+  const displayLabel = formatErrorMessageLabel(label)
+  const displayDescription = description ? formatErrorMessageLabel(description) : undefined
+
   return (
     <div
       className={cn(
@@ -23,8 +38,8 @@ export function ErrorMessage({ label, description, action, className, iconClassN
     >
       <AlertCircle className={cn('h-4 w-4 flex-none', iconClassName)} aria-hidden />
       <div className="space-y-1">
-        <p className="leading-tight">{label}</p>
-        {description ? <p className="text-muted-foreground">{description}</p> : null}
+        <p className="leading-tight">{displayLabel}</p>
+        {displayDescription ? <p className="text-muted-foreground">{displayDescription}</p> : null}
         {action ? <div className="pt-1">{action}</div> : null}
       </div>
     </div>

package/src/backend/detail/__tests__/ErrorMessage.test.tsx

@@ -0,0 +1,15 @@
+import { formatErrorMessageLabel } from '../ErrorMessage'
+
+describe('formatErrorMessageLabel', () => {
+  it('keeps normal user-facing labels unchanged', () => {
+    expect(formatErrorMessageLabel('Failed to load product details.')).toBe('Failed to load product details.')
+  })
+
+  it('formats technical snake-case labels into readable text', () => {
+    expect(formatErrorMessageLabel('load_failed')).toBe('Load failed')
+  })
+
+  it('uses the meaningful tail of dotted error keys', () => {
+    expect(formatErrorMessageLabel('catalog.products.load_failed')).toBe('Load failed')
+  })
+})