@storybook/codemod 0.0.0-pr-23882-sha-6c4dd3dd → 0.0.0-pr-23435-sha-bd98198e

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/codemod",
-  "version": "0.0.0-pr-23882-sha-6c4dd3dd",
+  "version": "0.0.0-pr-23435-sha-bd98198e",
   "description": "A collection of codemod scripts written with JSCodeshift",
   "keywords": [
     "storybook"
@@ -44,21 +44,14 @@
     "check": "../../../scripts/prepare/check.ts",
     "prep": "../../../scripts/prepare/bundle.ts"
   },
-  "files": [
-    "dist/**/*",
-    "README.md",
-    "*.js",
-    "*.d.ts",
-    "!src/**/*"
-  ],
   "dependencies": {
     "@babel/core": "^7.22.9",
     "@babel/preset-env": "^7.22.9",
     "@babel/types": "^7.22.5",
     "@storybook/csf": "^0.1.0",
-    "@storybook/csf-tools": "0.0.0-pr-23882-sha-6c4dd3dd",
-    "@storybook/node-logger": "0.0.0-pr-23882-sha-6c4dd3dd",
-    "@storybook/types": "0.0.0-pr-23882-sha-6c4dd3dd",
+    "@storybook/csf-tools": "0.0.0-pr-23435-sha-bd98198e",
+    "@storybook/node-logger": "0.0.0-pr-23435-sha-bd98198e",
+    "@storybook/types": "0.0.0-pr-23435-sha-bd98198e",
     "@types/cross-spawn": "^6.0.2",
     "cross-spawn": "^7.0.3",
     "globby": "^11.0.2",

package/project.json

@@ -0,0 +1,6 @@
+{
+  "name": "@storybook/codemod",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "implicitDependencies": [],
+  "type": "library"
+}

package/src/index.ts

@@ -0,0 +1,103 @@
+/* eslint-disable no-param-reassign */
+/* eslint import/prefer-default-export: "off" */
+import fs from 'fs';
+import path from 'path';
+import { promisify } from 'util';
+import globby from 'globby';
+import { sync as spawnSync } from 'cross-spawn';
+import { jscodeshiftToPrettierParser } from './lib/utils';
+
+export {
+  default as updateOrganisationName,
+  packageNames,
+} from './transforms/update-organisation-name';
+
+export { default as updateAddonInfo } from './transforms/update-addon-info';
+
+const TRANSFORM_DIR = `${__dirname}/transforms`;
+
+export function listCodemods() {
+  return fs
+    .readdirSync(TRANSFORM_DIR)
+    .filter((fname) => fname.endsWith('.js'))
+    .map((fname) => fname.slice(0, -3));
+}
+
+const renameAsync = promisify(fs.rename);
+
+async function renameFile(file: any, from: any, to: any, { logger }: any) {
+  const newFile = file.replace(from, to);
+  logger.log(`Rename: ${file} ${newFile}`);
+  return renameAsync(file, newFile);
+}
+
+export async function runCodemod(codemod: any, { glob, logger, dryRun, rename, parser }: any) {
+  const codemods = listCodemods();
+  if (!codemods.includes(codemod)) {
+    throw new Error(`Unknown codemod ${codemod}. Run --list for options.`);
+  }
+
+  let renameParts = null;
+  if (rename) {
+    renameParts = rename.split(':');
+    if (renameParts.length !== 2) {
+      throw new Error(`Codemod rename: expected format "from:to", got "${rename}"`);
+    }
+  }
+
+  // jscodeshift/prettier know how to handle .ts/.tsx extensions,
+  // so if the user uses one of those globs, we can auto-infer
+  let inferredParser = parser;
+  if (!parser) {
+    const extension = path.extname(glob).slice(1);
+    const knownParser = jscodeshiftToPrettierParser(extension);
+    if (knownParser !== 'babel') inferredParser = extension;
+  }
+
+  const files = await globby([glob, '!**/node_modules', '!**/dist']);
+  logger.log(`=> Applying ${codemod}: ${files.length} files`);
+  if (files.length === 0) {
+    logger.log(`=> No matching files for glob: ${glob}`);
+    return;
+  }
+
+  if (!dryRun && files.length > 0) {
+    const parserArgs = inferredParser ? ['--parser', inferredParser] : [];
+    const result = spawnSync(
+      'node',
+      [
+        require.resolve('jscodeshift/bin/jscodeshift'),
+        // this makes sure codeshift doesn't transform our own source code with babel
+        // which is faster, and also makes sure the user won't see babel messages such as:
+        // [BABEL] Note: The code generator has deoptimised the styling of repo/node_modules/prettier/index.js as it exceeds the max of 500KB.
+        '--no-babel',
+        '--fail-on-error',
+        '-t',
+        `${TRANSFORM_DIR}/${codemod}.js`,
+        ...parserArgs,
+        ...files,
+      ],
+      {
+        stdio: 'inherit',
+        shell: true,
+      }
+    );
+    if (result.status === 1) {
+      logger.log('Skipped renaming because of errors.');
+      return;
+    }
+  }
+
+  if (!renameParts && codemod === 'mdx-to-csf') {
+    renameParts = ['.stories.mdx', '.mdx'];
+    rename = '.stories.mdx:.mdx;';
+  }
+
+  if (renameParts) {
+    const [from, to] = renameParts;
+    logger.log(`=> Renaming ${rename}: ${files.length} files`);
+    await Promise.all(
+      files.map((file) => renameFile(file, new RegExp(`${from}$`), to, { logger }))
+    );
+  }
+}

package/src/lib/utils.test.js

@@ -0,0 +1,9 @@
+import { sanitizeName } from './utils';
+
+it('should sanitize names', () => {
+  expect(sanitizeName('basic')).toMatchInlineSnapshot(`"Basic"`);
+  expect(sanitizeName('with space')).toMatchInlineSnapshot(`"WithSpace"`);
+  expect(sanitizeName('default')).toMatchInlineSnapshot(`"Default"`);
+  expect(sanitizeName('w/punctuation')).toMatchInlineSnapshot(`"WPunctuation"`);
+  expect(sanitizeName('5')).toMatchInlineSnapshot(`"_5"`);
+});

package/src/lib/utils.ts

@@ -0,0 +1,29 @@
+import camelCase from 'lodash/camelCase.js';
+import upperFirst from 'lodash/upperFirst.js';
+
+export const sanitizeName = (name: string) => {
+  let key = upperFirst(camelCase(name));
+  // prepend _ if name starts with a digit
+  if (/^\d/.test(key)) {
+    key = `_${key}`;
+  }
+  // prepend _ if name starts with a digit
+  if (/^\d/.test(key)) {
+    key = `_${key}`;
+  }
+  return key;
+};
+
+export function jscodeshiftToPrettierParser(parser?: string) {
+  const parserMap: Record<string, string> = {
+    babylon: 'babel',
+    flow: 'flow',
+    ts: 'typescript',
+    tsx: 'typescript',
+  };
+
+  if (!parser) {
+    return 'babel';
+  }
+  return parserMap[parser] || 'babel';
+}

package/src/transforms/__testfixtures__/add-component-parameters/add-component-parameters.input.js

@@ -0,0 +1,44 @@
+/* eslint-disable */
+import React from 'react';
+import Button from './Button';
+
+import { storiesOf, configure } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+storiesOf('Button', module).add('basic', () => <Button label="The Button" />);
+
+storiesOf('Button').add('no module', () => <Button label="The Button" />);
+
+storiesOf('Button', module).add('with story parameters', () => <Button label="The Button" />, {
+  header: false,
+  inline: true,
+});
+
+storiesOf('Button', module)
+  .addParameters({ foo: 1 })
+  .add('with kind parameters', () => <Button label="The Button" />);
+
+storiesOf('Button', module)
+  .addParameters({ component: Button })
+  .add('with existing component parameters', () => <Button label="The Button" />);
+
+storiesOf('Button', module).add('complex story', () => (
+  <div>
+    <Button label="The Button" onClick={action('onClick')} />
+    <br />
+  </div>
+));
+
+storiesOf('Root|Some/Button', module).add('with path', () => <Button label="The Button" />);
+
+storiesOf('Some.Button', module).add('with dot-path', () => <Button label="The Button" />);
+
+storiesOf('Some.Button', module)
+  .addDecorator(withKnobs)
+  .add('with decorator', () => <Button label="The Button" />);
+
+// This isn't a valid story, but it tests the `import { comp } from ...` case
+storiesOf('action', module).add('non-default component export', () => <action />);
+
+// This shouldn't get modified since the story name doesn't match
+storiesOf('something', module).add('non-matching story', () => <Button label="The Button" />);

package/src/transforms/__testfixtures__/add-component-parameters/add-component-parameters.output.snapshot

@@ -0,0 +1,68 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`add-component-parameters transforms correctly using "add-component-parameters.input.js" data 1`] = `
+"/* eslint-disable */
+import React from 'react';
+import Button from './Button';
+
+import { storiesOf, configure } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+storiesOf('Button', module).addParameters({
+  component: Button
+}).add('basic', () => <Button label=\\"The Button\\" />);
+
+storiesOf('Button').addParameters({
+  component: Button
+}).add('no module', () => <Button label=\\"The Button\\" />);
+
+storiesOf('Button', module).addParameters({
+  component: Button
+}).add('with story parameters', () => <Button label=\\"The Button\\" />, {
+  header: false,
+  inline: true,
+});
+
+storiesOf('Button', module).addParameters({
+  component: Button
+})
+  .addParameters({ foo: 1 })
+  .add('with kind parameters', () => <Button label=\\"The Button\\" />);
+
+storiesOf('Button', module).addParameters({
+  component: Button
+})
+  .addParameters({ component: Button })
+  .add('with existing component parameters', () => <Button label=\\"The Button\\" />);
+
+storiesOf('Button', module).addParameters({
+  component: Button
+}).add('complex story', () => (
+  <div>
+    <Button label=\\"The Button\\" onClick={action('onClick')} />
+    <br />
+  </div>
+));
+
+storiesOf('Root|Some/Button', module).addParameters({
+  component: Button
+}).add('with path', () => <Button label=\\"The Button\\" />);
+
+storiesOf('Some.Button', module).addParameters({
+  component: Button
+}).add('with dot-path', () => <Button label=\\"The Button\\" />);
+
+storiesOf('Some.Button', module).addParameters({
+  component: Button
+})
+  .addDecorator(withKnobs)
+  .add('with decorator', () => <Button label=\\"The Button\\" />);
+
+// This isn't a valid story, but it tests the \`import { comp } from ...\` case
+storiesOf('action', module).addParameters({
+  component: action
+}).add('non-default component export', () => <action />);
+
+// This shouldn't get modified since the story name doesn't match
+storiesOf('something', module).add('non-matching story', () => <Button label=\\"The Button\\" />);"
+`;

