From 95f42ae6b8b2cffde964d7a2346f1b9fb5d5c720 Mon Sep 17 00:00:00 2001
From: Jordan Phillips <jordypee27@gmail.com>
Date: Sat, 20 Apr 2024 16:41:42 +1000
Subject: [PATCH] fix: paragraph appearing as spans + className + typing issues
 (#24)

* feat: add menu stories

* fix: typescript + paragraph element type
---
 .../react/src/components/button/Button.tsx    | 17 +++++--
 .../react/src/components/divider/Divider.tsx  |  3 +-
 .../src/components/menu/Menu.stories.tsx      | 47 +++++++++++++++++++
 .../typography/TypographyParagraph.tsx        |  8 ++--
 4 files changed, 66 insertions(+), 9 deletions(-)
 create mode 100644 packages/react/src/components/menu/Menu.stories.tsx

diff --git a/packages/react/src/components/button/Button.tsx b/packages/react/src/components/button/Button.tsx
index 208d434..829ec40 100644
--- a/packages/react/src/components/button/Button.tsx
+++ b/packages/react/src/components/button/Button.tsx
@@ -20,7 +20,18 @@ type ComponentType = <T extends React.ElementType = typeof __ELEMENT_TYPE__>(
 
 const Component: ComponentType = React.forwardRef(
   <T extends React.ElementType = typeof __ELEMENT_TYPE__>(props: ComponentProps<T>, ref: Polymophic.Ref<T>) => {
-    const { as, children, isLoading = false, isDisabled = false, color, shape, size, variant, ...rest } = props
+    const {
+      as,
+      children,
+      className,
+      isLoading = false,
+      isDisabled = false,
+      color,
+      shape,
+      size,
+      variant,
+      ...rest
+    } = props
 
     const Element = as ?? Button
 
@@ -29,11 +40,11 @@ const Component: ComponentType = React.forwardRef(
     const component = React.useMemo<ButtonProps>(
       () => ({
         'data-loading': isLoading,
-        className: slots.button(),
+        className: slots.button({ className: className?.toString() }),
         isDisabled: isLoading || isDisabled,
         ...rest,
       }),
-      [isDisabled, isLoading, rest, slots]
+      [className, isDisabled, isLoading, rest, slots]
     )
 
     return (
diff --git a/packages/react/src/components/divider/Divider.tsx b/packages/react/src/components/divider/Divider.tsx
index ccd77f5..c875f3d 100644
--- a/packages/react/src/components/divider/Divider.tsx
+++ b/packages/react/src/components/divider/Divider.tsx
@@ -1,11 +1,12 @@
 import type * as Polymophic from '@/utilities/polymorphic'
+import type { DividerVariantProps } from '@giantnodes/theme'
 
 import { divider } from '@giantnodes/theme'
 import React from 'react'
 
 const __ELEMENT_TYPE__ = 'hr'
 
-type ComponentOwnProps = {
+type ComponentOwnProps = DividerVariantProps & {
   icon: React.ReactNode
 }
 
diff --git a/packages/react/src/components/menu/Menu.stories.tsx b/packages/react/src/components/menu/Menu.stories.tsx
new file mode 100644
index 0000000..0cba0a8
--- /dev/null
+++ b/packages/react/src/components/menu/Menu.stories.tsx
@@ -0,0 +1,47 @@
+import type { MenuProps } from '@/components/menu'
+import type { Meta, StoryFn } from '@storybook/react'
+
+import { menu } from '@giantnodes/theme'
+
+import { Button } from '@/components/button'
+import { Menu } from '@/components/menu'
+
+const Component: Meta<typeof Menu> = {
+  title: 'Components/Menu',
+  component: Menu,
+  argTypes: {
+    size: {
+      control: { type: 'select' },
+    },
+    status: {
+      control: { type: 'select' },
+    },
+    variant: {
+      control: { type: 'select' },
+    },
+  },
+}
+
+const defaultProps = {
+  ...menu.defaultVariants,
+}
+
+export const Default: StoryFn = (args: MenuProps) => (
+  <Menu {...args}>
+    <Button>Open</Button>
+
+    <Menu.Popover placement="bottom right">
+      <Menu.List>
+        <Menu.Item>First</Menu.Item>
+        <Menu.Item>Second</Menu.Item>
+        <Menu.Item>Third</Menu.Item>
+      </Menu.List>
+    </Menu.Popover>
+  </Menu>
+)
+
+Default.args = {
+  ...defaultProps,
+}
+
+export default Component
diff --git a/packages/react/src/components/typography/TypographyParagraph.tsx b/packages/react/src/components/typography/TypographyParagraph.tsx
index 52319b2..e1b3ad7 100644
--- a/packages/react/src/components/typography/TypographyParagraph.tsx
+++ b/packages/react/src/components/typography/TypographyParagraph.tsx
@@ -1,14 +1,12 @@
 import type * as Polymophic from '@/utilities/polymorphic'
 import type { TypographyVariantProps } from '@giantnodes/theme'
-import type { TextProps } from 'react-aria-components'
 
 import { typography } from '@giantnodes/theme'
 import React from 'react'
-import { Text } from 'react-aria-components'
 
 const __ELEMENT_TYPE__ = 'p'
 
-type ComponentOwnProps = TextProps & TypographyVariantProps
+type ComponentOwnProps = TypographyVariantProps
 
 type ComponentProps<T extends React.ElementType> = Polymophic.ComponentPropsWithRef<T, ComponentOwnProps>
 
@@ -20,11 +18,11 @@ const Component: ComponentType = React.forwardRef(
   <T extends React.ElementType = typeof __ELEMENT_TYPE__>(props: ComponentProps<T>, ref: Polymophic.Ref<T>) => {
     const { as, children, className, variant, ...rest } = props
 
-    const Element = as ?? Text
+    const Element = as ?? __ELEMENT_TYPE__
 
     const slots = React.useMemo(() => typography({ variant }), [variant])
 
-    const component = React.useMemo<TextProps>(
+    const component = React.useMemo<React.ComponentPropsWithoutRef<typeof __ELEMENT_TYPE__>>(
       () => ({
         className: slots.paragraph({ className }),
         ...rest,