@vvedantb/ui 0.17.1 → 0.18.0

package/src/kibo/contribution-graph.tsx

@@ -0,0 +1,539 @@
+"use client";
+
+import dayjs from "../utils/dayjs";
+import {
+  type CSSProperties,
+  createContext,
+  Fragment,
+  type HTMLAttributes,
+  type ReactNode,
+  useContext,
+  useMemo,
+} from "react";
+import { useCn } from "../ui/ui-config";
+
+export type ContributionGraphActivity = {
+  date: string;
+  count: number;
+  level: number;
+};
+
+type WeekDay = 0 | 1 | 2 | 3 | 4 | 5 | 6;
+
+type Week = Array<ContributionGraphActivity | undefined>;
+
+export type ContributionGraphLabels = {
+  months?: string[];
+  weekdays?: string[];
+  totalCount?: string;
+  legend?: {
+    less?: string;
+    more?: string;
+  };
+};
+
+type MonthLabel = {
+  weekIndex: number;
+  label: string;
+};
+
+const DEFAULT_MONTH_LABELS = [
+  "Jan",
+  "Feb",
+  "Mar",
+  "Apr",
+  "May",
+  "Jun",
+  "Jul",
+  "Aug",
+  "Sep",
+  "Oct",
+  "Nov",
+  "Dec",
+];
+
+const DEFAULT_LABELS: ContributionGraphLabels = {
+  months: DEFAULT_MONTH_LABELS,
+  weekdays: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
+  totalCount: "{{count}} activities in {{year}}",
+  legend: {
+    less: "Less",
+    more: "More",
+  },
+};
+
+type ContributionGraphContextType = {
+  data: ContributionGraphActivity[];
+  weeks: Week[];
+  blockMargin: number;
+  blockRadius: number;
+  blockSize: number;
+  fontSize: number;
+  labels: ContributionGraphLabels;
+  labelHeight: number;
+  maxLevel: number;
+  totalCount: number;
+  weekStart: WeekDay;
+  year: number;
+  width: number;
+  height: number;
+};
+
+const ContributionGraphContext =
+  createContext<ContributionGraphContextType | null>(null);
+
+const useContributionGraph = () => {
+  const context = useContext(ContributionGraphContext);
+
+  if (!context) {
+    throw new Error(
+      "ContributionGraph components must be used within a ContributionGraph",
+    );
+  }
+
+  return context;
+};
+
+type Dayjs = ReturnType<typeof dayjs>;
+
+const eachDayOfInterval = (start: Dayjs, end: Dayjs): Dayjs[] => {
+  const days: Dayjs[] = [];
+  let current = start.startOf("day");
+  const endDay = end.startOf("day");
+  while (current.isBefore(endDay) || current.isSame(endDay, "day")) {
+    days.push(current);
+    current = current.add(1, "day");
+  }
+  return days;
+};
+
+const fillHoles = (
+  activities: ContributionGraphActivity[],
+): ContributionGraphActivity[] => {
+  if (activities.length === 0) {
+    return [];
+  }
+
+  const sortedActivities = [...activities].sort((a, b) =>
+    a.date.localeCompare(b.date),
+  );
+
+  const calendar = new Map<string, ContributionGraphActivity>(
+    activities.map((a) => [a.date, a]),
+  );
+
+  const firstActivity = sortedActivities[0];
+  const lastActivity = sortedActivities.at(-1);
+
+  if (!firstActivity || !lastActivity) {
+    return [];
+  }
+
+  return eachDayOfInterval(
+    dayjs(firstActivity.date),
+    dayjs(lastActivity.date),
+  ).map((day) => {
+    const date = day.format("YYYY-MM-DD");
+
+    const existing = calendar.get(date);
+    if (existing) {
+      return existing;
+    }
+
+    return {
+      date,
+      count: 0,
+      level: 0,
+    };
+  });
+};
+
+const nextDayOfWeek = (date: Dayjs, targetDay: WeekDay): Dayjs => {
+  const currentDay = date.day();
+  const daysUntil = (targetDay - currentDay + 7) % 7 || 7;
+  return date.add(daysUntil, "day");
+};
+
+const groupByWeeks = (
+  activities: ContributionGraphActivity[],
+  weekStart: WeekDay = 0,
+): Week[] => {
+  if (activities.length === 0) {
+    return [];
+  }
+
+  const normalizedActivities = fillHoles(activities);
+  const firstActivity = normalizedActivities[0];
+  if (!firstActivity) {
+    return [];
+  }
+
+  const firstDate = dayjs(firstActivity.date);
+  const firstCalendarDate =
+    firstDate.day() === weekStart
+      ? firstDate
+      : nextDayOfWeek(firstDate, weekStart).subtract(1, "week");
+
+  const paddingDays = firstDate.diff(firstCalendarDate, "day");
+  const paddedActivities: Array<ContributionGraphActivity | undefined> = [
+    ...Array.from<undefined>({ length: paddingDays }),
+    ...normalizedActivities,
+  ];
+
+  const numberOfWeeks = Math.ceil(paddedActivities.length / 7);
+
+  return Array.from({ length: numberOfWeeks }, (_, weekIndex) =>
+    paddedActivities.slice(weekIndex * 7, weekIndex * 7 + 7),
+  );
+};
+
+const getMonthLabels = (
+  weeks: Week[],
+  monthNames: string[] = DEFAULT_MONTH_LABELS,
+): MonthLabel[] => {
+  return weeks
+    .reduce<MonthLabel[]>((labels, week, weekIndex) => {
+      const firstActivity = week.find((activity) => activity !== undefined);
+
+      if (!firstActivity) {
+        throw new Error(
+          `Unexpected error: Week ${weekIndex + 1} is empty: [${week}].`,
+        );
+      }
+
+      const month = monthNames[dayjs(firstActivity.date).month()];
+
+      if (!month) {
+        const monthName = dayjs(firstActivity.date).format("MMM");
+        throw new Error(
+          `Unexpected error: undefined month label for ${monthName}.`,
+        );
+      }
+
+      const prevLabel = labels.at(-1);
+
+      if (weekIndex === 0 || !prevLabel || prevLabel.label !== month) {
+        return labels.concat({ weekIndex, label: month });
+      }
+
+      return labels;
+    }, [])
+    .filter(({ weekIndex }, index, labels) => {
+      const minWeeks = 3;
+
+      if (index === 0) {
+        return labels[1] && labels[1].weekIndex - weekIndex >= minWeeks;
+      }
+
+      if (index === labels.length - 1) {
+        return weeks.slice(weekIndex).length >= minWeeks;
+      }
+
+      return true;
+    });
+};
+
+export type ContributionGraphProps = HTMLAttributes<HTMLDivElement> & {
+  data: ContributionGraphActivity[];
+  blockMargin?: number;
+  blockRadius?: number;
+  blockSize?: number;
+  fontSize?: number;
+  labels?: ContributionGraphLabels;
+  maxLevel?: number;
+  style?: CSSProperties;
+  totalCount?: number;
+  weekStart?: WeekDay;
+  children: ReactNode;
+  className?: string;
+};
+
+export const ContributionGraph = ({
+  data,
+  blockMargin = 4,
+  blockRadius = 2,
+  blockSize = 12,
+  fontSize = 14,
+  labels: labelsProp = undefined,
+  maxLevel: maxLevelProp = 4,
+  style = {},
+  totalCount: totalCountProp = undefined,
+  weekStart = 0,
+  className,
+  children,
+  ...props
+}: ContributionGraphProps) => {
+  const merge = useCn();
+  const maxLevel = Math.max(1, maxLevelProp);
+  const weeks = useMemo(() => groupByWeeks(data, weekStart), [data, weekStart]);
+  const LABEL_MARGIN = 8;
+
+  const labels = { ...DEFAULT_LABELS, ...labelsProp };
+  const labelHeight = fontSize + LABEL_MARGIN;
+
+  const firstActivity = data[0];
+  const year = firstActivity
+    ? dayjs(firstActivity.date).year()
+    : new Date().getFullYear();
+
+  const totalCount =
+    typeof totalCountProp === "number"
+      ? totalCountProp
+      : data.reduce((sum, activity) => sum + activity.count, 0);
+
+  const width = weeks.length * (blockSize + blockMargin) - blockMargin;
+  const height = labelHeight + (blockSize + blockMargin) * 7 - blockMargin;
+
+  if (data.length === 0) {
+    return null;
+  }
+
+  return (
+    <ContributionGraphContext.Provider
+      value={{
+        data,
+        weeks,
+        blockMargin,
+        blockRadius,
+        blockSize,
+        fontSize,
+        labels,
+        labelHeight,
+        maxLevel,
+        totalCount,
+        weekStart,
+        year,
+        width,
+        height,
+      }}
+    >
+      <div
+        className={merge("flex w-max max-w-full flex-col gap-2", className)}
+        style={{ fontSize, ...style }}
+        {...props}
+      >
+        {children}
+      </div>
+    </ContributionGraphContext.Provider>
+  );
+};
+
+export type ContributionGraphBlockProps = HTMLAttributes<SVGRectElement> & {
+  activity: ContributionGraphActivity;
+  dayIndex: number;
+  weekIndex: number;
+};
+
+export const ContributionGraphBlock = ({
+  activity,
+  dayIndex,
+  weekIndex,
+  className,
+  ...props
+}: ContributionGraphBlockProps) => {
+  const merge = useCn();
+  const { blockSize, blockMargin, blockRadius, labelHeight, maxLevel } =
+    useContributionGraph();
+
+  if (activity.level < 0 || activity.level > maxLevel) {
+    throw new RangeError(
+      `Provided activity level ${activity.level} for ${activity.date} is out of range. It must be between 0 and ${maxLevel}.`,
+    );
+  }
+
+  return (
+    <rect
+      className={merge(
+        'data-[level="0"]:fill-surface-secondary',
+        'data-[level="1"]:fill-primary/20',
+        'data-[level="2"]:fill-primary/40',
+        'data-[level="3"]:fill-primary/60',
+        'data-[level="4"]:fill-primary/80',
+        className,
+      )}
+      data-count={activity.count}
+      data-date={activity.date}
+      data-level={activity.level}
+      height={blockSize}
+      rx={blockRadius}
+      ry={blockRadius}
+      width={blockSize}
+      x={(blockSize + blockMargin) * weekIndex}
+      y={labelHeight + (blockSize + blockMargin) * dayIndex}
+      {...props}
+    />
+  );
+};
+
+export type ContributionGraphCalendarProps = Omit<
+  HTMLAttributes<HTMLDivElement>,
+  "children"
+> & {
+  hideMonthLabels?: boolean;
+  className?: string;
+  children: (props: {
+    activity: ContributionGraphActivity;
+    dayIndex: number;
+    weekIndex: number;
+  }) => ReactNode;
+};
+
+export const ContributionGraphCalendar = ({
+  hideMonthLabels = false,
+  className,
+  children,
+  ...props
+}: ContributionGraphCalendarProps) => {
+  const merge = useCn();
+  const { weeks, width, height, blockSize, blockMargin, labels } =
+    useContributionGraph();
+
+  const monthLabels = useMemo(
+    () => getMonthLabels(weeks, labels.months),
+    [weeks, labels.months],
+  );
+
+  return (
+    <div
+      className={merge("max-w-full overflow-x-auto overflow-y-hidden", className)}
+      {...props}
+    >
+      <svg
+        className="block overflow-visible"
+        height={height}
+        viewBox={`0 0 ${width} ${height}`}
+        width={width}
+      >
+        <title>Contribution Graph</title>
+        {!hideMonthLabels && (
+          <g className="fill-current">
+            {monthLabels.map(({ label, weekIndex }) => (
+              <text
+                dominantBaseline="hanging"
+                key={weekIndex}
+                x={(blockSize + blockMargin) * weekIndex}
+              >
+                {label}
+              </text>
+            ))}
+          </g>
+        )}
+        {weeks.map((week, weekIndex) =>
+          week.map((activity, dayIndex) => {
+            if (!activity) {
+              return null;
+            }
+
+            return (
+              <Fragment key={`${weekIndex}-${dayIndex}`}>
+                {children({ activity, dayIndex, weekIndex })}
+              </Fragment>
+            );
+          }),
+        )}
+      </svg>
+    </div>
+  );
+};
+
+export type ContributionGraphFooterProps = HTMLAttributes<HTMLDivElement>;
+
+export const ContributionGraphFooter = ({
+  className,
+  ...props
+}: ContributionGraphFooterProps) => {
+  const merge = useCn();
+  return (
+    <div
+      className={merge(
+        "flex flex-wrap gap-1 whitespace-nowrap sm:gap-x-4",
+        className,
+      )}
+      {...props}
+    />
+  );
+};
+
+export type ContributionGraphTotalCountProps = Omit<
+  HTMLAttributes<HTMLDivElement>,
+  "children"
+> & {
+  children?: (props: { totalCount: number; year: number }) => ReactNode;
+};
+
+export const ContributionGraphTotalCount = ({
+  className,
+  children,
+  ...props
+}: ContributionGraphTotalCountProps) => {
+  const merge = useCn();
+  const { totalCount, year, labels } = useContributionGraph();
+
+  if (children) {
+    return <>{children({ totalCount, year })}</>;
+  }
+
+  return (
+    <div className={merge("text-muted-foreground", className)} {...props}>
+      {labels.totalCount
+        ? labels.totalCount
+            .replace("{{count}}", String(totalCount))
+            .replace("{{year}}", String(year))
+        : `${totalCount} activities in ${year}`}
+    </div>
+  );
+};
+
+export type ContributionGraphLegendProps = Omit<
+  HTMLAttributes<HTMLDivElement>,
+  "children"
+> & {
+  children?: (props: { level: number }) => ReactNode;
+};
+
+export const ContributionGraphLegend = ({
+  className,
+  children,
+  ...props
+}: ContributionGraphLegendProps) => {
+  const merge = useCn();
+  const { labels, maxLevel, blockSize, blockRadius } = useContributionGraph();
+
+  return (
+    <div
+      className={merge("ml-auto flex items-center gap-[3px]", className)}
+      {...props}
+    >
+      <span className="mr-1 text-muted-foreground">
+        {labels.legend?.less || "Less"}
+      </span>
+      {Array.from({ length: maxLevel + 1 }, (_, level) =>
+        children ? (
+          <Fragment key={level}>{children({ level })}</Fragment>
+        ) : (
+          <svg height={blockSize} key={level} width={blockSize}>
+            <title>{`${level} contributions`}</title>
+            <rect
+              className={merge(
+                "stroke-[1px] stroke-border",
+                'data-[level="0"]:fill-surface-secondary',
+                'data-[level="1"]:fill-primary/20',
+                'data-[level="2"]:fill-primary/40',
+                'data-[level="3"]:fill-primary/60',
+                'data-[level="4"]:fill-primary/80',
+              )}
+              data-level={level}
+              height={blockSize}
+              rx={blockRadius}
+              ry={blockRadius}
+              width={blockSize}
+            />
+          </svg>
+        ),
+      )}
+      <span className="ml-1 text-muted-foreground">
+        {labels.legend?.more || "More"}
+      </span>
+    </div>
+  );
+};

