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

package/src/ui/ToggleGroup.tsx

@@ -1,41 +0,0 @@
-import React from 'react';
-import { Flex, useRadioGroup, UseRadioGroupProps } from '@chakra-ui/react';
-
-type ToggleGroupProps = Omit<UseRadioGroupProps, 'value' | 'defaultValue'> & {
-  value: string;
-  label: string;
-};
-
-const ToggleGroup: React.FC<ToggleGroupProps> = ({
-  value,
-  label,
-  name,
-  children,
-  onChange,
-}) => {
-  const { getRootProps, getRadioProps } = useRadioGroup({
-    name,
-    onChange,
-    value,
-  });
-
-  const group = getRootProps();
-
-  return (
-    <Flex {...group} aria-label={label} flex="1 0 auto" flexWrap="wrap" my={2}>
-      {React.Children.map(children, (element) => {
-        try {
-          const value = (element as any).props.value;
-          const radio = getRadioProps({ value });
-          return React.cloneElement(element as any, radio);
-        } catch (e) {
-          throw new Error(
-            'ToggleGroup expects ToggleButton children with `value` props.'
-          );
-        }
-      })}
-    </Flex>
-  );
-};
-
-export default ToggleGroup;

package/src/ui/constants.ts

@@ -1,2 +0,0 @@
-// we have to set a constant height to make this work with R2D2BC
-export const HEADER_HEIGHT = 48;

package/src/ui/hooks/useColorModeValue.tsx

@@ -1,19 +0,0 @@
-import { useTheme, Theme } from '@emotion/react';
-import { ColorMode } from '../../types';
-import { getColor } from '../../utils/getColor';
-
-export interface ColorModeTheme extends Theme {
-  currentColorMode: ColorMode;
-}
-
-const useColorModeValue = (
-  light: string,
-  dark: string,
-  sepia: string
-): string => {
-  const { currentColorMode } = useTheme() as ColorModeTheme;
-  const color = getColor(currentColorMode)(light, dark, sepia);
-  return color;
-};
-
-export default useColorModeValue;

package/src/ui/hooks/useContainerWidth.ts

@@ -1,24 +0,0 @@
-import { useCallback, useState } from 'react';
-import useEventListener from './useEventListener';
-
-/**
- * Returns the interior width of the container in pixels.
- *
- * @returns {number} Width of the container in pixels
- */
-export default function useContainerWidth(containerId: string): number {
-  const [containerWidth, setContainerWidth] = useState(window.innerWidth);
-
-  const getContainerWidth = useCallback(() => {
-    const el = document.getElementById(containerId);
-    if (!el) {
-      setContainerWidth(window.innerWidth);
-      return;
-    }
-    setContainerWidth(el.clientWidth);
-  }, [containerId]);
-
-  useEventListener(window, 'resize', getContainerWidth);
-
-  return containerWidth;
-}

package/src/ui/hooks/useEventListener.ts

@@ -1,26 +0,0 @@
-import { useEffect } from 'react';
-
-/**
- * Adds event listener to a given element.
- *
- * @param {HTMLElement} element Element to attach the listener to
- * @param {string} type Event type
- * @param {Function} listener Event listener
- */
-export default function useEventListener(
-  element: HTMLElement | Window,
-  type: string,
-  listener: () => void
-) {
-  useEffect(() => {
-    if (!element) {
-      return undefined;
-    }
-
-    element.addEventListener(type, listener);
-
-    return () => {
-      element.removeEventListener(type, listener);
-    };
-  }, [element, type, listener]);
-}

package/src/ui/manager.tsx

@@ -1,73 +0,0 @@
-import { ThemeProvider, Flex } from '@chakra-ui/react';
-import {
-  Icon,
-  IconNames,
-  IconRotationTypes,
-} from '@nypl/design-system-react-components';
-import * as React from 'react';
-import { ReaderReturn } from '../types';
-import Header from './Header';
-import useColorModeValue from './hooks/useColorModeValue';
-import PageButton from './PageButton';
-import { getTheme } from './theme';
-
-/**
- * The default Manager UI. This will be broken into individual components
- * that can be imported and used separately or in a customized setup.
- * It takes the return value of useWebReader as props
- */
-const ManagerUI: React.FC<ReaderReturn> = (props) => {
-  return (
-    <ThemeProvider theme={getTheme(props.state?.colorMode ?? 'day')}>
-      <WebReaderContent {...props} />
-    </ThemeProvider>
-  );
-};
-
-const WebReaderContent: React.FC<ReaderReturn> = ({ children, ...props }) => {
-  const bgColor = useColorModeValue('ui.white', 'ui.black', 'ui.sepia');
-  return (
-    <Flex flexDir="column" minHeight="100vh" w="100vw">
-      {!props.isLoading && <Header {...props} />}
-      <PageButton
-        onClick={props.navigator?.goBackward}
-        left={0}
-        pr={2}
-        aria-label="Previous Page"
-      >
-        <Icon
-          decorative
-          name={IconNames.arrow}
-          modifiers={['small']}
-          iconRotation={IconRotationTypes.rotate90}
-        />
-      </PageButton>
-      <Flex
-        width="100vw"
-        bg={bgColor}
-        // accounting for the prev/next buttons
-        px={{ sm: 10, md: '5vw' }}
-        flexDir="column"
-        alignItems="stretch"
-        flex="1 1 100%"
-      >
-        {children}
-      </Flex>
-      <PageButton
-        onClick={props.navigator?.goForward}
-        right={0}
-        pl={2}
-        aria-label="Next Page"
-      >
-        <Icon
-          decorative
-          name={IconNames.arrow}
-          modifiers={['small']}
-          iconRotation={IconRotationTypes.rotate270}
-        />
-      </PageButton>
-    </Flex>
-  );
-};
-
-export default ManagerUI;

