@scalar/api-reference 0.1.1

package/dist/types.d.ts

@@ -0,0 +1,122 @@
+export type ReferenceProps = {
+    documentName?: string;
+    token?: string;
+    username?: string;
+    isEditable: boolean;
+    showSidebar: boolean;
+    footerBelowSidebar?: boolean;
+};
+export type Security = {
+    api_key?: any[];
+    petstore_auth?: string[];
+};
+export type Schema = {
+    format: string;
+    type: string;
+};
+export type Parameters = {
+    description?: string;
+    in?: string;
+    name: string;
+    required?: boolean;
+    schema?: Schema;
+};
+export type Response = {
+    description: string;
+    content: any;
+};
+export type Information = {
+    description: string;
+    operationId: string;
+    parameters: Parameters[];
+    responses: Record<string, Response>;
+    security: Security[];
+    requestBody: RequestBody;
+    summary: string;
+    tags: string[];
+};
+export type Operation = {
+    httpVerb: string;
+    path: string;
+    operationId: string;
+    name: string;
+    description: string;
+    information: Information;
+};
+export type TransformedOperation = Operation & {
+    responses: Record<string, Response & {
+        headers: Record<string, {
+            description: string;
+            schema: {
+                type: string;
+                format?: string;
+            };
+        }>;
+    }>;
+};
+export type Tag = {
+    name: string;
+    description: string;
+    operations: TransformedOperation[];
+};
+export type Parameter = {
+    name: string;
+    required: boolean;
+    displayType: string;
+    description: string;
+};
+export type ContentProperties = {
+    [key: string]: {
+        type: string;
+        format: string;
+        example: string;
+        required: string[];
+        description?: string;
+        properties?: ContentProperties;
+    };
+};
+export type ContentSchema = {
+    schema: {
+        type: string;
+        required: string[];
+        properties: ContentProperties;
+    };
+};
+export type ContentType = 'application/json' | 'application/xml' | 'text/plain' | 'text/html' | 'application/x-www-form-urlencoded' | 'multipart/form-data';
+export type Content = {
+    [key in ContentType]: ContentSchema;
+};
+export type RequestBody = {
+    description: string;
+    content: Content;
+    required: boolean;
+};
+export type Contact = {
+    email: string;
+};
+export type License = {
+    name: string;
+    url: string;
+};
+export type Info = {
+    title: string;
+    description: string;
+    termsOfService: string;
+    contact: Contact;
+    license: License;
+    version: string;
+};
+export type ExternalDocs = {
+    description: string;
+    url: string;
+};
+export type Server = {
+    url: string;
+};
+export type Spec = {
+    tags: Tag[];
+    info: Info;
+    externalDocs: ExternalDocs;
+    servers: Server[];
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "@scalar/api-reference",
+  "version": "0.1.1",
+  "author": "Scalar",
+  "license": "UNLICENSED",
+  "engines": {
+    "node": ">=18"
+  },
+  "type": "module",
+  "main": "src/index.ts",
+  "dependencies": {
+    "@codemirror/lang-java": "github:codemirror/lang-java",
+    "@codemirror/lang-javascript": "6.1.9",
+    "@codemirror/lang-json": "6.0.1",
+    "@codemirror/lang-python": "6.1.3",
+    "@codemirror/language": "6.8.0",
+    "@codemirror/legacy-modes": "6.3.3",
+    "@codemirror/state": "6.2.1",
+    "@codemirror/view": "6.16.0",
+    "@headlessui/vue": "1.7.14",
+    "@types/js-yaml": "4.0.5",
+    "@types/nunjucks": "3.2.2",
+    "@types/xmldom": "0.1.31",
+    "@vueuse/core": "10.1.2",
+    "codemirror": "6.0.1",
+    "httpsnippet-lite": "3.0.5",
+    "js-yaml": "4.1.0",
+    "nanoid": "4.0.2",
+    "rehype-document": "6.1.0",
+    "rehype-format": "4.0.1",
+    "rehype-sanitize": "5.0.1",
+    "rehype-stringify": "9.0.3",
+    "remark-gfm": "3.0.1",
+    "remark-parse": "10.0.2",
+    "remark-rehype": "10.1.0",
+    "remark-textr": "5.0.1",
+    "typographic-base": "1.0.4",
+    "unified": "10.1.2",
+    "xmldom": "0.6.0",
+    "@scalar/api-client": "0.1.1",
+    "@scalar/swagger-editor": "0.1.1",
+    "@scalar/use-codemirror": "0.1.1",
+    "@scalar/use-tooltip": "0.1.1",
+    "@scalar/use-clipboard": "0.1.1"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "4.2.3",
+    "tsc-alias": "1.8.6",
+    "vite": "4.4.8",
+    "vitest": "0.34.1",
+    "vue-tsc": "1.8.8"
+  },
+  "peerDependencies": {
+    "vue": "3.3.4"
+  },
+  "scripts": {
+    "build": "vite build && pnpm types:build && tsc-alias -p tsconfig.build.json",
+    "dev": "vite",
+    "lint:check": "eslint .",
+    "lint:fix": "eslint .  --fix",
+    "preview": "vite preview",
+    "test": "vitest",
+    "types:build": "vue-tsc -p tsconfig.build.json",
+    "types:check": "vue-tsc --noEmit --skipLibCheck"
+  }
+}

