👌 fix with more types and test

monkvision · Jun 20, 2024 · 8319c26 · 8319c26
1 parent e890f36
commit 8319c26
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 13 deletions.
diff --git a/documentation/src/components/Sights/TopBar/TopBar.tsx b/documentation/src/components/Sights/TopBar/TopBar.tsx
@@ -2,13 +2,13 @@ import { labels, sights, vehicles } from '@monkvision/sights';
 import { SearchBar } from '@site/src/components';
 import { SightCard } from '@site/src/components/Sights/SightCard';
 import clsx from 'clsx';
-import React, { FunctionComponentElement, useRef } from 'react';
+import React, { ReactElement, useRef } from 'react';
 import styles from './TopBar.module.css';
 
 export interface ListItem {
   id: string;
   lookups: string[];
-  component: FunctionComponentElement<typeof SightCard>;
+  component: ReactElement;
 }
 
 export interface Tab {

diff --git a/documentation/src/pages/Sights/index.tsx b/documentation/src/pages/Sights/index.tsx
@@ -1,12 +1,9 @@
-import { LabelTable, ListItem, SightCard, Tab, tabs, TopBar } from '@site/src/components';
+import { LabelTable, ListItem, Tab, tabs, TopBar } from '@site/src/components';
 import Layout from '@theme/Layout';
-import React, { FunctionComponentElement, useMemo, useState } from 'react';
+import React, { ReactElement, useMemo, useState } from 'react';
 import styles from './styles.module.css';
 
-function lookupItems(
-  lookup: string,
-  items: ListItem[],
-): FunctionComponentElement<typeof SightCard>[] {
+function lookupItems(lookup: string, items: ListItem[]): ReactElement[] {
   const str = lookup.toLowerCase();
   const filtered = str
     ? items.filter((item) => item.lookups.some((lookupStr) => lookupStr.includes(str)))

diff --git a/packages/common-ui-web/src/components/DynamicSVG/SVGElement.tsx b/packages/common-ui-web/src/components/DynamicSVG/SVGElement.tsx
@@ -45,7 +45,7 @@ export function SVGElement<T extends keyof JSXIntrinsicSVGElements = 'svg'>({
     element,
     groupIds,
     getAttributes,
-    style: attributes.style,
+    style: attributes.style ?? {},
   });
   const tagAttr = { ...attributes, ...customAttributes, ...passThroughProps } as any;
   const innerHTML = useInnerHTML({ element, groupIds, getInnerText });

diff --git a/packages/common-ui-web/src/components/DynamicSVG/hooks/useJSXTransformAttributes.ts b/packages/common-ui-web/src/components/DynamicSVG/hooks/useJSXTransformAttributes.ts
@@ -31,7 +31,7 @@ function tranformJsxAttribute(attr: HtmlAttribute): JsxAttribute {
  * Custom hook used to map HTML attributes to their JSX counterpart (ex: "class" becomes "className", properly mapping
  * inline style values etc.).
  */
-export function useJSXTransformAttributes(element: Element): JSX.IntrinsicElements {
+export function useJSXTransformAttributes(element: Element): Partial<JSX.IntrinsicElements> {
   return useMemo(
     () =>
       element.getAttributeNames().reduce((prev, attr) => {
@@ -42,8 +42,8 @@ export function useJSXTransformAttributes(element: Element): JSX.IntrinsicElemen
         return {
           ...prev,
           [key]: value,
-        } as Partial<JSX.IntrinsicElements>;
-      }, {}) as JSX.IntrinsicElements,
+        };
+      }, {}),
     [element],
   );
 }
diff --git a/packages/common-ui-web/test/components/DynamicSVG/SVGElement.test.tsx b/packages/common-ui-web/test/components/DynamicSVG/SVGElement.test.tsx
@@ -57,7 +57,12 @@ describe('SVGElement component', () => {
       <SVGElement element={element} groupIds={groupIds} getAttributes={getAttributes} />,
     );
 
-    expect(useCustomAttributes).toHaveBeenCalledWith({ element, groupIds, getAttributes });
+    expect(useCustomAttributes).toHaveBeenCalledWith({
+      element,
+      groupIds,
+      getAttributes,
+      style: {},
+    });
     unmount();
   });
 

diff --git a/packages/common-ui-web/test/components/DynamicSVG/hooks/useCustomAttributes.test.ts b/packages/common-ui-web/test/components/DynamicSVG/hooks/useCustomAttributes.test.ts
@@ -53,4 +53,17 @@ describe('useCustomAttributes hook', () => {
     expect(result.current).toEqual(customAttr);
     unmount();
   });
+  it('should apply style correctly', () => {
+    const elementStyle = { stroke: '#fff' },
+      customStyle = { color: 'test-color' };
+    const element = { tagName: 'path', style: { stroke: '#fff' } } as SVGSVGElement;
+    const groupIds = ['test-id-1', 'test-id-2'];
+    const getAttributes = jest.fn(() => ({ style: customStyle }));
+    const { result, unmount } = renderHook(useCustomAttributes, {
+      initialProps: { element, groupIds, getAttributes, style: elementStyle },
+    });
+    expect(getAttributes).toHaveBeenCalledWith(element, groupIds);
+    expect(result.current).toEqual({ style: { ...elementStyle, ...customStyle } });
+    unmount();
+  });
 });