OE-780: Remove storybook, update readme, remove TODO comments (#145)

* remove storybook

* remove unused https resources and cleanup readme

* updating examples

* remove isChecked from button since it was throwing react errors

* remove todo comments and update unit tests

* update Readme with additional context

* rename props

* add context to readme

* adds link to NYPL's C4 diagrams public page

* updates based on PR feedback

Author: samanthaandrews

.eslintignore

@@ -7,7 +7,6 @@ dist
 .parcel-cache
 .cache
 
-storybook-static
 .vercel
 
 # env

.gitignore

@@ -9,7 +9,6 @@ coverage
 .parcel-cache
 .cache
 
-storybook-static
 .vercel
 
 # env

.storybook/main.js

@@ -10,14 +10,6 @@ import child_process from 'child_process';
 const rimraf = util.promisify(origRimraf);
 const exec = util.promisify(child_process.exec);
 
-/**
- * @todo
- *
- * - Figure out how to export the fonts and include them with dynamic urls in the css?
- * - Possibly export a CJS or IIFE version?
- * - Possibly add postcss or something to support namespaces?
- */
-
 const isWatchEnabled = process.argv[2] === '-w';
 // for now we bundle for production whenever we aren't in watch mode
 const isProduction = !isWatchEnabled;
@@ -47,16 +39,7 @@ async function buildTs(
     bundle: true,
     // what browsers we want to support, this is basically all >1% usage
     target: ['es2016', 'chrome89', 'firefox88', 'safari14', 'edge90'],
-    external: [
-      'react-dom',
-      'react',
-      /**
-       * @todo - We currently ignore these fonts, but we need to figure out a better way
-       * to include them
-       */
-      'fonts/AccessibleDfA.otf',
-      'fonts/iAWriterDuospace-Regular.ttf',
-    ],
+    external: ['react-dom', 'react'],
     sourcemap: true,
     define: {
       // note these need to be double quoted if we want to define string constants
@@ -161,7 +144,6 @@ async function startWatcher() {
     'cypress',
     'coverage',
     '.husky',
-    '.storybook',
   ];
   const watchPaths = ['.'];
   console.log('👀 Watching for changes...');

.storybook/preview.jsx

@@ -28,6 +28,11 @@ import readiumDefault from 'url:../src/HtmlReader/ReadiumCss/ReadiumCSS-default.
 import readiumAfter from 'url:../src/HtmlReader/ReadiumCss/ReadiumCSS-after.css';
 import Tests from './Tests';
 import { Injectable } from '../src/Readium/Injectable';
+import UseHtmlReader from './use-html-reader';
+import mobyEpub2Manifest from './static/samples/moby-epub2-exploded/manifest.json';
+import pdfSingleResourceManifest from './static/samples/pdf/single-resource-short.json';
+import { WebpubManifest } from '../src/types';
+import UsePdfReader from './use-pdf-reader';
 
 const origin = window.location.origin;
 
@@ -105,6 +110,14 @@ const PdfReaders = () => {
           pdfWorkerSrc={`${origin}/pdf-worker/pdf.worker.min.js`}
         />
       </Route>
+      <Route path={`/pdf/use-pdf-reader-hook`}>
+        <UsePdfReader
+          webpubManifestUrl="/samples/pdf/single-resource-short.json"
+          manifest={pdfSingleResourceManifest as WebpubManifest}
+          proxyUrl={pdfProxyUrl}
+          pdfWorkerSrc={`${origin}/pdf-worker/pdf.worker.min.js`}
+        />
+      </Route>
       <Route path={`/pdf/large`}>
         <WebReader
           webpubManifestUrl="/samples/pdf/single-resource-long.json"
@@ -209,7 +222,7 @@ const HtmlReaders = () => {
           <Text as="p">
             This example shows how a web reader looks embedded within a page
             instead of taking over the full page. It is fixed height, which
-            means it will not grow to fit content in scrolling mode..
+            means it will not grow to fit content in scrolling mode.
           </Text>
           <WebReader
             injectablesReflowable={htmlInjectablesReflowable}
@@ -250,6 +263,13 @@ const HtmlReaders = () => {
           webpubManifestUrl={`${origin}/samples/ReadiumCSS-docs/manifest.json`}
         />
       </Route>
+      <Route path={`/html/use-html-reader-hook`}>
+        <UseHtmlReader
+          injectablesReflowable={htmlInjectablesReflowable}
+          webpubManifestUrl={`${origin}/samples/moby-epub2-exploded/manifest.json`}
+          manifest={mobyEpub2Manifest as WebpubManifest}
+        />
+      </Route>
       <Route path={`/html/url/:manifestUrl`}>
         <DynamicReader />
       </Route>
@@ -277,6 +297,9 @@ const HomePage = () => {
             <ListItem>
               <Link to="/html/moby-epub2">Moby Dick </Link>
             </ListItem>
+            <ListItem>
+              <Link to="/html/use-html-reader-hook">useHtmlReader hook</Link>
+            </ListItem>
           </UnorderedList>
         </ListItem>
         <ListItem>
@@ -338,6 +361,9 @@ const HomePage = () => {
             <ListItem>
               <Link to="/pdf/single-resource-short">Single-PDF Webpub</Link>
             </ListItem>
+            <ListItem>
+              <Link to="/pdf/use-pdf-reader-hook">usePdfReader hook</Link>
+            </ListItem>
             <ListItem>
               <Link to="/pdf/large">Single-PDF Webpub (large file)</Link>
             </ListItem>

README.md

@@ -2,6 +2,7 @@
   "extends": "../tsconfig.json",
   "include": [".", "../src"],
   "compilerOptions": {
-    "module": "esnext"
+    "module": "esnext",
+    "resolveJsonModule": true
   }
 }

build.ts

@@ -0,0 +1,48 @@
+import React from 'react';
+import { useHtmlReader } from '../src';
+import { Injectable } from '../src/Readium/Injectable';
+import { WebpubManifest } from '../src/types';
+import Footer from '../src/ui/Footer';
+import Header from '../src/ui/Header';
+
+type HTMLReaderProps = {
+  injectablesReflowable: Injectable[];
+  webpubManifestUrl: string;
+  manifest: WebpubManifest;
+};
+
+/**
+ * This sample shows setting how to use the useHTMLReader hook
+ * to render EPUBs. Use it when you know you're _not_ going to be
+ * opening PDFs.
+ */
+const UseHtmlReader: React.FC<HTMLReaderProps> = ({
+  injectablesReflowable,
+  webpubManifestUrl,
+  manifest,
+}) => {
+  const reader = useHtmlReader({
+    webpubManifestUrl,
+    manifest,
+    injectablesReflowable,
+  });
+  const containerRef = React.useRef<HTMLDivElement>(null);
+
+  if (!reader || !reader.type) {
+    return null;
+  }
+
+  return (
+    <div>
+      <Header
+        {...reader}
+        headerLeft={<a href="/">Back</a>}
+        containerRef={containerRef}
+      />
+      {reader.content}
+      <Footer {...reader} />
+    </div>
+  );
+};
+
+export default UseHtmlReader;

example/index.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { usePdfReader } from '../src';
+import { WebpubManifest } from '../src/types';
+import Footer from '../src/ui/Footer';
+import Header from '../src/ui/Header';
+
+type PDFReaderProps = {
+  webpubManifestUrl: string;
+  manifest: WebpubManifest;
+  proxyUrl: string | undefined;
+  pdfWorkerSrc: string;
+};
+
+/**
+ * This sample shows setting how to use the usePdfReader hook
+ * to render PDFs. Use it when you know you're _not_ going to be
+ * opening EPUBs.
+ */
+const UsePdfReader: React.FC<PDFReaderProps> = ({
+  webpubManifestUrl,
+  manifest,
+  proxyUrl,
+  pdfWorkerSrc,
+}) => {
+  const reader = usePdfReader({
+    webpubManifestUrl,
+    manifest,
+    proxyUrl,
+    pdfWorkerSrc,
+  });
+  const containerRef = React.useRef<HTMLDivElement>(null);
+
+  if (!reader || !reader.type) {
+    return null;
+  }
+
+  return (
+    <div>
+      <Header
+        {...reader}
+        headerLeft={<a href="/">Back</a>}
+        containerRef={containerRef}
+      />
+      {reader.content}
+      <Footer {...reader} />
+    </div>
+  );
+};
+
+export default UsePdfReader;