WIP- ci(frontend,design): add storybook builds to the frontend

.github/workflows/platform-frontend-ci.yml

@@ -56,6 +56,30 @@ jobs:
         run: |
           yarn type-check
 
+  design:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "21"
+
+      - name: Install dependencies
+        run: |
+          yarn install --frozen-lockfile
+
+      - name: Run Chromatic
+        uses: chromaui/action@latest
+        with:
+          # ⚠️ Make sure to configure a `CHROMATIC_PROJECT_TOKEN` repository secret
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          workingDir: autogpt_platform/frontend
+
   test:
     runs-on: ubuntu-latest
     strategy:

autogpt_platform/frontend/.storybook/main.ts

@@ -9,13 +9,27 @@ const config: StorybookConfig = {
     "@storybook/addon-essentials",
     "@storybook/addon-interactions",
   ],
+  env: {
+    NEXT_PUBLIC_SUPABASE_URL: "https://your-project.supabase.co",
+    NEXT_PUBLIC_SUPABASE_ANON_KEY: "your-anon-key",
+  },
   features: {
     experimentalRSC: true,
   },
   framework: {
     name: "@storybook/nextjs",
     options: {},
   },
-  staticDirs: ["../public"],
+  staticDirs: [
+    "../public",
+    {
+      from: "../node_modules/geist/dist/fonts/geist-sans",
+      to: "/fonts/geist-sans",
+    },
+    {
+      from: "../node_modules/geist/dist/fonts/geist-mono",
+      to: "/fonts/geist-mono",
+    },
+  ],
 };
 export default config;

autogpt_platform/frontend/.storybook/preview.tsx

@@ -0,0 +1,61 @@
+import React from "react";
+import type { Preview } from "@storybook/react";
+import { initialize, mswLoader } from "msw-storybook-addon";
+import { Inter, Poppins } from "next/font/google";
+import localFont from "next/font/local";
+import "../src/app/globals.css";
+import { Providers } from "../src/app/providers";
+
+const poppins = Poppins({
+  subsets: ["latin"],
+  weight: ["400", "500", "600", "700"],
+  variable: "--font-poppins",
+});
+
+const inter = Inter({ subsets: ["latin"], variable: "--font-inter" });
+
+const GeistSans = localFont({
+  src: "../fonts/geist-sans/Geist-Variable.woff2",
+  variable: "--font-geist-sans",
+});
+
+const GeistMono = localFont({
+  src: "../fonts/geist-mono/GeistMono-Variable.woff2",
+  variable: "--font-geist-mono",
+});
+
+// Initialize MSW
+initialize();
+
+const preview: Preview = {
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+    },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+    layout: "fullscreen",
+  },
+  decorators: [
+    (Story, context) => {
+      const mockOptions = context.parameters.mockBackend || {};
+
+      return (
+        <div
+          className={`${poppins.variable} ${inter.variable} ${GeistMono.variable} ${GeistSans.variable}`}
+        >
+          <Providers mockClientProps={mockOptions}>
+            <Story />
+          </Providers>
+        </div>
+      );
+    },
+  ],
+  loaders: [mswLoader],
+};
+
+export default preview;

autogpt_platform/frontend/.storybook/stoybook_guide.md

@@ -0,0 +1,60 @@
+# For Client-Side Components
+
+When communicating with the server in client components, use the `useBackendAPI` hook. It automatically detects when running in a Storybook environment and switches to the mock client.
+
+To provide custom mock data instead of the default values, add the `mockBackend` parameter in your stories:
+
+```tsx
+export const MyStory = {
+  parameters: {
+    mockBackend: {
+      credits: 100,
+      isAuthenticated: true,
+      // Other custom mock data
+    },
+  },
+};
+```
+
+# For Server-Side Components
+
+The server-based Supabase client automatically switches between real requests and mock responses.
+
+For server-side components, use the following pattern to select between backend client and mock client:
+
+```tsx
+const api = process.env.STORYBOOK ? new MockClient() : new BackendAPI();
+```
+
+You need to override specific API request methods in your mock client implementation. If you don't override a method, you can use the default methods provided by `BackendAPI` in both server-side and client-side environments.
+
+To use custom mock data in server components, pass it directly to the `MockClient` constructor:
+
+```tsx
+const api = process.env.STORYBOOK
+  ? new MockClient({ credits: 200, isAuthenticated: true })
+  : new BackendAPI();
+```
+
+> Note: For client components, always use the `mockBackend` parameter in stories instead.
+
+# Using MSW
+
+If you haven't overridden an API request method in your mock client, you can use Mock Service Worker (MSW) to intercept HTTP requests from both the browser and Node.js environments, then respond with custom mock data:
+
+```tsx
+// In your story
+export const WithMSW = {
+  parameters: {
+    msw: {
+      handlers: [
+        http.get("/api/user", () => {
+          return HttpResponse.json({ name: "John", role: "admin" });
+        }),
+      ],
+    },
+  },
+};
+```
+
+Currently, it doesn't have support for client-side Supabase client and custom data for Supabase server-side client. You could use MSW for both cases.

