@storybook/angular 7.0.0-rc.3 → 7.0.0-rc.5

package/dist/builders/build-storybook/index.d.ts

@@ -2,7 +2,7 @@ import { BuilderOutput } from '@angular-devkit/architect';
 import { JsonObject } from '@angular-devkit/core';
 import { CLIOptions } from '@storybook/types';
 import { StylePreprocessorOptions } from '@angular-devkit/build-angular';
-import { StyleElement } from '@angular-devkit/build-angular/src/builders/browser/schema';
+import { AssetPattern, StyleElement } from '@angular-devkit/build-angular/src/builders/browser/schema';
 export type StorybookBuilderOptions = JsonObject & {
     browserTarget?: string | null;
     tsConfig?: string;
@@ -11,6 +11,7 @@ export type StorybookBuilderOptions = JsonObject & {
     compodocArgs: string[];
     styles?: StyleElement[];
     stylePreprocessorOptions?: StylePreprocessorOptions;
+    assets?: AssetPattern[];
 } & Pick<CLIOptions, 'outputDir' | 'configDir' | 'loglevel' | 'quiet' | 'webpackStatsJson' | 'disableTelemetry'>;
 export type StorybookBuilderOutput = JsonObject & BuilderOutput & {};
 declare const _default: import("@angular-devkit/architect/src/internal").Builder<any>;

package/dist/builders/build-storybook/index.js

@@ -16,7 +16,7 @@ function commandBuilder(options, context) {
             : (0, rxjs_1.of)({});
         return runCompodoc$.pipe((0, operators_1.mapTo)({ tsConfig }));
     }), (0, operators_1.map)(({ tsConfig }) => {
-        const { browserTarget, stylePreprocessorOptions, styles, configDir, docs, loglevel, outputDir, quiet, webpackStatsJson, disableTelemetry, } = options;
+        const { browserTarget, stylePreprocessorOptions, styles, configDir, docs, loglevel, outputDir, quiet, webpackStatsJson, disableTelemetry, assets, } = options;
         const standaloneOptions = {
             packageJson: (0, read_pkg_up_1.sync)({ cwd: __dirname }).packageJson,
             configDir,
@@ -30,6 +30,7 @@ function commandBuilder(options, context) {
             angularBuilderOptions: {
                 ...(stylePreprocessorOptions ? { stylePreprocessorOptions } : {}),
                 ...(styles ? { styles } : {}),
+                ...(assets ? { assets } : {}),
             },
             tsConfig,
             webpackStatsJson,

package/dist/builders/build-storybook/schema.json

@@ -47,19 +47,13 @@
         "compodocArgs": {
             "type": "array",
             "description": "Compodoc options : https://compodoc.app/guides/options.html. Options `-p` with tsconfig path and `-d` with workspace root is always given.",
-            "default": [
-                "-e",
-                "json"
-            ],
+            "default": ["-e", "json"],
             "items": {
                 "type": "string"
             }
         },
         "webpackStatsJson": {
-            "type": [
-                "boolean",
-                "string"
-            ],
+            "type": ["boolean", "string"],
             "description": "Write Webpack Stats JSON to disk",
             "default": false
         },
@@ -85,10 +79,56 @@
             },
             "additionalProperties": false,
             "default": ""
+        },
+        "assets": {
+            "type": "array",
+            "description": "List of static application assets.",
+            "default": [],
+            "items": {
+                "$ref": "#/definitions/assetPattern"
+            }
         }
     },
     "additionalProperties": false,
     "definitions": {
+        "assetPattern": {
+            "oneOf": [
+                {
+                    "type": "object",
+                    "properties": {
+                        "followSymlinks": {
+                            "type": "boolean",
+                            "default": false,
+                            "description": "Allow glob patterns to follow symlink directories. This allows subdirectories of the symlink to be searched."
+                        },
+                        "glob": {
+                            "type": "string",
+                            "description": "The pattern to match."
+                        },
+                        "input": {
+                            "type": "string",
+                            "description": "The input directory path in which to apply 'glob'. Defaults to the project root."
+                        },
+                        "ignore": {
+                            "description": "An array of globs to ignore.",
+                            "type": "array",
+                            "items": {
+                                "type": "string"
+                            }
+                        },
+                        "output": {
+                            "type": "string",
+                            "description": "Absolute path within the output."
+                        }
+                    },
+                    "additionalProperties": false,
+                    "required": ["glob", "input", "output"]
+                },
+                {
+                    "type": "string"
+                }
+            ]
+        },
         "styleElement": {
             "oneOf": [
                 {
@@ -110,9 +150,7 @@
                         }
                     },
                     "additionalProperties": false,
-                    "required": [
-                        "input"
-                    ]
+                    "required": ["input"]
                 },
                 {
                     "type": "string",

package/dist/builders/start-storybook/index.d.ts

@@ -2,7 +2,7 @@ import { BuilderOutput } from '@angular-devkit/architect';
 import { JsonObject } from '@angular-devkit/core';
 import { StylePreprocessorOptions } from '@angular-devkit/build-angular';
 import { CLIOptions } from '@storybook/types';
-import { StyleElement } from '@angular-devkit/build-angular/src/builders/browser/schema';
+import { AssetPattern, StyleElement } from '@angular-devkit/build-angular/src/builders/browser/schema';
 export type StorybookBuilderOptions = JsonObject & {
     browserTarget?: string | null;
     tsConfig?: string;
@@ -11,6 +11,7 @@ export type StorybookBuilderOptions = JsonObject & {
     compodocArgs: string[];
     styles?: StyleElement[];
     stylePreprocessorOptions?: StylePreprocessorOptions;
+    assets?: AssetPattern[];
 } & Pick<CLIOptions, 'port' | 'host' | 'configDir' | 'https' | 'sslCa' | 'sslCert' | 'sslKey' | 'smokeTest' | 'ci' | 'quiet' | 'disableTelemetry'>;
 export type StorybookBuilderOutput = JsonObject & BuilderOutput & {};
 declare const _default: import("@angular-devkit/architect/src/internal").Builder<any>;

package/dist/builders/start-storybook/index.js

@@ -16,7 +16,7 @@ function commandBuilder(options, context) {
             : (0, rxjs_1.of)({});
         return runCompodoc$.pipe((0, operators_1.mapTo)({ tsConfig }));
     }), (0, operators_1.map)(({ tsConfig }) => {
-        const { browserTarget, stylePreprocessorOptions, styles, ci, configDir, docs, host, https, port, quiet, smokeTest, sslCa, sslCert, sslKey, disableTelemetry, } = options;
+        const { browserTarget, stylePreprocessorOptions, styles, ci, configDir, docs, host, https, port, quiet, smokeTest, sslCa, sslCert, sslKey, disableTelemetry, assets, } = options;
         const standaloneOptions = {
             packageJson: (0, read_pkg_up_1.sync)({ cwd: __dirname }).packageJson,
             ci,
@@ -36,6 +36,7 @@ function commandBuilder(options, context) {
             angularBuilderOptions: {
                 ...(stylePreprocessorOptions ? { stylePreprocessorOptions } : {}),
                 ...(styles ? { styles } : {}),
+                ...(assets ? { assets } : {}),
             },
             tsConfig,
         };

package/dist/builders/start-storybook/schema.json

@@ -74,10 +74,7 @@
         "compodocArgs": {
             "type": "array",
             "description": "Compodoc options : https://compodoc.app/guides/options.html. Options `-p` with tsconfig path and `-d` with workspace root is always given.",
-            "default": [
-                "-e",
-                "json"
-            ],
+            "default": ["-e", "json"],
             "items": {
                 "type": "string"
             }
@@ -104,10 +101,56 @@
             },
             "additionalProperties": false,
             "default": ""
+        },
+        "assets": {
+            "type": "array",
+            "description": "List of static application assets.",
+            "default": [],
+            "items": {
+                "$ref": "#/definitions/assetPattern"
+            }
         }
     },
     "additionalProperties": false,
     "definitions": {
+        "assetPattern": {
+            "oneOf": [
+                {
+                    "type": "object",
+                    "properties": {
+                        "followSymlinks": {
+                            "type": "boolean",
+                            "default": false,
+                            "description": "Allow glob patterns to follow symlink directories. This allows subdirectories of the symlink to be searched."
+                        },
+                        "glob": {
+                            "type": "string",
+                            "description": "The pattern to match."
+                        },
+                        "input": {
+                            "type": "string",
+                            "description": "The input directory path in which to apply 'glob'. Defaults to the project root."
+                        },
+                        "ignore": {
+                            "description": "An array of globs to ignore.",
+                            "type": "array",
+                            "items": {
+                                "type": "string"
+                            }
+                        },
+                        "output": {
+                            "type": "string",
+                            "description": "Absolute path within the output."
+                        }
+                    },
+                    "additionalProperties": false,
+                    "required": ["glob", "input", "output"]
+                },
+                {
+                    "type": "string"
+                }
+            ]
+        },
         "styleElement": {
             "oneOf": [
                 {
@@ -129,9 +172,7 @@
                         }
                     },
                     "additionalProperties": false,
-                    "required": [
-                        "input"
-                    ]
+                    "required": ["input"]
                 },
                 {
                     "type": "string",

package/dist/builders/utils/standalone-options.d.ts

@@ -1,11 +1,13 @@
 import { BuilderContext } from '@angular-devkit/architect';
+import { AssetPattern, StyleElement, StylePreprocessorOptions } from '@angular-devkit/build-angular/src/builders/browser/schema';
 import { LoadOptions, CLIOptions, BuilderOptions } from '@storybook/types';
 export type StandaloneOptions = CLIOptions & LoadOptions & BuilderOptions & {
     mode?: 'static' | 'dev';
     angularBrowserTarget?: string | null;
     angularBuilderOptions?: Record<string, any> & {
-        styles?: any[];
-        stylePreprocessorOptions?: any;
+        styles?: StyleElement[];
+        stylePreprocessorOptions?: StylePreprocessorOptions;
+        assets?: AssetPattern[];
     };
     angularBuilderContext?: BuilderContext | null;
     tsConfig?: string;

package/dist/client/angular-beta/ComputesTemplateFromComponent.js

@@ -37,14 +37,26 @@ const computesTemplateFromComponent = (component, initialProps, innerTemplate =
 };
 exports.computesTemplateFromComponent = computesTemplateFromComponent;
 const createAngularInputProperty = ({ propertyName, value, argType, }) => {
-    const { name: type = null } = (typeof argType?.type === 'object' && argType?.type) || {};
-    let templateValue = type === 'enum' && value;
-    const actualType = type === 'enum' && typeof value;
-    const requiresBrackets = ['object', 'any', 'boolean', 'enum', 'number'].includes(actualType);
-    if (typeof value === 'object') {
-        templateValue = propertyName;
+    let templateValue;
+    switch (typeof value) {
+        case 'string':
+            templateValue = `'${value}'`;
+            break;
+        case 'object':
+            templateValue = JSON.stringify(value)
+                .replace(/'/g, '\u2019')
+                .replace(/\\"/g, '\u201D')
+                .replace(/"([^-"]+)":/g, '$1: ')
+                .replace(/"/g, "'")
+                .replace(/\u2019/g, "\\'")
+                .replace(/\u201D/g, "\\'")
+                .split(',')
+                .join(', ');
+            break;
+        default:
+            templateValue = value;
     }
-    return `${requiresBrackets ? '[' : ''}${propertyName}${requiresBrackets ? ']' : ''}="${templateValue}"`;
+    return `[${propertyName}]="${templateValue}"`;
 };
 /**
  * Converts a component into a template with inputs/outputs present in initial props

package/dist/client/angular-beta/ComputesTemplateFromComponent.test.js

@@ -291,7 +291,7 @@ describe('angular source decorator', () => {
             };
             const argTypes = {};
             const source = (0, ComputesTemplateFromComponent_1.computesTemplateSourceFromComponent)(component, props, argTypes);
-            expect(source).toEqual(`<doc-button [counter]="4" accent="High" [isDisabled]="true" label="Hello world"></doc-button>`);
+            expect(source).toEqual(`<doc-button [counter]="4" [accent]="'High'" [isDisabled]="true" [label]="'Hello world'"></doc-button>`);
         });
         it('With props should generate tag with outputs', () => {
             const component = input_component_1.InputComponent;
@@ -302,7 +302,7 @@ describe('angular source decorator', () => {
             };
             const argTypes = {};
             const source = (0, ComputesTemplateFromComponent_1.computesTemplateSourceFromComponent)(component, props, argTypes);
-            expect(source).toEqual(`<doc-button [isDisabled]="true" label="Hello world" (onClick)="onClick($event)"></doc-button>`);
+            expect(source).toEqual(`<doc-button [isDisabled]="true" [label]="'Hello world'" (onClick)="onClick($event)"></doc-button>`);
         });
         it('should generate correct property for overridden name for Input', () => {
             const component = input_component_1.InputComponent;
@@ -311,7 +311,7 @@ describe('angular source decorator', () => {
             };
             const argTypes = {};
             const source = (0, ComputesTemplateFromComponent_1.computesTemplateSourceFromComponent)(component, props, argTypes);
-            expect(source).toEqual(`<doc-button color="#ffffff"></doc-button>`);
+            expect(source).toEqual(`<doc-button [color]="'#ffffff'"></doc-button>`);
         });
     });
     describe('with argTypes (from compodoc)', () => {
@@ -340,7 +340,7 @@ describe('angular source decorator', () => {
                 },
             };
             const source = (0, ComputesTemplateFromComponent_1.computesTemplateSourceFromComponent)(component, props, argTypes);
-            expect(source).toEqual(`<doc-button [accent]="ButtonAccent.High" [isDisabled]="false" label="Hello world"></doc-button>`);
+            expect(source).toEqual(`<doc-button [accent]="'High'" [isDisabled]="false" [label]="'Hello world'"></doc-button>`);
         });
         it('Should handle enum without values as string', () => {
             const component = input_component_1.InputComponent;
@@ -367,14 +367,27 @@ describe('angular source decorator', () => {
                 },
             };
             const source = (0, ComputesTemplateFromComponent_1.computesTemplateSourceFromComponent)(component, props, argTypes);
-            expect(source).toEqual(`<doc-button accent="High" [isDisabled]="false" label="Hello world"></doc-button>`);
+            expect(source).toEqual(`<doc-button [accent]="'High'" [isDisabled]="false" [label]="'Hello world'"></doc-button>`);
         });
         it('Should handle objects correctly', () => {
             const component = input_component_1.InputComponent;
             const someDataObject = {
                 one: 'Hello world',
                 two: true,
-                three: ['One', 'Two', 'Three'],
+                three: [
+                    `a string literal with "double quotes"`,
+                    `a string literal with 'single quotes'`,
+                    'a single quoted string with "double quotes"',
+                    "a double quoted string with 'single quotes'",
+                    // eslint-disable-next-line prettier/prettier
+                    'a single quoted string with escaped \'single quotes\'',
+                    // eslint-disable-next-line prettier/prettier
+                    "a double quoted string with escaped \"double quotes\"",
+                    // eslint-disable-next-line no-useless-escape
+                    `a string literal with \'escaped single quotes\'`,
+                    // eslint-disable-next-line no-useless-escape
+                    `a string literal with \"escaped double quotes\"`,
+                ],
             };
             const props = {
                 isDisabled: false,
@@ -384,7 +397,7 @@ describe('angular source decorator', () => {
             const source = (0, ComputesTemplateFromComponent_1.computesTemplateSourceFromComponent)(component, props, null);
             // Ideally we should stringify the object, but that could cause the story to break because of unescaped values in the JSON object.
             // This will have to do for now
-            expect(source).toEqual(`<doc-button [isDisabled]="false" label="Hello world" [someDataObject]="someDataObject"></doc-button>`);
+            expect(source).toEqual(`<doc-button [isDisabled]="false" [label]="'Hello world'" [someDataObject]="{one: 'Hello world', two: true, three: ['a string literal with \\'double quotes\\'', 'a string literal with \\'single quotes\\'', 'a single quoted string with \\'double quotes\\'', 'a double quoted string with \\'single quotes\\'', 'a single quoted string with escaped \\'single quotes\\'', 'a double quoted string with escaped \\'double quotes\\'', 'a string literal with \\'escaped single quotes\\'', 'a string literal with \\'escaped double quotes\\'']}"></doc-button>`);
         });
     });
 });

package/dist/preset.js

@@ -1,10 +1,8 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.typescript = exports.core = exports.previewAnnotations = exports.addons = void 0;
-const path_1 = __importDefault(require("path"));
+const path_1 = require("path");
+const wrapForPnP = (input) => (0, path_1.dirname)(require.resolve((0, path_1.join)(input, 'package.json')));
 exports.addons = [
     require.resolve('./server/framework-preset-angular-cli'),
     require.resolve('./server/framework-preset-angular-ivy'),
@@ -20,7 +18,7 @@ const core = async (config, options) => {
     return {
         ...config,
         builder: {
-            name: path_1.default.dirname(require.resolve(path_1.default.join('@storybook/builder-webpack5', 'package.json'))),
+            name: wrapForPnP('@storybook/builder-webpack5'),
             options: typeof framework === 'string' ? {} : framework.options.builder || {},
         },
     };

package/dist/preset.mjs

@@ -1,4 +1,5 @@
-import path from 'path';
+import { dirname, join } from 'path';
+const wrapForPnP = (input) => dirname(require.resolve(join(input, 'package.json')));
 export const addons = [
     require.resolve('./server/framework-preset-angular-cli'),
     require.resolve('./server/framework-preset-angular-ivy'),
@@ -13,7 +14,7 @@ export const core = async (config, options) => {
     return {
         ...config,
         builder: {
-            name: path.dirname(require.resolve(path.join('@storybook/builder-webpack5', 'package.json'))),
+            name: wrapForPnP('@storybook/builder-webpack5'),
             options: typeof framework === 'string' ? {} : framework.options.builder || {},
         },
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/angular",
-  "version": "7.0.0-rc.3",
+  "version": "7.0.0-rc.5",
   "description": "Storybook for Angular: Develop Angular components in isolation with hot reloading.",
   "keywords": [
     "storybook",
@@ -36,20 +36,20 @@
     "prep": "../../../scripts/prepare/tsc.ts"
   },
   "dependencies": {
-    "@storybook/builder-webpack5": "7.0.0-rc.3",
-    "@storybook/cli": "7.0.0-rc.3",
-    "@storybook/client-logger": "7.0.0-rc.3",
-    "@storybook/core-client": "7.0.0-rc.3",
-    "@storybook/core-common": "7.0.0-rc.3",
-    "@storybook/core-events": "7.0.0-rc.3",
-    "@storybook/core-server": "7.0.0-rc.3",
-    "@storybook/core-webpack": "7.0.0-rc.3",
-    "@storybook/docs-tools": "7.0.0-rc.3",
+    "@storybook/builder-webpack5": "7.0.0-rc.5",
+    "@storybook/cli": "7.0.0-rc.5",
+    "@storybook/client-logger": "7.0.0-rc.5",
+    "@storybook/core-client": "7.0.0-rc.5",
+    "@storybook/core-common": "7.0.0-rc.5",
+    "@storybook/core-events": "7.0.0-rc.5",
+    "@storybook/core-server": "7.0.0-rc.5",
+    "@storybook/core-webpack": "7.0.0-rc.5",
+    "@storybook/docs-tools": "7.0.0-rc.5",
     "@storybook/global": "^5.0.0",
-    "@storybook/manager-api": "7.0.0-rc.3",
-    "@storybook/node-logger": "7.0.0-rc.3",
-    "@storybook/preview-api": "7.0.0-rc.3",
-    "@storybook/types": "7.0.0-rc.3",
+    "@storybook/manager-api": "7.0.0-rc.5",
+    "@storybook/node-logger": "7.0.0-rc.5",
+    "@storybook/preview-api": "7.0.0-rc.5",
+    "@storybook/types": "7.0.0-rc.5",
     "@types/node": "^16.0.0",
     "@types/react": "^16.14.34",
     "@types/react-dom": "^16.9.14",
@@ -123,5 +123,5 @@
   "bundler": {
     "tsConfig": "tsconfig.build.json"
   },
-  "gitHead": "94e99533b214c24691cc9edb3a026d04f20154b6"
+  "gitHead": "851e100b53f1c58b6a79ca3bc0a9c295b385264d"
 }