@povio/ui 0.0.2 → 0.0.3

package/src/components/inputs/Slider/Slider.tsx

@@ -0,0 +1,174 @@
+import { mergeRefs } from "@react-aria/utils";
+import { clsx } from "clsx";
+import type { CSSProperties, Ref } from "react";
+import {
+  Slider as AriaSlider,
+  type SliderProps as AriaSliderProps,
+  SliderThumb as AriaSliderThumb,
+  SliderTrack as AriaSliderTrack,
+} from "react-aria-components";
+import { Controller, type FieldValues } from "react-hook-form";
+import type { SliderState as AriaSLiderState } from "react-stately";
+
+import { FormField, type FormFieldProps } from "#ui/components/inputs/FormField/FormField";
+import type { ControlProps } from "#ui/components/inputs/shared/form.types";
+import { uiOutlineClass } from "#ui/components/outline.clsx";
+import { Typography } from "#ui/components/text/Typography/Typography";
+import { UIConfig } from "#ui/config/uiConfig.context";
+
+type SliderValue<IsRange extends boolean = false> = IsRange extends false ? number : number[];
+
+interface SliderBaseProps<IsRange extends boolean = false>
+  extends FormFieldProps,
+    Omit<AriaSliderProps, "value" | "defaultValue" | "onChange" | "className"> {
+  ref?: Ref<HTMLDivElement>;
+  unit?: string;
+  isRange?: IsRange;
+  defaultValue?: SliderValue<IsRange>;
+  value?: SliderValue<IsRange>;
+  onChange?: (value: SliderValue<IsRange>) => void;
+}
+
+const SliderBase = <IsRange extends boolean = false>(props: SliderBaseProps<IsRange>) => {
+  const ui = UIConfig.useConfig();
+
+  const {
+    label,
+    tooltipText,
+    helperText,
+    isRequired,
+    rightContent,
+    isDisabled,
+    headerClassName,
+    errorClassName,
+    isHeaderHidden,
+    error,
+    unit,
+    hideLabel = ui.input.hideLabel,
+    minValue = ui.slider.minValue,
+    maxValue = ui.slider.maxValue,
+    ...rest
+  } = props;
+
+  const formFieldProps: FormFieldProps = {
+    error,
+    label,
+    tooltipText,
+    helperText,
+    isRequired,
+    rightContent,
+    isHeaderHidden,
+    hideLabel,
+    isDisabled,
+    headerClassName,
+    errorClassName,
+  };
+
+  const defaultValue =
+    props.defaultValue ?? ((props.isRange ? [minValue, minValue] : minValue) as SliderValue<IsRange>);
+
+  const getTrackFillStyle = (state: AriaSLiderState): CSSProperties => {
+    const p0 = state.getThumbPercent(0);
+    const p1 = state.getThumbPercent(1);
+
+    return {
+      left: props.isRange ? `${p0 * 100}%` : 0,
+      width: props.isRange ? `${(p1 - p0) * 100}%` : `${p0 * 100}%`,
+    };
+  };
+
+  return (
+    <AriaSlider<SliderValue<IsRange>>
+      {...rest}
+      defaultValue={defaultValue}
+      minValue={minValue}
+      maxValue={maxValue}
+      isDisabled={isDisabled}
+    >
+      <FormField {...formFieldProps}>
+        <div className="flex items-center justify-between">
+          <Typography
+            className="min-w-10 px-slider-side-leading-and-trailing py-slider-height-leading-and-trailing text-text-default-3"
+            size="label-2"
+          >
+            {minValue}
+            {unit}
+          </Typography>
+
+          <AriaSliderTrack className="relative mx-2 h-6 w-full">
+            {({ state }) => (
+              <>
+                <div className="-translate-y-1/2 absolute top-1/2 h-1 w-full overflow-hidden rounded-full bg-elevation-outline-default-1">
+                  <div
+                    className={clsx(
+                      "absolute top-0 h-1 rounded-full",
+                      props.isDisabled
+                        ? "bg-interactive-contained-primary-disabled"
+                        : "bg-interactive-contained-primary-idle",
+                    )}
+                    style={getTrackFillStyle(state)}
+                  />
+                </div>
+
+                {state.values.map((_, i) => (
+                  <AriaSliderThumb
+                    key={i} // oxlint-disable-line react/no-array-index-key
+                    index={i}
+                    className={clsx(
+                      "absolute top-1/2 size-4 cursor-pointer rounded-full bg-interactive-contained-primary-idle disabled:cursor-default",
+                      "dragging:bg-interactive-contained-primary-pressed hover:bg-interactive-contained-primary-hover focus-visible:outline-interactive-contained-primary-focus disabled:bg-interactive-contained-primary-disabled",
+                      uiOutlineClass,
+                    )}
+                    isDisabled={isDisabled}
+                  />
+                ))}
+              </>
+            )}
+          </AriaSliderTrack>
+
+          <Typography
+            className="min-w-10 px-slider-side-leading-and-trailing py-slider-height-leading-and-trailing text-text-default-3"
+            size="label-2"
+          >
+            {maxValue}
+            {unit}
+          </Typography>
+        </div>
+      </FormField>
+    </AriaSlider>
+  );
+};
+
+export type SliderProps<IsRange extends boolean = false> = SliderBaseProps<IsRange>;
+
+export type ControlledSliderProps<TFieldValues extends FieldValues, IsRange extends boolean = false> = ControlProps<
+  SliderProps<IsRange>,
+  TFieldValues
+>;
+
+export const Slider = <TFieldValues extends FieldValues, IsRange extends boolean = false>(
+  props: ControlledSliderProps<TFieldValues, IsRange>,
+) => {
+  if ("formControl" in props && props.formControl) {
+    const { formControl, ref, ...innerProps } = props;
+
+    return (
+      <Controller
+        control={formControl.control}
+        name={formControl.name}
+        render={({ field, fieldState: { error } }) => (
+          <SliderBase
+            {...innerProps}
+            ref={mergeRefs(ref, field.ref)}
+            value={field.value}
+            onChange={field.onChange}
+            isDisabled={field.disabled || props.isDisabled}
+            error={props.error ?? error?.message}
+          />
+        )}
+      />
+    );
+  }
+
+  return <SliderBase {...props} />;
+};

