Story Templates

import { Box } from '@chakra-ui/react';
import type { Meta, StoryObj } from '@storybook/react-vite';

import { MyComponent } from './MyComponent';

const meta = {
  title: 'Components/UI/MyComponent',
  component: MyComponent,
  parameters: {
    layout: 'centered',
    backgrounds: { default: 'dark' },
  },
  decorators: [
    (Story) => (
      <Box padding="40px">
        <Story />
      </Box>
    ),
  ],
} satisfies Meta<typeof MyComponent>;

export default meta;
type Story = StoryObj<typeof meta>;

export const Default: Story = {
  args: {},
};

import { Box } from '@chakra-ui/react';
import type { Meta, StoryObj } from '@storybook/react-vite';

import { Form } from '~/lib/form/components/form';
import { useTesslForm } from '~/lib/form/use-tessl-form';

import { MyField } from './MyField';

function MyFieldStory(props: React.ComponentProps<typeof MyField>) {
  const form = useTesslForm({
    defaultValues: { example: '' },
    onSubmit: async () => {},
  });

  return (
    <Form form={form}>
      <form.AppField name="example">
        {(field) => <field.MyField {...props} />}
      </form.AppField>
    </Form>
  );
}

const meta = {
  title: 'Components/Form/MyField',
  component: MyFieldStory,
  parameters: {
    layout: 'centered',
    backgrounds: { default: 'dark' },
  },
  decorators: [
    (Story) => (
      <Box padding="40px" width="400px">
        <Story />
      </Box>
    ),
  ],
} satisfies Meta<typeof MyFieldStory>;

export default meta;
type Story = StoryObj<typeof meta>;

export const Default: Story = {
  args: { label: 'My Field' },
};

export const Required: Story = {
  args: { label: 'My Field', required: true },
};

export const WithHelper: Story = {
  args: { label: 'My Field', helper: 'Some helpful text' },
};

export const Disabled: Story = {
  args: { label: 'My Field', disabled: true },
};