feat: Radio group implementation

.eslintrc.json

@@ -68,7 +68,14 @@
     "react/jsx-props-no-spreading": "off",
     "import/prefer-default-export": "off",
     "jsx-a11y/anchor-is-valid": "warn",
-    "jsx-a11y/no-noninteractive-tabindex": "warn",
+    "jsx-a11y/no-noninteractive-tabindex": [
+      "warn",
+      {
+        "tags": [],
+        "roles": ["tabpanel"],
+        "allowExpressionValues": true
+      }
+    ],
     "jsx-a11y/tabindex-no-positive": "warn",
     "jsx-a11y/click-events-have-key-events": "warn",
     "jsx-a11y/no-static-element-interactions": "warn",

package.json

@@ -49,6 +49,7 @@
   },
   "devDependencies": {
     "@interledger/http-signature-utils": "^2.0.0",
+    "@tailwindcss/forms": "^0.5.7",
     "@testing-library/jest-dom": "^6.1.3",
     "@testing-library/react": "^14.0.0",
     "@types/chrome": "^0.0.244",

src/components/__tests__/radio-group.test.tsx

@@ -0,0 +1,104 @@
+import { fireEvent, render } from '@testing-library/react'
+import React from 'react'
+
+import { Radio, RadioGroup } from '../radio-group'
+
+describe('RadioGroup', () => {
+  const radioItems = [
+    { label: 'Option 1', value: 'option1', checked: true },
+    { label: 'Option 2', value: 'option2' },
+  ]
+
+  it('should have the `flex-row` class when the `inline` variant is passed', () => {
+    const { queryByRole } = render(
+      <RadioGroup variant="inline" items={radioItems} name="radioName" />,
+    )
+
+    expect(queryByRole('radiogroup')).toBeInTheDocument()
+    expect(queryByRole('radiogroup')).toHaveClass('flex-row')
+  })
+
+  it('renders radio group correctly with items', () => {
+    const { getByRole } = render(<RadioGroup items={radioItems} name="radioGroup" />)
+
+    const radioGroup = getByRole('radiogroup')
+    expect(radioGroup).toBeInTheDocument()
+    expect(radioGroup.childNodes.length).toBe(2) // Ensure two radio buttons are rendered
+  })
+
+  it('renders radio group with no element checked by default', () => {
+    const radioItemsNotChecked = [
+      { label: 'Option 1', value: 'option1' },
+      { label: 'Option 2', value: 'option2' },
+    ]
+    const { getByLabelText } = render(<RadioGroup items={radioItemsNotChecked} name="radioGroup" />)
+
+    const firstRadioButton = getByLabelText('Option 1')
+    const secondRadioButton = getByLabelText('Option 2')
+
+    expect(firstRadioButton).not.toBeChecked()
+    expect(secondRadioButton).not.toBeChecked()
+  })
+
+  it('handles keyboard navigation', () => {
+    const { getByLabelText } = render(<RadioGroup items={radioItems} name="radioGroup" />)
+
+    const radioGroup = getByLabelText('Option 1')
+    fireEvent.keyDown(radioGroup, { key: 'ArrowRight', code: 'ArrowRight' })
+    let secondRadioButton = getByLabelText('Option 2')
+    expect(secondRadioButton).toBeChecked()
+
+    fireEvent.keyDown(radioGroup, { key: 'ArrowLeft', code: 'ArrowLeft' })
+    let firstRadioButton = getByLabelText('Option 1')
+    expect(firstRadioButton).toBeChecked()
+
+    fireEvent.keyDown(radioGroup, { key: 'ArrowUp', code: 'ArrowUp' })
+    secondRadioButton = getByLabelText('Option 2')
+    expect(secondRadioButton).toBeChecked()
+
+    fireEvent.keyDown(radioGroup, { key: 'ArrowDown', code: 'ArrowDown' })
+    firstRadioButton = getByLabelText('Option 1')
+    expect(firstRadioButton).toBeChecked()
+  })
+
+  it('changes selection on arrow keys', () => {
+    const { getByLabelText } = render(<RadioGroup items={radioItems} name="radioGroup" />)
+
+    const radioGroup = getByLabelText('Option 1')
+    fireEvent.keyDown(radioGroup, { key: 'ArrowRight', code: 'ArrowRight' })
+    fireEvent.keyDown(radioGroup, { key: 'Enter', code: 'Enter' })
+    const secondRadioButton = getByLabelText('Option 2')
+    expect(secondRadioButton).toBeChecked()
+  })
+
+  it('changes selection on clicking radio buttons', () => {
+    const { getByLabelText } = render(<RadioGroup items={radioItems} name="radioGroup" />)
+
+    const secondRadioButton = getByLabelText('Option 2')
+    fireEvent.click(secondRadioButton)
+    expect(secondRadioButton).toBeChecked()
+  })
+})
+
+describe('Radio', () => {
+  it('renders radio button correctly with label', () => {
+    const { getByLabelText } = render(<Radio label="Option 1" value="option1" name="radioGroup" />)
+
+    const radioButton = getByLabelText('Option 1')
+    expect(radioButton).toBeInTheDocument()
+    expect(radioButton).toHaveAttribute('type', 'radio')
+    expect(radioButton).not.toBeChecked()
+
+    fireEvent.click(radioButton)
+    expect(radioButton).toBeChecked()
+  })
+
+  it('renders disabled radio button', () => {
+    const { getByLabelText } = render(
+      <Radio label="Option 1" value="option1" name="radioGroup" disabled />,
+    )
+
+    const radioButton = getByLabelText('Option 1')
+    expect(radioButton).toBeDisabled()
+  })
+})

src/components/radio-group.tsx

@@ -0,0 +1,148 @@
+import { type VariantProps, cva } from 'class-variance-authority'
+import React, { useEffect, useMemo, useState } from 'react'
+
+import { cn } from '@/utils/cn'
+
+export interface RadioProps {
+  checked?: boolean
+  label?: string
+  value: string
+  name: string
+  id?: string
+  disabled?: boolean
+  onChange?: any
+  noSelected?: boolean
+}
+
+export const Radio = ({
+  label,
+  id,
+  name,
+  value,
+  disabled,
+  onChange,
+  checked,
+  noSelected,
+}: RadioProps): JSX.Element => {
+  const inputId = id || `id-${name}-${value}`
+  const divId = `div-${inputId}`
+
+  useEffect(() => {
+    if (checked) document.getElementById(divId)?.focus()
+  }, [checked, divId])
+
+  return (
+    <div
+      id={divId}
+      className="flex items-center"
+      tabIndex={noSelected ? 0 : checked ? 0 : -1}
+      aria-checked={checked}
+      role="radio">
+      <input
+        id={inputId}
+        type="radio"
+        disabled={disabled}
+        value={value}
+        name={name}
+        className="hidden peer"
+        onChange={onChange}
+        checked={checked}
+        aria-checked={checked}
+      />
+
+      <label htmlFor={inputId} className="group flex items-center">
+        <span
+          className={`w-6 h-6 inline-block rounded-full border-2 border-base
+          peer-checked:group-[]:bg-primary
+          peer-checked:group-[]:border-blue-500
+          peer-checked:group-[]:ring-white
+          peer-checked:group-[]:ring-inset
+          peer-checked:group-[]:ring-4`}
+        />
+        {label ? <p className="text-base text-medium leading-6 ms-2">{label}</p> : ''}
+      </label>
+    </div>
+  )
+}
+
+const radioGroupVariants = cva(['flex gap-3'], {
+  variants: {
+    variant: {
+      default: 'flex-col',
+      inline: 'flex-row',
+    },
+    fullWidth: {
+      true: 'w-full',
+    },
+  },
+  defaultVariants: {
+    variant: 'default',
+  },
+})
+
+export interface RadioGroupProps
+  extends VariantProps<typeof radioGroupVariants>,
+    React.InputHTMLAttributes<HTMLInputElement> {
+  disabled?: boolean
+  items: Omit<RadioProps, 'name'>[]
+  name: string
+}
+
+export const RadioGroup = ({
+  items,
+  variant,
+  name,
+  fullWidth,
+  disabled,
+  className,
+}: RadioGroupProps) => {
+  const checkedItem = useMemo(() => items.findIndex(item => item.checked), [items])
+  const [selected, setSelected] = useState(checkedItem)
+
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+    if (event.code === 'ArrowRight' || event.code === 'ArrowDown') {
+      event.preventDefault()
+
+      const nextIndex = (selected >= 0 ? selected + 1 : 1) % items.length
+      setSelected(nextIndex)
+    } else if (event.code === 'ArrowLeft' || event.code === 'ArrowUp') {
+      event.preventDefault()
+
+      const prevIndex = selected > 0 ? selected - 1 : items.length - 1
+      setSelected(prevIndex)
+    }
+  }
+
+  useEffect(() => {
+    const handleKeyPress = (event: KeyboardEvent) => {
+      if (selected === -1 && (event.code === 'Enter' || event.code === 'Space')) {
+        setSelected(0)
+      }
+    }
+
+    document.addEventListener('keypress', handleKeyPress)
+    return () => {
+      document.removeEventListener('keypress', handleKeyPress)
+    }
+  }, [selected])
+
+  return (
+    <div
+      tabIndex={-1}
+      className={cn(radioGroupVariants({ variant, fullWidth }), className)}
+      onKeyDown={handleKeyDown}
+      role="radiogroup">
+      {items.map((item, index) => (
+        <Radio
+          key={`key-${name}-${item.value}`}
+          {...item}
+          name={name}
+          disabled={disabled}
+          checked={selected === index}
+          noSelected={selected === -1 && index === 0}
+          onChange={() => setSelected(index)}
+        />
+      ))}
+    </div>
+  )
+}

