@allbluecn/web-app 0.3.0

package/src/components/kibo-ui/contribution-graph/index.tsx

@@ -0,0 +1,534 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+"use client";
+
+import type { Day as WeekDay } from "date-fns";
+import {
+  differenceInCalendarDays,
+  eachDayOfInterval,
+  formatISO,
+  getDay,
+  getMonth,
+  getYear,
+  nextDay,
+  parseISO,
+  subWeeks,
+} from "date-fns";
+import {
+  type CSSProperties,
+  createContext,
+  Fragment,
+  type HTMLAttributes,
+  type ReactNode,
+  useContext,
+  useMemo,
+} from "react";
+import { cn } from "@/lib/utils";
+
+export type Activity = {
+  date: string;
+  count: number;
+  level: number;
+};
+
+type Week = Array<Activity | undefined>;
+
+export type Labels = {
+  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: Labels = {
+  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: Activity[];
+  weeks: Week[];
+  blockMargin: number;
+  blockRadius: number;
+  blockSize: number;
+  fontSize: number;
+  labels: Labels;
+  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;
+};
+
+const fillHoles = (activities: Activity[]): Activity[] => {
+  if (activities.length === 0) {
+    return [];
+  }
+
+  // Sort activities by date to ensure correct date range
+  const sortedActivities = [...activities].sort((a, b) =>
+    a.date.localeCompare(b.date)
+  );
+
+  const calendar = new Map<string, Activity>(
+    activities.map((a) => [a.date, a])
+  );
+
+  const firstActivity = sortedActivities[0] as Activity;
+  const lastActivity = sortedActivities.at(-1);
+
+  if (!lastActivity) {
+    return [];
+  }
+
+  return eachDayOfInterval({
+    start: parseISO(firstActivity.date),
+    end: parseISO(lastActivity.date),
+  }).map((day) => {
+    const date = formatISO(day, { representation: "date" });
+
+    if (calendar.has(date)) {
+      return calendar.get(date) as Activity;
+    }
+
+    return {
+      date,
+      count: 0,
+      level: 0,
+    };
+  });
+};
+
+const groupByWeeks = (
+  activities: Activity[],
+  weekStart: WeekDay = 0
+): Week[] => {
+  if (activities.length === 0) {
+    return [];
+  }
+
+  const normalizedActivities = fillHoles(activities);
+  const firstActivity = normalizedActivities[0] as Activity;
+  const firstDate = parseISO(firstActivity.date);
+  const firstCalendarDate =
+    getDay(firstDate) === weekStart
+      ? firstDate
+      : subWeeks(nextDay(firstDate, weekStart), 1);
+
+  const paddedActivities = [
+    ...(new Array(differenceInCalendarDays(firstDate, firstCalendarDate)).fill(
+      undefined
+    ) as Activity[]),
+    ...normalizedActivities,
+  ];
+
+  const numberOfWeeks = Math.ceil(paddedActivities.length / 7);
+
+  return new Array(numberOfWeeks)
+    .fill(undefined)
+    .map((_, 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[getMonth(parseISO(firstActivity.date))];
+
+      if (!month) {
+        const monthName = new Date(firstActivity.date).toLocaleString("en-US", {
+          month: "short",
+        });
+        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: Activity[];
+  blockMargin?: number;
+  blockRadius?: number;
+  blockSize?: number;
+  fontSize?: number;
+  labels?: Labels;
+  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,
+  ...props
+}: ContributionGraphProps) => {
+  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 year =
+    data.length > 0
+      ? getYear(parseISO(data[0].date))
+      : 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={cn("flex w-max max-w-full flex-col gap-2", className)}
+        style={{ fontSize, ...style }}
+        {...props}
+      />
+    </ContributionGraphContext.Provider>
+  );
+};
+
+export type ContributionGraphBlockProps = HTMLAttributes<SVGRectElement> & {
+  activity: Activity;
+  dayIndex: number;
+  weekIndex: number;
+};
+
+export const ContributionGraphBlock = ({
+  activity,
+  dayIndex,
+  weekIndex,
+  className,
+  ...props
+}: ContributionGraphBlockProps) => {
+  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={cn(
+        'data-[level="0"]:fill-muted',
+        'data-[level="1"]:fill-muted-foreground/20',
+        'data-[level="2"]:fill-muted-foreground/40',
+        'data-[level="3"]:fill-muted-foreground/60',
+        'data-[level="4"]:fill-muted-foreground/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: Activity;
+    dayIndex: number;
+    weekIndex: number;
+  }) => ReactNode;
+};
+
+export const ContributionGraphCalendar = ({
+  hideMonthLabels = false,
+  className,
+  children,
+  ...props
+}: ContributionGraphCalendarProps) => {
+  const { weeks, width, height, blockSize, blockMargin, labels } =
+    useContributionGraph();
+
+  const monthLabels = useMemo(
+    () => getMonthLabels(weeks, labels.months),
+    [weeks, labels.months]
+  );
+
+  return (
+    <div
+      className={cn("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) => (
+  <div
+    className={cn(
+      "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 { totalCount, year, labels } = useContributionGraph();
+
+  if (children) {
+    return <>{children({ totalCount, year })}</>;
+  }
+
+  return (
+    <div className={cn("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 { labels, maxLevel, blockSize, blockRadius } = useContributionGraph();
+
+  return (
+    <div
+      className={cn("ml-auto flex items-center gap-[3px]", className)}
+      {...props}
+    >
+      <span className="mr-1 text-muted-foreground">
+        {labels.legend?.less || "Less"}
+      </span>
+      {new Array(maxLevel + 1).fill(undefined).map((_, level) =>
+        children ? (
+          <Fragment key={level}>{children({ level })}</Fragment>
+        ) : (
+          <svg height={blockSize} key={level} width={blockSize}>
+            <title>{`${level} contributions`}</title>
+            <rect
+              className={cn(
+                "stroke-[1px] stroke-border",
+                'data-[level="0"]:fill-muted',
+                'data-[level="1"]:fill-muted-foreground/20',
+                'data-[level="2"]:fill-muted-foreground/40',
+                'data-[level="3"]:fill-muted-foreground/60',
+                'data-[level="4"]:fill-muted-foreground/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/components/knowledge/dialog/knowledge-form-dialog.tsx

@@ -0,0 +1,184 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useForm } from "@tanstack/react-form";
+import { useRouter } from "@tanstack/react-router";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { IconPicker } from "@/components/shared/icon-picker";
+import { KNOWLEDGE_ICONS } from "@/components/shared/icon-packs/knowledge";
+import { createKnowledgeFn, updateKnowledgeFn } from "@/server/serverFns/knowledge";
+import { knowledgeFormSchema, type KnowledgeFormValues } from "../schemas/knowledge-form";
+
+interface KnowledgeFormDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  kb?: { id: string; name: string; description: string | null; icon: string };
+  onSuccess?: () => void;
+}
+
+export function KnowledgeFormDialog({ open, onOpenChange, kb, onSuccess }: KnowledgeFormDialogProps) {
+  const { t } = useTranslation('knowledge')
+  const router = useRouter();
+  const isEdit = !!kb;
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+
+  const form = useForm({
+    defaultValues: {
+      name: kb?.name ?? "",
+      description: kb?.description ?? "",
+      icon: kb?.icon ?? "notebook",
+    },
+    validators: [{ run: knowledgeFormSchema as any, triggers: ['change'] }],
+  });
+
+  const handleSubmit = async () => {
+    if (!form.state.values.name.trim()) {
+      setError(t('kbForm.nameRequired'));
+      return;
+    }
+
+    setLoading(true);
+    setError("");
+
+    try {
+      if (isEdit && kb) {
+        await updateKnowledgeFn({
+          data: {
+            id: kb.id,
+            icon: form.state.values.icon,
+            name: form.state.values.name.trim(),
+            description: form.state.values.description.trim() || undefined,
+          },
+        });
+        onOpenChange(false);
+        onSuccess?.();
+        window.dispatchEvent(new CustomEvent("knowledge-updated"));
+      } else {
+        const created = await createKnowledgeFn({
+          data: {
+            name: form.state.values.name.trim(),
+            description: form.state.values.description.trim() || undefined,
+            icon: form.state.values.icon,
+          },
+        });
+        onOpenChange(false);
+        onSuccess?.();
+        window.dispatchEvent(new CustomEvent("knowledge-created"));
+        await router.navigate({ to: '/knowledge/$kbId', params: { kbId: created.id } });
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : t('kbForm.saveFailed'));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleOpenChange = (newOpen: boolean) => {
+    if (newOpen) {
+      form.setFieldValue("icon", kb?.icon ?? "notebook");
+      form.setFieldValue("name", kb?.name ?? "");
+      form.setFieldValue("description", kb?.description ?? "");
+      setError("");
+    }
+    onOpenChange(newOpen);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={handleOpenChange}>
+      <DialogContent className="sm:max-w-200">
+        <DialogHeader className="p-4">
+          <DialogTitle>{isEdit ? t('kbForm.title.edit') : t('kbForm.title.create')}</DialogTitle>
+          <DialogDescription>
+            {isEdit ? t('kbForm.description.edit') : t('kbForm.description.create')}
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4 p-4">
+          <div className="flex flex-col gap-3 mb-20">
+            <form.Field name="icon" children={(field) => (
+              <IconPicker
+                icons={KNOWLEDGE_ICONS}
+                value={field.value ?? "notebook"}
+                onChange={(v) => field.handleChange(v)}
+              />
+            )} />
+          </div>
+
+          <div className="flex flex-col gap-3">
+            <label className="text-sm font-medium ml-2">{t('kbForm.nameLabel')}</label>
+            <form.Field name="name" children={(field) => (
+              <Input
+                value={field.value ?? ""}
+                onChange={(e) => field.handleChange(e.target.value)}
+                onBlur={field.handleBlur}
+                placeholder={t('kbForm.namePlaceholder')}
+                maxLength={50}
+                autoFocus
+                onKeyDown={(e) => {
+                  if (e.key === "Enter" && !e.shiftKey) {
+                    e.preventDefault();
+                    handleSubmit();
+                  }
+                }}
+              />
+            )} />
+          </div>
+
+          <div className="flex flex-col gap-3">
+            <label className="text-sm font-medium ml-2">{t('kbForm.descriptionLabel')}</label>
+            <form.Field name="description" children={(field) => (
+              <Textarea
+                value={field.value ?? ""}
+                onChange={(e) => field.handleChange(e.target.value)}
+                onBlur={field.handleBlur}
+                placeholder={t('kbForm.descriptionPlaceholder')}
+                maxLength={200}
+                rows={2}
+              />
+            )} />
+          </div>
+
+          {error && (
+            <p className="text-sm text-destructive break-words">{error}</p>
+          )}
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={() => handleOpenChange(false)}>
+            {t('kbForm.cancel')}
+          </Button>
+          <Button onClick={handleSubmit} disabled={loading}>
+            {loading ? t('kbForm.saving') : isEdit ? t('kbForm.save') : t('kbForm.create')}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}