Adding extra metadata to module/components #2526

alterx · 2017-12-20T22:18:06Z

Issue:

What I did

Added the ability to provide custom metadata to the story. This works, for example, when you need to include a service, a custom pipe or directive.

How to test

yarn bootstrap
cd examples/angular-cli
yarn storybook

codecov · 2017-12-20T22:30:32Z

Codecov Report

Merging #2526 into release/3.3 will increase coverage by <.01%.
The diff coverage is 0%.

@@               Coverage Diff               @@
##           release/3.3    #2526      +/-   ##
===============================================
+ Coverage        19.45%   19.45%   +<.01%     
===============================================
  Files              387      387              
  Lines             8734     8733       -1     
  Branches           944      941       -3     
===============================================
  Hits              1699     1699              
- Misses            6310     6332      +22     
+ Partials           725      702      -23

Impacted Files	Coverage Δ
addons/knobs/src/angular/helpers.js	`0% <0%> (ø)`	⬆️
app/vue/src/server/utils.js	`0% <0%> (-53.58%)`	⬇️
addons/actions/src/lib/retrocycle.js	`34.09% <0%> (ø)`	⬆️
app/react-native/src/preview/story_kind.js	`0% <0%> (ø)`	⬆️
lib/ui/src/libs/key_events.js	`22.22% <0%> (ø)`	⬆️
app/react/src/client/preview/element_check.js	`41.17% <0%> (ø)`	⬆️
addons/viewport/src/components/SelectViewport.js	`15% <0%> (ø)`	⬆️
lib/ui/src/modules/ui/components/shortcuts_help.js	`12.85% <0%> (ø)`	⬆️
addons/actions/src/lib/types/undefined/index.js	`38.46% <0%> (ø)`	⬆️
addons/info/src/components/types/ObjectType.js	`14.28% <0%> (ø)`	⬆️
... and 61 more

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 5966ae3...1f13274. Read the comment docs.

Signed-off-by: Carlos Vega <clmvega@gmail.com>

igor-dv

Is there some documentation that needs to be edited about how to use new features?
As one that is not familiar with most of the angular things (now better, but still =) ), I think it's very important to add descriptive and intuitive names of just everything. I would like to create some followup PR with a bit refactoring/renaming/separating things, will it be OK?

igor-dv · 2017-12-21T05:35:34Z

app/angular/src/client/preview/angular/components/app.component.ts

@@ -13,7 +13,8 @@ import {
  OnDestroy,
  EventEmitter
 } from "@angular/core";