package/src/ui/nypl-base-theme/components/button.ts

@@ -1,117 +0,0 @@
-import { Dict } from '../types';
-
-const sizes = {
-  lg: {
-    h: 12,
-    minW: 12,
-    fontSize: 'lg',
-    px: 6,
-  },
-  md: {
-    h: '38px',
-    minW: 10,
-    fontSize: 'sm',
-    px: 2.5,
-  },
-  sm: {
-    h: 8,
-    minW: 8,
-    fontSize: 'sm',
-    px: 3,
-  },
-  xs: {
-    h: 6,
-    minW: 6,
-    fontSize: 'xs',
-    px: 2,
-  },
-};
-
-const ButtonStyle = {
-  // style object for base or default style
-  baseStyle: {
-    borderRadius: 'sm',
-    fontWeight: 'light',
-  },
-  // styles for different sizes ("sm", "md", "lg")
-  sizes,
-  // styles for different visual variants ("outline", "solid")
-  variants: {
-    pill: {
-      border: '1px solid',
-      borderColor: 'gray.200',
-      borderRadius: '2xl',
-      height: 6,
-      px: 6,
-      fontSize: '-1',
-      my: 'auto',
-    },
-    solid: variantSolid,
-    secondary: {
-      border: '1px solid',
-      borderColor: 'ui.gray.light-cool',
-      _hover: {
-        bg: 'ui.gray.x-light-cool',
-        borderColor: 'ui.gray.medium',
-      },
-    },
-  },
-  // default values for `size`, `variant`, `colorScheme`
-  defaultProps: {
-    size: 'md',
-    variant: 'solid',
-    colorScheme: 'gray',
-  },
-};
-
-function solidColors(colorScheme: string) {
-  switch (colorScheme) {
-    case 'gray':
-      return {
-        bg: 'gray.100',
-        _hover: {
-          bg: 'gray.200',
-          _disabled: {
-            bg: 'gray.100',
-          },
-        },
-        _active: { bg: 'gray.300' },
-      };
-
-    case 'red':
-      return {
-        bg: 'brand.nypl-red',
-        color: 'white',
-        hoverBg: 'red.500',
-        activeBg: 'red.600',
-      };
-
-    default:
-      return {
-        bg: `${colorScheme}.500`,
-        color: 'white',
-        hoverBg: `${colorScheme}.600`,
-        activeBg: `${colorScheme}.700`,
-      };
-  }
-}
-
-function variantSolid(props: Dict) {
-  const colors = solidColors(props.colorScheme);
-
-  return {
-    ...colors,
-    _hover: {
-      _disabled: {
-        bg: 'ui.gray.light-cool',
-        color: 'ui.gray.dark',
-      },
-    },
-    _disabled: {
-      bg: 'ui.gray.light-cool',
-      color: 'ui.gray.dark',
-    },
-  };
-}
-
-export default ButtonStyle;

package/src/ui/nypl-base-theme/components/checkbox.ts

@@ -1,45 +0,0 @@
-const baseStyleLabel = {
-  userSelect: 'none',
-  fontWeight: 'light',
-  _disabled: { color: 'ui.gray.x-dark', opacity: 1 },
-};
-
-const Checkbox = {
-  // style object for base or default style
-  baseStyle: {
-    control: {
-      borderColor: 'ui.gray.dark',
-      _hover: {
-        bg: 'white',
-        _disabled: {
-          bg: 'ui.gray.x-light-cool',
-        },
-      },
-      _checked: {
-        bg: 'white',
-        color: 'gray.800',
-        borderColor: 'ui.gray.dark',
-        _hover: {
-          bg: 'white',
-          borderColor: 'ui.gray.x-dark',
-        },
-      },
-      _disabled: {
-        bg: 'ui.gray.x-light-cool',
-        borderColor: 'ui.gray.medium',
-      },
-    },
-    label: baseStyleLabel,
-  },
-  // styles for different sizes ("sm", "md", "lg")
-  sizes: {},
-  // styles for different visual variants ("outline", "solid")
-  variants: {},
-  // default values for `size`, `variant`, `colorScheme`
-  defaultProps: {
-    size: 'md',
-    colorScheme: 'gray',
-  },
-};
-
-export default Checkbox;

