@evenicanpm/storefront-core 1.0.3 → 1.0.4

package/src/components-v2/settings/setting.tsx

@@ -1,141 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { useRouter } from "next/navigation";
-// MUI
-import Button from "@mui/material/Button";
-import Divider from "@mui/material/Divider";
-import Tooltip from "@mui/material/Tooltip";
-import ClickAwayListener from "@mui/material/ClickAwayListener";
-// MUI ICON COMPONENTS
-import Close from "@mui/icons-material/Close";
-import Settings from "@mui/icons-material/Settings";
-// LOCAL CUSTOM COMPONENTS
-import { H6 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
-import Scrollbar from "@evenicanpm/storefront-core/src/components-v2/scrollbar/scrollbar";
-import FlexBox from "@evenicanpm/storefront-core/src/components-v2/flex-box/flex-box";
-// GLOBAL CUSTOM HOOK
-import useSettings from "@evenicanpm/storefront-core/src/hooks/use-settings";
-// STYLED COMPONENTS
-import {
-  BodyWrapper,
-  MainContainer,
-  StyledAvatar,
-  StyledIconButton,
-} from "./styles";
-
-export default function Setting() {
-  const { push } = useRouter();
-  const { updateSettings, settings } = useSettings();
-  const [showBody, setShowBody] = useState(false);
-
-  return (
-    <ClickAwayListener onClickAway={() => setShowBody(false)}>
-      <MainContainer>
-        <Tooltip title="Settings & Demos" placement="left">
-          <StyledIconButton onClick={() => setShowBody((state) => !state)}>
-            {!showBody && <Settings />}
-            {showBody && <Close />}
-          </StyledIconButton>
-        </Tooltip>
-
-        <BodyWrapper showBody={showBody ? 1 : 0}>
-          <Scrollbar sx={{ maxHeight: showBody ? "calc(100vh - 200px)" : 0 }}>
-            <FlexBox gap={2}>
-              <Button
-                fullWidth
-                onClick={() => updateSettings({ direction: "rtl" })}
-                color={settings.direction === "rtl" ? "primary" : "secondary"}
-                variant={
-                  settings.direction === "rtl" ? "contained" : "outlined"
-                }
-              >
-                RTL
-              </Button>
-
-              <Button
-                fullWidth
-                onClick={() => updateSettings({ direction: "ltr" })}
-                color={settings.direction === "ltr" ? "primary" : "secondary"}
-                variant={
-                  settings.direction === "ltr" ? "contained" : "outlined"
-                }
-              >
-                LTR
-              </Button>
-            </FlexBox>
-
-            <Divider sx={{ my: 3 }} />
-
-            <H6 textAlign="center" mb={2}>
-              Bazaar Demos
-            </H6>
-
-            <FlexBox gap={2} flexWrap="wrap">
-              {demos.map((demo) => (
-                <StyledAvatar
-                  key={demo.id}
-                  src={demo.img}
-                  onClick={() => push(demo.path)}
-                />
-              ))}
-            </FlexBox>
-          </Scrollbar>
-        </BodyWrapper>
-      </MainContainer>
-    </ClickAwayListener>
-  );
-}
-
-const demos = [
-  {
-    id: 17,
-    path: "/furniture-3",
-    img: "/assets/images/landing/home/furniture-3.jpg",
-  },
-  {
-    id: 16,
-    path: "/gadget-3",
-    img: "/assets/images/landing/home/gadget-3.jpg",
-  },
-  {
-    id: 15,
-    path: "/grocery-4",
-    img: "/assets/images/landing/home/grocery-4.jpg",
-  },
-  {
-    id: 12,
-    path: "/furniture-2",
-    img: "/assets/images/landing/home/furniture-2.jpg",
-  },
-  {
-    id: 13,
-    path: "/gadget-2",
-    img: "/assets/images/landing/home/gadget-2.png",
-  },
-  { id: 14, path: "/medical", img: "/assets/images/landing/home/medical.png" },
-  {
-    id: 5,
-    path: "/fashion-3",
-    img: "/assets/images/landing/home/fashion-3.jpg",
-  },
-  { id: 0, path: "/market-1", img: "/assets/images/landing/page-1.png" },
-  { id: 1, path: "/market-2", img: "/assets/images/landing/home/market-2.jpg" },
-  { id: 9, path: "/grocery-1", img: "/assets/images/landing/grocery1.png" },
-  { id: 2, path: "/grocery-2", img: "/assets/images/landing/page-2.png" },
-  { id: 10, path: "/grocery-3", img: "/assets/images/landing/grocery3.png" },
-  { id: 3, path: "/fashion-1", img: "/assets/images/landing/page-3.png" },
-  {
-    id: 4,
-    path: "/fashion-2",
-    img: "/assets/images/landing/home/fashion-2.jpg",
-  },
-  { id: 6, path: "/gadget-1", img: "/assets/images/landing/page-4.png" },
-  { id: 7, path: "/furniture-1", img: "/assets/images/landing/furniture.png" },
-  { id: 8, path: "/gift-shop", img: "/assets/images/landing/gift-shop.png" },
-  {
-    id: 11,
-    path: "/health-beauty",
-    img: "/assets/images/landing/healthbeauty.png",
-  },
-];

package/src/components-v2/settings/styles.ts

@@ -1,57 +0,0 @@
-import Avatar from "@mui/material/Avatar";
-import styled from "@mui/material/styles/styled";
-import IconButton from "@mui/material/IconButton";
-
-export const MainContainer = styled("div")(({ theme }) => ({
-  top: 50,
-  right: 50,
-  zIndex: 1501,
-  position: "fixed",
-  [theme.breakpoints.down("md")]: { display: "none" },
-}));
-
-export const StyledIconButton = styled(IconButton)(({ theme }) => ({
-  right: 50,
-  zIndex: 99,
-  bottom: 50,
-  padding: 12,
-  color: "#fff",
-  position: "fixed",
-  borderRadius: "50%",
-  boxShadow: theme.shadows[12],
-  backgroundColor: theme.palette.primary.main,
-  ":hover": { backgroundColor: theme.palette.primary.main },
-}));
-
-export const BodyWrapper = styled("div", {
-  shouldForwardProp: (props) => props !== "showBody",
-})<{ showBody: number }>(({ theme, showBody }) => ({
-  borderRadius: "4px",
-  backgroundColor: "white",
-  opacity: showBody ? 1 : 0,
-  width: showBody ? 300 : 0,
-  padding: showBody ? 24 : 0,
-  boxShadow: theme.shadows[3],
-  transition: "transform 0.4s",
-  // maxHeight: showBody ? "calc(100vh - 100px)" : 0,
-  transform: `translateY(${showBody ? 0 : "10px"})`,
-}));
-
-export const StyledAvatar = styled(Avatar)({
-  flexGrow: 1,
-  height: 100,
-  width: "45%",
-  cursor: "pointer",
-  borderRadius: "10px",
-  ":last-of-type": { flexGrow: 0 },
-  ":hover": { "&::after": { opacity: 0.5 } },
-  "::after": {
-    opacity: 0,
-    content: '""',
-    width: "100%",
-    height: "100%",
-    background: "black",
-    position: "absolute",
-    transition: "all 0.3s",
-  },
-});

package/src/components-v2/sticky-wrapper/index.ts

@@ -1 +0,0 @@
-export { default } from "./sticky-wrapper";

package/src/components-v2/sticky-wrapper/sticky-wrapper.tsx

@@ -1,21 +0,0 @@
-import { PropsWithChildren, ReactNode } from "react";
-import Container from "@mui/material/Container";
-// STYLED COMPONENTS
-import { ContentWrapper } from "./styles";
-
-// ==============================================================
-interface Props extends PropsWithChildren {
-  SideNav: ReactNode;
-}
-// ==============================================================
-
-export default function StickyWrapper({ SideNav, children }: Props) {
-  return (
-    <Container>
-      <ContentWrapper>
-        <div className="sidebar">{SideNav}</div>
-        <div className="content">{children}</div>
-      </ContentWrapper>
-    </Container>
-  );
-}

package/src/components-v2/sticky-wrapper/styles.ts

@@ -1,25 +0,0 @@
-"use client";
-
-import styled from "@mui/material/styles/styled";
-import { layoutConstant } from "@evenicanpm/storefront-core/src/components-v2/utils/constants";
-
-export const ContentWrapper = styled("div")(({ theme }) => ({
-  display: "flex",
-  position: "relative",
-
-  ".sidebar": {
-    width: "100%",
-    height: "100%",
-    position: "sticky",
-    top: layoutConstant.headerHeight + 15,
-    maxWidth: layoutConstant.grocerySidenavWidth,
-    [theme.breakpoints.down("md")]: { display: "none" },
-  },
-
-  ".content": {
-    width: "100%",
-    paddingLeft: "2rem",
-    maxWidth: `calc(100% - ${layoutConstant.grocerySidenavWidth}px)`,
-    [theme.breakpoints.down("md")]: { maxWidth: "100%", paddingLeft: 0 },
-  },
-}));

package/src/components-v2/stories/story-content/index.ts

@@ -1 +0,0 @@
-export { default } from "./story-content";

package/src/components-v2/stories/story-content/story-content.tsx

@@ -1,28 +0,0 @@
-import Link from "next/link";
-import LazyImage from "@evenicanpm/storefront-core/src/components-v2/LazyImage";
-// STYLED COMPONENT
-import { StyledButton, StyledRoot } from "./styles";
-
-// ==============================================================
-interface Props {
-  image: string;
-  url?: string;
-}
-// ==============================================================
-
-export default function StoryContent({ image, url }: Props) {
-  return (
-    <StyledRoot>
-      <LazyImage src={image} width={450} height={824} alt="Story" />
-
-      <StyledButton
-        color="primary"
-        variant="contained"
-        LinkComponent={Link}
-        href={url}
-      >
-        View More
-      </StyledButton>
-    </StyledRoot>
-  );
-}

package/src/components-v2/stories/story-content/styles.ts

@@ -1,22 +0,0 @@
-"use client";
-
-import Button from "@mui/material/Button";
-import styled from "@mui/material/styles/styled";
-
-export const StyledRoot = styled("div")(() => ({
-  width: "100%",
-  height: "100%",
-  display: "flex",
-  position: "relative",
-}));
-
-export const StyledButton = styled(Button)(() => ({
-  bottom: 30,
-  left: "50%",
-  zIndex: 1111,
-  color: "white",
-  fontWeight: 400,
-  position: "absolute",
-  paddingInline: "2rem",
-  transform: "translateX(-50%)",
-}));

package/src/components-v2/stories/story-item/index.ts

@@ -1 +0,0 @@
-export { default } from "./story-item";

package/src/components-v2/stories/story-item/story-item.tsx

@@ -1,24 +0,0 @@
-import LazyImage from "@evenicanpm/storefront-core/src/components-v2/LazyImage";
-// STYLED COMPONENT
-import { StyledRoot } from "./styles";
-
-// ==============================================================
-interface Props {
-  image: string;
-  handleClick: () => void;
-}
-// ==============================================================
-
-export default function StoryItem({ image, handleClick }: Props) {
-  return (
-    <StyledRoot>
-      <LazyImage
-        src={image}
-        alt="Story"
-        width={164}
-        height={300}
-        onClick={handleClick}
-      />
-    </StyledRoot>
-  );
-}

package/src/components-v2/stories/story-item/styles.ts

@@ -1,11 +0,0 @@
-"use client";
-
-import styled from "@mui/material/styles/styled";
-
-export const StyledRoot = styled("div")({
-  outline: 0,
-  display: "flex",
-  borderRadius: 4,
-  cursor: "pointer",
-  overflow: "hidden",
-});

package/src/components-v2/stories/story-viewer/index.ts

@@ -1 +0,0 @@
-export { default } from "./story-viewer";

package/src/components-v2/stories/story-viewer/story-viewer.tsx

@@ -1,44 +0,0 @@
-"use client";
-
-import Modal from "@mui/material/Modal";
-import Stories from "react-insta-stories";
-// STYLED COMPONENTS
-import { ModalWrapper } from "./styles";
-import {
-  ReactInstaStoriesProps,
-  Story,
-} from "react-insta-stories/dist/interfaces";
-
-// ==============================================================
-interface Props extends ReactInstaStoriesProps {
-  open: boolean;
-  handleClose: () => void;
-  stories: Story[];
-  currentIndex: number;
-}
-// ==============================================================
-
-export default function StoryViewer({
-  open,
-  handleClose,
-  stories,
-  currentIndex,
-}: Props) {
-  return (
-    <Modal open={open} onClose={handleClose}>
-      <ModalWrapper>
-        <Stories
-          stories={stories}
-          currentIndex={currentIndex}
-          onAllStoriesEnd={handleClose}
-          progressStyles={{ height: 3, borderRadius: 10 }}
-          progressWrapperStyles={{
-            height: 3,
-            borderRadius: 10,
-            background: "#373F50",
-          }}
-        />
-      </ModalWrapper>
-    </Modal>
-  );
-}

package/src/components-v2/stories/story-viewer/styles.ts

@@ -1,15 +0,0 @@
-"use client";
-
-import styled from "@mui/material/styles/styled";
-
-export const ModalWrapper = styled("div")(() => ({
-  top: "50%",
-  outline: 0,
-  left: "50%",
-  borderRadius: 4,
-  overflow: "hidden",
-  aspectRatio: "9/16",
-  position: "absolute",
-  backgroundColor: "white",
-  transform: "translate(-50%, -50%)",
-}));

package/src/components-v2/subscribe-input/index.ts

@@ -1 +0,0 @@
-export { default } from "./subscribe-input";

package/src/components-v2/subscribe-input/styles.ts

@@ -1,14 +0,0 @@
-"use client";
-
-import ButtonBase from "@mui/material/ButtonBase";
-import styled from "@mui/material/styles/styled";
-
-export const StyledButton = styled(ButtonBase)({
-  height: "100%",
-  color: "white",
-  fontWeight: 600,
-  padding: ".75rem 1.5rem",
-  backgroundColor: "black",
-  borderTopRightRadius: 8,
-  borderBottomRightRadius: 8,
-});

package/src/components-v2/subscribe-input/subscribe-input.tsx

@@ -1,43 +0,0 @@
-import { SxProps, Theme } from "@mui/material/styles";
-import TextField, { TextFieldProps } from "@mui/material/TextField";
-// STYLED COMPONENT
-import { StyledButton } from "./styles";
-
-// ==============================================================
-interface Props {
-  buttonText?: string;
-  buttonSx?: SxProps<Theme>;
-}
-// ==============================================================
-
-export default function SubscribeInput({
-  fullWidth,
-  InputProps,
-  buttonSx = {},
-  variant = "outlined",
-  buttonText = "SUBSCRIBE",
-  placeholder = "Enter Your Mail Here",
-  ...props
-}: Props & TextFieldProps) {
-  const INPUT_PROPS = {
-    endAdornment: <StyledButton sx={buttonSx}>{buttonText}</StyledButton>,
-    sx: {
-      border: 0,
-      padding: 0,
-      borderRadius: 2,
-      backgroundColor: "white",
-      ...InputProps?.sx,
-    },
-    ...InputProps,
-  };
-
-  return (
-    <TextField
-      variant={variant}
-      fullWidth={fullWidth}
-      placeholder={placeholder}
-      InputProps={INPUT_PROPS}
-      {...props}
-    />
-  );
-}

package/src/components-v2/topbar/index.ts

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

package/src/components-v2/topbar/styles.ts

@@ -1,55 +0,0 @@
-import Box from "@mui/material/Box";
-import Chip from "@mui/material/Chip";
-import Container from "@mui/material/Container";
-import styled from "@mui/material/styles/styled";
-
-import { layoutConstant } from "@evenicanpm/storefront-core/src/components-v2/utils/constants";
-
-export const StyledRoot = styled(Box, {
-  shouldForwardProp: (prop) => prop !== "bgColor" && prop !== "expand",
-})<{ bgColor?: string; expand: number }>(({ theme, bgColor, expand }) => ({
-  fontSize: 12,
-  height: layoutConstant.topbarHeight,
-  color: theme.palette.secondary.contrastText,
-  background: bgColor || theme.palette.grey[900],
-  transition: "height 300ms ease",
-  "& .menuItem": { minWidth: 100 },
-  "& .marginRight": { marginRight: "1.25rem" },
-  "& .expand": { display: "none", padding: 0 },
-  "& .handler": { height: layoutConstant.topbarHeight },
-  "& .menuTitle": { fontSize: 12, marginLeft: "0.5rem", fontWeight: 600 },
-
-  [theme.breakpoints.down("sm")]: {
-    height: expand ? 80 : layoutConstant.topbarHeight,
-
-    "& .MuiSvgIcon-root": { color: "white" },
-
-    "& .topbarRight": {
-      paddingBottom: 5,
-      display: expand ? "flex" : "none",
-    },
-
-    "& .expand": {
-      display: "block",
-      height: layoutConstant.topbarHeight,
-    },
-  },
-}));
-
-export const StyledContainer = styled(Container)(({ theme }) => ({
-  height: "100%",
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "space-between",
-  [theme.breakpoints.down("sm")]: {
-    alignItems: "start",
-    flexDirection: "column",
-  },
-}));
-
-export const StyledChip = styled(Chip)(({ theme }) => ({
-  color: "white",
-  fontWeight: 700,
-  backgroundColor: theme.palette.primary.main,
-  "& .MuiChip-label": { paddingInline: ".8rem" },
-}));

package/src/components-v2/topbar/top-bar.tsx

@@ -1,115 +0,0 @@
-import Link from "next/link";
-import { useState } from "react";
-// MUI
-import MenuItem from "@mui/material/MenuItem";
-import IconButton from "@mui/material/IconButton";
-import TouchRipple from "@mui/material/ButtonBase";
-// TRANSLATION
-import { useTranslation } from "react-i18next";
-// MUI ICON COMPONENTS
-import Add from "@mui/icons-material/Add";
-import Remove from "@mui/icons-material/Remove";
-import Twitter from "@mui/icons-material/Twitter";
-import Facebook from "@mui/icons-material/Facebook";
-import Instagram from "@mui/icons-material/Instagram";
-import ExpandMore from "@mui/icons-material/ExpandMore";
-// GLOBAL CUSTOM COMPONENTS
-import { Span } from "@evenicanpm/storefront-core/src/components-v2/Typography";
-import BazaarMenu from "@evenicanpm/storefront-core/src/components-v2/BazaarMenu";
-import {
-  FlexBetween,
-  FlexBox,
-} from "@evenicanpm/storefront-core/src/components-v2/flex-box/index";
-// STYLED COMPONENTS
-import { StyledChip, StyledContainer, StyledRoot } from "./styles";
-
-// ==============================================================
-interface LanguageOption {
-  [key: string]: { title: string; value: string };
-}
-// ==============================================================
-
-// LANGUAGE OPTIONS
-const languageOptions: LanguageOption = {
-  en: { title: "EN", value: "en" },
-  es: { title: "DE", value: "de" },
-};
-
-const socialLinks = [
-  { id: 1, Icon: Twitter, url: "#" },
-  { id: 2, Icon: Facebook, url: "#" },
-  { id: 3, Icon: Instagram, url: "#" },
-];
-
-// ===========================================
-type Props = { bgColor?: string };
-// ===========================================
-
-export default function Topbar({ bgColor }: Props) {
-  const { i18n, t } = useTranslation();
-  const [expand, setExpand] = useState<boolean>(false);
-
-  const handleChangeLanguage = (language: string) => {
-    i18n.changeLanguage(language);
-  };
-
-  const selectedLanguage = languageOptions[i18n.language];
-
-  return (
-    <StyledRoot bgColor={bgColor} expand={expand ? 1 : 0}>
-      <StyledContainer>
-        <FlexBetween width="100%">
-          <FlexBox alignItems="center" gap={1}>
-            <StyledChip label={t("HOT")} size="small" />
-            <Span className="title">{t("Free Express Shipping")}</Span>
-          </FlexBox>
-
-          <IconButton
-            disableRipple
-            className="expand"
-            onClick={() => setExpand((state) => !state)}
-          >
-            {expand ? <Remove /> : <Add />}
-          </IconButton>
-        </FlexBetween>
-
-        <FlexBox className="topbarRight" alignItems="center">
-          {/* LANGUAGE MENU SELECTOR */}
-          <BazaarMenu
-            handler={(e) => (
-              <TouchRipple className="handler marginRight" onClick={e}>
-                <Span className="menuTitle">{selectedLanguage.title}</Span>
-                <ExpandMore fontSize="inherit" />
-              </TouchRipple>
-            )}
-            options={(onClose) => {
-              return Object.keys(languageOptions).map((language: string) => (
-                <MenuItem
-                  className="menuItem"
-                  key={languageOptions[language].title}
-                  onClick={() => {
-                    handleChangeLanguage(language);
-                    onClose();
-                  }}
-                >
-                  <Span className="menuTitle">
-                    {languageOptions[language].title}
-                  </Span>
-                </MenuItem>
-              ));
-            }}
-          />
-
-          {/* SOCIAL LINKS AREA */}
-          <FlexBox alignItems="center" gap={1.5}>
-            {socialLinks.map(({ id, Icon, url }) => (
-              <Link href={url} key={id}>
-                <Icon sx={{ fontSize: 16 }} />
-              </Link>
-            ))}
-          </FlexBox>
-        </FlexBox>
-      </StyledContainer>
-    </StyledRoot>
-  );
-}