@evenicanpm/storefront-core 1.0.6 → 1.2.0

package/src/components-v2/Loading.tsx

@@ -4,33 +4,33 @@ import React from "react";
 import { Box, CircularProgress } from "@mui/material";
 
 interface Props {
-  height?: number;
-  fullscreen?: boolean;
+	height?: number;
+	fullscreen?: boolean;
 }
 
 const Loading: React.FC<Props> = (props) => {
-  const styles = getStyles(props);
+	const styles = getStyles(props);
 
-  return (
-    <Box sx={styles.root} data-full={props.fullscreen}>
-      <CircularProgress color="primary" />
-    </Box>
-  );
+	return (
+		<Box sx={styles.root} data-full={props.fullscreen}>
+			<CircularProgress color="primary" />
+		</Box>
+	);
 };
 
 const getStyles = (props: Props) => {
-  return {
-    root: {
-      flexGrow: 1,
-      display: "grid",
-      placeItems: "center",
-      height: props.height ? props.height : "initial",
-      "&[data-full]": {
-        height: "100vh",
-        width: "100vw",
-      },
-    },
-  };
+	return {
+		root: {
+			flexGrow: 1,
+			display: "grid",
+			placeItems: "center",
+			height: props.height ? props.height : "initial",
+			"&[data-full]": {
+				height: "100vh",
+				width: "100vw",
+			},
+		},
+	};
 };
 
 export default Loading;

package/src/components-v2/NoRecords.stories.tsx

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import NoRecords from "./no-records";
+
+const meta = {
+	title: "Bazaar/NoRecords",
+	component: NoRecords,
+	tags: ["autodocs"],
+} satisfies Meta<typeof NoRecords>;
+
+export default meta;
+type Story = StoryObj<typeof NoRecords>;
+
+export const Basic: Story = {
+	args: {
+		message: "No records found",
+	},
+	render: (args) => <NoRecords {...args} />,
+};

package/src/components-v2/SearchInput.stories.tsx

@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import SearchInput from "./SearchInput";
+import { useState } from "react";
+
+const meta = {
+	title: "Bazaar/SearchInput",
+	component: SearchInput,
+	tags: ["autodocs"],
+} satisfies Meta<typeof SearchInput>;
+
+export default meta;
+type Story = StoryObj<typeof SearchInput>;
+
+export const Basic: Story = {
+	args: {
+		placeholder: "Search...",
+		disabled: false,
+	},
+	render: (args) => {
+		const [value, setValue] = useState("");
+		return (
+			<SearchInput
+				{...args}
+				value={value}
+				onChange={(e) => setValue(e.target.value)}
+			/>
+		);
+	},
+};

package/src/components-v2/SearchInput.tsx

