@evenicanpm/storefront-core 1.0.0-alpha

package/src/components/Blocks/interfaces.ts

@@ -0,0 +1,240 @@
+export interface Slide {
+  id: number;
+  heading: string;
+  description: string;
+  buttonText: string;
+  buttonColor: string;
+  image: Media;
+  linkToPage: PageLink | null;
+  linkToProduct: ProductLink | null;
+}
+
+export interface HeroCarouselBlock {
+  __component: "blocks.hero-carousel";
+  id: number;
+  Slides: Slide[];
+}
+
+export interface LogoScrollerBlock {
+  __component: "blocks.logo-scroller";
+  id: number;
+  image: Media[];
+}
+
+export interface ServiceCard {
+  id: number;
+  title: string;
+  description: string;
+  icon: string;
+}
+
+export interface ServicesBlock {
+  __component: "blocks.services";
+  id: number;
+  Services_Card: ServiceCard[];
+}
+
+export interface HeroSectionBlock {
+  __component: "blocks.hero-section";
+  id: number;
+  heading: string;
+  subheading: string | null;
+  buttonText: string;
+  backgroundImage: Media;
+}
+
+export interface Category {
+  id: number;
+  name: string;
+  image: Media;
+  tier: number;
+  createdAt: string;
+  updatedAt: string;
+  publishedAt: string;
+}
+
+export interface CategoryWrapper {
+  id: number;
+  category: Category;
+}
+
+export interface CategoryCarouselBlock {
+  __component: "blocks.category-carousel";
+  id: number;
+  CategoryWrapper: CategoryWrapper[];
+}
+
+export interface Product {
+  id: number;
+  sku: string;
+  description: string | null;
+  image: Media[];
+  keywords: string | null;
+  createdAt: string;
+  updatedAt: string;
+  publishedAt: string;
+}
+
+export interface ProductWrapper {
+  id: number;
+  product: Product;
+}
+
+export interface ProductSectionFullWidthBlock {
+  __component: "blocks.product-section-full-width";
+  id: number;
+  heading: string;
+  icon: string;
+  ProductWrapper: ProductWrapper[];
+}
+
+export interface ProductCarouselBlock {
+  __component: "blocks.product-carousel";
+  id: number;
+  heading: string;
+  products: Product[];
+}
+
+export interface FeaturesPillBlock {
+  __component: "blocks.features-pill";
+  id: number;
+  feature_1: string;
+  feature_2: string;
+  feature_3: string;
+  feature_4: string;
+}
+
+export interface FeaturedCategoriesBlock {
+  __component: "blocks.featured-categories";
+  id: number;
+  categories: Category[];
+}
+
+export interface FeaturedProductsBlock {
+  __component: "blocks.featured-products";
+  id: number;
+  name: string;
+  products: Product[];
+}
+
+export interface FooterBlock {
+  id: number;
+  __component: "blocks.footer";
+  address: string;
+  companyDescription: string;
+  companyName: string;
+  email: string;
+  phoneNumber: string;
+}
+
+export interface ImageBlock {
+  id: number;
+  __component: "blocks.image-block";
+  media: MediaData;
+}
+
+export interface RichTextBlock {
+  id: number;
+  __component: "blocks.rich-text";
+  content: string;
+}
+
+export interface ImageFormat {
+  ext: string;
+  url: string;
+  hash: string;
+  mime: string;
+  name: string;
+  path: string | null;
+  size: number;
+  width: number;
+  height: number;
+}
+
+export interface Formats {
+  /** Strapi generates only the sizes you configure.  
+        Keep this flexible by using an index signature. */
+  [size: string]: ImageFormat;
+}
+
+export interface Media {
+  id: number;
+  name: string;
+  alternativeText: string | null;
+  caption: string | null;
+  width: number | null;
+  height: number | null;
+  url: string;
+  ext: string;
+  mime: string;
+  size: number;
+  createdAt: string;
+  updatedAt: string;
+  formats?: Formats;
+}
+
+export interface PageLink {
+  id: number;
+  title: string;
+  slug: string;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface ProductLink {
+  id: number;
+  name: string;
+  slug: string;
+  sku: string;
+  // Add more fields if needed
+}
+
+export interface MetaItem {
+  id: number;
+  name: string;
+  content: string;
+}
+
+export interface MediaAttributes {
+  url: string;
+}
+
+export interface MediaData {
+  attributes: MediaAttributes;
+}
+
+export interface MetaMedia {
+  data: MediaData;
+}
+
+export interface SeoData {
+  metaTitle?: string;
+  metaDescription?: string;
+  metaKeywords?: string;
+  metaImage?: { media?: MetaMedia | null } | null;
+  meta?: MetaItem[];
+  preventIndexing?: boolean;
+  structuredData?: string | null;
+}
+
+export interface SeoPageData {
+  title?: string;
+  seo?: SeoData;
+}
+
+export type Block =
+  | HeroCarouselBlock
+  | LogoScrollerBlock
+  | ServicesBlock
+  | HeroSectionBlock
+  | CategoryCarouselBlock
+  | ProductSectionFullWidthBlock
+  | ProductCarouselBlock
+  | FeaturesPillBlock
+  | FeaturedCategoriesBlock
+  | FeaturedProductsBlock
+  | FooterBlock
+  | ImageBlock
+  | RichTextBlock;
+
+export type BlockManagerType = Block[];

package/src/components/BoxShadowCard.tsx

@@ -0,0 +1,16 @@
+"use client";
+import { styled } from "@mui/material/styles";
+
+export const BorderShadowCard = styled("div")(({ theme }) => ({
+  borderRadius: 4,
+  padding: "0.5rem 0px",
+  transformOrigin: "top",
+  boxShadow: "rgba(149, 157, 165, 0.1) 0px 8px 24px;",
+  backgroundColor: theme.palette.background.paper,
+  border: "1px solid rgba(0, 0, 0, 0.1)",
+  marginBottom: "1rem",
+}));
+
+// these should use theme
+export const lightShadow = { boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)" };
+export const lightBorder = { border: "1px solid rgba(0, 0, 0, 0.1)" };

package/src/components/Footer/data/index.ts

@@ -0,0 +1,32 @@
+// CUSTOM ICON COMPONENTS
+import { MdFacebook as Facebook } from "react-icons/md";
+import { FaGoogle as Google } from "react-icons/fa";
+import { FaTwitter as Twitter } from "react-icons/fa";
+import { FaInstagram as Instagram } from "react-icons/fa";
+
+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: 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: Facebook, title: "Google Play", subtitle: "Get it on" },
+  { url: "/", icon: Facebook, title: "App Store", subtitle: "Download on the" },
+];

