wip: mantine

apps/client/package.json

@@ -4,12 +4,10 @@
  "private": true,
  "type": "module",
  "dependencies": {
- "@chakra-ui/react": "^2.7.0",
  "@dnd-kit/core": "^6.1.0",
  "@dnd-kit/sortable": "^8.0.0",
  "@dnd-kit/utilities": "^3.2.2",
- "@emotion/react": "^11.10.6",
- "@emotion/styled": "^11.10.6",
+ "@mantine/core": "^7.6.2",
  "@mantine/hooks": "^7.6.2",
  "@react-icons/all-files": "^4.1.0",
  "@sentry/react": "^7.92.0",

apps/client/src/App.tsx

@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
 import { BrowserRouter } from 'react-router-dom';
-import { ChakraProvider } from '@chakra-ui/react';
+import { MantineProvider } from '@mantine/core';
 import { QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 
@@ -11,10 +11,11 @@ import useElectronEvent from './common/hooks/useElectronEvent';
 import { ontimeQueryClient } from './common/queryClient';
 import { socketClientName } from './common/stores/connectionName';
 import { connectSocket } from './common/utils/socket';
-import theme from './theme/theme';
 import { TranslationProvider } from './translation/TranslationProvider';
 import AppRouter from './AppRouter';
 
+import { theme } from './theme/mantineTheme';
+
 // Load Open Sans typeface
 // @ts-expect-error no types from font import
 import('typeface-open-sans');
@@ -49,10 +50,10 @@ function App() {
  }, [isElectron, sendToElectron]);
 
  return (
- <ChakraProvider resetCSS theme={theme}>
- <QueryClientProvider client={ontimeQueryClient}>
- <AppContextProvider>
- <BrowserRouter>
+ <QueryClientProvider client={ontimeQueryClient}>
+ <AppContextProvider>
+ <BrowserRouter>
+ <MantineProvider theme={theme} defaultColorScheme='dark'>
  <div className='App'>
  <ErrorBoundary>
  <TranslationProvider>
@@ -63,10 +64,10 @@ function App() {
  </ErrorBoundary>
  <ReactQueryDevtools initialIsOpen={false} />
  </div>
- </BrowserRouter>
- </AppContextProvider>
- </QueryClientProvider>
- </ChakraProvider>
+ </MantineProvider>
+ </BrowserRouter>
+ </AppContextProvider>
+ </QueryClientProvider>
  );
 }
 

apps/client/src/common/components/buttons/QuitIconBtn.tsx

@@ -1,15 +1,7 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
-import {
- AlertDialog,
- AlertDialogBody,
- AlertDialogContent,
- AlertDialogFooter,
- AlertDialogHeader,
- AlertDialogOverlay,
- Button,
- IconButton,
- Tooltip,
-} from '@chakra-ui/react';
+import { useCallback, useEffect } from 'react';
+import { ActionIcon, Button, Group, Modal, Space, Tooltip } from '@mantine/core';
+import { useDisclosure } from '@mantine/hooks';
+
 import { IoPowerOutline } from '@react-icons/all-files/io5/IoPowerOutline';
 
 import { useEmitLog } from '../../stores/logger';
@@ -19,78 +11,60 @@ interface QuitIconBtnProps {
  disabled?: boolean;
 }
 
-const quitBtnStyle = {
- color: '#D20300', // $red-700
- borderColor: '#D20300', // $red-700
- _focus: { boxShadow: 'none' },
- _hover: {
- background: '#D20300', // $red-700
- color: 'white',
- _disabled: {
- color: '#D20300', // $red-700
- background: 'none',
- },
- },
- _active: {
- background: '#9A0000', // $red-1000
- color: 'white',
- },
- variant: 'outline',
- isRound: true,
-};
-
 export default function QuitIconBtn(props: QuitIconBtnProps) {
- const { clickHandler, disabled, ...rest } = props;
- const [isOpen, setIsOpen] = useState(false);
+ const { clickHandler, disabled } = props;
+ const [opened, { open, close }] = useDisclosure(false);
  const { emitInfo } = useEmitLog();
- const onClose = () => setIsOpen(false);
- const cancelRef = useRef<HTMLButtonElement | null>(null);
 
  useEffect(() => {
  if (window.process?.type === 'renderer') {
  window.ipcRenderer.on('user-request-shutdown', () => {
  emitInfo('Shutdown request');
- setIsOpen(true);
+ open();
  });
  }
- }, [emitInfo]);
+ }, [emitInfo, open]);
 
  const handleShutdown = useCallback(() => {
- onClose();
+ close();
  clickHandler();
- }, [clickHandler]);
+ }, [clickHandler, close]);
 
  return (
  <>
  <Tooltip label='Quit Application'>
- <IconButton
+ <ActionIcon
  aria-label='Quit Application'
+ variant='filled'
  size='lg'
- icon={<IoPowerOutline />}
- onClick={() => setIsOpen(true)}
- isDisabled={disabled}
-  {...quitBtnStyle}
- {...rest}
- />
+ color='red'
+ onClick={open}
+ disabled={disabled}
+ >
+ <IoPowerOutline />
+ </ActionIcon>
  </Tooltip>
- <AlertDialog isOpen={isOpen} leastDestructiveRef={cancelRef} onClose={onClose}>
- <AlertDialogOverlay>
- <AlertDialogContent>
- <AlertDialogHeader fontSize='lg' fontWeight='bold'>
- Ontime Shutdown
- </AlertDialogHeader>
- <AlertDialogBody>This will shutdown the Ontime server. Are you sure?</AlertDialogBody>
- <AlertDialogFooter>
- <Button ref={cancelRef} onClick={onClose} variant='ghost'>
+ <Modal.Root opened={opened} onClose={close} size='auto'>
+ <Modal.Overlay />
+ <Modal.Content>
+ <Modal.Body>
+ <Group>
+ This will shutdown the Ontime server.
+ <br />
+ Are you sure?
+ </Group>
+ <Space h='sm' />
+ <Group justify='flex-end'>
+ <Button onClick={close} variant='outline' size='sm'>
  Cancel
  </Button>
- <Button colorScheme='red' onClick={handleShutdown} ml={3}>
+ <Button color='red' onClick={handleShutdown} size='sm'>
  Shutdown
  </Button>
- </AlertDialogFooter>
- </AlertDialogContent>
- </AlertDialogOverlay>
- </AlertDialog>
+ </Group>
+ </Modal.Body>
+ </Modal.Content>
+ </Modal.Root>
  </>
  );
 }

