create-sitecore-jss 22.2.0-canary.8 → 22.2.0-canary.81

package/dist/templates/angular-xmcloud/src/app/lib/graphql-client-factory/config.ts

@@ -0,0 +1,58 @@
+import {
+  GraphQLRequestClientFactoryConfig,
+  getEdgeProxyContentUrl,
+} from '@sitecore-jss/sitecore-jss-angular/cjs';
+import { environment as env } from '../../../environments/environment';
+
+/**
+ * Gets the configuration for the GraphQLRequestClientFactory
+ * @returns GraphQLRequestClientFactoryConfig
+ */
+export const getGraphQLClientFactoryConfig = () => {
+  let clientConfig: GraphQLRequestClientFactoryConfig;
+
+  // Server side requests should go directly to the Sitecore, browser requests should go through the proxy.
+  const isServer = typeof window === 'undefined';
+  // If we are in a production environment we are going to use Node XM Cloud proxy
+  const isProduction = env.production === 'true';
+
+  if (isProduction) {
+    if (!env.proxyHost) {
+      throw new Error('Please configure your proxyHost.');
+    }
+
+    if (env.sitecoreEdgeContextId) {
+      clientConfig = {
+        endpoint: isServer
+          ? getEdgeProxyContentUrl(env.sitecoreEdgeContextId, env.sitecoreEdgeUrl)
+          : getEdgeProxyContentUrl(env.sitecoreEdgeContextId, env.proxyHost),
+      };
+    } else if (env.graphQLEndpoint && env.sitecoreApiKey) {
+      const graphQLEndpointPath = new URL(env.graphQLEndpoint).pathname;
+
+      clientConfig = {
+        endpoint: isServer ? env.graphQLEndpoint : `${env.proxyHost}${graphQLEndpointPath}`,
+        apiKey: env.sitecoreApiKey,
+      };
+    }
+  } else {
+    if (env.sitecoreEdgeContextId) {
+      clientConfig = {
+        endpoint: getEdgeProxyContentUrl(env.sitecoreEdgeContextId, env.sitecoreEdgeUrl),
+      };
+    } else if (env.graphQLEndpoint && env.sitecoreApiKey) {
+      clientConfig = {
+        endpoint: env.graphQLEndpoint,
+        apiKey: env.sitecoreApiKey,
+      };
+    }
+  }
+
+  if (!clientConfig?.endpoint) {
+    throw new Error(
+      'Please configure either your sitecoreEdgeContextId, or your graphQLEndpoint and sitecoreApiKey.'
+    );
+  }
+
+  return clientConfig;
+};

package/dist/templates/angular-xmcloud/src/app/routing/layout/layout.component.html

@@ -0,0 +1,38 @@
+<div class="{{ mainClassPageEditing }}">
+  <ng-container *ngIf="state === LayoutState.Layout">
+    <app-scripts></app-scripts>
+    <header>
+      <div id="header">    
+        <sc-placeholder
+          name="headless-header"
+          [rendering]="route"
+          (loaded)="onPlaceholderLoaded($event)"
+        ></sc-placeholder>
+      </div>
+    </header>
+    <main>
+      <div id="content">
+        <sc-placeholder
+          name="headless-main"
+          [rendering]="route"
+          (loaded)="onPlaceholderLoaded($event)"
+        ></sc-placeholder>
+      </div>
+    </main>
+    <footer>
+      <div id="footer">
+        <sc-placeholder
+          name="headless-footer"
+          [rendering]="route"
+          (loaded)="onPlaceholderLoaded($event)"
+        ></sc-placeholder>
+      </div>
+    </footer>
+  </ng-container>
+
+  <app-not-found
+    *ngIf="state === LayoutState.NotFound"
+    [errorContextData]="errorContextData"
+  ></app-not-found>
+  <app-server-error *ngIf="state === LayoutState.Error"></app-server-error>
+</div>

package/dist/templates/angular-xmcloud/src/app/routing/layout/layout.component.ts

