react-native-exp-fig 0.1.9 → 0.1.10

package/src/index.ts

@@ -1,37 +1,42 @@
-/**
- * EXPORTS
- */
-
-// Components
-export { Box } from "./components/box";
-export { Button } from "./components/button";
-export { StepIndicator } from "./components/step-indicator";
-export { Typography } from "./components/typography";
-export { Input } from "./components/input";
-export { CapturePhoto } from "./components/capture-photo";
-export { CardHours } from "./components/card-hours";
-export { SelectOption } from "./components/selects/select-option";
-export { Header } from "./components/header-profile";
-export { ScheduledJourneyIndicators } from "./components/scheduled-journey-indicators";
-export { CardScheduledJourney } from "./components/card-scheduled-journey";
-export { UserProfile } from "./components/user-profile";
-export { MenuItem } from "./components/menu-item";
-export { CardLoading } from "./components/card-loading";
-export { CardWorkSession } from "./components/card-work-session";
-export { LoadingProgress } from "./components/loading-progress";
-export { NoData } from "./components/no-data";
-export { FilterJourney } from "./components/filter-journey";
-export { Coil } from "./components/coil";
-export { FilterDateSelector } from "./components/filter-date-selector";
-export { CardHistory } from "./components/card-history";
-export { NotificationLoading } from "./components/notification-loading";
-export { CheckBox } from "./components/check-box";
-export { ImageCaptureWithRemove } from "./components/image-capture-with-remove";
-export { LoadingDetails } from "./components/loading-details";
-
-// Utilities
-export { multiply } from "./utils/mutiply";
-export { formatDate, getLastSevenDays } from "./utils/format-data";
-
-// Styles
-export { theme } from "./styles/theme/theme";
+/**
+ * EXPORTS
+ */
+
+// Components
+export { Box } from "./components/box";
+export { Button } from "./components/button";
+export { StepIndicator } from "./components/step-indicator";
+export { Typography } from "./components/typography";
+export { Input } from "./components/input";
+export { CapturePhoto } from "./components/capture-photo";
+export { CardHours } from "./components/card-hours";
+export { SelectOption } from "./components/selects/select-option";
+export { Header } from "./components/header-profile";
+export { ScheduledJourneyIndicators } from "./components/scheduled-journey-indicators";
+export { CardScheduledJourney } from "./components/card-scheduled-journey";
+export { UserProfile } from "./components/user-profile";
+export { MenuItem } from "./components/menu-item";
+export { CardLoading } from "./components/card-loading";
+export { CardWorkSession } from "./components/card-work-session";
+export { LoadingProgress } from "./components/loading-progress";
+export { NoData } from "./components/no-data";
+export { FilterJourney } from "./components/filter-journey";
+export { Coil } from "./components/coil";
+export { FilterDateSelector } from "./components/filter-date-selector";
+export { CardHistory } from "./components/card-history";
+export { NotificationLoading } from "./components/notification-loading";
+export { CheckBox } from "./components/check-box";
+export { ImageCaptureWithRemove } from "./components/image-capture-with-remove";
+export { LoadingDetails } from "./components/loading-details";
+export { AvatarProfile } from "./components/avatar-profile";
+export { HistoryDetails } from "./components/history-details";
+export { ActivitiesDaily } from "./components/activities-daily";
+export { ActivitiesProgress } from "./components/activities-progress";
+export { ProfileMenuOption } from "./components/profile-menu-option";
+
+// Utilities
+export { multiply } from "./utils/mutiply";
+export { formatDate, getLastSevenDays, formHoursMinute } from "./utils/format-data";
+
+// Styles
+export { theme } from "./styles/theme/theme";

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

