From 6f8c749209b5ea3b4e126e3cf6eb619b4760a72b Mon Sep 17 00:00:00 2001 From: adriangohjw Date: Tue, 12 Nov 2024 01:30:26 +0800 Subject: [PATCH 1/4] move collection layout processing to server-side --- .../CollectionCard/CollectionCard.tsx | 54 ++++++++++--------- .../next/layouts/Collection/Collection.tsx | 47 ++++++++++++++-- .../layouts/Collection/CollectionClient.tsx | 11 ++-- .../layouts/Collection/CollectionResults.tsx | 6 +-- .../next/layouts/Collection/useCollection.ts | 11 ++-- .../next/layouts/Collection/utils.ts | 14 ++--- 6 files changed, 95 insertions(+), 48 deletions(-) diff --git a/packages/components/src/templates/next/components/internal/CollectionCard/CollectionCard.tsx b/packages/components/src/templates/next/components/internal/CollectionCard/CollectionCard.tsx index 785eba53c..0366303b9 100644 --- a/packages/components/src/templates/next/components/internal/CollectionCard/CollectionCard.tsx +++ b/packages/components/src/templates/next/components/internal/CollectionCard/CollectionCard.tsx @@ -2,20 +2,27 @@ import { Text } from "react-aria-components" -import type { CollectionCardProps as BaseCollectionCardProps } from "~/interfaces" +import type { CollectionCardProps as CollectionCardPropsInterface } from "~/interfaces" +import type { CollectionPageSchemaType } from "~/types" import { tv } from "~/lib/tv" -import { - focusVisibleHighlight, - getFormattedDate, - getReferenceLinkHref, - isExternalUrl, -} from "~/utils" +import { focusVisibleHighlight, getFormattedDate } from "~/utils" import { ImageClient } from "../../complex/Image" import { Link } from "../Link" -type CollectionCardProps = BaseCollectionCardProps & { - shouldShowDate?: boolean +// NOTE: This is client-side rendering and we want as much pre-processing +// on the server as possible to improve performance + reduce file and bandwidth size +// Thus, only the necessary props are passed to this component. +type CollectionCardProps = Pick< + CollectionCardPropsInterface, + "lastUpdated" | "category" | "title" | "description" | "image" +> & { + referenceLinkHref: string | undefined + imageSrc: string | undefined + itemTitle: string } +// NOTE: This is to ensure no additional props are being passed to this component +export type ProcessedCollectionCardProps = CollectionCardProps & + Record const collectionCardLinkStyle = tv({ extend: focusVisibleHighlight, @@ -23,24 +30,21 @@ const collectionCardLinkStyle = tv({ }) export const CollectionCard = ({ - shouldShowDate = true, LinkComponent, - url, lastUpdated, - title, description, category, image, - site, - ...props -}: CollectionCardProps): JSX.Element => { - const file = props.variant === "file" ? props.fileDetails : null - const itemTitle = `${title}${file ? ` [${file.type.toUpperCase()}, ${file.size.toUpperCase()}]` : ""}` - const imgSrc = - isExternalUrl(image?.src) || site.assetsBaseUrl === undefined - ? image?.src - : `${site.assetsBaseUrl}${image?.src}` - + referenceLinkHref, + imageSrc, + itemTitle, + siteAssetsBaseUrl, + shouldShowDate = true, +}: CollectionCardProps & { + shouldShowDate?: boolean + siteAssetsBaseUrl: string | undefined + LinkComponent: CollectionPageSchemaType["LinkComponent"] +}): JSX.Element => { return (
{shouldShowDate && ( @@ -52,7 +56,7 @@ export const CollectionCard = ({

{itemTitle} @@ -71,11 +75,11 @@ export const CollectionCard = ({ {image && (
)} diff --git a/packages/components/src/templates/next/layouts/Collection/Collection.tsx b/packages/components/src/templates/next/layouts/Collection/Collection.tsx index 243b0b2a0..17e35f184 100644 --- a/packages/components/src/templates/next/layouts/Collection/Collection.tsx +++ b/packages/components/src/templates/next/layouts/Collection/Collection.tsx @@ -1,9 +1,12 @@ import type { CollectionPageSchemaType, IsomerSiteProps } from "~/engine" import type { CollectionCardProps } from "~/interfaces" +import type { ProcessedCollectionCardProps } from "~/templates/next/components/internal/CollectionCard" import { getBreadcrumbFromSiteMap, getParsedDate, + getReferenceLinkHref, getSitemapAsArray, + isExternalUrl, } from "~/utils" import { Skeleton } from "../Skeleton" import CollectionClient from "./CollectionClient" @@ -105,6 +108,41 @@ const getCollectionItems = ( }) as CollectionCardProps[] } +const processedCollectionItems = ( + items: CollectionCardProps[], +): ProcessedCollectionCardProps[] => { + return items.map((item) => { + const { + site, + variant, + lastUpdated, + category, + title, + description, + image, + url, + } = item + const file = variant === "file" ? item.fileDetails : null + return { + lastUpdated, + category, + title, + description, + image, + referenceLinkHref: getReferenceLinkHref( + item.url, + site.siteMap, + site.assetsBaseUrl, + ), + imageSrc: + isExternalUrl(item.image?.src) || site.assetsBaseUrl === undefined + ? item.image?.src + : `${site.assetsBaseUrl}${item.image?.src}`, + itemTitle: `${item.title}${file ? ` [${file.type.toUpperCase()}, ${file.size.toUpperCase()}]` : ""}`, + } as ProcessedCollectionCardProps // Ensure no additional props are being returned + }) +} + const CollectionLayout = ({ site, page, @@ -115,6 +153,7 @@ const CollectionLayout = ({ const { permalink } = page const items = getCollectionItems(site, permalink) + const processedItems = processedCollectionItems(items) const breadcrumb = getBreadcrumbFromSiteMap( site.siteMap, page.permalink.split("/").slice(1), @@ -131,11 +170,11 @@ const CollectionLayout = ({ ) diff --git a/packages/components/src/templates/next/layouts/Collection/CollectionClient.tsx b/packages/components/src/templates/next/layouts/Collection/CollectionClient.tsx index ff7631d11..7d8988e0e 100644 --- a/packages/components/src/templates/next/layouts/Collection/CollectionClient.tsx +++ b/packages/components/src/templates/next/layouts/Collection/CollectionClient.tsx @@ -4,7 +4,8 @@ import { useRef } from "react" import type { Filter as FilterType } from "../../types/Filter" import type { CollectionPageSchemaType } from "~/engine" -import type { BreadcrumbProps, CollectionCardProps } from "~/interfaces" +import type { BreadcrumbProps } from "~/interfaces" +import type { ProcessedCollectionCardProps } from "~/templates/next/components/internal/CollectionCard" import { tv } from "~/lib/tv" import { BackToTopLink, @@ -18,12 +19,12 @@ import { ITEMS_PER_PAGE, useCollection } from "./useCollection" interface CollectionClientProps { page: CollectionPageSchemaType["page"] - items: CollectionCardProps[] + items: ProcessedCollectionCardProps[] filters: FilterType[] shouldShowDate: boolean + siteAssetsBaseUrl: string | undefined breadcrumb: BreadcrumbProps LinkComponent: CollectionPageSchemaType["LinkComponent"] - site: CollectionPageSchemaType["site"] } const createCollectionLayoutStyles = tv({ @@ -50,9 +51,9 @@ const CollectionClient = ({ items, filters, shouldShowDate, + siteAssetsBaseUrl, breadcrumb, LinkComponent, - site, }: CollectionClientProps) => { const { paginatedItems, @@ -124,8 +125,8 @@ const CollectionClient = ({ searchValue={searchValue} totalCount={totalCount} shouldShowDate={shouldShowDate} + siteAssetsBaseUrl={siteAssetsBaseUrl} LinkComponent={LinkComponent} - site={site} />

{paginatedItems.length > 0 && ( diff --git a/packages/components/src/templates/next/layouts/Collection/CollectionResults.tsx b/packages/components/src/templates/next/layouts/Collection/CollectionResults.tsx index 69efdb338..202ebc5bf 100644 --- a/packages/components/src/templates/next/layouts/Collection/CollectionResults.tsx +++ b/packages/components/src/templates/next/layouts/Collection/CollectionResults.tsx @@ -13,8 +13,8 @@ interface CollectionResultProps | "totalCount" > { shouldShowDate?: boolean + siteAssetsBaseUrl: string | undefined LinkComponent: CollectionPageSchemaType["LinkComponent"] - site: CollectionPageSchemaType["site"] } export const CollectionResults = ({ @@ -25,8 +25,8 @@ export const CollectionResults = ({ handleClearFilter, totalCount, shouldShowDate = true, + siteAssetsBaseUrl, LinkComponent, - site, }: CollectionResultProps) => { if (totalCount === 0) { return ( @@ -61,8 +61,8 @@ export const CollectionResults = ({ key={Math.random()} {...item} shouldShowDate={shouldShowDate} + siteAssetsBaseUrl={siteAssetsBaseUrl} LinkComponent={LinkComponent} - site={site} /> ))} {paginatedItems.length === 0 && ( diff --git a/packages/components/src/templates/next/layouts/Collection/useCollection.ts b/packages/components/src/templates/next/layouts/Collection/useCollection.ts index f5526e316..77d45d966 100644 --- a/packages/components/src/templates/next/layouts/Collection/useCollection.ts +++ b/packages/components/src/templates/next/layouts/Collection/useCollection.ts @@ -7,7 +7,7 @@ import { } from "react" import type { AppliedFilter } from "../../types/Filter" -import type { CollectionCardProps } from "~/interfaces" +import type { ProcessedCollectionCardProps } from "~/templates/next/components/internal/CollectionCard" import { getFilteredItems, getPaginatedItems, @@ -16,10 +16,11 @@ import { export const ITEMS_PER_PAGE = 10 -interface UseCollectionProps { - items: CollectionCardProps[] -} -export const useCollection = ({ items }: UseCollectionProps) => { +export const useCollection = ({ + items, +}: { + items: ProcessedCollectionCardProps[] +}) => { const [appliedFilters, setAppliedFilters] = useState([]) const [searchValue, _setSearchValue] = useState("") diff --git a/packages/components/src/templates/next/layouts/Collection/utils.ts b/packages/components/src/templates/next/layouts/Collection/utils.ts index e359813bb..b3c3dfb52 100644 --- a/packages/components/src/templates/next/layouts/Collection/utils.ts +++ b/packages/components/src/templates/next/layouts/Collection/utils.ts @@ -1,5 +1,5 @@ import type { AppliedFilter, Filter as FilterType } from "../../types/Filter" -import type { CollectionCardProps } from "~/interfaces" +import type { ProcessedCollectionCardProps } from "~/templates/next/components/internal/CollectionCard" import { getParsedDate } from "~/utils" const FILTER_ID_CATEGORY = "category" @@ -7,7 +7,7 @@ const FILTER_ID_YEAR = "year" const NO_SPECIFIED_YEAR_FILTER_ID = "not_specified" export const getAvailableFilters = ( - items: CollectionCardProps[], + items: ProcessedCollectionCardProps[], ): FilterType[] => { const categories: Record = {} const years: Record = {} @@ -80,10 +80,10 @@ export const getAvailableFilters = ( } export const getFilteredItems = ( - items: CollectionCardProps[], + items: ProcessedCollectionCardProps[], appliedFilters: AppliedFilter[], searchValue: string, -): CollectionCardProps[] => { +): ProcessedCollectionCardProps[] => { return items.filter((item) => { // Step 1: Filter based on search value if ( @@ -130,7 +130,7 @@ export const getFilteredItems = ( } export const getPaginatedItems = ( - items: CollectionCardProps[], + items: ProcessedCollectionCardProps[], itemsPerPage: number, currPage: number, ) => { @@ -178,6 +178,8 @@ export const updateAppliedFilters = ( } } -export const shouldShowDate = (items: CollectionCardProps[]): boolean => { +export const shouldShowDate = ( + items: ProcessedCollectionCardProps[], +): boolean => { return items.some((item) => item.lastUpdated) } From 219e655892beacd5985cd7b2b9d063c696a55af2 Mon Sep 17 00:00:00 2001 From: adriangohjw Date: Tue, 12 Nov 2024 02:02:40 +0800 Subject: [PATCH 2/4] improve import and naming --- .../src/interfaces/internal/CollectionCard.ts | 21 +++++++++++++++---- .../src/interfaces/internal/index.ts | 6 +++++- .../CollectionCard/CollectionCard.tsx | 17 +-------------- .../next/layouts/Collection/Collection.tsx | 13 ++++++------ .../layouts/Collection/CollectionClient.tsx | 6 ++++-- .../next/layouts/Collection/useCollection.ts | 2 +- .../next/layouts/Collection/utils.ts | 2 +- 7 files changed, 35 insertions(+), 32 deletions(-) diff --git a/packages/components/src/interfaces/internal/CollectionCard.ts b/packages/components/src/interfaces/internal/CollectionCard.ts index 62fb69ebe..023683b17 100644 --- a/packages/components/src/interfaces/internal/CollectionCard.ts +++ b/packages/components/src/interfaces/internal/CollectionCard.ts @@ -33,7 +33,20 @@ export interface LinkCardProps extends BaseCardProps { variant: "link" } -export type CollectionCardProps = - | ArticleCardProps - | FileCardProps - | LinkCardProps +export type AllCardProps = ArticleCardProps | FileCardProps | LinkCardProps + +// NOTE: This is client-side rendering and we want as much pre-processing +// on the server as possible to improve performance + reduce file and bandwidth size +// Thus, only the necessary props are passed to this component. +export type CollectionCardProps = Pick< + AllCardProps, + "lastUpdated" | "category" | "title" | "description" | "image" +> & { + referenceLinkHref: string | undefined + imageSrc: string | undefined + itemTitle: string +} + +// NOTE: This is to ensure no additional props are being passed to this component +export type ProcessedCollectionCardProps = CollectionCardProps & + Record diff --git a/packages/components/src/interfaces/internal/index.ts b/packages/components/src/interfaces/internal/index.ts index 0902dc86d..d92c17007 100644 --- a/packages/components/src/interfaces/internal/index.ts +++ b/packages/components/src/interfaces/internal/index.ts @@ -3,7 +3,11 @@ export { type ArticlePageHeaderProps, } from "./ArticlePageHeader" export type { BreadcrumbProps } from "./Breadcrumb" -export type { CollectionCardProps } from "./CollectionCard" +export type { + AllCardProps, + CollectionCardProps, + ProcessedCollectionCardProps, +} from "./CollectionCard" export type { ContentProps } from "./Content" export { ContentPageHeaderSchema, diff --git a/packages/components/src/templates/next/components/internal/CollectionCard/CollectionCard.tsx b/packages/components/src/templates/next/components/internal/CollectionCard/CollectionCard.tsx index 0366303b9..daf7c5625 100644 --- a/packages/components/src/templates/next/components/internal/CollectionCard/CollectionCard.tsx +++ b/packages/components/src/templates/next/components/internal/CollectionCard/CollectionCard.tsx @@ -2,28 +2,13 @@ import { Text } from "react-aria-components" -import type { CollectionCardProps as CollectionCardPropsInterface } from "~/interfaces" +import type { CollectionCardProps } from "~/interfaces" import type { CollectionPageSchemaType } from "~/types" import { tv } from "~/lib/tv" import { focusVisibleHighlight, getFormattedDate } from "~/utils" import { ImageClient } from "../../complex/Image" import { Link } from "../Link" -// NOTE: This is client-side rendering and we want as much pre-processing -// on the server as possible to improve performance + reduce file and bandwidth size -// Thus, only the necessary props are passed to this component. -type CollectionCardProps = Pick< - CollectionCardPropsInterface, - "lastUpdated" | "category" | "title" | "description" | "image" -> & { - referenceLinkHref: string | undefined - imageSrc: string | undefined - itemTitle: string -} -// NOTE: This is to ensure no additional props are being passed to this component -export type ProcessedCollectionCardProps = CollectionCardProps & - Record - const collectionCardLinkStyle = tv({ extend: focusVisibleHighlight, base: "prose-title-md-semibold line-clamp-3 w-fit underline-offset-4 hover:underline", diff --git a/packages/components/src/templates/next/layouts/Collection/Collection.tsx b/packages/components/src/templates/next/layouts/Collection/Collection.tsx index 17e35f184..40eeb5194 100644 --- a/packages/components/src/templates/next/layouts/Collection/Collection.tsx +++ b/packages/components/src/templates/next/layouts/Collection/Collection.tsx @@ -1,6 +1,5 @@ import type { CollectionPageSchemaType, IsomerSiteProps } from "~/engine" -import type { CollectionCardProps } from "~/interfaces" -import type { ProcessedCollectionCardProps } from "~/templates/next/components/internal/CollectionCard" +import type { AllCardProps, ProcessedCollectionCardProps } from "~/interfaces" import { getBreadcrumbFromSiteMap, getParsedDate, @@ -15,7 +14,7 @@ import { getAvailableFilters, shouldShowDate } from "./utils" const getCollectionItems = ( site: IsomerSiteProps, permalink: string, -): CollectionCardProps[] => { +): AllCardProps[] => { let currSitemap = site.siteMap const permalinkParts = permalink.split("/") @@ -87,7 +86,7 @@ const getCollectionItems = ( variant: "article", url: item.permalink, } - }) satisfies CollectionCardProps[] + }) satisfies AllCardProps[] return transformedItems.sort((a, b) => { // Sort by last updated date, tiebreaker by title @@ -105,11 +104,11 @@ const getCollectionItems = ( } return a.rawDate < b.rawDate ? 1 : -1 - }) as CollectionCardProps[] + }) as AllCardProps[] } const processedCollectionItems = ( - items: CollectionCardProps[], + items: AllCardProps[], ): ProcessedCollectionCardProps[] => { return items.map((item) => { const { @@ -130,7 +129,7 @@ const processedCollectionItems = ( description, image, referenceLinkHref: getReferenceLinkHref( - item.url, + url, site.siteMap, site.assetsBaseUrl, ), diff --git a/packages/components/src/templates/next/layouts/Collection/CollectionClient.tsx b/packages/components/src/templates/next/layouts/Collection/CollectionClient.tsx index 7d8988e0e..ce3091192 100644 --- a/packages/components/src/templates/next/layouts/Collection/CollectionClient.tsx +++ b/packages/components/src/templates/next/layouts/Collection/CollectionClient.tsx @@ -4,8 +4,10 @@ import { useRef } from "react" import type { Filter as FilterType } from "../../types/Filter" import type { CollectionPageSchemaType } from "~/engine" -import type { BreadcrumbProps } from "~/interfaces" -import type { ProcessedCollectionCardProps } from "~/templates/next/components/internal/CollectionCard" +import type { + BreadcrumbProps, + ProcessedCollectionCardProps, +} from "~/interfaces" import { tv } from "~/lib/tv" import { BackToTopLink, diff --git a/packages/components/src/templates/next/layouts/Collection/useCollection.ts b/packages/components/src/templates/next/layouts/Collection/useCollection.ts index 77d45d966..e6beb583a 100644 --- a/packages/components/src/templates/next/layouts/Collection/useCollection.ts +++ b/packages/components/src/templates/next/layouts/Collection/useCollection.ts @@ -7,7 +7,7 @@ import { } from "react" import type { AppliedFilter } from "../../types/Filter" -import type { ProcessedCollectionCardProps } from "~/templates/next/components/internal/CollectionCard" +import type { ProcessedCollectionCardProps } from "~/interfaces" import { getFilteredItems, getPaginatedItems, diff --git a/packages/components/src/templates/next/layouts/Collection/utils.ts b/packages/components/src/templates/next/layouts/Collection/utils.ts index b3c3dfb52..6e1a486bd 100644 --- a/packages/components/src/templates/next/layouts/Collection/utils.ts +++ b/packages/components/src/templates/next/layouts/Collection/utils.ts @@ -1,5 +1,5 @@ import type { AppliedFilter, Filter as FilterType } from "../../types/Filter" -import type { ProcessedCollectionCardProps } from "~/templates/next/components/internal/CollectionCard" +import type { ProcessedCollectionCardProps } from "~/interfaces" import { getParsedDate } from "~/utils" const FILTER_ID_CATEGORY = "category" From b3aeb994eb3f8924b0845f58851112cfec15c9f7 Mon Sep 17 00:00:00 2001 From: adriangohjw Date: Tue, 12 Nov 2024 11:46:36 +0800 Subject: [PATCH 3/4] fix failing stories --- .../CollectionCard/CollectionCard.stories.tsx | 69 +++---------------- .../layouts/Collection/Collection.stories.tsx | 14 ++++ 2 files changed, 22 insertions(+), 61 deletions(-) diff --git a/packages/components/src/templates/next/components/internal/CollectionCard/CollectionCard.stories.tsx b/packages/components/src/templates/next/components/internal/CollectionCard/CollectionCard.stories.tsx index 33ed7a9d3..53d52162d 100644 --- a/packages/components/src/templates/next/components/internal/CollectionCard/CollectionCard.stories.tsx +++ b/packages/components/src/templates/next/components/internal/CollectionCard/CollectionCard.stories.tsx @@ -5,7 +5,7 @@ import { withChromaticModes } from "@isomer/storybook-config" import type { CollectionCardProps } from "~/interfaces" import { CollectionCard } from "./CollectionCard" -const meta: Meta = { +const meta: Meta = { title: "Next/Internal Components/CollectionCard", component: CollectionCard, argTypes: {}, @@ -16,56 +16,20 @@ const meta: Meta = { }, chromatic: withChromaticModes(["desktop", "mobile"]), }, - args: { - site: { - siteName: "Isomer Next", - siteMap: { - id: "1", - title: "Home", - permalink: "/", - lastModified: "", - layout: "homepage", - summary: "", - children: [], - }, - theme: "isomer-next", - isGovernment: true, - logoUrl: "https://www.isomer.gov.sg/images/isomer-logo.svg", - lastUpdated: "2021-10-01", - assetsBaseUrl: "https://cms.isomer.gov.sg", - navBarItems: [], - footerItems: { - privacyStatementLink: "https://www.isomer.gov.sg/privacy", - termsOfUseLink: "https://www.isomer.gov.sg/terms", - siteNavItems: [], - }, - search: { - type: "localSearch", - searchUrl: "/search", - }, - }, - }, } export default meta type Story = StoryObj const generateArgs = ({ - variant, shouldShowDate = true, isLastUpdatedUndefined = false, withoutImage = false, - fileDetails, title = "A journal on microscopic plastic and their correlation to the number of staycations enjoyed per millennials between the ages of 30-42, substantiated by research from IDK university", description = "We've looked at how people's spending correlates with how much microscopic plastic they consumed over the year. We've looked at how people's spending correlates with how much microscopic plastic they consumed over the year.", }: { - variant: string shouldShowDate?: boolean isLastUpdatedUndefined?: boolean withoutImage?: boolean - fileDetails?: { - type: string - size: string - } title?: string description?: string }): Partial & { shouldShowDate?: boolean } => { @@ -73,7 +37,6 @@ const generateArgs = ({ lastUpdated: isLastUpdatedUndefined ? undefined : "December 2, 2023", category: "Research", title, - url: "/", description, image: withoutImage ? undefined @@ -81,50 +44,34 @@ const generateArgs = ({ src: "https://placehold.co/500x500", alt: "placeholder", }, - variant: variant as "link" | "article" | "file" | undefined, - fileDetails, + referenceLinkHref: "/", + imageSrc: "https://placehold.co/500x500", + itemTitle: title, shouldShowDate, } } export const Default: Story = { - args: generateArgs({ variant: "article" }), + args: generateArgs({}), } export const UndefinedDate: Story = { - args: generateArgs({ variant: "article", isLastUpdatedUndefined: true }), + args: generateArgs({ isLastUpdatedUndefined: true }), } export const HideDate: Story = { args: generateArgs({ - variant: "article", shouldShowDate: false, isLastUpdatedUndefined: true, }), } -export const ArticleWithoutImage: Story = { - args: generateArgs({ variant: "article", withoutImage: true }), -} - -export const File: Story = { - args: generateArgs({ - variant: "file", - fileDetails: { type: "pdf", size: "2.3 MB" }, - }), -} - -export const FileWithoutImage: Story = { - args: generateArgs({ - variant: "file", - withoutImage: true, - fileDetails: { type: "pdf", size: "2.3 MB" }, - }), +export const CardWithoutImage: Story = { + args: generateArgs({ withoutImage: true }), } export const ShortDescription: Story = { args: generateArgs({ - variant: "article", title: "Short title", description: "Short description", }), diff --git a/packages/components/src/templates/next/layouts/Collection/Collection.stories.tsx b/packages/components/src/templates/next/layouts/Collection/Collection.stories.tsx index 5332f23c2..291407d9c 100644 --- a/packages/components/src/templates/next/layouts/Collection/Collection.stories.tsx +++ b/packages/components/src/templates/next/layouts/Collection/Collection.stories.tsx @@ -371,3 +371,17 @@ export const AllResultsNoDate: Story = { await expect(lastWordOccurences.length).toBe(10) }, } + +export const FileCard: Story = { + args: generateArgs({ + collectionItems: [COLLECTION_ITEMS[1]] as IsomerSitemap[], + }), +} + +export const FileCardNoImage: Story = { + args: generateArgs({ + collectionItems: [ + { ...COLLECTION_ITEMS[1], image: undefined } as IsomerSitemap, + ], + }), +} From 3e48fcd04b2cf1aa6709b042e0c4432f1c7a1135 Mon Sep 17 00:00:00 2001 From: adriangohjw Date: Tue, 12 Nov 2024 16:47:47 +0800 Subject: [PATCH 4/4] use Exact --- .../src/templates/next/layouts/Collection/Collection.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/components/src/templates/next/layouts/Collection/Collection.tsx b/packages/components/src/templates/next/layouts/Collection/Collection.tsx index 40eeb5194..8e42c9336 100644 --- a/packages/components/src/templates/next/layouts/Collection/Collection.tsx +++ b/packages/components/src/templates/next/layouts/Collection/Collection.tsx @@ -1,3 +1,5 @@ +import type { Exact } from "type-fest" + import type { CollectionPageSchemaType, IsomerSiteProps } from "~/engine" import type { AllCardProps, ProcessedCollectionCardProps } from "~/interfaces" import { @@ -138,7 +140,7 @@ const processedCollectionItems = ( ? item.image?.src : `${site.assetsBaseUrl}${item.image?.src}`, itemTitle: `${item.title}${file ? ` [${file.type.toUpperCase()}, ${file.size.toUpperCase()}]` : ""}`, - } as ProcessedCollectionCardProps // Ensure no additional props are being returned + } as Exact }) }