chore: extract @k8slens/resizing-anchor

Signed-off-by: Gabriel <gaccettola@mirantis.com>

packages/core/package.json

@@ -316,6 +316,7 @@
     "@k8slens/application-for-electron-main": "^6.5.0-alpha.0",
     "@k8slens/button": "^1.0.0-alpha.5",
     "@k8slens/error-boundary": "^1.0.0-alpha.5",
+    "@k8slens/resizing-anchor": "^1.0.0-alpha.5",
     "@k8slens/routing": "^1.0.0-alpha.5",
     "@k8slens/cluster-settings": "^6.5.0-alpha.1",
     "@k8slens/kubectl-versions": "^1.0.0-alpha.0",

packages/core/src/renderer/components/dock/dock.tsx

@@ -10,7 +10,7 @@ import { cssNames } from "@k8slens/utilities";
 import { Icon } from "../icon";
 import { MenuItem } from "../menu";
 import { MenuActions } from "../menu/menu-actions";
-import { ResizeDirection, ResizingAnchor } from "../resizing-anchor";
+import { ResizeDirection, ResizingAnchor } from "@k8slens/resizing-anchor";
 import { CreateResource } from "./create-resource/view";
 import { DockTabs } from "./dock-tabs";
 import type { DockStore, DockTab } from "./dock/store";

packages/core/src/renderer/components/drawer/drawer.tsx

@@ -13,7 +13,7 @@ import { cssNames, noop } from "@k8slens/utilities";
 import { Icon } from "../icon";
 import type { AnimateName } from "../animate";
 import { Animate } from "../animate";
-import { ResizeDirection, ResizeGrowthDirection, ResizeSide, ResizingAnchor } from "../resizing-anchor";
+import { ResizeDirection, ResizeGrowthDirection, ResizeSide, ResizingAnchor } from "@k8slens/resizing-anchor";
 import drawerStorageInjectable, { defaultDrawerWidth } from "./drawer-storage/drawer-storage.injectable";
 import { withInjectables } from "@ogre-tools/injectable-react";
 import { historyInjectionToken } from "@k8slens/routing";

packages/core/src/renderer/components/layout/main-layout.tsx

@@ -9,7 +9,7 @@ import React from "react";
 import { observer } from "mobx-react";
 import { cssNames } from "@k8slens/utilities";
 import { ErrorBoundary } from "@k8slens/error-boundary";
-import { ResizeDirection, ResizeGrowthDirection, ResizeSide, ResizingAnchor } from "../resizing-anchor";
+import { ResizeDirection, ResizeGrowthDirection, ResizeSide, ResizingAnchor } from "@k8slens/resizing-anchor";
 import { withInjectables } from "@ogre-tools/injectable-react";
 import type { SidebarStorageState } from "./sidebar-storage/sidebar-storage.injectable";
 import sidebarStorageInjectable, { defaultSidebarWidth } from "./sidebar-storage/sidebar-storage.injectable";

packages/ui-components/resizing-anchor/.eslintrc.json

@@ -0,0 +1,6 @@
+{
+  "extends": "@k8slens/eslint-config/eslint",
+  "parserOptions": {
+    "project": "./tsconfig.json"
+  }
+}

packages/ui-components/resizing-anchor/README.md

@@ -0,0 +1,15 @@
+# @k8slens/resizing-anchor
+
+This package contains stuff related to creating Lens-applications. 
+
+# Usage
+
+```bash
+$ npm install @k8slens/resizing-anchor
+```
+
+```typescript
+import { ResizeDirection, ResizeGrowthDirection, ResizeSide, ResizingAnchor } from "@k8slens/resizing-anchor";
+```
+
+## Extendability

packages/ui-components/resizing-anchor/index.ts

@@ -3,4 +3,4 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 
-export * from "./resizing-anchor";
+export * from "./src/resizing-anchor";

packages/ui-components/resizing-anchor/jest.config.js

@@ -0,0 +1 @@
+module.exports = require("@k8slens/jest").monorepoPackageConfig(__dirname).configForReact;

packages/ui-components/resizing-anchor/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@k8slens/resizing-anchor",
+  "private": false,
+  "version": "1.0.0-alpha.5",
+  "description": "Highly extendable resizing-anchor in the Lens.",
+  "type": "commonjs",
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/lensapp/lens.git"
+  },
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "author": {
+    "name": "OpenLens Authors",
+    "email": "info@k8slens.dev"
+  },
+  "license": "MIT",
+  "homepage": "https://github.com/lensapp/lens",
+  "scripts": {
+    "build": "webpack",
+    "lint": "lens-lint",
+    "lint:fix": "lens-lint --fix"
+  },
+  "peerDependencies": {
+    "@k8slens/feature-core": "^6.5.0-alpha.0",
+    "@k8slens/utilities": "^1.0.0-alpha.1",
+    "@ogre-tools/injectable": "^15.3.1",
+    "@ogre-tools/injectable-extension-for-auto-registration": "^15.3.0",
+    "@ogre-tools/fp": "^15.3.1",
+    "auto-bind": "^4.0.0",
+    "lodash": "^4.17.21",
+    "mobx": "^6.8.0",
+    "mobx-react": "^7.6.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
+  },
+  "devDependencies": {
+    "@async-fn/jest": "^1.6.4",
+    "@k8slens/eslint-config": "6.5.0-alpha.1",
+    "@k8slens/react-testing-library-discovery": "^1.0.0-alpha.0"
+  }
+}

