How do I set isOpen false in the following Storybook story?

Question

I'm developing the following Modal in a Storybook story:

import React from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import { Modal } from '@repo/ui/Modal';
import Title from '@repo/ui/Title';
import Field from '@repo/ui/Field';
import { DialogHeader } from '@repo/ui/radix/dialog';

type ItemModalProps = {
  avatarUrl: string;
  maxWidth?: 'sm' | 'md' | 'lg';
  isOpen: boolean;
  hasFullImage?: boolean;
  onCloseModal?: () => void;
};

const ItemModal: React.FC<ItemModalProps> = ({
  avatarUrl,
  maxWidth = 'sm',
  isOpen,
  hasFullImage,
  onCloseModal = () => {},
}) => (
  <Modal
    isOpen={isOpen}
    onCloseModal={onCloseModal}
    hasFullImage={hasFullImage}
    maxWidth={maxWidth}
  >
    <DialogHeader className="relative h-60">
      <img src={avatarUrl} className="absolute h-full w-full object-cover" />
    </DialogHeader>
    <div className="flex flex-col items-center space-y-4 p-6">
      <Title>Test</Title>
      <div className="grid grid-cols-2 gap-x-10 gap-y-2">
        <Field label="Name" text="Name" />
      </div>
    </div>
  </Modal>
);

const meta: Meta<typeof ItemModal> = {
  title: 'Example/Modal',
  component: ItemModal,
};

export default meta;

type Story = StoryObj<typeof ItemModal>;

export const DefaultModal: Story = {
  args: {
    avatarUrl: 'https://placehold.co/100',
    isOpen: true,
    hasFullImage: true,
    onCloseModal: () => {},
  },
};

How to change the code so that onCloseModal makes isOpen to become false?

Answer 1

you can use render function in your story to close the modal. like this:

export const DefaultModal: Story = {
  args: {
    avatarUrl: 'https://placehold.co/100',
    isOpen: true,
    hasFullImage: true,
  },
  render: (args) => {
      const [{ value }, updateArgs] = useArgs();
      const onCloseModal = () => {
           updateArgs({isOpen: false});
      }
      return <ItemModals {...args} />
  }
};