Restructure to monorepo (#6907)

* wip: restructure to monorepo

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

* refactor create-release-pr to a package

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

* build fixes

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

* github workflow fixes

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

* fix typo

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

* add webpack-env types to core

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

* fix github workflows

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

* refactor/fix integration tests

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

* lint fix

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

* yarn run dev

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

* eslint settings for vscode

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

* move templates to right package

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

* open-lens build fixes

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

* integration test fix

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

* fix nx task dependencies

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

* use bash shell for unit tests in test workflow

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

* fix test:unit for windows

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

* fix win-ca webpack error in open-lens

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

* fix win-ca webpack error in open-lens

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

* fix build:app on windows

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

* remove ELECTRON_BUILDER_EXTRA_ARGS

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

* sync src/ from master

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

* remove Makefile from core

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

packages/core/src/renderer/components/avatar/__tests__/avatar.test.tsx

@@ -0,0 +1,45 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import React from "react";
+import "@testing-library/jest-dom/extend-expect";
+import { Avatar } from "../avatar";
+import { Icon } from "../../icon";
+import { getDiForUnitTesting } from "../../../getDiForUnitTesting";
+import { type DiRender, renderFor } from "../../test-utils/renderFor";
+
+describe("<Avatar/>", () => {
+  let render: DiRender;
+
+  beforeEach(() => {
+    const di = getDiForUnitTesting({ doGeneralOverrides: true });
+
+    render = renderFor(di);
+  });
+
+  test("renders w/o errors", () => {
+    const { container } = render(<Avatar title="John Ferguson"/>);
+
+    expect(container).toBeInstanceOf(HTMLElement);
+  });
+
+  test("shows capital letters from title", () => {
+    const { getByText } = render(<Avatar title="John Ferguson"/>);
+
+    expect(getByText("JF")).toBeInTheDocument();
+  });
+
+  test("shows custom icon passed as children", () => {
+    const { getByTestId } = render(<Avatar title="John Ferguson"><Icon material="alarm" data-testid="alarm-icon"/></Avatar>);
+
+    expect(getByTestId("alarm-icon")).toBeInTheDocument();
+  });
+
+  test("shows <img/> element if src prop passed", () => {
+    const { getByAltText } = render(<Avatar title="John Ferguson" src="someurl"/>);
+
+    expect(getByAltText("John Ferguson")).toBeInTheDocument();
+  });
+});

packages/core/src/renderer/components/avatar/avatar.module.scss

@@ -0,0 +1,36 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+.Avatar {
+  background-color: hsl(0deg, 0%, 45%);
+  text-transform: uppercase;
+  color: white;
+  font-size: 1.6ch;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  user-select: none;
+  flex-shrink: 0;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}
+
+.circle {
+  border-radius: 50%;
+}
+
+.rounded {
+  border-radius: 4px;
+}
+
+.disabled {
+  opacity: 0.5;
+  filter: grayscale(0.7);
+}

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

@@ -0,0 +1,109 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import styles from "./avatar.module.scss";
+
+import type { ImgHTMLAttributes, MouseEventHandler } from "react";
+import React from "react";
+import randomColor from "randomcolor";
+import GraphemeSplitter from "grapheme-splitter";
+import type { SingleOrMany } from "../../utils";
+import { cssNames, isDefined, iter } from "../../utils";
+
+export interface AvatarProps {
+  title: string;
+  colorHash?: string;
+  size?: number;
+  src?: string;
+  background?: string;
+  variant?: "circle" | "rounded" | "square";
+  imgProps?: ImgHTMLAttributes<HTMLImageElement>;
+  disabled?: boolean;
+  children?: SingleOrMany<React.ReactNode>;
+  className?: string;
+  id?: string;
+  onClick?: MouseEventHandler<HTMLDivElement>;
+  "data-testid"?: string;
+}
+
+function getNameParts(name: string): string[] {
+  const byWhitespace = name.split(/\s+/);
+
+  if (byWhitespace.length > 1) {
+    return byWhitespace;
+  }
+
+  const byDashes = name.split(/[-_]+/);
+
+  if (byDashes.length > 1) {
+    return byDashes;
+  }
+
+  return name.split(/@+/);
+}
+
+function getLabelFromTitle(title: string) {
+  if (!title) {
+    return "??";
+  }
+
+  const [rawFirst, rawSecond, rawThird] = getNameParts(title);
+  const splitter = new GraphemeSplitter();
+  const first = splitter.iterateGraphemes(rawFirst);
+  const second = rawSecond ? splitter.iterateGraphemes(rawSecond): first;
+  const third = rawThird ? splitter.iterateGraphemes(rawThird) : iter.newEmpty();
+
+  return [
+    ...iter.take(first, 1),
+    ...iter.take(second, 1),
+    ...iter.take(third, 1),
+  ].filter(isDefined).join("");
+}
+
+export const Avatar = ({
+  title,
+  variant = "rounded",
+  size = 32,
+  colorHash,
+  children,
+  background,
+  imgProps,
+  src,
+  className,
+  disabled,
+  id,
+  onClick,
+  "data-testid": dataTestId,
+}: AvatarProps) => (
+  <div
+    className={cssNames(styles.Avatar, {
+      [styles.circle]: variant == "circle",
+      [styles.rounded]: variant == "rounded",
+      [styles.disabled]: disabled,
+    }, className)}
+    style={{
+      width: `${size}px`,
+      height: `${size}px`,
+      background: background || (
+        src
+          ? "transparent"
+          : randomColor({ seed: colorHash, luminosity: "dark" })
+      ),
+    }}
+    id={id}
+    onClick={onClick}
+    data-testid={dataTestId}
+  >
+    {src
+      ? (
+        <img
+          src={src}
+          {...imgProps}
+          alt={title}
+        />
+      )
+      : children || getLabelFromTitle(title)}
+  </div>
+);

packages/core/src/renderer/components/avatar/index.ts

@@ -0,0 +1,6 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+export * from "./avatar";