@proteinjs/ui 1.0.1

package/index.ts

@@ -0,0 +1,20 @@
+export * from './src/router/Router';
+export * from './src/router/Page';
+
+export * from './src/form/Form';
+export * from './src/form/Field';
+export * from './src/form/FormButton';
+
+export * from './src/form/fields/TextField';
+
+export * from './src/form/container/FormPaper';
+export * from './src/form/container/FormPage';
+
+export * from './src/container/PageContainer';
+export * from './src/container/NavMenu';
+
+export * from './src/list/NestedList';
+
+export * from './src/table/Table';
+export * from './src/table/TableButton';
+export * from './src/table/TableLoader';

package/jest.config.js

@@ -0,0 +1,18 @@
+module.exports = {
+	"roots": [
+	  	"<rootDir>/test"
+	],
+	"transform": {
+	  	"^.+\\.tsx?$": "ts-jest"
+	},
+	"testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$",
+	"moduleFileExtensions": [
+		"ts",
+		"tsx",
+		"js",
+		"jsx",
+		"json",
+		"node"
+	],
+	"testEnvironment": "node"
+}

package/package.json

@@ -0,0 +1,52 @@
+{
+    "name": "@proteinjs/ui",
+    "version": "1.0.1",
+    "description": "UI libs",
+    "publishConfig": {
+        "access": "public"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/proteinjs/ui.git"
+    },
+    "bugs": {
+        "url": "https://github.com/proteinjs/ui/issues"
+    },
+    "homepage": "https://github.com/proteinjs/ui#readme",
+    "author": "Brent Bahry",
+    "license": "MIT",
+    "scripts": {
+        "clean": "rm -rf dist/ generated/ node_modules/ package-lock.json",
+        "build": "reflection-build && tsc",
+        "watch": "reflection-watch"
+    },
+    "dependencies": {
+        "@emotion/react": "11.11.1",
+        "@emotion/styled": "11.11.0",
+        "@mui/icons-material": "5.14.11",
+        "@mui/material": "5.14.11",
+        "@proteinjs/reflection": "1.0.2",
+        "@proteinjs/util": "1.0.18",
+        "history": "5.0.0",
+        "moment": "2.29.4",
+        "query-string": "6.13.2",
+        "react": "18.2.0",
+        "react-dom": "18.2.0",
+        "react-router": "6.16.0",
+        "react-router-dom": "6.16.0",
+        "string": "3.3.3"
+    },
+    "devDependencies": {
+        "@proteinjs/reflection-build": "1.0.5",
+        "@types/node": "14.0.13",
+        "@types/react": "18.2.23",
+        "@types/react-dom": "18.2.8",
+        "@types/react-router": "5.1.20",
+        "@types/react-router-dom": "5.3.3",
+        "@types/string": "0.0.30",
+        "typescript": "5.2.2"
+    },
+    "main": "./dist/generated/index.js",
+    "types": "./dist/generated/index.d.ts",
+    "gitHead": "14b3fefaaceda0824e4d0e09ac03db2adb2e1a8a"
+}

package/src/container/AccountIconButton.tsx

