From 12fe882aceacc5bbade86a7003be9b91aa62c676 Mon Sep 17 00:00:00 2001
From: Adam Skoufis <askoufis@seek.com.au>
Date: Tue, 10 Dec 2024 14:11:33 +1100
Subject: [PATCH] Add tests for `componentsToHints`

---
 src/Playroom/Playroom.tsx                     |  6 +-
 src/index.d.ts                                |  5 +-
 src/utils/componentsToHints.test.ts           | 70 +++++++++++++++++++
 src/utils/componentsToHints.ts                |  7 +-
 src/utils/{cursor.spec.ts => cursor.test.ts}  |  0
 ...{formatting.spec.ts => formatting.test.ts} |  0
 6 files changed, 82 insertions(+), 6 deletions(-)
 create mode 100644 src/utils/componentsToHints.test.ts
 rename src/utils/{cursor.spec.ts => cursor.test.ts} (100%)
 rename src/utils/{formatting.spec.ts => formatting.test.ts} (100%)

diff --git a/src/Playroom/Playroom.tsx b/src/Playroom/Playroom.tsx
index 703a63f6..05ade235 100644
--- a/src/Playroom/Playroom.tsx
+++ b/src/Playroom/Playroom.tsx
@@ -22,6 +22,8 @@ import { Box } from './Box/Box';
 
 import { assignInlineVars } from '@vanilla-extract/dynamic';
 
+const staticTypes = __PLAYROOM_GLOBAL__STATIC_TYPES__;
+
 const resizableConfig = (position: EditorPosition = 'bottom') => ({
   top: position === 'bottom',
   right: false,
@@ -59,7 +61,7 @@ const getTitle = (title: string | undefined) => {
 };
 
 export interface PlayroomProps {
-  components: Record<string, ComponentType>;
+  components: Record<string, ComponentType<any>>;
   themes: string[];
   widths: number[];
   snippets: Snippets;
@@ -122,7 +124,7 @@ export default ({ components, themes, widths, snippets }: PlayroomProps) => {
             dispatch({ type: 'updateCode', payload: { code: newCode } })
           }
           previewCode={previewEditorCode}
-          hints={componentsToHints(components)}
+          hints={componentsToHints(components, staticTypes)}
         />
         <StatusMessage />
       </div>
diff --git a/src/index.d.ts b/src/index.d.ts
index a81bbdc6..1197760f 100644
--- a/src/index.d.ts
+++ b/src/index.d.ts
@@ -32,4 +32,7 @@ interface Window {
 }
 
 declare const __PLAYROOM_GLOBAL__CONFIG__: InternalPlayroomConfig;
-declare const __PLAYROOM_GLOBAL__STATIC_TYPES__: any;
+declare const __PLAYROOM_GLOBAL__STATIC_TYPES__: Record<
+  string,
+  Record<string, unknown>
+>;
diff --git a/src/utils/componentsToHints.test.ts b/src/utils/componentsToHints.test.ts
new file mode 100644
index 00000000..8466644c
--- /dev/null
+++ b/src/utils/componentsToHints.test.ts
@@ -0,0 +1,70 @@
+import componentsToHints from './componentsToHints';
+// @ts-expect-error
+import * as PropTypeComponents from '../../cypress/projects/themed/components';
+import * as TypeScriptComponents from '../../cypress/projects/typescript/components';
+
+describe('componentsToHints', () => {
+  it('should support javascript components with proptypes', () => {
+    const result = componentsToHints({
+      Foo: PropTypeComponents.Foo,
+      Bar: PropTypeComponents.Bar,
+    });
+
+    expect(result).toMatchInlineSnapshot(`
+      {
+        "Bar": {
+          "attrs": {
+            "color": [
+              "red",
+              "blue",
+            ],
+          },
+        },
+        "Foo": {
+          "attrs": {
+            "color": [
+              "red",
+              "blue",
+            ],
+          },
+        },
+      }
+    `);
+  });
+
+  it('should support typescript components when provided with type data', () => {
+    const result = componentsToHints(
+      {
+        Foo: TypeScriptComponents.Foo,
+        Bar: TypeScriptComponents.Bar,
+      },
+      {
+        Foo: { color: ['red', 'blue', 'black'] },
+        Bar: { color: ['red', 'blue', 'black'] },
+      }
+    );
+
+    expect(result).toMatchInlineSnapshot(`
+      {
+        "Bar": {
+          "attrs": {
+            "color": [
+              "red",
+              "blue",
+              "black",
+            ],
+          },
+        },
+        "Foo": {
+          "attrs": {
+            "color": [
+              "red",
+              "blue",
+              "black",
+            ],
+          },
+        },
+      }
+    `);
+  });
+});
diff --git a/src/utils/componentsToHints.ts b/src/utils/componentsToHints.ts
index 0e7c2f17..0b4304bf 100644
--- a/src/utils/componentsToHints.ts
+++ b/src/utils/componentsToHints.ts
@@ -3,9 +3,10 @@ import omit from 'lodash/omit';
 import parsePropTypes from 'parse-prop-types';
 import type { PlayroomProps } from '../Playroom/Playroom';
 
-const staticTypes = __PLAYROOM_GLOBAL__STATIC_TYPES__;
-
-export default (components: PlayroomProps['components']) => {
+export default (
+  components: PlayroomProps['components'],
+  staticTypes: Record<string, Record<string, unknown>> = {}
+) => {
   const componentNames = Object.keys(components).sort();
 
   return Object.assign(
diff --git a/src/utils/cursor.spec.ts b/src/utils/cursor.test.ts
similarity index 100%
rename from src/utils/cursor.spec.ts
rename to src/utils/cursor.test.ts
diff --git a/src/utils/formatting.spec.ts b/src/utils/formatting.test.ts
similarity index 100%
rename from src/utils/formatting.spec.ts
rename to src/utils/formatting.test.ts