From da4c22abbbf04566891976d01f5cf629857f8d0b Mon Sep 17 00:00:00 2001
From: ivarlovlie <git@ivarlovlie.no>
Date: Mon, 14 Feb 2022 19:02:45 +0100
Subject: feat: Experiment with tailwind

---
 .../carbon-extras/HeaderPanelToggle.svelte         |  50 --------
 .../carbon-extras/NativeDateInput.svelte           |  21 ----
 src/webapp/src/components/forms/login-form.svelte  | 128 ---------------------
 src/webapp/src/global.d.ts                         |  11 --
 src/webapp/src/styles/carbon.scss                  |  49 --------
 src/webapp/src/styles/global.scss                  |   5 -
 6 files changed, 264 deletions(-)
 delete mode 100644 src/webapp/src/components/carbon-extras/HeaderPanelToggle.svelte
 delete mode 100644 src/webapp/src/components/carbon-extras/NativeDateInput.svelte
 delete mode 100644 src/webapp/src/components/forms/login-form.svelte
 delete mode 100644 src/webapp/src/global.d.ts
 delete mode 100644 src/webapp/src/styles/carbon.scss
 delete mode 100644 src/webapp/src/styles/global.scss

(limited to 'src/webapp')

diff --git a/src/webapp/src/components/carbon-extras/HeaderPanelToggle.svelte b/src/webapp/src/components/carbon-extras/HeaderPanelToggle.svelte
deleted file mode 100644
index f7303ac..0000000
--- a/src/webapp/src/components/carbon-extras/HeaderPanelToggle.svelte
+++ /dev/null
@@ -1,50 +0,0 @@
-<script lang="ts">
-    import {ToggleSkeleton} from "carbon-components-svelte";
-    import {createEventDispatcher, onMount} from "svelte";
-
-    const dispatch = createEventDispatcher();
-    export let toggled = false;
-    export let size = "sm";
-
-    let toggle_id;
-
-    onMount(() => {
-        //@ts-ignore
-        document.getElementById(toggle_id).checked = toggled;
-    });
-
-    function handle_click(e) {
-        if (e.target.classList.contains("bx--toggle")) {
-            //@ts-ignore
-            document.getElementById(toggle_id).checked = !toggled;
-            dispatch("toggle");
-        }
-    }
-</script>
-<style lang="scss">
-  .bx--switcher__item-toggle {
-    font-size: 0.875rem;
-    font-weight: 600;
-    line-height: 1.28572;
-    letter-spacing: 0.16px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    height: 2rem;
-    padding: 0.375rem 1rem;
-    color: #c6c6c6;
-    text-decoration: none;
-  }
-</style>
-<li class="bx--switcher__item">
-    <div class="bx--switcher__item-toggle">
-        <div style="display: flex;">
-            <slot/>
-        </div>
-        <ToggleSkeleton size="{size}"
-                        on:click={handle_click}
-                        bind:id={toggle_id}
-                        style="flex: initial !important;"
-                        {toggled}/>
-    </div>
-</li>
diff --git a/src/webapp/src/components/carbon-extras/NativeDateInput.svelte b/src/webapp/src/components/carbon-extras/NativeDateInput.svelte
deleted file mode 100644
index ccdec53..0000000
--- a/src/webapp/src/components/carbon-extras/NativeDateInput.svelte
+++ /dev/null
@@ -1,21 +0,0 @@
-<script lang="ts">
-    import {generate_unsafe_id} from "@/lib/helpers";
-
-    export let value;
-    export let minDate;
-    export let label;
-    export let id = generate_unsafe_id(9);
-</script>
-
-<div class="bx--date-picker-container">
-    <label for="{id}"
-           class="bx--label">{label}</label>
-    <div class="bx--date-picker-input__wrapper">
-        <input id="{id}"
-               type="date"
-               class="bx--date-picker__input"
-               placeholder="mm/dd/yyyy"
-               min={minDate}
-               bind:value>
-    </div>
-</div>
diff --git a/src/webapp/src/components/forms/login-form.svelte b/src/webapp/src/components/forms/login-form.svelte
deleted file mode 100644
index a5c5653..0000000
--- a/src/webapp/src/components/forms/login-form.svelte
+++ /dev/null
@@ -1,128 +0,0 @@
-<script lang="ts">
-    import {start_session_async} from "@/lib/stores/session";
-    import type {ICreateSessionRequest} from "@/lib/models/ICreateSessionRequest";
-    import {createEventDispatcher} from "svelte";
-    import type {IErrorResult} from "@/lib/models/IErrorResult";
-    import {Button, Checkbox, Column, Form, Grid, InlineNotification, PasswordInput, Row, TextInput, Tile} from "carbon-components-svelte";
-    import LogoGithub20 from "carbon-icons-svelte/lib/LogoGithub20";
-    import {api_base} from "@/lib/configuration";
-
-    const dispatch = createEventDispatcher();
-
-    const form = {
-        loading: false,
-        error: {} as IErrorResult,
-        username: {
-            value: "",
-            error: "",
-            validate() {
-                form.username.error = "";
-                let is_valid = true;
-                if (!form.username.value) {
-                    form.username.error = "Username is required";
-                    is_valid = false;
-                }
-                return is_valid;
-            }
-        },
-        password: {
-            value: "",
-            error: "",
-            validate() {
-                form.password.error = "";
-                let is_valid = true;
-                if (!form.password.value) {
-                    form.password.error = "Password is required";
-                    is_valid = false;
-                }
-                return is_valid;
-            }
-        },
-        persist: {
-            value: false,
-            error: "",
-            validate() {
-                return true;
-            }
-        },
-        is_valid() {
-            const username_is_valid = form.username.validate();
-            const password_is_valid = form.password.validate();
-            const persist_is_valid = form.persist.validate();
-            return (username_is_valid && password_is_valid && persist_is_valid);
-        },
-        payload(): ICreateSessionRequest {
-            return {
-                username: this.username.value,
-                password: this.password.value,
-                persist: this.persist.value
-            } as ICreateSessionRequest;
-        },
-        async submit() {
-            if (!form.is_valid()) return;
-            form.error = {} as IErrorResult;
-            form.loading = true;
-            const login_request = await start_session_async(form.payload());
-            form.loading = false;
-            if (login_request.ok) {
-                dispatch("authenticated");
-            } else if (login_request.error) {
-                form.error = login_request.error;
-            }
-        }
-    };
-</script>
-
-<Tile>
-    <Form on:submit={form.submit}>
-        <Grid condensed>
-            <Row style="padding-bottom: 12px">
-                <Column>
-                    <h1>Login</h1>
-                </Column>
-            </Row>
-            {#if form.error.title || form.error.text}
-                <Row>
-                    <Column>
-                        <InlineNotification
-                                hideCloseButton
-                                title={form.error.title ?? ""}
-                                subtitle={form.error.text ?? ""}/>
-                    </Column>
-                </Row>
-            {/if}
-            <Row>
-                <Column>
-                    <TextInput placeholder="Username"
-                               size="sm"
-                               invalid={form.username.error !== ""}
-                               invalidText={form.username.error}
-                               bind:value={form.username.value}/>
-                    <PasswordInput placeholder="Password"
-                                   size="sm"
-                                   invalid={form.password.error !== ""}
-                                   invalidText={form.password.error}
-                                   bind:value={form.password.value}/>
-                </Column>
-            </Row>
-            <Row>
-                <Checkbox name="persist"
-                          labelText="Persist session"
-                          bind:checked={form.persist.value}/>
-                <Button type="submit"
-                        disabled={form.loading}
-                        size="sm">
-                    Submit
-                </Button>
-            </Row>
-            <Row>
-                <Button kind="secondary"
-                        href={api_base("account/create-github-session")}
-                        icon="{LogoGithub20}"
-                        size="sm">
-                    Login with Github
-                </Button>
-            </Row>
-        </Grid>
-    </Form>
-</Tile>
diff --git a/src/webapp/src/global.d.ts b/src/webapp/src/global.d.ts
deleted file mode 100644
index 90ee84c..0000000
--- a/src/webapp/src/global.d.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import type {IsURLOptions} from "validator/lib/isURL";
-
-declare global {
-    namespace n4s {
-        interface EnforceCustomMatchers<R> {
-            isURL(str: string, options?: IsURLOptions): R;
-        }
-    }
-}
-
-export {};
diff --git a/src/webapp/src/styles/carbon.scss b/src/webapp/src/styles/carbon.scss
deleted file mode 100644
index 201c0e8..0000000
--- a/src/webapp/src/styles/carbon.scss
+++ /dev/null
@@ -1,49 +0,0 @@
-// This is a recipe for dynamic, client-side theming
-
-$feature-flags: (
-  // Custom CSS properties must be enabled to dynamically switch themes
-        enable-css-custom-properties: true,
-        ui-shell: true,
-        grid-columns-16: true
-);
-
-$css--font-face: false;
-$css--helpers: true;
-$css--body: true;
-$css--use-layer: true;
-$css--reset: true;
-$css--default-type: true;
-$css--plex: true;
-
-// Use all Carbon themes
-@import "../node_modules/carbon-components/scss/globals/scss/vendor/@carbon/themes/scss";
-@import "../node_modules/carbon-components/scss/globals/scss/component-tokens";
-@import "../node_modules/carbon-components/src/components/tag/tag";
-@import "../node_modules/carbon-components/src/components/notification/inline-notification";
-@import "../node_modules/carbon-components/src/components/notification/toast-notification";
-
-// The default theme is "white" (White)
-:root {
-  @include carbon--theme($carbon--theme--white, true) {
-    @include emit-component-tokens($tag-colors);
-    @include emit-component-tokens($notification-colors);
-  }
-}
-
-// Set the <html> theme attribute to "g100" to use the Gray 100 theme
-// <html theme="g100">
-:root[theme="g100"] {
-  @include carbon--theme($carbon--theme--g100, true) {
-    @include emit-component-tokens($tag-colors);
-    @include emit-component-tokens($notification-colors);
-  }
-}
-
-@import "../node_modules/carbon-components/scss/globals/scss/_css--reset";
-@import "../node_modules/carbon-components/scss/globals/scss/_css--font-face";
-@import "../node_modules/carbon-components/scss/globals/scss/_css--helpers";
-@import "../node_modules/carbon-components/scss/globals/scss/_css--body";
-@import "../node_modules/carbon-components/scss/globals/grid/grid";
-
-// Import all component styles
-@import "../node_modules/carbon-components/scss/globals/scss/styles";
diff --git a/src/webapp/src/styles/global.scss b/src/webapp/src/styles/global.scss
deleted file mode 100644
index 49d45a7..0000000
--- a/src/webapp/src/styles/global.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-textarea {
-    min-height: 39px !important;
-    resize: vertical;
-}
-
-- 
cgit v1.3