jornada-ui 0.2.4

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

@@ -0,0 +1,174 @@
+import type React from "react";
+import type { StoryObj, Meta } from "@storybook/react";
+
+// components
+import CapturePhoto from "../../components/capture-photo";
+
+// styles
+import { theme } from "../../styles/theme/theme";
+
+const meta: Meta<typeof CapturePhoto> = {
+  title: "componente/ CapturePhoto",
+  component: CapturePhoto as React.FC,
+  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: () => console.log("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: () => console.log("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: () => console.log("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: () => console.log("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,108 @@
+import type React from "react";
+import type { StoryObj, Meta } from "@storybook/react";
+
+// components
+import CardHours from "../../components/card-hours";
+
+// utils
+import { formatDate } from "../../utils/format-date";
+
+// styles
+import { theme } from "../../styles/theme/theme";
+
+const meta: Meta<typeof CardHours> = {
+  title: "componente/CardHours",
+  component: CardHours as React.FC,
+  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,105 @@
+import type React from "react";
+import type { StoryObj, Meta } from "@storybook/react";
+
+// components
+import CardScheduledJourney from "../../components/card-scheduled-journey";
+
+// styles
+import { theme } from "../../styles/theme/theme";
+
+const meta: Meta<typeof CardScheduledJourney> = {
+  title: "componente/CardScheduledJourney",
+  component: CardScheduledJourney as React.FC,
+  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/card-work-session/card-work-session.stories.tsx

@@ -0,0 +1,53 @@
+import type { StoryObj, Meta } from "@storybook/react";
+
+// components
+import CardWorkSession from "../../components/card-work-session";
+import { theme } from "../../styles/theme/theme";
+
+const meta: Meta<typeof CardWorkSession> = {
+  title: "componente/CardWorkSession",
+  component: CardWorkSession,
+  args: {
+    name: "Weverson L.S",
+    workDate: "25/01/2025",
+    timeWork: "",
+    initialTime: "11:40",
+    duration: "05:20",
+    avatar: "https://avatars.githubusercontent.com/u/100369327?v=4&size=64",
+  },
+  parameters: {
+    notes: `
+# CardWorkSession
+
+Este é um componente de CardWorkSession de session de trabalho.
+Você usa assim:
+\`\`\`tsx
+<CardWorkSession
+  name="Weverson L.S"s
+  workDate="25/01/2025"
+  initialTime="11:40"
+  duration="03:45"
+  avatar={"https://avatars.githubusercontent.com/u/100369327?v=4&size=64"}
+  />
+\`\`\`
+`,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const CardTrabalhoSession: Story = {
+  name: "card-work-session",
+  args: {
+    width: 400,
+    name: "Weverson L.S",
+    workDate: "25/01/2025",
+    timeWork: "",
+    initialTime: "11:40",
+    duration: "05:20",
+    avatar: "https://avatars.githubusercontent.com/u/100369327?v=4&size=64",
+    backgroundColor: theme.colors.gray[300],
+  },
+};

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

@@ -0,0 +1,105 @@
+import type React from "react";
+import type { StoryObj, Meta } from "@storybook/react";
+
+// components
+import HeaderNavigation from "../../components/header-profile";
+
+const meta: Meta<typeof HeaderNavigation> = {
+  title: "componente/HeaderNavigation",
+  component: HeaderNavigation as React.FC,
+  args: {
+    testID: "header",
+    arrow: false,
+    title: "aqui",
+    handleNavigation: () => {},
+    permission: false,
+    bluetoothIsConnected: false,
+    isInternetReachable: true,
+  },
+  parameters: {
+    notes: `
+# HeaderNavigation
+
+Este é um componente de HeaderNavigation de horas.
+Você usa assim:
+\`\`\`tsx
+<HeaderNavigation
+    title={"Login"}
+    permission={false}
+    isInternetReachable={true}
+    bluetoothIsConnected={false}
+    handleNavigation={() => {}}
+    arrow={false}
+/>
+\`\`\`
+`,
+  },
+};
+
+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 HeaderWithWifiAndBluetooh: Story = {
+  name: "header-wifi-bluetooh",
+  args: {
+    testID: "header-wifi-bluetooh",
+    arrow: true,
+    title: "Header com wifi e bluetooh",
+    handleNavigation: () => {},
+    permission: true,
+    bluetoothIsConnected: true,
+    isInternetReachable: true,
+  },
+};
+
+export const HeaderWithWifi: Story = {
+  name: "header-com-wifi",
+  args: {
+    testID: "header-with-wifi",
+    arrow: true,
+    title: "Header com wifi",
+    handleNavigation: () => {},
+    permission: false,
+    bluetoothIsConnected: false,
+    isInternetReachable: true,
+  },
+};

package/src/stories/select-option/select-option.stories.tsx

@@ -0,0 +1,50 @@
+import type React from "react";
+import type { StoryObj, Meta } from "@storybook/react";
+
+// components
+import SelectOption from "../../components/selects/select-option";
+
+// styles
+import { theme } from "../../styles/theme/theme";
+
+const meta: Meta<typeof SelectOption> = {
+  title: "componente/SelectOption",
+  component: SelectOption as React.FC,
+  args: { dataOption: [] },
+  parameters: {
+    notes: `
+# SelectOption
+
+Este é um componente de select.
+Você usa assim:
+\`\`\`tsx
+<SelectOption
+    titleLabel="Selecione um motivo"
+    sizeTitleLabel={18}
+    dataOption={options}
+    handleSelectDown={() => {}}
+/>
+\`\`\`
+`,
+  },
+};
+
+const options = [
+  { label: "Local com infraestrutura ruim", value: "option1" },
+  { label: "Pretendo fazer o repouso em casa ou outro local", value: "option2" },
+  { label: "Outro motivo", value: "option3" },
+];
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const SelectRefuseRest: Story = {
+  name: "select-refuse-rest-week",
+  args: {
+    dataOption: options,
+    handleSelectDown: () => {},
+    titleLabel: "Selecione uma opção",
+    colortitleLabel: theme.colors.neutral[25],
+  },
+};

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

@@ -0,0 +1,117 @@
+import type React from "react";
+import type { 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 as React.FC,
+  args: {
+    data: [],
+    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,
+    titleLabel: "Repouso Noturno",
+    data_inicio: "07/03/2024 14:52",
+    data_fim: "07/03/2024 17:52",
+    description: "01:00",
+  },
+  {
+    id: 2,
+    titleLabel: "Descarga",
+    data_inicio: "06/03/2024 14:52",
+    data_fim: "06/03/2024 16:52",
+    description: "02:00",
+  },
+];
+
+const dataMockCustom = [
+  {
+    id: 1,
+    titleLabel: "Pedido Realizado",
+    data_inicio: "",
+    data_fim: "",
+    description: "",
+  },
+  {
+    id: 2,
+    titleLabel: "Pagamento Aprovado",
+    data_inicio: "07/03/2024 14:52",
+    data_fim: "07/03/2024 17:52",
+    description: "01:00",
+  },
+  {
+    id: 3,
+    titleLabel: "Pedido Faturado",
+    data_inicio: "",
+    data_fim: "",
+    description: "",
+  },
+  {
+    id: 4,
+    titleLabel: "Pedido Enviado",
+    data_inicio: "",
+    data_fim: "",
+    description: "",
+  },
+  {
+    id: 4,
+    titleLabel: "Pedido Entregue",
+    data_inicio: "07/03/2024 14:52",
+    data_fim: "07/03/2024 17:52",
+    description: "01:00",
+  },
+];
+
+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],
+  },
+};