@ebubekirylmaz/link-test 1.0.0

package/src/components/NucleoidLoginForm/NucleoidLoginForm.jsx

@@ -0,0 +1,69 @@
+import React from "react";
+import styles from "../../widgets/LoginForm/LoginFormStyles";
+import { Box, Button, Link as MuiLink, TextField } from "@mui/material";
+
+const NucleoidLoginForm = ({
+  email,
+  password,
+  setEmail,
+  setPassword,
+  onSubmit,
+}) => (
+  <Box
+    component="form"
+    sx={styles.formBoxStyle}
+    noValidate
+    autoComplete="off"
+    onSubmit={(e) => {
+      e.preventDefault();
+      if (typeof onSubmit === "function") {
+        onSubmit(email, password);
+      }
+    }}
+  >
+    <TextField
+      required
+      type="email"
+      label="Email"
+      variant="outlined"
+      sx={{ margin: "1rem 0 0", width: "100%" }}
+      size="small"
+      value={email}
+      onChange={(e) => setEmail(e.target.value)}
+    />
+
+    <TextField
+      required
+      label="Password"
+      type="password"
+      variant="outlined"
+      sx={{ margin: "1rem 0 1rem", width: "100%" }}
+      size="small"
+      value={password}
+      onChange={(e) => setPassword(e.target.value)}
+    />
+
+    <MuiLink
+      href="/console/login2"
+      variant="body2"
+      sx={{
+        textDecoration: "none",
+        alignSelf: "center",
+        justifySelf: "center",
+      }}
+    >
+      Forgot Password?
+    </MuiLink>
+
+    <Button
+      variant="contained"
+      color="primary"
+      sx={styles.signInButtonStyle}
+      type="submit"
+    >
+      Sign In
+    </Button>
+  </Box>
+);
+
+export default NucleoidLoginForm;

package/src/components/NucleoidLoginForm/index.js

@@ -0,0 +1 @@
+export { default } from "./NucleoidLoginForm.jsx";

package/src/components/NucleoidLoginForm/styles.js

@@ -0,0 +1,3 @@
+const styles = {};
+
+export default styles;

package/src/components/Sidebar/Sidebar.jsx

@@ -0,0 +1,76 @@
+import { Box } from "@mui/material";
+import Drawer from "@mui/material/Drawer";
+import { Link } from "react-router-dom";
+import List from "@mui/material/List";
+import ListItemButton from "@mui/material/ListItemButton";
+import ListItemText from "@mui/material/ListItemText";
+import React from "react";
+import styles from "./styles";
+
+const Sidebar = ({ routes, isCollapsed, currentPage }) => {
+  const drawerWidth = isCollapsed ? 75 : 280;
+
+  return (
+    <>
+      <Box
+        sx={{
+          top: 0,
+          left: 0,
+          height: "4rem",
+          width: 75,
+          position: "absolute",
+          marginRight: -10.2,
+        }}
+      ></Box>
+      <Drawer
+        anchor="left"
+        variant="persistent"
+        open={true}
+        data-testid="sidebar"
+        sx={{
+          width: drawerWidth,
+          "& .MuiDrawer-paper": {
+            ...styles.paper,
+            width: drawerWidth,
+            transition: ".5s ease",
+          },
+        }}
+      >
+        <List sx={styles.list}>
+          {routes.map((page, index) => (
+            <div key={index}>
+              <Link to={page.url} style={{ textDecoration: "none" }}>
+                <ListItemButton sx={styles.listItemButton}>
+                  <Box
+                    sx={{
+                      ...styles.box,
+                      flexDirection: isCollapsed ? "column" : "row",
+                      alignItems: isCollapsed ? "center" : "flex-start",
+                    }}
+                  >
+                    <Box
+                      sx={{
+                        mb: isCollapsed ? 0 : 0,
+                        mr: isCollapsed ? 0 : 3,
+                      }}
+                    >
+                      {page.url === currentPage ? (
+                        <page.activeIcon />
+                      ) : (
+                        <page.deactiveIcon />
+                      )}
+                    </Box>
+
+                    {!isCollapsed && <ListItemText primary={page.name} />}
+                  </Box>
+                </ListItemButton>
+              </Link>
+            </div>
+          ))}
+        </List>
+      </Drawer>
+    </>
+  );
+};
+
+export default Sidebar;

package/src/components/Sidebar/index.js

@@ -0,0 +1 @@
+export { default } from "./Sidebar.jsx";

