@lobb-js/studio 0.1.31

package/src/lib/components/rangeCalendarButton.svelte

@@ -0,0 +1,257 @@
+<script lang="ts">
+    import CalendarIcon from "@lucide/svelte/icons/calendar";
+    import type { DateRange } from "bits-ui";
+    import {
+        CalendarDate,
+        DateFormatter,
+        type DateValue,
+        getLocalTimeZone,
+        parseDate,
+        startOfWeek,
+        today,
+    } from "@internationalized/date";
+    import { cn } from "$lib/utils.js";
+    import { buttonVariants } from "$lib/components/ui/button/index.js";
+    import { RangeCalendar } from "$lib/components/ui/range-calendar/index.js";
+    import * as Popover from "$lib/components/ui/popover/index.js";
+    import Input from "./ui/input/input.svelte";
+
+    interface Props {
+        value: DateRange;
+    }
+
+    let { value = $bindable() }: Props = $props();
+
+    const df = new DateFormatter(navigator.language, {
+        dateStyle: "medium",
+    });
+
+    let startValue: DateValue | undefined = $state(undefined);
+</script>
+
+<div class="grid gap-2">
+    <Popover.Root>
+        <Popover.Trigger
+            class={cn(
+                buttonVariants({ variant: "outline" }),
+                !value && "text-muted-foreground",
+                "h-7 px-3 text-xs font-normal",
+            )}
+        >
+            <CalendarIcon class="mr-2 size-4" />
+            {#if value && value.start}
+                {#if value.end}
+                    {df.format(value.start.toDate(getLocalTimeZone()))} - {df.format(
+                        value.end.toDate(getLocalTimeZone()),
+                    )}
+                {:else}
+                    {df.format(value.start.toDate(getLocalTimeZone()))}
+                {/if}
+            {:else if startValue}
+                {df.format(startValue.toDate(getLocalTimeZone()))}
+            {:else}
+                Pick a date
+            {/if}
+        </Popover.Trigger>
+        <Popover.Content class="flex w-auto p-0" align="start">
+            <div class="flex flex-col border-r">
+                <div
+                    class="flex flex-col overflow-hidden text-muted-foreground"
+                >
+                    <button
+                        class="text-start text-sm py-2 px-2 hover:bg-soft hover:text-primary"
+                        onclick={() => {
+                            const currentDate = today(getLocalTimeZone());
+                            value = {
+                                start: currentDate,
+                                end: currentDate,
+                            };
+                        }}
+                    >
+                        Today
+                    </button>
+                    <button
+                        class="text-start text-sm py-2 px-2 hover:bg-soft hover:text-primary"
+                        onclick={() => {
+                            const currentDate = today(getLocalTimeZone());
+                            value = {
+                                start: currentDate.subtract({ days: 1 }),
+                                end: currentDate.subtract({ days: 1 }),
+                            };
+                        }}
+                    >
+                        Yesterday
+                    </button>
+                    <button
+                        class="text-start text-sm py-2 px-2 hover:bg-soft hover:text-primary"
+                        onclick={() => {
+                            const currentDate = today(getLocalTimeZone());
+                            const weekStart = startOfWeek(currentDate, "en-US");
+                            value = {
+                                start: weekStart,
+                                end: currentDate,
+                            };
+                        }}
+                    >
+                        This week (Sun - Today)
+                    </button>
+                    <button
+                        class="text-start text-sm py-2 px-2 hover:bg-soft hover:text-primary"
+                        onclick={() => {
+                            const currentDate = today(getLocalTimeZone());
+                            const thisWeekStart = startOfWeek(
+                                currentDate,
+                                "en-US",
+                            );
+                            const lastWeekEnd = thisWeekStart.subtract({
+                                days: 1,
+                            });
+                            const lastWeekStart = startOfWeek(
+                                lastWeekEnd,
+                                "en-US",
+                            );
+                            value = {
+                                start: lastWeekStart,
+                                end: lastWeekEnd,
+                            };
+                        }}
+                    >
+                        Last week (Sun - Sat)
+                    </button>
+                    <button
+                        class="text-start text-sm py-2 px-2 hover:bg-soft hover:text-primary"
+                        onclick={() => {
+                            const currentDate = today(getLocalTimeZone());
+                            value = {
+                                start: currentDate.subtract({ days: 6 }),
+                                end: currentDate,
+                            };
+                        }}
+                    >
+                        Last 7 days
+                    </button>
+                    <button
+                        class="text-start text-sm py-2 px-2 hover:bg-soft hover:text-primary"
+                        onclick={() => {
+                            const currentDate = today(getLocalTimeZone());
+                            value = {
+                                start: currentDate.subtract({ days: 29 }),
+                                end: currentDate,
+                            };
+                        }}
+                    >
+                        Last 30 days
+                    </button>
+                    <button
+                        class="text-start text-sm py-2 px-2 hover:bg-soft hover:text-primary"
+                        onclick={() => {
+                            const currentDate = today(getLocalTimeZone());
+                            value = {
+                                start: currentDate.subtract({ days: 89 }),
+                                end: currentDate,
+                            };
+                        }}
+                    >
+                        Last 90 days
+                    </button>
+                    <button
+                        class="text-start text-sm py-2 px-2 hover:bg-soft hover:text-primary"
+                        onclick={() => {
+                            const currentDate = today(getLocalTimeZone());
+                            value = {
+                                start: currentDate.subtract({ months: 12 }),
+                                end: currentDate,
+                            };
+                        }}
+                    >
+                        Last 12 months
+                    </button>
+                    <button
+                        class="text-start text-sm py-2 px-2 hover:bg-soft hover:text-primary"
+                        onclick={() => {
+                            const currentDate = today(getLocalTimeZone());
+                            const lastYearStart = currentDate
+                                .subtract({ years: 1 })
+                                .set({ month: 1, day: 1 });
+                            const lastYearEnd = currentDate
+                                .subtract({ years: 1 })
+                                .set({ month: 12, day: 31 });
+                            value = {
+                                start: lastYearStart,
+                                end: lastYearEnd,
+                            };
+                        }}
+                    >
+                        Last Calendar year
+                    </button>
+                    <button
+                        class="text-start text-sm py-2 px-2 hover:bg-soft hover:text-primary"
+                        onclick={() => {
+                            const currentDate = today(getLocalTimeZone());
+                            const yearStart = currentDate.set({
+                                month: 1,
+                                day: 1,
+                            });
+                            value = {
+                                start: yearStart,
+                                end: currentDate,
+                            };
+                        }}
+                    >
+                        This Year (Jan - Today)
+                    </button>
+                </div>
+            </div>
+            <div>
+                <div class="flex gap-2 p-2 justify-end border-b">
+                    <!-- Start Date -->
+                    <Input
+                        type="date"
+                        class="w-fit"
+                        bind:value={
+                            () => {
+                                if (!value?.start) return "";
+                                // Convert CalendarDate → YYYY-MM-DD string
+                                const jsDate = value.start.toDate("UTC");
+                                return jsDate.toISOString().split("T")[0];
+                            },
+                            (v) => {
+                                // Convert YYYY-MM-DD string → CalendarDate
+                                value = {
+                                    ...value,
+                                    start: parseDate(v),
+                                };
+                            }
+                        }
+                    />
+
+                    <!-- End Date -->
+                    <Input
+                        type="date"
+                        class="w-fit"
+                        bind:value={
+                            () => {
+                                if (!value?.end) return "";
+                                const jsDate = value.end.toDate("UTC");
+                                return jsDate.toISOString().split("T")[0];
+                            },
+                            (v) => {
+                                value = {
+                                    ...value,
+                                    end: parseDate(v),
+                                };
+                            }
+                        }
+                    />
+                </div>
+                <RangeCalendar
+                    bind:value
+                    onStartValueChange={(v) => {
+                        startValue = v;
+                    }}
+                    numberOfMonths={2}
+                />
+            </div>
+        </Popover.Content>
+    </Popover.Root>
+</div>

package/src/lib/components/selectRecord.svelte

@@ -0,0 +1,126 @@
+<script lang="ts">
+	import { ArrowLeft, Link } from "lucide-svelte";
+	import Button, { type ButtonProps } from "./ui/button/button.svelte";
+	import DataTable from "./dataTable/dataTable.svelte";
+	import { getCollectionPrimaryField } from "./dataTable/utils";
+	import { emitEvent } from "$lib/eventSystem";
+  import Drawer from "./drawer.svelte";
+
+	interface LocalProps extends ButtonProps {
+		collectionName: string;
+		parentCollectionName?: string;
+		fieldName?: string;
+		value?: any;
+		onSelect?: (entry: any) => void;
+		filter?: Record<string, any>;
+		additionalFilter?: Record<string, any>;
+		text?: string;
+		entry?: Record<string, any>;
+	}
+
+	let {
+		parentCollectionName,
+		collectionName,
+		fieldName,
+		value = $bindable(),
+		onSelect,
+		filter = {},
+		additionalFilter = {},
+		text,
+		entry,
+		...restProps
+	}: LocalProps = $props();
+
+	let openDrawer = $state(false);
+
+	async function handleButtonClick() {
+		try {
+			const eventResult = await emitEvent(
+				"studio.collections.preForeignKeySelect",
+				{
+					parentCollectionName,
+					collectionName,
+					fieldName,
+					entry,
+				},
+			);
+			if (eventResult.filter) {
+				additionalFilter = eventResult.filter;
+			}
+
+			openDrawer = true;
+		} catch (error) {
+			console.error(error);
+		}
+	}
+
+	async function onSelectHandler(entry: any) {
+		const primaryFieldName = getCollectionPrimaryField(collectionName);
+		const localValue: any = {
+			id: entry.id,
+		};
+		if (primaryFieldName) {
+			const primaryFieldValue = entry[primaryFieldName];
+			localValue[primaryFieldName] = primaryFieldValue;
+		}
+		value = localValue;
+
+		// calling the onSelect callback function
+		if (onSelect) {
+			onSelect(entry);
+		}
+
+		// closing the drawer
+		openDrawer = false;
+	}
+</script>
+
+<!-- THE SELECT BUTTON -->
+<Button onclick={handleButtonClick} {...restProps}>
+	{#if restProps.children}
+		{@render restProps.children()}
+	{:else}
+		<Link size="13" />
+		{#if text}
+			{text}
+		{:else}
+			Select record
+		{/if}
+	{/if}
+</Button>
+
+<!-- THE SELECT DRAWER -->
+{#if openDrawer}
+	<Drawer onHide={async () => { openDrawer = false }}>
+		<div class="flex h-12 items-center gap-4 border-b px-4">
+			<Button
+				variant="outline"
+				onclick={() => (openDrawer = false)}
+				class=" h-8 w-8 rounded-full text-xs font-normal"
+				Icon={ArrowLeft}
+			></Button>
+			<div class="flex items-center gap-2">
+				<div class="text-sm">Select record from</div>
+				<span
+					class="rounded-md border bg-muted px-2 py-0.5 text-sm"
+				>
+					{collectionName}
+				</span>
+			</div>
+		</div>
+		<div class="flex-1 overflow-y-auto bg-muted">
+			<DataTable
+				{collectionName}
+				tableProps={{
+					showCheckboxes: false,
+					select: {
+						onSelect: onSelectHandler,
+					},
+				}}
+				filter={{
+					$and: [filter, additionalFilter],
+				}}
+			/>
+		</div>
+	</Drawer>
+{/if}

package/src/lib/components/setServerPage.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+	import { toast } from "svelte-sonner";
+	import Button from "./ui/button/button.svelte";
+	import { ctx } from "$lib/store.svelte";
+	import { Input } from "$lib/components/ui/input";
+
+	let formData = {
+		server: "",
+	};
+
+	async function handleClick(e: Event) {
+		if (!formData.server) {
+			toast.error("Please fill the server url");
+			return;
+		}
+		try {
+			await fetch(formData.server);
+		} catch (error) {
+			toast.error(`Couldn't connect to the (${formData.server}) server`);
+			return;
+		}
+		localStorage.setItem("lobb_url", formData.server);
+		ctx.lobbUrl = formData.server;
+	}
+</script>
+
+<div
+	class="fixed left-0 top-0 flex h-screen w-screen items-center justify-center bg-muted"
+>
+	<div class="flex w-full max-w-100 flex-col gap-6 p-6">
+		<div>
+			<div class="text-4xl">Welcome back</div>
+			<div>Sign in to your account</div>
+		</div>
+		<div class="flex flex-col gap-6 rounded-md border bg-white p-6">
+			<div class="flex flex-col gap-2">
+				<div>
+					<div class="mb-1 text-sm font-medium">Server</div>
+					<Input
+						bind:value={formData.server}
+						placeholder="http://example.lobb.com"
+					/>
+				</div>
+			</div>
+			<Button onclick={handleClick}>Save & Connect</Button>
+		</div>
+	</div>
+</div>

package/src/lib/components/sidebar/index.ts

@@ -0,0 +1,4 @@
+import Sidebar from "./sidebar.svelte";
+import SidebarTrigger from "./sidebarTrigger.svelte";
+
+export { Sidebar, SidebarTrigger }

package/src/lib/components/sidebar/sidebar.svelte

@@ -0,0 +1,149 @@
+<script lang="ts" module>
+    export interface SidebarProperties {
+        collapsed: boolean;
+    }
+</script>
+
+<script lang="ts">
+    import { setContext, type Snippet } from "svelte";
+
+    import { mediaQueries } from "$lib/utils";
+    import Skeleton from "../ui/skeleton/skeleton.svelte";
+    import { Search } from "lucide-svelte";
+    import SidebarElements, {
+        type SideBarData,
+        type SideBarElement,
+        type SidebarElementsProps,
+    } from "./sidebarElements.svelte";
+
+    interface Props {
+        title: string;
+        data: SideBarData | null;
+        sidebarElementsProps?: Partial<SidebarElementsProps>;
+        showSearch?: boolean;
+        children: Snippet<[]>;
+        belowSearch?: Snippet;
+        elementRightSide?: Snippet<[SideBarElement]>;
+    }
+
+    let {
+        title,
+        data,
+        sidebarElementsProps,
+        showSearch = true,
+        children,
+        belowSearch,
+        elementRightSide,
+    }: Props = $props();
+
+    let visibleData = $derived(data ? [...data] : null);
+    const sidebarProperties: SidebarProperties = $state({
+        collapsed: false,
+    });
+    setContext("sidebarProperties", sidebarProperties);
+
+    $effect(() => {
+        if (mediaQueries.lg.current) {
+            sidebarProperties.collapsed = false;
+        } else {
+            sidebarProperties.collapsed = true;
+        }
+    });
+
+    let searchTerm = $state("");
+
+    const sidebarWidth = 275;
+    let sidebarContainerHeight = $state(0);
+    let sidebarContainerWidth = $state(0);
+    let sidebarHeaderHeight = $state(0);
+    let sidebarBodyHeight = $derived(
+        sidebarContainerHeight - sidebarHeaderHeight,
+    );
+
+    function handleSearch() {
+        if (data) {
+            visibleData = filterSidebarData(data, searchTerm.toLowerCase());
+        }
+    }
+
+    function filterSidebarData(items: SideBarData, term: string): SideBarData {
+        return items.filter((item) => item.name.includes(term));
+    }
+</script>
+
+<div
+    class="flex h-full transition-[grid-template-columns]"
+    style="
+		display: grid;
+		grid-template-columns: {sidebarProperties.collapsed ? 0 : sidebarWidth}px 1fr;
+	"
+    bind:clientHeight={sidebarContainerHeight}
+    bind:clientWidth={sidebarContainerWidth}
+>
+    <div
+        class="
+			bg-background border-r overflow-hidden
+		"
+        style="
+			{sidebarProperties.collapsed ? 'border-right-width: 0px; padding: 0px;' : ''}
+			height: {sidebarContainerHeight}px;
+		"
+    >
+        {#if visibleData !== null}
+            <div bind:clientHeight={sidebarHeaderHeight} class="p-2 pb-0!">
+                <div
+                    class="relative flex justify-between items-center p-2 font-medium"
+                >
+                    {title}
+                </div>
+                {#if showSearch}
+                    <div class="p-2">
+                        <div
+                            class="flex items-center px-4 py-1 text-muted-foreground bg-soft border rounded-md"
+                        >
+                            <input
+                                type="text"
+                                class="w-full bg-transparent text-sm focus:outline-none"
+                                oninput={handleSearch}
+                                bind:value={searchTerm}
+                                placeholder="Search"
+                            />
+                            <Search size="20" />
+                        </div>
+                    </div>
+                {/if}
+            </div>
+            <div
+                class="
+					text-primary p-2 overflow-y-auto overflow-x-clip
+				"
+                style="max-height: {sidebarBodyHeight}px;"
+            >
+                {@render belowSearch?.()}
+                {#key visibleData}
+                    <SidebarElements
+                        bind:data={visibleData}
+                        {elementRightSide}
+                        {...sidebarElementsProps}
+                    />
+                {/key}
+            </div>
+        {:else}
+            <div class="flex flex-col gap-2 p-2">
+                <Skeleton class="h-6 w-full" />
+                <Skeleton class="h-6 w-full" />
+                <Skeleton class="h-6 w-full" />
+                <Skeleton class="h-6 w-full" />
+                <Skeleton class="h-6 w-full" />
+            </div>
+        {/if}
+    </div>
+    <div
+        class="overflow-auto h-full"
+        style="
+			max-height: {sidebarContainerHeight}px;
+		"
+    >
+        {@render children()}
+    </div>
+</div>