@proteinjs/ui 2.0.2 → 2.0.3

package/src/container/AccountIconButton.tsx

@@ -7,139 +7,140 @@ import { Page } from '../router/Page';
 import LogoutIcon from '@mui/icons-material/Logout';
 
 export type AccountIconButtonProps = {
-  loginClicked: boolean,
-  setLoginClicked: React.Dispatch<React.SetStateAction<boolean>>,
+  loginClicked: boolean;
+  setLoginClicked: React.Dispatch<React.SetStateAction<boolean>>;
   auth?: {
-    isLoggedIn: boolean,
-    canViewPage: (page: Page) => boolean,
+    isLoggedIn: boolean;
+    canViewPage: (page: Page) => boolean;
     /** Either a dialog component, or a path to be redirected to */
-    login: LinkOrDialog,
-    logout: () => Promise<string>
-  },
-  profileMenuItems?: { menuItemChildren: React.ReactNode, action: LinkOrDialog | (() => void) }[],
-}
+    login: LinkOrDialog;
+    logout: () => Promise<string>;
+  };
+  profileMenuItems?: { menuItemChildren: React.ReactNode; action: LinkOrDialog | (() => void) }[];
+};
 
-export const AccountIconButton = ({ loginClicked, setLoginClicked, auth, profileMenuItems }: AccountIconButtonProps) => {
+export const AccountIconButton = ({
+  loginClicked,
+  setLoginClicked,
+  auth,
+  profileMenuItems,
+}: AccountIconButtonProps) => {
   const navigate = useNavigate();
   const [selectedProfileMenuItem, setSelectedProfileMenuItem] = React.useState<number>(-1);
   const [selectedIndex, setSelectedIndex] = React.useState<number>(1);
-  const [anchorEl, setAccountMenuAnchorEl] = React.useState<null|HTMLElement>(null);
+  const [anchorEl, setAccountMenuAnchorEl] = React.useState<null | HTMLElement>(null);
   const open = Boolean(anchorEl);
 
-  if (!auth)
-      return null;
+  if (!auth) {
+    return null;
+  }
 
   if (auth.isLoggedIn) {
-      return (
-          <div>
-              <IconButton
-                  sx={{
-                      '&:hover': {
-                          color: '#fff',
-                          backgroundColor: 'transparent',
-                      },
-                      backgroundColor: 'transparent',
-                  }}
-                  onClick={event => setAccountMenuAnchorEl(event.currentTarget)}
-              >
-                  <AccountCircle />
-              </IconButton>
-              <Menu
-                  anchorEl={anchorEl}
-                  keepMounted
-                  open={open}
-                  onClose={() => setAccountMenuAnchorEl(null)}
-              >
-                  {profileMenuItems &&
-                      profileMenuItems.map((profileMenuItem, index) => (
-                          <MenuItem
-                            key={index}
-                            onClick={event => {
-                                if (typeof profileMenuItem.action === 'string') {
-                                    navigate(qualifiedPath(profileMenuItem.action));
-                                    return;
-                                }
-
-                                else if (isFunction(profileMenuItem.action)) {
-                                setAccountMenuAnchorEl(null);
-                                profileMenuItem.action();
-                                }
-
-                                else {
-                                setSelectedIndex(index);
-                                }
-                            }}
-                            selected={selectedIndex === index}
-                          >
-                              {profileMenuItem.menuItemChildren}
-                          </MenuItem>
-                      ))
+    return (
+      <div>
+        <IconButton
+          sx={{
+            '&:hover': {
+              color: '#fff',
+              backgroundColor: 'transparent',
+            },
+            backgroundColor: 'transparent',
+          }}
+          onClick={(event) => setAccountMenuAnchorEl(event.currentTarget)}
+        >
+          <AccountCircle />
+        </IconButton>
+        <Menu anchorEl={anchorEl} keepMounted open={open} onClose={() => setAccountMenuAnchorEl(null)}>
+          {profileMenuItems &&
+            profileMenuItems.map((profileMenuItem, index) => (
+              <MenuItem
+                key={index}
+                onClick={(event) => {
+                  if (typeof profileMenuItem.action === 'string') {
+                    navigate(qualifiedPath(profileMenuItem.action));
+                    return;
+                  } else if (isFunction(profileMenuItem.action)) {
+                    setAccountMenuAnchorEl(null);
+                    profileMenuItem.action();
+                  } else {
+                    setSelectedIndex(index);
                   }
-                  <MenuItem 
-                    key='logout'
-                    onClick={async (event) => {
-                        const redirectPath = await auth.logout();
-                        navigate(qualifiedPath(redirectPath));
-                    }}
-                  >
-                    
-                    <ListItemIcon>
-                        <LogoutIcon />
-                    </ListItemIcon>
-                    <Typography>Logout</Typography>
-                  </MenuItem>
-              </Menu>
-              <ProfileMenuItemAction />
-          </div>
-      );
+                }}
+                selected={selectedIndex === index}
+              >
+                {profileMenuItem.menuItemChildren}
+              </MenuItem>
+            ))}
+          <MenuItem
+            key='logout'
+            onClick={async (event) => {
+              const redirectPath = await auth.logout();
+              navigate(qualifiedPath(redirectPath));
+            }}
+          >
+            <ListItemIcon>
+              <LogoutIcon />
+            </ListItemIcon>
+            <Typography>Logout</Typography>
+          </MenuItem>
+        </Menu>
+        <ProfileMenuItemAction />
+      </div>
+    );
   }
 
   return (
-      <div>
-          <Button
-            color='inherit'
-            onClick={event => auth && typeof auth.login === 'string' ? navigate(qualifiedPath(auth.login)) : setLoginClicked(!loginClicked)}
-          >
-              Login
-          </Button>
-          <Login />
-      </div>
+    <div>
+      <Button
+        color='inherit'
+        onClick={(event) =>
+          auth && typeof auth.login === 'string' ? navigate(qualifiedPath(auth.login)) : setLoginClicked(!loginClicked)
+        }
+      >
+        Login
+      </Button>
+      <Login />
+    </div>
   );
 
   function ProfileMenuItemAction() {
-    if (selectedProfileMenuItem == -1 || !auth || !profileMenuItems)
-        return null;
-  
+    if (selectedProfileMenuItem == -1 || !auth || !profileMenuItems) {
+      return null;
+    }
+
     const menuItem = profileMenuItems[selectedProfileMenuItem];
-    if (typeof menuItem.action === 'string')
-        return null;
-  
+    if (typeof menuItem.action === 'string') {
+      return null;
+    }
+
     if (isDialog(menuItem.action)) {
-        return <menuItem.action onClose={() => setSelectedProfileMenuItem(-1)} />;
+      return <menuItem.action onClose={() => setSelectedProfileMenuItem(-1)} />;
     }
 
     return null;
   }
-  
+
   function Login() {
-    if (!loginClicked || !auth || typeof auth.login === 'string')
-        return null;
-  
+    if (!loginClicked || !auth || typeof auth.login === 'string') {
+      return null;
+    }
+
     return <auth.login onClose={() => setLoginClicked(false)} />;
   }
-  
+
   function qualifiedPath(path: string) {
-    if (path.startsWith('/'))
-        return path;
-  
+    if (path.startsWith('/')) {
+      return path;
+    }
+
     return `/${path}`;
   }
-}
+};
 
 function isDialog(prop: any): prop is React.ComponentType<{ onClose: () => void }> {
-    return typeof prop === 'function' && 'onClose' in prop.prototype;
+  return typeof prop === 'function' && 'onClose' in prop.prototype;
 }
 
 function isFunction(prop: any): prop is () => void {
-    return typeof prop === 'function';
-}
+  return typeof prop === 'function';
+}

