@evenicanpm/ui 1.3.0

package/src/components/search-input/search-input.tsx

@@ -0,0 +1,28 @@
+// MUI ICON COMPONENT
+import Search from "@mui/icons-material/Search";
+import InputBase, { type InputBaseProps } from "@mui/material/InputBase";
+import styled from "@mui/material/styles/styled";
+
+// STYLED COMPONENT
+const StyledInputBase = styled(InputBase)(({ theme }) => ({
+	fontSize: 14,
+	width: "100%",
+	height: "100%",
+	//maxWidth: 350,
+	fontWeight: 500,
+	padding: "0 1rem",
+	borderRadius: "8px",
+	color: theme.palette.grey[600],
+	backgroundColor: theme.palette.background.paper,
+	[theme.breakpoints.down("sm")]: { maxWidth: "100%" },
+	"::placeholder": { color: theme.palette.text.disabled },
+}));
+
+export function SearchInput(props: InputBaseProps) {
+	return (
+		<StyledInputBase
+			startAdornment={<Search sx={{ fontSize: 19, mr: 1 }} />}
+			{...props}
+		/>
+	);
+}

package/src/components/site-logo/index.tsx

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

package/src/components/site-logo/site-logo.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import { LogoImage, LogoText, LogoWrapper } from "./styles";
+
+//import Link from "next/link";
+
+interface SiteLogoProps {
+	companyName?: string;
+	imgSrc?: string;
+	imgHeight?: number;
+}
+
+const SiteLogo: React.FC<SiteLogoProps> = ({
+	companyName,
+	imgSrc,
+	imgHeight,
+}) => {
+	return (
+		<LogoWrapper href="/">
+			<LogoImage
+				src={`${imgSrc}`}
+				imgHeight={imgHeight}
+				alt={`${companyName ?? "Logo"} Logo`}
+			/>
+			{companyName && <LogoText>{companyName}</LogoText>}
+		</LogoWrapper>
+	);
+};
+
+export { SiteLogo };

package/src/components/site-logo/styles/index.ts

@@ -0,0 +1,34 @@
+import styled from "@mui/material/styles/styled";
+import Typography from "@mui/material/Typography";
+
+interface LogoImageProps {
+	imgHeight?: number;
+}
+
+/* Styled component for Logo */
+export const LogoWrapper = styled("a")(({ theme }) => ({
+	display: "flex",
+	alignItems: "center",
+	gap: theme.spacing(1.5),
+	textDecoration: "none",
+}));
+
+export const LogoText = styled(Typography)(({ theme }) => ({
+	...theme.typography.h6,
+	color: theme.palette.text.primary,
+
+	[theme.breakpoints.down("sm")]: {
+		display: "none",
+	},
+}));
+
+export const LogoImage = styled("img", {
+	shouldForwardProp: (prop) => prop !== "imgHeight",
+})<LogoImageProps>(({ imgHeight = 54, theme }) => ({
+	display: "block",
+	height: imgHeight,
+	width: "auto",
+	[theme.breakpoints.down("sm")]: {
+		height: imgHeight * 0.67, // smaller on mobile
+	},
+}));

package/src/components/sticky/Sticky.stories.tsx

@@ -0,0 +1,89 @@
+/* import { Box, Paper, Typography } from "@mui/material";
+import type { Meta, StoryObj } from "@storybook/react";
+import Sticky from "./index";
+
+const meta: Meta<typeof Sticky> = {
+	title: "Utility/Sticky",
+	component: Sticky,
+	parameters: {
+		layout: "fullscreen",
+	},
+};
+export default meta;
+type Story = StoryObj<typeof Sticky>;
+
+// helper scrollable content
+const ScrollContent = () => (
+	<Box sx={{ height: "1500px", p: 2, bgcolor: "grey.100" }}>
+		<Typography>Scroll down to see Sticky in action.</Typography>
+	</Box>
+);
+
+export const Basic: Story = {
+	args: {
+		fixedOn: 100,
+	},
+	render: (args) => (
+		<Box>
+			<Sticky {...args}>
+				<Paper
+					sx={{
+						p: 2,
+						bgcolor: "primary.main",
+						color: "white",
+						textAlign: "center",
+					}}
+				>
+					<Typography>Basic Sticky Header</Typography>
+				</Paper>
+			</Sticky>
+			<ScrollContent />
+		</Box>
+	),
+};
+
+export const WithScrollDistance: Story = {
+	args: {
+		fixedOn: 100,
+		scrollDistance: 50,
+	},
+	render: (args) => (
+		<Box>
+			<Sticky {...args}>
+				<Paper
+					sx={{
+						p: 2,
+						bgcolor: "secondary.main",
+						color: "white",
+						textAlign: "center",
+					}}
+				>
+					<Typography>Becomes sticky at 150px (100 + 50)</Typography>
+				</Paper>
+			</Sticky>
+			<ScrollContent />
+		</Box>
+	),
+};
+
+export const Sidebar: Story = {
+	args: {
+		fixedOn: 200,
+	},
+	render: (args) => (
+		<Box sx={{ display: "flex", minHeight: "150vh" }}>
+			<Box sx={{ flex: 1, p: 2 }}>
+				<Typography>Main content goes here...</Typography>
+				<ScrollContent />
+			</Box>
+			<Box sx={{ width: 250, p: 2 }}>
+				<Sticky {...args}>
+					<Paper sx={{ p: 2, bgcolor: "info.main", color: "white" }}>
+						<Typography>Sticky Sidebar</Typography>
+					</Paper>
+				</Sticky>
+			</Box>
+		</Box>
+	),
+};
+ */

