south-paw / storybook-addon-overview-angular Goto Github PK

Using the following config on an overview story (where no changelog is defined)...

story.add(
    'Overview',
    () => ({ template: `<my-cool-component>hello world! 🌎</my-cool-component>` }),
    {
        overview: {
            enabled: true,
            title: 'My Cool Component',
            filename: 'my-cool-component/my-cool-component.component',
            exportClass: 'MyCoolComponent'
        }
    }
);

will cause the following error in the OverviewComponent

You can put in showChangelog: false to the story config to work around it - but really there's a length check that's being run on an undefined in the OverviewComponent that should be fixed.

Errors are currently put into the console but if there are multiple it's hard to tell what story they're from.

A simple error component to render in place of the story would be useful to solve this.

If a stylesheet is provided in the story that changes the h1, h2, h3 ... etc tag font-size then the story starts to look a little wack. The same applies to tag margin, padding etc. of the tags.

OverviewComponent should provide a set of fixed defaults for these elements so the overview component doesn't get all malformed and unusable forcing people to add custom styles just for the overview.

Or just don't use normal HTML tags and style span and div elements to avoid conflicts on tags...

The properties in the OverviewComponent will fail to render the following for example (bad example by the way);

@Input()
public set myValue(value: number) {
  if (!isNaN(value)) {
    this._value = value;
  }

  this._value = 0;
}

when typedoc'd it will product something like this...

{
    "id": 1,
    "name": "value",
    "kind": 1,
    "kindString": "Accessor",
    "flags": {
        "isPublic": true,
        "isExported": true
    },
    "decorators": [
        {
            "name": "Input",
            "type": {
                "type": "reference",
                "name": "Input"
            },
            "arguments": {}
        }
    ],
    "getSignature": [
        {
            "id": 1,
            "name": "__get",
            "kind": 1,
            "kindString": "Get signature",
            "flags": {},
            "type": {
                "type": "intrinsic",
                "name": "number"
            }
        }
    ],
    "setSignature": [
        {
            "id": 1,
            "name": "__set",
            "kind": 1,
            "kindString": "Set signature",
            "flags": {},
            "parameters": [
                {
                    "id": 1,
                    "name": "value",
                    "kind": 1,
                    "kindString": "Parameter",
                    "flags": {},
                    "type": {
                        "type": "intrinsic",
                        "name": "number"
                    }
                }
            ],
            "type": {
                "type": "intrinsic",
                "name": "void"
            }
        }
    ],
    "sources": [
      {
        "fileName": "example.ts",
        "line": 1,
        "character": 1
      },
      {
        "fileName": "example.ts",
        "line": 1,
        "character": 1
      }
    ]
}

The OverviewComponent chokes on this as there's no type on the object

It needs to be able to support get/set members of the components and show them in the properties list

Hi,

I'm sorry if this is the wrong place to ask.
I'm currently working on a Storybook that shows not only documentation for our own custom components but also for Angular Material Components that we use. Our problem is that overview requires a filename or a component file but since we are using the Material Components, we do not have such files (at least not that I know).

Can someone help me getting the Overview addon to work with Material Components?

Thank you in advance.

It would be nice to match the styling of Overview (font family, colors) with the overall Storybook theme.

API proposal

addDecorator(withOverview({
  typedoc,
  theme: myTheme,
}));

To reproduce:

/**
 * An awesome button component for making buttons.
 *
 * Note that this comment has no tags... yeah well it'll crash.
 */
@Component({
    selector: 'my-button',
    templateUrl: './my-button.component.html',
})
export class MyButtonComponent {
    @Input()
    public label: string;
}

Simply missing an if check around the tags generater

I have @deprecated in TSDoc on one of my inputs.

It would nice to have input name striken-through.

Some inputs/outputs may be required for a component and it'd be useful to call these out in the overview's properties.

@ tags in the documentation block of a component have special sauce applied to them at the moment and should be swapped to use markdown syntax instead which would make links easier and allow for custom HTML elements in them as well.

For example, doc tags would allow the following after this change...

/**
 * my component doc
 *
 * @design_guidelines [The Design Guidelines](example.com)
 * @status <span class="badge warning">In Review</span>
 */

Change so that users can avoid addParameters in SB config and instead just get them to pass typedoc json to withOverview function, e.g.

...

import { withOverview, OverviewModule } from '../src';
import typedoc from '../typedoc.json';

addDecorator(withOverview(typedoc));
addDecorator(moduleMetadata({ imports: [OverviewModule] }));

...

and withOverview just needs to have a wrapped arrow function to receive the typedoc.

This does huge speed and performance gains on larger storybooks 🎉

Hi @South-Paw
I wonder if you have some time to take a look into the latest Storybook 6 alpha.

With their new ability to load custom MDX files, the new approach is to load a Table of Properties with a separate component, but I don't like that approach, it invades the Designer's Docs page with the stuff of Developers.

And even if I like your decorator, I think that the new version enables your module to offer a Panel to check the Properties. The panels are awesome without interfering with the format of the story shown inside the MDX file.

Thanks in advance!

I've gotten the addon working properly and that's amazing since it will take a lot of the panic out of my team when they see that the code they write should basically document itself. However, it seems like the SCSS for the addon isn't loading. The stylesheets are loaded, as I can see them in the Style Editor panel (Firefox) but it appears as though the :host declarations aren't parsing.

I've tried disabling a wrapping decorator I have, changing how it's loaded, adjust the config sass-loader, but all to no avail. I've attached a screenshot of what I'm seeing.

Storybook version: 5.2.5
Storybook-addon-overview-angular version: 1.0.1

Canvas area:

HTML output:

Sometimes you may want to document class attributes for a component, directive, module or service (particularly for services associated with storybook components i.e. MyIconRegistry)

Adding support for something like this may be useful.

Properties

className: get string

The class name applied to the DOM element

Text should be:

"This component doesn't have any inputs or outputs 😥"

Add check for .length !== 0 to avoid rendering the Inputs/Outputs when the component has none

One of my Inputs() is defined this way:

@input() selectedDate: string | Date | number;

In the generated documentation, it's getting described like this:

One of<
string,
reference,
number,

Would be cooler to see Date instead of 'reference'.

Hey,

Looks like new version (1.0.0) doesn't have index.js, but instead has index.ts.

Is this a mistake or does that mean that I need to change something in my setup to make it work?

Currently I just get "Module not found" errors.

This:

@Input() set selectedItems(selectedItems: T[])

breaks the documentation in properties.component.ts line 18, because param.type is equal to:

{
  elementType: {
     type: "typeParameter",
     name: "T",
  },
  name: "T"
}

when the code reaches for non-existent name key.