@vvedantb/ui 0.17.0 → 0.18.0

package/src/kibo/gantt-sidebar.tsx

@@ -0,0 +1,157 @@
+"use client";
+
+import dayjs from "../utils/dayjs";
+import type { FC, ReactNode } from "react";
+import { useCn } from "../ui/ui-config";
+import { CONTROL_RADIUS_CLASS } from "../utils/surface-radius";
+import { useGanttContext, type GanttFeature } from "./gantt-provider";
+
+export type GanttSidebarItemProps = {
+  feature: GanttFeature;
+  onSelectItem?: (id: string) => void;
+  /** Leading slot (e.g. a phase status icon). Falls back to a colour dot. */
+  icon?: ReactNode;
+  /** Trailing slot (e.g. avatars + progress). Falls back to the duration. */
+  meta?: ReactNode;
+  selected?: boolean;
+  className?: string;
+};
+
+export const GanttSidebarItem: FC<GanttSidebarItemProps> = ({
+  feature,
+  onSelectItem,
+  icon,
+  meta,
+  selected,
+  className,
+}) => {
+  const gantt = useGanttContext();
+  const merge = useCn();
+  const tempEndAt =
+    feature.endAt && dayjs(feature.startAt).isSame(dayjs(feature.endAt), "day")
+      ? dayjs(feature.endAt).add(1, "day").toDate()
+      : feature.endAt;
+  const duration = tempEndAt
+    ? dayjs(feature.startAt).from(dayjs(tempEndAt), true)
+    : `${dayjs(feature.startAt).from(dayjs(), true)} so far`;
+
+  const select = () => {
+    gantt.scrollToFeature?.(feature);
+    onSelectItem?.(feature.id);
+  };
+
+  return (
+    // A plain row with a real `<button>` stretched across it, not a
+    // `role="button" tabIndex={0}` div — see `ui/list-row.tsx`, which documents
+    // why the div form needs a hand-written Enter/Space handler and still gets
+    // the role, focus and press semantics wrong. The row keeps its own `relative`
+    // so the overlay is bounded by it.
+    <div
+      className={merge(
+        "relative flex cursor-pointer items-center gap-2.5 px-2.5 text-xs transition-colors hover:bg-surface-secondary/50 has-[button:focus-visible]:ring-2 has-[button:focus-visible]:ring-ring/35",
+        CONTROL_RADIUS_CLASS,
+        selected && "bg-surface-secondary/60 ring-1 ring-inset ring-border",
+        className,
+      )}
+      key={feature.id}
+      style={{ height: "var(--gantt-row-height)" }}
+    >
+      <button
+        type="button"
+        onClick={select}
+        aria-label={feature.name}
+        className="absolute inset-0 z-1 outline-hidden"
+      />
+      {icon ? (
+        <span className="pointer-events-none flex shrink-0 items-center">
+          {icon}
+        </span>
+      ) : (
+        <div
+          className="pointer-events-none h-2 w-2 shrink-0 rounded-full"
+          style={{ backgroundColor: feature.status.color }}
+        />
+      )}
+      <p className="pointer-events-none flex-1 truncate text-left font-medium">
+        {feature.name}
+      </p>
+      {meta ? (
+        <div className="pointer-events-none flex shrink-0 items-center">
+          {meta}
+        </div>
+      ) : (
+        <p className="pointer-events-none text-muted-foreground tabular-nums">
+          {duration}
+        </p>
+      )}
+    </div>
+  );
+};
+
+type GanttSidebarHeaderProps = {
+  title?: string;
+  metaLabel?: string;
+};
+
+export const GanttSidebarHeader: FC<GanttSidebarHeaderProps> = ({
+  title = "Issues",
+  metaLabel = "Duration",
+}) => (
+  <div
+    className="sticky top-0 z-10 flex shrink-0 items-end justify-between gap-2.5 border-b border-border bg-background/95 p-2.5 font-medium text-muted-foreground text-xs backdrop-blur-xs"
+    style={{ height: "var(--gantt-header-height)" }}
+  >
+    <p className="flex-1 truncate text-left">{title}</p>
+    <p className="shrink-0">{metaLabel}</p>
+  </div>
+);
+
+export type GanttSidebarGroupProps = {
+  children: ReactNode;
+  name: string;
+  className?: string;
+};
+
+export const GanttSidebarGroup: FC<GanttSidebarGroupProps> = ({
+  children,
+  name,
+  className,
+}) => (
+  <div className={className}>
+    <p
+      className="w-full truncate p-2.5 text-left font-medium text-muted-foreground text-xs"
+      style={{ height: "var(--gantt-row-height)" }}
+    >
+      {name}
+    </p>
+    <div>{children}</div>
+  </div>
+);
+
+export type GanttSidebarProps = {
+  children: ReactNode;
+  className?: string;
+  headerTitle?: string;
+  headerMeta?: string;
+};
+
+export const GanttSidebar: FC<GanttSidebarProps> = ({
+  children,
+  className,
+  headerTitle,
+  headerMeta,
+}) => {
+  const merge = useCn();
+  return (
+    <div
+      className={merge(
+        "sticky left-0 z-30 h-max min-h-full overflow-clip border-r border-border bg-background/95 backdrop-blur-md",
+        className,
+      )}
+      data-roadmap-ui="gantt-sidebar"
+    >
+      <GanttSidebarHeader title={headerTitle} metaLabel={headerMeta} />
+      <div>{children}</div>
+    </div>
+  );
+};

