Skip to content

Commit 4475d0d

Browse files
daveearleydaveearley
authored
Feature: Update React + Mantine UI (#1209)
1 parent 0df3e80 commit 4475d0d

27 files changed

Lines changed: 1257 additions & 999 deletions

File tree

‎frontend/package.json‎

Lines changed: 29 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -23,38 +23,34 @@
2323
"@dnd-kit/utilities": "^3.2.1",
2424
"@lingui/macro": "^4.7.0",
2525
"@lingui/react": "^4.7.0",
26-
"@mantine/carousel": "^8.0.1",
27-
"@mantine/charts": "^8.0.1",
28-
"@mantine/colors-generator": "^8.1.0",
29-
"@mantine/core": "^8.0.1",
30-
"@mantine/dates": "^8.0.1",
31-
"@mantine/dropzone": "^8.0.1",
32-
"@mantine/form": "^8.0.1",
33-
"@mantine/hooks": "^8.0.1",
34-
"@mantine/modals": "^8.0.1",
35-
"@mantine/notifications": "^8.0.1",
36-
"@mantine/nprogress": "^8.0.1",
37-
"@mantine/tiptap": "^8.0.1",
38-
"@react-pdf/renderer": "^3.3.4",
26+
"@mantine/carousel": "^9.2.2",
27+
"@mantine/charts": "^9.2.2",
28+
"@mantine/colors-generator": "^9.2.2",
29+
"@mantine/core": "^9.2.2",
30+
"@mantine/dates": "^9.2.2",
31+
"@mantine/dropzone": "^9.2.2",
32+
"@mantine/form": "^9.2.2",
33+
"@mantine/hooks": "^9.2.2",
34+
"@mantine/modals": "^9.2.2",
35+
"@mantine/notifications": "^9.2.2",
36+
"@mantine/nprogress": "^9.2.2",
37+
"@mantine/tiptap": "^9.2.2",
38+
"@react-pdf/renderer": "^4.5.1",
3939
"@react-router/node": "^7.1.5",
4040
"@remix-run/node": "^2.16.8",
4141
"@stripe/react-stripe-js": "^2.1.1",
4242
"@stripe/stripe-js": "^1.54.1",
4343
"@tabler/icons-react": "^3.35.0",
4444
"@tanstack/react-query": "5.76.1",
4545
"@tanstack/react-table": "^8.21.3",
46-
"@tiptap/core": "^2.7.0",
47-
"@tiptap/extension-color": "^2.11.7",
48-
"@tiptap/extension-image": "^2.11.5",
49-
"@tiptap/extension-link": "^2.12.0",
50-
"@tiptap/extension-task-item": "^2.12.0",
51-
"@tiptap/extension-task-list": "^2.12.0",
52-
"@tiptap/extension-text-align": "^2.12.0",
53-
"@tiptap/extension-text-style": "^2.12.0",
54-
"@tiptap/extension-underline": "^2.12.0",
55-
"@tiptap/pm": "^2.7.0",
56-
"@tiptap/react": "^2.12.0",
57-
"@tiptap/starter-kit": "^2.12.0",
46+
"@tiptap/core": "^3.3.0",
47+
"@tiptap/extension-image": "^3.3.0",
48+
"@tiptap/extension-link": "^3.3.0",
49+
"@tiptap/extension-text-align": "^3.3.0",
50+
"@tiptap/extension-text-style": "^3.3.0",
51+
"@tiptap/pm": "^3.3.0",
52+
"@tiptap/react": "^3.3.0",
53+
"@tiptap/starter-kit": "^3.3.0",
5854
"axios": "^1.4.0",
5955
"chroma-js": "^3.1.2",
6056
"classnames": "^2.3.2",
@@ -67,13 +63,13 @@
6763
"express": "^4.19.2",
6864
"qr-scanner": "^1.4.2",
6965
"query-string": "^8.1.0",
70-
"react": "^18.2.0",
71-
"react-dom": "^18.2.0",
66+
"react": "^19.2.0",
67+
"react-dom": "^19.2.0",
7268
"react-helmet-async": "^2.0.4",
7369
"react-qr-code": "^2.0.12",
7470
"react-router": "^7.1.5",
7571
"react-router-dom": "^7.1.5",
76-
"recharts": "2",
72+
"recharts": "^3",
7773
"sirv": "^2.0.4"
7874
},
7975
"devDependencies": {
@@ -82,8 +78,8 @@
8278
"@types/express": "^4.17.21",
8379
"@types/lodash": "^4.17.0",
8480
"@types/node": "^20.12.2",
85-
"@types/react": "^18.0.28",
86-
"@types/react-dom": "^18.0.11",
81+
"@types/react": "^19.2.0",
82+
"@types/react-dom": "^19.2.0",
8783
"@typescript-eslint/eslint-plugin": "^5.57.1",
8884
"@typescript-eslint/parser": "^5.57.1",
8985
"@vitejs/plugin-react": "^4.4.1",
@@ -101,5 +97,8 @@
10197
"vite": "^5.4.19",
10298
"vite-bundle-visualizer": "^1.2.1",
10399
"vite-plugin-copy": "^0.1.6"
100+
},
101+
"resolutions": {
102+
"prosemirror-model": "^1.25.7"
104103
}
105104
}

