@datagouv/components-next 1.0.2-dev.9 → 1.1.1

package/src/components/OpenApiViewer/ContentTypeSelect.vue

@@ -0,0 +1,48 @@
+<template>
+  <Tooltip v-if="contentTypes.length > 1">
+    <div class="relative shrink-0">
+      <select
+        :value="modelValue"
+        class="appearance-none text-xs font-mono bg-white border border-gray-default rounded pl-2 pr-6 py-1 text-gray-medium cursor-pointer hover:border-gray-400 transition-colors"
+        @change="$emit('update:modelValue', ($event.target as HTMLSelectElement).value)"
+      >
+        <option
+          v-for="ct in contentTypes"
+          :key="ct"
+          :value="ct"
+        >
+          {{ contentTypeLabel(ct) }}
+        </option>
+      </select>
+      <RiArrowDownSLine class="pointer-events-none absolute right-1 top-1/2 -translate-y-1/2 size-3.5 text-gray-medium" />
+    </div>
+    <template #tooltip>
+      {{ modelValue }}
+    </template>
+  </Tooltip>
+  <Tooltip v-else-if="contentTypes.length === 1">
+    <span
+      class="text-xs font-mono bg-white border border-gray-default rounded px-2 py-1 text-gray-medium shrink-0"
+    >
+      {{ contentTypeLabel(contentTypes[0]!) }}
+    </span>
+    <template #tooltip>
+      {{ contentTypes[0] }}
+    </template>
+  </Tooltip>
+</template>
+
+<script setup lang="ts">
+import { RiArrowDownSLine } from '@remixicon/vue'
+import Tooltip from '../Tooltip.vue'
+import { contentTypeLabel } from './openapi'
+
+defineProps<{
+  contentTypes: string[]
+  modelValue: string
+}>()
+
+defineEmits<{
+  'update:modelValue': [value: string]
+}>()
+</script>

package/src/components/OpenApiViewer/EndpointRequest.vue