package/src/components/Footer/index.tsx

@@ -0,0 +1,88 @@
+import React from "react";
+
+// MUI
+import { Box, Container } from "@mui/material";
+import Grid from "@mui/material/Grid2";
+
+// Local Custom Components
+import Logo from "./sections/FooterLogo";
+import Links from "./sections/FooterLinks";
+import Contact from "./sections/FooterContact";
+
+import cms from "@/cms/endpoints";
+
+import { FooterBlock, FooterResponse } from "./interfaces";
+
+const getBlockComponent = (block: FooterBlock, index: number) => {
+  let Block;
+
+  switch (block.__component) {
+    case "footer.links":
+      Block = Links;
+      return (
+        <Block key={`index-${index}`} title={block.title} links={block.links} />
+      );
+    case "footer.logo":
+      Block = Logo;
+      return <Block key={`index-${index}`} description={block.description} />;
+    case "footer.contact":
+      Block = Contact;
+      return <Block key={`index-${index}`} social={block.social} />;
+    default:
+      return null;
+  }
+};
+
+const fetchFooterData = async (): Promise<FooterResponse | null> => {
+  try {
+    const response = await fetch(cms.getCmsApiUrl("footer"), {
+      cache: "no-store", // Ensure server-side fetching
+    });
+
+    if (!response.ok) {
+      return null;
+    }
+
+    const text = await response.text();
+
+    if (!text) {
+      return null;
+    }
+
+    return JSON.parse(text) as FooterResponse;
+  } catch (error) {
+    console.error("Error fetching footer data:", error);
+    return null;
+  }
+};
+
+const Footer = async () => {
+  const data = await fetchFooterData();
+  const sections = data?.data?.sections;
+
+  if (!(sections && sections.length)) {
+    return null;
+  }
+
+  return (
+    <Box
+      component="footer"
+      bgcolor="#222935"
+      mt={{ xs: 7 }}
+      mb={{ sm: 0, xs: 7 }}
+    >
+      <Box
+        component={Container}
+        color="white"
+        overflow="hidden"
+        py={{ sm: 10, xs: 4 }}
+      >
+        <Grid container spacing={6}>
+          {sections.map(getBlockComponent)}
+        </Grid>
+      </Box>
+    </Box>
+  );
+};
+
+export default Footer;

