@datagouv/components-next 0.0.1

package/src/components/Toggletip.vue

@@ -0,0 +1,62 @@
+<template>
+  <Popover
+    v-slot="{ open }"
+    class="relative text-gray-title"
+    :focus="true"
+  >
+    <PopoverButton
+      v-bind="$attrs"
+      ref="button"
+      :as="ToggletipButton"
+    >
+      <slot />
+    </PopoverButton>
+    <component
+      :is="teleportId ? Teleport : 'div'"
+      v-if="open"
+      :to="`#${teleportId}`"
+      :defer="teleportId ? true : undefined"
+    >
+      <PopoverPanel
+        ref="toggletip"
+        v-slot="{ close }"
+        class="toggletip"
+        :class="{
+          'p-0': noMargin,
+          'left-0': position === 'right',
+          'ml-6 top-24': teleportId,
+        }"
+      >
+        <slot
+          name="toggletip"
+          :close
+        />
+      </PopoverPanel>
+    </component>
+  </Popover>
+</template>
+
+<script setup lang="ts">
+import { Popover, PopoverButton, PopoverPanel } from '@headlessui/vue'
+import { Teleport } from 'vue'
+import ToggletipButton from './ToggletipButton.vue'
+
+withDefaults(defineProps<{
+  noMargin?: boolean
+  position?: 'left' | 'right'
+  teleportId?: string
+}>(), {
+  noMargin: false,
+  position: 'left',
+})
+defineOptions({ inheritAttrs: false })
+</script>
+
+  <style scoped>
+  .z-10 {
+    z-index: 10;
+  }
+  .left-0 {
+    left: 0;
+  }
+  </style>

package/src/components/ToggletipButton.vue

@@ -0,0 +1,14 @@
+<template>
+  <BrandedButton
+    color="secondary-softer"
+    icon-only
+    :icon="RiInformationLine"
+    size="xs"
+    keep-margins-even-without-borders
+  />
+</template>
+
+<script setup lang="ts">
+import { RiInformationLine } from '@remixicon/vue'
+import BrandedButton from './BrandedButton.vue'
+</script>

package/src/composables/useActiveDescendant.ts

@@ -0,0 +1,103 @@
+import { computed, ref, toValue, type MaybeRefOrGetter } from 'vue'
+import type { CommonKeyboardKeys } from '../types/keyboard'
+
+export type Option = {
+  id: string
+}
+
+export default function useActiveDescendant<T extends Option>(options: MaybeRefOrGetter<Array<T>>, direction: 'horizontal' | 'vertical') {
+  const active = ref<string | undefined>()
+
+  const activeOption = computed<T | undefined>(() => toValue(options).find(option => option.id === active.value))
+
+  function isActive(id: string | undefined) {
+    return active.value === id
+  }
+
+  function activate(id?: string) {
+    if (id === undefined) {
+      return activateAtPosition(0)
+    }
+    active.value = id
+  }
+
+  function focusOut() {
+    active.value = undefined
+  }
+
+  function activateAtPosition(position: number) {
+    const optionsList = toValue(options)
+    if (optionsList[position]) {
+      activate(optionsList[position].id)
+    }
+  }
+
+  function activateNextOption() {
+    let activePosition = 0
+    if (active.value) {
+      activePosition = toValue(options).findIndex(option => option.id === active.value)
+      activePosition++
+      if (activePosition === toValue(options).length) {
+        activePosition = 0
+      }
+    }
+    activateAtPosition(activePosition)
+  }
+
+  function activatePreviousOption() {
+    const lastOptionPosition = toValue(options).length - 1
+    let activePosition = lastOptionPosition
+    if (active.value) {
+      activePosition = toValue(options).findIndex(option => option.id === active.value)
+      activePosition--
+      if (activePosition < 0) {
+        activePosition = lastOptionPosition
+      }
+    }
+    activateAtPosition(activePosition)
+  }
+
+  function handleKeyPressForActiveDescendant(key: KeyboardEvent, alreadyMovedDown = false) {
+    switch (key.key as CommonKeyboardKeys) {
+      case 'ArrowDown':
+        if (direction === 'vertical' && !alreadyMovedDown && !key.altKey) {
+          activateNextOption()
+        }
+        break
+      case 'ArrowUp':
+        if (direction === 'vertical') {
+          activatePreviousOption()
+        }
+        break
+      case 'ArrowLeft':
+        if (direction === 'horizontal') {
+          activatePreviousOption()
+        }
+        break
+      case 'ArrowRight':
+        if (direction === 'horizontal' && !alreadyMovedDown && !key.altKey) {
+          activateNextOption()
+        }
+        break
+      case 'Home':
+      case 'End':
+      case 'Escape':
+        focusOut()
+        break
+    }
+  }
+
+  const ALREADY_MOVED_DOWN = true
+  const NOT_MOVED_YET = false
+
+  return {
+    activate,
+    active,
+    activeOption,
+    isActive,
+    focusOut,
+    handleKeyPressForActiveDescendant,
+    ALREADY_MOVED_DOWN,
+    NOT_MOVED_YET,
+  }
+}

