Starting to implement the create invitation form

package-lock.json

@@ -7,7 +7,8 @@
       "name": "backend",
       "dependencies": {
         "@felte/reporter-solid": "^1.2.5",
-        "@felte/solid": "^1.2.7"
+        "@felte/solid": "^1.2.7",
+        "@kobalte/core": "^0.6.1"
       },
       "devDependencies": {
         "@solidjs/meta": "^0.28.2",
@@ -1869,6 +1870,19 @@
         "solid-js": "^1.2.0"
       }
     },
+    "node_modules/@floating-ui/core": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.2.1.tgz",
+      "integrity": "sha512-LSqwPZkK3rYfD7GKoIeExXOyYx6Q1O4iqZWwIehDNuv3Dv425FIAE8PRwtAx1imEolFTHgBEcoFHm9MDnYgPCg=="
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.2.1.tgz",
+      "integrity": "sha512-Rt45SmRiV8eU+xXSB9t0uMYiQ/ZWGE/jumse2o3i5RGlyvcbqOF4q+1qBnzLE2kZ5JGhq0iMkcGXUKbFe7MpTA==",
+      "dependencies": {
+        "@floating-ui/core": "^1.2.1"
+      }
+    },
     "node_modules/@hapi/address": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/@hapi/address/-/address-5.1.0.tgz",
@@ -1917,6 +1931,30 @@
         "@hapi/hoek": "^11.0.2"
       }
     },
+    "node_modules/@internationalized/date": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@internationalized/date/-/date-3.0.2.tgz",
+      "integrity": "sha512-9V1IxesP6ASZj/hYyOXOC4yPJvidbbStyWQKLCQSqhhKACMOXoo+BddXZJy47ju9mqOMpWdrJ2rTx4yTxK9oag==",
+      "dependencies": {
+        "@swc/helpers": "^0.4.14"
+      }
+    },
+    "node_modules/@internationalized/number": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@internationalized/number/-/number-3.1.2.tgz",
+      "integrity": "sha512-Mbys8SGsn0ApXz3hJLNU+d95B8luoUbwnmCpBwl7d63UmYAlcT6TRDyvaS/vwdbElXLcsQJjQCu0gox2cv/Tig==",
+      "dependencies": {
+        "@swc/helpers": "^0.4.14"
+      }
+    },
+    "node_modules/@internationalized/string": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@internationalized/string/-/string-3.0.1.tgz",
+      "integrity": "sha512-2+rHfXZ56YgsC6i3fKvBue/xatnSm0Jv+C/x4+n3wg5xAcLh4LPW3GvZ/9ifxNAz9+IWplgZHa1FRIbSuUvNWg==",
+      "dependencies": {
+        "@swc/helpers": "^0.4.14"
+      }
+    },
     "node_modules/@istanbuljs/schema": {
       "version": "0.1.3",
       "resolved": "https://registry.npmjs.org/@istanbuljs/schema/-/schema-0.1.3.tgz",
@@ -2038,6 +2076,35 @@
         "@jridgewell/sourcemap-codec": "1.4.14"
       }
     },
+    "node_modules/@kobalte/core": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/@kobalte/core/-/core-0.6.1.tgz",
+      "integrity": "sha512-N4v0hr52yxo18pi+kKDqI1xG9RRO2VZQp1kxy63Z38nV7VPJR3DNB3iPHPDrun6Lsn+3L2tKG0bAA/1pWPKOPw==",
+      "dependencies": {
+        "@floating-ui/dom": "^1.0.7",
+        "@internationalized/date": "^3.0.2",
+        "@internationalized/number": "^3.1.1",
+        "@internationalized/string": "^3.0.0",
+        "@kobalte/utils": "^0.5.1"
+      },
+      "peerDependencies": {
+        "solid-js": "^1.6.10"
+      }
+    },
+    "node_modules/@kobalte/utils": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/@kobalte/utils/-/utils-0.5.1.tgz",
+      "integrity": "sha512-CwJv76/PNSU5TnNrunVggaGBy/vhgrEbQvO6UcEPIPAOBNiviEP/90AkiNex7l5BKucpyCrNft74DFC0X3qkIQ==",
+      "dependencies": {
+        "@solid-primitives/event-listener": "^2.2.4",
+        "@solid-primitives/media": "^2.0.4",
+        "@solid-primitives/refs": "^0.3.4",
+        "@solid-primitives/utils": "^4.0.0"
+      },
+      "peerDependencies": {
+        "solid-js": "^1.6.10"
+      }
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -2241,6 +2308,113 @@
       "integrity": "sha512-VEB8ygeP42CFLWyAJhN5OklpxUliqdNEUcXb4xZ/CINqtYGTjL5ukluKdKzQ0iWdUxyQ7B0539PAUhHKrCNWSQ==",
       "dev": true
     },
