remove usage of createStyles from mantine that is removed in v7

2026-03-21 21:37:29 +00:00 · 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/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()