add api generator

pkgs/ui/.gitignore

@@ -37,3 +37,7 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# Generated api code
+openapi.json
+api/

pkgs/ui/default.nix

@@ -1,6 +1,7 @@
 { floco ? builtins.getFlake "github:aakropotkin/floco"
 , system ? builtins.currentSystem
 , pkgs ? import <nixpkgs> { currentSystem = system; }
+, clanPkgs ? { }
 }:
 let
 
@@ -25,7 +26,7 @@ let
       ./nix/floco-cfg.nix
     ];
     specialArgs = {
-      inherit pkgs;
+      inherit pkgs clanPkgs;
     };
   };
 

pkgs/ui/flake-module.nix

@@ -3,7 +3,7 @@
   perSystem = { pkgs, system, ... }:
     let
       inherit (self.inputs) floco;
-      base = pkgs.callPackage ./default.nix { inherit floco system; };
+      base = pkgs.callPackage ./default.nix { inherit floco system; clanPkgs = self.packages.${system}; };
     in
     {
       packages = {
@@ -12,6 +12,7 @@
       devShells.ui = pkgs.callPackage ./shell.nix {
         inherit pkgs;
         inherit (base) fmod pkg;
+        clanPkgs = self.packages.${system};
       };
     };
 }

pkgs/ui/next.config.js

@@ -2,6 +2,9 @@
 const nextConfig = {
   output: "export",
   images: { unoptimized: true },
+  eslint: {
+    dirs: ["src"],
+  },
 };
 
 module.exports = nextConfig;

pkgs/ui/nix/foverrides.nix

@@ -1,4 +1,4 @@
-{ lib, config, pkgs, ... }:
+{ lib, config, pkgs, clanPkgs, ... }:
 let
 
   pjs =
@@ -27,19 +27,27 @@ let
     "aarch64-darwin" = "@next/swc-darwin-arm64";
   }.${config.floco.settings.system};
 
-  # '
-  #           "@next/swc-darwin-arm64": "13.4.12",
-  #         "@next/swc-darwin-x64": "13.4.12",
+  esbuildVersions = lib.filterAttrs (name: _attrs: name == "esbuild") config.floco.pdefs;
+  highestEsbuildVersion = lib.last (builtins.attrNames esbuildVersions.esbuild);
 
-  #         "@next/swc-linux-arm64-gnu": "13.4.12",
-  #         "@next/swc-linux-arm64-musl": "13.4.12",
-
-  #         "@next/swc-linux-x64-gnu": "13.4.12",
-  #         "@next/swc-linux-x64-musl": "13.4.12",
+  esbuildArch = {
+    # esbuild-linux-64
+    "x86_64-linux" = "esbuild-linux-64";
+    "x86_64-darwin" = "esbuild-darwin-64";
+    "aarch64-darwin" = "esbuild-darwin-arm64";
+  }.${config.floco.settings.system};
 
 in
 {
-
+  config.floco.packages.esbuild =
+    builtins.mapAttrs
+      (
+        version: _attrs: {
+          installed.override.copyTree = true;
+          installed.tree = config.floco.packages.${esbuildArch}.${version}.global;
+        }
+      )
+      esbuildVersions.esbuild;
   # ---------------------------------------------------------------------------- #
 
   config.floco.packages.${ident}.${version} =
@@ -61,7 +69,13 @@ in
       # nextjs chaches some stuff in $HOME
       built.override.preBuild = ''
         export HOME=./home
-        ln -s ${pkgs.roboto}/share/fonts ./src/fonts
+
+
+        echo "----------- GENERATE API TS ------------"
+        cp ${clanPkgs.clan-openapi}/openapi.json .
+        ./node_modules/.bin/orval
+
+        ln -fs ${pkgs.roboto}/share/fonts ./src/
 
         echo "----------- RUNNING LINT ------------"
         next lint --max-warnings 0
@@ -79,6 +93,12 @@ in
                   optional = false;
                   dev = true;
                 };
