app-devtools 0.1.0

package/src/pages/api-explorer/RequestDetails.tsx

@@ -0,0 +1,264 @@
+import ButtonElement from '@src/components/ButtonElement'
+import { Section } from '@src/components/Section'
+import { ValueVisualizer } from '@src/components/ValueVisualizer'
+import { Diff } from '@src/pages/api-explorer/Diff'
+import { ApiCall, callsStore } from '@src/stores/callsStore'
+import { setUiStore, uiStore } from '@src/stores/uiStore'
+import { ellipsis } from '@src/style/helpers/ellipsis'
+import { inline } from '@src/style/helpers/inline'
+import { stack } from '@src/style/helpers/stack'
+import { colors, fonts } from '@src/style/theme'
+import dayjs from 'dayjs'
+import { createMemo } from 'solid-js'
+import { css } from 'solid-styled-components'
+
+const containerStyle = css`
+  &&& {
+    ${stack()};
+    padding-left: 10px;
+
+    > h1 {
+      margin-top: 12px;
+      font-family: ${fonts.decorative};
+      ${ellipsis};
+    }
+
+    > h2 {
+      margin-top: 4px;
+      font-family: ${fonts.decorative};
+      font-size: 12px;
+      opacity: 0.5;
+    }
+
+    .tags {
+      ${inline({ gap: 8 })};
+      margin-top: 8px;
+
+      .method {
+        color: ${colors.primary.var};
+      }
+
+      .code {
+        color: ${colors.success.var};
+
+        &.error {
+          color: ${colors.error.var};
+        }
+      }
+
+      .tag {
+        font-size: 11px;
+        color: ${colors.warning.var};
+        padding: 1px 3px;
+        border-radius: 4px;
+        border: 1px solid ${colors.warning.alpha(0.6)};
+
+        &.error {
+          color: ${colors.error.var};
+          font-weight: 600;
+          border-color: ${colors.error.alpha(0.6)};
+        }
+      }
+    }
+
+    > .details {
+      margin-top: 14px;
+      padding-right: 10px;
+      ${stack({ gap: 8 })};
+      flex: 1 1;
+      overflow-y: auto;
+      padding-bottom: 20px;
+    }
+  }
+`
+
+const tabsStyle = css`
+  &&& {
+    ${inline({ gap: 20 })};
+    color: ${colors.secondary.var};
+    margin-top: 20px;
+
+    > button {
+      opacity: 0.74;
+      padding-bottom: 2px;
+
+      &.selected {
+        border-bottom: 2px solid currentColor;
+      }
+
+      &.selected,
+      &:hover {
+        opacity: 1;
+      }
+    }
+  }
+`
+
+export const RequestDetails = () => {
+  const selectedCallId = $(uiStore.selectedCall)
+  const selectedRequestId = $(uiStore.selectedRequest)
+  const selectedTab = $(uiStore.selectedTab || 'summary')
+
+  const selectedRequest = createMemo(() => {
+    let selectedCall: ApiCall | undefined
+
+    if (selectedCallId) {
+      selectedCall = callsStore.calls[selectedCallId]
+    } else {
+      selectedCall = Object.values(callsStore.calls).at(-1)
+    }
+
+    const selectedRequest =
+      (selectedRequestId &&
+        selectedCall?.requests.find(
+          (request) => request.id === selectedRequestId,
+        )) ||
+      selectedCall?.requests.at(-1)
+
+    if (selectedRequest && selectedCall) {
+      return {
+        ...selectedRequest,
+        callName: selectedCall.name,
+        callPath: selectedCall.path,
+      }
+    }
+
+    return null
+  })
+
+  function getTab(tabId: string, label: string) {
+    return (
+      <ButtonElement
+        classList={{
+          selected: selectedTab === tabId,
+        }}
+        onClick={() => {
+          setUiStore('selectedTab', tabId)
+        }}
+      >
+        {label}
+      </ButtonElement>
+    )
+  }
+
+  return (
+    <div class={containerStyle}>
+      <Show
+        when={selectedRequest()}
+        keyed
+      >
+        {(request) => (
+          <>
+            <h1>
+              {request.callName}
+              {request.alias && ` | ${request.alias}`}
+            </h1>
+
+            {request.callPath !== request.callName && (
+              <h2>{request.callPath}</h2>
+            )}
+
+            <div class="tags">
+              {request.method && <div class="method">{request.method}</div>}
+
+              {request.code && (
+                <div
+                  class="code"
+                  classList={{
+                    error: request.code >= 400,
+                  }}
+                >
+                  {request.code}
+                </div>
+              )}
+
+              {request.isError && <div class="tag error">Has Error</div>}
+
+              <For each={request.tags}>
+                {(tag) => <div class="tag">{tag}</div>}
+              </For>
+            </div>
+
+            <div class={tabsStyle}>
+              {getTab('summary', 'Summary')}
+              {!!request.payload && getTab('payload', 'Payload')}
+              {!!request.searchParams && getTab('urlParams', 'URL Params')}
+              {getTab('response', 'Response')}
+              {getTab('diff', 'Diff')}
+            </div>
+
+            <div class="details">
+              <Switch>
+                <Match when={selectedTab === 'summary'}>
+                  {!!request.payload && (
+                    <Section title="Payload">
+                      <ValueVisualizer
+                        value={request.payload}
+                        compact
+                      />
+                    </Section>
+                  )}
+
+                  {!!request.searchParams && (
+                    <Section title="URL Params">
+                      <ValueVisualizer
+                        value={request.searchParams}
+                        compact
+                      />
+                    </Section>
+                  )}
+
+                  {!!request.response && (
+                    <Section title="Response">
+                      <ValueVisualizer
+                        value={request.response}
+                        compact
+                      />
+                    </Section>
+                  )}
+
+                  <Section title="Stats">
+                    <ValueVisualizer
+                      value={{
+                        'Duration (ms)': Math.round(request.duration),
+                        'Start Time': `${dayjs(request.startTime).format(
+                          'HH:mm:ss',
+                        )} (${dayjs(request.startTime).fromNow()})`,
+                      }}
+                    />
+                  </Section>
+
+                  <Section title="Metadata">
+                    <ValueVisualizer value={request.metadata} />
+                  </Section>
+                </Match>
+
+                <Match when={selectedTab === 'payload'}>
+                  <Section title={null}>
+                    <ValueVisualizer value={request.payload} />
+                  </Section>
+                </Match>
+
+                <Match when={selectedTab === 'response'}>
+                  <Section title={null}>
+                    <ValueVisualizer value={request.response} />
+                  </Section>
+                </Match>
+
+                <Match when={selectedTab === 'urlParams'}>
+                  <Section title={null}>
+                    <ValueVisualizer value={request.searchParams} />
+                  </Section>
+                </Match>
+
+                <Match when={selectedTab === 'diff'}>
+                  <Diff />
+                </Match>
+              </Switch>
+            </div>
+          </>
+        )}
+      </Show>
+    </div>
+  )
+}

