@seamly/web-ui 22.1.0-beta.1 → 22.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seamly/web-ui",
-  "version": "22.1.0-beta.1",
+  "version": "22.2.0",
   "main": "build/dist/lib/index.js",
   "types": "build/src/javascripts/index.d.ts",
   "module": "",
@@ -24,24 +24,24 @@
   "dependencies": {
     "@reduxjs/toolkit": "^1.9.5",
     "@ultraq/icu-message-formatter": "^0.12.0",
-    "core-js": "^3.30.2",
+    "core-js": "^3.31.1",
     "deep-keys": "^0.5.0",
-    "focus-trap": "^7.4.3",
+    "focus-trap": "^7.5.2",
     "include-media": "^2.0.0",
     "js-cookie": "^3.0.5",
     "minivents": "^2.2.1",
-    "phoenix": "^1.7.3",
-    "react-redux": "^8.0.7"
+    "phoenix": "^1.7.6",
+    "react-redux": "^8.1.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.22.1",
-    "@babel/plugin-transform-react-jsx": "^7.22.3",
-    "@babel/plugin-transform-runtime": "^7.22.4",
-    "@babel/preset-env": "^7.22.4",
-    "@babel/preset-react": "^7.22.3",
-    "@babel/preset-typescript": "^7.21.5",
-    "@babel/runtime-corejs3": "^7.22.3",
-    "@playwright/test": "^1.34.3",
+    "@babel/core": "^7.22.6",
+    "@babel/plugin-transform-react-jsx": "^7.22.5",
+    "@babel/plugin-transform-runtime": "^7.22.6",
+    "@babel/preset-env": "^7.22.6",
+    "@babel/preset-react": "^7.22.5",
+    "@babel/preset-typescript": "^7.22.5",
+    "@babel/runtime-corejs3": "^7.22.6",
+    "@playwright/test": "^1.35.1",
     "@seamly/doc-site": "^2.0.0",
     "@seamly/eslint-config": "^2.3.0",
     "@seamly/prettier-config": "^2.2.0",
@@ -52,52 +52,52 @@
     "@types/core-js": "^2.5.5",
     "@types/jest": "^29.5.2",
     "@types/phoenix": "^1.6.0",
-    "@typescript-eslint/eslint-plugin": "^5.59.8",
-    "@typescript-eslint/parser": "^5.59.8",
-    "babel-jest": "^29.5.0",
+    "@typescript-eslint/eslint-plugin": "^5.61.0",
+    "@typescript-eslint/parser": "^5.61.0",
+    "babel-jest": "^29.6.0",
     "babel-loader": "^9.1.2",
     "babel-plugin-istanbul": "^6.1.1",
     "babel-plugin-react-remove-properties": "^0.3.0",
     "copy-webpack-plugin": "^11.0.0",
     "debug": "^4.3.4",
-    "eslint": "^8.41.0",
+    "eslint": "^8.44.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-import-resolver-alias": "^1.1.2",
     "eslint-import-resolver-typescript": "^3.5.5",
     "eslint-plugin-filenames": "^1.3.2",
     "eslint-plugin-import": "^2.27.5",
-    "eslint-plugin-jest": "^27.2.1",
+    "eslint-plugin-jest": "^27.2.2",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "file-loader": "^6.2.0",
     "fork-ts-checker-webpack-plugin": "^8.0.0",
-    "glob": "^10.2.6",
+    "glob": "^10.3.1",
     "husky": "^8.0.3",
     "ignore-loader": "^0.1.2",
     "isomorphic-unfetch": "^4.0.2",
-    "jest": "^29.5.0",
-    "jest-environment-jsdom": "^29.5.0",
+    "jest": "^29.6.0",
+    "jest-environment-jsdom": "^29.6.0",
     "jest-watch-typeahead": "^2.2.2",
     "mini-css-extract-plugin": "^2.7.6",
     "nyc": "^15.1.0",
     "playwright-test-coverage": "^1.2.12",
     "postcss": "^8.4.24",
     "preact": "^10.15.1",
-    "preact-render-to-string": "^6.0.3",
+    "preact-render-to-string": "^6.1.0",
     "prettier": "^2.8.8",
     "raw-loader": "^4.0.2",
     "rimraf": "^5.0.1",
     "start-server-and-test": "^2.0.0",
     "style-loader": "^3.3.3",
-    "stylelint": "^15.6.2",
-    "ts-loader": "^9.4.3",
-    "typescript": "^5.0.4",
+    "stylelint": "^15.10.1",
+    "ts-loader": "^9.4.4",
+    "typescript": "^5.1.6",
     "url-loader": "^4.1.1",
-    "webpack": "^5.85.0",
+    "webpack": "^5.88.1",
     "webpack-bundle-analyzer": "^4.9.0",
-    "webpack-cli": "^5.1.1",
-    "webpack-dev-server": "^4.15.0",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^4.15.1",
     "webpack-merge": "^5.9.0"
   },
   "resolutions": {

package/src/javascripts/api/index.ts

@@ -608,7 +608,19 @@ export class API {
       return
     }
 
-    this.send('context', payload, false)
+    // Destructure the server locale from the payload
+    const { locale: _, ...restPayload } = payload
+    const configLocale = this.#config.context?.locale
+
+    this.send(
+      'context',
+      {
+        // Only send locale if explicitly set in the config.
+        ...(configLocale ? { locale: configLocale } : {}),
+        ...restPayload,
+      },
+      false,
+    )
   }
 
   #getEnvironment() {

