kenclaron · kenclaron · Aug 2, 2025 · Aug 2, 2025 · Aug 2, 2025 · Aug 2, 2025
diff --git a/.github/workflows/nextjs.yml b/.github/workflows/nextjs.yml
@@ -73,6 +73,7 @@ jobs:
         run: npm run build
         env:
           NEXT_PUBLIC_BASE_PATH: ${{ vars.NEXT_PUBLIC_BASE_PATH }}
+          NEXT_PUBLIC_BRANCH_NAME: ${{ github.ref_name }}
           NEXT_PUBLIC_OPENGRAPH_IMAGE: ${{ vars.NEXT_PUBLIC_OPENGRAPH_IMAGE }}
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v3

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "react-instastories",
-  "version": "1.0.6",
-  "description": "The next generation of React Stories Library",
+  "version": "1.0.7",
+  "description": "The next generation of React Stories Library.",
   "author": {
     "name": "Dmitry Britov",
     "email": "kenclaron@gmail.com",
@@ -47,24 +47,25 @@
     "react-dom": "^16.14.0 || ^17 || ^18 || ^19"
   },
   "devDependencies": {
-    "@eslint/eslintrc": "^3.1.0",
-    "@eslint/js": "^9.10.0",
+    "@eslint/eslintrc": "^3.3.1",
+    "@eslint/js": "^9.32.0",
     "@trivago/prettier-plugin-sort-imports": "^4.3.0",
-    "@typescript-eslint/eslint-plugin": "^8.5.0",
-    "eslint": "^9.10.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-prettier": "^5.2.1",
-    "eslint-plugin-react": "^7.36.1",
+    "@typescript-eslint/eslint-plugin": "^8.38.0",
+    "@typescript-eslint/parser": "^8.38.0",
+    "eslint": "^9.32.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier": "^5.5.3",
+    "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-security": "^3.0.1",
-    "gh-pages": "^6.1.1",
-    "globals": "^15.9.0",
+    "gh-pages": "^6.3.0",
+    "globals": "^16.3.0",
     "npm-run-all": "^4.1.5",
-    "prettier": "^3.3.3",
+    "prettier": "^3.6.2",
     "prettier-plugin-css-order": "^2.1.2",
-    "stylelint": "^16.9.0",
+    "stylelint": "^16.23.0",
     "stylelint-config-standard-scss": "^13.1.0",
-    "stylelint-prettier": "^5.0.2",
-    "typescript": "^5.5.4"
+    "stylelint-prettier": "^5.0.3",
+    "typescript": "^5.8.3"
   },
   "workspaces": [
     "packages/*"

diff --git a/packages/base/package.json b/packages/base/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@react-instastories/base",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "description": "The next generation of React Stories Library.",
   "author": {
     "name": "Dmitry Britov",
@@ -44,12 +44,12 @@
     "react-dom": "^16.14.0 || ^17 || ^18 || ^19"
   },
   "devDependencies": {
-    "@types/node": "^22.5.5",
-    "@types/react": "^18.3.8",
-    "@types/react-dom": "^18.3.0",
+    "@types/node": "^24.1.0",
+    "@types/react": "^19.1.9",
+    "@types/react-dom": "^19.1.7",
     "microbundle": "^0.15.1",
     "sass": "<=1.78.0",
-    "typescript": "^5.5.4"
+    "typescript": "^5.8.3"
   },
   "files": [
     "dist"

diff --git a/packages/base/src/components/Configurable/Configurable.tsx b/packages/base/src/components/Configurable/Configurable.tsx
@@ -28,7 +28,7 @@ interface ComponentProps<T extends Configurable = Configurable>
  * @returns The rendered configurable children elements.
  */
 export function Container({ children }: Pick<ComponentProps, "children">) {
-  return children;
+  return children as JSX.Element | null;
 }
 
 /**

diff --git a/packages/base/src/components/Viewer/Container.tsx b/packages/base/src/components/Viewer/Container.tsx
@@ -69,14 +69,14 @@ function getHTMLProps(props: StoryProps | PagesProps = {}) {
  * @returns A memoized list of React elements to render.
  */
 export function useContentChildren(
-  ref: React.RefObject<HTMLDivElement>,
+  ref: React.RefObject<HTMLDivElement | null>,
   Events: React.FunctionComponent<React.PropsWithChildren>
 ) {
   const viewer = useViewerContext();
   const stories = useStoriesContext();
   const pages = usePagesContext();
 
-  const previous = React.useRef<{ page: number; story: number }>();
+  const previous = React.useRef<{ page: number; story: number }>(undefined);
 
   React.useEffect(() => {
     previous.current = { page: pages.current, story: stories.current };

diff --git a/packages/base/src/components/Viewer/List.tsx b/packages/base/src/components/Viewer/List.tsx
@@ -33,7 +33,12 @@ interface ListProps {
  *
  * @returns A React component that renders a list of Page components.
  */
-export function List({ pages, story, start, previous }: ListProps) {
+export function List({
+  pages,
+  story,
+  start,
+  previous
+}: ListProps): JSX.Element | null {
   const isPrevious = React.useCallback(
     (page: number) => previous?.story === story && previous.page === page,
     [previous, story]
@@ -56,24 +61,31 @@ export function List({ pages, story, start, previous }: ListProps) {
     });
   }
 
-  return pages.map((page, key) => {
-    if (!page) return null;
+  return (
+    <React.Fragment>
+      {pages.map((page, key) => {
+        if (!page) return null;
 
-    const previous = isPrevious(key);
-    const priority = isPriority(key);
-    const first = key === 0;
+        const previous = isPrevious(key);
+        const priority = isPriority(key);
+        const first = key === 0;
 
-    if (previous || priority || first)
-      return React.cloneElement(page, {
-        ...page.props,
-        key,
-        preload: true,
-        priority
-      });
-    else if (page.props?.preload)
-      return React.cloneElement(page, { ...page.props, key });
-    else return null;
-  });
+        if (previous || priority || first)
+          return React.cloneElement(page, {
+            ...page.props,
+            key,
+            preload: true,
+            priority
+          });
+        else if (page.props?.preload)
+          return React.cloneElement(page, {
+            ...page.props,
+            key
+          });
+        else return null;
+      })}
+    </React.Fragment>
+  );
 }
 
 export default List;
diff --git a/packages/base/src/hooks/useConfigurable.ts b/packages/base/src/hooks/useConfigurable.ts
@@ -67,7 +67,7 @@ function useSection<T extends Configurable>(): Section<T> {
     () =>
       state?.children
         ? function Configurable() {
-            return state?.children;
+            return state?.children as JSX.Element | null;
           }
         : null,
     [state?.children]

diff --git a/packages/external/package.json b/packages/external/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@react-instastories/external",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "description": "External optional components for the next generation of React Stories Library.",
   "author": {
     "name": "Dmitry Britov",
@@ -45,12 +45,12 @@
     "react-dom": "^16.14.0 || ^17 || ^18 || ^19"
   },
   "devDependencies": {
-    "@types/node": "^22.5.5",
-    "@types/react": "^18.3.8",
-    "@types/react-dom": "^18.3.0",
+    "@types/node": "^24.1.0",
+    "@types/react": "^19.1.9",
+    "@types/react-dom": "^19.1.7",
     "microbundle": "^0.15.1",
     "sass": "<=1.78.0",
-    "typescript": "^5.5.4"
+    "typescript": "^5.8.3"
   },
   "files": [
     "dist"

diff --git a/packages/external/src/components/Events/Focus/Timer/Timer.ts b/packages/external/src/components/Events/Focus/Timer/Timer.ts
@@ -33,7 +33,7 @@ export function Timer({ children }: TimerEventProps) {
     };
   }, [viewer.shown, timer.pause, timer.start]);
 
-  return children;
+  return children as JSX.Element;
 }
 
 Timer.displayName = "Events.Focus.Timer";

diff --git a/packages/external/src/components/Events/Keyboard/Close/Close.ts b/packages/external/src/components/Events/Keyboard/Close/Close.ts
@@ -38,7 +38,7 @@ export function Close({ children }: KeyboardEventProps) {
     };
   }, [viewer.shown, onKeydown]);
 
-  return children;
+  return children as JSX.Element;
 }
 
 Close.displayName = "Events.Keyboard.Close";

diff --git a/packages/external/src/components/Events/Keyboard/Pages/Pages.ts b/packages/external/src/components/Events/Keyboard/Pages/Pages.ts
@@ -8,7 +8,7 @@ export function Pages({ children }: KeyboardEventProps) {
   const context = usePagesContext();
   useKeyboardMovement(context, { previous: "ArrowLeft", next: "ArrowRight" });
 
-  return children;
+  return children as JSX.Element;
 }
 
 Pages.displayName = "Events.Keyboard.Pages";

diff --git a/packages/external/src/components/Events/Keyboard/Stories/Stories.ts b/packages/external/src/components/Events/Keyboard/Stories/Stories.ts
@@ -8,7 +8,7 @@ export function Stories({ children }: KeyboardEventProps) {
   const context = useStoriesContext();
   useKeyboardMovement(context, { previous: "ArrowDown", next: "ArrowUp" });
 
-  return children;
+  return children as JSX.Element;
 }
 
 Stories.displayName = "Events.Keyboard.Stories";

diff --git a/packages/external/src/components/Events/Mount/AutoClose/AutoClose.tsx b/packages/external/src/components/Events/Mount/AutoClose/AutoClose.tsx
@@ -32,7 +32,7 @@ export function AutoClose({ children }: AutoCloseEventProps) {
     viewer.close();
   }, [stories.canNext, pages.canNext, timer.expired, viewer.close]);
 
-  return children;
+  return children as JSX.Element;
 }
 
 AutoClose.displayName = "Events.Mount.AutoClose";

