@controleonline/ui-common 1.2.70 → 1.2.75

package/src/react/components/BottomNavigationBar.styles.js

@@ -1,110 +1,118 @@
-import {Platform, StyleSheet} from 'react-native';
-
-const withAlpha = (color, alphaHex) => {
-  const raw = String(color || '').trim().replace('#', '');
-  if (/^[0-9a-fA-F]{6}$/.test(raw)) {
-    return `#${raw}${alphaHex}`;
-  }
-
-  if (/^[0-9a-fA-F]{8}$/.test(raw)) {
-    return `#${raw.slice(0, 6)}${alphaHex}`;
-  }
-
-  return color || '#1B5587';
-};
-
-const createStyles = ({
-  primaryColor,
-  dockBackground,
-  borderColor,
-  inactiveText,
-  activeBg,
-  activeBorder,
-}) =>
-  StyleSheet.create({
-    host: {
-      position: Platform.OS === 'web' ? 'fixed' : 'absolute',
-      left: 0,
-      right: 0,
-      bottom: 0,
-      zIndex: 1000,
-      backgroundColor: 'transparent',
-      alignItems: 'stretch',
-    },
-    stack: {
-      width: '100%',
-      alignItems: 'stretch',
-    },
-    dock: {
-      flexDirection: 'row',
-      alignItems: 'center',
-      justifyContent: 'space-between',
-      minHeight: 64,
-      paddingHorizontal: 8,
-      paddingTop: 8,
-      paddingBottom: 8,
-      borderWidth: 1,
-      borderBottomWidth: 0,
-      borderColor,
-      borderTopLeftRadius: 24,
-      borderTopRightRadius: 24,
-      borderBottomLeftRadius: 0,
-      borderBottomRightRadius: 0,
-      backgroundColor: dockBackground,
-      overflow: 'hidden',
-      ...(Platform.OS === 'android'
-        ? {elevation: 10}
-        : {
-            shadowColor: '#0F172A',
-            shadowOpacity: 0.12,
-            shadowOffset: {width: 0, height: -6},
-            shadowRadius: 14,
-          }),
-    },
-    item: {
-      flex: 1,
-      minHeight: 44,
-      alignItems: 'center',
-      justifyContent: 'center',
-      paddingVertical: 6,
-      paddingHorizontal: 4,
-      borderWidth: 1,
-      borderColor: 'transparent',
-      borderRadius: 18,
-    },
-    itemActive: {
-      backgroundColor: activeBg,
-      borderColor: activeBorder,
-    },
-    itemPressed: {
-      opacity: 0.92,
-      transform: [{scale: 0.99}],
-    },
-    itemDisabled: {
-      opacity: 0.45,
-    },
-    iconWrap: {
-      width: 24,
-      height: 24,
-      borderRadius: 999,
-      alignItems: 'center',
-      justifyContent: 'center',
-      marginBottom: 4,
-      backgroundColor: 'transparent',
-    },
-    iconWrapActive: {
-      backgroundColor: withAlpha(primaryColor, '18'),
-    },
-    itemLabel: {
-      fontSize: 12,
-      fontWeight: '600',
-      color: inactiveText,
-      textAlign: 'center',
-    },
-    itemLabelActive: {
-      color: primaryColor,
-      fontWeight: '800',
-    },
-  });
-
-export default createStyles;
+import {Platform, StyleSheet} from 'react-native';
+
+const resolveWebShadowColor = shadowColor => {
+  if (typeof shadowColor !== 'string') {
+    return 'rgba(0, 0, 0, 0.12)';
+  }
+
+  const normalized = shadowColor.trim();
+  if (!normalized) {
+    return 'rgba(0, 0, 0, 0.12)';
+  }
+
+  if (/^#[0-9a-f]{3}$/i.test(normalized)) {
+    return `${normalized[0]}${normalized[1]}${normalized[1]}${normalized[2]}${normalized[2]}${normalized[3]}${normalized[3]}1f`;
+  }
+
+  if (/^#[0-9a-f]{6}$/i.test(normalized)) {
+    return `${normalized}1f`;
+  }
+
+  if (/^#[0-9a-f]{4}$/i.test(normalized) || /^#[0-9a-f]{8}$/i.test(normalized)) {
+    return normalized;
+  }
+
+  return normalized;
+};
+
+const createStyles = ({
+  activeBackground,
+  dockBackground,
+  dockBorder,
+  dockShadow,
+  activeBorder,
+  useModernWebChromeProps = false,
+}) =>
+  StyleSheet.create({
+    host: {
+      position: Platform.OS === 'web' ? 'fixed' : 'absolute',
+      left: 0,
+      right: 0,
+      bottom: 0,
+      zIndex: 1000,
+      backgroundColor: 'transparent',
+      alignItems: 'stretch',
+    },
+    hostPointerEventsBoxNone: {
+      pointerEvents: 'box-none',
+    },
+    stack: {
+      width: '100%',
+      alignItems: 'stretch',
+    },
+    dock: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      minHeight: 64,
+      paddingHorizontal: 8,
+      paddingTop: 8,
+      paddingBottom: 8,
+      borderWidth: 1,
+      borderBottomWidth: 0,
+      borderColor: dockBorder,
+      borderTopLeftRadius: 24,
+      borderTopRightRadius: 24,
+      borderBottomLeftRadius: 0,
+      borderBottomRightRadius: 0,
+      backgroundColor: dockBackground,
+      overflow: 'hidden',
+      ...(Platform.OS === 'android'
+        ? {elevation: 10}
+        : Platform.OS === 'web' && useModernWebChromeProps
+          ? {
+              boxShadow: `0px -6px 14px ${resolveWebShadowColor(dockShadow)}`,
+            }
+        : {
+            shadowColor: dockShadow,
+            shadowOpacity: 0.12,
+            shadowOffset: {width: 0, height: -6},
+            shadowRadius: 14,
+          }),
+    },
+    item: {
+      flex: 1,
+      minHeight: 44,
+      alignItems: 'center',
+      justifyContent: 'center',
+      paddingVertical: 6,
+      paddingHorizontal: 4,
+      borderWidth: 1,
+      borderColor: 'transparent',
+      borderRadius: 18,
+    },
+    itemActive: {
+      backgroundColor: activeBackground,
+      borderColor: activeBorder,
+    },
+    itemPressed: {
+      transform: [{scale: 0.99}],
+    },
+    itemDisabled: {},
+    iconWrap: {
+      width: 24,
+      height: 24,
+      borderRadius: 999,
+      alignItems: 'center',
+      justifyContent: 'center',
+      marginBottom: 4,
+      backgroundColor: 'transparent',
+    },
+    itemLabel: {
+      fontSize: 12,
+      fontWeight: '600',
+      textAlign: 'center',
+    },
+  });
+
+export default createStyles;

