Merge pull request #39 from collincchoy/feat/discover-artist

Merge some 2022 updates.

package.json

@@ -49,6 +49,7 @@
     "@storybook/manager-webpack5": "^6.4.14",
     "@storybook/preset-create-react-app": "^4.0.0",
     "@storybook/react": "^6.4.14",
+    "@testing-library/react-hooks": "^8.0.0",
     "@types/jest": "^24.0.23",
     "@types/node": "^12.12.12",
     "@types/react": "^16.9.13",

src/_variables.scss

@@ -36,6 +36,9 @@ $input-shadow: none;
 
 @import "~bulma/sass/utilities/initial-variables.sass";
 $navbar-breakpoint: $tablet;
+$navbar-z: 300;
+$navbar-fixed-z: 300;
+$navbar-dropdown-z: 310;
 
 // Import only what you need from Bulma
 @import "../node_modules/bulma/sass/utilities/_all.sass";

src/components/Artist/Gallery.tsx

@@ -12,12 +12,11 @@ export type ArtistGalleryProps = {
   moreArtistsAvailable?: boolean;
 };
 
-export default function ArtistGallery(props: ArtistGalleryProps) {
-  const {
-    artists,
-    loadMoreArtists,
-    moreArtistsAvailable: canLoadMoreArtists
-  } = props;
+export default function ArtistGallery({
+  artists,
+  loadMoreArtists,
+  moreArtistsAvailable: canLoadMoreArtists,
+}: ArtistGalleryProps) {
   const [artistOnDisplay, setArtistOnDisplay] = useState<Artist | undefined>();
 
   const showDetails = (artist: Artist) => setArtistOnDisplay(artist);
@@ -35,7 +34,7 @@ export default function ArtistGallery(props: ArtistGalleryProps) {
       <CardGallery
         items={artists}
         renderItem={renderArtist}
-        renderKey={artist => artist.id}
+        renderKey={(artist) => artist.id}
         loadFunc={loadMoreArtists}
         hasMore={canLoadMoreArtists}
       />
@@ -48,7 +47,7 @@ export default function ArtistGallery(props: ArtistGalleryProps) {
       >
         <div className="tags">
           {artistOnDisplay &&
-            artistOnDisplay?.genres.map(genre => (
+            artistOnDisplay?.genres.map((genre) => (
               <span className="tag is-dark" key={genre}>
                 {genre}
               </span>

src/components/Graph/Edge.tsx

@@ -0,0 +1,73 @@
+import React, { useRef } from "react";
+import styled from "styled-components";
+
+type LinePoints = {
+  x1?: string;
+  y1?: string;
+  x2: string;
+  y2?: string;
+};
+
+type Direction = "left" | "down-left" | "up-left" | "right";
+
+const directionPoints = new Map<Direction, LinePoints>([
+  ["left", { x2: "100%" }],
+  ["down-left", { x2: "100%", y1: "100%" }],
+  ["up-left", { x2: "100%", y2: "100%" }],
+  ["right", { x2: "100%" }],
+]);
+
+const directionTranslation = new Map<Direction, string>([
+  ["left", "-50%, 50%"],
+  ["down-left", "-50%, 50%"],
+  ["up-left", "-50%, -50%"],
+  ["right", "50%, 50%"],
+]);
+
+interface Props {
+  length: string;
+  strokeWidth: string;
+  direction: Direction;
+  collapsed?: boolean;
+}
+
+const StyledSvg = styled.svg<Props>`
+  position: absolute;
+  width: ${({ length }) => length};
+  transform: translate(
+      ${({ direction }) => directionTranslation.get(direction)}
+    )
+    rotateY(${({ direction }) => (direction === "right" ? "180deg" : "0")});
+  z-index: 100;
+
+  height: 125px;
+`;
+
+const Line = styled.line<Pick<Props, "length" | "collapsed">>`
+  transition: stroke-dashoffset 1s ease;
+
+  stroke-dasharray: ${({ length }) => length};
+  stroke-dashoffset: ${({ collapsed, length }) => (collapsed ? length : 0)};
+`;
+
+export const Edge = ({
+  length,
+  strokeWidth,
+  direction,
+  collapsed = false,
+}: Props) => {
+  const lineRef = useRef<SVGLineElement>(null);
+
+  return (
+    <StyledSvg length={length} strokeWidth={strokeWidth} direction={direction}>
+      <Line
+        ref={lineRef}
+        {...directionPoints.get(direction)}
+        collapsed={collapsed}
+        length={`${lineRef?.current?.getTotalLength() || undefined}`}
+        strokeWidth={strokeWidth}
+        stroke="#2cc8ab"
+      />
+    </StyledSvg>
+  );
+};

src/components/Graph/Node.tsx

@@ -0,0 +1,202 @@
+import React from "react";
+import styled, { css, keyframes, Keyframes } from "styled-components";
+
+type Direction = "left" | "downLeft" | "upLeft" | "right";
+
+interface Props {
+  size?: number;
+  scaleTo?: number;
+  color?: string;
+  imageUrl?: string;
+  collapsed?: boolean;
+  move?: Direction;
+  onClick?: (ev: React.MouseEvent<SVGElement>) => void;
+  bubbleAnimation?: boolean;
+}
+
+const Node = ({
+  size = 125,
+  scaleTo = undefined,
+  color = "#C4C4C4",
+  imageUrl,
+  collapsed = false,
+  move = undefined,
+  onClick,
+  bubbleAnimation = false,
+}: Props) => {
+  // @ts-ignore  fixme on upgrade of TS>4.6
+  const patternId = window.crypto.randomUUID();
+  const fill = imageUrl ? `url(#${patternId})` : color;
+  return (
+    <Mover move={move}>
+      <StyledSvg
+        width={size}
+        height={size}
+        collapsed={collapsed}
+        onClick={onClick}
+        scaleTo={scaleTo}
+        bubbleAnimation={bubbleAnimation}
+      >
+        {imageUrl && (
+          <defs>
+            <pattern
+              id={patternId}
+              patternUnits="userSpaceOnUse"
+              height={size}
+              width={size}
+            >
+              <image
+                x="0"
+                y="0"
+                height={size}
+                width={size}
+                xlinkHref={imageUrl}
+                preserveAspectRatio="xMidYMid slice"
+              />
+            </pattern>
+          </defs>
+        )}
+
+        <circle cx={size / 2} cy={size / 2} r={size / 2} fill={fill} />
+      </StyledSvg>
+    </Mover>
+  );
+};
+
+const moveLeftAnimation = keyframes`
+  20% {
+    transform: translateX(0%) scale(1);
+  }
+
+  60% {
+    transform: translateX(-100%);
+  }
+
+  80% {
+    transform: translateX(-100%) scale(1.65);
+  }
+
+  100% {
+    visibility: hidden;
+    transform: translateX(-100%) scale(1.45);
+  }
+`;
+
+const moveDownLeftAnimation = keyframes`
+  20% {
+    transform: translateX(0%) scale(1);
+  }
+
+  60% {
+    transform: translate(-100%, 100%);
+  }
+
+  80% {
+    transform: translate(-100%, 100%) scale(1.65);
+  }
+
+  100% {
+    visibility: hidden;
+    transform: translate(-100%, 100%) scale(1.45);
+  }
+`;
+
+const moveUpLeftAnimation = keyframes`
+  20% {
+    transform: translateX(0%) scale(1);
+  }
+
+  60% {
+    transform: translate(-100%, -100%);
+  }
+
+  80% {
+    transform: translate(-100%, -100%) scale(1.65);
+  }
+
+  100% {
+    visibility: hidden;
+    transform: translate(-100%, -100%) scale(1.45);
+  }
+`;
+
+const moveRightAnimation = keyframes`
+  20% {
+    transform: translateX(0%) scale(1);
+  }
+
+  60% {
+    transform: translateX(100%);
+  }
+
+  80% {
+    transform: translateX(100%) scale(1.65);
+  }
+
+  100% {
+    visibility: hidden;
+    transform: translateX(100%) scale(1.45);
+  }
+`;
+
+const animations = new Map<Direction, Keyframes>([
+  ["left", moveLeftAnimation],
+  ["downLeft", moveDownLeftAnimation],
+  ["upLeft", moveUpLeftAnimation],
+  ["right", moveRightAnimation],
+]);
+
+const Mover = styled.div<{ move?: Direction }>`
+  z-index: 200;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+
+  ${({ move }) =>
+    move
+      ? css`
+          animation: ${animations.get(move)} 3.5s ease-in-out;
+        `
+      : ""}
+`;
+
+const StyledSvg = styled.svg<Props>`
+  box-shadow: 0px 0px 20px 0px #fa7c90;
+  border-radius: 50%;
+
+  &:hover {
+    box-shadow: 0px 0px 20px 5px #fa7c90;
+    cursor: pointer;
+  }
+
+  ${({ scaleTo }) =>
+    scaleTo !== undefined
+      ? css`
+          transform: scale(${scaleTo});
+        `
+      : ""}
+
+  ${({ bubbleAnimation }) =>
+    bubbleAnimation
+      ? css`
+          animation: ${bubbleAnimationKf} 3.5s ease-in-out;
+          transition: box-shadow 0.3s ease-in, transform 1s ease, scale 1s ease;
+        `
+      : css`
+          transition: box-shadow 0.3s ease-in, transform 1s ease;
+        `}
+`;
+
+const bubbleAnimationKf = keyframes`
+  30% {
+    transform: scale(1);
+  }
+
+  to {
+    transform: scale(1);
+  }
+`;
+
+export default Node;

src/components/Lab/AdvancedTuner/Handle.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import classes from "./index.module.css";
-import { round } from "../../../utilities";
+import { round } from "utils";
 
 type HandleProps = {
   handle: {
@@ -13,7 +13,7 @@ type HandleProps = {
 
 export default function Handle({
   handle: { id, value, percent },
-  getHandleProps
+  getHandleProps,
 }: HandleProps) {
   value = round(value, 2);
   return (