-import { STORY, Data } from "../app.token";
+import { STORY } from "../app.token";
+import { Data } from "../types";

 @Component({
  selector: "my-app",


Maybe we can set a better selector name for the app component? "main-angular-app", "app-root" ... idk ...

We want these to be the same since they all hook into the same tag in the template.
I'm going to go with app-root

igor-dv · 2017-12-21T05:37:37Z

app/angular/src/client/preview/angular/components/error.component.ts

@@ -1,5 +1,6 @@
 import { Component, Inject } from "@angular/core";
-import { STORY, Data } from "../app.token";
+import { STORY } from "../app.token";
+import { Data } from "../types";

 @Component({
  selector: "my-app",


also here. maybe "error-root"

We want these to be the same since they all hook into the same tag in the template.
I'm going to go with app-root

igor-dv · 2017-12-21T05:44:21Z

app/angular/src/client/preview/angular/types.ts

+    moduleMetadata: NgModuleMetadata
+} 
+
+export type Data = {


Maybe you can give this one an intuitive name as well ? And can't we actually use the NgStory type ?

igor-dv · 2017-12-21T05:48:35Z

examples/angular-cli/src/stories/index.ts

@@ -20,28 +20,11 @@ import { Welcome, Button } from '@storybook/angular/demo';
 import { SimpleKnobsComponent } from './knobs.component';


I think we need to separate these examples into different stories like it's done in the react example. Surely not in this PR =)

Agreed. Back when we started with these the react example was this way, we surely need to update these too

igor-dv · 2017-12-21T05:51:05Z

examples/angular-cli/src/stories/index.ts

+      name: 'Static name'
+    },
+    moduleMetadata: {
+      imports: [],


Did you put here all the props in order to visually show all the options?

this is kinda documentation, but maybe add it to a real documentation too?

Yeah, they're just there to show you can actually add all of them

igor-dv · 2017-12-21T05:53:40Z

examples/angular-cli/src/stories/moduleMetadata/service.component.ts

+import { DummyService } from './dummy.service';
+
+@Component({
+  selector: 'simple-knobs-component',


simple-service-component ?

igor-dv · 2017-12-21T05:55:54Z

app/angular/src/client/preview/angular/helpers.ts

@@ -2,7 +2,8 @@ import {
  enableProdMode,
  NgModule,
  Component,
-  CUSTOM_ELEMENTS_SCHEMA
+  NgModuleRef,


Why do we need them, if they are not in use?

Yeah, you're right, I probably screwed the rebase :P

igor-dv · 2017-12-21T05:58:40Z

app/angular/src/client/preview/angular/helpers.ts

@@ -34,7 +36,9 @@ const debounce = (func, wait = 100, immediate = false) => {
  };
 };

-const getComponentMetadata = ({ component, props = {}, propsMeta = {}, pipes = [] }) => {
+const getComponentMetadata = (
+  { component, props = {}, propsMeta = {}, moduleMetadata }: NgStory


moduleMetadata = {} and you won't need to check it further?

- Changing main tag to a more meaningful name - Removing redundant type Data - Validating moduleMetadata param - Removing unused references Signed-off-by: Carlos Vega <clmvega@gmail.com>

…book into angular-module-metadata

alterx · 2017-12-21T15:58:46Z

@igor-dv after this one gets merged feel free to submit a PR to rename some stuff, these names were chosen on the go and now that we have a more feature complete product I think there's a lot of room for improvement in naming :)
Also, the types here are just scratching the surface and I added them mainly to keep some sanity while coding. There's a lot of room for improvement there, too.

@ndelangen @igor-dv how do we want to procede with documentation?

felipe-norato · 2017-12-21T16:17:38Z

I will try to help you, above all in docs.
I will use my personal profile @norato

igor-dv · 2017-12-21T16:23:27Z

There is an outdated demo gif

And it's used in all the apps (besides RN)... 😫

norato · 2017-12-21T16:28:13Z

@igor-dv I can improve this gif

igor-dv · 2017-12-21T16:30:49Z

@norato it will be very helpful

alterx · 2017-12-21T19:42:56Z

Perfect, guys. Is any of these things happening in this PR? 🤔 @norato @igor-dv

igor-dv · 2017-12-21T19:50:14Z

Nope. Just merge 👍

Adding extra metadata to module/components

82c1642

alterx added accessibility and removed accessibility labels Dec 20, 2017

alterx mentioned this pull request Dec 20, 2017

Angular - Add component story with dependencies #2514

Closed

Removing unused import

bc4af36

Signed-off-by: Carlos Vega <clmvega@gmail.com>

igor-dv reviewed Dec 21, 2017

View reviewed changes

ndelangen approved these changes Dec 21, 2017

View reviewed changes

ndelangen and others added 4 commits December 21, 2017 11:32

Merge branch 'release/3.3' into angular-module-metadata

3b5f291

Merge branch 'release/3.3' into angular-module-metadata

0e951a0

Igor's feedback

c367d96

- Changing main tag to a more meaningful name - Removing redundant type Data - Validating moduleMetadata param - Removing unused references Signed-off-by: Carlos Vega <clmvega@gmail.com>

Merge branch 'angular-module-metadata' of github.com:storybooks/story…

1f13274

…book into angular-module-metadata

igor-dv approved these changes Dec 21, 2017

View reviewed changes

ndelangen merged commit c97eaf9 into release/3.3 Dec 22, 2017

ndelangen deleted the angular-module-metadata branch December 22, 2017 00:19

shilman mentioned this pull request Dec 23, 2017

Angular 2 support #269

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Adding extra metadata to module/components #2526

Adding extra metadata to module/components #2526

alterx commented Dec 20, 2017

codecov bot commented Dec 20, 2017 •

edited

Loading

igor-dv left a comment •

edited

Loading

igor-dv Dec 21, 2017

alterx Dec 21, 2017

igor-dv Dec 21, 2017

alterx Dec 21, 2017

igor-dv Dec 21, 2017

igor-dv Dec 21, 2017 •

edited

Loading

alterx Dec 21, 2017

igor-dv Dec 21, 2017

ndelangen Dec 21, 2017

alterx Dec 21, 2017

igor-dv Dec 21, 2017

alterx Dec 21, 2017

igor-dv Dec 21, 2017

alterx Dec 21, 2017

igor-dv Dec 21, 2017 •

edited

Loading

alterx commented Dec 21, 2017 •

edited

Loading

felipe-norato commented Dec 21, 2017

igor-dv commented Dec 21, 2017 •

edited

Loading

norato commented Dec 21, 2017

igor-dv commented Dec 21, 2017

alterx commented Dec 21, 2017

igor-dv commented Dec 21, 2017

		@@ -20,28 +20,11 @@ import { Welcome, Button } from '@storybook/angular/demo';
		import { SimpleKnobsComponent } from './knobs.component';

Adding extra metadata to module/components #2526

Adding extra metadata to module/components #2526

Conversation

alterx commented Dec 20, 2017

What I did

How to test

codecov bot commented Dec 20, 2017 • edited Loading

Codecov Report

igor-dv left a comment • 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

Choose a reason for hiding this comment

Choose a reason for hiding this comment

igor-dv Dec 21, 2017 • 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

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

igor-dv Dec 21, 2017 • edited Loading

Choose a reason for hiding this comment

alterx commented Dec 21, 2017 • edited Loading

felipe-norato commented Dec 21, 2017

igor-dv commented Dec 21, 2017 • edited Loading

norato commented Dec 21, 2017

igor-dv commented Dec 21, 2017

alterx commented Dec 21, 2017

igor-dv commented Dec 21, 2017

codecov bot commented Dec 20, 2017 •

edited

Loading

igor-dv left a comment •

edited

Loading

igor-dv Dec 21, 2017 •

edited

Loading

igor-dv Dec 21, 2017 •

edited

Loading

alterx commented Dec 21, 2017 •

edited

Loading

igor-dv commented Dec 21, 2017 •

edited

Loading