@chtc/web-components 0.0.0-0

package/README.md

@@ -0,0 +1,6 @@
+# web-components
+PATh Web Components
+
+Key Packages
+- nextjs
+- material-ui

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@chtc/web-components",
+  "version": "0.0.0-0",
+  "description": "PATh Web Components",
+  "main": "src/index.ts",
+  "types": "src/index.d.ts",
+  "scripts": {
+    "test": "jest --coverage --json --outputFile=.github/tests/test-summary.json",
+    "build": "tsc",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "publish:increment": "npm version prerelease --no-git-tag-version && npm publish --access public"
+  },
+  "files": [
+    "src"
+  ],
+  "author": "",
+  "license": "Apache-2.0",
+  "devDependencies": {
+    "@babel/preset-typescript": "^7.23.3",
+    "@chromatic-com/storybook": "^1.6.1",
+    "@storybook/addon-essentials": "^8.1.11",
+    "@storybook/addon-interactions": "^8.1.11",
+    "@storybook/addon-links": "^8.1.11",
+    "@storybook/addon-onboarding": "^8.1.11",
+    "@storybook/blocks": "^8.1.11",
+    "@storybook/nextjs": "^8.1.11",
+    "@storybook/react": "^8.1.11",
+    "@storybook/test": "^8.1.11",
+    "@types/jest": "^29.5.8",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "storybook": "^8.1.11",
+    "ts-jest": "^29.1.1",
+    "typescript": "^5.2.2"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.5",
+    "@mui/icons-material": "^5.16.0",
+    "@mui/material": "^5.16.0"
+  }
+}

package/src/index.ts

@@ -0,0 +1 @@
+export * from './layout'

package/src/layout/Header/BurgerMenu.tsx

@@ -0,0 +1,101 @@
+'use client';
+import React, {useState} from "react";
+import {Box,Typography, IconButton, Drawer, Divider, List, ListSubheader} from "@mui/material";
+import MenuIcon from '@mui/icons-material/Menu';
+import {
+    Home, GitHub, Description, Groups, Email, Help, Group, Info, Grade, Newspaper, Close, Terminal, CalendarMonth, FileDownload
+} from "@mui/icons-material";
+import { HeaderDropdown, HeaderLink, HeaderMainLink } from "./HeaderDropdown";
+import { HeaderLinkItem, HeaderMenuProps } from "./index";
+
+export const BurgerMenu = ({menuItems} : {menuItems: (Omit<HeaderMenuProps, "setAnchor" | "anchorEl"> | HeaderLinkItem)[]}) => {
+    const [openDrawer, setOpenDrawer] = useState(false);
+
+    const handleDrawer = () => {
+        setOpenDrawer(!openDrawer);
+    };
+
+  return (
+    <Box ml={"auto"}>
+        <IconButton
+            aria-label="menu"
+            onClick={handleDrawer}
+        >
+            <MenuIcon/>
+        </IconButton>
+        <Drawer anchor={"right"} open={openDrawer} onClose={handleDrawer} 
+            sx={{
+                "& .MuiDrawer-paper": {
+                    boxSizing: "border-box",
+                    width: "100%",
+                    "@media (min-width: 576px)": {
+                        width: "30rem",
+                    }
+                },
+                boxShadow: "0px 0px 10px rgba(0, 0, 0, 0.25)",
+                backdropFilter: "blur(2px)",
+                WebkitBackdropFilter: "blur(2px)",
+                backgroundColor: "rgba(255, 255, 255, 0.5)",
+            }}
+        >
+            <List
+                sx={{margin: "1rem" }}
+                component="nav"
+                aria-labelledby="nested-list-subheader"
+                subheader={
+                    <ListSubheader component="div" id="nested-list-subheader">
+                        <Box style={{display: "flex", flexDirection:"row", justifyContent:"start" }}>
+                            <img src={PelicanLogo} alt={"Pelican Logo"} height={48}/>
+                            <Typography variant={"h5"} pl={1} my={"auto"}>Pelican Platform</Typography>
+                            <IconButton
+                                sx={{ml: "auto"}}
+                                edge="start"
+                                color="inherit"
+                                aria-label="menu"
+                                onClick={handleDrawer}
+                            >
+                                <Close sx={{fontSize:"2rem"}}/>
+                            </IconButton>
+                        </Box>
+                    </ListSubheader>
+                }
+            >
+                <Divider sx={{my:2}}/>
+                {menuItems.map((item) => {
+                  if ('menuItems' in item) {
+                    // This is a dropdown item
+                    return (
+                        <HeaderDropdown key={item.value} value={item.value} icon={item.icon}>
+                          {item.menuItems.map((subItem) => (
+                              <HeaderLink
+                                  key={item.value}
+                                  value={subItem.value}
+                                  href={subItem.href}
+                                  icon={subItem.icon}
+                                  target={subItem?.target}
+                                  onClick={handleDrawer}
+                              />
+                          ))}
+                        </HeaderDropdown>
+                    );
+                  } else {
+                    // This is a main link item
+                    return (
+                        <HeaderMainLink
+                            key={item.value}
+                            value={item.value}
+                            href={item.href}
+                            icon={item.icon}
+                            target={item.target}
+                            onClick={handleDrawer}
+                        />
+                    );
+                  }
+                })}
+            </List>
+        </Drawer>
+    </Box>
+  );
+}
+
+export default BurgerMenu;

