@lobb-js/studio 0.7.2 → 0.7.3

package/src/lib/components/foreingKeyInput.svelte

@@ -0,0 +1,80 @@
+<script lang="ts">
+    import Input from "./ui/input/input.svelte";
+    import SelectRecord from "./selectRecord.svelte";
+    import UpdateDetailViewButton from "./detailView/update/updateDetailViewButton.svelte";
+    import { ExternalLink } from "lucide-svelte";
+
+    interface LocalProps {
+        parentCollectionName: string;
+        collectionName: string;
+        fieldName: string;
+        value?: any;
+        destructive?: boolean;
+        entry: Record<string, any>;
+    }
+
+    let {
+        parentCollectionName,
+        collectionName,
+        fieldName,
+        value = $bindable(),
+        destructive,
+        entry,
+    }: LocalProps = $props();
+
+    const idIsZero = $derived(value?.id === 0);
+    const refrenceId = $derived(value ? value.id : null);
+    const primaryField = $derived(value ? Object.values(value)[1] : null);
+</script>
+
+<!-- THE SELECT BUTTON -->
+{#if !idIsZero}
+    <div class="relative">
+        <div
+            class="flex gap-2 absolute right-0 top-0 mr-9 h-full items-center text-xs"
+        >
+            {#if value !== null}
+                <UpdateDetailViewButton
+                    collectionName={collectionName}
+                    recordId={value.id}
+                    variant="ghost"
+                    class="h-5 w-5 px-0 py-0 text-muted-foreground hover:bg-transparent"
+                    Icon={ExternalLink}
+                ></UpdateDetailViewButton>
+            {/if}
+            {#if primaryField}
+                <div
+                    class="flex items-center bg-background rounded-full border h-6 px-3 shadow-sm"
+                >
+                    {primaryField}
+                </div>
+            {/if}
+            <SelectRecord
+                class="h-6 px-2 font-normal text-xs"
+                variant="outline"
+                {parentCollectionName}
+                {collectionName}
+                {fieldName}
+                bind:value
+                {entry}
+            />
+        </div>
+        <Input
+            placeholder={"NULL"}
+            type="number"
+            class="
+                bg-muted/30 text-xs
+                {destructive ? 'border-destructive bg-destructive/10' : ''}
+            "
+            bind:value={() => refrenceId, (v) => (value.id = v)}
+        />
+    </div>
+{:else}
+    <div class="relative z-10">
+        <Input
+            placeholder={"PARENT ID"}
+            class="bg-muted/30 text-xs"
+            disabled={true}
+        />
+    </div>
+{/if}

package/src/lib/components/header.svelte

@@ -0,0 +1,45 @@
+<script>
+	import * as Tooltip from "./ui/tooltip";
+	import Button from "./ui/button/button.svelte";
+	import { Menu, Moon, Sun } from "lucide-svelte";
+	import BreadCrumbs from "./breadCrumbs.svelte";
+	import { toggleMode, mode } from "mode-watcher";
+	import { mediaQueries } from "../utils";
+	import { expandMiniSideBar } from "./miniSidebar.svelte";
+
+	let isSmallScreen = $derived(!mediaQueries.sm.current);
+</script>
+
+<div
+	class="flex items-center justify-between border-b border-input bg-background px-3"
+>
+	<div class="flex items-center gap-4">
+		{#if isSmallScreen}
+			<Menu
+				class="h-10 text-muted-foreground hover:bg-transparent cursor-pointer hover:text-foreground"
+				style="left: 0.6rem; top: 0rem;"
+				size="18"
+				onclick={() => expandMiniSideBar()}
+			/>
+		{/if}
+		<BreadCrumbs />
+	</div>
+	<div class="flex h-full items-center gap-3">
+		<Tooltip.Root>
+			<Tooltip.Trigger>
+				<Button
+					class="h-6 w-6 text-muted-foreground hover:bg-transparent"
+					variant="ghost"
+					size="icon"
+					onclick={toggleMode}
+					Icon={$mode === "light" ? Moon : Sun}
+				></Button>
+			</Tooltip.Trigger>
+			<Tooltip.Content side="bottom" sideOffset={7.5}
+				>{$mode === "light"
+					? "Night Mode"
+					: "Light Mode"}</Tooltip.Content
+			>
+		</Tooltip.Root>
+	</div>
+</div>

package/src/lib/components/loadingTypesForMonacoEditor.ts

@@ -0,0 +1,36 @@
+/**
+ * TODO
+ * 
+ * this file shows an example of downloading the types files of a library from npm to use them in adding type support of that library in the vscode editor
+ * so the whole point is that for users to be able to paste a url from npm or jsr of a library and have all ts support from its types
+ */
+
+import { gunzipSync } from "fflate";
+import { untar } from "@andrewbranch/untar.js";
+
+async function extractTgz(buffer: ArrayBuffer) {
+    const tarBuffer = gunzipSync(new Uint8Array(buffer));
+
+    const cleanBuffer = tarBuffer.buffer.slice(
+        tarBuffer.byteOffset,
+        tarBuffer.byteOffset + tarBuffer.byteLength,
+    );
+    const files = await untar(cleanBuffer as ArrayBuffer);
+
+    const dtsFiles = [];
+
+    for (const file of files) {
+        if (file.filename.endsWith(".d.ts")) {
+            const content = new TextDecoder().decode(file.fileData);
+            dtsFiles.push({ name: file.filename, content });
+        }
+    }
+
+    return dtsFiles;
+}
+
+const tgzURL = "https://registry.npmjs.org/zod/-/zod-3.22.4.tgz";
+const response = await fetch(tgzURL);
+const arrayBuffer = await response.arrayBuffer();
+
+const files = await extractTgz(arrayBuffer);

package/src/lib/components/miniSidebar.svelte

@@ -0,0 +1,226 @@
+<script lang="ts" module>
+	let isSmallScreen = $derived(!mediaQueries.sm.current);
+	let isCollapsed = $derived(isSmallScreen);
+
+	export let collapseMiniSideBar = () => {
+		isCollapsed = true;
+	};
+	export let expandMiniSideBar = () => {
+		isCollapsed = false;
+	};
+</script>
+
+<script lang="ts">
+	import { House, Layers, Library, Workflow, X } from "lucide-svelte";
+	import Button from "../components/ui/button/button.svelte";
+	import Separator from "../components/ui/separator/separator.svelte";
+	import * as Tooltip from "../components/ui/tooltip";
+	import * as Accordion from "../components/ui/accordion/index.js";
+
+	import { getStudioContext } from "../context";
+	import { getDashboardNavs } from "../extensions/extensionUtils";
+
+	const { ctx } = getStudioContext();
+	import { mediaQueries } from "../utils";
+	import * as Popover from "./ui/popover";
+	import { location } from "@wjfe/n-savant";
+
+	const sections: any = [
+		[
+			{
+				label: "Home",
+				href: "/studio",
+				icon: House,
+			},
+			{
+				label: "Collections",
+				href: "/studio/collections",
+				icon: Library,
+			},
+			{
+				label: "Data Model",
+				href: "/studio/datamodel/graph",
+				icon: Layers,
+			},
+			{
+				label: "Workflows",
+				href: "/studio/workflows",
+				icon: Workflow,
+			},
+		],
+		[],
+		[],
+	];
+
+	const navs = getDashboardNavs(ctx);
+
+	if (navs.top) {
+		sections[0] = [...sections[0], ...navs.top];
+	}
+	if (navs.middle) {
+		sections[1] = [...sections[1], ...navs.middle];
+	}
+	if (navs.bottom) {
+		sections[2] = [...sections[2], ...navs.bottom];
+	}
+
+</script>
+
+{#snippet section(section: any)}
+	<div class="flex flex-col {isSmallScreen ? 'gap-0' : 'gap-2'}">
+		{#each section as item}
+			{#if isSmallScreen}
+				{#if !item.navs}
+					<Button
+						onclick={() => {
+							if (item.onclick) {
+								item.onclick();
+							} else {
+								location.navigate(item.href);
+							}
+							isCollapsed = true;
+						}}
+						class="flex items-center justify-start flex-nowrap text-muted-foreground text-nowrap h-10 w-full"
+						variant="ghost"
+						size="icon"
+						Icon={item.icon}
+					>
+						{item.label}
+					</Button>
+				{:else}
+					<Accordion.Root type="single">
+						<Accordion.Item class="border-b-0">
+							<Accordion.Trigger class="justify-between p-0 h-10">
+								<div
+									class="flex items-center gap-2 text-muted-foreground"
+								>
+									<item.icon size="18" />
+									<div class="text-nowrap">{item.label}</div>
+								</div>
+							</Accordion.Trigger>
+							<Accordion.Content class="pl-2 border-l">
+								{#each item.navs as childItem}
+									<Button
+										onclick={() => {
+											if (childItem.onclick) {
+												childItem.onclick();
+											} else {
+												location.navigate(item.href);
+											}
+											isCollapsed = true;
+										}}
+										class="flex items-center justify-start flex-nowrap text-muted-foreground text-nowrap h-8 w-full"
+										variant="ghost"
+										size="icon"
+										Icon={childItem.icon}
+									>
+										{childItem.label}
+									</Button>
+								{/each}
+							</Accordion.Content>
+						</Accordion.Item>
+					</Accordion.Root>
+				{/if}
+			{:else}
+				<Tooltip.Root>
+					<Tooltip.Trigger>
+						{#if !item.navs}
+							<Button
+								onclick={() => {
+									if (item.onclick) {
+										item.onclick();
+									}
+									isCollapsed = true;
+								}}
+								href={item.href}
+								class="text-muted-foreground"
+								variant="ghost"
+								size="icon"
+								Icon={item.icon}
+							></Button>
+						{:else}
+							<Popover.Root>
+								<Popover.Trigger>
+									<Button
+										class="text-muted-foreground"
+										variant="ghost"
+										size="icon"
+										Icon={item.icon}
+									></Button>
+								</Popover.Trigger>
+								<Popover.Content
+									sideOffset={17.5}
+									side="right"
+									class="popover_content w-60 mb-4 p-0"
+								>
+									<div class="py-1">
+										{#each item.navs as childItem}
+											<div
+												class="px-1 text-xs text-muted-foreground"
+											>
+												<Button
+													variant="ghost"
+													class="flex h-7 w-full justify-start p-2 text-xs font-normal text-muted-foreground"
+													Icon={childItem.icon}
+													onclick={() => {
+														if (childItem.onclick) {
+															childItem.onclick();
+														}
+													}}
+													href={childItem.href}
+												>
+													{childItem.label}
+												</Button>
+											</div>
+										{/each}
+									</div>
+								</Popover.Content>
+							</Popover.Root>
+						{/if}
+					</Tooltip.Trigger>
+					<Tooltip.Content side="right" sideOffset={15}>
+						{item.label}
+					</Tooltip.Content>
+				</Tooltip.Root>
+			{/if}
+		{/each}
+	</div>
+{/snippet}
+
+<div
+	class="
+		{isSmallScreen ? 'fixed top-0 left-0 h-full z-50' : 'relative'}
+		border-r bg-background w-screen
+		{isCollapsed
+		? 'max-w-0 p-0'
+		: `max-w-14 ${isSmallScreen ? 'px-3 pb-3' : 'p-2'}`}"
+	style="transition: max-width 150ms, padding 150ms; {isSmallScreen &&
+	!isCollapsed
+		? 'max-width: 100vw'
+		: ''}"
+>
+	{#if isSmallScreen}
+		{#if !isCollapsed}
+			<X
+				class="absolute h-10 text-muted-foreground hover:bg-transparent cursor-pointer hover:text-foreground"
+				style="left: 0.6rem; top: 0rem;"
+				size="18"
+				onclick={() => (isCollapsed = !isCollapsed)}
+			/>
+		{/if}
+	{/if}
+	<div
+		class="flex h-full flex-col justify-between gap-2 w-full overflow-hidden"
+	>
+		<!-- upper part -->
+		<div class="flex flex-col gap-2 {isSmallScreen ? 'pt-8' : ''}">
+			{@render section(sections[0])}
+			<Separator />
+			{@render section(sections[1])}
+		</div>
+		<div class="flex flex-col gap-2">
+			<Separator />
+			{@render section(sections[2])}
+		</div>
+	</div>
+</div>

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 "../utils.js";
+    import { buttonVariants } from "../components/ui/button/index.js";
+    import { RangeCalendar } from "../components/ui/range-calendar/index.js";
+    import * as Popover from "../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-muted/30 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-muted/30 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-muted/30 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-muted/30 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-muted/30 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-muted/30 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-muted/30 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-muted/30 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-muted/30 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-muted/30 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>