@scalar/api-client 0.2.0 → 0.2.1

package/src/components/ApiClient/Response/ResponseHeaders.vue

@@ -0,0 +1,52 @@
+<script lang="ts" setup>
+import { httpHeaders } from '../../../fixtures'
+import { CollapsibleSection } from '../../CollapsibleSection'
+import {
+  SimpleCell,
+  SimpleHeader,
+  SimpleRow,
+  SimpleTable,
+} from '../../SimpleTable'
+
+defineProps<{ headers: Record<string, string>[] }>()
+
+const getDocumentationUrlForHttpHeader = (headerName: string) => {
+  return httpHeaders.find((header) => {
+    return header.name.toLowerCase() === headerName.toLowerCase()
+  })?.url
+}
+
+// Make the first letter and all letters after a - uppercase
+const formatHeaderName = (headerName: string) => {
+  return headerName
+    .split('-')
+    .map((word) => {
+      return word.charAt(0).toUpperCase() + word.slice(1)
+    })
+    .join('-')
+}
+</script>
+<template>
+  <CollapsibleSection title="Headers">
+    <SimpleTable v-if="headers.length > 0">
+      <SimpleRow>
+        <SimpleHeader>Key</SimpleHeader>
+        <SimpleHeader>Value</SimpleHeader>
+      </SimpleRow>
+      <SimpleRow
+        v-for="header in headers"
+        :key="header.name">
+        <SimpleCell
+          :href="getDocumentationUrlForHttpHeader(header.name)"
+          :strong="true"
+          :wrap="false">
+          {{ formatHeaderName(header.name) }}
+        </SimpleCell>
+        <SimpleCell>{{ header.value }}</SimpleCell>
+      </SimpleRow>
+    </SimpleTable>
+    <template v-else>
+      <div class="scalar-api-client__empty-state">No Headers</div>
+    </template>
+  </CollapsibleSection>
+</template>

package/src/components/ApiClient/Response/ResponseMetaInformation.vue

