storybook: create type table component

static/app/components/button.stories.tsx

@@ -7,8 +7,14 @@ import Matrix from 'sentry/components/stories/matrix';
 import {IconDelete} from 'sentry/icons';
 import storyBook from 'sentry/stories/storyBook';
 
-export default storyBook('Button', story => {
-  story('Default', () => <Button>Default Button</Button>);
+// eslint-disable-next-line import/no-webpack-loader-syntax
+import types from '!!type-loader!sentry/components/button';
+
+export default storyBook('Button', (story, APIReference) => {
+  APIReference(types.Button);
+  story('Default', () => {
+    return <Button>Default Button</Button>;
+  });
 
   story('onClick', () => {
     const [clickCount, setClickCount] = useState(0);

static/app/stories/storyBook.tsx

@@ -4,22 +4,38 @@ import styled from '@emotion/styled';
 
 import SideBySide from 'sentry/components/stories/sideBySide';
 import {space} from 'sentry/styles/space';
+import {StoryTypes} from 'sentry/views/stories/storyTypes';
 
 type StoryRenderFunction = () => ReactNode | ReactNode[];
-type StoryFunction = (storyName: string, storyRender: StoryRenderFunction) => void;
-type SetupFunction = (story: StoryFunction) => void;
+type StoryContext = (storyName: string, story: StoryRenderFunction) => void;
+type SetupFunction = (
+  story: StoryContext,
+  apiReference: (documentation: TypeLoader.ComponentDocWithFilename | undefined) => void
+) => void;
 
 export default function storyBook(
   bookContext: string | React.ComponentType<any>,
   setup: SetupFunction
 ): StoryRenderFunction {
-  const contexts: Array<{name: string; render: StoryRenderFunction}> = [];
+  const stories: Array<{
+    name: string;
+    render: StoryRenderFunction;
+  }> = [];
+  const APIDocumentation: TypeLoader.ComponentDocWithFilename[] = [];
 
-  const storyFn: StoryFunction = (name: string, render: StoryRenderFunction) => {
-    contexts.push({name, render});
+  const storyFn: StoryContext = (name: string, render: StoryRenderFunction) => {
+    stories.push({name, render});
   };
 
-  setup(storyFn);
+  const apiReferenceFn: (
+    documentation: TypeLoader.ComponentDocWithFilename | undefined
+  ) => void = (documentation: TypeLoader.ComponentDocWithFilename | undefined) => {
+    if (documentation) {
+      APIDocumentation.push(documentation);
+    }
+  };
+
+  setup(storyFn, apiReferenceFn);
 
   // @TODO (JonasBadalic): we can props or use a context to communciate with the storyFile component
   return function RenderStory() {
@@ -37,7 +53,7 @@ export default function storyBook(
             <code>{`<${title}/>`}</code>
           </BookTitle>
         )}
-        {contexts.map(({name, render}, i) => {
+        {stories.map(({name, render}, i) => {
           const children = render();
           const isOneChild = Children.count(children) === 1;
           const key = `${i}_${name}`;
@@ -49,6 +65,10 @@ export default function storyBook(
             </Story>
           );
         })}
+
+        {APIDocumentation.map((documentation, i) => (
+          <StoryTypes key={i} types={documentation} />
+        ))}
       </Fragment>
     );
   };

static/app/types/type-loader.d.ts

@@ -1,4 +1,12 @@
 declare module '!!type-loader!*' {
-  const content: Record<string, import('react-docgen-typescript').ComponentDoc>;
+  const content: Record<string, TypeLoader.ComponentDocWithFilename>;
+
   export default content;
 }
+
+declare namespace TypeLoader {
+  type ComponentDoc = import('react-docgen-typescript').ComponentDoc;
+  interface ComponentDocWithFilename extends ComponentDoc {
+    filename: string;
+  }
+}

static/app/views/stories/index.tsx

@@ -23,14 +23,16 @@ export default function Stories() {
 
   const files = useStoryBookFiles();
   const story = useStoriesLoader({filename: location.query.name});
-  const nodes = useStoryTree(location.query.query ?? '', files);
+  const nodes = useStoryTree(files, location.query.query ?? '');
 
   const navigate = useNavigate();
   const onSearchInputChange = useCallback(
     (e: React.ChangeEvent<HTMLInputElement>) => {
-      navigate({query: {query: e.target.value, name: location.query.name}});
+      navigate({
+        query: {...location.query, query: e.target.value, name: location.query.name},
+      });
     },
-    [location.query.name, navigate]
+    [location.query, navigate]
   );
 
   useHotkeys([{match: '/', callback: () => searchInput.current?.focus()}], []);
@@ -118,7 +120,7 @@ function StoriesLandingPage() {
   );
 }
 
-function useStoryTree(query: string, files: string[]) {
+function useStoryTree(files: string[], query: string) {
   const location = useLocation();
   const initialName = useRef(location.query.name);
 
@@ -254,7 +256,7 @@ export class StoryTreeNode {
       yield {node, path};
 
       for (const child of Object.values(node.children)) {
-        yield* recurse(child, [...path, node]);
+        yield* recurse(child, path.concat(node));
       }
     }