create-nodebuilderjs 0.2.0 → 0.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-nodebuilderjs",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Cria um app nodebuilder: bun create nodebuilderjs meu-app",
   "type": "module",
   "license": "MIT",

package/template/README.md

@@ -11,4 +11,22 @@ bun run typecheck  # TypeScript 7
 bun run package    # AppImage, .deb, .rpm e .tar.gz em dist/
 ```
 
+## Estrutura
+
+```
+src/
+  main.tsx             abre a janela: run(() => <App />)
+  App.tsx              layout da tela; cria o estado e o passa aos componentes
+  estado.ts            signals e ações do app (contador, tarefas, histórico)
+  icones.ts            ícones SVG usados pelo app
+  componentes/
+    Contador.tsx       botões e texto reativo
+    Tarefas.tsx        campo de texto, lista com For/Checkbox, Show
+    Atividade.tsx      gráfico (@nodebuilderjs/core/charts) que acompanha o estado
+test/
+  App.test.tsx         testes sem janela: mount + interact (clicar, digitar)
+```
+
+Para apagar o exemplo e começar do zero, deixe só a `<Window>` em `App.tsx`.
+
 Requisitos: Linux com Wayland ou X11, [Bun](https://bun.sh) 1.4+.

package/template/src/App.tsx

@@ -1,24 +1,32 @@
-import { Button, Column, Row, Text, Window, createSignal, theme } from "@nodebuilderjs/core";
+import { Column, Icon, Row, Scroll, Text, Window, theme } from "@nodebuilderjs/core";
+import { Atividade } from "./componentes/Atividade.js";
+import { Contador } from "./componentes/Contador.js";
+import { Tarefas } from "./componentes/Tarefas.js";
+import { criarEstado } from "./estado.js";
+import { brilho } from "./icones.js";
 
 export function App() {
-  const [count, setCount] = createSignal(0);
-  const times = () => `Você clicou ${count()} ${count() === 1 ? "vez" : "vezes"}`;
-
+  const estado = criarEstado();
   return (
-    <Window title="{{title}}" appId="{{appId}}" width={480} height={360}>
-      <Column grow={1} align="center" justify="center" gap={16} padding={24}>
-        <Text fontSize={24} bold>
-          {"{{title}}"}
-        </Text>
-        <Text color={theme.text.secondary}>{times}</Text>
-        <Row gap={8}>
-          <Button label="Zerar" variant="flat" onClick={() => setCount(0)} />
-          <Button label="Clique aqui" variant="primary" onClick={() => setCount((c) => c + 1)} />
+    <Window title="{{title}}" appId="{{appId}}" width={720} height={760}>
+      <Scroll grow={1} padding={20} gap={16}>
+        <Row gap={12} align="center">
+          <Icon svg={brilho} size={32} color={theme.accent.base} />
+          <Column gap={2}>
+            <Text fontSize={22} bold>{"{{title}}"}</Text>
+            <Text color={theme.text.secondary}>Edite src/App.tsx e salve: o bun run dev reabre a janela.</Text>
+          </Column>
+        </Row>
+        <Row gap={16} align="start">
+          <Column grow={1} gap={16}>
+            <Contador estado={estado} />
+            <Atividade estado={estado} />
+          </Column>
+          <Column grow={1}>
+            <Tarefas estado={estado} />
+          </Column>
         </Row>
-        <Text fontSize={12} color={theme.text.secondary}>
-          Edite src/App.tsx e salve: o bun run dev reabre a janela.
-        </Text>
-      </Column>
+      </Scroll>
     </Window>
   );
 }

package/template/src/componentes/Atividade.tsx

@@ -0,0 +1,24 @@
+import { Card, Icon, Row, Text, theme } from "@nodebuilderjs/core";
+import { Area, AreaChart, CartesianGrid, Legend, Line, Tooltip, YAxis } from "@nodebuilderjs/core/charts";
+import type { Estado } from "../estado.js";
+import { grafico } from "../icones.js";
+
+export function Atividade(props: { estado: Estado }) {
+  return (
+    <Card gap={8}>
+      <Row gap={8} align="center" color={theme.text.secondary}>
+        <Icon svg={grafico} size={16} />
+        <Text bold>Atividade</Text>
+      </Row>
+      {/* data é um signal: o gráfico acompanha cada clique e cada tarefa. */}
+      <AreaChart data={props.estado.historico} height={180}>
+        <CartesianGrid vertical={false} strokeDasharray="3 3" />
+        <YAxis />
+        <Area dataKey="cliques" name="Cliques" type="monotone" />
+        <Line dataKey="pendentes" name="Pendentes" stroke="#e5a50a" dot={false} />
+        <Tooltip />
+        <Legend />
+      </AreaChart>
+    </Card>
+  );
+}

package/template/src/componentes/Contador.tsx

@@ -0,0 +1,22 @@
+import { Button, Card, Icon, Row, Text, theme } from "@nodebuilderjs/core";
+import type { Estado } from "../estado.js";
+import { ponteiro } from "../icones.js";
+
+export function Contador(props: { estado: Estado }) {
+  const { cliques, clicar, zerar } = props.estado;
+  // Só funções são reativas: `vezes` é lida pelo Text sempre que `cliques` muda.
+  const vezes = () => `Você clicou ${cliques()} ${cliques() === 1 ? "vez" : "vezes"}`;
+  return (
+    <Card gap={12}>
+      <Row gap={8} align="center" color={theme.text.secondary}>
+        <Icon svg={ponteiro} size={16} />
+        <Text bold>Contador</Text>
+      </Row>
+      <Text fontSize={20}>{vezes}</Text>
+      <Row gap={8}>
+        <Button label="Zerar" variant="flat" onClick={zerar} />
+        <Button label="Clique aqui" variant="primary" onClick={clicar} />
+      </Row>
+    </Card>
+  );
+}

package/template/src/componentes/Tarefas.tsx

@@ -0,0 +1,38 @@
+import { Button, Card, Checkbox, Column, For, Icon, Row, Show, Spacer, Text, TextField, createSignal, theme } from "@nodebuilderjs/core";
+import type { Estado } from "../estado.js";
+import { lista, mais } from "../icones.js";
+
+export function Tarefas(props: { estado: Estado }) {
+  const { tarefas, pendentes, adicionar, limparConcluidas } = props.estado;
+  const [texto, setTexto] = createSignal("");
+  const enviar = () => adicionar(texto()) && setTexto("");
+
+  return (
+    <Card gap={12}>
+      <Row gap={8} align="center" color={theme.text.secondary}>
+        <Icon svg={lista} size={16} />
+        <Text bold>Tarefas</Text>
+        <Spacer />
+        <Text fontSize={12}>{() => `${pendentes()} ${pendentes() === 1 ? "pendente" : "pendentes"}`}</Text>
+      </Row>
+      <Row gap={8}>
+        <TextField grow={1} value={texto} onInput={setTexto} onSubmit={enviar} placeholder="Nova tarefa" />
+        <Button variant="primary" onClick={enviar} disabled={() => !texto().trim()}>
+          <Icon svg={mais} size={16} />
+          <Text>Adicionar</Text>
+        </Button>
+      </Row>
+      <Column gap={8}>
+        {/* For é keyed por referência: cada tarefa mantém seu estado ao reordenar. */}
+        <For each={tarefas} fallback={<Text color={theme.text.secondary}>Nada por aqui.</Text>}>
+          {(t) => <Checkbox checked={t.feita} onChange={t.marcar} label={t.titulo} />}
+        </For>
+      </Column>
+      <Show when={() => tarefas().some((t) => t.feita())}>
+        <Row>
+          <Button label="Limpar concluídas" variant="flat" onClick={limparConcluidas} />
+        </Row>
+      </Show>
+    </Card>
+  );
+}

package/template/src/estado.ts

@@ -0,0 +1,50 @@
+import { createMemo, createSignal } from "@nodebuilderjs/core";
+
+export interface Tarefa {
+  id: number;
+  titulo: string;
+  feita: () => boolean;
+  marcar: (feita: boolean) => void;
+}
+
+/**
+ * O estado do app em um lugar só: signals e ações. Cada <App /> cria o seu (os testes
+ * também), e os componentes o recebem por props.
+ */
+export function criarEstado() {
+  const [cliques, setCliques] = createSignal(0);
+  // Um ponto por mudança, para o gráfico de atividade.
+  const [historico, setHistorico] = createSignal<{ passo: number; cliques: number; pendentes: number }[]>([]);
+  const [tarefas, setTarefas] = createSignal<Tarefa[]>([]);
+  let proximoId = 1;
+
+  const pendentes = createMemo(() => tarefas().filter((t) => !t.feita()).length);
+  const registrar = () =>
+    setHistorico((h) => [...h.slice(-29), { passo: h[h.length - 1]!.passo + 1, cliques: cliques(), pendentes: pendentes() }]);
+
+  const novaTarefa = (titulo: string): Tarefa => {
+    const [feita, setFeita] = createSignal(false);
+    return { id: proximoId++, titulo, feita, marcar: (v) => (setFeita(v), registrar()) };
+  };
+  setTarefas([novaTarefa("Ler o README"), novaTarefa("Criar um componente")]);
+  setHistorico([{ passo: 0, cliques: 0, pendentes: pendentes() }]);
+
+  return {
+    cliques,
+    historico,
+    tarefas,
+    pendentes,
+    clicar: () => (setCliques((c) => c + 1), registrar()),
+    zerar: () => (setCliques(0), registrar()),
+    adicionar: (titulo: string) => {
+      const texto = titulo.trim();
+      if (!texto) return false;
+      setTarefas((ts) => [...ts, novaTarefa(texto)]);
+      registrar();
+      return true;
+    },
+    limparConcluidas: () => (setTarefas((ts) => ts.filter((t) => !t.feita())), registrar()),
+  };
+}
+
+export type Estado = ReturnType<typeof criarEstado>;

package/template/src/icones.ts

@@ -0,0 +1,11 @@
+// Ícones em SVG (desenhados para este template). Para mais ícones, `bun add lucide-static`
+// e `import x from "lucide-static/icons/x.svg" with { type: "text" }`: veja a skill
+// nodebuilder-icones.
+const svg = (corpo: string) =>
+  `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">${corpo}</svg>`;
+
+export const brilho = svg('<path d="M12 3l1.9 5.1L19 10l-5.1 1.9L12 17l-1.9-5.1L5 10l5.1-1.9z"/><path d="M19 15l.8 2.2L22 18l-2.2.8L19 21l-.8-2.2L16 18l2.2-.8z"/>');
+export const mais = svg('<path d="M12 5v14M5 12h14"/>');
+export const lista = svg('<path d="M9 6h11M9 12h11M9 18h11"/><circle cx="4.5" cy="6" r="1"/><circle cx="4.5" cy="12" r="1"/><circle cx="4.5" cy="18" r="1"/>');
+export const grafico = svg('<path d="M4 20V10M10 20V4M16 20v-7M22 20H2"/>');
+export const ponteiro = svg('<path d="M5 3l14 8-6 2-3 6z"/>');

