From 86d56b44a06deb3089a9bb6758d1ed81ede8b082 Mon Sep 17 00:00:00 2001
From: Efren Aragon <efrenaragon96@gmail.com>
Date: Thu, 4 May 2023 11:56:28 -0400
Subject: [PATCH] fix: ts errors

---
 code/renderers/web-components/src/docs/config.ts |  5 +++--
 .../src/docs/custom-elements.test.ts             |  9 ++++-----
 .../web-components/src/docs/custom-elements.ts   | 16 +++++++++-------
 code/renderers/web-components/src/render.ts      |  2 +-
 4 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/code/renderers/web-components/src/docs/config.ts b/code/renderers/web-components/src/docs/config.ts
index 038094f94884..3597f99cd4cc 100644
--- a/code/renderers/web-components/src/docs/config.ts
+++ b/code/renderers/web-components/src/docs/config.ts
@@ -2,10 +2,11 @@ import type { Addon_DecoratorFunction, ArgTypesEnhancer } from '@storybook/types
 import { SourceType, enhanceArgTypes } from '@storybook/docs-tools';
 import { extractArgTypes, extractComponentDescription } from './custom-elements';
 import { sourceDecorator } from './sourceDecorator';
+import type { StoryFnHtmlReturnType } from '../types';
 
-export const decorators: Addon_DecoratorFunction<unknown>[] = [sourceDecorator];
+export const decorators: Addon_DecoratorFunction<StoryFnHtmlReturnType>[] = [sourceDecorator];
 
-export const parameters: {} = {
+export const parameters: object = {
   docs: {
     extractArgTypes,
     extractComponentDescription,
diff --git a/code/renderers/web-components/src/docs/custom-elements.test.ts b/code/renderers/web-components/src/docs/custom-elements.test.ts
index 7ad642756d32..edbffc37994b 100644
--- a/code/renderers/web-components/src/docs/custom-elements.test.ts
+++ b/code/renderers/web-components/src/docs/custom-elements.test.ts
@@ -1,6 +1,5 @@
 /* eslint-disable no-underscore-dangle */
 import { global } from '@storybook/global';
-
 import { extractArgTypes } from './custom-elements';
 import customElementsManifest from './__testfixtures__/custom-elements.json';
 
@@ -17,9 +16,9 @@ describe('extractArgTypes', () => {
 
   describe('events', () => {
     it('should map to an action event handler', () => {
-      const { onSbHeaderCreateAccount } = extractArgTypes('sb-header');
+      const extractedArgType = extractArgTypes('sb-header');
 
-      expect(onSbHeaderCreateAccount).toEqual({
+      expect(extractedArgType?.onSbHeaderCreateAccount).toEqual({
         name: 'onSbHeaderCreateAccount',
         action: { name: 'sb-header:createAccount' },
         table: { disable: true },
@@ -27,9 +26,9 @@ describe('extractArgTypes', () => {
     });
 
     it('should map to a regular item', () => {
-      const { 'sb-header:createAccount': item } = extractArgTypes('sb-header');
+      const extractedArgType = extractArgTypes('sb-header');
 
-      expect(item).toEqual({
+      expect(extractedArgType?.['sb-header:createAccount']).toEqual({
         name: 'sb-header:createAccount',
         required: false,
         description: 'Event send when user clicks on create account button',
diff --git a/code/renderers/web-components/src/docs/custom-elements.ts b/code/renderers/web-components/src/docs/custom-elements.ts
index 66743bfdd7a8..6a4dbdeee26e 100644
--- a/code/renderers/web-components/src/docs/custom-elements.ts
+++ b/code/renderers/web-components/src/docs/custom-elements.ts
@@ -1,3 +1,4 @@
+import invariant from 'tiny-invariant';
 import type { InputType, ArgTypes } from '@storybook/types';
 import { logger } from '@storybook/client-logger';
 import { getCustomElements, isValidComponent, isValidMetaData } from '..';
@@ -80,6 +81,7 @@ function mapData(data: TagItem[], category: string) {
         switch (category) {
           case 'events':
             mapEvent(item).forEach((argType) => {
+              invariant(argType.name, `${argType} should have a name property.`);
               acc[argType.name] = argType;
             });
             break;
@@ -137,13 +139,13 @@ export const extractArgTypesFromElements = (tagName: string, customElements: Cus
   const metaData = getMetaData(tagName, customElements);
   return (
     metaData && {
-      ...mapData(metaData.attributes, 'attributes'),
-      ...mapData(metaData.members, 'properties'),
-      ...mapData(metaData.properties, 'properties'),
-      ...mapData(metaData.events, 'events'),
-      ...mapData(metaData.slots, 'slots'),
-      ...mapData(metaData.cssProperties, 'css custom properties'),
-      ...mapData(metaData.cssParts, 'css shadow parts'),
+      ...mapData(metaData.attributes ?? [], 'attributes'),
+      ...mapData(metaData.members ?? [], 'properties'),
+      ...mapData(metaData.properties ?? [], 'properties'),
+      ...mapData(metaData.events ?? [], 'events'),
+      ...mapData(metaData.slots ?? [], 'slots'),
+      ...mapData(metaData.cssProperties ?? [], 'css custom properties'),
+      ...mapData(metaData.cssParts ?? [], 'css shadow parts'),
     }
   );
 };
diff --git a/code/renderers/web-components/src/render.ts b/code/renderers/web-components/src/render.ts
index f031cd4dc2b5..5445648cb51e 100644
--- a/code/renderers/web-components/src/render.ts
+++ b/code/renderers/web-components/src/render.ts
@@ -44,7 +44,7 @@ export function renderToCanvas(
     if (forceRemount || !canvasElement.querySelector('[id="root-inner"]')) {
       canvasElement.innerHTML = '<div id="root-inner"></div>';
     }
-    const renderTo = canvasElement.querySelector<HTMLElement>('[id="root-inner"]');
+    const renderTo = canvasElement.querySelector<HTMLElement>('[id="root-inner"]') as HTMLElement;
 
     litRender(element, renderTo);
     simulatePageLoad(canvasElement);