From 900bb5e845c3ad44defbd427cae3d44a4a43321f Mon Sep 17 00:00:00 2001
From: ivarlovlie <git@ivarlovlie.no>
Date: Sat, 25 Feb 2023 13:15:44 +0100
Subject: feat: Initial commit

---
 code/app/src/routes/book/+layout.svelte            | 46 +++++++++++++
 code/app/src/routes/book/+layout.ts                |  3 +
 code/app/src/routes/book/+page.svelte              |  1 +
 code/app/src/routes/book/alerts/+page.svelte       | 70 ++++++++++++++++++++
 code/app/src/routes/book/badges/+page.svelte       | 19 ++++++
 code/app/src/routes/book/buttons/+page.svelte      | 23 +++++++
 code/app/src/routes/book/inputs/+page.svelte       | 75 ++++++++++++++++++++++
 .../app/src/routes/book/notifications/+page.svelte | 50 +++++++++++++++
 code/app/src/routes/book/toggles/+page.svelte      | 27 ++++++++
 9 files changed, 314 insertions(+)
 create mode 100644 code/app/src/routes/book/+layout.svelte
 create mode 100644 code/app/src/routes/book/+layout.ts
 create mode 100644 code/app/src/routes/book/+page.svelte
 create mode 100644 code/app/src/routes/book/alerts/+page.svelte
 create mode 100644 code/app/src/routes/book/badges/+page.svelte
 create mode 100644 code/app/src/routes/book/buttons/+page.svelte
 create mode 100644 code/app/src/routes/book/inputs/+page.svelte
 create mode 100644 code/app/src/routes/book/notifications/+page.svelte
 create mode 100644 code/app/src/routes/book/toggles/+page.svelte

(limited to 'code/app/src/routes/book')

