Feat: Request panel Schema

src/panel/components/IndicatorArrow.tsx

@@ -0,0 +1,27 @@
+import styled from "styled-components";
+import React, { FC } from "react";
+
+const ArrowIcon: FC<JSX.IntrinsicElements["svg"]> = (props) => (
+  <svg height="10" width="10" viewBox="0 0 4 8" {...props}>
+    <path
+      d="M4 3.982a.485.485 0 01-.127.355C3.731 4.5.61 7.729.465 7.892c-.145.163-.443.163-.443-.147L0 .255c0-.31.298-.31.442-.147C.587.271 3.71 3.5 3.852 3.663c.085.1.148.173.148.319z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+export const Arrow = styled(ArrowIcon)`
+  flex-shrink: 0;
+  height: 10px;
+  width: 10px;
+  margin-left: 2px;
+  margin-right: 5px;
+  color: ${(p) => p.theme.light["-5"]};
+  transform: rotate(0deg);
+  transition: transform 100ms ease;
+
+  &[data-active="true"] {
+    color: ${(p) => p.theme.light["0"]};
+    transform: rotate(90deg);
+  }
+`;

src/panel/components/Pane.tsx

@@ -5,17 +5,30 @@ import React, {
   useMemo,
   MouseEventHandler,
   ComponentProps,
+  useRef,
 } from "react";
 import styled from "styled-components";
 import { useOrientationWatcher } from "../hooks";
 
-const PaneRoot: FC<ComponentProps<typeof PaneContainer>> = ({
+interface OverrideProps {
+  forcedOrientation?: { isPortrait: boolean };
+  initSize: { x: number; y: number };
+}
+
+const PaneRoot: FC<ComponentProps<typeof PaneContainer> & OverrideProps> = ({
   children,
+  forcedOrientation,
+  initSize,
   ...props
 }) => {
   const [grabbed, setGrabbed] = useState(false);
-  const [size, setSize] = useState({ x: 400, y: 400 });
-  const { isPortrait } = useOrientationWatcher();
+  const [size, setSize] = useState(initSize ? initSize : { x: 400, y: 400 });
+  const dynamicOrientation = useOrientationWatcher();
+  const paneRef = useRef(null);
+
+  const { isPortrait } = forcedOrientation
+    ? forcedOrientation
+    : dynamicOrientation;
 
   type position = { x: number; y: number };
   const handleClick = useCallback<MouseEventHandler>(
@@ -73,13 +86,19 @@ const PaneRoot: FC<ComponentProps<typeof PaneContainer>> = ({
   );
 
   return (
-    <PaneContainer {...props} style={{ ...props.style, ...style }}>
+    <PaneContainer
+      {...props}
+      style={{ ...props.style, ...style }}
+      data-portrait={`${isPortrait}`}
+      ref={paneRef}
+    >
       {children}
       <DraggingEdge
         role="seperator"
         aria-orientation={isPortrait ? "horizontal" : "vertical"}
         aria-grabbed={grabbed}
         onMouseDown={handleClick}
+        data-portrait={`${isPortrait}`}
       />
     </PaneContainer>
   );
@@ -95,7 +114,7 @@ const PaneContainer = styled.div`
   width: 100%;
   height: 400px;
 
-  @media (min-aspect-ratio: 1/1) {
+  &[data-portrait="false"] {
     width: 400px;
     height: 100%;
     border-top: none;
@@ -115,7 +134,7 @@ const DraggingEdge = styled.div`
   height: ${edgeWidth}px;
   top: -${edgeWidth / 2}px;
 
-  @media (min-aspect-ratio: 1/1) {
+  &[data-portrait="false"] {
     width: ${edgeWidth}px;
     height: 100%;
     margin-top: 0;

src/panel/components/__snapshots__/Pane.test.tsx.snap

@@ -2,6 +2,7 @@
 
 exports[`on mount on landscape orientation matches snapshot 1`] = `
 <PaneContainer
+  data-portrait="false"
   style={
     Object {
       "height": "auto",
@@ -13,6 +14,7 @@ exports[`on mount on landscape orientation matches snapshot 1`] = `
   <DraggingEdge
     aria-grabbed={false}
     aria-orientation="vertical"
+    data-portrait="false"
     onMouseDown={[Function]}
     role="seperator"
   />
@@ -21,6 +23,7 @@ exports[`on mount on landscape orientation matches snapshot 1`] = `
 
 exports[`on mount on portrait orientation matches snapshot 1`] = `
 <PaneContainer
+  data-portrait="true"
   style={
     Object {
       "height": 400,
@@ -32,6 +35,7 @@ exports[`on mount on portrait orientation matches snapshot 1`] = `
   <DraggingEdge
     aria-grabbed={false}
     aria-orientation="horizontal"
+    data-portrait="true"
     onMouseDown={[Function]}
     role="seperator"
   />

src/panel/components/index.ts

@@ -5,3 +5,4 @@ export * from "./Portal";
 export * from "./CodeHighlight";
 export * from "./Collapsible";
 export * from "./Navigation";
+export * from "./IndicatorArrow";

src/panel/pages/explorer/components/Icons.tsx

@@ -1,15 +1,6 @@
 import React, { FC } from "react";
 import { useTheme } from "styled-components";
 
-export const ArrowIcon: FC<JSX.IntrinsicElements["svg"]> = (props) => (
-  <svg height="10" width="10" viewBox="0 0 4 8" {...props}>
-    <path
-      d="M4 3.982a.485.485 0 01-.127.355C3.731 4.5.61 7.729.465 7.892c-.145.163-.443.163-.443-.147L0 .255c0-.31.298-.31.442-.147C.587.271 3.71 3.5 3.852 3.663c.085.1.148.173.148.319z"
-      fill="currentColor"
-    />
-  </svg>
-);
-
 export const SeeMoreIcon: FC<JSX.IntrinsicElements["svg"]> = (props) => (
   <svg width="13" height="9" viewBox="0 0 13 9" fill="none" {...props}>
     <rect width="13" height="9" rx="2" fill="#11171A" />

src/panel/pages/explorer/components/ListItem.tsx

@@ -11,8 +11,7 @@ import styled from "styled-components";
 import { ParsedFieldNode } from "../../../context/Explorer/ast";
 import { ExplorerContext } from "../../../context";
 import { useFlash } from "../hooks";
-import { InlineCodeHighlight } from "../../../components";
-import { ArrowIcon } from "./Icons";
+import { InlineCodeHighlight, Arrow } from "../../../components";
 import { Arguments } from "./Arguments";
 import { Tree } from "./Tree";
 
@@ -163,22 +162,6 @@ const ChildrenName = styled.span`
   font-size: 13px;
 `;
 
-const Arrow = styled(ArrowIcon)`
-  flex-shrink: 0;
-  height: 10px;
-  width: 10px;
-  margin-left: 2px;
-  margin-right: 5px;
-  color: ${(p) => p.theme.light["-5"]};
-  transform: rotate(0deg);
-  transition: transform 100ms ease;
-
-  &[data-active="true"] {
-    color: ${(p) => p.theme.light["0"]};
-    transform: rotate(90deg);
-  }
-`;
-
 const Typename = styled.div`
   display: inline-block;
   margin-left: -7px;

src/panel/pages/request/Request.tsx

@@ -1,27 +1,82 @@
 import React, { ComponentProps, FC } from "react";
 import styled from "styled-components";
 import { Background } from "../../components/Background";
-import { Query, Response, Settings } from "./components";
+import { Pane } from "../../components";
+import { Query, Schema, Settings, Response } from "./components";
 
 export const Request: FC<ComponentProps<typeof Page>> = (props) => {
   return (
     <Page {...props}>
       <Settings />
       <PageContent>
         <Query />
-        <Response />
+        {/* {TODO: Hack to offset the panels so they aren't on top of each other.
+       There's definitely better way to do this */}
+        <Pane initSize={{ y: 700, x: 400 }}>
+          <PaneBody>
+            <PaneSection>
+              <Response />
+            </PaneSection>
+          </PaneBody>
+          {/* {TODO: Also a hack to make these panes work together, sorry! */}
+          <SchemaContainer
+            forcedOrientation={{ isPortrait: true }}
+            initSize={{ y: 350, x: 400 }}
+          >
+            <PaneBody>
+              <Schema />
+            </PaneBody>
+          </SchemaContainer>
+        </Pane>
       </PageContent>
     </Page>
   );
 };
 
+const PaneBody = styled(Pane.Body)`
+  display: flex;
+  flex-grow: 1;
+`;
+
+const PaneSection = styled.section`
+  color: #fff;
+  background: ${(props) => props.theme.dark[0]};
+  overflow: auto;
+  flex-grow: 1;
+  flex-basis: 0;
+  padding: 30px;
+
+  h1 {
+    background-color: ${(p) => p.theme.dark["+3"]};
+    position: sticky;
+    top: -20px;
+    margin: -20px;
+    padding: 2px 10px;
+    font-size: 13px;
+    font-weight: 400;
+    border-bottom: solid 1px ${(p) => p.theme.dark["+5"]};
+    z-index: 1;
+  }
+
+  h1 + * {
+    margin-top: 40px;
+  }
+`;
+
 const Page = styled(Background)`
   background-color: ${(p) => p.theme.dark["0"]};
   @media (min-aspect-ratio: 1/1) {
     flex-direction: column;
   }
 `;
 
+const SchemaContainer = styled(Pane)`
+  & > div {
+    min-width: 100%;
+    width: 100%;
+  }
+`;
+
 const PageContent = styled.div`
   overflow: hidden;
   display: flex;

src/panel/pages/request/components/Collapsible.tsx

@@ -0,0 +1,42 @@
+import React, { FC, ReactChild } from "react";
+import styled from "styled-components";
+import { Arrow } from "../../../components";
+
+interface CollapsibleProps {
+  title: string;
+  isActive: boolean;
+  children: ReactChild;
+  onClick: () => void;
+}
+
+export const Collapsible: FC<CollapsibleProps> = ({
+  title,
+  isActive,
+  children,
+  onClick,
+}) => {
+  return (
+    <>
+      <CollapsibleHeader onClick={onClick} aria-expanded={isActive}>
+        <Arrow data-active={isActive} />
+        <span>{title}</span>
+      </CollapsibleHeader>
+      {isActive && <div>{children}</div>}
+    </>
+  );
+};
+
+const CollapsibleHeader = styled.button`
+  display: flex;
+  align-items: center;
+  width: 100%;
+  color: ${(p) => p.theme.light["-5"]};
+  background-color: ${(p) => p.theme.dark["+3"]};
+  border: 1px solid ${(p) => p.theme.dark["+7"]};
+  font-size: 13px;
+  padding: 6px;
+
+  &:hover {
+    background-color: ${(p) => p.theme.dark["+5"]};
+  }
+`;

src/panel/pages/request/components/Fields.fixture.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+import { schema } from "./Schema.fixture";
+import { Fields } from "./Fields";
+import { Box } from "./Stack";
+
+const typeMap = schema.getTypeMap();
+const setTypeMock = (type: any) => console.log(type);
+
+const Objects = () => (
+  <Box>
+    <h3 style={{ color: "white" }}>Basic</h3>
+    <Fields setType={setTypeMock} node={typeMap["User"]} key="1" />
+    <h3 style={{ color: "white" }}>Arg and Field Descriptions</h3>
+    <Fields setType={setTypeMock} node={typeMap["Mutation"]} key="2" />
+    <h3 style={{ color: "white" }}>Default args</h3>
+    <Fields setType={setTypeMock} node={typeMap["Query"]} key="3" />
+  </Box>
+);
+
+export default {
+  object: <Objects />,
+  interface: (
+    <Box>
+      <Fields data-snapshot setType={setTypeMock} node={typeMap["Test"]} />
+    </Box>
+  ),
+  enum: (
+    <Box>
+      <Fields data-snapshot setType={setTypeMock} node={typeMap["SortBy"]} />
+    </Box>
+  ),
+  union: (
+    <Box>
+      <Fields data-snapshot setType={setTypeMock} node={typeMap["Action"]} />
+    </Box>
+  ),
+  input: (
+    <Box>
+      <Fields
+        data-snapshot
+        setType={setTypeMock}
+        node={typeMap["ThreadInput"]}
+      />
+    </Box>
+  ),
+};