From 4f06c849ea117ae46a0ec6abdd24d0dff0400c19 Mon Sep 17 00:00:00 2001
From: Nikki Ysendoorn <nikki.ysendoorn@maykinmedia.nl>
Date: Tue, 12 Mar 2024 10:24:16 +0100
Subject: [PATCH] :fire: [#48] remove src to start over

---
 .../formio/columns/columns.component.tsx      |  60 ---
 .../formio/columns/columns.stories.tsx        |  45 ---
 src/components/formio/columns/index.ts        |   1 -
 .../formio/content/content.component.tsx      |  31 --
 .../formio/content/content.stories.tsx        |  31 --
 src/components/formio/content/index.ts        |   1 -
 src/components/formio/index.ts                |   3 -
 src/components/formio/textfield/index.ts      |   1 -
 .../formio/textfield/textfield.component.tsx  |  70 ----
 .../formio/textfield/textfield.stories.tsx    |  40 --
 src/components/index.ts                       |   2 -
 .../utils/charcount/charcount.component.tsx   |  14 -
 .../utils/charcount/charcount.stories.tsx     |  21 -
 src/components/utils/charcount/index.ts       |   1 -
 .../utils/component/component.component.tsx   |  11 -
 .../utils/component/component.stories.tsx     |  21 -
 src/components/utils/component/index.ts       |   1 -
 .../description/description.component.tsx     |  14 -
 .../utils/description/description.stories.tsx |  21 -
 src/components/utils/description/index.ts     |   1 -
 .../utils/errors/errors.component.tsx         |  30 --
 .../utils/errors/errors.stories.tsx           |  24 --
 src/components/utils/errors/index.ts          |   1 -
 src/components/utils/index.ts                 |   5 -
 src/components/utils/label/index.ts           |   1 -
 .../utils/label/label.component.tsx           |  20 -
 src/components/utils/label/label.stories.tsx  |  21 -
 src/fixtures/formio/formio-columns.ts         |  88 -----
 src/fixtures/formio/formio-example.ts         |  50 ---
 src/fixtures/formio/formio-length.ts          |  15 -
 src/fixtures/formio/formio-pattern.ts         |  15 -
 src/fixtures/formio/formio-required.ts        |  15 -
 src/fixtures/formio/index.ts                  |   5 -
 src/fixtures/index.ts                         |   1 -
 src/index.tsx                                 |   3 -
 src/lib/format/index.ts                       |   1 -
 src/lib/format/placeholder.ts                 |   7 -
 src/lib/renderer/index.ts                     |   1 -
 src/lib/renderer/renderer.stories.tsx         | 367 ------------------
 src/lib/renderer/renderer.tsx                 | 221 -----------
 src/lib/validation/index.ts                   |   3 -
 src/lib/validation/validate.ts                | 193 ---------
 src/lib/validation/validationerror.ts         |  10 -
 src/lib/validation/validators/index.ts        |   4 -
 src/lib/validation/validators/maxlength.ts    |  26 --
 src/lib/validation/validators/minlength.ts    |  26 --
 src/lib/validation/validators/pattern.ts      |  25 --
 src/lib/validation/validators/required.ts     |  25 --
 .../custom-component.stories.tsx              | 102 -----
 src/tests/form/form-compatibility.stories.tsx |  29 --
 .../textfield-compatibility.stories.tsx       |  96 -----
 .../utils/compatibility-stories-factory.tsx   |  21 -
 src/tests/utils/decorators.tsx                |  18 -
 src/tests/utils/delay.ts                      |  16 -
 .../validation-compatibility.stories.tsx      | 128 ------
 src/types/componentprops.d.ts                 |  17 -
 src/types/config.d.ts                         |  27 --
 src/types/fixes.d.ts                          |   7 -
 src/types/form.d.ts                           |   7 -
 src/types/index.d.ts                          |   4 -
 src/types/json.d.ts                           |   6 -
 src/types/value.d.ts                          |  19 -
 62 files changed, 2090 deletions(-)
 delete mode 100644 src/components/formio/columns/columns.component.tsx
 delete mode 100644 src/components/formio/columns/columns.stories.tsx
 delete mode 100644 src/components/formio/columns/index.ts
 delete mode 100644 src/components/formio/content/content.component.tsx
 delete mode 100644 src/components/formio/content/content.stories.tsx
 delete mode 100644 src/components/formio/content/index.ts
 delete mode 100644 src/components/formio/index.ts
 delete mode 100644 src/components/formio/textfield/index.ts
 delete mode 100644 src/components/formio/textfield/textfield.component.tsx
 delete mode 100644 src/components/formio/textfield/textfield.stories.tsx
 delete mode 100644 src/components/index.ts
 delete mode 100644 src/components/utils/charcount/charcount.component.tsx
 delete mode 100644 src/components/utils/charcount/charcount.stories.tsx
 delete mode 100644 src/components/utils/charcount/index.ts
 delete mode 100644 src/components/utils/component/component.component.tsx
 delete mode 100644 src/components/utils/component/component.stories.tsx
 delete mode 100644 src/components/utils/component/index.ts
 delete mode 100644 src/components/utils/description/description.component.tsx
 delete mode 100644 src/components/utils/description/description.stories.tsx
 delete mode 100644 src/components/utils/description/index.ts
 delete mode 100644 src/components/utils/errors/errors.component.tsx
 delete mode 100644 src/components/utils/errors/errors.stories.tsx
 delete mode 100644 src/components/utils/errors/index.ts
 delete mode 100644 src/components/utils/index.ts
 delete mode 100644 src/components/utils/label/index.ts
 delete mode 100644 src/components/utils/label/label.component.tsx
 delete mode 100644 src/components/utils/label/label.stories.tsx
 delete mode 100644 src/fixtures/formio/formio-columns.ts
 delete mode 100644 src/fixtures/formio/formio-example.ts
 delete mode 100644 src/fixtures/formio/formio-length.ts
 delete mode 100644 src/fixtures/formio/formio-pattern.ts
 delete mode 100644 src/fixtures/formio/formio-required.ts
 delete mode 100644 src/fixtures/formio/index.ts
 delete mode 100644 src/fixtures/index.ts
 delete mode 100644 src/index.tsx
 delete mode 100644 src/lib/format/index.ts
 delete mode 100644 src/lib/format/placeholder.ts
 delete mode 100644 src/lib/renderer/index.ts
 delete mode 100644 src/lib/renderer/renderer.stories.tsx
 delete mode 100644 src/lib/renderer/renderer.tsx
 delete mode 100644 src/lib/validation/index.ts
 delete mode 100644 src/lib/validation/validate.ts
 delete mode 100644 src/lib/validation/validationerror.ts
 delete mode 100644 src/lib/validation/validators/index.ts
 delete mode 100644 src/lib/validation/validators/maxlength.ts
 delete mode 100644 src/lib/validation/validators/minlength.ts
 delete mode 100644 src/lib/validation/validators/pattern.ts
 delete mode 100644 src/lib/validation/validators/required.ts
 delete mode 100644 src/tests/custom-component/custom-component.stories.tsx
 delete mode 100644 src/tests/form/form-compatibility.stories.tsx
 delete mode 100644 src/tests/textfield/textfield-compatibility.stories.tsx
 delete mode 100644 src/tests/utils/compatibility-stories-factory.tsx
 delete mode 100644 src/tests/utils/decorators.tsx
 delete mode 100644 src/tests/utils/delay.ts
 delete mode 100644 src/tests/validation/validation-compatibility.stories.tsx
 delete mode 100644 src/types/componentprops.d.ts
 delete mode 100644 src/types/config.d.ts
 delete mode 100644 src/types/fixes.d.ts
 delete mode 100644 src/types/form.d.ts
 delete mode 100644 src/types/index.d.ts
 delete mode 100644 src/types/json.d.ts
 delete mode 100644 src/types/value.d.ts

diff --git a/src/components/formio/columns/columns.component.tsx b/src/components/formio/columns/columns.component.tsx
deleted file mode 100644
index 90e1cc4..0000000
--- a/src/components/formio/columns/columns.component.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import {Component} from '@components/utils';
-import {IComponentProps} from '@types';
-import clsx from 'clsx';
-import {ComponentSchema} from 'formiojs';
-import React from 'react';
-
-export interface IColumnsComponent extends ComponentSchema {
-  type: 'columns';
-  columns: IFormioColumn[];
-}
-
-export interface IColumnsProps extends IComponentProps {
-  component: IColumnsComponent;
-}
-
-/**
- * This component can be used for grouping other components, like Text Field, Text Area, Checkbox
- * etc., into configurable columns. It might be useful if you want to display more than one
- * component in one line.
- */
-export const Columns = (componentProps: IColumnsProps): React.ReactElement => {
-  const {children} = componentProps;
-  const className = clsx(`of-${componentProps.component.type}`);
-
-  return (
-    <Component {...componentProps}>
-      <div className={className}>{children}</div>
-    </Component>
-  );
-};
-
-type ColumnSize = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
-
-export interface IFormioColumn {
-  components: ComponentSchema[];
-  size: ColumnSize;
-  sizeMobile?: ColumnSize;
-}
-
-type IFormioColumnComponentSchema = IFormioColumn & ComponentSchema;
-
-export interface IColumnComponent extends IFormioColumnComponentSchema {
-  type: 'column';
-}
-
-export interface IColumnProps extends IComponentProps {
-  component: IColumnComponent;
-}
-
-/**
- * Not actually a component but an extension of `IFormioColumn` with a fixed type "column" allowing
- * it to be picked up by the renderer. This component is automatically generated for each `columns`
- * entry in a Form.io component.
- */
-export const Column = (columnProps: IColumnProps): React.ReactElement => {
-  const {children} = columnProps;
-  const className = clsx(`of-column`);
-
-  return <section className={className}>{children}</section>;
-};
diff --git a/src/components/formio/columns/columns.stories.tsx b/src/components/formio/columns/columns.stories.tsx
deleted file mode 100644
index c1ef0bd..0000000
--- a/src/components/formio/columns/columns.stories.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import {Columns} from '@components';
-import {RenderComponent} from '@lib/renderer';
-import {expect} from '@storybook/jest';
-import type {ComponentStory, Meta} from '@storybook/react';
-import {within} from '@storybook/testing-library';
-
-import {FormikDecorator} from '../../../tests/utils/decorators';
-
-const meta: Meta<typeof Columns> = {
-  title: 'Components / Formio / Columns',
-  component: Columns,
-  decorators: [],
-  parameters: {},
-};
-export default meta;
-
-export const columns: ComponentStory<typeof RenderComponent> = args => (
-  <RenderComponent {...args} />
-);
-columns.args = {
-  component: {
-    key: 'foo',
-    type: 'columns',
-    columns: [
-      {
-        key: 'foo.foo',
-        type: 'column',
-        size: 9,
-        components: [{key: 'foo.foo.foo', type: 'content', html: 'Left column.'}],
-      },
-      {
-        key: 'foo.bar',
-        type: 'column',
-        size: 3,
-        components: [{key: 'foo.bar.bar', type: 'content', html: 'Right column.'}],
-      },
-    ],
-  },
-};
-columns.play = async ({canvasElement}) => {
-  const canvas = within(canvasElement);
-  expect(await canvas.findByText('Left column.')).toBeVisible();
-  expect(await canvas.findByText('Right column.')).toBeVisible();
-};
-columns.decorators = [FormikDecorator];
diff --git a/src/components/formio/columns/index.ts b/src/components/formio/columns/index.ts
deleted file mode 100644
index 19684bc..0000000
--- a/src/components/formio/columns/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './columns.component';
diff --git a/src/components/formio/content/content.component.tsx b/src/components/formio/content/content.component.tsx
deleted file mode 100644
index 2b73bba..0000000
--- a/src/components/formio/content/content.component.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import {IComponentProps} from '@types';
-import clsx from 'clsx';
-import {ComponentSchema} from 'formiojs';
-import React from 'react';
-
-export interface IContentComponent extends ComponentSchema {
-  html: string;
-  type: 'content';
-}
-
-export interface IContentProps extends IComponentProps {
-  component: IContentComponent;
-}
-
-/**
- * A Content component may be added to a form to provide non-field information. For example, if you
- * need instructions at the top of a form that are for display only, use the Content component. The
- * Content component value is not submitted back to the server.
- * WARNING: HTML is passed into dangerouslySetInnerHTML prop.
- */
-export const Content = (contentProps: IContentProps): React.ReactElement => {
-  const {component, children} = contentProps;
-  const className = clsx(`of-${contentProps.component.type}`);
-
-  return (
-    <div className={className}>
-      <div dangerouslySetInnerHTML={{__html: component?.html}} />
-      {children}
-    </div>
-  );
-};
diff --git a/src/components/formio/content/content.stories.tsx b/src/components/formio/content/content.stories.tsx
deleted file mode 100644
index 0266961..0000000
--- a/src/components/formio/content/content.stories.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import {Content} from '@components';
-import {RenderComponent} from '@lib/renderer';
-import {expect} from '@storybook/jest';
-import type {ComponentStory, Meta} from '@storybook/react';
-import {within} from '@storybook/testing-library';
-
-import {FormikDecorator} from '../../../tests/utils/decorators';
-
-const meta: Meta<typeof Content> = {
-  title: 'Components / Formio / Content',
-  component: Content,
-  decorators: [],
-  parameters: {},
-};
-export default meta;
-
-export const content: ComponentStory<typeof RenderComponent> = args => (
-  <RenderComponent {...args} />
-);
-content.args = {
-  component: {
-    key: 'foo',
-    type: 'content',
-    html: 'The <b>quick</b> brown fox jumps over the lazy dog.',
-  },
-};
-content.play = async ({canvasElement}) => {
-  const canvas = within(canvasElement);
-  expect(await canvas.findByText('quick')).toBeVisible();
-};
-content.decorators = [FormikDecorator];
diff --git a/src/components/formio/content/index.ts b/src/components/formio/content/index.ts
deleted file mode 100644
index f35e396..0000000
--- a/src/components/formio/content/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './content.component';
diff --git a/src/components/formio/index.ts b/src/components/formio/index.ts
deleted file mode 100644
index 7da67a3..0000000
--- a/src/components/formio/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export * from './columns';
-export * from './content';
-export * from './textfield';
diff --git a/src/components/formio/textfield/index.ts b/src/components/formio/textfield/index.ts
deleted file mode 100644
index bb6c156..0000000
--- a/src/components/formio/textfield/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './textfield.component';
diff --git a/src/components/formio/textfield/textfield.component.tsx b/src/components/formio/textfield/textfield.component.tsx
deleted file mode 100644
index 0bdd46e..0000000
--- a/src/components/formio/textfield/textfield.component.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import {CharCount, Component, Description, Errors, Label} from '@components/utils';
-import {IComponentProps} from '@types';
-import clsx from 'clsx';
-import {ComponentSchema} from 'formiojs';
-import React, {useState} from 'react';
-
-export interface ITextFieldComponent extends ComponentSchema {
-  id: string;
-  inputMask: string;
-  key: string;
-  label: string;
-  mask: string;
-  showCharCount: boolean;
-  type: 'textfield';
-}
-
-// TODO: replace with @open-formulieren/open-forms-types TextFieldSchema type when its available
-export interface ITextFieldProps extends IComponentProps {
-  component: ITextFieldComponent;
-  value: string;
-}
-
-/**
- * A Text Field can be used for short and general text input. There are options to define input
- * masks and validations, allowing users to mold information into desired formats.
- */
-export const TextField: React.FC<ITextFieldProps> = ({callbacks, component, value, errors}) => {
-  const {onChange, ..._callbacks} = callbacks;
-  const [pristineState, setPristineState] = useState<boolean>(true);
-  const inputClassName = clsx(`of-${component.type}`);
-  const componentId = `${component.id}-${component.key}`;
-
-  const inputAttrs = {
-    disabled: component.disabled,
-    id: componentId,
-    multiple: component.multiple,
-    name: component.key,
-    pattern: component.validate?.pattern || undefined,
-    placeholder: component.placeholder || component.mask || component.inputMask || undefined,
-    required: component.validate?.required,
-    ...component.widget, // TODO: Check if component.hidden should be used manually or even component.inputType.
-  };
-
-  /**
-   * @param {React.FormEvent} event
-   */
-  const _onChange = (event: React.FormEvent<HTMLInputElement>) => {
-    setPristineState(false);
-    onChange && onChange(event);
-  };
-
-  return (
-    <Component>
-      <Label componentId={componentId} label={component.label} />
-
-      <input
-        className={inputClassName}
-        value={onChange ? value || '' : undefined}
-        defaultValue={!onChange ? value || '' : undefined}
-        onChange={_onChange}
-        {...inputAttrs}
-        {..._callbacks}
-      />
-
-      {!pristineState && component.showCharCount && <CharCount value={value} />}
-      {component.description && <Description description={component.description} />}
-      {!pristineState && errors?.length > 0 && <Errors componentId={componentId} errors={errors} />}
-    </Component>
-  );
-};
diff --git a/src/components/formio/textfield/textfield.stories.tsx b/src/components/formio/textfield/textfield.stories.tsx
deleted file mode 100644
index 5d6090c..0000000
--- a/src/components/formio/textfield/textfield.stories.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import {TextField} from '@components';
-import {RenderComponent} from '@lib/renderer';
-import {expect} from '@storybook/jest';
-import type {ComponentStory, Meta} from '@storybook/react';
-import {userEvent, within} from '@storybook/testing-library';
-
-import {FormikDecorator} from '../../../tests/utils/decorators';
-
-const meta: Meta<typeof TextField> = {
-  title: 'Components / Formio / Textfield',
-  component: TextField,
-  decorators: [],
-  parameters: {},
-};
-export default meta;
-
-export const textfield: ComponentStory<typeof RenderComponent> = args => (
-  <RenderComponent {...args} />
-);
-textfield.args = {
-  component: {
-    description: 'Enter your first name',
-    id: 'id',
-    inputMask: '',
-    key: 'firstName',
-    label: 'first name',
-    mask: '',
-    showCharCount: true,
-    type: 'textfield',
-  },
-};
-textfield.play = async ({canvasElement}) => {
-  const canvas = within(canvasElement);
-  const input = canvas.getByLabelText('first name');
-  expect(await canvas.findByText('Enter your first name')).toBeVisible();
-  expect(canvas.queryByText('0 characters')).toBeNull();
-  await userEvent.type(input, 'The quick brown fox jumps over the lazy dog.', {delay: 10});
-  expect(await canvas.findByText('44 characters')).toBeVisible();
-};
-textfield.decorators = [FormikDecorator];
diff --git a/src/components/index.ts b/src/components/index.ts
deleted file mode 100644
index 13bcead..0000000
--- a/src/components/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './formio';
-export * from './utils';
diff --git a/src/components/utils/charcount/charcount.component.tsx b/src/components/utils/charcount/charcount.component.tsx
deleted file mode 100644
index 2836c70..0000000
--- a/src/components/utils/charcount/charcount.component.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import clsx from 'clsx';
-import React from 'react';
-
-export interface ICharCountProps {
-  value: string;
-}
-
-/**
- * Reusable component showing `count` as number of characters typed into the component.
- */
-export const CharCount: React.FC<ICharCountProps> = ({value}) => {
-  const className = clsx(`of-charcount`);
-  return <span className={className}>{value.length} characters</span>;
-};
diff --git a/src/components/utils/charcount/charcount.stories.tsx b/src/components/utils/charcount/charcount.stories.tsx
deleted file mode 100644
index 1c2723f..0000000
--- a/src/components/utils/charcount/charcount.stories.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import {CharCount} from '@components';
-import {expect} from '@storybook/jest';
-import type {ComponentStory, Meta} from '@storybook/react';
-import {within} from '@storybook/testing-library';
-
-const meta: Meta<typeof CharCount> = {
-  title: 'Components / Utils / Charcount',
-  component: CharCount,
-  decorators: [],
-  parameters: {},
-};
-export default meta;
-
-export const charcount: ComponentStory<typeof CharCount> = args => <CharCount {...args} />;
-charcount.args = {
-  value: 'foo',
-};
-charcount.play = async ({canvasElement}) => {
-  const canvas = within(canvasElement);
-  expect(await canvas.findByText('3 characters')).toBeVisible();
-};
diff --git a/src/components/utils/charcount/index.ts b/src/components/utils/charcount/index.ts
deleted file mode 100644
index e616e12..0000000
--- a/src/components/utils/charcount/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './charcount.component';
diff --git a/src/components/utils/component/component.component.tsx b/src/components/utils/component/component.component.tsx
deleted file mode 100644
index f71dde1..0000000
--- a/src/components/utils/component/component.component.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import clsx from 'clsx';
-import React from 'react';
-
-/**
- * Structural wrapper for the component. A component's implementation should be placed in `children`
- * prop.
- */
-export const Component: React.FC<React.PropsWithChildren> = ({children}) => {
-  const className = clsx(`of-component`);
-  return <div className={className}>{children}</div>;
-};
diff --git a/src/components/utils/component/component.stories.tsx b/src/components/utils/component/component.stories.tsx
deleted file mode 100644
index 722fcc9..0000000
--- a/src/components/utils/component/component.stories.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import {Component} from '@components';
-import {expect} from '@storybook/jest';
-import type {ComponentStory, Meta} from '@storybook/react';
-import {within} from '@storybook/testing-library';
-
-const meta: Meta<typeof Component> = {
-  title: 'Components / Utils / Component',
-  component: Component,
-  decorators: [],
-  parameters: {},
-};
-export default meta;
-
-export const component: ComponentStory<typeof Component> = args => <Component {...args} />;
-component.args = {
-  children: 'The quick brown fox jumps over the lazy dog.',
-};
-component.play = async ({canvasElement}) => {
-  const canvas = within(canvasElement);
-  expect(await canvas.findByText('The quick brown fox jumps over the lazy dog.')).toBeVisible();
-};
diff --git a/src/components/utils/component/index.ts b/src/components/utils/component/index.ts
deleted file mode 100644
index c2d056f..0000000
--- a/src/components/utils/component/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './component.component';
diff --git a/src/components/utils/description/description.component.tsx b/src/components/utils/description/description.component.tsx
deleted file mode 100644
index 6ebda7d..0000000
--- a/src/components/utils/description/description.component.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import clsx from 'clsx';
-import React from 'react';
-
-interface IDescriptionProps {
-  description: string;
-}
-
-/**
- * Description/help text section of a component.
- */
-export const Description: React.FC<IDescriptionProps> = ({description}) => {
-  const className = clsx(`of-description`);
-  return <div className={className}>{description}</div>;
-};
diff --git a/src/components/utils/description/description.stories.tsx b/src/components/utils/description/description.stories.tsx
deleted file mode 100644
index 6e824e4..0000000
--- a/src/components/utils/description/description.stories.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import {Description} from '@components';
-import {expect} from '@storybook/jest';
-import type {ComponentStory, Meta} from '@storybook/react';
-import {within} from '@storybook/testing-library';
-
-const meta: Meta<typeof Description> = {
-  title: 'Components / Utils / Description',
-  component: Description,
-  decorators: [],
-  parameters: {},
-};
-export default meta;
-
-export const description: ComponentStory<typeof Description> = args => <Description {...args} />;
-description.args = {
-  description: 'The quick brown fox jumps over the lazy dog.',
-};
-description.play = async ({canvasElement}) => {
-  const canvas = within(canvasElement);
-  expect(await canvas.findByText('The quick brown fox jumps over the lazy dog.')).toBeVisible();
-};
diff --git a/src/components/utils/description/index.ts b/src/components/utils/description/index.ts
deleted file mode 100644
index 97ae638..0000000
--- a/src/components/utils/description/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './description.component';
diff --git a/src/components/utils/errors/errors.component.tsx b/src/components/utils/errors/errors.component.tsx
deleted file mode 100644
index 2d940ae..0000000
--- a/src/components/utils/errors/errors.component.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import clsx from 'clsx';
-import React from 'react';
-
-export interface IErrorsProps {
-  componentId: string;
-  errors: string[];
-}
-
-/**
- * Reusable component showing `errors` as list of error messages for the component.
- */
-export const Errors: React.FC<IErrorsProps> = ({componentId, errors}) => {
-  const className = clsx(`of-error-list`);
-  const listItemClassName = clsx(`of-error-list__item`);
-  const labelClassName = clsx(`of-error-list__message`);
-
-  return (
-    <ul className={className} aria-describedby={componentId}>
-      {errors?.map((error: string, index: number) => {
-        return (
-          <li key={index} className={listItemClassName}>
-            <label className={labelClassName} htmlFor={componentId} role="alert">
-              {error}
-            </label>
-          </li>
-        );
-      })}
-    </ul>
-  );
-};
diff --git a/src/components/utils/errors/errors.stories.tsx b/src/components/utils/errors/errors.stories.tsx
deleted file mode 100644
index fa951d8..0000000
--- a/src/components/utils/errors/errors.stories.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import {Errors} from '@components';
-import {expect} from '@storybook/jest';
-import type {ComponentStory, Meta} from '@storybook/react';
-import {within} from '@storybook/testing-library';
-
-const meta: Meta<typeof Errors> = {
-  title: 'Components / Utils / Errors',
-  component: Errors,
-  decorators: [],
-  parameters: {},
-};
-export default meta;
-
-export const errors: ComponentStory<typeof Errors> = args => <Errors {...args} />;
-errors.args = {
-  errors: ['Postcode is required', 'Postcode does not match the pattern ^\\d{4}\\s?[a-zA-Z]{2}$'],
-};
-errors.play = async ({canvasElement}) => {
-  const canvas = within(canvasElement);
-  expect(await canvas.findByText('Postcode is required')).toBeVisible();
-  expect(
-    await canvas.findByText('Postcode does not match the pattern ^\\d{4}\\s?[a-zA-Z]{2}$')
-  ).toBeVisible();
-};
diff --git a/src/components/utils/errors/index.ts b/src/components/utils/errors/index.ts
deleted file mode 100644
index 1bf4f09..0000000
--- a/src/components/utils/errors/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './errors.component';
diff --git a/src/components/utils/index.ts b/src/components/utils/index.ts
deleted file mode 100644
index cd0a43f..0000000
--- a/src/components/utils/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export * from './charcount';
-export * from './component';
-export * from './description';
-export * from './errors';
-export * from './label';
diff --git a/src/components/utils/label/index.ts b/src/components/utils/label/index.ts
deleted file mode 100644
index abbc12d..0000000
--- a/src/components/utils/label/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './label.component';
diff --git a/src/components/utils/label/label.component.tsx b/src/components/utils/label/label.component.tsx
deleted file mode 100644
index d887bd4..0000000
--- a/src/components/utils/label/label.component.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import clsx from 'clsx';
-import React from 'react';
-
-interface ILabelProps {
-  componentId: string;
-  label: string;
-}
-
-/**
- * Label component.
- */
-export const Label: React.FC<ILabelProps> = ({componentId, label}) => {
-  const className = clsx();
-
-  return (
-    <label className={className} htmlFor={componentId}>
-      {label}
-    </label>
-  );
-};
diff --git a/src/components/utils/label/label.stories.tsx b/src/components/utils/label/label.stories.tsx
deleted file mode 100644
index 3ca7819..0000000
--- a/src/components/utils/label/label.stories.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import {Label} from '@components';
-import {expect} from '@storybook/jest';
-import type {ComponentStory, Meta} from '@storybook/react';
-import {within} from '@storybook/testing-library';
-
-const meta: Meta<typeof Label> = {
-  title: 'Components / Utils / Label',
-  component: Label,
-  decorators: [],
-  parameters: {},
-};
-export default meta;
-
-export const label: ComponentStory<typeof Label> = args => <Label {...args} />;
-label.args = {
-  label: 'The quick brown fox jumps over the lazy dog.',
-};
-label.play = async ({canvasElement}) => {
-  const canvas = within(canvasElement);
-  expect(await canvas.findByText('The quick brown fox jumps over the lazy dog.')).toBeVisible();
-};
diff --git a/src/fixtures/formio/formio-columns.ts b/src/fixtures/formio/formio-columns.ts
deleted file mode 100644
index baf8e7f..0000000
--- a/src/fixtures/formio/formio-columns.ts
+++ /dev/null
@@ -1,88 +0,0 @@
-export const FORMIO_COLUMNS = {
-  id: 'e98k6c',
-  key: 'columns',
-  tree: false,
-  type: 'columns',
-  input: false,
-  label: 'Kolommen',
-  hidden: false,
-  prefix: '',
-  suffix: '',
-  unique: false,
-  widget: null,
-  columns: [
-    {
-      pull: 0,
-      push: 0,
-      size: 6,
-      width: 6,
-      offset: 0,
-      components: [],
-      sizeMobile: 4,
-      currentWidth: 6,
-    },
-    {
-      pull: 0,
-      push: 0,
-      size: 6,
-      width: 6,
-      offset: 0,
-      components: [],
-      sizeMobile: 4,
-      currentWidth: 6,
-    },
-  ],
-  dbIndex: false,
-  overlay: {
-    top: '',
-    left: '',
-    style: '',
-    width: '',
-    height: '',
-  },
-  tooltip: '',
-  disabled: false,
-  multiple: false,
-  redrawOn: '',
-  tabindex: '',
-  validate: {
-    custom: '',
-    unique: false,
-    multiple: false,
-    required: false,
-    customPrivate: false,
-    strictDateValidation: false,
-  },
-  autofocus: false,
-  encrypted: false,
-  hideLabel: false,
-  modalEdit: false,
-  protected: false,
-  refreshOn: '',
-  tableView: false,
-  attributes: {},
-  autoAdjust: false,
-  errorLabel: '',
-  persistent: false,
-  properties: {},
-  validateOn: 'change',
-  clearOnHide: false,
-  conditional: {
-    eq: '',
-    show: null,
-    when: null,
-  },
-  customClass: '',
-  description: '',
-  placeholder: '',
-  defaultValue: null,
-  dataGridLabel: false,
-  labelPosition: 'top',
-  showCharCount: false,
-  showWordCount: false,
-  calculateValue: '',
-  calculateServer: false,
-  allowMultipleMasks: false,
-  customDefaultValue: '',
-  allowCalculateOverride: false,
-};
diff --git a/src/fixtures/formio/formio-example.ts b/src/fixtures/formio/formio-example.ts
deleted file mode 100644
index 85907bd..0000000
--- a/src/fixtures/formio/formio-example.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-export const FORMIO_EXAMPLE = [
-  {
-    type: 'textfield',
-    key: 'firstName',
-    label: 'first name',
-    placeholder: 'Enter your first name.',
-    input: true,
-    tooltip: 'Enter your first name',
-    description: 'Enter your first name',
-  },
-  {
-    type: 'textfield',
-    key: 'lastName',
-    label: 'last name',
-    placeholder: 'Enter your last name',
-    input: true,
-    tooltip: 'Enter your last name',
-    description: 'Enter your last name',
-  },
-  {
-    type: 'select',
-    label: 'Favorite Things',
-    key: 'favoriteThings',
-    placeholder: 'These are a few of your favorite things...',
-    data: {
-      values: [
-        {
-          value: 'raindropsOnRoses',
-          label: 'Raindrops on roses',
-        },
-        {
-          value: 'whiskersOnKittens',
-          label: 'Whiskers on Kittens',
-        },
-        {
-          value: 'brightCopperKettles',
-          label: 'Bright Copper Kettles',
-        },
-        {
-          value: 'warmWoolenMittens',
-          label: 'Warm Woolen Mittens',
-        },
-      ],
-    },
-    dataSrc: 'values',
-    template: '<span>{{ item.label }}</span>',
-    multiple: true,
-    input: true,
-  },
-];
diff --git a/src/fixtures/formio/formio-length.ts b/src/fixtures/formio/formio-length.ts
deleted file mode 100644
index f3e532a..0000000
--- a/src/fixtures/formio/formio-length.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-export const FORMIO_LENGTH = {
-  type: 'textfield',
-  key: 'motivation',
-  label: 'Motivation',
-  placeholder: '',
-  input: true,
-  tooltip: 'Type something between 20 and 50 characters.',
-  description: '',
-  validate: {
-    maxLength: 50,
-    minLength: 20,
-    pattern: '',
-    required: true,
-  },
-};
diff --git a/src/fixtures/formio/formio-pattern.ts b/src/fixtures/formio/formio-pattern.ts
deleted file mode 100644
index 607f846..0000000
--- a/src/fixtures/formio/formio-pattern.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-export const FORMIO_PATTERN = {
-  type: 'textfield',
-  key: 'postcode',
-  label: 'Postcode',
-  placeholder: '1234 AB',
-  input: true,
-  tooltip: 'Please type a Dutch postcode.',
-  description: '',
-  validate: {
-    maxLength: 7,
-    minLength: 6,
-    pattern: '^\\d{4}\\s?[a-zA-Z]{2}$',
-    required: true,
-  },
-};
diff --git a/src/fixtures/formio/formio-required.ts b/src/fixtures/formio/formio-required.ts
deleted file mode 100644
index d34821f..0000000
--- a/src/fixtures/formio/formio-required.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-export const FORMIO_REQUIRED = {
-  type: 'textfield',
-  key: 'firstName',
-  label: 'first name',
-  placeholder: '',
-  input: true,
-  tooltip: 'This field is required',
-  description: '',
-  validate: {
-    maxLength: '',
-    minLength: '',
-    pattern: '',
-    required: true,
-  },
-};
diff --git a/src/fixtures/formio/index.ts b/src/fixtures/formio/index.ts
deleted file mode 100644
index f5aeade..0000000
--- a/src/fixtures/formio/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export * from './formio-columns';
-export * from './formio-example';
-export * from './formio-length';
-export * from './formio-pattern';
-export * from './formio-required';
diff --git a/src/fixtures/index.ts b/src/fixtures/index.ts
deleted file mode 100644
index 479b40e..0000000
--- a/src/fixtures/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './formio';
diff --git a/src/index.tsx b/src/index.tsx
deleted file mode 100644
index 3ca9d6f..0000000
--- a/src/index.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-export * from './components/formio';
-export * from '@lib/renderer';
-export * from '@lib/validation';
diff --git a/src/lib/format/index.ts b/src/lib/format/index.ts
deleted file mode 100644
index 44ebde2..0000000
--- a/src/lib/format/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './placeholder';
diff --git a/src/lib/format/placeholder.ts b/src/lib/format/placeholder.ts
deleted file mode 100644
index bca1380..0000000
--- a/src/lib/format/placeholder.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-/**
- * Substitutes {{ placeholder }} with context[placeholder} in template string.
- * TODO: This might need refactoring to suit translations.
- */
-export const substitute = (template: string, context: {[index: string]: any}) => {
-  return template.replace(/{{\s*(\w+)\s*}}/g, (_: string, key: string) => context[key] || '');
-};
diff --git a/src/lib/renderer/index.ts b/src/lib/renderer/index.ts
deleted file mode 100644
index d72f418..0000000
--- a/src/lib/renderer/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './renderer';
diff --git a/src/lib/renderer/renderer.stories.tsx b/src/lib/renderer/renderer.stories.tsx
deleted file mode 100644
index a7107fe..0000000
--- a/src/lib/renderer/renderer.stories.tsx
+++ /dev/null
@@ -1,367 +0,0 @@
-import {FORMIO_EXAMPLE, FORMIO_LENGTH, FORMIO_PATTERN, FORMIO_REQUIRED} from '@fixtures';
-import {DEFAULT_RENDER_CONFIGURATION, RenderComponent, RenderForm} from '@lib/renderer/renderer';
-import {expect} from '@storybook/jest';
-import type {ComponentStory, Meta} from '@storybook/react';
-import {userEvent, within} from '@storybook/testing-library';
-import {Formik} from 'formik';
-
-import {FormikDecorator} from '../../tests/utils/decorators';
-
-const meta: Meta<typeof RenderForm> = {
-  title: 'Usage / Renderer',
-  component: RenderForm,
-  decorators: [],
-  parameters: {},
-};
-export default meta;
-
-//
-// renderForm
-//
-
-export const renderForm: ComponentStory<typeof RenderForm> = args => <RenderForm {...args} />;
-renderForm.args = {
-  configuration: DEFAULT_RENDER_CONFIGURATION,
-  form: {
-    display: 'form',
-    components: FORMIO_EXAMPLE,
-  },
-  initialValues: {
-    [FORMIO_EXAMPLE[0].key as string]: 'foo',
-  },
-};
-renderForm.play = async ({canvasElement}) => {
-  const canvas = within(canvasElement);
-  await userEvent.clear(canvas.getByLabelText(FORMIO_EXAMPLE[0].label));
-  await userEvent.type(canvas.getByLabelText(FORMIO_EXAMPLE[0].label), 'John', {delay: 30});
-  await userEvent.type(canvas.getByLabelText(FORMIO_EXAMPLE[1].label), 'Doe', {delay: 30});
-};
-export const renderFormWithValidation: ComponentStory<typeof RenderForm> = args => (
-  <RenderForm {...args}>
-    <button type="submit">Submit</button>
-  </RenderForm>
-);
-
-renderFormWithValidation.args = {
-  configuration: DEFAULT_RENDER_CONFIGURATION,
-  form: {
-    display: 'form',
-    // @ts-ignore
-    components: [FORMIO_LENGTH, FORMIO_PATTERN, FORMIO_REQUIRED],
-  },
-};
-renderFormWithValidation.play = async ({canvasElement}) => {
-  const canvas = within(canvasElement);
-
-  // Pristine state should not show validation errors.
-  expect(await canvas.queryByText('Motivation must have at least 20 characters.')).toBeNull();
-  expect(await canvas.queryByText('Postcode must have at least 6 characters.')).toBeNull();
-  expect(
-    await canvas.queryByText('Postcode does not match the pattern ^\\d{4}\\s?[a-zA-Z]{2}$')
-  ).toBeNull();
-  expect(await canvas.queryByText('Motivation is required')).toBeNull();
-  expect(await canvas.queryByText('Postcode is required')).toBeNull();
-  expect(await canvas.queryByText('first name is required')).toBeNull();
-
-  // Type invalid values in each field.
-  await userEvent.type(canvas.getByLabelText(FORMIO_LENGTH.label), 'Lorem ipsum dolor', {
-    delay: 30,
-  });
-  expect(await canvas.findByText('Motivation must have at least 20 characters.')).toBeVisible();
-
-  await userEvent.type(canvas.getByLabelText(FORMIO_PATTERN.label), '123A', {delay: 30});
-  expect(
-    await canvas.findByText('Postcode does not match the pattern ^\\d{4}\\s?[a-zA-Z]{2}$')
-  ).toBeVisible();
-
-  await userEvent.type(canvas.getByLabelText(FORMIO_REQUIRED.label), 'foo', {delay: 30});
-  await userEvent.clear(canvas.getByLabelText(FORMIO_REQUIRED.label));
-  expect(await canvas.findByText('first name is required')).toBeVisible();
-
-  // Clear values.
-  await userEvent.clear(canvas.getByLabelText(FORMIO_LENGTH.label));
-  await userEvent.clear(canvas.getByLabelText(FORMIO_PATTERN.label));
-  await userEvent.clear(canvas.getByLabelText(FORMIO_REQUIRED.label));
-
-  // Unpristine state should show validation errors.
-  expect(await canvas.findByText('Postcode must have at least 6 characters.')).toBeVisible();
-  expect(
-    await canvas.findByText('Postcode does not match the pattern ^\\d{4}\\s?[a-zA-Z]{2}$')
-  ).toBeVisible();
-  await canvas.findAllByText('Postcode is required');
-
-  // Type valid values in each field.
-  await userEvent.type(
-    canvas.getByLabelText(FORMIO_LENGTH.label),
-    'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
-  );
-  await userEvent.type(canvas.getByLabelText(FORMIO_PATTERN.label), '1234AB', {delay: 30});
-  await userEvent.type(canvas.getByLabelText(FORMIO_REQUIRED.label), 'foo', {delay: 30});
-
-  // Valid values show not show validation errors.
-  expect(await canvas.queryByText('Motivation must have at least 20 characters.')).toBeNull();
-  expect(await canvas.queryByText('Postcode must have at least 6 characters.')).toBeNull();
-  expect(
-    await canvas.queryByText('Postcode does not match the pattern ^\\d{4}\\s?[a-zA-Z]{2}$')
-  ).toBeNull();
-  expect(await canvas.queryByText('Motivation is required')).toBeNull();
-  expect(await canvas.queryByText('Postcode is required')).toBeNull();
-  expect(await canvas.queryByText('first name is required')).toBeNull();
-};
-renderFormWithValidation.decorators = [
-  Story => (
-    <Formik
-      initialValues={{
-        [FORMIO_LENGTH.key]: '',
-        [FORMIO_PATTERN.key]: '',
-        [FORMIO_REQUIRED.key]: '',
-      }}
-      onSubmit={() => {}}
-    >
-      {Story()}
-    </Formik>
-  ),
-];
-
-export const renderFormWithNestedKeyValidation: ComponentStory<typeof RenderForm> = args => (
-  <RenderForm {...args}>
-    <button type="submit">Submit</button>
-  </RenderForm>
-);
-renderFormWithNestedKeyValidation.args = {
-  configuration: DEFAULT_RENDER_CONFIGURATION,
-  form: {
-    display: 'form',
-    components: [
-      {type: 'textfield', key: 'nested.textfield', label: 'Nested input', validate: {minLength: 5}},
-    ],
-  },
-  initialValues: {
-    nested: {
-      textfield: 'foobar',
-    },
-  },
-};
-renderFormWithNestedKeyValidation.play = async ({canvasElement}) => {
-  const canvas = within(canvasElement);
-
-  // Pristine state should not show validation errors.
-  expect(await canvas.queryByText('Nested input must have at least 5 characters.')).toBeNull();
-  await userEvent.clear(canvas.getByLabelText('Nested input'));
-  expect(await canvas.findByText('Nested input must have at least 5 characters.')).toBeVisible();
-};
-
-export const renderFormWithConditionalLogic: ComponentStory<typeof RenderForm> = args => (
-  <RenderForm {...args}>
-    <button type="submit">Submit</button>
-  </RenderForm>
-);
-renderFormWithConditionalLogic.args = {
-  configuration: DEFAULT_RENDER_CONFIGURATION,
-  form: {
-    display: 'form',
-    components: [
-      // Reference field.
-      {
-        id: 'favoriteAnimal',
-        type: 'textfield',
-        label: 'Favorite animal',
-        key: 'favoriteAnimal',
-      },
-
-      // Case: hide unless "cat"
-      {
-        conditional: {
-          eq: 'cat',
-          show: true,
-          when: 'favoriteAnimal',
-        },
-        id: 'motivationCat',
-        hidden: true,
-        type: 'textfield',
-        key: 'motivation',
-        label: 'Motivation',
-        placeholder: 'I like cats because...',
-        description: 'Please motivate why "cat" is your favorite animal...',
-      },
-
-      // Case hide unless "dog"
-      {
-        conditional: {
-          eq: 'dog',
-          show: true,
-          when: 'favoriteAnimal',
-        },
-        id: 'motivationDog',
-        hidden: true,
-        type: 'textfield',
-        key: 'motivation',
-        label: 'Motivation',
-        placeholder: 'I like dogs because...',
-        description: 'Please motivate why "dog" is your favorite animal...',
-      },
-
-      // Case hide unless "" (empty string)
-      {
-        conditional: {
-          eq: '',
-          show: true,
-          when: 'favoriteAnimal',
-        },
-        id: 'content1',
-        hidden: true,
-        type: 'content',
-        key: 'content',
-        html: 'Please enter you favorite animal.',
-      },
-
-      // Case show unless "cat"
-      {
-        conditional: {
-          eq: 'cat',
-          show: false,
-          when: 'favoriteAnimal',
-        },
-        id: 'content2',
-        hidden: false,
-        type: 'content',
-        key: 'content',
-        html: 'Have you tried "cat"?',
-      },
-
-      // Case show unless "dog"
-      {
-        conditional: {
-          eq: 'dog',
-          show: false,
-          when: 'favoriteAnimal',
-        },
-        id: 'content3',
-        hidden: false,
-        type: 'content',
-        key: 'content',
-        html: 'Have you tried "dog"?',
-      },
-    ],
-  },
-  initialValues: {
-    favoriteAnimal: '',
-    motivationCat: '',
-    motivationDog: '',
-    content: '',
-  },
-};
-renderFormWithConditionalLogic.play = async ({canvasElement}) => {
-  const canvas = within(canvasElement);
-  const input = canvas.getByLabelText('Favorite animal');
-  expect(
-    await canvas.queryByText('Please motivate why "cat" is your favorite animal...')
-  ).toBeNull();
-  expect(
-    await canvas.queryByText('Please motivate why "dog" is your favorite animal...')
-  ).toBeNull();
-  expect(await canvas.findByText('Please enter you favorite animal.')).toBeVisible();
-  expect(await canvas.findByText('Have you tried "cat"?')).toBeVisible();
-  expect(await canvas.findByText('Have you tried "dog"?')).toBeVisible();
-  await userEvent.type(input, 'horse', {delay: 30});
-  expect(
-    await canvas.queryByText('Please motivate why "cat" is your favorite animal...')
-  ).toBeNull();
-  expect(
-    await canvas.queryByText('Please motivate why "dog" is your favorite animal...')
-  ).toBeNull();
-  expect(await canvas.queryByText('Please enter you favorite animal.')).toBeNull();
-  expect(await canvas.findByText('Have you tried "cat"?')).toBeVisible();
-  expect(await canvas.findByText('Have you tried "dog"?')).toBeVisible();
-  await userEvent.clear(input);
-  await userEvent.type(input, 'cat', {delay: 30});
-  expect(
-    await canvas.findByText('Please motivate why "cat" is your favorite animal...')
-  ).toBeVisible();
-  expect(
-    await canvas.queryByText('Please motivate why "dog" is your favorite animal...')
-  ).toBeNull();
-  expect(await canvas.queryByText('Please enter you favorite animal.')).toBeNull();
-  expect(await canvas.queryByText('Have you tried "cat"?')).toBeNull();
-  await canvas.findByText('Have you tried "dog"?');
-  await userEvent.clear(input);
-  await userEvent.type(input, 'dog', {delay: 30});
-  expect(
-    await canvas.queryByText('Please motivate why "cat" is your favorite animal...')
-  ).toBeNull();
-  await canvas.findByText('Please motivate why "dog" is your favorite animal...');
-  expect(await canvas.queryByText('Please enter you favorite animal.')).toBeNull();
-  await canvas.findByText('Have you tried "cat"?');
-  expect(await canvas.queryByText('Have you tried "dog"?')).toBeNull();
-  await userEvent.clear(input);
-  expect(
-    await canvas.queryByText('Please motivate why "cat" is your favorite animal...')
-  ).toBeNull();
-  expect(
-    await canvas.queryByText('Please motivate why "dog" is your favorite animal...')
-  ).toBeNull();
-  expect(await canvas.findByText('Please enter you favorite animal.')).toBeVisible();
-  expect(await canvas.findByText('Have you tried "cat"?')).toBeVisible();
-  expect(await canvas.findByText('Have you tried "dog"?')).toBeVisible();
-};
-
-export const formValidationWithLayoutComponent: ComponentStory<typeof RenderForm> = args => (
-  <RenderForm {...args}>
-    <button type="submit">Submit</button>
-  </RenderForm>
-);
-formValidationWithLayoutComponent.args = {
-  configuration: DEFAULT_RENDER_CONFIGURATION,
-  form: {
-    display: 'form',
-    components: [
-      {
-        type: 'fieldset',
-        key: 'fieldset',
-        label: 'Fieldset',
-        components: [
-          {
-            type: 'textfield',
-            key: 'textfield',
-            label: 'Text input',
-            validate: {minLength: 5},
-          },
-        ],
-      },
-    ],
-  },
-  initialValues: {
-    textfield: 'foobar',
-  },
-};
-formValidationWithLayoutComponent.play = async ({canvasElement}) => {
-  const canvas = within(canvasElement);
-
-  // Pristine state should not show validation errors.
-  expect(await canvas.queryByText('Text input must have at least 5 characters.')).toBeNull();
-  await userEvent.clear(canvas.getByLabelText('Text input'));
-  await canvas.findByText('Text input must have at least 5 characters.');
-};
-
-//
-// renderComponent
-//
-
-export const renderComponent: ComponentStory<typeof RenderComponent> = args => (
-  <RenderComponent {...args}>
-    <button type="submit">Submit</button>
-  </RenderComponent>
-);
-renderComponent.args = {
-  component: FORMIO_EXAMPLE[0],
-  form: {
-    display: 'form',
-    components: FORMIO_EXAMPLE,
-  },
-};
-renderComponent.play = async ({canvasElement}) => {
-  const canvas = within(canvasElement);
-  await userEvent.clear(canvas.getByLabelText(FORMIO_EXAMPLE[0].label));
-  await userEvent.type(canvas.getByLabelText(FORMIO_EXAMPLE[0].label), 'John');
-};
-renderComponent.decorators = [FormikDecorator];
diff --git a/src/lib/renderer/renderer.tsx b/src/lib/renderer/renderer.tsx
deleted file mode 100644
index 797aa0a..0000000
--- a/src/lib/renderer/renderer.tsx
+++ /dev/null
@@ -1,221 +0,0 @@
-import {Column, Columns, Content, IColumnProps, TextField} from '@components';
-import {DEFAULT_VALIDATORS, getFormErrors} from '@lib/validation';
-import {IComponentProps, IFormioForm, IRenderConfiguration, IValues} from '@types';
-import {Formik, useField, useFormikContext} from 'formik';
-import {FormikHelpers} from 'formik/dist/types';
-import {Utils} from 'formiojs';
-import {ConditionalOptions} from 'formiojs/types/components/schema';
-import React, {FormHTMLAttributes, useContext} from 'react';
-
-export const DEFAULT_RENDER_CONFIGURATION: IRenderConfiguration = {
-  components: {
-    columns: Columns,
-    column: Column,
-    content: Content,
-    textfield: TextField,
-  },
-  validators: DEFAULT_VALIDATORS,
-};
-
-/** React context providing the IRenderConfiguration. */
-export const RenderContext = React.createContext<IRenderConfiguration>(
-  DEFAULT_RENDER_CONFIGURATION
-);
-
-/** Form.io does not guarantee a key for a form component, we use this as a fallback. */
-export const OF_MISSING_KEY = 'OF_MISSING_KEY';
-
-/**
- * Specifies the required and optional properties for a schema which can be rendered by the
- * renderer.
- *
- * A schema implementing `IRenderable` is not limited to `ComponentSchema` (as columns can be
- * rendered) and components will be rendered with the full (Component)Schema.
- */
-export interface IRenderable {
-  key: string;
-  type: string;
-
-  components?: IRenderable[];
-  clearOnHide?: boolean;
-  columns?: IRenderable[];
-  conditional?: ConditionalOptions;
-  hidden?: boolean;
-  id?: string;
-
-  [index: string]: any;
-}
-
-export interface IRenderFormProps {
-  children: React.ReactNode;
-  configuration: IRenderConfiguration;
-  form: IFormioForm;
-  formAttrs: FormHTMLAttributes<HTMLFormElement>;
-  initialValues: IValues;
-  onSubmit: (values: IValues, formikHelpers: FormikHelpers<IValues>) => void | Promise<any>;
-}
-
-/**
- * Renderer for rendering a Form.io configuration passed as form. Iterates over children and returns
- * `React.ReactElement` containing the rendered form.
- *
- * Submit form
- * ---
- *
- * The submit button is not provided by `RenderForm` but can be passed using a child component
- * (tree) which is rendered after the rendered form components.
- *
- *
- * Configuring custom components
- * ---
- *
- * `RenderContext` expects a `IRenderConfiguration` which is expected to be available via
- * `useContext(RenderContext)`. The IRenderConfiguration's `components` entry should contain a
- * mapping between a component type and the (React) component / Function. Overriding RenderContext
- * allows for specifying components.
- *
- * All components receive the `IComponentProps` as props containing the required context to render
- * the component. Components should return a React.ReactElement.
- *
- * @external {RenderContext} Provides `RenderContext`.
- */
-export const RenderForm: React.FC<IRenderFormProps> = ({
-  children,
-  configuration = DEFAULT_RENDER_CONFIGURATION,
-  form,
-  formAttrs,
-  initialValues = {},
-  onSubmit,
-}) => {
-  const childComponents =
-    form.components?.map((c: IRenderable) => (
-      <RenderComponent key={`${c.id}-${c.key}`} component={c} form={form} />
-    )) || null;
-
-  return (
-    <RenderContext.Provider value={configuration}>
-      <Formik
-        initialValues={initialValues}
-        onSubmit={onSubmit}
-        validate={values => getFormErrors(form, values, configuration.validators)}
-      >
-        {props => {
-          return (
-            <form onSubmit={props.handleSubmit} {...formAttrs}>
-              {childComponents}
-              {children}
-            </form>
-          );
-        }}
-      </Formik>
-    </RenderContext.Provider>
-  );
-};
-
-export interface IRenderComponentProps {
-  component: IRenderable;
-  form: IFormioForm;
-}
-
-/**
- * Renderer for rendering a Form.io component passed as component. Iterates over children (and
- * columns) and returns a `React.ReactElement` containing the rendered component.
- *
- * Columns
- * ---
- *
- * In certain cases a component (is not defined as) a component but something else (e.g. a column)
- * We deal with this edge cases by extending the schema with a custom (component) type allowing it
- * to be picked up by `useComponentType` and rendered.
- *
- * This allows for components to remain simple and increases compatibility with existing design
- * systems.
- *
- * Configuring custom components
- * ---
- *
- * `RenderContext` expects a `IRenderConfiguration` which is expected to be available via
- * `useContext(RenderContext)`. The IRenderConfiguration's `components` entry should contain a
- * mapping between a component type and the (React) component / Function. Overriding RenderContext
- * allows for specifying components.
- *
- * @see  {RenderForm} for more information.
- * @external {FormikContext} Expects `Formik`/`FormikContext` to be available.
- * @external {RenderContext} Expects `RenderContext` to be available.
- */
-export const RenderComponent: React.FC<IRenderComponentProps> = ({component, form}) => {
-  const {setFieldValue, values} = useFormikContext();
-  const key = component.key || OF_MISSING_KEY;
-  const Component = useComponentType(component);
-  const field = useField(key);
-
-  // Basic Form.io conditional.
-  const show = Utils.hasCondition(component)
-    ? Utils.checkCondition(component, null, values, form, null)
-    : !component.hidden;
-
-  if (!show && component.clearOnHide) {
-    setFieldValue(key, null);
-  }
-
-  if (!show) {
-    return null;
-  }
-
-  const [{value, onBlur, onChange}, {error}] = field;
-  const callbacks = {onBlur, onChange};
-  const errors = error?.split('\n') || []; // Reconstruct array.
-
-  // In certain cases a component (is not defined as) a component but something else (e.g. a column)
-  // We deal with these edge cases by extending the schema with a custom (component) type allowing
-  // it to be picked up by the renderer and passed to the parent
-  //
-  // This allows for components to remain simple and increases compatibility with existing design
-  // systems.
-  const cComponents = component.components || null;
-  const cColumns = component.columns || null;
-
-  // Regular children, either from component or column.
-  const childComponents = cComponents?.map(c => (
-    <RenderComponent key={`${c.id}-${c.key}`} component={c} form={form} />
-  ));
-
-  // Columns from component.
-  const childColumns = cColumns?.map(c => (
-    <RenderComponent
-      key={`${c.id}-${c.key}`}
-      component={{
-        ...c,
-        key: OF_MISSING_KEY,
-        type: 'column',
-      }}
-      form={form}
-    />
-  ));
-
-  // Return the component, pass children.
-  return (
-    <Component callbacks={callbacks} component={component} errors={errors} value={value}>
-      {childComponents || childColumns}
-    </Component>
-  );
-};
-
-/**
- * Fallback component, gets used when no other component is found within the `RenderContext`
- * The Fallback component makes sure (child) components keep being rendered with as little side
- * effects as possible.
- */
-const Fallback = (props: IComponentProps) => <React.Fragment>{props.children}</React.Fragment>;
-
-/**
- * Custom hook resolving the `React.ComponentType` from `RenderContext`.
- * @external {RenderContext} Expects `RenderContext` to be available.
- */
-export const useComponentType = (
-  component: IRenderable
-): React.ComponentType<IColumnProps | IComponentProps> => {
-  const renderConfiguration = useContext(RenderContext);
-  const ComponentType = renderConfiguration.components[component.type];
-  return ComponentType || Fallback;
-};
diff --git a/src/lib/validation/index.ts b/src/lib/validation/index.ts
deleted file mode 100644
index 9740b12..0000000
--- a/src/lib/validation/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export * from './validate';
-export * from './validators';
-export * from './validationerror';
diff --git a/src/lib/validation/validate.ts b/src/lib/validation/validate.ts
deleted file mode 100644
index fb23cdd..0000000
--- a/src/lib/validation/validate.ts
+++ /dev/null
@@ -1,193 +0,0 @@
-import {OF_MISSING_KEY} from '@lib/renderer';
-import {ValidationError} from '@lib/validation/validationerror';
-import {
-  validateMaxLength,
-  validateMinLength,
-  validatePattern,
-  validateRequired,
-} from '@lib/validation/validators';
-import {IFormioForm, IValues, Value, Values} from '@types';
-import {FormikErrors} from 'formik';
-import {ExtendedComponentSchema, Utils} from 'formiojs';
-
-export type validator = [
-  (
-    ExtendedComponentSchema: ExtendedComponentSchema,
-    value: Value,
-    message: string,
-    values?: IValues
-  ) => Promise<void>,
-  string
-];
-
-export const DEFAULT_VALIDATORS: validator[] = [
-  [validateMaxLength, '{{ label }} must have no more than {{ limit }} characters.'],
-  [validateMinLength, '{{ label }} must have at least {{ limit }} characters.'],
-  [validatePattern, '{{ label }} does not match the pattern {{ pattern }}'],
-  [validateRequired, '{{ label }} is required'],
-];
-
-type ErrorMap =
-  | Record<string, string>
-  | {
-      [key: string]: ErrorMap;
-    };
-
-/**
- * Validates `form` and combines errors for each component.
- * TODO: Implement "scoring/thresholds" for validators (determine what errors to show in specific cases).
- * TODO: Implement translations.
- * TODO: implement interpolation in validation error messages.
- * @param form Formio form.
- * @param values The values to validate.
- * @param validators See `validate` for more information.
- * @return A promise which resolves (`void`) if all `values` are considered valid and rejects
- * (`FormikErrors<value>`) it is considered invalid.
- */
-export const getFormErrors = async (
-  form: IFormioForm,
-  values: IValues,
-  validators: validator[] = DEFAULT_VALIDATORS
-): Promise<FormikErrors<IValues> | void> => {
-  try {
-    await validateForm(form, values, validators);
-    return;
-  } catch (result) {
-    const errors: FormikErrors<IValues> = {};
-    // Convert the validation errors to messages.
-    Object.entries(result).forEach(([key, validationErrors]: [string, ValidationError[]]) => {
-      const [tail, ...bits] = key.split('.').reverse();
-      let localErrorObject = errors as ErrorMap;
-      // deep-assign errors
-      bits.forEach(bit => {
-        if (!localErrorObject[bit]) {
-          localErrorObject[bit] = {};
-        }
-        localErrorObject = localErrorObject[bit] as ErrorMap;
-      });
-      const messages = validationErrors
-        .map(validationError => validationError.message.trim())
-        .join('\n');
-      localErrorObject[tail] = messages;
-    });
-    return errors;
-  }
-};
-
-const isSingleValue = (obj: IValues | Value | Values): obj is Value => {
-  if (obj === null) return true; // typeof null === 'object'
-  return typeof obj !== 'object';
-};
-
-/**
- * Validates `form`.
- *
- * Finds each Formio component schema in `form` and validates matching `values` using `validators`.
- * If all validators resolve a form is considered valid and the returned `Promise` resolves.
- * If not: the returned `Promise` rejects with an object mapping component keys to (an array of)
- * `ValidationError`s.
- *
- * @param form Formio form.
- * @param values The values to validate.
- * @param validators See `validate` for more information.
- * @throws {ValidationError[]} As promise rejection if invalid.
- * @return A promise which resolves (`void`) if all `values` are considered valid and rejects
- * (`{[index: string]: ValidationError[]}`) it is considered invalid.
- */
-export const validateForm = async (
-  form: IFormioForm,
-  values: IValues,
-  validators = DEFAULT_VALIDATORS
-): Promise<{[index: string]: ValidationError[]} | void> => {
-  const errors: {[key: string]: Error} = {};
-
-  // Collect all the components in the form definition so that each components set of
-  // validators can run
-  const componentsToValidate: ExtendedComponentSchema[] = [];
-  Utils.eachComponent(form.components, (component: ExtendedComponentSchema) => {
-    componentsToValidate.push(component);
-  });
-
-  // Run validation for all components in the form definition
-  const promises = componentsToValidate.map(async component => {
-    const key = component.key || OF_MISSING_KEY;
-    // lodash.get like to support nested data structures/keys with dots
-    // TODO: works only for objects right now
-    // FIXME: types can be more complex, value of a file upload is not a scalar, but an
-    // object!
-    // FIXME: the accumulator casting is also less than ideal, it should be possible
-    // to infer this correctly.
-    const value = key.split('.').reduce((acc: Value | IValues, bit: string) => {
-      if (Array.isArray(acc)) {
-        throw new Error('Arrays not supported yet');
-      }
-      if (acc === null) return null;
-      const nestedProp = (acc as IValues)[bit];
-      if (isSingleValue(nestedProp)) {
-        return nestedProp;
-      }
-      return nestedProp;
-    }, values) as Value;
-
-    try {
-      await validate(component, value, values, validators);
-    } catch (e) {
-      errors[key] = e;
-    }
-  });
-
-  await Promise.all(promises);
-  if (Object.keys(errors).length) {
-    return Promise.reject(errors);
-  }
-  return;
-};
-
-/**
- * Validates a component.
- *
- * Runs each function in `validators` and passing it `ExtendedComponentSchema` and `message`.
- * If all validators resolve a components is considered valid and the returned `Promise` resolves.
- * If not: the returned `Promise` rejects with an array of `ValidationError` (subclasses).
- *
- * @param ExtendedComponentSchema Formio component schema passed to each validator.
- * @param value The value to validate.
- * @param formValues All the form values.
- *
- * @param validators An array of `async function`/`string` tuples. The function being the validator
- * function, the string a message used to indicate an invalid value. Each validator is run in order.
- *
- *  The validator function is called with `ExtendedComponentSchema`, the `value` and the error `message`.
- *  The (async/sync) function should return a `Promise` which either resolves (valid) or rejects
- *  (invalid) with a (subclass of) `ValidationError` instantiated with `message`.
- *
- * @throws {ValidationError[]} As promise rejection if invalid.
- *
- * @return A promise which resolves (`void`) if `value` is considered valid and rejects
- * (`ValidationError[]`) it is considered invalid.
- */
-export const validate = async (
-  ExtendedComponentSchema: ExtendedComponentSchema,
-  value: Value,
-  formValues: IValues,
-  validators = DEFAULT_VALIDATORS
-): Promise<void> => {
-  // Map all validators into an array of `Promise`s, implementing a catch handler building the
-  // `errors` array.
-  const errors: ValidationError[] = [];
-  const promises = validators.map(async ([validatorFunction, message]) => {
-    try {
-      await validatorFunction(ExtendedComponentSchema, value, message, formValues);
-    } catch (e) {
-      errors.push(e);
-    }
-  });
-
-  // Wait until all promises are completed. When so: check if the `errors` array contains items,
-  // indicating that at least one validation error exists in the array.
-  await Promise.all(promises);
-  if (errors.length) {
-    return Promise.reject(errors);
-  }
-  return Promise.resolve();
-};
diff --git a/src/lib/validation/validationerror.ts b/src/lib/validation/validationerror.ts
deleted file mode 100644
index ed71968..0000000
--- a/src/lib/validation/validationerror.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-/**
- * Get thrown if validation fails.
- * @abstract This Error may be extended for each validator, populating the validator property.
- */
-export class ValidationError extends Error {
-  constructor(message = '') {
-    super(message);
-    this.name = 'ValidationError';
-  }
-}
diff --git a/src/lib/validation/validators/index.ts b/src/lib/validation/validators/index.ts
deleted file mode 100644
index f284e37..0000000
--- a/src/lib/validation/validators/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export * from './maxlength';
-export * from './minlength';
-export * from './pattern';
-export * from './required';
diff --git a/src/lib/validation/validators/maxlength.ts b/src/lib/validation/validators/maxlength.ts
deleted file mode 100644
index 38f0b98..0000000
--- a/src/lib/validation/validators/maxlength.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import {substitute} from '@lib/format';
-import {ValidationError} from '@lib/validation/validationerror';
-import {Value} from '@types';
-import {ExtendedComponentSchema} from 'formiojs';
-
-/**
- * Validates whether value is at most maxLength characters.
- * @throws {MaxLengthValidationError} As promise rejection if invalid.
- */
-export const validateMaxLength = async (
-  component: ExtendedComponentSchema,
-  value: Value,
-  message: string
-): Promise<void> => {
-  const length = String(value).length;
-  const limit = component.validate?.maxLength;
-  const valid = typeof limit !== 'number' || length <= limit;
-
-  if (!valid) {
-    throw new MaxLengthValidationError(substitute(message, {...component, length, limit, value}));
-  }
-};
-
-export class MaxLengthValidationError extends ValidationError {
-  validator = 'maxlength';
-}
diff --git a/src/lib/validation/validators/minlength.ts b/src/lib/validation/validators/minlength.ts
deleted file mode 100644
index da3c9e9..0000000
--- a/src/lib/validation/validators/minlength.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import {substitute} from '@lib/format';
-import {ValidationError} from '@lib/validation/validationerror';
-import {Value} from '@types';
-import {ExtendedComponentSchema} from 'formiojs';
-
-/**
- * Validates whether value is at least minLength characters.
- * @throws {MinLengthValidationError} As promise rejection if invalid.
- */
-export const validateMinLength = async (
-  component: ExtendedComponentSchema,
-  value: Value,
-  message: string
-): Promise<void> => {
-  const length = String(value).length;
-  const limit = component.validate?.minLength;
-  const valid = typeof limit !== 'number' || length >= limit;
-
-  if (!valid) {
-    throw new MinLengthValidationError(substitute(message, {...component, length, limit, value}));
-  }
-};
-
-export class MinLengthValidationError extends ValidationError {
-  validator = 'minlength';
-}
diff --git a/src/lib/validation/validators/pattern.ts b/src/lib/validation/validators/pattern.ts
deleted file mode 100644
index d54c573..0000000
--- a/src/lib/validation/validators/pattern.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import {substitute} from '@lib/format';
-import {ValidationError} from '@lib/validation/validationerror';
-import {Value} from '@types';
-import {ExtendedComponentSchema} from 'formiojs';
-
-/**
- * Validates whether value matches the (RegExp) pattern.
- * @throws {PatternValidationError} As promise rejection if invalid.
- */
-export const validatePattern = async (
-  component: ExtendedComponentSchema,
-  value: Value,
-  message: string
-): Promise<void> => {
-  const pattern = component.validate?.pattern;
-  const valid = Boolean(!pattern || String(value).match(new RegExp(pattern)));
-
-  if (!valid) {
-    throw new PatternValidationError(substitute(message, {...component, pattern, value}));
-  }
-};
-
-export class PatternValidationError extends ValidationError {
-  validator = 'pattern';
-}
diff --git a/src/lib/validation/validators/required.ts b/src/lib/validation/validators/required.ts
deleted file mode 100644
index 83d48a0..0000000
--- a/src/lib/validation/validators/required.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import {substitute} from '@lib/format';
-import {ValidationError} from '@lib/validation/validationerror';
-import {Value} from '@types';
-import {ExtendedComponentSchema} from 'formiojs';
-
-/**
- * Validates whether value is truthy when component is required.
- * @throws {RequiredValidationError} As promise rejection if invalid.
- */
-export const validateRequired = async (
-  component: ExtendedComponentSchema,
-  value: Value,
-  message: string
-): Promise<void> => {
-  const required = component.validate?.required;
-  const valid = Boolean(!required || value);
-
-  if (!valid) {
-    throw new RequiredValidationError(substitute(message, {...component, value}));
-  }
-};
-
-export class RequiredValidationError extends ValidationError {
-  validator = 'required';
-}
diff --git a/src/tests/custom-component/custom-component.stories.tsx b/src/tests/custom-component/custom-component.stories.tsx
deleted file mode 100644
index 1bb69fb..0000000
--- a/src/tests/custom-component/custom-component.stories.tsx
+++ /dev/null
@@ -1,102 +0,0 @@
-import {DEFAULT_RENDER_CONFIGURATION, RenderForm} from '@lib/renderer';
-import {DEFAULT_VALIDATORS, validator} from '@lib/validation';
-import {expect} from '@storybook/jest';
-import type {ComponentStory, Meta} from '@storybook/react';
-import {userEvent, within} from '@storybook/testing-library';
-import {IComponentProps} from '@types';
-import React from 'react';
-
-const meta: Meta<typeof RenderForm> = {
-  title: 'Usage / Configuration / Custom Components',
-  component: RenderForm,
-  decorators: [],
-  parameters: {},
-};
-export default meta;
-
-const VALIDATORS = DEFAULT_VALIDATORS.map(([fn, mssg], index): validator => {
-  if (index === 3) {
-    return [fn, 'Vul het verplichte veld in'];
-  }
-  return [fn, mssg];
-});
-
-const BootstrapInput: React.FC<IComponentProps> = ({callbacks, component, errors, value}) => (
-  <>
-    <link
-      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css"
-      rel="stylesheet"
-      integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ"
-      crossOrigin="anonymous"
-    />
-    <label className="form-label" htmlFor="firstName">
-      {component.label}
-    </label>
-    <div className={`input-group${errors.length ? ' has-validation' : ''}`}>
-      <input
-        id="firstName"
-        type="text"
-        className={`form-control${errors.length ? ' is-invalid' : ''}`}
-        name={component.key}
-        value={String(value || '')}
-        {...callbacks}
-      />
-
-      {errors.map(error => (
-        <div key={error} className="invalid-feedback">
-          {error}
-        </div>
-      ))}
-    </div>
-  </>
-);
-
-export const renderFormWithCustomComponent: ComponentStory<typeof RenderForm> = args => (
-  <RenderForm {...args} />
-);
-renderFormWithCustomComponent.args = {
-  configuration: {
-    ...DEFAULT_RENDER_CONFIGURATION,
-    components: {
-      textfield: BootstrapInput,
-    },
-    validators: VALIDATORS,
-  },
-  form: {
-    display: 'form',
-    components: [
-      {
-        type: 'textfield',
-        key: 'firstName',
-        label: 'First name',
-        validate: {
-          required: true,
-        },
-      },
-    ],
-  },
-};
-renderFormWithCustomComponent.play = async ({canvasElement}) => {
-  // Context.
-  const canvas = within(canvasElement);
-  const input = canvas.getByLabelText('First name');
-
-  // Assert rendered component is configured (Bootstrap) component.
-  expect(input.classList).toContain('form-control');
-
-  // Assert rendered component shows no error when invalid and pristine.
-  await userEvent.clear(input);
-  expect(await canvas.queryByText('Vul het verplichte veld in')).toBeNull();
-
-  // Assert rendered component shows no error when valid.
-  await userEvent.type(input, 'John', {delay: 30});
-  expect(await canvas.queryByText('Vul het verplichte veld in')).toBeNull();
-
-  // Assert rendered component shows error when invalid.
-  await userEvent.clear(input);
-  expect(await canvas.findByText('Vul het verplichte veld in')).toBeVisible();
-
-  // Assert rendered component removes error when valid.
-  await userEvent.type(input, 'John', {delay: 30});
-  expect(await canvas.queryByText('Vul het verplichte veld in')).toBeNull();
-};
diff --git a/src/tests/form/form-compatibility.stories.tsx b/src/tests/form/form-compatibility.stories.tsx
deleted file mode 100644
index 94ea89e..0000000
--- a/src/tests/form/form-compatibility.stories.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import {FORMIO_EXAMPLE} from '@fixtures';
-import {RenderForm} from '@lib/renderer';
-import {expect} from '@storybook/jest';
-import type {Meta} from '@storybook/react';
-import {within} from '@storybook/testing-library';
-
-import {compatibilityStoriesFactory} from '../utils/compatibility-stories-factory';
-
-const meta: Meta<typeof RenderForm> = {
-  title: 'Tests / Compatibility / Form',
-  component: RenderForm,
-  decorators: [],
-  parameters: {},
-};
-export default meta;
-
-export const [FormioRendersTextfield, RenderFormRendersTextField] = compatibilityStoriesFactory(
-  {
-    form: {
-      display: 'form',
-      components: FORMIO_EXAMPLE,
-    },
-  },
-  async ({canvasElement}) => {
-    const canvas = within(canvasElement);
-    expect(await canvas.findByLabelText(FORMIO_EXAMPLE[0].label)).toBeVisible();
-    expect(await canvas.findByLabelText(FORMIO_EXAMPLE[1].label)).toBeVisible();
-  }
-);
diff --git a/src/tests/textfield/textfield-compatibility.stories.tsx b/src/tests/textfield/textfield-compatibility.stories.tsx
deleted file mode 100644
index be3142a..0000000
--- a/src/tests/textfield/textfield-compatibility.stories.tsx
+++ /dev/null
@@ -1,96 +0,0 @@
-import {RenderForm} from '@lib/renderer';
-import {expect} from '@storybook/jest';
-import type {Meta} from '@storybook/react';
-import {userEvent, waitFor, within} from '@storybook/testing-library';
-
-import {compatibilityStoriesFactory} from '../utils/compatibility-stories-factory';
-import {delay} from '../utils/delay';
-
-const meta: Meta<typeof RenderForm> = {
-  title: 'Tests / Compatibility / TextField',
-  component: RenderForm,
-  decorators: [],
-  parameters: {},
-};
-export default meta;
-
-export const [FormioTextfieldHasNoCharcountByDefault, RenderFormTextfieldHasNoCharcountByDefault] =
-  compatibilityStoriesFactory(
-    {
-      form: {
-        display: 'form',
-        components: [{type: 'textfield', key: 'firstName', label: 'first name'}],
-      },
-    },
-    async ({canvasElement}) => {
-      const canvas = within(canvasElement);
-      const input = await canvas.findByLabelText('first name');
-      userEvent.click(input);
-      await waitFor(() => expect(input).toHaveFocus());
-      await userEvent.type(input, 'John', {delay: 10});
-      await delay(300);
-      expect(canvas.queryByText('4 characters')).toBeNull();
-    }
-  );
-
-export const [FormioTextfieldWithCharcount, RenderFormTextfieldWithCharcount] =
-  compatibilityStoriesFactory(
-    {
-      form: {
-        display: 'form',
-        components: [
-          {type: 'textfield', key: 'firstName', label: 'first name', showCharCount: true},
-        ],
-      },
-    },
-    async ({canvasElement}) => {
-      const canvas = within(canvasElement);
-      const input = await canvas.findByLabelText('first name');
-      userEvent.click(input);
-      await waitFor(() => expect(input).toHaveFocus());
-      await userEvent.type(input, 'John', {delay: 30});
-      expect(await canvas.findByText('4 characters')).toBeVisible();
-    }
-  );
-
-export const [FormioTextfieldWithoutCharcount, RenderFormTextfieldWithoutCharcount] =
-  compatibilityStoriesFactory(
-    {
-      form: {
-        display: 'form',
-        components: [
-          {type: 'textfield', key: 'firstName', label: 'first name', showCharCount: false},
-        ],
-      },
-    },
-    async ({canvasElement}) => {
-      const canvas = within(canvasElement);
-      const input = await canvas.findByLabelText('first name');
-      userEvent.click(input);
-      await waitFor(() => expect(input).toHaveFocus());
-      await userEvent.type(input, 'John', {delay: 10});
-      await delay(300);
-      expect(canvas.queryByText('4 characters')).toBeNull();
-    }
-  );
-
-export const [FormioTextfieldWithDescription, RenderFormTextfieldWithDescription] =
-  compatibilityStoriesFactory(
-    {
-      form: {
-        display: 'form',
-        components: [
-          {
-            type: 'textfield',
-            key: 'firstName',
-            label: 'first name',
-            description: 'Enter your first name',
-          },
-        ],
-      },
-    },
-    async ({canvasElement}) => {
-      const canvas = within(canvasElement);
-      expect(await canvas.findByText('Enter your first name')).toBeVisible();
-    }
-  );
diff --git a/src/tests/utils/compatibility-stories-factory.tsx b/src/tests/utils/compatibility-stories-factory.tsx
deleted file mode 100644
index 33d17af..0000000
--- a/src/tests/utils/compatibility-stories-factory.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import {RenderForm} from '@lib/renderer';
-import {PlayFunction} from '@storybook/csf/dist/story';
-import {Args, ComponentStory} from '@storybook/react';
-// @ts-ignore
-import {Form} from 'react-formio';
-
-/**
- * Generates a tuple of 2 stories, one for Form.io and one For RenderForm. Both stories receive
- * `args` and `play` function.
- */
-export const compatibilityStoriesFactory = (args: Args, play: PlayFunction) => {
-  const FormioStory = (args: Args) => <Form {...args} />;
-  FormioStory.args = args;
-  FormioStory.play = play;
-
-  const RenderFormStory: ComponentStory<typeof RenderForm> = args => <RenderForm {...args} />;
-  RenderFormStory.args = structuredClone(args);
-  RenderFormStory.play = play;
-
-  return [FormioStory, RenderFormStory];
-};
diff --git a/src/tests/utils/decorators.tsx b/src/tests/utils/decorators.tsx
deleted file mode 100644
index 405583b..0000000
--- a/src/tests/utils/decorators.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import {DecoratorFunction} from '@storybook/csf';
-import {ReactFramework} from '@storybook/react';
-import {Formik} from 'formik';
-
-export const FormikDecorator: DecoratorFunction<ReactFramework> = (Story, context) => {
-  const initialValues = context.parameters?.formik?.initialValues || {};
-  const initialErrors = context.parameters?.formik?.initialErrors || {};
-  return (
-    <Formik
-      initialValues={initialValues}
-      initialErrors={initialErrors}
-      enableReinitialize
-      onSubmit={(values, formikHelpers) => console.log(values, formikHelpers)}
-    >
-      <Story />
-    </Formik>
-  );
-};
diff --git a/src/tests/utils/delay.ts b/src/tests/utils/delay.ts
deleted file mode 100644
index 0595f88..0000000
--- a/src/tests/utils/delay.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-/**
- * Returns a Promise wrapped `setTimeout`, pushing "then" handler on the event loop queue,
- * optionally delayed by `milliseconds`.
- *
- * @example
- * // Execute after current items in event loop queue have been executed.
- * await delay();
- * // (Delayed code)
- *
- * @example
- * // Execute after 300 milliseconds.
- * await delay(300);
- * // (Delayed code)
- */
-export const delay = (milliseconds: number = 0): Promise<void> =>
-  new Promise(resolve => setTimeout(resolve, milliseconds));
diff --git a/src/tests/validation/validation-compatibility.stories.tsx b/src/tests/validation/validation-compatibility.stories.tsx
deleted file mode 100644
index 413310a..0000000
--- a/src/tests/validation/validation-compatibility.stories.tsx
+++ /dev/null
@@ -1,128 +0,0 @@
-import {RenderForm} from '@lib/renderer';
-import {expect} from '@storybook/jest';
-import type {Meta} from '@storybook/react';
-import {userEvent, waitFor, within} from '@storybook/testing-library';
-
-import {compatibilityStoriesFactory} from '../utils/compatibility-stories-factory';
-import {delay} from '../utils/delay';
-
-const meta: Meta<typeof RenderForm> = {
-  title: 'Tests / Compatibility / Validation',
-  component: RenderForm,
-  decorators: [],
-  parameters: {},
-};
-export default meta;
-
-export const [FormioTextfieldWithMaxLengthValidation, RenderFormTextfieldWithMaxLengthValidation] =
-  compatibilityStoriesFactory(
-    {
-      form: {
-        display: 'form',
-        components: [
-          {
-            type: 'textfield',
-            key: 'firstName',
-            label: 'first name',
-            validate: {
-              maxLength: 10,
-            },
-          },
-        ],
-      },
-    },
-    async ({canvasElement}) => {
-      const canvas = within(canvasElement);
-      const input = await canvas.findByLabelText('first name');
-      userEvent.click(input);
-      await delay();
-      await userEvent.type(input, 'The quick brown fox jumps over the lazy dog', {delay: 10});
-      await waitFor(async () =>
-        canvas.findByText('first name must have no more than 10 characters.')
-      );
-    }
-  );
-
-export const [FormioTextfieldWithMinLengthValidation, RenderFormTextfieldWithMinLengthValidation] =
-  compatibilityStoriesFactory(
-    {
-      form: {
-        display: 'form',
-        components: [
-          {
-            type: 'textfield',
-            key: 'firstName',
-            label: 'first name',
-            validate: {
-              minLength: 10,
-            },
-          },
-        ],
-      },
-    },
-    async ({canvasElement}) => {
-      const canvas = within(canvasElement);
-      const input = await canvas.findByLabelText('first name');
-      userEvent.click(input);
-      await waitFor(() => expect(input).toHaveFocus());
-      await userEvent.type(input, 'The quick', {delay: 10});
-      await waitFor(async () => canvas.findByText('first name must have at least 10 characters.'));
-    }
-  );
-
-export const [FormioTextfieldWithPatternValidation, RenderFormTextfieldWithPatternValidation] =
-  compatibilityStoriesFactory(
-    {
-      form: {
-        display: 'form',
-        components: [
-          {
-            type: 'textfield',
-            key: 'postcode',
-            label: 'Postcode',
-            validate: {
-              pattern: '^\\d{4}\\s?[a-zA-Z]{2}$',
-            },
-          },
-        ],
-      },
-    },
-    async ({canvasElement}) => {
-      const canvas = within(canvasElement);
-      const input = await canvas.findByLabelText('Postcode');
-      userEvent.click(input);
-      await waitFor(() => expect(input).toHaveFocus());
-      await userEvent.type(input, '123 AB', {delay: 10});
-      expect(
-        await canvas.findByText('Postcode does not match the pattern ^\\d{4}\\s?[a-zA-Z]{2}$')
-      ).toBeVisible();
-    }
-  );
-
-export const [FormioTextfieldWithRequiredValidation, RenderFormTextfieldWithRequiredValidation] =
-  compatibilityStoriesFactory(
-    {
-      form: {
-        display: 'form',
-        components: [
-          {
-            type: 'textfield',
-            key: 'firstName',
-            label: 'first name',
-            validate: {
-              required: true,
-            },
-          },
-        ],
-      },
-    },
-    async ({canvasElement}) => {
-      const canvas = within(canvasElement);
-      const input = await canvas.findByLabelText('first name');
-      userEvent.click(input);
-      await waitFor(() => expect(input).toHaveFocus());
-      await userEvent.type(input, 'John', {delay: 10});
-      await userEvent.clear(input);
-      expect(await canvas.findByText('first name is required')).toBeVisible();
-    }
-  );
diff --git a/src/types/componentprops.d.ts b/src/types/componentprops.d.ts
deleted file mode 100644
index cd42247..0000000
--- a/src/types/componentprops.d.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import {ComponentSchema} from 'formiojs';
-import React from 'react';
-
-import {ICallbackConfiguration} from './config';
-import {Value, Values} from './value';
-
-interface IComponentProps {
-  callbacks: ICallbackConfiguration;
-
-  children?: React.ReactNode;
-
-  component: ComponentSchema;
-
-  errors: string[];
-
-  value: Value | Values | undefined;
-}
diff --git a/src/types/config.d.ts b/src/types/config.d.ts
deleted file mode 100644
index 0718d3b..0000000
--- a/src/types/config.d.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import {IColumnProps} from '@components';
-import {validator} from '@lib/validation';
-import React from 'react';
-
-import {IComponentProps} from './componentprops';
-
-export interface IRenderConfiguration {
-  components: IComponentConfiguration;
-  validators: validator[];
-}
-
-/**
- * Callback configuration is explicitly marked as optional in order to deal with different schemas
- * as third-party systems might need different callbacks.
- */
-export interface ICallbackConfiguration {
-  onBlur?: callback | undefined;
-  onChange?: callback | undefined;
-  onSubmit?: callback | undefined;
-  [index: string]: callback | undefined;
-}
-
-export type callback = (e: Event | React.BaseSyntheticEvent) => void;
-
-export interface IComponentConfiguration {
-  [index: string]: React.ComponentType<IColumnProps | IComponentProps>;
-}
diff --git a/src/types/fixes.d.ts b/src/types/fixes.d.ts
deleted file mode 100644
index 2fdfc5e..0000000
--- a/src/types/fixes.d.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-/*
- * Namespace 'React' has no exported member 'StatelessComponent'
- * in formik, react-mapbox-gl
- */
-declare namespace React {
-  type StatelessComponent<P> = React.FunctionComponent<P>;
-}
diff --git a/src/types/form.d.ts b/src/types/form.d.ts
deleted file mode 100644
index cfe038a..0000000
--- a/src/types/form.d.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import {ExtendedComponentSchema} from 'formiojs';
-
-export interface IFormioForm {
-  display?: 'form';
-
-  components: ExtendedComponentSchema[];
-}
diff --git a/src/types/index.d.ts b/src/types/index.d.ts
deleted file mode 100644
index 6eeb8f5..0000000
--- a/src/types/index.d.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export * from './componentprops';
-export * from './value';
-export * from './config';
-export * from './form';
diff --git a/src/types/json.d.ts b/src/types/json.d.ts
deleted file mode 100644
index f8b1a00..0000000
--- a/src/types/json.d.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export type SerializedJSONPrimitive = boolean | number | string | null;
-
-export type SerializedJSON =
-  | SerializedJSONPrimitive
-  | SerializedJSON[]
-  | {[key: string]: SerializedJSON};
diff --git a/src/types/value.d.ts b/src/types/value.d.ts
deleted file mode 100644
index 85bfe85..0000000
--- a/src/types/value.d.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-/*
- TODO: value types need some overhaul, ideally we make them formio component type
- specific through a generic mechanisms. E.g. the value of a file component is
- *always* an array of objects, while the value of a checkbox is a boolean (possibly
- null?).
-
- Next, the formio component schema allows keys to be specified as foo.bar which
- results in a {"foo": {"bar": <value>}} datastructure. Due to their not being a
- well-defined, guaranteed mechanism for not-filled out fields, it's possible that
- certain (sub) keys are missing and lookups result in 'undefined'.
-*/
-
-export type Value = boolean | number | string | null;
-
-export type Values = Value[];
-
-export interface IValues {
-  [index: string]: Value | Values | IValues;
-}