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

package/dist/toolbar/index.js

@@ -0,0 +1,174 @@
+import { jsx as n } from "react/jsx-runtime";
+import { createContext as v, useContext as x, useState as i, useCallback as P, useEffect as k } from "react";
+const u = ({
+  onClick: e,
+  ariaLabel: t,
+  disabled: l = !1,
+  children: r,
+  className: a = "",
+  title: o
+}) => /* @__PURE__ */ n(
+  "button",
+  {
+    type: "button",
+    onClick: e,
+    "aria-label": t,
+    disabled: l,
+    title: o ?? t,
+    className: `flipbook-toolbar-button ${a}`.trim(),
+    children: r
+  }
+), h = v(null);
+function b() {
+  const e = x(h);
+  if (!e)
+    throw new Error("Toolbar components must be used within a Toolbar");
+  return e;
+}
+const N = ({ children: e, className: t }) => {
+  const { flipBookRef: l, isFirstPage: r } = b();
+  return /* @__PURE__ */ n(
+    u,
+    {
+      onClick: () => {
+        l.current?.jumpToPage(0);
+      },
+      ariaLabel: "First page",
+      disabled: r,
+      className: `flipbook-toolbar-first ${t ?? ""}`.trim(),
+      children: e ?? "⏮"
+    }
+  );
+}, T = ({
+  targetRef: e,
+  enterIcon: t,
+  exitIcon: l,
+  className: r
+}) => {
+  const [a, o] = i(!1), s = P(() => {
+    o(!!document.fullscreenElement);
+  }, []);
+  k(() => (document.addEventListener("fullscreenchange", s), () => {
+    document.removeEventListener("fullscreenchange", s);
+  }), [s]);
+  const g = async () => {
+    try {
+      a ? await document.exitFullscreen() : await (e?.current ?? document.documentElement).requestFullscreen();
+    } catch (d) {
+      console.warn("Fullscreen request failed:", d);
+    }
+  }, f = a ? "Exit fullscreen" : "Enter fullscreen", p = a ? l ?? "⛶" : t ?? "⛶";
+  return /* @__PURE__ */ n(
+    u,
+    {
+      onClick: g,
+      ariaLabel: f,
+      className: `flipbook-toolbar-fullscreen ${a ? "flipbook-toolbar-fullscreen--active" : ""} ${r ?? ""}`.trim(),
+      children: p
+    }
+  );
+}, $ = ({ children: e, className: t }) => {
+  const { flipBookRef: l, isLastPage: r, totalPages: a } = b();
+  return /* @__PURE__ */ n(
+    u,
+    {
+      onClick: () => {
+        l.current?.jumpToPage(a - 1);
+      },
+      ariaLabel: "Last page",
+      disabled: r,
+      className: `flipbook-toolbar-last ${t ?? ""}`.trim(),
+      children: e ?? "⏭"
+    }
+  );
+}, B = ({ children: e, className: t }) => {
+  const { flipBookRef: l, isLastPage: r, direction: a } = b();
+  return /* @__PURE__ */ n(
+    u,
+    {
+      onClick: () => {
+        l.current?.flipNext();
+      },
+      ariaLabel: a === "rtl" ? "Previous page" : "Next page",
+      disabled: r,
+      className: `flipbook-toolbar-next ${t ?? ""}`.trim(),
+      children: e ?? "›"
+    }
+  );
+}, E = ({
+  format: e = "{current} / {total}",
+  className: t
+}) => {
+  const { currentPage: l, totalPages: r } = b(), a = l + 1, o = e.replace("{current}", a.toString()).replace("{total}", r.toString());
+  return /* @__PURE__ */ n(
+    "span",
+    {
+      className: `flipbook-toolbar-indicator ${t ?? ""}`.trim(),
+      "aria-live": "polite",
+      "aria-atomic": "true",
+      children: o
+    }
+  );
+}, I = ({ children: e, className: t }) => {
+  const { flipBookRef: l, isFirstPage: r, direction: a } = b();
+  return /* @__PURE__ */ n(
+    u,
+    {
+      onClick: () => {
+        l.current?.flipPrev();
+      },
+      ariaLabel: a === "rtl" ? "Next page" : "Previous page",
+      disabled: r,
+      className: `flipbook-toolbar-prev ${t ?? ""}`.trim(),
+      children: e ?? "‹"
+    }
+  );
+}, w = ({
+  flipBookRef: e,
+  direction: t = "ltr",
+  className: l = "",
+  children: r
+}) => {
+  const [a, o] = i(0), [s, g] = i(0), [f, p] = i(!0), [d, C] = i(!1), m = P(() => {
+    const c = e.current;
+    c && (o(c.getCurrentPageIndex()), g(c.getTotalPages()), p(c.isFirstPage()), C(c.isLastPage()));
+  }, [e]);
+  return k(() => {
+    m();
+    const c = setInterval(m, 100);
+    return () => clearInterval(c);
+  }, [m]), /* @__PURE__ */ n(
+    h.Provider,
+    {
+      value: {
+        flipBookRef: e,
+        direction: t,
+        currentPage: a,
+        totalPages: s,
+        isFirstPage: f,
+        isLastPage: d
+      },
+      children: /* @__PURE__ */ n(
+        "div",
+        {
+          className: `flipbook-toolbar ${t === "rtl" ? "flipbook-toolbar--rtl" : ""} ${l}`.trim(),
+          role: "toolbar",
+          "aria-label": "FlipBook navigation",
+          children: r
+        }
+      )
+    }
+  );
+};
+export {
+  N as FirstPageButton,
+  T as FullscreenButton,
+  $ as LastPageButton,
+  B as NextButton,
+  E as PageIndicator,
+  I as PrevButton,
+  w as Toolbar,
+  u as ToolbarButton,
+  b as useToolbar
+};
+//# sourceMappingURL=index.js.map