@@ -0,0 +1,58 @@
+<script lang="ts" setup>
+import prettyBytes from 'pretty-bytes'
+import prettyMilliseconds from 'pretty-ms'
+import { computed } from 'vue'
+
+import { type HttpStatusCode, httpStatusCodes } from '../../../fixtures'
+import { type ClientResponse } from '../../../types'
+import HelpfulLink from '../../HelpfulLink.vue'
+
+const props = defineProps<{ response: any }>()
+
+/** Size of the response */
+const getContentLength = (response: ClientResponse) => {
+  if (response?.headers?.['X-API-Client-Content-Length']) {
+    return prettyBytes(
+      parseFloat(response.headers['X-API-Client-Content-Length']),
+    )
+  }
+  return prettyBytes(0)
+}
+
+/** Status text for the response */
+const statusCodeInformation = computed((): HttpStatusCode | undefined => {
+  const responseStatusCode = props.response.statusCode
+
+  if (!responseStatusCode) {
+    return undefined
+  }
+
+  return httpStatusCodes[responseStatusCode] ?? undefined
+})
+</script>
+<template>
+  <div class="meta-item">
+    <!-- <span>182 ms</span> -->
+    <span>{{ prettyMilliseconds(response.duration) }}</span>
+  </div>
+  <div class="meta-item">
+    <!-- <span>20 Bytes</span> -->
+    <span>{{ getContentLength(response) }}</span>
+  </div>
+  <div class="meta-item">
+    <!-- <span>200</span> -->
+    <span
+      :class="`scalar-api-client__status scalar-api-client__status--${String(
+        response.statusCode,
+      ).charAt(0)}xx`">
+      <template v-if="statusCodeInformation?.url">
+        <HelpfulLink :href="statusCodeInformation.url">
+          {{ response.statusCode }} {{ statusCodeInformation.name }}
+        </HelpfulLink>
+      </template>
+      <template v-else>
+        {{ response.statusCode }} {{ statusCodeInformation?.name }}
+      </template>
+    </span>
+  </div>
+</template>

package/src/components/ApiClient/Response/index.ts

@@ -0,0 +1 @@
+export { default as Response } from './Response.vue'

package/src/components/ApiClient/index.ts

@@ -0,0 +1 @@
+export { default as ApiClient } from './ApiClient.vue'

package/src/components/CodeMirror/CodeMirror.vue

@@ -0,0 +1,232 @@
+<script lang="ts" setup>
+import { java } from '@codemirror/lang-java'
+import { javascript } from '@codemirror/lang-javascript'
+import { json } from '@codemirror/lang-json'
+import { python } from '@codemirror/lang-python'
+import { type LanguageSupport, StreamLanguage } from '@codemirror/language'
+import {
+  c,
+  csharp,
+  kotlin,
+  objectiveC,
+} from '@codemirror/legacy-modes/mode/clike'
+import { clojure } from '@codemirror/legacy-modes/mode/clojure'
+import { go } from '@codemirror/legacy-modes/mode/go'
+import { http } from '@codemirror/legacy-modes/mode/http'
+import { oCaml } from '@codemirror/legacy-modes/mode/mllike'
+import { powerShell } from '@codemirror/legacy-modes/mode/powershell'
+import { r } from '@codemirror/legacy-modes/mode/r'
+import { ruby } from '@codemirror/legacy-modes/mode/ruby'
+import { shell } from '@codemirror/legacy-modes/mode/shell'
+import { swift } from '@codemirror/legacy-modes/mode/swift'
+import { type Extension } from '@codemirror/state'
+import {
+  EditorView,
+  type ViewUpdate,
+  keymap,
+  lineNumbers as lineNumbersExtension,
+} from '@codemirror/view'
+import { useCodeMirror } from '@scalar/use-codemirror'
+import { watch } from 'vue'
+
+import { variables } from './extensions/variables'
+
+const props = withDefaults(
+  defineProps<{
+    content?: string
+    readOnly?: boolean
+    languages?: Language[]
+    withVariables?: boolean
+    lineNumbers?: boolean
+    withoutTheme?: boolean
+    disableEnter?: boolean
+  }>(),
+  {
+    disableEnter: false,
+  },
+)
+
+const emit = defineEmits<{
+  (e: 'change', value: string): void
+}>()
+
+// TODO: Add 'php' and 'laravel'
+const syntaxHighlighting: Partial<
+  Record<Language, LanguageSupport | StreamLanguage<any>>
+> = {
+  axios: javascript(),
+  c: StreamLanguage.define(c),
+  clojure: StreamLanguage.define(clojure),
+  csharp: StreamLanguage.define(csharp),
+  go: StreamLanguage.define(go),
+  http: StreamLanguage.define(http),
+  java: java(),
+  javascript: javascript(),
+  json: json(),
+  kotlin: StreamLanguage.define(kotlin),
+  node: javascript(),
+  objc: StreamLanguage.define(objectiveC),
+  ocaml: StreamLanguage.define(oCaml),
+  powershell: StreamLanguage.define(powerShell),
+  python: python(),
+  r: StreamLanguage.define(r),
+  ruby: StreamLanguage.define(ruby),
+  shell: StreamLanguage.define(shell),
+  swift: StreamLanguage.define(swift),
+}
+
+type Language =
+  | 'axios'
+  | 'c'
+  | 'clojure'
+  | 'csharp'
+  | 'go'
+  | 'http'
+  | 'java'
+  | 'javascript'
+  | 'json'
+  | 'kotlin'
+  | 'node'
+  | 'objc'
+  | 'ocaml'
+  | 'powershell'
+  | 'python'
+  | 'r'
+  | 'ruby'
+  | 'shell'
+  | 'swift'
+  | 'php'
+
+// CSS Class
+const classes = ['scalar-api-client__codemirror']
+
+if (props.readOnly) {
+  classes.push('scalar-api-client__codemirror--read-only')
+}
+
+const getCodeMirrorExtensions = () => {
+  const extensions: Extension[] = []
+
+  extensions.push(EditorView.editorAttributes.of({ class: classes.join(' ') }))
+
+  // Read only
+  if (props.readOnly) {
+    extensions.push(EditorView.editable.of(false))
+  }
+
+  // Syntax highlighting
+  if (props.languages) {
+    props.languages
+      .filter((language) => typeof syntaxHighlighting[language] !== 'undefined')
+      .forEach((language) => {
+        extensions.push(syntaxHighlighting[language] as Extension)
+      })
+  }
+
+  // Line numbers
+  if (props.lineNumbers) {
+    extensions.push(lineNumbersExtension())
+  }
+
+  // Highlight variables
+  if (props.withVariables) {
+    extensions.push(variables())
+  }
+
+  if (props.disableEnter) {
+    extensions.push(
+      keymap.of([
+        {
+          key: 'Enter',
+          run: () => {
+            return true
+          },
+        },
+        {
+          key: 'Ctrl-Enter',
+          mac: 'Cmd-Enter',
+          run: () => {
+            return true
+          },
+        },
+        {
+          key: 'Shift-Enter',
+          run: () => {
+            return true
+          },
+        },
+      ]),
+    )
+  }
+
+  // Listen to updates
+  extensions.push(
+    EditorView.updateListener.of((v: ViewUpdate) => {
+      if (!v.docChanged) {
+        return
+      }
+
+      emit('change', v.state.doc.toString())
+    }),
+  )
+
+  return extensions
+}
+
+const { codeMirrorRef, setCodeMirrorContent, reconfigureCodeMirror } =
+  useCodeMirror({
+    content: props.content ?? '',
+    extensions: getCodeMirrorExtensions(),
+    withoutTheme: props.withoutTheme,
+  })
+
+watch(props, () => {
+  setCodeMirrorContent(props.content ?? '')
+  reconfigureCodeMirror(getCodeMirrorExtensions())
+})
+</script>
+
+<template>
+  <div
+    ref="codeMirrorRef"
+    class="scalar-api-client__codemirror__wrapper" />
+</template>
+
+<style>
+/** Basics */
+.scalar-api-client__codemirror__wrapper {
+  width: 100%;
+  display: flex;
+  align-items: stretch;
+}
+
+.scalar-api-client__codemirror {
+  flex-grow: 1;
+  max-width: 100%;
+}
+
+.scalar-api-client__codemirror.ͼw {
+  background-color: var(--theme-background-1);
+}
+
+.scalar-api-client__codemirror--read-only.ͼw {
+  background-color: var(--theme-background-2);
+}
+
+/** URL input */
+.scalar-api-client__url-input {
+  font-weight: var(--theme-semibold);
+}
+
+.scalar-api-client__url-input .cm-scroller {
+  padding-left: 6px;
+}
+
+.scalar-api-client__url-input .ͼ1 .cm-scroller {
+  align-items: center !important;
+}
+
+.scalar-api-client__variable {
+  color: var(--scalar-api-client-color);
+}
+</style>

package/src/components/CodeMirror/extensions/variables.ts

@@ -0,0 +1,41 @@
+import {
+  Decoration,
+  type DecorationSet,
+  EditorView,
+  MatchDecorator,
+  ViewPlugin,
+  type ViewUpdate,
+} from '@codemirror/view'
+
+const variableHighlighterDecoration = new MatchDecorator({
+  regexp: /(\{[^}]+\})/g,
+  decoration: () =>
+    Decoration.mark({
+      attributes: {
+        class: 'scalar-api-client__variable',
+      },
+    }),
+})
+
+export const variables = () =>
+  ViewPlugin.fromClass(
+    class {
+      variables: DecorationSet
+      constructor(view: EditorView) {
+        this.variables = variableHighlighterDecoration.createDeco(view)
+      }
+      update(update: ViewUpdate) {
+        this.variables = variableHighlighterDecoration.updateDeco(
+          update,
+          this.variables,
+        )
+      }
+    },
+    {
+      decorations: (instance) => instance.variables,
+      provide: (plugin) =>
+        EditorView.atomicRanges.of(
+          (view) => view.plugin(plugin)?.variables || Decoration.none,
+        ),
+    },
+  )

package/src/components/CodeMirror/index.ts

@@ -0,0 +1 @@
+export { default as CodeMirror } from './CodeMirror.vue'

package/src/components/CollapsibleSection/CollapsibleSection.vue

@@ -0,0 +1,149 @@
+<script lang="ts" setup>
+import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/vue'
+
+defineProps<{
+  title?: string
+}>()
+</script>
+
+<template>
+  <Disclosure
+    v-slot="{ open }"
+    :defaultOpen="true">
+    <div
+      class="scalar-api-client__item"
+      :class="{ 'scalar-api-client__item--open': open }">
+      <DisclosureButton class="scalar-api-client__toggle">
+        <svg
+          class="scalar-api-client__toggle__icon"
+          height="10"
+          viewBox="0 0 5 10"
+          width="5"
+          xmlns="http://www.w3.org/2000/svg">
+          <path
+            d="M0 10l5-5-5-5z"
+            fill="currentColor"
+            fill-rule="nonzero" />
+        </svg>
+        <span class="scalar-api-client__item__title">
+          {{ title }}
+        </span>
+        <div
+          v-if="$slots.options && open"
+          class="scalar-api-client__item__options">
+          <slot name="options" />
+        </div>
+      </DisclosureButton>
+      <DisclosurePanel>
+        <div class="scalar-api-client__item__content">
+          <slot />
+        </div>
+      </DisclosurePanel>
+    </div>
+  </Disclosure>
+</template>
+
+<style>
+.scalar-api-client__item {
+  border-radius: var(--theme-radius-lg);
+  margin-bottom: 6px;
+  background: var(--theme-background-2);
+  box-shadow: var(--shadow1);
+  position: relative;
+}
+
+.scalar-api-client__item button {
+  background-color: transparent;
+  text-align: left;
+}
+
+.scalar-api-client__item:hover {
+  cursor: pointer;
+}
+
+.scalar-api-client__item--open {
+  background: var(--theme-background-2);
+}
+
+.scalar-api-client__item--open:focus-within {
+  box-shadow: var(--shadow1);
+}
+
+.scalar-api-client__item--open .scalar-api-client__item__content {
+  display: flex;
+}
+
+.scalar-api-client__item--open:hover {
+  cursor: default;
+}
+
+.scalar-api-client__item--open .scalar-api-client__toggle__icon {
+  transform: rotate(90deg);
+}
+.scalar-api-client__toggle {
+  padding: 6px 12px;
+  min-height: 37px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  position: relative;
+  width: 100%;
+}
+
+.scalar-api-client__item .scalar-api-client__item__title {
+  color: var(--theme-color-1);
+  font-size: var(--theme-small);
+  font-weight: var(--theme-bold);
+  user-select: none;
+  flex: 1;
+}
+
+.scalar-api-client__item .scalar-api-client__item__title:after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.scalar-api-client__item .scalar-api-client__toggle__icon {
+  width: 10px;
+  margin-right: 6px;
+  color: var(--theme-color-1);
+}
+
+.scalar-api-client__item__options {
+  position: relative;
+}
+
+.scalar-api-client__item__options span {
+  background: var(--theme-background-3);
+  padding: 2px 6px;
+  border-radius: 3px;
+  font-size: 12px;
+  pointer-events: none;
+  color: var(--theme-color-2);
+  border: 1px solid var(--theme-border-color);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.scalar-api-client__item__options span svg {
+  width: 9px;
+  height: 9px;
+  margin-left: 3px;
+}
+
+.scalar-api-client__item__options select {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  cursor: pointer;
+}
+</style>

package/src/components/CollapsibleSection/index.ts

@@ -0,0 +1 @@
+export { default as CollapsibleSection } from './CollapsibleSection.vue'

package/src/components/FlowModal.vue

@@ -0,0 +1,133 @@
+<script setup lang="ts">
+import {
+  Dialog,
+  DialogDescription,
+  DialogPanel,
+  DialogTitle,
+} from '@headlessui/vue'
+import { reactive } from 'vue'
+
+withDefaults(
+  defineProps<{
+    state: ModalState
+    title?: string
+    bodyClass?: string
+    maxWidth?: string
+    variant?: 'small' | 'normal' | 'large'
+  }>(),
+  {
+    variant: 'normal',
+  },
+)
+</script>
+<script lang="ts">
+export type ModalState = ReturnType<typeof useModalState>
+
+export const useModalState = () =>
+  reactive({
+    open: false,
+    show() {
+      this.open = true
+    },
+    hide() {
+      this.open = false
+    },
+  })
+</script>
+<template>
+  <Dialog
+    :open="state.open"
+    @close="state.hide()">
+    <div class="modal-layout">
+      <DialogPanel
+        class="modal"
+        :class="{
+          'modal-content-large': variant === 'large',
+          'modal-content-normal': variant === 'normal',
+          'modal-content-small': variant === 'small',
+        }"
+        :style="{ maxWidth }">
+        <DialogTitle
+          v-if="title"
+          class="modal-header">
+          {{ title }}
+        </DialogTitle>
+        <DialogDescription
+          class="modal-body custom-scroll"
+          :class="[bodyClass]">
+          <slot />
+        </DialogDescription>
+      </DialogPanel>
+    </div>
+  </Dialog>
+</template>
+<style scoped>
+.modal-layout {
+  position: fixed;
+  width: 100vw;
+  height: 100vh;
+  top: 0;
+  left: 0;
+  z-index: 1001;
+  background: rgba(0, 0, 0, 0.44);
+  padding: 20px;
+  opacity: 0;
+  animation: modal-fade 0.2s forwards;
+}
+.modal-body {
+  padding: 24px 12px 18px 24px;
+  max-height: calc(100vh - 240px);
+  background: var(--theme-background-1);
+  border-radius: var(--theme-radius-lg);
+  font-family: var(--theme-font);
+}
+.modal {
+  margin: 80px auto 0;
+  position: relative;
+  background: var(--theme-background-2);
+  border-radius: var(--theme-radius-lg);
+  color: var(--theme-color-1);
+  width: 100%;
+  text-align: left;
+  line-height: 1.4;
+  opacity: 0;
+  transform: scale(0.98);
+  animation: modal-pop 0.15s 0.15s forwards;
+  display: flex;
+  flex-direction: column;
+}
+.modal-content-large {
+  max-width: 800px;
+}
+.modal-content-normal {
+  max-width: 640px;
+}
+.modal-content-small {
+  max-width: 480px;
+}
+@keyframes modal-fade {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes modal-pop {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+.modal-header {
+  padding: 12px 24px;
+  color: var(--theme-color-1);
+  font-size: var(--theme-font-size-4);
+  text-align: left;
+  font-weight: 600;
+  border-radius: var(--theme-radius-lg) var(--theme-radius-lg) 0 0;
+}
+</style>