[angular-xmcloud][create-sitecore-jss] Add sxa styles to angular-xmcloud add on

CHANGELOG.md

@@ -15,11 +15,12 @@ Our versioning strategy is as follows:
 
 ### 🎉 New Features & Improvements
 
-* `[create-sitecore-jss]` `[template/angular]` `[template/angular-sxp]` `[template/angular-xmcloud]` Introduced "angular-sxp", "angular-xmcloud" addons ([#1838](https://github.com/Sitecore/jss/pull/1838))([#1845](https://github.com/Sitecore/jss/pull/1845)):
+* `[create-sitecore-jss]` `[template/angular]` `[template/angular-sxp]` `[template/angular-xmcloud]` Introduced "angular-sxp", "angular-xmcloud" addons ([#1838](https://github.com/Sitecore/jss/pull/1838))([#1845](https://github.com/Sitecore/jss/pull/1845))([#1858](https://github.com/Sitecore/jss/pull/1858))([#1865](https://github.com/Sitecore/jss/pull/1865)):
     * The Angular app should now be initialized by providing both templates (or using CLI prompts): 
       * SXP-based: 'angular,angular-sxp'
       * XMCloud-based: 'angular,angular-xmcloud'
     * Rework Angular initializer to support XMCloud and SXP journeys;
+    * Add SXA styles to xmcloud addon
 
 * `[create-sitecore-jss]` Rework Angular initializer to support XMCloud and SXP journeys ([#1845](https://github.com/Sitecore/jss/pull/1845))([#1858](https://github.com/Sitecore/jss/pull/1858))
 * `[create-sitecore-jss]` Allows proxy apps to be installed alongside main apps ([#1858](https://github.com/Sitecore/jss/pull/1858))

packages/create-sitecore-jss/src/common/processes/transform.test.ts

@@ -477,6 +477,7 @@ describe('transform', () => {
     let writeFileToPathStub: SinonStub;
     let transformFilenameStub: SinonStub;
     let openPackageJsonStub: SinonStub;
+    let openJsonStub: SinonStub;
     let log: SinonStub;
 
     beforeEach(() => {
@@ -496,6 +497,7 @@ describe('transform', () => {
       writeFileToPathStub?.restore();
       transformFilenameStub?.restore();
       openPackageJsonStub?.restore();
+      openJsonStub?.restore();
       log?.restore();
     });
 
@@ -693,6 +695,48 @@ describe('transform', () => {
       });
     });
 
+    it('should merge json file', async () => {
+      const templatePath = path.resolve('templates/next');
+      const destinationPath = path.resolve('samples/next');
+      const file = 'test.json';
+      const renderFileOutput = '{ "one": 1, "two": 2}';
+      const currentJson = { three: 3, four: 4 };
+      const templateJson = JSON.parse(renderFileOutput);
+      const mergedPkg = { merged: true };
+
+      globSyncStub = sinon.stub(glob, 'sync').returns([file]);
+      fsExistsSyncStub = sinon.stub(fs, 'existsSync').returns(true);
+      openJsonStub = sinon.stub(helpers, 'openJson').returns(currentJson);
+      ejsRenderFileStub = sinon.stub(ejs, 'renderFile').returns(Promise.resolve(renderFileOutput));
+      mergeStub = sinon.stub(transform, 'merge').returns(mergedPkg);
+      diffAndWriteFilesStub = sinon.stub(transform, 'diffAndWriteFiles');
+
+      const answers = {
+        destination: destinationPath,
+        templates: [],
+        appPrefix: false,
+        force: false,
+      };
+
+      await transformFunc(templatePath, answers);
+
+      expect(ejsRenderFileStub).to.have.been.calledOnceWith(path.join(templatePath, file), {
+        ...answers,
+        helper: {
+          isDev: false,
+          getPascalCaseName: helpers.getPascalCaseName,
+          getAppPrefix: helpers.getAppPrefix,
+        },
+      });
+      expect(mergeStub).to.have.been.calledOnceWith(currentJson, templateJson);
+      expect(openJsonStub).to.have.been.calledOnceWith(`${destinationPath}\\${file}`);
+      expect(diffAndWriteFilesStub).to.have.been.calledOnceWith({
+        rendered: JSON.stringify(mergedPkg, null, 2),
+        pathToNewFile: path.join(destinationPath, file),
+        answers,
+      });
+    });
+
     it('should concatenate .env file', async () => {
       const templatePath = path.resolve('templates/next');
       const destinationPath = path.resolve('samples/next');

packages/create-sitecore-jss/src/common/processes/transform.ts

@@ -9,6 +9,7 @@ import {
   getPascalCaseName,
   getAppPrefix,
   openPackageJson,
+  openJson,
   sortKeys,
   writeFileToPath,
   isDevEnvironment,
@@ -290,6 +291,12 @@ export const transform = async (
         // merge them and set the result to str which will then go through diff
         const merged = merge(currentPkg, templatePkg);
         str = JSON.stringify(merged, null, 2);
+      } else if (file.endsWith('.json') && fs.existsSync(pathToNewFile)) {
+        // we have other json file use simililar logic as for package.json to merge it
+        const currentJsonFile = openJson(pathToNewFile);
+        const templateJsonFile = JSON.parse(await renderFile(path.resolve(pathToTemplate), ejsData));
+        const merged = merge(currentJsonFile, templateJsonFile);
+        str = JSON.stringify(merged, null, 2);
       }
 
       if (file.endsWith('.env') && fs.existsSync(pathToNewFile)) {

packages/create-sitecore-jss/src/common/test-data/test.json

@@ -0,0 +1,9 @@
+{
+  "first": "test first",
+  "second": "test second",
+  "description": "Test package.json",
+  "third": {
+    "thirdOne": "tests third one"
+  },
+  "array": ["one", "two"]
+}

packages/create-sitecore-jss/src/common/utils/helpers.test.ts

@@ -13,9 +13,11 @@ import {
   getBaseTemplates,
   getAppPrefix,
   saveConfiguration,
+  openJson,
 } from './helpers';
 import { JsonObjectType } from '../processes/transform';
 import testPackage from '../test-data/test.package.json';
+import testJson from '../test-data/test.json';
 import rootPackage from '../../../package.json';
 import { Initializer } from '../Initializer';
 import { InitializerFactory } from '../../InitializerFactory';
@@ -80,6 +82,37 @@ describe('helpers', () => {
     });
   });
 
+  describe('openJson', () => {
+    let log: SinonStub;
+
+    it('should return json data using provided path', () => {
+      const filePath = path.resolve('src', 'common', 'test-data', 'test.json');
+
+      const result = openJson(filePath);
+
+      expect(result).to.deep.equal(testJson);
+    });
+
+    it('should throw an error when the path to the package does not exist', () => {
+      log = sinon.stub(console, 'log');
+
+      const filePath = path.resolve('not', 'existing', 'path', 'test.json');
+
+      const result = openJson(filePath);
+
+      expect(result).to.equal(undefined);
+      expect(log.calledTwice).to.equal(true);
+      expect(log.getCall(0).args[0]).to.equal(
+        chalk.red(`The following error occurred while trying to read ${filePath}:`)
+      );
+      expect(log.getCall(1).args[0]).to.equal(
+        chalk.red(`Error: ENOENT: no such file or directory, open '${filePath}'`)
+      );
+
+      log.restore();
+    });
+  });
+
   describe('writePackageJson', () => {
     let log: SinonStub;
     let writeFileSync: SinonStub;

packages/create-sitecore-jss/src/common/utils/helpers.ts

@@ -32,11 +32,15 @@ export const getPascalCaseName = (name: string): string => {
  */
 export const openPackageJson = (pkgPath?: string) => {
   const filePath = path.resolve(pkgPath ?? `.${sep}package.json`);
+  return openJson(filePath);
+};
+
+export const openJson = (jsonPath: string) => {
   try {
-    const data = fs.readFileSync(filePath, 'utf8');
+    const data = fs.readFileSync(jsonPath, 'utf8');
     return data ? JSON.parse(data) : undefined;
   } catch (error) {
-    console.log(chalk.red(`The following error occurred while trying to read ${filePath}:`));
+    console.log(chalk.red(`The following error occurred while trying to read ${jsonPath}:`));
     console.log(chalk.red(error));
   }
 };

packages/create-sitecore-jss/src/templates/angular-xmcloud/angular.json

@@ -0,0 +1,34 @@
+{
+  "projects": {
+    "<%- appName %>": {
+      "architect": {
+        "build": {
+          "options": {
+            "styles": [
+              "node_modules/bootstrap/dist/css/bootstrap.min.css",
+              "src/styles.css",
+              "src/assets/styles/main.scss"
+            ],
+            "stylePreprocessorOptions": {
+              "includePaths": ["src/assets/styles", "node_modules"]
+            }
+          }
+        },
+        "test": {
+          "options": {
+            "styles": ["src/styles.css", "src/assets/styles/main.scss"]
+          }
+        }
+      }
+    }
+  },
+  "schematics": {
+    "@schematics/angular:component": {
+      "prefix": "app",
+      "style": "scss"
+    },
+    "@schematics/angular:directive": {
+      "prefix": "app"
+    }
+  }
+}

packages/create-sitecore-jss/src/templates/angular-xmcloud/package.json

@@ -1,4 +1,7 @@
 {
-    "license": "yo-ho-ho"
-}
-
+  "dependencies": {
+    "font-awesome": "^4.7.0",
+    "sass": "^1.52.3",
+    "sass-alias": "^1.0.5"
+  }
+}

packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/basic/_component.scss

@@ -0,0 +1,48 @@
+.component-content {
+  @include respond-to(mobile-large) {
+    .row {
+      padding: 0;
+      margin: 0;
+    }
+  }
+}
+@include respond-to(mobile-large) {
+  .row {
+    margin: 0;
+    padding: 0;
+    > * {
+      padding: 0;
+      margin: 0;
+    }
+  }
+}
+
+.hero-banner {
+  .component-content {
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    height: 800px;
+
+    @include respond-to(mobile-large) {
+      height: 300px;
+    }
+  }
+  .sc-image-wrapper {
+    opacity: 0;
+  }
+  &.scEnabledChrome {
+    &.hero-banner-empty {
+      .sc-image-wrapper {
+        display: block;
+        width: 100%;
+
+        .scEmptyImage {
+          max-height: 800px;
+          max-width: 100%;
+          width: 100%;
+        }
+      }
+    }
+  }
+}

packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/basic/_container.scss

@@ -0,0 +1,64 @@
+@import "sass/abstracts/mixins";
+@import "variables";
+
+body {
+  font-family: Roboto;
+  color: $main-color;
+}
+
+
+@media (min-width: 1400px) {
+  .container {
+    max-width: 1250px;
+  }
+}
+
+main {
+  .main-header {
+    margin-top: 55px;
+    margin-bottom: 30px;
+
+    @include respond-to(mobile-large) {
+      margin-bottom: 0;
+    }
+
+    h4 {
+      font-size: $text-size-50;
+      font-weight: 500;
+      line-height: 70px;
+    }
+  }
+
+  .main-news-header {
+    margin-top: 60px;
+
+    h2 {
+      font-size: $text-size-36;
+      line-height: 43px;
+    }
+  }
+
+  @include respond-to(mobile-large) {
+    padding-top: 0;
+    margin-bottom: 0;
+
+    .main-header {
+      margin-top: 10px;
+
+      h4 {
+        font-size: $text-size-24;
+        line-height: 32px;
+      }
+    }
+
+    .main-news-header {
+      padding-bottom: 35px;
+
+      h2 {
+        margin-top: 0;
+        font-size: $text-size-18;
+        line-height: 22px;
+      }
+    }
+  }
+}

packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/basic/_fonts.scss

@@ -0,0 +1,3 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
+/* FontAwesome */
+@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css');

packages/create-sitecore-jss/src/templates/angular-xmcloud/src/assets/styles/basic/_footer.scss

@@ -0,0 +1,31 @@
+@import "sass/abstracts/mixins";
+@import "variables";
+
+footer {
+  @include respond-to(mobile-large) {
+    padding-top: 0;
+  }
+  .container-dark-background {
+    background-color: #262626;
+  }
+
+  .contacts {
+    font-size: $text-size-14;
+
+    a {
+      color: $text-white;
+    }
+
+    p, span {
+      color: $text-white;
+    }
+  }
+
+  .indent-inner {
+    padding: 65px;
+
+    @include respond-to(mobile-large) {
+      padding: 40px 0;
+    }
+  }
+}