@prose-reader/react-reader 1.174.0 → 1.175.0

package/src/components/ui/field.tsx

@@ -1,33 +0,0 @@
-import { Field as ChakraField } from "@chakra-ui/react"
-import * as React from "react"
-
-export interface FieldProps extends Omit<ChakraField.RootProps, "label"> {
-  label?: React.ReactNode
-  helperText?: React.ReactNode
-  errorText?: React.ReactNode
-  optionalText?: React.ReactNode
-}
-
-export const Field = React.forwardRef<HTMLDivElement, FieldProps>(
-  function Field(props, ref) {
-    const { label, children, helperText, errorText, optionalText, ...rest } =
-      props
-    return (
-      <ChakraField.Root ref={ref} {...rest}>
-        {label && (
-          <ChakraField.Label>
-            {label}
-            <ChakraField.RequiredIndicator fallback={optionalText} />
-          </ChakraField.Label>
-        )}
-        {children}
-        {helperText && (
-          <ChakraField.HelperText>{helperText}</ChakraField.HelperText>
-        )}
-        {errorText && (
-          <ChakraField.ErrorText>{errorText}</ChakraField.ErrorText>
-        )}
-      </ChakraField.Root>
-    )
-  },
-)

package/src/components/ui/input-group.tsx

@@ -1,53 +0,0 @@
-import type { BoxProps, InputElementProps } from "@chakra-ui/react"
-import { Group, InputElement } from "@chakra-ui/react"
-import * as React from "react"
-
-export interface InputGroupProps extends BoxProps {
-  startElementProps?: InputElementProps
-  endElementProps?: InputElementProps
-  startElement?: React.ReactNode
-  endElement?: React.ReactNode
-  children: React.ReactElement<InputElementProps>
-  startOffset?: InputElementProps["paddingStart"]
-  endOffset?: InputElementProps["paddingEnd"]
-}
-
-export const InputGroup = React.forwardRef<HTMLDivElement, InputGroupProps>(
-  function InputGroup(props, ref) {
-    const {
-      startElement,
-      startElementProps,
-      endElement,
-      endElementProps,
-      children,
-      startOffset = "6px",
-      endOffset = "6px",
-      ...rest
-    } = props
-
-    const child =
-      React.Children.only<React.ReactElement<InputElementProps>>(children)
-
-    return (
-      <Group ref={ref} {...rest}>
-        {startElement && (
-          <InputElement pointerEvents="none" {...startElementProps}>
-            {startElement}
-          </InputElement>
-        )}
-        {React.cloneElement(child, {
-          ...(startElement && {
-            ps: `calc(var(--input-height) - ${startOffset})`,
-          }),
-          ...(endElement && { pe: `calc(var(--input-height) - ${endOffset})` }),
-          ...children.props,
-        })}
-        {endElement && (
-          <InputElement placement="end" {...endElementProps}>
-            {endElement}
-          </InputElement>
-        )}
-      </Group>
-    )
-  },
-)

package/src/components/ui/popover.tsx

@@ -1,59 +0,0 @@
-import { Popover as ChakraPopover, Portal } from "@chakra-ui/react"
-import { CloseButton } from "./close-button"
-import * as React from "react"
-
-interface PopoverContentProps extends ChakraPopover.ContentProps {
-  portalled?: boolean
-  portalRef?: React.RefObject<HTMLElement>
-}
-
-export const PopoverContent = React.forwardRef<
-  HTMLDivElement,
-  PopoverContentProps
->(function PopoverContent(props, ref) {
-  const { portalled = true, portalRef, ...rest } = props
-  return (
-    <Portal disabled={!portalled} container={portalRef}>
-      <ChakraPopover.Positioner>
-        <ChakraPopover.Content ref={ref} {...rest} />
-      </ChakraPopover.Positioner>
-    </Portal>
-  )
-})
-
-export const PopoverArrow = React.forwardRef<
-  HTMLDivElement,
-  ChakraPopover.ArrowProps
->(function PopoverArrow(props, ref) {
-  return (
-    <ChakraPopover.Arrow {...props} ref={ref}>
-      <ChakraPopover.ArrowTip />
-    </ChakraPopover.Arrow>
-  )
-})
-
-export const PopoverCloseTrigger = React.forwardRef<
-  HTMLButtonElement,
-  ChakraPopover.CloseTriggerProps
->(function PopoverCloseTrigger(props, ref) {
-  return (
-    <ChakraPopover.CloseTrigger
-      position="absolute"
-      top="1"
-      insetEnd="1"
-      {...props}
-      asChild
-      ref={ref}
-    >
-      <CloseButton size="sm" />
-    </ChakraPopover.CloseTrigger>
-  )
-})
-
-export const PopoverTitle = ChakraPopover.Title
-export const PopoverDescription = ChakraPopover.Description
-export const PopoverFooter = ChakraPopover.Footer
-export const PopoverHeader = ChakraPopover.Header
-export const PopoverRoot = ChakraPopover.Root
-export const PopoverBody = ChakraPopover.Body
-export const PopoverTrigger = ChakraPopover.Trigger