package/src/components/sticky/index.ts

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

package/src/components/sticky/sticky.tsx

@@ -0,0 +1,67 @@
+import clsx from "clsx";
+import {
+	type PropsWithChildren,
+	useCallback,
+	useEffect,
+	useRef,
+	useState,
+} from "react";
+import { StyledBox } from "./styles";
+
+// ============================================================
+interface Props extends PropsWithChildren {
+	fixedOn: number;
+	scrollDistance?: number;
+	onSticky?: (isFixed: boolean) => void;
+}
+
+// ============================================================
+
+export function Sticky({
+	fixedOn,
+	onSticky,
+	scrollDistance = 0,
+	children,
+}: Props) {
+	const [fixed, setFixed] = useState(false);
+	const elementRef = useRef<HTMLDivElement>(null);
+	const [height, setHeight] = useState(0);
+
+	const scrollListener = useCallback(() => {
+		if (!window) return;
+
+		const isFixed = window.scrollY >= fixedOn + scrollDistance;
+		setFixed(isFixed);
+	}, [fixedOn, scrollDistance]);
+
+	useEffect(() => {
+		if (!window) return;
+
+		window.addEventListener("scroll", scrollListener);
+		window.addEventListener("resize", scrollListener);
+
+		return () => {
+			window.removeEventListener("scroll", scrollListener);
+			window.removeEventListener("resize", scrollListener);
+		};
+	}, [scrollListener]);
+
+	useEffect(() => {
+		if (onSticky) onSticky(fixed);
+	}, [fixed, onSticky]);
+
+	useEffect(() => {
+		if (elementRef.current) {
+			setHeight(elementRef.current.offsetHeight);
+			scrollListener();
+		}
+	}, [scrollListener]);
+
+	return (
+		<StyledBox fixedOn={fixedOn} componentHeight={height} fixed={fixed}>
+			<div className={clsx({ hold: !fixed, fixed: fixed })} ref={elementRef}>
+				{children}
+			</div>
+		</StyledBox>
+	);
+}

package/src/components/sticky/styles.ts

@@ -0,0 +1,38 @@
+import { keyframes, styled } from "@mui/material/styles";
+
+// ==============================================================
+interface Props {
+	fixed?: boolean;
+	fixedOn?: number;
+	componentHeight?: number;
+}
+// ==============================================================
+
+const slideDown = keyframes`
+    from {transform: translateY(-200%)}
+    to {transform: translateY(0)}
+`;
+
+export const StyledBox = styled("div", {
+	shouldForwardProp: (prop) =>
+		prop !== "componentHeight" && prop !== "fixed" && prop !== "fixedOn",
+})<Props>(({ theme, componentHeight, fixedOn, fixed }) => ({
+	paddingTop: fixed ? componentHeight : 0,
+
+	"& .hold": {
+		zIndex: 5,
+		boxShadow: "none",
+		position: "relative",
+	},
+
+	"& .fixed": {
+		left: 0,
+		right: 0,
+		zIndex: 1500,
+		position: "fixed",
+		top: `${fixedOn}px`,
+		boxShadow: theme.shadows[2],
+		transition: "all 350ms ease-in-out",
+		animation: `${slideDown} 400ms ${theme.transitions.easing.easeInOut}`,
+	},
+}));

package/src/components/typography/index.ts

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

package/src/components/typography/typography.tsx

