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

package/src/javascripts/ui/utils/form-utils.js

@@ -1,150 +1,5 @@
-export const formActions = {
-  REGISTER_FORM: 'REGISTER_FORM',
-  DE_REGISTER_FORM: 'DE_REGISTER_FORM',
-  REGISTER: 'REGISTER',
-  DE_REGISTER: 'DEREGISTER',
-  SET_VALUE: 'SET_VALUE',
-  SET_VALIDITY: 'SET_VALIDITY',
-  SET_STATE: 'SET_STATE',
-  SET_SUBMITTED: 'SET_SUBMITTED',
-  SET_PERSIST_FORM_DATA: 'SET_PERSIST_FORM_DATA',
-}
-
-const {
-  REGISTER_FORM,
-  DE_REGISTER_FORM,
-  REGISTER,
-  DE_REGISTER,
-  SET_VALUE,
-  SET_VALIDITY,
-  SET_STATE,
-  SET_SUBMITTED,
-  SET_PERSIST_FORM_DATA,
-} = formActions
-
 export const getValidator = (fn, errorText, compareValue = null) => ({
   fn,
   errorText,
   compareValue,
 })
-
-export const formReducer = (state, action) => {
-  const {
-    formId,
-    name,
-    controlId,
-    value,
-    data,
-    validity,
-    errorText,
-    hasSubmitted,
-    persistData,
-  } = action
-
-  const setControls = (controls) => ({
-    ...state,
-    [formId]: {
-      ...state[formId],
-      controls: {
-        ...state[formId].controls,
-        ...controls,
-      },
-    },
-  })
-
-  switch (action.type) {
-    case REGISTER_FORM:
-      return {
-        [formId]: {
-          controls: {},
-          validity: true,
-          hasSubmitted: false,
-          persistData: false,
-        },
-        ...state,
-      }
-    case DE_REGISTER_FORM:
-      const removedFormState = { ...state }
-      delete removedFormState[formId]
-      return removedFormState
-    case REGISTER:
-      const {
-        value: existingValue,
-        validity: existingValidity,
-        errorText: existingErrorText,
-      } = state[formId].controls[name] || {}
-
-      return setControls({
-        [name]: {
-          controlId,
-          value: existingValue || value,
-          validity: existingValidity !== false,
-          errorText: existingErrorText || '',
-        },
-      })
-    case DE_REGISTER:
-      const relatedForm = state[formId]
-      if (!relatedForm) {
-        return state
-      }
-      const newControls = { ...relatedForm.controls }
-      delete newControls[action.name]
-      return { ...state, [formId]: { ...relatedForm, controls: newControls } }
-    case SET_VALUE:
-      return setControls({
-        [name]: {
-          ...state[formId].controls[name],
-          value,
-        },
-      })
-    case SET_VALIDITY:
-      const newControlValidities = {
-        ...state[formId].controls,
-        [name]: {
-          ...state[formId].controls[name],
-          validity,
-          errorText,
-        },
-      }
-      return {
-        ...state,
-        [formId]: {
-          ...state[formId],
-          controls: newControlValidities,
-          validity: Object.keys(newControlValidities)
-            .map((key) => newControlValidities[key].validity)
-            .every((v) => v),
-        },
-      }
-    case SET_STATE:
-      return {
-        ...state,
-        [formId]: {
-          ...state[formId],
-          controls: Object.keys(data).reduce(
-            (acc, key) => {
-              return {
-                ...acc,
-                [key]: {
-                  ...state[formId].controls[key],
-                  value: data[key],
-                  validity: true,
-                  errorText: '',
-                },
-              }
-            },
-            { ...state.controls },
-          ),
-        },
-      }
-    case SET_SUBMITTED:
-      return { ...state, [formId]: { ...state[formId], hasSubmitted } }
-    case SET_PERSIST_FORM_DATA:
-      return {
-        ...state,
-        [formId]: { ...state[formId], persistData },
-      }
-    default:
-      return state
-  }
-}

package/src/javascripts/ui/utils/general-utils.js

