create-sitecore-jss 22.2.0-canary.2 → 22.2.0-canary.20

package/dist/templates/angular-xmcloud/src/assets/styles/sass/components/promo/_promo-shadow.scss

@@ -0,0 +1,42 @@
+@import "sass/abstracts/vars";
+@import "sass/abstracts/mixins";
+
+.promo-shadow {
+    max-width: 960px;
+    padding: 0;
+    border-top-width: 3px;
+    border-top-color: $promo-shadow-border;
+    border-style: solid;
+    overflow: visible;
+    position: relative;
+    &.promo {
+        float: left;
+    }
+    >.component-content {
+        @include respond-to(all-mobile) {
+            margin: 0 10px 30px 10px;
+        }
+        padding: 15px;
+        margin: 0 0 30px 0;
+        &:before, &:after {
+            opacity: 0.7;
+            box-shadow: 0 17px 10px rgba(0, 0, 0, 0.7);
+            position: absolute;
+            z-index: -1;
+            height: 20%;
+            max-height: 100px;
+            max-width: 460px;
+            width: 47%;
+            content: "";
+            bottom: 10px;
+        }
+        &:before {
+            left: 2%;
+            transform: rotate(-3deg);
+        }
+        &:after {
+            right: 2%;
+            transform: rotate(3deg);
+        }
+    }
+}

package/dist/templates/angular-xmcloud/src/assets/styles/sass/components/promo/index.scss

@@ -0,0 +1,3 @@
+@import "absolute-bottom-link";
+@import "promo-hero";
+@import "promo-shadow";

package/dist/templates/angular-xmcloud/src/assets/styles/sass/components/rich-text/_rich-text-lists.scss

@@ -0,0 +1,63 @@
+@import 'sass/abstracts/vars';
+@import 'sass/abstracts/mixins';
+
+.rich-text-lists,
+.field-featurelist {
+  ul {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    li {
+      @include font-size(1.3);
+      position: relative;
+      line-height: 21px;
+      list-style: none;
+      margin: 0;
+      padding: 5px 0 5px 25px;
+      &:before {
+        display: inline-block;
+        vertical-align: middle;
+        @include font-size(1.2);
+        font-family: 'FontAwesome', sans-serif;
+        position: absolute;
+        top: 3px;
+        left: 0;
+        color: $text-basic;
+        text-align: center;
+        content: '\f00c';
+        width: 20px;
+        margin: 0 5px 0 0;
+        padding: 0;
+      }
+    }
+  }
+}
+.field-featurelist {
+  ul {
+    li {
+      &:before {
+        display: inline-block;
+        vertical-align: middle;
+        @include font-size(1.2);
+        font-family: 'FontAwesome', sans-serif;
+        position: absolute;
+        top: 3px;
+        left: 0;
+        color: $text-basic;
+        text-align: center;
+        content: '\f046';
+        width: 20px;
+        margin: 0 5px 0 0;
+        padding: 0;
+      }
+    }
+  }
+}
+.media-link {
+  &.file-type-icon-media-link {
+    float: left;
+    .field-filetypeicon {
+      text-align: center;
+    }
+  }
+}

package/dist/templates/angular-xmcloud/src/assets/styles/sass/components/rich-text/index.scss

@@ -0,0 +1 @@
+@import "rich-text-lists";

package/dist/templates/angular-xmcloud/src/assets/styles/sass/components/spacing/_background-colors.scss

@@ -0,0 +1,14 @@
+@import 'sass/abstracts/vars';
+
+.container-gray-background {
+  background: $bg-light-gray;
+}
+.container-clean-background {
+  background: $bg-basic-color;
+}
+.container-dark-background {
+  background: $bg-black-active;
+}
+.container-color-background {
+  background: $bg-blue;
+}

package/dist/templates/angular-xmcloud/src/assets/styles/sass/components/spacing/_indent.scss

@@ -0,0 +1,13 @@
+@import 'sass/abstracts/vars';
+.indent {
+  margin: 0 $extralarge-margin;
+  &.col-xxl-12, &.col-xl-12, &.col-lg-12, &.col-md-12, &.col-12 {
+    width: calc(100% - ($extralarge-margin * 2));
+  }
+}
+.indent-top {
+  margin-top: $middle-margin;
+}
+.indent-bottom {
+  margin-bottom: $middle-margin;
+}

package/dist/templates/angular-xmcloud/src/assets/styles/sass/components/spacing/index.scss

@@ -0,0 +1,2 @@
+@import "background-colors";
+@import "indent";

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

@@ -0,0 +1,30 @@
+@import 'sass/abstracts/vars';
+@import 'sass/abstracts/mixins';
+
+.title {
+  background: $title-bg;
+
+  h1,
+  .field-title {
+    @include border-basic(bottom, $border-basic-color);
+    font-size: $font-extrabig;
+    margin-bottom: $small-margin;
+    color: $title-color;
+    line-height: normal;
+    padding-bottom: 10px;
+    display: block;
+    text-decoration: none;
+    cursor: pointer;
+
+    &:hover {
+      color: $title-color-active;
+    }
+
+    > a,
+    > span {
+      text-decoration: none;
+    }
+  }
+
+  @import 'sass/variants/title';
+}