package/src/assets/css/reset.css

@@ -0,0 +1,154 @@
+/***
+    The new CSS reset - version 1.8.4 (last updated 14.2.2023)
+    GitHub page: https://github.com/elad2412/the-new-css-reset
+***/
+
+/*
+    Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property
+    - The "symbol *" part is to solve Firefox SVG sprite bug
+    - The editor uses some browser defaults so it needs to be excluded from the reset (DOC-466)
+ */
+*:where(
+    :not(html, iframe, canvas, img, svg, video, audio):not(
+        svg *,
+        symbol *,
+        .editor *,
+        .reference *
+      )
+  ) {
+  all: unset;
+  display: revert;
+}
+
+/* Optional future support for reverting on >Chrome 90 */
+/* @supports (-webkit-user-modify: revert-layer) {
+  * {
+    -moz-user-modify: revert-layer;
+    -webkit-user-modify: revert-layer;
+    overflow-wrap: revert-layer;
+    -webkit-line-break: revert-layer;
+    -webkit-user-select: revert-layer;
+  }
+} */
+
+/* Preferred box-sizing value */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+/* Strip the padding from editor elements */
+.editor *,
+.reference * {
+  padding: 0;
+  margin: 0;
+}
+
+/* Reapply the pointer cursor for anchor tags */
+a,
+button {
+  cursor: revert;
+}
+
+/* Reapply outlines on keyboard focus */
+a[href]:focus-visible,
+button:focus-visible,
+[tabindex]:focus-visible {
+  outline: 1px dashed var(--theme-color-2);
+  outline-offset: 2px;
+}
+
+/* Revert the font-size for selects
+  Ideally we would remove this once we style our selects better (DOC-466) */
+select {
+  font-size: revert;
+}
+
+/* Revert the line-height for buttons and inputs
+  Ideally we would remove this once we style our inputs and buttons better (DOC-466) */
+input,
+button {
+  line-height: revert;
+}
+
+/* Remove list styles (bullets/numbers) */
+/* It would be good to include this again (DOC-466) */
+/* ol,
+ul,
+menu {
+  list-style: none;
+} */
+
+/* For images to not be able to exceed their container */
+img {
+  max-inline-size: 100%;
+  max-block-size: 100%;
+}
+
+/* removes spacing between cells in tables */
+table {
+  border-collapse: collapse;
+}
+
+/* Safari - solving issue when using user-select:none on the <body> text input doesn't working */
+/* Align our input text to the left */
+input,
+textarea {
+  -webkit-user-select: auto;
+  text-align: left;
+  font-weight: initial;
+}
+
+/* revert the 'white-space' property for textarea elements on Safari */
+textarea {
+  white-space: revert;
+}
+
+/* minimum style to allow to style meter element */
+meter {
+  -webkit-appearance: revert;
+  appearance: revert;
+}
+
+/* preformatted text - use only for this feature */
+/* :where(pre) {
+  all: revert;
+} */
+
+/* reset default text opacity of input placeholder */
+::placeholder {
+  color: revert;
+}
+
+/* remove default dot (•) sign */
+::marker {
+  content: initial;
+}
+
+/* fix the feature of 'hidden' attribute.
+display:revert; revert to element instead of attribute */
+:where([hidden]) {
+  display: none;
+}
+
+/* revert for bug in Chromium browsers
+ - fix for the content editable attribute will work properly.
+ - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/
+:where([contenteditable]:not([contenteditable='false'])) {
+  -moz-user-modify: revert-layer, read-write;
+  -webkit-user-modify: revert-layer, read-write;
+  overflow-wrap: revert-layer, break-word;
+  -webkit-line-break: revert-layer, after-white-space;
+  -webkit-user-select: revert-layer, auto;
+}
+
+/* apply back the draggable feature - exist only in Chromium and Safari */
+:where([draggable='true']) {
+  -webkit-user-drag: element;
+}
+
+/* Revert Modal native behavior */
+:where(dialog:modal) {
+  all: revert;
+}

package/src/assets/css/variables.css

