react-native-exp-fig 0.1.44 → 2.0.1

package/src/stories/menu-item/menu-item.stories.tsx

@@ -1,76 +1,76 @@
-import type { StoryObj, Meta } from "@storybook/react";
-
-import { MenuItem } from "../../components/menu-item";
-import { theme } from "../../styles/theme/theme";
-
-const meta: Meta<typeof MenuItem> = {
-  title: "componente/MenuItem",
-  component: MenuItem,
-  args: {
-    width: 120,
-    height: 90,
-    title: "Histórico",
-    backgroundColor: theme.colors.blue[400],
-    handleNavigation: () => {},
-    typeSelected: "HISTORY",
-  },
-  parameters: {
-    notes: `
-# MenuItem
-
-Este é um componente de MenuItem de menu.
-Você usa assim:
-\`\`\`tsx
- <MenuItem
-    width={110}
-    height={90}
-    title={"Histórico"}
-    selected={false}
-    handleNavigation={() => {}}
-    typeSelected={"HISTORY"}
-    testID={"COIL"}
-/>
-\`\`\`
-`,
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const MenuItemsInativo: Story = {
-  name: "menu-item-inativo-carregamento",
-  args: {
-    width: 120,
-    height: 90,
-    selected: false,
-    handleNavigation: () => {},
-    typeSelected: "LOADING",
-  },
-};
-
-export const MenuItemsInativoBobina: Story = {
-  name: "menu-item-inativo-bobina",
-  args: {
-    width: 120,
-    height: 90,
-    selected: false,
-    title: "Bobinas",
-    backgroundColor: theme.colors.gray[350],
-    handleNavigation: () => {},
-    typeSelected: "COIL",
-  },
-};
-
-export const MenuItems: Story = {
-  name: "menu-item-ativo-histórico",
-  args: {
-    width: 120,
-    height: 90,
-    title: "Histórico",
-    selected: true,
-    handleNavigation: () => {},
-    typeSelected: "HISTORY",
-  },
-};
+import type { StoryObj, Meta } from "@storybook/react";
+
+import { MenuItem } from "../../components/menu-item";
+import { theme } from "../../styles/theme/theme";
+
+const meta: Meta<typeof MenuItem> = {
+  title: "componente/MenuItem",
+  component: MenuItem,
+  args: {
+    width: 120,
+    height: 90,
+    title: "Histórico",
+    backgroundColor: theme.colors.blue[400],
+    handleNavigation: () => {},
+    typeSelected: "HISTORY",
+  },
+  parameters: {
+    notes: `
+# MenuItem
+
+Este é um componente de MenuItem de menu.
+Você usa assim:
+\`\`\`tsx
+ <MenuItem
+    width={110}
+    height={90}
+    title={"Histórico"}
+    selected={false}
+    handleNavigation={() => {}}
+    typeSelected={"HISTORY"}
+    testID={"COIL"}
+/>
+\`\`\`
+`,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const MenuItemsInativo: Story = {
+  name: "menu-item-inativo-carregamento",
+  args: {
+    width: 120,
+    height: 90,
+    selected: false,
+    handleNavigation: () => {},
+    typeSelected: "LOADING",
+  },
+};
+
+export const MenuItemsInativoBobina: Story = {
+  name: "menu-item-inativo-bobina",
+  args: {
+    width: 120,
+    height: 90,
+    selected: false,
+    title: "Bobinas",
+    backgroundColor: theme.colors.gray[350],
+    handleNavigation: () => {},
+    typeSelected: "COIL",
+  },
+};
+
+export const MenuItems: Story = {
+  name: "menu-item-ativo-histórico",
+  args: {
+    width: 120,
+    height: 90,
+    title: "Histórico",
+    selected: true,
+    handleNavigation: () => {},
+    typeSelected: "HISTORY",
+  },
+};

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

@@ -1,6 +1,6 @@
 import { StoryObj, Meta } from "@storybook/react";
-import { ModalActivities } from "../../components/modals/modal-activities";
-import { IActivity } from "../../components/modals/modal-activities/interface";
+import { ModalActivities } from "../../components/modal-activities";
+import { IActivity } from "../../components/modal-activities/interface";
 
 const meta: Meta<typeof ModalActivities> = {
   title: "componente/ModalActivities",

package/src/stories/no-data/no-data.stories.tsx

@@ -1,35 +1,35 @@
-import type { StoryObj, Meta } from "@storybook/react";
-
-import { NoData } from "../../components/no-data";
-
-const meta: Meta<typeof NoData> = {
-  title: "componente/NoData",
-  component: NoData,
-  args: {
-    text: "",
-  },
-  parameters: {
-    notes: `
-# NoData
-
-Este é um componente de NoData .
-Você usa assim:
-\`\`\`tsx
- <NoData
-   text="sem cargas"
-/>
-\`\`\`
-`,
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const NoDatasSimples: Story = {
-  name: "no-data",
-  args: {
-    text: "sem carga",
-  },
-};
+import type { StoryObj, Meta } from "@storybook/react";
+
+import { NoData } from "../../components/no-data";
+
+const meta: Meta<typeof NoData> = {
+  title: "componente/NoData",
+  component: NoData,
+  args: {
+    text: "",
+  },
+  parameters: {
+    notes: `
+# NoData
+
+Este é um componente de NoData .
+Você usa assim:
+\`\`\`tsx
+ <NoData
+   text="sem cargas"
+/>
+\`\`\`
+`,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const NoDatasSimples: Story = {
+  name: "no-data",
+  args: {
+    text: "sem carga",
+  },
+};

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

@@ -0,0 +1,202 @@
+/* eslint-disable no-undef */
+/**
+ * IMPORTS
+ */
+
+import React from "react";
+import { View } from "react-native";
+
+import type { StoryObj, Meta } from "@storybook/react";
+
+// components
+import NotificationCard from "../../components/notification-card";
+import { Box } from "../../components/box";
+import { Typography } from "../../components/typography";
+
+// styles
+import { theme } from "../../styles/theme/theme";
+
+const meta: Meta<typeof NotificationCard> = {
+  title: "componente/NotificationCard",
+  component: NotificationCard as React.FC,
+  args: {
+    variant: "read",
+    title: "Notificação",
+    description: "Descrição da notificação",
+    actionLabel: undefined,
+    onPress: () => {
+      console.log("Notificação clicada-1");
+    },
+    onPressAction: () => {
+      console.log("Notificação clicada-2");
+    },
+  },
+  parameters: {
+    notes: `
+# NotificationCard
+
+Este é um componente de Card de notificação.
+Você usa assim:
+\`\`\`tsx
+<NotificationCard
+    variant="read" | "unread"
+    title="Título"
+    description="String ou ReactNode"
+    actionLabel="Label da ação"
+    onPress={() => {}}
+    onPressAction={() => {}}
+/>
+\`\`\`
+
+## Props
+
+- **variant**: Define o estilo de variante da notificação ('read' ou 'unread')
+- **title**: Título da notificação (string obrigatória)
+- **description**: Descrição (string ou ReactNode)
+- **actionLabel**: Label do botão de ação (opcional)
+- **onPress**: Função chamada ao clicar na notificação
+- **onPressAction**: Função chamada ao clicar no botão de ação
+- **testID**: ID para testes (opcional)
+`,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  name: "Notificação Lida",
+  args: {
+    variant: "read",
+    title: "Formulário Enviado",
+    description: "Seu formulário foi enviado com sucesso e está em análise.",
+    onPress: () => {
+      console.log("Notificação clicada-1");
+    },
+  },
+};
+
+export const Unread: Story = {
+  name: "Notificação Não Lida",
+  args: {
+    variant: "unread",
+    title: "Nova Mensagem",
+    description: "Você tem uma nova mensagem aguardando sua resposta.",
+    onPress: () => {
+      console.log("Notificação clicada-2");
+    },
+  },
+};
+
+export const WithAction: Story = {
+  name: "Com Botão de Ação",
+  args: {
+    variant: "read",
+    title: "Documento Expirado",
+    description: "Seu documento está expirado e precisa ser renovado urgentemente.",
+    actionLabel: "Renovar Agora",
+    onPress: () => {
+      console.log("Notificação clicada-3");
+    },
+    onPressAction: () => {
+      console.log("Notificação clicada-4");
+    },
+  },
+};
+
+export const WithReactNodeDescription: Story = {
+  name: "Com React Node na Descrição",
+  args: {
+    variant: "read",
+    title: "Status da Entrega",
+    description: (
+      <Box>
+        <Typography
+          text="Sua entrega está a caminho!"
+          size={theme.fontSizes.sm}
+          fontFamily={theme.fonts.inter_regular_400}
+          color={theme.colors.gray[700]}
+          marginBottom={8}
+        />
+        <Box
+          flexStyle={{ flexDirection: "row", alignItems: "center" }}
+          marginStyle={{ marginTop: 8 }}
+        >
+          <View
+            style={{
+              width: 12,
+              height: 12,
+              borderRadius: 6,
+              backgroundColor: theme.colors.green[500],
+              marginRight: 8,
+            }}
+          />
+          <Typography
+            text="Previsão: Hoje às 14:00"
+            size={theme.fontSizes.xs}
+            fontFamily={theme.fonts.inter_regular_400}
+            color={theme.colors.green[500]}
+          />
+        </Box>
+      </Box>
+    ),
+    onPress: () => {
+      console.log("Notificação clicada-5");
+    },
+  },
+};
+
+export const WithComplexReactNode: Story = {
+  name: "Com React Node Complexo",
+  args: {
+    variant: "unread",
+    title: "Alerta de Segurança",
+    description: (
+      <Box>
+        <Typography
+          text="Uma atividade suspeita foi detectada"
+          size={theme.fontSizes.sm}
+          fontFamily={theme.fonts.inter_bold}
+          fontWeight="700"
+          color={theme.colors.red[500]}
+          marginBottom={12}
+        />
+        <Box
+          backgroundColor={theme.colors.yellow[120]}
+          borderStyled={{ borderRadius: 8 }}
+          paddingStyle={{ padding: 8 }}
+          marginStyle={{ marginBottom: 8 }}
+        >
+          <Typography
+            text="• Login de local desconhecido"
+            size={theme.fontSizes["2xs"]}
+            fontFamily={theme.fonts.inter_regular_400}
+            color={theme.colors.gray[700]}
+            marginBottom={4}
+          />
+          <Typography
+            text="• Alteração de dados da conta"
+            size={theme.fontSizes["2xs"]}
+            fontFamily={theme.fonts.inter_regular_400}
+            color={theme.colors.gray[700]}
+          />
+        </Box>
+        <Typography
+          text="Revise sua conta agora para garantir sua segurança."
+          size={theme.fontSizes["2xs"]}
+          fontFamily={theme.fonts.inter_regular_400}
+          color={theme.colors.gray[600]}
+          marginTop={8}
+        />
+      </Box>
+    ),
+    actionLabel: "Revisar Conta",
+    onPress: () => {
+      console.log("Notificação clicada-6");
+    },
+    onPressAction: () => {
+      console.log("Notificação clicada-7");
+    },
+  },
+};

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

@@ -9,7 +9,7 @@ const meta: Meta<typeof NotificationLoading> = {
   args: {
     title: "Carregamento - #013200400456",
     date: "12:30 07/05/2025",
-    handleNavigation: () => {},
+    handleNavigation: () => { },
     notification: "Hoje você tem um carregamento agendamento",
     statusNotify: "pending",
     dataStart: "Hoje",
@@ -45,7 +45,7 @@ export const NotificationLoadingPending: Story = {
   args: {
     title: "#013200400456",
     date: "12:30 07/05/2025",
-    handleNavigation: () => {},
+    handleNavigation: () => { },
     notification: "Hoje você tem um carregamento agendamento",
     statusNotify: "Pendente",
     dataStart: "Ontem",
@@ -56,7 +56,7 @@ export const NotificationLoadingApproved: Story = {
   args: {
     title: "#013200400456",
     date: "12:30 07/05/2025",
-    handleNavigation: () => {},
+    handleNavigation: () => { },
     notification: "Hoje você tem um carregamento agendamento",
     statusNotify: "Aprovado",
     dataStart: "Hoje",
@@ -67,7 +67,7 @@ export const NotificationLoadingRecused: Story = {
   args: {
     title: "#013200400456",
     date: "12:30 07/05/2025",
-    handleNavigation: () => {},
+    handleNavigation: () => { },
     notification: "Hoje você tem um carregamento agendamento",
     statusNotify: "Reprovado",
     dataStart: "25 abril 2025",
@@ -79,7 +79,7 @@ export const NotificationLoadingReadonly: Story = {
   args: {
     title: "#013200400456",
     date: "12:30 07/05/2025",
-    handleNavigation: () => {},
+    handleNavigation: () => { },
     notification: "Hoje você tem um carregamento agendamento",
     statusNotify: "Reprovado",
     dataStart: "25 abril 2025",

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

@@ -1,70 +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: () => {},
-  },
-};
+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: () => {},
+  },
+};