premieroctet / openchakra Goto Github PK

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

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?

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

Importing a custom theme JSON object would be really neat

Make the search component input sticky when user scrolls:

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

#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

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

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.

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.

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.

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

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

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

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?

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.

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.

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

Hey there,

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

Thanks!

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:

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

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!

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?

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

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:

❤️

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:

Would be great if Modal could be added.

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.

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

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.

I can only delete one element with the Del key.

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

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?

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.

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

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!

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! 👍

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.

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.

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)

Please consider adding support for HStack and VStack components.

Sbj.

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

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

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>

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.

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.

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