package/dist/templates/angular-xmcloud/src/assets/styles/sass/components/title/index.scss

@@ -0,0 +1 @@
+@import "component-title";

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

@@ -0,0 +1,4 @@
+@import "base";
+@import "components";
+@import "variants";
+@import "app";

package/dist/templates/angular-xmcloud/src/assets/styles/sass/variants/index.scss

@@ -0,0 +1,6 @@
+@import "link-list";
+@import "navigation";
+@import "page-content";
+@import "promo";
+@import "rich-text";
+@import "title";

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-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/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/node-xmcloud-proxy/package.json

@@ -1,6 +1,6 @@
 {
   "name": "node-xmcloud-sample",
-  "version": "22.1.0-canary",
+  "version": "22.2.0-canary",
   "description": "Node XM Cloud Proxy sample for running XM Cloud JSS SPA apps",
   "author": {
     "name": "Sitecore Corporation",
@@ -16,7 +16,7 @@
     "http-proxy-middleware": "^3.0.0"
   },
   "devDependencies": {
-    "@sitecore-jss/sitecore-jss": "~22.1.0-canary",
+    "@sitecore-jss/sitecore-jss": "~22.2.0-canary",
     "@types/compression": "^1.7.2",
     "@types/express": "^4.17.17",
     "ts-node": "^10.9.1",

package/dist/templates/node-xmcloud-proxy/src/config.ts

@@ -3,7 +3,7 @@ import { Config, ServerBundle } from './types';
 /**
  * The server.bundle.js file from your pre-built SPA app.
  */
-const bundlePath = process.env.PROXY_BUNDLE_PATH || `../dist/server.bundle`;
+const bundlePath = process.env.PROXY_BUNDLE_PATH || '../dist/server.bundle';
 
 const serverBundle: ServerBundle = require(bundlePath);
 

package/dist/templates/node-xmcloud-proxy/src/index.ts

@@ -21,12 +21,11 @@ const requiredProperties = [
   'renderView',
   'parseRouteUrl',
   'clientFactory',
+  'getClientFactoryConfig',
   'siteName',
   'defaultLanguage',
   'layoutServiceFactory',
   'dictionaryServiceFactory',
-  'graphQLEndpointPath',
-  'graphQLEndpoint',
 ];
 
 const missingProperties = requiredProperties.filter((property) => !config.serverBundle[property]);
@@ -39,6 +38,31 @@ if (missingProperties.length > 0) {
   );
 }
 
+/**
+ * GraphQL endpoint resolution to meet the requirements of the http-proxy-middleware
+ */
+const graphQLEndpoint = (() => {
+  const clientFactoryConfig = config.serverBundle.getClientFactoryConfig();
+
+  try {
+    const graphQLEndpoint = new URL(clientFactoryConfig.endpoint);
+    // Browser request path to the proxy. Includes only the pathname. 
+    const pathname = graphQLEndpoint.pathname;
+    // Target URL for the proxy. Can't include the query string.
+    const target = `${graphQLEndpoint.protocol}//${graphQLEndpoint.hostname}${pathname}`;
+
+    return {
+      target,
+      path: pathname,
+    };
+  } catch (error) {
+    throw new Error(
+      `ERROR: The serverBundle should export a getClientFactoryConfig function with valid GraphQL endpoint URL returned, current value is ${clientFactoryConfig.endpoint}. ` +
+        'Please check your server bundle.'
+    );
+  }
+})();
+
 const layoutService = layoutServiceFactory.create();
 
 const dictionaryService = dictionaryServiceFactory.create();
@@ -94,9 +118,9 @@ server.use(
  * Proxy browser GraphQL requests to the Sitecore GraphQL endpoint
  */
 server.use(
-  config.serverBundle.graphQLEndpointPath,
+  graphQLEndpoint.path,
   createProxyMiddleware({
-    target: config.serverBundle.graphQLEndpoint,
+    target: graphQLEndpoint.target,
     changeOrigin: true,
   })
 );

package/dist/templates/node-xmcloud-proxy/src/types.ts

@@ -1,4 +1,7 @@
-import { GraphQLRequestClientFactory } from '@sitecore-jss/sitecore-jss';
+import {
+  GraphQLRequestClientFactory,
+  GraphQLRequestClientFactoryConfig,
+} from '@sitecore-jss/sitecore-jss';
 import { DictionaryService } from '@sitecore-jss/sitecore-jss/i18n';
 import { LayoutService, LayoutServiceData } from '@sitecore-jss/sitecore-jss/layout';
 
@@ -44,12 +47,11 @@ export interface ServerBundle {
   renderView: AppRenderer;
   parseRouteUrl: RouteUrlParser;
   clientFactory: GraphQLRequestClientFactory;
+  getClientFactoryConfig: () => GraphQLRequestClientFactoryConfig;
   siteName: string;
   defaultLanguage: string;
   layoutServiceFactory: { create: () => LayoutService };
   dictionaryServiceFactory: { create: () => DictionaryService };
-  graphQLEndpointPath: string;
-  graphQLEndpoint: string;
 }
 
 export interface Config {

package/dist/templates/react/scripts/generate-config.js

@@ -31,6 +31,11 @@ generateConfig();
  * NOTE! Any configs returned here will be written into the client-side JS bundle. DO NOT PUT SECRETS HERE.
  */
 function generateConfig() {
+  // Handle undefined values
+  Object.keys(defaultConfig).forEach((prop) => {
+    defaultConfig[prop] = defaultConfig[prop] || '';
+  });
+
   try {
     config = jssConfigFactory.create(defaultConfig);
   } catch (error) {
@@ -50,9 +55,11 @@ const config = {};\n`;
 
   // Set base configuration values, allowing override with environment variables
   Object.keys(config).forEach(prop => {
-    configText += `config.${prop} = process.env.REACT_APP_${constantCase(prop)} || "${
-      config[prop]?.trim()
-    }";\n`;
+    // Handle undefined values
+    const value = config[prop] || '';
+    configText += `config.${prop} = process.env.REACT_APP_${constantCase(
+      prop
+    )} || "${value.trim()}";\n`;
   });
   configText += 'module.exports = config;';
 

package/dist/templates/vue/scripts/generate-config.js

@@ -33,6 +33,11 @@ module.exports = function generateConfig(configOverrides) {
   // and finally config passed in the configOverrides param wins.
   const config = Object.assign(defaultConfig, scjssConfig, packageJson, configOverrides);
 
+  // Handle undefined values
+  Object.keys(config).forEach((prop) => {
+    config[prop] = config[prop] || '';
+  });
+
   // The GraphQL endpoint is an example of making a _computed_ config setting
   // based on other config settings.
   const computedConfig = {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-sitecore-jss",
-  "version": "22.2.0-canary.2",
+  "version": "22.2.0-canary.20",
   "description": "Sitecore JSS initializer",
   "bin": "./dist/index.js",
   "scripts": {
@@ -63,5 +63,5 @@
     "ts-node": "^10.9.1",
     "typescript": "~4.9.5"
   },
-  "gitHead": "ba1b71ef1209c0e3bdd3557d315a0e2a46ba4580"
+  "gitHead": "c525b47d1480e3e9ba40751f8493513f59fe25d0"
 }

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

@@ -1,28 +0,0 @@
-import {
-  GraphQLRequestClientFactoryConfig,
-  GraphQLRequestClient,
-} from '@sitecore-jss/sitecore-jss-angular';
-import { environment as env } from '../../environments/environment';
-
-// The GraphQLRequestClientFactory serves as the central hub for executing GraphQL requests within the application
-
-/**
- * Creates a new GraphQLRequestClientFactory instance
- * @returns GraphQLRequestClientFactory instance
- */
-export const createGraphQLClientFactory = () => {
-  let clientConfig: GraphQLRequestClientFactoryConfig;
-
-  if (env.graphQLEndpoint && env.sitecoreApiKey) {
-    clientConfig = {
-      endpoint: env.graphQLEndpoint,
-      apiKey: env.sitecoreApiKey,
-    };
-  } else {
-    throw new Error('Please configure your graphQLEndpoint and sitecoreApiKey.');
-  }
-
-  return GraphQLRequestClient.createClientFactory(clientConfig);
-};
-
-export const clientFactory = createGraphQLClientFactory();

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

@@ -1,44 +0,0 @@
-import {
-  GraphQLRequestClientFactoryConfig,
-  GraphQLRequestClient,
-} from '@sitecore-jss/sitecore-jss-angular';
-import { environment as env } from '../../environments/environment';
-
-// The GraphQLRequestClientFactory serves as the central hub for executing GraphQL requests within the application
-
-/**
- * Creates a new GraphQLRequestClientFactory instance
- * @returns GraphQLRequestClientFactory instance
- */
-export const createGraphQLClientFactory = () => {
-  let clientConfig: GraphQLRequestClientFactoryConfig;
-
-  // If we are in a production environment we are going to use Node XM Cloud proxy
-  if (env.production === 'true') {
-    if (env.proxyHost && env.sitecoreApiKey && env.graphQLEndpoint) {
-      // Server side requests should go directly to the Sitecore, browser requests should go through the proxy.
-      clientConfig = {
-        endpoint:
-          typeof window === 'undefined'
-            ? env.graphQLEndpoint
-            : `${env.proxyHost}${env.graphQLEndpointPath}`,
-        apiKey: env.sitecoreApiKey,
-      };
-    } else {
-      throw new Error('Please configure your proxyHost, sitecoreApiKey, graphQLEndpoint.');
-    }
-  } else {
-    if (env.graphQLEndpoint && env.sitecoreApiKey) {
-      clientConfig = {
-        endpoint: env.graphQLEndpoint,
-        apiKey: env.sitecoreApiKey,
-      };
-    } else {
-      throw new Error('Please configure your graphQLEndpoint and sitecoreApiKey.');
-    }
-  }
-
-  return GraphQLRequestClient.createClientFactory(clientConfig);
-};
-
-export const clientFactory = createGraphQLClientFactory();