feat(storybook): allow users to init storybook with more frameworks (#6491)

ISSUES CLOSED: #5985
2021-07-23 16:32:12 +03:00 · 2021-07-23 16:32:12 +03:00 · 0bacdf3181
commit 0bacdf3181
parent a4020b03c6
14 changed files with 162 additions and 10 deletions
--- a/docs/angular/api-storybook/executors/storybook.md
+++ b/docs/angular/api-storybook/executors/storybook.md
@ -12,7 +12,7 @@ Default: `@storybook/angular`

 Type: `string`

-Possible values: `@storybook/angular`, `@storybook/react`, `@storybook/html`
+Possible values: `@storybook/angular`, `@storybook/react`, `@storybook/html`, `@storybook/web-components`, `@storybook/vue`

 Storybook framework npm package

--- a/docs/node/api-storybook/executors/storybook.md
+++ b/docs/node/api-storybook/executors/storybook.md
@ -13,7 +13,7 @@ Default: `@storybook/angular`

 Type: `string`

-Possible values: `@storybook/angular`, `@storybook/react`, `@storybook/html`
+Possible values: `@storybook/angular`, `@storybook/react`, `@storybook/html`, `@storybook/web-components`, `@storybook/vue`

 Storybook framework npm package

--- a/docs/react/api-storybook/executors/storybook.md
+++ b/docs/react/api-storybook/executors/storybook.md
@ -13,7 +13,7 @@ Default: `@storybook/angular`

 Type: `string`

-Possible values: `@storybook/angular`, `@storybook/react`, `@storybook/html`
+Possible values: `@storybook/angular`, `@storybook/react`, `@storybook/html`, `@storybook/web-components`, `@storybook/vue`

 Storybook framework npm package

--- a/nx-dev/nx-dev/public/documentation/latest/angular/api-storybook/executors/storybook.md
+++ b/nx-dev/nx-dev/public/documentation/latest/angular/api-storybook/executors/storybook.md
@ -12,7 +12,7 @@ Default: `@storybook/angular`

 Type: `string`

-Possible values: `@storybook/angular`, `@storybook/react`, `@storybook/html`
+Possible values: `@storybook/angular`, `@storybook/react`, `@storybook/html`, `@storybook/web-components`, `@storybook/vue`

 Storybook framework npm package

--- a/nx-dev/nx-dev/public/documentation/latest/node/api-storybook/executors/storybook.md
+++ b/nx-dev/nx-dev/public/documentation/latest/node/api-storybook/executors/storybook.md
@ -13,7 +13,7 @@ Default: `@storybook/angular`

 Type: `string`

-Possible values: `@storybook/angular`, `@storybook/react`, `@storybook/html`
+Possible values: `@storybook/angular`, `@storybook/react`, `@storybook/html`, `@storybook/web-components`, `@storybook/vue`

 Storybook framework npm package

--- a/nx-dev/nx-dev/public/documentation/latest/react/api-storybook/executors/storybook.md
+++ b/nx-dev/nx-dev/public/documentation/latest/react/api-storybook/executors/storybook.md
@ -13,7 +13,7 @@ Default: `@storybook/angular`

 Type: `string`

-Possible values: `@storybook/angular`, `@storybook/react`, `@storybook/html`
+Possible values: `@storybook/angular`, `@storybook/react`, `@storybook/html`, `@storybook/web-components`, `@storybook/vue`

 Storybook framework npm package

--- a/packages/storybook/src/executors/storybook/schema.json
+++ b/packages/storybook/src/executors/storybook/schema.json
@ -7,7 +7,13 @@
    "uiFramework": {
      "type": "string",
      "description": "Storybook framework npm package",
-      "enum": ["@storybook/angular", "@storybook/react", "@storybook/html"],
+      "enum": [
+        "@storybook/angular",
+        "@storybook/react",
+        "@storybook/html",
+        "@storybook/web-components",
+        "@storybook/vue"
+      ],
      "default": "@storybook/angular",
      "hidden": true
    },
--- a/packages/storybook/src/executors/storybook/storybook.impl.ts
+++ b/packages/storybook/src/executors/storybook/storybook.impl.ts
@ -15,7 +15,12 @@ export interface StorybookConfig {
 }

 export interface StorybookExecutorOptions {
-  uiFramework: '@storybook/angular' | '@storybook/react' | '@storybook/html';
+  uiFramework:
+    | '@storybook/angular'
+    | '@storybook/react'
+    | '@storybook/html'
+    | '@storybook/web-components'
+    | '@storybook/vue';
  projectBuildConfig?: string;
  config: StorybookConfig;
  host?: string;
--- a/packages/storybook/src/executors/utils.ts
+++ b/packages/storybook/src/executors/utils.ts
@ -12,6 +12,9 @@ export function getStorybookFrameworkPath(uiFramework) {
    '@storybook/angular': '@storybook/angular/dist/ts3.9/server/options',
    '@storybook/react': '@storybook/react/dist/cjs/server/options',
    '@storybook/html': '@storybook/html/dist/cjs/server/options',
+    '@storybook/vue': '@storybook/vue/dist/cjs/server/options',
+    '@storybook/web-components"':
+      '@storybook/web-components"/dist/cjs/server/options',
  };

  if (isStorybookV62onwards(uiFramework)) {
--- a/packages/storybook/src/generators/init/init.spec.ts
+++ b/packages/storybook/src/generators/init/init.spec.ts
@ -122,6 +122,92 @@ describe('@nrwl/storybook:init', () => {
    expect(packageJson.devDependencies['@storybook/html']).toBeDefined();
  });

+  it('should add web-components related dependencies when using html as uiFramework', async () => {
+    const existing = 'existing';
+    const existingVersion = '1.0.0';
+    addDependenciesToPackageJson(
+      tree,
+      { '@nrwl/storybook': storybookVersion, [existing]: existingVersion },
+      { [existing]: existingVersion }
+    );
+    await initGenerator(tree, {
+      uiFramework: '@storybook/web-components',
+    });
+    const packageJson = readJson(tree, 'package.json');
+
+    // general deps
+    expect(packageJson.devDependencies['@nrwl/storybook']).toBeDefined();
+    expect(packageJson.dependencies['@nrwl/storybook']).toBeUndefined();
+    expect(packageJson.dependencies[existing]).toBeDefined();
+    expect(packageJson.devDependencies[existing]).toBeDefined();
+    expect(
+      packageJson.devDependencies['@storybook/addon-essentials']
+    ).toBeDefined();
+
+    // react specific
+    expect(packageJson.devDependencies['@storybook/react']).not.toBeDefined();
+    expect(packageJson.devDependencies['@babel/core']).not.toBeDefined();
+    expect(packageJson.devDependencies['babel-loader']).not.toBeDefined();
+
+    // angular specific
+    expect(packageJson.devDependencies['@storybook/angular']).not.toBeDefined();
+    expect(packageJson.devDependencies['@angular/forms']).not.toBeDefined();
+
+    // generic html specific
+    expect(packageJson.devDependencies['@storybook/html']).not.toBeDefined();
+
+    // generic web-components specific
+    expect(
+      packageJson.devDependencies['@storybook/web-components']
+    ).toBeDefined();
+
+    // generic vue specific
+    expect(packageJson.devDependencies['@storybook/vue']).not.toBeDefined();
+  });
+
+  it('should add vue related dependencies when using html as uiFramework', async () => {
+    const existing = 'existing';
+    const existingVersion = '1.0.0';
+    addDependenciesToPackageJson(
+      tree,
+      { '@nrwl/storybook': storybookVersion, [existing]: existingVersion },
+      { [existing]: existingVersion }
+    );
+    await initGenerator(tree, {
+      uiFramework: '@storybook/vue',
+    });
+    const packageJson = readJson(tree, 'package.json');
+
+    // general deps
+    expect(packageJson.devDependencies['@nrwl/storybook']).toBeDefined();
+    expect(packageJson.dependencies['@nrwl/storybook']).toBeUndefined();
+    expect(packageJson.dependencies[existing]).toBeDefined();
+    expect(packageJson.devDependencies[existing]).toBeDefined();
+    expect(
+      packageJson.devDependencies['@storybook/addon-essentials']
+    ).toBeDefined();
+
+    // react specific
+    expect(packageJson.devDependencies['@storybook/react']).not.toBeDefined();
+    expect(packageJson.devDependencies['@babel/core']).not.toBeDefined();
+    expect(packageJson.devDependencies['babel-loader']).not.toBeDefined();
+
+    // angular specific
+    expect(packageJson.devDependencies['@storybook/angular']).not.toBeDefined();
+    expect(packageJson.devDependencies['@angular/forms']).not.toBeDefined();
+
+    // generic html specific
+    expect(packageJson.devDependencies['@storybook/html']).not.toBeDefined();
+
+    // generic web-components specific
+    expect(
+      packageJson.devDependencies['@storybook/web-components']
+    ).not.toBeDefined();
+
+    // generic vue specific
+    expect(packageJson.devDependencies['@storybook/vue']).toBeDefined();
+  });
+
  it('should add build-storybook to cacheable operations', async () => {
    await initGenerator(tree, {
      uiFramework: '@storybook/html',
@ -131,4 +217,24 @@ describe('@nrwl/storybook:init', () => {
      nxJson.tasksRunnerOptions.default.options.cacheableOperations
    ).toContain('build-storybook');
  });
+
+  it('should add build-storybook to cacheable operations for web-components', async () => {
+    await initGenerator(tree, {
+      uiFramework: '@storybook/web-components',
+    });
+    const nxJson = readJson(tree, 'nx.json');
+    expect(
+      nxJson.tasksRunnerOptions.default.options.cacheableOperations
+    ).toContain('build-storybook');
+  });
+
+  it('should add build-storybook to cacheable operations for vue', async () => {
+    await initGenerator(tree, {
+      uiFramework: '@storybook/vue',
+    });
+    const nxJson = readJson(tree, 'nx.json');
+    expect(
+      nxJson.tasksRunnerOptions.default.options.cacheableOperations
+    ).toContain('build-storybook');
+  });
 });
--- a/packages/storybook/src/generators/init/init.ts
+++ b/packages/storybook/src/generators/init/init.ts
@ -91,6 +91,14 @@ function checkDependenciesInstalled(host: Tree, schema: Schema) {
    devDependencies['@storybook/html'] = storybookVersion;
  }

+  if (isFramework('vue', schema)) {
+    devDependencies['@storybook/vue'] = storybookVersion;
+  }
+
+  if (isFramework('web-components', schema)) {
+    devDependencies['@storybook/web-components'] = storybookVersion;
+  }
+
  return addDependenciesToPackageJson(host, dependencies, devDependencies);
 }

--- a/packages/storybook/src/generators/init/schema.d.ts
+++ b/packages/storybook/src/generators/init/schema.d.ts
@ -1,3 +1,8 @@
 export interface Schema {
-  uiFramework: '@storybook/angular' | '@storybook/react' | '@storybook/html';
+  uiFramework:
+    | '@storybook/angular'
+    | '@storybook/react'
+    | '@storybook/html'
+    | '@storybook/web-components'
+    | '@storybook/vue';
 }
--- a/packages/storybook/src/generators/init/schema.json
+++ b/packages/storybook/src/generators/init/schema.json
@ -7,7 +7,13 @@
    "uiFramework": {
      "type": "string",
      "description": "Storybook UI Framework to use",
-      "enum": ["@storybook/angular", "@storybook/react", "@storybook/html"],
+      "enum": [
+        "@storybook/angular",
+        "@storybook/react",
+        "@storybook/html",
+        "@storybook/web-components",
+        "@storybook/vue"
+      ],
      "x-prompt": "What UI framework plugin should storybook use?"
    }
  }
--- a/packages/storybook/src/utils/utilities.ts
+++ b/packages/storybook/src/utils/utilities.ts
@ -14,6 +14,8 @@ export const Constants = {
    angular: '@storybook/angular',
    react: '@storybook/react',
    html: '@storybook/html',
+    'web-components': '@storybook/web-components',
+    vue: '@storybook/vue',
  } as const,
 };
 type Constants = typeof Constants;
@ -36,6 +38,17 @@ export function isFramework(
    return true;
  }

+  if (
+    type === 'web-components' &&
+    schema.uiFramework === '@storybook/web-components'
+  ) {
+    return true;
+  }
+
+  if (type === 'vue' && schema.uiFramework === '@storybook/vue') {
+    return true;
+  }
+
  return false;
 }