style(web-components): refactor to TS

Split config functions into separate modules

Add type and language to docs.source

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

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