Merge pull request #450 from IQSS/feature/446-file-card

Feature/446 file card

packages/design-system/src/lib/assets/styles/design-tokens/colors.module.scss

@@ -12,6 +12,10 @@ $dv-warning-box-color: #fcf8e3;
 $dv-info-box-color: #d9edf7;
 $dv-info-border-color: #428bca;
 
+$dv-collection-border-color: #c55b28;
+$dv-dataset-border-color: #428BCA;
+$dv-file-border-color: #808080;
+
 // Text colors
 $dv-text-color: #333;
 $dv-subtext-color: #767676;

src/files/domain/models/FilePreview.ts

@@ -12,4 +12,8 @@ export interface FilePreview {
   ingest: FileIngest
   metadata: FileMetadata
   permissions: FilePermissions
+  releaseOrCreateDate?: Date
+  someDatasetVersionHasBeenReleased?: boolean
+  datasetPersistentId?: string
+  datasetName?: string
 }

src/sections/collection/datasets-list/file-card/FileCard.module.scss

@@ -0,0 +1,75 @@
+@use 'sass:color';
+@import "node_modules/@iqss/dataverse-design-system/src/lib/assets/styles/design-tokens/colors.module";
+@import "node_modules/@iqss/dataverse-design-system/src/lib/assets/styles/design-tokens/typography.module";
+
+.container {
+  margin: 6px 0;
+  padding: 4px 10px;
+  border: 1px solid $dv-file-border-color;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+}
+
+.title {
+  display: flex;gap: 8px;
+}
+
+.icon {
+  margin-top: 2px;
+  font-size: 1.3em;
+  line-height: 1.1;
+
+  > div >span {
+    margin-right: 0;
+  }
+}
+
+.thumbnail {
+  width: 48px;
+  margin: 8px 12px 6px 0;
+  font-size: 2.8em;
+
+  img {
+      vertical-align: top;
+  }
+}
+
+.info {
+  display: flex;
+  color: $dv-subtext-color;
+}
+
+.card-info-container {
+  display: flex;
+  font-size: $dv-font-size-sm;
+}
+
+.description {
+  display: -webkit-box; -webkit-line-clamp: 3;  line-clamp: 3; -webkit-box-orient: vertical;
+  flex-direction: column;
+  width: 100%;
+  overflow: hidden;
+  color: black;
+}
+
+.date {
+  color: $dv-subtext-color;
+
+}
+
+.citation-box {
+  margin-top: 4px;
+  margin-bottom: .5em;
+  padding: 4px;
+  background-color: color.adjust($dv-primary-color, $lightness: 51%) ;
+}
+
+.citation-box-deaccessioned {
+  margin-top: 4px;
+  margin-bottom: .5em;
+  padding: 4px;
+  background-color: color.adjust($dv-danger-box-color, $lightness: 6%);
+}

src/sections/collection/datasets-list/file-card/FileCard.tsx

@@ -0,0 +1,25 @@
+import styles from './FileCard.module.scss'
+import { FileCardHeader } from './FileCardHeader'
+import { FileCardThumbnail } from './FileCardThumbnail'
+import { FileCardInfo } from './FileCardInfo'
+import { FilePreview } from '../../../../files/domain/models/FilePreview'
+import { Stack } from '@iqss/dataverse-design-system'
+
+interface FileCardProps {
+  filePreview: FilePreview
+  persistentId: string
+}
+
+export function FileCard({ filePreview, persistentId }: FileCardProps) {
+  return (
+    <article className={styles.container}>
+      <FileCardHeader filePreview={filePreview} />
+      <div className={styles.info}>
+        <Stack direction={'horizontal'} gap={3}>
+          <FileCardThumbnail filePreview={filePreview} />
+          <FileCardInfo filePreview={filePreview} persistentId={persistentId} />
+        </Stack>
+      </div>
+    </article>
+  )
+}

src/sections/collection/datasets-list/file-card/FileCardHeader.tsx

@@ -0,0 +1,39 @@
+import styles from './FileCard.module.scss'
+import { LinkToPage } from '../../../shared/link-to-page/LinkToPage'
+import { Route } from '../../../Route.enum'
+import { FilePreview } from '../../../../files/domain/models/FilePreview'
+import { DatasetLabels } from '../../../dataset/dataset-labels/DatasetLabels'
+import { FileCardIcon } from './FileCardIcon'
+import { FileType } from '../../../../files/domain/models/FileMetadata'
+import { FileCardHelper } from './FileCardHelper'
+
+interface FileCardHeaderProps {
+  filePreview: FilePreview
+}
+
+export function FileCardHeader({ filePreview }: FileCardHeaderProps) {
+  const iconFileType = new FileType('text/tab-separated-values', 'Comma Separated Values')
+  return (
+    <div className={styles.header}>
+      <div className={styles.title}>
+        <LinkToPage
+          page={Route.FILES}
+          searchParams={FileCardHelper.getFileSearchParams(
+            filePreview.id,
+            filePreview.datasetPublishingStatus
+          )}>
+          {filePreview.name}
+        </LinkToPage>
+        <DatasetLabels
+          labels={FileCardHelper.getDatasetLabels(
+            filePreview.datasetPublishingStatus,
+            filePreview.someDatasetVersionHasBeenReleased
+          )}
+        />
+      </div>
+      <div className={styles.icon}>
+        <FileCardIcon type={iconFileType} />
+      </div>
+    </div>
+  )
+}

