github/AutoGPT
1
1
Fork 0
mirror of https://github.com/Significant-Gravitas/AutoGPT.git synced 2026-04-30 03:00:41 -04:00
Code Issues Packages Projects Releases Wiki Activity

fix: stories being broken

Browse Source
This commit is contained in:
Nicholas Tindle
2025-01-26 11:18:12 +00:00
parent 12eb495b2c
commit e1f8882e2d
18 changed files with 664 additions and 185 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
autogpt_platform/frontend/src/components/agptui/AgentInfo.stories.tsx
View File

@@ -10,7 +10,6 @@ const meta = {
},
tags: ["autodocs"],
argTypes: {
onRunAgent: { action: "run agent clicked" },
name: { control: "text" },
creator: { control: "text" },
shortDescription: { control: "text" },
@@ -28,8 +27,8 @@ type Story = StoryObj<typeof meta>;
export const Default: Story = {
args: {
onRunAgent: () => console.log("Run agent clicked"),
name: "AI Video Generator",
storeListingVersionId: "123",
creator: "Toran Richards",
shortDescription:
"Transform ideas into breathtaking images with this AI-powered Image Generator.",

33
autogpt_platform/frontend/src/components/agptui/AgentTable.stories.tsx
View File

@@ -15,40 +15,55 @@ type Story = StoryObj<typeof AgentTable>;
const sampleAgents: AgentTableRowProps[] = [
{
id: "agent-1",
id: 43,
agentName: "Super Coder",
description: "An AI agent that writes clean, efficient code",
imageSrc:
"https://ddz4ak4pa3d19.cloudfront.net/cache/53/b2/53b2bc7d7900f0e1e60bf64ebf38032d.jpg",
["https://ddz4ak4pa3d19.cloudfront.net/cache/53/b2/53b2bc7d7900f0e1e60bf64ebf38032d.jpg"],
dateSubmitted: "2023-05-15",
status: "approved",
runs: 1500,
rating: 4.8,
onEdit: () => console.log("Edit Super Coder"),
agent_id: "43",
agent_version: 1,
sub_heading: "Super Coder",
date_submitted: "2023-05-15",
onEditSubmission: () => console.log("Edit Super Coder"),
onDeleteSubmission: () => console.log("Delete Super Coder"),
},
{
id: "agent-2",
id: 44,
agentName: "Data Analyzer",
description: "Processes and analyzes large datasets with ease",
imageSrc:
"https://ddz4ak4pa3d19.cloudfront.net/cache/40/f7/40f7bc97c952f8df0f9c88d29defe8d4.jpg",
["https://ddz4ak4pa3d19.cloudfront.net/cache/40/f7/40f7bc97c952f8df0f9c88d29defe8d4.jpg"],
dateSubmitted: "2023-05-10",
status: "awaiting_review",
runs: 1200,
rating: 4.5,
onEdit: () => console.log("Edit Data Analyzer"),
agent_id: "44",
agent_version: 1,
sub_heading: "Data Analyzer",
date_submitted: "2023-05-10",
onEditSubmission: () => console.log("Edit Data Analyzer"),
onDeleteSubmission: () => console.log("Delete Data Analyzer"),
},
{
id: "agent-3",
id: 45,
agentName: "UI Designer",
description: "Creates beautiful and intuitive user interfaces",
imageSrc:
"https://ddz4ak4pa3d19.cloudfront.net/cache/14/9e/149ebb9014aa8c0097e72ed89845af0e.jpg",
["https://ddz4ak4pa3d19.cloudfront.net/cache/14/9e/149ebb9014aa8c0097e72ed89845af0e.jpg"],
dateSubmitted: "2023-05-05",
status: "draft",
runs: 800,
rating: 4.2,
onEdit: () => console.log("Edit UI Designer"),
agent_id: "45",
agent_version: 1,
sub_heading: "UI Designer",
date_submitted: "2023-05-05",
onEditSubmission: () => console.log("Edit UI Designer"),
onDeleteSubmission: () => console.log("Delete UI Designer"),
},
];

3
autogpt_platform/frontend/src/components/agptui/AgentTableCard.stories.tsx
View File

@@ -17,12 +17,11 @@ export const Default: Story = {
agentName: "Super Coder",
description: "An AI agent that writes clean, efficient code",
imageSrc:
"https://ddz4ak4pa3d19.cloudfront.net/cache/53/b2/53b2bc7d7900f0e1e60bf64ebf38032d.jpg",
["https://ddz4ak4pa3d19.cloudfront.net/cache/53/b2/53b2bc7d7900f0e1e60bf64ebf38032d.jpg"],
dateSubmitted: "2023-05-15",
status: "ACTIVE" as StatusType,
runs: 1500,
rating: 4.8,
onEdit: () => console.log("Edit Super Coder"),
},
};

3
autogpt_platform/frontend/src/components/agptui/BecomeACreator.stories.tsx
View File

@@ -11,7 +11,6 @@ const meta = {
tags: ["autodocs"],
argTypes: {
title: { control: "text" },
heading: { control: "text" },
description: { control: "text" },
buttonText: { control: "text" },
onButtonClick: { action: "buttonClicked" },
@@ -24,7 +23,6 @@ type Story = StoryObj<typeof meta>;
export const Default: Story = {
args: {
title: "Want to contribute?",
heading: "We're always looking for more Creators!",
description: "Join our ever-growing community of hackers and tinkerers",
buttonText: "Become a Creator",
onButtonClick: () => console.log("Button clicked"),
@@ -34,7 +32,6 @@ export const Default: Story = {
export const CustomText: Story = {
args: {
title: "Become a Creator Today!",
heading: "Join Our Creator Community",
description: "Share your ideas and build amazing AI agents with us",
buttonText: "Start Creating",
onButtonClick: () => console.log("Custom button clicked"),

9
autogpt_platform/frontend/src/components/agptui/CreatorCard.stories.tsx
View File

@@ -15,7 +15,6 @@ const meta = {
bio: { control: "text" },
agentsUploaded: { control: "number" },
onClick: { action: "clicked" },
avatarSrc: { control: "text" },
},
} satisfies Meta<typeof CreatorCard>;
@@ -24,49 +23,49 @@ type Story = StoryObj<typeof meta>;
export const Default: Story = {
args: {
index: 0,
creatorName: "John Doe",
creatorImage:
"https://framerusercontent.com/images/KCIpxr9f97EGJgpaoqnjKsrOPwI.jpg",
bio: "AI enthusiast and developer with a passion for creating innovative agents.",
agentsUploaded: 15,
onClick: () => console.log("Default CreatorCard clicked"),
avatarSrc: "https://github.com/shadcn.png",
},
};
export const NewCreator: Story = {
args: {
index: 1,
creatorName: "Jane Smith",
creatorImage:
"https://framerusercontent.com/images/KCIpxr9f97EGJgpaoqnjKsrOPwI.jpg",
bio: "Excited to start my journey in AI agent development!",
agentsUploaded: 1,
onClick: () => console.log("NewCreator CreatorCard clicked"),
avatarSrc: "https://example.com/avatar2.jpg",
},
};
export const ExperiencedCreator: Story = {
args: {
index: 2,
creatorName: "Alex Johnson",
creatorImage:
"https://framerusercontent.com/images/KCIpxr9f97EGJgpaoqnjKsrOPwI.jpg",
bio: "Veteran AI researcher with a focus on natural language processing and machine learning.",
agentsUploaded: 50,
onClick: () => console.log("ExperiencedCreator CreatorCard clicked"),
avatarSrc: "https://example.com/avatar3.jpg",
},
};
export const WithInteraction: Story = {
args: {
index: 3,
creatorName: "Sam Brown",
creatorImage:
"https://framerusercontent.com/images/KCIpxr9f97EGJgpaoqnjKsrOPwI.jpg",
bio: "Exploring the frontiers of AI and its applications in everyday life.",
agentsUploaded: 30,
onClick: () => console.log("WithInteraction CreatorCard clicked"),
avatarSrc: "https://example.com/avatar4.jpg",
},
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);

39
autogpt_platform/frontend/src/components/agptui/CreatorLinks.stories.tsx
View File

@@ -21,51 +21,38 @@ type Story = StoryObj<typeof meta>;
export const Default: Story = {
args: {
links: {
website: "https://example.com",
linkedin: "https://linkedin.com/in/johndoe",
github: "https://github.com/johndoe",
other: ["https://twitter.com/johndoe", "https://medium.com/@johndoe"],
},
links: ["https://example.com", "https://linkedin.com/in/johndoe", "https://github.com/johndoe", "https://twitter.com/johndoe", "https://medium.com/@johndoe"],
},
};
export const WebsiteOnly: Story = {
args: {
links: {
website: "https://example.com",
},
links: ["https://example.com"],
},
};
export const SocialLinks: Story = {
args: {
links: {
linkedin: "https://linkedin.com/in/janedoe",
github: "https://github.com/janedoe",
other: ["https://twitter.com/janedoe"],
},
links: ["https://linkedin.com/in/janedoe", "https://github.com/janedoe", "https://twitter.com/janedoe"],
},
};
export const NoLinks: Story = {
args: {
links: {},
links: [],
},
};
export const MultipleOtherLinks: Story = {
args: {
links: {
website: "https://example.com",
linkedin: "https://linkedin.com/in/creator",
github: "https://github.com/creator",
other: [
"https://twitter.com/creator",
"https://medium.com/@creator",
"https://youtube.com/@creator",
"https://tiktok.com/@creator",
],
},
links: [
"https://example.com",
"https://linkedin.com/in/creator",
"https://github.com/creator",
"https://twitter.com/creator",
"https://medium.com/@creator",
"https://youtube.com/@creator",
"https://tiktok.com/@creator",
],
},
};

6
autogpt_platform/frontend/src/components/agptui/FeaturedStoreCard.stories.tsx
View File

@@ -43,6 +43,7 @@ export const Default: Story = {
runs: 50000,
rating: 4.7,
onClick: () => console.log("Card clicked"),
backgroundColor: "bg-white",
},
};
@@ -60,6 +61,7 @@ export const LowRating: Story = {
runs: 10000,
rating: 2.8,
onClick: () => console.log("Card clicked"),
backgroundColor: "bg-white",
},
};
@@ -77,6 +79,7 @@ export const HighRuns: Story = {
runs: 1000000,
rating: 4.9,
onClick: () => console.log("Card clicked"),
backgroundColor: "bg-white",
},
};
@@ -92,6 +95,7 @@ export const NoCreatorImage: Story = {
runs: 75000,
rating: 4.5,
onClick: () => console.log("Card clicked"),
backgroundColor: "bg-white",
},
};
@@ -108,6 +112,7 @@ export const ShortDescription: Story = {
runs: 50000,
rating: 4.2,
onClick: () => console.log("Card clicked"),
backgroundColor: "bg-white",
},
};
@@ -125,6 +130,7 @@ export const WithInteraction: Story = {
runs: 200000,
rating: 4.6,
onClick: () => console.log("Card clicked"),
backgroundColor: "bg-white",
},
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);

4
autogpt_platform/frontend/src/components/agptui/MobileNavBar.stories.tsx
View File

@@ -13,7 +13,6 @@ const meta = {
argTypes: {
userName: { control: "text" },
userEmail: { control: "text" },
activeLink: { control: "text" },
avatarSrc: { control: "text" },
menuItemGroups: { control: "object" },
},
@@ -67,7 +66,6 @@ export const Default: Story = {
args: {
userName: "John Doe",
userEmail: "john.doe@example.com",
activeLink: "/marketplace",
avatarSrc: "https://avatars.githubusercontent.com/u/123456789?v=4",
menuItemGroups: defaultMenuItemGroups,
},
@@ -77,7 +75,6 @@ export const NoAvatar: Story = {
args: {
userName: "Jane Smith",
userEmail: "jane.smith@example.com",
activeLink: "/library",
menuItemGroups: defaultMenuItemGroups,
},
};
@@ -86,7 +83,6 @@ export const LongUserName: Story = {
args: {
userName: "Alexander Bartholomew Christopherson III",
userEmail: "alexander@example.com",
activeLink: "/builder",
avatarSrc: "https://avatars.githubusercontent.com/u/987654321?v=4",
menuItemGroups: defaultMenuItemGroups,
},

47
autogpt_platform/frontend/src/components/agptui/Navbar.stories.tsx
View File

@@ -1,9 +1,10 @@
import type { Meta, StoryObj } from "@storybook/react";
import Navbar from "./Navbar";
import { Navbar } from "./Navbar";
import { userEvent, within } from "@storybook/test";
import { IconType } from "../ui/icons";
import { ProfileDetails } from "@/lib/autogpt-server-api/types";
import { jest } from "@jest/globals";
// You can't import this here, jest is not available in storybook and will crash it
// import { jest } from "@jest/globals";
// Mock the API responses
const mockProfileData: ProfileDetails = {
@@ -19,14 +20,14 @@ const mockCreditData = {
};
// Mock the API module
jest.mock("@/lib/autogpt-server-api", () => {
return function () {
return {
getStoreProfile: () => Promise.resolve(mockProfileData),
getUserCredit: () => Promise.resolve(mockCreditData),
};
};
});
// jest.mock("@/lib/autogpt-server-api", () => {
// return function () {
// return {
// getStoreProfile: () => Promise.resolve(mockProfileData),
// getUserCredit: () => Promise.resolve(mockCreditData),
// };
// };
// });
const meta = {
title: "AGPT UI/Navbar",
@@ -36,12 +37,12 @@ const meta = {
},
tags: ["autodocs"],
argTypes: {
isLoggedIn: { control: "boolean" },
avatarSrc: { control: "text" },
// isLoggedIn: { control: "boolean" },
// avatarSrc: { control: "text" },
links: { control: "object" },
activeLink: { control: "text" },
// activeLink: { control: "text" },
menuItemGroups: { control: "object" },
params: { control: { type: "object", defaultValue: { lang: "en" } } },
// params: { control: { type: "object", defaultValue: { lang: "en" } } },
},
} satisfies Meta<typeof Navbar>;
@@ -90,11 +91,11 @@ const defaultLinks = [
export const Default: Story = {
args: {
params: { lang: "en" },
isLoggedIn: true,
// params: { lang: "en" },
// isLoggedIn: true,
links: defaultLinks,
activeLink: "/marketplace",
avatarSrc: mockProfileData.avatar_url,
// activeLink: "/marketplace",
// avatarSrc: mockProfileData.avatar_url,
menuItemGroups: defaultMenuItemGroups,
},
};
@@ -102,21 +103,21 @@ export const Default: Story = {
export const WithActiveLink: Story = {
args: {
...Default.args,
activeLink: "/library",
// activeLink: "/library",
},
};
export const LongUserName: Story = {
args: {
...Default.args,
avatarSrc: "https://avatars.githubusercontent.com/u/987654321?v=4",
// avatarSrc: "https://avatars.githubusercontent.com/u/987654321?v=4",
},
};
export const NoAvatar: Story = {
args: {
...Default.args,
avatarSrc: undefined,
// avatarSrc: undefined,
},
};
@@ -138,8 +139,8 @@ export const WithInteraction: Story = {
export const NotLoggedIn: Story = {
args: {
...Default.args,
isLoggedIn: false,
avatarSrc: undefined,
// isLoggedIn: false,
// avatarSrc: undefined,
},
};

96
autogpt_platform/frontend/src/components/agptui/ProfileInfoForm.stories.tsx
View File

@@ -9,29 +9,33 @@ const meta: Meta<typeof ProfileInfoForm> = {
},
tags: ["autodocs"],
argTypes: {
displayName: {
control: "text",
description: "The display name of the user",
},
handle: {
control: "text",
description: "The user's handle/username",
},
bio: {
control: "text",
description: "User's biography text",
},
profileImage: {
control: "text",
description: "URL of the user's profile image",
},
links: {
profile: {
control: "object",
description: "Array of social media links",
},
categories: {
control: "object",
description: "Array of selected categories",
description: "The profile details of the user",
displayName: {
control: "text",
description: "The display name of the user",
},
handle: {
control: "text",
description: "The user's handle/username",
},
bio: {
control: "text",
description: "User's biography text",
},
profileImage: {
control: "text",
description: "URL of the user's profile image",
},
links: {
control: "object",
description: "Array of social media links",
},
categories: {
control: "object",
description: "Array of selected categories",
},
},
},
};
@@ -41,30 +45,38 @@ type Story = StoryObj<typeof ProfileInfoForm>;
export const Empty: Story = {
args: {
displayName: "",
handle: "",
bio: "",
profileImage: undefined,
links: [],
categories: [],
profile: {
name: "",
username: "",
description: "",
avatar_url: "",
links: [],
top_categories: [],
agent_rating: 0,
agent_runs: 0,
},
},
};
export const Filled: Story = {
args: {
displayName: "Olivia Grace",
handle: "@ograce1421",
bio: "Our agents are designed to bring happiness and positive vibes to your daily routine. Each template helps you create and live more efficiently.",
profileImage: "https://via.placeholder.com/130x130",
links: [
{ id: 1, url: "www.websitelink.com" },
{ id: 2, url: "twitter.com/oliviagrace" },
{ id: 3, url: "github.com/ograce" },
],
categories: [
{ id: 1, name: "Entertainment" },
{ id: 2, name: "Blog" },
{ id: 3, name: "Content creation" },
],
profile: {
name: "Olivia Grace",
username: "@ograce1421",
description: "Our agents are designed to bring happiness and positive vibes to your daily routine. Each template helps you create and live more efficiently.",
avatar_url: "https://via.placeholder.com/130x130",
links: [
"www.websitelink.com",
"twitter.com/oliviagrace",
"github.com/ograce",
],
top_categories: [
"Entertainment",
"Blog",
"Content creation",
],
agent_rating: 4.5,
agent_runs: 100,
},
},
};

22
autogpt_platform/frontend/src/components/agptui/PublishAgentSelect.stories.tsx
View File

@@ -1,5 +1,5 @@
import type { Meta, StoryObj } from "@storybook/react";
import { PublishAgentSelect } from "./PublishAgentSelect";
import { Agent, PublishAgentSelect } from "./PublishAgentSelect";
const meta: Meta<typeof PublishAgentSelect> = {
title: "AGPT UI/Publish Agent Select",
@@ -15,48 +15,66 @@ const mockAgents = [
name: "SEO Optimizer",
lastEdited: "2 days ago",
imageSrc: "https://picsum.photos/seed/seo/300/200",
id: "1",
version: 1,
},
{
name: "Content Writer",
lastEdited: "5 days ago",
imageSrc: "https://picsum.photos/seed/writer/300/200",
id: "1",
version: 1,
},
{
name: "Data Analyzer",
lastEdited: "1 week ago",
imageSrc: "https://picsum.photos/seed/data/300/200",
id: "1",
version: 1,
},
{
name: "Image Recognition",
lastEdited: "2 weeks ago",
imageSrc: "https://picsum.photos/seed/image/300/200",
id: "1",
version: 1,
},
{
name: "Chatbot Assistant",
lastEdited: "3 weeks ago",
imageSrc: "https://picsum.photos/seed/chat/300/200",
id: "1",
version: 1,
},
{
name: "Code Generator",
lastEdited: "1 month ago",
imageSrc: "https://picsum.photos/seed/code/300/200",
id: "1",
version: 1,
},
{
name: "AI Translator",
lastEdited: "6 weeks ago",
imageSrc: "https://picsum.photos/seed/translate/300/200",
id: "1",
version: 1,
},
{
name: "Voice Assistant",
lastEdited: "2 months ago",
imageSrc: "https://picsum.photos/seed/voice/300/200",
id: "1",
version: 1,
},
{
name: "Data Visualizer",
lastEdited: "3 months ago",
imageSrc: "https://picsum.photos/seed/visualize/300/200",
id: "1",
version: 1,
},
];
] satisfies Agent[];
const defaultArgs = {
onSelect: (agentName: string) => console.log(`Selected: ${agentName}`),

6
autogpt_platform/frontend/src/components/agptui/PublishAgentSelectInfo.stories.tsx
View File

@@ -29,6 +29,8 @@ export const Filled: Story = {
args: {
...Default.args,
initialData: {
agent_id: "1",
slug: "super-seo-optimizer",
title: "Super SEO Optimizer",
subheader: "Boost your website's search engine rankings",
thumbnailSrc: "https://picsum.photos/seed/seo/500/350",
@@ -44,6 +46,8 @@ export const ThreeImages: Story = {
args: {
...Default.args,
initialData: {
agent_id: "1",
slug: "super-seo-optimizer",
title: "Multi-Image Agent",
subheader: "Showcasing multiple images",
thumbnailSrc: "https://picsum.photos/seed/initial/500/350",
@@ -63,6 +67,8 @@ export const SixImages: Story = {
args: {
...Default.args,
initialData: {
agent_id: "1",
slug: "super-seo-optimizer",
title: "Gallery Agent",
subheader: "Showcasing a gallery of images",
thumbnailSrc: "https://picsum.photos/seed/gallery1/500/350",

28
autogpt_platform/frontend/src/components/agptui/RatingCard.stories.tsx
View File

@@ -16,29 +16,33 @@ type Story = StoryObj<typeof meta>;
export const Default: Story = {
args: {
agentName: "Test Agent",
onSubmit: (rating) => {
console.log("Rating submitted:", rating);
},
onClose: () => {
console.log("Rating card closed");
},
// onSubmit: (rating) => {
// console.log("Rating submitted:", rating);
// },
// onClose: () => {
// console.log("Rating card closed");
// },
storeListingVersionId: "1",
},
};
export const LongAgentName: Story = {
args: {
agentName: "Very Long Agent Name That Might Need Special Handling",
onSubmit: (rating) => {
console.log("Rating submitted:", rating);
},
onClose: () => {
console.log("Rating card closed");
},
// onSubmit: (rating) => {
// console.log("Rating submitted:", rating);
// },
// onClose: () => {
// console.log("Rating card closed");
// },
storeListingVersionId: "1",
},
};
export const WithoutCallbacks: Story = {
args: {
agentName: "Test Agent",
storeListingVersionId: "1",
},
};

3
autogpt_platform/frontend/src/components/agptui/Status.stories.tsx
View File

@@ -44,6 +44,9 @@ export const Rejected: Story = {
};
export const AllStatuses: Story = {
args: {
status: "draft" as StatusType,
},
render: () => (
<div className="flex flex-col gap-4">
<Status status="draft" />

61
autogpt_platform/frontend/src/components/agptui/composite/AgentsSection.stories.tsx
View File

@@ -1,5 +1,5 @@
import type { Meta, StoryObj } from "@storybook/react";
import { AgentsSection } from "./AgentsSection";
import { Agent, AgentsSection } from "./AgentsSection";
import { userEvent, within, expect } from "@storybook/test";
const meta = {
@@ -16,7 +16,7 @@ const meta = {
argTypes: {
sectionTitle: { control: "text" },
agents: { control: "object" },
onCardClick: { action: "clicked" },
// onCardClick: { action: "clicked" },
},
} satisfies Meta<typeof AgentsSection>;
@@ -25,41 +25,50 @@ type Story = StoryObj<typeof meta>;
const mockTopAgents = [
{
agentName: "SEO Optimizer Pro",
agentImage:
agent_name: "SEO Optimizer Pro",
agent_image:
"https://framerusercontent.com/images/KCIpxr9f97EGJgpaoqnjKsrOPwI.jpg",
description:
"Boost your website's search engine rankings with our advanced AI-powered SEO optimization tool.",
runs: 50000,
rating: 4.7,
avatarSrc: "https://example.com/avatar1.jpg",
creator_avatar: "https://example.com/avatar1.jpg",
slug: "seo-optimizer-pro",
creator: "John Doe",
sub_heading: "SEO Expert",
},
{
agentName: "Content Writer AI",
agentImage:
agent_name: "Content Writer AI",
agent_image:
"https://upload.wikimedia.org/wikipedia/commons/c/c5/Big_buck_bunny_poster_big.jpg",
description:
"Generate high-quality, engaging content for your blog, social media, or marketing campaigns.",
runs: 75000,
rating: 4.5,
avatarSrc: "https://example.com/avatar2.jpg",
creator_avatar: "https://example.com/avatar2.jpg",
slug: "content-writer-ai",
creator: "Jane Doe",
sub_heading: "Content Writer",
},
{
agentName: "Data Analyzer Lite",
agentImage:
agent_name: "Data Analyzer Lite",
agent_image:
"https://framerusercontent.com/images/KCIpxr9f97EGJgpaoqnjKsrOPwI.jpg",
description: "A basic tool for analyzing small to medium-sized datasets.",
runs: 10000,
rating: 3.8,
avatarSrc: "https://example.com/avatar3.jpg",
creator_avatar: "https://example.com/avatar3.jpg",
slug: "data-analyzer-lite",
creator: "John Doe",
sub_heading: "Data Analyst",
},
];
] satisfies Agent[];
export const Default: Story = {
args: {
sectionTitle: "Top Agents",
agents: mockTopAgents,
onCardClick: (agentName: string) => console.log(`Clicked on ${agentName}`),
// onCardClick: (agentName: string) => console.log(`Clicked on ${agentName}`),
},
};
@@ -67,7 +76,7 @@ export const SingleAgent: Story = {
args: {
sectionTitle: "Top Agents",
agents: [mockTopAgents[0]],
onCardClick: (agentName: string) => console.log(`Clicked on ${agentName}`),
// onCardClick: (agentName: string) => console.log(`Clicked on ${agentName}`),
},
};
@@ -75,7 +84,7 @@ export const NoAgents: Story = {
args: {
sectionTitle: "Top Agents",
agents: [],
onCardClick: (agentName: string) => console.log(`Clicked on ${agentName}`),
// onCardClick: (agentName: string) => console.log(`Clicked on ${agentName}`),
},
};
@@ -83,7 +92,7 @@ export const WithInteraction: Story = {
args: {
sectionTitle: "Top Agents",
agents: mockTopAgents,
onCardClick: (agentName: string) => console.log(`Clicked on ${agentName}`),
// onCardClick: (agentName: string) => console.log(`Clicked on ${agentName}`),
},
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
@@ -107,6 +116,9 @@ export const MultiRowAgents: Story = {
runs: 60000,
rating: 4.6,
creator_avatar: "https://example.com/avatar4.jpg",
slug: "image-recognition-ai",
creator: "John Doe",
sub_heading: "Image Recognition",
},
{
agent_name: "Natural Language Processor",
@@ -117,6 +129,9 @@ export const MultiRowAgents: Story = {
runs: 80000,
rating: 4.8,
creator_avatar: "https://example.com/avatar5.jpg",
slug: "natural-language-processor",
creator: "John Doe",
sub_heading: "Natural Language Processing",
},
{
agent_name: "Sentiment Analyzer",
@@ -127,6 +142,9 @@ export const MultiRowAgents: Story = {
runs: 45000,
rating: 4.3,
creator_avatar: "https://example.com/avatar6.jpg",
slug: "sentiment-analyzer",
creator: "John Doe",
sub_heading: "Sentiment Analysis",
},
{
agent_name: "Chatbot Builder",
@@ -137,6 +155,9 @@ export const MultiRowAgents: Story = {
runs: 55000,
rating: 4.4,
creator_avatar: "https://example.com/avatar7.jpg",
slug: "chatbot-builder",
creator: "John Doe",
sub_heading: "Chatbot Developer",
},
{
agent_name: "Predictive Analytics Tool",
@@ -147,6 +168,9 @@ export const MultiRowAgents: Story = {
runs: 40000,
rating: 4.2,
creator_avatar: "https://example.com/avatar8.jpg",
slug: "predictive-analytics-tool",
creator: "John Doe",
sub_heading: "Predictive Analytics",
},
{
agent_name: "Text-to-Speech Converter",
@@ -157,9 +181,12 @@ export const MultiRowAgents: Story = {
runs: 35000,
rating: 4.1,
creator_avatar: "https://example.com/avatar9.jpg",
slug: "text-to-speech-converter",
creator: "John Doe",
sub_heading: "Text-to-Speech",
},
],
onCardClick: (agentName: string) => console.log(`Clicked on ${agentName}`),
// onCardClick: (agentName: string) => console.log(`Clicked on ${agentName}`),
},
};

10
autogpt_platform/frontend/src/components/agptui/composite/FeaturedCreators.stories.tsx
View File

@@ -15,7 +15,7 @@ const meta = {
tags: ["autodocs"],
argTypes: {
featuredCreators: { control: "object" },
onCardClick: { action: "cardClicked" },
// onCardClick: { action: "cardClicked" },
},
} satisfies Meta<typeof FeaturedCreators>;
@@ -64,14 +64,14 @@ const defaultCreators = [
export const Default: Story = {
args: {
featuredCreators: defaultCreators,
onCardClick: (creatorName) => console.log(`Clicked on ${creatorName}`),
// onCardClick: (creatorName) => console.log(`Clicked on ${creatorName}`),
},
};
export const SingleCreator: Story = {
args: {
featuredCreators: [defaultCreators[0]],
onCardClick: (creatorName) => console.log(`Clicked on ${creatorName}`),
// onCardClick: (creatorName) => console.log(`Clicked on ${creatorName}`),
},
};
@@ -98,14 +98,14 @@ export const ManyCreators: Story = {
num_agents: 25,
},
],
onCardClick: (creatorName) => console.log(`Clicked on ${creatorName}`),
// onCardClick: (creatorName) => console.log(`Clicked on ${creatorName}`),
},
};
export const WithInteraction: Story = {
args: {
featuredCreators: defaultCreators,
onCardClick: (creatorName) => console.log(`Clicked on ${creatorName}`),
// onCardClick: (creatorName) => console.log(`Clicked on ${creatorName}`),
},
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);

69
autogpt_platform/frontend/src/components/agptui/composite/FeaturedSection.stories.tsx
View File

@@ -1,5 +1,5 @@
import type { Meta, StoryObj } from "@storybook/react";
import { FeaturedSection } from "./FeaturedSection";
import { FeaturedAgent, FeaturedSection } from "./FeaturedSection";
import { userEvent, within, expect } from "@storybook/test";
const meta = {
@@ -15,7 +15,7 @@ const meta = {
tags: ["autodocs"],
argTypes: {
featuredAgents: { control: "object" },
onCardClick: { action: "clicked" },
// onCardClick: { action: "clicked" },
},
} satisfies Meta<typeof FeaturedSection>;
@@ -24,97 +24,102 @@ type Story = StoryObj<typeof meta>;
const mockFeaturedAgents = [
{
agentName: "Personalized Morning Coffee Newsletter example of three lines",
subHeading:
agent_name: "Personalized Morning Coffee Newsletter example of three lines",
sub_heading:
"Transform ideas into breathtaking images with this AI-powered Image Generator.",
creatorName: "AI Solutions Inc.",
creator: "AI Solutions Inc.",
description:
"Elevate your web content with this powerful AI Webpage Copy Improver. Designed for marketers, SEO specialists, and web developers, this tool analyses and enhances website copy for maximum impact. Using advanced language models, it optimizes text for better clarity, SEO performance, and increased conversion rates.",
runs: 50000,
rating: 4.7,
agentImage:
agent_image:
"https://framerusercontent.com/images/KCIpxr9f97EGJgpaoqnjKsrOPwI.jpg",
creatorImage:
creator_avatar:
"https://framerusercontent.com/images/KCIpxr9f97EGJgpaoqnjKsrOPwI.jpg",
slug: "personalized-morning-coffee-newsletter",
},
{
agentName: "Data Analyzer Lite",
subHeading: "Basic data analysis tool",
creatorName: "DataTech",
agent_name: "Data Analyzer Lite",
sub_heading: "Basic data analysis tool",
creator: "DataTech",
description:
"A lightweight data analysis tool for basic data processing needs.",
runs: 10000,
rating: 2.8,
agentImage:
agent_image:
"https://framerusercontent.com/images/KCIpxr9f97EGJgpaoqnjKsrOPwI.jpg",
creatorImage:
creator_avatar:
"https://framerusercontent.com/images/KCIpxr9f97EGJgpaoqnjKsrOPwI.jpg",
slug: "data-analyzer-lite",
},
{
agentName: "CodeAssist AI",
subHeading: "Your AI coding companion",
creatorName: "DevTools Co.",
agent_name: "CodeAssist AI",
sub_heading: "Your AI coding companion",
creator: "DevTools Co.",
description:
"An intelligent coding assistant that helps developers write better code faster.",
runs: 1000000,
rating: 4.9,
agentImage:
agent_image:
"https://framerusercontent.com/images/KCIpxr9f97EGJgpaoqnjKsrOPwI.jpg",
creatorImage:
creator_avatar:
"https://framerusercontent.com/images/KCIpxr9f97EGJgpaoqnjKsrOPwI.jpg",
slug: "codeassist-ai",
},
{
agentName: "MultiTasker",
subHeading: "All-in-one productivity suite",
creatorName: "Productivity Plus",
agent_name: "MultiTasker",
sub_heading: "All-in-one productivity suite",
creator: "Productivity Plus",
description:
"A comprehensive productivity suite that combines task management, note-taking, and project planning into one seamless interface. Features include smart task prioritization, automated scheduling, and AI-powered insights to help you work more efficiently.",
runs: 75000,
rating: 4.5,
agentImage:
agent_image:
"https://framerusercontent.com/images/KCIpxr9f97EGJgpaoqnjKsrOPwI.jpg",
creatorImage:
creator_avatar:
"https://framerusercontent.com/images/KCIpxr9f97EGJgpaoqnjKsrOPwI.jpg",
slug: "multitasker",
},
{
agentName: "QuickTask",
subHeading: "Fast task automation",
creatorName: "EfficientWorks",
agent_name: "QuickTask",
sub_heading: "Fast task automation",
creator: "EfficientWorks",
description: "Simple and efficient task automation tool.",
runs: 50000,
rating: 4.2,
agentImage:
agent_image:
"https://framerusercontent.com/images/KCIpxr9f97EGJgpaoqnjKsrOPwI.jpg",
creatorImage:
creator_avatar:
"https://framerusercontent.com/images/KCIpxr9f97EGJgpaoqnjKsrOPwI.jpg",
slug: "quicktask",
},
];
] satisfies FeaturedAgent[];
export const Default: Story = {
args: {
featuredAgents: mockFeaturedAgents,
onCardClick: (agentName: string) => console.log(`Clicked on ${agentName}`),
// onCardClick: (agentName: string) => console.log(`Clicked on ${agentName}`),
},
};
export const SingleAgent: Story = {
args: {
featuredAgents: [mockFeaturedAgents[0]],
onCardClick: (agentName: string) => console.log(`Clicked on ${agentName}`),
// onCardClick: (agentName: string) => console.log(`Clicked on ${agentName}`),
},
};
export const NoAgents: Story = {
args: {
featuredAgents: [],
onCardClick: (agentName: string) => console.log(`Clicked on ${agentName}`),
// onCardClick: (agentName: string) => console.log(`Clicked on ${agentName}`),
},
};
export const WithInteraction: Story = {
args: {
featuredAgents: mockFeaturedAgents,
onCardClick: (agentName: string) => console.log(`Clicked on ${agentName}`),
// onCardClick: (agentName: string) => console.log(`Clicked on ${agentName}`),
},
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);

407
autogpt_platform/frontend/src/components/ui/form.stories.tsx
View File

@@ -1,6 +1,6 @@
import React from "react";
import type { Meta, StoryObj } from "@storybook/react";
import { useForm } from "react-hook-form";
import { FieldValues, InternalFieldName, RegisterOptions, useForm, UseFormHandleSubmit, UseFormRegister, UseFormWatch } from "react-hook-form";
import { z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod";
@@ -72,10 +72,280 @@ const FormExample = () => {
};
export const Default: Story = {
args: {
children: <FormExample />,
// watch(callback: (data, { name, type }) => void, defaultValues?: {[key:string]: unknown}): { unsubscribe: () => void }
watch: ((name?: any, defaultValue?: any) => {
if (typeof name === 'function') {
return { unsubscribe: () => { } };
}
return defaultValue || {};
}),
getValues: () => ([]),
getFieldState: (name, formState) => ({
invalid: false,
isDirty: false,
isTouched: false,
isValidating: false,
error: undefined,
}),
setError: () => { },
setValue: () => { },
trigger: async () => true,
reset: () => { },
clearErrors: () => { },
formState: {
errors: {},
isDirty: false,
isSubmitting: false,
isValid: true,
isLoading: false,
isSubmitted: false,
isSubmitSuccessful: false,
isValidating: false,
defaultValues: {},
dirtyFields: {},
touchedFields: {},
disabled: false,
submitCount: 0,
validatingFields: {},
},
resetField: () => { },
handleSubmit: (() => {
return async (e?: React.BaseSyntheticEvent) => {
e?.preventDefault();
return Promise.resolve();
};
}) as unknown as UseFormHandleSubmit<any>,
unregister: () => { },
control: {
_subjects: {
state: {
observers: [],
subscribe: () => ({ unsubscribe: () => { } }),
unsubscribe: () => { },
next: () => { }
},
array: {
observers: [],
subscribe: () => ({ unsubscribe: () => { } }),
unsubscribe: () => { },
next: () => { }
},
values: {
observers: [],
subscribe: () => ({ unsubscribe: () => { } }),
unsubscribe: () => { },
next: () => { }
}
},
_reset: () => { },
_resetDefaultValues: () => { },
_getFieldArray: () => [],
_setErrors: () => { },
_updateDisabledField: () => { },
_executeSchema: () => Promise.resolve({ errors: {} }),
handleSubmit: (onSubmit?: any) => (e?: React.BaseSyntheticEvent) => {
e?.preventDefault();
return Promise.resolve();
},
unregister: () => { },
getFieldState: () => ({
invalid: false,
isDirty: false,
isTouched: false,
isValidating: false,
error: undefined,
}),
setError: () => { },
_disableForm: () => { },
_removeUnmounted: () => { },
_names: { mount: new Set(), array: new Set(), watch: new Set(), unMount: new Set(), disabled: new Set() },
_state: { mount: false, watch: false, action: false },
_options: { mode: 'onSubmit', defaultValues: {} },
_formState: {
isDirty: false,
isSubmitted: false,
submitCount: 0,
isLoading: false,
isSubmitSuccessful: false,
isSubmitting: false,
isValidating: false,
isValid: true,
disabled: false, dirtyFields: {}, touchedFields: {}, errors: {}, validatingFields: {}
},
_fields: {},
_defaultValues: {},
_formValues: {},
_proxyFormState: {
isDirty: false,
dirtyFields: false,
touchedFields: false,
errors: false,
isValid: true,
isValidating: false,
validatingFields: false,
},
_getDirty: () => false,
_updateValid: () => { },
_updateFieldArray: () => { },
_getWatch: () => ({}),
_updateFormState: () => { },
register: ((name: string, options?: RegisterOptions<any>) => ({
name,
onChange: (e: any) => Promise.resolve(),
onBlur: (e: any) => Promise.resolve(),
ref: () => { },
})) as unknown as UseFormRegister<any>
},
register: ((name: string) => ({
name,
onChange: (e: any) => Promise.resolve(),
onBlur: (e: any) => Promise.resolve(),
ref: () => { }
})) as UseFormRegister<FieldValues>,
setFocus: () => { },
},
render: () => <FormExample />,
};
export const WithError: Story = {
args: {
children: <FormExample />,
// watch(callback: (data, { name, type }) => void, defaultValues?: {[key:string]: unknown}): { unsubscribe: () => void }
watch: ((name?: any, defaultValue?: any) => {
if (typeof name === 'function') {
return { unsubscribe: () => { } };
}
return defaultValue || {};
}),
getValues: () => ([]),
getFieldState: (name, formState) => ({
invalid: false,
isDirty: false,
isTouched: false,
isValidating: false,
error: undefined,
}),
setError: () => { },
setValue: () => { },
trigger: async () => true,
reset: () => { },
clearErrors: () => { },
formState: {
errors: {},
isDirty: false,
isSubmitting: false,
isValid: true,
isLoading: false,
isSubmitted: false,
isSubmitSuccessful: false,
isValidating: false,
defaultValues: {},
dirtyFields: {},
touchedFields: {},
disabled: false,
submitCount: 0,
validatingFields: {},
},
resetField: () => { },
handleSubmit: (() => {
return async (e?: React.BaseSyntheticEvent) => {
e?.preventDefault();
return Promise.resolve();
};
}) as unknown as UseFormHandleSubmit<any>,
unregister: () => { },
control: {
_subjects: {
state: {
observers: [],
subscribe: () => ({ unsubscribe: () => { } }),
unsubscribe: () => { },
next: () => { }
},
array: {
observers: [],
subscribe: () => ({ unsubscribe: () => { } }),
unsubscribe: () => { },
next: () => { }
},
values: {
observers: [],
subscribe: () => ({ unsubscribe: () => { } }),
unsubscribe: () => { },
next: () => { }
}
},
_reset: () => { },
_resetDefaultValues: () => { },
_getFieldArray: () => [],
_setErrors: () => { },
_updateDisabledField: () => { },
_executeSchema: () => Promise.resolve({ errors: {} }),
handleSubmit: (onSubmit?: any) => (e?: React.BaseSyntheticEvent) => {
e?.preventDefault();
return Promise.resolve();
},
unregister: () => { },
getFieldState: () => ({
invalid: false,
isDirty: false,
isTouched: false,
isValidating: false,
error: undefined,
}),
setError: () => { },
_disableForm: () => { },
_removeUnmounted: () => { },
_names: { mount: new Set(), array: new Set(), watch: new Set(), unMount: new Set(), disabled: new Set() },
_state: { mount: false, watch: false, action: false },
_options: { mode: 'onSubmit', defaultValues: {} },
_formState: {
isDirty: false,
isSubmitted: false,
submitCount: 0,
isLoading: false,
isSubmitSuccessful: false,
isSubmitting: false,
isValidating: false,
isValid: true,
disabled: false, dirtyFields: {}, touchedFields: {}, errors: {}, validatingFields: {}
},
_fields: {},
_defaultValues: {},
_formValues: {},
_proxyFormState: {
isDirty: false,
dirtyFields: false,
touchedFields: false,
errors: false,
isValid: true,
isValidating: false,
validatingFields: false,
},
_getDirty: () => false,
_updateValid: () => { },
_updateFieldArray: () => { },
_getWatch: () => ({}),
_updateFormState: () => { },
register: ((name: string, options?: RegisterOptions<any>) => ({
name,
onChange: (e: any) => Promise.resolve(),
onBlur: (e: any) => Promise.resolve(),
ref: () => { },
})) as unknown as UseFormRegister<any>
},
register: ((name: string) => ({
name,
onChange: (e: any) => Promise.resolve(),
onBlur: (e: any) => Promise.resolve(),
ref: () => { }
})) as UseFormRegister<FieldValues>,
setFocus: () => { },
},
render: () => {
const FormWithError = () => {
const form = useForm<z.infer<typeof formSchema>>({
@@ -126,6 +396,141 @@ export const WithError: Story = {
};
export const WithDefaultValue: Story = {
args: {
children: <FormExample />,
// watch(callback: (data, { name, type }) => void, defaultValues?: {[key:string]: unknown}): { unsubscribe: () => void }
watch: ((name?: any, defaultValue?: any) => {
if (typeof name === 'function') {
return { unsubscribe: () => { } };
}
return defaultValue || {};
}),
getValues: () => ([]),
getFieldState: (name, formState) => ({
invalid: false,
isDirty: false,
isTouched: false,
isValidating: false,
error: undefined,
}),
setError: () => { },
setValue: () => { },
trigger: async () => true,
reset: () => { },
clearErrors: () => { },
formState: {
errors: {},
isDirty: false,
isSubmitting: false,
isValid: true,
isLoading: false,
isSubmitted: false,
isSubmitSuccessful: false,
isValidating: false,
defaultValues: {},
dirtyFields: {},
touchedFields: {},
disabled: false,
submitCount: 0,
validatingFields: {},
},
resetField: () => { },
handleSubmit: (() => {
return async (e?: React.BaseSyntheticEvent) => {
e?.preventDefault();
return Promise.resolve();
};
}) as unknown as UseFormHandleSubmit<any>,
unregister: () => { },
control: {
_subjects: {
state: {
observers: [],
subscribe: () => ({ unsubscribe: () => { } }),
unsubscribe: () => { },
next: () => { }
},
array: {
observers: [],
subscribe: () => ({ unsubscribe: () => { } }),
unsubscribe: () => { },
next: () => { }
},
values: {
observers: [],
subscribe: () => ({ unsubscribe: () => { } }),
unsubscribe: () => { },
next: () => { }
}
},
_reset: () => { },
_resetDefaultValues: () => { },
_getFieldArray: () => [],
_setErrors: () => { },
_updateDisabledField: () => { },
_executeSchema: () => Promise.resolve({ errors: {} }),
handleSubmit: (onSubmit?: any) => (e?: React.BaseSyntheticEvent) => {
e?.preventDefault();
return Promise.resolve();
},
unregister: () => { },
getFieldState: () => ({
invalid: false,
isDirty: false,
isTouched: false,
isValidating: false,
error: undefined,
}),
setError: () => { },
_disableForm: () => { },
_removeUnmounted: () => { },
_names: { mount: new Set(), array: new Set(), watch: new Set(), unMount: new Set(), disabled: new Set() },
_state: { mount: false, watch: false, action: false },
_options: { mode: 'onSubmit', defaultValues: {} },
_formState: {
isDirty: false,
isSubmitted: false,
submitCount: 0,
isLoading: false,
isSubmitSuccessful: false,
isSubmitting: false,
isValidating: false,
isValid: true,
disabled: false, dirtyFields: {}, touchedFields: {}, errors: {}, validatingFields: {}
},
_fields: {},
_defaultValues: {},
_formValues: {},
_proxyFormState: {
isDirty: false,
dirtyFields: false,
touchedFields: false,
errors: false,
isValid: true,
isValidating: false,
validatingFields: false,
},
_getDirty: () => false,
_updateValid: () => { },
_updateFieldArray: () => { },
_getWatch: () => ({}),
_updateFormState: () => { },
register: ((name: string, options?: RegisterOptions<any>) => ({
name,
onChange: (e: any) => Promise.resolve(),
onBlur: (e: any) => Promise.resolve(),
ref: () => { },
})) as unknown as UseFormRegister<any>
},
register: ((name: string) => ({
name,
onChange: (e: any) => Promise.resolve(),
onBlur: (e: any) => Promise.resolve(),
ref: () => { }
})) as UseFormRegister<FieldValues>,
setFocus: () => { },
},
render: () => {
const FormWithDefaultValue = () => {
const form = useForm<z.infer<typeof formSchema>>({