package/template/test/App.test.tsx

@@ -1,14 +1,49 @@
 import { expect, test } from "bun:test";
-import { click, findByText, mount } from "@nodebuilderjs/core/testing";
+import { findAll, findByText, interact, mount } from "@nodebuilderjs/core/testing";
 import { App } from "../src/App.js";
 
+// Os testes rodam sem janela. interact() entrega mouse e teclado como no app de verdade.
+
 test("o botão conta os cliques", () => {
-  const { root } = mount(() => <App />);
+  const { root, relayout } = mount(() => <App />);
+  const ui = interact(root);
   expect(findByText(root, "Você clicou 0 vezes")).toBeDefined();
 
-  click(findByText(root, "Clique aqui")!);
+  ui.press(findByText(root, "Clique aqui")!);
+  ui.release(findByText(root, "Clique aqui")!);
+  relayout();
   expect(findByText(root, "Você clicou 1 vez")).toBeDefined();
 
-  click(findByText(root, "Zerar")!);
+  ui.press(findByText(root, "Zerar")!);
+  ui.release(findByText(root, "Zerar")!);
+  relayout();
   expect(findByText(root, "Você clicou 0 vezes")).toBeDefined();
 });
+
+test("adicionar, concluir e limpar tarefas", () => {
+  const { root, relayout } = mount(() => <App />, { width: 800, height: 900 });
+  const ui = interact(root);
+  const clique = (texto: string) => {
+    const alvo = findByText(root, texto)!;
+    ui.press(alvo);
+    ui.release(alvo);
+    relayout();
+  };
+  expect(findByText(root, "2 pendentes")).toBeDefined();
+
+  // Digita no campo e confirma com Enter; texto vazio não vira tarefa.
+  ui.press(findAll(root, (n) => n.label === "TextField")[0]!);
+  ui.type("Escrever um teste");
+  ui.key("Return");
+  ui.key("Return");
+  relayout();
+  expect(findByText(root, "Escrever um teste")).toBeDefined();
+  expect(findByText(root, "3 pendentes")).toBeDefined();
+
+  clique("Ler o README"); // o texto da tarefa também marca a caixa
+  expect(findByText(root, "2 pendentes")).toBeDefined();
+
+  clique("Limpar concluídas");
+  expect(findByText(root, "Ler o README")).toBeUndefined();
+  expect(findByText(root, "2 pendentes")).toBeDefined();
+});