@evenicanpm/storefront-core 1.0.6 → 1.1.0

package/src/stories/header.css

@@ -0,0 +1,32 @@
+.storybook-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  padding: 15px 20px;
+  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+}
+
+.storybook-header svg {
+  display: inline-block;
+  vertical-align: top;
+}
+
+.storybook-header h1 {
+  display: inline-block;
+  vertical-align: top;
+  margin: 6px 0 6px 10px;
+  font-weight: 700;
+  font-size: 20px;
+  line-height: 1;
+}
+
+.storybook-header button + button {
+  margin-left: 10px;
+}
+
+.storybook-header .welcome {
+  margin-right: 10px;
+  color: #333;
+  font-size: 14px;
+}

package/src/stories/page.css

@@ -0,0 +1,68 @@
+.storybook-page {
+  margin: 0 auto;
+  padding: 48px 20px;
+  max-width: 600px;
+  color: #333;
+  font-size: 14px;
+  line-height: 24px;
+  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+}
+
+.storybook-page h2 {
+  display: inline-block;
+  vertical-align: top;
+  margin: 0 0 4px;
+  font-weight: 700;
+  font-size: 32px;
+  line-height: 1;
+}
+
+.storybook-page p {
+  margin: 1em 0;
+}
+
+.storybook-page a {
+  color: inherit;
+}
+
+.storybook-page ul {
+  margin: 1em 0;
+  padding-left: 30px;
+}
+
+.storybook-page li {
+  margin-bottom: 8px;
+}
+
+.storybook-page .tip {
+  display: inline-block;
+  vertical-align: top;
+  margin-right: 10px;
+  border-radius: 1em;
+  background: #e7fdd8;
+  padding: 4px 12px;
+  color: #357a14;
+  font-weight: 700;
+  font-size: 11px;
+  line-height: 12px;
+}
+
+.storybook-page .tip-wrapper {
+  margin-top: 40px;
+  margin-bottom: 40px;
+  font-size: 13px;
+  line-height: 20px;
+}
+
+.storybook-page .tip-wrapper svg {
+  display: inline-block;
+  vertical-align: top;
+  margin-top: 3px;
+  margin-right: 4px;
+  width: 12px;
+  height: 12px;
+}
+
+.storybook-page .tip-wrapper svg path {
+  fill: #1ea7fd;
+}

package/src/theme/build-mui-theme.ts

@@ -0,0 +1,104 @@
+"use client";
+// The file that contains a call to createTheme must have a use client directive
+// https://mui.com/material-ui/integrations/nextjs/
+import { createTheme, Theme } from "@mui/material/styles";
+import { Shadows, ThemeOptions } from "@mui/material";
+import { ThemeItem } from "@evenicanpm/storefront-core/src/api-manager/datasources/e4/graphqlRequestSdk";
+
+/**
+ * Converts database theme object into an MUI theme object to pass to the ThemeProvider
+ * @param themeObject is E4 theme entity
+ * @returns an MUI theme object
+ */
+const themeBuilder = (themeObject: ThemeItem): Theme => {
+  const theme = {
+    breakpoints: {
+      values: {
+        xs: 0,
+        sm: themeObject.smBreakpoint,
+        md: themeObject.mdBreakpoint,
+        lg: themeObject.lgBreakpoint,
+        xl: themeObject.xlBreakpoint,
+      },
+    },
+    palette: {
+      background: {
+        default: "#FAFAFA",
+        paper: themeObject.panelBackground || "#f6f9fc",
+      },
+      primary: {
+        main: themeObject.colorPrimary,
+        contrastText: "#FFF",
+      },
+      secondary: {
+        main: themeObject.colorSecondary,
+      },
+      text: {
+        primary: themeObject.textPrimary,
+        secondary: themeObject.textSecondary,
+      },
+      warning: {
+        main: themeObject.warning,
+      },
+      success: {
+        main: themeObject.success,
+      },
+      error: {
+        main: themeObject.error,
+      },
+      info: {
+        main: themeObject.info,
+      },
+    },
+    typography: {
+      fontFamily: themeObject.fontFamily,
+      h1: {
+        fontSize: `${themeObject.h1}rem`,
+        fontFamily: themeObject.h1Font || themeObject.fontFamily,
+      },
+      h2: {
+        fontSize: `${themeObject.h2}rem`,
+        fontFamily: themeObject.fontFamily,
+      },
+      h3: {
+        fontSize: `${themeObject.h3}rem`,
+        fontFamily: themeObject.fontFamily,
+      },
+      h4: {
+        fontSize: `${themeObject.h4}rem`,
+        fontFamily: themeObject.fontFamily,
+      },
+      h5: {
+        fontSize: `${themeObject.h5}rem`,
+        fontFamily: themeObject.h5Font || themeObject.fontFamily,
+      },
+      h6: {
+        fontSize: `${themeObject.h6}rem`,
+        fontFamily: themeObject.h6Font || themeObject.fontFamily,
+      },
+      body1: {
+        fontSize: `${themeObject.body1}rem`,
+        fontFamily: themeObject.body1Font || themeObject.fontFamily,
+      },
+      body2: {
+        fontSize: `${themeObject.body2}rem`,
+        fontFamily: themeObject.body2Font || themeObject.fontFamily,
+      },
+    },
+    shape: {
+      borderRadius: 4,
+    },
+    shadows: [
+      "none",
+      "0px 0px 3px rgba(0, 0, 0, 0.09)",
+      "0px 35px 60px rgba(0, 0, 0, 0.25)",
+      "20px 55px 60px rgba(0, 0, 0, 0.25)",
+      "10px 15px 60px rgba(0, 0, 0, 0.25)",
+      ...Array(20).fill("none"),
+    ] as Shadows,
+  };
+  const e4Theme = createTheme(theme as ThemeOptions);
+  return e4Theme;
+};
+
+export default themeBuilder;