package/src/ui/nypl-base-theme/components/form-error.ts

@@ -1,15 +0,0 @@
-const baseStyle = {
-  text: {
-    color: 'ui.error',
-    mt: 2,
-    fontSize: 'xs',
-  },
-  icon: {
-    marginEnd: '0.5em',
-    color: 'ui.error',
-  },
-};
-
-export default {
-  baseStyle,
-};

package/src/ui/nypl-base-theme/components/form-label.ts

@@ -1,15 +0,0 @@
-const baseStyle = {
-  fontSize: 'sm',
-  marginEnd: 0,
-  mb: 2,
-  fontWeight: 'medium',
-  transition: 'all 0.2s',
-  opacity: 1,
-  _disabled: {
-    opacity: 1,
-  },
-};
-
-export default {
-  baseStyle,
-};

package/src/ui/nypl-base-theme/components/form.ts

@@ -1,16 +0,0 @@
-const baseStyle = {
-  requiredIndicator: {
-    marginStart: 1,
-    color: 'red.500',
-  },
-  helperText: {
-    mt: 2,
-    color: 'black',
-    lineHeight: 'normal',
-    fontSize: 'xs',
-  },
-};
-
-export default {
-  baseStyle,
-};

package/src/ui/nypl-base-theme/components/input.ts

@@ -1,101 +0,0 @@
-const size = {
-  lg: {
-    fontSize: 'lg',
-    px: 4,
-    h: 12,
-    borderRadius: 'none',
-  },
-  md: {
-    fontSize: 'sm',
-    px: 4,
-    h: 9,
-    borderRadius: 'none',
-  },
-  sm: {
-    fontSize: 'sm',
-    px: 3,
-    h: 8,
-    borderRadius: 'none',
-  },
-  xs: {
-    fontSize: 'xs',
-    px: 2,
-    h: 6,
-    borderRadius: 'none',
-  },
-};
-
-const sizes = {
-  lg: {
-    field: size.lg,
-    addon: size.lg,
-  },
-  md: {
-    field: size.md,
-    addon: size.md,
-  },
-  sm: {
-    field: size.sm,
-    addon: size.sm,
-  },
-  xs: {
-    field: size.xs,
-    addon: size.xs,
-  },
-};
-
-const Input = {
-  // style object for base or default style
-  baseStyle: {
-    field: {
-      borderRadius: 'none',
-      fontSize: 'sm',
-      _focus: {
-        borderColor: 'ui.link.primary',
-        _hover: {
-          borderColor: 'ui.link.primary',
-        },
-      },
-      _placeholder: {
-        fontStyle: 'italic',
-        color: 'ui.gray.dark',
-      },
-      _invalid: {
-        borderColor: 'ui.error',
-        _placeholder: {
-          color: 'ui.error',
-        },
-        _hover: {
-          borderColor: 'ui.error',
-        },
-      },
-    },
-  },
-  // styles for different sizes ("sm", "md", "lg")
-  sizes,
-  // styles for different visual variants ("outline", "solid")
-  variants: {
-    outline: {
-      field: {
-        _disabled: {
-          bg: 'ui.gray.xx-light-cool',
-        },
-        _focus: {
-          boxShadow: 'none',
-          _hover: {
-            borderColor: 'ui.link.primary',
-          },
-        },
-        _invalid: {
-          boxShadow: 'none',
-        },
-      },
-    },
-  },
-  // default values for `size`, `variant`, `colorScheme`
-  defaultProps: {
-    size: 'md',
-  },
-};
-
-export default Input;

package/src/ui/nypl-base-theme/components/text-area.ts

@@ -1,17 +0,0 @@
-import Input from './input';
-
-const sizes = {
-  xs: Input.sizes.xs.field,
-  sm: Input.sizes.sm.field,
-  md: Input.sizes.md.field,
-  lg: Input.sizes.lg.field,
-};
-
-export default {
-  baseStyle: {
-    _disabled: {
-      bg: 'ui.gray.x-light-cool',
-    },
-  },
-  sizes,
-};

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

@@ -1,10 +0,0 @@
-// theme.js
-import { createBreakpoints } from '@chakra-ui/theme-tools';
-
-export default createBreakpoints({
-  sm: '20em', // 320px
-  md: '38em', // 600px
-  lg: '60em', // 960px
-  xl: '80em', // 1280px
-  '2xl': '96em',
-});

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

