@proteinjs/ui 2.0.2 → 2.0.4

package/src/form/FormButton.tsx

@@ -2,29 +2,31 @@ import React from 'react';
 import { Fields } from './Field';
 
 export type FormButton<F extends Fields> = {
-  name: string,
+  name: string;
   accessibility?: {
-		disabled?: boolean,
-		hidden?: boolean,
-	},
-	style: {
-		color?: 'inherit'|'primary'|'success'|'warning'|'secondary'|'error'|'info',
-		variant?: 'text'|'outlined'|'contained',
-		icon?: React.ComponentType,
-	},
-	clearFormOnClick?: boolean,
-	redirect?: (fields: F, buttons: FormButtons<F>) => Promise<{ path: string, props?: { [key: string]: any } }>,
-	onClick?: (fields: F, buttons: FormButtons<F>) => Promise<string|void>,
-	progressMessage?: (fields: F) => string
-}
+    disabled?: boolean;
+    hidden?: boolean;
+  };
+  style: {
+    color?: 'inherit' | 'primary' | 'success' | 'warning' | 'secondary' | 'error' | 'info';
+    variant?: 'text' | 'outlined' | 'contained';
+    icon?: React.ComponentType;
+  };
+  clearFormOnClick?: boolean;
+  redirect?: (fields: F, buttons: FormButtons<F>) => Promise<{ path: string; props?: { [key: string]: any } }>;
+  onClick?: (fields: F, buttons: FormButtons<F>) => Promise<string | void>;
+  progressMessage?: (fields: F) => string;
+};
 
-export abstract class FormButtons<F extends Fields> { [name: string]: FormButton<F> }
+export abstract class FormButtons<F extends Fields> {
+  [name: string]: FormButton<F>;
+}
 
 export const clearButton: FormButton<any> = {
-	name: 'Clear',
-	style: {
-		color: 'primary',
-		variant: 'text',
-	},
-	clearFormOnClick: true
-};
+  name: 'Clear',
+  style: {
+    color: 'primary',
+    variant: 'text',
+  },
+  clearFormOnClick: true,
+};

package/src/form/FunctionalForm.tsx

@@ -188,7 +188,7 @@
 //             </Grid>
 // 		);
 //     }
-    
+
 //     function Status() {
 //         if (!status || !status.message)
 //             return null;
@@ -206,7 +206,7 @@
 // 			</Grid>
 //         );
 //     }
-    
+
 //     function Fields() {
 //         return (
 //             <Grid container spacing={8}>
@@ -214,7 +214,7 @@
 //                     getFieldRows().map((fieldComponents, index) => {
 //                         if (!fieldRowVisible(fieldComponents))
 //                             return null;
-            
+
 //                         return (
 //                             <Grid item xs={12} key={index}>
 //                                 <Grid container spacing={8}>
@@ -222,7 +222,7 @@
 //                                         fieldComponents.filter((fieldComponent) => {
 //                                             if (fieldComponent.field.accessibility?.hidden)
 //                                                 return false;
-                                    
+
 //                                             return true;
 //                                         }).map((fieldComponent, key) => {
 //                                             const fieldKey = fieldRenderKeys[fieldComponent.field.name] ? `${fieldComponent.field.name}_${fieldRenderKeys[fieldComponent.field.name]}` : `${fieldComponent.field.name}`;
@@ -245,7 +245,7 @@
 //             </Grid>
 //         );
 //     }
-    
+
 //     function getFieldRows(): FieldComponent<any, any>[][] {
 //         const rows: FieldComponent<any, any>[][] = [];
 //         if (!fields)
@@ -281,33 +281,33 @@
 //                 const field = fieldComponent.field;
 //                 if (!field.layout)
 //                     throw new Error(`Unless using FormProps.fieldLayout, Field.layout must be provided; layout not provided for field: ${field.name}`);
-    
+
 //                 if (typeof rows[field.layout.row] === 'undefined')
 //                     rows[field.layout.row] = [];
-        
+
 //                 if (field.layout.column && rows[field.layout.row].length >= field.layout.column) {
 //                     rows[field.layout.row].splice(field.layout.column - 1, 0, fieldComponent);
 //                 } else
 //                     rows[field.layout.row].push(fieldComponent);
