feat(au1-app): add simple Monday integration

.husky/pre-commit

@@ -1,6 +1,8 @@
 #!/usr/bin/env sh
 . "$(dirname -- "$0")/_/husky.sh"
 
+yarn run lint
+
 yarn run e2e
 
 yarn run cy

.vscode/settings.json

@@ -1,7 +1,5 @@
 {
   "typescript.tsdk": "node_modules/typescript/lib",
-  "html.suggest.angular1": false,
-  "html.suggest.ionic": false,
   "cSpell.words": [
     "execa",
     "testid"
@@ -20,5 +18,5 @@
       "url": "https://github.com/devops-example-org/frontend/pull/<num>"
     }
   ],
-  "cmake.configureOnOpen": false
+  "liquid.format.enable": true
 }

.yarnrc.yml

@@ -1,3 +1,4 @@
+cloneConcurrency: 8
 nodeLinker: node-modules
 nmHoistingLimits: "none"
 

package.json

@@ -32,51 +32,94 @@
     "@commitlint/config-conventional": "^17.4.4",
     "@commitlint/config-lerna-scopes": "^17.4.2",
     "@cypress/browserify-preprocessor": "^3.0.2",
+    "@fluentui/react": "^8.106.7",
     "@manypkg/cli": "^0.20.0",
     "@microsoft/fast-components": "^2.30.6",
     "@microsoft/fast-element": "^1.11.0",
     "@microsoft/fast-foundation": "^2.47.1-0",
     "@microsoft/fast-web-utilities": "^6.0.0",
+    "@n8d/htwoo-core": "^1.3.0",
+    "@playwright/test": "^1.31.2",
     "@types/copyfiles": "^2.4.1",
-    "@types/is-ci": "^3",
+    "@types/is-ci": "^3.0.0",
+    "@types/jest": "^29.4.4",
+    "@types/node": "^18.15.3",
+    "@types/webpack": "^5.28.0",
+    "@typescript-eslint/eslint-plugin": "^5.55.0",
+    "@typescript-eslint/parser": "^5.55.0",
+    "app-settings-loader": "^2.0.8",
     "aurelia-binding": "^2.5.4",
     "aurelia-bootstrapper": "^2.4.0",
+    "aurelia-cli": "^3.0.1",
     "aurelia-dependency-injection": "^1.5.2",
     "aurelia-event-aggregator": "^1.0.3",
     "aurelia-framework": "^1.4.1",
     "aurelia-history-browser": "^1.4.0",
     "aurelia-hot-module-reload": "^0.3.0",
+    "aurelia-loader": "^1.0.2",
+    "aurelia-loader-nodejs": "^1.1.0",
     "aurelia-loader-webpack": "^2.2.5",
     "aurelia-logging": "^1.5.2",
     "aurelia-logging-console": "^1.1.1",
+    "aurelia-metadata": "^1.0.7",
     "aurelia-pal": "^1.8.2",
+    "aurelia-pal-nodejs": "^2.0.0",
     "aurelia-path": "^1.1.7",
     "aurelia-router": "^1.7.1",
     "aurelia-task-queue": "^1.3.3",
     "aurelia-templating": "^1.11.1",
     "aurelia-templating-binding": "^1.6.0",
     "aurelia-templating-resources": "^1.14.3",
     "aurelia-templating-router": "^1.5.0",
+    "aurelia-testing": "^1.1.0",
     "aurelia-typed-observable-plugin": "^0.5.1",
     "aurelia-validation": "2.0.0-rc1",
     "aurelia-webpack-plugin": "^5.0.5",
+    "autoprefixer": "^10.4.14",
     "clean-webpack-plugin": "^4.0.0",
     "concurrently": "^7.6.0",
+    "copy-webpack-plugin": "^11.0.0",
     "copyfiles": "^2.4.1",
-    "cypress": "^12.7.0",
+    "css-loader": "^6.7.3",
+    "cssnano": "^5.1.15",
+    "cypress": "^12.8.1",
     "cypress-visual-regression": "^2.1.1",
-    "execa": "^7.0.0",
+    "dot-env": "^0.0.1",
+    "dotenv-webpack": "^8.0.1",
+    "duplicate-package-checker-webpack-plugin": "^3.0.0",
+    "eslint": "^8.36.0",
+    "execa": "^7.1.1",
+    "expose-loader": "^4.1.0",
+    "gulp": "^4.0.2",
+    "gulp-eslint": "^6.0.0",
+    "html-loader": "^4.2.0",
+    "html-webpack-plugin": "^5.5.0",
     "husky": "^8.0.3",
     "is-ci": "^3.0.1",
