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

package/example/package.json

@@ -1,39 +0,0 @@
-{
-  "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

@@ -1,52 +0,0 @@
-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

@@ -1,25 +0,0 @@
-// 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

@@ -1,55 +0,0 @@
-// 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

@@ -1,44 +0,0 @@
-// 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

@@ -1,12 +0,0 @@
-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

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

package/example/vite.config.js

@@ -1,84 +0,0 @@
-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/src/FlipBook.tsx

@@ -1,45 +0,0 @@
-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

@@ -1,66 +0,0 @@
-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}`)
-            }
-          })
-        }
-      })
-    ]
-  }
-})
-