@povio/ui 0.0.2 → 0.0.4

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

@@ -0,0 +1,30 @@
+import { TextColorIcon } from "#ui/assets/icons/TextColor";
+import { ColorPickerDropdown } from "#ui/components/inputs/TextEditor/Toolbar/ColorPickerDropdown";
+import { type TextEditorSharedProps, defaultColors } from "#ui/components/inputs/TextEditor/textEditor.types";
+
+export const TextColorSelect = ({ editor }: TextEditorSharedProps) => {
+  const isColorEnabled = editor.extensionManager.extensions.some((extension) => extension.name === "color");
+  if (!isColorEnabled) {
+    return null;
+  }
+
+  const onChange = (color: string) => {
+    editor.chain().focus().setColor(color).run();
+  };
+
+  const textColor = (editor.getAttributes("textStyle").color as string) || "#000000";
+
+  return (
+    <ColorPickerDropdown
+      value={textColor}
+      onChange={onChange}
+      colors={defaultColors}
+      isDisabled={!editor.isEditable}
+    >
+      <TextColorIcon
+        className="size-6"
+        textColor={textColor}
+      />
+    </ColorPickerDropdown>
+  );
+};

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

@@ -0,0 +1,40 @@
+import type { Editor } from "@tiptap/react";
+
+import { HyperlinkAction } from "#ui/components/inputs/TextEditor/Toolbar/HyperlinkAction";
+import { TextAlignSelect } from "#ui/components/inputs/TextEditor/Toolbar/TextAlignSelect";
+import { TextColorSelect } from "#ui/components/inputs/TextEditor/Toolbar/TextColorSelect";
+import { TextHighlightSelect } from "#ui/components/inputs/TextEditor/Toolbar/TextHighlightSelect";
+import { TextListActions } from "#ui/components/inputs/TextEditor/Toolbar/TextListActions";
+import { TextMarksActions } from "#ui/components/inputs/TextEditor/Toolbar/TextMarksActions";
+import { TextStyleSelect } from "#ui/components/inputs/TextEditor/Toolbar/TextStyleSelect";
+
+interface Props {
+  editor: Editor | null;
+}
+
+export const TextEditorToolbar = ({ editor }: Props) => {
+  if (!editor) {
+    return null;
+  }
+
+  return (
+    <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">
+      <div className="flex flex-wrap gap-1">
+        <div className="flex items-center gap-1">
+          <TextStyleSelect editor={editor} />
+          <TextAlignSelect editor={editor} />
+        </div>
+        <div className="flex items-center gap-1">
+          <TextColorSelect editor={editor} />
+          <TextHighlightSelect editor={editor} />
+        </div>
+      </div>
+
+      <TextMarksActions editor={editor} />
+
+      <TextListActions editor={editor} />
+
+      <HyperlinkAction editor={editor} />
+    </div>
+  );
+};

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

@@ -0,0 +1,39 @@
+import { HighlightIcon } from "#ui/assets/icons/Highlight";
+import { HighlightOnIcon } from "#ui/assets/icons/HighlightOn";
+import { ColorPickerDropdown } from "#ui/components/inputs/TextEditor/Toolbar/ColorPickerDropdown";
+import { type TextEditorSharedProps, defaultColors } from "#ui/components/inputs/TextEditor/textEditor.types";
+
+export const TextHighlightSelect = ({ editor }: TextEditorSharedProps) => {
+  const isHighlightEnabled = editor.extensionManager.extensions.some((extension) => extension.name === "highlight");
+  if (!isHighlightEnabled) {
+    return null;
+  }
+
+  const onChange = (color: string) => {
+    if (color === "#FFFFFF") {
+      editor.chain().focus().unsetHighlight().run();
+    } else {
+      editor.chain().focus().setHighlight({ color }).run();
+    }
+  };
+
+  const highlightColor = (editor.getAttributes("highlight").color as string | undefined) || "#FFFFFF";
+
+  return (
+    <ColorPickerDropdown
+      value={highlightColor}
+      onChange={onChange}
+      colors={defaultColors}
+      isDisabled={!editor.isEditable}
+    >
+      {highlightColor ? (
+        <HighlightOnIcon
+          className="size-6"
+          highlightColor={highlightColor}
+        />
+      ) : (
+        <HighlightIcon className="size-6" />
+      )}
+    </ColorPickerDropdown>
+  );
+};

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

