@salesforce/retail-react-app 1.0.0-preview.0

package/app/page-designer/layouts/mobileGrid2r1c/index.jsx

@@ -0,0 +1,37 @@
+/*
+ * Copyright (c) 2023, 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 from 'react'
+import PropTypes from 'prop-types'
+import {SimpleGrid} from '@chakra-ui/react'
+import {Region, regionPropType} from '@salesforce/commerce-sdk-react/components'
+
+/**
+ * This layout component displays its children in a 2 row x 1 column grid on mobile
+ * and a 1 row x 2 column grid on desktop.
+ *
+ * @param {componentProps} props
+ * @param {regionType []} props.regions - The page designer regions for this component.
+ * @param {object} props.data - The data for the component.
+ * @param {string} props.typeId - A mapping of typeId's to react components representing the type.
+ * @returns {React.ReactElement} - Grid component.
+ */
+export const MobileGrid2r1c = ({regions}) => (
+    <SimpleGrid className="mobile-2r-1c" columns={{base: 1, sm: 2}} gridGap={4}>
+        {regions.map((region) => (
+            <Region key={region.id} region={region} />
+        ))}
+    </SimpleGrid>
+)
+
+MobileGrid2r1c.displayName = 'MobileGrid2r1c'
+
+MobileGrid2r1c.propTypes = {
+    // Internally Provided
+    regions: PropTypes.arrayOf(regionPropType).isRequired
+}
+
+export default MobileGrid2r1c

package/app/page-designer/layouts/mobileGrid2r1c/index.test.js

@@ -0,0 +1,47 @@
+/*
+ * Copyright (c) 2023, salesforce.com, 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 from 'react'
+import {
+    renderWithProviders,
+    withPageProvider
+} from '@salesforce/retail-react-app/app/utils/test-utils'
+import MobileGrid2r1c from '@salesforce/retail-react-app/app/page-designer/layouts/mobileGrid2r1c/index'
+
+test('MobileGrid2r1c renders without errors', () => {
+    const MobileGrid2r1cWithPageProvider = withPageProvider(MobileGrid2r1c)
+    renderWithProviders(
+        <MobileGrid2r1cWithPageProvider
+            regions={[
+                {
+                    components: [
+                        {
+                            data: {
+                                richText: '<p>Column 1</p>'
+                            },
+                            id: '2f72a6a939df1527ec378f8509',
+                            typeId: 'commerce_assets.editorialRichText'
+                        }
+                    ],
+                    id: 'column1'
+                },
+                {
+                    components: [
+                        {
+                            data: {
+                                richText: '<p>Column 2</p>'
+                            },
+                            id: 'c6171da06d6754700b8807777e',
+                            typeId: 'commerce_assets.editorialRichText'
+                        }
+                    ],
+                    id: 'column2'
+                }
+            ]}
+        />
+    )
+    expect(document.querySelector('.mobile-2r-1c')).not.toBeNull()
+})

package/app/page-designer/layouts/mobileGrid2r2c/index.jsx

@@ -0,0 +1,37 @@
+/*
+ * Copyright (c) 2023, 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 from 'react'
+import PropTypes from 'prop-types'
+import {SimpleGrid} from '@chakra-ui/react'
+import {Region, regionPropType} from '@salesforce/commerce-sdk-react/components'
+
+/**
+ * This layout component displays its children in a 2 row x 2 column grid on mobile
+ * and 1 row x 4 column grid on desktop.
+ *
+ * @param {componentProps} props
+ * @param {regionType []} props.regions - The page designer regions for this component.
+ * @param {object} props.data - The data for the component.
+ * @param {string} props.typeId - A mapping of typeId's to react components representing the type.
+ * @returns {React.ReactElement} - Grid component.
+ */
+export const MobileGrid2r2c = ({regions}) => (
+    <SimpleGrid className="mobile-2r-2c" columns={{base: 2, sm: 4}} gridGap={4}>
+        {regions.map((region) => (
+            <Region key={region.id} region={region} />
+        ))}
+    </SimpleGrid>
+)
+
+MobileGrid2r2c.displayName = 'MobileGrid2r2c'
+
+MobileGrid2r2c.propTypes = {
+    // Internally Provided
+    regions: PropTypes.arrayOf(regionPropType).isRequired
+}
+
+export default MobileGrid2r2c

package/app/page-designer/layouts/mobileGrid2r2c/index.test.js

