@seamly/web-ui 24.5.0-beta.1 → 25.0.0

package/src/javascripts/core/ui/components/entry/upload/index.tsx

@@ -1,7 +1,7 @@
-import { useCallback, useEffect, useMemo, useRef } from 'preact/hooks'
 import FormProvider from 'domains/forms/provider'
 import { useI18n } from 'domains/i18n/hooks'
 import { className } from 'lib/css'
+import { useCallback, useEffect, useMemo, useRef } from 'preact/hooks'
 import UploadProgress from 'ui/components/widgets/upload-progress'
 import { useSeamlyEntry } from 'ui/hooks/seamly-entry-hooks'
 import {

package/src/javascripts/core/ui/components/entry/upload-toggle.tsx

@@ -1,6 +1,6 @@
-import { useEffect, useRef, useState } from 'preact/hooks'
 import { useI18n } from 'domains/i18n/hooks'
 import { className } from 'lib/css'
+import { useEffect, useRef, useState } from 'preact/hooks'
 import Icon from 'ui/components/layout/icon'
 import InOutTransition, {
   transitionStartStates,

package/src/javascripts/core/ui/components/form-controls/error.tsx

@@ -1,5 +1,5 @@
-import { useEffect, useState } from 'preact/hooks'
 import { className } from 'lib/css'
+import { useEffect, useState } from 'preact/hooks'
 import Icon from 'ui/components/layout/icon'
 
 export default function Error({ id, error }) {

package/src/javascripts/core/ui/components/form-controls/file-input.tsx

@@ -1,6 +1,6 @@
-import { useCallback, useState } from 'preact/hooks'
 import { useFormContext, useFormControl } from 'domains/forms/hooks'
 import { className } from 'lib/css'
+import { useCallback, useState } from 'preact/hooks'
 import Icon from 'ui/components/layout/icon'
 import { useGeneratedId } from 'ui/hooks/seamly-hooks'
 import Error from './error'

package/src/javascripts/core/ui/components/form-controls/input.tsx

@@ -1,6 +1,6 @@
+import { useFormContext, useFormControl } from 'domains/forms/hooks'
 import { InputHTMLAttributes } from 'preact/compat'
 import { useRef, useLayoutEffect } from 'preact/hooks'
-import { useFormContext, useFormControl } from 'domains/forms/hooks'
 import FormControlWrapper from './wrapper'
 
 type InputProps = InputHTMLAttributes<HTMLInputElement> & {

package/src/javascripts/core/ui/components/form-controls/wrapper.tsx

@@ -1,5 +1,5 @@
-import { FC, HTMLAttributes } from 'preact/compat'
 import { className } from 'lib/css'
+import { FC, HTMLAttributes } from 'preact/compat'
 import Error from './error'
 
 type FormControlWrapperProps = {

package/src/javascripts/core/ui/components/layout/agent-info.tsx

@@ -1,9 +1,9 @@
-import { useSelector } from 'react-redux'
 import { useStartChatIcon } from 'domains/config/hooks'
 import { useI18n } from 'domains/i18n/hooks'
 import { selectHasError } from 'domains/interrupt/selectors'
 import { useVisibility } from 'domains/visibility/hooks'
 import { className } from 'lib/css'
+import { useSelector } from 'react-redux'
 import {
   useSeamlyCurrentAgent,
   useSeamlyHeaderData,

package/src/javascripts/core/ui/components/layout/chat-frame.tsx

@@ -1,8 +1,8 @@
-import { useSelector } from 'react-redux'
 import { selectHasError } from 'domains/interrupt/selectors'
 import TranslationStatus from 'domains/translations/components/translation-status'
 import { useVisibility } from 'domains/visibility/hooks'
 import { className } from 'lib/css'
+import { useSelector } from 'react-redux'
 import AppOptions from 'ui/components/app-options'
 import ChatScrollProvider from 'ui/components/conversation/event/chat-scroll/chat-scroll-provider'
 import EntryContainer from 'ui/components/entry/entry-container'

package/src/javascripts/core/ui/components/layout/chat.tsx

@@ -1,11 +1,11 @@
-import { ComponentChildren } from 'preact'
-import { forwardRef } from 'preact/compat'
 import { useUserHasResponded } from 'domains/app/hooks'
 import { useConfig } from 'domains/config/hooks'
 import { useI18n } from 'domains/i18n/hooks'
 import { visibilityStates } from 'domains/visibility/constants'
 import { useVisibility } from 'domains/visibility/hooks'
 import { className } from 'lib/css'
+import { ComponentChildren } from 'preact'
+import { forwardRef } from 'preact/compat'
 import Suggestions from 'ui/components/suggestions'
 import { useSeamlyAppContainerClassNames } from 'ui/hooks/component-helper-hooks'
 import { useSeamlyLayoutMode } from 'ui/hooks/seamly-state-hooks'

package/src/javascripts/core/ui/components/layout/continue-chat-messages.tsx

@@ -1,6 +1,6 @@
-import { useMemo } from 'preact/hooks'
 import { useI18n } from 'domains/i18n/hooks'
 import { ChannelEvent } from 'domains/store/store.types'
+import { useMemo } from 'preact/hooks'
 import { CollapsedChatMessages } from './collapsed-chat-messages'
 
 export default function ContinueChatMessages() {

package/src/javascripts/core/ui/components/layout/header.tsx

@@ -1,6 +1,6 @@
-import { useRef } from 'preact/hooks'
 import { useI18n } from 'domains/i18n/hooks'
 import { className } from 'lib/css'
+import { useRef } from 'preact/hooks'
 import { useSeamlyStateContext } from 'ui/hooks/seamly-hooks'
 import Icon from './icon'
 

package/src/javascripts/core/ui/components/layout/interrupt.tsx

@@ -1,6 +1,6 @@
-import { useEffect } from 'preact/hooks'
 import { useInterrupt } from 'domains/interrupt/hooks'
 import { className } from 'lib/css'
+import { useEffect } from 'preact/hooks'
 import CollapseButton from 'ui/components/view/window-view/collapse-button'
 import {
   useGeneratedId,

package/src/javascripts/core/ui/components/layout/pre-chat-messages.tsx

@@ -1,7 +1,7 @@
-import { useSelector } from 'react-redux'
 import { useConfig } from 'domains/config/hooks'
 import { selectHasError } from 'domains/interrupt/selectors'
 import { useVisibility } from 'domains/visibility/hooks'
+import { useSelector } from 'react-redux'
 import { CollapsedChatMessages } from './collapsed-chat-messages'
 
 export default function PreChatMessages() {

package/src/javascripts/core/ui/components/options/options-button.tsx

@@ -1,6 +1,6 @@
-import { useEffect, useMemo, useRef, useState } from 'preact/hooks'
 import { useI18n } from 'domains/i18n/hooks'
 import { className } from 'lib/css'
+import { useEffect, useMemo, useRef, useState } from 'preact/hooks'
 import Icon from 'ui/components/layout/icon'
 import InOutTransition, {
   transitionStartStates,
@@ -167,9 +167,7 @@ const OptionsButton = () => {
     <div
       className={className('options__container')}
       onKeyDown={onMainKeyDownHandler}
-      // eslint-disable-next-line react/no-unknown-property
       onFocusOut={onFocusOutHandler}
-      // eslint-disable-next-line react/no-unknown-property
       onFocusIn={onFocusInHandler}
     >
       <InOutTransition

package/src/javascripts/core/ui/components/options/options-frame.tsx

@@ -1,6 +1,6 @@
+import { className } from 'lib/css'
 import { FC } from 'preact/compat'
 import { MutableRef, useCallback, useEffect } from 'preact/hooks'
-import { className } from 'lib/css'
 import Icon from 'ui/components/layout/icon'
 import {
   useGeneratedId,

package/src/javascripts/core/ui/components/options/transcript/index.tsx

@@ -1,6 +1,6 @@
-import { useCallback, useMemo, useState } from 'preact/hooks'
 import FormProvider from 'domains/forms/provider'
 import { useI18n } from 'domains/i18n/hooks'
+import { useCallback, useMemo, useState } from 'preact/hooks'
 import OptionsFrame from 'ui/components/options/options-frame'
 import {
   useGeneratedId,

package/src/javascripts/core/ui/components/suggestions/index.tsx

@@ -1,5 +1,3 @@
-import { useCallback, useEffect, useMemo, useRef } from 'preact/hooks'
-import { useSelector } from 'react-redux'
 import { useUserHasResponded } from 'domains/app/hooks'
 import { useConfig } from 'domains/config/hooks'
 import { useI18n } from 'domains/i18n/hooks'
@@ -10,6 +8,8 @@ import { visibilityStates } from 'domains/visibility/constants'
 import { useVisibility } from 'domains/visibility/hooks'
 import { className } from 'lib/css'
 import { randomId } from 'lib/id'
+import { useCallback, useEffect, useMemo, useRef } from 'preact/hooks'
+import { useSelector } from 'react-redux'
 import SuggestionsList from 'ui/components/suggestions/suggestions-list'
 import InOutTransition, {
   transitionStartStates,

package/src/javascripts/core/ui/components/suggestions/suggestions-list.tsx

@@ -1,5 +1,5 @@
-import { FC } from 'preact/compat'
 import { ServiceDataEvent } from 'domains/store/store.types'
+import { FC } from 'preact/compat'
 import { className } from '../../../lib/css'
 import SuggestionsItem from './suggestions-item'
 

package/src/javascripts/core/ui/components/view/index.tsx

@@ -1,6 +1,3 @@
-import { RefCallback } from 'preact'
-import { useCallback, useEffect, useMemo, useRef } from 'preact/hooks'
-import { useSelector } from 'react-redux'
 import { useUserHasResponded } from 'domains/app/hooks'
 import { useConfig } from 'domains/config/hooks'
 import { useI18n } from 'domains/i18n/hooks'
@@ -8,6 +5,9 @@ import { selectLastUnreadEvent } from 'domains/store/selectors'
 import { useTranslatedEventData } from 'domains/translations/hooks'
 import { useVisibility } from 'domains/visibility/hooks'
 import { className } from 'lib/css'
+import { RefCallback } from 'preact'
+import { useCallback, useEffect, useMemo, useRef } from 'preact/hooks'
+import { useSelector } from 'react-redux'
 import AppView from 'ui/components/view/app-view'
 import InlineView from 'ui/components/view/inline-view'
 import WindowView from 'ui/components/view/window-view'

package/src/javascripts/core/ui/components/view/window-view/window-open-button.tsx

@@ -1,10 +1,10 @@
-import { useCallback } from 'preact/hooks'
-import { useSelector } from 'react-redux'
 import { useStartChatIcon } from 'domains/config/hooks'
 import { useI18n } from 'domains/i18n/hooks'
 import { selectHasError } from 'domains/interrupt/selectors'
 import { useVisibility } from 'domains/visibility/hooks'
 import { className } from 'lib/css'
+import { useCallback } from 'preact/hooks'
+import { useSelector } from 'react-redux'
 import Icon from 'ui/components/layout/icon'
 import InOutTransition, {
   transitionStartStates,

package/src/javascripts/core/ui/components/widgets/in-out-transition.tsx

@@ -1,8 +1,8 @@
+import { defaultTransitionTimeMs } from 'config'
+import { className } from 'lib/css'
 import { cloneElement, toChildArray } from 'preact'
 import { FC } from 'preact/compat'
 import { useEffect, useMemo, useRef, useState } from 'preact/hooks'
-import { defaultTransitionTimeMs } from 'config'
-import { className } from 'lib/css'
 import useTimeout from 'ui/hooks/use-timeout'
 import { ValueOf, childIsVNode } from 'ui/utils/general-utils'
 

package/src/javascripts/core/ui/components/widgets/lightbox.tsx

@@ -1,7 +1,7 @@
-import { useRef } from 'preact/hooks'
 import { useConfig } from 'domains/config/hooks'
 import { useI18n } from 'domains/i18n/hooks'
 import { className } from 'lib/css'
+import { useRef } from 'preact/hooks'
 import Icon from 'ui/components/layout/icon'
 import {
   useSeamlyActivityEventHandler,

package/src/javascripts/core/ui/hooks/file-upload-hooks.ts

@@ -1,6 +1,6 @@
-import { useCallback, useContext } from 'preact/hooks'
 import { useAppDispatch } from 'domains/store'
 import { clearAllUploads } from 'domains/store/slice'
+import { useCallback, useContext } from 'preact/hooks'
 import SeamlyFileUploadContext from 'ui/components/core/seamly-file-upload-context'
 import { useSeamlyStateContext } from './seamly-state-hooks'
 

package/src/javascripts/core/ui/hooks/focus-helper-hooks.ts

@@ -1,6 +1,6 @@
-import { useCallback, useRef } from 'preact/hooks'
 import { useAppDispatch } from 'domains/store'
 import { setSeamlyContainerElement } from 'domains/store/slice'
+import { useCallback, useRef } from 'preact/hooks'
 import {
   focusElement,
   runIfElementContainsOrHasFocus,

package/src/javascripts/core/ui/hooks/seamly-entry-hooks.ts

@@ -1,4 +1,3 @@
-import { useCallback, useEffect, useRef } from 'preact/hooks'
 import { typingTimeout } from 'config'
 import { useAppDispatch } from 'domains/store'
 import {
@@ -6,6 +5,7 @@ import {
   setBlockAutoEntrySwitch,
   setUserEntryType,
 } from 'domains/store/slice'
+import { useCallback, useEffect, useRef } from 'preact/hooks'
 import { useSeamlyCommands, useSeamlyOptions } from 'ui/hooks/seamly-hooks'
 import { useSeamlyStateContext } from 'ui/hooks/seamly-state-hooks'
 import { actionTypes } from 'ui/utils/seamly-utils'

package/src/javascripts/core/ui/hooks/seamly-option-hooks.ts

@@ -1,4 +1,3 @@
-import { useCallback } from 'preact/hooks'
 import { useI18n } from 'domains/i18n/hooks'
 import { useAppDispatch } from 'domains/store'
 import {
@@ -7,6 +6,7 @@ import {
   setUserSelectedOption as dispatchUserSelectedOption,
   setUserSelectedOptions as dispatchUserSelectedOptions,
 } from 'domains/store/slice'
+import { useCallback } from 'preact/hooks'
 import { useElementFocusingById } from 'ui/hooks/focus-helper-hooks'
 import { useSeamlyObjectStore } from 'ui/hooks/seamly-api-hooks'
 import { useSeamlyStateContext } from 'ui/hooks/seamly-state-hooks'

package/src/javascripts/core/ui/hooks/seamly-state-hooks.ts

@@ -1,11 +1,11 @@
 import { createSelector } from '@reduxjs/toolkit'
-import { useSelector } from 'react-redux'
 import { selectUserHasResponded } from 'domains/app/selectors'
 import { useConfig } from 'domains/config/hooks'
 import * as ConfigSelectors from 'domains/config/selectors'
-import { microsecondsToMilliseconds } from 'ui/utils/general-utils'
 import type { RootState } from 'domains/store'
 import type { ChannelEvent, ServiceDataEvent } from 'domains/store/store.types'
+import { useSelector } from 'react-redux'
+import { microsecondsToMilliseconds } from 'ui/utils/general-utils'
 
 export const selectState = ({ state }: RootState) => state
 export const useSeamlyStateContext = () => useSelector(selectState)
@@ -131,10 +131,15 @@ export const useSeamlyServiceData = (key: string) => {
 
 export const useEntryTextLimit = () => {
   const {
-    entryMeta: { options, optionsOverride },
+    entryMeta: { active: entryType, options, optionsOverride },
   } = useSeamlyStateContext()
 
-  const { limit } = optionsOverride?.text || options?.text || { limit: null }
+  let limit: number | null = null
+  if (entryType && typeof optionsOverride[entryType]?.limit === 'number') {
+    limit = optionsOverride[entryType].limit
+  } else if (entryType && typeof options[entryType]?.limit === 'number') {
+    limit = options[entryType].limit
+  }
 
   return {
     hasLimit: limit !== null,

package/src/javascripts/core/ui/hooks/use-debounce.ts

@@ -1,6 +1,6 @@
 import { useEffect, useRef, useState } from 'preact/hooks'
 
-const useDebounce = <T extends unknown>(value: T, delay = 20): T => {
+const useDebounce = <T>(value: T, delay = 20): T => {
   const [debouncedValue, setDebouncedValue] = useState<T>(value)
   const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
 

package/src/javascripts/core/ui/hooks/use-interval.ts

@@ -7,7 +7,6 @@ const useInterval = (callback, delay) => {
     savedCallback.current = callback
   }, [callback])
 
-  /* eslint-disable-next-line consistent-return */
   useEffect(() => {
     function tick() {
       savedCallback.current()

package/src/javascripts/core/ui/hooks/use-notifications.ts

@@ -1,7 +1,7 @@
-import { useCallback, useEffect, useMemo, useState } from 'preact/hooks'
-import { useSelector } from 'react-redux'
 import { useConfig } from 'domains/config/hooks'
 import { selectShowNotifications } from 'domains/store/selectors'
+import { useCallback, useEffect, useMemo, useState } from 'preact/hooks'
+import { useSelector } from 'react-redux'
 import { textEntryControlName } from 'ui/components/entry/text-entry'
 import { useSeamlyServiceInfo } from './seamly-state-hooks'
 import beep from './sounds/beep.mp3'
@@ -45,7 +45,6 @@ const useNotification = () => {
   }, [permission, proactiveMessages, requestPermission])
 
   const sendNotification = useCallback(
-    // eslint-disable-next-line no-undef
     async (title: string, options?: NotificationOptions) => {
       if (!showNotifications || !hasNotificationSupport) return
 

package/src/javascripts/core/ui/hooks/use-seamly-chat.ts

@@ -1,7 +1,7 @@
-import { useCallback, useEffect, useRef } from 'preact/hooks'
-import { useSelector } from 'react-redux'
 import { useI18n } from 'domains/i18n/hooks'
 import { useVisibility } from 'domains/visibility/hooks'
+import { useCallback, useEffect, useRef } from 'preact/hooks'
+import { useSelector } from 'react-redux'
 import useSeamlyCommands from 'ui/hooks/use-seamly-commands'
 import { selectShowInlineView } from '../../domains/visibility/selectors'
 import { useLiveRegion } from './live-region-hooks'

package/src/javascripts/core/ui/hooks/use-seamly-commands.ts

@@ -1,20 +1,20 @@
-import { useCallback } from 'preact/hooks'
 import { resetApp } from 'domains/app/actions'
 import { useUserHasResponded } from 'domains/app/hooks'
 import { setHasResponded } from 'domains/app/slice'
 import { setInterrupt } from 'domains/interrupt/slice'
 import { useAppDispatch } from 'domains/store'
 import { addEvent, setEvents, setInitialState } from 'domains/store/slice'
+import type { MessageUpload } from 'domains/store/store.types'
 import { visibilityStates } from 'domains/visibility/constants'
 import { useVisibility } from 'domains/visibility/hooks'
 import { randomId } from 'lib/id'
+import { useCallback } from 'preact/hooks'
 import useSeamlyEventBusContext from './event-bus-hooks'
 import {
   useSeamlyApiContext,
   useSeamlyHasConversation,
 } from './seamly-api-hooks'
 import { useSeamlyUnreadCount } from './seamly-state-hooks'
-import type { MessageUpload } from 'domains/store/store.types'
 
 const useSeamlyCommands = () => {
   const api = useSeamlyApiContext()

package/src/javascripts/core/ui/hooks/use-seamly-conversation.ts

@@ -1,5 +1,5 @@
-import { useSyncExternalStore } from 'preact/compat'
 import ConversationConnector from 'api/conversation-connector'
+import { useSyncExternalStore } from 'preact/compat'
 import { useSeamlyApiContext } from './seamly-api-hooks'
 
 const useSeamlyConversation = () => {

package/src/javascripts/core/ui/hooks/use-seamly-idle-detach-countdown.ts

@@ -1,4 +1,3 @@
-import { useCallback } from 'preact/hooks'
 import { screenReaderDebounceDelaySeconds } from 'config'
 import { useI18n } from 'domains/i18n/hooks'
 import { useAppDispatch } from 'domains/store'
@@ -9,6 +8,7 @@ import {
   stopIdleDetachCountdownCounter,
 } from 'domains/store/slice'
 import { useVisibility } from 'domains/visibility/hooks'
+import { useCallback, useRef } from 'preact/hooks'
 import {
   getTimeFromSeconds,
   millisecondsToSeconds,
@@ -34,6 +34,18 @@ const useSeamlyIdleDetachCountdown = () => {
 
   const { isOpen } = useVisibility()
 
+  // We create a ref here, and explicitly overwrite the current values, because the
+  // `endCountdown` call initiated by the server has a different lifecycle from the
+  // `IdleDetachWarning` component.
+  const countdownState = useRef({
+    hasCountdown: false,
+    wasStopped: false,
+  })
+  countdownState.current = {
+    hasCountdown,
+    wasStopped: wasStopped || false,
+  }
+
   const { emitEvent, sendAction } = useSeamlyCommands()
   const { t } = useI18n()
   const { sendAssertive, sendPolite } = useLiveRegion()
@@ -81,6 +93,7 @@ const useSeamlyIdleDetachCountdown = () => {
     (_continueChat?: boolean | undefined, _isServerAction?: boolean) => void
   >(
     (continueChat = undefined, isServerAction = false) => {
+      const { hasCountdown, wasStopped } = countdownState.current
       if (!hasCountdown) {
         return
       }
@@ -98,15 +111,7 @@ const useSeamlyIdleDetachCountdown = () => {
 
       dispatch(clearIdleDetachCountdown())
     },
-    [
-      dispatch,
-      emitEvent,
-      hasCountdown,
-      sendAction,
-      sendAssertiveIfOpen,
-      t,
-      wasStopped,
-    ],
+    [dispatch, emitEvent, sendAction, sendAssertiveIfOpen, t],
   )
 
   const decrementCountdown = useCallback(() => {

package/src/javascripts/core/ui/hooks/use-session-expired-command.ts

@@ -1,8 +1,8 @@
-import { useEffect, useRef } from 'preact/hooks'
 import SeamlyGeneralError from 'api/errors/seamly-general-error'
 import { useInterrupt } from 'domains/interrupt/hooks'
 import { setInterrupt } from 'domains/interrupt/slice'
 import { useAppDispatch } from 'domains/store'
+import { useEffect, useRef } from 'preact/hooks'
 import useSeamlyCommands from './use-seamly-commands'
 
 export default function useSessionExpiredCommand() {

package/src/javascripts/core/ui/hooks/use-single-file-upload.ts

@@ -1,6 +1,6 @@
-import { useSelector } from 'react-redux'
 import { getControlValueByName } from 'domains/forms/selectors'
 import { CurrentUpload } from 'domains/store/store.types'
+import { useSelector } from 'react-redux'
 import { useFileUploads } from './seamly-hooks'
 
 const useSingleFileUpload = (formId, name) => {

package/src/javascripts/core/ui/hooks/utility-hooks.ts

@@ -1,10 +1,9 @@
-import { useCallback, useReducer, useState } from 'preact/hooks'
 import { randomId } from 'lib/id'
+import { useCallback, useReducer, useState } from 'preact/hooks'
 
 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 [_, forceUpdate] = useReducer((x) => x + 1, 0)
 
   return useCallback(() => {

package/src/javascripts/core/ui/utils/seamly-utils.ts

@@ -16,7 +16,6 @@ export const payloadTypes = {
   message: 'message',
   countdown: 'countdown',
   upload: 'upload',
-  cta: 'cta',
   splash: 'splash',
 }
 
@@ -43,7 +42,6 @@ export const actionTypes = {
   setTopic: 'set_topic',
   setTranslation: 'set_translation',
   setContext: 'set_context',
-  clickCta: 'click_cta',
   clickCard: 'click_card',
 }
 

package/src/javascripts/core/ui/utils/validations.ts

@@ -11,13 +11,12 @@ export const validateFileSize = (fileList, maxSize) => {
 
 export const fileListObjectIsNotEmpty = (fileListObj) => !!fileListObj?.length
 
-/* eslint-disable no-control-regex */
 export const isEmailString = (val) => {
   const regex =
+    // eslint-disable-next-line no-control-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

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

@@ -1,10 +1,10 @@
-import { FC } from 'preact/compat'
-import { useCallback, useEffect, useState } from 'preact/hooks'
 import {
   randomId,
   getSearchParamsByKeys,
   getUrlSearchParams,
 } from '@seamly/web-ui'
+import { FC } from 'preact/compat'
+import { useCallback, useEffect, useState } from 'preact/hooks'
 import { getStateObj } from '../states'
 import StyleGuideLinks from './links'
 import StyleGuideView from './view'

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

@@ -1,6 +1,4 @@
 import { configureStore } from '@reduxjs/toolkit'
-import { FC } from 'preact/compat'
-import { useMemo, useRef } from 'preact/hooks'
 import {
   ComponentFilter,
   SeamlyApiContext,
@@ -28,6 +26,8 @@ import {
   visibilityReducer,
   SeamlyActivityEventContext,
 } from '@seamly/web-ui'
+import { FC } from 'preact/compat'
+import { useMemo, useRef } from 'preact/hooks'
 
 const bareApi = {
   send: () => {

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

@@ -1,5 +1,5 @@
-import { useEffect, useState } from 'preact/hooks'
 import { View, timeout } from '@seamly/web-ui'
+import { useEffect, useState } from 'preact/hooks'
 import StyleGuideStaticCore from './static-core'
 
 const StyleGuideView = ({

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

@@ -9,7 +9,6 @@ export const payloadTypes = {
   message: 'message',
   countdown: 'countdown',
   upload: 'upload',
-  cta: 'cta',
 }
 const defaultTranslatedBody = {
   direction: 'to_translation_locale',
@@ -20,7 +19,6 @@ const defaultTranslatedBody = {
 
 export function addTranslationData(event) {
   switch (event.payload.type) {
-    case payloadTypes.cta:
     case payloadTypes.image:
     case payloadTypes.text:
     case payloadTypes.choicePrompt: