Skip to content

Commit

Permalink
frontend: Project Catalog - Rework of layout (#3128)
Browse files Browse the repository at this point in the history
  • Loading branch information
jdslaugh authored Sep 30, 2024
1 parent 18fcbb2 commit 122fb13
Show file tree
Hide file tree
Showing 26 changed files with 726 additions and 548 deletions.
1 change: 1 addition & 0 deletions frontend/packages/core/src/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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";

Expand Down
5 changes: 5 additions & 0 deletions frontend/packages/core/src/link.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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"];
}

Expand All @@ -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}
Expand Down
1 change: 0 additions & 1 deletion frontend/packages/core/src/utils/index.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,2 @@
// eslint-disable-next-line import/prefer-default-export
export { default as getDisplayName } from "./getDisplayName";
export { default as findPathMatchList } from "./pathMatching";
2 changes: 1 addition & 1 deletion frontend/workflows/projectCatalog/src/catalog/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ import RestoreIcon from "@mui/icons-material/Restore";
import SearchIcon from "@mui/icons-material/Search";
import { alpha, Box, CircularProgress } from "@mui/material";

import type { WorkflowProps } from "..";
import type { WorkflowProps } from "../types";

import catalogReducer from "./catalog-reducer";
import ProjectCard from "./project-card";
Expand Down
137 changes: 0 additions & 137 deletions frontend/workflows/projectCatalog/src/config/index.tsx

This file was deleted.

Original file line number Diff line number Diff line change
@@ -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;
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
import React from "react";
import type { TypographyProps } from "@clutch-sh/core";
import { Card, ClutchError, Error, Grid, styled, Typography } from "@clutch-sh/core";
import type { GridProps } from "@mui/material";
import { LinearProgress, Theme } from "@mui/material";

enum CardType {
export enum CardType {
DYNAMIC = "Dynamic",
METADATA = "Metadata",
}
Expand All @@ -15,7 +16,9 @@ export interface CatalogDetailsCard {
interface CardTitleProps {
title?: string | Element | React.ReactNode;
titleVariant?: TypographyProps["variant"];
titleAlign?: GridProps["alignItems"];
titleIcon?: React.ReactNode;
titleIconAlign?: GridProps["alignItems"];
endAdornment?: React.ReactNode;
}

Expand Down Expand Up @@ -46,10 +49,14 @@ interface CardProps extends CatalogDetailsCard, BaseCardProps {}

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",
Expand All @@ -66,30 +73,35 @@ const StyledTitle = styled(Grid)({
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"
Expand All @@ -101,14 +113,18 @@ const CardTitle = ({ title, titleVariant = "h4", titleIcon, endAdornment }: Card
);

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) => {
Expand Down Expand Up @@ -153,8 +169,14 @@ const BaseCard = ({ loading, error, ...props }: CardProps) => {

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>
);
};
Expand All @@ -163,4 +185,6 @@ const DynamicCard = (props: BaseCardProps) => <BaseCard type={CardType.DYNAMIC}

const MetaCard = (props: BaseCardProps) => <BaseCard type={CardType.METADATA} {...props} />;

export { CardType, DynamicCard, MetaCard };
export type DetailCard = CatalogDetailsCard | typeof DynamicCard | typeof MetaCard;

export { DynamicCard, MetaCard };
Loading

0 comments on commit 122fb13

Please sign in to comment.