Slot fill example for extending the product screen in React

add-product-slot-fill-example.js

/**
 * External dependencies
 */
import { __ } from '@wordpress/i18n';
import { registerPlugin } from '@wordpress/plugins';
import { TextControl } from '@wordpress/components';
import {
	useFormContext,
	__experimentalWooProductTabItem as WooProductTabItem,
	__experimentalWooProductSectionItem as WooProductSectionItem,
	__experimentalWooProductFieldItem as WooProductFieldItem,
	__experimentalProductFieldSection as ProductFieldSection
} from '@woocommerce/components';

const TestFills = () => {
	const { getInputProps } = useFormContext();
	const inputFieldProps = getInputProps('test-field');
	return (
		<>
			<WooProductTabItem
				id="tab/test"
				templates={[{ name: 'tab/general', order: 2 }]}
				pluginId={'woocommerce'}
				tabProps={{ name: 'test_tab', title: 'Test Tab' }}
			>
				<WooProductSectionItem.Slot tab="tab/test" />
			</WooProductTabItem>
			<WooProductSectionItem
				id="tab/test"
				tabs={[{ name: 'tab/test', order: 1 }]}
				pluginId={'woocommerce'}
			>
				<ProductFieldSection
					id='section/test'
					title={__('Test section', 'woocommerce')}
					description={__(
						'Test section description.',
						'woocommerce'
					)}
				/>
			</WooProductSectionItem>
			<WooProductFieldItem
				id="field/test"
				section="section/test"
				sections={[{ name: 'section/test', order: 1 }]}
				pluginId={'woocommerce'}
			>
				<TextControl label="Test field" name={inputFieldProps.name} onChange={inputFieldProps.onChange} value={inputFieldProps.value} />
			</WooProductFieldItem>
		</>
	);
};

registerPlugin('wc-admin-product-editor-form-tab-testfills', {
	// @ts-expect-error 'scope' does exist. @types/wordpress__plugins is outdated.
	scope: 'woocommerce-product-editor',
	render: () => {
		return <TestFills />;
	},
});