+    "node_modules/@solid-primitives/event-listener": {
+      "version": "2.2.6",
+      "resolved": "https://registry.npmjs.org/@solid-primitives/event-listener/-/event-listener-2.2.6.tgz",
+      "integrity": "sha512-Lb2q888Apv8wqgZ3WvPlt8ic2rEmHx6QT8d3pgi+JRSIRNwAysE6PZDmbwT6/hzzP1TIQG0IRZwh5tomfuqlaQ==",
+      "dependencies": {
+        "@solid-primitives/utils": "^5.0.0"
+      },
+      "peerDependencies": {
+        "solid-js": "^1.6.0"
+      }
+    },
+    "node_modules/@solid-primitives/event-listener/node_modules/@solid-primitives/utils": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@solid-primitives/utils/-/utils-5.2.0.tgz",
+      "integrity": "sha512-9sJSBv0IshaQ6qks9FW9ErKZS9qeAv+uYYrsAAXnu5XtDeifRtMk0k6Smje4XxzpxGH/8P4nwS2kk/9vt6KsBg==",
+      "peerDependencies": {
+        "solid-js": "^1.6.0"
+      }
+    },
+    "node_modules/@solid-primitives/immutable": {
+      "version": "0.1.6",
+      "resolved": "https://registry.npmjs.org/@solid-primitives/immutable/-/immutable-0.1.6.tgz",
+      "integrity": "sha512-P4wbDogtytijTV5En+bm6jfFbf4ZOMnfmttUJ8642MQ0tJ2VS2z8iJplg9YFJIltXz7W/+2mdfw2XczlkTxeGg==",
+      "dependencies": {
+        "@solid-primitives/utils": "^5.0.0"
+      },
+      "peerDependencies": {
+        "solid-js": "^1.6.0"
+      }
+    },
+    "node_modules/@solid-primitives/immutable/node_modules/@solid-primitives/utils": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@solid-primitives/utils/-/utils-5.2.0.tgz",
+      "integrity": "sha512-9sJSBv0IshaQ6qks9FW9ErKZS9qeAv+uYYrsAAXnu5XtDeifRtMk0k6Smje4XxzpxGH/8P4nwS2kk/9vt6KsBg==",
+      "peerDependencies": {
+        "solid-js": "^1.6.0"
+      }
+    },
+    "node_modules/@solid-primitives/media": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@solid-primitives/media/-/media-2.1.1.tgz",
+      "integrity": "sha512-0lMEIDereGYCKNnl0zIAd8v2kiJIUNP9om0VJKF6gD4kItUE+pdcSBok9CdEhjQzSS/HdsNo1smCYHNzdES09Q==",
+      "dependencies": {
+        "@solid-primitives/event-listener": "^2.2.6",
+        "@solid-primitives/rootless": "^1.2.3",
+        "@solid-primitives/utils": "^5.2.0"
+      },
+      "peerDependencies": {
+        "solid-js": "^1.6.0"
+      }
+    },
+    "node_modules/@solid-primitives/media/node_modules/@solid-primitives/utils": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@solid-primitives/utils/-/utils-5.2.0.tgz",
+      "integrity": "sha512-9sJSBv0IshaQ6qks9FW9ErKZS9qeAv+uYYrsAAXnu5XtDeifRtMk0k6Smje4XxzpxGH/8P4nwS2kk/9vt6KsBg==",
+      "peerDependencies": {
+        "solid-js": "^1.6.0"
+      }
+    },
+    "node_modules/@solid-primitives/refs": {
+      "version": "0.3.6",
+      "resolved": "https://registry.npmjs.org/@solid-primitives/refs/-/refs-0.3.6.tgz",
+      "integrity": "sha512-8PkCzIxnHd+kY3IaLKWvix0G15iUS6hffMOooM9fWnkQy2p5PYjOWtC/qucOBGfn6skaOAMq5rnoP40WNi9YXw==",
+      "dependencies": {
+        "@solid-primitives/immutable": "^0.1.6",
+        "@solid-primitives/rootless": "^1.2.3",
+        "@solid-primitives/utils": "^5.0.0"
+      },
+      "peerDependencies": {
+        "solid-js": "^1.6.0"
+      }
+    },
+    "node_modules/@solid-primitives/refs/node_modules/@solid-primitives/utils": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@solid-primitives/utils/-/utils-5.2.0.tgz",
+      "integrity": "sha512-9sJSBv0IshaQ6qks9FW9ErKZS9qeAv+uYYrsAAXnu5XtDeifRtMk0k6Smje4XxzpxGH/8P4nwS2kk/9vt6KsBg==",
+      "peerDependencies": {
+        "solid-js": "^1.6.0"
+      }
+    },
+    "node_modules/@solid-primitives/rootless": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@solid-primitives/rootless/-/rootless-1.2.4.tgz",
+      "integrity": "sha512-wsxpJzmCTeKt7gM1sDN3aKs5Sb8dmD3xVBdXUA+xZWcO5v/CVR5Gq690YvXvWSK+Thjv8jvDNHI582CDP/gFzQ==",
+      "dependencies": {
+        "@solid-primitives/utils": "^5.0.0"
+      },
+      "peerDependencies": {
+        "solid-js": "^1.6.11"
+      }
+    },
+    "node_modules/@solid-primitives/rootless/node_modules/@solid-primitives/utils": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@solid-primitives/utils/-/utils-5.2.0.tgz",
+      "integrity": "sha512-9sJSBv0IshaQ6qks9FW9ErKZS9qeAv+uYYrsAAXnu5XtDeifRtMk0k6Smje4XxzpxGH/8P4nwS2kk/9vt6KsBg==",
+      "peerDependencies": {
+        "solid-js": "^1.6.0"
+      }
+    },
+    "node_modules/@solid-primitives/utils": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/@solid-primitives/utils/-/utils-4.0.1.tgz",
+      "integrity": "sha512-06fSyBair7ZxCquMjIqJes29aNg65X776TVw4EUN7PBtdWsGUeIZ9F/H4ek7yrDSxaSDaPHeye5knEYsYAq2gA==",
+      "peerDependencies": {
+        "solid-js": "^1.6.0"
+      }
+    },
     "node_modules/@solidjs/meta": {
       "version": "0.28.2",
       "resolved": "https://registry.npmjs.org/@solidjs/meta/-/meta-0.28.2.tgz",
@@ -2274,6 +2448,14 @@
         "solid-js": ">=1.0.0"
       }
     },
