feat: pwa pd support lint

Author: mjuraschik

packages/commerce-sdk-react/src/components/ShopperExperience/Component/index.tsx

@@ -25,15 +25,14 @@ export const Component = memo(function Component({
     const DynamicComponent = registry.getComponent(component.typeId)
 
     if (!DynamicComponent) {
-        // eslint-disable-next-line @typescript-eslint/only-throw-error
         throw registry.preload(component.typeId)
     }
 
     const designMetadata: ComponentDesignMetadata = {
         name: component.designMetadata?.name,
         isFragment: false,
-        isVisible: Boolean(component.visible),
-        isLocalized: Boolean(component.localized),
+        isVisible: component.designMetadata?.isVisible ?? false,
+        isLocalized: component.designMetadata?.isLocalized ?? false,
         id: component.id
     }
 

packages/commerce-sdk-react/src/components/ShopperExperience/Page/index.test.tsx

@@ -26,7 +26,7 @@ jest.mock('../Region/region-wrapper', () => ({
     )
 }))
 
-const SAMPLE_PAGE: PageWithDesignMetadata = {
+const SAMPLE_PAGE = {
     id: 'samplepage',
     typeId: 'storePage',
     aspectTypeId: 'pdpAspect',
@@ -82,7 +82,7 @@ const SAMPLE_PAGE: PageWithDesignMetadata = {
             components: []
         }
     ]
-}
+} as unknown as PageWithDesignMetadata
 
 beforeEach(() => {
     // Suppress console.log during tests

packages/commerce-sdk-react/src/components/ShopperExperience/Region/index.tsx

@@ -14,6 +14,7 @@ import {
 } from '@salesforce/storefront-next-runtime/design/react/core'
 import type {
     ComponentDecoratorProps,
+    ComponentDesignMetadata,
     RegionDesignMetadata
 } from '@salesforce/storefront-next-runtime/design/react'
 
@@ -151,9 +152,11 @@ export function Region(props: RegionProps): ReactElement | null {
             return errorElement ? <>{errorElement}</> : null
         }
 
-        const metadata = props.component.designMetadata?.regionDefinitions?.find(
-            (r) => r.id === regionId
-        )
+        const metadata = (
+            props.component.designMetadata as ComponentDesignMetadata & {
+                regionDefinitions?: RegionDesignMetadata[]
+            }
+        )?.regionDefinitions?.find((r: RegionDesignMetadata) => r.id === regionId)
         return renderRegionContent(region, regionId, metadata, className, rest)
     }