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

package/src/javascripts/style-guide/components/app.js

@@ -1,8 +1,8 @@
-import { useCallback, useEffect, useState } from 'preact/hooks'
 import { getUrlParams, getUrlSearchString, randomId } from '@seamly/web-ui'
-import { getStateObj, getDeprecatedStateObj } from 'style-guide/states'
-import StyleGuideView from './view'
-import StyleGuideLinks from './links'
+import { useCallback, useEffect, useState } from 'preact/hooks'
+import StyleGuideLinks from 'style-guide/components/links'
+import StyleGuideView from 'style-guide/components/view'
+import { getDeprecatedStateObj, getStateObj } from 'style-guide/states'
 
 const StyleGuideApp = ({
   config,

package/src/javascripts/style-guide/components/static-core.js

@@ -1,101 +1,123 @@
-import { useMemo, useRef } from 'preact/hooks'
-import thunkMiddleware from 'redux-thunk'
-
+import { configureStore } from '@reduxjs/toolkit'
 import {
-  SeamlyEventBusContext,
+  ComponentFilter,
   SeamlyApiContext,
+  SeamlyEventBusContext,
   SeamlyLiveRegionContext,
-  StoreProvider,
-  ComponentFilter,
-  createReduxStore,
+  SeamlyStoreProvider,
 } from '@seamly/web-ui'
-import stateReducer from 'domains/store/state-reducer'
-import { Reducer as formReducer } from 'domains/forms'
-import { Reducer as translationsReducer } from 'domains/translations'
-import { Reducer as i18nReducer, Actions as I18nActions } from 'domains/i18n'
-import { Reducer as interruptReducer } from 'domains/interrupt'
-import { Reducer as appReducer } from 'domains/app'
-import {
-  Reducer as configReducer,
-  Actions as ConfigActions,
-} from 'domains/config'
-import { Reducer as visibilityReducer } from 'domains/visibility'
-import { seamlyActions } from '../../ui/utils/seamly-utils'
-
-const { SET_PARTICIPANT } = seamlyActions
+import appReducer from 'domains/app/slice'
+import configReducer, {
+  setPreChatEvents,
+  setConfig,
+} from 'domains/config/slice'
+import formsReducer from 'domains/forms/slice'
+import i18nReducer, {
+  setInitialLocale,
+  setTranslations,
+} from 'domains/i18n/slice'
+import interruptReducer from 'domains/interrupt/slice'
+import stateReducer, { setParticipant } from 'domains/store/slice'
+import translationReducer from 'domains/translations/slice'
+import visibilityReducer from 'domains/visibility/slice'
+import { useMemo, useRef } from 'preact/hooks'
 
 const bareApi = {
-  send: () => {},
+  send: () => {
+    // do nothing
+  },
   reset: () => {
     return Promise.resolve({})
   },
-  store: { get: () => {}, set: () => {} },
+  store: {
+    get: () => {
+      // do nothing
+    },
+    set: () => {
+      // do nothing
+    },
+  },
   hasConversation: () => false,
 }
 
-const SeamlyTestCore = ({
+const SeamlyStaticCore = ({
   state,
   translations,
   participants = [],
   children,
 }) => {
-  const liveMsgRef = useRef(() => {})
-  const eventBusRef = useRef({ emit: () => {} })
+  const liveMsgRef = useRef(() => {
+    // do nothing
+  })
+  const eventBusRef = useRef({
+    emit: () => {
+      // do nothing
+    },
+  })
 
   const store = useMemo(() => {
     const {
-      translations: translationsSlice,
-      interrupt: interruptSlice,
-      config: configSlice = {},
-      visibility: visibilitySlice,
-      ...restState
+      translations: initialTranslations,
+      interrupt: initialInterrupt,
+      config: initialConfig = {},
+      visibility: initialVisibility,
+      ...initialState
     } = state || {}
-    const newStore = createReduxStore({
-      reducers: {
+
+    const newStore = configureStore({
+      reducer: {
         state: stateReducer,
-        [String(appReducer)]: appReducer,
-        [String(configReducer)]: configReducer,
-        [String(formReducer)]: formReducer,
-        [String(translationsReducer)]: translationsReducer,
-        [String(i18nReducer)]: i18nReducer,
-        [String(interruptReducer)]: interruptReducer,
-        [String(visibilityReducer)]: visibilityReducer,
+        app: appReducer,
+        config: configReducer,
+        i18n: i18nReducer,
+        translations: translationReducer,
+        visibility: visibilityReducer,
+        forms: formsReducer,
+        interrupt: interruptReducer,
       },
-      initialState: {
-        state: restState,
-        [String(translationsReducer)]: translationsSlice,
-        [String(interruptReducer)]: interruptSlice,
-        [String(visibilityReducer)]: visibilitySlice,
+      preloadedState: {
+        state: initialState,
+        config: initialConfig,
+        translations: initialTranslations,
+        interrupt: initialInterrupt,
+        visibility: initialVisibility,
       },
-      middlewares: [
-        thunkMiddleware.withExtraArgument({
-          api: bareApi,
-          eventBus: eventBusRef.current,
+      middleware: (getDefaultMiddleWare) =>
+        getDefaultMiddleWare({
+          thunk: {
+            extraArgument: {
+              api: bareApi,
+              eventBus: eventBusRef.current,
+            },
+          },
+          serializableCheck: false,
         }),
-      ],
     })
-    newStore.dispatch(ConfigActions.initialize(configSlice))
-    if (configSlice.preChatEvents) {
-      newStore.dispatch(
-        ConfigActions.setPreChatEvents(configSlice.preChatEvents),
-      )
+
+    const { config } = newStore.getState()
+
+    newStore.dispatch(setConfig(config))
+    if (config.preChatEvents) {
+      newStore.dispatch(setPreChatEvents(config.preChatEvents))
     }
-    newStore.dispatch(I18nActions.setLocale.fulfilled('en-GB', translations))
+    newStore.dispatch(setInitialLocale('en-GB'))
+    newStore.dispatch(setTranslations(translations))
 
     participants.forEach((participant) => {
-      newStore.dispatch({
-        type: SET_PARTICIPANT,
-        participant,
-        fromClient: participant.id === 'user',
-      })
+      newStore.dispatch(
+        setParticipant({
+          participant,
+          fromClient: participant.id === 'user',
+        }),
+      )
     })
 
     return newStore
-  }, [state, translations, participants])
+  }, [participants, state, translations])
 
   return (
     state && (
-      <StoreProvider store={store}>
+      <SeamlyStoreProvider store={store}>
         <SeamlyEventBusContext.Provider value={eventBusRef.current}>
           <SeamlyLiveRegionContext.Provider value={liveMsgRef.current}>
             <SeamlyApiContext.Provider value={bareApi}>
@@ -103,9 +125,9 @@ const SeamlyTestCore = ({
             </SeamlyApiContext.Provider>
           </SeamlyLiveRegionContext.Provider>
         </SeamlyEventBusContext.Provider>
-      </StoreProvider>
+      </SeamlyStoreProvider>
     )
   )
 }
 
-export default SeamlyTestCore
+export default SeamlyStaticCore

package/src/javascripts/style-guide/components/view.js

@@ -1,5 +1,6 @@
 import { useState, useEffect } from 'preact/hooks'
 import { View } from '@seamly/web-ui'
+import { timeout } from 'ui/hooks/focus-helper-hooks'
 import StyleGuideStaticCore from './static-core'
 
 const StyleGuideView = ({
@@ -18,10 +19,9 @@ const StyleGuideView = ({
   // renders showing up.
   useEffect(() => {
     setRenderView(false)
-    requestAnimationFrame(() => {
-      requestAnimationFrame(() => {
-        setRenderView(true)
-      })
+    requestAnimationFrame(async () => {
+      await timeout(60)
+      setRenderView(true)
     })
   }, [state])
 

package/src/javascripts/style-guide/state-helpers/index.js

@@ -33,24 +33,24 @@ export function addTranslationData(event) {
             data: {
               ...event.payload.body,
               text: event.payload.body.text
-                ? 'NL - ' + event.payload.body.text
+                ? `NL - ${event.payload.body.text}`
                 : undefined,
               description: event.payload.body.description
-                ? 'NL - ' + event.payload.body.description
+                ? `NL - ${event.payload.body.description}`
                 : undefined,
               buttonText: event.payload.body.buttonText
-                ? 'NL - ' + event.payload.body.buttonText
+                ? `NL - ${event.payload.body.buttonText}`
                 : undefined,
               choices: event.payload.body.choices
                 ? event.payload.body.choices.map((choice) => ({
                     ...choice,
-                    text: 'NL - ' + choice.text,
+                    text: `NL - ${choice.text}`,
                   }))
                 : undefined,
               prompt: event.payload.body.prompt
                 ? {
                     ...event.payload.body.prompt,
-                    text: 'NL - ' + event.payload.body.prompt.text,
+                    text: `NL - ${event.payload.body.prompt.text}`,
                   }
                 : undefined,
             },

package/src/javascripts/style-guide/states.js

@@ -1,8 +1,8 @@
 import {
-  visibilityStates,
   randomId,
-  SeamlyOfflineError,
   SeamlyGeneralError,
+  SeamlyOfflineError,
+  visibilityStates,
 } from '@seamly/web-ui'
 import { addTranslationData } from './state-helpers'
 
@@ -713,7 +713,9 @@ const uploadBusy = {
   complete: false,
   error: '',
   uploadHandle: {
-    abort: () => {},
+    abort: () => {
+      // do nothing
+    },
   },
 }
 
@@ -725,7 +727,7 @@ const uploadError = {
   complete: false,
   error: 'Something went wrong with the upload',
   uploadHandle: {
-    abort: () => {},
+    abort: () => undefined,
   },
 }
 

package/src/javascripts/style-guide.ts

@@ -0,0 +1,5 @@
+import initializeStyleGuideExternalApi from 'style-guide/register-style-guide-api'
+
+export default initializeStyleGuideExternalApi
+
+export { default as SeamlyStaticCore } from 'style-guide/components/static-core'

package/src/javascripts/ui/components/app-options/index.js

@@ -1,10 +1,8 @@
 import { useSeamlyOptions } from 'ui/hooks/seamly-hooks'
 import { className } from 'lib/css'
 import OptionsButton from 'ui/components/options/options-button'
-import {
-  useTranslations,
-  OptionsButton as TranslationsOptionsButton,
-} from 'domains/translations'
+import { useTranslations } from 'domains/translations/hooks'
+import TranslationsOptionsButton from 'domains/translations/components/options-button'
 
 export default function AppOptions() {
   const { menuOptions, allowOptionSelection } = useSeamlyOptions()

package/src/javascripts/ui/components/conversation/component-filter.js

@@ -1,5 +1,5 @@
 import { useMemo } from 'preact/hooks'
-import { useConfig } from 'domains/config'
+import { useConfig } from 'domains/config/hooks'
 import ComponentContext from './component-context'
 import ChoicePrompt from './event/choice-prompt'
 import Text from './event/text'

package/src/javascripts/ui/components/conversation/conversation.js

@@ -1,17 +1,17 @@
-import { useRef, useEffect } from 'preact/hooks'
+import { useI18n } from 'domains/i18n/hooks'
+import { useVisibility } from 'domains/visibility/hooks'
 import { className } from 'lib/css'
-import { useI18n } from 'domains/i18n'
+import { useEffect, useRef } from 'preact/hooks'
+import PrivacyDisclaimer from 'ui/components/layout/privacy-disclaimer'
 import {
   useSeamlyIsLoading,
   useSkiplink,
   useSkiplinkTargetFocusing,
 } from 'ui/hooks/seamly-hooks'
 import { useEvents, useLoadedImageEventIds } from 'ui/hooks/seamly-state-hooks'
-import PrivacyDisclaimer from 'ui/components/layout/privacy-disclaimer'
-import { useVisibility } from 'domains/visibility'
+import ComponentFilter from './component-filter'
 import Event from './event/event'
 import Loader from './loader'
-import ComponentFilter from './component-filter'
 
 const Events = () => {
   const events = useEvents()

package/src/javascripts/ui/components/conversation/event/card-message.js

@@ -1,6 +1,6 @@
 import { useGeneratedId } from 'ui/hooks/seamly-hooks'
 import MessageContainer from 'ui/components/conversation/message-container'
-import { useTranslatedEventData } from 'domains/translations'
+import { useTranslatedEventData } from 'domains/translations/hooks'
 import CardComponent from './card-component'
 
 const CardMessage = ({ event }) => {

package/src/javascripts/ui/components/conversation/event/carousel-component/components/controls.js

@@ -1,5 +1,5 @@
 import { className } from 'lib/css'
-import { useI18n } from 'domains/i18n'
+import { useI18n } from 'domains/i18n/hooks'
 import Icon from 'ui/components/layout/icon'
 
 export default function CarouselControls({

package/src/javascripts/ui/components/conversation/event/carousel-message/components/slide.js

@@ -1,5 +1,5 @@
 import { className } from 'lib/css'
-import { useI18n } from 'domains/i18n'
+import { useI18n } from 'domains/i18n/hooks'
 import CardComponent from 'ui/components/conversation/event/card-component'
 
 export default function CarouselMessageSlide({

package/src/javascripts/ui/components/conversation/event/carousel-message/index.js

@@ -1,6 +1,6 @@
 import MessageContainer from 'ui/components/conversation/message-container'
 import CarouselComponent from 'ui/components/conversation/event/carousel-component'
-import { useTranslatedEventData } from 'domains/translations'
+import { useTranslatedEventData } from 'domains/translations/hooks'
 import CarouselMessageSlide from './components/slide'
 
 const getItemKey = (item, idx, prefix = '') => `${prefix}${item.title}:${idx}`

package/src/javascripts/ui/components/conversation/event/choice-prompt.js

@@ -9,8 +9,8 @@ import {
 import { className } from 'lib/css'
 import { actionTypes } from 'ui/utils/seamly-utils'
 import Icon from 'ui/components/layout/icon'
-import { useI18n } from 'domains/i18n'
-import { useTranslatedEventData } from 'domains/translations'
+import { useI18n } from 'domains/i18n/hooks'
+import { useTranslatedEventData } from 'domains/translations/hooks'
 import MessageContainer from 'ui/components/conversation/message-container'
 
 export const useChoicePrompt = (event) => {

package/src/javascripts/ui/components/conversation/event/conversation-suggestions.js

@@ -1,17 +1,14 @@
-import { useCallback, useMemo, useState } from 'preact/hooks'
+import { useUserHasResponded } from 'domains/app/hooks'
+import { setHasResponded } from 'domains/app/slice'
+import { useI18n } from 'domains/i18n/hooks'
+import { useTranslatedEventData } from 'domains/translations/hooks'
 import { className } from 'lib/css'
-import {
-  useEvents,
-  useSeamlyCommands,
-  useSeamlyDispatchContext,
-} from 'ui/hooks/seamly-hooks'
-import { useI18n } from 'domains/i18n'
-import { useTranslatedEventData } from 'domains/translations'
-import { useUserHasResponded } from 'domains/app'
-import { setHasResponded } from 'domains/app/actions'
-import { actionTypes } from 'ui/utils/seamly-utils'
+import { useCallback, useMemo, useState } from 'preact/hooks'
+import { useDispatch } from 'react-redux'
 import MessageContainer from 'ui/components/conversation/message-container'
 import SuggestionsList from 'ui/components/suggestions/suggestions-list'
+import { useEvents, useSeamlyCommands } from 'ui/hooks/seamly-hooks'
+import { actionTypes } from 'ui/utils/seamly-utils'
 
 export const useSuggestions = (event) => {
   const { payload } = event
@@ -25,8 +22,8 @@ export const useSuggestions = (event) => {
 
 const ConversationSuggestions = ({ event, ...props }) => {
   const [isExpanded, setIsExpanded] = useState(true)
-  const dispatch = useSeamlyDispatchContext()
-  const userResponded = useUserHasResponded()
+  const dispatch = useDispatch()
+  const userHasResponded = useUserHasResponded()
   const { sendAction, addMessageBubble } = useSeamlyCommands()
   const { suggestions, payload } = useSuggestions(event)
   const events = useEvents()
@@ -66,7 +63,7 @@ const ConversationSuggestions = ({ event, ...props }) => {
     [dispatch, sendAction, payload.id, addMessageBubble],
   )
 
-  if (!isExpanded || userResponded || !hasLastTransactionEvent) {
+  if (!isExpanded || userHasResponded || !hasLastTransactionEvent) {
     return null
   }
 

package/src/javascripts/ui/components/conversation/event/cta.js

@@ -3,7 +3,7 @@ import { className } from 'lib/css'
 import { useGeneratedId, useSeamlyCommands } from 'ui/hooks/seamly-hooks'
 import { actionTypes } from 'ui/utils/seamly-utils'
 import MessageContainer from 'ui/components/conversation/message-container'
-import { useTranslatedEventData } from 'domains/translations'
+import { useTranslatedEventData } from 'domains/translations/hooks'
 import useEventLinkClickHandler from './hooks/use-event-link-click-handler'
 
 const Cta = ({ event }) => {

package/src/javascripts/ui/components/conversation/event/divider/variants/default.js

@@ -1,5 +1,5 @@
 import { dividerKeys } from 'ui/utils/seamly-utils'
-import { useI18n } from 'domains/i18n'
+import { useI18n } from 'domains/i18n/hooks'
 import EventDivider from 'ui/components/conversation/event-divider'
 
 const dividerTypes = {

package/src/javascripts/ui/components/conversation/event/divider/variants/new-translation.js

@@ -1,7 +1,10 @@
-import { useI18n } from 'domains/i18n'
+import { useI18n } from 'domains/i18n/hooks'
 import EventDivider from 'ui/components/conversation/event-divider'
 import { className } from 'lib/css'
-import { useTranslations, useLocaleNativeName } from 'domains/translations'
+import {
+  useTranslations,
+  useLocaleNativeName,
+} from 'domains/translations/hooks'
 
 const NewTranslationDivider = ({ event }) => {
   const { t } = useI18n()

package/src/javascripts/ui/components/conversation/event/event-participant.js

@@ -1,7 +1,7 @@
 import { useSeamlyParticipant } from 'ui/hooks/seamly-hooks'
 import { className } from 'lib/css'
-import { useConfig } from 'domains/config'
-import { useI18n } from 'domains/i18n'
+import { useConfig } from 'domains/config/hooks'
+import { useI18n } from 'domains/i18n/hooks'
 
 const EventParticipant = ({ eventPayload }) => {
   const { t } = useI18n()

package/src/javascripts/ui/components/conversation/event/hooks/use-formatted-date.js

@@ -1,6 +1,6 @@
-import { useI18n } from 'domains/i18n'
+import { useI18n } from 'domains/i18n/hooks'
 import { getRelativeDate } from 'ui/utils/general-utils'
-import { useConfig } from 'domains/config'
+import { useConfig } from 'domains/config/hooks'
 
 const dateFormatOptions = { month: 'long', day: 'numeric', year: 'numeric' }
 const timeFormatOptions = { hour: 'numeric', minute: 'numeric' }

package/src/javascripts/ui/components/conversation/event/image-lightbox.js

@@ -1,6 +1,6 @@
 import { useState } from 'preact/hooks'
 import Lightbox from 'ui/components/widgets/lightbox'
-import { useI18n } from 'domains/i18n'
+import { useI18n } from 'domains/i18n/hooks'
 import { className } from 'lib/css'
 import Icon from 'ui/components/layout/icon'
 

package/src/javascripts/ui/components/conversation/event/image.js

@@ -1,20 +1,18 @@
+import { setLoadedImageEventIds } from 'domains/store/slice'
+import { useTranslatedEventData } from 'domains/translations/hooks'
 import { useState } from 'preact/hooks'
+import { useDispatch } from 'react-redux'
 import MessageContainer from 'ui/components/conversation/message-container'
-import { useTranslatedEventData } from 'domains/translations'
-import { useStoreDispatch } from 'domains/redux'
 import ImageLightbox from './image-lightbox'
-import { seamlyActions } from '../../../utils/seamly-utils'
-
-const { SET_LOADED_IMAGE_EVENT_IDS } = seamlyActions
 
 const Image = ({ event, descriptorId, ...props }) => {
   const [body] = useTranslatedEventData(event)
   const { description, url, isZoomable } = body
   const [showLighbox, setShowLightbox] = useState(false)
-  const dispatch = useStoreDispatch()
+  const dispatch = useDispatch()
 
   const handleOnLoad = () => {
-    dispatch({ type: SET_LOADED_IMAGE_EVENT_IDS, eventId: event.payload.id })
+    dispatch(setLoadedImageEventIds(event.payload.id))
     setShowLightbox(true)
   }
 

package/src/javascripts/ui/components/conversation/event/participant.js

@@ -1,5 +1,5 @@
 import EventDivider from 'ui/components/conversation/event-divider'
-import { useTranslatedEventData } from 'domains/translations'
+import { useTranslatedEventData } from 'domains/translations/hooks'
 
 const Participant = ({ event }) => {
   const { participant } = event.payload

package/src/javascripts/ui/components/conversation/event/splash.js

@@ -1,6 +1,6 @@
-import useEventLinkClickHandler from './hooks/use-event-link-click-handler'
-import MessageContainer from '../message-container'
-import { useTranslatedEventData } from '../../../../domains/translations'
+import { useTranslatedEventData } from 'domains/translations/hooks'
+import useEventLinkClickHandler from 'ui/components/conversation/event/hooks/use-event-link-click-handler'
+import MessageContainer from 'ui/components/conversation/message-container'
 
 const Splash = ({ event, ...props }) => {
   const { payload } = event

package/src/javascripts/ui/components/conversation/event/text.js

@@ -1,6 +1,6 @@
 import { useMemo } from 'preact/hooks'
 import MessageContainer from 'ui/components/conversation/message-container'
-import { useTranslatedEventData } from 'domains/translations'
+import { useTranslatedEventData } from 'domains/translations/hooks'
 import useEventLinkClickHandler from './hooks/use-event-link-click-handler'
 
 const Text = ({ event, ...props }) => {

package/src/javascripts/ui/components/conversation/event/translation.js

@@ -1,6 +1,6 @@
-import { useI18n } from 'domains/i18n'
+import { useI18n } from 'domains/i18n/hooks'
 import MessageContainer from 'ui/components/conversation/message-container'
-import { useTranslatedEventData } from 'domains/translations'
+import { useTranslatedEventData } from 'domains/translations/hooks'
 
 const Translation = ({ event, ...props }) => {
   const { t } = useI18n()

package/src/javascripts/ui/components/conversation/event/upload.js

@@ -1,9 +1,9 @@
 import { useMemo } from 'preact/hooks'
 import { className } from 'lib/css'
 import Icon from 'ui/components/layout/icon'
-import { useI18n } from 'domains/i18n'
+import { useI18n } from 'domains/i18n/hooks'
 import MessageContainer from 'ui/components/conversation/message-container'
-import { useTranslatedEventData } from 'domains/translations'
+import { useTranslatedEventData } from 'domains/translations/hooks'
 
 const UploadContent = ({ children, url, target }) =>
   url ? (

package/src/javascripts/ui/components/conversation/event/video.js

@@ -1,6 +1,6 @@
 import { className } from 'lib/css'
 import { useSeamlyMessageContainerClassNames } from 'ui/hooks/seamly-hooks'
-import { useTranslatedEventData } from 'domains/translations'
+import { useTranslatedEventData } from 'domains/translations/hooks'
 import MessageContainer from 'ui/components/conversation/message-container'
 
 const Video = ({ event, descriptorId, ...props }) => {

package/src/javascripts/ui/components/conversation/message-container.js

@@ -1,7 +1,7 @@
 import { className } from 'lib/css'
 import { useSeamlyMessageContainerClassNames } from 'ui/hooks/component-helper-hooks'
-import { useTranslatedEventData } from 'domains/translations'
-import { useI18n } from 'domains/i18n'
+import { useTranslatedEventData } from 'domains/translations/hooks'
+import { useI18n } from 'domains/i18n/hooks'
 import EventParticipant from './event/event-participant'
 
 function MessageContainer({
@@ -22,7 +22,7 @@ function MessageContainer({
     useTranslatedEventData(event)
 
   if (type) {
-    classNames.push('message--type-' + type)
+    classNames.push(`message--type-${type}`)
   }
   if (modifiers) {
     if (typeof modifiers === 'string') {
@@ -30,7 +30,7 @@ function MessageContainer({
       modifiers = modifiers.split(' ').filter((v) => v.length)
     }
     modifiers.forEach((modifier) => {
-      classNames.push('message--' + modifier)
+      classNames.push(`message--${modifier}`)
     })
   }
   if (isTranslated) {

package/src/javascripts/ui/components/core/seamly-api-context.js

@@ -2,4 +2,4 @@ import { createContext } from 'preact'
 
 export const SeamlyApiContext = createContext(null)
 
-export const SeamlyEventBusContext = createContext('')
+export const SeamlyEventBusContext = createContext(null)