Merge pull request #15742 from yngvebn/csf3_angular_globalrenderer

Angular: Add global CSF3 renderer

app/angular/src/client/preview/index.ts

@@ -1,11 +1,11 @@
 /* eslint-disable prefer-destructuring */
-import { RenderStoryFunction, start } from '@storybook/core/client';
 import { ClientStoryApi, Loadable } from '@storybook/addons';
-
+import { RenderStoryFunction, start } from '@storybook/core/client';
+import decorateStory from './decorateStory';
 import './globals';
 import render from './render';
-import decorateStory from './decorateStory';
 import { IStorybookSection, StoryFnAngularReturnType } from './types';
+import { Story } from './types-6-0';
 
 const framework = 'angular';
 
@@ -19,8 +19,11 @@ interface ClientApi extends ClientStoryApi<StoryFnAngularReturnType> {
   load: (...args: any[]) => void;
 }
 
+const globalRender: Story = (props) => ({ props });
+
 const api = start((render as any) as RenderStoryFunction, { decorateStory });
 
+api.clientApi.globalRender = globalRender;
 export const storiesOf: ClientApi['storiesOf'] = (kind, m) => {
   return (api.clientApi.storiesOf(kind, m) as ReturnType<ClientApi['storiesOf']>).addParameters({
     framework,

examples/angular-cli/.storybook/main.js

@@ -19,6 +19,9 @@ module.exports = {
   angularOptions: {
     enableIvy: true,
   },
+  features: {
+    previewCsfV3: true,
+  },
   // These are just here to test composition. They could be added to any storybook example project
   refs: {
     first: {

examples/angular-cli/src/stories/preview/csf3/input-with-play.stories.ts

@@ -0,0 +1,32 @@
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { InputComponent } from './sb-input.component';
+
+export default {
+  title: 'Preview/CSF3/WithPlayFunction',
+  component: InputComponent,
+  parameters: {
+    // disabled : Not compatible yet with csf3
+    storyshots: { disable: true },
+  },
+};
+
+export const Default = {
+  title: 'Default',
+  play: async () => {
+    const input = await screen.getByAltText('sb-input');
+    await userEvent.type(input, `Typing from CSF3`);
+  },
+};
+
+export const WithTemplate = {
+  title: 'Template',
+  render: (props) => ({
+    props,
+    template: '<h1>Heading</h1><sb-input></sb-input>',
+  }),
+  play: async () => {
+    const input = await screen.getByAltText('sb-input');
+    await userEvent.type(input, `Typing from CSF3`);
+  },
+};

examples/angular-cli/src/stories/preview/csf3/sb-input.component.ts

@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'sb-input',
+  template: `<input type="text" alt="sb-input" />`,
+})
+export class InputComponent {}