Merge pull request #141 from microsoft/fixes-ComponentPreviewProps-wr…

…apper-type Fixes component preview props wrapper type
microsoft · Oct 23, 2023 · 0ce9767 · 0ce9767
2 parents 02e086a + ea23fbe
commit 0ce9767
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 7 deletions.
diff --git a/change/@microsoft-arbutus-component-preview-2ce2c8d1-5687-4ce5-99ab-89563cb66da7.json b/change/@microsoft-arbutus-component-preview-2ce2c8d1-5687-4ce5-99ab-89563cb66da7.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Fixes ComponentPreviewProps wrapper type.",
+  "packageName": "@microsoft/arbutus.component-preview",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/components/component-preview/src/component-preview/component-preview.types.ts b/components/component-preview/src/component-preview/component-preview.types.ts
@@ -1,4 +1,4 @@
-import type { ElementType, ReactElement, ReactNode } from 'react';
+import type { ElementType, ReactNode } from 'react';
 
 export type ComponentPreviewProps = {
   /**
@@ -17,8 +17,8 @@ export type ComponentPreviewProps = {
    * @example ({ children, currentThemeKey }) => <ThemeProvider theme={currentThemeKey}>{children}</ThemeProvider>
    */
   // This is exposed to the consumer, so we have to use any here.
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  wrapper?: ({ children, themeKey }: WrapperProps) => ReactElement<any, any> | null;
+  // eslint-disable-next-line no-unused-vars
+  wrapper?: ({ children, themeKey }: WrapperProps) => ReactNode;
 
   /**
    * Themes to be passed to the wrapper, if you want to add theme switcher.
@@ -70,6 +70,7 @@ export type ComponentPreviewProps = {
    *   const onThemeChange = (theme: string) => setCurrentTheme(theme);
    *  ```
    */
+  // eslint-disable-next-line no-unused-vars
   onThemeChange?: (themeKey: string) => void;
 };
 

diff --git a/scripts/update-docs.js b/scripts/update-docs.js
@@ -10,4 +10,4 @@ fs.emptyDirSync(destDir);
 // Copy the contents of the source directory to the destination directory
 fs.copySync(sourceDir, destDir);
 
-console.log('Docs directory updated successfully!');
+console.log('Docs directory updated successfully!');
diff --git a/utilities/docs/src/layouts/home/home.tsx b/utilities/docs/src/layouts/home/home.tsx
@@ -90,9 +90,12 @@ export const HomeLayout: FC<HomeLayoutProps> = ({
         <Grid layout="large" className={classes.articlesContainer}>
           {articles.map(({ title, description, image, isExternal, to }, i) => {
             const navigate = makeNavigate({ isExternal, to });
-            const handleClick = useCallback((e: React.SyntheticEvent<Element, Event> | undefined) => {
-              navigate(e);
-            }, [isExternal, to]);
+            const handleClick = useCallback(
+              (e: React.SyntheticEvent<Element, Event> | undefined) => {
+                navigate(e);
+              },
+              [isExternal, to],
+            );
             return (
               <Tile
                 variant="image"