create-janux 0.2.0 → 0.2.1

package/template/src/components/TaskBoard.test.ts

@@ -1,38 +0,0 @@
-import { describe, expect, it } from 'bun:test';
-import { createInstance } from 'janux';
-import { TaskBoard } from './TaskBoard';
-
-describe('TaskBoard', () => {
-  it('adds, toggles and counts tasks', async () => {
-    const board = createInstance(TaskBoard);
-
-    await board.intents.add!({ title: 'Ship it' });
-    await board.intents.add!({ title: 'Write tests' });
-    const [first] = board.snapshot().tasks as any[];
-
-    await board.intents.toggle!({ id: first.id });
-    expect((board.snapshot().tasks as any[])[0].done).toBe(true);
-    expect(board.derived.remaining).toBe(1);
-  });
-
-  it('rejects empty titles', () => {
-    const board = createInstance(TaskBoard);
-
-    expect(board.intents.add!({ title: '' })).rejects.toThrow(/below min/);
-  });
-
-  it('clearDone is a proposal for agents — nothing happens until approval', async () => {
-    let proposal: any;
-    const board = createInstance(TaskBoard, { onProposal: (p) => (proposal = p) });
-
-    await board.intents.add!({ title: 'done thing' });
-    await board.intents.toggle!({ id: (board.snapshot().tasks as any[])[0].id });
-
-    const result: any = await board.intents.clearDone!({}, { origin: 'agent' });
-
-    expect(result.status).toBe('proposal');
-    expect(board.snapshot().tasks).toHaveLength(1);
-    await proposal.execute();
-    expect(board.snapshot().tasks).toHaveLength(0);
-  });
-});

package/template/src/components/TaskBoard.tsx

@@ -1,125 +0,0 @@
-import { component, intent, effect, schema, str, bool, int, enums, list } from 'janux';
-import { saveTasks } from '../server/tasks.api';
-import { theme } from '../stores';
-
-const FILTERS = ['all', 'active', 'done'] as const;
-
-function taskId(): string {
-  return `t_${Math.random().toString(36).slice(2, 9)}`;
-}
-
-function visibleTasks(tasks: any[], filter: string): any[] {
-  if (filter === 'active') return tasks.filter((task) => !task.done);
-  if (filter === 'done') return tasks.filter((task) => task.done);
-
-  return tasks;
-}
-
-export const TaskBoard = component({
-  name: 'tasks',
-  description: 'A task board. Agents can add, toggle, filter and (with approval) clear done tasks.',
-
-  state: schema({
-    tasks: list({ id: str(), title: str(), done: bool() }),
-    filter: enums([...FILTERS]),
-  }),
-
-  derived: {
-    remaining: (s: any) => s.tasks.filter((task: any) => !task.done).length,
-  },
-
-  effects: {
-    persist: effect({
-      description: 'Saves tasks to the server after changes settle',
-      when: (s: any) => s.tasks,
-      debounce: '400ms',
-      run: ({ state }: any) => saveTasks({ tasks: state.tasks }).then(() => {}),
-    }),
-  },
-
-  emits: { 'tasks.cleared': schema({ count: int() }) },
-
-  use: { theme },
-
-  intents: {
-    add: intent({
-      description: 'Add a task by title',
-      input: schema({ title: str().min(1) }),
-      run: ({ state, input }: any) => state.tasks.push({ id: taskId(), title: input.title, done: false }),
-    }),
-    toggle: intent({
-      description: 'Toggle a task done/undone by id',
-      input: schema({ id: str() }),
-      run: ({ state, input }: any) => {
-        const task = state.tasks.find((candidate: any) => candidate.id === input.id);
-
-        if (task) task.done = !task.done;
-      },
-    }),
-    remove: intent({
-      description: 'Delete a task by id',
-      input: schema({ id: str() }),
-      run: ({ state, input }: any) => {
-        state.tasks = state.tasks.filter((task: any) => task.id !== input.id);
-      },
-    }),
-    setFilter: intent({
-      description: 'Show all, active or done tasks',
-      input: schema({ filter: enums([...FILTERS]) }),
-      run: ({ state, input }: any) => (state.filter = input.filter),
-    }),
-    clearDone: intent({
-      description: 'Remove every completed task. Destructive — needs approval.',
-      guard: 'confirm',
-      run: ({ state, emit }: any) => {
-        const count = state.tasks.filter((task: any) => task.done).length;
-
-        state.tasks = state.tasks.filter((task: any) => !task.done);
-        emit('tasks.cleared', { count });
-      },
-    }),
-  },
-
-  view: ({ state, derived, intents }: any) => (
-    <section class="board">
-      <header>
-        <h2>Tasks</h2>
-        <span class="count">{derived.remaining} left</span>
-      </header>
-      <form intent={intents.add}>
-        <input name="title" placeholder="What needs doing?" autocomplete="off" />
-        <button type="submit">Add</button>
-      </form>
-      <nav class="filters">
-        {FILTERS.map((filter) => (
-          <button
-            key={filter}
-            class={state.filter === filter ? 'on' : undefined}
-            on={intents.setFilter}
-            data-input={JSON.stringify({ filter })}
-          >
-            {filter}
-          </button>
-        ))}
-      </nav>
-      <ul class="list">
-        {visibleTasks(state.tasks, state.filter).map((task: any) => (
-          <li key={task.id} class={task.done ? 'done' : undefined}>
-            <button class="check" on={intents.toggle} data-input={JSON.stringify({ id: task.id })}>
-              {task.done ? '✓' : ''}
-            </button>
-            <span>{task.title}</span>
-            <button class="x" on={intents.remove} data-input={JSON.stringify({ id: task.id })}>
-              ✕
-            </button>
-          </li>
-        ))}
-      </ul>
-      <footer>
-        <button class="clear" on={intents.clearDone}>
-          Clear done
-        </button>
-      </footer>
-    </section>
-  ),
-});

