Merge pull request #25 from open-formulieren/feature/2-textarea

✨ [#2] Implement types for `textarea`

src/formio/components/index.ts

@@ -1,5 +1,6 @@
 // Input components
 export * from './textfield';
+export * from './textarea';
 export * from './currency';
 export * from './email';
 export * from './date';

src/formio/components/textarea.ts

@@ -0,0 +1,25 @@
+import {InputComponentSchema, MultipleCapable} from '..';
+
+type Validator = 'required' | 'maxLength' | 'pattern';
+type TranslatableKeys = 'label' | 'description' | 'tooltip' | 'defaultValue' | 'placeholder';
+
+export type TextareaInputSchema = InputComponentSchema<string, Validator, TranslatableKeys>;
+
+/**
+ * @group Form.io components
+ * @category Base types
+ */
+export interface BaseTextareaComponentSchema extends Omit<TextareaInputSchema, 'hideLabel'> {
+  type: 'textarea';
+  // additional properties
+  showCharCount?: boolean;
+  autocomplete?: string;
+  rows: number;
+  autoExpand: boolean;
+}
+
+/**
+ * @group Form.io components
+ * @category Concrete types
+ */
+export type TextareaComponentSchema = MultipleCapable<BaseTextareaComponentSchema>;

src/formio/index.ts

@@ -17,6 +17,7 @@ import {
   SelectComponentSchema,
   SelectboxesComponentSchema,
   TextFieldComponentSchema,
+  TextareaComponentSchema,
   TimeComponentSchema,
 } from './components';
 
@@ -53,6 +54,7 @@ export type AnyComponentSchema =
   | PhoneNumberComponentSchema
   | PostcodeComponentSchema
   | FileComponentSchema
+  | TextareaComponentSchema
   | NumberComponentSchema
   | SelectComponentSchema
   | CheckboxComponentSchema

test-d/formio/components/textarea.test-d.ts

@@ -0,0 +1,179 @@
+import {expectAssignable, expectNotAssignable} from 'tsd';
+
+import {TextareaComponentSchema} from '../../../lib/';
+
+// minimal textarea component schema
+expectAssignable<TextareaComponentSchema>({
+  id: 'yejak',
+  type: 'textarea',
+  key: 'someInput',
+  label: 'Some input',
+  rows: 3,
+  autoExpand: true,
+});
+
+// multiple false and appropriate default value type
+expectAssignable<TextareaComponentSchema>({
+  id: 'yejak',
+  type: 'textarea',
+  key: 'someEmail',
+  label: 'Some input',
+  rows: 3,
+  autoExpand: true,
+  multiple: false,
+  defaultValue: '',
+});
+
+// multiple true and appropriate default value type
+expectAssignable<TextareaComponentSchema>({
+  id: 'yejak',
+  type: 'textarea',
+  key: 'someEmail',
+  label: 'Some input',
+  rows: 3,
+  autoExpand: true,
+  multiple: true,
+  defaultValue: [''],
+});
+
+// full, correct schema
+expectAssignable<TextareaComponentSchema>({
+  id: 'yejak',
+  type: 'textarea',
+  // basic tab in builder form
+  label: 'Some input',
+  rows: 3,
+  autoExpand: true,
+  key: 'someInput',
+  description: 'A description',
+  tooltip: 'A tooltip',
+  showInSummary: true,
+  showInEmail: false,
+  showInPDF: true,
+  multiple: false,
+  hidden: false,
+  clearOnHide: true,
+  isSensitiveData: false,
+  defaultValue: '',
+  autocomplete: 'name',
+  disabled: false,
+  placeholder: '',
+  showCharCount: true,
+  // advanced tab in builder form
+  conditional: {
+    show: undefined,
+    when: undefined,
+    eq: undefined,
+  },
+  // validation tab in builder form
+  validate: {
+    required: false,
+    plugins: undefined,
+    maxLength: 20,
+    pattern: '',
+  },
+  translatedErrors: {
+    nl: {
+      required: 'Je moet een waarde opgeven!!!',
+      maxLength: 'Een maximale lengte.',
+    },
+  },
+  errors: {
+    // translatedErrors is converted into errors by the backend
+    required: 'Je moet een waarde opgeven!!!',
+    maxLength: 'Een maximale lengte.',
+  },
+  // registration tab in builder form
+  registration: {
+    attribute: '',
+  },
+  // translations tab in builder form
+  openForms: {
+    translations: {
+      nl: {
+        label: 'foo',
+        description: 'bar',
+      },
+    },
+  },
+});
+
+// different component type
+expectNotAssignable<TextareaComponentSchema>({
+  type: 'fieldset',
+});
+
+// using unsupported properties
+expectNotAssignable<TextareaComponentSchema>({
+  id: 'yejak',
+  type: 'textarea',
+  key: 'someInput',
+  label: 'Some input',
+  rows: 3,
+  autoExpand: true,
+  hideLabel: true,
+});
+
+// incorrect, invalid validator key
+expectNotAssignable<TextareaComponentSchema>({
+  id: 'yejak',
+  type: 'textarea',
+  key: 'someInput',
+  label: 'Some input',
+  rows: 3,
+  autoExpand: true,
+  validate: {
+    min: 3,
+  },
+});
+
+// invalid, multiple true and non-array default value
+expectNotAssignable<TextareaComponentSchema>({
+  id: 'yejak',
+  type: 'textarea',
+  key: 'textarea',
+  label: 'Some textarea',
+  rows: 3,
+  autoExpand: true,
+  multiple: true,
+  defaultValue: '',
+});
+
+// invalid, multiple false and array default value
+expectNotAssignable<TextareaComponentSchema>({
+  id: 'yejak',
+  type: 'textarea',
+  key: 'textarea',
+  label: 'Some textarea',
+  rows: 3,
+  autoExpand: true,
+  multiple: false,
+  defaultValue: [''],
+});
+
+// invalid, multiple true and wrong default value in array element
+expectNotAssignable<TextareaComponentSchema>({
+  id: 'yejak',
+  type: 'textarea',
+  key: 'textarea',
+  label: 'Some textarea',
+  rows: 3,
+  autoExpand: true,
+  multiple: true,
+  defaultValue: [0],
+});
+
+// invalid, with prefill
+expectNotAssignable<TextareaComponentSchema>({
+  id: 'yejak',
+  type: 'textarea',
+  key: 'someInput',
+  label: 'Some input',
+  prefill: {
+    plugin: '',
+    attribute: '',
+    identifierRole: 'main',
+  },
+  rows: 3,
+  autoExpand: true,
+});