@evenicanpm/storefront-core 1.0.3 → 1.0.5

package/src/components-v2/countdown/count-down.tsx

@@ -1,24 +0,0 @@
-"use client";
-
-// GLOBAL CUSTOM COMPONENT
-import FlexBetween from "@evenicanpm/storefront-core/src/components-v2/flex-box/flex-between";
-// Local CUSTOM COMPONENT
-import CountBox from "./count-box";
-import useCountDown from "./useCountDown";
-
-// ==============================================================
-type Props = { expireDate: number };
-// ==============================================================
-
-export default function Countdown({ expireDate }: Props) {
-  const { timeLeft } = useCountDown({ expireDate });
-
-  return (
-    <FlexBetween width="90%" height="auto">
-      <CountBox digit={timeLeft.days} title="DAYS" />
-      <CountBox digit={timeLeft.hours} title="HOURS" />
-      <CountBox digit={timeLeft.minutes} title="MINS" />
-      <CountBox digit={timeLeft.seconds} title="SECS" />
-    </FlexBetween>
-  );
-}

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

@@ -1,2 +0,0 @@
-export { default as Countdown } from "./count-down";
-export { default as useCountDown } from "./useCountDown";

package/src/components-v2/countdown/useCountDown.ts

@@ -1,41 +0,0 @@
-"use client";
-
-import { useCallback, useEffect, useState } from "react";
-
-const initialState = {
-  days: 0,
-  hours: 0,
-  minutes: 0,
-  seconds: 0,
-};
-
-// ==============================================================
-type Props = { expireDate: number };
-// ==============================================================
-
-export default function useCountDown({ expireDate }: Props) {
-  const [timeLeft, setTimeLeft] = useState(initialState);
-
-  const calculateTimeLeft = useCallback(() => {
-    const distance = expireDate - new Date().getTime();
-    // if date expire
-    if (distance < 0) return initialState;
-
-    return {
-      days: Math.floor(distance / (1000 * 60 * 60 * 24)),
-      hours: Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)),
-      minutes: Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)),
-      seconds: Math.floor((distance % (1000 * 60)) / 1000),
-    };
-  }, [expireDate]);
-
-  useEffect(() => {
-    const timer = setInterval(() => {
-      setTimeLeft(calculateTimeLeft());
-    }, 1000);
-
-    return () => clearInterval(timer);
-  }, [calculateTimeLeft]);
-
-  return { timeLeft };
-}

package/src/components-v2/data-table/index.ts

@@ -1,2 +0,0 @@
-export { default as TableHeader } from "./table-header";
-export { default as TablePagination } from "./table-pagination";

package/src/components-v2/data-table/table-header.tsx

