@canmingir/link 1.2.3 → 1.2.5

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

@@ -0,0 +1,78 @@
+import AnimatedNode from "./AnimatedNode";
+import { Iconify } from "@canmingir/link/platform/components";
+import LoadingNode from "./LoadingNode";
+import React from "react";
+
+import { Card, Tooltip, Typography } from "@mui/material";
+
+const ActionNode = ({
+  visible,
+  delay,
+  isLoading,
+  action,
+  status,
+  tooltip,
+  icon,
+}) => {
+  if (isLoading) {
+    return <LoadingNode visible={visible} delay={delay} />;
+  }
+
+  const card = (
+    <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",
+          transition: "background-color 0.3s ease",
+          "&:hover": {
+            bgcolor: "grey.600",
+            cursor: "pointer",
+          },
+        }}
+      >
+        <Iconify icon={icon} width={24} height={24} />
+        <Typography
+          variant="caption"
+          sx={{
+            textAlign: "center",
+            fontSize: "0.5rem",
+            color: "text.secondary",
+          }}
+        >
+          {action}
+        </Typography>
+        {status && (
+          <Typography
+            variant="caption"
+            sx={{
+              textAlign: "center",
+              fontSize: "0.5rem",
+              color: "text.secondary",
+            }}
+          >
+            {status}
+          </Typography>
+        )}
+      </Card>
+    </AnimatedNode>
+  );
+
+  if (!tooltip) return card;
+
+  return (
+    <Tooltip title={tooltip} placement="right">
+      {card}
+    </Tooltip>
+  );
+};
+
+export default ActionNode;

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

@@ -0,0 +1,22 @@
+import styled from "styled-components";
+
+const AnimatedNode = styled.div`
+  opacity: 0;
+  transform: translateY(20px);
+  animation: ${({ visible }) =>
+    visible ? "nodeAppear 0.5s ease forwards" : "none"};
+  animation-delay: ${({ delay = 0 }) => `${delay}ms`};
+
+  @keyframes nodeAppear {
+    from {
+      opacity: 0;
+      transform: translateY(20px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+`;
+
+export default AnimatedNode;

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

@@ -0,0 +1,313 @@
+import React from "react";
+
+import { Box, Card, Stack } from "@mui/material";
+import { alpha, useTheme } from "@mui/material/styles";
+
+export function MediaAvatarCard({
+  sx,
+  leftContent,
+  rightContent,
+  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",
+        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"
+        spacing={1}
+        sx={{
+          flex: 1,
+          padding: 2,
+          zIndex: 1,
+          position: "relative",
+        }}
+      >
+        {rightContent}
+      </Stack>
+    </Card>
+  );
+}
+
+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,
+        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 SideStripeCard({
+  sx,
+  stripeContent,
+  mainContent,
+  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",
+          "&: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"
+          spacing={1}
+          sx={{
+            padding: 2,
+            position: "relative",
+            zIndex: 1,
+          }}
+        >
+          {mainContent}
+        </Stack>
+      </Card>
+    </Box>
+  );
+}
+
+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,
+        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,196 @@
+import { Iconify } from "@canmingir/link/platform/components";
+
+import React, { useEffect, useState } from "react";
+import { alpha, styled } from "@mui/material/styles";
+
+const ANIMATION_DELAY_MS = 200;
+
+const MainContainer = styled("div", {
+  shouldForwardProp: (prop) => prop !== "$style",
+})(({ theme, $style = {} }) => {
+  const {
+    minWidth = 120,
+    minHeight = 120,
+    maxWidth = 160,
+    maxHeight = 160,
+    borderRadius = 16,
+    borderColor = "rgba(255, 255, 255, 0.2)",
+    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: "center",
+    color: "#ffffff",
+    borderRadius,
+    padding: "16px 20px",
+    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 IconContainer = styled("div", {
+  shouldForwardProp: (prop) => prop !== "$style",
+})(({ $style = {} }) => {
+  const {
+    bg = "rgba(255, 255, 255, 0.1)",
+    hoverBg = "rgba(255, 255, 255, 0.15)",
+    borderRadius = 12,
+    padding = 8,
+    borderColor = "rgba(255, 255, 255, 0.3)",
+    marginBottom = 12,
+  } = $style;
+
+  return {
+    backgroundColor: bg,
+    borderRadius,
+    padding,
+    marginBottom,
+    transition: "all 0.4s ease",
+    backdropFilter: "blur(5px)",
+    border: `1px solid ${borderColor}`,
+
+    '[data-hovered="true"] &': {
+      backgroundColor: hoverBg,
+    },
+  };
+});
+
+const LabelText = styled("div", {
+  shouldForwardProp: (prop) => prop !== "$style",
+})(({ $style = {} }) => {
+  const {
+    color = "#ffffff",
+    fontWeight = 600,
+    fontSize = 13,
+    letterSpacing = 0.5,
+  } = $style;
+
+  return {
+    fontWeight,
+    fontSize,
+    letterSpacing: `${letterSpacing}px`,
+    textAlign: "center",
+    transition: "all 0.5s cubic-bezier(0.4, 0, 0.2, 1)",
+    textShadow: "none",
+    lineHeight: "1.4",
+    opacity: 0,
+    transform: "translateY(10px)",
+    color,
+
+    '&[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:cube-outline";
+};
+
+const InfoNode = ({ node, nodeStyle = {} }) => {
+  const [animated, setAnimated] = useState(false);
+  const [isHovered, setIsHovered] = useState(false);
+
+  const label =
+    node.label || node.title || node.name || node.id || "Responsibility";
+
+  useEffect(() => {
+    const timer = setTimeout(() => setAnimated(true), ANIMATION_DELAY_MS);
+    return () => clearTimeout(timer);
+  }, []);
+
+  const layoutStyle = {
+    minWidth: nodeStyle.cardWidth || nodeStyle.minWidth || 120,
+    minHeight: nodeStyle.minHeight || 120,
+    maxWidth: nodeStyle.maxWidth || 160,
+    maxHeight: nodeStyle.maxHeight || 160,
+    borderRadius: typeof nodeStyle.shape === "number" ? nodeStyle.shape : 16,
+    borderColor: nodeStyle.borderColor || "rgba(255, 255, 255, 0.2)",
+    bgFrom: nodeStyle.bgFrom,
+    bgTo: nodeStyle.bgTo,
+  };
+
+  const iconContainerStyle = {
+    iconBg: nodeStyle.iconBg,
+    iconHoverBg: nodeStyle.iconHoverBg,
+    iconBorderRadius: nodeStyle.iconRadius,
+    iconPadding: nodeStyle.iconPadding,
+    iconBorderColor: nodeStyle.iconBorderColor,
+    iconMarginBottom: nodeStyle.iconMarginBottom,
+  };
+
+  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)}
+    >
+      <IconContainer $style={iconContainerStyle}>
+        <Iconify
+          icon={icon}
+          width={28}
+          height={28}
+          sx={{
+            transition: "all 0.6s cubic-bezier(0.4, 0, 0.2, 1)",
+            transform: animated
+              ? isHovered
+                ? "rotate(360deg) scale(1.1)"
+                : "rotate(0deg) scale(1)"
+              : "rotate(-90deg) scale(0.8)",
+            filter: "none",
+            color: nodeStyle.iconColor || "#ffffff",
+          }}
+        />
+      </IconContainer>
+
+      <LabelText data-animated={animated} $style={labelStyle}>
+        {label}
+      </LabelText>
+    </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;