@storybook/angular 7.5.0-alpha.5 → 7.5.0-alpha.7

package/dist/client/angular-beta/utils/PropertyExtractor.js

@@ -130,7 +130,7 @@ PropertyExtractor.analyzeDecorators = (component) => {
     const isDirective = decorators.some((d) => _a.isDecoratorInstanceOf(d, 'Directive'));
     const isPipe = decorators.some((d) => _a.isDecoratorInstanceOf(d, 'Pipe'));
     const isDeclarable = isComponent || isDirective || isPipe;
-    const isStandalone = isComponent && decorators.some((d) => d.standalone);
+    const isStandalone = (isComponent || isDirective) && decorators.some((d) => d.standalone);
     return { isDeclarable, isStandalone };
 };
 PropertyExtractor.isDecoratorInstanceOf = (decorator, name) => {

package/dist/client/angular-beta/utils/PropertyExtractor.test.js

@@ -18,6 +18,8 @@ const StandaloneTestComponent = (0, core_1.Component)({ standalone: true })(clas
 });
 const TestDirective = (0, core_1.Directive)({})(class {
 });
+const StandaloneTestDirective = (0, core_1.Directive)({ standalone: true })(class {
+});
 const TestModuleWithDeclarations = (0, core_1.NgModule)({ declarations: [TestComponent1] })(class {
 });
 const TestModuleWithImportsAndProviders = (0, core_1.NgModule)({
@@ -108,6 +110,16 @@ describe('PropertyExtractor', () => {
                 StandaloneTestComponent,
             ]);
         });
