Merge pull request weareunderdesign#811 from rnbwdev/dev

Merge Dev to Main

README.md

@@ -85,9 +85,32 @@ rainbow is heavily dependent on incredible technologies. if you’re considering
 - [svg-icon.js](https://github.com/rnbwdev/svg-icon.js) - an svg icon component for the web. optimized for smooth design and development experience. it fits into any web framework and can be used anyhow.
 - [raincons](https://github.com/rnbwdev/raincons) - 12x12 icon set.
 
+## bundle
+
+To create `rnbw` bundle file, run the following command:
+
+```
+npm run build
+```
+
+You’ll find the generated file at `/dist/client.bundle.js`
+
+## release
+
+To release `rnbw`, follow these simple steps:
+1. Push Changes in `main` branch.
+2. GitHub Actions will automatically trigger the workflow to release `rnbw`.
+
+### GitHub action workflow overview
+
+The workflow file [`deploy.yml`](https://github.com/rnbwdev/rnbw/blob/main/.github/workflows/deploy.yml) runs ***Build*** and ***Deploy*** jobs.
+
+1. ***Build***: This job is responsible for preparing the project for deployment. It checks out the repository, detects the package manager, sets up Node.js, installs dependencies, builds the project, and uploads the built project.
+2. ***Deploy***:  This job handles the deployment to GitHub Pages.
+
 ## community
 
 join the [community](https://github.com/orgs/rnbwdev/discussions) to chat with other community members, ask questions ideas, and share your work.
 
 ## license
-[GNU General Public License, version 3](https://www.gnu.org/licenses/gpl-3.0.en.html)
+[GNU General Public License, version 3](https://www.gnu.org/licenses/gpl-3.0.en.html)

src/_node/file/apis.ts

@@ -89,6 +89,7 @@ export const loadIDBProject = async (
         deletedUidsObj[uid] = true;
       });
     }
+    await _createIDBDirectory(`/${projectPath}`);
 
     // build project root-handler
     const rootHandler: TFileHandlerInfo = {
@@ -344,6 +345,10 @@ export const loadLocalProject = async (
       _fileHandlers[uid] = handler as FileSystemHandle;
     });
 
+    await _createIDBDirectory(
+      `/${(projectHandle as FileSystemDirectoryHandle).name}`,
+    );
+
     return {
       handlerArr,
       _fileHandlers,
@@ -377,14 +382,20 @@ export const buildNohostIDB = async (
     // Process handlerArr
     await Promise.all(
       handlerArr.map(async (_handler) => {
-        const { kind, path, content } = _handler;
+        const { kind, path } = _handler;
         if (kind === "directory") {
           try {
             await _createIDBDirectory(path);
           } catch (err) {
             console.error("Error while creating IDB directory", err);
           }
-        } else {
+        }
+      }),
+    );
+    await Promise.all(
+      handlerArr.map(async (_handler) => {
+        const { kind, path, content } = _handler;
+        if (kind === "file") {
           try {
             await _writeIDBFile(path, content as Uint8Array);
           } catch (err) {

src/_node/file/nohostApis.ts

@@ -26,9 +26,15 @@ export const _createIDBDirectory = async (path: string): Promise<void> => {
   return new Promise<void>((resolve, reject) => {
     _fs.exists(path, function (exists: boolean) {
       if (!exists) {
-        _fs.mkdir(path, (err: Error) => {
-          err ? reject(err) : resolve();
+        _fs.mkdir(path, { recursive: true }, (err: Error) => {
+          if (err) {
+            reject(err);
+          } else {
+            resolve();
+          }
         });
+      } else {
+        resolve();
       }
     });
   });

src/_redux/main/fileTree/slice.ts

@@ -53,10 +53,6 @@ const fileTreeSlice = createSlice({
       const initialFileUidToOpen = action.payload;
       state.initialFileUidToOpen = initialFileUidToOpen;
     },
-    setCurrentFileUid(state, action: PayloadAction<TNodeUid>) {
-      const currentFileUid = action.payload;
-      state.currentFileUid = currentFileUid;
-    },
     setPrevFileUid(state, action: PayloadAction<TNodeUid>) {
       const prevFileUid = action.payload;
       state.prevFileUid = prevFileUid;
@@ -146,7 +142,6 @@ export const {
   setFileTree,
   setFileTreeNodes,
   setInitialFileUidToOpen,
-  setCurrentFileUid,
   setPrevFileUid,
   setRenderableFileUid,
 

src/_redux/main/nodeTree/event/slice.ts

@@ -15,6 +15,7 @@ import { TNodeEventReducerState } from "./types";
 const nodeEventReducerInitialState: TNodeEventReducerState = {
   currentFileContent: "",
   selectedNodeUids: [],
+  currentFileUid: "",
 };
 const nodeEventSlice = createSlice({
   name: "nodeEvent",
@@ -26,24 +27,23 @@ const nodeEventSlice = createSlice({
     },
     setSelectedNodeUids(state, action: PayloadAction<TNodeUid[]>) {
       const selectedNodeUids = action.payload;
-
-      // if (
-      //   !selectedNodeUids.every((item) => state.selectedNodeUids.includes(item))
-      // ) {
-
       state.selectedNodeUids = [...selectedNodeUids];
-      // }
     },
     setNeedToSelectNodeUids(state, action: PayloadAction<TNodeUid[]>) {
       const needToSelectNodeUids = action.payload;
       state.selectedNodeUids = needToSelectNodeUids;
     },
+    setCurrentFileUid(state, action: PayloadAction<TNodeUid>) {
+      const currentFileUid = action.payload;
+      state.currentFileUid = currentFileUid;
+    },
   },
 });
 export const {
   setCurrentFileContent,
   setSelectedNodeUids,
   setNeedToSelectNodeUids,
+  setCurrentFileUid,
 } = nodeEventSlice.actions;
 export const NodeEventReducer = undoable(nodeEventSlice.reducer, {
   limit: NodeTree_Event_StoreLimit,
@@ -62,4 +62,10 @@ export const NodeEventReducer = undoable(nodeEventSlice.reducer, {
     }
     return null;
   },
+  filter: (action, currentState) => {
+    const ignoreActionTypes = ["nodeEvent/setCurrentFileUid"];
+    if (ignoreActionTypes.includes(action.type)) return false;
+    if (currentState.currentFileUid.split(".")[1] !== "html") return false;
+    return true;
+  },
 });

src/_redux/main/nodeTree/event/types.ts

@@ -3,6 +3,7 @@ import { TNodeUid } from "@_node/types";
 export type TNodeEventReducerState = {
   currentFileContent: string;
   selectedNodeUids: TNodeUid[];
+  currentFileUid: string;
 };
 
 export type TNodeEvent = {

src/_redux/useAppState.tsx

@@ -10,7 +10,6 @@ export const useAppState = () => {
         workspace,
         project,
         initialFileUidToOpen,
-        currentFileUid,
         prevFileUid,
         renderableFileUid,
         fileTree,
@@ -44,7 +43,7 @@ export const useAppState = () => {
       },
       nodeEvent: {
         past: nodeEventPast,
-        present: { currentFileContent, selectedNodeUids },
+        present: { currentFileContent, selectedNodeUids, currentFileUid },
         future: nodeEventFuture,
       },
       stageView: { iframeSrc, iframeLoading, linkToOpen, syncConfigs },

src/components/main/actionsPanel/ActionsPanel.tsx

@@ -11,9 +11,11 @@ import {
   PanelResizeHandle,
 } from "react-resizable-panels";
 import { useAppState } from "@_redux/useAppState";
+import { getFileExtension } from "./navigatorPanel/helpers";
 
 export default function ActionsPanel() {
-  const { showFilePanel, selectedNodeUids } = useAppState();
+  const { showFilePanel, selectedNodeUids, currentFileUid, fileTree } =
+    useAppState();
 
   const [sizes, setSizes] = useState([0, 100]);
   const filePanelRef = useRef<ImperativePanelHandle>(null);
@@ -24,6 +26,11 @@ export default function ActionsPanel() {
       : filePanelRef.current?.resize(0);
   }, [showFilePanel]);
 
+  const isCurrentFileHtml = useMemo(() => {
+    const fileNode = fileTree[currentFileUid];
+    return fileNode && getFileExtension(fileNode) === "html";
+  }, [fileTree, currentFileUid]);
+
   return useMemo(() => {
     return (
       <div
@@ -52,11 +59,11 @@ export default function ActionsPanel() {
             <PanelResizeHandle className="panel-resize-vertical" />
           )}
           <Panel defaultSize={sizes[1]} minSize={10} maxSize={100} order={1}>
-            <NodeTreeView />
+            {isCurrentFileHtml && <NodeTreeView />}
           </Panel>
         </PanelGroup>
-        {selectedNodeUids.length == 1 && <SettingsPanel />}
+        {selectedNodeUids.length == 1 && isCurrentFileHtml && <SettingsPanel />}
       </div>
     );
-  }, [sizes, showFilePanel, selectedNodeUids]);
+  }, [sizes, showFilePanel, selectedNodeUids, isCurrentFileHtml]);
 }

src/components/main/actionsPanel/navigatorPanel/NavigatorPanel.tsx

@@ -1,4 +1,11 @@
-import React, { useContext, useEffect, useMemo, useRef, useState } from "react";
+import React, {
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 
 import { MainContext } from "@_redux/main";
 import { useAppState } from "@_redux/useAppState";
@@ -43,19 +50,46 @@ export default function NavigatorPanel() {
     setUnsavedProject(false);
   }, [fileTree]);
 
-  useEffect(() => {
+  const updateFavicon = useCallback(() => {
     const link = document.querySelector("link[rel~='icon']") as HTMLLinkElement;
+    const lightThemeIcon = unsavedProject
+      ? unsavedProjectLightImg
+      : projectLightImg;
+    const darkThemeIcon = unsavedProject
+      ? unsavedProjectDarkImg
+      : projectDarkImg;
+
+    const systemTheme = window.matchMedia("(prefers-color-scheme: dark)")
+      .matches
+      ? "Dark"
+      : "Light";
+
     if (link) {
-      link.href = unsavedProject
-        ? theme === "Light"
-          ? unsavedProjectLightImg
-          : unsavedProjectDarkImg
-        : theme === "Light"
-          ? projectLightImg
-          : projectDarkImg;
+      if (systemTheme === "Dark") {
+        link.href = darkThemeIcon;
+      } else {
+        link.href = lightThemeIcon;
+      }
     }
   }, [unsavedProject, theme]);
 
+  useEffect(() => {
+    updateFavicon();
+  }, [updateFavicon]);
+
+  useEffect(() => {
+    const lightTheme = window.matchMedia("(prefers-color-scheme: light)");
+    const darkTheme = window.matchMedia("(prefers-color-scheme: dark)");
+
+    lightTheme.addEventListener("change", updateFavicon);
+    darkTheme.addEventListener("change", updateFavicon);
+
+    return () => {
+      lightTheme.removeEventListener("change", updateFavicon);
+      darkTheme.removeEventListener("change", updateFavicon);
+    };
+  }, [updateFavicon]);
+
   const navigatorPanelRef = useRef<HTMLDivElement | null>(null);
 
   const {

src/components/main/actionsPanel/navigatorPanel/constants.ts

@@ -1,8 +1,8 @@
 export const unsavedProjectDarkImg =
-  window.location.origin + "/images/favicon-dark-active.png";
+  window.location.origin + "/images/favicon-dark-active.svg";
 export const unsavedProjectLightImg =
-  window.location.origin + "/images/favicon-light-active.png";
+  window.location.origin + "/images/favicon-light-active.svg";
 export const projectDarkImg =
-  window.location.origin + "/images/favicon-dark.png";
+  window.location.origin + "/images/favicon-dark.svg";
 export const projectLightImg =
-  window.location.origin + "/images/favicon-light.png";
+  window.location.origin + "/images/favicon-light.svg";