package/dist/toolbar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../src/toolbar/ToolbarButton.tsx","../../src/toolbar/ToolbarContext.tsx","../../src/toolbar/FirstPageButton.tsx","../../src/toolbar/FullscreenButton.tsx","../../src/toolbar/LastPageButton.tsx","../../src/toolbar/NextButton.tsx","../../src/toolbar/PageIndicator.tsx","../../src/toolbar/PrevButton.tsx","../../src/toolbar/Toolbar.tsx"],"sourcesContent":["import type React from \"react\";\n\ninterface ToolbarButtonProps {\n\t/** Click handler */\n\tonClick: () => void;\n\t/** Accessible label for the button */\n\tariaLabel: string;\n\t/** Whether the button is disabled */\n\tdisabled?: boolean;\n\t/** Button content (icon or text) */\n\tchildren: React.ReactNode;\n\t/** Additional CSS class name */\n\tclassName?: string;\n\t/** Title tooltip */\n\ttitle?: string;\n}\n\n/**\n * Base button component for toolbar actions.\n */\nconst ToolbarButton: React.FC<ToolbarButtonProps> = ({\n\tonClick,\n\tariaLabel,\n\tdisabled = false,\n\tchildren,\n\tclassName = \"\",\n\ttitle,\n}) => {\n\treturn (\n\t\t<button\n\t\t\ttype=\"button\"\n\t\t\tonClick={onClick}\n\t\t\taria-label={ariaLabel}\n\t\t\tdisabled={disabled}\n\t\t\ttitle={title ?? ariaLabel}\n\t\t\tclassName={`flipbook-toolbar-button ${className}`.trim()}\n\t\t>\n\t\t\t{children}\n\t\t</button>\n\t);\n};\n\nexport { ToolbarButton };\nexport type { ToolbarButtonProps };\n","import type React from \"react\";\nimport { createContext, useContext } from \"react\";\nimport type { FlipBookHandle } from \"../FlipBook\";\n\ninterface ToolbarContextValue {\n\tflipBookRef: React.RefObject<FlipBookHandle | null>;\n\tdirection: \"ltr\" | \"rtl\";\n\tcurrentPage: number;\n\ttotalPages: number;\n\tisFirstPage: boolean;\n\tisLastPage: boolean;\n}\n\nconst ToolbarContext = createContext<ToolbarContextValue | null>(null);\n\nexport function useToolbar(): ToolbarContextValue {\n\tconst context = useContext(ToolbarContext);\n\tif (!context) {\n\t\tthrow new Error(\"Toolbar components must be used within a Toolbar\");\n\t}\n\treturn context;\n}\n\nexport { ToolbarContext };\nexport type { ToolbarContextValue };\n","import type React from \"react\";\nimport { ToolbarButton } from \"./ToolbarButton\";\nimport { useToolbar } from \"./ToolbarContext\";\n\ninterface FirstPageButtonProps {\n\t/** Custom content (icon or text). Defaults to \"⏮\" */\n\tchildren?: React.ReactNode;\n\t/** Additional CSS class name */\n\tclassName?: string;\n}\n\n/**\n * Button to navigate to the first page.\n */\nconst FirstPageButton: React.FC<FirstPageButtonProps> = ({ children, className }) => {\n\tconst { flipBookRef, isFirstPage } = useToolbar();\n\n\tconst handleClick = () => {\n\t\tflipBookRef.current?.jumpToPage(0);\n\t};\n\n\treturn (\n\t\t<ToolbarButton\n\t\t\tonClick={handleClick}\n\t\t\tariaLabel=\"First page\"\n\t\t\tdisabled={isFirstPage}\n\t\t\tclassName={`flipbook-toolbar-first ${className ?? \"\"}`.trim()}\n\t\t>\n\t\t\t{children ?? \"⏮\"}\n\t\t</ToolbarButton>\n\t);\n};\n\nexport { FirstPageButton };\nexport type { FirstPageButtonProps };\n","import type React from \"react\";\nimport { useCallback, useEffect, useState } from \"react\";\nimport { ToolbarButton } from \"./ToolbarButton\";\n\ninterface FullscreenButtonProps {\n\t/** Target element to make fullscreen. If not provided, uses document.documentElement */\n\ttargetRef?: React.RefObject<HTMLElement | null>;\n\t/** Custom content for enter fullscreen. Defaults to \"⛶\" */\n\tenterIcon?: React.ReactNode;\n\t/** Custom content for exit fullscreen. Defaults to \"⛶\" */\n\texitIcon?: React.ReactNode;\n\t/** Additional CSS class name */\n\tclassName?: string;\n}\n\n/**\n * Button to toggle fullscreen mode.\n */\nconst FullscreenButton: React.FC<FullscreenButtonProps> = ({\n\ttargetRef,\n\tenterIcon,\n\texitIcon,\n\tclassName,\n}) => {\n\tconst [isFullscreen, setIsFullscreen] = useState(false);\n\n\t// Check fullscreen state\n\tconst updateFullscreenState = useCallback(() => {\n\t\tsetIsFullscreen(!!document.fullscreenElement);\n\t}, []);\n\n\tuseEffect(() => {\n\t\tdocument.addEventListener(\"fullscreenchange\", updateFullscreenState);\n\t\treturn () => {\n\t\t\tdocument.removeEventListener(\"fullscreenchange\", updateFullscreenState);\n\t\t};\n\t}, [updateFullscreenState]);\n\n\tconst handleClick = async () => {\n\t\ttry {\n\t\t\tif (isFullscreen) {\n\t\t\t\tawait document.exitFullscreen();\n\t\t\t} else {\n\t\t\t\tconst target = targetRef?.current ?? document.documentElement;\n\t\t\t\tawait target.requestFullscreen();\n\t\t\t}\n\t\t} catch (error) {\n\t\t\tconsole.warn(\"Fullscreen request failed:\", error);\n\t\t}\n\t};\n\n\tconst label = isFullscreen ? \"Exit fullscreen\" : \"Enter fullscreen\";\n\tconst icon = isFullscreen ? (exitIcon ?? \"⛶\") : (enterIcon ?? \"⛶\");\n\n\treturn (\n\t\t<ToolbarButton\n\t\t\tonClick={handleClick}\n\t\t\tariaLabel={label}\n\t\t\tclassName={`flipbook-toolbar-fullscreen ${isFullscreen ? \"flipbook-toolbar-fullscreen--active\" : \"\"} ${className ?? \"\"}`.trim()}\n\t\t>\n\t\t\t{icon}\n\t\t</ToolbarButton>\n\t);\n};\n\nexport { FullscreenButton };\nexport type { FullscreenButtonProps };\n","import type React from \"react\";\nimport { ToolbarButton } from \"./ToolbarButton\";\nimport { useToolbar } from \"./ToolbarContext\";\n\ninterface LastPageButtonProps {\n\t/** Custom content (icon or text). Defaults to \"⏭\" */\n\tchildren?: React.ReactNode;\n\t/** Additional CSS class name */\n\tclassName?: string;\n}\n\n/**\n * Button to navigate to the last page.\n */\nconst LastPageButton: React.FC<LastPageButtonProps> = ({ children, className }) => {\n\tconst { flipBookRef, isLastPage, totalPages } = useToolbar();\n\n\tconst handleClick = () => {\n\t\tflipBookRef.current?.jumpToPage(totalPages - 1);\n\t};\n\n\treturn (\n\t\t<ToolbarButton\n\t\t\tonClick={handleClick}\n\t\t\tariaLabel=\"Last page\"\n\t\t\tdisabled={isLastPage}\n\t\t\tclassName={`flipbook-toolbar-last ${className ?? \"\"}`.trim()}\n\t\t>\n\t\t\t{children ?? \"⏭\"}\n\t\t</ToolbarButton>\n\t);\n};\n\nexport { LastPageButton };\nexport type { LastPageButtonProps };\n","import type React from \"react\";\nimport { ToolbarButton } from \"./ToolbarButton\";\nimport { useToolbar } from \"./ToolbarContext\";\n\ninterface NextButtonProps {\n\t/** Custom content (icon or text). Defaults to \"›\" */\n\tchildren?: React.ReactNode;\n\t/** Additional CSS class name */\n\tclassName?: string;\n}\n\n/**\n * Button to navigate to the next page.\n */\nconst NextButton: React.FC<NextButtonProps> = ({ children, className }) => {\n\tconst { flipBookRef, isLastPage, direction } = useToolbar();\n\n\tconst handleClick = () => {\n\t\tflipBookRef.current?.flipNext();\n\t};\n\n\t// In RTL, the visual \"next\" is actually previous in reading order\n\tconst label = direction === \"rtl\" ? \"Previous page\" : \"Next page\";\n\n\treturn (\n\t\t<ToolbarButton\n\t\t\tonClick={handleClick}\n\t\t\tariaLabel={label}\n\t\t\tdisabled={isLastPage}\n\t\t\tclassName={`flipbook-toolbar-next ${className ?? \"\"}`.trim()}\n\t\t>\n\t\t\t{children ?? \"›\"}\n\t\t</ToolbarButton>\n\t);\n};\n\nexport { NextButton };\nexport type { NextButtonProps };\n","import type React from \"react\";\nimport { useToolbar } from \"./ToolbarContext\";\n\ninterface PageIndicatorProps {\n\t/** Format string with {current} and {total} placeholders. Defaults to \"{current} / {total}\" */\n\tformat?: string;\n\t/** Additional CSS class name */\n\tclassName?: string;\n}\n\n/**\n * Displays the current page position (e.g., \"3 / 10\").\n */\nconst PageIndicator: React.FC<PageIndicatorProps> = ({\n\tformat = \"{current} / {total}\",\n\tclassName,\n}) => {\n\tconst { currentPage, totalPages } = useToolbar();\n\n\t// Display 1-based page numbers for users\n\tconst displayPage = currentPage + 1;\n\n\tconst text = format\n\t\t.replace(\"{current}\", displayPage.toString())\n\t\t.replace(\"{total}\", totalPages.toString());\n\n\treturn (\n\t\t<span\n\t\t\tclassName={`flipbook-toolbar-indicator ${className ?? \"\"}`.trim()}\n\t\t\taria-live=\"polite\"\n\t\t\taria-atomic=\"true\"\n\t\t>\n\t\t\t{text}\n\t\t</span>\n\t);\n};\n\nexport { PageIndicator };\nexport type { PageIndicatorProps };\n","import type React from \"react\";\nimport { ToolbarButton } from \"./ToolbarButton\";\nimport { useToolbar } from \"./ToolbarContext\";\n\ninterface PrevButtonProps {\n\t/** Custom content (icon or text). Defaults to \"‹\" */\n\tchildren?: React.ReactNode;\n\t/** Additional CSS class name */\n\tclassName?: string;\n}\n\n/**\n * Button to navigate to the previous page.\n */\nconst PrevButton: React.FC<PrevButtonProps> = ({ children, className }) => {\n\tconst { flipBookRef, isFirstPage, direction } = useToolbar();\n\n\tconst handleClick = () => {\n\t\tflipBookRef.current?.flipPrev();\n\t};\n\n\t// In RTL, the visual \"previous\" is actually next in reading order\n\tconst label = direction === \"rtl\" ? \"Next page\" : \"Previous page\";\n\n\treturn (\n\t\t<ToolbarButton\n\t\t\tonClick={handleClick}\n\t\t\tariaLabel={label}\n\t\t\tdisabled={isFirstPage}\n\t\t\tclassName={`flipbook-toolbar-prev ${className ?? \"\"}`.trim()}\n\t\t>\n\t\t\t{children ?? \"‹\"}\n\t\t</ToolbarButton>\n\t);\n};\n\nexport { PrevButton };\nexport type { PrevButtonProps };\n","import type React from \"react\";\nimport { useCallback, useEffect, useState } from \"react\";\nimport type { FlipBookHandle } from \"../FlipBook\";\nimport { ToolbarContext } from \"./ToolbarContext\";\nimport \"./Toolbar.css\";\n\ninterface ToolbarProps {\n\t/** Ref to the FlipBook component for programmatic control */\n\tflipBookRef: React.RefObject<FlipBookHandle | null>;\n\t/** Text direction for button layout. Defaults to \"ltr\" */\n\tdirection?: \"ltr\" | \"rtl\";\n\t/** Additional CSS class name */\n\tclassName?: string;\n\t/** Toolbar children (buttons, indicators, etc.) */\n\tchildren: React.ReactNode;\n}\n\n/**\n * Container component for FlipBook toolbar controls.\n * Provides context to child components for accessing FlipBook methods.\n */\nconst Toolbar: React.FC<ToolbarProps> = ({\n\tflipBookRef,\n\tdirection = \"ltr\",\n\tclassName = \"\",\n\tchildren,\n}) => {\n\tconst [currentPage, setCurrentPage] = useState(0);\n\tconst [totalPages, setTotalPages] = useState(0);\n\tconst [isFirstPage, setIsFirstPage] = useState(true);\n\tconst [isLastPage, setIsLastPage] = useState(false);\n\n\t// Update state from FlipBook ref\n\tconst updateState = useCallback(() => {\n\t\tconst fb = flipBookRef.current;\n\t\tif (fb) {\n\t\t\tsetCurrentPage(fb.getCurrentPageIndex());\n\t\t\tsetTotalPages(fb.getTotalPages());\n\t\t\tsetIsFirstPage(fb.isFirstPage());\n\t\t\tsetIsLastPage(fb.isLastPage());\n\t\t}\n\t}, [flipBookRef]);\n\n\t// Initial state update and periodic polling\n\t// TODO: Replace with event-based updates when FlipBook emits page change events\n\tuseEffect(() => {\n\t\tupdateState();\n\t\tconst interval = setInterval(updateState, 100);\n\t\treturn () => clearInterval(interval);\n\t}, [updateState]);\n\n\treturn (\n\t\t<ToolbarContext.Provider\n\t\t\tvalue={{\n\t\t\t\tflipBookRef,\n\t\t\t\tdirection,\n\t\t\t\tcurrentPage,\n\t\t\t\ttotalPages,\n\t\t\t\tisFirstPage,\n\t\t\t\tisLastPage,\n\t\t\t}}\n\t\t>\n\t\t\t<div\n\t\t\t\tclassName={`flipbook-toolbar ${direction === \"rtl\" ? \"flipbook-toolbar--rtl\" : \"\"} ${className}`.trim()}\n\t\t\t\trole=\"toolbar\"\n\t\t\t\taria-label=\"FlipBook navigation\"\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</div>\n\t\t</ToolbarContext.Provider>\n\t);\n};\n\nexport { Toolbar };\nexport type { ToolbarProps };\n"],"names":["ToolbarButton","onClick","ariaLabel","disabled","children","className","title","jsx","ToolbarContext","createContext","useToolbar","context","useContext","FirstPageButton","flipBookRef","isFirstPage","FullscreenButton","targetRef","enterIcon","exitIcon","isFullscreen","setIsFullscreen","useState","updateFullscreenState","useCallback","useEffect","handleClick","error","label","icon","LastPageButton","isLastPage","totalPages","NextButton","direction","PageIndicator","format","currentPage","displayPage","text","PrevButton","Toolbar","setCurrentPage","setTotalPages","setIsFirstPage","setIsLastPage","updateState","fb","interval"],"mappings":"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"}

