Keyboard shortcuts and fuzzy search #141

ritz078 · 2016-04-22T18:38:23Z

Need to add some tests.

Current key bindings:
Ctrl + Shift + O => Open search box
Ctrl + Shift + L => Toggle left panel
Ctrl + Shift + B => Toggle bottom panel
Ctrl + Shift + F => Toggle Full screen view

Closes #59 and #121

arunoda · 2016-04-22T23:38:09Z

Okay. This is super.
One just UI change. Can you keyboard icon next to the logo and show the keymap.

arunoda · 2016-04-22T23:39:07Z

Shall we keep the current filter box as it is.

arunoda · 2016-04-22T23:45:34Z

src/client/ui/controls.js

@@ -194,4 +217,5 @@ StorybookControls.propTypes = {
  selectedStory: React.PropTypes.string,
  onKind: React.PropTypes.func,
  onStory: React.PropTypes.func,
+  syncedStore: React.PropTypes.object,


Hey, is there anyway we can use a function rather not passing the syncedStore.

Yes , we can. will do it.

arunoda · 2016-04-22T23:49:12Z

@mnmtanish Could you go on this as well.
It's always better if we some fresh eyes at this.

arunoda · 2016-04-23T02:20:30Z

@A few ideas:

Shall we use 'CMD' + 'SHIFT' in mac. Just like in Atom, ST2/3
Shall we use 'CMD + SHIFT + P' for lookup just like we used to do in Editors
In the full screen mode, still there's a margin around the preview. I hope we can remove that.
Add relevant metatags to support the full screen mode. (I mean to use browser tools to try with different viewport sizes)

I think, we can break this PR in multiple and then we can easily review this and pull into core. What do you think of dividing this PR into three:

Basic Keyboard Support (the logistics)
Full screen support + other minor keyboard command
Search box

Then we can review individual components and take them in quicker.

@ritz078 What do you think?

ritz078 · 2016-04-23T06:06:02Z

I will definitely add CMD support. And regarding separate PRs each functionality is dependent on other. ~~If i remove the full screen support , it will just remove 10 lines from code . So i will suggest it is kept this way.~~ I still have refactorings and improvements to do. So I have already written WIP in the title. Keep your ideas coming.

Edit : I am removing the full screen part from this PR.

ritz078 · 2016-04-23T06:08:46Z

There's no point in keeping a separate search box which can't search through stories. The two search boxes will differ in behaviour and that's not good. Even the editors don't have separate search bars because on small screens it takes considerable space. But I may be wrong.

arunoda · 2016-04-23T07:50:02Z

Okay. Let's remove other shortcuts from this as well.
Just work on the search.

Having the filter box is pretty important. Here's why:

We have a lot of stories (and a lot of kinds) in one of our app.
We need to use the left navigation panel. We are not looking for a jump to story functionality.
That's why we need the filter box.

ritz078 · 2016-04-23T07:51:21Z

I have already fixed all the other shortcuts so why remove them now ?

arunoda · 2016-04-23T07:51:54Z

Ah okay. Then fine.

ritz078 · 2016-04-23T07:53:52Z

You can even search for a kind and the results of that kind will come at a top with the name of the kind written to the right. Eventually, you land at a story anyways. Till now we were landing at the first story by default. There's nothing like a separate page for kind.

arunoda · 2016-04-23T07:56:18Z

Yes. true.
But that's not the case.
We don't need to search for every time we need to switch stories.
Just want to browse through the left panal.

Sometimes it's not just a single kind but some similar.

ritz078 · 2016-04-23T07:57:20Z

Cool. I will restore the filter .

arunoda · 2016-04-23T07:57:29Z

Let's keep the filter as it is.
If we think the jump to story is better after sometimes using it, let's remove the filter.
For now, let's keep it.

arunoda · 2016-04-23T07:57:56Z

Ha ha. You reply faster.
Cool. Thanks.

ritz078 · 2016-04-23T07:59:25Z

A suggestion for future : We can keep both kind and story filter. If you add a prefix like @ in search , you only filter the kinds and by default stories.

arunoda · 2016-04-23T08:48:26Z

@ritz078 That's good.

ritz078 · 2016-04-24T16:06:57Z

@arunoda have a look now.

arunoda · 2016-04-24T18:11:33Z

Cool. Will do a review tommorow morning for sure.

arunoda · 2016-04-25T00:06:25Z

Okay. This looks great.
But somehow, CMD + SHIFT + B is not working but CTRL + SHIFT + B is working.
Once you fixed it, I think we could merge it.

Note: Our UI is now kind a complex and it's with some adhoc design. I'm moving the codebase to Mantra specification within next 2 days. After that we may need to rework some stuff. (Possibly more testing)

ritz078 · 2016-04-25T06:10:54Z

If only CMD+SHIFT+B is not working then maybe some other software that is open uses that shortcut. The solution will be to change the shortcut but anyways no shortcut is safe.

Which browser and OS are you using ?

arunoda · 2016-04-25T07:25:52Z

I'm using Chrome on Mac.

ritz078 · 2016-04-25T09:17:28Z

I have checked and its working fine on chrome. Definitely, some other app is using that shortcut on app level.

I can change the shortcut but that may fail in someone else's computer if that is being used by some other software.

arunoda · 2016-04-25T14:33:24Z

That's fine. Let's keep it like this for now.

arunoda · 2016-04-25T14:33:30Z

I'll take this.

arunoda · 2016-04-25T23:16:57Z

Published this as: :v1.18.0

arunoda · 2016-05-05T09:49:44Z

Hi @ritz078,

I re-wrote the whole storybook again for a modular release. (did with `v1.20.0)
So, I couldn't get your code for fuzzy-search for that.
I had to do a release soon. (I don't like to ask other's PR to wait for this refactor)

I'm planning to do it by next-week. If you've some time I'm looking for your help.
Here's a doc about new Storybook Internals.

ritz078 · 2016-05-05T10:35:27Z

No problem. I am developing a separate fuzzy search component named react-fuzzy-search . I will integrate it once the tests for that are completed.

arunoda · 2016-05-05T23:50:23Z

@ritz078 that'sweet.

ritz078 added 4 commits April 22, 2016 01:41

started adding fuzzy search

e96f074

fuzzy searchbox now working

69155d3

added toggle screen shortcuts

27cc570

fixed tests

ed0f478

arunoda reviewed Apr 22, 2016
View reviewed changes

ritz078 added 2 commits April 23, 2016 12:57

removed fullscreen

2a519db

fixed keyboard shortcuts

9b05bb5

ritz078 added 7 commits April 23, 2016 14:51

brought back left filter

3ccce97

fixed tests

377e9cc

added modal containing keyboard shortcuts

6f22ac9

fix button styling

43cd8e0

added tests

7e29d64

fix tests

1d21153

fixed tests

ab52c45

ritz078 changed the title ~~Keyboard shortcuts and fuzzy search <WIP>~~ Keyboard shortcuts and fuzzy search Apr 25, 2016

arunoda merged commit ab52c45 into storybookjs:master Apr 25, 2016

ritz078 deleted the feat/fuzzy-search branch April 26, 2016 02:32

arunoda mentioned this pull request May 5, 2016

Implement Mantra Architecture #165

Merged

shilman added the misc label May 27, 2017

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Keyboard shortcuts and fuzzy search #141

Keyboard shortcuts and fuzzy search #141

ritz078 commented Apr 22, 2016 •

edited

arunoda commented Apr 22, 2016

arunoda commented Apr 22, 2016

arunoda Apr 22, 2016

ritz078 Apr 23, 2016

arunoda commented Apr 22, 2016

arunoda commented Apr 23, 2016 •

edited

ritz078 commented Apr 23, 2016 •

edited

ritz078 commented Apr 23, 2016

arunoda commented Apr 23, 2016

ritz078 commented Apr 23, 2016

arunoda commented Apr 23, 2016

ritz078 commented Apr 23, 2016

arunoda commented Apr 23, 2016

ritz078 commented Apr 23, 2016 •

edited

arunoda commented Apr 23, 2016

arunoda commented Apr 23, 2016

ritz078 commented Apr 23, 2016

arunoda commented Apr 23, 2016

ritz078 commented Apr 24, 2016

arunoda commented Apr 24, 2016

arunoda commented Apr 25, 2016 •

edited

ritz078 commented Apr 25, 2016 •

edited

arunoda commented Apr 25, 2016

ritz078 commented Apr 25, 2016 •

edited

arunoda commented Apr 25, 2016

arunoda commented Apr 25, 2016

arunoda commented Apr 25, 2016

arunoda commented May 5, 2016

ritz078 commented May 5, 2016

arunoda commented May 5, 2016

Keyboard shortcuts and fuzzy search #141

Keyboard shortcuts and fuzzy search #141

Conversation

ritz078 commented Apr 22, 2016 • edited

arunoda commented Apr 22, 2016

arunoda commented Apr 22, 2016

arunoda Apr 22, 2016

Choose a reason for hiding this comment

ritz078 Apr 23, 2016

Choose a reason for hiding this comment

arunoda commented Apr 22, 2016

arunoda commented Apr 23, 2016 • edited

ritz078 commented Apr 23, 2016 • edited

ritz078 commented Apr 23, 2016

arunoda commented Apr 23, 2016

ritz078 commented Apr 23, 2016

arunoda commented Apr 23, 2016

ritz078 commented Apr 23, 2016

arunoda commented Apr 23, 2016

ritz078 commented Apr 23, 2016 • edited

arunoda commented Apr 23, 2016

arunoda commented Apr 23, 2016

ritz078 commented Apr 23, 2016

arunoda commented Apr 23, 2016

ritz078 commented Apr 24, 2016

arunoda commented Apr 24, 2016

arunoda commented Apr 25, 2016 • edited

ritz078 commented Apr 25, 2016 • edited

arunoda commented Apr 25, 2016

ritz078 commented Apr 25, 2016 • edited

arunoda commented Apr 25, 2016

arunoda commented Apr 25, 2016

arunoda commented Apr 25, 2016

arunoda commented May 5, 2016

ritz078 commented May 5, 2016

arunoda commented May 5, 2016

ritz078 commented Apr 22, 2016 •

edited

arunoda commented Apr 23, 2016 •

edited

ritz078 commented Apr 23, 2016 •

edited

ritz078 commented Apr 23, 2016 •

edited

arunoda commented Apr 25, 2016 •

edited

ritz078 commented Apr 25, 2016 •

edited

ritz078 commented Apr 25, 2016 •

edited