diff --git a/packages/external/src/components/Events/Mount/Interactive/Interactive.tsx b/packages/external/src/components/Events/Mount/Interactive/Interactive.tsx
@@ -25,7 +25,7 @@ export function Interactive({ element, children }: InteractiveEventProps) {
     return () => interactive.enable(items);
   }, [element]);
 
-  return children;
+  return children as JSX.Element;
 }
 
 Interactive.displayName = "Events.Mount.Interactive";

diff --git a/packages/external/src/components/Events/Pointer/Close/Close.ts b/packages/external/src/components/Events/Pointer/Close/Close.ts
@@ -244,7 +244,7 @@ export function Close({ element, children }: ClosePointerEventProps) {
     };
   }, [viewer.transition.step, onKeydown]);
 
-  return children;
+  return children as JSX.Element;
 }
 
 Close.displayName = "Events.Pointer.Close";

diff --git a/packages/external/src/components/Events/Pointer/Stories/Stories.ts b/packages/external/src/components/Events/Pointer/Stories/Stories.ts
@@ -274,7 +274,7 @@ export function Stories({ element, children }: MovementPointerEventProps) {
     };
   }, [viewer.transition.step, onBlur, onPointerMove, onPointerUp]);
 
-  return children;
+  return children as JSX.Element;
 }
 
 Stories.displayName = "Events.Pointer.Stories";

