@povio/ui 0.0.4 → 0.0.6

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

@@ -1,87 +0,0 @@
-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

@@ -1,64 +0,0 @@
-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}
-    />
-  );
-};

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

@@ -1,30 +0,0 @@
-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

@@ -1,40 +0,0 @@
-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

@@ -1,39 +0,0 @@
-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/TextStyleSelect.tsx

@@ -1,73 +0,0 @@
-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/Toggle/Toggle.tsx

@@ -1,80 +0,0 @@
-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/shared/CheckContent.tsx

@@ -1,26 +0,0 @@
-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

@@ -1,29 +0,0 @@
-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

@@ -1,28 +0,0 @@
-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;

package/src/components/overlays/ActionModal/ActionModal.tsx

@@ -1,93 +0,0 @@
-import { clsx } from "clsx";
-
-import { Button } from "#ui/components/buttons/Button/Button";
-import type { ButtonVariantProps } from "#ui/components/buttons/Button/button.cva";
-import { Modal, type ModalProps } from "#ui/components/overlays/Modal/Modal";
-import { Typography } from "#ui/components/text/Typography/Typography";
-
-const textAlignClassMap: Record<NonNullable<ActionModalProps["textAlign"]>, string> = {
-  left: "text-left",
-  center: "text-center",
-  right: "text-right",
-};
-
-interface ActionModalAction {
-  label: string;
-  onPress: () => void;
-  className?: string;
-  variant?: ButtonVariantProps["variant"];
-  color?: ButtonVariantProps["color"];
-}
-
-export interface ActionModalProps extends ModalProps {
-  heading: string;
-  description: string;
-  primaryAction: ActionModalAction;
-  secondaryAction?: ActionModalAction;
-  buttonSize?: ButtonVariantProps["size"];
-  textAlign?: "left" | "center" | "right";
-}
-
-export const ActionModal = ({
-  heading,
-  description,
-  primaryAction,
-  secondaryAction,
-  buttonSize = "m",
-  textAlign = "left",
-  modalClassName,
-  ...modalProps
-}: ActionModalProps) => {
-  const textAlignClass = textAlignClassMap[textAlign];
-
-  return (
-    <Modal
-      modalClassName={clsx("w-modal", modalClassName)}
-      {...modalProps}
-    >
-      <div className="flex flex-col gap-modal-gap-text">
-        <Typography
-          size="title-5"
-          variant="prominent-1"
-          as="h2"
-          className={textAlignClass}
-        >
-          {heading}
-        </Typography>
-
-        <Typography
-          size="body-3"
-          className={textAlignClass}
-        >
-          {description}
-        </Typography>
-      </div>
-
-      <div className="flex w-full flex-wrap gap-modal-gap-buttons pt-1">
-        {secondaryAction && (
-          <Button
-            variant={secondaryAction?.variant ?? "contained"}
-            size={buttonSize}
-            color={secondaryAction?.color ?? "secondary"}
-            width="fill"
-            onPress={secondaryAction?.onPress}
-            className={clsx("min-w-40 flex-1 shrink-0", secondaryAction?.className)}
-          >
-            {secondaryAction?.label}
-          </Button>
-        )}
-
-        <Button
-          variant={primaryAction?.variant ?? "contained"}
-          size={buttonSize}
-          color={primaryAction?.color ?? "primary"}
-          width="fill"
-          onPress={primaryAction.onPress}
-          className={clsx("min-w-40 flex-1 shrink-0", primaryAction?.className)}
-        >
-          {primaryAction.label}
-        </Button>
-      </div>
-    </Modal>
-  );
-};