@lobb-js/studio 0.1.31 → 0.1.32

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

@@ -1,40 +0,0 @@
-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/src/lib/components/ui/button/index.ts

@@ -1,17 +0,0 @@
-import Root, {
-	type ButtonProps,
-	type ButtonSize,
-	type ButtonVariant,
-	buttonVariants,
-} from "./button.svelte";
-
-export {
-	Root,
-	type ButtonProps as Props,
-	//
-	Root as Button,
-	buttonVariants,
-	type ButtonProps,
-	type ButtonSize,
-	type ButtonVariant,
-};

package/src/lib/components/ui/checkbox/index.ts

@@ -1,6 +0,0 @@
-import Root from "./checkbox.svelte";
-export {
-	Root,
-	//
-	Root as Checkbox,
-};

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

@@ -1,37 +0,0 @@
-import { Dialog as DialogPrimitive } from "bits-ui";
-
-import Title from "./dialog-title.svelte";
-import Footer from "./dialog-footer.svelte";
-import Header from "./dialog-header.svelte";
-import Overlay from "./dialog-overlay.svelte";
-import Content from "./dialog-content.svelte";
-import Description from "./dialog-description.svelte";
-
-const Root: typeof DialogPrimitive.Root = DialogPrimitive.Root;
-const Trigger: typeof DialogPrimitive.Trigger = DialogPrimitive.Trigger;
-const Close: typeof DialogPrimitive.Close = DialogPrimitive.Close;
-const Portal: typeof DialogPrimitive.Portal = DialogPrimitive.Portal;
-
-export {
-	Root,
-	Title,
-	Portal,
-	Footer,
-	Header,
-	Trigger,
-	Overlay,
-	Content,
-	Description,
-	Close,
-	//
-	Root as Dialog,
-	Title as DialogTitle,
-	Portal as DialogPortal,
-	Footer as DialogFooter,
-	Header as DialogHeader,
-	Trigger as DialogTrigger,
-	Overlay as DialogOverlay,
-	Content as DialogContent,
-	Description as DialogDescription,
-	Close as DialogClose,
-};

package/src/lib/components/ui/input/index.ts

@@ -1,7 +0,0 @@
-import Root from "./input.svelte";
-
-export {
-	Root,
-	//
-	Root as Input,
-};

package/src/lib/components/ui/label/index.ts

@@ -1,7 +0,0 @@
-import Root from "./label.svelte";
-
-export {
-	Root,
-	//
-	Root as Label,
-};

package/src/lib/components/ui/popover/index.ts

@@ -1,17 +0,0 @@
-import { Popover as PopoverPrimitive } from "bits-ui";
-import Content from "./popover-content.svelte";
-const Root = PopoverPrimitive.Root;
-const Trigger = PopoverPrimitive.Trigger;
-const Close = PopoverPrimitive.Close;
-
-export {
-	Root,
-	Content,
-	Trigger,
-	Close,
-	//
-	Root as Popover,
-	Content as PopoverContent,
-	Trigger as PopoverTrigger,
-	Close as PopoverClose,
-};

package/src/lib/components/ui/select/index.ts

@@ -1,34 +0,0 @@
-import { Select as SelectPrimitive } from "bits-ui";
-
-import GroupHeading from "./select-group-heading.svelte";
-import Item from "./select-item.svelte";
-import Content from "./select-content.svelte";
-import Trigger from "./select-trigger.svelte";
-import Separator from "./select-separator.svelte";
-import ScrollDownButton from "./select-scroll-down-button.svelte";
-import ScrollUpButton from "./select-scroll-up-button.svelte";
-
-const Root = SelectPrimitive.Root;
-const Group = SelectPrimitive.Group;
-
-export {
-	Root,
-	Item,
-	Group,
-	GroupHeading,
-	Content,
-	Trigger,
-	Separator,
-	ScrollDownButton,
-	ScrollUpButton,
-	//
-	Root as Select,
-	Item as SelectItem,
-	Group as SelectGroup,
-	GroupHeading as SelectGroupHeading,
-	Content as SelectContent,
-	Trigger as SelectTrigger,
-	Separator as SelectSeparator,
-	ScrollDownButton as SelectScrollDownButton,
-	ScrollUpButton as SelectScrollUpButton,
-};

package/src/lib/components/ui/separator/index.ts

@@ -1,7 +0,0 @@
-import Root from "./separator.svelte";
-
-export {
-	Root,
-	//
-	Root as Separator,
-};

package/src/lib/components/ui/skeleton/index.ts

@@ -1,7 +0,0 @@
-import Root from "./skeleton.svelte";
-
-export {
-	Root,
-	//
-	Root as Skeleton,
-};

package/src/lib/components/ui/switch/index.ts

