@exegia/corpora-ui 2.0.0 → 3.1.0

package/src/components/atoms/text-selection/__tests__/text-selection.test.tsx

@@ -1,90 +0,0 @@
-import { describe, expect, mock, test } from "bun:test"
-import { Provider, createStore } from "jotai"
-import { render, screen } from "@testing-library/react"
-import userEvent from "@testing-library/user-event"
-import { TextSelection } from "../selection"
-import {
-  initialSelectionState,
-  selectionAtom,
-  setSelectionAtom,
-  setSelectionPopoverAtom,
-} from "../selection-atom"
-import { useSelection } from "../use-selection"
-
-function SelectionHarness({
-  onSelectionEnd,
-}: {
-  onSelectionEnd?: (selection: string) => void
-}) {
-  const selection = useSelection({ onSelectionEnd })
-  return (
-    <>
-      <button
-        onClick={() =>
-          selection.selectionProps.onSelectionEnd("selected words")
-        }
-        type="button"
-      >
-        End selection
-      </button>
-      <button
-        onClick={() => selection.selectionProps.onPopoverShow()}
-        type="button"
-      >
-        Show popover
-      </button>
-      <output data-testid="selection-state">
-        {selection.currentSelection} · {String(selection.showPopover)}
-      </output>
-    </>
-  )
-}
-
-describe("text selection", () => {
-  test("the atom exposes independent selection and popover updates", () => {
-    const store = createStore()
-    expect(store.get(selectionAtom)).toEqual(initialSelectionState)
-
-    store.set(setSelectionAtom, "doctrinam")
-    expect(store.get(selectionAtom)).toMatchObject({
-      currentSelection: "doctrinam",
-      selected: true,
-      showPopover: false,
-    })
-
-    store.set(setSelectionPopoverAtom, true)
-    expect(store.get(selectionAtom).showPopover).toBe(true)
-  })
-
-  test("useSelection turns highlight callbacks into shared state", async () => {
-    const user = userEvent.setup()
-    const store = createStore()
-    const onSelectionEnd = mock(() => {})
-    render(
-      <Provider store={store}>
-        <SelectionHarness onSelectionEnd={onSelectionEnd} />
-      </Provider>
-    )
-
-    await user.click(screen.getByRole("button", { name: "End selection" }))
-    expect(onSelectionEnd).toHaveBeenCalledWith("selected words")
-    expect(screen.getByTestId("selection-state").textContent).toBe(
-      "selected words · false"
-    )
-
-    await user.click(screen.getByRole("button", { name: "Show popover" }))
-    expect(screen.getByTestId("selection-state").textContent).toBe(
-      "selected words · true"
-    )
-  })
-
-  test("TextSelection renders its selected children", () => {
-    render(
-      <TextSelection onSelectionEnd={() => {}} renderPopover={() => null}>
-        <span>Selectable corpus text</span>
-      </TextSelection>
-    )
-
-    expect(screen.getByText("Selectable corpus text")).toBeDefined()
-  })
-})

package/src/components/atoms/text-selection/click-popover.tsx

@@ -1,62 +0,0 @@
-"use client"
-
-import { useState } from "react"
-import type { ReactElement } from "react"
-import { Popover, PopoverPopup, PopoverTrigger } from "@/components/ui/popover"
-import { cn } from "@/lib/utils"
-import { Text } from "../text/default"
-import type { ITextClickPopoverProps, ITextPopoverRenderProps } from "./types"
-
-export function TextClickPopover({
-  children,
-  popover,
-  renderPopover,
-  popoverProps,
-  open: controlledOpen,
-  defaultOpen = false,
-  onOpenChange,
-  className,
-  ...textProps
-}: ITextClickPopoverProps): ReactElement {
-  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen)
-  const open = controlledOpen ?? uncontrolledOpen
-  const setOpen = (next: boolean) => {
-    setUncontrolledOpen(next)
-    onOpenChange?.(next)
-  }
-
-  const renderProps: ITextPopoverRenderProps = {
-    open,
-    setOpen,
-    close: () => setOpen(false),
-  }
-  const content = renderPopover ? renderPopover(renderProps) : popover
-
-  return (
-    <Popover onOpenChange={(next) => setOpen(next)} open={open}>
-      <PopoverTrigger
-        nativeButton={false}
-        render={
-          <Text
-            {...textProps}
-            className={cn(
-              "w-fit cursor-pointer data-popup-open:opacity-80",
-              className
-            )}
-          />
-        }
-      >
-        {children}
-      </PopoverTrigger>
-      {content !== undefined && content !== null ? (
-        <PopoverPopup
-          {...popoverProps}
-          className={cn("max-w-64", popoverProps?.className)}
-          data-selection-popover=""
-        >
-          {content}
-        </PopoverPopup>
-      ) : null}
-    </Popover>
-  )
-}

