html-flip-book-react 0.0.0-alpha.1

package/example/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "html-flip-book-react-example",
+  "version": "1.0.0",
+  "description": "Flipbook component for HTML",
+  "homepage": "https://doradsoft.github.io/html-flip-book/",
+  "type": "module",
+  "engines": {
+    "node": "^22.x.x"
+  },
+  "scripts": {
+    "dev": "vite",
+    "predeploy": "npm run build",
+    "deploy": "gh-pages -d dist -r https://github.com/doradsoft/html-flip-book.git",
+    "build": "vite build --mode development"
+  },
+  "author": "DoradSoft",
+  "license": "MIT",
+  "dependencies": {
+    "html-flip-book-react": "file:../",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-markdown": "^9.0.1"
+  },
+  "devDependencies": {
+    "@actions/core": "^1.10.1",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react-refresh": "^1.3.6",
+    "@vitejs/plugin-react-swc": "^3.7.0",
+    "react-refresh": "^0.14.2",
+    "rimraf": "^5.0.8",
+    "typescript": "^5.5.3",
+    "vite": "^5.3.3",
+    "vite-plugin-checker": "^0.7.1",
+    "vite-tsconfig-paths": "^4.3.2",
+    "vitest": "^1.6.0",
+    "gh-pages": "6.1.1"
+  }
+}

package/example/src/App.css

@@ -0,0 +1,52 @@
+html,
+body {
+  margin: 0;
+}
+
+.app {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+}
+
+header {
+  /* your styles */
+  flex-shrink: 0;
+}
+
+.books-container {
+  flex-grow: 1;
+  overflow: auto;
+  display: flex;
+  justify-content: space-between;
+  padding: 20px;
+  gap: 20px;
+}
+
+.he-book-container,
+.en-book-container {
+  flex-basis: 50%;
+  box-sizing: border-box;
+}
+
+.he-book-container {
+  direction: rtl;
+  text-align: right;
+}
+
+.en-page,
+.he-page {
+  background-color: white;
+  overflow-y: scroll;
+  overflow-x: hidden;
+  border: 1px solid #00000056;
+  padding: 2%;
+}
+
+.en-page img {
+  max-width: 100%;
+}
+
+.en-page * {
+  overflow: auto;
+}

package/example/src/App.tsx

@@ -0,0 +1,25 @@
+// App.tsx
+import type { FC } from "react";
+import "./App.css"; // Import the CSS file
+import EnBook from "./EnBook";
+import HeBook from "./HeBook";
+
+export const App: FC = () => {
+  return (
+    <div className="app">
+      <header>
+        <h1>HTML Flip Book Example</h1>
+      </header>
+      <section className="books-container">
+        <section className="en-book-container">
+          <EnBook />
+        </section>
+        <section className="he-book-container">
+          <HeBook />
+        </section>
+      </section>
+    </div>
+  );
+};
+
+export default App;

package/example/src/EnBook.tsx

@@ -0,0 +1,55 @@
+// EnBook.tsx
+import { useEffect, useState } from 'react'
+import { FlipBook } from 'html-flip-book-react'
+import Markdown from 'react-markdown'
+
+const markdownFiles = import.meta.glob('/assets/pages_data/en/content/*.md')
+
+interface MarkdownModule {
+  default: string
+}
+
+export const EnBook = () => {
+  const [enPages, setEnPages] = useState<JSX.Element[]>([])
+
+  useEffect(() => {
+    const loadMarkdownFiles = async () => {
+      const files = await Promise.all(
+        Object.entries(markdownFiles).map(async ([path, resolver]) => {
+          const content = await resolver()
+          assertIsMarkdownModule(content)
+          return {
+            path,
+            content: content.default
+          }
+        })
+      )
+      const pages = files
+        // To avoid having an empty page at the end
+        .concat([{ path: '', content: '' }])
+        .map(({ content }, index) => (
+          <div key={index} className="en-page">
+            <Markdown>{content}</Markdown>
+          </div>
+        ))
+
+      setEnPages(pages)
+    }
+
+    loadMarkdownFiles()
+  }, [])
+
+  function assertIsMarkdownModule(
+    module: unknown
+  ): asserts module is MarkdownModule {
+    if (typeof (module as MarkdownModule).default !== 'string') {
+      throw new Error('Invalid markdown module')
+    }
+  }
+
+  return enPages.length ? (
+    <FlipBook className="en-book" pages={enPages} debug={true} />
+  ) : null
+}
+
+export default EnBook

