feat: YoloChart in repo pages

components/Repositories/LotteryFactorChart.tsx

@@ -4,6 +4,7 @@ import Skeleton from "react-loading-skeleton";
 import Image from "next/image";
 import Link from "next/link";
 import * as HoverCard from "@radix-ui/react-hover-card";
+import { FaArrowRight, FaRegHandPeace } from "react-icons/fa6";
 import Card from "components/atoms/Card/card";
 import Pill from "components/atoms/Pill/pill";
 import { DayRange } from "components/shared/DayRangePicker";
@@ -21,6 +22,8 @@ type LotteryFactorChartProps = {
   isLoading: boolean;
   error: Error | undefined;
   range: DayRange;
+  uniqueYoloCoders?: Set<string>;
+  yoloBannerOnClick?: () => void;
   showHoverCards?: boolean;
   className?: string;
 };
@@ -30,6 +33,8 @@ export default function LotteryFactorChart({
   isLoading,
   error,
   range,
+  uniqueYoloCoders = new Set<string>(),
+  yoloBannerOnClick,
   showHoverCards,
   className,
 }: LotteryFactorChartProps) {
@@ -129,6 +134,28 @@ export default function LotteryFactorChart({
         </header>
       </section>
 
+      {yoloBannerOnClick && (
+        <button
+          onClick={yoloBannerOnClick}
+          className="flex items-center justify-between w-full text-slate-500 shadow-sm !border !border-slate-300 p-1 gap-2 text-sm rounded-full"
+        >
+          <div className="flex gap-2 items-center">
+            <div className="flex items-center font-medium gap-1 px-2 py-0.5 rounded-2xl bg-light-red-4 text-light-red-11">
+              <FaRegHandPeace />
+              YOLO Coders
+            </div>
+            <p className="block lg:hidden 2xl:block">
+              Pushing commits <span className="xs:hidden sm:inline-block">directly</span> to main
+            </p>
+          </div>
+
+          <div className="hidden xs:flex gap-2 items-center ml-auto mr-3">
+            <p className="hidden sm:inline-block">See more</p>
+            <FaArrowRight className="hidden xs:inline-block" />
+          </div>
+        </button>
+      )}
+
       <section className="w-full px-4 flex flex-col gap-4 text-xs xl:text-sm">
         {isLoading ? (
           <Skeleton height={32} />
@@ -246,8 +273,13 @@ export default function LotteryFactorChart({
                         />
                       </Link>
                     )}
-                    <div>
+                    <div className="flex gap-1 items-center">
                       <h1 className="truncate text-light-slate-12">{name}</h1>
+                      {uniqueYoloCoders.has(name) && (
+                        <button onClick={yoloBannerOnClick}>
+                          <InfoTooltip icon={<FaRegHandPeace />} information="YOLO Coder" />
+                        </button>
+                      )}
                     </div>
                   </div>
                 </td>

components/Repositories/YoloChart.tsx

@@ -0,0 +1,166 @@
+import * as HoverCard from "@radix-ui/react-hover-card";
+import Link from "next/link";
+import { FaArrowLeft, FaRegHandPeace } from "react-icons/fa6";
+import Skeleton from "react-loading-skeleton";
+import SkeletonWrapper from "components/atoms/SkeletonLoader/skeleton-wrapper";
+import Card from "components/atoms/Card/card";
+import Avatar from "components/atoms/Avatar/avatar";
+import HoverCardWrapper from "components/molecules/HoverCardWrapper/hover-card-wrapper";
+import { getAvatarByUsername } from "lib/utils/github";
+import Button from "components/shared/Button/button";
+import ToggleSwitch from "components/atoms/ToggleSwitch/toggle-switch";
+
+type YoloChartProps = {
+  yoloStats: RepositoryYolo | undefined;
+  uniqueYoloCoders: Set<string> | undefined;
+  repository: string;
+  isLoading: boolean;
+  range: number;
+  yoloHideBots: boolean;
+  setYoloHideBots: (yoloHideBots: boolean) => void;
+  backButtonOnClick?: () => void;
+  showHoverCards?: boolean;
+  className?: string;
+};
+
+export default function YoloChart({
+  yoloStats,
+  uniqueYoloCoders,
+  repository,
+  isLoading,
+  range,
+  yoloHideBots,
+  setYoloHideBots,
+  backButtonOnClick,
+  showHoverCards,
+  className,
+}: YoloChartProps) {
+  return (
+    <Card className={`${className ?? ""} flex flex-col gap-4 w-full h-full items-center`}>
+      <div className="flex flex-col gap-2 items-start w-full">
+        {backButtonOnClick && (
+          <Button variant="text" onClick={backButtonOnClick} className="flex gap-2 text-sauced-orange">
+            <FaArrowLeft /> Back
+          </Button>
+        )}
+        <section className="flex flex-col lg:flex-row w-full items-start lg:items-center gap-4 justify-between px-4">
+          <header className="flex w-full justify-between items-center">
+            <div className="flex gap-2 items-center">
+              <FaRegHandPeace className="text-xl" />
+              <h3 className="text-sm font-semibold xl:text-lg text-slate-800">YOLO Coders</h3>
+            </div>
+          </header>
+
+          <aside className="flex gap-2 w-full text-xs items-center justify-end">
+            <p>Hide Bots</p>
+            <ToggleSwitch
+              name="Hide Bots"
+              size="sm"
+              checked={yoloHideBots}
+              handleToggle={() => setYoloHideBots(!yoloHideBots)}
+              ariaLabel="YOLO Coders Hide Bots Toggle"
+            />
+          </aside>
+        </section>
+      </div>
+
+      <section className="w-full px-4 flex flex-col gap-2 text-xs xl:text-sm">
+        {isLoading ? (
+          <Skeleton height={32} />
+        ) : (
+          <p className="text-slate-500">
+            {uniqueYoloCoders && (
+              <>
+                <span className="font-semibold text-black">{`${uniqueYoloCoders.size} `}</span> contributor
+                {uniqueYoloCoders.size > 1 && "s"} {uniqueYoloCoders.size > 1 ? "have" : "has"} pushed{" "}
+                <span className="font-semibold text-black">{yoloStats?.num_yolo_pushed_commits} commits </span>
+                directly to the main branch in the last <span className="font-semibold text-black">{range}</span> days.
+              </>
+            )}
+          </p>
+        )}
+
+        <p className="text-slate-500">
+          <a
+            href="https://opensauced.pizza/docs/welcome/glossary/#yolo-coders"
+            target="_blank"
+            className="text-sauced-orange underline"
+          >
+            Learn more
+          </a>{" "}
+          about why pull requests are a better way to contribute.
+        </p>
+      </section>
+
+      {isLoading ? (
+        <div className="flex flex-col w-full gap-4 px-4">
+          <SkeletonWrapper count={4} height={32} />
+        </div>
+      ) : null}
+
+      {!isLoading && yoloStats ? (
+        <table className="table-fixed divide-y text-xs xl:text-sm text-slate-500 w-full px-4 border-separate border-spacing-y-2">
+          <thead>
+            <tr>
+              <th className="font-normal text-start">Contributor</th>
+              <th className="font-normal text-end w-fit">Sha</th>
+              <th className="font-normal text-end">Pushed</th>
+            </tr>
+          </thead>
+          <tbody className="!text-small truncate [&_tr_td]:border-b-1">
+            {yoloStats.data.slice(0, 5).map(({ actor_login, sha, push_num_commits }) => (
+              <tr key={sha} className="grow items-start">
+                <td className="pt-1 pb-2 pl-2">
+                  {/*
+                    Temporarily copying the DevProfile JSX minus the desktop view to fix this issue https://github.com/open-sauced/app/pull/3373#issuecomment-2112399608
+                  */}
+                  <div className="flex items-center gap-2 text-light-slate-11">
+                    {showHoverCards ? (
+                      <HoverCard.Root>
+                        <Link href={`/u/${actor_login}`} className="rounded-full">
+                          <HoverCard.Trigger>
+                            <Avatar
+                              size={24}
+                              className="xl:w-9 xl:h-9"
+                              isCircle
+                              hasBorder={false}
+                              avatarURL={getAvatarByUsername(actor_login)}
+                            />
+                          </HoverCard.Trigger>
+                        </Link>
+                        <HoverCard.Portal>
+                          <HoverCard.Content sideOffset={5}>
+                            <HoverCardWrapper username={actor_login} />
+                          </HoverCard.Content>
+                        </HoverCard.Portal>
+                      </HoverCard.Root>
+                    ) : (
+                      <Link href={`/u/${actor_login}`} className="rounded-full">
+                        <Avatar
+                          size={24}
+                          className="xl:w-9 xl:h-9"
+                          isCircle
+                          hasBorder={false}
+                          avatarURL={getAvatarByUsername(actor_login)}
+                        />
+                      </Link>
+                    )}
+                    <div>
+                      <h1 className="truncate text-light-slate-12">{actor_login}</h1>
+                    </div>
+                  </div>
+                </td>
+                <td className="text-end w-fit underline">
+                  <a href={`https://github.com/${repository}/commit/${sha}`}>{sha.substring(0, 7)}</a>
+                </td>
+                <td className="text-end pt-1 pb-2 pr-2">
+                  {push_num_commits} commit{push_num_commits > 1 && "s"}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      ) : null}
+    </Card>
+  );
+}

components/shared/InfoTooltip.tsx

@@ -2,14 +2,14 @@ import { useState } from "react";
 import { TooltipTrigger, TooltipPortal, Tooltip, TooltipContent, TooltipArrow } from "@radix-ui/react-tooltip";
 import { HiOutlineInformationCircle } from "react-icons/hi";
 
-export default function InfoTooltip({ information }: { information: string }) {
+export default function InfoTooltip({ information, icon }: { information: string; icon?: React.ReactNode }) {
   const [open, setOpen] = useState(false);
 
   return (
     <Tooltip open={open}>
       <TooltipTrigger asChild>
         <button onMouseOver={() => setOpen(true)} onMouseLeave={() => setOpen(false)} onClick={() => setOpen(!open)}>
-          <HiOutlineInformationCircle className="text-slate-500" />
+          {icon ? icon : <HiOutlineInformationCircle className="text-slate-500" />}
         </button>
       </TooltipTrigger>
       <TooltipPortal>

lib/hooks/api/useRepositoryYolo.ts

@@ -0,0 +1,25 @@
+import useSWR, { Fetcher } from "swr";
+import { publicApiFetcher } from "lib/utils/public-api-fetcher";
+import { DayRange } from "components/shared/DayRangePicker";
+
+export function useRepositoryYolo({
+  repository,
+  range,
+  includeBots,
+}: {
+  repository: string;
+  range: DayRange;
+  includeBots: boolean;
+}) {
+  const { data, error, isLoading, mutate } = useSWR<RepositoryYolo, Error>(
+    `repos/${repository}/yolo?range=${range}&include_bots=${includeBots}`,
+    publicApiFetcher as Fetcher<RepositoryYolo, Error>
+  );
+
+  return {
+    data,
+    error,
+    isLoading,
+    mutate,
+  };
+}

next-types.d.ts

@@ -643,6 +643,17 @@ interface RepositoryRoss {
   }[];
 }
 
+interface RepositoryYolo {
+  num_yolo_pushes: number;
+  num_yolo_pushed_commits: number;
+  data: {
+    actor_login: string;
+    event_time: string;
+    sha: string;
+    push_num_commits: number;
+  }[];
+}
+
 // sourced from open-sauced/api
 
 type ThreadHistoryItem = {