Merge pull request #8 from mpiorowski/new-ui

new ui

.github/workflows/deploy.yml

@@ -0,0 +1,20 @@
+name: Deploy
+on:
+  push:
+    branches:
+      - release/**
+jobs:
+  lint-client:
+    uses: ./.github/workflows/lint-client.yml
+  lint-server:
+    needs:
+      - lint-client
+    uses: ./.github/workflows/lint-server.yml
+  deploy-users:
+    steps:
+      - uses: actions/checkout@v3
+      - uses: superfly/flyctl-actions/setup-flyctl@master
+      - run: flyctl deploy --remote-only
+        working-directory: service-users
+        env:
+          FLY_API_TOKEN: ${{ secrets.FLY_API_TOKEN }}

.github/workflows/lint-client.yml

@@ -0,0 +1,17 @@
+name: Lint client
+on:
+  workflow_call:
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: ./client
+    steps:
+      - name: Check out repository code
+        uses: actions/checkout@v3
+      - run: npm ci
+      - run: cp .env.dist .env
+      - run: npm run build
+      - run: npm run lint
+      #- run: npm run test

.github/workflows/lint-server.yml

@@ -0,0 +1,30 @@
+name: Lint server
+on:
+  workflow_call:
+
+# Make sure CI fails on all warnings, including Clippy lints
+env:
+  RUSTFLAGS: "-Dwarnings"
+
+jobs:
+  utils:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - name: Run Clippy
+        run: cargo clippy --all-targets --all-features
+        working-directory: service-utils
+  users:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - name: Run Clippy
+        run: cargo clippy --all-targets --all-features
+        working-directory: service-users
+  notes:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - name: Run Clippy
+        run: cargo clippy --all-targets --all-features
+        working-directory: service-notes

.github/workflows/pr.yml

@@ -0,0 +1,8 @@
+name: Pull request
+on:
+  pull_request:
+jobs:
+  lint-client:
+    uses: ./.github/workflows/lint-client.yml
+  lint-server:
+    uses: ./.github/workflows/lint-server.yml

.gitignore

@@ -0,0 +1 @@
+files

client/package.json

@@ -20,6 +20,7 @@
         "@sveltejs/adapter-auto": "^2.0.0",
         "@sveltejs/adapter-node": "^1.2.2",
         "@sveltejs/kit": "^1.11.0",
+        "@tailwindcss/forms": "^0.5.3",
         "@typescript-eslint/eslint-plugin": "^5.55.0",
         "@typescript-eslint/parser": "^5.55.0",
         "autoprefixer": "^10.4.14",
@@ -45,6 +46,7 @@
         "@sveltejs/adapter-vercel": "^2.4.0",
         "@types/jsonwebtoken": "^9.0.1",
         "@upstash/redis": "^1.20.4",
+        "feather-icons": "^4.29.0",
         "jsonwebtoken": "^9.0.0",
         "nodemailer": "^6.9.1",
         "zod": "^3.21.4"

client/src/lib/components/Drawer.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+    import Button from "$lib/form/Button.svelte";
+    import XIcon from "$lib/icons/XIcon.svelte";
+    import { createEventDispatcher } from "svelte";
+    import { fade, slide } from "svelte/transition";
+
+    export let open: boolean;
+
+    const dispatch = createEventDispatcher();
+    function clickOutside() {
+        dispatch("clickOutside");
+    }
+
+    $: console.log(open);
+</script>
+
+{#if open}
+    <div
+        transition:fade={{ duration: 200 }}
+        class="absolute top-0 right-0 w-screen h-screen bg-black bg-opacity-50 z-40"
+        on:click={clickOutside}
+        on:keypress={(e) => {
+            if (e.key === "Escape") {
+                clickOutside();
+            }
+        }}
+    />
+    <div
+        class="absolute grid grid-rows-[60px_1fr_60px] top-0 right-0 h-screen max-w-xl w-full bg-primary-700 z-50"
+        transition:slide={{ duration: 200, axis: "x" }}
+    >
+        <div class="flex flex-row justify-between items-center px-6">
+            <div>
+                <slot name="header" />
+            </div>
+            <button
+                on:click={clickOutside}
+                class="w-8 h-8 flex justify-center items-center hover:text-primary-300"
+            >
+                <XIcon />
+            </button>
+        </div>
+        <div>
+            <slot name="content" />
+        </div>
+        <div class="flex flex-row justify-end items-center px-6 gap-4">
+            <div class="w-28">
+                <Button
+                    type="button"
+                    variant="secondary"
+                    on:click={clickOutside}
+                >
+                    Close
+                </Button>
+            </div>
+            <slot name="footer" />
+        </div>
+    </div>
+{/if}

client/src/lib/components/Dropdown.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+    import { fade } from "svelte/transition";
+    let open = false;
+
+    const transitionConfig = {
+        duration: 100,
+        delay: 0,
+        easing: cubicInOut,
+    };
+
+    // Thank yoo ChatGPT :)
+    function cubicInOut(t: number) {
+        if (t < 0.5) return 4 * t * t * t;
+        return (t - 1) * (2 * t - 2) * (2 * t - 2) + 1;
+    }
+
+    function useClickOutisde(node: HTMLElement) {
+        const handleClick = (event: MouseEvent) => {
+            if (node && !node.contains(event.target as Node)) {
+                open = false;
+            }
+        };
+        document.addEventListener("click", handleClick);
+        return {
+            destroy() {
+                document.removeEventListener("click", handleClick);
+            },
+        };
+    }
+</script>
+
+<div use:useClickOutisde>
+    <button
+        class="flex self-center"
+        on:click={() => {
+            open = !open;
+        }}
+    >
+        <slot name="button" />
+    </button>
+    <div
+        class="relative"
+        on:keypress={() => {
+            open = false;
+        }}
+        on:click={() => {
+            open = false;
+        }}
+    >
+        {#if open}
+            <div
+                class="absolute right-0 top-1 whitespace-nowrap shadow-lg"
+                transition:fade={transitionConfig}
+            >
+                <slot name="dropdown" />
+            </div>
+        {/if}
+    </div>
+</div>