feat(example-form): update example form

libs/application/core/src/lib/fieldBuilders.ts

@@ -21,7 +21,6 @@ import {
   FormTextArray,
   KeyValueField,
   LinkField,
-  MaybeWithApplicationAndField,
   MessageWithLinkButtonField,
   Option,
   PaymentChargeOverviewField,
@@ -586,6 +585,7 @@ export const buildExpandableDescriptionField = (
     component: FieldComponents.EXPANDABLE_DESCRIPTION,
   }
 }
+
 export const buildAlertMessageField = (
   data: Omit<AlertMessageField, 'type' | 'component' | 'children'>,
 ): AlertMessageField => {
@@ -842,7 +842,6 @@ export const buildFieldsRepeaterField = (
 ): FieldsRepeaterField => {
   const {
     fields,
-    table,
     title,
     titleVariant,
     formTitle,
@@ -861,7 +860,6 @@ export const buildFieldsRepeaterField = (
     type: FieldTypes.FIELDS_REPEATER,
     component: FieldComponents.FIELDS_REPEATER,
     fields,
-    table,
     title,
     titleVariant,
     formTitle,
@@ -923,38 +921,42 @@ export const buildStaticTableField = (
 }
 
 export const buildSliderField = (
-  data: Omit<SliderField, 'type' | 'component' | 'children' | 'title'>,
+  data: Omit<SliderField, 'type' | 'component' | 'children'>,
 ): SliderField => {
   const {
+    id,
+    title,
+    titleVariant = 'h2',
     condition,
     min = 0,
     max = 10,
     step = 1,
     snap = true,
     trackStyle,
     calculateCellStyle,
-    showLabel = false,
-    showMinMaxLabels = false,
     showRemainderOverlay = true,
     showProgressOverlay = true,
     showToolTip = false,
     label,
+    showLabel = false,
+    showMinMaxLabels = false,
     rangeDates,
     currentIndex,
     onChange,
     onChangeEnd,
     labelMultiplier = 1,
-    id,
     saveAsString,
     marginTop,
     marginBottom,
   } = data
   return {
-    title: '',
+    component: FieldComponents.SLIDER,
     id,
+    title,
+    titleVariant,
+    condition,
     children: undefined,
     type: FieldTypes.SLIDER,
-    component: FieldComponents.SLIDER,
     min,
     max,
     step,
@@ -972,7 +974,6 @@ export const buildSliderField = (
     onChange,
     onChangeEnd,
     labelMultiplier,
-    condition,
     saveAsString,
     marginTop,
     marginBottom,

libs/application/templates/funding-government-projects/src/forms/FundingGovernmentProjectsForm.ts

@@ -123,6 +123,7 @@ export const FundingGovernmentProjectsForm: Form = buildForm({
             }),
             buildSliderField({
               id: 'project.refundableYears',
+              title: '',
               label: {
                 singular: shared.yearSingular,
                 plural: shared.yearPlural,

libs/application/templates/parental-leave/src/forms/ParentalLeaveForm.ts

@@ -1223,6 +1223,7 @@ export const ParentalLeaveForm: Form = buildForm({
               children: [
                 buildSliderField({
                   id: 'multipleBirthsRequestDays',
+                  title: '',
                   label: {
                     singular: parentalLeaveFormMessages.shared.day,
                     plural: parentalLeaveFormMessages.shared.days,
@@ -1317,6 +1318,7 @@ export const ParentalLeaveForm: Form = buildForm({
               children: [
                 buildSliderField({
                   id: 'requestRights.requestDays',
+                  title: '',
                   label: {
                     singular: parentalLeaveFormMessages.shared.day,
                     plural: parentalLeaveFormMessages.shared.days,
@@ -1365,6 +1367,7 @@ export const ParentalLeaveForm: Form = buildForm({
               children: [
                 buildSliderField({
                   id: 'giveRights.giveDays',
+                  title: '',
                   label: {
                     singular: parentalLeaveFormMessages.shared.day,
                     plural: parentalLeaveFormMessages.shared.days,

libs/application/templates/reference-template/README.md

@@ -66,3 +66,51 @@ To access the list of national ids for applicantActors that have come in contact
 ```ts
 const applicantActors = application.applicantActors
 ```
+
+## Coding guidelines
+
+The aim is to have all applications to be coded in a similar way, so that every developer that is familiar with the application system can open any application and everything is consistent and feels familiar.
+
+- Reduce the amount of custom components to a minimum.
+- Reduce the use of the "as" and "any" keywords as much as possible. Both of those keywords are tricking the linter to accept code that would otherwise throw errors and might cause hard to trace bugs.
+- Try to use the `getValueViaPath` function to access the answers of the application. It makes accessing nested values easier and the code more readable. Note that this function is generic and a type can be provided to make sure the type of the value is correct E.g:
+
+`getValueViaPath<string>(application.answers, 'some.nested.value', 'optional fallback')`
+
+- Don't use fake steps, stepper should only be showing steps of the current form. On the first step in the main form, there shouldn't be a back button or the illusion that you can go back to the prerequsites step.
+
+## Folder structure
+
+|-- assets/--------------------------------# optional folder for assets like images, icons, etc.
+|
+|-- components/----------------------------# optional folder for React components that are used by custom components.
+|
+|-- dataProviders/-------------------------# folder for data providers.
+|
+|-- fields/--------------------------------# optional folder for custom components if the application needs any.
+|-- |-- index.ts---------------------------# Exports all fields from the folder.
+|-- |-- myCustomComponent/-----------------# Folder for a custom component, camelCase.
+|-- |-- |-- MyCustomComponent.tsx----------# React component file, PascalCase.
+|-- |-- |-- MyCustomComponent.css.ts-------# CSS file, PascalCase.
+|
+|-- forms/---------------------------------# folder for forms. More about form folder structure in the form folder README.
+|-- |-- prerequisitesForm/
+|-- |-- mainForm/
+|-- |-- conclusionForm/--------------------# More forms if needed
+|
+|-- graphql/-------------------------------# optional folder for graphql queries and mutations.
+|
+|-- lib/-----------------------------------# folder for data schema, messages, and the main template file.
+|-- |-- dataScema.ts-----------------------# Validation for the application.
+|-- |-- mainTemplate.ts--------------------# Main template file. State machine for the application, mapUsersToRole and more
+|-- |-- messages.ts------------------------# File for all text that appears on the screen, synced with Contentful.
+|-- |-- messages/--------------------------# optional folder for messages if there is a need to have the messages more organized.
+|
+|-- shared/--------------------------------# optional folder for code that might be needed in the template-api-modules or  
+|------------------------------------------# other places outside the template.
+|
+|-- utils/---------------------------------# folder for utility functions, constants, enums and types.
+|-- |-- constants.ts-----------------------# Constants for the application.
+|-- |-- enums.ts---------------------------# Enums for the application.
+|-- |-- types.ts---------------------------# Types for the application.
+|-- |-- helperFunctions.ts-----------------# Helper functions for the application, this can be many files.

libs/application/templates/reference-template/src/assets/README.md

@@ -0,0 +1,4 @@
+# Assets
+
+This folder is optional and can be used to store assets like images, icons, etc.
+Organization within this folder id up to the developer.