react-native-exp-fig 0.1.0

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

@@ -0,0 +1,143 @@
+/* eslint-disable no-undef */
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Button } from "../../components/button";
+import { theme } from "../../styles/theme/theme";
+
+const meta: Meta<typeof Button> = {
+  title: "Componente/Button",
+  component: Button,
+  args: {
+    onPress: () => {},
+  },
+  parameters: {
+    notes: `
+# Button
+
+Este é um componente de button.
+Você usa assim:
+\`\`\`tsx
+<Button text="Eu sou um button!"
+/>
+\`\`\`
+`,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {
+  name: "button-basic",
+  args: {
+    title: "Button",
+    backgroundColor: theme.colors.blue[500],
+    onPress: () => alert("Clicou!"),
+    width: "100%",
+    height: 45,
+    flexStyle: {
+      alignItems: "center",
+      justifyContent: "center",
+      textAlign: "center",
+    },
+    borderStyled: {
+      borderWidth: 1,
+      borderColor: theme.colors.blue[500],
+      borderRadius: theme.borderWidths.thick_medium,
+    },
+
+    buttonTextStyle: {
+      fontFamily: theme.fonts.inter_regular_400,
+      fontSize: theme.fontSizes.lg,
+      color: theme.colors.neutral[25],
+      fontWeight: "500",
+    },
+  },
+};
+
+export const ButtonConfirm: Story = {
+  name: "button-confirm",
+  args: {
+    testID: "button-confirmar-test-id",
+    title: "CONFIRMAR RELATÓRIO",
+    backgroundColor: theme.colors.blue[500],
+    onPress: () => alert("Clicou!"),
+    width: "100%",
+    height: 45,
+    flexStyle: {
+      alignItems: "center",
+      justifyContent: "center",
+      textAlign: "center",
+    },
+    borderStyled: {
+      borderWidth: 1,
+      borderColor: theme.colors.blue[500],
+      borderRadius: theme.borderWidths.thick_medium,
+    },
+    buttonTextStyle: {
+      fontFamily: theme.fonts.inter_medium_500,
+      fontSize: theme.fontSizes.lg,
+      color: theme.colors.neutral[25],
+      fontWeight: "500",
+    },
+  },
+};
+
+export const ButtonCancel: Story = {
+  name: "button-cancel",
+  args: {
+    testID: "button-confirmar-test-id",
+    title: "CANCELAR EDIÇÃO",
+    backgroundColor: theme.colors.red[900],
+    onPress: () => alert("Clicou!"),
+    width: "100%",
+    height: 45,
+    flexStyle: {
+      alignItems: "center",
+      justifyContent: "center",
+      textAlign: "center",
+    },
+    borderStyled: {
+      borderWidth: 1,
+      borderColor: theme.colors.red[900],
+      borderRadius: theme.borderWidths.thick_medium,
+    },
+    buttonTextStyle: {
+      fontFamily: theme.fonts.inter_bold_700,
+      fontSize: theme.fontSizes.lg,
+      color: theme.colors.neutral[25],
+      fontWeight: "500",
+    },
+  },
+};
+
+export const ButtonRectifyJourney: Story = {
+  name: "button-rectify-journey",
+
+  args: {
+    testID: "button-rectify-test-id",
+    title: "RETIFICAR JORNADA",
+    backgroundColor: theme.colors.orange[450],
+    onPress: () => alert("Clicou!"),
+    width: "100%",
+    height: 45,
+
+    flexStyle: {
+      alignItems: "center",
+      justifyContent: "center",
+      textAlign: "center",
+    },
+    borderStyled: {
+      borderWidth: 1,
+      borderColor: theme.colors.orange[450],
+      borderRadius: theme.borderWidths.thick_medium,
+    },
+    buttonTextStyle: {
+      fontFamily: theme.fonts.inter_medium_500,
+      fontSize: theme.fontSizes.lg,
+      color: theme.colors.neutral[25],
+      fontWeight: "700",
+    },
+  },
+};

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

@@ -0,0 +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",
+    },
+  },
+};

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

@@ -0,0 +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()),
+  },
+};

package/src/stories/card-scheduled-journey/card-scheduled-journey.stories.tsx

