diff --git a/packages/web/components/patterns/LibraryCards/LibraryCardStyles.tsx b/packages/web/components/patterns/LibraryCards/LibraryCardStyles.tsx index a5f87503a..23a13dfc0 100644 --- a/packages/web/components/patterns/LibraryCards/LibraryCardStyles.tsx +++ b/packages/web/components/patterns/LibraryCards/LibraryCardStyles.tsx @@ -1,3 +1,8 @@ +import dayjs from 'dayjs' +import relativeTime from 'dayjs/plugin/relativeTime' + +dayjs.extend(relativeTime) + export const MetaStyle = { width: '100%', color: '$thTextSubtle3', @@ -64,3 +69,39 @@ export const AuthorInfoStyle = { fontWeight: '400', fontFamily: '$display', } + +export const timeAgo = (date: string | undefined): string => { + if (!date) { + return '' + } + return dayjs(date).fromNow() +} + +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 +} + +export 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 '' +} diff --git a/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx b/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx index 1e795de66..4257a470e 100644 --- a/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx +++ b/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx @@ -13,6 +13,8 @@ import { DescriptionStyle, MenuStyle, MetaStyle, + siteName, + timeAgo, TitleStyle, } from './LibraryCardStyles' @@ -48,39 +50,6 @@ export function ProgressBar(props: ProgressBarProps): JSX.Element { ) } -const timeAgo = (date: string | undefined): string => { - if (!date) { - return '' - } - return dayjs(date).fromNow() -} - -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 '' -} - // Component export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element { const [isHovered, setIsHovered] = useState(false) diff --git a/packages/web/components/patterns/LibraryCards/LibraryHighlightGridCard.tsx b/packages/web/components/patterns/LibraryCards/LibraryHighlightGridCard.tsx index 015e7d96c..92dcd23b0 100644 --- a/packages/web/components/patterns/LibraryCards/LibraryHighlightGridCard.tsx +++ b/packages/web/components/patterns/LibraryCards/LibraryHighlightGridCard.tsx @@ -6,17 +6,8 @@ import { Blockquote, } from '../../elements/LayoutPrimitives' import { LabelChip } from '../../elements/LabelChip' -import type { LinkedItemCardProps } from './CardTypes' -import { CoverImage } from '../../elements/CoverImage' -import dayjs from 'dayjs' -import relativeTime from 'dayjs/plugin/relativeTime' import { Fragment, useMemo, useState } from 'react' -import { - CaretCircleDown, - CaretDown, - CaretUp, - DotsThreeVertical, -} from 'phosphor-react' +import { CaretDown, CaretUp, DotsThreeVertical } from 'phosphor-react' import Link from 'next/link' import { CardMenu } from '../CardMenu' import { @@ -24,6 +15,7 @@ import { DescriptionStyle, MenuStyle, MetaStyle, + timeAgo, TitleStyle, } from './LibraryCardStyles' import { Separator } from '../../elements/Separator' @@ -41,15 +33,6 @@ import { Label } from '../../../lib/networking/fragments/labelFragment' import { Button } from '../../elements/Button' import { theme } from '../../tokens/stitches.config' -dayjs.extend(relativeTime) - -const timeAgo = (date: string | undefined): string => { - if (!date) { - return '' - } - return dayjs(date).fromNow() -} - export const GridSeparator = styled(Box, { height: '1px', marginTop: '15px', @@ -211,6 +194,7 @@ const StyledQuote = styled(Blockquote, { margin: '0px', fontSize: '16px', fontFamily: '$inter', + fontWeight: '500', lineHeight: '1.50', color: '$thHighContrast', paddingLeft: '15px', @@ -281,11 +265,11 @@ function HighlightItemCard(props: HighlightItemCardProps): JSX.Element { setIsEditing(true)} > diff --git a/packages/web/components/patterns/LibraryCards/LibraryListCard.tsx b/packages/web/components/patterns/LibraryCards/LibraryListCard.tsx index f5c5f9c79..72648e8f8 100644 --- a/packages/web/components/patterns/LibraryCards/LibraryListCard.tsx +++ b/packages/web/components/patterns/LibraryCards/LibraryListCard.tsx @@ -1,55 +1,19 @@ import { Box, VStack, HStack, SpanBox } from '../../elements/LayoutPrimitives' import { LabelChip } from '../../elements/LabelChip' import type { LinkedItemCardProps } from './CardTypes' -import { CoverImage } from '../../elements/CoverImage' -import dayjs from 'dayjs' -import relativeTime from 'dayjs/plugin/relativeTime' import { useState } from 'react' -import { DotsThree, DotsThreeVertical } from 'phosphor-react' +import { DotsThree } from 'phosphor-react' import Link from 'next/link' import { CardMenu } from '../CardMenu' import { AuthorInfoStyle, MenuStyle, MetaStyle, + siteName, + timeAgo, TitleStyle, } from './LibraryCardStyles' -dayjs.extend(relativeTime) - -const timeAgo = (date: string | undefined): string => { - if (!date) { - return '' - } - return dayjs(date).fromNow() -} - -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 '' -} - // Component export function LibraryListCard(props: LinkedItemCardProps): JSX.Element { const [isHovered, setIsHovered] = useState(false) diff --git a/packages/web/components/templates/homeFeed/HighlightsLayout.tsx b/packages/web/components/templates/homeFeed/HighlightsLayout.tsx index 6bccf03c1..c2d7d9cea 100644 --- a/packages/web/components/templates/homeFeed/HighlightsLayout.tsx +++ b/packages/web/components/templates/homeFeed/HighlightsLayout.tsx @@ -1,31 +1,16 @@ -import dayjs from 'dayjs' -import { useRouter } from 'next/router' import { DotsThreeVertical, HighlighterCircle } from 'phosphor-react' -import { Fragment, useEffect, useMemo, useState } from 'react' -import { Highlight } from '../../../lib/networking/fragments/highlightFragment' -import { Label } from '../../../lib/networking/fragments/labelFragment' +import { useEffect, useState } from 'react' import { LibraryItem } from '../../../lib/networking/queries/useGetLibraryItemsQuery' import { UserBasicData } from '../../../lib/networking/queries/useGetViewerQuery' -import { Dropdown, DropdownOption } from '../../elements/DropdownElements' -import { SideBarIcon } from '../../elements/images/SideBarIcon' -import { LabelChip } from '../../elements/LabelChip' -import { - Blockquote, - Box, - HStack, - SpanBox, - VStack, -} from '../../elements/LayoutPrimitives' -import { - ModalContent, - ModalOverlay, - ModalRoot, - ModalTitleBar, -} from '../../elements/ModalPrimitives' + +import { Box, HStack, SpanBox, VStack } from '../../elements/LayoutPrimitives' import { StyledText } from '../../elements/StyledText' -import { MetaStyle } from '../../patterns/LibraryCards/LibraryCardStyles' +import { + MetaStyle, + timeAgo, +} from '../../patterns/LibraryCards/LibraryCardStyles' import { LibraryHighlightGridCard } from '../../patterns/LibraryCards/LibraryHighlightGridCard' -import { styled, theme } from '../../tokens/stitches.config' +import { HighlightItem } from './HighlightItem' type HighlightItemsLayoutProps = { items: LibraryItem[] @@ -83,8 +68,6 @@ export function HighlightItemsLayout( alignment="center" distribution="start" > - {/* - */} - + )} @@ -157,13 +140,6 @@ type HighlightTitleCardProps = { selected: boolean } -const timeAgo = (date: string | undefined): string => { - if (!date) { - return '' - } - return dayjs(date).fromNow() -} - function LibraryItemCard(props: HighlightTitleCardProps): JSX.Element { return ( <> @@ -254,12 +230,12 @@ function HighlightTitleCard(props: HighlightTitleCardProps): JSX.Element { ) } -type HighlightItemsCardProps = { +type HighlightListProps = { item: LibraryItem viewer: UserBasicData | undefined } -function HighlightItemsCard(props: HighlightItemsCardProps): JSX.Element { +function HighlightList(props: HighlightListProps): JSX.Element { return ( {(props.item.node.highlights ?? []).map((highlight) => ( - props.highlight.quote.split('\n'), - [props.highlight.quote] - ) +// const lines = useMemo( +// () => props.highlight.quote.split('\n'), +// [props.highlight.quote] +// ) - return ( - setHover(true)} - onMouseLeave={() => setHover(false)} - > - 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) => ( - - ))} - - +// wordBreak: 'break-word', +// overflow: 'clip', +// }} +// alignment="start" +// distribution="start" +// onClick={(event) => { +// 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...'} - - - - - - - ) -} +// setIsEditing(true)} +// > +// {props.highlight.annotation +// ? props.highlight.annotation +// : 'Add your notes...'} +// +// +// +// +// +// +// ) +// } type HighlightCountChipProps = { count: number @@ -456,45 +434,45 @@ 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" - /> - - ) -} +// 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/stories/HighlightItemCard.stories.tsx b/packages/web/stories/HighlightItemCard.stories.tsx deleted file mode 100644 index 260338eb4..000000000 --- a/packages/web/stories/HighlightItemCard.stories.tsx +++ /dev/null @@ -1,71 +0,0 @@ -import { ComponentStory, ComponentMeta } from '@storybook/react' -import { HighlightItemCard, HighlightItemCardProps } from '../components/patterns/LibraryCards/HighlightItemCard' -import { updateThemeLocally } from '../lib/themeUpdater' -import { ThemeId } from '../components/tokens/stitches.config' -import { PageType, State } from '../lib/networking/fragments/articleFragment' - -export default { - title: 'Components/HighlightItemCard', - component: HighlightItemCard, - argTypes: { - item: { - description: 'The highlight.', - }, - handleAction: { - description: 'Action that fires on click.' - } - } -} as ComponentMeta - -const highlight: HighlightItemCardProps = { - handleAction: () => console.log('Handling Action'), - item:{ - id: "nnnnn", - shortId: "shortId", - quote: "children not only participate in herding work, but are also encouraged to act independently in most other areas of life. They have a say in deciding when to eat, when to sleep, and what to wear, even at temperatures of -30C (-22F).", - annotation: "Okay… this is wild! I love this independence. Wondering how I can reponsibly instill this type of indepence in my own kids…", - createdAt: '', - description: '', - isArchived: false, - originalArticleUrl: 'https://example.com', - ownedByViewer: true, - pageId: '1', - readingProgressAnchorIndex: 12, - readingProgressPercent: 50, - slug: 'slug', - title: "This is a title", - uploadFileId: '1', - url: 'https://example.com', - author: 'Author', - image: 'https://logos-world.net/wp-content/uploads/2021/11/Unity-New-Logo.png', - state: State.SUCCEEDED, - pageType: PageType.HIGHLIGHTS, - }, -} - -const Template = (props: HighlightItemCardProps) => - -export const LightHighlightItemCard: ComponentStory< - typeof HighlightItemCard -> = (args: any) => { - updateThemeLocally(ThemeId.Light) - return ( -