@@ -0,0 +1,64 @@
+.scalar-api-reference,
+#headlessui-portal-root,
+.dark-mode {
+  /** Fonts */
+  --scalar-api-reference-font-sans: var(--theme-font);
+  --scalar-api-reference-font-mono: var(--theme-font-code);
+
+  --scalar-api-reference-sidebar-border-color: var(--theme-border-color);
+  --scalar-api-reference-theme-background-1: var(--theme-background-1);
+  --scalar-api-reference-theme-background-2: var(--theme-background-2);
+  --scalar-api-reference-theme-border-color: var(--theme-border-color);
+  --scalar-api-reference-theme-border: var(--theme-border);
+  --scalar-api-reference-theme-button-1-color: var(--theme-button-1-color);
+  --scalar-api-reference-theme-button-1-hover: var(--theme-button-1-hover);
+  --scalar-api-reference-theme-button-1: var(--theme-button-1);
+  --scalar-api-reference-theme-color-1: var(--theme-color-1);
+  --scalar-api-reference-theme-color-2: var(--theme-color-2);
+  --scalar-api-reference-theme-color-3: var(--theme-color-3);
+  --scalar-api-reference-theme-color-ghost: var(--theme-color-ghost);
+  --scalar-api-reference-theme-error-color: var(--theme-error-color);
+  --scalar-api-reference-theme-font-size-4: var(--theme-font-size-4);
+  --scalar-api-reference-theme-header-height: var(--theme-header-height);
+  --scalar-api-reference-theme-radius: var(--theme-radius);
+  --scalar-api-reference-theme-semibold: var(--theme-semibold);
+  --scalar-api-reference-theme-shadow-1: var(--theme-shadow-1);
+  --scalar-api-reference-theme-sidebar-width: var(--theme-sidebar-width);
+  --scalar-api-reference-theme-small: var(--theme-small);
+  --scalar-api-reference-app-header-height: var(--app-header-height);
+  --scalar-api-reference-col-width-1: var(--col-width-1);
+  --scalar-api-reference-col-width-2: var(--col-width-2);
+  --scalar-api-reference-col-width-3: var(--col-width-3);
+  --scalar-api-reference-document-height: var(--document-height);
+  --scalar-api-reference-font-color: var(--theme-color-1);
+  --scalar-api-reference-full-height: var(--full-height);
+  --scalar-api-reference-sidebar-background-1: var(--theme-background-1);
+  --scalar-api-reference-sidebar-color-1: var(--theme-color-1);
+  --scalar-api-reference-sidebar-color-2: var(--theme-color-2);
+  --scalar-api-reference-sidebar-color-active: var(--theme-color-accent);
+  /* prettier-ignore */
+  --scalar-api-reference-sidebar-item-hover-background: var(--theme-background-2);
+  --scalar-api-reference-theme-background-3: var(--theme-background-3);
+  --scalar-api-reference-theme-bold: var(--theme-bold);
+  --scalar-api-reference-theme-border-width: var(--theme-border-width);
+  --scalar-api-reference-theme-color-accent: var(--theme-color-accent);
+  --scalar-api-reference-theme-delete-color: var(--theme-delete-color);
+  --scalar-api-reference-theme-font-code: var(--theme-font-code);
+  --scalar-api-reference-theme-get-color: var(--theme-get-color);
+  --scalar-api-reference-theme-heading-2: var(--theme-heading-2);
+  --scalar-api-reference-theme-heading-4: var(--theme-heading-4);
+  --scalar-api-reference-theme-micro: var(--theme-micro);
+  --scalar-api-reference-theme-mini: var(--theme-mini);
+  --scalar-api-reference-theme-paragraph: var(--theme-paragraph);
+  --scalar-api-reference-theme-patch-color: var(--theme-patch-color);
+  --scalar-api-reference-theme-post-color: var(--theme-post-color);
+  --scalar-api-reference-theme-put-color: var(--theme-put-color);
+  --scalar-api-reference-theme-radius-lg: var(--theme-radius-lg);
+  --scalar-api-reference-theme-regular: var(--theme-regular);
+  --scalar-api-reference-theme-toc-width: var(--theme-toc-width);
+  --scalar-api-reference-theme-post-color: var(--theme-post-color);
+  --scalar-api-reference-theme-patch-color: var(--theme-patch-color);
+  --scalar-api-reference-theme-get-color: var(--theme-get-color);
+  --scalar-api-reference-theme-delete-color: var(--theme-delete-color);
+  --scalar-api-reference-theme-put-color: var(--theme-put-color);
+}

package/src/components/ApiClientModal.vue