package/src/composables/useReuseType.ts

@@ -0,0 +1,14 @@
+import { computedAsync } from '@vueuse/core'
+import { toValue, type MaybeRefOrGetter } from 'vue'
+import { fetchReuseTypes, getType } from '../functions/reuses'
+
+export function useReuseType(id: MaybeRefOrGetter<string>) {
+  const label = computedAsync(async () => {
+    const idValue = toValue(id)
+    const types = await fetchReuseTypes()
+    return getType(types, idValue)
+  }, '')
+  return {
+    label,
+  }
+}

package/src/config.ts

@@ -0,0 +1,33 @@
+import { inject, type Component, type InjectionKey } from 'vue'
+import type { UseFetchFunction } from './functions/api.types'
+
+export type PluginConfig = {
+  name: string // Name of the application (ex: data.gouv.fr)
+  baseUrl: string
+  apiBase: string
+  devApiKey?: string | null
+  staticUrl: string
+  datasetQualityGuideUrl?: string
+  schemaValidataUrl: string
+  schemaDocumentationUrl: string
+  tabularApiUrl?: string
+  tabularApiPageSize?: number
+  tabularAllowRemote?: boolean
+  tabularApiDataserviceId?: string
+  customUseFetch?: UseFetchFunction | null
+  textClamp?: string | Component | null
+  appLink?: Component | null
+  i18n?: {
+    global: {
+      mergeLocaleMessage: (locale: string, messages: unknown) => void
+    }
+  }
+}
+
+export const configKey = Symbol() as InjectionKey<PluginConfig>
+
+export function useComponentsConfig(): PluginConfig {
+  const config = inject(configKey)
+  if (!config) throw new Error('Calling `useComponentsConfig` outside @datagouv/components')
+  return config
+}

package/src/functions/api.ts

@@ -0,0 +1,96 @@
+import { ref, toValue, watchEffect, type ComputedRef, type Ref } from 'vue'
+import { ofetch } from 'ofetch'
+import { useI18n } from 'vue-i18n'
+import { useComponentsConfig } from '../config'
+import type { AsyncData, AsyncDataExecuteOptions, AsyncDataRequestStatus, UseFetchOptions } from './api.types'
+
+export async function useFetch<DataT, ErrorT = never>(
+  url: string | Request | Ref<string | Request> | ComputedRef<string | null> | (() => string | Request),
+  options?: UseFetchOptions<DataT>,
+): Promise<AsyncData<DataT, ErrorT>> {
+  const config = useComponentsConfig()
+
+  const { t, locale } = useI18n()
+
+  if (config.customUseFetch) {
+    return await config.customUseFetch(url, options)
+  }
+
+  const data: Ref<DataT | null> = ref(null)
+  const error: Ref<ErrorT | null> = ref(null)
+  const status = ref<AsyncDataRequestStatus>('idle')
+
+  const execute = async (opts?: AsyncDataExecuteOptions) => {
+    const urlValue = toValue(url)
+    if (!urlValue) return
+    status.value = 'pending'
+    try {
+      data.value = await ofetch(urlValue, {
+        baseURL: config.apiBase,
+        onRequest({ options }) {
+          options.headers.set('Content-Type', 'application/json')
+          options.headers.set('Accept', 'application/json')
+          options.credentials = 'include'
+          if (config.devApiKey) {
+            options.headers.set('X-API-KEY', config.devApiKey)
+          }
+
+          if (locale.value) {
+            if (!options.params) {
+              options.params = {}
+            }
+            options.params['lang'] = locale.value
+          }
+        },
+        async onResponseError({ response }) {
+          // TODO redirect to login outside Nuxt?
+          // if (response.status === 401) {
+          //   await nuxtApp.runWithContext(() => navigateTo(localePath('/login')))
+          // }
+
+          let message
+          try {
+            if ('error' in response._data) {
+              message = response._data.error
+            }
+            else if ('message' in response._data) {
+              message = response._data.message
+            }
+          }
+          catch (e) {
+            console.error(e)
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            message = t('The API returned an unexpected error')
+          }
+
+          // TODO Toast outside Nuxt
+          // toast.error(message)
+        },
+        ...options,
+      })
+      status.value = 'success'
+    }
+    catch (e) {
+      error.value = e as ErrorT
+      status.value = 'error'
+    }
+  }
+
+  watchEffect(async () => {
+    await execute()
+  })
+
+  return {
+    data,
+    refresh: async (opts?: AsyncDataExecuteOptions) => {
+      execute()
+    },
+    execute,
+    clear: () => {
+      data.value = null
+      status.value = 'idle'
+    },
+    error,
+    status,
+  }
+}

