fix(storybook): v7 gen docs and install react deps (#16057)

(cherry picked from commit c91c365)

Author: mandarini

docs/generated/packages/storybook/documents/storybook-7-setup.md

@@ -56,11 +56,17 @@ You can generate Storybook configuration for an individual project with this com
 nx g @nrwl/storybook:configuration project-name --storybook7Configuration --storybook7UiFramework=@storybook/react-webpack5
 ```
 
+Make sure to use the framework-specific generators if your project is using Angular, React, Next.js or React Native: [`@nrwl/angular:storybook-configuration`](/packages/angular/generators/storybook-configuration), [`@nrwl/react:storybook-configuration`](/packages/react/generators/storybook-configuration), [`@nrwl/react-native:storybook-configuration`](/packages/react-native/generators/storybook-configuration), for example:
+
+```shell
+nx g @nrwl/angular:storybook-configuration my-angular-project --storybook7Configuration
+```
+
 {% callout type="info" title="For Nx versions <15.9" %}
 The flag is called `storybook7betaConfiguration` for Nx versions <15.9.
 {% /callout %}
 
-In the field `storybook7UiFramework` you must choose one of the following Storybook frameworks:
+If you are NOT using a framework-specific generator, in the field `storybook7UiFramework` you must choose one of the following Storybook frameworks:
 
 - `@storybook/angular`
 - `@storybook/html-webpack5`
@@ -81,15 +87,15 @@ In the field `storybook7UiFramework` you must choose one of the following Storyb
 
 In Storybook 7, [the `framework` field in `.storybook/main.js|ts` is mandatory](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#framework-field-mandatory). You must choose one of the above frameworks when setting up your application.
 
-If you are using one of the framework-specific generators (e.g. [`@nrwl/angular:storybook-configuration`](/packages/angular/generators/storybook-configuration), or [`@nrwl/react:storybook-configuration`](/packages/react/generators/storybook-configuration) for React and Nextjs projects, or [`@nrwl/react-native:storybook-configuration`](/packages/react-native/generators/storybook-configuration), the generator will automatically choose the correct framework for you.
+If you are using one of the framework-specific generators, the generator will automatically choose the correct framework for you.
 
 Choosing one of these frameworks will have the following effects on your workspace:
 
 1. Nx will install all the required Storybook packages that go with it.
 
 2. Nx will generate a root `.storybook` folder and a project-level `.storybook` folder (located under `libs/your-project/.storybook` or `apps/your-project/.storybook`) containing the essential configuration files for Storybook.
 
-3. If you are working on an Angular, a React or a React Native project (and you choose `@storybook/angular`, `@storybook/react` or `@storybook/react-native`) the Nx generator will also generate stories for all the components in your project.
+3. If you are working on an Angular, a React or a React Native project and you use one of the framework-specific generators, Nx will also generate stories for all the components in your project.
 
 4. Nx will create new `targets` in your project's `project.json`, called `storybook` and `build-storybook`, containing all the necessary configuration to serve and build Storybook.
 

docs/shared/packages/storybook/storybook-7-setup.md

@@ -56,11 +56,17 @@ You can generate Storybook configuration for an individual project with this com
 nx g @nrwl/storybook:configuration project-name --storybook7Configuration --storybook7UiFramework=@storybook/react-webpack5
 ```
 
+Make sure to use the framework-specific generators if your project is using Angular, React, Next.js or React Native: [`@nrwl/angular:storybook-configuration`](/packages/angular/generators/storybook-configuration), [`@nrwl/react:storybook-configuration`](/packages/react/generators/storybook-configuration), [`@nrwl/react-native:storybook-configuration`](/packages/react-native/generators/storybook-configuration), for example:
+
+```shell
+nx g @nrwl/angular:storybook-configuration my-angular-project --storybook7Configuration
+```
+
 {% callout type="info" title="For Nx versions <15.9" %}
 The flag is called `storybook7betaConfiguration` for Nx versions <15.9.
 {% /callout %}
 
-In the field `storybook7UiFramework` you must choose one of the following Storybook frameworks:
+If you are NOT using a framework-specific generator, in the field `storybook7UiFramework` you must choose one of the following Storybook frameworks:
 
 - `@storybook/angular`
 - `@storybook/html-webpack5`
@@ -81,15 +87,15 @@ In the field `storybook7UiFramework` you must choose one of the following Storyb
 
 In Storybook 7, [the `framework` field in `.storybook/main.js|ts` is mandatory](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#framework-field-mandatory). You must choose one of the above frameworks when setting up your application.
 
-If you are using one of the framework-specific generators (e.g. [`@nrwl/angular:storybook-configuration`](/packages/angular/generators/storybook-configuration), or [`@nrwl/react:storybook-configuration`](/packages/react/generators/storybook-configuration) for React and Nextjs projects, or [`@nrwl/react-native:storybook-configuration`](/packages/react-native/generators/storybook-configuration), the generator will automatically choose the correct framework for you.
+If you are using one of the framework-specific generators, the generator will automatically choose the correct framework for you.
 
 Choosing one of these frameworks will have the following effects on your workspace:
 
 1. Nx will install all the required Storybook packages that go with it.
 
 2. Nx will generate a root `.storybook` folder and a project-level `.storybook` folder (located under `libs/your-project/.storybook` or `apps/your-project/.storybook`) containing the essential configuration files for Storybook.
 
-3. If you are working on an Angular, a React or a React Native project (and you choose `@storybook/angular`, `@storybook/react` or `@storybook/react-native`) the Nx generator will also generate stories for all the components in your project.
+3. If you are working on an Angular, a React or a React Native project and you use one of the framework-specific generators, Nx will also generate stories for all the components in your project.
 
 4. Nx will create new `targets` in your project's `project.json`, called `storybook` and `build-storybook`, containing all the necessary configuration to serve and build Storybook.
 

packages/storybook/src/generators/init/init.ts

@@ -20,6 +20,7 @@ import {
   litVersion,
   nxVersion,
   reactNativeStorybookLoader,
+  reactVersion,
   storybook7Version,
   storybookReactNativeVersion,
   storybookVersion,
@@ -42,6 +43,21 @@ function checkDependenciesInstalled(host: Tree, schema: Schema) {
   devDependencies['@nrwl/storybook'] = nxVersion;
 
   if (schema.storybook7Configuration) {
+    // Needed for Storybook 7
+    // https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#react-peer-dependencies-required
+    if (
+      !packageJson.dependencies['react'] &&
+      !packageJson.devDependencies['react']
+    ) {
+      dependencies['react'] = reactVersion;
+    }
+    if (
+      !packageJson.dependencies['react-dom'] &&
+      !packageJson.devDependencies['react-dom']
+    ) {
+      dependencies['react-dom'] = reactVersion;
+    }
+
     if (schema.uiFramework === '@storybook/react-native') {
       devDependencies['@storybook/react-native'] = storybookReactNativeVersion;
     } else {

packages/storybook/src/utils/versions.ts

@@ -17,4 +17,5 @@ export const litVersion = '^2.6.1';
 export const htmlWebpackPluginVersion = '^5.5.0';
 export const tsNodeVersion = '10.9.1';
 
-export const storybook7Version = '^7.0.0-rc.0';
+export const storybook7Version = '^7.0.1';
+export const reactVersion = '^18.2.0';