app-devtools 0.1.0

package/src/stores/callsStore.ts

@@ -0,0 +1,267 @@
+import { createStore, produce } from 'solid-js/store'
+import { nanoid } from 'nanoid'
+import { batch } from 'solid-js'
+import { assertIsNotNullish } from '@utils/assertions'
+import { tryExpression } from '@utils/tryExpression'
+import { matchURLPattern } from '@utils/urlPattern'
+
+export type RequestSubTypes = 'delete' | 'update' | 'create' | 'custom'
+
+export type RequestTypes = 'fetch' | 'mutation'
+
+export type ApiRequest = {
+  id: string
+  alias?: string
+  payload: unknown
+  response: unknown
+  metadata: unknown
+  status: number
+  isError: boolean
+  path: string
+  searchParams: Record<string, string> | null
+  type: RequestTypes
+  subType: RequestSubTypes | undefined
+  method: string | undefined
+  startTime: number
+  duration: number
+  pathParams: Record<string, string | null> | null
+  code: number | undefined
+  tags: string[]
+}
+
+export type ApiCall = {
+  name: string
+  path: string
+  type: RequestTypes
+  subType?: RequestSubTypes
+  lastRequestStartTime: number
+  requests: ApiRequest[]
+}
+
+type State = {
+  calls: {
+    [callID: string]: ApiCall
+  }
+}
+
+export const [callsStore, setCallsStore] = createStore<State>({
+  calls: {},
+})
+
+export type Config = {
+  callsProcessor: {
+    match:
+      | ((request: {
+          url: URL
+          type: RequestTypes
+          subType: RequestSubTypes | undefined
+        }) => boolean)
+      | string
+    callName?:
+      | ((request: {
+          url: URL
+          type: RequestTypes
+          subType?: RequestSubTypes
+        }) => string)
+      | string
+    callID?: (request: {
+      url: URL
+      type: RequestTypes
+      subType?: RequestSubTypes
+    }) => string
+    payloadAlias?: (payload: any, request: ApiRequest) => string
+  }[]
+}
+
+let config: Config = {
+  callsProcessor: [],
+}
+
+export function setConfig(newConfig: Partial<Config>) {
+  config = {
+    ...config,
+    ...newConfig,
+  }
+}
+
+export function addCall(request: {
+  payload: unknown
+  response: unknown
+  metadata: unknown
+  status: number
+  isError: boolean
+  path: string
+  type: RequestTypes
+  subType?: RequestSubTypes
+  method?: string
+  startTime?: number
+  duration?: number
+  tags?: string[]
+}) {
+  const startTime = request.startTime || Date.now()
+
+  return () => {
+    const duration = request.duration || Date.now() - startTime
+
+    setCallsStore(
+      produce((draft) => {
+        const pathURL = tryExpression(
+          () => new URL(request.path, 'http://localhost'),
+        )
+
+        assertIsNotNullish(pathURL)
+
+        const searchParams =
+          pathURL.searchParams.toString() !== ''
+            ? Object.fromEntries(pathURL.searchParams.entries())
+            : null
+
+        let pathParams: Record<string, string | null> | null = null
+
+        const relatedConfig = config.callsProcessor.find((processor) => {
+          if (typeof processor.match === 'string') {
+            const pattern = matchURLPattern(pathURL.pathname, processor.match)
+
+            if (pattern) {
+              pathParams = pattern
+              return true
+            }
+
+            return false
+          } else {
+            return processor.match({
+              url: pathURL,
+              type: request.type,
+              subType: request.subType,
+            })
+          }
+        })
+
+        const normalizedCallId =
+          relatedConfig?.callID?.({
+            url: pathURL,
+            type: request.type,
+            subType: request.subType,
+          }) ||
+          (typeof relatedConfig?.match === 'string' && relatedConfig.match)
+
+        const callID = btoa(
+          normalizedCallId ||
+            `${pathURL.pathname}|${request.type}${
+              request.subType ? `|${request.subType}` : ''
+            }`,
+        )
+
+        const callNameNormalizer = relatedConfig?.callName
+
+        const normalizedCallName =
+          typeof callNameNormalizer === 'function'
+            ? callNameNormalizer({
+                url: pathURL,
+                type: request.type,
+                subType: request.subType,
+              })
+            : callNameNormalizer
+
+        if (!draft.calls[callID]) {
+          draft.calls[callID] = {
+            name:
+              normalizedCallName ||
+              (typeof relatedConfig?.match === 'string' &&
+                relatedConfig.match) ||
+              pathURL.pathname.replace(/^\//, ''),
+            path: pathURL.pathname.replace(/^\//, ''),
+            lastRequestStartTime: startTime,
+            requests: [],
+            type: request.type,
+            subType: request.subType,
+          }
+        }
+
+        const call = draft.calls[callID]
+
+        assertIsNotNullish(call)
+
+        if (call.requests.length > 100) {
+          call.requests.shift()
+        }
+
+        const requestToAdd: ApiRequest = {
+          id: nanoid(),
+          duration,
+          pathParams,
+          isError: request.isError,
+          metadata: request.metadata,
+          path: request.path.replace(/^\//, ''),
+          payload: request.payload,
+          response: request.response,
+          searchParams,
+          status: request.status,
+          startTime,
+          type: request.type,
+          method: request.method,
+          subType: request.subType,
+          code: request.status,
+          tags: request.tags || [],
+        }
+
+        const payloadAlias = tryExpression(() =>
+          relatedConfig?.payloadAlias?.(requestToAdd.payload, requestToAdd),
+        )
+
+        if (payloadAlias) {
+          requestToAdd.alias = payloadAlias
+        }
+
+        call.requests.push(requestToAdd)
+      }),
+    )
+  }
+}
+
+if (import.meta.env.DEV) {
+  const mockedCalls = await import('@src/mocks/mockedRequests.json')
+
+  setTimeout(() => {
+    batch(() => {
+      mockedCalls.default.forEach((call) => {
+        addCall({
+          payload: call.request.payload,
+          response: call.response.body,
+          metadata: call.metadata,
+          status: call.response.status,
+          isError: call.response.status >= 400,
+          path: call.request.path,
+          type:
+            call.request.method === 'GET'
+              ? 'fetch'
+              : call.request.path.includes('update')
+              ? 'mutation'
+              : 'fetch',
+          subType: ((): RequestSubTypes | undefined => {
+            if (call.request.path.includes('delete')) {
+              return 'delete'
+            }
+
+            if (call.request.path.includes('update')) {
+              return 'update'
+            }
+
+            if (call.request.path.includes('create')) {
+              return 'create'
+            }
+
+            if (call.request.path.includes('custom')) {
+              return 'custom'
+            }
+
+            return undefined
+          })(),
+          method: call.request.method,
+          startTime: call.stats.startTime,
+          duration: call.stats.time,
+        })()
+      })
+    })
+  }, 1)
+}

package/src/stores/uiStore.ts

@@ -0,0 +1,15 @@
+import { createStore } from 'solid-js/store'
+
+type State = {
+  selectedCall: string | null
+  selectedRequest: string | null
+  selectedTab: string | null
+  selectedSubitem: string | null
+}
+
+export const [uiStore, setUiStore] = createStore<State>({
+  selectedCall: null,
+  selectedRequest: null,
+  selectedTab: null,
+  selectedSubitem: null,
+})

package/src/style/globalStyle.ts

@@ -0,0 +1,54 @@
+import { colors, fonts } from '@src/style/theme'
+
+export const globalStyle = `
+  font-family: ${fonts.primary};
+  color: ${colors.textPrimary.var};
+
+  * {
+    user-select: none;
+    position: relative;
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  input,
+  textarea,
+  p,
+  pre,
+  h1,
+  h2 {
+    user-select: text;
+  }
+
+  :is(input, textarea, p, pre, h1, h2) * {
+    user-select: text;
+  }
+
+  a {
+    --anchor-color: inherit;
+    color: var(---anchor-color);
+  }
+
+  a:visited {
+    color: var(---anchor-color);
+  }
+
+  button {
+    color: inherit;
+  }
+
+  p,
+  h1,
+  h2,
+  h3 {
+    font-size: inherit;
+  }
+
+  h1 {
+    font-weight: normal;
+  }
+
+  h2,
+  h3 {
+    font-weight: normal;
+  }
+`

package/src/style/helpers/allowTextSelection.ts

@@ -0,0 +1,7 @@
+export const allowTextSelection = `
+  user-select: text;
+
+  *, *::before, *::after {
+    user-select: text;
+  }
+`

package/src/style/helpers/anchorColor.ts

@@ -0,0 +1,9 @@
+export function anchorTextColor(color: string) {
+  return `
+    color: ${color};
+
+    &:visited {
+      color: ${color};
+    }
+  `
+}

package/src/style/helpers/centerContent.ts

@@ -0,0 +1,5 @@
+export const centerContent = `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`

package/src/style/helpers/circle.ts

@@ -0,0 +1,7 @@
+export function circle(size: number) {
+  return `
+    width: ${size}px;
+    height: ${size}px;
+    border-radius: ${size}px;
+  `
+}

package/src/style/helpers/ellipsis.ts

@@ -0,0 +1,8 @@
+export const ellipsis = `
+  display: inline-block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  word-wrap: norma;
+  max-width: 100%;
+`

package/src/style/helpers/fillContainer.ts

@@ -0,0 +1,7 @@
+export const fillContainer = `
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+`

package/src/style/helpers/gradientBorder.ts

@@ -0,0 +1,28 @@
+export function gradientBorder({
+  gradient,
+  background,
+  borderSize = 1,
+  borderOpacity = 0,
+}: {
+  gradient: string
+  background: string
+  borderSize?: number
+  borderOpacity?: number
+}) {
+  return `
+    position: relative;
+    isolation: isolate;
+    background: ${gradient};
+
+    &::before {
+      content: '';
+      inset: 0;
+      border-radius: inherit;
+      z-index: -1;
+      border: ${borderSize}px solid rgba(0, 0, 0, ${borderOpacity});
+      background: ${background};
+      position: absolute;
+      background-clip: padding-box;
+    }
+  `
+}

package/src/style/helpers/gradientText.ts

@@ -0,0 +1,8 @@
+export function gradientText(gradient: string) {
+  return `
+    background: ${gradient};
+    color: transparent;
+    background-clip: text;
+    -webkit-background-clip: text;
+  `
+}

package/src/style/helpers/inline.ts

@@ -0,0 +1,34 @@
+const justifyValues = {
+  left: 'flex-start',
+  center: 'center',
+  right: 'flex-end',
+  spaceBetween: 'space-between',
+  spaceAround: 'space-around',
+  spaceEvenly: 'space-evenly',
+} as const
+
+const alignValues = {
+  top: 'flex-start',
+  bottom: 'flex-end',
+  center: 'center',
+  stretch: 'stretch',
+} as const
+
+export type InlineProps = {
+  justify?: keyof typeof justifyValues
+  align?: keyof typeof alignValues
+  gap?: string | number
+}
+
+export const inline = ({
+  justify = 'left',
+  align = 'center',
+  gap,
+}: InlineProps = {}) =>
+  `
+    display: flex;
+    column-gap: ${gap}px;
+    flex-direction: row;
+    justify-content: ${justifyValues[justify]};
+    align-items: ${alignValues[align]};
+  `

package/src/style/helpers/mountAnim.ts

@@ -0,0 +1,26 @@
+import {
+  easings,
+  TransitionDurations,
+  transitionDurations,
+  TransitionEasings,
+} from '@src/style/helpers/transition'
+
+export const fadeIn = ({
+  duration = 'medium',
+  ease = 'linear',
+}: {
+  opacity?: number
+  duration?: TransitionDurations | number
+  ease?: TransitionEasings
+} = {}) => `
+  animation: ${
+    typeof duration === 'number' ? duration : transitionDurations[duration]
+  }ms
+    ${easings[ease]} fade;
+
+  @keyframes fade {
+    from {
+      opacity: 0;
+    }
+  }
+`

package/src/style/helpers/multilineEllipsis.ts

@@ -0,0 +1,8 @@
+export function multilineEllipsis(breakAtLine: number) {
+  return `
+    display: -webkit-box;
+    overflow: hidden;
+    -webkit-line-clamp: ${breakAtLine};
+    -webkit-box-orient: vertical;
+  `
+}

package/src/style/helpers/outline.ts

@@ -0,0 +1,5 @@
+import { parseUnit } from '@utils/parseUnit'
+
+export const outline = (size: number | string, color: string) => `
+  box-shadow: 0 0 0 ${parseUnit(size)} ${color};
+`

package/src/style/helpers/responsiveSize.ts

@@ -0,0 +1,27 @@
+import { parseUnit } from '@utils/parseUnit'
+
+type Unit = string | number
+
+// TODO: add two margin options
+
+function getDimension(margin: Unit | [Unit, Unit]) {
+  return Array.isArray(margin)
+    ? `calc(100% - (${parseUnit(margin[0])} + ${parseUnit(margin[1])}))`
+    : `calc(100% - (${parseUnit(margin)} * 2))`
+}
+
+export const responsiveWidth = (
+  maxWidth: Unit,
+  margin: Unit | [Unit, Unit] = 0,
+) => `
+  max-width: ${parseUnit(maxWidth)};
+  width: ${getDimension(margin)};
+`
+
+export const responsiveHeight = (
+  height: Unit,
+  margin: Unit | [Unit, Unit] = 0,
+) => `
+  max-height: ${parseUnit(height)};
+  height: ${getDimension(margin)};
+`

package/src/style/helpers/stack.ts

@@ -0,0 +1,36 @@
+const justifyValues = {
+  top: 'flex-start',
+  center: 'center',
+  bottom: 'flex-end',
+  spaceBetween: 'space-between',
+  spaceAround: 'space-around',
+  spaceEvenly: 'space-evenly',
+} as const
+
+const alignValues = {
+  left: 'flex-start',
+  right: 'flex-end',
+  center: 'center',
+  stretch: 'stretch',
+} as const
+
+export type StackProps = {
+  justify?: keyof typeof justifyValues
+  align?: keyof typeof alignValues
+  gap?: string | number
+}
+
+// TODO: change spacing to gap
+
+export const stack = ({
+  justify = 'top',
+  align = 'stretch',
+  gap = 0,
+}: StackProps = {}) =>
+  `
+    row-gap: ${gap}px;
+    display: flex;
+    flex-direction: column;
+    justify-content: ${justifyValues[justify]};
+    align-items: ${alignValues[align]};
+  `

package/src/style/helpers/transition.ts

@@ -0,0 +1,63 @@
+export const transitionDurations = {
+  short: 160,
+  medium: 240,
+  long: 360,
+} as const
+
+export type TransitionDurations = keyof typeof transitionDurations
+
+export const easings = {
+  inOut: 'cubic-bezier(0.4, 0.0, 0.2, 1)',
+  out: 'cubic-bezier(0.0, 0.0, 0.2, 1)',
+  in: 'cubic-bezier(0.4, 0.0, 1, 1)',
+  linear: 'linear',
+} as const
+
+export type TransitionEasings = keyof typeof easings
+
+type Props = {
+  duration?: TransitionDurations | number
+  ease?: TransitionEasings
+  properties?: string[]
+  delay?: number
+}
+
+type ArrayProp = {
+  property?: string
+  duration?: TransitionDurations | number
+  ease?: TransitionEasings
+  delay?: number
+}
+
+const appendMs = (value?: string | number) =>
+  value !== undefined ? `${value}ms` : ''
+
+export function transitionShorthand({
+  property,
+  duration = 'medium',
+  ease = 'inOut',
+  delay,
+}: ArrayProp = {}) {
+  return `${property || ''} ${appendMs(
+    typeof duration === 'number' ? duration : transitionDurations[duration],
+  )} ${easings[ease]} ${appendMs(delay)}`
+}
+
+export function transition(props: Props = {}): string {
+  const { properties, duration, ease, delay } = props
+
+  return `
+    transition: ${appendMs(
+      typeof duration === 'number'
+        ? duration
+        : transitionDurations[duration || 'medium'],
+    )} ${easings[ease || 'inOut']} ${appendMs(delay)};
+    ${
+      properties
+        ? `
+    transition-property: ${properties.join(', ') || ''};
+    `
+        : ''
+    }
+  `
+}

package/src/style/mediaQueries.ts

@@ -0,0 +1,6 @@
+export const mobileThreshold = 599
+
+export const mq = {
+  mobile: `@media (max-width: ${mobileThreshold}px)`,
+  desktop: `@media (min-width: ${mobileThreshold + 1}px)`,
+}