[WIP] Grommet box primitives INITIAL WIP - DO NOT MERGE

[brodycj]

What does this PR do?

INTIIAL DRAFT WIP:

Box and themed Grommet components now partially working on web and React Native using styled-components/primitives, with a few workarounds that are hopefully temporary.

Unfortunately the padding is not working at this time. I would have to investigate it further. My initial purpose is to prove Grommet able to run with some basic components on both web and native using react-primitives.

NOTE that this PR is coming from an initial-wip branch and is not intended to ever be merged. I would expect some deep rework will be needed before we should consider merging. I will also completely understand if some of the initial coding decisions such as adding the new styled-imports.js module would not be accepted.

There are some additional peer dependencies, which would be needed as documented in the following locations:

• https://github.com/lelandrichardson/react-primitives#installation
• https://github.com/necolas/react-native-web/blob/master/docs/guides/getting-started.md#install

Where should the reviewer start?

I made a new module in src/js/styled-imports.js that imports from styled-components/primitives, and this module is used in the StyledBox.js, StyledGrommet.js, hoc.js, and other common JavaScript sources. The new module was introduced in f3f2b4a & 98fa9fb, then adapted in 8f215db to import from styled-components/primitives rather than styled-components.

I made a few workarounds that were needed to work on react-primitives and react-native. Most of the workarounds changes are in individual commits. As I said before I hope the workaround solutions can be replaced by better solutions.

The actual change from styled-components to styled-components/primitives was done in the following commits:

• 8f215db
• d756386

What testing has been done on this PR?

I made a test app in https://github.com/brodybits/grommet-primitives-box-testapp-wip based on code generated by both create-react-app and expo init. This test app is able to run a very basic Grommet demo on both web and Expo using react-primitives.

The test app uses a git submodule to run a version of Grommet with these changes from https://github.com/brodybits/grommet-primitives-fork.

