@dss-kit/ui-kit 0.3.0 → 0.3.2

package/dist/components/controls/Input/index.d.ts

@@ -1,2 +1 @@
 export * from './Input';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/controls/Input/styles.d.ts

@@ -15,4 +15,3 @@ export declare const styles: {
     secondary: string;
     "clear-button": string;
 };
-//# sourceMappingURL=styles.d.ts.map

package/dist/components/controls/Input/styles.js

@@ -0,0 +1,77 @@
+import { css as r } from "@emotion/css";
+import { typography as e } from "../../../styles/utils/typography.js";
+import { theme as n } from "../../../utils/theme/index.js";
+const { color: t, spacing: o } = n, i = r({
+  opacity: 0.6,
+  cursor: "not-allowed"
+}), c = {
+  "input-container": r({
+    backgroundColor: t.fill.accentSecondary,
+    border: `1px solid ${t.border.neutralAlphaBasic}`,
+    padding: `${o.md} ${o.lg}`,
+    borderRadius: 12,
+    minHeight: 40,
+    width: "100%",
+    transition: "border-color 0.2s ease, background-color 0.2s ease",
+    "& textarea": {
+      resize: "none"
+    },
+    [`&:not(.${i}):hover`]: {
+      backgroundColor: t.fill.neutralPrimaryHover
+    },
+    "&:focus-within": {
+      borderColor: t.border.accentPrimary,
+      [`&:not(.${i}):hover`]: {
+        borderColor: t.border.accentPrimary
+      }
+    }
+  }),
+  input: r({
+    ...e.common,
+    ...e.body1,
+    background: "transparent",
+    width: "100%",
+    color: t.text.primary,
+    "&::placeholder": {
+      color: t.text.tertiary,
+      textOverflow: "ellipsis"
+    }
+  }),
+  "input-text-size_sm": r({ ...e.body2 }),
+  "input-text-size_md": r({ ...e.body2 }),
+  "input-text-align_left": r({ textAlign: "left" }),
+  "input-text-align_center": r({ textAlign: "center" }),
+  "input-text-align_right": r({ textAlign: "right" }),
+  sm: r({
+    height: 40,
+    padding: o.md
+  }),
+  md: r({
+    height: 48,
+    padding: `14px ${o.lg} 14px ${o.lg}`
+  }),
+  error: r({
+    borderColor: t.border.negativePrimary
+  }),
+  disabled: i,
+  multiline: r({
+    height: "auto"
+  }),
+  primary: r({
+    background: t.fill.bgPrimary
+  }),
+  secondary: r({
+    background: t.fill.bgSecondary
+  }),
+  "clear-button": r({
+    cursor: "pointer",
+    color: t.text.tertiary,
+    height: 20,
+    "&:hover": {
+      color: t.text.primary
+    }
+  })
+};
+export {
+  c as styles
+};

package/dist/components/controls/MarkdownTextEditor/MarkdownTextEditor.const.d.ts

@@ -1,3 +1,2 @@
 import { ToolbarActionsGroup } from './hooks';
 export declare const MARKDOWN_TOOLBAR_DEFAULT_ACTIONS: ToolbarActionsGroup;
-//# sourceMappingURL=MarkdownTextEditor.const.d.ts.map

package/dist/components/controls/MarkdownTextEditor/MarkdownTextEditor.const.js

@@ -0,0 +1,20 @@
+import { MarkdownToolbarAction as L } from "./hooks/useToolbarActions/useToolbarActions.const.js";
+const I = [
+  [
+    L.BOLD,
+    L.ITALIC,
+    L.UNDERLINE,
+    L.STRIKETHROUGH
+  ],
+  [L.LINK, L.IMAGE],
+  [
+    L.ALIGN_LEFT,
+    L.ALIGN_CENTER,
+    L.ALIGN_RIGHT
+  ],
+  [L.TABLE],
+  [L.BULLET_LIST, L.NUMBERED_LIST]
+];
+export {
+  I as MARKDOWN_TOOLBAR_DEFAULT_ACTIONS
+};

package/dist/components/controls/MarkdownTextEditor/MarkdownTextEditor.d.ts

