@canmingir/link 1.2.4 → 1.2.6

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;

package/src/lib/Flow/styles.js

@@ -0,0 +1,114 @@
+export const toPxNumber = (v, fallback = 1) => {
+  if (v == null) return fallback;
+  if (typeof v === "number") return v;
+  const n = parseFloat(String(v));
+  return Number.isFinite(n) ? n : fallback;
+};
+
+export const getBaseStyleForVariant = (v) => {
+  switch (v) {
+    case "card":
+      return {
+        lineColor: "#BDBDBD",
+        lineWidth: "2px",
+        lineStyle: "solid",
+        gap: 56,
+        shape: 8,
+        bg: "background.paper",
+        hoverBg: "grey.100",
+        borderColor: "#9E9E9E",
+      };
+    case "pill":
+      return {
+        lineColor: "#9C27B0",
+        lineWidth: "2px",
+        lineStyle: "dashed",
+        gap: 48,
+        shape: 9999,
+        bg: "rgba(156, 39, 176, 0.08)",
+        hoverBg: "rgba(156, 39, 176, 0.16)",
+        borderColor: "#9C27B0",
+      };
+    case "simple":
+    default:
+      return {
+        lineColor: "#E0E0E0",
+        lineWidth: "1.5px",
+        lineStyle: "solid",
+        gap: 40,
+        shape: 4,
+        bg: "background.default",
+        hoverBg: "grey.100",
+        borderColor: "#E0E0E0",
+      };
+  }
+};
+
+export const getDecisionNodeStyle = (nodeType) => {
+  const styles = {
+    start: { bg: "#E8F5E9", borderColor: "#4CAF50", shape: 8 },
+    decision: { bg: "#FFF3E0", borderColor: "#FF9800", shape: 24 },
+    process: { bg: "#E3F2FD", borderColor: "#2196F3", shape: 8 },
+    end: { bg: "#FFEBEE", borderColor: "#F44336", shape: 8 },
+  };
+  return styles[nodeType] || styles.process;
+};
+
+export const applySemanticTokens = (styleObj, base) => {
+  const s = { ...styleObj };
+
+  const borderWeightMap = { light: 1, normal: 3, bold: 5 };
+  if (
+    typeof s.border === "string" &&
+    ["light", "normal", "bold"].includes(s.border)
+  ) {
+    const w = borderWeightMap[s.border];
+    if (s.borderWidth == null) s.borderWidth = w;
+    if (s.lineWidth == null) s.lineWidth = `${w}px`;
+    if (!s.borderColor)
+      s.borderColor = base.borderColor || base.lineColor || "#E0E0E0";
+  } else if (
+    typeof s.border === "string" &&
+    (s.border.startsWith("#") || s.border.startsWith("rgb"))
+  ) {
+    s.borderColor = s.border;
+  }
+
+  // size: small | medium | large
+  const sizeMap = {
+    small: { cardWidth: 140, gap: 20 },
+    medium: { cardWidth: 180, gap: 30 },
+    large: { cardWidth: 220, gap: 40 },
+  };
+  if (s.size && sizeMap[s.size]) {
+    const { cardWidth, gap } = sizeMap[s.size];
+    if (s.cardWidth == null) s.cardWidth = cardWidth;
+    if (s.gap == null) s.gap = gap;
+  }
+
+  // shape: "square" | "vertical" (affects dimensions)
+  if (s.shape === "square") {
+    const defaultSize = 140;
+    if (s.cardWidth != null && s.minHeight == null) s.minHeight = s.cardWidth;
+    else if (s.minHeight != null && s.cardWidth == null)
+      s.cardWidth = s.minHeight;
+    else if (s.cardWidth == null && s.minHeight == null) {
+      s.cardWidth = defaultSize;
+      s.minHeight = defaultSize;
+    }
+  }
+
+  if (s.shape === "vertical") {
+    const defaultWidth = 160;
+    if (s.cardWidth == null) s.cardWidth = defaultWidth;
+    if (s.minHeight == null) s.minHeight = Math.max(s.cardWidth * 1.3, 110);
+  }
+
+  // shadow: "none" | "soft" | "heavy"
+  const shadowVariantMap = { none: 0, soft: 2, heavy: 6 };
+  if (s.shadow && shadowVariantMap[s.shadow] != null && s.shadowLevel == null) {
+    s.shadowLevel = shadowVariantMap[s.shadow];
+  }
+
+  return s;
+};

package/src/lib/index.js

@@ -21,3 +21,16 @@ export { default as TableHeadCustom } from "./TableHeadCustom/TableHeadCustom";
 export { default as TableSelectedAction } from "./TableSelectedAction/TableSelectedAction";
 export { default as useTable } from "./useTable/useTable";
 export { default as useChart } from "./useChart/useChart";
+
+export { default as Flow } from "./Flow/Flow";
+
+export {
+  HeaderCard,
+  MediaAvatarCard,
+  SideStripeCard,
+  AvatarRoleCard,
+} from "./Flow/layouts/CardLayout";
+
+export { default as ActionNode } from "./Flow/layouts/ActionNode";
+
+export { default as InfoNode } from "./Flow/layouts/InfoNode";

package/src/lib/useChart/useChart.js

@@ -1,7 +1,7 @@
-import { alpha, useTheme } from "@mui/material/styles";
-
 import merge from "lodash/merge";
-import { useResponsive } from "src/hooks/use-responsive";
+import { useResponsive } from "../../hooks/use-responsive";
+
+import { alpha, useTheme } from "@mui/material/styles";
 
 export default function useChart(options) {
   const theme = useTheme();