@seamly/web-ui 24.2.1 → 24.3.0-alpha.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seamly/web-ui",
-  "version": "24.2.1",
+  "version": "24.3.0-alpha.2",
   "main": "build/dist/lib/index.js",
   "types": "build/src/javascripts/index.d.ts",
   "exports": {
@@ -21,22 +21,22 @@
     "webpack/*"
   ],
   "dependencies": {
-    "@reduxjs/toolkit": "^2.4.0",
+    "@reduxjs/toolkit": "^2.5.1",
     "@ultraq/icu-message-formatter": "^0.14.3",
-    "core-js": "^3.37.1",
-    "focus-trap": "^7.6.2",
+    "core-js": "^3.40.0",
+    "focus-trap": "^7.6.4",
     "include-media": "^2.0.0",
     "js-cookie": "^3.0.5",
     "minivents": "^2.2.1",
-    "react-redux": "^9.1.2",
+    "react-redux": "^9.2.0",
     "reconnecting-websocket": "^4.4.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.26.0",
-    "@babel/preset-env": "^7.26.0",
+    "@babel/core": "^7.26.7",
+    "@babel/preset-env": "^7.26.7",
     "@babel/preset-react": "^7.26.3",
     "@babel/preset-typescript": "^7.26.0",
-    "@playwright/test": "^1.49.0",
+    "@playwright/test": "^1.50.1",
     "@seamly/doc-site": "^4.0.0",
     "@seamly/eslint-config": "^3.1.0",
     "@seamly/prettier-config": "^3.1.0",
@@ -45,8 +45,8 @@
     "@testing-library/preact": "^3.2.4",
     "@types/core-js": "^2.5.8",
     "@types/jest": "^29.5.12",
-    "@typescript-eslint/eslint-plugin": "^8.17.0",
-    "@typescript-eslint/parser": "^8.17.0",
+    "@typescript-eslint/eslint-plugin": "^8.23.0",
+    "@typescript-eslint/parser": "^8.23.0",
     "babel-jest": "^29.7.0",
     "babel-loader": "^9.2.1",
     "copy-webpack-plugin": "^12.0.2",
@@ -56,9 +56,9 @@
     "eslint-import-resolver-typescript": "^3.7.0",
     "eslint-plugin-filenames": "^1.3.2",
     "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-jest": "^28.6.0",
-    "eslint-plugin-prettier": "^5.2.1",
-    "eslint-plugin-react": "^7.35.0",
+    "eslint-plugin-jest": "^28.11.0",
+    "eslint-plugin-prettier": "^5.2.3",
+    "eslint-plugin-react": "^7.37.4",
     "eslint-plugin-react-hooks": "^4.6.2",
     "file-loader": "^6.2.0",
     "fork-ts-checker-webpack-plugin": "^9.0.2",
@@ -74,11 +74,11 @@
     "prettier": "^3.4.2",
     "rimraf": "^6.0.1",
     "style-loader": "^4.0.0",
-    "stylelint": "^16.11.0",
-    "typescript": "^5.7.2",
-    "webpack": "^5.97.0",
+    "stylelint": "^16.14.1",
+    "typescript": "^5.7.3",
+    "webpack": "^5.97.1",
     "webpack-bundle-analyzer": "^4.10.2",
-    "webpack-cli": "^5.1.4",
+    "webpack-cli": "^6.0.1",
     "webpack-dev-server": "^5.1.0",
     "webpack-merge": "^6.0.1"
   },
@@ -110,8 +110,8 @@
     "check:eslint": "eslint --ext .js,.ts,.tsx, src/ webpack/",
     "check:prettier": "yarn run check:code && yarn run check:tests && yarn run check:public && yarn run check:webpack",
     "test": "jest",
-    "types:generate": "openapi-typescript schema/channel.yaml --output src/javascripts/api/channel.types.ts",
-    "types:generate-async": "openapi-typescript schema/asyncapi.yaml --output src/javascripts/api/asyncapi.types.ts",
+    "types:generate": "openapi-typescript schema/channel.yaml --output src/javascripts/core/api/channel.types.ts",
+    "types:generate-async": "openapi-typescript schema/asyncapi.yaml --output src/javascripts/core/api/asyncapi.types.ts",
     "test:coverage": "yarn run test --coverage",
     "test:e2e": "playwright test",
     "test:e2e:coverage": "yarn nyc report --reporter cobertura --reporter html",

package/src/javascripts/{index.ts → core/index.ts}

