Docz: Allow users to edit the playground examples

[fzaninotto]

Feature Request

The playground doesn't really allow to play. In order to fully discover a component, users like to manipulate them themselves.

Possible solutions

• Make code editable in playground (but watch out for errors)
• Add editable "knobs" to playground (see storybook knobs addon)

[pedronauck]

I'm thinking of creating something like knobs on <Playground>. Maybe something like that:

import { Playground } from 'docz'

<Playground knobs={{ name: 'text' }}>
  {({ values }) => (
    <Button onClick={() => console.log(values.name)}>
      Click me
    </Button>
  )}
</Playground>

This is simple and doesn't need any dependency, just a simple schema! The point here is how to attach behaviors on playground without coupling styles and get it flexible!

About make code editable, is another thing that I have some doubts!

[fzaninotto]

great solution, looking forward to it!

[fzaninotto]

As for making the playground code editable, maybe klipse is a good solution?

[pedronauck]

Great choice @fzaninotto

[pedronauck]

To facilitate user feedbacks and make a really good roadmap, now we're using Canny as a tool to create our roadmap 😍

We think that is better keep Github issues only for bugs and other issues! 🐞
This issue is already on our roadmap, so I'll close this issue in favor of it!

👉🏻 Check this issue on roadmap

[albinekb]

I think https://github.com/Microsoft/monaco-editor would be a nice editor to include.

[pedronauck]

Thanks to the tip @albinekb. Just to know, do you think that isn't a good thing have the roadmap on canny instead of github?

[fzaninotto]

I personally prefer GitHub. I don't want to open a new tool to see the roadmap, and I don't want to register to a new service just to do a 👍

[albinekb]

I prefer github too, then everyone can be here and comment, add interesting ideas or insights to an issue.

Easily see what's already voted for, subscribe to the issues and help with implementing things without needing to watch and learn more websites 👍

Also it feels less open source/inclusive with roadmap/new features in canny.

You can see how we used Github projects to track stuff in Kap https://github.com/wulkano/kap/projects/2

[pedronauck]

I agree with the issue of decentralization, but I find Github very limited as a roadmap tool. What was happening here is that issues were being inflated by the number of enhancements, it's very bad to manage that and this gives a sense of "project with many issues" to anyone who looks at the project for the first time.

Also it feels less open source/inclusive with roadmap/new features in canny.

This can be something bad, really. But how I told, I don't think that Github is a good roadmap tool, do you have maybe other tip or idea about that?

[albinekb]

I don't think it's too bad, look at how we're doing it in kap: https://github.com/wulkano/kap/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc
With the roadmap in github projects: https://github.com/wulkano/kap/projects/2

[pedronauck]

For sure, it's not the worst one, really. But I think that has better options for that and canny is one of them. The votes system, the way that you can track the tasks on the roadmap and the interface is so more clean and concise that Github!

Has another important point here, Canny give us a totally free account to support us because we're an open source project. For me, this is something awesome, companies with good products supporting open source making our projects better.

And to be honest, I don't see this like an impeditive, our roadmap is totally opened and anyone can post what's have in mind.

[albinekb]

Can't you keep the issues open in here as well, tag them with roadmap or something? 👍 I think having it in canny only will result in less contributions and more confused users

[pedronauck]

For sure, that's what we were doing at all. But this makes a non-real sense of many issues to solve for me, and I think that's is bad. Because every time that I need to see how many issues I have to fix I need to filter all issues, out of this things end up mingling. When I saw the board on Canny, I can see what people want instantly.

Assuming that I have ten feature requests here on Github, If I see what is the most voted I would need to enter in one by one and count all votes manually, this is so bad. I don't have time for that, unfortunately, I have a full-time job and I need to be quick when I doing things for docz 😕

I don't talk that I can't do what I do in Canny, the point here is that there's better than here to keep a concise roadmap.

[albinekb]

would need to enter in one by one and count all votes manually, this is so bad

You can sort on reactions:

I'm not interested in learning how canny works, I think it's really messy over there (as a github user, I feel lost), I would pick up issues here in github and help implement stuff, but when it's in canny it feels to disconnected and more effort required. But it's your project and I wish you the best for it going forward 🎉 Just my 5c is, I think it's more familiar and easier for users to navigate features in github rather than an external service 👍

[pedronauck]

I really appreciate your help @albinekb and the honest feedback, I don't think that docz is my project, at the moment that I gave it to the community I need to hear all people involved and to accomplish this goal that we made a partnership with Canny, because I think that I could have a more concise and clear feedback . So, we will try to keep both, making an official roadmap there, but all feature request that arises can be sent and discussed here in the first moment! What do you think about?

[albinekb]

Sounds great 🙌 Let's do it!

[edygar]

Just a little addition to the discussion: I really liked react-styleguidist way of doing it: lazy loading the Editor (requires clicking on "VIEW SOURCE" button) and it has the live edit. I've tried to see if it was available as an external dependency but it looks like out it is very tied to the solution as a whole, unfortunately