feat: extract NewPostModal to own component and add story

src/features/posts/components/NewPostModal/NewPostModal.stories.tsx

@@ -0,0 +1,36 @@
+import { useDisclosure } from '@chakra-ui/react'
+
+import { NewPostModal } from './NewPostModal'
+import { type Meta, type StoryObj } from '@storybook/react'
+import { meHandlers } from 'tests/msw/handlers/me'
+
+const meta: Meta<typeof NewPostModal> = {
+ title: 'Features/Posts/NewPostModal',
+ component: NewPostModal,
+ parameters: {
+ layout: 'fullscreen',
+ // Prevent flaky tests due to modal animating in.
+ chromatic: { pauseAnimationAtEnd: true },
+ msw: {
+ handlers: [meHandlers.me()],
+ },
+ },
+}
+
+export default meta
+type Story = StoryObj<typeof NewPostModal>
+
+export const Default: Story = {
+ render: (args) => {
+ // eslint-disable-next-line react-hooks/rules-of-hooks
+ const modalProps = useDisclosure({ defaultIsOpen: true })
+
+ return (
+ <NewPostModal
+ {...args}
+ {...modalProps}
+ onClose={() => console.log('close modal')}
+ />
+ )
+ },
+}

src/features/posts/components/NewPostModalButton.tsx → src/features/posts/components/NewPostModal/NewPostModal.tsx

@@ -7,19 +7,20 @@ import {
  ModalHeader,
  ModalOverlay,
  type ModalProps,
- useDisclosure,
 } from '@chakra-ui/react'
 import { Button, useToast } from '@opengovsg/design-system-react'
 import { ComposePost } from '~/features/posts/components'
 import { useZodForm } from '~/lib/form'
 import { trpc } from '~/utils/trpc'
-import { useUploadImagesMutation } from '../api'
-import { clientAddPostSchema } from '../schemas/clientAddPostSchema'
+import { useUploadImagesMutation } from '../../api'
+import { clientAddPostSchema } from '../../schemas/clientAddPostSchema'
 
-const NewPostModal = ({
+export type NewPostModalProps = Pick<ModalProps, 'isOpen' | 'onClose'>
+
+export const NewPostModal = ({
  onClose: onCloseProp,
  isOpen,
-}: Pick<ModalProps, 'isOpen' | 'onClose'>) => {
+}: NewPostModalProps) => {
  const toast = useToast({
  status: 'success',
  })
@@ -84,15 +85,3 @@ const NewPostModal = ({
  </Modal>
  )
 }
-
-export const NewPostModalButton = (): JSX.Element => {
- const { isOpen, onOpen, onClose } = useDisclosure()
- return (
- <>
- <Button size="xs" onClick={onOpen}>
- New post
- </Button>
- <NewPostModal isOpen={isOpen} onClose={onClose} />
- </>
- )
-}

src/features/posts/components/NewPostModal/NewPostModalButton.tsx

@@ -0,0 +1,15 @@
+import { useDisclosure } from '@chakra-ui/react'
+import { Button } from '@opengovsg/design-system-react'
+import { NewPostModal } from './NewPostModal'
+
+export const NewPostModalButton = (): JSX.Element => {
+ const { isOpen, onOpen, onClose } = useDisclosure()
+ return (
+ <>
+ <Button size="xs" onClick={onOpen}>
+ New post
+ </Button>
+ <NewPostModal isOpen={isOpen} onClose={onClose} />
+ </>
+ )
+}

src/features/posts/components/NewPostModal/index.ts

@@ -0,0 +1 @@
+export * from './NewPostModalButton'

src/features/posts/components/index.ts

@@ -1,4 +1,4 @@
 export * from './Post'
-export * from './NewPostModalButton'
+export * from './NewPostModal'
 export * from './ComposePost'
 export * from './PostActions'