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

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

@@ -1,6 +0,0 @@
-import { createSelector } from 'reselect'
-import { selectState } from './utils'
-
-export const selectError = createSelector(selectState, ({ error }) => error)
-
-export { selectState }

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

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

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

@@ -1 +0,0 @@
-export { default as createMiddleware } from './middleware'

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

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

package/src/javascripts/domains/redux/create-redux-store.js

@@ -1,21 +0,0 @@
-import { combineReducers, createStore, applyMiddleware, compose } from 'redux'
-
-let composeEnhancers = compose
-if (process.env.NODE_ENV === 'development') {
-  /* eslint-disable no-underscore-dangle */
-  composeEnhancers =
-    window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || composeEnhancers
-  /* eslint-enable no-underscore-dangle */
-}
-
-export default function createReduxStore({
-  reducers = {},
-  initialState = {},
-  middlewares = [],
-} = {}) {
-  return createStore(
-    combineReducers(reducers),
-    initialState,
-    composeEnhancers(applyMiddleware(...middlewares)),
-  )
-}

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

@@ -1,80 +0,0 @@
-import {
-  useCallback,
-  useContext,
-  useLayoutEffect,
-  useReducer,
-  useRef,
-} from 'preact/hooks'
-import StoreContext from './context'
-// import { arrayContentEquals } from './utils'
-
-export function useStoreContext() {
-  return useContext(StoreContext)
-}
-
-export function useStoreDispatch() {
-  return useStoreContext().dispatch
-}
-
-export function useSelector(selector, deps = []) {
-  const store = useStoreContext()
-  // we need a force-update because we're manually updating a ref instead of a useState
-  const [, forceUpdate] = useReducer((x) => x + 1, 0)
-  // we're keeping the value to compare against
-  const valueRef = useRef()
-
-  // instead of accepting a stabilized selector, we stick to the signature
-  // of useCallback, as that makes the exposed api much more dev-friendly
-  // otherwise you'd have to stabilize selectors externally
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const selectorCb = useCallback(selector, deps)
-  // we're keeping the selector in a ref to compare against
-  // we need this both in the store subscription and for
-  // synchronous state updates if the selector changes, but the store didn't
-  // if the selector changes, we want to synchronously select the new information
-  // otherwise, the rendered component does not accurately and predictably reflect
-  // the selector+state
-  // in order to keep multiple selectors in sync, we also re-calculate when
-  // the state has changed but the selector hasn't re-calculated async.
-  // selectors *might* be heavy, which could kill FPS, but the alternative is
-  // stale data
-  const selectorRef = useRef()
-  const stateRef = useRef()
-  const state = store.getState()
-  if (selectorRef.current !== selectorCb || stateRef.current !== state) {
-    stateRef.current = state
-    valueRef.current = selectorCb(stateRef.current)
-    selectorRef.current = selectorCb
-  }
-
-  useLayoutEffect(() => {
-    // we subscribe to the store changes
-    return store.subscribe(() => {
-      const newState = store.getState()
-      // prevent recalculating if the state hasn't changed
-      // if the selector changed, it was already handled synchronously
-      if (newState === stateRef.current) {
-        return
-      }
-      // calculate the new value based on selector+state
-      const newValue = selectorRef.current?.(store.getState())
-      // only if the value changed we update. this saves heaps of re-rendering
-      if (newValue !== valueRef.current) {
-        valueRef.current = newValue
-        forceUpdate()
-      }
-    })
-  }, [store])
-  return valueRef.current
-}
-
-export const useSelectorWithProps = function useSelectorWithProps(
-  selector,
-  props,
-  inputs = [],
-  // equalityFn = arrayContentEquals,
-) {
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const wrappedMapper = useCallback((state) => selector(state, props), inputs)
-  return useSelector(wrappedMapper, inputs)
-}

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