package/src/components/Footer/interfaces.ts

@@ -0,0 +1,37 @@
+export interface Link {
+  slug: string;
+  title: string;
+}
+export interface SocialLink {
+  name: string;
+  link: string;
+}
+interface FooterLogoBlock {
+  id: number;
+  __component: "footer.logo";
+  description: string;
+}
+
+interface FooterLinksBlock {
+  id: number;
+  __component: "footer.links";
+  title: string;
+  links: Link[];
+}
+
+interface FooterContactBlock {
+  id: number;
+  __component: "footer.contact";
+  social: SocialLink[];
+}
+
+export type FooterBlock =
+  | FooterLogoBlock
+  | FooterLinksBlock
+  | FooterContactBlock;
+
+export interface FooterResponse {
+  data: {
+    sections: FooterBlock[];
+  };
+}

package/src/components/Footer/sections/FooterAppStore.tsx

@@ -0,0 +1,45 @@
+import React, { Fragment } from "react";
+import FlexBox from "@/components/_components/flex-box/flex-box";
+import { MdFacebook as Facebook } from "react-icons/md";
+import { Link } from "react-router-dom";
+import { Box } from "@mui/material";
+
+export const PLAY_APP_STORE_DATA = [
+  { url: "/", icon: Facebook, title: "Google Play", subtitle: "Get it on" },
+  { url: "/", icon: Facebook, title: "App Store", subtitle: "Download on the" },
+];
+
+const AppStore = () => {
+  return (
+    <FlexBox flexWrap="wrap" m={-1}>
+      {PLAY_APP_STORE_DATA.map(({ icon: Icon, ...item }, i) => (
+        <Fragment key={i + item.title}>
+          <Link to="/">
+            <Box
+              m={1}
+              gap={1}
+              p="10px 16px"
+              color="white"
+              display="flex"
+              bgcolor="#161d2b"
+              borderRadius="5px"
+              alignItems="center"
+            >
+              <Icon></Icon>
+              <Box>
+                <Box fontSize="8px" fontWeight="600" lineHeight="1">
+                  {item.subtitle}
+                </Box>
+                <Box fontSize="14px" fontWeight="700">
+                  {item.title}
+                </Box>
+              </Box>
+            </Box>
+          </Link>
+        </Fragment>
+      ))}
+    </FlexBox>
+  );
+};
+
+export default AppStore;

package/src/components/Footer/sections/FooterContact.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import { Heading } from "../styles/index";
+import { Paragraph } from "@/components/_components/Typography";
+import Grid from "@mui/material/Grid2";
+import SocialLinks from "./FooterSocialLinks";
+import { SocialLink } from "../interfaces";
+
+interface Props {
+  isDark?: boolean;
+  title?: string;
+  social?: SocialLink[];
+}
+
+const AboutLinks = (props: Props) => {
+  return (
+    <Grid size={{ lg: 3, md: 6, sm: 6, xs: 12 }}>
+      <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: evenica@example.org
+      </Paragraph>
+
+      <Paragraph py={0.6} mb={2} color="grey.500">
+        Phone: +1 1123 456 780
+      </Paragraph>
+
+      <SocialLinks socials={props.social} />
+    </Grid>
+  );
+};
+
+export default AboutLinks;

package/src/components/Footer/sections/FooterLinks.tsx

@@ -0,0 +1,30 @@
+import React, { Fragment } from "react";
+import { Heading, StyledLink } from "../styles/index";
+import { Box } from "@mui/material";
+import Grid from "@mui/material/Grid2";
+import { Link } from "../interfaces";
+
+interface Props {
+  isDark?: boolean;
+  title?: string;
+  links?: Link[];
+}
+
+const Links = (props: Props) => {
+  return (
+    <Grid size={{ lg: 3, md: 6, sm: 6, xs: 12 }}>
+      <Heading>{props.title}</Heading>
+      <Box>
+        {props?.links?.map((item, ind) => (
+          <Fragment key={ind}>
+            <StyledLink isDark={props.isDark} href={`pages/${item.slug}`}>
+              {item.title}
+            </StyledLink>
+          </Fragment>
+        ))}
+      </Box>
+    </Grid>
+  );
+};
+
+export default Links;