package/src/components/ui/progress.tsx

@@ -1,34 +0,0 @@
-import { Progress as ChakraProgress } from "@chakra-ui/react"
-import { InfoTip } from "./toggle-tip"
-import * as React from "react"
-
-export const ProgressBar = React.forwardRef<
-  HTMLDivElement,
-  ChakraProgress.TrackProps
->(function ProgressBar(props, ref) {
-  return (
-    <ChakraProgress.Track {...props} ref={ref}>
-      <ChakraProgress.Range />
-    </ChakraProgress.Track>
-  )
-})
-
-export interface ProgressLabelProps extends ChakraProgress.LabelProps {
-  info?: React.ReactNode
-}
-
-export const ProgressLabel = React.forwardRef<
-  HTMLDivElement,
-  ProgressLabelProps
->(function ProgressLabel(props, ref) {
-  const { children, info, ...rest } = props
-  return (
-    <ChakraProgress.Label {...rest} ref={ref}>
-      {children}
-      {info && <InfoTip>{info}</InfoTip>}
-    </ChakraProgress.Label>
-  )
-})
-
-export const ProgressRoot = ChakraProgress.Root
-export const ProgressValueText = ChakraProgress.ValueText

package/src/components/ui/provider.tsx

@@ -1,12 +0,0 @@
-"use client"
-
-import { ChakraProvider, defaultSystem } from "@chakra-ui/react"
-import { ColorModeProvider, type ColorModeProviderProps } from "./color-mode"
-
-export function Provider(props: ColorModeProviderProps) {
-  return (
-    <ChakraProvider value={defaultSystem}>
-      <ColorModeProvider {...props} />
-    </ChakraProvider>
-  )
-}

package/src/components/ui/radio.tsx

@@ -1,24 +0,0 @@
-import { RadioGroup as ChakraRadioGroup } from "@chakra-ui/react"
-import * as React from "react"
-
-export interface RadioProps extends ChakraRadioGroup.ItemProps {
-  rootRef?: React.Ref<HTMLDivElement>
-  inputProps?: React.InputHTMLAttributes<HTMLInputElement>
-}
-
-export const Radio = React.forwardRef<HTMLInputElement, RadioProps>(
-  function Radio(props, ref) {
-    const { children, inputProps, rootRef, ...rest } = props
-    return (
-      <ChakraRadioGroup.Item ref={rootRef} {...rest}>
-        <ChakraRadioGroup.ItemHiddenInput ref={ref} {...inputProps} />
-        <ChakraRadioGroup.ItemIndicator />
-        {children && (
-          <ChakraRadioGroup.ItemText>{children}</ChakraRadioGroup.ItemText>
-        )}
-      </ChakraRadioGroup.Item>
-    )
-  },
-)
-
-export const RadioGroup = ChakraRadioGroup.Root

package/src/components/ui/slider.tsx

