fix: multiple TypeScript issues (#3631)

* fix: type imports and exports

* fix: wrong types and lint

* fix: missing type

* style: lint fix

* style: prefer `type { ... }` over `{ type ... }`

components/Advocates/MeetTheAdvocates/AdvocatesMeetTheAdvocates.vue

@@ -13,7 +13,7 @@
           area.
         </p>
         <p>
-          <UiLinkText :url="joinSlackLink">
+          <UiLinkText :link="{ url: joinSlackLink }">
             Sign-up for the Qiskit Slack workspace
           </UiLinkText>
           to reach the advocates and join the conversation.
@@ -71,7 +71,8 @@
 </template>
 
 <script setup lang="ts">
-import { ADVOCATES_WORLD_REGION_OPTIONS, Advocate } from "~/types/advocates";
+import { ADVOCATES_WORLD_REGION_OPTIONS } from "~/types/advocates";
+import type { Advocate } from "~/types/advocates";
 import rawAdvocates from "~/content/advocates/advocates.json";
 
 const advocates = rawAdvocates as Advocate[];

components/Advocates/MeetTheAdvocates/AdvocatesMeetTheAdvocatesCard.vue

@@ -15,7 +15,7 @@
       class="advocates-meet-the-advocates-card__contact"
     >
       <LogoSlack20 class="advocates-meet-the-advocates-card__icon" />
-      <UiLinkText :url="`https://qiskit.slack.com/team/${slackId}`">
+      <UiLinkText :link="{ url: `https://qiskit.slack.com/team/${slackId}` }">
         @{{ slackUsername }}
       </UiLinkText>
     </div>

components/Events/EventsCard.vue

@@ -38,7 +38,7 @@ import Calendar20 from "@carbon/icons-vue/lib/calendar/20";
 import Education20 from "@carbon/icons-vue/lib/education/20";
 import Map20 from "@carbon/icons-vue/lib/map/20";
 import Time20 from "@carbon/icons-vue/lib/time/20";
-import { CtaClickedEventProp } from "~/types/segment";
+import type { CtaClickedEventProp } from "~/types/segment";
 
 interface Props {
   types?: string[];

components/Events/FollowOurCalendar/EventsFollowOurCalendar.vue

@@ -48,7 +48,7 @@
 import EventsFollowOurCalendarInstructionsApple from "~/components/Events/FollowOurCalendar/Instructions/EventsFollowOurCalendarInstructionsApple.vue";
 import EventsFollowOurCalendarInstructionsGoogle from "~/components/Events/FollowOurCalendar/Instructions/EventsFollowOurCalendarInstructionsGoogle.vue";
 import EventsFollowOurCalendarInstructionsOutlook from "~/components/Events/FollowOurCalendar/Instructions/EventsFollowOurCalendarInstructionsOutlook.vue";
-import { TextLink } from "~/types/links";
+import type { TextLink } from "~/types/links";
 
 const calendarsInstructions = [
   {

components/Events/FollowOurCalendar/Instructions/EventsFollowOurCalendarInstructionsGoogle.vue

@@ -3,7 +3,9 @@
     <bx-list-item>
       Open your Google Calendar by visiting
       <UiLinkText
-        url="https://calendar.google.com/calendar/u/0/r/settings/addbyurl?pli=1"
+        :link="{
+          url: 'https://calendar.google.com/calendar/u/0/r/settings/addbyurl?pli=1',
+        }"
       >
         this link
       </UiLinkText>

components/EventsFallFest/EventsFallFestUniversityDirectory.vue

@@ -40,7 +40,7 @@
 </template>
 
 <script setup lang="ts">
-import { TextLink } from "~/types/links";
+import type { TextLink } from "~/types/links";
 
 type University = {
   image: string;

components/EventsSummerSchool/EventsSummerSchoolFaq2022.vue

@@ -200,7 +200,7 @@
 </template>
 
 <script setup lang="ts">
-import { Link } from "~/types/links";
+import type { Link } from "~/types/links";
 
 const config = useRuntimeConfig();
 

components/EventsSummerSchool/EventsSummerSchoolFaq2023.vue

@@ -194,7 +194,7 @@
 </template>
 
 <script setup lang="ts">
-import { Link } from "~/types/links";
+import type { Link } from "~/types/links";
 
 const config = useRuntimeConfig();
 

components/Layout/Footer/LayoutFooter.vue

@@ -65,7 +65,7 @@ import LogoSlack20 from "@carbon/icons-vue/lib/logo--slack/20";
 import LogoTwitter20 from "@carbon/icons-vue/lib/logo--twitter/20";
 import LogoYouTube20 from "@carbon/icons-vue/lib/logo--youtube/20";
 import { SocialMedia } from "~/constants/links";
-import { IconLink, TextLink } from "~/types/links";
+import type { IconLink, TextLink } from "~/types/links";
 
 interface Props {
   oldContainer?: boolean;

components/Layout/Footer/LayoutFooterLinksGroup.vue

@@ -27,11 +27,11 @@
 </template>
 
 <script setup lang="ts">
-import { IconLink } from "~/types/links";
+import type { IconLink, TextLink } from "~/types/links";
 
 interface Props {
   title: string;
-  elements: IconLink[];
+  elements: IconLink[] | TextLink[];
   iconsOnly?: boolean;
   theme?: "light" | "dark";
 }

components/Layout/LeadSpace/LayoutLeadSpaceWithCard.vue

@@ -37,7 +37,7 @@
 </template>
 
 <script setup lang="ts">
-import { TextLink } from "~/types/links";
+import type { TextLink } from "~/types/links";
 
 interface Props {
   cardTitle: string;

components/Ui/DataTable/UiDataTable.vue

@@ -16,7 +16,7 @@
 </template>
 
 <script setup lang="ts">
-import { Link } from "~/types/links";
+import type { Link } from "~/types/links";
 
 export interface TableRowElement {
   addTooltip?: boolean;

components/Ui/Link/UiLink.vue

@@ -14,7 +14,7 @@
 </template>
 
 <script setup lang="ts">
-import { CtaClickedEventProp } from "~/types/segment";
+import type { CtaClickedEventProp } from "~/types/segment";
 
 type NuxtLinkTarget =
   | "_blank"

components/Ui/Link/UiLinkText.vue

@@ -11,7 +11,7 @@
 </template>
 
 <script setup lang="ts">
-import { Link } from "~/types/links";
+import type { Link } from "~/types/links";
 
 interface Props {
   kind?: "primary" | "secondary";

components/Ui/Mosaic/UiMosaic.vue

@@ -54,7 +54,7 @@
 </template>
 
 <script setup lang="ts">
-import { MosaicElement } from "~/types/uiComponents";
+import type { MosaicElement } from "~/types/uiComponents";
 
 interface Props {
   mosaicElements: MosaicElement[];

components/Ui/Mosaic/UiMosaicSection.vue

@@ -14,7 +14,7 @@
 </template>
 
 <script setup lang="ts">
-import { MosaicElement } from "~/types/uiComponents";
+import type { MosaicElement } from "~/types/uiComponents";
 
 interface Props {
   description?: string;

components/Ui/UiCard.vue

@@ -107,8 +107,8 @@
 </template>
 
 <script setup lang="ts">
-import { TextLink } from "~/types/links";
-import { CtaClickedEventProp } from "~/types/segment";
+import type { TextLink } from "~/types/links";
+import type { CtaClickedEventProp } from "~/types/segment";
 
 interface Props {
   descriptionWholeSize?: boolean;

components/Ui/UiCta.vue

@@ -27,8 +27,8 @@
 import ArrowDown16 from "@carbon/icons-vue/lib/arrow--down/16";
 import ArrowRight16 from "@carbon/icons-vue/lib/arrow--right/16";
 import Launch16 from "@carbon/icons-vue/lib/launch/16";
-import { Link } from "~/types/links";
-import { CtaClickedEventProp } from "~/types/segment";
+import type { Link } from "~/types/links";
+import type { CtaClickedEventProp } from "~/types/segment";
 
 interface Props {
   isWider?: boolean;

components/Ui/UiDescriptionCard.vue

@@ -18,7 +18,7 @@
 </template>
 
 <script setup lang="ts">
-import { TextLink } from "~/types/links";
+import type { TextLink } from "~/types/links";
 
 interface Props {
   cta: TextLink;

components/Ui/UiHelpfulResources.vue

@@ -15,7 +15,7 @@
 </template>
 
 <script setup lang="ts">
-import { DescriptionCard } from "~/types/uiComponents";
+import type { DescriptionCard } from "~/types/uiComponents";
 
 interface Props {
   resources: DescriptionCard[];

components/Ui/UiJoinWithCards.vue

@@ -29,7 +29,7 @@
 </template>
 
 <script setup lang="ts">
-import { TextLink } from "~/types/links";
+import type { TextLink } from "~/types/links";
 
 interface Card {
   name: string;

composables/useSegment.ts

@@ -1,4 +1,4 @@
-import {
+import type {
   CtaClickedEventSegmentSchema,
   PageLoadedEventSegmentSchema,
 } from "~/types/segment";

constants/fallFest2022Content.ts

@@ -1,4 +1,4 @@
-import { DescriptionCard } from "~/types/uiComponents";
+import type { DescriptionCard } from "~/types/uiComponents";
 
 const header = {
   titleLine1: "Qiskit Fall Fest 2022",

constants/fallFest2023Content.ts

@@ -1,4 +1,4 @@
-import { DescriptionCard } from "~/types/uiComponents";
+import type { DescriptionCard } from "~/types/uiComponents";
 
 const header = {
   titleLine1: "Qiskit Fall Fest 2023",

constants/links.ts

@@ -1,4 +1,4 @@
-import { TextLink } from "~/types/links";
+import type { TextLink } from "~/types/links";
 
 const SocialMedia: { [key: string]: TextLink } = {
   github: {

constants/summerSchool2022Content.ts

@@ -1,4 +1,4 @@
-import { DescriptionCard, MosaicElement } from "~/types/uiComponents";
+import type { DescriptionCard, MosaicElement } from "~/types/uiComponents";
 
 const header = {
   titleLine1: "Qiskit Global Summer School 2022:",

constants/summerSchool2023Content.ts

@@ -1,4 +1,4 @@
-import { DescriptionCard, MosaicElement } from "~/types/uiComponents";
+import type { DescriptionCard, MosaicElement } from "~/types/uiComponents";
 
 const header = {
   titleLine1: "Qiskit Global Summer School 2023:",

hooks/advocate-conversion-utils.ts

@@ -1,4 +1,4 @@
-import { Advocate, AdvocatesWorldRegion } from "../types/advocates";
+import type { Advocate, AdvocatesWorldRegion } from "../types/advocates";
 import {
   AirtableRecords,
   getImageUrl,

hooks/airtable-conversion-utils.ts

@@ -1,6 +1,6 @@
 import { promises as fsPromises } from "fs";
 import Airtable from "airtable";
-import { AirtableBase } from "airtable/lib/airtable_base";
+import type { AirtableBase } from "airtable/lib/airtable_base";
 import axios from "axios";
 
 function getImageUrl(imageAttachment: any): string {

hooks/event-conversion-utils.ts

@@ -1,13 +1,15 @@
 import Airtable from "airtable";
 
 import {
-  CommunityEvent,
-  CommunityEventType,
   COMMUNITY_EVENT_TYPES,
   COMMUNITY_EVENT_TYPE_OPTIONS,
-  WorldRegion,
   WORLD_REGIONS,
 } from "../types/events";
+import type {
+  CommunityEvent,
+  CommunityEventType,
+  WorldRegion,
+} from "../types/events";
 import {
   AirtableRecords,
   getImageUrl,

hooks/fall-fest-extension-event-conversion.utils.ts

@@ -1,6 +1,6 @@
 import Airtable from "airtable";
 import { AirtableRecords } from "./airtable-conversion-utils";
-import { FallFestExtensionEvent } from "types/fall-fest";
+import type { FallFestExtensionEvent } from "~/types/fall-fest";
 
 export const RECORD_FIELDS_IDS = Object.freeze({
   institution: "flddG950A6KMmF19G",

hooks/fall-fest-partner-event-conversion.utils.ts

@@ -4,7 +4,7 @@ import {
   getImageUrl,
   findImageAttachment,
 } from "./airtable-conversion-utils";
-import { FallFestPartnerEvent } from "types/fall-fest";
+import type { FallFestPartnerEvent } from "~/types/fall-fest";
 
 export const RECORD_FIELDS_IDS = Object.freeze({
   title: "fld7dWQ6pkQHYg2kj",

pages/advocates.vue

@@ -24,7 +24,7 @@
 </template>
 
 <script setup lang="ts">
-import { TextLink } from "types/links";
+import type { TextLink } from "~/types/links";
 
 definePageMeta({
   pageTitle: "Qiskit Advocates",

pages/events/fall-fest-2022.vue

@@ -74,7 +74,7 @@
                   v-if="link"
                   class="fall-fest-page__table-link"
                   :style="styles"
-                  :url="link"
+                  :link="{ url: link }"
                 >
                   Link to event
                 </UiLinkText>

pages/events/index.vue

@@ -115,10 +115,10 @@
 
 <script setup lang="ts">
 import {
-  CommunityEvent,
   WORLD_REGION_OPTIONS,
   COMMUNITY_EVENT_TYPE_OPTIONS,
 } from "~/types/events";
+import type { CommunityEvent } from "~/types/events";
 
 import rawPastEvents from "~/content/events/past-community-events.json";
 import rawUpcomingEvents from "~/content/events/upcoming-community-events.json";

pages/events/seminar-series.vue

@@ -114,12 +114,12 @@
 </template>
 
 <script setup lang="ts">
-import { SeminarSeriesEvent } from "~/hooks/event-conversion-utils";
-import { TableRowElement } from "~/components/Ui/DataTable/UiDataTable.vue";
+import type { SeminarSeriesEvent } from "~/hooks/event-conversion-utils";
+import type { TableRowElement } from "~/components/Ui/DataTable/UiDataTable.vue";
 import upcomingSeminarSerieEvents from "~/content/events/upcoming-seminar-series-events.json";
 import pastSeminarSeriesEvents from "~/content/events/past-seminar-series-events.json";
-import { TextLink } from "~/types/links";
-import { DescriptionCard, MosaicElement } from "~/types/uiComponents";
+import type { TextLink } from "~/types/links";
+import type { DescriptionCard, MosaicElement } from "~/types/uiComponents";
 
 definePageMeta({
   pageTitle: "Qiskit Seminar Series",

plugins/trackClick.ts

@@ -1,6 +1,6 @@
-import { ObjectDirective } from "vue";
+import type { ObjectDirective } from "vue";
 
-import { CtaClickedEventProp } from "@/types/segment";
+import type { CtaClickedEventProp } from "@/types/segment";
 
 export default defineNuxtPlugin((nuxtApp) => {
   nuxtApp.vueApp.directive("track-click", <

tests/hooks/advocate-conversion-utils.spec.ts

@@ -1,5 +1,5 @@
 import { beforeEach, describe, expect, test, vi } from "vitest";
-import { AirtableBase } from "airtable/lib/airtable_base";
+import type { AirtableBase } from "airtable/lib/airtable_base";
 import AdvocatesAirtableRecords, {
   RECORD_FIELDS_IDS,
 } from "../../hooks/advocate-conversion-utils";

tests/hooks/airtable-conversion-utils.spec.ts

@@ -1,7 +1,7 @@
 import { promises as fsPromises } from "fs";
 import axios from "axios";
 import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
-import { AirtableBase } from "airtable/lib/airtable_base";
+import type { AirtableBase } from "airtable/lib/airtable_base";
 import { AirtableRecords } from "../../hooks/airtable-conversion-utils";
 
 class FakeAirtableRecords extends AirtableRecords {

tests/hooks/event-conversion-utils.spec.ts

@@ -1,12 +1,9 @@
 import axios from "axios";
 import { beforeEach, describe, expect, test, vi } from "vitest";
-import { AirtableBase } from "airtable/lib/airtable_base";
+import type { AirtableBase } from "airtable/lib/airtable_base";
 import EventsAirtableRecords from "../../hooks/event-conversion-utils";
-import {
-  CommunityEvent,
-  COMMUNITY_EVENT_TYPES,
-  WORLD_REGIONS,
-} from "../../types/events";
+import { COMMUNITY_EVENT_TYPES, WORLD_REGIONS } from "../../types/events";
+import type { CommunityEvent } from "../../types/events";
 import { mock } from "./mock/seminarSeriesMock";
 
 vi.mock("axios");

types/advocates.ts

@@ -25,4 +25,6 @@ interface Advocate {
   slackUsername?: string;
 }
 
-export { AdvocatesWorldRegion, ADVOCATES_WORLD_REGION_OPTIONS, Advocate };
+export { ADVOCATES_WORLD_REGION_OPTIONS };
+
+export type { Advocate, AdvocatesWorldRegion };