dnd-kit Announcements with chalk

announcements.tsx

// This file adds coloring to the announcements to make it easier to read and understand what's going on

import {
  DragCancelEvent,
  DragEndEvent,
  DragMoveEvent,
  DragOverEvent,
  DragStartEvent,
  useDndMonitor,
} from "@dnd-kit/core";
import chalk from "chalk";

// ------ ANNOUNCEMENTS
const log = console.log;

const defaultAnnouncements = {
  onDragStart({ active }: DragStartEvent) {
    const prefix = chalk.green("Start:");
    const activeId = chalk.cyan(active?.id);
    const activeData = chalk.cyan(JSON.stringify(active?.data?.current));
    return log(`${prefix} activeId: ${activeId}, activeData: ${activeData}`);
  },
  onDragMove({ active, over }: DragMoveEvent) {
    const prefix = chalk.yellow("Move:");
    const activeId = chalk.cyan(active?.id);
    const activeData = chalk.cyan(JSON.stringify(active?.data?.current));
    const overId = chalk.yellow(over?.id);
    const overData = chalk.yellow(JSON.stringify(over?.data?.current));
    const nothing = chalk.red("null");

    if (over?.id) {
      return log(
        `${prefix} activeId: ${activeId}, activeData: ${activeData}, overId: ${overId}, overData: ${overData}}`
      );
    }

    log(
      `${prefix} activeId: ${activeId}, activeData: ${activeData} moved over ${nothing}`
    );
  },
  onDragOver({ active, over }: DragOverEvent) {
    const prefix = chalk.hex("#FF8800")("Over:");
    const activeId = chalk.cyan(active?.id);
    const activeData = chalk.cyan(JSON.stringify(active?.data?.current));
    const overId = chalk.yellow(over?.id);
    const overData = chalk.yellow(JSON.stringify(over?.data?.current));
    const nothing = chalk.red("null");

    if (over?.id) {
      return log(
        `${prefix} activeId: ${activeId}, activeData: ${activeData}, overId: ${overId}, overData: ${overData}}`
      );
    }

    log(
      `${prefix} activeId: ${activeId}, activeData: ${activeData} over ${nothing}`
    );
  },
  onDragEnd({ active, over }: DragEndEvent) {
    const prefix = chalk.bgBlack.white("End:");
    const activeId = chalk.cyan(active?.id);
    const activeData = chalk.cyan(JSON.stringify(active?.data?.current));
    const overId = chalk.yellow(over?.id);
    const overData = chalk.yellow(JSON.stringify(over?.data?.current));
    const nothing = chalk.red("null");

    if (over?.id) {
      return log(
        `${prefix} activeId: ${activeId}, activeData: ${activeData}, overId: ${overId}, overData: ${overData}}`
      );
    }

    log(
      `${prefix} activeId: ${activeId}, activeData: ${activeData} dropped over ${nothing}`
    );
  },
  onDragCancel({ active }: DragCancelEvent) {
    const prefix = chalk.red("Cancelled:");
    const activeId = chalk.cyan(active?.id);
    const activeData = chalk.cyan(JSON.stringify(active?.data?.current));

    log(
      `${prefix} activeId: ${activeId}, activeData: ${activeData} cancelled`
    );
  },
};

export function Announcements() {
  useDndMonitor(defaultAnnouncements);
  return null;
}