project-booster-vue 8.131.1 → 9.0.0

package/package.json

@@ -1,22 +1,24 @@
 {
   "name": "project-booster-vue",
-  "version": "8.131.1",
+  "version": "9.0.0",
   "private": false,
   "scripts": {
+    "serve": "vue-cli-service serve",
     "test:unit": "vue-cli-service test:unit --forceExit --detectOpenHandles",
     "kozikaza-tokens-build": "env PB_THEME=kozikaza mozaic-tokens-build",
     "lint:js": "vue-cli-service lint --no-fix -- ./",
     "lint:js:fix": "vue-cli-service lint --fix -- ./",
     "lint:style": "stylelint '**/*.vue' '**/*.scss'",
     "lint:style:fix": "stylelint '**/*.vue' '**/*.scss' --fix",
-    "prettier:check": "prettier --list-different \"./**/*.{html,js,vue,json,mdx}\"",
-    "prettier:write": "prettier --write \"./**/*.{html,js,vue,json,mdx}\"",
+    "prettier:check": "prettier --list-different \"./**/*.{html,ts,js,vue,json,mdx}\"",
+    "prettier:write": "prettier --write \"./**/*.{html,ts,js,vue,json,mdx}\"",
     "schema:build": "node ./jsonSchema/index.js",
     "semantic-release": "semantic-release",
-    "storybook": "start-storybook -s public --port 60009",
-    "storybook-kozikaza": "env PB_THEME=kozikaza start-storybook -s public --port 60010",
+    "storybook": "start-storybook --port 60009 --loglevel verbose",
+    "storybook-kozikaza": "env PB_THEME=kozikaza start-storybook --port 60010",
     "storybook:deploy": "storybook-to-ghpages",
-    "test:puppeteer": "vue-cli-service test:unit --config jest.puppeteer.config.js --forceExit --detectOpenHandles"
+    "test:puppeteer": "vue-cli-service test:unit --config jest.puppeteer.config.js --forceExit --detectOpenHandles",
+    "contentful-typescript-codegen": "contentful-typescript-codegen --output src/types/contentful.d.ts"
   },
   "main": "./dist/project-booster-vue.common.js",
   "files": [
@@ -33,13 +35,12 @@
     "@mozaic-ds/styles": "1.24.1",
     "@mozaic-ds/tokens": "1.22.0",
     "@mozaic-ds/web-fonts": "1.22.0",
-    "@vue/babel-preset-app": "4.5.13",
-    "@vue/compat": "3.2.6",
+    "@types/lodash.isempty": "4.4.6",
     "@xstate/vue": "0.8.1",
     "ajv": "8.6.0",
     "axios": "0.25.0",
-    "contentful": "8.4.2",
-    "core-js": "3.19.1",
+    "contentful": "9.1.12",
+    "core-js": "3.21.1",
     "date-fns": "2.22.1",
     "firebase": "8.6.7",
     "he": "1.2.0",
@@ -51,8 +52,8 @@
     "lodash.merge": "4.6.2",
     "lodash.uniqby": "4.7.0",
     "mitt": "3.0.0",
-    "object-hash": "2.2.0",
-    "object-path": "0.11.5",
+    "object-hash": "3.0.0",
+    "object-path": "0.11.8",
     "ramda": "0.26.1",
     "request": "2.88.0",
     "svg-injector": "1.1.3",
@@ -69,6 +70,7 @@
   },
   "devDependencies": {
     "@babel/core": "7.16.0",
+    "@babel/helper-skip-transparent-expression-wrappers": "7.16.0",
     "@babel/plugin-proposal-class-properties": "7.16.0",
     "@babel/plugin-proposal-nullish-coalescing-operator": "7.16.0",
     "@babel/plugin-proposal-optional-chaining": "7.16.0",
@@ -76,53 +78,82 @@
     "@babel/plugin-proposal-private-property-in-object": "7.16.0",
     "@babel/plugin-transform-destructuring": "7.16.0",
     "@babel/plugin-transform-modules-commonjs": "7.16.0",
-    "@babel/helper-skip-transparent-expression-wrappers": "7.16.0",
     "@mswjs/interceptors": "0.12.7",
     "@semantic-release/changelog": "5.0.1",
     "@semantic-release/git": "9.0.0",
-    "@storybook/addon-a11y": "6.4.18",
-    "@storybook/addon-essentials": "6.4.18",
+    "@storybook/addon-a11y": "6.4.19",
+    "@storybook/addon-essentials": "6.4.19",
     "@storybook/addon-knobs": "6.3.1",
-    "@storybook/addon-links": "6.4.18",
+    "@storybook/addon-links": "6.4.19",
     "@storybook/addon-postcss": "2.0.0",
-    "@storybook/addon-storyshots": "6.4.18",
-    "@storybook/addon-storyshots-puppeteer": "6.4.18",
-    "@storybook/addon-storysource": "6.4.18",
-    "@storybook/addons": "6.4.18",
-    "@storybook/builder-webpack5": "6.4.18",
-    "@storybook/manager-webpack5": "6.4.18",
-    "@storybook/source-loader": "6.4.18",
+    "@storybook/addon-storyshots": "6.4.19",
+    "@storybook/addon-storyshots-puppeteer": "6.4.19",
+    "@storybook/addon-storysource": "6.4.19",
+    "@storybook/addons": "6.4.19",
+    "@storybook/builder-webpack5": "6.4.19",
+    "@storybook/manager-webpack5": "6.4.19",
+    "@storybook/source-loader": "6.4.19",
     "@storybook/storybook-deployer": "2.8.10",
-    "@storybook/theming": "6.4.18",
-    "@storybook/vue3": "6.4.18",
-    "@testing-library/jest-dom": "5.14.1",
-    "@testing-library/vue": "6.4.2",
+    "@storybook/theming": "6.4.19",
+    "@storybook/vue3": "6.4.19",
+    "@testing-library/jest-dom": "5.16.2",
+    "@testing-library/vue": "6.5.1",
+    "@types/axios": "0.14.0",
+    "@types/gapi": "0.0.41",
+    "@types/gapi.auth2": "0.0.56",
+    "@types/google.maps": "3.48.2",
+    "@types/he": "1.1.2",
+    "@types/jest": "26.0.24",
+    "@types/lodash-es": "4.17.6",
+    "@types/lodash.clonedeep": "4.5.6",
+    "@types/lodash.debounce": "4.0.6",
+    "@types/lodash.isequal": "4.5.5",
+    "@types/lodash.merge": "4.6.6",
+    "@types/lodash.uniqby": "4.7.6",
+    "@types/object-hash": "2.2.1",
+    "@types/object-path": "0.11.1",
+    "@types/svg-injector": "0.0.29",
+    "@types/uuid": "8.3.4",
+    "@types/velocity-animate": "2.0.1",
+    "@typescript-eslint/eslint-plugin": "4.18.0",
+    "@typescript-eslint/parser": "4.18.0",
+    "@vue/babel-preset-app": "4.5.13",
+    "@vue/compat": "3.2.6",
     "@vue/cli": "5.0.0-beta.7",
     "@vue/cli-plugin-babel": "5.0.0-beta.7",
     "@vue/cli-plugin-eslint": "5.0.0-beta.7",
-    "@vue/cli-plugin-unit-jest": "4.5.15",
+    "@vue/cli-plugin-typescript": "4.5.13",
+    "@vue/cli-plugin-unit-jest": "4.5.16",
     "@vue/cli-service": "5.0.0-beta.7",
     "@vue/compiler-sfc": "3.2.21",
     "@vue/eslint-config-prettier": "6.0.0",
     "@vue/eslint-config-standard": "6.0.0",
+    "@vue/eslint-config-typescript": "10.0.0",
     "@vue/test-utils": "2.0.0-rc.10",
+    "axios-curl": "2.0.1",
     "babel-eslint": "10.1.0",
     "babel-jest": "26.6.3",
     "babel-loader": "8.2.2",
     "babel-plugin-require-context-hook": "1.0.0",
     "babel-plugin-transform-require-context": "0.1.1",
     "chalk": "4.1.1",
+    "contentful-management": "8.2.0",
+    "contentful-typescript-codegen": "3.2.3",
     "dedent": "0.7.0",
+    "dotenv": "16.0.0",
     "eslint": "7.28.0",
+    "eslint-config-node": "4.1.0",
     "eslint-loader": "4.0.2",
+    "eslint-plugin-import": "2.25.4",
     "eslint-plugin-mdx": "1.16.0",
     "eslint-plugin-prettier": "4.0.0",
-    "eslint-plugin-storybook": "0.5.6",
+    "eslint-plugin-storybook": "0.5.7",
     "eslint-plugin-vue": "7.11.1",
     "fluent-json-schema": "3.0.1",
     "husky": "6.0.0",
-    "msw": "0.35.0",
-    "msw-storybook-addon": "1.6.0",
+    "jest": "26.6.3",
+    "msw": "0.39.1",
+    "msw-storybook-addon": "1.6.1",
     "mutationobserver-shim": "0.3.7",
     "postcss": "8.3.11",
     "postcss-loader": "4.2.0",
@@ -138,21 +169,31 @@
     "stylelint-order": "4.1.0",
     "stylelint-scss": "3.21.0",
     "stylelint-webpack-plugin": "2.2.0",
+    "ts-jest": "26.5.6",
+    "tsconfig-paths": "3.14.0",
+    "tsconfig-paths-webpack-plugin": "3.5.2",
+    "typescript": "4.1.6",
     "vue-jest": "5.0.0-alpha.10",
-    "vue-loader": "16.8.3"
+    "vue-loader": "17.0.0"
   },
   "eslintConfig": {
     "fix": false,
-    "config": "./.eslintrc.js"
-  },
-  "msw": {
-    "workerDirectory": "public"
+    "config": "./.eslintrc.js",
+    "extends": [
+      "@vue/typescript"
+    ],
+    "parserOptions": {
+      "parser": "@typescript-eslint/parser"
+    }
   },
   "husky": {
     "hooks": {
       "pre-commit": "pretty-quick --staged"
     }
   },
+  "msw": {
+    "workerDirectory": "public"
+  },
   "publishConfig": {
     "access": "public"
   },

package/public/mockServiceWorker.js

@@ -2,13 +2,13 @@
 /* tslint:disable */
 
 /**
- * Mock Service Worker (0.35.0).
+ * Mock Service Worker (0.39.1).
  * @see https://github.com/mswjs/msw
  * - Please do NOT modify this file.
  * - Please do NOT serve this file on production.
  */
 
-const INTEGRITY_CHECKSUM = 'f0a916b13c8acc2b526a03a6d26df85f'
+const INTEGRITY_CHECKSUM = '02f4ad4a2797f85668baf196e553d929'
 const bypassHeaderName = 'x-msw-bypass'
 const activeClientIds = new Set()
 
@@ -83,11 +83,11 @@ self.addEventListener('message', async function (event) {
   }
 })
 
