@controleonline/ui-default 1.0.270 → 1.0.273

package/src/react/components/filters/filterValue.js

@@ -0,0 +1,65 @@
+const EMPTY_SHORTCUTS = new Set(['', 'all', 'none', '*']);
+
+const normalizeText = value => String(value ?? '').trim();
+
+export const isFilledFilterValue = value => {
+  if (value === null || value === undefined) {
+    return false;
+  }
+
+  if (Array.isArray(value)) {
+    return value.some(isFilledFilterValue);
+  }
+
+  if (typeof value === 'object') {
+    const shortcut = normalizeText(value.shortcut).toLowerCase();
+    const range = value.customRange && typeof value.customRange === 'object'
+      ? value.customRange
+      : null;
+    const rangeFrom = normalizeText(
+      range?.from ?? value.from ?? value.start ?? value.after,
+    );
+    const rangeTo = normalizeText(
+      range?.to ?? value.to ?? value.end ?? value.before,
+    );
+
+    if ('shortcut' in value || range || 'start' in value || 'end' in value || 'after' in value || 'before' in value) {
+      if (EMPTY_SHORTCUTS.has(shortcut) && !rangeFrom && !rangeTo) {
+        return false;
+      }
+      if ((shortcut === 'custom' || !shortcut) && !rangeFrom && !rangeTo) {
+        return false;
+      }
+    }
+
+    return Object.values(value).some(isFilledFilterValue);
+  }
+
+  return normalizeText(value) !== '';
+};
+
+export const countActiveFilters = (filters = {}) => {
+  if (!filters || typeof filters !== 'object' || Array.isArray(filters)) {
+    return 0;
+  }
+
+  return Object.keys(filters).filter(key => {
+    if (['page', 'itemsPerPage', 'order', 'sort', 'pagination'].includes(key)) {
+      return false;
+    }
+    return isFilledFilterValue(filters[key]);
+  }).length;
+};
+
+export const omitEmptyFilters = (filters = {}) => {
+  if (!filters || typeof filters !== 'object' || Array.isArray(filters)) {
+    return {};
+  }
+
+  return Object.keys(filters).reduce((accumulator, key) => {
+    if (isFilledFilterValue(filters[key])) {
+      accumulator[key] = filters[key];
+    }
+    return accumulator;
+  }, {});
+};

package/src/react/components/form/DefaultForm.js