@@ -0,0 +1,226 @@
+"use client";
+
+import Box, { type BoxProps } from "@mui/material/Box";
+import styled from "@mui/material/styles/styled";
+import clsx from "clsx";
+
+// ==============================================================
+type Ellipsis = { ellipsis: number };
+export interface EllipsisProps extends BoxProps {
+	ellipsis?: boolean;
+}
+// ==============================================================
+
+const StyledBox = styled(Box, {
+	shouldForwardProp: (prop) => prop !== "ellipsis",
+})<Ellipsis>(({ ellipsis }) => ({
+	...(ellipsis && {
+		overflow: "hidden",
+		whiteSpace: "nowrap",
+		textOverflow: "ellipsis",
+	}),
+}));
+
+export function H1(props: EllipsisProps) {
+	const { ellipsis, children, className, ...others } = props;
+
+	return (
+		<StyledBox
+			fontSize={30}
+			component="h1"
+			fontWeight={700}
+			ellipsis={ellipsis ? 1 : 0}
+			{...(className && { className: clsx({ [className]: true }) })}
+			{...others}
+		>
+			{children}
+		</StyledBox>
+	);
+}
+
+export function H2(props: EllipsisProps) {
+	const { ellipsis, children, className, ...others } = props;
+
+	return (
+		<StyledBox
+			fontSize={25}
+			component="h2"
+			fontWeight={700}
+			ellipsis={ellipsis ? 1 : 0}
+			{...(className && { className: clsx({ [className]: true }) })}
+			{...others}
+		>
+			{children}
+		</StyledBox>
+	);
+}
+
+export function H3(props: EllipsisProps) {
+	const { ellipsis, children, className, ...others } = props;
+
+	return (
+		<StyledBox
+			fontSize={20}
+			component="h3"
+			fontWeight={700}
+			ellipsis={ellipsis ? 1 : 0}
+			{...(className && { className: clsx({ [className]: true }) })}
+			{...others}
+		>
+			{children}
+		</StyledBox>
+	);
+}
+
+export function H4(props: EllipsisProps) {
+	const { ellipsis, children, className, ...others } = props;
+
+	return (
+		<StyledBox
+			fontSize={17}
+			component="h4"
+			fontWeight={600}
+			ellipsis={ellipsis ? 1 : 0}
+			{...(className && { className: clsx({ [className]: true }) })}
+			{...others}
+		>
+			{children}
+		</StyledBox>
+	);
+}
+
+export function H5(props: EllipsisProps) {
+	const { ellipsis, children, className, ...others } = props;
+
+	return (
+		<StyledBox
+			fontSize={16}
+			component="h5"
+			lineHeight={1}
+			fontWeight={600}
+			ellipsis={ellipsis ? 1 : 0}
+			{...(className && { className: clsx({ [className]: true }) })}
+			{...others}
+		>
+			{children}
+		</StyledBox>
+	);
+}
+
+export function H6(props: EllipsisProps) {
+	const { ellipsis, children, className, ...others } = props;
+
+	return (
+		<StyledBox
+			fontSize={14}
+			component="h6"
+			fontWeight={600}
+			ellipsis={ellipsis ? 1 : 0}
+			{...(className && { className: clsx({ [className]: true }) })}
+			{...others}
+		>
+			{children}
+		</StyledBox>
+	);
+}
+
+export function Paragraph(props: EllipsisProps) {
+	const { ellipsis, children, className, ...others } = props;
+
+	return (
+		<StyledBox
+			fontSize={14}
+			component="p"
+			fontWeight={400}
+			ellipsis={ellipsis ? 1 : 0}
+			{...(className && { className: clsx({ [className]: true }) })}
+			{...others}
+		>
+			{children}
+		</StyledBox>
+	);
+}
+
+export function Small(props: EllipsisProps) {
+	const { ellipsis = false, children, className, ...others } = props;
+
+	return (
+		<StyledBox
+			fontSize={12}
+			fontWeight={400}
+			component="small"
+			ellipsis={ellipsis ? 1 : 0}
+			{...(className && { className: clsx({ [className]: true }) })}
+			{...others}
+		>
+			{children}
+		</StyledBox>
+	);
+}
+
+export function Span(props: EllipsisProps) {
+	const { ellipsis = false, children, className, ...others } = props;
+
+	return (
+		<StyledBox
+			component="span"
+			ellipsis={ellipsis ? 1 : 0}
+			{...(className && { className: clsx({ [className]: true }) })}
+			{...others}
+		>
+			{children}
+		</StyledBox>
+	);
+}
+
+export function Tiny(props: EllipsisProps) {
+	const { ellipsis = false, children, className, ...others } = props;
+
+	return (
+		<StyledBox
+			component="small"
+			fontSize={10}
+			fontWeight={400}
+			ellipsis={ellipsis ? 1 : 0}
+			{...(className && { className: clsx({ [className]: true }) })}
+			{...others}
+		>
+			{children}
+		</StyledBox>
+	);
+}
+
+export function Display(props: EllipsisProps) {
+	const { ellipsis, children, className, ...others } = props;
+
+	return (
+		<StyledBox
+			fontSize={48}
+			component="h1"
+			fontWeight={400}
+			ellipsis={ellipsis ? 1 : 0}
+			{...(className && { className: clsx({ [className]: true }) })}
+			{...others}
+		>
+			{children}
+		</StyledBox>
+	);
+}
+
+export function Subtitle(props: EllipsisProps) {
+	const { ellipsis, children, className, ...others } = props;
+
+	return (
+		<StyledBox
+			fontSize={11}
+			component="h1"
+			fontWeight={400}
+			sx={{ opacity: 0.7 }}
+			ellipsis={ellipsis ? 1 : 0}
+			{...(className && { className: clsx({ [className]: true }) })}
+			{...others}
+		>
+			{children}
+		</StyledBox>
+	);
+}