apps/client/src/common/components/buttons/TooltipActionBtn.tsx

@@ -1,17 +1,21 @@
 import { MouseEvent } from 'react';
-import { IconButton, IconButtonProps, Tooltip } from '@chakra-ui/react';
+import { ActionIcon, ActionIconProps, FloatingPosition, Tooltip } from '@mantine/core';
 
-interface TooltipActionBtnProps extends IconButtonProps {
+interface TooltipActionBtnProps extends ActionIconProps {
  clickHandler: (event: MouseEvent) => void | Promise<void>;
  tooltip: string;
+ tooltipPosition?: FloatingPosition;
  openDelay?: number;
+ icon: React.ReactNode;
 }
 
 export default function TooltipActionBtn(props: TooltipActionBtnProps) {
- const { clickHandler, icon, size = 'xs', tooltip, openDelay = 0, className, ...rest } = props;
+ const { clickHandler, icon, size = 'xs', tooltip, openDelay = 0, tooltipPosition, className, ...rest } = props;
  return (
- <Tooltip label={tooltip} openDelay={openDelay}>
- <IconButton {...rest} size={size} icon={icon} onClick={clickHandler} className={className} />
+ <Tooltip label={tooltip} openDelay={openDelay} position={tooltipPosition}>
+ <ActionIcon size={size} onClick={clickHandler} className={className} variant='transparent' {...rest}>
+ {icon}
+ </ActionIcon>
  </Tooltip>
  );
 }

apps/client/src/common/components/context-menu/ContextMenu.tsx

@@ -2,7 +2,7 @@
 // https://github.com/lukasbach/chakra-ui-contextmenu/blob/main/src/ContextMenu.tsx
 
 import { ReactElement } from 'react';
-import { Menu, MenuButton, MenuGroup, MenuList } from '@chakra-ui/react';
+import { Menu, Button } from '@mantine/core';
 import { IconType } from '@react-icons/all-files';
 import { create } from 'zustand';
 
@@ -68,8 +68,8 @@ export const ContextMenu = ({ children }: ContextMenuProps) => {
  <>
  {children}
  <div className={style.contextMenuBackdrop} />
- <Menu isOpen size='sm' gutter={0} onClose={onClose} isLazy lazyBehavior='unmount' variant='ontime-on-dark'>
- <MenuButton
+ <Menu opened onClose={onClose}>
+ <Button
  className={style.contextMenuButton}
  aria-hidden
  w={1}
@@ -79,19 +79,7 @@ export const ContextMenu = ({ children }: ContextMenuProps) => {
  top: coords.y,
  }}
  />
- <MenuList>
- {options.map((option) =>
- isOptionWithGroup(option) ? (
- <MenuGroup key={option.label} title={option.label}>
- {option.group.map((groupOption) => (
- <ContextMenuOption key={groupOption.label} {...groupOption} />
- ))}
- </MenuGroup>
- ) : (
- <ContextMenuOption key={option.label} {...option} />
- ),
- )}
- </MenuList>
+ <Menu.Item>TEMP</Menu.Item>
  </Menu>
  </>
  );