+                "node_modules/${esbuildArch}" = {
+                  key = "${esbuildArch}/${highestEsbuildVersion}";
+                  link = false;
+                  optional = false;
+                  dev = true;
+                };
               };
           });
         in

pkgs/ui/orval.config.ts

@@ -0,0 +1,16 @@
+const config = {
+  petstore: {
+    output: {
+      mode: "tags-split",
+      target: "api",
+      schemas: "api/model",
+      client: "swr",
+      // mock: true,
+    },
+    input: {
+      target: "./openapi.json",
+    },
+  },
+};
+
+export default config;

pkgs/ui/package.json

@@ -17,6 +17,7 @@
     "@mui/icons-material": "^5.14.3",
     "@mui/material": "^5.14.3",
     "autoprefixer": "10.4.14",
+    "axios": "^1.4.0",
     "classnames": "^2.3.2",
     "hex-rgb": "^5.0.0",
     "next": "13.4.12",
@@ -26,6 +27,7 @@
     "react-hook-form": "^7.45.4",
     "react-hot-toast": "^2.4.1",
     "recharts": "^2.7.3",
+    "swr": "^2.2.1",
     "tailwindcss": "3.3.3"
   },
   "devDependencies": {
@@ -33,9 +35,11 @@
     "@types/react": "18.2.18",
     "@types/react-dom": "18.2.7",
     "@types/w3c-web-usb": "^1.0.6",
-    "eslint": "8.46.0",
+    "esbuild": "^0.15.18",
+    "eslint": "^8.46.0",
     "eslint-config-next": "13.4.12",
     "eslint-plugin-tailwindcss": "^3.13.0",
+    "orval": "^6.17.0",
     "prettier": "^3.0.1",
     "prettier-plugin-tailwindcss": "^0.4.1",
     "typescript": "5.1.6"

pkgs/ui/shell.nix

@@ -1,7 +1,7 @@
 { fmod
 , pkg
 , pkgs
-,
+, clanPkgs
 }:
 pkgs.mkShell {
   buildInputs = [
@@ -19,8 +19,14 @@ pkgs.mkShell {
       echo "floco ok: node_modules updated"
     fi
 
-    ln -sf ${pkgs.roboto}/share/fonts ./src/fonts
-
+    ln -sf ${pkgs.roboto}/share/fonts ./src
+    
     export PATH="$PATH:$(realpath ./node_modules)/.bin"
+
+
+    # re-generate the api code 
+    rm -rf api openapi.json
+    cp ${clanPkgs.clan-openapi}/openapi.json . 
+    orval
   '';
 }

pkgs/ui/src/app/layout.tsx

@@ -19,6 +19,7 @@ import { Sidebar } from "@/components/sidebar";
 import MenuIcon from "@mui/icons-material/Menu";
 import Image from "next/image";
 import { tw } from "@/utils/tailwind";
+import axios from "axios";
 
 const roboto = localFont({
   src: [
@@ -30,6 +31,8 @@ const roboto = localFont({
   ],
 });
 
+axios.defaults.baseURL = "http://localhost:2979";
+
 // add negative margin for smooth transition to fill the space of the sidebar
 const translate = tw`lg:-ml-64 -ml-14`;
 

pkgs/ui/src/app/templates/[id]/page.tsx

@@ -29,6 +29,7 @@ import {
   Typography,
 } from "@mui/material";
 import { useState } from "react";
+import { useListMachines } from "../../../../api/default/default";
 
 export async function generateStaticParams() {
   return [{ id: "1" }, { id: "2" }];
@@ -46,6 +47,8 @@ interface TemplateDetailProps {
   params: { id: string };
 }
 export default function TemplateDetail({ params }: TemplateDetailProps) {
+  const { data, isLoading } = useListMachines();
+  console.log({ data, isLoading });
   const details = getTemplate(params);
 
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);

pkgs/ui/tsconfig.json

@@ -20,7 +20,8 @@
       }
     ],
     "paths": {
-      "@/*": ["./src/*"]
+      "@/*": ["./src/*"],
+      "API": ["./api/*"]
     }
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],