refactor(app): move react components to react codebase [EE-3179] (#6971)

app/react/components/form-components/ButtonSelector/ButtonSelector.module.css

@@ -0,0 +1,10 @@
+.group input {
+  display: none;
+}
+
+.group input:checked + label {
+  color: #fff;
+  background-color: #286090;
+  background-image: none;
+  border-color: #204d74;
+}

app/react/components/form-components/ButtonSelector/ButtonSelector.stories.tsx

@@ -0,0 +1,31 @@
+import { Meta } from '@storybook/react';
+import { useState } from 'react';
+
+import { ButtonSelector, Option } from './ButtonSelector';
+
+export default {
+  component: ButtonSelector,
+  title: 'Components/ButtonSelector',
+} as Meta;
+
+export { TwoOptionsSelector };
+
+function TwoOptionsSelector() {
+  const options: Option<string>[] = [
+    { value: 'sAMAccountName', label: 'username' },
+    { value: 'userPrincipalName', label: 'user@domainname' },
+  ];
+
+  const [value, setValue] = useState('sAMAccountName');
+  return (
+    <ButtonSelector<string>
+      onChange={handleChange}
+      value={value}
+      options={options}
+    />
+  );
+
+  function handleChange(value: string) {
+    setValue(value);
+  }
+}

app/react/components/form-components/ButtonSelector/ButtonSelector.tsx

@@ -0,0 +1,57 @@
+import clsx from 'clsx';
+import { PropsWithChildren, ReactNode } from 'react';
+
+import { ButtonGroup, Size } from '@@/buttons/ButtonGroup';
+
+import styles from './ButtonSelector.module.css';
+
+export interface Option<T> {
+  value: T;
+  label?: ReactNode;
+}
+
+interface Props<T> {
+  value: T;
+  onChange(value: T): void;
+  options: Option<T>[];
+  size?: Size;
+}
+
+export function ButtonSelector<T extends string | number>({
+  value,
+  onChange,
+  size,
+  options,
+}: Props<T>) {
+  return (
+    <ButtonGroup size={size} className={styles.group}>
+      {options.map((option) => (
+        <OptionItem
+          key={option.value}
+          selected={value === option.value}
+          onChange={() => onChange(option.value)}
+        >
+          {option.label || option.value.toString()}
+        </OptionItem>
+      ))}
+    </ButtonGroup>
+  );
+}
+
+interface OptionItemProps {
+  selected: boolean;
+  onChange(): void;
+}
+
+function OptionItem({
+  selected,
+  children,
+  onChange,
+}: PropsWithChildren<OptionItemProps>) {
+  return (
+    <label className={clsx('btn btn-primary', { active: selected })}>
+      {children}
+      <input type="radio" checked={selected} onChange={onChange} />
+    </label>
+  );
+}