Skip to content

Commit 2b05465

Browse files
ScriptSmithScriptSmith
committed
Add missing stories
1 parent 5746479 commit 2b05465

6 files changed

Lines changed: 388 additions & 0 deletions

File tree

‎ui/src/components/Admin/ApiKeyFormModal/sovereigntyFields.stories.tsx‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import type { Meta, StoryObj } from "@storybook/react";
2+
import { useForm } from "react-hook-form";
3+
import { zodResolver } from "@hookform/resolvers/zod";
4+
import { z } from "zod";
5+
6+
import { SovereigntyFormFields, sovereigntySchema, sovereigntyDefaults } from "./sovereigntyFields";
7+
8+
const schema = z.object(sovereigntySchema);
9+
type FormValues = z.infer<typeof schema>;
10+
11+
function SovereigntyFieldsDemo({ idPrefix = "apikey" }: { idPrefix?: string }) {
12+
const { register } = useForm<FormValues>({
13+
resolver: zodResolver(schema),
14+
defaultValues: sovereigntyDefaults,
15+
});
16+
17+
return (
18+
<form className="max-w-2xl">
19+
<SovereigntyFormFields register={register} idPrefix={idPrefix} />
20+
</form>
21+
);
22+
}
23+
24+
const meta: Meta<typeof SovereigntyFormFields> = {
25+
title: "Admin/SovereigntyFormFields",
26+
component: SovereigntyFormFields,
27+
parameters: {
28+
layout: "padded",
29+
},
30+
};
31+
32+
export default meta;
33+
type Story = StoryObj<typeof meta>;
34+
35+
export const Default: Story = {
36+
render: () => <SovereigntyFieldsDemo />,
37+
};
38+
39+
export const CustomIdPrefix: Story = {
40+
render: () => <SovereigntyFieldsDemo idPrefix="self-apikey" />,
41+
};

‎ui/src/components/Admin/PromptFormModal/PromptFormModal.stories.tsx‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
import type { Meta, StoryObj } from "@storybook/react";
2+
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
3+
4+
import { AdminPromptFormModal } from "./PromptFormModal";
5+
6+
const queryClient = new QueryClient({
7+
defaultOptions: {
8+
queries: { retry: false, staleTime: Infinity },
9+
},
10+
});
11+
12+
const meta: Meta<typeof AdminPromptFormModal> = {
13+
title: "Admin/PromptFormModal",
14+
component: AdminPromptFormModal,
15+
parameters: {
16+
layout: "centered",
17+
},
18+
decorators: [
19+
(Story) => (
20+
<QueryClientProvider client={queryClient}>
21+
<Story />
22+
</QueryClientProvider>
23+
),
24+
],
25+
};
26+
27+
export default meta;
28+
type Story = StoryObj<typeof AdminPromptFormModal>;
29+
30+
export const CreateMode: Story = {
31+
args: {
32+
open: true,
33+
onClose: () => console.log("Close"),
34+
ownerOverride: { type: "organization", id: "org_1" },
35+
},
36+
};
37+
38+
export const EditMode: Story = {
39+
args: {
40+
open: true,
41+
onClose: () => console.log("Close"),
42+
ownerOverride: { type: "organization", id: "org_1" },
43+
editingPrompt: {
44+
id: "tpl_1",
45+
name: "Code Review Assistant",
46+
description: "Reviews code for best practices",
47+
content:
48+
"You are a code review assistant. Review the following {{language}} code:\n\n{{code}}",
49+
owner: { type: "organization", id: "org_1" },
50+
metadata: {
51+
variables: [
52+
{
53+
name: "language",
54+
label: "Language",
55+
type: "select",
56+
options: ["Python", "TypeScript", "Go"],
57+
},
58+
{ name: "code", label: "Code", type: "textarea", required: true },
59+
],
60+
},
61+
created_at: "2024-01-01T00:00:00Z",
62+
updated_at: "2024-01-01T00:00:00Z",
63+
},
64+
},
65+
};