package/src/theme/components.ts

@@ -0,0 +1,163 @@
+import { Components } from "@mui/material/styles/components";
+import { dark, grey, primary, secondary, success } from "./theme-colors";
+import { typography } from "./typography";
+import { classes } from "./utils";
+
+// ========================================================
+
+declare module "@mui/material/Button" {
+  interface ButtonPropsColorOverrides {
+    dark: true;
+    paste: true;
+    marron: true;
+    orange: true;
+  }
+
+  interface ButtonPropsSizeOverrides {
+    normal: true;
+  }
+}
+// =========================================================
+
+export const components: Components = {
+  MuiCssBaseline: {
+    styleOverrides: {
+      "*": {
+        margin: 0,
+        padding: 0,
+        boxSizing: "border-box",
+        scrollBehavior: "smooth",
+      },
+      html: {
+        scrollBehavior: "smooth",
+      },
+      p: {
+        lineHeight: 1.75,
+      },
+      button: {
+        fontSize: 14,
+        fontFamily: typography.fontFamily,
+      },
+      ".MuiRating-sizeSmall": {
+        fontSize: "20px",
+      },
+      a: {
+        color: "inherit",
+        textDecoration: "none",
+      },
+      ul: {
+        margin: 0,
+        padding: 0,
+        listStyle: "none",
+      },
+      ".bg-white": {
+        backgroundColor: "white",
+      },
+
+      ...classes(),
+    },
+  },
+  MuiInputLabel: {
+    styleOverrides: {
+      root: { zIndex: 0 },
+    },
+  },
+  MuiDialog: {
+    styleOverrides: {
+      paper: { borderRadius: 8 },
+    },
+  },
+  MuiCard: {
+    styleOverrides: {
+      root: { borderRadius: "8px" },
+    },
+  },
+  MuiPagination: {
+    defaultProps: {
+      variant: "outlined",
+      color: "primary",
+    },
+  },
+  MuiMenuItem: {
+    styleOverrides: {
+      root: { paddingTop: 8, paddingBottom: 8 },
+    },
+  },
+  MuiSvgIcon: {
+    styleOverrides: {
+      root: {
+        "& .secondary": { opacity: 0.4 },
+      },
+    },
+  },
+  MuiTextField: {
+    defaultProps: { size: "small", variant: "outlined" },
+    styleOverrides: {
+      root: ({ ownerState }) => ({
+        ...(ownerState.color === "info" && {
+          "& .MuiOutlinedInput-root": { borderRadius: "8px", fontWeight: 600 },
+          "& .MuiOutlinedInput-notchedOutline": { borderColor: grey[300] },
+        }),
+      }),
+    },
+  },
+
+  MuiButton: {
+    styleOverrides: {
+      root: ({ ownerState }) => ({
+        minWidth: 0,
+        minHeight: 0,
+        fontWeight: 600,
+        borderRadius: "6px",
+        textTransform: "capitalize",
+
+        ...(ownerState.color === "dark" && {
+          color: "#fff",
+          borderRadius: 0,
+          transition: "all 0.3s",
+          ":hover": { backgroundColor: "#343434" },
+        }),
+
+        ...(ownerState.color === "dark" &&
+          ownerState.variant === "outlined" && {
+            color: dark.main,
+            borderRadius: "3px",
+            transition: "all 0.3s",
+            ":hover": { backgroundColor: dark.main, color: "white" },
+          }),
+
+        ...((ownerState.color === "info" || ownerState.color === "orange") && {
+          borderRadius: "8px",
+        }),
+
+        ...((ownerState.color === "orange" ||
+          ownerState.color === "success") && {
+          color: "white",
+        }),
+      }),
+      sizeLarge: { padding: ".6rem 2.5rem" },
+    },
+    defaultProps: { color: "inherit" },
+  },
+
+  MuiChip: {
+    defaultProps: { color: "primary" },
+    styleOverrides: {
+      labelSmall: { paddingInline: 12 },
+      colorSuccess: { color: success.main, backgroundColor: success[100] },
+      colorSecondary: {
+        color: secondary[500],
+        backgroundColor: secondary[100],
+      },
+      colorPrimary: {
+        color: primary[500],
+        backgroundColor: primary[100],
+        "&:hover": { color: primary[500], backgroundColor: primary[100] },
+      },
+    },
+  },
+
+  MuiContainer: {
+    defaultProps: { maxWidth: "xl" },
+  },
+};