package/src/layout/Header/DesktopMenu.tsx

@@ -0,0 +1,50 @@
+'use client'
+
+import {useState, ReactNode, useRef, ComponentType} from "react";
+import {Box, Button, Grid, IconButton, Menu, MenuItem, Tooltip, IconProps} from "@mui/material"
+
+import {HeaderItem} from "./HeaderItem";
+
+import type {HeaderLinkItem, MenuProps} from "./index.d";
+
+export const DesktopMenu = ({menuItems} : {menuItems: MenuProps[]}) => {
+
+	const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+
+	return (
+			<>
+				<Box display={"flex"} mb={.5}>
+					{menuItems.filter(x => "type" in x ? x?.type != "icon" : true).map((item) => (
+							<HeaderItem
+									key={item.value}
+									{...item}
+									anchorEl={anchorEl}
+									setAnchor={(element) => {
+										setAnchorEl((anchorEl) => {
+											if(element == null) {
+												return element
+											}
+											if(anchorEl?.id == element.id) {
+												return null
+											}
+											return element
+										})
+									}}
+							/>
+					))}
+				</Box>
+				<Box marginLeft={"auto"}>
+					<Grid container spacing={1}>
+						{menuItems.filter(x => "type" in x ? x?.type == "icon" : false).map((item) => (
+								<Grid key={item.value} item>
+									<HeaderIconLink
+											{...item as HeaderLinkItem}
+									/>
+								</Grid>
+						))}
+					</Grid>
+				</Box>
+			</>
+	)
+}
+

package/src/layout/Header/Header.tsx

@@ -0,0 +1,54 @@
+'use client'
+
+import {useState, useEffect, ReactNode} from "react";
+import {Box, Typography} from "@mui/material"
+import styles from "../../../app/page.module.css"
+import Link from "next/link";
+
+import {MenuProps} from "./index.d";
+import {BurgerMenu, DesktopMenu, ImageIcon} from "./index";
+
+export interface HeaderProps {
+	icon: ReactNode,
+	title: string,
+	menuItems: MenuProps[]
+}
+
+export const Header = ({icon, title, menuItems}: HeaderProps) => {
+
+	// Scroll watcher for opacity
+	let [scrolledTop, setScrolledTop] = useState(true);
+	useEffect(() => {
+		setScrolledTop(window.scrollY < 50);
+		addEventListener("scroll", (event) => {
+			setScrolledTop(window.scrollY < 50);
+		});
+	}, [])
+
+	return (
+			<Box className={`${styles.header} ${scrolledTop ? styles.headerScrolled : ""}`} style={{
+				display: "flex",
+				justifyContent: "space-between",
+				padding: "1rem",
+				position: "fixed",
+				zIndex: "1",
+				width: "100%",
+				overflow: "hidden"
+			}}>
+				<Box display={"flex"} flexGrow={1}>
+					<Link href={"/"}>
+						<Box style={{display: "flex"}}>
+							{icon}
+							<Typography variant={"h5"} pl={1} my={"auto"}>{title}</Typography>
+						</Box>
+					</Link>
+					<Box sx={{display: {xs: "flex", "md": "none"}}} flexGrow={1}>
+						<BurgerMenu menuItems={menuItems}/>
+					</Box>
+					<Box sx={{display: {xs: "none", "md": "flex"}}} flexGrow={1}>
+						<DesktopMenu menuItems={menuItems}/>
+					</Box>
+				</Box>
+			</Box>
+	)
+}