‎frontend/src/App.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, {FC, PropsWithChildren, useCallback, useEffect} from "react";
2-
import {MantineProvider} from "@mantine/core";
2+
import {MantineProvider, v8CssVariablesResolver} from "@mantine/core";
33
import {Notifications} from "@mantine/notifications";
44
import {i18n} from "@lingui/core";
55
import {I18nProvider} from "@lingui/react";
@@ -71,6 +71,7 @@ export const App: FC<
7171
}}
7272
/>
7373
<MantineProvider
74+
cssVariablesResolver={v8CssVariablesResolver}
7475
theme={{
7576
colors: {
7677
primary: generateColors(getConfig("VITE_APP_PRIMARY_COLOR", "#40296C") as string),
@@ -79,6 +80,7 @@ export const App: FC<
7980
primaryColor: "primary",
8081
fontFamily: "Outfit, sans-serif",
8182
primaryShade: 8,
83+
defaultRadius: "sm",
8284
}}
8385
>
8486
<HelmetProvider context={props.helmetContext}>
@@ -97,7 +99,7 @@ export const App: FC<
9799
</Helmet>
98100
{props.children}
99101
</ModalsProvider>
100-
<Notifications/>
102+
<Notifications pauseResetOnHover="notification"/>
101103
{showGlobalConsentBanner && (
102104
<CookieConsentBanner onConsent={handleGlobalConsent}/>
103105
)}

‎frontend/src/components/common/Accordion/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import {Accordion as MantineAccordion, Group, Text} from '@mantine/core';
2-
import {TablerIconsProps} from '@tabler/icons-react';
2+
import {Icon} from '@tabler/icons-react';
33
import classes from './Accordion.module.scss';
44
import React from "react";
55

66
export interface AccordionItem {
77
value: string;
8-
icon?: (props: TablerIconsProps) => JSX.Element;
8+
icon?: Icon;
99
title: string;
1010
count?: number;
1111
hidden?: boolean;

‎frontend/src/components/common/AttendeeList/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -119,7 +119,7 @@ export const AttendeeList = ({order, products, refetchOrder, questionAnswers = [
119119
</div>
120120

121121
{/* Collapsible answers section */}
122-
<Collapse in={isExpanded(attendee.id)}>
122+
<Collapse expanded={isExpanded(attendee.id)}>
123123
<div className={classes.answersContainer}>
124124
<QuestionList
125125
compact

‎frontend/src/components/common/Editor/Controls/InsertImageControl/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,7 @@ export const InsertImageControl = () => {
9898
}}
9999
title={t`Insert Image`}
100100
>
101-
<Tabs value={tab} onChange={setTab} variant="outline">
101+
<Tabs value={tab} onChange={(value) => setTab(value ?? 'url')} variant="outline">
102102
<Tabs.List grow>
103103
<Tabs.Tab value="url">{t`Paste URL`}</Tabs.Tab>
104104
<Tabs.Tab value="upload">{t`Upload Image`}</Tabs.Tab>

‎frontend/src/components/common/Editor/Extensions/ImageResizeExtension/index.tsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import Image from '@tiptap/extension-image';
2-
import { NodeViewProps } from '@tiptap/react';
1+
import {Image} from '@tiptap/extension-image';
2+
import {NodeViewRendererProps} from '@tiptap/core';
33

44
/**
55
* Adapted from https://github.com/bae-sh/tiptap-extension-resize-image/blob/main/lib/imageResize.ts
@@ -22,7 +22,7 @@ export const ImageResize = Image.extend({
2222
},
2323

2424
addNodeView() {
25-
return ({ node, editor, getPos }: NodeViewProps) => {
25+
return ({ node, editor, getPos }: NodeViewRendererProps) => {
2626
const {
2727
view,
2828
options: { editable },
@@ -89,11 +89,13 @@ export const ImageResize = Image.extend({
8989

9090
const dispatchNodeView = () => {
9191
if (typeof getPos === 'function') {
92+
const pos = getPos();
93+
if (pos === undefined) return;
9294
const newAttrs = {
9395
...node.attrs,
9496
style: `${$img.style.cssText}`,
9597
};
96-
view.dispatch(view.state.tr.setNodeMarkup(getPos(), null, newAttrs));
98+
view.dispatch(view.state.tr.setNodeMarkup(pos, null, newAttrs));
9799
}
98100
};
99101

‎frontend/src/components/common/Editor/Extensions/LiquidTokenExtension/TokenComponent.tsx‎

Lines changed: 3 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,9 @@
1-
import {NodeViewWrapper} from '@tiptap/react';
1+
import {NodeViewWrapper, ReactNodeViewProps} from '@tiptap/react';
22
import {Badge, Tooltip} from '@mantine/core';
33
import {IconCode} from '@tabler/icons-react';
44

5-
interface TokenComponentProps {
6-
node: {
7-
attrs: {
8-
tokenName: string;
9-
tokenDescription: string;
10-
};
11-
};
12-
selected: boolean;
13-
}
14-
15-
export const TokenComponent = ({node, selected}: TokenComponentProps) => {
16-
const {tokenName, tokenDescription} = node.attrs;
5+
export const TokenComponent = ({node, selected}: ReactNodeViewProps) => {
6+
const {tokenName, tokenDescription} = node.attrs as { tokenName: string; tokenDescription: string };
177

188
const tokenBadge = (
199
<Badge

‎frontend/src/components/common/Editor/Extensions/LiquidVariableExtension.tsx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,13 @@
11
import { Node } from '@tiptap/core';
22

3+
declare module '@tiptap/core' {
4+
interface Commands<ReturnType> {
5+
liquidVariable: {
6+
insertLiquidVariable: (variable: string) => ReturnType;
7+
};
8+
}
9+
}
10+
311
export const LiquidVariable = Node.create({
412
name: 'liquidVariable',
513

‎frontend/src/components/common/Editor/index.tsx‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,9 @@
11
import {Link, RichTextEditor} from "@mantine/tiptap";
22
import {useEditor} from "@tiptap/react";
33
import StarterKit from '@tiptap/starter-kit';
4-
import Underline from '@tiptap/extension-underline';
5-
import TextAlign from '@tiptap/extension-text-align';
6-
import Image from '@tiptap/extension-image';
7-
import TextStyle from '@tiptap/extension-text-style';
8-
import Color from '@tiptap/extension-color';
4+
import {TextAlign} from '@tiptap/extension-text-align';
5+
import {Image} from '@tiptap/extension-image';
6+
import {Color, TextStyle} from '@tiptap/extension-text-style';
97
import React, {useEffect, useState} from "react";
108
import {InputDescription, InputError, InputLabel, MantineFontSize} from "@mantine/core";
119
import classes from "./Editor.module.scss";
@@ -49,6 +47,7 @@ export const Editor = ({
4947
const editor = useEditor({
5048
extensions: [
5149
StarterKit.configure({
50+
link: false,
5251
paragraph: {
5352
HTMLAttributes: {
5453
style: 'margin: 0.5em 0;'
@@ -60,7 +59,6 @@ export const Editor = ({
6059
}
6160
}
6261
}),
63-
Underline,
6462
Link,
6563
TextAlign.configure({types: ['heading', 'paragraph']}),
6664
Image,
@@ -86,7 +84,7 @@ export const Editor = ({
8684
useEffect(() => {
8785
if (value && editor) {
8886
if (value !== editor.getHTML()) {
89-
editor.commands.setContent(value, false, {preserveWhitespace: "full"});
87+
editor.commands.setContent(value, {emitUpdate: false, parseOptions: {preserveWhitespace: "full"}});
9088
}
9189
const htmlLength = value.length;
9290

‎frontend/src/components/common/EmailTemplateEditor/EmailTemplateEditor.module.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
.previewContent {
1515
padding: 1.5rem;
1616

17-
:global(.mantine-TypographyStylesProvider-root) {
17+
:global(.mantine-Typography-root) {
1818
line-height: 1.6;
1919

2020
h1, h2, h3, h4, h5, h6 {

0 commit comments

Comments
 (0)