Checklist

When a group works through a fixed list together, such as the tasks for a launch day, a checklist block lets anyone tick items off and shows how far along the list is.

src/app.ts

import { createReintersectApp } from "@reintersect/sdk/app";
import { checklist } from "@reintersect/sdk/recipes";

export const LaunchChecklist = checklist({ type: "launch-checklist", title: "Launch checklist" });

export const app = createReintersectApp({ name: "Launches" }).addBlock(LaunchChecklist);

export const launchDay = LaunchChecklist.insert({
  title: "Launch day",
  items: [
    { id: "docs", label: "Docs published" },
    { id: "blog", label: "Blog post scheduled" },
    { id: "support", label: "Support briefed" },
  ],
});

Props, state and actions

Props are { title, items }, with 1 to 25 items of { id, label } (ids 1 to 64 characters). State is { done: string[] }, the ids of checked items, starting empty.

Action	Behaviour
`toggle`	Takes `{ id }` and checks or unchecks that item. An unknown id returns a notice.
`reset`	Destructive. Clears every checked item.

Each item is a row with an icon button, labelled from markDone or undo. The recipe shortens a long item name in that label to fit the 32-character limit on button labels. Reintersect writes the progress bar’s text, such as “2 of 3”, so progress only feeds the block summary. When every item is checked, the block shows a finished message. Checked state is shared: one member checking an item checks it for everyone.

Labels

progress, markDone, undo, complete, reset, confirmTitle, unknownItem.

Catalog

Recipes

Props, state and actions

Labels

​Props, state and actions

​Labels

Props, state and actions

Labels