package/src/transforms/__testfixtures__/csf-hoist-story-annotations/basic.input.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import Button from './Button';
+import { action } from '@storybook/addon-actions';
+
+export default {
+  title: 'Button',
+};
+
+export const story1 = () => <Button label="Story 1" />;
+
+export const story2 = () => <Button label="Story 2" onClick={action('click')} />;
+story2.story = { name: 'second story' };
+
+export const story3 = () => (
+  <div>
+    <Button label="The Button" onClick={action('onClick')} />
+    <br />
+  </div>
+);
+const baz = 17;
+story3.story = {
+  name: 'complex story',
+  parameters: { foo: { bar: baz } },
+  decorators: [(storyFn) => <bar>{storyFn}</bar>],
+};

package/src/transforms/__testfixtures__/csf-hoist-story-annotations/basic.output.snapshot

@@ -0,0 +1,27 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`csf-hoist-story-annotations transforms correctly using "basic.input.js" data 1`] = `
+"import React from 'react';
+import Button from './Button';
+import { action } from '@storybook/addon-actions';
+
+export default {
+  title: 'Button',
+};
+
+export const story1 = () => <Button label=\\"Story 1\\" />;
+
+export const story2 = () => <Button label=\\"Story 2\\" onClick={action('click')} />;
+story2.storyName = 'second story';
+
+export const story3 = () => (
+  <div>
+    <Button label=\\"The Button\\" onClick={action('onClick')} />
+    <br />
+  </div>
+);
+const baz = 17;
+story3.storyName = 'complex story';
+story3.parameters = { foo: { bar: baz } };
+story3.decorators = [(storyFn) => <bar>{storyFn}</bar>];"
+`;