@@ -0,0 +1,57 @@
+import { clsx } from "clsx";
+import { useTranslation } from "react-i18next";
+
+import { BulletedListIcon } from "#ui/assets/icons/BulletedList";
+import { NumberedListIcon } from "#ui/assets/icons/NumberedList";
+import { InlineIconButton } from "#ui/components/buttons/InlineIconButton/InlineIconButton";
+import type { TextEditorSharedProps } from "#ui/components/inputs/TextEditor/textEditor.types";
+import { ns } from "#ui/config/i18n";
+
+export const TextListActions = ({ editor }: TextEditorSharedProps) => {
+  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 (
+    <div className="flex h-full items-center gap-3">
+      {enabledActions.map((action) => (
+        <InlineIconButton
+          key={action.label}
+          color="secondary"
+          label={action.label}
+          onPress={action.onPress}
+          icon={action.icon}
+          isDisabled={!action.isEnabled()}
+          className={clsx(action.isActive() && "!text-interactive-text-primary-idle")}
+        />
+      ))}
+    </div>
+  );
+};

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

@@ -0,0 +1,79 @@
+import { clsx } from "clsx";
+import { useTranslation } from "react-i18next";
+
+import { BoldIcon } from "#ui/assets/icons/Bold";
+import { ItalicIcon } from "#ui/assets/icons/Italic";
+import { StrikethroughIcon } from "#ui/assets/icons/Strikethrough";
+import { UnderlinedIcon } from "#ui/assets/icons/Underlined";
+import { InlineIconButton } from "#ui/components/buttons/InlineIconButton/InlineIconButton";
+import type { TextEditorSharedProps } from "#ui/components/inputs/TextEditor/textEditor.types";
+import { ns } from "#ui/config/i18n";
+
+export const TextMarksActions = ({ editor }: TextEditorSharedProps) => {
+  const { t } = useTranslation(ns);
+
+  const actions = [
+    {
+      can: !!editor.extensionManager.extensions.find((extension) => extension.name === "bold"),
+      isEnabled: () => editor.isEditable && editor.can().toggleBold(),
+      label: t(($) => $.ui.textEditor.marks.bold),
+      icon: BoldIcon,
+      onPress: () => {
+        editor.chain().focus().toggleBold().run();
+      },
+      isActive: () => editor.isActive("bold"),
+    },
+    {
+      can: !!editor.extensionManager.extensions.find((extension) => extension.name === "italic"),
+      isEnabled: () => editor.isEditable && editor.can().toggleItalic(),
+      label: t(($) => $.ui.textEditor.marks.italic),
+      icon: ItalicIcon,
+      onPress: () => {
+        editor.chain().focus().toggleItalic().run();
+      },
+      isActive: () => editor.isActive("italic"),
+    },
+    {
+      can: !!editor.extensionManager.extensions.find((extension) => extension.name === "strike"),
+      isEnabled: () => editor.isEditable && editor.can().toggleStrike(),
+      label: t(($) => $.ui.textEditor.marks.strikethrough),
+      icon: StrikethroughIcon,
+      onPress: () => {
+        editor.chain().focus().toggleStrike().run();
+      },
+      isActive: () => editor.isActive("strike"),
+    },
+    {
+      can: !!editor.extensionManager.extensions.find((extension) => extension.name === "underline"),
+      isEnabled: () => editor.isEditable && editor.can().toggleUnderline(),
+      label: t(($) => $.ui.textEditor.marks.underline),
+      icon: UnderlinedIcon,
+      onPress: () => {
+        editor.chain().focus().toggleUnderline().run();
+      },
+      isActive: () => editor.isActive("underline"),
+    },
+  ];
+
+  const enabledActions = actions.filter((action) => action.can);
+
+  if (enabledActions.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="flex h-full items-center gap-3">
+      {enabledActions.map((action) => (
+        <InlineIconButton
+          key={action.label}
+          color="secondary"
+          label={action.label}
+          onPress={action.onPress}
+          icon={action.icon}
+          isDisabled={!action.isEnabled()}
+          className={clsx(action.isActive() && "!text-interactive-text-primary-idle")}
+        />
+      ))}
+    </div>
+  );
+};

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

