@povio/ui 0.0.5 → 0.0.7

package/src/components/inputs/Selection/shared/useSelectItems.tsx

@@ -1,127 +0,0 @@
-import { useMemo } from "react";
-import { type Key, useFilter } from "react-aria-components";
-
-import type { SelectBaseProps } from "#ui/components/inputs/Selection/shared/SelectBase";
-import type { ExtendedSelectItem, SelectItem } from "#ui/components/inputs/Selection/shared/select.types";
-
-export const SelectAllItemId = "all-item-id";
-const SelectAllItem = (inputValue: string) => ({
-  id: SelectAllItemId,
-  label: inputValue,
-  isSelectAllItem: true,
-});
-
-export const NewItemId = "new-item-id";
-const NewItem = (inputValue: string) => ({
-  id: NewItemId,
-  label: inputValue,
-  isNewItem: true,
-});
-
-export const LoadingItemId = "loading-item-id";
-const LoadingItem = (inputValue: string) => ({
-  id: LoadingItemId,
-  label: inputValue,
-  isLoadingItem: true,
-});
-
-export const ReservedItemIds = [SelectAllItemId, NewItemId, LoadingItemId];
-
-interface UseSelectItemsProps
-  extends Pick<
-    SelectBaseProps,
-    | "showSelectAllOption"
-    | "showNewItemOption"
-    | "newItemMinLength"
-    | "isLoading"
-    | "hasLoadMore"
-    | "isClientSearchDisabled"
-  > {
-  initialSelectedItems?: SelectItem[] | SelectItem | null;
-  selectedItems?: SelectItem[] | SelectItem | null;
-  cachedItems: SelectItem[];
-  inputValue: string;
-  showAll: boolean;
-  isMultiple: boolean;
-}
-
-export function useSelectItems({
-  initialSelectedItems,
-  selectedItems,
-  cachedItems,
-  inputValue,
-  showAll,
-  isMultiple,
-  showSelectAllOption,
-  showNewItemOption,
-  newItemMinLength = 3,
-  isLoading,
-  hasLoadMore,
-  isClientSearchDisabled,
-}: UseSelectItemsProps) {
-  // oxlint-disable-next-line @typescript-eslint/unbound-method
-  const { contains } = useFilter({ sensitivity: "base" });
-
-  const allListItems: ExtendedSelectItem[] = useMemo(() => {
-    const showSelectAllItem = isMultiple && showSelectAllOption && inputValue.length === 0 && !hasLoadMore;
-
-    const showNewItem =
-      showNewItemOption &&
-      inputValue.length >= newItemMinLength &&
-      !cachedItems.find((item) => contains(item.label, inputValue));
-
-    const showLoadingItem = isLoading || hasLoadMore;
-
-    return [
-      ...(showSelectAllItem ? [SelectAllItem(inputValue)] : []),
-      ...cachedItems,
-      ...(showNewItem ? [NewItem(inputValue)] : []),
-      ...(showLoadingItem ? [LoadingItem(inputValue)] : []),
-    ];
-  }, [
-    isMultiple,
-    showNewItemOption,
-    inputValue,
-    newItemMinLength,
-    cachedItems,
-    contains,
-    isLoading,
-    hasLoadMore,
-    showSelectAllOption,
-  ]);
-
-  const allItems = useMemo(() => {
-    const items = [
-      ...(Array.isArray(initialSelectedItems) ? initialSelectedItems : [initialSelectedItems]),
-      ...(Array.isArray(selectedItems) ? selectedItems : [selectedItems]),
-      ...allListItems,
-    ].filter((item): item is SelectItem => !!item);
-
-    const allItemsMap = new Map<Key, SelectItem>();
-    items.forEach((item) => allItemsMap.set(item.id, item));
-    return Array.from(allItemsMap.values());
-  }, [allListItems, initialSelectedItems, selectedItems]);
-
-  const filteredListItems = useMemo(
-    () => allListItems.filter((item) => contains(item.label, inputValue)),
-    [allListItems, contains, inputValue],
-  );
-
-  const listItems = useMemo(
-    () => (showAll || isClientSearchDisabled ? allListItems : filteredListItems),
-    [showAll, isClientSearchDisabled, allListItems, filteredListItems],
-  );
-
-  const selectableListItems = useMemo(
-    () => listItems.filter((item) => !item.isDisabled && !ReservedItemIds.includes(String(item.id))),
-    [listItems],
-  );
-
-  return {
-    allItems,
-    allListItems,
-    filteredListItems,
-    listItems,
-    selectableListItems,
-  };
-}

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

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

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

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

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