@wheelhouse/ui 0.2.3 → 0.2.4

package/dist/components/filters/filter-date-metric-value.js

@@ -183,6 +183,9 @@ const METRIC_EMPTY_AMOUNT = '\u2013';
 /** Spaces around the en dash so empty segments don’t feel cramped (e.g. `$ – `). */
 const METRIC_EMPTY_DISPLAY = ` ${METRIC_EMPTY_AMOUNT} `;
 const metricAmountFormatters = new Map();
+const metricIntegerFormatters = new Map();
+const metricPercentFormatters = new Map();
+const metricPercentSuffixLiteralByLocale = new Map();
 function formatMetricAmountDigits(value, locale) {
     let nf = metricAmountFormatters.get(locale);
     if (!nf) {
@@ -204,11 +207,82 @@ function formatMetricAmountDigits(value, locale) {
     }
     return nf.format(value);
 }
-/** Bar label: `sym` + grouped amount, or `sym` + spaced en dash when empty. */
-function formatMetricMoney(sym, value, locale) {
+function formatMetricIntegerDigits(value, locale) {
+    let nf = metricIntegerFormatters.get(locale);
+    if (!nf) {
+        try {
+            nf = new Intl.NumberFormat(locale, { maximumFractionDigits: 0, useGrouping: true });
+        }
+        catch {
+            nf = new Intl.NumberFormat('en-US', { maximumFractionDigits: 0, useGrouping: true });
+        }
+        metricIntegerFormatters.set(locale, nf);
+    }
+    return nf.format(value);
+}
+function dateMetricBarValueFormat(field) {
+    return field.dateMetricValueFormat ?? 'currency';
+}
+/** Suffix literals from `Intl` for an empty percent segment (locale-specific spacing, RTL, etc.). */
+function percentBarSuffixLiteral(locale) {
+    let s = metricPercentSuffixLiteralByLocale.get(locale);
+    if (s !== undefined)
+        return s;
+    try {
+        const nf = new Intl.NumberFormat(locale, { style: 'percent', maximumFractionDigits: 0 });
+        s = nf
+            .formatToParts(1)
+            .filter((p) => p.type === 'literal')
+            .map((p) => p.value)
+            .join('');
+    }
+    catch {
+        s = '%';
+    }
+    if (!s)
+        s = '%';
+    metricPercentSuffixLiteralByLocale.set(locale, s);
+    return s;
+}
+/** `value` is percentage points (e.g. 85 → 85%); `Intl` expects a ratio, so divide by 100. */
+function formatMetricPercentFromPercentagePoints(value, locale) {
+    let nf = metricPercentFormatters.get(locale);
+    if (!nf) {
+        try {
+            nf = new Intl.NumberFormat(locale, {
+                style: 'percent',
+                minimumFractionDigits: 0,
+                maximumFractionDigits: 20,
+                useGrouping: true,
+            });
+        }
+        catch {
+            nf = new Intl.NumberFormat('en-US', {
+                style: 'percent',
+                minimumFractionDigits: 0,
+                maximumFractionDigits: 20,
+                useGrouping: true,
+            });
+        }
+        metricPercentFormatters.set(locale, nf);
+    }
+    return nf.format(value / 100);
+}
+/** Bar label for a single threshold: currency, percent, or integer locale formatting. */
+function formatDateMetricBarAmount(value, format, locale, currencySym) {
+    if (format === 'currency') {
+        if (value == null || Number.isNaN(value))
+            return `${currencySym}${METRIC_EMPTY_DISPLAY}`;
+        return `${currencySym}${formatMetricAmountDigits(value, locale)}`;
+    }
+    if (format === 'integer') {
+        if (value == null || Number.isNaN(value))
+            return METRIC_EMPTY_DISPLAY;
+        return formatMetricIntegerDigits(value, locale);
+    }
     if (value == null || Number.isNaN(value))
-        return `${sym}${METRIC_EMPTY_DISPLAY}`;
-    return `${sym}${formatMetricAmountDigits(value, locale)}`;
+        return `${METRIC_EMPTY_DISPLAY}${percentBarSuffixLiteral(locale)}`;
+    return formatMetricPercentFromPercentagePoints(value, locale);
 }
 function parseDraftNumber(raw, previous) {
     if (raw.trim() === '')
@@ -277,6 +351,7 @@ export function FilterDateMetricBarValueSegment({ field, values, onChange, opera
     const valueAnyOperator = operators.find((o) => o.value === 'value_any');
     const sym = i18n.defaultCurrency;
     const numberLocale = i18n.numberFormatLocale;
+    const barValueFormat = dateMetricBarValueFormat(field);
     const inputSizeProp = size === 'lg' ? 'default' : 'sm';
     const buttonSize = size === 'lg' ? 'lg' : size === 'sm' ? 'sm' : 'default';
     const valueSegment = (() => {
@@ -290,7 +365,7 @@ export function FilterDateMetricBarValueSegment({ field, values, onChange, opera
         }
         if (operator === 'value_greater_than') {
             const hasMinValue = payload.min != null && !Number.isNaN(payload.min);
-            const summary = formatMetricMoney(sym, payload.min ?? undefined, numberLocale);
+            const summary = formatDateMetricBarAmount(payload.min ?? undefined, barValueFormat, numberLocale, sym);
             const triggerLabel = `${i18n.operators.greaterThan}: ${summary}`;
             return (_jsx(MetricValueThresholdPopoverShell, { open: metricPopoverOpen, onOpenChange: handleMetricPopoverOpenChange, buttonSize: buttonSize, triggerLabel: triggerLabel, summary: summary, triggerClassName: cn(METRIC_POPOVER_TRIGGER_NARROW, !hasMinValue ? 'text-muted-foreground' : 'text-foreground'), children: _jsx(Input, { type: "number", size: inputSizeProp, className: "w-full min-w-0 tabular-nums", value: draftMin, onChange: (e) => {
                         const v = e.target.value;
@@ -300,7 +375,7 @@ export function FilterDateMetricBarValueSegment({ field, values, onChange, opera
         }
         if (operator === 'value_less_than') {
             const hasMaxValue = payload.max != null && !Number.isNaN(payload.max);
-            const summary = formatMetricMoney(sym, payload.max ?? undefined, numberLocale);
+            const summary = formatDateMetricBarAmount(payload.max ?? undefined, barValueFormat, numberLocale, sym);
             const triggerLabel = `${i18n.operators.lessThan}: ${summary}`;
             return (_jsx(MetricValueThresholdPopoverShell, { open: metricPopoverOpen, onOpenChange: handleMetricPopoverOpenChange, buttonSize: buttonSize, triggerLabel: triggerLabel, summary: summary, triggerClassName: cn(METRIC_POPOVER_TRIGGER_NARROW, !hasMaxValue ? 'text-muted-foreground' : 'text-foreground'), children: _jsx(Input, { type: "number", size: inputSizeProp, className: "w-full min-w-0 tabular-nums", value: draftMax, onChange: (e) => {
                         const v = e.target.value;
@@ -311,8 +386,8 @@ export function FilterDateMetricBarValueSegment({ field, values, onChange, opera
         if (operator === 'value_between') {
             const hasMinValue = payload.min != null && !Number.isNaN(payload.min);
             const hasMaxValue = payload.max != null && !Number.isNaN(payload.max);
-            const minPart = formatMetricMoney(sym, payload.min ?? undefined, numberLocale);
-            const maxPart = formatMetricMoney(sym, payload.max ?? undefined, numberLocale);
+            const minPart = formatDateMetricBarAmount(payload.min ?? undefined, barValueFormat, numberLocale, sym);
+            const maxPart = formatDateMetricBarAmount(payload.max ?? undefined, barValueFormat, numberLocale, sym);
             const summary = `${minPart} - ${maxPart}`;
             const triggerLabel = `${i18n.operators.between}: ${summary}`;
             return (_jsx(MetricValueThresholdPopoverShell, { open: metricPopoverOpen, onOpenChange: handleMetricPopoverOpenChange, buttonSize: buttonSize, triggerLabel: triggerLabel, summary: summary, triggerClassName: cn(METRIC_POPOVER_TRIGGER_WIDE, !hasMinValue && !hasMaxValue ? 'text-muted-foreground' : 'text-foreground'), children: _jsxs("div", { className: "flex w-full flex-col gap-1.5", children: [_jsx(Input, { type: "number", size: inputSizeProp, className: "w-full min-w-0 tabular-nums", value: draftMin, onChange: (e) => {

package/dist/components/filters/filter-fields-listing-demo.d.ts

@@ -0,0 +1,12 @@
+import type { i18n as I18nInstance, TFunction } from 'i18next';
+import type { DateSelectorI18nConfig } from '../../blocks/date-selector/date-selector-types';
+import type { FilterFieldConfig, FilterFieldsConfig } from './filters-types';
+/** Flat fields for minimal `Default` / `WithOneFilter` stories (real listing keys). */
+export declare function buildListingDemoFields(t: TFunction): FilterFieldConfig[];
+/** Grouped listing catalog for `GroupedFieldsAndSearch` (keys and shapes mirror app listing filters). */
+export declare function buildListingGroupedFields(t: TFunction, dateSelectorI18n: DateSelectorI18nConfig, i18n: I18nInstance): FilterFieldsConfig;
+/** Flat listing fields for docs previews (no filter i18n bundle required). */
+export declare function buildListingDemoFieldsForDocs(): FilterFieldConfig[];
+/** Grouped listing catalog for docs previews; pass docs `I18nextProvider` instance and date-selector copy. */
+export declare function buildListingGroupedFieldsForDocs(dateSelectorI18n: DateSelectorI18nConfig, i18n: I18nInstance): FilterFieldsConfig;
+//# sourceMappingURL=filter-fields-listing-demo.d.ts.map

package/dist/components/filters/filter-fields-listing-demo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter-fields-listing-demo.d.ts","sourceRoot":"","sources":["../../../src/components/filters/filter-fields-listing-demo.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,IAAI,YAAY,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAyB/D,OAAO,KAAK,EAAE,sBAAsB,EAA8C,MAAM,gDAAgD,CAAC;AACzI,OAAO,KAAK,EAAE,iBAAiB,EAAE,kBAAkB,EAAkB,MAAM,iBAAiB,CAAC;AA0D7F,uFAAuF;AACvF,wBAAgB,sBAAsB,CAAC,CAAC,EAAE,SAAS,GAAG,iBAAiB,EAAE,CA+BxE;AAED,yGAAyG;AACzG,wBAAgB,yBAAyB,CAAC,CAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,IAAI,EAAE,YAAY,GAAG,kBAAkB,CA0dxI;AAED,8EAA8E;AAC9E,wBAAgB,6BAA6B,IAAI,iBAAiB,EAAE,CAEnE;AAED,8GAA8G;AAC9G,wBAAgB,gCAAgC,CAAC,gBAAgB,EAAE,sBAAsB,EAAE,IAAI,EAAE,YAAY,GAAG,kBAAkB,CAEjI"}