autogpt_platform/frontend/src/app/(platform)/layout.tsx

@@ -8,13 +8,14 @@ export default function PlatformLayout({ children }: { children: ReactNode }) {
       <Navbar
         links={[
           {
-            name: "Marketplace",
-            href: "/marketplace",
+            name: "Home",
+            href: "/library",
           },
           {
-            name: "Library",
-            href: "/library",
+            name: "Marketplace",
+            href: "/marketplace",
           },
+
           {
             name: "Build",
             href: "/build",
@@ -62,7 +63,7 @@ export default function PlatformLayout({ children }: { children: ReactNode }) {
           },
         ]}
       />
-      <main>{children}</main>
+      <main className="w-full">{children}</main>
     </>
   );
 }

autogpt_platform/frontend/src/app/(platform)/marketplace/agent/[creator]/[slug]/page.tsx

@@ -56,62 +56,49 @@ export default async function Page({
 
   const breadcrumbs = [
     { name: "Marketplace", link: "/marketplace" },
-    {
-      name: agent.creator,
-      link: `/marketplace/creator/${encodeURIComponent(agent.creator)}`,
-    },
     { name: agent.agent_name, link: "#" },
   ];
 
   return (
-    <div className="mx-auto w-screen max-w-[1360px]">
-      <main className="mt-5 px-4">
-        <BreadCrumbs items={breadcrumbs} />
-
-        <div className="mt-4 flex flex-col items-start gap-4 sm:mt-6 sm:gap-6 md:mt-8 md:flex-row md:gap-8">
-          <div className="w-full md:w-auto md:shrink-0">
-            <AgentInfo
-              user={user}
-              name={agent.agent_name}
-              creator={agent.creator}
-              shortDescription={agent.sub_heading}
-              longDescription={agent.description}
-              rating={agent.rating}
-              runs={agent.runs}
-              categories={agent.categories}
-              lastUpdated={agent.updated_at}
-              version={agent.versions[agent.versions.length - 1]}
-              storeListingVersionId={agent.store_listing_version_id}
-              libraryAgent={libraryAgent}
-            />
-          </div>
-          <AgentImages
-            images={
-              agent.agent_video
-                ? [agent.agent_video, ...agent.agent_image]
-                : agent.agent_image
-            }
+    <main className="mt-9 px-10">
+      <BreadCrumbs items={breadcrumbs} />
+      <div className="mt-4 flex flex-col items-start gap-4 sm:mt-6 sm:gap-6 md:mt-8 md:flex-row md:gap-8">
+        <div className="w-full md:w-auto md:shrink-0">
+          <AgentInfo
+            user={user}
+            name={agent.agent_name}
+            creator={agent.creator}
+            shortDescription={agent.sub_heading}
+            longDescription={agent.description}
+            rating={agent.rating}
+            runs={agent.runs}
+            categories={agent.categories}
+            lastUpdated={agent.updated_at}
+            version={agent.versions[agent.versions.length - 1]}
+            storeListingVersionId={agent.store_listing_version_id}
+            libraryAgent={libraryAgent}
           />
         </div>
-        <Separator className="mb-[25px] mt-[60px]" />
-        <AgentsSection
-          margin="32px"
-          agents={otherAgents.agents}
-          sectionTitle={`Other agents by ${agent.creator}`}
-        />
-        <Separator className="mb-[25px] mt-[60px]" />
-        <AgentsSection
-          margin="32px"
-          agents={similarAgents.agents}
-          sectionTitle="Similar agents"
-        />
-        <Separator className="mb-[25px] mt-[60px]" />
-        <BecomeACreator
-          title="Become a Creator"
-          description="Join our ever-growing community of hackers and tinkerers"
-          buttonText="Become a Creator"
+        <AgentImages
+          images={
+            agent.agent_video
+              ? [agent.agent_video, ...agent.agent_image]
+              : agent.agent_image
+          }
         />
-      </main>
-    </div>
+      </div>
+      <Separator className="mb-9 mt-7" />
+      <AgentsSection
+        agents={otherAgents.agents}
+        sectionTitle={`Other agents by ${agent.creator}`}
+      />
+      <Separator className="mb-9 mt-11" />
+      <AgentsSection
+        agents={similarAgents.agents}
+        sectionTitle="Similar agents"
+      />
+      <Separator className="mb-9 mt-11" />
+      <BecomeACreator title="Become a Creator" buttonText="Become a Creator" />
+    </main>
   );
 }