package/src/layout/Header/HeaderDropdown.tsx

@@ -0,0 +1,71 @@
+'use client'
+
+import React, { ReactNode, useState } from "react";
+import {Typography, ListItemButton, ListItemIcon, Collapse} from "@mui/material";
+import Link, {LinkProps} from "next/link";
+import { ExpandLess, ExpandMore} from "@mui/icons-material";
+
+interface HeaderLinkProps extends LinkProps {
+    value: string
+    icon: ReactNode
+    target?: string
+    onClick: () => void
+}
+  
+export const HeaderLink = ({ value, href, icon, target, onClick }: HeaderLinkProps) => {
+    return (
+        <ListItemButton
+        onClick={onClick}>
+            <ListItemIcon sx={{ marginRight: "-0.8em", fontSize:"1.5em", marginLeft: "1em" }}>
+                {icon}
+            </ListItemIcon>
+            <Typography variant="h6">
+                <Link href={href} target={target}>
+                    {value}
+                </Link>
+            </Typography>
+        </ListItemButton>
+    )
+}
+
+export const HeaderMainLink = ({ value, href, icon, target, onClick }: HeaderLinkProps) => {
+    return (
+        <ListItemButton
+          onClick={onClick}
+        >
+            <ListItemIcon sx={{ marginRight: "-0.8em", fontSize: "2em" }}>
+                {icon}
+            </ListItemIcon>
+            <Typography variant="h5">
+                <Link href={href} target={target}>
+                    {value}
+            </Link>
+            </Typography>
+        </ListItemButton>
+    )
+}
+
+export const HeaderDropdown = ({ value, children, icon }: { value: string, children: ReactNode, icon: ReactNode}) => {
+    const [openState, setOpenState] = useState(false);
+    const handleClick = () => {
+        setOpenState(!openState);
+    };
+
+    return (
+        <>
+            <ListItemButton onClick={handleClick}>
+                <ListItemIcon sx={{ marginRight: "-0.8em", fontSize: "2em"  }}>
+                    {icon}
+                </ListItemIcon>
+                <Typography variant="h5">
+                    {value}
+                </Typography>
+                {openState ? <ExpandLess sx={{ marginLeft: "1em" }} /> : <ExpandMore sx={{ marginLeft: "0.5em" }} />}
+            </ListItemButton>
+            <Collapse in={openState} timeout="auto" unmountOnExit>
+                {children}
+            </Collapse>
+        </>
+    )
+}
+

package/src/layout/Header/HeaderItem.tsx

