react-dev-os - npm Package Compare versions

Comparing version 0.0.23 to 0.1.0

package.json

 {
   "name": "react-dev-os",
   "author": "Scotty Rogers",
-  "version": "0.0.23",
+  "version": "0.1.0",
   "description": "An interactive development environment for react apps.",
@@ -43,2 +43,3 @@ "license": "ISC",
     "style-loader": "^0.23.1",
+    "url-loader": "^4.1.0",
     "webpack": "^4.35.3",
@@ -45,0 +46,0 @@ "webpack-cli": "^3.3.5"

src/components/DevOS/ToolManager/index.js

@@ -0,9 +1,21 @@
+import React from "react";
 import { useOnWindowEvent } from "@library/hooks";
-import { createToolBrowser } from "./helpers";
+import store from "@store";
+import { useStore } from "@tools/hooks";
+import ToolBrowser from "./ToolBrowser";
+import styles from "./styles";
 
-const ToolManager = ({ tools }) => {
+const T_KEYCODE = 84;
+
+const ToolManager = ({ tools, style }) => {
+  const formattedTools = tools.map((tool) => (typeof tool === "function" ? tool() : tool));
+  const isOpen = useStore((store) => store.getState("toolBrowser").isOpen);
+
   const handleKeyUp = (event) => {
     const keyCode = event.keyCode;
     const tagName = event.target.tagName.toUpperCase();
-    createToolBrowser({ keyCode, tagName, tools });
+
+    if (tagName !== "INPUT" && tagName !== "TEXTAREA" && keyCode === T_KEYCODE) {
+      store.dispatch("toolBrowser.toggle");
+    }
   };
@@ -13,3 +25,3 @@
 
-  return null;
+  return isOpen && <ToolBrowser style={{ ...styles.toolBrowser, ...style }} tools={formattedTools} />;
 };
@@ -19,4 +31,5 @@
   tools: [],
+  style: {},
 };
 
 export default ToolManager;

src/components/DevOS/WindowManager/Window/Content/styles.js

@@ -1,2 +0,2 @@
-import { colors } from "library/styles";
+import { colors } from "@library/styles";
 
@@ -3,0 +3,0 @@ export default {

src/components/DevOS/WindowManager/Window/Resizable/index.js

@@ -12,3 +12,3 @@ import React from "react";
       style={{ ...style, ...styles.resizable }}
-      minHeight={25}
+      minHeight={24}
       minWidth={95}
@@ -15,0 +15,0 @@ onResize={handleResize}

src/library/ui/common/Resizable/children/ResizableHandles/ResizableHandle/index.js

@@ -23,3 +23,3 @@ import React, { useRef } from "react";
       event.stopImmediatePropagation();
-      onResize(event);
+      requestAnimationFrame(() => onResize(event));
     }
@@ -26,0 +26,0 @@ };

src/procedures/windows/move/calculate-move/index.js

@@ -10,3 +10,3 @@ import pipe from "scr-pipe";
 const checkWindowBottom = (ctx) => {
-  const maxBottom = window.innerHeight - 25;
+  const maxBottom = window.innerHeight - 24;
   const position = { x: ctx.position.x, y: ctx.position.y > maxBottom ? maxBottom : ctx.position.y };
@@ -17,3 +17,3 @@ return { ...ctx, position };
 const checkWindowLeft = (ctx) => {
-  const maxLeft = -(ctx.size.width - 25);
+  const maxLeft = -(ctx.size.width - 24);
   const position = { x: ctx.position.x < maxLeft ? maxLeft : ctx.position.x, y: ctx.position.y };
@@ -24,3 +24,3 @@ return { ...ctx, position };
 const checkWindowRight = (ctx) => {
-  const maxRight = window.innerWidth - 25;
+  const maxRight = window.innerWidth - 24;
   const position = { x: ctx.position.x > maxRight ? maxRight : ctx.position.x, y: ctx.position.y };
@@ -27,0 +27,0 @@ return { ...ctx, position };

src/procedures/windows/resize/calculate-resize/index.js

@@ -10,3 +10,3 @@ import pipe from "scr-pipe";
 const checkWindowBottom = (ctx) => {
-  const maxBottom = window.innerHeight - 25;
+  const maxBottom = window.innerHeight - 24;
   const position = { x: ctx.position.x, y: ctx.position.y > maxBottom ? maxBottom : ctx.position.y };
@@ -17,3 +17,3 @@ return { ...ctx, position };
 const checkWindowLeft = (ctx) => {
-  const maxLeft = -(ctx.size.width - 25);
+  const maxLeft = -(ctx.size.width - 24);
   const position = { x: ctx.position.x < maxLeft ? maxLeft : ctx.position.x, y: ctx.position.y };
@@ -24,3 +24,3 @@ return { ...ctx, position };
 const checkWindowRight = (ctx) => {
-  const maxRight = window.innerWidth - 25;
+  const maxRight = window.innerWidth - 24;
   const position = { x: ctx.position.x > maxRight ? maxRight : ctx.position.x, y: ctx.position.y };
@@ -27,0 +27,0 @@ return { ...ctx, position };

src/store/index.js

 import { Store } from "generic-data-chamber";
 // Store Types //
+import toolBrowser from "./tool-browser";
 import windows from "./windows";
 
-const store = new Store({ name: "dev-tools", types: { windows } });
+const store = new Store({ name: "dev-tools", types: { toolBrowser, windows } });
 export default store;

webpack.config.js

@@ -27,2 +27,13 @@ module.exports = {
       },
+      {
+        test: /\.(png|jpg|gif)$/i,
+        use: [
+          {
+            loader: "url-loader",
+            options: {
+              limit: 8192,
+            },
+          },
+        ],
+      },
     ],
@@ -29,0 +40,0 @@ },

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

121587

increased by33.9%

Number of package files

116

increased by13.73%

Lines of code

1633

increased by20.61%

Worsened metrics

Dev dependency count

12

increased by9.09%

Number of low supply chain risk alerts

1

increased byInfinity%

No dependency changes