CLI: generate main config with default exports

[yannbf]

Issue: #20554

What I did

The format of main.js coming from Storybook's init command changes from:

module.exports = {
  "stories": [
    "../src/**/*.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions"
  ],
  "framework": {
    "name": "@storybook/react-webpack5",
    "options": {}
  },
  "docs": {
    "autodocs": "tag"
  }
};

to

export default {
  "stories": [
    "../src/**/*.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions"
  ],
  "framework": {
    "name": "@storybook/react-vite",
    "options": {}
  },
  "docs": {
    "autodocs": "tag"
  }
};

Additionally, it will generate main.ts and preview.ts in typescript projects, always importing from the framework which the CLI generates the project with:

import { StorybookConfig } from '@storybook/react-webpack5';

const config: StorybookConfig = {
  "stories": [
    "../src/**/*.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions"
  ],
  "framework": {
    "name": "@storybook/react-webpack5",
    "options": {}
  },
  "docs": {
    "autodocs": "tag"
  }
};
export default config;

How to test

1. Bootstrap the packages with yarn task
2. Check a project that does not have Storybook, e.g. any of the before-storybook directories here: https://github.com/storybookjs/sandboxes
3. Run sb init using the built library from this branch, in the directory of that project: <path-to-storybook>/code/lib/cli/bin/index.js init
4. Check whether main and preview files got generated correctly
5. Check whether Storybook runs fine

Special scenarios, apart from the basic ones:

1. Angular. There is the generation of main.ts in the higher level of a single-project angular workspace, but there's also the generation of main.ts in a lower level of a multi-project angular workspace. There were more changes for angular as it involved improving the generated tsconfig file under .storybook dir
2. Svelte(kit). Before, we were forced to generate a main.cjs for compatibility purposes. I removed that logic and it should behave like any other project.

Checklist

• Make sure your changes are tested (stories and/or unit, integration, or end-to-end tests)
• Make sure to add/update documentation regarding your changes
• If you are deprecating/removing a feature, make sure to update
  MIGRATION.MD

Maintainers

• If this PR should be tested against many or all sandboxes,
  make sure to add the ci:merged or ci:daily GH label to it.
• Make sure this PR contains one of the labels below.

["cleanup", "BREAKING CHANGE", "feature request", "bug", "documentation", "maintenance", "dependencies", "other"]

[yannbf]

@kasperpeulen I'm curious about your opinion regarding the main.ts format with Typescript. I choose this route:

import { StorybookConfig } from '@storybook/react-webpack5';

const config: StorybookConfig = {
  "stories": [
    "../src/**/*.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
};
export default config;

Instead of:

import { StorybookConfig } from '@storybook/react-webpack5';

export default {
  "stories": [
    "../src/**/*.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
} as StorybookConfig;

or:

import { StorybookConfig } from '@storybook/react-webpack5';

export default {
  "stories": [
    "../src/**/*.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
} satisfies StorybookConfig;

[IanVS]

I commented in the issue, but maybe that got lost.

Have you considered using a helper like vite's defineConfig? vitejs.dev/config/#config-intellisense? I think it's a bit easier to ensure that everyone gets good types if we take that approach. The helper only exists to provide types.

[yannbf]

I commented in the issue, but maybe that got lost.

Have you considered using a helper like vite's defineConfig? vitejs.dev/config/#config-intellisense? I think it's a bit easier to ensure that everyone gets good types if we take that approach. The helper only exists to provide types.

Thanks for bringing this up! We've had discussions about factory functions quite a few times, and I think that would require its own RFC so we can discuss about that in detail. IMO for now we can't do such a big change given how late we're in the 7.0 release! If we do something like that, we probably need to think overall how we deal with main.js/preview.js/stories format altogether.

[stevezhu]

@kasperpeulen I'm curious about your opinion regarding the main.ts format with Typescript. I choose this route:

import { StorybookConfig } from '@storybook/react-webpack5';

const config: StorybookConfig = {
  "stories": [
    "../src/**/*.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
};
export default config;

Instead of:

import { StorybookConfig } from '@storybook/react-webpack5';

export default {
  "stories": [
    "../src/**/*.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
} as StorybookConfig;

or:

import { StorybookConfig } from '@storybook/react-webpack5';

export default {
  "stories": [
    "../src/**/*.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
} satisfies StorybookConfig;

@yannbf I think satisfies would be the ideal option. The concern would be if people aren't on typescript >= v4.9.
But it in terms of typing, satisfies is a significant advantage over the others due to outputting the most specific type for the export if the config is being imported anywhere else.