-// Resolve the "master" client for the given event.
+// Resolve the "main" client for the given event.
 // Client that issues a request doesn't necessarily equal the client
 // that registered the worker. It's with the latter the worker should
 // communicate with during the response resolving phase.
-async function resolveMasterClient(event) {
+async function resolveMainClient(event) {
   const client = await self.clients.get(event.clientId)
 
   if (client.frameType === 'top-level') {
@@ -109,7 +109,7 @@ async function resolveMasterClient(event) {
 }
 
 async function handleRequest(event, requestId) {
-  const client = await resolveMasterClient(event)
+  const client = await resolveMainClient(event)
   const response = await getResponse(event, client, requestId)
 
   // Send back the response clone for the "response:*" life-cycle events.

package/scenario-validator/.eslintrc

@@ -0,0 +1,6 @@
+{
+  extends: ['node'],
+  rules: {
+    'import/no-commonjs': 'warn'
+  }
+}

package/scenario-validator/index.js

@@ -12,18 +12,17 @@ const {
   getStepComponent,
 } = require('./jsonExplorer');
 
-const getUrlStatusCode = (url) => {
-  return new Promise((resolve, reject) => {
+const getUrlStatusCode = (url) =>
+  new Promise((resolve, reject) => {
     const r = request(url);
     r.on('response', (response) => {
       r.abort();
       resolve(response.statusCode);
     });
-    r.on('error', function (err) {
+    r.on('error', (err) => {
       reject(err);
     });
   });
-};
 
 const isOffline = process.env.OFFLINE;
 
@@ -36,7 +35,7 @@ const testImage = (url) => {
       expect(status).toBe(200);
     });
     it('should not be on a subproject bucket', () => {
-      const bucketRegex = /^https:\/\/storage.googleapis.com\/budget-estimate-[^\/]+subproject-forms\/.*/;
+      const bucketRegex = /^https:\/\/storage.googleapis.com\/budget-estimate-[^/]+subproject-forms\/.*/;
       expect(bucketRegex.test(url)).toBeFalsy();
     });
   });
@@ -57,7 +56,7 @@ const validateSchema = (rawJson) => {
 const sharedScenarioTests = (json) => {
   validateSchema(json);
   it('should have a __START__ step', () => {
-    expect(json['__START__']).toBeDefined();
+    expect(json.__START__).toBeDefined();
   });
   it('should have keys same as code', () => {
     R.toPairs(json).forEach(([key, { code }]) => {
@@ -67,7 +66,7 @@ const sharedScenarioTests = (json) => {
   describe('images', () => {
     describe('static images', () => {
       const images = getPictures(json).filter(hasNoTemplates);
-      for (let url of images) {
+      for (const url of images) {
         testImage(url);
       }
     });
@@ -75,9 +74,9 @@ const sharedScenarioTests = (json) => {
       const images = getPictures(json)
         .filter(hasTemplates)
         .filter((v, i, a) => a.indexOf(v) === i);
-      for (let template of images) {
+      for (const template of images) {
         describe(template, () => {
-          for (let url of getAllConfigurationForTemplateLiteral(json, template)) {
+          for (const url of getAllConfigurationForTemplateLiteral(json, template)) {
             testImage(url);
           }
         });
@@ -87,7 +86,7 @@ const sharedScenarioTests = (json) => {
   describe('steps', () => {
     const graph = createDirectGraphForJson(json);
     const allSteps = getAllStepName(json);
-    Object.entries(graph).map(([key, val]) => {
+    Object.entries(graph).forEach(([key, val]) => {
       describe(key, () => {
         it('should have valid destination', () => {
           val.forEach((destination) => {

package/src/App.vue

@@ -1,26 +1,23 @@
 <template>
-  <div id="app" class="mu-pt-200">
-    <m-flex direction="column" align-items="center">
-      <img alt="Project Booster Vue logo" style="width: 20vw" src="./assets/images/logo-project-booster-vue.svg" />
-      <div class="mu-pt-200">
-        <span>Project Booster App</span>
-      </div>
-    </m-flex>
-  </div>
+  <div>Project Booster</div>
 </template>
 
-<script>
-import MFlex from './components/mozaic/flex/MFlex';
+<script lang="ts">
+import { defineComponent } from 'vue';
 
-export default {
+export default defineComponent({
   name: 'App',
-
-  components: {
-    MFlex,
-  },
-};
+  components: {},
+});
 </script>
 
-<style lang="scss">
-@import 'styles';
+<style>
+#app {
+  color: #2c3e50;
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  margin-top: 60px;
+  text-align: center;
+}
 </style>

package/src/components/animations/PbProjectsLandingAnimation.vue

@@ -79,13 +79,14 @@
   </m-flex>
 </template>
 
-<script>
-import MButton from '../mozaic/buttons/MButton';
-import MFlex from '../mozaic/flex/MFlex';
-import MImage from '../mozaic/image/MImage';
-import MLink from '../mozaic/link/MLink';
-
-export default {
+<script lang="ts">
+import { defineComponent } from 'vue';
+import MButton from '../mozaic/buttons/MButton.vue';
+import MFlex from '../mozaic/flex/MFlex.vue';
+import MImage from '../mozaic/image/MImage.vue';
+import MLink from '../mozaic/link/MLink.vue';
+
+export default defineComponent({
   name: 'PbProjectsLandingAnimation',
 
   components: {
@@ -114,7 +115,7 @@ export default {
       this.$emit('link-click');
     },
   },
-};
+});
 </script>
 
 <style lang="scss" scoped>

package/src/components/appointment/PbAppointment.stories.mdx

@@ -152,10 +152,7 @@ export const previousState = {
         ),
         rest.post('/api/inhabitant-projects/:inhabitantProjectId/simulations/:simulationId', notContentResolver),
         rest.get('/api/inhabitant-projects/:projectId/documents/:documentId/file', getDocumentsImageFileResolver),
-        rest.get(
-          '/api/inhabitant-projects/:inhabitantProjectId/documents?range=0-6',
-          getDocumentsByInhabitantProjectIdResolver,
-        ),
+        rest.get('/api/inhabitant-projects/:inhabitantProjectId/documents', getDocumentsByInhabitantProjectIdResolver),
         rest.post('/api/inhabitant-projects/:projectId/documents', uploadDocumentResolver),
         rest.post('/api/events/documents', acceptedResolver),
         rest.post('/api/inhabitant-projects/:inhabitantProjectId/documents', uploadDocumentResolver),

package/src/components/appointment/PbAppointment.vue

@@ -23,13 +23,14 @@
   </m-flex>
 </template>
 
-<script>
-import PbScenario from '../scenario/PbScenario';
-import PbLoader from '../loader/PbLoader';
-import MFlex from '../mozaic/flex/MFlex';
+<script lang="ts">
+import { defineComponent } from 'vue';
+import PbScenario from '../scenario/PbScenario.vue';
+import PbLoader from '../loader/PbLoader.vue';
+import MFlex from '../mozaic/flex/MFlex.vue';
 import { mapGetters } from 'vuex';
 
-export default {
+export default defineComponent({
   name: 'PbAppointment',
 
   components: { MFlex, PbScenario, PbLoader },
@@ -67,11 +68,11 @@ export default {
   },
 
   methods: {
-    handleEvent(data) {
+    handleEvent(data: Event) {
       this.$emit('scenario-event', data);
     },
   },
-};
+});
 </script>
 
 <style scoped lang="scss">

package/src/components/appointment/PbAppointmentStartSection.vue

@@ -35,7 +35,7 @@
               :href="answer.viewModel.href"
               :size="answer.viewModel.size"
               width="full"
-              @click="selectAnswer(payload.code, answer)"
+              @click="selectAnswer(answer)"
             />
           </m-flex>
         </m-flex>
@@ -44,12 +44,14 @@
   </m-flex>
 </template>
 
-<script>
-import MFlex from '../mozaic/flex/MFlex';
-import PbItemsList from '../items/PbItemsList';
-import MButton from '../mozaic/buttons/MButton';
+<script lang="ts">
+import { defineComponent, PropType } from 'vue';
+import MFlex from '../mozaic/flex/MFlex.vue';
+import PbItemsList from '../items/PbItemsList.vue';
+import MButton from '../mozaic/buttons/MButton.vue';
+import { ScenarioStepAnswer, ScenarioStepPayload } from '@/types/pb/Scenario';
 
-export default {
+export default defineComponent({
   name: 'PbAppointmentStartSection',
   components: { MButton, PbItemsList, MFlex },
   props: {
@@ -57,19 +59,19 @@ export default {
      * Defines the payload
      */
     payload: {
-      type: Object,
+      type: Object as PropType<ScenarioStepPayload>,
       default: () => null,
     },
   },
   methods: {
-    selectAnswer(stepCode, answer) {
+    selectAnswer(answer: ScenarioStepAnswer) {
       this.$emit('step-completed', {
         answers: [answer],
-        nextStep: null,
+        nextStep: undefined,
       });
     },
   },
-};
+});
 </script>
 
 <style scoped lang="scss">

package/src/components/cards/PbCard.vue

@@ -114,17 +114,17 @@
   </m-flex>
 </template>
 
-<script>
-import isEqual from 'lodash.isequal';
-import MButton from '../mozaic/buttons/MButton';
-import MFlag from '../mozaic/flag/MFlag';
-import MFlex from '../mozaic/flex/MFlex';
-import MImage from '../mozaic/image/MImage';
-import PbCardSelectionIndicator from './decorators/PbCardSelectionIndicator';
-import PbCardTypeIndicator from './decorators/PbCardTypeIndicator';
-import { M_FLEX_VALIDATOR } from '../mozaic/flex/MFlex';
-import MRating from '../mozaic/rating/MRating';
-import MLink from '../mozaic/link/MLink';
+<script lang="ts">
+import { defineComponent } from 'vue';
+import MButton from '../mozaic/buttons/MButton.vue';
+import MFlag from '../mozaic/flag/MFlag.vue';
+import MFlex from '../mozaic/flex/MFlex.vue';
+import MImage from '../mozaic/image/MImage.vue';
+import PbCardSelectionIndicator from './decorators/PbCardSelectionIndicator.vue';
+import PbCardTypeIndicator from './decorators/PbCardTypeIndicator.vue';
+import { M_FLEX_VALIDATOR } from '../mozaic/flex/MFlex.vue';
+import MRating from '../mozaic/rating/MRating.vue';
+import MLink from '../mozaic/link/MLink.vue';
 
 export const PB_CARD_VALIDATOR = {
   cardMinRatio: ['auto', '16x9', '3x2', '4x3', '1x1', '3x4', '2x3'],
@@ -132,7 +132,7 @@ export const PB_CARD_VALIDATOR = {
   alignText: ['left', 'center', 'right'],
 };
 
-export default {
+export default defineComponent({
   name: 'PbCard',
 
   components: {
@@ -244,7 +244,7 @@ export default {
     alignText: {
       type: String,
       default: 'left',
-      validator: (value) => {
+      validator: (value: string) => {
         return PB_CARD_VALIDATOR.alignText.indexOf(value) !== -1;
       },
     },
@@ -254,7 +254,7 @@ export default {
     alignHorizontal: {
       type: String,
       default: 'flex-start',
-      validator: (value) => {
+      validator: (value: string) => {
         return M_FLEX_VALIDATOR.justifyContent.indexOf(value) !== -1;
       },
     },
@@ -264,7 +264,7 @@ export default {
     alignVertical: {
       type: String,
       default: 'flex-start',
-      validator: (value) => {
+      validator: (value: string) => {
         return M_FLEX_VALIDATOR.alignItems.indexOf(value) !== -1;
       },
     },
@@ -274,7 +274,7 @@ export default {
     cardMinRatio: {
       type: String,
       default: null,
-      validator: (value) => {
+      validator: (value: string) => {
         return PB_CARD_VALIDATOR.cardMinRatio.indexOf(value) !== -1;
       },
     },
@@ -284,7 +284,7 @@ export default {
     imageRatio: {
       type: String,
       default: '3x2',
-      validator: (value) => {
+      validator: (value: string) => {
         return PB_CARD_VALIDATOR.imageRatio.indexOf(value) !== -1;
       },
     },
@@ -344,7 +344,7 @@ export default {
     handleCardClick() {
       !this.buttonLabel && !this.linkLabel ? this.$emit('card-click') : '';
     },
-    handleButtonLinkClicked(href) {
+    handleButtonLinkClicked(href: string) {
       this.handleButtonClicked();
       window.open(href, '_blank');
     },
@@ -357,7 +357,7 @@ export default {
       this.$emit('button-click', { label: this.buttonLabel });
     },
   },
-};
+});
 </script>
 
 <style lang="scss" scoped>

package/src/components/cards/PbCardsList.stories.mdx

@@ -1,6 +1,6 @@
 import { nestedAppDecorator } from '../../../.storybook/nested-app-decorator';
 import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs';
-import PbCardsList from './PbCardsList';
+import PbCardsList from './PbCardsList.vue';
 import CARDS_LIST from './cards-list';
 import CARDS_LIST_3 from './3-cards-list';
 import CARDS_LIST_4 from './4-cards-list';