Help make examples

[downshift-js]

Help make examples

[rezof]

will work on the basic example

[jtmthf]

I'll start with an Apollo example

[souporserious]

Some more inspo:

I'm going to try and do one like above this weekend.

[mikeplis]

@kentcdodds I've got a WIP example of a date picker built with Downshift: https://codesandbox.io/s/nwk52x9qo0

I have a few tweaks I'd like to make, but is there anything in particular you want me to clean up before I submit a PR?

[kentcdodds]

I could work on a Spectre.css example.

That would be amazing! Let's do it!

[davidnguyen11]

Hi @kentcdodds

I am going to make example with material style

[divyenduz]

I can setup and example with axios and GitHub search API

[erikfox]

Going to get familiar with the existing code by making an example using our web API ;)

[erikfox]

I have just learned we recently auth_token'd the last of our (previously) open endpoints. 😞

Will come up with another example.

[souporserious]

Going to try an example like this soon

source

[CompuIves]

Wow collections sounds like a great feature and not too hard to make! That's a very nice way for users to curate examples and content to show to others, nice idea! For now you can add the sandboxes to the git repo and use CodeSandbox import from git. This way everyone can edit the git and the changes are automatically reflected on the sandbox. Sadly it isn't possible yet to add tags to git sandboxes, I'm working on this. You can already search on git repo on the search as alternative.

…

On Fri, Jul 28, 2017, 00:21 Kent C. Dodds ***@***.***> wrote: @jtmthf <https://github.com/jtmthf>, good point. Though we're in the same situation either way... It might be better to have a specific curated list that we as maintainers can manage. I wonder if @CompuIves <https://github.com/compuives> could eventually add the idea of "Collections" and we could link to a collection of examples 🤔 For now, let's just do everything in codesandbox, and maybe we can add a list of links to the README and keep that up to date ourselves. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#1 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAj1CNDcDJ6QV2EZkW9ncB32k0dKod9Vks5sSMcQgaJpZM4Oi6Dr> .

[souporserious]

sounds great 👌 also, I might take a stab at the Twitter example this weekend 😉

[zsid]

genie looks fun. I will have a go over the weekend. 😄

[kentcdodds]

I've updated the Examples section. Please make a PR to that section when you've made your example.

[kentcdodds]

Hey everyone! 👋

~/Developer/downshift (master)
🏎  $ npm publish --tag rc
+ [email protected]

I need your help now! The library now has 100% code coverage and is ready to move forward! The first release candidate has been released. I think that the API is solid now and I'd love some feedback on things. Please build some examples and let me know what could be improved!

Please install the latest rc:

npm install downshift@rc

Or fork this codesandbox and create your own examples! Thanks!

[davidnguyen11]

sure I will update example & do some more :). Good job @kentcdodds !!!

[agirton]

@kentcdodds sent a PR #157 with new examples 😄

[kentcdodds]

is the intention here to implement the examples in the react-autocomplete repo (Async, static data etc.) using autocompletely instead?

What would be amazing would be to basically recreate a component that simulates their API using react-autocompletely, then to copy their examples directly if possible.

[geoffdavis92]

I could work on a Spectre.css example.

Or would we strictly be sticking with JS/React autocomplete implementations? (the Spectre component is CSS-only)

[souporserious]

How do you feel about a Dropdown as well as a Select? Maybe even a name change could help open up more possibilities? I feel like there is a lot of other potential here. Here are some examples I started sketching out. Let me know what you think and I would be happy to submit a PR.

This may be jumping the gun.. but what if this repo had a packages folder that we could stuff these components in and publish to NPM?

[kentcdodds]

Happy to entertain a name change in another issue.

You're right, maybe we should user lerna here. I've never used it before, but this seems like a great use case!

[Corjen]

Sorry, pressed the wrong button there 😄

How do you see the react-select example? Do you mean displaying them side-by-side to compare the difference in API's? I've used react-select a lot, so that would be a nice one for me to start with.

[davidnguyen11]

Ok I will do examples

[kentcdodds]

@Corjen

How do you see the react-select example? Do you mean displaying them side-by-side to compare the difference in API's? I've used react-select a lot, so that would be a nice one for me to start with.

Not side-by-side. If someone wants to see them side-by-side they can open up another tab (we could even provide a link). But making that example page look identical to the react-select example page would be pretty cool.

[kentcdodds]

@nndung179,

Ok I will do examples

Which example will you work on? We want to avoid people working on the same thing.

[Corjen]

@kentcdodds cool! Will give it go this weekend. Would you be okay with giving some feedback when the first example is done so that I know that I'm going in the right direction?

[kentcdodds]

Absolutely. Thanks @Corjen!

[kentcdodds]

Fantastic 🎉

[kentcdodds]

Hey folks! 👋 now that we've released a beta version, it's much easier to make examples. Now you can make them right in the browser 🎉 (thank you @CompuIves!!!)

So, if you've made an example already, would you mind forking this example: http://kcd.im/rac-example and updating it to your example? Then give it a good title and description and add the react-autocompletely:example tag That way it shows up in this search

I'll add a link to that in the README so folks can go see all the awesome examples you all make. Thanks!!!

[karanjthakkar]

If anyone has any ideas for examples but are hard pressed on time, I'd love to pick those up.

[kentcdodds]

Here are some ideas. Try reimplementing components from the following libraries:

• semantic-ui
• react-autocomplete
• react-select (I think someone may be working on this one)

I expect there are others... :)