@@ -1,19 +0,0 @@
-import StoreContext from './context'
-import StoreProvider from './provider'
-import createReduxStore from './create-redux-store'
-import {
-  useStoreContext,
-  useSelector,
-  useStoreDispatch,
-  useSelectorWithProps,
-} from './hooks'
-
-export {
-  createReduxStore,
-  useSelector,
-  useSelectorWithProps,
-  useStoreDispatch,
-  useStoreContext,
-  StoreContext,
-  StoreProvider,
-}

package/src/javascripts/domains/redux/provider.js

@@ -1,5 +0,0 @@
-import { Provider } from './context'
-
-export default function StoreProvider({ store, children }) {
-  return <Provider value={store}>{children}</Provider>
-}

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

@@ -1,12 +0,0 @@
-export const arrayContentEquals = (a, b) => {
-  if (a === b) {
-    return true
-  }
-  if (!Array.isArray(a) || !Array.isArray(b) || a.length !== b.length) {
-    return false
-  }
-  return a.every((value, idx) => b[idx] === value)
-}
-
-export const getPropSelector = (propName, orDefault) => (_, props) =>
-  props[propName] || orDefault

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

@@ -1,46 +0,0 @@
-import { Reducer as appReducer } from 'domains/app'
-import { Reducer as configReducer } from 'domains/config'
-import { createMiddleware as createErrorsMiddleware } from 'domains/errors'
-import { Reducer as formReducer } from 'domains/forms'
-import { Reducer as i18nReducer } from 'domains/i18n'
-import {
-  createMiddleware as createInterruptMiddleware,
-  Reducer as interruptReducer,
-} from 'domains/interrupt'
-import { createMiddleware as createOptionsMiddleware } from 'domains/options'
-import { createReduxStore } from 'domains/redux'
-import {
-  createMiddleware as createI18nMiddleware,
-  Reducer as translationsReducer,
-} from 'domains/translations'
-import { Reducer as visibilityReducer } from 'domains/visibility'
-import thunkMiddleware from 'redux-thunk'
-import stateReducer from './state-reducer'
-
-export function createStore({ initialState, api, eventBus, config } = {}) {
-  const store = createReduxStore({
-    reducers: {
-      state: stateReducer,
-      [String(appReducer)]: appReducer,
-      [String(configReducer)]: configReducer,
-      [String(formReducer)]: formReducer,
-      [String(translationsReducer)]: translationsReducer,
-      [String(i18nReducer)]: i18nReducer,
-      [String(interruptReducer)]: interruptReducer,
-      [String(visibilityReducer)]: visibilityReducer,
-    },
-    initialState,
-    middlewares: [
-      createErrorsMiddleware({ api }),
-      thunkMiddleware.withExtraArgument({
-        api,
-        eventBus,
-        config,
-      }),
-      createInterruptMiddleware({ api }),
-      createOptionsMiddleware({ api }),
-      createI18nMiddleware,
-    ],
-  })
-  return store
-}

package/src/javascripts/domains/store/state-reducer.js

@@ -1,56 +0,0 @@
-// Legacy state reducer. Do not add new features here but extract/create new reducers as needed
-
-import { randomId } from 'lib/id'
-import { entryTypes, seamlyStateReducer } from 'ui/utils/seamly-utils'
-import * as AppActions from 'domains/app/actions'
-
-const initialState = {
-  events: [],
-  initialState: {},
-  unreadEvents: 0,
-  loadedImageEventIds: [],
-  isLoading: false,
-  idleDetachCountdown: { hasCountdown: false, isActive: false },
-  resumeConversationPrompt: false,
-  serviceInfo: {
-    activeServiceSessionId: '',
-  },
-  participantInfo: {
-    participants: {},
-    currentAgent: '',
-  },
-  headerTitles: {
-    title: null,
-    subTitle: '',
-  },
-  historyLoaded: false,
-  skiplinkTargetId: randomId(),
-  optionsButtonId: randomId(),
-  headerCollapseButtonId: randomId(),
-  serviceData: {},
-  options: {
-    features: {},
-    panelActive: false,
-    optionActive: '',
-    userSelectedOptions: {},
-  },
-  showFileUpload: false,
-  currentUploads: [],
-  entryMeta: {
-    default: entryTypes.text,
-    active: entryTypes.text,
-    userSelected: null,
-    blockAutoEntrySwitch: false,
-    options: {},
-    optionsOverride: {},
-  },
-  seamlyContainerElement: null,
-}
-
-export default function stateReducer(state = initialState, action) {
-  if (action.type === String(AppActions.initialize.pending)) {
-    return initialState
-  }
-
-  return seamlyStateReducer(state, action)
-}

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