package/src/transforms/__testfixtures__/csf-hoist-story-annotations/overrides.input.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import Button from './Button';
+import { action } from '@storybook/addon-actions';
+
+export default {
+  title: 'Button',
+};
+
+export const story1 = () => <Button label="Story 1" />;
+
+export const story2 = () => <Button label="Story 2" onClick={action('click')} />;
+story2.story = { name: 'second story' };
+story2.story.parameters = { foo: 'bar' };
+
+export const story3 = () => (
+  <div>
+    <Button label="The Button" onClick={action('onClick')} />
+    <br />
+  </div>
+);
+const baz = 17;
+story3.story = {};
+story3.story.name = 'complex story';
+story3.story.parameters = { foo: { bar: baz } };
+story3.story.decorators = [(storyFn) => <bar>{storyFn}</bar>];

package/src/transforms/__testfixtures__/csf-hoist-story-annotations/overrides.output.snapshot

@@ -0,0 +1,28 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`csf-hoist-story-annotations transforms correctly using "overrides.input.js" data 1`] = `
+"import React from 'react';
+import Button from './Button';
+import { action } from '@storybook/addon-actions';
+
+export default {
+  title: 'Button',
+};
+
+export const story1 = () => <Button label=\\"Story 1\\" />;
+
+export const story2 = () => <Button label=\\"Story 2\\" onClick={action('click')} />;
+story2.storyName = 'second story';
+story2.parameters = { foo: 'bar' };
+
+export const story3 = () => (
+  <div>
+    <Button label=\\"The Button\\" onClick={action('onClick')} />
+    <br />
+  </div>
+);
+const baz = 17;
+story3.storyName = 'complex story';
+story3.parameters = { foo: { bar: baz } };
+story3.decorators = [(storyFn) => <bar>{storyFn}</bar>];"
+`;

