Coder Social home page Coder Social logo

[Bug]: The codemod mdx-to-csf should be an automigration, since Storybook 8 doesn't support stories.mdx files about storybook HOT 2 CLOSED

valentinpalkovic avatar valentinpalkovic commented on April 28, 2024
[Bug]: The codemod mdx-to-csf should be an automigration, since Storybook 8 doesn't support stories.mdx files

from storybook.

Comments (2)

ndelangen avatar ndelangen commented on April 28, 2024

Isn't this what the autoblocker is solving already?

from storybook.

ndelangen avatar ndelangen commented on April 28, 2024

@valentinpalkovic I'm thinking that maybe I can refactor this existing automigration to also do the work of migrating the user's stories/.mdx files.

import chalk from 'chalk';
import dedent from 'ts-dedent';
import semver from 'semver';
import type { StoriesEntry } from '@storybook/types';
import { updateMainConfig } from '../helpers/mainConfigFile';
import type { Fix } from '../types';
const logger = console;
export interface BareMdxStoriesGlobRunOptions {
existingStoriesEntries: StoriesEntry[];
nextStoriesEntries: StoriesEntry[];
}
const getNextGlob = (glob: string) => {
// '../src/**/*.stories.@(mdx|js|jsx|ts|tsx)' -> '../src/**/*.@(mdx|stories.@(js|jsx|ts|tsx))'
const extGlobsRegex = new RegExp(/(.*\.)(stories\.@.*)(\|mdx|mdx\|)(.*)$/i);
if (glob.match(extGlobsRegex)) {
return glob.replace(extGlobsRegex, '$1@(mdx|$2$4)');
}
// '../src/**/*.stories.*' -> '../src/**/*.@(mdx|stories.*)'
const allStoriesExtensionsRegex = new RegExp(/(.*\.)(stories\.\*)$/i);
if (glob.match(allStoriesExtensionsRegex)) {
return glob.replace(allStoriesExtensionsRegex, '$1@(mdx|$2)');
}
// '../src/**/*.stories.mdx' -> '../src/**/*.mdx'
return glob.replaceAll('.stories.mdx', '.mdx');
};
export const bareMdxStoriesGlob: Fix<BareMdxStoriesGlobRunOptions> = {
id: 'bare-mdx-stories-glob',
async check({ storybookVersion, mainConfig }) {
if (!semver.gte(storybookVersion, '7.0.0')) {
return null;
}
const existingStoriesEntries = mainConfig.stories as StoriesEntry[];
if (!existingStoriesEntries) {
throw new Error(dedent`
❌ Unable to determine Storybook stories globs in ${chalk.blue(
mainConfig
)}, skipping ${chalk.cyan(this.id)} fix.
In Storybook 7, we have deprecated defining stories in MDX files, and consequently have changed the suffix to simply .mdx.
We were unable to automatically migrate your 'stories' config to include any .mdx file instead of just .stories.mdx.
We suggest you make this change manually.
To learn more about this change, see: ${chalk.yellow(
'https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#mdx-docs-files'
)}
`);
}
const nextStoriesEntries = existingStoriesEntries.map((entry) => {
const isSpecifier = typeof entry !== 'string';
const glob = isSpecifier ? entry.files : entry;
if (!glob) {
// storySpecifier without the 'files' property. Just add the existing to the next list
return entry;
}
const nextGlob = getNextGlob(glob);
return isSpecifier ? { ...entry, files: nextGlob } : nextGlob;
});
// bails if there are no changes
if (
existingStoriesEntries.length === nextStoriesEntries.length &&
existingStoriesEntries.every((entry, index) => {
const nextEntry = nextStoriesEntries[index];
if (typeof entry === 'string') {
return entry === nextEntry;
}
if (typeof nextEntry === 'string') {
return false;
}
return entry.files === nextEntry.files;
})
) {
return null;
}
return { existingStoriesEntries, nextStoriesEntries };
},
prompt({ existingStoriesEntries, nextStoriesEntries }) {
const prettyExistingStoriesEntries = existingStoriesEntries
.map((entry) => JSON.stringify(entry, null, 2))
.join('\n');
const prettyNextStoriesEntries = nextStoriesEntries
.map((entry) => JSON.stringify(entry, null, 2))
.join('\n');
return dedent`
We've detected your project has one or more globs in your 'stories' config that matches .stories.mdx files:
${chalk.cyan(prettyExistingStoriesEntries)}
In Storybook 7, we have deprecated defining stories in MDX files, and consequently have changed the suffix to simply .mdx.
We can automatically migrate your 'stories' config to include any .mdx file instead of just .stories.mdx.
That would result in the following 'stories' config:
${chalk.cyan(prettyNextStoriesEntries)}
To learn more about this change, see: ${chalk.yellow(
'https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#mdx-docs-files'
)}
`;
},
async run({ dryRun, mainConfigPath, result: { nextStoriesEntries } }) {
logger.info(dedent`✅ Setting 'stories' config:
${JSON.stringify(nextStoriesEntries, null, 2)}`);
if (!dryRun) {
await updateMainConfig({ mainConfigPath, dryRun: !!dryRun }, async (main) => {
main.setFieldValue(['stories'], nextStoriesEntries);
});
}
},
};

WDYT?

from storybook.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.