@@ -1,136 +0,0 @@
-import { Colors } from '@chakra-ui/react';
-
-const colors: Colors = {
-  transparent: 'transparent',
-
-  // ui fills
-  ui: {
-    black: '#000',
-    white: '#fff',
-    focus: '#4181F1',
-    link: {
-      primary: '#0576D3',
-      secondary: '#004B98',
-    },
-    success: {
-      primary: '#077719',
-      secondary: '#095212',
-    },
-    warning: {
-      primary: '#F0974E',
-      secondary: '#EC7B1F',
-    },
-    status: {
-      primary: '#F9E08E',
-      secondary: '#FBE7E1',
-    },
-    error: '#97272C',
-    disabled: {
-      primary: '#E0E0E0',
-      secondary: '#FAFAFA',
-    },
-    test: '#FF6347',
-    gray: {
-      'x-dark': '#424242',
-      dark: '#616161',
-      medium: '#BDBDBD',
-      'light-cool': '#E0E0E0',
-      'light-warm': '#EFEDEB',
-      'x-light-cool': '#F5F5F5',
-      'x-light-warm': '#F8F8F7',
-      'xx-light-cool': '#FAFAFA',
-    },
-  },
-
-  // brand fills. Only primary and secondary filled in for now.
-  brand: {
-    primary: '#C60917',
-    secondary: '#760000',
-    'nypl-red': '#D0343A',
-  },
-
-  /**
-   * The following color scales are useful for color edge cases
-   * where a distinct named ui or brand color doesn't quite work.
-   */
-  // based on ui/gray/medium
-  gray: {
-    '50': '#F2F2F2',
-    '100': '#DBDBDB',
-    '200': '#C4C4C4',
-    '300': '#ADADAD',
-    '400': '#969696',
-    '500': '#808080',
-    '600': '#666666',
-    '700': '#4D4D4D',
-    '800': '#333333',
-    '900': '#1A1A1A',
-  },
-  // based on NYPL red
-  red: {
-    50: '#ffe7e6',
-    100: '#f6c2bf',
-    200: '#e99796',
-    300: '#de6d6e',
-    400: '#d4454a',
-    500: '#ba2f2b',
-    600: '#922b21',
-    700: '#692216',
-    800: '#41150a',
-    900: '#1d0a01',
-  },
-  // based on ui/warning/secondary
-  orange: {
-    '50': '#FDF1E7',
-    '100': '#F9D8BD',
-    '200': '#F6BF93',
-    '300': '#F2A669',
-    '400': '#EF8D3E',
-    '500': '#EB7414',
-    '600': '#BC5D10',
-    '700': '#8D460C',
-    '800': '#5E2F08',
-    '900': '#2F1704',
-  },
-  // based on ui/status/primary
-  yellow: {
-    '50': '#FEF8E7',
-    '100': '#FBECBB',
-    '200': '#F9E090',
-    '300': '#F7D464',
-    '400': '#F4C938',
-    '500': '#F2BD0D',
-    '600': '#C2970A',
-    '700': '#917108',
-    '800': '#614B05',
-    '900': '#302603',
-  },
-  // based on ui/success/primary
-  green: {
-    '50': '#E7FEEB',
-    '100': '#BCFBC6',
-    '200': '#90F8A1',
-    '300': '#65F67C',
-    '400': '#3AF357',
-    '500': '#0EF133',
-    '600': '#0BC128',
-    '700': '#08911E',
-    '800': '#066014',
-    '900': '#03300A',
-  },
-  // based on NYPL blue
-  blue: {
-    50: '#dbefff',
-    100: '#add2ff',
-    200: '#7cb8ff',
-    300: '#4aa2ff',
-    400: '#1a8fff',
-    500: '#007ee6',
-    600: '#0056b4',
-    700: '#003582',
-    800: '#001a51',
-    900: '#000621',
-  },
-};
-
-export default colors;

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

@@ -1,16 +0,0 @@
-const global = {
-  // styles for the `body`
-  body: {
-    bg: 'white',
-    color: 'black',
-  },
-  // styles for the `a`
-  a: {
-    color: 'ui.link.primary',
-    _hover: {
-      textDecoration: 'underline',
-    },
-  },
-};
-
-export default global;

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

@@ -1,13 +0,0 @@
-const radii = {
-  none: '0',
-  sm: '0.125rem',
-  base: '0.25rem',
-  md: '0.375rem',
-  lg: '0.5rem',
-  xl: '0.75rem',
-  '2xl': '1rem',
-  '3xl': '1.5rem',
-  full: '9999px',
-};
-
-export default radii;