@@ -1,11 +0,0 @@
-import { createActions } from './utils'
-
-export const [enable, disable] = createActions('translate', {
-  enable: (locale) => ({ locale }),
-  disable: () => ({}),
-})
-
-export const [enableEvent, disableEvent] = createActions('event', {
-  enable: (payloadId) => ({ payloadId }),
-  disable: (payloadId) => ({ payloadId }),
-})

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

@@ -1,10 +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 { default as OptionsButton } from './components/options-button'
-export { default as ChatStatus } from './components/chat-status'
-
-export { Actions, Selectors }

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

@@ -1,69 +0,0 @@
-import { seamlyActions } from 'ui/utils/seamly-utils'
-import { randomId } from 'lib/id'
-import * as AppActions from 'domains/app/actions'
-import * as Actions from './actions'
-import { createReducer } from './utils'
-
-const initialState = {
-  isActive: false,
-  currentLocale: undefined,
-  isAvailable: false,
-  languages: [],
-  originalPayloadIds: [],
-  containerId: randomId(),
-}
-
-export default createReducer(
-  {
-    [seamlyActions.SET_FEATURES]: (state, action) => {
-      const feature = action?.features?.translation
-      if (!feature) {
-        return state
-      }
-
-      return {
-        ...state,
-        isAvailable: feature.enabled === true,
-        languages: feature.languages || [],
-      }
-    },
-
-    [seamlyActions.CLEAR_FEATURES]: () => initialState,
-    [Actions.enable]: (state, { locale }) => {
-      return {
-        ...state,
-        isActive: true,
-        currentLocale: locale,
-      }
-    },
-    [Actions.disable]: (state) => {
-      return {
-        ...state,
-        isActive: false,
-        currentLocale: undefined,
-      }
-    },
-    [Actions.enableEvent]: (state, { payloadId }) => {
-      if (!state.originalPayloadIds.includes(payloadId)) {
-        return state
-      }
-      return {
-        ...state,
-        originalPayloadIds: state.originalPayloadIds.filter(
-          (id) => id !== payloadId,
-        ),
-      }
-    },
-    [Actions.disableEvent]: (state, { payloadId }) => {
-      if (state.originalPayloadIds.includes(payloadId)) {
-        return state
-      }
-      return {
-        ...state,
-        originalPayloadIds: [...state.originalPayloadIds, payloadId],
-      }
-    },
-    [AppActions.initialize.pending]: () => initialState,
-  },
-  initialState,
-)

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

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

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

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

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

@@ -1,24 +0,0 @@
-import { createReducer } from './utils'
-import * as Actions from './actions'
-import { visibilityStates } from './constants'
-
-const initialState = {
-  visibility: visibilityStates.initialize,
-  showInlineView: false,
-}
-
-export default createReducer(
-  {
-    [Actions.setFromStorage]: (state, { visibility }) => ({
-      ...state,
-      visibility,
-    }),
-    [Actions.setVisibility.fulfilled]: (state, { payload: visibility }) =>
-      visibility ? { ...state, visibility } : state,
-    [Actions.setShowInlineView]: (state) => ({
-      ...state,
-      showInlineView: true,
-    }),
-  },
-  initialState,
-)

package/src/javascripts/index.js

