RadioGroup: migrate from reakit to ariakit (#55580)

* add all the things

* polish components & introduce types

* types: add property descriptions

* re-add deprecated flag

* improve story according to feedback/best practices

* `Radio`: re-add `@deprecated` flag

* fix story options

* radio: pass on `props` to `Button` explicitly

* add changelog entry

* types: fix typo

Co-authored-by: Marin Atanasov <8436925+tyxla@users.noreply.github.com>

* types: fix wording for `label`

Co-authored-by: Marco Ciampini <marco.ciampo@gmail.com>

* apply current practices to story

---------

Co-authored-by: Markus Dobmann <m.do@posteo.net>
Co-authored-by: Marin Atanasov <8436925+tyxla@users.noreply.github.com>

packages/components/CHANGELOG.md

@@ -6,6 +6,7 @@
 
 -   Migrate `Divider` from `reakit` to `ariakit` ([#55622](https://github.com/WordPress/gutenberg/pull/55622))
 -   Migrate `DisclosureContent` from `reakit` to `ariakit` and TypeScript ([#55639](https://github.com/WordPress/gutenberg/pull/55639))
+-   Migrate `RadioGroup` from `reakit` to `ariakit` and TypeScript ([#55580](https://github.com/WordPress/gutenberg/pull/55580))
 
 ### Experimental
 

packages/components/src/radio-group/context.tsx

@@ -0,0 +1,18 @@
+/**
+ * External dependencies
+ */
+// eslint-disable-next-line no-restricted-imports
+import type * as Ariakit from '@ariakit/react';
+
+/**
+ * WordPress dependencies
+ */
+import { createContext } from '@wordpress/element';
+
+export const RadioGroupContext = createContext< {
+	store?: Ariakit.RadioStore;
+	disabled?: boolean;
+} >( {
+	store: undefined,
+	disabled: undefined,
+} );

packages/components/src/radio-group/index.tsx

@@ -0,0 +1,65 @@
+/**
+ * External dependencies
+ */
+// eslint-disable-next-line no-restricted-imports
+import * as Ariakit from '@ariakit/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useMemo, forwardRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import ButtonGroup from '../button-group';
+import type { WordPressComponentProps } from '../context';
+import { RadioGroupContext } from './context';
+import type { RadioGroupProps } from './types';
+
+function UnforwardedRadioGroup(
+	{
+		label,
+		checked,
+		defaultChecked,
+		disabled,
+		onChange,
+		children,
+		...props
+	}: WordPressComponentProps< RadioGroupProps, 'div', false >,
+	ref: React.ForwardedRef< any >
+) {
+	const radioStore = Ariakit.useRadioStore( {
+		value: checked,
+		defaultValue: defaultChecked,
+		setValue: ( newValue ) => {
+			onChange?.( newValue ?? undefined );
+		},
+	} );
+
+	const contextValue = useMemo(
+		() => ( {
+			store: radioStore,
+			disabled,
+		} ),
+		[ radioStore, disabled ]
+	);
+
+	return (
+		<RadioGroupContext.Provider value={ contextValue }>
+			<Ariakit.RadioGroup
+				store={ radioStore }
+				render={ <ButtonGroup>{ children }</ButtonGroup> }
+				aria-label={ label }
+				ref={ ref }
+				{ ...props }
+			/>
+		</RadioGroupContext.Provider>
+	);
+}
+
+/**
+ * @deprecated Use `RadioControl` or `ToggleGroupControl` instead.
+ */
+export const RadioGroup = forwardRef( UnforwardedRadioGroup );
+export default RadioGroup;

packages/components/src/radio-group/radio.tsx

@@ -0,0 +1,55 @@
+/**
+ * WordPress dependencies
+ */
+import { forwardRef, useContext } from '@wordpress/element';
+
+/**
+ * External dependencies
+ */
+// eslint-disable-next-line no-restricted-imports
+import * as Ariakit from '@ariakit/react';
+
+/**
+ * Internal dependencies
+ */
+import Button from '../button';
+import { RadioGroupContext } from './context';
+import type { WordPressComponentProps } from '../context';
+import type { RadioProps } from './types';
+
+function UnforwardedRadio(
+	{
+		value,
+		children,
+		...props
+	}: WordPressComponentProps< RadioProps, 'button', false >,
+	ref: React.ForwardedRef< any >
+) {
+	const { store, disabled } = useContext( RadioGroupContext );
+
+	const selectedValue = store?.useState( 'value' );
+	const isChecked = selectedValue !== undefined && selectedValue === value;
+
+	return (
+		<Ariakit.Radio
+			disabled={ disabled }
+			store={ store }
+			ref={ ref }
+			value={ value }
+			render={
+				<Button
+					variant={ isChecked ? 'primary' : 'secondary' }
+					{ ...props }
+				/>
+			}
+		>
+			{ children || value }
+		</Ariakit.Radio>
+	);
+}
+
+/**
+ * @deprecated Use `RadioControl` or `ToggleGroupControl` instead.
+ */
+export const Radio = forwardRef( UnforwardedRadio );
+export default Radio;