@nypl/web-reader 0.1.4 → 0.2.0-alpha.3

package/src/types.ts

@@ -1,94 +0,0 @@
-import { WebpubManifest } from './WebpubManifestTypes/WebpubManifest';
-
-export { WebpubManifest };
-
-// the MimeType for a packaged epub
-export const EpubMimeType = 'application/epub';
-// the Mimetype for a generic webpub
-export const WebpubMimeType = 'application/webpub';
-
-export type ColorMode = 'night' | 'sepia' | 'day';
-
-export type FontFamily = 'publisher' | 'serif' | 'sans-serif' | 'open-dyslexic';
-
-export type Navigator = {
-  goForward: () => void;
-  goBackward: () => void;
-  setColorMode: (mode: ColorMode) => Promise<void>;
-  setScroll: (val: 'scrolling' | 'paginated') => Promise<void>;
-  increaseFontSize: () => Promise<void>;
-  decreaseFontSize: () => Promise<void>;
-  setFontFamily: (family: FontFamily) => Promise<void>;
-  goToPage: (href: string) => void;
-};
-
-//  PDF specific navigator here
-export type PdfNavigator = Navigator;
-
-export type HtmlNavigator = Navigator;
-
-export type ReaderState = {
-  colorMode: ColorMode;
-  isScrolling: boolean;
-  fontSize: number;
-  fontFamily: FontFamily;
-  currentTocUrl: string | null;
-};
-
-// PDF specific reader state
-export type PdfReaderState = ReaderState;
-
-// HTML specific reader state
-export type HtmlReaderState = ReaderState;
-
-export type InactiveReader = null;
-
-export type LoadingReader = {
-  isLoading: true;
-  content: JSX.Element;
-  navigator: null;
-  state: null;
-  manifest: null;
-  type: null;
-};
-
-type CommonReader = {
-  isLoading: false;
-  content: JSX.Element;
-  manifest: WebpubManifest;
-};
-
-export type PDFActiveReader = CommonReader & {
-  state: PdfReaderState;
-  navigator: PdfNavigator;
-  type: 'PDF';
-};
-
-export type HTMLActiveReader = CommonReader & {
-  state: HtmlReaderState;
-  navigator: HtmlNavigator;
-  type: 'HTML';
-};
-
-export type ActiveReader = PDFActiveReader | HTMLActiveReader;
-
-export type ReaderReturn = InactiveReader | LoadingReader | ActiveReader;
-
-// should fetch and decrypt a resource
-export type GetContent = (href: string) => Promise<string>;
-
-export type UseWebReaderArguments = {
-  webpubManifestUrl: string;
-  proxyUrl?: string;
-  getContent?: GetContent;
-};
-
-export type ActiveReaderArguments = UseWebReaderArguments & {
-  manifest: WebpubManifest;
-};
-
-export type InactiveReaderArguments = undefined;
-
-export type ReaderArguments = ActiveReaderArguments | InactiveReaderArguments;
-
-export type GetColor = (light: string, dark: string, sepia: string) => string;

package/src/ui/Button.tsx

@@ -1,12 +0,0 @@
-import React from 'react';
-import { Button as ChakraButton } from '@chakra-ui/react';
-
-export type ButtonProps = React.ComponentPropsWithRef<typeof ChakraButton>;
-
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  (props, ref) => {
-    return <ChakraButton ref={ref} variant="solid" {...props} />;
-  }
-);
-
-export default Button;

package/src/ui/Header.tsx