package/src/components/atoms/text-selection/index.ts

@@ -1,30 +0,0 @@
-export { TextClickPopover } from "./click-popover"
-export { HighlightPopover } from "./popover"
-export { TextSelection } from "./selection"
-export {
-  initialSelectionState,
-  resetSelectionAtom,
-  selectionAtom,
-  setCurrentSelectionAtom,
-  setPopoverPositionAtom,
-  setSelectionAtom,
-  setSelectionPopoverAtom,
-  setSelectionPositionAtom,
-  setShowPopoverAtom,
-  updateSelectionAtom,
-} from "./selection-atom"
-export { useSelection } from "./use-selection"
-export type {
-  THighlightPopoverPrimitiveProps,
-  IHighlightPopoverProps,
-  ISelectionPosition,
-  TSelectionPopoverComponent,
-  ISelectionRenderProps,
-  ISelectionState,
-  TSelectionStateUpdate,
-  ITextClickPopoverProps,
-  ITextPopoverRenderProps,
-  ITextSelectionProps,
-  IUseSelectionOptions,
-  IUseSelectionResult,
-} from "./types"

package/src/components/atoms/text-selection/popover.tsx

@@ -1,103 +0,0 @@
-"use client"
-
-import { GlassSurface } from "@/components/ui/glasscn/liquid-glass"
-
-import { useEffect } from "react"
-import type * as React from "react"
-import { useHighlightPopover } from "@omsimos/react-highlight-popover"
-import { Card, CardPanel } from "@/components/ui/card"
-import { cn } from "@/lib/utils"
-import { useSelection } from "./use-selection"
-import type { IHighlightPopoverProps, ISelectionRenderProps } from "./types"
-
-export function HighlightPopover({
-  children,
-  component: Component = Card,
-  componentProps,
-  render,
-  className,
-  ...props
-}: IHighlightPopoverProps): React.ReactElement {
-  const primitive = useHighlightPopover()
-  const selection = useSelection()
-  const currentSelection =
-    primitive.currentSelection || selection.currentSelection
-  const position = selection.popoverPosition ?? primitive.popoverPosition
-  const {
-    currentSelection: stateSelection,
-    popoverPosition: statePosition,
-    selected,
-    setPosition,
-    setSelection,
-    setShowPopover,
-    showPopover,
-  } = selection
-
-  useEffect(() => {
-    if (stateSelection !== currentSelection) {
-      setSelection(currentSelection)
-    }
-    if (
-      statePosition?.top !== primitive.popoverPosition.top ||
-      statePosition?.left !== primitive.popoverPosition.left
-    ) {
-      setPosition(primitive.popoverPosition)
-    }
-    if (showPopover !== primitive.showPopover) {
-      setShowPopover(primitive.showPopover)
-    }
-  }, [
-    currentSelection,
-    primitive.popoverPosition,
-    primitive.showPopover,
-    setPosition,
-    setSelection,
-    setShowPopover,
-    showPopover,
-    statePosition,
-    stateSelection,
-  ])
-
-  const renderProps: ISelectionRenderProps = {
-    position,
-    selection: currentSelection,
-    selected,
-    showPopover: primitive.showPopover,
-    setCurrentSelection: (value) => {
-      primitive.setCurrentSelection(value)
-      setSelection(value)
-    },
-    setShowPopover: (show) => {
-      primitive.setShowPopover(show)
-      setShowPopover(show)
-    },
-    close: () => {
-      primitive.setShowPopover(false)
-      setShowPopover(false)
-    },
-  }
-
-  const content = render ? render(renderProps) : children
-  const forwardedClassName =
-    typeof componentProps?.className === "string"
-      ? componentProps.className
-      : undefined
-  const componentContextProps =
-    typeof Component === "string" || Component === Card ? {} : renderProps
-  return (
-    <Component
-      {...componentProps}
-      {...props}
-      {...componentContextProps}
-      className={cn(
-        "relative isolate max-w-52 rounded-md bg-transparent dark:bg-transparent",
-        forwardedClassName,
-        className
-      )}
-      data-selection-popover=""
-    >
-      <GlassSurface glassVariant="frosted" />
-      <CardPanel className="p-3">{content}</CardPanel>
-    </Component>
-  )
-}

