feat: migrating alert component (#600)

* feat: migrating alert component

* feat: migrate alert use asChild

* feat: migrate actionbar, toast use updated alert

* feat: migrate toast component use update alert for support asChild

* fix: build error

* fix: add changeset

.changeset/silly-grapes-live.md

@@ -0,0 +1,8 @@
+---
+'@mochi-ui/action-bar': patch
+'@mochi-ui/alert': patch
+'@mochi-ui/toast': patch
+'@mochi-ui/core': patch
+---
+
+Remove `as` prop, support asChild for polymorphic

packages/components/action-bar/src/action-bar-action-group.tsx

@@ -1,19 +1,16 @@
-import {
-  AlertActionGroup,
-  AlertActionGroupProps,
-  PolymorphicAlertActionGroup,
-} from '@mochi-ui/alert'
-import { forwardRef } from 'react'
+import { ElementRef, forwardRef } from 'react'
+import { AlertActionGroup, AlertActionGroupProps } from '@mochi-ui/alert'
 
-type ActionBarActionGroupProps = AlertActionGroupProps
+// NOTE: this fix build err
+// The inferred type of 'ActionBarActionGroup' cannot be named without a reference to '../../alert/node_modules/@mochi-ui/theme/src'.
+interface ActionBarActionGroupProps extends AlertActionGroupProps {}
 
-type PolymorphicActionBarActionGroup = PolymorphicAlertActionGroup
-
-const ActionBarActionGroup = forwardRef((props, ref) => (
-  <AlertActionGroup ref={ref} {...props} />
-)) as PolymorphicActionBarActionGroup
+const ActionBarActionGroup = forwardRef<
+  ElementRef<typeof AlertActionGroup>,
+  ActionBarActionGroupProps
+>((props, ref) => <AlertActionGroup ref={ref} {...props} />)
 
 ActionBarActionGroup.displayName = 'ActionBarActionGroup'
 
 export { ActionBarActionGroup }
-export type { ActionBarActionGroupProps, PolymorphicActionBarActionGroup }
+export type { ActionBarActionGroupProps }

packages/components/action-bar/src/action-bar-body.tsx

@@ -1,18 +1,16 @@
-import {
-  AlertBody,
-  AlertBodyProps,
-  PolymorphicAlertBody,
-} from '@mochi-ui/alert'
-import { forwardRef } from 'react'
+import { AlertBody, AlertBodyProps } from '@mochi-ui/alert'
+import { ElementRef, forwardRef } from 'react'
 
 type ActionBarBodyProps = AlertBodyProps
-type PolymorphicActionBarBody = PolymorphicAlertBody
 
-const ActionBarBody = forwardRef((props, ref) => {
+const ActionBarBody = forwardRef<
+  ElementRef<typeof AlertBody>,
+  ActionBarBodyProps
+>((props, ref) => {
   return <AlertBody {...props} ref={ref} />
-}) as PolymorphicActionBarBody
+})
 
 ActionBarBody.displayName = 'ActionBarBody'
 
 export { ActionBarBody }
-export type { ActionBarBodyProps, PolymorphicActionBarBody }
+export type { ActionBarBodyProps }

packages/components/action-bar/src/action-bar-cancel.tsx

@@ -1,21 +1,19 @@
-import {
-  AlertCancelButton,
-  AlertCancelProps,
-  PolymorphicAlertCancelButton,
-} from '@mochi-ui/alert'
+import { AlertCancelButton, AlertCancelProps } from '@mochi-ui/alert'
 import * as PopoverPrimitive from '@radix-ui/react-popover'
-import { forwardRef } from 'react'
+import { ElementRef, forwardRef } from 'react'
 
 type ActionBarCancelButtonProps = AlertCancelProps
-type PolymorphicActionBarCancelButton = PolymorphicAlertCancelButton
 
-const ActionBarCancelButton = forwardRef((props, ref) => (
+const ActionBarCancelButton = forwardRef<
+  ElementRef<typeof AlertCancelButton>,
+  ActionBarCancelButtonProps
+>((props, ref) => (
   <PopoverPrimitive.Close asChild>
     <AlertCancelButton {...props} ref={ref} />
   </PopoverPrimitive.Close>
-)) as PolymorphicActionBarCancelButton
+))
 
 ActionBarCancelButton.displayName = 'ActionBarCancelButton'
 
 export { ActionBarCancelButton }
-export type { ActionBarCancelButtonProps, PolymorphicActionBarCancelButton }
+export type { ActionBarCancelButtonProps }

packages/components/action-bar/src/action-bar-confirm.tsx

@@ -1,18 +1,14 @@
-import {
-  AlertConfirmButton,
-  AlertConfirmProps,
-  PolymorphicAlertConfirmButton,
-} from '@mochi-ui/alert'
-import { forwardRef } from 'react'
+import { AlertConfirmButton, AlertConfirmProps } from '@mochi-ui/alert'
+import { ElementRef, forwardRef } from 'react'
 
 type ActionBarConfirmButtonProps = AlertConfirmProps
-type PolymorphicActionBarConfirmButton = PolymorphicAlertConfirmButton
 
-const ActionBarConfirmButton = forwardRef((props, ref) => (
-  <AlertConfirmButton {...props} ref={ref} />
-)) as PolymorphicActionBarConfirmButton
+const ActionBarConfirmButton = forwardRef<
+  ElementRef<typeof AlertConfirmButton>,
+  ActionBarConfirmButtonProps
+>((props, ref) => <AlertConfirmButton {...props} ref={ref} />)
 
 ActionBarConfirmButton.displayName = 'ActionBarConfirmButton'
 
 export { ActionBarConfirmButton }
-export type { ActionBarConfirmButtonProps, PolymorphicActionBarConfirmButton }
+export type { ActionBarConfirmButtonProps }

packages/components/action-bar/src/action-bar-content.tsx

@@ -34,6 +34,7 @@ const ActionBarContent = forwardRef<
     sideOffset,
     scheme,
     anchorClassName,
+    asChild,
     ...passProps
   } = props
 