@@ -1,89 +0,0 @@
-import React from 'react';
-import { Flex, Link, HStack, Text, chakra } from '@chakra-ui/react';
-import {
-  Icon,
-  IconNames,
-  LogoNames,
-} from '@nypl/design-system-react-components';
-import { ActiveReader } from '../types';
-import useColorModeValue from '../ui/hooks/useColorModeValue';
-import { toggleFullScreen } from '../utils/toggleFullScreen';
-
-import SettingsCard from './SettingsButton';
-import Button from './Button';
-import TableOfContent from './TableOfContent';
-import { HEADER_HEIGHT } from './constants';
-
-export type HeaderProps = ActiveReader & {
-  headerLeft?: React.ReactNode; // Top-left header section
-};
-
-export default function Header(props: HeaderProps): React.ReactElement {
-  const { headerLeft, state, navigator, manifest } = props;
-  const linkColor = useColorModeValue('gray.700', 'gray.100', 'gray.700');
-  const mainBgColor = useColorModeValue('ui.white', 'ui.black', 'ui.sepia');
-
-  // Add custom styles to the NYPL Icon
-  const ChakraIcon = chakra(Icon, {
-    baseStyle: {
-      height: '100%',
-    },
-  });
-
-  return (
-    <Flex
-      as="header"
-      position="sticky"
-      top={0}
-      left={0}
-      right={0}
-      height={`${HEADER_HEIGHT}px`}
-      zIndex="sticky"
-      alignContent="space-between"
-      alignItems="center"
-      px={8}
-      borderBottom="1px solid"
-      borderColor="gray.100"
-      bgColor={mainBgColor}
-    >
-      {headerLeft ? (
-        headerLeft
-      ) : (
-        <Link
-          href="https://www.nypl.org"
-          aria-label="Return to NYPL"
-          tabIndex={0}
-          fontSize={0}
-          py={1}
-          textTransform="uppercase"
-          d="flex"
-          color={linkColor}
-          height="100%"
-          alignItems="center"
-          _hover={{
-            textDecoration: 'none',
-          }}
-        >
-          <ChakraIcon
-            decorative
-            name={LogoNames.logo_nypl}
-            modifiers={['xlarge']}
-          />
-          <Text variant="headerNav">Return to NYPL</Text>
-        </Link>
-      )}
-      <HStack ml="auto" spacing={1}>
-        <TableOfContent
-          navigator={navigator}
-          manifest={manifest}
-          readerState={state}
-        />
-        <SettingsCard {...props} />
-        <Button border="none" onClick={toggleFullScreen}>
-          <Icon decorative name={IconNames.search} modifiers={['small']} />
-          <Text variant="headerNav">Toggle Fullscreen</Text>
-        </Button>
-      </HStack>
-    </Flex>
-  );
-}

package/src/ui/HtmlSettings.tsx

@@ -1,97 +0,0 @@
-import * as React from 'react';
-import { ButtonGroup } from '@chakra-ui/react';
-import { HtmlNavigator, HtmlReaderState } from '../types';
-import Button from './Button';
-import ToggleButton from './ToggleButton';
-import ToggleGroup from './ToggleGroup';
-
-type HtmlSettingsProps = {
-  navigator: HtmlNavigator;
-  readerState: HtmlReaderState;
-  paginationValue: string;
-};
-
-export default function HtmlSettings(
-  props: HtmlSettingsProps
-): React.ReactElement {
-  const { navigator, readerState, paginationValue } = props;
-  const { fontFamily, colorMode } = readerState;
-  const {
-    setFontFamily,
-    decreaseFontSize,
-    increaseFontSize,
-    setColorMode,
-    setScroll,
-  } = navigator;
-
-  return (
-    <>
-      <ToggleGroup
-        value={fontFamily}
-        label="text font options"
-        onChange={setFontFamily}
-      >
-        <ToggleButton value="publisher">Publisher</ToggleButton>
-        <ToggleButton value="serif">Serif</ToggleButton>
-        <ToggleButton value="sans-serif">Sans-Serif</ToggleButton>
-        <ToggleButton value="open-dyslexic">Dyslexia-Friendly</ToggleButton>
-      </ToggleGroup>
-      <ButtonGroup d="flex" spacing={0}>
-        <Button
-          flexGrow={1}
-          aria-label="Decrease font size"
-          onClick={decreaseFontSize}
-          variant="toggle"
-        >
-          A-
-        </Button>
-        <Button
-          flexGrow={1}
-          aria-label="Increase font size"
-          onClick={increaseFontSize}
-          variant="toggle"
-        >
-          A+
-        </Button>
-      </ButtonGroup>
-      <ToggleGroup
-        value={colorMode}
-        label="reading theme options"
-        onChange={setColorMode}
-      >
-        <ToggleButton
-          colorMode="day"
-          value="day"
-          _checked={{ bg: 'ui.white' }} // default _checked color is green for toggles
-        >
-          Day
-        </ToggleButton>
-        <ToggleButton
-          colorMode="sepia"
-          value="sepia"
-          bg="ui.sepia" // distinct case where default needs to be sepia
-          _active={{ bg: 'ui.sepia' }}
-          _hover={{ bg: 'ui.sepia' }}
-          _checked={{ bg: 'ui.sepia' }}
-        >
-          Sepia
-        </ToggleButton>
-        <ToggleButton
-          colorMode="night"
-          value="night"
-          _checked={{ bg: 'ui.black' }}
-        >
-          Night
-        </ToggleButton>
-      </ToggleGroup>
-      <ToggleGroup
-        onChange={setScroll}
-        value={paginationValue}
-        label="pagination options"
-      >
-        <ToggleButton value="paginated">Paginated</ToggleButton>
-        <ToggleButton value="scrolling">Scrolling</ToggleButton>
-      </ToggleGroup>
-    </>
-  );
-}