@@ -1,82 +0,0 @@
-import { Slider as ChakraSlider, For, HStack } from "@chakra-ui/react"
-import * as React from "react"
-
-export interface SliderProps extends ChakraSlider.RootProps {
-  marks?: Array<number | { value: number; label: React.ReactNode }>
-  label?: React.ReactNode
-  showValue?: boolean
-}
-
-export const Slider = React.forwardRef<HTMLDivElement, SliderProps>(
-  function Slider(props, ref) {
-    const { marks: marksProp, label, showValue, ...rest } = props
-    const value = props.defaultValue ?? props.value
-
-    const marks = marksProp?.map((mark) => {
-      if (typeof mark === "number") return { value: mark, label: undefined }
-      return mark
-    })
-
-    const hasMarkLabel = !!marks?.some((mark) => mark.label)
-
-    return (
-      <ChakraSlider.Root ref={ref} thumbAlignment="center" {...rest}>
-        {label && !showValue && (
-          <ChakraSlider.Label>{label}</ChakraSlider.Label>
-        )}
-        {label && showValue && (
-          <HStack justify="space-between">
-            <ChakraSlider.Label>{label}</ChakraSlider.Label>
-            <ChakraSlider.ValueText />
-          </HStack>
-        )}
-        <ChakraSlider.Control data-has-mark-label={hasMarkLabel || undefined}>
-          <ChakraSlider.Track>
-            <ChakraSlider.Range />
-          </ChakraSlider.Track>
-          <SliderThumbs value={value} />
-          <SliderMarks marks={marks} />
-        </ChakraSlider.Control>
-      </ChakraSlider.Root>
-    )
-  },
-)
-
-function SliderThumbs(props: { value?: number[] }) {
-  const { value } = props
-  return (
-    <For each={value}>
-      {(_, index) => (
-        <ChakraSlider.Thumb key={index} index={index}>
-          <ChakraSlider.HiddenInput />
-        </ChakraSlider.Thumb>
-      )}
-    </For>
-  )
-}
-
-interface SliderMarksProps {
-  marks?: Array<number | { value: number; label: React.ReactNode }>
-}
-
-const SliderMarks = React.forwardRef<HTMLDivElement, SliderMarksProps>(
-  function SliderMarks(props, ref) {
-    const { marks } = props
-    if (!marks?.length) return null
-
-    return (
-      <ChakraSlider.MarkerGroup ref={ref}>
-        {marks.map((mark, index) => {
-          const value = typeof mark === "number" ? mark : mark.value
-          const label = typeof mark === "number" ? undefined : mark.label
-          return (
-            <ChakraSlider.Marker key={index} value={value}>
-              <ChakraSlider.MarkerIndicator />
-              {label}
-            </ChakraSlider.Marker>
-          )
-        })}
-      </ChakraSlider.MarkerGroup>
-    )
-  },
-)

package/src/components/ui/toggle-tip.tsx

@@ -1,70 +0,0 @@
-import { Popover as ChakraPopover, IconButton, Portal } from "@chakra-ui/react"
-import * as React from "react"
-import { HiOutlineInformationCircle } from "react-icons/hi"
-
-export interface ToggleTipProps extends ChakraPopover.RootProps {
-  showArrow?: boolean
-  portalled?: boolean
-  portalRef?: React.RefObject<HTMLElement>
-  content?: React.ReactNode
-}
-
-export const ToggleTip = React.forwardRef<HTMLDivElement, ToggleTipProps>(
-  function ToggleTip(props, ref) {
-    const {
-      showArrow,
-      children,
-      portalled = true,
-      content,
-      portalRef,
-      ...rest
-    } = props
-
-    return (
-      <ChakraPopover.Root
-        {...rest}
-        positioning={{ ...rest.positioning, gutter: 4 }}
-      >
-        <ChakraPopover.Trigger asChild>{children}</ChakraPopover.Trigger>
-        <Portal disabled={!portalled} container={portalRef}>
-          <ChakraPopover.Positioner>
-            <ChakraPopover.Content
-              width="auto"
-              px="2"
-              py="1"
-              textStyle="xs"
-              rounded="sm"
-              ref={ref}
-            >
-              {showArrow && (
-                <ChakraPopover.Arrow>
-                  <ChakraPopover.ArrowTip />
-                </ChakraPopover.Arrow>
-              )}
-              {content}
-            </ChakraPopover.Content>
-          </ChakraPopover.Positioner>
-        </Portal>
-      </ChakraPopover.Root>
-    )
-  },
-)
-
-export const InfoTip = React.forwardRef<
-  HTMLDivElement,
-  Partial<ToggleTipProps>
->(function InfoTip(props, ref) {
-  const { children, ...rest } = props
-  return (
-    <ToggleTip content={children} {...rest} ref={ref}>
-      <IconButton
-        variant="ghost"
-        aria-label="info"
-        size="2xs"
-        colorPalette="gray"
-      >
-        <HiOutlineInformationCircle />
-      </IconButton>
-    </ToggleTip>
-  )
-})

package/src/components/ui/tooltip.tsx

