@layers-app/shared 0.0.45 → 0.0.50

package/dist/KanbanLayout-oWz6EhPt.js

@@ -0,0 +1,297 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import { Flex, Text, ActionIcon, Divider, Box, Avatar, Skeleton } from "@mantine/core";
+import "react";
+import { randomId } from "@mantine/hooks";
+import "@tanstack/react-query";
+import "query-string";
+import "@mantine/form";
+import "@mantine/dropzone";
+import "@mantine/notifications";
+import "lodash-es";
+import { u as useOnboardingState, S as StatusBadge } from "./index-tn5CWDGz.js";
+import "react-dom";
+import "draggable-ui";
+import "@mantine/modals";
+import "i18next";
+import { IconCheck, IconBug, IconSquareRotated, IconPlus, IconCalendarEvent, IconEqual } from "@tabler/icons-react";
+import "react-router-dom";
+import "framer-motion";
+import "@mantine/dates";
+const column = "_column_10zam_1";
+const card = "_card_10zam_6";
+const styles = {
+  column,
+  card
+};
+const KanbanLayout = () => {
+  const { tasksList, statusesList } = useOnboardingState();
+  const today = /* @__PURE__ */ new Date();
+  const getPlusDays = (prop) => {
+    const plusThreeDays = new Date(today);
+    plusThreeDays.setDate(plusThreeDays.getDate() + (3 + prop));
+    return plusThreeDays.toDateString();
+  };
+  const { t } = useTranslation("onboarding");
+  const defaultTypes = [
+    {
+      id: randomId(),
+      color: "blue",
+      icon: IconCheck,
+      name: t("selectCategory.options.task"),
+      type: "task",
+      order: 1
+    },
+    {
+      id: randomId(),
+      color: "orange",
+      icon: IconBug,
+      name: t("selectCategory.options.bug"),
+      type: "bug",
+      order: 2
+    },
+    {
+      id: randomId(),
+      color: "grape",
+      icon: IconSquareRotated,
+      name: t("selectCategory.options.milestone"),
+      type: "milestone",
+      order: 3
+    }
+  ];
+  const getCurrentType = (type) => {
+    const current = defaultTypes.find((t2) => t2.type === type);
+    if (!current) return null;
+    return /* @__PURE__ */ jsx(ActionIcon, { size: 16, variant: "filled", color: current.color, children: /* @__PURE__ */ jsx(current.icon, {}) });
+  };
+  return /* @__PURE__ */ jsxs(Flex, { gap: 13, align: "start", w: "100%", children: [
+    /* @__PURE__ */ jsxs(
+      Flex,
+      {
+        gap: 11,
+        p: 7,
+        direction: "column",
+        w: 340,
+        className: styles.column,
+        children: [
+          /* @__PURE__ */ jsxs(Flex, { w: "100%", justify: "space-between", children: [
+            /* @__PURE__ */ jsxs(Flex, { gap: 14, align: "center", children: [
+              /* @__PURE__ */ jsx(StatusBadge, { color: "#228BE6", title: statusesList[0] }),
+              /* @__PURE__ */ jsxs(Text, { c: "#868E96", fz: 14, children: [
+                "(",
+                t("defineStatuses.tasks"),
+                ": ",
+                tasksList.length,
+                ")"
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx(ActionIcon, { variant: "subtle", size: 18, children: /* @__PURE__ */ jsx(IconPlus, {}) })
+          ] }),
+          /* @__PURE__ */ jsx(Divider, { w: "100%" }),
+          tasksList.map((task, idx) => /* @__PURE__ */ jsxs(
+            Flex,
+            {
+              gap: 0,
+              direction: "column",
+              align: "start",
+              justify: "space-between",
+              w: "100%",
+              h: 105,
+              className: styles.card,
+              px: 14,
+              py: 9,
+              children: [
+                /* @__PURE__ */ jsxs(Box, { children: [
+                  /* @__PURE__ */ jsx(Text, { fz: 18, fw: 400, children: task.title }),
+                  /* @__PURE__ */ jsxs(Flex, { align: "center", children: [
+                    /* @__PURE__ */ jsx(IconCalendarEvent, { color: "#495057", size: 13 }),
+                    /* @__PURE__ */ jsx(Text, { fz: 16, c: "#495057", children: getPlusDays(idx) })
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxs(Flex, { justify: "space-between", w: "100%", children: [
+                  /* @__PURE__ */ jsxs(Flex, { children: [
+                    getCurrentType(task.type),
+                    /* @__PURE__ */ jsxs(Text, { fz: 13, children: [
+                      "DEMO-",
+                      idx + 1
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsxs(Flex, { children: [
+                    /* @__PURE__ */ jsx(IconEqual, { color: "#F59F00", size: 16 }),
+                    /* @__PURE__ */ jsx(
+                      Avatar,
+                      {
+                        variant: "filled",
+                        color: "#228BE6",
+                        radius: "xl",
+                        size: 24
+                      }
+                    )
+                  ] })
+                ] })
+              ]
+            },
+            task.id
+          ))
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      Flex,
+      {
+        gap: 11,
+        p: 7,
+        direction: "column",
+        w: 340,
+        className: styles.column,
+        children: [
+          /* @__PURE__ */ jsxs(Flex, { w: "100%", justify: "space-between", children: [
+            /* @__PURE__ */ jsxs(Flex, { gap: 14, align: "center", children: [
+              /* @__PURE__ */ jsx(StatusBadge, { color: "#12B886", title: statusesList[1] }),
+              /* @__PURE__ */ jsxs(Text, { c: "#868E96", fz: 14, children: [
+                "(",
+                t("defineStatuses.tasks"),
+                ": 2)"
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx(ActionIcon, { variant: "subtle", size: 18, children: /* @__PURE__ */ jsx(IconPlus, {}) })
+          ] }),
+          /* @__PURE__ */ jsx(Divider, { w: "100%" }),
+          Array(2).fill(0).map((_, idx) => /* @__PURE__ */ jsxs(
+            Flex,
+            {
+              gap: 0,
+              direction: "column",
+              align: "start",
+              justify: "space-between",
+              w: "100%",
+              h: 105,
+              className: styles.card,
+              px: 14,
+              py: 9,
+              children: [
+                /* @__PURE__ */ jsxs(Box, { children: [
+                  /* @__PURE__ */ jsx(
+                    Skeleton,
+                    {
+                      animate: false,
+                      mb: 15,
+                      w: idx === 0 ? 128 : 172,
+                      h: 18
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs(Flex, { align: "center", children: [
+                    /* @__PURE__ */ jsx(IconCalendarEvent, { color: "#495057", size: 13 }),
+                    /* @__PURE__ */ jsx(Skeleton, { animate: false, w: idx === 0 ? 52 : 63, h: 12 })
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxs(Flex, { justify: "space-between", w: "100%", children: [
+                  /* @__PURE__ */ jsxs(Flex, { children: [
+                    /* @__PURE__ */ jsx(ActionIcon, { size: 16, variant: "filled", color: "#ADB5BD", children: /* @__PURE__ */ jsx(IconCheck, {}) }),
+                    /* @__PURE__ */ jsxs(Text, { c: "#ADB5BD", fz: 13, children: [
+                      "DEMO-",
+                      idx + 4
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsxs(Flex, { children: [
+                    /* @__PURE__ */ jsx(IconEqual, { color: "#F59F00", size: 16 }),
+                    /* @__PURE__ */ jsx(
+                      Avatar,
+                      {
+                        variant: "filled",
+                        color: "#228BE6",
+                        radius: "xl",
+                        size: 24
+                      }
+                    )
+                  ] })
+                ] })
+              ]
+            },
+            idx
+          ))
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      Flex,
+      {
+        gap: 11,
+        p: 7,
+        direction: "column",
+        w: 340,
+        className: styles.column,
+        children: [
+          /* @__PURE__ */ jsxs(Flex, { w: "100%", justify: "space-between", children: [
+            /* @__PURE__ */ jsxs(Flex, { gap: 14, align: "center", children: [
+              /* @__PURE__ */ jsx(StatusBadge, { color: "#FA5252", title: statusesList[2] }),
+              /* @__PURE__ */ jsxs(Text, { c: "#868E96", fz: 14, children: [
+                "(",
+                t("defineStatuses.tasks"),
+                ": 2)"
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx(ActionIcon, { variant: "subtle", size: 18, children: /* @__PURE__ */ jsx(IconPlus, {}) })
+          ] }),
+          /* @__PURE__ */ jsx(Divider, { w: "100%" }),
+          Array(2).fill(0).map((_, idx) => /* @__PURE__ */ jsxs(
+            Flex,
+            {
+              gap: 0,
+              direction: "column",
+              align: "start",
+              justify: "space-between",
+              w: "100%",
+              h: 105,
+              className: styles.card,
+              px: 14,
+              py: 9,
+              children: [
+                /* @__PURE__ */ jsxs(Box, { children: [
+                  /* @__PURE__ */ jsx(
+                    Skeleton,
+                    {
+                      animate: false,
+                      mb: 15,
+                      w: idx === 0 ? 266 : 150,
+                      h: 18
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs(Flex, { align: "center", children: [
+                    /* @__PURE__ */ jsx(IconCalendarEvent, { color: "#495057", size: 13 }),
+                    /* @__PURE__ */ jsx(Skeleton, { animate: false, w: idx === 0 ? 72 : 46, h: 12 })
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxs(Flex, { justify: "space-between", w: "100%", children: [
+                  /* @__PURE__ */ jsxs(Flex, { children: [
+                    /* @__PURE__ */ jsx(ActionIcon, { size: 16, variant: "filled", color: "#ADB5BD", children: /* @__PURE__ */ jsx(IconCheck, {}) }),
+                    /* @__PURE__ */ jsxs(Text, { c: "#ADB5BD", fz: 13, children: [
+                      "DEMO-",
+                      idx + 6
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsxs(Flex, { children: [
+                    /* @__PURE__ */ jsx(IconEqual, { color: "#F59F00", size: 16 }),
+                    /* @__PURE__ */ jsx(
+                      Avatar,
+                      {
+                        variant: "filled",
+                        color: "#228BE6",
+                        radius: "xl",
+                        size: 24
+                      }
+                    )
+                  ] })
+                ] })
+              ]
+            },
+            idx
+          ))
+        ]
+      }
+    )
+  ] });
+};
+export {
+  KanbanLayout as default
+};