@evenicanpm/ui 1.3.0

package/README.md

@@ -0,0 +1,3 @@
+# Dependencies
+
+- should only depend on MUI and React

package/package.json

@@ -0,0 +1,36 @@
+{
+	"name": "@evenicanpm/ui",
+	"version": "1.3.0",
+	"description": "Common and re-usable UI elements for e4 products.",
+	"license": "ISC",
+	"author": "",
+	"type": "module",
+	"exports": {
+		".": "./src/index.ts",
+		"./components": "./src/components/index.ts"
+	},
+	"main": "./src/index.ts",
+	"module": "./src/index.ts",
+	"scripts": {
+		"test": "echo \"Error: no test specified\" && exit 1"
+	},
+	"devDependencies": {
+		"@emotion/react": "^11.11.3",
+		"@emotion/styled": "^11.11.0",
+		"@mui/icons-material": "^6.1.7",
+		"@mui/material": "^6.1.7",
+		"@types/react": "^18.3.24",
+		"react": "^19.0.0",
+		"typescript": "^5.6.3"
+	},
+	"peerDependencies": {
+		"@emotion/react": "^11.11.3",
+		"@emotion/styled": "^11.11.0",
+		"@mui/icons-material": "^6.1.7",
+		"@mui/material": "^6.1.7",
+		"@types/react": "^18.3.24",
+		"react": "^19.0.0",
+		"typescript": "^5.6.3"
+	},
+	"gitHead": "074f33378006dfc21ceb49456806a18dbb6e91ad"
+}

package/src/components/button/button.tsx

@@ -0,0 +1,11 @@
+import type { ButtonProps } from "@mui/material";
+import { StyledButton } from "./styles";
+
+/**
+ * Very simple button wrapper to extend later
+ */
+const Button = (props: ButtonProps) => {
+	return <StyledButton {...props} />;
+};
+
+export { Button };

package/src/components/button/index.tsx

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

package/src/components/button/styles/index.ts

@@ -0,0 +1,11 @@
+import { Button as MuiButton } from "@mui/material";
+import styled from "@mui/material/styles/styled";
+
+export const StyledButton = styled(MuiButton)(({ theme }) => ({
+	backgroundColor: theme.palette.secondary.main,
+	color: theme.palette.common.white,
+
+	"&:hover": {
+		backgroundColor: theme.palette.grey[900],
+	},
+}));

package/src/components/flex-box/flex-between.tsx

@@ -0,0 +1,14 @@
+import Box, { type BoxProps } from "@mui/material/Box";
+
+export default function FlexBetween({ children, ...props }: BoxProps) {
+	return (
+		<Box
+			display="flex"
+			alignItems="center"
+			justifyContent="space-between"
+			{...props}
+		>
+			{children}
+		</Box>
+	);
+}

package/src/components/flex-box/flex-box.tsx

@@ -0,0 +1,29 @@
+import Box, { type BoxProps } from "@mui/material/Box";
+
+// /**
+//  * Convenience utility wrapper around css Flex style
+//  * to quickly apply flexbox styles to an mui box
+//  */
+// export default function FlexBox({ children, ...props }: BoxProps) {
+// 	return (
+// 		<Box display="flex" {...props}>
+// 			{children}
+// 		</Box>
+// 	);
+// }
+
+export default function FlexBox({ children, sx, ...props }: BoxProps) {
+	return (
+		<Box
+			{...props}
+			display="flex"
+			sx={{
+				flexDirection: { xs: "column", sm: "row" },
+				gap: { xs: 1, sm: 2 },
+				...sx,
+			}}
+		>
+			{children}
+		</Box>
+	);
+}

package/src/components/flex-box/flex-row-center.tsx

@@ -0,0 +1,9 @@
+import Box, { type BoxProps } from "@mui/material/Box";
+
+export default function FlexRowCenter({ children, ...props }: BoxProps) {
+	return (
+		<Box display="flex" justifyContent="center" alignItems="center" {...props}>
+			{children}
+		</Box>
+	);
+}

package/src/components/flex-box/index.ts

@@ -0,0 +1,5 @@
+import FlexBetween from "./flex-between";
+import FlexBox from "./flex-box";
+import FlexRowCenter from "./flex-row-center";
+
+export { FlexBox, FlexBetween, FlexRowCenter };

