codex-marketplace-ui-compon.../stories/Dropdown.stories.tsx

60 lines
1.4 KiB
TypeScript
Raw Normal View History

2024-08-20 13:57:58 +00:00
import type { Meta, StoryObj } from "@storybook/react";
import { Dropdown, DropdownOption } from "../src/components/Dropdown/Dropdown";
import { PdfIcon } from "../src/components/WebFileIcon/PdfIcon";
import { ImageIcon } from "../src/components/WebFileIcon/ImageIcon";
import { ChangeEvent, useState } from "react";
2024-08-20 13:57:58 +00:00
const meta = {
title: "Forms/Dropdown",
component: Dropdown,
parameters: {
layout: "centered",
},
tags: ["autodocs"],
argTypes: {},
} satisfies Meta<typeof Dropdown>;
export default meta;
type Story = StoryObj<typeof meta>;
const Template = () => {
const [value, setValue] = useState<string>("");
const onChange = (e: ChangeEvent<HTMLInputElement>) =>
setValue(e.currentTarget.value);
const onSelected = (o: DropdownOption) => setValue(o.title);
return (
<Dropdown
placeholder="Select your file"
onChange={onChange}
onSelected={onSelected}
value={value}
options={[
{
title: "File1.pdf",
Icon: PdfIcon,
subtitle: "cid1",
},
{
title: "File2.jpg",
Icon: ImageIcon,
subtitle: "cid2",
},
]}
/>
);
};
export const Default = Template.bind({});
2024-08-20 13:57:58 +00:00
export const CustomStyle: Story = {
args: {
placeholder: "Select your file",
options: [],
style: { "--codex-input-border": "1px solid red" },
value: "",
onChange: () => "",
},
};