package/package.json

@@ -1,45 +1,47 @@
 {
-  "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"
-  }
+	"name": "html-flip-book-react",
+	"description": "Flip Book React Component",
+	"version": "0.0.0-alpha.9",
+	"type": "module",
+	"author": "DoradSoft",
+	"main": "./dist/flip-book.js",
+	"types": "./dist/flip-book.d.ts",
+	"exports": {
+		".": {
+			"import": "./dist/flip-book.js",
+			"types": "./dist/flip-book.d.ts"
+		},
+		"./toolbar": {
+			"import": "./dist/toolbar/index.js",
+			"types": "./dist/toolbar/index.d.ts"
+		}
+	},
+	"files": [
+		"dist"
+	],
+	"homepage": "https://github.com/doradsoft/html-flip-book",
+	"repository": {
+		"type": "git",
+		"url": "git+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",
+	"peerDependencies": {
+		"react": "^18.0.0",
+		"react-dom": "^18.0.0"
+	},
+	"dependencies": {
+		"html-flip-book-vanilla": "0.0.0-alpha.9"
+	},
+	"devDependencies": {
+		"@types/react": "^19.2.8",
+		"@types/react-dom": "^19.2.3"
+	}
 }

package/dist/flip-book.d.ts

@@ -1,14 +0,0 @@
-import { default as React } from 'react';
-import { PageSemantics } from 'html-flip-book-base';
-
-interface FlipBookWrapperProps {
-    pages: React.ReactNode[];
-    className: string;
-    pageSemantics?: PageSemantics;
-    debug?: boolean;
-    direction?: 'rtl' | 'ltr';
-}
-declare const FlipBookReact: React.FC<FlipBookWrapperProps>;
-export { FlipBookReact as FlipBook };
-export type { PageSemantics };
-//# sourceMappingURL=FlipBook.d.ts.map

