create-nodebuilderjs 0.2.1 → 0.2.5

package/template/src/componentes/Atividade.tsx

@@ -1,24 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

@@ -1,38 +0,0 @@
-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

@@ -1,50 +0,0 @@
-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

@@ -1,11 +0,0 @@
-// Í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"/>');