jornada-ui 0.4.6 → 0.4.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jornada-ui",
-  "version": "0.4.6",
+  "version": "0.4.7",
   "description": "Biblioteca para desenvolvimento dos componentes para utilizar nos app",
   "source": "./src/index.tsx",
   "main": "./lib/commonjs/index.js",

package/src/components/capture-photo/index.tsx

@@ -17,6 +17,7 @@ import { type ICapturePhotoProps } from "./interface";
 // styles
 import { theme } from "../../styles/theme/theme";
 import { styles } from "./styles";
+import { Box } from "jornada-ui";
 
 const CapturePhoto = forwardRef<any, ICapturePhotoProps>((props, ref): React.ReactElement => {
   const {
@@ -35,6 +36,7 @@ const CapturePhoto = forwardRef<any, ICapturePhotoProps>((props, ref): React.Rea
     style,
     smallText,
     paddingStyle,
+    backgroundColor,
   } = props;
 
   const styleProps = {
@@ -52,6 +54,7 @@ const CapturePhoto = forwardRef<any, ICapturePhotoProps>((props, ref): React.Rea
     opacity,
     smallText,
     paddingStyle,
+    backgroundColor,
     style,
   } as ICapturePhotoProps;
 
@@ -82,26 +85,32 @@ const CapturePhoto = forwardRef<any, ICapturePhotoProps>((props, ref): React.Rea
         <TouchableOpacity
           ref={ref}
           activeOpacity={0.7}
-          style={[styles(styleProps).capturePhoto, style]}
+          style={[styles(styleProps).capturePhoto, { backgroundColor }, style]}
           onPress={takePhotoWithImagePicker}
           testID={testID}
         >
           <Icons icon={"CAMERA_PLUS"} size={theme.fontSizes["2xl"] || 24} color={color?.colorSvg} />
-          <Typography
-            text={title.text || "Sem foto capturada."}
-            align={
-              flexStyle?.textAlign === "left" || flexStyle?.textAlign === "right"
-                ? flexStyle.textAlign
-                : "center"
-            }
-            color={color?.colorText ? color.colorText : theme.colors.gray[875]}
-            size={fontStyle?.fontSize ? fontStyle?.fontSize : theme.fontSizes.md}
-            fontFamily={
-              fontStyle?.fontFamily ? fontStyle?.fontFamily : theme.fonts.inter_regular_400
-            }
-            lineHeight={fontStyle?.lineHeight ? fontStyle?.lineHeight : theme.fontSizes["2xl"]}
-            letterSpacing={fontStyle?.letterSpacing ? fontStyle?.letterSpacing : ("regular" as any)}
-          />
+
+          <Box width={140}>
+            <Typography
+              text={title.text || "Sem foto capturada."}
+              align={
+                flexStyle?.textAlign === "left" || flexStyle?.textAlign === "right"
+                  ? flexStyle.textAlign
+                  : "center"
+              }
+              color={color?.colorText ? color.colorText : theme.colors.gray[875]}
+              size={fontStyle?.fontSize ? fontStyle?.fontSize : theme.fontSizes.md}
+              fontFamily={
+                fontStyle?.fontFamily ? fontStyle?.fontFamily : theme.fonts.inter_regular_400
+              }
+              lineHeight={fontStyle?.lineHeight ? fontStyle?.lineHeight : theme.fontSizes["2xl"]}
+              letterSpacing={
+                fontStyle?.letterSpacing ? fontStyle?.letterSpacing : ("regular" as any)
+              }
+              marginTop={8}
+            />
+          </Box>
           {smallText && (
             <Typography
               text={title.textSmallPhoto || "aqui vai o texto de baixo da foto"}

package/src/components/input/styles.ts

@@ -1,30 +1,30 @@
-import { StyleSheet } from "react-native";
-
-const styles = StyleSheet.create({
-  container: {
-    marginBottom: 16,
-  },
-  label: {
-    fontSize: 14,
-    color: "#333",
-    marginBottom: 4,
-    fontWeight: "500",
-  },
-  inputWrapper: {
-    flexDirection: "row",
-    alignItems: "center",
-    borderBottomColor: "#ccc",
-    borderBottomWidth: 1,
-  },
-  input: {
-    flex: 1,
-    height: 40,
-    fontSize: 16,
-    color: "#1e1e1e",
-  },
-  icon: {
-    marginLeft: 8,
-  },
-});
-
-export { styles };
+import { StyleSheet } from "react-native";
+
+const styles = StyleSheet.create({
+  container: {
+    marginBottom: 16,
+  },
+  label: {
+    fontSize: 14,
+    color: "#333",
+    marginBottom: 4,
+    fontWeight: "500",
+  },
+  inputWrapper: {
+    flexDirection: "row",
+    alignItems: "center",
+    borderBottomColor: "#ccc",
+    borderBottomWidth: 1,
+  },
+  input: {
+    flex: 1,
+    height: 60,
+    fontSize: 16,
+    color: "#1e1e1e",
+  },
+  icon: {
+    marginLeft: 8,
+  },
+});
+
+export { styles };

package/src/components/maintenance-description-input/index.tsx

@@ -1,49 +1,55 @@
-/**
- * IMPORTS
- */
-import React, { forwardRef, useState } from "react";
-import { View, Text, TextInput } from "react-native";
-
-// typings
-import type { MaintenanceDescriptionInputProps } from "./interface";
-import { asBaseComponent } from "../../@types/as-base-component";
-
-// styles
-import { stylesInput } from "./styles";
-
-const MAX_LENGTH = 150;
-
-const MaintenanceDescriptionInput = forwardRef<any, MaintenanceDescriptionInputProps>(
-  ({ label, onChangeText, ...props }, ref): React.ReactElement => {
-    const [text, setText] = useState("");
-
-    const handleChangeText = (value: string) => {
-      const sliced = value.slice(0, 150);
-      setText(sliced);
-      onChangeText?.(sliced);
-    };
-
-    return (
-      <View>
-        <Text style={stylesInput.label}>{label}</Text>
-
-        <View style={stylesInput.inputWrapper}>
-          <TextInput
-            ref={ref}
-            multiline
-            style={stylesInput.input}
-            placeholderTextColor="#999"
-            maxLength={MAX_LENGTH}
-            value={text}
-            onChangeText={handleChangeText}
-            {...props}
-          />
-        </View>
-
-        <Text style={stylesInput.charCount}>{`${text.length}/${MAX_LENGTH}`}</Text>
-      </View>
-    );
-  }
-);
-
-export default asBaseComponent(React.memo(MaintenanceDescriptionInput));
+/**
+ * IMPORTS
+ */
+import React, { forwardRef, useState } from "react";
+import { View, Text, TextInput } from "react-native";
+
+// typings
+import type { MaintenanceDescriptionInputProps } from "./interface";
+import { asBaseComponent } from "../../@types/as-base-component";
+
+// styles
+import { stylesInput } from "./styles";
+import Box from "../box";
+
+const MAX_LENGTH = 150;
+
+const MaintenanceDescriptionInput = forwardRef<any, MaintenanceDescriptionInputProps>(
+  ({ label, onChangeText, error = null, ...props }, ref): React.ReactElement => {
+    const [text, setText] = useState("");
+
+    const handleChangeText = (value: string) => {
+      const sliced = value.slice(0, 150);
+      setText(sliced);
+      onChangeText?.(sliced);
+    };
+
+    return (
+      <View>
+        <Text style={stylesInput.label}>{label}</Text>
+
+        <View style={stylesInput.inputWrapper}>
+          <TextInput
+            ref={ref}
+            multiline
+            style={stylesInput.input}
+            placeholderTextColor="#999"
+            maxLength={MAX_LENGTH}
+            value={text}
+            onChangeText={handleChangeText}
+            {...props}
+          />
+        </View>
+
+        <Box
+          flexStyle={{ flexDirection: "row", justifyContent: error ? "space-between" : "flex-end" }}
+        >
+          {error && <Text style={stylesInput.errorText}>{error}</Text>}
+          <Text style={stylesInput.charCount}>{`${text.length}/${MAX_LENGTH}`}</Text>
+        </Box>
+      </View>
+    );
+  }
+);
+
+export default asBaseComponent(React.memo(MaintenanceDescriptionInput));

package/src/components/maintenance-description-input/interface.d.ts

@@ -1,36 +1,38 @@
-import { type TextInputProps, type DimensionValue } from "react-native";
-
-type MaintenanceDescriptionInputProps = TextInputProps & {
-  label: string;
-  backgroundColor?: string;
-
-  /**
-   * A propriedade CSS abreviada border define a borda de um elemento. Ele define os valores de largura da borda, estilo da borda e cor da borda.
-   */
-  borderStyled?: {
-    borderStyle?: "solid" | "dotted" | "dashed";
-
-    borderRadius?: number | DimensionValue;
-    borderTopRightRadius?: number | DimensionValue;
-    borderTopLeftRadius?: number | DimensionValue;
-    borderBottomRightRadius?: number | DimensionValue;
-    borderBottomLeftRadius?: number | DimensionValue;
-
-    borderWidth?: number | DimensionValue;
-    borderLeftWidth?: number | DimensionValue;
-    borderRightWidth?: number | DimensionValue;
-    borderTopWidth?: number | DimensionValue;
-    borderBottomWidth?: number | DimensionValue;
-
-    borderColor?: string;
-    borderBottomColor?: string;
-    borderLeftColor?: string;
-    borderRightColor?: string;
-    borderTopColor?: string;
-  };
-};
-
-/**
- * EXPORTS
- */
-export { MaintenanceDescriptionInputProps };
+import { type TextInputProps, type DimensionValue } from "react-native";
+
+type MaintenanceDescriptionInputProps = TextInputProps & {
+  label: string;
+  backgroundColor?: string;
+
+  error?: string | null;
+
+  /**
+   * A propriedade CSS abreviada border define a borda de um elemento. Ele define os valores de largura da borda, estilo da borda e cor da borda.
+   */
+  borderStyled?: {
+    borderStyle?: "solid" | "dotted" | "dashed";
+
+    borderRadius?: number | DimensionValue;
+    borderTopRightRadius?: number | DimensionValue;
+    borderTopLeftRadius?: number | DimensionValue;
+    borderBottomRightRadius?: number | DimensionValue;
+    borderBottomLeftRadius?: number | DimensionValue;
+
+    borderWidth?: number | DimensionValue;
+    borderLeftWidth?: number | DimensionValue;
+    borderRightWidth?: number | DimensionValue;
+    borderTopWidth?: number | DimensionValue;
+    borderBottomWidth?: number | DimensionValue;
+
+    borderColor?: string;
+    borderBottomColor?: string;
+    borderLeftColor?: string;
+    borderRightColor?: string;
+    borderTopColor?: string;
+  };
+};
+
+/**
+ * EXPORTS
+ */
+export { MaintenanceDescriptionInputProps };

package/src/components/maintenance-description-input/styles.ts

@@ -1,33 +1,38 @@
-import { StyleSheet } from "react-native";
-import { theme } from "../../styles/theme/theme";
-
-const stylesInput = StyleSheet.create({
-  label: {
-    fontFamily: theme.fonts.inter_regular_400,
-    fontSize: theme.fontSizes.md,
-    color: theme.colors.black[100],
-    marginBottom: theme.margins["1xs"],
-    fontWeight: "500",
-  },
-  inputWrapper: {
-    borderColor: theme.colors.gray[850],
-    borderWidth: theme.borderWidths.thin,
-    borderRadius: theme.borderWidths.thick,
-  },
-  input: {
-    fontFamily: theme.fonts.inter_regular_400,
-    fontSize: theme.fontSizes.sm,
-    color: theme.colors.gray[850],
-    padding: theme.paddings["2xs"],
-    textAlignVertical: "top",
-    minHeight: 80,
-  },
-  charCount: {
-    alignSelf: "flex-end",
-    marginTop: theme.margins["1xs"],
-    color: theme.colors.gray[850],
-    fontSize: theme.fontSizes.sm,
-  },
-});
-
-export { stylesInput };
+import { StyleSheet } from "react-native";
+import { theme } from "../../styles/theme/theme";
+
+const stylesInput = StyleSheet.create({
+  label: {
+    fontFamily: theme.fonts.inter_regular_400,
+    fontSize: theme.fontSizes.md,
+    color: theme.colors.black[100],
+    marginBottom: theme.margins["1xs"],
+    fontWeight: "500",
+  },
+  inputWrapper: {
+    borderColor: theme.colors.gray[850],
+    borderWidth: theme.borderWidths.thin,
+    borderRadius: theme.borderWidths.thick,
+  },
+  input: {
+    fontFamily: theme.fonts.inter_regular_400,
+    fontSize: theme.fontSizes.sm,
+    color: theme.colors.gray[850],
+    padding: theme.paddings["2xs"],
+    textAlignVertical: "top",
+    minHeight: 80,
+  },
+  charCount: {
+    alignSelf: "flex-end",
+    marginTop: theme.margins["1xs"],
+    color: theme.colors.gray[850],
+    fontSize: theme.fontSizes.sm,
+  },
+  errorText: {
+    color: theme.colors.red[900],
+    fontSize: theme.fontSizes.sm,
+    marginTop: theme.margins["1xs"],
+  },
+});
+
+export { stylesInput };

package/src/components/toggle-fuel/index.tsx

@@ -1,62 +1,93 @@
-/**
- * IMPORTS
- */
-import React, { forwardRef, useState } from "react";
-import { TouchableOpacity, Text, View } from "react-native";
-
-// typings
-import type { ToggleFuelProps } from "./interface";
-import { asBaseComponent } from "../../@types/as-base-component";
-
-// styles
-import { styles } from "./style";
-
-/**
- * Componente ToggleFuel para a interação da  ui.
- */
-const ToggleFuel = forwardRef<View, ToggleFuelProps>(
-  ({ onSelect, initialValue = "diesel" }, ref): React.ReactElement => {
-    const [selecionado, setSelecionado] = useState<"diesel" | "arla">(initialValue);
-
-    /**selecionar o tipo de combustível */
-    const handlePress = (tipo: "diesel" | "arla") => {
-      setSelecionado(tipo);
-      onSelect(tipo);
-    };
-
-    return (
-      <View ref={ref} style={styles.container}>
-        <TouchableOpacity
-          testID="diesel"
-          accessibilityRole="button"
-          accessibilityState={{ selected: selecionado === "diesel" }}
-          style={[styles.botao, selecionado === "diesel" && styles.botaoSelecionadoEsquerda]}
-          onPress={() => handlePress("diesel")}
-        >
-          <Text style={[styles.texto, selecionado === "diesel" && styles.textoSelecionado]}>
-            Diesel
-          </Text>
-        </TouchableOpacity>
-
-        <TouchableOpacity
-          testID="arla"
-          accessibilityRole="button"
-          accessibilityState={{ selected: selecionado === "arla" }}
-          style={[styles.botao, selecionado === "arla" && styles.botaoSelecionadoDireita]}
-          onPress={() => handlePress("arla")}
-        >
-          <Text style={[styles.texto, selecionado === "arla" && styles.textoSelecionado]}>
-            Arla
-          </Text>
-        </TouchableOpacity>
-      </View>
-    );
-  }
-);
-
-ToggleFuel.displayName = "ToggleFuel";
-
-/**
- * EXPORTS
- */
-export default asBaseComponent(ToggleFuel);
+/**
+ * IMPORTS
+ */
+import React, { forwardRef, useMemo, useState } from "react";
+import { TouchableOpacity, Text, View } from "react-native";
+
+// typings
+import type { ToggleFuelProps, ToggleOption } from "./interface";
+import { asBaseComponent } from "../../@types/as-base-component";
+
+// styles
+import { styles } from "./style";
+
+/**
+ * Componente ToggleFuel para a interação da  ui.
+ */
+const ToggleFuel = forwardRef<any, ToggleFuelProps>(
+  (
+    {
+      options: optionsProp,
+      value,
+      defaultValue,
+      testIDPrefix = "toggle-fuel",
+      accessibleLabel = "Toggle Fuel",
+      onSelect,
+    },
+    ref
+  ): React.ReactElement => {
+    const options = useMemo<ToggleOption[]>(
+      () =>
+        (optionsProp && optionsProp.length
+          ? optionsProp
+          : [
+              { value: "diesel", label: "Diesel" },
+              { value: "arla", label: "Arla" },
+            ]) as ToggleOption[],
+      [optionsProp]
+    );
+
+    const initial = value ?? defaultValue ?? options[0]?.value;
+    const [internal, setInternal] = useState<string | number | undefined>(initial);
+
+    const selected = value ?? internal;
+
+    const handlePress = (v: ToggleOption["value"]) => {
+      if (value === undefined) setInternal(v); // não-controlado
+      onSelect?.(v);
+    };
+
+    return (
+      <View
+        ref={ref}
+        style={[styles.container]}
+        accessibilityRole="tablist"
+        accessibilityLabel={accessibleLabel}
+      >
+        {options.map((opt, idx) => {
+          const isSelected = selected === opt.value;
+          const isFirst = idx === 0;
+          const isLast = idx === options.length - 1;
+
+          return (
+            <TouchableOpacity
+              key={`${opt.value}`}
+              testID={`${testIDPrefix}-${opt.value}`}
+              accessibilityRole="tab"
+              accessibilityState={{ selected: isSelected }}
+              onPress={() => handlePress(opt.value)}
+              style={[
+                styles.item,
+                isFirst && styles.itemFirst,
+                isLast && styles.itemLast,
+                isSelected && styles.itemSelected,
+              ]}
+              activeOpacity={0.8}
+            >
+              <Text style={[styles.itemText, isSelected && styles.itemTextSelected]}>
+                {opt.label}
+              </Text>
+            </TouchableOpacity>
+          );
+        })}
+      </View>
+    );
+  }
+);
+
+ToggleFuel.displayName = "ToggleFuel";
+
+/**
+ * EXPORTS
+ */
+export default asBaseComponent(ToggleFuel);

package/src/components/toggle-fuel/interface.d.ts

@@ -1,7 +1,25 @@
-/* eslint-disable no-unused-vars */
-interface ToggleFuelProps {
-  onSelect: (tipo: "diesel" | "arla") => void;
-  initialValue?: "diesel" | "arla";
-}
-
-export type { ToggleFuelProps };
+/* eslint-disable no-unused-vars */
+
+export type ToggleOption = {
+  value: string | number;
+  label: string;
+};
+
+interface ToggleFuelProps {
+  /** Lista de opções. Ex.: [{ value:'cavalo', label:'Cavalo' }, { value:'carreta', label:'Carreta' }] */
+  options?: ToggleOption[];
+
+  /** Modo controlado */
+  value?: ToggleOption["value"];
+
+  /** Modo não-controlado (valor inicial) */
+  defaultValue?: ToggleOption["value"];
+
+  /** Callback ao selecionar */
+  onSelect?: (value: ToggleOption["value"]) => void;
+
+  testIDPrefix?: string;
+  accessibleLabel?: string;
+}
+
+export type { ToggleFuelProps };

package/src/components/toggle-fuel/style.ts

@@ -1,35 +1,42 @@
-import { StyleSheet } from "react-native";
-import { theme } from "../../styles/theme/theme";
-
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: "row",
-    borderRadius: 8,
-    overflow: "hidden",
-    marginTop: theme.margins.sm,
-    backgroundColor: "#ffffff",
-  },
-  botao: {
-    flex: 1,
-    paddingVertical: 12,
-    alignItems: "center",
-  },
-  botaoSelecionadoEsquerda: {
-    backgroundColor: theme.colors.blue[400],
-  },
-  botaoSelecionadoDireita: {
-    backgroundColor: theme.colors.blue[400],
-  },
-  texto: {
-    fontSize: theme.fontSizes.sm,
-    fontFamily: theme.fonts.inter_medium_500,
-    color: theme.colors.blue[400],
-  },
-  textoSelecionado: {
-    color: "#ffffff",
-    fontSize: theme.fontSizes.sm,
-    fontFamily: theme.fonts.inter_medium_500,
-  },
-});
-
-export { styles };
+import { StyleSheet } from "react-native";
+import { theme } from "../../styles/theme/theme";
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    borderRadius: 8,
+    overflow: "hidden",
+    marginTop: theme.margins.sm,
+    backgroundColor: "#ffffff",
+  },
+  item: {
+    flex: 1,
+    paddingVertical: 10,
+    paddingHorizontal: 12,
+    alignItems: "center",
+    justifyContent: "center",
+    borderWidth: 1,
+    borderColor: "transparent",
+  },
+  itemFirst: {
+    borderTopLeftRadius: 10,
+    borderBottomLeftRadius: 10,
+  },
+  itemLast: {
+    borderTopRightRadius: 10,
+    borderBottomRightRadius: 10,
+  },
+  itemSelected: {
+    backgroundColor: theme.colors.blue[500],
+  },
+  itemText: {
+    fontSize: 14,
+    fontWeight: "600",
+    color: "#0F172A",
+  },
+  itemTextSelected: {
+    color: "#FFFFFF",
+  },
+});
+
+export { styles };