packages/ui-components/resizing-anchor/src/resizing-anchor.tsx

@@ -150,8 +150,11 @@ function directionDelta(P1: number, P2: number, M: number): number | false {
 @observer
 export class ResizingAnchor extends React.PureComponent<ResizingAnchorProps> {
   @observable lastMouseEvent?: MouseEvent;
+
   ref = React.createRef<HTMLDivElement>();
+
   @observable isDragging = false;
+
   @observable wasDragging = false;
 
   static defaultProps = {
@@ -169,6 +172,7 @@ export class ResizingAnchor extends React.PureComponent<ResizingAnchorProps> {
     minExtent: 0,
     placement: ResizeSide.LEADING,
   };
+
   static IS_RESIZING = "resizing";
 
   constructor(props: ResizingAnchorProps) {
@@ -220,11 +224,12 @@ export class ResizingAnchor extends React.PureComponent<ResizingAnchorProps> {
     const boundingBox = node.getBoundingClientRect();
 
     if (this.props.direction === ResizeDirection.HORIZONTAL) {
-      const barX = Math.round(boundingBox.x + (boundingBox.width / 2));
+      const barX = Math.round(boundingBox.x + boundingBox.width / 2);
 
       return directionDelta(from.pageX, to.pageX, barX);
-    } else { // direction === ResizeDirection.VERTICAL
+    } else {
-      const barY = Math.round(boundingBox.y + (boundingBox.height / 2));
+      // direction === ResizeDirection.VERTICAL
+      const barY = Math.round(boundingBox.y + boundingBox.height / 2);
 
       return directionDelta(from.pageY, to.pageY, barY);
     }
@@ -254,8 +259,15 @@ export class ResizingAnchor extends React.PureComponent<ResizingAnchorProps> {
       return;
     }
 
-    const { maxExtent, minExtent, getCurrentExtent, growthDirection } = this.props;
+    const { maxExtent, minExtent, getCurrentExtent, growthDirection } =
-    const { onDrag, onMaxExtentExceed, onMinExtentSucceed: onMinExtentSubceed, onMaxExtentSubceed, onMinExtentExceed } = this.props;
+      this.props;
+    const {
+      onDrag,
+      onMaxExtentExceed,
+      onMinExtentSucceed: onMinExtentSubceed,
+      onMaxExtentSubceed,
+      onMinExtentExceed,
+    } = this.props;
     const delta = this.calculateDelta(this.lastMouseEvent, event);
 
     // always update the last mouse event
@@ -266,8 +278,10 @@ export class ResizingAnchor extends React.PureComponent<ResizingAnchorProps> {
     }
 
     const previousExtent = getCurrentExtent();
-    const unboundedExtent = previousExtent + (delta * growthDirection);
+    const unboundedExtent = previousExtent + delta * growthDirection;
-    const boundedExtent = Math.round(Math.max(minExtent, Math.min(maxExtent, unboundedExtent)));
+    const boundedExtent = Math.round(
+      Math.max(minExtent, Math.min(maxExtent, unboundedExtent))
+    );
 
     onDrag(boundedExtent);
 
@@ -292,7 +306,7 @@ export class ResizingAnchor extends React.PureComponent<ResizingAnchorProps> {
     this.isDragging = false;
     this.wasDragging = true;
 
-    setTimeout(() => this.wasDragging = false, 200);
+    setTimeout(() => (this.wasDragging = false), 200);
   });
 
   render() {
@@ -301,7 +315,11 @@ export class ResizingAnchor extends React.PureComponent<ResizingAnchorProps> {
     return (
       <div
         ref={this.ref}
-        className={cssNames("ResizingAnchor", direction, placement, { disabled, resizing: this.isDragging, wasDragging: this.wasDragging })}
+        className={cssNames("ResizingAnchor", direction, placement, {
+          disabled,
+          resizing: this.isDragging,
+          wasDragging: this.wasDragging,
+        })}
         onMouseDown={this.onDragInit}
         onDoubleClick={onDoubleClick}
       />

packages/ui-components/resizing-anchor/tailwind.config.js

@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+const path = require('path');
+
+module.exports = {
+  content: [
+    path.join(__dirname, "src/**/*.tsx")
+  ],
+  darkMode: "class",
+  theme: {
+    fontFamily: {
+      sans: ["Roboto", "Helvetica", "Arial", "sans-serif"],
+    },
+    extend: {
+      colors: {
+        textAccent: "var(--textColorAccent)",
+        textPrimary: "var(--textColorPrimary)",
+        textTertiary: "var(--textColorTertiary)",
+        textDimmed: "var(--textColorDimmed)",
+      },
+    },
+  },
+  variants: {
+    extend: {},
+  },
+  plugins: [],
+};

packages/ui-components/resizing-anchor/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "@k8slens/typescript/config/base.json",
+  "include": ["**/*.ts", "**/*.tsx"],
+}

packages/ui-components/resizing-anchor/webpack.config.js

@@ -0,0 +1 @@
+module.exports = require("@k8slens/webpack").configForReact;