@@ -0,0 +1,71 @@
+/*
+ * Copyright (c) 2023, salesforce.com, 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 from 'react'
+import {
+    renderWithProviders,
+    withPageProvider
+} from '@salesforce/retail-react-app/app/utils/test-utils'
+import MobileGrid2r2c from '@salesforce/retail-react-app/app/page-designer/layouts/mobileGrid2r2c/index'
+
+test('MobileGrid2r2c renders without errors', () => {
+    const MobileGrid2r2cWithPageProvider = withPageProvider(MobileGrid2r2c)
+    renderWithProviders(
+        <MobileGrid2r2cWithPageProvider
+            regions={[
+                {
+                    components: [
+                        {
+                            data: {
+                                richText: '<p>Column 1</p>'
+                            },
+                            id: '946afd022303cd30a8cdcb2957',
+                            typeId: 'commerce_assets.editorialRichText'
+                        }
+                    ],
+                    id: 'column1'
+                },
+                {
+                    components: [
+                        {
+                            data: {
+                                richText: '<p>Column 2</p>'
+                            },
+                            id: 'd94919f81bd9a5530400879fd9',
+                            typeId: 'commerce_assets.editorialRichText'
+                        }
+                    ],
+                    id: 'column2'
+                },
+                {
+                    components: [
+                        {
+                            data: {
+                                richText: '<p>Column 3</p>'
+                            },
+                            id: '883198f60f5d0f38ce1f895305',
+                            typeId: 'commerce_assets.editorialRichText'
+                        }
+                    ],
+                    id: 'column3'
+                },
+                {
+                    components: [
+                        {
+                            data: {
+                                richText: '<p>Column 4</p>'
+                            },
+                            id: '364bedd2f3fe569f7c83df780b',
+                            typeId: 'commerce_assets.editorialRichText'
+                        }
+                    ],
+                    id: 'column4'
+                }
+            ]}
+        />
+    )
+    expect(document.querySelector('.mobile-2r-2c')).not.toBeNull()
+})

package/app/page-designer/layouts/mobileGrid2r3c/index.jsx

@@ -0,0 +1,37 @@
+/*
+ * Copyright (c) 2023, 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 from 'react'
+import PropTypes from 'prop-types'
+import {SimpleGrid} from '@chakra-ui/react'
+import {Region, regionPropType} from '@salesforce/commerce-sdk-react/components'
+
+/**
+ * This layout component displays its children in a 2 row x 3 column grid on mobile
+ * and 1 row x 6 column grid on desktop.
+ *
+ * @param {componentProps} props
+ * @param {regionType []} props.regions - The page designer regions for this component.
+ * @param {object} props.data - The data for the component.
+ * @param {string} props.typeId - A mapping of typeId's to react components representing the type.
+ * @returns {React.ReactElement} - Grid component.
+ */
+export const MobileGrid2r3c = ({regions}) => (
+    <SimpleGrid className="mobile-2r-3c" columns={{base: 3, sm: 6}} gridGap={4}>
+        {regions.map((region) => (
+            <Region key={region.id} region={region} />
+        ))}
+    </SimpleGrid>
+)
+
+MobileGrid2r3c.displayName = 'MobileGrid2r3c'
+
+MobileGrid2r3c.propTypes = {
+    // Internally Provided
+    regions: PropTypes.arrayOf(regionPropType).isRequired
+}
+
+export default MobileGrid2r3c

package/app/page-designer/layouts/mobileGrid2r3c/index.test.js

