@proteinjs/ui 1.0.1

package/src/form/FunctionalForm.tsx

@@ -0,0 +1,364 @@
+// import React from 'react';
+// import { Button, Container, Grid, IconButton, Typography, LinearProgress } from '@material-ui/core';
+// import { makeStyles, styled } from '@material-ui/core/styles';
+// import { compose, sizing, spacing } from '@material-ui/system';
+// import queryString from 'query-string';
+// import { history } from '../util/history';
+// import { Field, FieldComponent, Fields } from './Field';
+// import { FormButton, FormButtons } from './FormButton';
+
+// const useStyles = makeStyles(theme => ({
+// 	root: {
+// 		padding: 0
+// 	},
+// 	title: {
+// 		marginBottom: theme.spacing(4),
+// 	},
+// 	status: {
+// 		marginBottom: theme.spacing(2)
+// 	},
+// 	button: {
+// 		margin: theme.spacing(6, 0, 2),
+// 	}
+// }));
+
+// export const RootBox = styled('div')(
+// 	compose(
+// 		sizing,
+// 		spacing
+// 	)
+// );
+
+// export type FormProps<F extends Fields, B extends FormButtons<F>> = {
+//     name?: string,
+//     documentation?: React.ComponentType,
+//     createFields: () => F,
+//     fieldLayout?: (keyof F)[]|(keyof F)[][],
+//     buttons: B,
+//     onLoad?: (fields: F, buttons: B) => Promise<void>,
+//     onLoadProgressMessage?: string
+// }
+
+// export function Form<F extends Fields, B extends FormButtons<F>>(props: FormProps<F, B>) {
+//     const classes = useStyles(props);
+//     const [status, setStatus] = React.useState<{ message?: string, isError?: boolean }>();
+//     const [fields, setFields] = React.useState<F>();
+//     const [progress, setProgress] = React.useState<{ visible?: boolean, message?: string }>();
+//     const [fieldRenderKeys, setFieldRenderKeys] = React.useState<{[fieldName: string]: number}>({});
+//     // const [fieldRenderKeys, dispatchFieldRenderKeys] = React.useReducer((state: {[fieldName: string]: number}, action: any) => {
+//     // //    const counter = typeof state[action.field] !== 'undefined' ? state[action.field] + 1 : 1;
+//     // //    const fieldUpdate: any = {};
+//     // //    fieldUpdate[action.field] = counter;
+//     // //    return Object.assign(state, fieldUpdate);
+//     //     state[action.field] = typeof state[action.field] !== 'undefined' ? state[action.field] + 1 : 1;
+//     //     return Object.assign({}, state);
+//     // }, {});
+//     const [renderFields, setRenderFields] = React.useState(0);
+//     const [focusedField, setFocusedField] = React.useState<string>();
+//     React.useEffect(() => {
+//         onLoad();
+//     }, []);
+
+//     async function onLoad() {
+//         setProgress({ visible: true, message: props.onLoadProgressMessage });
+//         const newFields = props.createFields();
+//         try {
+//             for (const fieldPropertyName in newFields) {
+//                 const field = newFields[fieldPropertyName].field;
+//                 if (!field)
+//                     continue;
+
+//                 if (field.onLoad)
+//                     await field.onLoad(newFields);
+
+//                 if (!field.accessibility)
+//                     field.accessibility = {};
+//                 Object.defineProperty(field.accessibility, 'required', {
+//                     get: function() {
+//                         return this._required;
+//                     },
+//                     set: function(value) {
+//                         console.log(`running set value for field: ${field.name}`);
+//                         // const renderKeyUpdate: any = {};
+//                         // renderKeyUpdate[field.name] = typeof renderKeyUpdate[field.name] !== 'undefined' ? renderKeyUpdate[field.name] + 1 : 1;
+//                         // setFieldRenderKeys(Object.assign(fieldRenderKeys, renderKeyUpdate));
+//                         fieldRenderKeys[field.name] = typeof fieldRenderKeys[field.name] !== 'undefined' ? fieldRenderKeys[field.name] + 1 : 1;
+//                         setFieldRenderKeys(Object.assign({}, fieldRenderKeys));
+//                         // dispatchFieldRenderKeys({ field: field.name });
+//                         // if (typeof fieldRenderKeys[field.name] !== 'number')
+//                         //     fieldRenderKeys[field.name] = 0;
+
+//                         // fieldRenderKeys[field.name] = fieldRenderKeys[field.name] + 1;
+//                         this._required = value;
+//                     }
+//                 });
+//             }
+
+//             if (props.onLoad)
+//                 await props.onLoad(newFields, props.buttons);
+//         } catch (error) {
+//             console.error(`Failed while running onLoad functions`, error);
+//         }
+
+//         setStatus({});
+//         setFields(newFields);
+//         setProgress({ visible: false });
+//     }
+
+//     async function onChange(field: Field<any, any>, value: any, setFieldStatus: (message: string, isError: boolean) => void) {
+//         field.value = value;
+//         if (field.onChange) {
+//             try {
+//                 await field.onChange(field.value, fields, setFieldStatus);
+//             } catch (error) {
+//                 console.error(`Failed while running onChange for field: ${field.name}`, error);
+//             }
+//         }
+
+//         setFocusedField(field.name);
+//         // setFields(Object.assign({}, fields));
+//         // setFieldRenderKeys(Object.assign({}, fieldRenderKeys));
+//         // dispatchFieldRenderKeys({ type: 'update' })
+//         // setRenderFields(renderFields +1);
+//     }
+
+//     async function onClick(button: FormButton<any>) {
+//         if (button.onClick) {
+//             setProgress({ visible: true, message: button.progressMessage ? button.progressMessage(fields) : undefined });
+//             try {
+//                 const successMessage = await button.onClick(fields, props.buttons);
+//                 if (successMessage)
+//                     setStatus({ message: successMessage, isError: false});
+//             } catch (error) {
+//                 setStatus({ message: error.message, isError: true});
+//                 console.error(`Error when clicking button: ${button.name}`, error);
+//             }
+//             setProgress({ visible: false });
+//         }
+
+//         if (button.redirect) {
+//             let path = button.redirect.path;
+//             if (button.redirect.props)
+//                 path += `?${queryString.stringify(button.redirect.props)}`;
+//             history.push(path);
+//             return;
+//         }
+
+//         if (button.clearFormOnClick)
+//             await onLoad();
+//     }
+
+//     return (
+//         <Container>
+//             <form autoComplete='off'>
+//                 <Title />
+//                 <Documentation />
+//                 <Status />
+//                 <Fields />
+//                 <Progress />
+//                 <Buttons />
+//             </form>
+//         </Container>
+//     );
+
+//     function Title() {
+//         if (!props.name)
+//             return null;
+
+//         return (
+//             <Grid container justify='flex-start' alignItems='flex-start' spacing={2}>
+//                 <Grid item>
+//                     <Typography variant='h5' className={classes.title}>
+//                         {props.name}
+//                     </Typography>
+//                 </Grid>
+//             </Grid>
+//         );
+//     }
+
+//     function Documentation() {
+//         if (!props.documentation)
+// 			return null;
+
+// 		return (
+//             <Grid container justify='flex-start' alignItems='flex-start'>
+//                 <Grid item>
+//                     <props.documentation />
+//                 </Grid>
+//             </Grid>
+// 		);
+//     }
+    
+//     function Status() {
+//         if (!status || !status.message)
+//             return null;
+
+//         return (
+//             <Grid container>
+// 				<Grid item xs={12} className={classes.status}>
+// 					<Typography
+// 						variant='subtitle1'
+// 						color={status.isError ? 'error' : 'primary'}
+// 					>
+// 						{status.message}
+// 					</Typography>
+// 				</Grid>
+// 			</Grid>
+//         );
+//     }
+    
+//     function Fields() {
+//         return (
+//             <Grid container spacing={8}>
+//                 {
+//                     getFieldRows().map((fieldComponents, index) => {
+//                         if (!fieldRowVisible(fieldComponents))
+//                             return null;
+            
+//                         return (
+//                             <Grid item xs={12} key={index}>
+//                                 <Grid container spacing={8}>
+//                                     {
+//                                         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}`;
+//                                             console.log(fieldKey);
+//                                             return (
+//                                             <Grid item xs={12} sm={fieldComponent.field.layout?.width as 1} key={fieldRenderKeys[fieldComponent.field.name] ? `${fieldComponent.field.name}_${fieldRenderKeys[fieldComponent.field.name]}` : `${fieldComponent.field.name}`}>
+//                                                 <fieldComponent.component
+//                                                     field={fieldComponent.field}
+//                                                     onChange={onChange}
+//                                                     // focused={focusedField == fieldComponent.field.name}
+//                                                 />
+//                                             </Grid>
+//                                         )})
+//                                     }
+//                                 </Grid>
+//                             </Grid>
+//                         );
+//                     })
+//                 }
+//             </Grid>
+//         );
+//     }
+    
+//     function getFieldRows(): FieldComponent<any, any>[][] {
+//         const rows: FieldComponent<any, any>[][] = [];
+//         if (!fields)
+//             return rows;
+
+//         if (props.fieldLayout) {
+//             if (typeof props.fieldLayout[0] === 'string') {
+//                 for (let i = 0; i < props.fieldLayout.length; i++) {
+//                     const fieldPropertyName = props.fieldLayout[i] as string;
+//                     const fieldComponent = fields[fieldPropertyName];
+//                     fieldComponent.field.layout = { row: i, width: 12 };
+//                     rows.push([fieldComponent]);
+//                 }
+//             } else {
+//                 for (let i = 0; i < props.fieldLayout.length; i++) {
+//                     const row = props.fieldLayout[i] as string[];
+//                     const columns = row.length;
+//                     if (columns > 6)
+//                         throw new Error(`When using FormProps.fieldLayout, the maximum number of fields per row is 6, provided: ${columns}. For more granular layout control use Field.layout`);
+
+//                     const currentRow: FieldComponent<any, any>[] = [];
+//                     for (const fieldPropertyName of row ) {
+//                         const fieldComponent = fields[fieldPropertyName];
+//                         fieldComponent.field.layout = { row: i, width: columns == 5 ? 2 : 12/columns as 1 };
+//                         currentRow.push(fieldComponent);
+//                     }
+//                     rows.push(currentRow);
+//                 }
+//             }
+//         } else {
+//             for (const fieldPropertyName in fields) {
+//                 const fieldComponent: FieldComponent<any, any> = fields[fieldPropertyName];
+//                 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;
+
+//         return (
+//             <Grid container justify='center' alignItems='center' spacing={2}>
+//                 <Grid item>
+//                     <LinearProgress variant='indeterminate' color='primary' />
+//                 </Grid>
+//             </Grid>
+//         );
+//     }
+    
+//     function Buttons() {
+//         return (
+//             <Grid container justify='flex-end' alignItems='flex-end' spacing={2}>
+//                 {
+//                     Object.keys(props.buttons).map((buttonPropertyName) => props.buttons[buttonPropertyName]).filter((button) => {
+//                         if (button.accessibility?.hidden)
+//                             return false;
+            
+//                         return true;
+//                     }).map((button, key) => {
+//                         return (
+//                             <Grid item key={key}>
+//                                 { button.style.icon ?
+//                                     <RootBox className={classes.button}>
+//                                         <IconButton
+//                                             disabled={button.accessibility?.disabled}
+//                                             onClick={event => onClick(button)}
+//                                         >
+//                                             <button.style.icon />
+//                                         </IconButton>
+//                                     </RootBox>
+//                                     :
+//                                     <RootBox className={classes.button}>
+//                                         <Button
+//                                             color={button.style.color}
+//                                             variant={button.style.variant ? 'contained' : 'text'}
+//                                             disabled={button.accessibility?.disabled}
+//                                             onClick={event => onClick(button)}
+//                                         >
+//                                             {button.name}
+//                                         </Button>
+//                                     </RootBox>
+//                                 }
+//                             </Grid>
+//                         )
+//                     })
+//                 }
+//             </Grid>
+//         );
+//     }
+// }

