npm - @messagevisor/catalog - Versions diffs - 0.9.0 → 0.15.0 - Mend

@messagevisor/catalog 0.9.0 → 0.15.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/dist/assets/index-Bic-2mlS.css +1 -0
package/dist/assets/index-C8ldlvUw.js +73 -0
package/dist/index.html +2 -2
package/package.json +2 -2
package/src/pages/EntityDetailPage.tsx +163 -1
package/src/utils/relevantIcuFormats.spec.ts +99 -0
package/src/utils/relevantIcuFormats.ts +129 -0
package/dist/assets/index-9TVwIAiT.js +0 -73
package/dist/assets/index-BgEITLIy.css +0 -1

package/dist/index.html CHANGED Viewed

@@ -5,8 +5,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="icon" type="image/png" href="/favicon.png" />
     <title>Messagevisor Catalog</title>
-    <script type="module" crossorigin src="/assets/index-9TVwIAiT.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-BgEITLIy.css">
+    <script type="module" crossorigin src="/assets/index-C8ldlvUw.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-Bic-2mlS.css">
   </head>
   <body>
     <div id="root"></div>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@messagevisor/catalog",
-  "version": "0.9.0",
+  "version": "0.15.0",
   "description": "Static catalog UI for Messagevisor projects",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -57,5 +57,5 @@
     "typescript": "^5.7.2",
     "vite": "^6.0.7"
   },
-  "gitHead": "0848f5c7cd310e1a3ff0c38a6b0697d77aa72970"
+  "gitHead": "e55dae69236c887ef9a689cc2983272a77dfae38"
 }

package/src/pages/EntityDetailPage.tsx CHANGED Viewed

@@ -50,6 +50,7 @@ import {
   type DuplicateValuesSort,
   type SortDirection,
 } from "../utils/duplicateSorting";
+import { getRelevantIcuFormats } from "../utils/relevantIcuFormats";
 import type { ParsedQuery } from "../utils/searchQuery";
 import { parseQuery } from "../utils/searchQuery";
@@ -342,6 +343,19 @@ function orderedFormatTypePillKeys(typesFromData: string[]): string[] {
   return [...FORMAT_TYPE_PRIMARY_PILLS, ...rest];
 }