[karanjthakkar]

I can work on this: https://reactcommunity.org/react-autocomplete/managed-menu-visibility/ if no one already is.

[kentcdodds]

Sounds great 👍

[jtmthf]

@kentcdodds For future examples, do you prefer for them to be in code sandbox only or do you also want them here? Downside to code sandbox is that some examples might get out of sync as the API changes if their original authors don't update them.

[kentcdodds]

@jtmthf, good point. Though we're in the same situation either way...

It might be better to have a specific curated list that we as maintainers can manage. I wonder if @CompuIves could eventually add the idea of "Collections" and we could link to a collection of examples 🤔

For now, let's just do everything in codesandbox, and maybe we can add a list of links to the README and keep that up to date ourselves.

[kentcdodds]

If someone wants to do that I'm fine, but I think that long-term collections would be better so I'm happy to manually maintain a list on the repo until collections exist 😄

[souporserious]

Are you cool with leaving Next in there or some sort of way to test out examples in a dev environment? I found it helpful when changing API's and what not so I could test real quick.

[kentcdodds]

Who wants to make this with react-autocompletely? 😄

[kentcdodds]

Are you cool with leaving Next in there or some sort of way to test out examples in a dev environment? I found it helpful when changing API's and what not so I could test real quick.

Yes, we can do it for that purpose 👍 Though maybe we should clean it up to only have a few. And we should update the README to indicate the new purpose of that project.

[kentcdodds]

Another fun one would be to make an implementation of genie with react-autocompletely. Right now the demo is using angular 😉 I always wanted to add a "genies lamp" for react.

[kentcdodds]

There's been some breaking changes released. I've updated kcd.im/rac-example with the latest 😄 Thanks everyone!

[davidnguyen11]

@kentcdodds could I use styled-component to develop component style?

[kentcdodds]

Definitely. The example I liked to uses glamorous. You could just switch it to styled-components 😀

[zsid]

I am really sorry, I won't be able to complete the genie example this weekend as something has come up 😞 Genie looks great and if anyone wants to pick it up please feel free to do it.

[geoffdavis92]

@kentcdodds You want us to update the README? I have my SpectreCSS example (here)

Note: I was having some trouble with the Autocomplete.Menu component, so I copied the files from the /examples directory in the repo to get it working.

[kentcdodds]

Hey @geoffdavis92! Thanks for this! It looks like you're not using the latest react-autocompletely@beta but instead using a specific file in your sandbox. Would you be interested in updating it to the latest beta and adding it to the dependencies? (You can fork this)

[geoffdavis92]

@kentcdodds Sure thing, just updated. But it gives me an invariant violation. It doesn't seem to like the Autocomplete.Menu item.

[kentcdodds]

That was removed. Sorry, things change a lot around here until 1.0.0 is released. See the docs (use the controller). Thanks for any API feedback/help you can give us!

[geoffdavis92]

@kentcdodds Got it working. Do you allow non-contributors to edit the README? Otherwise my example link is here: https://www.codesandbox.io/s/M89KQOBRB

[kentcdodds]

Thanks! Yes, please open a pull request to the README 😀

[kentcdodds]

There's been a significant update! I've updated the README the base example.

Please give it a spin! I'm really excited about the flexibility of the new API! Thank you @jaredly for the inspiration here 🎉

[Corjen]

@kentcdodds great progress, love the new API! 🎉 Couldn't find the time this weekend, but just finished with the first react-select example, see https://codesandbox.io/s/JEKJXDJK

I only need to find a way to clear the input when the items prop changes, do you have any ideas on that? Also, would love some feedback!

[zsid]

Hey @kentcdodds,

Is that the expected behaviour to get isOpen from getInputProps and pass it to the component?

Love the new API! Great work! I have found it much much easier compared to the previous one as I gave a shot at Genie with the old one and it took me much more time to configure compared to now.

PS: your codesandbox example is tagged with react-kadabra 😄

[the-simian]

I've made an example here. Its based on material ui, thought it is a bit different from the existing material-ui example.
As soon as I get some clarity about how to clear selection (correctly), I'd like to submit that to the existing examples.

[kentcdodds]

Hey folks around here! There was a minor breaking change. Before the onChange handler accepted an object with a selectedItem property, now it is just passed the selectedItem property. See the README 😄

~/Developer/downshift (master)
🏎  $ npm publish --tag rc
+ [email protected]

[agirton]

Hi @kentcdodds 👋 , to help better understand the downshift API I built a redux version here: https://codesandbox.io/s/0o0w70lp8p does this look ok? I tried to keep it simple but also have some organization.

[kentcdodds]

That's great @agirton! Could you add it to the list of examples in the README? Thank you!

[kentcdodds]

OH WOWOWOWOWOWOWOWOWOW!! That's super awesome!

I'm amazed at how simple it is!

I think it could use some fancy styling. Also, if I could change the month/year for the available selection that'd probably be good too, but this is super cool. Thanks @MPLIS!

[wcastand]

we can't do thread to respond, that's a shame, i don't want to flood the conversation too much.
@MPLIS, maybe we could use okami to build the date picker with Downshift.

okami already use date-fns to handle date so must be pretty easy to implement :)

I don't know if that could be a simpler thing but maybe it's worth looking into it :)

really quick try here : https://codesandbox.io/embed/m7wrq8lj0y

[kentcdodds]

I still want examples, but I'm trying to clean things up so I'm going to close this issue.

Thanks everyone!