Merge pull request #1017 from navikt/textarea-react-component

Textarea react component

Author: Thomas-CT

.prettierignore

@@ -2,4 +2,7 @@ package-lock.json
 
 # Ignore yaml files because it contains handlebars logic 
 **/.nais/*.yaml
-**/.nais/*.yml
+**/.nais/*.yml
+
+## Ignore all EJS files:
+**/*.ejs

package.json

@@ -35,6 +35,8 @@
     "test:coverage": "yarn workspaces run test:coverage",
     "cypress:bygger": "yarn workspace @navikt/bygger-frontend cypress",
     "cypress:fyllut": "yarn workspace @navikt/fyllut-frontend cypress",
+    "cypress:bygger:open": "yarn workspace @navikt/bygger-frontend cypress:open",
+    "cypress:fyllut:open": "yarn workspace @navikt/fyllut-frontend cypress:open",
     "check-types": "yarn workspaces run check-types",
     "mocks:fyllut": "cd mocks && yarn mocks:fyllut",
     "mocks:fyllut:no-cli": "cd mocks && yarn mocks:fyllut:no-cli",

packages/bygger/cypress/e2e/form-builder.spec.cy.ts

@@ -139,6 +139,19 @@ describe('Form Builder', () => {
       cy.findByRole('checkbox', { name: val2 }).should('exist');
     });
 
+    it('Edit JSON - Change label', () => {
+      cy.findByRole('group', { name: 'Flervalg' })
+        .should('exist')
+        .closest("[data-testid='builder-component']")
+        .within(() => {
+          cy.clickBuilderComponentButton('Rediger JSON');
+        });
+      cy.get('div').contains('"label": "Flervalg"').click({ force: true });
+      cy.focused().type('{end}{leftArrow}{leftArrow} (endret)', { force: true });
+      cy.get('[data-testid="editorSaveButton"]').click();
+      cy.get('label').contains('Flervalg (endret)');
+    });
+
     // TODO: Add test for radio group when it gets the new data values.
   });
 });

packages/bygger/src/formio-overrides/webform-builder-overrides.js

@@ -58,6 +58,39 @@ WebformBuilder.prototype.editComponent = function (component, parent, isNew, isJ
     }
   }
   originalEditComponent.call(this, component, parent, isNew, isJsonEdit, original, flags);
