Merge pull request #43 from storybookjs/fix/revert-csf3

Revert CSF3 support

Author: yannbf

README.md

@@ -156,38 +156,6 @@ Primary.args.children;
 Primary.args!.children;
 ```
 
-### CSF3
-
-Storybook released a [new version of CSF](https://storybook.js.org/blog/component-story-format-3-0/), where the story can also be an object. This is supported in @storybook/testing-react. CSF3 also brings a new function called `play`, where you can write automated interactions to the story.
-
-In @storybook/testing-react, the `play` does not run automatically for you, but rather comes in the returned component, and you can execute it as you please.
-
-Consider the following example:
-
-```tsx
-export const InputFieldFilled: Story<InputFieldProps> = {
-  play: async () => {
-    await userEvent.type(screen.getByRole('textbox'), 'Hello world!');
-  },
-};
-```
-
-You can use the play function like this:
-
-```tsx
-const { InputFieldFilled } = composeStories(stories);
-
-test('renders with play function', async () => {
-  render(<InputFieldFilled />);
-
-  // play an interaction that fills the input
-  await InputFieldFilled.play!();
-
-  const input = screen.getByRole('textbox') as HTMLInputElement;
-  expect(input.value).toEqual('Hello world!');
-});
-```
-
 ## Typescript
 
 `@storybook/testing-react` is typescript ready and provides autocompletion to easily detect all stories of your component:

example/package.json

@@ -35,10 +35,10 @@
     "typescript": "^3.9.7"
   },
   "devDependencies": {
-    "@storybook/addon-essentials": "^6.4.0-alpha.17",
-    "@storybook/react": "^6.4.0-alpha.17",
-    "@storybook/components": "^6.4.0-alpha.17",
-    "@storybook/theming": "^6.4.0-alpha.17",
+    "@storybook/addon-essentials": "^6.3.0",
+    "@storybook/react": "^6.3.0",
+    "@storybook/components": "^6.3.0",
+    "@storybook/theming": "^6.3.0",
     "@storybook/preset-create-react-app": "^3.1.5",
     "@testing-library/react": "^11.2.5",
     "@testing-library/user-event": "^13.1.9"

example/src/components/Button.stories.tsx

@@ -1,7 +1,5 @@
 import React from 'react';
 import { Story, Meta } from '@storybook/react';
-import { screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
 
 import { Button, ButtonProps } from './Button';
 
@@ -53,32 +51,9 @@ export const StoryWithParamsAndDecorator: Story<ButtonProps> = (args) => {
   return <Button {...args} />;
 };
 StoryWithParamsAndDecorator.args = {
-  children: 'foo',
-};
+  children: 'foo'
+}
 StoryWithParamsAndDecorator.parameters = {
-  layout: 'centered',
-};
-StoryWithParamsAndDecorator.decorators = [(StoryFn) => <StoryFn />];
-
-export const CSF3Button: Story<ButtonProps> = {
-  args: { children: 'foo' },
-};
-
-export const CSF3ButtonWithRender: Story<ButtonProps> = {
-  ...CSF3Button,
-  render: (args: ButtonProps) => (
-    <div>
-      <p data-testid="custom-render">I am a custom render function</p>
-      <Button {...args} />
-    </div>
-  ),
-};
-
-export const InputFieldFilled: Story = {
-  render: () => {
-    return <input />
-  },
-  play: async () => {
-    await userEvent.type(screen.getByRole('textbox'), 'Hello world!');
-  }
-};
+  layout: 'centered'
+}
+StoryWithParamsAndDecorator.decorators = [(StoryFn) => <StoryFn />]

example/src/components/Button.test.tsx

@@ -60,40 +60,3 @@ describe('GlobalConfig', () => {
     expect(buttonElement).not.toBeNull();
   });
 });
-
-describe('CSF3', () => {
-  test('renders with inferred globalRender', () => {
-    const Primary = composeStory(
-      stories.CSF3Button,
-      stories.default
-    );
-
-    render(<Primary>Hello world</Primary>);
-    const buttonElement = screen.getByText(/Hello world/i);
-    expect(buttonElement).not.toBeNull();
-  });
-
-  test('renders with custom render function', () => {
-    const Primary = composeStory(
-      stories.CSF3ButtonWithRender,
-      stories.default
-    );
-
-    render(<Primary />);
-    expect(screen.getByTestId("custom-render")).not.toBeNull();
-  });
-
-  test('renders with play function', async () => {
-    const InputFieldFilled = composeStory(
-      stories.InputFieldFilled,
-      stories.default
-    );
-
-    render(<InputFieldFilled />);
-
-    await InputFieldFilled.play!();
-
-    const input = screen.getByRole('textbox') as HTMLInputElement;
-    expect(input.value).toEqual('Hello world!');
-  });
-});

example/src/internals.test.tsx

@@ -13,8 +13,7 @@ test('returns composed parameters from story', () => {
   expect(StoryWithParamsAndDecorator.args).toEqual(stories.StoryWithParamsAndDecorator.args);
   expect(StoryWithParamsAndDecorator.parameters).toEqual({
     ...stories.StoryWithParamsAndDecorator.parameters,
-    ...globalConfig.parameters,
-    component: stories.default.component
+    ...globalConfig.parameters
   });
   expect(StoryWithParamsAndDecorator.decorators).toEqual([
     ...stories.StoryWithParamsAndDecorator.decorators!,