Merge branch 'dev' into abhi/adding-some-enter-animation-on-marketplace

### Changes
- Updated import statements in FilterChip, Separator, FadeIn, and StaggeredList story files to use `@storybook/nextjs` instead of `@storybook/react` for improved compatibility with Next.js.

### Checklist
- [x] Verified that all story files function correctly after the import change.

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

@@ -128,7 +128,7 @@ jobs:
           token: ${{ secrets.GITHUB_TOKEN }}
           exitOnceUploaded: true
 
-  test:
+  e2e_test:
     runs-on: big-boi
     needs: setup
     strategy:
@@ -258,3 +258,39 @@ jobs:
       - name: Print Final Docker Compose logs
         if: always()
         run: docker compose -f ../docker-compose.yml logs
+
+  integration_test:
+    runs-on: ubuntu-latest
+    needs: setup
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          submodules: recursive
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "22.18.0"
+
+      - name: Enable corepack
+        run: corepack enable
+
+      - name: Restore dependencies cache
+        uses: actions/cache@v4
+        with:
+          path: ~/.pnpm-store
+          key: ${{ needs.setup.outputs.cache-key }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-${{ hashFiles('autogpt_platform/frontend/pnpm-lock.yaml') }}
+            ${{ runner.os }}-pnpm-
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Generate API client
+        run: pnpm generate:api
+
+      - name: Run Integration Tests
+        run: pnpm test:unit

autogpt_platform/frontend/src/app/(platform)/marketplace/components/AgentsSection/AgentsSection.tsx

@@ -76,7 +76,9 @@ export const AgentsSection = ({
                         avatarSrc={agent.creator_avatar}
                         creatorName={agent.creator}
                         hideAvatar={hideAvatars}
-                        onClick={() => handleCardClick(agent.creator, agent.slug)}
+                        onClick={() =>
+                          handleCardClick(agent.creator, agent.slug)
+                        }
                       />
                     </CarouselItem>
                   ))}

autogpt_platform/frontend/src/app/(platform)/marketplace/components/MainMarketplacePage/__tests__/main.test.tsx

@@ -0,0 +1,15 @@
+import { expect, test } from "vitest";
+import { render, screen } from "@/tests/integrations/test-utils";
+import { MainMarkeplacePage } from "../MainMarketplacePage";
+import { server } from "@/mocks/mock-server";
+import { getDeleteV2DeleteStoreSubmissionMockHandler422 } from "@/app/api/__generated__/endpoints/store/store.msw";
+
+// Only for CI testing purpose, will remove it in future PR
+test("MainMarketplacePage", async () => {
+  server.use(getDeleteV2DeleteStoreSubmissionMockHandler422());
+
+  render(<MainMarkeplacePage />);
+  expect(
+    await screen.findByText("Featured agents", { exact: false }),
+  ).toBeDefined();
+});

autogpt_platform/frontend/src/components/atoms/FilterChip/FilterChip.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/nextjs";
 import { useState } from "react";
 import { FilterChip } from "./FilterChip";
 
@@ -118,11 +118,7 @@ export const SingleSelect: Story = {
 };
 
 function DismissibleDemo() {
-  const [filters, setFilters] = useState([
-    "Marketing",
-    "Sales",
-    "Development",
-  ]);
+  const [filters, setFilters] = useState(["Marketing", "Sales", "Development"]);
 
   function handleDismiss(filter: string) {
     setFilters((prev) => prev.filter((f) => f !== filter));

autogpt_platform/frontend/src/components/atoms/Separator/Separator.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/nextjs";
 import { Separator } from "./Separator";
 
 const meta: Meta<typeof Separator> = {

autogpt_platform/frontend/src/components/molecules/FadeIn/FadeIn.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/nextjs";
 import { FadeIn } from "./FadeIn";
 
 const meta: Meta<typeof FadeIn> = {

autogpt_platform/frontend/src/components/molecules/FadeIn/FadeIn.tsx

@@ -92,7 +92,9 @@ export function FadeIn({
     },
   };
 
-  const MotionComponent = motion[as as keyof typeof motion] as typeof motion.div;
+  const MotionComponent = motion[
+    as as keyof typeof motion
+  ] as typeof motion.div;
 
   return (
     <MotionComponent

autogpt_platform/frontend/src/components/molecules/StaggeredList/StaggeredList.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/nextjs";
 import { StaggeredList } from "./StaggeredList";
 
 const meta: Meta<typeof StaggeredList> = {
@@ -36,7 +36,9 @@ export const Default: Story = {
   args: {
     direction: "up",
     className: "space-y-4",
-    children: items.map((item, i) => <DemoCard key={i} title={item} index={i} />),
+    children: items.map((item, i) => (
+      <DemoCard key={i} title={item} index={i} />
+    )),
   },
 };
 
@@ -44,7 +46,9 @@ export const FadeDown: Story = {
   args: {
     direction: "down",
     className: "space-y-4",
-    children: items.map((item, i) => <DemoCard key={i} title={item} index={i} />),
+    children: items.map((item, i) => (
+      <DemoCard key={i} title={item} index={i} />
+    )),
   },
 };
 
@@ -52,7 +56,9 @@ export const FadeLeft: Story = {
   args: {
     direction: "left",
     className: "flex gap-4",
-    children: items.map((item, i) => <DemoCard key={i} title={item} index={i} />),
+    children: items.map((item, i) => (
+      <DemoCard key={i} title={item} index={i} />
+    )),
   },
 };
 
@@ -60,7 +66,9 @@ export const FadeRight: Story = {
   args: {
     direction: "right",
     className: "flex gap-4",
-    children: items.map((item, i) => <DemoCard key={i} title={item} index={i} />),
+    children: items.map((item, i) => (
+      <DemoCard key={i} title={item} index={i} />
+    )),
   },
 };
 
@@ -69,7 +77,9 @@ export const FastStagger: Story = {
     direction: "up",
     staggerDelay: 0.05,
     className: "space-y-4",
-    children: items.map((item, i) => <DemoCard key={i} title={item} index={i} />),
+    children: items.map((item, i) => (
+      <DemoCard key={i} title={item} index={i} />
+    )),
   },
 };
 
@@ -78,7 +88,9 @@ export const SlowStagger: Story = {
     direction: "up",
     staggerDelay: 0.3,
     className: "space-y-4",
-    children: items.map((item, i) => <DemoCard key={i} title={item} index={i} />),
+    children: items.map((item, i) => (
+      <DemoCard key={i} title={item} index={i} />
+    )),
   },
 };
 
@@ -87,7 +99,9 @@ export const WithInitialDelay: Story = {
     direction: "up",
     initialDelay: 0.5,
     className: "space-y-4",
-    children: items.map((item, i) => <DemoCard key={i} title={item} index={i} />),
+    children: items.map((item, i) => (
+      <DemoCard key={i} title={item} index={i} />
+    )),
   },
 };
 

autogpt_platform/frontend/src/components/molecules/StaggeredList/StaggeredList.tsx

@@ -121,7 +121,11 @@ export function StaggeredList({
       variants={containerVariants}
     >
       {children.map((child, index) => (
-        <motion.div key={index} className={itemClassName} variants={itemVariants}>
+        <motion.div
+          key={index}
+          className={itemClassName}
+          variants={itemVariants}
+        >
           {child}
         </motion.div>
       ))}