+    "jest": "^29.5.0",
+    "jest-cli": "^29.5.0",
+    "jest-transform-stub": "^2.0.0",
+    "json-loader": "^0.5.7",
+    "mini-css-extract-plugin": "^2.7.4",
+    "minimatch": "^5.1.6",
     "office-ui-fabric-core": "^11.1.0",
-    "resolve-typescript-plugin": "^2.0.0",
+    "postcss": "^8.4.21",
+    "postcss-loader": "^7.1.0",
+    "promise-polyfill": "^8.3.0",
+    "resolve-typescript-plugin": "^2.0.1",
+    "sass": "^1.59.3",
+    "sass-loader": "^13.2.0",
     "source-map-loader": "^4.0.1",
+    "style-loader": "^3.3.2",
+    "tree-kill": "^1.2.2",
+    "ts-jest": "^29.0.5",
     "ts-loader": "^9.4.2",
     "tslib": "^2.5.0",
     "turbo": "^1.8.3",
     "typescript": "^4.9.5",
-    "webpack": "^5.75.0",
+    "webpack": "^5.76.2",
+    "webpack-bundle-analyzer": "^4.8.0",
     "webpack-cli": "^5.0.1",
-    "webpack-dev-server": "^4.11.1"
+    "webpack-dev-server": "^4.12.0"
   }
 }

packages/au1-app/package.json

@@ -7,53 +7,6 @@
     "url": "???"
   },
   "license": "MIT",
-  "devDependencies": {
-    "@playwright/test": "^1.31.2",
-    "@types/jest": "^29.4.0",
-    "@types/node": "^18.14.6",
-    "@types/webpack": "^5.28.0",
-    "@typescript-eslint/eslint-plugin": "^5.54.1",
-    "@typescript-eslint/parser": "^5.54.1",
-    "app-settings-loader": "^2.0.8",
-    "aurelia-cli": "^3.0.1",
-    "aurelia-loader-nodejs": "^1.1.0",
-    "aurelia-pal-nodejs": "^2.0.0",
-    "aurelia-testing": "^1.1.0",
-    "aurelia-webpack-plugin": "^5.0.5",
-    "autoprefixer": "^10.4.13",
-    "clean-webpack-plugin": "^4.0.0",
-    "copy-webpack-plugin": "^11.0.0",
-    "css-loader": "^6.7.3",
-    "cssnano": "^5.1.15",
-    "duplicate-package-checker-webpack-plugin": "^3.0.0",
-    "eslint": "^8.35.0",
-    "expose-loader": "^4.0.0",
-    "gulp": "^4.0.2",
-    "gulp-eslint": "^6.0.0",
-    "html-loader": "^4.2.0",
-    "html-webpack-plugin": "^5.5.0",
-    "jest": "^29.5.0",
-    "jest-cli": "^29.5.0",
-    "jest-transform-stub": "^2.0.0",
-    "json-loader": "^0.5.7",
-    "mini-css-extract-plugin": "^2.7.2",
-    "minimatch": "^5.1.6",
-    "postcss": "^8.4.21",
-    "postcss-loader": "^7.0.2",
-    "promise-polyfill": "^8.3.0",
-    "sass": "^1.58.3",
-    "sass-loader": "^13.2.0",
-    "style-loader": "^3.3.1",
-    "tree-kill": "^1.2.2",
-    "ts-jest": "^29.0.5",
-    "ts-loader": "^9.4.2",
-    "tslib": "^2.5.0",
-    "typescript": "^4.9.5",
-    "webpack": "^5.75.0",
-    "webpack-bundle-analyzer": "^4.8.0",
-    "webpack-cli": "^5.0.1",
-    "webpack-dev-server": "^4.11.1"
-  },
   "browserslist": [
     "defaults"
   ],
