Merged in chore/delete-unused-files (pull request #3346)
chore: Delete unused files * Delete unused files Ignore design-system for now Approved-by: Joakim Jäderberg
This commit is contained in:
Anton Gunnarsson
@@ -1,6 +0,0 @@
|
||||
import { useBookingFlowContext } from "@scandic-hotels/booking-flow/hooks/useBookingFlowContext"
|
||||
|
||||
export function useIsUserLoggedIn() {
|
||||
const { isLoggedIn } = useBookingFlowContext()
|
||||
return isLoggedIn
|
||||
}
|
||||
@@ -1,110 +0,0 @@
|
||||
import { Suspense } from "react"
|
||||
|
||||
import ButtonLink from "@scandic-hotels/design-system/ButtonLink"
|
||||
import { Typography } from "@scandic-hotels/design-system/Typography"
|
||||
import { TrackingSDK } from "@scandic-hotels/tracking/TrackingSDK"
|
||||
|
||||
import Blocks from "@/components/Blocks"
|
||||
import HeaderDynamicContent from "@/components/Headers/DynamicContent"
|
||||
import Hero from "@/components/Hero"
|
||||
import { HeroVideo } from "@/components/HeroVideo"
|
||||
import MeetingPackageWidget from "@/components/MeetingPackageWidget"
|
||||
import Sidebar from "@/components/Sidebar"
|
||||
import SidebarSkeleton from "@/components/Sidebar/SidebarSkeleton"
|
||||
import LinkChips from "@/components/TempDesignSystem/LinkChips"
|
||||
|
||||
import { staticPageVariants } from "./variants"
|
||||
|
||||
import styles from "./staticPage.module.css"
|
||||
|
||||
import type { StaticPageProps } from "./staticPage"
|
||||
|
||||
export default async function StaticPage({
|
||||
content,
|
||||
tracking,
|
||||
pageType,
|
||||
}: StaticPageProps) {
|
||||
const { blocks, hero_image, hero_video, header, meeting_package } = content
|
||||
|
||||
return (
|
||||
<>
|
||||
<section className={staticPageVariants({ pageType })}>
|
||||
<header className={styles.header}>
|
||||
<div className={styles.headerContent}>
|
||||
{header ? (
|
||||
<>
|
||||
<div className={styles.headerIntro}>
|
||||
<Typography variant="Title/lg">
|
||||
<h1 className={styles.heading}>{header.heading}</h1>
|
||||
</Typography>
|
||||
<Typography variant="Body/Lead text">
|
||||
<p>{header.preamble}</p>
|
||||
</Typography>
|
||||
</div>
|
||||
{header.top_primary_button?.url ? (
|
||||
<ButtonLink
|
||||
href={header.top_primary_button.url}
|
||||
size="Medium"
|
||||
variant="Tertiary"
|
||||
className={styles.button}
|
||||
>
|
||||
{header.top_primary_button.title}
|
||||
</ButtonLink>
|
||||
) : null}
|
||||
{header.navigation_links ? (
|
||||
<LinkChips chips={header.navigation_links} />
|
||||
) : null}
|
||||
{"dynamic_content" in header &&
|
||||
header.dynamic_content !== null &&
|
||||
header.dynamic_content !== undefined ? (
|
||||
<HeaderDynamicContent {...header.dynamic_content} />
|
||||
) : null}
|
||||
</>
|
||||
) : null}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{hero_video || hero_image ? (
|
||||
<div className={styles.heroWrapper}>
|
||||
{hero_video ? (
|
||||
<HeroVideo
|
||||
className={styles.heroVideo}
|
||||
src={hero_video.src}
|
||||
focalPoint={hero_video.focalPoint}
|
||||
captions={hero_video.captions}
|
||||
/>
|
||||
) : null}
|
||||
{!hero_video && hero_image ? (
|
||||
<Hero
|
||||
className={styles.heroImage}
|
||||
alt={hero_image.meta.alt || hero_image.meta.caption || ""}
|
||||
src={hero_image.url}
|
||||
focalPoint={hero_image.focalPoint}
|
||||
dimensions={hero_image.dimensions}
|
||||
/>
|
||||
) : null}
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<div className={styles.contentContainer}>
|
||||
<main className={styles.mainContent}>
|
||||
{pageType === "collection" && meeting_package?.show_widget && (
|
||||
<MeetingPackageWidget
|
||||
destination={meeting_package.location}
|
||||
className={styles.meetingPackageWidget}
|
||||
/>
|
||||
)}
|
||||
{blocks ? <Blocks blocks={blocks} /> : null}
|
||||
</main>
|
||||
|
||||
{"sidebar" in content && content.sidebar?.length ? (
|
||||
<Suspense fallback={<SidebarSkeleton />}>
|
||||
<Sidebar blocks={content.sidebar} />
|
||||
</Suspense>
|
||||
) : null}
|
||||
</div>
|
||||
</section>
|
||||
<TrackingSDK pageData={tracking} />
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -1,112 +0,0 @@
|
||||
.page {
|
||||
padding-bottom: var(--Space-x9);
|
||||
}
|
||||
|
||||
.header {
|
||||
background-color: var(--Base-Surface-Subtle-Normal);
|
||||
padding-bottom: var(--Space-x4);
|
||||
}
|
||||
|
||||
.headerContent {
|
||||
display: grid;
|
||||
gap: var(--Space-x3);
|
||||
max-width: var(--max-width-content);
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.headerIntro {
|
||||
display: grid;
|
||||
max-width: var(--max-width-text-block);
|
||||
gap: var(--Space-x3);
|
||||
}
|
||||
|
||||
.heading {
|
||||
color: var(--Text-Heading);
|
||||
text-wrap: balance;
|
||||
hyphens: auto;
|
||||
}
|
||||
|
||||
.heroWrapper {
|
||||
padding: var(--Space-x4) var(--Space-x2);
|
||||
}
|
||||
|
||||
.heroImage,
|
||||
.heroVideo {
|
||||
max-width: var(--max-width-content);
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.contentContainer {
|
||||
width: 100%;
|
||||
padding: var(--Space-x4) var(--Space-x2) 0;
|
||||
}
|
||||
|
||||
.content .contentContainer {
|
||||
display: grid;
|
||||
grid-template-areas:
|
||||
"main"
|
||||
"sidebar";
|
||||
gap: var(--Space-x4);
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.mainContent {
|
||||
display: grid;
|
||||
width: 100%;
|
||||
gap: var(--Space-x6);
|
||||
margin: 0 auto;
|
||||
max-width: var(--max-width-content);
|
||||
}
|
||||
|
||||
.content .mainContent {
|
||||
grid-area: main;
|
||||
}
|
||||
|
||||
.meetingPackageWidget {
|
||||
border-radius: var(--Corner-radius-lg);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.button {
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.contentContainer {
|
||||
padding: var(--Space-x4) 0;
|
||||
max-width: var(--max-width-content);
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.heroContainer {
|
||||
padding: var(--Space-x4) 0;
|
||||
}
|
||||
|
||||
.headerIntro {
|
||||
gap: var(--Space-x3);
|
||||
}
|
||||
}
|
||||
|
||||
/* Meeting booking widget changes design at 948px */
|
||||
@media screen and (min-width: 948px) {
|
||||
.meetingPackageWidget {
|
||||
background-color: var(--Base-Surface-Primary-light-Normal);
|
||||
box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1367px) {
|
||||
.content .contentContainer {
|
||||
grid-template-areas: "main sidebar";
|
||||
grid-template-columns: var(--max-width-text-block) 1fr;
|
||||
gap: var(--Space-x9);
|
||||
}
|
||||
|
||||
.mainContent {
|
||||
gap: var(--Space-x9);
|
||||
padding: 0;
|
||||
max-width: none;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
@@ -1,14 +0,0 @@
|
||||
import type { TrackingSDKPageData } from "@scandic-hotels/tracking/types"
|
||||
import type { CollectionPage } from "@scandic-hotels/trpc/types/collectionPage"
|
||||
import type { ContentPage } from "@scandic-hotels/trpc/types/contentPage"
|
||||
import type { VariantProps } from "class-variance-authority"
|
||||
|
||||
import type { staticPageVariants } from "./variants"
|
||||
|
||||
export interface StaticPageProps
|
||||
extends Omit<React.HTMLAttributes<HTMLDivElement>, "content">,
|
||||
VariantProps<typeof staticPageVariants> {
|
||||
pageType?: "collection" | "content"
|
||||
content: CollectionPage["collection_page"] | ContentPage["content_page"]
|
||||
tracking: TrackingSDKPageData
|
||||
}
|
||||
@@ -1,15 +0,0 @@
|
||||
import { cva } from "class-variance-authority"
|
||||
|
||||
import styles from "./staticPage.module.css"
|
||||
|
||||
export const staticPageVariants = cva(styles.page, {
|
||||
variants: {
|
||||
pageType: {
|
||||
collection: styles.collection,
|
||||
content: styles.content,
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
pageType: "content",
|
||||
},
|
||||
})
|
||||
@@ -1,9 +0,0 @@
|
||||
import type { FocalPoint } from "@scandic-hotels/common/utils/imageVault"
|
||||
import type { Image } from "@scandic-hotels/trpc/types/image"
|
||||
|
||||
export interface HeroProps {
|
||||
alt: string
|
||||
src: string
|
||||
focalPoint?: FocalPoint
|
||||
dimensions?: Image["dimension"]
|
||||
}
|
||||
@@ -1,102 +0,0 @@
|
||||
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
|
||||
import Link from "@scandic-hotels/design-system/OldDSLink"
|
||||
import { Typography } from "@scandic-hotels/design-system/Typography"
|
||||
|
||||
import { getMembershipCards } from "@/lib/trpc/memoizedRequests"
|
||||
|
||||
import { getIntl } from "@/i18n"
|
||||
|
||||
import styles from "./membershipcards.module.css"
|
||||
|
||||
export default async function MembershipCardSlot() {
|
||||
const intl = await getIntl()
|
||||
const membershipCards = await getMembershipCards()
|
||||
|
||||
return (
|
||||
<section className={styles.container}>
|
||||
<div className={styles.content}>
|
||||
<Typography variant="Title/Subtitle/md">
|
||||
<h3>
|
||||
{intl.formatMessage({
|
||||
id: "myPages.myMembershipCards",
|
||||
defaultMessage: "My membership cards",
|
||||
})}
|
||||
</h3>
|
||||
</Typography>
|
||||
</div>
|
||||
{(membershipCards || []).map((card, idx) => (
|
||||
<div className={styles.card} key={idx}>
|
||||
<Typography variant="Title/Subtitle/md">
|
||||
<h4 className={styles.subTitle}>
|
||||
{intl.formatMessage(
|
||||
{
|
||||
id: "myPages.nameWithCardMembershipType",
|
||||
defaultMessage: "Name: {cardMembershipType}",
|
||||
},
|
||||
{
|
||||
cardMembershipType: card.membershipType,
|
||||
}
|
||||
)}
|
||||
</h4>
|
||||
</Typography>
|
||||
<span>
|
||||
{intl.formatMessage(
|
||||
{
|
||||
id: "myPages.currentPointsWithPoints",
|
||||
defaultMessage: "Current Points: {points, number}",
|
||||
},
|
||||
{ points: card.currentPoints }
|
||||
)}
|
||||
</span>
|
||||
<span>
|
||||
{intl.formatMessage(
|
||||
{
|
||||
id: "myPages.memberSinceWithValue",
|
||||
defaultMessage: "Member Since: {value}",
|
||||
},
|
||||
{
|
||||
value: card.memberSince,
|
||||
}
|
||||
)}
|
||||
</span>
|
||||
<span data-hj-suppress>
|
||||
{intl.formatMessage(
|
||||
{
|
||||
id: "myPages.numberWithValue",
|
||||
defaultMessage: "Number: {membershipNumber}",
|
||||
},
|
||||
{
|
||||
membershipNumber: card.membershipNumber,
|
||||
}
|
||||
)}
|
||||
</span>
|
||||
<span>
|
||||
{intl.formatMessage(
|
||||
{
|
||||
id: "myPages.expirationDateWithDate",
|
||||
defaultMessage: "Expiration Date: {expirationDate}",
|
||||
},
|
||||
{
|
||||
expirationDate: card.expirationDate?.split("T")[0],
|
||||
}
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
<Link href="#" variant="icon">
|
||||
<MaterialIcon icon="add_circle" color="CurrentColor" />
|
||||
<Typography
|
||||
variant="Body/Paragraph/mdRegular"
|
||||
className={styles.addNewCardText}
|
||||
>
|
||||
<p>
|
||||
{intl.formatMessage({
|
||||
id: "myPages.addNewCard",
|
||||
defaultMessage: "Add new card",
|
||||
})}
|
||||
</p>
|
||||
</Typography>
|
||||
</Link>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
@@ -1,27 +0,0 @@
|
||||
.container {
|
||||
display: grid;
|
||||
gap: var(--Space-x3);
|
||||
max-width: 510px;
|
||||
}
|
||||
|
||||
.content {
|
||||
display: grid;
|
||||
gap: var(--Space-x1);
|
||||
}
|
||||
|
||||
.card {
|
||||
margin-top: var(--Space-x4);
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-template-rows: repeat(3, auto);
|
||||
gap: var(--Space-x1);
|
||||
}
|
||||
|
||||
.subTitle {
|
||||
grid-column: span 2;
|
||||
}
|
||||
|
||||
.addNewCardText {
|
||||
text-decoration: underline;
|
||||
color: var(--Scandic-Brand-Burgundy);
|
||||
}
|
||||
@@ -1,9 +0,0 @@
|
||||
import type { VariantProps } from "class-variance-authority"
|
||||
|
||||
import type { linkVariants } from "./variants"
|
||||
|
||||
export interface SectionLinkProps
|
||||
extends React.PropsWithChildren<React.HTMLAttributes<HTMLSpanElement>>,
|
||||
VariantProps<typeof linkVariants> {
|
||||
link?: { href: string; text: string }
|
||||
}
|
||||
@@ -1,6 +0,0 @@
|
||||
import type { ApiImage } from "@scandic-hotels/trpc/types/hotel"
|
||||
|
||||
export type PreviewImagesProps = {
|
||||
images: ApiImage[]
|
||||
hotelName: string
|
||||
}
|
||||
@@ -1,4 +0,0 @@
|
||||
import type { User } from "@scandic-hotels/trpc/types/user"
|
||||
|
||||
export interface FriendProps
|
||||
extends React.PropsWithChildren<Pick<User, "membership" | "name">> {}
|
||||
@@ -1,5 +0,0 @@
|
||||
export type PointsColumnProps = {
|
||||
title: string
|
||||
subtitle?: string
|
||||
value?: number | null
|
||||
}
|
||||
@@ -1,34 +0,0 @@
|
||||
"use client"
|
||||
import { useIntl } from "react-intl"
|
||||
import { useReactToPrint } from "react-to-print"
|
||||
|
||||
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
|
||||
import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
|
||||
|
||||
import type { DownloadInvoiceProps } from "../../../../types/components/bookingConfirmation/actions/downloadInvoice"
|
||||
|
||||
export default function DownloadInvoice({ mainRef }: DownloadInvoiceProps) {
|
||||
const intl = useIntl()
|
||||
const reactToPrintFn = useReactToPrint({ contentRef: mainRef })
|
||||
|
||||
function downloadBooking() {
|
||||
reactToPrintFn()
|
||||
}
|
||||
|
||||
return (
|
||||
<Button
|
||||
intent="text"
|
||||
onPress={downloadBooking}
|
||||
size="small"
|
||||
theme="base"
|
||||
variant="icon"
|
||||
wrapping
|
||||
>
|
||||
<MaterialIcon icon="download" color="CurrentColor" />
|
||||
{intl.formatMessage({
|
||||
id: "bookingConfirmation.downloadInvoice",
|
||||
defaultMessage: "Download invoice",
|
||||
})}
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
@@ -1,5 +0,0 @@
|
||||
import type { MutableRefObject } from "react"
|
||||
|
||||
export interface DownloadInvoiceProps {
|
||||
mainRef: MutableRefObject<HTMLElement | null>
|
||||
}
|
||||
@@ -1,88 +0,0 @@
|
||||
import type { CurrencyEnum } from "@scandic-hotels/common/constants/currency"
|
||||
import type { RoomPackageCodeEnum } from "@scandic-hotels/trpc/enums/roomFilter"
|
||||
import type { Room } from "@scandic-hotels/trpc/types/hotel"
|
||||
import type { Package, PackageEnum } from "@scandic-hotels/trpc/types/packages"
|
||||
import type {
|
||||
Product,
|
||||
RoomConfiguration,
|
||||
RoomsAvailability,
|
||||
} from "@scandic-hotels/trpc/types/roomAvailability"
|
||||
|
||||
import type { BookingCodeFilterEnum } from "../../stores/bookingCode-filter"
|
||||
import type {
|
||||
Rate,
|
||||
Room as RoomBooking,
|
||||
SelectRateBooking,
|
||||
} from "../components/selectRate/selectRate"
|
||||
|
||||
export interface AvailabilityError {
|
||||
details: string
|
||||
error: string
|
||||
}
|
||||
|
||||
interface Actions {
|
||||
appendRegularRates: (
|
||||
roomConfigurations: RoomConfiguration[] | undefined
|
||||
) => void
|
||||
closeSection: () => void
|
||||
modifyRate: () => void
|
||||
removeSelectedPackage: (code: PackageEnum) => void
|
||||
removeSelectedPackages: () => void
|
||||
selectFilter: (filter: BookingCodeFilterEnum) => void
|
||||
selectPackages: (codes: PackageEnum[]) => void
|
||||
selectRate: (rate: SelectedRate, isUserLoggedIn: boolean) => void
|
||||
updateRooms: (rooms: RoomConfiguration[] | undefined) => void
|
||||
}
|
||||
|
||||
export interface SelectedRate {
|
||||
features: RoomConfiguration["features"]
|
||||
product: Product
|
||||
roomType: RoomConfiguration["roomType"]
|
||||
roomTypeCode: RoomConfiguration["roomTypeCode"]
|
||||
}
|
||||
|
||||
export interface SelectedRoom {
|
||||
actions: Actions
|
||||
bookingRoom: RoomBooking
|
||||
isFetchingAdditionalRate: boolean
|
||||
isFetchingPackages: boolean
|
||||
rooms: RoomConfiguration[]
|
||||
selectedFilter: BookingCodeFilterEnum | undefined
|
||||
selectedPackages: Package[]
|
||||
selectedRate: SelectedRate | null
|
||||
}
|
||||
|
||||
interface DefaultFilterOptions {
|
||||
code: RoomPackageCodeEnum
|
||||
description: string
|
||||
}
|
||||
|
||||
export interface RatesState {
|
||||
activeRoom: number
|
||||
booking: SelectRateBooking
|
||||
hotelType: string | undefined
|
||||
isRedemptionBooking: boolean
|
||||
packageOptions: DefaultFilterOptions[]
|
||||
rateSummary: Array<Rate | null>
|
||||
rooms: SelectedRoom[]
|
||||
roomCategories: Room[]
|
||||
roomConfigurations: RoomConfiguration[][]
|
||||
roomsPackages: Package[][]
|
||||
roomsAvailability: (RoomsAvailability | AvailabilityError)[] | undefined
|
||||
vat: number
|
||||
defaultCurrency: CurrencyEnum
|
||||
}
|
||||
|
||||
export interface InitialState
|
||||
extends Pick<
|
||||
RatesState,
|
||||
"booking" | "hotelType" | "roomCategories" | "roomsAvailability" | "vat"
|
||||
> {
|
||||
initialActiveRoom?: number
|
||||
pathname: string
|
||||
labels: {
|
||||
accessibilityRoom: string
|
||||
allergyRoom: string
|
||||
petRoom: string
|
||||
}
|
||||
}
|
||||
@@ -1,19 +0,0 @@
|
||||
import { gql } from "graphql-tag"
|
||||
|
||||
import { Contact } from "../Contact.graphql"
|
||||
|
||||
export const ContactAside = gql`
|
||||
fragment ContactAside on CurrentBlocksPageAsideContact {
|
||||
contact {
|
||||
contactConnection {
|
||||
edges {
|
||||
node {
|
||||
...Contact
|
||||
}
|
||||
}
|
||||
totalCount
|
||||
}
|
||||
}
|
||||
}
|
||||
${Contact}
|
||||
`
|
||||
@@ -1,12 +0,0 @@
|
||||
import { gql } from "graphql-tag"
|
||||
|
||||
import { Puff } from "../Puff.graphql"
|
||||
|
||||
export const PuffAside = gql`
|
||||
fragment PuffAside on CurrentBlocksPageAsidePuff {
|
||||
puff {
|
||||
...Puff
|
||||
}
|
||||
}
|
||||
${Puff}
|
||||
`
|
||||
@@ -1,39 +0,0 @@
|
||||
import { gql } from "graphql-tag"
|
||||
|
||||
export const ListItem = gql`
|
||||
fragment ListItem on CurrentBlocksPageBlocksListBlockListItemsListItem {
|
||||
list_item {
|
||||
list_item_style
|
||||
subtitle
|
||||
title
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
export const ListItemExternalLink = gql`
|
||||
fragment ListItemExternalLink on CurrentBlocksPageBlocksListBlockListItemsListItemExternalLink {
|
||||
list_item_external_link {
|
||||
link {
|
||||
href
|
||||
title
|
||||
}
|
||||
list_item_style
|
||||
subtitle
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
export const ListBlock = gql`
|
||||
fragment ListBlock on CurrentBlocksPageBlocksList {
|
||||
list {
|
||||
list_items {
|
||||
__typename
|
||||
...ListItem
|
||||
...ListItemExternalLink
|
||||
}
|
||||
title
|
||||
}
|
||||
}
|
||||
${ListItem}
|
||||
${ListItemExternalLink}
|
||||
`
|
||||
@@ -1,18 +0,0 @@
|
||||
import { gql } from "graphql-tag"
|
||||
|
||||
import { Puff } from "../Puff.graphql"
|
||||
|
||||
export const PuffBlock = gql`
|
||||
fragment PuffBlock on CurrentBlocksPageBlocksPuffs {
|
||||
puffs {
|
||||
puffs {
|
||||
... on CurrentBlocksPageBlocksPuffsBlockPuffsPuff {
|
||||
puff {
|
||||
...Puff
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
${Puff}
|
||||
`
|
||||
@@ -1,23 +0,0 @@
|
||||
import { gql } from "graphql-tag"
|
||||
|
||||
import { SysAsset } from "../SysAsset.graphql"
|
||||
|
||||
export const TextBlock = gql`
|
||||
fragment TextBlock on CurrentBlocksPageBlocksText {
|
||||
text {
|
||||
content {
|
||||
embedded_itemsConnection {
|
||||
totalCount
|
||||
edges {
|
||||
node {
|
||||
__typename
|
||||
...SysAsset
|
||||
}
|
||||
}
|
||||
}
|
||||
json
|
||||
}
|
||||
}
|
||||
}
|
||||
${SysAsset}
|
||||
`
|
||||
@@ -1,13 +0,0 @@
|
||||
import { gql } from "graphql-tag"
|
||||
|
||||
export const CurrentBlocksPageBreadcrumbs = gql`
|
||||
fragment CurrentBlocksPageBreadcrumbs on CurrentBlocksPage {
|
||||
breadcrumbs {
|
||||
parents {
|
||||
href
|
||||
title
|
||||
}
|
||||
title
|
||||
}
|
||||
}
|
||||
`
|
||||
@@ -1,32 +0,0 @@
|
||||
import { gql } from "graphql-tag"
|
||||
|
||||
import { System } from "../System.graphql"
|
||||
|
||||
export const PromoCampaignPageBreadcrumb = gql`
|
||||
fragment PromoCampaignPageBreadcrumb on PromoCampaignPage {
|
||||
web {
|
||||
breadcrumbs {
|
||||
title
|
||||
}
|
||||
}
|
||||
system {
|
||||
...System
|
||||
}
|
||||
url
|
||||
}
|
||||
${System}
|
||||
`
|
||||
|
||||
export const PromoCampaignPageBreadcrumbRef = gql`
|
||||
fragment PromoCampaignPageBreadcrumbRef on PromoCampaignPage {
|
||||
web {
|
||||
breadcrumbs {
|
||||
title
|
||||
}
|
||||
}
|
||||
system {
|
||||
...System
|
||||
}
|
||||
}
|
||||
${System}
|
||||
`
|
||||
@@ -1,71 +0,0 @@
|
||||
import { gql } from "graphql-tag"
|
||||
|
||||
export const ContactExtraInfo = gql`
|
||||
fragment ContactExtraInfo on ContactBlockSectionsExtraInfo {
|
||||
extra_info {
|
||||
text
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
export const ContactMailingAddress = gql`
|
||||
fragment ContactMailingAddress on ContactBlockSectionsMailingAddress {
|
||||
mailing_address {
|
||||
city
|
||||
country
|
||||
name
|
||||
street
|
||||
zip
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
export const ContactPhone = gql`
|
||||
fragment ContactPhone on ContactBlockSectionsPhone {
|
||||
phone {
|
||||
number
|
||||
title
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
export const ContactTitle = gql`
|
||||
fragment ContactTitle on ContactBlockSectionsTitle {
|
||||
title {
|
||||
text
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
export const ContactVisitingAddress = gql`
|
||||
fragment ContactVisitingAddress on ContactBlockSectionsVisitingAddress {
|
||||
visiting_address {
|
||||
city
|
||||
country
|
||||
street
|
||||
zip
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
export const Contact = gql`
|
||||
fragment Contact on ContactBlock {
|
||||
sections {
|
||||
__typename
|
||||
...ContactExtraInfo
|
||||
...ContactMailingAddress
|
||||
...ContactPhone
|
||||
...ContactTitle
|
||||
...ContactVisitingAddress
|
||||
}
|
||||
system {
|
||||
locale
|
||||
uid
|
||||
}
|
||||
}
|
||||
${ContactExtraInfo}
|
||||
${ContactMailingAddress}
|
||||
${ContactPhone}
|
||||
${ContactTitle}
|
||||
${ContactVisitingAddress}
|
||||
`
|
||||
@@ -1,32 +0,0 @@
|
||||
import { gql } from "graphql-tag"
|
||||
|
||||
import { SysAsset } from "../SysAsset.graphql"
|
||||
|
||||
export const CurrentFooterAppDownloads = gql`
|
||||
fragment CurrentFooterAppDownloads on CurrentFooter {
|
||||
app_downloads {
|
||||
title
|
||||
app_store {
|
||||
href
|
||||
imageConnection {
|
||||
edges {
|
||||
node {
|
||||
...SysAsset
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
google_play {
|
||||
href
|
||||
imageConnection {
|
||||
edges {
|
||||
node {
|
||||
...SysAsset
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
${SysAsset}
|
||||
`
|
||||
@@ -1,16 +0,0 @@
|
||||
import { gql } from "graphql-tag"
|
||||
|
||||
import { SysAsset } from "../SysAsset.graphql"
|
||||
|
||||
export const Logo = gql`
|
||||
fragment Logo on CurrentFooter {
|
||||
logoConnection {
|
||||
edges {
|
||||
node {
|
||||
...SysAsset
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
${SysAsset}
|
||||
`
|
||||
@@ -1,33 +0,0 @@
|
||||
import { gql } from "graphql-tag"
|
||||
|
||||
export const MainLinks = gql`
|
||||
fragment MainLinks on Footer {
|
||||
main_links {
|
||||
title
|
||||
open_in_new_tab
|
||||
link {
|
||||
href
|
||||
title
|
||||
}
|
||||
pageConnection {
|
||||
edges {
|
||||
node {
|
||||
__typename
|
||||
... on AccountPage {
|
||||
title
|
||||
url
|
||||
}
|
||||
... on LoyaltyPage {
|
||||
title
|
||||
url
|
||||
}
|
||||
... on ContentPage {
|
||||
title
|
||||
url
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
@@ -1,13 +0,0 @@
|
||||
import { gql } from "graphql-tag"
|
||||
|
||||
export const Navigation = gql`
|
||||
fragment Navigation on CurrentFooter {
|
||||
navigation {
|
||||
links {
|
||||
href
|
||||
title
|
||||
}
|
||||
title
|
||||
}
|
||||
}
|
||||
`
|
||||
@@ -1,31 +0,0 @@
|
||||
import { gql } from "graphql-tag"
|
||||
|
||||
import { AccountPageRef } from "../../AccountPage/Ref.graphql"
|
||||
import { ContentPageRef } from "../../ContentPage/Ref.graphql"
|
||||
import { LoyaltyPageRef } from "../../LoyaltyPage/Ref.graphql"
|
||||
import { System } from "../../System.graphql"
|
||||
|
||||
export const MainLinksRef = gql`
|
||||
fragment MainLinksRef on Footer {
|
||||
__typename
|
||||
main_links {
|
||||
pageConnection {
|
||||
edges {
|
||||
node {
|
||||
__typename
|
||||
...LoyaltyPageRef
|
||||
...ContentPageRef
|
||||
...AccountPageRef
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
system {
|
||||
...System
|
||||
}
|
||||
}
|
||||
${System}
|
||||
${LoyaltyPageRef}
|
||||
${AccountPageRef}
|
||||
${ContentPageRef}
|
||||
`
|
||||
@@ -1,33 +0,0 @@
|
||||
import { gql } from "graphql-tag"
|
||||
|
||||
import { AccountPageRef } from "../../AccountPage/Ref.graphql"
|
||||
import { ContentPageRef } from "../../ContentPage/Ref.graphql"
|
||||
import { LoyaltyPageRef } from "../../LoyaltyPage/Ref.graphql"
|
||||
import { System } from "../../System.graphql"
|
||||
|
||||
export const SecondaryLinksRef = gql`
|
||||
fragment SecondaryLinksRef on Footer {
|
||||
__typename
|
||||
secondary_links {
|
||||
links {
|
||||
pageConnection {
|
||||
edges {
|
||||
node {
|
||||
__typename
|
||||
...LoyaltyPageRef
|
||||
...ContentPageRef
|
||||
...AccountPageRef
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
system {
|
||||
...System
|
||||
}
|
||||
}
|
||||
${System}
|
||||
${LoyaltyPageRef}
|
||||
${AccountPageRef}
|
||||
${ContentPageRef}
|
||||
`
|
||||
@@ -1,24 +0,0 @@
|
||||
import { gql } from "graphql-tag"
|
||||
|
||||
export const SecondaryLinks = gql`
|
||||
fragment SecondaryLinks on Footer {
|
||||
secondary_links {
|
||||
title
|
||||
links {
|
||||
title
|
||||
open_in_new_tab
|
||||
pageConnection {
|
||||
edges {
|
||||
node {
|
||||
__typename
|
||||
}
|
||||
}
|
||||
}
|
||||
link {
|
||||
href
|
||||
title
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
@@ -1,21 +0,0 @@
|
||||
import { gql } from "graphql-tag"
|
||||
|
||||
export const CurrentFooterSocialMedia = gql`
|
||||
fragment CurrentFooterSocialMedia on CurrentFooter {
|
||||
social_media {
|
||||
title
|
||||
facebook {
|
||||
href
|
||||
title
|
||||
}
|
||||
instagram {
|
||||
href
|
||||
title
|
||||
}
|
||||
twitter {
|
||||
href
|
||||
title
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
@@ -1,19 +0,0 @@
|
||||
import { gql } from "graphql-tag"
|
||||
|
||||
import { SysAsset } from "../SysAsset.graphql"
|
||||
|
||||
export const TripAdvisor = gql`
|
||||
fragment TripAdvisor on CurrentFooter {
|
||||
trip_advisor {
|
||||
logoConnection {
|
||||
edges {
|
||||
node {
|
||||
...SysAsset
|
||||
}
|
||||
}
|
||||
}
|
||||
title
|
||||
}
|
||||
}
|
||||
${SysAsset}
|
||||
`
|
||||
@@ -1,29 +0,0 @@
|
||||
import { gql } from "graphql-tag"
|
||||
|
||||
import { AccountPageRef } from "../../AccountPage/Ref.graphql"
|
||||
import { ContentPageRef } from "../../ContentPage/Ref.graphql"
|
||||
import { LoyaltyPageRef } from "../../LoyaltyPage/Ref.graphql"
|
||||
|
||||
export const TertiaryLinksRef = gql`
|
||||
fragment TertiaryLinksRef on Footer {
|
||||
__typename
|
||||
tertiary_links {
|
||||
pageConnection {
|
||||
edges {
|
||||
node {
|
||||
__typename
|
||||
...LoyaltyPageRef
|
||||
...ContentPageRef
|
||||
...AccountPageRef
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
system {
|
||||
...System
|
||||
}
|
||||
}
|
||||
${LoyaltyPageRef}
|
||||
${AccountPageRef}
|
||||
${ContentPageRef}
|
||||
`
|
||||
@@ -1,21 +0,0 @@
|
||||
import { gql } from "graphql-tag"
|
||||
|
||||
export const Grid = gql`
|
||||
fragment Grid on Grid {
|
||||
columns {
|
||||
span
|
||||
rows {
|
||||
rowConnection {
|
||||
edges {
|
||||
node {
|
||||
__typename
|
||||
... on Card {
|
||||
title
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
@@ -1,17 +0,0 @@
|
||||
import { gql } from "graphql-tag"
|
||||
|
||||
import { SysAsset } from "./SysAsset.graphql"
|
||||
|
||||
export const Hero = gql`
|
||||
fragment Hero on Hero {
|
||||
imagesConnection {
|
||||
totalCount
|
||||
edges {
|
||||
node {
|
||||
...SysAsset
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
${SysAsset}
|
||||
`
|
||||
@@ -1,14 +0,0 @@
|
||||
import { gql } from "graphql-tag"
|
||||
|
||||
import { System } from "../System.graphql"
|
||||
|
||||
export const CurrentBlocksPageLink = gql`
|
||||
fragment CurrentBlocksPageLink on CurrentBlocksPage {
|
||||
title
|
||||
url
|
||||
system {
|
||||
...System
|
||||
}
|
||||
}
|
||||
${System}
|
||||
`
|
||||
@@ -1,14 +0,0 @@
|
||||
import { gql } from "graphql-tag"
|
||||
|
||||
import { System } from "../System.graphql"
|
||||
|
||||
export const CurrentBlocksPageLink = gql`
|
||||
fragment CurrentBlocksPageLink on CurrentBlocksPage {
|
||||
title
|
||||
url
|
||||
system {
|
||||
...System
|
||||
}
|
||||
}
|
||||
${System}
|
||||
`
|
||||
@@ -1,22 +0,0 @@
|
||||
import { gql } from "graphql-tag"
|
||||
|
||||
import { SysAsset } from "./SysAsset.graphql"
|
||||
|
||||
export const Preamble = gql`
|
||||
fragment Preamble on CurrentBlocksPage {
|
||||
preamble {
|
||||
text {
|
||||
json
|
||||
embedded_itemsConnection(limit: 30) {
|
||||
edges {
|
||||
node {
|
||||
__typename
|
||||
...SysAsset
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
${SysAsset}
|
||||
`
|
||||
@@ -1,25 +0,0 @@
|
||||
import { gql } from "graphql-tag"
|
||||
|
||||
import { SysAsset } from "./SysAsset.graphql"
|
||||
|
||||
export const Puff = gql`
|
||||
fragment Puff on Puff {
|
||||
imageConnection {
|
||||
edges {
|
||||
node {
|
||||
...SysAsset
|
||||
}
|
||||
}
|
||||
}
|
||||
puff_style
|
||||
link {
|
||||
href
|
||||
title
|
||||
}
|
||||
text {
|
||||
json
|
||||
}
|
||||
title
|
||||
}
|
||||
${SysAsset}
|
||||
`
|
||||
@@ -1,19 +0,0 @@
|
||||
import { gql } from "graphql-tag"
|
||||
|
||||
export const GetRewards = gql`
|
||||
query GetRewards($locale: String!, $rewardIds: [String!]) {
|
||||
all_reward(locale: $locale, where: { reward_id_in: $rewardIds }) {
|
||||
items {
|
||||
taxonomies {
|
||||
term_uid
|
||||
}
|
||||
label
|
||||
grouped_label
|
||||
description
|
||||
grouped_description
|
||||
value
|
||||
reward_id
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
@@ -1,150 +0,0 @@
|
||||
# GraphQL to TypeScript Converter
|
||||
|
||||
This script converts GraphQL files (`.graphql`) to TypeScript files (`.graphql.ts`) that use the `gql` template literal from `graphql-tag`.
|
||||
|
||||
## Features
|
||||
|
||||
- Converts individual fragments and queries into separate TypeScript exports
|
||||
- Handles GraphQL imports (`#import`) and converts them to TypeScript imports
|
||||
- Preserves fragment references and generates proper import statements
|
||||
- Groups multiple imports from the same file
|
||||
- Supports fragments, queries, mutations, and subscriptions
|
||||
- Handles files with multiple operations
|
||||
|
||||
## Usage
|
||||
|
||||
### Basic Conversion
|
||||
|
||||
Convert all GraphQL files in the project:
|
||||
|
||||
```bash
|
||||
yarn graphql:convert
|
||||
```
|
||||
|
||||
Convert files matching a specific pattern:
|
||||
|
||||
```bash
|
||||
yarn graphql:convert "packages/trpc/**/*.graphql"
|
||||
```
|
||||
|
||||
Convert a single file:
|
||||
|
||||
```bash
|
||||
yarn graphql:convert "path/to/file.graphql"
|
||||
```
|
||||
|
||||
### Options
|
||||
|
||||
- `--dry-run`: Preview what files would be converted without actually converting them
|
||||
- `--delete-originals`: Delete original `.graphql` files after successful conversion
|
||||
- `--help`, `-h`: Show help message
|
||||
|
||||
### Examples
|
||||
|
||||
Preview conversion:
|
||||
|
||||
```bash
|
||||
yarn graphql:convert --dry-run
|
||||
```
|
||||
|
||||
Convert and delete originals:
|
||||
|
||||
```bash
|
||||
yarn graphql:convert --delete-originals
|
||||
```
|
||||
|
||||
Convert specific directory:
|
||||
|
||||
```bash
|
||||
yarn graphql:convert "packages/trpc/lib/graphql/Fragments/**/*.graphql"
|
||||
```
|
||||
|
||||
## Input Format
|
||||
|
||||
### GraphQL Fragment
|
||||
|
||||
```graphql
|
||||
fragment Contact on ContactBlock {
|
||||
sections {
|
||||
__typename
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### GraphQL Query with Imports
|
||||
|
||||
```graphql
|
||||
#import "../Fragments/System.graphql"
|
||||
#import "../Fragments/Metadata.graphql"
|
||||
|
||||
query GetData($locale: String!) {
|
||||
data(locale: $locale) {
|
||||
...System
|
||||
...Metadata
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Output Format
|
||||
|
||||
### TypeScript Fragment
|
||||
|
||||
```typescript
|
||||
import { gql } from "graphql-tag";
|
||||
|
||||
export const Contact = gql`
|
||||
fragment Contact on ContactBlock {
|
||||
sections {
|
||||
__typename
|
||||
}
|
||||
}
|
||||
`;
|
||||
```
|
||||
|
||||
### TypeScript Query with Imports
|
||||
|
||||
```typescript
|
||||
import { gql } from "graphql-tag";
|
||||
|
||||
import { System } from "../Fragments/System.graphql";
|
||||
import { Metadata } from "../Fragments/Metadata.graphql";
|
||||
|
||||
export const GetData = gql`
|
||||
query GetData($locale: String!) {
|
||||
data(locale: $locale) {
|
||||
...System
|
||||
...Metadata
|
||||
}
|
||||
}
|
||||
${System}
|
||||
${Metadata}
|
||||
`;
|
||||
```
|
||||
|
||||
## How It Works
|
||||
|
||||
1. **Parse GraphQL Files**: Reads `.graphql` files and extracts imports and operations
|
||||
2. **Handle Imports**: Converts `#import` statements to TypeScript imports by:
|
||||
- Reading the imported file to determine export names
|
||||
- Converting paths from `.graphql` to `.graphql.ts`
|
||||
- Grouping multiple imports from the same file
|
||||
3. **Extract Operations**: Identifies fragments, queries, mutations, and subscriptions
|
||||
4. **Generate TypeScript**: Creates TypeScript files with:
|
||||
- `gql` template literals
|
||||
- Proper import statements
|
||||
- Named exports for each operation
|
||||
|
||||
## Dependencies
|
||||
|
||||
- `glob`: For file pattern matching
|
||||
- `tsx`: For TypeScript execution
|
||||
- `@types/node`: For Node.js types
|
||||
- `graphql-tag`: For the `gql` template literal (runtime dependency)
|
||||
|
||||
## Notes
|
||||
|
||||
- The script preserves the original file structure and naming
|
||||
- Fragment references (`...FragmentName`) are preserved in the GraphQL content
|
||||
- Multiple operations in a single file are split into separate exports
|
||||
- Import conflicts are avoided by using the exact export names from referenced files
|
||||
- Generated files maintain the same directory structure with `.graphql.ts` extension
|
||||
@@ -1,373 +0,0 @@
|
||||
#!/usr/bin/env tsx
|
||||
|
||||
import * as fs from "fs";
|
||||
import * as path from "path";
|
||||
import { glob } from "glob";
|
||||
|
||||
interface ImportInfo {
|
||||
fragmentName: string;
|
||||
importPath: string;
|
||||
variableName: string;
|
||||
}
|
||||
|
||||
interface GraphQLFile {
|
||||
content: string;
|
||||
imports: ImportInfo[];
|
||||
operations: Array<{ name: string; content: string }>;
|
||||
}
|
||||
|
||||
/**
|
||||
* Extracts individual fragments/operations from GraphQL content
|
||||
*/
|
||||
function extractOperations(
|
||||
content: string
|
||||
): Array<{ name: string; content: string }> {
|
||||
const operations: Array<{ name: string; content: string }> = [];
|
||||
|
||||
// Split content into lines for processing
|
||||
const lines = content.split("\n");
|
||||
let currentOperation: { name: string; content: string[] } | null = null;
|
||||
let braceCount = 0;
|
||||
|
||||
for (const line of lines) {
|
||||
const trimmedLine = line.trim();
|
||||
|
||||
// Check if this line starts a new operation
|
||||
const fragmentMatch = trimmedLine.match(/^fragment\s+(\w+)\s+on/);
|
||||
const queryMatch = trimmedLine.match(/^query\s+(\w+)\s*[({]/);
|
||||
const mutationMatch = trimmedLine.match(/^mutation\s+(\w+)\s*[({]/);
|
||||
const subscriptionMatch = trimmedLine.match(
|
||||
/^subscription\s+(\w+)\s*[({]/
|
||||
);
|
||||
|
||||
if (fragmentMatch || queryMatch || mutationMatch || subscriptionMatch) {
|
||||
// Finish previous operation if exists
|
||||
if (currentOperation && currentOperation.content.length > 0) {
|
||||
operations.push({
|
||||
name: currentOperation.name,
|
||||
content: currentOperation.content.join("\n").trim(),
|
||||
});
|
||||
}
|
||||
|
||||
// Start new operation
|
||||
const operationName = (fragmentMatch ||
|
||||
queryMatch ||
|
||||
mutationMatch ||
|
||||
subscriptionMatch)![1];
|
||||
currentOperation = {
|
||||
name: operationName,
|
||||
content: [line],
|
||||
};
|
||||
|
||||
// Count braces in the current line
|
||||
braceCount =
|
||||
(line.match(/{/g) || []).length -
|
||||
(line.match(/}/g) || []).length;
|
||||
} else if (currentOperation) {
|
||||
// Add line to current operation
|
||||
currentOperation.content.push(line);
|
||||
|
||||
// Update brace count
|
||||
braceCount +=
|
||||
(line.match(/{/g) || []).length -
|
||||
(line.match(/}/g) || []).length;
|
||||
|
||||
// If we've closed all braces, this operation is complete
|
||||
if (braceCount === 0 && trimmedLine.includes("}")) {
|
||||
operations.push({
|
||||
name: currentOperation.name,
|
||||
content: currentOperation.content.join("\n").trim(),
|
||||
});
|
||||
currentOperation = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Handle case where file ends without closing brace
|
||||
if (currentOperation && currentOperation.content.length > 0) {
|
||||
operations.push({
|
||||
name: currentOperation.name,
|
||||
content: currentOperation.content.join("\n").trim(),
|
||||
});
|
||||
}
|
||||
|
||||
return operations;
|
||||
}
|
||||
|
||||
/**
|
||||
* Generates TypeScript content from parsed GraphQL
|
||||
*/
|
||||
function generateTypeScriptContent(parsedFile: GraphQLFile): string {
|
||||
const { imports, operations } = parsedFile;
|
||||
|
||||
let output = 'import { gql } from "graphql-tag"\n';
|
||||
|
||||
// Add imports for fragments - group by import path to avoid duplicates
|
||||
if (imports.length > 0) {
|
||||
output += "\n";
|
||||
|
||||
const importsByPath = new Map<string, string[]>();
|
||||
for (const imp of imports) {
|
||||
if (!importsByPath.has(imp.importPath)) {
|
||||
importsByPath.set(imp.importPath, []);
|
||||
}
|
||||
if (
|
||||
!importsByPath.get(imp.importPath)!.includes(imp.variableName)
|
||||
) {
|
||||
importsByPath.get(imp.importPath)!.push(imp.variableName);
|
||||
}
|
||||
}
|
||||
|
||||
for (const [importPath, variableNames] of importsByPath) {
|
||||
output += `import { ${variableNames.join(", ")} } from "${importPath}"\n`;
|
||||
}
|
||||
}
|
||||
|
||||
output += "\n";
|
||||
|
||||
// Generate exports for each operation
|
||||
if (operations.length === 0) {
|
||||
// If no operation names found, use a default export
|
||||
const defaultName = "GraphQLDocument";
|
||||
const fragmentSubstitutions =
|
||||
imports.length > 0
|
||||
? "\n" +
|
||||
imports.map((imp) => `\${${imp.variableName}}`).join("\n")
|
||||
: "";
|
||||
output += `export const ${defaultName} = gql\`\n${parsedFile.content}${fragmentSubstitutions}\n\`\n`;
|
||||
} else {
|
||||
for (let i = 0; i < operations.length; i++) {
|
||||
const operation = operations[i];
|
||||
const fragmentSubstitutions =
|
||||
imports.length > 0
|
||||
? "\n" +
|
||||
imports.map((imp) => `\${${imp.variableName}}`).join("\n")
|
||||
: "";
|
||||
output += `export const ${operation.name} = gql\`\n${operation.content}${fragmentSubstitutions}\n\`\n`;
|
||||
|
||||
if (i < operations.length - 1) {
|
||||
output += "\n";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return output;
|
||||
}
|
||||
|
||||
/**
|
||||
* Converts a GraphQL import path to a TypeScript import path
|
||||
*/
|
||||
function convertImportPath(graphqlPath: string): string {
|
||||
// Remove the .graphql extension and add .graphql
|
||||
const withoutExt = graphqlPath.replace(/\.graphql$/, "");
|
||||
return `${withoutExt}.graphql`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets the export names from a GraphQL file by analyzing the fragments it contains
|
||||
*/
|
||||
function getExportNamesFromGraphQLFile(filePath: string): string[] {
|
||||
try {
|
||||
const content = fs.readFileSync(filePath, "utf-8");
|
||||
const operations = extractOperations(content);
|
||||
return operations.map((op) => op.name);
|
||||
} catch {
|
||||
// If file doesn't exist or can't be read, try to infer from path
|
||||
console.warn(
|
||||
`Warning: Could not read ${filePath}, inferring export name from path`
|
||||
);
|
||||
return [getVariableNameFromPath(filePath)];
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Extracts the expected variable name from a file path
|
||||
*/
|
||||
function getVariableNameFromPath(filePath: string): string {
|
||||
const basename = path.basename(filePath, ".graphql");
|
||||
|
||||
// Convert kebab-case or snake_case to PascalCase
|
||||
return basename
|
||||
.split(/[-_]/)
|
||||
.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
|
||||
.join("");
|
||||
}
|
||||
|
||||
/**
|
||||
* Parses a GraphQL file and extracts imports and content
|
||||
*/
|
||||
function parseGraphQLFile(filePath: string): GraphQLFile {
|
||||
const content = fs.readFileSync(filePath, "utf-8");
|
||||
const lines = content.split("\n");
|
||||
const imports: ImportInfo[] = [];
|
||||
const contentLines: string[] = [];
|
||||
|
||||
for (const line of lines) {
|
||||
const trimmedLine = line.trim();
|
||||
|
||||
if (trimmedLine.startsWith("#import")) {
|
||||
// Extract import path from #import "path"
|
||||
const match = trimmedLine.match(/#import\s+"([^"]+)"/);
|
||||
if (match) {
|
||||
const importPath = match[1];
|
||||
const fullImportPath = path.resolve(
|
||||
path.dirname(filePath),
|
||||
importPath
|
||||
);
|
||||
const exportNames =
|
||||
getExportNamesFromGraphQLFile(fullImportPath);
|
||||
const tsImportPath = convertImportPath(importPath);
|
||||
|
||||
// Add all exports from the imported file
|
||||
for (const exportName of exportNames) {
|
||||
imports.push({
|
||||
fragmentName: exportName,
|
||||
importPath: tsImportPath,
|
||||
variableName: exportName,
|
||||
});
|
||||
}
|
||||
}
|
||||
} else if (trimmedLine && !trimmedLine.startsWith("#")) {
|
||||
contentLines.push(line);
|
||||
}
|
||||
}
|
||||
|
||||
const cleanContent = contentLines.join("\n").trim();
|
||||
const operations = extractOperations(cleanContent);
|
||||
|
||||
return {
|
||||
content: cleanContent,
|
||||
imports,
|
||||
operations,
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Converts a single GraphQL file to TypeScript
|
||||
*/
|
||||
function convertFile(graphqlPath: string): void {
|
||||
try {
|
||||
console.log(`Converting: ${graphqlPath}`);
|
||||
|
||||
const parsed = parseGraphQLFile(graphqlPath);
|
||||
const tsContent = generateTypeScriptContent(parsed);
|
||||
const tsPath = graphqlPath.replace(/\.graphql$/, ".graphql.ts");
|
||||
|
||||
fs.writeFileSync(tsPath, tsContent, "utf-8");
|
||||
console.log(`✓ Created: ${tsPath}`);
|
||||
|
||||
// Optionally remove the original .graphql file
|
||||
// Uncomment the next line if you want to delete the original files
|
||||
// fs.unlinkSync(graphqlPath)
|
||||
} catch (error) {
|
||||
console.error(`Error converting ${graphqlPath}:`, error);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Main function to convert all GraphQL files
|
||||
*/
|
||||
async function main() {
|
||||
const args = process.argv.slice(2);
|
||||
|
||||
if (args.includes("--help") || args.includes("-h")) {
|
||||
console.log(`
|
||||
GraphQL to TypeScript Converter
|
||||
|
||||
Converts GraphQL files (.graphql) to TypeScript files (.graphql.ts) using gql template literals.
|
||||
|
||||
Usage: tsx convert-graphql-to-ts.ts [options] [pattern]
|
||||
|
||||
Options:
|
||||
--help, -h Show this help message
|
||||
--dry-run Show what files would be converted without converting them
|
||||
--delete-originals Delete original .graphql files after conversion
|
||||
|
||||
Examples:
|
||||
tsx convert-graphql-to-ts.ts # Convert all .graphql files
|
||||
tsx convert-graphql-to-ts.ts "packages/trpc/**/*.graphql" # Convert specific pattern
|
||||
tsx convert-graphql-to-ts.ts --dry-run # Preview conversion
|
||||
tsx convert-graphql-to-ts.ts --delete-originals # Convert and delete originals
|
||||
|
||||
Features:
|
||||
• Converts fragments, queries, mutations, and subscriptions
|
||||
• Handles GraphQL imports (#import) and converts to TypeScript imports
|
||||
• Preserves fragment references and generates proper import statements
|
||||
• Groups multiple imports from the same file
|
||||
• Splits multiple operations into separate exports
|
||||
`);
|
||||
return;
|
||||
}
|
||||
|
||||
const dryRun = args.includes("--dry-run");
|
||||
const deleteOriginals = args.includes("--delete-originals");
|
||||
|
||||
// Get the pattern from args or use default
|
||||
const pattern = args.find((arg) => !arg.startsWith("--")) || "**/*.graphql";
|
||||
|
||||
console.log(`🔍 Searching for GraphQL files with pattern: ${pattern}`);
|
||||
|
||||
try {
|
||||
const files = await glob(pattern, {
|
||||
ignore: ["**/*.graphql.ts", "**/node_modules/**"],
|
||||
});
|
||||
|
||||
if (files.length === 0) {
|
||||
console.log("❌ No GraphQL files found.");
|
||||
return;
|
||||
}
|
||||
|
||||
console.log(`📁 Found ${files.length} GraphQL files`);
|
||||
|
||||
if (dryRun) {
|
||||
console.log("\n📋 Files that would be converted:");
|
||||
files.forEach((file, index) => {
|
||||
console.log(
|
||||
` ${index + 1}. ${file} → ${file.replace(/\.graphql$/, ".graphql.ts")}`
|
||||
);
|
||||
});
|
||||
console.log("\n🔍 --dry-run mode: No files were converted.");
|
||||
return;
|
||||
}
|
||||
|
||||
console.log("\n🔄 Converting files...");
|
||||
let successCount = 0;
|
||||
let errorCount = 0;
|
||||
|
||||
for (let i = 0; i < files.length; i++) {
|
||||
const file = files[i];
|
||||
try {
|
||||
console.log(
|
||||
`📝 [${i + 1}/${files.length}] Converting: ${file}`
|
||||
);
|
||||
convertFile(file);
|
||||
successCount++;
|
||||
|
||||
if (deleteOriginals) {
|
||||
fs.unlinkSync(file);
|
||||
console.log(`🗑️ Deleted: ${file}`);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(`❌ Error converting ${file}:`, error);
|
||||
errorCount++;
|
||||
}
|
||||
}
|
||||
|
||||
console.log(`\n✅ Conversion complete!`);
|
||||
console.log(` 📈 Successfully converted: ${successCount} files`);
|
||||
if (errorCount > 0) {
|
||||
console.log(` ❌ Errors: ${errorCount} files`);
|
||||
}
|
||||
if (deleteOriginals && successCount > 0) {
|
||||
console.log(` 🗑️ Deleted: ${successCount} original files`);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("❌ Error:", error);
|
||||
process.exit(1);
|
||||
}
|
||||
}
|
||||
|
||||
// Run the script
|
||||
if (import.meta.url === `file://${process.argv[1]}`) {
|
||||
main().catch(console.error);
|
||||
}
|
||||
Reference in New Issue
Block a user