package/src/pages/api-explorer/Timeline.tsx

@@ -0,0 +1,174 @@
+import ButtonElement from '@src/components/ButtonElement'
+import { callsStore } from '@src/stores/callsStore'
+import { setUiStore, uiStore } from '@src/stores/uiStore'
+import { ellipsis } from '@src/style/helpers/ellipsis'
+import { inline } from '@src/style/helpers/inline'
+import { stack } from '@src/style/helpers/stack'
+import { colors, fonts } from '@src/style/theme'
+import { reverseCopy } from '@utils/arrayUtils'
+import dayjs from 'dayjs'
+import { createMemo } from 'solid-js'
+import { css } from 'solid-styled-components'
+import { getRequestPayload } from './getRequestPayload'
+
+const containerStyle = css`
+  &&& {
+    ${stack()};
+    border-right: 1px solid ${colors.white.alpha(0.1)};
+
+    > h1 {
+      font-size: 16px;
+      padding-left: 12px;
+      padding-top: 10px;
+      font-family: ${fonts.decorative};
+      color: ${colors.secondary.var};
+      padding-bottom: 16px;
+    }
+  }
+`
+
+const itemsContainerStyle = css`
+  &&& {
+    ${stack()};
+    flex: 1 1;
+    overflow-y: auto;
+  }
+`
+
+const requestItemStyle = css`
+  &&& {
+    font-size: 13px;
+    ${stack()};
+
+    &.error {
+      color: ${colors.error.var};
+      font-weight: 600;
+    }
+
+    > button {
+      padding: 4px 12px;
+      ${inline({ gap: 8 })};
+      opacity: 0.8;
+
+      &.selected {
+        opacity: 1;
+        background-color: ${colors.secondary.alpha(0.16)};
+      }
+
+      > .start-time {
+        font-family: ${fonts.decorative};
+      }
+
+      > .separator {
+        opacity: 0.5;
+      }
+
+      > .payload {
+        ${ellipsis};
+        flex-shrink: 1;
+      }
+    }
+  }
+`
+
+const emptyStateStyle = css`
+  &&& {
+    opacity: 0.4;
+    font-size: 14px;
+    padding: 12px;
+    padding-top: 0;
+  }
+`
+
+export const Timeline = () => {
+  const selectedCall = createMemo(() => {
+    const selectedCallId = uiStore.selectedCall
+
+    if (!selectedCallId) {
+      const callsEntries = Object.values(callsStore.calls).at(-1)
+
+      return callsEntries || null
+    }
+
+    if (selectedCallId) {
+      return callsStore.calls[selectedCallId]
+    }
+
+    return null
+  })
+
+  const requests = createMemo(() => {
+    const reversed = reverseCopy(selectedCall()?.requests)
+    return reversed.length === 0 ? null : reversed
+  })
+
+  const filteredRequests = createMemo(() => {
+    if (uiStore.selectedSubitem) {
+      return requests()?.filter((request) => {
+        return request.alias === uiStore.selectedSubitem
+      })
+    } else {
+      return requests()
+    }
+  })
+
+  const selectedRequestId = $(
+    uiStore.selectedRequest || filteredRequests()?.[0]?.id,
+  )
+
+  return (
+    <div class={containerStyle}>
+      <h1>timeline</h1>
+
+      <div class={itemsContainerStyle}>
+        <For
+          each={filteredRequests()}
+          fallback={<div class={emptyStateStyle}>no requests found</div>}
+        >
+          {(request) => {
+            const startTime = dayjs(request.startTime)
+            const formattedStartTime = startTime.format('HH:mm:ss')
+            const relativeStartTime = startTime.fromNow()
+
+            const payload = getRequestPayload(request)
+
+            return (
+              <div
+                class={requestItemStyle}
+                classList={{ error: request.isError }}
+              >
+                <ButtonElement
+                  onClick={() => {
+                    setUiStore('selectedRequest', request.id)
+                  }}
+                  classList={{
+                    selected: request.id === selectedRequestId,
+                  }}
+                >
+                  <span
+                    class="start-time"
+                    title={relativeStartTime}
+                  >
+                    {formattedStartTime}
+                  </span>
+
+                  {!!payload && (
+                    <>
+                      <span class="separator">|</span>
+                      <span
+                        class="payload"
+                        title={payload}
+                      >
+                        {payload}
+                      </span>
+                    </>
+                  )}
+                </ButtonElement>
+              </div>
+            )
+          }}
+        </For>
+      </div>
+    </div>
+  )
+}

