procyon/stories/components/Modals.stories.tsx

import React from 'react';
import { action } from '@storybook/addon-actions';
import { Meta, StoryObj } from '@storybook/react';

import { Button } from '@procyon/components/Button';
import { Modals } from '@procyon/components/Modal';
import { AddModalButton } from '@procyon/components/Modal/components/AddModalButton';
import { ModalWrapper, openModal as openOutsideReactModal } from '@procyon/components/Modal/context';
import { useModal } from '@procyon/components/Modal/hooks';
import { TextField } from '@procyon/components/TextField';

type Story = StoryObj<typeof Modals>;

export default {
	component: Modals,
	decorators: [
		(Story) => (
			<div className="h-80">
				<ModalWrapper>
					<Story />
					<Modals />
				</ModalWrapper>
			</div>
		),
	],
} as Meta;

export const Default: Story = {
	name: 'Default',
	render: () => {
		return (
			<AddModalButton
				id="default"
				title="Open modal"
				modalTitle="Default modal"
				Component={() => <div>Hi there</div>}
			/>
		);
	},
};

export const Hook: Story = {
	name: 'Hook',
	render: () => {
		const Comp = () => {
			const [openModal] = useModal('modal2', {
				Component: () => <div>Hi there</div>,
				title: 'Modal Title',
			});
			return <Button label="Open Modal" onClick={openModal} />;
		};
		return <Comp />;
	},
};

export const OutsideReact: Story = {
	name: 'Function',
	render: () => {
		return (
			<Button
				label="Open Modal"
				onClick={() =>
					openOutsideReactModal({
						Component: () => <div>Hi there</div>,
						id: 'modal3',
					})
				}
			/>
		);
	},
};

export const Small: Story = {
	name: 'Small',
	render: () => {
		return (
			<AddModalButton
				id="small"
				title="Open modal"
				modalTitle="Small modal"
				Component={() => (
					<div>
						<TextField name="search" label="Search" />
					</div>
				)}
				style={{
					width: 250,
				}}
			/>
		);
	},
};

export const Multiple: Story = {
	name: 'Multiple',
	render: () => {
		return (
			<AddModalButton
				id="multiple"
				title="Open modal"
				modalTitle="First modal"
				Component={() => (
					<div>
						Hello
						<AddModalButton
							Component={() => <div>Hi there, again</div>}
							title="Open next modal"
							modalTitle="Second modal"
							id="secondModal"
						/>
					</div>
				)}
			/>
		);
	},
};

export const WithCloseCallback: Story = {
	render: () => {
		return (
			<AddModalButton
				id="withCloseCallback"
				title="Open modal"
				modalTitle="Modal"
				Component={() => <div>Hello</div>}
				props={{
					onClose: () => action('Close callback called.'),
				}}
			/>
		);
	},
};