app-devtools 0.1.0 → 0.3.0

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

@@ -1,136 +0,0 @@
-import Icon from '@src/components/Icon'
-import {
-  ApiExplorerMenuItem,
-  MenuItem,
-} from '@src/pages/api-explorer/ApiExplorerMenuItem'
-import { callsStore } from '@src/stores/callsStore'
-import { uiStore } from '@src/stores/uiStore'
-import { inline } from '@src/style/helpers/inline'
-import { stack } from '@src/style/helpers/stack'
-import { colors, fonts } from '@src/style/theme'
-import { createReconciledArray, createSignalRef } from '@utils/solid'
-import { css } from 'solid-styled-components'
-
-const containerStyle = css`
-  &&& {
-    ${stack()};
-    border-right: 1px solid ${colors.white.alpha(0.1)};
-
-    > h1 {
-      font-size: 18px;
-      padding-left: 12px;
-      padding-top: 10px;
-      font-family: ${fonts.decorative};
-      color: ${colors.secondary.var};
-      padding-bottom: 16px;
-    }
-  }
-`
-
-const menuContainerStyle = css`
-  &&& {
-    ${stack()};
-    flex: 1 1;
-    overflow-y: auto;
-    padding-bottom: 16px;
-  }
-`
-
-const searchStyle = css`
-  &&& {
-    ${inline({ gap: 8 })};
-    margin: 0 10px;
-    margin-bottom: 8px;
-
-    display: grid;
-    grid-template-columns: 14px 1fr;
-    background: ${colors.white.alpha(0.05)};
-    border-radius: 4px;
-    --icon-size: 16px;
-    padding: 4px 0;
-    padding-left: 6px;
-
-    .icon {
-      color: ${colors.secondary.var};
-    }
-
-    input {
-      border: none;
-      background: transparent;
-      color: ${colors.white.var};
-
-      &:focus {
-        outline: none;
-      }
-    }
-  }
-`
-
-export const ApiExplorerMenu = () => {
-  const search = createSignalRef('')
-
-  const menuItems = createReconciledArray(() => {
-    const callsEntries = Object.entries(callsStore.calls)
-
-    const filtered: MenuItem[] = []
-
-    for (const [key, value] of callsEntries.reverse()) {
-      if (
-        search.value.trim() &&
-        !value.name.includes(search.value.toLowerCase())
-      ) {
-        continue
-      }
-
-      const subitemsWithAlias = new Set<string>()
-
-      for (const request of value.requests) {
-        if (request.alias) {
-          subitemsWithAlias.add(request.alias)
-        }
-      }
-
-      filtered.push({
-        id: key,
-        subitemsWithAlias: [...subitemsWithAlias],
-        ...value,
-      })
-    }
-
-    return filtered
-  }, 'id')
-
-  const currentCallId = $(uiStore.selectedCall)
-
-  return (
-    <div class={containerStyle}>
-      <h1>API EXPLORER</h1>
-
-      <label class={searchStyle}>
-        <Icon name="search" />
-        <input
-          type="text"
-          placeholder="Search"
-          value={search.value}
-          onInput={(e) => {
-            search.value = e.currentTarget.value
-          }}
-        />
-      </label>
-
-      <div class={menuContainerStyle}>
-        <For each={menuItems()}>
-          {(item, i) => {
-            return (
-              <ApiExplorerMenuItem
-                index={i()}
-                item={item}
-                currentCallId={currentCallId}
-              />
-            )
-          }}
-        </For>
-      </div>
-    </div>
-  )
-}

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

