feat: pwa pd support

[mjuraschik]

Description

Page Designer OOTB Support with PWA:

• Brings in storefront-next-runtime package for PD design support
• Aligns Page, Region and Component components with patterns for design mode
• Added components needed for easier isml to react migration

Types of Changes

• Bug fix (non-breaking change that fixes an issue)
• New feature (non-breaking change that adds functionality)
• Documentation update
• Breaking change (could cause existing functionality to not work as expected)
• Other changes (non-breaking changes that does not fit any of the above)

Breaking changes include:

• Customers upgrading to the next commerce-sdk version need to upgrade their Region Components to the latest pattern (change a property on it)
• Other changes are pro code changes

Changes

• (change1)

How to Test-Drive This PR

• (step1)

Checklists

General

• Changes are covered by test cases
• CHANGELOG.md updated with a short description of changes (not required for documentation updates)

Accessibility Compliance

You must check off all items in one of the follow two lists:

• There are no changes to UI

or...

• Changes were tested with a Screen Reader (iOS VoiceOver or Android Talkback) and had no issues
• Changes comply with WCAG 2.0 guidelines levels A and AA
• Changes to common UI patterns and interactions comply with WAI-ARIA best practices

Localization

• Changes include a UI text update in the Retail React App (which requires translation)

[cc-prodsec]

✅ Snyk checks have passed. No issues have been found so far.

Status	Scanner	Critical	High	Medium	Low	Total (0)
✅	Open Source Security	0	0	0	0	0 issues
✅	Licenses	0	0	0	0	0 issues

💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse.

[mjuraschik]

I will delete the new layout components again, they are here for testing

[alexvuong]

why using ignore ts here?

[mjuraschik]

Because this is a valid attribute, but I think pwa kit has the latest state of that yet, neither has the commerce-sdk. I should probably fix that, but I am not sure what the process is. Can you help me with that?

[mjuraschik]

I made it less ugly and not use a ts-ignore though

[alexvuong]

What are the ways to tests if Suspense can render fallback component? Correctly if I am wrong, but pwa-kit is currently SSR and not support streaming at all. Using Suspense will probably not work for pwa-kit.

[mjuraschik]

oh, you're right. I changed it to only render in that suspense on the client. not sure whether this would be best practice here. I could also just remove it if you want

[alexvuong]

You can simply return the it with a div wrapper

<div>
{componentElement}
</div>

Let's keep the displayName (which existing in other components, it is to make it easier for debugging)
Component.displayName = 'Component'

[alexvuong]

Why can't this component be part of commerce-sdk-react or/and be part of PageDesignerProvider?

I am thinking on the UX for dev when they need to integrate PD to the template, they have to set up two things, one is the PageDesignerProvider and PageDesignerInit to get it works? Is there way we can set up so they can simply do one step?

const App = () = {
   return <PageDesignerSetup />  
 }

// commermce-react-sdk

const  PageDesignerSetup = () => {
    // everything needed to init PD for template. E.g
          <PageDesignerProvider clientId="pwa-kit" targetOrigin="*" usid={usid}>
             <PageDesignerInit />
            <YourAppContent />
         </PageDesignerProvider>
   
}

[mjuraschik]

The page designer init code has a dependency to react-router, which is something I didn't want to pull into the commerce-sdk

[alexvuong]

Can you please add some steps how I can test drive these code changes?

[steelsojka]

I think this looks good from a PD standpoint.

[mjuraschik]

Code deployed here https://cc-phoenix-dreamforce-demo.sfdc-ckzqgc-ecom1.exp-delivery-soak.com/ with some adjustments to the homepage that I did not commit. The homepage in the storefront deployed there, is connecting to page designer to get data. The components you see are supposed to match the sfra example components. Other pages should continue to work as before.
Ecom Instance connected to that storefront if you want to look at page designer is here: https://zymc-018.unified.demandware.net/on/demandware.store/Sites-Site/default%3bapp%3d__bm_merchant%3bsite%3dRefArch/ViewApplication-Logout