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,
+});