diff --git a/code/app/src/routes/book/+layout.svelte b/code/app/src/routes/book/+layout.svelte
new file mode 100644
index 0000000..385d0a6
--- /dev/null
+++ b/code/app/src/routes/book/+layout.svelte
@@ -0,0 +1,46 @@
+<script>
+    import { page } from "$app/stores";
+    import "../../app.pcss";
+</script>
+
+<div id="wrapper">
+    <nav>
+        <a href="/book/alerts" class="link" class:active={$page.url.pathname.startsWith("/book/alerts")}>Alerts</a>
+        <a href="/book/buttons" class="link" class:active={$page.url.pathname.startsWith("/book/buttons")}>Buttons</a>
+        <a href="/book/toggles" class="link" class:active={$page.url.pathname.startsWith("/book/toggles")}>Toggles</a>
+        <a href="/book/inputs" class="link" class:active={$page.url.pathname.startsWith("/book/inputs")}>Inputs</a>
+        <a href="/book/badges" class="link" class:active={$page.url.pathname.startsWith("/book/badges")}>Badges</a>
+        <a href="/book/notifications" class="link" class:active={$page.url.pathname.startsWith("/book/notifications")}>Notifications</a>
+    </nav>
+    <main>
+        <slot />
+    </main>
+</div>
+
+<style global lang="postcss">
+    #wrapper {
+        display: flex;
+        flex-direction: row;
+    }
+    nav {
+        min-width: 120px;
+        padding: 10px;
+        display: flex;
+        flex-direction: column;
+        position: sticky;
+        position: -webkit-sticky;
+        top: 0;
+        height: fit-content;
+    }
+    main {
+        width: 100%;
+        padding: 10px;
+    }
+    section {
+        margin-bottom: 25px;
+
+        h2 {
+            margin-bottom: 5px;
+        }
+    }
+</style>
diff --git a/code/app/src/routes/book/+layout.ts b/code/app/src/routes/book/+layout.ts
new file mode 100644
index 0000000..d297dfd
--- /dev/null
+++ b/code/app/src/routes/book/+layout.ts
@@ -0,0 +1,3 @@
+export const ssr = import.meta.env.DEV;
+export const csr = import.meta.env.DEV;
+export const prerender = import.meta.env.DEV;
\ No newline at end of file
diff --git a/code/app/src/routes/book/+page.svelte b/code/app/src/routes/book/+page.svelte
new file mode 100644
index 0000000..635b3c2
--- /dev/null
+++ b/code/app/src/routes/book/+page.svelte
@@ -0,0 +1 @@
+<p>A showcase of greatoffices components</p>
diff --git a/code/app/src/routes/book/alerts/+page.svelte b/code/app/src/routes/book/alerts/+page.svelte
new file mode 100644
index 0000000..ed4c92b
--- /dev/null
+++ b/code/app/src/routes/book/alerts/+page.svelte
@@ -0,0 +1,70 @@
+<script>
+    import Alert from "$components/alert.svelte";
+</script>
+
+<section>
+    <h2>Info</h2>
+    <Alert type="info" message="This is message" title="This is title"/>
+</section>
+<section>
+    <h2>Warning</h2>
+    <Alert type="warning" message="This is message" title="This is title"/>
+</section>
+<section>
+    <h2>Error</h2>
+    <Alert type="error" message="This is message" title="This is title"/>
+</section>
+<section>
+    <h2>Success</h2>
+    <Alert type="success" message="This is message" title="This is title"/>
+</section>
+<section>
+    <h2>Actions</h2>
+    <Alert
+            type="info"
+            message="This is message"
+            title="This is title"
+            closeable
+            actions={[
+            {
+                id: "confirm",
+                text: "Yes!",
+            },
+            {
+                id: "cancel",
+                text: "No!",
+                color: "red",
+            },
+        ]}
+    />
+</section>
+<section>
+    <h2>Right link</h2>
+    <Alert
+            on:rightLinkCliked={() => alert("Right link clicked")}
+            rightLinkText="Link or action"
+            title="Go here"
+            message="Hehe"
+            type="error"
+    />
+</section>
+<section>
+    <h2>List</h2>
+    <Alert
+            title="This is title"
+            listItems={["Message 1", "Message 2"]}
+            type="error"
+            message="This is bad dude"
+            closeable
+            closeableCooldown="60"
+            id="alert-1"
+            on:actrepeat={() => {
+            alert("Repeat requested");
+        }}
+            actions={[{ id: "repeat", text: "Try again" }]}
+    />
+</section>
+<section>
+    <h2>Closeable</h2>
+    <Alert message="This is message" closeable type="info"/>
+</section>
diff --git a/code/app/src/routes/book/badges/+page.svelte b/code/app/src/routes/book/badges/+page.svelte
new file mode 100644
index 0000000..50ae61e
--- /dev/null
+++ b/code/app/src/routes/book/badges/+page.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+    import Badge from "$components/badge.svelte";
+</script>
+
+<section>
+    <h2>Variants</h2>
+    <Badge text="default"/>
+    <Badge type="blue" text="blue"/>
+    <Badge type="green" text="green"/>
+    <Badge type="red" text="red"/>
+    <Badge type="tame" text="tame"/>
+    <Badge type="yellow" text="yellow"/>
+    <Badge size="large" text="large"/>
+    <Badge text="with dot" withDot type="blue"/>
+    <Badge text="removable" removable id="badge-1" on:remove={(e) => alert("removed " + e.detail.id)}/>
+    <Badge text="with dot" size="large" withDot type="blue"/>
+    <Badge text="removable" removable size="large" id="badge-2" uppercase
+           on:remove={(e) => alert("removed " + e.detail.id)}/>
+</section>
diff --git a/code/app/src/routes/book/buttons/+page.svelte b/code/app/src/routes/book/buttons/+page.svelte
new file mode 100644
index 0000000..6668a64
--- /dev/null
+++ b/code/app/src/routes/book/buttons/+page.svelte
@@ -0,0 +1,23 @@
+<script>
+    import Button from "$components/button.svelte";
+</script>
+
+<section>
+    <h2>Primary</h2>
+    <Button kind="primary" text="Small" size="sm"/>
+    <Button kind="primary" text="Medium/Default"/>
+    <Button kind="primary" text="Large" size="lg"/>
+    <Button kind="primary" text="Extra large" size="xl"/>
+</section>
+<section>
+    <h2>Secondary</h2>
+    <Button kind="secondary" text="Click me!"/>
+</section>
+<section>
+    <h2>White</h2>
+    <Button kind="white" text="Click me!"/>
+</section>
+<section>
+    <h2>Loading</h2>
+    <Button kind="primary" loading={true} text="Wait"/>
+</section>
diff --git a/code/app/src/routes/book/inputs/+page.svelte b/code/app/src/routes/book/inputs/+page.svelte
new file mode 100644
index 0000000..433607b
--- /dev/null
+++ b/code/app/src/routes/book/inputs/+page.svelte
@@ -0,0 +1,75 @@
+<script lang="ts">
+    import {TextArea, Input, Combobox} from "$components";
+    import {DatabaseIcon} from "$components/icons";
+
+    let value;
+    let i = 0;
+    let options = [];
+    let tempOptions = [];
+    while (i < 101) {
+        tempOptions.push({
+            id: crypto.randomUUID(),
+            name: "Option " + i,
+        });
+        options = tempOptions;
+        i++;
+    }
+
+    async function add({name}) {
+        const copy = options;
+        copy.push({
+            id: crypto.randomUUID(),
+            name: name,
+        });
+        options = copy;
+    }
+</script>
+
+<section>
+    <h2>Combobox</h2>
+    <Combobox {options} label="Wiii" multiple createable on_create_async={add}/>
+</section>
+
+<section>
+    <h2>Default</h2>
+    <Input label="Input me" placeholder="Hello" bind:value/>
+</section>
+
+<section>
+    <h2>With icon</h2>
+    <Input label="Input me" placeholder="Hello" icon={DatabaseIcon} bind:value/>
+</section>
+
+<section>
+    <h2>With corner hint</h2>
+    <Input label="Input me ->" placeholder="Hello" cornerHint="Hint hint" bind:value/>
+</section>
+
+<section>
+    <h2>Disabled</h2>
+    <Input label="No" placeholder="Sorry" disabled bind:value/>
+</section>
+
+<section>
+    <h2>Errored</h2>
+    <Input label="No" placeholder="Sorry" errorText="That's not right" bind:value icon={DatabaseIcon}/>
+</section>
+
+<section>
+    <h2>Many errors</h2>
+    <Input label="No" placeholder="Sorry" errors={["That's not right", "Call help!", "Get it together"]} bind:value
+           icon={DatabaseIcon}/>
+</section>
+
+<section>
+    <h2>Help</h2>
+    <Input label="Go ahead" placeholder="Write here" helpText="Write above" bind:value/>
+</section>
+<section>
+    <h2>Addon</h2>
+    <Input label="Go ahead" placeholder="Write here" bind:value helpText="Write above" addon="To the right"/>
+</section>
+<section>
+    <h2>Textarea</h2>
+    <TextArea bind:value label="Hi"/>
+</section>
diff --git a/code/app/src/routes/book/notifications/+page.svelte b/code/app/src/routes/book/notifications/+page.svelte
new file mode 100644
index 0000000..1a6144d
--- /dev/null
+++ b/code/app/src/routes/book/notifications/+page.svelte
@@ -0,0 +1,50 @@
+<script lang="ts">
+    import { Notification } from "$components";
+    import type { NotificationType } from "$components/notification.svelte";
+
+    let type = "info" as NotificationType;
+    let nonClosable = false;
+    let title = "Title";
+    let subtitle = "Subtitle";
+    let hideAfterSeconds = -1;
+    let timeout;
+
+    function open(newtype: NotificationType) {
+        console.log(newtype);
+        type = newtype;
+    }
+</script>
+
+<section style="display: flex;flex-direction: column; max-width:200px;gap:5px">
+    <h2>Type:</h2>
+    <select
+        on:change={(e) => {
+            //@ts-ignore
+            open(e.target.selectedOptions[0].value);
+        }}
+    >
+        <option value="info">info</option>
+        <option value="warning">warning</option>
+        <option value="error">error</option>
+        <option value="success">success</option>
+        <option value="subtle">subtle</option>
+    </select>
+    <label for="nonClosable">
+        <input type="checkbox" id="nonClosable" bind:checked={nonClosable} />
+        nonClosable
+    </label>
+    <input type="text" bind:value={title} />
+    <input type="text" bind:value={subtitle} />
+    <input type="number" bind:value={timeout} placeholder="hideAfterSeconds" />
+    <small class="text-sm justify-end">
+        <span class="link" on:click={() => (hideAfterSeconds = timeout ?? -1)}>Apply</span>
+        <span
+            class="link"
+            on:click={() => {
+                hideAfterSeconds = -1;
+                timeout = 0;
+            }}>Reset</span
+        >
+    </small>
+    <Notification {title} {subtitle} show={true} {type} {nonClosable} {hideAfterSeconds} />
+</section>
diff --git a/code/app/src/routes/book/toggles/+page.svelte b/code/app/src/routes/book/toggles/+page.svelte
new file mode 100644
index 0000000..cb0adec
--- /dev/null
+++ b/code/app/src/routes/book/toggles/+page.svelte
@@ -0,0 +1,27 @@
+<script>
+    import Switch from "$components/switch.svelte";
+</script>
+
+<section>
+    <h2>Default</h2>
+    <Switch />
+</section>
+<section>
+    <h2>Short</h2>
+    <Switch type="short" />
+</section>
+<section>
+    <h2>Icon</h2>
+    <Switch type="icon" />
+</section>
+<section>
+    <h2>Label / Description</h2>
+    <div class="max-w-md">
+        <Switch label="Label" description="Some text" />
+    </div>
+</section>
+
+<section>
+    <h2>Label / Description (right aligned)</h2>
+    <Switch label="Label" description="Some text" rightAlignedLabelDescription />
+</section>
-- 
cgit v1.3