[code components] Support custom property editors

[Janpot]

Summary

It's possible to create custom components, but unlike the built-in components, I can't create custom editors for properties. e.g. the built-in DataGrid has a custom UI for editing its columns.

Toolpad should support code components to supply their own property editors:

import { registerPropertyControl, createComponent } from '@toolpad/studio/browser'

registerPropertyControl('custom-control', function ({ value, setValue, disabled,... }) {
  return <input value={value} onChange={event => setValue(event.target.value)} disabled={disabled} ... />
})

export default createComponent(function () {
  // ...
}, {
  argTypes: {
    foo: {
      control: { type: 'custom-control' }
    }
  }
})

Examples

No response

Motivation

No response

Search keywords: custom property editor

[b4s36t4]

Would like to work on this, but stuck at understand what needs to be done here.a

What should we be doing here? When a user creates code-component we have to allow the user to specify the args via UI i.e componentpanel right now we do with pre-defined components?

or we should let the users type the code required for the components i.e monaco-editor
or we should make some UI changes to allow creating argsTypes while creating the components itself i.e CreateComponentModal?

[Janpot]

@b4s36t4 I think we'll need to think through the details a bit more first with the team. I'll likely work on an RFC in the coming weeks as a starting point. in the meantime it'd be helpful if you could share your use-cases for this feature,