@malloy-publisher/sdk 0.0.51 → 0.0.53

package/src/components/Package/Package.tsx

@@ -21,12 +21,7 @@ export default function Package({ navigate }: PackageProps) {
    }
 
    return (
-      <Grid
-         container
-         spacing={2}
-         columns={12}
-         sx={{ mb: (theme) => theme.spacing(2) }}
-      >
+      <Grid container spacing={2} columns={12}>
          <Grid size={{ xs: 12, md: 4 }}>
             <Config />
          </Grid>

package/src/components/Project/About.tsx

@@ -1,11 +1,11 @@
-import { Divider, Typography } from "@mui/material";
-import { Configuration, ProjectsApi } from "../../client";
+import { Typography } from "@mui/material";
 import Markdown from "markdown-to-jsx";
-import { StyledCard, StyledCardContent, StyledCardMedia } from "../styles";
-import { useProject } from "./Project";
+import { Configuration, ProjectsApi } from "../../client";
+import { useQueryWithApiError } from "../../hooks/useQueryWithApiError";
 import { ApiErrorDisplay } from "../ApiErrorDisplay";
 import { Loading } from "../Loading";
-import { useQueryWithApiError } from "../../hooks/useQueryWithApiError";
+import { StyledCard } from "../styles";
+import { useProject } from "./Project";
 
 const projectsApi = new ProjectsApi(new Configuration());
 
@@ -21,16 +21,13 @@ export default function About() {
       <>
          {!isSuccess && !isError && <Loading text="Fetching About..." />}
          {isSuccess && (
-            <StyledCard variant="outlined">
-               <StyledCardContent>
-                  <Typography variant="overline" fontWeight="bold">
-                     Readme
-                  </Typography>
-                  <Divider />
-               </StyledCardContent>
-               <StyledCardMedia>
+            <StyledCard variant="outlined" sx={{ p: 2 }}>
+               <Typography variant="overline" fontWeight="bold" sx={{ mb: 1 }}>
+                  Readme
+               </Typography>
+               <StyledCard sx={{ p: 1 }}>
                   <Markdown>{data.data.readme}</Markdown>
-               </StyledCardMedia>
+               </StyledCard>
             </StyledCard>
          )}
          {isError && (

package/src/components/Project/Packages.tsx

@@ -1,10 +1,10 @@
-import { Box, Divider, Grid, Typography } from "@mui/material";
+import { Box, Grid, Typography } from "@mui/material";
 import { Configuration, PackagesApi } from "../../client";
-import { StyledCard, StyledCardContent, StyledCardMedia } from "../styles";
-import { useProject } from "./Project";
+import { useQueryWithApiError } from "../../hooks/useQueryWithApiError";
 import { ApiErrorDisplay } from "../ApiErrorDisplay";
 import { Loading } from "../Loading";
-import { useQueryWithApiError } from "../../hooks/useQueryWithApiError";
+import { StyledCard, StyledCardContent } from "../styles";
+import { useProject } from "./Project";
 
 const packagesApi = new PackagesApi(new Configuration());
 
@@ -24,61 +24,54 @@ export default function Packages({ navigate }: PackagesProps) {
       <>
          {!isSuccess && !isError && <Loading text="Fetching Packages..." />}
          {isSuccess && (
-            <StyledCard variant="outlined">
-               <StyledCardContent>
-                  <Typography variant="overline" fontWeight="bold">
-                     Packages
-                  </Typography>
-                  <Divider />
-               </StyledCardContent>
-               <StyledCardMedia>
-                  <Grid
-                     container
-                     spacing={2}
-                     columns={12}
-                     sx={{ mb: (theme) => theme.spacing(2) }}
-                  >
-                     {data.data
-                        .sort((a, b) => {
-                           return a.name.localeCompare(b.name);
-                        })
-                        .map((p) => (
-                           <Grid
-                              size={{ xs: 12, sm: 12, md: 12, lg: 4 }}
-                              key={p.name}
+            <StyledCard variant="outlined" sx={{ p: 2 }}>
+               <Typography variant="overline" fontWeight="bold" sx={{ mb: 1 }}>
+                  Packages
+               </Typography>
+               <Grid container spacing={2} columns={12}>
+                  {data.data
+                     .sort((a, b) => {
+                        return a.name.localeCompare(b.name);
+                     })
+                     .map((p) => (
+                        <Grid
+                           size={{ xs: 12, sm: 12, md: 12, lg: 4 }}
+                           key={p.name}
+                        >
+                           <StyledCard
+                              variant="outlined"
+                              sx={{
+                                 cursor: "pointer",
+                                 transition: "all 0.2s ease-in-out",
+                                 "&:hover": {
+                                    boxShadow: "0 4px 12px rgba(0, 0, 0, 0.1)",
+                                    transform: "translateY(-2px)",
+                                 },
+                              }}
+                              onClick={(event) => navigate(p.name + "/", event)}
                            >
-                              <StyledCard
-                                 variant="outlined"
-                                 sx={{ padding: "10px", cursor: "pointer" }}
-                                 onClick={(event) =>
-                                    navigate(p.name + "/", event)
-                                 }
-                              >
-                                 <StyledCardContent>
-                                    <Typography
-                                       variant="overline"
-                                       color="primary.main"
-                                    >
-                                       {p.name}
+                              <StyledCardContent>
+                                 <Typography
+                                    variant="overline"
+                                    color="primary.main"
+                                 >
+                                    {p.name}
+                                 </Typography>
+                                 <Box
+                                    sx={{
+                                       maxHeight: "120px",
+                                       overflowY: "auto",
+                                    }}
+                                 >
+                                    <Typography variant="body2">
+                                       {p.description}
                                     </Typography>
-                                    <Divider />
-                                    <Box
-                                       sx={{
-                                          mt: "10px",
-                                          maxHeight: "100px",
-                                          overflowY: "auto",
-                                       }}
-                                    >
-                                       <Typography variant="body2">
-                                          {p.description}
-                                       </Typography>
-                                    </Box>
-                                 </StyledCardContent>
-                              </StyledCard>
-                           </Grid>
-                        ))}
-                  </Grid>
-               </StyledCardMedia>
+                                 </Box>
+                              </StyledCardContent>
+                           </StyledCard>
+                        </Grid>
+                     ))}
+               </Grid>
             </StyledCard>
          )}
          {isError && (

package/src/components/Project/Project.tsx

@@ -1,7 +1,7 @@
 import { Grid } from "@mui/material";
+import { createContext, ReactNode, useContext } from "react";
 import About from "./About";
 import Packages from "./Packages";
-import { createContext, useContext, ReactNode } from "react";
 
 export interface ProjectContextProps {
    projectName: string;
@@ -11,27 +11,28 @@ const ProjectContext = createContext<ProjectContextProps | undefined>(
    undefined,
 );
 
-interface ProjectProviderProps extends ProjectContextProps {
+export function useProject(): ProjectContextProps {
+   const context = useContext(ProjectContext);
+   if (!context) {
+      throw new Error("useProject must be used within a ProjectProvider");
+   }
+   return context;
+}
+
+interface ProjectProviderProps {
    children: ReactNode;
+   projectName: string;
 }
 
-export const ProjectProvider = ({
-   projectName,
+export function ProjectProvider({
    children,
-}: ProjectProviderProps) => {
+   projectName,
+}: ProjectProviderProps) {
    return (
       <ProjectContext.Provider value={{ projectName }}>
          {children}
       </ProjectContext.Provider>
    );
-};
-
-export function useProject() {
-   const context = useContext(ProjectContext);
-   if (!context) {
-      throw new Error("useProject must be used within a ProjectProvider");
-   }
-   return context;
 }
 
 interface ProjectProps {
@@ -40,12 +41,7 @@ interface ProjectProps {
 
 export default function Project({ navigate }: ProjectProps) {
    return (
-      <Grid
-         container
-         spacing={2}
-         columns={12}
-         sx={{ mb: (theme) => theme.spacing(2) }}
-      >
+      <Grid container spacing={2} columns={12}>
          <Grid size={{ xs: 12, md: 12 }}>
             <Packages navigate={navigate} />
          </Grid>

package/src/components/RenderedResult/ResultContainer.tsx

@@ -79,7 +79,7 @@ export default function ResultContainer({
    if (!result) {
       return null;
    }
-   const loading = <Loading text="Loading..." centered={false} size={32} />;
+   const loading = <Loading text="Loading..." centered={true} size={32} />;
    const renderedHeight = isFillElement
       ? isExpanded
          ? maxHeight - 40
@@ -87,9 +87,9 @@ export default function ResultContainer({
       : undefined;
    const height = explicitHeight
       ? {
-           minHeight: `${explicitHeight}px`,
-           height: `100%`,
-        }
+         minHeight: `${explicitHeight}px`,
+         height: `100%`,
+      }
       : { height: `100%` };
    return (
       <>

package/src/components/styles.ts

@@ -1,4 +1,4 @@
-import { styled, Card, CardContent, CardMedia } from "@mui/material";
+import { Card, CardContent, CardMedia, styled } from "@mui/material";
 
 export const StyledCard = styled(Card)({
    display: "flex",
@@ -9,15 +9,12 @@ export const StyledCard = styled(Card)({
 export const StyledCardContent = styled(CardContent)({
    display: "flex",
    flexDirection: "column",
-   padding: "0px 4px 4px 4px",
+   padding: "10px",
    flexGrow: 1,
-   "&:last-child": {
-      paddingBottom: 0,
-   },
 });
 
 export const StyledCardMedia = styled(CardMedia)({
-   padding: "0px 4px 0px 4px",
+   padding: "10px",
 });
 
 export const StyledExplorerPage = styled("div")({
@@ -30,7 +27,7 @@ export const StyledExplorerBanner = styled("div")({
    height: "30px",
    backgroundColor: "rgba(225, 240, 255, 1)",
    display: "flex",
-   padding: "2px 10px",
+   padding: "4px",
    alignItems: "center",
 });