@@ -0,0 +1,164 @@
+<template>
+  <div class="border border-gray-default rounded">
+    <div
+      v-if="!tabs.length"
+      class="p-3 text-xs text-gray-medium"
+    >
+      {{ t("Aucun paramètre de requête") }}
+    </div>
+    <TabGroup
+      v-else
+      size="sm"
+      @change="onTabChange"
+    >
+      <div class="bg-gray-100 px-3 py-2 border-b border-gray-default flex items-center justify-between gap-2">
+        <TabList>
+          <Tab
+            v-for="tab in tabs"
+            :key="tab.key"
+          >
+            {{ tab.label }}
+          </Tab>
+        </TabList>
+        <ContentTypeSelect
+          v-if="activeTab === 'body' && bodyContentTypes.length"
+          :content-types="bodyContentTypes"
+          :model-value="selectedBodyContentType"
+          @update:model-value="selectedBodyContentType = $event"
+        />
+      </div>
+      <TabPanels>
+        <TabPanel
+          v-for="tab in tabs"
+          :key="tab.key"
+        >
+          <div
+            v-if="tab.key === 'query'"
+            class="p-3"
+          >
+            <div class="space-y-0 divide-y divide-gray-100">
+              <div
+                v-for="param in queryParams"
+                :key="param.name"
+                class="py-2"
+              >
+                <div class="flex items-baseline gap-2">
+                  <span class="font-mono text-xs text-gray-title">
+                    {{ param.name }}
+                    <span
+                      v-if="param.required"
+                      class="text-red-600"
+                    >*</span>
+                  </span>
+                  <span class="font-mono text-xs text-gray-medium">{{ getSchemaType(endpoint.spec, param.schema) }}</span>
+                </div>
+                <p
+                  v-if="param.description"
+                  class="text-xs text-gray-medium mt-0.5 mb-0"
+                >
+                  {{ param.description }}
+                </p>
+              </div>
+            </div>
+          </div>
+          <div
+            v-if="tab.key === 'path'"
+            class="p-3"
+          >
+            <div class="space-y-0 divide-y divide-gray-100">
+              <div
+                v-for="param in pathParams"
+                :key="param.name"
+                class="py-2"
+              >
+                <div class="flex items-baseline gap-2">
+                  <span class="font-mono text-xs text-gray-title">
+                    {{ param.name }}
+                    <span class="text-red-600">*</span>
+                  </span>
+                  <span class="font-mono text-xs text-gray-medium">{{ getSchemaType(endpoint.spec, param.schema) }}</span>
+                </div>
+                <p
+                  v-if="param.description"
+                  class="text-xs text-gray-medium mt-0.5 mb-0"
+                >
+                  {{ param.description }}
+                </p>
+              </div>
+            </div>
+          </div>
+          <div
+            v-if="tab.key === 'body'"
+            class="p-3"
+          >
+            <SchemaPanel
+              v-if="currentBodyMediaType?.schema"
+              :spec="endpoint.spec"
+              :schema="currentBodyMediaType.schema"
+            />
+          </div>
+        </TabPanel>
+      </TabPanels>
+    </TabGroup>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import TabGroup from '../Tabs/TabGroup.vue'
+import TabList from '../Tabs/TabList.vue'
+import Tab from '../Tabs/Tab.vue'
+import TabPanels from '../Tabs/TabPanels.vue'
+import TabPanel from '../Tabs/TabPanel.vue'
+import ContentTypeSelect from './ContentTypeSelect.vue'
+import { useTranslation } from '../../composables/useTranslation'
+import SchemaPanel from './SchemaPanel.vue'
+import { getSchemaType, type Endpoint } from './openapi'
+
+const props = defineProps<{
+  endpoint: Endpoint
+}>()
+
+const { t } = useTranslation()
+
+const queryParams = computed(() => props.endpoint.parameters.filter(p => p.in === 'query'))
+const pathParams = computed(() => props.endpoint.parameters.filter(p => p.in === 'path'))
+
+const tabs = computed(() => {
+  const result: { key: string, label: string }[] = []
+  if (pathParams.value.length) {
+    result.push({ key: 'path', label: t('Path') })
+  }
+  if (queryParams.value.length) {
+    result.push({ key: 'query', label: t('Query') })
+  }
+  if (props.endpoint.requestBody) {
+    result.push({ key: 'body', label: t('Body') })
+  }
+  return result
+})
+
+const activeTabIndex = ref(0)
+const activeTab = computed(() => tabs.value[activeTabIndex.value]?.key || '')
+const selectedBodyContentType = ref('')
+
+const bodyContentTypes = computed(() => {
+  if (!props.endpoint.requestBody?.content) return []
+  return Object.keys(props.endpoint.requestBody.content)
+})
+
+const currentBodyMediaType = computed(() => {
+  if (!props.endpoint.requestBody?.content) return null
+  const ct = selectedBodyContentType.value || bodyContentTypes.value[0]
+  if (!ct) return null
+  return props.endpoint.requestBody.content[ct] || null
+})
+
+watch(bodyContentTypes, (types) => {
+  selectedBodyContentType.value = types[0] || ''
+}, { immediate: true })
+
+function onTabChange(index: number) {
+  activeTabIndex.value = index
+}
+</script>

package/src/components/OpenApiViewer/EndpointResponses.vue