@@ -1,7 +0,0 @@
-import Root from "./switch.svelte";
-
-export {
-	Root,
-	//
-	Root as Switch,
-};

package/src/lib/components/ui/textarea/index.ts

@@ -1,7 +0,0 @@
-import Root from "./textarea.svelte";
-
-export {
-	Root,
-	//
-	Root as Textarea,
-};

package/src/lib/components/ui/tooltip/index.ts

@@ -1,18 +0,0 @@
-import { Tooltip as TooltipPrimitive } from "bits-ui";
-import Content from "./tooltip-content.svelte";
-
-const Root = TooltipPrimitive.Root;
-const Trigger = TooltipPrimitive.Trigger;
-const Provider = TooltipPrimitive.Provider;
-
-export {
-	Root,
-	Trigger,
-	Content,
-	Provider,
-	//
-	Root as Tooltip,
-	Content as TooltipContent,
-	Trigger as TooltipTrigger,
-	Provider as TooltipProvider,
-};

package/src/lib/eventSystem.ts

@@ -1,38 +0,0 @@
-import { toast } from "svelte-sonner";
-import { ctx } from "./store.svelte";
-import { openCreateDetailView, openUpdateDetailView } from "./components/detailView/store.svelte";
-
-export async function emitEvent(eventName: string, input: Record<string, any>) {
-    const workflows = ctx.meta.studio_workflows.filter(
-        (workflow) => {
-            return eventName.startsWith(workflow.eventName);
-        },
-    );
-
-    for (let index = 0; index < workflows.length; index++) {
-      const workflow = workflows[index];
-      try {
-        const localOutput = await workflow.handler(
-            input,
-            await getEventContext(),
-        );
-
-        if (localOutput) {
-            input = localOutput;
-        }
-      } catch (error) {
-        toast.error((error as any).message);
-        throw error;
-      }
-    }
-
-    return input;
-}
-
-async function getEventContext() {
-    return {
-        toast,
-        openCreateDetailView,
-        openUpdateDetailView,
-    };
-}

package/src/lib/index.ts

@@ -1,40 +0,0 @@
-import { Lobb } from "./Lobb";
-import { ctx } from "$lib/store.svelte";
-import { toast } from "svelte-sonner";
-
-export const lobb = new Lobb(ctx.lobbUrl);
-
-// logging the message if got any bad responses
-lobb.onResponse(async (response) => {
-	if (response.status >= 400) {
-		const body = await response.json();
-		toast.error(body.message);
-	}
-});
-
-export function createSet(lastNumber: number): Set<number> {
-	const set = new Set() as Set<number>;
-	for (let i = 0; i <= lastNumber; i++) {
-		set.add(i);
-	}
-	return set;
-}
-
-export function moveElement<T>(array: T[], fromIndex: number, toIndex: number) {
-	if (
-		fromIndex < 0 || fromIndex >= array.length || toIndex < 0 ||
-		toIndex >= array.length
-	) {
-		throw new Error("Index out of bounds");
-	}
-	const [element] = array.splice(fromIndex, 1);
-	array.splice(toIndex, 0, element);
-	return array;
-}
-
-export function pxToRem(px: number) {
-	const rootFontSize = parseFloat(
-		getComputedStyle(document.documentElement).fontSize,
-	);
-	return px / rootFontSize;
-}

package/src/lib/store.svelte.ts

@@ -1,21 +0,0 @@
-import type { CTX } from './store.types';
-import pkg from '../../package.json';
-
-if (!window.APP_ENV) {
-  window.APP_ENV = {};
-}
-
-if (window.APP_ENV.LOBB_URL === '%LOBB_URL%') {
-  window.APP_ENV.LOBB_URL = null;
-}
-
-export const ctx: CTX = $state.raw({
-  studioVersion: pkg.version,
-  lobbUrl: window.APP_ENV.LOBB_URL || localStorage.getItem("lobb_url"),
-  extensions: {},
-  meta: {
-    collections: null,
-    extensions: null,
-    filter: null
-  },
-});

package/src/lib/store.types.ts

@@ -1,28 +0,0 @@
-import type { Extension } from "../extensions/extension.types";
-
-interface Collection {
-    category: string;
-    owner: string;
-    fields: Record<string, any>;
-    singleton: boolean;
-}
-type Collections = Record<string, Collection>;
-
-interface Meta {
-    version: string;
-    relations: Array<any>;
-    collections: Collections;
-    extensions: Record<string, any>;
-    filter: any;
-    events: any[];
-    event_context_type: string;
-    studio_workflows: any[];
-}
-
-export interface CTX {
-    studioVersion: string;
-    lobbUrl: string | null;
-    extensions: Record<string, Extension>;
-    meta: Meta;
-    currentUrl: URL;
-}

