ref(js): Remove unused RadioGroupRating (#51092)

static/app/components/radioGroupRating.spec.tsx

@@ -1,63 +0,0 @@
-import {render, screen, userEvent} from 'sentry-test/reactTestingLibrary';
-
-import {
-  RadioGroupRating,
-  RadioGroupRatingProps,
-} from 'sentry/components/radioGroupRating';
-
-const options: RadioGroupRatingProps['options'] = {
-  0: {
-    label: 'Very Dissatisfied',
-    description: "Not disappointed (It isn't really useful)",
-  },
-  1: {
-    label: 'Dissatisfied',
-  },
-  2: {
-    label: 'Neutral',
-  },
-  3: {
-    label: 'Satisfied',
-  },
-  4: {
-    description: "Very disappointed (It's a deal breaker)",
-    label: 'Very Satisfied',
-  },
-};
-
-describe('RadioGroupRating', function () {
-  it('render numerical labels', async function () {
-    const handleChange = jest.fn();
-
-    render(
-      <RadioGroupRating
-        name="feelingIfFeatureNotAvailableRating"
-        options={options}
-        onChange={handleChange}
-        label="How satisfied are you with this feature?"
-      />
-    );
-
-    expect(
-      screen.getByText('How satisfied are you with this feature?')
-    ).toBeInTheDocument();
-
-    expect(screen.getAllByRole('radio')).toHaveLength(Object.keys(options).length);
-
-    Object.keys(options).forEach((key, index) => {
-      expect(screen.getByText(index + 1)).toBeInTheDocument();
-      expect(
-        screen.getByLabelText(`Select option ${options[key].label}`)
-      ).toBeInTheDocument();
-
-      const description = options[key].description;
-      if (description) {
-        expect(screen.getByText(description)).toBeInTheDocument();
-      }
-    });
-
-    // Click on the first option
-    await userEvent.click(screen.getByLabelText(`Select option ${options[0].label}`));
-    expect(handleChange).toHaveBeenCalledWith('0');
-  });
-});

static/app/components/radioGroupRating.tsx

@@ -1,107 +0,0 @@
-import {useCallback, useState} from 'react';
-import {css} from '@emotion/react';
-import styled from '@emotion/styled';
-
-import {getButtonStyles} from 'sentry/components/button';
-import FieldGroup from 'sentry/components/forms/fieldGroup';
-import {FieldGroupProps} from 'sentry/components/forms/fieldGroup/types';
-import {t} from 'sentry/locale';
-import {space} from 'sentry/styles/space';
-
-type Option = {label: string; description?: string};
-
-export type RadioGroupRatingProps = Omit<FieldGroupProps, 'children'> & {
-  /**
-   * Field name, used in all radio group elements
-   */
-  name: string;
-  /**
-   * An object of options, where the label is used for the aria-label,
-   * the key is used for the selection and
-   * the optional description to provide more context
-   */
-  options: Record<string, Option>;
-  /**
-   * The key of the option that should be selected by default
-   */
-  defaultValue?: string;
-  /**
-   * Callback function that is called when the selection changes.
-   * its value is the key of the selected option
-   */
-  onChange?: (value: string) => void;
-};
-
-// Used to provide insights regarding opinions and experiences.
-// Currently limited to numeric options only, but can be updated to meet other needs.
-export function RadioGroupRating({
-  options,
-  name,
-  onChange,
-  defaultValue,
-  ...fieldProps
-}: RadioGroupRatingProps) {
-  const [selectedOption, setSelectedOption] = useState(defaultValue);
-
-  const handleClickedOption = useCallback(
-    (value: string) => {
-      setSelectedOption(value);
-      onChange?.(value);
-    },
-    [onChange]
-  );
-
-  return (
-    <FieldGroup {...fieldProps}>
-      <Wrapper totalOptions={Object.keys(options).length}>
-        {Object.entries(options).map(([key, option], index) => (
-          <OptionWrapper key={key}>
-            <Label
-              selected={key === selectedOption}
-              htmlFor={key}
-              onClick={() => handleClickedOption(key)}
-              aria-label={t('Select option %s', option.label)}
-            >
-              {index + 1}
-            </Label>
-            <HiddenInput type="radio" id={key} name={name} value={option.label} />
-            <Description>{option.description}</Description>
-          </OptionWrapper>
-        ))}
-      </Wrapper>
-    </FieldGroup>
-  );
-}
-
-const HiddenInput = styled('input')`
-  display: none;
-`;
-
-const Wrapper = styled('div')<{totalOptions: number}>`
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
-  margin-top: ${space(0.5)};
-  gap: ${space(1)};
-`;
-
-const OptionWrapper = styled('div')`
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-`;
-
-const Label = styled('label')<{'aria-label': string; selected: boolean}>`
-  cursor: pointer;
-  ${p => css`
-    ${getButtonStyles({
-      theme: p.theme,
-      size: 'md',
-      'aria-label': p['aria-label'],
-      priority: p.selected ? 'primary' : 'default',
-    })}
-  `}
-`;
-
-const Description = styled('div')`
-  text-align: center;
-`;