Continuing transition to Tailwind (#657)

* Install class variance authority * Add zIndex to themes * Use tailwind * Use standard components for available connections * Remove unused badge from IconButton * Use tailwind for Chip styles * Fix tailwind pixel calculations in VSCode * Fix types in AdvancedList * Fix styles in Carousel * Remove aria-hidden * Update changelog * Move connection to row component
aws · Nov 5, 2024 · e364bef · e364bef
1 parent 954882b
commit e364bef
Show file tree

Hide file tree

Showing 41 changed files with 268 additions and 816 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -4,6 +4,10 @@
   },
   "typescript.tsdk": "node_modules/typescript/lib",
   "vitest.workspaceConfig": "vitest.workspace.ts",
+  "editor.quickSuggestions": {
+    "strings": "on"
+  },
+  "tailwindCSS.rootFontSize": 14,
   "tailwindCSS.experimental.classRegex": [
     ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
     ["cn\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]

diff --git a/Changelog.md b/Changelog.md
@@ -4,6 +4,10 @@
 
 - **Improved** UI responsiveness by using map instead of array for large data
   sets [#658](https://github.com/aws/graph-explorer/pull/658)
+- **Improved** connection selection can now happen on any part of the connection
+  row [#657](https://github.com/aws/graph-explorer/pull/657)
+- **Fixed** scrolling on search result details
+  [#657](https://github.com/aws/graph-explorer/pull/657)
 - **Improved** style for the sidebar buttons
   [#651](https://github.com/aws/graph-explorer/pull/651)
 - **Fixed** Docker image containing more files than necessary.

diff --git a/packages/graph-explorer/package.json b/packages/graph-explorer/package.json
@@ -47,6 +47,7 @@
     "@react-stately/searchfield": "^3.5.7",
     "@tanstack/react-query": "^5.59.9",
     "@tanstack/react-query-devtools": "^5.59.9",
+    "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "color": "^4.2.3",
     "crypto-js": "^4.2.0",

diff --git a/packages/graph-explorer/src/components/AdvancedList/AdvancedList.styles.tsx b/packages/graph-explorer/src/components/AdvancedList/AdvancedList.styles.tsx
@@ -28,13 +28,6 @@ const listStyles: ThemeStyleFn = ({ theme, isDarkTheme }) => {
     .advanced-list-search-wrapper {
       display: flex;
       align-items: center;
-      .advanced-list-search-input {
-        flex: 2;
-      }
-
-      .advanced-list-category-select {
-        flex: 1;
-      }
 
       .select {
         min-width: 0;

diff --git a/packages/graph-explorer/src/components/AdvancedList/AdvancedList.tsx b/packages/graph-explorer/src/components/AdvancedList/AdvancedList.tsx
@@ -54,17 +54,17 @@ export type AdvancedListProps<T extends object> = {
   category?: string;
   onItemClick?: (
     event: MouseEvent<HTMLDivElement>,
-    item: AdvancedListItemType<any>,
+    item: AdvancedListItemType<T>,
     index: number
   ) => void;
   onItemMouseOver?: (
     event: MouseEvent<HTMLElement>,
-    item: AdvancedListItemType<any>,
+    item: AdvancedListItemType<T>,
     index: number
   ) => void;
   onItemMouseOut?: (
     event: MouseEvent<HTMLElement>,
-    item: AdvancedListItemType<any>,
+    item: AdvancedListItemType<T>,
     index: number
   ) => void;
   onItemMouseEnter?: AdvancedListMouseEvent;
@@ -83,7 +83,7 @@ export type AdvancedListProps<T extends object> = {
   hideCount?: boolean;
   hideEmptyState?: boolean;
   renderPopover?: (
-    item: AdvancedListItemType<any>,
+    item: AdvancedListItemType<T>,
     itemRef: RefObject<HTMLDivElement>
   ) => ReactNode;
   hidePopover?: boolean;

diff --git a/.../graph-explorer/src/components/AdvancedList/internalComponents/AdvancedListWithGroups.tsx b/.../graph-explorer/src/components/AdvancedList/internalComponents/AdvancedListWithGroups.tsx
@@ -1,6 +1,14 @@
 import { cn } from "@/utils";
 import groupBy from "lodash/groupBy";
-import type { DragEvent, MouseEvent, ReactNode, Ref, RefObject } from "react";
+import type {
+  DragEvent,
+  ForwardedRef,
+  MouseEvent,
+  PropsWithChildren,
+  ReactNode,
+  Ref,
+  RefObject,
+} from "react";
 import { forwardRef, memo, useEffect, useMemo, useState } from "react";
 import type { VirtuosoHandle } from "react-virtuoso";
 import { GroupedVirtuoso } from "react-virtuoso";
@@ -305,4 +313,8 @@ const AdvancedListWithGroups = <T extends object>(
   );
 };
 
-export default memo(forwardRef(AdvancedListWithGroups));
+export default memo(forwardRef(AdvancedListWithGroups)) as <T extends object>(
+  props: PropsWithChildren<ElementsListWithGroupsProps<T>> & {
+    ref?: ForwardedRef<VirtuosoHandle>;
+  }
+) => ReturnType<typeof AdvancedListWithGroups>;
diff --git a/packages/graph-explorer/src/components/AdvancedList/internalComponents/SearchBar.tsx b/packages/graph-explorer/src/components/AdvancedList/internalComponents/SearchBar.tsx
@@ -24,7 +24,7 @@ const SearchBar = ({
   return (
     <>
       <Input
-        className={"advanced-list-search-input"}
+        className="flex-[2]"
         value={search}
         aria-label="Search available items"
         onChange={onSearch}
@@ -37,7 +37,7 @@ const SearchBar = ({
       {!!types.length && onTypeChange && (
         <Select
           aria-label="select category"
-          className={"advanced-list-category-select"}
+          className="flex-1"
           options={types}
           value={type}
           onChange={value => onTypeChange?.(value as string)}

diff --git a/packages/graph-explorer/src/components/Card/Card.tsx b/packages/graph-explorer/src/components/Card/Card.tsx
@@ -17,7 +17,7 @@ export interface CardProps
   onClick?: () => void;
 }
 
-export const Card = (
+export function Card(
   {
     id,
     className,
@@ -29,7 +29,7 @@ export const Card = (
     ...restProps
   }: PropsWithChildren<CardProps>,
   ref: ForwardedRef<HTMLDivElement>
-) => {
+) {
   const styleWithTheme = useWithTheme();
   return (
     <div
@@ -55,6 +55,6 @@ export const Card = (
       {children}
     </div>
   );
-};
+}
 
 export default forwardRef<HTMLDivElement, PropsWithChildren<CardProps>>(Card);
diff --git a/packages/graph-explorer/src/components/Carousel/Carousel.styles.ts b/packages/graph-explorer/src/components/Carousel/Carousel.styles.ts
@@ -1,14 +1,6 @@
 import { css } from "@emotion/css";
 import { ActiveThemeType, fade, ProcessedTheme } from "@/core";
 
-export const defaultStyles = () => css`
-  display: flex;
-  .swiper {
-    height: 484px;
-    width: 320px;
-  }
-`;
-
 export const navArrowsStyles = ({
   theme,
 }: ActiveThemeType<ProcessedTheme>) => css`

diff --git a/packages/graph-explorer/src/components/Carousel/Carousel.tsx b/packages/graph-explorer/src/components/Carousel/Carousel.tsx
@@ -25,7 +25,7 @@ import {
 } from "swiper/types";
 import { useWithTheme } from "@/core";
 import { ChevronLeftIcon, ChevronRightIcon } from "@/components/icons";
-import { defaultStyles, navArrowsStyles } from "./Carousel.styles";
+import { navArrowsStyles } from "./Carousel.styles";
 
 export interface CarouselProps {
   className?: string;
@@ -38,7 +38,6 @@ export interface CarouselProps {
   prevArrow?: JSX.Element;
   slidesToShow?: number;
   swipe?: boolean;
-  variableWidth?: boolean;
 }
 
 const PrevArrow = forwardRef<
@@ -99,7 +98,6 @@ export const Carousel = forwardRef<
       slidesToShow = 5,
       centerMode,
       pagination,
-      ...props
     },
     ref
   ) => {
@@ -110,19 +108,14 @@ export const Carousel = forwardRef<
       () =>
         Children.map(children, (child, index) => {
           return (
-            <SwiperSlide
-              style={props.variableWidth ? { width: "auto" } : {}}
-              key={index}
-            >
+            <SwiperSlide className="w-full" key={index}>
               {child}
             </SwiperSlide>
           );
         }),
-      [children, props.variableWidth]
+      [children]
     );
 
-    const stylesWithTheme = useWithTheme();
-
     const [swiper, setSwiper] = useState<SwiperClass | undefined>(undefined);
     useImperativeHandle(ref, () => swiper, [swiper]);
 
@@ -147,7 +140,7 @@ export const Carousel = forwardRef<
     }
 
     return (
-      <div className={cn(stylesWithTheme(defaultStyles), className)}>
+      <div className={cn("flex", className)}>
         <PrevArrow ref={prevRef} />
         <Swiper
           onSwiper={setSwiper}
@@ -156,13 +149,14 @@ export const Carousel = forwardRef<
           effect={effect}
           centeredSlides={centerMode}
           spaceBetween={8}
-          slidesPerView={props.variableWidth ? "auto" : slidesToShow}
+          slidesPerView={slidesToShow}
           navigation={{
             nextEl: nextRef.current,
             prevEl: prevRef.current,
           }}
           onInit={onInit}
           modules={[Pagination, Navigation]}
+          className="w-[320px] overflow-y-auto"
         >
           {childrenComputed}
         </Swiper>

diff --git a/packages/graph-explorer/src/components/Chip/Chip.styles.ts b/packages/graph-explorer/src/components/Chip/Chip.styles.ts