feat: #1218 address confusing structure in web components (#1305)

* feat:#1218 moving folders

* feat:#1218 moving planner to separated folder

* feat:#1218 tweak serverless.yml

* feat: #1218 finish serverless, update tests

* feat: #1218 check server exist before start

packages/web-components/jest.config.js

@@ -10,12 +10,12 @@ module.exports = {
       },
     },
   },
-  setupFiles: ['<rootDir>/src/scripts/jest-setup.js'],
-  testPathIgnorePatterns: ['<rootDir>/src/scripts'],
+  setupFiles: ['<rootDir>/scripts/jest-setup.js'],
+  testPathIgnorePatterns: ['<rootDir>/scripts'],
   collectCoverageFrom: ['<rootDir>/src/**/*.ts', '<rootDir>/src/**/*.svelte'],
-  coverageDirectory: './src/tests/coverage',
+  coverageDirectory: './tests/coverage',
   coveragePathIgnorePatterns: [
-    '<rootDir>[/\\\\](node_modules|src/types|src/tests|src/scripts|src/tests|src/common/styles/__themes__)[/\\\\]',
+    '<rootDir>[/\\\\](node_modules|src/types|tests|scripts|tests|src/common/styles/__themes__)[/\\\\]',
     '__stubs__',
     '.d.ts',
   ],

packages/web-components/package.json

