@scalar/api-client 0.5.1 → 0.5.2

package/src/components/ApiClient/Response/Copilot.vue.bak

@@ -1,385 +0,0 @@
-<script setup lang="ts">
-import { useMarkdown } from '@anc/library'
-import { StarterKit } from '@tiptap/starter-kit'
-import { Editor, EditorContent } from '@tiptap/vue-3'
-import { Markdown } from 'tiptap-markdown'
-import { computed, ref, watch } from 'vue'
-
-import { CopilotLoadingStates, useCopilot } from '../../../hooks'
-
-const content = ref('')
-const editor = ref<any>()
-const itemSuggestionOpen = ref(false)
-const contentFilled = ref(false)
-
-editor.value = new Editor({
-  editable: false,
-  extensions: [StarterKit],
-})
-
-const { html, setMarkdown } = useMarkdown(content, [StarterKit, Markdown])
-
-const { state, onRecommendation, setLoadingState } = useCopilot()
-
-onRecommendation((recommendation: string) => {
-  contentFilled.value = true
-  content.value += recommendation
-  setMarkdown(content.value)
-  setLoadingState(CopilotLoadingStates.Fix)
-})
-
-watch(html, () => {
-  editor.value.commands.setContent(html)
-})
-
-const classLookUp: Partial<Record<CopilotLoadingStates, string>> = {
-  [CopilotLoadingStates.Loading]: 'scalar-copilot__header-button--loading',
-  [CopilotLoadingStates.Working]: 'scalar-copilot__header-button--working',
-  [CopilotLoadingStates.Success]: 'scalar-copilot__header-button--success',
-}
-
-const loadingStateClass = computed(() => classLookUp[state.loadingState])
-
-const toggleItemSuggestion = () => {
-  itemSuggestionOpen.value = !itemSuggestionOpen.value
-}
-
-const itemSuggestionState = computed(() => ({
-  'scalar-copilot__suggestion--open': itemSuggestionOpen.value,
-}))
-
-const contentFilledState = computed(() => ({
-  'scalar-copilot--inactive': !contentFilled.value,
-}))
-
-function sleep(ms: number) {
-  return new Promise((resolve) => setTimeout(resolve, ms))
-}
-
-const fixErrors = async () => {
-  setLoadingState(CopilotLoadingStates.Working)
-  await sleep(3000) // Sleep for 3 seconds
-  content.value = ''
-  setMarkdown(content.value)
-  setLoadingState(CopilotLoadingStates.Success)
-  contentFilled.value = false
-}
-</script>
-<template>
-  <!-- remove class scalar-copilot--inactive once we start loading suggestions-->
-  <!-- add the class "scalar-copilot__response" when copilot is within response -->
-  <div
-    class="scalar-copilot"
-    :class="contentFilledState">
-    <div class="scalar-copilot__header">
-      <span>
-        <svg
-          fill="none"
-          height="48"
-          stroke-width="2"
-          viewBox="0 0 24 24"
-          width="48"
-          xmlns="http://www.w3.org/2000/svg">
-          <path
-            d="M16.625 13.724c-4.988 1.68-6.632 3.552-7.848 8.213-1.216-4.66-2.86-6.532-7.848-8.213 4.988-1.68 6.632-3.552 7.848-8.214 1.216 4.662 2.86 6.533 7.848 8.214ZM22.813 5.948c-2.814.944-3.741 1.996-4.427 4.615-.686-2.619-1.614-3.67-4.427-4.615 2.813-.944 3.74-1.996 4.427-4.615.686 2.62 1.613 3.67 4.427 4.615ZM23.178 19.562c-2.082.684-2.769 1.446-3.276 3.344-.508-1.898-1.195-2.66-3.277-3.344 2.082-.684 2.769-1.446 3.277-3.344.507 1.898 1.194 2.66 3.276 3.344Z"
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round" />
-        </svg>
-        AI Suggestions
-      </span>
-      <!-- Add this class: "scalar-copilot__header-button--loading" when you blur an input and are loading to check for errors -->
-      <div
-        v-if="state.loadingState !== CopilotLoadingStates.Inactive"
-        class="scalar-copilot__header-button"
-        :class="loadingStateClass"
-        @click="fixErrors">
-        <!--should be applied to the tag above-->
-        Fix (1) Error
-      </div>
-      <!-- Add this class: "scalar-copilot__header-button--working" after you click button -->
-      <!-- Add this class: "scalar-copilot__header-button--success" after button is done working add the success -->
-      <!-- class IF there is no more errors to fix IF there is still errors to fix don't add -->
-    </div>
-    <div
-      v-if="contentFilled"
-      class="scalar-copilot__item">
-      <div
-        class="scalar-copilot__suggestion"
-        :class="itemSuggestionState">
-        <!--  when you click toggle you need to add and remove the class "scalar-copilot__suggestion--open" to the div above it-->
-        <div
-          class="scalar-copilot__item__toggle"
-          @click="toggleItemSuggestion">
-          <div class="scalar-copilot__item__toggle-button" />
-        </div>
-        <EditorContent
-          class="scalar-copilot__suggestion__content"
-          :editor="editor" />
-      </div>
-      <div class="scalar-copilot__item-check">
-        <label class="meta-check">
-          <input
-            checked
-            type="checkbox" />
-          <span class="meta-checkmark" />
-        </label>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.scalar-copilot__response .scalar-copilot__header {
-  height: 0px;
-  min-height: 0px;
-  padding: 0;
-  border-bottom: 0;
-}
-.scalar-copilot__response .scalar-copilot__header span {
-  display: none;
-}
-.scalar-copilot__response .scalar-copilot__header-button {
-  position: absolute;
-  top: 8px;
-  right: 12px;
-}
-.scalar-copilot {
-  color: var(--theme-color-1);
-  width: 100%;
-  border-radius: var(--theme-radius-lg);
-  border: 1px solid var(--theme-border-color);
-}
-.scalar-copilot--inactive {
-  border: 1px solid transparent;
-  background: var(--theme-background-3);
-}
-.scalar-copilot__header {
-  padding: 7px 7px 7px 9px;
-  min-height: 32.5px;
-  display: flex;
-  color: var(--theme-color-disabled);
-  font-weight: var(--theme-bold);
-  align-items: center;
-  justify-content: space-between;
-  border-bottom: 1px solid var(--theme-border-color);
-}
-.scalar-copilot__header span {
-  display: flex;
-  align-items: center;
-}
-.scalar-copilot__header svg {
-  width: 12px;
-  height: 12px;
-  margin-right: 6px;
-}
-.scalar-copilot__item {
-  line-height: 1.45;
-  display: flex;
-}
-.scalar-copilot__item:not(:last-of-type) {
-  border-bottom: 1px solid var(--theme-border-color);
-}
-.scalar-copilot__suggestion {
-  position: relative;
-  cursor: pointer;
-  display: flex;
-}
-.scalar-copilot__suggestion__content {
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  max-height: 52.8px;
-  display: -webkit-box;
-  padding: 9px 9px 9px 27px;
-}
-.scalar-copilot__suggestion__content:after {
-  content: '';
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 9px;
-  background: var(--theme-background-2);
-}
-.scalar-copilot__suggestion--open .scalar-copilot__suggestion__content {
-  max-height: initial;
-  cursor: initial;
-  display: block;
-}
-.scalar-copilot__item-check {
-  border-left: 1px solid var(--theme-border-color);
-  width: 32.5px;
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.scalar-copilot__header-button {
-  background: var(--scalar-api-client-color);
-  border-radius: var(--theme-radius-lg);
-  cursor: pointer;
-  flex-shrink: 0;
-  display: flex;
-  color: white;
-  padding: 2px 6px;
-}
-.dark-mode .scalar-copilot__header-button {
-  color: black;
-}
-.scalar-copilot__header-button--loading {
-  background: transparent;
-  font-size: 0px;
-  color: var(--theme-color-disabled);
-}
-.scalar-copilot__header-button--working {
-  font-size: 0px;
-}
-.scalar-copilot__header-button--working:before,
-.scalar-copilot__header-button--loading:before {
-  content: '';
-  border: 1px solid var(--theme-color-disabled);
-  border-top: 1px solid var(--theme-color-1);
-  animation: urlloader 0.45s linear infinite;
-  background: transparent;
-  width: 14px;
-  height: 14px;
-  margin-left: 0;
-  margin-right: 9px;
-  border-radius: 50%;
-  display: block;
-}
-.scalar-copilot__header-button--working:before {
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  border-top: 1px solid white;
-}
-.dark-mode .scalar-copilot__header-button--working:before {
-  border: 1px solid rgba(0, 0, 0, 0.15);
-  border-top: 1px solid black;
-}
-.scalar-copilot__header-button--working:after {
-  content: 'Working';
-  font-size: 12px;
-}
-.scalar-copilot__header-button--loading:after {
-  content: 'Loading';
-  font-size: 12px;
-}
-.scalar-copilot__header-button--success {
-  font-size: 0;
-  background: transparent;
-  cursor: default;
-}
-.scalar-copilot__header-button--success:after {
-  content: 'Success';
-  font-size: 12px;
-  color: var(--theme-color-2);
-}
-.scalar-copilot__header-button--success:before {
-  content: '';
-  display: block;
-  width: 5px;
-  height: 8px;
-  border: solid var(--theme-color-2);
-  margin-right: 9px;
-  top: 3px;
-  position: relative;
-  border-width: 0 1.5px 1.5px 0;
-  transform: rotate(45deg) translate3d(0, -1px, 0);
-}
-@keyframes urlloader {
-  0% {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(1turn);
-  }
-}
-.scalar-copilot__item__toggle {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  padding: 9px;
-  z-index: 10;
-  cursor: pointer;
-}
-.scalar-copilot__item__toggle-button {
-  width: 6px;
-  height: 6px;
-  margin-right: 12px;
-  flex-shrink: 0;
-  position: relative;
-  top: 5px;
-  left: -2px;
-  transform: rotate(315deg);
-  box-shadow: 1px 1px 0 var(--theme-color-disabled);
-  z-index: 10;
-}
-.scalar-copilot__item__toggle-button:after {
-  content: '';
-  width: 20px;
-  height: 20px;
-  border-radius: 50%;
-  position: absolute;
-  display: block;
-  left: -5px;
-  top: -4px;
-}
-.scalar-copilot__item__toggle-button:hover {
-  box-shadow: 1px 1px 0 var(--theme-color-1);
-}
-.scalar-copilot__suggestion--open .scalar-copilot__item__toggle-button {
-  transform: rotate(45deg);
-  left: 2px;
-  top: 1px;
-}
-.scalar-copilot__suggestion--open .scalar-copilot__item__toggle {
-  height: 24px;
-  position: absolute;
-  width: 24px;
-}
-.scalar-copilot__item__toggle:hover:after {
-  content: '';
-  background: var(--theme-background-3);
-  width: 20px;
-  height: 20px;
-  border-radius: 50%;
-  position: absolute;
-  left: 3px;
-  top: 7px;
-  z-index: 0;
-}
-.scalar-copilot__suggestion--open .scalar-copilot__item__toggle:hover:after {
-  top: 6px;
-  left: 4px;
-}
-
-.scalar-api-client__item:hover .scalar-copilot__item__toggle-button,
-.scalar-api-client__item:focus-within .scalar-copilot__item__toggle-button {
-  opacity: 1;
-}
-
-.scalar-copilot__toggle-button {
-  appearance: none;
-  color: var(--scalar-api-client-color2);
-  font-size: var(--theme-small);
-  background: var(--scalar-api-client-gradient);
-  border-radius: var(--theme-radius-lg);
-  border: 1px solid var(--theme-border-color);
-  font-weight: var(--theme-bold);
-  max-height: 25px;
-  padding: 4px 8px;
-  outline: none;
-  cursor: pointer;
-  transition: opacity 0.15s ease-in-out;
-  white-space: nowrap;
-  &:hover {
-    color: var(--theme-color-1);
-  }
-}
-
-.scalar-copilot__toggle-button svg {
-  margin-left: 6px;
-  width: 8px;
-}
-</style>

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

@@ -1,120 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-
-import { useApiClientRequestStore } from '../../../stores/apiClientRequestStore'
-import { CollapsibleSection } from '../../CollapsibleSection'
-// import Copilot from './Copilot.vue'
-import { SimpleGrid } from '../../Grid'
-import ResponseBody from './ResponseBody.vue'
-import ResponseHeaders from './ResponseHeaders.vue'
-import ResponseMetaInformation from './ResponseMetaInformation.vue'
-
-const { activeResponse, activeRequestId } = useApiClientRequestStore()
-
-// Headers
-const responseHeaders = computed(() => {
-  const headers = activeResponse.value?.headers
-
-  return headers
-    ? Object.keys(headers)
-        .map((key) => ({ name: key, value: headers[key] }))
-        .filter(
-          (item) =>
-            ![
-              'rest-api-client-content-length',
-              'X-API-Client-Content-Length',
-            ].includes(item.name),
-        )
-    : []
-})
-
-// Cookies
-const responseCookies = computed(() => {
-  const cookies = activeResponse.value?.cookies
-
-  return cookies
-    ? Object.keys(cookies).map((key) => ({ name: key, value: cookies[key] }))
-    : []
-})
-
-// Check if string is JSON
-const isJsonString = (value?: string) => {
-  if (typeof value !== 'string') {
-    return false
-  }
-
-  try {
-    JSON.parse(value)
-  } catch {
-    return false
-  }
-
-  return true
-}
-
-// Pretty print JSON
-const responseData = computed(() => {
-  const value = activeResponse.value?.data
-
-  if (value && isJsonString(value)) {
-    return JSON.stringify(JSON.parse(value), null, 2)
-  }
-
-  return value
-})
-</script>
-<template>
-  <div class="scalar-api-client__main__right custom-scroll">
-    <div class="scalar-api-client__main__content">
-      <label>Response</label>
-      <div class="meta">
-        <template v-if="activeRequestId && activeResponse">
-          <ResponseMetaInformation :response="activeResponse" />
-        </template>
-        <template v-else>
-          <div class="meta-item">
-            <span>Send your first request to start</span>
-          </div>
-        </template>
-      </div>
-    </div>
-    <div>
-      <ResponseBody
-        :active="!!activeResponse"
-        :data="responseData" />
-      <!-- <CollapsibleSection title="Co Pilot">
-        <Copilot />
-        <template v-if="responseHeaders.length === 0">
-          <pre>No headers</pre>
-        </template>
-      </CollapsibleSection> -->
-      <ResponseHeaders :headers="responseHeaders" />
-      <CollapsibleSection title="Cookies">
-        <SimpleGrid
-          v-show="responseCookies.length > 0"
-          :items="responseCookies" />
-        <template v-if="responseCookies.length === 0">
-          <div class="scalar-api-client__empty-state">No Cookies</div>
-        </template>
-      </CollapsibleSection>
-      <div class="scalar-api-client__main__scroll-container" />
-    </div>
-  </div>
-</template>
-<style>
-.scalar-api-client__main__right {
-  width: 50%;
-  padding: 0 0 12px 12px;
-}
-@media screen and (max-width: 820px) {
-  .scalar-api-client__main__right {
-    width: 100%;
-    border-right: none;
-  }
-}
-.scalar-api-client__main__right :deep(.scalar-copilot__header-button) {
-  position: absolute;
-  top: 6px;
-  right: 12px;
-}
-</style>

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

@@ -1,24 +0,0 @@
-<script lang="ts" setup>
-import { CodeMirror } from '@scalar/use-codemirror'
-
-import { CollapsibleSection } from '../../CollapsibleSection'
-
-withDefaults(defineProps<{ active: boolean; data: any }>(), {
-  active: false,
-  data: null,
-})
-</script>
-<template>
-  <CollapsibleSection title="Body">
-    <CodeMirror
-      v-if="active"
-      :content="data"
-      :languages="['json']"
-      readOnly />
-    <div
-      v-else
-      class="scalar-api-client__empty-state">
-      No Response
-    </div>
-  </CollapsibleSection>
-</template>

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

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

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

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

package/src/components/ApiClient/index.ts

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