src/manifest/chrome.json

@@ -1,33 +1,27 @@
 {
-    "name": "__MSG_appName__",
-    "version": "1.0.1",
-    "manifest_version": 2,
-    "description": "__MSG_appDescription__",
-    "icons": {
-        "34": "assets/icons/icon-34.png",
-        "128": "assets/icons/icon-128.png"
-    },
-    "default_locale": "en",
-    "content_scripts": [
-        {
-            "matches": ["http://*/*", "https://*/*", "<all_urls>"],
-            "js": ["content/content.js"]
-        }
-    ],
-    "background": {
-        "scripts": ["background/background.js"]
-    },
-    "permissions": ["tabs", "storage"],
-    "browser_action": {
-        "default_icon": "assets/icons/icon-34.png",
-        "default_title": "Web Monetization",
-        "default_popup": "popup/index.html"
-    },
-    "web_accessible_resources": [
-        "assets/*",
-        "content/*",
-        "options/*",
-        "popup/*",
-        "background/*"
-    ]
+  "name": "__MSG_appName__",
+  "version": "1.0.1",
+  "manifest_version": 2,
+  "description": "__MSG_appDescription__",
+  "icons": {
+    "34": "assets/icons/icon-34.png",
+    "128": "assets/icons/icon-128.png"
+  },
+  "default_locale": "en",
+  "content_scripts": [
+    {
+      "matches": ["http://*/*", "https://*/*", "<all_urls>"],
+      "js": ["content/content.js"]
+    }
+  ],
+  "background": {
+    "scripts": ["background/background.js"]
+  },
+  "permissions": ["tabs", "storage"],
+  "browser_action": {
+    "default_icon": "assets/icons/icon-34.png",
+    "default_title": "Web Monetization",
+    "default_popup": "popup/index.html"
+  },
+  "web_accessible_resources": ["assets/*", "content/*", "options/*", "popup/*", "background/*"]
 }

src/popup/Popup.tsx

@@ -1,7 +1,7 @@
-import React from 'react'
-
 import './Popup.scss'
 
+import React from 'react'
+
 import { RouterProvider } from '@/components/router-provider'
 
 const Popup = () => {

tailwind.config.ts

@@ -41,5 +41,5 @@ module.exports = {
       },
     },
   },
-  plugins: [],
+  plugins: [require('@tailwindcss/forms')],
 } satisfies Config