fix: add doc wrapper

Author: acao

packages/graphiql/src/components/common/Toolbar/Tabs.stories.tsx

@@ -25,9 +25,9 @@ export const Tabbar = () => (
   <List>
     <ListRow>
       <ManagedTabs tabs={['One', 'Two', 'Three']}>
-        <p>One</p>
-        <p>Two</p>
-        <p>Three</p>
+        <p>{'One'}</p>
+        <p>{'Two'}</p>
+        <p>{'Three'}</p>
       </ManagedTabs>
     </ListRow>
     <ListRow>
@@ -41,17 +41,17 @@ export const Tabbar = () => (
             <small style={{ background: 'yellow', padding: 3 }}>{'2'}</small>
           </>,
         ]}>
-        <p>With</p>
-        <p>a</p>
-        <p>nested</p>
-        <p>component</p>
+        <p>{'With'}</p>
+        <p>{'a'}</p>
+        <p>{'nested'}</p>
+        <p>{'component'}</p>
       </ManagedTabs>
     </ListRow>
     <ListRow flex>
       <div style={{ height: '100px', display: 'grid' }}>
         <ManagedTabs tabs={['Very tall', 'tabs']}>
-          <p>a</p>
-          <p>b</p>
+          <p>{'a'}</p>
+          <p>{'b'}</p>
         </ManagedTabs>
       </div>
     </ListRow>

plugins/doc-explorer-classic/src/DocExplorerGraphiQL.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+
+import { SchemaContext } from 'graphiql';
+
+import { DocExplorer } from './DocExplorer';
+
+/**
+ * Context Conusmer for rendering DocExplorer in GraphiQL.
+ */
+export default function DocExplorerGraphiQL() {
+  return (
+    <SchemaContext.Consumer>
+      {({ schema }) => <DocExplorer schema={schema} />}
+    </SchemaContext.Consumer>
+  );
+}