package/src/components/Sidebar/styles.js

@@ -0,0 +1,25 @@
+const styles = {
+  paper: {
+    top: "4rem",
+    backgroundColor: "custom.sidebarBG",
+    height: `calc(100% - 4rem)`,
+    zIndex: 1,
+    padding: "0 15px",
+
+    color: "text.secondary",
+  },
+  list: { padding: "15px 0" },
+  listItemButton: {
+    color: "primary.contrastText",
+    "&:hover": {
+      bgcolor: "text.secondary",
+      color: "primary.contrastText",
+    },
+  },
+  box: {
+    display: "flex",
+    width: "100%",
+  },
+};
+
+export default styles;

package/src/components/SocialLoginButtons/SocialLoginButtons.jsx

@@ -0,0 +1,55 @@
+import { Button } from "@mui/material";
+import React from "react";
+import styles from "../../widgets/LoginForm/LoginFormStyles";
+
+import { GitHub, Google, LinkedIn } from "@mui/icons-material";
+
+const SocialLoginButtons = ({
+  googleEnable,
+  onGoogle,
+  githubEnable,
+  onGithub,
+  linkedinEnable,
+  onLinkedin,
+}) => {
+  return (
+    <>
+      {githubEnable && (
+        <Button
+          startIcon={<GitHub />}
+          data-cy="github-login-button"
+          variant="contained"
+          color="primary"
+          sx={styles.githubButtonStyle}
+          onClick={onGithub}
+        >
+          Continue with GitHub
+        </Button>
+      )}
+
+      {googleEnable && (
+        <Button
+          startIcon={<Google style={{ color: "#DB4437" }} />}
+          variant="contained"
+          color="primary"
+          sx={styles.googleButtonStyle}
+          onClick={onGoogle}
+        >
+          Continue with Google
+        </Button>
+      )}
+      {linkedinEnable && (
+        <Button
+          startIcon={<LinkedIn />}
+          variant="contained"
+          sx={styles.linkedinButtonStyle}
+          onClick={onLinkedin}
+        >
+          Continue with LinkedIn
+        </Button>
+      )}
+    </>
+  );
+};
+
+export default SocialLoginButtons;

package/src/components/SocialLoginButtons/index.js

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

package/src/components/SocialLoginButtons/styles.js

@@ -0,0 +1,3 @@
+const styles = {};
+
+export default styles;

package/src/components/TopNavBar/TopNavBar.jsx

