Notes are displaying from center of box.

[patrickteivas]

Describe the bug
Notes are displaying from center of box.

To Reproduce
Steps to reproduce the behavior:

1. Create note

Expected behavior
Aligned to left.

Screenshots

Code snippets
Content of test.stories.js

import Vue from 'vue';
import { storiesOf } from '@storybook/vue';
import Link from '@/components/Link';
import LinkMarkdown from '@/stories/LinkMarkdown.md';

storiesOf('test', module).add(
  'Link',
  () => ({
    components: { Link },
    template: `<link :url="'test-url'" />`,
  }),
  {
    notes: { markdown: LinkMarkdown },
  }
);

Content of LinkMarkdown.md

#Also you can use markdown notes

System:

Environment Info:

  System:
    OS: Windows 10
    CPU: (4) x64 Intel(R) Core(TM) i5-6500 CPU @ 3.20GHz
  Binaries:
    Node: 10.16.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.17.3 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 6.9.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: 44.17763.1.0
  npmPackages:
    @storybook/addon-actions: ^5.1.11 => 5.1.11
    @storybook/addon-notes: ^5.1.11 => 5.1.11
    @storybook/vue: ^5.1.11 => 5.1.11

Additional context
Using Chrome.

[shilman]

FYI addon-notes is being superceded by addon-docs. It’s reached release candidate (RC) status and will be properly released soon. Please give it a try! https://medium.com/storybookjs/storybook-docspage-e185bc3622bf

[patrickteivas]

Thanks for replying! Sorry, but can't actually use dev-versions. Can you give more information about release date? About month?

[shilman]

@patrickteivas Next week (or possibly the week after to avoid conflicting with the Apple announcement, or if something unexpected comes up)

[patrickteivas]

Nice. Also tried addon-docs on "@storybook/vue": "5.2.0-rc.2", but got

ERROR in ./.storybook/config.js
Module not found: Error: Can't resolve '@storybook/addon-docs/blocks' in 'C:\Users\User\Desktop\Projects\test\.storybook'

config.js content

import Vue from 'vue'
import Vuex from 'vuex'
import { configure, addDecorator, addParameters } from '@storybook/vue'
import { DocsPage, DocsContainer } from '@storybook/addon-docs/blocks';
import { action } from '@storybook/addon-actions'
import VueI18n from 'vue-i18n';

Vue.use(VueI18n);
Vue.use(Vuex)

Vue.component('nuxt-link', {
  props: ['to'],
  methods: {
    log() {
      action('link target')(this.to)
    },
  },
  template: '<a href="#" @click.prevent="log()"><slot>NuxtLink</slot></a>'
})

addDecorator(() => ({
  template: '<story />',
  i18n: {
    locale: '',
  },
}));

addParameters({
  docs: {
    container: DocsContainer,
    page: DocsPage,
  },
});

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

configure(loadStories, module)

[shilman]

@patrickteivas Did you install the addon? See https://github.com/storybookjs/storybook/blob/next/addons/docs/README.md#installation

[patrickteivas]

@shilman of course :) Newly installed (or upgraded) packages list with versions

"react": "^16.9.0",
"babel-loader": "^8.0.6",
"@storybook/source-loader": "^5.2.0-alpha.14",
"@storybook/vue": "5.2.0-rc.2",
"@storybook/addon-docs": "^5.2.0-alpha.0",
"@mdx-js/mdx": "^1.4.0",

[shilman]

