Test componentToHints, exclude test files from be published

src/.npmignore

@@ -0,0 +1,2 @@
+*.test.*
+

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>

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

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",
+            ],
+          },
+        },
+      }
+    `);
+  });
+});

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: typeof __PLAYROOM_GLOBAL__STATIC_TYPES__ = {}
+) => {
   const componentNames = Object.keys(components).sort();
 
   return Object.assign(