Getting Started: UI Components Reference (Documentation)

[PWAStudioBot]

From @ericerway on March 28, 2018 20:6

As a developer I want to understand the UI components (React) of Magento PWA so that I can contribute or create a PWA storefront with them.

AC

• Creation of UI Components Reference content for Magento PWA Documentation and related documentation

Copied from original issue: magento-research/venia-pwa-concept#44

[PWAStudioBot]

From @Jakhotiya on May 20, 2018 14:1

@ericerway When you say UI Components what does it refer to? Are they going to be like current Magento 2 UI components, from basic forms to very advanced grid systems? Are these UI components going to be part of @magento/peregrine library? Is minicart an example of such an component?

[PWAStudioBot]

From @ericerway on May 21, 2018 15:43

Good question! These would be new React-based components as part of the PWA themes and the Venia reference theme itself in the future. We are in the process of breaking down each page in our Venia prototype (starting with PD and Category) into a series of reusable components. These are not tied to the Magento 2 UI components.

[PWAStudioBot]

From @Jakhotiya on May 23, 2018 18:0

Which UiComponents will be part of venia and which will be part of peregrine? I'm asking this question because I'm wondering how may I contribute? If I develop a component like minicart or product widget, where do I put it, venia or peregrine? If we do put it in peregrine, will all PWA themes depend on peregrine? To continue this discussion with fellow contributers, is there a slack channel to which I can hook on?

[PWAStudioBot]

From @jimbo on May 23, 2018 22:21

@Jakhotiya It depends what kind of component you're interested in developing.

• venia will be our reference theme, so its components can be tailored specifically to the venia design. The DOM they produce doesn't need to be very configurable (with render props, etc.); it just needs to be semantically correct and thoughtfully structured for achieving various layouts with CSS (i.e., be responsive-friendly). Of course, venia components should also provide CSS that implements the venia design.

• peregrine, on the other hand, is intended to be a collection of utilities, HOCs, and generic components. These components are generally more useful for their processing of input than the structure of their output. Components from peregrine will be available to a PWA theme, but theme components aren't required to be composed of peregrine components.

If it's not clear where to start, don't sweat it; it's early in the game and we're welcoming contribution on all fronts. If you start with venia and end up developing something configurable and generic, we can always port that work to peregrine.

We're active in the Magento Community Engineering Slack channel if you want to join us there. 😄

[ericerway]

@jcalcaben can you confirm if this is still needed or covered with another story? Cleaning up some of our legacy stories from earlier in the year. Thanks!

[jcalcaben]

We can tie this issue to #438 and add a requirement of the issue to explain the difference between a Magento UI component and a Peregrine React component.