Cli framework choice #4184

Keraito · 2018-09-16T13:20:24Z

Issue: Part of #1108

Added a --type -t flag to the storybook init command so users can manually choose which framework/template of Storybook to install. It takes a type parameter which (for now) needs to be an entry in lib/cli/lib/project_types.js. It also opens an inquirer when nothing is detected so that the user can choose one anyways if they like.

Example of providing type flag

Example of inquirer when undetected SB

All the options in the inquirer and the accepted types are extracted from lib/cli/lib/project_types.js. This way, when ppl add new frameworks to SB they don't have to make changes in the CLI either (f.e. the confusion in #4161) and it will be auto included.

Some issues/remarks:

Do people agree with adding this as a flag in such a way?
The keys/values in the project_types.js aren't really that descriptive. It's most likely that this will only be used on projects that are not compatible with SB, so most projects will be auto-detected anyways. But it might be vague what the difference is f.e. between REACT_PROJECT, REACT, and REACT_SCRIPTS.
Probably nice to add an option to the inquirer list that their project framework/type is not included, and then provide information like SB GH issues page if they really want it for their project?
Not sure how to efficiently test this.
The CLI folder is kinda getting cluttered, probably needs some structure soon 😅 .

Hypnosphi · 2018-09-16T15:31:25Z

lib/cli/lib/initiate.js

