Merge pull request #1 from aem-design/develop

Develop

aemdesign-aem-compose/.eslintignore

@@ -1,3 +1,6 @@
+**/cypress/plugins
+**/cypress/support
+**/cypress/*.js
 **/config
 **/public
 

aemdesign-aem-compose/.eslintrc

@@ -8,7 +8,8 @@
   ],
 
   "plugins": [
-    "@typescript-eslint"
+    "@typescript-eslint",
+    "cypress"
   ],
 
   "parser": "vue-eslint-parser",

aemdesign-aem-compose/.stylelintrc

@@ -132,6 +132,7 @@
     "order/properties-alphabetical-order": true,
     "order/properties-order": null,
 
+    "scss/at-mixin-argumentless-call-parentheses": "never",
     "scss/at-function-named-arguments": "never",
     "scss/at-rule-no-unknown": [
       true,

aemdesign-aem-compose/@types/interface.d.ts

@@ -0,0 +1,122 @@
+interface Window {
+  CQ: any;
+  kWidget: KWidget;
+  google: any;
+  onYouTubeIframeAPIReady: () => void;
+
+  digitalData: {
+    [key: string]: any;
+
+    event: {
+      push: (data: DigitalDataPush) => {},
+    },
+  };
+
+  CustomEvent: (event: string, params: any) => CustomEvent<any>;
+  MSInputMethodContext: any;
+}
+
+interface Document {
+  documentMode: any;
+}
+
+interface Element {
+  matchesSelector(selectors: string): boolean;
+  msMatchesSelector(selectors: string): boolean;
+  mozMatchesSelector(selectors: string): boolean;
+  oMatchesSelector(selectors: string): boolean;
+
+  kBind(eventName: string, callback: (state: string) => void): void;
+
+  dummyElement: Element;
+  kaltura: any | null;
+  mediaProvider: string;
+  youtube: YT.Player;
+  waitForState: boolean;
+}
+
+interface HTMLSelectElement {
+  isWrapped: boolean;
+}
+
+interface HTMLOptionElement {
+  customItem: HTMLLIElement;
+}
+
+interface HTMLLIElement {
+  optionTarget: HTMLOptionElement;
+}
+
+interface ComponentConfig {
+  [key: string]: {
+    icon: Element,
+    selectors: string[],
+  };
+}
+
+interface DigitalDataPush {
+  eventAction: string;
+}
+
+interface BreakpointOptions {
+  [key: number]: OwlCarousel.Options;
+}
+
+interface CarouselOptions {
+  breakpoint?: BreakpointOptions;
+  destroy?: boolean;
+  needsCarousel: boolean;
+  needsSplit: boolean;
+  refreshOnly: boolean;
+}
+
+interface FieldElements {
+  input: HTMLInputElement;
+  label: HTMLLabelElement;
+}
+
+interface FormClickEvent {
+  event: Event;
+  input: HTMLInputElement;
+  target: HTMLElement;
+}
+
+interface FormInputEvent {
+  event: Event;
+  input: HTMLInputElement;
+  parent: HTMLElement;
+  state: InputType | MouseAndTouchType;
+}
+
+interface FormInputOptions {
+  watch?: boolean;
+}
+
+interface KWidget {
+  embed(options: any): Element;
+}
+
+interface MediaTracking {
+  lastWatchedSegment: number | null;
+  timer: number | null;
+}
+
+interface MediaBrand {
+  elements: Element[],
+  needed: boolean,
+}
+
+interface SearchResultsResponseItem {
+  title: string;
+  summary: string;
+  displayUrl: string;
+  collection: string;
+  metaData:any;
+};
+
+interface ISearchResultsItem {
+  title: string;
+  summary: string;
+  url: string;
+  collection: string;
+}

aemdesign-aem-compose/README.md

@@ -1,7 +1,12 @@
 [![Apache V2 License](http://img.shields.io/badge/license-Apache%20V2-blue.svg)](https://github.com/Comcast/patternlab-edition-node-webpack/blob/master/LICENSE)
 
-## AEM Design Prototype
-The prototype project is designed as the base for all AEM Design components, functionality, and behaviour. It encapsulates static assets, JavaScript, CSS and a styleguide project within that controls the DLS (Design Language System).
+## AEM Design Compose
+The compose project is designed as the base for all AEM Design components, functionality, and behaviour. It encapsulates static assets, JavaScript, CSS and a styleguide project within that controls the DLS (Design Language System).
+
+## Features
+
+- Content generator - for generating content for AEM using YML
+- VUE widgets 
 
 ## Installation
 Getting going is pretty simple, you will, however, need to make sure you have the below installed first to ensure a smooth and consistent experience with other developers.
@@ -19,30 +24,33 @@ Once you have met the requirements above, install the npm packages by simply run
 
 `yarn`
 
-### Sync AEM with Your Local
-Before you can start working on prototype, you need to sync the `clientibs` structure from AEM which we need to do VLT syncing. This syncing allows us to push smaller updates into AEM without requiring complete deployments which can take a while. This process only really needs to be done once but if you experience a `NULL` pointer error you will need to run the same command again.
+## Deploy Code into AEM
+Run `./deploy-local` and the Prototype project will installed into your local AEM instance.
 
-Run the following to begin the sync: `yarn aem:checkout`
+### Hot Module Reloading
+All local development uses `webpack-dev-server` which proxies to your local AEM instance and provides real time updates without needing to constantly deploy manually. The beneift to manual deployments is that we get:
 
-## Deploy Code into AEM
-When you have VLT synced locally you can now run the command needed for the project you're working on.
+- HMR support
+- Real time change support
+- Proper debugging via an IDE
+- True sourcemaps
 
->**NOTE:** Using any of the `yarn sync:*` commands results in a delay of ~6-8 seconds depending on the project.
-#### Core
-- Build directly into AEM: `yarn build:core`
-- Watch for changes and sync into AEM: `yarn dev:core`
+Visit http://localhost:4504 in your browser once `webpack-dev-server` has started.
 
-##### Core (HMR)
-You may also use HMR via `webpack-dev-server` which proxies to your local AEM instance and provide real-time change support unlike the manual syncing approach. To start this process run `yarn serve:sut` and then visit http://localhost:4504 in your browser.
+**NOTE:** You can only run one project at a time!
 
-#### DLS (Styleguide)
-- Build directly into AEM: `yarn build:sg`
-- Watch for changes and sync into AEM: `yarn dev:sg`
+#### Core
+`yarn serve:sut`
 
+#### DLS (Styleguide)
 The styleguide is its own project to remove any duplicate/irrelevant code from the final website builds. This allows us to have specific deployments for DLS while maintaining a clean codebase for other projects.
 
+`yarn serve:sg`
+
 ## Linting
 All code in the project is linted both in your IDE (where supported) and during compilation. This is to ensure that bugs and issues can be fixed before going out and ensures consistency between developers. ESLint is used across all projects while TSLint is only used on TypeScript projects.
 
 ## Testing
-Cypress will be used for all front end testing.
+Cypress will be used for all front end testing. To run tests you can use the full filename or globbing for partial matching.
+
+`yarn test:cypress:run 'forms*' 'site-search`

aemdesign-aem-compose/config/projects.json

@@ -9,7 +9,7 @@
       },
 
       "header": {
-        "mapToOutput": ["vendors"],
+        "mapToOutput": ["vendorlib/common"],
         "outputName": "clientlibs-header"
       }
     },
@@ -20,10 +20,14 @@
     },
 
     "additionalEntries": {
-      "vendors": [
-        "es6-promise/dist/es6-promise.auto.min",
-        "classlist.js/classList.min",
-        "picturefill/dist/picturefill.min",
+      "vendorlib/common": [
+        "./core/js/vendor.ts",
+        "es6-promise/auto",
+        "classlist.js",
+        "lazysizes",
+        "lazysizes/plugins/object-fit/ls.object-fit",
+        "lazysizes/plugins/parent-fit/ls.parent-fit",
+        "picturefill",
         "bootstrap/js/dist/util",
         "bootstrap/js/dist/collapse",
         "bootstrap/js/dist/dropdown"

aemdesign-aem-compose/config/webpack.loaders.js

@@ -20,7 +20,7 @@ const CSSLoaders = (env, options = {}) => ([
       sourceMap : env.dev === true,
 
       config: {
-        path: resolve(process.cwd(), 'postcss.config.js'),
+        path: resolve(__dirname, '../postcss.config.js'),
 
         ctx: {
           prod: env.prod === true,
@@ -44,7 +44,7 @@ const CSSLoaders = (env, options = {}) => ([
 /**
  * JavaScript loaders
  */
-const JSLoaders = (env) => ([
+const JSLoaders = (env, options = {}) => ([
   {
     exclude : [resolve('node_modules')],
     loader  : 'vue-loader',
@@ -60,6 +60,10 @@ const JSLoaders = (env) => ([
       },
       {
         loader: 'ts-loader',
+
+        options: {
+          configFile: options.configFile ? options.configFile : resolve(process.cwd(), 'tsconfig.json'),
+        },
       },
     ],
   },