package/src/components/atoms/text-selection/selection-atom.ts

@@ -1,51 +0,0 @@
-import { atom } from "jotai"
-import type {
-  ISelectionPosition,
-  ISelectionState,
-  TSelectionStateUpdate,
-} from "./types"
-
-export const initialSelectionState: ISelectionState = {
-  selected: false,
-  currentSelection: "",
-  showPopover: false,
-  popoverPosition: null,
-}
-
-export const selectionAtom = atom<ISelectionState>(initialSelectionState)
-
-/** Update only the fields that changed, keeping selection state atomic. */
-export const updateSelectionAtom = atom(
-  null,
-  (get, set, update: TSelectionStateUpdate) => {
-    const next =
-      typeof update === "function" ? update(get(selectionAtom)) : update
-    set(selectionAtom, { ...get(selectionAtom), ...next })
-  }
-)
-
-export const setSelectionAtom = atom(null, (_get, set, selection: string) => {
-  set(updateSelectionAtom, { currentSelection: selection, selected: true })
-})
-
-export const setSelectionPositionAtom = atom(
-  null,
-  (_get, set, popoverPosition: ISelectionPosition) => {
-    set(updateSelectionAtom, { popoverPosition })
-  }
-)
-
-export const setSelectionPopoverAtom = atom(
-  null,
-  (_get, set, showPopover: boolean) => {
-    set(updateSelectionAtom, { showPopover })
-  }
-)
-
-export const setCurrentSelectionAtom = setSelectionAtom
-export const setPopoverPositionAtom = setSelectionPositionAtom
-export const setShowPopoverAtom = setSelectionPopoverAtom
-
-export const resetSelectionAtom = atom(null, (_get, set) => {
-  set(selectionAtom, initialSelectionState)
-})

package/src/components/atoms/text-selection/selection.tsx

@@ -1,56 +0,0 @@
-"use client"
-
-import type { ReactElement } from "react"
-import { HighlightPopover as HighlightPopoverPrimitive } from "@omsimos/react-highlight-popover"
-import { HighlightPopover } from "./popover"
-import { useSelection } from "./use-selection"
-import type { ITextSelectionProps } from "./types"
-
-export function TextSelection({
-  children,
-  selected,
-  popover,
-  component,
-  componentProps,
-  popoverComponent,
-  popoverProps,
-  renderPopover,
-  onSelectionStart,
-  onSelectionEnd,
-  onPopoverShow,
-  onPopoverHide,
-  ...props
-}: ITextSelectionProps): ReactElement {
-  const selection = useSelection({
-    selected,
-    onSelectionStart,
-    onSelectionEnd,
-    onPopoverShow,
-    onPopoverHide,
-  })
-  const hasPopover =
-    renderPopover !== undefined ||
-    component !== undefined ||
-    popoverComponent !== undefined ||
-    (popover !== undefined && popover !== null)
-
-  return (
-    <HighlightPopoverPrimitive
-      {...props}
-      {...selection.selectionProps}
-      renderPopover={() =>
-        hasPopover ? (
-          <HighlightPopover
-            component={component ?? popoverComponent}
-            componentProps={componentProps ?? popoverProps}
-            render={renderPopover}
-          >
-            {popover}
-          </HighlightPopover>
-        ) : null
-      }
-    >
-      {children}
-    </HighlightPopoverPrimitive>
-  )
-}

package/src/components/atoms/text-selection/types.ts