@@ -0,0 +1,118 @@
+import React from 'react';
+import { Button, IconButton, Menu, MenuItem } from '@mui/material';
+import AccountCircle from '@mui/icons-material/AccountCircle';
+import { useNavigate } from 'react-router-dom';
+import { LinkOrDialog } from './NavMenu';
+import { Page } from '../router/Page';
+
+export type AccountIconButtonProps = {
+  loginClicked: boolean,
+  setLoginClicked: React.Dispatch<React.SetStateAction<boolean>>,
+  auth?: {
+    isLoggedIn: boolean,
+    canViewPage: (page: Page) => boolean,
+    /** Either a dialog component, or a path to be redirected to */
+    login: LinkOrDialog,
+    logout: () => Promise<string>
+  },
+  profileMenuItems?: { name: string, action: LinkOrDialog }[],
+}
+
+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 open = Boolean(anchorEl);
+
+  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 
+                              onClick={event => {
+                                  if (typeof profileMenuItem.action === 'string') {
+                                      navigate(qualifiedPath(profileMenuItem.action));
+                                      return;
+                                  }
+                                  setSelectedIndex(index);
+                              }}
+                              selected={selectedIndex === index}
+                          >
+                              {profileMenuItem.name}
+                          </MenuItem>
+                      ))
+                  }
+                  <MenuItem 
+                      onClick={async (event) => {
+                          const redirectPath = await auth.logout();
+                          navigate(qualifiedPath(redirectPath));
+                      }}
+                  >
+                      Logout
+                  </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>
+  );
+
+  function ProfileMenuItemAction() {
+    if (selectedProfileMenuItem == -1 || !auth || !profileMenuItems)
+        return null;
+  
+    const menuItem = profileMenuItems[selectedProfileMenuItem];
+    if (typeof menuItem.action === 'string')
+        return null;
+  
+    return <menuItem.action onClose={() => setSelectedProfileMenuItem(-1)} />;
+  }
+  
+  function Login() {
+    if (!loginClicked || !auth || typeof auth.login === 'string')
+        return null;
+  
+    return <auth.login onClose={() => setLoginClicked(false)} />;
+  }
+  
+  function qualifiedPath(path: string) {
+    if (path.startsWith('/'))
+        return path;
+  
+    return `/${path}`;
+  }
+}

package/src/container/NavMenu.tsx

@@ -0,0 +1,91 @@
+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 }>;
+
+export type NavMenuItem = {
+  name: string;
+  action: LinkOrDialog;
+  icon?: React.ComponentType;
+  /** Use to make this item a divider */
+  // isDivider?: boolean, 
+  /** Use to make this item a nested menu */
+  // children?: NavMenuItems 
+};
+
+export type NavMenuProps = {
+  navMenuItems?: NavMenuItem[],
+  navMenuOpen: boolean,
+  setNavMenuOpen: (open: boolean) => void,
+};
+
+const drawerWidth = 240;
+
+export const NavMenu: React.FC<NavMenuProps> = ({ navMenuItems, navMenuOpen, setNavMenuOpen }) => {
+  const [selectedNavMenuItem, setSelectedNavMenuItem] = React.useState<number>(-1);
+
+  const handleNavMenuItemClick = (index: number) => {
+    setSelectedNavMenuItem(index);
+    setNavMenuOpen(false);
+  };
+
+  const NavMenuItemAction = () => {
+    if (selectedNavMenuItem == -1 || !navMenuItems)
+      return null;
+
+    const menuItem = navMenuItems[selectedNavMenuItem];
+
+    React.useEffect(() => {
+      setSelectedNavMenuItem(-1);
+    }, [selectedNavMenuItem]);
+
+    if (typeof menuItem.action === 'string')
+      return <Navigate to={qualifiedPath(menuItem.action)} />;
+
+    return <menuItem.action onClose={() => setSelectedNavMenuItem(-1)} />;
+  };
+
+  const qualifiedPath = (path: string) => {
+    if (path.startsWith('/'))
+      return path;
+    
+    return `/${path}`;
+  };
+
+  return (
+    <div>
+      <Drawer
+        sx={{
+          width: drawerWidth,
+          flexShrink: 0,
+        }}
+        variant='temporary'
+        anchor='left'
+        open={navMenuOpen}
+        onClose={(_, reason) =>
+          reason === 'backdropClick' && setNavMenuOpen(false)
+        }
+      >
+        <Toolbar />
+        <List>
+          {navMenuItems?.map((navMenuItem, index) => (
+            <ListItem key={index}>
+              <ListItemButton
+                onClick={() => handleNavMenuItemClick(index)}
+              >
+                {navMenuItem.icon && 
+                  <ListItemIcon>
+                    <navMenuItem.icon />
+                  </ListItemIcon>
+                }
+                <ListItemText primary={navMenuItem.name} />
+              </ListItemButton>
+            </ListItem>
+          ))}
+        </List>
+      </Drawer>
+      <NavMenuItemAction />
+    </div>
+  );
+}

