react-native-exp-fig 2.0.0 → 2.0.2

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

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

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

@@ -1,88 +1,88 @@
-import React from "react";
-
-import type { StoryObj, Meta } from "@storybook/react";
-import { NotificationLoading } from "../../components/notification-loading";
-
-const meta: Meta<typeof NotificationLoading> = {
-  title: "componente/NotificationLoading",
-  component: NotificationLoading as React.FC,
-  args: {
-    title: "Carregamento - #013200400456",
-    date: "12:30 07/05/2025",
-    handleNavigation: () => {},
-    notification: "Hoje você tem um carregamento agendamento",
-    statusNotify: "pending",
-    dataStart: "Hoje",
-    readonly: false,
-  },
-  parameters: {
-    notes: `
-# NotificationLoading
-
-Este é um componente de Card de notificação.
-Você usa assim:
-\`\`\`tsx
-<NotificationLoading
-    title=""
-    date=""
-    handleNavigation={() => {}}
-    notification=""
-    statusNotify=""
-    dataStart: "Hoje",
-    readonly: false,
-/>
-\`\`\`
-`,
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const NotificationLoadingPending: Story = {
-  name: "Notification-pending",
-  args: {
-    title: "#013200400456",
-    date: "12:30 07/05/2025",
-    handleNavigation: () => {},
-    notification: "Hoje você tem um carregamento agendamento",
-    statusNotify: "Pendente",
-    dataStart: "Ontem",
-  },
-};
-export const NotificationLoadingApproved: Story = {
-  name: "Notification-Approved",
-  args: {
-    title: "#013200400456",
-    date: "12:30 07/05/2025",
-    handleNavigation: () => {},
-    notification: "Hoje você tem um carregamento agendamento",
-    statusNotify: "Aprovado",
-    dataStart: "Hoje",
-  },
-};
-export const NotificationLoadingRecused: Story = {
-  name: "Notification-recused",
-  args: {
-    title: "#013200400456",
-    date: "12:30 07/05/2025",
-    handleNavigation: () => {},
-    notification: "Hoje você tem um carregamento agendamento",
-    statusNotify: "Reprovado",
-    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,
-  },
-};
+import React from "react";
+
+import type { StoryObj, Meta } from "@storybook/react";
+import { NotificationLoading } from "../../components/notification-loading";
+
+const meta: Meta<typeof NotificationLoading> = {
+  title: "componente/NotificationLoading",
+  component: NotificationLoading as React.FC,
+  args: {
+    title: "Carregamento - #013200400456",
+    date: "12:30 07/05/2025",
+    handleNavigation: () => { },
+    notification: "Hoje você tem um carregamento agendamento",
+    statusNotify: "pending",
+    dataStart: "Hoje",
+    readonly: false,
+  },
+  parameters: {
+    notes: `
+# NotificationLoading
+
+Este é um componente de Card de notificação.
+Você usa assim:
+\`\`\`tsx
+<NotificationLoading
+    title=""
+    date=""
+    handleNavigation={() => {}}
+    notification=""
+    statusNotify=""
+    dataStart: "Hoje",
+    readonly: false,
+/>
+\`\`\`
+`,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const NotificationLoadingPending: Story = {
+  name: "Notification-pending",
+  args: {
+    title: "#013200400456",
+    date: "12:30 07/05/2025",
+    handleNavigation: () => { },
+    notification: "Hoje você tem um carregamento agendamento",
+    statusNotify: "Pendente",
+    dataStart: "Ontem",
+  },
+};
+export const NotificationLoadingApproved: Story = {
+  name: "Notification-Approved",
+  args: {
+    title: "#013200400456",
+    date: "12:30 07/05/2025",
+    handleNavigation: () => { },
+    notification: "Hoje você tem um carregamento agendamento",
+    statusNotify: "Aprovado",
+    dataStart: "Hoje",
+  },
+};
+export const NotificationLoadingRecused: Story = {
+  name: "Notification-recused",
+  args: {
+    title: "#013200400456",
+    date: "12:30 07/05/2025",
+    handleNavigation: () => { },
+    notification: "Hoje você tem um carregamento agendamento",
+    statusNotify: "Reprovado",
+    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,
+  },
+};