@evenicanpm/storefront-core 1.1.0 → 1.2.1

package/src/components-v2/side-nav/SideNav.stories.tsx

@@ -0,0 +1,116 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import SideNav from "./index";
+import {
+	Box,
+	Button,
+	Typography,
+	List,
+	ListItem,
+	ListItemText,
+} from "@mui/material";
+
+const meta: Meta<typeof SideNav> = {
+	title: "Utility/SideNav",
+	component: SideNav,
+	tags: ["autodocs"],
+	parameters: {
+		layout: "fullscreen",
+	},
+};
+export default meta;
+
+type Story = StoryObj<typeof SideNav>;
+
+// Sample menu content
+const MenuContent = () => (
+	<Box sx={{ p: 2, width: "100%" }}>
+		<Typography variant="h6" gutterBottom>
+			Navigation Menu
+		</Typography>
+		<List>
+			{["Home", "Products", "About", "Contact"].map((item) => (
+				<ListItem button key={item}>
+					<ListItemText primary={item} />
+				</ListItem>
+			))}
+		</List>
+	</Box>
+);
+
+export const Basic: Story = {
+	args: {
+		position: "left",
+		width: 280,
+		handler: (toggle) => (
+			<Button variant="contained" onClick={toggle}>
+				Open Menu
+			</Button>
+		),
+		children: <MenuContent />,
+	},
+};
+
+export const RightSide: Story = {
+	args: {
+		position: "right",
+		width: 280,
+		handler: (toggle) => (
+			<Button variant="contained" color="secondary" onClick={toggle}>
+				Open Right Menu
+			</Button>
+		),
+		children: <MenuContent />,
+	},
+};
+
+export const CustomWidth: Story = {
+	args: {
+		position: "left",
+		width: 400,
+		handler: (toggle) => (
+			<Button variant="outlined" onClick={toggle}>
+				Open Wide Menu
+			</Button>
+		),
+		children: (
+			<Box sx={{ p: 2 }}>
+				<Typography variant="h5">Custom Wide Drawer</Typography>
+				<Typography variant="body2" paragraph>
+					This SideNav has a custom width of 400px.
+				</Typography>
+				<MenuContent />
+			</Box>
+		),
+	},
+};
+
+export const ControlledState: Story = {
+	render: () => {
+		const [open, setOpen] = useState(false);
+
+		return (
+			<SideNav
+				open={open}
+				position="left"
+				width={300}
+				handler={(toggle) => (
+					<Button variant="contained" onClick={() => setOpen(true)}>
+						Open Controlled Menu
+					</Button>
+				)}
+				toggle={() => setOpen(false)}
+			>
+				<Box sx={{ p: 2 }}>
+					<Typography variant="h6">Controlled Drawer</Typography>
+					<Typography variant="body2">
+						The parent component controls open/close state.
+					</Typography>
+					<Button variant="outlined" onClick={() => setOpen(false)}>
+						Close
+					</Button>
+				</Box>
+			</SideNav>
+		);
+	},
+};

package/src/components-v2/side-nav/side-nav.tsx

@@ -4,45 +4,47 @@ import Drawer from "@mui/material/Drawer";
 import Scrollbar from "@evenicanpm/storefront-core/src/components-v2/scrollbar/index";
 
 interface Props {
-  /** Optionally manage open state from parent, default is to use local state. */
-  open?: boolean;
-  width?: number;
-  children: ReactNode;
-  toggle?: () => void;
-  position?: "left" | "right";
-  handler: (event: () => void) => ReactNode;
+	/** Optionally manage open state from parent, default is to use local state. */
+	open?: boolean;
+	width?: number;
+	children: ReactNode;
+	toggle?: () => void;
+	position?: "left" | "right";
+	handler: (event: () => void) => ReactNode;
 }
 
 export default function SideNav(props: Props) {
-  const {
-    position = "left",
-    open = false,
-    width = 280,
-    children,
-    handler,
-    toggle,
-  } = props;
-  /** If no external state, just use local. */
-  const [sideNavOpen, setSideNavOpen] = useState(open);
-  const handleToggleSideNav = () => setSideNavOpen(!sideNavOpen);
+	const {
+		position = "left",
+		open = false,
+		width = 280,
+		children,
+		handler,
+		toggle,
+	} = props;
+	/** If no external state, just use local. */
+	const [sideNavOpen, setSideNavOpen] = useState(open);
+	const handleToggleSideNav = () => setSideNavOpen(!sideNavOpen);
 
-  /** Keep external and local state in sync */
-  useEffect(() => setSideNavOpen(open), [open]);
+	/** Keep external and local state in sync */
+	useEffect(() => setSideNavOpen(open), [open]);
 
-  const handleClose = toggle || handleToggleSideNav;
+	const handleClose = toggle || handleToggleSideNav;
 
-  return (
-    <div>
-      <Drawer
-        anchor={position}
-        open={sideNavOpen}
-        onClose={handleClose}
-        slotProps={{ transition: { style: { width } } }}
-      >
-        <Scrollbar autoHide={false}>{children}</Scrollbar>
-      </Drawer>
+	return (
+		<div>
+			<Drawer
+				anchor={position}
+				open={sideNavOpen}
+				onClose={handleClose}
+				PaperProps={{
+					sx: { width },
+				}}
+			>
+				<Scrollbar autoHide={false}>{children}</Scrollbar>
+			</Drawer>
 
-      {handler(handleClose)}
-    </div>
-  );
+			{handler(handleClose)}
+		</div>
+	);
 }

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

