@chtc/web-components 0.0.0-1 → 0.0.0-11

package/README.md

@@ -4,3 +4,11 @@ PATh Web Components
 Key Packages
 - nextjs
 - material-ui
+
+## Creating new components
+
+### Running the dev environment
+
+```npm
+npm run storybook
+```

package/package.json

@@ -1,37 +1,38 @@
 {
   "name": "@chtc/web-components",
-  "version": "0.0.0-1",
+  "version": "0.0.0-11",
   "description": "PATh Web Components",
-  "main": "src/index.ts",
-  "types": "src/index.d.ts",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
   "scripts": {
     "test": "jest --coverage --json --outputFile=.github/tests/test-summary.json",
-    "build": "tsc",
+    "build": "tsc --build src",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "publish": "npm publish --access public",
-    "publish:increment": "npm version prerelease --no-git-tag-version && npm publish --access public"
+    "publish": "npm publish --omit=dev --access public",
+    "publish:increment": "npm version prerelease --no-git-tag-version && npm run publish"
   },
   "files": [
-    "src"
+    "dist"
   ],
   "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",
+    "@chromatic-com/storybook": "^3.2.3",
+    "@storybook/addon-essentials": "^8.4.7",
+    "@storybook/addon-interactions": "^8.4.7",
+    "@storybook/addon-links": "^8.4.7",
+    "@storybook/addon-onboarding": "^8.4.7",
+    "@storybook/addon-themes": "^8.4.7",
+    "@storybook/blocks": "^8.4.7",
+    "@storybook/nextjs": "^8.4.7",
+    "@storybook/react": "^8.4.7",
+    "@storybook/test": "^8.4.7",
     "@types/jest": "^29.5.8",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "storybook": "^8.1.11",
+    "storybook": "^8.4.7",
     "ts-jest": "^29.1.1",
     "typescript": "^5.2.2"
   },
@@ -39,6 +40,9 @@
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
     "@mui/icons-material": "^5.16.0",
-    "@mui/material": "^5.16.0"
+    "@mui/material": "^5.14.19",
+    "react-markdown": "^9.0.1",
+    "react-wrap-balancer": "^1.1.1",
+    "rehype-raw": "^7.0.0"
   }
 }

package/src/index.d.ts

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

package/src/index.ts

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

package/src/layout/Header/BurgerMenu.tsx

@@ -1,101 +0,0 @@
-'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

@@ -1,50 +0,0 @@
-'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

@@ -1,54 +0,0 @@
-'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

@@ -1,71 +0,0 @@
-'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

@@ -1,110 +0,0 @@
-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

@@ -1 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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

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

package/src/layout/index.ts

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