@@ -45,6 +46,7 @@ const ActionBarContent = forwardRef<
     layout,
     size,
     scheme,
+    asChild,
   }
 
   return (

packages/components/action-bar/src/action-bar-description.tsx

@@ -1,18 +1,14 @@
-import {
-  AlertDescription,
-  AlertDescriptionProps,
-  PolymorphicAlertDescription,
-} from '@mochi-ui/alert'
-import { forwardRef } from 'react'
+import { AlertDescription, AlertDescriptionProps } from '@mochi-ui/alert'
+import { ElementRef, forwardRef } from 'react'
 
 type ActionBarDescriptionProps = AlertDescriptionProps
-type PolymorphicActionBarDescription = PolymorphicAlertDescription
 
-const ActionBarDescription = forwardRef((props, ref) => (
-  <AlertDescription {...props} ref={ref} />
-)) as PolymorphicActionBarDescription
+const ActionBarDescription = forwardRef<
+  ElementRef<typeof AlertDescription>,
+  ActionBarDescriptionProps
+>((props, ref) => <AlertDescription {...props} ref={ref} />)
 
 ActionBarDescription.displayName = 'ActionBarDescription'
 
-export type { ActionBarDescriptionProps, PolymorphicActionBarDescription }
+export type { ActionBarDescriptionProps }
 export { ActionBarDescription }

packages/components/action-bar/src/action-bar-title.tsx

@@ -1,18 +1,14 @@
-import {
-  AlertTitle,
-  AlertTitleProps,
-  PolymorphicAlertTitle,
-} from '@mochi-ui/alert'
-import { forwardRef } from 'react'
+import { AlertTitle, AlertTitleProps } from '@mochi-ui/alert'
+import { ElementRef, forwardRef } from 'react'
 
 type ActionBarTitleProps = AlertTitleProps
-type PolymorphicActionbarTitle = PolymorphicAlertTitle
 
-const ActionBarTitle = forwardRef((props, ref) => (
-  <AlertTitle {...props} ref={ref} />
-)) as PolymorphicActionbarTitle
+const ActionBarTitle = forwardRef<
+  ElementRef<typeof AlertTitle>,
+  ActionBarTitleProps
+>((props, ref) => <AlertTitle {...props} ref={ref} />)
 
 ActionBarTitle.displayName = 'ActionBarTitle'
 
 export { ActionBarTitle }
-export type { PolymorphicActionbarTitle, ActionBarTitleProps }
+export type { ActionBarTitleProps }

packages/components/action-bar/src/action-bar-trigger.tsx

@@ -1,11 +1,15 @@
-import { forwardRef } from 'react'
+import { ComponentPropsWithoutRef, ElementRef, forwardRef } from 'react'
 import * as PopoverPrimitive from '@radix-ui/react-popover'
 
+type ActionBarTriggerProps = ComponentPropsWithoutRef<
+  typeof PopoverPrimitive.Trigger
+>
 const ActionBarTrigger = forwardRef<
-  React.ElementRef<typeof PopoverPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Trigger>
+  ElementRef<typeof PopoverPrimitive.Trigger>,
+  ActionBarTriggerProps
 >((props, ref) => <PopoverPrimitive.Trigger ref={ref} {...props} />)
 
 ActionBarTrigger.displayName = 'ActionBarTrigger'
 
 export { ActionBarTrigger }
+export type { ActionBarTriggerProps }

packages/components/alert/package.json

@@ -36,7 +36,6 @@
     "@mochi-ui/button": "workspace:*",
     "@mochi-ui/icon-button": "workspace:*",
     "@mochi-ui/icons": "workspace:*",
-    "@mochi-ui/polymorphic": "workspace:*",
     "@mochi-ui/theme": "workspace:*",
     "@radix-ui/react-slot": "^1.0.2",
     "class-variance-authority": "^0.7.0",

packages/components/alert/src/alert-action-group.tsx

@@ -1,43 +1,33 @@
 import { alert, alertActionGroupStyleProps } from '@mochi-ui/theme'
-import { ComponentPropsWithRef, forwardRef } from 'react'
-import type * as Polymorphic from '@mochi-ui/polymorphic'
+import { ComponentPropsWithoutRef, ElementRef, forwardRef } from 'react'
 import { Slot } from '@radix-ui/react-slot'
 import { useAlertContext } from './context'
 
-type PolymorphicAlertActionGroup = Polymorphic.ForwardRefComponent<
-  'div',
-  {
-    asChild?: boolean
-  } & alertActionGroupStyleProps
->
+type AlertActionGroupProps = ComponentPropsWithoutRef<'div'> & {
+  asChild?: boolean
+} & alertActionGroupStyleProps
 
-type AlertActionGroupProps = ComponentPropsWithRef<PolymorphicAlertActionGroup>
+const AlertActionGroup = forwardRef<ElementRef<'div'>, AlertActionGroupProps>(
+  (props, ref) => {
+    const { className, asChild, layout: layoutProp, ...restProps } = props
+    const { layout: layoutContext, size, scheme } = useAlertContext()
 
-const AlertActionGroup = forwardRef((props, ref) => {
-  const {
-    className,
-    as = 'div',
-    layout: layoutProp,
-    asChild,
-    ...restProps
-  } = props
-  const { layout: layoutContext, size, scheme } = useAlertContext()
+    const Component = asChild ? Slot : 'div'
+    const layout = layoutProp ?? layoutContext
 
-  const Component = asChild ? Slot : as
-  const layout = layoutProp ?? layoutContext
-
-  return (
-    <Component
-      data-layout={layout}
-      data-scheme={scheme}
-      data-size={size}
-      className={alert.alertActionGroupCva({ layout, className })}
-      ref={ref}
-      {...restProps}
-    />
-  )
-}) as PolymorphicAlertActionGroup
+    return (
+      <Component
+        data-layout={layout}
+        data-scheme={scheme}
+        data-size={size}
+        className={alert.alertActionGroupCva({ layout, className })}
+        ref={ref}
+        {...restProps}
+      />
+    )
+  },
+)
 AlertActionGroup.displayName = 'AlertActionGroup'
 
 export { AlertActionGroup }
-export type { PolymorphicAlertActionGroup, AlertActionGroupProps }
+export type { AlertActionGroupProps }

packages/components/alert/src/alert-body.tsx

@@ -1,47 +1,42 @@
-import { ComponentPropsWithRef, forwardRef } from 'react'
-import type * as Polymorphic from '@mochi-ui/polymorphic'
+import { ComponentPropsWithoutRef, ElementRef, forwardRef } from 'react'
 import { Slot } from '@radix-ui/react-slot'
 import { AlertBodyStyleProps, alert } from '@mochi-ui/theme'
 import { useAlertContext } from './context'
 
-type PolymorphicAlertBody = Polymorphic.ForwardRefComponent<
-  'div',
-  {
-    asChild?: boolean
-  } & AlertBodyStyleProps
->
+type AlertBodyProps = ComponentPropsWithoutRef<'div'> & {
+  asChild?: boolean
+} & AlertBodyStyleProps
 
-type AlertBodyProps = ComponentPropsWithRef<PolymorphicAlertBody>
+const AlertBody = forwardRef<ElementRef<'div'>, AlertBodyProps>(
+  (props, ref) => {
+    const {
+      asChild,
+      className,
+      layout: layoutProp,
+      children,
+      ...restProps
+    } = props
+    const { layout: layoutContext, scheme, size } = useAlertContext()
 
-const AlertBody = forwardRef((props, ref) => {
-  const {
-    asChild,
-    as = 'div',
-    className,
-    layout: layoutProp,
-    children,
-    ...restProps
-  } = props
-  const { layout: layoutContext, scheme, size } = useAlertContext()
+    const layout = layoutProp ?? layoutContext
+    const Component = asChild ? Slot : 'div'
+    const passProps = asChild ? {} : { ref, ...restProps }
 
-  const layout = layoutProp ?? layoutContext
-  const Component = asChild ? Slot : as
-  const passProps = asChild ? {} : { ref, ...restProps }
-
-  return (
-    <Component
-      ref={ref}
-      data-layout={layout}
-      data-scheme={scheme}
-      data-size={size}
-      className={alert.alertBodyCva({ layout, className })}
-      {...passProps}
-    >
-      {children}
-    </Component>
-  )
-}) as PolymorphicAlertBody
+    return (
+      <Component
+        ref={ref}
+        data-layout={layout}
+        data-scheme={scheme}
+        data-size={size}
+        className={alert.alertBodyCva({ layout, className })}
+        {...passProps}
+      >
+        {children}
+      </Component>
+    )
+  },
+)
 AlertBody.displayName = 'AlertBody'
 
 export { AlertBody }
-export type { AlertBodyProps, PolymorphicAlertBody }
+export type { AlertBodyProps }