mirror of
https://github.com/Significant-Gravitas/AutoGPT.git
synced 2026-04-08 03:00:28 -04:00
delete pages
This commit is contained in:
SwiftyOS
@@ -98,7 +98,6 @@ export const Variants: Story = {
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
export const Sizes: Story = {
|
||||
render: (args) => (
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
@@ -125,17 +124,17 @@ export const Sizes: Story = {
|
||||
await expect(buttons).toHaveLength(5);
|
||||
const sizeClasses = [
|
||||
"h-8 px-3 py-1.5 text-xs",
|
||||
"h-10 px-4 py-2 text-sm",
|
||||
"h-10 px-4 py-2 text-sm",
|
||||
"h-12 px-5 py-2.5 text-lg",
|
||||
"h-10 w-28",
|
||||
"h-10 w-10",
|
||||
];
|
||||
buttons.forEach((button, index) => {
|
||||
await expect(button).toHaveAttribute(
|
||||
for (let i = 0; i < buttons.length; i++) {
|
||||
await expect(buttons[i]).toHaveAttribute(
|
||||
"class",
|
||||
expect.stringContaining(sizeClasses[index]),
|
||||
expect.stringContaining(sizeClasses[i])
|
||||
);
|
||||
});
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
@@ -1,229 +0,0 @@
|
||||
import type { Meta, StoryObj } from "@storybook/react";
|
||||
import { AgentPage } from "./AgentPage";
|
||||
import { userEvent, within } from "@storybook/test";
|
||||
import { IconType } from "../../ui/icons";
|
||||
|
||||
const meta = {
|
||||
title: "AGPT UI/Agent Store/Agent Page",
|
||||
component: AgentPage,
|
||||
parameters: {
|
||||
layout: {
|
||||
center: true,
|
||||
fullscreen: true,
|
||||
padding: 0,
|
||||
},
|
||||
},
|
||||
tags: ["autodocs"],
|
||||
argTypes: {
|
||||
isLoggedIn: { control: "boolean" },
|
||||
userName: { control: "text" },
|
||||
userEmail: { control: "text" },
|
||||
navLinks: { control: "object" },
|
||||
activeLink: { control: "text" },
|
||||
menuItemGroups: { control: "object" },
|
||||
agentInfo: { control: "object" },
|
||||
agentImages: { control: "object" },
|
||||
otherAgentsByCreator: { control: "object" },
|
||||
similarAgents: { control: "object" },
|
||||
},
|
||||
} satisfies Meta<typeof AgentPage>;
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof meta>;
|
||||
|
||||
const mockNavLinks = [
|
||||
{ name: "Marketplace", href: "/" },
|
||||
{ name: "Library", href: "/library" },
|
||||
{ name: "Build", href: "/build" },
|
||||
];
|
||||
|
||||
const mockMenuItemGroups = [
|
||||
{
|
||||
items: [
|
||||
{ icon: IconType.Edit, text: "Edit profile", href: "/profile/edit" },
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{
|
||||
icon: IconType.LayoutDashboard,
|
||||
text: "Creator Dashboard",
|
||||
href: "/dashboard",
|
||||
},
|
||||
{
|
||||
icon: IconType.UploadCloud,
|
||||
text: "Publish an agent",
|
||||
href: "/publish",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [{ icon: IconType.Settings, text: "Settings", href: "/settings" }],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{
|
||||
icon: IconType.LogOut,
|
||||
text: "Log out",
|
||||
onClick: () => console.log("Logged out"),
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const mockAgentInfo = {
|
||||
name: "AI Video Generator",
|
||||
creator: "Toran Richards",
|
||||
shortDescription:
|
||||
"Transform ideas into breathtaking images with this AI-powered Image Generator.",
|
||||
longDescription: `Create Viral-Ready Content in Seconds! Transform trending topics into engaging videos with this cutting-edge AI Video Generator. Perfect for content creators, social media managers, and marketers looking to quickly produce high-quality content.
|
||||
|
||||
Key features include:
|
||||
- Customizable video output
|
||||
- 15+ pre-made templates
|
||||
- Auto scene detection
|
||||
- Smart text-to-speech
|
||||
- Multiple export formats
|
||||
- SEO-optimized suggestions
|
||||
|
||||
Watch as the AI transforms your ideas into attention-grabbing scripts optimized for maximum engagement - SEO-optimized titles that capture attention in the first 3 seconds - Dual narrative storytelling, using metaphors, and strategically placed calls-to-action. The AI Short-form Video Generator consistently produces viral-worthy videos that resonate with your audience.`,
|
||||
rating: 4.7,
|
||||
runs: 1500,
|
||||
categories: ["Video", "Content Creation", "Social Media"],
|
||||
lastUpdated: "2 days ago",
|
||||
version: "4.2.0",
|
||||
};
|
||||
|
||||
const mockAgentImages = [
|
||||
"https://ddz4ak4pa3d19.cloudfront.net/cache/cc/11/cc1172271dcf723a34f488a3344e82b2.jpg",
|
||||
"https://upload.wikimedia.org/wikipedia/commons/c/c5/Big_buck_bunny_poster_big.jpg",
|
||||
];
|
||||
|
||||
const mockOtherAgentsByCreator = [
|
||||
{
|
||||
agentName: "Content Wizard",
|
||||
agentImage:
|
||||
"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.7,
|
||||
avatarSrc: "https://example.com/avatar1.jpg",
|
||||
},
|
||||
{
|
||||
agentName: "Data Analyzer Pro",
|
||||
agentImage:
|
||||
"https://ddz4ak4pa3d19.cloudfront.net/cache/07/78/0778415062f8dff56a046a7eca44567c.jpg",
|
||||
description:
|
||||
"Powerful tool for analyzing large datasets and generating insights.",
|
||||
runs: 50000,
|
||||
rating: 5,
|
||||
avatarSrc: "https://github.com/shadcn.png",
|
||||
},
|
||||
{
|
||||
agentName: "AI Copywriter",
|
||||
agentImage:
|
||||
"https://ddz4ak4pa3d19.cloudfront.net/cache/14/9e/149ebb9014aa8c0097e72ed89845af0e.jpg",
|
||||
description:
|
||||
"AI-powered copywriting assistant for creating compelling marketing copy.",
|
||||
runs: 62000,
|
||||
rating: 4.8,
|
||||
avatarSrc: "https://example.com/avatar4.jpg",
|
||||
},
|
||||
];
|
||||
|
||||
const mockSimilarAgents = [
|
||||
{
|
||||
agentName: "Video Master Pro",
|
||||
agentImage:
|
||||
"https://ddz4ak4pa3d19.cloudfront.net/cache/59/b9/59b9415d4044f48f9b9e318c4c5a7984.jpg",
|
||||
description:
|
||||
"Professional video editing and enhancement tool powered by AI.",
|
||||
runs: 80000,
|
||||
rating: 4.8,
|
||||
avatarSrc: "https://example.com/avatar2.jpg",
|
||||
},
|
||||
{
|
||||
agentName: "Keyword Genius",
|
||||
agentImage:
|
||||
"https://ddz4ak4pa3d19.cloudfront.net/cache/11/47/114784105a9b180e08e117cbf2612e5b.jpg",
|
||||
description:
|
||||
"Advanced keyword research and analysis tool for SEO professionals.",
|
||||
runs: 60000,
|
||||
rating: 4.6,
|
||||
avatarSrc: "https://example.com/avatar3.jpg",
|
||||
},
|
||||
{
|
||||
agentName: "Backlink Builder",
|
||||
agentImage:
|
||||
"https://ddz4ak4pa3d19.cloudfront.net/cache/14/9e/149ebb9014aa8c0097e72ed89845af0e.jpg",
|
||||
description:
|
||||
"Automated tool for building high-quality backlinks to improve SEO performance.",
|
||||
runs: 55000,
|
||||
rating: 4.7,
|
||||
avatarSrc: "https://example.com/avatar5.jpg",
|
||||
},
|
||||
];
|
||||
|
||||
const mockAgentInfoClear = {
|
||||
name: "",
|
||||
creator: "",
|
||||
shortDescription: "",
|
||||
longDescription: "",
|
||||
rating: 0,
|
||||
runs: 0,
|
||||
categories: [""],
|
||||
lastUpdated: "",
|
||||
version: "",
|
||||
};
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
isLoggedIn: true,
|
||||
userName: "John Doe",
|
||||
userEmail: "john.doe@example.com",
|
||||
navLinks: mockNavLinks,
|
||||
activeLink: "/marketplace",
|
||||
menuItemGroups: mockMenuItemGroups,
|
||||
agentInfo: mockAgentInfo,
|
||||
agentImages: mockAgentImages,
|
||||
otherAgentsByCreator: mockOtherAgentsByCreator,
|
||||
similarAgents: mockSimilarAgents,
|
||||
},
|
||||
};
|
||||
|
||||
export const WithInteraction: Story = {
|
||||
args: {
|
||||
...Default.args,
|
||||
},
|
||||
play: async ({ canvasElement }) => {
|
||||
const canvas = within(canvasElement);
|
||||
|
||||
// Click on the "Run Agent" button
|
||||
const runAgentButton = canvas.getByText("Run Agent");
|
||||
await userEvent.click(runAgentButton);
|
||||
|
||||
// Click on an "Other agents by creator" card
|
||||
const otherAgentCard = canvas.getByText("Content Wizard");
|
||||
await userEvent.click(otherAgentCard);
|
||||
|
||||
// Click on the "Become a Creator" button
|
||||
const becomeCreatorButton = canvas.getByText("Become a Creator");
|
||||
await userEvent.click(becomeCreatorButton);
|
||||
},
|
||||
};
|
||||
|
||||
export const LongLists: Story = {
|
||||
args: {
|
||||
...Default.args,
|
||||
otherAgentsByCreator: Array(10).fill(mockOtherAgentsByCreator[0]),
|
||||
similarAgents: Array(10).fill(mockSimilarAgents[0]),
|
||||
},
|
||||
};
|
||||
|
||||
export const Empty: Story = {
|
||||
args: {
|
||||
...Default.args,
|
||||
agentInfo: mockAgentInfoClear,
|
||||
},
|
||||
};
|
||||
@@ -1,161 +0,0 @@
|
||||
import * as React from "react";
|
||||
import { Navbar } from "@/components/agptui/Navbar";
|
||||
import { AgentInfo } from "@/components/agptui/AgentInfo";
|
||||
import { AgentImages } from "@/components/agptui/AgentImages";
|
||||
import { BecomeACreator } from "@/components/agptui/BecomeACreator";
|
||||
import { AgentsSection } from "@/components/agptui/composite/AgentsSection";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
import { IconType } from "@/components/ui/icons";
|
||||
import { BreadCrumbs } from "@/components/agptui/BreadCrumbs";
|
||||
|
||||
interface AgentPageProps {
|
||||
isLoggedIn: boolean;
|
||||
userName: string;
|
||||
userEmail: string;
|
||||
navLinks: { name: string; href: string }[];
|
||||
activeLink: string;
|
||||
menuItemGroups: {
|
||||
groupName?: string;
|
||||
items: {
|
||||
icon: IconType;
|
||||
text: string;
|
||||
href?: string;
|
||||
onClick?: () => void;
|
||||
}[];
|
||||
}[];
|
||||
agentInfo: {
|
||||
name: string;
|
||||
creator: string;
|
||||
shortDescription: string;
|
||||
longDescription: string;
|
||||
rating: number;
|
||||
runs: number;
|
||||
categories: string[];
|
||||
lastUpdated: string;
|
||||
version: string;
|
||||
};
|
||||
agentImages: string[];
|
||||
otherAgentsByCreator: {
|
||||
agentName: string;
|
||||
agentImage: string;
|
||||
description: string;
|
||||
runs: number;
|
||||
rating: number;
|
||||
avatarSrc: string;
|
||||
}[];
|
||||
similarAgents: {
|
||||
agentName: string;
|
||||
agentImage: string;
|
||||
description: string;
|
||||
runs: number;
|
||||
rating: number;
|
||||
avatarSrc: string;
|
||||
}[];
|
||||
}
|
||||
|
||||
export const AgentPage: React.FC<AgentPageProps> = ({
|
||||
isLoggedIn,
|
||||
userName,
|
||||
userEmail,
|
||||
navLinks,
|
||||
activeLink,
|
||||
menuItemGroups,
|
||||
agentInfo,
|
||||
agentImages,
|
||||
otherAgentsByCreator,
|
||||
similarAgents,
|
||||
}) => {
|
||||
const handleRunAgent = () => {
|
||||
console.log("Run agent clicked");
|
||||
// Implement run agent functionality
|
||||
};
|
||||
|
||||
const handleCardClick = (agentName: string) => {
|
||||
console.log("Clicked on agent:", agentName);
|
||||
// Implement card click functionality
|
||||
};
|
||||
|
||||
const handleBecomeCreator = () => {
|
||||
console.log("Become a Creator clicked");
|
||||
// Implement become a creator functionality
|
||||
};
|
||||
|
||||
const breadcrumbs = [
|
||||
{ name: "Marketplace", link: "/marketplace" },
|
||||
{ name: agentInfo.name, link: "#" },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="mx-auto w-screen max-w-[1360px]">
|
||||
<Navbar
|
||||
isLoggedIn={isLoggedIn}
|
||||
userName={userName}
|
||||
userEmail={userEmail}
|
||||
links={navLinks}
|
||||
activeLink={activeLink}
|
||||
menuItemGroups={menuItemGroups}
|
||||
/>
|
||||
<main className="px-4 md:mt-4 lg:mt-8">
|
||||
<BreadCrumbs items={breadcrumbs} />
|
||||
|
||||
<div className="flex flex-col lg:flex-row lg:gap-8 xl:gap-12">
|
||||
<div className="w-full lg:max-w-[396px]">
|
||||
<AgentInfo
|
||||
name={agentInfo.name}
|
||||
creator={agentInfo.creator}
|
||||
shortDescription={agentInfo.shortDescription}
|
||||
longDescription={agentInfo.longDescription}
|
||||
rating={agentInfo.rating}
|
||||
runs={agentInfo.runs}
|
||||
categories={agentInfo.categories}
|
||||
lastUpdated={agentInfo.lastUpdated}
|
||||
version={agentInfo.version}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<AgentImages images={agentImages} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Separator className="my-6" />
|
||||
<AgentsSection
|
||||
agents={otherAgentsByCreator.map((agent) => ({
|
||||
slug: agent.agentName.toLowerCase().replace(/\s+/g, "-"),
|
||||
agent_name: agent.agentName,
|
||||
agent_image: agent.agentImage,
|
||||
creator: agentInfo.creator,
|
||||
creator_avatar: agent.avatarSrc,
|
||||
sub_heading: "",
|
||||
description: agent.description,
|
||||
runs: agent.runs,
|
||||
rating: agent.rating,
|
||||
}))}
|
||||
onCardClick={handleCardClick}
|
||||
sectionTitle={`Other agents by ${agentInfo.creator}`}
|
||||
/>
|
||||
<Separator className="my-6" />
|
||||
<AgentsSection
|
||||
agents={similarAgents.map((agent) => ({
|
||||
slug: agent.agentName.toLowerCase().replace(/\s+/g, "-"),
|
||||
agent_name: agent.agentName,
|
||||
agent_image: agent.agentImage,
|
||||
creator: agentInfo.creator,
|
||||
creator_avatar: agent.avatarSrc,
|
||||
sub_heading: "",
|
||||
description: agent.description,
|
||||
runs: agent.runs,
|
||||
rating: agent.rating,
|
||||
}))}
|
||||
onCardClick={handleCardClick}
|
||||
sectionTitle="Similar agents"
|
||||
/>
|
||||
<BecomeACreator
|
||||
title="Want to contribute?"
|
||||
description="Join our ever-growing community of hackers and tinkerers"
|
||||
buttonText="Become a Creator"
|
||||
onButtonClick={handleBecomeCreator}
|
||||
/>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -1,149 +0,0 @@
|
||||
import type { Meta, StoryObj } from "@storybook/react";
|
||||
import { CreatorDashboardPage } from "./CreatorDashboardPage";
|
||||
import { IconType } from "../../ui/icons";
|
||||
import { StatusType } from "../Status";
|
||||
|
||||
const meta: Meta<typeof CreatorDashboardPage> = {
|
||||
title: "AGPT UI/Agent Store/Creator Dashboard Page",
|
||||
component: CreatorDashboardPage,
|
||||
parameters: {
|
||||
layout: {
|
||||
center: true,
|
||||
fullscreen: true,
|
||||
padding: 0,
|
||||
},
|
||||
},
|
||||
tags: ["autodocs"],
|
||||
argTypes: {
|
||||
isLoggedIn: { control: "boolean" },
|
||||
},
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof CreatorDashboardPage>;
|
||||
|
||||
const sampleNavLinks = [
|
||||
{ name: "Home", href: "/" },
|
||||
{ name: "Marketplace", href: "/marketplace" },
|
||||
{ name: "Dashboard", href: "/dashboard" },
|
||||
];
|
||||
|
||||
const sampleMenuItemGroups = [
|
||||
{
|
||||
items: [
|
||||
{ icon: IconType.Edit, text: "Edit profile", href: "/profile/edit" },
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{
|
||||
icon: IconType.LayoutDashboard,
|
||||
text: "Creator Dashboard",
|
||||
href: "/dashboard",
|
||||
},
|
||||
{
|
||||
icon: IconType.UploadCloud,
|
||||
text: "Publish an agent",
|
||||
href: "/publish",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [{ icon: IconType.Settings, text: "Settings", href: "/settings" }],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{
|
||||
icon: IconType.LogOut,
|
||||
text: "Log out",
|
||||
onClick: () => console.log("Logged out"),
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const sampleSidebarLinkGroups = [
|
||||
{
|
||||
links: [{ text: "Integrations", href: "/integrations" }],
|
||||
},
|
||||
{
|
||||
links: [
|
||||
{ text: "Profile", href: "/profile" },
|
||||
{ text: "Settings", href: "/settings" },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const sampleAgents = [
|
||||
{
|
||||
agentName: "Super Coder",
|
||||
description: "An AI agent that writes clean, efficient code",
|
||||
imageSrc:
|
||||
"https://ddz4ak4pa3d19.cloudfront.net/cache/11/47/114784105a9b180e08e117cbf2612e5b.jpg",
|
||||
dateSubmitted: "2023-05-15",
|
||||
status: "approved" as StatusType,
|
||||
runs: 1500,
|
||||
rating: 4.8,
|
||||
onEdit: () => console.log("Edit Super Coder"),
|
||||
},
|
||||
{
|
||||
agentName: "Data Analyzer",
|
||||
description: "Processes and analyzes large datasets with ease",
|
||||
imageSrc:
|
||||
"https://ddz4ak4pa3d19.cloudfront.net/cache/40/f7/40f7bc97c952f8df0f9c88d29defe8d4.jpg",
|
||||
dateSubmitted: "2023-05-10",
|
||||
status: "awaiting_review" as StatusType,
|
||||
runs: 1200,
|
||||
rating: 4.5,
|
||||
onEdit: () => console.log("Edit Data Analyzer"),
|
||||
},
|
||||
{
|
||||
agentName: "UI Designer",
|
||||
description: "Creates beautiful and intuitive user interfaces",
|
||||
imageSrc:
|
||||
"https://ddz4ak4pa3d19.cloudfront.net/cache/14/9e/149ebb9014aa8c0097e72ed89845af0e.jpg",
|
||||
dateSubmitted: "2023-05-05",
|
||||
status: "draft" as StatusType,
|
||||
runs: 800,
|
||||
rating: 4.2,
|
||||
onEdit: () => console.log("Edit UI Designer"),
|
||||
},
|
||||
];
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
isLoggedIn: true,
|
||||
userName: "John Doe",
|
||||
userEmail: "john.doe@example.com",
|
||||
navLinks: sampleNavLinks,
|
||||
activeLink: "Dashboard",
|
||||
menuItemGroups: sampleMenuItemGroups,
|
||||
sidebarLinkGroups: sampleSidebarLinkGroups,
|
||||
agents: sampleAgents,
|
||||
},
|
||||
};
|
||||
|
||||
export const NoAgents: Story = {
|
||||
args: {
|
||||
...Default.args,
|
||||
agents: [],
|
||||
},
|
||||
};
|
||||
|
||||
export const ManyAgents: Story = {
|
||||
args: {
|
||||
...Default.args,
|
||||
agents: Array(10)
|
||||
.fill(sampleAgents[0])
|
||||
.map((agent, index) => ({
|
||||
...agent,
|
||||
agentName: `Agent ${index + 1}`,
|
||||
status: ["approved", "awaiting_review", "draft", "rejected"][
|
||||
index % 4
|
||||
] as StatusType,
|
||||
rating: Math.round((4 + Math.random()) * 10) / 10,
|
||||
runs: Math.floor(Math.random() * 2000) + 500,
|
||||
onEdit: () => console.log(`Edit Agent ${index + 1}`),
|
||||
})),
|
||||
},
|
||||
};
|
||||
@@ -1,107 +0,0 @@
|
||||
import * as React from "react";
|
||||
import { Navbar } from "@/components/agptui/Navbar";
|
||||
import { Sidebar } from "@/components/agptui/Sidebar";
|
||||
import { AgentTable } from "@/components/agptui/AgentTable";
|
||||
import { Button } from "@/components/agptui/Button";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
import { IconType } from "@/components/ui/icons";
|
||||
|
||||
interface CreatorDashboardPageProps {
|
||||
isLoggedIn: boolean;
|
||||
userName: string;
|
||||
userEmail: string;
|
||||
navLinks: { name: string; href: string }[];
|
||||
activeLink: string;
|
||||
menuItemGroups: {
|
||||
groupName?: string;
|
||||
items: {
|
||||
icon: IconType;
|
||||
text: string;
|
||||
href?: string;
|
||||
onClick?: () => void;
|
||||
}[];
|
||||
}[];
|
||||
sidebarLinkGroups: {
|
||||
links: {
|
||||
text: string;
|
||||
href: string;
|
||||
}[];
|
||||
}[];
|
||||
agents: {
|
||||
agentName: string;
|
||||
description: string;
|
||||
imageSrc: string;
|
||||
dateSubmitted: string;
|
||||
status: string;
|
||||
runs: number;
|
||||
rating: number;
|
||||
onEdit: () => void;
|
||||
}[];
|
||||
}
|
||||
|
||||
export const CreatorDashboardPage: React.FC<CreatorDashboardPageProps> = ({
|
||||
isLoggedIn,
|
||||
userName,
|
||||
userEmail,
|
||||
navLinks,
|
||||
activeLink,
|
||||
menuItemGroups,
|
||||
sidebarLinkGroups,
|
||||
agents,
|
||||
}) => {
|
||||
return (
|
||||
<div className="mx-auto w-full max-w-[1440px] bg-white">
|
||||
<Navbar
|
||||
isLoggedIn={isLoggedIn}
|
||||
userName={userName}
|
||||
userEmail={userEmail}
|
||||
links={navLinks}
|
||||
activeLink={activeLink}
|
||||
menuItemGroups={menuItemGroups}
|
||||
/>
|
||||
|
||||
<div className="flex flex-col md:flex-row">
|
||||
<Sidebar linkGroups={sidebarLinkGroups} />
|
||||
|
||||
<main className="flex-1 px-4 py-6 md:px-10 md:py-8">
|
||||
{/* Header Section */}
|
||||
<div className="mb-6 md:mb-8">
|
||||
<h1 className="text-2xl font-medium leading-tight text-neutral-900 md:text-[32px] md:leading-[38px]">
|
||||
Agent dashboard
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
{/* Submit Agent Section */}
|
||||
<div className="mb-6 md:mb-8">
|
||||
<h2 className="mb-1 text-lg font-medium leading-tight text-neutral-900 md:text-[20px] md:leading-[24px]">
|
||||
Submit an agent
|
||||
</h2>
|
||||
<div className="flex flex-col gap-4 md:flex-row md:items-end md:justify-between md:gap-0">
|
||||
<p className="text-sm leading-[20px] text-neutral-600 md:text-[14px]">
|
||||
Select from the list of agents you currently already have, or
|
||||
upload from your local machine.
|
||||
</p>
|
||||
<button className="inline-flex h-12 w-full items-center justify-center gap-2.5 rounded-[38px] bg-neutral-800 px-5 py-3 md:ml-4 md:w-auto md:justify-start">
|
||||
<span className="font-['Geist'] text-base font-medium leading-normal text-white">
|
||||
Submit agent
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Separator className="my-6 bg-neutral-300 md:my-8" />
|
||||
|
||||
{/* Agents List Section */}
|
||||
<div className="mb-4 md:mb-6">
|
||||
<h2 className="text-lg font-medium leading-tight text-neutral-900 md:text-[20px] md:leading-[24px]">
|
||||
Your uploaded agents
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
{/* Agent Table */}
|
||||
<AgentTable agents={agents} />
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -1,214 +0,0 @@
|
||||
import type { Meta, StoryObj } from "@storybook/react";
|
||||
import { CreatorPage } from "./CreatorPage";
|
||||
import { userEvent, within } from "@storybook/test";
|
||||
import { IconType } from "../../ui/icons";
|
||||
|
||||
const meta = {
|
||||
title: "AGPT UI/Agent Store/Creator Page",
|
||||
component: CreatorPage,
|
||||
parameters: {
|
||||
layout: {
|
||||
center: true,
|
||||
fullscreen: true,
|
||||
padding: 0,
|
||||
},
|
||||
},
|
||||
tags: ["autodocs"],
|
||||
argTypes: {
|
||||
isLoggedIn: { control: "boolean" },
|
||||
userName: { control: "text" },
|
||||
userEmail: { control: "text" },
|
||||
navLinks: { control: "object" },
|
||||
activeLink: { control: "text" },
|
||||
menuItemGroups: { control: "object" },
|
||||
creatorInfo: { control: "object" },
|
||||
creatorAgents: { control: "object" },
|
||||
},
|
||||
} satisfies Meta<typeof CreatorPage>;
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof meta>;
|
||||
|
||||
const mockNavLinks = [
|
||||
{ name: "Marketplace", href: "/" },
|
||||
{ name: "Library", href: "/library" },
|
||||
{ name: "Build", href: "/build" },
|
||||
];
|
||||
|
||||
const mockMenuItemGroups = [
|
||||
{
|
||||
items: [
|
||||
{ icon: IconType.Edit, text: "Edit profile", href: "/profile/edit" },
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{
|
||||
icon: IconType.LayoutDashboard,
|
||||
text: "Creator Dashboard",
|
||||
href: "/dashboard",
|
||||
},
|
||||
{
|
||||
icon: IconType.UploadCloud,
|
||||
text: "Publish an agent",
|
||||
href: "/publish",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [{ icon: IconType.Settings, text: "Settings", href: "/settings" }],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{
|
||||
icon: IconType.LogOut,
|
||||
text: "Log out",
|
||||
onClick: () => console.log("Logged out"),
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const mockCreatorInfo = {
|
||||
name: "AI Labs",
|
||||
username: "ailabs",
|
||||
description:
|
||||
"Our agents are designed to bring happiness and positive vibes to your daily routine. Each template helps you create and live the life of your dreams while guiding you to become your best every day",
|
||||
avgRating: 4.8,
|
||||
agentCount: 15,
|
||||
topCategories: ["SEO", "Marketing", "Data Analysis"],
|
||||
avatarSrc: "https://example.com/avatar1.jpg",
|
||||
otherLinks: {
|
||||
website: "https://ailabs.com",
|
||||
github: "https://github.com/ailabs",
|
||||
linkedin: "https://linkedin.com/company/ailabs",
|
||||
other: ["https://twitter.com/ailabs", "https://medium.com/@ailabs"],
|
||||
},
|
||||
};
|
||||
|
||||
const mockCreatorAgents = [
|
||||
{
|
||||
agentName: "Super SEO Optimizer",
|
||||
agentImage:
|
||||
"https://ddz4ak4pa3d19.cloudfront.net/cache/cc/11/cc1172271dcf723a34f488a3344e82b2.jpg",
|
||||
description:
|
||||
"Boost your website's search engine rankings with our advanced AI-powered SEO optimization tool.",
|
||||
runs: 100000,
|
||||
rating: 4.9,
|
||||
avatarSrc: "https://example.com/avatar1.jpg",
|
||||
},
|
||||
{
|
||||
agentName: "Content Wizard",
|
||||
agentImage:
|
||||
"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.7,
|
||||
avatarSrc: "https://example.com/avatar2.jpg",
|
||||
},
|
||||
{
|
||||
agentName: "Data Analyzer Pro",
|
||||
agentImage:
|
||||
"https://ddz4ak4pa3d19.cloudfront.net/cache/07/78/0778415062f8dff56a046a7eca44567c.jpg",
|
||||
description:
|
||||
"Powerful tool for analyzing large datasets and generating insights.",
|
||||
runs: 50000,
|
||||
rating: 5,
|
||||
avatarSrc: "https://github.com/shadcn.png",
|
||||
},
|
||||
{
|
||||
agentName: "Image Recognition Master",
|
||||
agentImage:
|
||||
"https://ddz4ak4pa3d19.cloudfront.net/cache/59/b9/59b9415d4044f48f9b9e318c4c5a7984.jpg",
|
||||
description:
|
||||
"Accurately identify and classify objects in images using state-of-the-art machine learning algorithms.",
|
||||
runs: 60000,
|
||||
rating: 4.6,
|
||||
avatarSrc: "https://example.com/avatar2.jpg",
|
||||
},
|
||||
{
|
||||
agentName: "Natural Language Processor",
|
||||
agentImage:
|
||||
"https://ddz4ak4pa3d19.cloudfront.net/cache/11/47/114784105a9b180e08e117cbf2612e5b.jpg",
|
||||
description:
|
||||
"Analyze and understand human language with advanced NLP techniques.",
|
||||
runs: 80000,
|
||||
rating: 4.7,
|
||||
avatarSrc: "https://example.com/avatar3.jpg",
|
||||
},
|
||||
{
|
||||
agentName: "Sentiment Analyzer",
|
||||
agentImage:
|
||||
"https://ddz4ak4pa3d19.cloudfront.net/cache/07/7c/077c975fdb404609532364dd5a2e2354.jpg",
|
||||
description:
|
||||
"Determine the emotional tone of text data for customer feedback analysis.",
|
||||
runs: 45000,
|
||||
rating: 4.5,
|
||||
avatarSrc: "https://example.com/avatar4.jpg",
|
||||
},
|
||||
{
|
||||
agentName: "Chatbot Builder",
|
||||
agentImage:
|
||||
"https://ddz4ak4pa3d19.cloudfront.net/cache/63/96/6396cb4e44284b80ead9300d9b47c544.jpg",
|
||||
description:
|
||||
"Create intelligent chatbots for customer service and engagement.",
|
||||
runs: 55000,
|
||||
rating: 4.4,
|
||||
avatarSrc: "https://example.com/avatar5.jpg",
|
||||
},
|
||||
];
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
isLoggedIn: true,
|
||||
userName: "John Doe",
|
||||
userEmail: "john.doe@example.com",
|
||||
navLinks: mockNavLinks,
|
||||
activeLink: "/marketplace",
|
||||
menuItemGroups: mockMenuItemGroups,
|
||||
creatorInfo: mockCreatorInfo,
|
||||
creatorAgents: mockCreatorAgents,
|
||||
},
|
||||
};
|
||||
|
||||
export const NoLinks: Story = {
|
||||
args: {
|
||||
...Default.args,
|
||||
creatorInfo: {
|
||||
...mockCreatorInfo,
|
||||
otherLinks: {},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const AllLinks: Story = {
|
||||
args: {
|
||||
...Default.args,
|
||||
creatorInfo: {
|
||||
...mockCreatorInfo,
|
||||
otherLinks: {
|
||||
website: "https://ailabs.com",
|
||||
github: "https://github.com/ailabs",
|
||||
linkedin: "https://linkedin.com/company/ailabs",
|
||||
other: [
|
||||
"https://twitter.com/ailabs",
|
||||
"https://medium.com/@ailabs",
|
||||
"https://youtube.com/@ailabs",
|
||||
"https://tiktok.com/@ailabs",
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const LongDescription: Story = {
|
||||
args: {
|
||||
...Default.args,
|
||||
creatorInfo: {
|
||||
...mockCreatorInfo,
|
||||
description:
|
||||
"We are a team of passionate developers and researchers dedicated to pushing the boundaries of artificial intelligence. Our focus spans across multiple domains including natural language processing, computer vision, and reinforcement learning. With years of experience in both academia and industry, we strive to create AI agents that are not only powerful but also ethical and user-friendly. Our mission is to make AI accessible to everyone while maintaining the highest standards of quality and reliability.",
|
||||
},
|
||||
},
|
||||
};
|
||||
@@ -1,111 +0,0 @@
|
||||
import * as React from "react";
|
||||
import { Navbar } from "@/components/agptui/Navbar";
|
||||
import { AgentsSection } from "@/components/agptui/composite/AgentsSection";
|
||||
import { BreadCrumbs } from "@/components/agptui/BreadCrumbs";
|
||||
import { IconType } from "@/components/ui/icons";
|
||||
import { CreatorInfoCard } from "@/components/agptui/CreatorInfoCard";
|
||||
import { CreatorLinks } from "@/components/agptui/CreatorLinks";
|
||||
|
||||
interface CreatorPageProps {
|
||||
isLoggedIn: boolean;
|
||||
userName: string;
|
||||
userEmail: string;
|
||||
navLinks: { name: string; href: string }[];
|
||||
activeLink: string;
|
||||
menuItemGroups: {
|
||||
groupName?: string;
|
||||
items: {
|
||||
icon: IconType;
|
||||
text: string;
|
||||
href?: string;
|
||||
onClick?: () => void;
|
||||
}[];
|
||||
}[];
|
||||
creatorInfo: {
|
||||
name: string;
|
||||
avatarSrc: string;
|
||||
username: string;
|
||||
description: string;
|
||||
avgRating: number;
|
||||
agentCount: number;
|
||||
topCategories: string[];
|
||||
otherLinks: {
|
||||
website?: string;
|
||||
github?: string;
|
||||
linkedin?: string;
|
||||
};
|
||||
};
|
||||
creatorAgents: {
|
||||
agentName: string;
|
||||
agentImage: string;
|
||||
description: string;
|
||||
runs: number;
|
||||
rating: number;
|
||||
avatarSrc: string;
|
||||
}[];
|
||||
}
|
||||
|
||||
export const CreatorPage: React.FC<CreatorPageProps> = ({
|
||||
isLoggedIn,
|
||||
userName,
|
||||
userEmail,
|
||||
navLinks,
|
||||
activeLink,
|
||||
menuItemGroups,
|
||||
creatorInfo,
|
||||
creatorAgents,
|
||||
}) => {
|
||||
const handleCardClick = (agentName: string) => {
|
||||
console.log("Clicked on agent:", agentName);
|
||||
// Implement card click functionality
|
||||
};
|
||||
|
||||
const breadcrumbs = [
|
||||
{ name: "Marketplace", link: "/marketplace" },
|
||||
{ name: creatorInfo.name, link: "#" },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="mx-auto w-screen max-w-[1440px]">
|
||||
<Navbar
|
||||
isLoggedIn={isLoggedIn}
|
||||
userName={userName}
|
||||
userEmail={userEmail}
|
||||
links={navLinks}
|
||||
activeLink={activeLink}
|
||||
menuItemGroups={menuItemGroups}
|
||||
/>
|
||||
<main className="w-full px-4 py-4 sm:px-6 sm:py-6 md:px-10 md:py-8">
|
||||
<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">
|
||||
<CreatorInfoCard
|
||||
username={creatorInfo.name}
|
||||
handle={creatorInfo.username}
|
||||
avatarSrc={creatorInfo.avatarSrc}
|
||||
categories={creatorInfo.topCategories}
|
||||
averageRating={creatorInfo.avgRating}
|
||||
totalRuns={creatorInfo.agentCount}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex min-w-0 flex-1 flex-col gap-4 sm:gap-6 md:gap-8">
|
||||
<div className="font-neue text-2xl font-normal leading-normal text-neutral-900 sm:text-3xl md:text-[35px] md:leading-[45px]">
|
||||
{creatorInfo.description}
|
||||
</div>
|
||||
<CreatorLinks links={creatorInfo.otherLinks} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-8 sm:mt-12 md:mt-16">
|
||||
<hr className="w-full bg-neutral-700" />
|
||||
<AgentsSection
|
||||
agents={creatorAgents}
|
||||
hideAvatars={true}
|
||||
onCardClick={handleCardClick}
|
||||
sectionTitle={`Agents by ${creatorInfo.name}`}
|
||||
/>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -1,296 +0,0 @@
|
||||
import type { Meta, StoryObj } from "@storybook/react";
|
||||
import { Page } from "./HomePage";
|
||||
import { userEvent, within } from "@storybook/test";
|
||||
import { IconType } from "../../ui/icons";
|
||||
|
||||
const meta = {
|
||||
title: "AGPT UI/Agent Store/Home Page",
|
||||
component: Page,
|
||||
parameters: {
|
||||
layout: {
|
||||
center: true,
|
||||
fullscreen: true,
|
||||
padding: 0,
|
||||
},
|
||||
},
|
||||
tags: ["autodocs"],
|
||||
argTypes: {
|
||||
isLoggedIn: { control: "boolean" },
|
||||
userName: { control: "text" },
|
||||
navLinks: { control: "object" },
|
||||
activeLink: { control: "text" },
|
||||
featuredAgents: { control: "object" },
|
||||
topAgents: { control: "object" },
|
||||
featuredCreators: { control: "object" },
|
||||
menuItemGroups: { control: "object" },
|
||||
},
|
||||
} satisfies Meta<typeof Page>;
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof meta>;
|
||||
|
||||
const mockNavLinks = [
|
||||
{ name: "Marketplace", href: "/" },
|
||||
{ name: "Library", href: "/library" },
|
||||
{ name: "Build", href: "/build" },
|
||||
];
|
||||
|
||||
const mockMenuItemGroups = [
|
||||
{
|
||||
items: [
|
||||
{ icon: IconType.Edit, text: "Edit profile", href: "/profile/edit" },
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{
|
||||
icon: IconType.LayoutDashboard,
|
||||
text: "Creator Dashboard",
|
||||
href: "/dashboard",
|
||||
},
|
||||
{
|
||||
icon: IconType.UploadCloud,
|
||||
text: "Publish an agent",
|
||||
href: "/publish",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [{ icon: IconType.Settings, text: "Settings", href: "/settings" }],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{
|
||||
icon: IconType.LogOut,
|
||||
text: "Log out",
|
||||
onClick: () => console.log("Logged out"),
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const mockFeaturedAgents = [
|
||||
{
|
||||
agentName: "Super SEO Optimizer",
|
||||
agentImage:
|
||||
"https://ddz4ak4pa3d19.cloudfront.net/cache/cc/11/cc1172271dcf723a34f488a3344e82b2.jpg",
|
||||
creatorName: "AI Labs",
|
||||
description:
|
||||
"Boost your website's search engine rankings with our advanced AI-powered SEO optimization tool.",
|
||||
runs: 100000,
|
||||
rating: 4.9,
|
||||
},
|
||||
{
|
||||
agentName: "Content Wizard",
|
||||
agentImage:
|
||||
"https://upload.wikimedia.org/wikipedia/commons/c/c5/Big_buck_bunny_poster_big.jpg",
|
||||
creatorName: "WriteRight Inc.",
|
||||
description:
|
||||
"Generate high-quality, engaging content for your blog, social media, or marketing campaigns.",
|
||||
runs: 75000,
|
||||
rating: 4.7,
|
||||
},
|
||||
];
|
||||
|
||||
const mockTopAgents = [
|
||||
{
|
||||
agentName: "Data Analyzer Pro",
|
||||
agentImage:
|
||||
"https://ddz4ak4pa3d19.cloudfront.net/cache/07/78/0778415062f8dff56a046a7eca44567c.jpg",
|
||||
avatarSrc: "https://github.com/shadcn.png",
|
||||
description:
|
||||
"Powerful tool for analyzing large datasets and generating insights.",
|
||||
runs: 50000,
|
||||
rating: 5,
|
||||
},
|
||||
{
|
||||
agentName: "Image Recognition Master",
|
||||
agentImage:
|
||||
"https://ddz4ak4pa3d19.cloudfront.net/cache/59/b9/59b9415d4044f48f9b9e318c4c5a7984.jpg",
|
||||
avatarSrc: "https://example.com/avatar2.jpg",
|
||||
description:
|
||||
"Accurately identify and classify objects in images using state-of-the-art machine learning algorithms.",
|
||||
runs: 60000,
|
||||
rating: 4.6,
|
||||
},
|
||||
{
|
||||
agentName: "Natural Language Processor",
|
||||
agentImage:
|
||||
"https://ddz4ak4pa3d19.cloudfront.net/cache/11/47/114784105a9b180e08e117cbf2612e5b.jpg",
|
||||
avatarSrc: "https://example.com/avatar3.jpg",
|
||||
description:
|
||||
"Analyze and understand human language with advanced NLP techniques.",
|
||||
runs: 80000,
|
||||
rating: 4.7,
|
||||
},
|
||||
{
|
||||
agentName: "Sentiment Analyzer",
|
||||
agentImage:
|
||||
"https://ddz4ak4pa3d19.cloudfront.net/cache/07/7c/077c975fdb404609532364dd5a2e2354.jpg",
|
||||
avatarSrc: "https://example.com/avatar4.jpg",
|
||||
description:
|
||||
"Determine the emotional tone of text data for customer feedback analysis.",
|
||||
runs: 45000,
|
||||
rating: 4.5,
|
||||
},
|
||||
{
|
||||
agentName: "Chatbot Builder",
|
||||
agentImage:
|
||||
"https://ddz4ak4pa3d19.cloudfront.net/cache/63/96/6396cb4e44284b80ead9300d9b47c544.jpg",
|
||||
avatarSrc: "https://example.com/avatar5.jpg",
|
||||
description:
|
||||
"Create intelligent chatbots for customer service and engagement.",
|
||||
runs: 55000,
|
||||
rating: 4.4,
|
||||
},
|
||||
{
|
||||
agentName: "Predictive Analytics Tool",
|
||||
agentImage:
|
||||
"https://ddz4ak4pa3d19.cloudfront.net/cache/53/b2/53b2bc7d7900f0e1e60bf64ebf38032d.jpg",
|
||||
avatarSrc: "https://example.com/avatar6.jpg",
|
||||
description:
|
||||
"Forecast future trends and outcomes based on historical data.",
|
||||
runs: 40000,
|
||||
rating: 4.0,
|
||||
},
|
||||
{
|
||||
agentName: "Text-to-Speech Converter",
|
||||
agentImage:
|
||||
"https://framerusercontent.com/images/KCIpxr9f97EGJgpaoqnjKsrOPwI.jpg",
|
||||
avatarSrc: "https://example.com/avatar7.jpg",
|
||||
description:
|
||||
"Convert written text into natural-sounding speech in multiple languages.",
|
||||
runs: 35000,
|
||||
rating: 3.0,
|
||||
},
|
||||
{
|
||||
agentName: "Code Generator AI",
|
||||
agentImage:
|
||||
"https://ddz4ak4pa3d19.cloudfront.net/cache/40/f7/40f7bc97c952f8df0f9c88d29defe8d4.jpg",
|
||||
avatarSrc: "https://example.com/avatar8.jpg",
|
||||
description:
|
||||
"Automatically generate code snippets and boilerplate for various programming languages.",
|
||||
runs: 70000,
|
||||
rating: 2.5,
|
||||
},
|
||||
{
|
||||
agentName: "Virtual Assistant Creator",
|
||||
agentImage:
|
||||
"https://ddz4ak4pa3d19.cloudfront.net/cache/14/9e/149ebb9014aa8c0097e72ed89845af0e.jpg",
|
||||
avatarSrc: "https://example.com/avatar9.jpg",
|
||||
description:
|
||||
"Build customized virtual assistants for various business needs and personal use.",
|
||||
runs: 65000,
|
||||
rating: 1.4,
|
||||
},
|
||||
];
|
||||
|
||||
const mockFeaturedCreators = [
|
||||
{
|
||||
creatorName: "AI Labs",
|
||||
creatorImage:
|
||||
"https://ddz4ak4pa3d19.cloudfront.net/cache/53/b2/53b2bc7d7900f0e1e60bf64ebf38032d.jpg",
|
||||
bio: "Pioneering AI solutions for everyday problems",
|
||||
agentsUploaded: 25,
|
||||
avatarSrc: "https://github.com/shadcn.png",
|
||||
},
|
||||
{
|
||||
creatorName: "WriteRight Inc.",
|
||||
creatorImage:
|
||||
"https://ddz4ak4pa3d19.cloudfront.net/cache/40/f7/40f7bc97c952f8df0f9c88d29defe8d4.jpg",
|
||||
bio: "Empowering content creators with AI-driven tools",
|
||||
agentsUploaded: 18,
|
||||
avatarSrc: "https://example.com/writeright-avatar.jpg",
|
||||
},
|
||||
{
|
||||
creatorName: "DataMasters",
|
||||
creatorImage:
|
||||
"https://ddz4ak4pa3d19.cloudfront.net/cache/14/9e/149ebb9014aa8c0097e72ed89845af0e.jpg",
|
||||
bio: "Transforming data into actionable insights",
|
||||
agentsUploaded: 30,
|
||||
avatarSrc: "https://example.com/datamasters-avatar.jpg",
|
||||
},
|
||||
{
|
||||
creatorName: "AInovators",
|
||||
creatorImage:
|
||||
"https://ddz4ak4pa3d19.cloudfront.net/cache/53/b2/53b2bc7d7900f0e1e60bf64ebf38032d.jpg",
|
||||
bio: "Pushing the boundaries of artificial intelligence",
|
||||
agentsUploaded: 22,
|
||||
avatarSrc: "https://github.com/shadcn.png",
|
||||
},
|
||||
{
|
||||
creatorName: "CodeCrafters",
|
||||
creatorImage:
|
||||
"https://ddz4ak4pa3d19.cloudfront.net/cache/40/f7/40f7bc97c952f8df0f9c88d29defe8d4.jpg",
|
||||
bio: "Building intelligent coding assistants for developers",
|
||||
agentsUploaded: 28,
|
||||
avatarSrc: "https://example.com/codecrafters-avatar.jpg",
|
||||
},
|
||||
{
|
||||
creatorName: "EcoTech Solutions",
|
||||
creatorImage:
|
||||
"https://ddz4ak4pa3d19.cloudfront.net/cache/14/9e/149ebb9014aa8c0097e72ed89845af0e.jpg",
|
||||
bio: "Developing AI-powered tools for environmental sustainability",
|
||||
agentsUploaded: 20,
|
||||
avatarSrc: "https://example.com/ecotech-avatar.jpg",
|
||||
},
|
||||
];
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
isLoggedIn: true,
|
||||
userName: "John Doe",
|
||||
userEmail: "john.doe@example.com",
|
||||
navLinks: mockNavLinks,
|
||||
activeLink: "/",
|
||||
featuredAgents: mockFeaturedAgents,
|
||||
topAgents: mockTopAgents,
|
||||
featuredCreators: mockFeaturedCreators,
|
||||
menuItemGroups: mockMenuItemGroups,
|
||||
},
|
||||
};
|
||||
|
||||
export const WithInteraction: Story = {
|
||||
args: {
|
||||
...Default.args,
|
||||
},
|
||||
play: async ({ canvasElement }) => {
|
||||
const canvas = within(canvasElement);
|
||||
|
||||
// Simulate a search
|
||||
const searchInput = canvas.getByPlaceholderText(/Search for tasks/i);
|
||||
await userEvent.type(searchInput, "SEO optimization");
|
||||
await userEvent.keyboard("{Enter}");
|
||||
|
||||
// Click on a featured agent card
|
||||
const featuredAgentCard = canvas.getByText("Super SEO Optimizer");
|
||||
await userEvent.click(featuredAgentCard);
|
||||
|
||||
// Click on the "Become a Creator" button
|
||||
const becomeCreatorButton = canvas.getByText("Become a Creator");
|
||||
await userEvent.click(becomeCreatorButton);
|
||||
},
|
||||
};
|
||||
|
||||
export const EmptyState: Story = {
|
||||
args: {
|
||||
isLoggedIn: false,
|
||||
userName: "Jane Smith",
|
||||
userEmail: "jane.smith@example.com",
|
||||
navLinks: mockNavLinks,
|
||||
activeLink: "Marketplace",
|
||||
featuredAgents: [],
|
||||
topAgents: [],
|
||||
featuredCreators: [],
|
||||
menuItemGroups: mockMenuItemGroups,
|
||||
},
|
||||
};
|
||||
|
||||
export const LongLists: Story = {
|
||||
args: {
|
||||
...Default.args,
|
||||
featuredAgents: Array(10).fill(mockFeaturedAgents[0]),
|
||||
topAgents: Array(20).fill(mockTopAgents[0]),
|
||||
featuredCreators: Array(8).fill(mockFeaturedCreators[0]),
|
||||
},
|
||||
};
|
||||
@@ -1,120 +0,0 @@
|
||||
import * as React from "react";
|
||||
import { Navbar } from "@/components/agptui/Navbar";
|
||||
import { HeroSection } from "@/components/agptui/composite/HeroSection";
|
||||
import { FeaturedSection } from "@/components/agptui/composite/FeaturedSection";
|
||||
import { AgentsSection } from "@/components/agptui/composite/AgentsSection";
|
||||
import { BecomeACreator } from "@/components/agptui/BecomeACreator";
|
||||
import { FeaturedCreators } from "@/components/agptui/composite/FeaturedCreators";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
import { IconType } from "@/components/ui/icons";
|
||||
interface PageProps {
|
||||
isLoggedIn: boolean;
|
||||
userName: string;
|
||||
userEmail: string;
|
||||
navLinks: { name: string; href: string }[];
|
||||
activeLink: string;
|
||||
featuredAgents: {
|
||||
agentName: string;
|
||||
agentImage: string;
|
||||
creatorName: string;
|
||||
description: string;
|
||||
runs: number;
|
||||
rating: number;
|
||||
}[];
|
||||
topAgents: {
|
||||
agentName: string;
|
||||
agentImage: string;
|
||||
avatarSrc: string;
|
||||
description: string;
|
||||
runs: number;
|
||||
rating: number;
|
||||
}[];
|
||||
featuredCreators: {
|
||||
creatorName: string;
|
||||
creatorImage: string;
|
||||
bio: string;
|
||||
agentsUploaded: number;
|
||||
avatarSrc: string;
|
||||
}[];
|
||||
menuItemGroups: {
|
||||
groupName?: string;
|
||||
items: {
|
||||
icon: IconType;
|
||||
text: string;
|
||||
href?: string;
|
||||
onClick?: () => void;
|
||||
}[];
|
||||
}[];
|
||||
}
|
||||
|
||||
export const Page: React.FC<PageProps> = ({
|
||||
isLoggedIn,
|
||||
userName,
|
||||
userEmail,
|
||||
navLinks,
|
||||
activeLink,
|
||||
featuredAgents,
|
||||
topAgents,
|
||||
featuredCreators,
|
||||
menuItemGroups,
|
||||
}) => {
|
||||
const handleFilterChange = (selectedFilters: string[]) => {
|
||||
console.log("Selected filters:", selectedFilters);
|
||||
// Implement filter functionality
|
||||
};
|
||||
|
||||
const handleCardClick = (agentName: string) => {
|
||||
console.log("Clicked on agent:", agentName);
|
||||
// Implement card click functionality
|
||||
};
|
||||
|
||||
const handleProfileClick = () => {
|
||||
console.log("Profile clicked");
|
||||
// Implement profile click functionality
|
||||
};
|
||||
|
||||
const handleBecomeCreator = () => {
|
||||
console.log("Become a Creator clicked");
|
||||
// Implement become a creator functionality
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="mx-auto w-screen max-w-[1360px]">
|
||||
<Navbar
|
||||
isLoggedIn={isLoggedIn}
|
||||
userName={userName}
|
||||
userEmail={userEmail}
|
||||
links={navLinks}
|
||||
activeLink={activeLink}
|
||||
menuItemGroups={menuItemGroups}
|
||||
/>
|
||||
<main className="px-4">
|
||||
<HeroSection onFilterChange={handleFilterChange} />
|
||||
<div className="my-16">
|
||||
<FeaturedSection
|
||||
featuredAgents={featuredAgents}
|
||||
onCardClick={handleCardClick}
|
||||
/>
|
||||
</div>
|
||||
<Separator />
|
||||
<AgentsSection
|
||||
sectionTitle="Top Agents"
|
||||
agents={topAgents}
|
||||
onCardClick={handleCardClick}
|
||||
/>
|
||||
<Separator />
|
||||
<FeaturedCreators
|
||||
featuredCreators={featuredCreators}
|
||||
onCardClick={handleCardClick}
|
||||
/>
|
||||
<Separator />
|
||||
<BecomeACreator
|
||||
title="Become a creator"
|
||||
description="Join a community where your AI creations can inspire, engage, and be downloaded by users around the world."
|
||||
buttonText="Upload your agent"
|
||||
onButtonClick={handleBecomeCreator}
|
||||
/>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -1,106 +0,0 @@
|
||||
import type { Meta, StoryObj } from "@storybook/react";
|
||||
import ProfilePage from "./ProfilePage";
|
||||
import { AVAILABLE_CATEGORIES } from "../ProfileInfoForm";
|
||||
import {
|
||||
IconPersonFill,
|
||||
IconSettings,
|
||||
IconLogOut,
|
||||
IconType,
|
||||
} from "@/components/ui/icons";
|
||||
|
||||
const meta: Meta<typeof ProfilePage> = {
|
||||
title: "AGPT UI/Profile/Profile Page",
|
||||
component: ProfilePage,
|
||||
parameters: {
|
||||
layout: "fullscreen",
|
||||
},
|
||||
tags: ["autodocs"],
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof ProfilePage>;
|
||||
|
||||
const defaultMenuItemGroups = [
|
||||
{
|
||||
items: [
|
||||
{ icon: IconType.Edit, text: "Edit profile", href: "/profile/edit" },
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{
|
||||
icon: IconType.LayoutDashboard,
|
||||
text: "Creator Dashboard",
|
||||
href: "/dashboard",
|
||||
},
|
||||
{
|
||||
icon: IconType.UploadCloud,
|
||||
text: "Publish an agent",
|
||||
href: "/publish",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [{ icon: IconType.Settings, text: "Settings", href: "/settings" }],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{
|
||||
icon: IconType.LogOut,
|
||||
text: "Log out",
|
||||
onClick: () => console.log("Logged out"),
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
export const Empty: Story = {
|
||||
args: {
|
||||
userName: "",
|
||||
userEmail: "",
|
||||
displayName: "",
|
||||
handle: "",
|
||||
bio: "",
|
||||
links: [],
|
||||
categories: [],
|
||||
credits: 0,
|
||||
menuItemGroups: defaultMenuItemGroups,
|
||||
isLoggedIn: true,
|
||||
avatarSrc: undefined,
|
||||
},
|
||||
};
|
||||
|
||||
export const Filled: Story = {
|
||||
args: {
|
||||
userName: "Alex Chen",
|
||||
userEmail: "alex.chen@aigpt.dev",
|
||||
displayName: "Alex Chen",
|
||||
handle: "@aidev_alex",
|
||||
bio: "AI Developer & Tech Enthusiast | Building intelligent solutions with AutoGPT | Passionate about making AI accessible and ethical | Contributing to open-source AI projects and sharing knowledge about autonomous agents.",
|
||||
links: [
|
||||
{ id: 1, url: "alexchen.dev" },
|
||||
{ id: 2, url: "github.com/alexchen-ai" },
|
||||
{ id: 3, url: "twitter.com/aidev_alex" },
|
||||
{ id: 4, url: "medium.com/@alexchen-ai" },
|
||||
{ id: 5, url: "linkedin.com/in/alexchen-ai" },
|
||||
],
|
||||
categories: [
|
||||
{ id: 1, name: "AI Development" },
|
||||
{ id: 2, name: "Tech" },
|
||||
{ id: 3, name: "Open Source" },
|
||||
{ id: 4, name: "Education" },
|
||||
{ id: 5, name: "Content creation" },
|
||||
].filter((cat) => AVAILABLE_CATEGORIES.includes(cat.name as any)),
|
||||
credits: 1500,
|
||||
menuItemGroups: defaultMenuItemGroups,
|
||||
isLoggedIn: true,
|
||||
avatarSrc: "https://github.com/alexchen-ai.png",
|
||||
},
|
||||
};
|
||||
|
||||
export const LoggedOut: Story = {
|
||||
args: {
|
||||
...Empty.args,
|
||||
isLoggedIn: false,
|
||||
},
|
||||
};
|
||||
@@ -1,139 +0,0 @@
|
||||
import * as React from "react";
|
||||
import { Sidebar } from "@/components/agptui/Sidebar";
|
||||
import { ProfileInfoForm } from "@/components/agptui/ProfileInfoForm";
|
||||
import { IconType } from "@/components/ui/icons";
|
||||
import { Navbar } from "@/components/agptui/Navbar";
|
||||
|
||||
interface ProfilePageProps {
|
||||
userName?: string;
|
||||
userEmail?: string;
|
||||
credits?: number;
|
||||
displayName?: string;
|
||||
handle?: string;
|
||||
bio?: string;
|
||||
links?: Array<{ id: number; url: string }>;
|
||||
categories?: Array<{ id: number; name: string }>;
|
||||
menuItemGroups?: Array<{
|
||||
items: Array<{
|
||||
icon: IconType;
|
||||
text: string;
|
||||
href?: string;
|
||||
onClick?: () => void;
|
||||
}>;
|
||||
}>;
|
||||
isLoggedIn?: boolean;
|
||||
avatarSrc?: string;
|
||||
}
|
||||
|
||||
const ProfilePage = ({
|
||||
userName = "",
|
||||
userEmail = "",
|
||||
credits = 0,
|
||||
displayName = "",
|
||||
handle = "",
|
||||
bio = "",
|
||||
links = [],
|
||||
categories = [],
|
||||
menuItemGroups = [],
|
||||
isLoggedIn = true,
|
||||
avatarSrc,
|
||||
}: ProfilePageProps) => {
|
||||
const sidebarLinkGroups = [
|
||||
{
|
||||
links: [
|
||||
{ text: "Creator Dashboard", href: "/dashboard" },
|
||||
{ text: "Agent dashboard", href: "/agent-dashboard" },
|
||||
{ text: "Integrations", href: "/integrations" },
|
||||
{ text: "Profile", href: "/profile" },
|
||||
{ text: "Settings", href: "/settings" },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const updatedMenuItemGroups = [
|
||||
{
|
||||
items: [
|
||||
{ icon: IconType.Edit, text: "Edit profile", href: "/profile/edit" },
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{
|
||||
icon: IconType.LayoutDashboard,
|
||||
text: "Creator Dashboard",
|
||||
href: "/dashboard",
|
||||
},
|
||||
{
|
||||
icon: IconType.UploadCloud,
|
||||
text: "Publish an agent",
|
||||
href: "/publish",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [{ icon: IconType.Settings, text: "Settings", href: "/settings" }],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{
|
||||
icon: IconType.LogOut,
|
||||
text: "Log out",
|
||||
onClick: () => console.log("Logged out"),
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const navLinks = [
|
||||
{ name: "Marketplace", href: "/marketplace" },
|
||||
{ name: "Library", href: "/library" },
|
||||
{ name: "Build", href: "/build" },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="min-h-screen w-full bg-white">
|
||||
<header className="fixed left-0 right-0 top-0 z-40 bg-white">
|
||||
<Navbar
|
||||
isLoggedIn={isLoggedIn}
|
||||
userName={userName}
|
||||
userEmail={userEmail}
|
||||
links={navLinks}
|
||||
activeLink="/profile"
|
||||
avatarSrc={avatarSrc}
|
||||
menuItemGroups={updatedMenuItemGroups}
|
||||
credits={credits}
|
||||
/>
|
||||
</header>
|
||||
|
||||
<div className="pt-[80px]">
|
||||
<div className="flex flex-1">
|
||||
<nav
|
||||
className="fixed left-[10px] top-[80px] z-30 hidden lg:block"
|
||||
aria-label="Main navigation"
|
||||
>
|
||||
<div className="rounded-lg bg-gray-50">
|
||||
<Sidebar linkGroups={sidebarLinkGroups} />
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
{/* Mobile Sidebar */}
|
||||
<div className="fixed left-4 top-4 z-50 block lg:hidden">
|
||||
<Sidebar linkGroups={sidebarLinkGroups} />
|
||||
</div>
|
||||
|
||||
<div className="w-full flex-1 px-4 py-6 md:px-8 lg:ml-[200px]">
|
||||
<ProfileInfoForm
|
||||
displayName={displayName}
|
||||
handle={handle}
|
||||
bio={bio}
|
||||
links={links}
|
||||
categories={categories}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProfilePage;
|
||||
@@ -1,100 +0,0 @@
|
||||
import type { Meta, StoryObj } from "@storybook/react";
|
||||
import { SettingsPage } from "./SettingsPage";
|
||||
import { IconType } from "../../ui/icons";
|
||||
|
||||
const meta: Meta<typeof SettingsPage> = {
|
||||
title: "AGPT UI/Settings/Settings Page",
|
||||
component: SettingsPage,
|
||||
parameters: {
|
||||
layout: {
|
||||
center: true,
|
||||
fullscreen: true,
|
||||
padding: 0,
|
||||
},
|
||||
},
|
||||
tags: ["autodocs"],
|
||||
argTypes: {
|
||||
isLoggedIn: { control: "boolean" },
|
||||
userName: { control: "text" },
|
||||
userEmail: { control: "text" },
|
||||
navLinks: { control: "object" },
|
||||
activeLink: { control: "text" },
|
||||
menuItemGroups: { control: "object" },
|
||||
sidebarLinkGroups: { control: "object" },
|
||||
},
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof SettingsPage>;
|
||||
|
||||
const mockNavLinks = [
|
||||
{ name: "Marketplace", href: "/" },
|
||||
{ name: "Library", href: "/library" },
|
||||
{ name: "Build", href: "/build" },
|
||||
];
|
||||
|
||||
const mockMenuItemGroups = [
|
||||
{
|
||||
items: [
|
||||
{ icon: IconType.Edit, text: "Edit profile", href: "/profile/edit" },
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{
|
||||
icon: IconType.LayoutDashboard,
|
||||
text: "Creator Dashboard",
|
||||
href: "/dashboard",
|
||||
},
|
||||
{
|
||||
icon: IconType.UploadCloud,
|
||||
text: "Publish an agent",
|
||||
href: "/publish",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [{ icon: IconType.Settings, text: "Settings", href: "/settings" }],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{
|
||||
icon: IconType.LogOut,
|
||||
text: "Log out",
|
||||
onClick: () => console.log("Logged out"),
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const mockSidebarLinkGroups = [
|
||||
{
|
||||
links: [
|
||||
{ text: "Agent dashboard", href: "/dashboard" },
|
||||
{ text: "Integrations", href: "/integrations" },
|
||||
{ text: "Profile", href: "/profile" },
|
||||
{ text: "Settings", href: "/settings" },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
isLoggedIn: true,
|
||||
userName: "John Doe",
|
||||
userEmail: "john@example.com",
|
||||
navLinks: mockNavLinks,
|
||||
activeLink: "/settings",
|
||||
menuItemGroups: mockMenuItemGroups,
|
||||
sidebarLinkGroups: mockSidebarLinkGroups,
|
||||
},
|
||||
};
|
||||
|
||||
export const LoggedOut: Story = {
|
||||
args: {
|
||||
...Default.args,
|
||||
isLoggedIn: false,
|
||||
userName: "",
|
||||
userEmail: "",
|
||||
},
|
||||
};
|
||||
@@ -1,58 +0,0 @@
|
||||
import * as React from "react";
|
||||
import { Navbar } from "@/components/agptui/Navbar";
|
||||
import { Sidebar } from "@/components/agptui/Sidebar";
|
||||
import { SettingsInputForm } from "@/components/agptui/SettingsInputForm";
|
||||
import { IconType } from "@/components/ui/icons";
|
||||
|
||||
interface SettingsPageProps {
|
||||
isLoggedIn: boolean;
|
||||
userName: string;
|
||||
userEmail: string;
|
||||
navLinks: { name: string; href: string }[];
|
||||
activeLink: string;
|
||||
menuItemGroups: {
|
||||
groupName?: string;
|
||||
items: {
|
||||
icon: IconType;
|
||||
text: string;
|
||||
href?: string;
|
||||
onClick?: () => void;
|
||||
}[];
|
||||
}[];
|
||||
sidebarLinkGroups: {
|
||||
links: {
|
||||
text: string;
|
||||
href: string;
|
||||
}[];
|
||||
}[];
|
||||
}
|
||||
|
||||
export const SettingsPage: React.FC<SettingsPageProps> = ({
|
||||
isLoggedIn,
|
||||
userName,
|
||||
userEmail,
|
||||
navLinks,
|
||||
activeLink,
|
||||
menuItemGroups,
|
||||
sidebarLinkGroups,
|
||||
}) => {
|
||||
return (
|
||||
<div className="mx-auto w-screen max-w-[1440px] bg-white lg:w-full">
|
||||
<Navbar
|
||||
isLoggedIn={isLoggedIn}
|
||||
userName={userName}
|
||||
userEmail={userEmail}
|
||||
links={navLinks}
|
||||
activeLink={activeLink}
|
||||
menuItemGroups={menuItemGroups}
|
||||
/>
|
||||
|
||||
<div className="flex min-h-screen flex-col lg:flex-row">
|
||||
<Sidebar linkGroups={sidebarLinkGroups} />
|
||||
<main className="flex-1 overflow-hidden px-4 pb-8 pt-4 md:px-6 md:pt-6 lg:px-8 lg:pt-8">
|
||||
<SettingsInputForm />
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user