-    
+
 //                 const rowWidth = rows[field.layout.row].map((fieldComponent) => fieldComponent.field.layout?.width ? fieldComponent.field.layout.width as number : 0).reduce((accumulator, currentWidth) => accumulator + currentWidth);
 //                 if (rowWidth > 12)
 //                     throw new Error(`Width of row exceeds maximum width (12), row width: ${rowWidth}, row index: ${field.layout.row}`);
 //             }
 //         }
-	
+
 // 		return rows;
 //     }
-    
+
 //     function fieldRowVisible(fieldComponents: FieldComponent<any, any>[]): boolean {
 // 		for (const fieldComponent of fieldComponents) {
 // 			if (!fieldComponent.field.accessibility || !fieldComponent.field.accessibility?.hidden)
 // 				return true;
 // 		}
-	
+
 // 		return false;
 //     }
-    
+
 //     function Progress() {
 //         if (!progress || !progress.visible)
 //             return null;
@@ -320,7 +320,7 @@
 //             </Grid>
 //         );
 //     }
-    
+
 //     function Buttons() {
 //         return (
 //             <Grid container justify='flex-end' alignItems='flex-end' spacing={2}>
@@ -328,7 +328,7 @@
 //                     Object.keys(props.buttons).map((buttonPropertyName) => props.buttons[buttonPropertyName]).filter((button) => {
 //                         if (button.accessibility?.hidden)
 //                             return false;
-            
+
 //                         return true;
 //                     }).map((button, key) => {
 //                         return (
@@ -361,4 +361,4 @@
 //             </Grid>
 //         );
 //     }
-// }
+// }

package/src/form/container/FormPage.tsx

@@ -3,21 +3,19 @@ import { Grid, PaperProps } from '@mui/material';
 import { FormPaper } from './FormPaper';
 
 export function FormPage(props: PaperProps) {
-    return (
-        <Grid
-            container
-            sx={(theme) => ({
-                marginTop: theme.spacing(4),
-            })} 
-            direction='row'
-            justifyContent='center'
-            alignItems='center'
-        >
-            <Grid item>
-                <FormPaper {...props}>
-                    {props.children}
-                </FormPaper>
-            </Grid>
-        </Grid>
-    );
-}
+  return (
+    <Grid
+      container
+      sx={(theme) => ({
+        marginTop: theme.spacing(4),
+      })}
+      direction='row'
+      justifyContent='center'
+      alignItems='center'
+    >
+      <Grid item>
+        <FormPaper {...props}>{props.children}</FormPaper>
+      </Grid>
+    </Grid>
+  );
+}

package/src/form/container/FormPaper.tsx

@@ -2,15 +2,15 @@ import React from 'react';
 import { PaperProps, Paper } from '@mui/material';
 
 export function FormPaper(props: PaperProps) {
-    return (
-        <Paper 
-            sx={(theme) => ({
-                padding: theme.spacing(2, 2, 1),
-		        width: 'fit-content'
-            })} 
-            {...props}
-        >
-            {props.children}
-        </Paper>
-    );
-}
+  return (
+    <Paper
+      sx={(theme) => ({
+        padding: theme.spacing(2, 2, 1),
+        width: 'fit-content',
+      })}
+      {...props}
+    >
+      {props.children}
+    </Paper>
+  );
+}

package/src/form/fields/TextField.tsx