@@ -176,17 +157,83 @@ export default function(options, pkg) {
          "Please make sure you are running the `storybook init` command in your project's root directory."
        );
        paddedLog(
-          'You can also install storybook for plain HTML snippets with `storybook init --html` or follow some of the slow start guides: https://storybook.js.org/basics/slow-start-guide/'
+          'You can also install storybook for plain HTML snippets with `storybook init --type html` or follow some of the slow start guides: https://storybook.js.org/basics/slow-start-guide/'


I think those lines should be changed to something like "you can specify the project type explixitly via ..."

libetl · 2018-09-17T11:51:48Z

It looks good to me, but do can you write an unit test ?

libetl

But I would advise to write an unit test

igor-dv · 2018-09-18T13:38:14Z

@Keraito

I've found one more thing that should be changed:

ndelangen · 2018-09-18T15:31:18Z

💙💙💙💙💙💙💙💙💙💙💙💙💙💙💙
💙💛💙💙💙💛💙💛💙💛💙💛💛💛💙
💙💛💙💙💙💛💙💛💙💛💙💛💙💙💙
💙💛💙💙💙💛💙⁣💛💛💙💙💛💛💙💙
💙💛💙💙💙💛💙💛💙💛💙💛💙💙💙
💙💛💛💛💙💛💙💛💙💛💙💛💛💛💙
💙💙💙💙💙💙💙💙💙💙💙💙💙💙💙

this is cool @Keraito !

Keraito · 2018-09-18T16:31:39Z

@libetl Will see what I can do. As stated in the first comment, I'm not quite sure how to write a meaningful (unit) and efficient test for this. But I will see what I can do.

@igor-dv Thanks! Missed it somehow.

@ndelangen That actually took me ages to read correctly 🤔 More to come!

tomByrer · 2018-09-18T18:32:44Z

I like the 'inquirer'/ framework chooser.

codecov · 2018-09-20T09:02:46Z

Codecov Report

Merging #4184 into master will increase coverage by 0.14%.
The diff coverage is 15.78%.

@@            Coverage Diff             @@
##           master    #4184      +/-   ##
==========================================
+ Coverage   40.04%   40.19%   +0.14%     
==========================================
  Files         503      504       +1     
  Lines        5903     5916      +13     
  Branches      795      804       +9     
==========================================
+ Hits         2364     2378      +14     
+ Misses       3156     3151       -5     
- Partials      383      387       +4

Impacted Files	Coverage Δ
lib/cli/bin/generate.js	`0% <ø> (ø)`	⬆️
lib/cli/lib/detect.js	`13.46% <ø> (+13.46%)`	⬆️
lib/cli/lib/initiate.js	`0% <0%> (ø)`	⬆️
lib/cli/lib/project_types.js	`100% <100%> (ø)`
lib/cli/lib/latest_version.js	`0% <0%> (ø)`	⬆️
lib/cli/lib/helpers.js	`1.21% <0%> (+1.21%)`	⬆️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update c91d502...cba68c4. Read the comment docs.

Keraito · 2018-09-20T13:44:31Z

Updated with some unit tests.

ndelangen · 2018-09-22T23:39:22Z

Super awesome @Keraito 💪

igor-dv · 2018-09-27T07:32:38Z

@Keraito, I think you can fix the conflict and merge (don't forget to address my comment in some PR, though).

Keraito · 2018-09-27T15:22:15Z

Sounds good @igor-dv , do you have any idea who or how that screenshot was made so I can make a similar one?

ndelangen · 2018-09-27T22:54:34Z

Which screenshot?

Keraito · 2018-09-28T18:09:55Z

https://github.com/storybooks/storybook/blob/master/lib/cli/docs/getstorybook.png @ndelangen

igor-dv · 2018-10-02T12:05:22Z

Doesn't git history show something? I think you can print-screen it from whatever tool you want =)

pksunkara · 2018-10-08T07:36:50Z

@Keraito https://github.com/marionebl/svg-term. I used it for https://github.com/storybooks/vue-cli-plugin-storybook

wuweiweiwu

LGTM! NICE WORK 💯

Keraito · 2018-10-10T21:49:09Z

Resolved the merge conflicts

shilman

Super improvement!!! 🎖

shilman · 2018-10-10T22:41:35Z

lib/cli/lib/project_types.js

+  'polymer',
+  'mithril',
+  'riot',
+];


ember marko meteor?

Hmmm I just extracted this array to another file. Ember support wasn't present yet when I made this PR, but marko en meteor def should have been. I don't see them in the removed code either tho 😱 will add them I'm a few hours

shilman · 2018-10-11T00:19:26Z

@Keraito felt guilty about creating more merge conflicts so I resolved them for yuo (hopefully correctly)!

libetl · 2018-10-11T08:05:50Z

Good job, I think everything is ready, don't you ?

ndelangen · 2018-10-11T12:04:57Z

@shilman I assume you tested manually? If so go ahead and merge

ndelangen · 2018-10-11T12:05:14Z

This is great

Keraito · 2018-10-11T14:31:03Z

@shilman it wasn't that big of a deal, but thank you very much! 🙇‍♂️

Hypnosphi · 2018-10-12T22:53:46Z

Looks like this is the only thing left: https://github.com/storybooks/storybook/pull/4184/files#r224264956

Keraito added 6 commits September 14, 2018 02:18

Add CLI flag to choose SB framework to install

d20e1b3

Remove manual HTML CLI flag

d60900f

Update command for html sb

332cbbf

Prompt type inquirer when no project type is detected

355dae2

Make manual inquirer check more descripti e

a9ddc7e

Rewrite inquire promises for comprehensibility

2506564

Keraito added feature request cli labels Sep 16, 2018

Keraito requested review from Hypnosphi, ndelangen, shilman and stijnkoopal as code owners September 16, 2018 13:20

Keraito requested review from libetl, igor-dv, tmeasday and wuweiweiwu September 16, 2018 13:20

Merge branch 'master' into cli-framework-choice

d372b7e

Hypnosphi reviewed Sep 16, 2018

View reviewed changes

libetl approved these changes Sep 17, 2018

View reviewed changes

Keraito added 3 commits September 20, 2018 11:00

Change Undetected project feedback

c018d98

Extract supported frameworks and test

2f5a249

Test installed storybook checker

79d316a

Merge branch 'master' into cli-framework-choice

6c1a627

ndelangen approved these changes Sep 22, 2018

View reviewed changes

wuweiweiwu approved these changes Oct 9, 2018

View reviewed changes

ndelangen assigned ndelangen and Keraito Oct 10, 2018

Merge branch 'master' into cli-framework-choice

92c98a0

Keraito mentioned this pull request Oct 10, 2018

Rename CLI to sb #4345

Merged

shilman approved these changes Oct 10, 2018

View reviewed changes

Merge branch 'master' into cli-framework-choice

59c40d3

Add missing project types

cba68c4

shilman merged commit 7f7e549 into storybookjs:master Oct 13, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Cli framework choice #4184

Cli framework choice #4184

Keraito commented Sep 16, 2018

Hypnosphi Sep 16, 2018

libetl commented Sep 17, 2018 •

edited

libetl left a comment

igor-dv commented Sep 18, 2018

ndelangen commented Sep 18, 2018 •

edited

Keraito commented Sep 18, 2018

tomByrer commented Sep 18, 2018

codecov bot commented Sep 20, 2018 •

edited

Keraito commented Sep 20, 2018

ndelangen commented Sep 22, 2018

igor-dv commented Sep 27, 2018

Keraito commented Sep 27, 2018

ndelangen commented Sep 27, 2018

Keraito commented Sep 28, 2018

igor-dv commented Oct 2, 2018

pksunkara commented Oct 8, 2018

wuweiweiwu left a comment

Keraito commented Oct 10, 2018

shilman left a comment

shilman Oct 10, 2018

Keraito Oct 11, 2018

shilman commented Oct 11, 2018

libetl commented Oct 11, 2018

ndelangen commented Oct 11, 2018

ndelangen commented Oct 11, 2018

Keraito commented Oct 11, 2018

Hypnosphi commented Oct 12, 2018

Cli framework choice #4184

Cli framework choice #4184

Conversation

Keraito commented Sep 16, 2018

Example of providing type flag

Example of inquirer when undetected SB

Hypnosphi Sep 16, 2018

Choose a reason for hiding this comment

libetl commented Sep 17, 2018 • edited

libetl left a comment

Choose a reason for hiding this comment

igor-dv commented Sep 18, 2018

ndelangen commented Sep 18, 2018 • edited

Keraito commented Sep 18, 2018

tomByrer commented Sep 18, 2018

codecov bot commented Sep 20, 2018 • edited

Codecov Report

Keraito commented Sep 20, 2018

ndelangen commented Sep 22, 2018

igor-dv commented Sep 27, 2018

Keraito commented Sep 27, 2018

ndelangen commented Sep 27, 2018

Keraito commented Sep 28, 2018

igor-dv commented Oct 2, 2018

pksunkara commented Oct 8, 2018

wuweiweiwu left a comment

Choose a reason for hiding this comment

Keraito commented Oct 10, 2018

shilman left a comment

Choose a reason for hiding this comment

shilman Oct 10, 2018

Choose a reason for hiding this comment

Keraito Oct 11, 2018

Choose a reason for hiding this comment

shilman commented Oct 11, 2018

libetl commented Oct 11, 2018

ndelangen commented Oct 11, 2018

ndelangen commented Oct 11, 2018

Keraito commented Oct 11, 2018

Hypnosphi commented Oct 12, 2018

libetl commented Sep 17, 2018 •

edited

ndelangen commented Sep 18, 2018 •

edited

codecov bot commented Sep 20, 2018 •

edited