alpine-collective · KevinBatdorf · Dec 21, 2020 · Dec 21, 2020 · Dec 21, 2020 · Dec 21, 2020
diff --git a/lib/edge/render.js b/lib/edge/render.js
@@ -3,11 +3,14 @@ import path from 'path'
 import * as edge from 'edge.js'
 import VerbatimTag from './VerbatimTag'
 
+const viewData = {
+    devOnly: process.env.NODE_ENV !== 'production',
+}
 edge.registerViews(path.join(__dirname, './packages/shell-chrome/views'))
 edge.tag(new VerbatimTag())
 
 export function renderView(view, outputFilename, outputPath) {
-    let contents = edge.render(view)
+    let contents = edge.render(view, viewData)
     let dir = outputPath || path.join(__dirname, './dist/chrome')
 
     if (process.env.NODE_ENV === 'production') {

diff --git a/packages/shell-chrome/src/devtools/devtools.js b/packages/shell-chrome/src/devtools/devtools.js
@@ -47,7 +47,6 @@ export default function devtools() {
 
         themes: themes,
 
-        settingsPanelEnabled: process.env.NODE_ENV !== 'production',
         settingsPanelOpen: false,
 
         get isLatest() {

diff --git a/packages/shell-chrome/views/_partials/header.edge b/packages/shell-chrome/views/_partials/header.edge
@@ -97,7 +97,6 @@
         <button
             data-testid="settings-panel-open-button"
             class="hover:opacity-75 focus:outline-none"
-            x-show="settingsPanelEnabled"
             @click="settingsPanelOpen = true"
         >
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" class="fill-current w-5 h-5">

diff --git a/packages/shell-chrome/views/_partials/settings.edge b/packages/shell-chrome/views/_partials/settings.edge
diff --git a/packages/shell-chrome/views/panel.edge b/packages/shell-chrome/views/panel.edge
@@ -13,9 +13,17 @@
     </head>
 
     <body class="antialiased">
-        <div x-data x-show="false" class="preload">Devtools loading...</div>
+        <div data-testid="panel-root" x-data x-show="false" class="preload">Devtools loading...</div>
 
-        <div id="app" class="h-full" x-cloak x-data="devtools()" x-init="init()" x-spread="devtoolsRootDirectives()">
+        <div
+            id="app"
+            data-testid="panel-root"
+            class="h-full"
+            x-cloak
+            x-data="devtools()"
+            x-init="init()"
+            x-spread="devtoolsRootDirectives()"
+        >
             <div class="bg-white flex flex-col relative h-full w-full mx-auto">
                 @include('_partials.header')
 
@@ -91,7 +99,7 @@
                     </div>
                 </div>
 
-                @include('_partials.settings')
+                @include('settings.index')
             </div>
         </div>
         <script src="./panel.js"></script>

diff --git a/packages/shell-chrome/views/settings/index.edge b/packages/shell-chrome/views/settings/index.edge
@@ -0,0 +1,67 @@
+<div
+    data-testid="settings-panel"
+    x-show="settingsPanelOpen"
+    class="inset-0 absolute flex flex-col items-center justify-center z-max"
+>
+    <div class="absolute bg-alpine-400 opacity-30 inset-0"></div>
+    <div class="p-4 flex-1 flex items-center justify-center w-full relative z-50" @click="settingsPanelOpen = false">
+        <div
+            x-show.transition.in.opacity="settingsPanelOpen"
+            class="bg-white w-full h-full p-4 shadow-lg border border-silver-400 relative"
+            @click.stop
+        >
+            <button
+                data-testid="settings-panel-close-button"
+                class="absolute top-0 right-0 focus:outline-none block"
+                @click="settingsPanelOpen = false"
+            >
+                <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 20 20"
+                    class="text-black absolute top-1 right-1 w-5 h-5"
+                    fill="currentColor"
+                >
+                    <path
+                        fill-rule="evenodd"
+                        d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+                        clip-rule="evenodd"
+                    />
+                </svg>
+            </button>
+            <div
+                x-data="{
+                    pages: [
+                        {
+                            name: 'Preferences',
+                            enabled: true,
+                        },
+                        {
+                            name: 'Experimental',
+                            enabled: {{ devOnly }},
+                        }
+                    ].filter(p => p.enabled),
+                    active: 'Preferences'
+                }"
+                class="flex space-x-4"
+            >
+                <div>
+                    <h2 class="text-lg font-light">Settings</h2>
+                    <nav class="flex flex-col items-start text-sm mt-3 text-cool-gray-500 space-y-1">
+                        <template x-for="page in pages" :key="page.name">
+                            <button
+                                x-text="page.name"
+                                class="focus:outline-none border-l-8 pl-2 border-transparent"
+                                :class="{ 'border-ice-500': active === page.name }"
+                                @click="active = page.name"
+                            ></button>
+                        </template>
+                    </nav>
+                </div>
+                <div class="flex-grow">
+                    @each(page in ['Preferences', 'Experimental'], include = 'settings/pages/' + page.toLowerCase())
+                    @endeach
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/packages/shell-chrome/views/settings/pages/experimental.edge b/packages/shell-chrome/views/settings/pages/experimental.edge
@@ -0,0 +1,6 @@
+<div x-show="active === 'Experimental'">
+    <div class="w-full border-b border-cool-gray-200 mb-4 pb-2">
+        <h3 class="text-2xl font-light">Experimental</h3>
+    </div>
+    <div>Nothing to see here!</div>
+</div>
diff --git a/packages/shell-chrome/views/settings/pages/preferences.edge b/packages/shell-chrome/views/settings/pages/preferences.edge
@@ -0,0 +1,26 @@
+<div x-show="active === 'Preferences'">
+    <div class="w-full border-b border-cool-gray-200 mb-2 pb-2">
+        <h3 class="text-2xl font-light">Preferences</h3>
+    </div>
+    <div class="lg:grid grid-cols-3">
+        <div>
+            <h2 class="uppercase text-sm font-medium mb-3 text-cool-gray-500">Visibility</h2>
+            <div>
+                <label for="email" class="block text-sm font-medium text-gray-700">Hidden components</label>
+                <div class="mt-1">
+                    <input
+                        type="text"
+                        autocomplete="off"
+                        name="hide-component"
+                        class="p-0.5 px-2 shadow-sm focus:ring-ice-500 focus:border-transparent block w-full sm:text-xs border-gray-300 rounded-md placeholder-cool-gray-400"
+                        placeholder="[x-devtools-ignore]"
+                        aria-describedby="hide-component-description"
+                    />
+                </div>
+                <p class="mt-1 text-xs text-gray-500" id="hide-component-description">
+                    Hide components using the above selector.
+                </p>
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/packages/simulator/utils.js b/packages/simulator/utils.js
@@ -15,7 +15,7 @@ export async function injectPanel(containerNode) {
     // this contains all sorts of CSS tags etc
     containerNode.innerHTML = rawPanelHtml
     // keep only the Alpine components in the panel
-    const panelAppHtml = Array.from(containerNode.querySelectorAll('[x-data]'))
+    const panelAppHtml = Array.from(containerNode.querySelectorAll('[data-testid="panel-root"]'))
         .map((el) => el.outerHTML)
         .join('\n')