@@ -1,17 +1,17 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { ScrollView, Text, TouchableOpacity, View } from 'react-native';
-import { useStore } from '@store';
-import { formatStoreColumnLabel } from '@controleonline/ui-common/src/react/utils/storeColumns';
-import DefaultInput from '../inputs/DefaultInput';
-import {
-  formatSaveValue,
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { ScrollView, Text, TouchableOpacity, View } from 'react-native';
+import { useStore } from '@store';
+import { formatStoreColumnLabel } from '@controleonline/ui-common/src/react/utils/storeColumns';
+import DefaultInput from '../inputs/DefaultInput';
+import {
+  formatSaveValue,
   getColumnKey,
   isEditableColumn,
   normalizeId,
-  normalizeText,
-  resolveEditValue,
-} from '../inputs/defaultInputUtils';
-import { createStyles } from './DefaultForm.styles';
+  normalizeText,
+  resolveEditValue,
+} from '../inputs/defaultInputUtils';
+import { createStyles } from './DefaultForm.styles';
 
 const hasValue = value => {
   if (value === null || value === undefined) return false;
@@ -46,50 +46,67 @@ const shouldIncludeColumn = (column, row, mode) => {
   return column?.visibleForm !== false;
 };
 
-const buildDraft = (columns, row) =>
-  columns.reduce((draft, column) => {
-    const fieldName = getColumnKey(column);
-    const defaultValue = resolveDefaultValue(column, row);
-    draft[fieldName] = resolveEditValue(column, row, defaultValue);
-    return draft;
-  }, {});
-
-const EMPTY_ROW = {};
-
-const DefaultForm = ({
-  actions = {},
-  columns = [],
-  getOptionsForColumn = null,
+const buildDraft = (columns, row) =>
+  columns.reduce((draft, column) => {
+    const fieldName = getColumnKey(column);
+    const defaultValue = resolveDefaultValue(column, row);
+    draft[fieldName] = resolveEditValue(column, row, defaultValue);
+    return draft;
+  }, {});
+
+const resolveCreatePayloadColumns = (columns, formColumns) => {
+  const formColumnKeys = new Set(formColumns.map(column => getColumnKey(column)));
+
+  return [
+    ...formColumns,
+    ...columns.filter(column => {
+      const fieldName = getColumnKey(column);
+      return fieldName && column?.createPayload === true && !formColumnKeys.has(fieldName);
+    }),
+  ];
+};
+
+const EMPTY_ROW = {};
+
+const DefaultForm = ({
+  actions = {},
+  columns = [],
+  getOptionsForColumn = null,
   mode = 'edit',
   onBeforeOpen = null,
-  onCancel = null,
-  onSaved = null,
-  row = EMPTY_ROW,
-  storeName = '',
-}) => {
-  const themeStore = useStore('theme');
-  const { colors: themeColors } = themeStore.getters;
-  const palette = useMemo(
-    () => ({
-      buttonBackground: themeColors.buttonBackground,
-      buttonBackgroundSecondary: themeColors.buttonBackgroundSecondary,
-      buttonBorderSecondary: themeColors.buttonBorderSecondary,
-      buttonDisabledBackground: themeColors.buttonDisabledBackground,
-      buttonDisabledText: themeColors.buttonDisabledText,
-      buttonText: themeColors.buttonText,
-      buttonTextSecondary: themeColors.buttonTextSecondary,
-      dividerBorder: themeColors.dividerBorder,
-      textSecondary: themeColors.textSecondary,
-    }),
-    [themeColors],
-  );
-  const styles = useMemo(() => createStyles(palette), [palette]);
-  const formColumns = useMemo(
-    () => columns.filter(column => shouldIncludeColumn(column, row, mode)),
-    [columns, mode, row],
+  onCancel = null,
+  onSaved = null,
+  row = EMPTY_ROW,
+  storeName = '',
+}) => {
+  const themeStore = useStore('theme');
+  const { colors: themeColors } = themeStore.getters;
+  const palette = useMemo(
+    () => ({
+      buttonBackground: themeColors.buttonBackground,
+      buttonBackgroundSecondary: themeColors.buttonBackgroundSecondary,
+      buttonBorderSecondary: themeColors.buttonBorderSecondary,
+      buttonDisabledBackground: themeColors.buttonDisabledBackground,
+      buttonDisabledText: themeColors.buttonDisabledText,
+      buttonText: themeColors.buttonText,
+      buttonTextSecondary: themeColors.buttonTextSecondary,
+      dividerBorder: themeColors.dividerBorder,
+      textSecondary: themeColors.textSecondary,
+    }),
+    [themeColors],
+  );
+  const styles = useMemo(() => createStyles(palette), [palette]);
+  const formColumns = useMemo(
+    () => columns.filter(column => shouldIncludeColumn(column, row, mode)),
+    [columns, mode, row],
+  );
+  const createPayloadColumns = useMemo(
+    () => resolveCreatePayloadColumns(columns, formColumns),
+    [columns, formColumns],
   );
   const [draft, setDraft] = useState(() => buildDraft(formColumns, row));
   const [isSaving, setIsSaving] = useState(false);
+  const formRow = useMemo(() => ({ ...row, ...draft }), [draft, row]);
 
   useEffect(() => {
     setDraft(buildDraft(formColumns, row));
@@ -106,20 +123,23 @@ const DefaultForm = ({
       ? {}
       : { id: normalizeId(row?.['@id'] || row?.id) };
 
-    formColumns.forEach(column => {
+    const payloadColumns = isCreate ? createPayloadColumns : formColumns;
+
+    payloadColumns.forEach(column => {
       const fieldName = getColumnKey(column);
-      const nextValue = draft[fieldName];
+      const defaultValue = resolveDefaultValue(column, row);
+      const nextValue = draft[fieldName] ?? resolveEditValue(column, row, defaultValue);
 
       if (isCreate) {
         if (hasValue(nextValue)) {
-          payload[fieldName] = formatSaveValue(column, nextValue, row);
+          payload[fieldName] = formatSaveValue(column, nextValue, formRow);
         }
         return;
       }
 
       const currentValue = resolveEditValue(column, row);
       if (normalizeText(currentValue) !== normalizeText(nextValue)) {
-        payload[fieldName] = formatSaveValue(column, nextValue, row);
+        payload[fieldName] = formatSaveValue(column, nextValue, formRow);
       }
     });
 
@@ -143,7 +163,7 @@ const DefaultForm = ({
       .finally(() => {
         setIsSaving(false);
       });
-  }, [actions, draft, formColumns, mode, onCancel, onSaved, row]);
+  }, [actions, createPayloadColumns, draft, formColumns, formRow, mode, onCancel, onSaved, row]);
 
   return (
     <>
@@ -152,7 +172,7 @@ const DefaultForm = ({
           <View style={styles.formGrid}>
             {formColumns.map(column => {
               const fieldName = getColumnKey(column);
-              const label = formatStoreColumnLabel({
+              const label = column?.formLabel || formatStoreColumnLabel({
                 columns,
                 fieldName,
                 fallbackLabel: column?.label || fieldName,
@@ -161,18 +181,18 @@ const DefaultForm = ({
 
               return (
                 <View key={fieldName} style={styles.formField}>
-                  <DefaultInput
-                    accentColor={themeColors.buttonBackground}
-                    autoFocus={false}
-                    autoSave={false}
-                    column={column}
+                  <DefaultInput
+                    accentColor={themeColors.buttonBackground}
+                    autoFocus={false}
+                    autoSave={false}
+                    column={column}
                     columns={columns}
                     editing
                     getOptionsForColumn={getOptionsForColumn}
                     label={label}
                     onBeforeOpen={onBeforeOpen ? () => onBeforeOpen(column) : null}
                     onChangeValue={value => setDraft(prev => ({ ...prev, [fieldName]: value }))}
-                    row={row}
+                    row={formRow}
                     showLabel
                     storeName={storeName}
                     value={draft[fieldName]}
@@ -191,26 +211,26 @@ const DefaultForm = ({
         )}
       </ScrollView>
 
-      <View style={styles.actions}>
-        <TouchableOpacity style={styles.secondaryButton} onPress={onCancel}>
-          <Text style={styles.secondaryButtonText}>
+      <View style={styles.actions}>
+        <TouchableOpacity style={styles.secondaryButton} onPress={onCancel}>
+          <Text style={styles.secondaryButtonText}>
             {global.t?.t(storeName, 'button', 'cancel') || 'Cancelar'}
           </Text>
         </TouchableOpacity>
-        <TouchableOpacity
-          style={[
-            styles.primaryButton,
-            { backgroundColor: palette.buttonBackground },
-            isSaving ? styles.primaryButtonDisabled : null,
-          ]}
-          activeOpacity={0.86}
-          disabled={isSaving}
-          onPress={save}
-        >
-          <Text style={[styles.primaryButtonText, isSaving ? styles.primaryButtonTextDisabled : null]}>
-            {isSaving ? 'Salvando' : global.t?.t(storeName, 'button', 'save') || 'Salvar'}
-          </Text>
-        </TouchableOpacity>
+        <TouchableOpacity
+          style={[
+            styles.primaryButton,
+            { backgroundColor: palette.buttonBackground },
+            isSaving ? styles.primaryButtonDisabled : null,
+          ]}
+          activeOpacity={0.86}
+          disabled={isSaving}
+          onPress={save}
+        >
+          <Text style={[styles.primaryButtonText, isSaving ? styles.primaryButtonTextDisabled : null]}>
+            {isSaving ? 'Salvando' : global.t?.t(storeName, 'button', 'save') || 'Salvar'}
+          </Text>
+        </TouchableOpacity>
       </View>
     </>
   );

package/src/react/components/help/DefaultTooltip.js

@@ -4,21 +4,32 @@ import styles from './DefaultTooltip.styles';
 
 const DefaultTooltip = ({
   accentColor = '#0EA5E9',
+  accessibilityLabel = 'Abrir ajuda',
+  backdropTestID,
+  children = null,
+  closeAccessibilityLabel = 'Fechar ajuda',
+  closeLabel = 'Fechar',
+  dialogTestID,
+  hitSlop,
   label = '?',
   message = '',
+  rows = [],
   style = null,
+  testID,
   textStyle = null,
   title = 'Ajuda',
 }) => {
   const [visible, setVisible] = useState(false);
+  const hasRows = Array.isArray(rows) && rows.length > 0;
+  const hasContent = Boolean(message || children || hasRows);
 
   const openTooltip = useCallback(() => {
-    if (!message) {
+    if (!hasContent) {
       return;
     }
 
     setVisible(true);
-  }, [message]);
+  }, [hasContent]);
 
   const closeTooltip = useCallback(() => {
     setVisible(false);
@@ -27,9 +38,11 @@ const DefaultTooltip = ({
   return (
     <>
       <TouchableOpacity
+        accessibilityLabel={accessibilityLabel}
         accessibilityRole="button"
         activeOpacity={0.85}
-        disabled={!message}
+        disabled={!hasContent}
+        hitSlop={hitSlop}
         onPress={openTooltip}
         style={[
           styles.button,
@@ -37,12 +50,17 @@ const DefaultTooltip = ({
             borderColor: accentColor,
             backgroundColor: `${accentColor}14`,
           },
-          !message && {opacity: 0.55},
+          !hasContent && {opacity: 0.55},
           style,
-        ]}>
-        <Text style={[styles.label, {color: accentColor}, textStyle]}>
-          {label}
-        </Text>
+        ]}
+        testID={testID}>
+        {React.isValidElement(label) ? (
+          label
+        ) : (
+          <Text style={[styles.label, {color: accentColor}, textStyle]}>
+            {label}
+          </Text>
+        )}
       </TouchableOpacity>
 
       <Modal
@@ -50,18 +68,25 @@ const DefaultTooltip = ({
         onRequestClose={closeTooltip}
         transparent
         visible={visible}>
-        <Pressable style={styles.overlay} onPress={closeTooltip}>
+        <Pressable
+          style={styles.overlay}
+          onPress={closeTooltip}
+          testID={backdropTestID}>
           <View
+            accessibilityLabel={title}
+            accessibilityRole="summary"
             onStartShouldSetResponder={() => true}
             style={[
               styles.card,
               {
                 borderColor: accentColor,
               },
-            ]}>
+            ]}
+            testID={dialogTestID}>
             <View style={styles.cardHeader}>
               <Text style={[styles.title, {color: accentColor}]}>{title}</Text>
               <TouchableOpacity
+                accessibilityLabel={closeAccessibilityLabel}
                 accessibilityRole="button"
                 activeOpacity={0.8}
                 onPress={closeTooltip}
@@ -72,11 +97,22 @@ const DefaultTooltip = ({
                   },
                 ]}>
                 <Text style={[styles.closeButtonText, {color: accentColor}]}>
-                  Fechar
+                  {closeLabel}
                 </Text>
               </TouchableOpacity>
             </View>
-            <Text style={styles.message}>{message}</Text>
+            {message ? <Text style={styles.message}>{message}</Text> : null}
+            {hasRows
+              ? rows.map(row => (
+                  <View key={row.key || row.label} style={styles.row}>
+                    <Text style={styles.rowLabel}>{row.label}</Text>
+                    <Text style={styles.rowValue}>
+                      {String(row.value ?? 'Não configurado')}
+                    </Text>
+                  </View>
+                ))
+              : null}
+            {children}
           </View>
         </Pressable>
       </Modal>

package/src/react/components/help/DefaultTooltip.styles.js

@@ -56,6 +56,26 @@ const styles = StyleSheet.create({
     fontSize: 12,
     fontWeight: '700',
   },
+  row: {
+    borderTopColor: '#E2E8F0',
+    borderTopWidth: 1,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    paddingVertical: 9,
+  },
+  rowLabel: {
+    color: '#64748B',
+    fontSize: 13,
+    fontWeight: '600',
+  },
+  rowValue: {
+    color: '#0F172A',
+    flexShrink: 1,
+    fontSize: 13,
+    fontWeight: '700',
+    marginLeft: 12,
+    textAlign: 'right',
+  },
 });
 
 export default styles;

package/src/react/components/inputs/DefaultColorInput.js

@@ -0,0 +1,153 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { Text, TextInput, TouchableOpacity, View } from 'react-native';
+import { useStore } from '@store';
+import Icon from 'react-native-vector-icons/Feather';
+import {
+  getColumnKey,
+  normalizeText,
+  resolveColorToken,
+  resolveDefaultColorValue,
+} from './defaultInputUtils';
+import styles from './DefaultInput.styles';
+
+const HEX_COLOR_REGEX = /^#[0-9a-fA-F]{6}$/;
+
+const normalizeColorText = value => {
+  const normalized = normalizeText(value);
+  if (!normalized) return '';
+
+  return normalized.startsWith('#') || normalized.startsWith('$')
+    ? normalized
+    : `#${normalized}`;
+};
+
+const isValidHexColor = value => HEX_COLOR_REGEX.test(resolveColorToken(value));
+
+const DefaultColorInput = ({
+  accentColor = '#2563EB',
+  autoFocus = true,
+  autoSave = true,
+  column,
+  containerStyle = null,
+  defaultColor: defaultColorProp = '',
+  editing = false,
+  inputStyle = null,
+  label = '',
+  onCancelEditing = null,
+  onChangeValue = null,
+  onSave = null,
+  onStartEditing = null,
+  row = {},
+  saving = false,
+  showLabel = false,
+  value,
+  variant = 'cell',
+}) => {
+  const themeColors = useStore('theme')?.getters?.colors || {};
+  const fieldName = getColumnKey(column);
+  const rawValue = value ?? row?.[fieldName];
+  const defaultColor = useMemo(
+    () => resolveDefaultColorValue(column, themeColors, defaultColorProp),
+    [column, defaultColorProp, themeColors],
+  );
+  const readValue = normalizeColorText(rawValue) || defaultColor || '#CBD5E1';
+  const previewColor = resolveColorToken(readValue, themeColors) || defaultColor || '#CBD5E1';
+  const [draftValue, setDraftValue] = useState(readValue);
+  const isForm = variant === 'form';
+
+  useEffect(() => {
+    setDraftValue(readValue);
+  }, [readValue, editing]);
+
+  const saveDraft = () => {
+    const nextValue = normalizeColorText(draftValue) || defaultColor || '#CBD5E1';
+    if (autoSave) {
+      onSave?.(nextValue);
+      return;
+    }
+
+    onChangeValue?.(nextValue);
+  };
+
+  const updateDraft = nextValue => {
+    setDraftValue(nextValue);
+    if (!autoSave) onChangeValue?.(normalizeColorText(nextValue));
+  };
+
+  const applyDefaultColor = () => {
+    if (!defaultColor) return;
+    setDraftValue(defaultColor);
+    if (!autoSave) onChangeValue?.(defaultColor);
+  };
+
+  if (!editing && !isForm) {
+    return (
+      <View style={[styles.wrap, containerStyle]}>
+        {showLabel ? <Text style={styles.fieldLabel}>{label || column?.label || fieldName}</Text> : null}
+        <TouchableOpacity
+          style={styles.readButton}
+          activeOpacity={0.78}
+          disabled={typeof onStartEditing !== 'function'}
+          onPress={() => onStartEditing?.()}
+        >
+          <View style={[styles.colorPreview, { backgroundColor: previewColor }]} />
+          <Text style={styles.readText} numberOfLines={1}>
+            {readValue}
+          </Text>
+          {saving ? (
+            <Text style={[styles.savingText, { color: accentColor }]}>Salvando</Text>
+          ) : (
+            <Icon style={styles.editIcon} name="edit-2" size={13} color="#64748B" />
+          )}
+        </TouchableOpacity>
+      </View>
+    );
+  }
+
+  return (
+    <View style={[styles.wrap, containerStyle]}>
+      {showLabel ? <Text style={styles.fieldLabel}>{label || column?.label || fieldName}</Text> : null}
+      <View style={styles.editingWrap}>
+        <View style={styles.editingRow}>
+          <View style={[styles.colorPreview, { backgroundColor: resolveColorToken(draftValue, themeColors) || previewColor }]} />
+          <TextInput
+            autoCapitalize="characters"
+            autoFocus={autoFocus && !isForm}
+            onBlur={autoSave ? saveDraft : undefined}
+            onChangeText={updateDraft}
+            onSubmitEditing={saveDraft}
+            placeholder={defaultColor || '#CBD5E1'}
+            placeholderTextColor="#CBD5E1"
+            selectTextOnFocus
+            style={[
+              styles.input,
+              styles.colorInput,
+              isForm ? styles.formInput : null,
+              isValidHexColor(draftValue) ? null : styles.invalidColorInput,
+              inputStyle,
+            ]}
+            value={draftValue}
+          />
+          {defaultColor ? (
+            <TouchableOpacity
+              accessibilityRole="button"
+              activeOpacity={0.8}
+              onPress={applyDefaultColor}
+              style={styles.colorDefaultButton}
+            >
+              <Icon name="rotate-ccw" size={13} color="#64748B" />
+            </TouchableOpacity>
+          ) : null}
+          {!isForm ? (
+            <TouchableOpacity style={styles.cancelButton} activeOpacity={0.8} onPress={onCancelEditing}>
+              <Icon name="x" size={14} color="#64748B" />
+            </TouchableOpacity>
+          ) : null}
+        </View>
+        {saving ? <Text style={styles.savingText}>Salvando</Text> : null}
+      </View>
+    </View>
+  );
+};
+
+export default DefaultColorInput;