@@ -5,24 +5,24 @@ import Search from "@mui/icons-material/Search";
 
 // STYLED COMPONENT
 const StyledInputBase = styled(InputBase)(({ theme }) => ({
-  height: 44,
-  fontSize: 14,
-  width: "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 },
+	height: 44,
+	fontSize: 14,
+	width: "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 default function SearchInput(props: InputBaseProps) {
-  return (
-    <StyledInputBase
-      startAdornment={<Search sx={{ fontSize: 19, mr: 1 }} />}
-      {...props}
-    />
-  );
+	return (
+		<StyledInputBase
+			startAdornment={<Search sx={{ fontSize: 19, mr: 1 }} />}
+			{...props}
+		/>
+	);
 }

package/src/components-v2/SiteLogo.stories.tsx

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import SiteLogo from "./site-logo";
+
+const meta = {
+	title: "Bazaar/SiteLogo",
+	component: SiteLogo,
+	tags: ["autodocs"],
+} satisfies Meta<typeof SiteLogo>;
+
+export default meta;
+type Story = StoryObj<typeof SiteLogo>;
+
+export const Basic: Story = {
+	args: {
+		height: "80rem",
+	},
+	render: (args) => <SiteLogo {...args} />,
+};

package/src/components-v2/SnackbarProvider.tsx

@@ -4,29 +4,29 @@ import { SnackbarProvider as NotistackProvider } from "notistack";
 
 // STYLED COMPONENT
 const Provider = styled(NotistackProvider)(({ theme }) => ({
-  "&.SnackbarContent-root.SnackbarItem-contentRoot": {
-    boxShadow: theme.shadows[2],
-    color: theme.palette.common.black,
-    background: theme.palette.common.white,
-    fontFamily: theme.typography.fontFamily,
-  },
+	"&.SnackbarContent-root.SnackbarItem-contentRoot": {
+		boxShadow: theme.shadows[2],
+		color: theme.palette.common.black,
+		background: theme.palette.common.white,
+		fontFamily: theme.typography.fontFamily,
+	},
 
-  "&.SnackbarItem-variantSuccess .MuiSvgIcon-root": {
-    color: theme.palette.success.main,
-  },
-  "&.SnackbarItem-variantError .MuiSvgIcon-root": {
-    color: theme.palette.error.main,
-  },
+	"&.SnackbarItem-variantSuccess .MuiSvgIcon-root": {
+		color: theme.palette.success.main,
+	},
+	"&.SnackbarItem-variantError .MuiSvgIcon-root": {
+		color: theme.palette.error.main,
+	},
 }));
 
 export default function SnackbarProvider({ children }: PropsWithChildren) {
-  return (
-    <Provider
-      maxSnack={4}
-      autoHideDuration={2000}
-      anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
-    >
-      {children}
-    </Provider>
-  );
+	return (
+		<Provider
+			maxSnack={4}
+			autoHideDuration={2000}
+			anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
+		>
+			{children}
+		</Provider>
+	);
 }

package/src/components-v2/T/index.tsx

@@ -4,12 +4,12 @@ import React from "react";
 import { useTranslations } from "next-intl";
 
 interface Props {
-  path: string;
+	path: string;
 }
 
 const T = ({ path }: Props) => {
-  const t = useTranslations();
-  return <>{t(path)}</>;
+	const t = useTranslations();
+	return <>{t(path)}</>;
 };
 
 export default T;

package/src/components-v2/Typography.stories.tsx

@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import {
+	H1,
+	H2,
+	H3,
+	H4,
+	H5,
+	H6,
+	Paragraph,
+	Small,
+	Span,
+	Tiny,
+	Display,
+	Subtitle,
+} from "./Typography";
+
+const meta = {
+	title: "Bazaar/Typography",
+	tags: ["autodocs"],
+	component: H1,
+} satisfies Meta<typeof H1>;
+
+export default meta;
+type Story = StoryObj<typeof H1>;
+
+export const Basic: Story = {
+	args: {
+		children: "This is a sample text that might overflow and be truncated.",
+		ellipsis: true,
+	},
+	render: (args) => (
+		<div style={{ width: 200 }}>
+			<Display {...args}>Display Text</Display>
+			<H1 {...args}>H1 Heading</H1>
+			<H2 {...args}>H2 Heading</H2>
+			<H3 {...args}>H3 Heading</H3>
+			<H4 {...args}>H4 Heading</H4>
+			<H5 {...args}>H5 Heading</H5>
+			<H6 {...args}>H6 Heading</H6>
+			<Paragraph {...args}>This is a paragraph of text.</Paragraph>
+			<Small {...args}>Small text</Small>
+			<Tiny {...args}>Tiny text</Tiny>
+			<Span {...args}>Inline span text</Span>
+			<Subtitle {...args}>Subtitle text</Subtitle>
+		</div>
+	),
+};

package/src/components-v2/Typography.tsx

@@ -8,220 +8,220 @@ import React from "react";
 // ==============================================================
 type Ellipsis = { ellipsis: number };
 export interface EllipsisProps extends BoxProps {
-  ellipsis?: boolean;
+	ellipsis?: boolean;
 }
 // ==============================================================
 
 const StyledBox = styled(Box, {
-  shouldForwardProp: (prop) => prop !== "ellipsis",
+	shouldForwardProp: (prop) => prop !== "ellipsis",
 })<Ellipsis>(({ ellipsis }) => ({
-  ...(ellipsis && {
-    overflow: "hidden",
-    whiteSpace: "nowrap",
-    textOverflow: "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>
-  );
+	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>
-  );
+	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>
-  );
+	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>
-  );
+	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>
-  );
+	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>
-  );
+	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>
-  );
+	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>
-  );
+	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>
-  );
+	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>
-  );
+	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>
-  );
+	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>
-  );
+	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>
+	);
 }