import path from 'path'; import { remove, pathExists, readJSON, writeJSON } from 'fs-extra'; import prompts from 'prompts'; import { getOptionsOrPrompt } from './utils/options'; import { executeCLIStep } from './utils/cli-step'; import { exec } from '../code/lib/cli/src/repro-generators/scripts'; import type { Parameters } from '../code/lib/cli/src/repro-generators/configs'; import { getInterpretedFile } from '../code/lib/core-common'; import { readConfig, writeConfig } from '../code/lib/csf-tools'; import { babelParse } from '../code/lib/csf-tools/src/babelParse'; const frameworks = ['react', 'angular']; const addons = ['a11y', 'storysource']; const sandboxDir = path.resolve(__dirname, '../sandbox'); const codeDir = path.resolve(__dirname, '../code'); async function getOptions() { return getOptionsOrPrompt('yarn sandbox', { framework: { description: 'Which framework would you like to use?', values: frameworks, required: true as const, }, addon: { description: 'Which extra addons (beyond the CLI defaults) would you like installed?', values: addons, multiple: true as const, }, includeStories: { description: "Include Storybook's own stories?", promptType: (_, { framework }) => framework === 'react', }, create: { description: 'Create the template from scratch (rather than degitting it)?', }, forceDelete: { description: 'Always delete an existing sandbox, even if it has the same configuration?', promptType: false, }, forceReuse: { description: 'Always reuse an existing sandbox, even if it has a different configuration?', promptType: false, }, link: { description: 'Link the storybook to the local code?', inverse: true, }, start: { description: 'Start the Storybook?', inverse: true, }, build: { description: 'Build the Storybook?', }, watch: { description: 'Start building used packages in watch mode as well as the Storybook?', }, dryRun: { description: "Don't execute commands, just list them (dry run)?", }, }); } const steps = { repro: { command: 'repro', description: 'Bootstrapping Template', icon: '👷', hasArgument: true, options: { template: { values: frameworks }, e2e: {}, }, }, add: { command: 'add', description: 'Adding addon', icon: '+', hasArgument: true, options: {}, }, link: { command: 'link', description: 'Linking packages', icon: '🔗', hasArgument: true, options: { local: {}, start: { inverse: true } }, }, build: { command: 'build', description: 'Building Storybook', icon: '🔨', options: {}, }, dev: { command: 'dev', description: 'Starting Storybook', icon: '🖥 ', options: {}, }, }; const logger = console; export const overrideMainConfig = async ({ cwd, mainOverrides, }: { cwd: string; mainOverrides: Parameters['mainOverrides']; }) => { logger.info(`📝 Overwriting main.js with the following configuration:`); const configDir = path.join(cwd, '.storybook'); const mainConfigPath = getInterpretedFile(path.resolve(configDir, 'main')); logger.debug(mainOverrides); const mainConfig = await readConfig(mainConfigPath); Object.keys(mainOverrides).forEach((field) => { // NOTE: using setFieldNode and passing the output of babelParse() mainConfig.setFieldNode([field], mainOverrides[field]); }); await writeConfig(mainConfig); }; const addPackageScripts = async ({ cwd, scripts, }: { cwd: string; scripts: Record; }) => { logger.info(`🔢 Adding package resolutions:`); const packageJsonPath = path.join(cwd, 'package.json'); const packageJson = await readJSON(packageJsonPath); packageJson.scripts = { ...packageJson.scripts, ...scripts, }; await writeJSON(packageJsonPath, packageJson, { spaces: 2 }); }; async function main() { const optionValues = await getOptions(); const { framework, forceDelete, forceReuse, link, dryRun } = optionValues; const cwd = path.join(sandboxDir, framework as string); const exists = await pathExists(cwd); let shouldDelete = exists && !forceReuse; if (exists && !forceDelete && !forceReuse) { const relativePath = path.relative(process.cwd(), cwd); ({ shouldDelete } = await prompts({ type: 'toggle', message: `${relativePath} already exists, should delete it and create a new one?`, name: 'shouldDelete', initial: false, active: 'yes', inactive: 'no', })); } if (exists && shouldDelete && !dryRun) await remove(cwd); if (!exists || shouldDelete) { await executeCLIStep(steps.repro, { argument: cwd, optionValues: { template: framework }, cwd: sandboxDir, dryRun, }); // TODO -- sb add doesn't actually work properly: // - installs in `deps` not `devDeps` // - does a `workspace:^` install (what does that mean?) // - doesn't add to `main.js` // eslint-disable-next-line no-restricted-syntax for (const addon of optionValues.addon as string[]) { const addonName = `@storybook/addon-${addon}`; // eslint-disable-next-line no-await-in-loop await executeCLIStep(steps.add, { argument: addonName, cwd, dryRun }); } // TODO copy stories if (link) { await executeCLIStep(steps.link, { argument: cwd, cwd: codeDir, dryRun, optionValues: { local: true, start: false }, }); // TODO -- work out exactly where this should happen const code = '(c) => ({ ...c, resolve: { ...c.resolve, symlinks: false } })'; const mainOverrides = { // @ts-ignore (not sure why TS complains here, it does exist) webpackFinal: babelParse(code).program.body[0].expression, }; await overrideMainConfig({ cwd, mainOverrides } as any); await addPackageScripts({ cwd, scripts: { storybook: 'NODE_OPTIONS="--preserve-symlinks --preserve-symlinks-main" storybook dev -p 6006', 'build-storybook': 'NODE_OPTIONS="--preserve-symlinks --preserve-symlinks-main" storybook build', }, }); } } const { start } = optionValues; if (start) { await exec( 'yarn storybook', { cwd }, { dryRun, startMessage: `⬆️ Starting Storybook`, errorMessage: `🚨 Starting Storybook failed`, } ); } else { await executeCLIStep(steps.build, { cwd, dryRun }); // TODO serve } // TODO start dev } main().catch((err) => console.error(err));