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

package/src/ui/nypl-base-theme/foundations/spacing.ts

@@ -1,58 +0,0 @@
-/**
- * A comprehensive spacin scale based on NYPL Design System,
- * with intermediate values interpolated. Those marked with comments
- * are directly from the NYPL DS.
- *
- * 1 spacing unit is 4px or 0.25rem.
- *
- * Mental model: If you need a spacing of 40px, divide it by 4.
- * That'll give you 10. Then use it in your component.
- */
-const spacing = {
-  space: {
-    px: '1px',
-    0: '0',
-    0.5: '0.125rem',
-    // 4px
-    1: '0.25rem',
-    1.5: '0.375rem',
-    // 8px
-    2: '0.5rem',
-    2.5: '0.625rem',
-    3: '0.75rem',
-    3.5: '0.875rem',
-    // 16px
-    4: '1rem',
-    5: '1.25rem',
-    // 24px
-    6: '1.5rem',
-    7: '1.75rem',
-    // 32 px
-    8: '2rem',
-    9: '2.25rem',
-    10: '2.5rem',
-    // 48px
-    12: '3rem',
-    14: '3.5rem',
-    // 64px
-    16: '4rem',
-    20: '5rem',
-    // 96px
-    24: '6rem',
-    28: '7rem',
-    32: '8rem',
-    36: '9rem',
-    40: '10rem',
-    44: '11rem',
-    48: '12rem',
-    52: '13rem',
-    56: '14rem',
-    60: '15rem',
-    64: '16rem',
-    72: '18rem',
-    80: '20rem',
-    96: '24rem',
-  },
-};
-
-export default spacing;

package/src/ui/nypl-base-theme/foundations/typography.ts

@@ -1,43 +0,0 @@
-import { Dict } from '../types';
-
-type Typography = {
-  letterSpacings: Dict;
-  lineHeights: Dict;
-  fontWeights: Dict;
-  fonts: Dict;
-  fontSizes: Dict;
-};
-
-const typography: Typography = {
-  fonts: {
-    body: '-apple-system, BlinkMacSystemFont, system-ui, sans-serif',
-    heading: '-apple-system, BlinkMacSystemFont, system-ui, sans-seri',
-    mono: `Courier,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace`,
-  },
-  fontSizes: {
-    '-2': '0.75rem',
-    '-1': '0.875rem',
-    '0': '1rem',
-    '1': '1.125rem',
-    '2': '1.25rem',
-    '3': '1.75rem',
-    '4': '2.25rem',
-    '5': '3rem',
-  },
-  fontWeights: {
-    light: 300,
-    regular: 400,
-    medium: 500,
-    bold: 700,
-  },
-  lineHeights: [1, 1.1, 1.25, 1.5],
-  letterSpacings: {
-    tighter: '-0.05em',
-    tight: '-0.025em',
-    normal: '0',
-    wide: '0.025em',
-    wider: '0.05em',
-    widest: '0.1em',
-  },
-};
-export default typography;

package/src/ui/nypl-base-theme/index.ts

@@ -1,42 +0,0 @@
-import { extendTheme } from '@chakra-ui/react';
-import Button from './components/button';
-import breakpoints from './foundations/breakpoints';
-import typography from './foundations/typography';
-import colors from './foundations/colors';
-import radii from './foundations/radii';
-import spacing from './foundations/spacing';
-import Checkbox from './components/checkbox';
-import Input from './components/input';
-import global from './foundations/global';
-import FormLabel from './components/form-label';
-import Form from './components/form';
-import FormError from './components/form-error';
-import Textarea from './components/text-area';
-
-/**
- * See Chakra default theme for shape of theme object:
- * https://github.com/chakra-ui/chakra-ui/tree/main/packages/theme
- */
-const theme = extendTheme({
-  styles: { global },
-  breakpoints,
-  radii,
-  colors,
-  ...typography,
-  space: spacing,
-  /**
-   * Chakra documentation on component styles:
-   * https://chakra-ui.com/docs/theming/component-style
-   */
-  components: {
-    Button,
-    Checkbox,
-    Input,
-    FormLabel,
-    Form,
-    FormError,
-    Textarea,
-  },
-});
-
-export default theme;

package/src/ui/nypl-base-theme/types.ts

@@ -1 +0,0 @@
-export type Dict<T = any> = Record<string, T>;

package/src/ui/theme/components/button.ts

