feat: create app layout

greenpixels · Oct 1, 2023 · 6e12db1 · 6e12db1
1 parent 4160ea2
commit 6e12db1
Show file tree

Hide file tree

Showing 22 changed files with 403 additions and 82 deletions.
diff --git a/client/package.json b/client/package.json
@@ -9,6 +9,7 @@
     "lint": "eslint . --fix --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview",
     "test": "vitest run --coverage",
+    "test-ui": "vitest --ui",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "format": "prettier . --write"

diff --git a/client/src/App.tsx b/client/src/App.tsx
@@ -1,15 +1,64 @@
 /** @format */
 
-import { Button } from "antd";
-
-function App() {
-    return (
-        <>
-            <div className="card">
-                <Button type="primary">Primary Button</Button>
-            </div>
-        </>
-    );
+import { useState } from "react";
+import { Breadcrumb, Button, Layout, theme } from "antd";
+import { Outlet, useLocation } from "react-router-dom";
+import MenuOutlined from "@ant-design/icons/lib/icons/MenuOutlined";
+import { Sidebar } from "./components/Sidebar/Sidebar";
+
+const { Header, Content } = Layout;
+
+export function App() {
+  const [showDrawer, setShowDrawer] = useState(false);
+  const {
+    token: { colorBgContainer },
+  } = theme.useToken();
+
+  const location = useLocation();
+
+  return (
+    <div className="flex flex-col h-full">
+      <Header className="bg-[#43454b] flex pl-0 text-white w-full">
+        <Button
+          type="text"
+          className="my-auto text-white ml-4"
+          icon={<MenuOutlined />}
+          onClick={() => setShowDrawer(!showDrawer)}
+        />
+
+        <span className="mx-8 text-lg my-auto font-bold font-mono">
+          Ironbench
+        </span>
+      </Header>
+      <div className="flex relative h-full">
+        <Sidebar id="test" showDrawer={showDrawer} />
+        <Layout className="h-full w-full" style={{ padding: "0 24px 24px" }}>
+          <Breadcrumb
+            style={{ margin: "16px 0" }}
+            items={[
+              { title: "home" },
+              ...location.pathname
+                .split("/")
+                .slice(1)
+                .map((segment) => {
+                  return { title: segment };
+                }),
+            ]}
+          />
+          <Content
+            className="w-full"
+            style={{
+              padding: 24,
+              margin: 0,
+              background: colorBgContainer,
+            }}
+          >
+            <Outlet />
+          </Content>
+        </Layout>
+      </div>
+    </div>
+  );
 }
 
-export default App;
+export default { App };
diff --git a/client/src/components/AssetCardForm/AssetCardForm.stories.tsx b/client/src/components/AssetCardForm/AssetCardForm.stories.tsx
@@ -5,8 +5,8 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
 import { AssetCardForm } from "./AssetCardForm";
+import { AssetCard } from "../../../../shared/types/AssetCard";
 import { useState } from "react";
-import { AssetCard } from "../../types/Card";
 
 const meta: Meta<typeof AssetCardForm> = {
   component: AssetCardForm,
@@ -25,6 +25,7 @@ export const Default: Story = {
         properties: [],
         health: 0,
         title: "",
+        custom_fields: [],
       });
       return (
         <div>

diff --git a/client/src/components/AssetCardForm/AssetCardForm.test.tsx b/client/src/components/AssetCardForm/AssetCardForm.test.tsx
@@ -9,7 +9,6 @@ import {
 } from "@testing-library/react";
 import { UserEvent, userEvent } from "@testing-library/user-event";
 import { AssetCardForm } from "./AssetCardForm";
-import { AssetCard } from "../../types/Card";
 import {
   test,
   describe,
@@ -19,6 +18,7 @@ import {
   beforeEach,
   MockedFunction,
 } from "vitest";
+import { AssetCard } from "../../../../shared/types/AssetCard";
 
 const getMockCard = (): AssetCard => {
   return {
@@ -30,6 +30,7 @@ const getMockCard = (): AssetCard => {
       { description: "", indents: 0, is_upgradeable: false, title: "" },
     ],
     title: "",
+    custom_fields: [],
   };
 };
 
@@ -320,6 +321,46 @@ describe("Test AssetCardForm", () => {
     });
   });
 
+  describe("Testing setCard-Prop in Custom Fields Input", async () => {
+    const mockSetter = vi.fn();
+    const user = userEvent.setup();
+
+    beforeEach(() => {
+      cleanup();
+    });
+
+    test("Should call setCard when entering into Custom Fields Input and adding the option", async () => {
+      const userInput = "My Title";
+      const renderResult = render(
+        <AssetCardForm card={getMockCard()} setCard={mockSetter} />
+      );
+      const customFieldSelect = await screen.findByTestId(
+        "asset-card-form-custom-fields"
+      );
+
+      const customFieldSelectInput = customFieldSelect.querySelector(
+        "#rc_select_TEST_OR_SSR"
+      );
+
+      fireEvent.change(customFieldSelectInput!, {
+        target: { value: userInput },
+      });
+
+      const option = await renderResult.findByTitle(userInput);
+      expect(option).not.toBeNull();
+
+      user.hover(option);
+      user.click(option);
+
+      await waitFor(async () => {
+        expect(mockSetter).toHaveBeenCalledWith({
+          ...getMockCard(),
+          custom_fields: [userInput.toLocaleUpperCase()],
+        });
+      });
+    });
+  });
+
   describe("Testing setCard-Prop in Description Input", async () => {
     const mockSetter = vi.fn();
 

diff --git a/client/src/components/AssetCardForm/AssetCardForm.tsx b/client/src/components/AssetCardForm/AssetCardForm.tsx
@@ -2,7 +2,10 @@
 
 import { Button, Card, Divider, Input, Radio, Select } from "antd";
 import TextArea from "antd/es/input/TextArea";
-import { AssetCard, AssetCardProperty } from "../../types/Card";
+import {
+  AssetCard,
+  AssetCardProperty,
+} from "../../../../shared/types/AssetCard";
 
 export interface AssetCardFormProps {
   card: AssetCard;
@@ -50,6 +53,7 @@ export function AssetCardForm(props: AssetCardFormProps) {
             { label: "5 Health", value: 5 },
           ]}
         />
+
         <Radio.Group
           data-testid={"asset-card-form-name"}
           onChange={(e) => {
@@ -85,6 +89,19 @@ export function AssetCardForm(props: AssetCardFormProps) {
           value={card.title}
           className={"flex-1 min-w-full"}
         />
+        <Select
+          placeholder="Custom Fields ..."
+          data-testid={"asset-card-form-custom-fields"}
+          mode="tags"
+          style={{ width: "100%" }}
+          onChange={(value: Array<string>) => {
+            value = value.map((entry) => entry.toLocaleUpperCase());
+            props.setCard({
+              ...card,
+              custom_fields: [...value],
+            });
+          }}
+        />
         <Divider />
         <TextArea
           data-testid={"asset-card-form-description"}

diff --git a/client/src/components/AssetCardViewer/AssetCardViewer.tsx b/client/src/components/AssetCardViewer/AssetCardViewer.tsx
@@ -2,10 +2,10 @@
 
 import { useEffect, useRef, useState } from "react";
 import { Alert, Button, Spin } from "antd";
-import { AssetCard } from "../../types/Card";
 import { useInView } from "../../helpers/hooks/useInView";
 import { generatePngDataFromAssetCard } from "../../helpers/Converters";
 import OriginalContentWarning from "../OriginalContentWarning/OriginalContentWarning";
+import { AssetCard } from "../../../../shared/types/AssetCard";
 
 type AssetCardViewerProps = {
   card: AssetCard;

diff --git a/client/src/components/AssetCardViewer/CardTemplate.tsx b/client/src/components/AssetCardViewer/CardTemplate.tsx
@@ -1,6 +1,6 @@
 /** @format */
 
-import { AssetCard } from "../../types/Card";
+import { AssetCard } from "../../../../shared/types/AssetCard";
 
 export function CardTemplate(card: AssetCard, width: number, height: number) {
   return (
@@ -19,11 +19,11 @@ export function CardTemplate(card: AssetCard, width: number, height: number) {
     >
       <div
         style={{
-          width: "125px",
-          height: "125px",
+          width: "135px",
+          height: "135px",
           borderRadius: "9999px",
           border: "0.5em solid white",
-          backgroundColor: "#3e3e3e",
+          backgroundColor: "#43454b",
           position: "absolute",
           right: "2em",
           top: "2em",
@@ -32,10 +32,10 @@ export function CardTemplate(card: AssetCard, width: number, height: number) {
       <span
         style={{
           fontSize: "2.25em",
-          padding: "0.5em 0.5em 0.25em 0.5em",
+          padding: "0.75em 0.5em 0.25em 0.75em",
           width: "100%",
           fontWeight: "700",
-          backgroundColor: "#3e3e3e",
+          backgroundColor: "#43454b",
           color: "white",
         }}
       >
@@ -100,39 +100,84 @@ export function CardTemplate(card: AssetCard, width: number, height: number) {
             </div>
           );
         })}
-        {card.health > 0 && (
-          <div
-            style={{
-              position: "absolute",
-              boxSizing: "content-box",
-              bottom: "1em",
-              width: "calc(100% - 2em)",
-              height: "3.5em",
-              border: "1px solid black",
-              display: "flex",
-            }}
-          >
-            {["+0", "+1", "+2", "+3", "+4", "+5"].map((entry, index) => (
-              <div
-                key={"health-" + index}
-                style={{
-                  border: "1px solid black",
-                  height: "100%",
-                  flex: "1 1",
-                  display: "flex",
-                  justifyContent: "center",
-                  alignItems: "center",
-                  fontWeight: 700,
-                  fontSize: "1.5em",
-                  fontFamily: "Arial",
-                  color: "#5F5F5F",
-                }}
-              >
-                {card.health >= index ? entry : "/"}
-              </div>
-            ))}
-          </div>
-        )}
+        <div
+          style={{
+            position: "absolute",
+            boxSizing: "content-box",
+            bottom: "1em",
+            width: "calc(100% - 2em)",
+            display: "flex",
+            textAlign: "center",
+            flexDirection: "column",
+            rowGap: "0.5em",
+            fontStretch: "expanded",
+          }}
+        >
+          {card.custom_fields.length > 0 && (
+            <div
+              style={{
+                display: "flex",
+                height: "3em",
+                width: "100%",
+                border: "1px solid black",
+              }}
+            >
+              {card.custom_fields.map((entry, index) => (
+                <div
+                  key={"custom-" + index}
+                  style={{
+                    border: "1px solid black",
+                    height: "100%",
+                    flex: "1 1",
+                    display: "flex",
+                    justifyContent: "center",
+                    alignItems: "center",
+                    fontWeight: 700,
+                    fontSize: "1em",
+                    fontFamily: "Arial",
+                    color: "#5F5F5F",
+                    paddingLeft: "1.5em",
+                    paddingRight: "1.5em",
+                    wordWrap: "break-word",
+                    overflow: "hidden",
+                  }}
+                >
+                  {entry.toLocaleUpperCase()}
+                </div>
+              ))}
+            </div>
+          )}
+          {card.health > 0 && (
+            <div
+              style={{
+                display: "flex",
+                height: "2.6em",
+                width: "100%",
+                border: "1px solid black",
+              }}
+            >
+              {["+0", "+1", "+2", "+3", "+4", "+5"].map((entry, index) => (
+                <div
+                  key={"health-" + index}
+                  style={{
+                    border: "1px solid black",
+                    height: "100%",
+                    flex: "1 1",
+                    display: "flex",
+                    justifyContent: "center",
+                    alignItems: "center",
+                    fontWeight: 700,
+                    fontSize: "1.5em",
+                    fontFamily: "Arial",
+                    color: "#5F5F5F",
+                  }}
+                >
+                  {card.health >= index ? entry : "/"}
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
       </div>
     </div>
   );

diff --git a/client/src/components/AssetCardViewer/Mocks.tsx b/client/src/components/AssetCardViewer/Mocks.tsx
@@ -1,6 +1,6 @@
 /** @format */
 
-import { AssetCard } from "../../types/Card";
+import { AssetCard } from "../../../../shared/types/AssetCard";
 
 export const HawkMockAssetCard = {
   category: "companion",
@@ -31,4 +31,5 @@ export const HawkMockAssetCard = {
     },
   ],
   title: "Hawk",
+  custom_fields: [],
 } satisfies AssetCard;