@lobb-js/studio 0.1.32 → 0.1.34

package/src/lib/components/detailView/utils.ts

@@ -0,0 +1,177 @@
+import Mustache from "mustache";
+import { ctx } from "$lib/store.svelte";
+import { getFieldRelation } from "$lib/utils";
+import { getField } from "../dataTable/utils";
+import type { DetailFormField } from "./detailViewForm.svelte";
+
+export function getDefaultEntry(fieldNames: string[], collectionName: string, values?: Record<string, any>) {
+    return Object.fromEntries(
+        fieldNames.map((fieldName) => {
+            let value = null;
+            const field = getField(fieldName, collectionName);
+            if (values && values[fieldName] !== undefined) {
+                value = values[fieldName];
+            } else if (field.pre_processors?.default) {
+                const defualtValue = field.pre_processors.default;
+                if (typeof defualtValue === "string") {
+                    value = Mustache.render(defualtValue, {
+                        now: new Date().toISOString(),
+                    });
+                } else {
+                    value = defualtValue;
+                }
+            }
+            return [fieldName, value];
+        }),
+    );
+}
+
+export function serializeEntry(
+        collectionName: string,
+        entry: Record<string, any>,
+        rollback: boolean = false,
+) {
+    // deep clone the object
+    entry = { ...entry }
+
+    // serialize the foreign key field's value
+    for (const [fieldName, fieldValue] of Object.entries(entry)) {
+        const isRefrenceField = Boolean(getFieldRelation(collectionName, fieldName));
+        if (isRefrenceField && fieldValue !== null && fieldValue.id !== undefined) {
+            entry[fieldName] = fieldValue.id;
+        }
+    }
+
+    // check for related collections properties and serialize them too
+    if (!rollback) {
+        const childrenRelations = ctx.meta.relations.filter((relation) => relation.to.collection === collectionName);
+        const childrenCollectionNames = childrenRelations.map((relation) => relation.from.collection);
+        for (let index = 0; index < childrenCollectionNames.length; index++) {
+            const childrenCollectionName = childrenCollectionNames[index];
+            const childrenEntries = entry[childrenCollectionName];
+            if (childrenEntries) {
+                for (let index = 0; index < childrenEntries.length; index++) {
+                    childrenEntries[index] = serializeEntry(childrenCollectionName, childrenEntries[index]);
+                }
+            }
+        }
+    }
+
+    return entry;
+}
+
+export function generateTransactionBody(
+        collectionName: string,
+        entry: Record<string, any>,
+) {
+    entry = { ...entry }
+    function handleEntryRecursive(
+        transactionBody: any[],
+        collectionName: string,
+        entry: Record<string, any>,
+        parentTransactionIndex?: number,
+    ) {
+        const parentCollectionName = parentTransactionIndex !== undefined ? transactionBody[parentTransactionIndex].collection : null;
+        const foreignKeyFieldName = ctx.meta.relations.find(relation => relation.from.collection === collectionName && relation.to.collection === parentCollectionName)?.from.field;
+        const collectionFieldNames = Object.keys(ctx.meta.collections[collectionName].fields);
+        const payload: any = {};
+        for (let index = 0; index < collectionFieldNames.length; index++) {
+            const fieldName = collectionFieldNames[index];
+            const isForeignKeyField = fieldName === foreignKeyFieldName;
+            if (isForeignKeyField) {
+                payload[fieldName] = `{{ responses[${parentTransactionIndex}].data.id }}`
+                continue;
+            }
+
+            payload[fieldName] = entry[fieldName];
+        }
+
+        const localTransactionIndex = transactionBody.length;
+        if (payload.id) {
+            const localPayload = {
+                [foreignKeyFieldName]: payload[foreignKeyFieldName],
+            };
+            transactionBody.push({
+                collection: collectionName,
+                method: "updateMany",
+                args: [
+                    localPayload,
+                    {
+                        id: payload.id
+                    }
+                ],
+            });
+        } else {
+            transactionBody.push({
+                collection: collectionName,
+                method: "createOne",
+                args: [payload],
+            });
+        }
+
+        const childrenRelations = ctx.meta.relations.filter((relation) => relation.to.collection === collectionName);
+        const childrenCollectionNames = childrenRelations.map((relation) => relation.from.collection);
+        for (let index = 0; index < childrenCollectionNames.length; index++) {
+            const childrenCollectionName = childrenCollectionNames[index];
+            const childrenEntries = entry[childrenCollectionName];
+            if (childrenEntries) {
+                for (let index = 0; index < childrenEntries.length; index++) {
+                    const childrenEntry = childrenEntries[index];
+                    handleEntryRecursive(transactionBody, childrenCollectionName, childrenEntry, localTransactionIndex);
+                }
+            }
+        }
+    }
+
+    const transactionBody: any[] = [];
+
+    handleEntryRecursive(transactionBody, collectionName, entry);
+
+    return transactionBody
+}
+
+export function parseDetailViewValues(collectionName: string, values: Record<string, any>) {
+    const forignFieldNames = ctx.meta.relations
+        .filter((relation) => relation.from.collection === collectionName)
+        .map((relation) => relation.from.field);
+    const childCollectionNames = ctx.meta.relations
+        .filter((relation) => relation.to.collection === collectionName)
+        .map((relation) => relation.from.collection);
+
+    for (const [key, value] of Object.entries(values)) {
+        if (forignFieldNames.includes(key)) {
+            if (typeof value === 'number') {
+                values[key] = {
+                    id: value,
+                }
+            }
+        } else if (childCollectionNames.includes(key)) {
+            for (let index = 0; index < values[key].length; index++) {
+                parseDetailViewValues(key, values[key][index]);
+            }
+        }
+    }
+}
+
+export function getCollectionFields(collectionName: string) {
+    let returnedData: DetailFormField[] = [];
+
+    const collectionFields = ctx.meta.collections[collectionName].fields;
+    const isSingleton = ctx.meta.collections[collectionName].singleton;
+    for (const [fieldName, value] of Object.entries(collectionFields)) {
+
+        if (isSingleton && fieldName === "id") {
+            continue;
+        }
+
+        returnedData.push({
+            type: "input",
+            key: fieldName,
+            label: fieldName,
+            disabled: fieldName == "id",
+            placeholder: fieldName == "id" ? "AUTO_GENERATED" : "",
+        })
+    }
+
+    return returnedData;
+}

