From fbacf4ec9ec91a5670bef40583f55cbe84552527 Mon Sep 17 00:00:00 2001
From: Benny Powers <web@bennypowers.com>
Date: Thu, 24 Jun 2021 09:32:20 +0300
Subject: [PATCH] style(web-components): refactor to TS

Split config functions into separate modules

Add type and language to docs.source
---
 .../src/frameworks/web-components/config.js   | 31 -------------------
 .../src/frameworks/web-components/config.ts   | 19 ++++++++++++
 .../web-components/prepareForInline.ts        | 18 +++++++++++
 3 files changed, 37 insertions(+), 31 deletions(-)
 delete mode 100644 addons/docs/src/frameworks/web-components/config.js
 create mode 100644 addons/docs/src/frameworks/web-components/config.ts
 create mode 100644 addons/docs/src/frameworks/web-components/prepareForInline.ts

diff --git a/addons/docs/src/frameworks/web-components/config.js b/addons/docs/src/frameworks/web-components/config.js
deleted file mode 100644
index e40070ade605..000000000000
--- a/addons/docs/src/frameworks/web-components/config.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import React from 'react';
-import { render } from 'lit-html';
-import { extractArgTypes, extractComponentDescription } from './custom-elements';
-import { sourceDecorator } from './sourceDecorator';
-
-export const decorators = [sourceDecorator];
-
-export const parameters = {
-  docs: {
-    extractArgTypes,
-    extractComponentDescription,
-    inlineStories: true,
-    prepareForInline: (storyFn) => {
-      class Story extends React.Component {
-        constructor(props) {
-          super(props);
-          this.wrapperRef = React.createRef();
-        }
-
-        componentDidMount() {
-          render(storyFn(), this.wrapperRef.current);
-        }
-
-        render() {
-          return React.createElement('div', { ref: this.wrapperRef });
-        }
-      }
-      return React.createElement(Story);
-    },
-  },
-};
diff --git a/addons/docs/src/frameworks/web-components/config.ts b/addons/docs/src/frameworks/web-components/config.ts
new file mode 100644
index 000000000000..30273896e170
--- /dev/null
+++ b/addons/docs/src/frameworks/web-components/config.ts
@@ -0,0 +1,19 @@
+import { extractArgTypes, extractComponentDescription } from './custom-elements';
+import { sourceDecorator } from './sourceDecorator';
+import { prepareForInline } from './prepareForInline';
+import { SourceType } from '../../shared';
+
+export const decorators = [sourceDecorator];
+
+export const parameters = {
+  docs: {
+    extractArgTypes,
+    extractComponentDescription,
+    inlineStories: true,
+    prepareForInline,
+    source: {
+      type: SourceType.DYNAMIC,
+      language: 'html',
+    },
+  },
+};
diff --git a/addons/docs/src/frameworks/web-components/prepareForInline.ts b/addons/docs/src/frameworks/web-components/prepareForInline.ts
new file mode 100644
index 000000000000..183819c5bd48
--- /dev/null
+++ b/addons/docs/src/frameworks/web-components/prepareForInline.ts
@@ -0,0 +1,18 @@
+import type { StoryFn } from '@storybook/addons';
+import React from 'react';
+import { render } from 'lit-html';
+
+export const prepareForInline = (storyFn: StoryFn) => {
+  class Story extends React.Component {
+    wrapperRef = React.createRef<HTMLElement>();
+
+    componentDidMount(): void {
+      render(storyFn(), this.wrapperRef.current);
+    }
+
+    render(): React.ReactElement {
+      return React.createElement('div', { ref: this.wrapperRef });
+    }
+  }
+  return React.createElement(Story);
+};