@@ -1,85 +0,0 @@
-import { GetColor } from '../../../types';
-
-const getButtonStyle = (getColor: GetColor) => ({
-  // style object for base or default style
-  baseStyle: {
-    borderRadius: 'none',
-  },
-  // styles for different sizes ("sm", "md", "lg")
-  sizes: {},
-  // styles for different visual variants ("outline", "solid")
-  variants: {
-    solid: variantSolid(getColor),
-    toggle: variantToggle(getColor),
-  },
-  // default values for `size`, `variant`, `colorScheme`
-  defaultProps: {
-    size: 'sm',
-    variant: 'solid',
-  },
-});
-
-/* Color Schemes:
- ** Light, Sepia, Dark
- * States:
- ** Normal
- ** Selected
- ** Disabled
- ** Hovered
- */
-const variantSolid = (getColor: GetColor) => (props: any) => {
-  const bgColor = getColor('ui.white', 'ui.black', 'ui.sepia');
-  const color = getColor('gray.800', 'ui.white', 'gray.800');
-
-  const _focus = { bgColor, color };
-  const _hover = { bgColor, color, _disabled: { bgColor } };
-  const _active = { bgColor, color };
-  const _checked = { bgColor, color };
-  const _disabled = { bgColor };
-
-  return {
-    border: '1px solid',
-    borderColor: 'gray.100',
-    transition: 'none',
-    fontSize: 0,
-    letterSpacing: 1,
-    textTransform: 'uppercase',
-    maxWidth: '100%',
-    cursor: 'pointer',
-    bgColor,
-    color,
-    _focus,
-    _hover,
-    _active,
-    _checked,
-    _disabled,
-  };
-};
-
-const variantToggle = (getColor: GetColor) => (props: any) => {
-  const bgColor = getColor('ui.white', 'gray.800', 'ui.white');
-  const color = getColor('gray.800', 'ui.white', 'gray.800');
-  return {
-    ...variantSolid(getColor)(props),
-    bgColor,
-    color,
-    px: 8,
-    fontWeight: 'medium',
-    fontSize: -2,
-    _focus: {
-      bgColor,
-    },
-    _hover: {
-      bgColor,
-    },
-    _active: {
-      bgColor,
-    },
-    _checked: {
-      color: 'ui.white',
-      bgColor: 'green.700',
-    },
-  };
-};
-
-export default getButtonStyle;

package/src/ui/theme/components/text.ts

@@ -1,24 +0,0 @@
-const TextStyle = {
-  // style object for base or default style
-  baseStyle: {},
-  // styles for different sizes ("sm", "md", "lg")
-  sizes: {},
-  // styles for different visual variants ("outline", "solid")
-  variants: {
-    headerNav: variantHeaderNav,
-  },
-  // default values for `size`, `variant`, `colorScheme`
-  defaultProps: {},
-};
-
-function variantHeaderNav() {
-  return {
-    pl: 2,
-    my: 0,
-    letterSpacing: 1,
-    fontSize: 0,
-    display: { sm: 'none', md: 'none', lg: 'inline-block' },
-  };
-}
-
-export default TextStyle;

package/src/ui/theme/foundations/colors.ts

@@ -1,10 +0,0 @@
-import { Colors } from '@chakra-ui/react';
-
-const colors: Colors = {
-  transparent: 'transparent',
-  ui: {
-    sepia: '#F9F4E9',
-  },
-};
-
-export default colors;

package/src/ui/theme/index.ts

@@ -1,34 +0,0 @@
-import { extendTheme } from '@chakra-ui/react';
-import Text from './components/text';
-import colors from './foundations/colors';
-import nyplTheme from '../nypl-base-theme';
-import { ColorMode } from '../../types';
-import { getColor } from '../../utils/getColor';
-import getButtonStyle from './components/button';
-
-/**
- * See Chakra default theme for shape of theme object:
- * https://github.com/chakra-ui/chakra-ui/tree/main/packages/theme
- *
- * Making this a function because we need to adjust the theme based
- * on the colorMode that's being passed in.
- *
- * Returns the chakra theme object with an additional property `currentColorMode`
- */
-export function getTheme(colorMode: ColorMode) {
-  return extendTheme(
-    {
-      colors,
-      /**
-       * Chakra documentation on component styles:
-       * https://chakra-ui.com/docs/theming/component-style
-       */
-      components: {
-        Button: getButtonStyle(getColor(colorMode)),
-        Text,
-      },
-      currentColorMode: colorMode,
-    },
-    nyplTheme
-  );
-}