package/src/theme/emotion-cache.tsx

@@ -0,0 +1,101 @@
+"use client";
+import * as React from "react";
+import createCache from "@emotion/cache";
+import { useServerInsertedHTML } from "next/navigation";
+import { CacheProvider as DefaultCacheProvider } from "@emotion/react";
+import type {
+  EmotionCache,
+  Options as OptionsOfCreateCache,
+} from "@emotion/cache";
+
+export type NextAppDirEmotionCacheProviderProps = {
+  /** This is the options passed to createCache() from 'import createCache from "@emotion/cache"' */
+  options: Omit<OptionsOfCreateCache, "insertionPoint">;
+  /** By default <CacheProvider /> from 'import { CacheProvider } from "@emotion/react"' */
+  CacheProvider?: (props: {
+    value: EmotionCache;
+    children: React.ReactNode;
+  }) => React.JSX.Element | null;
+  children: React.ReactNode;
+};
+
+// Adapted from https://github.com/garronej/tss-react/blob/main/src/next/appDir.tsx
+export default function NextAppDirEmotionCacheProvider(
+  props: NextAppDirEmotionCacheProviderProps,
+) {
+  const { options, CacheProvider = DefaultCacheProvider, children } = props;
+
+  const [registry] = React.useState(() => {
+    const cache = createCache(options);
+    cache.compat = true;
+    const prevInsert = cache.insert;
+    let inserted: { name: string; isGlobal: boolean }[] = [];
+
+    cache.insert = (...args) => {
+      const [selector, serialized] = args;
+      if (cache.inserted[serialized.name] === undefined) {
+        inserted.push({
+          name: serialized.name,
+          isGlobal: !selector,
+        });
+      }
+      return prevInsert(...args);
+    };
+
+    const flush = () => {
+      const prevInserted = inserted;
+      inserted = [];
+      return prevInserted;
+    };
+
+    return { cache, flush };
+  });
+
+  useServerInsertedHTML(() => {
+    const inserted = registry.flush();
+
+    if (inserted.length === 0) {
+      return null;
+    }
+
+    let styles = "";
+    let dataEmotionAttribute = registry.cache.key;
+
+    const globals: { name: string; style: string }[] = [];
+
+    inserted.forEach(({ name, isGlobal }) => {
+      const style = registry.cache.inserted[name] ?? "";
+
+      if (typeof style !== "boolean") {
+        if (isGlobal) {
+          globals.push({ name, style });
+        } else {
+          styles += style;
+          dataEmotionAttribute += ` ${name}`;
+        }
+      }
+    });
+
+    return (
+      <React.Fragment>
+        {globals.map(({ name, style }) => (
+          <style
+            key={name}
+            data-emotion={`${registry.cache.key}-global ${name}`}
+            // eslint-disable-next-line react/no-danger
+            dangerouslySetInnerHTML={{ __html: style }}
+          />
+        ))}
+        {styles && (
+          <style
+            data-emotion={dataEmotionAttribute}
+            // eslint-disable-next-line react/no-danger
+            dangerouslySetInnerHTML={{ __html: styles }}
+          />
+        )}
+      </React.Fragment>
+    );
+  });
+
+  return <CacheProvider value={registry.cache}>{children}</CacheProvider>;
+}

package/src/theme/theme-colors.ts

