06db6ca62d
### What? Updated the example `with-storybook`, by upgrading storybook to version 8.0.9 (the latest) which required bumping the version of next.js to 14 from 13 in order to make them work together. ### Why? The motivation for this change is that we now have better the lastest features of storybook such as chromatic and visual testing. As of previous updates, it is still treated as its own framework and so users can specify the `storybook` framework as well as custom build command `build-storybook` in order to get near zero-config support. --------- Co-authored-by: Sam Ko <sam@vercel.com>
54 lines
1.4 KiB
TypeScript
54 lines
1.4 KiB
TypeScript
import type { Meta, StoryObj } from "@storybook/react";
|
|
import { fn } from "@storybook/test";
|
|
import { Button } from "./Button";
|
|
|
|
// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
|
|
const meta = {
|
|
title: "Example/Button",
|
|
component: Button,
|
|
parameters: {
|
|
// Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
|
|
layout: "centered",
|
|
},
|
|
// This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
|
|
tags: ["autodocs"],
|
|
// More on argTypes: https://storybook.js.org/docs/api/argtypes
|
|
argTypes: {
|
|
backgroundColor: {
|
|
control: "color",
|
|
},
|
|
},
|
|
// Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
|
|
args: { onClick: fn() },
|
|
} satisfies Meta<typeof Button>;
|
|
|
|
export default meta;
|
|
type Story = StoryObj<typeof meta>;
|
|
|
|
// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
|
|
export const Primary: Story = {
|
|
args: {
|
|
primary: true,
|
|
label: "Button",
|
|
},
|
|
};
|
|
|
|
export const Secondary: Story = {
|
|
args: {
|
|
label: "Button",
|
|
},
|
|
};
|
|
|
|
export const Large: Story = {
|
|
args: {
|
|
size: "large",
|
|
label: "Button",
|
|
},
|
|
};
|
|
|
|
export const Small: Story = {
|
|
args: {
|
|
size: "small",
|
|
label: "Button",
|
|
},
|
|
};
|