package/src/container/NavMenu.tsx

@@ -1,6 +1,6 @@
-import React from 'react'
-import { Drawer, Toolbar, List, ListItem, ListItemButton, ListItemIcon, ListItemText } from '@mui/material'
-import { Navigate } from 'react-router-dom'
+import React from 'react';
+import { Drawer, Toolbar, List, ListItem, ListItemButton, ListItemIcon, ListItemText } from '@mui/material';
+import { Navigate } from 'react-router-dom';
 
 export type LinkOrDialog = string | React.ComponentType<{ onClose: () => void }>;
 
@@ -9,15 +9,15 @@ export type NavMenuItem = {
   action: LinkOrDialog;
   icon?: React.ComponentType;
   /** Use to make this item a divider */
-  // isDivider?: boolean, 
+  // isDivider?: boolean,
   /** Use to make this item a nested menu */
-  // children?: NavMenuItems 
+  // children?: NavMenuItems
 };
 
 export type NavMenuProps = {
-  navMenuItems?: NavMenuItem[],
-  navMenuOpen: boolean,
-  setNavMenuOpen: (open: boolean) => void,
+  navMenuItems?: NavMenuItem[];
+  navMenuOpen: boolean;
+  setNavMenuOpen: (open: boolean) => void;
 };
 
 const drawerWidth = 240;