package/src/components/inputs/TextEditor/TextEditor.tsx

@@ -0,0 +1,239 @@
+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 { EditorContent, type EditorEvents, type JSONContent, useEditor } from "@tiptap/react";
+import { StarterKit } from "@tiptap/starter-kit";
+import { clsx } from "clsx";
+import { type Ref, useEffect, useRef, useState } from "react";
+import { useFocusVisible, useFocusWithin, useHover, useLabel } from "react-aria";
+import { Controller, type FieldValues } from "react-hook-form";
+
+import { FormField, type FormFieldProps } from "#ui/components/inputs/FormField/FormField";
+import type { FormFieldHeaderProps } from "#ui/components/inputs/FormField/FormFieldHeader";
+import { FormFieldLabel } from "#ui/components/inputs/FormField/FormFieldLabel";
+import type { ControlProps } from "#ui/components/inputs/shared/form.types";
+import { uiOutlineClass } from "#ui/components/outline.clsx";
+import { isEqual } from "#ui/utils/isEqual";
+
+import { TextEditorToolbar } from "./Toolbar/TextEditorToolbar";
+
+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",
+  }),
+];
+
+export interface TextEditorValue {
+  html?: string | null;
+  json?: JSONContent | null;
+}
+
+export interface TextEditorBaseProps extends FormFieldProps {
+  ref?: Ref<HTMLDivElement>;
+  placeholder?: string;
+  value?: TextEditorValue | null;
+  onChange?: (value: TextEditorValue | null) => void;
+  onBlur?: () => void;
+  as?: "default" | "filter" | "floating" | "inline" | null;
+}
+
+const TextEditorBase = ({
+  ref,
+  as = "default",
+  placeholder,
+  label,
+  hideLabel,
+  tooltipText,
+  helperText,
+  isRequired,
+  rightContent,
+  isDisabled,
+  headerClassName,
+  errorClassName,
+  isHeaderHidden,
+  error,
+  value,
+  className,
+  onChange,
+  onBlur,
+}: TextEditorBaseProps) => {
+  const contentRef = useRef<JSONContent | null>(null);
+  const { hoverProps, isHovered } = useHover({ isDisabled });
+  const [isFocused, setIsFocused] = useState(false);
+  const { focusWithinProps } = useFocusWithin({
+    onFocusWithinChange: setIsFocused,
+  });
+  const { isFocusVisible } = useFocusVisible();
+
+  const formFieldProps: 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: EditorEvents["update"]) => {
+        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: FormFieldHeaderProps = {
+    label,
+    tooltipText,
+    helperText,
+    isRequired,
+    rightContent,
+    isHeaderHidden: hideLabel || isHeaderHidden,
+    isDisabled,
+    className: headerClassName,
+    labelProps,
+  };
+
+  return (
+    <FormField
+      {...formFieldProps}
+      ref={ref}
+      as={as}
+      labelProps={labelProps}
+      className={clsx("w-full", className)}
+    >
+      <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
+        data-rac=""
+        data-hovered={isHovered || undefined}
+        data-disabled={isDisabled || undefined}
+        data-focus-within={isFocused || undefined}
+        data-focus-visible={(isFocused && isFocusVisible) || undefined}
+        data-is-filled={!editor?.isEmpty}
+        {...hoverProps}
+        {...focusWithinProps}
+        {...fieldProps}
+      >
+        <TextEditorToolbar editor={editor} />
+        <div
+          className={clsx("relative", {
+            "pt-3": as === "floating",
+          })}
+        >
+          {as === "floating" && headerProps && (
+            <FormFieldLabel
+              as={as}
+              {...headerProps}
+            />
+          )}
+          <EditorContent
+            editor={editor}
+            placeholder={as === "floating" ? "" : placeholder}
+            className={clsx({
+              "[&_p:before]:opacity-0": as === "floating" && editor?.isEmpty,
+            })}
+          />
+        </div>
+      </div>
+    </FormField>
+  );
+};
+
+export type TextEditorProps = TextEditorBaseProps;
+
+export type ControlledTextEditorProps<TFieldValues extends FieldValues> = ControlProps<TextEditorProps, TFieldValues>;
+
+export const TextEditor = <TFieldValues extends FieldValues>(props: ControlledTextEditorProps<TFieldValues>) => {
+  if ("formControl" in props && props.formControl) {
+    const { formControl, ref, ...innerProps } = props;
+
+    return (
+      <Controller
+        control={formControl.control}
+        name={formControl.name}
+        render={({ field }) => (
+          <TextEditorBase
+            {...innerProps}
+            ref={mergeRefs(ref, field.ref)}
+            value={field.value}
+            onChange={field.onChange}
+            onBlur={field.onBlur}
+            isDisabled={field.disabled || props.isDisabled}
+          />
+        )}
+      />
+    );
+  }
+
+  return <TextEditorBase {...props} />;
+};

