use namespaced for custom components

Author: alexvuong

packages/extension-chakra-base/README.md

@@ -1,81 +1,15 @@
-:loudspeaker: Hey there, Salesforce Commerce Cloud community!
+# Extension Chakra Base
 
-We’re excited to hear your thoughts on your developer experience with PWA Kit and the Composable Storefront generally! Your feedback is incredibly valuable in helping us guide our roadmap and improve our offering.
 
-:clipboard: Take our quick survey here: [Survey](https://forms.gle/bUZNxQ3QKUcrjhV18) 
 
-Feel free to share this survey link with your colleagues, partners, or anyone who has experience with PWA Kit. Your input will help us shape the future of our development tools.
+## Installation
 
-Thank you for being a part of our community and for your continuous support! :raised_hands:
 
-# Description
 
-This is a sample PWA-Kit Application Extension. The purpose of this application extensions is to show how
-the Application Extensions API can be used to enhance your PWA-Kit base project.
 
-# Folder Structure
+## How it works
 
-This directory contains the PWA Kit Application Extension base files and structure. It includes the following files:
-```
-├── src
-│   ├── setup-server.ts
-│   └── setup-client.ts
-└── dev
-```
 
-1. `src/setup-server.ts`: The server-side setup function for the extension.
-2. `src/setup-client.ts`: The client-side setup function for the extension.
-3. `dev/`: PWA Kit App TypeScript template project used for developing the generated PWA Kit App Extension.
-
-# Peer Dependencies
-
-PWA-Kit Application Extensions are NPM packages at their most simplest form, and as such you can define
-what peer dependencies are required when using it. Because this sample application extension provides
-UI via a new "Sample" page, it requires that the below dependencies are installed at a minimum. 
-
-Depending on what features your application extensions provides it's recommended you include any third-party
-packages as peer dependencies so that your base application doesn't end up having multiple versions of a 
-given package.
-
-"react": "^18.2.0",
-"react-dom": "^18.2.0"
-
-# Configuration
-
-This section is optional and will depend on your application extensions implementation. If you have features
-that are configurable, then list those configurations here so that the PWA-Kit project implementor can configure
-the extension as they like. 
-
-```
-{
-    path: 'sample-page'
-}
-```
-
-# Installation
-
-```
-> npm install @salesforce/extension-starter<br/>
-> Downloading npm package... <br/>
-> Installing extension... <br/>
-> Finished. <br/>
-> Congratulations! The Sample extension was successfully installed! Please visit https://www.npmjs.com/package/@salesforce/extension-starter for more information on how to use this extension.
-```
-
-# Advanced Usage
-
-In order to customize this Application Extension to your particular needs we suggest that you refer to the section titled
-"configuration", but if there is something that you want to customize that isn't configurable and cannot wait for a feature
-request to be fulfilled, then you can use overrides. 
-
-Below is a list of files that can't be overridden from within your PWA-Kit base project. Please refer to the documentation here on
-how to properly override extensions. Additionally it's up to the Application Extension developer as to which files can and 
-cannot be overridden. Please refer to this documentation on how to write your first PWA-Kit Application Extension.
-
-## Overridable Files
-
-```
-/src/path/to/overridable/file.ts
-```
 
 
+## Configuration

packages/extension-chakra-base/src/components/sample-hoc.tsx

@@ -9,9 +9,6 @@ import {useApplicationExtensions} from '@salesforce/pwa-kit-extension-sdk/react'
 import {extendTheme, ThemeOverride} from '@chakra-ui/react'
 import {useExtensionConfig} from '../hooks/use-extension-config'
 import metaData from '../../extension-meta.json'
-import * as ChakraUI from '@chakra-ui/react'
-
-const chakraBuiltInComponents = Object.keys(ChakraUI)
 
 /**
  * This hook will look into each extension theme and merge all the themes into one single theme
@@ -30,41 +27,16 @@ export const useMergedTheme = () => {
     const extensionWithoutBase = extensions.filter((extension) => {
         return extension.getName() !== metaData.name
     })
-    const componentsInExtensions = extensionWithoutBase
-        .map((extension) => {
-            const theme =
-                extension.getTheme && extension.getConfig()?.applyTheme ? extension.getTheme() : {}
-            return Object.keys(theme.components)
-        })
-        .flat()
-
-    // we only want to namespace duplicate component from different extensions that is not chakra built in components
-    const duplicateComponents = componentsInExtensions
-        .filter(
-            (item, index, arr) => arr.indexOf(item) !== index && arr.lastIndexOf(item) === index
-        )
-        .filter((comp) => !chakraBuiltInComponents.includes(comp))
-    console.log('duplicateComponents', duplicateComponents)
 
     // TODO: fix types
     const extensionThemes: ThemeOverride[] = extensionWithoutBase
         .map((extension) => {
             const extensionTheme =
                 extension.getTheme && extension.getConfig()?.applyTheme ? extension.getTheme() : {}
-            // Should we get rid of origin component name after name spacing it?
-            Object.keys(extensionTheme.components).forEach((componentName) => {
-                if (duplicateComponents.includes(componentName)) {
-                    console.log('extension.getName()', extension.getName())
-                    const nameSpace = `${extension.getName()}/${componentName}`
-                    extensionTheme.components[nameSpace] = extensionTheme.components[componentName]
-                    delete extensionTheme.components[componentName]
-                }
-            })
             return extensionTheme
         })
         .filter((ex) => Object.keys(ex).length !== 0)
     const theme: ThemeOverride = extendTheme(...extensionThemes, baseExtensionTheme)
-
-    console.log('theme', theme)
+    // console.log('theme', theme)
     return theme
 }

packages/extension-chakra-base/src/hooks/use-theme.ts

@@ -12,14 +12,6 @@ import {RouteProps} from 'react-router-dom'
 // Platform Imports
 import {ApplicationExtension} from '@salesforce/pwa-kit-extension-sdk/react'
 
-// Local Imports
-import SamplePage from './pages/sample'
-
-// Overridable Imports
-// Using the `overridable` loader means that you are opting in to the override module resolution flow. As a result this module
-// will be resolved by first looking in the base projects `overrides` folder then the overrides folders of any extensions configured
-// after this one. Only if no module is found will the referenced module in this project be used.
-// import sampleHOC from 'overridable!./components/sample-hoc'
 import {withChakraProvider} from './components/with-chakra-provider'
 // Others
 import extensionMeta from '../extension-meta.json'
@@ -47,14 +39,7 @@ class ChakraBaseExtension extends ApplicationExtension<Config> {
      * NOTE: If you instead want to modify a list of all the routes, refer to the `beforeRouteMatch` below.
      */
     extendRoutes(routes: RouteProps[]): RouteProps[] {
-        return [
-            {
-                exact: true,
-                path: this.getConfig().path,
-                component: SamplePage
-            },
-            ...routes
-        ]
+        return routes
     }
 
     /**

packages/extension-chakra-base/src/pages/sample.tsx

@@ -1,3 +1,4 @@
 {
-    "id": "@salesforce/extension-chakra-store-locator"
-}
+    "id": "@salesforce/extension-chakra-store-locator",
+    "name": "ChakraStoreLocator"
+}

packages/extension-chakra-base/src/setup-app.ts

@@ -8,15 +8,14 @@
 import React from 'react'
 import {Heading, Badge, useMultiStyleConfig, SystemStyleObject} from '@chakra-ui/react'
 import metaData from '../../extension-meta.json'
-import {useApplicationExtension} from '@salesforce/pwa-kit-extension-sdk/react'
 
+/**
+ * Note: for any custom component for extension, the name space convention needs to be `${extensionName}/<componanyName>
+ * The reason we need this convention is to assure extensions components theme
+ * can work well with other extensions when installed in a single project. This will ensure the name will be unique per theme
+ */
 export const StoreLocatorHeading = (): JSX.Element => {
-    const extension = useApplicationExtension(metaData.id)
-    let styles: Record<string, SystemStyleObject>
-    styles = useMultiStyleConfig(`${extension?.getName()}/StoreHeading`)
-    if (Object.keys(styles).length === 0) {
-        styles = useMultiStyleConfig('StoreHeading')
-    }
+    const styles = useMultiStyleConfig(`${metaData.name}/StoreHeading`)
     return (
         <Heading sx={styles.heading}>
             <>

packages/extension-chakra-store-locator/extension-meta.json

@@ -59,6 +59,7 @@ class StoreLocatorExtension extends ApplicationExtension<Config> {
         ]
     }
 
+    // TODO: find a better place for this method
     public getTheme(): ThemeOverride {
         return theme
     }

packages/extension-chakra-store-locator/src/components/heading.tsx

@@ -5,6 +5,7 @@
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
  */
 import StoreHeading from '../theme/components/project/store-heading'
+import metaData from '../../extension-meta.json'
 
 const colors = {
     transparent: 'transparent',
@@ -31,7 +32,7 @@ const colors = {
     }
 }
 const components = {
-    StoreHeading
+    [`${metaData.name}/StoreHeading`]: StoreHeading
 }
 
 export default {

packages/extension-chakra-store-locator/src/setup-app.ts

@@ -1,3 +1,4 @@
 {
-    "id": "@salesforce/extension-chakra-storefront"
-}
+    "id": "@salesforce/extension-chakra-storefront",
+    "name": "ChakraStorefront"
+}