@@ -3,15 +3,15 @@
 import Link from "next/link";
 
 interface SiteLogoProps {
-  height?: string;
+	height?: string;
 }
 
 const SiteLogo: React.FC<SiteLogoProps> = () => {
-  return (
-    <Link href="/">
-      <img src={"/logo-blue.png"} alt="E4 Logo" height={54} />
-    </Link>
-  );
+	return (
+		<Link href="/">
+			<img src={"/logo-blue.png"} alt="E4 Logo" height={54} />
+		</Link>
+	);
 };
 
 export default SiteLogo;

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

@@ -0,0 +1,88 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import Sticky from "./index";
+import { Box, Paper, Typography } from "@mui/material";
+
+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-v2/sticky/sticky.tsx

@@ -4,59 +4,59 @@ import { StyledBox } from "@evenicanpm/storefront-core/src/components-v2/sticky/
 
 // ============================================================
 interface Props {
-  fixedOn: number;
-  children: ReactNode;
-  scrollDistance?: number;
-  onSticky?: (isFixed: boolean) => void;
+	fixedOn: number;
+	children: ReactNode;
+	scrollDistance?: number;
+	onSticky?: (isFixed: boolean) => void;
 }
 
 // ============================================================
 
 export default function Sticky({
-  fixedOn,
-  children,
-  onSticky,
-  scrollDistance = 0,
+	fixedOn,
+	children,
+	onSticky,
+	scrollDistance = 0,
 }: 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>
-  );
+	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-v2/sticky/styles.ts

@@ -2,9 +2,9 @@ import { keyframes, styled } from "@mui/material/styles";
 
 // ==============================================================
 interface Props {
-  fixed?: boolean;
-  fixedOn?: number;
-  componentHeight?: number;
+	fixed?: boolean;
+	fixedOn?: number;
+	componentHeight?: number;
 }
 // ==============================================================
 