package/src/transforms/__testfixtures__/csf-hoist-story-annotations/variable.input.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import Button from './Button';
+
+const foo = {
+  title: 'Button',
+};
+
+export default foo;
+
+const bar = () => <Button label="Story 1" />;
+bar.story = { name: 'bar bar' };
+
+export const story1 = bar;

package/src/transforms/__testfixtures__/csf-hoist-story-annotations/variable.output.snapshot

@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`csf-hoist-story-annotations transforms correctly using "variable.input.js" data 1`] = `
+"import React from 'react';
+import Button from './Button';
+
+const foo = {
+  title: 'Button',
+};
+
+export default foo;
+
+const bar = () => <Button label=\\"Story 1\\" />;
+bar.story = { name: 'bar bar' };
+
+export const story1 = bar;"
+`;

package/src/transforms/__testfixtures__/mdx-to-csf/basic.input.mdx

@@ -0,0 +1,18 @@
+import Button from './Button';
+import { action } from '@storybook/addon-actions';
+import { Meta, Story } from '@storybook/addon-docs';
+
+<Meta title='Button' />
+
+<Story name='story1'><Button label='Story 1' /></Story>
+
+<Story name='second story'><Button label='Story 2' onClick={action('click')} /></Story>
+
+<Story name='complex story'><div>
+    <Button label='The Button' onClick={action('onClick')} />
+    <br />
+  </div></Story>
+
+<Story name='w/punctuation'>
+  <Button label='w/punctuation'/>
+</Story>

package/src/transforms/__testfixtures__/mdx-to-csf/basic.output.snapshot

@@ -0,0 +1,40 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`mdx-to-csf transforms correctly using "basic.input.js" data 1`] = `
+"import React from 'react';
+import Button from './Button';
+import { action } from '@storybook/addon-actions';
+
+export default {
+  title: 'Button',
+};
+
+export const Story1 = () => <Button label=\\"Story 1\\" />;
+
+Story1.story = {
+  name: 'story1',
+};
+
+export const SecondStory = () => <Button label=\\"Story 2\\" onClick={action('click')} />;
+
+SecondStory.story = {
+  name: 'second story',
+};
+
+export const ComplexStory = () => (
+  <div>
+    <Button label=\\"The Button\\" onClick={action('onClick')} />
+    <br />
+  </div>
+);
+
+ComplexStory.story = {
+  name: 'complex story',
+};
+
+export const WPunctuation = () => <Button label=\\"w/punctuation\\" />;
+
+WPunctuation.story = {
+  name: 'w/punctuation',
+};"
+`;

package/src/transforms/__testfixtures__/mdx-to-csf/component-id.input.mdx

@@ -0,0 +1,6 @@
+import Button from './Button';
+import { Meta, Story } from '@storybook/addon-docs';
+
+<Meta title='Button' id="button-id" />
+
+<Story name='story1'><Button label='Story 1' /></Story>

package/src/transforms/__testfixtures__/mdx-to-csf/component-id.output.snapshot