package/{dist → src/lib/components}/diffViewer.svelte

@@ -6,7 +6,7 @@
 	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 "../utils";
+	import { cn } from "$lib/utils";
 
 	interface Props {
 		type: "javascript" | "typescript" | "json";

package/{dist → src/lib/components}/drawer.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { calculateDrawerWidth } from "../utils";
+    import { calculateDrawerWidth } from "$lib/utils";
     import type { Snippet } from "svelte";
     import { fade, fly } from "svelte/transition";
 

package/{dist → src/lib/components}/extensionsComponents.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import type { Snippet } from "svelte";
-	import { loadExtensionComponents } from "../extensions/extensionUtils";
+	import { loadExtensionComponents } from "$lib/extensions/extensionUtils";
 
 	interface Props {
 		name: string;

package/{dist → src/lib/components}/header.svelte

@@ -4,7 +4,7 @@
 	import { Menu, Moon, Sun } from "lucide-svelte";
 	import BreadCrumbs from "./breadCrumbs.svelte";
 	import { toggleMode, mode } from "mode-watcher";
-	import { mediaQueries } from "../utils";
+	import { mediaQueries } from "$lib/utils";
 	import { expandMiniSideBar } from "./miniSidebar.svelte";
 
 	let isSmallScreen = $derived(!mediaQueries.sm.current);

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/{dist → src/lib/components}/miniSidebar.svelte

@@ -12,14 +12,14 @@
 
 <script lang="ts">
 	import { House, Layers, Library, LogOut, Workflow, X } from "lucide-svelte";
-	import Button from "./ui/button/button.svelte";
-	import Separator from "./ui/separator/separator.svelte";
-	import * as Tooltip from "./ui/tooltip";
-	import * as Accordion from "./ui/accordion/index.js";
+	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 "../store.svelte";
-	import { getDashboardNavs } from "../extensions/extensionUtils";
-	import { mediaQueries } from "../utils";
+	import { ctx } from "$lib/store.svelte";
+	import { getDashboardNavs } from "$lib/extensions/extensionUtils";
+	import { mediaQueries } from "$lib/utils";
 	import * as Popover from "./ui/popover";
 	import { location } from "@wjfe/n-savant";
 

package/{dist → src/lib/components}/monacoEditor.svelte

@@ -6,7 +6,7 @@
 	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 "../utils";
+	import { cn } from "$lib/utils";
 
 	interface Props {
 		type: "javascript" | "typescript" | "json" | "sql";

package/{dist → src/lib/components}/rangeCalendarButton.svelte

@@ -10,10 +10,10 @@
         startOfWeek,
         today,
     } from "@internationalized/date";
-    import { cn } from "../utils.js";
-    import { buttonVariants } from "./ui/button/index.js";
-    import { RangeCalendar } from "./ui/range-calendar/index.js";
-    import * as Popover from "./ui/popover/index.js";
+    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 {

package/{dist → src/lib/components}/selectRecord.svelte

@@ -3,7 +3,7 @@
 	import Button, { type ButtonProps } from "./ui/button/button.svelte";
 	import DataTable from "./dataTable/dataTable.svelte";
 	import { getCollectionPrimaryField } from "./dataTable/utils";
-	import { emitEvent } from "../eventSystem";
+	import { emitEvent } from "$lib/eventSystem";
   import Drawer from "./drawer.svelte";
 
 	interface LocalProps extends ButtonProps {

package/{dist → src/lib/components}/setServerPage.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
 	import { toast } from "svelte-sonner";
 	import Button from "./ui/button/button.svelte";
-	import { ctx } from "../store.svelte";
-	import { Input } from "./ui/input";
+	import { ctx } from "$lib/store.svelte";
+	import { Input } from "$lib/components/ui/input";
 
 	let formData = {
 		server: "",

package/{dist/sidebar/index.d.ts → src/lib/components/sidebar/index.ts}

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

package/{dist → src/lib/components}/sidebar/sidebar.svelte

@@ -7,7 +7,7 @@
 <script lang="ts">
     import { setContext, type Snippet } from "svelte";
 
-    import { mediaQueries } from "../../utils";
+    import { mediaQueries } from "$lib/utils";
     import Skeleton from "../ui/skeleton/skeleton.svelte";
     import { Search } from "lucide-svelte";
     import SidebarElements, {

package/{dist → src/lib/components}/singletone.svelte

@@ -5,7 +5,7 @@
     import SidebarTrigger from "./sidebar/sidebarTrigger.svelte";
     import Button from "./ui/button/button.svelte";
     import { onMount } from "svelte";
-    import { lobb } from "..";
+    import { lobb } from "$lib";
   import { toast } from "svelte-sonner";
   import Skeleton from "./ui/skeleton/skeleton.svelte";
 

package/{dist → src/lib/components}/ui/accordion/accordion-content.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Accordion as AccordionPrimitive, type WithoutChild } from "bits-ui";
-	import { cn } from "../../../utils.js";
+	import { cn } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),

package/{dist → src/lib/components}/ui/accordion/accordion-item.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Accordion as AccordionPrimitive } from "bits-ui";
-	import { cn } from "../../../utils.js";
+	import { cn } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),

package/{dist → src/lib/components}/ui/accordion/accordion-trigger.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { Accordion as AccordionPrimitive, type WithoutChild } from "bits-ui";
 	import ChevronDown from "@lucide/svelte/icons/chevron-down";
-	import { cn } from "../../../utils.js";
+	import { cn } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),

package/{dist/ui/accordion/index.js → src/lib/components/ui/accordion/index.ts}

@@ -2,7 +2,16 @@ import { Accordion as AccordionPrimitive } from "bits-ui";
 import Content from "./accordion-content.svelte";
 import Item from "./accordion-item.svelte";
 import Trigger from "./accordion-trigger.svelte";
-var Root = AccordionPrimitive.Root;
-export { Root, Content, Item, Trigger, 
-//
-Root as Accordion, Content as AccordionContent, Item as AccordionItem, Trigger as AccordionTrigger, };
+
+const Root = AccordionPrimitive.Root;
+export {
+	Root,
+	Content,
+	Item,
+	Trigger,
+	//
+	Root as Accordion,
+	Content as AccordionContent,
+	Item as AccordionItem,
+	Trigger as AccordionTrigger,
+};

package/{dist → src/lib/components}/ui/alert/alert-description.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { WithElementRef } from "bits-ui";
 	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "../../../utils.js";
+	import { cn } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),

