Add search command (WIP)

[chrisforrette]

This is a work-in-progress PR to add an interactive search command to tink.

Usage:

• ./bin/tink.js search: Fully interactive package search
• ./bin/tink.js search "some search term": Auto-execute a search for the passed in terms.

Added dependencies:

• [email protected]
• [email protected]
• [email protected]

Todos:

• [x] Iron out input focus. There is currently a focus conflict between the text input for search terms and the select input for selecting matched packages for install in that they are both focused on, and when you hit "Enter" in the latter, both of them receive a submit action.
• [x] Handle CLI arguments. Currently all options from lib/common-opts.js are being passed into the Search component but aren't addressed at all. We may not need all/any of those options, and we should add options to be passable to NPM search.
• [ ] Integrate PackageView. This is being built by @larsgw and might happen after this PR, and would display package details when highlighting packages in search results.

[zkat]

FYI you'll need to accept https://github.com/npm/tink/pull/22 before I can merge this.

[chrisforrette]

@zkat Done!

[chrisforrette]

@zkat BTW, hoping to get to these changes this evening, sorry I've been a little slow...

[zkat]

You're fine! Take your time. We're not gonna be launching this until like next year so just take care of yourself first and foremost, and then if you have some time left over, go ahead and hack for fun <3

[chrisforrette]

@zkat Got a few updates besides the ones I've already commented on...

I've added an options object to the search command which is basically all of the libnpmsearch options, which are now being passed to the search call.

I am also trying to mimic your comment style now 😄 (I saw the CONTRIBUTING guide too late). Let me know if you'd like me go back and modify my commit messages.

Next I'm diving into that input focus thing—I have a good idea of user flow and might need to get a little hacky with it—and integrating the PackageView.

[zkat]

idea: Can we render things like a table? I think aligning the various elements will make it a lot more readable.

[larsgw]

I can make a PackageSummary to avoid obscuring the search select input and it jumping around given the relatively high and variable height of PackageView.

Maybe another command would be cool too, a full-screen (like htop/tig/man) terminal remake of the site. But that's definitely out of scope for this PR.

[chrisforrette]

@zkat Yea, I think rendering results in a table is a great idea. I'll see if I can compose components from ink-table and npm-select-input together to pull it off, but it might involve a custom franken-component.

@larsgw That sounds good—I assume you're thinking like a one-liner? I was originally thinking of putting it at the bottom of the matches list, but people might miss it if there are a lot of results.

[zkat]

How's it going with this?

[chrisforrette]

@zkat Good! Sorry for the radio silence.

I've been ironing out different states of searching to get them feeling right, and also being distracted by holiday busy-ness and such. After that I'm going to take a stab at displaying matching packages in a table view, but I'm thinking if it's less-than-straightforward, it might be better to put that into a follow-up PR if that's alright with you.

Same goes for the one-liner package view (displaying package info on one line when you highlight it). I'm not sure if this is something @larsgw is actively working on, or that I could/should work on, but it might be simpler in a separate PR.

[larsgw]

I haven't started on it yet, sorry for that. I was thinking of 3 lines of content, with maybe 2-3 lines of visual distinction (I like this one), but that's up to you.

[chrisforrette]

@larsgw No worries, you're not blocking me or anything. Let me know if you get started on it, and I'll do the same if I get to it first. Thanks!

[larsgw]

Just to make sure we don't do the same work twice: I made PR #38

[chrisforrette]

@larsgw Awesome, thanks!

[chrisforrette]

@zkat OK, I think this is ready for another look!

I think I ironed out the input focus stuff—I did a few tests with and without an initial term search, then deleting and entering a new search and it's feeling pretty good.

And I looked into using ink-table and it isn't a simple drop-in to use it for the selector. There's some pretty unique logic to render out the table, so I think to pull it off we would indeed need to make a franken-component out of it and ink-select-input. I'm down to build it, but I'd prefer to do it in a follow-up PR if that's cool.

And once #38 is good to go, I can drop it in over here.

Let me know what you think, thanks!

[zkat]

This looks great so far!

[chrisforrette]

@zkat Awesome, thanks!

For getting this merged, do you want the table display and the one-liner package description in place first?

[zkat]

@chrisforrette oh geez sorry it took so long to notice this again! No, I don't think table display is necessary yet, but I'd like to see more of a summary for each displayed package.

[chrisforrette]

@zkat No worries! I'll implement the PackageSearchResult component from @larsgw for the package summary once npm/tink#38 is merged.

[chrisforrette]

@zkat Btw, is there a real package installer I should use yet? I noticed lib/installer.js but it looks like that's installing everything from package.json. Should I add an addPackage method in there or something?

[SchneiderOr]

Hey guys any news about this feature? Would love to assist if any further help is needed

[chrisforrette]

@SchneiderOr I was waiting on #38 to implement here, I'll go nudge over there...

[chrisforrette]

@zkat Also I'm not sure if you saw my last comment, but is there a real install function I should wire up to this? Or should it remain nerfed?