package/example/src/HeBook.tsx

@@ -0,0 +1,44 @@
+// HeBook.tsx
+import { FlipBook, PageSemantics } from 'html-flip-book-react'
+
+const hePages = Array.from({ length: 10 }, (_, index) => (
+  <div key={index}>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+  </div>
+))
+
+const hePageSemanticsDict: Record<number, string> = {
+  4: 'א',
+  5: 'ב',
+  6: 'ג'
+}
+
+const hePageSemantics: PageSemantics = {
+  indexToSemanticName(pageIndex: number): string {
+    return hePageSemanticsDict[pageIndex] ?? ''
+  },
+  semanticNameToIndex(semanticPageName: string): number | null {
+    const entry = Object.entries(hePageSemanticsDict).find(
+      ([, value]) => value === semanticPageName
+    )
+    return entry ? parseInt(entry[0]) : null
+  },
+  indexToTitle(pageIndex: number): string {
+    const chapter = hePageSemanticsDict[pageIndex]
+    return chapter ? `פרק ${chapter}` : ''
+  }
+}
+
+export const HeBook = () => {
+  return (
+    <FlipBook
+      className="he-book"
+      pages={hePages}
+      pageSemantics={hePageSemantics}
+      debug={true}
+      direction="rtl"
+    />
+  )
+}
+
+export default HeBook

package/example/src/index.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import { App } from './App';
+
+const root = ReactDOM.createRoot(
+  document.getElementById('root') as HTMLElement,
+);
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);

package/example/vite-env.d.ts

@@ -0,0 +1 @@
+declare module "*.md";

package/example/vite.config.js

@@ -0,0 +1,84 @@
+import fs from 'node:fs'
+import path from 'node:path'
+import reactRefresh from '@vitejs/plugin-react-refresh'
+import react from '@vitejs/plugin-react-swc'
+import { defineConfig } from 'vite'
+import checker from 'vite-plugin-checker'
+import tsconfigPaths from 'vite-tsconfig-paths'
+import packageJson from './package.json'
+
+export default defineConfig(({ mode }) => {
+  const isProd = mode === 'production'
+  return {
+    mode,
+    assetsInclude: ['**/*.md'],
+    base: '',
+    build: {
+      sourcemap: !isProd,
+      emptyOutDir: true,
+      rollupOptions: {
+        external: ['react', 'react-dom'],
+        makeAbsoluteExternalsRelative: true
+      },
+      terserOptions: {
+        module: true,
+        output: {
+          comments: () => false
+        },
+        compress: {
+          drop_console: true
+        }
+      }
+    },
+    esbuild: { legalComments: 'none' },
+    server: {
+      open: true
+    },
+    plugins: [
+      react(),
+      {
+        name: 'markdown-loader',
+        transform (_export, id) {
+          if (id.endsWith('.md')) {
+            const mdContent = fs.readFileSync(id, 'utf-8')
+            return {
+              code: `export default ${JSON.stringify(mdContent)}`,
+              map: null // provide source map if available
+            }
+          }
+        }
+      },
+      reactRefresh(),
+      tsconfigPaths(),
+      checker({
+        typescript: true
+      }),
+      {
+        name: 'update-esm-package-props',
+        generateBundle: (options, bundle) => {
+          if (isProd) {
+            for (const fileName in bundle) {
+              if (fileName.startsWith('index-')) {
+                fs.writeFile(
+                  path.resolve(__dirname, './package.json'),
+                  JSON.stringify(
+                    { ...packageJson, main: `dist/${fileName}` },
+                    null,
+                    2
+                  ),
+                  err => {
+                    if (err) throw err
+                    console.log(
+                      '\x1b[36m%s\x1b[0m',
+                      '\nPackage ESM main entrypoint updated!\n\r'
+                    )
+                  }
+                )
+              }
+            }
+          }
+        }
+      }
+    ]
+  }
+})

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "html-flip-book-react",
+  "description": "Flip Book React Component",
+  "version": "0.0.0-alpha.1",
+  "type": "module",
+  "author": "DoradSoft",
+  "main": "./dist/flip-book.js",
+  "types": "./dist/flip-book.d.ts",
+  "homepage": "https://github.com/doradsoft/html-flip-book",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/doradsoft/html-flip-book.git"
+  },
+  "bugs": {
+    "url": "https://github.com/doradsoft/html-flip-book/issues"
+  },
+  "keywords": [
+    "book",
+    "flip-book",
+    "react"
+  ],
+  "license": "MIT",
+  "scripts": {
+    "build": "vite build"
+  },
+  "dependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react-refresh": "^1.3.6",
+    "@vitejs/plugin-react-swc": "^3.7.0",
+    "html-flip-book-base": "file:../base",
+    "react-refresh": "^0.14.2",
+    "typescript": "^5.5.3",
+    "typescript-eslint": "^8.0.0-alpha.14",
+    "vite": "^5.3.3",
+    "vite-plugin-checker": "^0.7.1",
+    "vite-plugin-dts": "^3.9.1",
+    "vite-tsconfig-paths": "^4.3.2",
+    "vitest": "^1.6.0"
+  }
+}

