@astryxdesign/core 0.1.6 → 0.1.7-canary.0a6de96

package/src/PowerSearch/PowerSearchEditPopover.tsx

@@ -19,8 +19,10 @@ import {Selector} from '../Selector';
 import {HStack, VStack} from '../Stack';
 import {Icon} from '../Icon';
 import {TreeList, type TreeListItemData} from '../TreeList';
+import {useTranslator} from '../i18n';
 import {spacingVars, typeScaleVars} from '../theme/tokens.stylex';
 import {PowerSearchValueEditor} from './PowerSearchValueEditor';
+import {resolveOperatorLabel} from './resolveOperatorLabel';
 import type {InternalConfig} from './useInternalConfig';
 import type {
   PowerSearchFilter,
@@ -238,6 +240,7 @@ function NestedSubFilterRow({
   onChange,
   isReadOnly,
 }: NestedSubFilterRowProps) {
+  const t = useTranslator();
   const fieldOptions = useMemo(
     () =>
       config.getVisibleFields().map(field => ({
@@ -251,9 +254,9 @@ function NestedSubFilterRow({
     const operators = config.getVisibleOperators(subFilter.field);
     return operators.map(op => ({
       value: op.key,
-      label: op.label,
+      label: resolveOperatorLabel(op, t),
     }));
-  }, [config, subFilter.field]);
+  }, [config, subFilter.field, t]);
 
   const currentOperator = subFilter.operator
     ? config.getOperator(subFilter.field, subFilter.operator)
@@ -308,7 +311,7 @@ function NestedSubFilterRow({
     <HStack gap={2} vAlign="center">
       <div {...stylex.props(styles.nestedFieldSelector)}>
         <Selector
-          label="Field"
+          label={t('@astryx.powersearch.editor.field')}
           isLabelHidden
           options={fieldOptions}
           value={subFilter.field}
@@ -320,7 +323,7 @@ function NestedSubFilterRow({
       {operatorOptions.length > 0 && (
         <div {...stylex.props(styles.nestedOperatorSelector)}>
           <Selector
-            label="Operator"
+            label={t('@astryx.powersearch.editor.operator')}
             isLabelHidden
             options={operatorOptions}
             value={subFilter.operator}
@@ -366,6 +369,7 @@ function NestedEditor({
   onPartialFilterChange,
   isReadOnly,
 }: NestedEditorProps) {
+  const t = useTranslator();
   const [subFilters, setSubFilters] = useState<EditablePartialFilter[]>(() => {
     if (partialFilter.value && partialFilter.value.type === 'nested') {
       return partialFilter.value.value.map(f => initEditableFilter(config, f));
@@ -468,7 +472,7 @@ function NestedEditor({
             id: `${itemPath.join('-')}-add`,
             label: (
               <Button
-                label="+ Add filter"
+                label={t('@astryx.powersearch.editor.addFilter')}
                 onClick={() => handleAdd(itemPath)}
                 variant="ghost"
                 size="sm"
@@ -491,7 +495,7 @@ function NestedEditor({
           children,
           endContent: !isReadOnly ? (
             <Button
-              label="Remove filter"
+              label={t('@astryx.powersearch.editor.removeFilter')}
               icon={<Icon icon="close" size="sm" />}
               variant="ghost"
               size="sm"
@@ -515,7 +519,7 @@ function NestedEditor({
         ),
         endContent: !isReadOnly ? (
           <Button
-            label="Remove filter"
+            label={t('@astryx.powersearch.editor.removeFilter')}
             icon={<Icon icon="close" size="sm" />}
             variant="ghost"
             size="sm"
@@ -536,7 +540,7 @@ function NestedEditor({
       id: 'add-filter',
       label: (
         <Button
-          label="+ Add filter"
+          label={t('@astryx.powersearch.editor.addFilter')}
           onClick={() => handleAdd([])}
           variant="ghost"
           size="sm"
@@ -550,7 +554,7 @@ function NestedEditor({
       {operatorOptions.length > 1 ? (
         <div {...stylex.props(styles.operatorSelector)}>
           <Selector
-            label="Group operator"
+            label={t('@astryx.powersearch.editor.groupOperator')}
             isLabelHidden
             options={operatorOptions}
             value={partialFilter.operator}
@@ -560,7 +564,7 @@ function NestedEditor({
           />
         </div>
       ) : (
-        (operatorOptions[0]?.label ?? 'Group')
+        (operatorOptions[0]?.label ?? t('@astryx.powersearch.editor.group'))
       )}
     </div>
   );
@@ -587,9 +591,12 @@ export function PowerSearchEditPopover({
   mode,
   onSave,
   onCancel,
-  saveButtonLabel = 'Apply',
+  saveButtonLabel: saveButtonLabelFromProps,
   isReadOnly = false,
 }: PowerSearchEditPopoverProps) {
+  const t = useTranslator();
+  const saveButtonLabel =
+    saveButtonLabelFromProps ?? t('@astryx.powersearch.editor.apply');
   const [partialFilter, setPartialFilter] =
     useState<PartialFilter>(initialFilter);
   const valueEditorRef = useRef<HTMLDivElement>(null);
@@ -628,9 +635,9 @@ export function PowerSearchEditPopover({
     const operators = config.getVisibleOperators(partialFilter.field);
     return operators.map(op => ({
       value: op.key,
-      label: op.label,
+      label: resolveOperatorLabel(op, t),
     }));
-  }, [config, partialFilter.field]);
+  }, [config, partialFilter.field, t]);
 
   const handleFieldChange = useCallback(
     (fieldKey: string) => {
@@ -732,7 +739,7 @@ export function PowerSearchEditPopover({
             <HStack gap={2}>
               <div {...stylex.props(styles.fieldSelector)}>
                 <Selector
-                  label="Field"
+                  label={t('@astryx.powersearch.editor.field')}
                   isLabelHidden
                   options={fieldOptions}
                   value={partialFilter.field}
@@ -756,7 +763,7 @@ export function PowerSearchEditPopover({
           <HStack gap={2} hAlign="between">
             {!isReadOnly && mode === 'edit' ? (
               <Button
-                label="Delete"
+                label={t('@astryx.powersearch.editor.delete')}
                 onClick={handleDelete}
                 variant="ghost"
                 size="sm"
@@ -766,7 +773,7 @@ export function PowerSearchEditPopover({
             )}
             <HStack gap={2}>
               <Button
-                label="Cancel"
+                label={t('@astryx.powersearch.editor.cancel')}
                 onClick={onCancel}
                 variant="ghost"
                 size="sm"
@@ -791,7 +798,7 @@ export function PowerSearchEditPopover({
         <HStack gap={2}>
           <div {...stylex.props(styles.fieldSelector)}>
             <Selector
-              label="Field"
+              label={t('@astryx.powersearch.editor.field')}
               isLabelHidden
               options={fieldOptions}
               value={partialFilter.field}
@@ -803,7 +810,7 @@ export function PowerSearchEditPopover({
           {showOperatorSelector && operatorOptions.length > 0 && (
             <div {...stylex.props(styles.operatorSelector)}>
               <Selector
-                label="Operator"
+                label={t('@astryx.powersearch.editor.operator')}
                 isLabelHidden
                 options={operatorOptions}
                 value={partialFilter.operator}
@@ -832,7 +839,7 @@ export function PowerSearchEditPopover({
           <HStack gap={2} hAlign="between">
             {!isReadOnly && mode === 'edit' ? (
               <Button
-                label="Delete"
+                label={t('@astryx.powersearch.editor.delete')}
                 onClick={handleDelete}
                 variant="ghost"
                 size="sm"
@@ -842,7 +849,7 @@ export function PowerSearchEditPopover({
             )}
             <HStack gap={2}>
               <Button
-                label="Cancel"
+                label={t('@astryx.powersearch.editor.cancel')}
                 onClick={onCancel}
                 variant="ghost"
                 size="sm"

package/src/PowerSearch/PowerSearchToken.tsx

@@ -12,8 +12,10 @@
 import React from 'react';
 import * as stylex from '@stylexjs/stylex';
 import {Token} from '../Token';
+import {useTranslator} from '../i18n';
 import {fontWeightVars} from '../theme/tokens.stylex';
 import {formatFilterValue} from './formatFilterValue';
+import {resolveOperatorLabel} from './resolveOperatorLabel';
 import {useInternalConfig} from './useInternalConfig';
 import type {PowerSearchTokenProps} from './types';
 
@@ -41,13 +43,17 @@ export function PowerSearchToken({
   isDisabled,
 }: PowerSearchTokenProps) {
   const config = useInternalConfig(configProp);
+  const t = useTranslator();
 
   const fieldLabel = field.label;
-  const operatorLabel = operator.label ? `: ${operator.label}` : '';
+  const resolvedOperatorLabel = resolveOperatorLabel(operator, t);
+  const operatorLabel = resolvedOperatorLabel
+    ? `: ${resolvedOperatorLabel}`
+    : '';
   const tokenLabel = `${fieldLabel}${operatorLabel}`;
 
   const adjustedMaxLength = Math.max(
-    maxLength - fieldLabel.length - (operator.label?.length ?? 0),
+    maxLength - fieldLabel.length - resolvedOperatorLabel.length,
     10,
   );
 
@@ -56,6 +62,7 @@ export function PowerSearchToken({
     operator.value,
     filter.value,
     adjustedMaxLength,
+    t,
   );
 
   const valueContent = valueStr ? (
@@ -66,10 +73,14 @@ export function PowerSearchToken({
     <Token
       label={tokenLabel}
       endContent={valueContent}
-      onClick={onClick ? (e: React.MouseEvent) => {
-        e.stopPropagation();
-        onClick();
-      } : undefined}
+      onClick={
+        onClick
+          ? (e: React.MouseEvent) => {
+              e.stopPropagation();
+              onClick();
+            }
+          : undefined
+      }
       onRemove={onRemove}
       isDisabled={isDisabled}
     />

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}
     />
   );