@seamly/web-ui 20.7.0 → 20.8.0-alpha.1

package/webpack/config.package.js

@@ -21,7 +21,6 @@ module.exports = (env = {}, argv = {}, configOverrides = {}) => {
     ROOT,
 
     BABEL_TRANSPILE_MODULES,
-
     BROWSERS,
   } = implConfig
 
@@ -52,11 +51,18 @@ module.exports = (env = {}, argv = {}, configOverrides = {}) => {
     ],
     resolve: {
       modules: [path.resolve(__dirname, '../src/javascripts'), 'node_modules'],
+      alias: {
+        react: 'preact/compat',
+        'react-dom/test-utils': 'preact/test-utils',
+        'react-dom': 'preact/compat', // Must be below test-utils
+        'react/jsx-runtime': 'preact/jsx-runtime',
+      },
+      extensions: ['.ts', '.tsx', '.js'],
     },
     module: {
       rules: [
         {
-          test: /\.js$/,
+          test: /\.(j|t)s$/,
           include: BABEL_TRANSPILE_MODULES.map((moduleName) =>
             path.resolve('node_modules', moduleName),
           ),
@@ -66,20 +72,35 @@ module.exports = (env = {}, argv = {}, configOverrides = {}) => {
           },
         },
         {
-          test: /\.js$/,
+          test: /\.(j|t)s$/,
           exclude: /(node_modules|bower_components)/,
           loader: 'babel-loader',
           options: {
             plugins: generateBabelLoaderPluginsPart(env, argv, implConfig),
           },
         },
+        {
+          test: /\.tsx?$/,
+          loader: 'ts-loader',
+          exclude: /node_modules|\.d\.ts$/,
+          options: {
+            compilerOptions: {
+              outDir: 'build',
+              noEmit: false,
+            },
+          },
+        },
+        {
+          test: /\.d\.ts$/,
+          loader: 'ignore-loader',
+        },
       ],
     },
   }
 
   const packageConfig = webpackMerge(baseConfig, {
     entry: {
-      index: path.join(SRC_ROOT, 'javascripts/index.js'),
+      index: path.join(SRC_ROOT, 'javascripts/index.ts'),
     },
   })
 