@@ -1,153 +0,0 @@
-import preactDebug from './lib/preact-debug' // eslint-disable-line
-
-// Used by: Client
-import initializeExternalApi from './lib/external-api/initialize-api'
-
-export default initializeExternalApi
-
-// Used by: Client
-export { default as AgentInfo } from './ui/components/layout/agent-info'
-
-// Used by: Client
-export { default as Chat } from './ui/components/layout/chat'
-
-// Used by: Client
-export { calculateVisibility } from './domains/visibility'
-
-// Used by: Client
-export { default as ChatFrame } from './ui/components/layout/chat-frame'
-
-// Used by: Client
-export { className } from './lib/css'
-
-// Used by: Client
-export { default as Conversation } from './ui/components/conversation/conversation'
-
-// Used by: StyleGuide
-export { createReduxStore } from './domains/redux'
-
-// Used by: StyleGuide
-export { default as Engine } from './lib/engine'
-
-// Used by: Client
-export { default as EntryContainer } from './ui/components/entry/entry-container'
-
-// Used by: Demo
-export { default as EventParticipant } from './ui/components/conversation/event/event-participant'
-
-// Used by: Client
-export { eventTypes } from './ui/utils/seamly-utils'
-
-// Used by: StyleGuide
-export { default as ExternalApi } from './lib/external-api'
-
-// Used by: StyleGuide
-export { getUrlParams } from './ui/utils/general-utils'
-
-// Used by: StyleGuide
-export { getUrlSearchString } from './ui/utils/general-utils'
-
-// Used by: Client
-export { default as Header } from './ui/components/layout/header'
-
-// Used by: Client
-export { default as Icon } from './ui/components/layout/icon'
-
-// Used by: Client
-export { default as Interrupt } from './ui/components/layout/interrupt'
-
-// Used by: Client
-export { default as MessageContainer } from './ui/components/conversation/message-container'
-
-// Used by: StyleGuide
-export { randomId } from './lib/id'
-
-// Used by: Client
-export { seamlyActions } from './ui/utils/seamly-utils'
-
-// Used by: StyleGuide
-export { SeamlyApiContext } from './ui/components/core/seamly-api-context'
-
-// Used by: StyleGuide
-export { SeamlyEventBusContext } from './ui/components/core/seamly-api-context'
-
-// Used by: StyleGuide
-export { SeamlyLiveRegionContext } from './ui/components/core/seamly-live-region-context'
-
-// Used by: StyleGuide
-export { StoreProvider } from './domains/redux'
-
-// Used by: Client
-export { useChoicePrompt } from './ui/components/conversation/event/choice-prompt'
-
-// Used by: Client
-export { useSeamlyDispatchContext as useDispatch } from './ui/hooks/seamly-hooks'
-
-// Used by: Client
-export { useSeamlyChat } from './ui/hooks/seamly-hooks'
-
-// Used by: Client
-export { useSeamlyCommands } from './ui/hooks/seamly-hooks'
-
-// Used by: Client
-export { useConfig as useSeamlyConfig } from './domains/config'
-
-// Used by: Client
-export { useEvents } from './ui/hooks/seamly-hooks'
-
-// Used by: Client
-export { useGeneratedId } from './ui/hooks/seamly-hooks'
-
-// Used by: Client
-export { useI18n } from './domains/i18n'
-
-// Used by: Client
-export { useSeamlyEventStream } from './ui/hooks/seamly-hooks'
-
-// Used by: Client
-export { useSeamlyIdleDetachCountdown } from './ui/hooks/seamly-hooks'
-
-// Used by: Client
-export { useSeamlyMessageContainerClassNames } from './ui/hooks/seamly-hooks'
-
-// Used by: Client
-export { useSeamlyOptions } from './ui/hooks/seamly-hooks'
-
-// Used by: Client
-export { useVisibility as useSeamlyVisibility } from './domains/visibility'
-
-// Used by: Client
-export {
-  useTranslations,
-  useTranslatedEventData,
-  useTranslationsContainer,
-} from './domains/translations'
-
-// Used by: Client
-export { default as Text } from './ui/components/conversation/event/text'
-
-// Used by: Client
-export { default as DeprecatedToggleButton } from './ui/components/entry/deprecated-toggle-button'
-
-// Used by: StyleGuide
-// Used by: Client (with custom view)
-export { default as View } from './ui/components/view'
-
-// Used by: Client
-export { default as DeprecatedView } from './ui/components/view/deprecated-view'
-
-// Used by: StyleGuide
-export { default as ComponentFilter } from './ui/components/conversation/component-filter'
-
-// Used by: Client
-// Used by: StyleGuide
-export { visibilityStates } from './domains/visibility'
-
-// Used by: StyleGuide
-export { API } from './api'
-
-// Used by: StyleGuide
-export { default as SeamlyGeneralError } from './api/errors/seamly-general-error'
-
-// Used by: StyleGuide
-export { default as SeamlyOfflineError } from './api/errors/seamly-offline-error'