package/src/functions/api.types.ts

@@ -0,0 +1,41 @@
+import type { ComputedRef, Ref, WatchSource } from 'vue'
+
+export type UseFetchOptions<DataT> = {
+  key?: string
+  method?: string
+  query?: SearchParams
+  params?: SearchParams
+  body?: RequestInit['body'] | Record<string, any>
+  headers?: Record<string, string> | [key: string, value: string][] | Headers
+  baseURL?: string
+  server?: boolean
+  lazy?: boolean
+  immediate?: boolean
+  getCachedData?: (key: string, nuxtApp: any) => DataT
+  deep?: boolean
+  dedupe?: 'cancel' | 'defer'
+  default?: () => DataT
+  transform?: (input: DataT) => DataT | Promise<DataT>
+  pick?: string[]
+  watch?: WatchSource[] | false
+}
+
+export type AsyncData<DataT, ErrorT> = {
+  data: Ref<DataT | null>
+  refresh: (opts?: AsyncDataExecuteOptions) => Promise<void>
+  execute: (opts?: AsyncDataExecuteOptions) => Promise<void>
+  clear: () => void
+  error: Ref<ErrorT | null>
+  status: Ref<AsyncDataRequestStatus>
+}
+
+export interface AsyncDataExecuteOptions {
+  dedupe?: 'cancel' | 'defer'
+}
+
+export type AsyncDataRequestStatus = 'idle' | 'pending' | 'success' | 'error'
+
+export type UseFetchFunction = (<DataT, ErrorT>(
+  url: string | Request | Ref<string | Request> | ComputedRef<string | null> | (() => string | Request),
+  options?: UseFetchOptions<DataT>
+) => Promise<AsyncData<DataT, ErrorT>>)

package/src/functions/config.ts

@@ -0,0 +1,12 @@
+import { ref } from 'vue'
+
+export type ComponentsConfig = {
+  staticUrl: string
+  baseApiUrl: string
+}
+
+export const config = ref<ComponentsConfig | null>(null)
+
+export function setConfig(newConfig: ComponentsConfig) {
+  config.value = newConfig
+}

package/src/functions/datasets.ts

@@ -0,0 +1,24 @@
+import { useComponentsConfig } from '../config'
+import type { Dataset, DatasetV2 } from '../types/datasets'
+import type { CommunityResource, Resource } from '../types/resources'
+
+function constructUrl(baseUrl: string, path: string): string {
+  const url = new URL(baseUrl)
+  url.pathname = `${url.pathname}${path}`
+  return url.toString()
+}
+
+export default function getDatasetOEmbedHtml(type: string, id: string): string {
+  const config = useComponentsConfig()
+
+  const staticUrl = constructUrl(config.staticUrl, 'oembed.js')
+  return `<div data-udata-${type}="${id}"></div><script data-udata="${config.baseUrl}" src="${staticUrl}" async defer></script>`
+}
+
+export function isCommunityResource(resource: Resource | CommunityResource): boolean {
+  return 'organization' in resource || 'owner' in resource
+}
+
+export function getResourceExternalUrl(dataset: Dataset | DatasetV2 | Omit<Dataset, 'resources' | 'community_resources'>, resource: Resource | CommunityResource): string {
+  return `${dataset.page}#/${isCommunityResource(resource) ? 'community-resources' : 'resources'}/${resource.id}`
+}

package/src/functions/dates.ts