@@ -0,0 +1,73 @@
+import type { Level } from "@tiptap/extension-heading";
+import { useTranslation } from "react-i18next";
+
+import { Select } from "#ui/components/inputs/Selection/Select/Select";
+import type { TextEditorSharedProps } from "#ui/components/inputs/TextEditor/textEditor.types";
+import { Typography } from "#ui/components/text/Typography/Typography";
+import { ns } from "#ui/config/i18n";
+
+export const TextStyleSelect = ({ editor }: TextEditorSharedProps) => {
+  const { t } = useTranslation(ns);
+
+  const isHeadingEnabled = !!editor.extensionManager.extensions.find((extension) => extension.name === "heading");
+
+  if (!isHeadingEnabled) {
+    return null;
+  }
+
+  const getItem = (level: Level) => {
+    return {
+      id: level,
+      label: t(($) => $.ui.textEditor.textStyle[`heading${level}`]),
+      content: (
+        <Typography size={`title-${level}`}>{t(($) => $.ui.textEditor.textStyle[`heading${level}`])}</Typography>
+      ),
+    };
+  };
+
+  const onChange = (val: number | null) => {
+    if (!val) {
+      const currentLevel = editor.getAttributes("heading")?.level as Level | undefined;
+      if (!currentLevel) {
+        return;
+      }
+      editor.chain().focus().toggleHeading({ level: currentLevel }).run();
+      return;
+    }
+
+    if (!editor.can().setHeading({ level: val as Level })) {
+      return;
+    }
+
+    editor
+      .chain()
+      .focus()
+      .setHeading({ level: val as Level })
+      .run();
+  };
+
+  return (
+    <Select
+      as="inline"
+      placeholder={t(($) => $.ui.textEditor.textStyle.label)}
+      label={t(($) => $.ui.textEditor.textStyle.label)}
+      hideLabel
+      ignoreTriggerWidth
+      onChange={onChange}
+      items={[
+        {
+          id: 0,
+          label: t(($) => $.ui.textEditor.textStyle.normal),
+        },
+        ...(editor.can().toggleHeading({ level: 1 }) ? [getItem(1)] : []),
+        ...(editor.can().toggleHeading({ level: 2 }) ? [getItem(2)] : []),
+        ...(editor.can().toggleHeading({ level: 3 }) ? [getItem(3)] : []),
+        ...(editor.can().toggleHeading({ level: 4 }) ? [getItem(4)] : []),
+        ...(editor.can().toggleHeading({ level: 5 }) ? [getItem(5)] : []),
+        ...(editor.can().toggleHeading({ level: 6 }) ? [getItem(6)] : []),
+      ]}
+      value={(editor.getAttributes("heading")?.level as Level | undefined) || 0}
+      isDisabled={!editor.isEditable}
+    />
+  );
+};

package/src/components/inputs/TextEditor/textEditor.types.ts

@@ -0,0 +1,43 @@
+import type { Editor } from "@tiptap/react";
+
+export interface TextEditorSharedProps {
+  editor: Editor;
+}
+
+export const defaultColors = [
+  "#000000",
+  "#e60000",
+  "#ff9900",
+  "#ffff00",
+  "#008a00",
+  "#0066cc",
+  "#9933ff",
+  "#ffffff",
+  "#facccc",
+  "#ffebcc",
+  "#ffffcc",
+  "#cce8cc",
+  "#cce0f5",
+  "#ebd6ff",
+  "#bbbbbb",
+  "#f06666",
+  "#ffc266",
+  "#ffff66",
+  "#66b966",
+  "#66a3e0",
+  "#c285ff",
+  "#888888",
+  "#a10000",
+  "#b26b00",
+  "#b2b200",
+  "#006100",
+  "#0047b2",
+  "#6b24b2",
+  "#444444",
+  "#5c0000",
+  "#663d00",
+  "#666600",
+  "#003700",
+  "#002966",
+  "#3d1466",
+];

package/src/components/inputs/Toggle/Toggle.tsx

