diff --git a/packages/web/components/elements/ProgressBar.tsx b/packages/web/components/elements/ProgressBar.tsx new file mode 100644 index 000000000..c8d15b868 --- /dev/null +++ b/packages/web/components/elements/ProgressBar.tsx @@ -0,0 +1,30 @@ +import { Box } from './../elements/LayoutPrimitives' + +type ProgressBarProps = { + fillPercentage: number + fillColor: string + backgroundColor: string + borderRadius: string +} + +export function ProgressBar(props: ProgressBarProps): JSX.Element { + return ( + + + + ) +} diff --git a/packages/web/components/patterns/LibraryCards/CardTypes.tsx b/packages/web/components/patterns/LibraryCards/CardTypes.tsx new file mode 100644 index 000000000..6fd207761 --- /dev/null +++ b/packages/web/components/patterns/LibraryCards/CardTypes.tsx @@ -0,0 +1,22 @@ +import { LayoutType } from '../../templates/homeFeed/HomeFeedContainer' +import { UserBasicData } from '../../../lib/networking/queries/useGetViewerQuery' +import type { LibraryItemNode } from '../../../lib/networking/queries/useGetLibraryItemsQuery' + +export type LinkedItemCardAction = + | 'showDetail' + | 'showOriginal' + | 'archive' + | 'unarchive' + | 'delete' + | 'mark-read' + | 'mark-unread' + | 'share' + | 'snooze' + +export type LinkedItemCardProps = { + item: LibraryItemNode + layout: LayoutType + viewer: UserBasicData + originText?: string + handleAction: (action: LinkedItemCardAction) => void +} diff --git a/packages/web/components/patterns/LibraryCards/GridLinkedItemCard.tsx b/packages/web/components/patterns/LibraryCards/GridLinkedItemCard.tsx new file mode 100644 index 000000000..bb60b4c37 --- /dev/null +++ b/packages/web/components/patterns/LibraryCards/GridLinkedItemCard.tsx @@ -0,0 +1,188 @@ +import { Box, VStack, HStack, SpanBox } from '../../elements/LayoutPrimitives' +import { CoverImage } from '../../elements/CoverImage' +import { StyledText } from '../../elements/StyledText' +import { authoredByText } from '../ArticleSubtitle' +import { MoreOptionsIcon } from '../../elements/images/MoreOptionsIcon' +import { theme } from '../../tokens/stitches.config' +import { CardMenu } from '../CardMenu' +import { LabelChip } from '../../elements/LabelChip' +import { ProgressBar } from '../../elements/ProgressBar' +import type { LinkedItemCardProps } from './CardTypes' + +export function GridLinkedItemCard(props: LinkedItemCardProps): JSX.Element { + return ( + { + props.handleAction('showDetail') + }} + > + div': { + borderRadius: '100vmax 100vmax 0 0', + }, + }} + > + + + + + + { + // This is here to prevent menu click events from bubbling + // up and causing us to "click" on the link item. + e.stopPropagation() + }} + > + + } + actionHandler={props.handleAction} + /> + + + + + {props.item.author && ( + + {authoredByText(props.item.author)} + + )} + + {props.originText} + + + + + + + {props.item.description} + + {props.item.image && ( + { + ;(e.target as HTMLElement).style.display = 'none' + }} + /> + )} + + + {props.item.labels?.map(({ description, color }, index) => ( + + ))} + + + ) +} + +type CardTitleProps = { + title: string +} + +function CardTitle(props: CardTitleProps): JSX.Element { + return ( + + {props.title} + + ) +} diff --git a/packages/web/components/patterns/LibraryCards/LinkedItemCard.tsx b/packages/web/components/patterns/LibraryCards/LinkedItemCard.tsx new file mode 100644 index 000000000..12a4a4be7 --- /dev/null +++ b/packages/web/components/patterns/LibraryCards/LinkedItemCard.tsx @@ -0,0 +1,23 @@ +import { GridLinkedItemCard } from './GridLinkedItemCard' +import { ListLinkedItemCard } from './ListLinkedItemCard' +import type { LinkedItemCardProps } from './CardTypes' + +const siteName = (originalArticleUrl: string, itemUrl: string): string => { + try { + return new URL(originalArticleUrl).hostname + } catch {} + try { + return new URL(itemUrl).hostname + } catch {} + return '' +} + +export function LinkedItemCard(props: LinkedItemCardProps): JSX.Element { + const originText = siteName(props.item.originalArticleUrl, props.item.url) + + if (props.layout == 'LIST_LAYOUT') { + return + } else { + return + } +} diff --git a/packages/web/components/patterns/LibraryCards/ListLinkedItemCard.tsx b/packages/web/components/patterns/LibraryCards/ListLinkedItemCard.tsx new file mode 100644 index 000000000..f842129b6 --- /dev/null +++ b/packages/web/components/patterns/LibraryCards/ListLinkedItemCard.tsx @@ -0,0 +1,104 @@ +import { Box, HStack } from '../../elements/LayoutPrimitives' +import { StyledText } from '../../elements/StyledText' +import { authoredByText } from '../ArticleSubtitle' +import { MoreOptionsIcon } from '../../elements/images/MoreOptionsIcon' +import { theme } from '../../tokens/stitches.config' +import { CardMenu } from '../CardMenu' +import type { LinkedItemCardProps } from './CardTypes' +import { ProgressBar } from '../../elements/ProgressBar' + +export function ListLinkedItemCard(props: LinkedItemCardProps): JSX.Element { + return ( + { + props.handleAction('showDetail') + }} + > + + + {props.item.title} + + {props.item.author && ( + + {authoredByText(props.item.author)} + + )} + + {props.originText} + + + + + + { + // This is here to prevent menu click events from bubbling + // up and causing us to "click" on the link item. + e.stopPropagation() + }} + > + + } + actionHandler={props.handleAction} + /> + + + ) +} diff --git a/packages/web/components/patterns/LinkedItemCard.tsx b/packages/web/components/patterns/LinkedItemCard.tsx deleted file mode 100644 index ad061e3a0..000000000 --- a/packages/web/components/patterns/LinkedItemCard.tsx +++ /dev/null @@ -1,348 +0,0 @@ -import { Box, VStack, HStack, SpanBox } from './../elements/LayoutPrimitives' -import type { LibraryItemNode } from '../../lib/networking/queries/useGetLibraryItemsQuery' -import { CoverImage } from './../elements/CoverImage' -import { StyledText } from './../elements/StyledText' -import { authoredByText } from './../patterns/ArticleSubtitle' -import { MoreOptionsIcon } from './../elements/images/MoreOptionsIcon' -import { theme } from './../tokens/stitches.config' -import { CardMenu } from './../patterns/CardMenu' -import { LayoutType } from '../templates/homeFeed/HomeFeedContainer' -import { UserBasicData } from '../../lib/networking/queries/useGetViewerQuery' -import { LabelChip } from './../elements/LabelChip' - -export type LinkedItemCardAction = - | 'showDetail' - | 'showOriginal' - | 'archive' - | 'unarchive' - | 'delete' - | 'mark-read' - | 'mark-unread' - | 'share' - | 'snooze' - -type LinkedItemCardProps = { - item: LibraryItemNode - layout: LayoutType - viewer: UserBasicData - handleAction: (action: LinkedItemCardAction) => void -} - -const siteName = (originalArticleUrl: string, itemUrl: string): string => { - try { - return new URL(originalArticleUrl).hostname - } catch {} - try { - return new URL(itemUrl).hostname - } catch {} - return '' -} - -export function LinkedItemCard(props: LinkedItemCardProps): JSX.Element { - if (props.layout == 'LIST_LAYOUT') { - return - } else { - return - } -} - -export function GridLinkedItemCard(props: LinkedItemCardProps): JSX.Element { - const originText = siteName(props.item.originalArticleUrl, props.item.url) - - return ( - // - { - props.handleAction('showDetail') - }} - > - div': { - borderRadius: '100vmax 100vmax 0 0', - }, - }} - > - - - - - - {props.item.title} - - { - // This is here to prevent menu click events from bubbling - // up and causing us to "click" on the link item. - e.stopPropagation() - }} - > - - } - actionHandler={props.handleAction} - /> - - - - - {props.item.author && ( - - {authoredByText(props.item.author)} - - )} - - {originText} - - - - - - - {props.item.description} - - {props.item.image && ( - { - ;(e.target as HTMLElement).style.display = 'none' - }} - /> - )} - - - {props.item.labels?.map(({ description, color }, index) => ( - - ))} - - - // - ) -} - -export function ListLinkedItemCard(props: LinkedItemCardProps): JSX.Element { - const originText = siteName(props.item.originalArticleUrl, props.item.url) - - return ( - // - { - props.handleAction('showDetail') - }} - > - - - {props.item.title} - - {props.item.author && ( - - {authoredByText(props.item.author)} - - )} - - {originText} - - - - - - { - // This is here to prevent menu click events from bubbling - // up and causing us to "click" on the link item. - e.stopPropagation() - }} - > - - } - actionHandler={props.handleAction} - /> - - - // - ) -} - -type ProgressBarProps = { - fillPercentage: number - fillColor: string - backgroundColor: string - borderRadius: string -} - -function ProgressBar(props: ProgressBarProps): JSX.Element { - return ( - - - - ) -} diff --git a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx index 48df274e4..56a53f5c1 100644 --- a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx +++ b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx @@ -5,10 +5,8 @@ import type { LibraryItem, LibraryItemsQueryInput, } from '../../../lib/networking/queries/useGetLibraryItemsQuery' -import { - LinkedItemCard, - LinkedItemCardAction, -} from '../../patterns/LinkedItemCard' +import { LinkedItemCardAction } from '../../patterns/LibraryCards/CardTypes' +import { LinkedItemCard } from '../../patterns/LibraryCards/LinkedItemCard' import { useRouter } from 'next/router' import { Button } from '../../elements/Button' import { useCallback, useEffect, useMemo, useRef, useState } from 'react' @@ -573,13 +571,15 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element { }, '&:focus': { '> div': { - boxShadow: layout === 'LIST_LAYOUT' ? 'none' : '$cardItemShadow', - } + boxShadow: + layout === 'LIST_LAYOUT' ? 'none' : '$cardItemShadow', + }, }, '&:hover': { '> div': { - boxShadow: layout === 'LIST_LAYOUT' ? 'none' : '$cardItemShadow', - } + boxShadow: + layout === 'LIST_LAYOUT' ? 'none' : '$cardItemShadow', + }, }, }} > @@ -592,7 +592,7 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element { props.actionHandler(action, linkedItem) }} /> - )} + )} ))}