Stable tailwind. Import UI from previous project

.gitignore

@@ -35,3 +35,6 @@ lerna-debug.log*
 !.vscode/tasks.json
 !.vscode/launch.json
 !.vscode/extensions.json
+
+# Tailwind output
+static/styles.css

esbuild.js

@@ -6,6 +6,7 @@ const { glob } = require("glob");
 
 (async() => {
     const files = await glob("dist/**/*.jsx");
+    console.log(files);
     const ctx = await context({
         platform: "node",
         entryPoints: files,
@@ -18,7 +19,8 @@ const { glob } = require("glob");
                 hydratable: true,
             },
         })],
-        outdir: "dist/src",
+        outdir: "dist",
+        outbase: "dist",
         format: "cjs",
     });
 

package.json

@@ -17,12 +17,14 @@
     "test:cov": "jest --coverage",
     "test:debug": "node --inspect-brk -r tsconfig-paths/register -r ts-node/register node_modules/.bin/jest --runInBand",
     "test:e2e": "jest --config ./test/jest-e2e.json",
-    "ssr:watch": "node esbuild.js"
+    "ssr:watch": "node esbuild.js",
+    "tailwind": "tailwindcss -i static/tailwind.css -o ./static/styles.css --watch"
   },
   "dependencies": {
     "@nestjs/common": "^9.0.0",
     "@nestjs/core": "^9.0.0",
     "@nestjs/platform-express": "^9.0.0",
+    "@nestjs/serve-static": "^3.0.1",
     "@nestjs/typeorm": "^9.0.1",
     "mysql2": "^3.2.4",
     "reflect-metadata": "^0.1.13",

src/app.controller.ts

@@ -1,7 +1,5 @@
 import { Controller, Get } from "@nestjs/common";
 import { AppService } from "./app.service";
-import { renderToString } from "solid-js/web";
-import { SolidAppJSX } from "./solidAppJSX";
 
 @Controller()
 export class AppController {
@@ -10,9 +8,6 @@ export class AppController {
 
     @Get()
     getHello(): string {
-        console.log(typeof this.appService);
-        console.log(this.appService);
-        const html = renderToString(SolidAppJSX);
-        return html;
+        return "Hello!";
     }
 }

src/app.module.ts

@@ -2,8 +2,9 @@ import { Module } from "@nestjs/common";
 import { AppController } from "./app.controller";
 import { AppService } from "./app.service";
 import { TypeOrmModule } from "@nestjs/typeorm";
-import { CatController } from "./controllers/cat.controller";
-import { CatService } from "./controllers/cat.service";
+import { CertsController } from "./certs/certs.controller";
+import { ServeStaticModule } from "@nestjs/serve-static";
+import { join } from "path";
 
 @Module({
     imports: [
@@ -18,8 +19,11 @@ import { CatService } from "./controllers/cat.service";
             synchronize: false,
         }),
          */
+        //ServeStaticModule.forRoot({
+        //  rootPath: join(__dirname, "..", "static"),
+        //}),
     ],
-    controllers: [AppController, CatController],
-    providers: [AppService, CatService],
+    controllers: [AppController, CertsController],
+    providers: [AppService],
 })
 export class AppModule {}

src/app.service.ts

@@ -1,22 +1,8 @@
 import { Injectable } from "@nestjs/common";
