66 lines
1.6 KiB
TypeScript
66 lines
1.6 KiB
TypeScript
import type { Meta, StoryObj } from '@storybook/react';
|
|
import { useForm } from 'react-hook-form';
|
|
import { ProfileSocialLinks } from './ProfileSocialLinks';
|
|
import type { ProfileFormData } from './types';
|
|
|
|
const meta: Meta<typeof ProfileSocialLinks> = {
|
|
title: 'Components/Features/User/ProfileSocialLinks',
|
|
component: ProfileSocialLinks,
|
|
tags: ['autodocs'],
|
|
parameters: { layout: 'centered' },
|
|
};
|
|
|
|
export default meta;
|
|
type Story = StoryObj<typeof ProfileSocialLinks>;
|
|
|
|
function SocialWrapper(props: { isEditing: boolean; watchedLinks?: ProfileFormData['social_links'] }) {
|
|
const form = useForm<ProfileFormData>({
|
|
defaultValues: {
|
|
social_links: {
|
|
twitter: '',
|
|
instagram: '',
|
|
facebook: '',
|
|
youtube: '',
|
|
website: '',
|
|
},
|
|
},
|
|
});
|
|
const watched = props.watchedLinks ?? form.watch('social_links');
|
|
return (
|
|
<div className="w-96 max-w-full">
|
|
<ProfileSocialLinks
|
|
register={form.register}
|
|
errors={form.formState.errors}
|
|
isEditing={props.isEditing}
|
|
watchedLinks={watched}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export const Default: Story = {
|
|
render: () => <SocialWrapper isEditing={false} />,
|
|
};
|
|
|
|
export const Editing: Story = {
|
|
render: () => <SocialWrapper isEditing={true} />,
|
|
};
|
|
|
|
export const WithLinks: Story = {
|
|
render: () => (
|
|
<SocialWrapper
|
|
isEditing={false}
|
|
watchedLinks={{
|
|
twitter: 'https://twitter.com/veza',
|
|
instagram: 'https://instagram.com/veza',
|
|
website: 'https://veza.example.com',
|
|
}}
|
|
/>
|
|
),
|
|
};
|
|
|
|
export const Empty: Story = {
|
|
render: () => (
|
|
<SocialWrapper isEditing={false} watchedLinks={{}} />
|
|
),
|
|
};
|