react-native-exp-fig 0.1.37 → 0.1.39

package/src/stories/modal-activity-reason/modal-activity-reason.stories.tsx

@@ -1,192 +1,192 @@
-/**
- * IMPORTS
- */
-import React, { useState } from "react";
-import type { Meta, StoryObj } from "@storybook/react";
-import { View, Text, Button } from "react-native";
-
-// components
-import ModalActivityReason from "../../components/modals/modal-activity-reason";
-
-/**
- * META
- */
-const meta: Meta<typeof ModalActivityReason> = {
-  title: "componente/ModalActivityReason",
-  component: ModalActivityReason as React.FC,
-  tags: ["autodocs"],
-  args: {
-    visible: false,
-    textTitle: undefined,
-  },
-  argTypes: {
-    visible: {
-      control: { type: "boolean" },
-      description: "Controla a visibilidade do modal.",
-      table: { category: "Comportamento" },
-    },
-    textTitle: {
-      control: { type: "text" },
-      description:
-        "Título exibido no cabeçalho do modal. Se não informado, usa 'Motivo da exclusão'.",
-      table: { category: "Aparência" },
-    },
-    onClose: {
-      action: "onClose",
-      description:
-        "Chamado ao fechar/cancelar o modal. Deve alternar `visible` para `false` no uso controlado.",
-      table: { category: "Eventos" },
-    },
-    modalConfirm: {
-      action: "modalConfirm",
-      description:
-        "Chamado ao confirmar a ação. Por padrão, o componente chama `modalConfirm(true)` e em seguida `onClose()`.",
-      table: { category: "Eventos" },
-    },
-  },
-  parameters: {
-    controls: { expanded: true },
-    layout: "centered",
-    docs: {
-      description: {
-        component: `
-### ModalActivityReason
-
-Modal para solicitar **motivo/justificativa** antes de executar uma ação crítica (ex.: excluir atividade).
-
-#### Recursos
-- Título personalizável via \`textTitle\`
-- Campo de texto (interno) para descrição do motivo
-- Botões **CANCELAR** e **CONFIRMAR**
-- Dispara \`onClose\` e \`modalConfirm\` conforme interação do usuário
-
-#### Props
-- \`visible: boolean\` — controla abertura/fechamento do modal
-- \`onClose: () => void\` — chamado ao cancelar/fechar
-- \`modalConfirm: (ok?: boolean) => void\` — chamado ao confirmar; o componente invoca \`modalConfirm(true)\` e depois \`onClose()\`
-- \`textTitle?: string\` — título opcional do cabeçalho
-
-> Caso \`textTitle\` não seja informado, o título padrão é **"Motivo da exclusão"**.
-
-#### Padrão de Uso (controlado)
-No consumo real, gerencie o estado \`visible\` fora do componente e passe callbacks:
-\`\`\`tsx
-const [open, setOpen] = useState(false);
-
-<ModalActivityReason
-  visible={open}
-  onClose={() => setOpen(false)}
-  modalConfirm={() => {
-    // enviar justificativa para API (se o componente expuser)
-    setOpen(false);
-  }}
-  textTitle="Motivo da exclusão"
-/>
-\`\`\`
-
-#### Testes (ideias)
-- Renderiza com \`visible=true\`
-- Exibe título padrão e título customizado
-- Dispara \`onClose\` ao cancelar
-- Dispara \`modalConfirm\` ao confirmar (e fecha em seguida)
-`,
-      },
-    },
-  },
-  decorators: [
-    (Story) => (
-      <View
-        style={{
-          width: 360,
-          padding: 16,
-          backgroundColor: "#F7F7F7",
-          borderRadius: 12,
-        }}
-      >
-        <Story />
-      </View>
-    ),
-  ],
-};
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-/**
- * STORIES
- */
-
-// 1) Aberto (básico)
-export const AbertoBasico: Story = {
-  name: "aberto-basico",
-  args: {
-    visible: true,
-  },
-};
-
-// 2) Fechado (estado inicial comum)
-export const Fechado: Story = {
-  name: "fechado",
-  args: {
-    visible: false,
-  },
-};
-
-// 3) Com título personalizado
-export const TituloPersonalizado: Story = {
-  name: "titulo-personalizado",
-  args: {
-    visible: true,
-    textTitle: "Justifique a alteração da atividade",
-  },
-};
-
-// 4) Interativo (controlado) — demonstra fluxo completo
-export const ControladoInterativo: Story = {
-  name: "controlado-interativo",
-  render: (args) => {
-    const Wrapper = () => {
-      const [open, setOpen] = useState(false);
-
-      return (
-        <View>
-          <Button title="Abrir modal" onPress={() => setOpen(true)} />
-          <Text style={{ marginTop: 12, fontSize: 12, color: "#666" }}>
-            Clique para abrir e testar CANCELAR/CONFIRMAR.
-          </Text>
-
-          <ModalActivityReason
-            {...args}
-            visible={open}
-            onClose={() => {
-              // aciona painel de ações do Storybook
-              // @ts-ignore
-              args?.onClose?.();
-              setOpen(false);
-            }}
-            modalConfirm={(ok?: boolean) => {
-              // @ts-ignore
-              args?.modalConfirm?.(ok);
-              setOpen(false);
-            }}
-            textTitle={args.textTitle ?? "Motivo da exclusão"}
-          />
-        </View>
-      );
-    };
-
-    return <Wrapper />;
-  },
-  args: {
-    visible: false,
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "Exemplo **controlado**: o estado `visible` é gerenciado no Story para simular uso real.",
-      },
-    },
-  },
-};
+/**
+ * IMPORTS
+ */
+import React, { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { View, Text, Button } from "react-native";
+
+// components
+import ModalActivityReason from "../../components/modals/modal-activity-reason";
+
+/**
+ * META
+ */
+const meta: Meta<typeof ModalActivityReason> = {
+  title: "componente/ModalActivityReason",
+  component: ModalActivityReason as React.FC,
+  tags: ["autodocs"],
+  args: {
+    visible: false,
+    textTitle: undefined,
+  },
+  argTypes: {
+    visible: {
+      control: { type: "boolean" },
+      description: "Controla a visibilidade do modal.",
+      table: { category: "Comportamento" },
+    },
+    textTitle: {
+      control: { type: "text" },
+      description:
+        "Título exibido no cabeçalho do modal. Se não informado, usa 'Motivo da exclusão'.",
+      table: { category: "Aparência" },
+    },
+    onClose: {
+      action: "onClose",
+      description:
+        "Chamado ao fechar/cancelar o modal. Deve alternar `visible` para `false` no uso controlado.",
+      table: { category: "Eventos" },
+    },
+    modalConfirm: {
+      action: "modalConfirm",
+      description:
+        "Chamado ao confirmar a ação. Por padrão, o componente chama `modalConfirm(true)` e em seguida `onClose()`.",
+      table: { category: "Eventos" },
+    },
+  },
+  parameters: {
+    controls: { expanded: true },
+    layout: "centered",
+    docs: {
+      description: {
+        component: `
+### ModalActivityReason
+
+Modal para solicitar **motivo/justificativa** antes de executar uma ação crítica (ex.: excluir atividade).
+
+#### Recursos
+- Título personalizável via \`textTitle\`
+- Campo de texto (interno) para descrição do motivo
+- Botões **CANCELAR** e **CONFIRMAR**
+- Dispara \`onClose\` e \`modalConfirm\` conforme interação do usuário
+
+#### Props
+- \`visible: boolean\` — controla abertura/fechamento do modal
+- \`onClose: () => void\` — chamado ao cancelar/fechar
+- \`modalConfirm: (ok?: boolean) => void\` — chamado ao confirmar; o componente invoca \`modalConfirm(true)\` e depois \`onClose()\`
+- \`textTitle?: string\` — título opcional do cabeçalho
+
+> Caso \`textTitle\` não seja informado, o título padrão é **"Motivo da exclusão"**.
+
+#### Padrão de Uso (controlado)
+No consumo real, gerencie o estado \`visible\` fora do componente e passe callbacks:
+\`\`\`tsx
+const [open, setOpen] = useState(false);
+
+<ModalActivityReason
+  visible={open}
+  onClose={() => setOpen(false)}
+  modalConfirm={() => {
+    // enviar justificativa para API (se o componente expuser)
+    setOpen(false);
+  }}
+  textTitle="Motivo da exclusão"
+/>
+\`\`\`
+
+#### Testes (ideias)
+- Renderiza com \`visible=true\`
+- Exibe título padrão e título customizado
+- Dispara \`onClose\` ao cancelar
+- Dispara \`modalConfirm\` ao confirmar (e fecha em seguida)
+`,
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <View
+        style={{
+          width: 360,
+          padding: 16,
+          backgroundColor: "#F7F7F7",
+          borderRadius: 12,
+        }}
+      >
+        <Story />
+      </View>
+    ),
+  ],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+/**
+ * STORIES
+ */
+
+// 1) Aberto (básico)
+export const AbertoBasico: Story = {
+  name: "aberto-basico",
+  args: {
+    visible: true,
+  },
+};
+
+// 2) Fechado (estado inicial comum)
+export const Fechado: Story = {
+  name: "fechado",
+  args: {
+    visible: false,
+  },
+};
+
+// 3) Com título personalizado
+export const TituloPersonalizado: Story = {
+  name: "titulo-personalizado",
+  args: {
+    visible: true,
+    textTitle: "Justifique a alteração da atividade",
+  },
+};
+
+// 4) Interativo (controlado) — demonstra fluxo completo
+export const ControladoInterativo: Story = {
+  name: "controlado-interativo",
+  render: (args) => {
+    const Wrapper = () => {
+      const [open, setOpen] = useState(false);
+
+      return (
+        <View>
+          <Button title="Abrir modal" onPress={() => setOpen(true)} />
+          <Text style={{ marginTop: 12, fontSize: 12, color: "#666" }}>
+            Clique para abrir e testar CANCELAR/CONFIRMAR.
+          </Text>
+
+          <ModalActivityReason
+            {...args}
+            visible={open}
+            onClose={() => {
+              // aciona painel de ações do Storybook
+              // @ts-ignore
+              args?.onClose?.();
+              setOpen(false);
+            }}
+            modalConfirm={(value?: string) => {
+              // @ts-ignore
+              args?.modalConfirm?.(value);
+              setOpen(false);
+            }}
+            textTitle={args.textTitle ?? "Motivo da exclusão"}
+          />
+        </View>
+      );
+    };
+
+    return <Wrapper />;
+  },
+  args: {
+    visible: false,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Exemplo **controlado**: o estado `visible` é gerenciado no Story para simular uso real.",
+      },
+    },
+  },
+};

package/src/stories/modal-create-activitie/modal-create-activitie.stories.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable no-undef */
 /**
  * IMPORTS
  */
@@ -78,5 +79,8 @@ export const Aberto: Story = {
   args: {
     visible: true,
     textTitle: "Incluir atividade",
+    onPressConfirm: (payload) => {
+      console.log("payload", payload);
+    },
   },
 };