package/src/FlipBook.tsx

@@ -0,0 +1,45 @@
+import React, { useEffect, useRef } from 'react'
+import { FlipBook as FlipBookBase, PageSemantics } from 'html-flip-book-base'
+
+interface FlipBookWrapperProps {
+  pages: React.ReactNode[]
+  className: string
+  pageSemantics?: PageSemantics
+  debug?: boolean
+  direction?: 'rtl' | 'ltr' // Add the direction property to the interface
+  // Add any other props that the wrapper might need
+}
+
+const FlipBookReact: React.FC<FlipBookWrapperProps> = ({
+  pages,
+  className,
+  debug = false,
+  direction = 'ltr', // Add the direction prop
+  pageSemantics = undefined
+}) => {
+  const flipBook = useRef(
+    new FlipBookBase({
+      pageSemantics: pageSemantics,
+      pagesCount: pages.length,
+      direction: direction
+    })
+  )
+
+  useEffect(() => {
+    flipBook.current.render(`.${className}`, debug)
+    // Do any other necessary setup here
+  }, [])
+
+  return (
+    <div className={className}>
+      {pages.map((page, index) => (
+        <div key={index} className="page">
+          {page}
+        </div>
+      ))}
+    </div>
+  )
+}
+
+export { FlipBookReact as FlipBook }
+export type { PageSemantics }

package/vite.config.js

@@ -0,0 +1,66 @@
+import reactRefresh from '@vitejs/plugin-react-refresh'
+import react from '@vitejs/plugin-react-swc'
+import { defineConfig } from 'vite'
+import checker from 'vite-plugin-checker'
+import tsconfigPaths from 'vite-tsconfig-paths'
+import dts from 'vite-plugin-dts'
+import fs from 'fs'
+import path from 'path'
+
+export default defineConfig(({ mode }) => {
+  return {
+    mode,
+    base: '',
+    build: {
+      sourcemap: true,
+      emptyOutDir: true,
+      lib: {
+        entry: 'src/FlipBook.tsx',
+        formats: ['es'],
+        fileName: 'flip-book'
+      },
+      rollupOptions: {
+        external: ['react', 'react-dom'],
+        makeAbsoluteExternalsRelative: true
+      },
+      terserOptions: {
+        module: true,
+        output: {
+          comments: () => false
+        },
+        compress: {
+          drop_console: true
+        }
+      }
+    },
+    esbuild: { legalComments: 'none' },
+    plugins: [
+      react(),
+      reactRefresh(),
+      tsconfigPaths(),
+      checker({
+        typescript: true
+      }),
+      dts({
+        afterBuild: emittedFiles => {
+          emittedFiles.forEach((content, filePath) => {
+            if (filePath.includes('FlipBook')) {
+              const newFilePath = filePath.replace(/FlipBook/g, 'flip-book')
+              const newDir = path.dirname(newFilePath)
+
+              // Ensure the directory exists
+              if (!fs.existsSync(newDir)) {
+                fs.mkdirSync(newDir, { recursive: true })
+              }
+
+              fs.renameSync(filePath, newFilePath)
+              fs.writeFileSync(newFilePath, content)
+              console.log(`Renamed ${filePath} to ${newFilePath}`)
+            }
+          })
+        }
+      })
+    ]
+  }
+})
+