Migrate RLDailog,RLLIcon and RlLRagioGroup to Shoelace React components

Author: pzocchi

src/components/RLDialog/RLDialog.tsx

@@ -1,26 +1,9 @@
 import { forwardRef, useImperativeHandle, useCallback, useRef } from 'react'
+import SlDialog from '@shoelace-style/shoelace/dist/react/dialog/index.js'
+import type SlDialogElement from '@shoelace-style/shoelace/dist/components/dialog/dialog.js'
 import type { RLDialogProps, RLDialogRef } from './types'
 import type { SlRequestCloseEvent } from '../utils/types'
 
-declare global {
-  namespace JSX {
-    interface IntrinsicElements {
-      'sl-dialog': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & {
-        label?: string
-        open?: boolean
-        noHeader?: boolean
-        class?: string
-        onSlShow?: (event: Event) => void
-        onSlAfterShow?: (event: Event) => void
-        onSlHide?: (event: Event) => void
-        onSlAfterHide?: (event: Event) => void
-        onSlInitialFocus?: (event: Event) => void
-        onSlRequestClose?: (event: Event) => void
-      }
-    }
-  }
-}
-
 export const RLDialog = forwardRef<RLDialogRef, RLDialogProps>(
   (
     {
@@ -40,7 +23,7 @@ export const RLDialog = forwardRef<RLDialogRef, RLDialogProps>(
     },
     ref
   ) => {
-    const dialogRef = useRef<HTMLElement & { open: boolean; show: () => void; hide: () => void }>(null)
+    const dialogRef = useRef<SlDialogElement>(null)
 
     useImperativeHandle(ref, () => ({
       open: dialogRef.current?.open,
@@ -49,8 +32,8 @@ export const RLDialog = forwardRef<RLDialogRef, RLDialogProps>(
     }))
 
     const handleRequestClose = useCallback(
-      (event: Event) => {
-        const evt = event as unknown as SlRequestCloseEvent
+      (event: CustomEvent) => {
+        const evt = event as SlRequestCloseEvent
         if (noCloseOnOutsideClick && evt.detail.source === 'overlay') {
           evt.preventDefault()
           return
@@ -63,47 +46,47 @@ export const RLDialog = forwardRef<RLDialogRef, RLDialogProps>(
     )
 
     const handleShow = useCallback(
-      (event: Event) => {
-        onShow?.(event as unknown as Parameters<NonNullable<typeof onShow>>[0])
+      (event: CustomEvent) => {
+        onShow?.(event)
       },
       [onShow]
     )
 
     const handleAfterShow = useCallback(
-      (event: Event) => {
-        onAfterShow?.(event as unknown as Parameters<NonNullable<typeof onAfterShow>>[0])
+      (event: CustomEvent) => {
+        onAfterShow?.(event)
       },
       [onAfterShow]
     )
 
     const handleHide = useCallback(
-      (event: Event) => {
-        onHide?.(event as unknown as Parameters<NonNullable<typeof onHide>>[0])
+      (event: CustomEvent) => {
+        onHide?.(event)
       },
       [onHide]
     )
 
     const handleAfterHide = useCallback(
-      (event: Event) => {
-        onAfterHide?.(event as unknown as Parameters<NonNullable<typeof onAfterHide>>[0])
+      (event: CustomEvent) => {
+        onAfterHide?.(event)
       },
       [onAfterHide]
     )
 
     const handleInitialFocus = useCallback(
-      (event: Event) => {
-        onInitialFocus?.(event as unknown as Parameters<NonNullable<typeof onInitialFocus>>[0])
+      (event: CustomEvent) => {
+        onInitialFocus?.(event)
       },
       [onInitialFocus]
     )
 
     return (
-      <sl-dialog
+      <SlDialog
         ref={dialogRef}
-        class={className ?? 'dialog'}
+        className={className ?? 'dialog'}
         label={label}
-        open={open || undefined}
-        noHeader={noHeader || undefined}
+        open={open}
+        noHeader={noHeader}
         onSlShow={handleShow}
         onSlAfterShow={handleAfterShow}
         onSlHide={handleHide}
@@ -112,7 +95,7 @@ export const RLDialog = forwardRef<RLDialogRef, RLDialogProps>(
         onSlRequestClose={handleRequestClose}
       >
         {children}
-      </sl-dialog>
+      </SlDialog>
     )
   }
 )

src/components/RLIcon/RLIcon.tsx

@@ -1,24 +1,14 @@
 import { forwardRef } from 'react'
+import SlIcon from '@shoelace-style/shoelace/dist/react/icon/index.js'
+import type SlIconElement from '@shoelace-style/shoelace/dist/components/icon/icon.js'
 import type { RLIconProps } from './types'
 
-declare global {
-  namespace JSX {
-    interface IntrinsicElements {
-      'sl-icon': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & {
-        name?: string
-        library?: string
-        class?: string
-      }
-    }
-  }
-}
-
-export const RLIcon = forwardRef<HTMLElement, RLIconProps>(
+export const RLIcon = forwardRef<SlIconElement, RLIconProps>(
   ({ name, library = 'default', className, onClick, slot }, ref) => {
     return (
-      <sl-icon
+      <SlIcon
         ref={ref}
-        class={className}
+        className={className}
         library={library}
         name={name}
         onClick={onClick}

src/components/RLRadioGroup/RLRadioGroup.tsx

@@ -1,30 +1,11 @@
 import { forwardRef, useImperativeHandle, useCallback, useEffect } from 'react'
+import SlRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group/index.js'
+import SlRadio from '@shoelace-style/shoelace/dist/react/radio/index.js'
+import type SlRadioGroupElement from '@shoelace-style/shoelace/dist/components/radio-group/radio-group.js'
 import type { RLRadioGroupProps, RLRadioGroupRef } from './types'
 import { ErrorMessage } from '../utils/ErrorMessage'
 import { useValidation } from '../../hooks/useValidation'
 
-declare global {
-  namespace JSX {
-    interface IntrinsicElements {
-      'sl-radio-group': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & {
-        value?: string
-        label?: string
-        helpText?: string
-        name?: string
-        size?: string
-        form?: string
-        required?: boolean
-        class?: string
-      }
-      'sl-radio': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & {
-        value?: string
-        disabled?: boolean
-        class?: string
-      }
-    }
-  }
-}
-
 export const RLRadioGroup = forwardRef<RLRadioGroupRef, RLRadioGroupProps>(
   (
     {
@@ -60,55 +41,59 @@ export const RLRadioGroup = forwardRef<RLRadioGroupRef, RLRadioGroupProps>(
     }))
 
     const handleChange = useCallback(
-      (event: Event) => {
-        const target = event.target as HTMLInputElement
-        onChange?.(target?.value ?? '')
-        onSlChange?.(event as unknown as Parameters<NonNullable<typeof onSlChange>>[0])
+      (event: CustomEvent) => {
+        const target = event.target as SlRadioGroupElement
+        const newValue = target?.value ?? ''
+        validate(newValue)
+        onChange?.(newValue)
+        onSlChange?.(event)
       },
-      [onChange, onSlChange]
+      [onChange, onSlChange, validate]
     )
 
     const handleInput = useCallback(
-      (event: Event) => {
-        onInput?.(event as unknown as Parameters<NonNullable<typeof onInput>>[0])
+      (event: CustomEvent) => {
+        onInput?.(event)
       },
       [onInput]
     )
 
     const handleInvalid = useCallback(
-      (event: Event) => {
-        onInvalid?.(event as unknown as Parameters<NonNullable<typeof onInvalid>>[0])
+      (event: CustomEvent) => {
+        onInvalid?.(event)
       },
       [onInvalid]
     )
 
+    const combinedClassName = errorMessage ? 'error' : undefined
+
     return (
       <div className="relative">
-        <sl-radio-group
-          class={errorMessage ? 'error' : undefined}
+        <SlRadioGroup
+          className={combinedClassName}
           value={value}
-          label={label || undefined}
-          helpText={helpText || undefined}
-          name={name || undefined}
+          label={label}
+          helpText={helpText}
+          name={name}
           size={size}
-          form={form || undefined}
-          required={required || undefined}
-          onlsl-change={handleChange}
-          onsl-invalid={handleInvalid}
-          onsl-input={handleInput}
+          form={form}
+          required={required}
+          onSlChange={handleChange}
+          onSlInvalid={handleInvalid}
+          onSlInput={handleInput}
         >
           {options.map((radio) => (
-            <sl-radio
+            <SlRadio
               key={radio.value}
-              class={errorMessage ? 'error' : undefined}
+              className={combinedClassName}
               value={radio.value}
-              disabled={radio.disabled || undefined}
+              disabled={radio.disabled}
             >
               {radio.label}
-            </sl-radio>
+            </SlRadio>
           ))}
           {children}
-        </sl-radio-group>
+        </SlRadioGroup>
         {errorMessage && <ErrorMessage>{errorMessage}</ErrorMessage>}
       </div>
     )