package/src/components/user/index.ts

@@ -0,0 +1 @@
+export { default as User } from "./user";

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

@@ -0,0 +1,20 @@
+import Avatar from "@mui/material/Avatar";
+import IconButton from "@mui/material/IconButton";
+import styled from "@mui/material/styles/styled";
+
+export const UserIconButton = styled(IconButton)(({ theme }) => ({
+	padding: 4,
+	borderRadius: "50%",
+	"&:hover": {
+		backgroundColor: theme.palette.primary.light,
+	},
+}));
+
+export const UserAvatar = styled(Avatar)(({ theme }) => ({
+	width: 34,
+	height: 34,
+	fontSize: 14,
+	fontWeight: 500,
+	backgroundColor: theme.palette.primary.main,
+	color: theme.palette.secondary.main,
+}));

package/src/components/user/user.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+import { Menu, MenuItem } from "@mui/material";
+import type React from "react";
+import { useState } from "react";
+import { Button } from "../button";
+import { UserAvatar, UserIconButton } from "./styles/index";
+
+export type UserProps = {
+	user?: {
+		name: string;
+		email: string;
+		image?: string;
+	};
+	isAuthenticated: boolean;
+	isLoading: boolean;
+	onLogin: () => void;
+	onLogout: () => void;
+};
+
+const User: React.FC<UserProps> = ({
+	user,
+	isAuthenticated,
+	isLoading,
+	onLogin,
+	onLogout,
+}) => {
+	const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+	const menuOpen = Boolean(anchorEl);
+
+	const handleMenuOpen = (event: React.MouseEvent<HTMLElement>) =>
+		setAnchorEl(event.currentTarget);
+	const handleMenuClose = () => setAnchorEl(null);
+
+	if (isLoading) return null;
+
+	return isAuthenticated ? (
+		<>
+			<UserIconButton
+				onClick={handleMenuOpen}
+				style={{ padding: 4, borderRadius: "50%" }}
+			>
+				<UserAvatar alt={user?.name ?? "User"} src={user?.image ?? undefined}>
+					{user?.name?.[0]}
+				</UserAvatar>
+			</UserIconButton>
+
+			<Menu
+				anchorEl={anchorEl}
+				open={menuOpen}
+				onClose={handleMenuClose}
+				anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
+				transformOrigin={{ vertical: "top", horizontal: "right" }}
+			>
+				<MenuItem disabled>{user?.email}</MenuItem>
+				<MenuItem onClick={handleMenuClose}>Profile</MenuItem>
+				<MenuItem
+					onClick={() => {
+						handleMenuClose();
+						onLogout();
+					}}
+				>
+					Logout
+				</MenuItem>
+			</Menu>
+		</>
+	) : (
+		<Button onClick={onLogin} variant="contained">
+			Login
+		</Button>
+	);
+};
+
+export default User;

package/src/index.ts

@@ -0,0 +1,10 @@
+/**
+ * Contains re-usable react components built on top of MUI,
+ * theme code for MUI and utilities for look and feel of
+ * e4 products.
+ *
+ * @module e4 UI
+ */
+export * from "./components";
+export * from "./theme";
+export * from "./utils";