src/sections/collection/datasets-list/file-card/FileCardHelper.ts

@@ -0,0 +1,48 @@
+import {
+  DatasetLabel,
+  DatasetLabelSemanticMeaning,
+  DatasetLabelValue,
+  DatasetNonNumericVersionSearchParam,
+  DatasetPublishingStatus
+} from '../../../../dataset/domain/models/Dataset'
+export class FileCardHelper {
+  static getDatasetSearchParams(
+    persistentId: string,
+    publishingStatus: DatasetPublishingStatus
+  ): Record<string, string> {
+    const params: Record<string, string> = { persistentId: persistentId }
+    if (publishingStatus === DatasetPublishingStatus.DRAFT) {
+      params.version = DatasetNonNumericVersionSearchParam.DRAFT
+    }
+    return params
+  }
+  static getFileSearchParams(
+    id: number,
+    publishingStatus: DatasetPublishingStatus
+  ): Record<string, string> {
+    const params: Record<string, string> = { id: id.toString() }
+    if (publishingStatus === DatasetPublishingStatus.DRAFT) {
+      params.datasetVersion = DatasetNonNumericVersionSearchParam.DRAFT
+    }
+    return params
+  }
+
+  static getDatasetLabels(
+    datasetPublishingStatus: DatasetPublishingStatus,
+    someDatasetVersionHasBeenReleased: boolean | undefined
+  ) {
+    const labels: DatasetLabel[] = []
+    if (datasetPublishingStatus === DatasetPublishingStatus.DRAFT) {
+      labels.push(new DatasetLabel(DatasetLabelSemanticMeaning.DATASET, DatasetLabelValue.DRAFT))
+    }
+    if (
+      someDatasetVersionHasBeenReleased == undefined ||
+      someDatasetVersionHasBeenReleased == false
+    ) {
+      labels.push(
+        new DatasetLabel(DatasetLabelSemanticMeaning.WARNING, DatasetLabelValue.UNPUBLISHED)
+      )
+    }
+    return labels
+  }
+}

src/sections/collection/datasets-list/file-card/FileCardIcon.tsx

@@ -0,0 +1,14 @@
+import styles from './FileCard.module.scss'
+import { IconName } from '@iqss/dataverse-design-system'
+import { FileType } from '../../../../files/domain/models/FileMetadata'
+import { FileTypeToFileIconMap } from '../../../file/file-preview/FileTypeToFileIconMap'
+
+export function FileCardIcon({ type }: { type: FileType }) {
+  const icon = FileTypeToFileIconMap[type.value] || IconName.OTHER
+
+  return (
+    <span className={`${styles.icon} ${icon} `} role="img" aria-label={icon}>
+      <title>{icon}</title>
+    </span>
+  )
+}

src/sections/collection/datasets-list/file-card/FileCardInfo.tsx

@@ -0,0 +1,42 @@
+import styles from './FileCard.module.scss'
+import { DateHelper } from '../../../../shared/helpers/DateHelper'
+import { FilePreview } from '../../../../files/domain/models/FilePreview'
+import { Stack } from '@iqss/dataverse-design-system'
+import { LinkToPage } from '../../../shared/link-to-page/LinkToPage'
+import { Route } from '../../../Route.enum'
+import { FileChecksum } from '../../../dataset/dataset-files/files-table/file-info/file-info-cell/file-info-data/FileChecksum'
+import { FileTabularData } from '../../../dataset/dataset-files/files-table/file-info/file-info-cell/file-info-data/FileTabularData'
+import { FileCardHelper } from './FileCardHelper'
+
+interface FileCardInfoProps {
+  filePreview: FilePreview
+  persistentId: string
+}
+
+export function FileCardInfo({ filePreview, persistentId }: FileCardInfoProps) {
+  return (
+    <div className={styles['card-info-container']}>
+      <Stack gap={1}>
+        <span className={styles.date}>
+          {DateHelper.toDisplayFormat(filePreview.metadata.depositDate)} -{' '}
+          <LinkToPage
+            page={Route.DATASETS}
+            searchParams={FileCardHelper.getDatasetSearchParams(
+              persistentId,
+              filePreview.datasetPublishingStatus
+            )}>
+            {filePreview.datasetName}
+          </LinkToPage>
+        </span>
+        <span className={styles.info}>
+          <Stack gap={1} direction="horizontal">
+            {filePreview.metadata.type.toDisplayFormat()} - {filePreview.metadata.size.toString()}
+            <FileTabularData tabularData={filePreview.metadata.tabularData} />
+            <FileChecksum checksum={filePreview.metadata.checksum} />
+          </Stack>
+        </span>
+        <p className={styles.description}>{filePreview.metadata.description}</p>
+      </Stack>
+    </div>
+  )
+}

