react-native-exp-fig 0.1.26 → 0.1.28

package/src/stories/input-text-counter/input-text-counter.stories.tsx

@@ -0,0 +1,232 @@
+/**
+ * IMPORTS
+ */
+import React, { useState } from "react";
+import { View, Text } from "react-native";
+
+// components
+import InputTextCounter from "../../components/input-text-counter";
+
+import type { Meta, StoryObj } from "@storybook/react";
+
+/**
+ * META
+ */
+const meta: Meta<typeof InputTextCounter> = {
+  title: "componente/InputTextCounter",
+  component: InputTextCounter as React.FC,
+  tags: ["autodocs"],
+  args: {
+    label: "Descreva o problema encontrado",
+    placeholder: "Ex: O caminhão apresentou falha no freio durante o trajeto...",
+    // props comuns de TextInput (assumindo que o componente as repasse):
+    maxLength: 150,
+    multiline: true,
+  },
+  argTypes: {
+    label: {
+      control: { type: "text" },
+      description: "Rótulo exibido acima do campo.",
+      table: { category: "Aparência" },
+    },
+    placeholder: {
+      control: { type: "text" },
+      description: "Texto de dica quando o campo está vazio.",
+      table: { category: "Aparência" },
+    },
+    maxLength: {
+      control: { type: "number", min: 50, max: 500, step: 10 },
+      description: "Limite máximo de caracteres (ex.: 150).",
+      table: { category: "Comportamento" },
+    },
+    multiline: {
+      control: { type: "boolean" },
+      description: "Habilita múltiplas linhas para textos longos.",
+      table: { category: "Comportamento" },
+    },
+    editable: {
+      control: { type: "boolean" },
+      description: "Se falso, o campo fica somente leitura (desabilitado).",
+      table: { category: "Comportamento" },
+    },
+    defaultValue: {
+      control: { type: "text" },
+      description: "Valor inicial não controlado (apenas na montagem).",
+      table: { category: "Valor" },
+    },
+    value: {
+      control: { type: "text" },
+      description: "Valor controlado do campo. Use junto de `onChangeText` (controlado).",
+      table: { category: "Valor" },
+    },
+    onChangeText: {
+      action: "onChangeText",
+      description: "Callback disparado a cada alteração de texto.",
+      table: { category: "Eventos" },
+    },
+  },
+  parameters: {
+    controls: { expanded: true },
+    layout: "centered",
+    notes: `
+# InputTextCounter
+
+Campo de texto **multilinha** para descrição de manutenção com **contador de caracteres** e estilo seguindo o Figma.
+
+## ✅ Recursos
+- **Contador dinâmico** (ex.: \`85/150\`)
+- **Limite configurável** via \`maxLength\` (padrão: 150)
+- **Multilinha** para textos longos
+- **Placeholder** claro com exemplo de preenchimento
+
+## 🔧 Props principais
+- \`label: string\` — título acima do campo
+- \`placeholder: string\` — dica de preenchimento
+- \`maxLength?: number\` — limite de caracteres (ex.: 150)
+- \`multiline?: boolean\` — permite múltiplas linhas
+- \`editable?: boolean\` — desabilita/ativa edição
+- \`defaultValue?: string\` — valor inicial (não controlado)
+- \`value?: string\`, \`onChangeText?: (t: string) => void\` — modo controlado
+
+> Observação: se o componente estende \`TextInputProps\`, essas props já são suportadas.
+
+## 🧩 Padrões de UX
+- Mostre o **contador** sempre que houver \`maxLength\`.
+- Use \`placeholder\` com **exemplo concreto** (melhora taxa de preenchimento).
+- Em formulários longos, mantenha o campo **multilinha** com altura inicial confortável.
+
+## 🧪 Testes (ideias)
+- Renderiza label e placeholder corretos
+- Respeita \`maxLength\` e exibe contador
+- Dispara \`onChangeText\` ao digitar
+- \`editable=false\` impede edição
+
+## 💡 Uso básico
+\`\`\`tsx
+<InputTextCounter
+  label="Descreva o problema encontrado"
+  placeholder="Ex: O caminhão apresentou falha no freio durante o trajeto..."
+  maxLength={150}
+  multiline
+/>
+\`\`\`
+`,
+  },
+  decorators: [
+    (Story) => (
+      <View
+        style={{
+          width: 360,
+          padding: 16,
+          backgroundColor: "#F7F7F7",
+          borderRadius: 12,
+        }}
+      >
+        <Story />
+      </View>
+    ),
+  ],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+/**
+ * STORIES
+ */
+
+// 1) Padrão
+export const InputDefault: Story = {
+  name: "input-descricao-default",
+  args: {
+    label: "Descrição da manutenção",
+    placeholder: "Ex: Vazamento de óleo no motor.",
+    maxLength: 150,
+    multiline: true,
+  },
+};
+
+// 2) Valor inicial (não controlado)
+export const ComValorInicial: Story = {
+  name: "com-valor-inicial",
+  args: {
+    defaultValue:
+      "Durante o trajeto na BR-262, notei ruído metálico vindo da roda traseira direita.",
+  },
+};
+
+// 3) Perto do limite (simula campo quase cheio)
+export const PertoDoLimite: Story = {
+  name: "perto-do-limite",
+  args: {
+    maxLength: 100,
+    defaultValue: "Barulho intermitente na transmissão ao reduzir de 4ª para 3ª em descida.",
+  },
+};
+
+// 4) Desabilitado / Somente leitura
+export const Desabilitado: Story = {
+  name: "desabilitado",
+  args: {
+    editable: false,
+    placeholder: "Campo indisponível no momento",
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Use `editable={false}` para estados de checklist revisado ou quando a OS estiver bloqueada.",
+      },
+    },
+  },
+};
+
+// 5) Interativo controlado (demonstração de value + onChangeText)
+export const ControladoInterativo: Story = {
+  name: "controlado-interativo",
+  render: (args) => {
+    const Wrapper = () => {
+      const [text, setText] = useState("Inicial: ruído ao frear levemente após 20min de uso.");
+      return (
+        <View>
+          <InputTextCounter
+            {...args}
+            label={args.label ?? "Descrição"}
+            value={text}
+            onChangeText={(t: string) => {
+              setText(t);
+              // Storybook action:
+              // @ts-ignore - vincula ao painel de ações se existir
+              args?.onChangeText?.(t);
+            }}
+          />
+          <Text style={{ marginTop: 8, fontSize: 12, color: "#666" }}>
+            {text.length}/{args.maxLength ?? 150} caracteres
+          </Text>
+        </View>
+      );
+    };
+    return <Wrapper />;
+  },
+  args: {
+    maxLength: 200,
+    multiline: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Exemplo **controlado**: o estado vive no Story e é atualizado via `onChangeText`.",
+      },
+    },
+  },
+};
+
+// 6) Placeholder extenso (orientação contextual)
+export const PlaceholderOrientativo: Story = {
+  name: "placeholder-orientativo",
+  args: {
+    placeholder:
+      "Descreva quando ocorreu, o local no veículo e se o problema é constante ou intermitente.",
+  },
+};

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

