Feature Request: Plugins for other component libraries

[Atif Ali]

It would be really nice if we can have the ability to load plugins that provide components from other libraries such as AntD or Materialize or react-bootstrap etc.

I actually forked and started converting all components to AntD, then realized a lot of the code is very generic. Would be awesome if there were just a few interfaces to implement to provide a component library and load as an npm module.

[Baptiste Adrien]

Thank for the suggestion! It would be awesome to have an agnostic core, we will think about it :)

[Tarun Kumar Sukhu]

Really innovative @shinework .
One possible suggestion could be to convert this to a set of libraries/packages so that it can be embedded in any application and extended / customized for their needs.
Something like

• core -> providing the core builder functionality with APIs to add editors
• chakra editor / code generator -> Chakra specific implementation of the builder (if possible have a editor/code gen spec)

This way you can have the community extend this as they want and only provide the specialized chakra implementation and maintain that as the core .

I was looking at https://webcodesk.com/, https://reactuibuilder.com/ but the developer experience the focus of openchakra looks a cleaner approach.

[beep]

I also found that OpenChakra has hard coded (chakraui related) symbols defined all over in multiple files,
which seems redundant, and makes it very difficult to add any new custom components to it.

So I took a chance to make the configuration centralized and thus a step towards making it easier to add new components or even a new UI library, although the inspectors are probably very chackraui specific.

This is very hackish and unfinished, but seems promising so far:

https://github.com/dsd-sztaki-hu/openchakra/tree/generalization

[beep]

After some heavy restructuring and refactoring I now have a version of OpenChakra, which works pretty much as @tsukhu suggested: there's a core "page builder", which can be configured with a ComponentDefinitions class, which provides the definition, configuration and the necessary inspectors of a specific UI toolkit, chakraui in this case. But you can see, that from here on it can be easily extended with custom components or replaced with another toolkit completely. (I could add some NativeBase components, which even work with the default style inspectors as well - the style inspectors can also be configured with ComponentDefinitions so that you can define what properties each inspector should set if the default style prop is not suffecient. Eg. bg instead of the default backgroundColor prop).

_app.tsx now looks something like this:

import {ComponentDefinitionsProvider} from "~contexts/component-definition";
import {chakrauiComponentDefDefaults, chakrauiComponentDefs} from "~chakraui/componentDefs";
import ComponentDefinitions from "~core/ComponentDefinitions";

const componentDefs = new ComponentDefinitions(chakrauiComponentDefs, chakrauiComponentDefDefaults)

const Main = ({ Component, pageProps }: AppProps) => (
  <BugsnagErrorBoundary>
    <ComponentDefinitionsProvider definitions={componentDefs}>
    <ChakraProvider resetCSS theme={theme}>
      <AppErrorBoundary>
        <Component {...pageProps} />
      </AppErrorBoundary>
    </ChakraProvider>
    </ComponentDefinitionsProvider>
  </BugsnagErrorBoundary>
)
export default initStore(componentDefs).withRedux(Main)