@@ -0,0 +1,149 @@
+<template>
+  <div class="border border-gray-default rounded">
+    <TabGroup
+      size="sm"
+      @change="onTabChange"
+    >
+      <div class="bg-gray-100 px-3 py-2 border-b border-gray-default flex items-center gap-4">
+        <div
+          ref="tabListContainer"
+          class="overflow-x-auto flex-1 min-w-0"
+          :class="{ 'scroll-fade': canScrollRight }"
+          @scroll="onScroll"
+        >
+          <TabList>
+            <Tab
+              v-for="tab in tabs"
+              :key="tab.code"
+            >
+              <span
+                class="inline-block w-2 h-2 rounded-full mr-1.5"
+                :class="statusDotColor(tab.code)"
+              />
+              {{ tab.code }}
+            </Tab>
+          </TabList>
+        </div>
+        <ContentTypeSelect
+          v-if="currentContentTypes.length"
+          :content-types="currentContentTypes"
+          :model-value="selectedContentType"
+          @update:model-value="selectedContentType = $event"
+        />
+      </div>
+      <TabPanels>
+        <TabPanel
+          v-for="tab in tabs"
+          :key="tab.code"
+        >
+          <div class="p-3 space-y-3">
+            <p
+              v-if="tab.response.description"
+              class="text-xs text-gray-medium mb-0 pb-3 border-b border-gray-100"
+            >
+              {{ tab.response.description }}
+            </p>
+            <template v-if="currentMediaType?.schema">
+              <SchemaPanel
+                :spec="spec"
+                :schema="currentMediaType.schema"
+              />
+            </template>
+            <p
+              v-else-if="!tab.response.content"
+              class="text-xs text-gray-medium mb-0"
+            >
+              {{ t("Pas de contenu") }}
+            </p>
+          </div>
+        </TabPanel>
+      </TabPanels>
+    </TabGroup>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch, useTemplateRef, onMounted, nextTick } from 'vue'
+import TabGroup from '../Tabs/TabGroup.vue'
+import TabList from '../Tabs/TabList.vue'
+import Tab from '../Tabs/Tab.vue'
+import TabPanels from '../Tabs/TabPanels.vue'
+import TabPanel from '../Tabs/TabPanel.vue'
+import ContentTypeSelect from './ContentTypeSelect.vue'
+import { useTranslation } from '../../composables/useTranslation'
+import SchemaPanel from './SchemaPanel.vue'
+import type { OpenAPIV3 } from 'openapi-types'
+
+const props = defineProps<{
+  responses: Record<string, OpenAPIV3.ResponseObject>
+  spec: OpenAPIV3.Document
+}>()
+
+const { t } = useTranslation()
+
+const tabListContainer = useTemplateRef('tabListContainer')
+const canScrollRight = ref(false)
+
+function checkOverflow() {
+  const el = tabListContainer.value
+  if (!el) return
+  canScrollRight.value = el.scrollLeft + el.clientWidth < el.scrollWidth - 1
+}
+
+function onScroll() {
+  checkOverflow()
+}
+
+onMounted(checkOverflow)
+
+const tabs = computed(() =>
+  Object.entries(props.responses).map(([code, response]) => ({ code, response })),
+)
+
+watch(tabs, () => {
+  nextTick(checkOverflow)
+})
+
+const activeTabIndex = ref(0)
+const selectedContentType = ref('')
+
+const currentContentTypes = computed(() => {
+  const tab = tabs.value[activeTabIndex.value]
+  if (!tab?.response.content) return []
+  return Object.keys(tab.response.content)
+})
+
+const currentMediaType = computed(() => {
+  const tab = tabs.value[activeTabIndex.value]
+  if (!tab?.response.content) return null
+  const ct = selectedContentType.value || currentContentTypes.value[0]
+  if (!ct) return null
+  return tab.response.content[ct] || null
+})
+
+watch(currentContentTypes, (types) => {
+  selectedContentType.value = types[0] || ''
+}, { immediate: true })
+
+function onTabChange(index: number) {
+  activeTabIndex.value = index
+}
+
+function statusDotColor(code: string): string {
+  if (code.startsWith('2')) return 'bg-green-600'
+  if (code.startsWith('3')) return 'bg-blue-600'
+  if (code.startsWith('4')) return 'bg-orange-500'
+  if (code.startsWith('5')) return 'bg-red-600'
+  return 'bg-gray-400'
+}
+</script>
+
+<style scoped>
+.scroll-fade {
+  mask-image: linear-gradient(to right, black calc(100% - 60px), transparent);
+  mask-size: 100% 100%;
+  mask-position: center;
+  padding-block: 4px;
+  margin-block: -4px;
+}
+</style>

package/src/components/OpenApiViewer/OpenApiViewer.vue