@@ -0,0 +1,186 @@
+import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
+import { Link } from "react-router-dom";
+import MenuIcon from "@mui/icons-material/Menu";
+import React from "react";
+import config from "../../config/config";
+import styles from "./styles";
+import { useContext } from "../../ContextProvider/ContextProvider";
+import { useNavigate } from "react-router";
+
+import {
+  AppBar,
+  Avatar,
+  Box,
+  Button,
+  IconButton,
+  Menu,
+  MenuItem,
+  Toolbar,
+  Tooltip,
+  Typography,
+} from "@mui/material";
+
+function TopNavBar({
+  anchorElUser,
+  handleOpenUserMenu,
+  handleCloseUserMenu,
+  itemsData,
+  onItemSelect,
+  routes,
+  sideBarToggle,
+  selectedItem,
+  setSelectedItem,
+  itemUrl,
+  itemName,
+  userData,
+}) {
+  const [anchorElItem, setAnchorElItem] = React.useState(null);
+  const { largeIcon } = config().template.login;
+  const handleOpenItemMenu = (event) => {
+    setAnchorElItem(event.currentTarget);
+  };
+
+  const handleCloseItemMenu = () => {
+    setAnchorElItem(null);
+  };
+  const navigate = useNavigate();
+
+  const selectItem = (item) => {
+    dispatch({ type: "ITEM_SELECT", payload: item.id });
+    setSelectedItem(item);
+    onItemSelect(item);
+    handleCloseItemMenu();
+  };
+
+  const [state, dispatch] = useContext();
+  const settings = [
+    {
+      name: "Profile",
+      action: () => {
+        handleCloseUserMenu();
+      },
+    },
+    {
+      name: "Logout",
+      action: () => {
+        dispatch({ type: "LOGOUT" });
+        handleCloseUserMenu();
+        navigate("/login");
+        navigate(0);
+      },
+    },
+  ];
+
+  React.useEffect(() => {
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [state.itemId]);
+
+  return (
+    <AppBar position="sticky" sx={{ ...styles.appBar, maxHeight: "4.25rem" }}>
+      <Toolbar disableGutters sx={styles.toolBar}>
+        <Box
+          component="img"
+          src={largeIcon}
+          onClick={() => navigate("/")}
+          sx={{ cursor: "pointer" }}
+        />
+        {selectedItem && (
+          <Box>
+            <IconButton size="large" onClick={sideBarToggle} color="inherit">
+              <MenuIcon />
+            </IconButton>
+          </Box>
+        )}
+        <Box
+          sx={{
+            flexGrow: 0,
+            pl: 2,
+          }}
+        >
+          <Button
+            onClick={handleOpenItemMenu}
+            sx={{ my: 2, color: "primary.contrastText" }}
+          >
+            {state.itemId ? selectedItem?.name : `Select a ${itemName}`}
+            <ArrowDropDownIcon />
+          </Button>
+          <Menu
+            id="item-menu"
+            anchorEl={anchorElItem}
+            keepMounted
+            open={Boolean(anchorElItem)}
+            onClose={handleCloseItemMenu}
+            sx={{ my: 2, color: "primary.contrastText" }}
+          >
+            {itemsData?.map((item) => (
+              <MenuItem
+                key={item.id}
+                component={Link}
+                to={itemUrl}
+                onClick={() => selectItem(item)}
+              >
+                <Typography textAlign="center">{item.name}</Typography>
+              </MenuItem>
+            ))}
+          </Menu>
+
+          {routes
+            .filter((route) => !route.hide)
+            .map((page, index) => (
+              <Button
+                key={index}
+                component={Link}
+                to={page.url}
+                sx={{ my: 2, color: "primary.contrastText" }}
+              >
+                {page.name}
+              </Button>
+            ))}
+        </Box>
+        <Box sx={{ position: "absolute", right: 30 }}>
+          <Tooltip title="Open settings">
+            <IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}>
+              <Avatar
+                sx={{ width: "2.2rem", height: "auto" }}
+                data-cy="user-avatar"
+                src={userData?.avatar_url || userData?.picture}
+              />
+            </IconButton>
+          </Tooltip>
+          <Menu
+            sx={{ mt: "45px" }}
+            id="menu-appbar"
+            anchorEl={anchorElUser}
+            anchorOrigin={{
+              vertical: "top",
+              horizontal: "right",
+            }}
+            keepMounted
+            transformOrigin={{
+              vertical: "top",
+              horizontal: "right",
+            }}
+            open={Boolean(anchorElUser)}
+            onClose={handleCloseUserMenu}
+          >
+            <Typography
+              sx={{
+                margin: "0.5rem",
+              }}
+              data-cy="user-name"
+            >
+              {userData?.name}
+            </Typography>
+            {settings.map((setting) => (
+              <MenuItem key={setting.name} onClick={setting.action}>
+                <Typography textAlign="center">{setting.name}</Typography>
+              </MenuItem>
+            ))}
+          </Menu>
+        </Box>
+      </Toolbar>
+    </AppBar>
+  );
+}
+
+export default TopNavBar;

package/src/components/TopNavBar/index.js

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

package/src/components/TopNavBar/styles.js

@@ -0,0 +1,7 @@
+const styles = {
+  appBar: { zIndex: 1201 },
+  toolBar: { pr: 2, pl: 4, color: "primary.contrastText" },
+  imgBox: { height: "20px", marginX: "15px" },
+};
+
+export default styles;

package/src/components/animate/index.js

@@ -0,0 +1,4 @@
+export * from "./variants";
+
+export { default as MotionViewport } from "./motion-viewport";
+export { default as MotionContainer } from "./motion-container";

package/src/components/animate/motion-container.jsx

@@ -0,0 +1,38 @@
+import Box from "@mui/material/Box";
+import React from "react";
+import { motion } from "framer-motion";
+import { varContainer } from "./variants";
+
+export default function MotionContainer({
+  animate,
+  action = false,
+  children,
+  ...other
+}) {
+  if (action) {
+    return (
+      <Box
+        component={motion.div}
+        initial={false}
+        animate={animate ? "animate" : "exit"}
+        variants={varContainer()}
+        {...other}
+      >
+        {children}
+      </Box>
+    );
+  }
+
+  return (
+    <Box
+      component={motion.div}
+      initial="initial"
+      animate="animate"
+      exit="exit"
+      variants={varContainer()}
+      {...other}
+    >
+      {children}
+    </Box>
+  );
+}

