You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
39 lines
860 B
TypeScript
39 lines
860 B
TypeScript
import React from "react";
|
|
import type { Meta, StoryObj } from "@storybook/react";
|
|
import { Box } from "./Box";
|
|
import { Input } from "../Input";
|
|
import { Button } from "../Button";
|
|
import { Divider } from "../Divider";
|
|
import { cx } from "../../utils";
|
|
|
|
const meta: Meta<typeof Box> = {
|
|
title: "UI/Box",
|
|
component: Box,
|
|
};
|
|
|
|
export default meta;
|
|
type Story = StoryObj<typeof Box>;
|
|
|
|
export const Default: Story = {
|
|
render: () => <Box>Hello world</Box>,
|
|
};
|
|
|
|
export const AsForm: Story = {
|
|
render: () => (
|
|
<Box asChild className={cx(["w-56"])}>
|
|
<form
|
|
onSubmit={(event) => {
|
|
event.preventDefault();
|
|
console.log("event", event);
|
|
}}
|
|
>
|
|
<Input label="Username" />
|
|
<Divider />
|
|
<Button type="submit" intent="primary">
|
|
Submit
|
|
</Button>
|
|
</form>
|
|
</Box>
|
|
),
|
|
};
|