package/{dist → src/lib/components}/ui/alert/alert-title.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { HTMLAttributes } from "svelte/elements";
 	import type { WithElementRef } from "bits-ui";
-	import { cn } from "../../../utils.js";
+	import { cn } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),

package/{dist → src/lib/components}/ui/alert/alert.svelte

@@ -21,7 +21,7 @@
 <script lang="ts">
 	import type { HTMLAttributes } from "svelte/elements";
 	import type { WithElementRef } from "bits-ui";
-	import { cn } from "../../../utils.js";
+	import { cn } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),

package/{dist/ui/alert/index.d.ts → src/lib/components/ui/alert/index.ts}

@@ -2,4 +2,13 @@ import Root from "./alert.svelte";
 import Description from "./alert-description.svelte";
 import Title from "./alert-title.svelte";
 export { alertVariants, type AlertVariant } from "./alert.svelte";
-export { Root, Description, Title, Root as Alert, Description as AlertDescription, Title as AlertTitle, };
+
+export {
+	Root,
+	Description,
+	Title,
+	//
+	Root as Alert,
+	Description as AlertDescription,
+	Title as AlertTitle,
+};

package/{dist → src/lib/components}/ui/alert-dialog/alert-dialog-action.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
-	import { buttonVariants } from "../button/index.js";
-	import { cn } from "../../../utils.js";
+	import { buttonVariants } from "$lib/components/ui/button/index.js";
+	import { cn } from "$lib/utils.js";
 
 	let {
 		class: className,

package/{dist → src/lib/components}/ui/alert-dialog/alert-dialog-cancel.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
-	import { buttonVariants } from "../button/index.js";
-	import { cn } from "../../../utils.js";
+	import { buttonVariants } from "$lib/components/ui/button/index.js";
+	import { cn } from "$lib/utils.js";
 
 	let {
 		class: className,

package/{dist → src/lib/components}/ui/alert-dialog/alert-dialog-content.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { AlertDialog as AlertDialogPrimitive, type WithoutChild } from "bits-ui";
 	import AlertDialogOverlay from "./alert-dialog-overlay.svelte";
-	import { cn } from "../../../utils.js";
+	import { cn } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),

package/{dist → src/lib/components}/ui/alert-dialog/alert-dialog-description.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
-	import { cn } from "../../../utils.js";
+	import { cn } from "$lib/utils.js";
 
 	let {
 		class: className,

package/{dist → src/lib/components}/ui/alert-dialog/alert-dialog-footer.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { WithElementRef } from "bits-ui";
 	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "../../../utils.js";
+	import { cn } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),

package/{dist → src/lib/components}/ui/alert-dialog/alert-dialog-header.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { WithElementRef } from "bits-ui";
 	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "../../../utils.js";
+	import { cn } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),

