@layers-app/shared 0.1.5 → 0.2.0

package/dist/components/OnBoarding/steps/DifferentLayouts/DifferentLayoutsNav.js

@@ -0,0 +1,56 @@
+import { jsx as o } from "react/jsx-runtime";
+import { useTranslation as s } from "react-i18next";
+import { useNavigate as c } from "react-router-dom";
+import { useOnboardingState as l } from "../../../../store/onboarding.js";
+import { Flex as p, Button as u, Text as f } from "@mantine/core";
+import { IconList as m, IconLayoutCards as v, IconSquareCheck as d } from "@tabler/icons-react";
+import k from "../Wrapper.js";
+const x = [
+  {
+    value: "list",
+    Icon: m,
+    link: "sprintList"
+  },
+  {
+    value: "kanban",
+    Icon: v,
+    link: "sprintKanban"
+  }
+], C = () => {
+  const { prevStep: e, setLayoutView: i } = l(), { t: n } = s("onboarding"), r = c(), a = x.map((t) => ({
+    ...t,
+    title: n(`sprintView.${t.value}`)
+  }));
+  return /* @__PURE__ */ o(
+    k,
+    {
+      title: n("differentLayouts.title"),
+      description: n("differentLayouts.description"),
+      nextText: n("finishProjects"),
+      nextIcon: /* @__PURE__ */ o(d, { size: 16 }),
+      prevText: n("prev"),
+      nextButtonProps: {
+        onClick: () => r("/")
+      },
+      prevButtonProps: {
+        onClick: () => e()
+      },
+      children: /* @__PURE__ */ o(p, { align: "start", direction: "column", w: "100%", gap: 8, children: a.map((t) => /* @__PURE__ */ o(
+        u,
+        {
+          justify: "start",
+          w: "100%",
+          variant: "outline",
+          onClick: () => i(t.value),
+          leftSection: /* @__PURE__ */ o(t.Icon, { color: "black", size: 16 }),
+          color: "#DEE2E6",
+          children: /* @__PURE__ */ o(f, { c: "black", children: t.title })
+        },
+        t.value
+      )) })
+    }
+  );
+};
+export {
+  C as default
+};

package/dist/components/OnBoarding/steps/DifferentLayouts/KanbanLayout.js