@@ -1,13 +1,12 @@
 export const debounce = (func, wait) => {
   let timeout
   return function (...args) {
-    const context = this
     let isCancelled = false
     clearTimeout(timeout)
     timeout = setTimeout(() => {
       timeout = null
       if (!isCancelled) {
-        func.apply(context, args)
+        func.apply(this, args)
       }
       isCancelled = false
     }, wait)
@@ -15,7 +14,7 @@ export const debounce = (func, wait) => {
     return (runInstant) => {
       isCancelled = true
       if (runInstant) {
-        func.apply(context, args)
+        func.apply(this, args)
       }
     }
   }
@@ -103,7 +102,7 @@ export const formatBytes = (bytes, decimals = 2) => {
 
   const i = Math.floor(Math.log(bytes) / Math.log(k))
 
-  return parseFloat((bytes / k ** i).toFixed(dm)) + ' ' + sizes[i]
+  return `${parseFloat((bytes / k ** i).toFixed(dm))} ${sizes[i]}`
 }
 
 export const getUrlParams = () => {

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

@@ -0,0 +1,73 @@
+export const eventTypes = {
+  info: 'info',
+  message: 'message',
+  participant: 'participant',
+  system: 'system',
+} as const
+
+export const payloadTypes = {
+  choicePrompt: 'choice_prompt',
+  text: 'text',
+  image: 'image',
+  video: 'video',
+  participant: 'participant',
+  divider: 'divider',
+  translation: 'translation',
+  message: 'message',
+  countdown: 'countdown',
+  upload: 'upload',
+  cta: 'cta',
+  splash: 'splash',
+}
+
+export const entryTypes = {
+  text: 'text',
+  upload: 'upload',
+}
+
+export const readStates = {
+  received: 'received',
+  read: 'read',
+}
+
+export const actionTypes = {
+  pickChoice: 'pick_choice',
+  navigate: 'navigate',
+  custom: 'custom',
+  typing: 'typing',
+  read: 'read',
+  detachService: 'detach_service',
+  interactivityUpdate: 'interactivity_update',
+  dismiss: 'dismiss',
+  sendTranscript: 'send_transcript',
+  setTopic: 'set_topic',
+  setTranslation: 'set_translation',
+  clickCta: 'click_cta',
+  clickCard: 'click_card',
+}
+
+export const dismissTypes = {
+  resumeConversationPrompt: 'resume_conversation_prompt',
+}
+
+export const ariaLiveLevels = {
+  assertive: 'assertive',
+  polite: 'polite',
+}
+
+export const dividerKeys = {
+  new_topic: 'newTopic',
+  new_translation: 'newTranslation',
+}
+
+export const featureKeys = {
+  sendTranscript: 'sendTranscript',
+  typingPeekahead: 'typingPeekahead',
+  uploads: 'uploads',
+}
+
+export const cardTypes = {
+  ask: 'ask',
+  navigate: 'navigate',
+  topic: 'topic',
+}

package/src/stylesheets/5-components/_message-carousel.scss

@@ -41,6 +41,7 @@
 .#{$n}-carousel-controls {
   display: flex;
   position: relative;
+  align-items: center;
   justify-content: space-between;
   width: 100%;
   height: fit-content;
@@ -51,6 +52,7 @@
 /* stylelint-disable no-descending-specificity */
 .#{$n}-carousel-controls .#{$n}-button {
   display: flex;
+  flex: 0 0 $buttonsize;
   align-items: center;
   justify-content: center;
   width: $buttonsize;
@@ -89,21 +91,21 @@
   padding: 0 $spacer * 0.5;
 }
 
-.#{$n}-carousel-pagination {
+.#{$n}-carousel-pagination__wrapper {
   display: flex;
   position: relative;
   flex-direction: row;
   justify-content: center;
-  width: 100%;
-  margin: 0 auto;
-  padding: 0;
 }
 
-.#{$n}-carousel-pagination__wrapper {
+.#{$n}-carousel-pagination {
   display: flex;
   position: relative;
-  flex-direction: row;
+  flex-flow: row wrap;
   justify-content: center;
+  width: 100%;
+  margin: 0 auto;
+  padding: 0;
 }
 
 .#{$n}-carousel-pagination__item {
@@ -114,8 +116,8 @@
 .#{$n}-carousel-pagination__button {
   display: block;
   position: relative;
-  width: $buttonsize-small;
-  height: $buttonsize-small;
+  width: $buttonsize-small * 0.75;
+  height: $buttonsize-small * 0.75;
   padding: 0;
   border: 0;
   border-radius: 0;

package/webpack/config.common.js

@@ -51,6 +51,7 @@ module.exports = (env = {}, argv = {}, configOverrides = {}) => {
       publicPath: PUBLIC_PATH,
     },
     resolve: {
+      extensions: ['.js', '.ts', '.tsx'],
       modules: [path.resolve(__dirname, '../src/javascripts'), 'node_modules'],
       alias: {
         ...ALIASSES,
@@ -116,6 +117,21 @@ module.exports = (env = {}, argv = {}, configOverrides = {}) => {
           exclude: /(doc-site[\\\/]+|node_modules|bower_components)/,
           use: ['style-loader', ...site.scssLoaders({ browsers: BROWSERS })],
         },
+        {
+          test: /\.tsx?$/,
+          loader: 'ts-loader',
+          exclude: /node_modules|\.d\.ts$/,
+          options: {
+            compilerOptions: {
+              outDir: 'build',
+              noEmit: false,
+            },
+          },
+        },
+        {
+          test: /\.d\.ts$/,
+          loader: 'ignore-loader',
+        },
       ],
     },
   }

