Add getReadableOptions helper for options

[nozomione]

Context

Epic: #366

Target branch: dev

In PR #321, we introduced helpers/getReadable and config/readable.

In this issue, we want to expand their usage across our codebase by adding a new helper function getReadableOptions.

This function will utilize getReadable to dynamically generate the appropriate data structure for rendering options (labels and values) in Grommet’s Select and RadioButtonGroup built-in components. This approach will reduce redundancy by eliminating the need for separate options definitions for each component and simplifying our implementation.

Problem or idea

Currently, we explicitly define an array of options objects for each Select and RadioButtonGroup, and pass them directly to the components.

e.g.) The current approach for the aggregation select dropdown is as follows:

//  The aggregation options explicitly defined in config/options
const options = { aggregation: [
    { label: 'Experiment', value: 'EXPERIMENT' },
    { label: 'Species', value: 'SPECIES' }
  ],
}

// AggregateOptions component
import { options } from 'config'; // import the options

export const AggregateOptions = () => (
  <Select
    labelKey="label"
    name={name}
    options={options.aggregation} // pass the options here
  />
);

e.g., ) The updated approach:

<Select
  labelKey="label"
  name={name}
  options={getReadableOptions(['EXPERIMENT', 'SPECIES'])} // returns the generated options
/> 

This helper will take an array of option names and return the corresponding options for Select which matches with the aggregation data structure in config/options.

Solution or next step

1. Add a new helper function getReadableOptions that utilizes getReadable to return the correct options format for Select and RadioButtonGroup
2. Replace the passed options prop with getReadableOptions for Select and RadioButtonGroup
3. Update config/readable to support the new implementation and clean up properties for Select and RadioButtonGroup in config/options