app-devtools 0.1.0 → 0.3.0

package/src/stores/callsStore.ts

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

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

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

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

package/src/style/helpers/anchorColor.ts

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

package/src/style/helpers/centerContent.ts

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

package/src/style/helpers/circle.ts

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

package/src/style/helpers/ellipsis.ts

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

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

package/src/style/helpers/gradientBorder.ts

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

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

package/src/style/helpers/inline.ts

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

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

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

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

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

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

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

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