diff --git a/x-pack/plugins/canvas/public/components/arg_add/arg_add.js b/x-pack/plugins/canvas/public/components/arg_add/arg_add.tsx
similarity index 71%
rename from x-pack/plugins/canvas/public/components/arg_add/arg_add.js
rename to x-pack/plugins/canvas/public/components/arg_add/arg_add.tsx
index 2d6d7d1046fdd..e85a2915a82b1 100644
--- a/x-pack/plugins/canvas/public/components/arg_add/arg_add.js
+++ b/x-pack/plugins/canvas/public/components/arg_add/arg_add.tsx
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React from 'react';
+import React, { FC, ReactEventHandler } from 'react';
 import PropTypes from 'prop-types';
 import {
   EuiDescriptionList,
@@ -12,7 +12,13 @@ import {
   EuiDescriptionListDescription,
 } from '@elastic/eui';
 
-export const ArgAdd = ({ onValueAdd, displayName, help }) => {
+interface Props {
+  displayName: string;
+  help: string;
+  onValueAdd?: ReactEventHandler;
+}
+
+export const ArgAdd: FC<Props> = ({ onValueAdd = () => {}, displayName, help }) => {
   return (
     <button className="canvasArg__add" onClick={onValueAdd}>
       <EuiDescriptionList compressed>
@@ -26,7 +32,7 @@ export const ArgAdd = ({ onValueAdd, displayName, help }) => {
 };
 
 ArgAdd.propTypes = {
-  displayName: PropTypes.string,
-  help: PropTypes.string,
+  displayName: PropTypes.string.isRequired,
+  help: PropTypes.string.isRequired,
   onValueAdd: PropTypes.func,
 };
diff --git a/x-pack/plugins/canvas/public/components/arg_add/index.js b/x-pack/plugins/canvas/public/components/arg_add/index.ts
similarity index 66%
rename from x-pack/plugins/canvas/public/components/arg_add/index.js
rename to x-pack/plugins/canvas/public/components/arg_add/index.ts
index 9a89a48edcef6..51049835094b0 100644
--- a/x-pack/plugins/canvas/public/components/arg_add/index.js
+++ b/x-pack/plugins/canvas/public/components/arg_add/index.ts
@@ -4,8 +4,4 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { pure } from 'recompose';
-
-import { ArgAdd as Component } from './arg_add';
-
-export const ArgAdd = pure(Component);
+export { ArgAdd } from './arg_add';
diff --git a/x-pack/plugins/canvas/public/components/arg_add_popover/arg_add_popover.tsx b/x-pack/plugins/canvas/public/components/arg_add_popover/arg_add_popover.tsx
index 26295acecd920..fc6b3cd1cd508 100644
--- a/x-pack/plugins/canvas/public/components/arg_add_popover/arg_add_popover.tsx
+++ b/x-pack/plugins/canvas/public/components/arg_add_popover/arg_add_popover.tsx
@@ -4,12 +4,11 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React from 'react';
+import React, { MouseEventHandler, FC } from 'react';
 import PropTypes from 'prop-types';
 import { EuiButtonIcon } from '@elastic/eui';
 // @ts-expect-error untyped local
 import { Popover, PopoverChildrenProps } from '../popover';
-// @ts-expect-error untyped local
 import { ArgAdd } from '../arg_add';
 // @ts-expect-error untyped local
 import { Arg } from '../../expression_types/arg';
@@ -27,8 +26,8 @@ interface Props {
   options: ArgOptions[];
 }
 
-export const ArgAddPopover = ({ options }: Props) => {
-  const button = (handleClick: React.MouseEventHandler<HTMLButtonElement>) => (
+export const ArgAddPopover: FC<Props> = ({ options }) => {
+  const button = (handleClick: MouseEventHandler<HTMLButtonElement>) => (
     <EuiButtonIcon
       iconType="plusInCircle"
       aria-label={strings.getAddAriaLabel()}
diff --git a/x-pack/plugins/canvas/public/components/arg_add_popover/index.ts b/x-pack/plugins/canvas/public/components/arg_add_popover/index.ts
index 7321c366ab94e..5efa11c6a3b26 100644
--- a/x-pack/plugins/canvas/public/components/arg_add_popover/index.ts
+++ b/x-pack/plugins/canvas/public/components/arg_add_popover/index.ts
@@ -4,7 +4,4 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { pure } from 'recompose';
-import { ArgAddPopover as Component } from './arg_add_popover';
-
-export const ArgAddPopover = pure(Component);
+export { ArgAddPopover } from './arg_add_popover';
diff --git a/x-pack/plugins/canvas/public/components/asset_manager/__examples__/__snapshots__/asset_manager.stories.storyshot b/x-pack/plugins/canvas/public/components/asset_manager/__examples__/__snapshots__/asset_manager.stories.storyshot
index 11c5681ebf79e..1b8f1480759f6 100644
--- a/x-pack/plugins/canvas/public/components/asset_manager/__examples__/__snapshots__/asset_manager.stories.storyshot
+++ b/x-pack/plugins/canvas/public/components/asset_manager/__examples__/__snapshots__/asset_manager.stories.storyshot
@@ -229,545 +229,6 @@ Array [
 ]
 `;
 
-exports[`Storyshots components/Assets/AssetManager redux 1`] = `
-Array [
-  <div
-    data-focus-guard={true}
-    style={
-      Object {
-        "height": "0px",
-        "left": "1px",
-        "overflow": "hidden",
-        "padding": 0,
-        "position": "fixed",
-        "top": "1px",
-        "width": "1px",
-      }
-    }
-    tabIndex={0}
-  />,
-  <div
-    data-focus-guard={true}
-    style={
-      Object {
-        "height": "0px",
-        "left": "1px",
-        "overflow": "hidden",
-        "padding": 0,
-        "position": "fixed",
-        "top": "1px",
-        "width": "1px",
-      }
-    }
-    tabIndex={1}
-  />,
-  <div
-    data-focus-lock-disabled={false}
-    onBlur={[Function]}
-    onFocus={[Function]}
-  >
-    <div
-      className="euiModal canvasAssetManager canvasModal--fixedSize"
-      onKeyDown={[Function]}
-      style={
-        Object {
-          "maxWidth": "1000px",
-        }
-      }
-      tabIndex={0}
-    >
-      <button
-        aria-label="Closes this modal window"
-        className="euiButtonIcon euiButtonIcon--text euiModal__closeIcon"
-        onClick={[Function]}
-        type="button"
-      >
-        <div
-          aria-hidden="true"
-          className="euiButtonIcon__icon"
-          data-euiicon-type="cross"
-          size="m"
-        />
-      </button>
-      <div
-        className="euiModal__flex"
-      >
-        <div
-          className="euiModalHeader canvasAssetManager__modalHeader"
-        >
-          <div
-            className="euiModalHeader__title canvasAssetManager__modalHeaderTitle"
-          >
-            Manage workpad assets
-          </div>
-          <div
-            className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive canvasAssetManager__fileUploadWrapper"
-          >
-            <div
-              className="euiFlexItem euiFlexItem--flexGrowZero"
-            >
-              <div
-                className="euiFilePicker euiFilePicker--compressed"
-              >
-                <div
-                  className="euiFilePicker__wrap"
-                >
-                  <input
-                    accept="image/*"
-                    aria-describedby="generated-id"
-                    className="euiFilePicker__input"
-                    multiple={true}
-                    onChange={[Function]}
-                    onDragLeave={[Function]}
-                    onDragOver={[Function]}
-                    onDrop={[Function]}
-                    type="file"
-                  />
-                  <div
-                    className="euiFilePicker__prompt"
-                    id="generated-id"
-                  >
-                    <div
-                      aria-hidden="true"
-                      className="euiFilePicker__icon"
-                      data-euiicon-type="importAction"
-                      size="m"
-                    />
-                    <div
-                      className="euiFilePicker__promptText"
-                    >
-                      Select or drag and drop images
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          className="euiModalBody"
-        >
-          <div
-            className="euiModalBody__overflow"
-          >
-            <div
-              className="euiText euiText--small"
-            >
-              <div
-                className="euiTextColor euiTextColor--subdued"
-              >
-                <p>
-                  Below are the image assets in this workpad. Any assets that are currently in use cannot be determined at this time. To reclaim space, delete assets.
-                </p>
-              </div>
-            </div>
-            <div
-              className="euiSpacer euiSpacer--l"
-            />
-            <div
-              className="euiFlexGrid euiFlexGrid--gutterLarge euiFlexGrid--fourths euiFlexGrid--responsive"
-            >
-              <div
-                className="euiFlexItem"
-              >
-                <div
-                  className="euiPanel euiPanel--paddingSmall canvasAsset"
-                >
-                  <div
-                    className="canvasAsset__thumb canvasCheckered"
-                  >
-                    <figure
-                      className="euiImage canvasAsset__img "
-                    >
-                      <img
-                        alt="Asset thumbnail"
-                        className="euiImage__img"
-                        src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1Ni4zMSA1Ni4zMSI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOiNmZmY7c3Ryb2tlOiMwMDc4YTA7c3Ryb2tlLW1pdGVybGltaXQ6MTA7c3Ryb2tlLXdpZHRoOjJweDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPlBsYW5lIEljb248L3RpdGxlPjxnIGlkPSJMYXllcl8yIiBkYXRhLW5hbWU9IkxheWVyIDIiPjxnIGlkPSJMYXllcl8xLTIiIGRhdGEtbmFtZT0iTGF5ZXIgMSI+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJNNDkuNTEsNDguOTMsNDEuMjYsMjIuNTIsNTMuNzYsMTBhNS4yOSw1LjI5LDAsMCwwLTcuNDgtNy40N2wtMTIuNSwxMi41TDcuMzgsNi43OUEuNy43LDAsMCwwLDYuNjksN0wxLjIsMTIuNDVhLjcuNywwLDAsMCwwLDFMMTkuODUsMjlsLTcuMjQsNy4yNC03Ljc0LS42YS43MS43MSwwLDAsMC0uNTMuMkwxLjIxLDM5YS42Ny42NywwLDAsMCwuMDgsMUw5LjQ1LDQ2bC4wNywwYy4xMS4xMy4yMi4yNi4zNC4zOHMuMjUuMjMuMzguMzRhLjM2LjM2LDAsMCwwLDAsLjA3TDE2LjMzLDU1YS42OC42OCwwLDAsMCwxLC4wN0wyMC40OSw1MmEuNjcuNjcsMCwwLDAsLjE5LS41NGwtLjU5LTcuNzQsNy4yNC03LjI0TDQyLjg1LDU1LjA2YS42OC42OCwwLDAsMCwxLDBsNS41LTUuNUEuNjYuNjYsMCwwLDAsNDkuNTEsNDguOTNaIi8+PC9nPjwvZz48L3N2Zz4="
-                        style={Object {}}
-                      />
-                    </figure>
-                  </div>
-                  <div
-                    className="euiSpacer euiSpacer--s"
-                  />
-                  <div
-                    className="euiText euiText--extraSmall eui-textBreakAll"
-                  >
-                    <p
-                      className="eui-textBreakAll"
-                    >
-                      <strong>
-                        airplane
-                      </strong>
-                      <br />
-                      <span
-                        className="euiTextColor euiTextColor--subdued"
-                      >
-                        <small>
-                          (
-                          1
-                           kb)
-                        </small>
-                      </span>
-                    </p>
-                  </div>
-                  <div
-                    className="euiSpacer euiSpacer--s"
-                  />
-                  <div
-                    className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsBaseline euiFlexGroup--justifyContentCenter euiFlexGroup--directionRow"
-                  >
-                    <div
-                      className="euiFlexItem euiFlexItem--flexGrowZero asset-create-image"
-                    >
-                      <span
-                        className="euiToolTipAnchor"
-                        onKeyUp={[Function]}
-                        onMouseOut={[Function]}
-                        onMouseOver={[Function]}
-                      >
-                        <button
-                          aria-label="Create image element"
-                          className="euiButtonIcon euiButtonIcon--primary"
-                          onBlur={[Function]}
-                          onClick={[Function]}
-                          onFocus={[Function]}
-                          type="button"
-                        >
-                          <div
-                            aria-hidden="true"
-                            className="euiButtonIcon__icon"
-                            data-euiicon-type="vector"
-                            size="m"
-                          />
-                        </button>
-                      </span>
-                    </div>
-                    <div
-                      className="euiFlexItem euiFlexItem--flexGrowZero asset-download"
-                    >
-                      <span
-                        className="euiToolTipAnchor"
-                        onKeyUp={[Function]}
-                        onMouseOut={[Function]}
-                        onMouseOver={[Function]}
-                      >
-                        <div
-                          className="canvasDownload"
-                          onClick={[Function]}
-                          onKeyPress={[Function]}
-                          role="button"
-                          tabIndex={0}
-                        >
-                          <button
-                            aria-label="Download"
-                            className="euiButtonIcon euiButtonIcon--primary"
-                            type="button"
-                          >
-                            <div
-                              aria-hidden="true"
-                              className="euiButtonIcon__icon"
-                              data-euiicon-type="sortDown"
-                              size="m"
-                            />
-                          </button>
-                        </div>
-                      </span>
-                    </div>
-                    <div
-                      className="euiFlexItem euiFlexItem--flexGrowZero"
-                    >
-                      <span
-                        className="euiToolTipAnchor"
-                        onKeyUp={[Function]}
-                        onMouseOut={[Function]}
-                        onMouseOver={[Function]}
-                      >
-                        <div
-                          className="canvasClipboard"
-                          onClick={[Function]}
-                          onKeyPress={[Function]}
-                          role="button"
-                          tabIndex={0}
-                        >
-                          <button
-                            aria-label="Copy id to clipboard"
-                            className="euiButtonIcon euiButtonIcon--primary"
-                            type="button"
-                          >
-                            <div
-                              aria-hidden="true"
-                              className="euiButtonIcon__icon"
-                              data-euiicon-type="copyClipboard"
-                              size="m"
-                            />
-                          </button>
-                        </div>
-                      </span>
-                    </div>
-                    <div
-                      className="euiFlexItem euiFlexItem--flexGrowZero"
-                    >
-                      <span
-                        className="euiToolTipAnchor"
-                        onKeyUp={[Function]}
-                        onMouseOut={[Function]}
-                        onMouseOver={[Function]}
-                      >
-                        <button
-                          aria-label="Delete"
-                          className="euiButtonIcon euiButtonIcon--danger"
-                          onBlur={[Function]}
-                          onClick={[Function]}
-                          onFocus={[Function]}
-                          type="button"
-                        >
-                          <div
-                            aria-hidden="true"
-                            className="euiButtonIcon__icon"
-                            data-euiicon-type="trash"
-                            size="m"
-                          />
-                        </button>
-                      </span>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div
-                className="euiFlexItem"
-              >
-                <div
-                  className="euiPanel euiPanel--paddingSmall canvasAsset"
-                >
-                  <div
-                    className="canvasAsset__thumb canvasCheckered"
-                  >
-                    <figure
-                      className="euiImage canvasAsset__img "
-                    >
-                      <img
-                        alt="Asset thumbnail"
-                        className="euiImage__img"
-                        src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzOC4zOSA1Ny41NyI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOiNmZmY7c3Ryb2tlOiMwMTliOGY7c3Ryb2tlLW1pdGVybGltaXQ6MTA7c3Ryb2tlLXdpZHRoOjJweDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPkxvY2F0aW9uIEljb248L3RpdGxlPjxnIGlkPSJMYXllcl8yIiBkYXRhLW5hbWU9IkxheWVyIDIiPjxnIGlkPSJMYXllcl8xLTIiIGRhdGEtbmFtZT0iTGF5ZXIgMSI+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJNMTkuMTksMUExOC4xOSwxOC4xOSwwLDAsMCwyLjk0LDI3LjM2aDBhMTkuNTEsMTkuNTEsMCwwLDAsMSwxLjc4TDE5LjE5LDU1LjU3LDM0LjM4LDI5LjIxQTE4LjE5LDE4LjE5LDAsMCwwLDE5LjE5LDFabTAsMjMuMjlhNS41Myw1LjUzLDAsMSwxLDUuNTMtNS41M0E1LjUzLDUuNTMsMCwwLDEsMTkuMTksMjQuMjlaIi8+PC9nPjwvZz48L3N2Zz4="
-                        style={Object {}}
-                      />
-                    </figure>
-                  </div>
-                  <div
-                    className="euiSpacer euiSpacer--s"
-                  />
-                  <div
-                    className="euiText euiText--extraSmall eui-textBreakAll"
-                  >
-                    <p
-                      className="eui-textBreakAll"
-                    >
-                      <strong>
-                        marker
-                      </strong>
-                      <br />
-                      <span
-                        className="euiTextColor euiTextColor--subdued"
-                      >
-                        <small>
-                          (
-                          1
-                           kb)
-                        </small>
-                      </span>
-                    </p>
-                  </div>
-                  <div
-                    className="euiSpacer euiSpacer--s"
-                  />
-                  <div
-                    className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsBaseline euiFlexGroup--justifyContentCenter euiFlexGroup--directionRow"
-                  >
-                    <div
-                      className="euiFlexItem euiFlexItem--flexGrowZero asset-create-image"
-                    >
-                      <span
-                        className="euiToolTipAnchor"
-                        onKeyUp={[Function]}
-                        onMouseOut={[Function]}
-                        onMouseOver={[Function]}
-                      >
-                        <button
-                          aria-label="Create image element"
-                          className="euiButtonIcon euiButtonIcon--primary"
-                          onBlur={[Function]}
-                          onClick={[Function]}
-                          onFocus={[Function]}
-                          type="button"
-                        >
-                          <div
-                            aria-hidden="true"
-                            className="euiButtonIcon__icon"
-                            data-euiicon-type="vector"
-                            size="m"
-                          />
-                        </button>
-                      </span>
-                    </div>
-                    <div
-                      className="euiFlexItem euiFlexItem--flexGrowZero asset-download"
-                    >
-                      <span
-                        className="euiToolTipAnchor"
-                        onKeyUp={[Function]}
-                        onMouseOut={[Function]}
-                        onMouseOver={[Function]}
-                      >
-                        <div
-                          className="canvasDownload"
-                          onClick={[Function]}
-                          onKeyPress={[Function]}
-                          role="button"
-                          tabIndex={0}
-                        >
-                          <button
-                            aria-label="Download"
-                            className="euiButtonIcon euiButtonIcon--primary"
-                            type="button"
-                          >
-                            <div
-                              aria-hidden="true"
-                              className="euiButtonIcon__icon"
-                              data-euiicon-type="sortDown"
-                              size="m"
-                            />
-                          </button>
-                        </div>
-                      </span>
-                    </div>
-                    <div
-                      className="euiFlexItem euiFlexItem--flexGrowZero"
-                    >
-                      <span
-                        className="euiToolTipAnchor"
-                        onKeyUp={[Function]}
-                        onMouseOut={[Function]}
-                        onMouseOver={[Function]}
-                      >
-                        <div
-                          className="canvasClipboard"
-                          onClick={[Function]}
-                          onKeyPress={[Function]}
-                          role="button"
-                          tabIndex={0}
-                        >
-                          <button
-                            aria-label="Copy id to clipboard"
-                            className="euiButtonIcon euiButtonIcon--primary"
-                            type="button"
-                          >
-                            <div
-                              aria-hidden="true"
-                              className="euiButtonIcon__icon"
-                              data-euiicon-type="copyClipboard"
-                              size="m"
-                            />
-                          </button>
-                        </div>
-                      </span>
-                    </div>
-                    <div
-                      className="euiFlexItem euiFlexItem--flexGrowZero"
-                    >
-                      <span
-                        className="euiToolTipAnchor"
-                        onKeyUp={[Function]}
-                        onMouseOut={[Function]}
-                        onMouseOver={[Function]}
-                      >
-                        <button
-                          aria-label="Delete"
-                          className="euiButtonIcon euiButtonIcon--danger"
-                          onBlur={[Function]}
-                          onClick={[Function]}
-                          onFocus={[Function]}
-                          type="button"
-                        >
-                          <div
-                            aria-hidden="true"
-                            className="euiButtonIcon__icon"
-                            data-euiicon-type="trash"
-                            size="m"
-                          />
-                        </button>
-                      </span>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          className="euiModalFooter canvasAssetManager__modalFooter"
-        >
-          <div
-            className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow canvasAssetManager__meterWrapper"
-          >
-            <div
-              className="euiFlexItem"
-            >
-              <progress
-                aria-labelledby="CanvasAssetManagerLabel"
-                className="euiProgress euiProgress--native euiProgress--s euiProgress--secondary"
-                max={25000}
-                value={2}
-              />
-            </div>
-            <div
-              className="euiFlexItem euiFlexItem--flexGrowZero eui-textNoWrap"
-            >
-              <div
-                className="euiText euiText--medium"
-                id="CanvasAssetManagerLabel"
-              >
-                0% space used
-              </div>
-            </div>
-          </div>
-          <button
-            className="euiButton euiButton--primary euiButton--small"
-            onClick={[Function]}
-            type="button"
-          >
-            <span
-              className="euiButton__content"
-            >
-              <span
-                className="euiButton__text"
-              >
-                Close
-              </span>
-            </span>
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>,
-  <div
-    data-focus-guard={true}
-    style={
-      Object {
-        "height": "0px",
-        "left": "1px",
-        "overflow": "hidden",
-        "padding": 0,
-        "position": "fixed",
-        "top": "1px",
-        "width": "1px",
-      }
-    }
-    tabIndex={0}
-  />,
-]
-`;
-
 exports[`Storyshots components/Assets/AssetManager two assets 1`] = `
 Array [
   <div
diff --git a/x-pack/plugins/canvas/public/components/color_dot/color_dot.tsx b/x-pack/plugins/canvas/public/components/color_dot/color_dot.tsx
index f6afd11d405ca..478b501dcd5ec 100644
--- a/x-pack/plugins/canvas/public/components/color_dot/color_dot.tsx
+++ b/x-pack/plugins/canvas/public/components/color_dot/color_dot.tsx
@@ -4,18 +4,18 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import React, { FC, ReactNode } from 'react';
 import PropTypes from 'prop-types';
-import React, { FunctionComponent, ReactNode } from 'react';
 import tinycolor from 'tinycolor2';
 
-export interface Props {
-  /** Any valid CSS color. If not a valid CSS string, the dot will be transparent and checkered */
-  value?: string;
+interface Props {
   /** Nodes to display within the dot.  Should fit within the constraints. */
   children?: ReactNode;
+  /** Any valid CSS color. If not a valid CSS string, the dot will be transparent and checkered */
+  value?: string;
 }
 
-export const ColorDot: FunctionComponent<Props> = ({ value, children }) => {
+export const ColorDot: FC<Props> = ({ value, children }) => {
   const tc = tinycolor(value);
   let style = {};
 
@@ -34,6 +34,6 @@ export const ColorDot: FunctionComponent<Props> = ({ value, children }) => {
 };
 
 ColorDot.propTypes = {
-  value: PropTypes.string,
   children: PropTypes.node,
+  value: PropTypes.string,
 };
diff --git a/x-pack/plugins/canvas/public/components/color_dot/index.ts b/x-pack/plugins/canvas/public/components/color_dot/index.ts
index aacfdf4e0cc74..72936f6133886 100644
--- a/x-pack/plugins/canvas/public/components/color_dot/index.ts
+++ b/x-pack/plugins/canvas/public/components/color_dot/index.ts
@@ -4,9 +4,4 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { pure } from 'recompose';
-
-import { ColorDot as Component } from './color_dot';
-
-export { Props } from './color_dot';
-export const ColorDot = pure(Component);
+export { ColorDot } from './color_dot';
diff --git a/x-pack/plugins/canvas/public/components/color_manager/color_manager.tsx b/x-pack/plugins/canvas/public/components/color_manager/color_manager.tsx
index 8855bffc5e771..88bf93a3ca84a 100644
--- a/x-pack/plugins/canvas/public/components/color_manager/color_manager.tsx
+++ b/x-pack/plugins/canvas/public/components/color_manager/color_manager.tsx
@@ -4,9 +4,9 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { EuiButtonIcon, EuiFieldText, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import React, { FC } from 'react';
 import PropTypes from 'prop-types';
-import React, { FunctionComponent } from 'react';
+import { EuiButtonIcon, EuiFieldText, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import tinycolor from 'tinycolor2';
 import { ColorDot } from '../color_dot/color_dot';
 
@@ -15,17 +15,17 @@ import { ComponentStrings } from '../../../i18n/components';
 const { ColorManager: strings } = ComponentStrings;
 
 export interface Props {
+  /**
+   * Determines if the add/remove buttons are displayed.
+   * @default false
+   */
+  hasButtons?: boolean;
   /** The function to call when the Add Color button is clicked. The button will be disabled if there is no handler. */
   onAddColor?: (value: string) => void;
   /** The function to call when the value is changed */
   onChange: (value: string) => void;
   /** The function to call when the Remove Color button is clicked. The button will be disabled if there is no handler. */
   onRemoveColor?: (value: string) => void;
-  /**
-   * Determines if the add/remove buttons are displayed.
-   * @default false
-   */
-  hasButtons?: boolean;
   /**
    * The value of the color manager. Only honors valid CSS values.
    * @default ''
@@ -33,12 +33,12 @@ export interface Props {
   value?: string;
 }
 
-export const ColorManager: FunctionComponent<Props> = ({
-  value = '',
+export const ColorManager: FC<Props> = ({
+  hasButtons = false,
   onAddColor,
-  onRemoveColor,
   onChange,
-  hasButtons = false,
+  onRemoveColor,
+  value = '',
 }) => {
   const tc = tinycolor(value);
   const validColor = tc.isValid();
diff --git a/x-pack/plugins/canvas/public/components/color_manager/index.ts b/x-pack/plugins/canvas/public/components/color_manager/index.ts
index d7f59b38a74c5..9958c17cf1941 100644
--- a/x-pack/plugins/canvas/public/components/color_manager/index.ts
+++ b/x-pack/plugins/canvas/public/components/color_manager/index.ts
@@ -4,9 +4,4 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { pure } from 'recompose';
-
-import { ColorManager as Component } from './color_manager';
-
-export { Props } from './color_manager';
-export const ColorManager = pure(Component);
+export { ColorManager, Props } from './color_manager';
diff --git a/x-pack/plugins/canvas/public/components/color_palette/color_palette.tsx b/x-pack/plugins/canvas/public/components/color_palette/color_palette.tsx
index 09bc08f9ae541..d3b1936d4c365 100644
--- a/x-pack/plugins/canvas/public/components/color_palette/color_palette.tsx
+++ b/x-pack/plugins/canvas/public/components/color_palette/color_palette.tsx
@@ -4,15 +4,15 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { EuiIcon, EuiLink } from '@elastic/eui';
+import React, { FC } from 'react';
 import PropTypes from 'prop-types';
-import React, { FunctionComponent } from 'react';
+import { EuiIcon, EuiLink } from '@elastic/eui';
 import tinycolor from 'tinycolor2';
 import { readableColor } from '../../lib/readable_color';
 import { ColorDot } from '../color_dot';
 import { ItemGrid } from '../item_grid';
 
-export interface Props {
+interface Props {
   /**
    * An array of hexadecimal color values. Non-hex will be ignored.
    * @default []
@@ -32,7 +32,7 @@ export interface Props {
   value?: string;
 }
 
-export const ColorPalette: FunctionComponent<Props> = ({
+export const ColorPalette: FC<Props> = ({
   colors = [],
   colorsPerRow = 6,
   onChange,
diff --git a/x-pack/plugins/canvas/public/components/color_palette/index.ts b/x-pack/plugins/canvas/public/components/color_palette/index.ts
index fa71bc8b3b9b0..2605868b94279 100644
--- a/x-pack/plugins/canvas/public/components/color_palette/index.ts
+++ b/x-pack/plugins/canvas/public/components/color_palette/index.ts
@@ -4,8 +4,4 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { pure } from 'recompose';
-import { ColorPalette as Component } from './color_palette';
-
-export { Props } from './color_palette';
-export const ColorPalette = pure(Component);
+export { ColorPalette } from './color_palette';
diff --git a/x-pack/plugins/canvas/public/components/color_picker/color_picker.tsx b/x-pack/plugins/canvas/public/components/color_picker/color_picker.tsx
index 2bf17301b7b38..8de3ddb3d03a4 100644
--- a/x-pack/plugins/canvas/public/components/color_picker/color_picker.tsx
+++ b/x-pack/plugins/canvas/public/components/color_picker/color_picker.tsx
@@ -4,9 +4,10 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import React, { FC } from 'react';
 import PropTypes from 'prop-types';
-import React, { FunctionComponent } from 'react';
 import tinycolor from 'tinycolor2';
+
 import { ColorManager, Props as ColorManagerProps } from '../color_manager';
 import { ColorPalette } from '../color_palette';
 
@@ -18,7 +19,7 @@ export interface Props extends ColorManagerProps {
   colors?: string[];
 }
 
-export const ColorPicker: FunctionComponent<Props> = ({
+export const ColorPicker: FC<Props> = ({
   colors = [],
   hasButtons = false,
   onAddColor,
diff --git a/x-pack/plugins/canvas/public/components/color_picker/index.ts b/x-pack/plugins/canvas/public/components/color_picker/index.ts
index 88968d11a665c..35dd067ab6d39 100644
--- a/x-pack/plugins/canvas/public/components/color_picker/index.ts
+++ b/x-pack/plugins/canvas/public/components/color_picker/index.ts
@@ -4,9 +4,4 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { pure } from 'recompose';
-
-import { ColorPicker as Component } from './color_picker';
-
-export { Props } from './color_picker';
-export const ColorPicker = pure(Component);
+export { ColorPicker, Props } from './color_picker';
diff --git a/x-pack/plugins/canvas/public/components/color_picker_popover/color_picker_popover.tsx b/x-pack/plugins/canvas/public/components/color_picker_popover/color_picker_popover.tsx
index 9e8a6e88b649b..143e1a7cee6ac 100644
--- a/x-pack/plugins/canvas/public/components/color_picker_popover/color_picker_popover.tsx
+++ b/x-pack/plugins/canvas/public/components/color_picker_popover/color_picker_popover.tsx
@@ -4,20 +4,21 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { EuiLink, PopoverAnchorPosition } from '@elastic/eui';
+import React, { FC } from 'react';
 import PropTypes from 'prop-types';
-import React, { FunctionComponent } from 'react';
+import { EuiLink, PopoverAnchorPosition } from '@elastic/eui';
 import tinycolor from 'tinycolor2';
+
 import { ColorDot } from '../color_dot';
 import { ColorPicker, Props as ColorPickerProps } from '../color_picker';
 import { Popover } from '../popover';
 
 export interface Props extends ColorPickerProps {
-  anchorPosition: PopoverAnchorPosition;
+  anchorPosition?: PopoverAnchorPosition;
   ariaLabel?: string;
 }
 
-export const ColorPickerPopover: FunctionComponent<Props> = (props: Props) => {
+export const ColorPickerPopover: FC<Props> = (props: Props) => {
   const { value, anchorPosition, ariaLabel, ...rest } = props;
   const button = (handleClick: React.MouseEventHandler<HTMLButtonElement>) => (
     <EuiLink
diff --git a/x-pack/plugins/canvas/public/components/color_picker_popover/index.ts b/x-pack/plugins/canvas/public/components/color_picker_popover/index.ts
index df74301ff9e62..7ff8791103486 100644
--- a/x-pack/plugins/canvas/public/components/color_picker_popover/index.ts
+++ b/x-pack/plugins/canvas/public/components/color_picker_popover/index.ts
@@ -4,9 +4,4 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { pure } from 'recompose';
-
-import { ColorPickerPopover as Component } from './color_picker_popover';
-
-export { Props } from './color_picker_popover';
-export const ColorPickerPopover = pure(Component);
+export { ColorPickerPopover, Props } from './color_picker_popover';
diff --git a/x-pack/plugins/canvas/public/components/datatable/datatable.js b/x-pack/plugins/canvas/public/components/datatable/datatable.tsx
similarity index 78%
rename from x-pack/plugins/canvas/public/components/datatable/datatable.js
rename to x-pack/plugins/canvas/public/components/datatable/datatable.tsx
index 2b7c7464f7b84..4f06ac0749aaf 100644
--- a/x-pack/plugins/canvas/public/components/datatable/datatable.js
+++ b/x-pack/plugins/canvas/public/components/datatable/datatable.tsx
@@ -4,13 +4,16 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React from 'react';
-import { EuiIcon, EuiPagination } from '@elastic/eui';
+import React, { FC } from 'react';
 import PropTypes from 'prop-types';
+import { EuiIcon, EuiPagination } from '@elastic/eui';
 import moment from 'moment';
 import { Paginate } from '../paginate';
+import { Datatable as DatatableType, DatatableColumn } from '../../../types';
+
+type IconType = 'string' | 'number' | 'date' | 'boolean' | 'null';
 
-const getIcon = (type) => {
+const getIcon = (type: IconType) => {
   if (type === null) {
     return;
   }
@@ -36,19 +39,31 @@ const getIcon = (type) => {
   return <EuiIcon type={icon} color="subdued" />;
 };
 
-const getColumnName = (col) => (typeof col === 'string' ? col : col.name);
+const getColumnName = (col: DatatableColumn) => (typeof col === 'string' ? col : col.name);
 
-const getColumnType = (col) => col.type || null;
+const getColumnType = (col: DatatableColumn) => col.type || null;
 
-const getFormattedValue = (val, type) => {
+const getFormattedValue = (val: any, type: any) => {
   if (type === 'date') {
     return moment(val).format();
   }
   return String(val);
 };
 
-export const Datatable = ({ datatable, perPage, paginate, showHeader }) => (
-  <Paginate rows={datatable.rows} perPage={perPage || 10}>
+interface Props {
+  datatable: DatatableType;
+  paginate?: boolean;
+  perPage?: number;
+  showHeader?: boolean;
+}
+
+export const Datatable: FC<Props> = ({
+  datatable,
+  paginate = false,
+  perPage = 10,
+  showHeader = false,
+}) => (
+  <Paginate rows={datatable.rows} perPage={perPage}>
     {({ rows, setPage, pageNumber, totalPages }) => (
       <div className="canvasDataTable">
         <div className="canvasDataTable__tableWrapper">
@@ -91,7 +106,7 @@ export const Datatable = ({ datatable, perPage, paginate, showHeader }) => (
 
 Datatable.propTypes = {
   datatable: PropTypes.object.isRequired,
-  perPage: PropTypes.number,
   paginate: PropTypes.bool,
+  perPage: PropTypes.number,
   showHeader: PropTypes.bool,
 };
diff --git a/x-pack/plugins/canvas/public/components/datatable/index.js b/x-pack/plugins/canvas/public/components/datatable/index.ts
similarity index 64%
rename from x-pack/plugins/canvas/public/components/datatable/index.js
rename to x-pack/plugins/canvas/public/components/datatable/index.ts
index c7837005368e5..e39b909c53460 100644
--- a/x-pack/plugins/canvas/public/components/datatable/index.js
+++ b/x-pack/plugins/canvas/public/components/datatable/index.ts
@@ -4,7 +4,4 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { pure } from 'recompose';
-import { Datatable as Component } from './datatable';
-
-export const Datatable = pure(Component);
+export { Datatable } from './datatable';
diff --git a/x-pack/plugins/canvas/public/components/font_picker/__snapshots__/font_picker.stories.storyshot b/x-pack/plugins/canvas/public/components/font_picker/__stories__/__snapshots__/font_picker.stories.storyshot
similarity index 100%
rename from x-pack/plugins/canvas/public/components/font_picker/__snapshots__/font_picker.stories.storyshot
rename to x-pack/plugins/canvas/public/components/font_picker/__stories__/__snapshots__/font_picker.stories.storyshot
diff --git a/x-pack/plugins/canvas/public/components/font_picker/font_picker.stories.tsx b/x-pack/plugins/canvas/public/components/font_picker/__stories__/font_picker.stories.tsx
similarity index 84%
rename from x-pack/plugins/canvas/public/components/font_picker/font_picker.stories.tsx
rename to x-pack/plugins/canvas/public/components/font_picker/__stories__/font_picker.stories.tsx
index 0ad1e01252002..34cb3d644cccb 100644
--- a/x-pack/plugins/canvas/public/components/font_picker/font_picker.stories.tsx
+++ b/x-pack/plugins/canvas/public/components/font_picker/__stories__/font_picker.stories.tsx
@@ -7,8 +7,8 @@
 import { action } from '@storybook/addon-actions';
 import { storiesOf } from '@storybook/react';
 import React from 'react';
-import { americanTypewriter } from '../../../common/lib/fonts';
-import { FontPicker } from './font_picker';
+import { americanTypewriter } from '../../../../common/lib/fonts';
+import { FontPicker } from '../font_picker';
 
 storiesOf('components/FontPicker', module)
   .add('default', () => <FontPicker onSelect={action('onSelect')} />)
diff --git a/x-pack/plugins/canvas/public/components/font_picker/font_picker.tsx b/x-pack/plugins/canvas/public/components/font_picker/font_picker.tsx
index 556a3c5452160..2b75841e1b7a5 100644
--- a/x-pack/plugins/canvas/public/components/font_picker/font_picker.tsx
+++ b/x-pack/plugins/canvas/public/components/font_picker/font_picker.tsx
@@ -4,14 +4,14 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { EuiSuperSelect } from '@elastic/eui';
+import React, { FC } from 'react';
 import PropTypes from 'prop-types';
-import React, { FunctionComponent } from 'react';
+import { EuiSuperSelect } from '@elastic/eui';
 import { fonts, FontValue } from '../../../common/lib/fonts';
 
 interface DisplayedFont {
-  value: string;
   label: string;
+  value: string;
 }
 
 interface Props {
@@ -19,9 +19,7 @@ interface Props {
   value?: FontValue;
 }
 
-export const FontPicker: FunctionComponent<Props> = (props) => {
-  const { value, onSelect } = props;
-
+export const FontPicker: FC<Props> = ({ value, onSelect }) => {
   // While fonts are strongly-typed, we also support custom fonts someone might type in.
   // So let's cast the fonts and allow for additions.
   const displayedFonts: DisplayedFont[] = fonts;
@@ -46,10 +44,10 @@ export const FontPicker: FunctionComponent<Props> = (props) => {
 };
 
 FontPicker.propTypes = {
-  /** Initial value of the Font Picker. */
-  value: PropTypes.string,
   /** Function to execute when a Font is selected. */
   onSelect: PropTypes.func,
+  /** Initial value of the Font Picker. */
+  value: PropTypes.string,
 };
 
 FontPicker.displayName = 'FontPicker';
diff --git a/x-pack/plugins/canvas/public/components/font_picker/index.js b/x-pack/plugins/canvas/public/components/font_picker/index.ts
similarity index 64%
rename from x-pack/plugins/canvas/public/components/font_picker/index.js
rename to x-pack/plugins/canvas/public/components/font_picker/index.ts
index 5ccb7846b7a77..339021a7e5712 100644
--- a/x-pack/plugins/canvas/public/components/font_picker/index.js
+++ b/x-pack/plugins/canvas/public/components/font_picker/index.ts
@@ -4,8 +4,4 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { pure } from 'recompose';
-
-import { FontPicker as Component } from './font_picker';
-
-export const FontPicker = pure(Component);
+export { FontPicker } from './font_picker';
diff --git a/x-pack/plugins/canvas/public/components/loading/index.ts b/x-pack/plugins/canvas/public/components/loading/index.ts
index 81fedf3287184..745639955dcba 100644
--- a/x-pack/plugins/canvas/public/components/loading/index.ts
+++ b/x-pack/plugins/canvas/public/components/loading/index.ts
@@ -4,7 +4,4 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { pure } from 'recompose';
-import { Loading as Component } from './loading';
-
-export const Loading = pure(Component);
+export { Loading } from './loading';
diff --git a/x-pack/plugins/canvas/public/components/loading/loading.tsx b/x-pack/plugins/canvas/public/components/loading/loading.tsx
index 67db16d40d426..403be84295312 100644
--- a/x-pack/plugins/canvas/public/components/loading/loading.tsx
+++ b/x-pack/plugins/canvas/public/components/loading/loading.tsx
@@ -4,9 +4,9 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { EuiIcon, EuiLoadingSpinner, isColorDark } from '@elastic/eui';
+import React, { FC } from 'react';
 import PropTypes from 'prop-types';
-import React, { FunctionComponent } from 'react';
+import { EuiIcon, EuiLoadingSpinner, isColorDark } from '@elastic/eui';
 import { hexToRgb } from '../../../common/lib/hex_to_rgb';
 
 interface Props {
@@ -15,7 +15,7 @@ interface Props {
   text?: string;
 }
 
-export const Loading: FunctionComponent<Props> = ({
+export const Loading: FC<Props> = ({
   animated = false,
   text = '',
   backgroundColor = '#000000',
diff --git a/x-pack/plugins/canvas/public/components/shape_picker/index.ts b/x-pack/plugins/canvas/public/components/shape_picker/index.ts
index d3ed85831cbe2..3ec86e45af236 100644
--- a/x-pack/plugins/canvas/public/components/shape_picker/index.ts
+++ b/x-pack/plugins/canvas/public/components/shape_picker/index.ts
@@ -4,8 +4,4 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { pure } from 'recompose';
-
-import { ShapePicker as Component } from './shape_picker';
-
-export const ShapePicker = pure(Component);
+export { ShapePicker } from './shape_picker';
diff --git a/x-pack/plugins/canvas/public/components/shape_picker/shape_picker.tsx b/x-pack/plugins/canvas/public/components/shape_picker/shape_picker.tsx
index 56874fd3080f7..263654522c059 100644
--- a/x-pack/plugins/canvas/public/components/shape_picker/shape_picker.tsx
+++ b/x-pack/plugins/canvas/public/components/shape_picker/shape_picker.tsx
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React from 'react';
+import React, { FC } from 'react';
 import PropTypes from 'prop-types';
 import { EuiFlexGrid, EuiFlexItem, EuiLink } from '@elastic/eui';
 import { ShapePreview } from '../shape_preview';
@@ -16,7 +16,7 @@ interface Props {
   onChange?: (key: string) => void;
 }
 
-export const ShapePicker = ({ shapes, onChange = () => {} }: Props) => {
+export const ShapePicker: FC<Props> = ({ shapes, onChange = () => {} }) => {
   return (
     <EuiFlexGrid gutterSize="s" columns={4} className="canvasShapePicker">
       {Object.keys(shapes)
@@ -33,6 +33,6 @@ export const ShapePicker = ({ shapes, onChange = () => {} }: Props) => {
 };
 
 ShapePicker.propTypes = {
-  shapes: PropTypes.object.isRequired,
   onChange: PropTypes.func,
+  shapes: PropTypes.object.isRequired,
 };
diff --git a/x-pack/plugins/canvas/public/components/shape_picker_popover/index.tsx b/x-pack/plugins/canvas/public/components/shape_picker_popover/index.tsx
index 1d4ae25a38fa2..06619c0626daf 100644
--- a/x-pack/plugins/canvas/public/components/shape_picker_popover/index.tsx
+++ b/x-pack/plugins/canvas/public/components/shape_picker_popover/index.tsx
@@ -4,8 +4,4 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { pure } from 'recompose';
-
-import { ShapePickerPopover as Component } from './shape_picker_popover';
-
-export const ShapePickerPopover = pure(Component);
+export { ShapePickerPopover } from './shape_picker_popover';
diff --git a/x-pack/plugins/canvas/public/components/shape_picker_popover/shape_picker_popover.tsx b/x-pack/plugins/canvas/public/components/shape_picker_popover/shape_picker_popover.tsx
index d42e08d2bc852..d61d9e47a3a78 100644
--- a/x-pack/plugins/canvas/public/components/shape_picker_popover/shape_picker_popover.tsx
+++ b/x-pack/plugins/canvas/public/components/shape_picker_popover/shape_picker_popover.tsx
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React from 'react';
+import React, { FC } from 'react';
 import PropTypes from 'prop-types';
 import { EuiLink, EuiPanel } from '@elastic/eui';
 import { Popover } from '../popover';
@@ -20,7 +20,7 @@ interface Props {
   ariaLabel?: string;
 }
 
-export const ShapePickerPopover = ({ shapes, onChange, value, ariaLabel }: Props) => {
+export const ShapePickerPopover: FC<Props> = ({ shapes, onChange, value, ariaLabel }) => {
   const button = (handleClick: React.MouseEventHandler<any>) => (
     <EuiPanel paddingSize="s" hasShadow={false}>
       <EuiLink aria-label={ariaLabel} style={{ fontSize: 0 }} onClick={handleClick}>
@@ -37,7 +37,8 @@ export const ShapePickerPopover = ({ shapes, onChange, value, ariaLabel }: Props
 };
 
 ShapePickerPopover.propTypes = {
+  ariaLabel: PropTypes.string,
+  onChange: PropTypes.func,
   shapes: PropTypes.object.isRequired,
   value: PropTypes.string,
-  onChange: PropTypes.func,
 };
diff --git a/x-pack/plugins/canvas/public/components/shape_preview/index.ts b/x-pack/plugins/canvas/public/components/shape_preview/index.ts
index 4320a10d97a85..6027b1227a99a 100644
--- a/x-pack/plugins/canvas/public/components/shape_preview/index.ts
+++ b/x-pack/plugins/canvas/public/components/shape_preview/index.ts
@@ -4,8 +4,4 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { pure } from 'recompose';
-
-import { ShapePreview as Component } from './shape_preview';
-
-export const ShapePreview = pure(Component);
+export { ShapePreview } from './shape_preview';
diff --git a/x-pack/plugins/canvas/public/components/shape_preview/shape_preview.tsx b/x-pack/plugins/canvas/public/components/shape_preview/shape_preview.tsx
index 4f67945e9ce13..3ff18f3aa4bc4 100644
--- a/x-pack/plugins/canvas/public/components/shape_preview/shape_preview.tsx
+++ b/x-pack/plugins/canvas/public/components/shape_preview/shape_preview.tsx
@@ -4,14 +4,14 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React from 'react';
+import React, { FC } from 'react';
 import PropTypes from 'prop-types';
 
 interface Props {
   shape?: string;
 }
 
-export const ShapePreview = ({ shape }: Props) => {
+export const ShapePreview: FC<Props> = ({ shape }) => {
   if (!shape) {
     return <div className="canvasShapePreview" />;
   }
diff --git a/x-pack/plugins/canvas/public/components/text_style_picker/__stories__/__snapshots__/text_style_picker.stories.storyshot b/x-pack/plugins/canvas/public/components/text_style_picker/__stories__/__snapshots__/text_style_picker.stories.storyshot
new file mode 100644
index 0000000000000..ad236e701ceb0
--- /dev/null
+++ b/x-pack/plugins/canvas/public/components/text_style_picker/__stories__/__snapshots__/text_style_picker.stories.storyshot
@@ -0,0 +1,975 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots components/TextStylePicker default 1`] = `
+<div
+  style={
+    Object {
+      "width": 264,
+    }
+  }
+>
+  <div
+    className="canvasTextStylePicker"
+  >
+    <div
+      className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
+    >
+      <div
+        className="euiFlexItem"
+      >
+        <div
+          className="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock euiSuperSelect"
+          onKeyDown={[Function]}
+          onMouseDown={[Function]}
+          onMouseUp={[Function]}
+          onTouchEnd={[Function]}
+          onTouchStart={[Function]}
+        >
+          <div
+            className="euiPopover__anchor"
+          >
+            <input
+              defaultValue=""
+              type="hidden"
+            />
+            <div
+              className="euiFormControlLayout euiFormControlLayout--compressed"
+            >
+              <div
+                className="euiFormControlLayout__childrenWrapper"
+              >
+                <span
+                  className="euiScreenReaderOnly"
+                  id="generated-id"
+                >
+                  Select an option: 
+                  , is selected
+                </span>
+                <button
+                  aria-haspopup="true"
+                  aria-labelledby="undefined generated-id"
+                  aria-selected={true}
+                  className="euiSuperSelectControl euiSuperSelectControl--compressed"
+                  onClick={[Function]}
+                  onKeyDown={[Function]}
+                  role="option"
+                  type="button"
+                />
+                <div
+                  className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                >
+                  <span
+                    className="euiFormControlLayoutCustomIcon"
+                  >
+                    <div
+                      aria-hidden="true"
+                      className="euiFormControlLayoutCustomIcon__icon"
+                      data-euiicon-type="arrowDown"
+                    />
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        className="euiFlexItem euiFlexItem--flexGrowZero"
+      >
+        <div
+          className="euiFormControlLayout euiFormControlLayout--compressed euiFormControlLayout--group"
+        >
+          <label
+            className="euiFormLabel euiFormControlLayout__prepend"
+          >
+            Size
+          </label>
+          <div
+            className="euiFormControlLayout__childrenWrapper"
+          >
+            <select
+              className="euiSelect euiSelect--compressed euiSelect--inGroup"
+              onChange={[Function]}
+              onMouseUp={[Function]}
+              value={14}
+            >
+              <option
+                value={0}
+              >
+                0
+              </option>
+              <option
+                value={6}
+              >
+                6
+              </option>
+              <option
+                value={7}
+              >
+                7
+              </option>
+              <option
+                value={8}
+              >
+                8
+              </option>
+              <option
+                value={9}
+              >
+                9
+              </option>
+              <option
+                value={10}
+              >
+                10
+              </option>
+              <option
+                value={11}
+              >
+                11
+              </option>
+              <option
+                value={12}
+              >
+                12
+              </option>
+              <option
+                value={14}
+              >
+                14
+              </option>
+              <option
+                value={16}
+              >
+                16
+              </option>
+              <option
+                value={18}
+              >
+                18
+              </option>
+              <option
+                value={24}
+              >
+                24
+              </option>
+              <option
+                value={30}
+              >
+                30
+              </option>
+              <option
+                value={36}
+              >
+                36
+              </option>
+              <option
+                value={48}
+              >
+                48
+              </option>
+              <option
+                value={60}
+              >
+                60
+              </option>
+              <option
+                value={72}
+              >
+                72
+              </option>
+              <option
+                value={96}
+              >
+                96
+              </option>
+            </select>
+            <div
+              className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+            >
+              <span
+                className="euiFormControlLayoutCustomIcon"
+              >
+                <div
+                  aria-hidden="true"
+                  className="euiFormControlLayoutCustomIcon__icon"
+                  data-euiicon-type="arrowDown"
+                />
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      className="euiSpacer euiSpacer--s"
+    />
+    <div
+      className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentFlexEnd euiFlexGroup--directionRow euiFlexGroup--responsive"
+    >
+      <div
+        className="euiFlexItem euiFlexItem--flexGrowZero"
+        style={
+          Object {
+            "fontSize": 0,
+          }
+        }
+      >
+        <div
+          className="euiPopover euiPopover--anchorDownCenter"
+          container={null}
+          id="color-picker-popover"
+          onKeyDown={[Function]}
+          onMouseDown={[Function]}
+          onMouseUp={[Function]}
+          onTouchEnd={[Function]}
+          onTouchStart={[Function]}
+        >
+          <div
+            className="euiPopover__anchor"
+          >
+            <button
+              aria-label="Font Color black"
+              className="euiLink euiLink--primary"
+              onClick={[Function]}
+              style={
+                Object {
+                  "fontSize": 0,
+                }
+              }
+              type="button"
+            >
+              <div
+                className="canvasColorDot"
+              >
+                <div
+                  className="canvasColorDot__background canvasCheckered"
+                />
+                <div
+                  className="canvasColorDot__foreground"
+                  style={Object {}}
+                />
+              </div>
+            </button>
+          </div>
+        </div>
+      </div>
+      <div
+        className="euiFlexItem euiFlexItem--flexGrowZero"
+      >
+        <fieldset
+          className="euiButtonGroup__fieldset"
+        >
+          <div
+            className="euiButtonGroup euiButtonGroup--compressed canvasSidebar__buttonGroup"
+          >
+            <div
+              className="euiToggle euiButtonToggle__wrapper euiButtonGroup__toggle"
+            >
+              <input
+                aria-label="Bold"
+                checked={false}
+                className="euiToggle__input euiButtonToggle__input"
+                onChange={[Function]}
+                title="Bold"
+                type="checkbox"
+              />
+              <button
+                className="euiButton euiButton--text euiButton--small euiButtonToggle euiButtonToggle--isIconOnly euiButtonGroup__button"
+                id="bold"
+                tabIndex={-1}
+                type="button"
+              >
+                <span
+                  className="euiButton__content"
+                >
+                  <div
+                    aria-hidden="true"
+                    className="euiButton__icon"
+                    data-euiicon-type="editorBold"
+                    size="m"
+                  />
+                  <span
+                    className="euiButton__text"
+                  >
+                    
+                  </span>
+                </span>
+              </button>
+            </div>
+            <div
+              className="euiToggle euiButtonToggle__wrapper euiButtonGroup__toggle"
+            >
+              <input
+                aria-label="Italic"
+                checked={false}
+                className="euiToggle__input euiButtonToggle__input"
+                onChange={[Function]}
+                title="Italic"
+                type="checkbox"
+              />
+              <button
+                className="euiButton euiButton--text euiButton--small euiButtonToggle euiButtonToggle--isIconOnly euiButtonGroup__button"
+                id="italic"
+                tabIndex={-1}
+                type="button"
+              >
+                <span
+                  className="euiButton__content"
+                >
+                  <div
+                    aria-hidden="true"
+                    className="euiButton__icon"
+                    data-euiicon-type="editorItalic"
+                    size="m"
+                  />
+                  <span
+                    className="euiButton__text"
+                  >
+                    
+                  </span>
+                </span>
+              </button>
+            </div>
+            <div
+              className="euiToggle euiButtonToggle__wrapper euiButtonGroup__toggle"
+            >
+              <input
+                aria-label="Underline"
+                checked={false}
+                className="euiToggle__input euiButtonToggle__input"
+                onChange={[Function]}
+                title="Underline"
+                type="checkbox"
+              />
+              <button
+                className="euiButton euiButton--text euiButton--small euiButtonToggle euiButtonToggle--isIconOnly euiButtonGroup__button"
+                id="underline"
+                tabIndex={-1}
+                type="button"
+              >
+                <span
+                  className="euiButton__content"
+                >
+                  <div
+                    aria-hidden="true"
+                    className="euiButton__icon"
+                    data-euiicon-type="editorUnderline"
+                    size="m"
+                  />
+                  <span
+                    className="euiButton__text"
+                  >
+                    
+                  </span>
+                </span>
+              </button>
+            </div>
+          </div>
+        </fieldset>
+      </div>
+      <div
+        className="euiFlexItem euiFlexItem--flexGrowZero"
+      >
+        <fieldset
+          className="euiButtonGroup__fieldset"
+        >
+          <div
+            className="euiButtonGroup euiButtonGroup--compressed canvasSidebar__buttonGroup"
+          >
+            <div
+              className="euiToggle euiToggle--checked euiButtonToggle__wrapper euiButtonGroup__toggle"
+            >
+              <input
+                aria-label="Align left"
+                checked={true}
+                className="euiToggle__input euiButtonToggle__input"
+                onChange={[Function]}
+                title="Align left"
+                type="radio"
+              />
+              <button
+                className="euiButton euiButton--text euiButton--small euiButtonToggle euiButtonToggle--isIconOnly euiButtonGroup__button euiButtonGroup__button--selected"
+                id="left"
+                tabIndex={-1}
+                type="button"
+              >
+                <span
+                  className="euiButton__content"
+                >
+                  <div
+                    aria-hidden="true"
+                    className="euiButton__icon"
+                    data-euiicon-type="editorAlignLeft"
+                    size="m"
+                  />
+                  <span
+                    className="euiButton__text"
+                  >
+                    
+                  </span>
+                </span>
+              </button>
+            </div>
+            <div
+              className="euiToggle euiButtonToggle__wrapper euiButtonGroup__toggle"
+            >
+              <input
+                aria-label="Align center"
+                checked={false}
+                className="euiToggle__input euiButtonToggle__input"
+                onChange={[Function]}
+                title="Align center"
+                type="radio"
+              />
+              <button
+                className="euiButton euiButton--text euiButton--small euiButtonToggle euiButtonToggle--isIconOnly euiButtonGroup__button"
+                id="center"
+                tabIndex={-1}
+                type="button"
+              >
+                <span
+                  className="euiButton__content"
+                >
+                  <div
+                    aria-hidden="true"
+                    className="euiButton__icon"
+                    data-euiicon-type="editorAlignCenter"
+                    size="m"
+                  />
+                  <span
+                    className="euiButton__text"
+                  >
+                    
+                  </span>
+                </span>
+              </button>
+            </div>
+            <div
+              className="euiToggle euiButtonToggle__wrapper euiButtonGroup__toggle"
+            >
+              <input
+                aria-label="Align right"
+                checked={false}
+                className="euiToggle__input euiButtonToggle__input"
+                onChange={[Function]}
+                title="Align right"
+                type="radio"
+              />
+              <button
+                className="euiButton euiButton--text euiButton--small euiButtonToggle euiButtonToggle--isIconOnly euiButtonGroup__button"
+                id="right"
+                tabIndex={-1}
+                type="button"
+              >
+                <span
+                  className="euiButton__content"
+                >
+                  <div
+                    aria-hidden="true"
+                    className="euiButton__icon"
+                    data-euiicon-type="editorAlignRight"
+                    size="m"
+                  />
+                  <span
+                    className="euiButton__text"
+                  >
+                    
+                  </span>
+                </span>
+              </button>
+            </div>
+          </div>
+        </fieldset>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots components/TextStylePicker interactive 1`] = `
+<div
+  style={
+    Object {
+      "width": 264,
+    }
+  }
+>
+  <div
+    className="canvasTextStylePicker"
+  >
+    <div
+      className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
+    >
+      <div
+        className="euiFlexItem"
+      >
+        <div
+          className="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock euiSuperSelect"
+          onKeyDown={[Function]}
+          onMouseDown={[Function]}
+          onMouseUp={[Function]}
+          onTouchEnd={[Function]}
+          onTouchStart={[Function]}
+        >
+          <div
+            className="euiPopover__anchor"
+          >
+            <input
+              defaultValue=""
+              type="hidden"
+            />
+            <div
+              className="euiFormControlLayout euiFormControlLayout--compressed"
+            >
+              <div
+                className="euiFormControlLayout__childrenWrapper"
+              >
+                <span
+                  className="euiScreenReaderOnly"
+                  id="generated-id"
+                >
+                  Select an option: 
+                  , is selected
+                </span>
+                <button
+                  aria-haspopup="true"
+                  aria-labelledby="undefined generated-id"
+                  aria-selected={true}
+                  className="euiSuperSelectControl euiSuperSelectControl--compressed"
+                  onClick={[Function]}
+                  onKeyDown={[Function]}
+                  role="option"
+                  type="button"
+                />
+                <div
+                  className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                >
+                  <span
+                    className="euiFormControlLayoutCustomIcon"
+                  >
+                    <div
+                      aria-hidden="true"
+                      className="euiFormControlLayoutCustomIcon__icon"
+                      data-euiicon-type="arrowDown"
+                    />
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        className="euiFlexItem euiFlexItem--flexGrowZero"
+      >
+        <div
+          className="euiFormControlLayout euiFormControlLayout--compressed euiFormControlLayout--group"
+        >
+          <label
+            className="euiFormLabel euiFormControlLayout__prepend"
+          >
+            Size
+          </label>
+          <div
+            className="euiFormControlLayout__childrenWrapper"
+          >
+            <select
+              className="euiSelect euiSelect--compressed euiSelect--inGroup"
+              onChange={[Function]}
+              onMouseUp={[Function]}
+              value={14}
+            >
+              <option
+                value={0}
+              >
+                0
+              </option>
+              <option
+                value={6}
+              >
+                6
+              </option>
+              <option
+                value={7}
+              >
+                7
+              </option>
+              <option
+                value={8}
+              >
+                8
+              </option>
+              <option
+                value={9}
+              >
+                9
+              </option>
+              <option
+                value={10}
+              >
+                10
+              </option>
+              <option
+                value={11}
+              >
+                11
+              </option>
+              <option
+                value={12}
+              >
+                12
+              </option>
+              <option
+                value={14}
+              >
+                14
+              </option>
+              <option
+                value={16}
+              >
+                16
+              </option>
+              <option
+                value={18}
+              >
+                18
+              </option>
+              <option
+                value={24}
+              >
+                24
+              </option>
+              <option
+                value={30}
+              >
+                30
+              </option>
+              <option
+                value={36}
+              >
+                36
+              </option>
+              <option
+                value={48}
+              >
+                48
+              </option>
+              <option
+                value={60}
+              >
+                60
+              </option>
+              <option
+                value={72}
+              >
+                72
+              </option>
+              <option
+                value={96}
+              >
+                96
+              </option>
+            </select>
+            <div
+              className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+            >
+              <span
+                className="euiFormControlLayoutCustomIcon"
+              >
+                <div
+                  aria-hidden="true"
+                  className="euiFormControlLayoutCustomIcon__icon"
+                  data-euiicon-type="arrowDown"
+                />
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      className="euiSpacer euiSpacer--s"
+    />
+    <div
+      className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentFlexEnd euiFlexGroup--directionRow euiFlexGroup--responsive"
+    >
+      <div
+        className="euiFlexItem euiFlexItem--flexGrowZero"
+        style={
+          Object {
+            "fontSize": 0,
+          }
+        }
+      >
+        <div
+          className="euiPopover euiPopover--anchorDownCenter"
+          container={null}
+          id="color-picker-popover"
+          onKeyDown={[Function]}
+          onMouseDown={[Function]}
+          onMouseUp={[Function]}
+          onTouchEnd={[Function]}
+          onTouchStart={[Function]}
+        >
+          <div
+            className="euiPopover__anchor"
+          >
+            <button
+              aria-label="Font Color black"
+              className="euiLink euiLink--primary"
+              onClick={[Function]}
+              style={
+                Object {
+                  "fontSize": 0,
+                }
+              }
+              type="button"
+            >
+              <div
+                className="canvasColorDot"
+              >
+                <div
+                  className="canvasColorDot__background canvasCheckered"
+                />
+                <div
+                  className="canvasColorDot__foreground"
+                  style={Object {}}
+                />
+              </div>
+            </button>
+          </div>
+        </div>
+      </div>
+      <div
+        className="euiFlexItem euiFlexItem--flexGrowZero"
+      >
+        <fieldset
+          className="euiButtonGroup__fieldset"
+        >
+          <div
+            className="euiButtonGroup euiButtonGroup--compressed canvasSidebar__buttonGroup"
+          >
+            <div
+              className="euiToggle euiButtonToggle__wrapper euiButtonGroup__toggle"
+            >
+              <input
+                aria-label="Bold"
+                checked={false}
+                className="euiToggle__input euiButtonToggle__input"
+                onChange={[Function]}
+                title="Bold"
+                type="checkbox"
+              />
+              <button
+                className="euiButton euiButton--text euiButton--small euiButtonToggle euiButtonToggle--isIconOnly euiButtonGroup__button"
+                id="bold"
+                tabIndex={-1}
+                type="button"
+              >
+                <span
+                  className="euiButton__content"
+                >
+                  <div
+                    aria-hidden="true"
+                    className="euiButton__icon"
+                    data-euiicon-type="editorBold"
+                    size="m"
+                  />
+                  <span
+                    className="euiButton__text"
+                  >
+                    
+                  </span>
+                </span>
+              </button>
+            </div>
+            <div
+              className="euiToggle euiButtonToggle__wrapper euiButtonGroup__toggle"
+            >
+              <input
+                aria-label="Italic"
+                checked={false}
+                className="euiToggle__input euiButtonToggle__input"
+                onChange={[Function]}
+                title="Italic"
+                type="checkbox"
+              />
+              <button
+                className="euiButton euiButton--text euiButton--small euiButtonToggle euiButtonToggle--isIconOnly euiButtonGroup__button"
+                id="italic"
+                tabIndex={-1}
+                type="button"
+              >
+                <span
+                  className="euiButton__content"
+                >
+                  <div
+                    aria-hidden="true"
+                    className="euiButton__icon"
+                    data-euiicon-type="editorItalic"
+                    size="m"
+                  />
+                  <span
+                    className="euiButton__text"
+                  >
+                    
+                  </span>
+                </span>
+              </button>
+            </div>
+            <div
+              className="euiToggle euiButtonToggle__wrapper euiButtonGroup__toggle"
+            >
+              <input
+                aria-label="Underline"
+                checked={false}
+                className="euiToggle__input euiButtonToggle__input"
+                onChange={[Function]}
+                title="Underline"
+                type="checkbox"
+              />
+              <button
+                className="euiButton euiButton--text euiButton--small euiButtonToggle euiButtonToggle--isIconOnly euiButtonGroup__button"
+                id="underline"
+                tabIndex={-1}
+                type="button"
+              >
+                <span
+                  className="euiButton__content"
+                >
+                  <div
+                    aria-hidden="true"
+                    className="euiButton__icon"
+                    data-euiicon-type="editorUnderline"
+                    size="m"
+                  />
+                  <span
+                    className="euiButton__text"
+                  >
+                    
+                  </span>
+                </span>
+              </button>
+            </div>
+          </div>
+        </fieldset>
+      </div>
+      <div
+        className="euiFlexItem euiFlexItem--flexGrowZero"
+      >
+        <fieldset
+          className="euiButtonGroup__fieldset"
+        >
+          <div
+            className="euiButtonGroup euiButtonGroup--compressed canvasSidebar__buttonGroup"
+          >
+            <div
+              className="euiToggle euiToggle--checked euiButtonToggle__wrapper euiButtonGroup__toggle"
+            >
+              <input
+                aria-label="Align left"
+                checked={true}
+                className="euiToggle__input euiButtonToggle__input"
+                onChange={[Function]}
+                title="Align left"
+                type="radio"
+              />
+              <button
+                className="euiButton euiButton--text euiButton--small euiButtonToggle euiButtonToggle--isIconOnly euiButtonGroup__button euiButtonGroup__button--selected"
+                id="left"
+                tabIndex={-1}
+                type="button"
+              >
+                <span
+                  className="euiButton__content"
+                >
+                  <div
+                    aria-hidden="true"
+                    className="euiButton__icon"
+                    data-euiicon-type="editorAlignLeft"
+                    size="m"
+                  />
+                  <span
+                    className="euiButton__text"
+                  >
+                    
+                  </span>
+                </span>
+              </button>
+            </div>
+            <div
+              className="euiToggle euiButtonToggle__wrapper euiButtonGroup__toggle"
+            >
+              <input
+                aria-label="Align center"
+                checked={false}
+                className="euiToggle__input euiButtonToggle__input"
+                onChange={[Function]}
+                title="Align center"
+                type="radio"
+              />
+              <button
+                className="euiButton euiButton--text euiButton--small euiButtonToggle euiButtonToggle--isIconOnly euiButtonGroup__button"
+                id="center"
+                tabIndex={-1}
+                type="button"
+              >
+                <span
+                  className="euiButton__content"
+                >
+                  <div
+                    aria-hidden="true"
+                    className="euiButton__icon"
+                    data-euiicon-type="editorAlignCenter"
+                    size="m"
+                  />
+                  <span
+                    className="euiButton__text"
+                  >
+                    
+                  </span>
+                </span>
+              </button>
+            </div>
+            <div
+              className="euiToggle euiButtonToggle__wrapper euiButtonGroup__toggle"
+            >
+              <input
+                aria-label="Align right"
+                checked={false}
+                className="euiToggle__input euiButtonToggle__input"
+                onChange={[Function]}
+                title="Align right"
+                type="radio"
+              />
+              <button
+                className="euiButton euiButton--text euiButton--small euiButtonToggle euiButtonToggle--isIconOnly euiButtonGroup__button"
+                id="right"
+                tabIndex={-1}
+                type="button"
+              >
+                <span
+                  className="euiButton__content"
+                >
+                  <div
+                    aria-hidden="true"
+                    className="euiButton__icon"
+                    data-euiicon-type="editorAlignRight"
+                    size="m"
+                  />
+                  <span
+                    className="euiButton__text"
+                  >
+                    
+                  </span>
+                </span>
+              </button>
+            </div>
+          </div>
+        </fieldset>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/x-pack/plugins/canvas/public/components/text_style_picker/__stories__/text_style_picker.stories.tsx b/x-pack/plugins/canvas/public/components/text_style_picker/__stories__/text_style_picker.stories.tsx
new file mode 100644
index 0000000000000..b33a34fcd5e65
--- /dev/null
+++ b/x-pack/plugins/canvas/public/components/text_style_picker/__stories__/text_style_picker.stories.tsx
@@ -0,0 +1,21 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React, { useState } from 'react';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+import { TextStylePicker } from '../text_style_picker';
+
+const Interactive = () => {
+  const [props, setProps] = useState({});
+  return <TextStylePicker onChange={setProps} {...props} />;
+};
+
+storiesOf('components/TextStylePicker', module)
+  .addDecorator((fn) => <div style={{ width: 264 }}>{fn()}</div>)
+  .add('default', () => <TextStylePicker onChange={action('onChange')} />)
+  .add('interactive', () => <Interactive />);
diff --git a/x-pack/plugins/canvas/public/components/text_style_picker/font_sizes.js b/x-pack/plugins/canvas/public/components/text_style_picker/font_sizes.ts
similarity index 100%
rename from x-pack/plugins/canvas/public/components/text_style_picker/font_sizes.js
rename to x-pack/plugins/canvas/public/components/text_style_picker/font_sizes.ts
diff --git a/x-pack/plugins/canvas/public/components/text_style_picker/index.js b/x-pack/plugins/canvas/public/components/text_style_picker/index.ts
similarity index 61%
rename from x-pack/plugins/canvas/public/components/text_style_picker/index.js
rename to x-pack/plugins/canvas/public/components/text_style_picker/index.ts
index 79bde95723682..16fb39b660a0c 100644
--- a/x-pack/plugins/canvas/public/components/text_style_picker/index.js
+++ b/x-pack/plugins/canvas/public/components/text_style_picker/index.ts
@@ -4,7 +4,4 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { pure } from 'recompose';
-import { TextStylePicker as Component } from './text_style_picker';
-
-export const TextStylePicker = pure(Component);
+export { TextStylePicker } from './text_style_picker';
diff --git a/x-pack/plugins/canvas/public/components/text_style_picker/text_style_picker.js b/x-pack/plugins/canvas/public/components/text_style_picker/text_style_picker.tsx
similarity index 54%
rename from x-pack/plugins/canvas/public/components/text_style_picker/text_style_picker.js
rename to x-pack/plugins/canvas/public/components/text_style_picker/text_style_picker.tsx
index 48d52abb03125..3dfc55919395d 100644
--- a/x-pack/plugins/canvas/public/components/text_style_picker/text_style_picker.js
+++ b/x-pack/plugins/canvas/public/components/text_style_picker/text_style_picker.tsx
@@ -4,9 +4,10 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React from 'react';
+import React, { FC, useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { EuiFlexGroup, EuiFlexItem, EuiSelect, EuiSpacer, EuiButtonGroup } from '@elastic/eui';
+import { FontValue } from 'src/plugins/expressions';
 import { ComponentStrings } from '../../../i18n';
 import { FontPicker } from '../font_picker';
 import { ColorPickerPopover } from '../color_picker_popover';
@@ -14,54 +15,75 @@ import { fontSizes } from './font_sizes';
 
 const { TextStylePicker: strings } = ComponentStrings;
 
-export const TextStylePicker = ({
-  family,
-  size,
-  align,
-  color,
-  weight,
-  underline,
-  italic,
-  onChange,
-  colors,
-}) => {
-  const alignmentButtons = [
-    {
-      id: 'left',
-      label: strings.getAlignLeftOption(),
-      iconType: 'editorAlignLeft',
-    },
-    {
-      id: 'center',
-      label: strings.getAlignCenterOption(),
-      iconType: 'editorAlignCenter',
-    },
-    {
-      id: 'right',
-      label: strings.getAlignRightOption(),
-      iconType: 'editorAlignRight',
-    },
-  ];
-
-  const styleButtons = [
-    {
-      id: 'bold',
-      label: strings.getStyleBoldOption(),
-      iconType: 'editorBold',
-    },
-    {
-      id: 'italic',
-      label: strings.getStyleItalicOption(),
-      iconType: 'editorItalic',
-    },
-    {
-      id: 'underline',
-      label: strings.getStyleUnderlineOption(),
-      iconType: 'editorUnderline',
-    },
-  ];
-
-  const stylesSelectedMap = {
+interface BaseProps {
+  family?: FontValue;
+  size?: number;
+  align?: 'left' | 'center' | 'right';
+  color?: string;
+  weight?: 'bold' | 'normal';
+  underline?: boolean;
+  italic?: boolean;
+}
+
+interface Props extends BaseProps {
+  colors?: string[];
+  onChange: (props: BaseProps) => void;
+}
+
+type StyleType = 'bold' | 'italic' | 'underline';
+
+const alignmentButtons = [
+  {
+    id: 'left',
+    label: strings.getAlignLeftOption(),
+    iconType: 'editorAlignLeft',
+  },
+  {
+    id: 'center',
+    label: strings.getAlignCenterOption(),
+    iconType: 'editorAlignCenter',
+  },
+  {
+    id: 'right',
+    label: strings.getAlignRightOption(),
+    iconType: 'editorAlignRight',
+  },
+];
+
+const styleButtons = [
+  {
+    id: 'bold',
+    label: strings.getStyleBoldOption(),
+    iconType: 'editorBold',
+  },
+  {
+    id: 'italic',
+    label: strings.getStyleItalicOption(),
+    iconType: 'editorItalic',
+  },
+  {
+    id: 'underline',
+    label: strings.getStyleUnderlineOption(),
+    iconType: 'editorUnderline',
+  },
+];
+
+export const TextStylePicker: FC<Props> = (props) => {
+  const [style, setStyle] = useState<Props>(props);
+
+  const {
+    align = 'left',
+    color,
+    colors,
+    family,
+    italic = false,
+    onChange,
+    size = 14,
+    underline = false,
+    weight = 'normal',
+  } = style;
+
+  const stylesSelectedMap: Record<StyleType, boolean> = {
     ['bold']: weight === 'bold',
     ['italic']: Boolean(italic),
     ['underline']: Boolean(underline),
@@ -72,31 +94,22 @@ export const TextStylePicker = ({
     fontSizes.sort((a, b) => a - b);
   }
 
-  const doChange = (propName, value) => {
-    onChange({
-      family,
-      size,
-      align,
-      color,
-      weight: weight || 'normal',
-      underline: underline || false,
-      italic: italic || false,
-      [propName]: value,
-    });
-  };
+  useEffect(() => onChange(style), [onChange, style]);
 
-  const onAlignmentChange = (optionId) => doChange('align', optionId);
+  const doChange = (propName: keyof Props, value: string | boolean | number) => {
+    setStyle({ ...style, [propName]: value });
+  };
 
-  const onStyleChange = (optionId) => {
-    let prop;
+  const onStyleChange = (optionId: string) => {
+    let prop: 'weight' | 'italic' | 'underline';
     let value;
 
     if (optionId === 'bold') {
       prop = 'weight';
       value = !stylesSelectedMap[optionId] ? 'bold' : 'normal';
     } else {
-      prop = optionId;
-      value = !stylesSelectedMap[optionId];
+      prop = optionId as 'italic' | 'underline';
+      value = !stylesSelectedMap[prop];
     }
 
     doChange(prop, value);
@@ -106,14 +119,18 @@ export const TextStylePicker = ({
     <div className="canvasTextStylePicker">
       <EuiFlexGroup gutterSize="s">
         <EuiFlexItem>
-          <FontPicker value={family} onSelect={(value) => doChange('family', value)} />
+          {family ? (
+            <FontPicker value={family} onSelect={(value) => doChange('family', value)} />
+          ) : (
+            <FontPicker onSelect={(value) => doChange('family', value)} />
+          )}
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
           <EuiSelect
             compressed
             value={size}
             onChange={(e) => doChange('size', Number(e.target.value))}
-            options={fontSizes.map((size) => ({ text: String(size), value: size }))}
+            options={fontSizes.map((fontSize) => ({ text: String(fontSize), value: fontSize }))}
             prepend="Size"
           />
         </EuiFlexItem>
@@ -147,7 +164,7 @@ export const TextStylePicker = ({
             buttonSize="compressed"
             isIconOnly
             idSelected={align}
-            onChange={onAlignmentChange}
+            onChange={(optionId: string) => doChange('align', optionId)}
             className="canvasSidebar__buttonGroup"
           />
         </EuiFlexItem>
@@ -159,9 +176,9 @@ export const TextStylePicker = ({
 TextStylePicker.propTypes = {
   family: PropTypes.string,
   size: PropTypes.number,
-  align: PropTypes.string,
+  align: PropTypes.oneOf(['left', 'center', 'right']),
   color: PropTypes.string,
-  weight: PropTypes.string,
+  weight: PropTypes.oneOf(['normal', 'bold']),
   underline: PropTypes.bool,
   italic: PropTypes.bool,
   onChange: PropTypes.func.isRequired,
@@ -171,4 +188,5 @@ TextStylePicker.propTypes = {
 TextStylePicker.defaultProps = {
   align: 'left',
   size: 14,
+  weight: 'normal',
 };
diff --git a/x-pack/plugins/canvas/public/components/tooltip_icon/index.ts b/x-pack/plugins/canvas/public/components/tooltip_icon/index.ts
index 6e71baa364785..55c2f7090629c 100644
--- a/x-pack/plugins/canvas/public/components/tooltip_icon/index.ts
+++ b/x-pack/plugins/canvas/public/components/tooltip_icon/index.ts
@@ -4,8 +4,4 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { pure } from 'recompose';
-import { TooltipIcon as Component } from './tooltip_icon';
-export { IconType } from './tooltip_icon';
-
-export const TooltipIcon = pure(Component);
+export { TooltipIcon, IconType } from './tooltip_icon';
diff --git a/x-pack/plugins/canvas/public/components/tooltip_icon/tooltip_icon.tsx b/x-pack/plugins/canvas/public/components/tooltip_icon/tooltip_icon.tsx
index 78c2b0ec53c9f..d91bb4bc9add9 100644
--- a/x-pack/plugins/canvas/public/components/tooltip_icon/tooltip_icon.tsx
+++ b/x-pack/plugins/canvas/public/components/tooltip_icon/tooltip_icon.tsx
@@ -5,7 +5,7 @@
  */
 
 /* eslint react/forbid-elements: 0 */
-import React from 'react';
+import React, { FC } from 'react';
 import PropTypes from 'prop-types';
 import { EuiIconTip, PropsOf } from '@elastic/eui';
 
@@ -21,7 +21,7 @@ interface Props extends Omit<EuiIconTipProps, 'type' | 'color'> {
   icon: IconType;
 }
 
-export const TooltipIcon = ({ icon = IconType.info, ...rest }: Props) => {
+export const TooltipIcon: FC<Props> = ({ icon = IconType.info, ...rest }) => {
   const icons = {
     [IconType.error]: { type: 'alert', color: 'danger' },
     [IconType.warning]: { type: 'alert', color: 'warning' },