@@ -1,125 +0,0 @@
-import type {
-  ComponentProps,
-  ComponentType,
-  ElementType,
-  HTMLAttributes,
-  ReactNode,
-} from "react"
-import type { HighlightPopover as HighlightPopoverPrimitive } from "@omsimos/react-highlight-popover"
-import type { PopoverPopup } from "@/components/ui/popover"
-import type { TTextProps } from "../text/types"
-
-export interface ISelectionPosition {
-  top: number
-  left: number
-}
-
-export interface ISelectionState {
-  selected: boolean
-  currentSelection: string
-  showPopover: boolean
-  popoverPosition: ISelectionPosition | null
-}
-
-export type TSelectionStateUpdate =
-  Partial<ISelectionState> | ((state: ISelectionState) => Partial<ISelectionState>)
-
-export interface ISelectionRenderProps {
-  position: ISelectionPosition
-  selection: string
-  selected: boolean
-  showPopover: boolean
-  setCurrentSelection: (selection: string) => void
-  setShowPopover: (show: boolean) => void
-  close: () => void
-}
-
-export type TSelectionPopoverComponent = ComponentType<ISelectionRenderProps>
-
-export type THighlightPopoverPrimitiveProps = ComponentProps<
-  typeof HighlightPopoverPrimitive
->
-
-export interface IHighlightPopoverProps extends Omit<
-  HTMLAttributes<HTMLElement>,
-  "children"
-> {
-  children?: ReactNode
-  /** Render a component around the popover content. */
-  component?: ElementType
-  /** Props forwarded to the custom component. */
-  componentProps?: Record<string, unknown>
-  /** Render function for applications that need full control of the markup. */
-  render?: (props: ISelectionRenderProps) => ReactNode
-}
-
-export interface ITextSelectionProps extends Omit<
-  THighlightPopoverPrimitiveProps,
-  | "children"
-  | "renderPopover"
-  | "onSelectionStart"
-  | "onSelectionEnd"
-  | "onPopoverShow"
-  | "onPopoverHide"
-> {
-  children: ReactNode
-  selected?: boolean
-  popover?: ReactNode
-  component?: ElementType
-  componentProps?: Record<string, unknown>
-  popoverComponent?: ElementType
-  popoverProps?: Record<string, unknown>
-  renderPopover?: (props: ISelectionRenderProps) => ReactNode
-  onSelectionStart?: () => void
-  onSelectionEnd?: (selection: string) => void
-  onPopoverShow?: () => void
-  onPopoverHide?: () => void
-}
-
-
-export interface ITextPopoverRenderProps {
-  open: boolean
-  setOpen: (open: boolean) => void
-  close: () => void
-}
-
-export interface ITextClickPopoverProps extends Omit<TTextProps, "popover"> {
-  /** Popover content rendered when the text is clicked. */
-  popover?: ReactNode
-  /** Render function for applications that need full control of the markup. */
-  renderPopover?: (props: ITextPopoverRenderProps) => ReactNode
-  /** Props forwarded to the popup (side, align, className, …). */
-  popoverProps?: ComponentProps<typeof PopoverPopup>
-  open?: boolean
-  defaultOpen?: boolean
-  onOpenChange?: (open: boolean) => void
-}
-
-export interface IUseSelectionOptions {
-  selected?: boolean
-  onSelectionStart?: () => void
-  onSelectionEnd?: (selection: string) => void
-  onPopoverShow?: () => void
-  onPopoverHide?: () => void
-}
-
-export interface IUseSelectionResult {
-  state: ISelectionState
-  selected: boolean
-  currentSelection: string
-  showPopover: boolean
-  popoverPosition: ISelectionState["popoverPosition"]
-  setSelection: (selection: string) => void
-  setPosition: (
-    position: NonNullable<ISelectionState["popoverPosition"]>
-  ) => void
-  setShowPopover: (show: boolean) => void
-  update: (update: TSelectionStateUpdate) => void
-  reset: () => void
-  selectionProps: {
-    onSelectionStart: () => void
-    onSelectionEnd: (selection: string) => void
-    onPopoverShow: () => void
-    onPopoverHide: () => void
-  }
-}

package/src/components/atoms/text-selection/use-selection.ts

