react-native-exp-fig 0.1.8 → 0.1.10

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
+};

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

@@ -1,103 +1,103 @@
-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,
-    isBluetooth: false,
-  },
-};
-export const HeaderArrow: Story = {
-  name: "header-arrow",
-  args: {
-    testID: "header",
-    arrow: true,
-    title: "SINCRONIZAR ATIVIDADES",
-    handleNavigation: () => {},
-    permission: false,
-    bluetoothIsConnected: false,
-    isInternetReachable: false,
-    isBluetooth: true,
-  },
-};
-
-export const HeaderList: Story = {
-  name: "header-list",
-  args: {
-    testID: "header",
-    arrow: true,
-    title: "Controle de Jornada",
-    handleNavigation: () => {},
-    permission: false,
-    bluetoothIsConnected: true,
-    isInternetReachable: true,
-    isBluetooth: true,
-  },
-};
-
-export const HeaderPermission: Story = {
-  name: "header-permission",
-  args: {
-    testID: "header",
-    arrow: true,
-    title: "Permission",
-    handleNavigation: () => {},
-    permission: true,
-    bluetoothIsConnected: true,
-    isInternetReachable: true,
-    isBluetooth: false,
-  },
-};
-
-export const HeaderBackground: Story = {
-  name: "header-background",
-  args: {
-    testID: "header",
-    arrow: true,
-    title: "texto grande e background diferente",
-    handleNavigation: () => {},
-    permission: false,
-    bluetoothIsConnected: true,
-    isInternetReachable: true,
-    isBluetooth: false,
-    color: { colorText: "white" },
-  },
-};
+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,
+    isBluetooth: false,
+  },
+};
+export const HeaderArrow: Story = {
+  name: "header-arrow",
+  args: {
+    testID: "header",
+    arrow: true,
+    title: "SINCRONIZAR ATIVIDADES",
+    handleNavigation: () => {},
+    permission: false,
+    bluetoothIsConnected: false,
+    isInternetReachable: false,
+    isBluetooth: true,
+  },
+};
+
+export const HeaderList: Story = {
+  name: "header-list",
+  args: {
+    testID: "header",
+    arrow: true,
+    title: "Controle de Jornada",
+    handleNavigation: () => {},
+    permission: false,
+    bluetoothIsConnected: true,
+    isInternetReachable: true,
+    isBluetooth: true,
+  },
+};
+
+export const HeaderPermission: Story = {
+  name: "header-permission",
+  args: {
+    testID: "header",
+    arrow: true,
+    title: "Permission",
+    handleNavigation: () => {},
+    permission: true,
+    bluetoothIsConnected: true,
+    isInternetReachable: true,
+    isBluetooth: false,
+  },
+};
+
+export const HeaderBackground: Story = {
+  name: "header-background",
+  args: {
+    testID: "header",
+    arrow: true,
+    title: "texto grande e background diferente",
+    handleNavigation: () => {},
+    permission: false,
+    bluetoothIsConnected: true,
+    isInternetReachable: true,
+    isBluetooth: false,
+    color: { colorText: "white" },
+  },
+};

package/src/stories/history-details/history-details.stories.tsx