package/src/react/components/CategoryForm.js

@@ -10,10 +10,12 @@ import {
   Modal,
 } from 'react-native';
 
-import { MaterialCommunityIcons } from '@expo/vector-icons';
-import { useStore } from '@store';
-import styles from './CategoryForm.styles';
-import { inlineStyle_240_75 } from './CategoryForm.styles';
+import { MaterialCommunityIcons } from '@expo/vector-icons';
+import { useStore } from '@store';
+import { colors } from '@controleonline/../../src/styles/colors';
+import { resolveThemePalette } from '@controleonline/../../src/styles/branding';
+import styles from './CategoryForm.styles';
+import { inlineStyle_240_75 } from './CategoryForm.styles';
 
 /* ─── Paleta de cores predefinidas ─── */
 const PRESET_COLORS = [
@@ -131,11 +133,11 @@ const BottomModal = ({ visible, onClose, title, children }) => (
 );
 
 /* ─── Seletor de cor ─── */
-const ColorPicker = ({ value, onChange }) => {
-  const [open, setOpen] = useState(false);
-  const [hexInput, setHexInput] = useState(value || '#000000');
-
-  useEffect(() => { setHexInput(value || '#000000'); }, [value]);
+const ColorPicker = ({ defaultColor = '#CBD5E1', value, onChange }) => {
+  const [open, setOpen] = useState(false);
+  const [hexInput, setHexInput] = useState(value || defaultColor);
+
+  useEffect(() => { setHexInput(value || defaultColor); }, [defaultColor, value]);
 
   const applyHex = () => {
     const v = hexInput.startsWith('#') ? hexInput : `#${hexInput}`;
@@ -152,8 +154,8 @@ const ColorPicker = ({ value, onChange }) => {
         onPress={() => setOpen(true)}
         activeOpacity={0.7}
       >
-        <View style={[styles.colorSwatch, { backgroundColor: value || '#000000' }]} />
-        <Text style={styles.colorButtonText}>{value || '#000000'}</Text>
+        <View style={[styles.colorSwatch, { backgroundColor: value || defaultColor }]} />
+        <Text style={styles.colorButtonText}>{value || defaultColor}</Text>
         <MaterialCommunityIcons name="palette-outline" size={18} color="#94A3B8" />
       </TouchableOpacity>
 
@@ -443,9 +445,17 @@ const CategoryForm = forwardRef(({ category, context = 'products', onClose, onSa
   const categoriesStore = useStore('categories');
   const categoryActions = categoriesStore.actions;
   const categories = categoriesStore.getters.items;
-  const peopleStore = useStore('people');
-  const { currentCompany } = peopleStore.getters;
-  const categoryContext = normalizeCategoryContext(context);
+  const peopleStore = useStore('people');
+  const { currentCompany } = peopleStore.getters;
+  const { colors: themeColors } = useStore('theme').getters;
+  const categoryContext = normalizeCategoryContext(context);
+  const defaultColor = useMemo(
+    () => resolveThemePalette(
+      { ...themeColors, ...(currentCompany?.theme?.colors || {}) },
+      colors,
+    ).primary,
+    [currentCompany?.theme?.colors, themeColors],
+  );
 
   const [name, setName] = useState('');
   const [color, setColor] = useState('#CBD5E1');
@@ -463,43 +473,48 @@ const CategoryForm = forwardRef(({ category, context = 'products', onClose, onSa
   useEffect(() => {
     if (category) {
       setName(category.name || '');
-      setColor(category.color || '#CBD5E1');
+      setColor(category.color || defaultColor);
       setIcon(category.icon || '');
       setParent(category.parent?.id || null);
-      setSortOrder(String(category?.extraData?.sortOrder || ''));
+      setSortOrder(category?.sortOrder === null || category?.sortOrder === undefined
+        ? ''
+        : String(category.sortOrder));
       setChannel(String(category?.extraData?.channel || 'default'));
     } else {
       setName('');
-      setColor('#CBD5E1');
+      setColor(defaultColor);
       setIcon('');
       setParent(null);
       setSortOrder('');
       setChannel('default');
     }
-  }, [category]);
+  }, [category, defaultColor]);
 
-  const handleSubmit = async () => {
-    const payload = {
+  const handleSubmit = async () => {
+    const categoryExtraData = { ...(category?.extraData || {}) };
+    delete categoryExtraData.sortOrder;
+    const payload = {
       ...(category?.id ? { id: category.id } : {}),
       name,
       color,
       icon: icon || '',
       context: categoryContext,
       company: companyIri,
-      parent: parent ? `/categories/${parent}` : null,
-      extraData: {
-        ...(category?.extraData || {}),
-        sortOrder: sortOrder ? parseInt(String(sortOrder).replace(/\D/g, ''), 10) || 0 : 0,
-        channel: channel || 'default',
-      },
+      parent: parent ? `/categories/${parent}` : null,
+      sortOrder: sortOrder === '' ? null : Number.parseInt(sortOrder, 10),
+      extraData: {
+        ...categoryExtraData,
+        channel: channel || 'default',
+      },
     };
 
     const saved = await categoryActions.save(payload);
 
     await categoryActions.getItems({
-      context: categoryContext,
-      'order[name]': 'ASC',
-      company: currentCompany.id,
+      context: categoryContext,
+      'order[sortOrder]': 'ASC',
+      'order[name]': 'ASC',
+      company: currentCompany.id,
     });
 
     if (onSaved) onSaved(saved);
@@ -526,7 +541,7 @@ const CategoryForm = forwardRef(({ category, context = 'products', onClose, onSa
       {/* Cor */}
       <View style={styles.field}>
         <Text style={styles.label}>Cor</Text>
-        <ColorPicker value={color} onChange={setColor} />
+        <ColorPicker defaultColor={defaultColor} value={color} onChange={setColor} />
       </View>
 
       {/* Ícone */}
@@ -559,11 +574,13 @@ const CategoryForm = forwardRef(({ category, context = 'products', onClose, onSa
         />
       </View>
 
-      {/* Canais */}
-      <View style={styles.field}>
-        <Text style={styles.label}>Canais de venda</Text>
-        <ChannelPicker value={channel} onChange={setChannel} />
-      </View>
+      {/* Vitrines */}
+      <View style={styles.field}>
+        <Text style={styles.label}>
+          {global.t?.t?.('categories', 'label', 'showcases')}
+        </Text>
+        <ChannelPicker value={channel} onChange={setChannel} />
+      </View>
 
     </View>
   );