Core: Add framework field support to main.js

examples/react-ts/.storybook/main.ts

@@ -3,8 +3,8 @@ import type { StorybookConfig } from '@storybook/react/types';
 const config: StorybookConfig = {
   stories: [{ directory: '../src', titlePrefix: 'Demo' }],
   logLevel: 'debug',
+  framework: '@storybook/react',
   addons: [
-    '@storybook/react',
     '@storybook/addon-essentials',
     '@storybook/addon-storysource',
     '@storybook/addon-storyshots',

lib/core-common/src/presets.test.ts

@@ -412,6 +412,7 @@ describe('resolveAddonName', () => {
 });
 
 describe('loadPreset', () => {
+  mockPreset('@storybook/react', {});
   mockPreset('@storybook/preset-typescript', {});
   mockPreset('@storybook/addon-docs/preset', {});
   mockPreset('@storybook/addon-actions/register', {});
@@ -422,6 +423,54 @@ describe('loadPreset', () => {
 
   const { loadPreset } = jest.requireActual('./presets');
 
+  it('should prepend framework field to list of presets', () => {
+    const loaded = loadPreset(
+      {
+        name: '',
+        type: 'managerEntries',
+        framework: '@storybook/react',
+        presets: ['@storybook/preset-typescript'],
+        addons: ['@storybook/addon-docs'],
+      },
+      0,
+      {}
+    );
+    expect(loaded).toMatchInlineSnapshot(`
+      Array [
+        Object {
+          "name": "@storybook/react",
+          "options": Object {},
+          "preset": Object {},
+        },
+        Object {
+          "name": "@storybook/preset-typescript",
+          "options": Object {},
+          "preset": Object {},
+        },
+        Object {
+          "name": "@storybook/addon-docs/preset",
+          "options": Object {},
+          "preset": Object {},
+        },
+        Object {
+          "name": Object {
+            "addons": Array [
+              "@storybook/addon-docs",
+            ],
+            "framework": "@storybook/react",
+            "name": "",
+            "presets": Array [
+              "@storybook/preset-typescript",
+            ],
+            "type": "managerEntries",
+          },
+          "options": Object {},
+          "preset": Object {},
+        },
+      ]
+    `);
+  });
+
   it('should resolve all addons & presets in correct order', () => {
     const loaded = loadPreset(
       {

lib/core-common/src/presets.ts

@@ -26,13 +26,15 @@ export function filterPresetsConfig(presetsConfig: PresetConfig[]): PresetConfig
 function resolvePresetFunction<T = any>(
   input: T[] | Function,
   presetOptions: any,
+  framework: T,
   storybookOptions: InterPresetOptions
 ): T[] {
+  const prepend = [(framework as unknown) as T].filter(Boolean);
   if (isFunction(input)) {
-    return input({ ...storybookOptions, ...presetOptions });
+    return [...prepend, ...input({ ...storybookOptions, ...presetOptions })];
   }
   if (Array.isArray(input)) {
-    return input;
+    return [...prepend, ...input];
   }
 
   return [];
@@ -163,10 +165,20 @@ export function loadPreset(
     }
 
     if (isObject(contents)) {
-      const { addons: addonsInput, presets: presetsInput, ...rest } = contents;
+      const { addons: addonsInput, presets: presetsInput, framework, ...rest } = contents;
 
-      const subPresets = resolvePresetFunction(presetsInput, presetOptions, storybookOptions);
-      const subAddons = resolvePresetFunction(addonsInput, presetOptions, storybookOptions);
+      const subPresets = resolvePresetFunction(
+        presetsInput,
+        presetOptions,
+        framework,
+        storybookOptions
+      );
+      const subAddons = resolvePresetFunction(
+        addonsInput,
+        presetOptions,
+        framework,
+        storybookOptions
+      );
 
       return [
         ...loadPresets([...subPresets], level + 1, storybookOptions),
@@ -292,6 +304,8 @@ export function loadAllPresets(
     }
 ) {
   const { corePresets = [], frameworkPresets = [], overridePresets = [], ...restOptions } = options;
+  // const main = serverRequire(resolve(options.configDir, 'main'));
+  // const framework = main?.framework ? [require.resolve(main.framework)] : frameworkPresets;
 
   const presetsConfig: PresetConfig[] = [
     ...corePresets,

lib/core-common/src/types.ts

@@ -246,6 +246,13 @@ export type NormalizedStoriesSpecifier = Required<StoriesSpecifier> & {
   importPathMatcher: RegExp;
 };
 
+export type Preset =
+  | string
+  | {
+      name: string;
+      options?: any;
+    };
+
 /**
  * The interface for Storybook configuration in `main.ts` files.
  */
@@ -255,13 +262,7 @@ export interface StorybookConfig {
    *
    * @example `['@storybook/addon-essentials']` or `[{ name: '@storybook/addon-essentials', options: { backgrounds: false } }]`
    */
-  addons?: Array<
-    | string
-    | {
-        name: string;
-        options?: any;
-      }
-  >;
+  addons?: Preset[];
   core?: CoreConfig;
   logLevel?: string;
   features?: {
@@ -302,16 +303,24 @@ export interface StorybookConfig {
      */
     babelModeV7?: boolean;
   };
+
   /**
    * Tells Storybook where to find stories.
    *
    * @example `['./src/*.stories.@(j|t)sx?']`
    */
   stories: StoriesEntry[];
+
+  /**
+   * Framework, e.g. '@storybook/react', required in v7
+   */
+  framework?: Preset;
+
   /**
    * Controls how Storybook handles TypeScript files.
    */
   typescript?: Partial<TypescriptOptions>;
+
   /**
    * Modify or return a custom Webpack config.
    */