@@ -1,208 +0,0 @@
-import ButtonElement from '@src/components/ButtonElement'
-import Icon from '@src/components/Icon'
-import { ApiCall, RequestSubTypes, RequestTypes } 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 { createSignalRef } from '@utils/solid'
-import { css } from 'solid-styled-components'
-
-const menuItemStyle = css`
-  &&& {
-    font-size: 14px;
-    ${stack()};
-
-    > .call {
-      padding: 4px 12px;
-      ${inline()};
-      opacity: 0.8;
-
-      &.selected {
-        opacity: 1;
-        background-color: ${colors.secondary.alpha(0.16)};
-      }
-
-      > button {
-        text-align: left;
-        ${inline({ gap: 8 })};
-
-        > .tag {
-          font-weight: 600;
-          font-family: ${fonts.decorative};
-        }
-
-        > span {
-          ${ellipsis};
-          flex-shrink: 1;
-        }
-      }
-    }
-
-    .subitem {
-      text-align: left;
-      padding: 4px 12px;
-      padding-left: 14px;
-      margin-left: 16px;
-      border-left: 1px solid ${colors.white.alpha(0.1)};
-
-      span {
-        opacity: 0.6;
-        padding: 4px 8px;
-        margin-left: -8px;
-        border-radius: 4px;
-      }
-
-      &.selected span {
-        opacity: 1;
-        background-color: ${colors.secondary.alpha(0.16)};
-      }
-
-      &:first-of-type {
-        margin-top: 2px;
-      }
-
-      &:last-of-type {
-        border-radius: 0 0 0 10px;
-        border-bottom: 1px solid ${colors.white.alpha(0.1)};
-        padding-bottom: 10px;
-        margin-bottom: 4px;
-      }
-    }
-
-    .expand-button {
-      margin-left: auto;
-      --icon-size: 16px;
-
-      &.expanded {
-        transform: rotate(180deg);
-      }
-    }
-  }
-`
-
-type ApiExplorerMenuItemProps = {
-  index: number
-  currentCallId: string | null
-  item: MenuItem
-}
-
-export type MenuItem = ApiCall & {
-  id: string
-  subitemsWithAlias: string[]
-}
-
-export const ApiExplorerMenuItem = (props: ApiExplorerMenuItemProps) => {
-  const { item, currentCallId } = $destructure(props)
-
-  const showSubitems = createSignalRef(props.item.subitemsWithAlias.length < 4)
-
-  const typeIcon = getTypeIcon(item.type, item.subType)
-
-  return (
-    <div class={menuItemStyle}>
-      <div
-        class="call"
-        classList={{
-          selected: currentCallId
-            ? currentCallId === item.id
-            : props.index === 0,
-        }}
-      >
-        <ButtonElement
-          onClick={() => {
-            setUiStore({ selectedCall: item.id, selectedSubitem: null })
-          }}
-        >
-          <div
-            class="tag"
-            title={`${item.type}${item.subType ? ` (${item.subType})` : ''}`}
-            style={{ color: typeIcon.color }}
-          >
-            {typeIcon.icon}
-          </div>
-
-          <span title={item.name}>{item.name}</span>
-        </ButtonElement>
-
-        {item.subitemsWithAlias.length > 0 && (
-          <ButtonElement
-            class="expand-button"
-            classList={{
-              expanded: showSubitems.value,
-            }}
-            onClick={() => {
-              showSubitems.value = !showSubitems.value
-            }}
-          >
-            <Icon name="caret-down" />
-          </ButtonElement>
-        )}
-      </div>
-
-      <Show when={showSubitems.value}>
-        <For each={item.subitemsWithAlias}>
-          {(subitem) => (
-            <ButtonElement
-              class="subitem"
-              classList={{
-                selected:
-                  currentCallId === item.id &&
-                  uiStore.selectedSubitem === subitem,
-              }}
-              onClick={() => {
-                setUiStore({
-                  selectedCall: item.id,
-                  selectedSubitem: subitem,
-                })
-              }}
-            >
-              <span>{subitem}</span>
-            </ButtonElement>
-          )}
-        </For>
-      </Show>
-    </div>
-  )
-}
-
-function getTypeIcon(
-  type: RequestTypes,
-  subType: RequestSubTypes | undefined,
-): {
-  icon: string
-  color: string
-} {
-  let icon = ''
-  let color = ''
-
-  if (type === 'fetch') {
-    icon = 'F'
-    color = '#FDE047'
-  } else {
-    if (subType) {
-      if (subType === 'create') {
-        icon = 'C'
-        color = '#6EE7B7'
-      } else if (subType === 'update') {
-        icon = 'U'
-        color = '#A78BFA'
-      } else if (subType === 'delete') {
-        icon = 'D'
-        color = '#E53558'
-      } else {
-        icon = subType[0]?.toUpperCase() || '?'
-        color = '#FDE047'
-      }
-    } else {
-      icon = 'M'
-      color = '#A78BFA'
-    }
-  }
-
-  return {
-    icon,
-    color,
-  }
-}

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

