From e3ebbac07ecb75d8d3f561d1fbe7f49d09137b80 Mon Sep 17 00:00:00 2001
From: Tsu-ba-me <ynho.li.aa.e@gmail.com>
Date: Fri, 11 Nov 2022 18:26:40 -0500
Subject: [PATCH] fix(striker-ui): add RadioGroupWithLabel

---
 striker-ui/components/RadioGroupWithLabel.tsx | 74 +++++++++++++++++++
 striker-ui/types/RadioGroupWithLabel.d.ts     | 20 +++++
 2 files changed, 94 insertions(+)
 create mode 100644 striker-ui/components/RadioGroupWithLabel.tsx
 create mode 100644 striker-ui/types/RadioGroupWithLabel.d.ts

diff --git a/striker-ui/components/RadioGroupWithLabel.tsx b/striker-ui/components/RadioGroupWithLabel.tsx
new file mode 100644
index 00000000..54221029
--- /dev/null
+++ b/striker-ui/components/RadioGroupWithLabel.tsx
@@ -0,0 +1,74 @@
+import {
+  FormControl as MUIFormControl,
+  FormControlLabel as MUIFormControlLabel,
+  FormLabel as MUIFormLabel,
+  Radio as MUIRadio,
+  radioClasses as muiRadioClasses,
+  RadioGroup as MUIRadioGroup,
+} from '@mui/material';
+import { FC, useMemo } from 'react';
+
+import { GREY } from '../lib/consts/DEFAULT_THEME';
+
+import { BodyText } from './Text';
+
+const RadioGroupWithLabel: FC<RadioGroupWithLabelProps> = ({
+  formControlProps,
+  formControlLabelProps,
+  formLabelProps,
+  id,
+  label,
+  onChange: onRadioGroupChange,
+  radioItems,
+  radioProps: { sx: radioSx, ...restRadioProps } = {},
+  radioGroupProps,
+}) => {
+  const labelElement = useMemo(
+    () => (typeof label === 'string' ? <BodyText>{label}</BodyText> : label),
+    [label],
+  );
+  const itemElements = useMemo(() => {
+    const items = Object.entries(radioItems);
+
+    return items.map(([itemId, { label: itemLabel, value }]) => {
+      const itemLabelElement =
+        typeof itemLabel === 'string' ? (
+          <BodyText>{itemLabel}</BodyText>
+        ) : (
+          itemLabel
+        );
+
+      return (
+        <MUIFormControlLabel
+          control={
+            <MUIRadio
+              {...restRadioProps}
+              sx={{
+                [`&.${muiRadioClasses.root}`]: {
+                  color: GREY,
+                },
+
+                ...radioSx,
+              }}
+            />
+          }
+          key={`${id}-${itemId}`}
+          value={value}
+          label={itemLabelElement}
+          {...formControlLabelProps}
+        />
+      );
+    });
+  }, [formControlLabelProps, id, radioItems, radioSx, restRadioProps]);
+
+  return (
+    <MUIFormControl {...formControlProps}>
+      <MUIFormLabel {...formLabelProps}>{labelElement}</MUIFormLabel>
+      <MUIRadioGroup onChange={onRadioGroupChange} row {...radioGroupProps}>
+        {itemElements}
+      </MUIRadioGroup>
+    </MUIFormControl>
+  );
+};
+
+export default RadioGroupWithLabel;
diff --git a/striker-ui/types/RadioGroupWithLabel.d.ts b/striker-ui/types/RadioGroupWithLabel.d.ts
new file mode 100644
index 00000000..5845b7a2
--- /dev/null
+++ b/striker-ui/types/RadioGroupWithLabel.d.ts
@@ -0,0 +1,20 @@
+type RadioItem<RadioItemValue> = {
+  label: import('@mui/material').FormControlLabelProps['label'];
+  value: RadioItemValue;
+};
+
+type RadioGroupWithLabelOptionalProps = {
+  formControlProps?: import('@mui/material').FormControlProps;
+  formControlLabelProps?: import('@mui/material').FormControlLabelProps;
+  formLabelProps?: import('@mui/material').FormLabelProps;
+  label?: import('react').ReactNode;
+  onChange?: import('@mui/material').RadioGroupProps['onChange'];
+  radioProps?: import('@mui/material').RadioProps;
+  radioGroupProps?: import('@mui/material').RadioGroupProps;
+};
+
+type RadioGroupWithLabelProps<RadioItemValue = string> =
+  RadioGroupWithLabelOptionalProps & {
+    id: string;
+    radioItems: { [id: string]: RadioItem<RadioItemValue> };
+  };