geonetwork-ui 2.4.0-dev.e97caaf2 → 2.4.0-dev.f5019723

package/src/libs/ui/map/src/lib/components/feature-detail/feature-detail.component.ts

@@ -1,6 +1,6 @@
-import { Component, ChangeDetectionStrategy, Input } from '@angular/core'
-import Feature from 'ol/Feature'
-import { Geometry } from 'ol/geom'
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
+import { CommonModule } from '@angular/common'
+import type { Feature } from 'geojson'
 
 const geometryKeys = ['geometry', 'the_geom']
 
@@ -9,12 +9,15 @@ const geometryKeys = ['geometry', 'the_geom']
   templateUrl: './feature-detail.component.html',
   styleUrls: ['./feature-detail.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [CommonModule],
 })
 export class FeatureDetailComponent {
-  @Input() feature: Feature<Geometry>
+  @Input() feature: Feature
 
   get properties() {
-    return Object.keys(this.feature.getProperties()).filter(
+    if (!this.feature) return []
+    return Object.keys(this.feature.properties).filter(
       (prop) => !geometryKeys.includes(prop)
     )
   }

package/src/libs/ui/map/src/lib/components/map-container/map-container.component.ts

@@ -0,0 +1,203 @@
+import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  EventEmitter,
+  Inject,
+  Input,
+  OnChanges,
+  Output,
+  SimpleChanges,
+  ViewChild,
+} from '@angular/core'
+import { fromEvent, merge, Observable, of, timer } from 'rxjs'
+import { delay, map, startWith, switchMap } from 'rxjs/operators'
+import { CommonModule } from '@angular/common'
+import { MatIconModule } from '@angular/material/icon'
+import { TranslateModule } from '@ngx-translate/core'
+import {
+  computeMapContextDiff,
+  Extent,
+  FeaturesClickEvent,
+  FeaturesClickEventType,
+  FeaturesHoverEvent,
+  FeaturesHoverEventType,
+  MapClickEvent,
+  MapClickEventType,
+  MapContext,
+  MapContextLayer,
+  MapContextLayerXyz,
+  MapContextView,
+} from '@geospatial-sdk/core'
+import {
+  applyContextDiffToMap,
+  createMapFromContext,
+  listen,
+} from '@geospatial-sdk/openlayers'
+import type OlMap from 'ol/Map'
+import type { Feature } from 'geojson'
+import {
+  BASEMAP_LAYERS,
+  DO_NOT_USE_DEFAULT_BASEMAP,
+  MAP_VIEW_CONSTRAINTS,
+} from './map-settings.token'
+
+const DEFAULT_BASEMAP_LAYER: MapContextLayerXyz = {
+  type: 'xyz',
+  url: `https://{a-c}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}.png`,
+  attributions: `<span>© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, © <a href="https://carto.com/">Carto</a></span>`,
+}
+
+const DEFAULT_VIEW: MapContextView = {
+  center: [0, 15],
+  zoom: 2,
+}
+
+@Component({
+  selector: 'gn-ui-map-container',
+  templateUrl: './map-container.component.html',
+  styleUrls: ['./map-container.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [CommonModule, MatIconModule, TranslateModule],
+})
+export class MapContainerComponent implements AfterViewInit, OnChanges {
+  @Input() context: MapContext | null
+
+  // these events only get registered on the map if they are used
+  _featuresClick: EventEmitter<Feature[]>
+  @Output() get featuresClick() {
+    if (!this._featuresClick) {
+      this.openlayersMap.then((olMap) => {
+        listen(
+          olMap,
+          FeaturesClickEventType,
+          ({ features }: FeaturesClickEvent) =>
+            this._featuresClick.emit(features)
+        )
+      })
+      this._featuresClick = new EventEmitter<Feature[]>()
+    }
+    return this._featuresClick
+  }
+  _featuresHover: EventEmitter<Feature[]>
+  @Output() get featuresHover() {
+    if (!this._featuresHover) {
+      this.openlayersMap.then((olMap) => {
+        listen(
+          olMap,
+          FeaturesHoverEventType,
+          ({ features }: FeaturesHoverEvent) =>
+            this._featuresHover.emit(features)
+        )
+      })
+      this._featuresHover = new EventEmitter<Feature[]>()
+    }
+    return this._featuresHover
+  }
+  _mapClick: EventEmitter<[number, number]>
+  @Output() get mapClick() {
+    if (!this._mapClick) {
+      this.openlayersMap.then((olMap) => {
+        listen(olMap, MapClickEventType, ({ coordinate }: MapClickEvent) =>
+          this._mapClick.emit(coordinate)
+        )
+      })
+      this._mapClick = new EventEmitter<[number, number]>()
+    }
+    return this._mapClick
+  }
+
+  @ViewChild('map') container: ElementRef
+  displayMessage$: Observable<boolean>
+  olMap: OlMap
+
+  constructor(
+    @Inject(DO_NOT_USE_DEFAULT_BASEMAP) private doNotUseDefaultBasemap: boolean,
+    @Inject(BASEMAP_LAYERS) private basemapLayers: MapContextLayer[],
+    @Inject(MAP_VIEW_CONSTRAINTS)
+    private mapViewConstraints: {
+      maxZoom?: number
+      maxExtent?: Extent
+    }
+  ) {}
+
+  private olMapResolver
+  openlayersMap = new Promise<OlMap>((resolve) => {
+    this.olMapResolver = resolve
+  })
+
+  async ngAfterViewInit() {
+    this.olMap = await createMapFromContext(
+      this.processContext(this.context),
+      this.container.nativeElement
+    )
+    this.displayMessage$ = merge(
+      fromEvent(this.olMap, 'mapmuted').pipe(map(() => true)),
+      fromEvent(this.olMap, 'movestart').pipe(map(() => false)),
+      fromEvent(this.olMap, 'singleclick').pipe(map(() => false))
+    ).pipe(
+      switchMap((muted) =>
+        muted
+          ? timer(2000).pipe(
+              map(() => false),
+              startWith(true),
+              delay(400)
+            )
+          : of(false)
+      )
+    )
+    this.olMapResolver(this.olMap)
+  }
+
+  async ngOnChanges(changes: SimpleChanges) {
+    if ('context' in changes && !changes['context'].isFirstChange()) {
+      const diff = computeMapContextDiff(
+        this.processContext(changes['context'].currentValue),
+        this.processContext(changes['context'].previousValue)
+      )
+      await applyContextDiffToMap(this.olMap, diff)
+    }
+  }
+
+  // This will apply basemap layers & view constraints
+  processContext(context: MapContext): MapContext {
+    const processed = context
+      ? { ...context, view: context.view ?? DEFAULT_VIEW }
+      : { layers: [], view: DEFAULT_VIEW }
+    if (this.basemapLayers.length) {
+      processed.layers = [...this.basemapLayers, ...processed.layers]
+    }
+    if (!this.doNotUseDefaultBasemap) {
+      processed.layers = [DEFAULT_BASEMAP_LAYER, ...processed.layers]
+    }
+    if (this.mapViewConstraints.maxZoom) {
+      processed.view = {
+        maxZoom: this.mapViewConstraints.maxZoom,
+        ...processed.view,
+      }
+    }
+    if (this.mapViewConstraints.maxExtent) {
+      processed.view = {
+        maxExtent: this.mapViewConstraints.maxExtent,
+        ...processed.view,
+      }
+    }
+    if (
+      processed.view &&
+      !('zoom' in processed.view) &&
+      !('center' in processed.view)
+    ) {
+      if (this.mapViewConstraints.maxExtent) {
+        processed.view = {
+          extent: this.mapViewConstraints.maxExtent,
+          ...processed.view,
+        }
+      } else {
+        processed.view = { ...DEFAULT_VIEW, ...processed.view }
+      }
+    }
+    return processed
+  }
+}

package/src/libs/ui/map/src/lib/components/map-container/map-settings.token.ts

@@ -0,0 +1,23 @@
+import { InjectionToken } from '@angular/core'
+import { Extent, MapContextLayer } from '@geospatial-sdk/core'
+
+export const DO_NOT_USE_DEFAULT_BASEMAP = new InjectionToken(
+  'doNotUseDefaultBasemap',
+  { factory: () => false }
+)
+export const BASEMAP_LAYERS = new InjectionToken<MapContextLayer[]>(
+  'basemapLayers',
+  { factory: () => [] }
+)
+export const MAP_VIEW_CONSTRAINTS = new InjectionToken<{
+  maxZoom?: number
+  maxExtent?: Extent
+}>('mapViewConstraints', {
+  factory: () => ({}),
+})
+export const VECTOR_STYLE_DEFAULT = new InjectionToken('vectorStyleDefault', {
+  factory: () => ({
+    fill: { color: 'rgba(255, 255, 255, 0.2)' },
+    stroke: { color: '#ffcc33', width: 2 },
+  }),
+})

package/src/libs/ui/map/src/lib/map-utils.ts

@@ -0,0 +1,54 @@
+import Collection from 'ol/Collection'
+import { defaults, DragPan, Interaction, MouseWheelZoom } from 'ol/interaction'
+import MapBrowserEvent from 'ol/MapBrowserEvent'
+import {
+  mouseOnly,
+  noModifierKeys,
+  platformModifierKeyOnly,
+  primaryAction,
+} from 'ol/events/condition'
+
+export function prioritizePageScroll(interactions: Collection<Interaction>) {
+  interactions.clear()
+  interactions.extend(
+    defaults({
+      // remove rotate interactions
+      altShiftDragRotate: false,
+      pinchRotate: false,
+      // replace drag and zoom interactions
+      dragPan: false,
+      mouseWheelZoom: false,
+    })
+      .extend([
+        new DragPan({
+          condition: dragPanCondition,
+        }),
+        new MouseWheelZoom({
+          condition: mouseWheelZoomCondition,
+        }),
+      ])
+      .getArray()
+  )
+}
+
+export function dragPanCondition(
+  this: DragPan,
+  event: MapBrowserEvent<PointerEvent>
+) {
+  const dragPanCondition = this.getPointerCount() === 2 || mouseOnly(event)
+  if (!dragPanCondition) {
+    this.getMap().dispatchEvent('mapmuted')
+  }
+  // combine the condition with the default DragPan conditions
+  return dragPanCondition && noModifierKeys(event) && primaryAction(event)
+}
+
+export function mouseWheelZoomCondition(
+  this: MouseWheelZoom,
+  event: MapBrowserEvent<UIEvent>
+) {
+  if (!platformModifierKeyOnly(event) && event.type === 'wheel') {
+    this.getMap().dispatchEvent('mapmuted')
+  }
+  return platformModifierKeyOnly(event)
+}

package/src/libs/ui/search/src/lib/facets/fixtures/aggregations-model-response.ts

@@ -1,6 +1,6 @@
 import { ModelBlock, ModelItem } from '../facets.model'
 
-export const BLOCK_MODEL_FIXTURE: ModelBlock = {
+export const blockModelFixture = (): ModelBlock => ({
   key: 'tag',
   items: [
     { value: 'Hungary', count: 20, path: ['tag', 'Hungary'] },
@@ -31,8 +31,9 @@ export const BLOCK_MODEL_FIXTURE: ModelBlock = {
   more: true,
   includeFilter: true,
   excludeFilter: false,
-}
-export const EMPTY_BLOCK_MODEL_FIXTURE: ModelBlock = {
+})
+
+export const emptyBlockModelFixture = (): ModelBlock => ({
   key: 'emptytag',
   items: [],
   path: ['emptytag'],
@@ -41,12 +42,12 @@ export const EMPTY_BLOCK_MODEL_FIXTURE: ModelBlock = {
   more: true,
   includeFilter: false,
   excludeFilter: false,
-}
+})
 
-export const FACET_ITEM_FIXTURE: ModelItem = {
+export const itemModelFixture = (): ModelItem => ({
   path: ['tag.default', 'land use'],
   value: 'land use',
   count: 500,
   selected: true,
   inverted: false,
-}
+})

package/src/libs/ui/search/src/lib/results-table/results-table.component.html

@@ -27,6 +27,7 @@
   <!-- TITLE COLUMN -->
   <gn-ui-interactive-table-column
     [sortable]="true"
+    [grow]="true"
     [activeSort]="isSortedBy('resourceTitleObject.default.keyword')"
     (sortChange)="setSortBy('resourceTitleObject.default.keyword', $event)"
   >
@@ -34,11 +35,12 @@
       <span translate>record.metadata.title</span>
     </ng-template>
     <ng-template #cell let-item>
-      <div class="flex flex-row items-center gap-2 max-w-full">
+      <div class="flex flex-row items-center gap-2 max-w-full font-semibold">
         <span class="overflow-hidden text-ellipsis">{{ item.title }}</span>
         <gn-ui-badge
           *ngIf="hasDraft(item)"
-          [style.--gn-ui-badge-padding]="'0.4em 0.6em'"
+          [style.--gn-ui-badge-padding]="'0.2em 0.6em'"
+          [style.--gn-ui-badge-text-size]="'12px'"
           [style.--gn-ui-badge-text-color]="'#3d2006'"
           [style.--gn-ui-badge-background-color]="'#ffbc7b'"
           [style.--gn-ui-badge-rounded]="'4px'"
@@ -56,25 +58,25 @@
     </ng-template>
     <ng-template #cell let-item>
       <div
-        class="flex justify-start items-center gap-2"
+        class="flex justify-start items-center gap-2 font-medium"
         *ngIf="getRecordFormats(item) as formats"
         [title]="formats.join(', ')"
       >
         <span
-          class="badge-btn min-w-[45px] text-sm text-white px-2 shrink-0"
+          class="badge-btn min-w-[45px] text-xs text-white px-2 shrink-0"
           [style.background-color]="getBadgeColor(formats[0])"
           *ngIf="formats[0]"
         >
           {{ formats[0] }}
         </span>
         <span
-          class="badge-btn min-w-[45px] text-sm text-white px-2 shrink-0"
+          class="badge-btn min-w-[45px] text-xs text-white px-2 shrink-0"
           [style.background-color]="getBadgeColor(formats[1])"
           *ngIf="formats[1]"
         >
           {{ formats[1] }}
         </span>
-        <div class="shrink-0" *ngIf="formats.slice(2).length > 0">
+        <div class="shrink-0 text-xs" *ngIf="formats.slice(2).length > 0">
           <span>+{{ formats.slice(2).length }}</span>
         </div>
       </div>
@@ -93,7 +95,7 @@
     </ng-template>
     <ng-template #cell let-item>
       <mat-icon class="material-symbols-outlined">person</mat-icon>
-      <span>{{ formatUserInfo(item.extras?.ownerInfo) }}</span>
+      <span class="text-xs">{{ formatUserInfo(item.extras?.ownerInfo) }}</span>
     </ng-template>
   </gn-ui-interactive-table-column>
 
@@ -103,7 +105,14 @@
       <span translate>record.metadata.status</span>
     </ng-template>
     <ng-template #cell let-item>
-      {{ item.status }}
+      <span class="text-xs">
+        {{
+          (isUnsavedDraft(item)
+            ? 'record.metadata.status.notPublished'
+            : 'record.metadata.status.published'
+          ) | translate
+        }}</span
+      >
     </ng-template>
   </gn-ui-interactive-table-column>
 
@@ -117,7 +126,9 @@
       <span translate>record.metadata.updatedOn</span>
     </ng-template>
     <ng-template #cell let-item>
-      {{ dateToString(item.recordUpdated) }}
+      <div class="flex justify-center w-full text-xs">
+        {{ isUnsavedDraft(item) ? '-' : dateToString(item.recordUpdated) }}
+      </div>
     </ng-template>
   </gn-ui-interactive-table-column>
 

package/src/libs/ui/search/src/lib/results-table/results-table.component.ts

@@ -42,6 +42,7 @@ export class ResultsTableComponent {
   @Input() sortOrder: SortByField = null
   @Input() hasDraft: (record: CatalogRecord) => boolean = () => false
   @Input() canDuplicate: (record: CatalogRecord) => boolean = () => true
+  @Input() isUnsavedDraft: (record: CatalogRecord) => boolean = () => true
   @Input() canDelete: (record: CatalogRecord) => boolean = () => true
 
   // emits the column (field) as well as the order
@@ -62,17 +63,15 @@ export class ResultsTableComponent {
     })
   }
 
-  getStatus(isPublishedToAll: boolean | unknown) {
-    return isPublishedToAll ? 'published' : 'not published'
-  }
-
   getRecordFormats(record: CatalogRecord): FileFormat[] {
-    if (record.kind === 'service' || !('distributions' in record)) {
+    if (record.kind === 'service' || !('onlineResources' in record)) {
       return []
     }
     const formats = Array.from(
       new Set(
-        record.distributions.map((distribution) => getFileFormat(distribution))
+        record.onlineResources.map((onlineResource) =>
+          getFileFormat(onlineResource)
+        )
       )
     ).filter((format) => !!format)
     formats.sort((a, b) => getFormatPriority(b) - getFormatPriority(a))

package/src/libs/util/app-config/src/index.ts

@@ -1,3 +1,4 @@
 export * from './lib/app-config'
 export * from './lib/fixtures'
 export * from './lib/model'
+export * from './lib/map-layers'

package/src/libs/util/app-config/src/lib/fixtures.ts

@@ -1,6 +1,6 @@
 import { MapConfig } from './model'
 
-export const CONFIG_OK = `
+export const okAppConfigFixture = () => `
 [global]
 geonetwork4_api_url = "/geonetwork/srv/api"
 proxy_path = "/proxy/?url="
@@ -63,9 +63,9 @@ my.sample.text = "Un bon exemple de texte."
 "my.quoted.text" = 'du texte entre guillements.'
 `
 
-export const CONFIG_WITH_TRANSLATIONS = CONFIG_OK
+export const appConfigWithTranslationFixture = () => okAppConfigFixture()
 
-export const CONFIG_MINIMAL = `
+export const minimalAppConfigFixture = () => `
 [global]
 geonetwork4_api_url = "/geonetwork/srv/api"
 proxy_path = "/proxy/?url="
@@ -77,7 +77,7 @@ main_color = "#212029" # All-purpose text color
 background_color = "#fdfbff"
 `
 
-export const MAP_CONFIG_FIXTURE: MapConfig = {
+export const mapConfigFixture = (): MapConfig => ({
   MAX_ZOOM: 10,
   MAX_EXTENT: [-418263.418776, 5251529.591305, 961272.067714, 6706890.609855],
   DO_NOT_USE_DEFAULT_BASEMAP: false,
@@ -101,15 +101,15 @@ export const MAP_CONFIG_FIXTURE: MapConfig = {
       NAME: 'some_layername',
     },
   ],
-}
+})
 
-export const CONFIG_MALFORMED = `
+export const malformedConfigFixture = () => `
 {
   "I thought": "we were still doing json"
 }
 `
 
-export const CONFIG_MISSING_MANDATORY = `
+export const missingMandatoryConfigFixture = () => `
 [theme]
 primary_color = "#093564"
 secondary_color = "#c2e9dc"
@@ -117,7 +117,7 @@ background_color = "#fdfbff"
 main_font = 'sans-serif'
 `
 
-export const CONFIG_WRONG_LANGUAGE_CODE = `
+export const wrongLanguageCodeConfigFixture = () => `
 [global]
 geonetwork4_api_url = "/geonetwork/srv/api"
 proxy_path = "/proxy/?url="
@@ -132,7 +132,7 @@ main_color = "#212029" # All-purpose text color
 background_color = "#fdfbff"
 `
 
-export const CONFIG_UNRECOGNIZED_KEYS = `
+export const unrecognizedKeysConfigFixture = () => `
 [global]
 geonetwork4_api_url = "/geonetwork/srv/api"
 proxy_path = "/proxy/?url="

package/src/libs/util/app-config/src/lib/map-layers.ts

@@ -0,0 +1,31 @@
+import { LayerConfig } from './model'
+import { MapContextLayer } from '@geospatial-sdk/core'
+
+export function getMapContextLayerFromConfig(
+  config: LayerConfig
+): MapContextLayer {
+  switch (config.TYPE) {
+    case 'wms':
+      return {
+        type: 'wms',
+        url: config.URL,
+        name: config.NAME,
+      }
+    case 'wfs':
+      return {
+        type: 'wfs',
+        url: config.URL,
+        featureType: config.NAME,
+      }
+    case 'xyz':
+      return {
+        type: config.TYPE,
+        url: config.URL,
+      }
+    case 'geojson':
+      return {
+        type: config.TYPE,
+        ...(config.DATA ? { data: config.DATA } : { url: config.URL }),
+      }
+  }
+}

package/src/libs/util/shared/src/lib/links/link-classifier.service.ts

@@ -1,6 +1,7 @@
 import { Injectable } from '@angular/core'
-import { DatasetDistribution } from '../../../../../../libs/common/domain/src/lib/model/record'
+import { DatasetOnlineResource } from '../../../../../../libs/common/domain/src/lib/model/record'
 import { getFileFormat } from './link-utils'
+
 export enum LinkUsage {
   API = 'api',
   MAP_API = 'mapapi',
@@ -15,7 +16,7 @@ export enum LinkUsage {
   providedIn: 'root',
 })
 export class LinkClassifierService {
-  getUsagesForLink(link: DatasetDistribution): LinkUsage[] {
+  getUsagesForLink(link: DatasetOnlineResource): LinkUsage[] {
     switch (link.type) {
       case 'service': {
         switch (link.accessServiceProtocol) {
@@ -51,7 +52,7 @@ export class LinkClassifierService {
     }
   }
 
-  hasUsage(link: DatasetDistribution, usage: LinkUsage) {
+  hasUsage(link: DatasetOnlineResource, usage: LinkUsage) {
     return this.getUsagesForLink(link).indexOf(usage) > -1
   }
 }

package/src/libs/util/shared/src/lib/links/link-utils.ts

@@ -1,5 +1,5 @@
 import { marker } from '@biesbjerg/ngx-translate-extract-marker'
-import { DatasetDistribution } from '../../../../../../libs/common/domain/src/lib/model/record'
+import { DatasetOnlineResource } from '../../../../../../libs/common/domain/src/lib/model/record'
 
 marker('downloads.wfs.featuretype.not.found')
 
@@ -131,7 +131,7 @@ export function getFormatPriority(linkFormat: FileFormat): number {
   return 0
 }
 
-export function getLinkPriority(link: DatasetDistribution): number {
+export function getLinkPriority(link: DatasetOnlineResource): number {
   return getFormatPriority(getFileFormat(link))
 }
 
@@ -155,7 +155,7 @@ export function getFileFormatFromServiceOutput(
   return null
 }
 
-export function getFileFormat(link: DatasetDistribution): FileFormat {
+export function getFileFormat(link: DatasetOnlineResource): FileFormat {
   if ('mimeType' in link) {
     const mimeTypeFormat = mimeTypeToFormat(link.mimeType)
     if (mimeTypeFormat !== null) {
@@ -172,7 +172,7 @@ export function getFileFormat(link: DatasetDistribution): FileFormat {
 }
 
 export function isFormatInQueryParam(
-  link: DatasetDistribution,
+  link: DatasetOnlineResource,
   alias: string
 ): boolean {
   const queryParams = link.url.searchParams
@@ -194,7 +194,7 @@ export function mimeTypeToFormat(mimeType: string): FileFormat {
 }
 
 export function checkFileFormat(
-  link: DatasetDistribution,
+  link: DatasetOnlineResource,
   format: FileFormat
 ): boolean {
   return (
@@ -214,7 +214,7 @@ export function getBadgeColor(linkFormat: FileFormat): string {
   return 'var(--color-gray-700)' // Default color ?
 }
 
-export function getLinkLabel(link: DatasetDistribution): string {
+export function getLinkLabel(link: DatasetOnlineResource): string {
   let format = ''
   switch (link.type) {
     case 'service':

package/src/libs/util/shared/src/lib/services/theme.service.ts

@@ -109,6 +109,7 @@ export class ThemeService {
     applyColor('gray-700', scale(0.7))
     applyColor('gray-800', scale(0.8))
     applyColor('gray-900', scale(0.9))
+    applyColor('gray-950', scale(0.95))
 
     if (mainFont) {
       document.documentElement.style.setProperty(`--font-family-main`, mainFont)

package/src/libs/util/shared/src/lib/utils/bytes-convert.ts

@@ -1,3 +1,6 @@
-export function megabytesToBytes(megabytes) {
+export function megabytesToBytes(megabytes: number) {
   return megabytes * 1048576
 }
+export function bytesToMegabytes(bytes: number) {
+  return bytes / 1048576
+}

package/tailwind.base.config.js

@@ -30,6 +30,7 @@ module.exports = {
           700: 'var(--color-gray-700)',
           800: 'var(--color-gray-800)',
           900: 'var(--color-gray-900)',
+          950: 'var(--color-gray-950)',
         },
         orange: {
           50: '#fff8f1',