@@ -0,0 +1,80 @@
+import { mergeRefs } from "@react-aria/utils";
+import { clsx } from "clsx";
+import type { Ref } from "react";
+import { Switch as AriaSwitch, type SwitchProps as AriaSwitchProps } from "react-aria-components";
+import { Controller, type FieldValues } from "react-hook-form";
+
+import { FormFieldError, type FormFieldErrorProps } from "#ui/components/inputs/FormField/FormFieldError";
+import { CheckContent } from "#ui/components/inputs/shared/CheckContent";
+import type { ControlProps } from "#ui/components/inputs/shared/form.types";
+import { type ToggleVariantProps, toggle, toggleTypography } from "#ui/components/inputs/Toggle/toggle.cva";
+import { UIConfig } from "#ui/config/uiConfig.context";
+import { UIStyle } from "#ui/config/uiStyle.context";
+
+interface ToggleBaseProps extends FormFieldErrorProps, ToggleVariantProps, Omit<AriaSwitchProps, "className"> {
+  ref?: Ref<HTMLLabelElement>;
+  children?: string;
+}
+
+const ToggleBase = (props: ToggleBaseProps) => {
+  const ui = UIConfig.useConfig();
+  const uiStyle = UIStyle.useConfig();
+  const toggleCva = (uiStyle?.toggle?.cva ?? toggle) as unknown as UIStyle.Cva<ToggleVariantProps>;
+  const toggleTypographyMap = uiStyle?.toggle?.typography ?? toggleTypography;
+
+  const { className, children, isDisabled, error, variant = ui.toggle.variant, ...rest } = props;
+
+  const formFieldErrorProps: FormFieldErrorProps = {
+    error,
+    isDisabled,
+  };
+
+  return (
+    <>
+      <AriaSwitch
+        {...rest}
+        isDisabled={isDisabled}
+        className={clsx("group flex items-center gap-2", !isDisabled && "cursor-pointer", className)}
+      >
+        <div className={toggleCva({ variant, ...rest })} />
+        <CheckContent typography={toggleTypographyMap({ variant, ...rest })}>{children}</CheckContent>
+      </AriaSwitch>
+      <FormFieldError {...formFieldErrorProps} />
+    </>
+  );
+};
+
+export type ToggleProps = ToggleBaseProps;
+
+export type ControlledToggleProps<TFieldValues extends FieldValues> = ControlProps<
+  ToggleProps,
+  TFieldValues,
+  "isSelected"
+>;
+
+export const Toggle = <TFieldValues extends FieldValues>(props: ControlledToggleProps<TFieldValues>) => {
+  if ("formControl" in props && props.formControl) {
+    const { formControl, ref, ...innerProps } = props;
+
+    return (
+      <Controller
+        control={formControl.control}
+        name={formControl.name}
+        render={({ field, fieldState: { error } }) => (
+          <ToggleBase
+            {...innerProps}
+            ref={mergeRefs(ref, field.ref)}
+            isSelected={field.value}
+            onChange={field.onChange}
+            onBlur={field.onBlur}
+            name={field.name}
+            isDisabled={field.disabled || props.isDisabled}
+            error={props.error ?? error?.message}
+          />
+        )}
+      />
+    );
+  }
+
+  return <ToggleBase {...props} />;
+};

package/src/components/inputs/Toggle/toggle.cva.ts