@@ -40,6 +40,9 @@ export {
 } from 'ui/hooks/seamly-hooks'
 // Used by: Demo
 export { default as EventParticipant } from 'ui/components/conversation/event/event-participant'
+export { default as appStorageProvider } from 'lib/store/providers/app-storage'
+export { default as cookieStorageProvider } from 'lib/store/providers/cookie-storage'
+export { default as sessionStorageProvider } from 'lib/store/providers/session-storage'
 
 // Used by: Client
 export { default as ComponentFilter } from 'ui/components/conversation/component-filter'
@@ -64,6 +67,38 @@ export { default as Engine } from 'lib/engine'
 export { default as ExternalApi } from 'lib/external-api'
 export { default as SeamlyFileUpload } from 'ui/components/core/seamly-file-upload'
 export { default as SeamlyActivityMonitor } from 'ui/components/core/seamly-activity-monitor'
+export { default as SeamlyActivityEventContext } from 'ui/components/core/seamly-activity-event-context'
+export { timeout } from 'ui/hooks/focus-helper-hooks'
+
+export { default as appReducer } from 'domains/app/slice'
+export {
+  default as configReducer,
+  setConfig,
+  setPreChatEvents,
+} from 'domains/config/slice'
+export { default as formsReducer } from 'domains/forms/slice'
+export type { I18nState } from 'domains/i18n/i18n.types'
+export {
+  default as i18nReducer,
+  setInitialLocale,
+  setTranslations,
+} from 'domains/i18n/slice'
+export { default as interruptReducer } from 'domains/interrupt/slice'
+export { default as stateReducer, setParticipant } from 'domains/store/slice'
+export type {
+  MessageParticipant,
+  StoreState,
+  ReduxStore,
+} from 'domains/store/store.types'
+export { default as translationReducer } from 'domains/translations/slice'
+export { default as visibilityReducer } from 'domains/visibility/slice'
+export {
+  getSearchParamsByKeys,
+  getUrlSearchParams,
+  getUrlSearchString,
+  initResetSearchParams,
+  replaceSearchParams,
+} from 'lib/url-helpers'
 
 // Used by: Client
 export default initializeExternalApi

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

@@ -0,0 +1,102 @@
+import { className as classNameFn } from 'lib/css'
+import iconAvatar32 from '../../../../../icons/avatar_bot-32.svg'
+import iconArrowLeft16 from '../../../../../icons/icon_arrow_left-16.svg'
+import iconArrowRight16 from '../../../../../icons/icon_arrow_right-16.svg'
+import iconBalloon32 from '../../../../../icons/icon_balloon-32.svg'
+import iconCheck16 from '../../../../../icons/icon_check-16.svg'
+import iconCheck32 from '../../../../../icons/icon_check-32.svg'
+import iconChevronDown32 from '../../../../../icons/icon_chevron_down-32.svg'
+import iconChevronDown8 from '../../../../../icons/icon_chevron_down-8.svg'
+import iconChevronRight16 from '../../../../../icons/icon_chevron_right-16.svg'
+import iconChevronRight8 from '../../../../../icons/icon_chevron_right-8.svg'
+import iconClose16 from '../../../../../icons/icon_close-16.svg'
+import iconClose8 from '../../../../../icons/icon_close-8.svg'
+import iconDownload16 from '../../../../../icons/icon_download-16.svg'
+import iconEnlarge32 from '../../../../../icons/icon_enlarge-32.svg'
+import iconError16 from '../../../../../icons/icon_error-16.svg'
+import iconFile32 from '../../../../../icons/icon_file-32.svg'
+import iconNewTopic32 from '../../../../../icons/icon_newtopic-32.svg'
+import iconNewTranslation16 from '../../../../../icons/icon_newtranslation-16.svg'
+import iconNewTranslation32 from '../../../../../icons/icon_newtranslation-32.svg'
+import iconOptions32 from '../../../../../icons/icon_options-32.svg'
+import iconSend32 from '../../../../../icons/icon_send-32.svg'
+import iconUpload32 from '../../../../../icons/icon_upload-32.svg'
+
+export const ICONS = {
+  send: {
+    32: iconSend32,
+  },
+  balloon: {
+    32: iconBalloon32,
+  },
+  newTopic: {
+    32: iconNewTopic32,
+  },
+  newTranslation: {
+    16: iconNewTranslation16,
+    32: iconNewTranslation32,
+  },
+  avatar: {
+    32: iconAvatar32,
+  },
+  chevronDown: {
+    8: iconChevronDown8,
+    32: iconChevronDown32,
+  },
+  chevronRight: {
+    8: iconChevronRight8,
+    16: iconChevronRight16,
+  },
+  close: {
+    8: iconClose8,
+    16: iconClose16,
+  },
+  enlarge: {
+    32: iconEnlarge32,
+  },
+  options: {
+    32: iconOptions32,
+  },
+  file: {
+    32: iconFile32,
+  },
+  upload: {
+    32: iconUpload32,
+  },
+  download: {
+    16: iconDownload16,
+  },
+  error: {
+    16: iconError16,
+  },
+  arrowLeft: {
+    16: iconArrowLeft16,
+  },
+  arrowRight: {
+    16: iconArrowRight16,
+  },
+  check: {
+    16: iconCheck16,
+    32: iconCheck32,
+  },
+} as const
+
+export type IconProps = {
+  name: keyof typeof ICONS | string
+  size?: '8' | '16' | '32'
+  className?: string
+  alt: string
+}
+
+const Icon = ({ name, size = '32', className, alt }: IconProps) => (
+  <>
+    <div
+      aria-hidden="true"
+      className={className || classNameFn('icon')}
+      dangerouslySetInnerHTML={{ __html: ICONS[name][size] }}
+    />
+    {alt && <span className={classNameFn('visually-hidden')}>{alt}</span>}
+  </>
+)
+
+export default Icon