+        it('should return standalone directives', () => {
+            const imports = extractImports({
+                imports: [TestModuleWithImportsAndProviders],
+            }, StandaloneTestDirective);
+            expect(imports).toEqual([
+                common_1.CommonModule,
+                TestModuleWithImportsAndProviders,
+                StandaloneTestDirective,
+            ]);
+        });
     });
     describe('extractDeclarations', () => {
         it('should return an array of declarations that contains `storyComponent`', () => {

package/dist/client/argsToTemplate.d.ts

@@ -0,0 +1,55 @@
+/**
+ * Options for controlling the behavior of the argsToTemplate function.
+ *
+ * @template T The type of the keys in the target object.
+ */
+export interface ArgsToTemplateOptions<T> {
+    /**
+     * An array of keys to specifically include in the output.
+     * If provided, only the keys from this array will be included in the output,
+     * irrespective of the `exclude` option. Undefined values will still be excluded from the output.
+     */
+    include?: Array<T>;
+    /**
+     * An array of keys to specifically exclude from the output.
+     * If provided, these keys will be omitted from the output. This option is
+     * ignored if the `include` option is also provided
+     */
+    exclude?: Array<T>;
+}
+/**
+ * Converts an object of arguments to a string of property and event bindings and excludes undefined values.
+ * Why? Because Angular treats undefined values in property bindings as an actual value
+ * and does not apply the default value of the property as soon as the binding is set.
+ * This feels counter-intuitive and is a common source of bugs in stories.
+ * @example
+ * ```ts
+ * // component.ts
+ *ㅤ@Component({ selector: 'example' })
+ *  export class ExampleComponent {
+ *   ㅤ@Input() input1: string = 'Default Input1';
+ *   ㅤ@Input() input2: string = 'Default Input2';
+ *   ㅤ@Output() click = new EventEmitter();
+ *  }
+ *
+ * // component.stories.ts
+ * import { argsToTemplate } from '@storybook/angular';
+ * export const Input1: Story = {
+ *  render: (args) => ({
+ *    props: args,
+ *    // Problem1: <example [input1]="input1" [input2]="input2" (click)="click($event)"></example>
+ *    // This will set input2 to undefined and the internal default value will not be used.
+ *    // Problem2: <example [input1]="input1" (click)="click($event)"></example>
+ *    // The default value of input2 will be used, but it is not overridable by the user via controls.
+ *    // Solution: Now the controls will be applicable to both input1 and input2, and the default values will be used if the user does not override them.
+ *    template: `<example ${argsToTemplate(args)}"></example>`,
+ *  }),
+ *  args: {
+ *    // In this Story, we want to set the input1 property, and the internal default property of input2 should be used.
+ *    input1: 'Input 1',
+ *    click: { action: 'clicked' },
+ *  },
+ *};
+ * ```
+ */
+export declare function argsToTemplate<A extends Record<string, any>>(args: A, options?: ArgsToTemplateOptions<keyof A>): string;

package/dist/client/argsToTemplate.js

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.argsToTemplate = void 0;
+/**
+ * Converts an object of arguments to a string of property and event bindings and excludes undefined values.
+ * Why? Because Angular treats undefined values in property bindings as an actual value
+ * and does not apply the default value of the property as soon as the binding is set.
+ * This feels counter-intuitive and is a common source of bugs in stories.
+ * @example
+ * ```ts
+ * // component.ts
+ *ㅤ@Component({ selector: 'example' })
+ *  export class ExampleComponent {
+ *   ㅤ@Input() input1: string = 'Default Input1';
+ *   ㅤ@Input() input2: string = 'Default Input2';
+ *   ㅤ@Output() click = new EventEmitter();
+ *  }
+ *
+ * // component.stories.ts
+ * import { argsToTemplate } from '@storybook/angular';
+ * export const Input1: Story = {
+ *  render: (args) => ({
+ *    props: args,
+ *    // Problem1: <example [input1]="input1" [input2]="input2" (click)="click($event)"></example>
+ *    // This will set input2 to undefined and the internal default value will not be used.
+ *    // Problem2: <example [input1]="input1" (click)="click($event)"></example>
+ *    // The default value of input2 will be used, but it is not overridable by the user via controls.
+ *    // Solution: Now the controls will be applicable to both input1 and input2, and the default values will be used if the user does not override them.
+ *    template: `<example ${argsToTemplate(args)}"></example>`,
+ *  }),
+ *  args: {
+ *    // In this Story, we want to set the input1 property, and the internal default property of input2 should be used.
+ *    input1: 'Input 1',
+ *    click: { action: 'clicked' },
+ *  },
+ *};
+ * ```
+ */
+function argsToTemplate(args, options = {}) {
+    const includeSet = options.include ? new Set(options.include) : null;
+    const excludeSet = options.exclude ? new Set(options.exclude) : null;
+    return Object.entries(args)
+        .filter(([key]) => args[key] !== undefined)
+        .filter(([key]) => {
+        if (includeSet)
+            return includeSet.has(key);
+        if (excludeSet)
+            return !excludeSet.has(key);
+        return true;
+    })
+        .map(([key, value]) => typeof value === 'function' ? `(${key})="${key}($event)"` : `[${key}]="${key}"`)
+        .join(' ');
+}
+exports.argsToTemplate = argsToTemplate;

package/dist/client/argsToTemplate.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/client/argsToTemplate.test.js

@@ -0,0 +1,95 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const argsToTemplate_1 = require("./argsToTemplate"); // adjust path
+describe('argsToTemplate', () => {
+    it('should correctly convert args to template string and exclude undefined values', () => {
+        const args = {
+            prop1: 'value1',
+            prop2: undefined,
+            prop3: 'value3',
+        };
+        const options = {};
+        const result = (0, argsToTemplate_1.argsToTemplate)(args, options);
+        expect(result).toBe('[prop1]="prop1" [prop3]="prop3"');
+    });
+    it('should include properties from include option', () => {
+        const args = {
+            prop1: 'value1',
+            prop2: 'value2',
+            prop3: 'value3',
+        };
+        const options = {
+            include: ['prop1', 'prop3'],
+        };
+        const result = (0, argsToTemplate_1.argsToTemplate)(args, options);
+        expect(result).toBe('[prop1]="prop1" [prop3]="prop3"');
+    });
+    it('should include non-undefined properties from include option', () => {
+        const args = {
+            prop1: 'value1',
+            prop2: 'value2',
+            prop3: undefined,
+        };
+        const options = {
+            include: ['prop1', 'prop3'],
+        };
+        const result = (0, argsToTemplate_1.argsToTemplate)(args, options);
+        expect(result).toBe('[prop1]="prop1"');
+    });
+    it('should exclude properties from exclude option', () => {
+        const args = {
+            prop1: 'value1',
+            prop2: 'value2',
+            prop3: 'value3',
+        };
+        const options = {
+            exclude: ['prop2'],
+        };
+        const result = (0, argsToTemplate_1.argsToTemplate)(args, options);
+        expect(result).toBe('[prop1]="prop1" [prop3]="prop3"');
+    });
+    it('should exclude properties from exclude option and undefined properties', () => {
+        const args = {
+            prop1: 'value1',
+            prop2: 'value2',
+            prop3: undefined,
+        };
+        const options = {
+            exclude: ['prop2'],
+        };
+        const result = (0, argsToTemplate_1.argsToTemplate)(args, options);
+        expect(result).toBe('[prop1]="prop1"');
+    });
+    it('should prioritize include over exclude when both options are given', () => {
+        const args = {
+            prop1: 'value1',
+            prop2: 'value2',
+            prop3: 'value3',
+        };
+        const options = {
+            include: ['prop1', 'prop2'],
+            exclude: ['prop2', 'prop3'],
+        };
+        const result = (0, argsToTemplate_1.argsToTemplate)(args, options);
+        expect(result).toBe('[prop1]="prop1" [prop2]="prop2"');
+    });
+    it('should work when neither include nor exclude options are given', () => {
+        const args = {
+            prop1: 'value1',
+            prop2: 'value2',
+        };
+        const options = {};
+        const result = (0, argsToTemplate_1.argsToTemplate)(args, options);
+        expect(result).toBe('[prop1]="prop1" [prop2]="prop2"');
+    });
+    it('should bind events correctly when value is a function', () => {
+        const args = { event1: () => { }, event2: () => { } };
+        const result = (0, argsToTemplate_1.argsToTemplate)(args, {});
+        expect(result).toEqual('(event1)="event1($event)" (event2)="event2($event)"');
+    });
+    it('should mix properties and events correctly', () => {
+        const args = { input: 'Value1', event1: () => { } };
+        const result = (0, argsToTemplate_1.argsToTemplate)(args, {});
+        expect(result).toEqual('[input]="input" (event1)="event1($event)"');
+    });
+});

package/dist/client/index.d.ts

@@ -3,3 +3,4 @@ export * from './public-api';
 export * from './public-types';
 export type { StoryFnAngularReturnType as IStory } from './types';
 export { moduleMetadata, componentWrapperDecorator, applicationConfig } from './decorators';
+export { argsToTemplate } from './argsToTemplate';

package/dist/client/index.js

@@ -15,7 +15,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.applicationConfig = exports.componentWrapperDecorator = exports.moduleMetadata = void 0;
+exports.argsToTemplate = exports.applicationConfig = exports.componentWrapperDecorator = exports.moduleMetadata = void 0;
 require("./globals");
 // eslint-disable-next-line import/export
 __exportStar(require("./public-api"), exports);
@@ -25,6 +25,8 @@ var decorators_1 = require("./decorators");
 Object.defineProperty(exports, "moduleMetadata", { enumerable: true, get: function () { return decorators_1.moduleMetadata; } });
 Object.defineProperty(exports, "componentWrapperDecorator", { enumerable: true, get: function () { return decorators_1.componentWrapperDecorator; } });
 Object.defineProperty(exports, "applicationConfig", { enumerable: true, get: function () { return decorators_1.applicationConfig; } });
+var argsToTemplate_1 = require("./argsToTemplate");
+Object.defineProperty(exports, "argsToTemplate", { enumerable: true, get: function () { return argsToTemplate_1.argsToTemplate; } });
 // optimization: stop HMR propagation in webpack
 if (typeof module !== 'undefined')
     module?.hot?.decline();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/angular",
-  "version": "7.5.0-alpha.5",
+  "version": "7.5.0-alpha.7",
   "description": "Storybook for Angular: Develop Angular components in isolation with hot reloading.",
   "keywords": [
     "storybook",
@@ -37,21 +37,21 @@
     "prep": "../../../scripts/prepare/tsc.ts"
   },
   "dependencies": {
-    "@storybook/builder-webpack5": "7.5.0-alpha.5",
-    "@storybook/cli": "7.5.0-alpha.5",
-    "@storybook/client-logger": "7.5.0-alpha.5",
-    "@storybook/core-common": "7.5.0-alpha.5",
-    "@storybook/core-events": "7.5.0-alpha.5",
-    "@storybook/core-server": "7.5.0-alpha.5",
-    "@storybook/core-webpack": "7.5.0-alpha.5",
-    "@storybook/docs-tools": "7.5.0-alpha.5",
+    "@storybook/builder-webpack5": "7.5.0-alpha.7",
+    "@storybook/cli": "7.5.0-alpha.7",
+    "@storybook/client-logger": "7.5.0-alpha.7",
+    "@storybook/core-common": "7.5.0-alpha.7",
+    "@storybook/core-events": "7.5.0-alpha.7",
+    "@storybook/core-server": "7.5.0-alpha.7",
+    "@storybook/core-webpack": "7.5.0-alpha.7",
+    "@storybook/docs-tools": "7.5.0-alpha.7",
     "@storybook/global": "^5.0.0",
-    "@storybook/manager-api": "7.5.0-alpha.5",
-    "@storybook/node-logger": "7.5.0-alpha.5",
-    "@storybook/preview-api": "7.5.0-alpha.5",
-    "@storybook/telemetry": "7.5.0-alpha.5",
-    "@storybook/types": "7.5.0-alpha.5",
-    "@types/node": "^16.0.0",
+    "@storybook/manager-api": "7.5.0-alpha.7",
+    "@storybook/node-logger": "7.5.0-alpha.7",
+    "@storybook/preview-api": "7.5.0-alpha.7",
+    "@storybook/telemetry": "7.5.0-alpha.7",
+    "@storybook/types": "7.5.0-alpha.7",
+    "@types/node": "^18.0.0",
     "@types/react": "^16.14.34",
     "@types/react-dom": "^16.9.14",
     "@types/semver": "^7.3.4",