feat: add mock backend for rendering the storybook stuff

autogpt_platform/frontend/.storybook/preview.tsx

@@ -22,11 +22,10 @@ const preview: Preview = {
   decorators: [
     (Story) => {
       return (
-        <Providers>
+        <Providers useMockBackend={true}>
           <Story />
         </Providers>
       );
-
     },
   ],
 };

autogpt_platform/frontend/src/app/providers.tsx

@@ -8,10 +8,19 @@ import { TooltipProvider } from "@/components/ui/tooltip";
 import CredentialsProvider from "@/components/integrations/credentials-provider";
 import { LaunchDarklyProvider } from "@/components/feature-flag/feature-flag-provider";
 
-export function Providers({ children, ...props }: ThemeProviderProps) {
+export interface ProvidersProps extends ThemeProviderProps {
+  children: React.ReactNode;
+  useMockBackend?: boolean;
+}
+
+export function Providers({
+  children,
+  useMockBackend,
+  ...props
+}: ProvidersProps) {
   return (
     <NextThemesProvider {...props}>
-      <BackendAPIProvider>
+      <BackendAPIProvider useMockBackend={useMockBackend}>
         <CredentialsProvider>
           <LaunchDarklyProvider>
             <TooltipProvider>{children}</TooltipProvider>

autogpt_platform/frontend/src/lib/autogpt-server-api/context.tsx

@@ -1,14 +1,25 @@
 import BackendAPI from "./client";
 import React, { createContext, useMemo } from "react";
+import MockClient from "./mock_client";
 
 const BackendAPIProviderContext = createContext<BackendAPI | null>(null);
 
+interface BackendAPIProviderProps {
+  children?: React.ReactNode;
+  useMockBackend?: boolean;
+}
+
 export function BackendAPIProvider({
   children,
-}: {
-  children?: React.ReactNode;
-}): React.ReactNode {
-  const api = useMemo(() => new BackendAPI(), []);
+  useMockBackend,
+}: BackendAPIProviderProps): React.ReactNode {
+  let api: BackendAPI;
+
+  if (useMockBackend) {
+    api = useMemo(() => new MockClient(), []);
+  } else {
+    api = useMemo(() => new BackendAPI(), []);
+  }
 
   return (
     <BackendAPIProviderContext.Provider value={api}>

autogpt_platform/frontend/src/lib/autogpt-server-api/mock_client.ts

@@ -0,0 +1,69 @@
+import { faker } from "@faker-js/faker";
+import BackendAPI from "./client";
+import { Block, BlockUIType, User } from "./types";
+
+export default class MockClient extends BackendAPI {
+  override isAuthenticated(): Promise<boolean> {
+    return Promise.resolve(true);
+  }
+
+  override createUser(): Promise<User> {
+    return Promise.resolve({
+      id: faker.string.uuid(),
+      email: "test@test.com",
+    } satisfies User);
+  }
+
+  override getUserCredit(page?: string): Promise<{ credits: number }> {
+    return Promise.resolve({ credits: 10 });
+  }
+
+  override getAutoTopUpConfig(): Promise<{
+    amount: number;
+    threshold: number;
+  }> {
+    return Promise.resolve({ amount: 10, threshold: 10 });
+  }
+
+  override setAutoTopUpConfig(config: {
+    amount: number;
+    threshold: number;
+  }): Promise<{ amount: number; threshold: number }> {
+    return Promise.resolve(config);
+  }
+
+  override requestTopUp(amount: number): Promise<{ checkout_url: string }> {
+    return Promise.resolve({ checkout_url: "https://checkout.stripe.com" });
+  }
+
+  override getUserPaymentPortalLink(): Promise<{ url: string }> {
+    return Promise.resolve({ url: "https://payment.stripe.com" });
+  }
+
+  override fulfillCheckout(): Promise<void> {
+    return Promise.resolve();
+  }
+
+  override getBlocks(): Promise<Block[]> {
+    return Promise.resolve([
+      {
+        id: faker.string.uuid(),
+        name: faker.lorem.word(),
+        description: faker.lorem.sentence(),
+        inputSchema: {
+          type: "object",
+          properties: {},
+        },
+        outputSchema: {
+          type: "object",
+          properties: {},
+        },
+        staticOutput: false,
+        categories: [],
+        uiType: BlockUIType.STANDARD,
+        costs: [],
+        hardcodedValues: {},
+      },
+    ] satisfies Block[]);
+  }
+}