@@ -0,0 +1,184 @@
+<script setup lang="ts">
+import { ApiClient, useApiClientStore } from '@scalar/api-client'
+import { useMediaQuery } from '@vueuse/core'
+
+import { type Spec } from '../types'
+import { default as Sidebar } from './Sidebar.vue'
+
+defineProps<{ spec: Spec }>()
+
+const { hideApiClient, state } = useApiClientStore()
+
+const isMobile = useMediaQuery('(max-width: 1000px)')
+
+const proxyUrl = import.meta.env.VITE_CLIENT_PROXY
+</script>
+<template>
+  <div
+    v-if="state.showApiClient"
+    class="api-client-drawer">
+    <div class="scalar-api-client__overlay">
+      <div class="scalar-api-client__container">
+        <!-- <div class="scalar-api-client__navigation">
+          <button
+            class="scalar-api-client__close"
+            type="button"
+            @click="hideApiClient">
+            <span>Back to Reference</span>
+          </button>
+        </div> -->
+        <div class="scalar-api-client-height flex flex-row">
+          <Sidebar
+            v-show="!isMobile"
+            :spec="spec" />
+          <ApiClient
+            :proxyUrl="proxyUrl"
+            @escapeKeyPress="hideApiClient" />
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    v-if="state.showApiClient"
+    class="api-client-drawer-exit"
+    @click="hideApiClient"></div>
+</template>
+
+<style scoped>
+.scalar-api-client__container .scalar-api-client {
+  width: calc(100% - var(--scalar-api-reference-theme-sidebar-width));
+}
+
+.scalar-api-client__container {
+  position: absolute;
+  right: 0;
+  left: 0;
+  bottom: 0;
+  top: 0;
+  z-index: 9;
+  border-radius: 0;
+  box-shadow: none;
+  opacity: 1;
+  overflow: hidden;
+  pointer-events: all;
+  background: var(--scalar-api-reference-theme-background-1) !important;
+  border-radius: var(--scalar-api-reference-theme-radius);
+  box-shadow: var(--scalar-api-reference-theme-shadow-1);
+  height: 100%;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+@media screen and (max-width: 1265px) {
+  .scalar-api-client__container {
+    width: 100vw !important;
+  }
+}
+
+.scalar-api-client__navigation {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  padding: 11px 12px;
+  height: var(--scalar-api-reference-theme-header-height);
+  background-color: var(--scalar-api-reference-theme-background-1);
+  z-index: 10;
+  position: sticky;
+  border-bottom: var(--scalar-api-reference-theme-border);
+  top: 0;
+}
+
+.scalar-api-client__close {
+  appearance: none;
+  border: none;
+  outline: none;
+  display: flex;
+  align-items: center;
+  background: transparent;
+  font-size: 14px;
+  color: var(--scalar-api-reference-theme-color-1);
+  font-weight: var(--scalar-api-reference-theme-semibold);
+}
+.scalar-api-client__close:hover {
+  cursor: pointer;
+}
+/*
+TODO: Markup is missing
+.scalar-api-client__close__icon {
+  width: 28px;
+  height: 28px;
+  border-radius: var(--scalar-api-reference-theme-radius);
+  margin-right: 12px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: var(--scalar-api-reference-theme-color-2);
+}
+.scalar-api-client__close__icon:hover {
+  background: var(--scalar-api-reference-theme-background-2);
+}
+.scalar-api-client__close__icon svg {
+  width: 12px;
+  height: 12px;
+  transform: rotate(180deg);
+} */
+.api-client-drawer {
+  background: var(--scalar-api-reference-theme-background-1);
+  height: calc(100vh - 58px);
+  width: calc(100vw - 8px);
+  border-radius: 12px;
+  overflow: hidden;
+  visibility: visible;
+  position: fixed;
+  bottom: 4px;
+  left: 4px;
+  z-index: 9999;
+  opacity: 0;
+  animation: apiclientfadein 0.35s forwards;
+}
+@keyframes apiclientfadein {
+  from {
+    transform: translate3d(0, 20px, 0) scale(0.985);
+    opacity: 0;
+  }
+  to {
+    transform: translate3d(0, 0, 0) scale(1);
+    opacity: 1;
+  }
+}
+.api-client-drawer-exit {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background: rgba(0, 0, 0, 0.44);
+  transition: all 0.3s ease-in-out;
+  z-index: 9998;
+  cursor: pointer;
+  animation: drawerexitfadein 0.35s forwards;
+}
+@keyframes drawerexitfadein {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+.scalar-api-client-height {
+  height: 100%;
+}
+.scalar-api-client-height .sidebar {
+  flex: 1 1 0%;
+  flex-grow: 1;
+  flex-shrink: 1;
+  flex-basis: 0%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  width: var(--scalar-api-reference-theme-sidebar-width);
+  border-right: 1px solid var(--scalar-api-reference-theme-border-color);
+}
+</style>