Adds a Simple calendar

package.json

@@ -59,18 +59,21 @@
     "cmdk": "^0.2.0",
     "codemirror": "^6.0.1",
     "d3": "^7.8.5",
+    "date-fns": "^3.6.0",
     "eventemitter3": "^5.0.1",
     "haikunator": "^2.1.2",
     "handsontable": "^14.1.0",
     "hyperformula": "^2.6.2",
     "lodash": "^4.17.21",
     "lorem-ipsum": "^2.0.8",
     "lucide-react": "^0.284.0",
+    "moment": "^2.30.1",
     "next-themes": "^0.2.1",
     "openai": "^4.11.0",
     "query-string": "^8.2.0",
     "react": "^18.2.0",
     "react-arborist": "^3.3.1",
+    "react-big-calendar": "^1.11.2",
     "react-dom": "^18.2.0",
     "react-trello": "^2.2.11",
     "react-usestateref": "^1.0.8",

src/DocExplorer/doctypes.ts

@@ -13,11 +13,13 @@ import { HasPatchworkMetadata } from "@/patchwork/schema";
 import { TextPatch } from "@/patchwork/utils";
 import { Annotation, AnnotationPosition } from "@/patchwork/schema";
 import { KanbanBoardDatatype } from "@/kanban/datatype";
+import { CalendarDatatype } from "@/calendar/datatype";
 import { TinyEssayEditor } from "@/tee/components/TinyEssayEditor";
 import { BotEditor } from "@/bots/BotEditor";
 import { TLDraw } from "@/tldraw/components/TLDraw";
 import { DataGrid } from "@/datagrid/components/DataGrid";
 import { KanbanBoard } from "@/kanban/components/Kanban";
+import { MyCalendar } from "@/calendar/components/Calendar";
 import { DocEditorPropsWithDocType } from "@/patchwork/components/PatchworkDocEditor";
 
 export type CoreDataType<D> = {
@@ -81,6 +83,7 @@ export const docTypes: Record<
   datagrid: DataGridDatatype,
   bot: EssayEditingBotDatatype,
   kanban: KanbanBoardDatatype,
+  calendar: CalendarDatatype,
 } as const;
 
 export type DocType = keyof typeof docTypes;
@@ -100,6 +103,7 @@ export const toolsForDocTypes: Record<
   tldraw: [TLDraw],
   datagrid: [DataGrid],
   kanban: [KanbanBoard],
