update react types

arlyon · May 18, 2024 · 0ed75a6 · 0ed75a6
1 parent e76dc76
commit 0ed75a6
Show file tree

Hide file tree

Showing 6 changed files with 73 additions and 34 deletions.
diff --git a/site/app/registry/[...slug]/page.tsx b/site/app/registry/[...slug]/page.tsx
@@ -49,6 +49,7 @@ const getPluginData = async (
     capabilities: ["http-client"],
     homepage: "https://github.com/arlyon/litehouse",
     description: "A real cool plugin!",
+    size: 60345,
   };
 };
 
@@ -66,7 +67,6 @@ export async function generateStaticParams() {
       slug: [page.title, version].filter((x) => x !== undefined),
     })),
   );
-  console.log(results);
   return results;
 }
 

diff --git a/site/bun.lockb b/site/bun.lockb
diff --git a/site/components/github-stars.tsx b/site/components/github-stars.tsx
@@ -4,6 +4,7 @@
  * Documentation: https://v0.dev/docs#integrating-generated-code-into-your-nextjs-app
  */
 
+import { Button } from "@/components/ui/button";
 /** Add fonts into your Next.js project:
 
 import { Inter } from 'next/font/google'
@@ -18,38 +19,46 @@ To read more about using these font, please visit the Next.js documentation:
 - Pages Directory: https://nextjs.org/docs/pages/building-your-application/optimizing/fonts
 **/
 import Link from "next/link";
-import { Button } from "@/components/ui/button";
 import { Suspense } from "react";
 
