Bump @mantine/form from 6.0.10 to 7.0.0 in /frontend

Bumps [@mantine/form](https://github.com/mantinedev/mantine/tree/HEAD/src/mantine-hooks) from 6.0.10 to 7.0.0. - [Release notes](https://github.com/mantinedev/mantine/releases) - [Changelog](https://github.com/mantinedev/mantine/blob/master/CHANGELOG.md) - [Commits](https://github.com/mantinedev/mantine/commits/7.0.0/src/mantine-hooks) --- updated-dependencies: - dependency-name: "@mantine/form" dependency-type: direct:production update-type: version-update:semver-major ... Signed-off-by: dependabot[bot] <[email protected]>
evroon · Nov 27, 2023 · d733691 · d733691
1 parent fcf8dd1
commit d733691
Show file tree

Hide file tree

Showing 34 changed files with 194 additions and 251 deletions.
diff --git a/frontend/package.json b/frontend/package.json
@@ -20,14 +20,14 @@
     "@emotion/react": "^11.10.6",
     "@emotion/server": "^11.10.0",
     "@hello-pangea/dnd": "^16.3.0",
-    "@mantine/core": "^6.0.5",
-    "@mantine/dates": "^6.0.5",
-    "@mantine/dropzone": "^6.0.5",
-    "@mantine/form": "^6.0.5",
-    "@mantine/hooks": "^6.0.5",
-    "@mantine/next": "^6.0.5",
-    "@mantine/notifications": "^6.0.5",
-    "@mantine/spotlight": "^6.0.5",
+    "@mantine/dates": "^7.0.0",
+    "@mantine/spotlight": "^7.0.0",
+    "@mantine/core": "^7.0.0",
+    "@mantine/dropzone": "^7.0.0",
+    "@mantine/form": "^7.0.0",
+    "@mantine/hooks": "^7.0.0",
+    "@mantine/next": "^6.0.21",
+    "@mantine/notifications": "^7.0.0",
     "@next/bundle-analyzer": "^13.3.1",
     "@react-icons/all-files": "^4.1.0",
     "@tabler/icons-react": "^2.17.0",

diff --git a/frontend/src/components/brackets/brackets.tsx b/frontend/src/components/brackets/brackets.tsx
@@ -92,7 +92,7 @@ function getRoundsGridCols(
 function NoRoundsAlert({ readOnly }: { readOnly: boolean }) {
   if (readOnly) {
     return (
-      <Alert icon={<IconAlertCircle size={16} />} title="No rounds found" color="blue" radius="lg">
+      <Alert icon={<IconAlertCircle size={16} />} title="No rounds found" c="blue" radius="lg">
         Please wait for the organiser to add them.
       </Alert>
     );
@@ -112,7 +112,7 @@ function NotStartedAlert() {
       <Alert
         icon={<IconAlertCircle size={16} />}
         title="Tournament has not started yet"
-        color="blue"
+        c="blue"
         radius="lg"
       >
         Please wait for the tournament to start.

diff --git a/frontend/src/components/buttons/delete.tsx b/frontend/src/components/buttons/delete.tsx
@@ -4,7 +4,7 @@ import React from 'react';
 
 export default function DeleteButton(props: any) {
   return (
-    <Button color="red" size="xs" leftIcon={<MdDelete size={20} />} {...props}>
+    <Button c="red" size="xs" leftSection={<MdDelete size={20} />} {...props}>
       {props.title}
     </Button>
   );

diff --git a/frontend/src/components/buttons/next_stage_button.tsx b/frontend/src/components/buttons/next_stage_button.tsx
@@ -9,8 +9,8 @@ export function NextStageButton({ tournamentData, swrStagesResponse }: any) {
     <Button
       size="md"
       style={{ marginBottom: 10 }}
-      color="indigo"
-      leftIcon={<IconSquareArrowRight size={24} />}
+      c="indigo"
+      leftSection={<IconSquareArrowRight size={24} />}
       onClick={async () => {
         await activateNextStage(tournamentData.id, 'next');
         swrStagesResponse.mutate();
@@ -26,8 +26,8 @@ export function PreviousStageButton({ tournamentData, swrStagesResponse }: any)
     <Button
       size="md"
       style={{ marginBottom: 10 }}
-      color="indigo"
-      leftIcon={<IconSquareArrowLeft size={24} />}
+      c="indigo"
+      leftSection={<IconSquareArrowLeft size={24} />}
       onClick={async () => {
         await activateNextStage(tournamentData.id, 'previous');
         swrStagesResponse.mutate();

diff --git a/frontend/src/components/color_scheme_toggle/ColorSchemeToggle.tsx b/frontend/src/components/color_scheme_toggle/ColorSchemeToggle.tsx
@@ -5,7 +5,7 @@ export function ColorSchemeToggle() {
   const { colorScheme, toggleColorScheme } = useMantineColorScheme();
 
   return (
-    <Group position="center" mt="xl">
+    <Group justify="center" mt="xl">
       <ActionIcon
         onClick={() => toggleColorScheme()}
         size="xl"

diff --git a/frontend/src/components/forms/user.tsx b/frontend/src/components/forms/user.tsx
@@ -62,7 +62,7 @@ export default function UserForm({ user }: { user: UserInterface }) {
             type="email"
             {...details_form.getInputProps('email')}
           />
-          <Button fullWidth style={{ marginTop: 20 }} color="green" type="submit">
+          <Button fullWidth style={{ marginTop: 20 }} c="green" type="submit">
             Save
           </Button>
         </form>
@@ -74,7 +74,7 @@ export default function UserForm({ user }: { user: UserInterface }) {
           })}
         >
           <PasswordStrength form={password_form} />
-          <Button fullWidth style={{ marginTop: 20 }} color="green" type="submit">
+          <Button fullWidth style={{ marginTop: 20 }} c="green" type="submit">
             Save
           </Button>
         </form>

diff --git a/frontend/src/components/info/player_score.tsx b/frontend/src/components/info/player_score.tsx
@@ -16,8 +16,8 @@ export function PlayerScore({ score, min_score, max_score, color, decimals }: Sc
 
   return (
     <>
-      <Group position="apart">
-        <Text size="xs" color={color} weight={700}>
+      <Group justify="apart">
+        <Text size="xs" c={color} fw={700}>
           {score.toFixed(decimals)}
         </Text>
       </Group>

diff --git a/frontend/src/components/info/player_statistics.tsx b/frontend/src/components/info/player_statistics.tsx
@@ -1,6 +1,6 @@
 import { Group, Progress, Text, createStyles } from '@mantine/core';
 
-const useStyles = createStyles((theme) => ({
+const useStyles = createStyles((theme: any) => ({
   progressBar: {
     '&:not(:first-of-type)': {
       borderLeft: `3px solid ${theme.colorScheme === 'dark' ? theme.colors.dark[7] : theme.white}`,
@@ -35,19 +35,19 @@ export function WinDistribution({ wins, draws, losses }: PlayerStatisticsProps)
 
   const draws_text =
     draws === 0 ? null : (
-      <Text size="xs" color="orange" weight={700}>
+      <Text size="xs" c="orange" fw={700}>
         {draws.toFixed(0)}
       </Text>
     );
 
   return (
     <>
-      <Group position="apart">
-        <Text size="xs" color="teal" weight={700}>
+      <Group justify="apart">
+        <Text size="xs" c="teal" fw={700}>
           {wins.toFixed(0)}
         </Text>
         {draws_text}
-        <Text size="xs" color="red" weight={700}>
+        <Text size="xs" c="red" fw={700}>
           {losses.toFixed(0)}
         </Text>
       </Group>

diff --git a/frontend/src/components/modals/club_modal.tsx b/frontend/src/components/modals/club_modal.tsx
@@ -21,20 +21,20 @@ export default function ClubModal({
   const icon = is_create_form ? <GoPlus size={20} /> : <BiEditAlt size={20} />;
   const [opened, setOpened] = useState(false);
   const modalOpenButton = is_create_form ? (
-    <Group position="right">
+    <Group justify="right">
       <SaveButton
         onClick={() => setOpened(true)}
-        leftIcon={<GoPlus size={24} />}
+        leftSection={<GoPlus size={24} />}
         title={operation_text}
       />
     </Group>
   ) : (
     <Button
-      color="green"
+      c="green"
       size="xs"
       style={{ marginRight: 10 }}
       onClick={() => setOpened(true)}
-      leftIcon={icon}
+      leftSection={icon}
     >
       {operation_text}
     </Button>
@@ -68,7 +68,7 @@ export default function ClubModal({
             {...form.getInputProps('name')}
           />
 
-          <Button fullWidth style={{ marginTop: 10 }} color="green" type="submit">
+          <Button fullWidth style={{ marginTop: 10 }} c="green" type="submit">
             Save
           </Button>
         </form>

diff --git a/frontend/src/components/modals/player_update_modal.tsx b/frontend/src/components/modals/player_update_modal.tsx
@@ -19,7 +19,7 @@ export default function PlayerUpdateModal({
   const [opened, setOpened] = useState(false);
   const modalOpenButton = (
     <Button
-      color="green"
+      c="green"
       size="xs"
       style={{ marginRight: 10 }}
       onClick={() => setOpened(true)}
@@ -62,7 +62,7 @@ export default function PlayerUpdateModal({
             {...form.getInputProps('active', { type: 'checkbox' })}
           />
 
-          <Button fullWidth style={{ marginTop: 10 }} color="green" type="submit">
+          <Button fullWidth style={{ marginTop: 10 }} c="green" type="submit">
             Save
           </Button>
         </form>

diff --git a/frontend/src/components/modals/round_modal.tsx b/frontend/src/components/modals/round_modal.tsx
@@ -99,7 +99,7 @@ export default function RoundModal({
             label="This round is a draft round"
             {...form.getInputProps('is_draft', { type: 'checkbox' })}
           />
-          <Button fullWidth style={{ marginTop: 20 }} color="green" type="submit">
+          <Button fullWidth style={{ marginTop: 20 }} c="green" type="submit">
             Save
           </Button>
         </form>

diff --git a/frontend/src/components/modals/team_update_modal.tsx b/frontend/src/components/modals/team_update_modal.tsx
@@ -78,7 +78,7 @@ export default function TeamUpdateModal({
             {...form.getInputProps('player_ids')}
           />
 
-          <Button fullWidth style={{ marginTop: 10 }} color="green" type="submit">
+          <Button fullWidth style={{ marginTop: 10 }} c="green" type="submit">
             Save
           </Button>
         </form>

diff --git a/frontend/src/components/modals/tournament_modal.tsx b/frontend/src/components/modals/tournament_modal.tsx
@@ -162,7 +162,7 @@ function GeneralTournamentForm({
         {...form.getInputProps('auto_assign_courts', { type: 'checkbox' })}
       />
 
-      <Button fullWidth mt={8} color="green" type="submit">
+      <Button fullWidth mt={8} c="green" type="submit">
         Save
       </Button>
     </form>
@@ -188,10 +188,10 @@ export default function TournamentModal({
           clubs={clubs}
         />
       </Modal>
-      <Group position="right">
+      <Group justify="right">
         <SaveButton
           onClick={() => setOpened(true)}
-          leftIcon={<GoPlus size={24} />}
+          leftSection={<GoPlus size={24} />}
           title={operation_text}
         />
       </Group>

diff --git a/frontend/src/components/navbar/_brand.tsx b/frontend/src/components/navbar/_brand.tsx
@@ -11,7 +11,7 @@ export function Brand() {
         paddingTop: '1rem',
       })}
     >
-      <Group position="apart" ml="1rem">
+      <Group justify="apart" ml="1rem">
         <UnstyledButton
           onClick={async () => {
             await router.push('/');

diff --git a/frontend/src/components/navbar/_main_links.tsx b/frontend/src/components/navbar/_main_links.tsx
@@ -24,7 +24,7 @@ interface MainLinkProps {
 function MainLink({ item, pathName }: { item: MainLinkProps; pathName: String }) {
   const { classes, cx } = useNavbarStyles();
   return (
-    <Tooltip label={item.label} position="right" transitionProps={{ duration: 0 }}>
+    <Tooltip label={item.label} justify="right" transitionProps={{ duration: 0 }}>
       <UnstyledButton
         onClick={() => item.router.push(item.endpoint)}
         className={cx(classes.link, { [classes.linkActive]: pathName === item.endpoint })}

diff --git a/frontend/src/components/tables/players.tsx b/frontend/src/components/tables/players.tsx
@@ -59,9 +59,9 @@ export default function PlayersTable({
       <tr key={player.id}>
         <td>
           {player.active ? (
-            <Badge color="green">Active</Badge>
+            <Badge c="green">Active</Badge>
           ) : (
-            <Badge color="red">Inactive</Badge>
+            <Badge c="red">Inactive</Badge>
           )}
         </td>
         <td>
@@ -78,7 +78,7 @@ export default function PlayersTable({
             score={player.elo_score}
             min_score={minELOScore}
             max_score={maxELOScore}
-            color="indigo"
+            c="indigo"
             decimals={0}
           />
         </td>
@@ -87,7 +87,7 @@ export default function PlayersTable({
             score={player.swiss_score}
             min_score={0}
             max_score={maxSwissScore}
-            color="grape"
+            c="grape"
             decimals={1}
           />
         </td>

diff --git a/frontend/src/components/tables/table.tsx b/frontend/src/components/tables/table.tsx
@@ -87,8 +87,8 @@ export function ThSortable({ children, field, state }: ThProps) {
   return (
     <th className={classes.th}>
       <UnstyledButton onClick={onSort} className={classes.control}>
-        <Group position="apart">
-          <Text weight={800} size="sm">
+        <Group justify="apart">
+          <Text fw={800} size="sm">
             {children}
           </Text>
           <Center className={classes.icon}>{getSortIcon(sorted, state.reversed)}</Center>
@@ -103,8 +103,8 @@ export function ThNotSortable({ children }: { children: React.ReactNode }) {
 
   return (
     <th className={classes.th}>
-      <Group position="apart" ml="20px">
-        <Text weight={800} size="sm">
+      <Group justify="apart" ml="20px">
+        <Text fw={800} size="sm">
           {children}
         </Text>
       </Group>

diff --git a/frontend/src/components/tables/teams.tsx b/frontend/src/components/tables/teams.tsx
@@ -31,7 +31,7 @@ export default function TeamsTable({
     .map((team) => (
       <tr key={team.id}>
         <td>
-          {team.active ? <Badge color="green">Active</Badge> : <Badge color="red">Inactive</Badge>}
+          {team.active ? <Badge c="green">Active</Badge> : <Badge c="red">Inactive</Badge>}
         </td>
         <td>{team.name}</td>
         <td>

diff --git a/frontend/src/components/tables/tournaments.tsx b/frontend/src/components/tables/tournaments.tsx
@@ -40,11 +40,11 @@ export default function TournamentsTable({
         </td>
         <td>
           <Button
-            color="green"
+            c="green"
             size="xs"
             style={{ marginRight: 10 }}
             onClick={() => router.push(`/tournaments/${tournament.id}/settings`)}
-            leftIcon={<BiEditAlt size={20} />}
+            leftSection={<BiEditAlt size={20} />}
           >
             Edit Tournament
           </Button>

diff --git a/frontend/src/components/tables/upcoming_matches.tsx b/frontend/src/components/tables/upcoming_matches.tsx
@@ -60,7 +60,7 @@ export default function UpcomingMatchesTable({
       <tr key={`${upcoming_match.team1.id} - ${upcoming_match.team2.id}`}>
         <td>
           {upcoming_match.is_recommended ? (
-            <Badge leftSection={<IconCheck size={18} />} color="blue">
+            <Badge leftSection={<IconCheck size={18} />} c="blue">
               Recommended
             </Badge>
           ) : null}
@@ -75,11 +75,11 @@ export default function UpcomingMatchesTable({
         <td>{upcoming_match.swiss_diff.toFixed(1)}</td>
         <td>
           <Button
-            color="green"
+            c="green"
             size="xs"
             style={{ marginRight: 10 }}
             onClick={() => scheduleMatch(upcoming_match)}
-            leftIcon={<IconCalendarPlus size={20} />}
+            leftSection={<IconCalendarPlus size={20} />}
           >
             Schedule
           </Button>

diff --git a/frontend/src/components/utils/empty_table_info.tsx b/frontend/src/components/utils/empty_table_info.tsx
@@ -13,7 +13,7 @@ export function EmptyTableInfo({
     <Alert
       icon={<IconAlertCircle size={16} />}
       title={`No ${entity_name} found`}
-      color="blue"
+      c="blue"
       radius="lg"
       mt={8}
     >

diff --git a/frontend/src/components/utils/error_alert.tsx b/frontend/src/components/utils/error_alert.tsx
@@ -4,7 +4,7 @@ import React from 'react';
 
 export function ErrorAlert({ title, message }: { title: string; message: string }) {
   return (
-    <Alert icon={<IconAlertCircle size={16} />} title={title} color="red" radius="lg">
+    <Alert icon={<IconAlertCircle size={16} />} title={title} c="red" radius="lg">
       {message}
     </Alert>
   );