@povio/ui 0.0.7 → 0.0.8

package/dist/components/inputs/TextEditor/TextEditor.js

@@ -1,223 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { mergeRefs } from "@react-aria/utils";
-import { Color } from "@tiptap/extension-color";
-import { Highlight } from "@tiptap/extension-highlight";
-import { Link } from "@tiptap/extension-link";
-import { Placeholder } from "@tiptap/extension-placeholder";
-import { TextAlign } from "@tiptap/extension-text-align";
-import { TextStyle } from "@tiptap/extension-text-style";
-import { Underline } from "@tiptap/extension-underline";
-import { useEditor, EditorContent } from "@tiptap/react";
-import { StarterKit } from "@tiptap/starter-kit";
-import { clsx } from "clsx";
-import { useRef, useState, useEffect } from "react";
-import { useHover, useFocusWithin, useFocusVisible, useLabel } from "react-aria";
-import { Controller } from "react-hook-form";
-import { FormField } from "../FormField/FormField.js";
-import { FormFieldLabel } from "../FormField/FormFieldLabel.js";
-import { uiOutlineClass } from "../../outline.clsx.js";
-import { isEqual } from "../../../utils/isEqual.js";
-import { TextEditorToolbar } from "./Toolbar/TextEditorToolbar.js";
-const extensions = [
-  StarterKit.configure({
-    heading: {
-      levels: [1, 2, 3]
-    }
-  }),
-  TextAlign.configure({
-    types: ["heading", "paragraph"]
-  }),
-  Underline,
-  TextStyle,
-  Color,
-  Highlight.configure({
-    multicolor: true
-  }),
-  Link.configure({
-    openOnClick: false,
-    defaultProtocol: "https"
-  })
-];
-const TextEditorBase = ({
-  ref,
-  as = "default",
-  placeholder,
-  label,
-  hideLabel,
-  tooltipText,
-  helperText,
-  isRequired,
-  rightContent,
-  isDisabled,
-  headerClassName,
-  errorClassName,
-  isHeaderHidden,
-  error,
-  value,
-  className,
-  onChange,
-  onBlur
-}) => {
-  const contentRef = useRef(null);
-  const { hoverProps, isHovered } = useHover({ isDisabled });
-  const [isFocused, setIsFocused] = useState(false);
-  const { focusWithinProps } = useFocusWithin({
-    onFocusWithinChange: setIsFocused
-  });
-  const { isFocusVisible } = useFocusVisible();
-  const formFieldProps = {
-    error,
-    label,
-    tooltipText,
-    helperText,
-    isRequired,
-    rightContent,
-    isHeaderHidden: isHeaderHidden || as === "filter" || as === "floating",
-    hideLabel,
-    isDisabled,
-    headerClassName,
-    errorClassName
-  };
-  const { labelProps, fieldProps } = useLabel({ label });
-  const editor = useEditor(
-    {
-      extensions: [...extensions, Placeholder.configure({ placeholder: as === "floating" ? "" : placeholder })],
-      editorProps: {
-        attributes: {
-          class: "min-h-40 rounded-b-sm p-2 outline-none"
-        }
-      },
-      onUpdate: (event) => {
-        onChange?.({
-          json: event.editor.getJSON(),
-          html: event.editor.getHTML()
-        });
-      },
-      immediatelyRender: false,
-      editable: !isDisabled,
-      onBlur
-    },
-    [isDisabled]
-  );
-  useEffect(() => {
-    const content = value?.json ?? null;
-    if (editor) {
-      const isSame = isEqual(content, editor.getJSON());
-      if (!isSame) {
-        editor.commands.setContent(content);
-      }
-    } else {
-      const isSame = isEqual(content, contentRef.current);
-      if (!isSame) {
-        contentRef.current = content ?? null;
-      }
-    }
-  }, [value]);
-  useEffect(() => {
-    if (editor && contentRef.current) {
-      editor.commands.setContent(contentRef.current);
-      contentRef.current = null;
-    }
-  }, [editor]);
-  const headerProps = {
-    label,
-    tooltipText,
-    helperText,
-    isRequired,
-    rightContent,
-    isHeaderHidden: hideLabel || isHeaderHidden,
-    isDisabled,
-    className: headerClassName,
-    labelProps
-  };
-  return /* @__PURE__ */ jsx(
-    FormField,
-    {
-      ...formFieldProps,
-      ref,
-      as,
-      labelProps,
-      className: clsx("w-full", className),
-      children: /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: clsx(
-            "group/text-editor relative",
-            "w-full rounded-sm border border-elevation-outline-default-2 border-solid bg-elevation-fill-default-1",
-            uiOutlineClass,
-            "focus-within:border focus-within:border-input-outlined-outline-active",
-            "focus-visible:outline-interactive-contained-primary-focus",
-            "hover:border hover:border-input-outlined-outline-hover"
-          ),
-          "data-text-editor": true,
-          "data-rac": "",
-          "data-hovered": isHovered || void 0,
-          "data-disabled": isDisabled || void 0,
-          "data-focus-within": isFocused || void 0,
-          "data-focus-visible": isFocused && isFocusVisible || void 0,
-          "data-is-filled": !editor?.isEmpty,
-          ...hoverProps,
-          ...focusWithinProps,
-          ...fieldProps,
-          children: [
-            /* @__PURE__ */ jsx(TextEditorToolbar, { editor }),
-            /* @__PURE__ */ jsxs(
-              "div",
-              {
-                className: clsx("relative", {
-                  "pt-3": as === "floating"
-                }),
-                children: [
-                  as === "floating" && headerProps && /* @__PURE__ */ jsx(
-                    FormFieldLabel,
-                    {
-                      as,
-                      ...headerProps
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(
-                    EditorContent,
-                    {
-                      editor,
-                      placeholder: as === "floating" ? "" : placeholder,
-                      className: clsx({
-                        "[&_p:before]:opacity-0": as === "floating" && editor?.isEmpty
-                      })
-                    }
-                  )
-                ]
-              }
-            )
-          ]
-        }
-      )
-    }
-  );
-};
-const TextEditor = (props) => {
-  if ("formControl" in props && props.formControl) {
-    const { formControl, ref, ...innerProps } = props;
-    return /* @__PURE__ */ jsx(
-      Controller,
-      {
-        control: formControl.control,
-        name: formControl.name,
-        render: ({ field }) => /* @__PURE__ */ jsx(
-          TextEditorBase,
-          {
-            ...innerProps,
-            ref: mergeRefs(ref, field.ref),
-            value: field.value,
-            onChange: field.onChange,
-            onBlur: field.onBlur,
-            isDisabled: field.disabled || props.isDisabled
-          }
-        )
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx(TextEditorBase, { ...props });
-};
-export {
-  TextEditor
-};

package/dist/components/inputs/TextEditor/Toolbar/ColorPicker.js

@@ -1,34 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { clsx } from "clsx";
-import { ColorSwatchPicker, ColorSwatchPickerItem, ColorSwatch } from "react-aria-components";
-const ColorPicker = ({ colors, value, onChange }) => {
-  return /* @__PURE__ */ jsx(
-    ColorSwatchPicker,
-    {
-      value,
-      onChange: (color) => onChange(color.toString("hex")),
-      className: "grid w-full grid-cols-[repeat(auto-fit,minmax(1rem,1fr))] gap-1",
-      children: colors.map((color) => /* @__PURE__ */ jsx(
-        ColorSwatchPickerItem,
-        {
-          color,
-          className: "group",
-          children: /* @__PURE__ */ jsx(
-            ColorSwatch,
-            {
-              className: clsx(
-                "size-4 rounded-xs border border-interactive-outlined-secondary-outline-idle border-solid",
-                "group-selected:border-interactive-outlined-primary-outline-pressed group-selected:shadow-2",
-                "cursor-pointer"
-              )
-            }
-          )
-        },
-        color
-      ))
-    }
-  );
-};
-export {
-  ColorPicker
-};

package/dist/components/inputs/TextEditor/Toolbar/ColorPickerDropdown.js

@@ -1,80 +0,0 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { clsx } from "clsx";
-import { useState } from "react";
-import { DialogTrigger, Button, Popover, Dialog } from "react-aria-components";
-import { ArrowDropDownIcon } from "../../../../assets/icons/ArrowDropDown.js";
-import { useInputCva } from "../../shared/input.cva.js";
-import { ColorPicker } from "./ColorPicker.js";
-import { Typography } from "../../../text/Typography/Typography.js";
-const ColorPickerDropdown = ({ colors, value, onChange, isDisabled, children }) => {
-  const inputCva = useInputCva();
-  const [isOpen, setIsOpen] = useState(false);
-  const handleChange = (color) => {
-    onChange(color);
-    setIsOpen(false);
-  };
-  return /* @__PURE__ */ jsxs(
-    DialogTrigger,
-    {
-      isOpen,
-      onOpenChange: setIsOpen,
-      children: [
-        /* @__PURE__ */ jsxs(
-          Button,
-          {
-            className: inputCva({
-              as: "inline",
-              className: clsx("flex items-center justify-between gap-2")
-            }),
-            isDisabled,
-            children: [
-              /* @__PURE__ */ jsx(
-                Typography,
-                {
-                  size: "label-1",
-                  className: "truncate",
-                  children
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                ArrowDropDownIcon,
-                {
-                  className: clsx("size-6 shrink-0", isOpen && "rotate-180"),
-                  "aria-hidden": "true"
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          Popover,
-          {
-            className: "my-4 w-40 outline-none",
-            offset: 0,
-            placement: "bottom start",
-            children: /* @__PURE__ */ jsx(Dialog, { className: "outline-none", children: /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: clsx(
-                  "flex justify-center overflow-hidden p-2 shadow-5 outline-none",
-                  "rounded-input-rounding-default border border-elevation-outline-default-1 bg-elevation-fill-default-1"
-                ),
-                children: /* @__PURE__ */ jsx(
-                  ColorPicker,
-                  {
-                    colors,
-                    value,
-                    onChange: handleChange
-                  }
-                )
-              }
-            ) })
-          }
-        )
-      ]
-    }
-  );
-};
-export {
-  ColorPickerDropdown
-};

package/dist/components/inputs/TextEditor/Toolbar/HyperlinkAction.js

@@ -1,92 +0,0 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { clsx } from "clsx";
-import { useState, useEffect } from "react";
-import { useTranslation } from "react-i18next";
-import { LinkIcon } from "../../../../assets/icons/Link.js";
-import { Button } from "../../../buttons/Button/Button.js";
-import { InlineIconButton } from "../../../buttons/InlineIconButton/InlineIconButton.js";
-import { TextInput } from "../../Input/TextInput/TextInput.js";
-import { ResponsivePopover } from "../../../overlays/ResponsivePopover/ResponsivePopover.js";
-import { ns } from "../../../../config/i18n.js";
-const HyperlinkAction = ({ editor }) => {
-  const { t } = useTranslation(ns);
-  const [isOpen, setIsOpen] = useState(false);
-  const [url, setUrl] = useState("");
-  const isLinkEnabled = !!editor.extensionManager.extensions.find((extension) => extension.name === "link");
-  const linkHref = editor.getAttributes("link")?.href;
-  useEffect(() => {
-    setUrl(linkHref || "");
-  }, [linkHref]);
-  if (!isLinkEnabled) {
-    return null;
-  }
-  const onRemove = () => {
-    editor.chain().focus().extendMarkRange("link").unsetLink().run();
-    setIsOpen(false);
-  };
-  const onApply = () => {
-    editor.chain().focus().extendMarkRange("link").setLink({ href: url }).run();
-    setIsOpen(false);
-  };
-  return /* @__PURE__ */ jsxs(
-    ResponsivePopover,
-    {
-      isOpen,
-      onOpenChange: setIsOpen,
-      sheetLabel: t(($) => $.ui.textEditor.link.label),
-      trigger: /* @__PURE__ */ jsx(
-        InlineIconButton,
-        {
-          color: "secondary",
-          label: t(($) => $.ui.textEditor.link.label),
-          icon: LinkIcon,
-          className: clsx(editor.isActive("link") && "!text-interactive-text-primary-idle"),
-          isDisabled: !editor.isEditable
-        }
-      ),
-      children: [
-        /* @__PURE__ */ jsx(
-          TextInput,
-          {
-            variant: "outlined",
-            hideLabel: true,
-            label: t(($) => $.ui.textEditor.link.urlLabel),
-            placeholder: t(($) => $.ui.textEditor.link.urlPlaceholder),
-            value: url,
-            onChange: setUrl,
-            className: "mb-4"
-          }
-        ),
-        /* @__PURE__ */ jsxs("div", { className: "flex justify-between", children: [
-          /* @__PURE__ */ jsx(
-            Button,
-            {
-              variant: "contained",
-              color: "secondary",
-              size: "xs",
-              width: "hug",
-              onPress: onApply,
-              isDisabled: !url,
-              children: t(($) => $.ui.textEditor.link.apply)
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            Button,
-            {
-              variant: "outlined",
-              color: "secondary",
-              size: "xs",
-              width: "hug",
-              onPress: onRemove,
-              isDisabled: !editor.isActive("link"),
-              children: t(($) => $.ui.textEditor.link.remove)
-            }
-          )
-        ] })
-      ]
-    }
-  );
-};
-export {
-  HyperlinkAction
-};

package/dist/components/inputs/TextEditor/Toolbar/TextAlignSelect.js

@@ -1,56 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { useTranslation } from "react-i18next";
-import { AlignCenterIcon } from "../../../../assets/icons/AlignCenter.js";
-import { AlignLeftIcon } from "../../../../assets/icons/AlignLeft.js";
-import { AlignLeftRightIcon } from "../../../../assets/icons/AlignLeftRight.js";
-import { AlignRightIcon } from "../../../../assets/icons/AlignRight.js";
-import { Select } from "../../Selection/Select/Select.js";
-import { ns } from "../../../../config/i18n.js";
-const TextAlignSelect = ({ editor }) => {
-  const { t } = useTranslation(ns);
-  const isAlignEnabled = !!editor.extensionManager.extensions.find((extension) => extension.name === "textAlign");
-  if (!isAlignEnabled) {
-    return null;
-  }
-  const onChange = (val) => {
-    if (val) {
-      editor.chain().focus().setTextAlign(val).run();
-    } else {
-      editor.chain().focus().unsetTextAlign().run();
-    }
-  };
-  const getItem = (id, Icon) => {
-    return {
-      id,
-      label: t(($) => $.ui.textEditor.textAlign[id]),
-      content: /* @__PURE__ */ jsx(Icon, { className: "size-6" }),
-      isActive: editor.isActive({ textAlign: id }),
-      can: editor.can().setTextAlign(id)
-    };
-  };
-  const items = [
-    getItem("left", AlignLeftIcon),
-    getItem("center", AlignCenterIcon),
-    getItem("right", AlignRightIcon),
-    getItem("justify", AlignLeftRightIcon)
-  ];
-  const enabledItems = items.filter((item) => item.can);
-  return /* @__PURE__ */ jsx(
-    Select,
-    {
-      as: "inline",
-      label: t(($) => $.ui.textEditor.textAlign.label),
-      placeholder: t(($) => $.ui.textEditor.textAlign.label),
-      hideLabel: true,
-      ignoreTriggerWidth: true,
-      showSelectionContent: true,
-      onChange,
-      items: enabledItems,
-      value: enabledItems.find((item) => item.isActive)?.id || "left",
-      isDisabled: !editor.isEditable
-    }
-  );
-};
-export {
-  TextAlignSelect
-};

package/dist/components/inputs/TextEditor/Toolbar/TextColorSelect.js

@@ -1,33 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { TextColorIcon } from "../../../../assets/icons/TextColor.js";
-import { ColorPickerDropdown } from "./ColorPickerDropdown.js";
-import { defaultColors } from "../textEditor.types.js";
-const TextColorSelect = ({ editor }) => {
-  const isColorEnabled = editor.extensionManager.extensions.some((extension) => extension.name === "color");
-  if (!isColorEnabled) {
-    return null;
-  }
-  const onChange = (color) => {
-    editor.chain().focus().setColor(color).run();
-  };
-  const textColor = editor.getAttributes("textStyle").color || "#000000";
-  return /* @__PURE__ */ jsx(
-    ColorPickerDropdown,
-    {
-      value: textColor,
-      onChange,
-      colors: defaultColors,
-      isDisabled: !editor.isEditable,
-      children: /* @__PURE__ */ jsx(
-        TextColorIcon,
-        {
-          className: "size-6",
-          textColor
-        }
-      )
-    }
-  );
-};
-export {
-  TextColorSelect
-};

package/dist/components/inputs/TextEditor/Toolbar/TextEditorToolbar.js

@@ -1,31 +0,0 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { HyperlinkAction } from "./HyperlinkAction.js";
-import { TextAlignSelect } from "./TextAlignSelect.js";
-import { TextColorSelect } from "./TextColorSelect.js";
-import { TextHighlightSelect } from "./TextHighlightSelect.js";
-import { TextListActions } from "./TextListActions.js";
-import { TextMarksActions } from "./TextMarksActions.js";
-import { TextStyleSelect } from "./TextStyleSelect.js";
-const TextEditorToolbar = ({ editor }) => {
-  if (!editor) {
-    return null;
-  }
-  return /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-wrap items-center gap-x-7 gap-y-1 border-elevation-outline-default-2 border-b border-solid p-2", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-1", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-        /* @__PURE__ */ jsx(TextStyleSelect, { editor }),
-        /* @__PURE__ */ jsx(TextAlignSelect, { editor })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-        /* @__PURE__ */ jsx(TextColorSelect, { editor }),
-        /* @__PURE__ */ jsx(TextHighlightSelect, { editor })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsx(TextMarksActions, { editor }),
-    /* @__PURE__ */ jsx(TextListActions, { editor }),
-    /* @__PURE__ */ jsx(HyperlinkAction, { editor })
-  ] });
-};
-export {
-  TextEditorToolbar
-};

package/dist/components/inputs/TextEditor/Toolbar/TextHighlightSelect.js

@@ -1,37 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { HighlightOnIcon } from "../../../../assets/icons/HighlightOn.js";
-import { ColorPickerDropdown } from "./ColorPickerDropdown.js";
-import { defaultColors } from "../textEditor.types.js";
-const TextHighlightSelect = ({ editor }) => {
-  const isHighlightEnabled = editor.extensionManager.extensions.some((extension) => extension.name === "highlight");
-  if (!isHighlightEnabled) {
-    return null;
-  }
-  const onChange = (color) => {
-    if (color === "#FFFFFF") {
-      editor.chain().focus().unsetHighlight().run();
-    } else {
-      editor.chain().focus().setHighlight({ color }).run();
-    }
-  };
-  const highlightColor = editor.getAttributes("highlight").color || "#FFFFFF";
-  return /* @__PURE__ */ jsx(
-    ColorPickerDropdown,
-    {
-      value: highlightColor,
-      onChange,
-      colors: defaultColors,
-      isDisabled: !editor.isEditable,
-      children: /* @__PURE__ */ jsx(
-        HighlightOnIcon,
-        {
-          className: "size-6",
-          highlightColor
-        }
-      )
-    }
-  );
-};
-export {
-  TextHighlightSelect
-};

package/dist/components/inputs/TextEditor/Toolbar/TextListActions.js

@@ -1,51 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { clsx } from "clsx";
-import { useTranslation } from "react-i18next";
-import { BulletedListIcon } from "../../../../assets/icons/BulletedList.js";
-import { NumberedListIcon } from "../../../../assets/icons/NumberedList.js";
-import { InlineIconButton } from "../../../buttons/InlineIconButton/InlineIconButton.js";
-import { ns } from "../../../../config/i18n.js";
-const TextListActions = ({ editor }) => {
-  const { t } = useTranslation(ns);
-  const actions = [
-    {
-      can: !!editor.extensionManager.extensions.find((extension) => extension.name === "bulletList"),
-      isEnabled: () => editor.isEditable && editor.can().toggleBulletList(),
-      label: t(($) => $.ui.textEditor.marks.bold),
-      icon: BulletedListIcon,
-      onPress: () => {
-        editor.chain().focus().toggleBulletList().run();
-      },
-      isActive: () => editor.isActive("bulletList")
-    },
-    {
-      can: !!editor.extensionManager.extensions.find((extension) => extension.name === "orderedList"),
-      isEnabled: () => editor.isEditable && editor.can().toggleOrderedList(),
-      label: t(($) => $.ui.textEditor.marks.italic),
-      icon: NumberedListIcon,
-      onPress: () => {
-        editor.chain().focus().toggleOrderedList().run();
-      },
-      isActive: () => editor.isActive("orderedList")
-    }
-  ];
-  const enabledActions = actions.filter((action) => action.can);
-  if (enabledActions.length === 0) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx("div", { className: "flex h-full items-center gap-3", children: enabledActions.map((action) => /* @__PURE__ */ jsx(
-    InlineIconButton,
-    {
-      color: "secondary",
-      label: action.label,
-      onPress: action.onPress,
-      icon: action.icon,
-      isDisabled: !action.isEnabled(),
-      className: clsx(action.isActive() && "!text-interactive-text-primary-idle")
-    },
-    action.label
-  )) });
-};
-export {
-  TextListActions
-};