@datagouv/components-next 0.0.1

package/src/components/AppLink.vue

@@ -0,0 +1,51 @@
+<template>
+  <component
+    :is="config?.appLink"
+    v-if="config.appLink"
+    :to
+  >
+    <slot />
+  </component>
+  <a
+    v-else-if="isExternal"
+    :href="to"
+  >
+    <slot />
+  </a>
+  <RouterLink
+    v-else
+    :to
+  ><slot /></RouterLink>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { RouterLink } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+import type { RouteLocationRaw } from 'vue-router'
+import { useComponentsConfig } from '../config'
+
+const config = useComponentsConfig()
+const { locale } = useI18n()
+
+const props = defineProps<{
+  to: string | RouteLocationRaw
+}>()
+
+const isExternal = computed(() => {
+  if (typeof props.to !== 'string') return false
+  return props.to && props.to.startsWith('http')
+})
+const to = computed(() => {
+  // If the `appLink` component is override, the override is responsible of the locale management
+  if (config.appLink) return props.to
+
+  // If it's an external link, no locale management needed.
+  if (isExternal.value) return props.to
+
+  // TODO harden this for path not starting with "/"x
+  if (typeof props.to === 'string') return `/${locale.value}${props.to}`
+
+  return props.to
+})
+</script>

package/src/components/Avatar.vue

@@ -0,0 +1,27 @@
+<template>
+  <img
+    :class="{ 'rounded-full border border-gray-default': rounded }"
+    :src="avatarUrl"
+    :width="size"
+    :height="size"
+    loading="lazy"
+    alt=""
+  >
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { getUserAvatar } from '../functions/users'
+import type { User } from '../types/users'
+
+type Props = {
+  rounded?: boolean
+  size?: number
+  user: User
+}
+const props = withDefaults(defineProps<Props>(), {
+  rounded: false,
+  size: 40,
+})
+const avatarUrl = computed(() => getUserAvatar(props.user, props.size))
+</script>

package/src/components/AvatarWithName.vue

@@ -0,0 +1,26 @@
+<template>
+  <span class="inline-flex items-center space-x-1">
+    <Avatar
+      v-bind="$attrs"
+      :user="user"
+      :size
+      :rounded="true"
+    />
+    <span class="fr-text--bold">
+      {{ user.first_name }}
+      {{ user.last_name }}
+    </span>
+  </span>
+</template>
+
+<script setup lang="ts">
+import type { User } from '../types/users'
+import Avatar from './Avatar.vue'
+
+withDefaults(defineProps<{
+  user: User
+  size?: number
+}>(), {
+  size: 12,
+})
+</script>

package/src/components/BannerAction.vue

@@ -0,0 +1,39 @@
+<template>
+  <div
+    class="group flex items-center justify-between rounded border p-2.5"
+    :data-banner-action-type="type"
+    :class="{
+      '!border-datagouv bg-datagouv-lightest text-datagouv-dark': type === 'primary',
+      '!border-danger-dark bg-danger-lightest text-danger-dark': type === 'danger',
+      '!border-warning-dark bg-warning-lightest text-warning-dark': type === 'warning',
+    }"
+  >
+    <div>
+      <div class="text-gray-900">
+        {{ title }}
+      </div>
+      <div
+        v-if="$slots.default"
+        class="text-xs mt-1"
+      >
+        <slot />
+      </div>
+    </div>
+    <div v-if="$slots.button">
+      <slot name="button" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+export const bannerActionTypeKey = Symbol() as InjectionKey<'primary' | 'danger' | 'warning'>
+</script>
+
+<script setup lang="ts">
+const props = defineProps<{
+  type: 'primary' | 'danger' | 'warning'
+  title: string
+}>()
+
+provide(bannerActionTypeKey, props.type)
+</script>

package/src/components/BrandedButton.vue