src/sections/collection/datasets-list/file-card/FileCardThumbnail.tsx

@@ -0,0 +1,26 @@
+import styles from './FileCard.module.scss'
+import { LinkToPage } from '../../../shared/link-to-page/LinkToPage'
+import { Route } from '../../../Route.enum'
+import { FileThumbnail } from '../../../dataset/dataset-files/files-table/file-info/file-info-cell/file-info-data/file-thumbnail/FileThumbnail'
+import { FilePreview } from '../../../../files/domain/models/FilePreview'
+import { FileCardHelper } from './FileCardHelper'
+
+interface FileCardThumbnailProps {
+  filePreview: FilePreview
+  thumbnail?: string
+}
+
+export function FileCardThumbnail({ filePreview }: FileCardThumbnailProps) {
+  return (
+    <div className={styles.thumbnail}>
+      <LinkToPage
+        page={Route.FILES}
+        searchParams={FileCardHelper.getFileSearchParams(
+          filePreview.id,
+          filePreview.datasetPublishingStatus
+        )}>
+        <FileThumbnail file={filePreview} />
+      </LinkToPage>
+    </div>
+  )
+}

src/stories/collection/datasets-list/FileCard.stories.tsx

@@ -0,0 +1,48 @@
+import { Meta, StoryObj } from '@storybook/react'
+import { WithI18next } from '../../WithI18next'
+import { FileCard } from '../../../sections/collection/datasets-list/file-card/FileCard'
+import { FilePreviewMother } from '../../../../tests/component/files/domain/models/FilePreviewMother'
+import { FileMetadataMother } from '../../../../tests/component/files/domain/models/FileMetadataMother'
+import { FakerHelper } from '../../../../tests/component/shared/FakerHelper'
+
+const meta: Meta<typeof FileCard> = {
+  title: 'Sections/Collection Page/FileCard',
+  component: FileCard,
+  decorators: [WithI18next]
+}
+
+export default meta
+type Story = StoryObj<typeof FileCard>
+
+export const Default: Story = {
+  render: () => <FileCard persistentId={'testid'} filePreview={FilePreviewMother.createDefault()} />
+}
+export const TabDelimited: Story = {
+  render: () => <FileCard persistentId={'testid'} filePreview={FilePreviewMother.createTabular()} />
+}
+export const WithLongDescription: Story = {
+  render: () => {
+    const filePreview = FilePreviewMother.createDefault({
+      metadata: FileMetadataMother.createDefault({
+        description: FakerHelper.paragraph(20)
+      })
+    })
+    return <FileCard persistentId={'testid'} filePreview={filePreview} />
+  }
+}
+export const WithChecksum: Story = {
+  render: () => (
+    <FileCard persistentId={'testid'} filePreview={FilePreviewMother.createWithChecksum()} />
+  )
+}
+export const WithDraft: Story = {
+  render: () => (
+    <FileCard persistentId={'testid'} filePreview={FilePreviewMother.createWithDraft()} />
+  )
+}
+
+export const ReleasedWithDraft: Story = {
+  render: () => (
+    <FileCard persistentId={'testid'} filePreview={FilePreviewMother.createReleasedWithDraft()} />
+  )
+}

tests/component/files/domain/models/FileMetadataMother.ts

@@ -238,6 +238,7 @@ export class FileMetadataMother {
 
   static createTabular(props?: Partial<FileMetadata>): FileMetadata {
     return this.createDefault({
+      description: FakerHelper.paragraph(),
       type: FileTypeMother.createTabular(),
       tabularData: FileTabularDataMother.create(),
       ...props
@@ -246,6 +247,7 @@ export class FileMetadataMother {
 
   static createNonTabular(props?: Partial<FileMetadata>): FileMetadata {
     return this.createDefault({
+      description: FakerHelper.paragraph(),
       type: FileTypeMother.createText(),
       tabularData: undefined,
       ...props
@@ -273,13 +275,15 @@ export class FileMetadataMother {
 
   static createWithChecksum(): FileMetadata {
     return this.createDefault({
-      checksum: FileChecksumMother.create()
+      checksum: FileChecksumMother.create(),
+      description: FakerHelper.paragraph()
     })
   }
 
   static createWithNoChecksum(): FileMetadata {
     return this.createDefault({
-      checksum: undefined
+      checksum: undefined,
+      description: FakerHelper.paragraph()
     })
   }