+
+  if (isJsonEdit) {
+    this.editForm.form = {
+      ...this.editForm.form,
+      components: [
+        {
+          type: 'formioTextArea',
+          as: 'json',
+          editor: 'ace',
+          input: true,
+          key: 'componentJson',
+          label: 'JSON definisjon',
+          validate: {
+            required: true,
+          },
+        },
+        {
+          type: 'checkbox',
+          key: 'showFullSchema',
+          label: 'Full definisjon',
+        },
+      ],
+    };
+
+    // Need to run this again to attach the edit components controls. In earlier FormioJS versions this was not necessary
+    this.attachEditComponentControls(
+      component,
+      parent,
+      isNew,
+      original,
+      NavFormioJs.Components.components[component.type],
+    );
+  }
 };
 
 WebformBuilder.prototype.destroy = function (...args) {

packages/bygger/src/translations/global/ApplicationTextTranslationEditPanel.test.jsx

@@ -42,7 +42,7 @@ describe('ApplicationTextTranslationEditPanel', () => {
     });
 
     it('renders all grensesnitt inputs', () => {
-      expect(screen.getAllByRole('textbox')).toHaveLength(67);
+      expect(screen.getAllByRole('textbox')).toHaveLength(69);
     });
 
     it('renders originalText with translatedText as value', () => {

packages/shared-components/src/formio/components/base/editForm/shared/editFormAceEditor.ts

@@ -2,7 +2,7 @@ import { Component } from '@navikt/skjemadigitalisering-shared-domain';
 
 const editFormAceEditor = (type: 'html' | 'javascript' | 'json'): Component => {
   return {
-    type: 'textarea',
+    type: 'formioTextArea',
     key: 'aceEditor',
     label: '',
     rows: 5,

packages/shared-components/src/formio/components/base/editForm/shared/editFormWysiwygEditor.ts

@@ -9,7 +9,7 @@ const editFormWysiwygEditor = (heading: boolean = true): Component => {
   toolbar.push('bold', 'link', 'bulletedList', 'numberedList');
 
   return {
-    type: 'textarea',
+    type: 'formioTextArea',
     key: 'wysiwygEditor',
     label: '',
     rows: 5,

packages/shared-components/src/formio/components/core/textarea/TextArea.ts

@@ -0,0 +1,74 @@
+import { Textarea as NavTextarea } from '@navikt/ds-react';
+import { TEXTS } from '@navikt/skjemadigitalisering-shared-domain';
+import BaseComponent from '../../base/BaseComponent';
+import textAreaBuilder from './TextArea.builder';
+import textAreaForm from './TextArea.form';
+
+const { navTextarea: TRANSLATIONS } = TEXTS.grensesnitt;
+
+class TextArea extends BaseComponent {
+  static schema() {
+    return BaseComponent.schema({
+      label: 'Tekstområde',
+      type: 'textarea',
+      key: 'textarea',
+      fieldSize: 'input--xxl',
+      input: true,
+      dataGridLabel: true,
+      clearOnHide: true,
+      autoExpand: true,
+      editor: '',
+    });
+  }
+
+  static editForm() {
+    return textAreaForm();
+  }
+
+  static get builderInfo() {
+    return textAreaBuilder();
+  }
+
+  getMinRows() {
+    return this.component?.rows;
+  }
+
+  getMaxRows() {
+    return !this.component?.autoExpand ? this.getMinRows() : undefined;
+  }
+
+  getMaxLength() {
+    const maxLength = this.component?.validate?.maxLength;
+    return maxLength;
+  }
+
+  renderReact(element) {
+    element.render(
+      <>
+        <NavTextarea
+          id={this.getId()}
+          defaultValue={this.getValue()}
+          maxLength={this.getMaxLength()}
+          minRows={this.getMinRows()}
+          maxRows={this.getMaxRows()}
+          ref={(ref) => this.setReactInstance(ref)}
+          onChange={(event) => this.updateValue(event.currentTarget.value, { modified: true })}
+          label={this.getLabel()}
+          hideLabel={this.getHideLabel()}
+          description={this.getDescription()}
+          className={this.getClassName()}
+          autoComplete={this.getAutoComplete()}
+          readOnly={this.getReadOnly()}
+          spellCheck={this.getSpellCheck()}
+          error={this.getError()}
+          i18n={{
+            counterLeft: this.t(TRANSLATIONS.counterLeft),
+            counterTooMuch: this.t(TRANSLATIONS.counterTooMuch),
+          }}
+        />
+      </>,
+    );
+  }
+}
+
+export default TextArea;

packages/shared-components/src/formio/components/core/textarea/TextArea.tsx

@@ -1,3 +1,4 @@
+import FormioTextArea from 'formiojs/components/textarea/TextArea';
 import Activities from './core/activities/Activities';
 import Alert from './core/alert/Alert';
 import Button from './core/button/Button';
@@ -46,6 +47,7 @@ const customComponents = {
   datagrid: DataGrid,
   textfield: TextField,
   textarea: TextArea,
+  formioTextArea: FormioTextArea,
   number: Number,
   navSkjemagruppe: FormGroup,
   selectboxes: SelectBoxes,

packages/shared-components/src/formio/components/index.ts

@@ -1,4 +1,4 @@
-{% if (ctx.component.type === "textfield" || ctx.component.type === "orgNr" || ctx.component.type === "bankAccount" || ctx.component.type === "htmlelement" || ctx.component.type === "radiopanel" || ctx.component.type === "activities") { %}
+{% if (ctx.component.type === "textfield" || ctx.component.type === "textarea" || ctx.component.type === "orgNr" || ctx.component.type === "bankAccount" || ctx.component.type === "htmlelement" || ctx.component.type === "radiopanel" || ctx.component.type === "activities") { %}
     {{ctx.element}}
 {% } else { %}
     {% if (ctx.component.description && ctx.component.type !== "datagrid" && ctx.component.descriptionPosition === "above") { %}

packages/shared-components/src/formio/template/templates/navdesign/field/form.ejs

@@ -160,6 +160,7 @@ export interface Component {
   valueComponent?: Component;
   isInline?: boolean;
   textDisplay?: 'form' | 'formPdf' | 'pdf';
+  autoExpand?: boolean;
 }
 
 export interface ComponentProperties {
@@ -187,6 +188,7 @@ export interface ComponentValidate {
   patternMessage?: string;
   min?: number;
   max?: number;
+  maxLength?: number;
 }
 
 export interface ComponentConditional {

packages/shared-domain/src/form/index.ts

@@ -81,4 +81,8 @@ export const grensesnitt = {
     inputHasFocus: '{{label}} har fokus.',
     onFilterSearchResult: 'for søkeordet {{inputValue}}.',
   },
+  navTextarea: {
+    counterLeft: 'tegn igjen',
+    counterTooMuch: 'tegn for mye',
+  },
 };