@@ -0,0 +1,170 @@
+<template>
+  <component
+    :is="href ? AppLink: 'button'"
+    class="inline-flex items-center rounded-full font-medium border !bg-none !no-underline after:content-none"
+    :class="[colors, sizes, removePaddingsIfNoBorders, isDisabled ? '!opacity-50' : '', iconRight && !newTab ? 'flex-row-reverse space-x-reverse' : '']"
+    :disabled="isDisabled"
+    :aria-disabled="isDisabled"
+    :role="href ? 'link' : ''"
+    :to="isDisabled ? undefined : href"
+    :target="newTab ? '_blank' : undefined"
+    :type
+  >
+    <AdminLoader
+      v-if="loading"
+      size="16"
+      :color="color === 'primary' ? 'white' : 'primary'"
+    />
+    <component
+      :is="icon"
+      v-else-if="icon"
+      :class="iconSize"
+      v-bind="iconAttrs"
+    />
+    <span
+      v-if="hasText"
+      class="whitespace-nowrap"
+      :class="iconOnly ? 'sr-only' : ''"
+    ><slot /></span>
+    <RiExternalLinkLine
+      v-if="newTab"
+      :class="iconSize"
+    />
+  </component>
+</template>
+
+<script setup lang="ts">
+import type {
+  Component,
+  Slot,
+  VNode,
+} from 'vue'
+import {
+  Comment,
+  computed,
+  inject,
+  Text,
+  useSlots,
+} from 'vue'
+import { RiExternalLinkLine } from '@remixicon/vue'
+import AppLink from './AppLink.vue'
+import { bannerActionTypeKey } from './BannerAction.vue'
+
+type ColorType = 'primary' | 'primary-soft' | 'primary-softer' | 'secondary' | 'secondary-softer' | 'warning' | 'danger' | 'tertiary'
+
+const props = withDefaults(defineProps<{
+  size?: '2xs' | 'xs' | 'sm' | 'lg'
+  color?: ColorType
+  disabled?: boolean
+  loading?: boolean
+  icon?: Component
+  iconAttrs?: Record<string, string>
+  href?: string
+  newTab?: boolean
+  iconOnly?: boolean
+  iconRight?: boolean
+  keepMarginsEvenWithoutBorders?: boolean
+  type?: 'submit' | 'button'
+}>(), {
+  newTab: false,
+  iconOnly: false,
+  iconRight: false,
+  keepMarginsEvenWithoutBorders: false,
+})
+
+const slots = useSlots()
+
+const type = computed(() => {
+  if (props.type) return props.type
+  if (props.href) return undefined
+
+  return 'button'
+})
+
+const size = computed(() => {
+  if (props.size) return props.size
+  if (bannerActionType) return 'xs'
+  return 'sm'
+})
+
+const color = computed<ColorType>(() => {
+  if (props.color) return props.color
+  if (bannerActionType) {
+    return {
+      primary: 'primary-soft' as ColorType,
+      warning: 'warning' as ColorType,
+      danger: 'danger' as ColorType,
+    }[bannerActionType]
+  }
+  return 'primary'
+})
+
+const hasText = computed(() => {
+  return hasSlotContent(slots.default) && !props.iconOnly
+})
+const bannerActionType = inject(bannerActionTypeKey, null)
+
+const isDisabled = computed(() => props.disabled || props.loading)
+
+const colors = computed(() => {
+  return {
+    'primary': `text-white bg-datagouv-dark !border-datagouv-dark ${!isDisabled.value ? 'hover:!bg-datagouv-hover hover:!border-datagouv-hover' : ''}`,
+    'primary-soft': `text-datagouv-dark bg-transparent !border-datagouv-dark ${!isDisabled.value ? '[&&]:hover:!bg-gray-some' : ''}`,
+    'primary-softer': `text-datagouv-dark bg-transparent !border-transparent ${!isDisabled.value ? '[&&]:hover:!bg-gray-some' : ''}`,
+    'secondary': `text-gray-plain bg-white !border-gray-plain ${!isDisabled.value ? '[&&]:hover:!bg-gray-some' : ''}`,
+    'secondary-softer': `text-gray-plain !border-transparent ${!isDisabled.value ? '[&&]:hover:!bg-gray-some' : ''}`,
+    'warning': `text-warning-dark bg-white !border-warning-dark ${!isDisabled.value ? '[&&]:hover:!bg-gray-some' : ''}`,
+    'danger': `!text-danger-dark bg-white !border-danger-dark ${!isDisabled.value ? '[&&]:hover:!bg-gray-some' : ''}`,
+    'tertiary': `!border-none bg-transparent text-datagouv-dark ${!isDisabled.value ? '[&&]:hover:!bg-gray-some' : ''}`,
+  }[color.value]
+})
+
+const sizes = computed(() => {
+  return {
+    'lg': `text-lg ${hasText.value ? 'px-4 py-2 space-x-2' : 'p-3'}`,
+    'sm': `text-sm leading-none ${hasText.value ? 'px-4 py-3 space-x-1' : 'p-2.5'}`,
+    'xs': `text-xs leading-[0.875rem] ${hasText.value ? 'px-4 py-2 space-x-1' : 'p-2'}`,
+    '2xs': `text-xs leading-[0.875rem] p-1 space-x-1`,
+  }[size.value]
+})
+
+const hasBorders = computed(() => {
+  return props.color !== 'primary-softer' && props.color !== 'secondary-softer'
+})
+
+const removePaddingsIfNoBorders = computed(() => {
+  if (hasBorders.value) return ''
+  if (props.keepMarginsEvenWithoutBorders) return ''
+
+  return {
+    'lg': hasText.value ? '-mx-6' : '-mx-3',
+    'sm': hasText.value ? '-mx-4' : '-mx-2.5',
+    'xs': hasText.value ? '-mx-4' : '-mx-2',
+    '2xs': '-m-1',
+  }[size.value]
+})
+
+const iconSize = computed(() => {
+  return {
+    'lg': (hasBorders.value || hasText.value) ? 'size-6' : 'size-8',
+    'sm': (hasBorders.value || hasText.value) ? 'size-4' : 'size-6',
+    'xs': (hasBorders.value || hasText.value) ? 'size-3' : 'size-5',
+    '2xs': (hasBorders.value || hasText.value) ? 'size-3' : 'size-4',
+  }[size.value]
+})
+
+function hasSlotContent(slot: Slot | undefined, slotProps = {}): boolean {
+  if (!slot) return false
+
+  return slot(slotProps).some((vnode: VNode) => {
+    if (vnode.type === Comment) return false
+
+    if (Array.isArray(vnode.children) && !vnode.children.length) return false
+
+    return (
+      vnode.type !== Text
+      || (typeof vnode.children === 'string' && vnode.children.trim() !== '')
+    )
+  })
+}
+</script>