package/src/components/animate/motion-lazy.jsx

@@ -0,0 +1,11 @@
+import React from "react";
+
+import { LazyMotion, domMax, motion } from "framer-motion";
+
+export function MotionLazy({ children }) {
+  return (
+    <LazyMotion strict features={domMax}>
+      <motion.div style={{ height: "100%" }}> {children} </motion.div>
+    </LazyMotion>
+  );
+}

package/src/components/animate/motion-viewport.jsx

@@ -0,0 +1,30 @@
+import Box from "@mui/material/Box";
+import React from "react";
+import { motion } from "framer-motion";
+import { useResponsive } from "../../hooks/use-responsive";
+import { varContainer } from "./variants";
+
+export default function MotionViewport({
+  children,
+  disableAnimatedMobile = true,
+  ...other
+}) {
+  const smDown = useResponsive("down", "sm");
+
+  if (smDown && disableAnimatedMobile) {
+    return <Box {...other}>{children}</Box>;
+  }
+
+  return (
+    <Box
+      component={motion.div}
+      initial="initial"
+      whileInView="animate"
+      viewport={{ once: true, amount: 0.3 }}
+      variants={varContainer()}
+      {...other}
+    >
+      {children}
+    </Box>
+  );
+}

package/src/components/animate/variants/actions.js

@@ -0,0 +1,4 @@
+export const varHover = (hover = 1.09, tap = 0.97) => ({
+  hover: { scale: hover },
+  tap: { scale: tap },
+});

package/src/components/animate/variants/background.js

@@ -0,0 +1,97 @@
+export const varBgColor = (props) => {
+  const colors = props?.colors || ["#19dcea", "#b22cff"];
+  const duration = props?.duration || 5;
+  const ease = props?.ease || "linear";
+
+  return {
+    animate: {
+      background: colors,
+      transition: { duration, ease },
+    },
+  };
+};
+
+export const varBgKenburns = (props) => {
+  const duration = props?.duration || 5;
+  const ease = props?.ease || "easeOut";
+
+  return {
+    top: {
+      animate: {
+        scale: [1, 1.25],
+        y: [0, -15],
+        transformOrigin: ["50% 16%", "50% top"],
+        transition: { duration, ease },
+      },
+    },
+    bottom: {
+      animate: {
+        scale: [1, 1.25],
+        y: [0, 15],
+        transformOrigin: ["50% 84%", "50% bottom"],
+        transition: { duration, ease },
+      },
+    },
+    left: {
+      animate: {
+        scale: [1, 1.25],
+        x: [0, 20],
+        y: [0, 15],
+        transformOrigin: ["16% 50%", "0% left"],
+        transition: { duration, ease },
+      },
+    },
+    right: {
+      animate: {
+        scale: [1, 1.25],
+        x: [0, -20],
+        y: [0, -15],
+        transformOrigin: ["84% 50%", "0% right"],
+        transition: { duration, ease },
+      },
+    },
+  };
+};
+
+export const varBgPan = (props) => {
+  const colors = props?.colors || ["#ee7752", "#e73c7e", "#23a6d5", "#23d5ab"];
+  const duration = props?.duration || 5;
+  const ease = props?.ease || "linear";
+
+  const gradient = (deg) => `linear-gradient(${deg}deg, ${colors})`;
+
+  return {
+    top: {
+      animate: {
+        backgroundImage: [gradient(0), gradient(0)],
+        backgroundPosition: ["center 99%", "center 1%"],
+        backgroundSize: ["100% 600%", "100% 600%"],
+        transition: { duration, ease },
+      },
+    },
+    right: {
+      animate: {
+        backgroundPosition: ["1% center", "99% center"],
+        backgroundImage: [gradient(270), gradient(270)],
+        backgroundSize: ["600% 100%", "600% 100%"],
+        transition: { duration, ease },
+      },
+    },
+    bottom: {
+      animate: {
+        backgroundImage: [gradient(0), gradient(0)],
+        backgroundPosition: ["center 1%", "center 99%"],
+        backgroundSize: ["100% 600%", "100% 600%"],
+        transition: { duration, ease },
+      },
+    },
+    left: {
+      animate: {
+        backgroundPosition: ["99% center", "1% center"],
+        backgroundImage: [gradient(270), gradient(270)],
+        backgroundSize: ["600% 100%", "600% 100%"],
+        transition: { duration, ease },
+      },
+    },
+  };
+};