package/src/components/footer/footer.tsx

@@ -0,0 +1,96 @@
+"use client";
+
+import clsx from "clsx";
+import type { ReactNode } from "react";
+
+// GLOBAL CUSTOM COMPONENTS
+import { FlexBox } from "../flex-box";
+import { SiteLogo } from "../site-logo";
+
+// STYLED COMPONENTS
+import {
+	FooterContent,
+	FooterWrapper,
+	NavColumn,
+	NavGrid,
+	NavHeading,
+	NavItem,
+	StyledContainer,
+} from "./styles";
+
+type FooterRootProps = {
+	className?: string;
+	children: ReactNode;
+};
+
+type FooterLogoProps = {
+	companyName: string;
+	imgSrc: string;
+	imgHeight: number;
+};
+
+export type FooterNavItem = {
+	label: string;
+	href?: string;
+};
+
+export type FooterNavSection = {
+	title: string;
+	items: FooterNavItem[];
+};
+
+/**
+ * Footer Wrapper Component
+ */
+const Footer = ({ className, children }: FooterRootProps) => {
+	return (
+		<FooterWrapper className={clsx(className)}>
+			<StyledContainer>
+				<FooterContent>{children}</FooterContent>
+			</StyledContainer>
+		</FooterWrapper>
+	);
+};
+
+/**
+ * Left slot – Logo
+ */
+Footer.Logo = ({ companyName, imgSrc, imgHeight }: FooterLogoProps) => {
+	return (
+		<FlexBox alignItems="flex-start">
+			<SiteLogo
+				companyName={companyName}
+				imgSrc={imgSrc}
+				imgHeight={imgHeight}
+			/>
+		</FlexBox>
+	);
+};
+
+/**
+ * Right slot – Navigation
+ */
+Footer.Nav = ({ sections }: { sections: FooterNavSection[] }) => {
+	return (
+		<NavGrid>
+			{sections.map((section) => (
+				<NavColumn key={section.title}>
+					<NavHeading>{section.title}</NavHeading>
+
+					{section.items.map((item) => (
+						<NavItem
+							key={item.label}
+							href={item.href}
+							target="_blank"
+							rel="noopener noreferrer"
+						>
+							{item.label}
+						</NavItem>
+					))}
+				</NavColumn>
+			))}
+		</NavGrid>
+	);
+};
+
+export { Footer };

package/src/components/footer/index.ts

@@ -0,0 +1 @@
+export { Footer } from "./footer";

package/src/components/footer/styles/index.ts

@@ -0,0 +1,58 @@
+import Container from "@mui/material/Container";
+import styled from "@mui/material/styles/styled";
+
+export const FooterWrapper = styled("footer")(({ theme }) => ({
+	width: "100%",
+	borderTop: `1px solid ${theme.palette.secondary.main}`,
+	backgroundColor: theme.palette.background.paper,
+	paddingTop: theme.spacing(6),
+	paddingBottom: theme.spacing(6),
+}));
+
+export const StyledContainer = styled(Container)(({ theme }) => ({
+	display: "flex",
+	justifyContent: "center",
+	paddingTop: theme.spacing(6),
+	paddingBottom: theme.spacing(6),
+}));
+
+export const FooterContent = styled("div")(({ theme }) => ({
+	display: "flex",
+	alignItems: "flex-start",
+	columnGap: theme.spacing(4),
+	maxWidth: theme.breakpoints.values.lg,
+}));
+
+export const NavColumn = styled("div")(({ theme }) => ({
+	display: "flex",
+	flexDirection: "column",
+	rowGap: theme.spacing(1.5),
+}));
+
+export const NavHeading = styled("div")(({ theme }) => ({
+	fontWeight: 600,
+	fontSize: 16,
+	letterSpacing: "0.08em",
+	color: theme.palette.secondary.main,
+	textTransform: "uppercase",
+}));
+
+export const NavItem = styled("a")(({ theme }) => ({
+	fontSize: 14,
+	color: theme.palette.text.secondary,
+	textDecoration: "none",
+	cursor: "pointer",
+
+	"&:hover": {
+		color: theme.palette.text.primary,
+	},
+}));
+
+export const NavGrid = styled("div")(({ theme }) => ({
+	display: "grid",
+	gridTemplateColumns: "repeat(2, minmax(160px, 1fr))",
+	gap: theme.spacing(3, 4),
+	[theme.breakpoints.down("md")]: {
+		gridTemplateColumns: "1fr",
+	},
+}));