-export function GithubStars({ url }: { url: string }) {
-  const repoName = url.split("/").slice(-2).join("/");
+export function GithubStars({ url }: { url?: string }) {
+  const repoName = url?.split("/").slice(-2).join("/");
   return (
     <div className="border border-accent bg-secondary px-4 py-3 sm:px-6 flex items-center justify-between">
-      <Suspense fallback={<RepoData url={url} name={repoName} />}>
-        <CommitAndStars url={url} />
-      </Suspense>
+      {url && repoName ? (
+        <Suspense fallback={<RepoData url={url} name={repoName} />}>
+          <CommitAndStars url={url} />
+        </Suspense>
+      ) : (
+        <div className="text-muted-foreground text-sm h-[36px] flex items-center">
+          No source provided
+        </div>
+      )}
     </div>
   );
 }
 
-var units = {
+const units = {
   year: 24 * 60 * 60 * 1000 * 365,
   month: (24 * 60 * 60 * 1000 * 365) / 12,
   day: 24 * 60 * 60 * 1000,
   hour: 60 * 60 * 1000,
   minute: 60 * 1000,
   second: 1000,
-};
+} as const;
 
-var rtf = new Intl.RelativeTimeFormat("en", { numeric: "auto" });
+const rtf = new Intl.RelativeTimeFormat("en", { numeric: "auto" });
 
-var getRelativeTime = (d1: Date, d2 = new Date()) => {
-  var elapsed = d1 - d2;
+const getRelativeTime = (d1: Date, d2 = new Date()) => {
+  // @ts-expect-errors(arlyon)
+  const elapsed = d1 - d2;
 
   // "Math.abs" accounts for both "past" & "future" scenarios
-  for (var u in units)
-    if (Math.abs(elapsed) > units[u] || u == "second")
-      return rtf.format(Math.round(elapsed / units[u]), u);
+  for (const u in units) {
+    const unit = u as keyof typeof units;
+    if (Math.abs(elapsed) > units[unit] || u === "second")
+      return rtf.format(Math.round(elapsed / units[unit]), unit);
+  }
 };
 
 function RepoData({
@@ -92,7 +101,7 @@ function RepoData({
             {stars}
           </div>
         ) : null}
-        <Link href={url + "/stargazers"} target="_blank">
+        <Link href={`${url}/stargazers`} target="_blank">
           <Button size="sm" variant="outline">
             Star
           </Button>
@@ -105,11 +114,11 @@ function RepoData({
 async function CommitAndStars({ url }: { url: string }) {
   const repoName = url.split("/").slice(-2).join("/");
   // fetch github stars from the api for the repo
-  let response = await fetch(`https://api.github.com/repos/${repoName}`, {
+  const response = await fetch(`https://api.github.com/repos/${repoName}`, {
     next: { revalidate: 86400 },
   }).then((res) => res.json());
-  let stars = response.stargazers_count;
-  let commits = await fetch(response.commits_url.replace("{/sha}", ""), {
+  const stars = response.stargazers_count;
+  const commits = await fetch(response.commits_url.replace("{/sha}", ""), {
     next: { revalidate: 86400 },
   }).then((res) => res.json());
 
@@ -124,7 +133,7 @@ async function CommitAndStars({ url }: { url: string }) {
   return <RepoData url={url} name={repoName} commit={commit} stars={stars} />;
 }
 
-function StarIcon(props) {
+function StarIcon(props: React.SVGProps<SVGSVGElement>) {
   return (
     <svg
       {...props}
@@ -138,6 +147,7 @@ function StarIcon(props) {
       strokeLinecap="round"
       strokeLinejoin="round"
     >
+      <title>Star</title>
       <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
     </svg>
   );

diff --git a/site/components/plugin-page.tsx b/site/components/plugin-page.tsx
@@ -24,6 +24,7 @@ To read more about using these font, please visit the Next.js documentation:
 - Pages Directory: https://nextjs.org/docs/pages/building-your-application/optimizing/fonts
 **/
 
+import { GithubStars as GithubBanner } from "@/components/github-stars";
 /** Add border radius CSS variable to your global CSS:
 
 :root {
@@ -38,13 +39,12 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
+import { StarIcon } from "lucide-react";
 import Link from "next/link";
 import type { SVGProps } from "react";
+import { Suspense } from "react";
 import { AddButton } from "./add-button";
 import { CopyBox } from "./copy-box";
-import { Suspense } from "react";
-import { StarIcon } from "lucide-react";
-import { GithubStars as GithubBanner } from "@/components/github-stars";
 
 export type Plugin = {
   title: string;
@@ -61,6 +61,28 @@ export type Plugin = {
   readme?: string;
 };
 
+function formatBytes(bytes: number, decimals = 2) {
+  if (!+bytes) return "0 Bytes";
+
+  const k = 1024;
+  const dm = decimals < 0 ? 0 : decimals;
+  const sizes = [
+    "Bytes",
+    "KiB",
+    "MiB",
+    "GiB",
+    "TiB",
+    "PiB",
+    "EiB",
+    "ZiB",
+    "YiB",
+  ];
+
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+
+  return `${Number.parseFloat((bytes / k ** i).toFixed(dm))} ${sizes[i]}`;
+}
+
 export function PluginPage(
   props: Plugin & {
     versions: { version: string; date: Date; current?: boolean }[];
@@ -71,7 +93,7 @@ export function PluginPage(
 
   const id = `${props.title}@${props.version}`;
   return (
-    <div className="grid grid-cols-2 grid-flow-col grid-rows-[auto_auto] gap-8 py-8">
+    <div className="grid grid-cols-1 md:grid-cols-2 grid-flow-col grid-rows-[auto_auto_auto_auto] md:grid-rows-[auto_auto] gap-8 py-8">
       <header className="flex flex-row justify-between items-end">
         <div className="space-y-2">
           <h2 className="text-2xl font-bold">{props.title}</h2>
@@ -98,6 +120,7 @@ export function PluginPage(
               <Link
                 key={`${props.title}@${v.version}`}
                 href={`/registry/${props.title}/${v.version}`}
+                // @ts-expect-error
                 data-current={v.current}
                 className="flex items-center justify-between hover:underline data-[current=true]:bg-green-100 data-[current=true]:dark:bg-green-900 data-[current=true]:border data-[current=true]:border-green-400 data-[current=true]:dark:border-green-700 -my-1 py-1 -mx-2 px-2 dark:border-gray-800"
               >
@@ -112,12 +135,14 @@ export function PluginPage(
         <div className="space-y-2">
           <h3 className="text-lg font-medium">Details</h3>
           <div className="grid grid-cols-2 gap-4 text-sm">
-            <div className="flex items-center gap-2">
-              <FileIcon className="h-4 w-4" />
-              <span>
-                <span className="font-mono">{props.size}</span>
-              </span>
-            </div>
+            {props.size ? (
+              <div className="flex items-center gap-2">
+                <FileIcon className="h-4 w-4" />
+                <span>
+                  <span className="font-mono">{formatBytes(props.size)}</span>
+                </span>
+              </div>
+            ) : null}
             <div className="flex items-center gap-2">
               <PackageIcon className="h-4 w-4" />
               <span className="font-mono">{props.version}</span>

diff --git a/site/hooks/use-indexed-db.ts b/site/hooks/use-indexed-db.ts
@@ -70,8 +70,8 @@ export const useIndexedDb = <T>(
   const subscribe = useCallback(
     <T>(callback: (db: IDBObjectStore) => IDBRequest<T>): T | undefined => {
       const [value, setValue] = useState<T>();
-      const inflightGen = useRef<number>(); // current generation of inflight request
-      const valueGen = useRef<number>(); // current generation of value
+      const inflightGen = useRef<number>(null); // current generation of inflight request
+      const valueGen = useRef<number>(null); // current generation of value
 
       if (!db) {
         console.log("db not ready");

diff --git a/site/package.json b/site/package.json
@@ -36,12 +36,16 @@
     "@babel/plugin-syntax-jsx": "^7.24.1",
     "@biomejs/biome": "^1.7.3",
     "@types/mdx": "^2.0.13",
-    "@types/react": "^18.3.1",
-    "@types/react-dom": "^18.3.0",
+    "@types/react": "npm:types-react@beta",
+    "@types/react-dom": "npm:types-react-dom@beta",
     "autoprefixer": "^10.4.19",
     "babel-plugin-react-compiler": "0.0.0-experimental-c23de8d-20240515",
     "postcss": "^8.4.38",
     "tailwindcss": "^3.4.3",
     "typescript": "^5.4.5"
+  },
+  "overrides": {
+    "@types/react": "npm:types-react@beta",
+    "@types/react-dom": "npm:types-react-dom@beta"
   }
 }