package/src/javascripts/{ui → core/ui}/components/view/index.tsx

@@ -5,9 +5,9 @@ import { useUserHasResponded } from 'domains/app/hooks'
 import { useConfig } from 'domains/config/hooks'
 import { useI18n } from 'domains/i18n/hooks'
 import { selectLastUnreadEvent } from 'domains/store/selectors'
+import { useTranslatedEventData } from 'domains/translations/hooks'
 import { useVisibility } from 'domains/visibility/hooks'
 import { className } from 'lib/css'
-import { useTranslatedEventData } from 'package/hooks'
 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/{ui → core/ui}/hooks/event-bus-hooks.ts

@@ -1,5 +1,5 @@
 import { useContext } from 'preact/hooks'
-import { SeamlyEventBusContext } from 'package/contexts'
+import { SeamlyEventBusContext } from 'ui/components/core/seamly-api-context'
 
 const useSeamlyEventBusContext = () => {
   const eventBus = useContext(SeamlyEventBusContext)

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

@@ -1,10 +1,13 @@
 import { FC } from 'preact/compat'
 import { useCallback, useEffect, useState } from 'preact/hooks'
-import { randomId } from 'lib/id'
-import { getSearchParamsByKeys, getUrlSearchParams } from 'lib/url-helpers'
-import StyleGuideLinks from 'style-guide/components/links'
-import StyleGuideView from 'style-guide/components/view'
-import { getStateObj } from 'style-guide/states'
+import {
+  randomId,
+  getSearchParamsByKeys,
+  getUrlSearchParams,
+} from '@seamly/web-ui'
+import { getStateObj } from '../states'
+import StyleGuideLinks from './links'
+import StyleGuideView from './view'
 
 type HProps = {
   tag: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'

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

@@ -1,5 +1,5 @@
-import { getUrlSearchParams, getUrlSearchString } from 'lib/url-helpers'
-import { categories } from 'style-guide/states'
+import { getUrlSearchParams, getUrlSearchString } from '@seamly/web-ui'
+import { categories } from '../states'
 
 const StyleGuideLinks = ({ setSelectedState, states, headingLevel }) => {
   const CategoryHeading = `h${headingLevel.toString()}`

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

@@ -7,30 +7,27 @@ import {
   SeamlyEventBusContext,
   SeamlyLiveRegionContext,
   SeamlyStoreProvider,
-  SeamlyActivityMonitor,
   SeamlyFileUpload,
-} from '@seamly/web-ui'
-import appReducer from 'domains/app/slice'
-import configReducer, {
+  API,
+  configReducer,
+  appReducer,
   setConfig,
   setPreChatEvents,
-} from 'domains/config/slice'
-import formsReducer from 'domains/forms/slice'
-import { I18nState } from 'domains/i18n/i18n.types'
-import i18nReducer, {
+  formsReducer,
+  I18nState,
+  i18nReducer,
   setInitialLocale,
   setTranslations,
-} from 'domains/i18n/slice'
-import interruptReducer from 'domains/interrupt/slice'
-import stateReducer, { setParticipant } from 'domains/store/slice'
-import {
+  interruptReducer,
+  stateReducer,
+  setParticipant,
   MessageParticipant,
   StoreState,
   ReduxStore,
-} from 'domains/store/store.types'
-import translationReducer from 'domains/translations/slice'
-import visibilityReducer from 'domains/visibility/slice'
-import type API from 'api'
+  translationReducer,
+  visibilityReducer,
+  SeamlyActivityEventContext,
+} from '@seamly/web-ui'
 
 const bareApi = {
   send: () => {
@@ -140,9 +137,9 @@ const SeamlyStaticCore: FC<StaticCoreProps> = ({
           <SeamlyApiContext.Provider value={bareApi}>
             <SeamlyLiveRegionContext.Provider value={liveMsgRef.current}>
               <ComponentFilter>
-                <SeamlyActivityMonitor>
+                <SeamlyActivityEventContext.Provider value={() => {}}>
                   <SeamlyFileUpload>{children}</SeamlyFileUpload>
-                </SeamlyActivityMonitor>
+                </SeamlyActivityEventContext.Provider>
               </ComponentFilter>
             </SeamlyLiveRegionContext.Provider>
           </SeamlyApiContext.Provider>

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

@@ -1,7 +1,6 @@
 import { useEffect, useState } from 'preact/hooks'
-import { View } from '@seamly/web-ui'
-import StyleGuideStaticCore from 'style-guide/components/static-core'
-import { timeout } from 'ui/hooks/focus-helper-hooks'
+import { View, timeout } from '@seamly/web-ui'
+import StyleGuideStaticCore from './static-core'
 
 const StyleGuideView = ({
   state,

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

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

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

@@ -1,7 +1,9 @@
-import SeamlyGeneralError from 'api/errors/seamly-general-error'
-import SeamlyOfflineError from 'api/errors/seamly-offline-error'
-import { visibilityStates } from 'domains/visibility/constants'
-import { randomId } from 'lib/id'
+import {
+  visibilityStates,
+  SeamlyGeneralError,
+  SeamlyOfflineError,
+  randomId,
+} from '@seamly/web-ui'
 import { addTranslationData } from './state-helpers/index'
 
 const baseState = {

package/src/javascripts/style-guide/style-guide-engine.tsx

@@ -1,6 +1,5 @@
 import { render } from 'preact'
-import API from 'api'
-import Engine from 'lib/engine'
+import { Engine, API } from '@seamly/web-ui'
 import StyleGuideApp from './components/app'
 
 class SeamlyStyleGuideInstance extends Engine {

package/src/javascripts/style-guide/style-guide-external-api.ts

@@ -1,5 +1,5 @@
+import { ExternalApi } from '@seamly/web-ui'
 import { Config } from 'config.types'
-import ExternalApi from 'lib/external-api'
 import StyleGuideEngine from './style-guide-engine'
 
 class StyleGuideExternalApi extends ExternalApi {

package/webpack/config.package.js

@@ -57,7 +57,10 @@ module.exports = (env = {}, argv = {}, configOverrides = {}) => {
       new ForkTsCheckerWebpackPlugin(),
     ],
     resolve: {
-      modules: [path.resolve(__dirname, '../src/javascripts'), 'node_modules'],
+      modules: [
+        path.resolve(__dirname, '../src/javascripts/core'),
+        'node_modules',
+      ],
       alias: {
         react: 'preact/compat',
         'react-dom/test-utils': 'preact/test-utils',
@@ -111,7 +114,7 @@ module.exports = (env = {}, argv = {}, configOverrides = {}) => {
 
   const packageConfig = webpackMerge(baseConfig, {
     entry: {
-      index: path.join(SRC_ROOT, 'javascripts/index.ts'),
+      index: path.join(SRC_ROOT, 'javascripts/core/index.ts'),
     },
   })
 
@@ -125,60 +128,14 @@ module.exports = (env = {}, argv = {}, configOverrides = {}) => {
 
   const styleguideConfig = webpackMerge(baseConfig, {
     entry: {
-      'style-guide': path.join(SRC_ROOT, 'javascripts/style-guide.ts'),
+      'style-guide': path.join(SRC_ROOT, 'javascripts/style-guide/index.ts'),
     },
     externals: [/^@seamly\/web-ui(\/.*)?/i],
-  })
-  const externalsConfig = webpackMerge(baseConfig, {
-    entry: {
-      components: path.join(SRC_ROOT, 'javascripts/package/components.ts'),
-      config: path.join(SRC_ROOT, 'javascripts/package/config.ts'),
-      contexts: path.join(SRC_ROOT, 'javascripts/package/contexts.ts'),
-      hooks: path.join(SRC_ROOT, 'javascripts/package/hooks.ts'),
-      storage: path.join(SRC_ROOT, 'javascripts/package/storage.ts'),
-      utils: path.join(SRC_ROOT, 'javascripts/package/utils.ts'),
+    resolve: {
+      ...baseConfig.resolve,
     },
-    externals: [/^@seamly\/web-ui(\/.*)?/i],
   })
 
-  const standalonePackageConfig = {
-    ...packageConfig,
-    output: {
-      ...packageConfig.output,
-      library: {
-        ...packageConfig.output.library,
-        type: 'umd',
-      },
-    },
-    target: `browserslist:${BROWSERS}`,
-    entry: {
-      standalone: packageConfig.entry.index,
-    },
-    externals: {},
-    module: {
-      ...packageConfig.module,
-      rules: packageConfig.module.rules.map((rule) => {
-        if (rule.loader === 'babel-loader') {
-          rule = {
-            ...rule,
-            options: {
-              sourceType: 'unambiguous',
-              plugins: [
-                ...generateBabelLoaderBrowserPluginsPart(env, argv, implConfig),
-                [
-                  'react-remove-properties',
-                  { properties: ['data-testid', 'data-cy'] },
-                ],
-              ],
-              presets: babelLoaderPresets(BROWSERS),
-            },
-          }
-        }
-        return rule
-      }),
-    },
-  }
-
   const scssConfig = {
     output: {
       path: path.join(BUILD_ROOT, '/dist/lib'),
@@ -207,13 +164,7 @@ module.exports = (env = {}, argv = {}, configOverrides = {}) => {
     },
   }
 
-  const configs = [
-    packageConfig,
-    packageDebugConfig,
-    standalonePackageConfig,
-    styleguideConfig,
-    externalsConfig,
-  ]
+  const configs = [packageConfig, packageDebugConfig, styleguideConfig]
 
   const configsMinimized = configs.map((config) =>
     webpackMerge(config, {

package/webpack/defaults.js

@@ -14,34 +14,10 @@ const PUBLIC_STYLEGUIDE_ROOT = path.join(PUBLIC_ROOT, 'style-guide')
 const PUBLIC_PATH = process.env.PUBLIC_PATH || '/'
 
 const ALIASSES = {
-  '@seamly/web-ui$': path.resolve(SRC_ROOT, 'javascripts'),
-  '@seamly/web-ui/components$': path.resolve(
-    SRC_ROOT,
-    'javascripts/package/components.ts',
-  ),
-  '@seamly/web-ui/config': path.resolve(
-    SRC_ROOT,
-    'javascripts/package/config.ts',
-  ),
-  '@seamly/web-ui/contexts$': path.resolve(
-    SRC_ROOT,
-    'javascripts/package/contexts.ts',
-  ),
-  '@seamly/web-ui/hooks$': path.resolve(
-    SRC_ROOT,
-    'javascripts/package/hooks.ts',
-  ),
-  '@seamly/web-ui/storage$': path.resolve(
-    SRC_ROOT,
-    'javascripts/package/storage.ts',
-  ),
-  '@seamly/web-ui/utils$': path.resolve(
-    SRC_ROOT,
-    'javascripts/package/utils.ts',
-  ),
+  '@seamly/web-ui$': path.resolve(SRC_ROOT, 'javascripts/core'),
   '@seamly/web-ui/style-guide$': path.resolve(
     SRC_ROOT,
-    'javascripts/style-guide.ts',
+    'javascripts/style-guide',
   ),
   '@seamly/web-ui/src/stylesheets/styles.scss': path.resolve(
     SRC_ROOT,
@@ -55,7 +31,11 @@ const ALIASSES = {
     'stylesheets',
     'style-guide.scss',
   ),
-  lib: path.resolve(SRC_ROOT, 'javascripts/lib/'),
+  lib: path.resolve(SRC_ROOT, 'javascripts/core/lib/'),
+  ui: path.resolve(SRC_ROOT, 'javascripts/core/ui/'),
+  domains: path.resolve(SRC_ROOT, 'javascripts/core/domains/'),
+  api: path.resolve(SRC_ROOT, 'javascripts/core/api/'),
+  config: path.resolve(SRC_ROOT, 'javascripts/core/config.ts'),
   react: 'preact/compat',
   'react-dom/test-utils': 'preact/test-utils',
   'react-dom': 'preact/compat', // Must be below test-utils

package/webpack/parts/dev-server.js

@@ -15,9 +15,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/core/api/'),
+      domains: path.resolve(SRC_ROOT, 'javascripts/core/domains/'),
+      ui: path.resolve(SRC_ROOT, 'javascripts/core/ui/'),
     },
   },
 })