@@ -1,91 +0,0 @@
-import { ChangeEvent } from "react";
-import styled from "@mui/material/styles/styled";
-import Checkbox from "@mui/material/Checkbox";
-import TableRow from "@mui/material/TableRow";
-import TableCell from "@mui/material/TableCell";
-import TableHead from "@mui/material/TableHead";
-import TableSortLabel from "@mui/material/TableSortLabel";
-// CUSTOM ICON COMPONENT
-import UpDown from "@evenicanpm/storefront-core/src/components-v2/icons/up-down";
-
-// STYLED COMPONENTS
-const StyledTableCell = styled(TableCell)(({ theme }) => ({
-  fontWeight: 600,
-  padding: "16px 20px",
-  color: theme.palette.grey[900],
-}));
-
-// ----------------------------------------------------------------------
-interface Props {
-  heading: Headings[];
-  orderBy: string;
-  rowCount: number;
-  numSelected: number;
-  order: "asc" | "desc";
-  hideSelectBtn?: boolean;
-  onRequestSort: (id: string) => void;
-  onSelectAllClick?: (checked: boolean, defaultSelect: string) => void;
-}
-// ----------------------------------------------------------------------
-export type Key = string | number | bigint;
-export type Align = "inherit" | "left" | "center" | "right" | "justify";
-export type SortDirection = "asc" | "desc" | false;
-
-export type Headings = {
-  label: string;
-  align: Align;
-  key: Key;
-  sortDirection: SortDirection;
-  id: string;
-};
-// ----------------------------------------------------------------------
-export default function TableHeader(props: Props) {
-  const {
-    order,
-    heading,
-    orderBy,
-    rowCount,
-    numSelected,
-    onRequestSort,
-    onSelectAllClick,
-    hideSelectBtn = false,
-  } = props;
-
-  return (
-    <TableHead sx={{ backgroundColor: "grey.200" }}>
-      <TableRow>
-        {!hideSelectBtn ? (
-          <StyledTableCell align="left">
-            <Checkbox
-              color="info"
-              checked={rowCount > 0 && numSelected === rowCount}
-              onChange={(event: ChangeEvent<HTMLInputElement>) =>
-                onSelectAllClick?.(event.target.checked, "product")
-              }
-            />
-          </StyledTableCell>
-        ) : null}
-
-        {heading.map((headCell) => (
-          <StyledTableCell
-            key={headCell.id}
-            align={headCell.align}
-            sortDirection={orderBy === headCell.id ? order : false}
-          >
-            <TableSortLabel
-              active={orderBy === headCell.id}
-              onClick={() => onRequestSort(headCell.id)}
-              direction={orderBy === headCell.id ? order : "asc"}
-              sx={{ "& .MuiTableSortLabel-icon": { opacity: 1 } }}
-              IconComponent={() => (
-                <UpDown sx={{ fontSize: 14, ml: 1, color: "grey.600" }} />
-              )}
-            >
-              {headCell.label}
-            </TableSortLabel>
-          </StyledTableCell>
-        ))}
-      </TableRow>
-    </TableHead>
-  );
-}

package/src/components-v2/data-table/table-pagination.tsx

@@ -1,36 +0,0 @@
-import Pagination, { PaginationProps } from "@mui/material/Pagination";
-import styled from "@mui/material/styles/styled";
-
-// STYLED COMPONENT
-const StyledPagination = styled(Pagination)(({ theme }) => ({
-  "& .MuiPaginationItem-root": {
-    fontSize: 14,
-    fontWeight: 500,
-    color: theme.palette.grey[900],
-    border: `1px solid transparent`,
-  },
-  "& .MuiPaginationItem-page:hover": {
-    borderRadius: 20,
-    backgroundColor: "transparent",
-    color: theme.palette.info.main,
-    border: `1px solid ${theme.palette.info.main}`,
-  },
-  "& .MuiPaginationItem-page.Mui-selected": {
-    borderRadius: 20,
-    backgroundColor: "transparent",
-    color: theme.palette.info.main,
-    border: `1px solid ${theme.palette.info.main}`,
-    ":hover": { backgroundColor: "transparent" },
-  },
-  "& .MuiPaginationItem-previousNext": {
-    margin: 10,
-    borderRadius: 20,
-    color: theme.palette.info.main,
-    border: `1px solid ${theme.palette.info.main}`,
-    "&:hover": { backgroundColor: "transparent" },
-  },
-}));
-
-export default function TablePagination(props: PaginationProps) {
-  return <StyledPagination {...props} />;
-}

package/src/components-v2/footer/components/about-links.tsx

@@ -1,23 +0,0 @@
-import { Fragment } from "react";
-import { Heading, StyledLink } from "../styles/index";
-import { ABOUT_LINKS } from "../data/index";
-
-// ==============================================================
-type Props = { isDark?: boolean };
-// ==============================================================
-
-export default function AboutLinks({ isDark }: Props) {
-  return (
-    <Fragment>
-      <Heading>About Us</Heading>
-
-      <div>
-        {ABOUT_LINKS.map((item, ind) => (
-          <StyledLink isDark={isDark} href="/" key={ind}>
-            {item}
-          </StyledLink>
-        ))}
-      </div>
-    </Fragment>
-  );
-}

package/src/components-v2/footer/components/app-store.tsx

@@ -1,38 +0,0 @@
-import Box from "@mui/material/Box";
-// GLOBAL CUSTOM COMPONENT
-import FlexBox from "@evenicanpm/storefront-core/src/components-v2/flex-box/flex-box";
-// CUSTOM ICON COMPONENTS
-import { PLAY_APP_STORE_DATA } from "../data/index";
-
-export default function AppStore() {
-  return (
-    <FlexBox flexWrap="wrap" m={-1}>
-      {PLAY_APP_STORE_DATA.map(({ icon: Icon, subtitle, title, url }) => (
-        <a href={url} key={title} target="_blank" rel="noreferrer noopener">
-          <Box
-            m={1}
-            gap={1}
-            p="10px 16px"
-            color="white"
-            display="flex"
-            bgcolor="#161d2b"
-            borderRadius="5px"
-            alignItems="center"
-          >
-            <Icon />
-
-            <div>
-              <Box fontSize="8px" fontWeight="600" lineHeight="1">
-                {subtitle}
-              </Box>
-
-              <Box fontSize="14px" fontWeight="700">
-                {title}
-              </Box>
-            </div>
-          </Box>
-        </a>
-      ))}
-    </FlexBox>
-  );
-}

package/src/components-v2/footer/components/customer-care-links.tsx

@@ -1,21 +0,0 @@
-import { Fragment } from "react";
-import { Heading, StyledLink } from "../styles/index";
-import { CUSTOMER_CARE_LINKS } from "../data/index";
-
-// ==============================================================
-type Props = { isDark?: boolean };
-// ==============================================================
-
-export default function CustomerCareLinks({ isDark }: Props) {
-  return (
-    <Fragment>
-      <Heading>Customer Care</Heading>
-
-      {CUSTOMER_CARE_LINKS.map((item, ind) => (
-        <StyledLink isDark={isDark} href="/" key={ind}>
-          {item}
-        </StyledLink>
-      ))}
-    </Fragment>
-  );
-}

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

@@ -1,23 +0,0 @@
-import { Fragment } from "react";
-import Link from "next/link";
-import AppStore from "./app-store";
-import Image from "@evenicanpm/storefront-core/src/components-v2/BazaarImage";
-import { Paragraph } from "@evenicanpm/storefront-core/src/components-v2/Typography";
-
-export default function LogoSection() {
-  return (
-    <Fragment>
-      <Link href="/">
-        <Image mb={2.5} src="/assets/images/logo.svg" alt="logo" />
-      </Link>
-
-      <Paragraph mb={2.5} color="grey.500">
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Auctor libero
-        id et, in gravida. Sit diam duis mauris nulla cursus. Erat et lectus vel
-        ut sollicitudin elit at amet.
-      </Paragraph>
-
-      <AppStore />
-    </Fragment>
-  );
-}

package/src/components-v2/footer/components/social-links.tsx

@@ -1,43 +0,0 @@
-"use client";
-
-import IconButton from "@mui/material/IconButton";
-import styled from "@mui/material/styles/styled";
-// GLOBAL CUSTOM COMPONENT
-import FlexBox from "@evenicanpm/storefront-core/src/components-v2/flex-box/flex-box";
-// DATA
-import { SOCIAL_ICON_LINKS } from "../data/index";
-
-// STYLED COMPONENTS
-const StyledIconButton = styled(IconButton, {
-  shouldForwardProp: (prop) => prop !== "variant",
-})<Props>(({ variant, theme }) => ({
-  margin: 4,
-  fontSize: 12,
-  padding: "10px",
-  ...(variant === "light" && {
-    backgroundColor: "rgba(0,0,0,0.2)",
-  }),
-  ...(variant === "dark" && {
-    backgroundColor: theme.palette.grey[700],
-    ":hover": { backgroundColor: theme.palette.grey[800] },
-  }),
-  ".icon": { color: "white" },
-}));
-
-// ==============================================================
-type Props = { variant?: "light" | "dark" };
-// ==============================================================
-
-export default function SocialLinks({ variant = "light" }: Props) {
-  return (
-    <FlexBox className="flex" mx={-0.625}>
-      {SOCIAL_ICON_LINKS.map(({ Icon, url }, ind) => (
-        <a href={url} target="_blank" rel="noreferrer noopenner" key={ind}>
-          <StyledIconButton variant={variant}>
-            <Icon fontSize="inherit" className="icon" />
-          </StyledIconButton>
-        </a>
-      ))}
-    </FlexBox>
-  );
-}

package/src/components-v2/footer/data/index.ts

@@ -1,54 +0,0 @@
-// CUSTOM ICON COMPONENTS
-// import Google from "icons/Google";
-// import Twitter from "icons/Twitter";
-// import Youtube from "icons/Youtube";
-// import Facebook from "icons/Facebook";
-// import Instagram from "icons/Instagram";
-// import PlayStore from "icons/PlayStore";
-// import AppleStore from "icons/AppleStore";
-
-import FallbackIcon from "@/cms/blocks/Icons/Components/FallbackIcon";
-
-const Google = FallbackIcon;
-const Twitter = FallbackIcon;
-const Youtube = FallbackIcon;
-const Facebook = FallbackIcon;
-const Instagram = FallbackIcon;
-const PlayStore = FallbackIcon;
-const AppleStore = FallbackIcon;
-
-export const ABOUT_LINKS = [
-  "Careers",
-  "Our Stores",
-  "Our Cares",
-  "Terms & Conditions",
-  "Privacy Policy",
-];
-
-export const CUSTOMER_CARE_LINKS = [
-  "Help Center",
-  "Track Your Order",
-  "Corporate & Bulk Purchasing",
-  "Returns & Refunds",
-];
-
-export const SOCIAL_ICON_LINKS = [
-  { Icon: Facebook, url: "https://www.facebook.com/UILibOfficial" },
-  { Icon: Twitter, url: "https://twitter.com/uilibofficial" },
-  {
-    Icon: Youtube,
-    url: "https://www.youtube.com/channel/UCsIyD-TSO1wQFz-n2Y4i3Rg",
-  },
-  { Icon: Google, url: "https://www.google.com/search?q=ui-lib.com" },
-  { Icon: Instagram, url: "https://www.instagram.com/uilibofficial/" },
-];
-
-export const PLAY_APP_STORE_DATA = [
-  { url: "/", icon: PlayStore, title: "Google Play", subtitle: "Get it on" },
-  {
-    url: "/",
-    icon: AppleStore,
-    title: "App Store",
-    subtitle: "Download on the",
-  },
-];

package/src/components-v2/footer/footer-1.tsx

@@ -1,62 +0,0 @@
-import Box from "@mui/material/Box";
-import Grid from "@mui/material/Grid";
-import Container from "@mui/material/Container";
-// LOCAL CUSTOM COMPONENT
-import LogoSection from "./components/logo";
-import AboutLinks from "./components/about-links";
-import SocialLinks from "./components/social-links";
-import CustomerCareLinks from "./components/customer-care-links";
-// GLOBAL CUSTOM COMPONENTS
-import { Paragraph } from "@evenicanpm/storefront-core/src/components-v2/Typography";
-// STYLED COMPONENTS
-import { Heading } from "./styles/index";
-
-export default function Footer1() {
-  return (
-    <Box component="footer" bgcolor="#222935" mb={{ sm: 0, xs: 7 }}>
-      <Box
-        component={Container}
-        color="white"
-        overflow="hidden"
-        py={{ sm: 10, xs: 4 }}
-      >
-        <Grid container spacing={3}>
-          <Grid item lg={4} md={6} sm={6} xs={12}>
-            <LogoSection />
-          </Grid>
-
-          {/* ABOUT US LINKS */}
-          <Grid item lg={2} md={6} sm={6} xs={12}>
-            <AboutLinks />
-          </Grid>
-
-          {/* CUSTOMER CARE LINKS */}
-          <Grid item lg={3} md={6} sm={6} xs={12}>
-            <CustomerCareLinks />
-          </Grid>
-
-          {/* CONTACT & SOCIAL LINKS */}
-          <Grid item lg={3} md={6} sm={6} xs={12}>
-            {/* CONTACT INFORMATION */}
-            <Heading>Contact Us</Heading>
-
-            <Paragraph py={0.6} color="grey.500">
-              70 Washington Square South, New York, NY 10012, United States
-            </Paragraph>
-
-            <Paragraph py={0.6} color="grey.500">
-              Email: uilib.help@gmail.com
-            </Paragraph>
-
-            <Paragraph py={0.6} mb={2} color="grey.500">
-              Phone: +1 1123 456 780
-            </Paragraph>
-
-            {/* SOCIAL LINKS WITH ICON */}
-            <SocialLinks />
-          </Grid>
-        </Grid>
-      </Box>
-    </Box>
-  );
-}

