@judo/components 0.1.1-alpha.0

package/src/AggregationInput.tsx

@@ -0,0 +1,156 @@
+import { Delete, LinkOff, NoteAdd, Visibility } from '@mui/icons-material';
+import { ButtonBase, Grid, IconButton, InputAdornment, TextField } from '@mui/material';
+import { useState } from 'react';
+import type { ReactNode } from 'react';
+import { exists } from '@judo/utilities';
+
+interface AggregationInputProps {
+  name?: string;
+  id?: string;
+  label?: string;
+  value: any | undefined | null;
+  error?: boolean | undefined;
+  helperText?: string | undefined;
+  disabled?: boolean | undefined;
+  readonly?: boolean | undefined;
+  labelList: string[];
+  icon?: ReactNode;
+  onSet?: () => Promise<void> | undefined;
+  onView?: () => void | undefined;
+  onCreate?: () => void | undefined;
+  onDelete?: () => Promise<void> | undefined;
+  onRemove?: () => void | undefined;
+}
+
+interface ViewIconsProps {
+  value: any | undefined | null;
+  disabled: boolean;
+  onView?: () => void | undefined;
+  onCreate?: () => void | undefined;
+  onDelete?: () => Promise<void> | undefined;
+}
+
+interface EditIconsProps {
+  value: any | undefined | null;
+  disabled: boolean;
+  onRemove?: () => void | undefined;
+}
+
+export const AggregationInput = ({
+  name,
+  id,
+  label,
+  value,
+  error = false,
+  helperText,
+  disabled = false,
+  readonly = true,
+  labelList,
+  icon,
+  onSet,
+  onView,
+  onCreate,
+  onRemove,
+  onDelete,
+}: AggregationInputProps) => {
+  const [focused, setFocused] = useState(false);
+
+  let icons: ReactNode;
+
+  if (readonly) {
+    icons = <ViewIcons value={value} disabled={disabled} onCreate={onCreate} onView={onView} onDelete={onDelete} />;
+  } else {
+    icons = <EditIcons value={value} disabled={disabled} onRemove={onRemove} />;
+  }
+
+  return (
+    <Grid container item direction="row" justifyContent="stretch" alignContent="stretch">
+      <ButtonBase
+        sx={{ padding: 0 }}
+        disabled={disabled || readonly}
+        onFocusCapture={() => setFocused(true)}
+        onBlur={() => setFocused(false)}
+        onClick={onSet}
+      >
+        <TextField
+          disabled={!onSet || disabled}
+          name={name}
+          id={id}
+          label={label}
+          error={error}
+          helperText={helperText}
+          focused={focused}
+          fullWidth
+          value={labelList.join(' - ')}
+          className={!readonly ? undefined : 'Mui-readOnly'}
+          sx={{
+            ':hover': {
+              cursor: 'pointer',
+            },
+            '.MuiFilledInput-input:hover': {
+              cursor: 'pointer',
+            },
+          }}
+          InputProps={{
+            readOnly: true,
+            startAdornment: <InputAdornment position="start">{icon}</InputAdornment>,
+          }}
+        />
+      </ButtonBase>
+      {icons}
+    </Grid>
+  );
+};
+
+const ViewIcons = ({ value, disabled, onCreate, onDelete, onView }: ViewIconsProps) => {
+  let icons: ReactNode;
+
+  if (exists(value)) {
+    icons = (
+      <>
+        {onView && (
+          <IconButton disabled={disabled} onClick={onView}>
+            <Visibility />
+          </IconButton>
+        )}
+        {onDelete && (
+          <IconButton disabled={disabled} onClick={onDelete}>
+            <Delete />
+          </IconButton>
+        )}
+      </>
+    );
+  } else {
+    icons = (
+      <>
+        {onCreate && (
+          <IconButton disabled={disabled} onClick={onCreate}>
+            <NoteAdd />
+          </IconButton>
+        )}
+      </>
+    );
+  }
+
+  return <>{icons}</>;
+};
+
+const EditIcons = ({ value, disabled, onRemove }: EditIconsProps) => {
+  let icons: ReactNode;
+
+  if (exists(value)) {
+    icons = (
+      <>
+        {onRemove && (
+          <IconButton disabled={disabled} onClick={onRemove}>
+            <LinkOff />
+          </IconButton>
+        )}
+      </>
+    );
+  } else {
+    icons = <></>;
+  }
+
+  return <>{icons}</>;
+};