@@ -4,68 +4,70 @@ import { Visibility, VisibilityOff } from '@mui/icons-material';
 import { Field, FieldComponent, FieldComponentProps, fieldDisplayValue, fieldLabel, Fields } from '../Field';
 
 export type TextFieldProps<T, F extends Fields> = Field<T, F> & {
-    isPassword?: boolean
-}
+  isPassword?: boolean;
+};
 
 export function textField<F extends Fields>(props: TextFieldProps<string, F>): FieldComponent<string, F> {
-    const { isPassword } = props;
+  const { isPassword } = props;
+
+  return {
+    field: props,
+    component: TextField,
+  };
 
-    return {
-        field: props,
-        component: TextField
-    };
+  function TextField(props: FieldComponentProps<string, F>) {
+    const { field, onChange, ...other } = props;
+    const [error, setError] = React.useState(false);
+    const [statusMessage, setStatusMessage] = React.useState<string>();
+    const [passwordVisible, setPasswordVisible] = React.useState(false);
 
-    function TextField(props: FieldComponentProps<string, F>) {
-        const { field, onChange, ...other } = props;
-        const [error, setError] = React.useState(false);
-        const [statusMessage, setStatusMessage] = React.useState<string>();
-        const [passwordVisible, setPasswordVisible] = React.useState(false);
-    
-        return (
-            <MuiTextField
-                sx={{
-                    display: 'flex',
-		            flexWrap: 'nowrap',
-                }}
-                key={field.name}
-                label={fieldLabel(field)}
-                type={isPassword && !passwordVisible ? 'password' : 'text'}
-                value={fieldDisplayValue(field)}
-                error={error}
-                helperText={statusMessage ? statusMessage : field.description}
-                required={field.accessibility?.required}
-                disabled={field.accessibility?.readonly}
-                onChange={event => {
-                    let errorReceived = false;
-                    let messageReceived: string;
-                    onChange(field, event.target.value, (message: string, isError: boolean) => {
-                        setError(isError);
-                        setStatusMessage(message);
-                        errorReceived = isError;
-                        messageReceived = message;
-                    }).then(() => {  // setFieldStatus may not be called in Field.onChange, but we still want to run after Form.onChange
-                        if (!errorReceived)
-                            setError(false);
-    
-                        if (!messageReceived)
-                            setStatusMessage(undefined);
-                    })
-                }}
-                InputProps={{
-                    endAdornment: (
-                        isPassword && 
-                        <InputAdornment position='end'>
-                            <IconButton
-                                aria-label='Toggle password visibility'
-                                onClick={event => setPasswordVisible(!passwordVisible)}
-                            >
-                                {passwordVisible ? <VisibilityOff /> : <Visibility />}
-                            </IconButton>
-                        </InputAdornment>
-                    )
-                }}
-                {...other}
-            />
-        );
-    }
-}
+    return (
+      <MuiTextField
+        sx={{
+          display: 'flex',
+          flexWrap: 'nowrap',
+        }}
+        key={field.name}
+        label={fieldLabel(field)}
+        type={isPassword && !passwordVisible ? 'password' : 'text'}
+        value={fieldDisplayValue(field)}
+        error={error}
+        helperText={statusMessage ? statusMessage : field.description}
+        required={field.accessibility?.required}
+        disabled={field.accessibility?.readonly}
+        onChange={(event) => {
+          let errorReceived = false;
+          let messageReceived: string;
+          onChange(field, event.target.value, (message: string, isError: boolean) => {
+            setError(isError);
+            setStatusMessage(message);
+            errorReceived = isError;
+            messageReceived = message;
+          }).then(() => {
+            // setFieldStatus may not be called in Field.onChange, but we still want to run after Form.onChange
+            if (!errorReceived) {
+              setError(false);
+            }
+
+            if (!messageReceived) {
+              setStatusMessage(undefined);
+            }
+          });
+        }}
+        InputProps={{
+          endAdornment: isPassword && (
+            <InputAdornment position='end'>
+              <IconButton
+                aria-label='Toggle password visibility'
+                onClick={(event) => setPasswordVisible(!passwordVisible)}
+              >
+                {passwordVisible ? <VisibilityOff /> : <Visibility />}
+              </IconButton>
+            </InputAdornment>
+          ),
+        }}
+        {...other}
+      />
+    );
+  }
+}

package/src/list/NestedList.tsx

@@ -1,8 +1,8 @@
-import React, { ReactElement } from 'react'
-import { Box } from '@mui/material'
+import React, { ReactElement } from 'react';
+import { Box } from '@mui/material';
 
-export type NestedListItem = { element: ReactElement, children?: NestedListItem[], renderChildren?: boolean }
-type NestedListProps = { items: NestedListItem[], level?: number, levelColors?: string[] }
+export type NestedListItem = { element: ReactElement; children?: NestedListItem[]; renderChildren?: boolean };
+type NestedListProps = { items: NestedListItem[]; level?: number; levelColors?: string[] };
 const blue = '#1976d2';
 const green = '#76d275';
 const orange = '#ffa726';
