react-native-exp-fig 0.1.43 → 2.0.0

package/src/stories/box/box.stories.tsx

@@ -1,105 +1,105 @@
-import React from "react";
-import { Meta, StoryObj } from "@storybook/react";
-
-// components
-import Box from "../../components/box";
-import { Typography } from "../../components/typography";
-
-// styles
-import { theme } from "../../styles/theme/theme";
-
-const meta: Meta<typeof Box> = {
-  title: "Componente/Box",
-  component: Box as React.FC,
-  args: {
-    width: "100%",
-    height: "05%",
-  },
-  parameters: {
-    notes: `
-# Box
-
-Este é um componente de box.
-Você usa assim:
-\`\`\`tsx
-  <Box
-    width={100}
-    height={80}
-    borderStyled={{
-    borderWidth: 1,
-    borderRadius: 8,
-    borderStyle: 'solid',
-    borderColor: '#050022',
-    }}
-  />
-\`\`\`
-`,
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const BoxSolid: Story = {
-  name: "box-solid",
-  args: {
-    width: "100%",
-    height: 100,
-    backgroundColor: "transparent",
-    borderStyled: {
-      borderWidth: 1,
-      borderRadius: 8,
-      borderStyle: "solid",
-      borderColor: theme.colors.gray[300],
-    },
-    flexStyle: {
-      flexDirection: "row",
-      alignItems: "center",
-      justifyContent: "center",
-    },
-    children: <Typography text="Olá Dev" color={theme.colors.neutral[25]} />,
-  },
-};
-
-export const BoxDashed: Story = {
-  name: "box-dashed",
-  args: {
-    width: "100%",
-    height: 100,
-    backgroundColor: "transparent",
-    borderStyled: {
-      borderWidth: 1,
-      borderRadius: 8,
-      borderStyle: "dashed",
-      borderColor: theme.colors.gray[300],
-    },
-    flexStyle: {
-      flexDirection: "row",
-      alignItems: "center",
-      justifyContent: "center",
-    },
-    children: <Typography text="Olá Dev" color={theme.colors.neutral[25]} />,
-  },
-};
-
-export const BoxDotted: Story = {
-  name: "box-dotted",
-  args: {
-    width: "100%",
-    height: 100,
-    backgroundColor: "transparent",
-    borderStyled: {
-      borderWidth: 1,
-      borderRadius: 8,
-      borderStyle: "dotted",
-      borderColor: theme.colors.gray[300],
-    },
-    flexStyle: {
-      flexDirection: "row",
-      alignItems: "center",
-      justifyContent: "center",
-    },
-    children: <Typography text="Olá Dev" color={theme.colors.neutral[25]} />,
-  },
-};
+import React from "react";
+import { Meta, StoryObj } from "@storybook/react";
+
+// components
+import { Box } from "../../components/box";
+import { Typography } from "../../components/typography";
+
+// styles
+import { theme } from "../../styles/theme/theme";
+
+const meta: Meta<typeof Box> = {
+  title: "Componente/Box",
+  component: Box as React.FC,
+  args: {
+    width: "100%",
+    height: "05%",
+  },
+  parameters: {
+    notes: `
+# Box
+
+Este é um componente de box.
+Você usa assim:
+\`\`\`tsx
+  <Box
+    width={100}
+    height={80}
+    borderStyled={{
+    borderWidth: 1,
+    borderRadius: 8,
+    borderStyle: 'solid',
+    borderColor: '#050022',
+    }}
+  />
+\`\`\`
+`,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const BoxSolid: Story = {
+  name: "box-solid",
+  args: {
+    width: "100%",
+    height: 100,
+    backgroundColor: "transparent",
+    borderStyled: {
+      borderWidth: 1,
+      borderRadius: 8,
+      borderStyle: "solid",
+      borderColor: theme.colors.gray[300],
+    },
+    flexStyle: {
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "center",
+    },
+    children: <Typography text="Olá Dev" color={theme.colors.neutral[25]} />,
+  },
+};
+
+export const BoxDashed: Story = {
+  name: "box-dashed",
+  args: {
+    width: "100%",
+    height: 100,
+    backgroundColor: "transparent",
+    borderStyled: {
+      borderWidth: 1,
+      borderRadius: 8,
+      borderStyle: "dashed",
+      borderColor: theme.colors.gray[300],
+    },
+    flexStyle: {
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "center",
+    },
+    children: <Typography text="Olá Dev" color={theme.colors.neutral[25]} />,
+  },
+};
+
+export const BoxDotted: Story = {
+  name: "box-dotted",
+  args: {
+    width: "100%",
+    height: 100,
+    backgroundColor: "transparent",
+    borderStyled: {
+      borderWidth: 1,
+      borderRadius: 8,
+      borderStyle: "dotted",
+      borderColor: theme.colors.gray[300],
+    },
+    flexStyle: {
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "center",
+    },
+    children: <Typography text="Olá Dev" color={theme.colors.neutral[25]} />,
+  },
+};

package/src/stories/button/button.stories.tsx

@@ -9,7 +9,9 @@ const meta: Meta<typeof Button> = {
   title: "Componente/Button",
   component: Button,
   args: {
-    onPress: () => {},
+    onPress: () => {
+      console.log("Clicou!");
+    },
     isLoading: false,
   },
   parameters: {
@@ -35,7 +37,7 @@ export const Basic: Story = {
   args: {
     title: "Button",
     backgroundColor: theme.colors.blue[500],
-    onPress: () => alert("Clicou!"),
+    onPress: () => console.log("Clicou!"),
     isLoading: false,
     width: "100%",
     height: 45,
@@ -65,7 +67,7 @@ export const ButtonConfirm: Story = {
     testID: "button-confirmar-test-id",
     title: "CONFIRMAR RELATÓRIO",
     backgroundColor: theme.colors.blue[500],
-    onPress: () => alert("Clicou!"),
+    onPress: () => console.log("Clicou!"),
     isLoading: false,
     width: "100%",
     height: 45,
@@ -94,7 +96,7 @@ export const ButtonCancel: Story = {
     testID: "button-confirmar-test-id",
     title: "CANCELAR EDIÇÃO",
     backgroundColor: theme.colors.red[900],
-    onPress: () => alert("Clicou!"),
+    onPress: () => console.log("Clicou!"),
     isLoading: false,
     width: "100%",
     height: 45,
@@ -124,7 +126,7 @@ export const ButtonRectifyJourney: Story = {
     testID: "button-rectify-test-id",
     title: "RETIFICAR JORNADA",
     backgroundColor: theme.colors.orange[450],
-    onPress: () => alert("Clicou!"),
+    onPress: () => console.log("Clicou!"),
     isLoading: false,
     width: "100%",
     height: 45,

package/src/stories/capture-photo/capture-photo.stories.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable no-undef */
 import type { StoryObj, Meta } from "@storybook/react";
 import { CapturePhoto } from "../../components/capture-photo";
 
@@ -7,9 +8,9 @@ const meta: Meta<typeof CapturePhoto> = {
   title: "componente/ CapturePhoto",
   component: CapturePhoto,
   args: {
-    takePhotoWithImagePicker: () => {},
+    takePhotoWithImagePicker: () => console.log("tirar outra foto"),
     imageComprovante: null,
-    onPress: () => {},
+    onPress: () => console.log("onPress"),
   },
   parameters: {
     notes: `
@@ -53,7 +54,7 @@ type story = StoryObj<typeof CapturePhoto>;
 export const CaptureSimple: story = {
   name: "capture-simple",
   args: {
-    takePhotoWithImagePicker: () => alert("capturar foto..."),
+    takePhotoWithImagePicker: () => console.log("capturar foto..."),
     testID: "capture-simple",
     opacity: 0.7,
     marginStyle: {
@@ -94,7 +95,7 @@ export const CaptureSimple: story = {
 export const CaptureSmallPhoto: story = {
   name: "capture-small-photo",
   args: {
-    takePhotoWithImagePicker: () => alert("capturar foto da manutenção..."),
+    takePhotoWithImagePicker: () => console.log("capturar foto da manutenção..."),
     testID: "capture-small",
     opacity: 0.7,
     marginStyle: {
@@ -137,7 +138,7 @@ export const CaptureSimplePhoto: story = {
   args: {
     imageComprovante:
       "https://media.gettyimages.com/id/78766489/pt/foto/close-up-of-hand-on-steering-wheel.jpg?s=612x612&w=0&k=20&c=utmC6gNhwrCD-p4S6iBpsOG6CA7UCud1VMh4AAhaaE8=",
-    takePhotoWithImagePicker: () => alert("tirar outra foto"),
+    takePhotoWithImagePicker: () => console.log("tirar outra foto"),
     testID: "capture-photo",
 
     width: 300,
@@ -155,7 +156,7 @@ export const CaptureSmallWithPhoto: story = {
   args: {
     imageComprovante:
       "https://media.gettyimages.com/id/163031041/pt/foto/pneu-furado-em-um-semi-reboque.jpg?s=612x612&w=0&k=20&c=YBz1gLqUOf8HvXM1yHgBEOMllo3eNAL6oHlSylkMwo0=",
-    takePhotoWithImagePicker: () => alert("tirar outra foto"),
+    takePhotoWithImagePicker: () => console.log("tirar outra foto"),
     testID: "capture-small-photo",
 
     width: 123,

package/src/stories/card-hours/card-hours.stories.tsx

@@ -1,102 +1,102 @@
-import type { StoryObj, Meta } from "@storybook/react";
-import { CardHours } from "../../components/card-hours";
-
-import { theme } from "../../styles/theme/theme";
-import { formatDate } from "../../utils/format-data";
-
-const meta: Meta<typeof CardHours> = {
-  title: "componente/CardHours",
-  component: CardHours,
-  args: {
-    handleFormatDataInDayMonthYearNotHours: () => new Date(),
-  },
-  parameters: {
-    notes: `
-# CardHours
-
-Este é um componente de Card de horas.
-Você usa assim:
-\`\`\`tsx
-<CardHours
-    hoursWorked={"10:20"}
-    handleFormatDataInDayMonthYearNotHours={(date: Date) => formatDate(date)}
-    text="Hours Worked"
-    width={"100%"}
-    backgroundColor={theme.colors.neutral[25]}
-    color={{
-        colorText: theme.colors.gray[700],
-        colorTextBold: theme.colors.orange[150],
-        colorTextData: theme.colors.gray[700],
-        }}
-    marginStyle={{
-        marginBottom: 10
-        }}
-    borderStyled={{
-        borderWidth: theme.borderWidths.thin,
-        borderRadius: theme.borderWidths.thick_medium,
-        borderStyle: "solid",
-        borderColor: theme.colors.blue[500],
-       }}
-    sizeHours={theme.fontSizes["3xl"]}
-    sizeDescription={theme.fontSizes.xs}
-  />
-\`\`\`
-`,
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const CardTrabalho: Story = {
-  name: "card-hours-work",
-  args: {
-    width: "100%",
-    text: "Total horas de trabalho:",
-    sizeHours: 34,
-    sizeDescription: 14,
-    hoursWorked: "18:32 H",
-    fontStyle: {
-      fontFamily: theme.fonts.inter_medium_500 as "inter_medium_500",
-      fontSize: theme.fontSizes["2xl"],
-    },
-    borderStyled: {
-      borderWidth: theme.borderWidths.thin,
-      borderRadius: theme.borderWidths.thick_medium,
-      borderStyle: "solid",
-      borderColor: theme.colors.gray[300],
-    },
-    color: {
-      colorText: theme.colors.gray[700],
-      colorTextBold: theme.colors.black[100],
-      colorTextData: theme.colors.gray[700],
-    },
-    handleFormatDataInDayMonthYearNotHours: () => formatDate(new Date()),
-  },
-};
-
-export const CardPendente: Story = {
-  name: "card-hours-pending",
-  args: {
-    text: "Total horas pendentes:",
-    width: "100%",
-    hoursWorked: "22:12 H",
-    fontStyle: {
-      fontFamily: theme.fonts.inter_bold_700 as "inter_bold_700",
-      fontSize: theme.fontSizes["2xl"],
-    },
-    borderStyled: {
-      borderWidth: theme.borderWidths.thin,
-      borderRadius: theme.borderWidths.thick_medium,
-      borderStyle: "solid",
-      borderColor: theme.colors.gray[300],
-    },
-    color: {
-      colorText: theme.colors.gray[700],
-      colorTextBold: theme.colors.orange[150],
-      colorTextData: theme.colors.gray[700],
-    },
-    handleFormatDataInDayMonthYearNotHours: () => formatDate(new Date()),
-  },
-};
+import type { StoryObj, Meta } from "@storybook/react";
+import { CardHours } from "../../components/card-hours";
+
+import { theme } from "../../styles/theme/theme";
+import { formatDate } from "../../utils/format-data";
+
+const meta: Meta<typeof CardHours> = {
+  title: "componente/CardHours",
+  component: CardHours,
+  args: {
+    handleFormatDataInDayMonthYearNotHours: () => new Date(),
+  },
+  parameters: {
+    notes: `
+# CardHours
+
+Este é um componente de Card de horas.
+Você usa assim:
+\`\`\`tsx
+<CardHours
+    hoursWorked={"10:20"}
+    handleFormatDataInDayMonthYearNotHours={(date: Date) => formatDate(date)}
+    text="Hours Worked"
+    width={"100%"}
+    backgroundColor={theme.colors.neutral[25]}
+    color={{
+        colorText: theme.colors.gray[700],
+        colorTextBold: theme.colors.orange[150],
+        colorTextData: theme.colors.gray[700],
+        }}
+    marginStyle={{
+        marginBottom: 10
+        }}
+    borderStyled={{
+        borderWidth: theme.borderWidths.thin,
+        borderRadius: theme.borderWidths.thick_medium,
+        borderStyle: "solid",
+        borderColor: theme.colors.blue[500],
+       }}
+    sizeHours={theme.fontSizes["3xl"]}
+    sizeDescription={theme.fontSizes.xs}
+  />
+\`\`\`
+`,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const CardTrabalho: Story = {
+  name: "card-hours-work",
+  args: {
+    width: "100%",
+    text: "Total horas de trabalho:",
+    sizeHours: 34,
+    sizeDescription: 14,
+    hoursWorked: "18:32 H",
+    fontStyle: {
+      fontFamily: theme.fonts.inter_medium_500 as "inter_medium_500",
+      fontSize: theme.fontSizes["2xl"],
+    },
+    borderStyled: {
+      borderWidth: theme.borderWidths.thin,
+      borderRadius: theme.borderWidths.thick_medium,
+      borderStyle: "solid",
+      borderColor: theme.colors.gray[300],
+    },
+    color: {
+      colorText: theme.colors.gray[700],
+      colorTextBold: theme.colors.black[100],
+      colorTextData: theme.colors.gray[700],
+    },
+    handleFormatDataInDayMonthYearNotHours: () => formatDate(new Date()),
+  },
+};
+
+export const CardPendente: Story = {
+  name: "card-hours-pending",
+  args: {
+    text: "Total horas pendentes:",
+    width: "100%",
+    hoursWorked: "22:12 H",
+    fontStyle: {
+      fontFamily: theme.fonts.inter_bold_700 as "inter_bold_700",
+      fontSize: theme.fontSizes["2xl"],
+    },
+    borderStyled: {
+      borderWidth: theme.borderWidths.thin,
+      borderRadius: theme.borderWidths.thick_medium,
+      borderStyle: "solid",
+      borderColor: theme.colors.gray[300],
+    },
+    color: {
+      colorText: theme.colors.gray[700],
+      colorTextBold: theme.colors.orange[150],
+      colorTextData: theme.colors.gray[700],
+    },
+    handleFormatDataInDayMonthYearNotHours: () => formatDate(new Date()),
+  },
+};

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

@@ -1,85 +1,85 @@
-import type { StoryObj, Meta } from "@storybook/react";
-
-import { CardLoading } from "../../components/card-loading";
-import { theme } from "../../styles/theme/theme";
-
-const meta: Meta<typeof CardLoading> = {
-  title: "componente/CardLoading",
-  component: CardLoading,
-  args: {
-    width: 120,
-    height: 90,
-    title: "Carregamento #01020304050607",
-    backgroundColor: theme.colors.blue[400],
-    handleNavigation: () => {},
-  },
-  parameters: {
-    notes: `
-# CardLoading
-
-Este é um componente de CardLoading.
-Você usa assim:
-\`\`\`tsx
- <CardLoading
-    width={"100%"}
-    title="Carregamento #01020304050607"
-    local="Doca 1, Patío 03 - Usiminas Ipatinga"
-    vehicle="EXP-0000"
-    prevision="12:37 10/03/2025"
-    kg={40}
-    qtdCoils={15}
-    status="Pendente"
-    handleNavigation={() => {}}
-/>
-\`\`\`
-`,
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const CardLoadingAprovado: Story = {
-  name: "card-carregamento-aprovado",
-  args: {
-    width: "100%",
-    title: "Carregamento #01020304050607",
-    local: "Doca 1, Patío 03 - Usiminas Ipatinga",
-    vehicle: "EXP-0000",
-    prevision: "12:37 10/03/2025",
-    kg: 40,
-    qtdCoils: 15,
-    status: "Concluido",
-    handleNavigation: () => {},
-  },
-};
-
-export const CardLoadingPendente: Story = {
-  name: "card-carregamento-pendente",
-  args: {
-    width: "100%",
-    title: "Carregamento #01020304050607",
-    local: "Doca 1, Patío 03 - Usiminas Ipatinga",
-    vehicle: "EXP-0000",
-    prevision: "12:37 10/03/2025",
-    kg: 40,
-    qtdCoils: 15,
-    status: "Pendente",
-    handleNavigation: () => {},
-  },
-};
-export const CardLoadingReprovado: Story = {
-  name: "card-carregamento-reprovado",
-  args: {
-    width: "100%",
-    title: "Carregamento #01020304050607",
-    local: "Doca 1, Patío 03 - Usiminas Ipatinga",
-    vehicle: "EXP-0000",
-    prevision: "12:37 10/03/2025",
-    kg: 40,
-    qtdCoils: 15,
-    status: "Cancelado",
-    handleNavigation: () => {},
-  },
-};
+import type { StoryObj, Meta } from "@storybook/react";
+
+import { CardLoading } from "../../components/card-loading";
+import { theme } from "../../styles/theme/theme";
+
+const meta: Meta<typeof CardLoading> = {
+  title: "componente/CardLoading",
+  component: CardLoading,
+  args: {
+    width: 120,
+    height: 90,
+    title: "Carregamento #01020304050607",
+    backgroundColor: theme.colors.blue[400],
+    handleNavigation: () => {},
+  },
+  parameters: {
+    notes: `
+# CardLoading
+
+Este é um componente de CardLoading.
+Você usa assim:
+\`\`\`tsx
+ <CardLoading
+    width={"100%"}
+    title="Carregamento #01020304050607"
+    local="Doca 1, Patío 03 - Usiminas Ipatinga"
+    vehicle="EXP-0000"
+    prevision="12:37 10/03/2025"
+    kg={40}
+    qtdCoils={15}
+    status="Pendente"
+    handleNavigation={() => {}}
+/>
+\`\`\`
+`,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const CardLoadingAprovado: Story = {
+  name: "card-carregamento-aprovado",
+  args: {
+    width: "100%",
+    title: "Carregamento #01020304050607",
+    local: "Doca 1, Patío 03 - Usiminas Ipatinga",
+    vehicle: "EXP-0000",
+    prevision: "12:37 10/03/2025",
+    kg: 40,
+    qtdCoils: 15,
+    status: "Concluido",
+    handleNavigation: () => {},
+  },
+};
+
+export const CardLoadingPendente: Story = {
+  name: "card-carregamento-pendente",
+  args: {
+    width: "100%",
+    title: "Carregamento #01020304050607",
+    local: "Doca 1, Patío 03 - Usiminas Ipatinga",
+    vehicle: "EXP-0000",
+    prevision: "12:37 10/03/2025",
+    kg: 40,
+    qtdCoils: 15,
+    status: "Pendente",
+    handleNavigation: () => {},
+  },
+};
+export const CardLoadingReprovado: Story = {
+  name: "card-carregamento-reprovado",
+  args: {
+    width: "100%",
+    title: "Carregamento #01020304050607",
+    local: "Doca 1, Patío 03 - Usiminas Ipatinga",
+    vehicle: "EXP-0000",
+    prevision: "12:37 10/03/2025",
+    kg: 40,
+    qtdCoils: 15,
+    status: "Cancelado",
+    handleNavigation: () => {},
+  },
+};