+  calendar: [MyCalendar],
 };
 
 export interface DocEditorProps<T, V> {

src/calendar/components/Calendar.tsx

@@ -0,0 +1,96 @@
+import { uuid } from '@automerge/automerge'
+import * as A from "@automerge/automerge/next";
+
+import { CalendarDoc, CalendarDocAnchor, CalendarDatatype, Event } from "../datatype";
+
+import moment from 'moment';
+import { Calendar, Views, DateLocalizer, momentLocalizer } from 'react-big-calendar';
+import withDragAndDrop, { withDragAndDropProps } from 'react-big-calendar/lib/addons/dragAndDrop'
+import 'react-big-calendar/lib/addons/dragAndDrop/styles.css'
+import 'react-big-calendar/lib/css/react-big-calendar.css';
+
+import React, { useMemo } from "react";
+import { useDocumentWithActions } from "@/useDocumentWithActions";
+import { DocEditorProps } from "@/DocExplorer/doctypes";
+
+const mLocalizer = momentLocalizer(moment)
+
+const ColoredDateCellWrapper = ({ children }) =>
+React.cloneElement(React.Children.only(children), {
+  style: {
+    backgroundColor: 'lightblue',
+  },
+})
+
+const DnDCalendar = withDragAndDrop(Calendar)
+
+export const MyCalendar = ({
+  docUrl,
+  docHeads,
+}: DocEditorProps<CalendarDocAnchor, string> & { readOnly?: boolean }) => {
+  const [latestDoc, _changeDoc, actions] =
+    useDocumentWithActions<CalendarDoc>(docUrl, CalendarDatatype); // used to trigger re-rendering when the doc loads
+
+  const doc = useMemo(
+    () => (docHeads ? A.view(latestDoc, docHeads) : latestDoc),
+    [latestDoc, docHeads]
+  );
+
+  const defaultDate = useMemo(() => new Date(), [])
+
+  if (!doc) {
+    return null;
+  }
+
+  const onSelectSlot = data => {
+    const title = prompt('What is the title of the new Event?')
+    if (title) {
+      const event: Event = {id: uuid(), title, start: data.start, end: data.end}
+      actions.addEvent({event})
+    }
+  }
+
+  const onEventDrop: withDragAndDropProps['onEventDrop'] = data => {
+    const { event, start, end, isAllDay, resourceId } = data
+    event.start = start
+    event.end = end
+    actions.updateEvent({event})
+  }
+
+  const onDoubleClickEvent = event => {
+    const title = prompt('What is the new title of the new Event? (enter "delete" to delete it)', event.title)
+    if (title) {
+      if (title === 'delete') {
+        actions.deleteEvent({event})
+      } else {
+        event.title = title
+        actions.updateEvent({event})
+      }
+    }
+  }
+
+  const onEventResize: withDragAndDropProps['onEventResize'] = data => {
+    const { event, start, end } = data
+    event.start = start
+    event.end = end
+    actions.updateEvent({event})
+  }
+
+  return (
+    <div className="h-full overflow-auto" style={{height: '100%'}}>
+        <DnDCalendar
+          defaultDate={defaultDate}
+          events={doc.events}
+          localizer={mLocalizer}
+          resizable
+          selectable
+          showMultiDayTimes
+          step={60}
+          onEventDrop={onEventDrop}
+          onEventResize={onEventResize}
+          onSelectSlot={onSelectSlot}
+          onDoubleClickEvent={onDoubleClickEvent}
+        />
+      </div>
+  )
+}

src/calendar/datatype.ts

@@ -0,0 +1,94 @@
+import { DataType } from "@/DocExplorer/doctypes";
+import { uuid } from "@automerge/automerge";
+import { next as A } from "@automerge/automerge";
+import { Calendar } from "lucide-react";
+import {
+  Annotation,
+  HasPatchworkMetadata,
+  initPatchworkMetadata,
+} from "@/patchwork/schema";
+import { ChangeGroup } from "@/patchwork/groupChanges";
+
+export type Event = {
+  id: string;
+  title: string;
+  start: Date;
+  end: Date;
+  allDay?: boolean;
+  // resource?: any;
+};
+
+export type CalendarDocAnchor =
+  | { type: "card"; id: string }
+  | { type: "lane"; id: string };
+
+export type CalendarDoc = {
+  title: string;
+  events: Event[];
+} & HasPatchworkMetadata<never, never>;
+
+// When a copy of the document has been made,
+// update the title so it's more clear which one is the copy vs original.
+export const markCopy = () => {
+  console.error("todo");
+};
+
+const getTitle = (doc: any) => {
+  return doc.title;
+};
+
+export const init = (doc: any) => {
+  doc.title = "Untitled Calendar";
+  doc.events = [];
+
+  initPatchworkMetadata(doc);
+};
+
+const patchesToAnnotations = (
+  doc: CalendarDoc,
+  docBefore: CalendarDoc,
+  patches: A.Patch[]
+) => {
+  return []
+};
+
+const fallbackSummaryForChangeGroup = (
+  changeGroup: ChangeGroup<CalendarDoc>
+) => {
+  return 'something changed...';
+};
+
+const actions = {
+  addEvent: (doc, { event }: { event: Event }) => {
+    doc.events.push({ ...event });
+  },
+  deleteEvent: (doc, { event }: { event: Event }) => {
+    doc.events.splice(
+      doc.events.findIndex((ev) => event.id === ev.id),
+      1
+    );
+  },
+  updateEvent: (doc, { event }: { event: Event }) => {
+    const oldEvent = doc.events.find((ev) => ev.id === event.id);
+    if (event.title != oldEvent.title) { oldEvent.title = event.title }
+    if (event.start != oldEvent.start) { oldEvent.start = event.start }
+    if (event.end != oldEvent.end) { oldEvent.end = event.end }
+    if (event.allDay != oldEvent.allDay) { oldEvent.allDay = event.allDay }
+  },
+};
+
+export const CalendarDatatype: DataType<
+  CalendarDoc,
+  CalendarDocAnchor,
+  undefined
+> = {
+  id: "calendar",
+  name: "Calendar",
+  icon: Calendar,
+  init,
+  getTitle,
+  markCopy,
+  fallbackSummaryForChangeGroup,
+  actions,
+  patchesToAnnotations,
+};

src/calendar/main.tsx

@@ -0,0 +1,46 @@
+import { isValidAutomergeUrl, Repo } from "@automerge/automerge-repo";
+import { BroadcastChannelNetworkAdapter } from "@automerge/automerge-repo-network-broadcastchannel";
+import { BrowserWebSocketClientAdapter } from "@automerge/automerge-repo-network-websocket";
+
+import { IndexedDBStorageAdapter } from "@automerge/automerge-repo-storage-indexeddb";
+import { next as Automerge } from "@automerge/automerge";
+
+import { mount } from "./mount.js";
+import "./index.css";
+import { CalendarDoc } from "./datatype.js";
+
+const SYNC_SERVER_URL =
+  import.meta.env?.VITE_SYNC_SERVER_URL ?? "wss://sync.automerge.org";
+
+const repo = new Repo({
+  network: [
+    new BroadcastChannelNetworkAdapter(),
+    new BrowserWebSocketClientAdapter(SYNC_SERVER_URL),
+  ],
+  storage: new IndexedDBStorageAdapter(),
+});
+
+const rootDocUrl = `${document.location.hash.slice(1)}`;
+let handle;
+if (isValidAutomergeUrl(rootDocUrl)) {
+  handle = repo.find(rootDocUrl);
+} else {
+  handle = repo.create<CalendarDoc>();
+  const { init } = await import("./datatype.js");
+  handle.change(init);
+}
+
+// eslint-disable-next-line
+const docUrl = (document.location.hash = handle.url);
+
+// @ts-expect-error - adding property to window
+window.Automerge = Automerge;
+// @ts-expect-error - adding property to window
+window.repo = repo;
+// @ts-expect-error - adding property to window
+window.handle = handle; // we'll use this later for experimentation
+
+// @ts-expect-error - adding property to window
+window.logoImageUrl = "/assets/logo-favicon-310x310-transparent.png";
+
+mount(document.getElementById("root"), { docUrl });

src/calendar/mount.ts

@@ -0,0 +1,23 @@
+import React from "react";
+import ReactDom from "react-dom/client";
+import { MyCalendar } from "./components/Calendar.js";
+import { RepoContext } from "@automerge/automerge-repo-react-hooks";
+
+export function mount(node, params) {
+  // workaround different conventions for documentUrl
+  if (!params.docUrl && params.documentUrl) {
+    params.docUrl = params.documentUrl;
+  }
+
+  ReactDom.createRoot(node).render(
+    // We get the Automerge Repo from the global window;
+    // this is set by either our standalone entrypoint or trailrunner
+    React.createElement(
+      RepoContext.Provider,
+      // eslint-disable-next-line no-undef
+      // @ts-expect-error - repo is on window
+      { value: repo },
+      React.createElement(MyCalendar, Object.assign({}, params))
+    )
+  );
+}