[Canvas][tech-debt] Renderer stories (#74373) (#76388)

* Add stories for renderers

* Fix Typecheck

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

x-pack/plugins/canvas/canvas_plugin_src/functions/common/pie.ts

@@ -39,9 +39,9 @@ interface PieOptions {
   colors: string[];
   legend: {
     show: boolean;
-    backgroundOpacity: number;
-    labelBoxBorderColor: string;
-    position: Legend;
+    backgroundOpacity?: number;
+    labelBoxBorderColor?: string;
+    position?: Legend;
   };
   grid: {
     show: boolean;

x-pack/plugins/canvas/canvas_plugin_src/renderers/__stories__/image.stories.tsx

@@ -0,0 +1,20 @@
+/*
+ * 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 from 'react';
+import { storiesOf } from '@storybook/react';
+import { image } from '../image';
+import { Render } from './render';
+import { elasticLogo } from '../../lib/elastic_logo';
+
+storiesOf('renderers/image', module).add('default', () => {
+  const config = {
+    type: 'image' as 'image',
+    mode: 'cover',
+    dataurl: elasticLogo,
+  };
+
+  return <Render renderer={image} config={config} width="400px" />;
+});

x-pack/plugins/canvas/canvas_plugin_src/renderers/__stories__/render.tsx

@@ -0,0 +1,65 @@
+/*
+ * 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 { action } from '@storybook/addon-actions';
+import React, { useRef, useEffect } from 'react';
+import { RendererFactory, RendererHandlers } from '../../../types';
+
+export const defaultHandlers: RendererHandlers = {
+  destroy: () => action('destroy'),
+  getElementId: () => 'element-id',
+  getFilter: () => 'filter',
+  onComplete: (fn) => undefined,
+  onEmbeddableDestroyed: action('onEmbeddableDestroyed'),
+  onEmbeddableInputChange: action('onEmbeddableInputChange'),
+  onResize: action('onResize'),
+  resize: action('resize'),
+  setFilter: action('setFilter'),
+  done: action('done'),
+  onDestroy: action('onDestroy'),
+  reload: action('reload'),
+  update: action('update'),
+  event: action('event'),
+};
+
+/*
+  Uses a RenderDefinitionFactory and Config to render into an element.
+
+  Intended to be used for stories for RenderDefinitionFactory
+*/
+interface RenderAdditionalProps {
+  height?: string;
+  width?: string;
+  handlers?: RendererHandlers;
+}
+
+export const Render = <Renderer,>({
+  renderer,
+  config,
+  ...rest
+}: Renderer extends RendererFactory<infer Config>
+  ? { renderer: Renderer; config: Config } & RenderAdditionalProps
+  : { renderer: undefined; config: undefined } & RenderAdditionalProps) => {
+  const { height, width, handlers } = {
+    height: '200px',
+    width: '200px',
+    handlers: defaultHandlers,
+    ...rest,
+  };
+
+  const containerRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    if (renderer && containerRef.current !== null) {
+      renderer().render(containerRef.current, config, handlers);
+    }
+  }, [renderer, config, handlers]);
+
+  return (
+    <div style={{ width, height }} ref={containerRef}>
+      {' '}
+    </div>
+  );
+};

x-pack/plugins/canvas/canvas_plugin_src/renderers/__stories__/repeat_image.stories.tsx

@@ -0,0 +1,23 @@
+/*
+ * 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 from 'react';
+import { storiesOf } from '@storybook/react';
+import { repeatImage } from '../repeat_image';
+import { Render } from './render';
+import { elasticLogo } from '../../lib/elastic_logo';
+import { elasticOutline } from '../../lib/elastic_outline';
+
+storiesOf('renderers/repeatImage', module).add('default', () => {
+  const config = {
+    count: 42,
+    image: elasticLogo,
+    size: 20,
+    max: 60,
+    emptyImage: elasticOutline,
+  };
+
+  return <Render renderer={repeatImage} config={config} width="400px" />;
+});

x-pack/plugins/canvas/canvas_plugin_src/renderers/__stories__/table.stories.tsx

@@ -0,0 +1,45 @@
+/*
+ * 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 from 'react';
+import { storiesOf } from '@storybook/react';
+import { table } from '../table';
+import { Render } from './render';
+
+storiesOf('renderers/table', module).add('default', () => {
+  const config = {
+    paginate: true,
+    perPage: 5,
+    showHeader: true,
+    datatable: {
+      type: 'datatable' as 'datatable',
+      columns: [
+        {
+          name: 'Foo',
+          type: 'string' as 'string',
+          id: 'id-foo',
+          meta: { type: 'string' as 'string' },
+        },
+        {
+          name: 'Bar',
+          type: 'number' as 'number',
+          id: 'id-bar',
+          meta: { type: 'string' as 'string' },
+        },
+      ],
+      rows: [
+        { Foo: 'a', Bar: 700 },
+        { Foo: 'b', Bar: 600 },
+        { Foo: 'c', Bar: 500 },
+        { Foo: 'd', Bar: 400 },
+        { Foo: 'e', Bar: 300 },
+        { Foo: 'f', Bar: 200 },
+        { Foo: 'g', Bar: 100 },
+      ],
+    },
+  };
+
+  return <Render renderer={table} config={config} width="400px" />;
+});

x-pack/plugins/canvas/canvas_plugin_src/renderers/error/__stories__/error.stories.tsx

@@ -0,0 +1,17 @@
+/*
+ * 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 from 'react';
+import { storiesOf } from '@storybook/react';
+import { error } from '../';
+import { Render } from '../../__stories__/render';
+
+storiesOf('renderers/error', module).add('default', () => {
+  const thrownError = new Error('There was an error');
+  const config = {
+    error: thrownError,
+  };
+  return <Render renderer={error} config={config} />;
+});

x-pack/plugins/canvas/canvas_plugin_src/renderers/markdown/__stories__/markdown.stories.tsx

@@ -0,0 +1,35 @@
+/*
+ * 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 from 'react';
+import { storiesOf } from '@storybook/react';
+import { markdown } from '../';
+import { Render } from '../../__stories__/render';
+
+storiesOf('renderers/markdown', module)
+  .add('default', () => {
+    const config = {
+      content: '# This is Markdown',
+      font: {
+        css: '',
+        spec: {},
+        type: 'style' as 'style',
+      },
+      openLinksInNewTab: false,
+    };
+    return <Render renderer={markdown} config={config} />;
+  })
+  .add('links in new tab', () => {
+    const config = {
+      content: '[Elastic.co](https://elastic.co)',
+      font: {
+        css: '',
+        spec: {},
+        type: 'style' as 'style',
+      },
+      openLinksInNewTab: true,
+    };
+    return <Render renderer={markdown} config={config} />;
+  });