@layers-app/shared 0.0.45 → 0.1.0

package/dist/KanbanLayout-CkCywhDz.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 { IconCheck, IconBug, IconSquareRotated, IconPlus, IconCalendarEvent, IconEqual } from "@tabler/icons-react";
+import "react-router-dom";
+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-rY9riqpK.js";
+import "react-dom";
+import "draggable-ui";
+import "@mantine/modals";
+import "i18next";
+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
+};

package/dist/components/ProjectIcon/ProjectIcon.d.ts

@@ -8,10 +8,15 @@ export type ProjectIconProps = {
     fallbackColorById?: string;
     initials?: boolean;
 } & Omit<AvatarProps, 'color' | 'name'>;
+export declare enum IconType {
+    OUTLINED = "o",
+    FILLED = "f"
+}
 type IconData = {
     icon: string;
     color: string;
     emoji: string;
+    type: IconType;
 };
 export declare namespace IconEntity {
     const parse: (value?: string | null) => IconData | null;

package/dist/components/RichText/extensions/bold.d.ts

@@ -0,0 +1,3 @@
+export declare const Bold: import('@tiptap/core').Mark<import('@tiptap/extension-bold').BoldOptions, any> & {
+    Control: () => import("react/jsx-runtime").JSX.Element;
+};

package/dist/components/RichText/extensions/check-list.d.ts

@@ -0,0 +1,42 @@
+import { Node } from '@tiptap/core';
+interface ICheckListOptions {
+    /**
+     * The node name for the list items
+     * @default 'listItem'
+     * @example 'paragraph'
+     */
+    itemTypeName: string;
+    /**
+     * HTML attributes to add to the check list element
+     * @default {}
+     * @example { class: 'foo' }
+     */
+    HTMLAttributes: Record<string, any>;
+    /**
+     * Keep the marks when splitting the list
+     * @default false
+     * @example true
+     */
+    keepMarks: boolean;
+    /**
+     * Keep the attributes when splitting the list
+     * @default false
+     * @example true
+     */
+    keepAttributes: boolean;
+}
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        checkList: {
+            /**
+             * Toggle an check list
+             * @example editor.commands.toggleCheckList()
+             */
+            toggleCheckList: () => ReturnType;
+        };
+    }
+}
+export declare const CheckList: Node<ICheckListOptions, any> & {
+    Control: () => import("react/jsx-runtime").JSX.Element;
+};
+export {};

package/dist/components/RichText/extensions/color-picker.d.ts

@@ -0,0 +1,28 @@
+import { Extension } from '@tiptap/core';
+export type ColorOptions = {
+    types: string[];
+};
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        backColor: {
+            /**
+             * Set the text color
+             */
+            setBackColor: (color: string) => ReturnType;
+            /**
+             * Unset the text color
+             */
+            unsetBackColor: () => ReturnType;
+        };
+    }
+}
+export declare const BackColor: Extension<ColorOptions, any>;
+export declare const ColorPicker: Extension<ColorOptions, any> & {
+    Control: ({ staticBg, onChange, }: {
+        staticBg?: boolean;
+        onChange?: (v: {
+            value: string;
+            mode: string;
+        }) => void;
+    }) => import("react/jsx-runtime").JSX.Element;
+};

package/dist/components/RichText/extensions/font-size.d.ts

@@ -0,0 +1,23 @@
+import { Extension } from '@tiptap/core';
+interface IFontSizeOptions {
+    types: string[];
+    getStyle: (fontSize: string) => string;
+}
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        fontSize: {
+            /**
+             * Set the font size attribute
+             */
+            setFontSize: (size: string) => ReturnType;
+            /**
+             * Unset the font size attribute
+             */
+            unsetFontSize: () => ReturnType;
+        };
+    }
+}
+export declare const FontSize: Extension<IFontSizeOptions, any> & {
+    Control: () => import("react/jsx-runtime").JSX.Element;
+};
+export {};

package/dist/components/RichText/extensions/italic.d.ts

@@ -0,0 +1,3 @@
+export declare const Italic: import('@tiptap/core').Mark<import('@tiptap/extension-italic').ItalicOptions, any> & {
+    Control: () => import("react/jsx-runtime").JSX.Element;
+};

package/dist/components/RichText/extensions/underline.d.ts

@@ -0,0 +1,3 @@
+export declare const Underline: import('@tiptap/core').Mark<import('@tiptap/extension-underline').UnderlineOptions, any> & {
+    Control: () => import("react/jsx-runtime").JSX.Element;
+};

package/dist/components/RichText/index.d.ts

@@ -0,0 +1,41 @@
+import { RichTextEditorContentProps } from '@mantine/tiptap';
+interface IProps {
+    value?: string;
+    placeholder?: string;
+    style?: React.CSSProperties;
+    disabled?: boolean;
+    onChange?: (v: string) => void;
+}
+export declare const RichText: import('react').ForwardRefExoticComponent<IProps & {
+    children?: import('react').ReactNode | undefined;
+} & import('react').RefAttributes<HTMLDivElement>> & {
+    Content: (props: RichTextEditorContentProps) => import("react/jsx-runtime").JSX.Element;
+    Bold: () => import("react/jsx-runtime").JSX.Element;
+    Italic: () => import("react/jsx-runtime").JSX.Element;
+    Underline: () => import("react/jsx-runtime").JSX.Element;
+    OrderedList: import('react').ForwardRefExoticComponent<import('node_modules/@mantine/tiptap/lib/RichTextEditorControl/RichTextEditorControl').RichTextEditorControlBaseProps & import('react').RefAttributes<HTMLButtonElement>>;
+    BulletList: import('react').ForwardRefExoticComponent<import('node_modules/@mantine/tiptap/lib/RichTextEditorControl/RichTextEditorControl').RichTextEditorControlBaseProps & import('react').RefAttributes<HTMLButtonElement>>;
+    Link: import('@mantine/core').MantineComponent<{
+        props: import('@mantine/tiptap').RichTextEditorLinkControlProps;
+        ref: HTMLButtonElement;
+        stylesNames: import('node_modules/@mantine/tiptap/lib/RichTextEditorControl/RichTextEditorLinkControl').RichTextEditorLinkControlStylesNames;
+        compound: true;
+    }>;
+    CheckList: () => import("react/jsx-runtime").JSX.Element;
+    FontSize: () => import("react/jsx-runtime").JSX.Element;
+    ColorPicker: ({ staticBg, onChange, }: {
+        staticBg?: boolean;
+        onChange?: (v: {
+            value: string;
+            mode: string;
+        }) => void;
+    }) => import("react/jsx-runtime").JSX.Element;
+};
+export interface IRichTextRef extends HTMLDivElement {
+    isFocused: boolean;
+    text: string | undefined;
+    setContent: (v: string) => void;
+    focus: (v?: FocusOptions) => void;
+    setTextAlign: (v: 'left' | 'right' | 'center') => void;
+}
+export {};