package/src/ui/PageButton.tsx

@@ -1,39 +0,0 @@
-import React from 'react';
-import { Circle as ChakraCircle, Button } from '@chakra-ui/react';
-import useColorModeValue from './hooks/useColorModeValue';
-
-export type PageButtonProps = React.ComponentPropsWithoutRef<typeof Button> & {
-  children: React.ReactNode;
-};
-
-function PageButton(
-  props: React.PropsWithoutRef<PageButtonProps>
-): React.ReactElement {
-  const { children, onClick, ...rest } = props;
-  const circleColor = useColorModeValue('ui.black', 'ui.white', 'ui.black');
-  const circleBgColor = useColorModeValue('ui.white', 'gray.700', 'ui.white');
-
-  return (
-    <ChakraCircle
-      as="button"
-      d="flex"
-      position="fixed"
-      zIndex="docked"
-      alignItems="center"
-      border="1px solid"
-      borderColor="ui.gray.light-cool"
-      color={circleColor}
-      bg={circleBgColor}
-      size={{ sm: '40px', md: '50px' }}
-      mx={{ sm: 2, md: 6 }}
-      top="50%"
-      cursor="pointer"
-      onClick={onClick}
-      {...rest}
-    >
-      {children}
-    </ChakraCircle>
-  );
-}
-
-export default PageButton;

package/src/ui/PdfSettings.tsx

@@ -1,85 +0,0 @@
-import * as React from 'react';
-import { ButtonGroup, Circle } from '@chakra-ui/react';
-import { Icon, IconNames } from '@nypl/design-system-react-components';
-import { PdfNavigator, PdfReaderState } from '../types';
-import Button from './Button';
-import ToggleButton from './ToggleButton';
-import ToggleGroup from './ToggleGroup';
-
-type PdfSettingsProps = {
-  navigator: PdfNavigator;
-  readerState: PdfReaderState;
-  paginationValue: string;
-};
-
-export default function PdfSettings(
-  props: PdfSettingsProps
-): React.ReactElement {
-  const { navigator, readerState, paginationValue } = props;
-  const { fontFamily } = readerState;
-  const {
-    setFontFamily,
-    decreaseFontSize,
-    increaseFontSize,
-    setScroll,
-  } = navigator;
-
-  return (
-    <>
-      <ToggleGroup
-        value={fontFamily}
-        label="text font options"
-        onChange={setFontFamily}
-      >
-        <ToggleButton value="publisher">Publisher</ToggleButton>
-        <ToggleButton value="serif">Serif</ToggleButton>
-        <ToggleButton value="sans-serif">Sans-Serif</ToggleButton>
-        <ToggleButton value="open-dyslexic">Dyslexia-Friendly</ToggleButton>
-      </ToggleGroup>
-      <ButtonGroup d="flex" spacing={0}>
-        <Button
-          flexGrow={1}
-          aria-label="Zoom In"
-          onClick={decreaseFontSize}
-          variant="toggle"
-        >
-          Zoom
-          <Circle
-            border="1px solid"
-            p={1}
-            ml={1}
-            size="17px"
-            alignItems="baseline"
-          >
-            <Icon decorative name={IconNames.minus} modifiers={['small']} />{' '}
-          </Circle>
-        </Button>
-        <Button
-          flexGrow={1}
-          aria-label="Zoom Out"
-          onClick={increaseFontSize}
-          variant="toggle"
-        >
-          Zoom
-          <Circle
-            border="1px solid"
-            p={1}
-            ml={1}
-            size="17px"
-            alignItems="baseline"
-          >
-            <Icon decorative name={IconNames.plus} modifiers={['small']} />{' '}
-          </Circle>
-        </Button>
-      </ButtonGroup>
-      <ToggleGroup
-        onChange={setScroll}
-        value={paginationValue}
-        label="pagination options"
-      >
-        <ToggleButton value="paginated">Paginated</ToggleButton>
-        <ToggleButton value="scrolling">Scrolling</ToggleButton>
-      </ToggleGroup>
-    </>
-  );
-}

package/src/ui/SettingsButton.tsx

