✨ #7 - Formio renderer: implement mechanism to provide translations.

src/components/textfield/textfield.component.tsx

@@ -1,5 +1,5 @@
 import { useHTMLRef } from '@hooks'
-import { OF_PREFIX } from '@lib'
+import { gettext, OF_PREFIX } from '@lib'
 import { ComponentProps } from '@types'
 import classNames from 'classnames'
 import React, { useState } from 'react'
@@ -18,7 +18,6 @@ export const TextField = ({
   components,
   ...props
 }: ComponentProps) => {
-  // {"label":"Text Field","prefix":"","suffix":""," "hideLabel":false,"description":"Lorem ipsum dolor sit amet","defaultValue":"Standaardwaarde","labelPosition":"top","showCharCount":true,"showWordCount":false,"customDefaultValue":""}
   const [pristineState, setPristineState] = useState<boolean>(true)
   const [charCountState, setCharCountState] = useState<number>(
     String(component.defaultValue).length
@@ -92,7 +91,7 @@ export const TextField = ({
   return (
     <div className={containerClassName} id={component.id} ref={componentRef} {...props}>
       <label className={labelClassName} htmlFor={inputAttrs.id}>
-        {component.label}&nbsp;
+        {gettext(component.label, renderConfiguration.i18n)}&nbsp;
       </label>
 
       <div ref={elementRef}>
@@ -105,19 +104,30 @@ export const TextField = ({
           {...callbacks}
         />
         {component.showCharCount && !pristineState && (
-          <span className='charcount'>{charCountState} karakters</span>
+          <span className='charcount'>
+            {gettext('{{ count }} characters', renderConfiguration.i18n, { count: charCountState })}
+          </span>
         )}
       </div>
 
-      <div className='openforms-help-text'>{component.description}</div>
+      <div className='openforms-help-text'>
+        {gettext(component.description, renderConfiguration.i18n)}
+      </div>
 
       <div
         aria-describedby={component.id}
         role='alert'
         className={errorsClassName}
         ref={messageContainerRef}
       >
-        {errors.map((error) => error)}
+        {errors.map((error, index) => {
+          return (
+            <React.Fragment key={error}>
+              {index > 0 && <br />}
+              {gettext(error, renderConfiguration.i18n)}
+            </React.Fragment>
+          )
+        })}
       </div>
     </div>
   )

src/index.tsx

@@ -2,7 +2,7 @@ import { Columns, Content, Form, TextField } from '@components'
 import { BaseRenderer } from '@lib'
 import { TreeConfiguration, RenderConfiguration } from '@types'
 
-export const DEFAULT_RENDER_CONFIGURATION: RenderConfiguration = {
+export const BASE_RENDER_CONFIGURATION: RenderConfiguration = {
   components: [
     {
       component: Form,
@@ -28,7 +28,7 @@ export const renderForm = ({
   callbacks = {},
   formErrors = {},
   form,
-  renderConfiguration = DEFAULT_RENDER_CONFIGURATION
+  renderConfiguration = BASE_RENDER_CONFIGURATION
 }: TreeConfiguration): React.ReactNode => {
   return renderConfiguration.renderer.renderTree({
     callbacks,

src/lib/i18n/gettext.ts

@@ -0,0 +1,28 @@
+import { I18N } from '@types'
+
+/**
+ * Returns translation for key based on locale in i18n.
+ * @param {string} [key]
+ * @param {I18N} [i18n]
+ * @param {{[index: string]: any}} context {{ placeholder }} replacements.
+ * @param {string} [locale] If omitted: an attempt is made to resolve a local from the browser.
+ */
+export const gettext = (
+  key: string = '',
+  i18n: I18N = {},
+  context: { [index: string]: any } = {},
+  locale: string = ''
+): string => {
+  const navigateLocales = navigator?.languages.map((locale) => locale.split('-')[0]) || []
+  const locales = [locale, ...navigateLocales, Object.keys(i18n)[0] || '']
+  const resolvedLocale = Object.keys(i18n).find((key) => locales.indexOf(key) > -1)
+  const dictionary = i18n[resolvedLocale as string] || {}
+  const translation = dictionary[key] || key
+
+  // Apply context.
+  return Object.entries(context).reduce(
+    (compiledTranslation, [key, value]) =>
+      compiledTranslation.replace(new RegExp(`{{\\s*?${key}\\s*?}}`, 'g'), String(value)),
+    translation
+  )
+}

src/lib/i18n/index.ts

@@ -0,0 +1 @@
+export * from './gettext'

src/lib/index.ts

@@ -1,4 +1,5 @@
 export * from './constants'
+export * from './i18n'
 export * from './renderer'
 export * from './utils'
 export * from './validation'

src/lib/validation/validation.ts

@@ -1,22 +1,31 @@
+import { gettext } from '../i18n'
+import { Component, I18N } from '@types'
+import { ValidateOptions } from 'formiojs'
+
 /**
  * Runs all frontend validators based on validate.
  * @param {boolean|number|string} value
- * @param {{maxLength: number, minLength: number, pattern: RegExp|string, required: boolean}} validate Form.io validation object.
+ * @param {Component} component
+ * @param {I18N} i18n
  * @throws {ValidationError[]} As promise rejection if invalid.
  * @return {Promise<boolean>} Promise for true if valid.
  */
 export const validate = async (
   value: boolean | number | string,
-  validate: { maxLength: number; minLength: number; pattern: RegExp | string; required: boolean }
+  component: Component,
+  i18n: I18N = {}
 ): Promise<boolean | void> => {
-  const { maxLength, minLength, pattern, required } = validate
+  const { maxLength, minLength, pattern, required } = component.validate as ValidateOptions
   const errors: ValidationError[] = []
 
+  const c = (e: ValidationError) => errors.push(e)
+  const ctx = { ...component.validate, field: gettext(component.label, i18n).toLowerCase() }
+
   const promises = [
-    await validateMaxLength(value, maxLength).catch((e) => errors.push(e)),
-    await validateMinLength(value, minLength).catch((e) => errors.push(e)),
-    await validatePattern(value, pattern).catch((e) => errors.push(e)),
-    await validateRequired(value, required).catch((e) => errors.push(e))
+    await validateMaxLength(value, maxLength as number, gettext('maxLength', i18n, ctx)).catch(c),
+    await validateMinLength(value, minLength as number, gettext('minLength', i18n, ctx)).catch(c),
+    await validatePattern(value, pattern as string, gettext('pattern', i18n, ctx)).catch(c),
+    await validateRequired(value, required as boolean, gettext('required', i18n, ctx)).catch(c)
   ]
 
   return Promise.all(promises).then(() => {
@@ -41,21 +50,21 @@ export class ValidationError extends Error {
  * Validates whether stringified value is at most maxLength characters.
  * @param {boolean|number|string} value Value to check.
  * @param {number|string} maxLength Maximum length.
+ * @param {string} message Message to show when invalid.
  * @throws {MaxLengthValidationError} As promise rejection if invalid.
  * @return {Promise<boolean>} Promise for true if valid.
  */
 export const validateMaxLength = async (
   value: boolean | number | string,
-  maxLength: number | string
+  maxLength: number | string,
+  message: string
 ): Promise<boolean> => {
   const length = String(value).length
   const limit = parseInt(maxLength as string)
   const valid = Boolean(isNaN(limit) || length <= limit)
 
   if (!valid) {
-    throw new MaxLengthValidationError(
-      `Ensure that this value has at most ${limit} characters (is has ${length}).`
-    )
+    throw new MaxLengthValidationError(message)
   }
   return valid
 }
@@ -68,21 +77,21 @@ export class MaxLengthValidationError extends ValidationError {
  * Validates whether stringified value is at least minLength characters.
  * @param {boolean|number|string} value Value to check.
  * @param {number|string} minLength Minimum length.
+ * @param {string} message Message to show when invalid.
  * @throws {MinLengthValidationError} As promise rejection if invalid.
  * @return {Promise<boolean>} Promise for true if valid.
  */
 export const validateMinLength = async (
   value: boolean | number | string,
-  minLength: number | string
+  minLength: number | string,
+  message: string
 ): Promise<boolean> => {
   const length = String(value).length
   const limit = parseInt(minLength as string)
   const valid = Boolean(isNaN(limit) || length >= limit)
 
   if (!valid) {
-    throw new MinLengthValidationError(
-      `Ensure that this value has at least ${limit} characters (is has ${length}).`
-    )
+    throw new MinLengthValidationError(message)
   }
   return valid
 }
@@ -95,16 +104,18 @@ export class MinLengthValidationError extends ValidationError {
  * Validates whether stringified value matches a (RegExp) pattern.
  * @param {boolean|number|string} value Value to check.
  * @param {RegExp|string} pattern Regular expression.
+ * @param {string} message Message to show when invalid.
  * @throws {PatternValidationError} As promise rejection if invalid.
  * @return {Promise<boolean>} Promise for true if valid.
  */
 export const validatePattern = async (
   value: boolean | number | string,
-  pattern: RegExp | string
+  pattern: RegExp | string,
+  message: string
 ): Promise<boolean> => {
   const valid = Boolean(!pattern || String(value).match(pattern))
   if (!valid) {
-    throw new PatternValidationError('Enter a valid value.')
+    throw new PatternValidationError(message)
   }
   return valid
 }
@@ -117,16 +128,18 @@ export class PatternValidationError extends ValidationError {
  * Validates whether value is truthy and required is true.
  * @param {boolean|number|string} value Value to check.
  * @param {boolean} required
+ * @param {string} message Message to show when invalid.
  * @throws {RequiredValidationError} As promise rejection if invalid.
  * @return {Promise<boolean>} Promise for true if valid.
  */
 export const validateRequired = async (
   value: boolean | number | string,
-  required: boolean
+  required: boolean,
+  message: string
 ): Promise<boolean> => {
   const valid = Boolean(!required || value)
   if (!valid) {
-    throw new RequiredValidationError('Field is required.')
+    throw new RequiredValidationError(message)
   }
   return valid
 }

src/types/config.d.ts

@@ -36,6 +36,8 @@ export interface RenderConfiguration {
   components: ComponentConfiguration[]
 
   renderer: { renderTree: Function; renderBranch: Function; renderLeaf: Function }
+
+  i18n?: I18N
 }
 
 export interface CallbackConfiguration {
@@ -61,3 +63,7 @@ export interface FormErrors {
 }
 
 export type ComponentErrors = string[]
+
+export interface I18N {
+  [index: string]: { [index: string]: string }
+}