package/src/components/CopyButton.vue

@@ -0,0 +1,84 @@
+<template>
+  <button
+    type="button"
+    class="text-sm mb-0 whitespace-nowrap relative p-1 text-gray-medium leading-none"
+    :class="{ 'border bg-white rounded-sm text-gray-title': hideLabel }"
+    @click="copy"
+  >
+    <span
+      v-if="copied"
+      class="flex items-center"
+      :class="{ 'flex-row-reverse': reverse }"
+      style="color: #3558a2;"
+    >
+      <RiCheckLine class="size-4 inline" />
+      <span
+        class="fr-ml-1v copy-label"
+        :class="{ 'fr-sr-only': hideLabel }"
+      >{{ copiedLabel }}</span>
+    </span>
+    <span
+      v-if="!copied"
+      class="flex items-center"
+      :class="{ 'flex-row-reverse': reverse }"
+    >
+      <component
+        :is="hideLabel ? RiClipboardLine : RiFileCopyLine"
+        class="size-4 inline"
+      />
+      <span
+        class="fr-ml-1v copy-link copy-label"
+        :class="{ 'fr-sr-only': hideLabel }"
+      >{{ label }}</span>
+    </span>
+  </button>
+</template>
+
+<script setup lang="ts">
+import { RiCheckLine, RiClipboardLine, RiFileCopyLine } from '@remixicon/vue'
+import { ref } from 'vue'
+
+const props = withDefaults(defineProps<{
+  text: string
+  label: string
+  copiedLabel: string
+  hideLabel?: boolean
+  reverse?: boolean
+}>(), {
+  hideLabel: false,
+  reverse: false,
+})
+
+const copied = ref(false)
+
+const copy = () => {
+  navigator.clipboard.writeText(props.text)
+  copied.value = true
+  setTimeout(() => copied.value = false, 2000)
+}
+</script>
+
+  <style scoped>
+  button:hover .copy-icon {
+    color: #3558a2;
+  }
+
+  .copy-link {
+    /* Using opacity here to prevent moving object with display:none (for example when clamping a text before the button) */
+    opacity: 0%;
+  }
+  button:hover .copy-link {
+    opacity: 100%;
+  }
+
+  /*
+  We may want to enable this to leave more space for title in small screens… But it also affects
+  buttons in the body of the resources panels and we don't want it…
+  @container (max-width: 600px) {
+    .copy-label {
+      position: absolute;
+      bottom: -1rem;
+      left: 0;
+    }
+  } */
+  </style>

