DocsPage customization error in Angular

[dfagan2]

I'm trying to reproduce the DocsPage customization you guys pulled off in the config.js below, but for Angular: https://github.com/storybookjs/storybook/pull/7680/files#diff-e1df968bb7311b09ca002ef2869df4ee

...but I'm getting:

ERROR in ./.storybook/preview.js 111:11
Module parse failed: Unexpected token (111:11)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|   docs: function docs(_ref) {
|     var context = _ref.context;
>     return <DocsPage context={context} subtitleSlot={function (_ref2) {
|       var selectedKind = _ref2.selectedKind;
|       return "Subtitle: ".concat(selectedKind);
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js ./node_modules/@storybook/addon-docs/dist/frameworks/angular/config.js ./.storybook/preview.js ./node_modules/@storybook/addon-knobs/dist/preset/addDecorator.js ./.storybook/generated-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=true ./src/globalStyles.scss main[4]

A straight up docs: DocsPage works fine, but when I try to override it like shown in your code, it explodes. Is this possible with Angular?

At the end of the day, I'm just looking to include custom story-level markdown in the description or subtitle slots. So a tip on another approach would unblock me, but it would be nice to be able to granularly customize like that PR example aimed for.

System: OS: macOS Mojave 10.14.3 CPU: (8) x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz Binaries: Node: 10.9.0 - ~/.nvm/versions/node/v10.9.0/bin/node npm: 6.2.0 - ~/.nvm/versions/node/v10.9.0/bin/npm Browsers: Chrome: 79.0.3945.117 Firefox: 70.0.1 Safari: 12.0.3 npmPackages: @storybook/addon-backgrounds: ^5.3.2 => 5.3.2 @storybook/addon-docs: ^5.3.2 => 5.3.2 @storybook/addon-knobs: ^5.3.2 => 5.3.2 @storybook/addon-storysource: ^5.3.2 => 5.3.2 @storybook/addons: ^5.3.2 => 5.3.2 @storybook/angular: ^5.3.2 => 5.3.2 @storybook/source-loader: ^5.3.2 => 5.3.2

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[shilman]

Hey @dfagan2 sorry for the slow reply. Everything in the Docs rendering is implemented in React, so you should be able to override it in an Angular projects, but you'll have to use React elements to render the information. We haven't made an example for this yet, unfortunately.

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[shilman]

Here's the react example https://github.com/storybookjs/storybook/blob/master/examples/official-storybook/stories/addon-docs/addon-docs-blocks.stories.js

[dfagan2]

Thanks @shilman !

I'm still a little unsure how to translate that to an Angular Storybook though. Mirroring that example, I get the following error:

WARNING in ./stories/chapters/forms/TextInput.stories.ts 202:26
Module parse failed: Unterminated regular expression (202:26)
File was processed with these loaders:
 * ./node_modules/ts-loader/index.js
 * ./node_modules/@storybook/angular/dist/server/ngx-template-loader/index.js
 * ./node_modules/@storybook/source-loader/dist/server/index.js
 * ./node_modules/@storybook/source-loader/dist/server/index.js
 * ./node_modules/@storybook/source-loader/dist/server/index.js
You may need an additional loader to handle the result of these loaders.
|     parameters: {
|         docs: {
>             page: () => (/>
|                 < Subtitle /  >
|                 Custom)
 @ \.)(?=.)[^\/]*?\.stories\.ts\/?)$ (. sync ^\.\/(?:(?:(?!\.)(?:(?:(?!(?:|\/)\.).)*?)\/)?(?!\.)(?=.)[^\/]*?\.stories\.ts\/?)$) ./stories/chapters/forms/TextInput.stories.ts
 @ ./.storybook/generated-entry.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js ./node_modules/@storybook/addon-docs/dist/frameworks/angular/config.js ./.storybook/preview.js ./node_modules/@storybook/addon-knobs/dist/preset/addDecorator.js ./.storybook/generated-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=true ./src/globalStyles.component.scss

...for code:

textInput.story = {
  parameters: {
    docs: {
      page: () => (
        <>
          <Title />
          <Subtitle />
          <Description>Custom description</Description>
          <Props />
        </>
      )
    }
  }
};

[shilman]

@dfagan2 are you using the configureJSX: true option in the docs preset?

https://www.npmjs.com/package/@storybook/addon-docs#preset-options

[dfagan2]

@shilman I am, yeah, here is my main.js file:

const merge = require('webpack-merge');
const path = require('path');

module.exports = {
  stories: ['../**/*.stories.ts'],
  addons: [
    '@storybook/addon-backgrounds',
    '@storybook/addon-knobs',
    '@storybook/addon-storysource',
    {
      name: '@storybook/addon-docs',
      options: {
        configureJSX: true
      }
    }
  ],
  webpackFinal: async config => {
    config.module.rules.push({
      test: /\.stories\.[tj]sx?$/,
      loaders: [require.resolve('@storybook/source-loader')],
      enforce: 'pre'
    });

    const newLoader = {
      module: {
        rules: [
          {
            test: /\.(component|module)\.s(c|a)ss$/,
            use: [
              {
                loader: 'sass-resources-loader',
                options: {
                  // Provide path to the file with resources
                  resources: `${path.resolve(__dirname, '../../shared/styles/tokens/')}/**/*.scss`
                }
              }
            ]
          }
        ]
      }
    };

    const combinedConfig = merge.smartStrategy({
      'module.rules.use': 'append'
    })(config, newLoader);

    // console.dir(combinedConfig.module.rules, {depth: 10, colors: true});
    return combinedConfig;
  }
};

[shilman]

@igor-dv any chance you can take a look at why configureJSX isn't working here?

[dfagan2]

We're using Angular 8 and all Storybook dependencies are at 5.3.2.

We are building 3 Storybooks across Angular, Vue, and React, and are hoping to get this resolved as our proof of concept that the Docs is going to be a viable and consistent option cross framework for what we're looking to do.

So please let me know if there is any other information I can provide to help keep momentum here.

[shilman]

cc @igor-dv

[igor-dv]

Hey @dfagan2, do you have some public repo to dig in to reproduce this problem ?

[dfagan2]

@igor-dv Unfortunately, no, it's a private repo embedded within my client's ecosystem. I can provide whatever code snippets you need to see though

[igor-dv]

Can you please share the .storybook files, and the relevant angular configuration in the project, if it's possible ? I will try to create some reproduction (or if you can create a reproduction on isolated environment that'd be great).

[dfagan2]

@igor-dv - here is a zip of the relevant .storybook and angular config files: angular.zip. And here is what's probably relevant from the package.json

{
  "dependencies": {
    "@angular/animations": "~8.2.14",
    "@angular/common": "~8.2.14",
    "@angular/compiler": "~8.2.14",
    "@angular/core": "~8.2.14",
    "@angular/forms": "~8.2.14",
    "@angular/platform-browser": "~8.2.14",
    "@angular/platform-browser-dynamic": "~8.2.14",
    "@angular/router": "~8.2.14",
    "rxjs": "~6.4.0",
    "tslib": "^1.10.0",
    "zone.js": "~0.9.1",
    "sass-resources-loader": "^2.0.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.803.22",
    "@angular/cli": "^8.3.22",
    "@angular/compiler-cli": "~8.2.14",
    "@angular/language-service": "~8.2.14",
    "@babel/core": "^7.8.0",
    "@compodoc/compodoc": "^1.1.11",
    "@storybook/addon-backgrounds": "^5.3.2",
    "@storybook/addon-docs": "^5.3.2",
    "@storybook/addon-knobs": "^5.3.2",
    "@storybook/addon-storysource": "^5.3.2",
    "@storybook/addons": "^5.3.2",
    "@storybook/angular": "^5.3.2",
    "@storybook/source-loader": "^5.3.2",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "babel-loader": "^8.0.6",
    "codelyzer": "^5.0.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.18.0",
    "typescript": "~3.5.3",
    "webpack-merge": "^4.2.2"
  }
}

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[stale[bot]]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!

[dexster]

Was this ever fixed? Still getting this in 6.4