package/src/lib/utils.ts

@@ -1,84 +0,0 @@
-import { clsx, type ClassValue } from "clsx";
-import { twMerge } from "tailwind-merge";
-
-import { fileOpen } from 'browser-fs-access';
-import { MediaQuery } from 'svelte/reactivity';
-import { ctx } from "./store.svelte";
-
-export function cn(...inputs: ClassValue[]) {
-	return twMerge(clsx(inputs));
-}
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export type WithoutChild<T> = T extends { child?: any } ? Omit<T, "child"> : T;
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export type WithoutChildren<T> = T extends { children?: any } ? Omit<T, "children"> : T;
-export type WithoutChildrenOrChild<T> = WithoutChildren<WithoutChild<T>>;
-export type WithElementRef<T, U extends HTMLElement = HTMLElement> = T & { ref?: U | null };
-
-
-export const mediaQueries = {
-    sm: new MediaQuery('min-width: 640px'),
-    md: new MediaQuery('min-width: 768px'),
-    lg: new MediaQuery('min-width: 1024px'),
-    xl: new MediaQuery('min-width: 1280px'),
-    '2xl': new MediaQuery('min-width: 1536px'),
-}
-
-export async function getFileFromUser() {
-    return await fileOpen()
-};
-
-export function getFieldRelation(collectionName: string, fieldName: string) {
-    const relations = ctx.meta.relations;
-    for (let index = 0; index < relations.length; index++) {
-        const relation = relations[index];
-        if (relation.from.collection === collectionName && relation.from.field === fieldName) {
-            return relation;
-        }
-    }
-    return null;
-};
-
-export function getDiscriminatorFieldRelation(collectionName: string, fieldName: string) {
-    const relations = ctx.meta.relations;
-    for (let index = 0; index < relations.length; index++) {
-        const relation = relations[index];
-        if (relation.from.collection === collectionName && relation.from.discriminator === fieldName) {
-            return relation;
-        }
-    }
-    return null;
-};
-
-export function recordHasChildrean(collectionName: string) {
-    for (let index = 0; index < ctx.meta.relations.length; index++) {
-        const relation = ctx.meta.relations[index];
-        if (relation.to.collection === collectionName) {
-            return true;
-        }
-    }
-    return false;
-};
-
-export function calculateDrawerWidth() {
-    const backgroundDrawerButtons = document.querySelectorAll(".backgroundDrawerButton");
-    const drawersCount = Array.from(backgroundDrawerButtons).length;
-    const width = 672 - (30 * drawersCount);
-    return width;
-};
-
-export function getChangedProperties(oldObj: Record<string, any>, newObj: Record<string, any>) {
-    const changes: Record<string, any> = {};
-    for (const key of Object.keys(newObj)) {
-        if (oldObj[key] !== newObj[key]) {
-            changes[key] = newObj[key];
-        }
-    }
-    return changes;
-}
-
-export function parseFunction(functionString: string) {
-    const functionObj = new Function("return " + functionString)();
-    return functionObj;
-};

package/src/main.ts

@@ -1,18 +0,0 @@
-import "./app.css";
-
-import { mount } from 'svelte'
-import Studio from './Studio.svelte'
-
-declare global {
-  interface Window {
-    APP_ENV: {
-        LOBB_URL: string
-    }
-  }
-}
-
-const app = mount(Studio, {
-  target: document.getElementById('app')!,
-})
-
-export default app

package/src/routes/collections/collection.svelte

