react-native-exp-fig 2.0.0 → 2.0.1

package/lib/typescript/src/stories/notification-card/notification-card.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"notification-card.stories.d.ts","sourceRoot":"","sources":["../../../../../src/stories/notification-card/notification-card.stories.tsx"],"names":[],"mappings":"AACA;;GAEG;AAKH,OAAO,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAGvD,OAAO,gBAAgB,MAAM,oCAAoC,CAAC;AAOlE,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,gBAAgB,CA2CvC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,aAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAUrB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAUpB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAcxB,CAAC;AAEF,eAAO,MAAM,wBAAwB,EAAE,KAwCtC,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAoDlC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-exp-fig",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "Biblioteca para desenvolvimento dos componentes para utilizar nos app da Expresso Figueiredo.",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

package/src/components/notification-card/index.tsx

@@ -1,123 +1,127 @@
-/**
- * IMPORTS
- */
-import React, { forwardRef } from "react";
-import { TouchableOpacity, View } from "react-native";
-
-// commons / icons
-import { Icons } from "../../common/icons-svg";
-
-// components
-import { Box } from "../box";
-import { Typography } from "../typography";
-import { Button } from "../button";
-
-// styles / theme
-import { theme } from "../../styles/theme/theme";
-
-// typings
-import { asBaseComponent } from "../../@types/as-base-component";
-import type { INotificationCardProps } from "./interface";
-
-/**
- * Componente NotificationCard
- */
-const NotificationCard: React.FC<INotificationCardProps> = forwardRef<View, INotificationCardProps>(
-  ({ variant = "read", title, description, actionLabel, onPress, onPressAction, testID }, ref) => {
-    const isWarning = variant === "unread";
-
-    // cor da borda lateral
-    const borderColor = isWarning ? theme.colors.orange[150] : theme.colors.blue[525];
-
-    return (
-      <TouchableOpacity onPress={onPress} activeOpacity={0.7}>
-        <Box
-          ref={ref as React.RefObject<View>}
-          testID={testID ?? "notification-card"}
-          flexStyle={{ flexDirection: "row" }}
-          borderStyled={{
-            borderWidth: 1,
-            borderColor: isWarning ? theme.colors.orange[150] : theme.colors.neutral[200],
-            borderRadius: theme.borderWidths.thick_medium,
-          }}
-          marginStyle={{ marginBottom: 12 }}
-          backgroundColor={isWarning ? theme.colors.neutral[500] : theme.colors.neutral[25]}
-        >
-          {/* borda fixa lateral esquerda */}
-          <Box
-            width={8}
-            backgroundColor={borderColor}
-            borderStyled={{
-              borderTopLeftRadius: theme.borderWidths.thick_medium,
-              borderBottomLeftRadius: theme.borderWidths.thick_medium,
-            }}
-          />
-
-          {/* Conteúdo do card */}
-          <Box flexStyle={{ flex: 1 }} paddingStyle={{ padding: theme.paddings.sm }}>
-            {/* Header */}
-            <Box
-              flexStyle={{ flexDirection: "row", alignItems: "center" }}
-              marginStyle={{ marginBottom: 6 }}
-            >
-              <Icons icon="BELL" color={borderColor} size={20} />
-              <Typography
-                text={title}
-                fontFamily={theme.fonts.inter_bold}
-                fontWeight="700"
-                size={theme.fontSizes.md}
-                color={theme.colors.black[100]}
-                marginLeft={8}
-              />
-            </Box>
-
-            {/* Texto */}
-            <Typography
-              text={description}
-              numberOfLines={isWarning ? 2 : 4}
-              ellipsizeMode="tail"
-              size={theme.fontSizes.sm}
-              lineHeight={theme.lineHeight.md}
-              fontFamily={theme.fonts.inter_regular_400}
-              color={theme.colors.gray[700]}
-              marginBottom={theme.margins.xs}
-            />
-
-            {/* Ação opcional */}
-            {actionLabel && onPressAction && (
-              <Button
-                isLoading={false}
-                title={actionLabel}
-                onPress={onPressAction}
-                backgroundColor={theme.colors.neutral[25]}
-                borderStyled={{
-                  borderWidth: 1,
-                  borderColor: theme.colors.red[500],
-                  borderRadius: 12,
-                }}
-                buttonTextStyle={{
-                  color: theme.colors.red[500],
-                  fontSize: theme.fontSizes.sm,
-                  fontFamily: theme.fonts.inter_medium_500,
-                }}
-                flexStyle={{
-                  flexDirection: "row",
-                  alignItems: "center",
-                  justifyContent: "center",
-                }}
-                style={{ alignSelf: "flex-start", paddingHorizontal: 12 }}
-              />
-            )}
-          </Box>
-        </Box>
-      </TouchableOpacity>
-    );
-  }
-);
-
-NotificationCard.displayName = "NotificationCard";
-
-/**
- * EXPORTS
- */
-export default asBaseComponent(NotificationCard);
+/**
+ * IMPORTS
+ */
+import React, { forwardRef } from "react";
+import { TouchableOpacity, View } from "react-native";
+
+// commons / icons
+import { Icons } from "../../common/icons-svg";
+
+// components
+import { Box } from "../box";
+import { Typography } from "../typography";
+import { Button } from "../button";
+
+// styles / theme
+import { theme } from "../../styles/theme/theme";
+
+// typings
+import { asBaseComponent } from "../../@types/as-base-component";
+import type { INotificationCardProps } from "./interface";
+
+/**
+ * Componente NotificationCard
+ */
+const NotificationCard: React.FC<INotificationCardProps> = forwardRef<View, INotificationCardProps>(
+  ({ variant = "read", title, description, actionLabel, onPress, onPressAction, testID }, ref) => {
+    const isWarning = variant === "unread";
+
+    // cor da borda lateral
+    const borderColor = isWarning ? theme.colors.orange[150] : theme.colors.blue[525];
+
+    return (
+      <TouchableOpacity onPress={onPress} activeOpacity={0.7}>
+        <Box
+          ref={ref as React.RefObject<View>}
+          testID={testID ?? "notification-card"}
+          flexStyle={{ flexDirection: "row" }}
+          borderStyled={{
+            borderWidth: 1,
+            borderColor: isWarning ? theme.colors.orange[150] : theme.colors.neutral[200],
+            borderRadius: theme.borderWidths.thick_medium,
+          }}
+          marginStyle={{ marginBottom: 12 }}
+          backgroundColor={isWarning ? theme.colors.neutral[500] : theme.colors.neutral[25]}
+        >
+          {/* borda fixa lateral esquerda */}
+          <Box
+            width={8}
+            backgroundColor={borderColor}
+            borderStyled={{
+              borderTopLeftRadius: theme.borderWidths.thick_medium,
+              borderBottomLeftRadius: theme.borderWidths.thick_medium,
+            }}
+          />
+
+          {/* Conteúdo do card */}
+          <Box flexStyle={{ flex: 1 }} paddingStyle={{ padding: theme.paddings.sm }}>
+            {/* Header */}
+            <Box
+              flexStyle={{ flexDirection: "row", alignItems: "center" }}
+              marginStyle={{ marginBottom: 6 }}
+            >
+              <Icons icon="BELL" color={borderColor} size={20} />
+              <Typography
+                text={title}
+                fontFamily={theme.fonts.inter_bold}
+                fontWeight="700"
+                size={theme.fontSizes.md}
+                color={theme.colors.black[100]}
+                marginLeft={8}
+              />
+            </Box>
+
+            {/* Texto */}
+            {typeof description === "string" ? (
+              <Typography
+                text={description}
+                numberOfLines={isWarning ? 2 : 4}
+                ellipsizeMode="tail"
+                size={theme.fontSizes.sm}
+                lineHeight={theme.lineHeight.md}
+                fontFamily={theme.fonts.inter_regular_400}
+                color={theme.colors.gray[700]}
+                marginBottom={theme.margins.xs}
+              />
+            ) : (
+              <Box marginStyle={{ marginBottom: theme.margins.xs }}>{description}</Box>
+            )}
+
+            {/* Ação opcional */}
+            {actionLabel && onPressAction && (
+              <Button
+                isLoading={false}
+                title={actionLabel}
+                onPress={onPressAction}
+                backgroundColor={theme.colors.neutral[25]}
+                borderStyled={{
+                  borderWidth: 1,
+                  borderColor: theme.colors.red[500],
+                  borderRadius: 12,
+                }}
+                buttonTextStyle={{
+                  color: theme.colors.red[500],
+                  fontSize: theme.fontSizes.sm,
+                  fontFamily: theme.fonts.inter_medium_500,
+                }}
+                flexStyle={{
+                  flexDirection: "row",
+                  alignItems: "center",
+                  justifyContent: "center",
+                }}
+                style={{ alignSelf: "flex-start", paddingHorizontal: 12 }}
+              />
+            )}
+          </Box>
+        </Box>
+      </TouchableOpacity>
+    );
+  }
+);
+
+NotificationCard.displayName = "NotificationCard";
+
+/**
+ * EXPORTS
+ */
+export default asBaseComponent(NotificationCard);

package/src/components/notification-card/interface.ts

@@ -1,18 +1,19 @@
-/**
- * IMPORTS
- */
-
-interface INotificationCardProps {
-  variant?: "read" | "unread";
-  title: string;
-  description: string;
-  actionLabel?: string;
-  onPress?: () => void;
-  onPressAction?: () => void;
-  testID?: string;
-}
-
-/**
- * EXPORTS
- */
-export { type INotificationCardProps };
+/**
+ * IMPORTS
+ */
+import type { ReactNode } from "react";
+
+interface INotificationCardProps {
+  variant?: "read" | "unread";
+  title: string;
+  description: string | ReactNode;
+  actionLabel?: string;
+  onPress?: () => void;
+  onPressAction?: () => void;
+  testID?: string;
+}
+
+/**
+ * EXPORTS
+ */
+export { type INotificationCardProps };

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