package/src/kibo/gantt-timeline.tsx

@@ -0,0 +1,154 @@
+"use client";
+
+import dayjs from "../utils/dayjs";
+import type { FC, ReactNode } from "react";
+import { useId, useMemo } from "react";
+import { useCn } from "../ui/ui-config";
+import {
+  useGanttContext,
+  useGanttClasses,
+  getDifferenceIn,
+  calculateInnerOffset,
+} from "./gantt-provider";
+
+export type GanttTimelineProps = {
+  children: ReactNode;
+  className?: string;
+};
+
+export const GanttTimeline: FC<GanttTimelineProps> = ({
+  children,
+  className,
+}) => {
+  const merge = useCn();
+  return (
+    <div
+      className={merge(
+        "relative flex h-full w-max flex-none overflow-clip",
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+};
+
+export type GanttColumnsProps = {
+  columns: number;
+  isColumnSecondary?: (item: number) => boolean;
+  isColumnDivider?: (item: number) => boolean;
+};
+
+export const GanttColumns: FC<GanttColumnsProps> = ({
+  columns,
+  isColumnSecondary,
+  isColumnDivider,
+}) => {
+  const id = useId();
+
+  return (
+    <div
+      className="grid h-full w-full"
+      style={{
+        gridTemplateColumns: `repeat(${columns}, var(--gantt-column-width))`,
+      }}
+    >
+      {Array.from({ length: columns }).map((_, index) => (
+        <GanttColumn
+          index={index}
+          isColumnSecondary={isColumnSecondary}
+          isColumnDivider={isColumnDivider}
+          key={`${id}-${index}`}
+        />
+      ))}
+    </div>
+  );
+};
+
+export type GanttColumnProps = {
+  index: number;
+  isColumnSecondary?: (item: number) => boolean;
+  isColumnDivider?: (item: number) => boolean;
+};
+
+export const GanttColumn: FC<GanttColumnProps> = ({
+  index,
+  isColumnSecondary,
+  isColumnDivider,
+}) => {
+  const merge = useCn();
+  return (
+    <div
+      className={merge(
+        "group relative h-full overflow-hidden",
+        isColumnDivider
+          ? isColumnDivider(index)
+            ? "border-l border-border/50"
+            : ""
+          : "border-r border-border/40",
+        isColumnSecondary?.(index) ? "bg-surface-secondary/30" : "",
+      )}
+    />
+  );
+};
+
+export type GanttTodayProps = {
+  className?: string;
+};
+
+export const GanttToday: FC<GanttTodayProps> = ({ className }) => {
+  const gantt = useGanttContext();
+  const classes = useGanttClasses();
+  const merge = useCn();
+  const date = useMemo(() => new Date(), []);
+
+  const differenceIn = useMemo(
+    () => getDifferenceIn(gantt.range),
+    [gantt.range],
+  );
+  const timelineStartDate = useMemo(() => {
+    const firstYear = gantt.timelineData[0]?.year ?? new Date().getFullYear();
+    return new Date(firstYear, 0, 1);
+  }, [gantt.timelineData]);
+
+  const offset = useMemo(
+    () => differenceIn(date, timelineStartDate),
+    [differenceIn, date, timelineStartDate],
+  );
+  const innerOffset = useMemo(
+    () =>
+      calculateInnerOffset(
+        date,
+        gantt.range,
+        (gantt.columnWidth * gantt.zoom) / 100,
+      ),
+    [date, gantt.range, gantt.columnWidth, gantt.zoom],
+  );
+
+  return (
+    <div
+      className="pointer-events-none absolute top-0 left-0 z-20 flex h-full select-none flex-col items-center justify-center overflow-visible"
+      style={{
+        width: 0,
+        transform: `translateX(calc(var(--gantt-column-width) * ${offset} + ${innerOffset}px))`,
+      }}
+    >
+      <div
+        className={merge(
+          classes.today,
+          className,
+        )}
+      >
+        Today
+        {/* Only max-height, not `all`: the pill inherits colour from its
+            parent, so `transition-all` also dragged those along. The height
+            animation relayouts nothing outside the marker, which is absolutely
+            positioned at zero width. */}
+        <span className={classes.todayDate}>
+          {dayjs(date).format("MMM DD, YYYY")}
+        </span>
+      </div>
+      <div className={merge("h-full w-px bg-primary/70", className)} />
+    </div>
+  );
+};

package/src/kibo/index.ts

@@ -0,0 +1,151 @@
+export {
+  GanttProvider,
+  GanttContext,
+  useGanttContext,
+  type GanttProviderProps,
+  type GanttStatus,
+  type GanttFeature,
+  type GanttMarkerProps,
+  type GanttRange,
+  type GanttTimelineData,
+  type GanttContextProps,
+  type GanttConfig,
+} from "./gantt-provider";
+
+export {
+  GanttHeader,
+  GanttContentHeader,
+  type GanttHeaderProps,
+  type GanttContentHeaderProps,
+} from "./gantt-header";
+
+export {
+  GanttTimeline,
+  GanttColumns,
+  GanttColumn,
+  GanttToday,
+  type GanttTimelineProps,
+  type GanttColumnsProps,
+  type GanttColumnProps,
+  type GanttTodayProps,
+} from "./gantt-timeline";
+
+export {
+  GanttSidebar,
+  GanttSidebarHeader,
+  GanttSidebarItem,
+  GanttSidebarGroup,
+  type GanttSidebarProps,
+  type GanttSidebarItemProps,
+  type GanttSidebarGroupProps,
+} from "./gantt-sidebar";
+
+export {
+  ContributionGraph,
+  ContributionGraphBlock,
+  ContributionGraphCalendar,
+  ContributionGraphFooter,
+  ContributionGraphTotalCount,
+  ContributionGraphLegend,
+  type ContributionGraphActivity,
+  type ContributionGraphLabels,
+  type ContributionGraphProps,
+  type ContributionGraphBlockProps,
+  type ContributionGraphCalendarProps,
+  type ContributionGraphFooterProps,
+  type ContributionGraphTotalCountProps,
+  type ContributionGraphLegendProps,
+} from "./contribution-graph";
+
+export {
+  KanbanProvider,
+  KanbanBoard,
+  KanbanHeader,
+  KanbanCards,
+  KanbanCard,
+  useKanbanContext,
+  type KanbanProviderProps,
+  type KanbanBoardProps,
+  type KanbanHeaderProps,
+  type KanbanCardsProps,
+  type KanbanCardProps,
+  type KanbanItem,
+  type KanbanColumnDef,
+  type KanbanConfig,
+} from "./kanban";
+
+export {
+  SortableListProvider,
+  SortableListGroup,
+  SortableListHeader,
+  SortableListItems,
+  SortableListItem,
+  type SortableListProviderProps,
+  type SortableListGroupProps,
+  type SortableListHeaderProps,
+  type SortableListItemsProps,
+  type SortableListItemProps,
+  type SortableListDragEndEvent,
+} from "./list";
+
+export {
+  GanttFeatureList,
+  GanttFeatureListGroup,
+  GanttFeatureRow,
+  GanttFeatureItem,
+  GanttFeatureItemCard,
+  GanttFeatureDragHelper,
+  type GanttFeatureListProps,
+  type GanttFeatureListGroupProps,
+  type GanttFeatureRowProps,
+  type GanttFeatureItemProps,
+  type GanttFeatureItemCardProps,
+  type GanttFeatureDragHelperProps,
+} from "./gantt-features";
+
+export {
+  ThemeSwitcher,
+  type ThemeSwitcherProps,
+  type ThemeSwitcherConfig,
+} from "./theme-switcher";
+
+export {
+  VideoPlayer,
+  VideoPlayerControlBar,
+  VideoPlayerTimeRange,
+  VideoPlayerTimeDisplay,
+  VideoPlayerVolumeRange,
+  VideoPlayerPlayButton,
+  VideoPlayerSeekBackwardButton,
+  VideoPlayerSeekForwardButton,
+  VideoPlayerMuteButton,
+  VideoPlayerPlaybackRateButton,
+  VideoPlayerFullscreenButton,
+  VideoPlayerContent,
+  type VideoPlayerProps,
+  type VideoPlayerControlBarProps,
+  type VideoPlayerTimeRangeProps,
+  type VideoPlayerTimeDisplayProps,
+  type VideoPlayerVolumeRangeProps,
+  type VideoPlayerPlayButtonProps,
+  type VideoPlayerSeekBackwardButtonProps,
+  type VideoPlayerSeekForwardButtonProps,
+  type VideoPlayerMuteButtonProps,
+  type VideoPlayerPlaybackRateButtonProps,
+  type VideoPlayerFullscreenButtonProps,
+  type VideoPlayerContentProps,
+  type VideoPlayerConfig,
+} from "./video-player";
+
+export { AvatarStack, type AvatarStackProps } from "./avatar-stack";
+
+export {
+  LiveCursor,
+  LiveCursorPointer,
+  LiveCursorBody,
+  LiveCursorName,
+  type LiveCursorProps,
+  type LiveCursorPointerProps,
+  type LiveCursorBodyProps,
+  type LiveCursorNameProps,
+} from "./cursor";