@@ -0,0 +1,308 @@
+<template>
+  <div>
+    <div
+      v-if="loading"
+      class="flex items-center justify-center py-8"
+    >
+      <AnimatedLoader />
+    </div>
+    <div
+      v-else-if="error"
+      class="text-new-error text-sm py-4"
+    >
+      {{ t("Impossible de charger la documentation OpenAPI.") }}
+    </div>
+    <div
+      v-else-if="spec"
+      class="space-y-4"
+    >
+      <div class="flex flex-wrap items-center justify-between gap-x-4 gap-y-1 text-sm text-gray-medium">
+        <div class="flex flex-wrap gap-x-4 gap-y-1">
+          <span v-if="spec.info?.version">
+            {{ t("Version") }} <span class="font-mono">{{ spec.info.version }}</span>
+          </span>
+          <div
+            v-if="baseUrl"
+            class="flex flex-col md:flex-row md:items-center gap-0.5 md:gap-0"
+          >
+            <span>{{ t("Base URL") }}</span>
+            <span class="inline-flex items-center">
+              <span class="font-mono break-all md:ml-1">{{ baseUrl }}</span>
+              <CopyButton
+                :label="t('Copier le lien')"
+                :copied-label="t('Lien copié !')"
+                :text="baseUrl"
+                class="shrink-0 hidden md:inline-flex"
+              />
+            </span>
+          </div>
+        </div>
+        <a
+          :href="swaggerUiUrl"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="text-xs text-gray-medium hover:text-gray-title"
+        >
+          {{ t("Ouvrir dans Swagger UI") }}
+        </a>
+      </div>
+      <div
+        v-for="group in groupedEndpoints"
+        :key="group.tag"
+      >
+        <Disclosure
+          v-slot="{ open }"
+          as="div"
+          default-open
+        >
+          <DisclosureButton class="flex w-full items-center justify-between py-2 border-b border-gray-default text-left">
+            <span class="font-bold text-gray-title">
+              {{ group.tag }}
+              <span class="ml-1 text-xs font-normal text-gray-medium">{{ group.endpoints.length }}</span>
+            </span>
+            <RiArrowDownSLine
+              class="size-5 text-gray-medium transition-transform"
+              :class="{ 'rotate-180': open }"
+            />
+          </DisclosureButton>
+          <DisclosurePanel class="divide-y divide-gray-100">
+            <Disclosure
+              v-for="endpoint in group.endpoints"
+              :key="endpoint.method + endpoint.path"
+              v-slot="{ open: endpointOpen }"
+              as="div"
+            >
+              <DisclosureButton class="flex items-baseline gap-2 md:gap-3 py-3 px-1 w-full text-left">
+                <span
+                  class="shrink-0 w-12 md:w-16 inline-flex items-center justify-center rounded px-1.5 py-0.5 text-xs font-bold uppercase font-mono leading-none"
+                  :class="methodColor(endpoint.method)"
+                >
+                  {{ endpoint.method }}
+                </span>
+                <div class="min-w-0 flex-1">
+                  <span class="inline-flex items-center gap-2">
+                    <span class="font-mono text-sm text-gray-title break-all">{{ endpoint.path }}</span>
+                    <CopyButton
+                      :label="t('Copier le lien')"
+                      :copied-label="t('Lien copié !')"
+                      :text="endpointFullUrl(endpoint)"
+                      class="shrink-0 hidden md:inline-flex"
+                      @click.stop
+                    />
+                  </span>
+                  <p
+                    v-if="endpoint.summary"
+                    class="hidden md:block text-sm text-gray-medium mt-0.5 mb-0"
+                  >
+                    {{ endpoint.summary }}
+                  </p>
+                </div>
+                <RiArrowDownSLine
+                  class="size-4 shrink-0 text-gray-medium transition-transform"
+                  :class="{ 'rotate-180': endpointOpen }"
+                />
+              </DisclosureButton>
+              <DisclosurePanel class="pb-4 px-1">
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                  <EndpointRequest
+                    :endpoint="endpoint"
+                  />
+                  <EndpointResponses
+                    :responses="endpoint.responses"
+                    :spec="endpoint.spec"
+                  />
+                </div>
+              </DisclosurePanel>
+            </Disclosure>
+          </DisclosurePanel>
+        </Disclosure>
+      </div>
+      <div v-if="schemas.length">
+        <Disclosure
+          v-slot="{ open }"
+          default-open
+          as="div"
+        >
+          <DisclosureButton class="flex w-full items-center justify-between py-2 border-b border-gray-default text-left">
+            <span class="font-bold text-gray-title">
+              {{ t("Modèles") }}
+              <span class="ml-1 text-xs font-normal text-gray-medium">{{ schemas.length }}</span>
+            </span>
+            <RiArrowDownSLine
+              class="size-5 text-gray-medium transition-transform"
+              :class="{ 'rotate-180': open }"
+            />
+          </DisclosureButton>
+          <DisclosurePanel class="divide-y divide-gray-100">
+            <Disclosure
+              v-for="model in schemas"
+              :key="model.name"
+              v-slot="{ open: modelOpen }"
+              as="div"
+            >
+              <DisclosureButton class="flex items-center gap-2 py-3 px-1 w-full text-left">
+                <RiArrowDownSLine
+                  class="size-4 shrink-0 text-gray-medium transition-transform"
+                  :class="{ 'rotate-180': modelOpen }"
+                />
+                <span class="font-mono text-sm text-gray-title">{{ model.name }}</span>
+                <span
+                  v-if="model.schema.description"
+                  class="text-xs text-gray-medium truncate"
+                >{{ model.schema.description }}</span>
+              </DisclosureButton>
+              <DisclosurePanel class="pb-4 px-1">
+                <SchemaPanel
+                  :spec="spec!"
+                  :schema="model.schema"
+                />
+              </DisclosurePanel>
+            </Disclosure>
+          </DisclosurePanel>
+        </Disclosure>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watchEffect } from 'vue'
+import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/vue'
+import { RiArrowDownSLine } from '@remixicon/vue'
+import { useTranslation } from '../../composables/useTranslation'
+import AnimatedLoader from '../AnimatedLoader.vue'
+import CopyButton from '../CopyButton.vue'
+import EndpointRequest from './EndpointRequest.vue'
+import EndpointResponses from './EndpointResponses.vue'
+import SchemaPanel from './SchemaPanel.vue'
+import { parse as parseYaml } from 'yaml'
+import type { OpenAPIV3 } from 'openapi-types'
+import { resolveRef, type Endpoint } from './openapi'
+
+const props = defineProps<{
+  url: string
+}>()
+
+const { t } = useTranslation()
+
+const spec = ref<OpenAPIV3.Document | null>(null)
+const loading = ref(true)
+const error = ref(false)
+
+const HTTP_METHODS = ['get', 'post', 'put', 'patch', 'delete', 'options', 'head'] as const
+
+async function parseOpenApiResponse(response: Response): Promise<OpenAPIV3.Document> {
+  const text = await response.text()
+  try {
+    return JSON.parse(text)
+  }
+  catch {
+    return parseYaml(text) as OpenAPIV3.Document
+  }
+}
+
+watchEffect(async () => {
+  if (!props.url) return
+  loading.value = true
+  error.value = false
+  try {
+    const response = await fetch(props.url)
+    if (!response.ok) throw new Error(response.statusText)
+    spec.value = await parseOpenApiResponse(response)
+  }
+  catch {
+    error.value = true
+    spec.value = null
+  }
+  finally {
+    loading.value = false
+  }
+})
+
+const baseUrl = computed(() => {
+  if (!spec.value?.servers?.length) return null
+  return spec.value.servers[0]!.url
+})
+
+const swaggerUiUrl = computed(() => {
+  return `https://petstore.swagger.io/?url=${encodeURIComponent(props.url)}`
+})
+
+const endpoints = computed<Endpoint[]>(() => {
+  if (!spec.value?.paths) return []
+  const result: Endpoint[] = []
+  for (const [path, pathItem] of Object.entries(spec.value.paths)) {
+    if (!pathItem) continue
+    for (const method of HTTP_METHODS) {
+      const operation = (pathItem as Record<string, OpenAPIV3.OperationObject>)[method]
+      if (!operation) continue
+
+      const parameters = (operation.parameters || []).map((p) => {
+        return resolveRef<OpenAPIV3.ParameterObject>(spec.value!, p)
+      }).filter((p): p is OpenAPIV3.ParameterObject => p !== null)
+
+      const requestBody = operation.requestBody
+        ? resolveRef<OpenAPIV3.RequestBodyObject>(spec.value!, operation.requestBody)
+        : null
+
+      const responses: Record<string, OpenAPIV3.ResponseObject> = {}
+      if (operation.responses) {
+        for (const [code, resp] of Object.entries(operation.responses)) {
+          const resolved = resolveRef<OpenAPIV3.ResponseObject>(spec.value!, resp)
+          if (resolved) responses[code] = resolved
+        }
+      }
+
+      result.push({
+        method,
+        path,
+        summary: operation.summary || operation.description || '',
+        tags: operation.tags || [],
+        parameters,
+        requestBody: requestBody || null,
+        responses,
+        spec: spec.value!,
+      })
+    }
+  }
+  return result
+})
+
+const groupedEndpoints = computed(() => {
+  const groups = new Map<string, Endpoint[]>()
+  for (const endpoint of endpoints.value) {
+    const tags = endpoint.tags.length ? endpoint.tags : [t('Endpoints')]
+    for (const tag of tags) {
+      if (!groups.has(tag)) {
+        groups.set(tag, [])
+      }
+      groups.get(tag)!.push(endpoint)
+    }
+  }
+  return Array.from(groups.entries()).map(([tag, endpoints]) => ({ tag, endpoints }))
+})
+
+const schemas = computed(() => {
+  const components = spec.value?.components?.schemas
+  if (!components) return []
+  return Object.entries(components).map(([name, schema]) => ({
+    name,
+    schema: schema as OpenAPIV3.SchemaObject,
+  }))
+})
+
+function endpointFullUrl(endpoint: Endpoint): string {
+  return (baseUrl.value || '') + endpoint.path
+}
+
+function methodColor(method: string): string {
+  switch (method) {
+    case 'get': return 'bg-blue-100 text-blue-800'
+    case 'post': return 'bg-green-100 text-green-800'
+    case 'put': return 'bg-orange-100 text-orange-800'
+    case 'patch': return 'bg-yellow-100 text-yellow-800'
+    case 'delete': return 'bg-red-100 text-red-800'
+    default: return 'bg-gray-100 text-gray-800'
+  }
+}
+</script>