@cu-mkp/editioncrafter 1.1.0 → 1.2.0-beta.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cu-mkp/editioncrafter",
   "type": "module",
-  "version": "1.1.0",
+  "version": "1.2.0-beta.1",
   "private": false,
   "description": "A simple digital critical edition publication tool",
   "license": "MIT",
@@ -37,7 +37,7 @@
     "html-react-parser": "^4.2.2",
     "openseadragon": "^4.1.0",
     "prop-types": "^15.5.10",
-    "react-icons": "^4.8.0",
+    "react-icons": "^4.12.0",
     "react-infinite-scroller": "^1.1.3",
     "react-markdown": "^8.0.7",
     "react-redux": "^8.0.5",
@@ -45,7 +45,8 @@
     "react-router-dom": "^6.11.0",
     "react-scroll": "^1.7.10",
     "redux": "^4.2.1",
-    "redux-saga": "^1.2.2"
+    "redux-saga": "^1.2.2",
+    "sql.js": "^1.12.0"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^3.8.0",
@@ -73,6 +74,8 @@
     "glob": "^7.1.4",
     "http-server": "^14.1.0",
     "jsdom": "^19.0.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "react-refresh": "^0.14.0",
     "redux-mock-store": "^1.5.1",
     "redux-saga-test-plan": "^4.0.6",

package/dist/es/src/component/Navigation.js