@patrickteivas all your @storybook/* should be on 5.2.0-rc.4

First line of instructions:

Make sure that the versions for your @storybook/* packages match

[patrickteivas]

My bad. Upgraded all packages to 5.2.0-rc.4. Now I'm almost achieved working solution, but still need some help.
webpack.config.js content

const path = require('path')
const createCompiler = require('@storybook/addon-docs/mdx-compiler-plugin');

module.exports = {
  module: {
    rules: [
      {
        test: /\.s?css$/,
        loaders: ['style-loader', 'css-loader', 'sass-loader'],
        include: path.resolve(__dirname, '../')
      },
      {
        test: /\.(stories|story)\.mdx$/,
        use: [
          {
            loader: 'babel-loader',
          },
          {
            loader: '@mdx-js/loader',
            options: {
              compilers: [createCompiler({})],
            },
          },
        ],
      },
      {
        test: /\.(stories|story)\.[tj]sx?$/,
        loader: require.resolve('@storybook/source-loader'),
        exclude: [/node_modules/],
        enforce: 'pre',
      }
    ]
  },
  resolve: {
    alias: {
      '@': path.dirname(path.resolve(__dirname)),
      '~': path.dirname(path.resolve(__dirname))
    }
  }
}

Badge.stories.mdx content

import { Meta, Story, Props } from '@storybook/addon-docs/blocks';
import Badge from '@/components/Badge';

<Meta title="Demo/Badge" component={Badge} />

# Badge

With `MDX` we write longform markdown documentation for our `Badge` component and embed Doc Blocks inline.

<Props of = { Badge} />

<Story name="positive">
  <Badge to="test-url" />
</Story>

Getting

  11 | const makeShortcode = name => function MDXDefaultShortcode(props) {
  12 |   console.warn("Component " + name + " was not imported, exported, or provided by MDXProvider as global scope")
> 13 |   return <div {...props}/>
     |          ^
  14 | };

Where exactly I have to register components?

[shilman]

@patrickteivas Your syntax for vue MDX stories is wrong. See #7984 for full explanation, or https://raw.githubusercontent.com/storybookjs/storybook/next/examples/vue-kitchen-sink/src/stories/addon-docs.stories.mdx for examples

cc @Aaron-Pool on vue-specific questions

[patrickteivas]

New Badge.stories.mdx content.

import { Story, Preview, Meta } from '@storybook/addon-docs/blocks';
import Badge from '@/components/Badge';

<Meta title="Addon|Docs" />

<Story name="badge">
  {{
    template: '<badge :to="test-link" />',
  }}
</Story>

Still same error

Module build failed (from ./node_modules/babel-loader/lib/index.js):
  11 | const makeShortcode = name => function MDXDefaultShortcode(props) {
  12 |   console.warn("Component " + name + " was not imported, exported, or provided by MDXProvider as global scope")
> 13 |   return <div {...props}/>
     |          ^
  14 | };

Can't get, what I'm doing wrong.

[shilman]

I'm not too familiar with Vue, but in vue-kitchen-sink/.storybook/config.js, I see this line:

Vue.component('my-button', MyButton);

Wonder if you need to do this for Badge?

[patrickteivas]

Wonder if you need to do this for Badge?

It's test component I created, to match docs.

but in vue-kitchen-sink/.storybook/config.js, I see this line:

Vue.component('my-button', MyButton);

Tried, still same error. Btw, that would be weird, if I must register every component I'm writing docs on in config.js file
Also, some debug info. Even if I delete all content from Badge.stories.mdx file, I get still same error.

[shilman]

Ok, @Aaron-Pool can you shed any light on this?

[Aaron-Pool]

Pretty early in the Eastern Time zone, so I'm not in front of a computer yet, but here are some thoughts:

@shilman looks like his build is choking on jsx. I see he isn't using a a docs preset, and he isn't using the Babel react jsx plugin. So could it maybe just be that?

On the Vue side, to ensure it isn't a component registration issue, you could change your story to this (leaving the rest of the file unchanged):

<Story name="badge">
  {{
    components: { Badge },
    template: '<badge :to="test-link" />',
  }}
</Story>

That's the more common way of registering components for stories. The Vue kitchen sink uses a global registration in the config because it's mostly a demo app.

But, like I said, the error you're getting really makes me think it's more of a build issue than anything. So I don't expect changing your story to fix it.

I'll dig into it more when I can get to a computer.

[patrickteivas]

On the Vue side, to ensure it isn't a component registration issue, you could change your story to this (leaving the rest of the file unchanged):

<Story name="badge">
  {{
    components: { Badge },
    template: '<badge :to="test-link" />',
  }}
</Story>

Nope, still same error.

[Aaron-Pool]

Yeah, like I said, I figured it was a build issue and unrelated to component registration. I'll try to get back to you in a few hours.

[Aaron-Pool]

Ok @patrickteivas give this a shot.

1. In your .storybook folder, create a file called presets.js (I'm assuming it doesn't exist)
2. Set the file content to:

module.exports = ['@storybook/addon-docs/vue/preset'];

3. Change your webpack.config.js file to be

const path = require('path');

module.exports = async ({ config }) => {
  config.module.rules.unshift({
    test: /\.s?css$/,
    loaders: ['style-loader', 'css-loader', 'sass-loader'],
    include: path.resolve(__dirname, '../')
  });
  return config;
};

Give that a whirl. If it doesn't work. I'll probably need a minimal reproduction repo to debug for you.

[patrickteivas]

@Aaron-Pool okay, now I have also good news :).
I don't have any errors anymore, but no stories appear on the list.
Also, the problem is aliases. I need to configure @ and ~ aswell (Which are missing in conf you provided).

[Aaron-Pool]

@patrickteivas If you click the "canvas" tab rather than the "docs" tab, does the selected story render?

Edit: Oh, wait, if your aliases aren't working it wouldn't be importing your component correctly. Which is probably why no stories are showing. You should just be able to add the following into your webpack.config.js exported function, right below the rules unshift call.

config.resolve = 
  resolve: {
    alias: {
      '@': path.dirname(path.resolve(__dirname)),
      '~': path.dirname(path.resolve(__dirname))
    }
}

I'm guessing you knew how to do that though. Also, I think(?) that should solve the issue completely. So, I'm going to close this issue. Let me know if I need to reopen.

[patrickteivas]

@Aaron-Pool

If you click the "canvas" tab rather than the "docs" tab, does the selected story render?

Nope. I have only 1 story (That one I sent before) for the test and it's not displayed in the sidebar at all (So I see "loading" animation in the sidebar).
To test config without aliases, I deleted all @ and ~ and replaced them with relative paths.

[Aaron-Pool]

@patrickteivas alright, well, if it's still not working, I probably need a minimal reproduction repo to debug.

[patrickteivas]

@Aaron-Pool I don't think I can fully reproduce situation, but here's my minimal repo with same problem.
https://github.com/patrickteivas/Storybook-DocsPage-Mini

[Aaron-Pool]

@patrickteivas thanks for the repro, I'll try to pull it down and debug when I get off work tonight.

[Aaron-Pool]

@patrickteivas k. FIxed it. You were using a deprecated story loading format. Also, the vue docs preset already contained the new Parameters you were adding.

Basically, change your config to:

import Vue from 'vue';
import { configure } from '@storybook/vue';
import { DocsPage, DocsContainer } from '@storybook/addon-docs/blocks';
import { action } from '@storybook/addon-actions';

Vue.component('nuxt-link', {
  props: ['to'],
  methods: {
    log() {
      action('link target')(this.to);
    }
  },
  template: '<a href="#" @click.prevent="log()"><slot>NuxtLink</slot></a>'
});

// Remove this completely
/*
addParameters({
  docs: {
    container: DocsContainer,
    page: DocsPage
  }
});
*/

