From 1a295c3b7a87697d70c2515e8c643e2b070e0c25 Mon Sep 17 00:00:00 2001
From: Jordan Phillips <jordypee27@gmail.com>
Date: Mon, 15 Apr 2024 20:42:44 +1000
Subject: [PATCH 1/2] fix(dialog): Dialog.Content children type unassignable

---
 packages/react/src/components/dialog/Dialog.tsx | 17 +++++++++--------
 .../src/components/dialog/DialogContent.tsx     | 10 +++++-----
 2 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/packages/react/src/components/dialog/Dialog.tsx b/packages/react/src/components/dialog/Dialog.tsx
index c2ac0b0..f5805d9 100644
--- a/packages/react/src/components/dialog/Dialog.tsx
+++ b/packages/react/src/components/dialog/Dialog.tsx
@@ -1,21 +1,21 @@
 import type { UseDialogProps } from '@/components/dialog/use-dialog.hook'
 import type { ComponentWithoutAs } from '@/utilities/types'
-import type { DialogTriggerProps as ComponentProps } from 'react-aria-components'
+import type { DialogTriggerProps } from 'react-aria-components'
 
 import React from 'react'
-import { DialogTrigger as Component } from 'react-aria-components'
+import { DialogTrigger } from 'react-aria-components'
 
 import DialogContent from '@/components/dialog/DialogContent'
 import { DialogContext, useDialog } from '@/components/dialog/use-dialog.hook'
 
-export type DialogProps = ComponentWithoutAs<'div'> & ComponentProps & UseDialogProps
+type ComponentProps = ComponentWithoutAs<'div'> & Omit<DialogTriggerProps, 'children'> & UseDialogProps
 
-const Dialog = React.forwardRef<HTMLDivElement, DialogProps>((props, ref) => {
+const Component = React.forwardRef<HTMLDivElement, ComponentProps>((props, ref) => {
   const { children, className, blur, placement, ...rest } = props
 
   const context = useDialog({ blur, placement })
 
-  const component = React.useMemo<ComponentProps>(
+  const trigger = React.useMemo<DialogTriggerProps>(
     () => ({
       ref,
       children,
@@ -27,13 +27,14 @@ const Dialog = React.forwardRef<HTMLDivElement, DialogProps>((props, ref) => {
 
   return (
     <DialogContext.Provider value={context}>
-      <Component {...component}>{children}</Component>
+      <DialogTrigger {...trigger}>{children}</DialogTrigger>
     </DialogContext.Provider>
   )
 })
 
-Dialog.displayName = 'Dialog'
+Component.displayName = 'Dialog'
 
-export default Object.assign(Dialog, {
+export { ComponentProps as DialogProps }
+export default Object.assign(Component, {
   Content: DialogContent,
 })
diff --git a/packages/react/src/components/dialog/DialogContent.tsx b/packages/react/src/components/dialog/DialogContent.tsx
index 337e83a..c8e9a16 100644
--- a/packages/react/src/components/dialog/DialogContent.tsx
+++ b/packages/react/src/components/dialog/DialogContent.tsx
@@ -1,4 +1,3 @@
-import type { ComponentWithoutAs } from '@/utilities/types'
 import type { DialogProps, ModalOverlayProps } from 'react-aria-components'
 
 import React from 'react'
@@ -6,9 +5,9 @@ import { Dialog, Modal, ModalOverlay } from 'react-aria-components'
 
 import { useDialogContext } from '@/components/dialog/use-dialog.hook'
 
-export type DialogContentProps = ComponentWithoutAs<'div'> & DialogProps
+type ComponentProps = DialogProps
 
-const DialogContent = React.forwardRef<HTMLDivElement, DialogContentProps>((props, ref) => {
+const Component = React.forwardRef<HTMLDivElement, ComponentProps>((props, ref) => {
   const { children, className, ...rest } = props
 
   const { slots } = useDialogContext()
@@ -45,6 +44,7 @@ const DialogContent = React.forwardRef<HTMLDivElement, DialogContentProps>((prop
   )
 })
 
-DialogContent.displayName = 'Dialog.Content'
+Component.displayName = 'Dialog.Content'
 
-export default DialogContent
+export { ComponentProps as DialogContentProps }
+export default Component

From 5dcf058ee69dc1924802ea47ed3c0dd916036aff Mon Sep 17 00:00:00 2001
From: Jordan Phillips <jordypee27@gmail.com>
Date: Mon, 15 Apr 2024 20:43:13 +1000
Subject: [PATCH 2/2] feat(dialog): add dialog stories

---
 .../src/components/dialog/Dialog.stories.tsx  | 39 +++++++++++++++++++
 1 file changed, 39 insertions(+)
 create mode 100644 packages/react/src/components/dialog/Dialog.stories.tsx

diff --git a/packages/react/src/components/dialog/Dialog.stories.tsx b/packages/react/src/components/dialog/Dialog.stories.tsx
new file mode 100644
index 0000000..dbe880b
--- /dev/null
+++ b/packages/react/src/components/dialog/Dialog.stories.tsx
@@ -0,0 +1,39 @@
+import type { DialogProps } from '@/components/dialog'
+import type { Meta, StoryFn } from '@storybook/react'
+
+import { Button } from '@/components/button'
+import { Card } from '@/components/card'
+import { Dialog } from '@/components/dialog'
+
+const Component: Meta<typeof Dialog> = {
+  title: 'Components/Dialog',
+  component: Dialog,
+}
+
+const defaultProps = {}
+
+export const Default: StoryFn = (args: DialogProps) => (
+  <Dialog {...args}>
+    <Button>Open</Button>
+
+    <Dialog.Content>
+      {({ close }) => (
+        <Card>
+          <Card.Header>Dialog</Card.Header>
+
+          <Card.Body>Dialog Content</Card.Body>
+
+          <Card.Footer>
+            <Button onPress={close}>Close</Button>
+          </Card.Footer>
+        </Card>
+      )}
+    </Dialog.Content>
+  </Dialog>
+)
+
+Default.args = {
+  ...defaultProps,
+}
+
+export default Component