Skip to content

Commit 5bfeccc

Browse files
ChumpChiefChumpChief
committed
React fixup, remove unused fluentui deps
1 parent 215f3f3 commit 5bfeccc

13 files changed

+2096
-4283
lines changed

‎brainstorm/package-lock.json

+2,033-4,079
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎brainstorm/package.json

+5-1
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,6 @@
2727
"dependencies": {
2828
"@azure/identity": "^4.5.0",
2929
"@azure/msal-browser": "^3.28.0",
30-
"@fluentui/react-components": "^9.56.5",
3130
"@fluentui/react-icons": "^2.0.266",
3231
"@fluidframework/azure-client": "^2.13.0",
3332
"@fluidframework/odsp-client": "^2.13.0",
@@ -78,5 +77,10 @@
7877
"webpack": "^5.96.1",
7978
"webpack-cli": "^5.1.4",
8079
"webpack-dev-server": "^5.1.0"
80+
},
81+
"overrides": {
82+
"@fluentui/react-icons": {
83+
"react": "^19.0.0"
84+
}
8185
}
8286
}

‎brainstorm/src/react/buttonux.tsx

+14-16
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
* Licensed under the MIT License.
44
*/
55

6-
import React from "react";
6+
import React, { ReactNode } from "react";
77
import { Items, Note } from "../schema/app_schema.js";
88
import { moveItem, findNote } from "../utils/app_helpers.js";
99
import {
@@ -23,7 +23,7 @@ export function NewGroupButton(props: {
2323
items: Items;
2424
session: Session;
2525
clientId: string;
26-
}): JSX.Element {
26+
}): ReactNode {
2727
const handleClick = (e: React.MouseEvent) => {
2828
e.stopPropagation();
2929
// Wrap the add group operation in a transaction as it adds a group and potentially moves
@@ -52,7 +52,7 @@ export function NewGroupButton(props: {
5252
);
5353
}
5454

55-
export function NewNoteButton(props: { items: Items; clientId: string }): JSX.Element {
55+
export function NewNoteButton(props: { items: Items; clientId: string }): ReactNode {
5656
const handleClick = (e: React.MouseEvent) => {
5757
e.stopPropagation();
5858
props.items.addNode(props.clientId);
@@ -74,7 +74,7 @@ export function DeleteNotesButton(props: {
7474
session: Session;
7575
items: Items;
7676
clientId: string;
77-
}): JSX.Element {
77+
}): ReactNode {
7878
const handleClick = () => {
7979
// Wrap the delete operation in a transaction as it potentially modifies multiple notes
8080
// and we want to ensure that the operation is atomic. This ensures that the revertible of
@@ -99,7 +99,7 @@ export function DeleteNotesButton(props: {
9999
);
100100
}
101101

102-
export function UndoButton(props: { undo: () => void }): JSX.Element {
102+
export function UndoButton(props: { undo: () => void }): ReactNode {
103103
return (
104104
<IconButton
105105
color="white"
@@ -112,7 +112,7 @@ export function UndoButton(props: { undo: () => void }): JSX.Element {
112112
);
113113
}
114114

115-
export function RedoButton(props: { redo: () => void }): JSX.Element {
115+
export function RedoButton(props: { redo: () => void }): ReactNode {
116116
return (
117117
<IconButton
118118
color="white"
@@ -125,9 +125,7 @@ export function RedoButton(props: { redo: () => void }): JSX.Element {
125125
);
126126
}
127127

128-
export function DeleteButton(props: {
129-
handleClick: (value: React.MouseEvent) => void;
130-
}): JSX.Element {
128+
export function DeleteButton(props: { handleClick: (value: React.MouseEvent) => void }): ReactNode {
131129
const handleClick = (e: React.MouseEvent) => {
132130
e.stopPropagation();
133131
props.handleClick(e);
@@ -147,10 +145,10 @@ export function DeleteButton(props: {
147145
export function IconButton(props: {
148146
handleClick: (value: React.MouseEvent) => void;
149147
children?: React.ReactNode;
150-
icon: JSX.Element;
148+
icon: ReactNode;
151149
color?: string;
152150
background?: string;
153-
}): JSX.Element {
151+
}): ReactNode {
154152
const handleClick = (e: React.MouseEvent) => {
155153
e.stopPropagation();
156154
props.handleClick(e);
@@ -177,27 +175,27 @@ IconButton.defaultProps = {
177175
background: "bg-transparent",
178176
};
179177

180-
function IconButtonText(props: { children: React.ReactNode }): JSX.Element {
178+
function IconButtonText(props: { children: React.ReactNode }): ReactNode {
181179
if (props.children == undefined) {
182180
return <span></span>;
183181
} else {
184182
return <span className="text-sm pl-2 leading-none">{props.children}</span>;
185183
}
186184
}
187185

188-
function MiniX(): JSX.Element {
186+
function MiniX(): ReactNode {
189187
return <DismissFilled />;
190188
}
191189

192-
export function MiniThumb(): JSX.Element {
190+
export function MiniThumb(): ReactNode {
193191
return <ThumbLikeFilled />;
194192
}
195193

196-
export function ButtonGroup(props: { children: React.ReactNode }): JSX.Element {
194+
export function ButtonGroup(props: { children: React.ReactNode }): ReactNode {
197195
return <div className="flex flex-intial items-center">{props.children}</div>;
198196
}
199197

200-
export function Floater(props: { children: React.ReactNode }): JSX.Element {
198+
export function Floater(props: { children: React.ReactNode }): ReactNode {
201199
return (
202200
<div className="transition transform absolute z-100 bottom-0 inset-x-0 pb-2 sm:pb-5 opacity-100 scale-100 translate-y-0 ease-out duration-500 text-white">
203201
<div className="max-w-screen-md mx-auto px-2 sm:px-4">

‎brainstorm/src/react/canvasux.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
* Licensed under the MIT License.
44
*/
55

6-
import React, { useEffect, useState } from "react";
6+
import React, { ReactNode, useEffect, useState } from "react";
77
import { Note, Group, Items } from "../schema/app_schema.js";
88
import { Session } from "../schema/session_schema.js";
99
import {
@@ -40,7 +40,7 @@ export function Canvas(props: {
4040
setConnectionState: (arg: string) => void;
4141
setSaved: (arg: boolean) => void;
4242
setFluidMembers: (arg: string[]) => void;
43-
}): JSX.Element {
43+
}): ReactNode {
4444
const [itemsArray, setItemsArray] = useState<(Note | Group)[]>(
4545
props.items.root.map((item) => item),
4646
);
@@ -135,7 +135,7 @@ export function ItemsView(props: {
135135
clientId: string;
136136
session: Session;
137137
fluidMembers: string[];
138-
}): JSX.Element {
138+
}): ReactNode {
139139
const isRoot = Tree.parent(props.parent) === undefined;
140140

141141
const pilesArray = [];

‎brainstorm/src/react/groupux.tsx

+5-5
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
* Licensed under the MIT License.
44
*/
55

6-
import React, { useEffect, useState } from "react";
6+
import React, { ReactNode, useEffect, useState } from "react";
77
import { Group, Items, Note } from "../schema/app_schema.js";
88
import { moveItem } from "../utils/app_helpers.js";
99
import { ConnectableElement, useDrag, useDrop } from "react-dnd";
@@ -18,7 +18,7 @@ export function GroupView(props: {
1818
clientId: string;
1919
session: Session;
2020
fluidMembers: string[];
21-
}): JSX.Element {
21+
}): ReactNode {
2222
// copy the array of items from the group
2323
// to force a re-render when the array changes
2424
const [itemsArray, setItemsArray] = useState<(Note | Group)[]>(
@@ -134,7 +134,7 @@ export function GroupView(props: {
134134
);
135135
}
136136

137-
function GroupName(props: { name: string; changeName: (name: string) => void }): JSX.Element {
137+
function GroupName(props: { name: string; changeName: (name: string) => void }): ReactNode {
138138
return (
139139
<input
140140
className="flex w-0 grow p-1 mb-2 mr-2 text-lg font-bold text-black bg-transparent"
@@ -149,7 +149,7 @@ function GroupToolbar(props: {
149149
name: string;
150150
changeName: (name: string) => void;
151151
deletePile: () => void;
152-
}): JSX.Element {
152+
}): ReactNode {
153153
return (
154154
<div className="flex flex-row justify-between">
155155
<GroupName {...props} />
@@ -158,6 +158,6 @@ function GroupToolbar(props: {
158158
);
159159
}
160160

161-
export function DeletePileButton(props: { deletePile: () => void }): JSX.Element {
161+
export function DeletePileButton(props: { deletePile: () => void }): ReactNode {
162162
return <DeleteButton handleClick={() => props.deletePile()}></DeleteButton>;
163163
}

‎brainstorm/src/react/noteux.tsx

+10-10
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
* Licensed under the MIT License.
44
*/
55

6-
import React, { useEffect, useRef, useState } from "react";
6+
import React, { ReactNode, RefObject, useEffect, useRef, useState } from "react";
77
import { Note, Group, Items } from "../schema/app_schema.js";
88
import { moveItem } from "../utils/app_helpers.js";
99
import { dragType, getRotation, selectAction } from "../utils/utils.js";
@@ -19,7 +19,7 @@ export function RootNoteWrapper(props: {
1919
clientId: string;
2020
session: Session;
2121
fluidMembers: string[];
22-
}): JSX.Element {
22+
}): ReactNode {
2323
return (
2424
<div className="bg-transparent flex flex-col justify-center h-64">
2525
<NoteView {...props} />
@@ -32,7 +32,7 @@ export function NoteView(props: {
3232
clientId: string;
3333
session: Session;
3434
fluidMembers: string[];
35-
}): JSX.Element {
35+
}): ReactNode {
3636
const mounted = useRef(false);
3737

3838
const [{ status }, toggle] = useTransition({
@@ -215,7 +215,7 @@ export function NoteView(props: {
215215
);
216216
}
217217

218-
function NoteSelection(props: { show: boolean }): JSX.Element {
218+
function NoteSelection(props: { show: boolean }): ReactNode {
219219
if (props.show) {
220220
return (
221221
<div className="absolute -top-2 -left-2 h-52 w-52 rounded border-dashed border-indigo-800 border-4" />
@@ -229,7 +229,7 @@ function NoteTextArea(props: {
229229
text: string;
230230
update: (text: string) => void;
231231
select: (value: selectAction) => void;
232-
}): JSX.Element {
232+
}): ReactNode {
233233
// The text field updates the Fluid data model on every keystroke in this demo.
234234
// This works well with small strings but doesn't scale to very large strings.
235235
// A Future iteration of SharedTree will include support for collaborative strings
@@ -259,7 +259,7 @@ function NoteToolbar(props: {
259259
toggleVote: () => void;
260260
voteCount: number;
261261
deleteNote: () => void;
262-
}): JSX.Element {
262+
}): ReactNode {
263263
return (
264264
<div className="flex justify-between z-50">
265265
<LikeButton {...props} />
@@ -268,7 +268,7 @@ function NoteToolbar(props: {
268268
);
269269
}
270270

271-
export function AddNoteButton(props: { target: Items; clientId: string }): JSX.Element {
271+
export function AddNoteButton(props: { target: Items; clientId: string }): ReactNode {
272272
const [{ isActive }, drop] = useDrop(() => ({
273273
accept: [dragType.NOTE, dragType.GROUP],
274274
collect: (monitor) => ({
@@ -315,7 +315,7 @@ export function AddNoteButton(props: { target: Items; clientId: string }): JSX.E
315315
}
316316
></div>
317317
<div
318-
ref={drop}
318+
ref={drop as unknown as RefObject<HTMLDivElement>}
319319
className={
320320
"transition-all text-2xl place-content-center font-bold flex flex-col text-center cursor-pointer bg-transparent border-white border-dashed border-8 " +
321321
size +
@@ -335,7 +335,7 @@ function LikeButton(props: {
335335
voted: boolean;
336336
toggleVote: () => void;
337337
voteCount: number;
338-
}): JSX.Element {
338+
}): ReactNode {
339339
const setColor = () => {
340340
if (props.voted) {
341341
return "text-white";
@@ -366,6 +366,6 @@ function LikeButton(props: {
366366
);
367367
}
368368

369-
function DeleteNoteButton(props: { deleteNote: () => void }): JSX.Element {
369+
function DeleteNoteButton(props: { deleteNote: () => void }): ReactNode {
370370
return <DeleteButton handleClick={() => props.deleteNote()}></DeleteButton>;
371371
}

‎brainstorm/src/react/ux.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
* Licensed under the MIT License.
44
*/
55

6-
import React, { useEffect, useState } from "react";
6+
import React, { ReactNode, useEffect, useState } from "react";
77
import { Items } from "../schema/app_schema.js";
88
import { Session } from "../schema/session_schema.js";
99
import "../output.css";
@@ -18,7 +18,7 @@ export function ReactApp(props: {
1818
audience: IServiceAudience<IMember>;
1919
container: IFluidContainer;
2020
undoRedo: undoRedo;
21-
}): JSX.Element {
21+
}): ReactNode {
2222
const [currentUser, setCurrentUser] = useState(undefinedUserId);
2323
const [connectionState, setConnectionState] = useState("");
2424
const [saved, setSaved] = useState(false);
@@ -64,7 +64,7 @@ export function Header(props: {
6464
connectionState: string;
6565
fluidMembers: string[];
6666
clientId: string;
67-
}): JSX.Element {
67+
}): ReactNode {
6868
return (
6969
<div className="h-[48px] flex shrink-0 flex-row items-center justify-between bg-black text-base text-white z-40 w-full">
7070
<div className="flex m-2">Brainstorm</div>

0 commit comments

Comments
 (0)