@@ -15,39 +15,36 @@ export const NestedList = ({ items, level, levelColors }: NestedListProps) => {
   const resolvedLevelColors = levelColors ? levelColors : defaultLevelColors;
   const flattenedItems = flattenItems(items);
 
-  function flattenItems(items: NestedListItem[]): (NestedListItem|NestedListItem[])[] {
+  function flattenItems(items: NestedListItem[]): (NestedListItem | NestedListItem[])[] {
     const flattened = [];
-    for (let item of items) {
+    for (const item of items) {
       flattened.push(item);
-      if (item.children && (item.renderChildren || typeof item.renderChildren === 'undefined'))
+      if (item.children && (item.renderChildren || typeof item.renderChildren === 'undefined')) {
         flattened.push(item.children);
+      }
     }
 
     return flattened;
   }
 
   return (
-    <Box 
-      component='ul' 
-      sx={{ 
+    <Box
+      component='ul'
+      sx={{
         padding: isRoot ? 0 : undefined,
         margin: isRoot ? 0 : undefined,
       }}
     >
-      {
-        flattenedItems.map((item, index) => (Array.isArray(item)) ?
-          <NestedList 
-            key={index} 
-            items={item} 
-            level={resolvedLevel + 1} 
-          />
-          :
+      {flattenedItems.map((item, index) =>
+        Array.isArray(item) ? (
+          <NestedList key={index} items={item} level={resolvedLevel + 1} />
+        ) : (
           <Box
             key={index}
             component='li'
             sx={(theme) => ({
               borderLeft: 3,
-              borderLeftColor: resolvedLevelColors[resolvedLevel%resolvedLevelColors.length],
+              borderLeftColor: resolvedLevelColors[resolvedLevel % resolvedLevelColors.length],
               listStyleType: 'none',
               marginTop: !(isRoot && index == 0) ? theme.spacing(1) : undefined,
             })}
@@ -55,7 +52,7 @@ export const NestedList = ({ items, level, levelColors }: NestedListProps) => {
             {item.element}
           </Box>
         )
-      }
+      )}
     </Box>
   );
-}
+};

package/src/router/Page.ts

@@ -6,23 +6,23 @@ import { NavigateFunction } from 'react-router-dom';
 export const getPages = () => SourceRepository.get().objects<Page>('@proteinjs/ui/Page');
 
 export type PageComponentProps = {
-    urlParams: {[key: string]: string}, 
-    navigate: NavigateFunction,
-}
+  urlParams: { [key: string]: string };
+  navigate: NavigateFunction;
+};
 
 export interface Page extends Loadable {
-    name: string;
-    path: string|string[];
-    component: React.ComponentType<PageComponentProps>;
-    /** Render component on its own without any additional, top-level container */
-    noPageContainer?: boolean;
-    auth?: {
-        /** If true, the user does not need to be logged in or have any roles to access this page. If blank, defaults to false. */
-        public?: boolean;
-        /** If true, the user does not need to have any roles to access this page, but must be logged in. If blank, defaults to false. */
-        allUsers?: boolean,
-        /** The user must be logged in and have these roles to access this page. If blank, defaults to requiring the 'admin' role. */
-        roles?: string[];
-    };
-    pageContainerSxProps?: (theme: Theme) => SxProps;
-}
+  name: string;
+  path: string | string[];
+  component: React.ComponentType<PageComponentProps>;
+  /** Render component on its own without any additional, top-level container */
+  noPageContainer?: boolean;
+  auth?: {
+    /** If true, the user does not need to be logged in or have any roles to access this page. If blank, defaults to false. */
+    public?: boolean;
+    /** If true, the user does not need to have any roles to access this page, but must be logged in. If blank, defaults to false. */
+    allUsers?: boolean;
+    /** The user must be logged in and have these roles to access this page. If blank, defaults to requiring the 'admin' role. */
+    roles?: string[];
+  };
+  pageContainerSxProps?: (theme: Theme) => SxProps;
+}

package/src/router/Router.tsx

@@ -7,70 +7,84 @@ import { Page, getPages } from './Page';
 import { createUrlParams } from './createUrlParams';
 
 export type AppOptions = {
-    pageContainer?: React.ComponentType<{ page: Page }>,
-    pageNotFound?: React.ComponentType
-}
+  pageContainer?: React.ComponentType<{ page: Page }>;
+  pageNotFound?: React.ComponentType;
+};
 
 export function loadApp(options: AppOptions = {}) {
-    const container = document.getElementById('app');
-    const root = createRoot(container!);
-    root.render(<Router pages={getPages()} options={options} />);
+  const container = document.getElementById('app');
+  const root = createRoot(container!);
+  root.render(<Router pages={getPages()} options={options} />);
 }
 
-export function Router(props: { pages: Page[], options: AppOptions }) {
-    const { pages, options } = props;
+export function Router(props: { pages: Page[]; options: AppOptions }) {
+  const { pages, options } = props;
+  return (
+    <div>
+      <CssBaseline />
+      <BrowserRouter>
+        <RoutesComponent />
+      </BrowserRouter>
+    </div>
+  );
+
+  function RoutesComponent() {
+    const navigate = useNavigate();
     return (
-        <div>
-            <CssBaseline />
-            <BrowserRouter>
-                <RoutesComponent />
-            </BrowserRouter>
-        </div>
+      <Routes>
+        {(() => {
+          const routes = [];
+          let key = 0;
+          for (const page of pages) {
+            if (typeof page.path === 'string') {
+              routes.push(
+                <Route
+                  key={key++}
+                  path={getPath(page.path)}
+                  element={<ContainerizedComponent options={options} page={page} navigate={navigate} />}
+                />
+              );
+            } else {
+              const paths = page.path as string[];
+              for (const path of paths) {
+                routes.push(
+                  <Route
+                    key={key++}
+                    path={getPath(path)}
+                    element={<ContainerizedComponent options={options} page={page} navigate={navigate} />}
+                  />
+                );
+              }
+            }
+          }
+          return routes;
+        })()}
+        <Route element={<PageNotFound pageNotFound={options.pageNotFound} />} />
+      </Routes>
     );
+  }
 
-    function RoutesComponent() {
-        const navigate = useNavigate();
-        return (
-            <Routes>
-                {
-                    (() => {
-                        const routes = [];
-                        let key = 0;
-                        for (const page of pages) {
-                            if (typeof page.path === 'string')
-                                routes.push(<Route key={key++} path={getPath(page.path)} element={<ContainerizedComponent options={options} page={page} navigate={navigate} />} />);
-                            else {
-                                const paths = page.path as string[];
-                                for (const path of paths)
-                                    routes.push(<Route key={key++} path={getPath(path)} element={<ContainerizedComponent options={options} page={page} navigate={navigate} />} />);
-                            }
-                        }
-                        return routes;
-                    })()
-                }
-                <Route element={<PageNotFound pageNotFound={options.pageNotFound} />} />
-            </Routes>
-        )
-    }
-
-    function ContainerizedComponent(props: { options: AppOptions, page: Page, navigate: NavigateFunction}) {
-        if (props.options.pageContainer && !props.page.noPageContainer)
-            return ( <props.options.pageContainer page={props.page} /> );
-        
-        return ( <props.page.component urlParams={createUrlParams()} navigate={props.navigate} /> );
+  function ContainerizedComponent(props: { options: AppOptions; page: Page; navigate: NavigateFunction }) {
+    if (props.options.pageContainer && !props.page.noPageContainer) {
+      return <props.options.pageContainer page={props.page} />;
     }
 
-    function PageNotFound(props: { pageNotFound: AppOptions['pageNotFound'] }) {
-        if (props.pageNotFound)
-            return ( <props.pageNotFound /> );
+    return <props.page.component urlParams={createUrlParams()} navigate={props.navigate} />;
+  }
 
-        return <h1>404: Page not found</h1>;
+  function PageNotFound(props: { pageNotFound: AppOptions['pageNotFound'] }) {
+    if (props.pageNotFound) {
+      return <props.pageNotFound />;
     }
+
+    return <h1>404: Page not found</h1>;
+  }
 }
 
 function getPath(path: string) {
-    if (path.startsWith('/'))
-        return path;
+  if (path.startsWith('/')) {
+    return path;
+  }
 
-    return `/${path}`;
-}
+  return `/${path}`;
+}

package/src/router/createUrlParams.ts

@@ -1,16 +1,17 @@
 import { useLocation } from 'react-router';
 
 export function createUrlParams() {
-  const urlParams: {[paramName: string]: string} = {};
+  const urlParams: { [paramName: string]: string } = {};
   const location = useLocation();
   const serializedParams = location.search.substring(1).split('&');
-  for (let serializedParam of serializedParams) {
-      if (serializedParam === '')
-          continue;
+  for (const serializedParam of serializedParams) {
+    if (serializedParam === '') {
+      continue;
+    }
 
-      const kvp = serializedParam.split('=');
-      urlParams[decodeURIComponent(kvp[0])] = decodeURIComponent(kvp[1]);
+    const kvp = serializedParam.split('=');
+    urlParams[decodeURIComponent(kvp[0])] = decodeURIComponent(kvp[1]);
   }
 
   return urlParams;
-}
+}