react-native-exp-fig 0.1.18 → 0.1.19

package/src/stories/step-indicator/step-indicator.stories.tsx

@@ -1,124 +1,154 @@
-import { Meta, StoryObj } from "@storybook/react";
-
-// components
-import { StepIndicator } from "../../components/step-indicator";
-
-// styles
-import { theme } from "../../styles/theme/theme";
-
-const meta: Meta<typeof StepIndicator> = {
-  title: "Componente/StepIndicator",
-  component: StepIndicator,
-  args: {
-    data: [
-      {
-        id: 1,
-        descricao: "Repouso Noturno",
-        data_inicio: "07/03/2024 14:52",
-        data_fim: "07/03/2024 17:52",
-        duracao_segundos: "3601",
-      },
-    ],
-    backgroundColorBall: theme.colors.blue[500],
-    titleColor: theme.colors.neutral[25],
-    titleNumberColor: theme.colors.neutral[25],
-  },
-  parameters: {
-    notes: `
-# StepIndicator
-
-Este é um componente de step indicator.
-Você usa assim:
-\`\`\`tsx
-<StepIndicator
-    backgroundColorBall="#050022"
-    type="default"
-    data={dataMock}
-  />
-\`\`\`
-`,
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-const dataMock = [
-  {
-    id: 1,
-    descricao: "Repouso Noturno",
-    data_inicio: "07/03/2024 14:52",
-    data_fim: "07/03/2024 17:52",
-    duracao_segundos: "3601",
-  },
-  {
-    id: 2,
-    descricao: "Descarga",
-    data_inicio: "06/03/2024 14:52",
-    data_fim: "06/03/2024 16:52",
-    duracao_segundos: "7200",
-  },
-];
-
-const dataMockCustom = [
-  {
-    id: 1,
-    descricao: "Pedido Realizado",
-    data_inicio: "",
-    data_fim: "",
-    duracao_segundos: "",
-  },
-  {
-    id: 2,
-    descricao: "Pagamento Aprovado",
-    data_inicio: "07/03/2024 14:52",
-    data_fim: "07/03/2024 17:52",
-    duracao_segundos: "3601",
-  },
-  {
-    id: 3,
-    descricao: "Pedido Faturado",
-    data_inicio: "",
-    data_fim: "",
-    duracao_segundos: "",
-  },
-  {
-    id: 4,
-    descricao: "Pedido Enviado",
-    data_inicio: "",
-    data_fim: "",
-    duracao_segundos: "",
-  },
-  {
-    id: 4,
-    descricao: "Pedido Entregue",
-    data_inicio: "07/03/2024 14:52",
-    data_fim: "07/03/2024 17:52",
-    duracao_segundos: "3601",
-  },
-];
-
-export const StepIndicatorDefault: Story = {
-  name: "step-indicator-default",
-  args: {
-    data: dataMock,
-    type: "default",
-    backgroundColorBall: theme.colors.blue[500],
-    titleColor: theme.colors.neutral[25],
-    textColorDescription: theme.colors.gray[300],
-    titleNumberColor: theme.colors.neutral[25],
-  },
-};
-
-export const StepIndicationCustom: Story = {
-  name: "step-indicator-custom",
-  args: {
-    data: dataMockCustom,
-    type: "custom",
-    backgroundColorBall: theme.colors.orange[150],
-    titleColor: theme.colors.blue[500],
-    textColorDescription: theme.colors.gray[300],
-    titleNumberColor: theme.colors.neutral[25],
-  },
-};
+import { Meta, StoryObj } from "@storybook/react";
+
+// components
+import { StepIndicator } from "../../components/step-indicator";
+
+// styles
+import { theme } from "../../styles/theme/theme";
+
+const meta: Meta<typeof StepIndicator> = {
+  title: "Componente/StepIndicator",
+  component: StepIndicator,
+  args: {
+    data: [
+      {
+        id: 1,
+        descricao: "Repouso Noturno",
+        data_inicio: "07/03/2024 14:52",
+        data_fim: "07/03/2024 17:52",
+        duracao_segundos: "3601",
+        sincronizado: true,
+      },
+    ],
+    titleColor: theme.colors.neutral[25],
+    titleNumberColor: theme.colors.neutral[25],
+  },
+  parameters: {
+    notes: `
+# StepIndicator
+
+Este é um componente de step indicator.
+Você usa assim:
+\`\`\`tsx
+<StepIndicator
+    type="default"
+    data={dataMock}
+  />
+\`\`\`
+`,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const dataMock = [
+  {
+    id: 1,
+    descricao: "Repouso Noturno",
+    data_inicio: "07/03/2024 14:52",
+    data_fim: "07/03/2024 17:52",
+    duracao_segundos: "3601",
+    sincronizado: true,
+  },
+  {
+    id: 2,
+    descricao: "Descarga",
+    data_inicio: "06/03/2024 14:52",
+    data_fim: "06/03/2024 16:52",
+    duracao_segundos: "7200",
+    sincronizado: true,
+  },
+];
+const dataMockFalse = [
+  {
+    id: 1,
+    descricao: "Repouso Noturno",
+    data_inicio: "07/03/2024 14:52",
+    data_fim: "07/03/2024 17:52",
+    duracao_segundos: "3601",
+    sincronizado: false,
+  },
+  {
+    id: 2,
+    descricao: "Descarga",
+    data_inicio: "06/03/2024 14:52",
+    data_fim: "06/03/2024 16:52",
+    duracao_segundos: "7200",
+    sincronizado: false,
+  },
+];
+
+const dataMockCustom = [
+  {
+    id: 1,
+    descricao: "Pedido Realizado",
+    data_inicio: "",
+    data_fim: "",
+    duracao_segundos: "",
+  },
+  {
+    id: 2,
+    descricao: "Pagamento Aprovado",
+    data_inicio: "07/03/2024 14:52",
+    data_fim: "07/03/2024 17:52",
+    duracao_segundos: "3601",
+  },
+  {
+    id: 3,
+    descricao: "Pedido Faturado",
+    data_inicio: "",
+    data_fim: "",
+    duracao_segundos: "",
+  },
+  {
+    id: 4,
+    descricao: "Pedido Enviado",
+    data_inicio: "",
+    data_fim: "",
+    duracao_segundos: "",
+  },
+  {
+    id: 4,
+    descricao: "Pedido Entregue",
+    data_inicio: "07/03/2024 14:52",
+    data_fim: "07/03/2024 17:52",
+    duracao_segundos: "3601",
+  },
+];
+
+export const StepIndicatorDefault: Story = {
+  name: "step-indicator-default",
+  args: {
+    data: dataMock,
+    type: "default",
+    sincronizado: true,
+    titleColor: theme.colors.neutral[25],
+    textColorDescription: theme.colors.gray[300],
+    titleNumberColor: theme.colors.neutral[25],
+  },
+};
+export const StepIndicatorSincronizadoFalse: Story = {
+  name: "step-indicator-sincronizado-false",
+  args: {
+    data: dataMockFalse,
+    type: "default",
+    sincronizado: false,
+    titleColor: theme.colors.neutral[25],
+    textColorDescription: theme.colors.gray[300],
+    titleNumberColor: theme.colors.neutral[25],
+  },
+};
+
+export const StepIndicationCustom: Story = {
+  name: "step-indicator-custom",
+  args: {
+    data: dataMockCustom,
+    type: "custom",
+    backgroundColorBall: theme.colors.orange[150],
+    titleColor: theme.colors.blue[500],
+    textColorDescription: theme.colors.gray[300],
+    titleNumberColor: theme.colors.neutral[25],
+  },
+};

package/src/utils/get-icon-by-property/index.tsx

@@ -4,6 +4,7 @@
 
 import React from "react";
 import { Icons } from "../../common/icons-svg";
+import { theme } from "../../styles/theme/theme";
 
 /**
  * Function that will map property types to corresponding icons in SVG 🛠️.
@@ -23,7 +24,7 @@ const getIconByProperty: React.FC<any> = (propertyType: string, color?: string)
       return <Icons color={color} icon="TIMER" />;
 
     case "disposicao_veiculo_parado":
-      return <Icons color={color} icon="TRUCK" />;
+      return <Icons color={theme.colors.blue[500]} size={20} icon="TRUCK_ACTIVITY" />;
 
     case "aguardando_descarga":
       return <Icons color={color} icon="HOURGLASS" />;