@@ -0,0 +1,272 @@
+import { jsxs as e, jsx as n } from "react/jsx-runtime";
+import { useTranslation as A } from "react-i18next";
+import { useOnboardingState as F } from "../../../../store/onboarding.js";
+import { Flex as r, Text as l, ActionIcon as a, Divider as h, Box as p, Avatar as u, Skeleton as s } from "@mantine/core";
+import { randomId as m } from "@mantine/hooks";
+import { IconCheck as f, IconBug as I, IconSquareRotated as S, IconPlus as g, IconCalendarEvent as w, IconEqual as y } from "@tabler/icons-react";
+import z from "../DefineStatuses/StatusBadge.js";
+import o from "./styles.module.css.js";
+const q = () => {
+  const { tasksList: b, statusesList: d } = F(), D = /* @__PURE__ */ new Date(), B = (i) => {
+    const t = new Date(D);
+    return t.setDate(t.getDate() + (3 + i)), t.toDateString();
+  }, { t: c } = A("onboarding"), v = [
+    {
+      id: m(),
+      color: "blue",
+      icon: f,
+      name: c("selectCategory.options.task"),
+      type: "task",
+      order: 1
+    },
+    {
+      id: m(),
+      color: "orange",
+      icon: I,
+      name: c("selectCategory.options.bug"),
+      type: "bug",
+      order: 2
+    },
+    {
+      id: m(),
+      color: "grape",
+      icon: S,
+      name: c("selectCategory.options.milestone"),
+      type: "milestone",
+      order: 3
+    }
+  ], E = (i) => {
+    const t = v.find((j) => j.type === i);
+    return t ? /* @__PURE__ */ n(a, { size: 16, variant: "filled", color: t.color, children: /* @__PURE__ */ n(t.icon, {}) }) : null;
+  };
+  return /* @__PURE__ */ e(r, { gap: 13, align: "start", w: "100%", children: [
+    /* @__PURE__ */ e(
+      r,
+      {
+        gap: 11,
+        p: 7,
+        direction: "column",
+        w: 340,
+        className: o.column,
+        children: [
+          /* @__PURE__ */ e(r, { w: "100%", justify: "space-between", children: [
+            /* @__PURE__ */ e(r, { gap: 14, align: "center", children: [
+              /* @__PURE__ */ n(z, { color: "#228BE6", title: d[0] }),
+              /* @__PURE__ */ e(l, { c: "#868E96", fz: 14, children: [
+                "(",
+                c("defineStatuses.tasks"),
+                ": ",
+                b.length,
+                ")"
+              ] })
+            ] }),
+            /* @__PURE__ */ n(a, { variant: "subtle", size: 18, children: /* @__PURE__ */ n(g, {}) })
+          ] }),
+          /* @__PURE__ */ n(h, { w: "100%" }),
+          b.map((i, t) => /* @__PURE__ */ e(
+            r,
+            {
+              gap: 0,
+              direction: "column",
+              align: "start",
+              justify: "space-between",
+              w: "100%",
+              h: 105,
+              className: o.card,
+              px: 14,
+              py: 9,
+              children: [
+                /* @__PURE__ */ e(p, { children: [
+                  /* @__PURE__ */ n(l, { fz: 18, fw: 400, children: i.title }),
+                  /* @__PURE__ */ e(r, { align: "center", children: [
+                    /* @__PURE__ */ n(w, { color: "#495057", size: 13 }),
+                    /* @__PURE__ */ n(l, { fz: 16, c: "#495057", children: B(t) })
+                  ] })
+                ] }),
+                /* @__PURE__ */ e(r, { justify: "space-between", w: "100%", children: [
+                  /* @__PURE__ */ e(r, { children: [
+                    E(i.type),
+                    /* @__PURE__ */ e(l, { fz: 13, children: [
+                      "DEMO-",
+                      t + 1
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ e(r, { children: [
+                    /* @__PURE__ */ n(y, { color: "#F59F00", size: 16 }),
+                    /* @__PURE__ */ n(
+                      u,
+                      {
+                        variant: "filled",
+                        color: "#228BE6",
+                        radius: "xl",
+                        size: 24
+                      }
+                    )
+                  ] })
+                ] })
+              ]
+            },
+            i.id
+          ))
+        ]
+      }
+    ),
+    /* @__PURE__ */ e(
+      r,
+      {
+        gap: 11,
+        p: 7,
+        direction: "column",
+        w: 340,
+        className: o.column,
+        children: [
+          /* @__PURE__ */ e(r, { w: "100%", justify: "space-between", children: [
+            /* @__PURE__ */ e(r, { gap: 14, align: "center", children: [
+              /* @__PURE__ */ n(z, { color: "#12B886", title: d[1] }),
+              /* @__PURE__ */ e(l, { c: "#868E96", fz: 14, children: [
+                "(",
+                c("defineStatuses.tasks"),
+                ": 2)"
+              ] })
+            ] }),
+            /* @__PURE__ */ n(a, { variant: "subtle", size: 18, children: /* @__PURE__ */ n(g, {}) })
+          ] }),
+          /* @__PURE__ */ n(h, { w: "100%" }),
+          Array(2).fill(0).map((i, t) => /* @__PURE__ */ e(
+            r,
+            {
+              gap: 0,
+              direction: "column",
+              align: "start",
+              justify: "space-between",
+              w: "100%",
+              h: 105,
+              className: o.card,
+              px: 14,
+              py: 9,
+              children: [
+                /* @__PURE__ */ e(p, { children: [
+                  /* @__PURE__ */ n(
+                    s,
+                    {
+                      animate: !1,
+                      mb: 15,
+                      w: t === 0 ? 128 : 172,
+                      h: 18
+                    }
+                  ),
+                  /* @__PURE__ */ e(r, { align: "center", children: [
+                    /* @__PURE__ */ n(w, { color: "#495057", size: 13 }),
+                    /* @__PURE__ */ n(s, { animate: !1, w: t === 0 ? 52 : 63, h: 12 })
+                  ] })
+                ] }),
+                /* @__PURE__ */ e(r, { justify: "space-between", w: "100%", children: [
+                  /* @__PURE__ */ e(r, { children: [
+                    /* @__PURE__ */ n(a, { size: 16, variant: "filled", color: "#ADB5BD", children: /* @__PURE__ */ n(f, {}) }),
+                    /* @__PURE__ */ e(l, { c: "#ADB5BD", fz: 13, children: [
+                      "DEMO-",
+                      t + 4
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ e(r, { children: [
+                    /* @__PURE__ */ n(y, { color: "#F59F00", size: 16 }),
+                    /* @__PURE__ */ n(
+                      u,
+                      {
+                        variant: "filled",
+                        color: "#228BE6",
+                        radius: "xl",
+                        size: 24
+                      }
+                    )
+                  ] })
+                ] })
+              ]
+            },
+            t
+          ))
+        ]
+      }
+    ),
+    /* @__PURE__ */ e(
+      r,
+      {
+        gap: 11,
+        p: 7,
+        direction: "column",
+        w: 340,
+        className: o.column,
+        children: [
+          /* @__PURE__ */ e(r, { w: "100%", justify: "space-between", children: [
+            /* @__PURE__ */ e(r, { gap: 14, align: "center", children: [
+              /* @__PURE__ */ n(z, { color: "#FA5252", title: d[2] }),
+              /* @__PURE__ */ e(l, { c: "#868E96", fz: 14, children: [
+                "(",
+                c("defineStatuses.tasks"),
+                ": 2)"
+              ] })
+            ] }),
+            /* @__PURE__ */ n(a, { variant: "subtle", size: 18, children: /* @__PURE__ */ n(g, {}) })
+          ] }),
+          /* @__PURE__ */ n(h, { w: "100%" }),
+          Array(2).fill(0).map((i, t) => /* @__PURE__ */ e(
+            r,
+            {
+              gap: 0,
+              direction: "column",
+              align: "start",
+              justify: "space-between",
+              w: "100%",
+              h: 105,
+              className: o.card,
+              px: 14,
+              py: 9,
+              children: [
+                /* @__PURE__ */ e(p, { children: [
+                  /* @__PURE__ */ n(
+                    s,
+                    {
+                      animate: !1,
+                      mb: 15,
+                      w: t === 0 ? 266 : 150,
+                      h: 18
+                    }
+                  ),
+                  /* @__PURE__ */ e(r, { align: "center", children: [
+                    /* @__PURE__ */ n(w, { color: "#495057", size: 13 }),
+                    /* @__PURE__ */ n(s, { animate: !1, w: t === 0 ? 72 : 46, h: 12 })
+                  ] })
+                ] }),
+                /* @__PURE__ */ e(r, { justify: "space-between", w: "100%", children: [
+                  /* @__PURE__ */ e(r, { children: [
+                    /* @__PURE__ */ n(a, { size: 16, variant: "filled", color: "#ADB5BD", children: /* @__PURE__ */ n(f, {}) }),
+                    /* @__PURE__ */ e(l, { c: "#ADB5BD", fz: 13, children: [
+                      "DEMO-",
+                      t + 6
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ e(r, { children: [
+                    /* @__PURE__ */ n(y, { color: "#F59F00", size: 16 }),
+                    /* @__PURE__ */ n(
+                      u,
+                      {
+                        variant: "filled",
+                        color: "#228BE6",
+                        radius: "xl",
+                        size: 24
+                      }
+                    )
+                  ] })
+                ] })
+              ]
+            },
+            t
+          ))
+        ]
+      }
+    )
+  ] });
+};
+export {
+  q as default
+};

package/dist/components/OnBoarding/steps/DifferentLayouts/styles.module.css.js

@@ -0,0 +1,9 @@
+const c = "_column_10zam_1", a = "_card_10zam_6", o = {
+  column: c,
+  card: a
+};
+export {
+  a as card,
+  c as column,
+  o as default
+};

package/dist/components/OnBoarding/steps/InviteUsers/BoardModal.js

@@ -0,0 +1,86 @@
+import { jsx as e, jsxs as i } from "react/jsx-runtime";
+import { useTranslation as s } from "react-i18next";
+import { Modal as d, Flex as l, TextInput as c, Select as p, Button as u, Group as m, Text as o } from "@mantine/core";
+const x = () => {
+  const { t: n } = s("onboarding"), r = (a) => {
+    const t = a.option;
+    return /* @__PURE__ */ e(m, { children: /* @__PURE__ */ i("div", { children: [
+      /* @__PURE__ */ e(o, { children: t.label }),
+      /* @__PURE__ */ e(o, { size: "xs", c: "dimmed", children: t.description })
+    ] }) });
+  };
+  return /* @__PURE__ */ e(
+    d,
+    {
+      radius: "md",
+      withinPortal: !1,
+      opened: !0,
+      centered: !0,
+      onClose: () => console.log("close"),
+      title: n("inviteUsers.modalTitle"),
+      styles: {
+        inner: {
+          position: "absolute",
+          left: 0,
+          top: 0
+        }
+      },
+      overlayProps: {
+        backgroundOpacity: 0.24,
+        blur: 2,
+        style: {
+          position: "absolute",
+          top: 0,
+          left: 0,
+          width: "100%",
+          height: "100%"
+        }
+      },
+      children: /* @__PURE__ */ i(l, { align: "start", direction: "column", gap: 24, w: "100%", children: [
+        /* @__PURE__ */ e(
+          c,
+          {
+            variant: "default",
+            radius: "sm",
+            w: "100%",
+            label: "E-mail",
+            placeholder: "example@example"
+          }
+        ),
+        /* @__PURE__ */ e(
+          p,
+          {
+            w: "100%",
+            checkIconPosition: "right",
+            label: "Role",
+            placeholder: "Select role",
+            data: h,
+            renderOption: r,
+            radius: "sm",
+            value: "participant"
+          }
+        ),
+        /* @__PURE__ */ e(l, { w: "100%", justify: "flex-end", children: /* @__PURE__ */ e(u, { children: "Invite" }) })
+      ] })
+    }
+  );
+}, h = [
+  {
+    value: "admin",
+    label: "Admin",
+    description: "Manages the workspace"
+  },
+  {
+    value: "participant",
+    label: "Participant",
+    description: "Can edit documents"
+  },
+  {
+    value: "guest",
+    label: "Guest",
+    description: "Can only view"
+  }
+];
+export {
+  x as default
+};

package/dist/components/OnBoarding/steps/InviteUsers/InviteUsers.js

@@ -0,0 +1,26 @@
+import { jsx as e, Fragment as o } from "react/jsx-runtime";
+import { useTranslation as i } from "react-i18next";
+import { useOnboardingState as p } from "../../../../store/onboarding.js";
+import s from "../Wrapper.js";
+const l = () => {
+  const { nextStep: r, prevStep: n } = p(), { t } = i("onboarding");
+  return /* @__PURE__ */ e(
+    s,
+    {
+      title: t("inviteUsers.title"),
+      description: t("inviteUsers.description"),
+      nextText: t("next"),
+      prevText: t("prev"),
+      nextButtonProps: {
+        onClick: () => r()
+      },
+      prevButtonProps: {
+        onClick: () => n()
+      },
+      children: /* @__PURE__ */ e(o, {})
+    }
+  );
+};
+export {
+  l as default
+};

package/dist/components/OnBoarding/steps/SelectCategory/CategorySelect.js

@@ -0,0 +1,61 @@
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import { useTranslation as u } from "react-i18next";
+import { useOnboardingState as g } from "../../../../store/onboarding.js";
+import { Menu as r, Flex as f, ActionIcon as d } from "@mantine/core";
+import { randomId as c } from "@mantine/hooks";
+import { IconCheck as y, IconBug as h, IconSquareRotated as C } from "@tabler/icons-react";
+const j = ({
+  task: n
+}) => {
+  const { t } = u("onboarding"), { setTaskById: s } = g(), l = [
+    {
+      id: c(),
+      color: "blue",
+      icon: y,
+      name: t("selectCategory.options.task"),
+      type: "task",
+      order: 1
+    },
+    {
+      id: c(),
+      color: "orange",
+      icon: h,
+      name: t("selectCategory.options.bug"),
+      type: "bug",
+      order: 2
+    },
+    {
+      id: c(),
+      color: "grape",
+      icon: C,
+      name: t("selectCategory.options.milestone"),
+      type: "milestone",
+      order: 3
+    }
+  ], m = (o) => {
+    const i = l.find((p) => p.type === o);
+    return i ? /* @__PURE__ */ e(d, { size: 16, variant: "filled", color: i.color, children: /* @__PURE__ */ e(i.icon, {}) }) : null;
+  };
+  return /* @__PURE__ */ a(r, { shadow: "md", position: "bottom-start", children: [
+    /* @__PURE__ */ e(r.Target, { children: m(n.type) }),
+    /* @__PURE__ */ e(r.Dropdown, { children: l.map((o) => /* @__PURE__ */ e(
+      r.Item,
+      {
+        onClick: () => {
+          s(n.id, {
+            ...n,
+            type: o.type
+          });
+        },
+        children: /* @__PURE__ */ a(f, { align: "center", children: [
+          /* @__PURE__ */ e(d, { size: 16, variant: "filled", color: o.color, children: /* @__PURE__ */ e(o.icon, {}) }),
+          o.name
+        ] })
+      },
+      o.id
+    )) })
+  ] });
+};
+export {
+  j as default
+};

package/dist/components/OnBoarding/steps/SelectCategory/SelectCategoryNav.js

@@ -0,0 +1,42 @@
+import { jsx as e } from "react/jsx-runtime";
+import { useTranslation as m } from "react-i18next";
+import { useOnboardingState as u } from "../../../../store/onboarding.js";
+import { Flex as g, TextInput as d } from "@mantine/core";
+import f from "../Wrapper.js";
+import x from "./CategorySelect.js";
+const y = () => {
+  const { nextStep: a, prevStep: i, tasksList: p, setTasksList: l } = u(), { t } = m("onboarding");
+  return /* @__PURE__ */ e(
+    f,
+    {
+      title: t("selectCategory.title"),
+      description: t("selectCategory.description"),
+      nextText: t("next"),
+      prevText: t("prev"),
+      nextButtonProps: {
+        onClick: () => a()
+      },
+      prevButtonProps: {
+        onClick: () => i()
+      },
+      children: /* @__PURE__ */ e(g, { align: "start", direction: "column", w: "100%", gap: 8, children: p.map((r, o, s) => /* @__PURE__ */ e(
+        d,
+        {
+          leftSection: /* @__PURE__ */ e(x, { task: r }),
+          w: "100%",
+          variant: "default",
+          placeholder: "Task name",
+          value: r.title,
+          onChange: (c) => {
+            const n = [...s];
+            n[o] = { ...r, title: c.target.value }, l(n);
+          }
+        },
+        o
+      )) })
+    }
+  );
+};
+export {
+  y as default
+};

package/dist/components/OnBoarding/steps/StartedStep.js

@@ -0,0 +1,71 @@
+import { jsxs as n, jsx as o } from "react/jsx-runtime";
+import { useTranslation as p } from "react-i18next";
+import { useOnboardingState as c } from "../../../store/onboarding.js";
+import { Radio as a, Flex as u, Select as d } from "@mantine/core";
+import b from "./Wrapper.js";
+const f = [
+  "1 - 5",
+  "6 - 10",
+  "11 - 25",
+  "16 - 20",
+  "21 - 25",
+  "26 - 35",
+  "36 - 50",
+  "51 - 100",
+  "100+"
+], v = () => {
+  const {
+    nextStep: l,
+    communityType: t,
+    setCommunityType: i,
+    communityRange: s,
+    setCommunityRange: m
+  } = c(), { t: e } = p("onboarding");
+  return /* @__PURE__ */ n(
+    b,
+    {
+      title: e("beforeStart.title"),
+      description: e("beforeStart.description"),
+      nextText: e("next"),
+      prevText: null,
+      nextButtonProps: {
+        onClick: () => {
+          l();
+        },
+        disabled: !t
+      },
+      children: [
+        /* @__PURE__ */ o(
+          a.Group,
+          {
+            onChange: (r) => i(r),
+            name: "purpose",
+            value: t,
+            children: /* @__PURE__ */ n(u, { align: "start", direction: "column", mt: "xs", children: [
+              /* @__PURE__ */ o(a, { value: "team", label: e("beforeStart.team") }),
+              /* @__PURE__ */ o(a, { value: "organization", label: e("beforeStart.organization") })
+            ] })
+          }
+        ),
+        !!t && /* @__PURE__ */ o(
+          d,
+          {
+            w: "100%",
+            size: "sm",
+            value: s,
+            allowDeselect: !1,
+            onChange: (r) => m(r ?? ""),
+            label: e("beforeStart.selectLabel", {
+              type: t
+            }),
+            placeholder: e("beforeStart.selectPlaceholder"),
+            data: f
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  v as default
+};

package/dist/components/OnBoarding/steps/Wrapper.js

@@ -0,0 +1,49 @@
+import { jsxs as e, jsx as r } from "react/jsx-runtime";
+import { Card as h, Flex as l, Group as f, Title as m, Text as g, Button as o } from "@mantine/core";
+import { IconArrowRight as w, IconArrowLeft as z } from "@tabler/icons-react";
+import W from "./styles.module.css.js";
+const B = ({
+  children: n,
+  title: d,
+  description: c,
+  prevButtonProps: p,
+  nextButtonProps: a,
+  nextText: t,
+  nextIcon: s = /* @__PURE__ */ r(w, { size: 16 }),
+  prevText: i,
+  prevIcon: u = /* @__PURE__ */ r(z, { size: 16 })
+}) => /* @__PURE__ */ e(
+  h,
+  {
+    className: W.stepperWrapper,
+    w: 400,
+    padding: "xl",
+    radius: "lg",
+    withBorder: !0,
+    children: [
+      /* @__PURE__ */ e(l, { direction: "column", align: "start", gap: 16, children: [
+        /* @__PURE__ */ e(f, { gap: 8, children: [
+          /* @__PURE__ */ r(m, { fz: 32, order: 1, children: d }),
+          /* @__PURE__ */ r(g, { fz: 14, fw: 400, children: c })
+        ] }),
+        n
+      ] }),
+      /* @__PURE__ */ e(l, { mt: 32, w: "100%", children: [
+        i !== null && /* @__PURE__ */ r(
+          o,
+          {
+            variant: "subtle",
+            leftSection: u,
+            fullWidth: !0,
+            ...p,
+            children: i
+          }
+        ),
+        t !== null && /* @__PURE__ */ r(o, { rightSection: s, fullWidth: !0, ...a, children: t })
+      ] })
+    ]
+  }
+);
+export {
+  B as default
+};

package/dist/components/OnBoarding/steps/styles.module.css.js

@@ -0,0 +1,17 @@
+const o = "_stepperWrapper_op9ph_1", p = "_accordion_op9ph_13", e = "_content_op9ph_17", t = "_item_op9ph_21", c = "_chevron_op9ph_25", n = "_label_op9ph_32", _ = {
+  stepperWrapper: o,
+  accordion: p,
+  content: e,
+  item: t,
+  chevron: c,
+  label: n
+};
+export {
+  p as accordion,
+  c as chevron,
+  e as content,
+  _ as default,
+  t as item,
+  n as label,
+  o as stepperWrapper
+};