@@ -14,25 +14,25 @@ const slideDown = keyframes`
 `;
 
 export const StyledBox = styled("div", {
-  shouldForwardProp: (prop) =>
-    prop !== "componentHeight" && prop !== "fixed" && prop !== "fixedOn",
+	shouldForwardProp: (prop) =>
+		prop !== "componentHeight" && prop !== "fixed" && prop !== "fixedOn",
 })<Props>(({ theme, componentHeight, fixedOn, fixed }) => ({
-  paddingTop: fixed ? componentHeight : 0,
+	paddingTop: fixed ? componentHeight : 0,
 
-  "& .hold": {
-    zIndex: 5,
-    boxShadow: "none",
-    position: "relative",
-  },
+	"& .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}`,
-  },
+	"& .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-v2/utils/constants.ts

@@ -1,8 +1,8 @@
 export const layoutConstant = {
-  topbarHeight: 40,
-  headerHeight: 80,
-  mobileNavHeight: 64,
-  containerWidth: 1200,
-  mobileHeaderHeight: 64,
-  grocerySidenavWidth: 280,
+	topbarHeight: 40,
+	headerHeight: 80,
+	mobileNavHeight: 64,
+	containerWidth: 1200,
+	mobileHeaderHeight: 64,
+	grocerySidenavWidth: 280,
 };

package/src/components-v2/wishlist-dialogs/__tests__/create-new-list.test.tsx

@@ -5,8 +5,8 @@ import { NextIntlClientProvider } from "next-intl";
 import CreateNewList from "@evenicanpm/storefront-core/src/components-v2/wishlist-dialogs/create-wishlist/index";
 
 import {
-  NotificationProvider,
-  Notification,
+	NotificationProvider,
+	Notification,
 } from "@evenicanpm/storefront-core/src/providers/notifications/notification-context";
 
 import ENUS from "@messages/en-US.json";
@@ -14,69 +14,69 @@ import ENUS from "@messages/en-US.json";
 const queryClient = new QueryClient();
 
 const Wrapper = ({ children }: { children: React.ReactNode }) => (
-  <NextIntlClientProvider locale="en-US" messages={ENUS}>
-    <QueryClientProvider client={queryClient}>
-      <NotificationProvider>
-        {children}
-        <Notification />
-      </NotificationProvider>
-    </QueryClientProvider>
-  </NextIntlClientProvider>
+	<NextIntlClientProvider locale="en-US" messages={ENUS}>
+		<QueryClientProvider client={queryClient}>
+			<NotificationProvider>
+				{children}
+				<Notification />
+			</NotificationProvider>
+		</QueryClientProvider>
+	</NextIntlClientProvider>
 );
 
 describe("Wishlists View Component", () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-    vi.resetAllMocks();
-  });
+	beforeEach(() => {
+		vi.clearAllMocks();
+		vi.resetAllMocks();
+	});
 
-  it("Should render when open is true", () => {
-    const handleClose = vi.fn();
+	it("Should render when open is true", () => {
+		const handleClose = vi.fn();
 
-    render(
-      <Wrapper>
-        <CreateNewList open={true} handleClose={handleClose} />
-      </Wrapper>,
-    );
-    const headerTitle = screen.getByText(/create wishlist/i);
-    expect(headerTitle).toBeInTheDocument();
+		render(
+			<Wrapper>
+				<CreateNewList open={true} handleClose={handleClose} />
+			</Wrapper>,
+		);
+		const headerTitle = screen.getByText(/create wishlist/i);
+		expect(headerTitle).toBeInTheDocument();
 
-    const inputField = screen.getByRole("textbox", { name: /name/i });
-    expect(inputField).toBeInTheDocument();
+		const inputField = screen.getByRole("textbox", { name: /name/i });
+		expect(inputField).toBeInTheDocument();
 
-    const saveButton = screen.getByRole("button", { name: /save/i });
-    expect(saveButton).toBeInTheDocument();
-  });
+		const saveButton = screen.getByRole("button", { name: /save/i });
+		expect(saveButton).toBeInTheDocument();
+	});
 
-  it("Should not render when open is false", () => {
-    const handleClose = vi.fn();
+	it("Should not render when open is false", () => {
+		const handleClose = vi.fn();
 
-    render(
-      <Wrapper>
-        <CreateNewList open={false} handleClose={handleClose} />
-      </Wrapper>,
-    );
-    const headerTitle = screen.queryByText(/create wishlist/i);
-    expect(headerTitle).not.toBeInTheDocument();
-  });
+		render(
+			<Wrapper>
+				<CreateNewList open={false} handleClose={handleClose} />
+			</Wrapper>,
+		);
+		const headerTitle = screen.queryByText(/create wishlist/i);
+		expect(headerTitle).not.toBeInTheDocument();
+	});
 
-  it("Should activate cancel button", () => {
-    const handleClose = vi.fn();
+	it("Should activate cancel button", () => {
+		const handleClose = vi.fn();
 
-    render(
-      <Wrapper>
-        <CreateNewList
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
-          open={true}
-          handleClose={handleClose}
-        />
-      </Wrapper>,
-    );
+		render(
+			<Wrapper>
+				<CreateNewList
+					// eslint-disable-next-line @typescript-eslint/no-explicit-any
+					open={true}
+					handleClose={handleClose}
+				/>
+			</Wrapper>,
+		);
 
-    const cancelButton = screen.getByRole("button", { name: /cancel/i });
-    expect(cancelButton).toBeInTheDocument();
+		const cancelButton = screen.getByRole("button", { name: /cancel/i });
+		expect(cancelButton).toBeInTheDocument();
 
-    fireEvent.click(cancelButton);
-    expect(handleClose).toHaveBeenCalledTimes(1);
-  });
+		fireEvent.click(cancelButton);
+		expect(handleClose).toHaveBeenCalledTimes(1);
+	});
 });