Comments (4)
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)
from openchakra.
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.
from openchakra.
Thank for the suggestion! It would be awesome to have an agnostic core, we will think about it :)
from openchakra.
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
from openchakra.
Related Issues (20)
- Dragging a breadcrumb item or link break the app
- Code generation bug HOT 1
- Show custom components in the left menu #enhancement
- Slider component HOT 1
- [feature-request] Add zooming capability.
- [bug]: app crash when updating gradient background color
- The input field in the size is too small to see the value HOT 1
- Feature request: Add UnorderedList component
- Feature Request: Add typescript code generation.
- Feature Request: The ability to change the name of an element.
- Is openchakra being developed?
- Grid support
- Input Box Too Small For Size Panel
- Chakra UI v2 update
- Sticky search input
- Support for Modal
- How to add _hover property?
- Add support for HStack and VStack
- Can't put anything inside a TabPanel HOT 2
- State field not showing in display HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from openchakra.