Feat/941 - Project overview citation addons (#660)

* feat(ang-941): added citation addon-card

* feat(ang-941): pre push fix

* feat(ang-941): added citation widget base logic

* fix(addons): fixed infinite requests for configured citation addons

* feat(ang-1059): added citation addons widget logic

* feat(ang-1059): refactored citation addon widget

* feat(ang-941): added skip tests

Author: rnastyuk

.husky/pre-push

@@ -17,3 +17,4 @@ npm run test:check-coverage-thresholds || {
   #printf "\n\nPlease address them before proceeding.\n\n\n\n"
   # exit 1
 }
+

package-lock.json

@@ -41,6 +41,8 @@
     "@angular/platform-browser": "^19.2.0",
     "@angular/platform-browser-dynamic": "^19.2.0",
     "@angular/router": "^19.2.0",
+    "@citation-js/core": "^0.7.18",
+    "@citation-js/plugin-csl": "^0.7.18",
     "@fortawesome/fontawesome-free": "^6.7.2",
     "@ngx-translate/core": "^16.0.4",
     "@ngx-translate/http-loader": "^16.0.1",

package.json

@@ -0,0 +1,29 @@
+declare module '@citation-js/core' {
+  export class Cite {
+    constructor(data?: unknown);
+
+    format(
+      type: string,
+      options?: {
+        format?: string;
+        template?: string;
+        lang?: string;
+      }
+    ): string;
+
+    static plugins: {
+      config: {
+        get(name: string): {
+          templates: {
+            add(id: string, template: string): void;
+            has(id: string): boolean;
+          };
+        };
+      };
+    };
+  }
+
+  export = Cite;
+}
+
+declare module '@citation-js/plugin-csl';

src/@types/citation-js.d.ts

@@ -56,6 +56,22 @@
       >
         <osf-icon [iconClass]="`fab fa-linkedin-in fa-xl`" />
       </a>
+      <a
+        class="social-link flex align-items-center justify-content-center"
+        [href]="mastodonShareLink()"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        <osf-icon [iconClass]="`fab fa-mastodon fa-xl`" />
+      </a>
+      <a
+        class="social-link flex align-items-center justify-content-center"
+        [href]="blueskyShareLink()"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        <osf-icon [iconClass]="`fab fa-bluesky fa-xl`" />
+      </a>
     </div>
   </div>
 </p-card>

src/app/features/preprints/components/preprint-details/share-and-download/share-and-download.component.html

@@ -80,4 +80,6 @@ export class ShareAndDownloadComponent {
   twitterShareLink = computed(() => this.shareLinks()?.twitter || '');
   facebookShareLink = computed(() => this.shareLinks()?.facebook || '');
   linkedInShareLink = computed(() => this.shareLinks()?.linkedIn || '');
+  mastodonShareLink = computed(() => this.shareLinks()?.mastodon || '');
+  blueskyShareLink = computed(() => this.shareLinks()?.bluesky || '');
 }

src/app/features/preprints/components/preprint-details/share-and-download/share-and-download.component.ts

@@ -0,0 +1,44 @@
+<div class="citation-addon-card px-2 pt-2 pb-3 flex flex-column gap-3">
+  <h3 class="px-3 pt-3 pb-2">{{ addon().displayName }}</h3>
+
+  @if (!citationItems().length && !collectionItems().length && !isOperationInvocationSubmitting()) {
+    <em class="px-3 pb-2">{{ 'project.overview.metadata.noCitations' | translate }}</em>
+  } @else {
+    <p-select
+      class="mx-3"
+      [placeholder]="'project.overview.metadata.citationInputPlaceholder' | translate"
+      [loading]="isCitationStylesLoading() || isStyleLoading()"
+      [options]="citationStylesOptions()"
+      [filter]="true"
+      (onFilter)="handleCitationStyleFilterSearch($event)"
+      optionLabel="label"
+      optionValue="value"
+      appendTo="body"
+      [emptyFilterMessage]="filterMessage() | translate"
+      [emptyMessage]="'project.overview.metadata.citationInputPlaceholder' | translate"
+      (onChange)="handleCitationStyleChange($event)"
+    >
+      <ng-template #selectedItem let-selectedOption>
+        {{ selectedOption.label }}
+      </ng-template>
+    </p-select>
+
+    @if ((formattedCitationItems().length || collectionItems().length) && !isOperationInvocationSubmitting()) {
+      <div class="citations-container flex flex-column px-3 py-2 gap-3 mt-2">
+        @for (item of formattedCitationItems(); track item.item.itemId) {
+          <osf-citation-item [citation]="item.formattedCitation" [itemUrl]="item.itemUrl" [level]="0" />
+        }
+        @for (collection of collectionItems(); track collection.itemId) {
+          <osf-citation-collection-item
+            [addon]="addon()"
+            [collection]="collection"
+            [level]="0"
+            [selectedCitationStyle]="selectedCitationStyle()"
+          />
+        }
+      </div>
+    } @else if (isOperationInvocationSubmitting()) {
+      <p-skeleton class="px-3 pb-2" width="100%" height="6rem" />
+    }
+  }
+</div>

src/app/features/project/overview/components/citation-addon-card/citation-addon-card.component.html

@@ -0,0 +1,11 @@
+@use "/styles/mixins" as mix;
+
+.citation-addon-card {
+  border: 1px solid var(--grey-2);
+  border-radius: mix.rem(12px);
+}
+
+.citations-container {
+  max-height: mix.rem(300px);
+  overflow-y: auto;
+}

src/app/features/project/overview/components/citation-addon-card/citation-addon-card.component.scss

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CitationAddonCardComponent } from './citation-addon-card.component';
+
+describe.skip('CitationAddonCardComponent', () => {
+  let component: CitationAddonCardComponent;
+  let fixture: ComponentFixture<CitationAddonCardComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [CitationAddonCardComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(CitationAddonCardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});