feat: pwa pd support lint

Author: mjuraschik

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

@@ -92,7 +92,9 @@ describe('Component', () => {
         mockRegistry.getComponent.mockReturnValue(MockDynamicComponent)
         mockRegistry.getFallback.mockReturnValue(null)
 
-        render(<Component component={mockComponent} regionId="test-region" className="custom-class" />)
+        render(
+            <Component component={mockComponent} regionId="test-region" className="custom-class" />
+        )
 
         expect(receivedProps.title).toBe('Test Banner')
         expect(receivedProps.imageUrl).toBe('/test-image.jpg')

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

@@ -1,50 +1,48 @@
-/**
- * Copyright 2026 Salesforce, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
+/*
+ * Copyright (c) 2026, Salesforce, Inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: BSD-3-Clause
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
  */
-import React, { type ReactElement, memo, Suspense } from 'react';
-import { registry } from '../registry';
-import type { ComponentDesignMetadata } from '@salesforce/storefront-next-runtime/design/react';
-import type { ComponentType } from '../types';
+import React, {type ReactElement, memo, Suspense} from 'react'
+import {registry} from '../registry'
+import type {ComponentDesignMetadata} from '@salesforce/storefront-next-runtime/design/react'
+import type {ComponentType} from '../types'
 
 export interface ComponentProps {
-    component: ComponentType;
-    className?: string;
-    regionId: string;
+    component: ComponentType
+    className?: string
+    regionId: string
 }
 
-
-export const Component = memo(function Component({ component, className, regionId }: ComponentProps): ReactElement {
+export const Component = memo(function Component({
+    component,
+    className,
+    regionId
+}: ComponentProps): ReactElement {
     // Get this component's data promise from context by its ID
-    const FallbackComponent = registry.getFallback(component.typeId);
-    const DynamicComponent = registry.getComponent(component.typeId);
+    const FallbackComponent = registry.getFallback(component.typeId)
+    const DynamicComponent = registry.getComponent(component.typeId)
 
     if (!DynamicComponent) {
         // eslint-disable-next-line @typescript-eslint/only-throw-error
-        throw registry.preload(component.typeId);
+        throw registry.preload(component.typeId)
     }
 
     const designMetadata: ComponentDesignMetadata = {
         name: component.designMetadata?.name,
         isFragment: false,
         isVisible: Boolean(component.visible),
         isLocalized: Boolean(component.localized),
-        id: component.id,
-    };
+        id: component.id
+    }
 
     return (
-        <Suspense fallback={FallbackComponent ? <FallbackComponent {...(component.data ?? {})} /> : <div />}>
+        <Suspense
+            fallback={
+                FallbackComponent ? <FallbackComponent {...(component.data ?? {})} /> : <div />
+            }
+        >
             <DynamicComponent
                 {...(component.data ?? {})}
                 designMetadata={designMetadata}
@@ -54,5 +52,5 @@ export const Component = memo(function Component({ component, className, regionI
                 regionId={regionId}
             />
         </Suspense>
-    );
-});
+    )
+})

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

@@ -22,9 +22,7 @@ jest.mock('../Component', () => ({
 // Mock the RegionWrapper
 jest.mock('../Region/region-wrapper', () => ({
     RegionWrapper: ({children, className}: {children: React.ReactNode; className?: string}) => (
-        <div className={`region ${className || ''}`}>
-            {children}
-        </div>
+        <div className={`region ${className || ''}`}>{children}</div>
     )
 }))
 

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

@@ -27,7 +27,6 @@ jest.mock('./region-wrapper', () => ({
     )
 }))
 
-
 describe('Region', () => {
     beforeEach(() => {
         jest.clearAllMocks()
@@ -108,7 +107,10 @@ describe('Region', () => {
         })
 
         test('handles page with no regions', () => {
-            const pageWithNoRegions = {id: 'test-page', regions: undefined} as unknown as PageWithDesignMetadata
+            const pageWithNoRegions = {
+                id: 'test-page',
+                regions: undefined
+            } as unknown as PageWithDesignMetadata
             const {container} = render(<Region page={pageWithNoRegions} regionId="main-region" />)
 
             expect(container.firstChild).toBeNull()
@@ -150,9 +152,7 @@ describe('Region', () => {
         })
 
         test('returns null when component region is not found and no errorElement', () => {
-            const {container} = render(
-                <Region component={mockComponent} regionId="non-existent" />
-            )
+            const {container} = render(<Region component={mockComponent} regionId="non-existent" />)
 
             expect(container.firstChild).toBeNull()
         })

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

@@ -1,90 +1,81 @@
-/**
- * Copyright 2026 Salesforce, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
+/*
+ * Copyright (c) 2026, Salesforce, Inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: BSD-3-Clause
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
  */
 import React, {type ReactElement, type ReactNode, Suspense} from 'react'
-import { Component } from '../Component';
-import { RegionWrapper } from './region-wrapper';
-import type { ShopperExperience } from '@salesforce/storefront-next-runtime/scapi';
+import {Component} from '../Component'
+import {RegionWrapper} from './region-wrapper'
+import type {ShopperExperience} from '@salesforce/storefront-next-runtime/scapi'
 import {
     PageDesignerPageMetadataProvider,
-    useRegionContext,
-} from '@salesforce/storefront-next-runtime/design/react/core';
+    useRegionContext
+} from '@salesforce/storefront-next-runtime/design/react/core'
 import type {
     ComponentDecoratorProps,
-    RegionDesignMetadata,
-} from '@salesforce/storefront-next-runtime/design/react';
+    RegionDesignMetadata
+} from '@salesforce/storefront-next-runtime/design/react'
 
-export type { RegionDesignMetadata };
+export type {RegionDesignMetadata}
 
 export interface PageDesignMetadata {
-    id: string;
-    name: string;
-    description?: string;
-    archType?: 'controller' | 'headless';
-    route?: string;
-    supportedAspectTypes?: string[];
-    regionDefinitions?: RegionDesignMetadata[];
+    id: string
+    name: string
+    description?: string
+    archType?: 'controller' | 'headless'
+    route?: string
+    supportedAspectTypes?: string[]
+    regionDefinitions?: RegionDesignMetadata[]
     attributeDefinitionGroups?: {
-        id: string;
-        name?: string;
-        description?: string;
-        attributeDefinitions?: Record<string, unknown>[];
-    }[];
+        id: string
+        name?: string
+        description?: string
+        attributeDefinitions?: Record<string, unknown>[]
+    }[]
 }
 
 export type PageDecoratorProps<TProps> = React.PropsWithChildren<
     {
-        designMetadata?: PageDesignMetadata;
+        designMetadata?: PageDesignMetadata
     } & TProps
->;
+>
 
 // Extended Page type with design metadata
 type PageWithDesignMetadata = PageDecoratorProps<ShopperExperience.schemas['Page']> & {
-    componentData?: Record<string, Promise<unknown>>;
-};
+    componentData?: Record<string, Promise<unknown>>
+}
 
 // Props when rendering a page-level region
 interface PageRegionProps extends React.HTMLAttributes<HTMLDivElement> {
-    page: PageWithDesignMetadata;
-    component?: never;
-    regionId: string;
-    fallbackElement?: ReactNode;
-    errorElement?: ReactNode;
+    page: PageWithDesignMetadata
+    component?: never
+    regionId: string
+    fallbackElement?: ReactNode
+    errorElement?: ReactNode
 }
 
-export type ComponentType = ComponentDecoratorProps<ShopperExperience.schemas['Component']>;
+export type ComponentType = ComponentDecoratorProps<ShopperExperience.schemas['Component']>
 
 // Props when rendering a component-level region (nested)
 interface ComponentRegionProps extends React.HTMLAttributes<HTMLDivElement> {
-    page?: never;
-    component: ComponentType;
-    regionId: string;
-    fallbackElement?: ReactNode;
-    errorElement?: ReactNode;
+    page?: never
+    component: ComponentType
+    regionId: string
+    fallbackElement?: ReactNode
+    errorElement?: ReactNode
 }
 
 // Discriminated union
-export type RegionProps = PageRegionProps | ComponentRegionProps;
+export type RegionProps = PageRegionProps | ComponentRegionProps
 
 // Helper: Extract design metadata from region definition
 function getDesignMetadata(regionId: string, metadata?: RegionDesignMetadata) {
     return {
         id: regionId,
         componentTypeExclusions: metadata?.componentTypeExclusions ?? [],
-        componentTypeInclusions: metadata?.componentTypeInclusions ?? [],
-    };
+        componentTypeInclusions: metadata?.componentTypeInclusions ?? []
+    }
 }
 
 // Helper: Render region wrapper with components
@@ -100,12 +91,20 @@ function renderRegionContent(
             region={region}
             className={className}
             designMetadata={getDesignMetadata(regionId, metadata)}
-            {...rest}>
+            {...rest}
+        >
             {region.components?.map(
-                (comp) => comp.id && <Component key={comp.id} component={comp as ComponentType} regionId={region.id} />
+                (comp) =>
+                    comp.id && (
+                        <Component
+                            key={comp.id}
+                            component={comp as ComponentType}
+                            regionId={region.id}
+                        />
+                    )
             )}
         </RegionWrapper>
-    );
+    )
 }
 
 /**
@@ -142,39 +141,41 @@ function renderRegionContent(
  * regions that can contain multiple components managed through the Page Designer interface.
  */
 export function Region(props: RegionProps): ReactElement | null {
-    const { regionId, className = '', errorElement, fallbackElement = <div />, ...rest } = props;
-    const regionContext = useRegionContext();
+    const {regionId, className = '', errorElement, fallbackElement = <div />, ...rest} = props
+    const regionContext = useRegionContext()
 
     // COMPONENT MODE: Rendering a component-level region (nested)
     if (props.component !== undefined) {
-        const region = props.component.regions?.find((r) => r.id === regionId);
+        const region = props.component.regions?.find((r) => r.id === regionId)
         if (!region) {
-            return errorElement ? <>{errorElement}</> : null;
+            return errorElement ? <>{errorElement}</> : null
         }
 
-        const metadata = props.component.designMetadata?.regionDefinitions?.find((r) => r.id === regionId);
-        return renderRegionContent(region, regionId, metadata, className, rest);
+        const metadata = props.component.designMetadata?.regionDefinitions?.find(
+            (r) => r.id === regionId
+        )
+        return renderRegionContent(region, regionId, metadata, className, rest)
     }
 
     // PAGE MODE: Rendering a page-level region
-    const page = props.page;
-    const region = page?.regions?.find((r) => r.id === regionId);
+    const page = props.page
+    const region = page?.regions?.find((r) => r.id === regionId)
     if (!region) {
-        return errorElement ? <>{errorElement}</> : null;
+        return errorElement ? <>{errorElement}</> : null
     }
 
-    const metadata = page.designMetadata?.regionDefinitions?.find((r) => r.id === regionId);
-    const { componentData: pageComponentData, ...pageData } = page;
+    const metadata = page.designMetadata?.regionDefinitions?.find((r) => r.id === regionId)
+    const {componentData: pageComponentData, ...pageData} = page
 
     return (
         <Suspense fallback={fallbackElement}>
             {!regionContext && <PageDesignerPageMetadataProvider page={pageData} />}
             {renderRegionContent(region, regionId, metadata, className, rest)}
         </Suspense>
-    );
+    )
 }
 
 export default Region
 // Re-export RegionWrapper for direct usage if needed
-export { RegionWrapper } from './region-wrapper';
-export type { RegionRendererProps } from './region-wrapper';
+export {RegionWrapper} from './region-wrapper'
+export type {RegionRendererProps} from './region-wrapper'

packages/commerce-sdk-react/src/components/ShopperExperience/Region/region-wrapper.test.tsx

@@ -198,7 +198,8 @@ describe('RegionWrapper', () => {
                 <RegionWrapper
                     region={mockRegion}
                     data-custom="custom-value"
-                    aria-label="Test region">
+                    aria-label="Test region"
+                >
                     <div data-testid="child-content">Content</div>
                 </RegionWrapper>
             )