@@ -1,71 +0,0 @@
-import * as React from 'react';
-import {
-  Popover,
-  PopoverTrigger,
-  PopoverContent,
-  PopoverBody,
-  Text,
-} from '@chakra-ui/react';
-import { PDFActiveReader, HTMLActiveReader } from '../types';
-import { Icon, IconNames } from '@nypl/design-system-react-components';
-
-import Button from './Button';
-import useColorModeValue from './hooks/useColorModeValue';
-import PdfSettings from './PdfSettings';
-import HtmlSettings from './HtmlSettings';
-
-type SettingsCardProps =
-  | Pick<PDFActiveReader, 'navigator' | 'state' | 'type'>
-  | Pick<HTMLActiveReader, 'navigator' | 'state' | 'type'>;
-
-export default function SettingsCard(
-  props: SettingsCardProps
-): React.ReactElement {
-  const [isOpen, setIsOpen] = React.useState(false);
-  const open = () => setIsOpen(!isOpen);
-  const close = () => setIsOpen(false);
-
-  const { navigator, state, type } = props;
-  const paginationValue = state?.isScrolling ? 'scrolling' : 'paginated';
-  const contentBgColor = useColorModeValue('ui.white', 'ui.black', 'ui.white');
-
-  return (
-    <>
-      <Popover
-        placement="bottom"
-        isOpen={isOpen}
-        onClose={close}
-        autoFocus={true}
-      >
-        <PopoverTrigger>
-          <Button onClick={open} border="none">
-            <Icon decorative name={IconNames.plus} modifiers={['small']} />{' '}
-            <Text variant="headerNav">Settings</Text>
-          </Button>
-        </PopoverTrigger>
-        <PopoverContent
-          borderColor="gray.100"
-          width="fit-content"
-          bgColor={contentBgColor}
-        >
-          <PopoverBody p={0} maxWidth="95vw">
-            {type === 'PDF' && (
-              <PdfSettings
-                navigator={navigator}
-                readerState={state}
-                paginationValue={paginationValue}
-              />
-            )}
-            {type === 'HTML' && (
-              <HtmlSettings
-                navigator={navigator}
-                readerState={state}
-                paginationValue={paginationValue}
-              />
-            )}
-          </PopoverBody>
-        </PopoverContent>
-      </Popover>
-    </>
-  );
-}

package/src/ui/TableOfContent.tsx