@@ -74,10 +27,10 @@
     "node": ">=14.15.0"
   },
   "overrides": {
-    "chokidar": "^3.0.0",
+    "chokidar": "^3.5.3",
     "glob-stream": "^7.0.0",
-    "glob-parent": "^6.0.0",
-    "micromatch": "^4.0.0"
+    "glob-parent": "^6.0.2",
+    "micromatch": "^4.0.5"
   },
   "jest": {
     "testMatch": [

packages/au1-app/playwright.config.ts

@@ -99,8 +99,9 @@ const config: PlaywrightTestConfig = {
 
   /* Run your local dev server before starting the tests */
   webServer: {
-    command: 'webpack serve --port 8081',
-    port: 8081,
+    command: 'webpack serve --port 8080',
+    port: 8080,
+    reuseExistingServer: true
   },
 };
 

packages/au1-app/src/app.html

@@ -1,7 +1,13 @@
 <template>
+  <!-- <require from="office-ui-fabric-core/src/sass/Fabric.scss"></require> -->
+  <require from="./resources/sass/Fabric.scss"></require>
   <require from="office-ui-fabric-core/src/documentation/sass/docs.scss"></require>
-  <require from="office-ui-fabric-core/src/sass/Fabric.scss"></require>
   <require from="./resources/fabric.components.css"></require>
+  <require from="./resources/sass/mixins/_Grid.Mixins.scss"></require>
+  <require from="./resources/CommandButton.scss"></require>
+  <require from="./resources/CommandBar.scss"></require>
+  <require from="./resources/DetailsList.scss"></require>
+  <!-- <require from="./resources/Dropdown.scss"></require> -->
   <require from="./app.scss"></require>
 
   <h1>${message}</h1>

packages/au1-app/src/app.scss

@@ -1,3 +1,12 @@
+@import "resources/styles/components/details-list/DetailsHeader.scss";
+@import "resources/styles/components/details-list/DetailsList.scss";
+@import "resources/styles/components/details-list/DetailsRow.scss";
+@import "resources/styles/components/details-list/DetailsRowCheck.scss";
+
+.SubmitButton {
+  margin-top: 20px;
+}
+
 .ms-Stack {
   display: flex;
   flex-direction: column;
@@ -9,43 +18,73 @@
   color: rgb(50, 49, 48);
 }
 
-.ms-FocusZone {
-    display: flex;
-    flex-direction: column;
-    flex-wrap: nowrap;
-    width: auto;
-    height: auto;
-    box-sizing: border-box;
-    background-color: rgb(255, 255, 255);
-    color: rgb(50, 49, 48);
+.ms-Grid-row {
+  @include ms-Grid-row;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  height: auto;
+  position: relative;
+  box-sizing: border-box;
 }
 
-.ms-OverflowSet {
-  position: relative;
+.ms-Grid-col {
+  @include ms-Grid-col;
   display: flex;
+  flex-direction: column;
   flex-wrap: nowrap;
-  flex-grow: 1;
-  align-items: stretch;
+  box-sizing: border-box;
 }
 
-ms-OverflowSetVertical {
+.ms-Grid {
+  @include ms-Grid;
+  display: flex;
   flex-direction: column;
+  flex-wrap: nowrap;
+  width: auto;
+  height: auto;
+  box-sizing: border-box;
+  background-color: rgb(255, 255, 255);
+  color: rgb(50, 49, 48);
 }
 
-.ms-OverflowSet-item, .ms-OverflowSet-overflowButton {
-  flex-shrink: 0;
-  display: inherit;
-}
+// .ms-FocusZone {
+//     display: flex;
+//     flex-direction: column;
+//     flex-wrap: nowrap;
+//     width: auto;
+//     height: auto;
+//     box-sizing: border-box;
+//     background-color: rgb(255, 255, 255);
+//     color: rgb(50, 49, 48);
+// }
 
-.ms-Button--commandBar{ 
-  min-width: 40px;
-  background-color: white;
-  color: rgb(50, 49, 48);
-  padding: 0 4px;
-  border: none;  
-}
+// .ms-OverflowSet {
+//   position: relative;
+//   display: flex;
+//   flex-wrap: nowrap;
+//   flex-grow: 1;
+//   align-items: stretch;
+// }
 
-.ms-Button--commandBar:focus {
-  inset: 2;
-  border-color: transparent;
-}
+// ms-OverflowSetVertical {
+//   flex-direction: column;
+// }
+
+// .ms-OverflowSet-item, .ms-OverflowSet-overflowButton {
+//   flex-shrink: 0;
+//   display: inherit;
+// }
+
+// .ms-Button--commandBar{ 
+//   min-width: 40px;
+//   background-color: white;
+//   color: rgb(50, 49, 48);
+//   padding: 0 4px;
+//   border: none;  
+// }
+
+// .ms-Button--commandBar:focus {
+//   inset: 2;
+//   border-color: transparent;
+// }

packages/au1-app/src/app.ts

@@ -11,7 +11,8 @@ export class App {
     config.title = 'Contacts';
     config.map([
       { route: ['', 'home'],          moduleId: PLATFORM.moduleName('routes/home/index'),     name: 'home',    nav: true,   title: 'Home' },
-      { route: '/app-module-one',  moduleId: PLATFORM.moduleName('routes/app-module-one/index'), name:'app-module-one', nav: true,   title: 'The App Module #1' }
+      { route: '/app-module-one',  moduleId: PLATFORM.moduleName('routes/app-module-one/index'), name:'app-module-one', nav: true,   title: 'The App Module #1' },
+      { route: '/monday-integration',  moduleId: PLATFORM.moduleName('routes/monday-integration/index'), name:'monday-integration', nav: true,   title: 'The Monday.com Integration' }
     ]);
 
     this.router = router;