@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`mdx-to-csf transforms correctly using "component-id.input.js" data 1`] = `
+"import React from 'react';
+import Button from './Button';
+
+export default {
+  title: 'Button',
+  id: 'button-id',
+};
+
+export const Story1 = () => <Button label=\\"Story 1\\" />;
+
+Story1.story = {
+  name: 'story1',
+};"
+`;

package/src/transforms/__testfixtures__/mdx-to-csf/decorators.input.mdx

@@ -0,0 +1,8 @@
+import Button from './Button';
+import { Meta, Story } from '@storybook/addon-docs';
+
+<Meta
+  title='Some.Button'
+  decorators={[withKnobs, storyFn => <div className='foo'>{storyFn}</div>]} />
+
+<Story name='with decorator' decorators={[withKnobs]}><Button label='The Button' /></Story>

package/src/transforms/__testfixtures__/mdx-to-csf/decorators.output.snapshot

@@ -0,0 +1,18 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`mdx-to-csf transforms correctly using "decorators.input.js" data 1`] = `
+"import React from 'react';
+import Button from './Button';
+
+export default {
+  title: 'Some.Button',
+  decorators: [withKnobs, (storyFn) => <div className=\\"foo\\">{storyFn}</div>],
+};
+
+export const WithDecorator = () => <Button label=\\"The Button\\" />;
+
+WithDecorator.story = {
+  name: 'with decorator',
+  decorators: [withKnobs],
+};"
+`;

package/src/transforms/__testfixtures__/mdx-to-csf/exclude-stories.input.mdx

@@ -0,0 +1,19 @@
+import Button from './Button';
+import { action } from '@storybook/addon-actions';
+import { Meta, Story } from '@storybook/addon-docs';
+
+<Meta title='Button' />
+
+export const rowData = {
+  col1: 'a',
+  col2: 2,
+};
+
+<Story name='story1'><Button label='Story 1' /></Story>
+
+<Story name='second story'><Button label='Story 2' onClick={action('click')} /></Story>
+
+<Story name='complex story'><div>
+    <Button label='The Button' onClick={action('onClick')} />
+    <br />
+  </div></Story>

package/src/transforms/__testfixtures__/mdx-to-csf/exclude-stories.output.snapshot

@@ -0,0 +1,39 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`mdx-to-csf transforms correctly using "exclude-stories.input.js" data 1`] = `
+"import React from 'react';
+import Button from './Button';
+import { action } from '@storybook/addon-actions';
+export const rowData = {
+  col1: 'a',
+  col2: 2,
+};
+
+export default {
+  title: 'Button',
+  includeStories: ['Story1', 'SecondStory', 'ComplexStory'],
+};
+
+export const Story1 = () => <Button label=\\"Story 1\\" />;
+
+Story1.story = {
+  name: 'story1',
+};
+
+export const SecondStory = () => <Button label=\\"Story 2\\" onClick={action('click')} />;
+
+SecondStory.story = {
+  name: 'second story',
+};
+
+export const ComplexStory = () => (
+  <div>
+    <Button label=\\"The Button\\" onClick={action('onClick')} />
+    <br />
+  </div>
+);
+
+ComplexStory.story = {
+  name: 'complex story',
+};"
+`;

package/src/transforms/__testfixtures__/mdx-to-csf/parameters.input.mdx

@@ -0,0 +1,14 @@
+import React from 'react';
+import Button from './Button';
+import { storiesOf } from '@storybook/react';
+import { Meta, Story } from '@storybook/addon-docs';
+
+<Meta
+  title='Button'
+  component={Button}
+  parameters={{
+    foo: 1,
+    bar: 2,
+  }} />
+
+<Story name='with kind parameters'><Button label='The Button' /></Story>

package/src/transforms/__testfixtures__/mdx-to-csf/parameters.output.snapshot

@@ -0,0 +1,23 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`mdx-to-csf transforms correctly using "parameters.input.js" data 1`] = `
+"import React from 'react';
+import Button from './Button';
+import { storiesOf } from '@storybook/react';
+
+export default {
+  title: 'Button',
+  component: Button,
+
+  parameters: {
+    foo: 1,
+    bar: 2,
+  },
+};
+
+export const WithKindParameters = () => <Button label=\\"The Button\\" />;
+
+WithKindParameters.story = {
+  name: 'with kind parameters',
+};"
+`;

package/src/transforms/__testfixtures__/mdx-to-csf/plaintext.input.mdx

@@ -0,0 +1,3 @@
+import { Story, Meta } from '@storybook/addon-docs';
+
+<Story name="plaintext">Plain text</Story>;