package/src/pages/api-explorer/api-explorer.tsx

@@ -0,0 +1,21 @@
+import { ApiExplorerMenu } from '@src/pages/api-explorer/ApiExplorerMenu'
+import { RequestDetails } from '@src/pages/api-explorer/RequestDetails'
+import { Timeline } from '@src/pages/api-explorer/Timeline'
+import { css } from 'solid-styled-components'
+
+const containerStyle = css`
+  &&& {
+    display: grid;
+    grid-template-columns: 1.5fr 1fr 3fr;
+  }
+`
+
+export const ApiExplorerPage = () => {
+  return (
+    <div class={containerStyle}>
+      <ApiExplorerMenu />
+      <Timeline />
+      <RequestDetails />
+    </div>
+  )
+}

package/src/pages/api-explorer/getRequestPayload.tsx

@@ -0,0 +1,15 @@
+import { ApiRequest } from '@src/stores/callsStore';
+
+export function getRequestPayload(request: ApiRequest) {
+  const payload = request.alias || request.payload || request.searchParams;
+
+  if (!payload || Object.keys(payload).length === 0) {
+    return '';
+  }
+
+  if (typeof payload === 'string' || typeof payload === 'number') {
+    return String(payload);
+  }
+
+  return JSON.stringify(payload);
+}

package/src/pages/app/App.tsx

@@ -0,0 +1,79 @@
+import ButtonElement from '@src/components/ButtonElement'
+import Icon from '@src/components/Icon'
+import { unmountApp } from '@src/initializeApp'
+import { ApiExplorerPage } from '@src/pages/api-explorer/api-explorer'
+import { globalStyle } from '@src/style/globalStyle'
+import { centerContent } from '@src/style/helpers/centerContent'
+import { fillContainer } from '@src/style/helpers/fillContainer'
+import { stack } from '@src/style/helpers/stack'
+import { resetStyle } from '@src/style/reset'
+import { colors } from '@src/style/theme'
+import { css } from 'goober'
+
+const containerStyle = css`
+  ${resetStyle};
+  ${globalStyle};
+
+  position: fixed;
+  inset: 32px;
+  border-radius: 4px;
+  background: ${colors.bgPrimary.var};
+  display: grid;
+  grid-template-columns: 51px 1fr;
+
+  nav {
+    ${stack()};
+    border-right: 1px solid ${colors.white.alpha(0.1)};
+
+    button {
+      ${centerContent};
+      width: 100%;
+      aspect-ratio: 1 / 1;
+      color: ${colors.bgPrimary.var};
+      --icon-size: 30px;
+
+      &::before {
+        content: '';
+        inset: 6px;
+        border-radius: 3px;
+        position: absolute;
+        background: ${colors.primary.var};
+      }
+    }
+  }
+
+  > main > * {
+    ${fillContainer};
+  }
+`
+
+const backdropStyle = css`
+  ${fillContainer};
+  position: fixed;
+  inset: 0;
+`
+
+export const App = () => {
+  return (
+    <>
+      <div
+        class={backdropStyle}
+        onClick={unmountApp}
+      />
+      <div
+        class={containerStyle}
+        id="dev-tools-root-element"
+      >
+        <nav>
+          <ButtonElement title="API Explorer">
+            <Icon name="network" />
+          </ButtonElement>
+        </nav>
+
+        <main>
+          <ApiExplorerPage />
+        </main>
+      </div>
+    </>
+  )
+}