@@ -0,0 +1,36 @@
+import type { StoryObj, Meta } from "@storybook/react";
+import { HistoryDetails } from "../../components/history-details";
+
+const meta: Meta<typeof HistoryDetails> = {
+  title: "componente/HistoryDetails",
+  component: HistoryDetails,
+  args: {
+    numero: "01020304050607",
+    local: "Doca 1, Pátio 02 - Usimais (Ipatinga)",
+    date: "24/03/2025",
+    duracao: "00:30",
+  },
+  parameters: {
+    notes: ` HistoryDetails Este é um componente de detalhe do histórico.Você usa assim:
+     <HistoryDetails
+        numero="999999"
+        local="Doca 3, Pátio 05 - Usiminas (Ipatinga)"
+        date="2026-01-01"
+        duracao="01:15"
+      />`,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Padrao: Story = {
+  name: "history-details-padrao",
+  args: {
+    numero: "01020304050607",
+    local: "Doca 1, Pátio 02 - Usimais (Ipatinga)",
+    date: "2025-03-24",
+    duracao: "00:30",
+  },
+};

package/src/stories/image-capture-with-remove/image-capture-with-remove.stories.tsx

@@ -8,6 +8,7 @@ const meta: Meta<typeof ImageCaptureWithRemove> = {
   component: ImageCaptureWithRemove as React.FC,
   args: {
     foto: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6OOy_GKxjzabOOBo22zHfg4TdWhubwnU7GQ&s",
+    status: "Cancelado",
   },
   parameters: {
     notes: `
@@ -45,3 +46,12 @@ export const ImageCaptureWithDelete: Story = {
     onRemove: () => {},
   },
 };
+export const ImageCaptureWithStatus: Story = {
+  name: "image-capture-with-status",
+  args: {
+    foto: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6OOy_GKxjzabOOBo22zHfg4TdWhubwnU7GQ&s",
+    handleTakePhoto: () => {},
+    onRemove: () => {},
+    status: "Pendente",
+  },
+};

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

@@ -13,6 +13,7 @@ const meta: Meta<typeof NotificationLoading> = {
     notification: "Hoje você tem um carregamento agendamento",
     statusNotify: "pending",
     dataStart: "Hoje",
+    readonly: false,
   },
   parameters: {
     notes: `
@@ -28,6 +29,7 @@ Você usa assim:
     notification=""
     statusNotify=""
     dataStart: "Hoje",
+    readonly: false,
 />
 \`\`\`
 `,
@@ -71,3 +73,16 @@ export const NotificationLoadingRecused: Story = {
     dataStart: "25 abril 2025",
   },
 };
+
+export const NotificationLoadingReadonly: Story = {
+  name: "Notification-readonly",
+  args: {
+    title: "#013200400456",
+    date: "12:30 07/05/2025",
+    handleNavigation: () => {},
+    notification: "Hoje você tem um carregamento agendamento",
+    statusNotify: "Reprovado",
+    dataStart: "25 abril 2025",
+    readonly: true,
+  },
+};

package/src/stories/profile-menu-option/profile-menu-option.stories.tsx

@@ -0,0 +1,70 @@
+import type { StoryObj, Meta } from "@storybook/react";
+
+import { ProfileMenuOption } from "../../components/profile-menu-option";
+import { theme } from "../../styles/theme/theme";
+
+const meta: Meta<typeof ProfileMenuOption> = {
+  title: "componente/ProfileMenuOption",
+  component: ProfileMenuOption,
+  args: {
+    text: "Perfil",
+    icon: "AGENT",
+    backgroundColor: theme.colors.blue[400],
+    colorIcon: theme.colors.neutral[25],
+    handleNavigation: () => {},
+  },
+  parameters: {
+    notes: `
+# ProfileMenuOption
+
+Este é um componente de opção de menu para perfil.
+Você usa assim:
+\`\`\`tsx
+<ProfileMenuOption
+  text="Perfil"
+  icon="AGENT"
+  backgroundColor={theme.colors.blue[400]}
+  colorIcon={theme.colors.neutral[25]}
+  handleNavigation={() => {}}
+/>
+\`\`\`
+`,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  name: "profile-menu-option",
+  args: {
+    text: "Perfil",
+    icon: "AGENT",
+    backgroundColor: theme.colors.blue[400],
+    colorIcon: theme.colors.neutral[25],
+    handleNavigation: () => {},
+  },
+};
+
+export const CustomColor: Story = {
+  name: "profile-menu-option-custom-color",
+  args: {
+    text: "Configurações",
+    icon: "GEAR",
+    backgroundColor: theme.colors.blue[500],
+    colorIcon: theme.colors.neutral[25],
+    handleNavigation: () => {},
+  },
+};
+
+export const Support: Story = {
+  name: "profile-menu-option-support",
+  args: {
+    text: "Suporte",
+    icon: "LIFEBUOY",
+    backgroundColor: theme.colors.blue[400],
+    colorIcon: theme.colors.neutral[25],
+    handleNavigation: () => {},
+  },
+};