@@ -1,46 +0,0 @@
-import { Tooltip as ChakraTooltip, Portal } from "@chakra-ui/react"
-import * as React from "react"
-
-export interface TooltipProps extends ChakraTooltip.RootProps {
-  showArrow?: boolean
-  portalled?: boolean
-  portalRef?: React.RefObject<HTMLElement>
-  content: React.ReactNode
-  contentProps?: ChakraTooltip.ContentProps
-  disabled?: boolean
-}
-
-export const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>(
-  function Tooltip(props, ref) {
-    const {
-      showArrow,
-      children,
-      disabled,
-      portalled = true,
-      content,
-      contentProps,
-      portalRef,
-      ...rest
-    } = props
-
-    if (disabled) return children
-
-    return (
-      <ChakraTooltip.Root {...rest}>
-        <ChakraTooltip.Trigger asChild>{children}</ChakraTooltip.Trigger>
-        <Portal disabled={!portalled} container={portalRef}>
-          <ChakraTooltip.Positioner>
-            <ChakraTooltip.Content ref={ref} {...contentProps}>
-              {showArrow && (
-                <ChakraTooltip.Arrow>
-                  <ChakraTooltip.ArrowTip />
-                </ChakraTooltip.Arrow>
-              )}
-              {content}
-            </ChakraTooltip.Content>
-          </ChakraTooltip.Positioner>
-        </Portal>
-      </ChakraTooltip.Root>
-    )
-  },
-)

package/src/context/ReactReaderProvider.tsx

@@ -1,14 +0,0 @@
-import type { Reader } from "@prose-reader/core"
-import { memo } from "react"
-import { ReaderContext } from "./context"
-
-export const ReactReaderProvider = memo(
-  ({
-    children,
-    reader,
-  }: { children?: React.ReactNode; reader: Reader | undefined }) => {
-    return (
-      <ReaderContext.Provider value={reader}>{children}</ReaderContext.Provider>
-    )
-  },
-)

package/src/context/context.ts

@@ -1,6 +0,0 @@
-import type { Reader } from "@prose-reader/core"
-import { type Context, createContext } from "react"
-
-export const ReaderContext: Context<Reader | undefined> = createContext<
-  Reader | undefined
->(undefined)

package/src/context/useReader.ts

@@ -1,9 +0,0 @@
-import type { Reader } from "@prose-reader/core"
-import { useContext } from "react"
-import { ReaderContext } from "./context"
-
-export const useReader = (): Reader | undefined => {
-  const context = useContext(ReaderContext)
-
-  return context
-}

package/src/index.ts

@@ -1,2 +0,0 @@
-export * from "./navigation/QuickMenu/QuickMenu"
-export * from "./context/ReactReaderProvider"

package/src/navigation/QuickMenu/BottomBar.tsx

@@ -1,65 +0,0 @@
-import { Box, IconButton, Stack } from "@chakra-ui/react"
-import {
-  RxDoubleArrowDown,
-  RxDoubleArrowLeft,
-  RxDoubleArrowRight,
-  RxDoubleArrowUp,
-} from "react-icons/rx"
-import { useObserve } from "reactjrx"
-import { useReader } from "../../context/useReader"
-import { PaginationInfoSection } from "./PaginationInfoSection"
-import { QuickBar } from "./QuickBar"
-import { Scrubber } from "./Scrubber"
-import { TimeIndicator } from "./TimeIndicator"
-
-export const BottomBar = ({ open }: { open: boolean }) => {
-  const reader = useReader()
-  const navigation = useObserve(() => reader?.navigation.state$, [reader])
-  const settings = useObserve(() => reader?.settings.values$, [reader])
-  const isVerticalDirection = settings?.computedPageTurnDirection === "vertical"
-
-  return (
-    <QuickBar present={open} position="bottom" height={130}>
-      <IconButton
-        aria-label="left"
-        size="lg"
-        variant="ghost"
-        flexShrink={0}
-        onClick={() => reader?.navigation.goToLeftOrTopSpineItem()}
-        disabled={
-          !navigation?.canGoLeftSpineItem && !navigation?.canGoTopSpineItem
-        }
-      >
-        {isVerticalDirection ? <RxDoubleArrowUp /> : <RxDoubleArrowLeft />}
-      </IconButton>
-      <Stack
-        flex={1}
-        maxW={400}
-        gap={2}
-        alignItems="center"
-        overflow="auto"
-        px={4}
-      >
-        <PaginationInfoSection />
-        <Box height={5} maxW={300} width="100%" overflow="visible">
-          <Scrubber />
-        </Box>
-      </Stack>
-      <IconButton
-        aria-label="right"
-        size="lg"
-        flexShrink={0}
-        variant="ghost"
-        disabled={
-          !navigation?.canGoRightSpineItem && !navigation?.canGoBottomSpineItem
-        }
-        onClick={() => {
-          reader?.navigation.goToRightOrBottomSpineItem()
-        }}
-      >
-        {isVerticalDirection ? <RxDoubleArrowDown /> : <RxDoubleArrowRight />}
-      </IconButton>
-      <TimeIndicator position="absolute" bottom={0} left={0} p={2} />
-    </QuickBar>
-  )
-}

