mirror of
https://github.com/Significant-Gravitas/AutoGPT.git
synced 2026-01-09 15:17:59 -05:00
chore(frontend): setup chromatic (#10235)
## Changes 🏗️ <img width="800" alt="Screenshot 2025-06-25 at 13 43 06" src="https://github.com/user-attachments/assets/13ffd32e-ffa1-482e-91a6-8363ad6b67df" /> <br /><br /> - Setup Chromatic ( install + `package.json` command ) - Make it run on the CI - Remove a lot of old component in Storybook which were broken or need deign review - for now we only keep on Storybook what has been ✅ by design - Remove `test-storybook:ci` commands - I plan to run tests via Chromatic, but I want to look at that setup on a separate PR and in a clean state ## 📋 Checklist ### For code changes: - [x] I have clearly listed my changes in the PR description - [x] I have made a test plan - [x] I have tested my changes according to the test plan: - [x] The `chromatic` job succeeds on the CI and the changes appear on Chromatic's dashboard
This commit is contained in:
Ubbe
28
.github/workflows/platform-frontend-ci.yml
vendored
28
.github/workflows/platform-frontend-ci.yml
vendored
@@ -61,6 +61,34 @@ jobs:
|
||||
- name: Run tsc check
|
||||
run: pnpm type-check
|
||||
|
||||
chromatic:
|
||||
runs-on: ubuntu-latest
|
||||
# Only run on dev branch pushes or PRs targeting dev
|
||||
if: github.ref == 'refs/heads/dev' || github.base_ref == 'dev'
|
||||
steps:
|
||||
- uses: actions/checkout@v4
|
||||
with:
|
||||
fetch-depth: 0
|
||||
|
||||
- name: Set up Node.js
|
||||
uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: "21"
|
||||
|
||||
- name: Enable corepack
|
||||
run: corepack enable
|
||||
|
||||
- name: Install dependencies
|
||||
run: pnpm install --frozen-lockfile
|
||||
|
||||
- name: Run Chromatic
|
||||
uses: chromaui/action@latest
|
||||
with:
|
||||
projectToken: chpt_9e7c1a76478c9c8
|
||||
onlyChanged: true
|
||||
workingDir: autogpt_platform/frontend
|
||||
token: ${{ secrets.GITHUB_TOKEN }}
|
||||
|
||||
test:
|
||||
runs-on: ubuntu-latest
|
||||
strategy:
|
||||
|
||||
@@ -106,12 +106,6 @@ Storybook is a powerful development environment for UI components. It allows you
|
||||
pnpm test-storybook
|
||||
```
|
||||
|
||||
For CI environments, use:
|
||||
|
||||
```bash
|
||||
pnpm test-storybook:ci
|
||||
```
|
||||
|
||||
4. **Writing Stories**:
|
||||
Create `.stories.tsx` files alongside your components to define different states and variations of your components.
|
||||
|
||||
|
||||
@@ -18,7 +18,6 @@
|
||||
"storybook": "storybook dev -p 6006",
|
||||
"build-storybook": "storybook build",
|
||||
"test-storybook": "test-storybook",
|
||||
"test-storybook:ci": "concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"pnpm run build-storybook -- --quiet && npx http-server storybook-static --port 6006 --silent\" \"wait-on tcp:6006 && pnpm run test-storybook\"",
|
||||
"fetch:openapi": "curl http://localhost:8006/openapi.json > ./src/api/openapi.json && prettier --write ./src/api/openapi.json",
|
||||
"generate:api-client": "orval --config ./orval.config.ts",
|
||||
"generate:api-all": "pnpm run fetch:openapi && pnpm run generate:api-client"
|
||||
|
||||
@@ -1,58 +0,0 @@
|
||||
import type { Meta, StoryObj } from "@storybook/nextjs";
|
||||
import { AgentImages } from "./AgentImages";
|
||||
|
||||
const meta = {
|
||||
title: "Legacy/Agent Images",
|
||||
component: AgentImages,
|
||||
parameters: {
|
||||
layout: {
|
||||
center: true,
|
||||
fullscreen: true,
|
||||
padding: 0,
|
||||
},
|
||||
},
|
||||
tags: ["autodocs"],
|
||||
argTypes: {
|
||||
images: { control: "object" },
|
||||
},
|
||||
} satisfies Meta<typeof AgentImages>;
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof meta>;
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
images: [
|
||||
"https://framerusercontent.com/images/KCIpxr9f97EGJgpaoqnjKsrOPwI.jpg",
|
||||
"https://youtu.be/KWonAsyKF3g?si=JMibxlN_6OVo6LhJ",
|
||||
"https://storage.googleapis.com/agpt-dev-website-media/DJINeo.mp4",
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
export const OnlyImages: Story = {
|
||||
args: {
|
||||
images: [
|
||||
"https://framerusercontent.com/images/KCIpxr9f97EGJgpaoqnjKsrOPwI.jpg",
|
||||
"https://upload.wikimedia.org/wikipedia/commons/c/c5/Big_buck_bunny_poster_big.jpg",
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
export const WithVideos: Story = {
|
||||
args: {
|
||||
images: [
|
||||
"https://storage.googleapis.com/agpt-dev-website-media/DJINeo.mp4",
|
||||
"http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4",
|
||||
"https://youtu.be/KWonAsyKF3g?si=JMibxlN_6OVo6LhJ",
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
export const SingleItem: Story = {
|
||||
args: {
|
||||
images: [
|
||||
"https://upload.wikimedia.org/wikipedia/commons/c/c5/Big_buck_bunny_poster_big.jpg",
|
||||
],
|
||||
},
|
||||
};
|
||||
@@ -1,137 +0,0 @@
|
||||
import type { Meta, StoryObj } from "@storybook/nextjs";
|
||||
import { AgentInfo } from "./AgentInfo";
|
||||
import { userEvent, within } from "storybook/test";
|
||||
|
||||
const meta = {
|
||||
title: "Legacy/Agent Info",
|
||||
component: AgentInfo,
|
||||
parameters: {
|
||||
layout: "centered",
|
||||
},
|
||||
tags: ["autodocs"],
|
||||
argTypes: {
|
||||
name: { control: "text" },
|
||||
creator: { control: "text" },
|
||||
shortDescription: { control: "text" },
|
||||
longDescription: { control: "text" },
|
||||
rating: { control: "number", min: 0, max: 5, step: 0.1 },
|
||||
runs: { control: "number" },
|
||||
categories: { control: "object" },
|
||||
lastUpdated: { control: "text" },
|
||||
version: { control: "text" },
|
||||
},
|
||||
} satisfies Meta<typeof AgentInfo>;
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof meta>;
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
user: null,
|
||||
libraryAgent: null,
|
||||
name: "AI Video Generator",
|
||||
storeListingVersionId: "123",
|
||||
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`,
|
||||
rating: 4.7,
|
||||
runs: 1500,
|
||||
categories: ["Video", "Content Creation", "Social Media"],
|
||||
lastUpdated: "2 days ago",
|
||||
version: "1.2.0",
|
||||
},
|
||||
};
|
||||
|
||||
export const LowRating: Story = {
|
||||
args: {
|
||||
...Default.args,
|
||||
name: "Data Analyzer",
|
||||
creator: "DataTech",
|
||||
shortDescription:
|
||||
"Analyze complex datasets with machine learning algorithms",
|
||||
longDescription:
|
||||
"A comprehensive data analysis tool that leverages machine learning to provide deep insights into your datasets. Currently in beta testing phase.",
|
||||
rating: 2.7,
|
||||
runs: 5000,
|
||||
categories: ["Data Analysis", "Machine Learning"],
|
||||
lastUpdated: "1 week ago",
|
||||
version: "0.9.5",
|
||||
},
|
||||
};
|
||||
|
||||
export const HighRuns: Story = {
|
||||
args: {
|
||||
...Default.args,
|
||||
name: "Code Assistant",
|
||||
creator: "DevAI",
|
||||
shortDescription:
|
||||
"Get AI-powered coding help for various programming languages",
|
||||
longDescription:
|
||||
"An advanced AI coding assistant that supports multiple programming languages and frameworks. Features include code completion, refactoring suggestions, and bug detection.",
|
||||
rating: 4.8,
|
||||
runs: 1000000,
|
||||
categories: ["Programming", "AI", "Developer Tools"],
|
||||
lastUpdated: "1 day ago",
|
||||
version: "2.1.3",
|
||||
},
|
||||
};
|
||||
|
||||
export const WithInteraction: Story = {
|
||||
args: {
|
||||
...Default.args,
|
||||
name: "Task Planner",
|
||||
creator: "Productivity AI",
|
||||
shortDescription: "Plan and organize your tasks efficiently with AI",
|
||||
longDescription:
|
||||
"An intelligent task management system that helps you organize, prioritize, and complete your tasks more efficiently. Features smart scheduling and AI-powered suggestions.",
|
||||
rating: 4.2,
|
||||
runs: 50000,
|
||||
categories: ["Productivity", "Task Management", "AI"],
|
||||
lastUpdated: "3 days ago",
|
||||
version: "1.5.2",
|
||||
},
|
||||
play: async ({ canvasElement }) => {
|
||||
const canvas = within(canvasElement);
|
||||
|
||||
// Test run agent button
|
||||
const runButton = canvas.getByText("Run agent");
|
||||
await userEvent.hover(runButton);
|
||||
await userEvent.click(runButton);
|
||||
|
||||
// Test rating interaction
|
||||
const ratingStars = canvas.getAllByLabelText(/Star Icon/);
|
||||
await userEvent.hover(ratingStars[3]);
|
||||
await userEvent.click(ratingStars[3]);
|
||||
|
||||
// Test category interaction
|
||||
const category = canvas.getByText("Productivity");
|
||||
await userEvent.hover(category);
|
||||
await userEvent.click(category);
|
||||
},
|
||||
};
|
||||
|
||||
export const LongDescription: Story = {
|
||||
args: {
|
||||
...Default.args,
|
||||
name: "AI Writing Assistant",
|
||||
creator: "WordCraft AI",
|
||||
shortDescription:
|
||||
"Enhance your writing with our advanced AI-powered assistant.",
|
||||
longDescription:
|
||||
"It offers real-time suggestions for grammar, style, and tone, helps with research and fact-checking, and can even generate content ideas based on your input.",
|
||||
rating: 4.7,
|
||||
runs: 75000,
|
||||
categories: ["Writing", "AI", "Content Creation"],
|
||||
lastUpdated: "5 days ago",
|
||||
version: "3.0.1",
|
||||
},
|
||||
};
|
||||
@@ -1,108 +0,0 @@
|
||||
import type { Meta, StoryObj } from "@storybook/nextjs";
|
||||
import { AgentTable } from "./AgentTable";
|
||||
import { AgentTableRowProps } from "./AgentTableRow";
|
||||
import { userEvent, within, expect } from "storybook/test";
|
||||
|
||||
const meta: Meta<typeof AgentTable> = {
|
||||
title: "Legacy/Agent Table",
|
||||
component: AgentTable,
|
||||
tags: ["autodocs"],
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof AgentTable>;
|
||||
|
||||
const sampleAgents: AgentTableRowProps[] = [
|
||||
{
|
||||
id: 43,
|
||||
agentName: "Super Coder",
|
||||
description: "An AI agent that writes clean, efficient code",
|
||||
imageSrc: [
|
||||
"https://ddz4ak4pa3d19.cloudfront.net/cache/53/b2/53b2bc7d7900f0e1e60bf64ebf38032d.jpg",
|
||||
],
|
||||
dateSubmitted: "2023-05-15",
|
||||
status: "approved",
|
||||
runs: 1500,
|
||||
rating: 4.8,
|
||||
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"),
|
||||
selectedAgents: new Set(),
|
||||
setSelectedAgents: () => {},
|
||||
},
|
||||
{
|
||||
id: 44,
|
||||
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",
|
||||
runs: 1200,
|
||||
rating: 4.5,
|
||||
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"),
|
||||
selectedAgents: new Set(),
|
||||
setSelectedAgents: () => {},
|
||||
},
|
||||
{
|
||||
id: 45,
|
||||
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",
|
||||
runs: 800,
|
||||
rating: 4.2,
|
||||
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"),
|
||||
selectedAgents: new Set(),
|
||||
setSelectedAgents: () => {},
|
||||
},
|
||||
];
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
agents: sampleAgents,
|
||||
},
|
||||
};
|
||||
|
||||
export const EmptyTable: Story = {
|
||||
args: {
|
||||
agents: [],
|
||||
},
|
||||
};
|
||||
|
||||
// Tests
|
||||
export const InteractionTest: Story = {
|
||||
...Default,
|
||||
play: async ({ canvasElement }) => {
|
||||
const canvas = within(canvasElement);
|
||||
const editButtons = await canvas.findAllByText("Edit");
|
||||
await userEvent.click(editButtons[0]);
|
||||
// You would typically assert something here, but console.log is used in the mocked function
|
||||
},
|
||||
};
|
||||
|
||||
export const EmptyTableTest: Story = {
|
||||
...EmptyTable,
|
||||
play: async ({ canvasElement }) => {
|
||||
const canvas = within(canvasElement);
|
||||
const emptyMessage = canvas.getByText("No agents found");
|
||||
await expect(emptyMessage).toBeTruthy();
|
||||
},
|
||||
};
|
||||
@@ -1,65 +0,0 @@
|
||||
import type { Meta, StoryObj } from "@storybook/nextjs";
|
||||
import { AgentTableCard } from "./AgentTableCard";
|
||||
import { userEvent, within } from "storybook/test";
|
||||
import { type StatusType } from "./Status";
|
||||
|
||||
const meta: Meta<typeof AgentTableCard> = {
|
||||
title: "Legacy/Agent Table Card",
|
||||
component: AgentTableCard,
|
||||
tags: ["autodocs"],
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof AgentTableCard>;
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
agentName: "Super Coder",
|
||||
description: "An AI agent that writes clean, efficient code",
|
||||
imageSrc: [
|
||||
"https://ddz4ak4pa3d19.cloudfront.net/cache/53/b2/53b2bc7d7900f0e1e60bf64ebf38032d.jpg",
|
||||
],
|
||||
dateSubmitted: "2023-05-15",
|
||||
status: "ACTIVE" as StatusType,
|
||||
runs: 1500,
|
||||
rating: 4.8,
|
||||
},
|
||||
};
|
||||
|
||||
export const NoRating: Story = {
|
||||
args: {
|
||||
...Default.args,
|
||||
rating: undefined,
|
||||
},
|
||||
};
|
||||
|
||||
export const NoRuns: Story = {
|
||||
args: {
|
||||
...Default.args,
|
||||
runs: undefined,
|
||||
},
|
||||
};
|
||||
|
||||
export const InactiveAgent: Story = {
|
||||
args: {
|
||||
...Default.args,
|
||||
status: "INACTIVE" as StatusType,
|
||||
},
|
||||
};
|
||||
|
||||
export const LongDescription: Story = {
|
||||
args: {
|
||||
...Default.args,
|
||||
description:
|
||||
"This is a very long description that should wrap to multiple lines. It contains detailed information about the agent and its capabilities.",
|
||||
},
|
||||
};
|
||||
|
||||
export const InteractionTest: Story = {
|
||||
...Default,
|
||||
play: async ({ canvasElement }) => {
|
||||
const canvas = within(canvasElement);
|
||||
const moreButton = canvas.getByRole("button");
|
||||
await userEvent.click(moreButton);
|
||||
},
|
||||
};
|
||||
@@ -1,59 +0,0 @@
|
||||
import type { Meta, StoryObj } from "@storybook/nextjs";
|
||||
import { BecomeACreator } from "./BecomeACreator";
|
||||
import { userEvent, within } from "storybook/test";
|
||||
|
||||
const meta = {
|
||||
title: "Legacy/Become A Creator",
|
||||
component: BecomeACreator,
|
||||
parameters: {
|
||||
layout: "centered",
|
||||
},
|
||||
tags: ["autodocs"],
|
||||
argTypes: {
|
||||
title: { control: "text" },
|
||||
description: { control: "text" },
|
||||
buttonText: { control: "text" },
|
||||
onButtonClick: { action: "buttonClicked" },
|
||||
},
|
||||
} satisfies Meta<typeof BecomeACreator>;
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof meta>;
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
title: "Want to contribute?",
|
||||
description: "Join our ever-growing community of hackers and tinkerers",
|
||||
buttonText: "Become a Creator",
|
||||
onButtonClick: () => console.log("Button clicked"),
|
||||
},
|
||||
};
|
||||
|
||||
export const CustomText: Story = {
|
||||
args: {
|
||||
title: "Become a Creator Today!",
|
||||
description: "Share your ideas and build amazing AI agents with us",
|
||||
buttonText: "Start Creating",
|
||||
onButtonClick: () => console.log("Custom button clicked"),
|
||||
},
|
||||
};
|
||||
|
||||
export const LongDescription: Story = {
|
||||
args: {
|
||||
...Default.args,
|
||||
description:
|
||||
"Join our vibrant community of innovators, developers, and AI enthusiasts. Share your unique perspectives, collaborate on groundbreaking projects, and help shape the future of AI technology.",
|
||||
},
|
||||
};
|
||||
|
||||
export const WithInteraction: Story = {
|
||||
args: {
|
||||
...Default.args,
|
||||
},
|
||||
play: async ({ canvasElement }) => {
|
||||
const canvas = within(canvasElement);
|
||||
const button = canvas.getByText("Become a Creator");
|
||||
|
||||
await userEvent.click(button);
|
||||
},
|
||||
};
|
||||
@@ -1,79 +0,0 @@
|
||||
import type { Meta, StoryObj } from "@storybook/nextjs";
|
||||
import { BreadCrumbs } from "./BreadCrumbs";
|
||||
import { userEvent, within } from "storybook/test";
|
||||
|
||||
const meta = {
|
||||
title: "Legacy/BreadCrumbs",
|
||||
component: BreadCrumbs,
|
||||
parameters: {
|
||||
layout: "centered",
|
||||
},
|
||||
tags: ["autodocs"],
|
||||
argTypes: {
|
||||
items: { control: "object" },
|
||||
},
|
||||
} satisfies Meta<typeof BreadCrumbs>;
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof meta>;
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
items: [
|
||||
{ name: "Home", link: "/" },
|
||||
{ name: "Agents", link: "/agents" },
|
||||
{ name: "SEO Optimizer", link: "/agents/seo-optimizer" },
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
export const SingleItem: Story = {
|
||||
args: {
|
||||
items: [{ name: "Home", link: "/" }],
|
||||
},
|
||||
};
|
||||
|
||||
export const LongPath: Story = {
|
||||
args: {
|
||||
items: [
|
||||
{ name: "Home", link: "/" },
|
||||
{ name: "Categories", link: "/categories" },
|
||||
{ name: "AI Tools", link: "/categories/ai-tools" },
|
||||
{ name: "Data Analysis", link: "/categories/ai-tools/data-analysis" },
|
||||
{
|
||||
name: "Data Analyzer",
|
||||
link: "/categories/ai-tools/data-analysis/data-analyzer",
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
export const WithInteraction: Story = {
|
||||
args: {
|
||||
items: [
|
||||
{ name: "Home", link: "/" },
|
||||
{ name: "Agents", link: "/agents" },
|
||||
{ name: "Task Planner", link: "/agents/task-planner" },
|
||||
],
|
||||
},
|
||||
play: async ({ canvasElement }) => {
|
||||
const canvas = within(canvasElement);
|
||||
const homeLink = canvas.getByText("Home");
|
||||
|
||||
await userEvent.hover(homeLink);
|
||||
await userEvent.click(homeLink);
|
||||
},
|
||||
};
|
||||
|
||||
export const LongNames: Story = {
|
||||
args: {
|
||||
items: [
|
||||
{ name: "Home", link: "/" },
|
||||
{ name: "AI-Powered Writing Assistants", link: "/ai-writing-assistants" },
|
||||
{
|
||||
name: "Advanced Grammar and Style Checker",
|
||||
link: "/ai-writing-assistants/grammar-style-checker",
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
@@ -1,217 +0,0 @@
|
||||
import type { Meta, StoryObj } from "@storybook/nextjs";
|
||||
import { Button } from "./Button";
|
||||
import { userEvent, within, expect } from "storybook/test";
|
||||
|
||||
const meta = {
|
||||
title: "Legacy/Button",
|
||||
component: Button,
|
||||
parameters: {
|
||||
layout: "centered",
|
||||
},
|
||||
tags: ["autodocs"],
|
||||
argTypes: {
|
||||
variant: {
|
||||
control: "select",
|
||||
options: [
|
||||
"default",
|
||||
"destructive",
|
||||
"outline",
|
||||
"secondary",
|
||||
"ghost",
|
||||
"link",
|
||||
],
|
||||
},
|
||||
size: {
|
||||
control: "select",
|
||||
options: ["default", "sm", "lg", "primary", "icon"],
|
||||
},
|
||||
disabled: {
|
||||
control: "boolean",
|
||||
},
|
||||
asChild: {
|
||||
control: "boolean",
|
||||
},
|
||||
children: {
|
||||
control: "text",
|
||||
},
|
||||
onClick: { action: "clicked" },
|
||||
},
|
||||
} satisfies Meta<typeof Button>;
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof meta>;
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
children: "Button",
|
||||
},
|
||||
};
|
||||
|
||||
export const Interactive: Story = {
|
||||
args: {
|
||||
children: "Interactive Button",
|
||||
},
|
||||
argTypes: {
|
||||
onClick: { action: "clicked" },
|
||||
},
|
||||
play: async ({ canvasElement }) => {
|
||||
const canvas = within(canvasElement);
|
||||
const button = canvas.getByRole("button", { name: /Interactive Button/i });
|
||||
await userEvent.click(button);
|
||||
await expect(button).toHaveFocus();
|
||||
},
|
||||
};
|
||||
|
||||
export const Variants: Story = {
|
||||
render: (args) => (
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Button {...args} variant="outline">
|
||||
Outline (default)
|
||||
</Button>
|
||||
<Button {...args} variant="destructive">
|
||||
Destructive
|
||||
</Button>
|
||||
<Button {...args} variant="secondary">
|
||||
Secondary
|
||||
</Button>
|
||||
<Button {...args} variant="ghost">
|
||||
Ghost
|
||||
</Button>
|
||||
<Button {...args} variant="link">
|
||||
Link
|
||||
</Button>
|
||||
</div>
|
||||
),
|
||||
play: async ({ canvasElement }) => {
|
||||
const canvas = within(canvasElement);
|
||||
const buttons = canvas.getAllByRole("button");
|
||||
await expect(buttons).toHaveLength(6);
|
||||
for (const button of buttons) {
|
||||
await userEvent.hover(button);
|
||||
await expect(button).toHaveAttribute(
|
||||
"class",
|
||||
expect.stringContaining("hover:"),
|
||||
);
|
||||
}
|
||||
},
|
||||
};
|
||||
export const Sizes: Story = {
|
||||
render: (args) => (
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<Button {...args} size="sm">
|
||||
Small
|
||||
</Button>
|
||||
<Button {...args} size="default">
|
||||
Default
|
||||
</Button>
|
||||
<Button {...args} size="lg">
|
||||
Large
|
||||
</Button>
|
||||
<Button {...args} size="primary">
|
||||
Primary
|
||||
</Button>
|
||||
<Button {...args} size="icon">
|
||||
🚀
|
||||
</Button>
|
||||
</div>
|
||||
),
|
||||
play: async ({ canvasElement }) => {
|
||||
const canvas = within(canvasElement);
|
||||
const buttons = canvas.getAllByRole("button");
|
||||
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-12 px-5 py-2.5 text-lg",
|
||||
"h-10 w-28",
|
||||
"h-10 w-10",
|
||||
];
|
||||
for (let i = 0; i < buttons.length; i++) {
|
||||
await expect(buttons[i]).toHaveAttribute(
|
||||
"class",
|
||||
expect.stringContaining(sizeClasses[i]),
|
||||
);
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
export const Disabled: Story = {
|
||||
args: {
|
||||
children: "Disabled Button",
|
||||
disabled: true,
|
||||
},
|
||||
play: async ({ canvasElement }) => {
|
||||
const canvas = within(canvasElement);
|
||||
const button = canvas.getByRole("button", { name: /Disabled Button/i });
|
||||
await expect(button).toBeDisabled();
|
||||
await expect(button).toHaveAttribute(
|
||||
"class",
|
||||
expect.stringContaining("disabled:opacity-50"),
|
||||
);
|
||||
await expect(button).not.toHaveFocus();
|
||||
},
|
||||
};
|
||||
|
||||
export const WithIcon: Story = {
|
||||
args: {
|
||||
children: (
|
||||
<>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
className="mr-2 h-4 w-4"
|
||||
>
|
||||
<path d="M15 6v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3" />
|
||||
</svg>
|
||||
Button with Icon
|
||||
</>
|
||||
),
|
||||
},
|
||||
play: async ({ canvasElement }) => {
|
||||
const canvas = within(canvasElement);
|
||||
const button = canvas.getByRole("button", { name: /Button with Icon/i });
|
||||
const icon = button.querySelector("svg");
|
||||
await expect(icon).toBeInTheDocument();
|
||||
await expect(button).toHaveTextContent("Button with Icon");
|
||||
},
|
||||
};
|
||||
|
||||
export const LoadingState: Story = {
|
||||
args: {
|
||||
children: "Loading...",
|
||||
disabled: true,
|
||||
},
|
||||
render: (args) => (
|
||||
<Button {...args}>
|
||||
<svg
|
||||
className="mr-2 h-4 w-4 animate-spin"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path d="M21 12a9 9 0 1 1-6.219-8.56" />
|
||||
</svg>
|
||||
{args.children}
|
||||
</Button>
|
||||
),
|
||||
play: async ({ canvasElement }) => {
|
||||
const canvas = within(canvasElement);
|
||||
const button = canvas.getByRole("button", { name: /Loading.../i });
|
||||
await expect(button).toBeDisabled();
|
||||
const spinner = button.querySelector("svg");
|
||||
await expect(spinner).toHaveClass("animate-spin");
|
||||
},
|
||||
};
|
||||
@@ -1,77 +0,0 @@
|
||||
import type { Meta, StoryObj } from "@storybook/nextjs";
|
||||
import { CreatorCard } from "./CreatorCard";
|
||||
import { userEvent, within } from "storybook/test";
|
||||
|
||||
const meta = {
|
||||
title: "Legacy/Creator Card",
|
||||
component: CreatorCard,
|
||||
parameters: {
|
||||
layout: "centered",
|
||||
},
|
||||
tags: ["autodocs"],
|
||||
argTypes: {
|
||||
creatorName: { control: "text" },
|
||||
creatorImage: { control: "text" },
|
||||
bio: { control: "text" },
|
||||
agentsUploaded: { control: "number" },
|
||||
onClick: { action: "clicked" },
|
||||
},
|
||||
} satisfies Meta<typeof CreatorCard>;
|
||||
|
||||
export default meta;
|
||||
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"),
|
||||
},
|
||||
};
|
||||
|
||||
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"),
|
||||
},
|
||||
};
|
||||
|
||||
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"),
|
||||
},
|
||||
};
|
||||
|
||||
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"),
|
||||
},
|
||||
play: async ({ canvasElement }) => {
|
||||
const canvas = within(canvasElement);
|
||||
const creatorCard = canvas.getByText("Sam Brown");
|
||||
|
||||
await userEvent.hover(creatorCard);
|
||||
await userEvent.click(creatorCard);
|
||||
},
|
||||
};
|
||||
@@ -1,55 +0,0 @@
|
||||
import type { Meta, StoryObj } from "@storybook/nextjs";
|
||||
import { CreatorInfoCard } from "./CreatorInfoCard";
|
||||
|
||||
const meta = {
|
||||
title: "Legacy/Creator Info Card",
|
||||
component: CreatorInfoCard,
|
||||
parameters: {
|
||||
layout: "centered",
|
||||
},
|
||||
tags: ["autodocs"],
|
||||
argTypes: {
|
||||
username: { control: "text" },
|
||||
handle: { control: "text" },
|
||||
avatarSrc: { control: "text" },
|
||||
categories: { control: "object" },
|
||||
averageRating: { control: "number", min: 0, max: 5, step: 0.1 },
|
||||
totalRuns: { control: "number" },
|
||||
},
|
||||
} satisfies Meta<typeof CreatorInfoCard>;
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof meta>;
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
username: "SignificantGravitas",
|
||||
handle: "oliviagrace1421",
|
||||
avatarSrc: "https://github.com/shadcn.png",
|
||||
categories: ["Entertainment", "Business"],
|
||||
averageRating: 4.7,
|
||||
totalRuns: 1500,
|
||||
},
|
||||
};
|
||||
|
||||
export const NewCreator: Story = {
|
||||
args: {
|
||||
username: "AI Enthusiast",
|
||||
handle: "ai_newbie",
|
||||
avatarSrc: "https://example.com/avatar2.jpg",
|
||||
categories: ["AI", "Technology"],
|
||||
averageRating: 0,
|
||||
totalRuns: 0,
|
||||
},
|
||||
};
|
||||
|
||||
export const ExperiencedCreator: Story = {
|
||||
args: {
|
||||
username: "Tech Master",
|
||||
handle: "techmaster",
|
||||
avatarSrc: "https://example.com/avatar3.jpg",
|
||||
categories: ["AI", "Development", "Education"],
|
||||
averageRating: 4.9,
|
||||
totalRuns: 50000,
|
||||
},
|
||||
};
|
||||
@@ -1,68 +0,0 @@
|
||||
import type { Meta, StoryObj } from "@storybook/nextjs";
|
||||
import { CreatorLinks } from "./CreatorLinks";
|
||||
|
||||
const meta = {
|
||||
title: "Legacy/Creator Links",
|
||||
component: CreatorLinks,
|
||||
parameters: {
|
||||
layout: "centered",
|
||||
},
|
||||
tags: ["autodocs"],
|
||||
argTypes: {
|
||||
links: {
|
||||
control: "object",
|
||||
description: "Object containing various social and web links",
|
||||
},
|
||||
},
|
||||
} satisfies Meta<typeof CreatorLinks>;
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof meta>;
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
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: ["https://example.com"],
|
||||
},
|
||||
};
|
||||
|
||||
export const SocialLinks: Story = {
|
||||
args: {
|
||||
links: [
|
||||
"https://linkedin.com/in/janedoe",
|
||||
"https://github.com/janedoe",
|
||||
"https://twitter.com/janedoe",
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
export const NoLinks: Story = {
|
||||
args: {
|
||||
links: [],
|
||||
},
|
||||
};
|
||||
|
||||
export const MultipleOtherLinks: Story = {
|
||||
args: {
|
||||
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",
|
||||
],
|
||||
},
|
||||
};
|
||||
@@ -1,83 +0,0 @@
|
||||
import type { Meta, StoryObj } from "@storybook/nextjs";
|
||||
import { userEvent, within } from "storybook/test";
|
||||
import { FeaturedAgentCard } from "./FeaturedAgentCard";
|
||||
|
||||
const meta = {
|
||||
title: "Legacy/Featured Store Card",
|
||||
component: FeaturedAgentCard,
|
||||
parameters: {
|
||||
layout: {
|
||||
center: true,
|
||||
padding: 0,
|
||||
},
|
||||
},
|
||||
tags: ["autodocs"],
|
||||
argTypes: {
|
||||
agent: {
|
||||
agent_name: { control: "text" },
|
||||
sub_heading: { control: "text" },
|
||||
agent_image: { control: "text" },
|
||||
creator_avatar: { control: "text" },
|
||||
creator: { control: "text" },
|
||||
runs: { control: "number" },
|
||||
rating: { control: "number", min: 0, max: 5, step: 0.1 },
|
||||
slug: { control: "text" },
|
||||
},
|
||||
backgroundColor: {
|
||||
control: "color",
|
||||
},
|
||||
},
|
||||
} satisfies Meta<typeof FeaturedAgentCard>;
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof meta>;
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
agent: {
|
||||
updated_at: "2024-01-10T15:30:00.000Z",
|
||||
agent_name:
|
||||
"Personalized Morning Coffee Newsletter example of three lines",
|
||||
sub_heading:
|
||||
"Transform ideas into breathtaking images with this AI-powered Image Generator.",
|
||||
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.",
|
||||
agent_image:
|
||||
"https://framerusercontent.com/images/KCIpxr9f97EGJgpaoqnjKsrOPwI.jpg",
|
||||
creator_avatar:
|
||||
"https://framerusercontent.com/images/KCIpxr9f97EGJgpaoqnjKsrOPwI.jpg",
|
||||
creator: "AI Solutions Inc.",
|
||||
runs: 50000,
|
||||
rating: 4.7,
|
||||
slug: "",
|
||||
},
|
||||
backgroundColor: "bg-white",
|
||||
},
|
||||
};
|
||||
|
||||
export const WithInteraction: Story = {
|
||||
args: {
|
||||
agent: {
|
||||
updated_at: "2024-01-10T15:30:00.000Z",
|
||||
slug: "",
|
||||
agent_name: "AI Writing Assistant",
|
||||
sub_heading: "Enhance your writing",
|
||||
description:
|
||||
"An AI-powered writing assistant that helps improve your writing style and clarity.",
|
||||
agent_image:
|
||||
"https://framerusercontent.com/images/KCIpxr9f97EGJgpaoqnjKsrOPwI.jpg",
|
||||
creator_avatar:
|
||||
"https://framerusercontent.com/images/KCIpxr9f97EGJgpaoqnjKsrOPwI.jpg",
|
||||
creator: "WordCraft AI",
|
||||
runs: 200000,
|
||||
rating: 4.6,
|
||||
},
|
||||
backgroundColor: "bg-white",
|
||||
},
|
||||
play: async ({ canvasElement }) => {
|
||||
const canvas = within(canvasElement);
|
||||
const featuredCard = canvas.getByTestId("featured-store-card");
|
||||
await userEvent.hover(featuredCard);
|
||||
await userEvent.click(featuredCard);
|
||||
},
|
||||
};
|
||||
@@ -1,123 +0,0 @@
|
||||
import type { Meta, StoryObj } from "@storybook/nextjs";
|
||||
import { FilterChips } from "./FilterChips";
|
||||
import { userEvent, within, expect } from "storybook/test";
|
||||
|
||||
const meta = {
|
||||
title: "Legacy/Filter Chips",
|
||||
component: FilterChips,
|
||||
parameters: {
|
||||
layout: "centered",
|
||||
},
|
||||
tags: ["autodocs"],
|
||||
argTypes: {
|
||||
badges: { control: "object" },
|
||||
onFilterChange: { action: "onFilterChange" },
|
||||
multiSelect: { control: "boolean" },
|
||||
},
|
||||
} satisfies Meta<typeof FilterChips>;
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof meta>;
|
||||
|
||||
const defaultBadges = [
|
||||
"Marketing",
|
||||
"Sales",
|
||||
"Content creation",
|
||||
"Lorem ipsum",
|
||||
"Lorem ipsum",
|
||||
];
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
badges: defaultBadges,
|
||||
multiSelect: true,
|
||||
},
|
||||
};
|
||||
|
||||
export const SingleSelect: Story = {
|
||||
args: {
|
||||
badges: defaultBadges,
|
||||
multiSelect: false,
|
||||
},
|
||||
};
|
||||
|
||||
export const WithSelectedFilters: Story = {
|
||||
args: {
|
||||
badges: defaultBadges,
|
||||
multiSelect: true,
|
||||
},
|
||||
play: async ({ canvasElement }) => {
|
||||
const canvas = within(canvasElement);
|
||||
const marketingChip = canvas.getByText("Marketing").parentElement;
|
||||
const salesChip = canvas.getByText("Sales").parentElement;
|
||||
if (!marketingChip || !salesChip) {
|
||||
throw new Error("Marketing or Sales chip not found");
|
||||
}
|
||||
|
||||
await userEvent.click(marketingChip);
|
||||
await userEvent.click(salesChip);
|
||||
|
||||
await expect(marketingChip).toHaveClass("bg-neutral-100");
|
||||
await expect(salesChip).toHaveClass("bg-neutral-100");
|
||||
},
|
||||
};
|
||||
|
||||
export const WithFilterChangeCallback: Story = {
|
||||
args: {
|
||||
badges: defaultBadges,
|
||||
multiSelect: true,
|
||||
onFilterChange: (selectedFilters: string[]) => {
|
||||
console.log("Selected filters:", selectedFilters);
|
||||
},
|
||||
},
|
||||
play: async ({ canvasElement }) => {
|
||||
const canvas = within(canvasElement);
|
||||
const salesChip = canvas.getByText("Sales");
|
||||
const marketingChip = canvas.getByText("Marketing");
|
||||
|
||||
await userEvent.click(salesChip);
|
||||
await userEvent.click(marketingChip);
|
||||
},
|
||||
};
|
||||
|
||||
export const EmptyBadges: Story = {
|
||||
args: {
|
||||
badges: [],
|
||||
multiSelect: true,
|
||||
},
|
||||
};
|
||||
|
||||
export const LongBadgeNames: Story = {
|
||||
args: {
|
||||
badges: [
|
||||
"Machine Learning",
|
||||
"Natural Language Processing",
|
||||
"Computer Vision",
|
||||
"Data Science",
|
||||
],
|
||||
multiSelect: true,
|
||||
},
|
||||
};
|
||||
|
||||
export const SingleSelectBehavior: Story = {
|
||||
args: {
|
||||
badges: defaultBadges,
|
||||
multiSelect: false,
|
||||
},
|
||||
play: async ({ canvasElement }) => {
|
||||
const canvas = within(canvasElement);
|
||||
const salesChip = canvas.getByText("Sales").parentElement;
|
||||
const marketingChip = canvas.getByText("Marketing").parentElement;
|
||||
|
||||
if (!salesChip || !marketingChip) {
|
||||
throw new Error("Sales or Marketing chip not found");
|
||||
}
|
||||
|
||||
await userEvent.click(salesChip);
|
||||
await expect(salesChip).toHaveClass("bg-neutral-100");
|
||||
|
||||
await userEvent.click(marketingChip);
|
||||
await expect(marketingChip).toHaveClass("bg-neutral-100");
|
||||
await expect(salesChip).not.toHaveClass("bg-neutral-100");
|
||||
},
|
||||
};
|
||||
@@ -1,104 +0,0 @@
|
||||
import type { Meta, StoryObj } from "@storybook/nextjs";
|
||||
import { MobileNavBar } from "./MobileNavBar";
|
||||
import { userEvent, within } from "storybook/test";
|
||||
import { IconType } from "../ui/icons";
|
||||
|
||||
const meta = {
|
||||
title: "Legacy/Mobile Nav Bar",
|
||||
component: MobileNavBar,
|
||||
parameters: {
|
||||
layout: "centered",
|
||||
},
|
||||
tags: ["autodocs"],
|
||||
argTypes: {
|
||||
userName: { control: "text" },
|
||||
userEmail: { control: "text" },
|
||||
avatarSrc: { control: "text" },
|
||||
menuItemGroups: { control: "object" },
|
||||
},
|
||||
} satisfies Meta<typeof MobileNavBar>;
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof meta>;
|
||||
|
||||
const defaultMenuItemGroups = [
|
||||
{
|
||||
items: [
|
||||
{ icon: IconType.Marketplace, text: "Marketplace", href: "/marketplace" },
|
||||
{ icon: IconType.Library, text: "Library", href: "/library" },
|
||||
{ icon: IconType.Builder, text: "Builder", href: "/builder" },
|
||||
],
|
||||
},
|
||||
{
|
||||
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 Default: Story = {
|
||||
args: {
|
||||
userName: "John Doe",
|
||||
userEmail: "john.doe@example.com",
|
||||
avatarSrc: "https://avatars.githubusercontent.com/u/123456789?v=4",
|
||||
menuItemGroups: defaultMenuItemGroups,
|
||||
},
|
||||
};
|
||||
|
||||
export const NoAvatar: Story = {
|
||||
args: {
|
||||
userName: "Jane Smith",
|
||||
userEmail: "jane.smith@example.com",
|
||||
menuItemGroups: defaultMenuItemGroups,
|
||||
},
|
||||
};
|
||||
|
||||
export const LongUserName: Story = {
|
||||
args: {
|
||||
userName: "Alexander Bartholomew Christopherson III",
|
||||
userEmail: "alexander@example.com",
|
||||
avatarSrc: "https://avatars.githubusercontent.com/u/987654321?v=4",
|
||||
menuItemGroups: defaultMenuItemGroups,
|
||||
},
|
||||
};
|
||||
|
||||
export const WithInteraction: Story = {
|
||||
args: {
|
||||
...Default.args,
|
||||
},
|
||||
play: async ({ canvasElement }) => {
|
||||
const canvas = within(canvasElement);
|
||||
const menuTrigger = canvas.getByRole("button");
|
||||
|
||||
await userEvent.click(menuTrigger);
|
||||
|
||||
// Wait for the popover to appear
|
||||
await canvas.findByText("Edit profile");
|
||||
},
|
||||
};
|
||||
@@ -1,137 +0,0 @@
|
||||
import type { Meta, StoryObj } from "@storybook/nextjs";
|
||||
import { Navbar } from "./Navbar";
|
||||
import { userEvent, within } from "storybook/test";
|
||||
import { IconType } from "../ui/icons";
|
||||
|
||||
const meta = {
|
||||
title: "Legacy/Navbar",
|
||||
component: Navbar,
|
||||
parameters: {
|
||||
layout: "fullscreen",
|
||||
},
|
||||
tags: ["autodocs"],
|
||||
argTypes: {
|
||||
// isLoggedIn: { control: "boolean" },
|
||||
// avatarSrc: { control: "text" },
|
||||
links: { control: "object" },
|
||||
// activeLink: { control: "text" },
|
||||
menuItemGroups: { control: "object" },
|
||||
// params: { control: { type: "object", defaultValue: { lang: "en" } } },
|
||||
},
|
||||
} satisfies Meta<typeof Navbar>;
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof meta>;
|
||||
|
||||
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"),
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const defaultLinks = [
|
||||
{ name: "Marketplace", href: "/marketplace" },
|
||||
{ name: "Library", href: "/library" },
|
||||
{ name: "Build", href: "/builder" },
|
||||
];
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
// params: { lang: "en" },
|
||||
// isLoggedIn: true,
|
||||
links: defaultLinks,
|
||||
// activeLink: "/marketplace",
|
||||
// avatarSrc: mockProfileData.avatar_url,
|
||||
menuItemGroups: defaultMenuItemGroups,
|
||||
},
|
||||
};
|
||||
|
||||
export const WithActiveLink: Story = {
|
||||
args: {
|
||||
...Default.args,
|
||||
// activeLink: "/library",
|
||||
},
|
||||
};
|
||||
|
||||
export const LongUserName: Story = {
|
||||
args: {
|
||||
...Default.args,
|
||||
// avatarSrc: "https://avatars.githubusercontent.com/u/987654321?v=4",
|
||||
},
|
||||
};
|
||||
|
||||
export const NoAvatar: Story = {
|
||||
args: {
|
||||
...Default.args,
|
||||
// avatarSrc: undefined,
|
||||
},
|
||||
};
|
||||
|
||||
export const WithInteraction: Story = {
|
||||
args: {
|
||||
...Default.args,
|
||||
},
|
||||
play: async ({ canvasElement }) => {
|
||||
const canvas = within(canvasElement);
|
||||
const profileTrigger = canvas.getByRole("button");
|
||||
|
||||
await userEvent.click(profileTrigger);
|
||||
|
||||
// Wait for the popover to appear
|
||||
await canvas.findByText("Edit profile");
|
||||
},
|
||||
};
|
||||
|
||||
export const NotLoggedIn: Story = {
|
||||
args: {
|
||||
...Default.args,
|
||||
// isLoggedIn: false,
|
||||
// avatarSrc: undefined,
|
||||
},
|
||||
};
|
||||
|
||||
export const WithCredits: Story = {
|
||||
args: {
|
||||
...Default.args,
|
||||
},
|
||||
};
|
||||
|
||||
export const WithLargeCredits: Story = {
|
||||
args: {
|
||||
...Default.args,
|
||||
},
|
||||
};
|
||||
|
||||
export const WithZeroCredits: Story = {
|
||||
args: {
|
||||
...Default.args,
|
||||
},
|
||||
};
|
||||
@@ -1,73 +0,0 @@
|
||||
import type { Meta, StoryObj } from "@storybook/nextjs";
|
||||
import { ProfileInfoForm } from "./ProfileInfoForm";
|
||||
|
||||
const meta: Meta<typeof ProfileInfoForm> = {
|
||||
title: "Legacy/Profile/Profile Info Form",
|
||||
component: ProfileInfoForm,
|
||||
parameters: {
|
||||
layout: "fullscreen",
|
||||
},
|
||||
tags: ["autodocs"],
|
||||
argTypes: {
|
||||
profile: {
|
||||
control: "object",
|
||||
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",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof ProfileInfoForm>;
|
||||
|
||||
export const Empty: Story = {
|
||||
args: {
|
||||
profile: {
|
||||
name: "",
|
||||
username: "",
|
||||
description: "",
|
||||
avatar_url: "",
|
||||
links: [],
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const Filled: Story = {
|
||||
args: {
|
||||
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",
|
||||
],
|
||||
},
|
||||
},
|
||||
};
|
||||
@@ -1,99 +0,0 @@
|
||||
import type { Meta, StoryObj } from "@storybook/nextjs";
|
||||
import { ProfilePopoutMenu } from "./ProfilePopoutMenu";
|
||||
import { userEvent, within } from "storybook/test";
|
||||
import { IconType } from "../ui/icons";
|
||||
|
||||
const meta = {
|
||||
title: "Legacy/Profile Popout Menu",
|
||||
component: ProfilePopoutMenu,
|
||||
parameters: {
|
||||
layout: "centered",
|
||||
},
|
||||
tags: ["autodocs"],
|
||||
argTypes: {
|
||||
userName: { control: "text" },
|
||||
userEmail: { control: "text" },
|
||||
avatarSrc: { control: "text" },
|
||||
menuItemGroups: { control: "object" },
|
||||
hideNavBarUsername: { control: "boolean" },
|
||||
},
|
||||
} satisfies Meta<typeof ProfilePopoutMenu>;
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof meta>;
|
||||
|
||||
const defaultMenuItemGroups = [
|
||||
{
|
||||
// Creator actions group
|
||||
items: [
|
||||
{
|
||||
icon: IconType.LayoutDashboard,
|
||||
text: "Creator Dashboard",
|
||||
href: "/dashboard",
|
||||
},
|
||||
{
|
||||
icon: IconType.UploadCloud,
|
||||
text: "Publish an agent",
|
||||
href: "/publish",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
// Profile management group
|
||||
items: [
|
||||
{ icon: IconType.Edit, text: "Edit profile", href: "/profile/edit" },
|
||||
{ icon: IconType.Settings, text: "Settings", href: "/settings" },
|
||||
],
|
||||
},
|
||||
{
|
||||
// Logout group
|
||||
items: [
|
||||
{
|
||||
icon: IconType.LogOut,
|
||||
text: "Log out",
|
||||
onClick: () => console.log("Logged out"),
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
userName: "John Doe",
|
||||
userEmail: "john.doe@example.com",
|
||||
avatarSrc: "https://avatars.githubusercontent.com/u/123456789?v=4",
|
||||
menuItemGroups: defaultMenuItemGroups,
|
||||
},
|
||||
};
|
||||
|
||||
export const NoAvatar: Story = {
|
||||
args: {
|
||||
userName: "Jane Smith",
|
||||
userEmail: "jane.smith@example.com",
|
||||
menuItemGroups: defaultMenuItemGroups,
|
||||
},
|
||||
};
|
||||
|
||||
export const LongUserName: Story = {
|
||||
args: {
|
||||
userName: "Alexander Bartholomew Christopherson III",
|
||||
userEmail: "alexander@example.com",
|
||||
avatarSrc: "https://avatars.githubusercontent.com/u/987654321?v=4",
|
||||
menuItemGroups: defaultMenuItemGroups,
|
||||
},
|
||||
};
|
||||
|
||||
export const WithInteraction: Story = {
|
||||
args: {
|
||||
...Default.args,
|
||||
},
|
||||
play: async ({ canvasElement }) => {
|
||||
const canvas = within(canvasElement);
|
||||
const profileTrigger = canvas.getByText("John Doe");
|
||||
|
||||
await userEvent.click(profileTrigger);
|
||||
|
||||
// Wait for the popover to appear
|
||||
await canvas.findByText("Edit profile");
|
||||
},
|
||||
};
|
||||
@@ -1,27 +0,0 @@
|
||||
import type { Meta, StoryObj } from "@storybook/nextjs";
|
||||
import { PublishAgentAwaitingReview } from "./PublishAgentAwaitingReview";
|
||||
|
||||
const meta: Meta<typeof PublishAgentAwaitingReview> = {
|
||||
title: "Legacy/Publish Agent Awaiting Review",
|
||||
component: PublishAgentAwaitingReview,
|
||||
tags: ["autodocs"],
|
||||
parameters: {
|
||||
layout: "centered",
|
||||
},
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof PublishAgentAwaitingReview>;
|
||||
|
||||
export const Filled: Story = {
|
||||
args: {
|
||||
agentName: "AI Video Generator",
|
||||
subheader: "Create Viral-Ready Content in Seconds",
|
||||
description:
|
||||
"AI Shortform Video Generator: Create Viral-Ready Content in Seconds Transform trending topics into engaging shortform videos with this cutting-edge AI Video Generator. Perfect for content creators, social media managers, and marketers looking to capitalize on the latest news and viral trends. Simply input your desired video count and source website, and watch as the AI scours the internet for the hottest stories, crafting them into attention-grabbing scripts optimized for platforms like TikTok, Instagram Reels, and YouTube Shorts. Key features include: - Customizable video count (1-5 per generation) - Flexible source selection for trending topics - AI-driven script writing following best practices for shortform content - Hooks that capture attention in the first 3 seconds - Dual narrative storytelling for maximum engagement - SEO-optimized content to boost discoverability - Integration with video generation tools for seamless production From hook to conclusion, each script is meticulously crafted to maintain viewer interest, incorporating proven techniques like 'but so' storytelling, visual metaphors, and strategically placed calls-to-action. The AI Shortform Video Generator streamlines your content creation process, allowing you to stay ahead of trends and consistently produce viral-worthy videos that resonate with your audience.",
|
||||
thumbnailSrc: "https://picsum.photos/seed/video/500/350",
|
||||
onClose: () => console.log("Close clicked"),
|
||||
onDone: () => console.log("Done clicked"),
|
||||
onViewProgress: () => console.log("View progress clicked"),
|
||||
},
|
||||
};
|
||||
@@ -1,119 +0,0 @@
|
||||
import type { Meta, StoryObj } from "@storybook/nextjs";
|
||||
import { Agent, PublishAgentSelect } from "./PublishAgentSelect";
|
||||
|
||||
const meta: Meta<typeof PublishAgentSelect> = {
|
||||
title: "Legacy/Publish Agent Select",
|
||||
component: PublishAgentSelect,
|
||||
tags: ["autodocs"],
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof PublishAgentSelect>;
|
||||
|
||||
const mockAgents: Agent[] = [
|
||||
{
|
||||
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,
|
||||
},
|
||||
];
|
||||
|
||||
const defaultArgs = {
|
||||
onSelect: (agentName: string) => console.log(`Selected: ${agentName}`),
|
||||
onCancel: () => console.log("Cancelled"),
|
||||
onNext: () => console.log("Next clicked"),
|
||||
onOpenBuilder: () => console.log("Open builder clicked"),
|
||||
};
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
...defaultArgs,
|
||||
agents: mockAgents,
|
||||
},
|
||||
};
|
||||
|
||||
export const NoAgents: Story = {
|
||||
args: {
|
||||
...defaultArgs,
|
||||
agents: [],
|
||||
},
|
||||
};
|
||||
|
||||
export const SingleAgent: Story = {
|
||||
args: {
|
||||
...defaultArgs,
|
||||
agents: [mockAgents[0]],
|
||||
},
|
||||
};
|
||||
|
||||
export const SixAgents: Story = {
|
||||
args: {
|
||||
...defaultArgs,
|
||||
agents: mockAgents.slice(0, 6),
|
||||
},
|
||||
};
|
||||
|
||||
export const NineAgents: Story = {
|
||||
args: {
|
||||
...defaultArgs,
|
||||
agents: mockAgents,
|
||||
},
|
||||
};
|
||||
@@ -1,87 +0,0 @@
|
||||
import type { Meta, StoryObj } from "@storybook/nextjs";
|
||||
import { PublishAgentInfo } from "./PublishAgentSelectInfo";
|
||||
|
||||
const meta: Meta<typeof PublishAgentInfo> = {
|
||||
title: "Legacy/Publish Agent Info",
|
||||
component: PublishAgentInfo,
|
||||
tags: ["autodocs"],
|
||||
decorators: [
|
||||
(Story) => (
|
||||
<div style={{ maxWidth: "670px", margin: "0 auto" }}>
|
||||
<Story />
|
||||
</div>
|
||||
),
|
||||
],
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof PublishAgentInfo>;
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
onBack: () => console.log("Back clicked"),
|
||||
onSubmit: () => console.log("Submit clicked"),
|
||||
onClose: () => console.log("Close clicked"),
|
||||
},
|
||||
};
|
||||
|
||||
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",
|
||||
youtubeLink: "https://www.youtube.com/watch?v=dQw4w9WgXcQ",
|
||||
category: "SEO",
|
||||
description:
|
||||
"This AI agent specializes in analyzing websites and providing actionable recommendations to improve search engine optimization. It can perform keyword research, analyze backlinks, and suggest content improvements.",
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
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",
|
||||
youtubeLink: "https://www.youtube.com/watch?v=dQw4w9WgXcQ",
|
||||
category: "SEO",
|
||||
description:
|
||||
"This agent allows you to upload and manage multiple images.",
|
||||
additionalImages: [
|
||||
"https://picsum.photos/seed/second/500/350",
|
||||
"https://picsum.photos/seed/third/500/350",
|
||||
],
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
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",
|
||||
youtubeLink: "https://www.youtube.com/watch?v=dQw4w9WgXcQ",
|
||||
category: "SEO",
|
||||
description: "This agent displays a gallery of six images.",
|
||||
additionalImages: [
|
||||
"https://picsum.photos/seed/gallery2/500/350",
|
||||
"https://picsum.photos/seed/gallery3/500/350",
|
||||
"https://picsum.photos/seed/gallery4/500/350",
|
||||
"https://picsum.photos/seed/gallery5/500/350",
|
||||
"https://picsum.photos/seed/gallery6/500/350",
|
||||
],
|
||||
},
|
||||
},
|
||||
};
|
||||
@@ -1,47 +0,0 @@
|
||||
import type { Meta, StoryObj } from "@storybook/nextjs";
|
||||
import { RatingCard } from "./RatingCard";
|
||||
|
||||
const meta = {
|
||||
title: "Legacy/RatingCard",
|
||||
component: RatingCard,
|
||||
parameters: {
|
||||
layout: "centered",
|
||||
},
|
||||
tags: ["autodocs"],
|
||||
} satisfies Meta<typeof RatingCard>;
|
||||
|
||||
export default meta;
|
||||
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");
|
||||
// },
|
||||
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");
|
||||
// },
|
||||
storeListingVersionId: "1",
|
||||
},
|
||||
};
|
||||
|
||||
export const WithoutCallbacks: Story = {
|
||||
args: {
|
||||
agentName: "Test Agent",
|
||||
storeListingVersionId: "1",
|
||||
},
|
||||
};
|
||||
@@ -1,86 +0,0 @@
|
||||
import type { Meta, StoryObj } from "@storybook/nextjs";
|
||||
import { SearchBar } from "./SearchBar";
|
||||
import { userEvent, within, expect } from "storybook/test";
|
||||
|
||||
const meta = {
|
||||
title: "Legacy/Search Bar",
|
||||
component: SearchBar,
|
||||
parameters: {
|
||||
layout: {
|
||||
center: true,
|
||||
padding: 0,
|
||||
},
|
||||
nextjs: {
|
||||
appDirectory: true,
|
||||
navigation: {
|
||||
pathname: "/search",
|
||||
query: {
|
||||
searchTerm: "",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
tags: ["autodocs"],
|
||||
argTypes: {
|
||||
placeholder: { control: "text" },
|
||||
backgroundColor: { control: "text" },
|
||||
iconColor: { control: "text" },
|
||||
textColor: { control: "text" },
|
||||
placeholderColor: { control: "text" },
|
||||
},
|
||||
decorators: [
|
||||
(Story) => (
|
||||
<div className="mx-auto w-full max-w-screen-lg p-4">
|
||||
<Story />
|
||||
</div>
|
||||
),
|
||||
],
|
||||
} satisfies Meta<typeof SearchBar>;
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof meta>;
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
placeholder: 'Search for tasks like "optimise SEO"',
|
||||
},
|
||||
};
|
||||
|
||||
export const CustomStyles: Story = {
|
||||
args: {
|
||||
placeholder: "Enter your search query",
|
||||
backgroundColor: "bg-blue-100",
|
||||
iconColor: "text-blue-500",
|
||||
textColor: "text-blue-700",
|
||||
placeholderColor: "text-blue-400",
|
||||
},
|
||||
};
|
||||
|
||||
export const WithInteraction: Story = {
|
||||
args: {
|
||||
placeholder: "Type and press Enter",
|
||||
},
|
||||
play: async ({ canvasElement }) => {
|
||||
const canvas = within(canvasElement);
|
||||
const input = canvas.getByPlaceholderText("Type and press Enter");
|
||||
|
||||
await userEvent.type(input, "test query");
|
||||
await userEvent.keyboard("{Enter}");
|
||||
|
||||
await expect(input).toHaveValue("test query");
|
||||
},
|
||||
};
|
||||
|
||||
export const EmptySubmit: Story = {
|
||||
args: {
|
||||
placeholder: "Empty submit test",
|
||||
},
|
||||
play: async ({ canvasElement }) => {
|
||||
const canvas = within(canvasElement);
|
||||
const input = canvas.getByPlaceholderText("Empty submit test");
|
||||
|
||||
await userEvent.keyboard("{Enter}");
|
||||
|
||||
await expect(input).toHaveValue("");
|
||||
},
|
||||
};
|
||||
@@ -1,34 +0,0 @@
|
||||
import type { Meta, StoryObj } from "@storybook/nextjs";
|
||||
import { Sidebar } from "./Sidebar";
|
||||
|
||||
const meta = {
|
||||
title: "Legacy/Sidebar",
|
||||
component: Sidebar,
|
||||
parameters: {
|
||||
layout: "centered",
|
||||
},
|
||||
tags: ["autodocs"],
|
||||
argTypes: {
|
||||
linkGroups: { control: "object" },
|
||||
},
|
||||
} satisfies Meta<typeof Sidebar>;
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof meta>;
|
||||
|
||||
const defaultLinkGroups = [
|
||||
{
|
||||
links: [
|
||||
{ text: "Agent dashboard", href: "/dashboard" },
|
||||
{ text: "Integrations", href: "/integrations" },
|
||||
{ text: "Profile", href: "/profile" },
|
||||
{ text: "Settings", href: "/settings" },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
linkGroups: defaultLinkGroups,
|
||||
},
|
||||
};
|
||||
@@ -1,58 +0,0 @@
|
||||
import type { Meta, StoryObj } from "@storybook/nextjs";
|
||||
import { Status, StatusType } from "./Status";
|
||||
|
||||
const meta = {
|
||||
title: "Legacy/Status",
|
||||
component: Status,
|
||||
parameters: {
|
||||
layout: "centered",
|
||||
},
|
||||
tags: ["autodocs"],
|
||||
argTypes: {
|
||||
status: {
|
||||
control: "select",
|
||||
options: ["draft", "awaiting_review", "approved", "rejected"],
|
||||
},
|
||||
},
|
||||
} satisfies Meta<typeof Status>;
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof meta>;
|
||||
|
||||
export const Draft: Story = {
|
||||
args: {
|
||||
status: "draft" as StatusType,
|
||||
},
|
||||
};
|
||||
|
||||
export const AwaitingReview: Story = {
|
||||
args: {
|
||||
status: "awaiting_review" as StatusType,
|
||||
},
|
||||
};
|
||||
|
||||
export const Approved: Story = {
|
||||
args: {
|
||||
status: "approved" as StatusType,
|
||||
},
|
||||
};
|
||||
|
||||
export const Rejected: Story = {
|
||||
args: {
|
||||
status: "rejected" as StatusType,
|
||||
},
|
||||
};
|
||||
|
||||
export const AllStatuses: Story = {
|
||||
args: {
|
||||
status: "draft" as StatusType,
|
||||
},
|
||||
render: () => (
|
||||
<div className="flex flex-col gap-4">
|
||||
<Status status="draft" />
|
||||
<Status status="awaiting_review" />
|
||||
<Status status="approved" />
|
||||
<Status status="rejected" />
|
||||
</div>
|
||||
),
|
||||
};
|
||||
@@ -1,115 +0,0 @@
|
||||
import type { Meta, StoryObj } from "@storybook/nextjs";
|
||||
import { StoreCard } from "./StoreCard";
|
||||
import { userEvent, within } from "storybook/test";
|
||||
|
||||
const meta = {
|
||||
title: "Legacy/StoreCard",
|
||||
component: StoreCard,
|
||||
parameters: {
|
||||
layout: {
|
||||
center: true,
|
||||
fullscreen: true,
|
||||
padding: 0,
|
||||
},
|
||||
},
|
||||
tags: ["autodocs"],
|
||||
argTypes: {
|
||||
agentName: { control: "text" },
|
||||
agentImage: { control: "text" },
|
||||
description: { control: "text" },
|
||||
runs: { control: "number" },
|
||||
rating: { control: "number", min: 0, max: 5, step: 0.1 },
|
||||
onClick: { action: "clicked" },
|
||||
avatarSrc: { control: "text" },
|
||||
},
|
||||
} satisfies Meta<typeof StoreCard>;
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof meta>;
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
agentName: "SEO Optimizer",
|
||||
agentImage:
|
||||
"https://framerusercontent.com/images/KCIpxr9f97EGJgpaoqnjKsrOPwI.jpg",
|
||||
description: "Optimize your website's SEO with AI-powered suggestions",
|
||||
runs: 10000,
|
||||
rating: 4.5,
|
||||
onClick: () => console.log("Default StoreCard clicked"),
|
||||
avatarSrc: "https://github.com/shadcn.png",
|
||||
},
|
||||
};
|
||||
|
||||
export const LowRating: Story = {
|
||||
args: {
|
||||
agentName: "Data Analyzer",
|
||||
agentImage:
|
||||
"https://upload.wikimedia.org/wikipedia/commons/c/c5/Big_buck_bunny_poster_big.jpg",
|
||||
description: "Analyze complex datasets with machine learning algorithms",
|
||||
runs: 5000,
|
||||
rating: 2.7,
|
||||
onClick: () => console.log("LowRating StoreCard clicked"),
|
||||
avatarSrc: "https://example.com/avatar2.jpg",
|
||||
},
|
||||
};
|
||||
|
||||
export const HighRuns: Story = {
|
||||
args: {
|
||||
agentName: "Code Assistant",
|
||||
agentImage:
|
||||
"https://framerusercontent.com/images/KCIpxr9f97EGJgpaoqnjKsrOPwI.jpg",
|
||||
description: "Get AI-powered coding help for various programming languages",
|
||||
runs: 1000000,
|
||||
rating: 4.8,
|
||||
onClick: () => console.log("HighRuns StoreCard clicked"),
|
||||
avatarSrc: "https://example.com/avatar3.jpg",
|
||||
},
|
||||
};
|
||||
|
||||
export const WithInteraction: Story = {
|
||||
args: {
|
||||
agentName: "Task Planner",
|
||||
agentImage:
|
||||
"https://upload.wikimedia.org/wikipedia/commons/c/c5/Big_buck_bunny_poster_big.jpg",
|
||||
description: "Plan and organize your tasks efficiently with AI",
|
||||
runs: 50000,
|
||||
rating: 4.2,
|
||||
onClick: () => console.log("WithInteraction StoreCard clicked"),
|
||||
avatarSrc: "https://example.com/avatar4.jpg",
|
||||
},
|
||||
play: async ({ canvasElement }) => {
|
||||
const canvas = within(canvasElement);
|
||||
const storeCard = canvas.getByText("Task Planner");
|
||||
|
||||
await userEvent.hover(storeCard);
|
||||
await userEvent.click(storeCard);
|
||||
},
|
||||
};
|
||||
|
||||
export const LongDescription: Story = {
|
||||
args: {
|
||||
agentName: "AI Writing Assistant",
|
||||
agentImage:
|
||||
"https://framerusercontent.com/images/KCIpxr9f97EGJgpaoqnjKsrOPwI.jpg",
|
||||
description:
|
||||
"Enhance your writing with our advanced AI-powered assistant. It offers real-time suggestions for grammar, style, and tone, helps with research and fact-checking.",
|
||||
runs: 75000,
|
||||
rating: 4.7,
|
||||
onClick: () => console.log("LongDescription StoreCard clicked"),
|
||||
avatarSrc: "https://example.com/avatar5.jpg",
|
||||
},
|
||||
};
|
||||
|
||||
export const HiddenAvatar: Story = {
|
||||
args: {
|
||||
agentName: "Data Visualizer",
|
||||
agentImage:
|
||||
"https://framerusercontent.com/images/KCIpxr9f97EGJgpaoqnjKsrOPwI.jpg",
|
||||
description: "Create stunning visualizations from complex datasets",
|
||||
runs: 60000,
|
||||
rating: 4.6,
|
||||
onClick: () => console.log("HiddenAvatar StoreCard clicked"),
|
||||
avatarSrc: "https://example.com/avatar6.jpg",
|
||||
hideAvatar: true,
|
||||
},
|
||||
};
|
||||
@@ -1,199 +0,0 @@
|
||||
import type { Meta, StoryObj } from "@storybook/nextjs";
|
||||
import { Agent, AgentsSection } from "./AgentsSection";
|
||||
import { userEvent, within, expect } from "storybook/test";
|
||||
|
||||
const meta = {
|
||||
title: "Legacy/Composite/Agents Section",
|
||||
component: AgentsSection,
|
||||
parameters: {
|
||||
layout: {
|
||||
center: true,
|
||||
fullscreen: true,
|
||||
padding: 0,
|
||||
},
|
||||
},
|
||||
tags: ["autodocs"],
|
||||
argTypes: {
|
||||
sectionTitle: { control: "text" },
|
||||
agents: { control: "object" },
|
||||
// onCardClick: { action: "clicked" },
|
||||
},
|
||||
} satisfies Meta<typeof AgentsSection>;
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof meta>;
|
||||
|
||||
const mockTopAgents = [
|
||||
{
|
||||
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,
|
||||
creator_avatar: "https://example.com/avatar1.jpg",
|
||||
slug: "seo-optimizer-pro",
|
||||
creator: "John Doe",
|
||||
sub_heading: "SEO Expert",
|
||||
},
|
||||
{
|
||||
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,
|
||||
creator_avatar: "https://example.com/avatar2.jpg",
|
||||
slug: "content-writer-ai",
|
||||
creator: "Jane Doe",
|
||||
sub_heading: "Content Writer",
|
||||
},
|
||||
{
|
||||
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,
|
||||
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}`),
|
||||
},
|
||||
};
|
||||
|
||||
export const SingleAgent: Story = {
|
||||
args: {
|
||||
sectionTitle: "Top Agents",
|
||||
agents: [mockTopAgents[0]],
|
||||
// onCardClick: (agentName: string) => console.log(`Clicked on ${agentName}`),
|
||||
},
|
||||
};
|
||||
|
||||
export const NoAgents: Story = {
|
||||
args: {
|
||||
sectionTitle: "Top Agents",
|
||||
agents: [],
|
||||
// onCardClick: (agentName: string) => console.log(`Clicked on ${agentName}`),
|
||||
},
|
||||
};
|
||||
|
||||
export const WithInteraction: Story = {
|
||||
args: {
|
||||
sectionTitle: "Top Agents",
|
||||
agents: mockTopAgents,
|
||||
// onCardClick: (agentName: string) => console.log(`Clicked on ${agentName}`),
|
||||
},
|
||||
play: async ({ canvasElement }) => {
|
||||
const canvas = within(canvasElement);
|
||||
const firstCard = canvas.getAllByRole("store-card")[0];
|
||||
await userEvent.click(firstCard);
|
||||
await expect(firstCard).toHaveAttribute("aria-pressed", "true");
|
||||
},
|
||||
};
|
||||
|
||||
export const MultiRowAgents: Story = {
|
||||
args: {
|
||||
sectionTitle: "Top Agents",
|
||||
agents: [
|
||||
...mockTopAgents,
|
||||
{
|
||||
agent_name: "Image Recognition AI",
|
||||
agent_image:
|
||||
"https://upload.wikimedia.org/wikipedia/commons/c/c5/Big_buck_bunny_poster_big.jpg",
|
||||
description:
|
||||
"Accurately identify and classify objects in images using state-of-the-art machine learning algorithms.",
|
||||
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",
|
||||
agent_image:
|
||||
"https://framerusercontent.com/images/KCIpxr9f97EGJgpaoqnjKsrOPwI.jpg",
|
||||
description:
|
||||
"Analyze and understand human language with advanced NLP techniques.",
|
||||
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",
|
||||
agent_image:
|
||||
"https://upload.wikimedia.org/wikipedia/commons/c/c5/Big_buck_bunny_poster_big.jpg",
|
||||
description:
|
||||
"Determine the emotional tone of text data for customer feedback analysis.",
|
||||
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",
|
||||
agent_image:
|
||||
"https://framerusercontent.com/images/KCIpxr9f97EGJgpaoqnjKsrOPwI.jpg",
|
||||
description:
|
||||
"Create intelligent chatbots for customer service and engagement.",
|
||||
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",
|
||||
agent_image:
|
||||
"https://upload.wikimedia.org/wikipedia/commons/c/c5/Big_buck_bunny_poster_big.jpg",
|
||||
description:
|
||||
"Forecast future trends and outcomes based on historical data.",
|
||||
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",
|
||||
agent_image:
|
||||
"https://framerusercontent.com/images/KCIpxr9f97EGJgpaoqnjKsrOPwI.jpg",
|
||||
description:
|
||||
"Convert written text into natural-sounding speech in multiple languages.",
|
||||
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}`),
|
||||
},
|
||||
};
|
||||
|
||||
export const HiddenAvatars: Story = {
|
||||
args: {
|
||||
...Default.args,
|
||||
hideAvatars: true,
|
||||
sectionTitle: "Agents with Hidden Avatars",
|
||||
},
|
||||
};
|
||||
@@ -1,121 +0,0 @@
|
||||
import type { Meta, StoryObj } from "@storybook/nextjs";
|
||||
import { FeaturedCreators } from "./FeaturedCreators";
|
||||
import { userEvent, within, expect } from "storybook/test";
|
||||
|
||||
const meta = {
|
||||
title: "Legacy/Composite/Featured Creators",
|
||||
component: FeaturedCreators,
|
||||
parameters: {
|
||||
layout: {
|
||||
center: true,
|
||||
fullscreen: true,
|
||||
padding: 0,
|
||||
},
|
||||
},
|
||||
tags: ["autodocs"],
|
||||
argTypes: {
|
||||
featuredCreators: { control: "object" },
|
||||
// onCardClick: { action: "cardClicked" },
|
||||
},
|
||||
} satisfies Meta<typeof FeaturedCreators>;
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof meta>;
|
||||
|
||||
const defaultCreators = [
|
||||
{
|
||||
name: "AI Innovator",
|
||||
username: "ai_innovator",
|
||||
description:
|
||||
"Pushing the boundaries of AI technology with cutting-edge solutions and innovative approaches to machine learning.",
|
||||
avatar_url:
|
||||
"https://framerusercontent.com/images/KCIpxr9f97EGJgpaoqnjKsrOPwI.jpg",
|
||||
num_agents: 15,
|
||||
},
|
||||
{
|
||||
name: "Code Wizard",
|
||||
username: "code_wizard",
|
||||
description:
|
||||
"Crafting elegant solutions with AI and helping others learn the magic of coding.",
|
||||
avatar_url:
|
||||
"https://upload.wikimedia.org/wikipedia/commons/c/c5/Big_buck_bunny_poster_big.jpg",
|
||||
num_agents: 8,
|
||||
},
|
||||
{
|
||||
name: "Data Alchemist",
|
||||
username: "data_alchemist",
|
||||
description:
|
||||
"Transforming raw data into AI gold. Specializing in data processing and analytics.",
|
||||
avatar_url:
|
||||
"https://framerusercontent.com/images/KCIpxr9f97EGJgpaoqnjKsrOPwI.jpg",
|
||||
num_agents: 12,
|
||||
},
|
||||
{
|
||||
name: "ML Master",
|
||||
username: "ml_master",
|
||||
description:
|
||||
"Specializing in machine learning algorithms and neural network architectures.",
|
||||
avatar_url:
|
||||
"https://upload.wikimedia.org/wikipedia/commons/c/c5/Big_buck_bunny_poster_big.jpg",
|
||||
num_agents: 20,
|
||||
},
|
||||
];
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
featuredCreators: defaultCreators,
|
||||
// onCardClick: (creatorName) => console.log(`Clicked on ${creatorName}`),
|
||||
},
|
||||
};
|
||||
|
||||
export const SingleCreator: Story = {
|
||||
args: {
|
||||
featuredCreators: [defaultCreators[0]],
|
||||
// onCardClick: (creatorName) => console.log(`Clicked on ${creatorName}`),
|
||||
},
|
||||
};
|
||||
|
||||
export const ManyCreators: Story = {
|
||||
args: {
|
||||
featuredCreators: [
|
||||
...defaultCreators,
|
||||
{
|
||||
name: "NLP Ninja",
|
||||
username: "nlp_ninja",
|
||||
description:
|
||||
"Expert in natural language processing and text analysis systems.",
|
||||
avatar_url:
|
||||
"https://framerusercontent.com/images/KCIpxr9f97EGJgpaoqnjKsrOPwI.jpg",
|
||||
num_agents: 18,
|
||||
},
|
||||
{
|
||||
name: "AI Explorer",
|
||||
username: "ai_explorer",
|
||||
description:
|
||||
"Discovering new frontiers in artificial intelligence and autonomous systems.",
|
||||
avatar_url:
|
||||
"https://upload.wikimedia.org/wikipedia/commons/c/c5/Big_buck_bunny_poster_big.jpg",
|
||||
num_agents: 25,
|
||||
},
|
||||
],
|
||||
// onCardClick: (creatorName) => console.log(`Clicked on ${creatorName}`),
|
||||
},
|
||||
};
|
||||
|
||||
export const WithInteraction: Story = {
|
||||
args: {
|
||||
featuredCreators: defaultCreators,
|
||||
// onCardClick: (creatorName) => console.log(`Clicked on ${creatorName}`),
|
||||
},
|
||||
play: async ({ canvasElement }) => {
|
||||
const canvas = within(canvasElement);
|
||||
const creatorCards = canvas.getAllByRole("creator-card");
|
||||
const firstCreatorCard = creatorCards[0];
|
||||
|
||||
await userEvent.hover(firstCreatorCard);
|
||||
await userEvent.click(firstCreatorCard);
|
||||
|
||||
// Check if the card has the expected hover and click effects
|
||||
await expect(firstCreatorCard).toHaveClass("hover:shadow-lg");
|
||||
},
|
||||
};
|
||||
@@ -1,138 +0,0 @@
|
||||
import { StoreAgent } from "@/lib/autogpt-server-api";
|
||||
import type { Meta, StoryObj } from "@storybook/nextjs";
|
||||
import { userEvent, within } from "storybook/test";
|
||||
import { FeaturedSection } from "./FeaturedSection";
|
||||
|
||||
const meta = {
|
||||
title: "Legacy/Composite/Featured Agents",
|
||||
component: FeaturedSection,
|
||||
parameters: {
|
||||
layout: {
|
||||
center: true,
|
||||
fullscreen: true,
|
||||
padding: 0,
|
||||
},
|
||||
},
|
||||
tags: ["autodocs"],
|
||||
argTypes: {
|
||||
featuredAgents: { control: "object" },
|
||||
},
|
||||
} satisfies Meta<typeof FeaturedSection>;
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof meta>;
|
||||
|
||||
const mockFeaturedAgents = [
|
||||
{
|
||||
updated_at: "2024-01-10T15:30:00.000Z",
|
||||
agent_name: "Personalized Morning Coffee Newsletter example of three lines",
|
||||
sub_heading:
|
||||
"Transform ideas into breathtaking images with this AI-powered Image Generator.",
|
||||
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,
|
||||
agent_image:
|
||||
"https://framerusercontent.com/images/KCIpxr9f97EGJgpaoqnjKsrOPwI.jpg",
|
||||
creator_avatar:
|
||||
"https://framerusercontent.com/images/KCIpxr9f97EGJgpaoqnjKsrOPwI.jpg",
|
||||
slug: "personalized-morning-coffee-newsletter",
|
||||
},
|
||||
{
|
||||
updated_at: "2024-01-10T15:30:00.000Z",
|
||||
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,
|
||||
agent_image:
|
||||
"https://framerusercontent.com/images/KCIpxr9f97EGJgpaoqnjKsrOPwI.jpg",
|
||||
creator_avatar:
|
||||
"https://framerusercontent.com/images/KCIpxr9f97EGJgpaoqnjKsrOPwI.jpg",
|
||||
slug: "data-analyzer-lite",
|
||||
},
|
||||
{
|
||||
updated_at: "2024-01-10T15:30:00.000Z",
|
||||
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,
|
||||
agent_image:
|
||||
"https://framerusercontent.com/images/KCIpxr9f97EGJgpaoqnjKsrOPwI.jpg",
|
||||
creator_avatar:
|
||||
"https://framerusercontent.com/images/KCIpxr9f97EGJgpaoqnjKsrOPwI.jpg",
|
||||
slug: "codeassist-ai",
|
||||
},
|
||||
{
|
||||
updated_at: "2024-01-10T15:30:00.000Z",
|
||||
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,
|
||||
agent_image:
|
||||
"https://framerusercontent.com/images/KCIpxr9f97EGJgpaoqnjKsrOPwI.jpg",
|
||||
creator_avatar:
|
||||
"https://framerusercontent.com/images/KCIpxr9f97EGJgpaoqnjKsrOPwI.jpg",
|
||||
slug: "multitasker",
|
||||
},
|
||||
{
|
||||
updated_at: "2024-01-10T15:30:00.000Z",
|
||||
agent_name: "QuickTask",
|
||||
sub_heading: "Fast task automation",
|
||||
creator: "EfficientWorks",
|
||||
description: "Simple and efficient task automation tool.",
|
||||
runs: 50000,
|
||||
rating: 4.2,
|
||||
agent_image:
|
||||
"https://framerusercontent.com/images/KCIpxr9f97EGJgpaoqnjKsrOPwI.jpg",
|
||||
creator_avatar:
|
||||
"https://framerusercontent.com/images/KCIpxr9f97EGJgpaoqnjKsrOPwI.jpg",
|
||||
slug: "quicktask",
|
||||
},
|
||||
] satisfies StoreAgent[];
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
featuredAgents: mockFeaturedAgents,
|
||||
// onCardClick: (agentName: string) => console.log(`Clicked on ${agentName}`),
|
||||
},
|
||||
};
|
||||
|
||||
export const SingleAgent: Story = {
|
||||
args: {
|
||||
featuredAgents: [mockFeaturedAgents[0]],
|
||||
// onCardClick: (agentName: string) => console.log(`Clicked on ${agentName}`),
|
||||
},
|
||||
};
|
||||
|
||||
export const NoAgents: Story = {
|
||||
args: {
|
||||
featuredAgents: [],
|
||||
// onCardClick: (agentName: string) => console.log(`Clicked on ${agentName}`),
|
||||
},
|
||||
};
|
||||
|
||||
export const WithInteraction: Story = {
|
||||
args: {
|
||||
featuredAgents: mockFeaturedAgents,
|
||||
// onCardClick: (agentName: string) => console.log(`Clicked on ${agentName}`),
|
||||
},
|
||||
play: async ({ canvasElement }) => {
|
||||
const canvas = within(canvasElement);
|
||||
const featuredCard = canvas.getByText(
|
||||
"Personalized Morning Coffee Newsletter example of three lines",
|
||||
);
|
||||
|
||||
await userEvent.hover(featuredCard);
|
||||
await userEvent.click(featuredCard);
|
||||
},
|
||||
};
|
||||
@@ -1,70 +0,0 @@
|
||||
import type { Meta, StoryObj } from "@storybook/nextjs";
|
||||
import { HeroSection } from "./HeroSection";
|
||||
import { userEvent, within, expect } from "storybook/test";
|
||||
|
||||
const meta = {
|
||||
title: "Legacy/Composite/Hero Section",
|
||||
component: HeroSection,
|
||||
parameters: {
|
||||
layout: {
|
||||
center: true,
|
||||
fullscreen: true,
|
||||
padding: 0,
|
||||
},
|
||||
},
|
||||
tags: ["autodocs"],
|
||||
argTypes: {
|
||||
onSearch: { action: "searched" },
|
||||
onFilterChange: { action: "filtersChanged" },
|
||||
},
|
||||
} satisfies Meta<typeof HeroSection>;
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof meta>;
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
onSearch: (query: string) => console.log(`Searched: ${query}`),
|
||||
onFilterChange: (selectedFilters: string[]) =>
|
||||
console.log(`Filters changed: ${selectedFilters.join(", ")}`),
|
||||
},
|
||||
};
|
||||
|
||||
export const WithInteraction: Story = {
|
||||
args: {
|
||||
onSearch: (query: string) => console.log(`Searched: ${query}`),
|
||||
onFilterChange: (selectedFilters: string[]) =>
|
||||
console.log(`Filters changed: ${selectedFilters.join(", ")}`),
|
||||
},
|
||||
play: async ({ canvasElement }) => {
|
||||
const canvas = within(canvasElement);
|
||||
const searchInput = canvas.getByRole("store-search-input");
|
||||
|
||||
await userEvent.type(searchInput, "test query");
|
||||
await userEvent.keyboard("{Enter}");
|
||||
|
||||
await expect(searchInput).toHaveValue("test query");
|
||||
|
||||
const filterChip = canvas.getByText("Marketing");
|
||||
await userEvent.click(filterChip);
|
||||
|
||||
await expect(filterChip).toHaveClass("text-[#474747]");
|
||||
},
|
||||
};
|
||||
|
||||
export const EmptySearch: Story = {
|
||||
args: {
|
||||
onSearch: (query: string) => console.log(`Searched: ${query}`),
|
||||
onFilterChange: (selectedFilters: string[]) =>
|
||||
console.log(`Filters changed: ${selectedFilters.join(", ")}`),
|
||||
},
|
||||
play: async ({ canvasElement }) => {
|
||||
const canvas = within(canvasElement);
|
||||
const searchInput = canvas.getByRole("store-search-input");
|
||||
|
||||
await userEvent.click(searchInput);
|
||||
await userEvent.keyboard("{Enter}");
|
||||
|
||||
await expect(searchInput).toHaveValue("");
|
||||
},
|
||||
};
|
||||
@@ -1,52 +0,0 @@
|
||||
import type { Meta, StoryObj } from "@storybook/nextjs";
|
||||
import { PublishAgentPopout } from "@/components/agptui/composite/PublishAgentPopout";
|
||||
import { userEvent, within } from "storybook/test";
|
||||
|
||||
const meta = {
|
||||
title: "Legacy/Composite/Publish Agent Popout",
|
||||
component: PublishAgentPopout,
|
||||
parameters: {
|
||||
layout: "centered",
|
||||
},
|
||||
tags: ["autodocs"],
|
||||
argTypes: {
|
||||
trigger: { control: "object" },
|
||||
},
|
||||
} satisfies Meta<typeof PublishAgentPopout>;
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof meta>;
|
||||
|
||||
export const Default: Story = {
|
||||
args: {},
|
||||
};
|
||||
|
||||
export const WithCustomTrigger: Story = {
|
||||
args: {
|
||||
trigger: <button>Custom Publish Button</button>,
|
||||
},
|
||||
};
|
||||
|
||||
export const PublishFlow: Story = {
|
||||
args: {},
|
||||
play: async ({ canvasElement }) => {
|
||||
const canvas = within(canvasElement);
|
||||
|
||||
// Open popout
|
||||
const publishButton = canvas.getByText("Publish Agent");
|
||||
await userEvent.click(publishButton);
|
||||
|
||||
// Select an agent (assuming one exists)
|
||||
const agentCard = await canvas.findByRole("button", {
|
||||
name: /select agent/i,
|
||||
});
|
||||
await userEvent.click(agentCard);
|
||||
|
||||
// Click next
|
||||
const nextButton = canvas.getByText("Next");
|
||||
await userEvent.click(nextButton);
|
||||
|
||||
// Fill out info form
|
||||
// Note: Actual form interactions would need to be added based on PublishAgentInfo implementation
|
||||
},
|
||||
};
|
||||
Reference in New Issue
Block a user