package/src/container/PageContainer.tsx

@@ -0,0 +1,108 @@
+import React from 'react';
+import { AppBar, Toolbar, Box, IconButton, Typography } from '@mui/material';
+import MenuIcon from '@mui/icons-material/Menu';
+import { NavigateFunction, useNavigate } from 'react-router-dom';
+import { Page } from '../router/Page';
+import { createUrlParams } from '../router/createUrlParams';
+import { LinkOrDialog, NavMenu, NavMenuItem } from './NavMenu';
+import { AccountIconButton } from './AccountIconButton';
+
+export type PageContainerProps = {
+    appName: string,
+    page: Page,
+    toolbarChildren?: React.ReactNode,
+    auth?: {
+        isLoggedIn: boolean,
+        canViewPage: (page: Page) => boolean,
+        /** Either a dialog component, or a path to be redirected to */
+        login: LinkOrDialog,
+        logout: () => Promise<string>
+    },
+    profileMenuItems?: { name: string, action: LinkOrDialog }[],
+    navMenuItems?: NavMenuItem[],
+}
+
+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;
+    }
+
+    navigate('/');
+    return null;
+});
+
+export function PageContainer(props: PageContainerProps) {
+    const navigate = useNavigate();
+    const { appName, page, toolbarChildren, auth, profileMenuItems, navMenuItems } = props;
+    const [loginClicked, setLoginClicked] = React.useState(false);
+    const [navMenuOpen, setNavMenuOpen] = React.useState(false);
+    
+    React.useEffect(() => {
+        if (auth?.canViewPage(page))
+            return;
+
+        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]);
+
+    return (
+        <Box sx={(theme) => {
+            const defaultStyles = {};
+            if (!page.pageContainerSxProps)
+                return defaultStyles;
+
+            let resolvedStyles;
+            if (typeof page.pageContainerSxProps === 'function')
+                resolvedStyles = Object.assign(defaultStyles, page.pageContainerSxProps(theme));
+            else
+                resolvedStyles = Object.assign(defaultStyles, page.pageContainerSxProps);
+
+            return resolvedStyles;
+        }}>
+            <AppBar position='static'>
+                <Toolbar>
+                    { navMenuItems && 
+                        <IconButton
+                            aria-label='menu'
+                            onClick={event => setNavMenuOpen(!navMenuOpen)} 
+                            sx={(theme) => ({
+                                marginRight: theme.spacing(2),
+                                '&:hover': {
+                                    color: '#fff',
+                                },
+                            })} 
+                            style={{ backgroundColor: 'transparent' }}
+                        >
+                            <MenuIcon />
+                        </IconButton>
+                    }
+                    <Typography variant='h5' sx={{ flexGrow: 1, color: 'common.white', }}>
+                        {appName}
+                    </Typography>
+                    {toolbarChildren}
+                    <AccountIconButton loginClicked={loginClicked} setLoginClicked={setLoginClicked} auth={auth} profileMenuItems={profileMenuItems} />
+                </Toolbar>
+            </AppBar>
+            <NavMenu navMenuItems={navMenuItems} navMenuOpen={navMenuOpen} setNavMenuOpen={setNavMenuOpen} />
+            <Page auth={auth} page={page} navigate={navigate} loginClicked={loginClicked} setLoginClicked={setLoginClicked} />
+        </Box>
+    );
+
+    function qualifiedPath(path: string) {
+        if (path.startsWith('/'))
+            return path;
+
+        return `/${path}`;
+    }
+}

package/src/form/Field.tsx

@@ -0,0 +1,51 @@
+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>
+}
+
+export type FieldComponentProps<T, F extends Fields> = {
+    field: Field<T, F>,
+    onChange: (field: Field<T, F>, 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,
+}
+
+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;
+}
+
+export function fieldDisplayValue(field: Field<any, any>) {
+	let value = '';
+	if (field.value) {
+		if (field.displayValue)
+			value = field.displayValue(field.value);
+		else
+			value = field.value;
+	}
+
+	return value;
+}