@@ -1,402 +0,0 @@
-import MenuItem from '@material-ui/core/MenuItem'
-import Select from '@material-ui/core/Select'
-import React, { useRef, useState } from 'react'
-import {
-  FaArrowCircleLeft,
-  FaArrowCircleRight,
-} from 'react-icons/fa'
-import { connect } from 'react-redux'
-import useIsWidthUp from '../hooks/useIsWidthUp'
-import DocumentHelper from '../model/DocumentHelper'
-import AlphabetLinks from './AlphabetLinks'
-import HelpPopper from './HelpPopper'
-import JumpToFolio from './JumpToFolio'
-
-const initialPopoverObj = {
-  anchorEl: null,
-}
-
-function Navigation(props) {
-  const [popover, setPopover] = useState({ ...initialPopoverObj })
-  const [openHelp, setOpenHelp] = useState(false)
-  const [openHelpNarrow, setOpenHelpNarrow] = useState(false)
-
-  const helpRef = useRef(null)
-  const helpRefNarrow = useRef(null)
-
-  const onJumpBoxBlur = (event) => {
-    setPopover({ anchorEl: null })
-  }
-
-  const changeType = (event) => {
-    if (event.target.value === undefined || event.target.value === 0)
-      return
-    props.documentViewActions.changeTranscriptionType(
-      props.side,
-      event.target.value,
-    )
-  }
-
-  const onGoToGrid = (event) => {
-    props.documentViewActions.changeTranscriptionType(props.side, 'g')
-  }
-
-  const toggleHelp = (event) => {
-    setOpenHelp(!openHelp)
-  }
-
-  const toggleHelpNarrow = (event) => {
-    setOpenHelpNarrow(!openHelpNarrow)
-  }
-
-  const toggleBookmode = (event) => {
-    if (!props.documentView.bookMode) {
-      props.documentViewActions.changeCurrentFolio(
-        props.documentView.left.iiifShortID,
-        'left',
-        props.documentView.left.transcriptionType,
-      )
-
-      props.documentViewActions.changeCurrentFolio(
-        props.documentView.left.nextFolioShortID,
-        'right',
-        props.documentView.left.transcriptionType,
-      )
-    }
-
-    props.documentViewActions.setBookMode(
-      props.documentView.left.iiifShortID,
-      !props.documentView.bookMode,
-    )
-  }
-
-  const toggleXMLMode = (event) => {
-    props.documentViewActions.setXMLMode(
-      props.side,
-      !props.documentView[props.side].isXMLMode,
-    )
-  }
-
-  const toggleLockmode = (event) => {
-    if (props.documentView.bookMode) {
-      toggleBookmode()
-      return
-    }
-
-    // If we are transitioning from unlocked to locked, sync up the panes
-    if (props.documentView.linkedMode === false) {
-      if (props.side === 'left') {
-        props.documentViewActions.changeCurrentFolio(
-          props.documentView.left.iiifShortID,
-          'right',
-          props.documentView.right.transcriptionType,
-        )
-      }
-      else {
-        props.documentViewActions.changeCurrentFolio(
-          props.documentView.right.iiifShortID,
-          'left',
-          props.documentView.left.transcriptionType,
-        )
-      }
-    }
-
-    // Set lock
-    props.documentViewActions.setLinkedMode(
-      !props.documentView.linkedMode,
-    )
-  }
-
-  const changeCurrentFolio = (event) => {
-    const {
-      documentViewActions,
-      documentView,
-      side,
-    } = props
-
-    if (typeof event.currentTarget.dataset.id === 'undefined' || event.currentTarget.dataset.id.length === 0) {
-      return
-    }
-    const folioID = event.currentTarget.dataset.id
-    documentViewActions.changeCurrentFolio(
-      folioID,
-      side,
-      documentView[side].transcriptionType,
-    )
-  }
-
-  const revealJumpBox = (event) => {
-    setPopover({
-      anchorEl: event.currentTarget,
-    })
-  }
-
-  const {
-    side,
-    document,
-    documentView,
-    documentViewActions,
-    onFilterChange,
-  } = props
-
-  const isWidthUp = useIsWidthUp('md')
-
-  if (!documentView) {
-    return (
-      <div>
-        Unknown Transcription Type
-      </div>
-    )
-  }
-
-  const getSelectContainerStyle = () => {
-    if (isWidthUp) {
-      if (documentView[side].width < 500 && !document.variorum) {
-        return { display: 'none' }
-      }
-
-      return { display: 'flex' }
-    }
-
-    return null
-  }
-
-  const selectColorStyle = documentView[side].transcriptionType === 'f' ? { color: 'white' } : { color: 'black' }
-  const selectClass = documentView[side].transcriptionType === 'f' ? 'dark' : 'light'
-  const showButtonsStyle = documentView[side].transcriptionType === 'glossary' ? { visibility: 'hidden' } : { visibility: 'visible' }
-  const selectContainerStyle = { display: 'flex' } // what's the reason we want this to be hidden sometimes?
-  let lockIconClass = (documentView.linkedMode) ? 'fa fa-lock' : 'fa fa-lock-open'
-  if (!documentView.bookMode) {
-    lockIconClass += ' active'
-  }
-  const imageViewActive = documentView[side].transcriptionType === 'f'
-  const bookIconClass = (documentView.bookMode) ? 'fa fa-book active' : 'fa fa-book'
-  const xmlIconClass = (documentView[side].isXMLMode) ? 'fa fa-code active' : 'fa fa-code'
-  const folioName = document.folioIndex[documentView[side].iiifShortID]?.name
-  const jumpToIconStyle = (imageViewActive) ? { color: 'white' } : { color: 'black' }
-  // this is messy but faster for the moment then figuring out why the sides dont behave the same
-  const helpMarginStyle = side === 'left' ? { marginRight: '55px' } : { marginRight: '15px' }
-
-  return (
-    <>
-      <div className="navigationComponent">
-        <div id="navigation-row" className="navigationRow">
-
-          { documentView[side].transcriptionType !== 'glossary' ? (
-
-            <div id="tool-bar-buttons" className="breadcrumbs" style={showButtonsStyle}>
-              <div style={{ display: 'flex', alignItems: 'baseline', gap: '4px' }}>
-                <span
-                  className="fas fa-th"
-                  style={{ cursor: documentView[side].transcriptionType !== 'g' ? 'pointer' : 'default', padding: '0 15px' }}
-                  title={documentView[side].transcriptionType !== 'g' && 'Return to Grid View'}
-                  onClick={documentView[side].transcriptionType !== 'g' && onGoToGrid}
-                />
-
-                <span
-                  title="Toggle coordination of views"
-                  onClick={toggleLockmode}
-                  className={lockIconClass}
-                />
-
-                <span
-                  title="Toggle book mode"
-                  onClick={toggleBookmode}
-                  className={bookIconClass}
-                />
-
-                <span
-                  title="Toggle XML mode"
-                  onClick={toggleXMLMode}
-                  style={{ paddingRight: '15px' }}
-                  className={imageViewActive ? 'invisible' : xmlIconClass}
-                />
-
-                {/* <span title="Toggle single column mode"  onClick={this.toggleColumns}
-                                                        className={columnIconClass}></span> */}
-
-                <span
-                  title="Go back"
-                  onClick={changeCurrentFolio}
-                  data-id={documentView[side].previousFolioShortID}
-                  className={(documentView[side].hasPrevious) ? 'arrow' : 'arrow disabled'}
-                >
-
-                  <FaArrowCircleLeft />
-
-                </span>
-
-                <span
-                  title="Go forward"
-                  onClick={changeCurrentFolio}
-                  data-id={documentView[side].nextFolioShortID}
-                  className={(documentView[side].hasNext) ? 'arrow' : 'arrow disabled'}
-                >
-
-                  <FaArrowCircleRight />
-                </span>
-              </div>
-                                                &nbsp;&nbsp;
-              <div title={`${props.documentName || document.documentName}/${folioName}`} style={{ display: 'flex', overflowX: 'hidden', justifyContent: 'flex-end' }}>
-                <span>{props.documentName || document.documentName}</span>
-                <span>{' / '}</span>
-                <div
-                  onClick={revealJumpBox}
-                  className="folioName"
-                  style={{ flexShrink: '0', minWidth: '40px' }}
-                >
-
-                  {folioName}
-
-                  <span style={jumpToIconStyle} className="fa fa-hand-point-right" />
-                </div>
-              </div>
-
-              <JumpToFolio
-                side={side}
-                anchorEl={popover.anchorEl}
-                submitHandler={documentViewActions.jumpToFolio}
-                blurHandler={onJumpBoxBlur}
-              />
-
-            </div>
-          )
-            : (<AlphabetLinks onFilterChange={onFilterChange} value={props.value} />)}
-
-          <div id="doc-type-help" style={selectContainerStyle} ref={helpRef}>
-            <Select
-              className={selectClass}
-              style={{ ...selectColorStyle, marginRight: 15, fontSize: 'max(16px, 1rem)' }}
-              value={documentView[side].transcriptionType}
-              id="doc-type"
-              onClick={changeType}
-            >
-              {Object.keys(props.document.folios.find(fol => (fol.id === props.documentView[props.side].iiifShortID)).annotationURLs).map(ttKey => (
-                <MenuItem value={ttKey} key={ttKey}>{props.document.variorum ? props.document.transcriptionTypes[props.document.folios.find(fol => (fol.id === props.documentView[props.side].iiifShortID)).doc_id][ttKey] : props.document.transcriptionTypes[ttKey]}</MenuItem>
-              ))}
-              <MenuItem value="f" key="f">
-                {DocumentHelper.transcriptionTypeLabels.f}
-              </MenuItem>
-              { props.glossary && (
-                <MenuItem value="glossary" key="glossary">
-                  {DocumentHelper.transcriptionTypeLabels.glossary}
-                </MenuItem>
-              ) }
-            </Select>
-            <span
-              title="Toggle folio help"
-              onClick={toggleHelp}
-              className="helpIcon"
-            >
-              <i className="fas fa-question-circle" />
-            </span>
-            <HelpPopper
-              marginStyle={helpMarginStyle}
-              anchorEl={helpRef.current}
-              open={openHelp}
-              onClose={toggleHelp}
-            />
-          </div>
-
-        </div>
-      </div>
-      <div className="navigationComponentNarrow">
-        <div id="navigation-row" className="navigationRowNarrow">
-
-          { documentView[side].transcriptionType !== 'glossary'
-            ? (
-
-                <div id="tool-bar-buttons" className="breadcrumbsNarrow" style={showButtonsStyle}>
-
-                  <span
-                    className="fas fa-th"
-                    style={{ cursor: documentView[side].transcriptionType !== 'g' ? 'pointer' : 'default', padding: '0 15px' }}
-                    title={documentView[side].transcriptionType !== 'g' && 'Return to Grid View'}
-                    onClick={documentView[side].transcriptionType !== 'g' && onGoToGrid}
-                  />
-                                                &nbsp;
-                  <span
-                    title="Toggle XML mode"
-                    onClick={toggleXMLMode}
-                    className={imageViewActive ? 'invisible' : xmlIconClass}
-                  />
-
-                  { imageViewActive && (
-                    <>
-                      <span
-                        title="Go back"
-                        onClick={changeCurrentFolio}
-                        data-id={documentView[side].previousFolioShortID}
-                        className={(documentView[side].hasPrevious) ? 'arrow' : 'arrow disabled'}
-                      >
-                        {' '}
-                        <FaArrowCircleLeft />
-                        {' '}
-
-                      </span>
-
-                      <span
-                        title="Go forward"
-                        onClick={changeCurrentFolio}
-                        data-id={documentView[side].nextFolioShortID}
-                        className={(documentView[side].hasNext) ? 'arrow' : 'arrow disabled'}
-                      >
-                        {' '}
-                        <FaArrowCircleRight />
-                      </span>
-                    </>
-                  )}
-
-                </div>
-              )
-            : (<AlphabetLinks onFilterChange={onFilterChange} value={props.value} />)}
-
-          <div id="doc-type-help" style={selectContainerStyle} ref={helpRefNarrow}>
-            <Select
-              className={selectClass}
-              style={{ ...selectColorStyle, marginRight: 15, fontSize: 'max(16px, 1rem)' }}
-              value={documentView[side].transcriptionType}
-              id="doc-type"
-              onClick={changeType}
-            >
-              {Object.keys(props.document.folios.find(fol => (fol.id === props.documentView[props.side].iiifShortID)).annotationURLs).map(ttKey => (
-                <MenuItem value={ttKey} key={ttKey} title={ttKey}>{props.document.variorum ? props.document.transcriptionTypes[props.document.folios.find(fol => (fol.id === props.documentView[props.side].iiifShortID)).doc_id][ttKey] : props.document.transcriptionTypes[ttKey]}</MenuItem>
-              ))}
-              <MenuItem value="f" key="f">
-                {DocumentHelper.transcriptionTypeLabels.f}
-              </MenuItem>
-              { props.glossary && (
-                <MenuItem value="glossary" key="glossary">
-                  {DocumentHelper.transcriptionTypeLabels.glossary}
-                </MenuItem>
-              ) }
-            </Select>
-            <span
-              title="Toggle folio help"
-              onClick={toggleHelpNarrow}
-              className="helpIcon"
-            >
-              <i className="fas fa-question-circle" />
-            </span>
-            <HelpPopper
-              marginStyle={helpMarginStyle}
-              anchorEl={helpRefNarrow.current}
-              open={openHelpNarrow}
-              onClose={toggleHelpNarrow}
-            />
-          </div>
-
-        </div>
-      </div>
-    </>
-  )
-}
-
-function mapStateToProps(state) {
-  return {
-    document: state.document,
-    glossary: !!state.glossary.URL,
-  }
-}
-
-export default (connect(mapStateToProps)(Navigation))