@@ -0,0 +1,104 @@
+/* eslint-disable no-shadow, no-console */
+import { Component, OnInit, OnDestroy } from '@angular/core';
+import {
+  RouteData,
+  Field,
+  LayoutServiceContextData,
+  getContentStylesheetLink,
+} from '@sitecore-jss/sitecore-jss-angular';
+import { ActivatedRoute } from '@angular/router';
+import { Subscription } from 'rxjs';
+import { JssState } from '../../JssState';
+import { JssMetaService } from '../../jss-meta.service';
+import { JssLinkService } from '../../jss-link.service';
+import { environment as env } from '../../../environments/environment';
+
+enum LayoutState {
+  Layout,
+  NotFound,
+  Error,
+}
+
+interface RouteFields {
+  [name: string]: unknown;
+  pageTitle?: Field<string>;
+}
+
+@Component({
+  selector: 'app-layout',
+  templateUrl: './layout.component.html',
+})
+export class LayoutComponent implements OnInit, OnDestroy {
+  route: RouteData<RouteFields>;
+  state: LayoutState;
+  LayoutState = LayoutState;
+  subscription: Subscription;
+  errorContextData: LayoutServiceContextData;
+  mainClassPageEditing: string;
+
+  constructor(
+    private activatedRoute: ActivatedRoute,
+    private readonly meta: JssMetaService,
+    private linkService: JssLinkService
+  ) {}
+
+  ngOnInit() {
+    // route data is populated by the JssRouteResolver
+    this.subscription = this.activatedRoute.data.subscribe((data: { jssState: JssState }) => {
+      if (!data.jssState) {
+        this.state = LayoutState.NotFound;
+        return;
+      }
+
+      if (data.jssState.sitecore && data.jssState.sitecore.route) {
+        this.route = data.jssState.sitecore.route;
+        this.setMetadata(this.route.fields);
+        this.state = LayoutState.Layout;
+        this.mainClassPageEditing = data.jssState.sitecore.context.pageEditing
+          ? 'editing-mode'
+          : 'prod-mode';
+
+        const contentStyles = getContentStylesheetLink(
+          { sitecore: data.jssState.sitecore },
+          env.sitecoreEdgeContextId,
+          env.sitecoreEdgeUrl
+        );
+
+        if (contentStyles) {
+          this.linkService.addHeadLinks(contentStyles);
+        }
+      }
+
+      if (data.jssState.routeFetchError) {
+        if (
+          data.jssState.routeFetchError.status >= 400 &&
+          data.jssState.routeFetchError.status < 500
+        ) {
+          this.state = LayoutState.NotFound;
+        } else {
+          this.state = LayoutState.Error;
+        }
+
+        this.errorContextData =
+          data.jssState.routeFetchError.data && data.jssState.routeFetchError.data.sitecore;
+      }
+    });
+  }
+
+  ngOnDestroy() {
+    // important to unsubscribe when the component is destroyed
+    this.subscription.unsubscribe();
+  }
+
+  setMetadata(routeFields: RouteFields) {
+    // set page title, if it exists
+    if (routeFields && routeFields.pageTitle) {
+      this.meta.setTitle(routeFields.pageTitle.value || 'Page');
+    }
+  }
+
+  onPlaceholderLoaded(_placeholderName: string) {
+    // you may optionally hook to the loaded event for a placeholder,
+    // which can be useful for analytics and other DOM-based things that need to know when a placeholder's content is available.
+  }
+}

package/dist/templates/angular-xmcloud/src/app/routing/scripts/cdp-page-view.component.ts

@@ -0,0 +1,77 @@
+import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Subscription } from 'rxjs';
+import { isServer, CdpHelper, LayoutServicePageState } from '@sitecore-jss/sitecore-jss-angular';
+import { pageView, PageViewData } from '@sitecore-cloudsdk/events/browser';
+import { JssContextService } from '../../jss-context.service';
+import { JssState } from '../../JssState';
+import { environment } from '../../../environments/environment';
+
+/**
+ * This is the CDP page view component.
+ * It uses the Sitecore Cloud SDK to enable page view events on the client-side.
+ * See Sitecore Cloud SDK documentation for details.
+ * https://www.npmjs.com/package/@sitecore-cloudsdk/events
+ */
+@Component({
+  selector: 'app-cdp-page-view',
+  template: '',
+})
+export class CdpPageViewComponent implements OnInit, OnDestroy {
+  private contextSubscription: Subscription;
+
+  constructor(private jssContext: JssContextService) {}
+
+  ngOnInit(): void {
+    if (!isServer()) {
+      this.contextSubscription = this.jssContext.state.subscribe((newState: JssState) => {
+        const {
+          route,
+          context: { pageState, language, variantId },
+        } = newState.sitecore;
+
+        // Do not create events in editing or preview mode or if missing route data
+        if (pageState !== LayoutServicePageState.Normal || !route?.itemId) {
+          return;
+        }
+
+        // Do not create events if disabled (e.g. we don't have consent)
+        if (this.disabled()) {
+          return;
+        }
+
+        const scope = process.env.PERSONALIZE_SCOPE;
+        const pageVariantId = CdpHelper.getPageVariantId(
+          route.itemId,
+          language || environment.defaultLanguage,
+          variantId as string,
+          scope
+        );
+
+        const pageViewData: PageViewData = {
+          channel: 'WEB',
+          currency: 'USD',
+          page: route.name,
+          pageVariantId,
+          language,
+        };
+
+        pageView(pageViewData).catch((err) => console.debug(err));
+      });
+    }
+  }
+
+  ngOnDestroy() {
+    if (this.contextSubscription) {
+      this.contextSubscription.unsubscribe();
+    }
+  }
+
+  /**
+   * Determines if the page view events should be turned off.
+   * IMPORTANT: You should implement based on your cookie consent management solution of choice.
+   * By default it is disabled if not in production mode
+   */
+  disabled = () => {
+    return !environment.production;
+  };
+}