@@ -0,0 +1,101 @@
+import type { StoryObj, Meta } from "@storybook/react";
+import { CardScheduledJourney } from "../../components/card-scheduled-journey";
+
+import { theme } from "../../styles/theme/theme";
+
+const meta: Meta<typeof CardScheduledJourney> = {
+  title: "componente/CardScheduledJourney",
+  component: CardScheduledJourney,
+  args: {
+    width: "100%",
+    height: 58,
+    widthChildren: "100%",
+    icon: "STEERING_WHEEL",
+    title: "Tempo total de trabalho do dia",
+    duracao: "10:00 H",
+    backgroundColor: theme.colors.neutral[25],
+    borderRight: theme.colors.green[400],
+  },
+  parameters: {
+    notes: `
+# CardScheduledJourney
+
+Este é um componente de resumo de trabalho, abrangente para diversos apps.
+Você usa assim:
+\`\`\`tsx    
+<CardScheduledJourney
+
+/>
+\`\`\`
+`,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const CardWorkTime: Story = {
+  name: "Tempo Trabalho - Simples",
+  args: {
+    width: "100%",
+    widthChildren: "100%",
+    icon: "STEERING_WHEEL",
+    title: "Tempo total de trabalho do dia",
+    duracao: "10:00 H",
+    backgroundColor: theme.colors.neutral[25],
+    borderRight: theme.colors.green[400],
+  },
+};
+
+export const CardMealInterval: Story = {
+  name: "Intervalo Refeição - Refeição",
+  args: {
+    width: "100%",
+    height: 58,
+    // widthChildren: "100%",
+    icon: "CALL_BELL",
+    title: "Intervalo de refeição",
+    duracao: "01:00 H",
+    borderRight: theme.colors.orange[150],
+  },
+};
+
+export const CardNightBreak: Story = {
+  name: "Intervalo Noturno - Repouso",
+  args: {
+    width: "100%",
+    height: 58,
+    widthChildren: "100%",
+    icon: "MOON_STARS",
+    title: "Intervalo interjonada anterior",
+    duracao: "10:00 H",
+    borderRight: theme.colors.gray[700],
+  },
+};
+
+export const CardHoursExtra: Story = {
+  name: "Horas Extras - Extras",
+  args: {
+    width: "100%",
+    height: 58,
+    widthChildren: "100%",
+    icon: "STEERING_WHEEL_FILL",
+    title: "TOTAL",
+    duracao: "16:20 H",
+    borderRight: theme.colors.green[400],
+  },
+};
+
+export const CardRankingWeek: Story = {
+  name: "Raking Semanal - RANKING",
+  args: {
+    width: "100%",
+    height: 58,
+    widthChildren: "100%",
+    icon: "TROPHY",
+    title: "FATOR RANKING DA SEMANA",
+    duracao: "46:35 H",
+    borderRight: theme.colors.orange[150],
+  },
+};

package/src/stories/header-profile/header-profile.stories.tsx

@@ -0,0 +1,84 @@
+import type { StoryObj, Meta } from "@storybook/react";
+import { Header } from "../../components/header-profile";
+
+const meta: Meta<typeof Header> = {
+  title: "componente/Header",
+  component: Header,
+  args: {
+    testID: "header",
+    arrow: false,
+    title: "aqui",
+    handleNavigation: () => {},
+    permission: false,
+    bluetoothIsConnected: false,
+    isInternetReachable: true,
+  },
+  parameters: {
+    notes: `
+# Header
+
+Este é um componente de Card de horas.
+Você usa assim:
+\`\`\`tsx
+<Header
+   
+  />
+\`\`\`
+`,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const HeaderLogin: Story = {
+  name: "header-login",
+  args: {
+    testID: "header",
+    arrow: false,
+    title: "Login",
+    handleNavigation: () => {},
+    permission: false,
+    bluetoothIsConnected: false,
+    isInternetReachable: true,
+  },
+};
+export const HeaderArrow: Story = {
+  name: "header-arrow",
+  args: {
+    testID: "header",
+    arrow: true,
+    title: "SINCRONIZAR ATIVIDADES",
+    handleNavigation: () => {},
+    permission: false,
+    bluetoothIsConnected: false,
+    isInternetReachable: false,
+  },
+};
+
+export const HeaderList: Story = {
+  name: "header-list",
+  args: {
+    testID: "header",
+    arrow: true,
+    title: "Controle de Jornada",
+    handleNavigation: () => {},
+    permission: false,
+    bluetoothIsConnected: true,
+    isInternetReachable: true,
+  },
+};
+
+export const HeaderPermission: Story = {
+  name: "header-permission",
+  args: {
+    testID: "header",
+    arrow: true,
+    title: "Permission",
+    handleNavigation: () => {},
+    permission: true,
+    bluetoothIsConnected: true,
+    isInternetReachable: true,
+  },
+};