Function generateStory

scripts/extractStarter.mjs:328–493

Generates a storybook story for a "Reusable wrappers" example from the docs.

(filename, imports, code, skipImports = false)

/** Generates a storybook story for a "Reusable wrappers" example from the docs. */
function generateStory(filename, imports, code, skipImports = false) {
  // Match the JSX part of the code.
  let example = code.match(/^(<(.|\n)*>)$/m, '');
  if (!example) {
    return '';
  }

  let name = basename(filename, '.mdx');
  code =
    imports +
    `
import type {Meta} from '@storybook/react';

const meta: Meta<typeof ${name}> = {
  component: ${name},
  parameters: {
    layout: 'centered',
  },
  tags: ['autodocs']
};

export default meta;

export const Example = () => (
  ${example[0].replace(/\n/g, '\n  ')}
);
`;

  let ast = recast.parse(code, {
    parser: {
      parse() {
        return parse(code, {
          sourceType: 'module',
          plugins: ['jsx', 'typescript'],
          tokens: true,
          errorRecovery: true
        });
      }
    }
  });

  removeDuplicateImports(ast);

  let imported = new Set();
  if (skipImports) {
    imported.add(name);
  }

  let args = new Map();
  if (name === 'ListBox' || name === 'GridList') {
    // Avoid onAction getting a storybook control, which changes the selection behavior.
    args.set('onAction', t.nullLiteral());
  } else if (name === 'Table') {
    args.set('onRowAction', t.nullLiteral());
  }

  traverse.default(ast, {
    'ImportSpecifier|ImportDefaultSpecifier'(specifier) {