@borisj74/bv-ds 0.1.8 → 0.1.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@borisj74/bv-ds",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "description": "bv-ds — React component library synced from Figma (Untitled UI v8.0), built on Tailwind CSS",
   "license": "MIT",
   "type": "module",
@@ -39,8 +39,10 @@
     "@tiptap/extension-text-align": ">=2.0.0",
     "@tiptap/react": ">=2.0.0",
     "@tiptap/starter-kit": ">=2.0.0",
+    "date-fns": ">=2.0.0",
     "react": ">=18.0.0",
-    "react-dom": ">=18.0.0"
+    "react-dom": ">=18.0.0",
+    "react-big-calendar": ">=1.8.0"
   },
   "devDependencies": {
     "@borisj74/bv-ds-icons": "^0.1.0",
@@ -54,11 +56,14 @@
     "@tiptap/react": "^3.27.1",
     "@tiptap/starter-kit": "^3.27.1",
     "@types/react": "^18.2.0",
+    "@types/react-big-calendar": "^1.16.3",
     "@types/react-dom": "^18.2.0",
     "autoprefixer": "^10.4.0",
     "clsx": "^2.1.0",
+    "date-fns": "^4.4.0",
     "postcss": "^8.4.0",
     "react": "^18.2.0",
+    "react-big-calendar": "^1.20.0",
     "react-dom": "^18.2.0",
     "recharts": "^2.15.4",
     "storybook": "^8.0.0",

package/src/components/Calendar/Calendar.tsx

@@ -0,0 +1,249 @@
+import { useMemo, useState, useCallback } from "react";
+import {
+  Calendar as BigCalendar,
+  dateFnsLocalizer,
+  type SlotInfo,
+  type View,
+  type NavigateAction,
+} from "react-big-calendar";
+import { format, parse, startOfWeek, getDay, isSameDay } from "date-fns";
+import { enUS } from "date-fns/locale";
+import clsx from "clsx";
+import { ArrowLeft, ArrowRight, Plus } from "@borisj74/bv-ds-icons";
+import { IconBox } from "../../internal/iconBox";
+import { CalendarHeader } from "../CalendarHeader";
+import { CalendarColumnHeader } from "../CalendarColumnHeader";
+import { CalendarEvent, type CalendarEventColor } from "../CalendarEvent";
+import { CalendarViewDropdown, type CalendarView } from "../CalendarViewDropdown";
+
+const localizer = dateFnsLocalizer({
+  format,
+  parse,
+  // Monday-first week, matching the Figma column-header order (Mon…Sun).
+  startOfWeek: (date: Date) => startOfWeek(date, { weekStartsOn: 1 }),
+  getDay,
+  locales: { "en-US": enUS },
+});
+
+/**
+ * Event shape consumed by the `Calendar` composite. Named `CalendarEventData`
+ * (not `CalendarEvent`) to avoid colliding with the `CalendarEvent` chip
+ * component already exported from the primitives.
+ */
+export interface CalendarEventData {
+  id: string | number;
+  title: string;
+  start: Date;
+  end: Date;
+  color?: CalendarEventColor;
+  allDay?: boolean;
+}
+
+export interface CalendarProps {
+  events: CalendarEventData[];
+  defaultView?: CalendarView;
+  defaultDate?: Date;
+  onNavigate?: (date: Date) => void;
+  onView?: (view: CalendarView) => void;
+  onSelectEvent?: (event: CalendarEventData) => void;
+  onSelectSlot?: (slotInfo: SlotInfo) => void;
+  /** Wires the header "Add event" button. */
+  onAddEvent?: () => void;
+  className?: string;
+}
+
+// Structural layout for react-big-calendar's month grid. We deliberately do NOT
+// import rbc's stylesheet — every visible token comes from our classes here +
+// the component overrides below.
+const rbcStructural = clsx(
+  "h-full font-body",
+  "[&_.rbc-month-view]:flex [&_.rbc-month-view]:flex-1 [&_.rbc-month-view]:flex-col [&_.rbc-month-view]:overflow-hidden",
+  "[&_.rbc-month-header]:flex [&_.rbc-month-header]:flex-row",
+  "[&_.rbc-header]:min-w-0 [&_.rbc-header]:flex-1 [&_.rbc-header]:overflow-hidden",
+  "[&_.rbc-month-row]:relative [&_.rbc-month-row]:flex [&_.rbc-month-row]:min-h-[120px] [&_.rbc-month-row]:flex-1 [&_.rbc-month-row]:flex-col [&_.rbc-month-row]:overflow-hidden",
+  "[&_.rbc-row-bg]:absolute [&_.rbc-row-bg]:inset-0 [&_.rbc-row-bg]:flex [&_.rbc-row-bg]:flex-row",
+  "[&_.rbc-day-bg]:min-w-0 [&_.rbc-day-bg]:flex-1 [&_.rbc-day-bg]:border-b [&_.rbc-day-bg]:border-r [&_.rbc-day-bg]:border-border-secondary [&_.rbc-day-bg]:bg-bg-primary",
+  "[&_.rbc-off-range-bg]:!bg-bg-secondary-alt",
+  "[&_.rbc-row-content]:relative [&_.rbc-row-content]:z-[1] [&_.rbc-row-content]:flex [&_.rbc-row-content]:flex-1 [&_.rbc-row-content]:flex-col",
+  "[&_.rbc-row]:flex [&_.rbc-row]:flex-row",
+  "[&_.rbc-date-cell]:min-w-0 [&_.rbc-date-cell]:flex-1",
+  "[&_.rbc-off-range]:opacity-50",
+  "[&_.rbc-row-segment]:min-w-0 [&_.rbc-row-segment]:px-md [&_.rbc-row-segment]:pb-xxs",
+  "[&_.rbc-event]:block [&_.rbc-event]:w-full [&_.rbc-event]:outline-none",
+  "[&_.rbc-show-more]:block [&_.rbc-show-more]:px-md [&_.rbc-show-more]:text-xs [&_.rbc-show-more]:font-semibold [&_.rbc-show-more]:text-utility-neutral-500",
+);
+
+function NavArrow({ dir }: { dir: "left" | "right" }) {
+  return (
+    <IconBox size={20}>{dir === "left" ? <ArrowLeft /> : <ArrowRight />}</IconBox>
+  );
+}
+
+export function Calendar({
+  events,
+  defaultView = "month",
+  defaultDate,
+  onNavigate,
+  onView,
+  onSelectEvent,
+  onSelectSlot,
+  onAddEvent,
+  className,
+}: CalendarProps) {
+  const [date, setDate] = useState<Date>(defaultDate ?? new Date(2027, 0, 1));
+  const [view, setView] = useState<View>(defaultView);
+  const [selected, setSelected] = useState<Date | null>(null);
+
+  const handleNavigate = useCallback(
+    (next: Date) => {
+      setDate(next);
+      onNavigate?.(next);
+    },
+    [onNavigate],
+  );
+
+  const handleView = useCallback(
+    (next: View) => {
+      setView(next);
+      onView?.(next as CalendarView);
+    },
+    [onView],
+  );
+
+  const handleSelectSlot = useCallback(
+    (slot: SlotInfo) => {
+      setSelected(slot.start);
+      onSelectSlot?.(slot);
+    },
+    [onSelectSlot],
+  );
+
+  const components = useMemo(
+    () => ({
+      // Header bar → CalendarHeader primitive + nav/view/add controls.
+      toolbar: (tb: {
+        label: string;
+        onNavigate: (action: NavigateAction) => void;
+        onView: (view: View) => void;
+        view: View;
+      }) => (
+        <div className="border-b border-border-secondary px-3xl py-2xl">
+          <CalendarHeader
+            title={tb.label}
+            actions={
+              <div className="flex items-center gap-lg">
+                <div className="flex items-center overflow-hidden rounded-md border border-border-primary shadow-xs">
+                  <button
+                    type="button"
+                    aria-label="Previous"
+                    onClick={() => tb.onNavigate("PREV")}
+                    className="flex items-center justify-center bg-bg-primary px-[10px] py-md text-fg-quaternary transition-colors hover:bg-bg-primary-hover"
+                  >
+                    <NavArrow dir="left" />
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => tb.onNavigate("TODAY")}
+                    className="border-x border-border-primary bg-bg-primary px-[14px] py-md text-sm font-semibold text-text-secondary transition-colors hover:bg-bg-primary-hover"
+                  >
+                    Today
+                  </button>
+                  <button
+                    type="button"
+                    aria-label="Next"
+                    onClick={() => tb.onNavigate("NEXT")}
+                    className="flex items-center justify-center bg-bg-primary px-[10px] py-md text-fg-quaternary transition-colors hover:bg-bg-primary-hover"
+                  >
+                    <NavArrow dir="right" />
+                  </button>
+                </div>
+                <CalendarViewDropdown
+                  value={tb.view as CalendarView}
+                  onChange={(v) => tb.onView(v)}
+                />
+                {onAddEvent && (
+                  <button
+                    type="button"
+                    onClick={onAddEvent}
+                    className="flex items-center gap-xs rounded-md border-2 border-white/[0.12] bg-bg-brand-solid px-lg py-md text-sm font-semibold text-text-white shadow-skeuomorphic"
+                  >
+                    <span className="opacity-60"><IconBox size={20}><Plus /></IconBox></span>
+                    Add event
+                  </button>
+                )}
+              </div>
+            }
+          />
+        </div>
+      ),
+      month: {
+        // Weekday column header → CalendarColumnHeader primitive.
+        header: ({ label }: { label: string }) => (
+          <div className="flex h-full items-center justify-center border-b border-r border-border-secondary bg-bg-primary p-md">
+            <CalendarColumnHeader weekday={label} date="" />
+          </div>
+        ),
+        // Date-number circle (Figma 7991:81840): default / today / selected.
+        dateHeader: ({ date: cellDate, label }: { date: Date; label: string }) => {
+          const today = isSameDay(cellDate, new Date());
+          const isSel = selected ? isSameDay(cellDate, selected) : false;
+          return (
+            <div className="flex p-md">
+              <span
+                className={clsx(
+                  "flex size-6 items-center justify-center rounded-full text-xs font-semibold",
+                  today
+                    ? "bg-bg-brand-solid text-text-white"
+                    : isSel
+                      ? "bg-bg-secondary text-text-secondary"
+                      : "text-text-secondary",
+                )}
+              >
+                {label}
+              </span>
+            </div>
+          );
+        },
+        // Event chip → CalendarEvent primitive (desktop, filled).
+        event: ({ event }: { event: CalendarEventData }) => (
+          <CalendarEvent
+            title={event.title}
+            time={event.allDay ? undefined : format(event.start, "h:mm a")}
+            color={event.color ?? "brand"}
+            filled
+          />
+        ),
+      },
+    }),
+    [onAddEvent, selected],
+  );
+
+  return (
+    <div
+      className={clsx(
+        "flex w-full flex-col overflow-hidden rounded-xl border border-border-secondary bg-bg-primary shadow-xs",
+        className,
+      )}
+    >
+      <BigCalendar
+        localizer={localizer}
+        events={events}
+        date={date}
+        view={view}
+        onNavigate={handleNavigate}
+        onView={handleView}
+        views={["month", "week", "day"]}
+        selectable
+        popup
+        startAccessor="start"
+        endAccessor="end"
+        onSelectEvent={(e) => onSelectEvent?.(e as CalendarEventData)}
+        onSelectSlot={handleSelectSlot}
+        messages={{ showMore: (total: number) => `${total} more…` }}
+        components={components as never}
+        className={rbcStructural}
+        style={{ height: 800 }}
+      />
+    </div>
+  );
+}