package/src/ui/theme/types.ts

@@ -1 +0,0 @@
-export type Dict<T = any> = Record<string, T>;

package/src/useWebReader.tsx

@@ -1,105 +0,0 @@
-import React from 'react';
-import { fetchJson } from './utils/fetch';
-import HtmlReaderContent from './HtmlReader/HtmlReaderContent';
-import usePdfReader from './PdfReader';
-import useHtmlReader from './HtmlReader';
-import {
-  ActiveReader,
-  UseWebReaderArguments,
-  HTMLActiveReader,
-  LoadingReader,
-  PDFActiveReader,
-  WebpubManifest,
-} from './types';
-import {
-  AxisNowEpubConformsTo,
-  WebpubPdfConformsTo,
-  ConformsTo,
-} from './WebpubManifestTypes/ConformsTo';
-
-function getReaderType(conformsTo: ConformsTo | null | undefined) {
-  switch (conformsTo) {
-    case AxisNowEpubConformsTo:
-      return 'HTML';
-    case WebpubPdfConformsTo:
-      return 'PDF';
-    case undefined:
-      // the manifest didn't indicate any conformsTo,
-      // so return our default
-      return 'HTML';
-    case null:
-      // the manifest is still loading, return undefined
-      return undefined;
-  }
-}
-
-/**
- * The React hook that exposes the main API into the reader. It
- * will determine the type of the webpub, and then use the correct reader
- * for that type.
- */
-export default function useWebReader(
-  args: UseWebReaderArguments
-): HTMLActiveReader | PDFActiveReader | LoadingReader {
-  const { webpubManifestUrl, getContent, proxyUrl } = args;
-  const [manifest, setManifest] = React.useState<WebpubManifest | null>(null);
-  const readerType = getReaderType(
-    manifest ? manifest.metadata.conformsTo : null
-  );
-  /**
-   * Our HTML reader and PDf Reader. Note that we cannot conditionally
-   * call a React hook, so we must _always_ call the hook, but allow for the
-   * case where we call the hook with `undefined`, which tells the hook that
-   * that format is inactive, and it will in turn return the InactiveState.
-   */
-  const htmlReader = useHtmlReader(
-    readerType === 'HTML' && manifest
-      ? {
-          webpubManifestUrl,
-          manifest,
-          getContent,
-        }
-      : undefined
-  );
-
-  const pdfReader = usePdfReader(
-    readerType === 'PDF' && manifest
-      ? {
-          webpubManifestUrl,
-          manifest,
-          proxyUrl,
-        }
-      : undefined
-  );
-
-  // fetch the manifest and set it in state
-  React.useEffect(() => {
-    fetchJson<WebpubManifest>(webpubManifestUrl).then(setManifest);
-  }, [webpubManifestUrl]);
-
-  // first if we are still fetching the manifest, return loading
-  if (manifest === null) {
-    return {
-      isLoading: true,
-      content: <HtmlReaderContent />,
-      manifest: null,
-      navigator: null,
-      state: null,
-      type: null,
-    };
-  }
-
-  /**
-   * Return whichever reader is not Inactive (not `null`)
-   */
-  if (htmlReader) {
-    return htmlReader;
-  }
-  if (pdfReader) {
-    return pdfReader;
-  }
-
-  throw new Error(
-    `No reader was initialized for the webpub with url: ${webpubManifestUrl} and type: ${readerType}.`
-  );
-}

package/src/utils/decryptAxisNow.ts