@@ -0,0 +1,205 @@
+// =================================================================
+interface CustomPaletteColor {
+  50: string;
+  100: string;
+  200: string;
+  300: string;
+  400: string;
+  600: string;
+  700: string;
+  800: string;
+  900: string;
+  main: string;
+  contrastText: string;
+}
+
+declare module "@mui/material/styles" {
+  interface Palette {
+    dark: CustomPaletteColor;
+    paste: CustomPaletteColor;
+    marron: CustomPaletteColor;
+    orange: CustomPaletteColor;
+    bluish: CustomPaletteColor;
+  }
+
+  interface PaletteOptions {
+    gold: CustomPaletteColor;
+    dark: CustomPaletteColor;
+    paste: CustomPaletteColor;
+    marron: CustomPaletteColor;
+    orange: CustomPaletteColor;
+    bluish: CustomPaletteColor;
+  }
+}
+// =================================================================
+
+export const grey = {
+  900: "#2B3445", // Main Text
+  800: "#373F50", // Paragraph
+  700: "#4B566B",
+  600: "#7D879C", // Low Priority form Title/Text
+  500: "#AEB4BE",
+  400: "#DAE1E7", // Border
+  300: "#E3E9EF",
+  200: "#F3F5F9", // Line Stroke
+  100: "#FFFFFF",
+};
+
+export const primary = {
+  100: "#FCE9EC",
+  200: "#F8C7CF",
+  300: "#F07D90",
+  400: "#EC6178",
+  500: "#D23F57",
+  600: "#E63E58",
+  700: "#E3364E",
+  800: "#DF2E44",
+  900: "#D91F33",
+};
+
+export const secondary = {
+  100: "#e8e8ee",
+  200: "#b9bacb",
+  300: "#8a8ca8",
+  400: "#5b5d85",
+  500: "#141850",
+  600: "#0F3460",
+  700: "#101340",
+  800: "#0e1138",
+  900: "#0c0e30",
+  main: "#0F3460",
+  dark: "#0c0e30",
+};
+
+export const error = {
+  100: "#FFEAEA",
+  200: "#FFCBCB",
+  300: "#FFA9A9",
+  400: "#FF6D6D",
+  500: "#FF5353",
+  600: "#FF4C4C",
+  700: "#FF4242",
+  800: "#FF3939",
+  900: "#FF2929",
+  main: "#E94560",
+};
+
+export const success = {
+  100: "#E7F9ED",
+  200: "#C2F1D1",
+  300: "#99E8B3",
+  400: "#52D77E",
+  500: "#33D067",
+  600: "#2ECB5F",
+  700: "#27C454",
+  800: "#20BE4A",
+  900: "#0b7724",
+  main: "rgb(51, 208, 103)",
+};
+
+export const blue = {
+  50: "#f3f5f9",
+  100: "#DBF0FE",
+  200: "#B8DEFE",
+  300: "#94C9FE",
+  400: "#7AB6FD",
+  500: "#4E97FD",
+  600: "#3975D9",
+  700: "#2756B6",
+  800: "#183C92",
+  900: "#0E2979",
+  main: "#4E97FD",
+  contrastText: "#FFFFFF",
+};
+
+export const marron = {
+  50: "#f3f5f9",
+  100: "#F6F2ED",
+  200: "#F8DBD1",
+  300: "#EBBCB3",
+  400: "#D89C98",
+  600: "#A3545C",
+  700: "#883948",
+  800: "#6E2438",
+  900: "#5B162F",
+  main: "#BE7374",
+};
+
+export const paste = {
+  50: "#F5F5F5",
+  100: "#DDFBF1",
+  200: "#BDF7E8",
+  300: "#97E8DA",
+  400: "#76D2CA",
+  600: "#36929A",
+  700: "#257181",
+  800: "#175368",
+  900: "#0E3D56",
+  main: "#4BB4B4",
+  contrastText: "#FFFFFF",
+};
+
+export const orange = {
+  50: "#FEE9D2",
+  100: "#FDD8AF",
+  200: "#FCC487",
+  300: "#FCB05F",
+  400: "#FB9C37",
+  500: "#FA8C16",
+  600: "#C86904",
+  700: "#A05403",
+  800: "#783F03",
+  900: "#502A02",
+  main: "#FA8C16",
+  dark: "#C86904",
+  light: "#FDD8AF",
+};
+
+export const bluish = {
+  100: "#DDFBF1",
+  200: "#BDF7E8",
+  300: "#97E8DA",
+  400: "#76D2CA",
+  500: "#4BB4B4",
+  600: "#36929A",
+  700: "#257181",
+  800: "#175368",
+  900: "#0E3D56",
+  main: "#4BB4B4",
+  dark: "#36929A",
+  light: "#BDF7E8",
+};
+
+export const warning = {
+  100: "#FFF8E5",
+  main: "#FFCD4E",
+  dark: "#FA8C16",
+  contrastText: "#FFFFFF",
+};
+
+export const gold = {
+  main: "#BB9C36",
+};
+
+export const bluishBackground = "#F6F9FC";
+
+export const dark = { main: "#1F2937" };
+export const white = { main: "#fff" };
+
+export const themeColors = {
+  dark,
+  grey,
+  gold,
+  paste,
+  error,
+  orange,
+  marron,
+  bluish,
+  warning,
+  success,
+  secondary,
+  info: blue,
+  divider: grey[200],
+  background: { default: grey[100] },
+  text: { primary: grey[900], secondary: grey[800], disabled: grey[400] },
+};