frontend: Project Catalog - Rework of layout

frontend/packages/core/src/index.tsx

@@ -61,6 +61,7 @@ export { Typography } from "./typography";
 export { default as ClutchApp } from "./AppProvider";
 export { useTheme } from "./AppProvider/themes";
 export { ThemeProvider } from "./Theme";
+export { getDisplayName } from "./utils";
 
 export { css as EMOTION_CSS, keyframes as EMOTION_KEYFRAMES } from "@emotion/react";
 

frontend/packages/core/src/link.tsx

@@ -8,6 +8,7 @@ type TextTransform = "none" | "capitalize" | "uppercase" | "lowercase" | "initia
 
 const StyledLink = styled(MuiLink)<{
   $textTransform: LinkProps["textTransform"];
+  $whiteSpace: LinkProps["whiteSpace"];
 }>(
   ({ theme }: { theme: Theme }) => ({
     display: "flex",
@@ -20,11 +21,13 @@ const StyledLink = styled(MuiLink)<{
   }),
   props => ({
     textTransform: props.$textTransform,
+    ...(props.$whiteSpace ? { whiteSpace: props.$whiteSpace } : {}),
   })
 );
 
 export interface LinkProps extends Pick<MuiLinkProps, "href" | "children"> {
   textTransform?: TextTransform;
+  whiteSpace?: React.CSSProperties["whiteSpace"];
   target?: React.AnchorHTMLAttributes<HTMLAnchorElement>["target"];
 }
 
@@ -33,13 +36,15 @@ export const Link = ({
   textTransform = "none",
   target = "_blank",
   children,
+  whiteSpace,
   ...props
 }: LinkProps) => (
   <StyledLink
     href={href}
     target={target}
     rel="noopener noreferrer"
     $textTransform={textTransform}
+    $whiteSpace={whiteSpace}
     {...props}
   >
     {children}

frontend/workflows/projectCatalog/src/details/components/breadcrumbs.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+import { Typography, useTheme } from "@clutch-sh/core";
+import { alpha, Breadcrumbs, Link } from "@mui/material";
+
+interface Route {
+  title: string;
+  path?: string;
+}
+
+export interface BreadCrumbsProps {
+  routes?: Route[];
+}
+
+const BreadCrumbs = ({ routes = [] }: BreadCrumbsProps) => {
+  const theme = useTheme();
+  routes.unshift({ title: "Project Catalog", path: "/catalog" });
+
+  let builtRoute = routes[0].path;
+
+  const buildCrumb = (route: Route) => {
+    if (route?.path && route?.path !== builtRoute) {
+      builtRoute += `/${route.path}`;
+    }
+
+    return (
+      <Typography
+        textTransform="uppercase"
+        variant="caption2"
+        color={alpha(theme.palette.secondary[900], 0.48)}
+        key={route.title}
+      >
+        {route.path ? (
+          <Link color="inherit" href={builtRoute} underline="hover">
+            {route.title}
+          </Link>
+        ) : (
+          route.title
+        )}
+      </Typography>
+    );
+  };
+
+  return <Breadcrumbs aria-label="breadcrumbs">{routes.map(buildCrumb)}</Breadcrumbs>;
+};
+
+export default BreadCrumbs;

frontend/workflows/projectCatalog/src/details/card.tsx → frontend/workflows/projectCatalog/src/details/components/card.tsx

@@ -1,7 +1,8 @@
 import React from "react";
 import type { TypographyProps } from "@clutch-sh/core";
 import { Card, ClutchError, Error, Grid, styled, Typography } from "@clutch-sh/core";
 import { LinearProgress, Theme } from "@mui/material";
+import type { GridProps } from "@mui/material";
 
 enum CardType {
   DYNAMIC = "Dynamic",
@@ -15,7 +16,9 @@
 interface CardTitleProps {
   title?: string | Element | React.ReactNode;
   titleVariant?: TypographyProps["variant"];
+  titleAlign?: GridProps["alignItems"];
   titleIcon?: React.ReactNode;
+  titleIconAlign?: GridProps["alignItems"];
   endAdornment?: React.ReactNode;
 }
 
@@ -46,10 +49,14 @@
 
 const StyledCard = styled(Card)({
   width: "100%",
-  height: "fit-content",
+  height: "100%",
   padding: "16px",
 });
 
+const StyledGrid = styled(Grid)({
+  height: "fit-content",
+});
+
 const StyledProgressContainer = styled("div")(({ theme }: { theme: Theme }) => ({
   marginBottom: "8px",
   marginTop: "-12px",
@@ -66,30 +73,35 @@
   textTransform: "capitalize",
 });
 
-const StyledTitleContainer = styled(Grid)({
-  marginBottom: "8px",
-});
-
-const BodyContainer = styled("div")({
-  paddingLeft: "4px",
-});
-
-const CardTitle = ({ title, titleVariant = "h4", titleIcon, endAdornment }: CardTitleProps) => (
-  <Grid container item direction="row" alignItems="flex-start" wrap="nowrap">
+const CardTitle = ({
+  title,
+  titleVariant = "h4",
+  titleAlign = "flex-start",
+  titleIcon,
+  titleIconAlign = "center",
+  endAdornment,
+}: CardTitleProps) => (
+  <Grid
+    container
+    direction="row"
+    alignItems={titleAlign}
+    justifyContent="space-between"
+    flexWrap="nowrap"
+  >
     {title && (
-      <StyledTitleContainer container item xs={endAdornment ? 9 : 12} spacing={1}>
+      <Grid container item xs spacing={1} alignItems={titleIconAlign}>
         {titleIcon && <Grid item>{titleIcon}</Grid>}
         <StyledTitle item>
           <Typography variant={titleVariant}>{title}</Typography>
         </StyledTitle>
-      </StyledTitleContainer>
+      </Grid>
     )}
     {endAdornment && (
       <Grid
         container
         item
         direction="row"
-        xs={3}
+        xs
         spacing={1}
         alignItems="center"
         justifyContent="flex-end"
@@ -101,14 +113,18 @@
 );
 
 const CardBody = ({ loading, loadingIndicator = true, error, children }: CardBodyProps) => (
-  <>
+  <StyledGrid container direction="column" flexWrap="nowrap">
     {loadingIndicator && loading && (
-      <StyledProgressContainer>
-        <LinearProgress color="secondary" />
-      </StyledProgressContainer>
+      <Grid item>
+        <StyledProgressContainer>
+          <LinearProgress color="secondary" />
+        </StyledProgressContainer>
+      </Grid>
     )}
-    <BodyContainer>{error ? <Error subject={error} /> : children}</BodyContainer>
-  </>
+    <Grid item>
+      <>{error ? <Error subject={error} /> : children}</>
+    </Grid>
+  </StyledGrid>
 );
 
 const BaseCard = ({ loading, error, ...props }: CardProps) => {
@@ -153,8 +169,14 @@
 
   return (
     <StyledCard>
-      <CardTitle {...props} />
-      <CardBody loading={loading || cardLoading} error={error || cardError} {...props} />
+      <Grid container direction="column" flexWrap="nowrap" spacing={2}>
+        <Grid item>
+          <CardTitle {...props} />
+        </Grid>
+        <Grid item>
+          <CardBody loading={loading || cardLoading} error={error || cardError} {...props} />
+        </Grid>
+      </Grid>
     </StyledCard>
   );
 };
@@ -163,4 +185,7 @@
 
 const MetaCard = (props: BaseCardProps) => <BaseCard type={CardType.METADATA} {...props} />;
 
+type DetailCard = CatalogDetailsCard | typeof DynamicCard | typeof MetaCard;
+
 export { CardType, DynamicCard, MetaCard };
+export type { DetailCard };

frontend/workflows/projectCatalog/src/details/components/header.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import { Grid, styled, Typography } from "@clutch-sh/core";
+
+export interface ProjectHeaderProps {
+  title?: string;
+  description?: string;
+}
+
+const StyledContainer = styled(Grid)({
+  width: "100%",
+  height: "100%",
+});
+
+const ProjectHeader = ({ title, description = "" }: ProjectHeaderProps) => (
+  <StyledContainer container direction="column">
+    <Grid item>
+      <Typography variant="h2" textTransform="capitalize">
+        {title}
+      </Typography>
+    </Grid>
+    {description.length > 0 && (
+      <Grid item>
+        <Typography variant="body2">{description}</Typography>
+      </Grid>
+    )}
+  </StyledContainer>
+);
+
+export default ProjectHeader;