jornada-ui 0.4.6 → 0.4.8

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

package/src/stories/toggle-fuel/toggle-fuel.stories.tsx

@@ -1,68 +1,112 @@
-/**
- * IMPORTS
- */
-import type React from "react";
-import type { Meta, StoryObj } from "@storybook/react";
-
-// components
-import ToggleFuel from "../../components/toggle-fuel";
-
-// typings
-import type { ToggleFuelProps } from "../../components/toggle-fuel/interface";
-
-/**
- * META
- */
-const meta: Meta<typeof ToggleFuel> = {
-  title: "Componente/ToggleFuel",
-  component: ToggleFuel as React.FC<ToggleFuelProps>,
-  args: {
-    initialValue: "diesel",
-    onSelect: (tipo: "diesel" | "arla") => {
-      return tipo;
-    },
-  },
-  argTypes: {
-    initialValue: {
-      control: { type: "radio" },
-      options: ["diesel", "arla"],
-      description: "Valor inicial selecionado no toggle.",
-    },
-    onSelect: {
-      description: "Callback disparado ao selecionar o tipo.",
-      table: { disable: true },
-    },
-  },
-  parameters: {
-    docs: {
-      description: {
-        component: `
-### ToggleFuel
-
-Componente de **toggle** para selecionar rapidamente entre **Diesel** e **Arla**.
-
-- \`initialValue\`: define o valor inicial ("diesel" | "arla")
-- \`onSelect\`: callback chamado ao trocar a seleção
-
-> Use este componente quando precisar de uma escolha simples e direta entre os dois tipos de combustível.
-        `,
-      },
-    },
-  },
-};
-export default meta;
-
-type Story = StoryObj<typeof ToggleFuel>;
-
-/**
- * STORIES
- */
-export const ToggleFuelDefault: Story = {
-  name: "toggle-fuel",
-  args: {
-    initialValue: "diesel",
-    onSelect(tipo) {
-      return tipo;
-    },
-  },
-};
+/**
+ * IMPORTS
+ */
+import type React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+
+// components
+import ToggleFuel from "../../components/toggle-fuel";
+
+// typings
+import type { ToggleFuelProps } from "../../components/toggle-fuel/interface";
+
+/**
+ * META
+ */
+const meta: Meta<typeof ToggleFuel> = {
+  title: "Componente/Toggle",
+  component: ToggleFuel as React.FC<ToggleFuelProps>,
+  args: {
+    defaultValue: "diesel",
+  },
+  argTypes: {
+    options: {
+      control: "object",
+      description: "Lista de opções { value, label }. Se omitido, usa Diesel/Arla.",
+    },
+    value: {
+      control: "text",
+      description: "Modo controlado: valor selecionado.",
+    },
+    defaultValue: {
+      control: "text",
+      description: "Valor inicial (não-controlado).",
+    },
+    testIDPrefix: {
+      control: "text",
+      description: "Prefixo para testID (default: 'toggle').",
+    },
+    onSelect: { action: "onSelect" },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: `
+### Toggle
+
+Componente de **toogle** para usuário selecionar um opção.
+
+- \`value\`: define o valor selecionado (modo controlado)
+- \`defaultValue\`: define o valor inicial (modo não-controlado)
+- \`options\`: lista de opções { value, label }. Se omitido, usa Diesel/Arla.
+- \`onSelect\`: callback ao selecionar uma opção
+- \`options\`: define as opções da mensagem (success, alert, error)
+
+> Use este componente quando quiser selecionar uma opção.
+        `,
+      },
+    },
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof ToggleFuel>;
+
+/**
+ * STORIES
+ */
+export const ToggleFuelDefault: Story = {
+  name: "toggle-fuel",
+  args: {
+    options: [
+      { value: "arla", label: "Arla" },
+      { value: "diesel", label: "Diesel" },
+    ],
+    onSelect(tipo) {
+      return tipo;
+    },
+  },
+};
+
+export const ToggleFuell: Story = {
+  args: {
+    options: [
+      { value: "arla", label: "Arla" },
+      { value: "diesel", label: "Diesel" },
+    ],
+    defaultValue: "credito",
+  },
+};
+
+export const CavaloCarreta: Story = {
+  name: "toggle-fuel-cavalo-carreta",
+  args: {
+    options: [
+      { value: "cavalo", label: "Cavalo" },
+      { value: "carreta", label: "Carreta" },
+    ],
+    defaultValue: "cavalo",
+  },
+};
+
+export const TresOpcoesPagamento: Story = {
+  name: "toggle-fuel-tres-opcoes-pagamento",
+  args: {
+    options: [
+      { value: "pix", label: "PIX" },
+      { value: "credito", label: "Crédito" },
+      { value: "debito", label: "Débito" },
+    ],
+    defaultValue: "credito",
+  },
+};