@@ -1,64 +1,64 @@
-import { StoryObj, Meta } from "@storybook/react";
-import { ModalActivities } from "../../components/modal-activities";
-import { IActivity } from "../../components/modal-activities/interface";
-
-const meta: Meta<typeof ModalActivities> = {
-  title: "componente/ModalActivities",
-  component: ModalActivities,
-  args: {
-    width: 120,
-    onClose: () => {},
-    activityType: "trabalho",
-    isLoading: false,
-    handleActivity: (activity: IActivity) => {
-      return activity;
-    },
-  },
-  parameters: {
-    notes: `
-# MenuItem
-
-Este é um componente de MenuItem de menu.
-Você usa assim:
-\`\`\`tsx
- <ModalActivities
-          {...args}
-           activityType={activity?.tipo || "trabalho"}
-          onClose={() => setIsVisible(false)}
-          handleActivity={handleActivity}
-        />
-\`\`\`
-`,
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const DefaultWork: Story = {
-  name: "modal-activities-work",
-  args: {
-    isLoading: false,
-    activityType: "trabalho",
-    onClose: () => {},
-    handleActivity: (activity: IActivity) => () => {
-      return activity;
-    },
-  },
-};
-
-export const DefaultRest: Story = {
-  name: "modal-activities-rest",
-  args: {
-    isLoading: false,
-    activityType: "descanso",
-    style: {
-      marginLeft: 0,
-    },
-    onClose: () => {},
-    handleActivity: (activity: IActivity) => () => {
-      return activity;
-    },
-  },
-};
+import { StoryObj, Meta } from "@storybook/react";
+import { ModalActivities } from "../../components/modals/modal-activities";
+import { IActivity } from "../../components/modals/modal-activities/interface";
+
+const meta: Meta<typeof ModalActivities> = {
+  title: "componente/ModalActivities",
+  component: ModalActivities,
+  args: {
+    width: 120,
+    onClose: () => {},
+    activityType: "trabalho",
+    isLoading: false,
+    handleActivity: (activity: IActivity) => {
+      return activity;
+    },
+  },
+  parameters: {
+    notes: `
+# MenuItem
+
+Este é um componente de MenuItem de menu.
+Você usa assim:
+\`\`\`tsx
+ <ModalActivities
+          {...args}
+           activityType={activity?.tipo || "trabalho"}
+          onClose={() => setIsVisible(false)}
+          handleActivity={handleActivity}
+        />
+\`\`\`
+`,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const DefaultWork: Story = {
+  name: "modal-activities-work",
+  args: {
+    isLoading: false,
+    activityType: "trabalho",
+    onClose: () => {},
+    handleActivity: (activity: IActivity) => () => {
+      return activity;
+    },
+  },
+};
+
+export const DefaultRest: Story = {
+  name: "modal-activities-rest",
+  args: {
+    isLoading: false,
+    activityType: "descanso",
+    style: {
+      marginLeft: 0,
+    },
+    onClose: () => {},
+    handleActivity: (activity: IActivity) => () => {
+      return activity;
+    },
+  },
+};

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

@@ -0,0 +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.",
+      },
+    },
+  },
+};

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

