Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Framework: Add native storybook for components. #17829

Open
wants to merge 1 commit into
base: master
from

Conversation

@epiqueras
Copy link
Contributor

commented Oct 7, 2019

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

Screen Shot 2019-10-07 at 2 12 34 PM

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

This comment has been minimized.

Copy link
Member

commented Oct 8, 2019

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

This comment has been minimized.

Copy link
Contributor

commented Oct 8, 2019

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

This comment has been minimized.

Copy link
Contributor

commented Oct 8, 2019

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

This comment has been minimized.

Copy link
Member

commented Oct 8, 2019

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

This comment has been minimized.

Copy link
Contributor

commented Oct 8, 2019

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

This comment has been minimized.

Copy link
Contributor Author

commented Oct 8, 2019

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

This comment has been minimized.

Copy link
Contributor

commented Oct 9, 2019

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

This comment has been minimized.

Copy link
Member

commented Oct 9, 2019

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.

package.json Show resolved Hide resolved
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.