@@ -0,0 +1,85 @@
+import { useI18n } from 'vue-i18n'
+
+const SECONDS_IN_A_DAY = 3600 * 24
+
+export function formatDate(date: Date | string | null, options: Intl.DateTimeFormatOptions = {}) {
+  if (!date) {
+    return ''
+  }
+  date = new Date(date)
+  if (!('dateStyle' in options)) {
+    options.dateStyle = 'long'
+  }
+  const { locale } = useI18n()
+  return new Intl.DateTimeFormat(locale.value, options).format(date)
+}
+
+/**
+ * Format date as relative from now.
+ * It displays "today" or Intl.RelativeTimeFormat content, based on date.
+ */
+export const formatFromNow = (date: Date | string | null) => {
+  if (!date) {
+    return ''
+  }
+  const { t, locale } = useI18n()
+  if (!('RelativeTimeFormat' in Intl)) {
+    return t('on {date}', { date: formatDate(date) })
+  }
+  const today = new Date()
+  today.setHours(0)
+  today.setMinutes(0)
+  today.setSeconds(0)
+  const dateWithoutTime = new Date(date)
+  dateWithoutTime.setHours(0)
+  dateWithoutTime.setMinutes(0)
+  dateWithoutTime.setSeconds(0)
+  // Get the diff in second between today and the provided date
+  const diff = Math.round((dateWithoutTime.getTime() - today.getTime()) / 1000)
+  const units: Array<{ unit: Intl.RelativeTimeFormatUnit, seconds: number, changeAfter: number }> = [
+    {
+      unit: 'day',
+      seconds: SECONDS_IN_A_DAY,
+      changeAfter: 30,
+    },
+    {
+      unit: 'month',
+      seconds: SECONDS_IN_A_DAY * 30,
+      changeAfter: 12,
+    },
+    {
+      unit: 'year',
+      seconds: SECONDS_IN_A_DAY * 365,
+      changeAfter: Infinity,
+    },
+  ]
+  const correctUnit = units.find((unit) => {
+    const diffInUnit = Math.abs(diff / unit.seconds)
+    return diffInUnit < unit.changeAfter
+  })!
+  return new Intl.RelativeTimeFormat(locale.value, { numeric: 'auto' }).format(Math.round(diff / correctUnit?.seconds), correctUnit?.unit)
+}
+
+/**
+ * Format date relative form now if date is less than a month ago.
+ * Otherwise, show a formatted date.
+ */
+export const formatRelativeIfRecentDate = (date: Date | string | null, options: Intl.DateTimeFormatOptions = {}) => {
+  if (!date) {
+    return ''
+  }
+  const { t } = useI18n()
+  const today = new Date()
+  today.setHours(0)
+  today.setMinutes(0)
+  today.setSeconds(0)
+  const dateWithoutTime = new Date(date)
+  dateWithoutTime.setHours(0)
+  dateWithoutTime.setMinutes(0)
+  dateWithoutTime.setSeconds(0)
+  const diff = Math.abs(dateWithoutTime.getTime() - today.getTime())
+  if (Math.round(diff / (SECONDS_IN_A_DAY * 30)) >= 1) {
+    return t('on {date}', { date: formatDate(date, options) })
+  }
+  return formatFromNow(date)
+}

package/src/functions/helpers.ts

@@ -0,0 +1,38 @@
+import { useI18n } from 'vue-i18n'
+
+export const filesize = (val: number) => {
+  const { t } = useI18n()
+  const suffix = t('B')
+  const units = ['', 'K', 'M', 'G', 'T', 'P', 'E', 'Z']
+  for (const unit of units) {
+    if (Math.abs(val) < 1024.0) {
+      return `${val.toFixed(1)}${unit}${suffix}`
+    }
+    val /= 1024.0
+  }
+  return `${val.toFixed(1)}Y${suffix}`
+}
+
+export const summarize = (val: number, fractionDigits = 0) => {
+  const toFixedIfNotZero = (value: number) => {
+    const asString = value.toFixed(fractionDigits)
+    if (!asString.includes('.')) {
+      return asString
+    }
+
+    // Remove trailing "0" to not show "1.0" but only "1"
+    return asString.replace(/0+$/, '').replace(/\.$/, '')
+  }
+
+  if (!val) {
+    return '0'
+  }
+  const units = ['', 'K', 'M', 'G', 'T', 'P', 'E', 'Z']
+  for (const unit of units) {
+    if (Math.abs(val) < 1000.0) {
+      return `${toFixedIfNotZero(val)}${unit}`
+    }
+    val /= 1000.0
+  }
+  return `${toFixedIfNotZero(val)}Y`
+}

package/src/functions/markdown.ts

