remove usage of createStyles from mantine that is removed in v7

2023-12-29 21:53:41 +01:00
parent dade873420
commit 2742b7fff6
16 changed files with 415 additions and 240 deletions
--- a/commafeed-client/src/components/ImageWithPlaceholderWhileLoading.tsx
+++ b/commafeed-client/src/components/ImageWithPlaceholderWhileLoading.tsx
@@ -1,6 +1,7 @@
-import { Box, Center, createStyles } from "@mantine/core"
+import { Box, Center, type MantineTheme, useMantineTheme } from "@mantine/core"
 import { useState } from "react"
 import { TbPhoto } from "react-icons/tb"
+import { tss } from "tss"

 interface ImageWithPlaceholderWhileLoadingProps {
    src: string
@@ -15,18 +16,51 @@ interface ImageWithPlaceholderWhileLoadingProps {
    placeholderIconColor?: string
 }

-const useStyles = createStyles((theme, props: ImageWithPlaceholderWhileLoadingProps) => ({
-    placeholder: {
-        width: props.placeholderWidth ?? 400,
-        height: props.placeholderHeight ?? 600,
-        maxWidth: "100%",
-        color: props.placeholderIconColor ?? theme.fn.variant({ color: theme.primaryColor, variant: "subtle" }).color,
-        backgroundColor: props.placeholderBackgroundColor ?? (theme.colorScheme === "dark" ? theme.colors.dark[5] : theme.colors.gray[1]),
-    },
-}))
+const useStyles = tss
+    .withParams<{
+        theme: MantineTheme
+        placeholderWidth?: number
+        placeholderHeight?: number
+        placeholderBackgroundColor?: string
+        placeholderIconColor?: string
+    }>()
+    .create(props => ({
+        placeholder: {
+            width: props.placeholderWidth ?? 400,
+            height: props.placeholderHeight ?? 600,
+            maxWidth: "100%",
+            color:
+                props.placeholderIconColor ??
+                props.theme.fn.variant({
+                    color: props.theme.primaryColor,
+                    variant: "subtle",
+                }).color,
+            backgroundColor:
+                props.placeholderBackgroundColor ??
+                (props.theme.colorScheme === "dark" ? props.theme.colors.dark[5] : props.theme.colors.gray[1]),
+        },
+    }))

-export function ImageWithPlaceholderWhileLoading(props: ImageWithPlaceholderWhileLoadingProps) {
-    const { classes } = useStyles(props)
+export function ImageWithPlaceholderWhileLoading({
+    alt,
+    height,
+    placeholderBackgroundColor,
+    placeholderHeight,
+    placeholderIconColor,
+    placeholderIconSize,
+    placeholderWidth,
+    src,
+    title,
+    width,
+}: ImageWithPlaceholderWhileLoadingProps) {
+    const theme = useMantineTheme()
+    const { classes } = useStyles({
+        theme,
+        placeholderWidth,
+        placeholderHeight,
+        placeholderBackgroundColor,
+        placeholderIconColor,
+    })
    const [loading, setLoading] = useState(true)

    return (
@@ -35,17 +69,17 @@ export function ImageWithPlaceholderWhileLoading(props: ImageWithPlaceholderWhil
                <Box>
                    <Center className={classes.placeholder}>
                        <div>
-                            <TbPhoto size={props.placeholderIconSize ?? 48} />
+                            <TbPhoto size={placeholderIconSize ?? 48} />
                        </div>
                    </Center>
                </Box>
            )}
            <img
-                src={props.src}
-                alt={props.alt}
-                title={props.title}
-                width={props.width}
-                height={props.height}
+                src={src}
+                alt={alt}
+                title={title}
+                width={width}
+                height={height}
                onLoad={() => setLoading(false)}
                style={{ display: loading ? "none" : "block" }}
            />
--- a/commafeed-client/src/components/content/Content.tsx
+++ b/commafeed-client/src/components/content/Content.tsx
@@ -1,31 +1,36 @@
-import { Box, createStyles, Mark, TypographyStylesProvider } from "@mantine/core"
+import { Box, type MantineTheme, Mark, TypographyStylesProvider, useMantineTheme } from "@mantine/core"
 import { Constants } from "app/constants"
 import { calculatePlaceholderSize } from "app/utils"
 import { ImageWithPlaceholderWhileLoading } from "components/ImageWithPlaceholderWhileLoading"
 import escapeStringRegexp from "escape-string-regexp"
 import { type ChildrenNode, Interweave, Matcher, type MatchResponse, type Node, type TransformCallback } from "interweave"
 import React from "react"
+import { tss } from "tss"

 export interface ContentProps {
    content: string
    highlight?: string
 }

-const useStyles = createStyles(theme => ({
-    content: {
-        // break long links or long words
-        overflowWrap: "anywhere",
-        "& a": {
-            color: theme.fn.variant({ color: theme.primaryColor, variant: "subtle" }).color,
+const useStyles = tss
+    .withParams<{
+        theme: MantineTheme
+    }>()
+    .create(({ theme }) => ({
+        content: {
+            // break long links or long words
+            overflowWrap: "anywhere",
+            "& a": {
+                color: theme.fn.variant({ color: theme.primaryColor, variant: "subtle" }).color,
+            },
+            "& iframe": {
+                maxWidth: "100%",
+            },
+            "& pre, & code": {
+                whiteSpace: "pre-wrap",
+            },
        },
-        "& iframe": {
-            maxWidth: "100%",
-        },
-        "& pre, & code": {
-            whiteSpace: "pre-wrap",
-        },
-    },
-}))
+    }))

 const transform: TransformCallback = node => {
    if (node.tagName === "IMG") {
@@ -84,7 +89,10 @@ class HighlightMatcher extends Matcher {

 // memoize component because Interweave is costly
 const Content = React.memo((props: ContentProps) => {
-    const { classes } = useStyles()
+    const theme = useMantineTheme()
+    const { classes } = useStyles({
+        theme,
+    })
    const matchers = props.highlight ? [new HighlightMatcher(props.highlight)] : []

    return (
--- a/commafeed-client/src/components/content/FeedEntry.tsx
+++ b/commafeed-client/src/components/content/FeedEntry.tsx
@@ -1,10 +1,11 @@
-import { Box, createStyles, Divider, Paper } from "@mantine/core"
+import { Box, Divider, type MantineTheme, Paper, useMantineTheme } from "@mantine/core"
 import { type MantineNumberSize } from "@mantine/styles"
 import { Constants } from "app/constants"
 import { type Entry, type ViewMode } from "app/types"
 import { useViewMode } from "hooks/useViewMode"
 import React from "react"
 import { useSwipeable } from "react-swipeable"
+import { tss } from "tss"
 import { FeedEntryBody } from "./FeedEntryBody"
 import { FeedEntryCompactHeader } from "./FeedEntryCompactHeader"
 import { FeedEntryContextMenu } from "./FeedEntryContextMenu"
@@ -23,69 +24,88 @@ interface FeedEntryProps {
    onSwipedRight: () => void
 }

-const useStyles = createStyles((theme, props: FeedEntryProps & { viewMode?: ViewMode }) => {
-    let backgroundColor
-    if (theme.colorScheme === "dark") {
-        backgroundColor = props.entry.read ? "inherit" : theme.colors.dark[5]
-    } else {
-        backgroundColor = props.entry.read && !props.expanded ? theme.colors.gray[0] : "inherit"
-    }
+const useStyles = tss
+    .withParams<{
+        theme: MantineTheme
+        read: boolean
+        expanded: boolean
+        viewMode: ViewMode
+        rtl: boolean
+        showSelectionIndicator: boolean
+        maxWidth?: number
+    }>()
+    .create(({ theme, read, expanded, viewMode, rtl, showSelectionIndicator, maxWidth }) => {
+        let backgroundColor
+        if (theme.colorScheme === "dark") {
+            backgroundColor = read ? "inherit" : theme.colors.dark[5]
+        } else {
+            backgroundColor = read && !expanded ? theme.colors.gray[0] : "inherit"
+        }

-    let marginY = 10
-    if (props.viewMode === "title") {
-        marginY = 2
-    } else if (props.viewMode === "cozy") {
-        marginY = 6
-    }
+        let marginY = 10
+        if (viewMode === "title") {
+            marginY = 2
+        } else if (viewMode === "cozy") {
+            marginY = 6
+        }

-    let mobileMarginY = 6
-    if (props.viewMode === "title") {
-        mobileMarginY = 2
-    } else if (props.viewMode === "cozy") {
-        mobileMarginY = 4
-    }
+        let mobileMarginY = 6
+        if (viewMode === "title") {
+            mobileMarginY = 2
+        } else if (viewMode === "cozy") {
+            mobileMarginY = 4
+        }

-    let backgroundHoverColor = backgroundColor
-    if (!props.expanded && !props.entry.read) {
-        backgroundHoverColor = theme.colorScheme === "dark" ? theme.colors.dark[6] : theme.colors.gray[1]
-    }
+        let backgroundHoverColor = backgroundColor
+        if (!expanded && !read) {
+            backgroundHoverColor = theme.colorScheme === "dark" ? theme.colors.dark[6] : theme.colors.gray[1]
+        }

-    let paperBorderLeftColor
-    if (props.showSelectionIndicator) {
-        const borderLeftColor = theme.colorScheme === "dark" ? theme.colors.orange[4] : theme.colors.orange[6]
-        paperBorderLeftColor = `${borderLeftColor} !important`
-    }
+        let paperBorderLeftColor
+        if (showSelectionIndicator) {
+            const borderLeftColor = theme.colorScheme === "dark" ? theme.colors.orange[4] : theme.colors.orange[6]
+            paperBorderLeftColor = `${borderLeftColor} !important`
+        }

-    return {
-        paper: {
-            backgroundColor,
-            borderLeftColor: paperBorderLeftColor,
-            marginTop: marginY,
-            marginBottom: marginY,
-            [theme.fn.smallerThan(Constants.layout.mobileBreakpoint)]: {
-                marginTop: mobileMarginY,
-                marginBottom: mobileMarginY,
-            },
-            "@media (hover: hover)": {
-                "&:hover": {
-                    backgroundColor: backgroundHoverColor,
+        return {
+            paper: {
+                backgroundColor,
+                borderLeftColor: paperBorderLeftColor,
+                marginTop: marginY,
+                marginBottom: marginY,
+                [theme.fn.smallerThan(Constants.layout.mobileBreakpoint)]: {
+                    marginTop: mobileMarginY,
+                    marginBottom: mobileMarginY,
+                },
+                "@media (hover: hover)": {
+                    "&:hover": {
+                        backgroundColor: backgroundHoverColor,
+                    },
                },
            },
-        },
-        headerLink: {
-            color: "inherit",
-            textDecoration: "none",
-        },
-        body: {
-            direction: props.entry.rtl ? "rtl" : "ltr",
-            maxWidth: props.maxWidth ?? "100%",
-        },
-    }
-})
+            headerLink: {
+                color: "inherit",
+                textDecoration: "none",
+            },
+            body: {
+                direction: rtl ? "rtl" : "ltr",
+                maxWidth: maxWidth ?? "100%",
+            },
+        }
+    })

 export function FeedEntry(props: FeedEntryProps) {
+    const theme = useMantineTheme()
    const { viewMode } = useViewMode()
-    const { classes, cx } = useStyles({ ...props, viewMode })
+    const { classes, cx } = useStyles({
+        theme,
+        read: props.entry.read,
+        expanded: props.expanded,
+        viewMode,
+        rtl: props.entry.rtl,
+        showSelectionIndicator: props.showSelectionIndicator,
+        maxWidth: props.maxWidth,
+    })

    const swipeHandlers = useSwipeable({
        onSwipedRight: props.onSwipedRight,
--- a/commafeed-client/src/components/content/FeedEntryCompactHeader.tsx
+++ b/commafeed-client/src/components/content/FeedEntryCompactHeader.tsx
@@ -1,7 +1,8 @@
-import { Box, createStyles, Text } from "@mantine/core"
+import { Box, type MantineTheme, Text, useMantineTheme } from "@mantine/core"
 import { type Entry } from "app/types"
 import { RelativeDate } from "components/RelativeDate"
 import { OnDesktop } from "components/responsive/OnDesktop"
+import { tss } from "tss"
 import { FeedEntryTitle } from "./FeedEntryTitle"
 import { FeedFavicon } from "./FeedFavicon"

@@ -9,32 +10,42 @@ export interface FeedEntryHeaderProps {
    entry: Entry
 }

-const useStyles = createStyles((theme, props: FeedEntryHeaderProps) => ({
-    wrapper: {
-        display: "flex",
-        alignItems: "center",
-        columnGap: "10px",
-    },
-    title: {
-        flexGrow: 1,
-        fontWeight: theme.colorScheme === "light" && !props.entry.read ? "bold" : "inherit",
-        whiteSpace: "nowrap",
-        overflow: "hidden",
-        textOverflow: "ellipsis",
-    },
-    feedName: {
-        width: "145px",
-        minWidth: "145px",
-        whiteSpace: "nowrap",
-        overflow: "hidden",
-        textOverflow: "ellipsis",
-    },
-    date: {
-        whiteSpace: "nowrap",
-    },
-}))
+const useStyles = tss
+    .withParams<{
+        theme: MantineTheme
+        read: boolean
+    }>()
+    .create(({ read, theme }) => ({
+        wrapper: {
+            display: "flex",
+            alignItems: "center",
+            columnGap: "10px",
+        },
+        title: {
+            flexGrow: 1,
+            fontWeight: theme.colorScheme === "light" && !read ? "bold" : "inherit",
+            whiteSpace: "nowrap",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+        },
+        feedName: {
+            width: "145px",
+            minWidth: "145px",
+            whiteSpace: "nowrap",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+        },
+        date: {
+            whiteSpace: "nowrap",
+        },
+    }))
+
 export function FeedEntryCompactHeader(props: FeedEntryHeaderProps) {
-    const { classes } = useStyles(props)
+    const theme = useMantineTheme()
+    const { classes } = useStyles({
+        theme,
+        read: props.entry.read,
+    })
    return (
        <Box className={classes.wrapper}>
            <Box>
--- a/commafeed-client/src/components/content/FeedEntryContextMenu.tsx
+++ b/commafeed-client/src/components/content/FeedEntryContextMenu.tsx
@@ -1,5 +1,5 @@
 import { Trans } from "@lingui/macro"
-import { createStyles, Group } from "@mantine/core"
+import { Group, type MantineTheme, useMantineTheme } from "@mantine/core"
 import { Constants } from "app/constants"
 import { markEntriesUpToEntry, markEntry, starEntry } from "app/entries/thunks"
 import { redirectToFeed } from "app/redirect/thunks"
@@ -9,26 +9,34 @@ import { truncate } from "app/utils"
 import { useBrowserExtension } from "hooks/useBrowserExtension"
 import { Item, Menu, Separator } from "react-contexify"
 import { TbArrowBarToDown, TbExternalLink, TbEyeCheck, TbEyeOff, TbRss, TbStar, TbStarOff } from "react-icons/tb"
+import { tss } from "tss"

 interface FeedEntryContextMenuProps {
    entry: Entry
 }

 const iconSize = 16
-const useStyles = createStyles(theme => ({
-    menu: {
-        // apply mantine theme from MenuItem.styles.ts
-        fontSize: theme.fontSizes.sm,
-        "--contexify-item-color": `${theme.colorScheme === "dark" ? theme.colors.dark[0] : theme.black} !important`,
-        "--contexify-activeItem-color": `${theme.colorScheme === "dark" ? theme.colors.dark[0] : theme.black} !important`,
-        "--contexify-activeItem-bgColor": `${
-            theme.colorScheme === "dark" ? theme.fn.rgba(theme.colors.dark[3], 0.35) : theme.colors.gray[1]
-        } !important`,
-    },
-}))
+const useStyles = tss
+    .withParams<{
+        theme: MantineTheme
+    }>()
+    .create(({ theme }) => ({
+        menu: {
+            // apply mantine theme from MenuItem.styles.ts
+            fontSize: theme.fontSizes.sm,
+            "--contexify-item-color": `${theme.colorScheme === "dark" ? theme.colors.dark[0] : theme.black} !important`,
+            "--contexify-activeItem-color": `${theme.colorScheme === "dark" ? theme.colors.dark[0] : theme.black} !important`,
+            "--contexify-activeItem-bgColor": `${
+                theme.colorScheme === "dark" ? theme.fn.rgba(theme.colors.dark[3], 0.35) : theme.colors.gray[1]
+            } !important`,
+        },
+    }))

 export function FeedEntryContextMenu(props: FeedEntryContextMenuProps) {
-    const { classes, theme } = useStyles()
+    const theme = useMantineTheme()
+    const { classes } = useStyles({
+        theme,
+    })
    const sourceType = useAppSelector(state => state.entries.source.type)
    const dispatch = useAppDispatch()
    const { openLinkInBackgroundTab } = useBrowserExtension()
--- a/commafeed-client/src/components/content/FeedEntryHeader.tsx
+++ b/commafeed-client/src/components/content/FeedEntryHeader.tsx
@@ -1,6 +1,7 @@
-import { Box, createStyles, Space, Text } from "@mantine/core"
+import { Box, type MantineTheme, Space, Text, useMantineTheme } from "@mantine/core"
 import { type Entry } from "app/types"
 import { RelativeDate } from "components/RelativeDate"
+import { tss } from "tss"
 import { FeedEntryTitle } from "./FeedEntryTitle"
 import { FeedFavicon } from "./FeedFavicon"

@@ -9,18 +10,28 @@ export interface FeedEntryHeaderProps {
    expanded: boolean
 }

-const useStyles = createStyles((theme, props: FeedEntryHeaderProps) => ({
-    headerText: {
-        fontWeight: theme.colorScheme === "light" && !props.entry.read ? "bold" : "inherit",
-    },
-    headerSubtext: {
-        display: "flex",
-        alignItems: "center",
-        fontSize: "90%",
-    },
-}))
+const useStyles = tss
+    .withParams<{
+        theme: MantineTheme
+        read: boolean
+    }>()
+    .create(({ theme, read }) => ({
+        headerText: {
+            fontWeight: theme.colorScheme === "light" && !read ? "bold" : "inherit",
+        },
+        headerSubtext: {
+            display: "flex",
+            alignItems: "center",
+            fontSize: "90%",
+        },
+    }))
+
 export function FeedEntryHeader(props: FeedEntryHeaderProps) {
-    const { classes } = useStyles(props)
+    const theme = useMantineTheme()
+    const { classes } = useStyles({
+        theme,
+        read: props.entry.read,
+    })
    return (
        <Box>
            <Box className={classes.headerText}>
--- a/commafeed-client/src/components/content/ShareButtons.tsx
+++ b/commafeed-client/src/components/content/ShareButtons.tsx
@@ -1,21 +1,31 @@
-import { ActionIcon, Box, createStyles, SimpleGrid } from "@mantine/core"
+import { ActionIcon, Box, type MantineTheme, SimpleGrid, useMantineTheme } from "@mantine/core"
 import { Constants } from "app/constants"
 import { useAppSelector } from "app/store"
 import { type SharingSettings } from "app/types"
 import { type IconType } from "react-icons"
+import { tss } from "tss"

 type Color = `#${string}`

-const useStyles = createStyles((theme, props: { color: Color }) => ({
-    socialIcon: {
-        color: props.color,
-        backgroundColor: theme.colorScheme === "dark" ? theme.colors.gray[2] : "white",
-        borderRadius: "50%",
-    },
-}))
+const useStyles = tss
+    .withParams<{
+        theme: MantineTheme
+        color: Color
+    }>()
+    .create(({ theme, color }) => ({
+        socialIcon: {
+            color,
+            backgroundColor: theme.colorScheme === "dark" ? theme.colors.gray[2] : "white",
+            borderRadius: "50%",
+        },
+    }))

 function ShareButton({ url, icon, color }: { url: string; icon: IconType; color: Color }) {
-    const { classes } = useStyles({ color })
+    const theme = useMantineTheme()
+    const { classes } = useStyles({
+        theme,
+        color,
+    })

    const onClick = (e: React.MouseEvent) => {
        e.preventDefault()
--- a/commafeed-client/src/components/sidebar/TreeNode.tsx
+++ b/commafeed-client/src/components/sidebar/TreeNode.tsx
@@ -1,6 +1,7 @@
-import { Box, Center, createStyles } from "@mantine/core"
+import { Box, Center, type MantineTheme, useMantineTheme } from "@mantine/core"
 import { FeedFavicon } from "components/content/FeedFavicon"
 import React, { type ReactNode } from "react"
+import { tss } from "tss"
 import { UnreadCount } from "./UnreadCount"

 interface TreeNodeProps {
@@ -16,40 +17,57 @@ interface TreeNodeProps {
    onIconClick?: (e: React.MouseEvent, id: string) => void
 }

-const useStyles = createStyles((theme, props: TreeNodeProps) => {
-    let backgroundColor = "inherit"
-    if (props.selected) backgroundColor = theme.colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[3]
+const useStyles = tss
+    .withParams<{
+        theme: MantineTheme
+        selected: boolean
+        hasError: boolean
+        hasUnread: boolean
+    }>()
+    .create(({ theme, selected, hasError, hasUnread }) => {
+        let backgroundColor = "inherit"
+        if (selected) backgroundColor = theme.colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[3]

-    let color
-    if (props.hasError) color = theme.colors.red[6]
-    else if (theme.colorScheme === "dark") color = props.unread > 0 ? theme.colors.dark[0] : theme.colors.dark[3]
-    else color = props.unread > 0 ? theme.black : theme.colors.gray[6]
+        let color
+        if (hasError) {
+            color = theme.colors.red[6]
+        } else if (theme.colorScheme === "dark") {
+            color = hasUnread ? theme.colors.dark[0] : theme.colors.dark[3]
+        } else {
+            color = hasUnread ? theme.black : theme.colors.gray[6]
+        }

-    return {
-        node: {
-            display: "flex",
-            alignItems: "center",
-            cursor: "pointer",
-            color,
-            backgroundColor,
-            "&:hover": {
-                backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[6] : theme.colors.gray[0],
+        return {
+            node: {
+                display: "flex",
+                alignItems: "center",
+                cursor: "pointer",
+                color,
+                backgroundColor,
+                "&:hover": {
+                    backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[6] : theme.colors.gray[0],
+                },
            },
-        },
-        nodeText: {
-            flexGrow: 1,
-            whiteSpace: "nowrap",
-            overflow: "hidden",
-            textOverflow: "ellipsis",
-        },
-    }
-})
+            nodeText: {
+                flexGrow: 1,
+                whiteSpace: "nowrap",
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+            },
+        }
+    })

 export function TreeNode(props: TreeNodeProps) {
-    const { classes } = useStyles(props)
+    const theme = useMantineTheme()
+    const { classes } = useStyles({
+        theme,
+        selected: props.selected,
+        hasError: props.hasError,
+        hasUnread: props.unread > 0,
+    })
    return (
        <Box py={1} pl={props.level * 20} className={classes.node} onClick={(e: React.MouseEvent) => props.onClick(e, props.id)}>
-            <Box mr={6} onClick={(e: React.MouseEvent) => props.onIconClick && props.onIconClick(e, props.id)}>
+            <Box mr={6} onClick={(e: React.MouseEvent) => props.onIconClick?.(e, props.id)}>
                <Center>{typeof props.icon === "string" ? <FeedFavicon url={props.icon} /> : props.icon}</Center>
            </Box>
            <Box className={classes.nodeText}>{props.name}</Box>
--- a/commafeed-client/src/components/sidebar/UnreadCount.tsx
+++ b/commafeed-client/src/components/sidebar/UnreadCount.tsx
@@ -1,6 +1,7 @@
-import { Badge, createStyles, Tooltip } from "@mantine/core"
+import { Badge, Tooltip } from "@mantine/core"
+import { tss } from "tss"

-const useStyles = createStyles(() => ({
+const useStyles = tss.create(() => ({
    badge: {
        width: "3.2rem",
        // for some reason, mantine Badge has "cursor: 'default'"