diff --git a/packages/external/src/components/Events/Pointer/Timer/Timer.ts b/packages/external/src/components/Events/Pointer/Timer/Timer.ts
@@ -70,7 +70,7 @@ export function Timer({ element, children }: TimerEventProps) {
     };
   }, [element, onPointerDown, onPointerUp, onPointerLeave]);
 
-  return children;
+  return children as JSX.Element;
 }
 
 Timer.displayName = "Events.Pointer.Timer";

diff --git a/packages/presets/package.json b/packages/presets/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@react-instastories/presets",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "description": "Style presets for the next generation of React Stories Library.",
   "author": {
     "name": "Dmitry Britov",

diff --git a/packages/presets/src/ig.scss b/packages/presets/src/ig.scss
@@ -79,8 +79,8 @@ $is-preset-ig-mobile-width: 768px;
     pointer-events: none;
 
     .instastories-story:has(
-        ~ .instastories-story:not(.instastories-story--disabled)
-      ) {
+      ~ .instastories-story:not(.instastories-story--disabled)
+    ) {
       transform: rotateY(-90deg) translate(0%, 0%)
         translateZ(calc(47.85dvh / 2));
       opacity: 0;
@@ -114,8 +114,8 @@ $is-preset-ig-mobile-width: 768px;
       padding-block: 2.5em;
 
       .instastories-story:has(
-          ~ .instastories-story:not(.instastories-story--disabled)
-        ) {
+        ~ .instastories-story:not(.instastories-story--disabled)
+      ) {
         transform: scale(0.4) translate(calc(-300% - 8em - 1.25em), -125%);
         opacity: 1;
         transition: var(--is-preset-ig-transition-all);

diff --git a/packages/presets/src/tg.scss b/packages/presets/src/tg.scss
@@ -28,8 +28,9 @@ $is-preset-tg-mobile-width: 600px;
   --is-preset-tg-background: #000e;
   --is-preset-tg-transition-all: all 0.4s ease;
   --is-preset-tg-transition-opacity: opacity 0.2s ease;
-  --is-preset-tg-transition-transformation: transform 0.4s ease, width 0.4s ease,
-    height 0.4s ease, left 0.4s ease, top 0.4s ease, opacity 0.2s ease;
+  --is-preset-tg-transition-transformation:
+    transform 0.4s ease, width 0.4s ease, height 0.4s ease, left 0.4s ease,
+    top 0.4s ease, opacity 0.2s ease;
 }
 
 [data-preset="instastories-preset-tg"].instastories-viewer {
@@ -72,8 +73,8 @@ $is-preset-tg-mobile-width: 600px;
 
   &--exiting .instastories-viewer-content {
     .instastories-story:has(
-        ~ .instastories-story:not(.instastories-story--disabled)
-      ),
+      ~ .instastories-story:not(.instastories-story--disabled)
+    ),
     .instastories-story + .instastories-story--disabled {
       position: fixed !important;
       top: 50% !important;
@@ -90,8 +91,8 @@ $is-preset-tg-mobile-width: 600px;
     }
 
     .instastories-story:has(
-        ~ .instastories-story:not(.instastories-story--disabled)
-      ) {
+      ~ .instastories-story:not(.instastories-story--disabled)
+    ) {
       transform: scale(0.4) translate(calc(-300% - 8em - 1.25em), -125%) !important;
     }
 
@@ -112,8 +113,8 @@ $is-preset-tg-mobile-width: 600px;
     pointer-events: none;
 
     .instastories-story:has(
-        ~ .instastories-story:not(.instastories-story--disabled)
-      ) {
+      ~ .instastories-story:not(.instastories-story--disabled)
+    ) {
       opacity: 0;
       z-index: -1;
     }
@@ -133,8 +134,8 @@ $is-preset-tg-mobile-width: 600px;
       padding-block: 2.5em;
 
       .instastories-story:has(
-          ~ .instastories-story:not(.instastories-story--disabled)
-        ) {
+        ~ .instastories-story:not(.instastories-story--disabled)
+      ) {
         transform: scale(0.4) translate(calc(-300% - 8em - 1.25em), -125%);
         opacity: 1;
         transition: var(--is-preset-tg-transition-all);

diff --git a/packages/website/.env b/packages/website/.env
@@ -1,2 +1,3 @@
 NEXT_PUBLIC_BASE_PATH=
+NEXT_PUBLIC_BRANCH_NAME=main
 NEXT_PUBLIC_OPENGRAPH_IMAGE=http://localhost:3000/preview.jpg
diff --git a/packages/website/next.config.js b/packages/website/next.config.js
@@ -4,7 +4,10 @@ const withNextra = require("nextra")({
 });
 
 module.exports = withNextra({
-  basePath: process.env.NEXT_PUBLIC_BASE_PATH,
+  basePath:
+    process.env.NEXT_PUBLIC_BASE_PATH !== "/"
+      ? process.env.NEXT_PUBLIC_BASE_PATH
+      : undefined,
   output: "export",
   images: {
     unoptimized: process.env.NODE_ENV === "production"