@@ -0,0 +1,95 @@
+/*
+ * Copyright (c) 2023, salesforce.com, 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 from 'react'
+import {
+    renderWithProviders,
+    withPageProvider
+} from '@salesforce/retail-react-app/app/utils/test-utils'
+import MobileGrid2r3c from '@salesforce/retail-react-app/app/page-designer/layouts/mobileGrid2r3c/index'
+
+test('MobileGrid2r3c renders without errors', () => {
+    const MobileGrid2r3cWithPageProvider = withPageProvider(MobileGrid2r3c)
+    renderWithProviders(
+        <MobileGrid2r3cWithPageProvider
+            regions={[
+                {
+                    components: [
+                        {
+                            data: {
+                                richText: '<p>Column 1</p>'
+                            },
+                            id: '88db479f5ea7d51049ad36290e',
+                            typeId: 'commerce_assets.editorialRichText'
+                        }
+                    ],
+                    id: 'column1'
+                },
+                {
+                    components: [
+                        {
+                            data: {
+                                richText: '<p>Column 2</p>'
+                            },
+                            id: '73893773e40906e8274693e560',
+                            typeId: 'commerce_assets.editorialRichText'
+                        }
+                    ],
+                    id: 'column2'
+                },
+                {
+                    components: [
+                        {
+                            data: {
+                                richText: '<p>Column 3</p>'
+                            },
+                            id: '514c04a9d5d2fe184f54373c44',
+                            typeId: 'commerce_assets.editorialRichText'
+                        }
+                    ],
+                    id: 'column3'
+                },
+                {
+                    components: [
+                        {
+                            data: {
+                                richText: '<p>Column 4</p>'
+                            },
+                            id: '8eb52298268dc948b86141a8be',
+                            typeId: 'commerce_assets.editorialRichText'
+                        }
+                    ],
+                    id: 'column4'
+                },
+                {
+                    components: [
+                        {
+                            data: {
+                                richText: '<p>Column 5</p>'
+                            },
+                            id: '92bb6e9a7472c49425e74f4b00',
+                            typeId: 'commerce_assets.editorialRichText'
+                        }
+                    ],
+                    id: 'column5'
+                },
+                {
+                    components: [
+                        {
+                            data: {
+                                richText: '<p>Column 6</p>'
+                            },
+                            id: '5ebdc5413f9898dfad3e5d12aa',
+                            typeId: 'commerce_assets.editorialRichText'
+                        }
+                    ],
+                    id: 'column6'
+                }
+            ]}
+        />
+    )
+    expect(document.querySelector('.mobile-2r-3c')).not.toBeNull()
+})

package/app/page-designer/layouts/mobileGrid3r1c/index.jsx

@@ -0,0 +1,37 @@
+/*
+ * Copyright (c) 2023, 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 from 'react'
+import PropTypes from 'prop-types'
+import {SimpleGrid} from '@chakra-ui/react'
+import {Region, regionPropType} from '@salesforce/commerce-sdk-react/components'
+
+/**
+ * This layout component displays its children in a 3 row x 1 column grid on mobile
+ * and 1 row x 3 column grid on desktop.
+ *
+ * @param {componentProps} props
+ * @param {regionType []} props.regions - The page designer regions for this component.
+ * @param {object} props.data - The data for the component.
+ * @param {string} props.typeId - A mapping of typeId's to react components representing the type.
+ * @returns {React.ReactElement} - Grid component.
+ */
+export const MobileGrid3r1c = ({regions}) => (
+    <SimpleGrid className="mobile-3r-1c" columns={{base: 1, sm: 3}} gridGap={4}>
+        {regions.map((region) => (
+            <Region key={region.id} region={region} />
+        ))}
+    </SimpleGrid>
+)
+
+MobileGrid3r1c.displayName = 'MobileGrid3r1c'
+
+MobileGrid3r1c.propTypes = {
+    // Internally Provided
+    regions: PropTypes.arrayOf(regionPropType).isRequired
+}
+
+export default MobileGrid3r1c

package/app/page-designer/layouts/mobileGrid3r1c/index.test.js

@@ -0,0 +1,59 @@
+/*
+ * Copyright (c) 2023, salesforce.com, 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 from 'react'
+import {
+    renderWithProviders,
+    withPageProvider
+} from '@salesforce/retail-react-app/app/utils/test-utils'
+import MobileGrid3r1c from '@salesforce/retail-react-app/app/page-designer/layouts/mobileGrid3r1c/index'
+
+test('MobileGrid3r1c renders without errors', () => {
+    const MobileGrid3r1cWithPageProvider = withPageProvider(MobileGrid3r1c)
+    renderWithProviders(
+        <MobileGrid3r1cWithPageProvider
+            regions={[
+                {
+                    components: [
+                        {
+                            data: {
+                                richText: '<p>Column 1</p>'
+                            },
+                            id: '5ed57137d30ec867ac716dd259',
+                            typeId: 'commerce_assets.editorialRichText'
+                        }
+                    ],
+                    id: 'column1'
+                },
+                {
+                    components: [
+                        {
+                            data: {
+                                richText: '<p>Column 2</p>'
+                            },
+                            id: '34e52dfa89fd2abd116912d706',
+                            typeId: 'commerce_assets.editorialRichText'
+                        }
+                    ],
+                    id: 'column2'
+                },
+                {
+                    components: [
+                        {
+                            data: {
+                                richText: '<p>Column 3</p>'
+                            },
+                            id: '80d8e4deead834c58505ecbf84',
+                            typeId: 'commerce_assets.editorialRichText'
+                        }
+                    ],
+                    id: 'column3'
+                }
+            ]}
+        />
+    )
+    expect(document.querySelector('.mobile-3r-1c')).not.toBeNull()
+})

package/app/page-designer/layouts/mobileGrid3r2c/index.jsx

@@ -0,0 +1,37 @@
+/*
+ * Copyright (c) 2023, 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 from 'react'
+import PropTypes from 'prop-types'
+import {SimpleGrid} from '@chakra-ui/react'
+import {Region, regionPropType} from '@salesforce/commerce-sdk-react/components'
+
+/**
+ * This layout component displays its children in a 3 row x 2 column grid on mobile
+ * and 2 row x 3 column grid on desktop.
+ *
+ * @param {componentProps} props
+ * @param {regionType []} props.regions - The page designer regions for this component.
+ * @param {object} props.data - The data for the component.
+ * @param {string} props.typeId - A mapping of typeId's to react components representing the type.
+ * @returns {React.ReactElement} - Grid component.
+ */
+export const MobileGrid3r2c = ({regions}) => (
+    <SimpleGrid className="mobile-3r-2c" columns={{base: 2, sm: 3}} gridGap={4}>
+        {regions.map((region) => (
+            <Region key={region.id} region={region} />
+        ))}
+    </SimpleGrid>
+)
+
+MobileGrid3r2c.displayName = 'MobileGrid3r2c'
+
+MobileGrid3r2c.propTypes = {
+    // Internally Provided
+    regions: PropTypes.arrayOf(regionPropType).isRequired
+}
+
+export default MobileGrid3r2c