@@ -0,0 +1,40 @@
+import type { StoryObj, Meta } from "@storybook/react";
+
+import { ActivitiesDaily } from "../../components/activities-daily";
+
+const meta: Meta<typeof ActivitiesDaily> = {
+  title: "componente/ActivitiesDaily",
+  component: ActivitiesDaily,
+  args: {
+    handleActivity: (typeActivity) => {
+      return typeActivity;
+    },
+  },
+  parameters: {
+    notes: `
+# ActivitiesDaily
+
+Este é um componente de Card de atividades diárias.
+Você usa assim:
+\`\`\`tsx
+<ActivitiesDaily
+handleActivity={handleActivity}
+  />
+\`\`\`
+`,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const ActivitiesDailySimples: Story = {
+  name: "activities-daily",
+  args: {
+    handleActivity: (typeActivity: any) => {
+      /* global alert */
+      alert(typeActivity);
+    },
+  },
+};

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

@@ -0,0 +1,61 @@
+import type { StoryObj, Meta } from "@storybook/react";
+
+import { ActivitiesProgress } from "../../components/activities-progress";
+
+const meta: Meta<typeof ActivitiesProgress> = {
+  title: "componente/ActivitiesProgress",
+  component: ActivitiesProgress,
+  args: {
+    data_fim: "11/05/2025",
+    duracao: "00:30",
+    data_inicio: "17:20",
+    titleLabel: "Descanso",
+  },
+  parameters: {
+    notes: `
+# ActivitiesProgress
+
+Este é um componente de progresso de atividades.
+Você usa assim:
+\`\`\`tsx
+<ActivitiesProgress
+  data_fim="11/05/2025"
+  duracao="00:30"
+  data_inicio="17:20"
+  titleLabel="Descanso"
+/>
+\`\`\`
+`,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const ActivitiesProgressPadrao: Story = {
+  name: "activities-progress-padrao",
+  args: {},
+};
+
+export const ActivitiesProgressTrabalho: Story = {
+  name: "activities-progress-trabalho",
+  args: {
+    data_fim: "15/06/2023",
+    duracao: "01:45",
+    data_inicio: "14:30",
+    titleLabel: "Trabalho",
+    situation: true,
+  },
+};
+
+export const ActivitiesProgressDescanso: Story = {
+  name: "activities-progress-descanso",
+  args: {
+    data_fim: "20/07/2023",
+    duracao: "00:15",
+    data_inicio: "12:00",
+    titleLabel: "Descanso",
+    situation: true,
+  },
+};

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

@@ -0,0 +1,32 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { AvatarProfile } from "../../components/avatar-profile";
+
+const meta: Meta<typeof AvatarProfile> = {
+  title: "Componente/AvatarProfile",
+  component: AvatarProfile,
+  args: {
+    name: "Everton",
+    avatar: "https://randomuser.me/api/portraits/men/1.jpg",
+    email: "teste@gmail.com",
+    isEdit: false,
+    handleTakePicker: () => {},
+  },
+  parameters: {
+    notes: ` AvatarProfile Componente de avatar de perfil com edição opcional.`,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  name: "default",
+};
+
+export const Editable: Story = {
+  name: "editable",
+  args: {
+    isEdit: true,
+  },
+};

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

@@ -50,7 +50,7 @@ export const CardLoadingAprovado: Story = {
     prevision: "12:37 10/03/2025",
     kg: 40,
     qtdCoils: 15,
-    status: "Aprovado",
+    status: "Concluido",
     handleNavigation: () => {},
   },
 };
@@ -79,7 +79,7 @@ export const CardLoadingReprovado: Story = {
     prevision: "12:37 10/03/2025",
     kg: 40,
     qtdCoils: 15,
-    status: "Reprovado",
+    status: "Cancelado",
     handleNavigation: () => {},
   },
 };

package/src/stories/check-box/check-box.stories.tsx

@@ -1,83 +1,81 @@
-import React from "react";
-import type { StoryObj, Meta } from "@storybook/react";
-
-import { CheckBox } from "../../components/check-box";
-import { theme } from "../../styles/theme/theme";
-
-const meta: Meta<typeof CheckBox> = {
-  title: "componente/CheckBox",
-  component: CheckBox as React.FC,
-  args: {
-    onPress: () => {},
-    isChecked: false,
-    backgroundColorCheck: theme.colors.blue[375],
-  },
-  parameters: {
-    notes: `
-# CheckBox
-
-Componente de caixa de seleção customizável com ou sem texto.
-
-Exemplo de uso:
-
-\`\`\`tsx
-<CheckBox
-  isChecked={false}
-  widthBoxCheckIcon={30}
-  heightWrapperTextLabel={40}
-  backgroundColorCheck={theme.colors.blue[400]}
-  textSizeLabel={16}
-  textLabel="Eu concordo com a Política de privacidade da ExpFig e dou consentimento para a coleta, e processamento e uso dos meus dados pessoais."
-  colorTextLabel={theme.colors.gray[600]}
-  backgroundBoxCheckIcon={"transparent"}
-/>
-\`\`\`
-`,
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const CheckBoxDisable: Story = {
-  name: "checkbox-desmarcado",
-  args: {
-    isChecked: false,
-  },
-};
-
-export const CheckBoxAble: Story = {
-  name: "checkbox-marcado",
-  args: {
-    widthBoxCheckIcon: 40,
-    isChecked: true,
-    backgroundColorCheck: theme.colors.blue[50],
-  },
-};
-
-export const CheckBoxDisableWithLabel: Story = {
-  name: "checkbox-desmarcado-com-label",
-  args: {
-    widthBoxCheckIcon: 30,
-    backgroundBoxCheckIcon: "transparent",
-    heightWrapperTextLabel: 40,
-    textLabel:
-      "Eu concordo com a Política de privacidade da ExpFig e dou consentimento para a coleta, e processamento e uso dos meus dados pessoais.",
-    textSizeLabel: 17,
-    colorTextLabel: theme.colors.neutral[25],
-    isChecked: false,
-    backgroundColorCheck: theme.colors.blue[375],
-  },
-};
-
-export const CheckBoxAbleWithLabel: Story = {
-  name: "checkbox-marcado-com-label",
-  args: {
-    textLabel: "Label Checked",
-    textSizeLabel: 17,
-    colorTextLabel: theme.colors.neutral[25],
-    isChecked: true,
-    backgroundColorCheck: theme.colors.blue[375],
-  },
-};
+import React from "react";
+import type { StoryObj, Meta } from "@storybook/react";
+
+import { CheckBox } from "../../components/check-box";
+import { theme } from "../../styles/theme/theme";
+
+const meta: Meta<typeof CheckBox> = {
+  title: "componente/CheckBox",
+  component: CheckBox as React.FC,
+  args: {
+    onPress: () => {},
+    isChecked: false,
+    backgroundColorCheck: theme.colors.blue[375],
+  },
+  parameters: {
+    notes: `
+# CheckBox
+
+Componente de caixa de seleção customizável com ou sem texto.
+
+Exemplo de uso:
+
+\`\`\`tsx
+<CheckBox
+  isChecked={false}
+  widthBoxCheckIcon={30}
+  backgroundColorCheck={theme.colors.blue[400]}
+  textSizeLabel={16}
+  textLabel="Eu concordo com a Política de privacidade da ExpFig e dou consentimento para a coleta, e processamento e uso dos meus dados pessoais."
+  colorTextLabel={theme.colors.gray[600]}
+  backgroundBoxCheckIcon={"transparent"}
+/>
+\`\`\`
+`,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const CheckBoxDisable: Story = {
+  name: "checkbox-desmarcado",
+  args: {
+    isChecked: false,
+  },
+};
+
+export const CheckBoxAble: Story = {
+  name: "checkbox-marcado",
+  args: {
+    widthBoxCheckIcon: 40,
+    isChecked: true,
+    backgroundColorCheck: theme.colors.blue[50],
+  },
+};
+
+export const CheckBoxDisableWithLabel: Story = {
+  name: "checkbox-desmarcado-com-label",
+  args: {
+    widthBoxCheckIcon: 30,
+    backgroundBoxCheckIcon: "transparent",
+    textLabel:
+      "Eu concordo com a Política de privacidade da ExpFig e dou consentimento para a coleta, e processamento e uso dos meus dados pessoais.",
+    textSizeLabel: 17,
+    colorTextLabel: theme.colors.neutral[25],
+    isChecked: false,
+    backgroundColorCheck: theme.colors.blue[375],
+  },
+};
+
+export const CheckBoxAbleWithLabel: Story = {
+  name: "checkbox-marcado-com-label",
+  args: {
+    textLabel: "Label Checked",
+    textSizeLabel: 17,
+    colorTextLabel: theme.colors.neutral[25],
+    isChecked: true,
+    backgroundColorCheck: theme.colors.blue[375],
+  },
+};

package/src/stories/coil/coil.stories.tsx

@@ -10,6 +10,7 @@ const meta: Meta<typeof Coil> = {
     title: "HUTY-9754",
     description: "04 de 02 fotos pendentes",
     handleNavigation: () => {},
+    status: "Cancelado",
   },
   parameters: {
     notes: `
@@ -39,7 +40,7 @@ export const CoilPending: Story = {
     title: "HUTY-9754",
     description: "04 de 02 fotos pendentes",
     handleNavigation: () => {},
-    status: "pending",
+    status: "Pendente",
   },
 };
 
@@ -49,7 +50,7 @@ export const CoilApproved: Story = {
     title: "HUTY-9754",
     description: "04 de 02 fotos pendentes",
     handleNavigation: () => {},
-    status: "approved",
+    status: "Concluido",
   },
 };
 
@@ -59,7 +60,17 @@ export const CoilRecused: Story = {
     title: "HUTY-9754",
     description: "04 de 02 fotos pendentes",
     handleNavigation: () => {},
-    status: "recused",
+    status: "Cancelado",
+  },
+};
+
+export const CoilAndamento: Story = {
+  name: "coil-andamento",
+  args: {
+    title: "HUTY-9754",
+    description: "background color diferente",
+    handleNavigation: () => {},
+    status: "Andamento",
   },
 };
 
@@ -70,6 +81,18 @@ export const CoilNoStatus: Story = {
     description: "background color diferente",
     handleNavigation: () => {},
     backgroundColor: "green",
+    status: "Andamento",
     disabled: true,
   },
 };
+
+export const CoilOff: Story = {
+  name: "coil-off",
+  args: {
+    title: "HUTY-9823",
+    description: "background color diferente",
+    handleNavigation: () => {},
+    status: "Pendente",
+    backgroundColorIcon: "#fff",
+  },
+};

package/src/stories/filter-date-selector/filter-date-selector.stories.tsx

@@ -1,93 +1,122 @@
-import React from "react";
-import type { StoryObj, Meta } from "@storybook/react";
-import { FilterDateSelector } from "../../components/filter-date-selector";
-import { getLastSevenDays } from "../../utils/format-data";
-import { ISelectedDay } from "../../components/filter-date-selector/interface";
-
-const meta: Meta<typeof FilterDateSelector> = {
-  title: "componente/FilterDateSelector",
-  component: FilterDateSelector as React.FC,
-  args: {
-    selectedDay: {
-      date: "",
-      dayName: "",
-      fullDate: new Date(""),
-    },
-    handleSelectedDay: (date: ISelectedDay) => {
-      return date;
-    },
-    days: [],
-  },
-  parameters: {
-    notes: `
-# FilterDateSelector
-
-Este é um componente de filtro do dias  .
-Você usa assim:
-\`\`\`tsx
-  <FilterDateSelector
-    selectedDay={selectedDay as any}
-    handleSelectedDay={setSelectedDay as any}
-    days={days as []}
-    isLoading={false}
-/>
-\`\`\`
-`,
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const FilterDateSelectorSimples: Story = {
-  name: "filter-journey",
-  render: () => {
-    const [isLoading, setIsLoading] = React.useState(false);
-    const [selectedDay, setSelectedDay] = React.useState<ISelectedDay>({
-      date: "",
-      dayName: "",
-      fullDate: new Date(""),
-    });
-    const days = getLastSevenDays();
-
-    React.useEffect(() => {
-      const today = new Date();
-
-      setSelectedDay(
-        days.find(
-          (day) => day.date === today.getDate() && day.fullDate.getMonth() === today.getMonth()
-        ) as any
-      );
-    }, []);
-
-    const handleSelectedDay = (day: ISelectedDay) => {
-      setSelectedDay(day);
-      setIsLoading(true);
-
-      /* global setTimeout */
-      setTimeout(() => {
-        setIsLoading(false);
-      }, 1000);
-    };
-    return (
-      <FilterDateSelector
-        selectedDay={selectedDay as any}
-        handleSelectedDay={handleSelectedDay as any}
-        days={days as []}
-        isLoading={isLoading}
-      />
-    );
-  },
-  args: {
-    selectedDay: {
-      date: "",
-      dayName: "",
-      fullDate: new Date(""),
-    },
-    handleSelectedDay: (date: ISelectedDay) => {
-      return date;
-    },
-    days: [],
-  },
-};
+import React from "react";
+import type { StoryObj, Meta } from "@storybook/react";
+import { FilterDateSelector } from "../../components/filter-date-selector";
+import { getLastSevenDays } from "../../utils/format-data";
+import { ISelectedDay } from "../../components/filter-date-selector/interface";
+
+const meta: Meta<typeof FilterDateSelector> = {
+  title: "componente/FilterDateSelector",
+  component: FilterDateSelector as React.FC,
+  args: {
+    selectedDay: {
+      date: "",
+      dayName: "",
+      fullDate: new Date(""),
+    },
+    handleSelectedDay: (date: ISelectedDay) => {
+      return date;
+    },
+    days: [],
+  },
+  parameters: {
+    notes: `
+# FilterDateSelector
+
+Este é um componente de filtro do dias  .
+Você usa assim:
+\`\`\`tsx
+  <FilterDateSelector
+    selectedDay={selectedDay as any}
+    handleSelectedDay={setSelectedDay as any}
+    days={days as []}
+    isLoading={false}
+/>
+\`\`\`
+`,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const FilterDateSelectorSimples: Story = {
+  name: "filter-journey",
+  render: () => {
+    const [isLoading, setIsLoading] = React.useState(false);
+    const [selectedDay, setSelectedDay] = React.useState<ISelectedDay>({
+      date: "",
+      dayName: "",
+      fullDate: new Date(""),
+    });
+    const days = getLastSevenDays();
+
+    React.useEffect(() => {
+      const today = new Date();
+
+      setSelectedDay(
+        days.find(
+          (day) => day.date === today.getDate() && day.fullDate.getMonth() === today.getMonth()
+        ) as any
+      );
+    }, []);
+
+    const handleSelectedDay = (day: ISelectedDay) => {
+      setSelectedDay(day);
+      setIsLoading(true);
+
+      /* global setTimeout */
+      setTimeout(() => {
+        setIsLoading(false);
+      }, 1000);
+    };
+    return (
+      <FilterDateSelector
+        selectedDay={selectedDay as any}
+        handleSelectedDay={handleSelectedDay as any}
+        days={days as []}
+        isLoading={isLoading}
+      />
+    );
+  },
+  args: {
+    selectedDay: {
+      date: "",
+      dayName: "",
+      fullDate: new Date(""),
+    },
+    handleSelectedDay: (date: ISelectedDay) => {
+      return date;
+    },
+    days: [],
+  },
+};
+
+export const FilterDateSelectorTodos: Story = {
+  name: "filter-journey-todos",
+  render: () => {
+    const [isLoading, setIsLoading] = React.useState(false);
+
+    const days = getLastSevenDays() as ISelectedDay[];
+
+    const [selectedDay, setSelectedDay] = React.useState<any>(days[0]);
+
+    // Função para lidar com a seleção de um dia
+    const handleSelectedDay = (day: ISelectedDay) => {
+      setSelectedDay(day);
+      setIsLoading(true);
+      // Simula um carregamento de 1 segundo
+      setTimeout(() => setIsLoading(false), 1000);
+    };
+
+    return (
+      <FilterDateSelector
+        selectedDay={selectedDay}
+        handleSelectedDay={handleSelectedDay as any}
+        days={days}
+        isLoading={isLoading}
+      />
+    );
+  },
+  args: {}, // <- NÃO defina selectedDay/days aqui
+};