@@ -1,3 +1,2 @@
 import { MarkdownTextEditorProps } from './MarkdownTextEditor.types';
 export declare function MarkdownTextEditor({ label, plugins, field, disabled, locale, toolbar: toolbarOptions, defaultMarkdown, events, className, labelClassName, toolbarClassName, editorClassName, fieldClassName, previewClassName, }: MarkdownTextEditorProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=MarkdownTextEditor.d.ts.map

package/dist/components/controls/MarkdownTextEditor/MarkdownTextEditor.js

@@ -0,0 +1,126 @@
+import { jsx as o, jsxs as c } from "react/jsx-runtime";
+import { $convertToMarkdownString as y } from "@lexical/markdown";
+import { AutoFocusPlugin as B } from "@lexical/react/LexicalAutoFocusPlugin";
+import { LexicalComposer as D } from "@lexical/react/LexicalComposer";
+import { HashtagPlugin as V } from "@lexical/react/LexicalHashtagPlugin";
+import { ListPlugin as j } from "@lexical/react/LexicalListPlugin";
+import { MarkdownShortcutPlugin as U } from "@lexical/react/LexicalMarkdownShortcutPlugin";
+import { OnChangePlugin as W } from "@lexical/react/LexicalOnChangePlugin";
+import { TablePlugin as H } from "@lexical/react/LexicalTablePlugin";
+import { useState as u, useMemo as a, useCallback as p } from "react";
+import { MARKDOWN_TOOLBAR_DEFAULT_ACTIONS as K } from "./MarkdownTextEditor.const.js";
+import { MarkdownTextEditorLocaleProvider as q } from "./MarkdownTextEditor.locale.js";
+import { EDITOR_TRANSFORMERS as g } from "./transformers/index.js";
+import { getEditorConfig as z } from "./configs/editor.config.js";
+import { EditorStateContext as G } from "./contexts/EditorStateContext/EditorStateContext.js";
+import { ToolbarContext as J } from "./contexts/ToolbarContext/ToolbarContext.js";
+import { EditorToolbar as Q } from "./components/EditorToolbar/EditorToolbar.js";
+import { MarkdownPreview as X } from "./components/MarkdownPreview/MarkdownPreview.js";
+import { MarkdownField as Y } from "./components/MarkdownField/MarkdownField.js";
+import { EditablePlugin as Z } from "./plugins/EditablePlugin/EditablePlugin.js";
+import { SyncMarkdownPlugin as oo } from "./plugins/SyncMarkdownPlugin/SyncMarkdownPlugin.js";
+import { ImageRowNodePlugin as ro } from "./plugins/ImageRowNodePlugin/ImageRowNodePlugin.js";
+import { Box as h } from "../../builders/Box/Box.js";
+import { theme as to } from "../../../utils/theme/index.js";
+import { Text as eo } from "../../builders/Text/Text.js";
+const { color: n, cornerRadius: w, spacing: e } = to;
+function No({
+  label: l,
+  plugins: C,
+  field: k,
+  disabled: m = !1,
+  locale: M,
+  toolbar: P,
+  defaultMarkdown: b,
+  events: r = {},
+  className: x,
+  labelClassName: S,
+  toolbarClassName: T,
+  editorClassName: E,
+  fieldClassName: R,
+  previewClassName: v
+}) {
+  const [d, A] = u(""), [i, N] = u(!1), { availableActions: s, onImagesUpload: O } = P || {}, I = a(() => z(), []), L = a(
+    () => ({
+      isEditable: !m,
+      isPreviewMode: i,
+      setPreviewMode: N,
+      markdownText: d
+    }),
+    [m, i, d]
+  ), F = a(() => ({
+    availableActions: s || K
+  }), [s]), f = p(
+    (t) => {
+      A(t), r.onMarkdownChange && r.onMarkdownChange(t);
+    },
+    [r]
+  ), _ = p(
+    (t) => {
+      t.read(() => {
+        const $ = y(g);
+        f($), r.onEditorStateChange && r.onEditorStateChange(t);
+      });
+    },
+    [f, r]
+  );
+  return /* @__PURE__ */ o(q, { locale: M, children: /* @__PURE__ */ o(D, { initialConfig: I, children: /* @__PURE__ */ o(G.Provider, { value: L, children: /* @__PURE__ */ c(J.Provider, { value: F, children: [
+    /* @__PURE__ */ c(
+      h,
+      {
+        flex: !0,
+        w: "full",
+        borderRadius: w.lg,
+        p: e.lg,
+        gap: e.sm,
+        backgroundColor: n.fill.neutralSecondary,
+        className: x,
+        children: [
+          l ? /* @__PURE__ */ o(
+            eo,
+            {
+              variant: "headline-3",
+              fontWeight: "semibold",
+              className: S,
+              children: l
+            }
+          ) : null,
+          /* @__PURE__ */ o(
+            Q,
+            {
+              onImagesUpload: O,
+              className: T
+            }
+          ),
+          /* @__PURE__ */ o(
+            h,
+            {
+              backgroundColor: n.fill.neutralPrimary,
+              border: `1px solid ${n.border.neutralAlphaBasic}`,
+              borderRadius: w.md,
+              p: `${e.md} ${e.lg}`,
+              w: "full",
+              h: 144,
+              overflow: "auto",
+              className: E,
+              children: i ? /* @__PURE__ */ o(X, { className: v }) : /* @__PURE__ */ o(Y, { ...k, className: R })
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ o(B, {}),
+    /* @__PURE__ */ o(j, {}),
+    /* @__PURE__ */ o(H, {}),
+    /* @__PURE__ */ o(V, {}),
+    /* @__PURE__ */ o(U, { transformers: g }),
+    /* @__PURE__ */ o(W, { onChange: _ }),
+    /* @__PURE__ */ o(Z, {}),
+    /* @__PURE__ */ o(oo, { defaultValue: b }),
+    /* @__PURE__ */ o(ro, {}),
+    C
+  ] }) }) }) });
+}
+export {
+  No as MarkdownTextEditor
+};

package/dist/components/controls/MarkdownTextEditor/MarkdownTextEditor.locale.d.ts

@@ -132,4 +132,3 @@ export declare const MarkdownTextEditorLocaleProvider: ({ children, locale: prop
         };
     };
 };
-//# sourceMappingURL=MarkdownTextEditor.locale.d.ts.map

package/dist/components/controls/MarkdownTextEditor/MarkdownTextEditor.locale.js

@@ -0,0 +1,56 @@
+import { createComponentLocaleContext as t } from "../../../locale/factories/createComponentLocaleContext/createComponentLocaleContext.js";
+const i = "MarkdownTextEditor", o = {
+  toolbar: {
+    link: {
+      textPlaceholder: "Enter the text to display",
+      linkPlaceholder: "Paste a link",
+      linkErrorText: "Please enter a valid link",
+      buttonText: "Save"
+    },
+    table: {
+      maxRowsErrorText: (e) => `Maximum number of rows is ${e.limit}`,
+      maxColumnsErrorText: (e) => `Maximum number of columns is ${e.limit}`,
+      minRowsErrorText: (e) => `Minimum number of rows is ${e.limit}`,
+      minColumnsErrorText: (e) => `Minimum number of columns is ${e.limit}`,
+      rowsPlaceholder: "Rows count",
+      columnsPlaceholder: "Columns count",
+      buttonText: "Create table"
+    },
+    textSize: {
+      paragraph: "Normal text",
+      h1: "Heading 1",
+      h2: "Heading 2",
+      h3: "Heading 3"
+    },
+    preview: {
+      show: "Preview",
+      hide: "Preview"
+    },
+    actions: {
+      bold: "Bold",
+      italic: "Italic",
+      underline: "Underline",
+      strikethrough: "Strikethrough",
+      link: "Link",
+      image: "Image",
+      alignLeft: "Align left",
+      alignCenter: "Align center",
+      alignRight: "Align right",
+      table: "Table",
+      bulletList: "Bullet list",
+      numberedList: "Numbered list"
+    }
+  }
+}, {
+  Provider: l,
+  useLocale: n
+} = t({
+  localeKey: i,
+  defaultLocale: o
+});
+export {
+  o as MARKDOWN_TEXT_EDITOR_LOCALE,
+  i as MARKDOWN_TEXT_EDITOR_LOCALE_KEY,
+  l as MarkdownTextEditorLocaleProvider,
+  n as useMarkdownTextEditorLocale
+};

package/dist/components/controls/MarkdownTextEditor/MarkdownTextEditor.types.d.ts

@@ -34,4 +34,3 @@ export interface MarkdownTextEditorProps {
     /** Класс для блока превью (`MarkdownPreview`). */
     previewClassName?: string;
 }
-//# sourceMappingURL=MarkdownTextEditor.types.d.ts.map

package/dist/components/controls/MarkdownTextEditor/components/EditorToolbar/ActionMenuButton/ActionMenuButton.d.ts

@@ -1,3 +1,2 @@
 import { ActionMenuButtonProps } from './ActionMenuButton.types';
 export declare function ActionMenuButton({ groups, toolbarVisibleActionsCount, onAction, disabled, }: ActionMenuButtonProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=ActionMenuButton.d.ts.map

package/dist/components/controls/MarkdownTextEditor/components/EditorToolbar/ActionMenuButton/ActionMenuButton.js

@@ -0,0 +1,82 @@
+import { jsxs as u, jsx as e } from "react/jsx-runtime";
+import { cx as k } from "@emotion/css";
+import { useState as y, useCallback as h, useMemo as B, Fragment as I } from "react";
+import P from "../../../../../../assets/svg/markdown/dots-horizontal.svg.js";
+import { rowStyle as S, rowStyleInteractive as j } from "./ActionMenuButton.styles.js";
+import { Box as c } from "../../../../../builders/Box/Box.js";
+import { theme as z } from "../../../../../../utils/theme/index.js";
+import { Text as A } from "../../../../../builders/Text/Text.js";
+import { Popover as O } from "../../../../../shared/Popover/Popover.js";
+import { IconButton as T } from "../../../../IconButton/IconButton.js";
+const { color: x, spacing: v } = z;
+function K({
+  groups: n,
+  toolbarVisibleActionsCount: m,
+  onAction: s,
+  disabled: r
+}) {
+  const [w, a] = y(!1), p = h(
+    (t) => () => {
+      r || (t && t(), a(!1));
+    },
+    [r]
+  ), f = h(
+    ({ IconComponent: t, ...o }, l) => /* @__PURE__ */ u(
+      c,
+      {
+        className: k(S, !r && j),
+        p: v.sm,
+        alignItems: "center",
+        flex: !0,
+        row: !0,
+        gap: v.xs,
+        onClick: p(() => s(o.id, l)),
+        children: [
+          /* @__PURE__ */ e(
+            t,
+            {
+              width: 20,
+              height: 20,
+              color: x.icon.tertiary
+            }
+          ),
+          /* @__PURE__ */ e(A, { variant: "body-2", children: o.label })
+        ]
+      },
+      o.id
+    ),
+    [r, s, p]
+  ), g = B(() => n.map((t, o) => {
+    const l = o === n.length - 1;
+    if (!t.length)
+      return null;
+    const C = t.map((i, d) => {
+      const M = (o ? n.slice(0, o).flat().length : 0) + d + m;
+      return f(i, M);
+    });
+    return /* @__PURE__ */ u(I, { children: [
+      C,
+      l ? null : /* @__PURE__ */ e(
+        c,
+        {
+          w: "full",
+          h: 1,
+          backgroundColor: x.border.neutralAlphaBasic
+        }
+      )
+    ] }, t.flatMap((i) => i.id).join("-"));
+  }), [n, f, m]);
+  return /* @__PURE__ */ e(
+    O,
+    {
+      content: /* @__PURE__ */ e(c, { flex: !0, children: g }),
+      placement: "bottom",
+      open: w,
+      onChange: a,
+      children: /* @__PURE__ */ e(T, { size: "xs", color: "no-bg", disabled: r, children: /* @__PURE__ */ e(P, {}) })
+    }
+  );
+}
+export {
+  K as ActionMenuButton
+};

package/dist/components/controls/MarkdownTextEditor/components/EditorToolbar/ActionMenuButton/ActionMenuButton.styles.d.ts

@@ -1,3 +1,2 @@
 export declare const rowStyle: string;
 export declare const rowStyleInteractive: string;
-//# sourceMappingURL=ActionMenuButton.styles.d.ts.map

package/dist/components/controls/MarkdownTextEditor/components/EditorToolbar/ActionMenuButton/ActionMenuButton.styles.js

@@ -0,0 +1,16 @@
+import { css as r } from "@emotion/css";
+import { theme as t } from "../../../../../../utils/theme/index.js";
+const { color: o } = t, l = r({
+  cursor: "pointer"
+}), n = r({
+  ":hover": {
+    backgroundColor: o.fill.bgSecondary
+  },
+  ":active": {
+    backgroundColor: o.fill.bgSecondary
+  }
+});
+export {
+  l as rowStyle,
+  n as rowStyleInteractive
+};

package/dist/components/controls/MarkdownTextEditor/components/EditorToolbar/ActionMenuButton/ActionMenuButton.types.d.ts

@@ -5,4 +5,3 @@ export interface ActionMenuButtonProps {
     onAction: (type: MarkdownToolbarAction, globalIndex: number) => void;
     disabled?: boolean;
 }
-//# sourceMappingURL=ActionMenuButton.types.d.ts.map

package/dist/components/controls/MarkdownTextEditor/components/EditorToolbar/ActionMenuButton/index.d.ts

@@ -1,3 +1,2 @@
 export * from './ActionMenuButton';
 export type * from './ActionMenuButton.types';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/controls/MarkdownTextEditor/components/EditorToolbar/EditorToolbar.d.ts

@@ -1,3 +1,2 @@
 import { EditorToolbarProps } from './EditorToolbar.types';
 export declare function EditorToolbar({ onImagesUpload, className, }: EditorToolbarProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=EditorToolbar.d.ts.map