package/template/src/components/ThemeToggle.tsx

@@ -1,23 +0,0 @@
-import { component, intent } from 'janux';
-import { theme } from '../stores';
-
-/** Second island sharing the theme store — cross-island state, no props. */
-export const ThemeToggle = component({
-  name: 'theme-toggle',
-  description: 'Switches the shared theme between dark and light.',
-
-  use: { theme },
-
-  intents: {
-    toggle: intent({
-      description: 'Toggle dark/light mode',
-      run: ({ use }: any) => use.theme.intents.toggle({}),
-    }),
-  },
-
-  view: ({ use, intents }: any) => (
-    <button class="theme-toggle" on={intents.toggle}>
-      {use.theme.state.mode === 'dark' ? '☀️ Light' : '🌙 Dark'}
-    </button>
-  ),
-});

package/template/src/server/tasks.api.ts

@@ -1,31 +0,0 @@
-import { api } from '@janux/server';
-import { schema, str, bool, int, list } from 'janux';
-
-const TASK_SHAPE = { id: str(), title: str(), done: bool() };
-const saved = new Map<string, unknown[]>();
-
-export const loadTasks = api({
-  description: 'Load the saved task list',
-  output: schema({ tasks: list(TASK_SHAPE) }),
-  run: ({ ctx }) => ({ tasks: (saved.get(String(ctx.userId ?? 'anon')) as any[]) ?? [] }),
-});
-
-export const saveTasks = api({
-  description: 'Persist the task list',
-  input: schema({ tasks: list(TASK_SHAPE) }),
-  run: ({ input, ctx }) => {
-    saved.set(String(ctx.userId ?? 'anon'), input.tasks);
-
-    return { saved: input.tasks.length };
-  },
-});
-
-export const taskStats = api({
-  description: 'Aggregate stats over the saved tasks',
-  output: schema({ total: int(), done: int() }),
-  run: ({ ctx }) => {
-    const tasks = (saved.get(String(ctx.userId ?? 'anon')) as any[]) ?? [];
-
-    return { total: tasks.length, done: tasks.filter((task) => task.done).length };
-  },
-});

package/template/src/stores.ts

@@ -1,17 +0,0 @@
-import { store, intent, schema, enums } from 'janux';
-
-/** Shared theme, projected to agents as store://theme. */
-export const theme = store({
-  name: 'theme',
-  description: 'UI theme shared by every island.',
-  state: schema({ mode: enums(['dark', 'light']).default('dark') }),
-  intents: {
-    toggle: intent({
-      description: 'Switch between dark and light mode',
-      run: ({ state }) => {
-        state.mode = state.mode === 'dark' ? 'light' : 'dark';
-        if (typeof document !== 'undefined') document.documentElement.dataset.theme = state.mode;
-      },
-    }),
-  },
-});