package/src/components/Calendar/index.ts

@@ -0,0 +1,2 @@
+export { Calendar } from "./Calendar";
+export type { CalendarProps, CalendarEventData } from "./Calendar";

package/src/components/TextEditor/TextEditor.tsx

@@ -73,6 +73,19 @@ const proseClass = clsx(
  * surfaces link controls when the caret sits inside a link.
  *
  * Pass `content` as initial HTML and read changes via `onUpdate(html)`.
+ *
+ * Behavioral constraints (confirmed in Batch 38):
+ *
+ * 1. **`content` is initial-only.** It seeds the document on mount; changing it
+ *    afterwards does NOT resync into the editor (TipTap owns its state once
+ *    mounted). For controlled behavior, lift state via `onUpdate(html)` instead
+ *    of feeding `content` back in.
+ *
+ * 2. **The link tooltip is an inline affordance, not a floating BubbleMenu.**
+ *    It renders inside the editor area when the caret is in a link — it is not
+ *    positioned over the selection and pulls in no `@tiptap/extension-bubble-menu`
+ *    dependency. Swap to a real BubbleMenu if positioned-over-selection UX is
+ *    needed.
  */
 export function TextEditor({
   placeholder,

package/src/index.ts

@@ -18,6 +18,7 @@ export * from "./components/ButtonDestructive";
 export * from "./components/ButtonGroup";
 export * from "./components/ButtonGroupSegment";
 export * from "./components/ButtonUtility";
+export * from "./components/Calendar";
 export * from "./components/CalendarCell";
 export * from "./components/CalendarCellDayWeekView";
 export * from "./components/CalendarColumnHeader";