package/src/CustomBreadcrumb.tsx

@@ -0,0 +1,144 @@
+import { Home } from '@mui/icons-material';
+import { Breadcrumbs, Typography } from '@mui/material';
+import { useState, useContext, createContext, useMemo, useEffect } from 'react';
+import type { ReactNode } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
+import type { To } from 'react-router-dom';
+
+interface BreadcrumbProviderProps {
+  children: ReactNode;
+}
+
+export type JudoNavigationSetTitle = (pageTitle: string) => void;
+
+interface JudoNavigationProviderContext {
+  clearNavigate: (to: To) => void;
+  navigate: (to: To) => void;
+  back: () => void;
+  isBackDisabled: boolean;
+  setTitle: JudoNavigationSetTitle;
+}
+
+interface BreadcrumbItem {
+  key: string;
+  path: To;
+  label: string | null;
+}
+
+// @ts-ignore
+const JudoNavigationContextState = createContext<JudoNavigationProviderContext>();
+
+const BreadcrumbContextState = createContext<BreadcrumbItem[]>([]);
+
+export const useJudoNavigation = () => {
+  const context = useContext(JudoNavigationContextState);
+
+  if (context === undefined) {
+    throw new Error('useJudoNavigation was used outside of its Provider');
+  }
+
+  return context;
+};
+
+export const BreadcrumbProvider = ({ children }: BreadcrumbProviderProps) => {
+  const navigate = useNavigate();
+  const location = useLocation();
+
+  const [breadcrumbItems, setBreadcrumbItems] = useState<BreadcrumbItem[]>([]);
+  const [nextBreadcrumbItem, setNextBreadcrumbItem] = useState<BreadcrumbItem>({} as any);
+
+  useEffect(() => {
+    setNextBreadcrumbItem((prevNextBreadcrumbItem) => {
+      return {
+        ...prevNextBreadcrumbItem,
+        key: '0.' + location.pathname,
+        path: location.pathname,
+      };
+    });
+  }, []);
+
+  const isBackDisabled = useMemo(() => {
+    return breadcrumbItems.length === 0;
+  }, [breadcrumbItems]);
+
+  const judoNavigationContext = {
+    clearNavigate: (to: To) => {
+      setBreadcrumbItems([]);
+      setNextBreadcrumbItem({
+        key: '0.' + to.toString(),
+        label: null,
+        path: to,
+      });
+
+      navigate(to);
+    },
+    navigate: (to: To) => {
+      if (nextBreadcrumbItem.label === null) {
+        throw Error('Page title has not been set!');
+      }
+
+      setBreadcrumbItems((prevBreadCrumbItems) => {
+        return [...prevBreadCrumbItems, nextBreadcrumbItem];
+      });
+
+      setNextBreadcrumbItem({
+        key: breadcrumbItems.length + '.' + to.toString(),
+        label: null,
+        path: to,
+      });
+
+      navigate(to);
+    },
+    back: () => {
+      if (breadcrumbItems.length !== 0) {
+        const lastItem = breadcrumbItems[breadcrumbItems.length - 1];
+        setNextBreadcrumbItem(lastItem);
+        setBreadcrumbItems((prevBreadcrumbItems) => {
+          return [...prevBreadcrumbItems.slice(0, prevBreadcrumbItems.length - 1)];
+        });
+        navigate(lastItem.path);
+        return;
+      }
+
+      setBreadcrumbItems([]);
+      setNextBreadcrumbItem({
+        key: '0.' + '/'.toString(),
+        label: null,
+        path: '/',
+      });
+
+      navigate('/');
+    },
+    isBackDisabled: isBackDisabled,
+    setTitle: (pageTitle: string) => {
+      setNextBreadcrumbItem((prevNextBreadcrumbItem) => {
+        return { ...prevNextBreadcrumbItem, label: pageTitle };
+      });
+    },
+  };
+
+  return (
+    <BreadcrumbContextState.Provider value={breadcrumbItems}>
+      <JudoNavigationContextState.Provider value={judoNavigationContext}>
+        {children}
+      </JudoNavigationContextState.Provider>
+    </BreadcrumbContextState.Provider>
+  );
+};
+
+export const CustomBreadcrumb = () => {
+  const breadcrumbItems = useContext(BreadcrumbContextState);
+
+  return (
+    <Breadcrumbs maxItems={2} separator=">">
+      <Home />
+      {breadcrumbItems.map(({ label, key }, index) => {
+        return (
+          <Typography color="text.primary" key={key}>
+            {label}
+          </Typography>
+        );
+      })}
+    </Breadcrumbs>
+  );
+};

