react-native-exp-fig 0.1.18 → 0.1.20

package/src/components/step-indicator/interface.d.ts

@@ -1,34 +1,35 @@
-/**
- * IMPORTS
- */
-
-type IData = {
-  id: number;
-  duracao_segundos: string | number;
-  data_inicio: string;
-  data_fim: string;
-  descricao: string;
-};
-interface IStepIndicator {
-  /**dados que vão ser renderizados */
-  data?: IData[];
-
-  /**tupo de renderização padrão ou customizada */
-  type?: "default" | "custom";
-
-  /**tamanho do step indicator */
-  backgroundColorBall?: string;
-
-  /**cor do texto */
-  titleColor?: string;
-
-  /**cor do numero do step indicator */
-  titleNumberColor?: string;
-
-  /**cor do texto da descrição */
-  textColorDescription?: string;
-}
-/**
- * EXPORTS
- */
-export { type IStepIndicator };
+/**
+ * IMPORTS
+ */
+
+type IData = {
+  id: number;
+  duracao_segundos: string | number;
+  data_inicio: string;
+  data_fim: string;
+  descricao: string;
+  sincronizado;
+};
+interface IStepIndicator {
+  /**dados que vão ser renderizados */
+  data?: IData[];
+
+  /**tupo de renderização padrão ou customizada */
+  type?: "default" | "custom";
+
+  /**cor do texto */
+  titleColor?: string;
+
+  /**cor do numero do step indicator */
+  titleNumberColor?: string;
+
+  /**cor do texto da descrição */
+  textColorDescription?: string;
+
+  /**verifica se foi sincronizado com back end */
+  sincronizado?: boolean;
+}
+/**
+ * EXPORTS
+ */
+export { type IStepIndicator };

package/src/components/step-indicator/styles.ts

@@ -1,68 +1,68 @@
-/**
- * IMPORTS
- */
-
-import { StyleSheet } from "react-native";
-
-// typings
-import { IStepIndicator } from "./interface";
-
-// styles
-import { theme } from "../../styles/theme/theme";
-
-const styles = (props: IStepIndicator) =>
-  StyleSheet.create({
-    containerIndicator: {
-      width: "100%",
-      height: 86,
-      flexDirection: "row",
-      justifyContent: "flex-start",
-      // backgroundColor: theme.colors.gray[300],
-    },
-    containerBall: {
-      width: 32,
-      height: 32,
-      backgroundColor: props.backgroundColorBall ?? theme.colors.blue[500],
-      flexDirection: "row",
-      alignItems: "center",
-      justifyContent: "center",
-      borderRadius: 16,
-    },
-    title: {
-      color: props.titleColor ?? "black",
-      textAlign: "center",
-      lineHeight: 20,
-      fontSize: theme.fontSizes["sm"],
-      fontWeight: "500",
-      marginLeft: 8,
-    },
-    titleNumber: {
-      color: props.titleNumberColor ?? theme.colors.neutral[25],
-      textAlign: "center",
-      lineHeight: 16,
-      fontFamily: theme.fonts.inter_regular_400,
-      fontSize: theme.fontSizes["xs"],
-      position: "absolute",
-    },
-    titleDescription: {
-      color: props.textColorDescription ?? theme.colors.gray[700],
-      textAlign: "center",
-      lineHeight: 16,
-      fontSize: theme.fontSizes["xs"],
-      fontFamily: theme.fonts.inter_regular_400,
-      fontWeight: "400",
-      marginLeft: 8,
-    },
-    containerMain: {
-      width: "100%",
-      height: 56,
-      flexDirection: "column",
-      alignItems: "flex-start",
-      marginLeft: 2,
-    },
-  });
-
-/**
- * EXPORTS
- */
-export { styles };
+/**
+ * IMPORTS
+ */
+
+import { StyleSheet } from "react-native";
+
+// typings
+import { IStepIndicator } from "./interface";
+
+// styles
+import { theme } from "../../styles/theme/theme";
+
+const styles = (props: IStepIndicator) =>
+  StyleSheet.create({
+    containerIndicator: {
+      width: "100%",
+      height: 86,
+      flexDirection: "row",
+      justifyContent: "flex-start",
+      // backgroundColor: theme.colors.gray[300],
+    },
+    containerBall: {
+      width: 32,
+      height: 32,
+      backgroundColor: props.sincronizado ? theme.colors.blue[500] : theme.colors.orange[150],
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "center",
+      borderRadius: 16,
+    },
+    title: {
+      color: props.titleColor ?? "black",
+      textAlign: "center",
+      lineHeight: 20,
+      fontSize: theme.fontSizes["sm"],
+      fontWeight: "500",
+      marginLeft: 8,
+    },
+    titleNumber: {
+      color: props.titleNumberColor ?? theme.colors.neutral[25],
+      textAlign: "center",
+      lineHeight: 16,
+      fontFamily: theme.fonts.inter_regular_400,
+      fontSize: theme.fontSizes["xs"],
+      position: "absolute",
+    },
+    titleDescription: {
+      color: props.textColorDescription ?? theme.colors.gray[700],
+      textAlign: "center",
+      lineHeight: 16,
+      fontSize: theme.fontSizes["xs"],
+      fontFamily: theme.fonts.inter_regular_400,
+      fontWeight: "400",
+      marginLeft: 8,
+    },
+    containerMain: {
+      width: "100%",
+      height: 56,
+      flexDirection: "column",
+      alignItems: "flex-start",
+      marginLeft: 2,
+    },
+  });
+
+/**
+ * EXPORTS
+ */
+export { styles };