package/src/components/DataserviceCard.vue

@@ -0,0 +1,184 @@
+<template>
+  <article
+    class="my-4 p-4 border border-gray-default fr-enlarge-link"
+    :class="{
+      'border-tabular-api': isTabularApi,
+      'mt-6': showBadge,
+    }"
+  >
+    <div
+      v-if="showBadge"
+      class="absolute top-0 fr-grid-row fr-grid-row--middle fr-mt-n3v fr-ml-n1v"
+    >
+      <p
+        v-if="dataservice.access_type === 'restricted'"
+        class="fr-badge fr-badge--sm fr-badge--mention-grey text-gray-medium mr-2"
+      >
+        <span
+          class="fr-icon-lock-line fr-icon--sm"
+          aria-hidden="true"
+        />
+        {{ t('Restricted access') }}
+      </p>
+      <p
+        v-if="dataservice.private"
+        class="fr-badge fr-badge--sm fr-badge--mention-grey text-gray-medium mr-2"
+      >
+        <span
+          class="fr-icon-lock-line fr-icon--sm"
+          aria-hidden="true"
+        />
+        {{ t('Draft') }}
+      </p>
+      <p
+        v-if="dataservice.archived_at"
+        class="fr-badge fr-badge--sm fr-badge--mention-grey text-gray-medium mr-2"
+      >
+        <span
+          class="fr-icon-lock-line fr-icon--sm"
+          aria-hidden="true"
+        />
+        {{ t('Archived') }}
+      </p>
+    </div>
+    <h4 class="fr-text--md fr-mb-0">
+      <slot
+        name="dataserviceUrl"
+        :dataservice="dataservice"
+        :dataservice-url="dataserviceUrl"
+      >
+        <svg
+          v-if="isTabularApi"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          fill="currentColor"
+          aria-hidden="true"
+          class="fr-mr-1v"
+          style="width:1rem"
+        ><path d="M17.0007 1.20825 18.3195 3.68108 20.7923 4.99992 18.3195 6.31876 17.0007 8.79159 15.6818 6.31876 13.209 4.99992 15.6818 3.68108 17.0007 1.20825ZM10.6673 9.33325 15.6673 11.9999 10.6673 14.6666 8.00065 19.6666 5.33398 14.6666.333984 11.9999 5.33398 9.33325 8.00065 4.33325 10.6673 9.33325ZM11.4173 11.9999 9.18905 10.8115 8.00065 8.58325 6.81224 10.8115 4.58398 11.9999 6.81224 13.1883 8.00065 15.4166 9.18905 13.1883 11.4173 11.9999ZM19.6673 16.3333 18.0007 13.2083 16.334 16.3333 13.209 17.9999 16.334 19.6666 18.0007 22.7916 19.6673 19.6666 22.7923 17.9999 19.6673 16.3333Z" /></svg>
+        <span
+          v-else
+          class="fr-icon-terminal-line fr-icon--sm fr-mr-1v"
+          aria-hidden="true"
+        />
+        <AppLink
+          class="inline-flex"
+          :to="dataserviceUrl"
+        >
+          <component
+            :is="config.textClamp"
+            v-if="config.textClamp"
+            :auto-resize="true"
+            :text="dataservice.title"
+            :max-lines="1"
+          />
+        </AppLink>
+      </slot>
+    </h4>
+    <p
+      v-if="dataservice.organization || dataservice.owner"
+      class="text-sm text-gray-medium inline-flex mt-1 mb-0"
+    >
+      <span
+        v-if="dataservice.organization"
+        class="not-enlarged"
+      >
+        <AppLink
+          v-if="organizationUrl"
+          class="fr-link fr-text--sm"
+          :to="organizationUrl"
+        >
+          <OrganizationNameWithCertificate :organization="dataservice.organization" />
+        </AppLink>
+        <OrganizationNameWithCertificate
+          v-else
+          :organization="dataservice.organization"
+        />
+      </span>
+      <component
+        :is="config.textClamp"
+        v-else-if="config.textClamp"
+        class="not-enlarged fr-mr-1v"
+        :auto-resize="true"
+        :text="ownerName"
+        :max-lines="1"
+      />
+      <span class="dash-before whitespace-nowrap">{{ t('Updated {date}', { date: formatRelativeIfRecentDate(dataservice.metadata_modified_at, { dateStyle: 'medium' }) }) }}</span>
+    </p>
+    <p class="text-sm text-gray-medium mb-0 mt-1">
+      <span class="fr-icon-information-line fr-icon--sm text-gray-medium" />
+      {{ t('Availability :') }}
+      <span class="text-gray-plain">
+        <template v-if="dataservice.availability">
+          {{ t('{n}%', dataservice.availability) }}
+        </template>
+        <template v-else>
+          {{ t('unknown') }}
+        </template>
+      </span>
+    </p>
+    <component
+      :is="config.textClamp"
+      v-if="config.textClamp && description && showDescription"
+      class="fr-text--sm fr-mt-1w fr-mb-0 overflow-wrap-anywhere"
+      :auto-resize="true"
+      :text="description"
+      :max-lines="2"
+    />
+  </article>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watchEffect } from 'vue'
+import { useI18n } from 'vue-i18n'
+import type { RouteLocationRaw } from 'vue-router'
+import { useComponentsConfig } from '../config'
+import { formatRelativeIfRecentDate } from '../functions/dates'
+import { removeMarkdown } from '../functions/markdown'
+import { getOwnerName } from '../functions/owned'
+import type { Dataservice } from '../types/dataservices'
+import OrganizationNameWithCertificate from './OrganizationNameWithCertificate.vue'
+import AppLink from './AppLink.vue'
+
+  type Props = {
+    dataservice: Dataservice
+
+    /**
+     * The dataserviceUrl is a route location object to allow Vue Router to navigate to the details of a dataservice.
+     * It is used as a separate prop to allow other sites using the package to define their own dataservice pages.
+     */
+    dataserviceUrl: RouteLocationRaw
+
+    /**
+     * The organizationUrl is an optional route location object to allow Vue Router to navigate to the details of the organization linked to tha dataservice.
+     * It is used as a separate prop to allow other sites using the package to define their own organization pages.
+     */
+    organizationUrl?: RouteLocationRaw
+    showDescription?: boolean
+  }
+
+const props = withDefaults(defineProps<Props>(), {
+  style: () => ({}),
+  showDescription: true,
+})
+
+const { t } = useI18n()
+const ownerName = computed(() => getOwnerName(props.dataservice))
+const showBadge = computed(() => props.dataservice.access_type === 'restricted' || props.dataservice.private || props.dataservice.archived_at)
+
+const config = useComponentsConfig()
+const isTabularApi = computed(() => {
+  return config.tabularApiDataserviceId === props.dataservice.id
+})
+
+const description = ref('')
+watchEffect(async () => {
+  description.value = await removeMarkdown(props.dataservice.description)
+})
+</script>
+
+  <style scoped>
+  .border-tabular-api {
+    border-color: #373C42 !important;
+  }
+  </style>