package/src/javascripts/domains/config/slice.ts

@@ -103,6 +103,7 @@ export const configSlice = createSlice({
               agentParticipant,
               userParticipant,
               startChatIcon,
+              locale,
             },
           },
         ) => {
@@ -110,7 +111,7 @@ export const configSlice = createSlice({
             type: 'message',
             payload,
           }))
-
+          state.context.locale = locale
           state.agentParticipant = agentParticipant
           state.userParticipant = userParticipant
           state.startChatIcon = startChatIcon

package/src/javascripts/domains/forms/selectors.ts

@@ -1,14 +1,14 @@
 import { createSelector } from '@reduxjs/toolkit'
+import type { RootState } from 'domains/store'
 
-export const getState = ({ forms }) => forms
+const getState = ({ forms }: RootState) => forms
 
 export const getFormById = createSelector(
-  getState,
-  (_, { formId }) => formId,
+  [getState, (_, { formId }): string => formId],
   (forms, formId) => forms[formId],
 )
 
-export const getFormControlsByFormId = createSelector(
+const getFormControlsByFormId = createSelector(
   getFormById,
   (form) => form?.controls || {},
 )
@@ -26,13 +26,11 @@ export const getFormValuesByFormId = createSelector(
 )
 
 export const getControlValueByName = createSelector(
-  getFormControlsByFormId,
-  (_, { name }) => name,
+  [getFormControlsByFormId, (_, { name }): string => name],
   (controls, name) => controls[name]?.value,
 )
 
 export const getControlTouchedByName = createSelector(
-  getFormControlsByFormId,
-  (_, { name }) => name,
+  [getFormControlsByFormId, (_, { name }): string => name],
   (controls, name) => controls[name]?.touched,
 )

package/src/javascripts/domains/forms/slice.ts

@@ -2,7 +2,7 @@ import { createSlice } from '@reduxjs/toolkit'
 import { resetApp } from 'domains/app/actions'
 import { ControlState } from 'domains/forms/forms.types'
 
-const initialFormState = {
+const initialFormState: Record<string, ControlState> = {
   controls: {},
 }
 

package/src/javascripts/domains/translations/components/options-dialog/translation-option.tsx

@@ -8,6 +8,7 @@ type TranslationOptionProps = {
   description?: string
   onChange: () => void
   id: string
+  itemClassName?: string
 }
 
 const TranslationOption: FC<TranslationOptionProps> = ({
@@ -16,6 +17,7 @@ const TranslationOption: FC<TranslationOptionProps> = ({
   description,
   onChange,
   id,
+  itemClassName,
 }) => {
   const onKeyDown = (e: KeyboardEvent) => {
     if (e.code === 'Space' || e.code === 'Enter') {
@@ -26,7 +28,7 @@ const TranslationOption: FC<TranslationOptionProps> = ({
 
   return (
     <li
-      className={className('translation-options__item')}
+      className={className([itemClassName, 'translation-options__item'])}
       aria-selected={checked}
       role="option"
       tabIndex={0}

package/src/javascripts/domains/translations/components/options-dialog/translation-options.tsx

@@ -1,5 +1,4 @@
-import { FC } from 'preact/compat'
-import { useMemo } from 'preact/hooks'
+import { FC, useMemo } from 'preact/compat'
 import { useConfig } from 'domains/config/hooks'
 import { useI18n } from 'domains/i18n/hooks'
 import TranslationOption from 'domains/translations/components/options-dialog/translation-option'
@@ -15,6 +14,9 @@ type TranslationOptionsProps = {
   describedById?: string
 }
 
+const isChecked = (language, currentLocale, isOriginal): boolean =>
+  currentLocale === language.locale || (!currentLocale && isOriginal)
+
 const TranslationOptions: FC<TranslationOptionsProps> = ({
   onChange,
   describedById,
@@ -28,29 +30,45 @@ const TranslationOptions: FC<TranslationOptionsProps> = ({
   const { languages, currentLocale, enableTranslations, disableTranslations } =
     useTranslations()
 
-  const handleChange =
-    ({ locale }: Language) =>
-    () => {
-      if (locale === currentLocale || defaultLocale === locale) {
-        disableTranslations()
-      } else {
-        enableTranslations(locale)
-      }
-
-      onChange()
-      focusContainer()
+  const handleChange = (locale: Language['locale']) => () => {
+    if (locale === currentLocale || defaultLocale === locale) {
+      disableTranslations()
+    } else {
+      enableTranslations(locale)
     }
 
-  const sortedLanguages = useMemo(() => {
-    return [...languages].sort((a, b) => {
-      if (a.locale === defaultLocale) return -1
-      if (b.locale === defaultLocale) return 1
+    onChange()
+    focusContainer()
+  }
+
+  const { primaryLanguages, remainingLanguages } = useMemo(
+    () =>
+      languages.reduce(
+        (acc, language) => {
+          const isOriginal = language.locale === defaultLocale
+          const checked = isChecked(language, currentLocale, isOriginal)
+
+          if (language.locale !== defaultLocale) {
+            acc.remainingLanguages.push({ ...language, checked, isOriginal })
+          }
+
+          const selectedIdx = acc.remainingLanguages.findIndex(
+            (l) => l.locale === currentLocale,
+          )
 
-      return a.nativeName.localeCompare(b.nativeName, undefined, {
-        sensitivity: 'base',
-      })
-    })
-  }, [languages, defaultLocale])
+          if (isOriginal || (checked && selectedIdx > 4)) {
+            acc.primaryLanguages.push({ ...language, checked, isOriginal })
+          }
+
+          return acc
+        },
+        {
+          primaryLanguages: [],
+          remainingLanguages: [],
+        },
+      ),
+    [currentLocale, defaultLocale, languages],
+  )
 
   return (
     <ul
@@ -59,23 +77,32 @@ const TranslationOptions: FC<TranslationOptionsProps> = ({
       tabIndex={-1}
       className={className('translation-options')}
     >
-      {sortedLanguages.map((language, idx) => {
-        const isOriginal = idx === 0
-
-        const checked =
-          currentLocale === language.locale || (!currentLocale && isOriginal)
-
-        return (
+      {primaryLanguages.map(
+        ({ locale, nativeName, checked, isOriginal }, idx) => (
           <TranslationOption
-            key={language.locale}
-            id={language.locale}
-            label={language.nativeName}
+            key={locale}
+            id={locale}
+            label={nativeName}
             checked={checked}
             description={isOriginal && t('translations.settings.original')}
-            onChange={handleChange(language)}
+            onChange={handleChange(locale)}
+            itemClassName={className({
+              'translation-options__item--original': isOriginal,
+              'translation-options__item--selected': checked && idx !== 0,
+            })}
           />
-        )
-      })}
+        ),
+      )}
+      {remainingLanguages.map(({ locale, nativeName, checked, isOriginal }) => (
+        <TranslationOption
+          key={locale}
+          id={locale}
+          label={nativeName}
+          checked={checked}
+          description={isOriginal && t('translations.settings.original')}
+          onChange={handleChange(locale)}
+        />
+      ))}
     </ul>
   )
 }

package/src/javascripts/domains/translations/slice.ts

@@ -100,7 +100,14 @@ export const translationSlice = createSlice({
         if (!feature) return
 
         state.isAvailable = feature.enabled === true
-        state.languages = feature.languages
+        state.languages = [...feature.languages].sort((a, b) => {
+          if (a.locale === payload.locale) return -1
+          if (b.locale === payload.locale) return 1
+
+          return a.nativeName.localeCompare(b.nativeName, undefined, {
+            sensitivity: 'base',
+          })
+        })
       })
       .addCase(setHistory, (state, { payload }) => {
         state.translationProposal = payload.translationProposal

package/src/javascripts/lib/engine/index.tsx

@@ -85,7 +85,9 @@ export default class Engine {
     await store.dispatch(initializeConfig())
     try {
       const { locale } = await store.dispatch(initializeApp()).unwrap()
-      await store.dispatch(setLocale(locale))
+      if (locale) {
+        await store.dispatch(setLocale(locale))
+      }
     } catch (rejectedValueOrSerializedError) {
       // nothing to do
     }

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

@@ -1644,6 +1644,53 @@ const standardState = {
       ],
     },
   },
+  translationsActiveLarge: {
+    category: categoryKeys.translations,
+    headingText: 'Show translations active (large list)',
+    description: '',
+    ...baseState,
+    config: {
+      ...baseState.config,
+      context: {
+        ...baseState.context,
+        locale: 'nl',
+      },
+    },
+    translations: {
+      ...translationsSlice,
+      currentLocale: 'lv',
+      isActive: true,
+      isAvailable: true,
+      languages: [
+        { locale: 'nl', nativeName: 'Dutch' },
+        { locale: 'en', nativeName: 'English' },
+        { locale: 'ar', nativeName: 'Arabic' },
+        { locale: 'bg', nativeName: 'Bulgarian' },
+        { locale: 'zh', nativeName: 'Chinese' },
+        { locale: 'cs', nativeName: 'Czech' },
+        { locale: 'da', nativeName: 'Danish' },
+        { locale: 'et', nativeName: 'Estonian' },
+        { locale: 'fi', nativeName: 'Finnish' },
+        { locale: 'fr', nativeName: 'French' },
+        { locale: 'de-informal', nativeName: 'German' },
+        { locale: 'el', nativeName: 'Greek' },
+        { locale: 'hu', nativeName: 'Hungarian' },
+        { locale: 'it', nativeName: 'Italian' },
+        { locale: 'ja', nativeName: 'Japanese' },
+        { locale: 'lv', nativeName: 'Latvian' },
+        { locale: 'pl', nativeName: 'Polish' },
+        { locale: 'ro', nativeName: 'Romanian' },
+        { locale: 'ru', nativeName: 'Russian' },
+        { locale: 'sk', nativeName: 'Slovak' },
+        { locale: 'sl', nativeName: 'Slovenian' },
+        { locale: 'es-informal', nativeName: 'Spanish' },
+        { locale: 'sv', nativeName: 'Swedish' },
+        { locale: 'ti', nativeName: 'Tigrinya' },
+        { locale: 'tr', nativeName: 'Turkish' },
+        { locale: 'uk', nativeName: 'Ukrainian' },
+      ],
+    },
+  },
   translationsFullConversation: {
     category: categoryKeys.translations,
     headingText: 'Show translated messages',

package/src/javascripts/ui/components/entry/text-entry/hooks.ts

@@ -82,8 +82,8 @@ export const useEntryTextTranslation = (controlName: ControlState['name']) => {
     [t, hasCharacterLimit, characterLimit, text?.label],
   )
 
-  const labelClass: string = useMemo(
-    () => (text?.label ? 'input__label' : 'visually-hidden'),
+  const labelClass = useMemo(
+    () => (text?.label ? 'label' : 'visually-hidden'),
     [text?.label],
   )
 

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

@@ -1,11 +1,21 @@
+import { FC } from 'preact/compat'
 import { className } from 'lib/css'
 import Error from './error'
 
-const FormControlWrapper = ({
+type FormControlWrapperProps = {
+  contentHint: string
+  id: string
+  labelText: string
+  labelClass: string
+  validity: boolean
+  errorText: unknown
+}
+
+const FormControlWrapper: FC<FormControlWrapperProps> = ({
   contentHint,
   id,
   labelText,
-  labelClass = className('label'),
+  labelClass,
   validity,
   errorText,
   children,
@@ -24,7 +34,7 @@ const FormControlWrapper = ({
       <Error id={`${id}-error`} error={!validity && errorText} />
 
       <div className={className('form-control__wrapper')}>
-        <label htmlFor={id} className={labelClass}>
+        <label htmlFor={id} className={className(labelClass)}>
           {labelText}
         </label>
         {children}

package/src/stylesheets/5-components/_input.scss

@@ -25,11 +25,6 @@
   width: 100%;
 }
 
-.#{$n}-input__label {
-  font-size: $fontsize-medium;
-  font-weight: $fontweight-bold;
-}
-
 .#{$n}-input__text {
   appearance: none;
   flex-grow: 4;

package/src/stylesheets/5-components/_options.scss

@@ -215,9 +215,9 @@
   &:last-child::after {
     content: '';
     display: block;
-    flex: 0 0 $spacer;
+    flex: 0 0 $spacer * 0.5;
     width: 100%;
-    height: $spacer;
+    height: $spacer * 0.5;
   }
 }
 

package/src/stylesheets/5-components/_translation-options.scss

@@ -1,7 +1,6 @@
 .#{$n}-translation-options {
   display: flex;
   flex-direction: column;
-  gap: $spacer * 0.25;
   width: 100%;
   margin: 0;
 
@@ -10,12 +9,33 @@
   list-style: none;
 }
 
+.#{$n}-translation-options__item--selected {
+  margin-bottom: $spacer * 0.5;
+
+  &::after {
+    content: '';
+    display: block;
+    position: absolute;
+    bottom: $spacer * -0.5;
+    flex: 0 0 100%;
+    width: 100%;
+    height: 1px;
+    border-bottom: 1px solid $grey-b;
+  }
+
+  + .#{$n}-translation-options__item {
+    margin-top: $spacer * 0.5;
+  }
+}
+
 .#{$n}-translation-options__item {
   display: flex;
+  position: relative;
+  flex-flow: row wrap;
   align-items: center;
   gap: $spacer * 0.5;
   width: 100%;
-  padding: calc($spacer * 0.25) 0;
+  padding: $spacer * 0.5 0;
   color: $brand3;
   font-size: $fontsize-small;
   font-weight: $fontweight-bold;
@@ -25,7 +45,7 @@
     outline: -webkit-focus-ring-color auto 1px;
   }
 
-  > span {
+  span {
     margin-left: -0.5em;
   }