// And change this
/*
function loadStories() {
  const req = require.context('../stories', true, /\.stories\.(js|mdx)$/);
  req.keys().forEach((filename) => req(filename));
}
// configure(loadStories, module);
*/

// To this
configure(require.context('../stories', true, /\.stories\.(ts|mdx)$/), module);

You'll theeeeennnn get the <Logo/> component is not recognized. So change Logo.stories.mdx to:

import { Story, Preview, Meta } from '@storybook/addon-docs/blocks';
import Logo from '../components/Logo';

<Meta title="Addon|Docs" />

<Story name="Logo">
  {{
    components: { Logo },
    template: '<Logo />'
  }}
</Story>

Aaaaaaaannnnnddd theeeennn you're good 👍

[shilman]

@Aaron-Pool you're an angel 👼

[patrickteivas]

@Aaron-Pool wow, that's really very impressive. I'm very thankful that you find time and patience to help me.
Fixed aliases by adding this in module.exports, maybe somebody needs it

config.resolve.alias = {
  ...config.resolve.alias,
  '@': path.dirname(path.resolve(__dirname)),
  '~': path.dirname(path.resolve(__dirname))
};

But text still centered, it's should be like this?

[Aaron-Pool]

@patrickteivas no problem at all!

And I think what you're seeing now is that the docs add-on content has a Max width, and you seem to have a pretty wide monitor. Typically for documentation though, a Max width is a good thing. You normally don't want text content to stretch more than 80 characters or else people will lose their place while reading.

If this has a really negative impact on you, feel free to creat a feature request as a separate issue to adjust the docs max-width!

Edit: In retrospect, that's probably the first thing I should have responded with. I came in to the conversation when you were trying to get docs-mode setup and sort of overlooked the original 😕 I apologize if that ended up taking more of your time than the original issue needed.

[patrickteivas]

to adjust the docs max-width!

I don't mean max-width adjustment. Like, just align content to the left.

and you seem to have a pretty wide monitor

FullHD.

Edit: In retrospect, that's probably the first thing I should have responded with. I came in to the conversation when you were trying to get docs-mode setup and sort of overlooked the original 😕 I apologize if that ended up taking more of your time than the original issue needed.

No worries, you did well! I'm very thankful to you.

[Aaron-Pool]

@patrickteivas that's actually very helpful to know that an FHD monitor can make things look odd with the current layout settings. One of the most difficult things about testing software can be thinking about edge cases in user environments. Like I said, if you want to create a feature request issue to be able to set the docs content to align to the left (thanks for that clarification, btw), just so it's documented, that would be great!

[patrickteivas]

Big thanks to both of you, who helped me to set up addon-docs in my project.
Created the feature request. Closing issue.
#8004