app-devtools 0.1.0 → 0.3.0

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

@@ -1,264 +0,0 @@
-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

@@ -1,174 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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

@@ -1,79 +0,0 @@
-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>
-    </>
-  )
-}