package/dist/templates/angular-xmcloud/src/app/routing/scripts/cloud-sdk-init.component.ts

@@ -0,0 +1,48 @@
+import { Component, OnInit } from '@angular/core';
+import { take } from 'rxjs/operators';
+import { CloudSDK } from '@sitecore-cloudsdk/core/browser';
+import '@sitecore-cloudsdk/events/browser';
+import { isServer, LayoutServicePageState } from '@sitecore-jss/sitecore-jss-angular';
+import { environment } from '../../../environments/environment';
+import { JssContextService } from '../../jss-context.service';
+import { JssState } from '../../JssState';
+
+/**
+ * Component to init CloudSDK logic - to allow events throughout the site
+ */
+@Component({
+  selector: 'app-cloud-sdk-init',
+  template: '',
+})
+export class CloudSdkInitComponent implements OnInit {
+  constructor(private jssContext: JssContextService) {}
+
+  ngOnInit(): void {
+    if (!isServer() && environment.production) {
+      // to ensure that CloudSDK initialization logic runs only once in the browser, take only the first emitted value of state
+      this.jssContext.state.pipe(take(1)).subscribe((newState: JssState) => {
+        const {
+          route,
+          context: { pageState },
+        } = newState.sitecore;
+
+        // Do not initialize CloudSDK in editing or preview mode or if missing route data
+        if (pageState !== LayoutServicePageState.Normal || !route?.itemId) {
+          return;
+        }
+
+        CloudSDK({
+          siteName: environment.sitecoreSiteName,
+          sitecoreEdgeUrl: environment.sitecoreEdgeUrl,
+          sitecoreEdgeContextId: environment.sitecoreEdgeContextId,
+          // Replace with the top level cookie domain of the website that is being integrated e.g ".example.com" and not "www.example.com"
+          cookieDomain: window.location.hostname.replace(/^www\./, ''),
+          // Cookie may be created in personalize middleware (server), but if not we should create it here
+          enableBrowserCookie: true,
+        })
+          .addEvents()
+          .initialize();
+      });
+    }
+  }
+}

package/dist/templates/angular-xmcloud/src/app/routing/scripts/scripts.component.html

@@ -0,0 +1,5 @@
+<ng-container>
+  <sc-editing-scripts></sc-editing-scripts>
+  <app-cloud-sdk-init></app-cloud-sdk-init>
+  <app-cdp-page-view></app-cdp-page-view>
+</ng-container>

package/dist/templates/angular-xmcloud/src/app/routing/scripts/scripts.module.ts

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { ScriptsComponent } from './scripts.component';
+import { JssModule } from '@sitecore-jss/sitecore-jss-angular';
+import { CloudSdkInitComponent } from './cloud-sdk-init.component';
+import { CdpPageViewComponent } from './cdp-page-view.component';
+
+@NgModule({
+  exports: [ScriptsComponent],
+  imports: [JssModule],
+  declarations: [ScriptsComponent, CloudSdkInitComponent, CdpPageViewComponent],
+})
+export class ScriptsModule {}

package/dist/templates/angular-xmcloud/src/assets/styles/basic/_header.scss

@@ -8,7 +8,9 @@
 
     @include respond-to(mobile-large) {
       padding-bottom: 0;
-      flex-direction: column-reverse;
+      sc-placeholder {
+        flex-direction: column-reverse;
+      }
     }
   }
 }

package/dist/templates/angular-xmcloud/src/assets/styles/main.scss

@@ -2,3 +2,13 @@
 @import "bootstrap/scss/bootstrap";
 @import "sass/main.scss";
 @import "basic/main.scss";
+
+sc-placeholder {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+
+  &.row {
+    flex-direction: row;
+  }
+}

package/dist/templates/angular-xmcloud/src/assets/styles/sass/components/_component-image.scss

@@ -9,7 +9,7 @@
         display: inline-block;
         max-width: 100%;
     }