@@ -1,223 +0,0 @@
-import { Section } from '@src/components/Section'
-import Select from '@src/components/Select'
-import { getRequestPayload } from '@src/pages/api-explorer/getRequestPayload'
-import { ApiRequest, callsStore } from '@src/stores/callsStore'
-import { uiStore } from '@src/stores/uiStore'
-import { stack } from '@src/style/helpers/stack'
-import { colors, fonts } from '@src/style/theme'
-import { reverseCopy } from '@utils/arrayUtils'
-import { getDiff } from '@utils/getDiff'
-import { createReconciledArray, createSignalRef } from '@utils/solid'
-import { truncateText } from '@utils/truncateText'
-import dayjs from 'dayjs'
-import { createMemo } from 'solid-js'
-import { css } from 'solid-styled-components'
-
-const containerStyle = css`
-  &&& {
-    ${stack({ gap: 14 })};
-
-    .changes-count {
-      color: ${colors.white.alpha(0.5)};
-      font-size: 14px;
-
-      .additions {
-        color: ${colors.success.var};
-      }
-
-      .removals {
-        color: ${colors.error.var};
-      }
-    }
-  }
-`
-
-const diffContainerStyle = css`
-  &&& {
-    ${stack({ gap: 0 })};
-    font-size: 14px;
-    font-family: ${fonts.decorative};
-    white-space: pre;
-    overflow-x: auto;
-
-    .line {
-      opacity: 0.7;
-      padding-left: 10px;
-
-      &.added {
-        opacity: 1;
-        color: ${colors.success.var};
-        background: ${colors.success.alpha(0.1)};
-
-        &::before {
-          content: '+';
-          position: absolute;
-          left: 0;
-        }
-      }
-
-      &.removed {
-        opacity: 1;
-        color: ${colors.error.var};
-        background: ${colors.error.alpha(0.1)};
-
-        &::before {
-          content: '-';
-          position: absolute;
-          left: 0;
-        }
-      }
-    }
-  }
-`
-
-export const Diff = () => {
-  const currentCall = createMemo(() => {
-    const { selectedCall } = uiStore
-
-    if (!selectedCall) return Object.values(callsStore.calls).at(-1)
-
-    return callsStore.calls[selectedCall]
-  })
-
-  const requestOptions = createReconciledArray(() => {
-    const call = currentCall()
-
-    if (!call) return []
-
-    return reverseCopy(call.requests)
-      .map((request) => {
-        return {
-          value: request.id,
-          label: `${dayjs(request.startTime).format(
-            'HH:mm:ss',
-          )} | ${truncateText(getRequestPayload(request), 50)}`,
-        }
-      })
-      .filter((request) => request.value !== uiStore.selectedRequest)
-  }, 'value')
-
-  const compareRequest = createSignalRef<null | string>(null)
-
-  const activeRequest = createMemo(() => {
-    if (!uiStore.selectedRequest) return null
-
-    return currentCall()?.requests.find(
-      (request) => request.id === uiStore.selectedRequest,
-    )
-  })
-
-  const compareFromRequest = createMemo(() => {
-    if (!compareRequest.value) return null
-
-    return currentCall()?.requests.find(
-      (request) => request.id === compareRequest.value,
-    )
-  })
-
-  const responseDiff = createMemo(() => {
-    if (!compareRequest.value || !uiStore.selectedRequest) return []
-
-    const activeResponse = activeRequest()?.response
-
-    const compareFromResponse = compareFromRequest()?.response
-
-    const diffParts = getDiff(compareFromResponse, activeResponse)
-
-    return diffParts === 'no changes' ? [] : diffParts
-  })
-
-  const payloadDiff = createMemo(() => {
-    if (!compareRequest.value || !uiStore.selectedRequest) return []
-
-    const activePayload = getPayload(activeRequest())
-
-    const compareFromPayload = getPayload(compareFromRequest())
-
-    const diffParts = getDiff(compareFromPayload, activePayload)
-
-    return diffParts === 'no changes' ? [] : diffParts
-  })
-
-  return (
-    <div class={containerStyle}>
-      <Select
-        value={compareRequest.value}
-        label="Select a request to compare with"
-        options={requestOptions()}
-        onChange={(value) => {
-          compareRequest.value = value
-        }}
-      />
-
-      <Show when={compareRequest.value}>
-        <div class="changes-count">
-          <span class="additions">
-            + <b>{responseDiff().filter((item) => item.added).length}</b> lines
-          </span>{' '}
-          |{' '}
-          <span class="removals">
-            - <b>{responseDiff().filter((item) => item.removed).length}</b>{' '}
-            lines
-          </span>
-        </div>
-
-        <Section
-          title={
-            activeRequest()?.payload
-              ? 'Payload Diff'
-              : activeRequest()?.searchParams
-              ? 'Search Params Diff'
-              : 'Path Params Diff'
-          }
-        >
-          <div class={diffContainerStyle}>
-            <For
-              each={payloadDiff()}
-              fallback={<div>No changes</div>}
-            >
-              {(item) => (
-                <div
-                  class="line"
-                  classList={{
-                    added: item.added,
-                    removed: item.removed,
-                  }}
-                >
-                  {item.value}
-                </div>
-              )}
-            </For>
-          </div>
-        </Section>
-
-        <Section title={'Response Diff'}>
-          <div class={diffContainerStyle}>
-            <For
-              each={responseDiff()}
-              fallback={<div>No changes</div>}
-            >
-              {(item) => (
-                <div
-                  class="line"
-                  classList={{
-                    added: item.added,
-                    removed: item.removed,
-                  }}
-                >
-                  {item.value}
-                </div>
-              )}
-            </For>
-          </div>
-        </Section>
-      </Show>
-    </div>
-  )
-}
-
-function getPayload(request: ApiRequest | undefined | null) {
-  if (!request) return null
-
-  return request.payload || request.searchParams || request.pathParams
-}