react-native-exp-fig 0.1.44 → 2.0.1

package/src/stories/card-driver-data/card-driver-data.stories.tsx

@@ -1,73 +0,0 @@
-/**
- * IMPORTS
- */
-import type { StoryObj, Meta } from "@storybook/react";
-
-// component
-import CardDriverData from "../../components/card-driver-data";
-
-const meta: Meta<typeof CardDriverData> = {
-  title: "componente/CardDriverData",
-  component: CardDriverData,
-  args: {
-    isOpen: true,
-    backgroundColor: "#F2F2F2",
-    veiculo: {
-      placa: "MG-0934-8333",
-      tipo: "04 EIXOS",
-    },
-  },
-  parameters: {
-    docs: { disable: true },
-    previewTabs: {
-      "storybook/docs/panel": { hidden: true },
-      canvas: { hidden: true },
-    },
-    notes: `
-# CardDriverData
-
-Componente responsável por exibir os dados do veículo a ser carregado,
-com comportamento expansível (aberto / fechado).
-
-### Exemplo de uso:
-\`\`\`tsx
-<CardDriverData
-  isOpen={true}
-  backgroundColor={"#F2F2F2"}
-  veiculo={{
-    placa: "MG-0934-8333",
-    tipo: "04 EIXOS",
-  }}
-/>
-\`\`\`
-`,
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const CardDriverDataOpen: Story = {
-  name: "card-driver-data-open",
-  args: {
-    isOpen: true,
-    backgroundColor: "#F2F2F2",
-    veiculo: {
-      placa: "MG-0934-8333",
-      tipo: "04 EIXOS",
-    },
-  },
-};
-
-export const CardDriverDataClosed: Story = {
-  name: "card-driver-data-closed",
-  args: {
-    isOpen: false,
-    backgroundColor: "#F2F2F2",
-    veiculo: {
-      placa: "MG-0934-8333",
-      tipo: "04 EIXOS",
-    },
-  },
-};

package/src/stories/document-carga-info/document-carga-info.stories.tsx

@@ -1,72 +0,0 @@
-/**
- * IMPORTS
- */
-import type { Meta, StoryObj } from "@storybook/react";
-
-// component
-import DocumentCargaInfo from "../../components/document-carga-info";
-
-const meta: Meta<typeof DocumentCargaInfo> = {
-  title: "componente/DocumentCargaInfo",
-  component: DocumentCargaInfo,
-  args: {
-    title: "Documento de carga",
-    numberDocument: "123456789",
-    linkDocument: "https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf",
-    isAlert: false,
-    errorMessage: "",
-  },
-  parameters: {
-    docs: { disable: true },
-    previewTabs: {
-      "storybook/docs/panel": { hidden: true },
-      canvas: { hidden: true },
-    },
-    notes: `
-# DocumentCargaInfo
-
-Componente responsável por exibir informações de um documento de carga
-e permitir a abertura do PDF associado.
-
-Exemplo de uso:
-
-\`\`\`tsx
-<DocumentCargaInfo
-  title="Documento de carga"
-  numberDocument="123456789"
-  linkDocument="https://exemplo.com/documento.pdf"
-  isAlert={false}
-/>
-\`\`\`
-`,
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-
-export const Default: Story = {
-  name: "document-carga-info-default",
-  args: {
-    title: "Documento de carga",
-    numberDocument: "123456789",
-    linkDocument:
-      "https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf",
-    isAlert: false,
-  },
-};
-
-export const WithAlert: Story = {
-  name: "document-carga-info-alert",
-  args: {
-    title: "Documento de carga",
-    numberDocument: "123456789",
-    linkDocument:
-      "https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf",
-    isAlert: true,
-    errorMessage:
-      "Documento indisponível no momento. Verifique com o setor responsável.",
-  },
-};

package/src/stories/driver-journey-info/driver-journey-info.stories.tsx

@@ -1,79 +0,0 @@
-/**
- * IMPORTS
- */
-import type { StoryObj, Meta } from "@storybook/react";
-
-// component
-import DriverJourneyInfo from "../../components/driver-journey-info";
-
-const meta: Meta<typeof DriverJourneyInfo> = {
-  title: "componente/DriverJourneyInfo",
-  component: DriverJourneyInfo,
-  args: {
-    backgroundColor: "#F2F2F2",
-    motorista: {
-      nome: "João da Silva",
-      contato: "(31) 9 8213-2422",
-      posicao: "Usiminas Ipatinga - MG",
-      previsao_chegada: "10/03/2025 14:30",
-    },
-  },
-  parameters: {
-    docs: { disable: true },
-    previewTabs: {
-      "storybook/docs/panel": { hidden: true },
-      canvas: { hidden: true },
-    },
-    notes: `
-# DriverJourneyInfo
-
-Componente responsável por exibir as informações da jornada do motorista,
-com comportamento expansível (abrir / fechar).
-
-### Exemplo de uso:
-\`\`\`tsx
-<DriverJourneyInfo
-  backgroundColor={"#F2F2F2"}
-  motorista={{
-    nome: "João da Silva",
-    contato: "(31) 9 8213-2422",
-    posicao: "Usiminas Ipatinga - MG",
-    previsao_chegada: "10/03/2025 14:30",
-  }}
-/>
-\`\`\`
-`,
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const DriverJourneyInfoOpen: Story = {
-  name: "driver-journey-info-open",
-  args: {
-    backgroundColor: "#F2F2F2",
-    motorista: {
-      nome: "João da Silva",
-      contato: "(31) 9 8213-2422",
-      posicao: "Usiminas Ipatinga - MG",
-      previsao_chegada: "10/03/2025 14:30",
-    },
-  },
-};
-
-export const DriverJourneyInfoClosed: Story = {
-  name: "driver-journey-info-closed",
-  args: {
-    // estado inicial fechado pode ser implementado futuramente
-    // caso você queira adicionar isOpen como prop
-    backgroundColor: "#F2F2F2",
-    motorista: {
-      nome: "João da Silva",
-      contato: "(31) 9 8213-2422",
-      posicao: "Usiminas Ipatinga - MG",
-      previsao_chegada: "10/03/2025 14:30",
-    },
-  },
-};

package/src/stories/history-activities-card/history-activities-card.stories.tsx

@@ -1,107 +0,0 @@
-import type { StoryObj, Meta } from "@storybook/react";
-
-import HistoryActivitiesCard from "../../components/history-activities-card";
-import { IMAGES } from "../../common/constants";
-
-const meta: Meta<typeof HistoryActivitiesCard> = {
-  title: "componente/HistoryActivitiesCard",
-  component: HistoryActivitiesCard,
-  args: {
-    name: "João Silva",
-    ciclo: "Ciclo 1",
-    data_start: "08:00",
-    data_end: "17:00",
-    idAtividade: 12345,
-    duration: "9:00m",
-    name_activitie: "Operação de Veículo",
-    referencia: "operacao_veiculo",
-    type_activitie: "Operação Veículo",
-    avatar: IMAGES.IMAGE_ANONIMA,
-  },
-  parameters: {
-    notes: `
-# HistoryActivitiesCard
-
-Este é um componente de Card de histórico de atividades.
-
-## Uso
-
-\`\`\`tsx
-<HistoryActivitiesCard
-  name="João Silva"
-  ciclo="Ciclo 1"
-  data_start="08:00"
-  data_end="17:00"
-  idAtividade={12345}
-  duration="9h 00m"
-  name_activitie="Operação de Veículo"
-  referencia="operacao_veiculo"
-  type_activitie="Operação Veículo"
-  avatar="https://randomuser.me/api/portraits/men/1.jpg"
-/>
-\`\`\`
-`,
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  name: "default",
-};
-
-export const WithoutAvatar: Story = {
-  name: "sem-avatar",
-  args: {
-    avatar: "",
-    name: "Maria Santos",
-  },
-};
-
-export const LongActivity: Story = {
-  name: "atividade-longa",
-  args: {
-    name: "Pedro Oliveira",
-    ciclo: "Ciclo 2",
-    data_start: "06:00",
-    data_end: "22:00",
-    idAtividade: 67890,
-    duration: "16h 00m",
-    name_activitie: "Viagem Longa Distância",
-    referencia: "operacao_veiculo",
-    type_activitie: "Viagem Longa Distância",
-    avatar: "https://randomuser.me/api/portraits/men/2.jpg",
-  },
-};
-
-export const MinimalData: Story = {
-  name: "dados-minimos",
-  args: {
-    name: "Ana Costa",
-    data_start: "08:00",
-    duration: "8h 00m",
-    name_activitie: "Atividade Básica",
-    referencia: "descanso",
-    type_activitie: "Básico",
-    idAtividade: 11111,
-    // Outros campos serão undefined para testar fallbacks
-  },
-};
-
-export const CompleteData: Story = {
-  name: "dados-completos",
-  args: {
-    name: "Carlos Ferreira",
-    ciclo: "Ciclo 3",
-    data_start: "14:30",
-    data_end: "18:45",
-    idAtividade: 54321,
-    duration: "4h 15m",
-    name_activitie: "Manutenção de Equipamentos",
-    referencia: "manutencao",
-    type_activitie: "Manutenção",
-    avatar: "https://randomuser.me/api/portraits/men/3.jpg",
-  },
-};

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

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