package/src/javascripts/lib/redux-helpers/index.js

@@ -1,99 +0,0 @@
-import { randomId } from 'lib/id'
-
-export const SLICE_DELIMITER = '/'
-export const DOMAIN_DELIMITER = '//'
-
-export function prefixType(prefix, fn, delimiter = '/') {
-  return (type, ...args) => fn(prefix + delimiter + type, ...args)
-}
-
-export function createAction(
-  type,
-  identityReducer = (payload) => ({ payload }),
-) {
-  const action = (...params) => ({ type, ...identityReducer(...params) })
-  action.toString = () => String(type)
-  action.match = (obj) => obj?.type === String(type)
-  return action
-}
-
-export function createActions(baseType, ...args) {
-  const handlers = []
-  // eslint-disable-next-line consistent-return
-  args.forEach((arg) => {
-    const argType = typeof arg
-    if (argType === 'string') {
-      return handlers.push([arg])
-    }
-    if (argType !== 'object' || arg instanceof Array) {
-      return undefined
-    }
-    Object.keys(arg).forEach((key) => handlers.push([key, arg[key]]))
-  })
-  const create = prefixType(baseType, createAction, SLICE_DELIMITER)
-
-  return handlers.map((handler) => create(...handler))
-}
-
-export function createThunk(type, payloadCreator) {
-  const [pending, fulfilled, rejected] = createActions(type, {
-    pending: (arg, requestId) => ({
-      meta: { arg, requestId, status: 'pending' },
-    }),
-    fulfilled: (arg, payload, requestId) => ({
-      payload,
-      meta: { arg, requestId, status: 'fulfilled' },
-    }),
-    rejected: (arg, error, requestId) => ({
-      error,
-      meta: { arg, requestId, status: 'rejected', error: String(error) },
-    }),
-  })
-  const thunkCreator = (arg) => (dispatch, getState, extra) => {
-    const requestId = randomId()
-    const promise = (async () => {
-      let finalAction
-      try {
-        dispatch(pending(arg, requestId))
-        const prms = payloadCreator(arg, { dispatch, getState, extra })
-        const result = await prms
-        finalAction = fulfilled(arg, result, requestId)
-      } catch (error) {
-        finalAction = rejected(arg, error, requestId)
-      }
-      dispatch(finalAction)
-      return finalAction
-    })()
-    return Object.assign(promise, {
-      type,
-      arg,
-      requestId,
-    })
-  }
-  return Object.assign(thunkCreator, {
-    type,
-    pending,
-    fulfilled,
-    rejected,
-  })
-}
-
-export function createReducer(domain, handlers = {}, defaultState) {
-  const reducer = (state = defaultState, action) => {
-    const typeReducer = handlers?.[action?.type]
-    return typeReducer ? typeReducer(state, action) : state
-  }
-  reducer.toString = () => domain
-  return reducer
-}
-
-export function createDomain(domain) {
-  return {
-    createAction: prefixType(domain, createAction, DOMAIN_DELIMITER),
-    createActions: prefixType(domain, createActions, DOMAIN_DELIMITER),
-    createThunk: prefixType(domain, createThunk, DOMAIN_DELIMITER),
-    createReducer: (handlers, defaultState) =>
-      createReducer(domain, handlers, defaultState),
-    selectState: (state) => state[domain],
-  }
-}

package/src/javascripts/style-guide.js

@@ -1,5 +0,0 @@
-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/hooks/use-seamly-dispatch.js

@@ -1,3 +0,0 @@
-import { useStoreDispatch } from 'domains/redux'
-
-export default useStoreDispatch