scoobie 12.0.1 → 12.1.0

package/package.json

@@ -4,7 +4,7 @@
   "license": "MIT",
   "main": "src/index.ts",
   "sideEffects": false,
-  "version": "12.0.1",
+  "version": "12.1.0",
   "dependencies": {
     "@mdx-js/loader": "^1.6.22",
     "@mdx-js/react": "^1.6.22",
@@ -17,6 +17,7 @@
     "clsx": "^1.1.1",
     "find-up": "^5.0.0",
     "fs-extra": "^10.0.0",
+    "jsonc-parser": "^3.0.0",
     "polished": "^4.1.3",
     "prism-react-renderer": "1.2.1",
     "react-keyed-flatten-children": "^1.3.0",
@@ -30,9 +31,9 @@
     "which": "^2.0.2"
   },
   "devDependencies": {
-    "@storybook/addon-essentials": "6.3.12",
+    "@storybook/addon-essentials": "6.4.8",
     "@storybook/storybook-deployer": "2.8.10",
-    "@types/react": "17.0.36",
+    "@types/react": "17.0.37",
     "@types/react-dom": "17.0.11",
     "@types/react-helmet": "6.1.4",
     "braid-design-system": "31.1.0",
@@ -41,7 +42,7 @@
     "react-dom": "17.0.2",
     "react-helmet": "6.1.0",
     "react-router-dom": "6.0.2",
-    "semantic-release": "18.0.0",
+    "semantic-release": "18.0.1",
     "sku": "11.2.3"
   },
   "files": [

package/src/components/CodeBlock/GraphQLPlaygroundAction.tsx

@@ -8,18 +8,21 @@ import { SIZE_TO_SMALLER, Size } from '../../private/size';
 const URL = url.URL ?? window.URL;
 
 interface Props {
-  children: string;
+  query: string;
+  variables: string | undefined;
   graphqlPlayground: string;
   size: Size;
 }
 
 export const GraphQLPlaygroundAction = ({
-  children,
+  query,
+  variables,
   graphqlPlayground,
   size,
 }: Props) => {
   const playgroundUrl = new URL(graphqlPlayground);
-  playgroundUrl.searchParams.set('query', children);
+  playgroundUrl.searchParams.set('query', query);
+  playgroundUrl.searchParams.set('variables', variables ?? '{}');
   const href = playgroundUrl.toString();
 
   const smallerSize = SIZE_TO_SMALLER[size];
@@ -27,7 +30,7 @@ export const GraphQLPlaygroundAction = ({
   return (
     <Text size={smallerSize} weight="medium">
       <TextLink href={href} rel="noreferrer" target="_blank">
-        <IconVideo alignY="lowercase" /> Playground
+        <IconVideo alignY="lowercase" /> GraphQL Explorer
       </TextLink>
     </Text>
   );

package/src/components/CodeBlock.tsx

@@ -1,4 +1,5 @@
 import { Box, Stack, Text, TextLinkButton } from 'braid-design-system';
+import { parse } from 'jsonc-parser';
 import Highlight from 'prism-react-renderer';
 import React, { useState } from 'react';
 
@@ -56,15 +57,23 @@ export const CodeBlock = ({
 
   const child = children[index];
 
+  const jsoncVariables =
+    children[0].language === 'graphql' && children[1]?.label === 'Variables'
+      ? children[1].code
+      : undefined;
+
+  const variables =
+    jsoncVariables && JSON.stringify(parse(jsoncVariables), null, 2);
+
   const graphqlPlaygroundButton =
-    child.language === 'graphql' && graphqlPlayground ? (
+    children[0].language === 'graphql' && graphqlPlayground ? (
       <Box component="span" paddingLeft={tablePadding}>
         <GraphQLPlaygroundAction
           graphqlPlayground={graphqlPlayground}
           size={size}
-        >
-          {child.code}
-        </GraphQLPlaygroundAction>
+          query={children[0].code}
+          variables={variables}
+        />
       </Box>
     ) : undefined;