@seamly/web-ui 18.1.1 → 18.3.1

package/src/javascripts/ui/hooks/use-seamly-stored-visibility.js

@@ -1,9 +1,9 @@
 import { useCallback } from 'preact/hooks'
-import { useSeamlyConfig } from './seamly-state-hooks'
 import { useSeamlyObjectStore } from './seamly-api-hooks'
+import { useConfig } from '../../domains/config'
 
 const useSeamlyStoredVisibility = () => {
-  const { layoutMode } = useSeamlyConfig()
+  const { layoutMode } = useConfig()
   const key = 'visibility'
   const { get, set } = useSeamlyObjectStore()
 
@@ -15,7 +15,7 @@ const useSeamlyStoredVisibility = () => {
   }
 
   const setStoredVisibility = useCallback(
-    state => {
+    (state) => {
       const saved = get ? get(key) : {}
       set(key, { ...saved, [layoutMode]: state })
     },

package/src/javascripts/ui/hooks/use-seamly-visibility.js

@@ -1,6 +1,5 @@
 import { useCallback } from 'preact/hooks'
 import {
-  useSeamlyConfig,
   useSeamlyStateContext,
   useSeamlyUnreadCount,
 } from './seamly-state-hooks'
@@ -16,11 +15,12 @@ import {
   seamlyActions,
   visibilityStates,
 } from '../utils/seamly-utils'
+import { useConfig } from '../../domains/config'
 
 const { SET_VISIBILITY } = seamlyActions
 
 const useSeamlyVisibility = () => {
-  const config = useSeamlyConfig()
+  const config = useConfig()
   const { layoutMode, visibilityCallback } = config
   const { visible } = useSeamlyStateContext()
   const { emitEvent } = useSeamlyCommands()
@@ -38,7 +38,7 @@ const useSeamlyVisibility = () => {
       : false
 
   const setVisibility = useCallback(
-    visibility => {
+    (visibility) => {
       const visibilityFn = visibilityCallback || calculateVisibility
       const requestedVisibility = visibilityFn({
         hasConversation,

package/src/javascripts/ui/hooks/utility-hooks.js

@@ -11,7 +11,7 @@ export const useForceUpdate = () => {
   // This is an escape hatch mentioned in the React docs:
   // https://reactjs.org/docs/hooks-faq.html#is-there-something-like-forceupdate
   /* eslint-disable-next-line no-unused-vars */
-  const [ignored, forceUpdate] = useReducer(x => x + 1, 0)
+  const [ignored, forceUpdate] = useReducer((x) => x + 1, 0)
 
   return useCallback(() => {
     setTimeout(() => {
@@ -25,7 +25,7 @@ export const useGeneratedId = () => {
   return id
 }
 
-export const useStableCallback = callback => {
+export const useStableCallback = (callback) => {
   const callbackRef = useRef()
   callbackRef.current = callback
   const isFunction = typeof callback === 'function'

package/src/javascripts/ui/utils/form-utils.js

@@ -41,7 +41,7 @@ export const formReducer = (state, action) => {
     persistData,
   } = action
 
-  const setControls = controls => ({
+  const setControls = (controls) => ({
     ...state,
     [formId]: {
       ...state[formId],
@@ -112,8 +112,8 @@ export const formReducer = (state, action) => {
           ...state[formId],
           controls: newControlValidities,
           validity: Object.keys(newControlValidities)
-            .map(key => newControlValidities[key].validity)
-            .every(v => v),
+            .map((key) => newControlValidities[key].validity)
+            .every((v) => v),
         },
       }
     case SET_STATE:

package/src/javascripts/ui/utils/general-utils.js

@@ -1,6 +1,6 @@
 export const debounce = (func, wait) => {
   let timeout
-  return function(...args) {
+  return function (...args) {
     const context = this
     let isCancelled = false
     clearTimeout(timeout)
@@ -12,7 +12,7 @@ export const debounce = (func, wait) => {
       isCancelled = false
     }, wait)
 
-    return runInstant => {
+    return (runInstant) => {
       isCancelled = true
       if (runInstant) {
         func.apply(context, args)
@@ -54,7 +54,7 @@ export const closestElement = (el, match) => {
 export const createAriaHider = () => {
   const originalValues = []
   const rootNodes = []
-  document.querySelectorAll('body > *:not([role="dialog"])').forEach(node => {
+  document.querySelectorAll('body > *:not([role="dialog"])').forEach((node) => {
     const attr = node.getAttribute('aria-hidden')
     const alreadyHidden = attr !== null && attr !== 'false'
     if (alreadyHidden) {
@@ -77,17 +77,17 @@ export const createAriaHider = () => {
   }
 }
 
-export const propIsTrue = prop => prop === 'true' || prop === true
+export const propIsTrue = (prop) => prop === 'true' || prop === true
 
-export const millisecondsToSeconds = milliseconds => {
+export const millisecondsToSeconds = (milliseconds) => {
   return Math.ceil(milliseconds / 1000)
 }
 
-export const microsecondsToMilliseconds = microseconds => {
+export const microsecondsToMilliseconds = (microseconds) => {
   return Math.ceil(microseconds / 1000)
 }
 
-export const sanitizeText = text =>
+export const sanitizeText = (text) =>
   text
     .replace(/&/g, '&')
     .replace(/</g, '&lt;')
@@ -96,7 +96,7 @@ export const sanitizeText = text =>
     .replace(/'/g, '&#39;')
     .replace(/\//g, '&#x2F;')
 
-export const getTimeFromSeconds = seconds => {
+export const getTimeFromSeconds = (seconds) => {
   const minutes = Math.floor(seconds / 60)
   const secondsPartial = seconds - minutes * 60
 
@@ -130,7 +130,7 @@ export const getUrlParams = () => {
   }, {})
 }
 
-export const getUrlSearchString = params => {
+export const getUrlSearchString = (params) => {
   return Object.keys(params).reduce(
     (search, key) =>
       `${search}${search ? '&' : ''}${key}=${encodeURIComponent(params[key])}`,
@@ -158,9 +158,9 @@ export const keyNames = {
   ArrowDown: 'ArrowDown',
 }
 
-export const getKey = e => (e.code ? keyNames[e.code] : keyCodes[e.keyCode])
+export const getKey = (e) => (e.code ? keyNames[e.code] : keyCodes[e.keyCode])
 
-export const focusElement = el => {
+export const focusElement = (el) => {
   if (el) {
     el.focus()
   }
@@ -207,3 +207,9 @@ export const flattenObject = (obj, prefix = '') =>
     else acc[pre + k] = obj[k]
     return acc
   }, {})
+
+export const pick = (obj, keys) =>
+  keys.reduce((accum, key) => {
+    if (key in obj) accum[key] = obj[key]
+    return accum
+  }, {})

package/src/javascripts/ui/utils/seamly-utils.js

@@ -1,9 +1,3 @@
-import {
-  layoutMode as defaultLayoutmode,
-  appContainerClassNames,
-  defaultConfig,
-  typing as defaultTyping,
-} from '../../config'
 import { getTimeFromSeconds } from './general-utils'
 
 export const eventTypes = {
@@ -91,12 +85,9 @@ export const seamlyActions = {
   SET_PARTICIPANT: 'SET_PARTICIPANT',
   SET_HEADER_TITLE: 'SET_HEADER_TITLE',
   SET_HEADER_SUB_TITLE: 'SET_HEADER_SUB_TITLE',
-  SET_INTERRUPT: ' SET_INTERRUPT',
-  CLEAR_INTERRUPT: 'CLEAR_INTERRUPT',
   SET_VISIBILITY: 'SET_VISIBILITY',
   RESET_HISTORY_LOADED_FLAG: 'RESET_HISTORY_LOADED_FLAG',
   SET_ACTIVE_SERVICE: 'SET_ACTIVE_SERVICE',
-  SET_SHOW_DISCLAIMER: 'SET_SHOW_DISCLAIMER',
   INIT_IDLE_DETACH_COUNTDOWN: 'INIT_IDLE_DETACH_COUNTDOWN',
   DECREMENT_IDLE_DETACH_COUNTDOWN_COUNTER:
     'DECREMENT_IDLE_DETACH_COUNTDOWN_COUNTER',
@@ -105,7 +96,6 @@ export const seamlyActions = {
   INIT_RESUME_CONVERSATION_PROMPT: 'INIT_RESUME_CONVERSATION_PROMPT',
   CLEAR_RESUME_CONVERSATION_PROMPT: 'CLEAR_RESUME_CONVERSATION_PROMPT',
   SET_SERVICE_DATA_ITEM: 'SET_SERVICE_DATA_ITEM',
-  UPDATE_CONFIG: 'UPDATE_CONFIG',
   SET_FEATURES: 'SET_FEATURES',
   SET_FEATURE_ENABLED_STATE: 'SET_FEATURE_ENABLED_STATE',
   CLEAR_FEATURES: 'CLEAR_FEATURES',
@@ -146,12 +136,9 @@ const {
   SET_PARTICIPANT,
   SET_HEADER_TITLE,
   SET_HEADER_SUB_TITLE,
-  SET_INTERRUPT,
-  CLEAR_INTERRUPT,
   SET_VISIBILITY,
   RESET_HISTORY_LOADED_FLAG,
   SET_ACTIVE_SERVICE,
-  SET_SHOW_DISCLAIMER,
   INIT_IDLE_DETACH_COUNTDOWN,
   DECREMENT_IDLE_DETACH_COUNTDOWN_COUNTER,
   STOP_IDLE_DETACH_COUNTDOWN_COUNTER,
@@ -159,7 +146,6 @@ const {
   INIT_RESUME_CONVERSATION_PROMPT,
   CLEAR_RESUME_CONVERSATION_PROMPT,
   SET_SERVICE_DATA_ITEM,
-  UPDATE_CONFIG,
   SET_FEATURES,
   SET_FEATURE_ENABLED_STATE,
   CLEAR_FEATURES,
@@ -187,7 +173,7 @@ export const isUnreadMessage = ({ type, payload }) =>
   (type === eventTypes.message && !payload.fromClient) ||
   (type === eventTypes.info && payload.type === payloadTypes.text)
 
-const orderHistory = events => {
+const orderHistory = (events) => {
   return events.sort(
     (
       { payload: { occurredAt: occurredAtA } },
@@ -199,10 +185,10 @@ const orderHistory = events => {
 export const mergeHistory = (stateEvents, historyEvents) => {
   const newHistoryEvents = historyEvents
     .filter(
-      historyEvent =>
+      (historyEvent) =>
         // Deduplicate the event streams
         !stateEvents.find(
-          stateEvent => stateEvent.payload.id === historyEvent.payload.id,
+          (stateEvent) => stateEvent.payload.id === historyEvent.payload.id,
         ) &&
         // Remove all non displayable participant messages
         !(
@@ -274,27 +260,6 @@ const headerTitlesReducer = (state, action) => {
   }
 }
 
-const interruptReducer = (state, action) => {
-  switch (action.type) {
-    case SET_INTERRUPT:
-      return {
-        ...state,
-        hasInterrupt: true,
-        meta: {
-          ...action.interrupt,
-        },
-      }
-    case CLEAR_INTERRUPT:
-      return {
-        ...state,
-        hasInterrupt: false,
-        meta: {},
-      }
-    default:
-      return state
-  }
-}
-
 const calculateNewEntryMeta = (entryMeta, payload) => {
   const { entry } = payload
   const { blockAutoEntrySwitch } = entryMeta
@@ -360,7 +325,7 @@ export const seamlyStateReducer = (state, action) => {
       // We check for duplicated and ignore them as in some error of the websocket
       // a duplicate join can be active for a while until the server connection
       // times out.
-      const eventExists = state.events.find(e => e.payload.id === payload.id)
+      const eventExists = state.events.find((e) => e.payload.id === payload.id)
       if (eventExists) {
         return state
       }
@@ -402,7 +367,7 @@ export const seamlyStateReducer = (state, action) => {
       }
 
       const matchedEvent = state.events.find(
-        m => m.payload.transactionId === action.event.payload.transactionId,
+        (m) => m.payload.transactionId === action.event.payload.transactionId,
       )
 
       const { id, occurredAt } = action.event.payload
@@ -411,7 +376,7 @@ export const seamlyStateReducer = (state, action) => {
         ? {
             ...state,
             events: orderHistory(
-              state.events.map(m =>
+              state.events.map((m) =>
                 m.payload.id === matchedEvent.payload.id
                   ? {
                       ...m,
@@ -429,7 +394,7 @@ export const seamlyStateReducer = (state, action) => {
       return {
         ...state,
         unreadEvents: 0,
-        events: state.events.map(event => {
+        events: state.events.map((event) => {
           if (action.ids.indexOf(event.payload.id) !== -1) {
             return {
               ...event,
@@ -465,7 +430,7 @@ export const seamlyStateReducer = (state, action) => {
         .slice()
         .reverse()
         .find(
-          m =>
+          (m) =>
             (m.type === 'message' || m.type === 'participant') &&
             !m.payload.fromClient,
         )
@@ -525,12 +490,13 @@ export const seamlyStateReducer = (state, action) => {
       const returnState = {
         ...state,
         unreadEvents: events.filter(
-          event =>
+          (event) =>
             event.type === 'message' &&
             event.payload.messageStatus === readStates.received,
         ).length,
         events: events.filter(
-          e => e.type !== 'participant' || !!e.payload.participant.introduction,
+          (e) =>
+            e.type !== 'participant' || !!e.payload.participant.introduction,
         ),
         participantInfo: {
           ...state.participantInfo,
@@ -656,16 +622,6 @@ export const seamlyStateReducer = (state, action) => {
         ...state,
         headerTitles: headerTitlesReducer(state.headerTitles, action),
       }
-    case SET_INTERRUPT:
-    case CLEAR_INTERRUPT:
-      return {
-        ...state,
-        interrupt: interruptReducer(state.interrupt, action),
-      }
-    case SET_SHOW_DISCLAIMER:
-      return { ...state, showDisclaimer: action.showDisclaimer }
-    case UPDATE_CONFIG:
-      return { ...state, config: { ...state.config, ...action.config } }
     case SET_INITIAL_STATE:
       return { ...state, initialState: action.initialState }
     case SET_SERVICE_DATA_ITEM:
@@ -810,7 +766,7 @@ export const seamlyStateReducer = (state, action) => {
     case SET_UPLOAD_PROGRESS:
       return {
         ...state,
-        currentUploads: state.currentUploads.map(fileUpload => {
+        currentUploads: state.currentUploads.map((fileUpload) => {
           if (fileUpload.id === action.fileId) {
             return {
               ...fileUpload,
@@ -826,7 +782,7 @@ export const seamlyStateReducer = (state, action) => {
     case SET_UPLOAD_ERROR:
       return {
         ...state,
-        currentUploads: state.currentUploads.map(fileUpload => {
+        currentUploads: state.currentUploads.map((fileUpload) => {
           if (fileUpload.id === action.fileId) {
             return {
               ...fileUpload,
@@ -842,7 +798,7 @@ export const seamlyStateReducer = (state, action) => {
     case SET_UPLOAD_COMPLETE:
       return {
         ...state,
-        currentUploads: state.currentUploads.map(fileUpload => {
+        currentUploads: state.currentUploads.map((fileUpload) => {
           if (fileUpload.id === action.fileId) {
             return {
               ...fileUpload,
@@ -856,7 +812,7 @@ export const seamlyStateReducer = (state, action) => {
       return {
         ...state,
         currentUploads: state.currentUploads.filter(
-          fileUpload => fileUpload.id !== action.fileId,
+          (fileUpload) => fileUpload.id !== action.fileId,
         ),
       }
     case CLEAR_ALL_UPLOADS:
@@ -894,30 +850,6 @@ export const seamlyStateReducer = (state, action) => {
   }
 }
 
-export const getSeamlyConfig = config => {
-  const { messages: messagesConfig, typing, ...rest } = config
-  const { messages: defaultMessagesConfig, ...defaultRest } = defaultConfig
-  return {
-    ...defaultRest,
-    namespace: 'default',
-    visible:
-      config.layoutMode && config.layoutMode === 'inline'
-        ? visibilityStates.open
-        : visibilityStates.minimized,
-    layoutMode: defaultLayoutmode,
-    appContainerClassNames,
-    messages: {
-      ...defaultMessagesConfig,
-      ...messagesConfig,
-    },
-    typing: {
-      ...defaultTyping,
-      ...typing,
-    },
-    ...rest,
-  }
-}
-
 export const calculateVisibility = ({
   hasResponded,
   previousVisibility,

package/src/javascripts/ui/utils/validations.js

@@ -9,13 +9,16 @@ export const validateFileSize = (fileList, maxSize) => {
   return isValid
 }
 
-export const fileListObjectIsNotEmpty = fileListObj => !!fileListObj?.length > 0
+export const fileListObjectIsNotEmpty = (fileListObj) =>
+  !!fileListObj?.length > 0
 
-export const isEmailString = val => {
-  /* eslint-disable-next-line no-control-regex */
-  const regex = /^(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])$/i
-
-  return !!(val && val.match(regex))
+/* eslint-disable no-control-regex */
+export const isEmailString = (val) => {
+  const regex =
+    /^(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])$/i
+  const trimmedVal = val && val.trim()
+  return !!(trimmedVal && trimmedVal.match(regex))
 }
+/* eslint-enable no-control-regex */
 
-export const isNotEmptyString = val => !!val
+export const isNotEmptyString = (val) => !!val

package/src/stylesheets/5-components/_card.scss

@@ -40,7 +40,6 @@
   display: block;
   width: 100%;
   margin-bottom: $spacer;
-  font-size: $fontsize-medium;
 
   &:last-child {
     margin-bottom: 0;

package/src/stylesheets/5-components/_choice-prompt.scss

@@ -20,3 +20,8 @@
   width: 100%;
   white-space: normal;
 }
+
+.#{$n}-choice-prompt__item--secondary .#{$n}-button {
+  background-color: initial;
+  color: $interaction;
+}

package/src/stylesheets/5-components/_message.scss

@@ -192,6 +192,12 @@ $avatar-size: $badge-touch-size;
       }
     }
   }
+
+  &.cvco-message--source-user .#{$n}-message__body {
+    a {
+      color: $white;
+    }
+  }
 }
 
 // Loading
@@ -294,6 +300,10 @@ $avatar-size: $badge-touch-size;
     color: inherit;
     text-align: left;
     word-break: break-all;
+
+    &:hover {
+      text-decoration: none;
+    }
   }
 
   .#{$n}-icon {

package/src/stylesheets/5-components/_options.scss

@@ -123,7 +123,6 @@
   flex-direction: column;
   width: calc(100% - #{$spacer});
   max-width: $spacer * 15;
-  max-height: $spacer * 15;
   margin: 0;
   padding: 0;
   transform: scaleY(0) translateY($spacer * 5);
@@ -156,6 +155,9 @@
 }
 
 .#{$n}-options__body {
+  display: flex;
+  flex-direction: column;
+  max-height: $spacer * 15;
   transition: opacity 0.1s 0.1s ease;
   opacity: 0;
 }
@@ -206,7 +208,6 @@
   flex-wrap: wrap;
   align-items: flex-start;
   width: 100%;
-  max-height: $spacer * 11; // IE11 FIX
   padding: 0 $spacer;
   overflow: auto;
 

package/translations/de-informal.js

@@ -66,8 +66,6 @@ export default {
   'fileUpload.srAvailableText':
     'Das Uploaden von Dateien im Chat ist jetzt möglich',
   'fileUpload.srCompleteText': 'Upload abgeschlossen.',
-  'fileUpload.srFileUnavailableText': fileName =>
-    `Herunterladen von ${fileName} ist nicht mehr möglich.`,
   'fileUpload.srFileUploadedText': fileName =>
     `Hochgeladene Datei ${fileName}.`,
   'fileUpload.srFileDownloadText': fileName =>

package/translations/en.js

@@ -67,8 +67,6 @@ export default {
   'fileUpload.srAvailableText': 'File uploads are now available in the chat.',
   'fileUpload.srCompleteText': 'Upload complete.',
   'fileUpload.srFileDownloadText': fileName => `Download file ${fileName}.`,
-  'fileUpload.srFileUnavailableText': fileName =>
-    `Download for ${fileName} has expired.`,
   'fileUpload.srFileUploadedText': fileName => `Uploaded file ${fileName}.`,
   'fileUpload.srProgressLabel': fileName =>
     `${fileName} upload progress status`,

package/translations/es-informal.js

@@ -74,8 +74,6 @@ export default {
   'fileUpload.srAvailableText': 'Subir archivos ahora es posible en el chat',
   'fileUpload.srCompleteText': 'Subi completada.',
   'fileUpload.srFileDownloadText': fileName => `Descargar archivo ${fileName}.`,
-  'fileUpload.srFileUnavailableText': fileName =>
-    `La descarga de ${fileName} ha expirado.`,
   'fileUpload.srFileUploadedText': fileName => `Archivo subido ${fileName}.`,
   'fileUpload.srProgressLabel': fileName =>
     `Subi estado de progreso de ${fileName}`,

package/translations/nl-formal.js

@@ -67,8 +67,6 @@ export default {
   'fileUpload.srAvailableText':
     'Uploaden van bestanden in de chat is nu mogelijk.',
   'fileUpload.srCompleteText': 'Upload voltooid.',
-  'fileUpload.srFileUnavailableText': fileName =>
-    `Download voor ${fileName} is verlopen`,
   'fileUpload.srFileUploadedText': fileName => `Geüpload bestand ${fileName}.`,
   'fileUpload.srFileDownloadText': fileName => `Download bestand ${fileName}.`,
   'fileUpload.srProgressLabel': fileName => `Uploadstatus ${fileName}`,

package/translations/nl-informal.js

@@ -67,8 +67,6 @@ export default {
   'fileUpload.srAvailableText':
     'Uploaden van bestanden in de chat is nu mogelijk.',
   'fileUpload.srCompleteText': 'Upload voltooid.',
-  'fileUpload.srFileUnavailableText': fileName =>
-    `Download voor ${fileName} is verlopen`,
   'fileUpload.srFileUploadedText': fileName => `Geüpload bestand ${fileName}.`,
   'fileUpload.srFileDownloadText': fileName => `Download bestand ${fileName}.`,
   'fileUpload.srProgressLabel': fileName => `Uploadvoortgang van ${fileName}`,

package/webpack/config.common.js

@@ -2,8 +2,8 @@
 const path = require('path')
 const webpackMerge = require('webpack-merge').merge
 const site = require('@seamly/doc-site/lib/config/site')
-const BundleAnalyzerPlugin = require('webpack-bundle-analyzer')
-  .BundleAnalyzerPlugin
+const BundleAnalyzerPlugin =
+  require('webpack-bundle-analyzer').BundleAnalyzerPlugin
 
 const generateBabelLoaderBrowserPluginsPart = require('./parts/babel-loader-browser-plugins')
 const generateDevServerPart = require('./parts/dev-server')
@@ -50,7 +50,7 @@ module.exports = (env = {}, argv = {}, configOverrides = {}) => {
       rules: [
         {
           test: /\.js$/,
-          include: BABEL_TRANSPILE_MODULES.map(moduleName =>
+          include: BABEL_TRANSPILE_MODULES.map((moduleName) =>
             path.resolve('node_modules', moduleName),
           ),
           loader: 'babel-loader',

package/webpack/config.package.js

@@ -41,7 +41,7 @@ module.exports = (env = {}, argv = {}, configOverrides = {}) => {
     externals: [
       ...Object.keys(pkg.peerDependencies || {}),
       ...Object.keys(pkg.peerDependencies || {}).map(
-        key => new RegExp(`^${key}(\\/.*)`, 'i'),
+        (key) => new RegExp(`^${key}(\\/.*)`, 'i'),
       ),
       /^@seamly\/web-ui\/translations(\/.*)?/i,
     ],
@@ -49,7 +49,7 @@ module.exports = (env = {}, argv = {}, configOverrides = {}) => {
       rules: [
         {
           test: /\.js$/,
-          include: BABEL_TRANSPILE_MODULES.map(moduleName =>
+          include: BABEL_TRANSPILE_MODULES.map((moduleName) =>
             path.resolve('node_modules', moduleName),
           ),
           loader: 'babel-loader',
@@ -132,7 +132,7 @@ module.exports = (env = {}, argv = {}, configOverrides = {}) => {
     externals: {},
     module: {
       ...packageConfig.module,
-      rules: packageConfig.module.rules.map(rule => {
+      rules: packageConfig.module.rules.map((rule) => {
         if (rule.loader === 'babel-loader') {
           rule = {
             ...rule,
@@ -196,7 +196,7 @@ module.exports = (env = {}, argv = {}, configOverrides = {}) => {
     translationsConfig,
   ]
 
-  const configsMinimized = configs.map(config =>
+  const configsMinimized = configs.map((config) =>
     webpackMerge(config, {
       optimization: {
         minimize: true,

package/webpack/config.site.js

@@ -1,6 +1,7 @@
 /* eslint-disable */
 const path = require('path')
 const site = require('@seamly/doc-site/lib/config/site')
+const CopyPlugin = require('copy-webpack-plugin')
 const webpackMerge = require('webpack-merge').merge
 const defaultConfig = require('./defaults')
 const generateCommonConfig = require('./config.common')
@@ -20,14 +21,15 @@ module.exports = (env = {}, argv = {}, configOverrides = {}, options = {}) => {
     ...options,
   }
 
-  const {
-    ROOT,
-    PUBLIC_ROOT,
-    PUBLIC_TEST_ROOT,
-    PUBLIC_STYLEGUIDE_ROOT,
-  } = implConfig
+  const { ROOT, PUBLIC_ROOT, PUBLIC_TEST_ROOT, PUBLIC_STYLEGUIDE_ROOT } =
+    implConfig
 
   let config = {
+    plugins: [
+      new CopyPlugin({
+        patterns: [{ from: 'public/static', to: 'static' }],
+      }),
+    ],
     entry: {
       // Changelog
       changelog: path.join(ROOT, 'CHANGELOG.md'),