@@ -53,18 +53,18 @@
     "typescript": "~3.7.2"
   },
   "scripts": {
-    "build:prod": "node ./src/scripts/build-prod.js",
+    "build:prod": "node ./scripts/build-prod.js",
     "start:server": "serverless offline --out public/dist --stage local",
-    "start:dev": "node ./src/scripts/start-dev.js",
+    "start:dev": "node ./scripts/start-dev.js",
     "test:dev": "cross-env TZ=UTC jest --watch --color",
     "test:ci": "cross-env TZ=UTC jest --ci --colors --coverage --silent --forceExit",
     "lint": "concurrently \"tsc --noEmit\" \"eslint --cache --ext=ts,tsx,js,svelte src\"",
     "lint:fix": "eslint --cache --ext=ts,tsx,js,svelte src --fix",
     "fetch-config": "yarn config-manager fetchConfig web-components",
-    "build:serverless": "serverless webpack --out dist --stage dev",
-    "release:server:dev": "serverless deploy --stage dev",
+    "build:serverless": "node ./scripts/build-serverless.js",
+    "release:server:dev": "node ./scripts/release-serverless.js",
     "release:server:prod": "node ../../scripts/release/release-serverless.js web-components",
-    "release:npm:prod": "node ../../scripts/release/release-npm.js elements --skip-edit-release-note",
+    "release:npm:prod": "node ../../scripts/release/release-npm.js web-components --skip-edit-release-note",
     "release:client:dev": "node ../../scripts/release/release-dev.js web-components reapit-web-components",
     "release:client:prod": "node ../../scripts/release/release-prod.js web-components reapit-web-components",
     "release:dev": "yarn release:server:dev && yarn release:client:dev",

packages/web-components/src/scripts/build-prod.js → packages/web-components/scripts/build-prod.js

@@ -10,15 +10,15 @@ const minifyCode = require('./minify-code')
 // have to create it first using mkdirp (mkdir with cursive)
 const mkdirp = require('mkdirp')
 
-const cjsIndexFolderPath = path.resolve(__dirname, '../../public/dist-npm/cjs')
+const cjsIndexFolderPath = path.resolve(__dirname, '../public/dist-npm/cjs')
 const cjsIndexFilePath = path.resolve(cjsIndexFolderPath, './index.js')
 const cjsIndexTemplateFilePath = path.resolve(__dirname, './tpls/index.cjs.ejs')
 
-const esmIndexFolderPath = path.resolve(__dirname, '../../public/dist-npm/esm')
+const esmIndexFolderPath = path.resolve(__dirname, '../public/dist-npm/esm')
 const esmIndexFilePath = path.resolve(esmIndexFolderPath, './index.js')
 const esmIndexTemplateFilePath = path.resolve(__dirname, './tpls/index.esm.ejs')
 
-const tsDeclarationIndexFolderPath = path.resolve(__dirname, '../../public/dist-npm/types')
+const tsDeclarationIndexFolderPath = path.resolve(__dirname, '../public/dist-npm/types')
 const tsDeclarationIndexFilePath = path.resolve(tsDeclarationIndexFolderPath, './index.d.ts')
 const tsDeclarationIndexTemplateFilePath = path.resolve(__dirname, './tpls/index.d.ts.ejs')
 
@@ -68,7 +68,7 @@ return (async () => {
     const buildPackageFn = () =>
       new Promise((resolve, reject) => {
         {
-          const clientBuildScriptPath = `./src/scripts/rollup.config.${rollUpPackageName}.js`
+          const clientBuildScriptPath = `./scripts/rollup.config.${rollUpPackageName}.js`
           const spawnObject = spawn('rollup', ['-c', clientBuildScriptPath], {
             stdio: 'inherit',
           })

packages/web-components/scripts/build-serverless.js

@@ -0,0 +1,31 @@
+const yargs = require('yargs')
+const { spawn } = require('child_process')
+
+const stage = yargs.argv.stage
+
+// relative to the root of web-components package
+const listServerlessYmlFiles = ['src/search-widget/server/serverless.yml']
+
+const buildServerlessList = () => {
+  listServerlessYmlFiles.forEach(file => {
+    const build = spawn('serverless', ['webpack', '--config', file, '--out', 'dist', '--stage', stage])
+    build.stdout.on('data', function(data) {
+      console.info('stdout: ' + data.toString())
+    })
+
+    build.stderr.on('data', function(data) {
+      console.error('stderr: ' + data.toString())
+    })
+
+    build.on('exit', function(code) {
+      console.info(`Building ${file} exited with code ${code.toString()}`)
+    })
+
+    build.on('error', function(err) {
+      console.error(`An error happened \n${err}`)
+      process.exit(1)
+    })
+  })
+}
+
+buildServerlessList()

packages/web-components/src/scripts/format-code.js → packages/web-components/scripts/format-code.js

@@ -1,5 +1,5 @@
 const prettier = require('prettier')
-const prettierBaseConfig = require('../../../../.prettierrc')
+const prettierBaseConfig = require('../../../.prettierrc')
 
 module.exports = content => {
   const formatContent = prettier.format(content, {

packages/web-components/src/scripts/generate-css-output.js → packages/web-components/scripts/generate-css-output.js

@@ -1,9 +1,9 @@
 const path = require('path')
 
 const generateCssOutput = ({ css, fileName, production }) => {
-  css.write(path.resolve(__dirname, `../../public/dist/${fileName}`))
+  css.write(path.resolve(__dirname, `../public/dist/${fileName}`))
   if (production) {
-    css.write(path.resolve(__dirname, `../../public/dist-npm/css/${fileName}`))
+    css.write(path.resolve(__dirname, `../public/dist-npm/css/${fileName}`))
   }
 }
 

packages/web-components/src/scripts/get-env.js → packages/web-components/scripts/get-env.js

@@ -1,6 +1,6 @@
 const path = require('path')
 
-const reapitConfig = require(path.resolve(__dirname, '../..', 'config.json'))
+const reapitConfig = require(path.resolve(__dirname, '..', 'config.json'))
 
 const setEnv = () => {
   const configs = reapitConfig[process.env.APP_ENV]

packages/web-components/scripts/release-serverless.js

@@ -0,0 +1,31 @@
+const yargs = require('yargs')
+const { spawn } = require('child_process')
+
+const stage = yargs.argv.stage
+
+// relative to the root of web-components package
+const listServerlessYmlFiles = ['src/search-widget/server/serverless.yml']
+
+const deployServerlessList = () => {
+  listServerlessYmlFiles.forEach(file => {
+    const deploy = spawn('serverless', ['deploy', '--config', file, '--stage', stage])
+    deploy.stdout.on('data', function(data) {
+      console.info('stdout: ' + data.toString())
+    })
+
+    deploy.stderr.on('data', function(data) {
+      console.error('stderr: ' + data.toString())
+    })
+
+    deploy.on('exit', function(code) {
+      console.info(`Deploying ${file} exited with code ${code.toString()}`)
+    })
+
+    deploy.on('error', function(err) {
+      console.error(`An error happened \n${err}`)
+      process.exit(1)
+    })
+  })
+}
+
+deployServerlessList()

packages/web-components/src/scripts/rollup.config.appointment-bookings.js → packages/web-components/scripts/rollup.config.appointment-bookings.js

@@ -6,7 +6,7 @@ import generateRollupOutput from './generate-rollup-output'
 import generateCssOutput from './generate-css-output'
 import themesConfigurations from './rollup.config.themes.js'
 
-const config = require(path.resolve(__dirname, '../..', 'config.json'))
+const config = require(path.resolve(__dirname, '..', 'config.json'))
 
 const production = !process.env.ROLLUP_WATCH
 

packages/web-components/src/scripts/rollup.config.base.js → packages/web-components/scripts/rollup.config.base.js

@@ -20,12 +20,7 @@ export default {
     babel({
       extensions: ['.js', '.ts', '.mjs', '.html', '.svelte'],
       runtimeHelpers: true,
-      exclude: [
-        'node_modules/@babel/**',
-        '../../node_modules/@babel/**',
-        'node_modules/core-js/**',
-        '../../node_modules/core-js/**',
-      ],
+      include: ['src/**', 'node_modules/svelte/**'],
       presets: [
         [
           '@babel/preset-env',

packages/web-components/src/scripts/rollup.config.property-detail.js → packages/web-components/scripts/rollup.config.property-detail.js

@@ -7,7 +7,7 @@ import generateCssOutput from './generate-css-output'
 import themesConfiguration from './rollup.config.themes.js'
 import { baseConfigurationWithoutTheme as viewBookinConfiguration } from './rollup.config.viewing-booking.js'
 
-const config = require(path.resolve(__dirname, '../..', 'config.json'))
+const config = require(path.resolve(__dirname, '..', 'config.json'))
 const production = !process.env.ROLLUP_WATCH
 
 export const baseConfigurationWithoutTheme = {

packages/web-components/src/scripts/rollup.config.search-widget.js → packages/web-components/scripts/rollup.config.search-widget.js

@@ -6,7 +6,7 @@ import path from 'path'
 import generateRollupOutput from './generate-rollup-output'
 import generateCssOutput from './generate-css-output'
 
-const config = require(path.resolve(__dirname, '../..', 'config.json'))
+const config = require(path.resolve(__dirname, '..', 'config.json'))
 const production = !process.env.ROLLUP_WATCH
 
 // search-widget is depend on property detail

packages/web-components/src/scripts/rollup.config.viewing-booking.js → packages/web-components/scripts/rollup.config.viewing-booking.js

@@ -6,7 +6,7 @@ import generateRollupOutput from './generate-rollup-output'
 import generateCssOutput from './generate-css-output'
 import themesConfigurations from './rollup.config.themes.js'
 
-const config = require(path.resolve(__dirname, '../..', 'config.json'))
+const config = require(path.resolve(__dirname, '..', 'config.json'))
 const production = !process.env.ROLLUP_WATCH
 
 export const baseConfigurationWithoutTheme = {

packages/web-components/src/scripts/start-dev.js → packages/web-components/scripts/start-dev.js

@@ -1,4 +1,6 @@
 #!/usr/bin/env node
+const fs = require('fs')
+
 const getMoveHtmlScript = packageName => {
   switch (packageName) {
     case 'property-detail':
@@ -37,8 +39,13 @@ return (() => {
         moveHtml += ' &&'
       }
       // eslint-disable-next-line max-len
-      const clientScript = `rollup -w -c './src/scripts/rollup.config.${packageName}.js' --environment APP_ENV:local`
-      const serverScript = 'serverless offline --out public/dist --stage local'
+      const clientScript = `rollup -w -c './scripts/rollup.config.${packageName}.js' --environment APP_ENV:local`
+      const serverConfigFile = `src/${packageName}/server/serverless.yml`
+      const hasServer = fs.existsSync(serverConfigFile)
+      // eslint-disable-next-line max-len
+      const serverScript = hasServer
+        ? `serverless offline --config ${serverConfigFile} --out public/dist --stage local`
+        : null
       const startClientServer = getStartClientServer(packageName)
 
       const startDev = `

packages/web-components/src/appointment-bookings/client/components/appointment-bookings.svelte

@@ -5,8 +5,9 @@
   import { resetCSS, generateThemeClasses } from '../../../common/styles'
   import { generateAppointmentBookingThemeClasses } from '../core/theme'
   import FormStep1 from './form-step1.svelte'
-  import PlannerStep2 from './planner-step2.svelte'
+  import PlannerStep2 from '../../../appointment-planner/client/components/appointment-planner.svelte'
   import BookingConfirmationStep3 from './booking-confirmation-step3.svelte'
+  import { handleSubmitFormStep2 } from '../handlers/submit-form-step2.ts'
 
   export let theme
   export let parentSelector
@@ -34,6 +35,10 @@
     e.stopPropagation()
   }
 
+  const onDateCellClick = ({ appointmentDate, appointmentTime }) => {
+    handleSubmitFormStep2(appointmentDate.format('dddd, DD MMMM'), appointmentTime, handleNextStep)
+  }
+
   const themeClasses = {
     ...generateThemeClasses(theme, parentSelector),
     ...generateAppointmentBookingThemeClasses(theme, parentSelector),
@@ -81,7 +86,7 @@
         {/if}
 
         {#if currentStep === 2}
-          <PlannerStep2 {themeClasses} {handleNextStep} />
+          <PlannerStep2 {themeClasses} {handleNextStep} handleOnClickCell={onDateCellClick} />
         {/if}
 
         {#if currentStep === 3}