docs: enable story source for current stories

[rshen91]

Summary

This PR enables the story source add-on for stories while consumer facing storybook is in progress.

Visual regression tests were rerun because of the url naming changes with changing the fs for /stories/.

The webpack config was edited to add story-source for each folder containing separate stories. Please feel free to propose a more succinct solution in the webpack config for the 14 or so folders (wildcard didn't work in testing).

Checklist

Use strikethroughs to remove checklist items you don't feel are applicable to this PR.

- [ ] Any consumer-facing exports were added to src/index.ts (and stories only import from ../src except for test data & storybook)
- [ ] This was checked for cross-browser compatibility, including a check against IE11

• Proper documentation or storybook story was added for features that require explanation or tutorials
• Unit tests were updated or added to match the most common scenarios
• Each commit follows the convention

[markov00]

Hey @rshen91 I've seen that we can maybe do a cleaner path instead of reenabling the info addon that bring in some issues: we can use the StorySource addon that adds a new tab near the Knobs with the code listed directly from the story.
The minor drawback here is that, to avoid long waiting times caused by our very long story source files we should split the stories into multiple files (one per story) that is easy to read and display.
I've tested it out with the scales story that is the shortest one, and works fine. These are the passages I've done:

• add the addon: yarn add @storybook/addon-storysource --dev
• register it in .storybook/addons.js import '@storybook/addon-storysource/register';
• add the source loader for webpack (I've added it as the first rule, but not sure if this can be used in a different order:

config.module.rules.push({
    test: /\.tsx?$/,
    include: [path.resolve(__dirname, '../stories', 'scales')],
    loaders: [
      {
        loader: require.resolve('@storybook/source-loader'),
        options: { parser: 'typescript' },
      },
    ],
    enforce: 'pre',
  });

• I've created a scales folder and I've splitted each story in its own file, adding a 1_, 2_ prefix on each file to order them as it was before

For me it seems to render a more readable and usable code than the addon-info

[codecov-io]

Codecov Report

❗ No coverage uploaded for pull request base (master@3117a11). Click here to learn what that means.
The diff coverage is n/a.

@@            Coverage Diff            @@
##             master     #557   +/-   ##
=========================================
  Coverage          ?   71.82%           
=========================================
  Files             ?      212           
  Lines             ?     6143           
  Branches          ?     1181           
=========================================
  Hits              ?     4412           
  Misses            ?     1712           
  Partials          ?       19

---

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 3117a11...ba1f285. Read the comment docs.

[rshen91]

This looks awesome! Thanks for fixing the naming and making it much more intuitive

• I like how Annotations is broken into lines and rects.
• Also, the info text is much cleaner now too.
• I also like the selectedPanels addition - I think it's an improvement for the user experience.

[nickofthyme]

LGTM. Tested locally in Chrome and Firefox. Looked through dozens of stories and all seem to be fine. All screenshots are just renamed with no changes.

The separation of story files vastly improves the source load time.

Love the linting rule. Finally someone listened to me 😭

[nickofthyme]

😍❤️💝💕

[nickofthyme]

👍

[nickofthyme]

🎉

[nickofthyme]

??? no linting on mds 😞

Might as well clean this up when you update the branch