@@ -1,45 +0,0 @@
-// import Decryptor from '@nypl-simplified-packages/axisnow-access-control-web';
-// import { GetContent } from '../types';
-
-// /**
-//  * Utilities to decrypt AxisNow documents. Eventually this should be passed in
-//  * by the consuming application - Open eBooks in this case. For testing though,
-//  * we have them here for now.
-//  */
-
-// // hardcoded with a specific isbn and vault id for now.
-// export async function initDecryptor(): Promise<Decryptor> {
-//   const params = {
-//     book_vault_uuid: 'F58373FB-6574-45E6-B50E-6D73523AFD01',
-//     isbn: '9781467784870',
-//   };
-//   return await Decryptor.createDecryptor(params);
-// }
-
-// /*
-// Convert a string into an ArrayBuffer
-// from https://developers.google.com/web/updates/2012/06/How-to-convert-ArrayBuffer-to-and-from-String
-// */
-// function ab2str(buf: Iterable<number>) {
-//   const decoder = new TextDecoder('utf-8');
-//   return decoder.decode(new Uint8Array(buf));
-// }
-
-// // a function that builds a getContent function with a decryptor.
-// export const makeGetContent = (decryptor: Decryptor): GetContent => async (
-//   href: string
-// ): Promise<string> => {
-//   // the href is the readingOrder href, which we use to know which
-//   // resource we need to fetch and decrypt
-//   const result = await fetch(href);
-//   const blob = await result.blob();
-//   const blobUrl = URL.createObjectURL(blob);
-//   const decrypted = await decryptor.decryptUrl(blobUrl);
-//   URL.revokeObjectURL(blobUrl);
-//   const html = new DOMParser().parseFromString(
-//     ab2str(decrypted),
-//     'application/xhtml+xml'
-//   ).documentElement;
-//   console.log(html);
-//   return ab2str(decrypted);
-// };

package/src/utils/fetch.ts

@@ -1,13 +0,0 @@
-/**
- * Utilities for fetching specific types
- */
-
-export async function fetchJson<ExpectedResponse extends any = any>(
-  url: string
-) {
-  const response = await fetch(url);
-  if (!response.ok) {
-    throw new Error('Response not Ok for URL: ' + url);
-  }
-  return (await response.json()) as ExpectedResponse;
-}

package/src/utils/getColor.ts

@@ -1,14 +0,0 @@
-import { ColorMode } from '../types';
-
-export function getColor(colorMode: ColorMode) {
-  return (light: string, dark: string, sepia: string): string => {
-    switch (colorMode) {
-      case 'day':
-        return light;
-      case 'night':
-        return dark;
-      case 'sepia':
-        return sepia;
-    }
-  };
-}

package/src/utils/toggleFullScreen.ts

@@ -1,71 +0,0 @@
-// Methods for Firefox / Safari / Edge
-// We have to cast these types so typescript doesn't complain
-interface FullSpecDocument extends Document {
-  mozFullScreenElement: Element | null;
-  webkitFullscreenElement: Element | null;
-  msFullscreenElement: Element | null;
-  webkitFullscreenEnabled: boolean;
-  mozFullScreenEnabled: boolean;
-  msFullscreenEnabled: boolean;
-  mozCancelFullScreen: () => Promise<void>;
-  webkitExitFullscreen: () => Promise<void>;
-  msExitFullscreen: () => Promise<void>;
-}
-
-interface FullSpecElement extends HTMLElement {
-  mozRequestFullScreen: (options?: FullscreenOptions) => Promise<void>;
-  webkitRequestFullscreen: (options?: FullscreenOptions) => Promise<void>;
-  msRequestFullscreen: (options?: FullscreenOptions) => Promise<void>;
-}
-
-const doc = document as FullSpecDocument;
-const docElm = document.documentElement as FullSpecElement;
-
-// For Safari IOS: Only available on iPad, not on iPhone.
-// https://developer.mozilla.org/en-US/docs/Web/API/Document/fullscreenEnabled#browser_compatibility
-export const fullScreenEnabled =
-  doc.fullscreenEnabled ||
-  doc.webkitFullscreenEnabled ||
-  doc.mozFullScreenEnabled ||
-  doc.msFullscreenEnabled;
-
-const enterFullScreen = () => {
-  const fullScreenFunc =
-    docElm.requestFullscreen ||
-    docElm.mozRequestFullScreen ||
-    docElm.webkitRequestFullscreen ||
-    docElm.msRequestFullscreen;
-
-  if (typeof fullScreenFunc === 'function') {
-    fullScreenFunc.call(docElm);
-  }
-};
-
-const exitFullScreen = () => {
-  const exitFunc =
-    doc.exitFullscreen ||
-    doc.mozCancelFullScreen ||
-    doc.webkitExitFullscreen ||
-    doc.msExitFullscreen;
-
-  if (typeof exitFunc === 'function') {
-    exitFunc.call(doc);
-  }
-};
-
-/**
- * Toggles fullscreen mode on the <html> element.
- */
-export function toggleFullScreen() {
-  const isFullscreen =
-    doc.fullscreenElement ||
-    doc.mozFullScreenElement ||
-    doc.webkitFullscreenElement ||
-    doc.msFullscreenElement;
-
-  if (isFullscreen) {
-    exitFullScreen();
-  } else {
-    enterFullScreen();
-  }
-}