feat: scaffolding basic UI structure

2026-09-22 16:05:37 +00:00 · 2023-11-11 13:40:37 -08:00
parent e162ad28f6
commit b3f062a39a
8 changed files with 1140 additions and 161 deletions
@@ -0,0 +1,6 @@
+{
+  "/api": {
+    "target": "http://localhost:9090",
+    "secure": false
+  }
+}
@@ -10,19 +10,17 @@
  "author": "",
  "license": "ISC",
  "dependencies": {
-    "@types/lodash": "^4.14.191",
-    "@types/node": "^18.11.18",
-    "@types/react": "^18.0.26",
-    "@types/react-dom": "^18.0.10",
-    "axios": "^1.2.2",
-    "lodash": "^4.17.21",
-    "parcel": "^2.8.2",
+    "@ant-design/icons": "^5.2.6",
+    "@types/node": "^20.9.0",
+    "@types/react": "^18.2.37",
+    "@types/react-dom": "^18.2.15",
+    "antd": "^5.11.1",
+    "buffer": "^6.0.3",
+    "parcel": "^2.10.2",
+    "process": "^0.11.10",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
-    "typescript": "^4.9.4"
-  },
-  "devDependencies": {
-    "buffer": "^5.7.1",
-    "process": "^0.11.10"
+    "recoil": "^0.7.7",
+    "typescript": "^5.2.2"
  }
 }
@@ -1,5 +1,3 @@
 body {
-  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue",
-    Helvetica, Arial, "Lucida Grande", sans-serif;
-  font-weight: 300;
-}
+  margin: 0px;
+}
@@ -1,12 +1,11 @@
+<!DOCTYPE html>
 <html>
  <head>
-    <title>Guidebook FS Search</title>
-    <link rel="stylesheet" href="./index.css" />
+    <title>ResticUI</title>
+    <link rel="stylesheet" href="index.css">
  </head>
  <body>
    <div id="app"></div>
-    <!-- The script tag below is just a place holder.
-         Parcel will perform magic to insert TSC output here: -->
    <script src="index.tsx" type="module"></script>
  </body>
 </html>
@@ -1,24 +1,79 @@
-import test from "node:test";
-import * as React from "react";
-import _ from "lodash";
+import React from "react";
+import {
+  LaptopOutlined,
+  NotificationOutlined,
+  UserOutlined,
+} from "@ant-design/icons";
+import type { MenuProps } from "antd";
+import { Breadcrumb, Layout, Menu, theme } from "antd";

-export const App = () => {
-  const [searchTerm, setSearchTerm] = React.useState("");
-  const [results, setResults] = React.useState<any>();
+const { Header, Content, Sider } = Layout;
+
+const items1: MenuProps["items"] = ["1", "2", "3"].map((key) => ({
+  key,
+  label: `nav ${key}`,
+}));
+
+const items2: MenuProps["items"] = [
+  UserOutlined,
+  LaptopOutlined,
+  NotificationOutlined,
+].map((icon, index) => {
+  const key = String(index + 1);
+
+  return {
+    key: `sub${key}`,
+    icon: React.createElement(icon),
+    label: `subnav ${key}`,
+
+    children: new Array(4).fill(null).map((_, j) => {
+      const subKey = index * 4 + j + 1;
+      return {
+        key: subKey,
+        label: `option${subKey}`,
+      };
+    }),
+  };
+});
+
+export const App: React.FC = () => {
+  const {
+    token: { colorBgContainer, colorTextLightSolid },
+  } = theme.useToken();

  return (
-    <div>
-      <h1>Guidebook FS Search</h1>
-      <div>
-        Search:
-        <input
-          value={searchTerm}
-          onChange={(e) => setSearchTerm(e.target.value)}
-        ></input>
-      </div>
-      <pre>
-        <code>{"RESULTS: " + JSON.stringify(results, null, 2)}</code>
-      </pre>
-    </div>
+    <Layout>
+      <Header style={{ display: "flex", alignItems: "center" }}>
+        <h1 style={{ color: colorTextLightSolid }}>ResticUI</h1>
+      </Header>
+      <Layout>
+        <Sider width={200} style={{ background: colorBgContainer }}>
+          <Menu
+            mode="inline"
+            defaultSelectedKeys={["1"]}
+            defaultOpenKeys={["sub1"]}
+            style={{ height: "100%", borderRight: 0 }}
+            items={items2}
+          />
+        </Sider>
+        <Layout style={{ padding: "0 24px 24px" }}>
+          <Breadcrumb style={{ margin: "16px 0" }}>
+            <Breadcrumb.Item>Home</Breadcrumb.Item>
+            <Breadcrumb.Item>List</Breadcrumb.Item>
+            <Breadcrumb.Item>App</Breadcrumb.Item>
+          </Breadcrumb>
+          <Content
+            style={{
+              padding: 24,
+              margin: 0,
+              minHeight: 280,
+              background: colorBgContainer,
+            }}
+          >
+            Content
+          </Content>
+        </Layout>
+      </Layout>
+    </Layout>
  );
 };
@@ -0,0 +1,71 @@
+import React from "react";
+import { DownOutlined } from "@ant-design/icons";
+import { Tree } from "antd";
+import type { DataNode, TreeProps } from "antd/es/tree";
+
+const treeData: DataNode[] = [
+  {
+    title: "parent 1",
+    key: "0-0",
+    children: [
+      {
+        title: "parent 1-0",
+        key: "0-0-0",
+        children: [
+          {
+            title: "leaf",
+            key: "0-0-0-0",
+          },
+          {
+            title: "leaf",
+            key: "0-0-0-1",
+          },
+          {
+            title: "leaf",
+            key: "0-0-0-2",
+          },
+        ],
+      },
+      {
+        title: "parent 1-1",
+        key: "0-0-1",
+        children: [
+          {
+            title: "leaf",
+            key: "0-0-1-0",
+          },
+        ],
+      },
+      {
+        title: "parent 1-2",
+        key: "0-0-2",
+        children: [
+          {
+            title: "leaf",
+            key: "0-0-2-0",
+          },
+          {
+            title: "leaf",
+            key: "0-0-2-1",
+          },
+        ],
+      },
+    ],
+  },
+];
+
+export const App: React.FC = () => {
+  const onSelect: TreeProps["onSelect"] = (selectedKeys, info) => {
+    console.log("selected", selectedKeys, info);
+  };
+
+  return (
+    <Tree
+      showLine
+      switcherIcon={<DownOutlined />}
+      defaultExpandedKeys={["0-0-0"]}
+      onSelect={onSelect}
+      treeData={treeData}
+    />
+  );
+};