@@ -1,49 +1,49 @@
-/**
- * IMPORTS
- */
-
-import type { Meta, StoryObj } from "@storybook/react";
-
-// component
-import { ModalChangeActivity } from "../../components/modal-change-activity";
-
-const meta: Meta<typeof ModalChangeActivity> = {
-  title: "Componente/ModalChangeActivity",
-  component: ModalChangeActivity,
-  args: {
-    visible: true,
-    descricao: "Repouso Noturno",
-    onClose: () => {},
-    modalConfirm: () => {},
-  },
-  parameters: {
-    docs: {
-      description: {
-        component: `
-# ModalChangeActivity
-
-Componente de modal para alterar a atividade do usuário.
-
-## Uso
-\`\`\`tsx
-<ModalChangeActivity
-  visible
-  dataRegistro="07/03/2024"
-  descricao="Repouso Noturno"
-  modalConfirm={(data) => console.log(data)}
-  onClose={() => console.log("fechar modal")}
-/>
-\`\`\`
-        `,
-      },
-    },
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  name: "Modal - Alterar Descanso",
-};
+/**
+ * IMPORTS
+ */
+
+import type { Meta, StoryObj } from "@storybook/react";
+
+// component
+import { ModalChangeActivity } from "../../components/modals/modal-change-activity";
+
+const meta: Meta<typeof ModalChangeActivity> = {
+  title: "Componente/ModalChangeActivity",
+  component: ModalChangeActivity,
+  args: {
+    visible: true,
+    descricao: "Repouso Noturno",
+    onClose: () => {},
+    modalConfirm: () => {},
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: `
+# ModalChangeActivity
+
+Componente de modal para alterar a atividade do usuário.
+
+## Uso
+\`\`\`tsx
+<ModalChangeActivity
+  visible
+  dataRegistro="07/03/2024"
+  descricao="Repouso Noturno"
+  modalConfirm={(data) => console.log(data)}
+  onClose={() => console.log("fechar modal")}
+/>
+\`\`\`
+        `,
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  name: "Modal - Alterar Descanso",
+};