package/src/stories/activities-progress/activities-progress.stories.tsx

@@ -11,7 +11,7 @@ const meta: Meta<typeof ActivitiesProgress> = {
     data_inicio_horario: "17:20",
     tipo_atividade: "trabalho",
     titleLabel: "Operação com Veículo",
-    criado_ofiline: true,
+    criado_offline: true,
     referencia: "repouso_semanal",
   },
   parameters: {
@@ -27,7 +27,7 @@ Você usa assim:
   data_inicio_horario="17:20"
   tipo_atividade="descanso"
   titleLabel="Repouso Noturno"
-  criado_ofiline=true
+  criado_offline=true
   referencia="repouso_semanal"
 />
 \`\`\`
@@ -52,7 +52,7 @@ export const ActivitiesProgressTrabalho: Story = {
     data_inicio_horario: "14:30",
     titleLabel: "Em Carga",
     tipo_atividade: "trabalho",
-    criado_ofiline: true,
+    criado_offline: true,
     referencia: "operacao_veiculo",
   },
 };
@@ -65,7 +65,7 @@ export const ActivitiesProgressDescanso: Story = {
     data_inicio_horario: "12:00",
     titleLabel: "Refeição",
     tipo_atividade: "descanso",
-    criado_ofiline: false,
+    criado_offline: false,
     referencia: "refeicao",
   },
 };

package/src/stories/loading-details/loading-details.stories.tsx

@@ -1,48 +1,60 @@
-import React from "react";
-import type { StoryObj, Meta } from "@storybook/react";
-
-import { LoadingDetails } from "../../components/loading-details";
-
-const meta: Meta<typeof LoadingDetails> = {
-  title: "componente/LoadingDetails",
-  component: LoadingDetails as React.FC,
-  args: {
-    numero: "01",
-    local: "Doca 1, Pátio 02 - Ultrimais (Ipatinga)",
-    date: "24/03/2025",
-    duracao: "00:00",
-  },
-  parameters: {
-    notes: `
-# LoadingDetails
-
-Este é um componente de LoadingDetails.
-Você usa assim:
-\`\`\`tsx
-<LoadingDetails
-    numero="01"
-    local="Doca 1, Pátio 02 - Usiminas (Ipatinga)"
-    date="24/03/2025"
-    duracao="00:00"
-    handleClickGoback={() => {}}
-    isLoadingStart={false}
-    handleClickStart={() => {}}
-  />
-\`\`\`
-`,
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Profile: Story = {
-  name: "loading-details",
-  args: {
-    numero: "01",
-    local: "Doca 1, Pátio 02 - Ultrimais (Ipatinga)",
-    date: "24/03/2025",
-    duracao: "00:00",
-  },
-};
+import React from "react";
+import type { StoryObj, Meta } from "@storybook/react";
+
+import { LoadingDetails } from "../../components/loading-details";
+
+const meta: Meta<typeof LoadingDetails> = {
+  title: "componente/LoadingDetails",
+  component: LoadingDetails as React.FC,
+  args: {
+    numero: "01",
+    local: "Doca 1, Pátio 02 - Ultrimais (Ipatinga)",
+    date: "24/03/2025",
+    duracao: "00:00",
+    disabled: false,
+  },
+  parameters: {
+    notes: `
+# LoadingDetails
+
+Este é um componente de LoadingDetails.
+Você usa assim:
+\`\`\`tsx
+<LoadingDetails
+    numero="01"
+    local="Doca 1, Pátio 02 - Usiminas (Ipatinga)"
+    date="24/03/2025"
+    duracao="00:00"
+    handleClickGoback={() => {}}
+    isLoadingStart={false}
+    handleClickStart={() => {}}
+    disabled={true}
+  />
+\`\`\`
+`,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Profile: Story = {
+  name: "loading-details",
+  args: {
+    numero: "01",
+    local: "Doca 1, Pátio 02 - Ultrimais (Ipatinga)",
+    date: "24/03/2025",
+    duracao: "00:00",
+  },
+};
+export const ProfileDisabled: Story = {
+  name: "loading-details-disabled",
+  args: {
+    numero: "01",
+    local: "Doca 1, Pátio 02 - Ultrimais (Ipatinga)",
+    date: "24/03/2025",
+    duracao: "00:00",
+    disabled: true,
+  },
+};

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],
+  },
+};