@storybook/codemod 0.0.0-pr-23611-sha-d83da132 → 0.0.0-pr-23853-sha-93b33e06

package/dist/index.d.ts

@@ -1,54 +1,7 @@
-declare function transformer$1(file: any, api: any): any;
-declare const packageNames: {
-    '@kadira/react-storybook-decorator-centered': string;
-    '@kadira/storybook-addons': string;
-    '@kadira/storybook-addon-actions': string;
-    '@kadira/storybook-addon-comments': string;
-    '@kadira/storybook-addon-graphql': string;
-    '@kadira/storybook-addon-info': string;
-    '@kadira/storybook-addon-knobs': string;
-    '@kadira/storybook-addon-links': string;
-    '@kadira/storybook-addon-notes': string;
-    '@kadira/storybook-addon-options': string;
-    '@kadira/storybook-channels': string;
-    '@kadira/storybook-channel-postmsg': string;
-    '@kadira/storybook-channel-websocket': string;
-    '@kadira/storybook-ui': string;
-    '@kadira/react-native-storybook': string;
-    '@kadira/react-storybook': string;
-    '@kadira/getstorybook': string;
-    '@kadira/storybook': string;
-    storyshots: string;
-    getstorybook: string;
-};
-
-/**
- * Takes the deprecated addon-info API, addWithInfo, and
- * converts to the new withInfo API.
- *
- * Example of deprecated addWithInfo API:
- *
- * storiesOf('Button')
- *   .addWithInfo(
- *     'story name',
- *     'Story description.',
- *     () => (
- *       <Button label="The Button" />
- *     )
- *   )
- *
- * Converts to the new withInfo API:
- *
- * storiesOf('Button')
- *   .add('story name', withInfo(
- *     'Story description.'
- *   )(() => (
- *     <Button label="The Button" />
- *   )))
- */
-declare function transformer(file: any, api: any): any;
+export { packageNames, default as updateOrganisationName } from './transforms/update-organisation-name.js';
+export { default as updateAddonInfo } from './transforms/update-addon-info.js';
 
 declare function listCodemods(): string[];
 declare function runCodemod(codemod: any, { glob, logger, dryRun, rename, parser }: any): Promise<void>;
 
-export { listCodemods, packageNames, runCodemod, transformer as updateAddonInfo, transformer$1 as updateOrganisationName };
+export { listCodemods, runCodemod };

package/dist/transforms/add-component-parameters.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Adds a `component` parameter for each storiesOf(...) call.
+ *
+ * For example:
+ *
+ * input { Button } from './Button';
+ * storiesOf('Button', module).add('story', () => <Button label="The Button" />);
+ *
+ * Becomes:
+ *
+ * input { Button } from './Button';
+ * storiesOf('Button', module)
+ *   .addParameters({ component: Button })
+ *   .add('story', () => <Button label="The Button" />);
+ *
+ * Heuristics:
+ * - The storiesOf "kind" name must be Button
+ * - Button must be imported in the file
+ */
+declare function transformer(file: any, api: any): any;
+
+export { transformer as default };

package/dist/transforms/csf-hoist-story-annotations.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Hoist CSF .story annotations
+ *
+ * For example:
+ *
+ * ```
+ * export const Basic = () => <Button />
+ * Basic.story = {
+ *   name: 'foo',
+ *   parameters: { ... },
+ *   decorators = [ ... ],
+ * };
+ * ```
+ *
+ * Becomes:
+ *
+ * ```
+ * export const Basic = () => <Button />
+ * Basic.storyName = 'foo';
+ * Basic.parameters = { ... };
+ * Basic.decorators = [ ... ];
+ * ```
+ */
+declare function transformer(file: any, api: any): any;
+
+export { transformer as default };

package/dist/transforms/move-builtin-addons.d.ts

@@ -0,0 +1,3 @@
+declare function transformer(file: any, api: any): any;
+
+export { transformer as default };

