Refactor

packages/ui/src/components/banner/banner.tsx

@@ -1,7 +1,7 @@
 import { ComponentChildren, h, JSX } from 'preact'
 
-import { Props } from '../../types/types.js'
 import { createClassName } from '../../utilities/create-class-name.js'
+import { createComponent } from '../../utilities/create-component.js'
 import styles from './banner.module.css'
 
 export type BannerProps = {
@@ -11,15 +11,14 @@ export type BannerProps = {
 }
 export type BannerVariant = 'success' | 'warning'
 
-export function Banner({
-  children,
-  icon,
-  variant,
-  ...rest
-}: Props<HTMLDivElement, BannerProps>): JSX.Element {
+export const Banner = createComponent<HTMLDivElement, BannerProps>(function (
+  { children, icon, variant, ...rest },
+  ref
+): JSX.Element {
   return (
     <div
       {...rest}
+      ref={ref}
       class={createClassName([
         styles.banner,
         typeof variant === 'undefined' ? null : styles[variant]
@@ -29,4 +28,4 @@ export function Banner({
       <div class={styles.children}>{children}</div>
     </div>
   )
-}
+})

packages/ui/src/components/button/button.tsx

@@ -1,44 +1,55 @@
 import { ComponentChildren, h, JSX } from 'preact'
 import { useCallback } from 'preact/hooks'
 
-import { Props } from '../../types/types.js'
+import { Event, EventHandler } from '../../types/event-handler.js'
+import { FocusableComponentProps } from '../../types/focusable-component-props.js'
 import { createClassName } from '../../utilities/create-class-name.js'
+import { createComponent } from '../../utilities/create-component.js'
+import { noop } from '../../utilities/no-op.js'
 import { LoadingIndicator } from '../loading-indicator/loading-indicator.js'
 import styles from './button.module.css'
 
-export type ButtonProps = {
+export interface ButtonProps
+  extends FocusableComponentProps<HTMLButtonElement> {
   children: ComponentChildren
   danger?: boolean
   disabled?: boolean
   fullWidth?: boolean
   loading?: boolean
-  onClick?: JSX.MouseEventHandler<HTMLButtonElement>
-  propagateEscapeKeyDown?: boolean
+  onClick?: EventHandler.onClick<HTMLButtonElement>
   secondary?: boolean
 }
 
-export function Button({
-  children,
-  danger = false,
-  disabled = false,
-  fullWidth = false,
-  loading = false,
-  onClick,
-  propagateEscapeKeyDown = true,
-  secondary = false,
-  ...rest
-}: Props<HTMLButtonElement, ButtonProps>): JSX.Element {
+export const Button = createComponent<HTMLButtonElement, ButtonProps>(function (
+  {
+    blurOnEscapeKeyDown = true,
+    children,
+    danger = false,
+    disabled = false,
+    fullWidth = false,
+    loading = false,
+    onClick = noop,
+    onKeyDown = noop,
+    propagateEscapeKeyDown = true,
+    secondary = false,
+    ...rest
+  },
+  ref
+): JSX.Element {
   const handleKeyDown = useCallback(
-    function (event: JSX.TargetedKeyboardEvent<HTMLButtonElement>): void {
+    function (event: Event.onKeyDown<HTMLButtonElement>): void {
+      onKeyDown(event)
       if (event.key !== 'Escape') {
         return
       }
       if (propagateEscapeKeyDown === false) {
         event.stopPropagation()
       }
-      event.currentTarget.blur()
+      if (blurOnEscapeKeyDown === true) {
+        event.currentTarget.blur()
+      }
     },
-    [propagateEscapeKeyDown]
+    [blurOnEscapeKeyDown, onKeyDown, propagateEscapeKeyDown]
   )
 
   return (
@@ -59,15 +70,16 @@ export function Button({
       ) : null}
       <button
         {...rest}
+        ref={ref}
         disabled={disabled === true}
         onClick={disabled === true || loading === true ? undefined : onClick}
         onKeyDown={
           disabled === true || loading === true ? undefined : handleKeyDown
         }
-        tabIndex={disabled === true ? -1 : 0}
+        tabIndex={0}
       >
         <div class={styles.children}>{children}</div>
       </button>
     </div>
   )
-}
+})

packages/ui/src/components/button/stories/button-danger.stories.tsx

@@ -105,3 +105,11 @@ export const FullWidthLongText = function () {
 FullWidthLongText.parameters = {
   fixedWidth: true
 }
+
+export const BlurOnEscapeKeyDown = function () {
+  return (
+    <Button blurOnEscapeKeyDown={false} danger>
+      Text
+    </Button>
+  )
+}

packages/ui/src/components/button/stories/button-default.stories.tsx

@@ -101,3 +101,7 @@ export const FullWidthLongText = function () {
 FullWidthLongText.parameters = {
   fixedWidth: true
 }
+
+export const BlurOnEscapeKeyDown = function () {
+  return <Button blurOnEscapeKeyDown={false}>Text</Button>
+}

packages/ui/src/components/button/stories/button-secondary-danger.stories.tsx

@@ -111,3 +111,11 @@ export const FullWidthLongText = function () {
 FullWidthLongText.parameters = {
   fixedWidth: true
 }
+
+export const BlurOnEscapeKeyDown = function () {
+  return (
+    <Button blurOnEscapeKeyDown={false} danger secondary>
+      Text
+    </Button>
+  )
+}

packages/ui/src/components/button/stories/button-secondary.stories.tsx

@@ -105,3 +105,11 @@ export const FullWidthLongText = function () {
 FullWidthLongText.parameters = {
   fixedWidth: true
 }
+
+export const BlurOnEscapeKeyDown = function () {
+  return (
+    <Button blurOnEscapeKeyDown={false} secondary>
+      Text
+    </Button>
+  )
+}

packages/ui/src/components/checkbox/checkbox.tsx

@@ -2,79 +2,90 @@ import { ComponentChildren, h, JSX } from 'preact'
 import { useCallback } from 'preact/hooks'
 
 import { IconControlCheckboxChecked12 } from '../../icons/icon-12/icon-control-checkbox-checked-12.js'
-import { OnValueChange, Props } from '../../types/types.js'
+import { Event, EventHandler } from '../../types/event-handler.js'
+import { FocusableComponentProps } from '../../types/focusable-component-props.js'
 import { createClassName } from '../../utilities/create-class-name.js'
+import { createComponent } from '../../utilities/create-component.js'
+import { noop } from '../../utilities/no-op.js'
 import styles from './checkbox.module.css'
 
-export type CheckboxProps<Name extends string> = {
+export interface CheckboxProps
+  extends FocusableComponentProps<HTMLInputElement> {
   children: ComponentChildren
   disabled?: boolean
-  name?: Name
-  onChange?: OmitThisParameter<JSX.GenericEventHandler<HTMLInputElement>>
-  onValueChange?: OnValueChange<boolean, Name>
-  propagateEscapeKeyDown?: boolean
+  onChange?: EventHandler.onChange<HTMLInputElement>
+  onValueChange?: EventHandler.onValueChange<boolean>
   value: boolean
 }
 
-export function Checkbox<Name extends string>({
-  children,
-  disabled = false,
-  name,
-  onChange = function () {},
-  onValueChange = function () {},
-  propagateEscapeKeyDown = true,
-  value = false,
-  ...rest
-}: Props<HTMLInputElement, CheckboxProps<Name>>): JSX.Element {
-  const handleChange = useCallback(
-    function (event: JSX.TargetedEvent<HTMLInputElement>): void {
-      const newValue = event.currentTarget.checked
-      onValueChange(newValue, name)
-      onChange(event)
+export const Checkbox = createComponent<HTMLInputElement, CheckboxProps>(
+  function (
+    {
+      blurOnEscapeKeyDown = true,
+      children,
+      disabled = false,
+      onChange = noop,
+      onKeyDown = noop,
+      onValueChange = noop,
+      propagateEscapeKeyDown = true,
+      value,
+      ...rest
     },
-    [name, onChange, onValueChange]
-  )
+    ref
+  ): JSX.Element {
+    const handleChange = useCallback(
+      function (event: Event.onChange<HTMLInputElement>): void {
+        const newValue = event.currentTarget.checked
+        onValueChange(newValue)
+        onChange(event)
+      },
+      [onChange, onValueChange]
+    )
 
-  const handleKeyDown = useCallback(
-    function (event: JSX.TargetedKeyboardEvent<HTMLInputElement>): void {
-      if (event.key !== 'Escape') {
-        return
-      }
-      if (propagateEscapeKeyDown === false) {
-        event.stopPropagation()
-      }
-      event.currentTarget.blur()
-    },
-    [propagateEscapeKeyDown]
-  )
+    const handleKeyDown = useCallback(
+      function (event: Event.onKeyDown<HTMLInputElement>): void {
+        onKeyDown(event)
+        if (event.key !== 'Escape') {
+          return
+        }
+        if (propagateEscapeKeyDown === false) {
+          event.stopPropagation()
+        }
+        if (blurOnEscapeKeyDown === true) {
+          event.currentTarget.blur()
+        }
+      },
+      [blurOnEscapeKeyDown, onKeyDown, propagateEscapeKeyDown]
+    )
 
-  return (
-    <label
-      class={createClassName([
-        styles.checkbox,
-        disabled === true ? styles.disabled : null
-      ])}
-    >
-      <input
-        {...rest}
-        checked={value === true}
-        class={styles.input}
-        disabled={disabled === true}
-        name={name}
-        onChange={handleChange}
-        onKeyDown={handleKeyDown}
-        tabIndex={disabled === true ? -1 : 0}
-        type="checkbox"
-      />
-      <div class={styles.fill}>
-        {value === true ? (
-          <div class={styles.checkIcon}>
-            <IconControlCheckboxChecked12 />
-          </div>
-        ) : null}
-      </div>
-      <div class={styles.border} />
-      <div class={styles.children}>{children}</div>
-    </label>
-  )
-}
+    return (
+      <label
+        class={createClassName([
+          styles.checkbox,
+          disabled === true ? styles.disabled : null
+        ])}
+      >
+        <input
+          {...rest}
+          ref={ref}
+          checked={value === true}
+          class={styles.input}
+          disabled={disabled === true}
+          onChange={handleChange}
+          onKeyDown={handleKeyDown}
+          tabIndex={0}
+          type="checkbox"
+        />
+        <div class={styles.fill}>
+          {value === true ? (
+            <div class={styles.checkIcon}>
+              <IconControlCheckboxChecked12 />
+            </div>
+          ) : null}
+        </div>
+        <div class={styles.border} />
+        <div class={styles.children}>{children}</div>
+      </label>
+    )
+  }
+)