Storybook install, stories and guidelines

[georgewrmarshall]

Description
Initial install of react native storybook as well as some initial stories and guidelines. MVP for react native storybook requires some manual steps(also suggested in the rn storybook readme) that could be improved in later versions.

To get storybook working in the current state of this PR you have to follow these steps. I have also outlined them in the documentation guidelines included in this PR

1. In the root ./index.js file comment out AppRegistry.registerComponent(name, () => Root); and add:

export { default } from "./storybook";

this will replace the entry point of the app with storybook.

2. Once you have replaced the entry point of the app with storybook in ./index.js run

yarn watch

3. Open a new terminal window and run

yarn start:ios

You should see storybook navigator running in your web browser and the components rendering on the simulator

storybook.rn.720.mov

TO DO

• Resolve postinstall issue with rn-nodeify
• Allow storybook to be easily used in developer mode without replacing the content of any files. Other options This example has a great developer experience Have explored other DX improvements but because of the way our app works I ran into a few issues so starting with this implementation as MVP
• Update DOCUMENTATION_GUIDELINES.md once the developer experience has been improved. Docs have been updated with how to get storybook running with current implementation

Checklist

• There is a related GitHub issue
• Tests are included if applicable NA
• Any added code is fully documented

Issue
Resolves #2230

[github-actions]

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

[georgewrmarshall]

Hey @dannyhw! Do you have any suggestions on how we could address the rn-nodeify and storybook issue we are having? Storybook works if we comment out this step in our post install process. Have you seen this before?

[dannyhw]

@georgewrmarshall I'll take a look. Might need some help understanding the setup you have though.

[dannyhw]

@georgewrmarshall why do you need the nodeify step?

[georgewrmarshall]

@georgewrmarshall why do you need the nodeify step?

@Cal-L or @rickycodes could you elaborate on this? @dannyhw I think it's because rn-nodeify installs node packages that aren't available in react native and some of the dependencies require them?

[dannyhw]

hmm yeah I see, well I don't think it should affect anything. Although i think crypto is used somewhere to generate ids or something in an upstream package in storybook. What specifically happens when it fails? whats the error?

[georgewrmarshall]

I've outlined the error in this issue which you commented on previously. I also found this old issue which may give a clearer description on how to reproduce it.

[dannyhw]

@georgewrmarshall I ran the project and the storybook and I didn't have any issue when running just the ondevice portion.

Everything seems fine until you run the react-native-server, at that point I could reproduce the issue on your project. I wonder if the server is a requirement for you? I ask that because the server is optional and not required to run storybook on the device. if its not part of your requirements to be able to control the device UI from the browser then you could just avoid the issue entirely by using storybook from the on device UI.

If I were to guess I suspect you are using some library that is clashing with the server in some way. Maybe using nodeify breaks something for webpack?

Unfortunately the log here doesn't really say much to me since this enchanced resolve package is used by webpack and not storybook directly as far as I can tell.

/Users/danny/workspace/metamask-mobile/node_modules/enhanced-resolve/lib/Resolver.js:301
                const idxQuery = identifier.indexOf("?");

Webpack is used to bundle the code for the server of course but if anything I guess the issue is with the setup of the manager which is part of the storybook app on the web which itself is an upstream dependency.

The server was built a really long time ago by someone else and it is a mystery to me currently. My focus has been more on the ondeviceUI since thats how I use it. Anyone who worked on the server is long gone from the project unfortunately. I have plans to attempt to replace the server with something compatible with newer versions of storybook but that won't be for some time and 6.0 will likely release without the server.

My suggestion would be to ignore the server unless you specifically want to use it for some purpose, that depends on your needs though.

[georgewrmarshall]

Hey @dannyhw thank you so much for looking into this. The storybook server is a "nice to have" for navigating stories and interacting with knobs but by I can definitely live without it if it means that we can get storybook working on device. I'll continue with your suggestion and remove storybook server. Thanks again 🙏 💯

[dannyhw]

No problem :). Let me know if theres anything else I can do to help. Also if you ever want to try out the 6.0 currently in alpha then let me know and I'd be happy to help with that.

[Cal-L]

LGTM