Merge pull request #13 from open-formulieren/feature/of-2958-translat…

…ions-on-component

Change types for component translation storage

src/formio/base.ts

@@ -51,10 +51,10 @@ export interface PrefillConfig {
 /**
  * @group Open Forms schema extensions
  */
-export interface OFExtensions {
+export interface OFExtensions<TK extends string = string> {
   isSensitiveData?: boolean;
   openForms?: {
-    translations: ComponentTranslations;
+    translations: ComponentTranslations<TK>;
   };
   registration?: {
     attribute: string;
@@ -143,8 +143,9 @@ export type MultipleCapable<S> = S extends {defaultValue?: infer DV}
  */
 export type InputComponentSchema<
   T = unknown,
-  VN extends CuratedValidatorNames = CuratedValidatorNames
-> = StrictComponentSchema<T | T[]> & DisplayConfig & OFExtensions & HasValidation<VN>;
+  VN extends CuratedValidatorNames = CuratedValidatorNames,
+  TK extends string = string
+> = StrictComponentSchema<T | T[]> & DisplayConfig & OFExtensions<TK> & HasValidation<VN>;
 
 /**
  * @group Schema primitives

src/formio/components/content.ts

@@ -1,5 +1,7 @@
 import {DisplayConfig, LayoutComponentSchema, OFExtensions} from '..';
 
+type TranslatableKeys = 'html';
+
 /**
  * The content component schema, intended for WYSIWYG content.
  *
@@ -27,7 +29,7 @@ export interface ContentComponentSchema
       | 'placeholder'
     >,
     DisplayConfig,
-    OFExtensions {
+    OFExtensions<TranslatableKeys> {
   id: string;
   key: string;
   type: 'content';

src/formio/components/date.ts

@@ -8,6 +8,9 @@ import {
 } from '../dates';
 
 type Validator = 'required';
+type TranslatableKeys = 'label' | 'description' | 'tooltip';
+
+export type DateInputSchema = InputComponentSchema<string, Validator, TranslatableKeys>;
 
 export interface IncludeToday {
   includeToday: boolean | null;
@@ -21,11 +24,9 @@ type PastDateConstraint = BasePastDateConstraint & IncludeToday;
  * @group Form.io components
  * @category Base types
  */
-export interface BaseDateComponentSchema
-  extends Omit<InputComponentSchema<string, Validator>, 'hideLabel'>,
-    PrefillConfig {
+export interface BaseDateComponentSchema extends Omit<DateInputSchema, 'hideLabel'>, PrefillConfig {
   type: 'date';
-  openForms?: OFExtensions['openForms'] & {
+  openForms?: OFExtensions<TranslatableKeys>['openForms'] & {
     minDate?:
       | Exclude<DateConstraintConfiguration, FutureOrPastDateConstraint>
       | FutureDateConstraint;

src/formio/components/datetime.ts

@@ -8,16 +8,19 @@ import {
 } from '../dates';
 
 type Validator = 'required';
+type TranslatableKeys = 'label' | 'description' | 'tooltip';
+
+export type DateTimeInputSchema = InputComponentSchema<string, Validator, TranslatableKeys>;
 
 /**
  * @group Form.io components
  * @category Base types
  */
 export interface BaseDateTimeComponentSchema
-  extends Omit<InputComponentSchema<string, Validator>, 'hideLabel'>,
+  extends Omit<DateTimeInputSchema, 'hideLabel'>,
     PrefillConfig {
   type: 'datetime';
-  openForms?: OFExtensions['openForms'] & {
+  openForms?: OFExtensions<TranslatableKeys>['openForms'] & {
     minDate?: Exclude<DateConstraintConfiguration, PastDateConstraint>;
     maxDate?: Exclude<DateConstraintConfiguration, FutureDateConstraint>;
   };

src/formio/components/email.ts

@@ -1,13 +1,15 @@
 import {InputComponentSchema, MultipleCapable} from '..';
 
 type Validator = 'required';
+type TranslatableKeys = 'label' | 'description' | 'tooltip';
+
+export type EmailInputSchema = InputComponentSchema<string, Validator, TranslatableKeys>;
 
 /**
  * @group Form.io components
  * @category Base types
  */
-export interface BaseEmailComponentSchema
-  extends Omit<InputComponentSchema<string, Validator>, 'hideLabel' | 'disabled'> {
+export interface BaseEmailComponentSchema extends Omit<EmailInputSchema, 'hideLabel' | 'disabled'> {
   type: 'email';
   // additional properties
   autocomplete?: string;

src/formio/components/number.ts

@@ -1,13 +1,16 @@
 import {InputComponentSchema} from '..';
 
 type Validator = 'required' | 'min' | 'max';
+type TranslatableKeys = 'label' | 'description' | 'tooltip' | 'suffix';
+
+export type NumberInputSchema = InputComponentSchema<number, Validator, TranslatableKeys>;
 
 /**
  * @group Form.io components
  * @category Base types
  */
 export interface BaseNumberComponentSchema
-  extends Omit<InputComponentSchema<number, Validator>, 'hideLabel' | 'placeholder'> {
+  extends Omit<NumberInputSchema, 'hideLabel' | 'placeholder'> {
   type: 'number';
   defaultValue?: number;
   /*

src/formio/components/textfield.ts

@@ -1,13 +1,16 @@
 import {InputComponentSchema, MultipleCapable, PrefillConfig} from '..';
 
 type Validator = 'required' | 'maxLength' | 'pattern';
+type TranslatableKeys = 'label' | 'description' | 'tooltip' | 'defaultValue' | 'placeholder';
+
+export type TextFieldInputSchema = InputComponentSchema<string, Validator, TranslatableKeys>;
 
 /**
  * @group Form.io components
  * @category Base types
  */
 export interface BaseTextFieldComponentSchema
-  extends Omit<InputComponentSchema<string, Validator>, 'hideLabel'>,
+  extends Omit<TextFieldInputSchema, 'hideLabel'>,
     PrefillConfig {
   type: 'textfield';
   // additional properties

src/formio/i18n.ts

@@ -1,12 +1,18 @@
 import {TranslationsContainer} from '../i18n';
 import {BaseErrorKeys} from './validation';
 
-export interface Translation {
-  literal: string;
-  translation: string;
-}
+/**
+ * A single translated literal.
+ *
+ * Keys should be possible properties of the component.
+ */
+export type Translation<K extends string> = {
+  [key in K]?: string;
+};
 
-export type ComponentTranslations = TranslationsContainer<Translation[]>;
+export type ComponentTranslations<K extends string = string> = TranslationsContainer<
+  Translation<K>
+>;
 export type ErrorTranslations<K extends BaseErrorKeys = BaseErrorKeys> = TranslationsContainer<{
   [key in K]?: string;
 }>;

test-d/formio/components/content.test-d.ts

@@ -32,7 +32,9 @@ expectAssignable<ContentComponentSchema>({
   // Translations
   openForms: {
     translations: {
-      nl: [],
+      nl: {
+        html: '<p>Ik ben vertaald!</p>',
+      },
     },
   },
 });

test-d/formio/components/date.test-d.ts

@@ -128,7 +128,10 @@ expectAssignable<DateComponentSchema>({
     maxDate: {mode: ''},
     // translations tab in builder form
     translations: {
-      nl: [{literal: 'foo', translation: 'bar'}],
+      nl: {
+        label: 'foo',
+        description: 'bar',
+      },
     },
   },
 });

test-d/formio/components/datetime.test-d.ts

@@ -128,7 +128,10 @@ expectAssignable<DateTimeComponentSchema>({
     maxDate: {mode: ''},
     // translations tab in builder form
     translations: {
-      nl: [{literal: 'foo', translation: 'bar'}],
+      nl: {
+        label: 'foo',
+        tooltip: 'bar',
+      },
     },
   },
 });

test-d/formio/components/email.test-d.ts

@@ -79,7 +79,7 @@ expectAssignable<EmailComponentSchema>({
   // translations tab in builder form
   openForms: {
     translations: {
-      nl: [{literal: 'foo', translation: 'bar'}],
+      nl: {label: 'foo'},
     },
   },
   // fixed but not editable

test-d/formio/components/number.test-d.ts

@@ -122,7 +122,7 @@ expectAssignable<NumberComponentSchema>({
   // translations tab in builder form
   openForms: {
     translations: {
-      nl: [{literal: 'foo', translation: 'bar'}],
+      nl: {suffix: 'foo', tooltip: 'bar'},
     },
   },
 });

test-d/formio/components/textfield.test-d.ts

@@ -107,7 +107,10 @@ expectAssignable<TextFieldComponentSchema>({
   // translations tab in builder form
   openForms: {
     translations: {
-      nl: [{literal: 'foo', translation: 'bar'}],
+      nl: {
+        label: 'foo',
+        description: 'bar',
+      },
     },
   },
 });