@datagouv/components-next 0.2.0 → 1.0.0

package/src/functions/api.ts

@@ -1,4 +1,4 @@
-import { reactive, ref, toValue, watchEffect, type ComputedRef, type Ref } from 'vue'
+import { ref, toValue, watchEffect, onMounted, type ComputedRef, type Ref } from 'vue'
 import { ofetch } from 'ofetch'
 import { useComponentsConfig } from '../config'
 import { useTranslation } from '../composables/useTranslation'
@@ -23,11 +23,13 @@ export async function useFetch<DataT, ErrorT = never>(
   const execute = async () => {
     const urlValue = toValue(url)
     if (!urlValue) return
-    const fetchOptions = reactive(options ?? {})
+    const params = toValue(options?.params)
+    const query = toValue(options?.query)
     status.value = 'pending'
     try {
       data.value = await ofetch<DataT | null>(urlValue, {
         baseURL: config.apiBase,
+        params: params ?? query,
         onRequest(param) {
           if (config.onRequest) {
             if (Array.isArray(config.onRequest)) {
@@ -55,7 +57,6 @@ export async function useFetch<DataT, ErrorT = never>(
         onRequestError: config.onRequestError,
         onResponse: config.onResponse,
         onResponseError: config.onResponseError,
-        ...fetchOptions,
       })
       status.value = 'success'
     }
@@ -65,9 +66,19 @@ export async function useFetch<DataT, ErrorT = never>(
     }
   }
 
-  watchEffect(async () => {
-    await execute()
-  })
+  // When server is false, only start watching after mount (client-side only)
+  if (options?.server === false) {
+    onMounted(() => {
+      watchEffect(async () => {
+        await execute()
+      })
+    })
+  }
+  else {
+    watchEffect(async () => {
+      await execute()
+    })
+  }
 
   return {
     data,

package/src/functions/api.types.ts

@@ -1,10 +1,12 @@
 import type { ComputedRef, Ref, WatchSource } from 'vue'
 
+type MaybeRef<T> = T | Ref<T> | ComputedRef<T>
+
 export type UseFetchOptions<DataT> = {
   key?: string
   method?: string
-  query?: Record<string, unknown>
-  params?: Record<string, unknown>
+  query?: MaybeRef<Record<string, unknown>>
+  params?: MaybeRef<Record<string, unknown>>
   body?: RequestInit['body'] | Record<string, unknown>
   headers?: Record<string, string> | [key: string, value: string][] | Headers
   baseURL?: string

package/src/functions/datasets.ts

@@ -1,11 +1,6 @@
 import { useComponentsConfig } from '../config'
 import type { Dataset, DatasetV2 } from '../types/datasets'
 import type { CommunityResource, Resource } from '../types/resources'
-import { removeMarkdown } from './markdown'
-
-// Dataset description constants
-export const DESCRIPTION_SHORT_MAX_LENGTH = 200
-export const DESCRIPTION_MIN_LENGTH = 200
 
 function constructUrl(baseUrl: string, path: string): string {
   const url = new URL(baseUrl)
@@ -25,30 +20,7 @@ export function isCommunityResource(resource: Resource | CommunityResource): boo
 }
 
 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}`
-}
-
-/**
- * Returns the short description to display.
- * If description_short is provided, it is used.
- * Otherwise, the first DESCRIPTION_SHORT_MAX_LENGTH characters of description are used.
- */
-export async function getDescriptionShort(
-  description: string | null | undefined,
-  descriptionShort: string | null | undefined,
-): Promise<string> {
-  if (descriptionShort?.trim()) {
-    return descriptionShort
-  }
-  if (description?.trim()) {
-    // description field is a markdown field that may contain HTML tags, so we should trim it
-    const plainText = (await removeMarkdown(description)).trim()
-    if (plainText.length > DESCRIPTION_SHORT_MAX_LENGTH) {
-      return `${plainText.substring(0, DESCRIPTION_SHORT_MAX_LENGTH - 1)}…`
-    }
-    return plainText
-  }
-  return ''
+  return `${dataset.page}${isCommunityResource(resource) ? '/community-resources' : ''}?resource_id=${resource.id}`
 }
 
 export function getResourceFilesize(resource: Resource): null | number {

package/src/functions/description.ts

@@ -0,0 +1,33 @@
+import { removeMarkdownSync } from './markdown'
+
+// Dataset description constants
+
+// Form validation (client-side rules)
+export const DESCRIPTION_SHORT_MAX_LENGTH = 200 // max for `description_short` (+ truncation/output cap)
+export const DESCRIPTION_MIN_LENGTH = 200 // min (recommendation) for `description` (not AI gating)
+
+// AI gating (enable AI suggestions; not validation)
+export const AI_SUGGESTION_MIN_DESCRIPTION_LENGTH = 200 // min `description` length to enable suggestions
+
+/**
+ * Returns the short description to display.
+ * If description_short is provided, it is used.
+ * Otherwise, the first DESCRIPTION_SHORT_MAX_LENGTH characters of description are used.
+ */
+export function getDescriptionShort({ description, descriptionShort }: {
+  description: string | null | undefined
+  descriptionShort?: string | null | undefined
+}) {
+  if (descriptionShort?.trim()) {
+    return descriptionShort
+  }
+  if (description?.trim()) {
+    // description field is a markdown field that may contain HTML tags, so we should trim it
+    const plainText = removeMarkdownSync(description).trim()
+    if (plainText.length > DESCRIPTION_SHORT_MAX_LENGTH) {
+      return `${plainText.substring(0, DESCRIPTION_SHORT_MAX_LENGTH - 1)}…`
+    }
+    return plainText
+  }
+  return ''
+}

package/src/functions/helpers.ts

@@ -37,3 +37,14 @@ export const summarize = (val: number, fractionDigits = 0) => {
   }
   return `${toFixedIfNotZero(val)}Y`
 }
+
+export const escapeCsvValue = (value: string | number | null | undefined): string => {
+  if (value === null || value === undefined || value === '') {
+    return ''
+  }
+  const stringValue = String(value)
+  if (stringValue.includes(',') || stringValue.includes('"') || stringValue.includes('\n')) {
+    return `"${stringValue.replace(/"/g, '""')}"`
+  }
+  return stringValue
+}

package/src/functions/markdown.ts

@@ -16,26 +16,57 @@ import remarkGfm from 'remark-gfm'
 import strip from 'strip-markdown'
 
 // Copied from https://github.com/potato4d/rehype-plugin-image-native-lazy-loading/blob/v1.2.0/src/index.ts
-function lazyLoadPlugin(this: Processor): Transformer {
-  function visitor(el: hast.Element) {
-    if (el.tagName !== 'img') {
-      return
-    }
-    el.properties = {
-      ...(el.properties || {}),
-      loading: 'lazy',
-    }
+function rehypeLazyLoad(this: Processor): Transformer {
+  return function transformer(htmlAST: Node): Node {
+    visit(htmlAST, 'element', function visitor(el: hast.Element) {
+      if (el.tagName !== 'img') {
+        return
+      }
+      el.properties = {
+        ...(el.properties || {}),
+        loading: 'lazy',
+      }
+    })
+    return htmlAST
   }
+}
+
+function rehypeNoHeadings(this: Processor): Transformer {
+  return function transformer(htmlAST: Node): Node {
+    visit(htmlAST, 'element', function visitor(el: hast.Element) {
+      if (el.tagName !== 'h1' && el.tagName !== 'h2' && el.tagName !== 'h3' && el.tagName !== 'h4' && el.tagName !== 'h5' && el.tagName !== 'h6') {
+        return
+      }
+
+      const classes = {
+        h1: 'text-3xl leading-8',
+        h2: 'text-2xl leading-7',
+        h3: 'text-xl leading-6',
+        h4: 'text-base',
+        h5: 'text-sm leading-6',
+        h6: 'text-sm leading-6',
+      }[el.tagName]
 
-  function transformer(htmlAST: Node): Node {
-    visit(htmlAST, 'element', visitor)
+      el.properties = {
+        ...(el.properties || {}),
+        class: `font-extrabold ${classes}`,
+      }
+      el.tagName = 'div'
+    })
     return htmlAST
   }
-
-  return transformer
 }
 
-export function formatMarkdown(md: string, minDepth = 3) {
+export function formatMarkdown(md: string, config: number | { minDepth: number, noHeadings: boolean } = 3) {
+  let minDepth: number
+  let noHeadings = false
+  if (typeof config === 'number') {
+    minDepth = config
+  }
+  else {
+    minDepth = config.minDepth
+    noHeadings = config.noHeadings
+  }
   const result = unified()
     .use(behead, { minDepth: minDepth > 1 ? minDepth : undefined } as Options)
     // Take Markdown as input and turn it into MD syntax tree
@@ -55,14 +86,14 @@ export function formatMarkdown(md: string, minDepth = 3) {
     .use(rehypeSanitize)
     // Serialize syntax tree to HTML
     .use(rehypeStringify)
-    .use(lazyLoadPlugin)
+    .use(noHeadings ? [rehypeLazyLoad, rehypeNoHeadings] : [rehypeLazyLoad])
     // And finally, process the input
     .processSync(md)
 
   return String(result)
 }
 
-export async function removeMarkdown(text: string) {
+export async function removeMarkdownAsync(text: string) {
   const file = await unified()
     // Take Markdown as input and turn it into MD syntax tree
     .use(remarkParse, { fragment: true })
@@ -73,6 +104,19 @@ export async function removeMarkdown(text: string) {
   return String(file)
 }
 
+export function removeMarkdownSync(text: string) {
+  const file = unified()
+    // Take Markdown as input and turn it into MD syntax tree
+    .use(remarkParse, { fragment: true })
+    .use(remarkGfm)
+    .use(strip)
+    .use(remarkStringify)
+    .processSync(text)
+  return String(file)
+}
+
+export { removeMarkdownAsync as removeMarkdown }
+
 const prose = 'prose prose-neutral max-w-none prose-strong:text-gray-plain'
 const proseSm = 'prose-p:text-sm prose-sm'
 const proseTable = 'prose-table:bg-gray-some prose-table:overflow-visible prose-thead:border-b-2 prose-thead:border-black prose-tr:data-[is-header=true]:border-b-2 prose-tr:data-[is-header=true]:border-black prose-tr:even:bg-gray-lower prose-tr:border-b-0 *:prose-th:m-0 *:prose-td:m-0 prose-th:p-4 prose-td:p-4'

package/src/functions/metrics.ts

@@ -1,3 +1,8 @@
+import { escapeCsvValue } from './helpers'
+import { ofetch } from 'ofetch'
+import type { DatasetV2 } from '../types/datasets'
+import type { PaginatedArray } from '../types/api'
+
 export type OrganizationMetrics = {
   downloads: Record<string, number>
   downloadsTotal: number
@@ -114,6 +119,34 @@ export async function getDatasetMetrics(datasetId: string, metricsApi: string):
   }
 }
 
+export async function createDatasetsForOrganizationMetricsUrl(organizationId: string, metricsApi: string, apiBase: string) {
+  let data = 'dataset_title,dataset_id,month,monthly_visit,monthly_download_resource\n'
+
+  // fetch datasets info from organization datasets
+  const datasets: Record<string, Record<string, string>> = {}
+  let datasetsUrl: string | null = `/api/2/datasets/?organization=${organizationId}&page_size=200`
+  while (datasetsUrl) {
+    const body: PaginatedArray<DatasetV2> = await ofetch(datasetsUrl, { baseURL: apiBase, credentials: 'include' })
+    datasetsUrl = body.next_page
+    for (const row of body.data) {
+      datasets[row.id] = { title: row.title }
+    }
+  }
+
+  // fetch datasets metrics for the organization
+  let metricsUrl: string | null = `${metricsApi}/api/datasets/data/?organization_id__exact=${organizationId}&metric_month__sort=desc&page_size=50`
+  while (metricsUrl) {
+    const body: { links: { next: string | null }, data: Array<{ dataset_id: string, metric_month: string, monthly_visit: number, monthly_download_resource: number }> } = await ofetch(metricsUrl)
+    metricsUrl = body.links.next
+    for (const row of body.data) {
+      const datasetTitle = datasets[row.dataset_id]?.title || ''
+      data += `${escapeCsvValue(datasetTitle)},${escapeCsvValue(row.dataset_id)},${escapeCsvValue(row.metric_month)},${row.monthly_visit},${row.monthly_download_resource}\n`
+    }
+  }
+
+  return URL.createObjectURL(new Blob([data], { type: 'text/csv' }))
+}
+
 export async function getDataserviceMetrics(dataserviceId: string, metricsApi: string): Promise<DataserviceMetrics> {
   // Fetching last 12 months
   const response = await fetch(`${metricsApi}/api/dataservices/data/?dataservice_id__exact=${dataserviceId}&metric_month__sort=desc&page_size=12`)

package/src/functions/organizations.ts

@@ -1,7 +1,7 @@
 import type { Component } from 'vue'
 import { RiBankLine, RiBuilding2Line, RiCommunityLine, RiGovernmentLine, RiUserLine } from '@remixicon/vue'
 import { useComponentsConfig } from '../config'
-import type { OrganizationReference } from '../types/organizations'
+import type { Organization, OrganizationReference } from '../types/organizations'
 import { useTranslation } from '../composables/useTranslation'
 
 export const CERTIFIED = 'certified'
@@ -22,11 +22,11 @@ function constructUrl(baseUrl: string, path: string): string {
   return url.toString()
 }
 
-export function isType(organization: OrganizationReference, type: OrganizationTypes) {
+export function isType(organization: Organization | OrganizationReference, type: OrganizationTypes) {
   return hasBadge(organization, type)
 }
 
-export function hasBadge(organization: OrganizationReference, kind: string) {
+export function hasBadge(organization: Organization | OrganizationReference, kind: string) {
   return organization.badges.some(badge => badge.kind === kind)
 }
 
@@ -68,7 +68,7 @@ export function findOrganizationType(searched: OrganizationTypes | UserType) {
   return getOrganizationTypes().find(type => type.type === searched)!
 }
 
-export function getOrganizationType(organization: OrganizationReference): OrganizationTypes {
+export function getOrganizationType(organization: Organization | OrganizationReference): OrganizationTypes {
   if (isType(organization, LOCAL_AUTHORITY)) {
     return LOCAL_AUTHORITY
   }
@@ -86,7 +86,7 @@ export function getOrganizationType(organization: OrganizationReference): Organi
   }
 }
 
-export function isOrganizationCertified(organization: OrganizationReference | null): boolean {
+export function isOrganizationCertified(organization: Organization | OrganizationReference | null): boolean {
   if (!organization) return false
   return hasBadge(organization, CERTIFIED) && (isType(organization, PUBLIC_SERVICE) || isType(organization, LOCAL_AUTHORITY))
 }

package/src/main.ts

@@ -3,23 +3,28 @@ import type { Activity, ActivityKey } from './types/activity.js'
 import type { PaginatedArray } from './types/api.js'
 import type { ContactPoint, ContactPointRole } from './types/contact_point.js'
 import type { Badge, Badges, TranslatedBadge } from './types/badges'
-import type { Dataset, DatasetV2, DatasetV2WithFullObject, NewDataset, Quality, Rel } from './types/datasets'
-import type { NewDataservice, Dataservice } from './types/dataservices'
+import type { DatasetReference, Dataset, DatasetV2, DatasetV2WithFullObject, NewDataset, Quality, Rel } from './types/datasets'
+import type { DataserviceReference, NewDataservice, Dataservice } from './types/dataservices'
 import type { AccessType, AccessAudience, AccessAudienceCondition, AccessAudienceType, WithAccessType, AccessTypeForm } from './types/access_types'
 import type { Frequency, Frequencies } from './types/frequency'
 import type { Granularity, Granularities, SpatialZone } from './types/granularity'
 import type { Harvest } from './types/harvest'
 import type { License } from './types/licenses'
 import type { Member, MemberRole, NewOrganization, Organization, OrganizationOrSuggest, OrganizationReference, OrganizationSuggest } from './types/organizations'
-import type { Owned, OwnedWithId } from './types/owned'
-import type { NewReuse, Reuse, ReuseTopic, ReuseType } from './types/reuses'
+import type { Owned, OwnedWithFullObject, OwnedWithId } from './types/owned'
+import type { Comment, Thread } from './types/discussions'
+import type { Page, PageBloc, ContentBloc, BlocWithTitle, DatasetsListBloc, DataservicesListBloc, ReusesListBloc, LinkInBloc, LinksListBloc, MarkdownBloc, AccordionItemBloc, AccordionListBloc, HeroBloc } from './types/pages'
+import type { Post } from './types/posts'
+import type { ReuseReference, NewReuse, Reuse, ReuseTopic, ReuseType } from './types/reuses'
 import type { RegisteredSchema, Schema, SchemaDetails, SchemaField, SchemaPath, SchemaPublicationMode, SchemaResponseData, SchemaVersion, ValidataError } from './types/schemas'
 import type { TopicV2, TopicElement, TopicElementClass, TopicElementRel } from './types/topics'
-import type { CommunityResource, FileResourceFileType, RemoteResourceFileType, ResourceFileType, ResourceType, Resource } from './types/resources'
+import type { CommunityResource, FileResourceFileType, RemoteResourceFileType, ResourceFileType, ResourceGroup, ResourceType, Resource } from './types/resources'
 import type { Site } from './types/site'
 import type { Weight, WellType } from './types/ui'
 import type { User, UserReference } from './types/users'
 import type { Report, ReportSubject, ReportReason } from './types/reports'
+import type { GlobalSearchConfig, SearchType, SortOption } from './types/search'
+import { getDefaultDatasetConfig, getDefaultDataserviceConfig, getDefaultReuseConfig, getDefaultGlobalSearchConfig, defaultDatasetSortOptions, defaultDataserviceSortOptions, defaultReuseSortOptions } from './types/search'
 
 import ActivityList from './components/ActivityList/ActivityList.vue'
 import UserActivityList from './components/ActivityList/UserActivityList.vue'
@@ -32,8 +37,14 @@ import BrandedButton from './components/BrandedButton.vue'
 import CopyButton from './components/CopyButton.vue'
 import DataserviceCard from './components/DataserviceCard.vue'
 import DatasetCard from './components/DatasetCard.vue'
+import DescriptionListTerm from './components/DescriptionListTerm.vue'
+import DescriptionListDetails from './components/DescriptionListDetails.vue'
+import DiscussionMessageCard from './components/DiscussionMessageCard.vue'
 import DateRangeDetails from './components/DateRangeDetails.vue'
-import DatasetInformationPanel from './components/DatasetInformationPanel.vue'
+import { DatasetInformationSection, DatasetTemporalitySection, DatasetSpatialSection, DatasetSchemaSection, DatasetEmbedSection } from './components/DatasetInformation'
+import LeafletMap from './components/LeafletMap.vue'
+import LicenseBadge from './components/LicenseBadge.vue'
+import Tag from './components/Tag.vue'
 import DatasetQuality from './components/DatasetQuality.vue'
 import DatasetQualityInline from './components/DatasetQualityInline.vue'
 import DatasetQualityItem from './components/DatasetQualityItem.vue'
@@ -51,11 +62,18 @@ import OwnerTypeIcon from './components/OwnerTypeIcon.vue'
 import PaddedContainer from './components/PaddedContainer.vue'
 import Pagination from './components/Pagination.vue'
 import Placeholder from './components/Placeholder.vue'
+import RadioGroup from './components/RadioGroup.vue'
+import RadioInput from './components/RadioInput.vue'
+import PostCard from './components/PostCard.vue'
 import ReadMore from './components/ReadMore.vue'
 import ResourceAccordion from './components/ResourceAccordion/ResourceAccordion.vue'
 import ResourceIcon from './components/ResourceAccordion/ResourceIcon.vue'
+import ResourceExplorer from './components/ResourceExplorer/ResourceExplorer.vue'
+import ResourceExplorerSidebar from './components/ResourceExplorer/ResourceExplorerSidebar.vue'
+import ResourceExplorerViewer from './components/ResourceExplorer/ResourceExplorerViewer.vue'
 import Swagger from './components/ResourceAccordion/Swagger.client.vue'
 import ReuseCard from './components/ReuseCard.vue'
+import ReuseHorizontalCard from './components/ReuseHorizontalCard.vue'
 import ReuseDetails from './components/ReuseDetails.vue'
 import SchemaCard from './components/SchemaCard.vue'
 import SimpleBanner from './components/SimpleBanner.vue'
@@ -68,10 +86,17 @@ import TabPanel from './components/Tabs/TabPanel.vue'
 import TabPanels from './components/Tabs/TabPanels.vue'
 import Tooltip from './components/Tooltip.vue'
 import Toggletip from './components/Toggletip.vue'
+import TopicCard from './components/TopicCard.vue'
 import TranslationT from './components/TranslationT.vue'
+import GlobalSearch from './components/Search/GlobalSearch.vue'
+import SearchInput from './components/Search/SearchInput.vue'
+import SearchableSelect from './components/Form/SearchableSelect.vue'
+import SelectGroup from './components/Form/SelectGroup.vue'
 import type { UseFetchFunction } from './functions/api.types'
 import { configKey, useComponentsConfig, type PluginConfig } from './config.js'
 
+export { Toaster, toast } from 'vue-sonner'
+
 export * from './composables/useActiveDescendant'
 export * from './composables/useMetrics'
 export * from './composables/useReuseType'
@@ -80,6 +105,7 @@ export * from './composables/useTranslation'
 export * from './functions/activities'
 export * from './functions/datasets'
 export * from './functions/dates'
+export * from './functions/description'
 export * from './functions/helpers'
 export * from './functions/markdown'
 export * from './functions/matomo'
@@ -95,6 +121,9 @@ export * from './functions/users'
 export * from './types/access_types'
 
 export type {
+  GlobalSearchConfig,
+  SearchType,
+  SortOption,
   UseFetchFunction,
   AccessType,
   AccessAudience,
@@ -109,10 +138,13 @@ export type {
   CommunityResource,
   ContactPoint,
   ContactPointRole,
+  DatasetReference,
   Dataset,
   DatasetV2,
   DatasetV2WithFullObject,
+  DataserviceReference,
   Dataservice,
+  Comment,
   NewDataservice,
   FileResourceFileType,
   Frequency,
@@ -131,8 +163,24 @@ export type {
   OrganizationSuggest,
   OrganizationOrSuggest,
   Owned,
+  OwnedWithFullObject,
   OwnedWithId,
+  Page,
+  PageBloc,
+  ContentBloc,
+  BlocWithTitle,
+  DatasetsListBloc,
+  DataservicesListBloc,
+  ReusesListBloc,
+  LinkInBloc,
+  LinksListBloc,
+  MarkdownBloc,
+  AccordionItemBloc,
+  AccordionListBloc,
+  HeroBloc,
   PaginatedArray,
+  Post,
+  Thread,
   Quality,
   RegisteredSchema,
   Rel,
@@ -142,7 +190,9 @@ export type {
   ReportReason,
   Resource,
   ResourceFileType,
+  ResourceGroup,
   ResourceType,
+  ReuseReference,
   Reuse,
   ReuseTopic,
   ReuseType,
@@ -167,6 +217,16 @@ export type {
   WellType,
 }
 
+export {
+  getDefaultDatasetConfig,
+  getDefaultDataserviceConfig,
+  getDefaultReuseConfig,
+  getDefaultGlobalSearchConfig,
+  defaultDatasetSortOptions,
+  defaultDataserviceSortOptions,
+  defaultReuseSortOptions,
+}
+
 // Vue Plugin
 const datagouv: Plugin<PluginConfig> = {
   async install(app: App, options) {
@@ -191,7 +251,14 @@ export {
   CopyButton,
   DataserviceCard,
   DatasetCard,
-  DatasetInformationPanel,
+  DatasetInformationSection,
+  DatasetTemporalitySection,
+  DatasetSpatialSection,
+  DatasetSchemaSection,
+  DatasetEmbedSection,
+  DescriptionListTerm,
+  DescriptionListDetails,
+  DiscussionMessageCard,
   DatasetQuality,
   DatasetQualityInline,
   DatasetQualityItem,
@@ -200,7 +267,10 @@ export {
   DateRangeDetails,
   ExtraAccordion,
   LabelTag,
+  LeafletMap,
+  LicenseBadge,
   LoadingBlock,
+  Tag,
   MarkdownViewer,
   OrganizationCard,
   OrganizationLogo,
@@ -210,11 +280,18 @@ export {
   PaddedContainer,
   Pagination,
   Placeholder,
+  PostCard,
+  RadioGroup,
+  RadioInput,
   ReadMore,
   ResourceAccordion,
+  ResourceExplorer,
+  ResourceExplorerSidebar,
+  ResourceExplorerViewer,
   ResourceIcon,
   ReuseCard,
   ReuseDetails,
+  ReuseHorizontalCard,
   SchemaCard,
   SimpleBanner,
   SmallChart,
@@ -227,6 +304,11 @@ export {
   TabPanels,
   Tooltip,
   Toggletip,
+  TopicCard,
   TranslationT,
   UserActivityList,
+  GlobalSearch,
+  SearchInput,
+  SearchableSelect,
+  SelectGroup,
 }

package/src/types/dataservices.ts

@@ -2,19 +2,21 @@ import type { Harvest } from './harvest'
 import type { Owned, OwnedWithId } from './owned'
 import type { ContactPoint } from './contact_point'
 import type { WithAccessType } from './access_types'
+import type { DatasetReference } from './datasets'
+
+export type DataserviceReference = {
+  class: 'Dataservice'
+  id: string
+  title: string
+  self_api_url: string
+  self_web_url: string
+}
 
 export type BaseDataservice = Owned & WithAccessType & {
   acronym: string
   availability: number | null
   base_api_url: string | null
-  datasets: Array<{
-    class: string
-    id: string
-    acronym: string
-    page: string
-    title: string
-    uri: string
-  }>
+  datasets: Array<DatasetReference>
   description: string
   machine_documentation_url: string | null
   technical_documentation_url: string | null
@@ -22,7 +24,7 @@ export type BaseDataservice = Owned & WithAccessType & {
   license: string | null
   private: boolean
   rate_limiting: string
-  title: string
+  title: DataserviceReference['title']
   contact_points: Array<ContactPoint>
 }
 
@@ -50,7 +52,7 @@ export type Dataservice = Owned & WithAccessType & {
   extras: Record<string, unknown>
   format: string
   harvest: Harvest
-  id: string
+  id: DataserviceReference['id']
   license: string | null
   metadata_modified_at: string
   metrics: {
@@ -63,8 +65,8 @@ export type Dataservice = Owned & WithAccessType & {
   permissions: { edit: boolean, delete: boolean }
   private: boolean
   rate_limiting: string
-  self_api_url: string
-  self_web_url: string
+  self_api_url: DataserviceReference['self_api_url']
+  self_web_url: DataserviceReference['self_web_url']
   slug: string
   tags: Array<string>
   title: string