@scalar/api-client 0.2.0 → 0.2.1

package/src/components/ApiClient/RequestHistory.vue

@@ -0,0 +1,114 @@
+<script setup lang="ts">
+import { useApiClientRequestStore } from '../../stores/apiClientRequestStore'
+import RequestHistoryItem from './RequestHistoryItem.vue'
+
+defineEmits<{
+  (e: 'toggle'): void
+}>()
+
+const { requestHistoryOrder } = useApiClientRequestStore()
+</script>
+<template>
+  <div class="navigation-content-item">
+    <div class="navtable">
+      <div class="navtable-table">
+        <div class="navtable-item navtable-item__top">
+          <div class="navtable-item-40">
+            <label for="">Request</label>
+          </div>
+          <div class="navtable-item-40">
+            <label for="">Response</label>
+          </div>
+          <div class="navtable-item-20">
+            <label for="">TIME</label>
+          </div>
+        </div>
+        <div class="navtable-radios">
+          <RequestHistoryItem
+            v-for="history in requestHistoryOrder"
+            :key="history"
+            :history="history" />
+        </div>
+        <div class="navtable-mock">
+          <div class="navtable-item">
+            <div class="navtable-item-40" />
+            <div class="navtable-item-40" />
+            <div class="navtable-item-20" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style>
+.navtable-mock {
+  background-repeat: repeat;
+  width: 100%;
+  background-image: linear-gradient(
+    0deg,
+    var(--theme-border-color) 1px,
+    --theme-background-1 1px
+  );
+  background-size: 31px 31px;
+  background-position: center 1px;
+  flex: 1;
+  position: relative;
+}
+.navtable-mock .navtable-item {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  background: transparent;
+  border-top: none;
+}
+
+.radio {
+  height: 16px;
+  width: 16px;
+  background: transparent;
+  border: var(--border);
+  flex-shrink: 0;
+  margin-right: 6px;
+  margin-left: 4px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  outline: none;
+}
+.radio:before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+}
+.navtable-item__active .radio:after {
+  content: '';
+  width: 5px;
+  height: 8px;
+  border: solid white;
+  border-width: 0 1.5px 1.5px 0;
+  transform: rotate(45deg) translate3d(-0.5px, -1px, 0);
+}
+.radio.post {
+  background: var(--theme-post-color);
+}
+.radio.delete {
+  background: var(--theme-delete-color);
+}
+.radio.patch {
+  background: var(--theme-patch-color);
+}
+.radio.get {
+  background: var(--theme-get-color);
+}
+.radio.put {
+  background: var(--theme-put-color);
+}
+</style>

package/src/components/ApiClient/RequestHistoryItem.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import TimeAgo from 'javascript-time-ago'
+import en from 'javascript-time-ago/locale/en'
+import prettyBytes from 'pretty-bytes'
+import prettyMilliseconds from 'pretty-ms'
+
+import { useApiClientRequestStore } from '../../stores/apiClientRequestStore'
+import { type ClientResponse } from '../../types'
+
+defineProps<{ history: string }>()
+TimeAgo.addLocale(en)
+const timeAgo = new TimeAgo('en-US')
+
+const { requestHistory, activeRequestId, setActiveResponse } =
+  useApiClientRequestStore()
+
+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)
+}
+</script>
+<template>
+  <div
+    class="navtable-item"
+    :class="{ 'navtable-item__active': activeRequestId === history }"
+    @click="setActiveResponse(history)">
+    <div class="navtable-item-40 navtable-item-request">
+      <button
+        class="radio"
+        :class="requestHistory[history].request.type.toLowerCase()"
+        type="button" />
+      <span>
+        <em>{{ requestHistory[history].request.type }}</em>
+        {{ requestHistory[history].request.url }}
+      </span>
+    </div>
+    <div class="navtable-item-40 navtable-item-response">
+      <span>{{
+        prettyMilliseconds(requestHistory[history].response.duration)
+      }}</span>
+      <span
+        :class="`scalar-api-client__status--${String(
+          requestHistory[history].response.statusCode,
+        ).charAt(0)}xx`">
+        {{ requestHistory[history].response.statusCode }}
+      </span>
+      <span>{{ getContentLength(requestHistory[history].response) }}</span>
+    </div>
+    <div class="navtable-item-20 navtable-item-time">
+      <span>
+        {{ timeAgo.format(requestHistory[history].sentTime) }}
+      </span>
+    </div>
+  </div>
+</template>

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

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

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

@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import { CodeMirror } from '../../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="true" />
+    <div
+      v-else
+      class="scalar-api-client__empty-state">
+      No Response
+    </div>
+  </CollapsibleSection>
+</template>