In the future I would like to do the testing using Storybook and Expobook (see https://blog.expo.io/introducing-expobook-8fbf7a125a9d).

How should this be manually tested?

Major tools needed:

• Yarn (highly recommended, I generally do not work on this kind of application without Yarn)
• expo-cli (it should be no problem to get the test app to work with react-native-cli instead, if needed)

Major steps:

• Clone https://github.com/brodybits/grommet-primitives-box-testapp-wip
• In the test app do git submodule update --init --recursive (see https://github.blog/2016-02-01-working-with-submodules/)
• To test the web version do yarn start-web (I generally do BROWSER=none yarn start-web and then navigate to http://localhost:3000/)
• To test on Expo: do yarn start-expo or expo start then view the app on my Android & iPhone devices

Any background context you want to provide?

I would like to help make it easier for web and mobile app developers to develop applications that work seamlessly across the major web and device technologies. My idea is that it should be possible for developers to start with online and PWA apps, then be able to make a smooth transition to native mobile GUIs at will. React Primitives was a major step in this direction, and I think another major step has been taken by styled-components: https://medium.com/styled-components/announcing-primitives-support-for-truly-universal-component-systems-5772c7d14bc7

Grommet seemed like a perfect fit since it is already designed to support Material Design using styled-components.

I would also like to revive react-primitives or a similar kind of framework and think this kind of a port could really prove the usefulness.

What are the relevant issues?

• Could we port Grommet to React Native using primitives? #2991
• i can use grommet in react-native? #2748
• What's the status of styled-components/primitives ? styled-components/styled-components#2313

Screenshots (if appropriate)

From a web browser:

From React Native Expo on my iPhone:

Do the grommet docs need to be updated?

TBD

Should this PR be mentioned in the release notes?

Not this PR since it is intended to remain a WIP PR.

Is this change backwards compatible or is it a breaking change?

I would definitely consider this to be a breaking change since it would need react-primitives and other related packages in order to work at all.

[ShimiSun]

Lots of good stuff in here, especially the detailed research results around your wip.
I have a few questions you might be able to help with:

1. Do you feel like Grommet itself doesn't provide the right tools for mobile development? I guess I'm interested to understand more about the motivation behind your effort.
2. I understand that styled.div isn't supported with react-native, but will styled.View be supporting 100% both of the use cases of react-native and just react? (sorry for the question, I'm a react-native rookie)
3. I'm a little worried about a comment I've seen here

react-native-web is still actively developed, but I don't think react-primitives is anymore, unfortunately, 😢 Somebody would need to pick up react-primitives to make /primitives better

I'm not sure if investing in this library will be a good choice to spend resources on.
4. we are thinking of migrating to emotion #2641 instead of using styled-components, have you tried applying primitives using the emotion library? or you have a strong opinion on using it yay/nay?

again, THANK you for sharing your work, it's good to know we can leverage existing libraries to make this type of support possible. feel free to help with the information/question above.

[brodycj]

Hi @ShimiSun, thanks for the thoughtful and timely feedback. Here are my responses so far:

I would likely favor migrating to emotion as discussed in #2641 (I didn't see it before I raised this PR) and hope to give it a try in the near future (no promise). May be easier to target a new major release for both emotion and universal primitive components in order to avoid the risk of potential compatibility issues, as I said in #2641 (comment).

In terms of styled.View vs styled.div: yes react-native does not support div elements. In short, react-native is pretty restrictive in what kind of components and styling are supported. The react-native-web supports most of the capabilities of react-native on the web browser, which is what enables react-primitives, styled/primitives, and emotion/primitives to work across web and React Native.

My general motivation is to enable app developers to target web apps and React Native GUIs with a similar if not unified code base, using a "super-modern" material design framework such as this one. This could theoretically enable an app developer to start with with online and PWA apps, then make a smooth transition over to React Native as needed. Please let me know if this is still not clear enough or you guys have any further questions.

The lelandrichardson/react-primitives project was an effort from AirBNB to accomplish something similar at a lower level, before they decided to abandon the React Native ecosystem.

I have made the following to revive react-primitives so far:

• published react-primitives-input and react-primitives-scrollview components, which I think should have been part of the core react-primitives itself
• raised merged PRs Cleanup dependencies lelandrichardson/react-primitives#133 & Named functions in Touchable.js & vr/Touchable.js lelandrichardson/react-primitives#135
• reported 3 resolved issues so far and a few more cleanup issues
• published a couple alternative support packages in react-primitives-core and react-universal-xp
• registered primitives.community (completed) and obtained primitives.info (waiting for transfer)

My thought has been that react-primitives appears to be a well thought-out design abstraction over web, native mobile apps, Windows, and even VR. I think it would be ideal to cover vadimdemedes/ink somehow (nice article at https://www.infoq.com/news/2019/04/ink-react-command-line-app), not sure how realistic it would be with react-primitives or Grommet.

I will completely understand if Grommet decides not to use react-primitives. The alternative I can think of right now would be "universal" or "native universal" wrapper modules such as react-universal-xp or react-native-universal. Again I love to cover vadimdemedes/ink by universal primitives if possible (brodycj/react-universal-xp#2).

Some finer, less important points:

Part of my motivation behind selecting Grommet over another Material Design framework is that it seems to use modular CSS via the styled-components API rather than CSS classes, which are not readily supported by React Native. (I would love to get CSS classes working on React Native someday.)

Here are some really interesting articles about the experiences MLS Soccer had with "universal components":

• https://hackernoon.com/up-and-running-with-universal-components-66678132cad
• https://labs.mlssoccer.com/the-road-to-universal-components-at-major-league-soccer-eeb7aac27e6c (linked by the previous article)
• https://labs.mlssoccer.com/react-native-storybook-%EF%B8%8F-f22fa8676333 - looks like they only had one truly "universal component" working across web and native at the time of writing

At this point I remain hopeful that we could find a way to improve general reuse between web and React Native. I suspect this will improve as more and more developers start using modular CSS frameworks like styled/emotion and some form of universal component libraries. This could be parallel to the transition to SPA that happened within the past decade.

[brodycj]

I hope to revisit this proposal soon, my apologies for such a long delay. Some quick thoughts:

• I am strongly against switching the code over to TypeScript, would likely just work in my own fork in case that does happen (my thoughts are on the way into this discussion in Roadmap suggestions from the community - request for comments #3271)
• emotion seemed to favor non-native React components (for the web) over react-native components and react-primitive components (I would be happy to take another look someday and see if I can find a possible workaround if this is still the case)
• At this point I don't have such a great feeling about react-primitives, but I also really don't like the idea that people have to use some kind of a transformer to make react-native and react-native-web work together. I would like to take a deeper look into this whole thing (someday).

[brodycj]

I took some time this week to rebase onto the recent v2.7.8 tag, with some minor rework to work with padding. I hope to try another component or 2 in the coming weeks.

[ShimiSun]

We appreciate your work on this PR.
I'll be closing this PR as we do not have the resources to support primitives at this point.