‎ui/src/components/PageGuard/PageGuard.stories.tsx‎

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
import type { Meta, StoryObj } from "@storybook/react";
2+
import { http, HttpResponse } from "msw";
3+
import { MemoryRouter } from "react-router-dom";
4+
5+
import { ConfigProvider } from "@/config/ConfigProvider";
6+
import { defaultConfig } from "@/config/defaults";
7+
import type { UiConfig } from "@/config/types";
8+
import { PageGuard } from "./PageGuard";
9+
10+
const enabledConfig: UiConfig = {
11+
...defaultConfig,
12+
pages: {
13+
...defaultConfig.pages,
14+
providers: { status: "enabled" },
15+
},
16+
};
17+
18+
const noticeConfig: UiConfig = {
19+
...defaultConfig,
20+
pages: {
21+
...defaultConfig.pages,
22+
providers: {
23+
status: "notice",
24+
notice_message: "Provider management is temporarily disabled for maintenance.",
25+
},
26+
},
27+
};
28+
29+
const disabledConfig: UiConfig = {
30+
...defaultConfig,
31+
pages: {
32+
...defaultConfig.pages,
33+
providers: { status: "disabled" },
34+
},
35+
};
36+
37+
function createHandlers(config: UiConfig) {
38+
return [http.get("*/admin/v1/ui/config", () => HttpResponse.json(config))];
39+
}
40+
41+
const meta: Meta<typeof PageGuard> = {
42+
title: "Components/PageGuard",
43+
component: PageGuard,
44+
decorators: [
45+
(Story) => (
46+
<MemoryRouter>
47+
<ConfigProvider>
48+
<Story />
49+
</ConfigProvider>
50+
</MemoryRouter>
51+
),
52+
],
53+
parameters: {
54+
layout: "centered",
55+
msw: { handlers: createHandlers(enabledConfig) },
56+
},
57+
};
58+
59+
export default meta;
60+
type Story = StoryObj<typeof PageGuard>;
61+
62+
export const Enabled: Story = {
63+
args: {
64+
pageKey: "providers",
65+
pageTitle: "Providers",
66+
children: <div className="p-8 text-center">Page content is visible</div>,
67+
},
68+
parameters: {
69+
msw: { handlers: createHandlers(enabledConfig) },
70+
},
71+
};
72+
73+
export const Notice: Story = {
74+
args: {
75+
pageKey: "providers",
76+
pageTitle: "Providers",
77+
children: <div className="p-8 text-center">This should not be visible</div>,
78+
},
79+
parameters: {
80+
msw: { handlers: createHandlers(noticeConfig) },
81+
},
82+
};
83+
84+
export const Disabled: Story = {
85+
args: {
86+
pageKey: "providers",
87+
pageTitle: "Providers",
88+
children: <div className="p-8 text-center">This should not be visible</div>,
89+
},
90+
parameters: {
91+
msw: { handlers: createHandlers(disabledConfig) },
92+
},
93+
};

‎ui/src/components/PageNotice/PageNotice.stories.tsx‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import type { Meta, StoryObj } from "@storybook/react";
2+
3+
import { PageNotice } from "./PageNotice";
4+
5+
const meta: Meta<typeof PageNotice> = {
6+
title: "Components/PageNotice",
7+
component: PageNotice,
8+
parameters: {
9+
layout: "centered",
10+
},
11+
};
12+
13+
export default meta;
14+
type Story = StoryObj<typeof PageNotice>;
15+
16+
export const Default: Story = {
17+
args: {
18+
title: "Knowledge Bases",
19+
message: "This page is currently unavailable.",
20+
},
21+
};
22+
23+
export const CustomMessage: Story = {
24+
args: {
25+
title: "API Keys",
26+
message:
27+
"API key management has been disabled by your administrator. Contact support for assistance.",
28+
},
29+
};

