react-native-exp-fig 0.1.1 → 0.1.3

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

@@ -1,170 +1,170 @@
-import type { StoryObj, Meta } from "@storybook/react";
-import { CapturePhoto } from "../../components/capture-photo";
-
-import { theme } from "../../styles/theme/theme";
-
-const meta: Meta<typeof CapturePhoto> = {
-  title: "componente/ CapturePhoto",
-  component: CapturePhoto,
-  args: {
-    takePhotoWithImagePicker: () => {},
-    imageComprovante: null,
-    onPress: () => {},
-  },
-  parameters: {
-    notes: `
-    # CapturePhoto
-
-    Este é um componente de Captura de Foto.
-    Você usa assim:
-    \`\`\`tsx
- <CapturePhoto
-    takePhotoWithImagePicker={() => takePhotoWithImagePicker}
-    imageComprovante={null}
-    flexStyle={{
-        textAlign: "center",
-        justifyContent: "center",
-        flexDirection: "column",
-        alignItems: "center",
-    }}
-    color={{ colorSvg: "#050022", colorText: "gray" }}
-    borderStyled={{
-       borderWidth: 2,
-       borderRadius: 8,
-       borderStyle: "dashed",
-       borderColor: "#050022",
-     }}
-    title={{
-      text: "Sem foto capturada...",
-      textSmallPhoto: "",
-    }}
-   smallText={false}
-  />
-    \`\`\`
-    `,
-  },
-};
-
-export default meta;
-
-type story = StoryObj<typeof CapturePhoto>;
-
-/* eslint-disable no-undef */
-export const CaptureSimple: story = {
-  name: "capture-simple",
-  args: {
-    takePhotoWithImagePicker: () => alert("capturar foto..."),
-    testID: "capture-simple",
-    opacity: 0.7,
-    marginStyle: {
-      marginBottom: 24,
-    },
-
-    width: "100%",
-    height: 168,
-    borderStyled: {
-      borderWidth: 2,
-      borderColor: theme.colors.blue[500],
-      borderRadius: theme.borderWidths.thick_medium,
-      borderStyle: "dashed",
-    },
-    flexStyle: {
-      textAlign: "center",
-      justifyContent: "center",
-      flexDirection: "column",
-      alignItems: "center",
-    },
-    color: {
-      colorSvg: theme.colors.gray[875],
-      colorText: theme.colors.green[200],
-    },
-    fontStyle: {
-      fontSize: 16,
-      fontWeight: "500",
-      fontFamily: "inter_medium_500",
-      lineHeight: 24,
-      letterSpacing: "regular",
-    },
-    title: {
-      text: "Sem foto capturada...",
-    },
-    smallText: false,
-  },
-};
-export const CaptureSmallPhoto: story = {
-  name: "capture-small-photo",
-  args: {
-    takePhotoWithImagePicker: () => alert("capturar foto da manutenção..."),
-    testID: "capture-small",
-    opacity: 0.7,
-    marginStyle: {
-      marginBottom: 24,
-    },
-    paddingStyle: { paddingTop: 8, paddingBottom: 8 },
-    width: 126,
-    borderStyled: {
-      borderWidth: 2,
-      borderColor: theme.colors.blue[500],
-      borderRadius: theme.borderWidths.thick_medium,
-      borderStyle: "solid",
-    },
-    flexStyle: {
-      textAlign: "center",
-      justifyContent: "center",
-      flexDirection: "column",
-      alignItems: "center",
-    },
-    color: {
-      colorSvg: theme.colors.gray[875],
-      colorText: theme.colors.green[200],
-    },
-    fontStyle: {
-      fontSize: 16,
-      fontWeight: "500",
-      fontFamily: "inter_medium_500",
-      lineHeight: 24,
-      letterSpacing: "regular",
-    },
-    title: {
-      text: "foto 1 ",
-      textSmallPhoto: "frente do caminhão",
-    },
-    smallText: true,
-  },
-};
-export const CaptureSimplePhoto: story = {
-  name: "capture-simples-photo",
-  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"),
-    testID: "capture-photo",
-
-    width: 300,
-    height: 168,
-    borderStyled: {
-      borderWidth: theme.borderWidths.thin,
-      borderColor: theme.colors.blue[500],
-      borderRadius: theme.borderWidths.thick_medium,
-      borderStyle: "solid",
-    },
-  },
-};
-export const CaptureSmallWithPhoto: story = {
-  name: "capture-small-with-photo",
-  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"),
-    testID: "capture-small-photo",
-
-    width: 123,
-    height: 120,
-    borderStyled: {
-      borderWidth: 2,
-      borderColor: theme.colors.blue[500],
-      borderRadius: theme.borderWidths.thick_medium,
-      borderStyle: "dashed",
-    },
-  },
-};
+import type { StoryObj, Meta } from "@storybook/react";
+import { CapturePhoto } from "../../components/capture-photo";
+
+import { theme } from "../../styles/theme/theme";
+
+const meta: Meta<typeof CapturePhoto> = {
+  title: "componente/ CapturePhoto",
+  component: CapturePhoto,
+  args: {
+    takePhotoWithImagePicker: () => {},
+    imageComprovante: null,
+    onPress: () => {},
+  },
+  parameters: {
+    notes: `
+    # CapturePhoto
+
+    Este é um componente de Captura de Foto.
+    Você usa assim:
+    \`\`\`tsx
+ <CapturePhoto
+    takePhotoWithImagePicker={() => takePhotoWithImagePicker}
+    imageComprovante={null}
+    flexStyle={{
+        textAlign: "center",
+        justifyContent: "center",
+        flexDirection: "column",
+        alignItems: "center",
+    }}
+    color={{ colorSvg: "#050022", colorText: "gray" }}
+    borderStyled={{
+       borderWidth: 2,
+       borderRadius: 8,
+       borderStyle: "dashed",
+       borderColor: "#050022",
+     }}
+    title={{
+      text: "Sem foto capturada...",
+      textSmallPhoto: "",
+    }}
+   smallText={false}
+  />
+    \`\`\`
+    `,
+  },
+};
+
+export default meta;
+
+type story = StoryObj<typeof CapturePhoto>;
+
+/* eslint-disable no-undef */
+export const CaptureSimple: story = {
+  name: "capture-simple",
+  args: {
+    takePhotoWithImagePicker: () => alert("capturar foto..."),
+    testID: "capture-simple",
+    opacity: 0.7,
+    marginStyle: {
+      marginBottom: 24,
+    },
+
+    width: "100%",
+    height: 168,
+    borderStyled: {
+      borderWidth: 2,
+      borderColor: theme.colors.blue[500],
+      borderRadius: theme.borderWidths.thick_medium,
+      borderStyle: "dashed",
+    },
+    flexStyle: {
+      textAlign: "center",
+      justifyContent: "center",
+      flexDirection: "column",
+      alignItems: "center",
+    },
+    color: {
+      colorSvg: theme.colors.gray[875],
+      colorText: theme.colors.green[200],
+    },
+    fontStyle: {
+      fontSize: 16,
+      fontWeight: "500",
+      fontFamily: "inter_medium_500",
+      lineHeight: 24,
+      letterSpacing: "regular",
+    },
+    title: {
+      text: "Sem foto capturada...",
+    },
+    smallText: false,
+  },
+};
+export const CaptureSmallPhoto: story = {
+  name: "capture-small-photo",
+  args: {
+    takePhotoWithImagePicker: () => alert("capturar foto da manutenção..."),
+    testID: "capture-small",
+    opacity: 0.7,
+    marginStyle: {
+      marginBottom: 24,
+    },
+    paddingStyle: { paddingTop: 8, paddingBottom: 8 },
+    width: 126,
+    borderStyled: {
+      borderWidth: 2,
+      borderColor: theme.colors.blue[500],
+      borderRadius: theme.borderWidths.thick_medium,
+      borderStyle: "solid",
+    },
+    flexStyle: {
+      textAlign: "center",
+      justifyContent: "center",
+      flexDirection: "column",
+      alignItems: "center",
+    },
+    color: {
+      colorSvg: theme.colors.gray[875],
+      colorText: theme.colors.green[200],
+    },
+    fontStyle: {
+      fontSize: 16,
+      fontWeight: "500",
+      fontFamily: "inter_medium_500",
+      lineHeight: 24,
+      letterSpacing: "regular",
+    },
+    title: {
+      text: "foto 1 ",
+      textSmallPhoto: "frente do caminhão",
+    },
+    smallText: true,
+  },
+};
+export const CaptureSimplePhoto: story = {
+  name: "capture-simples-photo",
+  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"),
+    testID: "capture-photo",
+
+    width: 300,
+    height: 168,
+    borderStyled: {
+      borderWidth: theme.borderWidths.thin,
+      borderColor: theme.colors.blue[500],
+      borderRadius: theme.borderWidths.thick_medium,
+      borderStyle: "solid",
+    },
+  },
+};
+export const CaptureSmallWithPhoto: story = {
+  name: "capture-small-with-photo",
+  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"),
+    testID: "capture-small-photo",
+
+    width: 123,
+    height: 120,
+    borderStyled: {
+      borderWidth: 2,
+      borderColor: theme.colors.blue[500],
+      borderRadius: theme.borderWidths.thick_medium,
+      borderStyle: "dashed",
+    },
+  },
+};

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

@@ -0,0 +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: "Aprovado",
+    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: "Reprovado",
+    handleNavigation: () => {},
+  },
+};