Framework: Add Component Storybook (tweaks)

[gziolo]

Description

Some tweaks for the general setup of #17475.

Changes included:

• Eslint rule updated consolidated with the existing one
• scripts for building and watching packages updated to ignore Storybook files
• @storybook/addon-docs downgraded to the same version as other packages
• babel-loader removed from devDependencies - it isn't explicitly used so dependencies should have more freedom to pick a proper version
• design-system:build runs also npm run build:packages as one of the steps to align with the playground and to fix the issue which will pop up as soon as we start using internal dependencies in stories
• @wordpress/babel-preset-default preset added to the custom Babel config so we don't have to explicitly load React as a dependnecy but rather use @wordpress/element

Unrelated cleanup changes:

• Lerna config updated to ignore some missed files

How has this been tested?

The new storybook was verified to work in development (npm run design-system:dev) and production (npm run design-system:build) modes.

[gziolo]

I see a failing unit test:

https://travis-ci.com/WordPress/gutenberg/jobs/241941170#L5643

FAIL packages/env/tests/cli.test.js
  ● env cli › handles successful commands with messages.
    expect(jest.fn()).toHaveBeenCalledWith(expected)
    Expected mock function to have been called with:
      "success message (in 0s 0ms)"
    as argument 1, but it was called with
      "success message (in 0s 1ms)".
      72 | 		const { spinner } = env.start.mock.calls[ 0 ][ 0 ];
      73 | 		await env.start.mock.results[ 0 ].value;
    > 74 | 		expect( spinner.succeed ).toHaveBeenCalledWith( 'success message (in 0s 0ms)' );
         | 		                          ^
      75 | 	} );
      76 | 	it( 'handles successful commands with spinner text.', async () => {
      77 | 		env.start.mockResolvedValueOnce();
      at Object.toHaveBeenCalledWith (packages/env/tests/cli.test.js:74:29)

It looks like this test depends on the execution time so it might fail from time to time. We probably should limit this check to whether this string starts with success message.

[gziolo]

I rebased changes against the add/storybook-for-components branch which was updated.

[gziolo]

We should also explore how to setup Storybook for RN:
https://storybook.js.org/docs/guides/guide-react-native/

[epiqueras]

It looks like this test depends on the execution time so it might fail from time to time. We probably should limit this check to whether this string starts with success message.

We should mock timers, I thought we already did.

We should also explore how to setup Storybook for RN:

For running on-device? Or are you proposing we have a second deployment that runs a web emulator?

[epiqueras]

@gziolo I've addressed the timing test issue in one of the Env follow ups in case there are some requirements that stop us from mocking timers: 43f1b23.

It'd be good to get those merged soon.

[gziolo]

We should also explore how to setup Storybook for RN:

For running on-device? Or are you proposing we have a second deployment that runs a web emulator?

For running on the real device or the simulator. This is the only way to ensure that we build cross-platform components.

[epiqueras]

For running on the real device or the simulator. This is the only way to ensure that we build cross-platform components.

I'll add it to my list.

[epiqueras]

For running on the real device or the simulator. This is the only way to ensure that we build cross-platform components.

#17829

[gziolo]

How about we override install here to skip npm run build?

[epiqueras]

if: branch = master stops the entire stage from running outside of master, right?

[epiqueras]

Oh I see what you mean, because the playground already runs build. Yeah, good catch!