@astryxdesign/core 0.1.6 → 0.1.7-canary.04cd8f7

package/src/PowerSearch/PowerSearchValueEditor.tsx

@@ -32,6 +32,7 @@ import {TimeInput} from '../TimeInput';
 import {Selector} from '../Selector';
 import {Tokenizer} from '../Tokenizer';
 import {Typeahead} from '../Typeahead';
+import {useTranslator} from '../i18n';
 
 export interface PowerSearchValueEditorProps {
   operatorValue: OperatorValue;
@@ -85,6 +86,7 @@ function StringEditor({
   onChange: (value: FilterValue, shouldSave?: boolean) => void;
   onEnter?: () => void;
 }) {
+  const t = useTranslator();
   const currentValue = filterValue?.type === 'string' ? filterValue.value : '';
 
   // When a searchSource is provided, render a typeahead instead of a plain
@@ -96,7 +98,7 @@ function StringEditor({
 
     return (
       <Typeahead
-        label="Value"
+        label={t('@astryx.powersearch.valueEditor.value')}
         isLabelHidden
         searchSource={operatorValue.searchSource}
         value={selectedItem}
@@ -107,7 +109,7 @@ function StringEditor({
             onChange({type: 'string', value: ''});
           }
         }}
-        placeholder="Search..."
+        placeholder={t('@astryx.powersearch.valueEditor.searchPlaceholder')}
         debounceMs={150}
       />
     );
@@ -115,10 +117,10 @@ function StringEditor({
 
   return (
     <TextInput
-      label="Value"
+      label={t('@astryx.powersearch.valueEditor.value')}
       isLabelHidden
       value={currentValue}
-      placeholder="Enter value..."
+      placeholder={t('@astryx.powersearch.valueEditor.enterValuePlaceholder')}
       onChange={(value: string) => {
         onChange({type: 'string', value});
       }}
@@ -135,6 +137,7 @@ function StringListEditor({
   filterValue: FilterValue | undefined;
   onChange: (value: FilterValue) => void;
 }) {
+  const t = useTranslator();
   const currentValue: SearchableItem[] = useMemo(() => {
     if (filterValue?.type !== 'string_list') {
       return [];
@@ -160,7 +163,7 @@ function StringListEditor({
 
   return (
     <Tokenizer
-      label="Values"
+      label={t('@astryx.powersearch.valueEditor.values')}
       isLabelHidden
       searchSource={source}
       value={currentValue}
@@ -170,7 +173,7 @@ function StringListEditor({
           value: items.map(item => item.label),
         });
       }}
-      placeholder="Add values..."
+      placeholder={t('@astryx.powersearch.valueEditor.addValuesPlaceholder')}
       debounceMs={operatorValue.searchSource ? 150 : 0}
       hasCreate={hasCreate}
     />
@@ -186,12 +189,13 @@ function IntegerEditor({
   filterValue: FilterValue | undefined;
   onChange: (value: FilterValue) => void;
 }) {
+  const t = useTranslator();
   const currentValue =
     filterValue?.type === 'integer' ? filterValue.value : undefined;
 
   return (
     <NumberInput
-      label="Value"
+      label={t('@astryx.powersearch.valueEditor.value')}
       isLabelHidden
       value={currentValue ?? null}
       onChange={(value: number) => {
@@ -201,7 +205,7 @@ function IntegerEditor({
       max={operatorValue.maxValue}
       units={operatorValue.units}
       isIntegerOnly
-      placeholder="Enter number..."
+      placeholder={t('@astryx.powersearch.valueEditor.enterNumberPlaceholder')}
     />
   );
 }
@@ -215,12 +219,13 @@ function FloatEditor({
   filterValue: FilterValue | undefined;
   onChange: (value: FilterValue) => void;
 }) {
+  const t = useTranslator();
   const currentValue =
     filterValue?.type === 'float' ? filterValue.value : undefined;
 
   return (
     <NumberInput
-      label="Value"
+      label={t('@astryx.powersearch.valueEditor.value')}
       isLabelHidden
       value={currentValue ?? null}
       onChange={(value: number) => {
@@ -229,7 +234,7 @@ function FloatEditor({
       min={operatorValue.minValue}
       max={operatorValue.maxValue}
       units={operatorValue.units}
-      placeholder="Enter number..."
+      placeholder={t('@astryx.powersearch.valueEditor.enterNumberPlaceholder')}
     />
   );
 }
@@ -243,6 +248,7 @@ function TimeEditor({
   filterValue: FilterValue | undefined;
   onChange: (value: FilterValue) => void;
 }) {
+  const t = useTranslator();
   const currentValue =
     filterValue?.type === 'time'
       ? (filterValue.value as ISOTimeString)
@@ -250,7 +256,7 @@ function TimeEditor({
 
   return (
     <TimeInput
-      label="Time"
+      label={t('@astryx.powersearch.valueEditor.time')}
       isLabelHidden
       value={currentValue}
       onChange={value => {
@@ -272,6 +278,7 @@ function DateAbsoluteEditor({
   filterValue: FilterValue | undefined;
   onChange: (value: FilterValue) => void;
 }) {
+  const t = useTranslator();
   // Convert unixSeconds to ISO date string for the date input
   const currentValue = useMemo(() => {
     if (filterValue?.type !== 'date_absolute') {
@@ -283,7 +290,7 @@ function DateAbsoluteEditor({
 
   return (
     <DateInput
-      label="Date"
+      label={t('@astryx.powersearch.valueEditor.date')}
       isLabelHidden
       value={currentValue}
       onChange={value => {
@@ -305,6 +312,7 @@ function DateRelativeEditor({
   filterValue: FilterValue | undefined;
   onChange: (value: FilterValue, shouldSave?: boolean) => void;
 }) {
+  const t = useTranslator();
   const currentValue =
     filterValue?.type === 'date_relative' ? filterValue.value : undefined;
 
@@ -342,7 +350,7 @@ function DateRelativeEditor({
 
   return (
     <Selector
-      label="Relative date"
+      label={t('@astryx.powersearch.valueEditor.relativeDate')}
       isLabelHidden
       options={options}
       value={currentValue}
@@ -361,6 +369,7 @@ function DateRangeEditor({
   filterValue: FilterValue | undefined;
   onChange: (value: FilterValue) => void;
 }) {
+  const t = useTranslator();
   const startValue = useMemo(() => {
     if (filterValue?.type !== 'date_range') {
       return undefined;
@@ -428,13 +437,13 @@ function DateRangeEditor({
   return (
     <>
       <DateInput
-        label="Start date"
+        label={t('@astryx.powersearch.valueEditor.startDate')}
         isLabelHidden
         value={startValue}
         onChange={handleStartChange}
       />
       <DateInput
-        label="End date"
+        label={t('@astryx.powersearch.valueEditor.endDate')}
         isLabelHidden
         value={endValue}
         onChange={handleEndChange}
@@ -452,6 +461,7 @@ function EnumEditor({
   filterValue: FilterValue | undefined;
   onChange: (value: FilterValue, shouldSave?: boolean) => void;
 }) {
+  const t = useTranslator();
   const currentValue =
     filterValue?.type === 'enum' ? filterValue.value : undefined;
 
@@ -466,7 +476,7 @@ function EnumEditor({
 
   return (
     <Selector
-      label="Value"
+      label={t('@astryx.powersearch.valueEditor.value')}
       isLabelHidden
       options={options}
       value={currentValue}
@@ -486,6 +496,7 @@ function EnumListEditor({
   filterValue: FilterValue | undefined;
   onChange: (value: FilterValue) => void;
 }) {
+  const t = useTranslator();
   const items = useMemo(
     () => enumItemsToSearchableItems(operatorValue.values),
     [operatorValue.values],
@@ -505,7 +516,7 @@ function EnumListEditor({
 
   return (
     <Tokenizer
-      label="Values"
+      label={t('@astryx.powersearch.valueEditor.values')}
       isLabelHidden
       searchSource={source}
       value={currentValue}
@@ -515,7 +526,7 @@ function EnumListEditor({
           value: selectedItems.map(item => item.id),
         });
       }}
-      placeholder="Select values..."
+      placeholder={t('@astryx.powersearch.valueEditor.selectValuesPlaceholder')}
       hasEntriesOnFocus
       debounceMs={0}
     />
@@ -531,6 +542,7 @@ function EntityListEditor({
   filterValue: FilterValue | undefined;
   onChange: (value: FilterValue) => void;
 }) {
+  const t = useTranslator();
   const source = useMemo<SearchSource<SearchableItem>>(() => {
     if (operatorValue.searchSource) {
       return operatorValue.searchSource;
@@ -555,7 +567,7 @@ function EntityListEditor({
 
   return (
     <Tokenizer
-      label="Entities"
+      label={t('@astryx.powersearch.valueEditor.entities')}
       isLabelHidden
       searchSource={source}
       value={currentValue}
@@ -574,7 +586,7 @@ function EntityListEditor({
         });
       }}
       renderItem={operatorValue.renderItem}
-      placeholder="Search..."
+      placeholder={t('@astryx.powersearch.valueEditor.searchPlaceholder')}
       debounceMs={operatorValue.searchSource ? 150 : 0}
     />
   );
@@ -591,6 +603,7 @@ function CustomEditor({
   onChange: (value: FilterValue) => void;
   isDisabled?: boolean;
 }) {
+  const t = useTranslator();
   const currentValue =
     filterValue?.type === 'custom' ? filterValue.value : null;
   const EditorComponent = operatorValue.Editor;
@@ -603,7 +616,7 @@ function CustomEditor({
           onChange({type: 'custom', value});
         }
       }}
-      placeholder="Enter value..."
+      placeholder={t('@astryx.powersearch.valueEditor.enterValuePlaceholder')}
       value={currentValue}
     />
   );

package/src/PowerSearch/formatFilterValue.test.ts

@@ -0,0 +1,282 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+import {describe, expect, it} from 'vitest';
+import {formatFilterValue} from './formatFilterValue';
+import type {TranslatorFn} from '../i18n';
+import type {OperatorValue, FilterValue} from './types';
+
+// Minimal stand-in for the real translator: resolves just the count/range keys
+// formatFilterValue uses, with the same singular/plural forms as en.json so the
+// overflow-summary assertions ("3 items", "2 entities", "1 filter") hold.
+const t: TranslatorFn = (key, values) => {
+  const count = Number(values?.count ?? 0);
+  switch (key) {
+    case '@astryx.powersearch.valueEditor.itemsCount':
+      return `${count} ${count === 1 ? 'item' : 'items'}`;
+    case '@astryx.powersearch.valueEditor.entitiesCount':
+      return `${count} ${count === 1 ? 'entity' : 'entities'}`;
+    case '@astryx.powersearch.valueEditor.filtersCount':
+      return `${count} ${count === 1 ? 'filter' : 'filters'}`;
+    case '@astryx.powersearch.valueEditor.dateRange':
+      return 'date range';
+    default:
+      return key;
+  }
+};
+
+// _config is unused by formatFilterValue; a stub keeps the call type-clean.
+const fmt = (
+  operator: OperatorValue,
+  value: FilterValue,
+  maxLength = 20,
+  timezoneID?: string,
+): string =>
+  formatFilterValue({} as never, operator, value, maxLength, t, timezoneID);
+
+const ELLIPSIS = '…';
+
+describe('formatFilterValue', () => {
+  it('returns an empty string for an empty value', () => {
+    expect(fmt({type: 'empty'}, {type: 'empty'})).toBe('');
+  });
+
+  describe('string', () => {
+    it('returns the string unchanged when within maxLength', () => {
+      expect(fmt({type: 'string'}, {type: 'string', value: 'hello'})).toBe(
+        'hello',
+      );
+    });
+
+    it('truncates with an ellipsis when longer than maxLength', () => {
+      const out = fmt(
+        {type: 'string'},
+        {type: 'string', value: 'abcdefghij'},
+        5,
+      );
+      expect(out).toBe('abcd' + ELLIPSIS);
+      expect(out.length).toBe(5);
+    });
+
+    it('keeps a string exactly at the boundary intact', () => {
+      expect(fmt({type: 'string'}, {type: 'string', value: 'abcde'}, 5)).toBe(
+        'abcde',
+      );
+    });
+  });
+
+  describe('integer / float', () => {
+    it('formats an integer with locale grouping', () => {
+      const expected = new Intl.NumberFormat().format(1234567);
+      expect(
+        fmt({type: 'integer'}, {type: 'integer', value: 1234567}, 40),
+      ).toBe(expected);
+    });
+
+    it('appends integer units only when the operator is an integer', () => {
+      expect(
+        fmt({type: 'integer', units: 'ms'}, {type: 'integer', value: 42}),
+      ).toBe('42 ms');
+      // mismatched operator type → no units
+      expect(fmt({type: 'string'}, {type: 'integer', value: 42})).toBe('42');
+    });
+
+    it('appends float units only when the operator is a float', () => {
+      expect(
+        fmt({type: 'float', units: 'kg'}, {type: 'float', value: 3.5}),
+      ).toBe('3.5 kg');
+      expect(fmt({type: 'string'}, {type: 'float', value: 3.5})).toBe('3.5');
+    });
+  });
+
+  describe('enum', () => {
+    const enumOp: OperatorValue = {
+      type: 'enum',
+      values: [
+        {value: 'us', label: 'United States'},
+        {value: 'ca', label: 'Canada'},
+      ],
+    };
+
+    it('maps the stored value to its label', () => {
+      expect(fmt(enumOp, {type: 'enum', value: 'ca'}, 40)).toBe('Canada');
+    });
+
+    it('falls back to the raw value when no label matches', () => {
+      expect(fmt(enumOp, {type: 'enum', value: 'mx'}, 40)).toBe('mx');
+    });
+
+    it('uses the raw value when the operator is not an enum', () => {
+      expect(fmt({type: 'string'}, {type: 'enum', value: 'ca'}, 40)).toBe('ca');
+    });
+
+    it('truncates a long enum label', () => {
+      expect(fmt(enumOp, {type: 'enum', value: 'us'}, 5)).toBe(
+        'Unit' + ELLIPSIS,
+      );
+    });
+  });
+
+  describe('string_list', () => {
+    const op: OperatorValue = {type: 'string_list'};
+    it('returns an empty string for no items', () => {
+      expect(fmt(op, {type: 'string_list', value: []})).toBe('');
+    });
+    it('returns the single item, truncated', () => {
+      expect(fmt(op, {type: 'string_list', value: ['solo']})).toBe('solo');
+    });
+    it('joins multiple items when they fit', () => {
+      expect(fmt(op, {type: 'string_list', value: ['a', 'b', 'c']})).toBe(
+        'a, b, c',
+      );
+    });
+    it('summarizes as a count when the join exceeds maxLength', () => {
+      expect(
+        fmt(op, {type: 'string_list', value: ['alpha', 'bravo', 'charlie']}, 8),
+      ).toBe('3 items');
+    });
+  });
+
+  describe('enum_list', () => {
+    const enumOp: OperatorValue = {
+      type: 'enum_list',
+      values: [
+        {value: 'r', label: 'Red'},
+        {value: 'g', label: 'Green'},
+      ],
+    };
+    it('returns an empty string for no items', () => {
+      expect(fmt(enumOp, {type: 'enum_list', value: []})).toBe('');
+    });
+    it('maps a single value to its label', () => {
+      expect(fmt(enumOp, {type: 'enum_list', value: ['g']}, 40)).toBe('Green');
+    });
+    it('joins mapped labels when they fit', () => {
+      expect(fmt(enumOp, {type: 'enum_list', value: ['r', 'g']}, 40)).toBe(
+        'Red, Green',
+      );
+    });
+    it('summarizes labels as a count when too long', () => {
+      expect(fmt(enumOp, {type: 'enum_list', value: ['r', 'g']}, 5)).toBe(
+        '2 items',
+      );
+    });
+    it('uses raw values with a non-enum operator', () => {
+      expect(
+        fmt({type: 'string'}, {type: 'enum_list', value: ['x', 'y']}, 40),
+      ).toBe('2 items');
+      expect(
+        fmt({type: 'string'}, {type: 'enum_list', value: ['solo']}, 40),
+      ).toBe('solo');
+    });
+  });
+
+  describe('entity_list', () => {
+    const op: OperatorValue = {type: 'entity_list'};
+    it('returns an empty string for no entities', () => {
+      expect(fmt(op, {type: 'entity_list', value: []})).toBe('');
+    });
+    it('returns a single entity label', () => {
+      expect(
+        fmt(op, {type: 'entity_list', value: [{id: '1', label: 'Ada'}]}),
+      ).toBe('Ada');
+    });
+    it('joins entity labels when they fit', () => {
+      expect(
+        fmt(op, {
+          type: 'entity_list',
+          value: [
+            {id: '1', label: 'Ada'},
+            {id: '2', label: 'Bob'},
+          ],
+        }),
+      ).toBe('Ada, Bob');
+    });
+    it('summarizes as an entity count when too long', () => {
+      expect(
+        fmt(
+          op,
+          {
+            type: 'entity_list',
+            value: [
+              {id: '1', label: 'Alexander'},
+              {id: '2', label: 'Bartholomew'},
+            ],
+          },
+          8,
+        ),
+      ).toBe('2 entities');
+    });
+  });
+
+  describe('dates and time', () => {
+    it('returns a time value verbatim', () => {
+      expect(fmt({type: 'time'}, {type: 'time', value: '14:30'})).toBe('14:30');
+    });
+    it('returns a relative date value verbatim', () => {
+      expect(
+        fmt({type: 'date_relative'}, {type: 'date_relative', value: '7d'}),
+      ).toBe('7d');
+    });
+    it('renders a fixed placeholder for a date range', () => {
+      expect(
+        fmt(
+          {type: 'date_range'},
+          {
+            type: 'date_range',
+            value: {start: {type: 'NOW'}, end: {type: 'NOW'}},
+          },
+        ),
+      ).toBe('date range');
+    });
+    it('formats an absolute date and truncates to maxLength', () => {
+      const full = fmt(
+        {type: 'date_absolute'},
+        {type: 'date_absolute', unixSeconds: 0},
+        60,
+        'UTC',
+      );
+      expect(full).toContain('1970');
+      const short = fmt(
+        {type: 'date_absolute'},
+        {type: 'date_absolute', unixSeconds: 0},
+        6,
+        'UTC',
+      );
+      expect(short.length).toBe(6);
+      expect(short.endsWith(ELLIPSIS)).toBe(true);
+    });
+  });
+
+  describe('custom', () => {
+    it('stringifies via the operator getString and truncates', () => {
+      const op: OperatorValue = {
+        type: 'custom',
+        Editor: (() => null) as never,
+        getString: v => `custom:${v}`,
+      };
+      expect(fmt(op, {type: 'custom', value: 'x'})).toBe('custom:x');
+    });
+    it('returns the raw value when the operator is not custom', () => {
+      expect(fmt({type: 'string'}, {type: 'custom', value: 'raw'})).toBe('raw');
+    });
+  });
+
+  describe('nested', () => {
+    it('uses the singular form for a single nested filter', () => {
+      expect(
+        fmt({type: 'nested'}, {type: 'nested', value: [{} as never]}),
+      ).toBe('1 filter');
+    });
+    it('uses the plural form for multiple nested filters', () => {
+      expect(
+        fmt(
+          {type: 'nested'},
+          {
+            type: 'nested',
+            value: [{} as never, {} as never, {} as never],
+          },
+        ),
+      ).toBe('3 filters');
+    });
+  });
+});

package/src/PowerSearch/formatFilterValue.ts

@@ -12,6 +12,7 @@
 
 import type {OperatorValue, FilterValue, EnumItem} from './types';
 import type {InternalConfig} from './useInternalConfig';
+import type {TranslatorFn} from '../i18n';
 
 function truncate(str: string, maxLength: number): string {
   if (str.length <= maxLength) {
@@ -50,8 +51,11 @@ function formatRelativeDate(value: string): string {
   return value;
 }
 
-function formatDateRange(_value: {start: unknown; end: unknown}): string {
-  return 'date range';
+function formatDateRange(
+  _value: {start: unknown; end: unknown},
+  t: TranslatorFn,
+): string {
+  return t('@astryx.powersearch.valueEditor.dateRange');
 }
 
 export function formatFilterValue(
@@ -59,6 +63,7 @@ export function formatFilterValue(
   operatorValue: OperatorValue,
   filterValue: FilterValue,
   maxLength: number,
+  t: TranslatorFn,
   timezoneID?: string,
 ): string {
   switch (filterValue.type) {
@@ -101,7 +106,9 @@ export function formatFilterValue(
       if (joined.length <= maxLength) {
         return joined;
       }
-      return `${items.length} items`;
+      return t('@astryx.powersearch.valueEditor.itemsCount', {
+        count: items.length,
+      });
     }
 
     case 'enum_list': {
@@ -118,12 +125,16 @@ export function formatFilterValue(
         if (joined.length <= maxLength) {
           return joined;
         }
-        return `${labels.length} items`;
+        return t('@astryx.powersearch.valueEditor.itemsCount', {
+          count: labels.length,
+        });
       }
       if (items.length === 1) {
         return truncate(items[0], maxLength);
       }
-      return `${items.length} items`;
+      return t('@astryx.powersearch.valueEditor.itemsCount', {
+        count: items.length,
+      });
     }
 
     case 'entity_list': {
@@ -138,7 +149,9 @@ export function formatFilterValue(
       if (joined.length <= maxLength) {
         return joined;
       }
-      return `${entities.length} entities`;
+      return t('@astryx.powersearch.valueEditor.entitiesCount', {
+        count: entities.length,
+      });
     }
 
     case 'time':
@@ -154,7 +167,7 @@ export function formatFilterValue(
       return formatRelativeDate(filterValue.value);
 
     case 'date_range':
-      return formatDateRange(filterValue.value);
+      return formatDateRange(filterValue.value, t);
 
     case 'custom':
       if (operatorValue.type === 'custom') {
@@ -164,7 +177,7 @@ export function formatFilterValue(
 
     case 'nested': {
       const count = filterValue.value.length;
-      return count === 1 ? '1 filter' : `${count} filters`;
+      return t('@astryx.powersearch.valueEditor.filtersCount', {count});
     }
 
     default:

package/src/PowerSearch/index.ts

@@ -17,6 +17,8 @@ export type {PowerSearchProps, PowerSearchSize} from './PowerSearch';
 export {PowerSearchToken} from './PowerSearchToken';
 export {PowerSearchFilterEditor} from './PowerSearchFilterEditor';
 
+export {resolveOperatorLabel} from './resolveOperatorLabel';
+
 export {
   createPowerSearchConfig,
   usePowerSearchConfig,
@@ -28,6 +30,9 @@ export type {
   PowerSearchConfig,
   PowerSearchField,
   PowerSearchOperator,
+  PowerSearchOperatorBase,
+  PowerSearchOperatorWithLabel,
+  PowerSearchOperatorWithI18nKey,
 
   // Operator value types
   OperatorValue,

package/src/PowerSearch/resolveOperatorLabel.ts

@@ -0,0 +1,34 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file resolveOperatorLabel.ts
+ * @input PowerSearchOperator + translator function
+ * @output Display string for the operator label
+ * @position Shared label-resolution helper used at every render site that
+ *   reads an operator's display text (PowerSearch.tsx, PowerSearchToken.tsx,
+ *   PowerSearchEditPopover.tsx, usePowerSearchSource.ts).
+ *
+ * A PowerSearchOperator is a discriminated union of two variants:
+ *   - `{key, value, label}`     — consumer-supplied raw text (used verbatim)
+ *   - `{key, value, i18nKey}`   — catalog-driven text (looked up via t())
+ *
+ * Astryx's shipped default operators use the i18nKey variant; consumers
+ * writing custom operators typically use the label variant.
+ *
+ * SYNC: When modified, update:
+ * - /packages/core/src/PowerSearch/types.ts (PowerSearchOperator type)
+ * - /packages/core/src/PowerSearch/index.ts (re-export)
+ */
+
+import type {TranslatorFn} from '../i18n';
+import type {PowerSearchOperator} from './types';
+
+export function resolveOperatorLabel(
+  operator: PowerSearchOperator,
+  t: TranslatorFn,
+): string {
+  if ('label' in operator && operator.label !== undefined) {
+    return operator.label;
+  }
+  return t(operator.i18nKey);
+}