docs: Fix Story names and extra imports (#966)

Before a story named 'NamedKeys' would show up to Storybook as 'NamedKeys'. This change will present the story as 'Named Keys' like it should.

.storybook/mdx-code-block-rewrite.js

@@ -1,4 +1,5 @@
 const path = require('path');
+const {storyNameFromExport} = require('@storybook/csf');
 
 // This loader replaces example code blocks with Storybook specific tags
 // before:
@@ -7,6 +8,7 @@ const path = require('path');
 // <Canvas><Story name="MyComponent" story={MyComponent} parameters={{storySource: { source: MyComponent.__RAW__ }}}
 // __RAW__ comes from the `whole-source-loader
 module.exports = function rewriteExampleCodeBlock(source) {
+  const hasSpecialBlocks = /<(Meta|ExampleCodeBlock|PropsTable)/.test(source);
   const hasMeta = /import {.*Meta[,\s}]/.test(source);
   const hasCanvas = /import {.*Canvas[,\s}]/.test(source);
   const hasStory = /import {.*Story[,\s}]/.test(source);
@@ -17,10 +19,14 @@ module.exports = function rewriteExampleCodeBlock(source) {
   if (!hasStory) imports.push('Story');
   if (!hasArgsTable) imports.push('ArgsTable');
   return (
-    (imports.length ? `import {${imports.join(',')}} from '@storybook/addon-docs/blocks';\n` : '') +
+    (imports.length && hasSpecialBlocks
+      ? `import {${imports.join(',')}} from '@storybook/addon-docs/blocks';\n\n`
+      : '') +
     source
       .replace(/\<ExampleCodeBlock code={([A-Za-z0-9]+)} \/\>/g, function replacer(match, p1, p2) {
-        return `<Canvas><Story name="${p1}" parameters={{storySource: {source: ${p1}.__RAW__}}}><${p1} /></Story></Canvas>`;
+        return `<Canvas><Story name="${storyNameFromExport(
+          p1
+        )}" parameters={{storySource: {source: ${p1}.__RAW__}}}><${p1} /></Story></Canvas>`;
       })
       .replace(/\<PropsTable of=/g, '<ArgsTable of=')
   );