diff --git a/packages/web/components/patterns/LibraryCards/CardTypes.tsx b/packages/web/components/patterns/LibraryCards/CardTypes.tsx index 93c2a5094..cf19502e1 100644 --- a/packages/web/components/patterns/LibraryCards/CardTypes.tsx +++ b/packages/web/components/patterns/LibraryCards/CardTypes.tsx @@ -19,6 +19,5 @@ 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 deleted file mode 100644 index bb4e73431..000000000 --- a/packages/web/components/patterns/LibraryCards/GridLinkedItemCard.tsx +++ /dev/null @@ -1,190 +0,0 @@ -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(({ name, color }, index) => ( - - ))} - - - ) -} - -type CardTitleProps = { - title: string -} - -function CardTitle(props: CardTitleProps): JSX.Element { - return ( - - {props.title} - - ) -} diff --git a/packages/web/components/patterns/LibraryCards/LibraryHighlightGridCard.tsx b/packages/web/components/patterns/LibraryCards/LibraryHighlightGridCard.tsx index 1ea4bdac0..2358c10f3 100644 --- a/packages/web/components/patterns/LibraryCards/LibraryHighlightGridCard.tsx +++ b/packages/web/components/patterns/LibraryCards/LibraryHighlightGridCard.tsx @@ -1,35 +1,10 @@ -import { - Box, - VStack, - HStack, - SpanBox, - Blockquote, -} from '../../elements/LayoutPrimitives' -import { LabelChip } from '../../elements/LabelChip' -import { Fragment, useMemo, useState } from 'react' -import { CaretDown, CaretUp, DotsThreeVertical } from 'phosphor-react' -import Link from 'next/link' -import { CardMenu } from '../CardMenu' -import { - AuthorInfoStyle, - DescriptionStyle, - MenuStyle, - MetaStyle, - timeAgo, - TitleStyle, -} from './LibraryCardStyles' -import { Separator } from '../../elements/Separator' +import { Box, VStack, HStack } from '../../elements/LayoutPrimitives' +import { useState } from 'react' +import { CaretDown, CaretUp } from 'phosphor-react' +import { MetaStyle, timeAgo, TitleStyle } from './LibraryCardStyles' import { styled } from '@stitches/react' -import { Dropdown, DropdownOption } from '../../elements/DropdownElements' -import { StyledText } from '../../elements/StyledText' -import { Highlight } from '../../../lib/networking/fragments/highlightFragment' import { UserBasicData } from '../../../lib/networking/queries/useGetViewerQuery' -import { - LibraryItem, - LibraryItemNode, -} from '../../../lib/networking/queries/useGetLibraryItemsQuery' -import { useRouter } from 'next/router' -import { Label } from '../../../lib/networking/fragments/labelFragment' +import { LibraryItemNode } from '../../../lib/networking/queries/useGetLibraryItemsQuery' import { Button } from '../../elements/Button' import { theme } from '../../tokens/stitches.config' import { HighlightItem } from '../../templates/homeFeed/HighlightItem' @@ -45,7 +20,6 @@ type LibraryHighlightGridCardProps = { item: LibraryItemNode } -// Component export function LibraryHighlightGridCard( props: LibraryHighlightGridCardProps ): JSX.Element { diff --git a/packages/web/components/patterns/LibraryCards/LibraryListCard.tsx b/packages/web/components/patterns/LibraryCards/LibraryListCard.tsx index 72648e8f8..21f031335 100644 --- a/packages/web/components/patterns/LibraryCards/LibraryListCard.tsx +++ b/packages/web/components/patterns/LibraryCards/LibraryListCard.tsx @@ -14,7 +14,6 @@ import { TitleStyle, } from './LibraryCardStyles' -// Component export function LibraryListCard(props: LinkedItemCardProps): JSX.Element { const [isHovered, setIsHovered] = useState(false) const [menuOpen, setMenuOpen] = useState(false) diff --git a/packages/web/components/patterns/LibraryCards/LinkedItemCard.tsx b/packages/web/components/patterns/LibraryCards/LinkedItemCard.tsx index d712be88c..19caabc98 100644 --- a/packages/web/components/patterns/LibraryCards/LinkedItemCard.tsx +++ b/packages/web/components/patterns/LibraryCards/LinkedItemCard.tsx @@ -1,48 +1,11 @@ -import { GridLinkedItemCard } from './GridLinkedItemCard' -import { ListLinkedItemCard } from './ListLinkedItemCard' import type { LinkedItemCardProps } from './CardTypes' -import { HighlightItemCard } from './HighlightItemCard' -import { PageType } from '../../../lib/networking/fragments/articleFragment' import { LibraryGridCard } from './LibraryGridCard' import { LibraryListCard } from './LibraryListCard' -import { LibraryHighlightGridCard } from './LibraryHighlightGridCard' - -const shouldHideUrl = (url: string): boolean => { - try { - const origin = new URL(url).origin - const hideHosts = ['https://storage.googleapis.com', 'https://omnivore.app'] - if (hideHosts.indexOf(origin) != -1) { - return true - } - } catch { - console.log('invalid url item', url) - } - return false -} - -const siteName = (originalArticleUrl: string, itemUrl: string): string => { - if (shouldHideUrl(originalArticleUrl)) { - return '' - } - try { - return new URL(originalArticleUrl).hostname.replace(/^www\./, '') - } catch {} - try { - return new URL(itemUrl).hostname.replace(/^www\./, '') - } catch {} - return '' -} export function LinkedItemCard(props: LinkedItemCardProps): JSX.Element { - const originText = - props.item.siteName || - siteName(props.item.originalArticleUrl, props.item.url) - if (props.layout == 'LIST_LAYOUT') { - return - // return + return } else { - return - // return + return } } diff --git a/packages/web/components/patterns/LibraryCards/ListLinkedItemCard.tsx b/packages/web/components/patterns/LibraryCards/ListLinkedItemCard.tsx deleted file mode 100644 index 3fa5ddfce..000000000 --- a/packages/web/components/patterns/LibraryCards/ListLinkedItemCard.tsx +++ /dev/null @@ -1,215 +0,0 @@ -import { - Box, - HStack, - VStack, - MediumBreakpointBox, -} 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 ( - } - largerLayoutNode={} - /> - ) -} - -export function ListLinkedItemCardNarrow( - 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} - /> - - - ) -} - -export function ListLinkedItemCardWide( - 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/templates/homeFeed/HighlightItem.tsx b/packages/web/components/templates/homeFeed/HighlightItem.tsx new file mode 100644 index 000000000..7e86327b4 --- /dev/null +++ b/packages/web/components/templates/homeFeed/HighlightItem.tsx @@ -0,0 +1,173 @@ +import { styled } from '@stitches/react' +import { useRouter } from 'next/router' +import { DotsThreeVertical } from 'phosphor-react' +import { Fragment, useMemo, useState } from 'react' +import { Highlight } from '../../../lib/networking/fragments/highlightFragment' +import { Label } from '../../../lib/networking/fragments/labelFragment' +import { + LibraryItem, + LibraryItemNode, +} from '../../../lib/networking/queries/useGetLibraryItemsQuery' +import { UserBasicData } from '../../../lib/networking/queries/useGetViewerQuery' +import { Dropdown, DropdownOption } from '../../elements/DropdownElements' +import { LabelChip } from '../../elements/LabelChip' +import { + Blockquote, + Box, + HStack, + SpanBox, + VStack, +} from '../../elements/LayoutPrimitives' +import { StyledText } from '../../elements/StyledText' + +type HighlightItemProps = { + highlight: Highlight + viewer: UserBasicData | undefined + item: LibraryItemNode +} + +const StyledQuote = styled(Blockquote, { + margin: '0px', + fontSize: '16px', + fontFamily: '$inter', + fontWeight: '500', + lineHeight: '1.50', + color: '$thHighContrast', + paddingLeft: '15px', + borderLeft: '2px solid $omnivoreCtaYellow', +}) + +export function HighlightItem(props: HighlightItemProps): JSX.Element { + const router = useRouter() + const [hover, setHover] = useState(false) + const [isEditing, setIsEditing] = useState(false) + + const lines = useMemo( + () => props.highlight.quote.split('\n'), + [props.highlight.quote] + ) + + return ( + setHover(true)} + onMouseLeave={() => setHover(false)} + > + { + if (router && props.viewer) { + const dest = `/${props.viewer}/${props.item.slug}#${props.highlight.id}` + router.push(dest) + } + event.preventDefault() + }} + > + + + {lines.map((line: string, index: number) => ( + + {line} + {index !== lines.length - 1 && ( + <> +
+
+ + )} + + ))} + + + {props.highlight.labels?.map((label: Label, index: number) => ( + + ))} + + + + setIsEditing(true)} + > + {props.highlight.annotation + ? props.highlight.annotation + : 'Add your notes...'} + + + + + + + ) +} + +function HighlightsMenu(): JSX.Element { + return ( + + + + } + > + { + console.log('copy') + }} + title="Copy" + /> + { + console.log('labels') + }} + title="Labels" + /> + { + console.log('delete') + }} + title="Delete" + /> + + ) +} diff --git a/packages/web/components/templates/homeFeed/HighlightsLayout.tsx b/packages/web/components/templates/homeFeed/HighlightsLayout.tsx index 94b52373d..5fe514e0a 100644 --- a/packages/web/components/templates/homeFeed/HighlightsLayout.tsx +++ b/packages/web/components/templates/homeFeed/HighlightsLayout.tsx @@ -291,115 +291,6 @@ function HighlightList(props: HighlightListProps): JSX.Element { ) } -// const StyledQuote = styled(Blockquote, { -// margin: '0px', -// fontSize: '16px', -// fontFamily: '$inter', -// fontWeight: '500', -// lineHeight: '1.50', -// color: '$thHighContrast', -// paddingLeft: '15px', -// borderLeft: '2px solid $omnivoreCtaYellow', -// }) - -// type HighlightItemCardProps = { -// highlight: Highlight -// viewer: UserBasicData | undefined -// item: LibraryItem -// } - -// function HighlightItemCard(props: HighlightItemCardProps): JSX.Element { -// const router = useRouter() -// const [hover, setHover] = useState(false) -// const [isEditing, setIsEditing] = useState(false) - -// const lines = useMemo( -// () => props.highlight.quote.split('\n'), -// [props.highlight.quote] -// ) - -// return ( -// setHover(true)} -// onMouseLeave={() => setHover(false)} -// > -// { -// if (router && props.viewer) { -// const dest = `/${props.viewer}/${props.item.node.slug}#${props.highlight.id}` -// router.push(dest) -// } -// event.preventDefault() -// }} -// > -// -// -// {lines.map((line: string, index: number) => ( -// -// {line} -// {index !== lines.length - 1 && ( -// <> -//
-//
-// -// )} -// -// ))} -// -// -// {props.highlight.labels?.map((label: Label, index: number) => ( -// -// ))} -// -// - -// setIsEditing(true)} -// > -// {props.highlight.annotation -// ? props.highlight.annotation -// : 'Add your notes...'} -// -// -// -// -// -// -// ) -// } - type HighlightCountChipProps = { count: number selected: boolean @@ -433,46 +324,3 @@ function HighlightCountChip(props: HighlightCountChipProps): JSX.Element { ) } - -// function HighlightsMenu(): JSX.Element { -// return ( -// -// -// -// } -// > -// { -// console.log('copy') -// }} -// title="Copy" -// /> -// { -// console.log('labels') -// }} -// title="Labels" -// /> -// { -// console.log('delete') -// }} -// title="Delete" -// /> -// -// ) -// }