‎ui/src/components/TemplateVariableEditor/TemplateVariableEditor.stories.tsx‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
import type { Meta, StoryObj } from "@storybook/react";
2+
import { useState } from "react";
3+
4+
import type { TemplateVariable } from "@/lib/templateVariables";
5+
import { TemplateVariableEditor } from "./TemplateVariableEditor";
6+
7+
function TemplateVariableEditorDemo({ initial = [] }: { initial?: TemplateVariable[] }) {
8+
const [variables, setVariables] = useState<TemplateVariable[]>(initial);
9+
return <TemplateVariableEditor variables={variables} onChange={setVariables} />;
10+
}
11+
12+
const meta: Meta<typeof TemplateVariableEditor> = {
13+
title: "Components/TemplateVariableEditor",
14+
component: TemplateVariableEditor,
15+
parameters: {
16+
layout: "padded",
17+
},
18+
};
19+
20+
export default meta;
21+
type Story = StoryObj<typeof meta>;
22+
23+
export const Empty: Story = {
24+
render: () => <TemplateVariableEditorDemo />,
25+
};
26+
27+
export const WithVariables: Story = {
28+
render: () => (
29+
<TemplateVariableEditorDemo
30+
initial={[
31+
{
32+
name: "language",
33+
label: "Language",
34+
type: "select",
35+
options: ["Python", "TypeScript", "Go"],
36+
required: true,
37+
},
38+
{
39+
name: "context",
40+
label: "Additional Context",
41+
type: "textarea",
42+
placeholder: "Describe your use case...",
43+
},
44+
]}
45+
/>
46+
),
47+
};
48+
49+
export const SingleTextVariable: Story = {
50+
render: () => (
51+
<TemplateVariableEditorDemo
52+
initial={[
53+
{
54+
name: "name",
55+
label: "Project Name",
56+
type: "text",
57+
required: true,
58+
placeholder: "my-project",
59+
},
60+
]}
61+
/>
62+
),
63+
};

‎ui/src/components/TemplateVariableForm/TemplateVariableForm.stories.tsx‎

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
import type { Meta, StoryObj } from "@storybook/react";
2+
import { useState } from "react";
3+
4+
import type { TemplateVariable } from "@/lib/templateVariables";
5+
import { TemplateVariableForm } from "./TemplateVariableForm";
6+
7+
function TemplateVariableFormDemo({
8+
variables,
9+
errors,
10+
}: {
11+
variables: TemplateVariable[];
12+
errors?: Record<string, string>;
13+
}) {
14+
const [values, setValues] = useState<Record<string, string>>({});
15+
return (
16+
<TemplateVariableForm
17+
variables={variables}
18+
values={values}
19+
onChange={setValues}
20+
errors={errors}
21+
/>
22+
);
23+
}
24+
25+
const meta: Meta<typeof TemplateVariableForm> = {
26+
title: "Components/TemplateVariableForm",
27+
component: TemplateVariableForm,
28+
parameters: {
29+
layout: "padded",
30+
},
31+
};
32+
33+
export default meta;
34+
type Story = StoryObj<typeof meta>;
35+
36+
export const TextInputs: Story = {
37+
render: () => (
38+
<TemplateVariableFormDemo
39+
variables={[
40+
{
41+
name: "name",
42+
label: "Project Name",
43+
type: "text",
44+
required: true,
45+
placeholder: "my-project",
46+
},
47+
{
48+
name: "description",
49+
label: "Description",
50+
type: "text",
51+
placeholder: "A brief description",
52+
},
53+
]}
54+
/>
55+
),
56+
};
57+
58+
export const MixedTypes: Story = {
59+
render: () => (
60+
<TemplateVariableFormDemo
61+
variables={[
62+
{
63+
name: "language",
64+
label: "Language",
65+
type: "select",
66+
options: ["Python", "TypeScript", "Go", "Rust"],
67+
required: true,
68+
},
69+
{
70+
name: "context",
71+
label: "Additional Context",
72+
type: "textarea",
73+
placeholder: "Describe your use case...",
74+
},
75+
{ name: "author", label: "Author", type: "text", default: "Anonymous" },
76+
]}
77+
/>
78+
),
79+
};
80+
81+
export const WithErrors: Story = {
82+
render: () => (
83+
<TemplateVariableFormDemo
84+
variables={[
85+
{ name: "name", label: "Project Name", type: "text", required: true },
86+
{
87+
name: "language",
88+
label: "Language",
89+
type: "select",
90+
options: ["Python", "TypeScript"],
91+
required: true,
92+
},
93+
]}
94+
errors={{ name: "Project Name is required", language: "Language is required" }}
95+
/>
96+
),
97+
};

0 commit comments

Comments
 (0)