chore: react element to node

web/app/components/base/pagination/type.ts

@@ -31,7 +31,7 @@ type IPagination = IUsePagination & {
 }
 
 type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
-  as?: React.ReactElement
+  as?: React.ReactNode
   children?: string | React.ReactNode
   className?: string
   dataTestId?: string
@@ -39,9 +39,9 @@ type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
 
 type PageButtonProps = ButtonProps & {
   /**
-   * Provide a custom ReactElement (e.g. Next/Link)
+   * Provide a custom ReactNode (e.g. Next/Link)
    */
-  as?: React.ReactElement
+  as?: React.ReactNode
   activeClassName?: string
   inactiveClassName?: string
   dataTestIdActive?: string

web/app/components/base/popover/index.tsx

@@ -9,7 +9,7 @@ export type HtmlContentProps = {
 
 type IPopover = {
   className?: string
-  htmlContent: React.ReactElement<HtmlContentProps>
+  htmlContent: React.ReactNode<HtmlContentProps>
   popupClassName?: string
   trigger?: 'click' | 'hover'
   position?: 'bottom' | 'br' | 'bl'
@@ -99,7 +99,7 @@ export default function CustomPopover({
                         })
                       }
                     >
-                      {cloneElement(htmlContent as React.ReactElement<HtmlContentProps>, {
+                      {cloneElement(htmlContent as React.ReactNode<HtmlContentProps>, {
                         onClose: () => onMouseLeave(open),
                         ...(manualClose
                           ? {

web/app/components/base/radio/component/group/index.tsx

@@ -1,10 +1,10 @@
-import type { ReactElement } from 'react'
+import type { ReactNode } from 'react'
 import RadioGroupContext from '../../context'
 import s from '../../style.module.css'
 import cn from '@/utils/classnames'
 
 export type TRadioGroupProps = {
-  children?: ReactElement | ReactElement[]
+  children?: ReactNode | ReactNode[]
   value?: string | number
   className?: string
   onChange?: (value: any) => void

web/app/components/base/radio/component/radio/index.tsx

@@ -1,4 +1,4 @@
-import type { ReactElement } from 'react'
+import type { ReactNode } from 'react'
 import { useId } from 'react'
 import { useContext } from 'use-context-selector'
 import RadioGroupContext from '../../context'
@@ -8,7 +8,7 @@ import cn from '@/utils/classnames'
 export type IRadioProps = {
   className?: string
   labelClassName?: string
-  children?: string | ReactElement
+  children?: string | ReactNode
   checked?: boolean
   value?: string | number
   disabled?: boolean

web/app/components/browser-initor.tsx

@@ -45,7 +45,7 @@ Object.defineProperty(globalThis, 'sessionStorage', {
 
 const BrowserInitor = ({
   children,
-}: { children: React.ReactElement }) => {
+}: { children: React.ReactNode }) => {
   return children
 }
 

web/app/components/develop/code.tsx

@@ -24,7 +24,7 @@ const languageNames = {
 } as { [key: string]: string }
 
 type IChildrenProps = {
-  children: React.ReactElement
+  children: React.ReactNode
   [key: string]: any
 }
 
@@ -122,7 +122,7 @@ function CodePanelHeader({ tag, label }: { tag: string; label: string }) {
 }
 
 type ICodePanelProps = {
-  children: React.ReactElement
+  children: React.ReactNode
   tag?: string
   code?: string
   label?: string
@@ -182,7 +182,7 @@ function CodeGroupHeader({ title, children, selectedIndex }: IChildrenProps) {
 }
 
 type ICodeGroupPanelsProps = {
-  children: React.ReactElement
+  children: React.ReactNode
   [key: string]: any
 }
 function CodeGroupPanels({ children, targetCode, ...props }: ICodeGroupPanelsProps) {

web/app/components/sentry-initor.tsx

@@ -7,7 +7,7 @@ const isDevelopment = process.env.NODE_ENV === 'development'
 
 const SentryInit = ({
   children,
-}: { children: React.ReactElement }) => {
+}: { children: React.ReactNode }) => {
   useEffect(() => {
     const SENTRY_DSN = document?.body?.getAttribute('data-public-sentry-dsn')
     if (!isDevelopment && SENTRY_DSN) {

web/app/components/workflow/nodes/_base/node.tsx

@@ -1,6 +1,6 @@
 import type {
   FC,
-  ReactElement,
+  ReactNode,
 } from 'react'
 import {
   cloneElement,
@@ -45,7 +45,7 @@ import BlockIcon from '@/app/components/workflow/block-icon'
 import Tooltip from '@/app/components/base/tooltip'
 
 type BaseNodeProps = {
-  children: ReactElement
+  children: ReactNode
 } & NodeProps
 
 const BaseNode: FC<BaseNodeProps> = ({

web/app/components/workflow/nodes/_base/panel.tsx

@@ -1,6 +1,6 @@
 import type {
   FC,
-  ReactElement,
+  ReactNode,
 } from 'react'
 import {
   cloneElement,
@@ -48,7 +48,7 @@ import { useStore as useAppStore } from '@/app/components/app/store'
 import { useStore } from '@/app/components/workflow/store'
 
 type BasePanelProps = {
-  children: ReactElement
+  children: ReactNode
 } & Node
 
 const BasePanel: FC<BasePanelProps> = ({
@@ -61,7 +61,7 @@ const BasePanel: FC<BasePanelProps> = ({
     showMessageLogModal: state.showMessageLogModal,
   })))
   const showSingleRunPanel = useStore(s => s.showSingleRunPanel)
-  const panelWidth = localStorage.getItem('workflow-node-panel-width') ? parseFloat(localStorage.getItem('workflow-node-panel-width')!) : 420
+  const panelWidth = localStorage.getItem('workflow-node-panel-width') ? Number.parseFloat(localStorage.getItem('workflow-node-panel-width')!) : 420
   const {
     setPanelWidth,
   } = useWorkflow()