package/dist/flip-book.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"FlipBook.d.ts","sourceRoot":"","sources":["../src/FlipBook.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAA;AAChD,OAAO,EAA4B,aAAa,EAAE,MAAM,qBAAqB,CAAA;AAE7E,UAAU,oBAAoB;IAC5B,KAAK,EAAE,KAAK,CAAC,SAAS,EAAE,CAAA;IACxB,SAAS,EAAE,MAAM,CAAA;IACjB,aAAa,CAAC,EAAE,aAAa,CAAA;IAC7B,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,SAAS,CAAC,EAAE,KAAK,GAAG,KAAK,CAAA;CAE1B;AAED,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CA6BjD,CAAA;AAED,OAAO,EAAE,aAAa,IAAI,QAAQ,EAAE,CAAA;AACpC,YAAY,EAAE,aAAa,EAAE,CAAA"}

package/example/.vscode/settings.json

@@ -1,3 +0,0 @@
-{
-  "liveServer.settings.port": 5501
-}

package/example/README.md

@@ -1,47 +0,0 @@
-# scaffold-react-esm-vite
-
-Scaffold for React project implementing ESM by using Vite build tool.
-
-## Description
-
-This is a base project for creating React applications with ECMAScript Modules (ESM). It's built using Vite and a variety of modern tools and packages.
-
-## Installation
-
-First, clone the project. Then, use the package manager [npm](https://www.npmjs.com/) to install all dependencies for the project.
-
-## Getting started
-
-To start the project, you will be using NPM scripts.
-Start the project in development mode:
-
-```shell
-npm run dev
-```
-
-## Building the Project
-
-To create a build of the project, use the following NPM script:
-
-```shell
-# Development mode
-npm run build
-# Production mode
-npm run build -- --mode production
-```
-
-## Running Tests
-
-The project uses vitest for testing. Run the following NPM script to execute the tests:
-
-```shell
-npm run test
-```
-
-## Author
-
-Joan Lloret <juallom@gmail.com>
-
-## License
-
-This project is licenced under the ISC License.

package/example/assets/pages_data/en/content/000-introduction.md

@@ -1,85 +0,0 @@
-# About the book
-
-* **This version was published on October 13 2021**
-
-This is an open-source introduction to SQL guide that will help you learn the basics of SQL and start using relational databases for your SysOps, DevOps, and Dev projects. No matter if you are a DevOps/SysOps engineer, developer, or just a Linux enthusiast, you will most likely have to use SQL at some point in your career.
-
-The guide is suitable for anyone working as a developer, system administrator, or a DevOps engineer and wants to learn the basics of SQL.
-
-## About the author
-
-My name is Bobby Iliev, and I have been working as a Linux DevOps Engineer since 2014. I am an avid Linux lover and supporter of the open-source movement philosophy. I am always doing that which I cannot do in order that I may learn how to do it, and I believe in sharing knowledge.
-
-I think it's essential always to keep professional and surround yourself with good people, work hard, and be nice to everyone. You have to perform at a consistently higher level than others. That's the mark of a true professional.
-
-For more information, please visit my blog at [https://bobbyiliev.com](https://bobbyiliev.com), follow me on Twitter [@bobbyiliev_](https://twitter.com/bobbyiliev_) and [YouTube](https://www.youtube.com/channel/UCQWmdHTeAO0UvaNqve9udRw).
-
-## Sponsors
-
-This book is made possible thanks to these fantastic companies!
-
-### Materialize
-
-The Streaming Database for Real-time Analytics.
-
-[Materialize](https://materialize.com/) is a reactive database that delivers incremental view updates. Materialize helps developers easily build with streaming data using standard SQL.
-
-### DigitalOcean
-
-DigitalOcean is a cloud services platform delivering the simplicity developers love and businesses trust to run production applications at scale.
-
-It provides highly available, secure, and scalable compute, storage, and networking solutions that help developers build great software faster.
-
-Founded in 2012 with offices in New York and Cambridge, MA, DigitalOcean offers transparent and affordable pricing, an elegant user interface, and one of the largest libraries of open source resources available.
-
-For more information, please visit [https://www.digitalocean.com](https://www.digitalocean.com) or follow [@digitalocean](https://twitter.com/digitalocean) on Twitter.
-
-If you are new to DigitalOcean, you can get a free $100 credit and spin up your own servers via this referral link here:
-
-[Free $100 Credit For DigitalOcean](https://m.do.co/c/2a9bba940f39)
-
-### DevDojo
-
-The DevDojo is a resource to learn all things web development and web design. Learn on your lunch break or wake up and enjoy a cup of coffee with us to learn something new.
-
-Join this developer community, and we can all learn together, build together, and grow together.
-
-[Join DevDojo](https://devdojo.com?ref=bobbyiliev)
-
-For more information, please visit [https://www.devdojo.com](https://www.devdojo.com?ref=bobbyiliev) or follow [@thedevdojo](https://twitter.com/thedevdojo) on Twitter.
-
-## Ebook PDF Generation Tool
-
-This ebook was generated by [Ibis](https://github.com/themsaid/ibis/) developed by [Mohamed Said](https://github.com/themsaid).
-
-Ibis is a PHP tool that helps you write eBooks in markdown.
-
-## Book Cover
-
-The cover for this ebook was created with [Canva.com](https://www.canva.com/join/determined-cork-learn).
-
-If you ever need to create a graphic, poster, invitation, logo, presentation – or anything that looks good — give Canva a go.
-
-## License
-
-MIT License
-
-Copyright (c) 2020 Bobby Iliev
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

package/example/assets/pages_data/en/content/001-databases.md

@@ -1,39 +0,0 @@
-# Databases
-
-Before we dive deep into SQL, let's quickly define what a database is.
-
-The definition of databases from Wikipedia is:
-
-> A database is an organized collection of data, generally stored and accessed electronically from a computer system.
-
-In other words, a database is a collection of data stored and structured in different database tables.
-
-## Tables and columns
-
-You've most likely worked with spreadsheet systems like Excel or Google Sheets. At the very basic, database tables are quite similar to spreadsheets.
-
-Each table has different **columns** which could contain different types of data.
-
-For example, if you have a todo list app, you would have a database, and in your database, you would have different tables storing different information like:
-
-* Users - In the users table, you would have some data for your users like: `username`, `name`, and `active`, for example.
-* Tasks - The tasks table would store all of the tasks that you are planning to do. The columns of the tasks table would be for example, `task_name`, `status`, `due_date` and `priority`.
-
-The Users table will look like this:
-
-```
-+----+----------+---------------+--------+
-| id | username | name          | active |
-+----+----------+---------------+--------+
-| 1  |    bobby | Bobby Iliev   |   true |
-| 2  |    grisi | Greisi I.     |   true |
-| 3  |  devdojo | Dev Dojo      |  false |
-+----+----------+---------------+--------+
-```
-
-Rundown of the table structure:
-* We have 4 columns: `id`, `username`, `name` and `active`.
-* We also have 3 entries/users.
-* The `id` column is a unique identifier of each user and is auto-incremented.
-
-In the next chapter, we will learn how to install MySQL and create our first database.

package/example/assets/pages_data/en/content/002-install-mysql.md

@@ -1,162 +0,0 @@
-# MySQL
-
-Now that you know what a database, table, and column are, the next thing that you would need to do is install a database service where you would be running your SQL queries on.
-
-We will be using MySQL as it is free, open-source, and very widely used.
-
-## Installing MySQL
-
-Depending on your operating system, to install MySQL run the following commands.
-
-### Install MySQL on Ubuntu
-
-To install MySQL on a Linux or Ubuntu machine, run the following commands:
-
-* First update your `apt` repository:
-
-```
-sudo apt update -y
-```
-
-* Then install MySQL:
-
-```
-sudo apt install mysql-server mysql-client
-```
-
-We are installing two packages, one is the actual MySQL server, and the other is the MySQL client, which would allow us to connect to the MySQL server and run our queries.
-
-To check if MySQL is running, run the following command:
-
-```
-sudo systemctl status mysql.service
-```
-To secure your MySQL server, you could run the following command:
-
-```
-sudo mysql_secure_installation
-```
-
-Then follow the prompt and choose a secure password and save it in a secure place like a password manager.
-
-With that, you would have MySQL installed on your Ubuntu server. The above should also work just fine on Debian.
-
-### Install MySQL on Mac
-
-I would recommend installing MySQL using [Homebrew]():
-
-```
-brew install mysql
-```
-
-After that, start MySQL:
-
-```
-brew services start mysql
-```
-
-And finally, secure it:
-
-```
-mysql_secure_installation
-```
-
-In case that you ever need to stop the MySQL service, you could do so with the following command:
-
-```
-brew services stop mysql
-```
-
-### Install MySQL on Windows
-
-To install MySQL on Windows, I would recommend following the steps from the official documentation here:
-
-[https://dev.mysql.com/doc/refman/8.0/en/windows-installation.html](https://dev.mysql.com/doc/refman/8.0/en/windows-installation.html)
-
-## Accessing MySQL via CLI
-
-To access MySQL run the `mysql` command followed by your user:
-
-```
-mysql -u root -p
-```
-
-## Creating a database
-
-After that, switch to the `demo` database that we created in the previous chapter:
-
-```sql
-USE demo;
-```
-
-To exit the just type the following:
-
-```
-exit;
-```
-
-## Configuring `.my.cnf`
-
-By configuring the `~/.my.cnf` file in your user's home directory, MySQL would allow you to log in without prompting you for a password.
-
-To make that change, what you need to do is first create a `.my.cnf` file in your user's home directory:
-
-```
-touch ~/.my.cnf
-```
-
-After that, set secure permissions so that other regular users could not read the file:
-
-```
-chmod 600 ~/.my.cnf
-```
-
-Then using your favourite text editor, open the file:
-
-```
-nano ~/.my.cnf
-```
-
-And add the following configuration:
-
-```
-[client]
-user=YOUR_MYSQL_USERNAME
-password=YOUR_MYSQL_PASSWORD
-```
-
-Make sure to update your MySQL credentials accordingly, then save the file and exit.
-
-After that, if you run just `mysql`, you will be authenticated directly with the credentials that you've specified in the `~/.my.cnf` file without being prompted for a password.
-
-## The mysqladmin command
-
-As a quick test, you could check all of your open SQL connections by running the following command:
-
-```
-mysqladmin proc
-```
-
-The `mysqladmin` tool would also use the client details from the `~/.my.cnf` file, and it would list your current MySQL process list.
-
-Another cool thing that you could try doing is combining this with the `watch` command and kind of monitor your MySQL connections in almost real-time:
-
-```
-watch -n1 mysqladmin proc
-```
-
-To stop the `watch` command, just hit `CTRL+C`
-
-## GUI clients
-
-If you prefer using GUI clients, you could take a look a the following ones and install them locally on your laptop:
-
-* [MySQL Workbench](https://www.mysql.com/products/workbench/)
-* [Sequel Pro](https://www.sequelpro.com/)
-* [TablePlus](https://tableplus.com/)
-
-This will allow you to connect to your database via a graphical interface rather than the `mysql` command-line tool.
-
-If you want to have a production-ready MySQL database, I would recommend giving DigitalOcean a try:
-
-[Worry-free managed database hosting](https://www.digitalocean.com/products/managed-databases/)