Add Tailwind (#543)

* Install tailwind

* Fix button styles

* Use tailwind in Workspace components

* Use tailwind in ModuleContainer components

* Use tailwind in sidebar panels

* Update changelog

* Use ComponentBaseProps

.prettierrc

@@ -10,5 +10,6 @@
   "useTabs": false,
   "singleQuote": false,
   "bracketSpacing": true,
-  "printWidth": 80
+  "printWidth": 80,
+  "plugins": ["prettier-plugin-tailwindcss"]
 }

Changelog.md

@@ -4,6 +4,9 @@
 
 - **Improved** performance of styling sidebar panels when many node & edge types
   exist ([#542](https://github.com/aws/graph-explorer/pull/542))
+- **Transition** to Tailwind instead of EmotionCSS for styles, which should make
+  updating the UI much simpler
+  ([#543](https://github.com/aws/graph-explorer/pull/543))
 - **Fixed** issue with upper case characters in RDF URIs
   ([#544](https://github.com/aws/graph-explorer/pull/544))
 

eslint.config.mjs

@@ -35,6 +35,7 @@ export default [
   eslintConfigPrettier,
   // General rules
   {
+    ignores: ["tailwind.config.ts"],
     languageOptions: {
       parserOptions: {
         projectService: true,

packages/graph-explorer/package.json

@@ -124,14 +124,18 @@
     "@types/uuid": "^8.3.4",
     "@vitejs/plugin-react": "^4.2.1",
     "@vitest/coverage-v8": "^2.0.3",
+    "autoprefixer": "^10.4.20",
     "buffer": "^6.0.3",
     "esbuild-loader": "^2.21.0",
     "happy-dom": "^14.12.3",
     "jsdom": "^24.1.0",
     "lint-staged": "^13.3.0",
+    "postcss": "^8.4.41",
+    "prettier-plugin-tailwindcss": "^0.6.5",
     "react-test-renderer": "^18.3.1",
     "rimraf": "^6.0.1",
     "serve": "^14.2.3",
+    "tailwindcss": "^3.4.7",
     "ts-node": "^10.9.2",
     "tslib": "^2.6.2",
     "type-fest": "^4.18.1",

packages/graph-explorer/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

packages/graph-explorer/src/components/Button/Button.styles.ts

@@ -77,6 +77,7 @@ export const defaultStyles =
     } = {
       filled: css`
         position: relative;
+        padding: 0 ${theme.spacing.base};
         background-color: ${themeByVariant?.background ||
         (isDarkTheme ? primary?.dark : primary?.main)};
         color: ${themeByVariant?.color || primary?.contrastText};
@@ -120,6 +121,7 @@ export const defaultStyles =
         }
       `,
       default: css`
+        padding: 0 ${theme.spacing.base};
         background-color: ${themeByVariant?.background ||
         (isDarkTheme ? background?.secondary : background?.contrast)};
         color: ${themeByVariant?.color ||

packages/graph-explorer/src/components/Button/Button.tsx

@@ -50,11 +50,11 @@ export const Button = (
       )}
     >
       {icon && iconPlacement === "start" && (
-        <span style={{ display: "flex", marginRight: 4 }}>{icon}</span>
+        <span className="mr-1 flex">{icon}</span>
       )}
       {children}
       {icon && iconPlacement === "end" && (
-        <span style={{ display: "flex", marginLeft: 4 }}>{icon}</span>
+        <span className="ml-1 flex">{icon}</span>
       )}
     </Component>
   );

packages/graph-explorer/src/components/CheckboxList/CheckboxList.styles.ts

@@ -20,6 +20,7 @@ const defaultStyles: ThemeStyleFn = ({ theme, isDarkTheme }) => css`
       display: flex;
       flex-direction: column;
       overflow: auto;
+      max-height: 25rem;
       row-gap: ${theme.spacing["2x"]};
       padding: ${theme.spacing["2x"]} 0 0;
       border: solid 1px ${theme.palette.border};

packages/graph-explorer/src/components/CheckboxList/CheckboxList.tsx

@@ -65,8 +65,8 @@ export const CheckboxList = ({
     <div
       className={cx(stylesWithTheme(defaultStyles), "checkbox-list", className)}
     >
-      {title && <div className={"title"}>{title}</div>}
-      <div className={"content"}>
+      {title && <div className="title">{title}</div>}
+      <div className="content">
         {checkboxes.map(checkbox => {
           return (
             <div key={checkbox.id} className={"checkbox-container"}>

packages/graph-explorer/src/components/Divider.tsx

@@ -0,0 +1,3 @@
+export default function Divider() {
+  return <div className="bg-border my-1 h-[1px] min-h-[1px] w-full" />;
+}

packages/graph-explorer/src/components/Input/Input.styles.ts

@@ -235,6 +235,7 @@ export const inputContainerStyles =
         flex: 1;
         display: flex;
         position: relative;
+        align-items: center;
       }
 
       .start-adornment {

packages/graph-explorer/src/components/ModuleContainer/ModuleContainer.tsx

@@ -1,13 +1,10 @@
 import { cx } from "@emotion/css";
 import type { ForwardedRef, PropsWithChildren } from "react";
 import { forwardRef, useMemo } from "react";
-import { useWithTheme } from "../../core";
 import getChildOfType from "../../utils/getChildOfType";
 import getChildrenOfType from "../../utils/getChildrenOfType";
-import LoadingSpinner from "../LoadingSpinner/LoadingSpinner";
 import ModuleContainerFooter from "./components/ModuleContainerFooter";
 import ModuleContainerHeader from "./components/ModuleContainerHeader";
-import defaultStyles from "./ModuleContainer.styles";
 
 export type ModuleContainerProps = {
   id?: string;
@@ -16,12 +13,7 @@ export type ModuleContainerProps = {
    * Variant allows to render the module to be attached in a sidebar
    * or be inside the main layout (default).
    */
-  variant?: "sidebar" | "default" | "widget";
-
-  onClose?(): void;
-  onBack?(): void;
-
-  isLoading?: boolean;
+  variant?: "sidebar" | "default";
 };
 
 const ModuleContainer = (
@@ -30,16 +22,9 @@ const ModuleContainer = (
     children,
     className,
     variant = "default",
-    isLoading,
   }: PropsWithChildren<ModuleContainerProps>,
   ref: ForwardedRef<HTMLDivElement>
 ) => {
-  const styleWithTheme = useWithTheme();
-  const rootClassname = useMemo(
-    () => styleWithTheme(defaultStyles),
-    [styleWithTheme]
-  );
-
   const headerContainerChildren = useMemo(() => {
     return getChildOfType(
       children,
@@ -70,21 +55,13 @@ const ModuleContainer = (
       ref={ref}
       id={id}
       className={cx(
-        rootClassname,
-        "module-container",
-        `variant-${variant}`,
+        "bg-background-secondary text-text-secondary flex h-full flex-col overflow-hidden",
+        variant === "default" && "shadow-base rounded",
         className
       )}
     >
       {headerContainerChildren}
-      <div className={"content"}>
-        {isLoading && (
-          <div className={"loading"}>
-            <LoadingSpinner />
-          </div>
-        )}
-        {!isLoading && restChildren}
-      </div>
+      <div className="flex grow flex-col overflow-hidden">{restChildren}</div>
       {footerContainerChildren}
     </div>
   );

packages/graph-explorer/src/components/ModuleContainer/asSidebarModuleContainer.tsx

@@ -22,9 +22,9 @@ const asSidebarModuleContainer =
     ...props
   }: SidebarModuleContainerProps<TProps>) => {
     return (
-      <ModuleContainer variant={"sidebar"}>
+      <ModuleContainer variant="sidebar">
         <ModuleContainerHeader
-          variant={"sidebar"}
+          variant="sidebar"
           title={title}
           onClose={onClose}
           startAdornment={startAdornment}

packages/graph-explorer/src/components/ModuleContainer/components/CollapsedActions.styles.ts

@@ -8,13 +8,6 @@ const defaultStyles: ThemeStyleFn = ({ theme, isDarkTheme }) => css`
     margin: 0;
     border-radius: ${theme.shape.borderRadius};
 
-    .divider {
-      width: 60%;
-      height: 1px;
-      background: ${theme.palette.divider};
-      margin: ${theme.spacing["2x"]} auto;
-    }
-
     .list-item {
       border-radius: ${theme.shape.borderRadius};
       font-size: ${theme.typography.sizes.xs};

packages/graph-explorer/src/components/ModuleContainer/components/CollapsedActions.tsx

@@ -9,6 +9,7 @@ import UseLayerOverlay from "../../UseLayer/UseLayerOverlay";
 import UseLayerTrigger from "../../UseLayer/UseLayerTrigger";
 import defaultStyles from "./CollapsedActions.styles";
 import { Action } from "./ModuleContainerHeader";
+import ModuleContainerVerticalDivider from "./ModuleContainerVerticalDivider";
 
 export type CollapsedActionsProps = {
   actions: (Action | "divider")[];
@@ -34,7 +35,7 @@ const CollapsedActions = ({
         }
 
         if (action === "divider") {
-          return <div key={actionIndex} className={"divider"} />;
+          return <ModuleContainerVerticalDivider key={actionIndex} />;
         }
 
         if (action.collapsedItems) {
@@ -76,7 +77,7 @@ const CollapsedActions = ({
           <ListItem
             key={action.value}
             ref={action.ref}
-            className={"list-item"}
+            className="list-item"
             clickable={!action.isDisabled}
             onClick={() => {
               onActionClick(action.value);

packages/graph-explorer/src/components/ModuleContainer/components/ModuleContainerContent.tsx

@@ -0,0 +1,17 @@
+import { cx } from "@emotion/css";
+import { ComponentProps } from "react";
+
+export default function ModuleContainerContent({
+  className,
+  ...props
+}: ComponentProps<"div">) {
+  return (
+    <div
+      className={cx(
+        "bg-background-default h-full w-full grow overflow-auto",
+        className
+      )}
+      {...props}
+    />
+  );
+}

packages/graph-explorer/src/components/ModuleContainer/components/ModuleContainerFooter.tsx

@@ -1,9 +1,5 @@
 import { cx } from "@emotion/css";
 import type { PropsWithChildren } from "react";
-import { Children } from "react";
-import { useWithTheme } from "../../../core";
-
-import defaultStyles from "./ModuleContainerFooter.styles";
 
 export type ModuleContainerFooterProps = {
   className?: string;
@@ -13,14 +9,10 @@ const ModuleContainerFooter = ({
   className,
   children,
 }: PropsWithChildren<ModuleContainerFooterProps>) => {
-  const styleWithTheme = useWithTheme();
-  const numberOfChildren = Children.count(children);
   return (
     <div
       className={cx(
-        styleWithTheme(defaultStyles),
-        "module-container-footer",
-        { ["single-child"]: numberOfChildren === 1 },
+        "module-container-footer bg-background-default text-text-primary w-full border-t px-3 py-2",
         className
       )}
     >