@ebubekirylmaz/link-test 1.0.0

package/src/lib/Flow/layouts/CardLayout.jsx

@@ -0,0 +1,397 @@
+import React from "react";
+
+import { Box, Card, Stack, Typography } from "@mui/material";
+import { alpha, useTheme } from "@mui/material/styles";
+
+const STYLES = {
+  width: "100%",
+  display: "-webkit-box",
+  WebkitLineClamp: 2,
+  WebkitBoxOrient: "vertical",
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  wordBreak: "break-word",
+  lineHeight: 1.3,
+  opacity: 0.85,
+};
+
+export function MediaAvatarCard({
+  sx,
+  leftContent,
+  rightContent,
+  title,
+  description,
+  footer,
+  background,
+  overlayColor,
+  backgroundClassName = "animated-background-image",
+}) {
+  const theme = useTheme();
+
+  return (
+    <Card
+      sx={{
+        p: 0,
+        minWidth: 350,
+        maxWidth: 450,
+        height: 120,
+        borderRadius: 1.5,
+        textAlign: "left",
+        position: "relative",
+        display: "flex",
+        flexDirection: "row",
+        fontSize: 12,
+        color: "rgba(255,255,255,0.82)",
+        lineHeight: 1.3,
+        boxShadow: (theme) => theme.shadows[3],
+        "&:hover": {
+          boxShadow: (theme) => theme.shadows[6],
+        },
+        overflow: "hidden",
+        [`&:hover .${backgroundClassName}`]: {
+          width: "100%",
+        },
+        ...sx,
+      }}
+    >
+      {background && (
+        <Box
+          className={backgroundClassName}
+          sx={{
+            width: 100,
+            height: "100%",
+            position: "absolute",
+            top: 0,
+            left: 0,
+            zIndex: 0,
+            backgroundImage: `url(${background})`,
+            backgroundSize: "cover",
+            backgroundPosition: "center",
+            transition: theme.transitions.create("width", {
+              duration: theme.transitions.duration.standard,
+              easing: theme.transitions.easing.easeInOut,
+            }),
+            "&::after": {
+              content: '""',
+              position: "absolute",
+              inset: 0,
+              backgroundColor:
+                overlayColor || alpha(theme.palette.grey[900], 0.48),
+            },
+          }}
+        />
+      )}
+
+      <Stack
+        direction="column"
+        spacing={1}
+        sx={{
+          width: 100,
+          height: "100%",
+          justifyContent: "center",
+          alignItems: "center",
+          borderRadius: "8px 0 0 8px",
+          position: "relative",
+          zIndex: 1,
+        }}
+      >
+        {leftContent}
+      </Stack>
+
+      <Stack
+        direction="column"
+        sx={{
+          flex: 1,
+          padding: 2,
+          zIndex: 1,
+          position: "relative",
+          height: "100%",
+          justifyContent: "space-between",
+        }}
+      >
+        {rightContent ? (
+          rightContent
+        ) : (
+          <>
+            <Stack spacing={1} sx={{ width: "100%", minWidth: 0 }}>
+              <Box>{title}</Box>
+
+              {description && (
+                <Typography variant="inherit" sx={STYLES}>
+                  {description}
+                </Typography>
+              )}
+            </Stack>
+
+            {footer && (
+              <Box
+                sx={{
+                  display: "flex",
+                  justifyContent: "flex-end",
+                  alignItems: "center",
+                  gap: 0.5,
+                  mt: 0.5,
+                }}
+              >
+                {footer}
+              </Box>
+            )}
+          </>
+        )}
+      </Stack>
+    </Card>
+  );
+}
+
+export function SideStripeCard({
+  sx,
+  stripeContent,
+  mainContent,
+  title,
+  description,
+  footer,
+  minWidth = 200,
+  maxWidth = 290,
+  height = 100,
+  stripeWidth = 65,
+}) {
+  const theme = useTheme();
+
+  return (
+    <Box sx={{ cursor: "pointer" }}>
+      <Card
+        sx={{
+          display: "flex",
+          flexDirection: "row",
+          alignItems: "center",
+          minWidth,
+          maxWidth,
+          height,
+          borderRadius: 1.5,
+          boxShadow: 3,
+          position: "relative",
+          overflow: "hidden",
+          fontSize: 12,
+          lineHeight: 1.3,
+          color: "rgba(255,255,255,0.82)",
+          "&:hover": {
+            boxShadow: 6,
+            "& .animated-background-selector": {
+              width: "100%",
+              borderRadius: 1.5,
+            },
+            "& .responsibility-title, & .responsibility-description": {
+              color: theme.palette.getContrastText(theme.palette.primary.light),
+            },
+          },
+          ...sx,
+        }}
+      >
+        <Box
+          className="animated-background-selector"
+          sx={{
+            position: "absolute",
+            top: 0,
+            left: 0,
+            bottom: 0,
+            width: stripeWidth,
+            backgroundColor: theme.palette.primary.light,
+            borderRadius: "8px 0 0 8px",
+            transition: theme.transitions.create(["width", "border-radius"], {
+              duration: theme.transitions.duration.short,
+            }),
+            zIndex: 0,
+          }}
+        />
+        <Stack
+          direction="column"
+          spacing={1}
+          sx={{
+            position: "relative",
+            zIndex: 1,
+            width: stripeWidth,
+            height: "100%",
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            padding: 1,
+          }}
+        >
+          {stripeContent}
+        </Stack>
+
+        <Stack
+          direction="column"
+          sx={{
+            padding: 2,
+            position: "relative",
+            zIndex: 1,
+            flex: 1,
+            height: "100%",
+            justifyContent: "space-between",
+          }}
+        >
+          {mainContent ? (
+            mainContent
+          ) : (
+            <>
+              <Box sx={{ minWidth: 0 }}>
+                {typeof title === "string" ? (
+                  <Typography
+                    variant="inherit"
+                    sx={{
+                      color: "text.primary",
+                      wordBreak: "break-word",
+                      hyphens: "auto",
+                      fontWeight: 600,
+                    }}
+                  >
+                    {title}
+                  </Typography>
+                ) : (
+                  title
+                )}
+
+                {description && (
+                  <Typography
+                    variant="inherit"
+                    sx={{
+                      ...STYLES,
+                      mt: 0.5,
+                      color: "text.primary",
+                      opacity: 0.8,
+                    }}
+                  >
+                    {description}
+                  </Typography>
+                )}
+              </Box>
+
+              {footer && (
+                <Box sx={{ alignSelf: "flex-end", mt: 0.5 }}>{footer}</Box>
+              )}
+            </>
+          )}
+        </Stack>
+      </Card>
+    </Box>
+  );
+}
+
+export function HeaderCard({
+  sx,
+  header,
+  children,
+  height = 140,
+  padding = 2,
+}) {
+  const theme = useTheme();
+  return (
+    <Card
+      sx={{
+        p: padding,
+        minWidth: 200,
+        maxWidth: 420,
+        height,
+        borderRadius: 3,
+        position: "relative",
+        overflow: "hidden",
+        backgroundColor: theme.palette.background.paper,
+        fontSize: 12,
+        lineHeight: 1.3,
+        color: "rgba(255,255,255,0.82)",
+        transition: "all 0.3s ease-in-out",
+        "&:hover": {
+          transform: "translateY(-4px)",
+          boxShadow: theme.shadows[8],
+          "&:before": { height: "100%" },
+        },
+        "&:before": {
+          content: '""',
+          width: "100%",
+          height: "40%",
+          position: "absolute",
+          top: 0,
+          left: 0,
+          background: `linear-gradient(135deg, ${alpha(
+            theme.palette.secondary.light,
+            0.2
+          )}, ${alpha(theme.palette.primary.main, 0.3)})`,
+          borderRadius: "8px 8px 0 0",
+          transition: "height 0.3s ease-in-out",
+        },
+        ...sx,
+      }}
+    >
+      <Stack
+        spacing={2}
+        sx={{ height: "100%", position: "relative", zIndex: 1 }}
+      >
+        {header}
+        {children}
+      </Stack>
+    </Card>
+  );
+}
+
+export function AvatarRoleCard({
+  sx,
+  leftContent,
+  topRightContent,
+  bottomContent,
+}) {
+  const theme = useTheme();
+
+  return (
+    <Card
+      sx={{
+        p: 2.5,
+        width: 230,
+        height: 120,
+        borderRadius: 2,
+        position: "relative",
+        backgroundColor: theme.palette.background.paper,
+        fontSize: 12,
+        lineHeight: 1.3,
+        color: "rgba(255,255,255,0.82)",
+        transition: "all 0.3s ease-in-out",
+        "&:hover": {
+          transform: "translateY(-4px)",
+          boxShadow: theme.shadows[8],
+          "&:before": { height: "100%" },
+        },
+        "&:before": {
+          content: '""',
+          width: "100%",
+          height: "40%",
+          position: "absolute",
+          top: 0,
+          left: 0,
+          background: `linear-gradient(135deg, ${alpha(
+            theme.palette.secondary.light,
+            0.2
+          )}, ${alpha(theme.palette.primary.main, 0.3)})`,
+          borderRadius: "8px 8px 0 0",
+          transition: "height 0.3s ease-in-out",
+        },
+        ...sx,
+      }}
+    >
+      <Stack
+        spacing={1}
+        sx={{ height: "100%", position: "relative", zIndex: 1 }}
+      >
+        <Stack
+          direction="row"
+          justifyContent="space-between"
+          alignItems="flex-start"
+        >
+          {leftContent}
+          {topRightContent}
+        </Stack>
+
+        {bottomContent && <Stack spacing={0.5}>{bottomContent}</Stack>}
+      </Stack>
+    </Card>
+  );
+}

