Storybook-readme: Preparing for storybook v5.0

[tuchk4]

Right now preparing v5.0.0 release to support all new storybook v5.0 features.

Storybook 5.0 – Storybook – Medium

90% of work is already done React and Vue environments.
Going to publish as soon as possible.

Usage

Usage will be changed a lot. There is neither withReadme nor the withDocs.
Use addReadme as decorator and storybook config and setup docs via addParameters methods at stories.

New Feature: Props Table (https://github.com/tuchk4/storybook-readme/issues/113)

Automatically generate props table for React stories.

storiesOf('Button', module).add('Button 1', () => <Button />, {
  readme: {
    content: `
### Button Component

Buttons allow users to take actions, and make choices, with a single tap. Supports all default HTML Button properties. See Material Design Button for UI/UX information.

<!-- PROPS -->

Button variants could be imported separately.

\`\`\`js
import { OutlinedButton, ContainedButton, TextButton } from 'Button';
\`\`\`

<!-- STORY -->

Some docs after story...
`,
  },
});

Examples

Add docs for all components at the same storiesOf group.

storiesOf('Button', module)
  .addParameters({
    readme: {
      content: ButtonReadme,
    },
  })
  .add('Button 1', () => (
    <Button />
  ));
  .add('Button 2', () => (
    <Button />
  ));

Overide docs

storiesOf('Button', module)
  .addParameters({
    readme: {
      content: `### Button components`,
    },
  })
  .add('Button 1', () => (
    <Button />
  ));
  .add('Button 2', () => (
    <Button />
  ), {
    readme: {
        content: `### Custom Documentation`,
    },
  });

Add sidebar docs

storiesOf('Button', module)
  .addParameters({
    readme: {
      content: `### Button components`,
      sidebar: `### Button Sidebar docs`,
    },
  })
  .add('Button 1', () => (
    <Button />
  ));
  .add('Button 2', () => (
    <Button />
  ), {
    readme: {
      content: `### Custom Documentation`,
      sidebar: `### Custom Sidebar docs`,
    },
  });

More detailed examples and documentation will provide along with the release.

[JamesIves]

Is there an ETA for the 5.0 release?

[tuchk4]

@JamesIves today at the night

[JamesIves]

@tuchk4 Wonderful! Thank you for the prompt response!

[zhaoyao91]

Can't wait !

[tuchk4]

Successfully published:
 - [email protected]

Published alpha version for now.
Going to fix some bugs and publish 5.0.0 version as soon as possible.

Known problems:

• problems with highlighting JSX. Because of highlight.js. List of issues. Would be happy for any help. All code with lib here services/highlite.js
• maybe some problems with vue

Breaking changes

I wrote at https://github.com/tuchk4/storybook-readme/pull/119#issuecomment-472678845.

We should decide if we need compatibility with prev api withDocs and withReadme.
Right now withDocs and withReadme throws exceptions.

Big chance that at release I will add support for previous api so no needs to change existing storybooks (So 5.0.0 release will be without breaking changes)

[tuchk4]

PR with old api supporting https://github.com/tuchk4/storybook-readme/pull/125
So there are no breaking changes 🎉

[tuchk4]

New alpha released [email protected]

[tuchk4]

Most items already completed #125
A few minor issues left
Release estimated for tomorrow.

[tuchk4]

Merged

releasing now

[tuchk4]

5.0.0 release.

Close this issue for now. Please make test and report if faced bug

Thanks for waiting :)

[tekdroid]

This seems to have broken IE11 support. After pulling in these changes and removing my custom changes for 5.0.0 I'm receiving prepend errors in IE11:

I'm just now seeing this in our Dev environment and wanted to report it, but I'm still digging in to it at the moment. Once I have full details I will open an issue in this repo.

[tuchk4]

Yes, this error us happened when inserting styles.

document.prepend is using for it and seems in it brokwn in IE11.

Will think how to fix it.

On Mon, Mar 18, 2019 at 20:02 tekdroid [e-mail] wrote:

This seems to have broken IE11 support. After pulling in these changes and
removing my custom changes for 5.0.0 I'm receiving prepend errors in IE11:

[image: image]
https://user-images.githubusercontent.com/159141/54552402-5e6a9780-4986-11e9-8f1b-592e0fa2fb96.png

I'm just now seeing this in our Dev environment and wanted to report it,
but I'm still digging in to it at the moment. Once I have full details I
will open an issue in this repo.

—
You are receiving this because you modified the open/close state.

Reply to this email directly, view it on GitHub
https://github.com/tuchk4/storybook-readme/issues/118#issuecomment-474034478,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AE5wg-U2gqbYmdkraRxQJbAsMiPY4wbiks5vX9S5gaJpZM4bgkxQ
.

>

---

Regards

Valeriy Sorokobatko

[tuchk4]

seems I know solution. Will test and if everything is ok publish new
vesrion today.

On Mon, Mar 18, 2019 at 20:06 Valerii - [e-mail]
wrote:

Yes, this error us happened when inserting styles.

document.prepend is using for it and seems in it brokwn in IE11.

Will think how to fix it.

On Mon, Mar 18, 2019 at 20:02 tekdroid [e-mail] wrote:

This seems to have broken IE11 support. After pulling in these changes
and removing my custom changes for 5.0.0 I'm receiving prepend errors in
IE11:

[image: image]
https://user-images.githubusercontent.com/159141/54552402-5e6a9780-4986-11e9-8f1b-592e0fa2fb96.png

I'm just now seeing this in our Dev environment and wanted to report it,
but I'm still digging in to it at the moment. Once I have full details I
will open an issue in this repo.

—
You are receiving this because you modified the open/close state.

Reply to this email directly, view it on GitHub
https://github.com/tuchk4/storybook-readme/issues/118#issuecomment-474034478,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AE5wg-U2gqbYmdkraRxQJbAsMiPY4wbiks5vX9S5gaJpZM4bgkxQ
.

>

---

Regards

Valeriy Sorokobatko

>

---

Regards

Valeriy Sorokobatko

[tekdroid]

Thanks! You're awesome, I appreciate the quick response. I was just putting together a better write-up but seems it is not needed. :-D

[tekdroid]

@tuchk4 I see you committed a fix for the IE 11 prepend error. Can we get an npm package for this change?

[tuchk4]

@tekdroid try 5.0.1