package/src/components/inputs/TextEditor/Toolbar/ColorPicker.tsx

@@ -0,0 +1,34 @@
+import { clsx } from "clsx";
+import { ColorSwatch, ColorSwatchPicker, ColorSwatchPickerItem } from "react-aria-components";
+
+interface ColorPickerProps {
+  colors: string[];
+  value: string | undefined;
+  onChange: (value: string) => void;
+}
+
+export const ColorPicker = ({ colors, value, onChange }: ColorPickerProps) => {
+  return (
+    <ColorSwatchPicker
+      value={value}
+      onChange={(color) => onChange(color.toString("hex"))}
+      className="grid w-full grid-cols-[repeat(auto-fit,minmax(1rem,1fr))] gap-1"
+    >
+      {colors.map((color) => (
+        <ColorSwatchPickerItem
+          key={color}
+          color={color}
+          className="group"
+        >
+          <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",
+            )}
+          />
+        </ColorSwatchPickerItem>
+      ))}
+    </ColorSwatchPicker>
+  );
+};

package/src/components/inputs/TextEditor/Toolbar/ColorPickerDropdown.tsx

@@ -0,0 +1,74 @@
+import { clsx } from "clsx";
+import { type ReactElement, useState } from "react";
+import { Button as AriaButton, Dialog, DialogTrigger, Popover } from "react-aria-components";
+
+import { ArrowDropDownIcon } from "#ui/assets/icons/ArrowDropDown";
+import { useInputCva } from "#ui/components/inputs/shared/input.cva";
+import { ColorPicker } from "#ui/components/inputs/TextEditor/Toolbar/ColorPicker";
+import { Typography } from "#ui/components/text/Typography/Typography";
+
+interface ColorPickerDropdownProps {
+  colors: string[];
+  value: string | undefined;
+  onChange: (color: string) => void;
+  isDisabled?: boolean;
+  children: ReactElement;
+}
+
+export const ColorPickerDropdown = ({ colors, value, onChange, isDisabled, children }: ColorPickerDropdownProps) => {
+  const inputCva = useInputCva();
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleChange = (color: string) => {
+    onChange(color);
+    setIsOpen(false);
+  };
+
+  return (
+    <DialogTrigger
+      isOpen={isOpen}
+      onOpenChange={setIsOpen}
+    >
+      <AriaButton
+        className={inputCva({
+          as: "inline",
+          className: clsx("flex items-center justify-between gap-2"),
+        })}
+        isDisabled={isDisabled}
+      >
+        <Typography
+          size="label-1"
+          className="truncate"
+        >
+          {children}
+        </Typography>
+
+        <ArrowDropDownIcon
+          className={clsx("size-6 shrink-0", isOpen && "rotate-180")}
+          aria-hidden="true"
+        />
+      </AriaButton>
+
+      <Popover
+        className="my-4 w-40 outline-none"
+        offset={0}
+        placement="bottom start"
+      >
+        <Dialog className="outline-none">
+          <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",
+            )}
+          >
+            <ColorPicker
+              colors={colors}
+              value={value}
+              onChange={handleChange}
+            />
+          </div>
+        </Dialog>
+      </Popover>
+    </DialogTrigger>
+  );
+};

