Framework: Add native storybook for components.

[epiqueras]

Description

This PR adds Storybook for React Native and uses it to create a native version of the @wordpress/components storybook.

This will be super useful for testing cross platform compatibility of components.

The new storybook can be started with npm run design-system:dev:native.

How has this been tested?

It was verified that the web storybook still works as expected and that so does npm run design-system:dev:native.

Screenshots

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.

[gziolo]

Nice one 😍

Based on my previous research and the screenshot included, this still requires a React Native project to be included in the repository so we could run it and embed the Storybook there. As far as I learned, there are 2 strategies:

• the one explained in the screenshot where you bootstrap an example app
• you enabled it as one of the screens in the existing app behind the development flag

@hypest @koke @pinarol - what would be the preferred approach?

[koke]

If I understand it correctly, both approaches could work, but I think having an example app might be less problematic for everyone, at least until we can make the developer onboarding smoother in the current apps

[hypest]

what would be the preferred approach?

I'm assuming that we want to have the native variants of the components running on the device so, we will have to have the full native dev pipeline in place, including the Aztec editor that powers the RichText component. I think an example app will end up replicating much if not all of the https://github.com/wordpress-mobile/gutenberg-mobile setup so, I'd probably wait until we merge that demo app in Gutenberg's repo first. Thoughts?

[gziolo]

I'm assuming that we want to have the native variants of the components running on the device so, we will have to have the full native dev pipeline in place, including the Aztec editor that powers the RichText component. I think an example app will end up replicating much if not all of the https://github.com/wordpress-mobile/gutenberg-mobile setup so, I'd probably wait until we merge that demo app in Gutenberg's repo first. Thoughts?

We can start small with covering only UI components which don't have deep native dependencies like Button component :)

[etoledom]

We can start small with covering only UI components which don't have deep native dependencies like Button component :)

A simple react-native example app/project on gutenberg repo might be a good first step to implementing the mono-repo with gutenberg-mobile. Specially if it works good enough for testing simpler component that doesn't use Aztec or the native Bridge.

[epiqueras]

Based on my previous research and the screenshot included, this still requires a React Native project to be included in the repository

This just runs the server for the mobile client to connect to. The code for the client can be anywhere, it just needs to connect to the machine running this server.

A simple react-native example app/project on gutenberg repo

Yes, we should start with a simple build process that can start a React Native development client to run the native storybook for @wordpress/components.

[hypest]

Yes, we should start with a simple build process that can start a React Native development client to run the native storybook for @wordpress/components

Is anyone already on that task? If yes, it would be ideal to collaborate with @dratwas that will be working these days on the "monorepo" plan (to merge the gutenberg-mobile repo to Gutenberg's) so the efforts are not replicated or diverging too much.

[gziolo]

Let's review it as is then and add native apps integration as soon as we can celebrate all native bits moved to this repository from https://github.com/wordpress-mobile/gutenberg-mobile.

[epiqueras]

@gziolo This is good to go right?

[gziolo]

@gziolo This is good to go right?

I didn't have a chance to play with it. It looks like it's outdated now. I see conflicting files listed.

I guess @hypest @pinarol or @koke should have better idea if this is useful in the current shape.

[koke]

I've been trying to test this one, but I don't know how to make it work. Storybook seems to listen on port 7007, and react-native would try to connect to 8081. As far as I can see, changing the port that react-native tries to connect to can only be done by modifying the react-native sources.

Considering that 7007 is the default for storybook-native, I feel like I'm missing something really obvious here 🤔

[epiqueras]

@koke 7007 is the port for the web interface that accompanies the app. The bundler is still on 8081.

Here is a guide that might be of help: https://pusher.com/tutorials/storybook-react-native.

[koke]

Oh I see, that article was helpful. What's confusing is that npm run design-system:dev:native is not starting the bundler:

koke:~/ $ lsof -nP -i4TCP | grep 'node.*LISTEN'
node      58927 koke   24u  IPv4 0x61a4feb05fbf436b      0t0  TCP 127.0.0.1:7007 (LISTEN)

That article seems to assume you still run the bundler separately (react native run-platform will starting if not running already) and that the app will somehow load the storybook instead of the regular app.

[epiqueras]

Yeah, we would need to have the mobile build process in here to integrate it all into a single command.

Or, I could add a mini standalone RN app, but I feel like that could make it harder to eventually bring in the mobile repo.

[koke]

I've been trying to add a sample app just to test it, and the metro bundler doesn't like running any code outside it's root directory. I think the code in the PR would be OK to merge, but won't really be useful until we can figure out the right layout to launch.

I did one last attempt by running it from within gutenberg-mobile and trying to just import '@wordpress/components/storybook';, but I'm getting an error:

_$$_REQUIRE.context is not a function. (In '_$$_REQUIRE.context('../docs', true, /\/.+\.mdx$/)', '_$$_REQUIRE.context' is undefined)

I think require.context is specific to webpack, and metro's flavor of require doesn't know how to do that. I guess that's why that article is using react-native-storybook-loader.

[epiqueras]

I think require.context is specific to webpack, and metro's flavor of require doesn't know how to do that.

Yeah, we'll need to polyfill it.

I think the code in the PR would be OK to merge, but won't really be useful until we can figure out the right layout to launch.

We might as well just wait until the mobile code is merged in then. I'll close this for now.