+function orderedFormatSectionKeys(typesFromData: string[]): string[] {
+  const available = new Set(typesFromData);
+  const primary = FORMAT_TYPE_PRIMARY_PILLS.filter((type) => available.has(type));
+  const rest = typesFromData
+    .filter((type) => !FORMAT_TYPE_PRIMARY_PILLS.includes(type))
+    .sort((a, b) => a.localeCompare(b));
+  return [...primary, ...rest];
+}
+function formatStyleFragmentId(type: string, style: string): string {
+  return `format-${slugifyFragment(`${type}-${style || "default"}`)}`;
+}
 function setSearchParam(searchParams: URLSearchParams, key: string, value?: string) {
   const next = new URLSearchParams(searchParams);
@@ -729,6 +743,8 @@ function FormatRowsTable(props: {
     );
   }
+  useScrollToHash([splitPath, q, props.selectedFormatType, rows.length, visibleRows.length]);
   if (rows.length === 0) {
     return <p className="text-sm text-muted">No formats found.</p>;
   }
@@ -743,6 +759,19 @@ function FormatRowsTable(props: {
   }
   const splitPlans = splitPath ? buildFormatSplitRowPlans(visibleRows) : null;
+  const splitSectionKeys = splitPath
+    ? orderedFormatSectionKeys(collectSortedFormatTypes(visibleRows))
+    : [];
+  const splitRowsByType = splitPath
+    ? visibleRows.reduce<Record<string, FormatRow[]>>((groups, row) => {
+        const type = splitFormatPath(row.path).type;
+        if (!groups[type]) {
+          groups[type] = [];
+        }
+        groups[type].push(row);
+        return groups;
+      }, {})
+    : {};
   function segmentBody(segment: string) {
     return segment ? (
@@ -820,10 +849,16 @@ function FormatRowsTable(props: {
   function renderSplitStyleCellContent(plan: FormatSplitRowPlan) {
     const sourceMeta = renderFormatSourceMeta(plan.row);
+    const fragmentId = formatStyleFragmentId(plan.parts.type, plan.parts.style);
     return (
       <div className="flex min-w-0 flex-col items-start gap-1.5">
-        <div className="w-full min-w-0">{renderSplitSegment(plan.parts.style, "style")}</div>
+        <a
+          href={`#${fragmentId}`}
+          className="w-full min-w-0 rounded-sm text-text hover:text-primary hover:underline"
+        >
+          {renderSplitSegment(plan.parts.style, "style")}
+        </a>
         {sourceMeta}
       </div>
     );
@@ -920,6 +955,109 @@ function FormatRowsTable(props: {
     );
   }
+  function renderSplitTable(plans: FormatSplitRowPlan[]) {
+    return (
+      <div className="min-w-0 overflow-x-auto rounded-lg border border-border">
+        <table className="w-full min-w-[34rem] table-fixed border-collapse bg-surface text-xs">
+          <colgroup>
+            {showExampleColumn ? (
+              <>
+                <col className="min-w-0 w-[24%]" />
+                <col className="min-w-0 w-[18%]" />
+                <col className="min-w-0 w-[28%]" />
+                <col className="min-w-0 w-[30%]" />
+              </>
+            ) : (
+              <>
+                <col className="min-w-0 w-[30%]" />
+                <col className="min-w-0 w-[30%]" />
+                <col className="min-w-0 w-[40%]" />
+              </>
+            )}
+          </colgroup>
+          <thead className="bg-elevated text-left text-[11px] uppercase tracking-wide text-muted">
+            <tr>
+              <th className="align-middle border-b border-r border-border/50 px-3 py-2 font-semibold">
+                Style
+              </th>
+              {showExampleColumn ? (
+                <th className="align-middle border-b border-r border-border/50 px-3 py-2 font-semibold">
+                  Example
+                </th>
+              ) : null}
+              <th className="align-middle border-b border-r border-border/40 px-3 py-2 font-semibold">
+                Param
+              </th>
+              <th className="align-middle border-b border-border px-3 py-2 font-semibold">Value</th>
+            </tr>
+          </thead>
+          <tbody>
+            {plans.map((plan) => {
+              const bandClass = bandSurfaceClass(plan.typeBand);
+              return (
+                <tr key={plan.row.path}>
+                  {plan.showStyleCell ? (
+                    <td
+                      id={formatStyleFragmentId(plan.parts.type, plan.parts.style)}
+                      rowSpan={plan.styleRowSpan}
+                      className={[
+                        "align-middle min-w-0 scroll-mt-2 px-3 py-2 font-medium",
+                        bandClass,
+                        formatSplitCellBorderClass("style"),
+                      ].join(" ")}
+                    >
+                      {renderSplitStyleCellContent(plan)}
+                    </td>
+                  ) : null}
+                  {renderSplitExampleColumn(plan, bandClass)}
+                  <td
+                    className={[
+                      "align-middle min-w-0 px-3 py-2 font-medium text-muted",
+                      bandClass,
+                      formatSplitCellBorderClass("param"),
+                    ].join(" ")}
+                  >
+                    {renderSplitSegment(plan.parts.param, "param")}
+                  </td>
+                  {renderValueColumn(
+                    plan.row,
+                    ["align-middle min-w-0 px-3 py-2", bandClass].join(" "),
+                  )}
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+      </div>
+    );
+  }
+  if (splitPath) {
+    return (
+      <div className="space-y-5">
+        {splitSectionKeys.map((typeKey) => {
+          const sectionRows = splitRowsByType[typeKey] || [];
+          const sectionPlans = buildFormatSplitRowPlans(sectionRows);
+          const styleCount = new Set(
+            sectionRows.map((row) => splitFormatPath(row.path).style).filter(Boolean),
+          ).size;
+          return (
+            <section key={typeKey} className="space-y-2">
+              <div className="flex items-baseline justify-between gap-3">
+                <h3 className="text-sm font-semibold text-text">{typeKey}</h3>
+                <span className="text-xs text-muted">
+                  {styleCount} {styleCount === 1 ? "style" : "styles"}
+                </span>
+              </div>
+              {renderSplitTable(sectionPlans)}
+            </section>
+          );
+        })}
+      </div>
+    );
+  }
   return (
     <div className="min-w-0 overflow-x-auto rounded-xl border border-border">
       <table className="w-full min-w-[40rem] table-fixed border-collapse bg-surface text-xs">
@@ -2405,12 +2543,18 @@ function LocaleExampleDetails(props: {
   example: EvaluatedLocaleExample;
   setKey?: string;
   localeDirection?: string;
+  computedFormats?: unknown;
   showLocale?: boolean;
   highlightQuery?: string;
 }) {
   const { example, setKey, localeDirection } = props;
   const q = props.highlightQuery?.trim() ?? "";
   const highlight = Boolean(q);
+  const relevantFormats = getRelevantIcuFormats(
+    example.rawMessage || example.originalTranslation,
+    props.computedFormats,
+    example.formats,
+  );
   function localeLink(localeKey: string) {
     return highlight ? (
@@ -2562,6 +2706,18 @@ function LocaleExampleDetails(props: {
           )}
         </InputField>
       )}
+      {typeof relevantFormats !== "undefined" && (
+        <InputField label="Relevant formats">
+          {highlight ? (
+            <pre className="max-w-full whitespace-pre-wrap rounded border border-border bg-elevated p-4 text-xs text-text [overflow-wrap:anywhere]">
+              <SearchHighlight text={JSON.stringify(relevantFormats, null, 2)} query={q} />
+            </pre>
+          ) : (
+            <JsonValueBlock value={relevantFormats} />
+          )}
+        </InputField>
+      )}
     </div>
   );
 }
@@ -2570,6 +2726,7 @@ function LocaleExamplesExpandedView(props: {
   examples: EvaluatedLocaleExample[];
   setKey?: string;
   localeDirection?: string;
+  computedFormats?: unknown;
   searchQuery: string;
 }) {
   return (
@@ -2595,6 +2752,7 @@ function LocaleExamplesExpandedView(props: {
                   example={example}
                   setKey={props.setKey}
                   localeDirection={props.localeDirection}
+                  computedFormats={props.computedFormats}
                   showLocale={false}
                   highlightQuery={props.searchQuery}
                 />
@@ -2614,6 +2772,7 @@ function LocaleExamplesCompactView(props: {
   examples: EvaluatedLocaleExample[];
   setKey?: string;
   localeDirection?: string;
+  computedFormats?: unknown;
   searchQuery: string;
 }) {
   const [expandedExampleIds, setExpandedExampleIds] = React.useState<string[]>([]);
@@ -2753,6 +2912,7 @@ function LocaleExamplesCompactView(props: {
                           example={example}
                           setKey={props.setKey}
                           localeDirection={props.localeDirection}
+                          computedFormats={props.computedFormats}
                           showLocale={false}
                           highlightQuery={props.searchQuery}
                         />
@@ -2888,6 +3048,7 @@ export function LocaleExamplesTab() {
           examples={filteredExamples}
           setKey={setKey}
           localeDirection={localeDirection}
+          computedFormats={detail.computedFormats}
           searchQuery={searchQuery}
         />
       ) : (
@@ -2895,6 +3056,7 @@ export function LocaleExamplesTab() {
           examples={filteredExamples}
           setKey={setKey}
           localeDirection={localeDirection}
+          computedFormats={detail.computedFormats}
           searchQuery={searchQuery}
         />
       )}

package/src/utils/relevantIcuFormats.spec.ts ADDED Viewed

@@ -0,0 +1,99 @@
+import { extractIcuFormatStyleReferences, getRelevantIcuFormats } from "./relevantIcuFormats";
+describe("relevant ICU formats", function () {
+  const computedFormats = {
+    number: {
+      decimal: { maximumFractionDigits: 2 },
+      roundingExpand: { maximumFractionDigits: 2, roundingMode: "expand" },
+    },
+    date: {
+      fullStyle: { dateStyle: "full" },
+    },
+    time: {
+      seconds: { hour: "numeric", minute: "2-digit", second: "2-digit" },
+    },
+  };
+  it("finds a named number style in a raw message", function () {
+    expect(
+      getRelevantIcuFormats("Value: {value, number, roundingExpand}", computedFormats),
+    ).toEqual({
+      number: {
+        roundingExpand: { maximumFractionDigits: 2, roundingMode: "expand" },
+      },
+    });
+  });
+  it("can use the original translation from a message-key example", function () {
+    expect(getRelevantIcuFormats("Amount: {amount, number, decimal}", computedFormats)).toEqual({
+      number: {
+        decimal: { maximumFractionDigits: 2 },
+      },
+    });
+  });
+  it("includes date and time styles", function () {
+    expect(
+      getRelevantIcuFormats(
+        "When: {when, date, fullStyle} at {when, time, seconds}",
+        computedFormats,
+      ),
+    ).toEqual({
+      date: {
+        fullStyle: { dateStyle: "full" },
+      },
+      time: {
+        seconds: { hour: "numeric", minute: "2-digit", second: "2-digit" },
+      },
+    });
+  });
+  it("deduplicates repeated styles while preserving first-seen type order", function () {
+    expect(
+      extractIcuFormatStyleReferences(
+        "{amount, number, decimal} then {otherAmount, number, decimal}",
+      ),
+    ).toEqual({
+      number: ["decimal"],
+    });
+  });
+  it("finds style references nested in ICU plural and select branches", function () {
+    expect(
+      getRelevantIcuFormats(
+        "{count, plural, one {{amount, number, decimal}} other {{when, date, fullStyle}}}",
+        computedFormats,
+      ),
+    ).toEqual({
+      number: {
+        decimal: { maximumFractionDigits: 2 },
+      },
+      date: {
+        fullStyle: { dateStyle: "full" },
+      },
+    });
+  });
+  it("ignores unknown styles, skeletons, and non-format ICU constructs", function () {
+    expect(
+      getRelevantIcuFormats(
+        "{amount, number, missing} {when, date, ::yyyyMMdd} {status, select, open {Open} other {Other}}",
+        computedFormats,
+      ),
+    ).toBeUndefined();
+  });
+  it("applies inline example formats as style-level overrides", function () {
+    expect(
+      getRelevantIcuFormats("{amount, number, decimal}", computedFormats, {
+        number: {
+          decimal: { maximumFractionDigits: 4 },
+        },
+      }),
+    ).toEqual({
+      number: {
+        decimal: { maximumFractionDigits: 4 },
+      },
+    });
+  });
+});

package/src/utils/relevantIcuFormats.ts ADDED Viewed

@@ -0,0 +1,129 @@
+type FormatBucket = Record<string, unknown>;
+type FormatPresetsLike = Record<string, FormatBucket | unknown>;
+const ICU_FORMAT_TYPES = ["number", "date", "time"] as const;
+type IcuFormatType = (typeof ICU_FORMAT_TYPES)[number];
+const ICU_FORMAT_TYPE_SET = new Set<string>(ICU_FORMAT_TYPES);
+function isPlainObject(value: unknown): value is Record<string, unknown> {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function mergeFormatPresetsLike(
+  parent?: FormatPresetsLike,
+  child?: FormatPresetsLike,
+): FormatPresetsLike | undefined {
+  if (!isPlainObject(parent)) {
+    return isPlainObject(child) ? child : undefined;
+  }
+  if (!isPlainObject(child)) {
+    return parent;
+  }
+  const result: FormatPresetsLike = { ...parent };
+  for (const typeKey of Object.keys(child)) {
+    const parentStyles = result[typeKey];
+    const childStyles = child[typeKey];
+    if (!isPlainObject(parentStyles) || !isPlainObject(childStyles)) {
+      result[typeKey] = childStyles;
+      continue;
+    }
+    result[typeKey] = {
+      ...parentStyles,
+      ...childStyles,
+    };
+  }
+  return result;
+}
+function normalizeIcuStyleName(value: string) {
+  const style = value.trim();
+  if (!style || style.startsWith("::")) {
+    return undefined;
+  }
+  return style.replace(/,$/, "").trim() || undefined;
+}
+export function extractIcuFormatStyleReferences(message: string | undefined) {
+  const references: Partial<Record<IcuFormatType, string[]>> = {};
+  if (!message) {
+    return references;
+  }
+  const pattern = /\{[^{}]*,\s*(number|date|time)\s*,\s*([^{}]+?)\}/g;
+  let match: RegExpExecArray | null;
+  while ((match = pattern.exec(message))) {
+    const type = match[1] as IcuFormatType;
+    const style = normalizeIcuStyleName(match[2]);
+    if (!style) {
+      continue;
+    }
+    if (!references[type]) {
+      references[type] = [];
+    }
+    if (!references[type]!.includes(style)) {
+      references[type]!.push(style);
+    }
+  }
+  return references;
+}
+export function getRelevantIcuFormats(
+  message: string | undefined,
+  computedFormats: unknown,
+  exampleFormats?: unknown,
+) {
+  const effectiveFormats = mergeFormatPresetsLike(
+    isPlainObject(computedFormats) ? computedFormats : undefined,
+    isPlainObject(exampleFormats) ? exampleFormats : undefined,
+  );
+  const references = extractIcuFormatStyleReferences(message);
+  const relevant: Partial<Record<IcuFormatType, Record<string, unknown>>> = {};
+  if (!effectiveFormats) {
+    return undefined;
+  }
+  for (const typeKey of Object.keys(references)) {
+    if (!ICU_FORMAT_TYPE_SET.has(typeKey)) {
+      continue;
+    }
+    const type = typeKey as IcuFormatType;
+    const styles = references[type] || [];
+    const availableStyles = effectiveFormats[type];
+    if (!isPlainObject(availableStyles)) {
+      continue;
+    }
+    for (const style of styles) {
+      if (!Object.prototype.hasOwnProperty.call(availableStyles, style)) {
+        continue;
+      }
+      if (!relevant[type]) {
+        relevant[type] = {};
+      }
+      relevant[type]![style] = availableStyles[style];
+    }
+  }
+  return Object.keys(relevant).length > 0 ? relevant : undefined;
+}