feat: add support for differing key and value (#233)

* feat: add support for differing key and value

* docs: update storybook

* fix: additional text
BREAKING: keep additionalText in options array

Author: ehsan-github

src/components/radio/radio-group.tsx

@@ -6,11 +6,15 @@ import Radio, { RadioProps } from './index';
 // Utils
 import randomString from '../../utils/randomString';
 
+export type RadioGroupOption = {
+  key: string;
+  text: string;
+  additionalText?: string;
+};
 export interface RadioGroupProps
   extends Omit<RadioProps, 'label' | 'onChange' | 'options' | 'value'> {
   value: string | null;
-  options: string[];
-  additionalTexts?: string[];
+  options: string[] | RadioGroupOption[];
   onChange: (value: string) => void;
   tooltipMessages?: {
     [key: string]: string;
@@ -22,7 +26,6 @@ const RadioGroup: FC<RadioGroupProps> = ({
   options,
   value,
   onChange,
-  additionalTexts,
   tooltipMessages = {},
   flexDirection = 'column',
   ...props
@@ -36,20 +39,24 @@ const RadioGroup: FC<RadioGroupProps> = ({
 
   const name = randomString();
 
+  const mappedOptions = options.map((val) =>
+    typeof val === 'string' ? { key: val, text: val } : val,
+  );
+
   return (
     <Flex flexDirection={flexDirection}>
-      {options?.map((option, idx) => (
+      {mappedOptions?.map(({ key, text, additionalText }) => (
         <Radio
           {...props}
-          key={option}
+          key={key}
           mt={flexDirection === 'column' ? 2 : 'initial'}
           mr={flexDirection === 'row' ? '20px' : 'initial'}
-          checked={value === option}
-          label={option}
+          checked={value === key}
+          label={text}
           name={name}
-          addtionalText={additionalTexts?.[idx]}
-          onChange={handleChange(option)}
-          tooltip={tooltipMessages[option]}
+          addtionalText={additionalText}
+          onChange={handleChange(key)}
+          tooltip={tooltipMessages[key]}
         />
       ))}
     </Flex>

src/components/radio/radio.stories.tsx

@@ -18,8 +18,12 @@ const GroupTemplate: Story<RadioGroupProps> = (props) => {
       value={value}
       onChange={setValue}
       mr="auto"
-      options={['nullable', 'required', 'email', 'url']}
-      additionalTexts={['text1', 'text2', 'text3', 'text4']}
+      options={[
+        { key: 'nullable', text: 'nullable', additionalText: 'text1' },
+        { key: 'required', text: 'REQUIRED', additionalText: 'text2' },
+        { key: 'email', text: 'email' },
+        { key: 'url', text: 'url' },
+      ]}
     />
   );
 };
@@ -56,7 +60,7 @@ Group.argTypes = {
   },
   options: {
     type: {
-      summary: 'Array of strings',
+      summary: 'Array of strings or Array of { key, text }',
       required: true,
     },
   },

src/index.ts

@@ -263,7 +263,8 @@ export type { ITheme, IThemeColors, IThemeIconSizes } from './theme/types';
 export type TooltipProps = import('./components/tooltip').TooltipProps;
 export type BadgeProps = import('./components/badges').BadgeProps;
 export type SliderProps = import('./components/slider').SliderProps;
-export type RangeSliderProps = import('./components/range-slider').RangeSliderProps;
+export type RangeSliderProps =
+  import('./components/range-slider').RangeSliderProps;
 export type EditableSelectProps =
   import('./components/editableSelect').EditableSelectProps;
 export type Select2Props = import('./components/select2').SelectProps;
@@ -290,6 +291,11 @@ export type { CardHeaderProps } from './components/card-header';
 export type { FileSystemExplorerProps } from './components/file-system-explorer';
 export type { FileExplorData } from './components/file-system-explorer/types';
 export type { GetIconProps } from './components/icon/GetIcon';
+export type { RadioProps } from './components/radio';
+export type {
+  RadioGroupProps,
+  RadioGroupOption,
+} from './components/radio/radio-group';
 
 // Rebass components
 export { Flex, Box } from 'rebass';