package/src/CustomLink.tsx

@@ -0,0 +1,35 @@
+import { useMatch, useResolvedPath } from 'react-router-dom';
+import type { LinkProps } from 'react-router-dom';
+import { theme } from '@judo/theme';
+import { ListItem, ListItemButton } from '@mui/material';
+import { useJudoNavigation } from './CustomBreadcrumb';
+
+const customLinkItemStyle = {
+  py: '2px',
+  px: 3,
+  color: theme.palette.text.secondary,
+  '&:hover, &:focus': {
+    color: theme.palette.secondary.main,
+  },
+  '&.Mui-selected': {
+    color: theme.palette.secondary.main,
+  },
+};
+
+export function CustomLink({ children, to, ...props }: LinkProps) {
+  const resolved = useResolvedPath(to);
+  const match = useMatch({ path: resolved.pathname, end: true });
+  const { clearNavigate } = useJudoNavigation();
+
+  const onClickHandler = () => {
+    clearNavigate(to);
+  };
+
+  return (
+    <ListItem disablePadding style={{ textDecoration: 'none' }}>
+      <ListItemButton selected={!!match} sx={customLinkItemStyle} onClick={onClickHandler}>
+        {children}
+      </ListItemButton>
+    </ListItem>
+  );
+}

package/src/CustomTablePagination.tsx

@@ -0,0 +1,41 @@
+import { TablePagination } from '@mui/material';
+import type { MouseEvent, Dispatch, SetStateAction } from 'react';
+
+export interface CustomTablePaginationProps {
+  pageChange: (isNext: boolean) => Promise<void>;
+  isNextButtonEnabled: boolean;
+  page: number;
+  rowPerPage: number;
+  setPage: Dispatch<SetStateAction<number>>;
+}
+
+export const CustomTablePagination = (props: CustomTablePaginationProps) => {
+  const handleChangePage = async (event: MouseEvent<HTMLButtonElement> | null, newPage: number) => {
+    let isNext = true;
+    if (newPage < props.page) {
+      isNext = false;
+    }
+
+    props.setPage(newPage);
+
+    await props.pageChange(isNext);
+  };
+
+  return (
+    <TablePagination
+      component="div"
+      count={-1}
+      page={props.page}
+      onPageChange={handleChangePage}
+      rowsPerPage={props.rowPerPage}
+      rowsPerPageOptions={[props.rowPerPage]}
+      labelDisplayedRows={({ from, to }) => `${from}–${to}`}
+      nextIconButtonProps={{
+        disabled: !props.isNextButtonEnabled,
+      }}
+      backIconButtonProps={{
+        disabled: props.page === 0,
+      }}
+    />
+  );
+};

package/src/DropdownButton.tsx

