@quen-ui/components 0.0.14 → 1.0.1

package/dist/RadioButton/styles.cjs.js

@@ -24,7 +24,7 @@ const RadioButtonLabelStyled = styled.label`
 const RadioButtonInput = styled.input`
   width: ${({ size }) => getSizing(size)};
   height: ${({ size }) => getSizing(size)};
-  border: 1px solid ${({ theme }) => theme.colors.grayViolet[5]};
+  border: 1px solid ${({ theme }) => theme.components.RadioButton.borderColor};
   border-radius: 50%;
   transition:
     border-color 0.15s,
@@ -36,28 +36,26 @@ const RadioButtonInput = styled.input`
   -webkit-appearance: none;
   
   &:disabled {
-    background-color: ${({ theme }) => theme.colors.gray[2]};
-    border: 1px solid ${({ theme }) => theme.colors.grayViolet[5]};
+    background-color: ${({ theme }) => theme.components.RadioButton.disabledBackground};
     cursor: not-allowed;
   }
 
   &:disabled:checked {
-    background-color: ${({ theme }) => theme.colors.gray[2]};
-    border: calc(${({ size }) => getSizing(size)} / 4) solid ${({ theme }) => theme.colors.violet[3]};
+    background-color: ${({ theme }) => theme.components.RadioButton.disabledBackground};
+    border: calc(${({ size }) => getSizing(size)} / 4) solid ${({ theme }) => theme.components.RadioButton.disabledCheckedBorderColor};
     cursor: not-allowed;
   }
   &:checked {
-    background-color: ${({ theme }) => theme.colors.gray[4]};
-    border: calc(${({ size }) => getSizing(size)} / 4) solid ${({ theme }) => theme.colors.violet[9]};
+    background-color: ${({ theme }) => theme.components.RadioButton.checkedBackground};
+    border: calc(${({ size }) => getSizing(size)} / 4) solid ${({ theme }) => theme.components.RadioButton.checkedBorderColor};
   }
 
   &:hover:not(:disabled) {
-    border: 1px solid ${({ theme }) => theme.colors.violet[5]};
+    border: 1px solid ${({ theme }) => theme.components.RadioButton.hoverBorderColor};
   }
   
   &:hover:checked:not(:disabled) {
-    background-color: ${({ theme }) => theme.colors.gray[2]};
-    border: calc(${({ size }) => getSizing(size)} / 4) solid ${({ theme }) => theme.colors.violet[6]};
+    border: calc(${({ size }) => getSizing(size)} / 4) solid ${({ theme }) => theme.components.RadioButton.hoverBorderColor};
 `;
 const RadioGroupWrapper = styled.div.withConfig({
   shouldForwardProp: (prop) => !["isError"].includes(prop)
@@ -67,15 +65,15 @@ const RadioGroupWrapper = styled.div.withConfig({
   flex-direction: ${({ direction }) => direction === "horizontal" ? "row" : "column"};
 
   .checkbox-group__required {
-    color: ${({ theme }) => theme.colors.red[7]};
+    color: ${({ theme }) => theme.components.RadioButton.errorColor};
   }
 
   .checkbox-group__error-message {
-    color: ${({ theme }) => theme.colors.red[7]};
+    color: ${({ theme }) => theme.components.RadioButton.errorColor};
   }
 
   ${({ isError, theme }) => isError && styled.css`
-      border-left: 2px solid ${theme.colors.red[5]};
+      border-left: 2px solid ${theme.components.RadioButton.borderErrorColor};
       padding-left: 0.5rem;
     `};
 `;

package/dist/RadioButton/styles.es.js

@@ -22,7 +22,7 @@ const RadioButtonLabelStyled = styled.label`
 const RadioButtonInput = styled.input`
   width: ${({ size }) => getSizing(size)};
   height: ${({ size }) => getSizing(size)};
-  border: 1px solid ${({ theme }) => theme.colors.grayViolet[5]};
+  border: 1px solid ${({ theme }) => theme.components.RadioButton.borderColor};
   border-radius: 50%;
   transition:
     border-color 0.15s,
@@ -34,28 +34,26 @@ const RadioButtonInput = styled.input`
   -webkit-appearance: none;
   
   &:disabled {
-    background-color: ${({ theme }) => theme.colors.gray[2]};
-    border: 1px solid ${({ theme }) => theme.colors.grayViolet[5]};
+    background-color: ${({ theme }) => theme.components.RadioButton.disabledBackground};
     cursor: not-allowed;
   }
 
   &:disabled:checked {
-    background-color: ${({ theme }) => theme.colors.gray[2]};
-    border: calc(${({ size }) => getSizing(size)} / 4) solid ${({ theme }) => theme.colors.violet[3]};
+    background-color: ${({ theme }) => theme.components.RadioButton.disabledBackground};
+    border: calc(${({ size }) => getSizing(size)} / 4) solid ${({ theme }) => theme.components.RadioButton.disabledCheckedBorderColor};
     cursor: not-allowed;
   }
   &:checked {
-    background-color: ${({ theme }) => theme.colors.gray[4]};
-    border: calc(${({ size }) => getSizing(size)} / 4) solid ${({ theme }) => theme.colors.violet[9]};
+    background-color: ${({ theme }) => theme.components.RadioButton.checkedBackground};
+    border: calc(${({ size }) => getSizing(size)} / 4) solid ${({ theme }) => theme.components.RadioButton.checkedBorderColor};
   }
 
   &:hover:not(:disabled) {
-    border: 1px solid ${({ theme }) => theme.colors.violet[5]};
+    border: 1px solid ${({ theme }) => theme.components.RadioButton.hoverBorderColor};
   }
   
   &:hover:checked:not(:disabled) {
-    background-color: ${({ theme }) => theme.colors.gray[2]};
-    border: calc(${({ size }) => getSizing(size)} / 4) solid ${({ theme }) => theme.colors.violet[6]};
+    border: calc(${({ size }) => getSizing(size)} / 4) solid ${({ theme }) => theme.components.RadioButton.hoverBorderColor};
 `;
 const RadioGroupWrapper = styled.div.withConfig({
   shouldForwardProp: (prop) => !["isError"].includes(prop)
@@ -65,15 +63,15 @@ const RadioGroupWrapper = styled.div.withConfig({
   flex-direction: ${({ direction }) => direction === "horizontal" ? "row" : "column"};
 
   .checkbox-group__required {
-    color: ${({ theme }) => theme.colors.red[7]};
+    color: ${({ theme }) => theme.components.RadioButton.errorColor};
   }
 
   .checkbox-group__error-message {
-    color: ${({ theme }) => theme.colors.red[7]};
+    color: ${({ theme }) => theme.components.RadioButton.errorColor};
   }
 
   ${({ isError, theme }) => isError && css`
-      border-left: 2px solid ${theme.colors.red[5]};
+      border-left: 2px solid ${theme.components.RadioButton.borderErrorColor};
       padding-left: 0.5rem;
     `};
 `;

package/dist/RichTextEditor/RichTextEditor.cjs.js

@@ -0,0 +1,289 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const theme = require("@quen-ui/theme");
+const helpers = require("./helpers.cjs.js");
+const styles = require("./styles.cjs.js");
+const Flex = require("../Flex/Flex.cjs.js");
+const Divider = require("../Divider/Divider.cjs.js");
+const plugins = require("./plugins.cjs.js");
+const RichTextEditor = ({
+  className,
+  onChange,
+  disabled,
+  value = "",
+  placeholder,
+  style,
+  plugins: plugins$1 = [],
+  enablePlugins = []
+}, ref) => {
+  const theme$1 = theme.useTheme();
+  const editorRef = React.useRef(null);
+  const lastHtmlRef = React.useRef(value);
+  const [selection, setSelection] = React.useState(null);
+  const [updatePluginState, setUpdatePluginState] = React.useState(0);
+  const pluginStateRef = React.useRef({});
+  const exec = React.useCallback(
+    (command, value2) => {
+      if (disabled) return;
+      document.execCommand(command, false, value2);
+      const el = editorRef.current;
+      if (!el) return;
+      const html = helpers.sanitize(el.innerHTML);
+      lastHtmlRef.current = html;
+      onChange?.(html);
+    },
+    [disabled, onChange]
+  );
+  const getHTML = React.useCallback(
+    () => helpers.sanitize(editorRef.current?.innerHTML || ""),
+    []
+  );
+  const setHTML = React.useCallback(
+    (html) => {
+      if (!editorRef.current) return;
+      editorRef.current.innerHTML = helpers.sanitize(html);
+      lastHtmlRef.current = editorRef.current.innerHTML;
+      onChange?.(lastHtmlRef.current);
+    },
+    [onChange]
+  );
+  const getText = React.useCallback(() => editorRef.current?.innerText || "", []);
+  const getPluginState = React.useCallback(
+    (key) => pluginStateRef.current[key],
+    []
+  );
+  const setPluginState = React.useCallback((key, value2) => {
+    setUpdatePluginState(Math.random());
+    pluginStateRef.current[key] = value2;
+  }, []);
+  const update = React.useCallback(() => {
+    if (!editorRef.current) return;
+    const html = helpers.sanitize(editorRef.current.innerHTML);
+    if (html === lastHtmlRef.current) return;
+    lastHtmlRef.current = html;
+    onChange?.(html);
+    const ctx = createCtx();
+    plugins$1.forEach((p) => p.onInput?.(ctx));
+  }, [onChange, plugins$1]);
+  const createCtx = React.useCallback(() => {
+    return {
+      editor: editorRef.current,
+      exec,
+      update,
+      getHTML,
+      getText,
+      setHTML,
+      selection,
+      getPluginState,
+      setPluginState,
+      theme: theme$1
+    };
+  }, [
+    exec,
+    update,
+    getHTML,
+    getText,
+    setHTML,
+    selection,
+    getPluginState,
+    setPluginState,
+    theme$1
+  ]);
+  React.useEffect(() => {
+    if (editorRef.current) {
+      editorRef.current.innerHTML = helpers.sanitize(value);
+      lastHtmlRef.current = editorRef.current.innerHTML;
+    }
+  }, []);
+  const allPlugins = React.useMemo(() => {
+    const pl = [...plugins.defaultPlugins, ...plugins$1];
+    if (enablePlugins?.length) {
+      return pl.filter((p) => enablePlugins.includes(p.key));
+    }
+    return pl;
+  }, [plugins$1]);
+  React.useImperativeHandle(ref, () => ({
+    getHTML: () => helpers.sanitize(editorRef.current?.innerHTML || ""),
+    setHTML: (html) => {
+      if (editorRef.current) {
+        editorRef.current.innerHTML = helpers.sanitize(html);
+        lastHtmlRef.current = editorRef.current.innerHTML;
+        onChange?.(lastHtmlRef.current);
+      }
+    },
+    focus: () => editorRef.current?.focus()
+  }));
+  React.useEffect(() => {
+    const handleSelection = () => {
+      const sel = document.getSelection();
+      setSelection(sel);
+      const ctx = createCtx();
+      allPlugins.forEach((p) => p.onSelectionChange?.(sel, ctx));
+    };
+    document.addEventListener("selectionchange", handleSelection);
+    return () => document.removeEventListener("selectionchange", handleSelection);
+  }, [allPlugins, createCtx]);
+  React.useEffect(() => {
+    const el = editorRef.current;
+    if (!el) return;
+    const ctx = createCtx();
+    const handleInput = () => {
+      update();
+      allPlugins.forEach((p) => p.onInput?.(ctx));
+    };
+    const handleFocus = () => {
+      allPlugins.forEach((p) => p.onFocus?.(ctx));
+    };
+    const handleBlur = () => {
+      allPlugins.forEach((p) => p.onBlur?.(ctx));
+    };
+    const handleKeyDown2 = (e) => {
+      allPlugins.forEach((p) => p.onKeyDown?.(e, ctx));
+    };
+    const handlePaste = (e) => {
+      let handled = false;
+      allPlugins.forEach((p) => {
+        try {
+          p.onPaste?.(e, ctx);
+          if (e.defaultPrevented) handled = true;
+        } catch (err) {
+          window.console.error(err);
+        }
+      });
+      if (!handled) {
+        const clipboard = e.clipboardData;
+        if (!clipboard) return;
+        const html = clipboard.getData("text/html");
+        if (html) {
+          e.preventDefault();
+          const safe = helpers.sanitize(html);
+          document.execCommand("insertHTML", false, safe);
+          update();
+        }
+      }
+    };
+    const handleDrop2 = (ev) => {
+      ev.preventDefault();
+      allPlugins.forEach((p) => p.onDrop?.(ev, ctx));
+      const files = Array.from(ev.dataTransfer?.files || []);
+      for (const file of files) {
+        if (file.type.startsWith("image/")) {
+          const reader = new FileReader();
+          reader.onload = (e) => {
+            const imgHtml = `<img src="${e.target?.result}" alt="image" style="max-width:100%;height:auto;" />`;
+            document.execCommand("insertHTML", false, imgHtml);
+            update();
+          };
+          reader.readAsDataURL(file);
+        }
+      }
+    };
+    el.addEventListener("input", handleInput);
+    el.addEventListener("focus", handleFocus);
+    el.addEventListener("blur", handleBlur);
+    el.addEventListener("keydown", handleKeyDown2);
+    el.addEventListener("paste", handlePaste);
+    el.addEventListener("drop", handleDrop2);
+    return () => {
+      el.removeEventListener("input", handleInput);
+      el.removeEventListener("focus", handleFocus);
+      el.removeEventListener("blur", handleBlur);
+      el.removeEventListener("keydown", handleKeyDown2);
+      el.removeEventListener("paste", handlePaste);
+      el.removeEventListener("drop", handleDrop2);
+    };
+  }, [allPlugins, createCtx, update]);
+  const handleKeyDown = React.useCallback(
+    (e) => {
+      if (e.ctrlKey || e.metaKey) {
+        switch (e.key.toLowerCase()) {
+          case "b":
+            e.preventDefault();
+            exec("bold");
+            break;
+          case "i":
+            e.preventDefault();
+            exec("italic");
+            break;
+          case "u":
+            e.preventDefault();
+            exec("underline");
+            break;
+        }
+      }
+    },
+    [exec]
+  );
+  const onInput = React.useCallback(() => {
+    update();
+  }, [update]);
+  const handleDrop = React.useCallback(
+    (e) => {
+      e.preventDefault();
+      if (disabled) return;
+      const files = Array.from(e.dataTransfer.files);
+      for (const file of files) {
+        if (file.type.startsWith("image/")) {
+          const reader = new FileReader();
+          reader.onload = (ev) => {
+            const img = `<img src="${ev.target?.result}" alt="image" style="max-width:100%;height:auto;" />`;
+            document.execCommand("insertHTML", false, img);
+            update();
+          };
+          reader.readAsDataURL(file);
+        }
+      }
+    },
+    [update, disabled]
+  );
+  const handleDragOver = React.useCallback(
+    (e) => {
+      if (!disabled) e.preventDefault();
+    },
+    [disabled]
+  );
+  const renderToolbar = React.useCallback(() => {
+    const ctx = createCtx();
+    return allPlugins.map((plugin, idx) => {
+      const key = plugin.key ?? `p_${idx}`;
+      const state = plugin.getState ? plugin.getState(editorRef.current, ctx) : { active: false };
+      const title = plugin.title;
+      const onClick = (ref2) => plugin.action?.({
+        exec,
+        update,
+        editor: editorRef.current,
+        context: ctx,
+        ref: ref2
+      });
+      return /* @__PURE__ */ jsxRuntime.jsx(React.Fragment, { children: helpers.toolbarButton(
+        plugin.label,
+        onClick,
+        title,
+        plugin.disabled,
+        Boolean(state?.active)
+      ) }, key);
+    });
+  }, [updatePluginState]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(styles.RichTextEditorWrapper, { className, style, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Flex, { gap: "xs", wrap: "wrap", children: renderToolbar() }),
+    /* @__PURE__ */ jsxRuntime.jsx(Divider, { direction: "horizontal", view: "disabled" }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      styles.RichTextEditorContentStyled,
+      {
+        role: "textbox",
+        ref: editorRef,
+        contentEditable: !disabled,
+        suppressContentEditableWarning: true,
+        onInput,
+        onKeyDown: handleKeyDown,
+        "data-placeholder": placeholder,
+        "aria-label": "Rich text editor",
+        onDrop: handleDrop,
+        onDragOver: handleDragOver
+      }
+    )
+  ] });
+};
+const RichTextEditor_default = React.forwardRef(RichTextEditor);
+module.exports = RichTextEditor_default;

package/dist/RichTextEditor/RichTextEditor.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { IRichTextEditorProps, IRichTextEditorHandle } from './types';
+declare const _default: React.ForwardRefExoticComponent<IRichTextEditorProps & React.RefAttributes<IRichTextEditorHandle>>;
+export default _default;