+    "node_modules/@swc/helpers": {
+      "version": "0.4.14",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.4.14.tgz",
+      "integrity": "sha512-4C7nX/dvpzB7za4Ql9K81xK3HPxCpHMgwTZVyf+9JQ6VUbn9jjZVN7/Nkdz/Ugzs2CSjqnL/UPXroiVBVHUWUw==",
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
     "node_modules/@testing-library/dom": {
       "version": "8.20.0",
       "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-8.20.0.tgz",
@@ -6591,8 +6773,7 @@
     "node_modules/tslib": {
       "version": "2.5.0",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.0.tgz",
-      "integrity": "sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg==",
+      "integrity": "sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg=="
-      "dev": true
     },
     "node_modules/type-check": {
       "version": "0.3.2",

package.json

@@ -29,6 +29,7 @@
   },
   "dependencies": {
     "@felte/reporter-solid": "^1.2.5",
-    "@felte/solid": "^1.2.7"
+    "@felte/solid": "^1.2.7",
+    "@kobalte/core": "^0.6.1"
   }
 }

src/components/invitation/Invitation.tsx

@@ -1,5 +1,8 @@
 import { createForm } from "@felte/solid";
 import { Component } from "solid-js";
+import { TextField, Button } from "@kobalte/core";
+
+import "./style.css";
 
 interface Props {}
 
@@ -17,8 +20,32 @@ const Invitation: Component<Props> = (props) => {
 
   return (
     <form use:form>
-      <label for="database">Database</label>
+      <TextField.Root>
-      <input type="url" name="database" required={true} />
+        <TextField.Label>Database</TextField.Label>
+        <TextField.Input
+          type="url"
+          name="database"
+          required={true}
+          placeholder="Database URL"
+        />
+        <TextField.ErrorMessage>
+          Please provide a valid URL
+        </TextField.ErrorMessage>
+      </TextField.Root>
+      <TextField.Root>
+        <TextField.Label>Password</TextField.Label>
+        <TextField.Input
+          type="text"
+          name="password"
+          required={true}
+          placeholder="Password"
+          autocomplete="off"
+        />
+        <TextField.ErrorMessage>
+          Please provide a valid password
+        </TextField.ErrorMessage>
+      </TextField.Root>
+      <Button.Root type="submit">Create</Button.Root>
     </form>
   );
 };

src/components/invitation/style.css

@@ -0,0 +1,20 @@
+input,
+select {
+  padding: 5px;
+  margin-bottom: 30px;
+  background: transparent;
+  border: none;
+  border-bottom: 1px solid #464545;
+}
+input::placeholder {
+  color: #5a5959;
+}
+
+label {
+  color: #5a5959;
+  display: block;
+}
+
+form {
+  text-align: left;
+}

vite.config.ts

@@ -3,4 +3,7 @@ import { defineConfig } from "vite";
 
 export default defineConfig({
   plugins: [solid()],
+  ssr: {
+    noExternal: ["@kobalte/core"],
+  },
 });