package/dist/transforms/storiesof-to-csf.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Convert a legacy story API to component story format
+ *
+ * For example:
+ *
+ * ```
+ * input { Button } from './Button';
+ * storiesOf('Button', module).add('story', () => <Button label="The Button" />);
+ * ```
+ *
+ * Becomes:
+ *
+ * ```
+ * input { Button } from './Button';
+ * export default {
+ *   title: 'Button'
+ * }
+ * export const story = () => <Button label="The Button" />;
+ *
+ * NOTES: only support chained storiesOf() calls
+ */
+declare function transformer(file: any, api: any, options: any): any;
+
+export { transformer as default };

package/dist/transforms/update-addon-info.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Takes the deprecated addon-info API, addWithInfo, and
+ * converts to the new withInfo API.
+ *
+ * Example of deprecated addWithInfo API:
+ *
+ * storiesOf('Button')
+ *   .addWithInfo(
+ *     'story name',
+ *     'Story description.',
+ *     () => (
+ *       <Button label="The Button" />
+ *     )
+ *   )
+ *
+ * Converts to the new withInfo API:
+ *
+ * storiesOf('Button')
+ *   .add('story name', withInfo(
+ *     'Story description.'
+ *   )(() => (
+ *     <Button label="The Button" />
+ *   )))
+ */
+declare function transformer(file: any, api: any): any;
+
+export { transformer as default };

package/dist/transforms/update-organisation-name.d.ts

@@ -0,0 +1,25 @@
+declare function transformer(file: any, api: any): any;
+declare const packageNames: {
+    '@kadira/react-storybook-decorator-centered': string;
+    '@kadira/storybook-addons': string;
+    '@kadira/storybook-addon-actions': string;
+    '@kadira/storybook-addon-comments': string;
+    '@kadira/storybook-addon-graphql': string;
+    '@kadira/storybook-addon-info': string;
+    '@kadira/storybook-addon-knobs': string;
+    '@kadira/storybook-addon-links': string;
+    '@kadira/storybook-addon-notes': string;
+    '@kadira/storybook-addon-options': string;
+    '@kadira/storybook-channels': string;
+    '@kadira/storybook-channel-postmsg': string;
+    '@kadira/storybook-channel-websocket': string;
+    '@kadira/storybook-ui': string;
+    '@kadira/react-native-storybook': string;
+    '@kadira/react-storybook': string;
+    '@kadira/getstorybook': string;
+    '@kadira/storybook': string;
+    storyshots: string;
+    getstorybook: string;
+};
+
+export { transformer as default, packageNames };

package/dist/transforms/upgrade-hierarchy-separators.d.ts

@@ -0,0 +1,3 @@
+declare function transformer(file: any, api: any, options: any): any;
+
+export { transformer as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/codemod",
-  "version": "0.0.0-pr-23611-sha-d83da132",
+  "version": "0.0.0-pr-23853-sha-93b33e06",
   "description": "A collection of codemod scripts written with JSCodeshift",
   "keywords": [
     "storybook"
@@ -44,14 +44,21 @@
     "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-23611-sha-d83da132",
-    "@storybook/node-logger": "0.0.0-pr-23611-sha-d83da132",
-    "@storybook/types": "0.0.0-pr-23611-sha-d83da132",
+    "@storybook/csf-tools": "0.0.0-pr-23853-sha-93b33e06",
+    "@storybook/node-logger": "0.0.0-pr-23853-sha-93b33e06",
+    "@storybook/types": "0.0.0-pr-23853-sha-93b33e06",
     "@types/cross-spawn": "^6.0.2",
     "cross-spawn": "^7.0.3",
     "globby": "^11.0.2",

package/project.json

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

package/src/index.ts

@@ -1,103 +0,0 @@
-/* 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

@@ -1,9 +0,0 @@
-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

@@ -1,29 +0,0 @@
-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

@@ -1,44 +0,0 @@
-/* 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

@@ -1,68 +0,0 @@
-// 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

@@ -1,25 +0,0 @@
-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

@@ -1,27 +0,0 @@
-// 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

@@ -1,25 +0,0 @@
-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

@@ -1,28 +0,0 @@
-// 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

@@ -1,13 +0,0 @@
-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

@@ -1,17 +0,0 @@
-// 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

@@ -1,18 +0,0 @@
-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>