@@ -0,0 +1,110 @@
+import React, {useRef, useEffect, useState} from "react";
+import Link from "next/link";
+import {Box, Menu, MenuItem, Tooltip, Typography} from "@mui/material";
+import {ArrowDropDown, ArrowDropUp} from "@mui/icons-material";
+
+import type {HeaderLinkItem, HeaderMenuProps, MenuProps} from "./index";
+
+export const HeaderItem = ({...props}: HeaderMenuProps | HeaderLinkItem) => {
+	if("menuItems" in props) {
+		return <HeaderMenu {...props} />
+	} else if(props.type == "text") {
+		return <HeaderLink {...props} />
+	} else {
+		return <HeaderIconLink {...props} />
+	}
+}
+
+const HeaderMenu = ({icon, value, open, setAnchor, menuItems}: HeaderMenuProps) => {
+
+	const anchorRef = useRef<HTMLElement>(null)
+
+	// Effect to perform actions when ref changes
+	const [refChange, setRefChange] = useState<number>(0); // State to track ref changes
+	useEffect(() => {
+		setRefChange(refChange + 1);
+	}, [anchorRef.current]); // Dependency on refChange state to trigger effect
+
+	return (
+			<>
+				<Box style={{display: "flex"}}
+							ref={anchorRef}
+							aria-controls={open ? `${value}-menu` : undefined}
+							aria-haspopup="true"
+							aria-expanded={open ? 'true' : undefined}
+							onClick={e => setAnchor(anchorRef.current)}
+				>
+					<Typography id={`${value}-header`} display={"flex"} my={"auto"} pl={2} lineHeight={1} variant={"h6"}>
+						<Box display={"inline"} my={"auto"}>
+							{value}
+						</Box>
+						{open ?
+								<ArrowDropUp /> :
+								<ArrowDropDown />
+						}
+					</Typography>
+				</Box>
+				<Menu
+						anchorEl={anchorRef.current}
+						open={open}
+						onClose={() => setAnchor(null)}
+						sx={{mt: 2}}
+						anchorOrigin={{
+							vertical: 'bottom',
+							horizontal: 'left',
+						}}
+						transformOrigin={{
+							vertical: 'top',
+							horizontal: 'left',
+						}}
+				>
+					{menuItems.map((item) => (
+							<Link key={item.value} {...item} style={{textDecoration: "none", ...item.style}}>
+								<MenuItem onClick={e => setAnchor(anchorRef.current)}>{item.value}</MenuItem>
+							</Link>
+					))}
+				</Menu>
+			</>
+	)
+}
+
+const HeaderLink = ({...props} : HeaderLinkItem) => {
+	return (
+			<Link {...props} style={{display: "flex", textDecoration: "none", ...props.style}} >
+				<Typography my={"auto"} pl={2} lineHeight={1} variant={"h6"}>
+					{props.value}
+				</Typography>
+			</Link>
+	)
+}
+
+const HeaderIconLink = ({...props} : HeaderLinkItem) => {
+	return (
+			<Link href={props.href} target={props.target}>
+				<Tooltip title={props.value}>
+					<Box
+							sx={{
+								":hover": {
+									transform: "scale(1.15)",
+									transition: "transform 0.3s",
+								},
+								marginTop: "2px"
+							}}
+					>
+						{
+							React.cloneElement(props.icon, {
+								fontSize: "large",
+								sx:{
+									":hover": {
+										transform: "scale(1.15)",
+										transition: "transform 0.3s",
+									},
+									marginTop: "2px"
+								}
+							})
+						}
+					</Box>
+				</Tooltip>
+			</Link>
+	)
+}

package/src/layout/Header/ImageIcon.tsx

@@ -0,0 +1 @@
+export const ImageIcon = ({ src, alt }: { src: string, alt: string }) => <img src={src} alt={alt} style={{ width: '24px', height: '24px' }} />;

package/src/layout/Header/index.d.ts

@@ -0,0 +1,21 @@
+import {ReactNode} from "react";
+import {LinkProps} from "next/link";
+
+export type * from "./Header"
+
+export type MenuProps = Omit<HeaderMenuProps, "setAnchor" | "anchorEl"> | HeaderLinkItem
+
+interface HeaderMenuProps {
+	icon: ReactNode
+	value: string
+	anchorEl: HTMLElement | null
+	setAnchor: (x: HTMLElement | null) => void
+	menuItems: HeaderLinkItem[]
+}
+
+interface HeaderLinkItem extends LinkProps {
+	icon: ReactNode
+	value: string
+	target?: "_self" | "_blank"
+	type?: "icon" | "text"
+}

package/src/layout/Header/index.tsx

@@ -0,0 +1,5 @@
+export * from './Header';
+export * from './HeaderItem';
+export * from "./BurgerMenu"
+export * from "./ImageIcon"
+export * from "./DesktopMenu"

package/src/layout/index.ts

@@ -0,0 +1 @@
+export * from './Header/index';