Choose

import { createStaticProvider, launch } from "@tooee/choose";

const picked = await launch({
  contentProvider: createStaticProvider([
    { description: "pre-release checks", text: "staging", value: "https://staging.example.com" },
    { description: "live traffic", text: "production", value: "https://example.com" },
  ]),
  options: { prompt: "Deploy target" },
});
if (picked === null) {
  process.exit(1);
}
process.stdout.write(`${picked.items[0].value}\n`);

import { $ } from "bun";
import { launch } from "@tooee/choose";
import type { ChooseItem } from "@tooee/choose";

const scriptProvider = {
  async load(): Promise<ChooseItem[]> {
    const pkg: { scripts?: Record<string, string> } = await Bun.file("package.json").json();
    return Object.entries(pkg.scripts ?? {}).map(([name, command]) => ({
      description: command,
      text: name,
    }));
  },
};

const picked = await launch({
  contentProvider: scriptProvider,
  options: { prompt: "Run a script" },
});
if (picked === null) {
  process.exit(1);
}
await $`bun run ${picked.items[0].text}`;

import { createStaticProvider, launch } from "@tooee/choose";

const picked = await launch({
  actions: [
    {
      handler: (ctx) => {
        const item = ctx.choose?.activeItem;
        if (item !== undefined) {
          ctx.toast?.toast({ level: "info", message: item.description ?? item.text });
        }
      },
      hotkey: "ctrl+d",
      id: "describe",
      modes: ["insert", "cursor"],
      title: "Describe item",
    },
  ],
  contentProvider: createStaticProvider([
    { description: "Runs every test file", text: "test" },
    { description: "Typechecks every package", text: "check" },
  ]),
  options: { prompt: "Task" },
});

import { useState } from "react";
import type { ReactNode } from "react";
import { useChooseDialog } from "@tooee/choose";
import { useCommand } from "@tooee/commands";
import { AppLayout } from "@tooee/layout";
import { launchCli, useQuitCommand } from "@tooee/shell";

interface Branch {
  name: string;
  upstream?: string;
}

const branches: Branch[] = [
  { name: "main", upstream: "origin/main" },
  { name: "develop", upstream: "origin/develop" },
  { name: "spike-panels" },
];

const BranchPicker = function BranchPicker(): ReactNode {
  const choose = useChooseDialog<Branch>();
  const [current, setCurrent] = useState<Branch>(branches[0]);
  useQuitCommand();
  useCommand({
    handler: async () => {
      const branch = await choose.open({
        items: branches,
        prompt: "Switch branch",
        toItem: (item) => ({ description: item.upstream, text: item.name }),
      });
      if (branch !== null) {
        setCurrent(branch);
      }
    },
    hotkey: "b",
    id: "branch.switch",
    modes: ["cursor"],
    title: "Switch branch",
  });

  return (
    <AppLayout
      titleBar={{ title: "Branches" }}
      statusBar={{ items: [{ label: "", value: "b switch  q quit" }] }}
    >
      <box paddingLeft={1}>
        <text content={`current: ${current.name}`} />
      </box>
    </AppLayout>
  );
};

await launchCli(<BranchPicker />);

import { useState } from "react";
import type { ReactNode } from "react";
import { ChooseFilter, ChooseList, ChoosePanel, useChoose } from "@tooee/choose";
import type { ChooseItem } from "@tooee/choose";
import { AppLayout } from "@tooee/layout";
import { Panel, PanelGroup } from "@tooee/panels";
import { launchCli, useQuitCommand } from "@tooee/shell";

const streams: ChooseItem[] = [
  { description: "3 open tasks", text: "alpha" },
  { description: "idle", text: "beta" },
  { description: "1 open task", text: "gamma" },
];

const StreamPicker = function StreamPicker({
  onPick,
}: {
  onPick: (name: string) => void;
}): ReactNode {
  const choose = useChoose({
    onSubmit: (result) => {
      const [item] = result.items;
      if (item !== undefined) {
        onPick(item.text);
      }
    },
    source: streams,
  });

  return (
    <box style={{ flexShrink: 0, width: 40 }} height="100%">
      <ChoosePanel
        title="Streams"
        filter={<ChooseFilter choose={choose} />}
        inset={{ bottom: 0, left: 0, right: 0, top: 0 }}
      >
        <ChooseList choose={choose} rowClick="submit" />
      </ChoosePanel>
    </box>
  );
};

const Streams = function Streams(): ReactNode {
  const [picked, setPicked] = useState("none");
  useQuitCommand();

  return (
    <AppLayout statusBar={{ items: [{ label: "", value: "Esc then Tab switch panel  q quit" }] }}>
      <box flexDirection="row" style={{ flexGrow: 1 }}>
        <PanelGroup defaultActivePanelId="picker">
          <Panel id="picker" chrome="none" initialMode="insert">
            <StreamPicker onPick={setPicked} />
          </Panel>
          <Panel id="detail" title="Detail" style={{ flexGrow: 1 }}>
            <box paddingLeft={1}>
              <text content={`picked: ${picked}`} />
            </box>
          </Panel>
        </PanelGroup>
      </box>
    </AppLayout>
  );
};

await launchCli(<Streams />);