@borisj74/bv-ds 0.1.8 → 0.1.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@borisj74/bv-ds",
-  "version": "0.1.8",
+  "version": "0.1.10",
   "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/ComboBox/ComboBox.tsx

@@ -0,0 +1,114 @@
+import { useMemo, useState, type ReactNode } from "react";
+import clsx from "clsx";
+import { ChevronDown } from "@borisj74/bv-ds-icons";
+import { IconBox } from "../../internal/iconBox";
+import { FieldWrapper, boxClasses } from "../InputField/inputFieldShared";
+import { SelectMenuItem } from "../SelectMenuItem";
+
+export interface ComboBoxOption {
+  value: string;
+  label: string;
+  supportingText?: ReactNode;
+}
+
+export interface ComboBoxProps {
+  options: ComboBoxOption[];
+  /** Selected option value (controlled). */
+  value?: string;
+  onChange?: (value: string) => void;
+  /** Fires on every keystroke in the input — wire for async/remote filtering. */
+  onInputChange?: (input: string) => void;
+  placeholder?: string;
+  disabled?: boolean;
+  /** Error styling on the input shell + hint. */
+  error?: boolean;
+  label?: ReactNode;
+  hint?: ReactNode;
+  required?: boolean;
+  className?: string;
+}
+
+/**
+ * Text input with an autocomplete dropdown. Typing filters `options` by label
+ * (case-insensitive, substring); picking a row commits its `value` via
+ * `onChange` and fills the input with that label. A non-matching query shows a
+ * "No results" row. Controlled selection via `value`/`onChange`; raw keystrokes
+ * surface through `onInputChange` for remote filtering.
+ */
+export function ComboBox({
+  options,
+  value,
+  onChange,
+  onInputChange,
+  placeholder = "Search...",
+  disabled = false,
+  error = false,
+  label,
+  hint,
+  required,
+  className,
+}: ComboBoxProps) {
+  const selectedLabel = useMemo(
+    () => options.find((o) => o.value === value)?.label ?? "",
+    [options, value],
+  );
+  const [query, setQuery] = useState(selectedLabel);
+  const [open, setOpen] = useState(false);
+
+  // Reflect external value changes while the field is closed (not mid-typing).
+  const display = open ? query : selectedLabel;
+
+  const filtered = options.filter((o) =>
+    o.label.toLowerCase().includes(query.trim().toLowerCase()),
+  );
+
+  const pick = (o: ComboBoxOption) => {
+    onChange?.(o.value);
+    setQuery(o.label);
+    setOpen(false);
+  };
+
+  return (
+    <FieldWrapper label={label} required={required} hint={hint} destructive={error} className={className}>
+      <div className="relative">
+        <div className={clsx(boxClasses(error), "px-lg py-md", disabled && "cursor-not-allowed bg-bg-secondary opacity-60")}>
+          <input
+            value={display}
+            disabled={disabled}
+            placeholder={placeholder}
+            onFocus={() => setOpen(true)}
+            onBlur={() => setTimeout(() => setOpen(false), 120)}
+            onChange={(e) => {
+              setQuery(e.target.value);
+              setOpen(true);
+              onInputChange?.(e.target.value);
+            }}
+            className="min-w-0 flex-1 bg-transparent text-md text-text-primary outline-none placeholder:text-text-placeholder"
+          />
+          <span className={clsx("text-fg-quaternary transition-transform", open && "rotate-180")}>
+            <IconBox size={16}><ChevronDown /></IconBox>
+          </span>
+        </div>
+
+        {open && !disabled && (
+          <div className="absolute left-0 right-0 top-full z-50 mt-xs flex max-h-[320px] flex-col gap-px overflow-auto rounded-md border border-border-secondary-alt bg-bg-primary p-xs shadow-lg">
+            {filtered.length ? (
+              filtered.map((o) => (
+                <SelectMenuItem
+                  key={o.value}
+                  label={o.label}
+                  supportingText={o.supportingText}
+                  selected={o.value === value}
+                  onMouseDown={(e) => e.preventDefault()}
+                  onClick={() => pick(o)}
+                />
+              ))
+            ) : (
+              <div className="px-md py-lg text-center text-sm text-text-tertiary">No results</div>
+            )}
+          </div>
+        )}
+      </div>
+    </FieldWrapper>
+  );
+}

package/src/components/ComboBox/index.ts

@@ -0,0 +1,2 @@
+export { ComboBox } from "./ComboBox";
+export type { ComboBoxProps, ComboBoxOption } from "./ComboBox";

package/src/components/TagsInputField/TagsInputField.tsx

@@ -1,4 +1,4 @@
-import type { InputHTMLAttributes, ReactNode } from "react";
+import { useState, type InputHTMLAttributes, type KeyboardEvent, type ReactNode } from "react";
 import clsx from "clsx";
 import { FieldWrapper, type InputFieldSize } from "../InputField/inputFieldShared";
 
@@ -10,6 +10,14 @@ export interface TagsInputFieldProps
   tags?: string[];
   /** Remove handler (receives the tag index). Renders a close button per chip. */
   onRemoveTag?: (index: number) => void;
+  /**
+   * Add handler. When supplied, the inner input becomes interactive: Enter or
+   * comma commits the trimmed input text as a new tag; Backspace on an empty
+   * input removes the last chip (via `onRemoveTag`). Empty/duplicate adds are
+   * ignored. Without it the field stays display-only (chips controlled by
+   * `tags`/`onRemoveTag`).
+   */
+  onAddTag?: (tag: string) => void;
   /** `inner` keeps chips inside the field; `outer` shows them below it. */
   variant?: TagsInputVariant;
   size?: InputFieldSize;
@@ -42,6 +50,7 @@ function TagChip({ label, onRemove }: { label: string; onRemove?: () => void })
 export function TagsInputField({
   tags = [],
   onRemoveTag,
+  onAddTag,
   variant = "inner",
   size = "md",
   label,
@@ -52,6 +61,24 @@ export function TagsInputField({
   placeholder = "Add tag",
   ...rest
 }: TagsInputFieldProps) {
+  const [draft, setDraft] = useState("");
+
+  const commit = (raw: string) => {
+    const next = raw.trim();
+    if (!next || tags.includes(next)) return;
+    onAddTag?.(next);
+  };
+
+  const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter" || e.key === ",") {
+      e.preventDefault();
+      commit(draft);
+      setDraft("");
+    } else if (e.key === "Backspace" && draft === "" && tags.length) {
+      onRemoveTag?.(tags.length - 1);
+    }
+  };
+
   const chips = tags.map((t, i) => (
     <TagChip key={i} label={t} onRemove={onRemoveTag ? () => onRemoveTag(i) : undefined} />
   ));
@@ -71,6 +98,13 @@ export function TagsInputField({
         placeholder={placeholder}
         className="min-w-[80px] flex-1 bg-transparent text-md text-text-primary outline-none placeholder:text-text-placeholder"
         {...rest}
+        {...(onAddTag
+          ? {
+              value: draft,
+              onChange: (e) => setDraft(e.target.value),
+              onKeyDown: handleKeyDown,
+            }
+          : {})}
       />
     </div>
   );

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";
@@ -46,6 +47,7 @@ export * from "./components/CommandBarNavigationIcon";
 export * from "./components/CommandDropdownMenuItem";
 export * from "./components/CommandInput";
 export * from "./components/CommandShortcut";
+export * from "./components/ComboBox";
 export * from "./components/ContentDivider";
 export * from "./components/ContentFeatureText";
 export * from "./components/ContentHeading";