package/{dist → src/lib/components}/ui/alert-dialog/alert-dialog-overlay.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
-	import { cn } from "../../../utils.js";
+	import { cn } from "$lib/utils.js";
 
 	let {
 		class: className,

package/{dist → src/lib/components}/ui/alert-dialog/alert-dialog-title.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
-	import { cn } from "../../../utils.js";
+	import { cn } from "$lib/utils.js";
 
 	let {
 		class: className,

package/src/lib/components/ui/alert-dialog/index.ts

@@ -0,0 +1,40 @@
+import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+
+import Title from "./alert-dialog-title.svelte";
+import Action from "./alert-dialog-action.svelte";
+import Cancel from "./alert-dialog-cancel.svelte";
+import Footer from "./alert-dialog-footer.svelte";
+import Header from "./alert-dialog-header.svelte";
+import Overlay from "./alert-dialog-overlay.svelte";
+import Content from "./alert-dialog-content.svelte";
+import Description from "./alert-dialog-description.svelte";
+
+const Root = AlertDialogPrimitive.Root;
+const Trigger = AlertDialogPrimitive.Trigger;
+const Portal = AlertDialogPrimitive.Portal;
+
+export {
+	Root,
+	Title,
+	Action,
+	Cancel,
+	Portal,
+	Footer,
+	Header,
+	Trigger,
+	Overlay,
+	Content,
+	Description,
+	//
+	Root as AlertDialog,
+	Title as AlertDialogTitle,
+	Action as AlertDialogAction,
+	Cancel as AlertDialogCancel,
+	Portal as AlertDialogPortal,
+	Footer as AlertDialogFooter,
+	Header as AlertDialogHeader,
+	Trigger as AlertDialogTrigger,
+	Overlay as AlertDialogOverlay,
+	Content as AlertDialogContent,
+	Description as AlertDialogDescription,
+};

package/{dist → src/lib/components}/ui/breadcrumb/breadcrumb-ellipsis.svelte

@@ -2,7 +2,7 @@
 	import Ellipsis from "@lucide/svelte/icons/ellipsis";
 	import type { WithElementRef, WithoutChildren } from "bits-ui";
 	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "../../../utils.js";
+	import { cn } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),

package/{dist → src/lib/components}/ui/breadcrumb/breadcrumb-item.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { WithElementRef } from "bits-ui";
 	import type { HTMLLiAttributes } from "svelte/elements";
-	import { cn } from "../../../utils.js";
+	import { cn } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),

package/{dist → src/lib/components}/ui/breadcrumb/breadcrumb-link.svelte

@@ -2,7 +2,7 @@
 	import type { HTMLAnchorAttributes } from "svelte/elements";
 	import type { Snippet } from "svelte";
 	import type { WithElementRef } from "bits-ui";
-	import { cn } from "../../../utils.js";
+	import { cn } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),

package/{dist → src/lib/components}/ui/breadcrumb/breadcrumb-list.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { WithElementRef } from "bits-ui";
 	import type { HTMLOlAttributes } from "svelte/elements";
-	import { cn } from "../../../utils.js";
+	import { cn } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),

package/{dist → src/lib/components}/ui/breadcrumb/breadcrumb-page.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { WithElementRef } from "bits-ui";
 	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "../../../utils.js";
+	import { cn } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),

package/{dist → src/lib/components}/ui/breadcrumb/breadcrumb-separator.svelte

@@ -2,7 +2,7 @@
 	import ChevronRight from "@lucide/svelte/icons/chevron-right";
 	import type { WithElementRef } from "bits-ui";
 	import type { HTMLLiAttributes } from "svelte/elements";
-	import { cn } from "../../../utils.js";
+	import { cn } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),