Feature: ResizableTextArea in widget and dashboard (#969)

* Create ResizableTextArea component
* Rubocop fixes and spec fixes

Co-authored-by: Sojan <sojan@pepalo.com>

app/javascript/shared/components/ResizableTextArea.vue

@@ -0,0 +1,56 @@
+<template>
+  <textarea
+    ref="textarea"
+    :placeholder="placeholder"
+    :value="value"
+    @input="onInput"
+    @focus="onFocus"
+    @blur="onBlur"
+  />
+</template>
+
+<script>
+export default {
+  props: {
+    placeholder: {
+      type: String,
+      default: '',
+    },
+    value: {
+      type: String,
+      default: '',
+    },
+    minHeight: {
+      type: Number,
+      default: 3.2,
+    },
+  },
+  watch: {
+    value() {
+      this.resizeTextarea();
+    },
+  },
+  methods: {
+    resizeTextarea() {
+      if (!this.value) {
+        this.$el.style.height = `${this.minHeight}rem`;
+      } else {
+        this.$el.style.height = `${this.$el.scrollHeight}px`;
+      }
+    },
+    onInput(event) {
+      this.$emit('input', event.target.value);
+      this.resizeTextarea();
+    },
+    onBlur() {
+      this.$emit('blur');
+    },
+    onFocus() {
+      this.$emit('focus');
+    },
+    focus() {
+      this.$refs.textarea.focus();
+    },
+  },
+};
+</script>