data-sources.tsx

// Registry entries with renamed controls
const inbuiltControls = [
  {
    name: 'OHRIText',
    component: OHRIText,
    type: 'text',
  },
  {
    name: 'OHRIRadio',
    component: OHRIRadio,
    type: 'radio',
  },
  {
    name: 'UISelectExtended',
    component: UISelectExtended,
    type: 'ui-select-extended',
  },
  
  // Include derived controls based on data source driven templates
  ...controlTemplates.map((template) => ({
    name: `${template.name}Control`, // Append "Control" to indicate it operates on datasources
    component: createControlFromTemplate(template),
    type: template.name.toLowerCase(), // Use a standardized type
  })),
];


// Define control templates with datasource-related names
const controlTemplates = [
  {
    name: 'drug',
    baseControl: 'ui-select-extended',
    datasource: ConceptDatasource,
    config: {
       conceptClass: 'Drug'
    }
  },
  // Add more templates for other controls
];

function getControlTemplate(string: name) {

}
 
// other names
dataSourceDrivenControlTemplates, controlTemplatesFactory etc.



// useDataSource hook

const { dataSource, config } = useDataSource(field);


function useDataSource(field) {
  
  const [config, setConfig] = useState();
  const [dataSource, setDataSource] = useState();

  useEffect(() => {
    if (field.questionOptions.datasource?.id) {
        // fetch ds by the registry getters
        setDataSource(ds);
        setConfig(field.questionOptions.datasource.config);
    } else {
       const template = getControlTemplate(field.questionOptions.rendering);
       // template.datasource
       // fetch ds by the registry getters
        setDataSource(ds);
        setConfig(template.config);

    }

  }, [field])

  return {
   config,
   dataSource
  }
}