package/app/page-designer/layouts/mobileGrid3r2c/index.test.js

@@ -0,0 +1,95 @@
+/*
+ * Copyright (c) 2023, salesforce.com, 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 from 'react'
+import {
+    renderWithProviders,
+    withPageProvider
+} from '@salesforce/retail-react-app/app/utils/test-utils'
+import MobileGrid3r2c from '@salesforce/retail-react-app/app/page-designer/layouts/mobileGrid3r2c/index'
+
+test('MobileGrid3r2c renders without errors', () => {
+    const MobileGrid3r2cWithPageProvider = withPageProvider(MobileGrid3r2c)
+    renderWithProviders(
+        <MobileGrid3r2cWithPageProvider
+            regions={[
+                {
+                    components: [
+                        {
+                            data: {
+                                richText: '<p>Column 1</p>'
+                            },
+                            id: 'c402f2fb1b323b257377c8ef6f',
+                            typeId: 'commerce_assets.editorialRichText'
+                        }
+                    ],
+                    id: 'column1'
+                },
+                {
+                    components: [
+                        {
+                            data: {
+                                richText: '<p>Column 2</p>'
+                            },
+                            id: 'c77c14f88859b3b7ce499ebb8b',
+                            typeId: 'commerce_assets.editorialRichText'
+                        }
+                    ],
+                    id: 'column2'
+                },
+                {
+                    components: [
+                        {
+                            data: {
+                                richText: '<p>Column 3</p>'
+                            },
+                            id: 'b5755966a27336b89f398ee12d',
+                            typeId: 'commerce_assets.editorialRichText'
+                        }
+                    ],
+                    id: 'column3'
+                },
+                {
+                    components: [
+                        {
+                            data: {
+                                richText: '<p>Column 4</p>'
+                            },
+                            id: 'f4383d7c570ff3ed0ff8a67832',
+                            typeId: 'commerce_assets.editorialRichText'
+                        }
+                    ],
+                    id: 'column4'
+                },
+                {
+                    components: [
+                        {
+                            data: {
+                                richText: '<p>Column 5</p>'
+                            },
+                            id: '2bfff9731055f24f00e115026a',
+                            typeId: 'commerce_assets.editorialRichText'
+                        }
+                    ],
+                    id: 'column5'
+                },
+                {
+                    components: [
+                        {
+                            data: {
+                                richText: '<p>Column 6</p>'
+                            },
+                            id: '0c9324527840d3d58b64eaf407',
+                            typeId: 'commerce_assets.editorialRichText'
+                        }
+                    ],
+                    id: 'column6'
+                }
+            ]}
+        />
+    )
+    expect(document.querySelector('.mobile-3r-2c')).not.toBeNull()
+})

package/app/page-designer/utils.js

@@ -0,0 +1,14 @@
+/*
+ * Copyright (c) 2023, 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
+ */
+
+/**
+ * Determines whether the specified URL is absolute
+ *
+ * @param {string} url The URL to test
+ * @returns {boolean} True if the specified URL is absolute, otherwise false
+ */
+export const isAbsoluteURL = (url) => /^([a-z][a-z\d+\-.]*:)?\/\//i.test(url)