@@ -0,0 +1,47 @@
+import markdownit from 'markdown-it'
+import { remark } from 'remark'
+import remarkGfm from 'remark-gfm'
+import strip from 'strip-markdown'
+
+const markdownParser = markdownit({
+  html: false,
+  linkify: true,
+  typographer: true,
+  breaks: true,
+})
+
+// Disable mail linkification
+markdownParser.linkify.add('mailto:', null)
+
+markdownParser.use(function (md) {
+  md.renderer.rules.link_open = function (tokens, idx, options, _env, self) {
+    const link_open = tokens[idx]
+    link_open.attrs?.push(['rel', 'ugc nofollow noopener'])
+    return self.renderToken(tokens, idx, options)
+  }
+  // Render ~~<text>~~ as del tag
+  md.renderer.rules.s_open = function (tokens, idx, options, _env, self) {
+    const s_open = tokens[idx]
+    s_open.type = 'del_open'
+    s_open.tag = 'del'
+    return self.renderToken(tokens, idx, options)
+  }
+  md.renderer.rules.s_close = function (tokens, idx, options, _env, self) {
+    const s_close = tokens[idx]
+    s_close.type = 'del_close'
+    s_close.tag = 'del'
+    return self.renderToken(tokens, idx, options)
+  }
+})
+
+export function markdown(text: string): string {
+  return markdownParser.render(text).trim()
+}
+
+export async function removeMarkdown(text: string) {
+  const file = await remark()
+    .use(remarkGfm)
+    .use(strip)
+    .process(text)
+  return String(file)
+}

package/src/functions/matomo.ts

@@ -0,0 +1,3 @@
+export function trackEvent(values: Array<unknown>): void {
+  globalThis._paq?.push(['trackEvent', ...values])
+}

package/src/functions/organizations.ts

@@ -0,0 +1,85 @@
+import { useI18n } from 'vue-i18n'
+import type { Component } from 'vue'
+import { RiBankLine, RiBuilding2Line, RiCommunityLine, RiGovernmentLine, RiUserLine } from '@remixicon/vue'
+import type { Organization } from '../types/organizations'
+
+export const CERTIFIED = 'certified'
+export const PUBLIC_SERVICE = 'public-service'
+export const ASSOCIATION = 'association'
+export const COMPANY = 'company'
+export const LOCAL_AUTHORITY = 'local-authority'
+export const OTHER = 'other'
+export const USER = 'user'
+
+export type OrganizationTypes = typeof PUBLIC_SERVICE | typeof ASSOCIATION | typeof COMPANY | typeof LOCAL_AUTHORITY | typeof OTHER
+
+export type UserType = typeof USER
+
+export function isType(organization: Organization, type: OrganizationTypes) {
+  return hasBadge(organization, type)
+}
+
+export function hasBadge(organization: Organization, kind: string) {
+  return organization.badges.some(badge => badge.kind === kind)
+}
+
+export function getOrganizationTypes(): Array<{ type: OrganizationTypes | UserType, label: string, icon: Component | null }> {
+  const { t } = useI18n()
+  return [{
+    type: PUBLIC_SERVICE,
+    label: t('Public service'),
+    icon: RiBankLine,
+  },
+  {
+    type: LOCAL_AUTHORITY,
+    label: t('Local authority'),
+    icon: RiGovernmentLine,
+  },
+  {
+    type: ASSOCIATION,
+    label: t('Association'),
+    icon: RiCommunityLine,
+  },
+  {
+    type: COMPANY,
+    label: t('Company'),
+    icon: RiBuilding2Line,
+  },
+  {
+    type: OTHER,
+    label: t('Other'),
+    icon: null,
+  },
+  {
+    type: USER,
+    label: t('User'),
+    icon: RiUserLine,
+  }]
+}
+
+export function findOrganizationType(searched: OrganizationTypes | UserType) {
+  return getOrganizationTypes().find(type => type.type === searched)!
+}
+
+export function getOrganizationType(organization: Organization): OrganizationTypes {
+  if (isType(organization, LOCAL_AUTHORITY)) {
+    return LOCAL_AUTHORITY
+  }
+  else if (isType(organization, PUBLIC_SERVICE)) {
+    return PUBLIC_SERVICE
+  }
+  else if (isType(organization, ASSOCIATION)) {
+    return ASSOCIATION
+  }
+  else if (isType(organization, COMPANY)) {
+    return COMPANY
+  }
+  else {
+    return OTHER
+  }
+}
+
+export function isOrganizationCertified(organization: Organization | null): boolean {
+  if (!organization) return false
+  return hasBadge(organization, CERTIFIED) && (isType(organization, PUBLIC_SERVICE) || isType(organization, LOCAL_AUTHORITY))
+}

package/src/functions/owned.ts

@@ -0,0 +1,11 @@
+import type { Owned } from '../types/owned'
+
+export function getOwnerName(owned: Owned): string {
+  if (owned.organization) {
+    return owned.organization.name
+  }
+  else if (owned.owner) {
+    return `${owned.owner.first_name} ${owned.owner.last_name}`
+  }
+  return '' // Not supposed to exist but it does...
+}