package/src/components/header/header.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import clsx from "clsx";
+import type { ReactNode } from "react";
+import { FlexBox } from "../flex-box";
+import { SiteLogo } from "../site-logo";
+import { HeaderWrapper, StyledContainer } from "./styles/index";
+
+type HeaderRootProps = {
+	className?: string;
+	children: ReactNode;
+};
+
+type HeaderLogoProps = {
+	companyName: string;
+	imgSrc: string;
+	imgHeight: number;
+};
+
+/**
+ * Header Wrapper Component. Has a logo and two slots to insert content.
+ *
+ */
+const Header = ({ className, children }: HeaderRootProps) => {
+	return (
+		<HeaderWrapper className={clsx(className)}>
+			<StyledContainer>{children}</StyledContainer>
+		</HeaderWrapper>
+	);
+};
+
+Header.MidSlot = ({ children }: { children: ReactNode }) => {
+	return (
+		<FlexBox minWidth={100} alignItems="center">
+			{children}
+		</FlexBox>
+	);
+};
+
+Header.Logo = ({ companyName, imgSrc, imgHeight }: HeaderLogoProps) => {
+	return (
+		<SiteLogo companyName={companyName} imgSrc={imgSrc} imgHeight={imgHeight} />
+	);
+};
+
+Header.RightSlot = ({ children }: { children: ReactNode }) => {
+	return <>{children}</>;
+};
+
+export { Header };

package/src/components/header/index.ts

@@ -0,0 +1 @@
+export { Header } from "./header";

package/src/components/header/styles/index.ts

@@ -0,0 +1,25 @@
+// CONSTANT VARIABLES
+
+import Container from "@mui/material/Container";
+import styled from "@mui/material/styles/styled";
+import { layoutConstant } from "../../../utils";
+
+export const HeaderWrapper = styled("div")(({ theme }) => ({
+	zIndex: 3,
+	position: "relative",
+	height: layoutConstant.headerHeight,
+	transition: "height 250ms ease-in-out",
+	background: theme.palette.common.white,
+	// borderBottom: `1px solid ${theme.palette.grey[200]}`,
+	[theme.breakpoints.down("sm")]: {
+		height: layoutConstant.mobileHeaderHeight,
+	},
+}));
+
+export const StyledContainer = styled(Container)({
+	gap: 2,
+	height: "100%",
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "space-between",
+});

package/src/components/index.ts

@@ -0,0 +1,12 @@
+export * from "./button";
+export * from "./flex-box";
+export * from "./footer";
+export * from "./header";
+export * from "./nav-bar";
+export * from "./nav-bar";
+export * from "./responsive-pagination";
+export * from "./search-input";
+export * from "./site-logo";
+export * from "./sticky";
+export * from "./typography";
+export * from "./user";

package/src/components/nav-bar/index.ts

@@ -0,0 +1 @@
+export { default as NavBar } from "./nav-bar";

package/src/components/nav-bar/nav-bar.tsx