package/src/form/container/FormPage.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+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>
+    );
+}

package/src/form/container/FormPaper.tsx

@@ -0,0 +1,16 @@
+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>
+    );
+}

package/src/form/fields/TextField.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import { InputAdornment, TextField as MuiTextField, IconButton } from '@mui/material';
+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
+}
+
+export function textField<F extends Fields>(props: TextFieldProps<string, F>): FieldComponent<string, F> {
+    const { isPassword } = props;
+
+    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);
+    
+        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

@@ -0,0 +1,61 @@
+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[] }
+const blue = '#1976d2';
+const green = '#76d275';
+const orange = '#ffa726';
+const purple = '#ab47bc';
+const defaultLevelColors = [blue, green, orange, purple];
+
+export const NestedList = ({ items, level, levelColors }: NestedListProps) => {
+  const isRoot = typeof level === 'undefined';
+  const resolvedLevel = level ? level : 0;
+  const resolvedLevelColors = levelColors ? levelColors : defaultLevelColors;
+  const flattenedItems = flattenItems(items);
+
+  function flattenItems(items: NestedListItem[]): (NestedListItem|NestedListItem[])[] {
+    const flattened = [];
+    for (let item of items) {
+      flattened.push(item);
+      if (item.children && (item.renderChildren || typeof item.renderChildren === 'undefined'))
+        flattened.push(item.children);
+    }
+
+    return flattened;
+  }
+
+  return (
+    <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} 
+          />
+          :
+          <Box
+            key={index}
+            component='li'
+            sx={(theme) => ({
+              borderLeft: 3,
+              borderLeftColor: resolvedLevelColors[resolvedLevel%resolvedLevelColors.length],
+              listStyleType: 'none',
+              marginTop: !(isRoot && index == 0) ? theme.spacing(1) : undefined,
+            })}
+          >
+            {item.element}
+          </Box>
+        )
+      }
+    </Box>
+  );
+}

package/src/router/Page.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import { SxProps } from '@mui/material';
+import { Loadable, SourceRepository } from '@proteinjs/reflection';
+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,
+}
+
+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?: SxProps;
+}

package/src/router/Router.tsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import { Route, Routes } from 'react-router';
+import { createRoot } from 'react-dom/client';
+import { BrowserRouter, useNavigate, NavigateFunction } from 'react-router-dom';
+import { CssBaseline } from '@mui/material';
+import { Page, getPages } from './Page';
+import { createUrlParams } from './createUrlParams';
+
+export type AppOptions = {
+    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} />);
+}
+
+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 (
+            <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 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;
+
+    return `/${path}`;
+}

package/src/router/createUrlParams.ts

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