@@ -93,7 +114,7 @@ module.exports = (env = {}, argv = {}, configOverrides = {}) => {
 
   const styleguideConfig = webpackMerge(baseConfig, {
     entry: {
-      'style-guide': path.join(SRC_ROOT, 'javascripts/style-guide.js'),
+      'style-guide': path.join(SRC_ROOT, 'javascripts/style-guide.ts'),
     },
     externals: [/^@seamly\/web-ui(\/.*)?/i],
   })

package/webpack/defaults.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
 const path = require('path')
 
 const BABEL_TRANSPILE_MODULES = ['debug', 'superagent', 'phoenix']
@@ -10,7 +11,7 @@ const PUBLIC_ROOT = path.join(ROOT, 'public')
 const PUBLIC_TEST_ROOT = path.join(PUBLIC_ROOT, 'test')
 const PUBLIC_STYLEGUIDE_ROOT = path.join(PUBLIC_ROOT, 'style-guide')
 
-const PUBLIC_PATH = process.env['PUBLIC_PATH'] || '/'
+const PUBLIC_PATH = process.env.PUBLIC_PATH || '/'
 
 const ALIASSES = {
   '@seamly/web-ui$': path.resolve(SRC_ROOT, 'javascripts'),
@@ -40,7 +41,7 @@ const ALIASSES = {
   ),
   '@seamly/web-ui/style-guide$': path.resolve(
     SRC_ROOT,
-    'javascripts/style-guide.js',
+    'javascripts/style-guide.ts',
   ),
   '@seamly/web-ui/src/stylesheets/styles.scss': path.resolve(
     SRC_ROOT,
@@ -55,6 +56,10 @@ const ALIASSES = {
     'style-guide.scss',
   ),
   lib: path.resolve(SRC_ROOT, 'javascripts/lib/'),
+  react: 'preact/compat',
+  'react-dom/test-utils': 'preact/test-utils',
+  'react-dom': 'preact/compat', // Must be below test-utils
+  'react/jsx-runtime': 'preact/jsx-runtime',
 }
 
 module.exports = {

package/webpack/parts/babel-loader-browser-plugins.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
 const babelLoaderPlugins = require('./babel-loader-plugins')
 
 module.exports = (env, argv, config) => [

package/webpack/parts/dev-server.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
 const path = require('path')
 
 module.exports = (env, argv, { PUBLIC_PATH, SRC_ROOT }) => ({
@@ -13,9 +14,9 @@ module.exports = (env, argv, { PUBLIC_PATH, SRC_ROOT }) => ({
   },
   resolve: {
     alias: {
-      api: path.resolve(SRC_ROOT, 'javascripts/api'),
-      domains: path.resolve(SRC_ROOT, 'javascripts/domains'),
-      ui: path.resolve(SRC_ROOT, 'javascripts/ui'),
+      api: path.resolve(SRC_ROOT, 'javascripts/api/'),
+      domains: path.resolve(SRC_ROOT, 'javascripts/domains/'),
+      ui: path.resolve(SRC_ROOT, 'javascripts/ui/'),
     },
   },
 })

package/src/javascripts/domains/app/actions.js

@@ -1,112 +0,0 @@
-import { actionTypes, seamlyActions } from 'ui/utils/seamly-utils'
-import * as ConfigActions from 'domains/config/actions'
-import * as I18nActions from 'domains/i18n/actions'
-import * as TranslationActions from 'domains/translations/actions'
-import * as VisibilityActions from 'domains/visibility/actions'
-import SeamlyUnavailableError from 'api/errors/seamly-unavailable-error'
-import SeamlySessionExpiredError from 'api/errors/seamly-session-expired-error'
-import * as InterruptActions from 'domains/interrupt/actions'
-import { createAction, createThunk } from './utils'
-
-export const setHasResponded = createAction(
-  'setHasResponded',
-  (hasResponded) => ({ hasResponded }),
-)
-
-export const initialize = createThunk(
-  'initialize',
-  async (_, { dispatch, extra: { api, config } }) => {
-    dispatch(ConfigActions.initialize(config))
-    let locale = config?.context?.locale
-
-    try {
-      const {
-        features,
-        defaultLocale,
-        preChat,
-        agentParticipant,
-        userParticipant,
-        startChatIcon,
-      } = await api.getConfig()
-
-      dispatch({ type: seamlyActions.SET_FEATURES, features })
-      locale = locale || defaultLocale
-      dispatch(I18nActions.setInitialLocale(locale))
-      dispatch(
-        ConfigActions.setPreChatEvents(
-          preChat.map((payload) => ({ type: 'message', payload })),
-        ),
-      )
-      dispatch(
-        ConfigActions.update({
-          agentParticipant,
-          userParticipant,
-          startChatIcon,
-        }),
-      )
-
-      if (agentParticipant?.name) {
-        dispatch({
-          type: seamlyActions.SET_HEADER_SUB_TITLE,
-          title: agentParticipant.name,
-        })
-      }
-    } catch (e) {
-      throw new SeamlyUnavailableError()
-    }
-
-    try {
-      if (api.hasConversation()) {
-        const initialState = await api.getConversationIntitialState()
-        dispatch({ type: seamlyActions.SET_INITIAL_STATE, initialState })
-
-        locale = initialState.translation?.locale || locale
-
-        if ('userResponded' in initialState) {
-          dispatch(setHasResponded(initialState.userResponded))
-        }
-      } else {
-        if (config?.context?.topic) {
-          api.send('action', {
-            type: actionTypes.setTopic,
-            body: {
-              name: config.context.topic,
-              // Separate fallback message is not needed here. Only an attached service will use this, but none will
-              // be attached before the conversation has started (meaning the fallback message will never be shown).
-              fallbackMessage: config.context.topic,
-            },
-          })
-        }
-        if (config?.context?.translationLocale) {
-          locale = config.context.translationLocale
-          api.send('action', {
-            type: actionTypes.setTranslation,
-            body: { enabled: true, locale },
-          })
-          dispatch(TranslationActions.enable(locale))
-        }
-      }
-    } catch (e) {
-      if (e instanceof SeamlySessionExpiredError) {
-        throw e
-      }
-      throw new SeamlyUnavailableError()
-    } finally {
-      await dispatch(I18nActions.setLocale(locale))
-      dispatch(VisibilityActions.initialize())
-    }
-  },
-)
-
-export const reset = createThunk(
-  'reset',
-  async (config, { dispatch, extra: { api } }) => {
-    try {
-      await api.disconnect()
-      await api.clearStore()
-      dispatch(initialize())
-    } catch (error) {
-      dispatch(InterruptActions.set(error))
-    }
-  },
-)

package/src/javascripts/domains/app/index.js

@@ -1,7 +0,0 @@
-import * as Actions from './actions'
-import * as Selectors from './selectors'
-
-export * from './hooks'
-export { default as Reducer } from './reducer'
-
-export { Actions, Selectors }

package/src/javascripts/domains/app/reducer.js

@@ -1,16 +0,0 @@
-import { createReducer } from './utils'
-import * as Actions from './actions'
-
-const initialState = {
-  userHasResponded: false,
-}
-
-export default createReducer(
-  {
-    [Actions.setHasResponded]: (state, { hasResponded }) => ({
-      ...state,
-      userHasResponded: hasResponded,
-    }),
-  },
-  initialState,
-)

package/src/javascripts/domains/app/selectors.js

@@ -1,8 +0,0 @@
-import { createSelector } from 'reselect'
-import { selectState } from './utils'
-
-export const selectUserHasResponded = createSelector(
-  selectState,
-  (state) => state.userHasResponded,
-)
-export { selectState }

package/src/javascripts/domains/app/utils.js

@@ -1,4 +0,0 @@
-import { createDomain } from 'lib/redux-helpers'
-
-export const { createAction, createThunk, createReducer, selectState } =
-  createDomain('app')

package/src/javascripts/domains/config/actions.js

@@ -1,7 +0,0 @@
-import { createAction } from './utils'
-
-export const initialize = createAction('initialize', (config) => ({ config }))
-export const update = createAction('update', (config) => ({ config }))
-export const setPreChatEvents = createAction('setPreChatEvents', (events) => ({
-  events,
-}))

package/src/javascripts/domains/config/hooks.js

@@ -1,23 +0,0 @@
-import { useSelector } from 'domains/redux'
-import * as Selectors from './selectors'
-
-export function useConfig() {
-  return useSelector(Selectors.selectConfig)
-}
-
-export function useParticipants() {
-  const { agentParticipant, userParticipant } = useSelector(
-    Selectors.selectConfig,
-  )
-
-  return {
-    agent: agentParticipant,
-    user: userParticipant,
-  }
-}
-
-export function useStartChatIcon() {
-  const { startChatIcon } = useSelector(Selectors.selectConfig)
-
-  return startChatIcon
-}

package/src/javascripts/domains/config/index.js

@@ -1,7 +0,0 @@
-import * as Actions from './actions'
-import * as Selectors from './selectors'
-
-export * from './hooks'
-export { default as Reducer } from './reducer'
-
-export { Actions, Selectors }

package/src/javascripts/domains/config/reducer.js

@@ -1,79 +0,0 @@
-import { defaultConfig } from 'config'
-import { pick } from 'ui/utils/general-utils'
-import * as AppActions from 'domains/app/actions'
-import { createReducer } from './utils'
-import * as Actions from './actions'
-
-const initialState = {
-  ...defaultConfig,
-  hideOnNoUserResponse: false,
-  connectWhenInView: true,
-  showDisclaimer: false,
-  showFaq: false,
-  customComponents: {},
-  defaults: {},
-  preChatEvents: [],
-}
-
-const configKeys = [
-  'hideOnNoUserResponse',
-  'connectWhenInView',
-  'showDisclaimer',
-  'showFaq',
-  'namespace',
-  'customComponents',
-  'defaults',
-  'layoutMode',
-  'api',
-  'zIndex',
-  'context',
-  'appContainerClassNames',
-  'messages',
-  'visible',
-  'visibilityCallback',
-  'errorCallback',
-  'agentParticipant',
-  'userParticipant',
-  'startChatIcon',
-]
-
-const updateState = (state, { config }) => {
-  const { messages, ...partialConfig } = pick(config, configKeys)
-  let newState = state
-  if (Object.keys(partialConfig).length > 0) {
-    newState = {
-      ...newState,
-      ...partialConfig,
-    }
-  }
-  if (messages) {
-    newState = {
-      ...newState,
-      messages: {
-        ...newState.messages,
-        ...messages,
-      },
-    }
-  }
-
-  return newState
-}
-
-export default createReducer(
-  {
-    [Actions.initialize]: (state, action) => {
-      return updateState(state, action)
-    },
-    [Actions.update]: (state, action) => {
-      return updateState(state, action)
-    },
-    [AppActions.initialize.pending]: () => initialState,
-    [Actions.setPreChatEvents]: (state, { events }) => {
-      return {
-        ...state,
-        preChatEvents: events,
-      }
-    },
-  },
-  initialState,
-)

package/src/javascripts/domains/config/selectors.js

@@ -1,23 +0,0 @@
-import { createSelector } from 'reselect'
-import { visibilityStates } from 'domains/visibility/constants'
-import { selectState } from './utils'
-
-export const selectConfig = createSelector(selectState, (config) => {
-  let newConfig = {
-    visible:
-      config?.layoutMode === 'inline'
-        ? visibilityStates.open
-        : visibilityStates.minimized,
-    appContainerClassNames: config.appContainerClassNames || [],
-    ...config,
-  }
-  if (typeof newConfig.appContainerClassNames === 'function') {
-    newConfig = {
-      ...newConfig,
-      appContainerClassNames: newConfig.appContainerClassNames(newConfig),
-    }
-  }
-  return newConfig
-})
-
-export { selectState }

package/src/javascripts/domains/config/utils.js

@@ -1,4 +0,0 @@
-import { createDomain } from 'lib/redux-helpers'
-
-export const { createAction, createThunk, createReducer, selectState } =
-  createDomain('config')

package/src/javascripts/domains/forms/actions.js

@@ -1,21 +0,0 @@
-import { createActions } from './utils'
-
-export const [registerForm, deregisterForm] = createActions('form', {
-  register: (formId, persistData) => ({ formId, persistData }),
-  deregister: (formId) => ({ formId }),
-})
-
-export const [
-  registerControl,
-  deregisterControl,
-  updateControlValue,
-  updateControlTouched,
-] = createActions('control', {
-  register: (formId, name) => ({
-    formId,
-    name,
-  }),
-  deregister: (formId, name) => ({ formId, name }),
-  updateValue: (formId, name, value) => ({ formId, name, value }),
-  updateTouched: (formId, name, touched) => ({ formId, name, touched }),
-})

package/src/javascripts/domains/forms/context.js

@@ -1,6 +0,0 @@
-import { createContext } from 'preact'
-
-const FormContext = createContext({})
-
-export default FormContext
-export const { Provider, Consumer } = FormContext

package/src/javascripts/domains/forms/index.js

@@ -1,8 +0,0 @@
-import * as Actions from './actions'
-import * as Selectors from './selectors'
-
-export * from './hooks'
-export { default as FormProvider } from './provider'
-export { default as Reducer } from './reducer'
-
-export { Actions, Selectors }

package/src/javascripts/domains/forms/reducer.js

@@ -1,84 +0,0 @@
-import * as AppActions from 'domains/app/actions'
-import { createReducer } from './utils'
-import * as Actions from './actions'
-
-const initialState = {}
-
-const initialFormState = {
-  controls: {},
-}
-
-const initialControlState = {
-  value: '',
-  touched: false,
-}
-
-function updateFormControl(state, formId, name, controlState) {
-  const currentControlState =
-    state[formId]?.controls[name] || initialControlState
-  return {
-    ...state,
-    [formId]: {
-      ...state[formId],
-      controls: {
-        ...state[formId].controls,
-        [name]: {
-          ...currentControlState,
-          ...controlState,
-        },
-      },
-    },
-  }
-}
-
-export default createReducer(
-  {
-    // Form handlers
-    [Actions.registerForm]: (state, { formId, persistData }) => {
-      const formState = persistData
-        ? state[formId] ?? { ...initialFormState, persistData }
-        : { ...initialFormState, persistData }
-      return {
-        ...state,
-        [formId]: formState,
-      }
-    },
-    [Actions.deregisterForm]: (state, { formId }) => {
-      const newState = { ...state }
-      if (!newState[formId]?.persistData) {
-        delete newState[formId]
-      }
-      return newState
-    },
-    // Form control handlers
-    [Actions.registerControl]: (state, { name, formId }) => {
-      return updateFormControl(state, formId, name)
-    },
-    [Actions.deregisterControl]: (state, { formId, name }) => {
-      const form = state[formId]
-      if (!form) {
-        return state
-      }
-      if (form.persistData) {
-        return state
-      }
-      const controls = { ...form.controls }
-      delete controls[name]
-      return {
-        ...state,
-        [formId]: {
-          ...form,
-          controls,
-        },
-      }
-    },
-    [Actions.updateControlValue]: (state, { formId, name, value }) => {
-      return updateFormControl(state, formId, name, { value })
-    },
-    [Actions.updateControlTouched]: (state, { formId, name, touched }) => {
-      return updateFormControl(state, formId, name, { touched })
-    },
-    [AppActions.initialize.pending]: () => initialState,
-  },
-  initialState,
-)

package/src/javascripts/domains/forms/utils.js

@@ -1,20 +0,0 @@
-import { createDomain } from 'lib/redux-helpers'
-
-export const { createActions, createReducer, selectState } =
-  createDomain('forms')
-
-export function validate(values, schema = {}) {
-  return Object.entries(schema).reduce((errors, [key, validations]) => {
-    if (validations && !Array.isArray(validations)) {
-      // eslint-disable-next-line no-param-reassign
-      validations = [validations]
-    }
-    for (let i = 0; i < validations?.length ?? 0; i++) {
-      if (!validations[i].fn(values[key], validations[i].compareValue)) {
-        errors[key] = validations[i].errorText
-        break
-      }
-    }
-    return errors
-  }, {})
-}

package/src/javascripts/domains/i18n/actions.js

@@ -1,20 +0,0 @@
-import createMutex from 'lib/mutex'
-import { selectLocale } from './selectors'
-import { createAction, createThunk } from './utils'
-
-export const setInitialLocale = createAction('setInitialLocale', (locale) => ({
-  locale,
-}))
-
-const mutex = createMutex()
-export const setLocale = createThunk(
-  'setLocale',
-  async (locale, { getState, extra: { api } }) => {
-    return mutex.runExclusively(() => {
-      if (locale === selectLocale(getState())) {
-        return undefined
-      }
-      return api.getTranslations(locale)
-    })
-  },
-)

package/src/javascripts/domains/i18n/index.js

@@ -1,7 +0,0 @@
-import * as Actions from './actions'
-import * as Selectors from './selectors'
-
-export * from './hooks'
-export { default as Reducer } from './reducer'
-
-export { Actions, Selectors }

package/src/javascripts/domains/i18n/selectors.js

@@ -1,15 +0,0 @@
-import { createSelector } from 'reselect'
-import { selectState } from './utils'
-
-export const selectTranslations = createSelector(
-  selectState,
-  (state) => state.translations,
-)
-
-export const selectInitialLocale = createSelector(
-  selectState,
-  (state) => state.initialLocale,
-)
-export const selectLocale = createSelector(selectState, (state) => state.locale)
-
-export { selectState }

package/src/javascripts/domains/i18n/utils.js

@@ -1,4 +0,0 @@
-import { createDomain } from 'lib/redux-helpers'
-
-export const { createAction, createThunk, createReducer, selectState } =
-  createDomain('i18n')

package/src/javascripts/domains/interrupt/actions.js

@@ -1,4 +0,0 @@
-import { createAction } from './utils'
-
-export const set = createAction('set', (error) => ({ error }))
-export const clear = createAction('clear')

package/src/javascripts/domains/interrupt/index.js

@@ -1,9 +0,0 @@
-import * as Actions from './actions'
-import * as Selectors from './selectors'
-
-export * from './hooks'
-
-export { default as createMiddleware } from './middleware'
-export { default as Reducer } from './reducer'
-
-export { Actions, Selectors }

package/src/javascripts/domains/interrupt/reducer.js

@@ -1,22 +0,0 @@
-import * as AppActions from 'domains/app/actions'
-import { createReducer } from './utils'
-import * as Actions from './actions'
-
-const initialState = {
-  error: undefined,
-}
-
-const handleError = (state, { error }) => ({
-  ...state,
-  error,
-})
-
-export default createReducer(
-  {
-    [Actions.set]: handleError,
-    [AppActions.initialize.rejected]: handleError,
-    [Actions.clear]: () => initialState,
-    [AppActions.initialize.pending]: () => initialState,
-  },
-  initialState,
-)