apps/client/src/common/components/context-menu/ContextMenuOption.tsx

@@ -1,12 +1,12 @@
-import { MenuDivider, MenuItem } from '@chakra-ui/react';
+import { Menu } from '@mantine/core';
 
 import { OptionWithoutGroup } from './ContextMenu';
 
 export const ContextMenuOption = ({ label, onClick, isDisabled, icon: Icon, withDivider }: OptionWithoutGroup) => (
  <>
- {withDivider && <MenuDivider />}
- <MenuItem icon={<Icon />} onClick={onClick} isDisabled={isDisabled}>
+ {withDivider && <Menu.Divider />}
+ <Menu.Item leftSection={<Icon />} onClick={onClick} disabled={isDisabled}>
  {label}
- </MenuItem>
+ </Menu.Item>
  </>
 );

apps/client/src/common/components/copy-tag/CopyTag.tsx

@@ -1,5 +1,5 @@
 import { PropsWithChildren } from 'react';
-import { Button, ButtonGroup, IconButton, Tooltip } from '@chakra-ui/react';
+import { Button, ActionIcon, Tooltip } from '@mantine/core';
 import { IoCopy } from '@react-icons/all-files/io5/IoCopy';
 
 import { tooltipDelayFast } from '../../../ontimeConfig';
@@ -20,19 +20,20 @@ export default function CopyTag(props: PropsWithChildren<CopyTagProps>) {
 
  return (
  <Tooltip label={label} openDelay={tooltipDelayFast}>
- <ButtonGroup size={size} isAttached className={className}>
- <Button variant='ontime-subtle' tabIndex={-1} isDisabled={disabled}>
+ <Button.Group className={className}>
+ <Button variant='ontime-subtle' tabIndex={-1} disabled={disabled}>
  {children}
  </Button>
- <IconButton
+ <ActionIcon
  aria-label={label}
- icon={<IoCopy />}
  variant='ontime-filled'
  tabIndex={-1}
  onClick={handleClick}
- isDisabled={disabled}
- />
- </ButtonGroup>
+ disabled={disabled}
+ >
+ <IoCopy />
+ </ActionIcon>
+ </Button.Group>
  </Tooltip>
  );
 }

apps/client/src/common/components/delay-indicator/DelayIndicator.tsx

@@ -1,4 +1,4 @@
-import { Tooltip } from '@chakra-ui/react';
+import { Tooltip } from '@mantine/core';
 import { IoChevronDown } from '@react-icons/all-files/io5/IoChevronDown';
 import { IoChevronUp } from '@react-icons/all-files/io5/IoChevronUp';
 

apps/client/src/common/components/input/auto-text-area/AutoTextArea.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useRef } from 'react';
-import { Textarea, TextareaProps } from '@chakra-ui/react';
+import { Textarea, TextareaProps } from '@mantine/core';
 // @ts-expect-error no types from library
 import autosize from 'autosize/dist/autosize';
 
@@ -18,11 +18,11 @@ export const AutoTextArea = (props: TextareaProps) => {
 
  return (
  <Textarea
- overflow='hidden'
+ //overflow='hidden'
  w='100%'
  resize='none'
  ref={ref}
- transition='height none'
+ //transition='height none'
  variant='ontime-transparent'
  {...props}
  />

apps/client/src/common/components/input/delay-input/DelayInput.tsx

@@ -1,5 +1,5 @@
 import { KeyboardEvent, useEffect, useRef, useState } from 'react';
-import { Input, Radio, RadioGroup } from '@chakra-ui/react';
+import { TextInput, Radio } from '@mantine/core';
 import { millisToString } from 'ontime-utils';
 
 import { useEventAction } from '../../../hooks/useEventAction';
@@ -105,7 +105,7 @@ export default function DelayInput(props: DelayInputProps) {
 
  return (
  <div className={style.delayInput}>
- <Input
+ <TextInput
  size='sm'
  ref={inputRef}
  data-testid='delay-input'
@@ -120,16 +120,16 @@ export default function DelayInput(props: DelayInputProps) {
  value={value}
  maxLength={9}
  />
- <RadioGroup
+ <Radio.Group
  className={style.delayOptions}
- onChange={handleSlipChange}
+ onChange={(value) => handleSlipChange(value as 'add' | 'subtract')}
  value={checkedOption}
  variant='ontime-block'
  size='sm'
  >
  <Radio value='add'>Add time</Radio>
  <Radio value='subtract'>Subtract time</Radio>
- </RadioGroup>
+ </Radio.Group>
  </div>
  );
 }