package/dist/es/src/hooks/useIsWidthUp.js

@@ -1,9 +0,0 @@
-import { useTheme } from '@material-ui/core/styles'
-import useMediaQuery from '@material-ui/core/useMediaQuery'
-
-function useIsWidthUp(breakpoint) {
-  const theme = useTheme()
-  return useMediaQuery(theme.breakpoints.up(breakpoint))
-}
-
-export default useIsWidthUp

package/dist/es/src/lib/registerServiceWorker.js

@@ -1,111 +0,0 @@
-// In production, we register a service worker to serve assets from local cache.
-
-// This lets the app load faster on subsequent visits in production, and gives
-// it offline capabilities. However, it also means that developers (and users)
-// will only see deployed updates on the "N+1" visit to a page, since previously
-// cached resources are updated in the background.
-
-// To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
-// This link also includes instructions on opting out of this behavior.
-
-const isLocalhost = Boolean(
-  window.location.hostname === 'localhost'
-  // [::1] is the IPv6 localhost address.
-  || window.location.hostname === '[::1]'
-  // 127.0.0.1/8 is considered localhost for IPv4.
-  || window.location.hostname.match(
-    /^127(?:\.(?:25[0-5]|2[0-4]\d|[01]?\d{1,2})){3}$/,
-  ),
-)
-
-export default function register() {
-  if (import.meta.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
-    // The URL constructor is available in all browsers that support SW.
-    const publicUrl = new URL(import.meta.env.PUBLIC_URL, window.location)
-    if (publicUrl.origin !== window.location.origin) {
-      // Our service worker won't work if PUBLIC_URL is on a different origin
-      // from what our page is served on. This might happen if a CDN is used to
-      // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374
-      return
-    }
-
-    window.addEventListener('load', () => {
-      const swUrl = `${import.meta.env.PUBLIC_URL}/service-worker.js`
-
-      if (isLocalhost) {
-        // This is running on localhost. Lets check if a service worker still exists or not.
-        checkValidServiceWorker(swUrl)
-      }
-      else {
-        // Is not local host. Just register service worker
-        registerValidSW(swUrl)
-      }
-    })
-  }
-}
-
-function registerValidSW(swUrl) {
-  navigator.serviceWorker
-    .register(swUrl)
-    .then((registration) => {
-      registration.onupdatefound = () => {
-        const installingWorker = registration.installing
-        installingWorker.onstatechange = () => {
-          if (installingWorker.state === 'installed') {
-            if (navigator.serviceWorker.controller) {
-              // At this point, the old content will have been purged and
-              // the fresh content will have been added to the cache.
-              // It's the perfect time to display a "New content is
-              // available; please refresh." message in your web app.
-              console.log('New content is available; please refresh.')
-            }
-            else {
-              // At this point, everything has been precached.
-              // It's the perfect time to display a
-              // "Content is cached for offline use." message.
-              console.log('Content is cached for offline use.')
-            }
-          }
-        }
-      }
-    })
-    .catch((error) => {
-      console.error('Error during service worker registration:', error)
-    })
-}
-
-function checkValidServiceWorker(swUrl) {
-  // Check if the service worker can be found. If it can't reload the page.
-  fetch(swUrl)
-    .then((response) => {
-      // Ensure service worker exists, and that we really are getting a JS file.
-      if (
-        response.status === 404
-        || !response.headers.get('content-type').includes('javascript')
-      ) {
-        // No service worker found. Probably a different app. Reload the page.
-        navigator.serviceWorker.ready.then((registration) => {
-          registration.unregister().then(() => {
-            window.location.reload()
-          })
-        })
-      }
-      else {
-        // Service worker found. Proceed as normal.
-        registerValidSW(swUrl)
-      }
-    })
-    .catch(() => {
-      console.log(
-        'No internet connection found. App is running in offline mode.',
-      )
-    })
-}
-
-export function unregister() {
-  if ('serviceWorker' in navigator) {
-    navigator.serviceWorker.ready.then((registration) => {
-      registration.unregister()
-    })
-  }
-}