feat: Add ZOO (DO NOT MERGE) #762

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft

SilviaZeta wants to merge 44 commits into staging from addZoo

package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

package.json

-Original file line number
+Diff line change
@@ Expand Up / @@ -48,7 +48,7 @@ @@
         "@gliff-ai/curate": "^7.6.2",
         "@gliff-ai/etebase": "^0.44.0",
         "@gliff-ai/manage": "^8.0.0",
-        "@gliff-ai/style": "^16.2.1",
+        "@gliff-ai/style": "^16.3.1",
         "@gliff-ai/upload": "^1.3.0",
         "@material-ui/types": "^5.1.0",
         "@mui/icons-material": "^5.8.4",
@@ Expand Down @@

src/components/NavBar.tsx

-Original file line number
+Diff line change
@@ Expand Up / @@ -15,8 +15,8 @@ import { @@
       Typography,
     } from "@gliff-ai/style";
     import { imgSrc } from "@/imgSrc";
     import { useAuth } from "@/hooks/use-auth";
+    import { getInitialsFromFullname } from "@/helpers";
     import { ProductsNavbar, ProductNavbarData } from "@/components";
     const documentButton = {
@@ Expand Down Expand Up @@
       useEffect(() => {
         if (!auth?.userProfile?.name) return;
-        const initials = auth?.userProfile?.name
-          .split(" ")
-          .map((l) => l[0].toUpperCase())
-          .join("");
+        const initials = getInitialsFromFullname(auth?.userProfile?.name);
         setUserInitials(initials);
       }, [auth]);
@@ Expand Down @@

src/components/index.ts

-Original file line number
+Diff line change
@@ Expand Up / @@ -10,5 +10,6 @@ export { @@
     export { GliffCard } from "./GliffCard";
     export { CookieConsent } from "./CookieConsent";
+    export { ZooDialog } from "./zoo/ZooDialog";
     export { ProductsNavbar } from "./ProductsNavbar";
     export type { ProductNavbarData } from "./ProductsNavbar";

src/components/zoo/PluginsZooCard.tsx

-Original file line number
+Diff line change
@@ -0,0 +1,147 @@
+    import { ReactElement, useMemo } from "react";
+    import { Plugin } from "@gliff-ai/manage";
+    import { Divider, icons, MuiCard, Box, theme, Button } from "@gliff-ai/style";
+    import { DialogActions } from "@mui/material";
+    import SVG from "react-inlinesvg";
+    const InconText = ({
+      icon,
+      text,
+      marginLeft = null,
+    }: {
+      icon: string;
+      text: string;
+      marginLeft?: string | null;
+    }) => (
+      <div>
+        <SVG
+          src={icon}
+          style={{
+            width: "25px",
+            height: "25px",
+            marginRight: "12px",
+            fontSize: "16px",
+            marginBottom: "-5px",
+            marginLeft: `${marginLeft || 0}`,
+          }}
+        />
+        {text}
+      </div>
+    );
+    InconText.defaultProps = { marginLeft: null };
+    interface Props {
+      data: Plugin;
+      isOpen: boolean;
+      openCard: () => void;
+      closeCard: () => void;
+      activatePlugin: (plugin: Plugin) => Promise<unknown>;
+    }
+    export const PluginsZooCard = ({
+      data,
+      isOpen,
+      openCard,
+      closeCard,
+      activatePlugin,
+    }: Props): ReactElement => {
+      const scale = useMemo((): number => Number(isOpen) + 1, [isOpen]);
+      return (
+        <MuiCard
+          sx={{
+            display: "flex",
+            flexDirection: "column",
+            width: isOpen ? "870px" : "400px",
+            height: isOpen ? "650px" : "auto",
+            padding: isOpen ? "20px" : "10px",
+          }}
+        >
+          <div
+            style={{
+              display: "flex",
+              alignItems: "end",
+              marginBottom: scale * 10,
+            }}
+          >
+            <Box
+              style={{
+                width: scale * 60,
+                height: scale * 60,
+                borderRadius: "9px",
+                backgroundColor: theme.palette.primary.main,
+              }}
+            />
+            <div style={{ marginLeft: "10px" }}>
+              <h3 style={{ lineHeight: "1px" }}>Plugin: {data.name}</h3>
+              <span style={{ lineHeight: 0, color: theme.palette.text.secondary }}>
+                {data?.author}
+              </span>
+            </div>
+          </div>
+          {!isOpen && (
+            <Box
+              sx={{
+                marginBottom: "20px",
+                overflow: "hidden",
+                display: "-webkit-box",
+                "-webkit-box-orient": "vertical",
+                "-webkit-line-clamp": "4",
+                height: "80px",
+              }}
+            >
+              {data.description}
+            </Box>
+          )}
+          <MuiCard
+            variant="outlined"
+            sx={{
+              display: "flex",
+              flexDirection: "row",
+              justifyContent: isOpen ? "start" : "center",
+              alignItems: "center",
+              backgroundColor: "transparent",
+              border: `solid 2px ${theme.palette.grey[300]}`,
+              padding: "10px",
+            }}
+          >
+            <InconText
+              icon={icons.security}
+              text={data.type === "Javascript" ? "Aluminuium" : "Titanium"}
+            />
+            <InconText
+              icon={icons.build}
+              text={data.type === "Javascript" ? "Front-end" : "Back-end"}
+              marginLeft="15px"
+            />
+            <InconText
+              icon={icons.projectsPage}
+              text={data.type}
+              marginLeft="15px"
+            />
+          </MuiCard>
+          {isOpen && (
+            <Box sx={{ marginTop: "20px", height: "100%" }}>{data.description}</Box>
+          )}
+          <Divider sx={{ width: "110%", margin: "10px 0 10px -5%" }} />
+          <DialogActions
+            sx={{ justifyContent: "space-between", padding: 0, marginBottom: 0 }}
+          >
+            <Button
+              color="secondary"
+              variant="outlined"
+              onClick={isOpen ? closeCard : openCard}
+              text={isOpen ? "Go Back" : "See More"}
+            />
+            <Button
+              text="Activate"
+              color="primary"
+              onClick={() => {
+                void activatePlugin(data);
+              }}
+            />
+          </DialogActions>
+        </MuiCard>
+      );
+    };

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Add ZOO (DO NOT MERGE) #762

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!

Uh oh!

feat: Add ZOO (DO NOT MERGE) #762

Are you sure you want to change the base?

Uh oh!

feat: Add ZOO (DO NOT MERGE) #762

Uh oh!

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!

Uh oh!