message: docs: Fix Story names and extra imports
  Before a story named 'NamedKeys' would show up to Storybook as 'NamedKeys'. This change will present the story as 'Named Keys' like it should.
diff: 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=')
  );
  