package/src/components/Footer/sections/FooterLogo.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import React from "react";
+import Grid from "@mui/material/Grid2";
+import { Paragraph } from "@/components/_components/Typography";
+import SiteLogo from "@/components/_components/site-logo";
+import useTheme from "@mui/material/styles/useTheme";
+import useMediaQuery from "@mui/material/useMediaQuery";
+
+interface Props {
+  description: string;
+}
+
+export default function LogoSection(props: Props) {
+  const theme = useTheme();
+  const downMd = useMediaQuery(theme.breakpoints.down(1150)); // same like in header
+  return (
+    <Grid size={{ lg: 3, md: 6, sm: 6, xs: 12 }}>
+      <SiteLogo {...(downMd ? { height: "2.125rem" } : {})} />
+
+      <Paragraph mb={2.5} color="grey.500">
+        {props.description}
+      </Paragraph>
+    </Grid>
+  );
+}

package/src/components/Footer/sections/FooterSocialLinks.tsx

@@ -0,0 +1,70 @@
+"use client";
+
+import React from "react";
+import IconButton from "@mui/material/IconButton";
+import styled from "@mui/material/styles/styled";
+
+// Social Icons
+import { MdFacebook as Facebook } from "react-icons/md";
+import { FaGoogle as Google } from "react-icons/fa";
+import { FaTwitter as Twitter } from "react-icons/fa";
+import { FaInstagram as Instagram } from "react-icons/fa";
+
+// Custom Components
+import FlexBox from "@/components/_components/flex-box/flex-box";
+import { SocialLink } from "../interfaces";
+
+// 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" },
+}));
+
+interface Props {
+  variant?: "light" | "dark";
+  socials?: SocialLink[];
+}
+
+export default function SocialLinks({ variant = "light", socials }: Props) {
+  return (
+    <FlexBox className="flex" mx={-0.625}>
+      {socials?.map(({ name, link }, i) => {
+        let Icon;
+
+        switch (name) {
+          case "Facebook":
+            Icon = Facebook;
+            break;
+          case "Instagram":
+            Icon = Instagram;
+            break;
+          case "Google":
+            Icon = Google;
+            break;
+          case "Twitter":
+            Icon = Twitter;
+            break;
+        }
+
+        return (
+          <a href={link} target="_blank" rel="noreferrer noopenner" key={i}>
+            <StyledIconButton variant={variant}>
+              {Icon && <Icon fontSize="inherit" className="icon" />}
+            </StyledIconButton>
+          </a>
+        );
+      })}
+    </FlexBox>
+  );
+}

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

@@ -0,0 +1,39 @@
+"use client";
+
+import NextLink from "next/link";
+import styled from "@mui/material/styles/styled";
+
+type LinkProps = { isDark?: boolean };
+
+export const StyledLink = styled(NextLink, {
+  shouldForwardProp: (prop) => prop !== "isDark",
+})<LinkProps>(({ theme, isDark }) => ({
+  borderRadius: 4,
+  display: "block",
+  cursor: "pointer",
+  position: "relative",
+  padding: "0.3rem 0rem",
+  ...(!isDark && {
+    color: theme.palette.grey[500],
+    "&:hover": { color: theme.palette.grey[100] },
+  }),
+}));
+
+export const StyledFooter = styled("footer")(({ theme }) => ({
+  [theme.breakpoints.down("md")]: { marginBottom: "4rem" },
+}));
+
+export const StyledRoot = styled("footer")(({ theme }) => ({
+  padding: 40,
+  color: "white",
+  borderRadius: 8,
+  background: theme.palette.primary.main,
+  [theme.breakpoints.down("md")]: { marginBottom: "6rem !important" },
+}));
+
+export const Heading = styled("h6")({
+  fontSize: 18,
+  lineHeight: 1,
+  fontWeight: 600,
+  marginBottom: 12,
+});