package/src/lib/Flow/layouts/InfoNode.jsx

@@ -0,0 +1,255 @@
+import React, { useEffect, useState } from "react";
+import { alpha, styled } from "@mui/material/styles";
+
+import Iconify from "../../Iconify/index";
+
+const ANIMATION_DELAY_MS = 200;
+
+const MainContainer = styled("div", {
+  shouldForwardProp: (prop) => prop !== "$style",
+})(({ theme, $style = {} }) => {
+  const {
+    minWidth = 280,
+    minHeight = 220,
+    maxWidth = 320,
+    maxHeight = "auto",
+    borderRadius = 20,
+    borderColor = "rgba(255, 255, 255, 0.08)",
+    bgFrom,
+    bgTo,
+  } = $style;
+
+  const defaultFrom = alpha(theme.palette.secondary.light, 0.2);
+  const defaultTo = alpha(theme.palette.primary.main, 0.3);
+
+  const hoveredFrom = alpha(theme.palette.primary.main, 0.3);
+  const hoveredTo = alpha(theme.palette.secondary.light, 0.2);
+
+  return {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "flex-start",
+    justifyContent: "flex-start",
+    color: "#ffffff",
+    borderRadius,
+    padding: "24px",
+    border: `1px solid ${borderColor}`,
+    backdropFilter: "blur(10px)",
+    transition: "all 0.4s cubic-bezier(0.4, 0, 0.2, 1)",
+    cursor: "pointer",
+    position: "relative",
+    overflow: "hidden",
+    minWidth,
+    minHeight,
+    maxWidth,
+    maxHeight,
+    background: `linear-gradient(135deg, ${bgFrom || defaultFrom}, ${
+      bgTo || defaultTo
+    })`,
+    boxShadow: "0 2px 10px rgba(0, 0, 0, 0.2)",
+
+    '&[data-hovered="true"]': {
+      background: `linear-gradient(135deg, ${bgTo || hoveredFrom}, ${
+        bgFrom || hoveredTo
+      })`,
+      boxShadow: "0 4px 20px rgba(0, 0, 0, 0.3)",
+    },
+  };
+});
+
+const HeaderRow = styled("div")({
+  display: "flex",
+  flexDirection: "row",
+  alignItems: "center",
+  width: "100%",
+  gap: "16px",
+  marginBottom: "16px",
+  minHeight: "44px",
+});
+
+const IconContainer = styled("div", {
+  shouldForwardProp: (prop) => prop !== "$style",
+})(({ $style = {} }) => {
+  const {
+    bg = "rgba(255, 255, 255, 0.1)",
+    hoverBg = "rgba(255, 255, 255, 0.2)",
+    borderRadius = 14,
+    padding = 10,
+    borderColor = "rgba(255, 255, 255, 0.1)",
+  } = $style;
+
+  return {
+    backgroundColor: bg,
+    borderRadius,
+    padding,
+    transition: "all 0.4s ease",
+    backdropFilter: "blur(5px)",
+    border: `1px solid ${borderColor}`,
+    flexShrink: 0,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+
+    '[data-hovered="true"] &': {
+      backgroundColor: hoverBg,
+    },
+  };
+});
+
+const LabelText = styled("div", {
+  shouldForwardProp: (prop) => prop !== "$style",
+})(({ $style = {} }) => {
+  const {
+    color = "#ffffff",
+    fontWeight = 700,
+    fontSize = 15,
+    letterSpacing = 0.3,
+  } = $style;
+
+  return {
+    fontWeight,
+    fontSize,
+    letterSpacing: `${letterSpacing}px`,
+    textAlign: "left",
+    transition: "all 0.5s cubic-bezier(0.4, 0, 0.2, 1)",
+    lineHeight: "1.2",
+    opacity: 0,
+    transform: "translateX(10px)",
+    color,
+    flex: 1,
+
+    '&[data-animated="true"]': {
+      opacity: 1,
+      transform: "translateX(0)",
+    },
+  };
+});
+
+const DescriptionText = styled("div")(({ theme }) => ({
+  fontSize: "12px",
+  fontWeight: 400,
+  color: alpha("#fff", 0.6),
+  textAlign: "left",
+  lineHeight: "1.5",
+  width: "100%",
+  flex: 1,
+  opacity: 0,
+  transform: "translateY(10px)",
+  transition: "all 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s",
+  marginBottom: "16px",
+  display: "-webkit-box",
+  WebkitLineClamp: 4,
+  WebkitBoxOrient: "vertical",
+  overflow: "hidden",
+
+  '&[data-animated="true"]': {
+    opacity: 1,
+    transform: "translateY(0)",
+  },
+}));
+
+const ActionText = styled("div")(({ theme }) => ({
+  fontSize: "10px",
+  fontWeight: 700,
+  textTransform: "uppercase",
+  letterSpacing: "1px",
+  color: alpha("#fff", 0.4),
+  marginTop: "auto",
+  textAlign: "left",
+  width: "100%",
+  fontFamily: "monospace",
+  opacity: 0,
+  transform: "translateY(5px)",
+  transition: "all 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.2s",
+
+  '&[data-animated="true"]': {
+    opacity: 1,
+    transform: "translateY(0)",
+  },
+}));
+
+const getIcon = (node) => {
+  if (node.icon) return node.icon;
+  if (node.type === "CONDITION" || node.type === "decision")
+    return "mdi:help-circle-outline";
+  if (node.type === "NORMAL") return "mdi:checkbox-blank-circle-outline";
+  return "mdi:map-marker";
+};
+
+const InfoNode = ({ node, nodeStyle = {}, children }) => {
+  const [animated, setAnimated] = useState(false);
+  const [isHovered, setIsHovered] = useState(false);
+
+  const label = node.label || node.title || node.name || node.id || "Get Data";
+
+  const action = node.action || "SYSTEM:DEFAULT_ACTION";
+  const description =
+    node.description || "Description of the operation goes here.";
+
+  useEffect(() => {
+    const timer = setTimeout(() => setAnimated(true), ANIMATION_DELAY_MS);
+    return () => clearTimeout(timer);
+  }, []);
+
+  const layoutStyle = {
+    ...nodeStyle,
+    minWidth: nodeStyle.cardWidth || nodeStyle.minWidth || 280,
+    minHeight: nodeStyle.minHeight || 220,
+  };
+
+  const iconContainerStyle = {
+    iconBg: nodeStyle.iconBg,
+    iconHoverBg: nodeStyle.iconHoverBg,
+    iconBorderRadius: nodeStyle.iconRadius,
+    iconPadding: nodeStyle.iconPadding,
+    iconBorderColor: nodeStyle.iconBorderColor,
+  };
+
+  const labelStyle = {
+    labelColor: nodeStyle.labelColor,
+    labelFontSize: nodeStyle.labelFontSize,
+    labelFontWeight: nodeStyle.labelFontWeight,
+    labelLetterSpacing: nodeStyle.labelLetterSpacing,
+  };
+
+  const icon = getIcon(node);
+
+  return (
+    <MainContainer
+      $style={layoutStyle}
+      data-hovered={isHovered}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+    >
+      <HeaderRow>
+        <IconContainer $style={iconContainerStyle}>
+          <Iconify
+            icon={icon}
+            width={24}
+            height={24}
+            sx={{
+              filter: "none",
+              color: nodeStyle.iconColor || "#ffffff",
+            }}
+          />
+        </IconContainer>
+
+        <LabelText data-animated={animated} $style={labelStyle}>
+          {label}
+        </LabelText>
+      </HeaderRow>
+
+      {description && (
+        <DescriptionText data-animated={animated}>
+          {description}
+        </DescriptionText>
+      )}
+
+      {action && <ActionText data-animated={animated}>{action}</ActionText>}
+
+      {children}
+    </MainContainer>
+  );
+};
+
+export default InfoNode;

package/src/lib/Flow/layouts/LoadingNode.jsx

@@ -0,0 +1,37 @@
+import AnimatedNode from "./AnimatedNode";
+import React from "react";
+
+import { Card, CircularProgress, Typography } from "@mui/material";
+
+const LoadingNode = ({ visible, delay }) => (
+  <AnimatedNode visible={visible} delay={delay}>
+    <Card
+      sx={{
+        p: 2,
+        width: 180,
+        height: 100,
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: 1,
+        borderRadius: 1,
+        bgcolor: "background.paper",
+      }}
+    >
+      <CircularProgress size={24} />
+      <Typography
+        variant="caption"
+        sx={{
+          textAlign: "center",
+          fontSize: "0.5rem",
+          color: "text.secondary",
+        }}
+      >
+        Loading...
+      </Typography>
+    </Card>
+  </AnimatedNode>
+);
+
+export default LoadingNode;