package/webpack/config.dev.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
 const webpackMerge = require('webpack-merge').merge
 const site = require('@seamly/doc-site/lib/config/site')
 const defaultConfig = require('./defaults')

package/webpack/config.package.js

@@ -21,7 +21,6 @@ module.exports = (env = {}, argv = {}, configOverrides = {}) => {
     ROOT,
 
     BABEL_TRANSPILE_MODULES,
-
     BROWSERS,
   } = implConfig
 
@@ -52,11 +51,18 @@ module.exports = (env = {}, argv = {}, configOverrides = {}) => {
     ],
     resolve: {
       modules: [path.resolve(__dirname, '../src/javascripts'), 'node_modules'],
+      alias: {
+        react: 'preact/compat',
+        'react-dom/test-utils': 'preact/test-utils',
+        'react-dom': 'preact/compat', // Must be below test-utils
+        'react/jsx-runtime': 'preact/jsx-runtime',
+      },
+      extensions: ['.ts', '.tsx', '.js'],
     },
     module: {
       rules: [
         {
-          test: /\.js$/,
+          test: /\.(j|t)s$/,
           include: BABEL_TRANSPILE_MODULES.map((moduleName) =>
             path.resolve('node_modules', moduleName),
           ),
@@ -66,20 +72,35 @@ module.exports = (env = {}, argv = {}, configOverrides = {}) => {
           },
         },
         {
-          test: /\.js$/,
+          test: /\.(j|t)s$/,
           exclude: /(node_modules|bower_components)/,
           loader: 'babel-loader',
           options: {
             plugins: generateBabelLoaderPluginsPart(env, argv, implConfig),
           },
         },
+        {
+          test: /\.tsx?$/,
+          loader: 'ts-loader',
+          exclude: /node_modules|\.d\.ts$/,
+          options: {
+            compilerOptions: {
+              outDir: 'build',
+              noEmit: false,
+            },
+          },
+        },
+        {
+          test: /\.d\.ts$/,
+          loader: 'ignore-loader',
+        },
       ],
     },
   }
 
   const packageConfig = webpackMerge(baseConfig, {
     entry: {
-      index: path.join(SRC_ROOT, 'javascripts/index.js'),
+      index: path.join(SRC_ROOT, 'javascripts/index.ts'),
     },
   })
 
@@ -93,7 +114,7 @@ module.exports = (env = {}, argv = {}, configOverrides = {}) => {
 
   const styleguideConfig = webpackMerge(baseConfig, {
     entry: {
-      'style-guide': path.join(SRC_ROOT, 'javascripts/style-guide.js'),
+      'style-guide': path.join(SRC_ROOT, 'javascripts/style-guide.ts'),
     },
     externals: [/^@seamly\/web-ui(\/.*)?/i],
   })

package/webpack/defaults.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
 const path = require('path')
 
 const BABEL_TRANSPILE_MODULES = ['debug', 'superagent', 'phoenix']
@@ -10,7 +11,7 @@ const PUBLIC_ROOT = path.join(ROOT, 'public')
 const PUBLIC_TEST_ROOT = path.join(PUBLIC_ROOT, 'test')
 const PUBLIC_STYLEGUIDE_ROOT = path.join(PUBLIC_ROOT, 'style-guide')
 
-const PUBLIC_PATH = process.env['PUBLIC_PATH'] || '/'
+const PUBLIC_PATH = process.env.PUBLIC_PATH || '/'
 
 const ALIASSES = {
   '@seamly/web-ui$': path.resolve(SRC_ROOT, 'javascripts'),
@@ -40,7 +41,7 @@ const ALIASSES = {
   ),
   '@seamly/web-ui/style-guide$': path.resolve(
     SRC_ROOT,
-    'javascripts/style-guide.js',
+    'javascripts/style-guide.ts',
   ),
   '@seamly/web-ui/src/stylesheets/styles.scss': path.resolve(
     SRC_ROOT,
@@ -55,6 +56,10 @@ const ALIASSES = {
     'style-guide.scss',
   ),
   lib: path.resolve(SRC_ROOT, 'javascripts/lib/'),
+  react: 'preact/compat',
+  'react-dom/test-utils': 'preact/test-utils',
+  'react-dom': 'preact/compat', // Must be below test-utils
+  'react/jsx-runtime': 'preact/jsx-runtime',
 }
 
 module.exports = {

package/webpack/parts/babel-loader-browser-plugins.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
 const babelLoaderPlugins = require('./babel-loader-plugins')
 
 module.exports = (env, argv, config) => [

package/webpack/parts/dev-server.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
 const path = require('path')
 
 module.exports = (env, argv, { PUBLIC_PATH, SRC_ROOT }) => ({
@@ -13,9 +14,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/api/'),
+      domains: path.resolve(SRC_ROOT, 'javascripts/domains/'),
+      ui: path.resolve(SRC_ROOT, 'javascripts/ui/'),
     },
   },
 })