feat: Storybook schematics #1582

isaacplmann · 2019-07-12T20:41:33Z

Please make sure you have read the submission guidelines before posting an PR

Please make sure that your commit message follows our format.

Example: fix(nx): must begin with lowercase

Current Behavior (This is the behavior we have today, before the PR is merged)

No way to add storybook to a workspace.

Expected Behavior (This is the new behavior we can expect after the PR is merged)

@nrwl/storybook is a set of schematics to programmatically scaffold storybook stories and cypress tests to a ui lib.

TODO: Add tests for all the schematics.

kbrilla · 2019-07-14T10:45:41Z

packages/storybook/src/schematics/storybook-configure/storybook-configure.ts

+function addStorybookTask(projectName: string): Rule {
+  return <any>updateWorkspace(workspace => {
+    workspace.projects.get(projectName).targets.add({
+      name: 'storybook',


what happens if we want multiple projects to have storybook? Won't we have a conflict here with the name? Btw. Should we have multiple storybooks per project or maybe only one for the whole workspace?

Sorry, I should have included more information on the goal of this PR. This schematic is set up to create an isolated storybook instance for a specific ui-lib. For large monorepos, having a single storybook instance would be un-manageable.

This line doesn't cause a conflict - it creates a storybook target for the individual lib (just like each lib has its own lint target). The run-command is set to point at the specific .storybook folder inside the lib (which only searches that lib for *.stories.ts files).

Ok, that does explain a lot. But using storybook only for tests is a bit of waste I think. It would be great to have option of adding different addons, like np storysource etc from some cli prompt when crating story.

I just integrated storybook in our company repo but went with one storybook per monorepo approach, but I see some benefits from usage per lib.

Have You tried how it works if u try to use affected? Does it run only required storybooks?

nx affected doesn't work well for the storybook target, because it runs the first one and the process never finishes to run the next one. It would make sense for a storybook-build target though. I haven't written that, but it would be pretty straight forward to add.

nx affected works great for the cypress e2e tests though. For each affected ui-lib, the storybook is launched, the cypress tests run, then all the processes end and the next e2e test target runs.

I would like to include more options for addons, that just hasn't made in this first pass. You'll always be able to go into each .storybook folder and make whatever customizations you want.

isaacplmann · 2019-07-15T12:39:10Z

Here's a bit more information on what these schematics are intended to generate.

Storybook portion:

.storybook folder inside of a ui lib
*.stories.ts file for each *.component.ts file declared inside that ui lib
A storybook builder target in the angular json for that ui lib that runs storybook (just for that lib)

Cypress integration:

A [ui-lib-name]-e2e app that runs cypress against the storybook for that lib
A *.spec.ts inside the e2e app for each *.component.ts file in the ui lib

isaacplmann · 2019-07-15T12:44:56Z

The overall goal is to make it quick and easy to run isolated ui tests on individual components using Cypress.

And as a side benefit, you get a storybook instance that you can use for other purposes.

packages/storybook/src/schematics/storybook-configure/storybook-configure.ts

packages/storybook/collection.json

FrozenPandaz · 2019-07-15T15:07:34Z

packages/storybook/src/schematics/cypress-configure/index.ts

+  };
+}
+
+function updateAngularJsonBuilder(


Hm.... I wonder if it would make sense to make devServerTarget and prodDevServerTarget options for @nrwl/cypress:cypress-project

Not in this PR

packages/storybook/src/schematics/cypress-configure/index.ts

packages/storybook/src/schematics/component-story/index.ts

packages/storybook/src/schematics/ng-add/ng-add.ts

FrozenPandaz · 2019-07-15T15:18:38Z

packages/storybook/src/schematics/ng-add/ng-add.ts

+    {},
+    {
+      '@storybook/angular': storybookAngularVersion,
+      '@storybook/addon-knobs': storybookAddonKnobsVersion,


This seems like some plugin... Should we let users add this for themselves if they want to?

I'm using this plugin for the core functionality of creating isolated cypress ui tests. Eventually, I'd like to give people the choice to include other plugins automatically.

packages/storybook/src/schematics/storybook-stories/index.ts

packages/storybook/src/utils/versions.ts

FrozenPandaz · 2019-07-15T15:40:36Z

So excited for Storybook integration! 🎉

vsavkin · 2019-08-06T15:30:33Z

@isaacplmann @FrozenPandaz hey folks, any update on this?

isaacplmann · 2019-08-06T19:13:18Z

@vsavkin The PR is almost there. I have a e2e test set up, but it keeps silently failing. When I try to manually recreate what the e2e test is doing, everything works as expected.

mehrad-rafigh · 2019-08-06T21:17:35Z

packages/storybook/src/utils/versions.ts

@@ -1,4 +1,4 @@
 export const storybookAngularVersion = '5.1.9';
-export const storybookAddonKnobsVersion = '5.1.9';
+export const storybookAddonKnobsVersion = '5.0.3';


Why can't we use the same version as storybookAngularVersion?
As well, can we update to 5.10.1?

ThomasBurleson · 2019-08-14T21:54:09Z

@isaacplmann - earlier you described the intent of these schematics:

Storybook portion:

.storybook folder inside of a ui lib
*.stories.ts file for each *.component.ts file declared inside that ui lib
A storybook builder target in the angular json for that ui lib that runs storybook (just for that lib)
Cypress integration:

A [ui-lib-name]-e2e app that runs cypress against the storybook for that lib
A *.spec.ts inside the e2e app for each *.component.ts file in the ui lib

I feel there is another important scenario:

The ability to generate a 1...n storybook apps which import storybook Modules for 1...n ui (or feature UI libraries). Having distinct Storybook apps would allow designers to quickly validate UI library components and feature UX.

Jordan-Hall · 2019-08-15T10:17:44Z

I've been using Storybook for NX for a bit now. Just never got around to writing the schematics. Personally, i feel this PR is too early to be considered complete and the requirements should be scoped out better before rushing into adding new features.

Rather than having multiple .storybook folders which you are required to configure each time. Would it not be better to add a root level folder which contains the global storybook and extend each UI library from the base config. I don't know about you but I also configure storybook with the same plugins

root => .storybook => config.js

import { withKnobs } from '@storybook/addon-knobs';

//import styles
import "`bootstrap";

addDecorator(withKnobs);

root => .storybook => plugins.js import '@storybook/addon-knobs/register';

ui-lib => .storybook => plugin.js import '../../../.storybook/plugins';

ui-lib => .storybook => config.js

import '../../../.storybook/config'

function loadStories() {
  const req = require.context('../', true, /\.stories\.ts$/);
  req.keys().forEach(filename => req(filename));
}


configure(loadStories, module);

isaacplmann · 2019-08-15T14:14:47Z

@ThomasBurleson
That's a great feature. I think I'll add that as a separate schematic in a future PR.

@Jordan-Hall
I really like that idea. That would make the storybook config more inline with the way cypress, jest, karma, etc are handled.

Thanks to both of you for giving some feedback. I'll put in some more work on this PR tomorrow.

kbrilla · 2019-08-15T14:28:31Z

I have such config in one of my playgrounds. Maybe I will try and make schematic. That would be a great lesson for me as well. W dniu czw., 15.08.2019 o 16:14 Isaac Mann <[email protected]> napisał(a):

…

@ThomasBurleson <https://github.com/ThomasBurleson> That's a great feature. I think I'll add that as a separate schematic in a future PR. @Jordan-Hall <https://github.com/Jordan-Hall> I really like that idea. That would make the storybook config more inline with the way cypress, jest, karma, etc are handled. Thanks to both of you for giving some feedback. I'll put in some more work on this PR tomorrow. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#1582?email_source=notifications&email_token=AFKBQQKOEFYN5KDSCI2V443QEVQF3A5CNFSM4ICQ6YG2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD4L5QRA#issuecomment-521656388>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AFKBQQNWT4TSE3FNOBGHF3TQEVQF3ANCNFSM4ICQ6YGQ> .

Jordan-Hall · 2019-08-16T10:50:32Z

@isaacplmann I've just noticed we don't have a build option, this PR only has a serve option. It would be good to add support to build the storybook in case we want to deploy it. At least for @ThomasBurleson suggestion of a global storybook. Maybe only offer support to build each lib where a pacakge.json exists.

Jordan-Hall · 2019-08-16T17:01:54Z

packages/storybook/src/schematics/configuration/files/.storybook/webpack.config.js

+  r = r.filter(rule => rule.test != '/\\.css$/');
+
+  // Make whatever fine-grained changes you need
+  r.push({


Think storybook should match every stylesheet nx supports. Also, do we require custom scss support? Under the hood, it uses angular cli which already has it supported

There's some conflict between the angular cli and storybook's webpack config that throws displays an error instead of your storybook content unless we do this custom webpack config workaround. See: storybookjs/storybook#3593

I haven't tried stylesheets other than css and scss.

Jordan-Hall · 2019-08-16T17:04:34Z

packages/storybook/src/utils/versions.ts

@@ -1,4 +1,5 @@
 export const storybookAngularVersion = '5.1.11';
 export const storybookAddonKnobsVersion = '5.1.11';
+export const storybookAddonKnobsTypesVersion = '5.0.3';


Why are default addons required? It's not needed to set it up manually so shouldn't be required to do it programmatically using schematics

I'm using the knobs addon in the auto-generated stories. That's probably the first addon most people will include.

Realistically, are there any usages that don't use knobs? I don't think it's a bad default.

Jordan-Hall · 2019-08-16T17:18:13Z

Just out of curiosity, and i cant wait to see this brought in. Are we not limiting ourselves with this approach to only angular. We also need to look at support react and I think something else needs to be done to get this to work

isaacplmann · 2019-08-16T17:19:41Z

@Jordan-Hall

Yes, we definitely want to add React support. I haven't started thinking about how to do that though. Any ideas?

Jordan-Hall · 2019-08-16T17:24:32Z

I've got a few ideas. It appears the only major difference is how you load/configure stories. Maybe for now just adding it as a required field for which framework to support.
import { configure } from '@storybook/react';

along with two extra npm packages react & react-dom

I've currently got your repository checked out looking at a builder for this. I was thinking we could clean up the .storybook folder as long as we pass in the project path.

isaacplmann · 2019-08-16T17:26:02Z

Nice. I do want to have a builder in place. Right now I'm working on extending a root configuration like you suggested.

Jordan-Hall · 2019-08-16T17:27:26Z

Which is fine because you may need project-specific configuration which would then require it's own .storybook like your working on now

Jordan-Hall · 2019-08-16T18:13:36Z

packages/storybook/src/schematics/configuration/root-files/.storybook/tsconfig.json

@@ -0,0 +1,5 @@
+{


This won't work. It's better not to have this base tsconfig. Your better off enforcing this into each individual app, otherwise, all stories will be included.

This is for running a global storybook that will pick up all stories in the monorepo

Jordan-Hall · 2019-08-16T18:15:23Z

packages/storybook/src/schematics/configuration/root-files/.storybook/config.js

@@ -2,10 +2,12 @@ import { configure, addDecorator } from '@storybook/angular';
 import { withKnobs } from '@storybook/addon-knobs';

 function loadStories() {


Is this for the global storybook? or is this for each individual to extend, If the answer is for individuals you should have this functionality in here

This is for running a global storybook that will pick up all stories in the monorepo

What about extending the base config for the individual one? Wouldn't a better option to add a new application in angular.json for the global storybook to run?

Adding a separate app would work, but the benefit of this .storybook folder configuration is that people who are used to running start-storybook from the command line will get the global storybook

Jordan-Hall · 2019-08-16T18:16:13Z

packages/storybook/src/schematics/configuration/lib-files/.storybook/config.js__tmpl__

+import { configure } from '<%= offsetFromRoot %>../.storybook/config';
+
+function loadStories() {
+  const req = require.context('../src/lib', true, /\.stories\.ts$/);


const req = require.context('../src/', true, /\.stories\.ts$/);
Think this would be better incase someone has an app level storybook

Sure, that's a good idea.

Jordan-Hall · 2019-08-16T20:25:01Z

@isaacplmann I think I can get a builder sorted for tomorrow night which should work depending on the framework you've selected. Would it be better to wait until after this is merged or should storybook come in as one?

Jordan-Hall · 2019-08-18T10:36:14Z

@isaacplmann How much longer until this will be ready to be merged in? I've got the basic builder working. Just adding all the other customization to allow more flexibility and then update the schematics and write the unit tests. Shouldn't take too much longer, but should add this is the first time working with the angular devkit.

angular.json

"storybook": {
          "builder": "@nrwl/storybook:storybook",
          "options": {
            "uiFramework": "@storybook/angular",
            "config": {
              "configFolder": "apps/rina-eas/.storybook"
            }
          }
        }

isaacplmann · 2019-08-18T10:43:30Z

My PR won't be merged before Monday certainly. And if you have a mostly working builder, it would be better to include that with this PR. Do you want to open a PR against my branch?

…

On Sun, Aug 18, 2019, 6:36 AM Jordan Hall ***@***.***> wrote: @isaacplmann <https://github.com/isaacplmann> How much longer until this will be ready to be merged in? I've got the basic builder working. Just adding all the other customization to allow more flexibility and then update the schematics and write the unit tests. Shouldn't take too much longer, but should add this is the first time working with the angular devkit. angular.json "storybook": { "builder": ***@***.***/storybook:storybook", "options": { "uiFramework": ***@***.***/angular", "config": { "configFolder": "apps/rina-eas/.storybook" } } } — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#1582?email_source=notifications&email_token=AAGSKQD66462B3MIQZJSCSDQFEQ2HA5CNFSM4ICQ6YG2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD4Q5C7Y#issuecomment-522310015>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAGSKQHGE6ORHTHZOKZ2VILQFEQ2HANCNFSM4ICQ6YGQ> .

Jordan-Hall · 2019-08-20T21:35:01Z

Hey,

So I builder has run into an issue when using storybook/angular. storybookjs/storybook#7207 We need to wait until version 5.2 come out. I'll work with 5.2 for now so it's ready on release

isaacplmann · 2019-08-26T13:11:03Z

@Jordan-Hall , can you share your in progress code? I have more time this week and can help work around the issue you ran into.

test: Add tests test: remove test chore: Move some schematics into @nrwl/angular test: fix tests chore: Add e2e test chore: Bump storybook versions chore: createTestUiLib takes a libName argument chore: configs extend root config fix: Remove custom scss loader feat: add storybook builder fix: generate documentation and fix linting chore: Builder tests passing

See: cypress-io/cypress#4042 (comment)

kristofdegrave · 2019-10-23T12:59:03Z

Any idea when this PR will merged and released? I'm looking forward on using this functionality in my projects.

isaacplmann · 2019-10-23T13:05:51Z

@kristofdegrave, @vsavkin is planning to review it soon, but he just got back from a conference so it might take him a bit.

vsavkin · 2019-10-23T17:07:42Z

e2e/storybook.test.ts

+          runCLI(
+            `generate @nrwl/storybook:configuration ${mylib2} --configureCypress --generateStories --generateCypressSpecs --no-interactive`
+          );
+          runYarnInstall();


Could you remove it and instead add storybook dependences to the list of dependencies we copy?

See copyMissingPackages

vsavkin · 2019-10-23T17:08:51Z

e2e/storybook.test.ts

+          runCLI(`generate @nrwl/angular:app ${myapp} --no-interactive`);
+
+          const mylib = uniq('test-ui-lib');
+          createTestUILib(mylib);


Since you don't use this library anywhere else, can you move from utils to tihs spec file?

vsavkin · 2019-10-23T18:34:25Z

packages/cypress/src/schematics/cypress-project/files/cypress.json

@@ -2,6 +2,7 @@
  "fileServerFolder": ".",
  "fixturesFolder": "./src/fixtures",
  "integrationFolder": "./src/integration",
+  "modifyObstructiveCode": false,


Why is this necessary?

Jordan-Hall · 2019-10-26T18:06:36Z

Did you add schematics for react as the builder supports it

isaacplmann · 2019-10-26T18:10:02Z

Working on that next

…

On Sat, Oct 26, 2019, 2:06 PM Jordan Hall ***@***.***> wrote: Did you add schematics for react as the builder supports it — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#1582?email_source=notifications&email_token=AAGSKQBR3LSGO7COS4SRCHTQQSBLDA5CNFSM4ICQ6YG2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOECKNVIQ#issuecomment-546626210>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAGSKQD42NJDEDPBU5S5B3DQQSBLDANCNFSM4ICQ6YGQ> .

github-actions · 2023-03-22T19:07:47Z

This pull request has already been merged/closed. If you experience issues related to these changes, please open a new issue referencing this pull request.

kbrilla reviewed Jul 14, 2019

View reviewed changes

FrozenPandaz requested changes Jul 15, 2019

View reviewed changes

isaacplmann force-pushed the storybook-schematics branch from 4448ff5 to 9c7ccba Compare July 26, 2019 17:17

mehrad-rafigh reviewed Aug 6, 2019

View reviewed changes

isaacplmann force-pushed the storybook-schematics branch from 1372b3b to 9893fc1 Compare August 16, 2019 16:53

Jordan-Hall reviewed Aug 16, 2019

View reviewed changes

isaacplmann force-pushed the storybook-schematics branch from 858ba16 to ae623f6 Compare August 16, 2019 19:18

vsavkin force-pushed the master branch 2 times, most recently from 3569a53 to 54d5826 Compare August 21, 2019 15:53

isaacplmann force-pushed the storybook-schematics branch 6 times, most recently from 926327b to 69e4534 Compare October 21, 2019 20:45

Isaac Mann added 14 commits October 22, 2019 08:40

feat(nx): storybook schematics

487ce18

chore(nx): move some schematics into @nrwl/angular

7c68f00

chore(nx): add e2e test

d88c80f

fix(nx): configuration schematic can run multiple times

c078085

feat(nx): component story format

7d20a38

docs(nx): update storybook docs

46dfff6

fix(nx): pin core-js dev dependency to ^2.6.9

866ea22

chore(nx): fix formatting

edf454c

chore(nx): match core-js version for web/storybook

c150458

chore(nx): remove storybook's angular dependencies

cdad0a8

chore(nx): modifyObstructiveCode to false in cypress.json

c87fe60

See: cypress-io/cypress#4042 (comment)

chore(nx): storybook tests --no-interactive

ee7a6c2

chore(nx): add storybook to e2e tests

6908d9b

isaacplmann force-pushed the storybook-schematics branch from 69e4534 to 6908d9b Compare October 22, 2019 12:43

chore(nx): reorder e2e tests

001b03f

vsavkin requested changes Oct 23, 2019

View reviewed changes

vsavkin merged commit 4d4ce9f into nrwl:master Oct 23, 2019

github-actions bot locked as resolved and limited conversation to collaborators Mar 22, 2023

		@@ -2,10 +2,12 @@ import { configure, addDecorator } from '@storybook/angular';
		import { withKnobs } from '@storybook/addon-knobs';

		function loadStories() {

feat: Storybook schematics #1582

feat: Storybook schematics #1582

Conversation

isaacplmann commented Jul 12, 2019

Current Behavior (This is the behavior we have today, before the PR is merged)

Expected Behavior (This is the new behavior we can expect after the PR is merged)

kbrilla Jul 14, 2019 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

isaacplmann commented Jul 15, 2019

isaacplmann commented Jul 15, 2019 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

FrozenPandaz commented Jul 15, 2019

vsavkin commented Aug 6, 2019

isaacplmann commented Aug 6, 2019

Choose a reason for hiding this comment

ThomasBurleson commented Aug 14, 2019 • edited Loading

Jordan-Hall commented Aug 15, 2019

isaacplmann commented Aug 15, 2019

kbrilla commented Aug 15, 2019 via email

Jordan-Hall commented Aug 16, 2019

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Jordan-Hall commented Aug 16, 2019

isaacplmann commented Aug 16, 2019

Jordan-Hall commented Aug 16, 2019

isaacplmann commented Aug 16, 2019

Jordan-Hall commented Aug 16, 2019

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Jordan-Hall commented Aug 16, 2019

Jordan-Hall commented Aug 18, 2019

isaacplmann commented Aug 18, 2019 via email

Jordan-Hall commented Aug 20, 2019

isaacplmann commented Aug 26, 2019

kristofdegrave commented Oct 23, 2019

isaacplmann commented Oct 23, 2019

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Jordan-Hall commented Oct 26, 2019

isaacplmann commented Oct 26, 2019 via email

github-actions bot commented Mar 22, 2023

kbrilla Jul 14, 2019 •

edited

Loading

isaacplmann commented Jul 15, 2019 •

edited

Loading

ThomasBurleson commented Aug 14, 2019 •

edited

Loading