@@ -0,0 +1,124 @@
+import { Button, ClickAwayListener, Grow, MenuItem, MenuList, Paper, Popper } from '@mui/material';
+import { useState, useRef, useEffect } from 'react';
+import type { ReactNode, KeyboardEvent, SyntheticEvent } from 'react';
+import { KeyboardArrowDown } from '@mui/icons-material';
+
+interface DropdownMenuItem {
+  disabled?: boolean;
+  visible?: boolean;
+  label?: string;
+  onClick: () => void;
+  startIcon?: ReactNode;
+  endIcon?: ReactNode;
+}
+
+interface DropdownButtonProps {
+  children?: ReactNode;
+  id?: string | undefined;
+  menuItems: DropdownMenuItem[];
+  disabled?: boolean;
+  showDropdownIcon?: boolean;
+  fullWidth?: boolean;
+  variant?: 'text' | 'outlined' | 'contained' | undefined;
+}
+
+export function DropdownButton({
+  children,
+  id,
+  menuItems,
+  disabled = false,
+  showDropdownIcon = true,
+  fullWidth = false,
+  variant = 'contained',
+}: DropdownButtonProps) {
+  const [open, setOpen] = useState(false);
+  const anchorRef = useRef<HTMLButtonElement>(null);
+
+  const handleToggle = () => {
+    setOpen((prevOpen) => !prevOpen);
+  };
+
+  const handleClose = (event: Event | SyntheticEvent) => {
+    if (anchorRef.current && anchorRef.current.contains(event.target as HTMLElement)) {
+      return;
+    }
+
+    setOpen(false);
+  };
+
+  function handleListKeyDown(event: KeyboardEvent) {
+    if (event.key === 'Tab') {
+      event.preventDefault();
+      setOpen(false);
+    } else if (event.key === 'Escape') {
+      setOpen(false);
+    }
+  }
+
+  // return focus to the button when we transitioned from !open -> open
+  const prevOpen = useRef(open);
+  useEffect(() => {
+    if (prevOpen.current && !open) {
+      anchorRef.current!.focus();
+    }
+
+    prevOpen.current = open;
+  }, [open]);
+
+  return (
+    <>
+      <Button
+        ref={anchorRef}
+        id={id}
+        onClick={handleToggle}
+        endIcon={showDropdownIcon && <KeyboardArrowDown />}
+        disabled={disabled}
+        fullWidth={fullWidth}
+        variant={variant}
+      >
+        {children}
+      </Button>
+      <Popper
+        open={open}
+        anchorEl={anchorRef.current}
+        placement="bottom"
+        transition
+        style={{ zIndex: 1400, minWidth: anchorRef.current?.scrollWidth }}
+      >
+        {({ TransitionProps, placement }) => (
+          <Grow
+            {...TransitionProps}
+            style={{
+              transformOrigin: placement === 'bottom-start' ? 'left top' : 'left bottom',
+            }}
+          >
+            <Paper>
+              <ClickAwayListener onClickAway={handleClose}>
+                <MenuList autoFocusItem={open} onKeyDown={handleListKeyDown}>
+                  {menuItems
+                    .filter((menuItem) => menuItem.visible ?? true)
+                    .map((menuItem, index) => {
+                      return (
+                        <MenuItem
+                          id={menuItem.label ?? '' + index}
+                          disabled={menuItem.disabled ?? false}
+                          onClick={(event) => {
+                            handleClose(event);
+                            menuItem.onClick();
+                          }}
+                        >
+                          {menuItem.startIcon}
+                          {menuItem.label}
+                          {menuItem.endIcon}
+                        </MenuItem>
+                      );
+                    })}
+                </MenuList>
+              </ClickAwayListener>
+            </Paper>
+          </Grow>
+        )}
+      </Popper>
+    </>
+  );
+}

package/src/PageHeader.tsx

@@ -0,0 +1,35 @@
+import { AppBar, Toolbar, Grid, Typography, Divider } from '@mui/material';
+import { useEffect } from 'react';
+import type { ReactNode } from 'react';
+import { useJudoNavigation } from './CustomBreadcrumb';
+
+interface PageHeaderProps {
+  title: string;
+  children: ReactNode;
+}
+
+export const PageHeader = ({ title, children }: PageHeaderProps) => {
+  const { setTitle } = useJudoNavigation();
+
+  useEffect(() => {
+    setTitle(title);
+  }, [title]);
+
+  return (
+    <>
+      <AppBar component="div" position="static" elevation={0} sx={{ zIndex: 0 }}>
+        <Toolbar>
+          <Grid container alignItems="center" spacing={1}>
+            <Grid item xs>
+              <Typography component="span" color="text.primary" variant="h5">
+                {title}
+              </Typography>
+            </Grid>
+            {children}
+          </Grid>
+        </Toolbar>
+      </AppBar>
+      <Divider />
+    </>
+  );
+};

