feat: extended FormField model into input/select/switch subtypes for future use

marcinkrasowski · marcinkrasowski · commit 4c5a8a426282 · 2025-07-18T12:47:45.000+02:00
diff --git a/.changeset/tangy-kids-clap.md b/.changeset/tangy-kids-clap.md
@@ -0,0 +1,7 @@
+---
+'@o2s/integrations.strapi-cms': patch
+'@o2s/integrations.mocked': patch
+'@o2s/framework': patch
+---
+
+extended `FormField` model into input/select/switch subtypes for future use
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/framework/src/utils/models/form-field.ts b/packages/framework/src/utils/models/form-field.ts
@@ -1,4 +1,4 @@
-export class FormField {
+export class FormFieldBase {
     id!: string;
     name!: string;
     label!: string;
@@ -8,6 +8,28 @@ export class FormField {
     errorMessages?: ErrorMessage[];
 }
 
+export type FormField = Input | Select | Switch;
+
+export class Input extends FormFieldBase {
+    __typename!: 'Input';
+}
+
+export class Select extends FormFieldBase {
+    __typename!: 'Select';
+    options!: Option<string>[];
+}
+
+export class Switch extends FormFieldBase {
+    __typename!: 'Switch';
+    options!: [Option<boolean>, Option<boolean>];
+}
+
+export class Option<T> {
+    value!: T;
+    label!: string;
+    isDefault?: boolean;
+}
+
 export class ErrorMessage {
     id!: string;
     name!: string;
diff --git a/packages/integrations/mocked/src/modules/cms/mappers/blocks/cms.user-account.mapper.ts b/packages/integrations/mocked/src/modules/cms/mappers/blocks/cms.user-account.mapper.ts
@@ -7,6 +7,7 @@ const MOCK_USER_ACCOUNT_BLOCK_EN: CMS.Model.UserAccountBlock.UserAccountBlock =
     basicInformationDescription: 'Update your personal information to keep your account details current and accurate.',
     fields: [
         {
+            __typename: 'Input',
             id: 'first-name-1',
             name: 'firstName',
             label: 'First Name',
@@ -33,6 +34,7 @@ const MOCK_USER_ACCOUNT_BLOCK_EN: CMS.Model.UserAccountBlock.UserAccountBlock =
             ],
         },
         {
+            __typename: 'Input',
             id: 'last-name-1',
             name: 'lastName',
             label: 'Last Name',
@@ -47,6 +49,7 @@ const MOCK_USER_ACCOUNT_BLOCK_EN: CMS.Model.UserAccountBlock.UserAccountBlock =
             ],
         },
         {
+            __typename: 'Input',
             id: 'email-1',
             name: 'email',
             label: 'Email',
@@ -78,6 +81,7 @@ const MOCK_USER_ACCOUNT_BLOCK_PL: CMS.Model.UserAccountBlock.UserAccountBlock =
         'Zaktualizuj swoje dane osobowe, aby utrzymać aktualne i dokładne informacje o koncie.',
     fields: [
         {
+            __typename: 'Input',
             id: 'first-name-1',
             name: 'firstName',
             label: 'Imię',
@@ -104,6 +108,7 @@ const MOCK_USER_ACCOUNT_BLOCK_PL: CMS.Model.UserAccountBlock.UserAccountBlock =
             ],
         },
         {
+            __typename: 'Input',
             id: 'last-name-1',
             name: 'lastName',
             label: 'Nazwisko',
@@ -118,6 +123,7 @@ const MOCK_USER_ACCOUNT_BLOCK_PL: CMS.Model.UserAccountBlock.UserAccountBlock =
             ],
         },
         {
+            __typename: 'Input',
             id: 'email-1',
             name: 'email',
             label: 'Email',
@@ -149,6 +155,7 @@ const MOCK_USER_ACCOUNT_BLOCK_DE: CMS.Model.UserAccountBlock.UserAccountBlock =
         'Aktualisieren Sie Ihre persönlichen Daten, um Ihre Kontoinformationen aktuell und genau zu halten.',
     fields: [
         {
+            __typename: 'Input',
             id: 'first-name-1',
             name: 'firstName',
             label: 'Vorname',
@@ -175,6 +182,7 @@ const MOCK_USER_ACCOUNT_BLOCK_DE: CMS.Model.UserAccountBlock.UserAccountBlock =
             ],
         },
         {
+            __typename: 'Input',
             id: 'last-name-1',
             name: 'lastName',
             label: 'Nachname',
@@ -189,6 +197,7 @@ const MOCK_USER_ACCOUNT_BLOCK_DE: CMS.Model.UserAccountBlock.UserAccountBlock =
             ],
         },
         {
+            __typename: 'Input',
             id: 'email-1',
             name: 'email',
             label: 'E-Mail',
diff --git a/packages/integrations/mocked/src/modules/cms/mappers/cms.login-page.mapper.ts b/packages/integrations/mocked/src/modules/cms/mappers/cms.login-page.mapper.ts
@@ -4,6 +4,7 @@ const LOGIN_PAGE_PL: CMS.Model.LoginPage.LoginPage = {
     title: 'Zaloguj się',
     subtitle: 'Wprowadź swój email i hasło, aby uzyskać dostęp do konta',
     username: {
+        __typename: 'Input',
         id: 'username-1',
         name: 'username',
         label: 'Nazwa użytkownika',
@@ -30,6 +31,7 @@ const LOGIN_PAGE_PL: CMS.Model.LoginPage.LoginPage = {
         ],
     },
     password: {
+        __typename: 'Input',
         id: 'password-1',
         name: 'password',
         label: 'Hasło',
@@ -93,6 +95,7 @@ const LOGIN_PAGE_EN: CMS.Model.LoginPage.LoginPage = {
     title: 'Sign in',
     subtitle: 'Please enter your email and password below to access your account.',
     username: {
+        __typename: 'Input',
         id: 'username-1',
         name: 'username',
         label: 'Username',
@@ -119,6 +122,7 @@ const LOGIN_PAGE_EN: CMS.Model.LoginPage.LoginPage = {
         ],
     },
     password: {
+        __typename: 'Input',
         id: 'password-1',
         name: 'password',
         label: 'Password',
@@ -203,6 +207,7 @@ const LOGIN_PAGE_DE: CMS.Model.LoginPage.LoginPage = {
     title: 'Einloggen',
     subtitle: 'Geben Sie Ihre E-Mail und Ihr Passwort ein, um auf Ihr Konto zuzugreifen',
     username: {
+        __typename: 'Input',
         id: 'username-1',
         name: 'username',
         label: 'Benutzername',
@@ -229,6 +234,7 @@ const LOGIN_PAGE_DE: CMS.Model.LoginPage.LoginPage = {
         ],
     },
     password: {
+        __typename: 'Input',
         id: 'password-1',
         name: 'password',
         label: 'Passwort',
diff --git a/packages/integrations/strapi-cms/src/modules/cms/mappers/blocks/cms.user-account.mapper.ts b/packages/integrations/strapi-cms/src/modules/cms/mappers/blocks/cms.user-account.mapper.ts
@@ -4,6 +4,8 @@ import { CMS } from '@o2s/framework/modules';
 
 import { GetComponentQuery } from '@/generated/strapi';
 
+import { mapFormField } from '../cms.form-field.mapper';
+
 export const mapUserAccountBlock = (data: GetComponentQuery): CMS.Model.UserAccountBlock.UserAccountBlock => {
     const component = data.component!.content[0];
     const configurableTexts = data.configurableTexts!;
@@ -19,7 +21,7 @@ export const mapUserAccountBlock = (data: GetComponentQuery): CMS.Model.UserAcco
                 title: component.title,
                 basicInformationTitle: component.basicInformationTitle,
                 basicInformationDescription: component.basicInformationDescription,
-                fields: component.inputs,
+                fields: component.inputs.map(mapFormField),
                 labels: {
                     edit: configurableTexts.actions.edit,
                     save: configurableTexts.actions.save,
diff --git a/packages/integrations/strapi-cms/src/modules/cms/mappers/cms.form-field.mapper.ts b/packages/integrations/strapi-cms/src/modules/cms/mappers/cms.form-field.mapper.ts
@@ -0,0 +1,26 @@
+import { Models } from '@o2s/framework/modules';
+
+import { ErrorMessageComponentFragment, FormFieldComponentFragment } from '@/generated/strapi';
+
+export const mapFormField = (component: FormFieldComponentFragment): Models.FormField.FormField => {
+    switch (component.__typename) {
+        case 'ComponentContentFormField':
+            return {
+                __typename: 'Input',
+                id: component.id,
+                name: component.name,
+                label: component.label,
+                placeholder: component.placeholder,
+                errorMessages: component.errorMessages?.map(mapErrorMessage),
+            };
+    }
+};
+
+export const mapErrorMessage = (component: ErrorMessageComponentFragment): Models.FormField.ErrorMessage => {
+    return {
+        id: component.id,
+        name: component.name,
+        type: component.type,
+        description: component.description,
+    };
+};
diff --git a/packages/integrations/strapi-cms/src/modules/cms/mappers/cms.login-page.mapper.ts b/packages/integrations/strapi-cms/src/modules/cms/mappers/cms.login-page.mapper.ts
@@ -2,6 +2,8 @@ import { CMS } from '@o2s/framework/modules';
 
 import { GetLoginPageQuery } from '@/generated/strapi';
 
+import { mapFormField } from './cms.form-field.mapper';
+
 export const mapLoginPage = (data: GetLoginPageQuery, baseURL?: string): CMS.Model.LoginPage.LoginPage => {
     const loginPage = data.loginPage!;
     const labels = data.configurableTexts!;
@@ -22,30 +24,8 @@ export const mapLoginPage = (data: GetLoginPageQuery, baseURL?: string): CMS.Mod
         subtitle: loginPage.subtitle,
         title: loginPage.title,
         providers,
-        username: {
-            id: loginPage.username.id,
-            name: loginPage.username.name,
-            label: loginPage.username.label,
-            placeholder: loginPage.username.placeholder,
-            errorMessages: loginPage.username.errorMessages?.map((errorMessage) => ({
-                id: errorMessage.id,
-                description: errorMessage.description,
-                name: errorMessage.name,
-                type: errorMessage.type,
-            })),
-        },
-        password: {
-            id: loginPage.password.id,
-            name: loginPage.password.name,
-            label: loginPage.password.label,
-            placeholder: loginPage.password.placeholder,
-            errorMessages: loginPage.password.errorMessages?.map((errorMessage) => ({
-                id: errorMessage.id,
-                description: errorMessage.description,
-                name: errorMessage.name,
-                type: errorMessage.type,
-            })),
-        },
+        username: mapFormField(loginPage.username),
+        password: mapFormField(loginPage.password),
         labels: labels.actions,
         image: loginPage.image
             ? {