-import { renderToString } from "solid-js/web";
-import { SolidAppJSX } from "./solidAppJSX";
-
-console.log("Service module");
 
 @Injectable()
 export class AppService {
-    constructor() {
-        console.log("Service constructor");
-    }
-
-    static {
-        console.log("Service - Static");
-    }
-
     getHello(): string {
-        // console.log(typeof SolidAppJSX);
-        // console.log(SolidAppJSX);
         const html = ":D"; // renderToString(SolidAppJSX);
         console.log(`SSR? ${html}`);
         return `Hello world! ${html}`;

src/certs/certs.controller.ts

@@ -0,0 +1,13 @@
+import { Controller, Get } from "@nestjs/common";
+import { renderToString } from "solid-js/web";
+import { Certs } from "../views/Certs";
+import { template } from "./certs.template";
+
+@Controller("certs")
+export class CertsController {
+    @Get()
+    entry(): string {
+        const html = renderToString(Certs);
+        return template(html);
+    }
+}

src/certs/certs.template.ts

@@ -0,0 +1,17 @@
+import { generateHydrationScript } from "solid-js/web";
+
+export function template(ssr: string): string {
+    return `
+  <html lang="es">
+    <head>
+      <title>Solid SSR :D</title>
+      <meta charset="UTF-8" />
+      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+      <link rel="stylesheet" href="/static/styles.css" />
+      ${generateHydrationScript()}
+    </head>
+    <body>${ssr}</body>
+  </html>
+`;
+
+}

src/controllers/Cats.tsx

@@ -1,8 +0,0 @@
-export function Cats() {
-    return (
-        <div>
-            Cats :D
-            <p>__cats jsx__</p>
-        </div>
-    );
-}

src/controllers/cat.controller.ts

@@ -1,14 +0,0 @@
-import { Controller, Get } from "@nestjs/common";
-import { CatService } from "./cat.service";
-
-
-@Controller("cats")
-export class CatController {
-    constructor(private catService: CatService) {
-    }
-
-    @Get()
-    async findAll(): Promise<Array<string>> {
-        return this.catService.findAll();
-    }
-}

src/controllers/cat.service.ts

@@ -1,13 +0,0 @@
-import { Injectable } from "@nestjs/common";
-
-@Injectable()
-export class CatService {
-    private readonly cats: Array<string> = [];
-    create(name: string) {
-        this.cats.push(name);
-    }
-
-    findAll(): Array<string> {
-        return this.cats;
-    }
-}

src/index.css

@@ -1,3 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;

src/main.ts

@@ -1,9 +1,15 @@
 import { NestFactory } from "@nestjs/core";
 import { FastifyAdapter, NestFastifyApplication } from "@nestjs/platform-fastify";
 import { AppModule } from "./app.module";
+import * as express from "express";
+import * as path from "path";
 
 async function bootstrap() {
     const app = await NestFactory.create(AppModule);
+
+    // Serve static files
+    app.use("/static", express.static(path.join(__dirname, "..", "static")));
+
     await app.listen(3000);
 }
 

src/solidAppJSX.tsx

@@ -1,8 +0,0 @@
-
-export function SolidAppJSX() {
-    return (
-        <div class="text-3xl font-bold underline">
-            OMG!! SSR!!!
-        </div>
-    );
-}

src/views/Certs.tsx

@@ -0,0 +1,21 @@
+import { createSignal } from "solid-js";
+import { Search } from "./components/Search";
+import { Person } from "./types/Person";
+import { Registers } from "./components/Registers";
+
+
+export function Certs() {
+    const [person, setPerson] = createSignal<Person | null>(null);
+
+    return (
+        <div>
+            <h1
+                class="px-4 py-2 text-2xl font-bold"
+            >
+                Registrar certificado
+            </h1>
+            <Search setPerson={setPerson}/>
+            <Registers person={person()} />
+        </div>
+    );
+}

src/views/components/Registers.tsx

@@ -0,0 +1,45 @@
+import { Show, createEffect, createSignal } from "solid-js";
+import { Person } from "../types/Person";
+
+export function Registers(props: {person: Person | null}) {
+    const [loading, setLoading] = createSignal(false);
+
+    createEffect(() => {
+        const person = props.person;
+        if (person !== null) {
+            // Load certificates from DB
+            loadCertificates();
+        }
+    });
+
+    const loadCertificates = () => {
+        console.log("loading from db...");
+        setLoading(true);
+    };
+
+    return (
+        <div class="p-4">
+            <h2 class="my-4 font-bold text-xl">2. Revisar registros actuales</h2>
+
+            <div class="px-4">
+                <Show when={props.person !== null}>
+                    <input
+                        type="text"
+                        disabled
+                        value={props.person?.nombre}
+                        class="bg-c-background text-c-on-background border-c-outline border rounded px-2 py-1
+                            disabled:cursor-text w-full"
+                    />
+                    <p
+                        class="my-2"
+                        style={{display: loading() ? "block" : "none"}}
+                    >
+                        Recuperando registros...
+                    </p>
+                </Show>
+
+
+            </div>
+        </div>
+    );
+}

src/views/components/Search.tsx

@@ -0,0 +1,85 @@
+import { createSignal } from "solid-js";
+import { JSX } from "solid-js/jsx-runtime";
+import { Person } from "../types/Person";
+
+type HTMLEventFn = JSX.EventHandlerUnion<HTMLFormElement, Event & {
+    submitter: HTMLElement;
+}>;
+
+
+/*
+    Form that retrieves an user from the DB given an ID
+*/
+export function Search(props: {setPerson: (p: Person | null) => void}) {
+    const [dni, setDni] = createSignal("");
+    const [loading, setLoading] = createSignal(false);
+    const [error, setError] = createSignal("");
+
+    /*
+      Sends the DNI to RUST to search in the DB
+    */
+    const searchDNI: HTMLEventFn = (ev) => {
+        console.log("D:");
+        ev.preventDefault();
+        setLoading(true);
+        setError("");
+
+        /*
+        invoke("search_dni", {dni: dni()})
+            .then((p) => {
+                const person = p as Person;
+                props.setPerson(person);
+                setLoading(false);
+            })
+            .catch((error) => {
+                setError(error);
+                setLoading(false);
+            });
+         */
+    };
+
+    return (
+        <div class="p-4">
+            <h2 class="my-2 font-bold text-xl">1. Buscar persona</h2>
+            <form onSubmit={searchDNI} class="px-4">
+                <label for="search-dni">DNI</label>
+                <br />
+                <input
+                    id="search-dni"
+                    class="bg-c-background text-c-on-background border-c-outline border rounded px-2 py-1
+                        invalid:border-c-on-error invalid:bg-c-error invalid:text-c-on-error
+                        focus:border-c-primary outline-none
+                        disabled:opacity-50 disabled:cursor-not-allowed"
+                    type="text"
+                    minLength={8}
+                    maxLength={8}
+                    pattern="[0-9]{8}"
+                    placeholder="Número de DNI"
+                    value={dni()}
+                    onChange={(e) => setDni(e.target.value)}
+                    disabled={loading()}
+                />
+                <br />
+                <br />
+                <input
+                    class="bg-c-primary text-c-on-primary px-4 py-2 rounded-md cursor-pointer
+                        disabled:opacity-50 disabled:cursor-not-allowed"
+                    type="submit"
+                    value="Buscar"
+                    disabled={loading()}
+                />
+
+                <p
+                    class="my-2 p-1 rounded
+                           bg-c-error text-c-on-error"
+                    style={{display: error() === "" ? "none" : "block"}}
+                >
+                    Error:
+                    <br />
+                    {error()}&nbsp;
+                </p>
+
+            </form>
+        </div>
+    );
+}

src/views/types/Person.ts

@@ -0,0 +1,7 @@
+export type Person = {
+    /** Full name */
+    nombre: string
+    apellidoPaterno: string,
+    apellidoMaterno: string,
+    nombres: string,
+};

static/tailwind.css

@@ -0,0 +1,46 @@
+/*
+    Base colors :D
+*/
+@media (prefers-color-scheme: light) {
+    :root {
+        --c-primary: #895100;
+        --c-on-primary: #ffffff;
+        --c-primary-container: #ffdcbd;
+        --c-on-primary-container: #2c1600;
+        --c-background: #fffbff;
+        --c-on-background: #fffbff;
+        --c-surface: #fffbff;
+        --c-on-surface: #201b16;
+        --c-outline: #837568;
+        --c-surface-variant: #f2dfd0;
+        --c-on-surface-variant: #50453a;
+    }
+}
+
+:root {
+    --c-primary: #ffb86d;
+    --c-on-primary: #492900;
+    --c-primary-container: #683c00;
+    --c-on-primary-container: #ffdcbd;
+    --c-error: #ffb4ab;
+    --c-on-error: #690005;
+    --c-error-container: #93000a;
+    --c-on-error-container: #ffdad6;
+    --c-background: #201b16;
+    --c-on-background: #ebe1d9;
+    --c-surface: #201b16;
+    --c-on-surface: #ebe1d9;
+    --c-outline: #9d8e81;
+    --c-surface-variant: #50453a;
+    --c-on-surface-variant: #d5c3b5;
+}
+
+body {
+    background-color: var(--c-background);
+    color: var(--c-on-background);
+    font-family: Inter, "Inter Nerd Font", sans-serif;
+}
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

tailwind.config.js

@@ -1,10 +1,27 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
     content: [
-        "./src/**/*.{tsx}",
+        "./src/**/*.tsx",
     ],
     theme: {
         extend: {},
+        colors: {
+            "c-primary": "var(--c-primary)",
+            "c-on-primary": "var(--c-on-primary)",
+            "c-primary-container": "var(--c-primary-container)",
+            "c-on-primary-container": "var(--c-on-primary-container)",
+            "c-error": "var(--c-error)",
+            "c-on-error": "var(--c-on-error)",
+            "c-error-container": "var(--c-error-container)",
+            "c-on-error-container": "var(--c-on-error-container)",
+            "c-background": "var(--c-background)",
+            "c-on-background": "var(--c-on-background)",
+            "c-surface": "var(--c-surface)",
+            "c-on-surface": "var(--c-on-surface)",
+            "c-outline": "var(--c-outline)",
+            "c-surface-variant": "var(--c-surface-variant)",
+            "c-on-surface-variant": "var(--c-on-surface-variant)",
+        },
     },
     plugins: [],
 };