@@ -0,0 +1,98 @@
+"use client";
+
+import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
+import MenuIcon from "@mui/icons-material/Menu";
+import { Box, IconButton, Menu, MenuItem } from "@mui/material";
+import { useState } from "react";
+import NavItem from "./nav-item";
+import { DesktopNav, MobileOnly, StyledAppBar, StyledToolbar } from "./styles";
+
+export interface NavItemConfig {
+	label: string;
+	href: string;
+	children?: NavItemConfig[];
+}
+
+interface NavBarProps {
+	items: NavItemConfig[];
+}
+
+const NavBar = ({ items }: NavBarProps) => {
+	const [activeMenu, setActiveMenu] = useState<string | null>(null); // desktop active menu
+	const [mobileAnchor, setMobileAnchor] = useState<HTMLElement | null>(null);
+	const [mobileOpenItem, setMobileOpenItem] = useState<string | null>(null); // mobile open dropdown
+
+	return (
+		<StyledAppBar position="static" elevation={0}>
+			<StyledToolbar>
+				{/* ---------------- MOBILE MENU ---------------- */}
+				<MobileOnly>
+					<IconButton onClick={(e) => setMobileAnchor(e.currentTarget)}>
+						<MenuIcon />
+					</IconButton>
+
+					<Menu
+						anchorEl={mobileAnchor}
+						open={Boolean(mobileAnchor)}
+						onClose={() => {
+							setMobileAnchor(null);
+							setMobileOpenItem(null);
+						}}
+					>
+						{items.map((item) => (
+							<Box key={item.label}>
+								<MenuItem
+									onClick={() => {
+										if (item.children) {
+											// toggle dropdown
+											setMobileOpenItem(
+												mobileOpenItem === item.label ? null : item.label,
+											);
+										} else {
+											setMobileAnchor(null);
+											window.open(item.href, "_blank");
+										}
+									}}
+								>
+									{item.label}
+									{item.children && <ArrowDropDownIcon />}
+								</MenuItem>
+
+								{/* render child links */}
+								{item.children &&
+									mobileOpenItem === item.label &&
+									item.children.map((child) => (
+										<MenuItem
+											key={child.label}
+											sx={{ pl: 4 }}
+											onClick={() => {
+												setMobileAnchor(null);
+												window.open(child.href, "_blank");
+											}}
+										>
+											{child.label}
+										</MenuItem>
+									))}
+							</Box>
+						))}
+					</Menu>
+				</MobileOnly>
+
+				{/* ---------------- DESKTOP MENU ---------------- */}
+				<DesktopNav>
+					{items.map((item) => (
+						<NavItem
+							key={item.label}
+							item={item}
+							isOpen={activeMenu === item.label}
+							onOpen={(label) => setActiveMenu(label)}
+							onClose={() => setActiveMenu(null)}
+						/>
+					))}
+				</DesktopNav>
+			</StyledToolbar>
+		</StyledAppBar>
+	);
+};
+
+export default NavBar;

package/src/components/nav-bar/nav-item.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
+import { Box, MenuItem } from "@mui/material";
+import { type FC, type MouseEvent, useState } from "react";
+import type { NavItemConfig } from "./nav-bar";
+import { NavButton, StyledMenu } from "./styles";
+
+interface NavItemProps {
+	item: NavItemConfig;
+	isOpen: boolean;
+	onOpen: (label: string) => void;
+	onClose: () => void;
+}
+
+const NavItem: FC<NavItemProps> = ({ item, isOpen, onOpen, onClose }) => {
+	const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
+
+	const handleMouseEnter = (e: MouseEvent<HTMLElement>) => {
+		if (!item.children) return;
+		setAnchorEl(e.currentTarget);
+		onOpen(item.label); // set active menu immediately
+	};
+
+	const handleMouseLeave = () => {
+		setAnchorEl(null);
+		onClose();
+	};
+
+	return (
+		<Box onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
+			<NavButton
+				component="a"
+				href={item.href}
+				target="_blank"
+				rel="noopener noreferrer"
+			>
+				{item.label}
+				{item.children && <ArrowDropDownIcon />}
+			</NavButton>
+
+			{item.children && (
+				<StyledMenu
+					anchorEl={anchorEl}
+					open={isOpen}
+					onClose={handleMouseLeave}
+					MenuListProps={{
+						onMouseEnter: () => onOpen(item.label),
+						onMouseLeave: handleMouseLeave,
+					}}
+					anchorOrigin={{ vertical: "bottom", horizontal: "center" }}
+					transformOrigin={{ vertical: "top", horizontal: "center" }}
+				>
+					{item.children.map((child) => (
+						<MenuItem
+							key={child.label}
+							component="a"
+							href={child.href}
+							target="_blank"
+							rel="noopener noreferrer"
+							onClick={handleMouseLeave}
+						>
+							{child.label}
+						</MenuItem>
+					))}
+				</StyledMenu>
+			)}
+		</Box>
+	);
+};
+
+export default NavItem;

package/src/components/nav-bar/styles/index.ts