package/src/components-v2/footer/footer-2.tsx

@@ -1,57 +0,0 @@
-import Link from "next/link";
-import Box from "@mui/material/Box";
-import Grid from "@mui/material/Grid2";
-// LOCAL CUSTOM COMPONENTS
-import AppStore from "./components/app-store";
-import SocialLinks from "./components/social-links";
-// GLOBAL CUSTOM COMPONENTS
-import BazaarImage from "@evenicanpm/storefront-core/src/components-v2/BazaarImage";
-import { Paragraph } from "@evenicanpm/storefront-core/src/components-v2/Typography";
-// DATA
-import { CUSTOMER_CARE_LINKS } from "./data/index";
-// STYLED COMPONENTS
-import { StyledFooter, StyledLink } from "./styles/index";
-
-export default function Footer2() {
-  return (
-    <StyledFooter
-      sx={{
-        padding: 5,
-        color: "white",
-        borderRadius: 2,
-        bgcolor: "#141850",
-        mb: { md: 2, xs: 10 },
-      }}
-    >
-      <Grid container spacing={6}>
-        <Grid size={{ sm: 3, xs: 12 }}>
-          <Link href="/">
-            <BazaarImage mb={2.5} src="/assets/images/logo.svg" alt="logo" />
-          </Link>
-
-          <Paragraph mb={2.5} color="grey.500" maxWidth="370px">
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Auctor
-            libero id et, in gravida. Sit diam duis mauris nulla cursus. Erat et
-            lectus vel ut sollicitudin elit at amet.
-          </Paragraph>
-
-          <AppStore />
-        </Grid>
-
-        <Grid size={{ sm: 6, xs: 12 }}>
-          {/* CUSTOMER CARE LINKS */}
-          <Box mb={2} mt={{ md: 6, xs: 2 }}>
-            {CUSTOMER_CARE_LINKS.map((item, ind) => (
-              <StyledLink href="/" key={ind}>
-                {item}
-              </StyledLink>
-            ))}
-          </Box>
-
-          {/* SOCIAL LINKS WITH ICON */}
-          <SocialLinks />
-        </Grid>
-      </Grid>
-    </StyledFooter>
-  );
-}

package/src/components-v2/footer/footer-3.tsx

@@ -1,53 +0,0 @@
-import Link from "next/link";
-import Box from "@mui/material/Box";
-import Grid from "@mui/material/Grid2";
-// import { SxProps } from "@mui/material/styles"; // 'SxProps' is declared but its value is never read.
-import Container from "@mui/material/Container";
-// LOCAL CUSTOM COMPONENT
-import AppStore from "./components/app-store";
-import SocialLinks from "./components/social-links";
-// GLOBAL CUSTOM COMPONENTS
-import BazaarImage from "@evenicanpm/storefront-core/src/components-v2/BazaarImage";
-import { Paragraph } from "@evenicanpm/storefront-core/src/components-v2/Typography";
-// DATA
-import { CUSTOMER_CARE_LINKS } from "./data/index";
-// STYLED COMPONENTS
-import { StyledRoot, StyledLink } from "./styles/index";
-
-export default function Footer3() {
-  return (
-    <StyledRoot>
-      <Container>
-        <Grid container spacing={6}>
-          <Grid size={{ md: 7, xs: 12 }}>
-            <Link href="/">
-              <BazaarImage mb={2.5} src="/assets/images/logo.svg" alt="logo" />
-            </Link>
-
-            <Paragraph mb={2.5} color="grey.300" maxWidth="370px">
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Auctor
-              libero id et, in gravida. Sit diam duis mauris nulla cursus. Erat
-              et lectus vel ut sollicitudin elit at amet.
-            </Paragraph>
-
-            <AppStore />
-          </Grid>
-
-          <Grid size={{ md: 5, xs: 12 }}>
-            {/* CUSTOMER CARE LINKS */}
-            <Box mb={2} mt={{ md: 6, xs: 2 }}>
-              {CUSTOMER_CARE_LINKS.map((item, ind) => (
-                <StyledLink href="/" key={ind} sx={{ color: "grey.300" }}>
-                  {item}
-                </StyledLink>
-              ))}
-            </Box>
-
-            {/* SOCIAL LINKS WITH ICON */}
-            <SocialLinks />
-          </Grid>
-        </Grid>
-      </Container>
-    </StyledRoot>
-  );
-}

