@lobb-js/studio 0.1.31

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-soft 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-soft 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 "$lib/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,238 @@
+<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, LogOut, Workflow, X } from "lucide-svelte";
+	import Button from "$lib/components/ui/button/button.svelte";
+	import Separator from "$lib/components/ui/separator/separator.svelte";
+	import * as Tooltip from "$lib/components/ui/tooltip";
+	import * as Accordion from "$lib/components/ui/accordion/index.js";
+
+	import { ctx } from "$lib/store.svelte";
+	import { getDashboardNavs } from "../../extensions/extensionUtils";
+	import { mediaQueries } from "$lib/utils";
+	import * as Popover from "./ui/popover";
+	import { location } from "@wjfe/n-savant";
+
+	const sections: any = [
+		[
+			{
+				label: "Home",
+				href: "/",
+				icon: House,
+			},
+			{
+				label: "Collections",
+				href: "/collections",
+				icon: Library,
+			},
+			{
+				label: "Data Model",
+				href: "/datamodel/graph",
+				icon: Layers,
+			},
+			{
+				label: "Workflows",
+				href: "/workflows",
+				icon: Workflow,
+			},
+		],
+		[],
+		[],
+	];
+
+	const navs = getDashboardNavs();
+
+	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];
+	}
+
+	// adding the logout server button
+	if (!window.APP_ENV.LOBB_URL) {
+		sections[2] = [
+			...sections[2],
+			{
+				label: "Log out of the server",
+				onclick: () => {
+					localStorage.removeItem("lobb_url");
+					ctx.lobbUrl = null;
+				},
+				icon: LogOut,
+			},
+		];
+	}
+</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/monacoEditor.svelte

@@ -0,0 +1,181 @@
+<script lang="ts">
+	import { onMount, onDestroy } from "svelte";
+	import * as monaco from "monaco-editor";
+	import editorWorker from "monaco-editor/esm/vs/editor/editor.worker?worker";
+	import jsonWorker from "monaco-editor/esm/vs/language/json/json.worker?worker";
+	import cssWorker from "monaco-editor/esm/vs/language/css/css.worker?worker";
+	import htmlWorker from "monaco-editor/esm/vs/language/html/html.worker?worker";
+	import tsWorker from "monaco-editor/esm/vs/language/typescript/ts.worker?worker";
+	import { cn } from "$lib/utils";
+
+	interface Props {
+		type: "javascript" | "typescript" | "json" | "sql";
+		name: string;
+		value?: string;
+		default?: string;
+		types?: string;
+		class?: string;
+		handleCtrlSave?: () => void;
+		onChange?: (value: string) => void;
+	}
+
+	let {
+		type,
+		name,
+		value = $bindable(""),
+		class: className,
+		types,
+		handleCtrlSave,
+		onChange,
+		...props
+	}: Props = $props();
+
+	let editorContainer: HTMLDivElement;
+	let editor: monaco.editor.IStandaloneCodeEditor;
+	let model: monaco.editor.ITextModel;
+
+	if (props.default) {
+		value = props.default;
+	}
+
+	$effect(() => {
+		if (value !== undefined && editor && value !== editor.getValue()) {
+			editor.setValue(value);
+		}
+	});
+
+	self.MonacoEnvironment = {
+		getWorker(_, label) {
+			if (label === "json") {
+				return new jsonWorker();
+			}
+			if (label === "css" || label === "scss" || label === "less") {
+				return new cssWorker();
+			}
+			if (
+				label === "html" ||
+				label === "handlebars" ||
+				label === "razor"
+			) {
+				return new htmlWorker();
+			}
+			if (label === "typescript" || label === "javascript") {
+				return new tsWorker();
+			}
+			return new editorWorker();
+		},
+	};
+
+	onMount(async () => {
+		monaco.editor.defineTheme("transparentTheme", {
+			base: "vs",
+			inherit: true,
+			rules: [],
+			colors: {
+				"editor.background": "#EFEFEF00",
+				focusBorder: "#00000000",
+			},
+		});
+
+		if (type === "typescript") {
+			monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
+				target: monaco.languages.typescript.ScriptTarget.ESNext,
+				moduleResolution:
+					monaco.languages.typescript.ModuleResolutionKind.NodeJs,
+				esModuleInterop: true,
+			});
+			monaco.languages.typescript.typescriptDefaults.addExtraLib(
+				types ?? "",
+				"file:///global.d.ts",
+			);
+
+			// this is an example of importing the picocolors library types
+			// with this you can easily use the picolo types in the web editor like this
+			// import type Pico from "picocolors"
+			// function work(pc: typeof Pico) {
+			// 	pc.bold(`How are ${pc.italic(`you`)} doing?`)
+			// }
+
+			monaco.languages.typescript.typescriptDefaults.addExtraLib(
+				`export type Formatter = (input: string | number | null | undefined) => string
+				export interface Colors {
+					isColorSupported: boolean
+
+					reset: Formatter
+					bold: Formatter
+					dim: Formatter
+					italic: Formatter
+					underline: Formatter
+					inverse: Formatter
+					hidden: Formatter
+					strikethrough: Formatter
+				}`,
+				"file:///node_modules/picocolors/types.d.ts",
+			);
+			monaco.languages.typescript.typescriptDefaults.addExtraLib(
+				`import { Colors } from "./types.d.ts"
+				declare const picocolors: Colors & { createColors: (enabled?: boolean) => Colors }
+				export = picocolors`,
+				"file:///node_modules/picocolors/index.d.ts",
+			);
+		}
+
+		model = monaco.editor.createModel(
+			value,
+			type,
+			monaco.Uri.parse(`file:///${name}.ts`),
+		);
+
+		editor = monaco.editor.create(editorContainer, {
+			model: model,
+			value: value,
+			language: type,
+			automaticLayout: true,
+			theme: "transparentTheme",
+			minimap: { enabled: false },
+			glyphMargin: false,
+			overviewRulerLanes: 0,
+			hideCursorInOverviewRuler: true,
+			stickyScroll: { enabled: false },
+			lineNumbersMinChars: 2,
+			scrollBeyondLastLine: false,
+			padding: { top: 10, bottom: 1 },
+		});
+
+		editor.onDidChangeModelContent(() => {
+			value = editor.getValue();
+			if (onChange) {
+				onChange(value);
+			}
+		});
+
+		// adding duplicate line shortcut
+		editor.addCommand(
+			monaco.KeyMod.Shift | monaco.KeyMod.Alt | monaco.KeyCode.DownArrow,
+			() => editor.trigger("", "editor.action.copyLinesDownAction", null),
+		);
+		editor.addCommand(
+			monaco.KeyMod.Shift | monaco.KeyMod.Alt | monaco.KeyCode.UpArrow,
+			() => editor.trigger("", "editor.action.copyLinesUpAction", null),
+		);
+
+		editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, () => {
+			if (handleCtrlSave) {
+				handleCtrlSave();
+			}
+		});
+	});
+
+	onDestroy(() => {
+		editor?.dispose();
+		model.dispose();
+	});
+</script>
+
+<div class={cn("resize-y rounded-md border bg-soft shadow-sm h-60", className)}>
+	<div
+		bind:this={editorContainer}
+		class="editor pl-2"
+		style="height: 100%; width: 100%;"
+	></div>
+</div>