From 069ba3e28153f1b07a57be3166759c6b4fc3a207 Mon Sep 17 00:00:00 2001 From: Eric van der Vlist Date: Tue, 21 Feb 2023 13:05:28 +0100 Subject: [PATCH] Starting to implement the create invitation form --- package-lock.json | 187 ++++++++++++++++++++++- package.json | 3 +- src/components/invitation/Invitation.tsx | 31 +++- src/components/invitation/style.css | 20 +++ vite.config.ts | 3 + 5 files changed, 238 insertions(+), 6 deletions(-) create mode 100644 src/components/invitation/style.css diff --git a/package-lock.json b/package-lock.json index fb0d270..e0be509 100644 --- a/package-lock.json +++ b/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==", - "dev": true + "integrity": "sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg==" }, "node_modules/type-check": { "version": "0.3.2", diff --git a/package.json b/package.json index bf38880..b956f75 100644 --- a/package.json +++ b/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" } } diff --git a/src/components/invitation/Invitation.tsx b/src/components/invitation/Invitation.tsx index f7ba60e..2cc87fb 100644 --- a/src/components/invitation/Invitation.tsx +++ b/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) => { return (
- - + + Database + + + Please provide a valid URL + + + + Password + + + Please provide a valid password + + + Create
); }; diff --git a/src/components/invitation/style.css b/src/components/invitation/style.css new file mode 100644 index 0000000..921a8cc --- /dev/null +++ b/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; +} diff --git a/vite.config.ts b/vite.config.ts index 2921bd7..8c660a5 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -3,4 +3,7 @@ import { defineConfig } from "vite"; export default defineConfig({ plugins: [solid()], + ssr: { + noExternal: ["@kobalte/core"], + }, });