@@ -0,0 +1,48 @@
+import { type VariantProps, cva } from "class-variance-authority";
+
+import { uiGroupOutlineClass } from "#ui/components/outline.clsx";
+import type { TypographyVariantProps } from "#ui/components/text/Typography/typography.cva";
+import { compoundMapper } from "#ui/utils/compoundMapper";
+
+export const toggle = cva(
+  [
+    "h-6 w-10 rounded-full before:m-0-5 before:block before:aspect-square before:h-5 before:rounded-full before:transition-transform before:content-[''] group-selected:before:translate-x-4",
+    uiGroupOutlineClass,
+  ],
+  {
+    variants: {
+      variant: {
+        default: [
+          "bg-interactive-contained-secondary-idle",
+          "group-disabled:bg-interactive-contained-secondary-disabled",
+          "group-hover:bg-interactive-contained-secondary-hover",
+          "group-pressed:bg-interactive-contained-secondary-pressed",
+          "group-selected:bg-interactive-contained-primary-idle",
+          "group-selected:group-hover:bg-interactive-contained-primary-hover",
+          "group-selected:group-pressed:bg-interactive-contained-primary-pressed",
+          "group-focus-visible:outline-interactive-text-secondary-focus",
+          "before:bg-interactive-contained-secondary-on-idle",
+          "group-hover:before:bg-interactive-contained-secondary-on-hover",
+          "group-disabled:before:bg-interactive-contained-secondary-on-disabled",
+          "group-selected:before:bg-interactive-contained-primary-on-idle",
+          "group-selected:group-hover:before:bg-interactive-contained-primary-on-hover",
+          "group-selected:group-pressed:before:bg-interactive-contained-primary-on-pressed",
+        ],
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+// oxlint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore - If this ignore is missing, overriding cva types causes a type error
+export interface ToggleVariantProps extends VariantProps<typeof toggle> {}
+
+export const toggleTypography = compoundMapper<TypographyVariantProps, ToggleVariantProps>({
+  default: {
+    size: "label-1",
+    variant: "default",
+  },
+});

package/src/components/inputs/shared/CheckContent.tsx

@@ -0,0 +1,26 @@
+import type { PropsWithChildren } from "react";
+
+import { type TypographyVariantProps, typography } from "#ui/components/text/Typography/typography.cva";
+import { UIStyle } from "#ui/config/uiStyle.context";
+
+interface CheckContentProps {
+  typography?: TypographyVariantProps;
+}
+
+export const CheckContent = ({ children, ...props }: PropsWithChildren<CheckContentProps>) => {
+  const uiStyle = UIStyle.useConfig();
+  const typographyCva = (uiStyle?.typography?.cva ?? typography) as unknown as UIStyle.Cva<TypographyVariantProps>;
+
+  return (
+    <div
+      className={typographyCva({
+        size: "label-1",
+        variant: "default",
+        ...props.typography,
+        className: "text-text-default-2",
+      })}
+    >
+      {children}
+    </div>
+  );
+};

package/src/components/inputs/shared/InputClear.tsx

@@ -0,0 +1,29 @@
+import { clsx } from "clsx";
+import { useTranslation } from "react-i18next";
+
+import { CloseIcon } from "#ui/assets/icons/Close";
+import { InlineIconButton } from "#ui/components/buttons/InlineIconButton/InlineIconButton";
+import { ns } from "#ui/config/i18n";
+
+interface InputClearProps {
+  onClear: () => void;
+  className?: string;
+}
+
+export const InputClear = ({ onClear, className }: InputClearProps) => {
+  const { t } = useTranslation(ns);
+
+  return (
+    <InlineIconButton
+      color="secondary"
+      className={clsx(
+        "group-hover/date-picker-content:!flex group-hover/select-content:!flex hidden items-center group-focus-within:flex group-hover:flex",
+        className,
+      )}
+      label={t(($) => $.ui.clearAlt)}
+      icon={CloseIcon}
+      onPress={onClear}
+      excludeFromTabOrder
+    />
+  );
+};

package/src/components/inputs/shared/form.types.ts

@@ -0,0 +1,28 @@
+import type { Control, FieldPath, FieldPathValue, FieldValues } from "react-hook-form";
+
+export type ControlKeys<TProps, TValueProp extends keyof TProps = "value" extends keyof TProps ? "value" : never> =
+  | TValueProp
+  | "onChange"
+  | "onBlur";
+
+export interface FormControl<TFieldValues extends FieldValues, TType> {
+  control: Control<TFieldValues>;
+  name: {
+    [K in FieldPath<TFieldValues>]: FieldPathValue<TFieldValues, K> extends TType ? K : never;
+  }[FieldPath<TFieldValues>];
+}
+
+export type FormControlProps<
+  TProps,
+  TFieldValues extends FieldValues,
+  TValueProp extends keyof TProps = "value" extends keyof TProps ? "value" : never,
+> = {
+  formControl: FormControl<TFieldValues, TProps[TValueProp] | null>;
+} & Omit<TProps, ControlKeys<TProps, TValueProp>> &
+  Partial<Record<ControlKeys<TProps, TValueProp>, never>>;
+
+export type ControlProps<
+  TProps,
+  TFieldValues extends FieldValues,
+  TValueProp extends keyof TProps = "value" extends keyof TProps ? "value" : never,
+> = FormControlProps<TProps, TFieldValues, TValueProp> | TProps;