premieroctet/openchakra

⚡️ Full-featured visual editor and code generator for React using Chakra UI

openchakra's Issues

Supprimer récursivement les composants

Lorsqu'on supprime un composant il faut aussi supprimer ses enfants récursivement

Feature request: Support for breakpoints and responsive styles

Thank you for creating this amazing app first of all, great work.

Any plans on supporting breaking points and responsive styles, so that we'd be able to configure, and also see, how the components would look on various devices?

Bug: BackgroundColor showing as a custom prop

Very self explanatory, but backgroundColor is showing up as a custom prop for some reason. You can reproduce this with the onboarding components.

feature request: Double click to edit text

Hi @PierreCrb !

Great work with OpenChakra! Love it.

One challenge I just noticed was that I'm unable to edit text in components when I double click the text.

Would be an interesting feature to add. I know this can be done by editing the text field on the right hand side panel. But would be even better to edit directly on the canvas.

Chakra UI v2 update

We need to update to Chakra UI v2 (that requires React 18)

• https://chakra-ui.com/getting-started/migration

Feature Request: Hovering children highlights them in the builder

If I hover over one of the children in the right panel I'd like to see it highlight the component in the builder.

Update to Chakra 1.0

Is there a timeline to update this tool to the latest Chakra version?

Duplicate Min H and Min W

In the UI it shows a duplicate 'Min H' and 'Min W', but I believe one should be 'Max H' and 'Max W', right?

Contributing link in the readme seems dead

https://github.com/premieroctet/openchakra/blob/master/CONTRIBUTING.md

Slider component

The slider component has been merged here: #30, however I don't see it on https://openchakra.app/

Can you guys push it to the public website?

Liens cassés vers la doc pour les composants nested

Exemple avec le composant AccordionHeader qui renvoie vers https://chakra-ui.com/accordionheader alors que la bonne adresse est https://chakra-ui.com/accordion

using zero-runtime or build time css solution.

I would like to thank first for this library.

Lately i started to see some runtime cost of having much complexly composed css. And also i saw this doc.

Please let me know if its possible to use something like compiled-css or linaria to remove that runtime.

I love this library so much that i like to contribute adding this feature.

Support for Modal

Would be great if Modal could be added.

[bug]: app crash when updating gradient background color

There is a bug when user wants to update the gradient background color from any component. The app breaks and users looses all his/her work. I attached a video of the bug:

Screen.Recording.2021-04-22.at.16.10.28.mov

Applications and motivation?

Hi @shinework - first, thanks to you and your team for making this, I first learned about it from HN a while ago. I have a general question - please let me know if you prefer discussing somewhere else.

What do you (the original Premier Octet team that created this tool) use this tool for, and how do you use it? For instance, do you have a designer on your team who mocks up screens (built using the design system components), and provide that as a starting point for developers, so that you reduce the handoff process? Or is this a tool that your developers as a substitute for writing the initial JSX/CSS?

What do you see as the main benefit you experienced from this tool?

I really believe in this space, but I would love to hear as much as you can share about your own perspective. Thank you!

How to add _hover property?

I want to render a different component on hovering on a component, how can I do that?

v1 or v0.x support?

Hi folks! great project!

just wanted to suggest that you could be clear about whether or not you support the upcoming 1.0 version or not.

thank you!

Feature Request: Show Parent link in Right Panel

Similar to how you already show Children, show Parent as well, so you can easily navigate upward in addition to downward. Also on hover, it would be nice to highlight/outline the parent.

Is openchakra being developed?

openchakra is a wonderful piece of software and would really be interested in #71, and to be able to easily extend it with custom components, but there seem to be no active development lately.

So, @shinework what is the status of openchakra? Can we expect new releases?

Feature Request: Plugins for other component libraries

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.

Feature Request: Store custom props in side panel

Sometimes I want to inject custom props into a component, however, the current system of the single box that doesn't show current custom props, only lets you add them, is difficult to use and hard to work with for a large project.

Could we do something like this, where we could see all of our custom props and have two text boxes for each prop:

❤️

Can only execute certain actions when I switch between tabs!

#102 and #103 can be partially solved doing the following:

if I am on openchakra.app then I do Del or Ctrl+Z then and switch between tabs then come back to openchakra.app I can do another Del or Ctrl+Z

Feature Request: Add typescript code generation.

Please add typescript support.
I see that this repo/OpenChakra is made using next.js and typescript and OpenChakra is really great and with typescript code generation, it will surely help a lot of people.

Feature Request: Save Components to Sidebar

I'd love to be able to save a component or group of component to the sidebar as a preset

Unable to recover lost elements (CTRL + Z/Y)

Hey guys, I'm unable to recover most of the elements that I change or delete with Ctrl+Z I can only do up to one level, but that's it, it won't let me recover more than one deleted element.

Switch from Block to Flex back to Block doesn't return to original layout

1. Open https://openchakra.app/?ref=producthunt
2. Select AvatarGroup
3. Switch Layout > Display to Flex
4. Switch Layout > Display back to Block

Expected: Returns back to how it was
Actual: Doesn't.

Also:

1. The code shows the extra Flex properties remain on the AvatarGroup.
2. Reproducible with any other Stack component as well.

feature request: Custom theme

Importing a custom theme JSON object would be really neat

Can only delete one element

I can only delete one element with the Del key.

Feature request: Move children between elements

It would be nice to be able to take some children from one element, and move them to a different element. This could include up/down the element tree.

Input Box Too Small For Size Panel

Hey there,

I'm trying to enter sizes, but I can barely see a single number. Is there something I'm doing wrong?

Thanks!

Bug Report: Custom Props shows props that are not custom or not set!

When clicking on a Stack with some properties set by the width + height text boxes, and looking at the Custom Props panel, and then adding a Custom Prop, non custom props, some with empty values show up!

Here's the local storage component tree for reproduction: https://pastebin.com/MFdt5tku

Here's a picture describing my error:

Option to remove extra padding from elements even in design mode?

If you switch from design mode to previewing the result, you'll see a possibly entirely different result.

I understand the padding is there for grabbability reasons, but it would be nice to be able to disable it.

Show custom components in the left menu #enhancement

Sbj.

Custom Props always quoted?

Hi,

I just started using OpenChakra and it's awesome, thanks for making it!

I was wondering if it was intended that all custom props are always quoted by default. This way it's not possible to insert pure javascript through curly brackets. My onClick functions always end up looking like onClick: "{doClick}" instead of onClick: {doClick}

Thanks for the attention,
Normen

State field not showing in display

Code / storybook export on GitHub repository

We're going to give the user the ability to connect to GitHub (thanks to https://github.com/nextauthjs/next-auth) and save its components in a repository. The user should be able to save the JSX code on a GitHub repo (we can also save the json). A storybook will be automatically created if the user has created some "named" components.

The repository should be easily publishable on services like Netlify / Vercel (CRA?).

The key idea behind these developments is to ease high level component creation/share (like https://tailwindui.com from tailwind css)

Can you start a patreon or a way to sponsor this project?

Openchakra is amazing. It's allowed me to speed up my workflow by multiple orders of magnitude. I've even begun using this for my actual work, and have been loving it!

However, I worry that this project may stop being mantianied or be forgot about, and to encourage and ensure its basic maintaining, I would love to support this project on OpenCollective or sponsor it or something else.

Is there anyway you could start a way for us to donate to this amazing project?

Migrate from CRA to Next.js

The next features will introduce server side operations (GitHub, login, repo synchronisation...) so we have to migrate on a fullstack framework, hello Next.js 👋

The goal of this issue is to simply migrate our actual CRA stack to Next.js. We need to move from Netlify to Vercel too.

Code generation bug

2021-01-19.16.13.15.mov

I am still very new to the project, so I’ll hardly be able to fix it myself

Feature Request: The ability to change the name of an element.

Copying and pasting makes UI development more rapid, but it would be nice if there was a way to change the name of a component so that you can effectively copy a named element.

[feature-request] Add zooming capability.

This is an awesome project. There's no doubt about it, this is where React should go next.

I am trying it out to build a small hobby project and I want to try out how easy it is to make responsive components. The issue is that the builder UI currently has no option to zoom the view port. Zoom is very important when we're trying to make components responsive from mobile to 4k screens. If I create a Box component with a dimension that's bigger than my screen, there's actually no way to preview it on openchakra without getting a bigger screen.

Thanks <3

Sticky search input

Make the search component input sticky when user scrolls:

Change items by dragging elements positions

First of all, thanks for creating OpenChakra! I'm using it right now and it feels nice. Although, I have a small suggestion to editor UX.

Right now I can only change items order using a right bar panel, but I'd like it to be an easier process, by just dragging it and it will automatically lock to a position.

The input field in the size is too small to see the value

As you can see in the image, even if you enter the height in the size input field of the component, you cannot see the value you entered because the width of the input field is very narrow.

Grid support

Grid along with flex has become core tools when it comes to designing pages. It would be super cool if support can be added for the standard grid properties in the layout section

Dragging a breadcrumb item or link break the app

Feature request: Add UnorderedList component

I think a nice addition would be to add the UnorderedList component.

BTW: thanks a lot for making this tool, it is really cool and useful! 👍

Can't put anything inside a TabPanel

1. Visit https://openchakra.app/
2. drag "Tabs (preset)" onto the grid
3. try to drag anything, e.g. Input, into the TabPanel that says "One !"
4. observe the new component getting inserted into TabPanels, not one TabPanel

    <Tabs size="md">
      <TabList>
        <Tab>One</Tab>
        <Tab>Two</Tab>
      </TabList>
      <TabPanels>
        <TabPanel>One !</TabPanel>
        <TabPanel>Two !</TabPanel>
        <Input />
      </TabPanels>
    </Tabs>

Add support for HStack and VStack

Please consider adding support for HStack and VStack components.

Several devDependencies added as dependencies

Several devDependencies have been added as runtime dependencies:

https://github.com/premieroctet/openchakra/blob/master/package.json#L15-L18
https://github.com/premieroctet/openchakra/blob/master/package.json#L36
https://github.com/premieroctet/openchakra/blob/master/package.json#L41-L42