Merge branch 'v3-main' into create-guild-page

guildxyz · Nov 25, 2024 · 568b1e6 · 568b1e6
2 parents 226b023 + d430064
commit 568b1e6
Show file tree

Hide file tree

Showing 9 changed files with 164 additions and 34 deletions.
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -1,7 +1,7 @@
 import type { Preview } from "@storybook/react";
 import "../src/styles/globals.css";
 
-import { dystopian, inter } from "@/lib/fonts";
+import { dystopian } from "@/lib/fonts";
 import { withThemeByClassName } from "@storybook/addon-themes";
 import { useEffect } from "react";
 
@@ -20,14 +20,12 @@ const preview: Preview = {
         light: "",
         dark: "dark",
       },
-      defaultTheme: "light",
+      defaultTheme: "dark",
     }),
     (storyFn) => {
       useEffect(() => {
         if (typeof document === "undefined") return;
-        document
-          ?.querySelector("body")
-          ?.classList.add(inter.variable, dystopian.variable);
+        document?.querySelector("body")?.classList.add(dystopian.variable);
       }, []);
 
       return storyFn();

diff --git a/package.json b/package.json
@@ -9,7 +9,7 @@
     "start": "next start",
     "type-check": "tsc --pretty --noEmit --incremental false",
     "write-check": "npx @biomejs/biome check --write --unsafe .",
-    "storybook": "storybook dev -p 6006",
+    "storybook": "storybook dev -p 6006 --no-open",
     "build-storybook": "storybook build"
   },
   "dependencies": {
@@ -46,6 +46,7 @@
     "react-hook-form": "^7.53.2",
     "server-only": "^0.0.1",
     "slugify": "^1.6.6",
+    "sonner": "^1.7.0",
     "tailwind-merge": "^2.5.4",
     "tailwindcss-animate": "^1.0.7",
     "vaul": "^1.1.1",

diff --git a/src/app/explorer/components/InfiniteScrollGuilds.tsx b/src/app/explorer/components/InfiniteScrollGuilds.tsx
@@ -43,14 +43,25 @@ export const InfiniteScrollGuilds = () => {
 
   const guilds = data?.pages.flatMap((page) => page.items) || [];
 
+  let statusResponse: string | undefined;
+  if (isFetchingNextPage) {
+    statusResponse = "Loading more...";
+  } else if (!hasNextPage && guilds.length) {
+    statusResponse = "No More Data";
+  } else if (search && !isLoading) {
+    statusResponse = `No results for "${search}"`;
+  } else {
+    statusResponse = "Couldn't load guilds";
+  }
+
   return (
     <section className="grid gap-2">
       <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
         {isLoading
-          ? Array.from({ length: PAGE_SIZE }, (_, i) => (
-              <GuildCardSkeleton key={i} />
-            ))
-          : guilds.map((guild) => <GuildCard key={guild.id} guild={guild} />)}
+          ? Array(PAGE_SIZE).fill(<GuildCardSkeleton />)
+          : guilds.map((guild, _i) => (
+              <GuildCard key={guild.urlName} guild={guild} />
+            ))}
       </div>
       <div
         ref={useCallback(
@@ -61,18 +72,9 @@ export const InfiniteScrollGuilds = () => {
         )}
         aria-hidden
       />
-
-      {guilds.length === 0 && !isLoading && search ? (
-        <p className="mt-6 text-center text-foreground-secondary">
-          `No results for "${search}"`
-        </p>
-      ) : (
-        <p className="mt-6 text-center text-foreground-secondary">
-          {isFetchingNextPage
-            ? "Loading more..."
-            : hasNextPage || "No More Data"}
-        </p>
-      )}
+      <p className="mt-6 text-center text-foreground-secondary">
+        {statusResponse}
+      </p>
     </section>
   );
 };
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,9 +1,11 @@
 import type { Metadata } from "next";
 import "@/styles/globals.css";
 import { Header } from "@/components/Header";
+import { PreloadResources } from "@/components/PreloadResources";
 import { Providers } from "@/components/Providers";
 import { SignInDialog } from "@/components/SignInDialog";
-import { dystopian, inter } from "@/lib/fonts";
+import { Toaster } from "@/components/ui/Toaster";
+import { dystopian } from "@/lib/fonts";
 import { cn } from "lib/cssUtils";
 
 export const metadata: Metadata = {
@@ -23,13 +25,15 @@ const RootLayout = ({
 }>) => {
   return (
     <html lang="en" suppressHydrationWarning>
-      <body className={cn(dystopian.variable, inter.variable)}>
+      <body className={cn(dystopian.variable)}>
+        <PreloadResources />
         <Providers>
           <Header />
           {children}
 
           {/* TODO: maybe load this dynamically? */}
           <SignInDialog />
+          <Toaster />
         </Providers>
       </body>
     </html>

diff --git a/src/components/PreloadResources.tsx b/src/components/PreloadResources.tsx
@@ -0,0 +1,24 @@
+"use client";
+
+import ReactDOM from "react-dom";
+
+export const PreloadResources = () => {
+  ReactDOM.preload(
+    "https://cdn.jsdelivr.net/fontsource/fonts/inter:vf@latest/latin-opsz-normal.woff2",
+    {
+      as: "font",
+      crossOrigin: "",
+      type: "font/woff2",
+      fetchPriority: "high",
+    },
+  );
+  ReactDOM.preload(
+    "https://cdn.jsdelivr.net/fontsource/fonts/inter:vf@latest/latin-opsz-italic.woff2",
+    {
+      as: "font",
+      crossOrigin: "",
+      type: "font/woff2",
+    },
+  );
+  return null;
+};
diff --git a/src/components/ui/Toaster.tsx b/src/components/ui/Toaster.tsx
@@ -0,0 +1,31 @@
+"use client";
+
+import { useTheme } from "next-themes";
+import { Toaster as Sonner } from "sonner";
+
+type ToasterProps = React.ComponentProps<typeof Sonner>;
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme();
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      toastOptions={{
+        classNames: {
+          toast:
+            "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg data-[button]:bg-button-primary-background gap-2 focus-visible:ring-2",
+          description: "group-[.toast]:text-foreground-secondary",
+          actionButton:
+            "group-[.toast]:!bg-button-primary-background group-[.toast]:!text-button-primary-foreground",
+          closeButton:
+            "group-[.toast]:bg-background group-[.toast]:text-foreground group-[.toast]:border-border",
+        },
+      }}
+      {...props}
+    />
+  );
+};
+
+export { Toaster };
diff --git a/src/lib/fonts.ts b/src/lib/fonts.ts
@@ -1,13 +1,5 @@
-import { Inter } from "next/font/google";
 import localFont from "next/font/local";
 
-const inter = Inter({
-  subsets: ["latin"],
-  variable: "--font-inter",
-  fallback: ["sans-serif"],
-  weight: "variable",
-});
-
 const dystopian = localFont({
   src: [
     {
@@ -33,4 +25,4 @@ const dystopian = localFont({
   variable: "--font-dystopian",
 });
 
-export { dystopian, inter };
+export { dystopian };
diff --git a/src/stories/Toast.stories.tsx b/src/stories/Toast.stories.tsx
@@ -0,0 +1,56 @@
+import { Button } from "@/components/ui/Button";
+import { Toaster } from "@/components/ui/Toaster";
+import type { Meta, StoryObj } from "@storybook/react";
+import { toast } from "sonner";
+
+type ToastExampleProps = {
+  title: string;
+  description?: string;
+  action?: boolean;
+  closeButton?: boolean;
+};
+const ToastExample = ({
+  title = "Toast example",
+  description,
+  action,
+  closeButton,
+}: ToastExampleProps) => {
+  return (
+    <>
+      <Button
+        onClick={() =>
+          toast(title, {
+            description,
+            action: action ? (
+              <Button size="xs" className="ml-auto min-w-max">
+                Action
+              </Button>
+            ) : undefined,
+            closeButton,
+          })
+        }
+      >
+        Show toast!
+      </Button>
+      <Toaster />
+    </>
+  );
+};
+
+const meta: Meta<typeof ToastExample> = {
+  title: "Design system/Toast",
+  component: ToastExample,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ToastExample>;
+
+export const Default: Story = {
+  args: {
+    title: "Toast example",
+    description: "",
+    action: false,
+    closeButton: false,
+  },
+};
diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -1,3 +1,23 @@
+/* inter-latin-wght-normal */
+@font-face {
+  font-family: 'Inter Variable';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 100 900;
+  src: url(https://cdn.jsdelivr.net/fontsource/fonts/inter:vf@latest/latin-opsz-normal.woff2) format('woff2-variations');
+  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
+}
+
+/* inter-latin-wght-normal */
+@font-face {
+  font-family: 'Inter Variable';
+  font-style: italic;
+  font-display: swap;
+  font-weight: 100 900;
+  src: url(https://cdn.jsdelivr.net/fontsource/fonts/inter:vf@latest/latin-opsz-italic.woff2) format('woff2-variations');
+  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
+}
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -7,6 +27,8 @@ html {
 }
 
 :root {
+  --font-inter: 'Inter Variable';
+
   /* Raw colors */
   --indigo-50: #eef2ff;
   --indigo-100: #e0e7ff;
@@ -83,7 +105,7 @@ html {
   --image: var(--gray-700);
   --skeleton: var(--gray-300);
   --border: var(--gray-300);
-  
+
   --input-border: var(--gray-200);
   --input-border-accent: var(--gray-300);
   --input-border-invalid: var(--red-500);