feat: update layout, add settings menu and group links

devtools/src/devtools/pane.js

@@ -24,7 +24,7 @@ function Panel() {
   };
 
   return (
-    <div className="p-2 w-screen h-screen">
+    <div className="bg-white p-2 w-screen h-screen">
       {result && <Result result={result} dispatch={dispatch} />}
     </div>
   );

package.json

@@ -39,6 +39,8 @@
   },
   "dependencies": {
     "@primer/octicons-react": "^10.0.0",
+    "@reach/dialog": "^0.10.5",
+    "@reach/menu-button": "^0.9.1",
     "@testing-library/dom": "^7.18.1",
     "@testing-library/user-event": "^12.0.11",
     "codemirror": "5.54.0",
@@ -57,8 +59,10 @@
     "react-dom": "^16.13.1",
     "react-router-dom": "^5.2.0",
     "react-toastify": "^6.0.5",
+    "react-toggle": "^4.1.1",
     "react-virtualized-auto-sizer": "^1.0.2",
-    "react-window": "^1.8.5"
+    "react-window": "^1.8.5",
+    "use-effect-reducer": "^0.6.1"
   },
   "devDependencies": {
     "@babel/core": "^7.10.2",
@@ -100,7 +104,7 @@
   "jest": {
     "verbose": true,
     "moduleNameMapper": {
-      "\\.(jpg|jpeg|png|svg)$": "<rootDir>/src/__mocks__/fileMock.js"
+      "\\.(jpg|jpeg|png|svg|css)$": "<rootDir>/src/__mocks__/fileMock.js"
     },
     "setupFilesAfterEnv": [
       "./tests/setupTests.js"

src/components/App.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
 import Playground from './Playground';
-import Layout from './Layout';
 import Embedded from './Embedded';
 import DomEvents from './DomEvents';
 
@@ -13,14 +12,10 @@ function App() {
           <Embedded />
         </Route>
         <Route path="/events">
-          <Layout>
-            <DomEvents />
-          </Layout>
+          <DomEvents />
         </Route>
         <Route path="/">
-          <Layout>
-            <Playground />
-          </Layout>
+          <Playground />
         </Route>
       </Switch>
     </Router>

src/components/DomEvents.js

@@ -14,6 +14,7 @@ import IconButton from './IconButton';
 import CopyButton from './CopyButton';
 import EmptyStreetImg from '../images/EmptyStreetImg';
 import StickyList from './StickyList';
+import Layout from './Layout';
 
 function onStateChange({ markup, query, result }) {
   state.save({ markup, query });
@@ -114,7 +115,7 @@ function DomEvents() {
 
   const sortDirection = useRef('asc');
   const [appendMode, setAppendMode] = useState('bottom');
-  const [{ markup, result }, dispatch] = usePlayground({
+  const [{ markup, result, settings }, dispatch] = usePlayground({
     onChange: onStateChange,
     ...initialValues,
   });
@@ -185,82 +186,84 @@ function DomEvents() {
   }, []);
 
   return (
-    <div className="flex flex-col h-auto md:h-full w-full">
-      <div className="editor p-4 markup-editor gap-4 md:gap-8 md:h-56 flex-auto grid-cols-1 md:grid-cols-2">
-        <div className="flex-auto relative h-56 md:h-full">
-          <MarkupEditor markup={markup} dispatch={dispatch} />
-        </div>
+    <Layout dispatch={dispatch} status={status} settings={settings}>
+      <div className="flex flex-col h-auto md:h-full w-full">
+        <div className="editor p-4 markup-editor gap-4 md:gap-8 md:h-56 flex-auto grid-cols-1 md:grid-cols-2">
+          <div className="flex-auto relative h-56 md:h-full">
+            <MarkupEditor markup={markup} dispatch={dispatch} />
+          </div>
 
-        <div className="flex-auto h-56 md:h-full">
-          <Preview
-            forwardedRef={setPreviewRef}
-            markup={markup}
-            elements={result.elements}
-            accessibleRoles={result.accessibleRoles}
-            dispatch={dispatch}
-            variant="minimal"
-          />
+          <div className="flex-auto h-56 md:h-full">
+            <Preview
+              forwardedRef={setPreviewRef}
+              markup={markup}
+              elements={result.elements}
+              accessibleRoles={result.accessibleRoles}
+              dispatch={dispatch}
+              variant="minimal"
+            />
+          </div>
         </div>
-      </div>
 
-      <div className="flex-none h-8" />
+        <div className="flex-none h-8" />
 
-      <div className="editor p-4 md:h-56 flex-auto overflow-hidden">
-        <div className="h-56 md:h-full w-full flex flex-col">
-          <div className="h-8 flex items-center w-full text-sm font-bold">
-            <div
-              className="p-2 w-16 cursor-pointer flex justify-between items-center"
-              onClick={changeSortDirection}
-            >
-              # {getSortIcon()}
-            </div>
+        <div className="editor p-4 md:h-56 flex-auto overflow-hidden">
+          <div className="h-56 md:h-full w-full flex flex-col">
+            <div className="h-8 flex items-center w-full text-sm font-bold">
+              <div
+                className="p-2 w-16 cursor-pointer flex justify-between items-center"
+                onClick={changeSortDirection}
+              >
+                # {getSortIcon()}
+              </div>
 
-            <div className="p-2 w-32 ">type</div>
-            <div className="p-2 w-32 ">name</div>
-
-            <div className="p-2 w-40 ">element</div>
-            <div className="flex-auto p-2 flex justify-between">
-              <span>selector</span>
-              <div>
-                <CopyButton
-                  text={getTextToCopy}
-                  title="copy log"
-                  className="mr-5"
-                />
-                <IconButton title="clear event log" onClick={reset}>
-                  <TrashcanIcon />
-                </IconButton>
+              <div className="p-2 w-32 ">type</div>
+              <div className="p-2 w-32 ">name</div>
+
+              <div className="p-2 w-40 ">element</div>
+              <div className="flex-auto p-2 flex justify-between">
+                <span>selector</span>
+                <div>
+                  <CopyButton
+                    text={getTextToCopy}
+                    title="copy log"
+                    className="mr-5"
+                  />
+                  <IconButton title="clear event log" onClick={reset}>
+                    <TrashcanIcon />
+                  </IconButton>
+                </div>
               </div>
             </div>
-          </div>
 
-          <div className="flex-auto relative overflow-hidden">
-            {buffer.current.length === 0 ? (
-              <div className="flex w-full h-full opacity-50 items-end justify-center">
-                <EmptyStreetImg height="80%" />
-              </div>
-            ) : (
-              <AutoSizer>
-                {({ width, height }) => (
-                  <StickyList
-                    mode={appendMode}
-                    ref={listRef}
-                    height={height}
-                    itemCount={eventCount}
-                    itemData={buffer.current}
-                    itemSize={32}
-                    width={width}
-                    outerElementType={VirtualScrollable}
-                  >
-                    {EventRecord}
-                  </StickyList>
-                )}
-              </AutoSizer>
-            )}
+            <div className="flex-auto relative overflow-hidden">
+              {buffer.current.length === 0 ? (
+                <div className="flex w-full h-full opacity-50 items-end justify-center">
+                  <EmptyStreetImg height="80%" />
+                </div>
+              ) : (
+                <AutoSizer>
+                  {({ width, height }) => (
+                    <StickyList
+                      mode={appendMode}
+                      ref={listRef}
+                      height={height}
+                      itemCount={eventCount}
+                      itemData={buffer.current}
+                      itemSize={32}
+                      width={width}
+                      outerElementType={VirtualScrollable}
+                    >
+                      {EventRecord}
+                    </StickyList>
+                  )}
+                </AutoSizer>
+              )}
+            </div>
           </div>
         </div>
       </div>
-    </div>
+    </Layout>
   );
 }