package/src/components-v2/footer/footer-4.tsx

@@ -1,71 +0,0 @@
-import Box from "@mui/material/Box";
-import Grid from "@mui/material/Grid2";
-import Divider from "@mui/material/Divider";
-import Container from "@mui/material/Container";
-// LOCAL CUSTOM COMPONENT
-import AboutLinks from "./components/about-links";
-import SocialLinks from "./components/social-links";
-import CustomerCareLinks from "./components/customer-care-links";
-// GLOBAL CUSTOM COMPONENTS
-import LazyImage from "@evenicanpm/storefront-core/src/components-v2/LazyImage";
-import { Paragraph } from "@evenicanpm/storefront-core/src/components-v2/Typography";
-import FlexBetween from "@evenicanpm/storefront-core/src/components-v2/flex-box/flex-between";
-// STYLED COMPONENT
-import { Heading } from "./styles/index";
-
-export default function Footer4() {
-  return (
-    <Box component="footer" bgcolor="white" pt={12}>
-      <Container>
-        <Grid container spacing={3}>
-          <Grid size={{ lg: 4, md: 4, sm: 6, xs: 12 }}>
-            <Box maxWidth={100}>
-              <LazyImage
-                src={require("../../../public/assets/images/logo2.svg")}
-                alt="logo"
-              />
-            </Box>
-
-            <Paragraph mb={2.5} maxWidth={{ xl: 400 }}>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Auctor
-              libero id et, in gravida. Sit diam duis mauris nulla cursus. Erat
-              et lectus vel ut sollicitudin elit at amet.
-            </Paragraph>
-          </Grid>
-
-          {/* ABOUT US LINKS */}
-          <Grid size={{ lg: 2, md: 2, sm: 6, xs: 12 }}>
-            <AboutLinks isDark />
-          </Grid>
-
-          {/* CUSTOMER CARE LINKS */}
-          <Grid size={{ lg: 3, md: 3, sm: 6, xs: 12 }}>
-            <CustomerCareLinks isDark />
-          </Grid>
-
-          {/* CONTACT INFORMATION */}
-          <Grid size={{ lg: 3, md: 3, sm: 6, xs: 12 }}>
-            <Heading>Contact Us</Heading>
-
-            <Paragraph py={0.6}>
-              70 Washington Square South, New York, NY 10012, United States
-            </Paragraph>
-
-            <Paragraph py={0.6}>Email: uilib.help@gmail.com</Paragraph>
-
-            <Paragraph py={0.6} mb={2}>
-              Phone: +1 1123 456 780
-            </Paragraph>
-          </Grid>
-        </Grid>
-
-        <Box component={Divider} mt={{ md: 8, xs: 3 }} />
-
-        <FlexBetween pt={2} pb={{ sm: 10, md: 2 }}>
-          <Paragraph>© 2023 By UI Lib. All rights reserved.</Paragraph>
-          <SocialLinks variant="dark" />
-        </FlexBetween>
-      </Container>
-    </Box>
-  );
-}

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

@@ -1,4 +0,0 @@
-export { default as Footer1 } from "./footer-1";
-export { default as Footer2 } from "./footer-2";
-export { default as Footer3 } from "./footer-3";
-export { default as Footer4 } from "./footer-4";