@@ -1,84 +0,0 @@
-"use client"
-
-import { useCallback, useMemo } from "react"
-import { useAtomValue, useSetAtom } from "jotai"
-import {
-  resetSelectionAtom,
-  selectionAtom,
-  setSelectionAtom,
-  setSelectionPopoverAtom,
-  setSelectionPositionAtom,
-  updateSelectionAtom,
-} from "./selection-atom"
-import type { IUseSelectionOptions, IUseSelectionResult } from "./types"
-
-/**
- * Coordinates the third-party highlight popover callbacks with the shared
- * selection atom. The returned `selectionProps` can be spread directly onto
- * `@omsimos/react-highlight-popover`.
- */
-export function useSelection(
-  options: IUseSelectionOptions = {}
-): IUseSelectionResult {
-  const {
-    selected: selectedProp,
-    onSelectionStart: onSelectionStartProp,
-    onSelectionEnd: onSelectionEndProp,
-    onPopoverShow: onPopoverShowProp,
-    onPopoverHide: onPopoverHideProp,
-  } = options
-  const state = useAtomValue(selectionAtom)
-  const setSelection = useSetAtom(setSelectionAtom)
-  const setPosition = useSetAtom(setSelectionPositionAtom)
-  const setShowPopover = useSetAtom(setSelectionPopoverAtom)
-  const update = useSetAtom(updateSelectionAtom)
-  const reset = useSetAtom(resetSelectionAtom)
-
-  const onSelectionStart = useCallback(() => {
-    update({ selected: false, showPopover: false })
-    onSelectionStartProp?.()
-  }, [onSelectionStartProp, update])
-
-  const onSelectionEnd = useCallback(
-    (selection: string) => {
-      setSelection(selection)
-      onSelectionEndProp?.(selection)
-    },
-    [onSelectionEndProp, setSelection]
-  )
-
-  const onPopoverShow = useCallback(() => {
-    setShowPopover(true)
-    onPopoverShowProp?.()
-  }, [onPopoverShowProp, setShowPopover])
-
-  const onPopoverHide = useCallback(() => {
-    setShowPopover(false)
-    onPopoverHideProp?.()
-  }, [onPopoverHideProp, setShowPopover])
-
-  const selectionProps = useMemo(
-    () => ({
-      onSelectionStart,
-      onSelectionEnd,
-      onPopoverShow,
-      onPopoverHide,
-    }),
-    [onPopoverHide, onPopoverShow, onSelectionEnd, onSelectionStart]
-  )
-
-  return {
-    state:
-      selectedProp === undefined ? state : { ...state, selected: selectedProp },
-    selected: selectedProp ?? state.selected,
-    currentSelection: state.currentSelection,
-    showPopover: state.showPopover,
-    popoverPosition: state.popoverPosition,
-    setSelection,
-    setPosition,
-    setShowPopover,
-    update,
-    reset,
-    selectionProps,
-  }
-}

package/src/components/atoms/types.ts

@@ -1,46 +0,0 @@
-import type { TInputProps } from "../ui/input"
-
-export type TAtomSize = "xs" | "sm" | "default" | "lg" | "xl" | "xxl"
-export type TAtomIconSize = "xs" | "sm" | "default" | "lg" | "xl" | "xxl"
-export type TMacroAtomSize = Exclude<TAtomSize, "xs" | "xl" | "xxl">
-export type TInputFieldSize = Record<"label" | "input" | "description" | "icon", Record<TMacroAtomSize, string>>
-
-
-export interface IReferenceProps {
-  /** With an href the chip renders as a link, otherwise as a button. */
-  href?: string
-  target?: React.HTMLAttributeAnchorTarget
-  rel?: string
-  id?: string
-  className?: string
-  children?: React.ReactNode
-  "aria-label"?: string
-  onClick?: React.MouseEventHandler<HTMLElement>
-  /**
-   * The passage the chip points at, shown in a preview card on hover or
-   * focus. Omitted, the chip is just a link.
-   */
-  preview?: React.ReactNode
-}
-
-
-export interface IInputFieldProps extends Omit<TInputProps, "size"> {
-  label?: string
-  description?: string
-  error?: string
-  size?: TMacroAtomSize
-  invalid?: boolean
-}
-
-export type TLoaderType = "spinner" | "dots";
-export interface ILoaderProps {
-  type?: TLoaderType;
-  className?: string;
-  size?: TAtomSize;
-}
-
-export type * from "./avatar/types"
-export type * from "./background/type"
-export type * from "./bubble/types"
-export type * from "./text/types"
-export type * from "./text-selection/types"