@@ -1,144 +0,0 @@
-import React, { useState } from 'react';
-import {
-  Link,
-  Menu,
-  MenuButton,
-  MenuItem,
-  MenuList,
-  Portal,
-  Text,
-} from '@chakra-ui/react';
-import { Icon, IconNames } from '@nypl/design-system-react-components';
-import { Navigator, ReaderState, WebpubManifest } from '../types';
-import Button from './Button';
-import useColorModeValue from './hooks/useColorModeValue';
-import { ReadiumLink } from '../WebpubManifestTypes/ReadiumLink';
-import { HEADER_HEIGHT } from './constants';
-
-type TocItemProps = React.ComponentPropsWithoutRef<typeof MenuItem> & {
-  href: string;
-  title: string | undefined;
-  isActive: boolean;
-  onClick: React.MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>;
-};
-
-const TocItem = (props: TocItemProps) => {
-  const { href, title, isActive, ...rest } = props;
-
-  const bgColor = useColorModeValue('ui.white', 'ui.black', 'ui.sepia');
-  const color = useColorModeValue('ui.black', 'ui.white', 'ui.black');
-  const borderColor = useColorModeValue(
-    'ui.gray.medium',
-    'gray.500',
-    'yellow.600'
-  );
-
-  const activeColor = 'ui.black';
-  const activeBgColor = 'ui.gray.light-cool';
-
-  const _hover = {
-    textDecoration: 'none',
-    background: isActive ? 'ui.black' : 'ui.gray.x-dark',
-    color: 'ui.white',
-  };
-
-  const _focus = {
-    ..._hover,
-    boxShadow: 'none',
-  };
-
-  const styles = {
-    background: isActive ? activeBgColor : bgColor,
-    color: isActive ? activeColor : color,
-    borderBottom: `1px solid`,
-    borderColor: borderColor,
-    py: 3,
-    _hover,
-    _focus,
-  };
-
-  return (
-    <MenuItem as={Link} href={href} {...styles} {...rest}>
-      {title}
-    </MenuItem>
-  );
-};
-
-export default function TableOfContent({
-  navigator,
-  manifest,
-  readerState,
-}: {
-  navigator: Navigator;
-  manifest: WebpubManifest;
-  readerState: ReaderState;
-}): React.ReactElement {
-  const [isOpen, setIsOpen] = useState(false);
-  const tocLinkHandler: React.MouseEventHandler<HTMLButtonElement> = (evt) => {
-    evt.preventDefault();
-    const href = evt.currentTarget.getAttribute('href');
-    if (!href) {
-      console.warn('TOC Link clicked without an href');
-      return;
-    }
-    navigator.goToPage(href);
-    setIsOpen(false);
-  };
-
-  const tocBgColor = useColorModeValue('ui.white', 'ui.black', 'ui.sepia');
-
-  const getLinkHref = (link: ReadiumLink): string => {
-    if (link.href) return link.href;
-    if (!link.children) throw new Error('Manifest is not well formed');
-    return getLinkHref(link.children[0]);
-  };
-
-  return (
-    <Menu
-      onOpen={() => setIsOpen(true)}
-      onClose={() => setIsOpen(false)} // To account for "close by lose focus"
-    >
-      <MenuButton as={Button} border="none">
-        <Icon decorative name={IconNames.download} modifiers={['small']} />
-        <Text variant="headerNav">Table of Contents</Text>
-      </MenuButton>
-      {isOpen && manifest?.toc && (
-        <Portal>
-          <MenuList
-            width="100vw"
-            height={`calc(100vh - ${HEADER_HEIGHT}px)`}
-            background={tocBgColor}
-            borderRadius="none"
-            borderColor={tocBgColor}
-            zIndex="popover"
-            px={7}
-            mt="-2px" // Move the popover slightly higher to hide Header border
-            overflow="auto"
-          >
-            {manifest.toc.map((content: ReadiumLink) => (
-              <React.Fragment key={content.title}>
-                <TocItem
-                  href={getLinkHref(content)}
-                  title={content.title}
-                  isActive={readerState?.currentTocUrl === content.href}
-                  onClick={tocLinkHandler}
-                />
-                {content.children &&
-                  content.children.map((subLink) => (
-                    <TocItem
-                      key={subLink.title}
-                      href={getLinkHref(subLink)}
-                      title={subLink.title}
-                      isActive={readerState?.currentTocUrl === subLink.href}
-                      onClick={tocLinkHandler}
-                      pl={10}
-                    />
-                  ))}
-              </React.Fragment>
-            ))}
-          </MenuList>
-        </Portal>
-      )}
-    </Menu>
-  );
-}

package/src/ui/ToggleButton.tsx

@@ -1,60 +0,0 @@
-import React from 'react';
-import {
-  Box as ChakraBox,
-  Circle,
-  ThemeProvider,
-  useRadio,
-  useTheme,
-} from '@chakra-ui/react';
-import { Icon, IconNames } from '@nypl/design-system-react-components';
-
-import Button from './Button';
-import { getTheme } from './theme';
-import { ColorMode } from '../types';
-
-export interface ToggleButtonProps
-  extends React.ComponentPropsWithoutRef<typeof ChakraBox> {
-  isChecked?: false;
-  colorMode?: ColorMode;
-  value: string;
-}
-
-function ToggleButton(
-  props: React.PropsWithoutRef<ToggleButtonProps>
-): React.ReactElement {
-  const { isChecked, children, colorMode, ...rest } = props;
-  const { getInputProps, getCheckboxProps } = useRadio(props);
-
-  const input = getInputProps();
-  const checkbox = getCheckboxProps();
-  const theme = useTheme();
-
-  return (
-    // This will override the default theme if we specify the colorMode to the toggle button.
-    <ThemeProvider theme={getTheme(colorMode ?? theme.currentColorMode)}>
-      <ChakraBox as="label" d="flex" flexGrow={1}>
-        <input {...input} />
-        <Button as="div" {...checkbox} variant="toggle" {...rest} flexGrow={1}>
-          {children}
-          {isChecked && (
-            <Circle
-              position="absolute"
-              verticalAlign="middle"
-              right={2}
-              top="50%"
-              transform="translateY(-50%)"
-              borderColor="white"
-              border="1px solid"
-              size="15px"
-              alignItems="baseline"
-            >
-              <Icon decorative name={IconNames.check} modifiers={['small']} />
-            </Circle>
-          )}
-        </Button>
-      </ChakraBox>
-    </ThemeProvider>
-  );
-}
-
-export default ToggleButton;