@@ -1,46 +0,0 @@
-<script>
-    import { CircleSlash2 } from "lucide-svelte";
-    import DataTable from "$lib/components/dataTable/dataTable.svelte";
-    import SidebarTrigger from "$lib/components/sidebar/sidebarTrigger.svelte";
-    import { ctx } from "$lib/store.svelte";
-  import Singletone from "$lib/components/singletone.svelte";
-
-    let { collectionName } = $props();
-    let isSingletonCollection = $derived(ctx.meta.collections[collectionName].singleton);
-
-    let containerWidth = $state();
-</script>
-
-<div bind:clientWidth={containerWidth} class="h-full">
-    {#if collectionName}
-        {#if isSingletonCollection}
-            <Singletone collectionName={collectionName} />
-        {:else}
-            <DataTable
-                {collectionName}
-                tableProps={{
-                    parentWidth: containerWidth,
-                }}
-            >
-                {#snippet headerLeft()}
-                    <SidebarTrigger />
-                {/snippet}
-            </DataTable>
-        {/if}
-    {:else}
-        <div
-            class="relative flex h-full w-full flex-col items-center justify-center gap-4 text-muted-foreground"
-        >
-            <CircleSlash2 class="opacity-50" size="50" />
-            <div class="flex flex-col items-center justify-center">
-                <div>No collection selected</div>
-                <div class="text-xs">
-                    Select a collection to view its entries or create new ones
-                </div>
-            </div>
-            <div class="absolute top-0 left-0 p-2.5">
-                <SidebarTrigger />
-            </div>
-        </div>
-    {/if}
-</div>

package/src/routes/collections/collections.svelte

@@ -1,43 +0,0 @@
-<script lang="ts">
-    import type { SideBarData } from "$lib/components/sidebar/sidebarElements.svelte";
-    import Sidebar from "$lib/components/sidebar/sidebar.svelte";
-    import { ctx } from "$lib/store.svelte";
-    import Collection from "./collection.svelte";
-    import { Table } from "lucide-svelte";
-
-    let { collectionName } = $props();
-
-    const collectionsList = $state(getCollectionsList());
-
-    function getCollectionsList() {
-        const collections = ctx.meta.collections;
-        let collectionsOwners: SideBarData = Object.entries(collections).map(
-            ([collectionName, collectionValue]) => {
-                return {
-                    name: collectionName,
-                    path: collectionValue.category ?? collectionValue.owner,
-                    icon: Table,
-                    href: `/collections/${collectionName}`,
-                };
-            },
-        );
-
-        // updating the path from '__project' and '__core' to a more readable names
-        collectionsOwners = collectionsOwners.map((item) => {
-            if (item.path === "__project") {
-                item.path = "project";
-            } else if (item.path === "__core") {
-                item.path = "core";
-            }
-            return item;
-        });
-
-        return collectionsOwners;
-    }
-</script>
-
-<Sidebar title="Collections" data={collectionsList}>
-    {#key collectionName}
-        <Collection {collectionName} />
-    {/key}
-</Sidebar>

package/src/routes/data_model/dataModel.svelte

@@ -1,40 +0,0 @@
-<script lang="ts">
-    import { SvelteFlowProvider } from "@xyflow/svelte";
-    import Flow from "./flow.svelte";
-    import Sidebar from "$lib/components/sidebar/sidebar.svelte";
-    import { location } from "@wjfe/n-savant";
-    import SyncManager from "./syncManager.svelte";
-    import SidebarTrigger from "$lib/components/sidebar/sidebarTrigger.svelte";
-
-    const currentPage = $derived(location.url.pathname.split("/")[2]);
-</script>
-
-<Sidebar
-    title="Data Model"
-    showSearch={false}
-    data={[
-        {
-            name: "graph",
-            href: "/datamodel/graph",
-        },
-        {
-            name: "query_editor",
-            href: "/datamodel/query_editor",
-        },
-    ]}
->
-    <div class="relative h-full w-full">
-        {#if currentPage === "graph"}
-            <SvelteFlowProvider>
-                <div style:width="100%" style:height="100%">
-                    <Flow />
-                </div>
-            </SvelteFlowProvider>
-        {:else if currentPage === "query_editor"}
-            <SyncManager />
-        {/if}
-        <div class="absolute top-0 left-0 p-2.5">
-            <SidebarTrigger />
-        </div>
-    </div>
-</Sidebar>

package/src/routes/data_model/flow.css

@@ -1,22 +0,0 @@
-.svelte-flow {
-  --xy-edge-stroke-default: hsl(var(--muted-foreground));
-  --xy-edge-stroke-selected-default: hsl(var(--primary));
-  --xy-connectionline-stroke-default: hsl(var(--primary));
-  --xy-attribution-background-color-default: transparent;
-  --xy-minimap-background-color-default: hsl(var(--background));
-  --xy-minimap-mask-background-color-default: hsl(var(--primary) / 0.1);
-  --xy-minimap-node-background-color-default: hsl(var(--primary) / 0.2);
-  --xy-background-color-default: hsl(var(--soft));
-  --xy-background-pattern-dots-color-default: hsl(var(--muted-foreground));
-  --xy-background-pattern-lines-color-default: hsl(var(--background));
-  --xy-background-pattern-cross-color-default: hsl(var(--soft));
-  --xy-node-border-default: 1px solid hsl(var(--primary) / 0.25);
-  --xy-node-background-color-default: hsl(var(--background));
-  --xy-node-boxshadow-selected-default: 0 0 0 0.5px hsl(var(--primary) / 0.5);
-  --xy-handle-background-color-default: hsl(var(--primary));
-  --xy-handle-border-color-default: hsl(var(--background));
-  --xy-controls-button-background-color-default: hsl(var(--background));
-  --xy-controls-button-background-color-hover-default: hsl(var(--muted));
-  --xy-controls-button-border-color-default: hsl(var(--muted));
-  --xy-edge-label-background-color-default: hsl(var(--background));
-}