-    .image-caption {
+    span {
         display: block;
         font-style: italic;
         font-size: $font-small;

package/dist/templates/nextjs/package.json

@@ -28,7 +28,7 @@
     "@sitecore-jss/sitecore-jss-nextjs": "~22.2.0-canary",
     "graphql": "~15.8.0",
     "graphql-tag": "^2.12.6",
-    "next": "^14.1.0",
+    "next": "^14.2.7",
     "next-localization": "^0.12.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

package/dist/templates/nextjs/scripts/config/plugins/fallback.ts

@@ -13,7 +13,6 @@ class FallbackPlugin implements ConfigPlugin {
   async exec(config: JssConfig) {
     return Object.assign({}, config, {
       defaultLanguage: config.defaultLanguage || 'en',
-      sitecoreApiKey: config.sitecoreApiKey || 'no-api-key-set',
       layoutServiceConfigurationName: config.layoutServiceConfigurationName || 'default',
       publicUrl: config.publicUrl || getPublicUrl(),
     });

package/dist/templates/nextjs/scripts/generate-config.ts

@@ -29,6 +29,11 @@ generateConfig(defaultConfig);
  * @param {JssConfig} defaultConfig Default configuration.
  */
 function generateConfig(defaultConfig: JssConfig): void {
+  // Handle undefined values
+  Object.keys(defaultConfig).forEach(prop => {
+    defaultConfig[prop] = defaultConfig[prop] || '';
+  }, {});
+
   jssConfigFactory
     .create(defaultConfig)
     .then(config => {
@@ -53,7 +58,9 @@ const config = {};\n`;
 
   // Set configuration values, allowing override with environment variables
   Object.keys(config).forEach(prop => {
-    configText += `config.${prop} = process.env.${constantCase(prop)} || '${config[prop]?.trim()}';\n`;
+    // Handle undefined values
+    const value = config[prop] || '';
+    configText += `config.${prop} = process.env.${constantCase(prop)} || '${value.trim()}';\n`;
   });
 
   configText += `module.exports = config;`;

package/dist/templates/nextjs/src/lib/page-props-factory/plugins/component-props.ts

@@ -7,7 +7,8 @@ import { Plugin, isServerSidePropsContext } from '..';
 class ComponentPropsPlugin implements Plugin {
   private componentPropsService: ComponentPropsService;
 
-  order = 2;
+  // Make sure to run this plugin last to ensure that the updated layout data is used
+  order = 10;
 
   constructor() {
     this.componentPropsService = new ComponentPropsService();

package/dist/templates/nextjs-styleguide/scripts/config/plugins/disconnected.ts

@@ -29,6 +29,7 @@ class DisconnectedPlugin implements ConfigPlugin {
 
     return Object.assign({}, config, {
       sitecoreApiHost: `http://localhost:${port}`,
+      sitecoreApiKey: config.sitecoreApiKey || 'no-api-key-set',
     });
   }
 }

package/dist/templates/nextjs-sxa/src/assets/sass/components/_component-image.scss

@@ -9,7 +9,7 @@
         display: inline-block;
         max-width: 100%;
     }
-    .image-caption {
+    span {
         display: block;
         font-style: italic;
         font-size: $font-small;

package/dist/templates/nextjs-sxa/src/assets/sass/components/common/_alignment.scss

@@ -1,26 +1,53 @@
+@import '~bootstrap/scss/functions';
+@import '~bootstrap/scss/variables';
+@import '~bootstrap/scss/mixins';
+
+$breakpoints: sm, md, lg, xl, xxl;
+
 .position-left,
 .position-left * {
-    text-align: left !important;
+  text-align: left !important;
 }
 
 .position-right,
 .position-right * {
-    text-align: right !important;
+  text-align: right !important;
 }
 
 .position-center,
 .position-center * {
-    text-align: center !important;
+  text-align: center !important;
 }
 
 .position-left select {
-    direction: ltr !important;
+  direction: ltr !important;
 }
 
 .position-right select {
-    direction: rtl !important;
+  direction: rtl !important;
 }
 
 .position-center select {
-    text-align-last: center !important;
-}
+  text-align-last: center !important;
+}
+
+@mixin auto-margins($breakpoint) {
+  @include media-breakpoint-up(#{$breakpoint}) {
+    .ms-#{$breakpoint}-auto {
+      margin-left: auto !important;
+      margin-right: 0 !important;
+    }
+    .me-#{$breakpoint}-auto {
+      margin-right: auto !important;
+      margin-left: 0 !important;
+    }
+    .mx-#{$breakpoint}-auto {
+      margin-right: auto !important;
+      margin-left: auto !important;
+    }
+  }
+}
+
+@each $breakpoint in $breakpoints {
+  @include auto-margins($breakpoint);
+}