@@ -31,8 +31,9 @@ export const NavMenu: React.FC<NavMenuProps> = ({ navMenuItems, navMenuOpen, set
   };
 
   const NavMenuItemAction = () => {
-    if (selectedNavMenuItem == -1 || !navMenuItems)
+    if (selectedNavMenuItem == -1 || !navMenuItems) {
       return null;
+    }
 
     const menuItem = navMenuItems[selectedNavMenuItem];
 
@@ -40,16 +41,18 @@ export const NavMenu: React.FC<NavMenuProps> = ({ navMenuItems, navMenuOpen, set
       setSelectedNavMenuItem(-1);
     }, [selectedNavMenuItem]);
 
-    if (typeof menuItem.action === 'string')
+    if (typeof menuItem.action === 'string') {
       return <Navigate to={qualifiedPath(menuItem.action)} />;
+    }
 
     return <menuItem.action onClose={() => setSelectedNavMenuItem(-1)} />;
   };
 
   const qualifiedPath = (path: string) => {
-    if (path.startsWith('/'))
+    if (path.startsWith('/')) {
       return path;
-    
+    }
+
     return `/${path}`;
   };
 
@@ -63,22 +66,18 @@ export const NavMenu: React.FC<NavMenuProps> = ({ navMenuItems, navMenuOpen, set
         variant='temporary'
         anchor='left'
         open={navMenuOpen}
-        onClose={(_, reason) =>
-          reason === 'backdropClick' && setNavMenuOpen(false)
-        }
+        onClose={(_, reason) => reason === 'backdropClick' && setNavMenuOpen(false)}
       >
         <Toolbar />
         <List>
           {navMenuItems?.map((navMenuItem, index) => (
             <ListItem key={index}>
-              <ListItemButton
-                onClick={() => handleNavMenuItemClick(index)}
-              >
-                {navMenuItem.icon && 
+              <ListItemButton onClick={() => handleNavMenuItemClick(index)}>
+                {navMenuItem.icon && (
                   <ListItemIcon>
                     <navMenuItem.icon />
                   </ListItemIcon>
-                }
+                )}
                 <ListItemText primary={navMenuItem.name} />
               </ListItemButton>
             </ListItem>
@@ -88,4 +87,4 @@ export const NavMenu: React.FC<NavMenuProps> = ({ navMenuItems, navMenuOpen, set
       <NavMenuItemAction />
     </div>
   );
-}
+};

package/src/container/PageContainer.tsx

@@ -8,100 +8,130 @@ import { LinkOrDialog, NavMenu, NavMenuItem } from './NavMenu';
 import { AccountIconButton } from './AccountIconButton';
 
 function qualifiedPath(path: string) {
-    if (path.startsWith('/'))
-        return path;
+  if (path.startsWith('/')) {
+    return path;
+  }
 
-    return `/${path}`;
+  return `/${path}`;
 }
 
 export type PageContainerProps = {
-    page: Page,
-    auth?: {
-        isLoggedIn: boolean,
-        canViewPage: (page: Page) => boolean,
-        login: LinkOrDialog,
-        logout: () => Promise<string>
-    },
-    appName?: string,
-    toolbarChildren?: React.ReactNode,
-    /** An array of menu items, each containing a React node and an action triggered when selected, either a string, dialog component, or a function. */
-    profileMenuItems?: { menuItemChildren: React.ReactNode, action: LinkOrDialog | (() => void) }[],
-    navMenuItems?: NavMenuItem[],
-    appBarProps?: AppBarProps,
-    toolbarProps?: ToolbarProps,
-}
+  page: Page;
+  auth?: {
+    isLoggedIn: boolean;
+    canViewPage: (page: Page) => boolean;
+    login: LinkOrDialog;
+    logout: () => Promise<string>;
+  };
+  appName?: string;
+  toolbarChildren?: React.ReactNode;
+  /** An array of menu items, each containing a React node and an action triggered when selected, either a string, dialog component, or a function. */
+  profileMenuItems?: { menuItemChildren: React.ReactNode; action: LinkOrDialog | (() => void) }[];
+  navMenuItems?: NavMenuItem[];
+  appBarProps?: AppBarProps;
+  toolbarProps?: ToolbarProps;
+};
 
-const Page = React.memo(({ auth, page, navigate, loginClicked, setLoginClicked }: { auth: PageContainerProps['auth'], page: PageContainerProps['page'], navigate: NavigateFunction, loginClicked: boolean, setLoginClicked: (loginClicked: boolean) => void }) => {
-    if (auth?.canViewPage(page))
-        return <page.component urlParams={createUrlParams()} navigate={navigate} />;
+const Page = React.memo(
+  ({
+    auth,
+    page,
+    navigate,
+    loginClicked,
+    setLoginClicked,
+  }: {
+    auth: PageContainerProps['auth'];
+    page: PageContainerProps['page'];
+    navigate: NavigateFunction;
+    loginClicked: boolean;
+    setLoginClicked: (loginClicked: boolean) => void;
+  }) => {
+    if (auth?.canViewPage(page)) {
+      return <page.component urlParams={createUrlParams()} navigate={navigate} />;
+    }
 
     if (!auth?.isLoggedIn) {
-        if (!loginClicked)
-            setLoginClicked(true);
-        
-        return null;
+      if (!loginClicked) {
+        setLoginClicked(true);
+      }
+
+      return null;
     }
 
     navigate('/');
     return null;
-});
+  }
+);
 
 export function PageContainer(props: PageContainerProps) {
-    const navigate = useNavigate();
-    const { page, auth, navMenuItems, appName, toolbarChildren, profileMenuItems, appBarProps, toolbarProps } = props;
-    const [loginClicked, setLoginClicked] = React.useState(false);
-    const [navMenuOpen, setNavMenuOpen] = React.useState(false);
-    
-    React.useEffect(() => {
-        if (auth?.canViewPage(page))
-            return;
+  const navigate = useNavigate();
+  const { page, auth, navMenuItems, appName, toolbarChildren, profileMenuItems, appBarProps, toolbarProps } = props;
+  const [loginClicked, setLoginClicked] = React.useState(false);
+  const [navMenuOpen, setNavMenuOpen] = React.useState(false);
 
-        if (!auth?.isLoggedIn) {
-            console.log(`User not logged in, redirecting to login`);
-            if (typeof auth?.login === 'string') {
-                const p = qualifiedPath(auth.login);
-                navigate(p);
-            }
-        }
-    }, [page]);
+  React.useEffect(() => {
+    if (auth?.canViewPage(page)) {
+      return;
+    }
 
-    return (
-        <Box sx={(theme) => {
-            const defaultStyles = {};
-            if (!page.pageContainerSxProps)
-                return defaultStyles;
+    if (!auth?.isLoggedIn) {
+      console.log(`User not logged in, redirecting to login`);
+      if (typeof auth?.login === 'string') {
+        const p = qualifiedPath(auth.login);
+        navigate(p);
+      }
+    }
+  }, [page]);
 
-            let resolvedStyles = Object.assign({}, defaultStyles, page.pageContainerSxProps(theme));
+  return (
+    <Box
+      sx={(theme) => {
+        const defaultStyles = {};
+        if (!page.pageContainerSxProps) {
+          return defaultStyles;
+        }
 
-            return resolvedStyles;
-        }}>
-            <AppBar position='static' {...appBarProps}>
-                <Toolbar {...toolbarProps}>
-                    {navMenuItems && (
-                        <IconButton
-                            aria-label='menu'
-                            onClick={() => setNavMenuOpen(!navMenuOpen)}
-                            sx={(theme) => ({
-                                marginRight: theme.spacing(2),
-                                '&:hover': {
-                                    color: '#fff',
-                                },
-                            })}
-                            style={{ backgroundColor: 'transparent' }}
-                        >
-                            <MenuIcon />
-                        </IconButton>
-                    )}
-                    {appName && <Typography variant='h5' sx={{ flexGrow: 1, color: 'common.white' }}>
-                        {appName}
-                    </Typography>}
-                    {toolbarChildren}
-                    <div style={{ flexGrow: 1 }}></div>
-                    <AccountIconButton loginClicked={loginClicked} setLoginClicked={setLoginClicked} auth={auth} {...(profileMenuItems ? { profileMenuItems } : {})} />
-                </Toolbar>
-            </AppBar>
-            {navMenuItems && <NavMenu navMenuItems={navMenuItems} navMenuOpen={navMenuOpen} setNavMenuOpen={setNavMenuOpen} />}
-            <Page auth={auth} page={page} navigate={navigate} loginClicked={loginClicked} setLoginClicked={setLoginClicked} />
-        </Box>
-    );
-}
+        const resolvedStyles = Object.assign({}, defaultStyles, page.pageContainerSxProps(theme));
+
+        return resolvedStyles;
+      }}
+    >
+      <AppBar position='static' {...appBarProps}>
+        <Toolbar {...toolbarProps}>
+          {navMenuItems && (
+            <IconButton
+              aria-label='menu'
+              onClick={() => setNavMenuOpen(!navMenuOpen)}
+              sx={(theme) => ({
+                marginRight: theme.spacing(2),
+                '&:hover': {
+                  color: '#fff',
+                },
+              })}
+              style={{ backgroundColor: 'transparent' }}
+            >
+              <MenuIcon />
+            </IconButton>
+          )}
+          {appName && (
+            <Typography variant='h5' sx={{ flexGrow: 1, color: 'common.white' }}>
+              {appName}
+            </Typography>
+          )}
+          {toolbarChildren}
+          <div style={{ flexGrow: 1 }}></div>
+          <AccountIconButton
+            loginClicked={loginClicked}
+            setLoginClicked={setLoginClicked}
+            auth={auth}
+            {...(profileMenuItems ? { profileMenuItems } : {})}
+          />
+        </Toolbar>
+      </AppBar>
+      {navMenuItems && (
+        <NavMenu navMenuItems={navMenuItems} navMenuOpen={navMenuOpen} setNavMenuOpen={setNavMenuOpen} />
+      )}
+      <Page auth={auth} page={page} navigate={navigate} loginClicked={loginClicked} setLoginClicked={setLoginClicked} />
+    </Box>
+  );
+}

package/src/form/Field.tsx

@@ -2,50 +2,57 @@ import React from 'react';
 import S from 'string';
 
 export type Field<T, F extends Fields> = {
-    name: string,
-    label?: string,
-    description?: string,
-    accessibility?: {
-        required?: boolean,
-        hidden?: boolean,
-        readonly?: boolean
-    },
-    layout?: {
-        row: number,
-        column?: number,
-        width: 1|2|3|4|5|6|7|8|9|10|11|12
-    },
-    value?: T,
-    displayValue?: (value: T) => string,
-    onLoad?: (fields: F) => Promise<void>,
-    onChange?: (value: T, fields: F, setFieldStatus: (message: string, isError: boolean) => void) => Promise<void>
-}
+  name: string;
+  label?: string;
+  description?: string;
+  accessibility?: {
+    required?: boolean;
+    hidden?: boolean;
+    readonly?: boolean;
+  };
+  layout?: {
+    row: number;
+    column?: number;
+    width: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+  };
+  value?: T;
+  displayValue?: (value: T) => string;
+  onLoad?: (fields: F) => Promise<void>;
+  onChange?: (value: T, fields: F, setFieldStatus: (message: string, isError: boolean) => void) => Promise<void>;
+};
 
 export type FieldComponentProps<T, F extends Fields> = {
+  field: Field<T, F>;
+  onChange: (
     field: Field<T, F>,
-    onChange: (field: Field<T, F>, value: T, setFieldStatus: (message: string, isError: boolean) => void) => Promise<void>,
-    // focused: boolean
-}
+    value: T,
+    setFieldStatus: (message: string, isError: boolean) => void
+  ) => Promise<void>;
+  // focused: boolean
+};
 
 export type FieldComponent<T, F extends Fields> = {
-    field: Field<T, F>,
-    component: (props: FieldComponentProps<T, F>) => JSX.Element,
-}
+  field: Field<T, F>;
+  component: (props: FieldComponentProps<T, F>) => JSX.Element;
+};
 
-export abstract class Fields { [name: string]: FieldComponent<any, any> }
+export abstract class Fields {
+  [name: string]: FieldComponent<any, any>;
+}
 
 export function fieldLabel(field: Field<any, any>) {
-	return field.label ? field.label : S(field.name).humanize().capitalize().s;
+  return field.label ? field.label : S(field.name).humanize().capitalize().s;
 }
 
 export function fieldDisplayValue(field: Field<any, any>) {
-	let value = '';
-	if (field.value) {
-		if (field.displayValue)
-			value = field.displayValue(field.value);
-		else
-			value = field.value;
-	}
+  let value = '';
+  if (field.value) {
+    if (field.displayValue) {
+      value = field.displayValue(field.value);
+    } else {
+      value = field.value;
+    }
+  }
 
-	return value;
-}
+  return value;
+}