package/src/kibo/cursor.tsx

@@ -0,0 +1,72 @@
+import type { HTMLAttributes, SVGProps } from "react";
+import { useCn } from "../ui/ui-config";
+
+export type LiveCursorProps = HTMLAttributes<HTMLSpanElement>;
+
+export const LiveCursor = ({
+  className,
+  children,
+  ...props
+}: LiveCursorProps) => {
+  const merge = useCn();
+  return (
+    <span
+      className={merge("pointer-events-none relative select-none", className)}
+      {...props}
+    >
+      {children}
+    </span>
+  );
+};
+
+export type LiveCursorPointerProps = SVGProps<SVGSVGElement>;
+
+export const LiveCursorPointer = ({
+  className,
+  ...props
+}: LiveCursorPointerProps) => {
+  const merge = useCn();
+  return (
+    <svg
+      aria-hidden="true"
+      className={merge("size-3.5", className)}
+      fill="none"
+      focusable="false"
+      height="20"
+      viewBox="0 0 20 20"
+      width="20"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M19.438 6.716 1.115.05A.832.832 0 0 0 .05 1.116L6.712 19.45a.834.834 0 0 0 1.557.025l3.198-8 7.995-3.2a.833.833 0 0 0 0-1.559h-.024Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export type LiveCursorBodyProps = HTMLAttributes<HTMLSpanElement>;
+
+export const LiveCursorBody = ({
+  children,
+  className,
+  ...props
+}: LiveCursorBodyProps) => {
+  const merge = useCn();
+  return (
+    <span
+      className={merge(
+        "relative ml-3.5 flex flex-col whitespace-nowrap rounded-lg py-1 pr-3 pl-2.5 text-xs",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </span>
+  );
+};
+
+export type LiveCursorNameProps = HTMLAttributes<HTMLSpanElement>;
+
+export const LiveCursorName = (props: LiveCursorNameProps) => <span {...props} />;