@@ -0,0 +1,65 @@
+import {
+	AppBar,
+	Box,
+	Button,
+	type ButtonProps,
+	Menu,
+	Toolbar,
+} from "@mui/material";
+import { styled } from "@mui/material/styles";
+import type React from "react";
+
+export const StyledAppBar = styled(AppBar)(({ theme }) => ({
+	backgroundColor: theme.palette.primary.main,
+}));
+
+export const StyledToolbar = styled(Toolbar)({
+	position: "relative",
+	display: "flex",
+	justifyContent: "center",
+});
+
+export const DesktopNav = styled(Box)(({ theme }) => ({
+	display: "none",
+	gap: theme.spacing(3),
+
+	[theme.breakpoints.up("md")]: {
+		display: "flex",
+		alignItems: "center",
+	},
+}));
+
+export const MobileOnly = styled(Box)(({ theme }) => ({
+	position: "absolute",
+	left: theme.spacing(1),
+
+	display: "flex",
+	alignItems: "center",
+
+	[theme.breakpoints.up("md")]: {
+		display: "none",
+	},
+}));
+
+export const NavButton = styled(Button)<
+	ButtonProps & React.AnchorHTMLAttributes<HTMLAnchorElement>
+>(({ theme }) => ({
+	display: "flex",
+	alignItems: "center",
+	gap: theme.spacing(0.5),
+	padding: theme.spacing(1.2, 2.5),
+	color: theme.palette.secondary.main,
+	fontWeight: 500,
+	textTransform: "none",
+
+	"&:hover": {
+		backgroundColor: theme.palette.primary.light,
+	},
+}));
+
+export const StyledMenu = styled(Menu)(({ theme }) => ({
+	"& .MuiPaper-root": {
+		marginTop: theme.spacing(1),
+		minWidth: 180,
+	},
+}));

package/src/components/responsive-pagination/index.ts

@@ -0,0 +1 @@
+export { ResponsiveTablePagination } from "./responsive-pagination";

package/src/components/responsive-pagination/responsive-pagination.tsx

@@ -0,0 +1,60 @@
+import {
+	type SxProps,
+	TablePagination,
+	type TablePaginationProps,
+	type Theme,
+} from "@mui/material";
+
+type Props = TablePaginationProps & {
+	sx?: SxProps<Theme>;
+};
+
+const responsivePagination: SxProps<Theme> = {
+	"& .MuiTablePagination-toolbar": {
+		display: { xs: "grid", sm: "flex" },
+		gridTemplateColumns: { xs: "auto auto", sm: "unset" },
+		gridTemplateRows: { xs: "auto auto", sm: "unset" },
+		justifyContent: { xs: "center", sm: "unset" },
+		alignItems: "center",
+		width: "100%",
+	},
+
+	"& .MuiTablePagination-selectLabel": {
+		gridColumn: { xs: "1 / 2", sm: "auto" },
+		gridRow: { xs: "1 / 2", sm: "auto" },
+		whiteSpace: "nowrap",
+		justifySelf: { xs: "center", sm: "auto" },
+		textAlign: "center",
+	},
+
+	"& .MuiTablePagination-input": {
+		gridColumn: { xs: "2 / 3", sm: "auto" },
+		gridRow: { xs: "1 / 2", sm: "auto" },
+		justifySelf: { xs: "start", sm: "auto" },
+		display: "flex",
+		justifyContent: "center",
+		alignItems: "center",
+	},
+
+	"& .MuiTablePagination-displayedRows": {
+		gridColumn: { xs: "1 / 2", sm: "auto" },
+		gridRow: { xs: "2 / 3", sm: "auto" },
+		whiteSpace: "nowrap",
+		justifySelf: { xs: "center", sm: "auto" },
+		textAlign: "center",
+	},
+
+	"& .MuiTablePagination-actions": {
+		gridColumn: { xs: "2 / 3", sm: "auto" },
+		gridRow: { xs: "2 / 3", sm: "auto" },
+		marginLeft: { xs: "0 !important", sm: "auto" },
+		justifySelf: { xs: "start", sm: "auto" },
+		display: "flex",
+		justifyContent: "center",
+		alignItems: "center",
+	},
+};
+
+export function ResponsiveTablePagination(props: Props) {
+	return <TablePagination {...props} sx={responsivePagination} />;
+}

package/src/components/search-input/index.ts

@@ -0,0 +1 @@
+export * from "./search-input";