package/src/TrinaryLogicCombobox.tsx

@@ -0,0 +1,64 @@
+import { CheckBoxOutlined } from '@mui/icons-material';
+import { TextField, InputAdornment, MenuItem } from '@mui/material';
+import type { ChangeEvent } from 'react';
+import { TRINARY_LOGIC } from '@judo/components-api';
+
+interface TrinaryLogicProps {
+  readOnly?: boolean;
+  value?: boolean | null;
+  id?: string;
+  label: string;
+  name?: string;
+  error?: boolean | undefined;
+  helperText?: string | undefined;
+  onChange?: (value: boolean | null) => void;
+}
+
+const TrinaryLogicCombobox = ({
+  readOnly = false,
+  value = null,
+  id,
+  label,
+  name,
+  error,
+  helperText,
+  onChange,
+}: TrinaryLogicProps) => {
+  const onChangeHandler = onChange
+    ? (event: ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) => {
+        const index = Array.from(TRINARY_LOGIC.values()).indexOf(event.target.value);
+        const keysArray = Array.from(TRINARY_LOGIC.keys());
+        onChange(keysArray[index]);
+      }
+    : undefined;
+
+  return (
+    <TextField
+      name={name}
+      id={id}
+      label={label}
+      select
+      value={TRINARY_LOGIC.get(value)}
+      onChange={onChangeHandler}
+      className={readOnly ? 'Mui-readOnly' : undefined}
+      error={error}
+      helperText={helperText}
+      InputProps={{
+        readOnly: readOnly,
+        startAdornment: (
+          <InputAdornment position="start">
+            <CheckBoxOutlined />
+          </InputAdornment>
+        ),
+      }}
+    >
+      {Array.from(TRINARY_LOGIC.keys()).map((key) => (
+        <MenuItem key={TRINARY_LOGIC.get(key)} value={TRINARY_LOGIC.get(key)}>
+          {TRINARY_LOGIC.get(key)}
+        </MenuItem>
+      ))}
+    </TextField>
+  );
+};
+
+export default TrinaryLogicCombobox;

package/src/dialog/ConfirmationDialog.tsx

@@ -0,0 +1,50 @@
+import { Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions, Button } from '@mui/material';
+import { useEffect, useRef } from 'react';
+import type { ConfirmationDialogProps } from '@judo/components-api';
+
+export const ConfirmationDialog = ({
+  confirmationMessage,
+  title,
+  resolve,
+  open,
+  handleClose,
+}: ConfirmationDialogProps) => {
+  const descriptionElementRef = useRef<HTMLElement>(null);
+  useEffect(() => {
+    if (open) {
+      const { current: descriptionElement } = descriptionElementRef;
+      if (descriptionElement !== null) {
+        descriptionElement.focus();
+      }
+    }
+  }, [open]);
+
+  const cancel = () => {
+    handleClose();
+    resolve(false);
+  };
+
+  const ok = () => {
+    handleClose();
+    resolve(true);
+  };
+
+  return (
+    <Dialog open={open} onClose={handleClose} scroll="paper" fullWidth={true} maxWidth={'xs'}>
+      {title && <DialogTitle id="scroll-dialog-title">{title}</DialogTitle>}
+      <DialogContent dividers={!!title}>
+        <DialogContentText id="scroll-dialog-description" ref={descriptionElementRef} tabIndex={-1}>
+          {confirmationMessage}
+        </DialogContentText>
+      </DialogContent>
+      <DialogActions>
+        <Button variant="text" onClick={cancel}>
+          No
+        </Button>
+        <Button variant="text" onClick={ok}>
+          Yes
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};