package/src/navigation/QuickMenu/PaginationInfoSection.tsx

@@ -1,62 +0,0 @@
-import { HStack, Stack, Text } from "@chakra-ui/react"
-import {
-  ProgressBar,
-  ProgressRoot,
-  ProgressValueText,
-} from "../../components/ui/progress"
-import { usePagination } from "../../pagination/usePagination"
-import { useNavigationContext } from "../useNavigationContext"
-
-export const PaginationInfoSection = () => {
-  const pagination = usePagination()
-  const {
-    hasOnlyOnePage,
-    leftPageIndex,
-    rightPageIndex,
-    totalApproximatePages,
-    beginAndEndAreDifferent,
-  } = useNavigationContext()
-  const progress = Math.round((pagination?.percentageEstimateOfBook ?? 0) * 100)
-
-  const buildTitleChain = (
-    chapterInfo: NonNullable<typeof pagination>["beginChapterInfo"],
-  ): string => {
-    if (chapterInfo?.subChapter) {
-      return `${chapterInfo.title} / ${buildTitleChain(chapterInfo.subChapter)}`
-    }
-    return chapterInfo?.title || ""
-  }
-
-  const chapterTitle = buildTitleChain(pagination?.beginChapterInfo)
-
-  return (
-    <Stack alignItems="center" gap={1} maxW="100%" overflow="auto">
-      <ProgressRoot value={progress} size="xs" width={150}>
-        <HStack justifyContent="space-between">
-          <ProgressBar width={110} />
-          <ProgressValueText>{`${progress}%`}</ProgressValueText>
-        </HStack>
-      </ProgressRoot>
-      <Text truncate maxWidth="100%" fontSize="sm" mt={1}>
-        {chapterTitle ? `Chapter: ${chapterTitle}` : `\u00A0`}
-      </Text>
-      {!hasOnlyOnePage && (
-        <HStack>
-          <Text fontSize="xs">
-            {beginAndEndAreDifferent
-              ? `${leftPageIndex + 1} - ${rightPageIndex + 1} of ${totalApproximatePages}`
-              : `${leftPageIndex + 1} of ${totalApproximatePages}`}
-          </Text>
-          {!!pagination?.hasChapters && (
-            <>
-              <Text>-</Text>
-              <Text fontSize="xs">
-                ({(pagination?.beginAbsolutePageIndex ?? 0) + 1})
-              </Text>
-            </>
-          )}
-        </HStack>
-      )}
-    </Stack>
-  )
-}

package/src/navigation/QuickMenu/QuickBar.tsx

@@ -1,40 +0,0 @@
-import { Presence, type PresenceProps } from "@chakra-ui/react"
-import { memo } from "react"
-
-export const QuickBar = memo(
-  ({
-    children,
-    position,
-    ...rest
-  }: { position: "top" | "bottom" } & PresenceProps) => {
-    return (
-      <Presence
-        display="flex"
-        flexDirection="row"
-        width="100%"
-        position="absolute"
-        {...(position === "bottom" ? { bottom: 0 } : { top: 0 })}
-        animationName={
-          position === "bottom"
-            ? {
-                _open: "slide-from-bottom, fade-in",
-                _closed: "slide-to-bottom, fade-out",
-              }
-            : {
-                _open: "slide-from-top, fade-in",
-                _closed: "slide-to-top, fade-out",
-              }
-        }
-        animationDuration="moderate"
-        bgColor="bg.panel"
-        alignItems="center"
-        justifyContent="center"
-        shadow="md"
-        px={4}
-        {...rest}
-      >
-        {children}
-      </Presence>
-    )
-  },
-)

package/src/navigation/QuickMenu/QuickMenu.tsx

@@ -1,22 +0,0 @@
-import { memo } from "react"
-import { BottomBar } from "./BottomBar"
-import { TopBar } from "./TopBar"
-
-export const QuickMenu = memo(
-  ({
-    open,
-    onBackClick,
-    onMoreClick,
-  }: { open: boolean; onBackClick: () => void; onMoreClick: () => void }) => {
-    return (
-      <>
-        <TopBar
-          open={open}
-          onBackClick={onBackClick}
-          onMoreClick={onMoreClick}
-        />
-        <BottomBar open={open} />
-      </>
-    )
-  },
-)