package/src/components/inputs/TextEditor/Toolbar/HyperlinkAction.tsx

@@ -0,0 +1,87 @@
+import { clsx } from "clsx";
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+
+import { LinkIcon } from "#ui/assets/icons/Link";
+import { Button } from "#ui/components/buttons/Button/Button";
+import { InlineIconButton } from "#ui/components/buttons/InlineIconButton/InlineIconButton";
+import { TextInput } from "#ui/components/inputs/Input/TextInput/TextInput";
+import type { TextEditorSharedProps } from "#ui/components/inputs/TextEditor/textEditor.types";
+import { ResponsivePopover } from "#ui/components/overlays/ResponsivePopover/ResponsivePopover";
+import { ns } from "#ui/config/i18n";
+
+export const HyperlinkAction = ({ editor }: TextEditorSharedProps) => {
+  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 as string | undefined;
+
+  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 (
+    <ResponsivePopover
+      isOpen={isOpen}
+      onOpenChange={setIsOpen}
+      sheetLabel={t(($) => $.ui.textEditor.link.label)}
+      trigger={
+        <InlineIconButton
+          color="secondary"
+          label={t(($) => $.ui.textEditor.link.label)}
+          icon={LinkIcon}
+          className={clsx(editor.isActive("link") && "!text-interactive-text-primary-idle")}
+          isDisabled={!editor.isEditable}
+        />
+      }
+    >
+      <TextInput
+        variant="outlined"
+        hideLabel
+        label={t(($) => $.ui.textEditor.link.urlLabel)}
+        placeholder={t(($) => $.ui.textEditor.link.urlPlaceholder)}
+        value={url}
+        onChange={setUrl}
+        className="mb-4"
+      />
+      <div className="flex justify-between">
+        <Button
+          variant="contained"
+          color="secondary"
+          size="xs"
+          width="hug"
+          onPress={onApply}
+          isDisabled={!url}
+        >
+          {t(($) => $.ui.textEditor.link.apply)}
+        </Button>
+        <Button
+          variant="outlined"
+          color="secondary"
+          size="xs"
+          width="hug"
+          onPress={onRemove}
+          isDisabled={!editor.isActive("link")}
+        >
+          {t(($) => $.ui.textEditor.link.remove)}
+        </Button>
+      </div>
+    </ResponsivePopover>
+  );
+};

package/src/components/inputs/TextEditor/Toolbar/TextAlignSelect.tsx

@@ -0,0 +1,64 @@
+import type { FC, SVGProps } from "react";
+import { useTranslation } from "react-i18next";
+
+import { AlignCenterIcon } from "#ui/assets/icons/AlignCenter";
+import { AlignLeftIcon } from "#ui/assets/icons/AlignLeft";
+import { AlignLeftRightIcon } from "#ui/assets/icons/AlignLeftRight";
+import { AlignRightIcon } from "#ui/assets/icons/AlignRight";
+import { Select } from "#ui/components/inputs/Selection/Select/Select";
+import type { TextEditorSharedProps } from "#ui/components/inputs/TextEditor/textEditor.types";
+import { ns } from "#ui/config/i18n";
+
+type TextAlign = "left" | "center" | "right" | "justify";
+
+export const TextAlignSelect = ({ editor }: TextEditorSharedProps) => {
+  const { t } = useTranslation(ns);
+
+  const isAlignEnabled = !!editor.extensionManager.extensions.find((extension) => extension.name === "textAlign");
+
+  if (!isAlignEnabled) {
+    return null;
+  }
+
+  const onChange = (val: string | null) => {
+    if (val) {
+      editor.chain().focus().setTextAlign(val).run();
+    } else {
+      editor.chain().focus().unsetTextAlign().run();
+    }
+  };
+
+  const getItem = (id: TextAlign, Icon: FC<SVGProps<SVGSVGElement>>) => {
+    return {
+      id,
+      label: t(($) => $.ui.textEditor.textAlign[id]),
+      content: <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 (
+    <Select
+      as="inline"
+      label={t(($) => $.ui.textEditor.textAlign.label)}
+      placeholder={t(($) => $.ui.textEditor.textAlign.label)}
+      hideLabel
+      ignoreTriggerWidth
+      showSelectionContent
+      onChange={onChange}
+      items={enabledItems}
+      value={enabledItems.find((item) => item.isActive)?.id || "left"}
+      isDisabled={!editor.isEditable}
+    />
+  );
+};