From 516b0d56aaf7a173e110d19cae8701fd0f2ac21f Mon Sep 17 00:00:00 2001 From: Sergei Maertens Date: Mon, 9 Oct 2023 14:59:36 +0200 Subject: [PATCH] :boom: [open-formulieren/open-forms#2958] Change types for component translation storage Rather than storing translations on the entire form definition, we will now track them on the component definition itself. This results in what was internal API/implementation detail to become public API, and the types for this representation are now updated. We store translations in openForms.translations for each component, which itself is a mapping of language code to a mapping of translations. Such a translation mapping has the translatable properties (of the component) as key and the translation as value. --- src/formio/base.ts | 9 +++++---- src/formio/components/content.ts | 4 +++- src/formio/components/date.ts | 9 +++++---- src/formio/components/datetime.ts | 7 +++++-- src/formio/components/email.ts | 6 ++++-- src/formio/components/number.ts | 5 ++++- src/formio/components/textfield.ts | 5 ++++- src/formio/i18n.ts | 16 +++++++++++----- test-d/formio/components/content.test-d.ts | 4 +++- test-d/formio/components/date.test-d.ts | 5 ++++- test-d/formio/components/datetime.test-d.ts | 5 ++++- test-d/formio/components/email.test-d.ts | 2 +- test-d/formio/components/number.test-d.ts | 2 +- test-d/formio/components/textfield.test-d.ts | 5 ++++- 14 files changed, 58 insertions(+), 26 deletions(-) diff --git a/src/formio/base.ts b/src/formio/base.ts index b70c39d..cf277c8 100644 --- a/src/formio/base.ts +++ b/src/formio/base.ts @@ -51,10 +51,10 @@ export interface PrefillConfig { /** * @group Open Forms schema extensions */ -export interface OFExtensions { +export interface OFExtensions { isSensitiveData?: boolean; openForms?: { - translations: ComponentTranslations; + translations: ComponentTranslations; }; registration?: { attribute: string; @@ -143,8 +143,9 @@ export type MultipleCapable = S extends {defaultValue?: infer DV} */ export type InputComponentSchema< T = unknown, - VN extends CuratedValidatorNames = CuratedValidatorNames -> = StrictComponentSchema & DisplayConfig & OFExtensions & HasValidation; + VN extends CuratedValidatorNames = CuratedValidatorNames, + TK extends string = string +> = StrictComponentSchema & DisplayConfig & OFExtensions & HasValidation; /** * @group Schema primitives diff --git a/src/formio/components/content.ts b/src/formio/components/content.ts index 68c1463..34ca015 100644 --- a/src/formio/components/content.ts +++ b/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 { id: string; key: string; type: 'content'; diff --git a/src/formio/components/date.ts b/src/formio/components/date.ts index f2370f3..281b5f5 100644 --- a/src/formio/components/date.ts +++ b/src/formio/components/date.ts @@ -8,6 +8,9 @@ import { } from '../dates'; type Validator = 'required'; +type TranslatableKeys = 'label' | 'description' | 'tooltip'; + +export type DateInputSchema = InputComponentSchema; 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, 'hideLabel'>, - PrefillConfig { +export interface BaseDateComponentSchema extends Omit, PrefillConfig { type: 'date'; - openForms?: OFExtensions['openForms'] & { + openForms?: OFExtensions['openForms'] & { minDate?: | Exclude | FutureDateConstraint; diff --git a/src/formio/components/datetime.ts b/src/formio/components/datetime.ts index efd57d2..a734d3a 100644 --- a/src/formio/components/datetime.ts +++ b/src/formio/components/datetime.ts @@ -8,16 +8,19 @@ import { } from '../dates'; type Validator = 'required'; +type TranslatableKeys = 'label' | 'description' | 'tooltip'; + +export type DateTimeInputSchema = InputComponentSchema; /** * @group Form.io components * @category Base types */ export interface BaseDateTimeComponentSchema - extends Omit, 'hideLabel'>, + extends Omit, PrefillConfig { type: 'datetime'; - openForms?: OFExtensions['openForms'] & { + openForms?: OFExtensions['openForms'] & { minDate?: Exclude; maxDate?: Exclude; }; diff --git a/src/formio/components/email.ts b/src/formio/components/email.ts index fb42961..5c9e54c 100644 --- a/src/formio/components/email.ts +++ b/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; /** * @group Form.io components * @category Base types */ -export interface BaseEmailComponentSchema - extends Omit, 'hideLabel' | 'disabled'> { +export interface BaseEmailComponentSchema extends Omit { type: 'email'; // additional properties autocomplete?: string; diff --git a/src/formio/components/number.ts b/src/formio/components/number.ts index f258f8a..5f2e20d 100644 --- a/src/formio/components/number.ts +++ b/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; /** * @group Form.io components * @category Base types */ export interface BaseNumberComponentSchema - extends Omit, 'hideLabel' | 'placeholder'> { + extends Omit { type: 'number'; defaultValue?: number; /* diff --git a/src/formio/components/textfield.ts b/src/formio/components/textfield.ts index 6697002..3af21bc 100644 --- a/src/formio/components/textfield.ts +++ b/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; /** * @group Form.io components * @category Base types */ export interface BaseTextFieldComponentSchema - extends Omit, 'hideLabel'>, + extends Omit, PrefillConfig { type: 'textfield'; // additional properties diff --git a/src/formio/i18n.ts b/src/formio/i18n.ts index ef0d8da..9b97a1b 100644 --- a/src/formio/i18n.ts +++ b/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 = { + [key in K]?: string; +}; -export type ComponentTranslations = TranslationsContainer; +export type ComponentTranslations = TranslationsContainer< + Translation +>; export type ErrorTranslations = TranslationsContainer<{ [key in K]?: string; }>; diff --git a/test-d/formio/components/content.test-d.ts b/test-d/formio/components/content.test-d.ts index fbe7d19..1bed32c 100644 --- a/test-d/formio/components/content.test-d.ts +++ b/test-d/formio/components/content.test-d.ts @@ -32,7 +32,9 @@ expectAssignable({ // Translations openForms: { translations: { - nl: [], + nl: { + html: '

Ik ben vertaald!

', + }, }, }, }); diff --git a/test-d/formio/components/date.test-d.ts b/test-d/formio/components/date.test-d.ts index b52b6d9..a71defd 100644 --- a/test-d/formio/components/date.test-d.ts +++ b/test-d/formio/components/date.test-d.ts @@ -128,7 +128,10 @@ expectAssignable({ maxDate: {mode: ''}, // translations tab in builder form translations: { - nl: [{literal: 'foo', translation: 'bar'}], + nl: { + label: 'foo', + description: 'bar', + }, }, }, }); diff --git a/test-d/formio/components/datetime.test-d.ts b/test-d/formio/components/datetime.test-d.ts index c11b54a..4a74114 100644 --- a/test-d/formio/components/datetime.test-d.ts +++ b/test-d/formio/components/datetime.test-d.ts @@ -128,7 +128,10 @@ expectAssignable({ maxDate: {mode: ''}, // translations tab in builder form translations: { - nl: [{literal: 'foo', translation: 'bar'}], + nl: { + label: 'foo', + tooltip: 'bar', + }, }, }, }); diff --git a/test-d/formio/components/email.test-d.ts b/test-d/formio/components/email.test-d.ts index c38e6f8..45d9b14 100644 --- a/test-d/formio/components/email.test-d.ts +++ b/test-d/formio/components/email.test-d.ts @@ -79,7 +79,7 @@ expectAssignable({ // translations tab in builder form openForms: { translations: { - nl: [{literal: 'foo', translation: 'bar'}], + nl: {label: 'foo'}, }, }, // fixed but not editable diff --git a/test-d/formio/components/number.test-d.ts b/test-d/formio/components/number.test-d.ts index 8c7d7c4..bad4615 100644 --- a/test-d/formio/components/number.test-d.ts +++ b/test-d/formio/components/number.test-d.ts @@ -122,7 +122,7 @@ expectAssignable({ // translations tab in builder form openForms: { translations: { - nl: [{literal: 'foo', translation: 'bar'}], + nl: {suffix: 'foo', tooltip: 'bar'}, }, }, }); diff --git a/test-d/formio/components/textfield.test-d.ts b/test-d/formio/components/textfield.test-d.ts index ae0895f..1e15662 100644 --- a/test-d/formio/components/textfield.test-d.ts +++ b/test-d/formio/components/textfield.test-d.ts @@ -107,7 +107,10 @@ expectAssignable({ // translations tab in builder form openForms: { translations: { - nl: [{literal: 'foo', translation: 'bar'}], + nl: { + label: 'foo', + description: 'bar', + }, }, }, });