package/dist/templates/nextjs-sxa/src/components/Container.tsx

@@ -1,14 +1,9 @@
-import React from 'react';
 import {
   ComponentParams,
   ComponentRendering,
   Placeholder,
-  useSitecoreContext,
 } from '@sitecore-jss/sitecore-jss-nextjs';
-
-const BACKGROUND_REG_EXP = new RegExp(
-  /[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}/gi
-);
+import React from 'react';
 
 interface ComponentProps {
   rendering: ComponentRendering & { params: ComponentParams };
@@ -16,22 +11,19 @@ interface ComponentProps {
 }
 
 const DefaultContainer = (props: ComponentProps): JSX.Element => {
-  const { sitecoreContext } = useSitecoreContext();
   const containerStyles = props.params && props.params.Styles ? props.params.Styles : '';
   const styles = `${props.params.GridParameters} ${containerStyles}`.trimEnd();
   const phKey = `container-${props.params.DynamicPlaceholderId}`;
   const id = props.params.RenderingIdentifier;
+  const mediaUrlPattern = new RegExp(/mediaurl=\"([^"]*)\"/, 'i');
   let backgroundImage = props.params.BackgroundImage as string;
   let backgroundStyle: { [key: string]: string } = {};
 
-  if (backgroundImage) {
-    const prefix = `${sitecoreContext.pageState !== 'normal' ? '/sitecore/shell' : ''}/-/media/`;
-    backgroundImage = `${backgroundImage
-      ?.match(BACKGROUND_REG_EXP)
-      ?.pop()
-      ?.replace(/-/gi, '')}`;
+  if (backgroundImage && backgroundImage.match(mediaUrlPattern)) {
+    const mediaUrl = backgroundImage.match(mediaUrlPattern)?.[1] || '';
+
     backgroundStyle = {
-      backgroundImage: `url('${prefix}${backgroundImage}')`,
+      backgroundImage: `url('${mediaUrl}')`,
     };
   }
 

package/dist/templates/nextjs-xmcloud/package.json

@@ -1,7 +1,8 @@
 {
   "dependencies": {
-    "@sitecore/components": "^1.1.10",
-    "@sitecore-cloudsdk/events": "^0.3.1",
+    "@sitecore/components": "~2.0.0",
+    "@sitecore-cloudsdk/core": "^0.4.0",
+    "@sitecore-cloudsdk/events": "^0.4.0",
     "@sitecore-feaas/clientside": "^0.5.17"
   }
 }

package/dist/templates/nextjs-xmcloud/src/Bootstrap.tsx

@@ -1,21 +1,36 @@
+import { useEffect } from 'react';
 import { SitecorePageProps } from 'lib/page-props';
-import { context } from 'src/lib/context';
+import { CloudSDK } from '@sitecore-cloudsdk/core/browser';
+import '@sitecore-cloudsdk/events/browser';
 import config from 'temp/config';
+import { LayoutServicePageState } from '@sitecore-jss/sitecore-jss-nextjs';
 
 /**
  * The Bootstrap component is the entry point for performing any initialization logic
  * that needs to happen early in the application's lifecycle.
  */
 const Bootstrap = (props: SitecorePageProps): JSX.Element | null => {
-  /**
-   * Initializes the application Context and associated Software Development Kits (SDKs).
-   * This function is the entry point for setting up the application's context and any SDKs that are required for its proper functioning.
-   * It prepares the resources needed to interact with various services and features within the application.
-   */
-  context.init({
-    siteName: props.site?.name || config.sitecoreSiteName,
-    pageState: props.layoutData?.sitecore?.context?.pageState,
-  });
+  // Browser ClientSDK init allows for page view events to be tracked
+  useEffect(() => {
+    const pageState = props.layoutData?.sitecore?.context.pageState;
+    if (process.env.NODE_ENV === 'development')
+      console.debug('Browser Events SDK is not initialized in development environment');
+    else if (pageState !== LayoutServicePageState.Normal)
+      console.debug('Browser Events SDK is not initialized in edit and preview modes');
+    else {
+      CloudSDK({
+        sitecoreEdgeUrl: config.sitecoreEdgeUrl,
+        sitecoreEdgeContextId: config.sitecoreEdgeContextId,
+        siteName: props.site?.name || config.sitecoreSiteName,
+        enableBrowserCookie: true,
+        // Replace with the top level cookie domain of the website that is being integrated e.g ".example.com" and not "www.example.com"
+        cookieDomain: window.location.hostname.replace(/^www\./, ''),
+      })
+        .addEvents()
+        .initialize();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [props.site?.name]);
 
   return null;
 };